/* Oro viejo de la baraja. Ya existía como --warning en los tokens; se le da
   nombre propio aquí porque en el resultado no significa «aviso» sino
   «heredado»: el personaje, los filetes, los ornamentos. */
/* Dos oros, no uno. El ocre apagado es el de los FILETES y ornamentos —ahí el
   contraste da igual, son líneas—. Para TEXTO va el oro claro: el apagado pasa
   AA (5,17) pero se queda sin presencia, y el nombre del personaje es la única
   pieza heredada de la página. Comprobado sobre #0E170E: 5,17 vs 7,56. */
:root{--naipe-ocre:#A68416; --naipe-oro:#C9A227}

/* ── EL NAIPE ─────────────────────────────────────────────────────────────
   Compartido por el quiz (index.html) y las muestras. Depende de los tokens
   de nomba-tokens.css y de los assets de naipes/. */
/* ── EL NAIPE DEL RESULTADO ─────────────────────────────────────
   Sustituye al círculo de iniciales. El palo dice QUÉ CLASE de
   emprendedor eres (oros capital · bastos producto · espadas
   disrupción · copas propósito) y el valor CUÁNDO llegaste: orden
   cronológico dentro del palo, as el más antiguo y rey el más
   moderno. Por eso los contemporáneos caen en las figuras — y las
   figuras de la baraja española nunca son retratos, que es lo que
   evita usar la cara de nadie vivo.
   Emblemas grabados con GPT Image 2; el reloj de arena se compone
   encima en SVG, nunca se le pide al modelo. */
.naipe {
  --tinta: var(--seed-page);
  position: relative; width: 232px; height: 356px; margin: 0 auto 20px;
  border-radius: 11px; overflow: hidden; background: #0F190F;
  border: 1px solid rgba(247,248,229,.22);
  box-shadow: 0 16px 38px rgba(10,19,10,.42);
  animation: scaleIn 380ms cubic-bezier(.22,1,.36,1) both;
}
/* Cara de la carta: el grabado del siglo que le ha tocado. Son los cuatro
   fondos de naipes/fondos/web/ —2:3, la misma proporción que la carta—, que
   estaban generados y sin usar: la carta era verde plano. Van MUY apagados y
   con una viñeta encima porque el nombre y el emblema se leen sobre ellos;
   la imagen ambienta, no compite. */
.naipe .n-fondo { position:absolute; inset:0; z-index:1;
  background-size:cover; background-position:center; opacity:.38;
  filter:grayscale(.35) contrast(1.06); }
.naipe .n-fondo::after { content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 46%, rgba(15,25,15,.34) 0%,
    rgba(15,25,15,.74) 58%, rgba(15,25,15,.93) 100%); }
.naipe.e-xviii .n-fondo { background-image:url('./naipes/fondos/web/xviii.jpg') }
.naipe.e-xix   .n-fondo { background-image:url('./naipes/fondos/web/xix.jpg') }
.naipe.e-xx    .n-fondo { background-image:url('./naipes/fondos/web/xx.jpg') }
.naipe.e-xxi   .n-fondo { background-image:url('./naipes/fondos/web/xxi.jpg') }

.naipe .n-marco { position:absolute; inset:11px; border-radius:5px; z-index:2;
  border:1px solid rgba(247,248,229,.30); }
.naipe .n-marco::after { content:''; position:absolute; inset:5px; border-radius:3px;
  border:1px solid rgba(247,248,229,.13); }
.naipe .n-idx { position:absolute; z-index:3; display:flex; flex-direction:column;
  align-items:center; gap:3px; font-family:var(--font-display); font-weight:500;
  font-size:22px; line-height:1; color:var(--seed-page); }
.naipe .n-idx.tl { top:21px; left:21px }
.naipe .n-idx.br { bottom:21px; right:21px; transform:rotate(180deg) }
.naipe .n-idx .n-emb { width:15px; height:15px }
.naipe .n-centro { position:absolute; inset:48px 22px 42px; z-index:3; display:flex;
  flex-direction:column; align-items:center; justify-content:center; text-align:center }
.naipe .n-emb { background-size:contain; background-repeat:no-repeat; background-position:center;
  display:block }
.naipe .n-centro .n-emb { position:relative; width:104px; height:104px }
.naipe .n-hg { position:absolute; transform:translate(-50%,-50%); display:block }
.naipe .n-hg svg { width:100%; height:auto; display:block; fill:#6E2B2B }
.naipe .n-nombre { font-family:var(--font-display); font-weight:500; font-size:20px;
  line-height:1.14; color:var(--seed-page); margin:16px 0 0; letter-spacing:-.01em }
.naipe .n-anio { font-size:10.5px; letter-spacing:.24em; font-weight:600;
  color:var(--seed-lime); margin-top:8px }
/* emblema y posición del reloj: medidos a píxel sobre cada grabado */
.naipe.p-oros    .n-emb { background-image:url('./naipes/palos-v2/web/oros.png') }
.naipe.p-copas   .n-emb { background-image:url('./naipes/palos-v2/web/copas.png') }
.naipe.p-espadas .n-emb { background-image:url('./naipes/palos-v2/web/espadas.png') }
.naipe.p-bastos  .n-emb { background-image:url('./naipes/palos-v2/web/bastos.png') }
.naipe.p-oros    .n-centro .n-hg { left:49.94%; top:48.89%; width:11.92% }
.naipe.p-copas   .n-centro .n-hg { left:50.11%; top:33.28%; width:8.06% }
.naipe.p-espadas .n-centro .n-hg { left:49.94%; top:89.89%; width:4.36% }
.naipe.p-bastos  .n-centro .n-hg { left:43.61%; top:78.50%; width:7.28% }
.naipe .n-idx .n-hg { display:none }
.resultado .r-carta { font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-tertiary); font-weight:600; margin-bottom:14px }
.resultado .r-carta b { color:var(--accent-text-dark) }


/* ── RESULTADO · heritage premium ──────────────────────────────────────────
   Dirección: el naipe de un fabricante antiguo. Fournier, no una app.

   La decisión que ordena todo lo demás: la tarjeta del resultado va en VERDE
   OSCURO y no en crema. Una carta se mira sobre el tapete, no sobre papel — y
   de paso desaparece el problema de contraste que tenía la versión clara, donde
   los tokens --chrome-* dejaban el texto invisible sobre fondo crema.

   Dos acentos y no uno: el LIMA para lo vivo (lo que el usuario es) y el ORO
   VIEJO para lo heredado (el personaje, los filetes, los ornamentos). Mezclarlos
   sería ruido; separados, cada uno significa algo. */
.qcard.resultado{
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(208,253,0,.05) 0%, transparent 60%),
    linear-gradient(180deg, #101B10 0%, #0C140C 100%);
  border:1px solid rgba(247,248,229,.1);
  color:var(--seed-page);
  text-align:center;
  padding:34px 20px 30px;
  position:relative;
  overflow:hidden;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8), inset 0 1px 0 rgba(247,248,229,.07);
}
/* Grano de imprenta. Un fondo plano se lee como pantalla; con textura, como
   cartulina. Va en ::after con blend para que no ensucie el color. */
.qcard.resultado::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
  mix-blend-mode:overlay}
.qcard.resultado>*{position:relative;z-index:1}

/* ── EL LEMA · abre la página, antes incluso que la carta ── */
.resultado .r-lema{font-family:'Beaufort Pro',Georgia,serif;font-weight:300;font-style:italic;
  font-size:clamp(19px,5vw,27px);line-height:1.3;color:var(--seed-page);
  max-width:15em;margin:0 auto;text-wrap:balance;letter-spacing:-.01em}
/* Filete con rombo, el remate de la baraja. Separa el lema de la carta sin
   meter una línea plana, que sería de formulario y no de naipe. */
.r-lema::after{content:'';display:block;width:74px;height:7px;margin:20px auto 26px;
  background:
    linear-gradient(90deg,transparent,var(--naipe-ocre,#A68416) 22%,var(--naipe-ocre,#A68416) 78%,transparent),
    none;
  mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);
  -webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}

.resultado .r-badge{border-color:rgba(201,162,39,.45);color:var(--naipe-oro,#C9A227);
  background:rgba(201,162,39,.08)}

.resultado .r-carta{color:rgba(247,248,229,.5)}
.resultado .r-carta b{color:var(--naipe-oro,#C9A227);letter-spacing:.06em}

/* ── EPÍGRAFES · versalitas con filete, como el índice de un libro viejo ── */
.resultado .r-eyebrow{display:flex;align-items:center;gap:12px;margin:38px 0 10px;
  font-size:10px;letter-spacing:.28em;text-transform:uppercase;
  color:rgba(247,248,229,.42);font-weight:600}
.r-eyebrow::before,.r-eyebrow::after{content:'';flex:1;height:1px;
  background:rgba(247,248,229,.14)}

/* ── EL ARQUETIPO · lo más grande de la página ── */
.resultado .r-type{font-family:'Beaufort Pro',Georgia,serif;font-weight:300;
  font-size:clamp(34px,9vw,54px);line-height:1.02;margin:0;
  color:var(--seed-page);letter-spacing:-.022em;text-wrap:balance}
.resultado .r-desc{margin:16px auto 0;max-width:31em;font-size:16.5px;line-height:1.72;
  color:rgba(247,248,229,.78)}

/* La tesis de la etapa: qué fue esa revolución, contada con tres de los suyos.
   Va justo debajo de la carta porque es lo que le da sentido al siglo que le ha
   tocado — sin esto, «Siglo XIX» era una fecha y no una idea. */
.resultado .r-etapa{margin:14px auto 0;max-width:33em;font-size:14.5px;line-height:1.7;
  color:var(--text-secondary,rgba(247,248,229,.62));font-style:italic;
  padding:0 0 18px;border-bottom:1px solid rgba(247,248,229,.09)}

/* ── LOS TRES EJES ── */
.resultado .axes{display:grid;gap:1px;margin-top:16px;background:rgba(247,248,229,.1);
  border:1px solid rgba(247,248,229,.1);border-radius:3px;overflow:hidden;
  grid-template-columns:1fr}
/* Los ejes son SIEMPRE tres (app.js solo descarta los que rondan el cero, y
   ningún líder del blueprint lo hace). Con auto-fit salían 2 columnas y la
   cuarta celda quedaba vacía pintando el fondo del contenedor: se leía como
   un recuadro sin terminar. En escritorio van los tres en fila. */
@media (min-width:900px){.resultado .axes{grid-template-columns:repeat(3,1fr)}}
.resultado .axis{background:#0E170E;padding:17px 18px;text-align:left}
.resultado .axis h3{margin:0 0 6px;font-family:'Beaufort Pro',Georgia,serif;font-weight:500;
  font-size:18px;color:var(--seed-lime);letter-spacing:-.01em}
.resultado .axis p{margin:0;font-size:14px;line-height:1.6;color:rgba(247,248,229,.66)}

/* ── FUERZA Y SOMBRA · la misma cualidad vista dos veces, y por eso enfrentadas ── */
.resultado .fs{display:grid;gap:1px;margin-top:16px;background:rgba(247,248,229,.1);
  border:1px solid rgba(247,248,229,.1);border-radius:3px;overflow:hidden;
  grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
.fs>div{padding:18px 20px;text-align:left;background:#0E170E}
.resultado .fs .f{background:linear-gradient(160deg,rgba(208,253,0,.09),rgba(208,253,0,.02))}
.resultado .fs h3{margin:0 0 8px;font-size:10px;letter-spacing:.24em;text-transform:uppercase;
  font-weight:700}
.resultado .fs .f h3{color:var(--seed-lime)}
.resultado .fs .s h3{color:rgba(247,248,229,.42)}
.resultado .fs p{margin:0;font-size:14.5px;line-height:1.65;color:rgba(247,248,229,.74)}

/* ── EL PERSONAJE · llega al final, como espejo y no como protagonista ── */
.resultado .r-name{font-family:'Beaufort Pro',Georgia,serif;font-weight:400;
  font-size:clamp(24px,6.2vw,33px);margin:0;color:var(--naipe-oro,#C9A227);
  letter-spacing:-.01em}
.resultado .r-name span{color:rgba(247,248,229,.35);font-weight:300}
.resultado blockquote.r-quote{margin:16px auto 0;max-width:28em;padding:0 0 0 18px;
  border-left:2px solid rgba(201,162,39,.5);text-align:left;
  font-family:'Beaufort Pro',Georgia,serif;font-style:italic;font-weight:300;
  font-size:18.5px;line-height:1.48;color:rgba(247,248,229,.9)}
.resultado blockquote.r-quote::before{content:'«'}
.resultado blockquote.r-quote::after{content:'»'}
.resultado .r-blurb{color:rgba(247,248,229,.6);margin-top:14px}
.resultado .r-divider{background:rgba(247,248,229,.12)}

/* ── EL CIERRE · en lima, la única vez que el acento ocupa un bloque entero ── */
.resultado .r-cierre{margin:32px auto 6px;max-width:27em;padding:24px 24px 26px;
  background:linear-gradient(160deg,rgba(208,253,0,.13),rgba(208,253,0,.04));
  border:1px solid rgba(208,253,0,.3);border-radius:4px}
.resultado .r-cierre-txt{font-family:'Beaufort Pro',Georgia,serif;font-weight:300;
  font-size:clamp(18px,4.8vw,23px);line-height:1.4;color:var(--seed-page);
  margin:0;text-wrap:balance}
.resultado .r-cierre-txt b{color:var(--seed-lime);font-weight:500}

.resultado .fine{color:rgba(247,248,229,.3)}
.resultado .btn-ghost-line{border-color:rgba(247,248,229,.22);color:rgba(247,248,229,.8)}
.resultado .btn-ghost-line:hover{border-color:var(--accent-border);color:var(--seed-lime)}

/* ── ENTRADA · una sola secuencia orquestada, no efectos sueltos ── */
@media (prefers-reduced-motion:no-preference){
  .resultado>*{animation:r-sube .66s cubic-bezier(.2,.7,.3,1) backwards}
  .resultado>*:nth-child(1){animation-delay:.05s}
  .resultado>*:nth-child(2){animation-delay:.12s}
  .resultado>.naipe{animation:r-carta .85s cubic-bezier(.2,.7,.3,1) .18s backwards}
  .resultado>*:nth-child(4){animation-delay:.34s}
  .resultado>*:nth-child(5){animation-delay:.40s}
  .resultado>*:nth-child(6){animation-delay:.46s}
  .resultado>*:nth-child(n+7){animation-delay:.52s}
  @keyframes r-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  /* La carta no sube: se voltea, que es lo que hace una carta */
  @keyframes r-carta{from{opacity:0;transform:perspective(900px) rotateY(-26deg) translateY(16px)}
                     to{opacity:1;transform:none}}
}

/* ── EL EMBUDO · la landing entre la última pregunta y el resultado ─────────
   Mismo tapete oscuro que el resultado: quien llega aquí ya está dentro de la
   historia, y devolverlo al fondo claro del cuestionario rompería el hilo. */
.qcard.funnel{
  background:linear-gradient(180deg,#101B10 0%,#0C140C 100%);
  border:1px solid rgba(247,248,229,.1);color:var(--seed-page);
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8)}
.funnel .eyebrow{color:rgba(247,248,229,.42)}
.funnel .q-title{color:var(--seed-page)}
.funnel .q-sub{color:rgba(247,248,229,.7);margin-top:0}

.fu-video{margin:20px 0 4px;border-radius:12px;overflow:hidden;
  border:1px solid rgba(247,248,229,.14);background:#0A110A}
.fu-video video{display:block;width:100%;height:auto}

/* Los datos como piezas sueltas, cada una con su fuente visible. Una cifra sin
   procedencia a la vista es una cifra que nadie puede comprobar. */
.fu-datos{display:grid;gap:1px;margin:22px 0 0;background:rgba(247,248,229,.1);
  border:1px solid rgba(247,248,229,.1);border-radius:3px;overflow:hidden;
  grid-template-columns:1fr}
@media (min-width:620px){.fu-datos{grid-template-columns:repeat(3,1fr)}}
.fu-dato{background:#0E170E;padding:16px 17px;text-align:left}
.fu-dato b{display:block;font-family:'Beaufort Pro',Georgia,serif;font-weight:300;
  font-size:34px;line-height:1;color:var(--seed-lime);letter-spacing:-.02em}
.fu-dato span{display:block;margin-top:6px;font-size:14px;line-height:1.5;
  color:rgba(247,248,229,.76)}
.fu-dato cite{display:block;margin-top:8px;font-style:normal;font-size:10.5px;
  letter-spacing:.06em;color:rgba(247,248,229,.34)}

/* Era una cita —filete a la izquierda, texto en bandera— y no lo es: nadie la
   dijo, es nuestra tesis. Ahora va como párrafo centrado, con el mismo peso
   tipográfico que el resto de la pantalla. */
.fu-tesis{margin:26px auto 28px;max-width:34em;text-align:center;
  font-family:'Beaufort Pro',Georgia,serif;font-weight:300;
  font-size:clamp(17px,4.2vw,20px);line-height:1.52;color:var(--seed-page)}

/* El formulario sobre fondo oscuro: sin esto los campos salen invisibles, que
   es el mismo fallo de cascada que tenía el resultado. */
.funnel .form label{color:rgba(247,248,229,.8)}
.funnel .form input[type=text],.funnel .form input[type=email],
.funnel .form input[type=tel],.funnel .form select{
  background:rgba(247,248,229,.06);border-color:rgba(247,248,229,.18);
  color:var(--seed-page)}
.funnel .form input::placeholder{color:rgba(247,248,229,.32)}
.funnel .consent span{color:rgba(247,248,229,.66)}
.funnel .consent a{color:var(--seed-lime)}

/* Las fuentes, clicables. Una cifra cuya procedencia no se puede abrir es una
   cifra que nadie va a comprobar — y las nuestras aguantan que las comprueben. */
.fu-dato cite a{color:inherit;text-decoration:underline;
  text-decoration-color:rgba(247,248,229,.25);text-underline-offset:2px}
.fu-dato cite a:hover{color:var(--seed-lime);text-decoration-color:var(--seed-lime)}
.fu-fuentes{margin:12px 0 0;font-size:11.5px;line-height:1.6;
  color:rgba(247,248,229,.4);text-align:left}
.fu-fuentes a{color:rgba(247,248,229,.62);text-decoration:underline;
  text-underline-offset:2px}
.fu-fuentes a:hover{color:var(--seed-lime)}

/* La nota de las etapas. Va en letra pequeña y al final a propósito: es una
   precisión honesta, no una disculpa — si sube arriba, le quita fuerza al
   nombre de la etapa justo cuando el usuario lo está leyendo por primera vez. */
.resultado .nota-etapas{max-width:34em;margin:22px auto 10px;text-align:left;
  line-height:1.62;opacity:.72}


/* ── El parón: fondo oscuro de borde a borde ──────────────────────────────
   La tarjeta ya era oscura, pero flotaba sobre la página crema del test y se
   veía como un recuadro pegado. Aquí la pantalla ENTERA se oscurece y la
   tarjeta deja de tener borde: el usuario cruza un umbral, que es justo lo
   que esta pantalla significa. El cambio se hace sobre <html> con una clase
   para que el crema del test vuelva solo al salir. */
html.parada{background:#0B120B}
html.parada body{background:#0B120B;color:var(--seed-page)}
html.parada .topbar{background:#0B120B;border-bottom-color:rgba(247,248,229,.08);box-shadow:none}
html.parada .progress .track{background:rgba(247,248,229,.12)}
html.parada .progress .count{color:rgba(247,248,229,.5)}
html.parada .btn-back{border-color:rgba(247,248,229,.2);background:rgba(247,248,229,.05);
  color:rgba(247,248,229,.75)}
html.parada .qcard.funnel{border-color:transparent;box-shadow:none;
  background:linear-gradient(180deg,#0E170E 0%,#0B120B 100%)}

/* El fade in de entrada: la pantalla aparece, no salta. */
@keyframes parada-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
html.parada .screen{animation:parada-entra 620ms cubic-bezier(.22,1,.36,1) both}
@media (prefers-reduced-motion:reduce){
  html.parada .screen{animation:none}
}


/* ── Fondo del parón ──────────────────────────────────────────────────────
   La pantalla del formulario estaba negra y plana. Lleva detrás una escena de
   época a muy baja opacidad, igual que la landing y que la cara de la carta:
   ambienta sin competir con el texto, que aquí es lo que hay que leer. */
html.parada body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(11,18,11,.90) 0%, rgba(11,18,11,.80) 45%, rgba(11,18,11,.97) 100%),
    url('./fondos/umbral.jpg') center/cover no-repeat;
  opacity:.75;
}
html.parada #app{ position:relative; z-index:1 }
/* La cabecera NO se toca aquí: sigue siendo sticky y la barra vive dentro de
   ella. La regla anterior la devolvía a `fixed` y se despegaba justo en esta
   pantalla. */
html.parada .topbar{ z-index:20 }

/* ── Los campos ───────────────────────────────────────────────────────────
   Vacío: caja oscura con el placeholder en beige, legible sobre el fondo.
   Con contenido o en foco: la caja SE RELLENA de beige y la letra pasa a
   negro. El cambio marca qué has contestado ya, y el contraste de la letra
   negra sobre beige es el más alto que se puede dar en esta paleta. */
html.parada .funnel .form input::placeholder{ color:rgba(247,248,229,.62); opacity:1 }
html.parada .funnel .form input[type=text],
html.parada .funnel .form input[type=email],
html.parada .funnel .form input[type=tel]{
  color:var(--seed-page);
  transition:background-color .22s ease, color .22s ease, border-color .22s ease;
}
html.parada .funnel .form input:focus,
html.parada .funnel .form input:not(:placeholder-shown){
  background:#F7F8E5; color:#0B120B; border-color:#F7F8E5;
  caret-color:#0B120B;
}
html.parada .funnel .form input:focus::placeholder{ color:rgba(11,18,11,.45) }
html.parada .funnel .form select{ color:var(--seed-page) }
html.parada .funnel .form select:focus{ background:#F7F8E5; color:#0B120B; border-color:#F7F8E5 }


/* ── La escena de cada pregunta ───────────────────────────────────────────
   A sangre en la parte alta de la tarjeta, con la base difuminada hacia el
   fondo de la tarjeta para que no haya un corte recto entre la imagen y el
   texto: la imagen ambienta la pregunta, no la encabeza como un titular. */
.q-banner{
  position:relative; margin:-26px -20px 18px; border-radius:18px 18px 0 0;
  overflow:hidden; aspect-ratio:21/9; background:#0A100A;
}
.q-banner img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:.82;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  animation:banner-entra 900ms cubic-bezier(.22,1,.36,1) both;
}
@keyframes banner-entra{from{opacity:0;transform:scale(1.04)}to{opacity:.82;transform:none}}
@media (min-width:480px){ .q-banner{ margin:-34px -30px 20px } }
@media (min-width:900px){ .q-banner{ margin:-48px -56px 24px } }
@media (prefers-reduced-motion:reduce){ .q-banner img{ animation:none } }

/* El cambio de escena de la escala: un parpadeo corto, no un corte. */
.q-banner img.cambiando{ opacity:.3; transition:opacity .18s ease }


/* ══ LA MANO DE TRES CARTAS ═══════════════════════════════════════════════
   Las cartas son IMÁGENES horneadas (tools/hornear_cartas.py): cartón, filetes,
   número, palo y figura vienen dentro del JPG. Aquí solo queda lo que es
   interacción de verdad — el giro, el destello y el reparto. Componerlas en
   CSS era lo que desplazaba los índices medio píxel y torcía los filetes. */
.mano{
  display:flex; justify-content:center; align-items:center; gap:14px;
  margin:26px auto 22px; perspective:1400px; perspective-origin:50% 45%;
}
.carta{
  position:relative; flex:0 0 auto;
  width:172px; aspect-ratio:2/3;
  border-radius:9px;
  transform-style:preserve-3d;
  cursor:pointer;
  transition:translate .32s cubic-bezier(.22,1,.36,1), filter .3s ease;

  /* DOS TIEMPOS, no uno. Antes la carta aparecía y se giraba en el mismo
     gesto y la tirada duraba dos segundos y medio: no daba tiempo a mirar.
     Ahora primero se REPARTE boca abajo —una cada dos segundos, como en una
     mesa de verdad— y solo cuando las tres están puestas empieza el giro.
       · --reparto (0,1,2) = orden en que se dejan sobre la mesa, de izquierda
         a derecha, que es como reparte cualquiera.
       · --orden   (0,1,2) = orden en que se voltean: izquierda, derecha y la
         del medio al final, que es la que importa.
     Las dos animaciones se encadenan en la misma propiedad transform y por eso
     van declaradas juntas: si se separan, la segunda pisa a la primera y la
     carta salta. */
  /* LAS TRES DECLARAN LA MISMA LISTA DE FUNCIONES, Y EN EL MISMO ORDEN.
     Antes `carta-llega` terminaba en `rotateY(180deg) translateY(0) scale(1)`
     y `carta-gira` en `rotateY(0) rotate(...)`: listas distintas. Ante
     eso el navegador no puede interpolar función a función, así que descompone
     las dos matrices y recompone, y por el camino aparecen términos de cizalla
     que no pinta nadie en un giro sobre el eje Y. Eso era el bicho: la carta se
     retorcía un poco al voltearse. Medido: a mitad del giro la matriz traía
     -0,045 de cizalla.
     Además la inclinación va AHORA desde el reparto. Antes crecía de 0 a -7°
     durante el volteo, así que la carta se ladeaba mientras giraba en vez de
     estar ya ladeada sobre la mesa, que es como cae una carta de verdad. */
  opacity:0;
  transform:translateY(26px) scale(.94) rotateY(180deg);
  animation:
    carta-llega 800ms cubic-bezier(.22,1,.36,1) forwards,
    carta-gira  900ms cubic-bezier(.34,1.2,.44,1) forwards;
  animation-delay:
    calc(var(--reparto) * 2000ms + 500ms),
    calc(var(--orden) * 1100ms + 5600ms);
}
@keyframes carta-llega{
  from{ opacity:0; transform:translateY(26px) scale(.94) rotateY(180deg) }
  to  { opacity:1; transform:translateY(0)    scale(1)   rotateY(180deg) }
}
.carta .cara, .carta .dorso{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  border-radius:9px;
  /* `backface-visibility` fuera. Con el contexto 3D aplanado —lo aplanan el
     `isolation` de la mesa y el `::after` del destello— el navegador decide
     que la cara trasera es la del DORSO, no la de la cara, y al ocultarla la
     carta se quedaba en blanco. Quién es la trasera lo decide la opacidad, que
     no depende de si el 3D se aplana o no. */
  backface-visibility:visible; -webkit-backface-visibility:visible;
  box-shadow:0 18px 40px -16px rgba(0,0,0,.85), 0 2px 6px rgba(0,0,0,.4);
}
.carta .dorso{ transform:rotateY(180deg) }
/* Si una carta aún no está horneada, se queda el dorso: mejor una carta boca
   abajo que un hueco roto. */
.carta.sin-carta .cara{ display:none }
.carta.sin-carta{ animation:none; transform:none; opacity:1 }

.carta.c-figura{ width:206px; z-index:2; order:2 }
.carta.c-joker{ order:1 }
.carta.c-etapa{ order:3 }
@keyframes carta-gira{
  to{ opacity:1; transform:translateY(0) scale(1) rotateY(0deg) }
}

/* EL CAMBIO DE CARA NO SE FÍA DE `backface-visibility`.
   Sobre el papel basta: el dorso va a rotateY(180deg) y la cara a 0, las dos
   con la trasera oculta, y al girar el padre se relevan solas. Medido en el
   navegador, NO ocurre: a mitad del reparto se veía la cara en espejo —el
   nombre escrito al revés— en vez del dorso. Entre `isolation:isolate` de la
   mesa y el `::after` del destello, que crea contexto de apilamiento sobre la
   carta, el contexto 3D se aplana y la trasera se pinta igual.

   Así que el relevo se hace a mano, con opacidad y un salto seco justo en el
   canto: 450 ms dentro del giro de 900, que es cuando la carta está de perfil
   y el cambio es invisible. Un fundido aquí sería peor: se verían las dos
   caras superpuestas medio segundo. */
@keyframes cara-entra{ to{ opacity:1 } }
@keyframes dorso-sale{ to{ opacity:0 } }
.carta .cara{
  opacity:0;
  animation:cara-entra 1ms linear forwards;
  animation-delay:calc(var(--orden) * 1100ms + 6050ms);
}
.carta .dorso{
  opacity:1;
  animation:dorso-sale 1ms linear forwards;
  animation-delay:calc(var(--orden) * 1100ms + 6050ms);
}
.carta.sin-carta .dorso{ animation:none; opacity:1 }
@media (prefers-reduced-motion:reduce){
  .carta .cara{ animation:none; opacity:1 }
  .carta .dorso{ animation:none; opacity:0 }
}
@media (hover:hover){ .carta:hover{ filter:brightness(1.07) } }

@media (min-width:560px){
  /* La inclinación va en la propiedad `rotate`, NO dentro de `transform`.
     Metida ahí como `rotate(var(--giro))`, el navegador no resuelve la
     variable dentro del @keyframes y la carta salía recta: medido, la matriz
     a media tirada era un rotateY(180) puro, sin rastro de los -7°. Como
     propiedad independiente se compone con el transform animado sin que la
     animación la pise, igual que el `translate` de .carta.activa. */
  .carta.c-joker{ rotate:-7deg; margin-top:16px }
  .carta.c-etapa{ rotate:7deg;  margin-top:16px }
}
@media (max-width:560px){
  .mano{ gap:8px }
  .carta{ width:112px } .carta.c-figura{ width:138px }
}
@media (prefers-reduced-motion:reduce){ .carta{ animation:none; transform:none; opacity:1 } }

/* El destello que barre la carta al girarla: es lo que hace que el giro se
   sienta mágico y no mecánico. */
.carta::after{
  content:''; position:absolute; inset:0; border-radius:9px; z-index:3;
  pointer-events:none; opacity:0;
  background:linear-gradient(105deg,
    transparent 30%, rgba(255,245,200,.5) 47%, rgba(255,255,255,.8) 50%,
    rgba(255,245,200,.5) 53%, transparent 70%);
  background-size:280% 100%; background-position:120% 0;
  animation:destello 1100ms cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--orden) * 1100ms + 5900ms);
}
@keyframes destello{
  0%   { opacity:0;  background-position:120% 0 }
  18%  { opacity:.9 }
  100% { opacity:0;  background-position:-40% 0 }
}
@media (prefers-reduced-motion:reduce){ .carta::after{ animation:none; opacity:0 } }

.carta.activa{ translate:0 -8px }
.carta.activa .cara{ box-shadow:0 0 0 1px rgba(208,253,0,.5),
  0 22px 48px -16px rgba(0,0,0,.9), 0 0 32px -8px rgba(208,253,0,.35) }
.mano .carta{ pointer-events:none }
.mano.tirada-hecha .carta{ pointer-events:auto }
.mano.tirada-hecha .carta:focus-visible{ outline:2px solid var(--seed-lime); outline-offset:6px }

/* LA TIRADA SE JUEGA UNA SOLA VEZ.
   Al asentar la mesa se la mueve del <body> de vuelta dentro de la tarjeta, y
   reinsertar un nodo en el DOM reinicia sus animaciones CSS desde cero: las
   tres cartas volvían a repartirse y a girarse cada vez que aparecían. Aquí se
   congela el estado final —cara visible, dorso fuera, sin animación— para que
   el movimiento no se pueda repetir por mucho que el nodo se mueva. */
.mano.tirada-hecha .carta{
  animation:none;
  opacity:1;
  transform:translateY(0) scale(1) rotateY(0deg);
}
.mano.tirada-hecha .carta .cara{ animation:none; opacity:1 }
.mano.tirada-hecha .carta .dorso{ animation:none; opacity:0 }
.mano.tirada-hecha .carta::after{ animation:none; opacity:0 }
.naipe-viejo{ display:none }

/* ── Los paneles de la mesa ──────────────────────────────────────────────
   Cerrados de partida: la mesa es lo primero que se ve y un panel abierto la
   empujaría fuera de pantalla. Se abren al pulsar su carta. */
.paneles{ margin:6px auto 0; max-width:34em }
.panel-carta{
  display:none; text-align:left; padding:22px 0 4px;
  animation:panel-abre 460ms cubic-bezier(.22,1,.36,1) both;
}
.panel-carta.abierto{ display:block }
@keyframes panel-abre{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.panel-carta h3{
  margin:8px 0 14px; font-family:'Beaufort Pro',Georgia,serif; font-weight:500;
  font-size:clamp(21px,3.6vw,27px); line-height:1.15; color:var(--seed-page);
}
.panel-carta p{
  margin:0 0 12px; font-size:15.5px; line-height:1.72; color:rgba(247,248,229,.68);
}
.panel-carta .panel-nota{ color:rgba(247,248,229,.5); font-size:14.5px }
.panel-carta .panel-nota b{ color:var(--naipe-oro,#C9A227) }
.panel-carta .btn-ghost-line{ margin-top:6px; display:inline-flex }

/* La carta abierta se marca: sube y se le enciende el filete. */
.carta.activa{ translate:0 -8px }
.carta.activa .cara{ box-shadow:0 0 0 1px rgba(208,253,0,.5),
  0 22px 48px -16px rgba(0,0,0,.9), 0 0 32px -8px rgba(208,253,0,.35) }
.carta.activa, .carta{ transition:translate .32s cubic-bezier(.22,1,.36,1), filter .3s ease }

/* Solo se pueden pulsar cuando ya están giradas. */
.mano .carta{ pointer-events:none }
.mano.tirada-hecha .carta{ pointer-events:auto }
.mano.tirada-hecha .carta:focus-visible{ outline:2px solid var(--seed-lime); outline-offset:6px }


/* ══ EL CARTÓN ════════════════════════════════════════════════════════════
   Una carta no es un div con las esquinas redondeadas. Lo que la delata como
   objeto es el papel: grano, un borde más oscuro que insinúa el canto, y una
   luz que se mueve al girarla. Estas tres cosas son el noventa por ciento del
   efecto; el resto es el dibujo. */

/* Grano del papel. feTurbulence en un SVG embebido: ni una petición extra. */
.carta .cara::before{
  content:''; position:absolute; inset:0; z-index:5; pointer-events:none;
  opacity:.30; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)' opacity='.5'/%3E%3C/svg%3E");
}
/* El canto: un borde interior oscuro y otro claro arriba. Da espesor. */
.carta .cara, .carta .dorso{
  box-shadow:
    0 0 0 1px rgba(60,40,28,.28) inset,
    0 1px 0 rgba(255,255,255,.75) inset,
    0 18px 40px -16px rgba(0,0,0,.85),
    0 2px 6px rgba(0,0,0,.4);
}

/* El destello: una banda de luz que barre la carta mientras gira. Es lo que
   hace que el giro se sienta MÁGICO y no mecánico. Se dispara con la misma
   cadencia que el giro y se apaga sola. */
.carta::after{
  content:''; position:absolute; inset:0; border-radius:9px; z-index:6;
  pointer-events:none; opacity:0;
  background:linear-gradient(105deg,
    transparent 30%, rgba(255,245,200,.55) 47%, rgba(255,255,255,.85) 50%,
    rgba(255,245,200,.55) 53%, transparent 70%);
  background-size:280% 100%; background-position:120% 0;
  animation:destello 1100ms cubic-bezier(.4,0,.2,1) forwards;
  animation-delay:calc(var(--orden) * 1100ms + 5900ms);
}
@keyframes destello{
  0%   { opacity:0;  background-position:120% 0 }
  18%  { opacity:.9 }
  100% { opacity:0;  background-position:-40% 0 }
}
@media (prefers-reduced-motion:reduce){ .carta::after{ animation:none; opacity:0 } }

/* ── El marco: dos filetes, no uno ────────────────────────────────────────
   Uno grueso granate y otro finísimo de oro por dentro, con un respiro entre
   ambos. Es la diferencia entre «recuadro» y «orla impresa». */
.carta .c-marco{
  inset:20px 10px;
  border:1.5px solid rgba(124,58,54,.72);
  border-radius:4px;
  box-shadow:0 0 0 1px rgba(244,242,228,.5) inset;
}
.carta .c-marco::after{
  inset:4px; border-radius:2px;
  border:1px solid rgba(176,138,74,.62);
  box-shadow:none;
}
/* Rosetas en las cuatro esquinas del marco. */
.carta .c-marco::before{
  content:''; position:absolute; inset:-3px; border-radius:6px; pointer-events:none;
  background:
    radial-gradient(circle at 0 0,     rgba(124,58,54,.85) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 100% 0,  rgba(124,58,54,.85) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 0 100%,  rgba(124,58,54,.85) 0 2.5px, transparent 2.6px),
    radial-gradient(circle at 100% 100%, rgba(124,58,54,.85) 0 2.5px, transparent 2.6px);
}

/* Los índices: número en granate con serifa, palo en oro debajo. */
.carta .c-idx{ color:#7C3A36; letter-spacing:.01em }
.carta.c-joker .c-idx{ color:#7C3A36 }

/* La ventana del retrato: filete de oro por fuera, granate por dentro. */
.carta .c-retrato, .carta .c-escena{
  box-shadow:0 0 0 1px rgba(176,138,74,.55), 0 0 0 2.5px rgba(124,58,54,.5),
             0 6px 18px -8px rgba(0,0,0,.6);
}


/* ── El comodín ──────────────────────────────────────────────────────────
   Misma anatomía que las otras dos: ventana dentro del cartón. Lo que cambia
   es qué hay dentro — el medallón de «varios premios», que es la figura de la
   casa. Antes llevaba el reloj suelto sobre el cartón y se leía como un hueco
   sin rellenar, no como una carta. */
.carta .c-medallon{
  position:absolute; inset:26px 14px; border-radius:3px; overflow:hidden; z-index:1;
  background:#0C1A0E url('./naipes/oro/joker.jpg') center/cover no-repeat;
  box-shadow:0 0 0 1px rgba(176,138,74,.55), 0 0 0 2.5px rgba(124,58,54,.5),
             0 6px 18px -8px rgba(0,0,0,.6);
}
.carta .c-medallon::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 58%, rgba(10,20,10,.78) 88%, rgba(10,20,10,.92) 100%);
}
.carta.c-joker{ background:transparent }
.carta.c-joker .cara{ background:#F4F2E4 }
.carta.c-joker .c-nombre{ color:#F7F8E5; text-shadow:0 1px 6px rgba(8,14,8,.9); font-size:15px }
.carta.c-joker .c-pie{ color:#E8C15A }

/* Los palos, regenerados en oro renacentista al mismo tiempo que el medallón.
   Los de palos-v2 eran de otra tanda y no casaban con la carta. */
.carta.p-oros    .c-palo{ background-image:url('./naipes/palos-oro/oros.png') }
.carta.p-copas   .c-palo{ background-image:url('./naipes/palos-oro/copas.png') }
.carta.p-espadas .c-palo{ background-image:url('./naipes/palos-oro/espadas.png') }
.carta.p-bastos  .c-palo{ background-image:url('./naipes/palos-oro/bastos.png') }
.carta .c-palo{ width:15px; height:15px }

/* ══ LA MESA ══════════════════════════════════════════════════════════════
   El JS ya pintaba `.mesa` y las `.chispa`, pero no tenían una sola regla de
   estilo: los sprites eran nodos invisibles y las cartas flotaban sobre el
   fondo general de la página. Esto es el tapete.

   Negro y verde muy oscuro, con dos focos de neón que respiran por debajo de
   las cartas. El neón va MUY bajo a propósito —opacidades de dos cifras bajas—
   porque la carta es lo que tiene que brillar: en cuanto el fondo compite, deja
   de parecer una mesa y parece una pantalla de casino. */
/* La mesa empieza OCUPANDO LA PANTALLA ENTERA y luego se asienta dentro de la
   página. No es un adorno: el usuario viene de veinte preguntas y la tirada es
   el premio, así que durante la tirada no tiene que haber nada más a la vista.
   Cuando las tres cartas están giradas, `.mesa-puesta` la devuelve a su sitio
   en el flujo del documento y la página baja sola al perfil.

   Se hace con `position:fixed` y no con `height:100svh` porque la mesa vive
   dentro de una tarjeta con su propio padding: en flujo no hay forma de que
   tape la tarjeta, el fondo de escena y la barra de arriba. */
.mesa{
  position:fixed; inset:0; z-index:60;
  isolation:isolate;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  margin:0; padding:24px;
  border-radius:0;
  transition:
    opacity .5s ease,
    background-color .8s ease;
  background:
    radial-gradient(120% 90% at 50% 8%,  rgba(16,44,26,.85) 0%, rgba(8,18,12,.92) 46%, rgba(4,7,5,.98) 78%),
    radial-gradient(70% 55% at 18% 92%,  rgba(12,38,22,.7)  0%, transparent 70%),
    radial-gradient(70% 55% at 84% 88%,  rgba(10,32,20,.6)  0%, transparent 70%),
    #050806;
  box-shadow:inset 0 0 90px 30px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(208,253,0,.07);
}

/* Ya asentada: vuelve al flujo, se encoge al ancho de la tarjeta y recupera las
   esquinas. Los paneles del carrusel solo existen a partir de aquí; mientras la
   mesa es pantalla completa estorban. */
.mesa.mesa-puesta{
  position:relative; inset:auto; z-index:1;
  display:block;
  margin:8px -20px 30px; padding:34px 20px 26px;
  border-radius:20px;
}
@media (min-width:720px){ .mesa.mesa-puesta{ margin-inline:-40px; padding-inline:40px } }
.mesa:not(.mesa-puesta) .paneles{ display:none }

/* A pantalla completa la mano puede ser mucho más grande: es lo único que se
   está mirando. Al asentarse vuelve al tamaño de la tarjeta. */
.mesa:not(.mesa-puesta) .mano{ gap:clamp(10px,2.4vw,30px) }
.mesa:not(.mesa-puesta) .carta{ width:clamp(150px,17vw,250px) }
.mesa:not(.mesa-puesta) .carta.c-figura{ width:clamp(180px,20vw,300px) }

/* Los dos focos de neón. Se mueven muy despacio y desfasados para que el
   tapete no quede quieto del todo, que es lo que lo vuelve un rectángulo. */
.mesa::before, .mesa::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  border-radius:50%; filter:blur(58px); opacity:.16;
  animation:neon-respira 11s ease-in-out infinite;
}
.mesa::before{
  left:6%; top:14%; width:46%; height:58%;
  background:radial-gradient(circle, var(--seed-lime,#D0FD00) 0%, transparent 68%);
}
.mesa::after{
  right:4%; bottom:8%; width:42%; height:54%;
  background:radial-gradient(circle, #2E8B57 0%, transparent 68%);
  animation-delay:-5.5s;
}
@keyframes neon-respira{
  0%,100%{ opacity:.10; transform:scale(.94) }
  50%    { opacity:.22; transform:scale(1.06) }
}

/* Un filete de neón en el borde superior: sugiere que la mesa está iluminada
   desde arriba sin tener que dibujar la lámpara. */
.mesa > .chispas + .mano::before{ content:none }
.mesa .mano{ position:relative; z-index:2 }
.mesa .paneles{ position:relative; z-index:2 }

/* ── Los sprites ─────────────────────────────────────────────────────────
   Suben desde el borde inferior y se apagan antes de llegar arriba. Cada uno
   trae su posición, su altura, su duración y su deriva desde el JS, derivadas
   del índice y no de Math.random: así no bailan entre recargas, que en una
   pantalla que se comparte por captura importa. */
.chispas{
  position:absolute; inset:0; z-index:1; overflow:hidden;
  pointer-events:none; border-radius:20px;
}
.chispa{
  position:absolute; bottom:-8px;
  width:3px; height:3px; border-radius:50%;
  background:var(--c,#D0FD00);
  box-shadow:0 0 6px 1px var(--c,#D0FD00);
  opacity:0;
  animation:chispa-sube var(--d,9s) linear var(--r,0s) infinite;
}
@keyframes chispa-sube{
  0%  { opacity:0;   transform:translate3d(0,0,0) scale(.6) }
  12% { opacity:.55 }
  70% { opacity:.35 }
  100%{ opacity:0;   transform:translate3d(var(--x,0),calc(var(--h,260px) * -1),0) scale(1.1) }
}
/* Una de cada cuatro es un poco mayor y más lenta: con todas iguales se lee
   como una trama regular y se nota que es CSS. */
.chispa:nth-child(4n){ width:4px; height:4px; animation-duration:calc(var(--d,9s) * 1.35) }
.chispa:nth-child(7n){ opacity:0; animation-duration:calc(var(--d,9s) * .8) }

@media (prefers-reduced-motion:reduce){
  .chispa{ animation:none; opacity:.25 }
  .mesa::before, .mesa::after{ animation:none; opacity:.14 }
}

/* ══ EL PASO AL VÍDEO ═════════════════════════════════════════════════════ */

/* El velo de fundido. Va sobre TODO —incluida la barra superior y el fondo de
   escena, que viven fuera de #app— y por eso es un hijo de <body> con z-index
   por encima de la barra, no una clase en el contenedor. */
.a-negro{
  position:fixed; inset:0; z-index:9999; background:#000;
  opacity:0; pointer-events:none;
  transition:opacity .9s ease;
}
.a-negro.puesto{ opacity:1; pointer-events:auto }
@media (prefers-reduced-motion:reduce){ .a-negro{ transition-duration:.2s } }

/* La sala. Negro total: el vídeo empieza con la voz sobre negro y cualquier
   cosa que se vea alrededor rompe ese arranque. */
/* Con el vídeo puesto, la página NO se mueve. Antes seguía siendo scrollable
   por detrás: el usuario arrastraba sin querer y el reproductor se iba hacia
   arriba dejando ver la tarjeta del test. `overflow:hidden` en los dos, y
   `overscroll-behavior:none` para que el rebote de trackpad tampoco lo mueva. */
html.en-video, html.en-video body{
  background:#000;
  overflow:hidden; height:100%;
  overscroll-behavior:none; touch-action:none;
}
html.en-video .topbar{ opacity:0; pointer-events:none; transition:opacity .5s ease }
.video-sala{
  /* Fuera del flujo y pegada a la ventana: la pieza se ve a pantalla completa,
     no dentro de la columna de contenido. Con `min-height` y `margin:auto` se
     quedaba encajada en el ancho de la tarjeta —1.130 px en un monitor de
     2.000— y encima el alto del hueco no era 16:9, así que el navegador metía
     bandas negras arriba y abajo DENTRO del reproductor. */
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  background:#000;
}
.video-sala video{
  /* Anclado a los cuatro lados, no centrado. Con `place-items:center` en la
     sala el vídeo NO se estira —centrar y estirar son cosas distintas— y se
     quedaba en 812x668 dentro de una ventana de 1440x812. Medido. */
  position:absolute; inset:0;
  width:100%; height:100%;
  max-width:none; max-height:none;
  object-fit:cover; background:#000; display:block;
}
/* `cover`, no `contain`. Con `contain` la pieza es 16:9 y la ventana casi
   nunca lo es, así que quedaban bandas negras arriba y abajo: el vídeo no
   llenaba. Con `cover` llena siempre los dos ejes y lo que sobra se recorta.
   El recorte es asumible porque las captions de los tramos en negro van
   centradas; el único elemento en riesgo es el rótulo de Recuenco, abajo a la
   izquierda, y por eso se le da un margen de seguridad con object-position. */
.video-sala video{ object-position:center 42% }

/* Saltar y activar sonido: discretos, fuera del cuadro, pero siempre
   alcanzables con el dedo en móvil (44 px de alto real). */
.btn-saltar, .btn-sonido{
  position:absolute; z-index:3;
  min-height:44px; padding:10px 18px;
  font:500 14px/1 Inter, system-ui, sans-serif; letter-spacing:.02em;
  color:rgba(247,248,229,.72); background:rgba(0,0,0,.45);
  border:1px solid rgba(247,248,229,.22); border-radius:999px;
  cursor:pointer; backdrop-filter:blur(6px);
  transition:color .2s ease, border-color .2s ease, opacity .5s ease;
}
.btn-saltar{ right:18px; bottom:18px }
.btn-sonido{ left:50%; top:50%; transform:translate(-50%,-50%);
  color:var(--seed-page,#F7F8E5); background:rgba(0,0,0,.6) }
.btn-saltar:hover, .btn-sonido:hover{
  color:var(--seed-page,#F7F8E5); border-color:rgba(208,253,0,.55) }
.btn-saltar[hidden]{ display:none }

/* El perfil largo vive ahora en resultado.css, con las clases de historia.
   El bloque que había aquí definía `.hito` como rejilla de 82px + 1fr y
   colisionaba con el `.hito` nuevo: el texto se pintaba a una palabra por
   línea dentro de una columna de 82 píxeles. Dos hojas peleando por el mismo
   nombre de clase; gana la última en cargar, y la última no era la que yo
   creía. Borrado, no comentado. */

/* ══ EL PERFIL LARGO ══════════════════════════════════════════════════════
   Quién fue · sus hitos · sus dos momentos · su tribulación. La misma
   estructura que los perfiles de historia.thenomba.es. */