/* ============================================================
   EL GALLITO RIFAS — Design System (Alto Octanaje / Dark Gold)
   ============================================================ */
:root {
  --bg:            #131313;
  --surface:       #1c1b1b;
  --surface-hi:    #242323;
  --card:          #1c1b1b;
  --card-hi:       #242323;
  --border:        #333230;
  --border-dim:    #262524;
  --text:          #e5e2e1;
  --text-dim:      #c4b5ad;
  --muted:         #7a6a64;
  --primary:       #f5c400;
  --primary-dark:  #d4a900;
  --primary-light: #fde68a;
  --primary-glow:  rgba(245,196,0,.22);
  --on-primary:    #131313;
  --green:         #4ade80;
  --sold-bg:       rgba(220,50,50,.15);
  --sold-clr:      #f87171;
  --apart-bg:      rgba(249,115,22,.12);
  --apart-clr:     #fb923c;
  --radius:        0.75rem;
  --radius-sm:     0.4rem;
  --radius-pill:   999px;
  --font-main:     'Space Grotesk', sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-main);
  background: var(--bg);
  color: var(--text);
  overflow-x: hidden;
  padding-bottom: 5rem;
  transition: background .4s ease, color .3s ease;
}

.text-primary { color: var(--primary); }
.text-center  { text-align: center; }

/* ========================
   HERO LOGO
======================== */
.hero-logo-wrap {
  width: 100%; max-width: 420px;
  display: flex; align-items: center; justify-content: center;
  filter: drop-shadow(0 0 60px rgba(245,196,0,.35));
  animation: hero-float 4s ease-in-out infinite;
}
.hero-logo-img {
  width: 100%; border-radius: 50%;
  box-shadow: 0 0 80px rgba(245,196,0,.25), 0 0 140px rgba(245,196,0,.1);
}
@keyframes hero-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ========================
   GALLITOS FLOTANTES
======================== */
#gallitos-wrap {
  position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden;
}
.gallito-sticker {
  position: fixed; font-size: 2rem; opacity: .12; pointer-events: none;
  animation: gallito-drift linear infinite;
  filter: grayscale(.3);
  transition: transform .15s ease;
}
.gallito-sticker:hover { transform: scale(1.3) rotate(10deg); }
/* Estilos neon/sombra/loco habilitan pointer-events via sus bloques de tema */
@keyframes gallito-drift {
  0%   { transform: translateY(0)   rotate(0deg)   scale(1); opacity: .10; }
  25%  { transform: translateY(-30px) rotate(8deg)  scale(1.05); }
  50%  { transform: translateY(-12px) rotate(-5deg) scale(.95); opacity: .15; }
  75%  { transform: translateY(-25px) rotate(10deg) scale(1.02); }
  100% { transform: translateY(0)   rotate(0deg)   scale(1); opacity: .10; }
}

/* ========================
   URGENCY BAR
======================== */
.urgency-bar {
  position: sticky; top: 0; z-index: 110;
  background: var(--primary);
  color: var(--on-primary); font-size: .8rem; font-weight: 700;
  text-align: center; padding: .55rem 1rem;
  letter-spacing: .5px;
  display: flex; align-items: center; justify-content: center; gap: .4rem; flex-wrap: wrap;
}
.urgency-bar span { font-size: .95rem; font-weight: 900; }

/* ========================
   HEADER
======================== */
.header {
  position: sticky; top: 36px; z-index: 100;
  background: rgba(19,19,19,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5rem;
  padding: .75rem 1.25rem;
}
.header-brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; }
.header-logo  { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.header-name  { font-size: .85rem; font-weight: 700; letter-spacing: 2px; color: var(--text); }
.header-nav   { display: flex; gap: 1.75rem; margin-left: auto; }
.header-nav a {
  color: var(--muted); text-decoration: none;
  font-size: .8rem; font-weight: 600; letter-spacing: .5px;
  transition: color .2s;
}
.header-nav a:hover { color: var(--primary-light); }
.header-cta {
  margin-left: .5rem; padding: .5rem 1.1rem;
  font-size: .78rem;
}
.hamburger {
  display: none; background: none;
  border: 1px solid var(--border); color: var(--text);
  padding: .4rem .65rem; font-size: 1.1rem; cursor: pointer;
  border-radius: var(--radius-sm); margin-left: auto;
}

/* MOBILE MENU */
.mobile-menu {
  display: none; flex-direction: column;
  position: fixed; top: 96px; left: 0; right: 0; z-index: 99;
  background: var(--surface); border-bottom: 1px solid var(--border);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  color: var(--text-dim); text-decoration: none;
  padding: .9rem 1.5rem; border-bottom: 1px solid var(--border-dim);
  font-size: .88rem; font-weight: 600; letter-spacing: .5px;
  transition: color .2s, padding-left .2s;
}
.mobile-menu a:hover { color: var(--primary); padding-left: 2rem; }

/* ========================
   BUTTONS
======================== */
.btn-primary {
  background: var(--primary); color: var(--on-primary);
  padding: .7rem 1.5rem; font-size: .82rem; font-weight: 700;
  letter-spacing: 1px; text-decoration: none; border: none;
  border-radius: var(--radius-sm); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  transition: background .2s, transform .15s;
  display: inline-block; white-space: nowrap;
}
.btn-primary:hover  { background: var(--primary-dark); transform: translateY(-1px); }
.btn-primary:active { transform: translateY(0); }
.btn-primary.full-width { width: 100%; text-align: center; display: block; padding: .9rem; }
.btn-primary.btn-xl {
  padding: 1rem 2.5rem; font-size: 1rem; letter-spacing: 1.5px;
  border-radius: var(--radius);
}

.btn-outline-sm {
  background: transparent; color: var(--primary-light);
  border: 1px solid var(--primary-light);
  padding: .4rem .9rem; font-size: .75rem; font-weight: 700;
  border-radius: var(--radius-pill); cursor: pointer;
  font-family: 'Space Grotesk', sans-serif;
  letter-spacing: .5px; transition: background .2s, color .2s;
}
.btn-outline-sm:hover { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }

/* ========================
   HERO
======================== */
.hero {
  min-height: 88vh; display: flex; align-items: center;
  padding: 5rem 1.5rem 4rem;
  background: radial-gradient(ellipse at 80% 40%, rgba(255,95,0,.10) 0%, transparent 65%),
              linear-gradient(180deg, #0e0e0e 0%, var(--bg) 100%);
  position: relative; overflow: hidden;
}
.hero-mesh {
  position: absolute; inset: 0; z-index: 0;
  background-image:
    linear-gradient(rgba(255,95,0,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,95,0,.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 70% 40%, black 20%, transparent 70%);
}
.hero-inner {
  max-width: 1200px; margin: 0 auto; width: 100%;
  display: flex; align-items: center; gap: 3rem;
  position: relative; z-index: 1;
}
.hero-content { flex: 1; min-width: 0; }
.hero-visual   {
  flex: 1; display: flex; align-items: center; justify-content: center;
  min-width: 0;
}
.hero-img-wrap {
  width: 100%; max-width: 440px;
  background: var(--surface); border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
  min-height: 260px;
  box-shadow: 0 0 80px var(--primary-glow);
}
.hero-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-emoji     { font-size: 7rem; display: flex; align-items: center; justify-content: center; padding: 2rem; }

.live-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(255,95,0,.12); color: var(--primary-light);
  border: 1px solid rgba(255,95,0,.3); border-radius: var(--radius-pill);
  padding: .3rem .85rem; font-size: .72rem; font-weight: 700;
  letter-spacing: 1px; margin-bottom: 1.25rem;
}
.live-dot {
  color: #4ade80; font-size: .65rem;
  animation: pulse-dot 1.5s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.3; } }

.hero-car-label {
  font-size: clamp(1.1rem, 2.5vw, 1.5rem); font-weight: 700;
  color: var(--primary); letter-spacing: .5px;
  margin-bottom: .5rem; line-height: 1.2;
}
.hero-title {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 700; line-height: 1.1; letter-spacing: -1.5px;
  margin-bottom: 1.5rem; color: var(--text);
}

.payment-logos {
  display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.5rem;
}
.pay-logo {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .7rem;
  font-size: .7rem; font-weight: 700; letter-spacing: .5px;
  color: var(--text-dim);
}

/* ========================
   STATS BAR
======================== */
.stats-bar {
  display: flex; align-items: stretch; justify-content: center;
  background: var(--surface); border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.stat-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.25rem 2.5rem; text-align: center; flex: 1;
  border-right: 1px solid var(--border-dim);
}
.stat-item:last-child { border-right: none; }
.stat-n { font-size: 1.65rem; font-weight: 700; color: var(--primary); letter-spacing: -1px; line-height: 1; }
.stat-l { font-size: .65rem; color: var(--muted); letter-spacing: 1.5px; margin-top: .3rem; text-transform: uppercase; }

/* ========================
   SECTIONS
======================== */
.section     { padding: 5rem 1rem; }
.section-dark { background: var(--surface); }
.container   { max-width: 1200px; margin: 0 auto; padding: 0 1rem; }
.section-title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 700; letter-spacing: -1px; margin-bottom: 2.5rem; line-height: 1.15;
}

/* ========================
   GALLERY CAROUSEL
======================== */
.rifa-hero { position: relative; min-height: 280px; background: var(--surface-hi);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }

.gallery-slides { width: 100%; height: 320px; position: relative; overflow: hidden; }
.gallery-slide  { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: 0; transition: opacity .4s ease; }
.gallery-slide.active { opacity: 1; }
.gallery-fallback {
  width: 100%; height: 320px; font-size: 7rem;
  align-items: center; justify-content: center;
  color: var(--muted); background: var(--surface-hi);
}

/* Cartoon/toy sticker badge */
.rifa-cartoon-badge {
  position: absolute; bottom: .75rem; right: .75rem; z-index: 6;
  width: 80px; height: 80px; object-fit: contain;
  background: var(--surface);
  border: 2px solid var(--primary);
  border-radius: 50%; padding: 4px;
  box-shadow: 0 4px 20px rgba(0,0,0,.6), 0 0 0 3px rgba(245,196,0,.25);
  animation: badge-float 3.5s ease-in-out infinite;
  cursor: default;
}
@keyframes badge-float {
  0%,100% { transform: translateY(0) rotate(-4deg); }
  50%      { transform: translateY(-7px) rotate(4deg); }
}

.gallery-prev, .gallery-next {
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 5; background: rgba(19,19,19,.75); border: 1px solid var(--border);
  color: var(--text); width: 36px; height: 36px; border-radius: 50%;
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .2s; backdrop-filter: blur(4px);
}
.gallery-prev { left: .65rem; }
.gallery-next { right: .65rem; }
.gallery-prev:hover, .gallery-next:hover { background: var(--primary); color: var(--on-primary); }

.gallery-dots {
  position: absolute; bottom: 2.8rem; left: 50%; transform: translateX(-50%);
  display: flex; gap: .4rem; z-index: 5;
}
.gdot {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.4); cursor: pointer; transition: background .2s, transform .2s;
}
.gdot.active { background: var(--primary); transform: scale(1.3); }

.gallery-counter {
  position: absolute; bottom: .65rem; right: .75rem; z-index: 5;
  background: rgba(19,19,19,.75); color: var(--text-dim);
  font-size: .68rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: var(--radius-pill); backdrop-filter: blur(4px);
}

/* ========================
   RIFA CARD
======================== */
.rifa-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 2rem;
  overflow: hidden; transition: box-shadow .3s, border-color .3s;
}
.rifa-card:hover {
  border-color: rgba(245,196,0,.4);
  box-shadow: 0 8px 48px var(--primary-glow);
}

.rifa-hero {
  position: relative; min-height: 260px;
  background: var(--surface-hi);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.rifa-foto {
  width: 100%; height: 320px; object-fit: cover; display: block;
}
.rifa-car-emoji {
  font-size: 8rem; display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 260px;
  filter: drop-shadow(0 0 40px var(--primary-glow));
}
.rifa-badge-hot {
  position: absolute; top: 1rem; left: 1rem;
  background: var(--primary); color: var(--on-primary);
  padding: .25rem .75rem; font-size: .68rem; font-weight: 700; letter-spacing: 1.5px;
  border-radius: var(--radius-pill);
}
.rifa-price-tag {
  position: absolute; bottom: 1rem; right: 1rem;
  background: rgba(19,19,19,.9); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .6rem 1rem; text-align: right;
  backdrop-filter: blur(8px);
}
.rifa-price-label  { display: block; font-size: .6rem; color: var(--muted); letter-spacing: 1.5px; margin-bottom: .15rem; }
.rifa-price-amount { font-size: 1.35rem; font-weight: 700; color: var(--primary); }

.rifa-body { padding: 1.5rem; }
.rifa-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.rifa-name { font-size: 1.4rem; font-weight: 700; letter-spacing: -.5px; }
.rifa-sorteo-badge {
  font-size: .65rem; font-weight: 700; letter-spacing: 1px; white-space: nowrap;
  flex-shrink: 0; color: var(--muted);
  border: 1px solid var(--border); border-radius: var(--radius-pill);
  padding: .3rem .8rem;
}

.rifa-specs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin-bottom: 1.5rem;
}
.spec-item {
  background: var(--surface-hi); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: .65rem .75rem;
}
.spec-k { display: block; font-size: .58rem; color: var(--muted); letter-spacing: 1px; margin-bottom: .2rem; }
.spec-v { font-size: .88rem; font-weight: 700; color: var(--text-dim); }
.spec-v.red { color: var(--primary); }

/* PROGRESS BAR */
.rifa-progress-wrap  { margin-bottom: 1.5rem; }
.rifa-progress-header {
  display: flex; gap: 1rem; margin-bottom: .6rem;
  font-size: .73rem; font-weight: 600; flex-wrap: wrap;
}
.prog-available { color: var(--green); }
.prog-sold      { color: var(--sold-clr); }
.prog-apart     { color: var(--apart-clr); }
.progress-bar-bg   { background: var(--surface-hi); height: 8px; border-radius: var(--radius-pill); overflow: hidden; }
.progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--primary-dark), var(--primary)); border-radius: var(--radius-pill); transition: width .6s ease; }

/* PERCENTAGE DISPLAY */
.rifa-pct-wrap {
  display: flex; align-items: center; gap: 1.25rem; margin-bottom: 1.5rem;
  background: var(--surface-hi); border: 1px solid var(--border-dim);
  border-radius: var(--radius); padding: 1rem 1.25rem;
}
.rifa-pct-num {
  font-size: 2.6rem; font-weight: 700; color: var(--primary);
  line-height: 1; letter-spacing: -2px; flex-shrink: 0;
}
.rifa-pct-detail { flex: 1; min-width: 0; }
.rifa-pct-label  { font-size: .65rem; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; margin-bottom: .45rem; }
.pct-bar-bg    { background: var(--border); height: 10px; border-radius: var(--radius-pill); overflow: hidden; }
.pct-bar-fill  {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-dark), var(--primary));
  border-radius: var(--radius-pill); transition: width .7s ease;
}
.pct-counts    { display: flex; gap: .85rem; margin-top: .5rem; flex-wrap: wrap; }
.pct-count     { font-size: .72rem; font-weight: 600; display: flex; align-items: center; gap: .3rem; }
.pct-count .dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; }
.pct-count .dot.g { background: var(--green); }
.pct-count .dot.y { background: var(--apart-clr); }
.pct-count .dot.r { background: var(--sold-clr); }

/* NUMBER GRID */
.rifa-nums-section { margin-bottom: 1.5rem; }
.rifa-nums-label   { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; margin-bottom: .6rem; }
.nums-legend {
  display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: .85rem;
  background: var(--surface-hi); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: .6rem .85rem;
}
.legend-item       { display: flex; align-items: center; gap: .4rem; font-size: .72rem; font-weight: 600; color: var(--text-dim); }
.legend-dot        { width: 14px; height: 14px; border-radius: 3px; flex-shrink: 0; }
.legend-dot.available { background: var(--surface-hi); border: 1.5px solid var(--green); }
.legend-dot.sold      { background: var(--sold-bg); border: 1.5px solid var(--sold-clr); }
.legend-dot.apart     { background: var(--apart-bg); border: 1.5px solid var(--apart-clr); }
.legend-dot.selected  { background: var(--primary); border: 1.5px solid var(--primary-dark); }

.nums-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  gap: 6px; max-height: 270px; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface-hi);
}
.nums-grid::-webkit-scrollbar       { width: 4px; }
.nums-grid::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
.num-btn {
  height: 50px; border: 1.5px solid var(--border);
  background: var(--surface-hi); color: var(--text-dim);
  font-size: .8rem; font-weight: 700;
  border-radius: var(--radius-sm);
  cursor: pointer; transition: all .15s;
  font-family: 'Space Grotesk', sans-serif;
  position: relative;
}
.num-btn:hover:not(.sold):not(.apart) {
  border-color: var(--primary); color: var(--primary);
  background: rgba(245,196,0,.08); transform: scale(1.07);
}
.num-btn.sold {
  background: var(--sold-bg); border-color: var(--sold-clr);
  color: var(--sold-clr); cursor: not-allowed; opacity: .8;
}
.num-btn.apart {
  background: var(--apart-bg); border-color: var(--apart-clr);
  color: var(--apart-clr); cursor: not-allowed; opacity: .9;
}
.num-btn.selected {
  background: var(--primary); border-color: var(--primary-dark);
  color: var(--on-primary); font-weight: 700;
  box-shadow: 0 0 14px var(--primary-glow); transform: scale(1.05);
}

/* VIDEO EMBED */
.rifa-video-wrap {
  margin-bottom: 1.5rem; border-radius: var(--radius); overflow: hidden;
  background: #000; aspect-ratio: 16/9; position: relative;
}
.rifa-video-frame {
  width: 100%; height: 100%; position: absolute; inset: 0; border: none;
}

/* RIFA ACTIONS */
.rifa-actions   { display: flex; gap: .75rem; align-items: center; }
.selected-count {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .75rem 1rem; text-align: center; min-width: 90px;
}
.selected-count strong { display: block; font-size: 1.3rem; font-weight: 700; color: var(--primary); }
.selected-count span   { font-size: .6rem; color: var(--muted); letter-spacing: 1px; }
.btn-apartar {
  flex: 1; background: var(--primary); color: var(--on-primary); border: none;
  padding: .9rem 1.5rem; font-size: .88rem; font-weight: 700;
  letter-spacing: 1px; cursor: pointer; font-family: 'Space Grotesk', sans-serif;
  border-radius: var(--radius-sm); transition: background .2s, transform .15s;
}
.btn-apartar:hover    { background: var(--primary-dark); transform: translateY(-1px); }
.btn-apartar:disabled { background: var(--surface-hi); color: var(--muted); cursor: not-allowed; transform: none; box-shadow: none; }

/* ========================
   STEPS
======================== */
.steps-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.step-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 2rem;
  display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color .25s, box-shadow .25s;
}
.step-card:hover {
  border-color: rgba(255,95,0,.4);
  box-shadow: 0 4px 24px var(--primary-glow);
}
.step-icon-wrap {
  width: 52px; height: 52px;
  background: rgba(255,95,0,.10); border: 1px solid rgba(255,95,0,.2);
  border-radius: var(--radius); display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem;
}
.step-icon-wrap .material-symbols-outlined { font-size: 1.6rem; color: var(--primary); }
.step-label { font-size: .95rem; font-weight: 700; margin-bottom: .5rem; color: var(--text); }
.step-desc  { font-size: .85rem; color: var(--muted); line-height: 1.6; }

/* ========================
   UPCOMING RAFFLES
======================== */
.upcoming-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.upcoming-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; position: relative;
}
.upcoming-blur-img { height: 200px; position: relative; overflow: hidden; }
.upcoming-overlay {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(13,13,13,.95) 0%, transparent 100%);
  padding: 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.upcoming-overlay h3 { font-size: 1rem; font-weight: 700; color: var(--text); }

/* ========================
   WINNERS
======================== */
.winners-scroll {
  display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem;
  scrollbar-width: thin; scrollbar-color: var(--primary) var(--surface-hi);
}
.winners-scroll::-webkit-scrollbar       { height: 4px; }
.winners-scroll::-webkit-scrollbar-thumb { background: var(--primary); border-radius: 4px; }
.winner-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-shrink: 0;
  min-width: 240px; transition: border-color .25s;
}
.winner-card:hover { border-color: rgba(255,95,0,.4); }
.winner-avatar {
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,95,0,.15); border: 2px solid var(--primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; flex-shrink: 0;
}
.winner-name  { font-weight: 700; font-size: .95rem; }
.winner-prize { color: var(--primary-light); font-size: .8rem; font-weight: 600; margin-top: .2rem; }
.winner-date  { color: var(--muted); font-size: .7rem; margin-top: .15rem; }

/* ========================
   TRUST / TRANSPARENCIA
======================== */
.trust-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}
.trust-card {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.75rem;
  transition: border-color .25s, box-shadow .25s;
}
.trust-card:hover {
  border-color: rgba(255,95,0,.35);
  box-shadow: 0 4px 24px var(--primary-glow);
}
.trust-icon { font-size: 2rem; color: var(--primary); margin-bottom: 1rem; display: block; }
.trust-card h4 { font-size: .92rem; font-weight: 700; margin-bottom: .5rem; }
.trust-card p  { color: var(--muted); font-size: .85rem; line-height: 1.65; }

/* ========================
   REVIEWS
======================== */
.reviews-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.review-card   { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.75rem; }
.review-stars  { color: var(--primary); font-size: 1rem; margin-bottom: .85rem; letter-spacing: 2px; }
.review-text   { color: var(--text-dim); font-size: .88rem; line-height: 1.75; margin-bottom: 1.25rem; font-style: italic; }
.review-author { font-size: .72rem; font-weight: 700; letter-spacing: 1px; color: var(--muted); }

/* ========================
   FAQ (native details)
======================== */
.faq-list { max-width: 780px; margin: 0 auto; display: flex; flex-direction: column; gap: .5rem; }
.faq-item {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .2s;
}
.faq-item[open] { border-color: rgba(255,95,0,.35); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem 1.25rem; cursor: pointer; list-style: none;
  font-size: .92rem; font-weight: 600; gap: 1rem;
  color: var(--text); transition: color .2s;
}
.faq-item summary:hover { color: var(--primary-light); }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .material-symbols-outlined {
  font-size: 1.2rem; color: var(--primary); flex-shrink: 0;
  transition: transform .2s;
}
.faq-item[open] summary .material-symbols-outlined { transform: rotate(180deg); }
.faq-body {
  padding: 0 1.25rem 1.1rem;
  color: var(--muted); font-size: .875rem; line-height: 1.7;
  border-top: 1px solid var(--border-dim);
  padding-top: .85rem;
}

/* ========================
   FINAL CTA
======================== */
.final-cta {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,95,0,.15) 0%, transparent 65%),
              var(--surface);
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  padding: 5rem 1.5rem; text-align: center;
}
.final-cta-inner { max-width: 700px; margin: 0 auto; }
.final-cd {
  font-size: clamp(2.4rem, 8vw, 4rem); font-weight: 700;
  color: var(--primary); letter-spacing: 4px;
  margin-bottom: 1.5rem; font-variant-numeric: tabular-nums;
}
.final-cta h2 {
  font-size: clamp(1.5rem, 3.5vw, 2.2rem); font-weight: 700;
  letter-spacing: -.5px; margin-bottom: 2rem;
  color: var(--text); line-height: 1.25;
}

/* ========================
   FOOTER
======================== */
.footer { background: #0e0e0e; border-top: 1px solid var(--border-dim); padding: 3rem 1.5rem 2rem; }
.footer-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2.5rem;
}
.footer-logo  { font-size: 1.4rem; font-weight: 700; letter-spacing: 2px; margin-bottom: .75rem; color: var(--text); }
.footer-brand-col p { color: var(--muted); font-size: .82rem; line-height: 1.65; margin-bottom: 1rem; }
.footer-socials { display: flex; gap: .75rem; align-items: center; }
.social-link {
  color: var(--muted); display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--border); transition: color .2s, border-color .2s, background .2s;
  text-decoration: none;
}
.social-link:hover { color: var(--on-primary); background: var(--primary); border-color: var(--primary); }
.footer-links-col h5,
.footer-pay-col h5  {
  font-size: .68rem; font-weight: 700; letter-spacing: 2px;
  color: var(--muted); margin-bottom: .85rem;
}
.footer-links-col ul { list-style: none; display: flex; flex-direction: column; gap: .55rem; }
.footer-links-col a  { color: var(--text-dim); text-decoration: none; font-size: .83rem; transition: color .2s; }
.footer-links-col a:hover { color: var(--primary-light); }
.footer-pays { display: flex; flex-wrap: wrap; gap: .5rem; }
.pay-chip {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: .3rem .65rem;
  font-size: .7rem; font-weight: 700; color: var(--text-dim); letter-spacing: .5px;
}
.footer-bottom {
  max-width: 1200px; margin: 2rem auto 0;
  border-top: 1px solid var(--border-dim); padding-top: 1.25rem;
  display: flex; gap: 1rem; justify-content: space-between; flex-wrap: wrap;
}
.footer-bottom p { font-size: .72rem; color: var(--muted); }

/* ========================
   BOTTOM NAV (mobile)
======================== */
.bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  background: rgba(19,19,19,.97);
  border-top: 1px solid var(--border);
  backdrop-filter: blur(12px);
  justify-content: space-around; align-items: center; height: 58px;
}
.bn-item {
  display: flex; flex-direction: column; align-items: center;
  color: var(--muted); text-decoration: none; padding: .4rem .6rem;
  border-radius: var(--radius-sm); transition: color .2s;
}
.bn-item .material-symbols-outlined { font-size: 1.5rem; }
.bn-item:hover, .bn-item.active { color: var(--primary); }

/* ========================
   WHATSAPP FLOAT
======================== */
.wa-float-wrap { position: fixed; bottom: 5.5rem; right: 1.25rem; z-index: 200; }
.wa-bubble {
  position: absolute; bottom: calc(100% + .5rem); right: 0;
  background: var(--text); color: #131313;
  font-size: .75rem; font-weight: 700; white-space: nowrap;
  padding: .5rem .85rem; border-radius: 1rem 1rem 0 1rem;
  animation: bubble-fade 5s ease-in-out 2s forwards;
  pointer-events: none;
}
@keyframes bubble-fade { 0%,60% { opacity:1; } 100% { opacity:0; } }
.wa-float {
  width: 54px; height: 54px; border-radius: 50%;
  background: #25D366; color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.45);
  text-decoration: none; transition: transform .2s;
  animation: wa-pulse 2.5s ease-in-out infinite;
}
.wa-float:hover { transform: scale(1.1); }
@keyframes wa-pulse {
  0%,100% { box-shadow: 0 4px 20px rgba(37,211,102,.45); }
  50%      { box-shadow: 0 4px 36px rgba(37,211,102,.75); }
}

/* ========================
   MODAL
======================== */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.8); z-index: 300; backdrop-filter: blur(4px);
}
.modal-overlay.show { display: block; }
.modal {
  display: none; position: fixed;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 301; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 2rem; max-width: 440px; width: 92%; max-height: 90vh; overflow-y: auto;
}
.modal.show { display: block; }
.modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: var(--surface-hi); border: 1px solid var(--border);
  color: var(--text); width: 30px; height: 30px; cursor: pointer;
  font-size: .85rem; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
}
.modal-title  { font-size: 1.2rem; font-weight: 700; margin-bottom: .25rem; padding-right: 2rem; }
.modal-car    { color: var(--primary-light); font-size: .85rem; font-weight: 600; margin-bottom: 1rem; }
.modal-selected {
  background: var(--surface-hi); border: 1px solid var(--border-dim);
  border-radius: var(--radius-sm); padding: .85rem 1rem;
  font-size: .875rem; margin-bottom: 1rem; line-height: 1.65;
}
.modal-form { display: flex; flex-direction: column; gap: .75rem; }
.modal-form input {
  background: var(--surface-hi); border: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text); padding: .75rem 1rem; font-size: .9rem;
  font-family: 'Space Grotesk', sans-serif; transition: border-color .2s;
}
.modal-form input:focus { outline: none; border-color: var(--primary); border-bottom-color: var(--primary); }
.modal-form input::placeholder { color: var(--muted); }
.modal-success {
  display: none; background: rgba(74,222,128,.08);
  border: 1px solid rgba(74,222,128,.3); border-radius: var(--radius-sm);
  padding: 1rem; text-align: center; color: var(--green);
  font-size: .9rem; margin-top: 1rem; line-height: 1.6;
}
.modal-success.show { display: block; }

/* ========================
   SISTEMA DE TEMAS — PALETAS
======================== */
body[data-palette="sangre"] {
  --bg: #0d0808; --surface: #1a0c0c; --surface-hi: #231212;
  --card: #1a0c0c; --card-hi: #231212;
  --border: #3d1a1a; --border-dim: #2a1010;
  --primary: #ff3c00; --primary-dark: #cc3000; --primary-light: #ff8c69;
  --primary-glow: rgba(255,60,0,.22); --on-primary: #fff;
  --sold-bg: rgba(200,0,200,.12); --sold-clr: #f472b6;
}
body[data-palette="neon"] {
  --bg: #07071a; --surface: #0e0e24; --surface-hi: #14142e;
  --card: #0e0e24; --card-hi: #14142e;
  --border: #1e1e44; --border-dim: #16163a;
  --primary: #00c8ff; --primary-dark: #0099cc; --primary-light: #7de8ff;
  --primary-glow: rgba(0,200,255,.22); --on-primary: #07071a;
  --muted: #5a6a8a; --text-dim: #a8c0d8;
}
body[data-palette="esmeralda"] {
  --bg: #050f09; --surface: #0d1a10; --surface-hi: #112515;
  --card: #0d1a10; --card-hi: #112515;
  --border: #1a3d22; --border-dim: #122a17;
  --primary: #00e07a; --primary-dark: #00b562; --primary-light: #6effa8;
  --primary-glow: rgba(0,224,122,.22); --on-primary: #050f09;
  --muted: #4a7a5a; --text-dim: #a8d8b8;
}

/* ========================
   SISTEMA DE TEMAS — FUENTES
======================== */
body[data-font="impacto"]  { --font-main: 'Bebas Neue', cursive; letter-spacing: .5px; }
body[data-font="elegante"] { --font-main: 'Playfair Display', serif; }
body[data-font="divertido"]{ --font-main: 'Nunito', sans-serif; }

/* ========================
   SISTEMA DE TEMAS — GALLOS
======================== */
/* Neón: glowing pulsante */
body[data-gallos="neon"] .gallito-sticker {
  opacity: 0.45;
  filter: drop-shadow(0 0 8px var(--primary)) drop-shadow(0 0 20px var(--primary)) brightness(1.4);
  animation: gallito-glow var(--dur, 4s) ease-in-out infinite, gallito-drift var(--drift-dur, 12s) linear infinite;
  pointer-events: all; cursor: pointer;
}
@keyframes gallito-glow {
  0%,100% { filter: drop-shadow(0 0 6px var(--primary)) brightness(1.2); }
  50%      { filter: drop-shadow(0 0 22px var(--primary)) drop-shadow(0 0 40px var(--primary)) brightness(1.9); }
}

/* Sombra: silueta con halo */
body[data-gallos="sombra"] .gallito-sticker {
  opacity: 0.35;
  filter: brightness(0.05) drop-shadow(0 0 14px var(--primary)) drop-shadow(0 0 28px var(--primary));
  animation: gallito-ghost var(--dur, 6s) ease-in-out infinite, gallito-drift var(--drift-dur, 14s) linear infinite;
  pointer-events: all; cursor: pointer;
}
@keyframes gallito-ghost {
  0%,100% { filter: brightness(0.05) drop-shadow(0 0 10px var(--primary)); transform: scale(1); }
  50%      { filter: brightness(0.15) drop-shadow(0 0 30px var(--primary)); transform: scale(1.1); }
}

/* Caos: colores locos girando */
body[data-gallos="loco"] .gallito-sticker {
  opacity: 0.3;
  animation: gallito-hue var(--dur, 4s) linear infinite, gallito-drift var(--drift-dur, 10s) linear infinite;
  pointer-events: all; cursor: pointer;
}
body[data-gallos="loco"] .gallito-sticker:nth-child(3n)   { --dur: 3s; }
body[data-gallos="loco"] .gallito-sticker:nth-child(3n+1) { --dur: 5s; }
body[data-gallos="loco"] .gallito-sticker:nth-child(5n)   { opacity: .45; }
@keyframes gallito-hue {
  0%   { filter: hue-rotate(0deg) saturate(3) brightness(1.3); }
  100% { filter: hue-rotate(360deg) saturate(3) brightness(1.3); }
}

/* Click easter egg animation */
.gallito-sticker.gallito-boom {
  animation: gallito-explode 0.5s ease forwards !important;
  opacity: 0.9 !important;
  pointer-events: none;
}
@keyframes gallito-explode {
  0%   { transform: scale(1) rotate(0); }
  30%  { transform: scale(2.2) rotate(25deg); }
  60%  { transform: scale(0.7) rotate(-15deg); }
  80%  { transform: scale(1.5) rotate(10deg); }
  100% { transform: scale(1) rotate(0); }
}

/* Easter egg logo click */
.logo-dance {
  animation: logo-party 0.6s ease !important;
}
@keyframes logo-party {
  0%,100% { transform: rotate(0) scale(1); }
  25%      { transform: rotate(-15deg) scale(1.3); }
  75%      { transform: rotate(12deg) scale(1.15); }
}

/* ========================
   EASTER EGG — TOAST
======================== */
.gallito-toast {
  position: fixed; bottom: 6rem; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--primary); color: var(--on-primary);
  font-family: var(--font-main); font-size: 1rem; font-weight: 700;
  padding: .75rem 1.75rem; border-radius: var(--radius-pill);
  box-shadow: 0 8px 32px rgba(0,0,0,.5);
  z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap; letter-spacing: .5px;
}
.gallito-toast.show {
  opacity: 1; transform: translateX(-50%) translateY(0);
}

/* ========================
   EASTER EGG — CONFETTI
======================== */
.confetti-piece {
  position: fixed; top: -20px; z-index: 9998;
  border-radius: 2px; pointer-events: none;
  animation: confetti-fall 2.5s ease-in forwards;
}
@keyframes confetti-fall {
  0%   { transform: translateY(0) rotateZ(0deg) rotateX(0); opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateY(110vh) rotateZ(var(--spin, 360deg)) rotateX(180deg); opacity: 0; }
}

/* ========================
   RESPONSIVE
======================== */
@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-brand-col { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  body { padding-bottom: 5rem; }
  .header-nav, .header-cta { display: none; }
  .hamburger { display: block; }
  .bottom-nav { display: flex; }
  .wa-float-wrap { bottom: 4.75rem; }
  .hero { padding: 4.5rem 1.25rem 3rem; }
  .hero-inner { flex-direction: column; gap: 2rem; }
  .hero-visual { width: 100%; max-width: 420px; }
  .hero-img-wrap { max-width: 100%; }
  .stat-item { padding: 1rem 1.25rem; flex: 1 0 50%; }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(3) { border-top: 1px solid var(--border-dim); }
  .stat-item:nth-child(4) { border-top: 1px solid var(--border-dim); border-right: none; }
  .rifa-specs { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer-bottom { flex-direction: column; gap: .5rem; text-align: center; }
  .faq-list { max-width: 100%; }
}

@media (max-width: 480px) {
  .hero-title { letter-spacing: -.5px; }
  .steps-grid { grid-template-columns: 1fr 1fr; }
  .trust-grid { grid-template-columns: 1fr; }
  .final-cd   { letter-spacing: 2px; }
}
@media (max-width: 380px) {
  .steps-grid { grid-template-columns: 1fr; }
}