/* ===========================================================================
   landing.css — Skeleton de la landing cinematográfica "3D scroll" (Fase 0).
   SOLO se carga en landing.php. No pisa el resto del sitio.
   Tokens y look provisorios; el diseño fino llega en Fase 3/4 (Claude Design).
   =========================================================================== */

/* Alias sobre css/base.css. Estos tokens nacieron acá como "provisorios" (ver
   la cabecera de este archivo) y terminaron siendo la identidad real de la
   portada; ahora los hex viven en base.css y esto son solo nombres.
   OJO: --tdp-texto es un COLOR, mientras que --texto en estilo.css es una
   FAMILIA tipográfica. Trampa heredada, documentada en base.css. */
:root {
  --tdp-negro:      var(--c-negro);
  --tdp-negro-2:    var(--c-negro-2);
  --tdp-oro:        var(--c-oro);               /* oro Season 6 */
  --tdp-oro-claro:  var(--c-oro-claro);
  --tdp-naranja:    var(--c-naranja);           /* energía de las alas evo3 */
  --tdp-rojo:       var(--c-rojo-vivo);         /* orbe carmesí / acento */
  --tdp-navy:       var(--c-navy);
  --tdp-texto:      var(--c-hueso);
  --tdp-tenue:      var(--c-gris-calido);
  /* ALTO DE LA BARRA FIJA. Existe como token porque el 2026-09-21 la barra
     paso de UNA fila a DOS y el padding del hero --que la compensa a mano--
     quedo con el numero viejo: la barra se comio el titulo y el encabezado
     del formulario. Era EXACTAMENTE el bug que el comentario de .tdp-hero ya
     advertia desde el 2026-08-21, reintroducido por no leerlo.
     Con un token, cambiar la barra y no actualizar el hero deja de ser
     posible: hay un solo numero. */
  --tdp-barra:      118px;
  --tdp-barra-movil: 114px;
  --tdp-borde:      rgba(216,162,74,.22);
  --tdp-panel:      rgba(17,17,25,.72);
}

/* El header de comun.php reusado como barra fija translúcida ------------- */
body { background: var(--tdp-negro); color: var(--tdp-texto); }

body > header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  background: linear-gradient(180deg, rgba(10,10,12,.92), rgba(10,10,12,0));
  backdrop-filter: blur(4px);
  border-bottom: 1px solid var(--tdp-borde);
}

/* Las pildoras fijas (.tdp-skip-grupo / .tdp-skip) SE RETIRARON el 2026-09-21:
   duplicaban "Crear cuenta" e "Ingresar", que desde hoy viven siempre en la
   barra. Eran cuatro botones para dos acciones. Ver landing.php. */
/* D5 (correccion): el <header> de comun.php YA trae "Crear cuenta" (/registro)
   e "Ingresar" (/cuenta) y ya era fijo. Con las pildoras arriba, esos dos links
   dejaban el mismo CTA TRES veces en el primer viewport y forzaban al nav a dos
   filas. Se esconden SOLO aca: landing.css no lo carga ninguna otra pagina. */
body > header nav a[href="/registro"],
body > header nav a[href="/cuenta"] { display: none; }
@media (max-width: 560px) {
}

/* Canvas fijo detrás de todo: se "scrubea" con el scroll ----------------- */
.tdp-escena {
  position: fixed; inset: 0; z-index: 0;
  background: var(--tdp-negro);
}
#evo-canvas { width: 100%; height: 100%; display: block; }
.tdp-velo {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(120% 80% at 50% 40%, transparent 40%, rgba(0,0,0,.72) 100%);
}

/* El contenido va por encima del canvas ---------------------------------- */
.tdp-scroll { position: relative; z-index: 2; }

.tdp-seccion {
  min-height: 100vh;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 860px; margin: 0 auto; padding: 14vh 22px;
  opacity: 0; transform: translateY(38px);
  transition: opacity .85s cubic-bezier(.2,.7,.2,1), transform .85s cubic-bezier(.2,.7,.2,1);
  /* isolation: el ::before de abajo va a z-index -1 y tiene que quedar DENTRO
     de la sección (detrás de su texto, delante del canvas), no escaparse. */
  position: relative; isolation: isolate;
}

/* ESCUDO DE LEGIBILIDAD (2026-08-21).
   El canvas de fondo tiene tramos MUY claros — las alas encendidas del Dark
   Knight cuando evoluciona, BkPino transformándose — y el texto caía directo
   encima: oro claro sobre oro claro, hueso sobre blanco. Ilegible; reportado
   por Rudi en la corona, el hub de F12 y el subtítulo de los jefes.

   Por qué .tdp-velo no alcanzaba: su gradiente es TRANSPARENTE en el centro
   (40%) y oscuro en los bordes — justo al revés de donde vive el texto.

   Esto es una sombra suave por sección, centrada en su contenido y difuminada
   a los costados: da contraste sin tapar el arte (que es la magia que Rudi
   quiere conservar). */
.tdp-seccion::before {
  content: ""; position: absolute; inset: -6vh -8vw; z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 72% 58% at 50% 50%,
    rgba(10,10,12, .90) 0%,
    rgba(10,10,12, .78) 42%,
    rgba(10,10,12, .40) 72%,
    rgba(10,10,12, 0) 100%);
}
.tdp-seccion.visible { opacity: 1; transform: none; }

/* Reveals escalonados (pedido de Rudi 2026-08-21): al entrar una seccion, sus
   bloques aparecen en cascada en vez de todos juntos. Dos niveles, CSS puro
   sobre el .visible que ya pone el IntersectionObserver de landing.js:
   1) los hijos directos (h2 -> lede -> contenido) se escalonan de a .12 s;
   2) los items de grilla (cards, tiers, rates) se escalonan entre si.
   Solo opacity/transform: cero layout shift, y el compositor lo anima solo. */
.tdp-seccion > * {
  opacity: 0; transform: translateY(22px);
  transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1);
}
.tdp-seccion.visible > * { opacity: 1; transform: none; }
.tdp-seccion.visible > *:nth-child(2) { transition-delay: .12s; }
.tdp-seccion.visible > *:nth-child(3) { transition-delay: .24s; }
.tdp-seccion.visible > *:nth-child(4) { transition-delay: .36s; }
.tdp-seccion.visible > *:nth-child(n+5) { transition-delay: .46s; }

.tdp-seccion .tdp-card, .tdp-seccion .tdp-tier, .tdp-seccion .tdp-rate {
  opacity: 0; transform: translateY(18px);
  /* Curva con sobrepaso: el bloque "cae y se asienta" con micro-rebote,
     lenguaje de spot publicitario (pedido de Rudi 2026-08-21). */
  transition: opacity .55s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.34,1.45,.5,1);
}
.tdp-seccion.visible .tdp-card, .tdp-seccion.visible .tdp-tier, .tdp-seccion.visible .tdp-rate {
  opacity: 1; transform: none;
}
.tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(1) { transition-delay: .25s; }
.tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(2) { transition-delay: .37s; }
.tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(3) { transition-delay: .49s; }
.tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(4) { transition-delay: .61s; }
.tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(n+5) { transition-delay: .72s; }

/* Con reduced-motion, todo aparece de una: sin desplazamientos ni cascada. */
@media (prefers-reduced-motion: reduce) {
  .tdp-seccion > *, .tdp-seccion .tdp-card, .tdp-seccion .tdp-tier, .tdp-seccion .tdp-rate {
    opacity: 1; transform: none; transition: none;
  }
}

/* ── Inmersión "El Despertar del Trono" (2026-08-21) ─────────────────────────
   Todo cuelga de dos ganchos que pone landing.js: la variable --scrollp
   (progreso 0..1 del scroll, un write por frame) y la clase body.evo-pulso
   (~1,2 s cada vez que BkPino cambia de etapa). Solo opacity/transform/filter:
   lo anima el compositor. Con reduced-motion nada de esto corre. */
:root { --scrollp: 0; }
@media (prefers-reduced-motion: no-preference) {

  /* 1 · La partida del héroe: al bajar, el campamento queda atrás en capas.
     Los retratos suben más rápido que el lockup → profundidad en el 1er glide.
     (Se preserva la rotación base de cada retrato.) */
  .tdp-banner-retrato.izq { transform: rotate(-1.4deg) translateY(calc(var(--scrollp) * -90vh)); }
  .tdp-banner-retrato.der { transform: rotate(1.4deg)  translateY(calc(var(--scrollp) * -70vh)); }
  .tdp-banner-lockup      { transform: translateY(calc(var(--scrollp) * -34vh)); }

  /* 4 · Forja de títulos: el h2 entra des-desenfocándose, metal que se enfría. */
  .tdp-seccion > h2 {
    filter: blur(7px);
    transition: opacity .6s cubic-bezier(.2,.7,.2,1), transform .6s cubic-bezier(.2,.7,.2,1),
                filter .7s cubic-bezier(.2,.7,.2,1);
  }
  .tdp-seccion.visible > h2 { filter: blur(0); }
  /* ...y las cards entran alternando flanco, no todas desde abajo.
     OJO: acotado a :not(.visible). Sin eso, estas reglas empataban en
     especificidad con el reset de .visible y, por estar despues en el
     archivo, ganaban SIEMPRE: las cards quedaban clavadas a ±30px,
     encimadas (captura de Rudi 2026-08-21). */
  .tdp-seccion:not(.visible) .tdp-card:nth-child(odd)  { transform: translate(-30px, 18px); }
  .tdp-seccion:not(.visible) .tdp-card:nth-child(even) { transform: translate(30px, 18px); }

  /* 5 · La noche se cierra: camino al Trono la viñeta se profundiza. */
  .tdp-velo::before {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(120% 90% at 50% 55%, transparent 32%, rgba(0,0,0,.55) 100%);
    opacity: calc(var(--scrollp) * .8);
  }

  /* 2 · Destello de evolución: flash dorado que baña la escena al transformarse. */
  .tdp-velo::after {
    content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: radial-gradient(80% 60% at 50% 45%,
      rgba(255,220,140,.30), rgba(216,162,74,.12) 45%, transparent 70%);
  }
  body.evo-pulso .tdp-velo::after { animation: tdp-evo-flash 1.1s ease-out; }
  @keyframes tdp-evo-flash { 12% { opacity: 1; } 100% { opacity: 0; } }

  /* ...el rótulo del HUD acusa el golpe... */
  body.evo-pulso .tdp-meter .etapa { animation: tdp-etapa-pulso 1.1s ease-out; }
  @keyframes tdp-etapa-pulso {
    15% { text-shadow: 0 0 18px rgba(240,200,119,.95); transform: scale(1.12); }
  }

  /* 3 · ...y las brasas se avivan mientras dura el pulso. */
  .tdp-fx .mote { transition: filter .35s ease; }
  body.evo-pulso .tdp-fx .mote { filter: blur(.5px) brightness(2.1); }

  /* 6 · Ráfaga de viaje: en CADA glide del deck (body.en-viaje, lo pone irA)
     un god-ray rápido cruza la escena y las brasas se encienden un poco.
     Vive en .tdp-escena::after: detrás del velo, sobre el canvas. */
  .tdp-escena::after {
    content: ""; position: absolute; inset: -20%; opacity: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 42%, rgba(255,210,130,.14) 50%, transparent 58%);
    transform: translateX(-30%);
  }
  body.en-viaje .tdp-escena::after { animation: tdp-viaje-ray 1.1s ease-out; }
  @keyframes tdp-viaje-ray {
    0%   { opacity: 0; transform: translateX(-30%); }
    25%  { opacity: 1; }
    100% { opacity: 0; transform: translateX(30%); }
  }
  body.en-viaje .tdp-fx .mote { filter: blur(.5px) brightness(1.6); }

  /* 7 · Chispas de cada sala: cada sección revelada suelta su propia columna de
     chispas (un punto + 7 copias por box-shadow; anima solo transform/opacity).
     El color cuenta la sala: oro por defecto, violeta en la corte del Rey,
     rojo en la guarida de los jefes. */
  .tdp-seccion::after {
    content: ""; position: absolute; bottom: 6%; left: 12%;
    width: 5px; height: 5px; border-radius: 50%; pointer-events: none;
    background: rgba(240,200,119,.75);
    box-shadow: 9vw 2vh 0 -1px rgba(240,200,119,.55), 22vw -3vh 0 0 rgba(255,138,42,.5),
                34vw 1vh 0 -2px rgba(240,200,119,.45), 47vw -2vh 0 0 rgba(255,110,60,.5),
                58vw 3vh 0 -1px rgba(240,200,119,.6), 66vw -1vh 0 -2px rgba(255,138,42,.45),
                73vw 2vh 0 0 rgba(240,200,119,.5);
    opacity: 0; filter: blur(.4px);
  }
  .tdp-seccion.visible::after { animation: tdp-chispas 7s ease-in infinite; }
  @keyframes tdp-chispas {
    0%   { opacity: 0; transform: translateY(0); }
    12%  { opacity: .9; }
    60%  { opacity: .35; }
    100% { opacity: 0; transform: translateY(-46vh); }
  }
  .tdp-rey::after {
    background: rgba(200,110,255,.7);
    box-shadow: 9vw 2vh 0 -1px rgba(200,110,255,.5), 22vw -3vh 0 0 rgba(160,80,220,.45),
                34vw 1vh 0 -2px rgba(200,110,255,.4), 47vw -2vh 0 0 rgba(230,160,255,.45),
                58vw 3vh 0 -1px rgba(200,110,255,.55), 66vw -1vh 0 -2px rgba(160,80,220,.4),
                73vw 2vh 0 0 rgba(200,110,255,.45);
  }
  .tdp-jefes::after {
    background: rgba(201,86,78,.75);
    box-shadow: 9vw 2vh 0 -1px rgba(201,86,78,.55), 22vw -3vh 0 0 rgba(255,110,60,.5),
                34vw 1vh 0 -2px rgba(201,86,78,.45), 47vw -2vh 0 0 rgba(255,80,60,.5),
                58vw 3vh 0 -1px rgba(201,86,78,.6), 66vw -1vh 0 -2px rgba(255,110,60,.45),
                73vw 2vh 0 0 rgba(201,86,78,.5);
  }

  /* 8 · Glint de forja: al asentarse el título, un golpe de brillo una sola vez. */
  .tdp-seccion.visible > h2 { animation: tdp-h2-glint 1.3s .4s both; }
  @keyframes tdp-h2-glint {
    0%, 100% { text-shadow: none; }
    30% { text-shadow: 0 0 22px rgba(240,200,119,.85), 0 0 46px rgba(216,162,74,.35); }
  }

  /* 9 · Sheen: al aterrizar, cada card recibe UN barrido de brillo diagonal,
     como el glaseado de un spot. Escalonado igual que la cascada. */
  .tdp-seccion .tdp-card { overflow: hidden; }
  .tdp-seccion .tdp-card::after {
    content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
    background: linear-gradient(115deg, transparent 35%, rgba(255,230,170,.22) 48%,
                rgba(255,255,255,.10) 52%, transparent 65%);
    transform: translateX(-120%);
  }
  .tdp-seccion.visible .tdp-card::after { animation: tdp-sheen 1s ease-out both; }
  .tdp-seccion.visible .tdp-card:nth-child(1)::after { animation-delay: .8s; }
  .tdp-seccion.visible .tdp-card:nth-child(2)::after { animation-delay: .95s; }
  .tdp-seccion.visible .tdp-card:nth-child(3)::after { animation-delay: 1.1s; }
  .tdp-seccion.visible .tdp-card:nth-child(n+4)::after { animation-delay: 1.25s; }
  @keyframes tdp-sheen {
    0%   { opacity: 1; transform: translateX(-120%); }
    100% { opacity: 0; transform: translateX(120%); }
  }

  /* 10 · El ensamblaje: la sección final (#crear) junta todo. El módulo de
     registro cae con escala y un anillo de luz; detrás del título giran rayos
     de conic-gradient enmascarados — el plano final del spot. */
  #crear .tdp-signup { transform: translateY(26px) scale(.94); }
  #crear.visible .tdp-signup { transform: none; }
  #crear.visible .tdp-signup { animation: tdp-anillo 1.6s .5s both; }
  @keyframes tdp-anillo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(240,200,119,0); }
    35% { box-shadow: 0 0 34px 4px rgba(240,200,119,.34), 0 0 90px 20px rgba(216,162,74,.14); }
  }
  #crear .tdp-signup { position: relative; }
  #crear .tdp-signup::before {
    content: ""; position: absolute; left: 50%; top: -120px; width: 560px; height: 560px;
    margin-left: -280px; pointer-events: none; opacity: 0; z-index: -1;
    background: repeating-conic-gradient(from 0deg,
      rgba(240,200,119,.10) 0deg 7deg, transparent 7deg 24deg);
    -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    mask-image: radial-gradient(circle, #000 0%, transparent 62%);
    animation: tdp-halo-girar 40s linear infinite;
    transition: opacity 1.4s ease .6s;
  }
  #crear.visible .tdp-signup::before { opacity: 1; }
  @keyframes tdp-halo-girar { to { transform: rotate(360deg); } }

  /* 11 · Coronación: la ÚLTIMA transformación (TRONO) pega más fuerte que los
     pulsos comunes — flash más blanco, más largo, brasas al máximo. El JS pone
     body.evo-corona junto con .evo-pulso; estas reglas van después y ganan. */
  body.evo-corona .tdp-velo::after {
    background: radial-gradient(85% 65% at 50% 45%,
      rgba(255,240,190,.5), rgba(240,200,119,.22) 40%, transparent 72%);
    animation: tdp-corona-flash 1.9s ease-out;
  }
  @keyframes tdp-corona-flash {
    10% { opacity: 1; }
    45% { opacity: .55; }
    100% { opacity: 0; }
  }
  body.evo-corona .tdp-fx .mote { filter: blur(.5px) brightness(2.8); }
  body.evo-corona .tdp-meter .etapa { animation: tdp-etapa-pulso 1.9s ease-out; }

  /* 12 · Nada queda quieto (pedido de Rudi: "more movement of items").
     Tras aterrizar, cada bloque FLOTA en un vaivén lento y desfasado — los
     ingredientes del spot suspendidos en el aire. El delay (1.5s+) deja
     terminar la entrada; el keyframe arranca y cierra en 0 así el empalme
     con transform:none es invisible. */
  @keyframes tdp-flotar { 50% { transform: translateY(-6px); } }
  .tdp-seccion.visible .tdp-card,
  .tdp-seccion.visible .tdp-tier,
  .tdp-seccion.visible .tdp-rate { animation: tdp-flotar 7s ease-in-out 1.5s infinite; }
  .tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(2n) { animation-duration: 8.5s; animation-delay: 2.2s; }
  .tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(3n) { animation-duration: 6.2s; animation-delay: 2.9s; }
  .tdp-seccion.visible :is(.tdp-card, .tdp-tier, .tdp-rate):nth-child(3n+1) { animation-duration: 9.3s; animation-delay: 1.8s; }

  /* ...al pasar el mouse, la card despierta: borde encendido + sheen de nuevo.
     (El lift por transform lo maneja la flotación; acá va luz, no movimiento,
     para no pelearle el transform a tdp-flotar.) */
  .tdp-seccion .tdp-card { transition: opacity .55s cubic-bezier(.2,.7,.2,1),
      transform .7s cubic-bezier(.34,1.45,.5,1), border-color .25s ease, box-shadow .25s ease; }
  .tdp-seccion.visible .tdp-card:hover {
    border-color: rgba(240,200,119,.55);
    box-shadow: 0 8px 30px rgba(216,162,74,.16);
  }
  .tdp-seccion.visible .tdp-card:hover::after { animation: tdp-sheen .8s ease-out; }

  /* Los retratos del banner respiran (la imagen interna: el marco lo maneja
     el parallax y no se toca), y el escudo del lockup levita. */
  @keyframes tdp-vaiven { 50% { transform: translateY(-7px) rotate(.5deg); } }
  .tdp-banner-retrato img { animation: tdp-vaiven 9s ease-in-out infinite; }
  .tdp-banner-retrato.der img { animation-duration: 11s; animation-delay: 1.6s; }
  @keyframes tdp-levitar { 50% { transform: translateY(-8px); } }
  .tdp-banner-lockup .escudo { animation: tdp-levitar 6.5s ease-in-out infinite; }

  /* El H1 y el relleno del HUD respiran con brillo. */
  @keyframes tdp-aura { 50% { filter: drop-shadow(0 0 16px rgba(240,200,119,.5)); } }
  .tdp-banner-lockup h1 { animation: tdp-aura 8s ease-in-out infinite; }
  .tdp-meter .relleno { animation: tdp-aura 5s ease-in-out infinite; }
}

/* Scroll con INERCIA (Lenis, iniciado en landing.js): un toque de rueda desliza
   suave y solo, y la animación de frames queda continua y seamless — sin snap
   que corte. Lenis maneja la suavidad, así que el scroll nativo va en 'auto'
   (scroll-behavior:smooth pelearía con Lenis). Clases estándar de Lenis: */
html { scroll-behavior: auto; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

.tdp-seccion h2 {
  font-size: clamp(1.8rem, 4vw, 3rem); line-height: 1.05; margin: 0 0 .4em;
  color: var(--tdp-oro-claro); letter-spacing: -.5px;
  /* Doble sombra: una pegada (contorno, separa la letra del fondo claro) y una
     abierta (halo). Sin esto el oro claro desaparece sobre las alas encendidas
     aunque el escudo de arriba ya bajó el fondo. */
  text-shadow: 0 1px 2px rgba(10,10,12, .95), 0 3px 22px rgba(10,10,12, .85);
}
.tdp-seccion .lede {
  font-size: 1.15rem; color: var(--tdp-texto); max-width: 46ch;
  text-shadow: 0 1px 2px rgba(10,10,12, .95), 0 2px 14px rgba(10,10,12, .8);
}
.tdp-seccion small, .tdp-tenue { color: var(--tdp-tenue); }

/* Hero ------------------------------------------------------------------- */
.tdp-hero {
  min-height: 100vh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  /* El header es `position: fixed` y no ocupa lugar en el flujo: sin este
     padding el contenido se centra contra TODA la ventana y la barra le come
     la primera línea del título (pasó con el banner, 2026-08-21).
     `box-sizing: border-box` (estilo.css) hace que el padding entre dentro del
     100vh, así el centrado queda en el espacio libre debajo de la barra. */
  padding: calc(var(--tdp-barra) + 24px) 22px 0; position: relative;
}
.tdp-hero h1 {
  font-size: clamp(2.6rem, 8vw, 6rem); margin: 0; letter-spacing: -1px;
  text-shadow: 0 4px 40px rgba(0,0,0,.8);
}
.tdp-hero .lema { color: var(--tdp-oro-claro); font-size: 1.2rem; margin: .6em 0 1.6em; }

/* ---- Banner de marca del hero (Opción C del canvas, 2026-08-21) ----------
   Retratos enmarcados a los flancos + lockup central sobre el trono coronado.
   Los hex de la rampa metálica viven en base.css (--c-oro-brillo/sombra/
   profundo); acá solo se consumen. */
.tdp-banner {
  display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px;
  align-items: stretch; gap: 26px;
  width: 100%; max-width: 1100px; margin: 0 auto;
}
.tdp-banner-retrato {
  position: relative; margin: 14px 0; overflow: hidden;
  border: 1px solid rgba(216,162,74,.5);
  box-shadow: inset 0 0 0 5px var(--c-negro), inset 0 0 0 6px rgba(216,162,74,.3),
              0 14px 40px rgba(0,0,0,.6);
}
.tdp-banner-retrato.izq { transform: rotate(-1.4deg); }
.tdp-banner-retrato.der { transform: rotate(1.4deg); }
.tdp-banner-retrato img {
  width: 100%; height: 100%; object-fit: cover; object-position: top; display: block;
}
.tdp-banner-retrato figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 14px;
  font-family: var(--fuente-titulos); font-weight: 700; font-size: .78rem;
  letter-spacing: .2em; text-transform: uppercase; text-align: center;
  color: var(--tdp-oro-claro);
  background: linear-gradient(180deg, rgba(10,10,12,0) 0%, rgba(10,10,12,.92) 55%);
}
.tdp-banner-lockup {
  position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  text-align: center; padding: 26px 12px; min-height: 420px;
}
.tdp-banner-lockup .trono-fondo {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -44%);
  width: min(560px, 100%); height: 400px; object-fit: cover; object-position: center 30%;
  opacity: .85;
  -webkit-mask-image: radial-gradient(70% 62% at 50% 48%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 78%);
          mask-image: radial-gradient(70% 62% at 50% 48%, rgba(0,0,0,1) 38%, rgba(0,0,0,0) 78%);
}
.tdp-banner-lockup > *:not(.trono-fondo) { position: relative; }
.tdp-banner-lockup h1 {
  font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: 1.02; letter-spacing: .02em;
  text-shadow: none; /* el .tdp-hero h1 trae una sombra que ensucia el clip del degradado */
  background: linear-gradient(180deg, var(--c-oro-brillo) 0%, var(--tdp-oro-claro) 34%,
                              var(--tdp-oro) 62%, var(--c-oro-sombra) 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 0 var(--c-oro-profundo)) drop-shadow(0 5px 18px rgba(0,0,0,.85));
}
.tdp-banner-lockup .escudo {
  width: 118px; height: 118px;
  filter: drop-shadow(0 6px 24px rgba(216,162,74,.45));
}
.tdp-banner-lockup .mu-online {
  margin: 0; font-family: var(--fuente-titulos); font-weight: 700; font-size: .95rem;
  letter-spacing: .34em; text-transform: uppercase; color: var(--tdp-oro-claro);
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.tdp-banner-lockup .placa {
  display: inline-flex; align-items: center; gap: 12px; padding: 8px 24px;
  border: 1px solid rgba(216,162,74,.55); background: rgba(10,10,12,.7);
  box-shadow: inset 0 1px 0 rgba(240,200,119,.25);
  font-family: var(--fuente-titulos); font-weight: 700; font-size: .95rem;
  letter-spacing: .22em; text-transform: uppercase; color: var(--c-oro);
}
.tdp-banner-lockup .placa i {
  width: 6px; height: 6px; background: var(--tdp-oro); transform: rotate(45deg);
}
.tdp-cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.tdp-boton {
  padding: 14px 28px; border-radius: 10px; font-weight: 700; text-decoration: none;
  font-size: 1.05rem; transition: transform .12s ease, box-shadow .12s ease;
}
.tdp-boton.primario { background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-oro)); color: var(--tdp-negro); box-shadow: 0 6px 24px rgba(216,162,74,.35); }
.tdp-boton.borde    { border: 1px solid var(--tdp-oro); color: var(--tdp-oro-claro); }
.tdp-boton:hover    { transform: translateY(-2px); }
/* D2: "Ya juego -> Ingresar" es un link de texto: existe para el que vuelve,
   sin competirle peso visual al boton de Descargar. */
.tdp-cta-enlace {
  align-self: center; padding: 12px 6px;
  color: var(--tdp-oro-claro); font-size: .95rem;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: var(--tdp-oro);
}
.tdp-cta-enlace:hover { color: var(--tdp-texto); }
.tdp-hint { margin-top: 3rem; color: var(--tdp-tenue); font-size: .85rem; animation: tdp-bob 2s ease-in-out infinite; }
@keyframes tdp-bob { 50% { transform: translateY(6px); } }

/* Latido del servidor (¿está vivo? + cuánta gente hay) -------------------- */
.tdp-estado { display: inline-flex; align-items: center; gap: 8px; margin-top: 1.2rem; font-size: .92rem; color: var(--tdp-texto); }
.tdp-estado .punto { width: 9px; height: 9px; border-radius: 50%; background: var(--verde, #5bbd68); box-shadow: 0 0 10px rgba(91,189,104,.85); flex: none; }
.tdp-estado.vivo .punto { animation: tdp-latido 2s ease-in-out infinite; }
.tdp-estado.caido .punto { background: var(--rojo, #c9564e); box-shadow: none; }
.tdp-estado strong { color: var(--tdp-oro-claro); font-weight: 600; }
.tdp-estado-num { color: var(--tdp-tenue); }
@keyframes tdp-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.82); } }
@media (prefers-reduced-motion: reduce) { .tdp-estado.vivo .punto { animation: none; } }

/* Franja de rates transparentes ------------------------------------------ */
.tdp-rates { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 1.6rem; }
.tdp-rate { background: var(--tdp-panel); border: 1px solid var(--tdp-borde); border-radius: 10px; padding: 10px 18px; text-align: center; }
.tdp-rate b { display: block; font-size: 1.4rem; color: var(--tdp-oro-claro); }
.tdp-rate span { font-size: .75rem; color: var(--tdp-tenue); }

/* La Salada (2026-09-21) ------------------------------------------------- */
/* Tarjeta ancha con el arte a la izquierda. El arte es DECORATIVO: si el
   archivo falta, el navegador no pinta nada y el texto queda igual de legible
   (misma politica fail-open que el resto de la landing). */
.tdp-salada { display: grid; gap: 20px; align-items: center; margin-top: 1.4rem; }
.tdp-salada-arte {
  width: 100%; height: 100%; max-height: 260px; object-fit: cover;
  border-radius: 10px; border: 1px solid var(--tdp-borde); display: block;
}
.tdp-salada-txt p { margin: 0 0 .7em; }
.tdp-salada-txt p:last-child { margin-bottom: 0; }
.tdp-salada-txt code {
  background: rgba(0,0,0,.35); border: 1px solid var(--tdp-borde);
  border-radius: 5px; padding: 1px 6px; font-size: .92em; color: var(--tdp-oro-claro);
}
@media (min-width: 760px) { .tdp-salada { grid-template-columns: 300px 1fr; } }

/* Pilares y tarjetas ----------------------------------------------------- */
.tdp-pilares { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin-top: 1.4rem; }
.tdp-card { background: var(--tdp-panel); border: 1px solid var(--tdp-borde); border-radius: 12px; padding: 18px; }
.tdp-card h3 { margin: 0 0 .35em; color: var(--tdp-oro-claro); }
.tdp-card p  { margin: 0; color: var(--tdp-texto); font-size: .98rem; }
.tdp-card a  { color: var(--tdp-oro); }

/* D23 · Esquineros de filigrana. Cuatro escuadras doradas en las esquinas de
   cada tarjeta -- el detalle de marco que pide la Direccion A -- dibujadas
   con ocho capas de background del propio elemento: sin assets, sin ::before
   ni ::after (el ::after de .tdp-card ya lo usa el barrido de brillo) y sin
   tocar el position, asi no se mueve nada de lo que ya esta puesto.
   El background-color sale de la regla de arriba y este no lo pisa. */
.tdp-card {
  --fil-largo: 14px;
  --fil-color: color-mix(in oklab, var(--tdp-oro) 55%, transparent);
  --fil-borde: 7px;
  background-image:
    linear-gradient(var(--fil-color) 0 0), linear-gradient(var(--fil-color) 0 0),
    linear-gradient(var(--fil-color) 0 0), linear-gradient(var(--fil-color) 0 0),
    linear-gradient(var(--fil-color) 0 0), linear-gradient(var(--fil-color) 0 0),
    linear-gradient(var(--fil-color) 0 0), linear-gradient(var(--fil-color) 0 0);
  background-repeat: no-repeat;
  background-size:
    var(--fil-largo) 1px, 1px var(--fil-largo),
    var(--fil-largo) 1px, 1px var(--fil-largo),
    var(--fil-largo) 1px, 1px var(--fil-largo),
    var(--fil-largo) 1px, 1px var(--fil-largo);
  background-position:
    left var(--fil-borde)  top var(--fil-borde),    left var(--fil-borde)  top var(--fil-borde),
    right var(--fil-borde) top var(--fil-borde),    right var(--fil-borde) top var(--fil-borde),
    left var(--fil-borde)  bottom var(--fil-borde), left var(--fil-borde)  bottom var(--fil-borde),
    right var(--fil-borde) bottom var(--fil-borde), right var(--fil-borde) bottom var(--fil-borde);
}

/* Prueba en vivo (rey / ranking) ----------------------------------------- */
.tdp-rey { text-align: center; }
.tdp-rey h2 .emblema { color: var(--c-violeta, #c86eff); font-size: 1.15em; vertical-align: -.14em; margin-right: .16em; }
.tdp-rey .nombre { color: var(--tdp-oro-claro); font-weight: 800; }

/* Podio de los 3 primeros (fusionado con la Corona, 2026-08-21: antes era
   una sección aparte "Top del servidor" sin más que un título y un botón). */
.tdp-top3 {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px; max-width: 640px; margin: 1.6rem auto 0;
}
.tdp-top3-item {
  background: var(--tdp-panel); border: 1px solid var(--tdp-borde); border-radius: 12px;
  padding: 16px 10px 14px; display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.tdp-top3-item .medalla {
  width: 30px; height: 30px; display: grid; place-items: center;
  font-family: var(--titulos, Cinzel, serif); font-weight: 700; font-size: .95rem;
  color: var(--tdp-negro); background: var(--tdp-tenue); border-radius: 50%; margin-bottom: 4px;
}
.tdp-top3-item.p1 { transform: translateY(-6px); border-color: color-mix(in oklab, var(--tdp-oro) 55%, transparent); }
/* El Rey coronado: violeta, que en todo el sitio significa "el Rey COMO
   JUGADOR" (ver la convención de emblemas en base.css / emblemas.css). No es
   necesariamente el #1 crudo de bajas — en un empate el servidor le conserva
   el título al que ya lo tiene, y el podio respeta esa regla. */
.tdp-top3-item.es-rey { border-color: color-mix(in oklab, var(--c-violeta) 55%, transparent); }
.tdp-top3-item.es-rey .medalla { background: none; }
.tdp-top3-item.es-rey .medalla .emblema {
  width: 30px; height: 30px; color: var(--c-violeta); display: block;
}
.tdp-top3-item.es-rey b { color: var(--c-violeta); }
.tdp-top3-item.p1 .medalla { background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-oro)); }
.tdp-top3-item.p2 .medalla { background: var(--c-plata, #c8ccd0); }
.tdp-top3-item.p3 .medalla { background: var(--tdp-oro); }
.tdp-top3-item b { color: var(--tdp-texto); font-size: .95rem; }
.tdp-top3-item .clase { font-size: .74rem; color: var(--tdp-tenue); text-transform: uppercase; letter-spacing: .05em; }
.tdp-top3-item .resets { font-size: .82rem; color: var(--tdp-oro-claro); font-weight: 600; }
.tdp-top3-nota { margin: .7em 0 0; font-size: .78rem; color: var(--tdp-tenue); }

/* Feature del Hub F12: grid de íconos reales del cliente (2026-08-21). */
/* Carrusel COVERFLOW del hub (v2, 2026-08-21): rueda 3D infinita. Los items
   se doblan en perspectiva hacia los bordes y el final empalma con el
   principio (landing.js posiciona cada item por su distancia circular al
   frente). Las flechas y el click en un item lateral giran la rueda. */
.tdp-hub-carrusel {
  position: relative; margin: 1.8rem auto 0;
  /* width EXPLICITO: en el flex column de la seccion, margin:auto anula el
     stretch, y como todo el contenido del carrusel es absolute, colapsaba a
     0px de ancho -- y las flechas (left/right -18px) quedaban abrazadas a una
     caja invisible en el centro, tapando la card frontal (captura de Rudi). */
  width: min(100%, 760px);
  height: 220px; perspective: 950px;
}
/* ⛔ EN TELEFONO EL CARRUSEL DESBORDABA LA PAGINA. Sus tarjetas se mueven con
   translateX(±256px), que en 390 px caen muy afuera: el documento medía 587 px
   de ancho contra una ventana de 390, o sea SCROLL HORIZONTAL en toda la
   portada. Medido con el navegador; no se ve leyendo el CSS, porque cada regla
   por separado es razonable.
   Es un bug VIEJO, no de este rediseño: se midió igual en la versión anterior
   a la Tanda 3. Se arregla acá porque es exactamente el "se ve mal" que se
   estaba corrigiendo.
   `clip` y no `hidden`: no crea contenedor de scroll. Aplana el 3D, que en un
   teléfono no se apreciaba igual. */
@media (max-width: 900px) {
  .tdp-hub-carrusel { overflow-x: clip; }

  /* Y el resto del desborde lo ponen decoraciones ANIMADAS (brasas, velos):
     el ancho del documento variaba entre 503 y 535 px de una medicion a otra,
     y ningun elemento de layout se salia. Perseguir cada una es perseguir una
     animacion; lo que corresponde es recortar la pagina.
     `clip` y NO `hidden`: hidden crearia un contenedor de scroll y romperia el
     `position: sticky` de la barra. Verificado que la barra sigue pegada. */
  body { overflow-x: clip; }
}
.tdp-hub-grid { position: absolute; inset: 0; transform-style: preserve-3d; }
/* Sin flechas: la navegacion es clickear el icono lateral (el hover lo
   enciende para que se note que es clickeable). */
.tdp-hub-item:not(.frente):hover { border-color: rgba(240,200,119,.55); opacity: 1 !important; filter: brightness(1.05) !important; }
.tdp-hub-item {
  position: absolute; left: 50%; top: 50%; width: 150px; margin: -86px 0 0 -75px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 20px 8px; background: rgba(17,17,25,.9); border: 1px solid var(--tdp-borde);
  border-radius: 12px; cursor: pointer; will-change: transform;
  transition: transform .65s cubic-bezier(.25,.9,.3,1), opacity .65s ease,
              filter .65s ease, border-color .3s ease;
}
.tdp-hub-item.frente { border-color: rgba(240,200,119,.6); box-shadow: 0 10px 40px rgba(216,162,74,.22); }
/* Abanico BASE por clases de slot (patron del research freefrontend/pKWJyJ:
   5 posiciones en perspectiva + 1 oculta atras). Es el estado server-rendered:
   si el JS no corre, el abanico igual se ve (la pila apilada de la captura de
   Rudi era el CSS absoluto SIN este fallback y sin el JS). Cuando pintar()
   corre, sus estilos inline pisan estas reglas y toman el control. */
.tdp-hub-item.pos-1 { transform: translateX(-256px) translateZ(-260px) rotateY(32deg);  opacity: .56; z-index: 12; }
.tdp-hub-item.pos-2 { transform: translateX(-128px) translateZ(-130px) rotateY(16deg);  opacity: .78; z-index: 16; }
.tdp-hub-item.pos-3 { border-color: rgba(240,200,119,.6); box-shadow: 0 10px 40px rgba(216,162,74,.22); z-index: 20; }
.tdp-hub-item.pos-4 { transform: translateX(128px)  translateZ(-130px) rotateY(-16deg); opacity: .78; z-index: 16; }
.tdp-hub-item.pos-5 { transform: translateX(256px)  translateZ(-260px) rotateY(-32deg); opacity: .56; z-index: 12; }
.tdp-hub-item.pos-6,
.tdp-hub-item.pos-7 { transform: translateZ(-390px); opacity: 0; z-index: 8; }
.tdp-hub-item img { width: 56px; height: 56px; object-fit: contain; }
.tdp-hub-item span { font-size: .82rem; color: var(--tdp-texto); text-align: center; line-height: 1.25; }
/* Cuadro de descripcion del icono al frente (pedido de Rudi 2026-08-22).
   min-height fija: los textos tienen largos distintos y sin piso el bloque
   salta de alto en cada giro, empujando la seccion de abajo. */
.tdp-hub-desc {
  width: min(100%, 620px); margin: 1.4rem auto 0; padding: 14px 18px;
  background: rgba(17,17,25,.9); border: 1px solid var(--tdp-borde);
  border-radius: 12px; text-align: center; min-height: 104px;
}
.tdp-hub-desc b { display: block; color: var(--tdp-oro-claro); font-size: .95rem; margin-bottom: .35em; }
.tdp-hub-desc p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--tdp-tenue); }
.tdp-tabla { width: 100%; border-collapse: collapse; margin-top: 1rem; background: var(--tdp-panel); border-radius: 12px; overflow: hidden; }
.tdp-tabla th, .tdp-tabla td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--tdp-borde); font-size: .92rem; }
.tdp-tabla th { color: var(--tdp-tenue); font-weight: 600; }
.tdp-tabla .oro { color: var(--tdp-oro-claro); }

/* El camino (reemplaza a los 3 carteles, 2026-08-21) --------------------
   Una senda de bloquecitos que avanza hacia el horizonte: AHORA verde y
   grande, PROXIMO oro, FUTURO gris y mas chico/alto (perspectiva). La senda
   dorada de abajo se dibuja al revelarse la seccion. */
/* ⛔ ESTA GRILLA ERA DE TRES COLUMNAS Y LOS GRUPOS SON DOS desde la Tanda 2.
   Quedo asi al pasar de "ahora / proximo / futuro" a "ahora / lo que viene":
   se saco el tercer grupo y NO se toco la grilla. Resultado en produccion:
   los 19 bloques de "Ahora" exprimidos en una columna de 1.2fr sobre 3.05fr
   --altisima--, "Lo que viene" empujado abajo por el `align-items: end` que
   existia para la perspectiva de las tres, y una tercera columna VACIA.
   Era la mitad de por que la seccion no entraba en la pantalla. */
.tdp-camino {
  position: relative; display: grid; grid-template-columns: 1.55fr 1fr;
  gap: 20px 34px; margin-top: 1.6rem; align-items: start;
}
.tdp-camino::before {
  content: ""; position: absolute; left: 2%; right: 2%; bottom: -12px; height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, rgba(127,216,138,.75), rgba(240,200,119,.65) 45%, rgba(154,151,143,.35));
  transform: scaleX(0); transform-origin: left center;
  transition: transform 1.3s cubic-bezier(.2,.7,.2,1) .3s;
}
.tdp-seccion.visible .tdp-camino::before { transform: scaleX(1); }
/* La brasa que recorre la senda mientras se dibuja. */
.tdp-camino::after {
  content: ""; position: absolute; bottom: -16px; left: 2%; width: 11px; height: 11px;
  border-radius: 50%; opacity: 0; pointer-events: none;
  background: radial-gradient(circle, #ffe9a8, rgba(240,200,119,0) 70%);
}
@media (prefers-reduced-motion: no-preference) {
  .tdp-seccion.visible .tdp-camino::after { animation: tdp-brasa-senda 1.6s ease-in-out .3s both; }
  @keyframes tdp-brasa-senda {
    0% { opacity: 0; left: 2%; } 12% { opacity: 1; }
    88% { opacity: 1; } 100% { opacity: 0; left: 96%; }
  }
}
/* Los bloques se COLOCAN de a uno a lo largo del camino (landing.js reparte
   los delays en orden de senda: ahora -> proximo -> futuro). */
.tdp-seccion:not(.visible) .tdp-bloque { opacity: 0; transform: translateY(12px) scale(.6); }
.tdp-seccion .tdp-bloque { transition: opacity .4s ease, transform .5s cubic-bezier(.34,1.5,.5,1); }
.tdp-seccion.visible .tdp-bloque { opacity: 1; transform: none; }

/* ── Roadmap SCROLL-DRIVEN ────────────────────────────────────────────────
   El camino se dibuja atado a la posicion real de la seccion en el viewport.
   Se intento con animation-timeline: view() (CSS puro) y la ViewTimeline
   quedaba INACTIVA en Chrome (currentTime null con todo bien cableado), asi
   que el reloj lo lleva landing.js: en cada frame de scroll setea --p (0..1,
   progreso de entrada del camino) y estila los bloques. Aca solo la senda y
   la brasa consumen --p; los bloques van inline desde el JS. Sin JS o con
   reduced-motion: queda el reveal one-shot de arriba. */
.tdp-camino[style*="--p"]::before {
  transition: none;
  transform: scaleX(min(max(calc((var(--p) - .15) / .8), 0), 1));
}
.tdp-camino[style*="--p"]::after {
  animation: none;
  opacity: calc(min(max(calc((var(--p) - .15) / .1), 0), 1) * min(max(calc((.95 - var(--p)) / .1), 0), 1));
  left: calc(2% + min(max(calc((var(--p) - .15) / .8), 0), 1) * 94%);
}

/* Banner animado de "De aprendiz a leyenda": webp que loopea, marco dorado. */
.tdp-forja-banner {
  display: block; width: 100%; max-width: 720px; height: auto;
  margin: 0 auto 1.2rem; border-radius: 12px;
  border: 1px solid var(--tdp-borde); box-shadow: 0 10px 40px rgba(0,0,0,.5);
}

/* Chip de clase del Rey: adaptativo -- el aura cuenta que ES por su clase.
   arcana = magos (pulso frio), comando = lords (pulso rojo-oro),
   bosque = elfas (verde), acero = el resto (plata, sin arte todavia). */
.tdp-rey-clase {
  display: inline-flex; align-items: center; gap: 10px; margin: .2em 0 .8em;
  padding: 7px 14px; border-radius: 999px; font-size: .88rem;
  background: rgba(17,17,25,.8); border: 1px solid rgba(200,110,255,.4);
  color: var(--tdp-texto);
}
.tdp-rey-clase img { border-radius: 50%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .tdp-rey-clase.arcana  { animation: tdp-aura-arcana 3.5s ease-in-out infinite; }
  .tdp-rey-clase.comando { animation: tdp-aura-comando 3.5s ease-in-out infinite; }
  .tdp-rey-clase.bosque  { animation: tdp-aura-bosque 3.5s ease-in-out infinite; }
  @keyframes tdp-aura-arcana  { 50% { box-shadow: 0 0 18px rgba(120,160,255,.55), 0 0 36px rgba(200,110,255,.3); } }
  @keyframes tdp-aura-comando { 50% { box-shadow: 0 0 18px rgba(255,140,80,.5), 0 0 36px rgba(240,200,119,.3); } }
  @keyframes tdp-aura-bosque  { 50% { box-shadow: 0 0 18px rgba(127,216,138,.5); } }
}
.tdp-etapa-grupo h3 {
  margin: 0 0 .6em; letter-spacing: 1.5px; font-size: .8rem; text-transform: uppercase;
}
.tdp-etapa-grupo .bloques { display: flex; flex-wrap: wrap; gap: 8px; }
.tdp-bloque {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 11px; border-radius: 9px;
  background: var(--tdp-panel); border: 1px solid var(--tdp-borde);
  font-size: .84rem; line-height: 1.3; color: var(--tdp-texto);
}
/* La gema de cada bloque: cuadradito rotado, el lenguaje de joya de MU. */
.tdp-bloque::before {
  content: ""; width: 8px; height: 8px; flex: 0 0 8px;
  transform: rotate(45deg); border-radius: 2px;
}
.tdp-etapa-grupo.ahora  h3 { color: #7fd88a; }
.tdp-etapa-grupo.ahora  .tdp-bloque { border-color: rgba(127,216,138,.35); }
.tdp-etapa-grupo.ahora  .tdp-bloque::before { background: #7fd88a; box-shadow: 0 0 8px rgba(127,216,138,.7); }
/* Dos grupos desde el 2026-09-21 (antes tres: ahora / proximo / futuro).
   Rudi: "no precisamos 3 divisiones hoy por hoy". El grupo .futuro ya no se
   emite, asi que sus reglas se borraron en vez de quedar como CSS muerto.
   .proximo es ahora el ULTIMO, por eso se queda con el margen de abajo que
   antes llevaba .futuro. */
.tdp-etapa-grupo.proximo h3 { color: var(--tdp-oro-claro); }
.tdp-etapa-grupo.proximo .tdp-bloque { border-color: rgba(240,200,119,.35); font-size: .78rem; padding: 6px 10px; }
.tdp-etapa-grupo.proximo .tdp-bloque::before { background: var(--tdp-oro-claro); box-shadow: 0 0 8px rgba(240,200,119,.7); width: 7px; height: 7px; flex-basis: 7px; }
.tdp-etapa-grupo.proximo .bloques { margin-bottom: 34px; }
.tdp-bloque small { display: block; font-size: .85em; color: var(--tdp-tenue); }
@media (max-width: 760px) {
  .tdp-camino { grid-template-columns: 1fr; align-items: start; }
  .tdp-camino::before { display: none; }
  .tdp-etapa-grupo.proximo .bloques { margin-bottom: 0; }
}

/* Barra de progreso / "HUD" a la derecha --------------------------------- */
.tdp-meter {
  position: fixed; right: 16px; top: 50%; transform: translateY(-50%);
  z-index: 40; display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}
.tdp-meter .etapa { font-size: .72rem; letter-spacing: 1.5px; color: var(--tdp-oro-claro); text-transform: uppercase; text-align: right; }
.tdp-meter .fase  { font-size: .75rem; color: var(--tdp-tenue); }
.tdp-meter .barra { width: 4px; height: 42vh; background: rgba(255,255,255,.1); border-radius: 4px; overflow: hidden; }
.tdp-meter .relleno { width: 100%; height: 0%; background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-naranja)); }

/* El rail flotante SE RETIRO del sitio el 2026-09-21: su propio CSS lo
   escondia por debajo de 1460 px, asi que en telefono y en notebook chica las
   herramientas no existian. Viven en /herramientas. Ver nav_principal(). */

/* Módulo de registro (reusa el flujo real de /registro) ------------------ */
.tdp-signup { max-width: 460px; margin: 0 auto; background: var(--tdp-panel); border: 1px solid var(--tdp-borde); border-radius: 16px; padding: 26px; }
.tdp-signup label { display: block; margin: 0 0 14px; font-size: .9rem; color: var(--tdp-tenue); }
.tdp-signup .tdp-av { display: block; margin-top: 5px; font-size: .74rem; min-height: 1em; color: var(--tenue); }
.tdp-signup { --campo-fondo: #0c0c12; }
.tdp-signup input { display: block; width: 100%; margin-top: 5px; padding: 11px 12px; border-radius: 8px; border: 1px solid var(--tdp-borde); background: var(--campo-fondo); color: var(--tdp-texto); font-size: 1rem; }
/* El formulario de alta de la portada: es LA forma del sitio. Sin esto, al que
   vuelve con datos guardados en Chrome le aparecen cajas blancas justo acá. */
.tdp-signup input:-webkit-autofill,
.tdp-signup input:-webkit-autofill:hover,
.tdp-signup input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--campo-fondo) inset;
  -webkit-text-fill-color: var(--tdp-texto);
  caret-color: var(--tdp-texto);
  transition: background-color 9999s ease-out 0s;
}
.tdp-signup button { width: 100%; padding: 14px; border: 0; border-radius: 10px; font-weight: 800; font-size: 1.05rem; cursor: pointer; background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-oro)); color: var(--tdp-negro); }
.tdp-signup .exclusivo { text-align: center; color: var(--tdp-oro-claro); font-weight: 700; margin-bottom: .4rem; letter-spacing: .5px; }

/* Transición "Ingresar": el menú se desvanece mientras el overlay del clip
   aparece por crossfade (sin parpadeo negro; el clip va precargado). Al terminar
   el primer pase, el login aparece ENCIMA del último frame (sin recargar). */
.tdp-ingresar {
  position: fixed; inset: 0; z-index: 200; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;   /* inactivo: NO captura clicks (fix menú muerto) */
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.tdp-ingresar.activo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease, visibility 0s; }
.tdp-ingresar video { width: 100%; height: 100%; object-fit: cover; }

/* El chrome de la landing se desvanece al entrar al clip ("se aparta") */
body.tdp-ingresando > header,
body.tdp-ingresando .tdp-meter,
body.tdp-ingresando .tdp-scroll,
body.tdp-ingresando .tdp-velo {
  opacity: 0; pointer-events: none; transition: opacity .45s ease;
}

/* Terminado el crossfade, la landing de atras deja de PINTARSE (landing.js pone
   .tdp-escena-off a los 520 ms). Sin esto el compositor seguia animando, DEBAJO
   de un video a pantalla completa: el canvas del scrubber, 18 brasas, dos
   gradientes de 82vmax y el carrusel del hub girando solo — y el clip iba a
   tirones. `visibility:hidden` corta layout/paint y frena las animaciones CSS
   de adentro; los overlays son hermanos, asi que no los toca. */
body.tdp-escena-off .tdp-escena,
body.tdp-escena-off .tdp-velo,
body.tdp-escena-off .tdp-fx,
body.tdp-escena-off .tdp-hero,
body.tdp-escena-off .tdp-seccion,
body.tdp-escena-off .tdp-meter,
body.tdp-escena-off > header,
body.tdp-escena-off > footer { visibility: hidden; }

/* Volver al hub del Dark Knight — disponible durante el clip y las credenciales */
.tdp-ingresar-volver {
  position: absolute; top: 18px; left: 18px; z-index: 202;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.42);
  color: #fff; font-weight: 600; font-size: .85rem;
  opacity: 0; transition: opacity .5s ease .3s;
}
/* El blur del boton se prende RECIEN al congelar: un backdrop-filter encima de
   un video reproduciendo obliga a releer y desenfocar el fondo en CADA frame. */
.tdp-ingresar.con-login .tdp-ingresar-volver { backdrop-filter: blur(4px); }
.tdp-ingresar.activo .tdp-ingresar-volver { opacity: 1; }
.tdp-ingresar-volver:hover { background: rgba(0,0,0,.72); border-color: var(--tdp-oro); }

/* FX ambiente sobre el frame congelado (aparecen con el login). Dan dinamismo
   sin loopear el video: resplandor dorado que respira, barrido de luz lento y
   brasas que suben dentro de la luz. */
.tdp-ingresar-fx {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .8s ease;
}
.tdp-ingresar.con-login .tdp-ingresar-fx { opacity: 1; }
.tdp-ingresar-fx::before {   /* resplandor otoñal brillante que respira, sobre la Muse Elf */
  content: ""; position: absolute; left: 50%; top: 52%; width: 72vmax; height: 72vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,138,42,.30), rgba(255,175,90,.20) 26%, rgba(216,162,74,.08) 52%, transparent 66%);
  animation: tdp-fx-breath 6s ease-in-out infinite;
}
.tdp-ingresar-fx::after {    /* barrido de luz (god-ray) cálido y lento */
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,200,120,.18) 50%, transparent 60%);
  animation: tdp-fx-sweep 9s ease-in-out infinite;
}
.tdp-ingresar-fx .mote {
  position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,120,.95), rgba(216,162,74,0) 70%);
  filter: blur(.5px); opacity: 0; animation: tdp-fx-rise linear infinite;
}
/* matices otoñales: algunas brasas naranja y otras rojo-naranja */
.tdp-ingresar-fx .mote:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.95), rgba(255,138,42,0) 70%); }
.tdp-ingresar-fx .mote:nth-child(4n) { background: radial-gradient(circle, rgba(255,110,60,.92), rgba(255,110,60,0) 70%); }
.tdp-ingresar-fx .mote:nth-child(1)  { left: 30%; animation-duration: 7.5s; animation-delay: 0s; }
.tdp-ingresar-fx .mote:nth-child(2)  { left: 40%; animation-duration: 9s;   animation-delay: 1.2s; width: 3px; height: 3px; }
.tdp-ingresar-fx .mote:nth-child(3)  { left: 48%; animation-duration: 8s;   animation-delay: 2.4s; }
.tdp-ingresar-fx .mote:nth-child(4)  { left: 56%; animation-duration: 10s;  animation-delay: .6s;  width: 5px; height: 5px; }
.tdp-ingresar-fx .mote:nth-child(5)  { left: 64%; animation-duration: 8.5s; animation-delay: 3s;   width: 3px; height: 3px; }
.tdp-ingresar-fx .mote:nth-child(6)  { left: 36%; animation-duration: 9.5s; animation-delay: 4s; }
.tdp-ingresar-fx .mote:nth-child(7)  { left: 70%; animation-duration: 8.2s; animation-delay: 1.8s; width: 5px; height: 5px; }
.tdp-ingresar-fx .mote:nth-child(8)  { left: 26%; animation-duration: 10.5s; animation-delay: 5s; width: 3px; height: 3px; }
.tdp-ingresar-fx .mote:nth-child(9)  { left: 52%; animation-duration: 7.8s; animation-delay: 6s; }
.tdp-ingresar-fx .mote:nth-child(10) { left: 60%; animation-duration: 9.2s; animation-delay: 2.6s; width: 5px; height: 5px; }
/* Los @keyframes tdp-fx-breath/sweep/rise viven en css/fx.css (modulo de
   ambiente, cargado por cabecera()). Los valores que antes estaban clavados
   aca (piso .55, pico 1.08, brasa -88vh/14px) ahora son variables que fx.css
   declara para .tdp-fx y .tdp-ingresar-fx: el movimiento se ve igual. */
@media (prefers-reduced-motion: reduce) {
  .tdp-ingresar-fx::before, .tdp-ingresar-fx::after, .tdp-ingresar-fx .mote { animation: none; }
}

/* Ambiente de la LANDING: mismo lenguaje (brasas + luz + barrido) pero TENUE,
   fijo sobre la escena y DETRÁS del texto (z-index 1 < contenido z-index 2) para
   no comprometer la lectura. Comparte los @keyframes del overlay. */
.tdp-fx { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.tdp-fx::before {   /* resplandor cálido tenue que respira, bajo */
  content: ""; position: absolute; left: 50%; top: 58%; width: 82vmax; height: 82vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,138,42,.06), rgba(216,162,74,.03) 40%, transparent 64%);
  animation: tdp-fx-breath 8s ease-in-out infinite;
}
.tdp-fx::after {    /* barrido de luz muy tenue, muy lento */
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 44%, rgba(240,200,119,.05) 50%, transparent 56%);
  animation: tdp-fx-sweep 14s ease-in-out infinite;
}
.tdp-fx .mote {
  position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,200,119,.7), rgba(216,162,74,0) 70%);
  filter: blur(.6px); opacity: 0; animation: tdp-fx-rise linear infinite;
}
.tdp-fx .mote:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.66), rgba(255,138,42,0) 70%); }
.tdp-fx .mote:nth-child(1)  { left: 8%;  animation-duration: 12s; animation-delay: 0s; }
.tdp-fx .mote:nth-child(2)  { left: 20%; animation-duration: 15s; animation-delay: 2s;  width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(3)  { left: 33%; animation-duration: 13s; animation-delay: 5s; }
.tdp-fx .mote:nth-child(4)  { left: 46%; animation-duration: 16s; animation-delay: 1s;  width: 5px; height: 5px; }
.tdp-fx .mote:nth-child(5)  { left: 58%; animation-duration: 14s; animation-delay: 7s;  width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(6)  { left: 70%; animation-duration: 15s; animation-delay: 3s; }
.tdp-fx .mote:nth-child(7)  { left: 82%; animation-duration: 13s; animation-delay: 9s; }
.tdp-fx .mote:nth-child(8)  { left: 90%; animation-duration: 17s; animation-delay: 4s;  width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(9)  { left: 27%; animation-duration: 16s; animation-delay: 11s; }
.tdp-fx .mote:nth-child(10) { left: 64%; animation-duration: 14s; animation-delay: 6s;  width: 5px; height: 5px; }
/* Refuerzo de brasas (2026-08-21, pedido "mas particulas"): 8 mas, algunas
   rojas, repartidas para llenar los huecos. Mismo keyframe, cero costo extra. */
.tdp-fx .mote:nth-child(5n) { background: radial-gradient(circle, rgba(255,110,60,.6), rgba(255,110,60,0) 70%); }
.tdp-fx .mote:nth-child(11) { left: 14%; animation-duration: 11s; animation-delay: 1.5s; width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(12) { left: 39%; animation-duration: 17s; animation-delay: 8s; }
.tdp-fx .mote:nth-child(13) { left: 52%; animation-duration: 12s; animation-delay: 3.5s; width: 5px; height: 5px; }
.tdp-fx .mote:nth-child(14) { left: 75%; animation-duration: 15s; animation-delay: 10s; width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(15) { left: 95%; animation-duration: 13s; animation-delay: 5.5s; }
.tdp-fx .mote:nth-child(16) { left: 4%;  animation-duration: 16s; animation-delay: 12s; }
.tdp-fx .mote:nth-child(17) { left: 43%; animation-duration: 12.5s; animation-delay: 7.2s; width: 3px; height: 3px; }
.tdp-fx .mote:nth-child(18) { left: 86%; animation-duration: 14.5s; animation-delay: 2.8s; width: 5px; height: 5px; }
@media (prefers-reduced-motion: reduce) {
  .tdp-fx::before, .tdp-fx::after, .tdp-fx .mote { animation: none; }
}
@media (max-width: 900px) { .tdp-fx { display: none; } }  /* móvil: sin costo extra */

/* Capa del login sobre el video: oculta hasta que el clip termina (.con-login) */
.tdp-ingresar-login {
  position: absolute; inset: 0; z-index: 201;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  opacity: 0; visibility: hidden; transition: opacity .6s ease;
  background: radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,.22), rgba(0,0,0,.70));
}
.tdp-ingresar.con-login .tdp-ingresar-login { opacity: 1; visibility: visible; }

.tdp-login-card {
  width: 100%; max-width: 380px;
  background: rgba(12,12,18,.82); backdrop-filter: blur(10px);
  border: 1px solid var(--tdp-oro); border-radius: 16px; padding: 28px 26px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 42px rgba(216,162,74,.16);
  transform: translateY(16px); transition: transform .6s ease;
}
.tdp-ingresar.con-login .tdp-login-card { transform: none; }
.tdp-login-card h2 { margin: 0 0 .2em; font-size: 1.5rem; color: var(--tdp-oro-claro); letter-spacing: -.3px; }
.tdp-login-sub { margin: 0 0 1.1rem; font-size: .88rem; color: var(--tdp-tenue); }
.tdp-login-card label { display: block; margin: 0 0 13px; font-size: .88rem; color: var(--tdp-tenue); }
/* --campo-fondo: una sola fuente para el fondo del campo Y para el relleno del
   autofill de abajo, que tienen que ser el MISMO color o se ve el parche. */
.tdp-login-card { --campo-fondo: #0c0c12; }
.tdp-login-card input {
  display: block; width: 100%; margin-top: 5px; padding: 11px 12px;
  border-radius: 8px; border: 1px solid var(--tdp-borde); background: var(--campo-fondo);
  color: var(--tdp-texto); font-size: 1rem;
}
.tdp-login-card input:focus { outline: none; border-color: var(--tdp-oro); box-shadow: 0 0 0 3px rgba(216,162,74,.18); }
/* Chrome pinta el autofill con su propio amarillo/blanco y tapa el fondo
   oscuro. Esta tarjeta es el overlay de "Ingresar" de la portada: sin esto, al
   que vuelve con la contraseña guardada le aparecen dos cajas blancas sobre la
   tarjeta negra. Mismo arreglo que estilo.css .formulario input. */
.tdp-login-card input:-webkit-autofill,
.tdp-login-card input:-webkit-autofill:hover,
.tdp-login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--campo-fondo) inset;
  -webkit-text-fill-color: var(--tdp-texto);
  caret-color: var(--tdp-texto);
  transition: background-color 9999s ease-out 0s;
}
.tdp-login-card button {
  width: 100%; margin-top: 4px; padding: 13px; border: 0; border-radius: 10px;
  font-weight: 800; font-size: 1.03rem; cursor: pointer;
  background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-oro)); color: var(--tdp-negro);
}
.tdp-login-card button:hover { filter: brightness(1.05); }
.tdp-login-links { display: flex; justify-content: space-between; gap: 10px; margin-top: 14px; }
.tdp-login-links a { color: var(--tdp-oro); font-size: .8rem; text-decoration: none; }
.tdp-login-links a:hover { color: var(--tdp-oro-claro); text-decoration: underline; }

/* Responsive: en móvil se apagan rail y meter, el scrub cae a fallback --- */
@media (max-width: 900px) {
  .tdp-meter { display: none; }
  .tdp-seccion { padding: 12vh 18px; }
  /* Banner del hero: en móvil quedan solo el lockup y el trono */
  .tdp-banner { display: block; }
  .tdp-banner-retrato { display: none; }
  .tdp-banner-lockup { min-height: 0; padding: 12px; }
  .tdp-banner-lockup .trono-fondo { height: 300px; }
  .tdp-banner-lockup .escudo { width: 92px; height: 92px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdp-seccion { transition: none; opacity: 1; transform: none; }
  .tdp-hint { animation: none; }
}

/* ── Overlay de RANKINGS ───────────────────────────────────────────────────
   Mismo lenguaje que Ingresar: crossfade de entrada (el chrome se desvanece por
   body.tdp-ingresando), el clip corre y congela, cross-dissolve al still 2k y las
   tablas EN VIVO aparecen sobre el piso limpio. FX autumn como el overlay Elf. */
.tdp-rankings {
  position: fixed; inset: 0; z-index: 200; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;   /* inactivo: NO captura clicks */
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.tdp-rankings.activo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease, visibility 0s; }
.tdp-rankings video { width: 100%; height: 100%; object-fit: cover; }
/* Se congela en el último frame del PROPIO video (sin cross-dissolve a un still:
   el still 2k no calzaba pixel-perfect y "saltaba"). El piso limpio queda igual. */

.tdp-rankings-volver {
  position: absolute; top: 18px; left: 18px; z-index: 203; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.42);
  color: #fff; font-weight: 600; font-size: .85rem;
  opacity: 0; transition: opacity .5s ease .3s;
}
/* El blur del boton se prende RECIEN al congelar: un backdrop-filter encima de
   un video reproduciendo obliga a releer y desenfocar el fondo en CADA frame. */
.tdp-rankings.con-panel .tdp-rankings-volver { backdrop-filter: blur(4px); }
.tdp-rankings.activo .tdp-rankings-volver { opacity: 1; }
.tdp-rankings-volver:hover { background: rgba(0,0,0,.72); border-color: var(--tdp-oro); }

/* FX autumn sobre el frame congelado (aparecen con el panel); comparten keyframes */
.tdp-rankings-fx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .8s ease;
}
.tdp-rankings.con-panel .tdp-rankings-fx { opacity: 1; }
.tdp-rankings-fx::before {
  content: ""; position: absolute; left: 50%; top: 42%; width: 72vmax; height: 72vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,138,42,.24), rgba(255,175,90,.16) 28%, rgba(216,162,74,.06) 54%, transparent 66%);
  animation: tdp-fx-breath 6s ease-in-out infinite;
}
.tdp-rankings-fx::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 40%, rgba(255,200,120,.14) 50%, transparent 60%);
  animation: tdp-fx-sweep 9s ease-in-out infinite;
}
.tdp-rankings-fx .mote {
  position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,120,.9), rgba(216,162,74,0) 70%);
  filter: blur(.5px); opacity: 0; animation: tdp-fx-rise linear infinite;
}
.tdp-rankings-fx .mote:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.9), rgba(255,138,42,0) 70%); }
.tdp-rankings-fx .mote:nth-child(4n) { background: radial-gradient(circle, rgba(255,110,60,.88), rgba(255,110,60,0) 70%); }
.tdp-rankings-fx .mote:nth-child(1)  { left: 12%; animation-duration: 8s;    animation-delay: 0s; }
.tdp-rankings-fx .mote:nth-child(2)  { left: 24%; animation-duration: 9.5s;  animation-delay: 1.4s; width: 3px; height: 3px; }
.tdp-rankings-fx .mote:nth-child(3)  { left: 36%; animation-duration: 8.5s;  animation-delay: 2.6s; }
.tdp-rankings-fx .mote:nth-child(4)  { left: 48%; animation-duration: 10s;   animation-delay: .7s;  width: 5px; height: 5px; }
.tdp-rankings-fx .mote:nth-child(5)  { left: 60%; animation-duration: 9s;    animation-delay: 3.2s; width: 3px; height: 3px; }
.tdp-rankings-fx .mote:nth-child(6)  { left: 72%; animation-duration: 8.8s;  animation-delay: 4.4s; }
.tdp-rankings-fx .mote:nth-child(7)  { left: 84%; animation-duration: 9.2s;  animation-delay: 1.9s; width: 5px; height: 5px; }
.tdp-rankings-fx .mote:nth-child(8)  { left: 30%; animation-duration: 10.5s; animation-delay: 5s;   width: 3px; height: 3px; }
.tdp-rankings-fx .mote:nth-child(9)  { left: 54%; animation-duration: 8.2s;  animation-delay: 6s; }
.tdp-rankings-fx .mote:nth-child(10) { left: 66%; animation-duration: 9.6s;  animation-delay: 2.2s; width: 5px; height: 5px; }

/* Panel de tablas: sobre el piso limpio (abajo), por encima de still + FX */
.tdp-rankings-panel {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  /* 2026-08-21: centrado vertical. Pegado abajo dejaba un hueco enorme
     arriba una vez que el panel crecio con el Salon. */
  display: flex; align-items: center; justify-content: center; padding: 3vh 18px;
  overflow-y: auto;
  opacity: 0; transition: opacity .6s ease .15s;
}
.tdp-rankings.con-panel .tdp-rankings-panel { opacity: 1; pointer-events: auto; }
.tdp-rankings-card {
  /* 2026-08-21: de 720 a 1240. Con el Salon adentro, 720 dejaba media
     pantalla vacia a cada lado y las tablas apretadas. */
  width: 100%; max-width: 1240px;
  background: rgba(10,10,14,.74); backdrop-filter: blur(10px);
  border: 1px solid var(--tdp-oro); border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 42px rgba(216,162,74,.14);
  transform: translateY(18px); transition: transform .6s ease;
}
.tdp-rankings.con-panel .tdp-rankings-card { transform: none; }
.tdp-rankings-card > h2 {
  margin: 0 0 .35rem; font-size: 1.25rem; color: var(--tdp-oro-claro); text-align: center; letter-spacing: -.2px;
}
/* El violeta es el color del REY COMO JUGADOR (su nombre), no del metal de la
   corona: la corona va en oro. Antes acá había un #c9a0ff clavado a mano, un
   segundo violeta que no era el de la paleta y que violaba la regla de que
   ningún hex nuevo vive fuera de base.css. */
.tdp-rankings-card > h2 .rey { color: var(--c-violeta); font-weight: 800; }
/* Cuánto hace que sostiene la corona: el mismo dato que /rankings, para que el
   overlay y la página completa cuenten la misma historia. */
.tdp-rankings-reinado {
  margin: 0 0 .8rem; text-align: center; font-size: .74rem; color: var(--tdp-texto);
  text-transform: uppercase; letter-spacing: 1.4px;
}
.tdp-rankings-reinado b {
  color: var(--tdp-oro-claro); font-variant-numeric: tabular-nums;
  text-transform: none; letter-spacing: 0; font-size: .95rem;
}
.tdp-rankings-cols .col h3 {
  margin: 0 0 .4rem; font-size: .72rem; letter-spacing: 1px; text-transform: uppercase; color: var(--tdp-tenue);
}
.tdp-rankings-card .tdp-tabla { margin-top: 0; }
.tdp-rankings-card .tdp-tabla th, .tdp-rankings-card .tdp-tabla td { padding: 6px 9px; font-size: .82rem; }
.tdp-rankings-full { display: inline-block; margin-top: 12px; color: var(--tdp-oro); text-decoration: none; font-size: .85rem; }
.tdp-rankings-full:hover { color: var(--tdp-oro-claro); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
  .tdp-rankings-fx::before, .tdp-rankings-fx::after, .tdp-rankings-fx .mote { animation: none; }
}
@media (max-width: 720px) {
  /* D17: aca habia otro `.tdp-rankings-cols` que tampoco llegaba a aplicar:
     la declaracion de una columna vive mas abajo, fuera de toda media query,
     asi que ganaba igual. El 1fr de movil lo pone la @media de 720 de abajo. */
  .tdp-rankings-card { max-height: 78vh; overflow-y: auto; }
}

/* ── Overlay "El origen" ─────────────────────────────────────────────────────
   Mismo shell que Ingresar/Rankings; la tarjeta de descarga se apoya a la
   DERECHA porque el freeze-frame del aprendiz deja ese lado limpio. El clip y
   el poster son placeholder hasta bajar los assets (ver LORE_personajes_tdp.md). */
.tdp-origen {
  position: fixed; inset: 0; z-index: 200; background: #000;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .5s ease, visibility 0s linear .5s;
}
.tdp-origen.activo { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .5s ease, visibility 0s; }
.tdp-origen video { width: 100%; height: 100%; object-fit: cover; }
.tdp-origen-volver {
  position: absolute; top: 18px; left: 18px; z-index: 203; cursor: pointer;
  padding: 9px 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28); background: rgba(0,0,0,.42);
  color: #fff; font-weight: 600; font-size: .85rem;
  opacity: 0; transition: opacity .5s ease .3s;
}
/* El blur del boton se prende RECIEN al congelar: un backdrop-filter encima de
   un video reproduciendo obliga a releer y desenfocar el fondo en CADA frame. */
.tdp-origen.con-panel .tdp-origen-volver { backdrop-filter: blur(4px); }
.tdp-origen.activo .tdp-origen-volver { opacity: 1; }
.tdp-origen-volver:hover { background: rgba(0,0,0,.72); border-color: var(--tdp-oro); }
.tdp-origen-fx {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden;
  opacity: 0; transition: opacity .8s ease;
}
.tdp-origen.con-panel .tdp-origen-fx { opacity: 1; }
.tdp-origen-fx::before {
  content: ""; position: absolute; left: 40%; top: 46%; width: 66vmax; height: 66vmax;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,138,42,.20), rgba(216,162,74,.10) 40%, transparent 64%);
  animation: tdp-fx-breath 7s ease-in-out infinite;
}
.tdp-origen-fx::after {
  content: ""; position: absolute; inset: -20%;
  background: linear-gradient(115deg, transparent 42%, rgba(255,200,120,.12) 50%, transparent 58%);
  animation: tdp-fx-sweep 11s ease-in-out infinite;
}
.tdp-origen-fx .mote {
  position: absolute; bottom: -8px; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,200,120,.9), rgba(216,162,74,0) 70%);
  filter: blur(.5px); opacity: 0; animation: tdp-fx-rise linear infinite;
}
.tdp-origen-fx .mote:nth-child(3n) { background: radial-gradient(circle, rgba(255,138,42,.9), rgba(255,138,42,0) 70%); }
.tdp-origen-fx .mote:nth-child(1)  { left: 10%; animation-duration: 9s;    animation-delay: 0s; }
.tdp-origen-fx .mote:nth-child(2)  { left: 20%; animation-duration: 11s;   animation-delay: 2s;   width: 3px; height: 3px; }
.tdp-origen-fx .mote:nth-child(3)  { left: 30%; animation-duration: 10s;   animation-delay: 4s; }
.tdp-origen-fx .mote:nth-child(4)  { left: 16%; animation-duration: 12s;   animation-delay: 1s;   width: 5px; height: 5px; }
.tdp-origen-fx .mote:nth-child(5)  { left: 26%; animation-duration: 9.5s;  animation-delay: 6s;   width: 3px; height: 3px; }
.tdp-origen-fx .mote:nth-child(6)  { left: 36%; animation-duration: 10.5s; animation-delay: 3s; }
.tdp-origen-fx .mote:nth-child(7)  { left: 8%;  animation-duration: 9.2s;  animation-delay: 5s;   width: 5px; height: 5px; }
.tdp-origen-fx .mote:nth-child(8)  { left: 22%; animation-duration: 11.5s; animation-delay: 7s;   width: 3px; height: 3px; }
.tdp-origen-fx .mote:nth-child(9)  { left: 32%; animation-duration: 10.2s; animation-delay: 8s; }
.tdp-origen-fx .mote:nth-child(10) { left: 14%; animation-duration: 9.8s;  animation-delay: 2.5s; width: 5px; height: 5px; }
/* La tarjeta se apoya a la DERECHA (el frame deja ese lado limpio). */
.tdp-origen-panel {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  display: flex; align-items: center; justify-content: flex-end; padding: 5vh 5vw;
  opacity: 0; transition: opacity .6s ease .15s;
}
.tdp-origen.con-panel .tdp-origen-panel { opacity: 1; pointer-events: auto; }
.tdp-origen-card {
  width: 100%; max-width: 420px;
  background: rgba(10,10,14,.74); backdrop-filter: blur(10px);
  border: 1px solid var(--tdp-oro); border-radius: 16px; padding: 22px 24px;
  box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 42px rgba(216,162,74,.14);
  transform: translateY(18px); transition: transform .6s ease;
}
.tdp-origen.con-panel .tdp-origen-card { transform: none; }
.tdp-origen-card h2 { margin: 0 0 .5rem; font-size: 1.5rem; color: var(--tdp-oro-claro); }
.tdp-origen-lede { margin: 0 0 1rem; font-size: .92rem; color: var(--tdp-texto); line-height: 1.4; }
.tdp-origen-pasos { margin: 0 0 1.2rem 1.1rem; padding: 0; color: var(--tdp-texto); font-size: .9rem; line-height: 1.5; }
.tdp-origen-pasos li { margin-bottom: .3rem; }
.tdp-origen-cta { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 640px) {
  .tdp-origen-panel { justify-content: center; align-items: flex-end; padding: 0 16px 6vh; }
  .tdp-origen-card { max-width: 560px; }
}
@media (prefers-reduced-motion: reduce) {
  .tdp-origen-fx::before, .tdp-origen-fx::after, .tdp-origen-fx .mote { animation: none; }
}

/* Sección "Los jefes de la Arena" (Claudio + Kundun juntos, 2026-08-21).
   Antes eran DOS secciones .tdp-claudio de 100vh cada una, centradas
   verticalmente (el título quedaba a mitad de pantalla) con un ☠ suelto de
   separador — pedido de Rudi: juntarlos, arrancar arriba, mejor arte. La
   sección NO se centra: arranca cerca del top con su propio padding. */
.tdp-jefes { justify-content: flex-start; text-align: left; padding-top: 9vh; }
.tdp-jefes h2 .emblema { font-size: 1.1em; vertical-align: -.12em; margin-right: .16em; }

/* El coliseo full-bleed se saco (Rudi 2026-08-22: tapaba la pelicula de
   BkPino que corre detras y "le sacaba la gracia"). El arte de la arena vive
   ahora en su propia card, y el escudo generico de legibilidad
   (.tdp-seccion::before) vuelve a operar en esta seccion. */
.tdp-jefes-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px; margin-top: 1.4rem;
}
/* Los duelistas entran a la arena: Claudio desde la IZQUIERDA, Kundun desde
   la DERECHA, y se encuentran al centro cuando la seccion se revela. Acotado
   a :not(.visible) (la leccion de las cards clavadas). */
@media (prefers-reduced-motion: no-preference) {
  .tdp-jefes .tdp-jefe-card {
    transition: transform 1s cubic-bezier(.25,1.2,.4,1), opacity .8s ease;
  }
  .tdp-jefes:not(.visible) .tdp-jefe-card:first-child { transform: translateX(-58vw); opacity: 0; }
  .tdp-jefes:not(.visible) .tdp-jefe-card:last-child  { transform: translateX(58vw);  opacity: 0; }
  .tdp-jefes.visible .tdp-jefe-card { transform: none; opacity: 1; }
  .tdp-jefes.visible .tdp-jefe-card:last-child { transition-delay: .12s; }
}
/* Cada card lleva su propio fondo por variable (--jefe-fondo, puesta inline
   con tdp_asset() para el cache-busting real) y un degradado MÁS suave que el
   de antes: antes el velo llegaba a .93 de opacidad tapando media imagen; acá
   arranca transparente y sólo oscurece el tercio de abajo, donde vive el
   texto — así se ve más el arte, no menos (pedido explícito: "mejores
   assets con transparencias"). */
.tdp-jefe-card {
  position: relative; border-radius: 14px; overflow: hidden;
  min-height: 280px; display: flex; align-items: flex-end;
  border: 1px solid var(--tdp-borde);
}
.tdp-jefe-card .fondo {
  position: absolute; inset: 0;
  background-image: var(--jefe-fondo); background-size: cover; background-position: center 18%;
  transform: scale(1.02); transition: transform 1.2s ease;
}
.tdp-jefe-card:hover .fondo { transform: scale(1.06); }
.tdp-jefe-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,12,0) 32%, rgba(10,10,12,.6) 72%, rgba(10,10,12,.92) 100%);
}
.tdp-jefe-card .cont { position: relative; z-index: 2; padding: 20px; width: 100%; box-sizing: border-box; }
.tdp-jefe-card h3 { margin: 0 0 .4em; color: var(--tdp-oro-claro); font-size: 1.15rem; font-family: var(--titulos, Cinzel, serif); }
.tdp-jefe-card .boss-timer { margin: 0; font-size: .95rem; }
.tdp-jefe-lede { margin: .5em 0 0; font-size: .88rem; color: var(--tdp-texto); }
.tdp-jefe-datos {
  margin: .7em 0 0; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--tdp-tenue);
}

/* Card de mecánica de Arena: el espacio que quedó libre al fundir las dos
   secciones de jefes en una. Mismo lenguaje visual que .tdp-card/.tdp-tier. */
.tdp-arena-card {
  margin-top: 16px; background: var(--tdp-panel); border: 1px solid var(--tdp-borde);
  border-radius: 14px; padding: 22px;
  /* El coliseo de fondo (--arena-fondo inline con tdp_asset): capa propia con
     velo oscuro, mismo lenguaje que las jefe-cards. Rudi 2026-08-22. */
  position: relative; overflow: hidden;
}
.tdp-arena-card::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: var(--arena-fondo) center 30% / cover no-repeat;
  opacity: .35;
}
.tdp-arena-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(180deg, rgba(10,10,12,.55) 0%, rgba(10,10,12,.82) 100%);
}
.tdp-arena-card > * { position: relative; z-index: 1; }
.tdp-arena-card h3 { margin: 0 0 1em; color: var(--tdp-oro-claro); font-family: var(--titulos, Cinzel, serif); }
.tdp-arena-mecanicas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.tdp-arena-mecanicas b { display: block; margin-bottom: .35em; color: var(--tdp-texto); }
.tdp-arena-mecanicas p { margin: 0; font-size: .9rem; color: var(--tdp-tenue); }

@media (prefers-reduced-motion: reduce) { .tdp-jefe-card .fondo, .tdp-jefe-card:hover .fondo { transition: none; transform: none; } }

/* === El Salón en versión de bolsillo, dentro del overlay de Rankings ======
   Antes el overlay mostraba solo dos tablas: quien entraba desde la portada
   no veía nada del tablero de /rankings. Mismo lenguaje visual, en chico. */
.tdp-rankings-kpis {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px; margin: 14px 0 4px; background: rgba(216,162,74,.2);
  border: 1px solid rgba(216,162,74,.22); border-radius: 8px; overflow: hidden;
}
.tdp-rankings-kpis > div { background: rgba(10,10,12,.9); padding: 9px 6px; text-align: center; }
.tdp-rankings-kpis b {
  display: block; font-family: var(--titulos, Cinzel, serif); font-size: 1.15rem;
  color: var(--tdp-texto); line-height: 1.1;
}
.tdp-rankings-kpis span {
  display: block; margin-top: 2px; font-size: .75rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--tdp-tenue);
}
.tdp-rankings-card .rotulo {
  margin: 0 0 5px; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--tdp-tenue);
}
.tdp-rankings-pulso { margin-top: 14px; }
.tdp-rankings-pulso svg { width: 100%; height: 54px; display: block; }
.tdp-rankings-pulso path {
  fill: none; stroke: var(--tdp-oro); stroke-width: 2;
  vector-effect: non-scaling-stroke; stroke-linejoin: round;
}
.tdp-rankings-jefes { display: flex; flex-wrap: wrap; align-items: baseline; gap: 16px; margin-top: 14px; }
.tdp-rankings-jefes .jefe { display: flex; align-items: baseline; gap: 6px; }
.tdp-rankings-jefes .jefe b {
  font-family: var(--titulos, Cinzel, serif); font-size: 1.35rem; color: var(--tdp-rojo);
}
.tdp-rankings-jefes .jefe span { font-size: .8rem; color: var(--tdp-texto); }
.tdp-rankings-jefes .rotulo { margin: 0; }
.tdp-rankings-censo { margin-top: 14px; }
.tdp-rankings-censo ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.tdp-rankings-censo li { display: flex; align-items: center; gap: 9px; font-size: .8rem; }
.tdp-rankings-censo .n { min-width: 84px; color: var(--tdp-texto); }
.tdp-rankings-censo .b { flex: 1; height: 6px; border-radius: 3px; background: rgba(216,162,74,.12); }
.tdp-rankings-censo .b i { display: block; height: 100%; border-radius: 3px; background: var(--tdp-oro); }
.tdp-rankings-censo .v { min-width: 22px; text-align: right; color: var(--tdp-oro); font-weight: 700; }

@media (max-width: 720px) {
  .tdp-rankings-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tres columnas: las dos tablas + el Salon de bolsillo. Antes el panel era una
   columna angosta centrada y sobraba pantalla a los costados.
   D17: esta es la UNICA declaracion base de .tdp-rankings-cols. Antes habia
   tres repartidas por el archivo y las dos de arriba nunca aplicaban. */
.tdp-rankings-cols { display: grid; grid-template-columns: 1fr 1.15fr 1.1fr; align-items: start; gap: 22px; }
.tdp-rankings-cols .col.salon { display: flex; flex-direction: column; gap: 0; }
.tdp-rankings-cols .col.salon .tdp-rankings-kpis { margin-top: 0; }
.tdp-rankings-cols .col.salon > *:first-child { margin-top: 0; }
/* Los KPIs en la columna angosta van 2x2, no 1x4 */
.tdp-rankings-cols .col.salon .tdp-rankings-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 1080px) {
  .tdp-rankings-cols { grid-template-columns: 1fr 1fr; }
  .tdp-rankings-cols .col.salon { grid-column: 1 / -1; }
  .tdp-rankings-cols .col.salon .tdp-rankings-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .tdp-rankings-cols { grid-template-columns: 1fr; }
  .tdp-rankings-cols .col.salon .tdp-rankings-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Agenda y vida del reino dentro del overlay */
.tdp-rankings-agenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.tdp-rankings-agenda li {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline;
  gap: 2px 10px; font-size: .8rem; padding: 5px 9px;
  border: 1px solid rgba(216,162,74,.14); border-radius: 6px; background: rgba(216,162,74,.04);
}
.tdp-rankings-agenda .ev { color: var(--tdp-texto); font-weight: 600; }
.tdp-rankings-agenda .fa { color: var(--tdp-oro); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tdp-rankings-agenda .lu { grid-column: 1 / 2; font-size: .7rem; color: var(--tdp-tenue); }
.tdp-rankings-vida { margin-top: 14px; }
.tdp-rankings-vida ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.tdp-rankings-vida li { font-size: .76rem; color: var(--tdp-tenue); }
.tdp-rankings-vida b { color: var(--tdp-texto); font-size: .95rem; margin-right: 5px; }
/* Con tres columnas altas conviene un panel mas ancho todavia */
.tdp-rankings-card { max-width: 1400px; }

/* "El server ahora" — fila viva bajo el countdown del hero (capa Arena Viva,
   SPEC_2026-08-23 W3). Datos server-rendered, sin JS: se refrescan al recargar. */
.tdp-ahora {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 28px;
  margin-top: 1.1rem; padding: 9px 18px;
  background: rgba(17,17,25,.62); border: 1px solid var(--tdp-borde);
  border-radius: 12px;
}
.tdp-ahora .celda { display: flex; align-items: baseline; gap: 7px; white-space: nowrap; }
.tdp-ahora small {
  font-size: .75rem; letter-spacing: .09em; text-transform: uppercase;
  color: var(--tdp-tenue);
}
.tdp-ahora b { color: var(--tdp-oro-claro); font-size: .9rem; }
.tdp-ahora i { font-style: normal; color: var(--tdp-tenue); font-size: .85rem; }
.tdp-ahora .vivo-txt { color: var(--verde, #5bbd68); }
.tdp-ahora .rey-txt  { color: var(--c-violeta, #c86eff); } /* violeta = el Rey como jugador */

/* ==== Lote freefrontend 2026-08-22 ====================================== */

/* Braseros del titulo de jefes — adaptado del pen fGFyj (dazulu, coleccion
   /css-fire-animations/): 3 gotas superpuestas con glow por box-shadow y
   flicker por rotacion del contenedor. Colores = tokens de base.css.
   Sin motion queda la llama estatica (la forma sola ya lee como fuego). */
.tdp-llama {
  position: relative; display: inline-block; width: 22px; height: 26px;
  margin: 0 .4em; vertical-align: -4px; transform-origin: center bottom;
}
.tdp-llama i { position: absolute; bottom: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.tdp-llama i:nth-child(1) { left: 2px; width: 18px; height: 18px; background: var(--c-rojo-vivo); box-shadow: 0 0 4px 2px rgba(192,57,43,.55); }
.tdp-llama i:nth-child(2) { left: 4px; width: 14px; height: 14px; background: var(--c-naranja); box-shadow: 0 0 6px 2px rgba(255,138,42,.45); }
.tdp-llama i:nth-child(3) { left: 6px; width: 10px; height: 10px; background: var(--c-oro-brillo); box-shadow: 0 0 7px 3px rgba(255,233,168,.4); }
@media (prefers-reduced-motion: no-preference) {
  .tdp-llama { animation: tdp-flicker 1.2s ease-in infinite alternate; }
  @keyframes tdp-flicker {
    0%   { transform: rotate(-1deg); }
    20%  { transform: rotate(1deg); }
    40%  { transform: rotate(-1deg); }
    60%  { transform: rotate(1deg) scaleY(1.06); }
    80%  { transform: rotate(-2deg) scaleY(.92); }
    100% { transform: rotate(1deg); }
  }
}

/* Cinta "Fundador" en la esquina del alta — coleccion /css-ribbons/. El curvo
   de t_afif (KKEZZev) se descarto: usa lh + cos() + @property sin fallback.
   Esta es la cinta diagonal clasica, con los tokens del sitio. El marco propio
   con overflow:hidden existe para NO recortar el glow ::before de .tdp-signup. */
.tdp-signup { position: relative; }
.tdp-cinta-marco {
  position: absolute; inset: 0; overflow: hidden;
  border-radius: 16px; pointer-events: none;
}
.tdp-cinta {
  position: absolute; top: 22px; right: -46px; transform: rotate(45deg);
  width: 178px; text-align: center; padding: 5px 0;
  background: linear-gradient(180deg, var(--tdp-oro-claro), var(--tdp-oro));
  color: var(--tdp-negro); font-family: var(--fuente-titulos, Cinzel, serif);
  font-weight: 700; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
}


/* ===========================================================================
   HERO EN DOS COLUMNAS — "conversión primero" (2026-09-21)

   El formulario de alta se subio del fondo de la pagina a la primera pantalla.
   Va AL LADO y no debajo por una razon de comportamiento, no de estetica:
   arriba de 901 px landing.js corre en modo "deck", captura la rueda y mueve
   de a una seccion alineando su borde superior. Una seccion mas alta que la
   ventana queda CORTADA por abajo y no hay forma de llegar a lo que sobra.
   En dos columnas el hero mide lo mismo que antes de tener formulario.

   Por debajo de 901 px no hay deck (es scroll nativo), asi que ahi las
   columnas se apilan sin riesgo.
   =========================================================================== */
.tdp-hero-cols { display: flex; flex-direction: column; gap: 22px; align-items: center; }
.tdp-hero-izq  { display: contents; }

@media (min-width: 901px) {
  .tdp-hero.con-alta .tdp-hero-cols {
    flex-direction: row; align-items: center; justify-content: center;
    gap: 40px; width: 100%;
  }
  .tdp-hero.con-alta .tdp-hero-izq {
    display: flex; flex-direction: column; align-items: center; gap: 18px;
    flex: 1 1 560px; min-width: 0;
  }
  .tdp-hero.con-alta .tdp-hero-der { flex: 0 0 360px; }
  /* Los retratos de los flancos son decorativos (aria-hidden) y son lo primero
     que sobra cuando hay que hacerle lugar al formulario.
     ⚠️ NO VUELVEN en pantalla ancha, y eso se corrigio MIRANDO: la primera
     version los devolvia a partir de 1500 px, y a 1900 px se MONTABAN SOBRE
     EL LOCKUP -- el titulo "Trono del Plata" quedaba tapado. El ancho de la
     ventana no es el ancho disponible: la columna izquierda ahora comparte
     el hero con el formulario, asi que los retratos nunca tienen su lugar. */
  .tdp-hero.con-alta .tdp-banner-retrato { display: none; }

  /* ⛔ Y ESCONDERLOS NO ALCANZABA. .tdp-banner es una grilla
     `250px minmax(0,1fr) 250px`: con `display:none` los retratos no se
     dibujan, pero LAS DOS PISTAS DE 250 px SIGUEN RESERVADAS. El lockup
     quedaba exprimido en el 1fr del medio y el titulo se montaba con lo de
     al lado. Esa era la causa real del amontonamiento en la portada, no las
     fotos. Con un solo grupo, la grilla tiene que colapsar tambien. */
  .tdp-hero.con-alta .tdp-banner {
    grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 640px;
  }
  /* Y el lockup baja un escalon: el hero ahora comparte el ancho, y de paso
     la seccion entra mas facil en una ventana de notebook. */
  .tdp-hero.con-alta .tdp-banner-lockup h1 { font-size: clamp(2.2rem, 3.4vw, 3.4rem); }
  .tdp-hero.con-alta .tdp-banner-lockup .escudo { width: 84px; height: 84px; }

  /* ⛔ LO QUE DE VERDAD HACIA ALTO AL HERO, y no se ve leyendo el HTML:
     .tdp-banner-lockup lleva `min-height: 420px` para un contenido que mide
     ~240, y .tdp-hero arrastra 96 px de padding arriba. Entre los dos ponian
     casi 280 px de aire en una ventana donde faltaban 160.
     Medido con el navegador, no estimado: el hero pasaba de 768 y las rates
     --que son la prueba de "esto es serio"-- quedaban fuera de la primera
     pantalla, que es exactamente lo que la variante "conversion" venia a
     evitar. El aire tenia sentido cuando el hero era SOLO el lockup. */
  .tdp-hero.con-alta { padding-top: calc(var(--tdp-barra) + 14px); }
  .tdp-hero.con-alta .tdp-banner-lockup { min-height: 0; padding: 10px 12px; }
  /* El trono de fondo es `position:absolute`: si el lockup se encoge y el no,
     se sale por abajo. Se acota al alto que ahora tiene su caja. */
  .tdp-hero.con-alta .tdp-banner-lockup .trono-fondo { max-height: 290px; }
}

/* El formulario dentro del hero: mas compacto que cuando era una seccion entera
   para el solo, y sin el margen que lo centraba en su propia pantalla.
   Las medidas NO se eligieron a ojo: con las de antes el hero media 1027 px en
   una notebook de 768 y las rates quedaban fuera de la primera pantalla. */
.tdp-hero-der .tdp-signup { margin: 0; width: 100%; max-width: 420px; }
@media (min-width: 901px) {
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup { max-width: none; padding: 20px 22px; }
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup label { margin-bottom: 8px; }
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup .tdp-av { margin-top: 2px; font-size: .7rem; }
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup form button { padding: 12px 18px; }
  /* Medidas del formulario DENTRO del hero, no en general: cuando vivia solo
     en su pantalla el aire estaba bien. Acá compite con el lockup por 768 px. */
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup h2 { font-size: 1.3rem; margin-bottom: .2rem; }
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup .exclusivo { margin: 0 0 .5rem; font-size: .82rem; line-height: 1.4; }
  .tdp-hero.con-alta .tdp-hero-der .tdp-signup form label { margin-bottom: 6px; }
}

/* En TELEFONO el hero no tiene dos columnas: se apila, y con el formulario
   adentro paso de 844 px a 1789 px -- dos pantallas antes de llegar a lo que
   el visitante vino a hacer. Justo lo contrario de "conversion primero".
   Se achica lo decorativo, que en 390 px es lo que sobra. */
@media (max-width: 900px) {
  .tdp-hero.con-alta .tdp-banner-lockup h1 { font-size: 2rem; }
  .tdp-hero.con-alta .tdp-banner-lockup .escudo { width: 64px; height: 64px; }
  .tdp-hero.con-alta .tdp-banner-lockup { min-height: 0; padding: 6px 10px; }
  .tdp-hero.con-alta .tdp-banner-lockup .trono-fondo { max-height: 190px; }
  .tdp-hero.con-alta { padding-top: calc(var(--tdp-barra-movil) + 10px); }
  .tdp-hero.con-alta .tdp-ahora { display: none; }   /* vuelve mas abajo, en su seccion */
  .tdp-hero.con-alta .tdp-hint  { display: none; }   /* en tactil no hay rueda que guiar */
  .tdp-hero.con-alta .tdp-hero-cols { gap: 14px; }
}

/* La frase que dice QUE ES esto. Antes el hero no lo decia en ningun lado. */
.tdp-posicion {
  margin: 0; max-width: 46ch; text-align: center;
  font-size: 1.02rem; line-height: 1.55; color: var(--tdp-texto);
}
.tdp-posicion strong { color: var(--tdp-oro-claro); font-weight: 700; }
@media (max-width: 640px) { .tdp-posicion { font-size: .94rem; } }

/* Joyas del trono (2026-09-26): icono = render del modelo real del cliente. */
.tdp-joya { text-align: center; }
.tdp-joya img { display: block; margin: 0 auto 10px; width: 96px; height: 96px; }