@charset "UTF-8";
/* @charset va en la PRIMERA linea del archivo, sin nada delante (ni un
   comentario): si no, el navegador lo ignora. Hace falta porque esta hoja
   usa caracteres UTF-8 dentro de content: (la vineta de los premios) y
   Apache no siempre manda el charset en la cabecera. Sin esto la vineta
   sale como simbolos raros. */
/* ============================================================
   PIXELIA RIFAS — Estilos Sitio Público
   Paleta: #f39200 (naranja principal) · #e0742b (naranja oscuro) · #000 (fondo)
   Tipografía: Anton (titulares/números) · Manrope (cuerpo)
   ============================================================ */

:root {
  --naranja:      #f39200;
  --naranja-dark: #e0742b;
  --naranja-glow: rgba(243,146,0,0.25);
  --negro:        #000000;
  --negro-card:   #0d0d0d;
  --negro-borde:  #1a1a1a;
  --blanco:       #ffffff;
  --gris:         #999999;
  --gris-claro:   #e0e0e0;
  --verde:        #22c55e;
  --rojo:         #ef4444;
  --radio:        12px;
  --radio-lg:     20px;
  --sombra-naranja: 0 0 40px rgba(243,146,0,0.2);

  /* Tipografía del sistema */
  --fuente-titulo: 'Anton', 'Bahnschrift', 'Arial Narrow', sans-serif;
  --fuente-cuerpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--fuente-cuerpo);
  background: var(--negro);
  color: var(--blanco);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ─── TIPOGRAFÍA ─── */
h1, h2, h3, h4, h5 {
  font-family: var(--fuente-titulo);
  font-weight: 400; /* Anton es de peso único */
  line-height: 1.08;
  letter-spacing: 0.2px;
}

.titulo-hero {
  font-family: var(--fuente-titulo);
  font-size: clamp(48px, 8vw, 96px);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.92;
  letter-spacing: 0.5px;
}

.titulo-hero .naranja { color: var(--naranja); }

.subtitulo-italic {
  font-family: var(--fuente-cuerpo);
  font-style: italic;
  color: var(--gris);
}

/* ─── LAYOUT ─── */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 80px 0; }
.section-sm { padding: 48px 0; }

/* ─── NAVBAR ─── */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 0 24px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--negro-borde);
  transition: background 0.3s;
}

.navbar.scrolled { background: rgba(0,0,0,0.97); }

.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.navbar-logo-icon { font-size: 28px; }
.navbar-logo-text {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 700;
  color: var(--blanco);
  letter-spacing: -0.5px;
}
.navbar-logo-text span { color: var(--naranja); }

.navbar-links { display: flex; align-items: center; gap: 32px; }
.navbar-links a {
  color: var(--gris);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
  letter-spacing: 0.3px;
}
.navbar-links a:hover { color: var(--blanco); }

.navbar-cta {
  background: var(--naranja);
  color: var(--negro) !important;
  padding: 10px 22px;
  border-radius: 8px;
  font-weight: 700 !important;
  font-size: 14px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, transform 0.1s !important;
}
.navbar-cta:hover { background: var(--naranja-dark) !important; transform: translateY(-1px); }

/* ─── HERO ─── */
.hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  padding-top: 70px;
  background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(243,146,0,0.12) 0%, transparent 70%),
              var(--negro);
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 60px 0 80px;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(243,146,0,0.12);
  border: 1px solid rgba(243,146,0,0.3);
  color: var(--naranja);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.hero-trust {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: 28px;
  flex-wrap: wrap;
}

.hero-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gris);
}
.hero-trust-item .ico { color: var(--naranja); font-size: 16px; }

.hero-btns { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.hero-img-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-img-wrap::before {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(243,146,0,0.15) 0%, transparent 70%);
  border-radius: 50%;
}

.hero-img {
  width: 100%;
  max-width: 580px;
  border-radius: var(--radio-lg);
  position: relative;
  z-index: 1;
  object-fit: cover;
  aspect-ratio: 4/3;
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
}

/* ─── STATS BAR ─── */
.stats-bar {
  background: var(--negro-card);
  border-top: 1px solid var(--negro-borde);
  border-bottom: 1px solid var(--negro-borde);
  padding: 28px 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 24px;
  border-right: 1px solid var(--negro-borde);
}
.stat-item:last-child { border-right: none; }
.stat-ico { font-size: 28px; flex-shrink: 0; }
.stat-valor { font-size: 26px; font-weight: 800; color: var(--naranja); line-height: 1; font-family: var(--fuente-titulo); }
.stat-label { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }

/* ─── COUNTDOWN ─── */
.countdown-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}
.countdown-unit {
  text-align: center;
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio);
  padding: 16px 20px;
  min-width: 72px;
}
.countdown-num {
  font-size: 36px;
  font-weight: 800;
  color: var(--naranja);
  font-family: var(--fuente-titulo);
  line-height: 1;
  display: block;
}
.countdown-label { font-size: 10px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }
.countdown-sep { font-size: 28px; color: var(--naranja); font-weight: 800; padding-bottom: 16px; }

/* ─── PROGRESS BAR ─── */
.progress-section {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-lg);
  padding: 28px;
}
.progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.progress-track { background: #1a1a1a; border-radius: 999px; height: 14px; overflow: hidden; position: relative; }
.progress-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--naranja-dark), var(--naranja));
  transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
  position: relative;
}
.progress-fill::after {
  content: '';
  position: absolute;
  right: -1px; top: 0; bottom: 0;
  width: 4px;
  background: #fff;
  border-radius: 2px;
  opacity: 0.6;
  box-shadow: 0 0 8px rgba(255,255,255,0.8);
}
.progress-labels { display: flex; justify-content: space-between; font-size: 12px; color: var(--gris); margin-top: 8px; }

/* ─── MARQUEE COMPRADORES ─── */
.marquee-section { padding: 20px 0; overflow: hidden; border-top: 1px solid var(--negro-borde); border-bottom: 1px solid var(--negro-borde); background: var(--negro-card); }
.marquee-track { display: flex; gap: 0; animation: marquee 30s linear infinite; width: max-content; }
.marquee-section:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 24px;
  border-right: 1px solid var(--negro-borde);
  white-space: nowrap;
}
.marquee-avatar { width: 30px; height: 30px; background: var(--naranja-dark); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #000; flex-shrink: 0; }
.marquee-nombre { font-size: 13px; color: var(--gris-claro); }
.marquee-ciudad { font-size: 12px; color: var(--gris); }
.marquee-boletos { font-size: 12px; color: var(--naranja); font-weight: 600; }

/* ─── CARDS / PAQUETES ─── */
.paquetes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.paquete-card {
  background: var(--negro-card);
  border: 2px solid var(--negro-borde);
  border-radius: var(--radio-lg);
  padding: 20px 16px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.paquete-card:hover { border-color: rgba(243,146,0,0.5); transform: translateY(-2px); }
.paquete-card.selected { border-color: var(--naranja); background: rgba(243,146,0,0.06); box-shadow: 0 0 0 1px var(--naranja), var(--sombra-naranja); }
.paquete-card.popular { border-color: var(--naranja-dark); }

.paquete-badge {
  position: absolute;
  top: -1px; right: -1px;
  background: var(--naranja);
  color: #000;
  font-size: 10px;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 0 var(--radio) 0 var(--radio);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.paquete-cantidad { font-size: 32px; font-weight: 800; color: var(--blanco); font-family: var(--fuente-titulo); line-height: 1; }
.paquete-cantidad-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.paquete-precio { font-size: 22px; font-weight: 700; color: var(--naranja); margin: 10px 0 2px; }
.paquete-desc { font-size: 11px; color: var(--gris); }
.paquete-descuento { font-size: 10px; background: rgba(243,146,0,0.15); color: var(--naranja); padding: 2px 8px; border-radius: 10px; margin-top: 6px; display: inline-block; font-weight: 600; }

/* ─── BENDECIDOS MURAL ─── */
.bendecidos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.bendecido-card {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio);
  padding: 16px;
  position: relative;
  transition: border-color 0.2s;
}
.bendecido-card.activo { border-color: rgba(243,146,0,0.3); }
.bendecido-card.reclamado { opacity: 0.5; }
.bendecido-num { font-size: 28px; font-weight: 800; color: var(--naranja); font-family: var(--fuente-titulo); }
.bendecido-premio { font-size: 13px; color: var(--gris-claro); margin: 4px 0; }
.bendecido-valor { font-size: 12px; color: var(--naranja); font-weight: 600; }
.bendecido-estado { position: absolute; top: 10px; right: 10px; font-size: 10px; }

/* ─── CÓMO FUNCIONA ─── */
.pasos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.paso-card {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-lg);
  padding: 32px 24px;
  text-align: center;
  position: relative;
}
.paso-num {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #000;
  font-family: var(--fuente-titulo);
  margin: 0 auto 16px;
}
.paso-titulo { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.paso-desc { font-size: 14px; color: var(--gris); line-height: 1.6; }

/* ─── BOTONES ─── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: all 0.15s;
  font-family: var(--fuente-titulo);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.btn-naranja {
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  color: #000;
  box-shadow: 0 4px 20px rgba(243,146,0,0.3);
}
.btn-naranja:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(243,146,0,0.4); }
.btn-naranja:active { transform: translateY(0); }

.btn-outline {
  background: transparent;
  color: var(--blanco);
  border: 2px solid rgba(255,255,255,0.2);
}
.btn-outline:hover { border-color: var(--naranja); color: var(--naranja); }

.btn-sm { padding: 10px 18px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; }
.btn-full { width: 100%; }

.btn-copia {
  background: rgba(243,146,0,0.1);
  border: 1px solid rgba(243,146,0,0.3);
  color: var(--naranja);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.btn-copia:hover { background: rgba(243,146,0,0.2); }
.btn-copia.copiado { background: rgba(34,197,94,0.15); border-color: var(--verde); color: var(--verde); }

/* ─── FORMULARIOS ─── */
.form-card {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: var(--radio-lg);
  padding: 32px;
}

.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 12px; font-weight: 600; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.form-input {
  width: 100%;
  background: #0d0d0d;
  border: 1.5px solid #222;
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--blanco);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.form-input:focus { border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(243,146,0,0.1); }
.form-input.valido { border-color: var(--verde); }
.form-input.invalido { border-color: var(--rojo); }
.form-hint { font-size: 12px; color: var(--gris); margin-top: 5px; }
.form-error { font-size: 12px; color: var(--rojo); margin-top: 5px; display: none; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ─── TIMER (pantalla de pago) ─── */
.timer-wrap {
  text-align: center;
  padding: 24px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: var(--radio-lg);
}
.timer-label { font-size: 12px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
.timer-display { font-size: 52px; font-weight: 800; color: var(--rojo); font-family: var(--fuente-titulo); letter-spacing: 4px; }
.timer-display.urgente { color: var(--rojo); animation: pulso 1s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: 0.6; } }
.timer-sub { font-size: 13px; color: var(--gris); margin-top: 6px; }

/* ─── DATO BANCARIO ─── */
.dato-bancario {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #0d0d0d;
  border: 1px solid var(--negro-borde);
  border-radius: 10px;
  margin-bottom: 10px;
  gap: 12px;
}
.dato-bancario-label { font-size: 12px; color: var(--gris); margin-bottom: 2px; }
.dato-bancario-valor { font-size: 16px; font-weight: 600; color: var(--blanco); }
.monto-destacado { font-size: 36px; font-weight: 800; color: var(--naranja); font-family: var(--fuente-titulo); text-align: center; padding: 20px; }

/* ─── CONFIRMACIÓN ─── */
.confirm-icon { font-size: 72px; text-align: center; margin-bottom: 16px; }
.confirm-numero { font-size: 28px; font-weight: 800; color: var(--naranja); font-family: var(--fuente-titulo); text-align: center; }
.tickets-lista { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 16px 0; }
.ticket-chip {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--fuente-titulo);
  color: var(--naranja);
  letter-spacing: 2px;
}

.banner-ganador {
  background: linear-gradient(135deg, rgba(243,146,0,0.15), rgba(224,116,43,0.1));
  border: 2px solid var(--naranja);
  border-radius: var(--radio-lg);
  padding: 28px;
  text-align: center;
  box-shadow: var(--sombra-naranja);
  animation: glow-pulse 2s ease-in-out infinite;
}
@keyframes glow-pulse { 0%,100% { box-shadow: 0 0 20px rgba(243,146,0,0.2); } 50% { box-shadow: 0 0 40px rgba(243,146,0,0.4); } }
.banner-ganador-titulo { font-size: 36px; font-weight: 800; font-family: var(--fuente-titulo); color: var(--naranja); }

/* ─── UPLOAD AREA ─── */
.upload-area {
  border: 2px dashed #333;
  border-radius: var(--radio-lg);
  padding: 32px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  position: relative;
}
.upload-area:hover, .upload-area.dragover { border-color: var(--naranja); background: rgba(243,146,0,0.04); }
.upload-area input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-ico { font-size: 40px; margin-bottom: 8px; }
.upload-texto { color: var(--gris); font-size: 14px; }
.upload-texto strong { color: var(--naranja); }

/* ─── WHATSAPP FLOTANTE (nuevo) ─── */
.wa-flotante {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 500;
  display: inline-flex;
  align-items: center;
  gap: 0;
  text-decoration: none;
  border-radius: 999px;
  padding: 0;
  background: transparent;
  filter: drop-shadow(0 12px 28px rgba(37,211,102,0.45));
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1), filter 0.25s;
}
.wa-flotante-circulo {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  border: 2px solid rgba(255,255,255,0.18);
  transition: transform 0.25s cubic-bezier(0.4,0,0.2,1);
  z-index: 2;
}
.wa-flotante-pulso {
  position: absolute;
  top: 50%; left: 32px;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(37,211,102,0.45);
  z-index: 1;
  pointer-events: none;
  animation: wa-pulso 2s ease-out infinite;
}
@keyframes wa-pulso {
  0%   { transform: translate(-50%, -50%) scale(1);   opacity: 0.6; }
  80%  { transform: translate(-50%, -50%) scale(1.7); opacity: 0;   }
  100% { transform: translate(-50%, -50%) scale(1.7); opacity: 0;   }
}
.wa-flotante-label {
  display: inline-flex;
  align-items: center;
  height: 64px;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffffff;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  padding: 0;
  margin-left: -22px;
  padding-left: 22px;
  border-radius: 0 999px 999px 0;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.4px;
  transition: max-width 0.3s cubic-bezier(0.4,0,0.2,1), padding 0.3s;
  z-index: 1;
}
.wa-flotante:hover { transform: translateY(-2px); }
.wa-flotante:hover .wa-flotante-circulo { transform: scale(1.04); }
.wa-flotante:hover .wa-flotante-label {
  max-width: 160px;
  padding-right: 22px;
}
.wa-flotante:focus-visible {
  outline: 3px solid #25d366;
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .wa-flotante { bottom: 20px; right: 20px; }
  .wa-flotante-circulo { width: 56px; height: 56px; }
  .wa-flotante-pulso { width: 56px; height: 56px; left: 28px; }
  .wa-flotante-label { display: none; } /* en móvil no necesitamos el label expandible */
}

/* ─── FOOTER ─── */
.footer {
  background: var(--negro-card);
  border-top: 1px solid var(--negro-borde);
  padding: 48px 0 24px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 40px; margin-bottom: 40px; }
.footer-brand-name { font-family: var(--fuente-titulo); font-size: 22px; color: var(--blanco); margin-bottom: 8px; }
.footer-brand-name span { color: var(--naranja); }
.footer-desc { font-size: 13px; color: var(--gris); line-height: 1.7; max-width: 280px; }
.footer-col-titulo { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px; color: var(--gris); margin-bottom: 14px; }
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.footer-links a { color: var(--gris); text-decoration: none; font-size: 13px; transition: color 0.15s; }
.footer-links a:hover { color: var(--naranja); }
.footer-bottom { border-top: 1px solid var(--negro-borde); padding-top: 20px; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
.footer-copy { font-size: 12px; color: var(--gris); }
.footer-pixelia { font-size: 12px; color: var(--gris); }
.footer-pixelia a { color: var(--naranja); text-decoration: none; }

/* ─── ALERTAS ─── */
.alerta { padding: 14px 18px; border-radius: 10px; margin-bottom: 20px; font-size: 14px; display: flex; align-items: center; gap: 10px; }
.alerta-error { background: rgba(239,68,68,0.08); border: 1px solid rgba(239,68,68,0.3); color: var(--rojo); }
.alerta-exito { background: rgba(34,197,94,0.08); border: 1px solid rgba(34,197,94,0.3); color: var(--verde); }
.alerta-info  { background: rgba(243,146,0,0.08); border: 1px solid rgba(243,146,0,0.3); color: var(--naranja); }

/* ─── MODAL CARGA ─── */
.loading-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.loading-overlay.activo { display: flex; }
.spinner { width: 52px; height: 52px; border: 4px solid #222; border-top-color: var(--naranja); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.loading-texto { color: var(--blanco); font-size: 16px; font-weight: 600; }

/* ─── SECTION TITLES ─── */
.section-titulo {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  margin-bottom: 12px;
}
.section-titulo .naranja { color: var(--naranja); }
.section-subtitulo { font-size: 16px; color: var(--gris); max-width: 520px; }

/* ─── SEPARADOR DECORATIVO ─── */
.separador {
  width: 60px; height: 4px;
  background: linear-gradient(90deg, var(--naranja-dark), var(--naranja));
  border-radius: 2px;
  margin: 16px 0 32px;
}

/* ─── BADGES ─── */
.badge { display: inline-block; padding: 4px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.badge-naranja { background: rgba(243,146,0,0.15); color: var(--naranja); border: 1px solid rgba(243,146,0,0.3); }
.badge-verde   { background: rgba(34,197,94,0.12); color: var(--verde); }
.badge-rojo    { background: rgba(239,68,68,0.12); color: var(--rojo); }
.badge-gris    { background: rgba(255,255,255,0.06); color: var(--gris); }

/* ─── RESPONSIVE ─── */
@media (max-width: 768px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-img-wrap { order: -1; }
  .stats-grid { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--negro-borde); padding: 16px; }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--negro-borde); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .pasos-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .navbar-links { display: none; }
  .paquetes-grid { grid-template-columns: repeat(2,1fr); }
  .form-grid-2 { grid-template-columns: 1fr; }
  .titulo-hero { font-size: clamp(36px, 10vw, 64px); }
}

@media (max-width: 480px) {
  .paquetes-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   ALIASES / COMPLEMENTOS — clases usadas en las vistas
   ════════════════════════════════════════════════════════════════ */

/* Navbar */
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.navbar-logo {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 800;
  color: var(--blanco);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.navbar-logo:hover { color: var(--naranja); }

.btn-nav-comprar {
  background: var(--naranja);
  color: #000;
  padding: 10px 20px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.2s, transform 0.1s;
  white-space: nowrap;
}
.btn-nav-comprar:hover { background: var(--naranja-dark); transform: translateY(-1px); }

/* Hero — layout alternativo centrado (homepage actual) */
.hero-contenido {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  padding: 80px 20px;
}
.hero-etiqueta {
  display: inline-block;
  background: rgba(243,146,0,0.12);
  border: 1px solid rgba(243,146,0,0.3);
  color: var(--naranja);
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}
.hero-premio {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 28px 0;
  flex-wrap: wrap;
}
.hero-imagen-wrap { flex-shrink: 0; }
.hero-imagen {
  width: 220px;
  height: 160px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--negro-borde);
}
.hero-info { text-align: left; }
.hero-valor {
  font-size: clamp(36px, 6vw, 56px);
  font-weight: 800;
  color: var(--naranja);
  font-family: var(--fuente-titulo);
  line-height: 1;
}
.hero-nombre-premio { font-size: 20px; font-weight: 700; margin-top: 6px; }
.hero-descripcion { font-size: 14px; color: var(--gris); margin-top: 6px; max-width: 280px; }

/* Countdown — variante homepage */
.countdown-wrap {
  margin: 28px auto;
}
.countdown-wrap .countdown-label {
  font-size: 13px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 12px;
}
.countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.countdown-numero {
  display: block;
  font-size: 38px;
  font-weight: 800;
  color: var(--naranja);
  font-family: var(--fuente-titulo);
  line-height: 1;
}
.countdown-label-unit {
  display: block;
  font-size: 10px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 4px;
}

/* Botón hero */
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  color: #000;
  padding: 18px 36px;
  border-radius: 12px;
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  font-family: var(--fuente-titulo);
  letter-spacing: 0.3px;
  box-shadow: 0 6px 30px rgba(243,146,0,0.35);
  transition: all 0.2s;
  margin-top: 8px;
}
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 10px 40px rgba(243,146,0,0.45); }
.hero-sub { font-size: 13px; color: var(--gris); margin-top: 14px; }

/* Stats bar — variante sin ícono */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  background: var(--negro-card);
  border-top: 1px solid var(--negro-borde);
  border-bottom: 1px solid var(--negro-borde);
}
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 12px;
  border-right: 1px solid var(--negro-borde);
  text-align: center;
}
.stat-item:last-child { border-right: none; }
.stat-numero {
  font-size: 26px;
  font-weight: 800;
  color: var(--naranja);
  font-family: var(--fuente-titulo);
  line-height: 1;
}
.stat-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; }

/* Progress bar — variante simple */
.progress-bar {
  background: #1a1a1a;
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
  position: relative;
}

/* Marquee — variante con container */
.marquee-container {
  overflow: hidden;
  background: var(--negro-card);
  border-top: 1px solid var(--negro-borde);
  border-bottom: 1px solid var(--negro-borde);
  padding: 12px 0;
}
.marquee-container:hover .marquee-track { animation-play-state: paused; }
.marquee-inicial {
  width: 28px; height: 28px;
  background: var(--naranja-dark);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 12px; color: #000;
  flex-shrink: 0;
}

/* Sections */
.section-bendecidos { padding: 64px 0; background: var(--negro); }
.section-pasos { padding: 64px 0; background: var(--negro-card); border-top: 1px solid var(--negro-borde); }
.section-header { text-align: center; margin-bottom: 40px; }
.section-sub { color: var(--gris); font-size: 16px; max-width: 560px; margin: 8px auto 0; line-height: 1.6; }

/* Bendecidos — alias de clases */
.bendecido-numero { font-size: 28px; font-weight: 800; color: var(--naranja); font-family: var(--fuente-titulo); }
.bendecido-premio { font-size: 13px; color: var(--gris-claro); margin: 4px 0; }
.bendecido-valor  { font-size: 12px; color: var(--naranja); font-weight: 600; }
.bendecido-estado { font-size: 11px; margin-top: 8px; font-weight: 600; }
.bendecido-estado.activo    { color: var(--naranja); }
.bendecido-estado.asignado  { color: var(--gris); }
.bendecido-estado.reclamado { color: var(--verde); }

/* Pasos — alias */
.paso-numero {
  width: 52px; height: 52px;
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; font-weight: 800; color: #000;
  font-family: var(--fuente-titulo);
  margin: 0 auto 16px;
}

/* Compra layout 2 columnas */
.compra-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 32px;
  align-items: start;
}
.compra-principal {}
.compra-aside { position: sticky; top: 90px; }

/* Resumen card */
.resumen-card {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
  padding: 24px;
}
.resumen-titulo { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--gris); margin-bottom: 16px; }
.resumen-fila {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  color: var(--gris);
  padding: 8px 0;
  border-bottom: 1px solid var(--negro-borde);
}
.resumen-fila:last-of-type { border-bottom: none; }
.resumen-fila span:last-child { color: var(--blanco); font-weight: 600; text-align: right; }
.resumen-total { font-size: 16px !important; font-weight: 700; color: var(--blanco) !important; }
.resumen-total span:last-child { color: var(--naranja) !important; font-size: 20px !important; }
.resumen-garantia {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--negro-borde);
  font-size: 12px;
  color: var(--gris);
  line-height: 1.5;
}

/* Formulario de compra */
.form-group {
  margin-bottom: 18px;
}
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  background: #0a0a0a;
  border: 1.5px solid #222;
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--blanco);
  font-size: 15px;
  outline: none;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-group input:focus,
.form-group select:focus { border-color: var(--naranja); box-shadow: 0 0 0 3px rgba(243,146,0,0.08); }
.form-group select { cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 12px; padding-right: 36px; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.campo-ayuda { font-size: 12px; color: var(--gris); margin-top: 4px; display: block; }

.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--gris);
  cursor: pointer;
  line-height: 1.5;
}
.checkbox-label input[type=checkbox] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; accent-color: var(--naranja); cursor: pointer; }
.checkbox-label a { color: var(--naranja); }

.btn-block { width: 100%; margin-top: 12px; }

/* Paquete — alias */
.paquete-label { font-size: 11px; color: var(--gris); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 2px; }
.paquete-descuento { font-size: 10px; background: rgba(243,146,0,0.15); color: var(--naranja); padding: 2px 8px; border-radius: 10px; margin-top: 4px; display: inline-block; font-weight: 600; }
.paquete-por-boleto { font-size: 11px; color: var(--gris); margin-top: 2px; }
.paquete-card.seleccionado { border-color: var(--naranja); background: rgba(243,146,0,0.06); box-shadow: 0 0 0 1px var(--naranja), var(--sombra-naranja); }
.paquete-card.fuego { border-color: rgba(239,68,68,0.4); }
.paquete-card.diamante { border-color: rgba(167,139,250,0.4); }
.paquete-badge.popular   { background: var(--naranja); color: #000; }
.paquete-badge.fuego     { background: #ef4444; color: #fff; }
.paquete-badge.diamante  { background: #a78bfa; color: #fff; }
.paquete-radio { position: absolute; opacity: 0; pointer-events: none; }
.upgrade-tip {
  background: rgba(243,146,0,0.06);
  border: 1px dashed rgba(243,146,0,0.3);
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--naranja);
  margin-top: 16px;
}

/* Card pago */
.card-pago {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
  padding: 28px;
}

/* Timer — variante con flex */
.timer-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: rgba(239,68,68,0.05);
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 10px;
  font-size: 15px;
  color: var(--gris-claro);
  margin-bottom: 28px;
}
.timer-wrap strong { font-size: 20px; font-weight: 800; color: #ef4444; font-family: var(--fuente-titulo); margin-left: auto; }
.timer-wrap.urgente { animation: pulso 1s ease-in-out infinite; }

/* Botones copiar */
.btn-copiar {
  background: rgba(243,146,0,0.08);
  border: 1px solid rgba(243,146,0,0.2);
  color: var(--naranja);
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.btn-copiar:hover { background: rgba(243,146,0,0.18); }

/* Upload */
.upload-icono { pointer-events: none; }
.upload-area.drag-over { border-color: var(--naranja); background: rgba(243,146,0,0.04); }

/* Ganador banner — alias */
.ganador-banner {
  background: linear-gradient(135deg, rgba(243,146,0,0.15), rgba(224,116,43,0.1));
  border: 2px solid var(--naranja);
  border-radius: 20px;
  padding: 40px 28px;
  text-align: center;
  animation: glow-pulse 2s ease-in-out infinite;
  margin-bottom: 32px;
}
.ganador-banner-inner {}

/* Footer — variante col-based */
.footer-col {}
.footer-logo {
  font-family: var(--fuente-titulo);
  font-size: 20px;
  font-weight: 800;
  color: var(--blanco);
}
.footer-titulo {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris);
  margin-bottom: 14px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 40px;
}
.footer-copy {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px 0;
  border-top: 1px solid var(--negro-borde);
  font-size: 13px;
  color: var(--gris);
  text-align: center;
}

/* Spinner alias */
.loading-spinner {
  width: 52px; height: 52px;
  border: 4px solid #222;
  border-top-color: var(--naranja);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}

/* Gris texto alias */
:root { --gris-texto: #999999; }

/* ── RESPONSIVE extras ── */
@media (max-width: 900px) {
  .compra-layout { grid-template-columns: 1fr; }
  .compra-aside { position: static; }
}
@media (max-width: 768px) {
  .stats-bar { grid-template-columns: repeat(2,1fr); }
  .stat-item { border-right: none; border-bottom: 1px solid var(--negro-borde); }
  .stat-item:nth-child(odd) { border-right: 1px solid var(--negro-borde); }
  .stat-item:last-child, .stat-item:nth-last-child(2):nth-child(odd) { border-bottom: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .form-grid { grid-template-columns: 1fr; }
  .hero-premio { flex-direction: column; }
  .hero-info { text-align: center; }
}

/* ════════════════════════════════════════════════════════════════
   REDISEÑO 2026 — Home con identidad Rodríguez Motors
   Estos estilos sobreescriben los anteriores (cascada al final).
   ════════════════════════════════════════════════════════════════ */

:root {
  --naranja-suave: rgba(243,146,0,0.08);
  --naranja-borde: rgba(243,146,0,0.25);
  --negro-superficie: #050505;
  --negro-card-2: #0a0a0a;
}

body {
  font-family: var(--fuente-cuerpo);
  background: var(--negro-superficie);
}

h1, h2, h3, h4, h5,
.titulo-hero,
.section-titulo,
.stat-numero,
.countdown-numero,
.bendecido-numero,
.paso-numero,
.hero-imagen-badge-valor,
.btn-hero,
.btn-nav-comprar {
  font-family: var(--fuente-titulo);
}

/* ─── NAVBAR ─── */
.navbar {
  height: 90px;
  background: rgba(5,5,5,0.7);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.navbar.scrolled {
  background: rgba(5,5,5,0.95);
  border-bottom-color: rgba(255,255,255,0.08);
}
.navbar-inner { gap: 32px; }
.navbar-logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.navbar-logo-img {
  display: block;
  height: 53px;
  width: auto;
  max-width: 260px;
  object-fit: contain;
}
.navbar-links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;
  margin-right: 8px;
}
.navbar-links a {
  position: relative;
  color: var(--gris-claro);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 6px 0;
  transition: color 0.2s;
}
.navbar-links a:hover { color: var(--blanco); }
.navbar-links a.activo { color: var(--naranja); }
.navbar-links a.activo::after {
  content: '';
  position: absolute;
  bottom: -4px; left: 0; right: 0;
  height: 2px;
  background: var(--naranja);
  border-radius: 1px;
}
.btn-nav-comprar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--naranja);
  color: #000;
  padding: 13px 26px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  box-shadow: 0 6px 24px rgba(243,146,0,0.28);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.btn-nav-comprar:hover {
  background: var(--naranja-dark);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(243,146,0,0.38);
}
.btn-nav-comprar svg { width: 14px; height: 14px; }

/* ─── HERO ─── */
.hero.hero-grid-layout {
  position: relative;
  min-height: calc(100vh - 90px);
  padding: 90px 0 0;
  background:
    radial-gradient(ellipse 60% 50% at 75% 50%, rgba(243,146,0,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 60% at 100% 0%, rgba(243,146,0,0.10) 0%, transparent 60%),
    var(--negro);
  overflow: hidden;
}
.hero.hero-grid-layout::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(ellipse at center, black 30%, transparent 80%);
  pointer-events: none;
}
.hero.hero-grid-layout .hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
  padding: 56px 20px 72px;
}
.hero-col-texto { padding: 0; }

/* Colocación explícita de las tres piezas de la portada. Sin esto, al añadir
   el indicador como tercer hijo, la rejilla lo colocaba sola en la primera
   columna de una segunda fila —debajo del texto y a la izquierda— en vez de
   bajo la imagen. */
.hero.hero-grid-layout .hero-col-texto  { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.hero.hero-grid-layout .hero-col-imagen { grid-column: 2; grid-row: 1; align-self: end; }
.hero.hero-grid-layout .hero-progreso   { grid-column: 2; grid-row: 2; align-self: start; }

.hero-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--naranja-suave);
  border: 1px solid var(--naranja-borde);
  color: var(--naranja);
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 22px;
}
.hero-etiqueta-punto {
  width: 7px; height: 7px;
  background: var(--naranja);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(243,146,0,0.6);
  animation: pulso-punto 1.8s ease-out infinite;
}
@keyframes pulso-punto {
  0%   { box-shadow: 0 0 0 0 rgba(243,146,0,0.7); }
  70%  { box-shadow: 0 0 0 10px rgba(243,146,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(243,146,0,0); }
}

.titulo-hero {
  /* El tamaño se mide contra la ventana, pero el titular NO ocupa la ventana:
     vive en una columna que es poco menos de la mitad. Con 6.5vw llegaba a 88px
     dentro de una columna de 600px, así que palabras como «PARTICIPA» eran más
     anchas que su sitio y el titular se partía en CINCO líneas: 422px de alto,
     casi la mitad de la columna, y la portada entera se estiraba. Con 4.8vw
     entra en tres líneas y sigue siendo el elemento más grande de la página. */
  font-size: clamp(40px, 4.8vw, 66px);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.96;
  letter-spacing: -1.5px;
  color: var(--blanco);
  text-shadow: 0 4px 30px rgba(0,0,0,0.6);
}
.titulo-hero .naranja { color: var(--naranja); }

.hero-tagline {
  font-size: 15px;
  font-weight: 600;
  color: var(--gris-claro);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 22px 0 28px;
}

/* Trust pills */
.hero-trust-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, max-content));
  gap: 14px;
  padding: 0;
  margin: 0 0 32px;
}
.hero-trust-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--gris-claro);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.hero-trust-pill svg {
  width: 22px; height: 22px;
  color: var(--naranja);
  flex-shrink: 0;
}

/* CTA + social proof */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 36px;
}
.btn-hero {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  color: #000;
  padding: 16px 30px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(243,146,0,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
  margin: 0;
}
.btn-hero:hover { transform: translateY(-3px); box-shadow: 0 12px 40px rgba(243,146,0,0.5); }
.btn-hero svg { width: 18px; height: 18px; }

.hero-social-proof { display: flex; align-items: center; gap: 14px; }
.hero-avatars { display: flex; }
.hero-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  border: 2px solid var(--negro);
  margin-left: -10px;
}
.hero-avatar:first-child { margin-left: 0; }
.hero-social-info { display: flex; flex-direction: column; gap: 2px; }
.hero-social-stars { color: var(--naranja); font-size: 13px; letter-spacing: 1px; }
.hero-social-cifra { font-size: 12px; color: var(--gris-claro); text-transform: uppercase; letter-spacing: 0.6px; }
.hero-social-cifra strong { color: var(--blanco); font-weight: 800; }

/* Countdown compacto en hero */
.hero-col-texto .countdown-wrap {
  margin: 0;
  text-align: left;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 16px 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
}
.hero-col-texto .countdown-label {
  font-size: 11px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 10px;
}
.hero-col-texto .countdown { gap: 6px; justify-content: flex-start; }
.hero-col-texto .countdown-unit {
  background: transparent;
  border: none;
  padding: 0 8px;
  min-width: auto;
}
.hero-col-texto .countdown-numero {
  font-size: 28px;
  color: var(--blanco);
}
.hero-col-texto .countdown-label-unit { font-size: 9px; letter-spacing: 0.8px; }
.hero-col-texto .countdown-sep {
  font-size: 22px;
  color: var(--naranja);
  padding-bottom: 14px;
}

/* Columna imagen */
.hero-col-imagen {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.hero-imagen-wrap {
  position: relative;
  width: 100%;
  max-width: 580px;
  aspect-ratio: 5/4;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-imagen-halo {
  position: absolute;
  inset: 6%;
  background: radial-gradient(circle, rgba(243,146,0,0.55) 0%, rgba(243,146,0,0.15) 35%, transparent 65%);
  filter: blur(20px);
  border-radius: 50%;
  z-index: 0;
}
/* El aro dibujado por CSS queda OCULTO: la imagen del hero ya trae su propio
   aro naranja pintado a mano, y superponerle este —una elipse de 555x581, más
   grande que la imagen y girando sin parar— se veía como dos aros mal
   alineados. De paso se ahorra una animación permanente, que en móvil gasta
   batería a cambio de nada.
   Si algún día se cambia por una imagen SIN aro, basta con quitar el display. */
.hero-imagen-ring {
  display: none;
  position: absolute;
  inset: 8%;
  border: 2px solid rgba(243,146,0,0.35);
  border-radius: 50%;
  box-shadow:
    inset 0 0 60px rgba(243,146,0,0.18),
    0 0 80px rgba(243,146,0,0.18);
  z-index: 0;
  animation: ring-rotate 18s linear infinite;
}
@keyframes ring-rotate { to { transform: rotate(360deg); } }
.hero-imagen {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.6))
          drop-shadow(0 0 30px rgba(243,146,0,0.25));
  border: none;
  background: transparent;
  border-radius: 0;
  aspect-ratio: auto;
}
.hero-imagen-badge {
  position: absolute;
  bottom: 8%;
  right: 0;
  background: rgba(10,10,10,0.92);
  border: 1px solid var(--naranja-borde);
  border-radius: 14px;
  padding: 12px 18px;
  z-index: 2;
  backdrop-filter: blur(8px);
  display: flex;
  flex-direction: column;
  text-align: right;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}
.hero-imagen-badge-label {
  font-size: 10px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin-bottom: 2px;
}
.hero-imagen-badge-valor {
  font-size: 26px;
  font-weight: 800;
  color: var(--naranja);
  line-height: 1;
}
.hero-imagen-descripcion {
  font-size: 14px;
  color: var(--gris);
  text-align: center;
  max-width: 480px;
  line-height: 1.5;
}

/* ─── Lista de premios del hero ───
   Un premio por línea y con cuerpo suficiente para que se lean: antes iban
   todos seguidos en un párrafo de 14px y se perdían unos entre otros. */
.hero-premios-lista {
  list-style: none;
  /* Alineada con el titular, no centrada: con `auto` quedaba 4px descuadrada
     respecto al H1 y al tagline de su misma columna. */
  margin: 20px 0 0;
  padding: 0;
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.hero-premio-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--negro-borde);
  border-left: 3px solid var(--naranja);
  border-radius: 10px;
  text-align: left;
}
.hero-premio-puesto {
  flex: 0 0 auto;
  font-family: var(--fuente-titulo);
  font-size: 19px;
  line-height: 1;
  color: var(--naranja);
  letter-spacing: .5px;
  text-transform: uppercase;
}
/* La viñeta de los premios sin puesto (1ra/2da/3ra) se dibuja aquí, no en el
   HTML: escrita en el HTML se sumaba a la viñeta nativa de la lista cuando esta
   hoja no llegaba a cargar, y salían DOS puntos seguidos. */
.hero-premio-item.sin-puesto::before {
  content: "•";
  flex: 0 0 auto;
  font-size: 19px;
  line-height: 1.45;
  color: var(--naranja);
}
.hero-premio-texto {
  font-size: 18px;
  line-height: 1.45;
  color: var(--blanco);
  font-weight: 600;
}

/* En móvil se achica lo justo: el premio debe seguir leyéndose más grande
   que el texto corriente de la página, que es el motivo de la lista. */
@media (max-width: 560px) {
  .hero-premio-item   { padding: 10px 12px; gap: 8px; }
  .hero-premio-puesto { font-size: 18px; }
  .hero-premio-item.sin-puesto::before { font-size: 18px; }
  .hero-premio-texto  { font-size: 17px; }
}

/* ─── STATS BAR (icon + info card) ─── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--negro-card);
  border-top: 1px solid var(--negro-borde);
  border-bottom: 1px solid var(--negro-borde);
  max-width: 1200px;
  margin: 0 auto;
  border-radius: 16px;
  transform: translateY(-32px);
  box-shadow: 0 20px 60px rgba(0,0,0,0.5);
  overflow: hidden;
  position: relative;
  z-index: 5;
}
.stat-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 22px 22px;
  border-right: 1px solid rgba(255,255,255,0.05);
  text-align: left;
  background: linear-gradient(180deg, rgba(255,255,255,0.015), transparent);
  transition: background 0.2s;
}
.stat-item:hover { background: rgba(243,146,0,0.04); }
.stat-item:last-child { border-right: none; }
.stat-ico {
  width: 46px; height: 46px;
  background: var(--naranja-suave);
  border: 1px solid var(--naranja-borde);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--naranja);
  flex-shrink: 0;
}
.stat-ico svg { width: 22px; height: 22px; }
.stat-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.stat-label {
  font-size: 10px;
  color: var(--gris);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 600;
  margin: 0;
}
.stat-numero {
  font-size: 26px;
  font-weight: 800;
  color: var(--blanco);
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.stat-sublabel {
  font-size: 11px;
  color: var(--naranja);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ─── PROGRESS SECTION ─── */
.progress-section-wrap {
  padding: 8px 0 48px;
  background: var(--negro);
}
.progress-section {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
  padding: 24px 28px;
}
/* Cabecera centrada sobre el porcentaje, como en la referencia: el rotulo y la
   cifra forman un solo bloque. Antes el rotulo iba pequeno y a la izquierda,
   separado del numero, y no se leia como un indicador. */
.progress-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 4px;
  gap: 12px;
  flex-wrap: wrap;
}
.progress-titulo {
  font-family: var(--fuente-titulo);
  font-size: 22px;
  color: var(--blanco);
  text-transform: uppercase;
  letter-spacing: 1.2px;
  font-weight: 800;
  text-align: center;
}

/* ─── INDICADOR DE PROGRESO DENTRO DE LA PORTADA ───
   Ocupa el hueco que dejaron las tres pastillas de confianza («Transparencia
   total», etc.). Antes era una seccion suelta a media pagina; el cliente lo
   quiere al final de la portada, que es donde se mira. */
.hero-progreso {
  margin: 24px 0 4px;
  padding: 18px 20px 16px;
  max-width: 560px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
}
.hero-progreso .progress-nota {
  margin-top: 12px;
  margin-bottom: 0;
  font-size: 12.5px;
  text-align: center;
}
@media (max-width: 560px) {
  .hero-progreso { padding: 16px 14px 14px; }
  .hero-progreso .progress-porcentaje { font-size: 30px; }
  .hero-progreso .progress-titulo     { font-size: 18px; }
}

/* Porcentaje grande y centrado sobre la barra, como en la referencia */
.progress-porcentaje {
  display: block;
  font-size: 34px;
  font-weight: 800;
  color: var(--naranja);
  font-family: var(--fuente-titulo);
  letter-spacing: 1px;
  text-align: center;
  line-height: 1.1;
}
.progress-bar {
  height: 26px;
  background: #141414;
  border: 1px solid var(--negro-borde);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
  padding: 3px;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--naranja-dark), var(--naranja));
  border-radius: 999px;
  position: relative;
  overflow: hidden;
  transition: width 1.5s cubic-bezier(0.4,0,0.2,1);
  box-shadow: 0 0 18px rgba(243,146,0,0.45);
}
/* Rayas diagonales en movimiento: dan sensación de avance sin necesidad
   de que la cifra cambie. */
.progress-fill::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -55deg,
    rgba(0,0,0,0.30) 0 9px,
    transparent      9px 22px
  );
  background-size: 31px 31px;
  animation: progress-rayas 1.1s linear infinite;
}
@keyframes progress-rayas {
  from { background-position: 0 0; }
  to   { background-position: 31px 0; }
}
.progress-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
  animation: progress-shine 2.4s ease-in-out infinite;
}
@keyframes progress-shine {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}
/* Quien prefiera menos movimiento no ve las animaciones */
@media (prefers-reduced-motion: reduce) {
  .progress-fill::before,
  .progress-fill::after { animation: none; }
}
.progress-footer {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--gris);
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.progress-footer strong { color: var(--naranja); font-weight: 700; }
.progress-nota {
  margin-top: 14px;
  font-size: 13px;
  color: var(--gris-claro);
  background: rgba(243,146,0,0.06);
  border: 1px dashed rgba(243,146,0,0.3);
  border-radius: 8px;
  padding: 10px 14px;
  text-align: center;
}
.progress-nota strong { color: var(--naranja); }

/* ─── GALERÍA DE PREMIOS ─── */
.section-premios { padding: 72px 0; background: var(--negro-card); border-top: 1px solid var(--negro-borde); }
/* ─── Galería de premios: carrusel deslizable ─── */
.premios-carrusel {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
}
.carrusel-pista {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Ojo: NADA de "scroll-behavior: smooth" aquí. Si se pone, asignar
     .scrollLeft desde JS se convierte en una animación, y el arrastre con el
     ratón deja de responder. El desplazamiento suave se pide explícitamente
     en las flechas y los puntos con scrollTo({behavior:'smooth'}). */
  /* El desplazamiento lo hace el navegador, así que se arrastra con el dedo
     aunque el JS falle. Se ocultan las barras porque hay flechas y puntos. */
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding: 4px;
  /* Para que offsetLeft de las fotos se mida DESDE la pista y el cálculo
     de a dónde desplazar sea correcto. */
  position: relative;
  flex: 1;
  min-width: 0;
}
.carrusel-pista::-webkit-scrollbar { display: none; }

.carrusel-flecha {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  display: none;              /* solo en escritorio: en móvil se desliza */
  align-items: center;
  justify-content: center;
  font-size: 26px;
  line-height: 1;
  color: var(--blanco);
  background: rgba(0,0,0,0.65);
  border: 1px solid var(--negro-borde);
  border-radius: 50%;
  cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.carrusel-flecha:hover { border-color: var(--naranja); color: var(--naranja); }
.carrusel-flecha[disabled] { opacity: .3; cursor: default; }
.carrusel-flecha[disabled]:hover { border-color: var(--negro-borde); color: var(--blanco); }

.carrusel-puntos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}
.carrusel-punto {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  cursor: pointer;
  transition: width .25s, background .25s;
}
.carrusel-punto.activo {
  width: 26px;
  border-radius: 4px;
  background: var(--naranja);
}

.premio-foto {
  position: relative;
  margin: 0;
  border-radius: var(--radio-lg);
  overflow: hidden;
  border: 1px solid var(--negro-borde);
  background: var(--negro);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  /* Una foto por pantalla en móvil; en escritorio entran varias */
  flex: 0 0 100%;
  scroll-snap-align: center;
}
.premio-foto:hover {
  border-color: rgba(243,146,0,0.5);
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
}
.premio-foto img {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

@media (min-width: 700px) {
  .premio-foto { flex: 0 0 calc((100% - 16px) / 2); }
}
@media (min-width: 1000px) {
  .premio-foto { flex: 0 0 calc((100% - 32px) / 3); }
  .carrusel-flecha { display: flex; }
}
.premio-foto figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 16px 14px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 60%, transparent 100%);
}

/* ─── MARQUEE ─── */
.marquee-container {
  background: linear-gradient(180deg, var(--negro), var(--negro-card));
  border-top: 1px solid rgba(243,146,0,0.1);
  border-bottom: 1px solid rgba(243,146,0,0.1);
  padding: 14px 0;
}
.marquee-item {
  padding: 6px 24px;
  border-right: 1px solid rgba(255,255,255,0.05);
}
.marquee-inicial {
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  box-shadow: 0 2px 8px rgba(243,146,0,0.3);
}

/* ─── SECCIONES ─── */
.section-bendecidos { background: var(--negro); padding: 80px 0; }
.section-pasos {
  background: linear-gradient(180deg, var(--negro), var(--negro-card));
  padding: 80px 0;
  border-top: 1px solid rgba(255,255,255,0.04);
}
.section-header { text-align: center; margin-bottom: 48px; }
.section-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  color: var(--naranja);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 12px;
  padding: 5px 14px;
  background: var(--naranja-suave);
  border: 1px solid var(--naranja-borde);
  border-radius: 999px;
}
.section-titulo {
  font-size: clamp(32px, 4.5vw, 52px);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -1px;
  line-height: 1;
  margin: 0 0 14px;
}
.section-titulo .naranja { color: var(--naranja); }
.section-sub {
  font-size: 15px;
  color: var(--gris);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ─── BENDECIDOS ─── */
.bendecidos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.bendecido-card {
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 14px;
  padding: 20px 18px;
  position: relative;
  transition: all 0.2s;
  overflow: hidden;
}
.bendecido-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at top left, rgba(243,146,0,0.08), transparent 60%);
  opacity: 0;
  transition: opacity 0.2s;
}
.bendecido-card:hover {
  border-color: var(--naranja-borde);
  transform: translateY(-2px);
}
.bendecido-card:hover::before { opacity: 1; }
.bendecido-card.reclamado { opacity: 0.55; }
.bendecido-numero {
  font-size: 34px;
  font-weight: 800;
  color: var(--naranja);
  letter-spacing: 1px;
  line-height: 1;
  position: relative;
}
.bendecido-premio {
  font-size: 13px;
  color: var(--gris-claro);
  margin: 8px 0 4px;
  line-height: 1.4;
  position: relative;
}
.bendecido-valor {
  font-size: 13px;
  color: var(--naranja);
  font-weight: 700;
  position: relative;
}
.bendecido-estado {
  font-size: 11px;
  margin-top: 10px;
  font-weight: 600;
  position: relative;
}

/* ─── PASOS ─── */
.pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.paso-card {
  background: var(--negro-card-2);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
  padding: 36px 28px 32px;
  text-align: center;
  transition: all 0.2s;
}
.paso-card:hover {
  border-color: var(--naranja-borde);
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
}
.paso-numero {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, var(--naranja-dark), var(--naranja));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 800;
  color: #000;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(243,146,0,0.35);
}
.paso-titulo {
  font-size: 19px;
  font-weight: 700;
  margin-bottom: 10px;
  font-family: var(--fuente-cuerpo);
  letter-spacing: -0.2px;
}
.paso-desc {
  font-size: 14px;
  color: var(--gris);
  line-height: 1.6;
}

/* ─── FOOTER ─── */
.footer-logo-link { display: inline-block; }
.footer-logo-img {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  margin-bottom: 14px;
}
.footer-desc {
  color: var(--gris);
  font-size: 14px;
  line-height: 1.6;
  max-width: 320px;
}

/* ─── REDES SOCIALES (hero) ─── */
.hero-social-redes {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
}
.hero-social-redes li { line-height: 0; }
.hero-red-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: #e8e8e8;
  text-decoration: none;
  transition: transform 0.2s, color 0.2s, border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.hero-red-icono:hover {
  transform: translateY(-2px) scale(1.08);
  color: var(--naranja);
  border-color: rgba(243,146,0,0.55);
  background: rgba(243,146,0,0.08);
  box-shadow: 0 8px 24px rgba(243,146,0,0.22);
}
.hero-red-icono:focus-visible {
  outline: 2px solid var(--naranja);
  outline-offset: 3px;
}

/* ─── RESPONSIVE FINAL ─── */
@media (max-width: 1024px) {
  .hero.hero-grid-layout .hero-grid { grid-template-columns: 1fr; gap: 32px; padding: 40px 20px 60px; }
  /* Una sola columna: se anula la colocación de escritorio y se ordena a mano.
     La imagen primero (es el gancho), después el titular con los premios, y el
     indicador al final. Antes el indicador viajaba dentro de la columna de la
     imagen y salía por encima del titular. */
  .hero.hero-grid-layout .hero-col-texto,
  .hero.hero-grid-layout .hero-col-imagen,
  .hero.hero-grid-layout .hero-progreso { grid-column: auto; grid-row: auto; }
  .hero-col-imagen { order: -1; }
  .hero-col-texto  { order: 0; }
  .hero.hero-grid-layout .hero-progreso { order: 1; max-width: 560px; margin-left: auto; margin-right: auto; width: 100%; }
  .hero-imagen-wrap { max-width: 440px; aspect-ratio: 4/3; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); transform: translateY(-24px); }
  .stat-item:nth-child(2) { border-right: none; }
  .stat-item:nth-child(1), .stat-item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,0.05); }
  .pasos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .navbar { height: 74px; padding: 0 16px; }
  .navbar-inner { gap: 12px; }
  .navbar-logo-img { height: 42px; max-width: 190px; }
  .navbar-links { display: none; }
  .btn-nav-comprar { padding: 10px 16px; font-size: 12px; }
  .btn-nav-comprar svg { display: none; }

  .hero.hero-grid-layout { padding-top: 64px; min-height: auto; }
  .hero.hero-grid-layout .hero-grid { padding: 32px 16px 48px; }
  .titulo-hero { font-size: clamp(38px, 9vw, 56px); letter-spacing: -1px; }
  .hero-tagline { font-size: 13px; letter-spacing: 1px; }
  .hero-trust-list { grid-template-columns: 1fr; gap: 8px; }
  .hero-trust-pill { padding: 10px 14px; }
  .hero-cta-row { flex-direction: column; align-items: stretch; gap: 18px; }
  .btn-hero { justify-content: center; padding: 14px 24px; }
  .hero-social-proof { justify-content: center; }
  .hero-col-texto .countdown-numero { font-size: 22px; }

  .stats-bar {
    grid-template-columns: 1fr 1fr;
    border-radius: 12px;
    margin: 0 16px;
    transform: translateY(-20px);
    max-width: none;
  }
  .stat-item { padding: 16px 14px; gap: 10px; }
  .stat-ico { width: 38px; height: 38px; }
  .stat-ico svg { width: 18px; height: 18px; }
  .stat-numero { font-size: 20px; }
  .stat-label, .stat-sublabel { font-size: 9.5px; }

  .progress-section-wrap { padding: 8px 16px 36px; }
  .progress-section { padding: 18px 18px; }

  .section-bendecidos, .section-pasos { padding: 56px 0; }
  .section-titulo { font-size: clamp(28px, 7vw, 40px); }
}

@media (max-width: 480px) {
  .stats-bar { grid-template-columns: 1fr; }
  .stat-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.05); }
  .stat-item:last-child { border-bottom: none; }
  .bendecidos-grid { grid-template-columns: 1fr 1fr; }
  .hero-imagen-badge { bottom: 4%; padding: 8px 12px; }
  .hero-imagen-badge-valor { font-size: 20px; }
}

/* ══════════════════════════════════════════════════════════════
   CONSULTA PUBLICA DE PARTICIPACIONES (/mis-participaciones)
   ══════════════════════════════════════════════════════════════ */
.consulta-etiqueta {
  display: inline-block;
  padding: 6px 16px;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--naranja);
  background: rgba(243,146,0,0.10);
  border: 1px solid rgba(243,146,0,0.35);
  border-radius: 999px;
}
.consulta-form {
  max-width: 520px;
  margin: 0 auto;
  padding: 22px;
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
}
.consulta-label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 600;
  color: var(--gris-claro);
}
.consulta-fila { display: flex; gap: 10px; flex-wrap: wrap; }
.consulta-fila input {
  flex: 1 1 220px;
  min-width: 0;
  padding: 13px 14px;
  font-size: 15px;
  color: var(--blanco);
  background: var(--negro);
  border: 1px solid var(--negro-borde);
  border-radius: 10px;
}
.consulta-fila input:focus { outline: none; border-color: var(--naranja); }
.consulta-fila .btn { flex: 0 0 auto; }

.consulta-aviso-error {
  max-width: 520px;
  margin: 20px auto 0;
  padding: 14px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: #fbbf24;
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.32);
  border-radius: 12px;
}

.consulta-resumen {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 30px 0 18px;
  padding: 18px;
  text-align: center;
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-radius: 16px;
}
.consulta-resumen strong {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: 26px;
  color: var(--blanco);
  line-height: 1.2;
}
.consulta-resumen-etq {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gris);
}

.consulta-orden {
  margin-bottom: 14px;
  padding: 18px;
  background: var(--negro-card);
  border: 1px solid var(--negro-borde);
  border-left: 3px solid var(--naranja);
  border-radius: 14px;
}
.consulta-orden-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.consulta-orden-etq {
  display: block;
  font-size: 11px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--gris);
}
.consulta-orden-head strong {
  font-family: var(--fuente-titulo);
  font-size: 18px;
  color: var(--naranja);
  letter-spacing: .5px;
}
.consulta-estado {
  padding: 5px 12px;
  font-size: 12px;
  font-weight: 700;
  border-radius: 999px;
  white-space: nowrap;
}
.consulta-estado.ok     { color: #4ade80; background: rgba(34,197,94,0.12);  border: 1px solid rgba(34,197,94,0.35); }
.consulta-estado.espera { color: #fbbf24; background: rgba(251,191,36,0.10); border: 1px solid rgba(251,191,36,0.32); }

.consulta-orden-datos {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px;
  color: var(--gris);
}

/* Los numeros son lo que el comprador viene a ver: van grandes y en rejilla,
   no en una linea corrida donde se pierden. */
.consulta-numeros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.consulta-numero {
  padding: 8px 12px;
  font-family: var(--fuente-titulo);
  font-size: 18px;
  letter-spacing: 1.5px;
  color: var(--blanco);
  background: var(--negro);
  border: 1px solid rgba(243,146,0,0.45);
  border-radius: 9px;
}
.consulta-numero.pendiente {
  color: var(--gris-claro);
  border-color: rgba(251,191,36,0.35);
  border-style: dashed;
}
.consulta-aviso {
  margin: 12px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--gris);
}
.consulta-pie {
  margin-top: 18px;
  font-size: 13px;
  text-align: center;
  color: var(--gris);
}

@media (max-width: 560px) {
  .consulta-resumen { grid-template-columns: 1fr; gap: 14px; }
  .consulta-fila .btn { width: 100%; }
  .consulta-numero { font-size: 16px; padding: 7px 10px; }
}

/* ─── Llamada a la consulta, sobre los Numeros Bendecidos ─── */
.section-consulta-cta { padding: 40px 0 8px; background: var(--negro); }
.consulta-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(243,146,0,0.10), rgba(243,146,0,0.02));
  border: 1px solid rgba(243,146,0,0.32);
  border-radius: 18px;
}
.consulta-cta-titulo {
  margin: 0 0 6px;
  font-family: var(--fuente-titulo);
  font-size: clamp(20px, 3vw, 26px);
  letter-spacing: .5px;
  color: var(--blanco);
}
.consulta-cta-sub {
  margin: 0;
  max-width: 480px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--gris-claro);
}
.consulta-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .consulta-cta { flex-direction: column; align-items: stretch; text-align: center; padding: 22px 18px; }
  .consulta-cta-sub { max-width: none; }
  .consulta-cta-btn { justify-content: center; }
}

/* ══════════════════════════════════════════════════════════════
   ANUNCIO EMERGENTE
   ══════════════════════════════════════════════════════════════ */
.anuncio-fondo {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(0,0,0,0.82);
  backdrop-filter: blur(4px);
  animation: anuncio-entra .25s ease;
}
.anuncio-fondo[hidden] { display: none; }
@keyframes anuncio-entra { from { opacity: 0; } to { opacity: 1; } }

.anuncio-caja {
  position: relative;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--negro-card);
  border: 1px solid rgba(243,146,0,0.4);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04);
  animation: anuncio-sube .3s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes anuncio-sube {
  from { transform: translateY(18px) scale(.97); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

.anuncio-cerrar {
  position: absolute;
  top: 10px; right: 12px;
  z-index: 2;
  width: 34px; height: 34px;
  font-size: 26px;
  line-height: 1;
  color: var(--blanco);
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  cursor: pointer;
  transition: background .15s ease;
}
.anuncio-cerrar:hover { background: rgba(0,0,0,0.85); }

.anuncio-imagen {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: cover;
  border-radius: 20px 20px 0 0;
}
.anuncio-cuerpo { padding: 22px 24px 24px; text-align: center; }
.anuncio-titulo {
  margin: 0 0 10px;
  font-family: var(--fuente-titulo);
  font-size: clamp(21px, 4vw, 27px);
  line-height: 1.2;
  letter-spacing: .5px;
  color: var(--naranja);
}
.anuncio-mensaje {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--gris-claro);
}
.anuncio-boton { margin-top: 18px; }

@media (max-width: 480px) {
  .anuncio-cuerpo { padding: 18px 18px 20px; }
  .anuncio-imagen { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
  .anuncio-fondo, .anuncio-caja { animation: none; }
}