/* ═══════════════════════════════════════════════════════════════
   PASAPORTE DIGITAL V3 · PepsiCo Digital Day 2026 · Región Andina

   REGLAS DE SISTEMA (bloqueadas, auditar antes de publicar)

   · IDENTIDAD   Paleta tomada del logotipo DD26, sin inventar tonos
                 de marca. Navy 062248, azul 055BA6, azul medio
                 3879B4, verde 84A72B, ámbar F6A416; lima A9E137 y
                 naranja FFAE00 del arco; cian 00B6FF del mosaico.
   · TEMA        Un solo tema claro. El navy no es modo oscuro: es
                 el material del documento. Papel es página, navy es
                 documento.
   · ACENTO      Azul para todo lo interactivo primario. Verde sólo
                 para logro consumado. Ámbar sólo para sellado y
                 atención pendiente. Lima sólo para celebración.
   · RADIO       10px controles · 14px botones y listas
                 22px documentos · 999px sólo insignias y filtros.
   · ETIQUETAS   El tratamiento versal-monoespaciado pertenece sólo
                 al interior del documento (campos y banda MRZ).
                 Ninguna sección lleva etiqueta encima del titular.
   · SELLOS      Redondo es proyecto. Rectangular es proveedor.
                 La forma distingue, no sólo el color.
   · CONTRASTE   Verificado sobre el render. Los tonos claros de
                 marca nunca llevan texto blanco encima; para eso
                 existen los tonos profundos derivados.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* ── Marca DD26, tomada de los archivos vectoriales ─────────── */
  --dd-navy:#062248;      /* letra del logotipo */
  --dd-blue:#055BA6;      /* píxel azul profundo */
  --dd-blue-2:#3879B4;    /* píxel azul medio */
  --dd-green:#84A72B;     /* píxel verde */
  --dd-amber:#F6A416;     /* píxel ámbar */
  --dd-lime:#A9E137;      /* arco, tramo lima */
  --dd-orange:#FFAE00;    /* arco, tramo naranja */
  --dd-sky:#00B6FF;       /* mosaico de píxeles */

  /* ── Navy: el material del documento ────────────────────────── */
  --navy-900:#04162F;
  --navy-800:#062248;
  --navy-700:#0A3A6B;
  --navy-600:#055BA6;
  --navy-500:#3879B4;

  /* ── Azul de acción. Blanco encima a partir de 700 ──────────── */
  --sky-700:#0067B8;
  --sky-800:#005089;
  --sky-50:#E4F5FF;

  /* ── Verde: logro consumado ─────────────────────────────────── */
  --green-700:#587117;
  --green-800:#445812;
  --green-50:#F0F7DF;

  /* ── Ámbar: sellado y atención pendiente ────────────────────── */
  --amber-700:#8F5700;
  --amber-800:#734600;
  --amber-50:#FFF3DF;

  /* ── Papel y tinta ──────────────────────────────────────────── */
  --paper:#F1F5FA;
  --paper-2:#E6ECF4;
  --paper-3:#D8E2EE;
  --card:#FFFFFF;
  --ink:#0B2038;
  --ink-2:#40566F;
  --ink-3:#5A7086;
  --line:#D6E0EC;      /* filete decorativo */
  --line-2:#B4C4D6;    /* filete marcado */
  --edge:#7C8FA8;      /* borde de control: 3:1 contra papel y tarjeta */
  --danger:#C0341B;

  /* Texto sobre navy */
  --on-navy:#FFFFFF;
  --on-navy-2:#BCD3E8;

  /* ── Escala fija en rem, razón ~1.16 ────────────────────────── */
  --t-xs:0.75rem;
  --t-sm:0.8125rem;
  --t-base:0.9375rem;
  --t-md:1.0625rem;
  --t-lg:1.3125rem;
  --t-xl:1.625rem;
  --t-2xl:2.125rem;
  --t-3xl:2.75rem;

  --s-1:4px;  --s-2:8px;  --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:44px; --s-8:60px; --s-9:84px;

  /* ── Bloqueo de forma ───────────────────────────────────────── */
  --r-ctl:10px;
  --r-btn:14px;
  --r-doc:22px;
  --r-pill:999px;

  /* ── Elevación teñida al navy de marca ──────────────────────── */
  --e-1:0 1px 2px rgba(6,34,72,.07), 0 2px 6px rgba(6,34,72,.05);
  --e-2:0 2px 4px rgba(6,34,72,.07), 0 10px 24px rgba(6,34,72,.10);
  --e-3:0 6px 12px rgba(6,34,72,.10), 0 24px 52px rgba(6,34,72,.18);

  --ease:cubic-bezier(.16,1,.3,1);
  --ease-in:cubic-bezier(.5,0,.75,0);

  --display:'Outfit', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --sans:'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'Azeret Mono', ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --caret:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http%3A//www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2340566f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6.5 8 10.5 12 6.5'/%3E%3C/svg%3E");
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100dvh;
  background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:var(--t-base); line-height:1.55;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Superficies del navegador: ninguna queda con el valor por defecto */
::selection{background:var(--dd-amber);color:var(--navy-900)}
::-moz-selection{background:var(--dd-amber);color:var(--navy-900)}
:root{accent-color:var(--sky-700);caret-color:var(--sky-700)}
*{scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:transparent}
*::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--r-pill);border:3px solid var(--paper)}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-3)}
a{color:var(--sky-800);text-underline-offset:3px;text-decoration-thickness:1.5px}
:focus-visible{outline:2.5px solid var(--sky-700);outline-offset:3px;border-radius:4px}
.on-dark :focus-visible,.doc :focus-visible,.hero :focus-visible{outline-color:var(--dd-amber)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed}
img,svg{display:block;max-width:100%}
h1,h2,h3,h4,p{margin:0}
[hidden]{display:none !important}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── Movimiento ─────────────────────────────────────────────────
   Cada animación responde a una razón: jerarquía, secuencia,
   respuesta a una acción o cambio de estado. Ninguna decora.     */
@keyframes riseIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes pageTurn{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes stampDrop{
  0%{opacity:0;transform:scale(2.5) rotate(var(--rot,-7deg));filter:blur(3px)}
  55%{opacity:1;transform:scale(.9) rotate(var(--rot,-7deg));filter:blur(0)}
  74%{transform:scale(1.05) rotate(var(--rot,-7deg))}
  100%{opacity:1;transform:scale(1) rotate(var(--rot,-7deg))}
}
@keyframes inkSpread{0%{opacity:.5;transform:scale(.4)}100%{opacity:0;transform:scale(2)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}
  40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}
@keyframes drift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-26px,-10px,0)}}
@keyframes foilSweep{0%{background-position:-140% 0}100%{background-position:240% 0}}
@keyframes confettiFall{
  0%{opacity:1;transform:translate3d(0,-10vh,0) rotate(0)}
  100%{opacity:0;transform:translate3d(var(--dx,0),105vh,0) rotate(var(--spin,540deg))}
}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(0,103,184,.38)}
  70%{box-shadow:0 0 0 13px rgba(0,103,184,0)}100%{box-shadow:0 0 0 0 rgba(0,103,184,0)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .confetti{display:none !important}
}

/* ── Estructura ─────────────────────────────────────────────── */
.app{min-height:100dvh;display:flex;flex-direction:column}
main{flex:1;padding:var(--s-6) var(--s-4) var(--s-9)}
.wrap{max-width:960px;margin:0 auto}
.col{max-width:600px;margin:0 auto}
.view{animation:pageTurn 300ms var(--ease) both}

/* ── Materiales de marca ────────────────────────────────────────
   pixfield   mosaico de píxeles del sistema gráfico DD26
   guilloche  trama de seguridad, sólo dentro del documento
   arc        el arco del sistema gráfico, sangrado por una esquina */
.pixfield{position:absolute;inset:-12%;pointer-events:none;opacity:.3}
.pixfield svg{width:100%;height:100%}
.topbar .pixfield{animation:drift 30s ease-in-out infinite alternate}
.guilloche{position:absolute;inset:-14%;pointer-events:none;opacity:.12;color:var(--dd-amber)}
.guilloche svg{width:100%;height:100%}
.arc{position:absolute;pointer-events:none}

/* ── Cabecera ───────────────────────────────────────────────── */
.topbar{
  position:relative;overflow:hidden;
  background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  color:var(--on-navy);
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--dd-blue),var(--dd-sky),var(--dd-lime),var(--dd-amber),var(--dd-orange),var(--dd-blue));
  background-size:220% 100%;animation:foilSweep 14s linear infinite;
}
.topbar-in{
  position:relative;max-width:960px;margin:0 auto;min-height:64px;
  padding:9px var(--s-4);display:flex;align-items:center;gap:var(--s-3);
}
.crest{
  width:38px;height:38px;flex:none;border-radius:var(--r-ctl);
  background:var(--card);display:grid;place-items:center;padding:5px;
  box-shadow:0 1px 3px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.6);
}
.crest{color:var(--dd-navy)}
.crest svg{width:100%;height:auto}
.wordmark{flex:1;min-width:0;line-height:1.1}
.wordmark b{
  display:block;font-family:var(--display);font-size:var(--t-md);font-weight:700;
  letter-spacing:-.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.wordmark span{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--dd-amber);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.me{
  display:flex;align-items:center;gap:10px;flex:none;
  background:rgba(255,255,255,.08);border:1px solid rgba(246,164,22,.3);
  border-radius:var(--r-pill);padding:4px 4px 4px 13px;
  transition:background 180ms var(--ease),border-color 180ms var(--ease);
}
.me:hover{background:rgba(255,255,255,.15);border-color:rgba(246,164,22,.55)}
.me-txt{text-align:right;line-height:1.15;min-width:0}
.me-nm{display:block;font-size:var(--t-xs);font-weight:650;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:13ch}
.me-pt{font-family:var(--mono);font-size:10px;color:var(--dd-amber);letter-spacing:.06em}
.me-btn{
  width:34px;height:34px;flex:none;border-radius:50%;
  border:1px solid rgba(246,164,22,.34);background:rgba(4,22,47,.6);
  color:var(--dd-amber);display:grid;place-items:center;
  transition:transform 220ms var(--ease),background 180ms var(--ease);
}
.me-btn:hover{background:var(--navy-700);transform:rotate(90deg)}
.me-btn svg{width:16px;height:16px}

/* ── Navegación: cinco secciones ────────────────────────────── */
.nav{
  position:sticky;top:0;z-index:40;
  background:color-mix(in srgb,var(--paper) 90%,transparent);
  backdrop-filter:blur(14px) saturate(1.5);
  -webkit-backdrop-filter:blur(14px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.nav-in{max-width:960px;margin:0 auto;padding:0 var(--s-4);display:flex;gap:2px}
.tab{
  position:relative;flex:1;border:0;background:none;padding:14px 6px 13px;
  display:flex;align-items:center;justify-content:center;gap:7px;
  font-size:var(--t-sm);font-weight:600;color:var(--ink-3);white-space:nowrap;
  transition:color 180ms var(--ease);
}
.tab svg{width:17px;height:17px;flex:none;transition:transform 220ms var(--ease)}
.tab:hover{color:var(--ink)}
.tab:hover svg{transform:translateY(-2px)}
.tab[aria-selected="true"]{color:var(--navy-800);font-weight:700}
.tab[aria-selected="true"]::after{
  content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;
  border-radius:3px 3px 0 0;background:var(--sky-700);
  animation:fadeIn 200ms var(--ease);
}
.tab-n{
  min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);
  background:var(--dd-amber);color:var(--navy-900);
  font-family:var(--mono);font-size:10px;font-weight:700;display:grid;place-items:center;
}

/* ── Tipografía ─────────────────────────────────────────────────
   Sin etiquetas versales encima de los titulares. El titular basta. */
.h1{font-family:var(--display);font-size:var(--t-2xl);font-weight:750;line-height:1.06;
  letter-spacing:-.028em;color:var(--navy-800);text-wrap:balance}
.h2{font-family:var(--display);font-size:var(--t-xl);font-weight:700;line-height:1.14;
  letter-spacing:-.022em;color:var(--navy-800)}
.h3{font-family:var(--display);font-size:var(--t-md);font-weight:700;line-height:1.25;
  letter-spacing:-.014em;color:var(--navy-800)}
.sub{color:var(--ink-2);line-height:1.6;max-width:56ch}
.small{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.tiny{font-size:var(--t-xs);color:var(--ink-3);line-height:1.45}
.mono{font-family:var(--mono);letter-spacing:.03em}

.head{margin-bottom:var(--s-5)}
.head .sub{margin-top:8px}
.rule{border:0;border-top:1px solid var(--line);margin:var(--s-6) 0 var(--s-5)}

/* ── Controles ──────────────────────────────────────────────── */
.field{margin-bottom:var(--s-4)}
.lab{display:block;font-size:var(--t-sm);font-weight:650;color:var(--ink);margin-bottom:7px}
.input,.select,.textarea{
  width:100%;padding:13px 15px;background:var(--card);color:var(--ink);
  border:1.5px solid var(--edge);border-radius:var(--r-ctl);font-size:var(--t-base);
  transition:border-color 160ms var(--ease),box-shadow 160ms var(--ease),background 160ms var(--ease);
}
.textarea{resize:vertical;min-height:84px;line-height:1.5}
.select{
  appearance:none;-webkit-appearance:none;padding-right:40px;
  background-image:var(--caret);background-repeat:no-repeat;
  background-position:right 14px center;background-size:15px;
}
.input::placeholder,.textarea::placeholder{color:#697F96}
.input:hover,.select:hover,.textarea:hover{border-color:var(--ink-3)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--sky-700);
  box-shadow:0 0 0 4px rgba(0,103,184,.16);background:#fff;
}
.input[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 4px rgba(192,52,27,.13)}
.hint{font-size:var(--t-xs);color:var(--ink-3);margin-top:6px;line-height:1.45}
.bad{display:flex;gap:7px;align-items:flex-start;font-size:var(--t-sm);
  color:var(--danger);margin-top:9px;font-weight:550;line-height:1.45}
.bad svg{width:15px;height:15px;flex:none;margin-top:2px}
.good{display:flex;gap:7px;align-items:flex-start;font-size:var(--t-sm);
  color:var(--green-700);margin-top:9px;font-weight:600;line-height:1.45}
.good svg{width:16px;height:16px;flex:none;margin-top:1px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border:1.5px solid transparent;border-radius:var(--r-btn);
  font-family:var(--display);font-size:var(--t-base);font-weight:600;
  letter-spacing:-.008em;white-space:nowrap;
  transition:transform 150ms var(--ease),box-shadow 150ms var(--ease),
             background 150ms var(--ease),border-color 150ms var(--ease),color 150ms var(--ease);
}
.btn svg{width:18px;height:18px;flex:none}
.btn-full{width:100%}
.btn-lg{padding:16px 26px;font-size:var(--t-md)}
.btn-sm{padding:9px 14px;font-size:var(--t-sm);gap:6px}
.btn-sm svg{width:15px;height:15px}

.btn-1{background:var(--sky-700);color:#fff;box-shadow:0 2px 4px rgba(0,80,137,.22),0 10px 22px rgba(0,103,184,.24)}
.btn-1:hover:not(:disabled){background:var(--sky-800);transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,80,137,.26),0 18px 34px rgba(0,103,184,.3)}
.btn-1:active:not(:disabled){transform:translateY(0) scale(.985)}

.btn-seal{background:var(--dd-amber);color:var(--navy-900);
  box-shadow:0 2px 4px rgba(143,87,0,.22),0 10px 22px rgba(246,164,22,.34)}
.btn-seal:hover:not(:disabled){background:var(--dd-orange);transform:translateY(-2px);
  box-shadow:0 4px 8px rgba(143,87,0,.26),0 18px 34px rgba(246,164,22,.42)}
.btn-seal:active:not(:disabled){transform:translateY(0) scale(.985)}

.btn-ok{background:var(--green-700);color:#fff;box-shadow:0 2px 4px rgba(68,88,18,.22),0 10px 22px rgba(88,113,23,.24)}
.btn-ok:hover:not(:disabled){background:var(--green-800);transform:translateY(-2px)}

.btn-2{background:transparent;border-color:var(--edge);color:var(--navy-800)}
.btn-2:hover:not(:disabled){border-color:var(--navy-800);background:var(--paper-2);transform:translateY(-1px)}

.btn-3{background:transparent;color:var(--ink-2);padding:9px 12px}
.btn-3:hover:not(:disabled){color:var(--navy-800);background:var(--paper-2)}

.btn:disabled{background:var(--paper-3);color:var(--ink-2);box-shadow:none;transform:none;border-color:transparent}
.btn-2:disabled{background:transparent;border-color:var(--line-2);color:var(--ink-2)}
.btn.busy{pointer-events:none;position:relative;color:transparent}
.btn.busy::after{content:"";position:absolute;width:17px;height:17px;border-radius:50%;
  border:2.5px solid rgba(255,255,255,.32);border-top-color:#fff;animation:spin .6s linear infinite}
.btn-seal.busy::after{border-color:rgba(4,22,47,.25);border-top-color:var(--navy-900)}
.btn-2.busy::after{border-color:rgba(6,34,72,.2);border-top-color:var(--navy-800)}

/* Botón sobre superficie navy (documento, reto insignia) */
.on-navy-btn{background:var(--dd-amber);color:var(--navy-900);border-color:transparent}
.on-navy-btn:hover:not(:disabled){background:var(--dd-orange);transform:translateY(-2px)}

/* ── El documento ───────────────────────────────────────────────
   Navy con mosaico de píxeles, guilloche y banda MRZ. Es el único
   lugar del producto donde vive el tratamiento versal-monoespaciado:
   son los campos de un documento, no etiquetas de sección.       */
.doc{
  position:relative;overflow:hidden;border-radius:var(--r-doc);
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  color:var(--on-navy);box-shadow:var(--e-3);
  border:1px solid rgba(246,164,22,.24);
}
.doc .pixfield{opacity:.22}
.doc .guilloche{opacity:.11}
.doc-in{position:relative;padding:var(--s-5)}
.doc-top{
  display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s-4);
  padding-bottom:var(--s-4);border-bottom:1px solid rgba(246,164,22,.26);
}
.doc-kind{font-family:var(--mono);font-size:9.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dd-amber)}
.doc-id{font-family:var(--mono);font-size:var(--t-2xl);font-weight:700;
  letter-spacing:.03em;line-height:1;margin-top:6px;text-shadow:0 2px 10px rgba(0,0,0,.35)}
.doc-grid{display:grid;grid-template-columns:80px 1fr;gap:var(--s-4);
  padding:var(--s-4) 0;align-items:start}
.face{
  aspect-ratio:3/4;border-radius:var(--r-ctl);overflow:hidden;position:relative;
  background:linear-gradient(150deg,rgba(246,164,22,.28),rgba(4,22,47,.75));
  border:1px solid rgba(246,164,22,.38);display:grid;place-items:center;
  box-shadow:inset 0 0 22px rgba(0,0,0,.45);
}
.face b{position:relative;font-family:var(--display);font-size:27px;font-weight:700;
  letter-spacing:-.03em;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.face::after{content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(115deg,transparent 0 5px,rgba(246,164,22,.1) 5px 6px)}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(102px,1fr));gap:var(--s-4) var(--s-3)}
.fields > div:first-child{grid-column:1/-1}
.fields dt{font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--dd-amber);margin-bottom:4px}
.fields dd{margin:0;font-size:var(--t-base);font-weight:600;line-height:1.25;word-break:break-word}
.mrz{
  background:var(--paper);color:var(--navy-900);
  padding:10px var(--s-5) 12px;font-family:var(--mono);
  font-size:clamp(8px,2.5vw,11.5px);font-weight:500;letter-spacing:.12em;
  line-height:1.7;white-space:nowrap;overflow:hidden;
  border-top:1px solid rgba(246,164,22,.45);
}

.flag{width:19px;height:13px;border-radius:2.5px;flex:none;min-width:19px;
  box-shadow:0 0 0 1px rgba(0,0,0,.15);overflow:hidden}
.frow{display:inline-flex;align-items:center;gap:7px;min-width:0}

/* ── Tapa de entrada: el logotipo DD26 sobre el arco ────────── */
.cover{
  position:relative;overflow:hidden;border-radius:var(--r-doc);
  background:linear-gradient(155deg,var(--navy-700),var(--navy-900));
  color:var(--on-navy);box-shadow:var(--e-3);
  border:1px solid rgba(246,164,22,.24);
  padding:var(--s-6) var(--s-5) var(--s-5);
}
.cover .pixfield{opacity:.3;inset:auto -8% -20% 34%;height:88%;width:78%}
.cover .arc{right:-14%;bottom:-30%;width:66%;opacity:.8}
.cover-logo{position:relative;width:min(290px,78%);margin-bottom:var(--s-5);color:#fff}
.cover-logo svg{width:100%;height:auto}
.cover h2{position:relative;font-family:var(--display);font-size:var(--t-xl);
  font-weight:700;letter-spacing:-.022em;line-height:1.1}
.cover p{position:relative;font-family:var(--mono);font-size:var(--t-sm);
  color:var(--dd-amber);letter-spacing:.14em;margin-top:7px}
.cover .frow{position:relative;margin-top:20px;gap:11px}

/* ── Marcador: banda con filetes, sin caja ─────────────────── */
.score{
  display:flex;flex-wrap:wrap;gap:var(--s-5) var(--s-7);align-items:flex-end;
  padding:var(--s-5) 0 var(--s-4);
}
.score-big{font-family:var(--mono);font-size:var(--t-3xl);font-weight:700;
  line-height:.9;letter-spacing:-.03em;color:var(--navy-800)}
.score-of{font-family:var(--display);font-size:var(--t-md);font-weight:500;color:var(--ink-3)}
.score-k{font-size:var(--t-sm);color:var(--ink-2);margin-bottom:6px}
.score-v{font-family:var(--mono);font-size:var(--t-xl);font-weight:700;color:var(--navy-800);line-height:1}

.meter{height:12px;border-radius:var(--r-pill);background:var(--paper-3);
  overflow:hidden;box-shadow:inset 0 1px 3px rgba(6,34,72,.14)}
.meter i{display:block;height:100%;border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--dd-blue),var(--dd-sky) 40%,var(--dd-lime) 72%,var(--dd-amber));
  transition:width 900ms var(--ease)}
.meter.sm{height:8px}

/* Desglose plegable: no compite con el documento */
.ledger{margin-top:var(--s-4)}
.ledger > summary{
  list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;
  font-size:var(--t-sm);font-weight:600;color:var(--sky-800);padding:6px 0;
}
.ledger > summary::-webkit-details-marker{display:none}
.ledger > summary svg{width:16px;height:16px;transition:transform 220ms var(--ease)}
.ledger[open] > summary svg{transform:rotate(180deg)}
.lrow{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);
  padding:9px 0;border-top:1px solid var(--line);font-size:var(--t-sm)}
.lrow span{color:var(--ink-2)}
.lrow b{font-family:var(--mono);font-weight:700;color:var(--navy-800)}
.lrow.tot b{color:var(--green-700);font-size:var(--t-base)}

/* ── Sellos redondos: proyectos ─────────────────────────────── */
.stamps{display:grid;grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:var(--s-4)}
.slot{
  position:relative;aspect-ratio:1;border-radius:var(--r-doc);
  background:repeating-linear-gradient(45deg,transparent 0 9px,rgba(6,34,72,.03) 9px 10px),var(--paper-2);
  border:1.5px dashed var(--line-2);
  display:grid;place-items:center;text-align:center;padding:10px;
  transition:border-color 200ms var(--ease),transform 200ms var(--ease);
}
.slot:hover{border-color:var(--ink-3);transform:translateY(-2px)}
.slot-n{font-family:var(--mono);font-size:var(--t-lg);font-weight:700;color:var(--ink-2)}
.slot-t{font-size:10.5px;font-weight:600;color:var(--ink-2);line-height:1.3;margin-top:4px}
.slot.on{border:0;background:none;padding:0}
.slot.on:hover{transform:translateY(-3px) rotate(1deg)}
.stamp{width:100%;height:100%;animation:stampDrop 620ms var(--ease) both}
.burst{position:absolute;inset:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(88,113,23,.5),transparent 62%);
  animation:inkSpread 700ms var(--ease) forwards}

/* ── Visados rectangulares: proveedores ─────────────────────────
   Un pasaporte real distingue el sello de entrada, redondo, del
   visado, rectangular y pegado a la página. Aquí hace lo mismo:
   la forma dice de qué tipo de stand viene el sello.             */
.visas{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:var(--s-4)}
.vslot{
  position:relative;aspect-ratio:8/5;border-radius:var(--r-ctl);
  background:repeating-linear-gradient(-45deg,transparent 0 9px,rgba(143,87,0,.035) 9px 10px),var(--amber-50);
  border:1.5px dashed #D9B98A;
  display:grid;place-items:center;text-align:center;padding:10px;
  transition:border-color 200ms var(--ease),transform 200ms var(--ease);
}
.vslot:hover{border-color:var(--amber-700);transform:translateY(-2px)}
.vslot-n{font-family:var(--mono);font-size:var(--t-md);font-weight:700;color:var(--amber-800)}
.vslot-t{font-size:10.5px;font-weight:600;color:var(--amber-800);line-height:1.3;margin-top:4px}
.vslot.on{border:0;background:none;padding:0}
.vslot.on:hover{transform:translateY(-3px) rotate(-1deg)}
.visa{width:100%;height:100%;animation:stampDrop 620ms var(--ease) both}

/* ── PIN ────────────────────────────────────────────────────── */
.pin{display:flex;gap:10px;justify-content:center}
.pin input{
  width:60px;height:72px;text-align:center;
  font-family:var(--mono);font-size:28px;font-weight:700;color:var(--navy-800);
  background:var(--card);border:2px solid var(--edge);border-radius:var(--r-btn);
  transition:border-color 150ms var(--ease),box-shadow 150ms var(--ease),transform 150ms var(--ease);
}
.pin input:focus{outline:none;border-color:var(--amber-700);transform:translateY(-3px);
  box-shadow:0 0 0 4px rgba(143,87,0,.15), 0 8px 18px rgba(143,87,0,.16)}
.pin input:not(:placeholder-shown){border-color:var(--navy-600);background:#fff}
.pin.wrong{animation:shake 420ms var(--ease)}
.pin.wrong input{border-color:var(--danger)}
.pin.sm input{width:48px;height:58px;font-size:22px}

/* ── Listas por filete. Sin tarjetas anidadas ───────────────── */
.list{border-top:1px solid var(--line)}
.row{display:flex;align-items:center;gap:var(--s-3);padding:13px 2px;
  border-bottom:1px solid var(--line)}
.row-n{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;
  color:var(--ink-3);width:26px;flex:none}
.row-b{flex:1;min-width:0}
.row-t{display:block;font-size:var(--t-base);font-weight:600;color:var(--navy-800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row-s{display:block;font-size:var(--t-xs);color:var(--ink-3);line-height:1.4;margin-top:1px;
  display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.row-tag{font-family:var(--mono);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill);flex:none}
.row-tag.ok{background:var(--green-50);color:var(--green-800)}
.row-tag.wait{background:var(--paper-2);color:var(--ink-2)}
.row.is-done .row-t{color:var(--ink-2)}
.row.is-done .row-n{color:var(--green-700)}

/* ── Retos: fila plegable sobre filete ──────────────────────── */
.q{border-bottom:1px solid var(--line)}
.q-head{display:flex;align-items:center;gap:var(--s-3);width:100%;
  padding:15px 2px;background:none;border:0;text-align:left}
.q-ic{width:34px;height:34px;flex:none;border-radius:var(--r-ctl);display:grid;place-items:center;
  background:var(--paper-2);color:var(--ink-2);transition:background 180ms var(--ease),color 180ms var(--ease)}
.q-ic svg{width:18px;height:18px}
.q.done .q-ic{background:var(--green-700);color:#fff}
.q-b{flex:1;min-width:0}
.q-t{display:block;font-family:var(--display);font-size:var(--t-base);font-weight:650;
  color:var(--navy-800);line-height:1.3}
.q-s{display:block;font-size:var(--t-xs);color:var(--ink-3);margin-top:2px;line-height:1.4}
.q-p{font-family:var(--mono);font-size:var(--t-sm);font-weight:700;flex:none;
  color:var(--ink-2);white-space:nowrap}
.q.done .q-p{color:var(--green-700)}
.q-chev{width:17px;height:17px;flex:none;color:var(--ink-3);transition:transform 220ms var(--ease)}
.q[open] .q-chev{transform:rotate(180deg)}
.q.locked{opacity:.58}
.q.locked .q-head{cursor:default}
.q-panel{padding:0 2px var(--s-5) 50px;animation:riseIn 240ms var(--ease) both}
.q-panel > * + *{margin-top:var(--s-3)}
.q-how{font-size:var(--t-sm);color:var(--ink-2);line-height:1.55;/* max-width:52ch*/} 

/* El reto insignia: única fila con superficie de documento */
.q.hero{border-bottom:0;background:linear-gradient(150deg,var(--navy-700),var(--navy-900));
  color:var(--on-navy);border-radius:var(--r-doc);overflow:hidden;position:relative;
  margin-bottom:var(--s-5);box-shadow:var(--e-2);border:1px solid rgba(246,164,22,.24)}
.q.hero .pixfield{opacity:.26}
.q.hero .arc{right:-16%;bottom:-66%;width:44%;opacity:.34}
.q.hero-alt .arc{right:auto;left:-16%;bottom:-66%;transform:scaleX(-1)}
.q.hero-alt{background:linear-gradient(200deg,var(--navy-700),var(--navy-900))}
.q.hero .q-head{padding:var(--s-4);position:relative}
.q.hero .q-t{color:#fff;font-size:var(--t-md)}
.q.hero .q-s{color:var(--on-navy-2)}
.q.hero .q-p{color:var(--dd-amber);font-size:var(--t-base)}
.q.hero .q-chev{color:var(--dd-amber)}
.q.hero .q-ic{background:rgba(246,164,22,.2);color:var(--dd-amber)}
.q.hero.done .q-ic{background:var(--dd-lime);color:var(--navy-900)}
.q.hero .q-panel{position:relative;padding:0 var(--s-4) var(--s-4);color:#E6EEF7}
.q.hero .q-how{color:var(--on-navy-2)}
.q.hero .lab{color:#fff}
.q.hero .hint{color:var(--on-navy-2)}
.q.hero .good{color:var(--dd-lime)}
.q.hero .meter{background:rgba(4,22,47,.55);box-shadow:inset 0 1px 3px rgba(0,0,0,.4)}
.q.hero .lrow{border-color:rgba(246,164,22,.22)}
.q.hero .lrow span{color:var(--on-navy-2)}
.q.hero .lrow b{color:#fff}

/* Cabecera de grupo dentro de Retos */
.group-h{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);
  margin:var(--s-6) 0 var(--s-2)}
.group-h b{font-family:var(--display);font-size:var(--t-base);font-weight:700;color:var(--navy-800)}
.group-h span{font-size:var(--t-xs);color:var(--ink-3)}

/* Prueba fotográfica */
.shot{display:flex;gap:var(--s-3);align-items:center;
  border:1.5px dashed var(--edge);border-radius:var(--r-btn);padding:12px;
  transition:border-color 160ms var(--ease),background 160ms var(--ease)}
.shot:hover{border-color:var(--sky-700);background:var(--sky-50)}
.q.hero .shot{border-color:rgba(246,164,22,.4)}
.q.hero .shot:hover{border-color:var(--dd-amber);background:rgba(255,255,255,.06)}
.shot img,.shot .ph{width:58px;height:58px;flex:none;border-radius:var(--r-ctl);
  object-fit:cover;background:var(--paper-3);display:grid;place-items:center;color:var(--ink-3)}
.shot-x{flex:1;min-width:0}
.shot-x b{display:block;font-size:var(--t-sm);font-weight:650}
.shot-x span{font-size:var(--t-xs);color:var(--ink-3)}
.q.hero .shot-x span{color:var(--on-navy-2)}

/* Declaración de honor */
.oath{display:flex;gap:11px;align-items:flex-start;cursor:pointer;padding:2px}
.oath input{width:19px;height:19px;flex:none;margin:1px 0 0;accent-color:var(--green-700)}
.oath span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.q.hero .oath span{color:var(--on-navy-2)}

/* Estrellas */
.rate{display:flex;gap:3px}
.rate button{width:32px;height:32px;border:0;background:none;padding:0;
  color:var(--line-2);display:grid;place-items:center;
  transition:transform 150ms var(--ease),color 150ms var(--ease)}
.rate button svg{width:25px;height:25px}
.rate button:hover{transform:scale(1.2) rotate(-6deg)}
.rate button.on{color:var(--dd-amber)}
.rate button.on svg{fill:currentColor}
.rateit{padding:14px 2px;border-bottom:1px solid var(--line)}
.rateit.did{opacity:.85}
.rateit-h{display:flex;align-items:center;gap:10px;margin-bottom:9px;flex-wrap:wrap}
.rateit-h b{flex:1;min-width:0;font-size:var(--t-sm);font-weight:650;color:var(--navy-800)}

/* Preguntas */
.qz{padding-top:var(--s-3);border-top:1px solid var(--line)}
.qz:first-of-type{border-top:0;padding-top:0}
.q.hero .qz{border-color:rgba(246,164,22,.24)}
.qz > p{font-size:var(--t-sm);font-weight:650;margin-bottom:8px;line-height:1.4}
.opt{display:flex;gap:10px;align-items:flex-start;cursor:pointer;padding:9px 12px;
  border:1.5px solid var(--edge);border-radius:var(--r-ctl);background:var(--card);
  margin-bottom:6px;transition:border-color 140ms var(--ease),background 140ms var(--ease)}
.opt:hover,.opt:has(input:checked){border-color:var(--sky-700);background:var(--sky-50)}
.opt input{width:17px;height:17px;flex:none;margin:1px 0 0}
.opt span{font-size:var(--t-sm);line-height:1.45;color:var(--ink)}
.q.hero .opt{background:rgba(255,255,255,.07);border-color:rgba(246,164,22,.3)}
.q.hero .opt span{color:#E6EEF7}
.q.hero .opt:hover,.q.hero .opt:has(input:checked){border-color:var(--dd-amber);background:rgba(255,255,255,.14)}

/* Banderas recolectadas (reto de embajador) */
.flags{display:flex;gap:9px;flex-wrap:wrap}
.flagchip{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;
  border-radius:var(--r-pill);border:1.5px solid var(--line-2);background:var(--card);
  font-size:var(--t-xs);font-weight:600;color:var(--ink-3)}
.flagchip.on{border-color:var(--green-700);background:var(--green-50);color:var(--green-800)}
.flagchip.self{border-style:dashed;opacity:.75}
.flagchip svg.flag{filter:saturate(.25)}
.flagchip.on svg.flag{filter:none}

/* ── Ranking ────────────────────────────────────────────────── */
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;align-items:end;margin-bottom:var(--s-5)}
.pod{position:relative;border-radius:var(--r-doc) var(--r-doc) 6px 6px;padding:var(--s-4) 10px 14px;
  text-align:center;overflow:hidden;box-shadow:var(--e-2);color:var(--navy-900);
  animation:riseIn 480ms var(--ease) both}
.pod .pixfield{opacity:.3}
.pod1{background:linear-gradient(160deg,var(--dd-orange),var(--dd-amber));min-height:164px;animation-delay:.1s}
.pod2{background:linear-gradient(160deg,#DCE7F1,#A7BACC);min-height:140px}
.pod3{background:linear-gradient(160deg,#C6DE7A,var(--dd-green));min-height:124px;animation-delay:.2s}
.pod.is-me{outline:3px solid var(--sky-700);outline-offset:3px}
.pod-r{position:relative;font-family:var(--mono);font-size:var(--t-lg);font-weight:700;
  line-height:1;opacity:.72;margin-bottom:7px}
.pod-n{position:relative;font-family:var(--display);font-size:var(--t-sm);font-weight:700;
  line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pod-p{position:relative;font-family:var(--mono);font-size:var(--t-lg);font-weight:700;margin-top:6px}
.pod-i{position:relative;font-family:var(--mono);font-size:9.5px;opacity:.78;margin-top:2px}

.rk{display:flex;align-items:center;gap:var(--s-3);padding:12px 2px;
  border-bottom:1px solid var(--line);transition:transform 200ms var(--ease)}
.rk:hover{transform:translateX(4px)}
.rk.is-me{background:var(--sky-50);border-radius:var(--r-ctl);padding-left:10px;padding-right:10px;
  border-bottom-color:transparent;animation:ping 2.2s var(--ease) 2}
.rk-p{width:30px;height:30px;flex:none;border-radius:50%;background:var(--navy-800);color:#fff;
  display:grid;place-items:center;font-family:var(--mono);font-size:var(--t-sm);font-weight:700}
.rk.is-me .rk-p{background:var(--sky-700)}
.rk-b{flex:1;min-width:0}
.rk-n{display:block;font-size:var(--t-base);font-weight:650;color:var(--navy-800);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rk-m{font-family:var(--mono);font-size:10px;color:var(--ink-3);letter-spacing:.05em;
  display:flex;align-items:center;gap:7px;margin-top:2px}
.rk-v{font-family:var(--mono);font-size:var(--t-md);font-weight:700;color:var(--sky-800);flex:none}

.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:var(--s-5)}
.chip{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-pill);white-space:nowrap;
  border:1.5px solid var(--edge);background:var(--card);
  font-size:var(--t-sm);font-weight:600;color:var(--ink-2);
  transition:background 160ms var(--ease),border-color 160ms var(--ease),color 160ms var(--ease)}
.chip:hover{border-color:var(--navy-700);color:var(--navy-800)}
.chip[aria-pressed="true"]{background:var(--navy-800);border-color:var(--navy-800);color:#fff}

/* ── Estados vacíos y avisos ────────────────────────────────── */
.empty{text-align:center;padding:var(--s-8) var(--s-4)}
.empty svg{width:38px;height:38px;color:var(--line-2);margin:0 auto var(--s-3)}
.empty b{display:block;font-family:var(--display);font-size:var(--t-md);
  color:var(--navy-800);font-weight:700;margin-bottom:6px}
.empty p{font-size:var(--t-sm);color:var(--ink-2);max-width:38ch;margin:0 auto;line-height:1.55}

.tip{display:flex;gap:10px;align-items:flex-start;font-size:var(--t-sm);
  line-height:1.5;color:var(--ink-2);padding:2px}
.tip svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--ink-3)}
.tip.warn{color:var(--amber-800)}
.tip.warn svg{color:var(--amber-800)}
.tip.ok{color:var(--green-700)}
.tip.ok svg{color:var(--green-700)}
.q.hero .tip{color:var(--on-navy-2)}
.q.hero .tip svg{color:var(--dd-amber)}

/* ── Avisos flotantes · Diálogo · Confeti ───────────────────── */
.toasts{position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(var(--s-5) + env(safe-area-inset-bottom));z-index:200;
  display:flex;flex-direction:column;gap:9px;width:min(420px,calc(100vw - 28px));pointer-events:none}
.toast{display:flex;gap:11px;align-items:flex-start;background:var(--navy-800);color:#fff;
  border:1px solid rgba(246,164,22,.32);border-radius:var(--r-btn);padding:13px 16px;
  box-shadow:var(--e-3);animation:riseIn 300ms var(--ease) both;pointer-events:auto}
.toast svg{width:19px;height:19px;flex:none;margin-top:1px}
.toast b{display:block;font-family:var(--display);font-size:var(--t-sm);font-weight:700}
.toast span{font-size:var(--t-xs);color:var(--on-navy-2);line-height:1.45;display:block;margin-top:2px}
.toast.ok svg{color:var(--dd-lime)}
.toast.err svg{color:var(--dd-amber)}
.toast.gold{background:linear-gradient(140deg,var(--amber-700),var(--navy-800));border-color:var(--dd-amber)}
.toast.gold svg{color:var(--dd-orange)}

dialog{border:0;padding:0;background:transparent;
  max-width:min(540px,calc(100vw - 24px));width:100%;max-height:calc(100dvh - 40px)}
dialog::backdrop{background:rgba(4,22,47,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px)}
dialog[open]{animation:riseIn 280ms var(--ease) both}
.modal{background:var(--card);border-radius:var(--r-doc);box-shadow:var(--e-3);
  overflow:hidden;max-height:calc(100dvh - 40px);display:flex;flex-direction:column}
.modal-h{display:flex;align-items:flex-start;gap:var(--s-3);padding:var(--s-5) var(--s-5) var(--s-3)}
.modal-h .h2{flex:1;min-width:0;font-size:var(--t-lg)}
.modal-b{padding:0 var(--s-5) var(--s-5);overflow-y:auto}
.modal-f{display:flex;gap:10px;padding:var(--s-4) var(--s-5);
  border-top:1px solid var(--line);background:var(--paper-2)}
.modal-f .btn{flex:1}
.x{width:32px;height:32px;flex:none;border-radius:50%;border:0;background:var(--paper-2);
  color:var(--ink-2);display:grid;place-items:center;
  transition:background 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease)}
.x:hover{background:var(--paper-3);color:var(--navy-800);transform:rotate(90deg)}
.x svg{width:16px;height:16px}

.confetti{position:fixed;inset:0;pointer-events:none;z-index:300;overflow:hidden}
.confetti i{position:absolute;top:0;width:10px;height:10px;
  animation:confettiFall var(--cd,2.4s) var(--ease-in) forwards}
/* ── Cara del pasaporte: editable ────────────────────────────────
   El botón .face es la foto/iniciales del titular. Al pasar el
   mouse por encima aparece un ícono de lápiz sobre un círculo
   oscuro para indicar que se puede tocar y cambiar la foto.
   En móvil (sin hover real) el ícono se ve siempre. */

.face{
  position:relative;
  padding:0;
  cursor:pointer;
  overflow:hidden;
}

/* El ícono: círculo oscuro con lápiz blanco, centrado abajo. */
.face::after{
  content:"";
  position:absolute;
     left: 29px;
    right: 0;
    bottom: 0;
    margin: auto;
    top: 0;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(4,22,47,.78);
  border:1px solid rgba(246,164,22,.55);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  opacity:0;
  transition:opacity 200ms var(--ease), transform 200ms var(--ease);
  pointer-events:none;
  /* El lápiz se dibuja con un SVG en data URI para no depender
     de un elemento HTML extra dentro del botón. */
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F6A416' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16.4 3.6a2.3 2.3 0 0 1 3.3 3.3L8.2 18.4l-4.4 1.1 1.1-4.4Z'/%3E%3Cpath d='m14.6 5.4 3.3 3.3'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center;
  background-size:14px 14px;
  background-blend-mode:normal;
  z-index:2;
}

/* Al pasar el mouse: aparece con leve subida. */
.face:hover::after,
.face:focus-visible::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* Oscurece un poco la foto al pasar el mouse para que se lea el ícono. */
.face::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(4,22,47,0);
  transition:background 200ms var(--ease);
  pointer-events:none;
  z-index:1;
}
.face:hover::before,
.face:focus-visible::before{
  background:rgba(4,22,47,.35);
}
/* ═══════════════════════════════════════════════════════════════
   VISOR DE MAPAS 3D (con <model-viewer>)
   ═══════════════════════════════════════════════════════════════ */

/* El wrapper mantiene visor + controles juntos. */
.map-wrapper{
  position: relative;
  width: 100%;
}

/* Visor 3D */
.map-viewer{
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: linear-gradient(135deg, #062248 0%, #0A3A6B 100%);
  box-shadow: 0 4px 20px rgba(6, 34, 72, 0.15);
}

.map-viewer model-viewer{
  display: block;
  width: 100%;
  height: 100%;
  --poster-color: transparent;
  --progress-bar-color: #FFAE00;
  --progress-bar-height: 3px;
}

.map-viewer-legend{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--s-4);
  background: linear-gradient(to top, rgba(6, 34, 72, 0.9), transparent);
  color: #fff;
  pointer-events: none;
  z-index: 1;
}

.map-viewer-legend p{
  margin: 0;
}

.map-viewer-legend b{
  font-size: var(--t-lg);
  font-weight: 700;
}

.map-viewer-legend .tiny{
  opacity: 0.7;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   BOTONES DE CONTROL
   ═══════════════════════════════════════════════════════════════
   Desktop: flotan arriba a la derecha del visor.
   Móvil: se colocan debajo del visor (media query al final). */

.map-controls{
  position: absolute;
  top: var(--s-3);
  right: var(--s-3);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  z-index: 2;
}

.map-ctrl{
  width: 38px;
  height: 38px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(6, 34, 72, 0.75);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.map-ctrl:hover{
  background: rgba(6, 34, 72, 0.95);
  border-color: rgba(255, 255, 255, 0.4);
}

.map-ctrl:active{
  transform: scale(0.94);
}

.map-ctrl:focus-visible{
  outline: 2px solid var(--dd-amber);
  outline-offset: 2px;
}

.map-ctrl svg{
  width: 18px;
  height: 18px;
}

.map-ctrl[aria-pressed="true"]{
  background: var(--dd-amber);
  border-color: var(--dd-amber);
  color: #062248;
}

/* El botón de paneo ocupa las 4 columnas de su fila */
.map-ctrl[data-map-pan]{
  grid-column: 3 / -1;
  width: 100%;
}
/* ═══════════════════════════════════════════════════════════════
   TOGGLE 3D / 2D
   ═══════════════════════════════════════════════════════════════ */

.map-modes{
  display: flex;
  gap: 6px;
  margin-top: var(--s-3);
}

.map-mode{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 600;
  font-family: var(--sans);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.map-mode svg{
  width: 16px;
  height: 16px;
}

.map-mode:hover{
  border-color: var(--ink-3);
  color: var(--ink-1);
}

.map-mode[aria-pressed="true"]{
  background: var(--dd-navy);
  border-color: var(--dd-navy);
  color: #fff;
}

.map-mode:focus-visible{
  outline: 2px solid var(--dd-amber);
  outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════
   VISOR 2D (imagen)
   ═══════════════════════════════════════════════════════════════ */

.map-viewer-2d{
  position: relative;
  width: 100%;
  height: 500px;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: #0A3A6B;
  box-shadow: 0 4px 20px rgba(6, 34, 72, 0.15);
  /* Cursor de zoom */
  cursor: zoom-in;
}

.map-viewer-2d[hidden]{
  display: none;
}

.map-viewer-2d img{
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #062248;
  transition: transform 0.3s ease;
}

/* Cuando está en modo "ampliado" (tras un clic) */
.map-viewer-2d.is-zoomed{
  cursor: zoom-out;
}

.map-viewer-2d.is-zoomed img{
  object-fit: cover;
  transform: scale(1.5);
}

/* Ocultar controles 3D cuando estamos en modo 2D */
.map-controls[hidden]{
  display: none;
}
/* ═══════════════════════════════════════════════════════════════
   BOTÓN DE SELLAR BLOQUEADO POR EVENTO CERRADO
   ═══════════════════════════════════════════════════════════════ */
.btn.is-locked,
.btn[disabled].is-locked {
  background: var(--ink-3, #94a3b8);
  color: white;
  cursor: not-allowed;
  opacity: 0.7;
  border-color: transparent;
}

.btn.is-locked:hover {
  background: var(--ink-3, #94a3b8);
  transform: none;
}

/* Inputs de PIN deshabilitados */
.pin input[disabled] {
  background: var(--bg-2, #f1f5f9);
  cursor: not-allowed;
}

/* Banner de evento cerrado */
[data-event-closed] {
  animation: slideDown 0.3s ease-out;
}
/* ═══════════════════════════════════════════════════════════════
   PANTALLA DE PORTAL CERRADO
   ═══════════════════════════════════════════════════════════════
   Bloqueo total: sin navegación, sin scroll, sin interacción.
   ═══════════════════════════════════════════════════════════════ */

#portal-closed-screen {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: linear-gradient(135deg, #062248 0%, #0A3A6B 100%);
    color: #ffffff;
    overflow: hidden;
    font-family: 'Outfit', system-ui, -apple-system, sans-serif;
}

#portal-closed-screen[hidden] {
    display: none;
}

.pcs-inner {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

/* ─── Arte decorativo de fondo ─── */
.pcs-art {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.15;
    pointer-events: none;
}

.pcs-pixfield {
    position: absolute;
    inset: 0;
}

.pcs-pixfield svg {
    width: 100%;
    height: 100%;
}

.pcs-arc {
    position: absolute;
    top: -20%;
    right: -10%;
    width: 80%;
    height: 80%;
    opacity: 0.3;
}

.pcs-arc svg {
    width: 100%;
    height: 100%;
}

.pcs-logo {
    position: absolute;
    bottom: 5%;
    left: 5%;
    width: 180px;
    height: 100px;
    opacity: 0.2;
}

.pcs-logo svg {
    width: 100%;
    height: 100%;
    fill: #ffffff;
}

/* ─── Contenido central ─── */
.pcs-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
    width: 100%;
    text-align: center;
    padding: 40px 32px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    animation: pcsFadeIn 0.6s ease-out;
}

.pcs-icon {
    font-size: 72px;
    line-height: 1;
    margin-bottom: 24px;
    animation: pcsBounce 2s ease-in-out infinite;
    display: inline-block;
}

.pcs-title {
    font-size: 32px;
    font-weight: 700;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
    color: #ffffff;
}

.pcs-message {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 32px;
    font-weight: 400;
}

.pcs-info {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 32px;
}

.pcs-info p {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
}

.pcs-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 24px;
}

.pcs-brand {
    font-size: 13px;
    font-weight: 600;
    color: #F6A416;
    margin: 0 0 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.pcs-region {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* ─── Animaciones ─── */
@keyframes pcsFadeIn {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.98);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pcsBounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

/* ─── Responsive ─── */
@media (max-width: 640px) {
    .pcs-content {
        padding: 32px 24px;
        border-radius: 20px;
    }
    
    .pcs-icon {
        font-size: 56px;
        margin-bottom: 20px;
    }
    
    .pcs-title {
        font-size: 26px;
    }
    
    .pcs-message {
        font-size: 15px;
    }
    
    .pcs-logo {
        width: 120px;
        height: 70px;
    }
}
@keyframes slideDown {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}
/* ═══════════════════════════════════════════════════════════════
   MÓVIL: ajustes
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 640px){
  .map-modes{
    justify-content: center;
  }

  .map-mode{
    flex: 1;
    justify-content: center;
    padding: 10px;
  }

  .map-viewer-2d{
    height: 380px;
  }
}
/* ═══════════════════════════════════════════════════════════════
   MÓVIL: botones fuera del visor, debajo del mapa
   ═══════════════════════════════════════════════════════════════
   En pantallas pequeñas, los botones flotantes tapan el mapa.
   Los sacamos del position: absolute y los colocamos en su
   propia fila debajo del visor, a todo el ancho. */
@media (max-width: 640px){

  /* El visor se reduce para dejar espacio a los botones. */
  .map-viewer{
    height: 380px;
  }

  .map-controls{
    position: static;          /* ← Ya no flota */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-top: var(--s-3);
    padding: 0;
    background: transparent;
    top: auto;
    right: auto;
    z-index: auto;
  }

  .map-ctrl{
    width: 100%;                /* ← Ocupan el ancho de su celda */
    height: 46px;               /* ← Más altos para el dedo */
    background: rgba(6, 34, 72, 0.95);
    border-color: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
  }

  .map-ctrl svg{
    width: 20px;
    height: 20px;
  }

  .map-ctrl[data-map-pan]{
    grid-column: 3 / -1;
    width: 100%;
  }

  /* La leyenda se queda dentro del visor. */
  .map-viewer-legend{
    padding: var(--s-3);
  }

  .map-viewer-legend b{
    font-size: var(--t-md);
  }
} 
/* En móvil (sin hover real) el ícono se ve siempre, más discreto. */
@media (hover: none){
  .face::after{
    opacity:1;
    transform:translateX(-50%) translateY(0);
    width:24px;height:24px;
    background-size:12px 12px;
  }
}

/* En pantallas táctiles el :hover se queda pegado; usamos :active
   para dar feedback del tap. */
@media (hover: none){
  .face:active::before{background:rgba(4,22,47,.45);}
}
/* ── Responsive: estructural, no tipográfico ────────────────── */
@media (min-width:760px){
  .fields{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fields > div:first-child{grid-column:auto}
  .doc .fields dd{font-size:var(--t-base)}
  .doc-grid{grid-template-columns:96px 1fr}
  .spread{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);
    gap:var(--s-7);align-items:start}
}
@media (max-width:759px){
  :root{--t-2xl:1.75rem;--t-3xl:2.25rem;--s-6:26px;--s-7:34px;--s-9:104px}
  .topbar-in{min-height:56px;padding:8px var(--s-4)}
  .crest{width:34px;height:34px;padding:4px}
  .wordmark b{font-size:var(--t-base)}
  .wordmark span{display:none}
  .me{padding:3px 3px 3px 9px;gap:7px}
  .me-nm{max-width:9ch}
  .me-id{display:none}
  .me-btn{width:36px;height:36px}
  .doc-in{padding:var(--s-4)}
  .cover{padding:var(--s-5) var(--s-4)}
  .cover-logo{width:min(240px,82%)}
  .mrz{padding:9px var(--s-4) 11px;letter-spacing:.07em}
  .stamps{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:11px}
  .visas{grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:11px}
  .pin{gap:8px}
  .pin input{width:52px;height:64px;font-size:24px}
  .pin.sm input{width:44px;height:54px;font-size:20px}
  .podium{gap:7px}
  .pod1{min-height:142px}.pod2{min-height:122px}.pod3{min-height:110px}
  .pod-n{font-size:var(--t-xs)}
  .q-panel{padding-left:2px}
  .score{gap:var(--s-4) var(--s-6)}
  /* Barra inferior fija: al alcance del pulgar */
  .nav{position:fixed;top:auto;bottom:0;left:0;right:0;
    border-top:1px solid var(--line);border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom);
    box-shadow:0 -2px 8px rgba(6,34,72,.06), 0 -12px 26px rgba(6,34,72,.05)}
  .nav-in{padding:0}
  .tab{flex-direction:column;gap:4px;padding:9px 2px 8px;font-size:10px;letter-spacing:-.01em}
  .tab svg{width:20px;height:20px}
  .tab[aria-selected="true"]::after{top:0;bottom:auto;left:20%;right:20%;border-radius:0 0 3px 3px}
  .tab-n{position:absolute;top:3px;right:calc(50% - 20px)}
  .toasts{bottom:calc(76px + env(safe-area-inset-bottom))}
}
@media (max-width:359px){
  .tab span{display:none}
  .tab{padding:11px 2px}
}

/* ── Impresión: el pasaporte como recuerdo ──────────────────── */
@media print{
  .nav,.me,.toasts,.btn,.ledger,.confetti,.topbar::after{display:none !important}
  body{background:#fff}
  main{padding:0}
  .doc,.cover,.q.hero{box-shadow:none;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .slot,.vslot{break-inside:avoid}
  .spread{display:block}
}