:root{
  --ink:#e8eef6; 
  --muted:#cbd6e9; 
  --accent:#E63946;
  --glass1: rgba(13,22,35,.65);
  --stroke: rgba(255,255,255,.16);
  --radius:22px; 
  --maxw:1120px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; 
  color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial;
  background:#0b111a;
}

/* ===== Fondo ===== */
.hero-bg{
  position:fixed; 
  inset:0; 
  z-index:0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.72)),
    url("assets/red-team.png") center / cover no-repeat;
}

/* ===== Partículas ===== */
#particles{
  position:fixed;
  inset:0;
  z-index:1;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:screen;
}

/* ===== Layout ===== */
.page{min-height:100svh; display:flex; flex-direction:column; position:relative; z-index:2}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding: clamp(24px,4vw,56px) 24px;
  flex:1;
  display:flex;
  flex-direction:column
}

/* ===== Logo ===== */
.brand{display:flex; justify-content:center; margin-bottom: clamp(14px,2.5vw,22px)}
.logo{
  height:84px; width:auto;
  filter: drop-shadow(0 0 8px rgba(0,0,0,.85)) drop-shadow(0 0 14px rgba(230,57,70,.6));
}

/* ===== Card ===== */
.card{
  width:min(980px,100%);
  max-width:980px;
  margin: clamp(12px,3vh,28px) auto 20px;
  border-radius:var(--radius);
  background: linear-gradient(180deg, var(--glass1), rgba(13,22,35,.55));
  border:1px solid var(--stroke);
  box-shadow: 0 30px 90px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter: blur(10px);
  padding: clamp(16px, 2.2vw, 28px);
}
.card h1{
  margin:0 0 10px; 
  line-height:1.06;
  font-size: clamp(32px, 5vw, 56px);
  text-shadow: 0 10px 28px rgba(0,0,0,.6);
  position:relative;
}
.card h1::after{
  content:""; position:absolute; left:0; bottom:-8px;
  width:56px; height:3px; border-radius:3px; background:var(--accent); opacity:.9;
}

/* ===== Textos ===== */
.tagline{margin: 10px 0 8px; font-size: clamp(18px, 3vw, 24px); font-weight:700;}
.lead{margin: 0 0 16px; color: var(--muted); font-size: clamp(15px, 2.1vw, 17px);}

/* ===== Contador ===== */
.countdown{display:grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap:16px;}
.tile{
  position:relative; padding:16px 14px; text-align:center; border-radius:14px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
  border:1px solid var(--stroke); backdrop-filter: blur(8px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 22px 60px rgba(0,0,0,.4);
}
.tile::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background: radial-gradient(140% 100% at 50% 0, rgba(230,57,70,.24), transparent 60%);
  pointer-events:none; opacity:.65;
}
.num{font-size: clamp(28px, 6vw, 54px); font-weight:900; text-shadow:0 6px 22px rgba(0,0,0,.55);}
.label{display:block; margin-top:6px; color:#d6e4ff; opacity:.9; font-size:14px}

/* ===== Footer ===== */
.footer{margin-top:auto; padding:16px; text-align:center; font-size:13px; color:#a8bad2;}
.footer .origin{font-weight:600; margin-bottom:4px;}
.footer .legal{opacity:.85}

/* ===== Responsivo ===== */
@media (min-width: 900px){.countdown{ grid-template-columns: repeat(4, minmax(160px, 1fr)); }}
@media (max-width: 800px){.card{ padding:18px; } .tagline,.lead{text-align:center;}}
@media (max-width: 600px){
  .logo{height:52px;} .card{max-width:92vw;padding:16px;}
  .card h1{font-size:34px;text-align:center;}
  .tagline{font-size:18px;} .lead{font-size:15px;}
  .countdown{grid-template-columns:1fr;gap:12px;}
  .tile{padding:12px;} .num{font-size:36px;}
}
@media (max-width: 420px){
  .logo{height:46px;} .card{padding:14px;} .card h1{font-size:30px;}
  .tagline{font-size:17px;} .lead{font-size:14.5px;} .num{font-size:32px;}
}