/* Scary Lenses BQ — sitio público.
   Sin framework y sin dependencias externas: son páginas legales, tienen que
   cargar aunque se caiga cualquier CDN, y Meta las revisa desde su propia red. */
/* Los colores salen del logo, muestreados de la imagen: el azul casi negro del
   círculo, el rojo y el verde de los ojos de la calavera, y el blanco cálido
   del texto. Así el sitio y el logo se ven de la misma marca. */
:root{
  --fondo:#060a13; --sup:#0f1523; --borde:#1e2839;
  --texto:#f9f5ea; --tenue:#98a3b6;
  --rojo:#a22d1b; --verde:#c4f275;
  --marca:#c4f275; --naranja:#e8a33d;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
body{background:var(--fondo);color:var(--texto);font-family:var(--sans);
     font-size:16.5px;line-height:1.65;margin:0;padding:0 20px 80px}
.hoja{max-width:760px;margin:0 auto}

header{padding:34px 0 22px;border-bottom:1px solid var(--borde);
       display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:11px;font-size:19px;font-weight:800;
      letter-spacing:-.2px;text-decoration:none;color:var(--texto)}
.logo img{width:44px;height:44px;display:block}
.logo span{color:var(--verde)}
nav{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
nav a{color:var(--tenue);text-decoration:none;font-size:14px;padding:6px 10px;border-radius:8px}
nav a:hover,nav a[aria-current]{color:var(--texto);background:var(--sup)}

h1{font-size:clamp(26px,5vw,38px);line-height:1.15;margin:38px 0 6px;letter-spacing:-.4px}
.sub{color:var(--tenue);margin:0 0 30px}
h2{font-size:19px;margin:34px 0 10px}
h3{font-size:16px;margin:22px 0 6px}
p,li{color:#d6d0e0}
a{color:var(--naranja)}
ul{padding-left:20px}
li{margin:5px 0}
.tenue{color:var(--tenue);font-size:14.5px}

.caja{background:var(--sup);border:1px solid var(--borde);border-radius:12px;
      padding:18px 20px;margin:22px 0}
.caja.marca{border-left:3px solid var(--verde)}
.caja h3{margin-top:0}
.btn{display:inline-block;background:var(--rojo);color:#fff;text-decoration:none;
     padding:12px 20px;border-radius:10px;font-weight:600;margin:6px 8px 6px 0}
.btn.ghost{background:transparent;border:1px solid var(--borde);color:var(--texto)}
dl{margin:0}
dt{font-weight:600;margin-top:14px}
dd{margin:2px 0 0;color:#d6d0e0}

footer{margin-top:56px;padding-top:22px;border-top:1px solid var(--borde);
       color:var(--tenue);font-size:14px}
footer a{color:var(--tenue)}
footer nav{margin:10px 0 0}
footer nav a{padding:4px 8px 4px 0}

/* La marca de agua del logo detrás del inicio: presente, sin estorbar la lectura. */
.hero{position:relative}
.hero .marca-agua{position:absolute;right:-30px;top:-30px;width:210px;opacity:.07;
                  pointer-events:none;user-select:none}
@media(max-width:700px){.hero .marca-agua{width:140px;right:-20px;top:-10px}}