/* Scanner Oro · páginas públicas (portada, cuenta y alta, administración) */
:root{
  --negro:#060608; --carbon:#0c0d11; --carbon-2:#121318;
  --oro:#f5c542; --oro-claro:#ffe7a3; --oro-osc:#b98a2c;
  --oro-grad:linear-gradient(135deg,#fff0bf 0%,#f5c542 38%,#c99a35 72%,#f6d06a 100%);
  --texto:#eef0f4; --suave:rgba(238,240,244,.74); --tenue:rgba(238,240,244,.5);
  --borde:rgba(255,255,255,.08); --borde-oro:rgba(245,197,66,.22);
  --verde:#22d07a; --rojo:#ff4d5e;
  --display:"Barlow Condensed","Arial Narrow",sans-serif;
  --fuente:Inter,"Segoe UI",system-ui,-apple-system,sans-serif;
  --curva:cubic-bezier(.22,.8,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--negro);color:var(--texto);font:15px/1.55 var(--fuente);-webkit-font-smoothing:antialiased;min-height:100vh;
  background-image:radial-gradient(900px 520px at 85% -8%,rgba(245,197,66,.11),transparent 62%),radial-gradient(700px 500px at -10% 110%,rgba(245,197,66,.06),transparent 60%)}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
button,input,select{font:inherit;color:inherit}
.cont{width:min(1180px,100% - 32px);margin:0 auto}

/* ── Barra superior ── */
.barra{position:sticky;top:0;z-index:20;backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);
  background:rgba(6,6,8,.72);border-bottom:1px solid var(--borde)}
.barra .cont{display:flex;align-items:center;gap:18px;height:68px}
.marca{display:flex;align-items:center;gap:12px;text-decoration:none;min-width:0}
.marca img{height:34px;width:auto}
.marca b{font:800 22px/1 var(--display);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.marca b span{background:var(--oro-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.marca small{display:block;font:600 10.5px/1.2 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--tenue);margin-top:3px}
.barra .lockup{height:38px;width:auto;opacity:.92;margin-left:6px;padding-left:16px;border-left:1px solid var(--borde)}
.barra .der{margin-left:auto;display:flex;gap:10px;align-items:center}

/* ── Botones ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:12px;padding:13px 22px;font-weight:700;font-size:15px;
  text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .18s var(--curva),box-shadow .18s,background .18s,border-color .18s;white-space:nowrap}
.btn:active{transform:translateY(1px)}
.btn svg{width:18px;height:18px;flex:none}
.btn-oro{background:var(--oro-grad);color:#15110a;box-shadow:0 10px 30px -10px rgba(245,197,66,.55),inset 0 1px 0 rgba(255,255,255,.55)}
.btn-oro:hover{box-shadow:0 14px 38px -10px rgba(245,197,66,.7),inset 0 1px 0 rgba(255,255,255,.55);transform:translateY(-1px)}
.btn-linea{border-color:var(--borde-oro);color:var(--oro-claro);background:rgba(245,197,66,.04)}
.btn-linea:hover{border-color:var(--oro);background:rgba(245,197,66,.08)}
.btn-gris{border-color:var(--borde);background:rgba(255,255,255,.03);color:var(--suave)}
.btn-gris:hover{color:var(--texto);border-color:rgba(255,255,255,.2)}
.btn-chico{padding:9px 16px;font-size:13.5px;border-radius:10px}
.btn-google{background:#fff;color:#1f1f1f;font-weight:600}
.btn-google:hover{box-shadow:0 10px 30px -12px rgba(255,255,255,.4)}

/* ── Portada ── */
.hero{padding:64px 0 40px;position:relative;overflow:hidden}
.hero .cont{display:grid;grid-template-columns:1.02fr 1fr;gap:44px;align-items:center}
.sello{display:inline-flex;align-items:center;gap:9px;padding:7px 14px;border:1px solid var(--borde-oro);border-radius:999px;
  font:700 11.5px/1 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--oro);background:rgba(245,197,66,.05)}
.sello svg{width:14px;height:14px}
h1.titulo{font:800 clamp(46px,6.4vw,84px)/.94 var(--display);letter-spacing:-.005em;text-transform:uppercase;margin:22px 0 18px}
h1.titulo em{font-style:normal;background:var(--oro-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.bajada{font-size:17.5px;color:var(--suave);max-width:540px;margin:0 0 30px}
.acciones{display:flex;flex-wrap:wrap;gap:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:22px;color:var(--tenue);font-size:13px}
.chips span{display:inline-flex;align-items:center;gap:7px}
.chips svg{width:15px;height:15px;color:var(--oro)}

.escenario{position:relative;aspect-ratio:1/0.86}
.escenario .pantalla{position:absolute;left:0;right:6%;top:4%;border-radius:16px;overflow:hidden;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(245,197,66,.08),0 0 80px -20px rgba(245,197,66,.25);background:#0a0b0e}
.escenario .pantalla .tapa{height:26px;display:flex;align-items:center;gap:6px;padding:0 12px;background:#101116;border-bottom:1px solid var(--borde);font-size:11px;color:var(--tenue)}
.escenario .pantalla .tapa i{width:8px;height:8px;border-radius:50%;background:#2a2b31}
.escenario .pantalla .tapa i:first-child{background:#f5c542}
.escenario .pantalla .tapa span{margin-left:8px}
.escenario .pantalla img{width:100%;height:auto}
.escenario .jugador{position:absolute;right:-5%;bottom:-2%;width:64%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.7))}
.escenario .brillo{position:absolute;inset:auto 10% -10% 10%;height:40%;background:radial-gradient(closest-side,rgba(245,197,66,.25),transparent);filter:blur(30px);z-index:-1}

/* ── Secciones ── */
.seccion{padding:56px 0}
.seccion h2{font:800 clamp(30px,3.6vw,44px)/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 10px}
.seccion h2 em{font-style:normal;color:var(--oro)}
.seccion .intro{color:var(--suave);max-width:620px;margin:0 0 32px}
.pasos{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;counter-reset:p}
.paso{position:relative;padding:26px 24px 24px;border:1px solid var(--borde);border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.01))}
.paso::before{counter-increment:p;content:"0" counter(p);font:800 44px/1 var(--display);background:var(--oro-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:block;margin-bottom:14px}
.paso b{display:block;font-size:17px;margin-bottom:6px}
.paso p{margin:0;color:var(--suave);font-size:14px}
.paso a{color:var(--oro);font-weight:600;text-decoration:none}

.funciones{display:grid;grid-template-columns:1.25fr 1fr;gap:16px}
.funcion{border:1px solid var(--borde);border-radius:18px;padding:24px;background:var(--carbon);overflow:hidden;position:relative}
.funcion.grande{grid-row:span 2;padding:0;display:flex;flex-direction:column}
.funcion.grande .txt{padding:24px 24px 18px}
.funcion.grande img{margin-top:auto;width:100%;height:auto;border-top:1px solid var(--borde)}
.funcion .ic{width:40px;height:40px;border-radius:11px;display:grid;place-items:center;background:rgba(245,197,66,.08);border:1px solid var(--borde-oro);color:var(--oro);margin-bottom:14px}
.funcion .ic svg{width:20px;height:20px}
.funcion b{display:block;font-size:17px;margin-bottom:6px}
.funcion p{margin:0;color:var(--suave);font-size:14px}

.cifras{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--borde);border-radius:18px;overflow:hidden;background:var(--carbon)}
.cifra{padding:24px 22px;border-right:1px solid var(--borde)}
.cifra:last-child{border-right:0}
.cifra b{display:block;font:800 40px/1 var(--display);color:var(--oro-claro);letter-spacing:.01em}
.cifra span{display:block;margin-top:8px;color:var(--suave);font-size:13.5px}
.nota-chica{color:var(--tenue);font-size:12.5px;margin-top:14px}

.cierre{margin:24px auto 0;border:1px solid var(--borde-oro);border-radius:24px;overflow:hidden;position:relative;
  background:radial-gradient(600px 300px at 80% 0%,rgba(245,197,66,.16),transparent 70%),var(--carbon);display:grid;grid-template-columns:minmax(0,1fr) 420px;align-items:end}
.cierre .txt{padding:40px}
.cierre h2{margin-bottom:12px}
.cierre img{align-self:end;width:100%;height:auto;margin-top:24px}

.pie{border-top:1px solid var(--borde);margin-top:56px;padding:30px 0 40px;color:var(--tenue);font-size:12px;line-height:1.65}
.pie .fila{display:flex;flex-wrap:wrap;gap:12px 24px;align-items:center;margin-bottom:16px;color:var(--suave);font-size:13px}
.pie a{color:var(--oro);text-decoration:none}

/* ── Formularios / cuenta ── */
.tarjeta{border:1px solid var(--borde);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.012));
  box-shadow:0 30px 80px -40px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.05)}
.alta{display:grid;grid-template-columns:330px 1fr;gap:28px;padding:40px 0 20px;align-items:start}
.lado{position:sticky;top:96px;padding:26px}
.quien{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.quien img,.quien .ini{width:46px;height:46px;border-radius:50%;object-fit:cover;border:2px solid var(--borde-oro)}
.quien .ini{display:grid;place-items:center;background:var(--carbon-2);font-weight:800;color:var(--oro)}
.quien b{display:block;font-size:15px}
.quien small{color:var(--tenue);font-size:12.5px;word-break:break-all}
.etapas{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.etapas li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;color:var(--tenue);font-size:14px}
.etapas li .n{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:800;border:1px solid var(--borde)}
.etapas li.hecha{color:var(--suave)}
.etapas li.hecha .n{background:rgba(34,208,122,.12);border-color:rgba(34,208,122,.4);color:var(--verde)}
.etapas li.actual{color:var(--texto)}
.etapas li.actual .n{background:var(--oro-grad);color:#15110a;border:0}
.etapas li small{display:block;color:var(--tenue);font-size:12.5px}
.lado .ayuda{margin-top:18px;padding-top:18px;border-top:1px solid var(--borde);font-size:13px;color:var(--suave)}
.lado .ayuda a{color:var(--oro);font-weight:600;text-decoration:none}

.form{padding:32px}
.form h1{font:800 34px/1 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:0 0 8px}
.form .sub{color:var(--suave);margin:0 0 26px;max-width:600px}
.grupo{border:0;margin:0 0 22px;padding:0}
.grupo legend{font:700 11.5px/1 var(--fuente);letter-spacing:.14em;text-transform:uppercase;color:var(--oro);margin-bottom:14px;padding:0}
.campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo.ancho{grid-column:1/-1}
.campo label{font-size:13px;font-weight:600;color:var(--suave)}
.campo input,.campo select{width:100%;height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:#0a0b0f;padding:0 14px;outline:none;
  transition:border-color .15s,box-shadow .15s;font-size:15px}
.campo select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23f5c542' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:36px}
.campo input:focus,.campo select:focus{border-color:var(--oro);box-shadow:0 0 0 4px rgba(245,197,66,.12)}
.campo input[aria-invalid="true"]{border-color:var(--rojo)}
.campo small{color:var(--tenue);font-size:12.5px}
.campo small a{color:var(--oro)}
.tel{display:grid;grid-template-columns:92px 1fr;gap:8px}
.tel .ind{height:48px;border-radius:12px;border:1px solid rgba(255,255,255,.11);background:#101116;display:grid;place-items:center;font-weight:700;color:var(--oro-claro);font-variant-numeric:tabular-nums}
.tel .ind input{height:46px;border:0;background:transparent;text-align:center;font-weight:700;color:var(--oro-claro);padding:0}
.opciones{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.opcion{position:relative;display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border:1px solid rgba(255,255,255,.11);border-radius:14px;cursor:pointer;background:#0a0b0f;transition:border-color .15s,background .15s}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion .bola{width:18px;height:18px;border-radius:50%;border:1.5px solid rgba(255,255,255,.3);flex:none;margin-top:2px;transition:all .15s}
.opcion b{display:block;font-size:14px}
.opcion small{color:var(--tenue);font-size:12.5px}
.opcion:has(input:checked){border-color:var(--oro);background:rgba(245,197,66,.06)}
.opcion:has(input:checked) .bola{border:5px solid var(--oro)}
.opcion:has(input:focus-visible){box-shadow:0 0 0 4px rgba(245,197,66,.15)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:13.5px;color:var(--suave);cursor:pointer;margin:6px 0 0}
.check input{width:18px;height:18px;accent-color:var(--oro);margin-top:2px;flex:none}
.check a{color:var(--oro)}
.error{display:flex;gap:10px;align-items:flex-start;padding:12px 16px;border-radius:12px;background:rgba(255,77,94,.08);border:1px solid rgba(255,77,94,.3);color:#ff9aa4;font-size:14px;margin-bottom:20px}
.ok{padding:12px 16px;border-radius:12px;background:rgba(34,208,122,.08);border:1px solid rgba(34,208,122,.3);color:#8ff0bd;font-size:14px;margin-bottom:20px}
.form .final{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:26px;padding-top:22px;border-top:1px solid var(--borde)}
.form .final small{color:var(--tenue);font-size:12.5px;max-width:420px}

/* Perfil */
.perfil{padding:40px 0 10px;display:grid;grid-template-columns:1fr 360px;gap:22px;align-items:start}
.perfil .cab{display:flex;align-items:center;gap:18px;padding:26px}
.perfil .cab img,.perfil .cab .ini{width:72px;height:72px;border-radius:50%;border:2px solid var(--borde-oro);object-fit:cover}
.perfil .cab .ini{display:grid;place-items:center;font:800 28px/1 var(--display);background:var(--carbon-2);color:var(--oro)}
.perfil .cab h1{font:800 32px/1 var(--display);text-transform:uppercase;margin:0 0 6px}
.perfil .cab p{margin:0;color:var(--tenue);font-size:13.5px}
.perfil .cab .btn{margin-left:auto}
.datos{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--borde)}
.dato{padding:16px 26px;border-bottom:1px solid var(--borde)}
.dato:nth-child(odd){border-right:1px solid var(--borde)}
.dato small{display:block;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--tenue);margin-bottom:4px}
.dato b{font-size:15px;font-variant-numeric:tabular-nums;word-break:break-all}
.estado{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:999px;margin-left:8px;vertical-align:2px}
.estado.pendiente{background:rgba(245,197,66,.1);color:var(--oro)}
.estado.verificado{background:rgba(34,208,122,.12);color:var(--verde)}
.estado.rechazado{background:rgba(255,77,94,.12);color:var(--rojo)}
.metricas{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--borde)}
.metricas div{padding:20px 26px;border-right:1px solid var(--borde)}
.metricas div:last-child{border-right:0}
.metricas b{display:block;font:800 30px/1 var(--display);color:var(--oro-claro)}
.metricas span{color:var(--tenue);font-size:12.5px}
.pie-tarjeta{display:flex;flex-wrap:wrap;gap:10px;padding:20px 26px;border-top:1px solid var(--borde)}
.compartir{padding:24px}
.compartir b{display:block;font:800 22px/1.05 var(--display);text-transform:uppercase;margin-bottom:8px}
.compartir p{color:var(--suave);font-size:13.5px;margin:0 0 16px}
.compartir .enlace{display:flex;gap:8px}
.compartir .enlace input{flex:1;min-width:0;height:42px;border-radius:10px;border:1px solid var(--borde);background:#0a0b0f;padding:0 12px;font-size:13px;color:var(--suave)}
.compartir img{border-radius:14px;margin-top:16px;border:1px solid var(--borde)}

/* ── Ventana de Google ── */
.modal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:16px;background:rgba(0,0,0,.66);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal .caja{width:min(420px,100%);padding:30px 28px;text-align:center;position:relative}
.modal .x{position:absolute;right:14px;top:14px;width:34px;height:34px;border-radius:50%;border:1px solid var(--borde);background:transparent;cursor:pointer;color:var(--tenue)}
.modal h3{font:800 28px/1 var(--display);text-transform:uppercase;margin:6px 0 8px}
.modal p{color:var(--suave);font-size:14px;margin:0 0 22px}
.modal .g{display:flex;justify-content:center;min-height:44px}
.modal .msg{min-height:20px;margin-top:14px;font-size:13.5px;color:var(--tenue)}
.modal .msg.err{color:#ff9aa4}.modal .msg.ok{color:#8ff0bd}
.modal .embebido{margin-top:6px;text-align:left;font-size:13.5px;color:var(--suave);border:1px solid var(--borde-oro);border-radius:14px;padding:14px 16px;background:rgba(245,197,66,.05)}
.modal .embebido b{color:var(--oro)}
.modal .embebido .btn{width:100%;margin-top:12px}
.modal .legal{margin-top:18px;font-size:11.5px;color:var(--tenue)}

@media (max-width:980px){
  .hero .cont{grid-template-columns:1fr}
  .escenario{max-width:620px}
  .funciones{grid-template-columns:1fr}
  .funcion.grande{grid-row:auto}
  .cifras{grid-template-columns:1fr 1fr}
  .cifra:nth-child(2){border-right:0}
  .cifra:nth-child(-n+2){border-bottom:1px solid var(--borde)}
  .cierre{grid-template-columns:1fr}
  .cierre img{max-width:420px;justify-self:center;margin-top:0}
  .alta,.perfil{grid-template-columns:1fr}
  .lado{position:static}
}
@media (max-width:640px){
  .barra .cont{height:60px;gap:10px}
  .barra .lockup{display:none}
  .marca b{font-size:19px}
  .hero{padding:36px 0 20px}
  .bajada{font-size:16px}
  .acciones .btn{flex:1 1 100%}
  .pasos{grid-template-columns:1fr}
  .campos,.opciones,.datos{grid-template-columns:1fr}
  .dato:nth-child(odd){border-right:0}
  .form{padding:22px 18px}
  .lado{padding:20px 18px}
  .metricas{grid-template-columns:1fr 1fr 1fr}
  .metricas div{padding:16px 14px}
  .metricas b{font-size:24px}
  .perfil .cab{flex-wrap:wrap;padding:20px 18px}
  .perfil .cab .btn{margin-left:0;width:100%}
  .cierre .txt{padding:26px 20px}
  .cifra b{font-size:32px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}