@font-face{font-family:"Poppins";src:url(Poppins-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url(Poppins-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url(Poppins-Bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url(Poppins-ExtraBold.woff2) format("woff2");font-weight:800;font-display:swap}

/* Colores tomados de la pieza de la Lista 3 */
:root{
  --noche:#0B1545; --electrico:#0600DE; --electrico-hover:#1B14FF; --celeste:#5693EC;
  --blanco:#F2F4EF; --celeste-claro:#94BDF7; --suave:#C9D6EE; --tenue:#A9BCE0; --linea:rgba(255,255,255,.14); --halo:0 0 16px rgba(6,12,50,.55),0 1px 3px rgba(6,12,50,.45);
  --verde:#B9F3D2; --verde-fondo:rgba(46,204,128,.16); --verde-borde:rgba(120,230,170,.55);
  --rojo:#FFD3D3; --rojo-fondo:rgba(240,90,90,.16); --rojo-borde:rgba(255,150,150,.55);
  --aviso:#FDE6A6; --aviso-fondo:rgba(240,180,40,.14); --aviso-borde:rgba(250,210,110,.5);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;background:var(--noche)}
body{font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--blanco);
  line-height:1.5;min-height:100vh;min-height:100dvh;-webkit-font-smoothing:antialiased}
/* Fondo fijo aparte (no background-attachment:fixed, que en iPhone no anda) */
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:url(fondo.svg?v=3) center top/cover no-repeat,
    linear-gradient(90deg,#0A1444 0%,#1A2A62 30%,#244087 56%,#2F68A8 80%,#173B66 100%)}

.envoltura{max-width:520px;margin:0 auto;padding:max(30px,env(safe-area-inset-top)) 16px 28px}

/* Marca: recuadro «Lista 3» + «Unidad» + lema, como en la pieza */
.marca{display:flex;flex-direction:column;align-items:center;text-align:center;text-transform:uppercase;padding-bottom:26px}
.lista{display:flex;flex-direction:column;align-items:center;justify-content:center;width:108px;height:90px;
  background:var(--electrico);border-radius:15px;color:#fff;font-weight:700;line-height:1;
  box-shadow:0 10px 28px rgba(6,0,222,.4),inset 0 1px 0 rgba(255,255,255,.18)}
.lista span{font-size:1.3rem;letter-spacing:.02em}
.lista b{font-size:2.75rem;font-weight:800;margin-top:.02em}
.unidad{font-size:clamp(3rem,16vw,4.5rem);font-weight:800;line-height:1;letter-spacing:-.005em;margin-top:22px;
  text-shadow:0 2px 18px rgba(5,12,48,.35)}
.lema{font-size:clamp(1.3rem,6.6vw,1.85rem);font-weight:700;line-height:1.1;color:var(--celeste);margin-top:.35em;text-shadow:var(--halo)}

.tarjeta{background:rgba(8,16,58,.58);border:1px solid var(--linea);border-radius:22px;padding:24px 20px 22px;
  -webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 22px 50px rgba(3,8,40,.45)}
.ceja{font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--celeste-claro)}
.tarjeta h1{font-size:clamp(1.35rem,5.8vw,1.65rem);font-weight:700;line-height:1.22;margin:.3rem 0 .45rem;text-wrap:balance}
.bajada{font-size:.975rem;color:var(--suave);text-wrap:pretty;margin-bottom:1.35rem}

label{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue);margin-bottom:.45rem}
input{width:100%;min-height:56px;padding:.7rem 1rem;font-family:inherit;font-weight:500;font-size:1.35rem;line-height:1.2;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;color:var(--noche);background:#fff;
  border:2px solid transparent;border-radius:12px;transition:border-color .15s}
input:focus{outline:none;border-color:var(--celeste)}
input:focus-visible{outline:3px solid rgba(86,147,236,.55);outline-offset:2px}
.ayuda{font-size:.875rem;color:var(--tenue);margin-top:.5rem}

button{width:100%;min-height:54px;margin-top:1.25rem;border:0;border-radius:13px;background:var(--electrico);color:#fff;
  font-family:inherit;font-weight:700;font-size:1.05rem;line-height:1;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  box-shadow:0 8px 22px rgba(6,0,222,.35);transition:background .15s,transform .1s}
button:hover{background:var(--electrico-hover)}
button:active{transform:scale(.99)}
button:focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:3px}
button:disabled{cursor:progress;opacity:.8}

.resultado{display:none;margin-top:1.25rem;padding:1rem 1.1rem;border-radius:12px;border:1px solid;
  font-size:1.05rem;font-weight:500;line-height:1.45}
.resultado.visible{display:flex;gap:.75rem;align-items:flex-start}
.resultado svg{flex:none;width:26px;height:26px;margin-top:1px}
.resultado.si{background:var(--verde-fondo);border-color:var(--verde-borde);color:var(--verde)}
.resultado.no{background:var(--rojo-fondo);border-color:var(--rojo-borde);color:var(--rojo)}
.resultado.aviso{background:var(--aviso-fondo);border-color:var(--aviso-borde);color:var(--aviso);font-size:.95rem}
@media (prefers-reduced-motion:no-preference){.resultado.visible{animation:entra .22s ease-out}}
@keyframes entra{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.pie{margin-top:26px;text-align:center;font-size:.8rem;color:var(--suave);text-shadow:var(--halo)}

@media (min-width:600px){
  .envoltura{padding-top:48px}
  .lista{width:124px;height:104px;border-radius:17px}
  .lista span{font-size:1.5rem}
  .lista b{font-size:3.15rem}
  .marca{padding-bottom:34px}
  .tarjeta{padding:30px 32px 28px}
}

/* Teléfonos bajitos: la marca achica para que el botón entre sin bajar */
@media (max-width:599px) and (max-height:700px){
  .envoltura{padding-top:max(18px,env(safe-area-inset-top))}
  .lista{width:88px;height:74px;border-radius:13px}
  .lista span{font-size:1.05rem}
  .lista b{font-size:2.2rem}
  .unidad{font-size:clamp(2.5rem,13vw,3.4rem);margin-top:14px}
  .lema{font-size:clamp(1.1rem,5.4vw,1.5rem)}
  .marca{padding-bottom:18px}
}