/* goatted · el sitio y el panel. Una sola noche: negro, hueso y concreto.
   El oro solo existe en lo ganado: tu número, tus señales, el First eyes, el foil de la carta y el paso del camino donde estás.
   Archivo condensada para titulares, Geist para leer, IBM Plex Mono para números y etiquetas. Todo servido desde aquí. */
@font-face{font-family:"Archivo";src:url("/assets/fonts/Archivo-wdth-wght.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-Medium.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Geist";src:url("/assets/fonts/Geist-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/ibm-plex-mono-600.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --negro:#060606;--noche:#060606;--asfalto:#0f0f0e;--caja:#0f0f0e;--campo:#121211;--concreto:#1c1b19;
  --linea:#2b2a27;--fina:#1c1b19;--hueso:#ece6d8;--tenue:#a19c90;--ceniza:#a19c90;--apagado:#838088;
  --oro:#d9b56a;--oro-vivo:#f6d98a;
  --oro-metal:linear-gradient(100deg,#7d5d22 0%,#e9c46f 22%,#fff0be 38%,#b98a36 55%,#f6d98a 72%,#8c6a2a 100%);
  --display:"Archivo","Arial Narrow","Helvetica Neue",Arial,sans-serif;
  --sans:"Geist",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:dark}
*{box-sizing:border-box}
html{background:var(--negro);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--hueso);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
img{max-width:100%}
a{color:var(--hueso);text-underline-offset:3px}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--hueso);outline-offset:3px}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mono{font-family:var(--mono)}
.gt-marca{text-transform:none}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);margin:0;line-height:1.5}
.lbl.oro{color:var(--hueso)}
.oro{color:var(--oro)}
.metal{background:var(--oro-metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gt-brillo 6s ease-in-out infinite}
@keyframes gt-brillo{0%,100%{background-position:0% 0}50%{background-position:100% 0}}
.tenue{color:var(--tenue)}
.chico{font-size:13px;line-height:1.5}
p{margin:0}

/* ---------- marco ---------- */
.marco{width:100%;max-width:480px;margin:0 auto;padding:0 22px;flex:1 0 auto;display:flex;flex-direction:column}
.cielo{background:linear-gradient(180deg,#060606 0%,#0a0a09 62%,#121110 86%,#060606 100%)}
.cabeza{display:flex;align-items:center;justify-content:space-between;padding:22px 0 8px}
.cabeza a{display:block;line-height:0}
.palabra{height:18px;width:auto;display:block}
.logo-vivo{position:relative;aspect-ratio:382/260;display:block}
.logo-vivo img,.logo-vivo svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.marca{width:44px}
.protagonista{width:182px}
.respira{animation:gt-respira 3.2s ease-in-out infinite}
.aparecer{animation:gt-aparecer .9s cubic-bezier(0,0,.2,1) both}
.subir{animation:gt-subir 1.1s cubic-bezier(.2,.8,.2,1) both}
html.con-rito body>*:not(.rito-capa){visibility:hidden;animation:gt-a-salvo 0s linear 12s forwards}
@keyframes gt-a-salvo{to{visibility:visible}}
html.con-rito .aparecer,html.con-rito .subir,html.con-rito .respira{animation-play-state:paused}
@keyframes gt-respira{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes gt-aparecer{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes gt-subir{0%{opacity:0;transform:scale(.6)}60%{opacity:1;transform:scale(1.08)}100%{transform:scale(1)}}
.corriente{fill:none;stroke:var(--oro);stroke-width:1;stroke-dasharray:4 5;animation:gt-fluir 2.8s linear infinite}
@keyframes gt-fluir{to{stroke-dashoffset:-36}}

/* ---------- titulares: grotesca condensada y negra, sin punto final ---------- */
.veredicto{padding:30px 0 26px;display:flex;flex-direction:column;gap:12px}
.titulo{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:clamp(58px,17vw,74px);line-height:.86;letter-spacing:-.005em;word-spacing:.06em;text-wrap:balance;overflow-wrap:break-word}
.titulo.medio{font-size:clamp(46px,13.4vw,60px);line-height:.88}
.serial{margin:0;font-family:var(--mono);font-size:clamp(30px,10.6vw,42px);font-weight:500;letter-spacing:-.03em;line-height:1.05;white-space:nowrap;background:var(--oro-metal);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gt-brillo 6s ease-in-out infinite}
.serial span{color:var(--tenue);-webkit-text-fill-color:var(--tenue)}
.serial.chico{font-size:24px}
.bajada{color:var(--tenue);font-size:15.5px}
.bloque{padding:28px 0;display:flex;flex-direction:column;gap:14px;border-top:1px solid var(--fina)}
.bloque.sin-linea{border-top:0;padding-top:4px}
.sub{margin:0;font-family:var(--display);font-stretch:72%;font-weight:800;text-transform:uppercase;font-size:30px;line-height:.95;letter-spacing:.005em;text-wrap:balance}
.foto{margin:0 -22px;aspect-ratio:4/3;background:#0e0e0d radial-gradient(120% 90% at 50% 40%,#191816,#090908);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .logo-vivo{width:96px;opacity:.16}
.ficha{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 16px}
.ficha div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ficha dt{font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue)}
.ficha dd{margin:0;font-size:15px;overflow-wrap:anywhere}
.ficha .ancho{grid-column:1/-1}
.historia-modelo{color:var(--tenue);font-size:15px;white-space:pre-line}

/* ---------- botones hueso: pedir algo nunca usa el color de lo ganado ---------- */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 20px;border:1px solid var(--hueso);background:transparent;color:var(--hueso);font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;width:100%;text-decoration:none;text-align:center;line-height:1.3;border-radius:0;-webkit-appearance:none;appearance:none}
.btn:hover{color:#fff;background:rgba(236,230,216,.07)}
.btn.lleno{background:var(--hueso);color:var(--negro);font-weight:600}
.btn.lleno:hover{background:#fff;color:var(--negro)}
.btn.hueso{border-color:var(--linea);color:var(--hueso)}
.btn.hueso:hover{border-color:var(--tenue)}
.btn.chico{min-height:44px;font-size:12px;padding:0 14px}
.btn[disabled]{opacity:.5;cursor:default}
.fila{display:flex;gap:10px}
.fila>*{flex:1 1 0;min-width:0}
.enlace{background:none;border:0;padding:6px 0;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.enlace:hover{color:var(--hueso)}
form.formulario{display:flex;flex-direction:column;gap:14px;margin:0}
.campo{display:flex;flex-direction:column;gap:7px;font-size:11px;color:var(--tenue);font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase}
.campo input,.campo textarea,.campo select{font-family:var(--sans);font-size:16px;letter-spacing:0;text-transform:none;height:50px;padding:0 14px;background:var(--campo);border:1px solid var(--linea);color:var(--hueso);border-radius:0;width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.campo textarea{height:110px;padding:12px 14px;resize:vertical;line-height:1.45}
.campo select{background-image:linear-gradient(45deg,transparent 50%,var(--tenue) 50%),linear-gradient(135deg,var(--tenue) 50%,transparent 50%);background-position:calc(100% - 20px) 21px,calc(100% - 15px) 21px;background-size:5px 5px;background-repeat:no-repeat;padding-right:36px}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--hueso);outline:0}
.campo .opcional{text-transform:none;letter-spacing:0;font-family:var(--sans);font-size:12px}
.tel{display:grid;grid-template-columns:84px minmax(0,1fr);gap:8px}
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- avisos, insignias y estados ---------- */
.insignia{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;height:28px;padding:0 12px;border:1px solid var(--linea);font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--hueso)}
.insignia::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.insignia.oro{border-color:var(--hueso);color:var(--hueso)}
.insignia.tenue{color:var(--tenue)}
.estado{border:1px solid var(--linea);padding:16px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--tenue);background:var(--caja)}
.estado strong{color:var(--hueso);font-size:15px;font-weight:600}
.estado.oro{border-color:var(--hueso)}
.estado.espera{border-style:dashed;border-color:var(--tenue)}
.estado.pasando{gap:8px}
.estado.pasando .insignia{margin-bottom:4px}
.estado.pasando .fila{margin-top:8px}
.revisa [data-listo]{max-width:340px;text-align:left;gap:8px}
.revisa [data-listo] .btn{margin-top:8px}
details.otro-correo summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);padding:6px 0;text-decoration:underline;text-underline-offset:3px}
details.otro-correo[open] summary{margin-bottom:12px}
.aviso{border-left:2px solid var(--hueso);padding:10px 0 10px 14px;font-size:14px;color:var(--hueso)}
.aviso.tenue{border-color:var(--linea);color:var(--tenue)}

/* ---------- adentro: la puerta se abrió ---------- */
.revelado{padding:22px 0 10px;display:flex;flex-direction:column;gap:16px}
.rv-numero{display:flex;flex-direction:column;gap:12px}
.rv-ojos{margin:0;font-family:var(--display);font-stretch:80%;font-weight:600;font-size:24px;line-height:1.1}
.rv-premio{border:1px solid var(--linea);padding:14px;display:flex;gap:14px;align-items:center;background:linear-gradient(135deg,rgba(233,196,111,.06),transparent 60%)}
.rv-premio div{display:flex;flex-direction:column;gap:2px;min-width:0}
.rv-premio strong{font-weight:600;font-size:15px}
.rv-premio span{font-size:13px;color:var(--tenue);line-height:1.45}
.rv-premio-fe{border-color:#6e5a32}
.rv-glifo{flex:none;width:40px;height:44px;fill:none;stroke:var(--oro);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.rv-glifo-ojos{flex:none;width:58px;fill:var(--oro-vivo);filter:drop-shadow(0 0 3px #ffcf66) drop-shadow(0 0 9px rgba(217,181,106,.8))}
.rv-mapa{display:flex;flex-direction:column;gap:8px}
.rv-mapa svg{width:100%;height:auto;max-width:436px}
.fe-pulso{transform-box:fill-box;transform-origin:50% 50%;animation:fe-pulso 2.4s ease-out infinite}
@keyframes fe-pulso{0%{transform:scale(1);opacity:.7}100%{transform:scale(4.5);opacity:0}}
.camino{display:flex;flex-direction:column;gap:9px}
.camino ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.camino li{border-top:3px solid #34322d;padding-top:8px;display:flex;flex-direction:column;gap:3px;min-width:0}
.camino li b,.camino li .mono{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:22px;text-transform:uppercase;letter-spacing:0;line-height:1;color:#8e897d}
.camino li small{font-size:11px;color:var(--tenue);line-height:1.3}
.camino li.hecho{border-color:var(--hueso)}
.camino li.hecho b,.camino li.hecho .mono{color:var(--hueso)}
.camino li.aqui{border-top:3px solid transparent;border-image:var(--oro-metal) 1}
.camino li.aqui b,.camino li.aqui .mono{color:var(--hueso)}

/* ---------- Awake (después de reclamar) ---------- */
.despierto{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:40px 0 24px}
.despierto h1{margin:0;font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;font-size:96px;line-height:.86}
.despierto .bajada{max-width:340px}
/* revisa tu correo: el sobre con su aviso es lo primero que se ve */
.revisa .sobre{width:96px;height:72px;fill:none;stroke:var(--hueso);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;overflow:visible}
.revisa .sobre .punto{fill:var(--oro);stroke:var(--negro);stroke-width:3;transform-origin:82px 12px;animation:gt-aviso 2.4s ease-in-out 1.2s infinite}
.revisa h1{font-size:clamp(56px,17vw,84px)}
@keyframes gt-aviso{0%,70%,100%{transform:scale(1)}80%{transform:scale(1.25)}}
@media (prefers-reduced-motion:reduce){.revisa .sobre .punto{animation:none}}

/* ---------- certificado, números e historia ---------- */
.certificado{border:1px solid var(--linea);background:var(--caja);padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:inset 0 0 0 1px rgba(236,230,216,.04)}
.certificado.espera{border-style:dashed}
.certificado .cert-cabeza{display:flex;justify-content:space-between;align-items:center;gap:12px}
.certificado .serial{font-size:34px}
.cert-filas{margin:0;display:grid;gap:8px}
.cert-filas div{display:flex;justify-content:space-between;gap:12px;border-top:1px dashed var(--linea);padding-top:8px;font-size:14px}
.cert-filas dt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue);padding-top:3px}
.cert-filas dd{margin:0;font-weight:600;text-align:right}
.numeros{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.numeros div{border:1px solid var(--fina);background:var(--caja);padding:12px;display:flex;flex-direction:column;gap:2px}
.numeros strong{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:34px;line-height:1;color:var(--hueso)}
.numeros span{font-size:12px;color:var(--tenue);line-height:1.3}
.linea-tiempo{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.linea-tiempo li{display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:12px;padding:0 0 18px}
.linea-tiempo li::before{content:"";grid-row:span 2;width:7px;height:7px;margin-top:8px;border:1px solid var(--tenue);border-radius:50%}
.linea-tiempo li.tuyo::before{background:var(--hueso);border-color:var(--hueso)}
.linea-tiempo li.oro::before{background:var(--oro-vivo);border-color:var(--oro);box-shadow:0 0 8px rgba(246,217,138,.8)}
.linea-tiempo strong{font-weight:600}
.linea-tiempo li.oro strong{color:var(--oro)}
.linea-tiempo span{font-size:12.5px;color:var(--tenue);font-family:var(--mono);letter-spacing:.03em}
.pasos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px;counter-reset:p}
.pasos li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;counter-increment:p}
.pasos li::before{content:counter(p);font-family:var(--mono);font-size:12px;width:30px;height:30px;border:1px solid var(--linea);color:var(--hueso);display:flex;align-items:center;justify-content:center}
.pasos strong{display:block;font-weight:600}
.pasos span{display:block;color:var(--tenue);font-size:13px}

/* ---------- tu colección: cartas, no una lista ---------- */
.coleccion-g{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mini-carta{aspect-ratio:5/7;border:1px solid #3a372f;position:relative;overflow:hidden;background:#0b0b0a;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:7px;gap:6px;min-width:0;text-decoration:none;color:var(--hueso)}
a.mini-carta:hover{border-color:var(--tenue);color:var(--hueso)}
.mini-carta .ventana{position:relative;overflow:hidden;min-height:0;background:#111110;display:grid;place-items:center}
.mini-carta .ventana img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.mini-carta .ventana .logo-vivo{width:48px;opacity:.18}
.mini-carta .fila-c{display:flex;justify-content:space-between;align-items:center;gap:6px;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);min-width:0}
.mini-carta .fila-c b{font-family:var(--mono);font-size:12px;color:var(--hueso);font-weight:500;letter-spacing:0;white-space:nowrap}
.mini-carta .fila-c b.metal{color:transparent}
.mini-carta.con-senal{border-color:#6e5a32}
.mini-carta.con-senal::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,240,190,.22) 45%,rgba(140,220,255,.14) 52%,transparent 66%);background-size:250% 250%;animation:gt-holo 5s ease-in-out infinite;mix-blend-mode:screen;pointer-events:none}
@keyframes gt-holo{0%,100%{background-position:0% 30%}50%{background-position:100% 70%}}
.mini-carta.vacia{display:grid;grid-template-rows:1fr;place-items:center;border-style:dashed;border-color:#2c2a26;background:transparent}
.mini-carta.vacia span{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#7d786d;text-align:center;line-height:1.6}
.runas{display:flex;gap:6px;flex-wrap:wrap}
.runas span{width:36px;height:40px;border:1px solid var(--linea);display:grid;place-items:center}
.runas span.tiene{border-color:#6e5a32}
.runas svg{width:26px;height:30px}
.runas .falta{display:block;width:1px;height:20px;background:#3a3833}

/* ---------- robado: líneas de concentración en hueso, nunca rojo ---------- */
.robada-cabeza{position:relative;margin:0 -22px;padding:34px 22px 28px;overflow:hidden;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--hueso)}
.robada-cabeza::before{content:"";position:absolute;inset:-40%;background:repeating-conic-gradient(from 0deg at 50% 60%,rgba(236,230,216,.12) 0deg .7deg,transparent .7deg 6deg);-webkit-mask-image:radial-gradient(closest-side,transparent 30%,#000 100%);mask-image:radial-gradient(closest-side,transparent 30%,#000 100%);pointer-events:none}
.robada-cabeza>*{position:relative}

/* ---------- pie ---------- */
.pie{margin-top:auto;padding:34px 0 30px;border-top:1px solid var(--fina);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pie .logo-vivo{width:34px;opacity:.9}
.pie p{font-size:12px;color:var(--tenue)}
.pie .lugar{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase}
/* Lo que se puede tocar se ve distinto: todos los enlaces en hueso subrayado; lo que no es enlace queda en ceniza */
.pie-nav{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 16px;margin-top:4px}
.pie-nav a{letter-spacing:.12em}
.pie-nav a,.s-pie nav a{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--hueso);text-decoration:underline;text-decoration-color:rgba(236,230,216,.45);text-underline-offset:5px}
.pie-nav a:hover,.s-pie nav a:hover{color:#fff;text-decoration-color:#fff}

/* ---------- la carta: al frente se colecciona, atrás se prueba ---------- */
.carta-zona{display:grid;justify-items:center;gap:14px;padding:6px 0 4px}
.escena{display:grid;place-items:center;perspective:900px;width:100%;touch-action:pan-y}
.carta{width:min(78vw,300px);aspect-ratio:5/7;position:relative;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.2,.8,.2,1);cursor:pointer;--rx:0deg;--ry:0deg;--mx:50%;--my:50%;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.carta.volteada{transform:rotateX(var(--rx)) rotateY(calc(var(--ry) + 180deg))}
.cara{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:12px;overflow:hidden;background:#0c0b0a;box-shadow:0 0 0 1.5px #3a3833,0 24px 50px rgba(0,0,0,.6)}
.carta.con-senal .cara{box-shadow:0 0 0 1.5px #6e5a32,0 24px 50px rgba(0,0,0,.6)}
.frente{display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto;padding:11px 11px 10px;gap:8px}
.c-tope{display:flex;justify-content:space-between;align-items:center}
.c-tope img{height:12px;width:auto}
.c-tope span{font-family:var(--mono);font-size:8.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.c-nombre{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0}
.c-nombre b{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:25px;text-transform:uppercase;line-height:.95;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-nombre .serial{font-size:17px;animation:none}
.c-foto{position:relative;overflow:hidden;border:1px solid #2b2924;min-height:0;background:#111110;display:grid;place-items:center}
.c-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.c-foto .logo-vivo{width:64px;opacity:.18}
.c-mosaico{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,1fr);gap:3px;place-items:stretch;background:none;border:0}
.c-mosaico span{position:relative;overflow:hidden;background:#111110;min-height:0}
.c-mosaico span:only-child{grid-column:1/-1}
.c-mosaico span:nth-child(3):last-child{grid-column:1/-1}
.c-mosaico i{position:absolute;left:6px;bottom:5px;font:500 9px/1 var(--mono);font-style:normal;letter-spacing:.1em;text-shadow:0 1px 6px rgba(0,0,0,.9)}
.c-foto .runa-sello{position:absolute;right:6px;top:6px;width:32px;height:36px;background:rgba(6,6,6,.7);border:1px solid #6e5a32;display:grid;place-items:center}
.c-foto .runa-sello svg{width:22px;height:26px}
.c-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid #2b2924}
.c-stats div{padding:5px 4px;display:grid;gap:1px;text-align:center;border-left:1px solid #2b2924;min-width:0}
.c-stats div:first-child{border-left:0}
.c-stats b{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:20px;line-height:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-transform:uppercase}
.c-stats small{font-family:var(--mono);font-size:7px;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);white-space:nowrap;overflow:hidden}
.c-pie{display:flex;justify-content:space-between;align-items:center;gap:6px}
.c-pie span{font-size:10px;color:var(--tenue);line-height:1.25;min-width:0}
.c-pie span b{display:block;color:var(--hueso);font-weight:600;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.c-pie em{font-family:var(--mono);font-style:normal;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:#c9b27a;white-space:nowrap}
.carta:not(.con-senal) .c-pie em{color:var(--tenue)}
.holo{position:absolute;inset:0;pointer-events:none;z-index:3;mix-blend-mode:color-dodge;opacity:.55;background:radial-gradient(circle at var(--mx) var(--my),rgba(255,255,255,.35),transparent 38%),repeating-linear-gradient(115deg,rgba(255,90,170,0) 0%,rgba(255,200,120,.28) 6%,rgba(120,255,210,.24) 12%,rgba(120,170,255,.28) 18%,rgba(255,90,170,0) 24%);background-size:100% 100%,240% 240%;background-position:center,var(--mx) var(--my)}
.frente:not(.tocando) .holo{animation:gt-holo-c 6s ease-in-out infinite}
@keyframes gt-holo-c{0%,100%{background-position:center,0% 30%}50%{background-position:center,100% 70%}}
.dorso{transform:rotateY(180deg);display:grid;grid-template-rows:auto auto 1fr auto;padding:15px 14px 13px;gap:10px;background:radial-gradient(120% 70% at 50% 0%,#1d1a14,#0a0908 70%)}
.dorso .lbl{font-size:9px}
.dorso h2{font-family:var(--display);font-stretch:62%;font-weight:900;font-size:27px;text-transform:uppercase;line-height:.95;margin:0}
.dorso dl{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0;font-size:11px;align-content:start}
.dorso dt{font-family:var(--mono);font-size:8px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);align-self:center}
.dorso dd{margin:0;text-align:right;font-weight:500;min-width:0;overflow-wrap:anywhere}
.verifica{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:center;border-top:1px dashed #3a372f;padding-top:10px}
.qr{width:74px;height:74px;background:var(--hueso);padding:4px;line-height:0}
.qr img,.qr canvas{width:100%!important;height:100%!important;image-rendering:pixelated}
.verifica p{margin:0;font-size:10px;line-height:1.4;color:var(--tenue)}
.verifica p b{color:var(--hueso);font-family:var(--mono);font-weight:500;font-size:9.5px;display:block;word-break:break-all;margin-top:3px}
.veredicto.carta-arriba{padding:26px 0 18px}
.carta-bajada{padding-top:18px}
.carta-bajada .bajada{margin:0}
.opciones label small{display:block;font-size:12px;margin-top:2px}
.carta-ayuda{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.chip{font:500 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;background:none;border:1px solid var(--linea);color:var(--hueso);padding:11px 12px;cursor:pointer;min-height:40px}
.chip:hover{border-color:var(--hueso)}
/* guardar como imagen: la carta a pantalla completa, para dejar el dedo encima y guardarla */
.visor{position:fixed;inset:0;z-index:60;background:var(--negro);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom))}
.visor[hidden]{display:none}
.visor img{display:block;height:auto;width:auto;max-width:100%;max-height:calc(100dvh - 150px);aspect-ratio:9/16;border:1px solid var(--linea);-webkit-touch-callout:default;user-select:auto}
.visor p{margin:0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);text-align:center}
.visor-acciones{display:flex;gap:10px;width:100%;max-width:340px}
.visor-acciones>*{flex:1 1 0}
html.sin-scroll,html.sin-scroll body{overflow:hidden}
[data-guardar-imagen]{align-self:center}
.lienzo-tarjeta{width:100%;max-width:340px;aspect-ratio:9/16;align-self:center;border:1px solid var(--linea);background:#000;display:block}
.opciones{border:1px solid var(--fina);padding:12px 14px;margin:0;display:flex;flex-direction:column;gap:10px}
.opciones legend{padding:0 6px;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tenue)}
.opciones label{display:flex;gap:10px;align-items:center;font-size:14px;cursor:pointer}
.opciones input{accent-color:var(--hueso);width:18px;height:18px}
details.imagen summary{cursor:pointer;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--tenue);padding:6px 0}
details.imagen[open] summary{margin-bottom:12px}

/* =====================================================================  PANEL  ===================================================================== */
body.panel{font-size:15px}
.panel-barra{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;padding:14px 28px;border-bottom:1px solid var(--linea);background:var(--asfalto)}
.panel-barra .marca{width:40px}
.panel-barra nav{display:flex;flex-wrap:wrap;gap:4px 20px;flex:1 1 auto}
.panel-barra nav a{color:var(--tenue);text-decoration:none;padding:8px 0;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid transparent}
.panel-barra nav a:hover{color:var(--hueso)}
.panel-barra nav a[aria-current]{color:var(--hueso);border-color:var(--hueso)}
.panel-barra nav a b{color:var(--hueso);font-weight:600}
.panel-cuerpo{width:100%;max-width:1200px;margin:0 auto;padding:30px 28px 60px;display:flex;flex-direction:column;gap:24px}
.p-titulo{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px}
.p-titulo h1{font-family:var(--display);font-stretch:68%;font-weight:900;text-transform:uppercase;font-size:44px;line-height:.92;margin:0}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.kpi{background:var(--caja);border:1px solid var(--fina);padding:18px;display:flex;flex-direction:column;gap:3px}
.kpi strong{font-family:var(--mono);font-size:30px;font-weight:500;letter-spacing:-.02em;color:var(--hueso)}
.kpi b{font-size:14px;font-weight:600}
.kpi span{font-size:13px;color:var(--tenue)}
.p-tarjeta{background:var(--caja);border:1px solid var(--fina);padding:22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.p-tarjeta h2{font-size:18px;margin:0;font-weight:600}
.columnas{display:flex;flex-wrap:wrap;gap:20px}
.columnas>*{flex:1 1 420px;min-width:0}
.tabla{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--tenue);padding:10px 12px;border-bottom:1px solid var(--linea);white-space:nowrap}
td{padding:12px;border-bottom:1px solid var(--fina);vertical-align:top}
td.num,th.num{text-align:right;font-family:var(--mono)}
td code,.codigo{font-family:var(--mono);font-size:12.5px}
tr.pasado td{color:var(--tenue)}
.alerta{border:1px solid var(--linea);background:var(--caja);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.alerta.oro{border-color:var(--hueso)}
.alerta.espera{border-style:dashed;border-color:var(--tenue)}
.alerta h3{margin:0;font-size:17px;font-weight:600}
.alerta dl{margin:0;display:grid;grid-template-columns:160px minmax(0,1fr);gap:7px 14px;font-size:14px}
.alerta dt{color:var(--tenue);font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;padding-top:3px}
.alerta dd{margin:0}
.acciones{display:flex;flex-wrap:wrap;gap:10px}
.acciones .btn,.acciones form{width:auto}
.acciones form .btn{width:auto}
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:118px minmax(0,1fr) auto;gap:12px;padding:10px 0;border-bottom:1px solid var(--fina);font-size:14px;align-items:baseline}
.feed time{font-family:var(--mono);font-size:12px;color:var(--tenue);white-space:nowrap}
.barra-progreso{height:4px;background:var(--linea)}
.barra-progreso i{display:block;height:4px;background:var(--hueso)}
.linea-comandos{font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--campo);border:1px solid var(--linea);color:var(--hueso);padding:12px;width:100%;min-height:96px;resize:vertical;word-break:break-all}
.vacio{color:var(--tenue);font-size:14px}
.liberar{display:inline-block;margin-left:6px}
.liberar summary{display:inline;list-style:none}
.liberar summary::-webkit-details-marker{display:none}
.liberar form{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline;margin-top:6px;max-width:260px}
.panel-telefono{max-width:480px;margin:0 auto;width:100%}
.entrar-panel{max-width:880px;margin:0 auto;padding:64px 28px;display:flex;flex-direction:column;gap:26px;width:100%}
.entrar-panel .columnas>*{flex-basis:340px}
.p-tarjeta.apagada{opacity:.45}
/* entrar al panel: un paso a la vez */
.entrar-uno{max-width:520px;padding-top:48px}
.entrar-uno .sub{font-size:22px;font-weight:600;margin:0;font-family:var(--sans);text-transform:none;letter-spacing:0}
.entrar-pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--apagado)}
.entrar-pasos li{display:flex;align-items:center;gap:7px}
.entrar-pasos b{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--linea);font-weight:500;letter-spacing:0}
.entrar-pasos li.hecho{color:var(--tenue)}
.entrar-pasos li.aqui{color:var(--hueso)}
.entrar-pasos li.aqui b{border-color:var(--hueso);background:var(--hueso);color:var(--negro)}
.codigo-grande{font-family:var(--mono)!important;font-size:24px!important;letter-spacing:.24em}
.marcar{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.45;cursor:pointer}
.marcar input{margin-top:3px;flex:none;width:16px;height:16px;accent-color:var(--hueso)}
.lista-pasos{margin:0;padding-left:20px;font-size:14px;display:flex;flex-direction:column;gap:4px;color:var(--tenue)}
.alta-qr{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
.alta-qr .qr{background:#fff;padding:10px;width:220px;height:220px;flex:none}
.alta-qr .qr img,.alta-qr .qr canvas{display:block;width:200px;height:200px}
.alta-qr>div:last-child{flex:1 1 180px;min-width:0}
.clave-totp{font-size:15px;letter-spacing:.08em;word-break:break-all;margin:6px 0;color:var(--hueso)}
.respaldo{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.respaldo li{border:1px solid var(--linea);padding:10px 12px;font-size:15px;letter-spacing:.06em;text-align:center}
.equipos td small{display:block;color:var(--tenue);font-size:12px}
@media (max-width:640px){
  .panel-barra{padding:12px 16px;flex-wrap:nowrap;gap:14px}
  .panel-barra nav{flex-wrap:nowrap;overflow-x:auto;gap:18px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .panel-barra nav::-webkit-scrollbar{display:none}
  .panel-barra nav a{white-space:nowrap}
  .panel-cuerpo{padding:22px 16px 48px}
  .alerta dl{grid-template-columns:1fr}
  .feed li{grid-template-columns:104px minmax(0,1fr)}
  .feed li>:last-child{grid-column:2}
}
/* ---------- pantallas grandes: la noche cubre toda la ventana; las páginas del chip siguen en una columna (se leen con el par en la mano) ---------- */
@media (min-width:700px){
  body:has(>.marco.cielo){background:linear-gradient(180deg,#060606 0%,#0a0a09 62%,#121110 86%,#060606 100%)}
  .marco.cielo{background:none}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important;transition:none!important}}
body.panel .oro{color:var(--hueso);font-weight:600}

/* ---------- F&F: regalada, nunca a la venta. Va pegada al número, en hueso (el oro es para lo que se gana) */
.ff{display:inline-block;vertical-align:.32em;margin-left:.4em;padding:.22em .5em .18em;border:1px solid var(--hueso);font-family:var(--mono);font-size:max(10px,.3em);font-weight:500;letter-spacing:.16em;line-height:1;text-decoration:none;color:var(--hueso);-webkit-text-fill-color:var(--hueso);background:none;animation:none}
.p-titulo h1 .ff{font-size:13px;vertical-align:.5em}

/* ---------- panel: drops, levantamiento y fotos */
.miga{margin:0 0 -14px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.miga a{color:var(--tenue);text-decoration:none}
.miga a:hover{color:var(--hueso)}
.aviso.bien{border-color:var(--hueso);background:rgba(236,230,216,.05)}
.lista-drops,.lista-modelos{display:flex;flex-direction:column;gap:8px}
.drop-fila,.modelo-fila{display:flex;align-items:center;gap:16px;padding:16px 18px;border:1px solid var(--fina);background:var(--caja);color:var(--hueso);text-decoration:none;min-height:64px}
.drop-fila:hover,.modelo-fila:hover{border-color:var(--linea);background:var(--campo)}
.drop-codigo{font-size:22px;min-width:3ch}
.drop-nombre,.modelo-nombre{display:flex;flex-direction:column;gap:3px;flex:1 1 auto;min-width:0}
.drop-nombre strong,.modelo-nombre strong{font-size:17px;font-weight:600}
.drop-nombre small,.modelo-nombre small{color:var(--tenue);font-size:12px;font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase}
.modelo-cuentas{display:grid;grid-template-columns:auto auto;align-items:baseline;gap:2px 8px;text-align:right;justify-items:end}
.modelo-cuentas b{font-size:26px;font-weight:500}
.modelo-cuentas small{color:var(--tenue);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.modelo-cuentas .chico{grid-column:1/-1}
.modelo-cuentas .chico b{font-size:inherit;color:var(--hueso)}
.cuentas{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--fina);background:var(--caja)}
.cuentas div{display:flex;flex-direction:column;gap:4px;padding:14px 12px;border-left:1px solid var(--fina)}
.cuentas div:first-child{border-left:0}
.cuentas b{font-size:28px;font-weight:500;line-height:1}
.cuentas small{color:var(--tenue);font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.contar .siguiente{display:flex;flex-direction:column;gap:6px}
.contar .serial{font-size:46px}
.tallas,.opciones-tipo{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:6px}
.tallas legend,.opciones-tipo legend{margin-bottom:8px;padding:0}
.opcion{position:relative;display:inline-flex}
.opcion input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.opcion span{display:flex;align-items:center;justify-content:center;min-width:54px;height:50px;padding:0 12px;border:1px solid var(--linea);background:var(--campo);font-family:var(--mono);font-size:15px;color:var(--hueso)}
.opcion input:checked+span{background:var(--hueso);color:var(--negro);border-color:var(--hueso);font-weight:600}
.opcion input:focus-visible+span{outline:2px solid var(--hueso);outline-offset:2px}
.opciones-tipo .opcion span{min-width:96px;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.opcion-linea{display:flex;gap:10px;align-items:center;font-size:14px;padding:8px 0}
.opcion-linea input{width:20px;height:20px;accent-color:var(--hueso)}
.ff-pieza{display:flex;flex-direction:column;gap:8px}
.ff-pieza[open]{gap:10px}
.botones-contar{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.botones-contar .btn{min-height:64px;font-size:14px}
.deshacer{display:flex;justify-content:center}
.leyenda{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;color:var(--tenue)}
.leyenda i{display:inline-block;width:12px;height:12px;border:1px solid var(--linea);vertical-align:middle;margin-right:4px}
.leyenda b.ff-mini{position:static;margin-right:2px}
.cuadricula{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:6px}
.cuadricula li>a,.cuadricula li>span{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;aspect-ratio:1;border:1px solid var(--linea);background:var(--campo);color:var(--hueso);text-decoration:none}
.cuadricula b{font-family:var(--mono);font-size:17px;font-weight:500;line-height:1}
.cuadricula small{font-family:var(--mono);font-size:10px;color:var(--tenue);min-height:1em}
.c-grabada,.cuadricula .c-grabada>a{background:var(--hueso)!important;border-color:var(--hueso)!important}
.cuadricula .c-grabada b,.cuadricula .c-grabada small{color:var(--negro)}
.c-contada{background:var(--campo)}
.c-libre,.cuadricula .c-libre>a,.cuadricula .c-libre>span{background:transparent!important;border-style:dashed!important}
.cuadricula .c-libre b{color:var(--tenue)}
.c-retirada,.cuadricula .c-retirada>a{background:repeating-linear-gradient(135deg,transparent 0 5px,var(--linea) 5px 6px)!important}
.cuadricula .c-retirada b{color:var(--tenue);text-decoration:line-through}
.cuadricula .con-dueno>a::after{content:"";position:absolute;bottom:5px;right:5px;width:6px;height:6px;border-radius:50%;background:var(--negro)}
.cuadricula .c-contada.con-dueno>a::after{background:var(--hueso)}
.ff-mini{position:absolute;top:3px;left:4px;font-family:var(--mono);font-size:9px;font-style:normal;font-weight:600;letter-spacing:0;padding:1px 3px;border:1px solid currentColor;line-height:1}
.cuadricula .c-grabada .ff-mini{color:var(--negro)}
.trabas{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;color:var(--hueso);font-size:14px}
.bitacora{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.bitacora li{display:grid;grid-template-columns:130px 110px 1fr;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--fina);font-size:14px}
.bitacora time{color:var(--tenue);font-size:12px}
.bitacora a{color:var(--hueso)}
.vista-foto{display:block;width:100%;max-height:340px;object-fit:contain;background:var(--negro);border:1px solid var(--fina)}
.vista-foto.a-cuadros{background:repeating-conic-gradient(#1c1b19 0% 25%,#121211 0% 50%) 50%/22px 22px}
.fila-enlaces{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-start}
.seccion{font-family:var(--display);font-stretch:68%;font-weight:900;text-transform:uppercase;font-size:26px;margin:14px 0 -8px}
.aviso-figura{border-color:var(--linea)}
.campo input[type=file]{height:auto;min-height:50px;padding:8px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--tenue);display:flex;align-items:center}
.campo input[type=file]::file-selector-button{margin-right:12px;height:34px;padding:0 14px;border:1px solid var(--hueso);background:transparent;color:var(--hueso);font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
#tallas td:first-child{white-space:nowrap}
.mas-bitacora{display:flex;flex-direction:column;gap:6px}
@media (max-width:640px){
  .bitacora li{grid-template-columns:1fr;gap:4px}
  .cuentas b{font-size:22px}
  .cuentas div{padding:12px 10px}
  .drop-fila,.modelo-fila{padding:14px}
  .contar .serial{font-size:40px}
}