/* ===== 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/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;
}

/* ===== css/escuela.css ===== */
/* La escuela online · escuela.html (plan en ESCUELA.md).
   La idea: el curso es un disco. La tapa es un diseño sin foto (el diagrama del paso básico),
   el temario es la lista de temas con lado A y lado B, y el vinilo asoma con el scroll. */

.escuela-hero .titulo em, .para-quien .titulo em, .sofi .titulo em, .recorrido .titulo em, .preguntas .titulo em { color: var(--rosa-tinta); }
.temas .titulo em { color: var(--rosa); }

/* ---------- Hero: el texto a la izquierda, el disco a la derecha ---------- */
.escuela-hero {
  height: auto; min-height: max(100svh, 680px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; gap: clamp(32px, 5vw, 96px);
  padding: clamp(112px, 15svh, 150px) var(--margen) clamp(56px, 9svh, 96px);
  background: var(--marfil);
}
/* La misma luz de ventana del hero de la página principal */
.escuela-hero__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 70% at 78% 18%, rgb(255 255 255 / .55), transparent 70%),
    radial-gradient(60% 60% at 0% 100%, rgb(217 154 165 / .14), transparent 70%);
}
.escuela-hero__texto { display: grid; gap: var(--s-3); justify-items: start; }
.escuela-hero .titulo { max-width: 12ch; }
.escuela-hero .bajada { max-width: 40ch; }
.escuela-hero .bajada strong { font-weight: 600; color: var(--tinta-alta); }
.escuela-hero .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-4); }
.escuela-hero__prueba { margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1px solid var(--filete-claro); gap: 8px; }
.escuela-hero__prueba .laurel__rama { width: 10px; height: 20px; }
.escuela-hero__prueba span { text-align: left; }
.escuela-hero__prueba strong { font-size: var(--t-detalle); }

/* ---------- El disco: la tapa adelante, el vinilo atrás ---------- */
.disco {
  --sale: .46;   /* cuánto asoma el vinilo al final del recorrido (fracción de su ancho) */
  position: relative; justify-self: start;
  width: min(480px, 32vw); aspect-ratio: 1;
}
.disco__tapa {
  position: absolute; inset: 0; z-index: 2; margin: 0;
  border-radius: var(--r-chico); overflow: hidden;
  box-shadow: var(--sombra-escena), 0 1px 0 rgb(255 255 255 / .06) inset;
}
.disco__tapa svg { display: block; width: 100%; height: 100%; }
/* Brillo de la funda de cartón: una luz suave desde la ventana */
.disco__tapa::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgb(255 255 255 / .1), transparent 38%);
}
.disco__pista { position: absolute; top: 3%; left: 3%; z-index: 1; width: 94%; aspect-ratio: 1; }
.disco__vinilo {
  position: absolute; inset: 0; border-radius: 50%;
  display: grid; place-items: center;
  background:
    conic-gradient(from 20deg, transparent 0 8%, rgb(255 255 255 / .1) 14%, transparent 22% 56%, rgb(255 255 255 / .07) 62%, transparent 70%),
    repeating-radial-gradient(circle at 50% 50%, #1d1917 0 1.5px, #2a2522 1.5px 3px);
  box-shadow: 0 30px 50px -20px rgb(20 14 12 / .55), 0 0 0 1px rgb(0 0 0 / .4);
}
/* La etiqueta del centro: el rosa de la marca con su monograma y el agujero */
.disco__etiqueta {
  position: relative; display: grid; place-items: center;
  width: 34%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #E7B5BE, var(--rosa) 60%);
  box-shadow: inset 0 0 0 4px rgb(40 36 33 / .12);
}
.disco__etiqueta img { width: 26%; height: auto; transform: translateY(-14%); opacity: .85; }
.disco__etiqueta::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 7%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: var(--marfil); box-shadow: inset 0 1px 2px rgb(0 0 0 / .4);
}
/* Movimiento reducido (o sin JS): el vinilo queda asomado, quieto */
@media (prefers-reduced-motion: reduce) { .disco__pista { translate: 34% 0; } }

/* ---------- Para quién ---------- */
.para-quien { padding: clamp(96px, 14svh, 160px) var(--margen) clamp(64px, 10svh, 112px); }
.para-quien__lista {
  list-style: none; padding: 0; margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-6);
}
.para-quien__lista li { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-3); border-top: 1px solid var(--filete-claro); }
.para-quien__num { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-subtitulo); line-height: 1; color: var(--rosa-tinta); }
.para-quien h3 { margin-top: var(--s-1); font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.1; }
.para-quien p { color: var(--tinta-media); max-width: 32ch; }

/* ---------- La lista de temas (la contratapa del disco), mundo escenario ---------- */
.temas {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(96px, 14svh, 160px) var(--margen);
  background: var(--espresso); color: var(--luz-alta);
}
.temas__luz {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 55% at 15% 0%, rgb(244 235 221 / .12), transparent 70%),
    radial-gradient(45% 50% at 100% 100%, rgb(118 47 59 / .4), transparent 75%);
}
.temas__cabeza { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); }
.temas__cabeza .bajada { max-width: 38ch; }
.temas__lados { margin-top: var(--s-8); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8); }
.lado__nombre {
  display: flex; align-items: baseline; gap: 14px;
  font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-subtitulo); line-height: 1;
}
.lado__nombre span { font-family: var(--f-texto); font-size: var(--t-detalle); font-weight: 600; color: var(--rosa); }
.lado__temas { list-style: none; padding: 0; margin-top: var(--s-3); }
.lado__temas li {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: baseline; gap: var(--s-2);
  padding: 14px 0; border-top: 1px solid var(--filete-oscuro);
}
.tema__num { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-destacado); line-height: 1; color: var(--luz-baja); }
.lado__temas strong {
  display: block; font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.15;
  transition: color var(--interaccion) var(--curva);
}
.lado__temas li div > span { display: block; margin-top: 2px; font-size: var(--t-detalle); color: var(--luz-media); }
.lado__temas li:hover strong { color: var(--rosa); }
.tema--final strong, .tema--final .tema__num { color: var(--rosa); }
.tema--final .tema__num svg { width: 18px; height: 18px; }

/* ---------- Quién te enseña ---------- */
.sofi {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(28px, 5vw, 80px);
  padding: clamp(96px, 14svh, 160px) var(--margen) clamp(48px, 8svh, 96px);
  max-width: 1100px;
}
/* El retrato con el anillo rosa de las historias de Instagram: la misma persona de su perfil */
.sofi__retrato {
  width: clamp(140px, 16vw, 220px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  box-shadow: 0 0 0 5px var(--marfil), 0 0 0 7px var(--rosa), var(--sombra-flota);
}
.sofi__texto { margin: var(--s-2) 0 var(--s-3); max-width: 46ch; color: var(--tinta-media); }

/* ---------- El recorrido: los volúmenes sobre una línea ---------- */
.recorrido { padding: clamp(64px, 10svh, 112px) var(--margen) clamp(96px, 14svh, 160px); }
.recorrido__cabeza { display: flex; align-items: end; justify-content: space-between; gap: var(--s-6); }
.recorrido__linea {
  position: relative; list-style: none; padding: 0; margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-3);
}
.recorrido__linea::before { content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 1px; background: var(--filete-claro); }
.recorrido__linea li { position: relative; display: grid; gap: 4px; padding-top: 32px; color: var(--tinta-baja); }
.recorrido__linea li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; border-radius: 50%;
  background: var(--marfil); border: 1.5px solid rgb(40 36 33 / .3);
}
.recorrido__vol { font-family: var(--f-titulo); font-style: italic; font-weight: 600; font-size: var(--t-cuerpo); }
.recorrido__linea strong { font-family: var(--f-titulo); font-weight: 600; font-size: var(--t-destacado); line-height: 1.1; }
.recorrido__linea li > span:last-child { font-size: var(--t-detalle); }
.recorrido__linea li.es-abierto { color: var(--tinta-alta); }
.recorrido__linea li.es-abierto::before { background: var(--rosa); border-color: var(--rosa); box-shadow: 0 0 0 5px rgb(217 154 165 / .25); }
.recorrido__linea li.es-abierto .recorrido__vol { color: var(--rosa-tinta); }

/* ---------- Tablet en vertical y teléfono ---------- */
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .escuela-hero { grid-template-columns: 1fr; align-content: start; gap: var(--s-6); padding-top: 112px; padding-bottom: var(--s-8); }
  .escuela-hero .titulo { max-width: 14ch; }
  .disco { --sale: .3; width: min(340px, 64vw); justify-self: start; margin-left: 2vw; }
  .para-quien__lista, .temas__lados { grid-template-columns: 1fr; }
  .para-quien__lista { gap: var(--s-4); }
  .temas__cabeza, .recorrido__cabeza { flex-direction: column; align-items: start; gap: var(--s-2); }
  .temas__lados { gap: var(--s-6); margin-top: var(--s-6); }
  .sofi { grid-template-columns: 1fr; justify-items: start; }
  /* El recorrido, vertical: la línea baja por la izquierda */
  .recorrido__linea { grid-template-columns: 1fr; gap: var(--s-3); }
  .recorrido__linea::before { left: 7px; right: auto; top: 8px; bottom: 8px; width: 1px; height: auto; }
  .recorrido__linea li { padding: 0 0 0 36px; }
}
@media (max-width: 1023px) and (orientation: portrait), (max-width: 699px) {
  .escuela-hero .acciones .enlace { display: none; }
}
/* Ventanas apaisadas bajas: el disco más chico para que el hero entre */
@media (max-height: 720px) and (orientation: landscape) { .disco { width: min(400px, 28vw, 56svh); } }