/* ============================================================
   TU MOMENTO DE GANAR — Home one-page · dirección de arte "carbón templado"
   Paleta: azul noche + verde neón (elevada a producto)
   Tipografía display: Sora · texto: Manrope
   Tokens y reglas: docs/direccion-de-arte.md · modelo: docs/modelo-sorteos-y-pool.md
   ============================================================ */
:root{
  /* DIRECCIÓN DE ARTE "CARBÓN TEMPLADO" — fijada 2026-08-18.
     Fuente única: docs/direccion-de-arte.md · piezas: assets/premio/piezas/
     El fondo es lo MÁS APAGADO de la página: el color lo ponen el premio y la marca. */
  --bg:#241D22;
  --bg-2:#2A2229;
  --bg-3:#3A3036;
  --bg-deep:#120D11;
  --line:#453A42;
  --line-soft:#332A31;
  --txt:#F7F2EA;
  --muted:#B9B3AA;

  /* Sistema cálido — jerarquía: gold=premio · naranjo=acción · rojo=urgencia */
  --gold:#f5c451;       /* acento principal: números, precios, premio */
  --gold-2:#e0a92e;
  --orange:#ff7a2f;     /* acción: CTAs, íconos de pasos, hover */
  --orange-2:#ff5e1a;
  --red:#e23744;        /* urgencia: tag rifa activa, % OFF, escasez */
  --red-2:#c11f2c;

  /* Alias de compatibilidad: --neon mapea al gold (no romper usos existentes) */
  --neon:var(--gold);
  --neon-2:var(--gold-2);
  --neon-deep:#1a1304;

  --radius:16px;
  --maxw:1180px;
  --pad:24px;
  --shadow-neon:0 0 0 1px rgba(245,196,81,.35), 0 18px 50px -12px rgba(245,196,81,.28);
  --shadow-orange:0 0 0 1px rgba(255,122,47,.4), 0 18px 50px -12px rgba(255,122,47,.35);
  --font-d:'Sora',system-ui,sans-serif;
  --font:'Manrope',system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--txt);font-family:var(--font);line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ---------- Tipografía de sección ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--neon);
  font-family:var(--font-d);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;margin-bottom:14px}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--neon);border-radius:2px}
.sec-title{font-family:var(--font-d);font-weight:800;letter-spacing:-.02em;line-height:1.1;
  font-size:clamp(1.8rem,3.6vw,2.6rem);margin-bottom:16px}
.sec-sub{color:var(--muted);font-size:1.04rem;max-width:560px;line-height:1.6}
.sec-head{margin-bottom:48px}
.sec-head.center{text-align:center;margin-inline:auto}
.sec-head.center .sec-sub{margin-inline:auto}
section.block{padding:96px 0;position:relative}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:linear-gradient(135deg,var(--orange),var(--orange-2));color:#fff;font-family:var(--font-d);
  font-weight:700;border:none;border-radius:12px;padding:14px 28px;cursor:pointer;font-size:.95rem;
  letter-spacing:.01em;position:relative;
  box-shadow:0 10px 30px -8px rgba(255,94,26,.6), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform .18s cubic-bezier(.4,1.3,.5,1), box-shadow .18s, filter .18s}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 16px 40px -8px rgba(255,94,26,.75), inset 0 1px 0 rgba(255,255,255,.4)}
.btn:active{transform:translateY(0)}
.btn svg{width:18px;height:18px}
.btn-ghost{background:transparent;color:var(--txt);border:1.5px solid var(--line);
  box-shadow:none;backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:var(--orange);color:var(--orange);box-shadow:none;filter:none}
.btn-block{width:100%}

/* ---------- Fondo ambiental: CARBÓN TEMPLADO (sin foto) ----------
   Mismo sistema que las piezas gráficas — ver docs/direccion-de-arte.md.
   Se descartó la foto de stock de bengalas: era placeholder y ensuciaba el fondo.
   El color lo ponen los glows, no la superficie. */
.bg-fx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:linear-gradient(150deg,var(--bg-3) 0%,var(--bg) 48%,var(--bg-deep) 100%);}
.bg-fx::before{content:"";position:absolute;inset:0;
  background:
    radial-gradient(85vw 68vh at 72% 30%, rgba(255,185,85,.30), transparent 64%),
    radial-gradient(62vw 58vh at 10% 88%, rgba(226,55,68,.20), transparent 66%),
    radial-gradient(58vw 48vh at 6% 4%, rgba(255,224,190,.12), transparent 60%);}
/* Viñeta: cierra los bordes para que el contenido central mande */
.bg-fx::after{content:"";position:absolute;inset:0;
  background:radial-gradient(118vw 88vh at 50% 42%, transparent 48%, rgba(0,0,0,.55) 100%);}
.grid-lines{display:none}
.content{position:relative;z-index:1}

/* ---------- Top strip (urgencia) ---------- */
.top-strip{background:linear-gradient(90deg,var(--red-2),var(--red),var(--orange));color:#fff;
  text-align:center;font-size:.8rem;font-weight:700;padding:8px 16px;letter-spacing:.01em;
  position:relative;z-index:60}
.top-strip b{font-weight:800;color:#ffe08a}

/* ---------- Header ---------- */
header.site{position:sticky;top:0;z-index:50;
  background:rgba(15,19,32,.72);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid var(--line-soft)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;gap:20px}
.brand{display:flex;align-items:center;gap:11px;font-family:var(--font-d);font-weight:800;
  font-size:1.05rem;letter-spacing:.01em}
.brand .logo{width:38px;height:38px;border-radius:11px;
  background:linear-gradient(135deg,var(--neon),var(--neon-2));color:var(--neon-deep);
  display:grid;place-items:center;font-weight:800;font-size:.9rem;
  box-shadow:0 6px 18px -4px rgba(245,196,81,.6)}
.brand .logo span{transform:translateY(-1px)}
.nav-links{display:flex;gap:30px;font-size:.9rem;font-weight:500;color:var(--muted)}
.nav-links a{position:relative;transition:color .15s}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-6px;width:0;height:2px;
  background:var(--neon);border-radius:2px;transition:width .2s}
.nav-links a:hover{color:var(--txt)}
.nav-links a:hover::after{width:100%}
.nav-cta{display:flex;align-items:center;gap:16px}
.menu-toggle{display:none;background:none;border:none;color:var(--txt);font-size:1.5rem;cursor:pointer}

/* ---------- Hero ---------- */
.hero{padding:70px 0 88px;position:relative}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:54px;align-items:center}
.tag-live{display:inline-flex;align-items:center;gap:9px;
  background:rgba(226,55,68,.12);color:#ff8c96;
  border:1px solid rgba(226,55,68,.45);border-radius:999px;padding:7px 16px;
  font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;margin-bottom:24px}
.tag-live .dot{width:9px;height:9px;border-radius:50%;background:var(--red);
  box-shadow:0 0 0 0 rgba(226,55,68,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(226,55,68,.5)}70%{box-shadow:0 0 0 11px rgba(226,55,68,0)}100%{box-shadow:0 0 0 0 rgba(226,55,68,0)}}
.hero h1{font-family:var(--font-d);font-size:clamp(2.4rem,5.2vw,4rem);font-weight:800;
  line-height:1.03;letter-spacing:-.025em;margin-bottom:22px}
.hero h1 .prize{color:var(--neon);position:relative;text-shadow:0 0 36px rgba(245,196,81,.45)}
.hero p.lead{color:var(--muted);font-size:1.1rem;max-width:480px;margin-bottom:32px;line-height:1.6}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:34px}
.hero-feats{display:flex;flex-wrap:wrap;gap:22px;font-size:.86rem;color:var(--muted);font-weight:500}
.hero-feats span{display:flex;align-items:center;gap:9px}
.hero-feats .ic{width:22px;height:22px;border-radius:7px;background:rgba(245,196,81,.13);
  display:grid;place-items:center;flex-shrink:0}
.hero-feats .ic svg{width:13px;height:13px;stroke:var(--neon)}
.proof{display:flex;align-items:center;gap:14px;margin-top:34px;
  padding-top:28px;border-top:1px solid var(--line-soft)}
.avatars{display:flex}
.avatars i{width:36px;height:36px;border-radius:50%;border:2px solid var(--bg);
  margin-left:-10px;background:linear-gradient(135deg,var(--bg-3),var(--bg-2));display:block}
.avatars i:first-child{margin-left:0}
.proof-txt{font-size:.82rem;color:var(--muted);line-height:1.35}
.proof-txt b{color:var(--txt);font-weight:700}
.stars{color:var(--neon);letter-spacing:2px;font-size:.8rem}
.prize-card{position:relative;border-radius:22px;padding:18px;
  background:linear-gradient(160deg,var(--bg-2),var(--bg));border:1px solid var(--line);
  box-shadow:0 40px 80px -30px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.04);
  transform:perspective(1400px) rotateY(-7deg) rotateX(3deg);transition:transform .4s}
.prize-card:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg)}
.prize-photo{position:relative;border-radius:14px;overflow:hidden;min-height:340px;
  background:radial-gradient(circle at 70% 25%, rgba(245,196,81,.14), transparent 55%),
    linear-gradient(150deg,var(--bg-2),var(--bg-deep));
  border:1px solid var(--line-soft);display:grid;place-items:center;text-align:center}
.prize-photo .ph-label{color:var(--muted);font-size:.82rem;letter-spacing:.04em;
  display:flex;flex-direction:column;align-items:center;gap:12px;padding:24px}
.prize-photo .ph-label svg{width:42px;height:42px;stroke:var(--line);opacity:.8}
.prize-photo .shine{position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.06) 50%,transparent 60%)}
.float-badge{position:absolute;z-index:3;background:rgba(26,20,24,.88);backdrop-filter:blur(10px);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;
  box-shadow:0 14px 36px -10px rgba(0,0,0,.6)}
.float-badge.tl{top:32px;left:-26px}
.float-badge.br{top:32px;right:-22px}
.float-badge .fb-k{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:4px}
.float-badge .fb-v{font-family:var(--font-d);font-weight:800;font-size:1.3rem;line-height:1}
.float-badge .fb-v small{font-size:.8rem;color:var(--muted);font-weight:600}
.float-badge .fb-v.neon{color:var(--neon)}
.prize-timer{margin-top:14px;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:14px;padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:14px}
.prize-timer .pt-label{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.timer{display:flex;gap:8px}
.timer .cell{background:var(--bg-2);border:1px solid var(--line);border-radius:9px;
  padding:7px 9px;text-align:center;min-width:46px}
.timer .cell b{display:block;font-family:var(--font-d);font-size:1.15rem;color:var(--neon);line-height:1;font-weight:800;font-variant-numeric:tabular-nums}
.timer .cell span{display:block;font-size:.6rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;margin-top:4px}
/* Estado "sin calendario confirmado": un contador no puede correr sin fecha, así que
   el bloque de celdas se oculta y en su lugar va este aviso. Se repone solo con
   FECHAS_CONFIRMADAS = true en el <script> del final. */
.pt-pendiente{text-align:right;min-width:0}
.pt-pendiente b{display:block;font-family:var(--font-d);font-weight:800;font-size:.95rem;
  color:var(--gold);line-height:1.15}
.pt-pendiente span{display:block;font-size:.66rem;color:var(--muted);margin-top:3px;line-height:1.35}

/* ---------- PACKS ---------- */
.packs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.pack{position:relative;background:linear-gradient(160deg,var(--bg-2),var(--bg));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:30px 26px;
  display:flex;flex-direction:column;transition:transform .2s, border-color .2s, box-shadow .2s}
.pack:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:0 30px 60px -28px rgba(0,0,0,.7)}
.pack.featured{border-color:rgba(245,196,81,.5);
  background:linear-gradient(160deg,var(--bg-2),var(--bg-deep));box-shadow:var(--shadow-neon)}
.pack-flag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--neon);color:var(--neon-deep);font-family:var(--font-d);font-weight:800;
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 16px;border-radius:999px;
  box-shadow:0 8px 20px -6px rgba(245,196,81,.6)}
/* El badge .pack-save es absolute sobre la esquina superior derecha: el título DEBE
   reservarle el ancho o lo pisa. Con 4 columnas la tarjeta se angostó y "6 tickets /
   6 números" quedaba cortado bajo el "33% OFF". El span se mantiene entero al envolver. */
.pack-qty{font-family:var(--font-d);font-weight:800;font-size:1.05rem;color:var(--txt);
  padding-right:78px;min-height:1.5em}
.pack-qty span{color:var(--muted);font-weight:600;font-size:.9rem;display:inline-block}
.pack-price{font-family:var(--font-d);font-weight:800;font-size:2.6rem;line-height:1;
  margin:16px 0 6px;letter-spacing:-.02em}
.pack.featured .pack-price{color:var(--neon)}
.pack-unit{font-size:.82rem;color:var(--muted);margin-bottom:22px}
.pack-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:26px;flex:1}
.pack-list li{display:flex;align-items:flex-start;gap:10px;font-size:.9rem;color:var(--muted)}
.pack-list li svg{width:17px;height:17px;stroke:var(--neon);flex-shrink:0;margin-top:2px}
.pack-list li b{color:var(--txt);font-weight:600}
/* ⚠️ El texto del li va SIEMPRE dentro de este span. Un <b> suelto dentro de un
   contenedor flex se vuelve flex item propio y se separa del resto de la frase
   ("15 números" arriba, "en los 3 sorteos" al lado). El span los une en un solo item. */
.pack-list li .txt{flex:1;line-height:1.45}
.pack-save{position:absolute;top:18px;right:18px;background:var(--red);
  border:1px solid rgba(255,255,255,.18);color:#fff;font-family:var(--font-d);
  font-weight:800;font-size:.72rem;letter-spacing:.03em;padding:5px 11px;border-radius:8px;
  box-shadow:0 6px 16px -6px rgba(226,55,68,.7)}
.pack.featured .pack-save{top:18px}
/* fila de confianza bajo los packs */
.pay-trust{margin-top:34px;display:flex;flex-direction:column;align-items:center;gap:16px}
.trust-row{display:flex;flex-wrap:wrap;justify-content:center;gap:12px 26px;
  color:var(--muted);font-size:.82rem;font-weight:500}
.trust-row span{display:inline-flex;align-items:center;gap:8px}
.trust-row svg{width:15px;height:15px;stroke:var(--neon);flex-shrink:0}

/* ---------- CÓMO FUNCIONA ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.step{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  padding:28px 24px;position:relative;transition:border-color .2s}
.step:hover{border-color:var(--line)}
.step-n{font-family:var(--font-d);font-weight:800;font-size:.8rem;color:var(--neon-deep);
  background:var(--neon);width:32px;height:32px;border-radius:9px;display:grid;place-items:center;
  margin-bottom:18px;box-shadow:0 8px 18px -6px rgba(245,196,81,.6)}
.step h3{font-family:var(--font-d);font-weight:700;font-size:1.05rem;margin-bottom:8px}
.step p{font-size:.88rem;color:var(--muted);line-height:1.55}
.step-ic{position:absolute;top:24px;right:22px;opacity:.4}
.step-ic svg{width:22px;height:22px;stroke:var(--orange)}

/* ---------- GALERÍA ---------- */
.gallery{display:grid;grid-template-columns:1.6fr 1fr;grid-template-rows:repeat(2,1fr);
  gap:16px;min-height:480px}
.gal-item{position:relative;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line-soft);
  background:radial-gradient(circle at 60% 30%, rgba(245,196,81,.1), transparent 55%),
    linear-gradient(150deg,var(--bg-2),var(--bg-deep));display:grid;place-items:center;min-height:150px}
.gal-item.main{grid-row:span 2}
.gal-ph{color:var(--muted);font-size:.78rem;letter-spacing:.05em;text-align:center;
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px}
.gal-ph svg{width:32px;height:32px;stroke:var(--line)}
.gal-item.main .gal-ph svg{width:48px;height:48px}
.gal-tag{position:absolute;top:14px;left:14px;background:rgba(15,19,32,.8);backdrop-filter:blur(8px);
  border:1px solid var(--line);border-radius:8px;padding:5px 12px;font-size:.72rem;font-weight:600;color:var(--txt)}

/* ---------- DATOS / CIFRAS ---------- */
.stats-band{background:linear-gradient(120deg,#10223c,#0b1627);border:1px solid var(--line-soft);
  border-radius:22px;padding:46px 30px;display:grid;grid-template-columns:repeat(4,1fr);gap:24px;
  box-shadow:0 30px 70px -34px rgba(0,0,0,.7)}
.stat{text-align:center;position:relative}
.stat:not(:last-child)::after{content:"";position:absolute;right:-12px;top:10%;height:80%;width:1px;background:var(--line-soft)}
.stat b{display:block;font-family:var(--font-d);font-weight:800;font-size:2.6rem;color:var(--neon);
  line-height:1;letter-spacing:-.02em;text-shadow:0 0 30px rgba(245,196,81,.3)}
.stat span{display:block;color:var(--muted);font-size:.86rem;margin-top:10px;font-weight:500}

/* ---------- MÓDULO DE SORTEO ---------- */
.draw{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.draw-panel{background:linear-gradient(160deg,var(--bg-2),var(--bg));border:1px solid var(--line);
  border-radius:22px;padding:36px 32px;box-shadow:0 30px 70px -34px rgba(0,0,0,.7)}
.draw-display{background:var(--bg);border:1px solid var(--line-soft);border-radius:16px;
  padding:34px;text-align:center;margin-bottom:24px;position:relative;overflow:hidden}
.draw-display::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 50% 0%, rgba(245,196,81,.16), transparent 60%)}
.draw-num{position:relative;font-family:var(--font-d);font-weight:800;
  font-size:clamp(3rem,9vw,5rem);color:var(--neon);line-height:1;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;text-shadow:0 0 44px rgba(245,196,81,.5)}
.draw-label{position:relative;color:var(--muted);font-size:.78rem;text-transform:uppercase;
  letter-spacing:.16em;margin-top:14px;font-weight:600}
.draw-note{font-size:.84rem;color:var(--muted);margin-top:18px;text-align:center;line-height:1.5}
.draw-feats{list-style:none;display:flex;flex-direction:column;gap:16px}
.draw-feats li{display:flex;gap:14px;align-items:flex-start}
.draw-feats .df-ic{width:40px;height:40px;border-radius:11px;background:rgba(245,196,81,.12);
  border:1px solid rgba(245,196,81,.25);display:grid;place-items:center;flex-shrink:0}
.draw-feats .df-ic svg{width:19px;height:19px;stroke:var(--neon)}
.draw-feats h4{font-family:var(--font-d);font-weight:700;font-size:1rem;margin-bottom:3px}
.draw-feats p{font-size:.88rem;color:var(--muted);line-height:1.5}

/* ---------- GANADORES ---------- */
.winners{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.winner{background:var(--bg-2);border:1px solid var(--line-soft);border-radius:var(--radius);
  overflow:hidden;transition:transform .2s, border-color .2s}
.winner:hover{transform:translateY(-4px);border-color:var(--line)}
.winner-media{position:relative;aspect-ratio:4/3;
  background:radial-gradient(circle at 60% 30%, rgba(245,196,81,.1), transparent 55%),
    linear-gradient(150deg,var(--bg-2),var(--bg-deep));display:grid;place-items:center}
.winner-media svg{width:34px;height:34px;stroke:var(--line)}
.winner-play{position:absolute;width:52px;height:52px;border-radius:50%;background:rgba(245,196,81,.92);
  display:grid;place-items:center;box-shadow:0 10px 30px -6px rgba(245,196,81,.6)}
.winner-play svg{width:20px;height:20px;stroke:none;fill:var(--neon-deep)}
.winner-body{padding:20px 22px}
.winner-edition{font-size:.72rem;color:var(--neon);font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-bottom:7px}
.winner-name{font-family:var(--font-d);font-weight:700;font-size:1.05rem;margin-bottom:4px}
.winner-prize{font-size:.86rem;color:var(--muted)}

/* ---------- BONUS ---------- */
.bonus{background:linear-gradient(120deg,var(--bg-2),var(--bg-deep));
  border:1px solid rgba(245,196,81,.42);border-radius:22px;
  padding:40px 44px;display:flex;align-items:center;justify-content:space-between;gap:30px;
  color:var(--txt);position:relative;overflow:hidden;
  box-shadow:0 26px 60px -34px rgba(0,0,0,.7), inset 0 1px 0 rgba(245,196,81,.12)}
.bonus::after{content:"";position:absolute;top:-45%;right:-4%;width:360px;height:360px;
  background:radial-gradient(circle,rgba(245,196,81,.18),transparent 62%);pointer-events:none}
.bonus-txt{position:relative;max-width:620px}
.bonus-txt h3{font-family:var(--font-d);font-weight:800;font-size:clamp(1.5rem,3vw,2rem);
  letter-spacing:-.02em;margin-bottom:8px;line-height:1.1}
.bonus-txt h3 b{color:var(--neon)}
.bonus-txt p{font-size:.98rem;color:var(--muted);font-weight:500}
.bonus .btn{position:relative;flex-shrink:0}

/* ---------- FAQ ---------- */
.faq{max-width:780px;margin:0 auto}
.faq-item{border:1px solid var(--line-soft);border-radius:14px;margin-bottom:14px;
  background:var(--bg-2);overflow:hidden;transition:border-color .2s}
.faq-item[open]{border-color:var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:20px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;font-family:var(--font-d);
  font-weight:600;font-size:1.02rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary .q-ic{width:26px;height:26px;border-radius:8px;background:rgba(245,196,81,.12);
  display:grid;place-items:center;flex-shrink:0;transition:transform .25s}
.faq-item summary .q-ic svg{width:14px;height:14px;stroke:var(--neon)}
.faq-item[open] summary .q-ic{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 24px 22px 24px;color:var(--muted);font-size:.94rem;line-height:1.6}

/* ---------- CONTACTO ---------- */
.contact{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch}
.contact-info{display:flex;flex-direction:column;gap:18px}
.contact-card{display:flex;align-items:center;gap:16px;background:var(--bg-2);
  border:1px solid var(--line-soft);border-radius:14px;padding:18px 20px;transition:border-color .2s}
.contact-card:hover{border-color:var(--neon)}
.contact-card .cc-ic{width:46px;height:46px;border-radius:12px;background:rgba(245,196,81,.12);
  border:1px solid rgba(245,196,81,.25);display:grid;place-items:center;flex-shrink:0}
.contact-card .cc-ic svg{width:20px;height:20px;stroke:var(--neon)}
.contact-card .cc-k{font-size:.74rem;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}
.contact-card .cc-v{font-family:var(--font-d);font-weight:700;font-size:1rem}
/* Un flex item trae min-width:auto: no encoge por debajo de su contenido. Con el
   correo real (tumomentodeganar1@gmail.com, más largo que el placeholder previo)
   las 3 tarjetas empujaban el ancho del documento a 406px sobre un viewport de
   375. Hay que soltar el mínimo en la tarjeta Y en su columna de texto: basta con
   que una de las dos lo conserve para que el desborde siga. */
.contact-card{min-width:0}
.contact-card > div{min-width:0}
.contact-card .cc-v{overflow-wrap:anywhere}
.form{background:linear-gradient(160deg,var(--bg-2),var(--bg));border:1px solid var(--line);
  border-radius:22px;padding:32px;box-shadow:0 30px 70px -34px rgba(0,0,0,.7)}
.field{margin-bottom:18px}
.field label{display:block;font-size:.82rem;color:var(--muted);font-weight:600;margin-bottom:8px}
.field input,.field textarea{width:100%;background:var(--bg);border:1px solid var(--line-soft);
  border-radius:11px;padding:13px 15px;color:var(--txt);font-family:var(--font);font-size:.94rem;
  transition:border-color .15s, box-shadow .15s}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--neon);
  box-shadow:0 0 0 3px rgba(245,196,81,.15)}
.field textarea{resize:vertical;min-height:110px}

/* ---------- FOOTER ---------- */
footer.site{border-top:1px solid var(--line-soft);background:rgba(7,14,26,.6);padding:54px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
.foot-about p{color:var(--muted);font-size:.9rem;line-height:1.6;margin-top:16px;max-width:320px}
.foot-col h5{font-family:var(--font-d);font-weight:700;font-size:.82rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt);margin-bottom:16px}
.foot-col a{display:block;color:var(--muted);font-size:.9rem;margin-bottom:11px;transition:color .15s}
.foot-col a:hover{color:var(--neon)}
.foot-bottom{border-top:1px solid var(--line-soft);padding-top:24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  color:var(--muted);font-size:.82rem}
.foot-bottom .legal-note{max-width:560px;line-height:1.5}
.foot-bottom a{color:var(--neon)}

/* ---------- Responsive ---------- */
/* =====================================================================
   AJUSTES v2 — marca "Tu Momento de Ganar" + carbón templado (2026-08-18)
   ===================================================================== */
/* Logo real en el header (reemplaza el monograma "RC") */
.brand{display:inline-flex;align-items:center;gap:0;line-height:0}
.brand img{width:210px;height:auto;display:block}

/* Foto real del premio en la tarjeta del hero */
.prize-photo{display:flex;align-items:center;justify-content:center;padding:18px}
.prize-img{width:100%;height:auto;max-height:330px;object-fit:contain;
  filter:drop-shadow(0 22px 28px rgba(0,0,0,.6));position:relative;z-index:1}

/* Social proof reemplazado por el gancho verdadero del modelo de 3 sorteos */
.proof-solo{font-size:.9rem}
.muted-s{color:var(--muted);font-size:.84rem}

/* ---------- Calendario de los 3 sorteos ---------- */
.sorteos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sorteo{position:relative;background:linear-gradient(180deg,var(--bg-2),var(--bg));
  border:1px solid var(--line-soft);border-radius:var(--radius);padding:26px 22px 24px;
  display:flex;flex-direction:column;gap:12px;transition:border-color .2s,transform .2s}
.sorteo:hover{border-color:var(--gold);transform:translateY(-3px)}
.sorteo .orden{font-family:var(--font-d);font-size:.72rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted)}
.sorteo .fecha{font-family:var(--font-d);font-weight:800;font-size:1.5rem;color:var(--gold);
  line-height:1}
/* Sin fecha confirmada, el dato jerárquico de la tarjeta pasa a ser el PREMIO:
   el marcador de fecha baja de peso en vez de gritar "Por confirmar" en 1,5rem. */
.sorteo .fecha.por-confirmar{font-size:.95rem;color:var(--muted);letter-spacing:.01em;
  display:inline-flex;align-items:center;gap:8px;font-weight:700}
.sorteo .fecha.por-confirmar::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--gold);opacity:.75;flex:none}
.sorteo .premio{font-family:var(--font-d);font-weight:800;font-size:1.12rem;line-height:1.25}
.sorteo .nota{color:var(--muted);font-size:.86rem;line-height:1.5}
.sorteo .pic{border-radius:12px;overflow:hidden;background:var(--bg-3);
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.sorteo .pic img{width:100%;height:100%;object-fit:cover;display:block}
.sorteo.mayor{border-color:rgba(245,196,81,.55);
  box-shadow:0 0 0 1px rgba(245,196,81,.18), 0 20px 46px -20px rgba(245,196,81,.35)}
.sorteo .cinta{position:absolute;top:-11px;right:16px;background:linear-gradient(135deg,var(--gold),var(--gold-2));
  color:#2b1508;font-family:var(--font-d);font-weight:800;font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;padding:5px 11px;border-radius:99px}
.aviso-todos{margin-top:26px;border:1px dashed rgba(245,196,81,.45);border-radius:var(--radius);
  padding:18px 22px;background:rgba(245,196,81,.06);color:var(--txt);font-size:.96rem;text-align:center}
.aviso-todos b{color:var(--gold)}

/* Fix de desborde en grids/flex: por defecto los items traen min-width:auto y
   el contenido impide que la columna se encoja → el texto se salía del wrap a 390px
   (columna de 363px dentro de 327px útiles). Verificado con getBoundingClientRect. */
.hero-grid>*,.packs-grid>*,.sorteos>*,.steps>*,.gallery>*,.draw>*{min-width:0}
.lead,.sec-sub,.pack-unit{overflow-wrap:break-word}

/* Objetivos táctiles ≥44px (WCAG 2.5.5 / criterio propio de QA móvil).
   Medidos con getBoundingClientRect a 390px: la hamburguesa daba 22x32 y los
   enlaces de footer 22px de alto. */
.menu-toggle{min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;font-size:1.35rem;line-height:1}
footer.site a{display:inline-flex;align-items:center;min-height:44px}
/* ⚠️ La regla de arriba le gana en especificidad a `.foot-col a{display:block}` y dejaba
   las columnas del footer en UNA SOLA LÍNEA ("Comprar tickets Cómo funciona Ganadores").
   Se restituye el apilado conservando los 44px táctiles; el margen baja porque ahora la
   altura mínima ya separa los enlaces. */
footer.site .foot-col a{display:flex;margin-bottom:0}
@media(max-width:920px){
  .nav-links a{min-height:44px;display:flex;align-items:center}
}

/* Fotos reales en la galería del premio */
.gal-img{width:100%;height:100%;object-fit:contain;display:block;padding:14px;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.55))}
.gal-item.main .gal-img{padding:22px}
/* El interior es foto de AMBIENTE (con fondo), no un recorte de producto:
   llena la celda con cover en vez de flotar con contain. */
.gal-foto{width:100%;height:100%;object-fit:cover;display:block}

/* Ganadores aún no sorteados: es la PRIMERA edición, no hay ediciones anteriores.
   La tarjeta muestra la fecha en vez de un ganador inventado. */
.winner-media.pendiente{display:grid;place-items:center;
  background:linear-gradient(150deg,var(--bg-3),var(--bg-deep));
  border-bottom:1px solid var(--line-soft)}
.pend-fecha{font-family:var(--font-d);font-weight:800;font-size:1.5rem;letter-spacing:.06em;
  color:var(--gold);opacity:.85}
.winner-media.pendiente::after{content:"Pendiente";position:absolute;bottom:12px;
  font:700 .64rem/1 Arial,sans-serif;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);background:rgba(0,0,0,.45);padding:5px 10px;border-radius:99px}
.winner-media{position:relative}

/* Cuatro packs (se sumó el de 35 tickets, el destacado) */
.packs-4{grid-template-columns:repeat(4,1fr)!important;gap:18px}
/* Con 4 columnas la cinta centrada no cabe en una línea: se partía en dos y chocaba
   contra el badge "66% OFF". Se ancla a la izquierda y en una sola línea, dejando la
   esquina derecha libre para el descuento. */
.packs-4 .pack-flag{left:20px;right:auto;transform:none;white-space:nowrap;
  font-size:.62rem;padding:5px 12px}
/* Las 4 tarjetas deben arrancar la lista de checks a la misma altura. El pack de 1
   ticket no lleva "ahorras", así que sin esto su lista subía una línea respecto de
   las otras tres y las columnas quedaban desalineadas. 3,1em = 2 líneas exactas
   (line-height medido: 20,3px sobre 13,1px de fuente). */
.packs-4 .pack-unit{min-height:3.1em}
@media(max-width:1100px){.packs-4{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:620px){.packs-4{grid-template-columns:1fr!important}}

@media(max-width:920px){
  .sorteos{grid-template-columns:1fr;gap:16px}
  .brand img{width:172px}
}
@media(max-width:920px){
  .hero-grid{grid-template-columns:1fr;gap:46px}
  .hero{padding:48px 0 64px}
  .nav-links{display:none}
  .menu-toggle{display:block}
  .prize-card{transform:none;max-width:460px;margin:0 auto}
  .prize-card:hover{transform:none}
  .float-badge.tl{left:14px;top:14px}
  .float-badge.br{right:14px;top:14px}
  section.block{padding:70px 0}
  .packs-grid{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .pack.featured{order:-1}
  .steps{grid-template-columns:repeat(2,1fr)}
  .gallery{grid-template-columns:1fr;grid-template-rows:none}
  .gal-item.main{grid-row:auto;min-height:260px}
  .stats-band{grid-template-columns:repeat(2,1fr);gap:34px 20px}
  .stat:nth-child(2)::after{display:none}
  .draw{grid-template-columns:1fr;gap:32px}
  .winners{grid-template-columns:1fr;max-width:420px;margin:0 auto}
  .bonus{flex-direction:column;text-align:center;align-items:center}
  .contact{grid-template-columns:1fr;gap:30px}
  .foot-grid{grid-template-columns:1fr 1fr;gap:30px}
  .foot-about{grid-column:1/-1}
}
@media(max-width:560px){
  .nav-cta .btn:not(.menu-toggle){display:none}
  .hero-feats{gap:14px}
  .prize-photo{min-height:270px}
  .float-badge.tl,.float-badge.br{display:none}
  .steps{grid-template-columns:1fr}
  .stats-band{grid-template-columns:1fr;gap:26px}
  .stat::after{display:none!important}
  .foot-grid{grid-template-columns:1fr}
  .foot-bottom{flex-direction:column;align-items:flex-start}
  /* La etiqueta y el aviso de fecha no caben lado a lado a 390px: el flex no puede
     encogerlos por debajo de su texto (min-width:auto) y el bloque se sale 110px.
     Medido con getBoundingClientRect, no a ojo. */
  .prize-timer{flex-direction:column;align-items:flex-start;gap:10px}
  .pt-pendiente{text-align:left}
}