/* ============================================================
   Epoint Lab estafa — hoja de estilos
   Negro / rojo alerta / amarillo peligro. Feo a propósito.
   ============================================================ */

:root{
  --black:#0A0A0A;
  --red:#E10600;
  --red-deep:#9E0400;
  --yellow:#FFD400;
  --sheet:#F2F0EA;
  --ink:#111;
  --muted:#9A9A9A;

  --wrap:1040px;
  --gutter:16px;

  --font:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --display:"Anton",Impact,"Arial Narrow",sans-serif;
  --hazard:repeating-linear-gradient(-45deg,var(--yellow) 0 22px,var(--black) 22px 44px);
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  background:var(--black);
  color:#fff;
  font-family:var(--font);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

h1,h2,h3{margin:0;line-height:1;font-family:var(--display);font-weight:400;text-transform:uppercase}
p{margin:0}
p + p{margin-top:1em}
a{color:inherit}
svg{max-width:100%}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:3px solid var(--yellow);outline-offset:3px}

.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{
  position:absolute;left:var(--gutter);top:-100px;z-index:10;
  background:var(--yellow);color:var(--black);padding:10px 16px;font-weight:800;text-decoration:none;
}
.skip-link:focus{top:12px}

/* ---------- Franja de peligro ---------- */

.hazard{height:22px;background:var(--hazard)}

/* ---------- Alerta inicial ---------- */

.alert{
  text-align:center;
  padding:clamp(36px,8vw,72px) 0 clamp(28px,6vw,48px);
  background:radial-gradient(ellipse at 50% 0,#3A0000 0,var(--black) 70%);
}
.alert{position:relative}
.lang{position:absolute;top:12px;right:16px;font:800 .8rem/1 Figtree,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#fff;border:2px solid var(--yellow);padding:8px 12px;text-decoration:none}
.lang:hover,.lang:focus-visible{background:var(--yellow);color:#000}
.alert-icon{width:clamp(88px,20vw,150px);height:auto;display:block;margin:0 auto 18px;animation:pulse 1s steps(2) infinite}
.alert h1{
  font-size:clamp(3.4rem,15vw,9rem);
  color:var(--red);
  letter-spacing:.02em;
  text-shadow:0 0 28px rgba(225,6,0,.55);
}
.alert h1 span{display:block}
.alert h1 .blink{animation:blink 1s steps(2) infinite}
.alert-sub{
  margin:20px auto 0;
  max-width:46ch;
  font-size:clamp(1.05rem,2.6vw,1.3rem);
  font-weight:800;
  text-transform:uppercase;
}
.alert-sub strong{color:var(--yellow)}

/* ---------- Cinta repetida ---------- */

.tape{background:var(--red);color:#fff;overflow:hidden;border-block:4px solid var(--black)}
.tape + .tape{background:var(--black);color:var(--red);border-color:var(--red)}
.tape-track{
  display:flex;width:max-content;
  font-family:var(--display);
  font-size:clamp(2rem,7vw,4.2rem);
  line-height:1.15;
  text-transform:uppercase;
  white-space:nowrap;
  animation:tape 18s linear infinite;
}
.tape + .tape .tape-track{animation-direction:reverse}
.tape-track span{padding-inline:.4em}

/* ---------- Relato ---------- */

.section{padding-block:clamp(44px,8vw,80px)}

.relato-head{text-align:center;margin-bottom:clamp(24px,5vw,40px)}
.relato-head h2{font-size:clamp(2.1rem,7vw,4rem);color:#fff}
.relato-head h2 em{font-style:normal;color:var(--red)}
.relato-head p{margin-top:12px;color:var(--yellow);font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.85rem}

.sheet{
  position:relative;
  background:var(--sheet);
  color:var(--ink);
  padding:clamp(26px,5vw,56px) clamp(18px,5vw,56px);
  border:6px solid var(--red);
  box-shadow:0 0 0 6px var(--black),0 0 0 12px var(--yellow);
  font-size:clamp(1rem,2.2vw,1.1rem);
  text-wrap:pretty;
}
.sheet p{margin-top:1.1em}
.sheet p:first-child{margin-top:0}
.sheet b{color:var(--red-deep);font-weight:800}

.firma{
  margin-top:clamp(36px,6vw,56px);
  text-align:center;
  font-family:var(--display);
  font-size:clamp(1.6rem,5.5vw,3rem);
  line-height:1.1;
  text-transform:uppercase;
  color:var(--red);
}
.firma small{display:block;font-family:var(--font);font-size:.8rem;font-weight:800;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}

/* ---------- Pie ---------- */

.site-footer{border-top:1px solid #222;padding-block:28px 40px;color:var(--muted);font-size:.8rem}
.site-footer p + p{margin-top:.8em}
.site-footer a{color:#fff}

/* ---------- Páginas internas ---------- */

.prose{max-width:70ch;padding-block:clamp(40px,7vw,72px)}
.prose h1{font-size:clamp(2.4rem,8vw,4rem);color:var(--red);margin-bottom:18px}
.prose h2{font-size:1.5rem;margin:1.8em 0 .5em}
.prose p{color:#CFCFCF}
.prose a{color:var(--yellow)}
.btn{display:inline-block;margin-top:24px;background:var(--red);color:#fff;padding:12px 22px;font-weight:800;text-decoration:none;text-transform:uppercase}

/* ---------- Animaciones ---------- */

@keyframes blink{50%{opacity:.15}}
@keyframes pulse{50%{transform:scale(1.08)}}
@keyframes tape{to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important}
}