/* ═══════════════════════════════════════════════════════════════════════
   designacion.css — «Ceremonia por capas» · Carchi al Mundo 2026
   Narrativa de 4 actos con scroll. Noche violeta por defecto (papel.css
   reescribe los materiales). Presupuesto de movimiento: 6 gestos (actos 1-3)
   + 2 gestos del acto 4 (emerger atado al scroll, entrada escalonada de
   nombres), todos transform/opacity. prefers-reduced-motion deja la página
   quieta y legible.

   RETÍCULA (v3): un solo eje vertical de página == --margen.
   Ese eje es a la vez: margen del header, borde del bloque de umbral, línea
   del riel, filete de las plazas, filete del acta y margen del pie.
   El texto de bloque (plazas, acta) cuelga --indent (24px) del filete;
   el titular y los micro-rótulos viven sobre el eje. Los filetes, entonces,
   se leen como una sola línea de parte a parte de la página.
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  --noche:#17101f;
  --noche-2:#241633;
  --papel:#f7f1e6;
  --violeta:#9018c0;
  --violeta-luz:#c26ae8;
  --violeta-deep:#6d0f93;
  --linea:rgba(194,106,232,.20);
  --linea-fuerte:rgba(194,106,232,.42);
  --dim:#9a8ba8;
  --serif:"Noto Serif","Times New Roman",serif;
  --sans:"Noto Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"DejaVu Sans Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.8,.2,1);

  /* retícula única */
  --margen:clamp(20px,5vw,64px);   /* eje de página */
  --indent:24px;                   /* texto de bloque respecto del filete */
  --medida:62ch;                   /* techo de medida de línea */
  --barra:52px;                    /* alto del pie-barra */
  --riel:34px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%}

body{
  background:
    radial-gradient(1200px 700px at 74% -10%, rgba(144,24,192,.22), transparent 62%),
    linear-gradient(172deg, var(--noche) 0%, var(--noche-2) 52%, #1b1226 100%);
  background-attachment:fixed;
  color:var(--papel);
  font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── retícula técnica ───────────────────────────────────────────────── */
.retícula{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(to right, rgba(247,241,230,.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(247,241,230,.055) 1px, transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(circle at 50% 34%, #000 0%, transparent 82%);
  -webkit-mask-image:radial-gradient(circle at 50% 34%, #000 0%, transparent 82%);
}

/* ── barra superior ─────────────────────────────────────────────────── */
.top{
  position:fixed; left:0; right:0; top:0; z-index:6;
  display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:clamp(12px,2vh,20px) var(--margen);
  backdrop-filter:blur(6px);
  background:linear-gradient(to bottom, rgba(23,16,31,.82), rgba(23,16,31,.28) 70%, transparent);
}
.top::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg, var(--violeta) 0%, var(--linea-fuerte) 44%, transparent 100%);
  transform-origin:left center;
  animation:dibujar .7s var(--ease) both;               /* gesto 1 */
}
.marca{display:flex; align-items:center; gap:12px; min-width:0}
.logo-cv{width:38px; height:38px; border-radius:50%; box-shadow:0 0 0 1px var(--linea)}
.marca-txt{display:flex; flex-direction:column; line-height:1.2; min-width:0}
.marca-txt b{font-size:.8rem; letter-spacing:.15em; text-transform:uppercase; font-weight:600}
.marca-txt i{font-style:normal; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dim)}
.meta{display:flex; align-items:center; gap:10px; font-size:.62rem; letter-spacing:.18em;
      text-transform:uppercase; color:var(--dim); white-space:nowrap}
.punto{width:3px; height:3px; border-radius:50%; background:var(--violeta-luz); opacity:.8}

/* ── actos ──────────────────────────────────────────────────────────── */
.acto{position:relative; z-index:1}

/* ACTO 1 — umbral */
.acto-umbral{
  min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  padding:clamp(96px,16vh,150px) var(--margen) clamp(150px,23vh,210px);
  overflow:hidden;
}
.capa{position:absolute; inset:0; pointer-events:none; will-change:transform}
.capa-anillo{display:grid; place-items:center; opacity:.075}
.capa-anillo .anillo{
  width:min(860px,130vw); aspect-ratio:1; border-radius:50%;
  background:conic-gradient(from 0deg, transparent 0deg, var(--violeta-luz) 46deg, transparent 96deg, transparent 360deg);
  mask:radial-gradient(circle, transparent 57%, #000 58%, #000 60.5%, transparent 61.5%);
  -webkit-mask:radial-gradient(circle, transparent 57%, #000 58%, #000 60.5%, transparent 61.5%);
  animation:giro 64s linear infinite;                    /* gesto 3 */
}
.capa-sello{display:grid; place-items:center; opacity:.05}
.capa-sello img{width:min(320px,60vw); height:auto; filter:grayscale(.2)}

/* escala: rótulo 10.9 · titular 78 · bajada 16 · nombre de plaza 40 */
.umbral-txt{position:relative; z-index:2; max-width:min(1180px,100%)}
.eyebrow{
  margin:0 0 clamp(12px,1.8vh,18px); font-size:.68rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--violeta-luz);
}
h1{
  margin:0; font-family:var(--serif); font-weight:600; max-width:20ch;
  font-size:clamp(2.45rem,6.1vw,4.9rem); line-height:1.02; letter-spacing:-.02em;
  text-wrap:balance;
}
.bajada{
  margin:clamp(18px,2.6vh,26px) 0 0; max-width:44ch; color:var(--dim);
  font-size:clamp(.86rem,1.1vw,1rem); line-height:1.6;
}

/* revelado por líneas (gesto 2) */
.revelar{opacity:0; transform:translateY(10px)}
.revelar.visto{opacity:1; transform:none; transition:opacity .7s var(--ease), transform .7s var(--ease)}
h1.revelar.visto{transition-delay:.08s}
.bajada.revelar.visto{transition-delay:.18s}

.indicio{
  position:absolute; left:50%; bottom:clamp(18px,3.4vh,34px); transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:var(--mono); font-size:.52rem; letter-spacing:.3em; text-transform:uppercase;
  color:var(--dim); opacity:.75; z-index:2;
}
.indicio i{width:1px; height:34px; background:linear-gradient(to bottom, var(--violeta-luz), transparent);
           animation:bajar 2.2s var(--ease) infinite}

/* ACTO 2 — designación (escena anclada, 126svh: 26svh de recorrido) */
.acto-plazas{
  position:relative; display:block;
  min-height:126svh;
  padding:clamp(72px,11vh,120px) var(--margen);
}

/* riel: colgado del mismo bloque anclado, sobre el eje; su línea ES el filete de la plaza I */
.riel{
  position:absolute; left:1px; top:50%; transform:translateY(-50%); width:0; z-index:3;
}
.riel-in{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px; width:0;
}
.riel-num{
  font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--dim);
  padding-right:9px; transition:color .4s var(--ease);
}
.riel-num.activo{color:var(--violeta-luz)}
.riel-linea{position:relative; width:1px; height:112px; background:var(--linea)}
.riel-linea i{position:absolute; top:0; left:0; width:1px; height:0; background:var(--violeta-luz);
              transition:height .12s linear}

.plazas-wrap{
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,64px);
  position:sticky; top:50svh; transform:translateY(-50%);
}
.plaza{
  position:relative; padding:2px 8px 0 var(--indent);
  border-left:1px solid var(--linea);
  display:flex; flex-direction:column; align-items:flex-start;
  opacity:0; transform:translateY(18px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
  will-change:transform;
}
.plaza.visto{opacity:1; transform:none}
.plaza[data-i="II"].visto{transition-delay:.12s}
.plaza::before{
  content:""; position:absolute; left:-1px; top:0; width:1px; height:0;
  background:var(--violeta-luz); transition:height .9s var(--ease) .1s;
}
.plaza.visto::before{height:32px}
.numeral{font-family:var(--mono); font-size:.64rem; letter-spacing:.3em; color:var(--violeta-luz);
         opacity:.85; display:block; margin-bottom:14px}
.categoria{margin:0 0 12px; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase;
           color:var(--dim); line-height:1.45; min-height:2.9em}
.nombre{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.14; letter-spacing:-.012em;
  text-wrap:balance;
}
.puntaje{margin:6px 0 0; font-family:var(--mono); font-size:.62rem;
  letter-spacing:.14em; color:var(--dim)}
.puesto{margin:16px 0 6px; font-family:var(--mono); font-size:.6rem; letter-spacing:.24em;
        text-transform:uppercase; color:var(--violeta-luz); opacity:.72}
.meta-plaza{
  margin:auto 0 0; padding-top:16px;
  align-self:stretch; border-top:1px solid var(--linea);
  display:flex; gap:clamp(20px,3vw,32px); flex-wrap:wrap;
  opacity:0; transform:translateY(6px); transition:opacity .6s var(--ease) .3s, transform .6s var(--ease) .3s;
}
.plaza.visto .meta-plaza{opacity:1; transform:none}
.meta-plaza dt{font-size:.54rem; letter-spacing:.18em; text-transform:uppercase; color:var(--dim); margin-bottom:4px}
.meta-plaza dd{margin:0; font-family:var(--mono); font-size:.68rem; color:inherit}

/* estados: mismos tres bloques, todos anclados al mismo centro óptico */
.vacio{display:none; padding:8px 0 var(--indent) var(--indent); border-left:1px solid var(--linea);
       position:sticky; top:50svh; transform:translateY(-50%)}
.sello-apagado{width:84px; height:84px; margin:0 0 18px; border-radius:50%;
  display:grid; place-items:center; border:1px solid var(--linea); background:rgba(247,241,230,.03)}
.sello-apagado img{filter:grayscale(1); opacity:.32}
.vacio-t{margin:0 0 8px; font-family:var(--serif); font-size:1.16rem}
.vacio-s{margin:0; color:var(--dim); font-size:.84rem; max-width:min(44ch,var(--medida)); line-height:1.6}
.esqueleto{display:none; gap:clamp(24px,4vw,64px); width:100%;
           position:sticky; top:50svh; transform:translateY(-50%)}
.sk{height:clamp(150px,20vh,210px); border-left:1px solid var(--linea);
    background:linear-gradient(90deg, rgba(247,241,230,.04), rgba(247,241,230,.09), rgba(247,241,230,.04));
    background-size:220% 100%; animation:barrido 1.6s linear infinite}

body[data-estado="vacio"] .plazas-wrap,
body[data-estado="vacio"] .esqueleto,
body[data-estado="cargando"] .plazas-wrap,
body[data-estado="cargando"] .vacio{display:none}
body[data-estado="vacio"] .vacio{display:block}
body[data-estado="cargando"] .esqueleto{display:grid; grid-template-columns:1fr 1fr}

/* ACTO 3 — sello: acta a la izquierda, QR sobre la misma retícula a la derecha */
.acto-sello{
  min-height:calc(100svh - var(--barra));
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,232px);
  align-items:center; align-content:center; gap:clamp(28px,5vw,72px);
  padding:clamp(72px,11vh,132px) var(--margen);
}
.acta{position:relative; padding-left:var(--indent); border-left:1px solid var(--linea); max-width:46rem;
      opacity:0; transform:translateY(16px); transition:opacity .8s var(--ease), transform .8s var(--ease)}
.acta.visto{opacity:1; transform:none}
.acta-eyebrow{margin:0 0 12px; font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--violeta-luz)}
.acta-folio{margin:0; font-family:var(--mono); font-size:clamp(1.05rem,1.9vw,1.5rem); letter-spacing:.05em}
.acta-fecha{margin:10px 0 0; color:var(--dim); font-size:.84rem}
.acta-regla{height:1px; margin:24px 0; background:linear-gradient(90deg, var(--linea-fuerte), transparent);
            transform:scaleX(0); transform-origin:left; transition:transform .9s var(--ease) .15s}
.acta.visto .acta-regla{transform:scaleX(1)}
.acta-huella{margin:0 0 14px; font-family:var(--mono); font-size:.62rem; line-height:1.65;
             color:var(--dim); word-break:break-all; max-width:52ch}
.acta-nota{margin:0 0 20px; color:var(--dim); font-size:.84rem; line-height:1.62; max-width:42ch}
.verif{display:inline-flex; align-items:center; gap:8px; font-size:.58rem; letter-spacing:.18em;
       text-transform:uppercase; color:var(--violeta-luz)}
.latido{width:5px; height:5px; border-radius:50%; background:var(--violeta-luz);
        animation:latir 2.4s var(--ease) infinite}          /* gesto 6 */

.estampar{
  display:grid; align-content:center; justify-items:end;
  border-left:1px solid var(--linea); padding-left:clamp(20px,2.4vw,32px);
  align-self:stretch;
}
.qr{
  width:100%; max-width:190px; height:auto; image-rendering:pixelated; border-radius:2px;
  opacity:0; transform:scale(.86) rotate(-2deg);
  transition:opacity .5s var(--ease), transform .55s cubic-bezier(.2,.9,.2,1);   /* gesto 5: se estampa */
}
.estampar.visto .qr{opacity:1; transform:none}

/* ── pie: barra fina, no otro bloque ─────────────────────────────────── */
.pie{
  position:relative; z-index:1;
  display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  min-height:var(--barra); padding:0 var(--margen);
  border-top:1px solid var(--linea);
  font-size:.56rem; letter-spacing:.16em; line-height:1.4;
  text-transform:uppercase; color:var(--dim);
}

/* ── keyframes ──────────────────────────────────────────────────────── */
@keyframes dibujar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes giro{to{transform:rotate(360deg)}}
@keyframes latir{0%,100%{opacity:.45;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}
@keyframes barrido{from{background-position:180% 0}to{background-position:-40% 0}}
@keyframes bajar{0%{transform:scaleY(.3);opacity:.2}50%{transform:scaleY(1);opacity:.9}100%{transform:scaleY(.3);opacity:.2}}

/* ── móvil ──────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .meta{display:none}
  .logo-cv{width:32px; height:32px}

  .acto-umbral{padding-bottom:clamp(120px,18vh,170px)}

  .acto-plazas{min-height:0; padding-block:clamp(64px,10vh,88px)}
  .riel{display:none}
  .plazas-wrap,.vacio,.esqueleto{position:static; transform:none}
  .plazas-wrap{grid-template-columns:1fr; gap:clamp(32px,7vh,44px)}
  .plaza{padding-right:0}
  .categoria{max-width:38ch}

  .acto-sello{grid-template-columns:1fr; gap:26px; min-height:0; align-items:start}
  .estampar{border-left:0; padding-left:0; justify-items:start; align-self:auto; order:-1}
  .qr{width:96px; max-width:96px}
  body[data-estado="cargando"] .esqueleto{grid-template-columns:1fr}

  .pie{flex-direction:column; align-items:flex-start; justify-content:center; gap:3px;
       min-height:0; padding:12px var(--margen)}
}

/* ── movimiento reducido: página quieta y legible ───────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .top::after{animation:none; transform:none}
  .capa-anillo .anillo{animation:none}
  .indicio i{animation:none}
  .latido{animation:none; opacity:.8}
  .esqueleto .sk{animation:none}
  .revelar,.plaza,.acta,.meta-plaza{opacity:1 !important; transform:none !important; transition:none !important}
  .plaza::before{height:32px !important; transition:none}
  .acta-regla{transform:none !important; transition:none}
  .qr{opacity:1 !important; transform:none !important; transition:none}
  .capa{transform:none !important}
}

/* ── impresión: el acto en papel, sin narrativa ─────────────────────── */
@media print{
  body{background:#fff; color:#1a1520}
  .retícula,.capa,.indicio,.riel{display:none}
  .top{position:static; backdrop-filter:none; background:none; padding:0 0 10px}
  .top::after{animation:none; transform:none; background:#6d0f93}
  .acto-umbral,.acto-sello{min-height:0; padding:14px 0; display:block}
  .acto-plazas{min-height:0; padding:14px 0}
  .plazas-wrap,.vacio,.esqueleto{position:static; transform:none}
  .plazas-wrap{display:grid; grid-template-columns:1fr 1fr; gap:28px}
  .revelar,.plaza,.acta,.meta-plaza{opacity:1 !important; transform:none !important}
  .nombre{font-size:15pt}
  h1{font-size:22pt}
  .numeral,.puesto,.eyebrow,.acta-eyebrow,.verif{color:#6d0f93}
  .bajada,.categoria,.acta-fecha,.acta-huella,.acta-nota{color:#4a4152}
  .estampar{border-left:0; padding-left:0; align-self:auto}
  .qr{opacity:1 !important; transform:none !important; width:74px; max-width:74px}
  .pie{border-top-color:#c9b6d8; color:#4a4152; min-height:0; padding:6px 0}
  .latido{animation:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   ACTO 4 — EL JURADO
   Escena anclada: el grupo emerge del borde inferior y queda fijado al pie.
   Integración con el fondo: el PNG es un recorte con alfa (40.6% de píxeles
   transparentes), así que el fondo lo resuelve el canal alfa y NO se usa
   mix-blend-mode: medido, screen altera el sujeto (Δ 0.078) y lighten
   recorta las sombras más oscuras; normal deja Δ 0.000.
   Gestos nuevos: 1) emerger atado al scroll  2) entrada escalonada de nombres.
   ═══════════════════════════════════════════════════════════════════════ */
.acto-jurado{position:relative; min-height:172svh; padding:0}

.jurado-pin{
  position:sticky; top:0;
  height:100svh; min-height:520px;
  display:flex; flex-direction:column;
  padding:clamp(66px,9vh,92px) var(--margen) 0;
}

.jurado-cab{flex:0 0 auto; position:relative; z-index:6}
.jurado-eyebrow{
  margin:0 0 9px; font-size:.62rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--violeta-luz);
}
.jurado-tit{
  margin:0; font-family:var(--serif); font-weight:600;
  font-size:clamp(1.55rem,2.5vw,2.5rem); line-height:1.04; letter-spacing:-.015em;
}

.jurado-escena{
  position:relative; flex:1 1 auto; min-height:0;
  display:flex; align-items:flex-end; justify-content:center;
}
.jurado-pista{width:100%; display:flex; align-items:flex-end; justify-content:center}

/* el grupo: caja de la foto, anclada al pie y recortada por el borde inferior */
.jurado-grupo{
  position:relative; flex:0 0 auto;
  /* ancho por altura disponible: el grupo nunca se come el aire de los nombres */
  width:min(88%, calc((100svh - 230px) / 0.5625));
  max-width:1180px;
  line-height:0;
  transform:translate3d(0,0,0);
  will-change:transform;
}
.jurado-placa{display:none}
.jurado-foto{
  position:relative; z-index:3; display:block;
  width:100%; height:auto;
}

/* sombra de contacto: corta, pegada al borde inferior, para que no floten.
   Va SOBRE la foto: el grupo está recortado a la cintura y el borde inferior
   es 98% opaco, así que una sombra por detrás no tendría dónde verse. */
.jurado-sombra{
  position:absolute; z-index:4; left:-2%; right:-2%; bottom:-2px;
  height:23%; pointer-events:none;
  background:radial-gradient(56% 124% at 50% 108%,
    rgba(0,0,0,.66) 0%, rgba(0,0,0,.46) 34%, rgba(0,0,0,.18) 58%, rgba(0,0,0,0) 76%);
}

/* filete vertical 1px: nombre → hombro (corre por detrás de la persona) */
.jurado-filete{
  position:absolute; z-index:2; left:var(--x); top:var(--y);
  width:1px; height:calc(var(--hombro) - var(--y));
  transform:translateX(-.5px);
  background:linear-gradient(to bottom, var(--linea-fuerte) 0%, var(--linea-fuerte) 7%, rgba(194,106,232,0) 32%);
  pointer-events:none;
}

/* nombres sobre cada cabeza */
.jurado-nombres{position:absolute; inset:0; z-index:5; margin:0; padding:0; list-style:none; line-height:1}
.jurado-p{
  position:absolute; left:var(--x); bottom:calc(100% - var(--y));
  transform:translate(-50%,10px);
  text-align:center; white-space:nowrap;
  opacity:0;
  transition:opacity .62s var(--ease), transform .62s var(--ease);
}
.jurado-grupo.visto .jurado-p{opacity:1; transform:translate(-50%,0)}
.jurado-grupo.visto .jurado-p:nth-child(2){transition-delay:.08s}
.jurado-grupo.visto .jurado-p:nth-child(3){transition-delay:.16s}
.jp-cn{
  display:block; font-family:"Noto Serif CJK SC",var(--serif); font-weight:600;
  font-size:clamp(19px,2.05vw,30px); line-height:1.14; letter-spacing:.08em;
}
.jp-py{
  display:block; margin-top:7px; font-family:var(--mono);
  font-size:clamp(9px,.72vw,11px); line-height:1; letter-spacing:.19em;
  color:var(--dim);
}

/* velo de recorte inferior: asienta el corte y limpia la línea de pie */
.jurado-scrim{
  position:absolute; z-index:5; left:calc(-1 * var(--margen)); right:calc(-1 * var(--margen)); bottom:0;
  height:clamp(62px,8vh,86px); pointer-events:none;
  background:linear-gradient(to top, rgba(23,16,31,.9) 0%, rgba(23,16,31,.5) 52%, rgba(23,16,31,0) 100%);
}

/* pie discreto del acto: folio + huella, QR pequeño en la esquina */
.jurado-pie{
  position:absolute; z-index:7; left:var(--margen); right:var(--margen); bottom:0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px;
  padding-bottom:clamp(10px,1.5vh,16px);
  font-size:.54rem; letter-spacing:.14em; text-transform:uppercase; color:var(--dim);
  pointer-events:none;
}
.jurado-firma{
  margin:0; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-family:var(--mono); letter-spacing:.1em; line-height:1.4;
}
.jurado-sep{width:14px; height:1px; background:currentColor; opacity:.45}
#jurado-huella{text-transform:none}
.jurado-qr{width:40px; height:40px; opacity:.74; image-rendering:pixelated; border-radius:2px}

@media (max-width:820px){
  .acto-jurado{min-height:170svh}

  .jurado-pin{padding:clamp(60px,8vh,84px) 0 0}
  /* sin pin no hay recorte: el velo inferior ya no tiene qué asentar y caería
     sobre el bloque de nombres */
  .jurado-scrim{display:none}
  .jurado-cab{padding:0 var(--margen)}
  /* Móvil: la foto entra COMPLETA al ancho de pantalla — los tres jueces
     visibles sin deslizar (decisión del dueño, 2026-10-20). */
  .jurado-pista{
    justify-content:center; padding-top:18px;
    overflow:visible; touch-action:pan-y;
    -webkit-mask-image:none; mask-image:none;
  }
  .jurado-grupo{width:100%; max-width:none; container-type:inline-size}
  .jurado-foto{width:100%; height:auto}
  /* Los nombres: el overlay no cabe con holgura a este ancho (el primero
     pisaba el título y el segundo caía sobre un rostro). Pasan a bloque de
     pie EN FLUJO, debajo de la foto, siempre visible. */
  .jurado-nombres{
    position:static; inset:auto;
    display:flex; align-items:flex-start; justify-content:space-between;
    gap:10px; margin:14px var(--margen) 0;
    line-height:1.15;
  }
  /* especificidad: .jurado-grupo.visto .jurado-p (3 clases) aplica
     translate(-50%) al revelar; este selector la empata y va después. */
  .jurado-grupo .jurado-nombres .jurado-p{
    position:static; left:auto; bottom:auto;
    flex:1 1 0; min-width:0;
    transform:none; opacity:1; transition:none;
    white-space:normal; text-align:center;
  }
  .jurado-p .jp-cn{font-size:clamp(13px, 3.6vw, 17px); letter-spacing:.04em}
  .jurado-p .jp-py{
    margin-top:5px; font-size:clamp(8px, 2.2vw, 10px); letter-spacing:.04em;
  }
  /* Móvil vertical: sin pista sticky ni recorrido — el título queda pegado a
     la foto (el aire de 757 px era el pin de 170svh + el translate del scroll). */
  .acto-jurado{min-height:0}
  .jurado-grupo{transform:none !important}
  .jurado-pin{position:static; height:auto; min-height:0; padding:0 0 8px}
  .jurado-escena{height:auto; min-height:0; padding:0}
  .jurado-filete{display:none}
  /* decorativos que desbordaban el viewport en móvil.
     La sombra de contacto queda pegada al pie de la FOTO (23% de su alto,
     foto = 56.25% del ancho), no al pie del grupo, que ahora incluye los nombres. */
  .jurado-sombra{left:0; right:0; display:none}
  @supports (top: 1cqw){
    .jurado-sombra{display:block; bottom:auto; top:43.3125cqw; height:12.9375cqw}
  }
  .capa-anillo{overflow:hidden}
  /* el pie deja de flotar sobre la foto: va debajo, en flujo */
  .jurado-pie{position:static; left:auto; right:auto; bottom:auto;
    margin:12px var(--margen) 0; padding-bottom:0;
    align-items:center; font-size:.5rem; gap:10px; pointer-events:auto}
  .jurado-pie{left:var(--margen); right:var(--margen)}
}

@media (prefers-reduced-motion:reduce){
  .acto-jurado{min-height:100svh}
  .jurado-grupo{transform:none !important}
  .jurado-p{opacity:1 !important; transform:translate(-50%,0) !important; transition:none !important}
}

@media print{
  .acto-jurado{min-height:0; break-inside:avoid; padding:14px 0}
  .jurado-pin{position:static; height:auto; min-height:0; padding:0; display:block}
  .jurado-escena{display:block}
  .jurado-pista{display:block; padding:0; overflow:visible}
  .jurado-grupo{width:100%; max-width:100%; transform:none !important}
  .jurado-foto{mix-blend-mode:normal; filter:none !important}
  .jurado-placa,.jurado-sombra,.jurado-scrim{display:none}
  .jurado-pin::before{display:none}
  .jurado-filete{background:#6d0f93; opacity:.45}
  .jurado-p{opacity:1 !important; transform:translate(-50%,0) !important; transition:none}
  .jp-cn{font-size:10pt; color:#221b29; background:#fff; padding:1px 5px; display:inline-block}
  .jp-py{font-size:6pt; color:#4a4152; background:#fff; padding:1px 5px; display:inline-block}
  .jurado-pie{position:static; padding:10px 0 0; color:#4a4152}
  .jurado-qr{width:52px; height:52px}
}

/* QR clickeable: abre el portal de verificación */
.qr-enlace{display:inline-block;line-height:0;border-radius:6px;
  transition:transform .18s ease, box-shadow .18s ease}
.qr-enlace:hover{transform:translateY(-1px)}
.qr-enlace:focus-visible{outline:2px solid var(--violeta-brillo, #c26ae8);outline-offset:4px}
@media (prefers-reduced-motion: reduce){.qr-enlace{transition:none}.qr-enlace:hover{transform:none}}
@media print{.qr-enlace{box-shadow:none}}