/* =====================================================================
   GURIN — landing.css
   Landing pública "próximamente" · revista deportiva editorial.
   Paleta e identidad idénticas al PDF de picks. Mobile-first.
   ===================================================================== */

:root{
  --crema:#f5f2ec; --crema-2:#ebe6dc; --papel:#ffffff;
  --tinta:#1a1a1a; --tinta-2:#4a4742; --tinta-3:#8b857b;
  --rojo:#C8102E; --amarillo:#E8A100; --verde:#1E7B3C; --dorado:#B08D2E;
  --borde:#ddd6c8; --sombra:0 2px 16px rgba(26,26,26,.07);
  --sombra-alta:0 14px 44px rgba(26,26,26,.14);
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }
body{
  background:var(--crema); color:var(--tinta);
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.serif{ font-family:'Playfair Display',Georgia,serif; }
.mono{ font-family:'JetBrains Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums; }

.contenedor{ width:100%; max-width:1140px; margin:0 auto; padding:0 22px; }
section{ position:relative; }

/* ------------------------------------------------------------ A · TICKER */
.ticker{
  background:var(--tinta); color:var(--crema);
  border-bottom:2px solid var(--rojo);
  overflow:hidden; white-space:nowrap; position:sticky; top:0; z-index:40;
}
.ticker-pista{
  display:inline-flex; align-items:center; gap:0;
  animation:desliza 42s linear infinite; will-change:transform;
}
.ticker:hover .ticker-pista{ animation-play-state:paused; }
.ticker-item{
  display:inline-flex; align-items:center; gap:9px;
  font-family:'JetBrains Mono',monospace; font-size:12.5px; letter-spacing:.02em;
  padding:9px 22px; border-right:1px solid rgba(245,242,236,.14);
}
.ticker-item b{ color:var(--amarillo); font-weight:700; }
.ticker-item .sep{ color:var(--rojo); }
@keyframes desliza{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }

/* -------------------------------------------------------------- B · HERO */
.hero{
  position:relative; padding:74px 0 88px; text-align:center; overflow:hidden;
  background:
    radial-gradient(1200px 560px at 50% -10%, rgba(200,16,46,.06), transparent 60%),
    radial-gradient(900px 480px at 88% 120%, rgba(176,141,46,.10), transparent 62%),
    var(--crema);
}
.hero-fondo{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero-fondo svg{ position:absolute; opacity:.08; }
.hero .contenedor{ position:relative; z-index:1; }

.badge-proximo{
  display:inline-block; margin-bottom:24px;
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.22em; text-transform:uppercase;
  color:#7a5a12; background:rgba(176,141,46,.14);
  border:1px solid rgba(176,141,46,.35); border-radius:999px;
  padding:8px 18px;
}
.hero h1{
  font-family:'Playfair Display',serif; font-weight:900;
  font-size:clamp(68px,17vw,168px); line-height:.9; letter-spacing:-.03em;
  margin:0 0 6px; padding-left:.04em;
}
.hero h1 .punto{ color:var(--rojo); }
.hero .tagline{
  font-family:'Playfair Display',serif; font-style:italic; font-weight:500;
  font-size:clamp(20px,3.6vw,30px); color:var(--tinta); line-height:1.28;
  max-width:16ch; margin:14px auto 0;
}
.hero .subtagline{
  font-size:clamp(15px,2.2vw,17.5px); color:var(--tinta-2);
  max-width:52ch; margin:20px auto 0;
}
.hero .filete{
  width:64px; height:3px; margin:34px auto 0;
  background:linear-gradient(90deg,var(--rojo),var(--dorado),var(--amarillo));
  border-radius:2px;
}

/* ----------------------------------------------------- C · CONTADORES */
.contadores{ padding:12px 0 68px; background:var(--crema); }
.contadores-grid{
  display:grid; gap:16px; grid-template-columns:repeat(2,1fr);
}
.contador{
  background:var(--papel); border:1px solid var(--borde); border-radius:16px;
  padding:26px 20px; box-shadow:var(--sombra); text-align:center;
}
.contador .n{
  font-family:'JetBrains Mono',monospace; font-weight:700;
  font-size:clamp(30px,6vw,44px); line-height:1; color:var(--tinta);
  letter-spacing:-.02em;
}
.contador .et{
  font-size:12px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--tinta-3); font-weight:700; margin-top:11px;
}
.contador .micro{ font-size:12.5px; color:var(--tinta-2); margin-top:5px; font-style:italic; }
.contador:nth-child(1) .n{ color:var(--rojo); }
.contador:nth-child(2) .n{ color:var(--tinta); }
.contador:nth-child(3) .n{ color:var(--dorado); }
.contador:nth-child(4) .n{ color:var(--verde); }

/* -------------------------------------------------- encabezado sección */
.sec-cab{ text-align:center; max-width:34ch; margin:0 auto 40px; }
.sec-cab .kicker{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; font-weight:700;
  letter-spacing:.2em; text-transform:uppercase; color:var(--rojo); margin-bottom:10px;
}
.sec-cab h2{
  font-family:'Playfair Display',serif; font-weight:800;
  font-size:clamp(28px,5vw,40px); line-height:1.08; letter-spacing:-.02em;
}

/* ------------------------------------------------------- D · CÓMO NACE */
.pasos{ padding:70px 0; background:var(--papel); border-top:1px solid var(--borde); }
.pasos-grid{ display:grid; gap:20px; grid-template-columns:1fr; }
.paso{
  background:var(--crema); border:1px solid var(--borde); border-radius:16px;
  padding:26px 24px; display:flex; gap:18px; align-items:flex-start;
}
.paso .num{
  flex:0 0 42px; height:42px; border-radius:50%;
  background:var(--tinta); color:var(--crema);
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.paso h3{ font-size:18px; font-weight:700; margin-bottom:6px; }
.paso p{ font-size:14.5px; color:var(--tinta-2); line-height:1.55; }

/* ---------------------------------------------------- E · MUESTRA PDF */
.muestra{ padding:70px 0; background:var(--crema); }
.revista{
  max-width:720px; margin:0 auto; background:var(--papel);
  border:1px solid var(--borde); border-radius:14px; box-shadow:var(--sombra-alta);
  overflow:hidden;
}
.rev-head{
  display:flex; justify-content:space-between; align-items:baseline;
  padding:18px 26px; border-bottom:2px solid var(--tinta);
}
.rev-head .liga{ font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; }
.rev-head .liga span{ color:var(--tinta-3); }
.rev-head .kick{ font-family:'Playfair Display',serif; font-style:italic; font-weight:900; font-size:19px; color:var(--rojo); }
.rev-match{ display:flex; align-items:center; gap:20px; padding:24px 26px 18px; }
.rev-escudos{ display:flex; align-items:center; gap:12px; }
.rev-mono{
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px;
}
.rev-vs{ font-family:'Playfair Display',serif; font-style:italic; color:var(--tinta-3); font-weight:700; }
.rev-match h3{
  font-family:'Playfair Display',serif; font-weight:900; font-size:clamp(19px,4vw,26px);
  text-transform:uppercase; letter-spacing:-.01em; line-height:1;
}
.rev-match h3 .sep{ color:var(--rojo); }
.rev-kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; padding:0 26px 18px; }
.rev-kpi{ background:var(--crema); border:1px solid var(--borde); border-radius:9px; padding:10px 11px; }
.rev-kpi .k{ font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--tinta-3); }
.rev-kpi .v{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:15px; margin-top:3px; }
.rev-banda{
  margin:0 26px 22px; background:var(--tinta); color:var(--crema);
  border-radius:10px; padding:13px 18px; display:flex; align-items:center; gap:16px;
}
.rev-banda .et{ font-size:9px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(245,242,236,.6); line-height:1.3; }
.rev-banda .marcador{ font-family:'JetBrains Mono',monospace; font-weight:700; font-size:26px; }
.rev-banda .prob{ color:var(--amarillo); font-size:12px; font-weight:700; }

/* Picks con blur + candado */
.rev-picks{ position:relative; padding:6px 26px 30px; }
.rev-picks-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; filter:blur(5px); opacity:.85; user-select:none; }
.rev-pick{ background:var(--papel); border:1px solid var(--borde); border-top:3px solid var(--tinta); border-radius:10px; padding:12px; }
.rev-pick.a{ border-top-color:var(--rojo); }
.rev-pick.v{ border-top-color:var(--amarillo); }
.rev-pick.p{ border-top-color:var(--verde); }
.rev-pick .t{ font-size:8.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.rev-pick.a .t{ color:var(--rojo); } .rev-pick.v .t{ color:#8a6000; } .rev-pick.p .t{ color:var(--verde); }
.rev-pick .s{ font-family:'Playfair Display',serif; font-weight:700; font-size:15px; margin:5px 0; }
.rev-pick .c{ font-family:'JetBrains Mono',monospace; font-size:13px; font-weight:700; }
.rev-candado{
  position:absolute; inset:6px 26px 30px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:8px; text-align:center;
}
.rev-candado .ico{
  width:46px; height:46px; border-radius:50%; background:var(--dorado); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:22px;
  box-shadow:0 6px 18px rgba(176,141,46,.4);
}
.rev-candado .txt{ font-size:12.5px; font-weight:700; letter-spacing:.05em; color:var(--tinta); background:rgba(245,242,236,.86); padding:5px 12px; border-radius:999px; }

/* ------------------------------------------------------- F · ROADMAP */
.roadmap{ padding:70px 0; background:var(--papel); border-top:1px solid var(--borde); }
.hitos{ display:grid; gap:18px; grid-template-columns:1fr; position:relative; }
.hito{ text-align:center; padding:8px 14px; }
.hito .pin{
  width:15px; height:15px; border-radius:50%; background:var(--papel);
  border:3px solid var(--dorado); margin:0 auto 16px; position:relative;
}
.hito h3{ font-size:17px; font-weight:700; }
.hito p{ font-size:13.5px; color:var(--tinta-3); margin-top:5px; }

/* --------------------------------------------------------- G · FOOTER */
.footer{ background:var(--tinta); color:var(--crema); padding:44px 0 30px; }
.footer .marca{
  font-family:'Playfair Display',serif; font-weight:900; font-size:26px;
  letter-spacing:.14em; padding-left:.14em;
}
.footer .marca .punto{ color:var(--rojo); }
.footer .hecho{ font-size:12.5px; color:rgba(245,242,236,.7); margin-top:8px; letter-spacing:.03em; }
.footer .legal{ font-size:11px; color:rgba(245,242,236,.6); line-height:1.6; margin-top:22px; max-width:70ch; }
.footer .filete{ width:44px; height:3px; background:var(--dorado); border-radius:2px; margin-top:18px; }

/* ------------------------------------------------------------- MOTION */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion:reduce){
  .ticker-pista{ animation:none; }
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ------------------------------------------------------- RESPONSIVE + */
@media (min-width:680px){
  .contadores-grid{ grid-template-columns:repeat(4,1fr); }
  .pasos-grid{ grid-template-columns:repeat(3,1fr); }
  .hitos{ grid-template-columns:repeat(3,1fr); }
  .hitos::before{
    content:''; position:absolute; top:7px; left:16%; right:16%; height:3px;
    background:linear-gradient(90deg,var(--dorado),rgba(176,141,46,.25)); z-index:0;
  }
  .hito{ position:relative; z-index:1; }
}