/* 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 #1A0F0B: 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: #1C120D;
  border: 1px solid rgba(247,248,229,.22);
  box-shadow: 0 16px 38px rgba(22,12,8,.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(28,18,13,.34) 0%,
    rgba(28,18,13,.74) 58%, rgba(28,18,13,.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(232,100,77,.05) 0%, transparent 60%),
    linear-gradient(180deg, #1E120E 0%, #170E0A 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:#1A0F0B;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:#1A0F0B}
.resultado .fs .f{background:linear-gradient(160deg,rgba(232,100,77,.09),rgba(232,100,77,.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(232,100,77,.13),rgba(232,100,77,.04));
  border:1px solid rgba(232,100,77,.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,#1E120E 0%,#170E0A 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:#130B08}
.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:#1A0F0B;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:#150D09}
html.parada body{background:#150D09;color:var(--seed-page)}
html.parada .topbar{background:#150D09;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,#1A0F0B 0%,#150D09 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(21,13,9,.90) 0%, rgba(21,13,9,.80) 45%, rgba(21,13,9,.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:#150D09; border-color:#F7F8E5;
  caret-color:#150D09;
}
html.parada .funnel .form input:focus::placeholder{ color:rgba(21,13,9,.45) }
html.parada .funnel .form select{ color:var(--seed-page) }
html.parada .funnel .form select:focus{ background:#F7F8E5; color:#150D09; 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:#120A07;
}
.q-banner img{
  width:100%; height:100%; object-fit:cover; display:block;
  opacity:0;                      /* invisible hasta que la imagen ha llegado */
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 0%,#000 52%,transparent 100%);
}
/* La animación se dispara con la clase que pone el `onload`, NO al entrar en
   el DOM. Antes arrancaba al pintarse el `<img>`: los 900 ms de fundido se
   consumían mientras la imagen todavía se estaba descargando, así que llegaba
   a destiempo y aparecía de golpe a media animación. Es el mismo problema que
   el fondo ya tenía resuelto esperando al `onload`. */
.q-banner img.lista{
  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.lista{ animation:none; opacity:.82 } }

/* 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. EL INSTANTE DEL CANTO NO ES LA MITAD DEL TIEMPO. Estaba puesto a
   450 ms —la mitad de los 900 del giro— dando por hecho que el ángulo avanza
   a ritmo constante, y con `cubic-bezier(.34,1.2,.44,1)` no: medido en el
   navegador, la carta cruza los 90° a los 150 ms y a los 300 ya está a 24°
   del frente. O sea que durante ~300 ms se veía el DORSO casi de frente y en
   espejo, y luego pegaba el salto. Eso era el bicho de «se buggean al dar la
   vuelta». Ahora el relevo va a los 150 ms, que es el canto de verdad.
   Un fundido aquí sería peor: se verían las dos caras superpuestas. */
@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 + 5750ms);
}
.carta .dorso{
  opacity:1;
  animation:dorso-sale 1ms linear forwards;
  animation-delay:calc(var(--orden) * 1100ms + 5750ms);
}
.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 + 5620ms);
}
@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(232,100,77,.5),
  0 22px 48px -16px rgba(0,0,0,.9), 0 0 32px -8px rgba(232,100,77,.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) }
/* El botón de la casa es el ÚNICO de la ficha que lleva a otro sitio, así que
   va como los de la landing: lima macizo, centrado y con su halo. De filete
   fino y pegado a la izquierda parecía una nota al pie. */
.panel-carta .btn-ghost-line{
  display:flex; width:fit-content; margin:18px auto 4px; padding:13px 26px;
  background:var(--seed-lime,#E8644D); color:#170E0A; border:0; border-radius:999px;
  font-weight:600; text-decoration:none;
  box-shadow:0 0 0 1px rgba(232,100,77,.5), 0 10px 30px -10px rgba(232,100,77,.55),
             0 0 34px -6px rgba(232,100,77,.45);
  transition:transform .25s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.panel-carta .btn-ghost-line:hover{
  transform:translateY(-2px);
  box-shadow:0 0 0 1px rgba(232,100,77,.7), 0 14px 36px -10px rgba(232,100,77,.7),
             0 0 46px -4px rgba(232,100,77,.6);
}

/* 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(232,100,77,.5),
  0 22px 48px -16px rgba(0,0,0,.9), 0 0 32px -8px rgba(232,100,77,.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 + 5620ms);
}
@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:#1D110D 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(23,13,10,.78) 88%, rgba(23,13,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(14,8,5,.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(48,29,22,.85) 0%, rgba(20,12,9,.92) 46%, rgba(4,7,5,.98) 78%),
    radial-gradient(70% 55% at 18% 92%,  rgba(41,25,19,.7)  0%, transparent 70%),
    radial-gradient(70% 55% at 84% 88%,  rgba(35,21,16,.6)  0%, transparent 70%),
    #050806;
  box-shadow:inset 0 0 90px 30px rgba(0,0,0,.75),
             inset 0 1px 0 rgba(232,100,77,.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,#E8644D) 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,#E8644D);
  box-shadow:0 0 6px 1px var(--c,#E8644D);
  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{
  overflow:hidden;
  /* 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{
  /* NADA DE ESTIRAR. Antes iba anclado a los cuatro lados con `object-fit:
     cover`, que sobre el papel recorta sin deformar; en el móvil de Juan
     llegaba la cara ensanchada, con el plano horizontal entero metido dentro
     de una pantalla vertical — es decir, estirado. Ya no se depende de que el
     navegador respete `object-fit`: el vídeo se deja a su tamaño natural
     (`width/height:auto`) y se centra. Así es imposible que se deforme, y
     como ahora hay un montaje 9:16 de verdad para pantallas verticales, sigue
     llenando la pantalla igual. */
  /* Llena la pantalla SIN poder deformarse, y sin fiarlo todo a que el
     navegador respete `object-fit` —que es lo que falló en el móvil: llegaba
     el plano horizontal entero metido en una pantalla vertical, o sea
     estirado—. Se le da SOLO el ancho, calculado para que cubra los dos ejes,
     y el alto en `auto`: con una sola dimensión fijada no hay forma de que la
     imagen se deforme. La clase la pone el JS según qué montaje sirve. */
  height:auto; max-width:none; max-height:none;
  background:#000; display:block;
}
.video-sala.vertical video{  width:max(100vw, calc(100vh * 9 / 16)) }
.video-sala.apaisada video{  width:max(100vw, calc(100vh * 16 / 9)) }
/* `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. */


/* 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(232,100,77,.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. */


/* ── EL LOGO EN EL PANEL DEL COMODÍN ─────────────────────────────────────
   Donde ponía «TheNomba» escrito va la marca. Con `mask` y no con un <img>
   porque el SVG de la marca viene en lima y aquí tiene que ir en el crema de
   la página: la máscara deja el color en CSS, que es donde se puede cambiar
   sin tocar el fichero de marca. */
.panel-carta .panel-marca{
  width:min(232px,64%); height:29px; margin:6px 0 16px;
  background:var(--seed-page,#F7F8E5);
  -webkit-mask:url(./logo-thenomba-mono.svg) left center/contain no-repeat;
          mask:url(./logo-thenomba-mono.svg) left center/contain no-repeat;
}

/* ── LAS FLECHAS DE BAJADA ───────────────────────────────────────────────
   La tirada ya no arrastra la página al perfil, así que hace falta decir que
   hay más abajo. Dos galones de neón que respiran: el gesto universal de
   «sigue», y de paso son un botón para quien prefiera pulsar.

   Solo existen con la mesa asentada. A pantalla completa la tirada aún se
   está jugando y no hay nada abajo a lo que bajar. */
.baja{
  display:none; margin:6px auto 2px; padding:10px 14px 4px;
  background:none; border:0; cursor:pointer; color:var(--seed-lime,#E8644D);
  flex-direction:column; align-items:center; gap:2px;
}
.mesa-puesta .baja{ display:flex; animation:baja-aparece .6s ease both .2s }
.baja i{
  width:22px; height:22px; display:block;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg); margin-top:-11px;
  filter:drop-shadow(0 0 6px rgba(232,100,77,.55));
  animation:baja-late 1.9s cubic-bezier(.45,0,.25,1) infinite;
}
.baja i:last-of-type{ opacity:.45; animation-delay:.18s }
.baja span{
  margin-top:8px; font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(247,248,229,.45);
}
@keyframes baja-late{
  0%,100%{ transform:rotate(45deg) translate(0,0) }
  50%    { transform:rotate(45deg) translate(5px,5px) }
}
@keyframes baja-aparece{ from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:none} }
/* En cuanto el usuario baja por su cuenta ya no pintan nada. */
.baja.lejos{ opacity:0; pointer-events:none; transition:opacity .4s ease }
.baja{ transition:opacity .4s ease }
@media (prefers-reduced-motion:reduce){ .baja i{ animation:none } }

/* ── MÓVIL ───────────────────────────────────────────────────────────────
   Las etiquetas de 10-11 px y los enlaces de una línea son legibles en un
   monitor y no en la mano. Se suben solo por debajo de 560 px. */
@media (max-width:560px){
  .resultado .r-eyebrow{ font-size:11.5px; letter-spacing:.2em }
  .resultado .fs h3{ font-size:11.5px }
  .fu-fuentes{ font-size:12.5px }
  .fu-dato cite{ font-size:11.5px }
  .baja span{ font-size:12px }
}


/* ── LA MANO EN EL MÓVIL ──────────────────────────────────────────────────
   Tres cartas en fila necesitan 480 px y un móvil tiene 390: la de la derecha
   se salía de la pantalla y la tirada parecía rota. En vertical se reparten en
   dos filas —el comodín y la época arriba, tu carta debajo y más grande—, que
   además es como se dejan tres cartas en una mesa estrecha.

   El orden de aparición NO cambia: sigue saliendo primero el comodín, luego la
   época y al final la tuya, que es lo que hace que la última importe. */
@media (max-width:620px){
  .mano{ flex-wrap:wrap; justify-content:center; gap:10px 12px; max-width:94vw }
  .carta.c-joker{ order:1 }
  .carta.c-etapa{ order:2 }
  .mano::after{ content:''; flex-basis:100%; height:0; order:3 }
  .carta.c-figura{ order:4 }
  .mesa:not(.mesa-puesta) .carta{ width:min(40vw,196px) }
  .mesa:not(.mesa-puesta) .carta.c-figura{ width:min(48vw,232px) }
  .mesa.mesa-puesta .carta{ width:min(36vw,150px) }
  .mesa.mesa-puesta .carta.c-figura{ width:min(42vw,176px) }
  /* En dos filas, la inclinación de las laterales las hace chocar. */
  .carta.c-joker, .carta.c-etapa{ rotate:0deg; margin-top:0 }
}

/* ── EL REVELADO ─────────────────────────────────────────────────────────
   Nombre y año en grande cuando la tirada termina, como en el test de
   historia. Antes la carta se giraba y el nombre solo existía impreso en el
   naipe, a cuerpo 12: el momento pedía un titular. */
.revelado{
  display:none; text-align:center; margin:6px auto 2px; max-width:22em;
  animation:revela .7s cubic-bezier(.22,1,.36,1) both;
}
.mesa-puesta .revelado{ display:block }
.revelado .r-kicker{
  display:block; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:rgba(247,248,229,.45);
}
.revelado h2{
  margin:6px 0 4px; font-family:'Beaufort Pro',Georgia,serif; font-weight:500;
  font-size:clamp(28px,5.4vw,44px); line-height:1.05; color:var(--seed-page,#F7F8E5);
}
.revelado h2 i{ font-style:normal; color:var(--seed-lime,#E8644D) }
.revelado .r-tipo{
  font-family:'Beaufort Pro',Georgia,serif; font-style:italic;
  font-size:clamp(15px,2.6vw,19px); color:rgba(247,248,229,.62);
}
@keyframes revela{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }

/* Saltar la tirada: solo mientras dura, y en un sitio donde no estorbe. */
.saltar-tirada{
  position:absolute; right:18px; bottom:22px; z-index:4;
  padding:11px 18px; border-radius:999px; cursor:pointer;
  background:rgba(23,13,10,.55); color:rgba(247,248,229,.72);
  border:1px solid rgba(247,248,229,.18); backdrop-filter:blur(8px);
  font-size:13px; letter-spacing:.04em;
  animation:aparece-saltar .5s ease both 2.5s;
}
.mesa-puesta .saltar-tirada{ display:none }
@keyframes aparece-saltar{ from{opacity:0} to{opacity:1} }
@media (max-width:620px){ .saltar-tirada{ right:50%; translate:50% 0; bottom:26px } }

/* ── EL HALLAZGO · la carta que no está en la baraja ──────────────────────
   Se abre sobre todo lo demás, en negro, con la carta grande: quien llega
   aquí ha hecho un gesto que nadie hace sin querer, así que el momento se
   trata como lo que es, un hallazgo, y no como una ficha más. */
.hallazgo{ position:fixed; inset:0; z-index:90; display:grid; place-items:center;
  opacity:0; transition:opacity .3s ease; overflow-y:auto; padding:24px 0 }
.hallazgo.abierta{ opacity:1 }
.hallazgo .h-fondo{ position:fixed; inset:0; background:rgba(3,6,4,.94);
  backdrop-filter:blur(6px) }
.hallazgo .h-cuerpo{
  position:relative; max-width:34em; margin:auto; padding:34px 26px 40px;
  text-align:center; color:var(--seed-page,#F7F8E5);
  transform:translateY(14px); transition:transform .45s cubic-bezier(.22,1,.36,1);
}
.hallazgo.abierta .h-cuerpo{ transform:none }
.hallazgo .h-cerrar{
  position:absolute; top:0; right:10px; width:44px; height:44px; cursor:pointer;
  background:none; border:0; color:rgba(247,248,229,.6); font-size:18px;
}
.hallazgo .h-kicker{ display:block; font-size:11px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--seed-lime,#E8644D); opacity:.8 }
.hallazgo .h-naipe{ margin:18px auto 20px; width:min(210px,52vw) }
.hallazgo .h-naipe img{ width:100%; border-radius:9px; display:block;
  box-shadow:0 0 0 1px rgba(232,100,77,.35), 0 28px 60px -18px #000,
             0 0 70px -14px rgba(232,100,77,.28);
  animation:hallazgo-gira 1s cubic-bezier(.34,1.1,.44,1) both .15s }
@keyframes hallazgo-gira{ from{ transform:rotateY(90deg) scale(.9); opacity:0 }
                          to{ transform:none; opacity:1 } }
.hallazgo h2{ margin:0 0 4px; font-family:'Beaufort Pro',Georgia,serif; font-weight:500;
  font-size:clamp(26px,5vw,38px); line-height:1.1 }
.hallazgo h2 i{ font-style:normal; color:var(--seed-lime,#E8644D) }
.hallazgo .h-tipo{ font-family:'Beaufort Pro',Georgia,serif; font-style:italic;
  color:rgba(247,248,229,.6) }
.hallazgo .h-intro{ margin:18px 0 6px; color:rgba(247,248,229,.82); line-height:1.7 }
.hallazgo .h-hitos{ list-style:none; margin:20px 0; padding:0; text-align:left }
.hallazgo .h-hitos li{ display:grid; grid-template-columns:8.5em 1fr; gap:14px;
  padding:12px 0; border-top:1px solid rgba(247,248,229,.10) }
.hallazgo .h-hitos span{ font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--seed-lime,#E8644D); opacity:.85; padding-top:3px }
.hallazgo .h-hitos p{ margin:0; color:rgba(247,248,229,.8); line-height:1.65; font-size:15px }
.hallazgo .h-cita{ margin:22px 0; font-family:'Beaufort Pro',Georgia,serif;
  font-size:clamp(19px,3.4vw,25px); line-height:1.35 }
.hallazgo .h-cita small{ display:block; margin-top:10px; font-family:inherit;
  font-size:12.5px; font-style:italic; color:rgba(247,248,229,.45) }
.hallazgo .h-cierre{ color:rgba(247,248,229,.8); line-height:1.7 }
.hallazgo .h-leccion{ margin-top:18px; padding-top:18px; color:var(--seed-page,#F7F8E5);
  border-top:1px solid rgba(232,100,77,.25); line-height:1.7 }
@media (max-width:560px){
  .hallazgo .h-hitos li{ grid-template-columns:1fr; gap:4px }
}
/* Mientras se mantiene pulsado el comodín, se nota que algo está pasando. */
.carta.c-joker.buscando{ filter:brightness(1.25); transition:filter 1s linear }
.hallazgo .h-otra{
  margin-top:26px; padding:13px 22px; cursor:pointer; border-radius:999px;
  background:none; border:1px solid rgba(232,100,77,.35); color:var(--seed-lime,#E8644D);
  font-size:13.5px; letter-spacing:.02em; transition:background .25s ease;
}
.hallazgo .h-otra b{ color:var(--seed-page,#F7F8E5); font-weight:500 }
.hallazgo .h-otra:hover{ background:rgba(232,100,77,.10) }

/* ── EL PREMIO DEL SORTEO ─────────────────────────────────────────────────
   Un naipe boca abajo que aparece junto al titular cuando la tirada reparte
   una carta de más. No se abre solo: espera. */
.premio{
  display:flex; align-items:center; gap:16px; cursor:pointer; text-align:left;
  margin:22px auto 4px; padding:12px 18px 12px 12px; max-width:25em;
  background:rgba(23,13,10,.42); border:1px solid rgba(232,100,77,.18);
  border-radius:16px; color:var(--seed-page,#F7F8E5);
  animation:premio-llega .8s cubic-bezier(.22,1,.36,1) both;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.premio:hover{ transform:translateY(-2px); border-color:rgba(232,100,77,.45);
  box-shadow:0 0 28px -12px rgba(232,100,77,.35) }
.premio img{ width:54px; border-radius:5px; display:block; flex:0 0 auto;
  box-shadow:0 8px 20px -8px #000, 0 0 0 1px rgba(247,248,229,.12);
  animation:premio-late 2.6s ease-in-out infinite }
.premio .p-txt{ font-size:13.5px; line-height:1.5; color:rgba(247,248,229,.62) }
.premio .p-txt b{ display:block; font-size:15px; font-weight:500; margin-bottom:3px;
  color:var(--seed-lime,#E8644D); font-family:'Beaufort Pro',Georgia,serif }
@keyframes premio-llega{ from{opacity:0;transform:translateY(12px) scale(.96)} to{opacity:1;transform:none} }
@keyframes premio-late{ 0%,100%{ transform:rotate(-2deg) } 50%{ transform:rotate(2deg) } }
@media (prefers-reduced-motion:reduce){ .premio img{ animation:none } }