:root{
  --red:#cf2e2e;
  --deep-red:#9e1f1f;
  --orange:#f26a21;
  --cream:#f6eadc;
  --ink:#101010;
  --teal:#2a98a6;
  --bg:#160b09;
  --accent:#ffe04d;
}

/* Reset mínimo */
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--ink);color:var(--cream);
  font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial,sans-serif}
img,svg{max-width:100%;height:auto}
a{color:inherit}
button{font:inherit}

/* Texturas y diagonales */
.grit{position:relative;isolation:isolate}
.grit:before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(1200px 400px at 0% 0%, var(--red), transparent 70%),
    linear-gradient(160deg, var(--orange) 0%, var(--red) 45%, var(--deep-red) 100%);
  clip-path:polygon(0 0,100% 0,100% 85%,0 100%);
  filter:saturate(1.1) contrast(1.05);
}
/* ruido fino */
.noise:after{
  content:"";position:absolute;inset:-2px;pointer-events:none;mix-blend:multiply;opacity:.18;
  background-image:url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'>\
    <filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter>\
    <rect width='100%' height='100%' filter='url(%23n)' opacity='0.55'/>\
  </svg>");
  background-size:160px 160px;
}

/* Tipos y estilos */
.display{font-family:Anton, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;letter-spacing:.5px}
.mega{font-size:clamp(2.2rem, 6vw + .5rem, 6.5rem);line-height:.92;text-transform:uppercase}
.kicker{font-weight:800;letter-spacing:.08em}
.lead{font-size:clamp(1.05rem, 1.2vw + .6rem, 1.4rem);opacity:.95}

/* Hero */
.hero{position:relative;min-height:92svh;display:grid;place-items:center;text-align:center;padding:6rem 1.2rem}
.hero-inner{max-width:1050px;margin:auto}
.stripe{display:inline-block;background:var(--cream);color:var(--ink);
  padding:.25rem .6rem .2rem;border-radius:.25rem;transform:skew(-6deg)}
.cta-row{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;margin-top:1.5rem}
.btn{
  --pad:1.05rem 1.25rem;
  display:inline-flex;align-items:center;gap:.5rem;
  padding:var(--pad);font-weight:800;text-transform:uppercase;letter-spacing:.06em;
  border:none;cursor:pointer;clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  transition:transform .08s ease, filter .15s ease; text-decoration:none;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.05)}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:var(--cream);outline:2px solid var(--cream)}
.btn-danger{background:var(--red);color:var(--cream);outline:2px solid var(--cream)}
.btn-outline{background:transparent;color:var(--cream);outline:2px solid var(--cream)}

/* Gota animada */
.drop{width:28px;height:38px;display:inline-block;position:relative}
.drop svg{display:block}
.drip{animation:drip 2.4s ease-in infinite}
@keyframes drip{
  0%{transform:translateY(-6px) scale(.98)}
  60%{transform:translateY(0) scale(1)}
  100%{transform:translateY(14px) scale(.95);opacity:.0}
}

/* Secciones */
section{padding:4.5rem 1.2rem}
.wrap{max-width:1100px;margin:auto}

.angles{background:
    linear-gradient(180deg, transparent 0 40%, rgba(255,255,255,.06) 40% 41%, transparent 41% 100%),
    linear-gradient(160deg, transparent 0 35%, rgba(255,255,255,.06) 35% 36%, transparent 36% 100%)}
.two{display:grid;grid-template-columns:1fr;gap:1.2rem}
@media(min-width:900px){.two{grid-template-columns:1.3fr .9fr}}

/* Tarjetas */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:2px solid rgba(255,255,255,.18);
  border-radius:14px;padding:1.2rem 1rem 1.1rem;box-shadow:0 10px 30px rgba(0,0,0,.35)
}
.card h3{margin:.2rem 0 .6rem;font-family:Anton, sans-serif;text-transform:uppercase;letter-spacing:.5px}
.li-strong{list-style:none;padding:0;margin:.4rem 0}
.li-strong li{padding:.55rem .6rem;margin:.35rem 0;background:rgba(0,0,0,.35);border-left:6px solid var(--orange);font-weight:600}

/* Contador */
.counter{font-family:Anton, sans-serif;font-size:clamp(2rem, 4.6vw, 4rem);letter-spacing:.04em}
.mono{font-variant-numeric:tabular-nums}
.muted{opacity:.75}

/* Juramento */
.pledge{display:grid;grid-template-columns:1fr;gap:.8rem}
@media(min-width:720px){.pledge{grid-template-columns:1fr 1fr auto}}

/* Marquee */
.marquee{
  overflow:hidden;white-space:nowrap;border-block:2px solid rgba(255,255,255,.22);
  background:linear-gradient(90deg, rgba(0,0,0,.35), rgba(255,255,255,.06), rgba(0,0,0,.35));
}
.marquee span{
  display:inline-block;padding:.8rem 1rem;font-weight:800;text-transform:uppercase;
  animation:scroll 18s linear infinite;letter-spacing:.08em
}
@keyframes scroll{from{transform:translateX(102%)}to{transform:translateX(-102%)}}

/* Footer */
footer{padding:2.5rem 1.2rem;background:#0b0b0b;border-top:2px solid rgba(255,255,255,.15);text-align:center}

/* Imagen hero */
.icon-hero{width:min(780px,92vw);margin:1.4rem auto 0;filter:drop-shadow(0 15px 25px rgba(0,0,0,.4))}

/* Entradas on-scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
.reveal.show{opacity:1;transform:none}

/* ---------- MODAL ---------- */
.modal[hidden]{display:none !important}
.modal{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
}
.modal__backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(2px);
}
.modal__dialog{
  position:relative;background:#0f0f0f;border:2px solid rgba(255,255,255,.2);
  border-radius:16px;max-width:min(1100px, 94vw);width:100%;
  box-shadow:0 10px 40px rgba(0,0,0,.45);display:flex;flex-direction:column;
}
.modal__header,.modal__footer{padding:1rem 1rem;display:flex;align-items:center;gap:.6rem}
.modal__header{justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.12)}
.modal__footer{justify-content:flex-end;border-top:1px solid rgba(255,255,255,.12)}
.modal__body{padding:1rem}
.modal__body img{max-width:100%;max-height:70vh;display:block;margin:auto;border-radius:10px}
.modal__close{
  background:transparent;border:2px solid rgba(255,255,255,.3);color:var(--cream);
  width:38px;height:38px;border-radius:10px;cursor:pointer;font-size:22px;line-height:1
}