:root{
  --fondo:#0B1220;          /* azul noche profundo */
  --fondo-alto:#111C30;     /* paneles */
  --texto:#F2F6FF;
  --texto-suave:#93A3BF;
  --linea:#25334D;
  --electrico:#22E584;      /* verde eléctrico: acción y OK */
  --ok:#22E584;
  --ok-fondo:#0B2E1D;
  --alerta:#FF4D3D;
  --alerta-fondo:#38100C;
  --ojo:#FFC53D;
  --ojo-fondo:#332405;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:var(--fondo);
  background-image:radial-gradient(ellipse 80% 50% at 50% -10%, #16325A55, transparent);
  color:var(--texto);
  font-size:17px;
  line-height:1.55;
  font-weight:500;
  min-height:100vh;
}
.contenedor{max-width:640px;margin:0 auto;padding:0 20px}
a{color:var(--electrico)}

header{padding:40px 0 8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.marca{font-weight:800;font-size:15px;letter-spacing:.02em;color:var(--electrico)}

.idiomas{display:flex;gap:8px;font-size:14px;font-weight:800}
.idioma-item{color:var(--texto-suave);text-decoration:none;padding:5px 10px;border-radius:8px;border:1px solid transparent}
.idioma-item:hover{color:var(--texto)}
.idioma-item.activo{color:var(--texto);background:var(--fondo-alto);border-color:var(--linea)}

.hero{padding:20px 0 12px}
h1{
  font-weight:900;
  font-size:clamp(30px,7.5vw,44px);
  line-height:1.06;
  letter-spacing:-.015em;
  color:#FFFFFF;
}
.tambien{margin-top:10px;font-weight:800;font-size:16px;color:var(--electrico)}
.bajada{margin-top:10px;color:var(--texto-suave);max-width:52ch}

form{margin-top:26px}
.campo{
  width:100%;
  font:inherit;
  font-weight:500;
  padding:16px 18px;
  border:2px solid var(--linea);
  border-radius:10px;
  background:var(--fondo-alto);
  color:var(--texto);
}
.campo::placeholder{color:#5C6E8C}
.campo:focus{outline:3px solid var(--electrico);outline-offset:2px;border-color:var(--electrico)}
button.verificar{
  margin-top:12px;
  width:100%;
  font:inherit;
  font-weight:900;
  font-size:18px;
  padding:16px;
  border:0;
  border-radius:10px;
  background:var(--electrico);
  color:#04130B;
  cursor:pointer;
  box-shadow:0 0 24px #22E58433;
}
button.verificar:hover{filter:brightness(1.08)}
button.verificar:focus-visible{outline:3px solid #fff;outline-offset:2px}
button.verificar[disabled]{opacity:.55;cursor:wait;box-shadow:none}
.redes{margin-top:14px;font-size:14px;color:var(--texto-suave)}

/* Veredicto */
#resultado{margin-top:28px}
.panel{
  border-radius:14px;
  padding:26px 22px;
  border:2px solid;
  margin-bottom:14px;
}
.panel.ok{background:var(--ok-fondo);border-color:var(--ok);box-shadow:0 0 32px #22E58426}
.panel.alerta{background:var(--alerta-fondo);border-color:var(--alerta);box-shadow:0 0 32px #FF4D3D33}
.panel.ojo{background:var(--ojo-fondo);border-color:var(--ojo)}
.panel.neutro{background:var(--fondo-alto);border-color:var(--linea)}
.veredicto{
  font-weight:900;
  font-size:clamp(26px,7vw,36px);
  line-height:1.05;
  letter-spacing:-.01em;
}
.panel.ok .veredicto{color:var(--ok)}
.panel.alerta .veredicto{color:var(--alerta)}
.panel.ojo .veredicto{color:var(--ojo)}
.explicacion{margin-top:10px;color:var(--texto)}
.explicacion strong{color:#fff}
.datos{
  margin-top:16px;
  font-size:14.5px;
  color:var(--texto-suave);
  border-top:1px solid rgba(255,255,255,.14);
  padding-top:12px;
}
.datos strong{color:var(--texto)}
.datos div{margin-top:4px}
.datos .dir{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:13px;word-break:break-all}
.datos a{font-weight:700}

/* Ayuda */
.ayuda{margin-top:36px}
.ayuda h2{color:#fff}
details{
  background:var(--fondo-alto);
  border:1px solid var(--linea);
  border-radius:10px;
  padding:14px 18px;
  margin-top:10px;
}
summary{font-weight:700;cursor:pointer;color:var(--texto)}
details p{margin-top:10px;color:var(--texto-suave);font-size:15.5px}

footer{
  margin-top:48px;
  padding:24px 0 40px;
  border-top:1px solid var(--linea);
  font-size:14px;
  color:var(--texto-suave);
}
footer p + p{margin-top:8px}
footer .firma{font-weight:700;color:var(--texto)}
footer .firma a{font-weight:800}
footer .legal{font-size:12px;opacity:.75;line-height:1.5}

@media (prefers-reduced-motion:no-preference){
  .panel{animation:aparecer .25s ease-out}
  @keyframes aparecer{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}