/* Corpórea · estilos del sitio (3 páginas: inicio, sobre-mi, preguntas-frecuentes)
   Mobile first. Colores y fuentes de 04-marca/marca.json.

   Contraste revisado (WCAG AA): café sobre crema 9.9:1 · sobre arena 7.7:1 · sobre salvia 6.9:1
   · café suave sobre crema 6.9:1 y sobre salvia 4.8:1 · arena y crema sobre café 7.7:1 y 9.9:1
   · café sobre amarillo 7.6:1. El amarillo (#F0DE8A) nunca va como texto sobre crema (1.3:1).

   Formas: botones y chips en píldora · tarjetas e imágenes con esquinas de 20 px
   · secciones como hojas con borde superior en arco (32 px de alto; 48 px en escritorio) · foto de portada en arco (eco del sol del logo).
   Tema claro fijo: la marca vive sobre crema. */

:root {
  --cafe: #543C24;
  --cafe-hondo: #3E2B18;
  --cafe-suave: #6B5440;
  --salvia: #C6D8D2;
  --amarillo: #F0DE8A;
  --amarillo-claro: #F6EAB4;
  --amarillo-dorado: #D9BE4F;
  --crema: #FEFBF6;
  --arena: #EADEC0;
  --linea: rgba(84, 60, 36, .18);
  --sombra: 0 30px 60px -36px rgba(84, 60, 36, .5);

  --f-titulo: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --f-texto: "Jost", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --margen: 1rem;
  --ancho: 72rem;
  --alto-cabecera: 4rem;
  --radio: 1.25rem;
  --hoja: 2rem;
  --curva: cubic-bezier(.16, 1, .3, 1);

  color-scheme: light;
}

@media (min-width: 40em) { :root { --margen: 1.5rem; } }
@media (min-width: 64em) { :root { --margen: 2.5rem; --alto-cabecera: 4.75rem; --hoja: 3rem; } }

/* ---------- Base ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Compensa la cabecera fija al saltar a una sección (el navegador y Lenis leen este mismo valor) */
  scroll-padding-top: var(--alto-cabecera);
}

/* Títulos usados como ancla: un respiro extra bajo la cabecera.
   Las secciones no lo necesitan: su propio relleno superior ya da el margen. */
h2[id], h3[id] { scroll-margin-top: 1.25rem; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--crema);
  color: var(--cafe);
  font: 400 1.0625rem/1.65 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 500;
  line-height: 1.1;
  text-wrap: balance;
}

p { margin: 0; }
p + p { margin-top: 1em; }

/* Lenis (scroll suave): estilos base de la librería */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Solo se cargan los pesos 400 y 500 de Jost: así no hay negritas "falsas" */
b, strong { font-weight: 500; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--cafe);
  outline-offset: 3px;
  border-radius: 6px;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.centinela { position: absolute; top: 0; left: 0; width: 1px; height: 24px; pointer-events: none; }

.oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 60;
  padding: .75rem 1rem;
  background: var(--cafe);
  color: var(--crema);
  border-radius: 999px;
  text-decoration: none;
}
.saltar:focus { top: .75rem; }

.contenedor {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

/* Cada sección es una "hoja" que se apoya sobre la anterior */
.seccion {
  position: relative;
  margin-top: calc(-1 * var(--hoja));
  padding-block: 4.5rem calc(3rem + var(--hoja));
  background: var(--crema);
  /* Borde superior en arco suave (domo de lado a lado); con scroll se "dobla" al entrar */
  border-radius: 50% 50% 0 0 / var(--hoja) var(--hoja) 0 0;
  box-shadow: 0 -20px 40px -34px rgba(84, 60, 36, .45);
}
.seccion--arena { background: var(--arena); }
.seccion--salvia { background: var(--salvia); }
.seccion--compacta { padding-block: 3.75rem calc(2.75rem + var(--hoja)); }

@media (min-width: 64em) {
  .seccion { padding-block: 7rem calc(5rem + var(--hoja)); }
  .seccion--compacta { padding-block: 5rem calc(4rem + var(--hoja)); }
}

.etiqueta {
  font: 500 .75rem/1.4 var(--f-texto);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cafe-suave);
}

.rotulo {
  font: 500 .875rem/1.4 var(--f-texto);
  color: var(--cafe-suave);
}

.titulo-seccion {
  font-size: clamp(2.25rem, 1.6rem + 2.8vw, 3.5rem);
  letter-spacing: -.01em;
}
.etiqueta + .titulo-seccion { margin-top: .75rem; }

.icono { width: 1.25rem; height: 1.25rem; flex: none; }
.loto { width: 2.25rem; height: 1.5rem; flex: none; }

/* ---------- Botones y enlaces ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 3.25rem;
  padding: .85rem 1.6rem;
  border: 1.5px solid var(--cafe);
  border-radius: 999px;
  background: var(--cafe);
  color: var(--crema);
  font: 500 1rem/1.2 var(--f-texto);
  letter-spacing: .02em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background-color .3s ease, color .3s ease, border-color .3s ease,
              transform .4s var(--curva), box-shadow .4s var(--curva);
}
.boton:active { transform: scale(.97); }
.boton .icono { transition: transform .4s var(--curva); }

.boton--amarillo { background: var(--amarillo); border-color: var(--amarillo); color: var(--cafe); }
.boton--contorno { background: transparent; color: var(--cafe); }
.boton--chico { min-height: 2.75rem; padding: .5rem 1.1rem; font-size: .9375rem; }
.boton--grande { min-height: 3.5rem; padding: 1rem 2rem; font-size: 1.0625rem; }
/* "Agenda tu sesión de orientación sin costo" no cabe en un renglón en celular: pasa a dos, parejos, sin salirse */
@media (max-width: 39.99em) {
  .boton { max-width: 100%; white-space: normal; text-wrap: balance; }
  .boton--grande { padding-inline: 1.5rem; }
}

@media (hover: hover) {
  .boton:hover {
    background: var(--cafe-hondo);
    border-color: var(--cafe-hondo);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px -16px rgba(62, 43, 24, .6);
  }
  .boton:hover .icono { transform: translateX(4px); }
  .boton--amarillo:hover { background: var(--amarillo-claro); border-color: var(--amarillo-claro); }
  .boton--contorno:hover { background: var(--cafe); color: var(--crema); }
}

.enlace-wa,
.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .3em;
}
.enlace-flecha .icono { transition: transform .4s var(--curva); }
@media (hover: hover) {
  .enlace-wa:hover, .enlace-flecha:hover { text-decoration-thickness: 2px; }
  .enlace-flecha:hover .icono { transform: translateX(4px); }
}

/* ---------- Cabecera y menú ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(254, 251, 246, .95);
  transition: box-shadow .4s ease;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .cabecera {
    background: rgba(254, 251, 246, .8);
    -webkit-backdrop-filter: saturate(1.3) blur(14px);
    backdrop-filter: saturate(1.3) blur(14px);
  }
}
@media (prefers-reduced-transparency: reduce) {
  .cabecera { background: var(--crema); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
.cabecera.con-scroll { box-shadow: 0 1px 0 var(--linea), 0 12px 30px -22px rgba(84, 60, 36, .45); }

.cabecera__fila {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  height: var(--alto-cabecera);
}
.cabecera__acciones { display: flex; align-items: center; gap: .5rem; }

/* Barra de avance de lectura (solo en navegadores con animaciones ligadas al scroll) */
.progreso {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--amarillo-dorado);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .progreso { animation: avance linear both; animation-timeline: scroll(root block); }
  }
}
@keyframes avance { to { transform: scaleX(1); } }

.marca {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  color: var(--cafe);
  text-decoration: none;
}
.marca__simbolo { width: 2.5rem; height: 2.5rem; flex: none; }
.marca__texto { display: flex; flex-direction: column; }
.marca__nombre { font: 500 1.75rem/1 var(--f-titulo); letter-spacing: .01em; }
.marca__lema {
  margin-top: .25rem;
  padding-left: .08em;
  font: 400 .5625rem/1.45 var(--f-texto);
  letter-spacing: .3em;
  text-transform: uppercase;
}
/* "Yoga, movimiento y bienestar": si no cabe en un renglón, se parte después de "movimiento" */
.marca__lema > span { white-space: nowrap; }

.solo-amplio { display: none; }
@media (min-width: 40em) { .solo-amplio { display: inline; } }

/* Menú en celular y tableta: panel que baja desde la cabecera (solo con JavaScript) */
.navegacion { display: none; }
.menu-boton { display: none; }

.js-listo .navegacion {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 100%; left: 0; right: 0;
  padding: .75rem var(--margen) 2rem;
  background: var(--crema);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 30px 40px -30px rgba(84, 60, 36, .55);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-.75rem);
  transition: opacity .35s var(--curva), transform .5s var(--curva), visibility 0s linear .5s;
}
.js-listo .navegacion a {
  padding: .6rem 0;
  font: 500 1.875rem/1.2 var(--f-titulo);
  text-decoration: none;
}
.js-listo .navegacion a[aria-current="page"] { font-style: italic; color: var(--cafe-suave); }

.menu-abierto .navegacion {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .35s var(--curva), transform .5s var(--curva);
}
@media (prefers-reduced-motion: no-preference) {
  .menu-abierto .navegacion a { animation: subir .6s var(--curva) both; }
  .menu-abierto .navegacion a:nth-child(2) { animation-delay: .05s; }
  .menu-abierto .navegacion a:nth-child(3) { animation-delay: .1s; }
  .menu-abierto .navegacion a:nth-child(4) { animation-delay: .15s; }
  .menu-abierto .navegacion a:nth-child(5) { animation-delay: .2s; }
}

.js-listo .menu-boton {
  display: inline-grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  padding: 0;
  border: 1.5px solid var(--linea);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Celulares de menos de 375 px: con el lema largo ("Yoga, movimiento y bienestar") la cabecera no cabía
   y el sitio se movía de lado. Logo y botones un poco más compactos; desde 375 px no cambia nada. */
@media (max-width: 23.4em) {
  .cabecera__fila { gap: .5rem; }
  .cabecera__acciones { gap: .375rem; }
  .cabecera .marca { gap: .4rem; }
  .cabecera .marca__simbolo { width: 2.125rem; height: 2.125rem; }
  .cabecera .marca__nombre { font-size: 1.5rem; }
  .cabecera .marca__lema { font-size: .5rem; letter-spacing: .16em; }
  .cabecera .boton--chico { padding-inline: .8rem; }
  .js-listo .menu-boton { width: 2.5rem; height: 2.5rem; }
}
.menu-boton__lineas { position: relative; width: 1.1rem; height: 8px; }
.menu-boton__lineas::before,
.menu-boton__lineas::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .4s var(--curva), top .4s var(--curva);
}
.menu-boton__lineas::before { top: 0; }
.menu-boton__lineas::after { top: 6.5px; }
.menu-abierto .menu-boton__lineas::before { top: 3.25px; transform: rotate(45deg); }
.menu-abierto .menu-boton__lineas::after { top: 3.25px; transform: rotate(-45deg); }

@media (min-width: 64em) {
  .marca__simbolo { width: 2.875rem; height: 2.875rem; }
  .marca__nombre { font-size: 2rem; }
  .marca__lema { font-size: .625rem; }

  .js-listo .menu-boton { display: none; }
  .navegacion,
  .js-listo .navegacion {
    display: flex;
    flex-direction: row;
    gap: 2rem;
    position: static;
    margin-left: auto;
    margin-right: 1rem;
    padding: 0;
    background: none;
    box-shadow: none;
    border-radius: 0;
    visibility: visible;
    opacity: 1;
    transform: none;
  }
  .navegacion a,
  .js-listo .navegacion a {
    position: relative;
    padding: .5rem 0;
    font: 400 .9375rem/1.4 var(--f-texto);
    text-decoration: none;
  }
  .js-listo .navegacion a[aria-current="page"] { font-style: normal; color: var(--cafe); }
  .navegacion .solo-menu { display: none; }
  .navegacion a::after {
    content: "";
    position: absolute;
    left: 0; right: 0; bottom: .25rem;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .4s var(--curva);
  }
  .navegacion a:hover::after,
  .navegacion a[aria-current="page"]::after { transform: scaleX(1); }
}

/* ---------- Anillo de sol (decorativo, como el del logo) ---------- */

.sol {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  border: solid var(--amarillo);
  pointer-events: none;
}

/* ---------- 1. Portada ---------- */

.portada { padding-block: 1rem calc(3.5rem + var(--hoja)); overflow: hidden; }

.portada__rejilla { display: grid; gap: 1.75rem; }

.portada__foto { position: relative; isolation: isolate; }
.portada__foto picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--arena);
}
.portada__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 28%;
}
.portada__foto .sol {
  width: 9rem; height: 9rem;
  border-width: .75rem;
  top: -1.25rem; right: -2.5rem;
}

.portada__texto h1 {
  font-size: clamp(2.25rem, 1.5rem + 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -.015em;
}
.portada__texto h1 span { display: block; }

.portada__subtitulo {
  margin-top: 1rem;
  max-width: 34rem;
  font-size: 1.125rem;
  line-height: 1.6;
}
.portada__texto .boton { margin-top: 1.5rem; }

@media (max-width: 23.99em) {
  .portada__texto .boton { width: 100%; }
}
@media (min-width: 30em) and (max-width: 47.99em) {
  .portada__foto img { aspect-ratio: 3 / 2; }
}

/* Franja de confianza, debajo de la portada */
.credenciales {
  display: grid;
  gap: 1.25rem;
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--linea);
  list-style: none;
}
.credenciales li { display: flex; flex-direction: column; gap: .2rem; }
.credenciales strong { font: 500 1.75rem/1.1 var(--f-titulo); }
.credenciales__texto { font-size: .9375rem; color: var(--cafe-suave); }

@media (min-width: 40em) {
  .credenciales { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
}

/* Diseño dividido desde tableta: las fotos miden ~1000 px, así se ven nítidas */
@media (min-width: 48em) {
  .portada { padding-block: 2rem calc(4rem + var(--hoja)); }
  .portada__rejilla {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
    align-items: center;
    gap: 2.5rem;
    min-height: min(calc(100svh - var(--alto-cabecera) - 13rem), 40rem);
  }
  .portada__foto { order: 2; justify-self: end; width: 100%; max-width: 28rem; }
  .portada__foto picture {
    /* Arco: medio círculo arriba, esquinas suaves abajo */
    border-radius: 50% 50% var(--radio) var(--radio) / 40% 40% var(--radio) var(--radio);
  }
  .portada__foto img { aspect-ratio: 4 / 5; object-position: 50% 30%; }
  .portada__foto .sol {
    width: 62%; height: auto; aspect-ratio: 1;
    border-width: 1rem;
    top: -2.25rem; right: -3rem;
  }
  /* Cada frase en una línea: el tamaño sigue al ancho de la columna */
  .portada__texto h1 { font-size: clamp(1.95rem, 4.1vw, 3.375rem); }
  .portada__subtitulo { font-size: 1.1875rem; margin-top: 1.25rem; }
  .portada__texto .boton { margin-top: 2rem; }
  .credenciales { margin-top: 3.5rem; }
}

@media (min-width: 64em) {
  .portada__rejilla { gap: 4rem; }
  .portada__subtitulo { font-size: 1.25rem; margin-top: 1.5rem; }
  .portada__texto .boton { margin-top: 2.25rem; }
  .credenciales strong { font-size: 2.125rem; }
}

/* Encabezado de las páginas internas */
.pagina-cabeza { padding-block: 1.5rem calc(3rem + var(--hoja)); overflow: hidden; }
.migas {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: 1.5rem;
  font-size: .875rem;
  color: var(--cafe-suave);
}
.migas a { text-underline-offset: .25em; }
.pagina-cabeza h1 {
  font-size: clamp(2.5rem, 1.7rem + 3.6vw, 4.25rem);
  line-height: 1.08;
  letter-spacing: -.015em;
}
.pagina-cabeza__rejilla { display: grid; gap: 2rem; }
.pagina-cabeza__foto picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--arena);
}
.pagina-cabeza__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 18%;
}

.pagina-cabeza__intro { margin-top: 1.5rem; max-width: 34rem; }
.pagina-cabeza--simple h1 { max-width: 14ch; }
.historia__enlace { margin-top: 2rem; }

@media (min-width: 48em) {
  .pagina-cabeza { padding-block: 3rem calc(4.5rem + var(--hoja)); }
  .pagina-cabeza__rejilla {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    gap: 3rem;
  }
  .pagina-cabeza__foto { justify-self: end; width: 100%; max-width: 26rem; }
  .pagina-cabeza__foto picture { border-radius: 50% 50% var(--radio) var(--radio) / 40% 40% var(--radio) var(--radio); }
  .pagina-cabeza__foto img { aspect-ratio: 4 / 5; }
}

/* ---------- 2. Para quién es ---------- */

.situaciones {
  display: grid;
  gap: 1.75rem;
  margin-top: 2.25rem;
  list-style: none;
}
.situaciones li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: 1rem;
  align-items: start;
  font-size: 1.125rem;
  line-height: 1.5;
}
.situaciones .loto { width: 2.5rem; height: 1.65rem; margin-top: .1rem; }

@media (min-width: 48em) {
  .situaciones { grid-template-columns: 1fr 1fr; gap: 2.5rem 3rem; }
}
@media (min-width: 64em) {
  /* Rejilla desplazada a la derecha: espacio en blanco intencional a la izquierda */
  .situaciones { margin-left: 33.333%; margin-top: 3rem; gap: 3rem 4rem; }
  .situaciones li { font-size: 1.1875rem; }
}

/* ---------- 3. Sobre mí (resumen en inicio) ---------- */

.sobre {
  display: grid;
  gap: 1.75rem;
  grid-template-areas: "cabeza" "foto" "texto";
}
.sobre__cabeza { grid-area: cabeza; }
.sobre__foto { grid-area: foto; position: relative; isolation: isolate; }
.sobre__texto { grid-area: texto; max-width: 36rem; }

.sobre__foto picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radio);
  background: var(--arena);
}
.sobre__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 20%;
}
/* Bloque salvia desfasado detrás de la foto (decorativo) */
.sobre__foto::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 1.25rem -.5rem -1rem 1.25rem;
  background: var(--salvia);
  border-radius: var(--radio);
}

.sobre__destacado { font: italic 500 1.5rem/1.35 var(--f-titulo); }
.sobre__texto > * + * { margin-top: 1.25rem; }

@media (min-width: 56em) {
  .sobre {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-areas: "foto ." "foto cabeza" "foto texto" "foto .";
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: 5rem;
    row-gap: 1.75rem;
  }
  .sobre__foto::before { inset: 2rem -1.5rem -1.5rem 2rem; }
  .sobre__destacado { font-size: 1.75rem; }
}

/* ---------- Historia completa (página sobre-mi) ---------- */

.historia { display: grid; gap: 3rem; }
.historia__texto { max-width: 40rem; font-size: 1.125rem; }
.historia__texto .sobre__destacado { margin-top: 1.75rem; }

.experiencia { display: grid; gap: 2rem; align-content: start; }
.cifras { display: grid; gap: 1.5rem; list-style: none; }
.cifras li { display: flex; flex-direction: column; gap: .2rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.cifras strong { font: 500 2rem/1.1 var(--f-titulo); }
.cifras__texto { font-size: .9375rem; color: var(--cafe-suave); }

.formacion { display: grid; gap: .75rem; list-style: none; font-size: 1rem; }
.formacion li { display: grid; grid-template-columns: 1.75rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.formacion .loto { width: 1.75rem; height: 1.2rem; margin-top: .2rem; }

@media (min-width: 60em) {
  .historia { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 5rem; align-items: start; }
  .experiencia { position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
}

/* ---------- 4. Acompañamientos ---------- */

.selector { display: none; }

.planes {
  position: relative;
  display: grid;
  gap: 1.25rem;
  margin-top: 2rem;
}

.plan {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.375rem;
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  transition: transform .6s var(--curva), box-shadow .6s var(--curva);
}

.plan__sello {
  align-self: flex-start;
  margin-bottom: 1rem;
  padding: .3rem .85rem;
  background: var(--amarillo);
  color: var(--cafe);
  border-radius: 999px;
  font: 500 .8125rem/1.3 var(--f-texto);
  letter-spacing: .02em;
}

.plan__nombre { font-size: clamp(1.875rem, 1.6rem + 1.4vw, 2.5rem); }
.plan__nombre span { font-style: italic; white-space: nowrap; }

.plan__lema {
  margin-top: .75rem;
  font: 500 1.3125rem/1.35 var(--f-titulo);
}

.formato {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-top: 1.25rem;
  list-style: none;
}
.formato li {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .4rem .8rem .4rem .65rem;
  border-radius: 999px;
  background: rgba(198, 216, 210, .5);
  font-size: .875rem;
  line-height: 1.3;
}
.formato .icono { width: 1.05rem; height: 1.05rem; }

/* Las 3 etapas como línea de tiempo */
.etapas { margin-top: 1.5rem; }
.etapas__lista {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
  margin-top: .6rem;
  padding-top: 1.1rem;
  list-style: none;
}
.etapas__lista::before {
  content: "";
  position: absolute;
  top: .3rem; left: .3rem; right: 1rem;
  height: 1px;
  background: currentColor;
  opacity: .35;
  transform-origin: left;
}
.etapas__lista li { position: relative; font-size: .875rem; line-height: 1.35; }
.etapas__lista li::before {
  content: "";
  position: absolute;
  top: -1.1rem; left: 0;
  width: .625rem; height: .625rem;
  border-radius: 50%;
  background: var(--amarillo);
}
.etapas__mes {
  display: block;
  margin-bottom: .15rem;
  font: italic 500 1.0625rem/1.2 var(--f-titulo);
}

/* Desplegable "Para quién es y qué incluye" */
.plan__detalle { margin-top: 1.5rem; border-top: 1px solid var(--linea); }
.plan__detalle summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.25rem;
  padding-block: .75rem;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.plan__detalle summary::-webkit-details-marker { display: none; }
.plan__detalle-cuerpo { padding-bottom: .75rem; }
.plan__detalle-cuerpo .rotulo { margin-bottom: .35rem; }
.plan__detalle-cuerpo .rotulo:not(:first-child) { margin-top: 1.25rem; }

.incluye { display: grid; gap: .55rem; list-style: none; }
.incluye li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: .6rem; align-items: start; }
.incluye .icono { margin-top: .2rem; }

.plan__precio { margin-top: auto; padding-top: 1.5rem; }
.plan__precio .rotulo {
  padding-top: 1.25rem;
  border-top: 1px solid var(--linea);
  margin-bottom: .35rem;
}
.precio {
  font: 500 clamp(2.125rem, 1.8rem + 1.5vw, 2.75rem)/1.05 var(--f-titulo);
  letter-spacing: -.01em;
}
.precio__antes { display: block; margin-bottom: .1rem; font: italic 500 1.375rem/1.2 var(--f-titulo); }
.precio__monto { white-space: nowrap; }
.precio__moneda { font-size: .55em; letter-spacing: .04em; }
.precio__nota { margin-top: .4rem; font-size: 1rem; }

/* Cupo limitado: discreto, entre la inversión y el botón */
.plan__cupo {
  display: grid;
  grid-template-columns: .5rem minmax(0, 1fr);
  column-gap: .75rem;
  margin-top: 1.25rem;
  padding: .875rem 1rem;
  border-radius: .875rem;
  background: rgba(254, 251, 246, .07);
  font-size: .875rem;
  line-height: 1.45;
  color: var(--arena);
}
.plan__cupo::before {
  content: "";
  grid-row: span 2;
  width: .5rem; height: .5rem;
  margin-top: .45rem;
  border-radius: 50%;
  border: 1.5px solid var(--amarillo);
}
.plan__cupo-titulo { font: italic 500 1.0625rem/1.3 var(--f-titulo); color: var(--amarillo); }
.plan__cupo p + p { margin-top: .15rem; }

.plan__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
  margin-top: 1.25rem;
}
.plan__acciones .enlace-wa { align-self: center; }

/* Tarjeta recomendada: fondo café, texto crema */
.plan--destacado { background: var(--cafe); color: var(--crema); }
.plan--destacado .rotulo { color: var(--arena); }
.plan--destacado .formato li { background: rgba(254, 251, 246, .1); }
.plan--destacado .etapas__mes { color: var(--amarillo); }
.plan--destacado .incluye .icono { color: var(--amarillo); }
.plan--destacado .plan__detalle,
.plan--destacado .plan__precio .rotulo { border-top-color: rgba(234, 222, 192, .3); }
.plan--destacado .signo { border-color: rgba(234, 222, 192, .4); }
.plan--destacado :focus-visible { outline-color: var(--amarillo); }

@media (hover: hover) and (min-width: 60em) {
  .plan:hover { transform: translateY(-6px); box-shadow: 0 40px 70px -36px rgba(84, 60, 36, .6); }
}

/* Celular y tableta: pestañas "Método Corpórea | Prefiero empezar con un mes".
   Solo se ve la tarjeta elegida; sin JavaScript se ven las dos, una debajo de otra. */
@media (max-width: 59.99em) {
  .js-listo .selector {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-top: 1.75rem;
    padding: .3rem;
    background: rgba(254, 251, 246, .5);
    border-radius: 1.5rem;
  }
  .selector__opcion {
    position: relative;
    z-index: 1;
    min-height: 2.75rem;
    padding: .5rem .75rem;
    border: 0;
    border-radius: 1.25rem;
    background: none;
    font: 500 .875rem/1.25 var(--f-texto);
    color: var(--cafe-suave);
    text-wrap: balance;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color .4s ease;
  }
  .selector__opcion[aria-pressed="true"] { color: var(--cafe); }
  .selector__marca {
    position: absolute;
    z-index: 0;
    top: .3rem; bottom: .3rem; left: .3rem;
    width: calc((100% - .6rem) / 2);
    background: var(--crema);
    border-radius: 1.25rem;
    box-shadow: 0 6px 18px -10px rgba(84, 60, 36, .55);
    transition: transform .55s var(--curva);
  }
  .selector[data-activo="1"] .selector__marca { transform: translateX(100%); }

  .planes { margin-top: 1.25rem; }
  .js-listo .planes > .plan { display: none; }
  .js-listo .planes[data-activo="0"] > .plan:nth-child(1),
  .js-listo .planes[data-activo="1"] > .plan:nth-child(2) { display: flex; }
}

@media (max-width: 59.99em) and (prefers-reduced-motion: no-preference) {
  .js-listo .planes.cambiando > .plan { animation: tarjeta-entra .6s var(--curva-n) both; }
}
@keyframes tarjeta-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (min-width: 40em) {
  .plan { padding: 2.25rem; }
  .plan__acciones { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem 1.5rem; }
  .plan__acciones .enlace-wa { align-self: auto; }
}

@media (min-width: 60em) {
  .planes { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem; margin-top: 2.5rem; }
  .plan { padding: 2.75rem; }
}

/* ---------- 5. Cómo funciona (recorrido) ---------- */

.proceso {
  position: relative;
  display: grid;
  gap: 2.25rem;
  margin-top: 2.5rem;
  list-style: none;
}
/* Línea que une los pasos: vertical en celular, horizontal en escritorio */
.proceso::before {
  content: "";
  position: absolute;
  top: 1.5rem; bottom: 1.5rem; left: 1.5rem;
  width: 1px;
  background: var(--linea);
  transform-origin: top;
}
.proceso__paso {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr);
  column-gap: 1.25rem;
  align-items: start;
}
.proceso__num {
  position: relative;
  z-index: 1;
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 3rem; height: 3rem;
  border-radius: 50%;
  background: var(--amarillo);
  color: var(--cafe);
  font: 500 1.375rem/1 var(--f-titulo);
  box-shadow: 0 0 0 6px var(--crema);
}
.proceso__titulo { margin-top: .4rem; font-size: 1.75rem; }
.proceso__paso p { margin-top: .5rem; max-width: 32rem; }
.proceso__accion { margin-top: 2.75rem; }

@media (min-width: 56em) {
  .proceso {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 4.5fr);
    gap: 3.5rem;
    margin-top: 3.5rem;
  }
  .proceso::before {
    top: 1.75rem; bottom: auto; left: 1.75rem; right: 0;
    width: auto; height: 1px;
    transform-origin: left;
  }
  .proceso__paso { display: block; }
  .proceso__num { width: 3.5rem; height: 3.5rem; font-size: 1.625rem; }
  .proceso__titulo { margin-top: 1.5rem; font-size: 1.875rem; }
  .proceso__accion { margin-top: 3.5rem; }
}

/* ---------- 6. Lo que he visto en mis alumnas ---------- */

.casos { display: grid; gap: 2.75rem; margin-top: 2.5rem; }
.caso { display: grid; gap: 1rem; margin: 0; }
.caso blockquote { margin: 0; }
.caso blockquote p {
  font: 500 clamp(1.375rem, 1.15rem + 1vw, 1.875rem)/1.35 var(--f-titulo);
  letter-spacing: -.005em;
}
.caso blockquote { quotes: "\201C" "\201D"; }
.caso blockquote > p:first-child::before { content: open-quote; }
.caso blockquote > p:last-of-type::after { content: close-quote; }
.caso blockquote p + p { margin-top: .75em; }

/* Historia completa en la página de testimonios: "Antes" y "Lo que cambió", en texto normal */
.caso__historia { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--linea); }
.caso__historia .rotulo { margin-bottom: .35rem; }
.caso__historia .rotulo:not(:first-child) { margin-top: 1.25rem; }
.caso .caso__historia p:not(.rotulo) { font: 400 1rem/1.6 var(--f-texto); letter-spacing: 0; }
.caso .caso__historia .rotulo { font: italic 500 1.1875rem/1.3 var(--f-titulo); color: var(--cafe); }
/* Si solo hay un caso, ocupa una columna de lectura en vez de media pantalla */
.muro--casos:has(> :only-child) { columns: 1; max-width: 40rem; }
.caso figcaption { font-size: .9375rem; letter-spacing: .02em; color: var(--cafe-suave); }
.caso figcaption strong { color: var(--cafe); }
.casos__mas { margin-top: 2.5rem; }

/* Inicio en celular: carrusel deslizable, una tarjeta por testimonio y todas del mismo alto (la siguiente asoma).
   Las capturas van en una tarjeta oscura del color de su app (rellena debajo del mensaje), con el nombre abajo. */
@media (max-width: 55.99em) {
  .casos--inicio {
    grid-auto-flow: column;
    grid-auto-columns: 86%;
    gap: .875rem;
    align-items: stretch;
    margin-inline: calc(-1 * var(--margen));
    padding: .25rem var(--margen) 1rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margen);
    scrollbar-width: none;
  }
  .casos--inicio::-webkit-scrollbar { display: none; }
  .casos--inicio > * {
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    border-radius: var(--radio);
    overflow: hidden;
  }
  .casos--inicio .caso { gap: 1rem; padding: 1.5rem 1.375rem; background: var(--crema); }
  .casos--inicio .caso blockquote { margin-block: auto; }
  .casos--inicio .caso blockquote p { font-size: 1.3125rem; }
  .casos--inicio .captura { max-width: none; margin-top: 0; background: #0a1215; box-shadow: var(--sombra); }
  .casos--inicio .captura--ana { background: #000; }
  .casos--inicio .captura picture { border-radius: 0; box-shadow: none; background: none; }
  .casos--inicio .captura__ampliar { border-radius: 0; }
  .casos--inicio .captura figcaption { margin-top: auto; padding: .875rem 1.125rem 1rem; color: var(--arena); }
  .casos--inicio .captura figcaption strong { color: var(--crema); }
  .casos__mas { margin-top: 1.75rem; }
}
@media (min-width: 40em) and (max-width: 55.99em) {
  .casos--inicio { grid-auto-columns: 20rem; }
}
/* Puntos del carrusel: marcan en qué tarjeta vas (los crea js/sitio.js) */
.puntos { display: flex; justify-content: center; gap: .45rem; margin-top: .375rem; }
.puntos span {
  width: .45rem; height: .45rem;
  border-radius: 999px;
  background: var(--cafe);
  opacity: .22;
  transition: width .45s var(--curva), opacity .45s var(--curva);
}
.puntos span.activo { width: 1.5rem; opacity: .85; }
@media (min-width: 56em) { .puntos { display: none; } }
@media (prefers-reduced-motion: reduce) { .puntos span { transition: none; } }

/* Página de testimonios: muro de tarjetas de distintas alturas */
.muro { columns: 1; column-gap: 1.25rem; }
.muro > * { break-inside: avoid; margin-bottom: 1.25rem; }
.tarjeta {
  padding: 1.75rem 1.5rem;
  background: var(--crema);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.tarjeta blockquote p { font-size: clamp(1.25rem, 1.12rem + .5vw, 1.5rem); }
.tarjeta--caso { background: var(--salvia); box-shadow: none; }
.tarjeta--caso figcaption { color: var(--cafe-suave); }
.muro--casos { margin-top: 2.25rem; }

/* Mensajes de agradecimiento: capturas reales, enmarcadas como tarjetas */
.capturas { display: grid; gap: 1.75rem; }
.muro--textos { margin-top: 2.75rem; }
.captura { margin: 0; max-width: 28rem; }
.captura picture {
  display: block;
  overflow: hidden;
  border-radius: var(--radio);
  background: #111;
  box-shadow: var(--sombra);
}
.captura img { width: 100%; }

/* La captura es un botón: al tocarla se amplía */
.captura__ampliar {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: var(--radio);
  background: none;
  cursor: zoom-in;
  -webkit-tap-highlight-color: transparent;
}
.captura__ampliar:focus-visible { outline-offset: 4px; }
/* Etiqueta que avisa que la captura se puede ampliar ("Toca para ampliar" en celular, "Ampliar" con mouse) */
.captura__lupa {
  position: absolute;
  /* Arriba, sobre el encabezado del chat: así no tapa el mensaje */
  top: .55rem; right: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .75rem .4rem .55rem;
  border-radius: 999px;
  background: rgba(254, 251, 246, .94);
  color: var(--cafe);
  font: 500 .8125rem/1 var(--f-texto);
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5);
  transition: transform .4s var(--curva);
}
.captura__lupa .icono { width: 1.05rem; height: 1.05rem; }
/* En la captura de Ana el nombre va más al centro: la etiqueta baja a la esquina vacía de abajo */
.captura--ana .captura__lupa { top: auto; bottom: .55rem; }
/* En la de Marco, la imagen va llena de texto: la etiqueta se centra sobre la marca "Hoy" (al 12 % del alto) */
.captura--marco .captura__lupa { top: calc(12% - .9rem); left: 0; right: 0; width: max-content; margin-inline: auto; }
.solo-raton { display: none; }
@media (hover: hover) and (pointer: fine) {
  .solo-tactil { display: none; }
  .solo-raton { display: inline; }
  .captura__ampliar:hover .captura__lupa { transform: scale(1.06); }
}
/* Un pulso suave, dos veces, cuando la captura aparece: invita a tocarla */
@media (prefers-reduced-motion: no-preference) {
  .captura.visible .captura__lupa { animation: llamar 1.1s var(--curva) .9s 2; }
}
@keyframes llamar { 0%, 100% { transform: none; } 45% { transform: scale(1.09); } }

/* Visor a pantalla completa (en celular, la imagen va de orilla a orilla) */
.visor {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  max-width: none; max-height: none;
  margin: 0;
  padding: calc(env(safe-area-inset-top, 0px) + 4rem) 0 2rem;
  border: 0;
  background: rgba(28, 20, 12, .97);
  color: var(--crema);
}
.visor[open] { display: flex; align-items: center; justify-content: center; }
.visor::backdrop { background: transparent; }
.visor__figura { width: 100%; max-width: 46rem; margin: 0; }
.visor__imagen { display: block; width: 100%; height: auto; }
.visor__pie { margin-top: 1rem; padding-inline: var(--margen); font-size: .9375rem; color: var(--arena); text-align: center; }
.visor__pie strong { color: var(--crema); }
.visor__cerrar {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + .75rem);
  right: .75rem;
  display: grid;
  place-items: center;
  width: 2.75rem; height: 2.75rem;
  border: 0;
  border-radius: 50%;
  background: rgba(254, 251, 246, .14);
  color: var(--crema);
  cursor: pointer;
}
.visor__cerrar .icono { width: 1.35rem; height: 1.35rem; }
.visor :focus-visible { outline-color: var(--amarillo); }
html.visor-abierto { overflow: hidden; }
@media (min-width: 48em) {
  .visor { padding: 4rem 2rem; }
  /* En pantalla grande la imagen cabe completa a lo alto (la captura de Marco es muy alta) */
  .visor__figura { width: auto; }
  .visor__imagen { width: auto; max-width: 100%; max-height: calc(100vh - 11rem); max-height: calc(100dvh - 11rem); margin-inline: auto; border-radius: var(--radio); }
}
@media (prefers-reduced-motion: no-preference) {
  .visor[open] .visor__figura { animation: visor-entra .45s var(--curva-n) both; }
}
@keyframes visor-entra { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
.captura figcaption { margin-top: .75rem; font-size: .9375rem; color: var(--cafe-suave); }
.captura figcaption strong { color: var(--cafe); }

@media (min-width: 48em) {
  .muro { columns: 2; column-gap: 1.5rem; }
  .muro > * { margin-bottom: 1.5rem; }
  .capturas { grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
  .capturas .captura--destacada { grid-row: span 2; }
  /* Testimonios en texto: rejilla de dos columnas (con columnas de texto, Safari los apilaba en una sola) */
  .muro--textos { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; columns: auto; margin-top: 3.5rem; }
  .muro--textos > * { margin-bottom: 0; }
  /* El segundo (Roseli, el más largo) ocupa dos filas: el tercero sube junto al primero sin dejar hueco */
  .muro--textos > :nth-child(2) { grid-row: span 2; }
  .captura:nth-child(even) { margin-top: 3rem; }
  .tarjeta { padding: 2.25rem; }
}

@media (min-width: 56em) {
  /* Citas escalonadas: la segunda se desplaza a la derecha */
  .casos { grid-template-columns: repeat(12, minmax(0, 1fr)); row-gap: 3.5rem; margin-top: 3.5rem; }
  .casos .caso:nth-child(odd of .caso) { grid-column: 1 / span 8; }
  .casos .caso:nth-child(even of .caso) { grid-column: 5 / span 8; }
  /* En escritorio el grupo "desaparece" y las capturas se acomodan como antes, lado a lado */
  /* La captura destacada a la izquierda; las otras dos, apiladas a la derecha */
  .casos--inicio .captura { grid-column: 7 / span 5; margin-top: 0; }
  .casos--inicio .captura--destacada { grid-column: 1 / span 5; grid-row: span 2; }
}

/* ---------- 7. Preguntas frecuentes ---------- */

.preguntas__lista { margin-top: 2rem; border-top: 1px solid var(--linea); }
.pregunta { border-bottom: 1px solid var(--linea); }
.pregunta summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 3.5rem;
  padding-block: 1.125rem;
  font: 500 1.375rem/1.25 var(--f-titulo);
  cursor: pointer;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .3s ease;
}
.pregunta summary::-webkit-details-marker { display: none; }
.pregunta__respuesta { padding-bottom: 1.5rem; max-width: 40rem; }
.preguntas__mas { margin-top: 2rem; }

/* Signo + que gira a × al abrir (preguntas y desplegables de las tarjetas) */
.signo {
  position: relative;
  flex: none;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--linea);
  transition: transform .45s var(--curva), background-color .3s ease, border-color .3s ease;
}
.signo::before,
.signo::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: .75rem; height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}
.signo::after { transform: translate(-50%, -50%) rotate(90deg); }
details[open]:not(.cerrando) > summary .signo { transform: rotate(45deg); }
.pregunta[open]:not(.cerrando) .signo { background: var(--amarillo); border-color: var(--amarillo); }

/* Mientras se anima la altura, el contenido se recorta */
[data-animando] > .desplegable__contenido { overflow: hidden; }

@media (hover: hover) {
  .pregunta summary:hover .signo { background: var(--arena); }
}

@media (min-width: 64em) {
  .preguntas {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: 4rem;
    align-items: start;
  }
  .preguntas .titulo-seccion { position: sticky; top: calc(var(--alto-cabecera) + 2rem); }
  .preguntas__lista { margin-top: 0; }
  .pregunta summary { font-size: 1.5rem; padding-block: 1.375rem; }
}

/* Página de preguntas: lista completa a lo ancho de lectura */
.preguntas--completa { max-width: calc(52rem + 2 * var(--margen)); }
.preguntas--completa .preguntas__lista { margin-top: 0; }

/* ---------- 8. Agenda ---------- */

.agenda {
  overflow: hidden;
  isolation: isolate;
  background: var(--cafe);
  color: var(--crema);
  text-align: center;
}
.agenda :focus-visible { outline-color: var(--amarillo); }

.agenda__contenido { max-width: calc(44rem + 2 * var(--margen)); }
.agenda__texto { margin-top: 1.25rem; color: var(--arena); font-size: 1.0625rem; }
.agenda__texto p + p { margin-top: .9em; }

.agenda__accion {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .875rem;
  margin-top: 2.25rem;
}
.agenda__nota { font-size: .875rem; color: var(--arena); }

/* Contenedor para el calendario de Cal.com (cuando se pegue) */
.agenda__calendario {
  margin-top: 2.25rem;
  min-height: 34rem;
  background: var(--crema);
  border-radius: var(--radio);
  overflow: hidden;
  text-align: left;
}

.sol--agenda {
  width: 22rem; height: 22rem;
  border-width: 1.5rem;
  border-color: rgba(240, 222, 138, .14);
  top: -9rem; right: -9rem;
}
@media (min-width: 64em) {
  .sol--agenda { width: 34rem; height: 34rem; border-width: 2rem; top: -14rem; right: -10rem; }
}

/* ---------- 9. ¿Te quedó una duda? ---------- */

.duda {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}
.duda__titulo { font-size: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); max-width: 22ch; }
.duda__texto p { margin-top: .6rem; }

@media (min-width: 48em) {
  .duda { flex-direction: row; align-items: center; justify-content: space-between; gap: 3rem; }
}

/* ---------- 10. Pie de página ---------- */

.pie {
  position: relative;
  margin-top: calc(-1 * var(--hoja));
  padding-block: 3.5rem 2rem;
  background: var(--arena);
  border-radius: 50% 50% 0 0 / var(--hoja) var(--hoja) 0 0;
}
.pie__rejilla { display: grid; gap: 2rem; }

.pie__frase {
  margin-top: 1.75rem;
  padding-bottom: .1em;
  max-width: 18ch;
  font: italic 500 clamp(1.875rem, 1.5rem + 1.8vw, 2.75rem)/1.2 var(--f-titulo);
}
.pie__info { max-width: 32rem; font-size: 1rem; }
.pie__info a { font-weight: 500; text-underline-offset: .25em; }

.pie__enlaces {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  margin-top: 2.5rem;
  list-style: none;
}
.pie__enlaces a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
  text-underline-offset: .25em;
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .5rem 2rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--linea);
  font-size: .875rem;
}

.pie__aviso {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  text-underline-offset: .25em;
}

@media (min-width: 56em) {
  .pie { padding-block: 5rem 2.5rem; }
  .pie__rejilla { grid-template-columns: 1.2fr 1fr; gap: 4rem; align-items: end; }
}

/* ---------- Aviso de privacidad (página legal) ---------- */

.legal__fecha { margin-top: 1rem; color: var(--cafe-suave); font-size: .9375rem; }
.legal { max-width: calc(46rem + 2 * var(--margen)); }
.legal h2 {
  margin-top: 2.75rem;
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
}
.legal ul, .legal ol { margin: .75rem 0 0; padding-left: 1.25rem; }
.legal li + li { margin-top: .5rem; }
.legal li::marker { color: var(--cafe-suave); }
.legal ul + p, .legal ol + p { margin-top: 1em; }
.legal a { text-underline-offset: .2em; }
.legal .boton { margin-top: .5rem; }

/* ---------- Aviso de medición (solo aparece si el píxel de Meta está configurado) ---------- */

.consentimiento {
  position: fixed;
  z-index: 50;
  left: var(--margen);
  right: var(--margen);
  bottom: calc(var(--margen) + env(safe-area-inset-bottom, 0px));
  max-width: 32rem;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--crema);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: 0 24px 50px -24px rgba(84, 60, 36, .55);
  font-size: .9375rem;
  line-height: 1.5;
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity .4s var(--curva), transform .5s var(--curva);
}
.consentimiento--visible { opacity: 1; transform: none; }
.consentimiento a { font-weight: 500; text-underline-offset: .2em; }
.consentimiento__botones { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.consentimiento__botones .boton { flex: 1 1 8rem; }

@media (min-width: 48em) {
  .consentimiento { left: auto; }
}

/* =========================================================
   Movimiento. Mismo vocabulario que los sitios de Experimento Studio (Naara):
   una sola curva, apariciones por rol y títulos palabra por palabra.
   Todo se apaga con "reducir movimiento".
   ========================================================= */

:root { --curva-n: cubic-bezier(.32, .94, .36, 1); }

@keyframes subir { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes asentar { from { transform: scale(1.12); } to { transform: none; } }
@keyframes sol-entra { from { opacity: 0; transform: scale(.55) rotate(-25deg); } to { opacity: 1; transform: none; } }
/* El sol "respira", como pide la frase de la marca */
@keyframes respirar { from { transform: scale(1); } to { transform: scale(1.06); } }
@keyframes flotar { to { transform: translateY(9%); } }
@keyframes ventana { from { transform: scale(1.14) translateY(-5%); } to { transform: scale(1.14) translateY(5%); } }
@keyframes arquear { from { border-top-left-radius: 50% 0; border-top-right-radius: 50% 0; } }
@keyframes mostrar { to { opacity: 1; } }

@media (prefers-reduced-motion: no-preference) {
  /* Portada: el título se arma palabra por palabra, el resto sube escalonado,
     la foto se asienta y el sol aparece y respira */
  .entrada { animation: subir 1s var(--curva-n) both; animation-delay: calc(.35s + var(--i, 0) * .12s); }
  .portada__foto img,
  .pagina-cabeza__foto img { animation: asentar 2.2s var(--curva) both; }
  .portada__foto .sol { animation: sol-entra 1.8s var(--curva) .3s both, respirar 7s ease-in-out 2.1s infinite alternate; }
  .sol--agenda { animation: respirar 9s ease-in-out infinite alternate; }

  /* Mientras el JavaScript divide el título de la portada, se oculta un instante
     (si el JavaScript fallara, a los 2 s aparece igual) */
  .js-temprano h1[data-dividir]:not(.dividido) { opacity: 0; animation: mostrar 0s 2s forwards; }

  /* Títulos palabra por palabra: cada palabra sube desde su máscara (js/sitio.js las divide) */
  .dividido .palabra {
    display: inline-block;
    overflow: hidden;
    padding: .08em 0 .16em;
    margin: -.08em 0 -.16em;
    vertical-align: bottom;
  }
  .dividido .palabra > span {
    display: inline-block;
    transform: translateY(112%);
    transition: transform .85s var(--curva-n);
    transition-delay: calc(var(--w, 0) * 30ms + 60ms);
  }
  .dividido.visible .palabra > span { transform: none; }

  /* Ligado al scroll, sin JavaScript (Chrome, Android y Safari 26; en otros se ve quieto) */
  @supports (animation-timeline: view()) {
    .portada__foto picture { animation: flotar linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
    .sobre__foto img { animation: ventana linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
    /* El borde de cada sección entra plano y se dobla en arco conforme sube */
    .seccion, .pie { animation: arquear linear both; animation-timeline: view(); animation-range: entry 0% entry 80%; }
  }

  /* Apariciones al hacer scroll. js/sitio.js solo marca lo que está fuera de pantalla al cargar;
     sin JavaScript todo se ve normal. */
  .por-aparecer {
    opacity: 0;
    transform: translateY(44px);
    transition: opacity .75s var(--curva-n), transform .9s var(--curva-n), filter 1s var(--curva-n);
    transition-delay: calc(var(--i, 0) * 90ms);
  }
  .por-aparecer.visible,
  [data-aparece].por-aparecer.visible { opacity: 1; transform: none; filter: none; }

  /* Tarjetas: en cascada, con un leve crecimiento */
  [data-aparece="tarjeta"].por-aparecer { transform: translateY(44px) scale(.97); transition-delay: calc(var(--i, 0) * 140ms); }

  /* Citas y frases destacadas: llegan desenfocadas y se aclaran */
  [data-aparece="suave"].por-aparecer { filter: blur(10px); transform: translateY(16px); }

  /* Botones y enlaces de acción: pop suave, siempre al final de la secuencia */
  [data-aparece="boton"].por-aparecer { transform: translateY(16px) scale(.94); transition-delay: .3s; }

  /* Fotos: se destapan de abajo hacia arriba y el bloque salvia se acomoda detrás */
  [data-aparece="foto"].por-aparecer { opacity: 1; transform: none; }
  [data-aparece="foto"].por-aparecer picture {
    clip-path: inset(100% 0 0 0 round var(--radio));
    transition: clip-path 1.5s var(--curva-n);
  }
  [data-aparece="foto"].por-aparecer.visible picture { clip-path: inset(0 0 0 0 round var(--radio)); }
  [data-aparece="foto"].por-aparecer::before { opacity: 0; transform: translate(-1rem, -1rem); transition: opacity 1s ease .5s, transform 1.4s var(--curva-n) .5s; }
  [data-aparece="foto"].por-aparecer.visible::before { opacity: 1; transform: none; }

  /* Lotos que "florecen" */
  .por-aparecer .loto { transform: scale(.4) rotate(-30deg); transition: transform 1.2s var(--curva-n); transition-delay: calc(var(--i, 0) * 90ms + .2s); }
  .por-aparecer.visible .loto { transform: none; }

  /* Recorrido de "Cómo funciona": la línea se dibuja y los círculos se abren en iris, en orden */
  [data-aparece="linea"].por-aparecer { opacity: 1; transform: none; }
  [data-aparece="linea"].por-aparecer::before { transform: scaleY(0); transition: transform 1.8s var(--curva-n) .2s; }
  [data-aparece="linea"].por-aparecer.visible::before { transform: none; }
  .proceso .por-aparecer .proceso__num {
    clip-path: circle(18% at 50% 50%);
    transform: rotate(-8deg);
    transition: clip-path .8s var(--curva-n), transform .8s var(--curva-n);
    transition-delay: calc(var(--i, 0) * 160ms + .3s);
  }
  .proceso .por-aparecer.visible .proceso__num { clip-path: circle(75% at 50% 50%); transform: none; }

  /* Línea de tiempo de las 3 etapas dentro de la tarjeta */
  .plan.por-aparecer .etapas__lista::before { transform: scaleX(0); transition: transform 1.4s var(--curva-n) .6s; }
  .plan.por-aparecer.visible .etapas__lista::before { transform: none; }
  .plan.por-aparecer .etapas__lista li::before { transform: scale(0); transition: transform .7s var(--curva-n); }
  .plan.por-aparecer.visible .etapas__lista li::before { transform: none; }
  .plan.por-aparecer.visible .etapas__lista li:nth-child(1)::before { transition-delay: .7s; }
  .plan.por-aparecer.visible .etapas__lista li:nth-child(2)::before { transition-delay: 1s; }
  .plan.por-aparecer.visible .etapas__lista li:nth-child(3)::before { transition-delay: 1.3s; }
}

@media (min-width: 56em) and (prefers-reduced-motion: no-preference) {
  [data-aparece="linea"].por-aparecer::before { transform: scaleX(0); }
  [data-aparece="linea"].por-aparecer.visible::before { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
}

/* Números de caja alta en Cormorant (trae números de estilo antiguo, "2o").
   Va al final porque el atajo "font:" reinicia esta propiedad. */
h1, h2, h3, .marca__nombre, .sobre__destacado, .credenciales strong, .cifras strong, .precio,
.etapas__mes, .proceso__num, .caso blockquote p, .pregunta summary, .pie__frase, .plan__lema,
.js-listo .navegacion a {
  font-variant-numeric: lining-nums;
}