/* ==========================================================================
   Rifa Super Toyota 4.5 — hoja de estilo única
   Orden: fuentes · tokens · base · utilidades · componentes · secciones · media
   ========================================================================== */

/* ---------- Fuentes ---------- */
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-latin.woff2') format('woff2');
  font-weight:400 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('/assets/fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight:400 900; font-stretch:75% 125%; font-style:normal; font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'JetBrains Mono';
  src:url('/assets/fonts/jetbrainsmono-latin.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2122,U+2212,U+FEFF,U+FFFD;
}

/* ---------- Tokens ---------- */
:root{
  --ink:#0A0A0B;
  --ink-1:#0E0E10;
  --ink-2:#151518;
  --ink-3:#1D1D21;
  --bone:#F4F1EA;
  --bone-2:#EAE5DA;
  --red:#E4151B;
  --red-lt:#FF3036;
  --red-dk:#B00E13;

  --fg:var(--bone);
  --bg:var(--ink);
  --muted:rgba(244,241,234,.62);
  --faint:rgba(244,241,234,.5);   /* mínimo para pasar contraste AA sobre negro */
  --line:rgba(244,241,234,.13);
  --line-2:rgba(244,241,234,.22);

  --sans:'Archivo','Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(1.15rem,5vw,4.5rem);
  --maxw:1560px;
  --sect-y:clamp(4.5rem,11vw,10rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-io:cubic-bezier(.65,.05,.36,1);
  --dur:.55s;
}

/* ---------- Reset / base ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:5rem;
}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  font-size:clamp(.975rem,.92rem + .25vw,1.075rem);
  font-weight:400;
  line-height:1.6;
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  text-rendering:optimizeLegibility;
}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ul,ol{list-style:none}
b,strong{font-weight:700}
::selection{background:var(--red);color:#fff}
:focus-visible{outline:2px solid var(--red-lt);outline-offset:3px;border-radius:2px}

/* Grano de película — le quita el look "plano digital" */
body::after{
  content:'';position:fixed;inset:-50%;z-index:9999;pointer-events:none;
  opacity:.032;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:10000;
  background:var(--red);color:#fff;padding:.85rem 1.35rem;font-weight:700;
}
.skip-link:focus{left:0}

/* ---------- Utilidades ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}
.wrap--narrow{max-width:960px}

.eyebrow{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:.6rem;
}
.eyebrow--red{color:var(--red-lt)}
.eyebrow .dot{
  width:7px;height:7px;border-radius:50%;background:currentColor;flex:none;
  box-shadow:0 0 0 0 currentColor;animation:pulse 2.4s var(--ease-io) infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,48,54,.55)}
  70%{box-shadow:0 0 0 9px rgba(255,48,54,0)}
  100%{box-shadow:0 0 0 0 rgba(255,48,54,0)}
}

.section{position:relative;padding-block:var(--sect-y)}
.section--flush{padding-bottom:calc(var(--sect-y) * .7)}

/* Cabecera de sección */
.shead{margin-bottom:clamp(2.5rem,6vw,5rem);max-width:62rem}
.shead--row{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2rem;max-width:none;flex-wrap:wrap;
}
.shead__title{
  margin-top:1.1rem;
  font-size:clamp(2.1rem,6.2vw,4.6rem);
  font-weight:900;font-stretch:92%;
  line-height:.94;letter-spacing:-.032em;
  text-transform:uppercase;
}
.shead__lead{
  margin-top:1.5rem;max-width:44ch;color:var(--muted);
  font-size:clamp(1rem,.95rem + .35vw,1.2rem);line-height:1.65;
}

/* ---------- Botones ---------- */
.btn{
  --btn-bg:var(--red);--btn-fg:#fff;
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  gap:.6rem;isolation:isolate;overflow:hidden;
  padding:.95rem 1.6rem;border-radius:3px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-weight:700;font-size:.94rem;letter-spacing:-.005em;
  line-height:1;white-space:nowrap;
  transition:transform .35s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease);
  will-change:transform;
}
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:var(--ink);
  transform:scaleX(0);transform-origin:right;
  transition:transform .45s var(--ease);
}
.btn:hover::before,.btn:focus-visible::before{transform:scaleX(1);transform-origin:left}
.btn:active{transform:scale(.97)}

.btn--red{box-shadow:0 0 0 0 rgba(228,21,27,.4)}
.btn--red:hover{box-shadow:0 12px 34px -12px rgba(228,21,27,.75)}

.btn--ghost{
  --btn-bg:rgba(244,241,234,.07);--btn-fg:var(--bone);
  box-shadow:inset 0 0 0 1px var(--line-2);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn--ghost::before{background:var(--bone)}
.btn--ghost:hover{--btn-fg:var(--ink)}

.btn--sm{padding:.7rem 1.1rem;font-size:.82rem}
.btn--lg{padding:1.15rem 2rem;font-size:1rem}
.btn--xl{padding:1.35rem 2.6rem;font-size:1.08rem}
.btn--block{width:100%}
.ico-wa{width:1.15em;height:1.15em;fill:currentColor;flex:none}

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:900;
  transition:transform .45s var(--ease),background-color .4s linear,backdrop-filter .4s linear;
}
.nav::after{
  content:'';position:absolute;inset:0;z-index:-1;
  background:rgba(10,10,11,.72);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid var(--line);
  opacity:0;transition:opacity .4s var(--ease);
}
.nav.is-stuck::after{opacity:1}
.nav.is-hidden{transform:translateY(-102%)}

.nav__inner{
  max-width:var(--maxw);margin-inline:auto;padding:.85rem var(--gut);
  display:flex;align-items:center;gap:1.5rem;
}
.nav__brand{display:flex;align-items:center;gap:.75rem;margin-right:auto}
.nav__logo{width:auto;height:40px;border-radius:2px}
.nav__wordmark{display:none;line-height:1}
.nav__wordmark-top{
  display:block;font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.26em;text-transform:uppercase;color:var(--red-lt);
}
.nav__wordmark-main{
  display:block;margin-top:.22rem;
  font-weight:800;font-stretch:88%;font-size:.98rem;
  letter-spacing:-.01em;text-transform:uppercase;
}
.nav__wordmark-main em{font-style:normal;color:var(--red-lt)}

.nav__links{display:none;gap:1.9rem}
.nav__links a{
  position:relative;font-size:.86rem;font-weight:500;color:var(--muted);
  transition:color .3s var(--ease);
}
.nav__links a::after{
  content:'';position:absolute;left:0;bottom:-5px;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:right;
  transition:transform .4s var(--ease);
}
.nav__links a:hover{color:var(--bone)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:left}

.nav__actions{display:flex;align-items:center;gap:.7rem}
.nav__actions .btn--sm span{display:none}

.nav__burger{
  width:44px;height:44px;display:grid;place-content:center;gap:6px;
  border:1px solid var(--line-2);border-radius:3px;
}
.nav__burger span{
  display:block;width:18px;height:1.5px;background:var(--bone);
  transition:transform .4s var(--ease),opacity .3s var(--ease);
}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}

/* ---------- Menú móvil ---------- */
.menu{
  position:fixed;inset:0;z-index:890;background:var(--ink);
  display:flex;flex-direction:column;justify-content:center;
  padding:6rem var(--gut) 2.5rem;
  clip-path:inset(0 0 100% 0);
  transition:clip-path .7s var(--ease);
}
.menu[hidden]{display:none}
.menu.is-open{clip-path:inset(0 0 0 0)}
.menu__nav{display:flex;flex-direction:column;gap:.15rem;margin-bottom:auto;padding-top:1rem}
.menu__nav a{
  display:flex;align-items:baseline;gap:1rem;padding:.55rem 0;
  border-bottom:1px solid var(--line);
  font-size:clamp(1.9rem,10vw,2.9rem);font-weight:900;font-stretch:88%;
  line-height:1.1;letter-spacing:-.03em;text-transform:uppercase;
  opacity:0;transform:translateY(28px);
}
.menu.is-open .menu__nav a{
  opacity:1;transform:none;
  transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s);
}
.menu__nav a i{
  font-family:var(--mono);font-style:normal;font-size:.66rem;font-weight:500;
  letter-spacing:.16em;color:var(--red-lt);flex:none;
}
.menu__foot{margin-top:2.5rem}
.menu__phone{
  margin-top:1rem;text-align:center;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.14em;color:var(--faint);
}

/* ---------- Timer ---------- */
.timer{display:flex;gap:.4rem}
.timer__unit{
  flex:1;min-width:0;padding:.7rem .4rem .6rem;
  border-top:1px solid var(--line-2);
  display:flex;flex-direction:column;align-items:flex-start;gap:.2rem;
}
.timer__unit b{
  font-family:var(--sans);font-size:clamp(1.5rem,4.2vw,2.15rem);font-weight:800;
  font-stretch:88%;line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;
}
.timer__unit span{
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.timer.is-over .timer__unit b{color:var(--red-lt)}

/* ---------- HERO ----------
   Móvil: la foto es una banda superior que se funde en negro.
   Escritorio (>=1024px): la foto ocupa la mitad derecha a sangre. */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;
  padding-bottom:max(1.25rem,env(safe-area-inset-bottom));
  overflow:hidden;isolation:isolate;
}
.hero__canvas{
  position:absolute;inset:0;z-index:1;width:100%;height:100%;
  opacity:.6;pointer-events:none;
}
.hero__media{
  position:relative;z-index:0;flex:none;
  height:clamp(210px,34svh,330px);
}
.hero__media picture,.hero__media img{width:100%;height:100%}
.hero__media img{object-fit:cover;object-position:58% 34%}
.hero__media::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,var(--ink) 1%,rgba(10,10,11,.66) 38%,rgba(10,10,11,.12) 76%,rgba(10,10,11,.5) 100%),
    radial-gradient(110% 90% at 60% 45%,rgba(228,21,27,.22),transparent 62%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:-1.75rem auto 0;padding-inline:var(--gut);
}

.hero__title{margin:.9rem 0 0;text-transform:uppercase}
.hero__kicker{
  display:block;margin-bottom:.5rem;
  font-size:clamp(.9rem,3.4vw,1.3rem);font-weight:800;font-stretch:92%;
  letter-spacing:.3em;color:rgba(244,241,234,.62);
}
.hero__big{
  display:block;
  font-size:clamp(2.9rem,13.5vw,7.4rem);
  font-weight:900;font-stretch:86%;
  line-height:.86;letter-spacing:-.035em;
  white-space:nowrap;
}
.hero__big--red{color:var(--red-lt)}

.hero__lead{
  margin-top:1.15rem;max-width:40ch;color:rgba(244,241,234,.76);
  font-size:clamp(.98rem,.94rem + .35vw,1.2rem);line-height:1.55;
}
.hero__lead strong{color:var(--bone);font-weight:600}

.hero__cta{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.hero__cta .btn{flex:1 1 auto}
.hero__price{
  margin-top:1rem;font-family:var(--mono);font-size:.7rem;
  letter-spacing:.08em;text-transform:uppercase;color:var(--faint);
  display:flex;align-items:center;gap:.45rem;flex-wrap:wrap;
}
.hero__price b{color:var(--bone);font-weight:700}
.hero__price span{color:var(--line-2)}

.hero__timer{
  position:relative;z-index:2;width:100%;max-width:var(--maxw);
  margin:auto auto 0;padding:1.75rem var(--gut) 0;
}
.hero__timer-label{
  font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--faint);margin-bottom:.5rem;
}
.timer--hero{max-width:34rem}

.hero__scroll{display:none}

/* ---------- Ticker ---------- */
.ticker{
  position:relative;z-index:3;background:var(--red);color:#fff;
  padding:.75rem 0;overflow:hidden;
  border-block:1px solid rgba(0,0,0,.18);
}
.ticker__track{display:flex;width:max-content;animation:slide 34s linear infinite}
.ticker__group{display:flex;align-items:center;flex:none}
.ticker__group span{
  font-weight:800;font-stretch:88%;font-size:clamp(.85rem,2.4vw,1.1rem);
  letter-spacing:-.01em;text-transform:uppercase;white-space:nowrap;
}
.ticker__group i{
  font-style:normal;margin-inline:clamp(1rem,3vw,2.2rem);
  font-size:.6em;opacity:.65;
}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker:hover .ticker__track{animation-play-state:paused}

/* ---------- Premios ---------- */
.prize-hero{
  display:grid;gap:clamp(1.75rem,4vw,3.5rem);
  padding-bottom:clamp(3rem,7vw,5.5rem);
  border-bottom:1px solid var(--line);
}
.prize-hero__media{position:relative;border-radius:4px;overflow:hidden;background:var(--ink-2)}
.prize-hero__media img{
  width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  transition:transform 1.1s var(--ease);
}
.prize-hero:hover .prize-hero__media img{transform:scale(1.035)}
.prize-hero__tag{
  position:absolute;top:1rem;left:1rem;
  background:var(--red);color:#fff;padding:.42rem .8rem;border-radius:2px;
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.prize-hero__body{display:flex;flex-direction:column;justify-content:center}
.prize-hero__num{
  font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;color:var(--red-lt);margin-bottom:.9rem;
}
.prize-hero__title{
  font-size:clamp(1.9rem,5.2vw,3.4rem);font-weight:900;font-stretch:90%;
  line-height:.95;letter-spacing:-.032em;text-transform:uppercase;
}
.prize-hero__title em{font-style:normal;color:var(--red-lt)}
.prize-hero__text{
  margin-top:1.25rem;color:var(--muted);max-width:46ch;
  font-size:clamp(.98rem,.94rem + .25vw,1.1rem);
}
.prize-hero__text strong{color:var(--bone);font-weight:600}

.specs{
  margin-top:2rem;display:grid;grid-template-columns:1fr;
  border-top:1px solid var(--line);
}
.specs li{
  display:flex;align-items:baseline;justify-content:space-between;gap:1rem;
  padding:.8rem 0;border-bottom:1px solid var(--line);
}
.specs span{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.specs b{font-weight:600;font-size:.93rem;text-align:right}

.prize-grid{
  display:grid;grid-template-columns:1fr;
  gap:0;margin-top:clamp(2.5rem,6vw,4rem);
}
.prize{
  position:relative;padding:2rem 0;border-top:1px solid var(--line);
}
.prize::before{
  content:'';position:absolute;top:-1px;left:0;height:1px;width:100%;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease);
}
.prize:hover::before{transform:scaleX(1)}
.prize:last-child{border-bottom:1px solid var(--line)}
.prize__num{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;color:var(--red-lt);
}
.prize__icon{margin:1.5rem 0 1.7rem;color:var(--bone);opacity:.88}
.prize__icon svg{width:78px;height:44px}
.prize__title{
  font-size:clamp(1.35rem,3.4vw,1.85rem);font-weight:900;font-stretch:90%;
  line-height:1;letter-spacing:-.028em;text-transform:uppercase;
}
.prize__meta{
  margin-top:.5rem;font-family:var(--mono);font-size:.64rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--red-lt);
}
.prize__text{margin-top:.9rem;color:var(--muted);font-size:.96rem;max-width:34ch}

.premios__note{
  margin-top:clamp(2.5rem,6vw,4rem);padding:1.5rem;border-radius:4px;
  background:var(--ink-2);border:1px solid var(--line);
  color:var(--muted);font-size:1rem;line-height:1.65;
}
.premios__note b{color:var(--bone);font-weight:700}

/* ---------- Galería ---------- */
.galeria{background:var(--ink-1)}
.galeria__hint{
  display:flex;align-items:center;gap:.6rem;
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.galeria__hint i{font-style:normal;animation:nudge 1.9s var(--ease-io) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}

.rail{
  margin-top:clamp(1.5rem,4vw,2.5rem);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;cursor:grab;
}
.rail.is-dragging,.rail.is-dragging *{
  -webkit-user-select:none;user-select:none;
}
.rail::-webkit-scrollbar{display:none}
.rail.is-dragging{cursor:grabbing;scroll-snap-type:none}
.rail.is-dragging figcaption{opacity:0}
.rail__track{
  display:flex;gap:clamp(.6rem,1.6vw,1.1rem);
  padding-inline:var(--gut);width:max-content;
}
.rail__item{flex:none;width:min(78vw,320px);scroll-snap-align:center}
.rail__item figure{position:relative;border-radius:4px;overflow:hidden;background:var(--ink-2)}
.rail__item img{
  width:100%;aspect-ratio:3/4;object-fit:cover;
  transition:transform .9s var(--ease),filter .5s var(--ease);
  filter:saturate(.94);
}
.rail__item:hover img{transform:scale(1.04);filter:saturate(1.06)}
.rail__item figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem .95rem .9rem;
  background:linear-gradient(to top,rgba(10,10,11,.92),transparent);
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.13em;text-transform:uppercase;color:rgba(244,241,234,.82);
  transition:opacity .3s var(--ease);
}

/* ---------- Sorteos ---------- */
.draws{display:grid;gap:clamp(1rem,2.5vw,1.5rem)}
.draw{
  padding:clamp(1.6rem,4vw,2.6rem);border-radius:5px;
  background:var(--ink-2);border:1px solid var(--line);
  display:flex;flex-direction:column;
  transition:border-color .5s var(--ease),transform .5s var(--ease);
}
.draw:hover{border-color:var(--line-2);transform:translateY(-4px)}
.draw__head{
  display:flex;align-items:flex-start;justify-content:space-between;
  gap:1rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);
}
.draw__label{
  font-family:var(--mono);font-size:.66rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--red-lt);
  padding-top:.5rem;
}
.draw__date{display:flex;align-items:flex-start;gap:.5rem;line-height:1}
.draw__date b{
  font-size:clamp(2.6rem,8vw,4rem);font-weight:900;font-stretch:86%;
  letter-spacing:-.05em;
}
.draw__date span{
  font-family:var(--mono);font-size:.6rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--faint);
  padding-top:.45rem;line-height:1.35;
}
.draw__prize{
  margin-top:1.5rem;font-size:clamp(1.7rem,5vw,2.6rem);font-weight:900;
  font-stretch:88%;line-height:1;letter-spacing:-.035em;text-transform:uppercase;
}
.draw__text{margin-top:.9rem;color:var(--muted);font-size:.98rem;max-width:38ch}
.draw__list{margin-top:1.2rem;display:grid;gap:.55rem}
.draw__list li{
  position:relative;padding-left:1.4rem;font-size:.98rem;color:var(--muted);
}
.draw__list li::before{
  content:'';position:absolute;left:0;top:.62em;
  width:7px;height:1.5px;background:var(--red-lt);
}
.draw .timer{margin-top:auto;padding-top:1.9rem}

.draw--main{
  background:var(--red);border-color:transparent;color:#fff;
  box-shadow:0 30px 70px -40px rgba(228,21,27,.8);
}
.draw--main .draw__head{border-bottom-color:rgba(255,255,255,.28)}
.draw--main .draw__label{color:rgba(255,255,255,.85)}
.draw--main .draw__date span{color:rgba(255,255,255,.86)}
.draw--main .draw__list li{color:rgba(255,255,255,.94)}
.draw--main .draw__list li::before{background:#fff}
.draw--main .timer__unit{border-top-color:rgba(255,255,255,.34)}
.draw--main .timer__unit span{color:rgba(255,255,255,.86)}
.draw--main:hover{border-color:transparent}

/* ---------- Participar (claro) ---------- */
.participar,.preguntas{
  background:var(--bone);color:var(--ink);
  --muted:rgba(10,10,11,.66);
  --faint:rgba(10,10,11,.58);
  --line:rgba(10,10,11,.13);
  --line-2:rgba(10,10,11,.24);
}
.preguntas{background:var(--bone-2);padding-top:0}
.participar .eyebrow,.preguntas .eyebrow{color:var(--faint)}

.steps{display:grid;gap:0;border-top:1px solid var(--line)}
.step{position:relative;padding:1.9rem 0;border-bottom:1px solid var(--line)}
.step__num{
  font-family:var(--mono);font-size:.68rem;font-weight:500;
  letter-spacing:.2em;color:var(--red);
}
.step__title{
  margin-top:1rem;font-size:clamp(1.3rem,3.4vw,1.7rem);font-weight:900;
  font-stretch:90%;line-height:1.05;letter-spacing:-.028em;text-transform:uppercase;
}
.step__text{margin-top:.75rem;color:var(--muted);font-size:.98rem;max-width:36ch}
.step__text b{color:var(--ink);font-weight:700}

.pay{
  margin-top:clamp(2rem,5vw,3rem);display:flex;flex-wrap:wrap;
  align-items:center;gap:.7rem 1.1rem;
}
.pay__label{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.pay__list{display:flex;flex-wrap:wrap;gap:.45rem}
.pay__list li{
  padding:.42rem .85rem;border:1px solid var(--line-2);border-radius:99px;
  font-size:.78rem;font-weight:600;
}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line)}
.faq__item{border-bottom:1px solid var(--line)}
.faq__item summary{
  display:flex;align-items:center;gap:1rem;
  padding:1.25rem 0;cursor:pointer;list-style:none;
  font-size:clamp(1rem,.96rem + .4vw,1.2rem);font-weight:600;
  letter-spacing:-.012em;
  transition:color .3s var(--ease);
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary span{flex:1}
.faq__item summary::after{
  content:'';flex:none;width:13px;height:13px;
  background:
    linear-gradient(currentColor,currentColor) center/100% 1.5px no-repeat,
    linear-gradient(currentColor,currentColor) center/1.5px 100% no-repeat;
  transition:transform .45s var(--ease);
}
.faq__item[open] summary::after{transform:rotate(135deg)}
.faq__item summary:hover{color:var(--red)}
.faq__body{overflow:hidden}
.faq__body p{
  padding-bottom:1.5rem;max-width:62ch;color:var(--muted);
  font-size:1rem;line-height:1.7;
}
.faq__body b{color:var(--ink);font-weight:700}

/* ---------- CTA ---------- */
.cta{
  position:relative;background:var(--red);color:#fff;
  padding-block:clamp(4.5rem,11vw,9rem);text-align:center;overflow:hidden;
}
.cta::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(80% 60% at 50% 0%,rgba(0,0,0,.28),transparent 70%);
}
.cta .wrap{position:relative;display:flex;flex-direction:column;align-items:center}
.cta .eyebrow{color:rgba(255,255,255,.82);justify-content:center}
.cta__title{
  margin-top:1.25rem;
  font-size:clamp(2.6rem,11.5vw,7.2rem);font-weight:900;font-stretch:86%;
  line-height:.94;letter-spacing:-.04em;text-transform:uppercase;
}
.cta__title span{display:block}
.cta__title-red{
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.9);
  paint-order:stroke fill;
}
@supports not (-webkit-text-stroke:1px red){.cta__title-red{color:rgba(255,255,255,.85)}}
.cta__lead{
  margin-top:1.6rem;max-width:46ch;color:rgba(255,255,255,.86);
  font-size:clamp(1rem,.95rem + .35vw,1.18rem);
}
.cta .btn{margin-top:2.2rem;--btn-bg:#fff;--btn-fg:var(--red)}
.cta .btn::before{background:var(--ink)}
.cta .btn:hover{--btn-fg:#fff}
.cta__phone{
  margin-top:1.25rem;font-family:var(--mono);font-size:.78rem;
  letter-spacing:.2em;color:rgba(255,255,255,.75);
}

/* ---------- Footer ---------- */
/* El colchón inferior deja sitio a la barra fija de WhatsApp en móvil */
.foot{
  background:var(--ink);padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:calc(6rem + env(safe-area-inset-bottom));
}
.foot__inner{display:grid;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--line)}
.foot__brand img{height:56px;width:auto;border-radius:2px}
.foot__brand p{margin-top:1rem;color:var(--faint);font-size:.88rem;max-width:34ch}
.foot__nav{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem}
.foot__nav a{
  font-size:.88rem;color:var(--muted);transition:color .3s var(--ease);
}
.foot__nav a:hover{color:var(--red-lt)}
.foot__label{
  font-family:var(--mono);font-size:.62rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--faint);
}
.foot__phone{
  display:inline-block;margin-top:.6rem;
  font-size:clamp(1.4rem,4vw,1.9rem);font-weight:900;font-stretch:88%;
  letter-spacing:-.03em;transition:color .3s var(--ease);
}
.foot__phone:hover{color:var(--red-lt)}
.foot__small{margin-top:.35rem;font-size:.82rem;color:var(--faint)}
.foot__legal{
  padding-top:1.6rem;display:flex;flex-wrap:wrap;gap:.5rem 2rem;
  justify-content:space-between;
  font-size:.76rem;color:var(--faint);
}

/* ---------- Barra móvil de WhatsApp ---------- */
.wabar{
  position:fixed;left:0;right:0;bottom:0;z-index:880;
  display:flex;align-items:center;gap:1rem;
  padding:.7rem var(--gut) calc(.7rem + env(safe-area-inset-bottom));
  background:rgba(14,14,16,.9);
  backdrop-filter:blur(16px) saturate(150%);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  border-top:1px solid var(--line);
  transform:translateY(110%);
  transition:transform .5s var(--ease);
}
.wabar.is-visible{transform:none}
.wabar__info{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.wabar__price{font-size:.88rem;font-weight:600;white-space:nowrap}
.wabar__price b{font-weight:800}
.wabar__sub{
  font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap;
}
.wabar .btn{margin-left:auto;flex:none}

/* ---------- Lightbox ---------- */
.lightbox{
  border:0;padding:0;max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;
  background:rgba(8,8,9,.96);
  display:none;place-items:center;
}
.lightbox[open]{display:grid}
.lightbox::backdrop{background:rgba(8,8,9,.9)}
.lightbox img{
  max-width:min(92vw,900px);max-height:76dvh;width:auto;
  object-fit:contain;border-radius:4px;
}
.lightbox__close{
  position:absolute;top:1rem;right:1rem;z-index:2;
  width:46px;height:46px;font-size:1.9rem;line-height:1;
  border:1px solid var(--line-2);border-radius:3px;color:var(--bone);
  transition:background-color .3s var(--ease);
}
.lightbox__close:hover{background:var(--red)}
.lightbox__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:52px;height:52px;font-size:2.2rem;line-height:1;
  color:var(--bone);border:1px solid var(--line-2);border-radius:3px;
  transition:background-color .3s var(--ease);
}
.lightbox__nav:hover{background:var(--red)}
.lightbox__nav--prev{left:.75rem}
.lightbox__nav--next{right:.75rem}
.lightbox__caption{
  position:absolute;bottom:2rem;left:0;right:0;text-align:center;
  font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--faint);padding-inline:5rem;
}

/* ==========================================================================
   Estados de animación (solo cuando hay JS)
   ========================================================================== */
.js [data-anim="fade"]{opacity:0;transform:translateY(22px)}
.js [data-anim="block"]{opacity:0;transform:translateY(34px)}
/* La máscara se ensancha con padding y se compensa con margen negativo:
   deja respirar tildes y contornos sin alterar el interlineado. */
.anim-line{
  display:block;overflow:hidden;
  padding-top:.2em;margin-top:-.2em;
  padding-bottom:.06em;margin-bottom:-.06em;
}
.js [data-anim="line"] .anim-line > span{display:block;transform:translateY(115%)}
.js .rail__item{opacity:0;transform:translateY(28px)}

/* ==========================================================================
   Media queries
   ========================================================================== */

@media (min-width:560px){
  .prize-grid{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,4vw,3rem)}
  .prize:nth-child(2){border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:repeat(2,1fr);column-gap:clamp(1.5rem,4vw,3rem)}
  .step:nth-child(2){border-bottom:1px solid var(--line)}
  .specs{grid-template-columns:repeat(2,1fr);column-gap:2rem}
  .nav__actions .btn--sm span{display:inline}
}

@media (min-width:768px){
  .hero__media img{object-position:60% 44%}
  .rail__item{width:min(48vw,360px)}
  .draws{grid-template-columns:1fr 1fr}
  .timer__unit{padding:.85rem .5rem .7rem}
  .hero__cta .btn{flex:0 0 auto}
  .foot__inner{grid-template-columns:1.5fr 1fr 1fr;gap:2.5rem;align-items:start}
  .foot__nav{flex-direction:column;gap:.7rem}
  .lightbox__nav--prev{left:1.5rem}
  .lightbox__nav--next{right:1.5rem}
}

@media (min-width:900px){
  .prize-hero{grid-template-columns:minmax(0,.92fr) minmax(0,1fr);align-items:center}
  .prize-grid{grid-template-columns:repeat(3,1fr)}
  .prize{border-bottom:1px solid var(--line)}
  .steps{grid-template-columns:repeat(3,1fr)}
  .step{border-bottom:1px solid var(--line)}
  .rail__item{width:min(34vw,400px)}
}

@media (min-width:1024px){
  html{scroll-padding-top:6rem}
  .nav__links{display:flex}
  .nav__burger{display:none}
  .nav__wordmark{display:block}
  .nav__logo{height:46px}
  .menu{display:none !important}

  .hero{justify-content:center;padding:7rem 0 2.5rem}
  .hero__media{
    position:absolute;inset:0;height:auto;
    -webkit-mask-image:linear-gradient(to right,transparent 12%,#000 46%);
    mask-image:linear-gradient(to right,transparent 12%,#000 46%);
  }
  .hero__media img{object-position:58% 52%}
  .hero__media::after{
    background:
      linear-gradient(to right,var(--ink) 8%,rgba(10,10,11,.9) 34%,rgba(10,10,11,.5) 54%,rgba(10,10,11,.12) 76%,rgba(10,10,11,.42) 100%),
      linear-gradient(to top,var(--ink) 0%,rgba(10,10,11,0) 24%),
      linear-gradient(to bottom,rgba(10,10,11,.6) 0%,rgba(10,10,11,0) 18%),
      radial-gradient(64% 62% at 72% 48%,rgba(228,21,27,.22),transparent 66%);
  }
  .hero__inner{margin:0 auto}
  .hero__title,.hero__lead,.hero__cta,.hero__price,.hero .eyebrow{max-width:min(46rem,56%)}
  .hero__lead{max-width:min(36ch,46%)}
  .hero__big{font-size:clamp(4rem,6.4vw,7rem)}
  .hero__big--red{
    color:transparent;
    -webkit-text-stroke:1.5px var(--red-lt);
    paint-order:stroke fill;
  }
  @supports not (-webkit-text-stroke:1px red){.hero__big--red{color:var(--red-lt)}}
  .hero__timer{margin-top:3rem;padding-top:0}
  .timer--hero{max-width:32rem}

  .hero__scroll{
    display:block;position:absolute;left:50%;bottom:1.75rem;z-index:3;
    width:1px;height:56px;background:var(--line-2);overflow:hidden;
  }
  .hero__scroll span{
    position:absolute;inset:0;background:var(--red-lt);
    animation:scrollcue 2.2s var(--ease-io) infinite;
  }
  @keyframes scrollcue{
    0%{transform:translateY(-100%)}
    60%,100%{transform:translateY(100%)}
  }

  .wabar{display:none}
  .foot{padding-bottom:2rem}
  .prize-hero{gap:clamp(3rem,6vw,6rem)}
  .prize__text{font-size:1rem}
  .faq__item summary{padding:1.5rem 0}
}

@media (min-width:1280px){
  .rail__item{width:min(28vw,420px)}
  .shead--row{align-items:baseline}
}

/* Puntero fino: efectos que no aplican en táctil */
@media (hover:hover) and (pointer:fine){
  .btn{transition:transform .25s var(--ease),color .3s var(--ease),box-shadow .35s var(--ease)}
}

/* Accesibilidad: menos movimiento */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-anim]{opacity:1 !important;transform:none !important}
  .js [data-anim="line"] .anim-line > span{transform:none !important}
  .js .rail__item{opacity:1;transform:none}
  .hero__canvas{display:none}
}

/* Impresión */
@media print{
  .nav,.menu,.wabar,.hero__canvas,.ticker,.lightbox{display:none !important}
  body{background:#fff;color:#000}
}