/* ======================= BASE / LAYOUT ======================= */
:root { --container: 1150px; }

* { box-sizing: border-box; }

/* body con fondo negro y texto blanco */
html, body {
  margin: 0;
  padding: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Arial, "Noto Sans";
  line-height: 1.5;
  color: #ffc600;  /* Texto blanco */
  background: #19154a;  /* Fondo negro */
}
body {
  padding-top: calc(var(--site-header-height, 160px));
}
.terms-content {
    color: #c5c5c5; /* Cambia el color del texto a blanco */
}


.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 16px; }

/* ======================= TOPBAR (el look vive en el partial) ======================= */
.topbar { font-size: 14px; }
.topbar__inner { display: flex; align-items: center; justify-content: center; min-height: 38px; text-align: center; }
.topbar__msg { font-weight: 700; letter-spacing: .2px; }

/* ======================= TIPOGRAFÍA TÍTULOS (look tipo Druk) ======================= */
h1, h2, h3, h4, h5, h6 {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  letter-spacing: .02em;
}
h1 { font-size: clamp(1.8rem, 3.6vw + .5rem, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.2rem, 2.2vw + .3rem, 1.8rem); font-weight: 800; }

/* ======================= HEADER / NAV ======================= */

.nav {
  display: flex; gap: 16px; padding: 10px 0;
  border-top: 1px solid #111; border-bottom: 1px solid #111;
}
.nav a { text-decoration: none; color: inherit; font-weight: 600; }

/* ======================= HERO (títulos centrados tipo portada) ======================= */
.hero { text-align: center; padding: clamp(18px, 3vw, 32px) 0 8px; }
.hero h2 { margin: 0 0 .2rem; }
.hero h1 { margin: .1rem 0; }
.hero .kicker { font-weight: 800; }

/* ======================= CONTENIDO / CARDS / FOOTER ======================= */
.main { padding: 24px 0 56px; }
.section { margin: 18px 0; }

/* Cambia el fondo gris claro a gris oscuro para .content */
.content, .content .container, .full_width {
  background-color: #333;  /* Fondo gris oscuro */
}

/* Asegura que el fondo de las tarjetas sea negro */
body .card {
  background: #19154a !important;  /* Fondo negro */
  color: #ffc600 !important;      /* Texto blanco */
  border: 1px solid #444 !important;  /* Bordes más oscuros */
}

/* Cambiar el fondo de las tarjetas .card a negro */
.card {
  background: #19154a; /* Fondo negro */
  color: #ffc600;      /* Texto blanco */
  border: 1px solid #444;  /* Bordes más oscuros */
}

/* Si quieres cambiar el fondo de las tarjetas más específicas, como las que contienen los botones */
.card__title, .card__content {
  background: #19154a; /* Fondo negro en los contenedores internos de las tarjetas */
  color: #ffc600;      /* Texto blanco */
}

/* Si deseas cambiar el fondo de otros contenedores similares */
.some-container-class {
  background-color: #333;  /* Fondo gris oscuro */
}

.card--flush { padding: 0; border: 0; box-shadow: none; background: transparent; }

.footer { color: #666; padding: 28px 0; border-top: 1px solid #eee; }

/* --- Topbar: centrado horizontal perfecto --- */
.topbar--strip .container{
  max-width: var(--container);   /* mismo ancho que el header */
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}

.topbar--strip .topbar__inner{
  position: relative;            /* referencia para el centrado absoluto */
  min-height: 42px;              /* opcional */
  display: flex;                 /* mantiene el alto y la alineación vertical */
  align-items: center;
}

.topbar--strip .topbar__msg{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);   /* ¡centro matemático! */
  margin: 0;
  text-align: center;
  white-space: nowrap;           /* opcional: evita saltos de línea en mensajes cortos */
}

/* ======================= CARRUSEL ======================= */
.carousel { position: relative; overflow: hidden; }
.carousel__viewport { display: flex; transition: transform .4s ease; width: 100%; }
.carousel__slide { min-width: 100%; margin: 0; position: relative; }
.carousel__slide img {
  display: block;         /* Deja que la imagen sea un bloque para ocupar el 100% */
  width: 100%;            /* La imagen ocupa todo el ancho del contenedor */
  height: 100%;           /* La imagen ocupa todo el alto del contenedor */
  object-fit: cover;      /* Asegura que la imagen cubra todo el espacio sin distorsionarse */
  border-radius: 12px;    /* Mantiene el redondeo de bordes */
  user-select: none;      /* Deshabilita la selección de imagen */
  -webkit-user-drag: none; /* Deshabilita el arrastre de imagen */
}


/* Ocultar caption y puntitos (solo flechas) */
.carousel__caption { display: none !important; }
.carousel__dots, .carousel__dot { display: none !important; }

/* Carrusel más grande en desktop */
@media (min-width: 768px){
  .carousel { width: 95%; margin: 0 auto; } /* pon 100% si lo prefieres */
}

/* Flechas circulares más grandes y clickeables encima de la imagen */
.carousel__ctrl {
  position: absolute; top: 50%; transform: translateY(-50%);
  border: 0; background: rgba(0,0,0,.3); color: #fff;
  width: 48px; height: 48px; border-radius: 50%; cursor: pointer;
  font-size: 22px; line-height: 1; display: grid; place-items: center;
  z-index: 5; pointer-events: auto;
}
.carousel__ctrl--prev { left: 10px; }
.carousel__ctrl--next { right: 10px; }
.carousel__ctrl:hover { background: rgba(0,0,0,.5); }

/* ======================= BLOQUE FIJO (banner + header juntos) ======================= */
.site-header-fixed {
  position: fixed;
  top: 0; left: 0; width: 100%; z-index: 9999; padding: 0;
}
/* Evitar que el contenido quede oculto detrás */
/* La altura real se calcula por JS en index.php */

/* ===== PROGRESS BAR ===== */
.progress-block { 
    text-align: center;
    padding-bottom: 40px;
}
.progress-title {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 800; letter-spacing: .02em;
  margin: 0 0 .6rem;
  font-size: clamp(1.2rem, 1.4vw + .6rem, 1.8rem);
}
.progress-label {
  font-weight: 800;
  margin-bottom: .5rem;
  font-size: clamp(1rem, 1vw + .4rem, 1.2rem);
}
.progress {
  width: 100%;
  max-width: 1200px;
  height: 38px;
  margin: 0 auto 16px;
  border-radius: 8px;
  background: #dedede;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}
.progress__fill {
  height: 100%;
  width: 0; /* se anima con JS */
  background: #19154a !important;          /* barra negra */
  position: relative;
  transition: width 900ms ease;
}
/* Sustituye tu ::after y su @keyframes por esto */
.progress__fill::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  /* Patrón de rayas no repetido */
  background-image: linear-gradient(
    45deg,
    rgba(255,255,255,.16) 25%,
    transparent 25%, transparent 50%,
    rgba(255,255,255,.16) 50%,
    rgba(255,255,255,.16) 75%,
    transparent 75%, transparent
  );
  /* Tamaño del mosaico: MUY importante para el loop */
  background-size: 24px 24px;
  /* Animación continua y suave */
  animation: stripes-flow var(--stripes-speed, 6s) linear infinite;
  /* Opcional: si quieres que las rayas sean un poco más sutiles */
  mix-blend-mode: normal;
}

@keyframes stripes-flow{
  from { background-position:    0 0; }
  to   { background-position: 24px 0; } /* exactamente el tamaño del mosaico */
}

/* ===== PROGRESS BAR ===== */
.progress-note {
  max-width: 1200px; 
  margin: 0.4rem auto 0;
  color: #c5c5c5;  /* Cambio de color a blanco para mejor contraste */
  font-size: clamp(1rem, 1vw + .4rem, 1.4rem);
  position: relative; /* Necesario para que el z-index funcione */
}

/* Estilo para el texto predeterminado que se muestra cuando los datos están vacíos */
.progress-note.empty {
  color: #c5c5c5 !important;  /* Color de texto más claro para indicar "en espera" */
  font-weight: normal; /* Menos énfasis en el texto predeterminado */
  font-size: clamp(1rem, 1vw + .4rem, 1.4rem);
}

/* Mejora visual del relleno: gradiente y brillo */
.progress { position: relative; }
.progress__fill {
  background: linear-gradient(90deg, #111 0%, #222 60%, #111 100%);
  will-change: width;
}

/* Brillo que cruza la barra */
.progress__fill::before {
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.22) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: progress-sheen 1.2s ease-in-out infinite;
  mix-blend-mode: overlay;
}
@keyframes progress-sheen {
  0%   { transform: translateX(-100%); }
  60%  { transform: translateX(120%); }
  100% { transform: translateX(120%); }
}

/* Pequeño realce al completar */
.progress__fill.progress--pop {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 0 0 6px rgba(0,0,0,.25);
}

/* ===== WINNERS / CARDS ===== */
.winners { text-align: center; }
.winners__title {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 800; letter-spacing: .02em;
  margin: 0 0 .8rem;
  font-size: clamp(1.2rem, 1.6vw + .6rem, 2rem);
  text-transform: uppercase;
}
.winners__subtitle {
  color: #c5c5c5;
  margin: 0 auto 1.2rem;
  max-width: 1100px;
  font-size: clamp(1rem, 1vw + .4rem, 1.4rem);
}

/* Grilla responsiva */
.winners__grid {
  max-width: 1100px; margin: 0 auto;
  display: grid; gap: 20px;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px){ .winners__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 900px){ .winners__grid { grid-template-columns: repeat(5, 1fr); } }

/* Tarjeta */
.winner-card {
  background: linear-gradient(to bottom, #ffc600, #ffffff);/*colos de las tarjetas*/
  border: 1px solid #eee;
  border-radius: 16px;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
  padding: 18px 14px;
  min-height: 110px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.winner-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  border-color: #e4e4e4;
}

/* Número grande */
.winner-card__number {
  color: #19154a !important;
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 900; letter-spacing: .06em;
  font-size: clamp(1.4rem, 2.6vw + .6rem, 2.1rem);
  line-height: 1;
}

/* Badge / estado */
.winner-card__badge {
  margin-top: .45rem;
  font-weight: 700;
  color: #7c7c7c;
  font-size: clamp(.9rem, .6vw + .4rem, 1.05rem);
}
.winner-card__spacer { height: 1.2rem; } /* para alinear alturas cuando no hay badge */

/* Estado entregado: tachado grueso y ligera desaturación */
.is-delivered .winner-card__number {
  text-decoration: line-through;
  text-decoration-thickness: 6px;
  text-decoration-color: rgba(0,0,0,.45);
  opacity: .85;
}
/* ======================= HOW TO PARTICIPATE ======================= */
/* ======================= HOW TO PARTICIPATE ======================= */
.howto {
  background-color: #19154a; /* Fondo de la sección */
  color: #ffc600; /* Texto en color amarillo */
  padding: 40px 0;
  text-align: center; /* Centramos todo el contenido */
}

.howto__title {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: clamp(1.8rem, 2.6vw + 1rem, 3rem);
  margin-bottom: 2rem;
}

.howto__list {
  list-style-type: none; /* Sin puntos ni iconos por defecto */
  padding: 0;
  color: #fff;
  margin: 0 auto;
  font-size: 1.2rem;
  max-width: 800px;
  text-align: left; /* Alineamos el texto a la izquierda */
}

.howto__list li {
  margin: 1rem 0;
  padding-left: 2.5rem;
  position: relative;
  font-size: clamp(1rem, 1.2vw + 0.4rem, 1.4rem);
  color: #c5c5c5;
}

.howto__list .with-number {
  display: flex;
  align-items: center;
}

.howto__list li:before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
}


/* El número de los pasos */
.howto__list .howto__number {
  margin-right: 0.6rem;
  font-weight: bold;
}

/* Estilo para el contenedor del botón */
.btn-container {
  margin-top: 20px; /* Separación entre el texto y el botón */
}

/* Estilo del botón */
.btn--primary {
  background-color: #ff6500;
  color: #fff;
  padding: 14px 24px;
  text-transform: uppercase;
  border-radius: 8px;
  display: inline-block;
  margin-top: 20px;
  font-weight: 800;
  text-align: center;
}

.btn--primary:hover {
  background-color: #e64a00;
  transform: scale(1.05);
}




/* ===== PACKS (adquiere tus números) ===== */
.packs { 
  text-align: center; 
  background-color: #19154a;  /* Fondo negro */
  color: #ffc600;  /* Texto blanco */
}
.packs.full_width { 
  background: #19154a;  /* Fondo negro */
  padding: 28px 0 36px; 
}

.packs__title {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 800; 
  letter-spacing: .02em; 
  text-transform: uppercase;
  margin: 0 0 .35rem;
  font-size: clamp(1.2rem, 1.6vw + .6rem, 2rem);
  color: #ffc600;  /* Mantener el texto blanco para el título */
}

.packs__subtitle {
  color: #ffc600;  /* Color blanco para el subtítulo */
  margin: 0 0 18px; 
  font-weight: 800;
  font-size: clamp(.95rem, .9vw + .35rem, 1.15rem);
}

.packs__grid {
  max-width: 1200px; 
  margin: 0 auto;
  display: grid; 
  gap: 22px;
  grid-template-columns: repeat(1, minmax(240px, 1fr));
}

@media (min-width: 680px){ 
  .packs__grid { grid-template-columns: repeat(2, 1fr); } 
}
@media (min-width: 980px){ 
  .packs__grid { grid-template-columns: repeat(3, 1fr); } 
}

.pack-card {
  background: linear-gradient(to bottom, #ffc600, #ffffff);
  border: 1px solid #dedede;
  border-radius: 18px;
  padding: 26px 18px;
  min-height: 240px;
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  justify-content: center;
  box-shadow: 0 10px 22px rgba(0,0,0,.06);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.pack-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(0,0,0,.09);
  border-color: #cfcfcf;
}

/* Brillo más fuerte para el paquete destacado */
/* Para el paquete destacado (Más vendido) */
.pack-card--featured {
  border: 3px solid #19154a;  /* Mantén el borde oscuro */
  box-shadow: 0 0 15px 5px rgba(255, 204, 0, 1);  /* Este es el brillo que recubre por completo */
  transition: all 0.3s ease;  /* Para transiciones suaves al interactuar con el paquete */
}

/* Aumentar el brillo al pasar el mouse */
.pack-card--featured:hover {
  box-shadow: 0 0 25px 10px rgba(255, 204, 0, 1);  /* Brillo más intenso cuando el mouse pasa sobre él */
  transform: scale(1.05);  /* Agranda ligeramente el paquete para resaltar más */
}


.pack-card__badge {
  margin-top: -4px; margin-bottom: 10px;
  color: #555; font-weight: 800; font-size: .95rem;
}

.pack-title {
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  font-size: clamp(1.1rem, 1.1vw + .9rem, 1.6rem);
  color: #19154a; /* Color negro para los números */
}

.pack-price {
  margin: 10px 0 18px;
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif;
  font-size: clamp(1.4rem, 2.1vw + .8rem, 2.2rem);
  font-weight: 900;
  color: #19154a; /* Color negro para el valor */
}

/* Botón reutiliza tu .btn global */
.btn { 
  display:inline-block; 
  border:0; 
  padding:14px 22px; 
  border-radius:12px;
  font-weight:800;
  text-transform:uppercase;
  text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}

.btn--primary { 
  background:#eb290e; 
  color:#19154a; 
  box-shadow:0 8px 18px rgba(0,0,0,.12); 
}

.btn--primary:hover { 
  transform: translateY(-1px); 
  box-shadow:0 12px 24px rgba(0,0,0,.16); 
}

/* Bloque personalizado */
.pack-custom { 
  grid-column: 1 / -1; /* ancho completo */ 
  background: #e9e9e9; 
  border: 1px solid #dedede; 
  border-radius: 18px; 
  padding: 30px 18px; 
  box-shadow: 0 10px 22px rgba(0,0,0,.06); 
}

.pack-custom__title { 
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif; 
  font-weight: 900; 
  letter-spacing: .02em; 
  text-transform: uppercase; 
  font-size: clamp(1rem, .9vw + .7rem, 1.4rem); 
  margin: 0 0 6px; 
  text-align: center; 
}

.pack-custom__subtitle { 
  text-align:center; 
  color:#7b7b7b; 
  margin:0 0 16px; 
}

.pack-custom__row { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
  gap: 14px; 
  flex-wrap: wrap; 
}

.input-qty { 
  width: 110px; 
  height: 44px; 
  border-radius: 10px; 
  border: 1px solid #cfcfcf; 
  background:#fff; /*boton de buscar tickets*/
  font-size: 1.05rem; 
  text-align: center; 
  outline: none; 
}

.custom-price { 
  min-width: 120px; 
  text-align: center; 
  font-weight: 800; 
  font-family: Impact, "Anton", "Oswald", system-ui, Arial, sans-serif; 
  font-size: 1.15rem; 
}

/* ===== SITE FOOTER ===== */
/* ======================= SITE FOOTER ======================= */
.site-footer {
  color: #ffc600;
  background: #19154a;
  padding: 40px 16px;
}

.site-footer .container {
  text-align: center; /* Centrar todo el contenido */
}

/* Sección de Redes Sociales y Contacto (en horizontal) */
.footer-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;  /* Espacio entre las secciones */
  margin-bottom: 20px;
}

/* ================== Redes Sociales (Instagram, TikTok, Facebook) ================== */
.footer-social {
  display: flex;
  gap: 20px;  /* Espaciado entre los iconos */
  justify-content: center;
  align-items: center;
}

.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2rem;  /* Iconos grandes */
  padding: 10px;
  color: #ffc600;
}

.footer-social svg {
  width: 40px;
  height: 40px;
}

/* ================== Sección de Contacto ================== */
.footer-ctc {
  text-align: center;
  margin-top: 20px;
}

.footer-ctc h3 {
  font-size: 1.5rem;
  font-weight: bold;
  color: #ffc600;
  margin-bottom: 10px;
}

.footer-ctc p {
  font-size: 1.1rem;
  color: #c5c5c5;
}

/* ================== Términos y Condiciones ================== */
.footer-terms {
  margin-top: 20px;
  font-size: 1rem;
  color: #ffc600 !important;
  background-color: #19154a; /* Fondo oscuro, o cambia a otro color si lo prefieres */
  padding: 10px;
}

/* ================== Subfooter ================== */
.subfooter {
  background: #19154a;
  color: #ffc600 !important;
  text-align: center;
  padding: 10px 12px;
  font-weight: 700;
}
/* ================== Redes Sociales (Instagram, TikTok, Facebook) ================== */
.footer-social {
  display: flex;
  gap: 20px;  /* Espaciado entre los iconos */
  justify-content: center;
  align-items: center;
}

.footer-social a {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;  /* Tamaño de las palabras */
  padding: 10px 15px;
  color: #ffc600;  /* Mantener color amarillo para las palabras */
  font-weight: 600;
}

.footer-social svg {
  width: 50px;  /* Tamaño uniforme para todos los iconos */
  height: 50px;  /* Tamaño uniforme para todos los iconos */
  margin-right: 12px;  /* Separar el icono de la etiqueta */
  fill: #c5c5c5;  /* Cambiar color de los iconos a blanco */
}

/* ---------------- Instagram */
.footer-igs a { 
  color: #ffc600;  /* Color amarillo para el texto */
}

/* ---------------- TikTok */
.footer-tiktok a { 
  color: #ffc600;  /* Color amarillo para el texto */
}

/* ---------------- Facebook */
.footer-facebook a { 
  color: #ffc600;  /* Color amarillo para el texto */
}



/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .footer-social {
    flex-direction: column;  /* En pantallas pequeñas, los iconos se apilan */
  }
  .footer-content {
    flex-direction: column; /* Las dos secciones (redes y contacto) se apilan en pantallas pequeñas */
    gap: 20px;
  }
}








/* ===== IG / Actividades anteriores ===== */
.section.ig-section { 
  padding: 32px 0 48px; 
}

.section.ig-section .container { 
  max-width: 1140px; 
  margin: 0 auto; 
  padding: 0 20px; 
}

/* Si en tu HTML quedó .full_width y te abre a 100vw, la neutralizamos aquí */
.section.ig-section.full_width { 
  width: auto; 
}

/* Título coherente con tu estilo */
.ig-title{
  font-size: 34px; 
  font-weight: 800; 
  letter-spacing: .5px; 
  margin: 12px 0 24px; 
  text-align: center; 
}

/* Grilla fluida: columnas que se adaptan y NUNCA se salen del container */
.ig-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); 
  gap: 24px; 
  width: 100%; 
  align-items: stretch;
}

/* Tarjeta consistente */
.ig-card{ 
  background:#ffc600; 
  border-radius:18px; 
  box-shadow:0 10px 24px rgba(0,0,0,.07); 
  overflow:hidden; 
  display:flex; 
  flex-direction:column; 
  min-width:0; 
} 

.ig-card__title{ 
  padding:12px 16px 0; 
  margin:0 0 6px; 
  font-size:18px; 
  font-weight:800; 
  line-height:1.25; 
}

/* Fallback con imagen (mock) */
/* IG cards – imagen centrada y full width */
.ig-card__media{ 
  margin: 0; /* quita margen por defecto del figure */ 
  position: relative; 
  width: 100%; 
  aspect-ratio: 16/9; 
  overflow: hidden; 
  background: #f3f3f3; 
  border-radius: 14px; /* opcional: redondeo igual que la tarjeta */ 
}

.ig-card__media img{ 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover; /* llena el contenedor */ 
  object-position: center; /* centrada (ajusta a 'center top' si prefieres) */ 
}

/* por si el embed de IG agrega márgenes */
.instagram-media.ig-embed{ 
  width: 100% !important; 
  max-width: 100% !important; 
  margin: 0 !important; 
  border: 0 !important; 
}

.ig-card__meta{ 
  padding:10px 16px 16px; 
  font-size:13px; 
  opacity:.75; 
}

/* Ajustes finos en móviles pequeños */
@media (max-width: 560px){
  .ig-title{ font-size:28px; }
  .ig-grid{ gap:16px; grid-template-columns: 1fr; } /* 1 columna en pantallas estrechas */
}

/* Cambiar el fondo de la sección ¿Cómo Participar? para que coincida con el fondo de la página */
.howto { 
  background-color: #19154a; /* Fondo negro, igual al del body */ 
  color: #ffc600; /* Texto blanco */ 
}

/* Cambiar el fondo de la lista de pasos */
.howto__list { 
  background-color: transparent; /* Fondo transparente para la lista */ 
  color: #ffc600; /* Texto blanco */ 
}

/* Estilo para el botón, mantenerlo coherente con el esquema de colores */
.howto .btn--primary { 
  background: #19154a; /* Fondo negro en el botón */ 
  color: #ffc600; /* Texto blanco en el botón */ 
  border: 1px solid #444; /* Borde oscuro para el botón */ 
}


/* ======================= PAGE SUCCESS ======================= */
/* ======================= Página Compra Completada ======================= */
.page--success {
  background: #19154a !important;
  color: #ffc600;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  min-height: 100vh;
  padding: 40px 20px 20px; /* Mantén el padding adecuado sin sobreponer */
  width: 100vw;
  margin: 0;
  text-align: center;
  padding-top: 120px !important; /* Asegura que el contenido no quede tapado por el header */
}

.page--success .flex {
  flex-direction: column;
  gap: 20px;
}

.page--success .bg-green-600,
.page--success .bg-blue-600 {
  background-color: #4CAF50;
  padding: 16px 32px;
  border-radius: 50px;
  font-size: 1.1rem;
  color: #ffc600;
  transition: background-color 0.3s ease;
  width: 80%; /* Añadir un ancho responsivo */
  max-width: 400px; /* Limitar el ancho máximo */
  margin: 10px auto;
}

.page--success .bg-blue-600 {
  background-color: #1E40AF;
}

.page--success .bg-green-600:hover,
.page--success .bg-blue-600:hover {
  background-color: #388E3C; /* Verde más oscuro */
}

.page--success .bg-blue-600:hover {
  background-color: #1E3A8A; /* Azul más oscuro */
}

.page--success h1 {
    font-size: 3.5rem !important;
    font-weight: bold !important;
    color: #ffc600 !important;
    margin-bottom: 10px !important;
    margin-top: 120px !important; /* Añadir este margen para el título */
}


.page--success .text-6xl {
  font-size: 4rem;
  font-weight: 900;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #ffcc00;
  margin-top: 20px; /* Separación entre el código de orden y la descripción */
}

/* Agregar margen para la descripción (separación entre el texto y los botones) */
.page--success p {
  margin-bottom: 20px; /* Separación adicional entre el texto y los botones */
}

/* --- HEADER --- */

/* Eliminar padding y margenes extra en el header */
.header {
  padding: 0 !important;   /* Elimina padding extra en el header */
  background: var(--header-bg) !important;  /* Mantén el fondo configurado */
  color: #fff;             /* Color de texto blanco */
  width: 100%;             /* Asegura que el header ocupe todo el ancho */
  box-sizing: border-box;  /* Evita problemas de desbordamiento */
}

/* Fila que contiene el logo y los elementos del header */
.header__row {
  display: flex !important;  /* Usa flexbox */
  justify-content: center !important; /* Centra todo el contenido horizontalmente */
  align-items: center !important;     /* Centra todo el contenido verticalmente */
  gap: 14px !important;        /* Añade espacio entre elementos */
  min-height: 120px !important; /* Asegura un mínimo de altura */
  width: 100%;                 /* Asegura que ocupe todo el ancho */
  box-sizing: border-box;      /* Evita problemas de desbordamiento */
}

/* Estilo para la imagen del logo */
.header__logo img {
  max-height: 120px !important;   /* Limita la altura máxima del logo */
  width: auto !important;         /* Mantén la relación de aspecto */
  display: block !important;      /* Asegura que el logo esté bloqueado para centrarlo */
  margin: 0 auto !important;      /* Centra la imagen */
}

/* --- TOPBAR --- */

/* Asegura que el topbar esté centrado */
.topbar {
  position: relative;
  z-index: 9; /* Asegura que el topbar esté por encima de los demás elementos pero debajo del header */
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  text-align: center;
  position: relative;
}

.topbar__msg {
  font-weight: 700;
  letter-spacing: .2px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  text-align: center;
}

/* --- HEADER RESPONSIVO --- */

/* Versión desktop: se mantiene como tú lo tenías */
/* Estilo del header y topbar */
body {
    padding-top: 120px; /* Asegura que el contenido no quede tapado por el header */
}

.header {
    padding: 0 !important;
    background: var(--header-bg) !important;
    color: #fff;
    width: 100%;
    box-sizing: border-box;
    z-index: 10;  /* Asegura que el header esté por encima del contenido */
    position: relative;  /* Fija el header sin desplazarlo */
}

.header__row {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 14px !important;
    min-height: 120px !important;
    width: 100%;
    box-sizing: border-box;
}

.header__logo img {
    max-height: 120px !important;
    width: auto !important;
    display: block !important;
    margin: 0 auto !important;
}
.topbar {
    font-size: 14px;
    position: relative;
    z-index: 9; /* Asegura que el topbar esté por encima de los demás elementos pero debajo del header */
}

.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 38px;
    text-align: center;
    position: relative;
}

/* Asegura que el topbar esté centrado */
.topbar__msg {
    font-weight: 700;
    letter-spacing: .2px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    text-align: center;
}



/* Versión móvil: evita que se recorte el logo */
@media (max-width: 600px) {
  .header__row {
    min-height: auto; /* Deja que el alto se ajuste al contenido */
    padding: 10px 0;
  }

  .header__logo img {
    max-height: none; /* Quita el límite de altura */
    width: 90%;       /* Que use casi todo el ancho disponible */
    height: auto;     /* Mantiene la proporción */
  }
}



/* =============================== */
/* NUEVO DISEÑO TARJETA PERSONALIZADA */
/* =============================== */
.custom-pack-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 4rem;
  margin-bottom: 3rem;
}

.custom-pack-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to bottom, #ffc600, #ffffff);
  border-radius: 40px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.25);
  padding: 2.5rem 3.5rem;
  max-width: 1050px;
  width: 95%;
  gap: 2.5rem;
  transition: all 0.3s ease;
  border: 3px solid #19154a;
}

.custom-pack-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 35px rgba(0,0,0,0.35);
}

.custom-pack-left {
  flex: 1.3;
  color: #19154a;
}

.custom-pack-title {
  font-size: clamp(1.8rem, 1.5vw + .5rem, 2.3rem);
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: .7rem;
}

.custom-pack-text {
  font-size: clamp(.95rem, .9vw + .3rem, 1.1rem);
  line-height: 1.6;
  font-weight: 600;
}

.custom-pack-right {
  flex: 0.9;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.input-custom-modern {
  width: 180px;
  height: 60px;
  border-radius: 15px;
  border: 2px solid #19154a;
  font-size: 1.5rem;
  font-weight: bold;
  text-align: center;
  color: #19154a;
  background: #fffaf0;
  margin-bottom: 1rem;
  transition: all 0.2s ease;
  appearance: none; /* Elimina los estilos predeterminados del navegador */
  -webkit-appearance: none; /* Para Safari */
  -moz-appearance: none; /* Para Firefox */
  padding: 0 10px; /* Asegúrate de tener algo de relleno para el texto */
}

.input-custom-modern:focus {
  outline: none;
  border-color: #eb290e;
  box-shadow: 0 0 8px rgba(235, 41, 14, 0.5);
}


.custom-pack-price {
  font-size: clamp(1.8rem, 1.4vw + .6rem, 2.3rem);
  font-weight: 900;
  color: #19154a;
  margin-bottom: 1rem;
}

.btn--modern {
  display: inline-block;
  background: linear-gradient(90deg, #eb290e, #ff6500);
  color: #fff;
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1.1rem;
  border-radius: 12px;
  padding: 0.9rem 2rem;
  box-shadow: 0 5px 12px rgba(235, 41, 14, 0.4);
  text-decoration: none;
  transition: all 0.2s ease;
}

.btn--modern:hover {
  background: linear-gradient(90deg, #ff4300, #ff9b00);
  transform: scale(1.05);
}

/* ===== Responsive ===== */
@media (max-width: 850px) {
  .custom-pack-card {
    flex-direction: column;
    text-align: center;
    padding: 2rem 1.5rem;
  }

  .custom-pack-left, .custom-pack-right {
    width: 100%;
  }
}

/* Estilo para la tarjeta de ayuda */
.help-card {
  background-color: #19154a;  /* Fondo negro igual que el de las otras tarjetas */
  color: #ffc600;  /* Texto amarillo */
  padding: 20px;
  margin-top: 20px; /* Espacio superior */
  flex: 1;  /* Aseguramos que ocupe el mismo tamaño que las demás tarjetas */
  display: flex;
  flex-direction: column;
  justify-content: space-between; /* Para distribuir el contenido */
}

/* Alineación del título de la tarjeta de ayuda */
.help-card .card__title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 15px;
}

/* Estilo para los párrafos dentro de la tarjeta */
.help-card p {
  font-size: 1rem;
  margin-bottom: 10px;
}

/* Estilo del botón de WhatsApp */
.help-card .btn--whatsapp {
  background: #25D366;  /* Fondo verde típico de WhatsApp */
  color: #fff;
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
  justify-content: center; /* Centra el botón horizontalmente */
  width: 100%; /* Asegura que el botón ocupe el espacio disponible */
}

/* Cambia el color cuando se pasa el ratón por encima */
.help-card .btn--whatsapp:hover {
  background: #128C7E;
}

/* Ajustar el tamaño del ícono de WhatsApp */
.help-card .fab.fa-whatsapp {
  font-size: 1.2rem;
}

/* Texto de ayuda */
.help-card .help-text {
  font-size: 0.9rem;
  color: #ccc;  /* Color más claro para el texto de ayuda */
}

/* Ajustes en la grilla de checkout para que todo se alinee correctamente */
.checkout__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px; /* Agregar espacio entre las tarjetas */
}

/* Ajuste de la tarjeta resumen y ayuda para que estén alineadas correctamente */
.card, .summary, .help-card {
  flex: 1; /* Aseguramos que todos los elementos dentro de la grilla se distribuyan uniformemente */
  margin-bottom: 20px; /* Espacio entre las tarjetas */
}

/* Resumen del pedido */
.summary {
  flex: 1;
  position: sticky;
  background-color: #19154a; /* Fondo oscuro */
  padding: 20px;
  border-radius: 10px;
}

/* Botón de confirmación de pedido */
.btn--primary {
  background-color: #ffc600;
  color: #19154a;
  padding: 14px 24px;
  font-size: 1rem;
  text-transform: uppercase;
  width: 100%; /* Asegura que el botón se expanda al máximo */
  border-radius: 10px;
}


/*pagina de compras*/
#checkout-page .btn--primary {
  background: linear-gradient(90deg, #1D4ED8, #2563EB); /* Fondo azul */
  color: #fff; /* Texto blanco */
  text-transform: uppercase;
  font-weight: 800;
  font-size: 1rem;
  border-radius: 10px;
  padding: 14px 24px;
  width: 100%; /* Botón al 100% de ancho */
  box-shadow: 0 5px 12px rgba(0, 0, 255, 0.4); /* Sombra azul */
  transition: all 0.2s ease;
}

#checkout-page .btn--primary:hover {
  background: linear-gradient(90deg, #1D4ED8, #3B82F6); /* Azul más oscuro al hacer hover */
  transform: scale(1.05); /* Efecto de agrandar el botón */
}

/* Cambiar el color de fondo y texto de la tarjeta */
#checkout-page .card {
  background: #19154a !important;  /* Fondo oscuro */
  color: #c5c5c5 !important;  /* Texto gris claro en vez de amarillo */
  border: 1px solid #444 !important;  /* Bordes más oscuros */
}

/* Invertir el color del texto del título */
#checkout-page .card__title {
  color: #ffc600; /* Color amarillo para el título */
}

/* Cambiar el color del botón de WhatsApp dentro de la tarjeta de ayuda */
#checkout-page .btn--whatsapp {
  background: #25D366;  /* Fondo verde típico de WhatsApp */
  color: #fff; /* Texto blanco */
  padding: 10px 20px;
  font-weight: bold;
  border-radius: 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 15px;
}

#checkout-page .btn--whatsapp:hover {
  background: #128C7E; /* Color más oscuro de WhatsApp al pasar el mouse */
}

/* Cambiar el color del texto dentro de la tarjeta de ayuda */
#checkout-page .help-card .help-text {
  color: #ccc; /* Color más claro para el texto de ayuda */
}

/* ===================== Página Compra Completada ===================== */
/* Estilos básicos para la página de compra completada */
.page--success {
    background: #19154a !important;  /* Fondo oscuro */
    padding: 40px !important;         /* Mantener el padding alrededor */
    margin: 0 !important;             /* Elimina el margen */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: 100vh !important;     /* Asegura que ocupe toda la altura */
    color: #ffc600 !important;
}

.page--success * {
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important; /* Asegura que el cálculo del tamaño sea adecuado */
}

.page--success .w-full {
    background: #19154a !important;  /* Fondo morado oscuro */
    padding: 20px !important;  /* Ajusta el relleno según sea necesario */
    border-radius: 10px !important;  /* Redondeo de bordes */
}

.page--success .bg-zinc-900 {
    background: #19154a !important; /* Cambiar el fondo a morado oscuro */
    color: #ffffff !important; /* Asegurar que el texto sea blanco */
}

/* Ajuste para el header y top bar */
body {
    padding-top: 120px !important; /* Ajusta el espacio para el header */
}

.header{
    position: relative; /* Asegura que el header se mantenga fijo */
    z-index: 10; /* Asegura que el header esté por encima del contenido */
}

/* Título principal */
.page--success h1 {
    font-size: 3.5rem !important;
    font-weight: bold !important;
    color: #ffc600 !important;
    margin-bottom: 10px !important;
    margin-top: 120px;
    
}

/* Contenedor para el código de orden */
.page--success .code-container {
    background-color: #19154a !important; /* Fondo oscuro */
    padding: 20px !important;
    border-radius: 10px !important;
    color: #fff !important;
    text-align: center !important;
}

.page--success .code-container h2 {
    font-size: 3rem !important;
    font-weight: bold !important;
}

/* Estilo para los botones de acción */
.page--success .btn-action {
    background-color: #4CAF50 !important; /* Fondo verde */
    color: #fff !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border-radius: 25px !important;
    margin-top: 20px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.page--success .btn-action:hover {
    background-color: #388E3C !important; /* Verde más oscuro */
    transform: scale(1.05) !important;
}

/* Estilo para el botón de inicio */
.page--success .btn-home {
    background-color: #1E40AF !important; /* Fondo azul */
    color: #fff !important;
    padding: 15px 30px !important;
    font-size: 1.1rem !important;
    font-weight: bold !important;
    border-radius: 25px !important;
    margin-top: 10px !important;
    text-decoration: none !important;
    display: inline-block !important;
}

.page--success .btn-home:hover {
    background-color: #1E3A8A !important; /* Azul más oscuro */
}
@media (max-width: 768px) {
  body {
    padding-top: calc(var(--site-header-height, 120px) + 20px); /* Aumenta el espacio si es necesario */
  }
}


/* forzar color del enlace de "Términos y Condiciones" en el footer */
.site-footer .footer-terms a,
.site-footer .footer-terms a:link,
.site-footer .footer-terms a:visited {
  color: #c5c5c5 !important;
  text-decoration: underline; /* o none si no quieres la línea */
}

.site-footer .footer-terms a:hover,
.site-footer .footer-terms a:active {
  color: #c5c5c5 !important; /* opcional, un amarillito más claro */
}

/* Aplica color amarillo a los enlaces dentro de la sección de contacto */
.footer-ctc a,
.footer-ctc a:link,
.footer-ctc a:visited {
  color: #ffc600 !important;  /* Color amarillo */
  text-decoration: none;  /* Si no deseas subrayado */
}

.footer-ctc a:hover,
.footer-ctc a:active {
  color: #ffe680 !important;  /* Amarillo más claro cuando el enlace es hover */
}