/* ===== css/tokens.css ===== */
/* ============================================================
   Tokens de marca de Sofi Santín
   Fuente: identidad oficial de Sofi (27/10/2026) y branding/DESIGN.md.
   Todo el CSS de la web toma colores, tipos, espacios y tiempos
   de acá. No se escriben colores sueltos en los componentes.
   ============================================================ */


:root {
  /* --- Color: núcleo (de Sofi) --- */
  --marfil: #F4EBDD;
  --espresso: #282421;
  --rosa: #D99AA5;          /* empolvado: acento. Nunca texto sobre marfil (1,95:1) */
  --rosa-claro: #F6E3E8;

  /* --- Color: secundarios, de a uno --- */
  --bordo: #762F3B;         /* solo la sección Escenario */
  --terracota: #A95743;
  --oliva: #62664A;
  --camel: #B98758;

  /* --- [propuesta] Texto chico de acento sobre marfil (4,98:1). Pendiente del OK --- */
  --rosa-tinta: #94505E;

  /* --- Tinta por énfasis (contraste medido en DESIGN.md §3.3) --- */
  --tinta-alta: rgb(40 36 33 / 1);       /* 13,03:1 sobre marfil */
  --tinta-media: rgb(40 36 33 / .87);    /* 8,95:1 */
  --tinta-baja: rgb(40 36 33 / .72);     /* ≈5,5:1 */
  --luz-alta: rgb(244 235 221 / 1);      /* sobre espresso */
  --luz-media: rgb(244 235 221 / .87);
  --luz-baja: rgb(244 235 221 / .6);     /* 5,60:1 */

  /* --- Sombras: 3, teñidas de espresso, luz de arriba a la izquierda.
         Solo en el mundo claro: sobre espresso no hay sombra, se separa con un filete --- */
  --sombra-contacto: 0 1px 2px rgb(40 36 33 / .18), 0 2px 6px rgb(40 36 33 / .10);
  --sombra-flota: 0 12px 32px -8px rgb(40 36 33 / .28), 0 4px 10px rgb(40 36 33 / .10);
  --sombra-escena: 0 40px 80px -24px rgb(40 36 33 / .45);

  /* --- Vidrio: solo en lo interactivo --- */
  --vidrio-marfil: rgb(244 235 221 / .55);
  --vidrio-espresso: rgb(40 36 33 / .45);
  --vidrio-borde: rgb(255 255 255 / .55);   /* filo de luz: es borde, no sombra */
  --filete-claro: rgb(40 36 33 / .08);       /* separación en el mundo claro */
  --filete-oscuro: rgb(244 235 221 / .12);   /* separación en el mundo escenario */
  --vidrio-desenfoque: 16px;

  /* --- Tipografía: 7 tamaños, ni uno más (Fase A del PLAN-10, 31/10/2026).
         Si una sección "necesita" otro tamaño, el problema es la sección. --- */
  --f-titulo: 'Cormorant Garamond', 'Times New Roman', serif;   /* 600 y cursiva 600 */
  --f-texto: 'Montserrat', system-ui, sans-serif;                /* 400, 500 y 600 */

  /* 1. Nombre: lo mide cada hero contra el ancho y el alto (ver hero.css) */
  --t-titulo: clamp(44px, min(6vw, 10svh), 88px);       /* 2. título de sección */
  --t-subtitulo: clamp(32px, 3.4vw, 48px);               /* 3. subtítulo, número de clase */
  --t-destacado: clamp(22px, min(2.2vw, 4.2svh), 32px);  /* 4. frase destacada, nombre de tarjeta */
  --t-cuerpo: clamp(17px, 1.25vw, 18px);                 /* 5. cuerpo: 18 en escritorio, 17 en el celular */
  --t-detalle: 15px;                                     /* 6. navegación, botones, datos */
  --t-minimo: 13px;                                      /* 7. solo pie, estados y microletra de objetos */

  --tr-nombre: -0.02em;  --lh-nombre: .92;
  --tr-titulo: -0.01em;  --lh-titulo: 1;
  --lh-cuerpo: 1.6;

  /* --- Espacio: múltiplos de 8 --- */
  --s-1: 8px;  --s-2: 16px; --s-3: 24px; --s-4: 32px; --s-6: 48px;
  --s-8: 64px; --s-12: 96px; --s-16: 128px; --s-20: 160px; --s-30: 240px;
  --margen: clamp(16px, 4vw, 64px);

  /* --- Radios: 3. Miniatura, foto o tarjeta, píldora (también los círculos) --- */
  --r-chico: 8px;
  --r-medio: 24px;
  --r-pastilla: 999px;

  /* --- Movimiento: a tempo de bachata (126 bpm) y con una sola curva de la casa --- */
  --tiempo: 476ms;                      /* un tiempo */
  --medio-tiempo: 238ms;
  --cuarto-tiempo: 119ms;
  --interaccion: 160ms;                 /* hover, presión y foco: siempre < 200 ms */
  --curva: cubic-bezier(.22, 1, .36, 1);             /* todo lo que entra o responde */
  --curva-tap: cubic-bezier(.34, 1.56, .64, 1);      /* rebote corto: solo el acento del tap */
}

/* Movimiento reducido: todo queda quieto y completo */
@media (prefers-reduced-motion: reduce) {
  :root {
    --tiempo: 0ms; --medio-tiempo: 0ms; --cuarto-tiempo: 0ms; --interaccion: 0ms;
  }
}

/* ===== css/base.css ===== */
/* Base de toda la página: navegación, vidrio, botones y texto compartido.
   Todo sale de tokens.css (7 tamaños, 3 radios, 3 sombras, una curva). */
/* Los tokens se cargan desde index.html (css/tokens.css), antes que este archivo */

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--marfil);
  color: var(--tinta-alta);
  font-family: var(--f-texto);
  font-size: var(--t-cuerpo);
  line-height: var(--lh-cuerpo);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; border-radius: var(--r-chico); }
/* Los destinos de salto (secciones y títulos con tabindex="-1") reciben el foco para el teclado, sin recuadro */
[tabindex="-1"]:focus { outline: none; }

.solo-lector {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ---------- Hero: lienzo común ---------- */
.hero {
  position: relative;
  height: 100svh;
  min-height: 680px;
  overflow: hidden;
  isolation: isolate;
}

/* ---------- Navegación: barra completa, editorial ----------
   Monograma a la izquierda; enlaces en texto a la derecha con una línea que se desliza
   bajo el enlace activo (la sección en pantalla) o el que está bajo el cursor; la acción al final.
   Arriba de todo no tiene fondo; al bajar gana vidrio y un filete (pagina.js pone .nav--fondo). */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: var(--s-3);
  padding: var(--s-2) var(--margen);
  border-bottom: 1px solid transparent;
  transition: background-color var(--medio-tiempo) var(--curva), border-color var(--medio-tiempo) var(--curva);
}
.nav__marca { display: grid; place-items: center; width: 44px; height: 44px; margin: 0 auto 0 -7px; }   /* 44 × 44 de toque; el monograma sigue en 30 × 40 */
.nav__marca img { width: 30px; height: 40px; }

.nav__enlaces { position: relative; display: flex; }
.nav__enlaces a {
  padding: 12px 14px;
  font-size: var(--t-detalle); font-weight: 500;
  color: var(--tinta-media);
  transition: color var(--interaccion) var(--curva);
}
.nav__enlaces a:hover, .nav__enlaces a[aria-current] { color: var(--tinta-alta); }
.nav__indicador {
  position: absolute; left: 0; bottom: 7px;
  height: 1.5px; width: 40px;
  border-radius: var(--r-pastilla);
  background: currentColor; color: var(--tinta-alta);
  opacity: 0; pointer-events: none;
}
.nav--fondo {
  background-color: rgb(244 235 221 / .72);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.2);
  backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.2);
  border-bottom-color: var(--filete-claro);
}

/* ---------- Vidrio (solo en lo interactivo y con algo detrás) ----------
   El filo de luz es el borde de arriba, no una sombra. */
.vidrio {
  --mx: 50%; --my: 0%;
  background:
    radial-gradient(120px 60px at var(--mx) var(--my), rgb(255 255 255 / .45), transparent 70%),
    var(--vidrio-marfil);
  -webkit-backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.2);
  backdrop-filter: blur(var(--vidrio-desenfoque)) saturate(1.2);
  border: 1px solid rgb(255 255 255 / .5);
  border-top-color: rgb(255 255 255 / .85);
  box-shadow: var(--sombra-flota);
}
/* En el mundo escenario no hay sombra: lo separa el filete */
.mundo-escenario .vidrio, .vidrio.mundo-escenario {
  background:
    radial-gradient(120px 60px at var(--mx) var(--my), rgb(244 235 221 / .14), transparent 70%),
    var(--vidrio-espresso);
  border-color: var(--filete-oscuro);
  border-top-color: rgb(244 235 221 / .24);
  box-shadow: none;
}

/* ---------- Botón principal: píldora sólida; la flecha es la S abierta de la marca, sin caja ---------- */
.boton {
  --fondo: var(--espresso); --texto: var(--marfil); --punto: var(--rosa);
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 0 22px 0 26px;
  border-radius: var(--r-pastilla);
  background: var(--fondo); color: var(--texto);
  font-family: var(--f-texto); font-size: var(--t-detalle); font-weight: 600; letter-spacing: .01em;
  box-shadow: var(--sombra-flota);
  transition: transform var(--interaccion) var(--curva), box-shadow var(--interaccion) var(--curva);
  will-change: transform;
}
/* Brillo que cruza en el hover: es luz, no decoración */
.boton::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .22) 50%, transparent 65%);
  transform: translateX(-120%);
  transition: transform 0s;
}
.boton:hover::before { transform: translateX(120%); transition: transform 700ms var(--curva); }
/* Al presionar se hunde: baja 1 px y la sombra pasa a contacto */
.boton:active { transform: translateY(1px) scale(.98); box-shadow: var(--sombra-contacto); }
.boton__punto { display: grid; place-items: center; color: var(--punto); }
.boton__punto svg { width: 20px; height: 20px; transition: transform var(--interaccion) var(--curva); }
.boton:hover .boton__punto svg { transform: translateX(3px); }
.boton--rosa { --fondo: var(--rosa); --texto: var(--espresso); --punto: var(--espresso); }
.boton--chico { min-height: 44px; padding: 0 16px 0 20px; gap: 10px; }
.boton--chico .boton__punto svg { width: 16px; height: 16px; }

/* ---------- Acción secundaria: texto con el subrayado en S que se dibuja ----------
   Reposo: la S en tinta, tenue. Hover o foco: la S se redibuja en rosa. */
.enlace {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 2px;
  font-size: var(--t-detalle); font-weight: 600;
  color: var(--tinta-alta);
}
.enlace__s {
  position: absolute; left: 0; bottom: 6px; width: 100%; height: 8px;
  overflow: visible; pointer-events: none;
}
.enlace__s path { fill: none; stroke-width: 3.6; stroke-linecap: round; }
.enlace__s .base { stroke: currentColor; opacity: .3; }
.enlace__s .luz {
  stroke: var(--rosa); stroke-dasharray: 1 2; stroke-dashoffset: 1;   /* gap más largo que el trazo: la punta redonda no deja un punto */
  transition: stroke-dashoffset var(--medio-tiempo) var(--curva);
}
.enlace:hover .enlace__s .luz, .enlace:focus-visible .enlace__s .luz { stroke-dashoffset: 0; }
.mundo-escenario .enlace { color: var(--luz-alta); }

/* ---------- Pulso vivo: el básico a 126 bpm ---------- */
.pulso {
  display: inline-flex; align-items: center; gap: 12px;
  min-height: 44px; padding: 0 18px 0 16px;
  border-radius: var(--r-pastilla);
  font-size: var(--t-detalle); font-weight: 500; color: var(--tinta-media);
}
.pulso__tiempos { display: flex; align-items: center; gap: 6px; }
.pulso__tiempos i {
  width: 7px; height: 7px; border-radius: var(--r-pastilla);
  background: rgb(40 36 33 / .22);
  transition: background 60ms linear, transform 60ms linear;
}
.pulso__tiempos i.on { background: var(--espresso); transform: scale(1.25); }
.pulso__tiempos svg { width: 13px; height: 13px; color: rgb(40 36 33 / .22); transition: color 60ms linear, transform 60ms linear; }
.pulso__tiempos svg.on { color: var(--rosa); transform: scale(1.35); }
.mundo-escenario .pulso, .pulso.mundo-escenario { color: var(--luz-media); }
:is(.mundo-escenario .pulso, .pulso.mundo-escenario) .pulso__tiempos i { background: rgb(244 235 221 / .2); }
:is(.mundo-escenario .pulso, .pulso.mundo-escenario) .pulso__tiempos i.on { background: var(--marfil); }
:is(.mundo-escenario .pulso, .pulso.mundo-escenario) .pulso__tiempos svg { color: rgb(244 235 221 / .2); }
:is(.mundo-escenario .pulso, .pulso.mundo-escenario) .pulso__tiempos svg.on { color: var(--rosa); }

/* ---------- Laurel: logro real ---------- */
.laurel {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--tinta-alta);
}
.laurel__rama {
  width: 14px; height: 30px; background: var(--rosa-tinta);
  -webkit-mask: url('../media/laurel.svg') center / contain no-repeat;
  mask: url('../media/laurel.svg') center / contain no-repeat;
}
.laurel__rama:last-child { transform: scaleX(-1); }
.laurel span { display: grid; line-height: 1.25; text-align: center; }
.laurel strong { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-cuerpo); }
.laurel small { font-size: var(--t-minimo); font-weight: 500; color: var(--tinta-baja); letter-spacing: .02em; }
.mundo-escenario .laurel { color: var(--luz-alta); }
.mundo-escenario .laurel__rama { background: var(--rosa); }
.mundo-escenario .laurel small { color: var(--luz-baja); }

/* ---------- Texto compartido ---------- */
.nombre {
  font-family: var(--f-titulo); font-weight: 600;
  letter-spacing: var(--tr-nombre); line-height: var(--lh-nombre);
}
.nombre em { font-style: italic; }
.nombre .letra { display: inline-block; will-change: transform; }
.destacado {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-destacado); line-height: 1.1; letter-spacing: -.005em;
}
.destacado em { font-style: italic; position: relative; white-space: nowrap; }
/* El subrayado en S que se dibuja bajo la palabra acentuada */
.subrayado {
  position: absolute; left: -2%; bottom: -.18em; width: 104%; height: .32em;
  overflow: visible; pointer-events: none; color: var(--rosa);
}
.subrayado path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.bajada { font-size: var(--t-cuerpo); line-height: 1.55; color: var(--tinta-media); max-width: 34ch; text-wrap: pretty; }
.mundo-escenario .bajada { color: var(--luz-media); }
.acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); }

@media (max-width: 767px) {
  .nav { padding: var(--s-2); }
  .nav__enlaces { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .boton::before { display: none; }
}

/* ---------- La navegación sobre el mundo escenario ---------- */
.nav__marca { position: relative; }
.nav__marca .logo--marfil { position: absolute; inset: 0; opacity: 0; }
.nav__marca img { transition: opacity var(--interaccion) var(--curva); }
.nav--oscura .nav__marca .logo--espresso { opacity: 0; }
.nav--oscura .nav__marca .logo--marfil { opacity: 1; }
.nav--oscura .nav__enlaces a { color: var(--luz-media); }
.nav--oscura .nav__enlaces a:hover, .nav--oscura .nav__enlaces a[aria-current] { color: var(--luz-alta); }
.nav--oscura .nav__indicador { color: var(--luz-alta); }
.nav--oscura.nav--fondo { background-color: rgb(40 36 33 / .6); border-bottom-color: var(--filete-oscuro); }
.nav--oscura .boton { --fondo: var(--rosa); --texto: var(--espresso); --punto: var(--espresso); }
.nav .boton { transition: background var(--interaccion) var(--curva), color var(--interaccion) var(--curva); }

/* El pulso es un botón: se puede tocar para escuchar el básico */
button.pulso { font: inherit; font-size: var(--t-detalle); font-weight: 500; cursor: pointer; transition: transform var(--interaccion) var(--curva), border-color var(--interaccion) var(--curva); }
button.pulso:hover { transform: translateY(-2px); border-color: rgb(217 154 165 / .7); }
button.pulso:hover .pulso__tiempos svg { color: var(--rosa); transform: scale(1.35); }
button.pulso:active { transform: translateY(1px) scale(.98); }
button.pulso[aria-pressed="true"] { color: var(--tinta-alta); border-color: rgb(217 154 165 / .9); }

/* Acción secundaria de las ofertas que todavía no tienen fecha */
.boton-aviso { justify-self: start; position: relative; z-index: 3; }

/* ---------- Acción fija en el teléfono ---------- */
.accion-fija { display: none; }
@media (max-width: 767px) {
  .accion-fija {
    position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 55;
    display: block;
    transform: translateY(140%);
    transition: transform var(--tiempo) var(--curva);
  }
  .accion-fija.esta-visible { transform: none; }
  .accion-fija .boton { width: 100%; justify-content: space-between; }
}

/* ---------- Letras que ruedan (nav y botón principal) ----------
   Dos filas en el mismo lugar: al pasar el cursor, la de arriba sube letra por letra
   y entra la misma palabra en Cormorant cursiva, la voz de acento de la marca. */
.rueda { display: inline-grid; overflow: hidden; vertical-align: top; line-height: 1.3; }
.rueda__fila { grid-area: 1 / 1; display: flex; justify-content: center; white-space: nowrap; }
.rueda__letra {
  display: inline-block;
  transition: transform var(--medio-tiempo) var(--curva);
  transition-delay: calc(var(--i) * 14ms);
}
.rueda__fila--cursiva {
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: 1.2em; line-height: 1.08;
}
.rueda__fila--cursiva .rueda__letra { transform: translateY(110%); }
:is(a, button):is(:hover, :focus-visible) .rueda__fila:not(.rueda__fila--cursiva) .rueda__letra { transform: translateY(-110%); }
:is(a, button):is(:hover, :focus-visible) .rueda__fila--cursiva .rueda__letra { transform: none; }

/* La luz que sigue al cursor entre los enlaces: vidrio con filo, detrás del texto */
.nav__enlaces a { position: relative; z-index: 1; }
.nav__luz {
  position: absolute; left: 0; top: 4px; bottom: 4px; width: 60px; z-index: 0;
  border-radius: var(--r-pastilla);
  background: rgb(255 255 255 / .5);
  border: 1px solid rgb(255 255 255 / .55); border-top-color: rgb(255 255 255 / .9);
  box-shadow: var(--sombra-contacto);
  opacity: 0; pointer-events: none;
}
.nav--oscura .nav__luz { background: rgb(244 235 221 / .1); border-color: var(--filete-oscuro); border-top-color: rgb(244 235 221 / .24); box-shadow: none; }

/* El borde de luz del botón principal: una luz rosa recorre el borde mientras el cursor está encima
   (mecanismo de Hover Border Gradient de Aceternity). Quieto, no se mueve nada. */
@property --giro { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.boton { --luz-borde: var(--rosa); }
.boton--rosa, .nav--oscura .boton { --luz-borde: var(--marfil); }
.boton::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--giro), transparent 0 62%, var(--luz-borde) 82%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; pointer-events: none;
  transition: opacity var(--interaccion) var(--curva);
}
.boton:hover::after, .boton:focus-visible::after { opacity: 1; animation: giro calc(var(--tiempo) * 3) linear infinite; }
@keyframes giro { to { --giro: 360deg; } }

/* ---------- El telón: un iris de escenario ----------
   La escena se cierra en espresso hacia el enlace tocado y se abre en la sección.
   Es un hueco que se achica y se agranda (--ir); el borde del hueco tiene un filo rosa. */
.telon {
  position: fixed; inset: 0; z-index: 70;
  visibility: hidden; pointer-events: none;
  --ix: 50%; --iy: 50%; --ir: 0px;
  background: radial-gradient(circle at var(--ix) var(--iy),
    transparent calc(var(--ir) - 1px), var(--rosa) var(--ir), var(--rosa) calc(var(--ir) + 2px), var(--espresso) calc(var(--ir) + 3px));
}
@media (prefers-reduced-motion: reduce) {
  .rueda__letra { transition: none; }
  .boton:hover::after { animation: none; }
}

/* ---------- Foto viva ([data-vivo], js/vivo.js) ----------
   Se inclina hacia el cursor; la imagen tiene margen para correrse al revés; un reflejo sigue al cursor. */
[data-vivo] { position: relative; transform-style: preserve-3d; will-change: transform; }
[data-vivo] > img { scale: 1.06; }
[data-vivo]:not([data-vivo="sin-luz"])::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(55% 45% at var(--hx, 50%) var(--hy, 0%), rgb(255 248 236 / .28), transparent 70%);
  mix-blend-mode: soft-light;
  opacity: 0; transition: opacity var(--medio-tiempo) var(--curva);
}
[data-vivo].esta-vivo::after { opacity: 1; }

/* ---------- El título de sección, compartido por todas las páginas ---------- */
.titulo {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-titulo); line-height: var(--lh-titulo); letter-spacing: var(--tr-titulo);
  text-wrap: balance;
}
.titulo em { font-style: italic; }

/* ===== css/entrada.css ===== */
/* Firma de entrada: el monograma se dibuja como un trazo de pincel (la curva de la S),
   el corazón late en el tap y el logo vuela a su lugar en la navegación.
   Una vez por visita; con movimiento reducido no aparece. */

.entrada {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  background: radial-gradient(120% 90% at 22% 8%, #FAF4EA 0%, var(--marfil) 42%, #E8DCCA 100%);
}
.entrada[hidden] { display: none; }
.entrada__marca { width: min(150px, 30vw); aspect-ratio: 100 / 133.3; will-change: transform; }
.entrada__marca svg { width: 100%; height: 100%; overflow: visible; }
.entrada__pincel { fill: none; stroke: #fff; stroke-width: 44; stroke-linecap: round; stroke-linejoin: round; }

/* Sin JavaScript o con la entrada ya vista: no se muestra */
html:not(.con-entrada) .entrada { display: none; }

/* ===== css/hero.css ===== */
/* Variante A · "Entrelazada": mundo clase (marfil, luz de ventana).
   Sofi pasa por delante de "Sofi" y por detrás de "Santín": las dos S del monograma cruzándose. */

.hero-a { --lx: 0; min-height: 520px; }
/* Todo el hero se mide contra el ancho y el alto de la pantalla, así entra entero en la primera vista */

/* La pared: marfil con caída de luz real (más clara arriba a la izquierda, de donde entra la ventana) */
.a-pared {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(120% 90% at 22% 8%, #FAF4EA 0%, var(--marfil) 42%, #E8DCCA 100%);
}
/* La luz de la ventana: cuatro paños que caen sobre la pared, desenfocados */
.a-ventana {
  position: absolute; top: -12%; left: 2vw; width: 44vw; height: 118%;
  pointer-events: none;
}
.a-ventana i {
  position: absolute; inset: 0;
  transform: skewX(-16deg) translateX(calc(var(--lx) * 30px));
  background:
    linear-gradient(rgb(255 251 244 / .62), rgb(255 251 244 / .62)) 0 0 / 47% 46% no-repeat,
    linear-gradient(rgb(255 251 244 / .62), rgb(255 251 244 / .62)) 100% 0 / 47% 46% no-repeat,
    linear-gradient(rgb(255 251 244 / .5), rgb(255 251 244 / .5)) 0 100% / 47% 46% no-repeat,
    linear-gradient(rgb(255 251 244 / .5), rgb(255 251 244 / .5)) 100% 100% / 47% 46% no-repeat;
  filter: blur(22px);
  opacity: .9;
}

/* "Sofi": detrás de ella */
.a-sofi {
  position: absolute; z-index: 1;
  /* El final de "Sofi" se ata a la figura, así el brazo siempre lo cruza */
  right: calc(50% - 3vw + 88svh * .18); top: max(64px, 9svh);
  font-size: min(21vw, 36svh);
  color: var(--espresso);
}
.a-sofi em { font-style: italic; }

/* La figura: centrada con márgenes (GSAP maneja las transformaciones) */
.a-figura {
  --alto: 88svh;
  position: absolute; z-index: 2;
  bottom: 0; left: 50%;
  height: var(--alto); width: calc(var(--alto) * .795);
  margin-left: calc(var(--alto) * -.3975 + 3vw);
}
.a-figura [data-figura] { position: absolute; inset: 0; }
.a-foto, .a-sombra {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
}
/* La sombra que su cuerpo proyecta en la pared: la luz viene de arriba a la izquierda */
.a-sombra {
  filter: brightness(0) blur(20px);
  opacity: .07;
  transform: translate(64px, 4px) skewX(-14deg) scaleY(.98);
  transform-origin: 50% 100%;
}
.a-foto { filter: drop-shadow(0 2px 2px rgb(40 36 33 / .18)); }
/* Sombra de contacto en el piso, bajo los pies */
.a-contacto {
  position: absolute; left: 14%; bottom: -8px; width: 50%; height: 28px;
  background: radial-gradient(50% 50% at 50% 50%, rgb(40 36 33 / .38), transparent 100%);
  filter: blur(4px);
}

/* (El reflejo de la ventana alrededor de su silueta, .a-halo, salió el 1/11/2026:
   se veía como un bordeado blanco desparejo sobre el brazo y no aportaba.) */

/* "Santín", como lo pidió la mamá de Sofi (audios del 31/10/2026):
   - un poco más chico: 68 % de "Sofi" (antes 75 %), más armonioso y menos pegado a "Sofi";
   - más centrado: sobre el eje de la figura;
   - más arriba: cruza los muslos, solo piel, nunca el zapato ni el brazo, así se lee.
   Tinta espresso sobre piel: el contraste sale de la composición, no de un borde (error 70). */
.a-santin {
  position: absolute; z-index: 3;
  left: calc(50% + 3vw); translate: -50% 0; white-space: nowrap; bottom: 22svh;
  font-size: min(14.3vw, 24.5svh);
  color: var(--espresso);
  text-shadow: 0 30px 60px rgb(40 36 33 / .12);
}

/* El texto y la acción */
.a-texto {
  position: absolute; z-index: 4;
  left: 5vw; bottom: 9svh;
  width: min(460px, 38vw);
  display: grid; gap: var(--s-2);
}
.a-texto .acciones { margin-top: var(--s-1); }
/* Pantallas bajas: el texto no se achica, se acorta (la segunda frase espera) */
@media (max-height: 700px) { .a-texto { gap: 10px; } .a-texto .bajada span { display: none; } }
@media (max-width: 1100px) { .a-texto .enlace { display: none; } }

/* La prueba: logros reales en una línea discreta debajo de la acción, separada por un filete.
   (El pulso "Escuchá el básico" salió el 1/11/2026: no sumaba a la promesa ni a la acción.) */
.a-texto { bottom: 6svh; }
.a-prueba {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3);
  margin-top: var(--s-1); padding-top: var(--s-2);
  border-top: 1px solid var(--filete-claro);
}
/* El segundo logro, con el mismo peso que el laurel pero sin ramas */
.a-credito { display: flex; align-items: baseline; gap: 6px; color: var(--tinta-alta); }
.a-credito strong { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-detalle); }
.a-credito small { font-size: var(--t-minimo); font-weight: 500; color: var(--tinta-baja); letter-spacing: .02em; }
.a-prueba .laurel { gap: 6px; }
.a-prueba .laurel__rama { width: 10px; height: 20px; }
.a-prueba .laurel span { display: flex; align-items: baseline; gap: 6px; }
.a-prueba .laurel strong { font-size: var(--t-detalle); }

/* ---------- Teléfono y tablet en vertical ---------- */
@media (max-width: 1023px) and (orientation: portrait) {
  .hero-a { min-height: 640px; }
  .a-ventana { width: 90vw; left: -10vw; }
  .a-sofi { right: auto; left: 5vw; top: 8.5svh; font-size: min(31vw, 210px); }
  .a-figura { --alto: 54svh; bottom: 36svh; margin-left: calc(var(--alto) * -.3975 + 13vw); }
  .a-sombra { transform: translate(18px, 4px) skewX(-10deg); }
  /* Centrado y a la altura de los muslos (en el celular el body termina más arriba) */
  .a-santin { left: 50%; right: auto; bottom: 49svh; font-size: min(21vw, 143px); }
  .a-texto { left: 6vw; right: 6vw; width: auto; bottom: 76px; gap: 10px; }
  .a-texto .bajada span { display: none; }
  .a-texto .enlace { display: none; }
  /* La prueba también en el celular (los 5 segundos): solo el jurado, el logro más fuerte */
  .a-credito { display: none; }
}
/* Celulares bajos (375 × 667): la línea del laurel chocaría con "Santín", y bajar el bloque
   pone la frase sobre los zapatos (probado el 1/11). Ahí la prueba espera; en el resto se ve. */
@media (max-width: 1023px) and (orientation: portrait) and (max-height: 700px) {
  .a-prueba { display: none; }
}

/* Ventanas apaisadas de hasta 1100 px (notebooks chicas, paneles laterales, tablets acostadas: 630 × 610 a 1100 × 700).
   El entrelazado se mantiene, calculado desde la figura (1/11/2026, a pedido de CÉNIT: las dos columnas sueltas
   perdían la firma). Ella entra entera; "Sofi" termina donde la cruza su brazo (como en escritorio); el texto
   ocupa justo lo que queda a la izquierda de sus piernas; "Santín" cruza las piernas sin tocar el texto. */
@media (orientation: landscape) and (max-width: 1100px) {
  .hero-a {
    --alto-f: 84svh; --ancho-f: calc(var(--alto-f) * .795);
    --centro: min(62vw, calc(100vw - var(--ancho-f) / 2 - 3vw));          /* centro de la figura */
    --fin-sofi: calc(var(--centro) - var(--alto-f) * .18);                /* donde su brazo cruza "Sofi" */
    --tam-sofi: min(26svh, calc((var(--fin-sofi) - 4vw) / 1.95));
    --texto: min(42vw, calc(var(--centro) - var(--alto-f) * .14 - 4vw));  /* hasta sus piernas */
    --tam-santin: calc(var(--tam-sofi) * .68);                            /* 68 %, como pidió la mamá */
    --centro-santin: max(var(--centro), calc(4vw + var(--texto) + 18px + var(--tam-santin) * 1.33));
  }
  .a-figura { --alto: var(--alto-f); left: calc(var(--centro) - var(--ancho-f) / 2); right: auto; margin-left: 0; }
  /* El brazo está al 23 % del alto de la figura: "Sofi" se apoya ahí, con el brazo cruzando su parte baja */
  .a-sofi { left: auto; right: calc(100vw - var(--fin-sofi)); top: calc(100svh - var(--alto-f) + var(--alto-f) * .23 - var(--tam-sofi) * .74); font-size: var(--tam-sofi); }
  .a-santin { left: var(--centro-santin); bottom: 22svh; font-size: var(--tam-santin); }
  .a-texto { left: 4vw; right: auto; width: var(--texto); bottom: 5svh; gap: 10px; }
  .a-texto .enlace, .a-texto .bajada span, .a-credito { display: none; }
  .a-prueba { justify-self: start; }
}
@media (orientation: landscape) and (max-width: 1100px) and (max-height: 660px) {
  .a-prueba { display: none; }   /* ventanas bajas: el laurel espera (la bajada ya dice el método) */
}

/* La luz de la ventana sobre Sofi: un degradé cálido desde arriba a la izquierda,
   recortado con su propia silueta, en modo luz suave. La integra con la pared. */
.a-luz {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 55% at 18% 8%, rgb(255 236 210 / .95), rgb(255 228 196 / .25) 55%, rgb(60 40 30 / .35) 100%);
  -webkit-mask: url('../media/sofi-3.webp') 50% 100% / contain no-repeat;
  mask: url('../media/sofi-3.webp') 50% 100% / contain no-repeat;
  mix-blend-mode: soft-light;
  opacity: .9;
}
.a-foto, .a-tela { filter: drop-shadow(0 2px 2px rgb(40 36 33 / .18)) saturate(.94) sepia(.05); }
/* ---------- La versión anterior de "Santín" (75 %, abajo a la derecha), para comparar con ?santin=antes ---------- */
.hero-a.santin-antes .a-santin { left: calc(50% + 3vw - 88svh * .18); translate: none; bottom: 13svh; font-size: min(15.75vw, 27svh); }
@media (max-width: 1023px) and (orientation: portrait) {
  .hero-a.santin-antes .a-santin { left: auto; right: 5vw; bottom: 46svh; font-size: min(23.25vw, 158px); }
}

/* La foto como tela (js/tela.js, prototipo con ?tela): el lienzo ocupa el lugar exacto de la foto */
.a-tela { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ===== css/clases.css ===== */
/* Sección Clases · mundo clase.
   Tres portadas numeradas 1, 2, 3 (el conteo del básico). La activa crece y su clip se mueve;
   el cierre de la sección es el "tap": la misma acción de siempre. */

.clases {
  position: relative;
  padding: clamp(92px, 13svh, 120px) var(--margen) clamp(48px, 8svh, 80px);
  background:
    radial-gradient(70% 60% at 0% 0%, #FAF4EA, transparent 70%),
    var(--marfil);
}

/* Cabecera: el título grande a la izquierda, la bajada abajo a la derecha */
.clases__cabeza {
  display: grid; grid-template-columns: 1.25fr 1fr;
  align-items: end; gap: var(--s-6);
  margin-bottom: clamp(20px, 4svh, 40px);
}
/* (El estilo compartido .titulo pasó a base.css el 1/11/2026: lo usa también la escuela) */
.titulo, .destacado, .portada__frase { text-wrap: balance; }
.clases__cabeza .bajada { max-width: 40ch; justify-self: end; }

/* ---------- Las portadas ---------- */
.portadas {
  /* La cabecera y las portadas entran juntas en una pantalla */
  --alto-portadas: clamp(340px, calc(100svh - 270px), 600px);
  display: flex; gap: 12px;
  height: var(--alto-portadas);
  list-style: none; padding: 0;
}
.portada {
  --h: var(--alto-portadas);   /* alto de la portada activa: define el ancho de la ventana */
  position: relative; isolation: isolate;
  flex: 1 1 0; min-width: 0;
  border-radius: var(--r-medio);
  overflow: hidden;
  background: var(--espresso);
  color: var(--luz-alta);
  box-shadow: var(--sombra-flota);
  transition: box-shadow var(--interaccion) var(--curva);
}
.portada.is-activa { flex-grow: 3.1; box-shadow: var(--sombra-escena); }

/* El material: su foto de estudio. Cerrada, la foto completa; abierta, la foto se desenfoca
   como un fondo de estudio y adelante aparece su recorte, con sombra de contacto (como el hero) */
.portada__fondo {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 24%;
  transition: filter var(--tiempo) var(--curva), transform calc(var(--tiempo) * 2) var(--curva);
}
/* Abierta: la foto se va y queda un estudio limpio, con luz desde arriba y piso (el mismo estudio de sus fotos, graduado cálido) */
.portada.is-activa .portada__fondo { opacity: 0; transform: scale(1.06); }
.portada__fondo { transition: opacity var(--medio-tiempo) var(--curva), transform calc(var(--tiempo) * 2) var(--curva); }
.portada.is-activa {
  background:
    radial-gradient(60% 75% at 72% 8%, rgb(150 132 120 / .9), transparent 70%),
    linear-gradient(to bottom, #5a4d45 0%, #463b35 62%, #3a302b 62.4%, #2c2522 100%);
}
/* Grano fino de foto sobre el estudio */
.portada.is-activa::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%27160%27 height=%27160%27%3E%3Cfilter id=%27g%27%3E%3CfeTurbulence type=%27fractalNoise%27 baseFrequency=%27.9%27 numOctaves=%272%27 stitchTiles=%27stitch%27/%3E%3C/filter%3E%3Crect width=%27100%25%27 height=%27100%25%27 filter=%27url(%23g)%27/%3E%3C/svg%3E");
}

.portada__figura {
  --ancho: calc(var(--h) * .74);
  position: absolute; z-index: 0;
  right: 2%; bottom: 0; top: 16px;
  width: var(--ancho);
  opacity: 0; transform: translateY(28px) scale(.98);
  transform-origin: 50% 100%;
  transition: opacity var(--medio-tiempo) var(--curva), transform var(--tiempo) var(--curva);
  pointer-events: none;
}
.portada__figura img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 18px 24px rgb(20 14 12 / .35));
}
/* Sombra de contacto en el piso del estudio */
.portada__figura::after {
  content: ""; position: absolute; left: 18%; right: 18%; bottom: -10px; height: 30px;
  background: radial-gradient(50% 50% at 50% 50%, rgb(20 14 12 / .55), transparent 100%);
  filter: blur(4px); z-index: -1;
}
.portada.is-lista .portada__figura { opacity: 1; transform: none; }
/* Agachada: la figura ocupa menos alto, se agranda */
.portada__figura--agachada { top: -26%; --ancho: calc(var(--h) * .9); }
/* Plano medio: de la cara a la cintura, la figura se corta en el borde de abajo */
.portada__figura--medio { top: 16px; bottom: auto; height: 240%; right: calc(var(--h) * -.62); --ancho: calc(var(--h) * 1.85); }
.portada__figura--medio img { object-position: 50% 0; }
.portada__figura--medio::after { display: none; }
/* La luz de la escena: el piso se oscurece para que el texto se lea */
.portada::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to top, rgb(30 26 24 / .86) 0%, rgb(30 26 24 / .35) 42%, rgb(30 26 24 / .08) 70%);
  transition: opacity var(--tiempo) var(--curva);
}
.portada.is-activa::after { background: linear-gradient(to right, rgb(30 26 24 / .82) 0%, rgb(30 26 24 / .45) 45%, rgb(30 26 24 / .05) 75%), linear-gradient(to top, rgb(30 26 24 / .5), transparent 40%); }
.portada:not(.is-activa)::after { background: linear-gradient(to top, rgb(30 26 24 / .9), rgb(30 26 24 / .45)); }

/* Toda la portada se abre con un botón invisible (teclado y lectores de pantalla) */
.portada__abrir {
  position: absolute; inset: 0; z-index: 1;
  border: 0; background: none; cursor: pointer;
  border-radius: inherit;
}
.portada__abrir:focus-visible { outline: 2px solid var(--rosa); outline-offset: -4px; }

/* Lo que se ve siempre: el tiempo, el estado y el nombre */
.portada__tiempo {
  position: absolute; top: 22px; left: 26px;
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: var(--t-subtitulo); line-height: 1;
  color: var(--luz-media);
  pointer-events: none;
}
.portada__estado {
  position: absolute; top: 26px; right: 22px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--t-minimo); font-weight: 600; letter-spacing: .02em;
  color: var(--luz-alta);
  pointer-events: none;
}
.portada__estado i { position: relative; width: 7px; height: 7px; border-radius: var(--r-pastilla); background: rgb(244 235 221 / .5); }
/* Disponible: el punto late a 126 bpm. Solo transform y opacidad */
.portada__estado i.vivo { background: var(--rosa); }
.portada__estado i.vivo::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rosa);
  animation: latido calc(var(--tiempo) * 2) var(--curva) infinite;
}
@keyframes latido { from { transform: scale(1); opacity: .6; } to { transform: scale(3); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .portada__estado i.vivo::after { animation: none; opacity: 0; } }

.portada__pie {
  position: absolute; left: 26px; right: 26px; bottom: 26px; z-index: 2;
  display: grid; gap: var(--s-2);
  pointer-events: none;
}
.portada.is-activa .portada__pie { right: calc(var(--h) * .74 * .82); }
.portada__nombre {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-destacado); line-height: 1; letter-spacing: -.01em;
  transition: font-size var(--tiempo) var(--curva);
}
.portada.is-activa .portada__nombre { font-size: var(--t-subtitulo); }
.portada__breve { font-size: var(--t-detalle); color: var(--luz-media); }
.portada.is-activa .portada__breve { display: none; }

/* El detalle: solo en la activa */
.portada__detalle {
  display: grid; gap: var(--s-3);
  max-width: 460px;
  pointer-events: auto;
}
.portada:not(.is-activa) .portada__detalle { display: none; }
/* Mientras la portada crece, el detalle espera: entra recién cuando está abierta (lista) */
.portada.is-activa:not(.is-lista) .portada__detalle { visibility: hidden; }
.portada__frase { font-size: var(--t-cuerpo); line-height: 1.55; color: var(--luz-media); max-width: 29ch; }
/* Los datos: una línea de texto con separadores (sin chips) */
.portada__datos { display: flex; flex-wrap: wrap; list-style: none; padding: 0; font-size: var(--t-detalle); font-weight: 500; color: var(--luz-alta); }
/* El separador va al final de cada dato: así nunca empieza una línea */
.portada__datos li { white-space: nowrap; }
.portada__datos li:not(:last-child)::after { content: "·"; margin: 0 .55em; color: var(--rosa); }
.portada__detalle .boton { justify-self: start; position: relative; z-index: 3; }

/* ---------- El tap: la misma acción de toda la página ---------- */
.clases__tap {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  margin-top: var(--s-3);
  padding: 16px 16px 16px var(--s-4);
  border-radius: var(--r-medio);
  background: var(--rosa-claro);
}
.clases__tap p { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.clases__tap strong { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.1; }
.clases__tap p > span { color: var(--tinta-media); }
.clases__tap svg.tap { width: 22px; height: 22px; color: var(--rosa); flex: none; align-self: center; }

/* ---------- Tablet y teléfono: las portadas se apilan ---------- */
@media (max-width: 1023px) and (orientation: portrait) {
  .clases { padding: var(--s-12) var(--s-2) var(--s-8); }
  .clases__cabeza { grid-template-columns: 1fr; gap: var(--s-2); margin: 0 var(--s-1) var(--s-4); }
  .clases__cabeza .bajada { justify-self: start; }
  .portadas { flex-direction: column; height: auto; gap: 10px; }
  .portada { --h: min(560px, 70svh); flex: none; height: 112px; border-radius: var(--r-medio); }
  .portada.is-activa { height: min(600px, 78svh); }
  .portada__tiempo { top: 18px; left: 20px; }
  .portada__estado { top: 20px; right: 16px; }
  .portada__pie { left: 20px; right: 20px; bottom: 20px; }
  .portada:not(.is-activa) .portada__pie { left: 76px; bottom: 50%; transform: translateY(50%); }

  .portada:not(.is-activa) .portada__breve { display: none; }

  .clases__tap { flex-direction: column; align-items: flex-start; padding: var(--s-4); }

}
@media (max-width: 767px) {
  .portada:not(.is-activa) .portada__estado { display: none; }
}
/* Teléfono, y ventanas chicas apaisadas: ella va a la derecha y el texto abajo, sobre un velo */
@media (max-width: 599px), (max-width: 1023px) and (orientation: landscape) {
  .portada__figura { --ancho: 72%; right: -8%; top: 44px; }
  .portada.is-activa::after { background: linear-gradient(to top, rgb(30 26 24 / .92) 0%, rgb(30 26 24 / .55) 45%, rgb(30 26 24 / .1) 75%); }
  .portada.is-activa .portada__pie { right: 20px; z-index: 2; }
  .portada__detalle { max-width: none; }
}
/* En el teléfono la portada abierta se apila: arriba ella, entera y grande en su estudio;
   abajo el texto. Antes el texto la tapaba y la mitad de arriba quedaba vacía (1/11/2026) */
@media (max-width: 599px) {
  /* El alto lo anima GSAP (js/clases.js, altoActiva): acá solo se apila el contenido */
  .portada.is-activa { display: flex; flex-direction: column; justify-content: flex-end; }
  /* La figura ocupa justo el lugar que deja el texto (en el flujo, no un porcentaje): nunca lo toca */
  .portada.is-activa .portada__figura {
    position: relative; inset: auto; z-index: 0;
    flex: 1 1 0; min-height: 0; width: 100%; height: auto; margin: 52px 0 12px;
  }
  /* El recorte agachada tiene 10,5 % transparente abajo: la sombra va bajo sus zapatos, no en el aire */
  .portada__figura--agachada::after { bottom: calc(10.5% - 12px); }
  .portada__figura--medio img { object-position: 50% 100%; }
  .portada.is-activa .portada__pie { position: relative; left: auto; right: auto; bottom: auto; padding: 0 20px 22px; margin-top: auto; }
  .portada.is-activa::after { background: linear-gradient(to top, rgb(30 26 24 / .94) 0%, rgb(30 26 24 / .8) 40%, rgb(30 26 24 / 0) 58%); }
}

/* Ventanas apaisadas chicas (como el panel del navegador de la app): portada activa más simple */
@media (max-width: 1023px) and (orientation: landscape) {
  .portada__datos { display: none; }

  .portada:not(.is-activa) .portada__estado, .portada:not(.is-activa) .portada__breve { display: none; }

}
/* Teléfono: portadas cerradas más bajas y sin etiquetas, para que la sección entre casi en una pantalla */
@media (max-width: 599px) {
  .portada__datos { display: none; }
  .clases { padding-top: 88px; }
}
/* Pantallas bajas (notebooks con la barra del navegador): la portada activa se simplifica */
@media (max-height: 720px) and (min-width: 700px) {
  .portada__datos { display: none; }
  .portada__tiempo { top: 16px; }
}

/* ===== css/respaldo.css ===== */
/* Respaldo · "Del escenario a tu clase" · mundo escenario.
   Sofi en clase, a color, como foto viva. Al lado, sus logros como los créditos
   de una función, numerados 1, 2, 3 y tap. Nada corre solo: todo lo mueve la persona. */

.respaldo {
  position: relative; isolation: isolate; overflow: hidden;
  /* La foto cede ancho para que cada ficha diga su logro en una línea */
  display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr);
  align-items: center; gap: clamp(32px, 6vw, 112px);
  min-height: 100svh;
  padding: clamp(92px, 13svh, 128px) var(--margen) clamp(56px, 9svh, 96px);
  background: var(--espresso);
  color: var(--luz-alta);
}
.respaldo__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 60% at 24% 0%, rgb(244 235 221 / .12), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgb(118 47 59 / .35), transparent 75%);
}

/* ---------- La foto: Sofi en clase, a color. Es una foto viva (js/vivo.js) ---------- */
.cambio {
  position: relative; margin: 0;
  justify-self: end;
  width: 100%; max-height: clamp(380px, 74svh, 760px); aspect-ratio: 4 / 5;
  border-radius: var(--r-medio); overflow: hidden;
  border: 1px solid var(--filete-oscuro);   /* en el mundo escenario no hay sombra: lo separa el filete */
}
.cambio img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }

/* ---------- El texto y los créditos ---------- */
.respaldo .titulo em { color: var(--rosa); }
.respaldo__texto { margin-top: var(--s-2); font-size: var(--t-cuerpo); line-height: 1.6; color: var(--luz-media); max-width: 36ch; text-wrap: pretty; }

/* ---------- Los logros: la acreditación y tres fichas ---------- */
.logros {
  margin-top: clamp(20px, 4svh, 48px);
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: clamp(24px, 2.6vw, 40px);
}

/* La acreditación cuelga de la cinta; el punto de giro es arriba, donde nace la cinta */
.credencial {
  --ancho: clamp(190px, min(17vw, 34svh), 260px);   /* así su letra llega a 13 px, el mínimo del sistema */
  --mx: 50%;
  position: relative; width: var(--ancho);
  padding-top: clamp(56px, 9svh, 96px);
  transform-origin: 50% 0;
  filter: drop-shadow(28px 36px 26px rgb(0 0 0 / .45));
}
.credencial__cinta {
  position: absolute; left: 50%; top: 0; width: 26px; height: calc(clamp(56px, 9svh, 96px) + 10px); margin-left: -13px;
  background:
    repeating-linear-gradient(90deg, rgb(255 255 255 / .07) 0 1px, transparent 1px 3px),
    linear-gradient(90deg, #B97683, var(--rosa) 35%, #E5B3BB 55%, var(--rosa) 75%, #B97683);
  /* La cinta viene de arriba: nace difuminada */
  -webkit-mask: linear-gradient(to bottom, transparent, #000 45%);
  mask: linear-gradient(to bottom, transparent, #000 45%);
}
.credencial__broche {
  position: absolute; left: 50%; top: calc(clamp(56px, 9svh, 96px) - 6px); z-index: 2;
  width: 34px; height: 18px; margin-left: -17px; border-radius: var(--r-chico);
  background: linear-gradient(180deg, #F4EFE6, #E9E2D6 12%, #A9A094 60%, #D8D0C3);   /* el filo de luz va en el metal */
  box-shadow: var(--sombra-contacto);
}
/* La funda de PVC: transparente, con borde de luz y un brillo que sigue al cursor */
.credencial__funda {
  position: relative; padding: 6px; border-radius: var(--r-chico);
  background: rgb(255 255 255 / .10);
  border: 1px solid rgb(255 255 255 / .35); border-top-color: rgb(255 255 255 / .6);   /* el PVC: borde de luz */
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.credencial__brillo {
  position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(112deg, transparent calc(var(--mx) - 22%), rgb(255 255 255 / .38) var(--mx), transparent calc(var(--mx) + 18%));
  mix-blend-mode: screen;
}
.credencial__tarjeta {
  border-radius: calc(var(--r-chico) - 6px); overflow: hidden;   /* concéntrico con la funda */
  background: var(--marfil); color: var(--espresso);
  display: grid; justify-items: center; text-align: center;
  padding-bottom: 14px;
}
.credencial__cabeza {
  width: 100%; display: flex; justify-content: space-between;
  padding: 9px 12px; background: var(--espresso); color: var(--marfil);
  font-size: var(--t-minimo); font-weight: 600; letter-spacing: .02em;
}
.credencial__foto { width: 62%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; margin-top: 14px; border-radius: var(--r-chico); box-shadow: var(--sombra-contacto); }
.credencial__nombre { margin-top: 10px; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1; }
.credencial__rol {
  width: 100%; margin-top: 10px; padding: 7px 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--rosa); color: var(--espresso);
  font-size: var(--t-detalle); font-weight: 600; letter-spacing: .16em; text-indent: .16em; text-transform: uppercase;
}
.credencial__rol .laurel__rama { width: 9px; height: 18px; background: var(--espresso); }
.credencial__detalle { margin-top: 9px; font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-cuerpo); }
.credencial__pie { margin-top: 2px; font-size: var(--t-minimo); font-weight: 500; color: var(--tinta-baja); }

/* Las fichas: vidrio espresso con su miniatura */
.fichas { list-style: none; padding: 0; display: grid; gap: 12px; }
/* Cada ficha es un botón que abre su ventana */
.ficha {
  width: 100%; font: inherit; color: inherit; text-align: left; cursor: pointer;
  display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; align-items: center; gap: 16px;
  padding: 10px 18px 10px 10px; border-radius: var(--r-medio);
  background: rgb(244 235 221 / .06);
  border: 1px solid var(--filete-oscuro); border-top-color: rgb(244 235 221 / .2);
  /* El hover usa `translate` y no `transform`: el transform lo mueve GSAP en la entrada (errores 19, 66 y 77) */
  transition: translate var(--interaccion) var(--curva), background var(--interaccion) var(--curva);
}
.ficha:hover { translate: 6px 0; background: rgb(244 235 221 / .1); }
.ficha img, .ficha__sello { width: 60px; height: 60px; border-radius: var(--r-chico); object-fit: cover; }
.ficha:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
/* El sello de Escencia: su nombre en la cursiva de la marca, sobre la luz bordó de la noche */
.ficha__sello {
  display: grid; place-items: center;
  background: radial-gradient(circle at 30% 25%, var(--bordo), var(--espresso) 85%);
  font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: 15px; color: var(--rosa);
}
/* El "+" que avisa que hay más: gira a "×" al pasar */
.ficha__mas { position: relative; width: 14px; height: 14px; color: var(--luz-baja); transition: rotate var(--interaccion) var(--curva), color var(--interaccion) var(--curva); }
.ficha__mas::before, .ficha__mas::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
.ficha__mas::after { rotate: 90deg; }
.ficha:hover .ficha__mas { rotate: 90deg; color: var(--rosa); }

/* La ventana cuadrada que abre cada ficha está en css/ventanas.css */
.ficha strong { display: block; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.1; }
.ficha p span { display: block; margin-top: 3px; font-size: var(--t-detalle); color: var(--luz-media); }
.ficha--tap strong { color: var(--rosa); }

/* ---------- Tablet en vertical y teléfono ---------- */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .respaldo { grid-template-columns: 1fr; min-height: 0; padding: var(--s-12) var(--s-3) var(--s-8); gap: var(--s-6); }
  .respaldo__contenido { order: -1; }
  .cambio { justify-self: stretch; height: auto; width: 100%; }
  .logros { grid-template-columns: 1fr; justify-items: center; }
  .credencial { --ancho: 220px; }
  .fichas { width: 100%; }

}
/* Pantallas bajas: la sección hace scroll; no se achica la letra (solo el hero entra en una pantalla) */
.credencial__cabeza { white-space: nowrap; gap: 6px; }

/* ===== css/historias.css ===== */
/* Sus historias (portado de prototipos/10-web). Los nombres de color viejos apuntan a la identidad de Sofi. */
.franja, .capa-historias {
  --crema: var(--marfil); --crema-2: #EADFCC;
  --rojo: var(--rosa); --rojo-claro: var(--rosa-claro); --rojo-profundo: var(--bordo);
  --dorado: var(--camel); --noche: var(--espresso); --noche-2: #1E1A18;
  --fraunces: var(--f-titulo); --manrope: var(--f-texto);
  --ease-out: var(--curva); --t-entrada: var(--tiempo); --borde: var(--margen);
}
/* Su historia como historias (ANALISIS-HISTORIA.md, estilo A).
   Una franja chica en la página; la experiencia se abre en una capa por encima.
   Prueba del folleto: fotos reales (materia), anillo y sombras (luz), capas y fondo desenfocado (profundidad), barras que avanzan (detalle vivo). */

/* ── La franja ── */
.franja { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-6); align-items: center;
  padding: var(--s-8) var(--borde); background: var(--crema); color: var(--tinta-alta); }
.franja__avatar { position: relative; width: 250px; height: 170px; }

/* Tres miniaturas de las historias apiladas detrás del retrato; con el cursor se abren en abanico */
.mini { position: absolute; left: 84px; top: 22px; width: 76px; aspect-ratio: 9 / 16; border-radius: var(--r-chico); overflow: hidden;
  box-shadow: var(--sombra-flota);
  transform-origin: 50% 110%; transition: transform 420ms var(--ease-out); }
.mini img { width: 100%; height: 100%; object-fit: cover; }
.mini:nth-child(1) { transform: rotate(-4deg) translateX(10px); }
.mini:nth-child(2) { transform: rotate(5deg) translateX(26px); }
.mini:nth-child(3) { transform: rotate(14deg) translateX(42px); }
.franja.es-hover .mini:nth-child(1), .franja__avatar:hover .mini:nth-child(1) { transform: rotate(-10deg) translate(8px, -16px); }
.franja.es-hover .mini:nth-child(2), .franja__avatar:hover .mini:nth-child(2) { transform: rotate(3deg) translate(52px, -22px); }
.franja.es-hover .mini:nth-child(3), .franja__avatar:hover .mini:nth-child(3) { transform: rotate(16deg) translate(96px, -10px); }

/* El retrato con el anillo de historias (rojo apagado) que gira; ya vistas, el anillo pasa a gris.
   El anillo es un ::before circular que rota con transform: lo mueve el compositor, sin recalcular estilos
   ni repintar en cada cuadro (antes GSAP animaba --giro dentro del degradado, para siempre). */
.anillo-historia { position: absolute; left: 0; top: 17px; width: 136px; aspect-ratio: 1; border-radius: var(--r-pastilla); padding: 5px; z-index: 2;
  box-shadow: var(--sombra-flota); }
.anillo-historia::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: conic-gradient(var(--rojo-claro), var(--dorado), var(--rojo), var(--rojo-profundo), var(--rojo-claro));
  animation: anillo-giro 9s linear infinite; }
@keyframes anillo-giro { to { transform: rotate(1turn); } }
.anillo-historia img { width: 100%; height: 100%; border-radius: var(--r-pastilla); object-fit: cover; background: var(--crema-2); border: 4px solid var(--crema); filter: saturate(.65); }
.anillo-historia.vista::before { background: rgb(23 17 15 / .18); animation: none; }
@media (prefers-reduced-motion: reduce) { .anillo-historia::before { animation: none; } }

.franja__titulo { font-size: var(--t-subtitulo); }
.franja__meta { margin-top: 10px; display: flex; gap: 14px; align-items: center; font-size: var(--t-detalle); color: var(--tinta-baja); }
.franja__meta b { color: var(--tinta-alta); }
.franja__meta i { width: 4px; height: 4px; border-radius: var(--r-pastilla); background: currentColor; }

/* Botón "Ver mis historias": cuatro barritas que se llenan en 1, 2, 3, tap */
/* Es el botón principal (.boton): acá solo se suman las barritas 1, 2, 3, tap y el play */
.ver { gap: 16px; white-space: nowrap; }
.ver__barras { display: flex; gap: 4px; }
.ver__barras i { position: relative; width: 16px; height: 3px; border-radius: var(--r-pastilla); background: rgb(251 244 234 / .25); overflow: hidden; }
.ver__barras i::after { content: ""; position: absolute; inset: 0; background: var(--crema); transform: scaleX(var(--lleno, 0)); transform-origin: left; }
.ver__play { display: grid; place-items: center; color: var(--rosa); }
.ver__play svg { width: 14px; height: 14px; }
.franja.es-hover .ver__barras i { --lleno: 1; }
.franja.es-hover .ver__barras i:last-child { --lleno: .45; }

/* ── Las historias abiertas ── */
.capa-historias { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: hidden; background: var(--espresso); }
.capa-historias__fondo { position: absolute; inset: -60px; background-size: cover; background-position: center; filter: blur(48px) brightness(.32) saturate(.5); transform: scale(1.1); }
.capa-historias__cerrar { position: absolute; top: 24px; right: 28px; z-index: 3; width: 48px; height: 48px; border-radius: var(--r-pastilla); display: grid; place-items: center; color: var(--crema); }
.capa-historias__cerrar svg { width: 18px; }
.capa-historias__marca { position: absolute; top: 30px; left: 32px; z-index: 3; font: 600 var(--t-destacado)/1 var(--fraunces); color: var(--crema); }

/* El carrusel: la historia actual al centro, la anterior y la siguiente a los costados, chicas y apagadas (profundidad) */
.carrusel { position: relative; z-index: 2; display: flex; align-items: center; gap: 40px; perspective: 1400px; }
.vecina { width: 200px; aspect-ratio: 9 / 16; border-radius: var(--r-chico); overflow: hidden; opacity: .42; filter: saturate(.4); position: relative; }
.vecina img { width: 100%; height: 100%; object-fit: cover; }
.vecina span { position: absolute; left: 50%; top: 42%; translate: -50% -50%; width: 56px; aspect-ratio: 1; border-radius: var(--r-pastilla); padding: 3px; background: conic-gradient(var(--rojo-claro), var(--dorado), var(--rojo)); }
.vecina span img { border-radius: var(--r-pastilla); }
.flecha { width: 48px; height: 48px; border-radius: var(--r-pastilla); display: grid; place-items: center; color: var(--crema); flex: none; }
.flecha svg { width: 16px; }

.historia-vertical { position: relative; height: min(86svh, 820px); aspect-ratio: 9 / 16; border-radius: var(--r-medio); overflow: hidden; color: var(--crema); background: var(--espresso);
  border: 1px solid var(--filete-oscuro); }   /* sobre lo oscuro no hay sombra: filete */
.historia-vertical > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Luz para leer: sombra arriba (barras) y abajo (frase), como la luz de una pantalla */
.historia-vertical::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(0 0 0 / .55), transparent 18%, transparent 46%, rgb(0 0 0 / .78) 82%, rgb(0 0 0 / .9)); }
.historia-vertical > *:not(img) { position: relative; z-index: 2; }

.barras { position: absolute !important; top: 12px; left: 12px; right: 12px; display: flex; gap: 4px; }
.barras i { flex: 1; height: 3px; border-radius: var(--r-pastilla); background: rgb(255 255 255 / .3); overflow: hidden; position: relative; }
.barras i::after { content: ""; position: absolute; inset: 0; background: #fff; transform: scaleX(var(--lleno, 0)); transform-origin: left; }
.cabecera { position: absolute !important; top: 26px; left: 14px; right: 14px; display: flex; align-items: center; gap: 10px; font-size: var(--t-detalle); }
.cabecera__avatar { width: 34px; aspect-ratio: 1; border-radius: var(--r-pastilla); padding: 2px; background: conic-gradient(var(--rojo-claro), var(--dorado), var(--rojo), var(--rojo-claro)); }
.cabecera__avatar img { width: 100%; height: 100%; border-radius: var(--r-pastilla); object-fit: cover; border: 2px solid var(--espresso); }
.cabecera b { font-weight: 600; }
.cabecera span { color: rgb(251 244 234 / .7); }
.cabecera__iconos { margin-left: auto; display: flex; gap: 14px; }
.cabecera__iconos svg { width: 18px; height: 18px; }

/* El tiempo del paso, gigante y fino, como marca de agua de cada historia */
.tiempo-grande { position: absolute !important; top: 76px; left: 18px; font: italic 600 120px/.8 var(--fraunces); color: rgb(251 244 234 / .28); letter-spacing: -0.04em; }
.tiempo-grande.tap { color: rgb(217 154 165 / .8); font-weight: 400; }   /* el rosa de la marca, no rojo */

.historia__texto { position: absolute !important; left: 22px; right: 22px; bottom: 96px; }
.historia__capitulo { display: inline-flex; align-items: center; gap: 8px; font: 600 var(--t-minimo)/1 var(--manrope); letter-spacing: .02em; color: var(--luz-media); }
.historia__capitulo::before { content: ""; width: 18px; height: 2px; background: var(--rojo-claro); }
.historia__frase { margin-top: 12px; font: 600 var(--t-destacado)/1.08 var(--fraunces); letter-spacing: -0.015em; text-shadow: 0 2px 20px rgb(0 0 0 / .5); text-wrap: balance; }
.historia__frase em { font-style: italic; font-weight: 600; }

/* Stickers reales: lugar y fecha, en vidrio */
.sticker { position: absolute !important; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px 7px 9px; border-radius: var(--r-chico); font: 600 var(--t-minimo)/1 var(--manrope); color: var(--tinta-alta);
  background: rgb(251 244 234 / .92); box-shadow: var(--sombra-flota); rotate: -4deg; }
.sticker svg { width: 14px; height: 14px; color: var(--rojo); }
.sticker--vidrio { color: var(--crema); background: rgb(255 255 255 / .14); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / .2); border-top-color: rgb(255 255 255 / .35); rotate: 3deg; }

/* El sticker de enlace de la última historia (el tap): te lleva a reservar */
.sticker-enlace { position: absolute !important; left: 50%; top: 44%; display: inline-flex; align-items: center; gap: 10px; padding: 14px 20px 14px 16px;
  border-radius: var(--r-chico); background: var(--crema); color: var(--espresso); font: 600 var(--t-cuerpo)/1 var(--manrope); white-space: nowrap; box-shadow: var(--sombra-escena); }
.sticker-enlace i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: var(--r-pastilla); background: var(--rosa); color: var(--espresso); }
.sticker-enlace svg { width: 14px; }

/* Abajo, como en Instagram: escribirle a Sofi (otra puerta a la reserva) */
.responder { position: absolute !important; left: 14px; right: 14px; bottom: 16px; display: flex; gap: 10px; align-items: center; }
.responder span { flex: 1; height: 46px; border-radius: var(--r-pastilla); display: flex; align-items: center; padding: 0 18px; font-size: var(--t-detalle); color: var(--luz-media); border: 1.5px solid rgb(251 244 234 / .45); }
.responder svg { width: 24px; height: 24px; }

/* Teléfono: la historia ocupa toda la pantalla */
@media (max-width: 760px) {
  .franja { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "avatar meta" "texto texto" "boton boton"; gap: var(--s-2) var(--s-3); padding: var(--s-6) var(--borde); }
  .franja__avatar { grid-area: avatar; }
  .franja > div:not(.franja__avatar) { display: contents; }
  .franja__titulo { grid-area: texto; }
  .franja__meta { grid-area: meta; margin: 0; flex-direction: column; align-items: flex-start; gap: 2px; }
  .franja__meta i, .franja__meta span { display: none; }
  .franja__avatar { width: 132px; height: 100px; }
  .anillo-historia { width: 88px; top: 6px; }
  .mini { left: 46px; top: 12px; width: 46px; }
  .mini:nth-child(3) { display: none; }
  .franja__avatar { width: 146px; }
  .franja .ver { grid-area: boton; justify-content: space-between; }
  .capa-historias { background: var(--espresso); }
  .capa-historias__fondo, .vecina, .flecha, .capa-historias__marca, .capa-historias__cerrar { display: none; }
  .historia-vertical { height: 100svh; width: 100vw; aspect-ratio: auto; border-radius: 0; }
  .tiempo-grande { font-size: 96px; }
}

/* ── Interacción (js/historias.js) ── */
.capa-historias[hidden], .capa-historias [hidden] { display: none !important; }
.franja__avatar { cursor: pointer; }
.historia-vertical { transform-style: preserve-3d; backface-visibility: hidden; will-change: transform; touch-action: pan-x; user-select: none; -webkit-user-select: none; }
/* Zonas de toque: la izquierda vuelve, la derecha avanza (como en Instagram) */
.zona { position: absolute !important; top: 70px; bottom: 80px; z-index: 1 !important; }
.zona--atras { left: 0; width: 30%; }
.zona--adelante { right: 0; width: 70%; }
.zona:focus-visible { outline-offset: -6px; }
.cabecera, .sticker-enlace, .responder { z-index: 3 !important; }
.cabecera__iconos button { display: grid; place-items: center; width: 32px; height: 32px; margin: -7px; color: inherit; }
.sticker-enlace { transition: transform var(--interaccion) var(--ease-out); }
.sticker-enlace:hover { transform: scale(1.03); }
.responder span { transition: border-color var(--interaccion) var(--ease-out); }
.responder:hover span { border-color: rgb(251 244 234 / .8); }
.vecina { cursor: pointer; transition: opacity var(--t-entrada) var(--ease-out), transform 300ms var(--ease-out); }
.vecina:hover { opacity: .7 !important; transform: scale(1.03); }
.flecha { transition: transform 160ms var(--ease-out); }
.flecha:active { transform: scale(.94); }

.capa-historias:focus { outline: none; }
.solo-tel { display: none !important; }
@media (max-width: 760px) { .solo-tel { display: grid !important; } }

/* En la página nueva: la franja vive en el mundo clase, sobre marfil (dos mundos de fondo) */
.franja .titulo em { color: var(--rosa-tinta); }
.franja__titulo { text-wrap: balance; }

/* Historias abre el capítulo de Cómo enseña: su voz, después su método. Sin hueco entre las dos */
.franja--apertura { padding-bottom: 0; }

/* ===== css/ensena.css ===== */
/* Cómo enseña · mundo clase.
   Sus cuatro pilares entran a tempo: 1 técnica, 2 musicalidad, 3 conexión y el tap, estilo.
   En escritorio la sección queda fija y el scroll pasa de un pilar al otro (con scrub). */

.ensena { position: relative; background: var(--marfil); }
.ensena__fijo {
  min-height: 100svh;
  padding: clamp(92px, 13svh, 120px) var(--margen) clamp(32px, 6svh, 64px);
  display: grid; grid-template-rows: auto 1fr; gap: clamp(16px, 3svh, 40px);
}
.ensena__cabeza { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); }
.ensena__cabeza .titulo em { color: var(--rosa-tinta); }
.ensena__cabeza .bajada { max-width: 36ch; }

/* La escena: arriba el pilar (foto grande + texto) y el número como ancla; abajo, la partitura.
   Rediseño del 1/11/2026: antes era un número gigante, una foto chica y mucho vacío */
.ensena__escena {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
  gap: clamp(20px, 3.4svh, 40px) var(--s-6);
}
/* El tiempo en grande: el número del conteo, arriba a la derecha como el número de una partitura */
.ensena__tiempo {
  grid-column: 2; grid-row: 1; align-self: start;
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: clamp(140px, min(18vw, 34svh), 300px); line-height: .8;   /* rol monumental, como el nombre del hero */
  color: var(--espresso);
  perspective: 600px;
}
.ensena__tiempo span { display: inline-block; transform-origin: 50% 60%; }
.ensena__tiempo.es-tap span { color: var(--rosa-tinta); }

/* Los pilares: uno sobre otro, se ve el actual. La foto ocupa todo el alto */
.ensena__pilares { grid-column: 1; grid-row: 1; position: relative; list-style: none; padding: 0; height: clamp(340px, 58svh, 620px); }
.pilar {
  position: absolute; inset: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: clamp(28px, 4.4vw, 72px);
  visibility: hidden;
}
.pilar.es-actual { visibility: visible; }
.pilar__foto {
  height: 100%; aspect-ratio: 4 / 5; margin: 0;
  border-radius: var(--r-medio); overflow: hidden;
  box-shadow: var(--sombra-escena);
}
.pilar__foto img { width: 100%; height: 100%; object-fit: cover; }
.pilar__texto { padding-bottom: clamp(8px, 2svh, 24px); }
.pilar__texto h3 {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-titulo); line-height: 1; letter-spacing: -.01em;
}
.pilar__texto p { margin-top: var(--s-2); max-width: 32ch; font-size: var(--t-cuerpo); line-height: 1.55; color: var(--tinta-media); text-wrap: pretty; }

/* La partitura: 1, 2, 3 y el corazón sobre una línea que se llena con el scroll (--avance, js/secciones.js) */
.ensena__marcas {
  grid-column: 1 / -1; grid-row: 2;
  position: relative; isolation: isolate;
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ensena__marcas::before, .ensena__marcas::after {
  content: ""; position: absolute; left: 19px; right: 0; top: 19px; height: 1px; z-index: -1;
  background: var(--filete-claro); transform-origin: 0 50%;
}
.ensena__marcas::after { background: var(--rosa-tinta); transform: scaleX(var(--avance, 0)); }
.ensena__marcas li {
  display: flex; align-items: center; cursor: pointer;
  font-size: var(--t-detalle); font-weight: 500; color: var(--tinta-baja);
  transition: color var(--interaccion) var(--curva);
}
.ensena__marcas li::after { content: attr(data-nombre); padding: 0 12px; background: var(--marfil); }   /* tapa la línea detrás del nombre */
.ensena__marcas li b {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: var(--r-pastilla);
  font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-cuerpo);
  background: var(--marfil); border: 1px solid rgb(40 36 33 / .14); color: var(--tinta-media);
  transition: background var(--interaccion) var(--curva), color var(--interaccion) var(--curva), scale var(--interaccion) var(--curva-tap);
}
.ensena__marcas li svg { width: 14px; height: 14px; }
.ensena__marcas li:hover { color: var(--tinta-alta); }
.ensena__marcas li.es-actual { color: var(--tinta-alta); }
.ensena__marcas li.es-actual b { background: var(--espresso); border-color: var(--espresso); color: var(--marfil); scale: 1.12; }
.ensena__marcas li:last-child.es-actual b { background: var(--rosa); border-color: var(--rosa); color: var(--espresso); }

/* Notebooks y tablets en horizontal (menos de 1280 px): a 1024 el texto del pilar quedaba en 126 px
   y "Musicalidad" se salía (desborde de 117 px). El número cede ancho y el título baja a subtítulo. */
@media (max-width: 1279px) and (orientation: landscape) {
  .ensena__tiempo { font-size: clamp(110px, 13vw, 170px); }
  .pilar__texto h3 { font-size: var(--t-subtitulo); }
}
/* Movimiento reducido en pantallas anchas: sin fijar, los 4 pilares a la vista en dos columnas
   (antes solo se veía el primero) */
@media (prefers-reduced-motion: reduce) {
  .ensena__escena { grid-template-columns: 1fr; }
  .ensena__tiempo, .ensena__marcas { display: none; }
  .ensena__pilares { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: var(--s-6); }
  .pilar { position: relative; visibility: visible; align-items: center; }
  .pilar__foto { height: clamp(220px, 32svh, 340px); }
  .pilar__texto h3 { font-size: var(--t-subtitulo); }
}

/* Tablet en vertical y teléfono: los pilares en lista, sin fijar */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .ensena__fijo { min-height: 0; padding: var(--s-12) var(--s-3) var(--s-8); }
  .ensena__cabeza { flex-direction: column; align-items: start; gap: var(--s-2); }
  .ensena__escena { grid-template-columns: 1fr; }
  .ensena__tiempo, .ensena__marcas { display: none; }
  .ensena__pilares { height: auto; display: grid; gap: var(--s-4); }
  .pilar { position: relative; visibility: visible; grid-template-columns: 38% 1fr; gap: var(--s-3); }
  .pilar__foto { height: auto; width: 100%; }
  .pilar__texto h3 { font-size: var(--t-subtitulo); }
}

/* ===== css/escencia.css ===== */
/* La pista: Escencia · mundo escenario.
   Su social de los martes. La entrada es un objeto impreso: se corta el talón para decir "voy".
   La cuenta regresiva al próximo martes es el dato vivo. */

.escencia {
  position: relative; isolation: isolate; overflow: hidden;
  /* La entrada es la protagonista: más ancha que el texto (antes quedaba chica y sobraba media pantalla) */
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center; gap: clamp(32px, 5vw, 96px);
  min-height: 100svh;
  padding: clamp(92px, 13svh, 128px) var(--margen) clamp(56px, 9svh, 96px);
  background: var(--espresso); color: var(--luz-alta);
}
.escencia__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 60% at 74% 10%, rgb(244 235 221 / .14), transparent 70%),
    radial-gradient(50% 45% at 20% 110%, rgb(118 47 59 / .45), transparent 75%);
}
.escencia .titulo em { color: var(--rosa); }
.escencia__lema {
  margin-top: var(--s-3);
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: var(--t-destacado); color: var(--rosa);
}
.escencia .bajada { margin-top: var(--s-2); max-width: 40ch; }
/* La prueba: dos cifras reales, grandes y en la letra de la marca, separadas por un filete */
.escencia__cifras { margin-top: var(--s-4); display: flex; gap: var(--s-6); padding-top: var(--s-3); border-top: 1px solid var(--filete-oscuro); max-width: 40ch; }
.escencia__cifras div { display: flex; flex-direction: column-reverse; gap: 4px; }
.escencia__cifras dd { margin: 0; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-subtitulo); line-height: 1; color: var(--luz-alta); }
.escencia__cifras dt { font-size: var(--t-detalle); color: var(--luz-media); }
.escencia__cuenta {
  margin-top: var(--s-4);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: var(--r-pastilla);
  background: rgb(244 235 221 / .08); border: 1px solid var(--filete-oscuro); border-top-color: rgb(244 235 221 / .2);
  font-size: var(--t-detalle); font-weight: 500;
}
.escencia__cuenta i { position: relative; width: 8px; height: 8px; border-radius: var(--r-pastilla); background: var(--rosa); }
.escencia__cuenta i::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--rosa);
  animation: latido calc(var(--tiempo) * 2) var(--curva) infinite;
}
@media (prefers-reduced-motion: reduce) { .escencia__cuenta i::after { animation: none; opacity: 0; } }

/* ---------- La entrada ---------- */
.entrada-social {
  --papel: #F4EBDD;
  position: relative; justify-self: center;
  display: grid; grid-template-columns: 1fr auto;
  width: min(460px, 100%);
  transform: rotate(-4deg);
  /* En escritorio la entrada crece como un objeto en primer plano (scale suelto: no pisa al transform) */
  scale: var(--escala-entrada, 1);
  filter: drop-shadow(0 40px 50px rgb(0 0 0 / .45)) drop-shadow(0 4px 6px rgb(0 0 0 / .3));
}
.entrada-social__cuerpo, .entrada-social__talon {
  background:
    radial-gradient(120% 80% at 20% 0%, #FBF6EE, var(--papel) 60%, #E6D9C4);
  color: var(--espresso);
}
.entrada-social__cuerpo {
  padding: 28px 28px 24px;
  border-radius: var(--r-chico) 0 0 var(--r-chico);
  /* Las muescas del perforado, del lado del talón */
  -webkit-mask: radial-gradient(circle at 100% 10px, transparent 7px, #000 7.5px) right top / 100% 20px repeat-y;
  mask: radial-gradient(circle at 100% 10px, transparent 7px, #000 7.5px) right top / 100% 20px repeat-y;
}
.entrada-social__marca { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-subtitulo); line-height: 1; letter-spacing: -.01em; }
.entrada-social__tipo { margin-top: 6px; font-size: var(--t-minimo); font-weight: 600; color: var(--rosa-tinta); letter-spacing: .02em; }
.entrada-social__datos { margin-top: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; }
.entrada-social__datos dt { font-size: var(--t-minimo); font-weight: 600; color: var(--tinta-baja); letter-spacing: .04em; }
.entrada-social__datos dd { margin: 2px 0 0; font-size: var(--t-detalle); font-weight: 600; }
.entrada-social__pie { margin-top: 20px; font-size: var(--t-minimo); color: var(--tinta-baja); }

.entrada-social__talon {
  position: relative;
  width: 104px; border: 0; cursor: grab;
  border-radius: 0 var(--r-chico) var(--r-chico) 0;
  display: grid; place-items: center; align-content: center; gap: 10px;
  border-left: 2px dashed rgb(40 36 33 / .25);
  /* El hover usa rotate y translate sueltos: el transform lo mueve GSAP al arrastrar y cortar (errores 19, 66 y 77) */
  transition: rotate var(--interaccion) var(--curva), translate var(--interaccion) var(--curva);
  transform-origin: 0 100%;
}
.entrada-social__talon:hover { rotate: 4deg; translate: 3px 0; }
.entrada-social__talon:active { cursor: grabbing; }
.entrada-social__voy {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-subtitulo); line-height: 1;
}
.entrada-social__ayuda { font-size: var(--t-minimo); font-weight: 600; color: var(--rosa-tinta); }
.entrada-social__despues {
  position: absolute; left: 0; right: 0; bottom: -64px;
  text-align: center; font-size: var(--t-detalle); color: var(--luz-alta);
}
.entrada-social__despues b { color: var(--rosa); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
.entrada-social.esta-cortada .entrada-social__cuerpo { border-radius: var(--r-chico); }

@media (min-width: 1100px) and (min-height: 700px) { .entrada-social { --escala-entrada: 1.32; } }
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .escencia { grid-template-columns: 1fr; min-height: 0; padding: var(--s-12) var(--s-3) var(--s-16); gap: var(--s-6); }
  .entrada-social { width: min(360px, 100%); }
  /* Talón más angosto y menos margen: el cuerpo gana ancho y los datos no se parten en tres líneas */
  .entrada-social__talon { width: 72px; }
  .entrada-social__cuerpo { padding: 22px 18px 20px 20px; }
  .entrada-social__datos { gap: 12px 14px; }
}

/* ===== css/escenario.css ===== */
/* Escenario: contratá a Sofi · mundo escenario: espresso con el bordó como luz (shows y noche).
   Servicios en grande; con mouse, su retrato sigue al cursor sobre cada uno. */

.escenario {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(92px, 13svh, 128px) var(--margen) clamp(56px, 9svh, 96px);
  background:
    radial-gradient(60% 70% at 85% 0%, rgb(244 235 221 / .10), transparent 70%),
    radial-gradient(70% 70% at 12% 100%, rgb(118 47 59 / .55), transparent 72%),   /* el bordó es luz, no fondo */
    var(--espresso);
  color: var(--luz-alta);
}
.escenario__cabeza { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); }
.escenario .titulo em { color: var(--rosa); }
.escenario__cabeza .bajada { max-width: 34ch; }

.servicios { list-style: none; padding: 0; margin-top: clamp(28px, 5svh, 64px); }
.servicio {
  position: relative;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) minmax(0, 22ch);
  align-items: baseline; gap: var(--s-3);
  padding: clamp(14px, 2.4svh, 26px) 0;
  padding-right: 44px;   /* lugar para el "+" */
  cursor: pointer;
}
/* Toda la fila abre la ventana del servicio */
.servicio__abrir { position: absolute; inset: 0; z-index: 1; border: 0; background: none; cursor: pointer; border-radius: var(--r-chico); }
.servicio__abrir:focus-visible { outline: 2px solid var(--rosa); outline-offset: 4px; }
/* El "+" que avisa que hay más (a la derecha; en el celular, sobre la esquina de la foto) */
.servicio .mas { position: absolute; right: 0; top: 50%; translate: 0 -50%; color: var(--luz-baja); }
.servicio:hover .mas { color: var(--rosa); rotate: 90deg; }
.servicio__num { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-destacado); color: var(--luz-baja); }
.servicio h3 {
  font-family: var(--f-titulo); font-weight: 600;
  font-size: var(--t-titulo); line-height: 1; letter-spacing: -.015em;
  transition: color var(--interaccion) var(--curva), transform var(--medio-tiempo) var(--curva);
}
.servicio p { font-size: var(--t-detalle); color: var(--luz-media); }
.servicio:hover h3 { color: var(--rosa); transform: translateX(14px); }
.servicio__mini { display: none; }
.escenario__accion { margin-top: clamp(24px, 4svh, 48px); }

/* La imagen flotante: sigue al cursor, encima del bordó */
.escenario__flotante {
  position: absolute; left: 0; top: 0; z-index: 2; margin: 0;
  width: clamp(200px, 18vw, 280px); aspect-ratio: 4 / 5;
  border-radius: var(--r-medio); overflow: hidden;
  border: 1px solid var(--filete-oscuro);   /* sobre lo oscuro no hay sombra */
  pointer-events: none; opacity: 0;
}
.escenario__flotante img { width: 100%; height: 100%; object-fit: cover; }

@media (hover: none), (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .escenario__flotante { display: none; }
  .servicio { grid-template-columns: 1fr 88px; grid-template-areas: "h foto" "p foto"; align-items: center; row-gap: 4px; }
  .servicio__num { display: none; }
  .servicio h3 { grid-area: h; }
  .servicio p { grid-area: p; }
  .servicio { padding-right: 0; }
  .servicio .mas { right: 6px; top: calc(50% - 55px + 8px); translate: none; z-index: 1; padding: 6px; width: 26px; height: 26px; border-radius: var(--r-pastilla); background: var(--vidrio-espresso); color: var(--luz-alta); }
  .servicio .mas::before, .servicio .mas::after { left: 6px; top: 12px; }
  .servicio__mini { display: block; grid-area: foto; width: 88px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--r-chico); }
}
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .escenario { padding: var(--s-12) var(--s-3) var(--s-8); }
  .escenario__cabeza { flex-direction: column; align-items: start; gap: var(--s-2); }
}

/* ===== css/preguntas.css ===== */
/* Preguntas · mundo clase, sobre marfil.
   Cada pregunta es un botón que abre su respuesta en una ventana cuadrada (css/ventanas.css). */

.preguntas {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.4fr);
  gap: clamp(32px, 6vw, 112px); align-items: start;
  padding: clamp(92px, 13svh, 128px) var(--margen) clamp(64px, 10svh, 112px);
  background: var(--marfil);
}
.preguntas__cabeza { position: sticky; top: 120px; }
.preguntas .titulo em { color: var(--rosa-tinta); }
.preguntas__cabeza .bajada { margin-top: var(--s-2); }

.preguntas__lista { display: grid; gap: 6px; list-style: none; padding: 0; }
.pregunta {
  width: 100%; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: 22px 24px; border-radius: var(--r-medio);
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.15;
  transition: background var(--interaccion) var(--curva);
}
.pregunta:hover { background: rgb(255 255 255 / .55); box-shadow: var(--sombra-contacto); }
.pregunta:focus-visible { outline: 2px solid var(--rosa-tinta); outline-offset: 2px; }
/* El signo: un "+" fino, sin círculo. Al pasar gira 90° y se vuelve rosa: hay más */
.pregunta__signo {
  position: relative; flex: none; width: 34px; height: 34px;
  transition: rotate var(--medio-tiempo) var(--curva-tap);
}
.pregunta__signo::before, .pregunta__signo::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 18px; height: 1.6px; margin: -0.8px 0 0 -9px;
  border-radius: var(--r-pastilla); background: var(--espresso);
  transition: background var(--interaccion) var(--curva);
}
.pregunta__signo::after { rotate: 90deg; }
.pregunta:hover .pregunta__signo { rotate: 90deg; }
.pregunta:hover .pregunta__signo::before, .pregunta:hover .pregunta__signo::after { background: var(--rosa-tinta); }
.a-confirmar { color: var(--rosa-tinta); font-size: var(--t-detalle); }

@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .preguntas { grid-template-columns: 1fr; padding: var(--s-12) var(--s-2) var(--s-8); gap: var(--s-4); }
  .preguntas__cabeza { position: static; padding: 0 var(--s-1); }
  .pregunta { padding: 18px 16px; }
}

/* La columna del título también lleva la acción (antes quedaba vacía debajo de la bajada) */
.preguntas__accion { display: inline-block; margin-top: var(--s-4); }

/* ===== css/cierre.css ===== */
/* Cierre y pie · mundo escenario. El final que se recuerda (regla del pico y el final):
   el logo completo aparece bajo un foco, la frase grande y la misma acción de toda la página. */

.cierre {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; justify-items: center; text-align: center;
  padding: clamp(96px, 15svh, 160px) var(--margen) var(--s-4);
  background: var(--espresso); color: var(--luz-alta);
}
.cierre__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(34% 60% at 50% -8%, rgb(244 235 221 / .16), transparent 72%),
    radial-gradient(55% 30% at 50% 102%, rgb(217 154 165 / .12), transparent 75%);
}
.cierre__logo { width: clamp(150px, 16vw, 220px); height: auto; }
.cierre__titulo {
  margin-top: clamp(28px, 5svh, 56px);
  font-family: var(--f-titulo); font-weight: 600;
  font-size: clamp(52px, min(8vw, 13svh), 136px); line-height: .95; letter-spacing: -.02em;   /* rol monumental: el pico final de la página */
}
.cierre__titulo em { font-style: italic; color: var(--rosa); }
.cierre .bajada { margin: var(--s-3) auto var(--s-4); }

.pie {
  width: 100%; margin-top: clamp(64px, 12svh, 128px);
  display: grid; grid-template-columns: 1fr auto; gap: var(--s-3) var(--s-6); align-items: end;
  padding-top: var(--s-4);
  text-align: left; font-size: var(--t-detalle); color: var(--luz-media);
}
.pie__nav { display: flex; flex-wrap: wrap; gap: 0 22px; }
.pie a { display: inline-block; padding: 10px 0; transition: color var(--interaccion) var(--curva); }   /* 44 px de toque */
.pie a:hover { color: var(--rosa); }
.pie__redes { list-style: none; padding: 0; display: grid; gap: 0; justify-items: end; }
.pie__legal { grid-column: 1 / -1; color: var(--luz-baja); font-size: var(--t-minimo); }

@media (max-width: 767px) {
  .cierre { padding: var(--s-16) var(--s-3) calc(var(--s-4) + 80px); }
  .pie { grid-template-columns: 1fr; }
  .pie__redes { justify-items: start; }
}

/* ===== css/ventanas.css ===== */
/* Ventanas: una pantalla cuadrada que se abre al tocar (logros de Respaldo, servicios de Escenario y Preguntas).
   La abre y la cierra js/ventanas.js. */

html:has(.ventana[open]) { overflow: hidden; }
.ventana { position: fixed; inset: 0; margin: auto; padding: 0; border: 0; background: none; max-width: none; max-height: none; overflow: visible; color: var(--luz-alta); }
.ventana::backdrop { background: rgb(40 36 33 / .62); backdrop-filter: blur(6px); }
.ventana__caja {
  position: relative; overflow: hidden;
  width: min(420px, calc(100vw - 32px), calc(100svh - 64px)); aspect-ratio: 1;
  border-radius: var(--r-medio); border: 1px solid var(--filete-oscuro); border-top-color: rgb(244 235 221 / .2);
  background: var(--espresso); box-shadow: var(--sombra-escena);
}
.ventana__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Velo espresso desde abajo: el texto siempre se lee sobre la foto */
.ventana__caja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(40 36 33 / .96) 0 38%, rgb(40 36 33 / .55) 60%, transparent 82%); }
.ventana__texto { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 2; display: grid; gap: 8px; }
.ventana__texto h3 { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.05; }
.ventana__texto > p:not(.ventana__dato) { font-size: var(--t-detalle); line-height: 1.5; color: var(--luz-media); }
.ventana__dato { font-size: var(--t-minimo); font-weight: 600; letter-spacing: .04em; color: var(--rosa); }
.ventana__lista { list-style: none; padding: 0; margin-top: 4px; }
.ventana__lista li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--filete-oscuro); }
.ventana__lista strong { font-family: var(--f-titulo); font-weight: 600; font-size: 20px; white-space: nowrap; }
.ventana__lista span { font-size: var(--t-minimo); color: var(--luz-media); text-align: right; }
.ventana__enlace { justify-self: start; margin-top: 4px; color: var(--luz-alta); }
.ventana__cerrar {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 44px; height: 44px; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--filete-oscuro); border-radius: var(--r-pastilla);
  background: var(--vidrio-espresso); backdrop-filter: blur(var(--vidrio-desenfoque)); color: var(--luz-alta);
  transition: background var(--interaccion) var(--curva);
}
.ventana__cerrar:hover { background: rgb(40 36 33 / .7); }
.ventana__cerrar:focus-visible { outline: 2px solid var(--rosa); outline-offset: 2px; }
.ventana__cerrar svg { width: 14px; height: 14px; }
/* Escencia no tiene foto propia: su nombre es la imagen, con la luz bordó de la noche */
.ventana--letra .ventana__caja { background: radial-gradient(120% 90% at 20% 10%, var(--bordo), var(--espresso) 70%); }
.ventana--letra .ventana__caja::after { display: none; }
.ventana__marca {
  position: absolute; left: 22px; top: 20px; right: 64px;
  font-family: var(--f-titulo); font-style: italic; font-weight: 600;
  font-size: clamp(64px, 22cqw, 96px); line-height: .9; letter-spacing: -.02em; color: var(--rosa);
}
.ventana--letra .ventana__caja { container-type: inline-size; }

/* La acción dentro de la ventana: el siguiente paso, sin salir de ella */
.ventana__accion { justify-self: start; margin-top: 6px; }
.ventana__accion .boton { min-height: 44px; }

/* ---------- Ventana clara: Preguntas (mundo clase, sobre marfil, sin foto) ---------- */
.ventana--clara { color: var(--tinta-alta); }
.ventana--clara .ventana__caja {
  background: radial-gradient(120% 90% at 85% 0%, var(--rosa-claro), var(--marfil) 60%);
  border-color: rgb(255 255 255 / .7); box-shadow: var(--sombra-escena);
}
.ventana--clara .ventana__caja::after { display: none; }
.ventana--clara .ventana__texto { top: 28px; bottom: 24px; align-content: space-between; }
.ventana--clara .ventana__texto h3 { font-size: clamp(28px, 9cqw, 38px); line-height: 1.05; text-wrap: balance; }
.ventana--clara .ventana__caja { container-type: inline-size; }
.ventana--clara .ventana__texto > p:not(.ventana__dato) { font-size: var(--t-cuerpo); color: var(--tinta-media); text-wrap: pretty; }
.ventana--clara .ventana__dato { color: var(--rosa-tinta); }
.ventana--clara .ventana__cerrar { background: rgb(255 255 255 / .6); border-color: var(--filete-claro); color: var(--tinta-alta); }
.ventana--clara .ventana__cerrar:hover { background: rgb(255 255 255 / .9); }
.ventana--clara .ventana__cerrar:focus-visible { outline-color: var(--rosa-tinta); }
/* Arriba la pregunta, abajo la respuesta y la acción */
.ventana__arriba, .ventana__abajo { display: grid; gap: 10px; }
.ventana__arriba { padding-right: 52px; }

/* El "+" que avisa que una fila abre una ventana */
.mas { position: relative; width: 14px; height: 14px; transition: rotate var(--interaccion) var(--curva), color var(--interaccion) var(--curva); }
.mas::before, .mas::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px; height: 2px; border-radius: 2px; background: currentColor; }
.mas::after { rotate: 90deg; }

/* El monograma de Sofi de marca de agua en las ventanas claras: llena el aire de las respuestas cortas */
.ventana--clara .ventana__caja::before {
  content: ""; position: absolute; right: -6%; bottom: -10%; width: 62%; aspect-ratio: 100 / 133.3;
  background: url("../media/logo-simple-espresso.svg") center / contain no-repeat;
  opacity: .06; pointer-events: none;
}