/* ==========================================================================
   Ana Paula Cabaleiro, hoja de estilos de la revisión de nov-2026
   Todo color, tamaño de letra, duración y radio sale de tokens.css.
   La apuesta: el mandala de la tarjeta respirando. Lo demás se queda quieto.
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--h-cabecera) + var(--e-4));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: var(--escala-0);
  line-height: var(--lh-texto);
  font-optical-sizing: auto;
  text-align: left;
}

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3 { font-weight: 300; font-size: inherit; }
a { color: inherit; }
svg { display: block; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

:focus-visible {
  outline: var(--foco);
  outline-offset: var(--foco-separacion);
}

.salto {
  position: absolute;
  left: var(--e-4);
  top: var(--e-2);
  z-index: 40;
  padding: var(--e-2) var(--e-4);
  background: var(--papel);
  translate: 0 -200%;
}
.salto:focus { translate: 0 0; }

/* ---------- Mandala: colores de las capas (viven en el sprite) ---------- */
/* Los colores viajan por variables heredadas: el sprite es un shadow tree y no ve `.hero .p-sepalo`. */
.p-sepalo { fill: var(--sepalo-mandala, var(--verde-tarjeta)); }
.p-petalo { fill: var(--salmon); }
.p-trazo { fill: var(--salmon-hondo); }
.p-encaje {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  padding-inline: var(--e-5);
  border-radius: var(--r-boton);
  background: var(--verde-hondo);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  transition: background-color var(--t-rapido) var(--curva), color var(--t-rapido) var(--curva);
}
.boton:hover { background: var(--verde-hondo-2); text-decoration: underline; text-underline-offset: 0.25em; }
.boton:active { background: var(--verde-hondo-2); }
.boton-grande { min-height: var(--h-boton); padding-inline: var(--e-5); font-size: var(--escala-0); white-space: nowrap; }
@media (min-width: 900px) { .boton-grande { padding-inline: var(--e-6); font-size: var(--escala-1); } }
.ico-wa { width: 1.5rem; height: 1.5rem; flex: none; }

/* El botón de la cabecera y del hero toma su par de colores de la tabla de tokens (variante A o B). */
.cabecera .boton,
.hero .boton { background: var(--hero-boton-fondo); color: var(--hero-boton-texto); }
.cabecera .boton:hover, .cabecera .boton:focus-visible, .cabecera .boton:active,
.hero .boton:hover, .hero .boton:focus-visible, .hero .boton:active {
  background: var(--hero-boton-fondo-hover);
  color: var(--hero-boton-texto-hover);
}

.enlace-fuerte,
.enlace-suave {
  color: var(--verde-hondo);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  transition: color var(--t-rapido) var(--curva);
}
.enlace-fuerte:hover,
.enlace-suave:hover { color: var(--tinta); }
.preguntas-falta .enlace-fuerte, .cierre-seccion .enlace-fuerte { display: inline-flex; align-items: center; min-height: 2.75rem; }
.enlace-suave {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-size: var(--escala--1);
}

/* ---------- Cabecera: el mismo campo que el hero, sin filete. Siempre sólida, nunca transparente ---------- */
.cabecera {
  --sepalo-mandala: var(--hero-sepalo);
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  height: var(--h-cabecera);
  padding-inline: var(--margen);
  background: var(--cab-campo);
  color: var(--cab-texto);
  border-bottom: var(--cab-filete);
}
.marca {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 2.75rem;
  color: var(--cab-texto);
  text-decoration: none;
}
.mini { width: 2rem; height: 2rem; flex: none; }
.marca-nombre {
  font-family: var(--f-nombre);
  font-size: calc(var(--escala-1) * 1.2);
  line-height: 1;
  white-space: nowrap;
}
.nav { display: none; }
.boton-cab { width: 2.75rem; padding: 0; }
.solo-ancho { display: none; }
.cabecera :focus-visible, .hero :focus-visible { outline: var(--hero-foco); }

@media (min-width: 900px) {
  .marca-nombre { font-size: calc(var(--escala-2) * 1.1); }
  .mini { width: 2.5rem; height: 2.5rem; }
  .boton-cab { width: auto; padding-inline: var(--e-5); }
  .solo-ancho { display: inline; }
}
/* La navegación completa entra desde 1240 px (a 1180 la marca casi toca el primer enlace); de 900 a 1239 quedan la marca y el botón, como en móvil. */
@media (min-width: 1240px) {
  .nav { display: flex; gap: clamp(var(--e-3), 1.6vw, var(--e-6)); margin-left: auto; }
  .nav a {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    font-size: var(--escala-0);
    text-decoration: none;
    background: linear-gradient(var(--cab-subrayado), var(--cab-subrayado)) no-repeat 0 calc(100% - 0.6rem) / 0 2px;
    transition: background-size var(--t-rapido) var(--curva);
  }
  .nav a:hover, .nav a:focus-visible { background-size: 100% 2px; }
}

/* ==========================================================================
   Hero: un cartel centrado. El centro de la flor cae sobre el borde superior
   del hero (que es el borde inferior de la cabecera): cuelga como en la tarjeta.
   ========================================================================== */
.hero {
  --sepalo-mandala: var(--hero-sepalo);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: clip;
  isolation: isolate;
  min-height: var(--hero-alto);
  padding: calc(var(--mandala-punta) * 1.04 + var(--e-3)) var(--margen) var(--e-6);
  background: var(--hero-campo);
  color: var(--hero-texto);
  text-align: center;
}
.hero > :not(.mandala, .encaje) { position: relative; }

.mandala {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--mandala-ancho);
  height: var(--mandala-ancho);
  translate: -50% -50%;
}
.m-atras, .m-frente, .m-centro {
  transform-box: view-box;
  transform-origin: 0 0;
  animation-duration: var(--t-respiro);
  animation-iteration-count: infinite;
  animation-timing-function: var(--curva-respiro);
}
/* La respiración corre solo con JS: sin él no hay botón de pausa (WCAG 2.2.2) y el mandala queda abierto y quieto. */
html.js .m-atras { animation-name: respira-atras; }
html.js .m-frente { animation-name: respira-frente; }
html.js .m-centro { animation-name: respira-centro; }

/* Un solo reloj de 13 s: inhalar 0 a 30.77 %, sostener hasta 46.15 %, exhalar hasta 92.31 %, pausa. */
@keyframes respira-frente {
  0%, 92.31%, 100% { scale: 0.84; }
  30.77%, 46.15% { scale: 1; }
}
@keyframes respira-atras {
  0%, 92.31%, 100% { rotate: -8deg; scale: 0.78; }
  30.77%, 46.15% { rotate: 0deg; scale: 1.04; }
}
@keyframes respira-centro {
  0%, 92.31%, 100% { scale: 0.92; }
  30.77%, 46.15% { scale: 1; }
}

.encaje { color: var(--encaje); fill: none; position: absolute; z-index: -1; pointer-events: none; }
.encaje-hero-i, .encaje-hero-d { display: none; color: var(--encaje-hero); }

.hero-titulo { width: min(100%, 62.5rem); margin-top: var(--e-3); }
.nombre {
  display: block;
  font-family: var(--f-nombre);
  font-weight: 400;
  font-size: var(--escala-nombre-hero);
  line-height: var(--lh-nombre);
  text-wrap: balance;
  color: var(--hero-texto);
}
.oficio {
  /* --f-nombre (Pinyon) solo trae las letras de text= en index.html: al cambiar nombre, oficio o firma, revisar ese juego. */
  display: block;
  margin-top: var(--e-1);
  font-family: var(--f-nombre);
  font-weight: 400;
  font-size: var(--escala-oficio);
  line-height: 1;
  color: var(--hero-suave);
}
.frase {
  display: block;
  margin-top: var(--e-5);
  font-size: var(--escala-hero-frase);
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hero-acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: min(100%, 26rem);
  margin-top: var(--e-5);
}
.hero-acciones .enlace-suave { align-self: center; color: var(--hero-suave); }
.hero-acciones .enlace-suave:hover { color: var(--hero-texto); }

/* Palabra de fase y pausa: entre el mandala y el nombre. */
.respiro {
  display: none;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
  max-width: 37.5rem;
  column-gap: var(--e-4);
}
.fase {
  display: grid;
  width: 6rem;
  font-size: var(--escala-1);
  font-style: italic;
  line-height: 1.2;
  text-align: left;
  color: var(--hero-texto);
}
.fase span {
  grid-area: 1 / 1;
  opacity: 0;
  animation-duration: var(--t-respiro);
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
html.js .fase-1 { animation-name: fase-1; }
html.js .fase-2 { animation-name: fase-2; }
html.js .fase-3 { animation-name: fase-3; }
@keyframes fase-1 {
  0%, 29.3% { opacity: 1; }
  30.77%, 98.5% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fase-2 {
  0%, 29.3% { opacity: 0; }
  30.77%, 44.65% { opacity: 1; }
  46.15%, 100% { opacity: 0; }
}
@keyframes fase-3 {
  0%, 44.65% { opacity: 0; }
  46.15%, 98.5% { opacity: 1; }
  100% { opacity: 0; }
}
.pausa {
  display: none;
  grid-row: 1;
  grid-column: 2;
  min-height: 2.75rem;
  padding: 0 var(--e-3);
  border: 0;
  background: none;
  color: var(--hero-suave);
  font: inherit;
  font-size: var(--escala--1);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
  cursor: pointer;
  transition: color var(--t-rapido) var(--curva);
}
.pausa:hover { color: var(--hero-texto); }
html.js .respiro { display: grid; }
html.js .pausa { display: inline-flex; align-items: center; }

.caption {
  width: min(100%, 22rem);
  margin-top: var(--e-4);
  font-size: var(--escala--1);
  color: var(--hero-suave);
}
.caption-mov { display: none; }
html.js .caption-mov { display: block; }
html.js .caption-quieta { display: none; }

.hero[data-pausa] :is(.m-atras, .m-frente, .m-centro, .fase span),
.hero[data-fuera] :is(.m-atras, .m-frente, .m-centro, .fase span) { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  html.js .respiro, html.js .caption-mov { display: none; }
  html.js .caption-quieta { display: block; }
}

@media (min-width: 900px) {
  .respiro { grid-template-columns: 1fr auto 1fr; }
  .fase { grid-column: 2; text-align: center; }
  .pausa { grid-column: 3; justify-self: start; margin-left: var(--e-5); }
  .hero-acciones { flex-direction: row; align-items: center; justify-content: center; width: min(100%, 62.5rem); gap: var(--e-5); }
  .hero-acciones .boton-grande { min-height: calc(var(--h-boton) + var(--e-2)); min-width: 21.25rem; }
  .hero-acciones .enlace-suave { align-self: center; }
  .caption { width: min(100%, 62.5rem); }
  .encaje-hero-i, .encaje-hero-d { display: block; width: 32.5rem; height: 32.5rem; bottom: -13.25rem; }
  .encaje-hero-i { left: -20rem; }
  .encaje-hero-d { right: -20rem; }
}
@media (min-width: 1100px) { .frase { white-space: nowrap; } }


/* ==========================================================================
   Secciones
   ========================================================================== */
.trabajo, .sobre-mi, .empezar, .preguntas, .urgencias, .cierre { padding-inline: var(--margen); }
.bajada { max-width: var(--medida); margin-bottom: var(--e-6); font-size: var(--escala-1); }

.titulo-seccion {
  max-width: 14em;
  font-size: var(--escala-3);
  font-weight: 300;
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

/* ---------- Con qué trabajo ---------- */
.trabajo { padding-block: var(--pad-m); }
.destacada { margin-top: var(--e-7); }
.voz {
  font-size: var(--escala-2);
  font-style: italic;
  font-weight: 300;
  line-height: var(--lh-titulo);
}
.voz-grande {
  font-size: var(--escala-4);
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}
.desc { margin-top: var(--e-3); color: var(--tinta-suave); max-width: var(--medida); }
.desc strong { color: var(--tinta); font-weight: 600; }
.destacada .desc { margin-top: var(--e-5); font-size: var(--escala-1); }
.filas { margin-top: var(--e-6); border-bottom: 1px solid var(--regla); }
.filas li { padding-block: var(--e-4); border-top: 1px solid var(--regla); }
.cierre-seccion { margin-top: var(--e-7); font-size: var(--escala-1); }

@media (min-width: 900px) {
  .destacada {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
  }
  .voz-grande { grid-column: 1 / 11; }
  .destacada .desc { grid-column: 6 / 13; }
  .filas li {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: var(--gutter);
    align-items: baseline;
  }
  .filas .voz { grid-column: 1 / 7; }
  .filas .desc { grid-column: 8 / 13; margin-top: 0; }
}

/* ---------- Sobre mí ---------- */
.sobre-mi {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: var(--pad-l);
  background: var(--lavado-rosa);
}
.sobre-texto p { max-width: 52ch; margin-top: var(--e-5); font-size: var(--escala-1); }
.sobre-texto .titulo-seccion { margin-bottom: var(--e-6); }
.sobre-texto .credencial {
  display: flex;
  align-items: baseline;
  gap: var(--e-4);
  margin-top: var(--e-7);
  font-size: var(--escala-0);
}
.credencial-num {
  font-size: max(calc(var(--escala-4) * 0.85), calc(var(--escala-1) * 2.2));
  font-weight: 300;
  line-height: 1;
  color: var(--verde-hondo);
  font-variant-numeric: lining-nums tabular-nums;
}
/* Sin foto: el encaje de la tarjeta ocupa el lado, cortado por el borde. */
.encaje-sobre { color: var(--salmon); opacity: 0.55; width: 22rem; height: 22rem; right: -9rem; bottom: -8rem; }

@media (min-width: 900px) {
  .encaje-sobre { width: 40rem; height: 40rem; right: -11rem; bottom: auto; top: 50%; translate: 0 -50%; }
}

/* ---------- La frase ---------- */
.frase-banda {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding: var(--pad-m) var(--margen);
  background: var(--verde-hondo);
  color: var(--papel);
}
.frase-texto {
  position: relative;
  max-width: 24em;
  font-size: var(--escala-5);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.firma {
  position: relative;
  margin-top: var(--e-6);
  font-family: var(--f-nombre);
  font-size: max(calc(var(--escala-nombre) * 0.5), calc(var(--escala-1) * 2));
  line-height: 1;
  color: var(--salmon);
}
.encaje-banda { color: var(--salmon); opacity: 0.18; width: 22rem; height: 22rem; right: -10rem; bottom: -6rem; }
@media (min-width: 900px) {
  .firma { text-align: right; }
  .encaje-banda { width: 38rem; height: 38rem; right: -12rem; top: 50%; bottom: auto; translate: 0 -50%; }
}

/* ---------- Cómo empezamos ---------- */
.empezar { padding-block: var(--pad-l) var(--pad-s); }
.pasos { position: relative; margin-top: var(--e-8); display: grid; gap: var(--e-6); }
.pasos::before {
  content: "";
  position: absolute;
  left: 1.75rem;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--verde-tarjeta);
}
.paso {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  column-gap: var(--e-4);
}
.num {
  grid-row: 1 / 3;
  align-self: start;
  background: var(--papel);
  font-size: max(var(--escala-4), calc(var(--escala-1) * 2.2));
  font-weight: 300;
  line-height: 1;
  color: var(--verde-hondo);
  font-variant-numeric: lining-nums tabular-nums;
}
.paso h3 { font-size: var(--escala-2); font-weight: 400; line-height: var(--lh-titulo); }
.paso p { margin-top: var(--e-2); max-width: var(--medida); }

.modalidades { display: grid; gap: var(--e-6); margin-top: var(--e-8); }
.modalidades h3 { font-size: var(--escala-2); font-weight: 400; }
.modalidades p { margin-top: var(--e-2); max-width: var(--medida); }

@media (min-width: 900px) {
  .pasos { grid-template-columns: repeat(3, 1fr); column-gap: var(--gutter); margin-top: var(--e-8); }
  .pasos::before { display: none; }
  .paso { display: block; padding-right: var(--e-5); }
  .paso::before {
    content: "";
    display: block;
    width: 0.625rem;
    height: 0.625rem;
    margin-bottom: var(--e-2);
    border-radius: var(--r-boton);
    background: var(--salmon);
  }
  .num { display: flex; align-items: center; gap: var(--e-4); background: none; font-size: var(--escala-4); }
  .num::after { content: ""; flex: 1; height: 1px; background: var(--verde-tarjeta); }
  .paso:last-child .num::after { display: none; }
  .paso h3 { margin-top: var(--e-4); }
  .modalidades { grid-template-columns: repeat(2, 1fr); column-gap: var(--gutter); }
}

/* ---------- Preguntas ---------- */
.preguntas { position: relative; isolation: isolate; padding-block: var(--pad-m); background: var(--lavado-rosa); }
#agenda ~ .preguntas { background: var(--papel); }
.preguntas-falta { margin-top: var(--e-5); font-size: var(--escala-1); }
.acordeon { margin-top: var(--e-6); border-bottom: 1px solid var(--regla); }
.acordeon details { border-top: 1px solid var(--regla); }
.acordeon summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  padding: var(--e-4) var(--e-7) var(--e-4) 0;
  font-size: var(--escala-1);
  line-height: var(--lh-titulo);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--curva);
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary:hover { color: var(--verde-hondo); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.acordeon summary::before,
.acordeon summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1rem;
  height: calc(var(--trazo-icono) * 1px);
  margin-top: calc(var(--trazo-icono) * -0.5px);
  background: currentColor;
}
.acordeon summary::after { rotate: 90deg; transition: rotate var(--t) var(--curva); }
.acordeon details[open] summary::after { rotate: 0deg; }
.acordeon details p { max-width: var(--medida); padding-bottom: var(--e-5); color: var(--tinta-suave); }

@media (min-width: 900px) {
  .preguntas { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); align-items: start; }
  .preguntas-lado { grid-column: 1 / 5; position: sticky; top: calc(var(--h-cabecera) + var(--e-5)); }
  .acordeon { grid-column: 6 / 13; margin-top: 0; }
}

/* ---------- Urgencias: un directorio con molde fijo ---------- */
.urgencias { padding-block: var(--pad-s); background: var(--aviso); border-block: var(--aviso-filete) solid var(--tinta); }
.urgencias-nota { margin-top: var(--e-4); font-size: var(--escala-1); max-width: var(--medida); }
.urgencias-instruccion { margin-top: var(--e-2); max-width: var(--medida); }
.aviso-zona { display: none; margin-top: var(--e-4); font-size: var(--escala--1); color: var(--tinta); }
/* Por tu zona horaria (data-pais lo pone el script del <head>): el aviso sale del CSS, sin mover el DOM. */
html[data-pais] .aviso-zona { display: block; }
html[data-pais="us"] .aviso-zona::before { content: "Por tu zona horaria, te mostramos primero Estados Unidos. Los demás siguen abajo."; }
html[data-pais="es"] .aviso-zona::before { content: "Por tu zona horaria, te mostramos primero España. Los demás siguen abajo."; }
html[data-pais="cl"] .aviso-zona::before { content: "Por tu zona horaria, te mostramos primero Chile. Los demás siguen abajo."; }
html[data-pais="br"] .aviso-zona::before { content: "Por tu zona horaria, te mostramos primero Brasil. Los demás siguen abajo."; }
.estoy-en { margin-top: var(--e-4); font-size: var(--escala--1); }
.estoy-en a { display: inline-block; min-height: 2.75rem; padding-top: var(--e-3); text-underline-offset: 0.25em; text-decoration-thickness: 2px; }

.paises { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--e-5); margin-top: var(--e-5); }
.pais, .pais-otro { padding: var(--e-3) var(--e-4); border-top: 2px solid var(--tinta); }
.pais { container-type: inline-size; }
/* El bloque grande: Argentina, o el país de quien mira. Argentina baja al grupo con su marca. */
#urg-ar,
html[data-pais="us"] #urg-us,
html[data-pais="es"] #urg-es,
html[data-pais="cl"] #urg-cl,
html[data-pais="br"] #urg-br { grid-column: 1 / -1; background: var(--papel); }
html[data-pais="us"] #urg-us,
html[data-pais="es"] #urg-es,
html[data-pais="cl"] #urg-cl,
html[data-pais="br"] #urg-br { order: -1; }
html[data-pais] #urg-ar { grid-column: auto; background: none; }
.pais-otro { grid-column: 1 / -1; border: 1px dashed var(--tinta-suave); }
.pais-cuerpo { display: block; }
.pais h3, .pais-otro h3 { font-size: var(--escala-2); font-weight: 400; line-height: var(--lh-titulo); }
.marca-ana { margin-top: var(--e-1); font-size: var(--escala--1); }
.pais-otro p { margin-top: var(--e-2); max-width: var(--medida); }

.lineas { margin-top: var(--e-4); }
.linea {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--e-4);
  align-items: baseline;
  min-height: 3rem;
  padding-block: var(--e-1);
  border-top: 1px solid var(--aviso-regla);
  color: var(--tinta);
  text-decoration: none;
}
.linea:first-child { border-top: 0; }
.linea b {
  font-size: var(--escala-numero);
  font-weight: 400;
  line-height: 1.1;
  color: var(--verde-hondo);
  font-variant-numeric: lining-nums tabular-nums;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}
.linea .tipo { font-size: var(--escala-0); font-weight: 600; }
.linea .tipo { flex: 1 1 7.5rem; }
.linea small { flex: 0 0 100%; grid-column: 1 / -1; margin-top: 3px; font-size: var(--escala--1); line-height: 1.35; color: var(--tinta-suave); }
.linea:hover b, .linea:focus-visible b { color: var(--tinta); }

/* Ancho de bloque (no de pantalla): en el bloque grande la tabla es de tres columnas (país, número, qué es). */
@container (min-width: 40rem) {
  .pais-cuerpo { display: grid; grid-template-columns: 14rem 1fr; grid-template-rows: auto 1fr; column-gap: var(--e-6); align-items: start; }
  .pais-cuerpo h3 { grid-column: 1; grid-row: 1; }
  .pais-cuerpo .marca-ana { grid-column: 1; grid-row: 2; align-self: start; }
  .pais .lineas { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; }
}
/* Con espacio, las líneas comparten columnas (números a la izquierda, qué es a la derecha). */
@container (min-width: 26rem) {
  /* La columna de números mide lo que un número de tres cifras: la etiqueta queda pegada (24 px).
     Los números largos (0800, *4141) toman su propia fila con la etiqueta debajo y no empujan la columna. */
  .lineas { display: grid; grid-template-columns: calc(var(--escala-numero) * 1.9) minmax(0, 1fr); column-gap: var(--e-5); }
  .linea { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; column-gap: normal; align-items: baseline; }
  .linea small { grid-column: 2; }
  .linea-larga { grid-template-columns: minmax(0, 1fr); }
  .linea-larga .tipo, .linea-larga small { grid-column: 1; }
}
@media (min-width: 900px) {
  .paises { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1100px) { .estoy-en { display: none; } }
.urgencias-fecha { margin-top: var(--e-4); font-size: var(--escala--2); color: var(--tinta-suave); }

/* ---------- Cierre ---------- */
.cierre {
  position: relative;
  overflow: clip;
  isolation: isolate;
  padding-block: var(--pad-l);
  background: var(--salmon);
  color: var(--tinta);
}
.cierre > :not(.encaje) { position: relative; }
.cierre-titulo {
  max-width: 10em;
  text-wrap: balance;
  font-size: var(--escala-5);
  font-weight: 300;
  line-height: var(--lh-display);
  letter-spacing: var(--tracking-display);
}
.cierre-cuerpo { display: flex; flex-direction: column; gap: var(--e-5); margin-top: var(--e-7); }
.cierre-texto { font-size: var(--escala-1); max-width: 24ch; }
.boton-cierre { min-height: var(--h-boton); }
.cierre-datos { display: flex; flex-direction: column; gap: var(--e-1); margin-top: var(--e-7); font-size: var(--escala-1); }
.cierre-datos a { display: inline-flex; align-items: center; min-height: 2.75rem; text-underline-offset: 0.25em; text-decoration-thickness: 2px; }
.cierre-datos a:hover { color: var(--verde-hondo-2); }
.reloj { margin-top: var(--e-4); font-size: var(--escala--1); }
.encaje-cierre { color: var(--papel); opacity: 0.35; width: 22rem; height: 22rem; right: -8rem; bottom: -9rem; }

@media (min-width: 900px) {
  .cierre-cuerpo { flex-direction: row; align-items: center; gap: var(--e-7); }
  .cierre-datos { flex-direction: row; gap: var(--e-8); }
  .encaje-cierre { width: 34rem; height: 34rem; right: -8rem; bottom: -12rem; }
}

/* ---------- Pie ---------- */
.pie {
  --sepalo-mandala: var(--sepalo-sobre-verde);
  display: grid;
  gap: var(--e-6);
  padding: var(--pad-s) var(--margen);
  background: var(--verde-hondo);
  color: var(--papel);
  font-size: var(--escala--1);
}
.pie :focus-visible { outline-color: var(--papel); }
.pie-marca { display: flex; gap: var(--e-4); align-items: flex-start; max-width: 34ch; }
.mini-pie { width: 3rem; height: 3rem; }
.pie-nombre {
  font-family: var(--f-nombre);
  font-size: calc(var(--escala-2) * 1.15);
  line-height: 1.1;
}
.pie-nav { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--e-4); }
.pie-nav a:last-child { grid-column: 1 / -1; }
.pie-nav a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 2px;
}
.pie-nav a:hover { text-decoration: underline; }
.pie-legal { font-size: var(--escala--2); max-width: 40ch; }

@media (min-width: 400px) { .pie-nombre { white-space: nowrap; } }
@media (min-width: 900px) {
  .pie { grid-template-columns: 1.4fr 1fr 1fr; align-items: start; }
  .pie-nav { display: flex; flex-direction: column; }
  .pie-legal { align-self: end; }
}

/* ---------- Barra fija móvil ---------- */
.barra {
  position: fixed;
  left: var(--e-4);
  right: var(--e-4);
  bottom: calc(var(--e-4) + env(safe-area-inset-bottom));
  z-index: 25;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-3);
  min-height: var(--h-boton);
  border-radius: var(--r-boton);
  border: var(--barra-borde);
  background: var(--verde-hondo);
  color: var(--papel);
  font-size: var(--escala-1);
  font-weight: 600;
  text-decoration: none;
  translate: 0 200%;
  visibility: hidden;
  transition: translate var(--t) var(--curva), visibility 0s var(--t);
}
.barra[data-visible] {
  translate: 0 0;
  visibility: visible;
  transition: translate var(--t) var(--curva);
}
@media (min-width: 900px) { .barra { display: none; } }

/* ==========================================================================
   Agenda (Cal.com). La sección solo existe cuando habilitada es true en
   js/booking.js (o en local con ?agenda=1): vive en un <template>.
   ========================================================================== */
.agenda { padding: var(--pad-m) var(--margen); background: var(--lavado-rosa); }
.agenda-nota { margin-top: var(--e-4); max-width: var(--medida); color: var(--tinta-suave); }
.agenda-panel { margin-top: var(--e-6); }
.agenda-tabs { display: flex; gap: var(--e-6); border-bottom: 1px solid var(--regla); }
.agenda-tab {
  min-height: 2.75rem;
  margin-bottom: -1px;
  padding: 0;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  font-size: var(--escala-1);
  cursor: pointer;
  transition: color var(--t-rapido) var(--curva), border-color var(--t-rapido) var(--curva);
}
.agenda-tab:hover { color: var(--verde-hondo); }
.agenda-tab.is-active { color: var(--verde-hondo); border-bottom-color: var(--verde-hondo); }
.agenda-cal { min-height: 26rem; margin-top: var(--e-5); }
.cal-slot[hidden], .is-hidden { display: none; }
.agenda-manual { margin-top: var(--e-4); }
.agenda-aviso { margin-top: var(--e-4); color: var(--granada); font-size: var(--escala--1); }
.agenda-demo .agenda-cal {
  display: grid;
  place-items: center;
  border: 2px dashed var(--granada);
  border-radius: var(--r-campo);
  background: var(--lavado-rosa);
  color: var(--tinta-suave);
}

/* Riel de progreso: una línea de 2 px pegada a la cabecera, en todos los anchos.
   Solo existe donde hay scroll() y movimiento permitido (ver bloque de scroll). */
.riel { display: none; }

/* ==========================================================================
   Scroll entre secciones (ENMIENDA-SCROLL.md, ajustada en DISENO-V2.md 5.3).
   Todo atado al scroll, solo transform, opacity y clip-path. Sin soporte o
   con movimiento reducido queda todo en su estado final y estático.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hero { view-timeline: --hero block; }
    .sobre-mi, .frase-banda, .preguntas { view-timeline: --campo block; }
    .pasos { view-timeline: --pasos block; }

    /* 1. Salida del hero: el mandala se achica hasta 0.85 y su capa de atrás gira. El texto no se mueve. */
    .mandala {
      animation: hero-sale linear both;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: --hero;
      animation-range: exit 0% exit 70%;
    }
    .m-atras > use {
      transform-box: view-box;
      transform-origin: 0 0;
      animation: hero-gira linear both;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: --hero;
      animation-range: exit 0% exit 70%;
    }
    @keyframes hero-sale { to { scale: var(--scroll-hero-escala); } }
    @keyframes hero-gira { to { rotate: var(--scroll-hero-giro); } }

    /* 2. Los campos de color se abren como un pétalo al entrar: Sobre mí, la banda de la frase y Preguntas.
       Hero, Cómo empezamos, urgencias, cierre y pie entran con corte recto.
       fill-mode backwards: pasado el rango el clip-path desaparece (none) y no recorta foco ni sombras. */
    .sobre-mi, .frase-banda, .preguntas {
      animation: abrir-campo linear backwards;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: --campo;
      animation-range: cover 0% cover var(--scroll-petalo-fin);
    }
    /* Sobre mí y Preguntas: el lavado casi no se distingue del papel, así que el pétalo se abre con un
       tinte salmón que se desvanece; en reposo vuelve al campo plano. */
    .sobre-mi::before, .preguntas::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: -1;
      background: var(--salmon);
      opacity: 0;
      animation: abrir-tinte linear backwards;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: --campo;
      animation-range: cover 0% cover var(--scroll-petalo-fin);
    }
    /* Con la agenda encendida, Preguntas pasa a papel sobre el lavado de la agenda: sin tinte. */
    #agenda ~ .preguntas::before { display: none; }
    @keyframes abrir-tinte {
      from { opacity: var(--scroll-petalo-tinte); }
      to { opacity: 0; }
    }
    @keyframes abrir-campo {
      from { clip-path: polygon(var(--scroll-petalo-lado) 100%, calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0) calc(var(--scroll-petalo-alto) * 1), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.031) calc(var(--scroll-petalo-alto) * 0.902), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.062) calc(var(--scroll-petalo-alto) * 0.808), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.094) calc(var(--scroll-petalo-alto) * 0.717), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.125) calc(var(--scroll-petalo-alto) * 0.631), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.156) calc(var(--scroll-petalo-alto) * 0.549), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.188) calc(var(--scroll-petalo-alto) * 0.471), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.219) calc(var(--scroll-petalo-alto) * 0.398), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.25) calc(var(--scroll-petalo-alto) * 0.33), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.281) calc(var(--scroll-petalo-alto) * 0.266), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.312) calc(var(--scroll-petalo-alto) * 0.208), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.344) calc(var(--scroll-petalo-alto) * 0.156), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.375) calc(var(--scroll-petalo-alto) * 0.109), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.406) calc(var(--scroll-petalo-alto) * 0.069), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.438) calc(var(--scroll-petalo-alto) * 0.036), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.469) calc(var(--scroll-petalo-alto) * 0.012), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.5) calc(var(--scroll-petalo-alto) * 0), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.531) calc(var(--scroll-petalo-alto) * 0.012), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.562) calc(var(--scroll-petalo-alto) * 0.036), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.594) calc(var(--scroll-petalo-alto) * 0.069), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.625) calc(var(--scroll-petalo-alto) * 0.109), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.656) calc(var(--scroll-petalo-alto) * 0.156), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.688) calc(var(--scroll-petalo-alto) * 0.208), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.719) calc(var(--scroll-petalo-alto) * 0.266), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.75) calc(var(--scroll-petalo-alto) * 0.33), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.781) calc(var(--scroll-petalo-alto) * 0.398), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.812) calc(var(--scroll-petalo-alto) * 0.471), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.844) calc(var(--scroll-petalo-alto) * 0.549), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.875) calc(var(--scroll-petalo-alto) * 0.631), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.906) calc(var(--scroll-petalo-alto) * 0.717), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.938) calc(var(--scroll-petalo-alto) * 0.808), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 0.969) calc(var(--scroll-petalo-alto) * 0.902), calc(var(--scroll-petalo-lado) + (100% - 2 * var(--scroll-petalo-lado)) * 1) calc(var(--scroll-petalo-alto) * 1), calc(100% - var(--scroll-petalo-lado)) 100%); }
      to { clip-path: polygon(0% 100%, 0% 0px, 3.125% 0px, 6.25% 0px, 9.375% 0px, 12.5% 0px, 15.625% 0px, 18.75% 0px, 21.875% 0px, 25% 0px, 28.125% 0px, 31.25% 0px, 34.375% 0px, 37.5% 0px, 40.625% 0px, 43.75% 0px, 46.875% 0px, 50% 0px, 53.125% 0px, 56.25% 0px, 59.375% 0px, 62.5% 0px, 65.625% 0px, 68.75% 0px, 71.875% 0px, 75% 0px, 78.125% 0px, 81.25% 0px, 84.375% 0px, 87.5% 0px, 90.625% 0px, 93.75% 0px, 96.875% 0px, 100% 0px, 100% 100%); }
    }

    /* 3. La frase de la banda se enciende palabra por palabra, antes de llegar al centro de la pantalla. */
    .frase-texto span {
      animation: enciende linear both;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: --campo;
      animation-range: cover calc(4% + var(--i) * 1.2%) cover calc(12% + var(--i) * 1.2%);
    }
    @keyframes enciende { from { opacity: var(--scroll-palabra-apagada); } }

    /* 4. La línea de los pasos se dibuja con el scroll de la sección. */
    @media (min-width: 900px) {
      .paso .num::after {
        transform-origin: left center;
        animation: traza linear both;
        animation-timing-function: var(--scroll-curva);
        animation-timeline: --pasos;
        animation-range: cover calc(12% + var(--k) * 11%) cover calc(23% + var(--k) * 11%);
      }
      .paso { --k: 0; }
      .paso:nth-child(2) { --k: 1; }
      .paso:nth-child(3) { --k: 2; }
      @keyframes traza { from { scale: 0 1; } }
    }
    @media (max-width: 899.98px) {
      .pasos::before {
        transform-origin: top center;
        animation: traza-v linear both;
        animation-timing-function: var(--scroll-curva);
        animation-timeline: --pasos;
        animation-range: cover 10% cover 55%;
      }
      @keyframes traza-v { from { scale: 1 0; } }
    }

    /* 6. Riel de progreso: una línea horizontal pegada al borde inferior de la cabecera, ligada a scroll(root). */
    .riel {
      display: block;
      position: fixed;
      z-index: 31;
      top: var(--h-cabecera);
      left: 0;
      right: 0;
      height: var(--riel-grosor);
      background: var(--riel-pista);
      pointer-events: none;
    }
    .riel span {
      display: block;
      height: 100%;
      background: var(--riel-relleno);
      transform-origin: left center;
      animation: riel-x linear both;
      animation-timing-function: var(--scroll-curva);
      animation-timeline: scroll(root block);
    }
    @keyframes riel-x { from { scale: 0 1; } }
  }
}