/* ============================================================
   MEDIA MARATÓN CALI 2026 — New Balance Colombia
   CSS personalizado
   ============================================================ */

/* ── Variables de marca ── */
:root {
  --nb-red:      #cf0a2c;
  --nb-black:    #0d0d0d;
  --nb-white:    #ffffff;
  --nb-gray-bg:  #f0f0f0;
  --nb-gray-mid: #888888;
  --nb-border:   #e0e0e0;
  --navbar-h:    64px;
}

/* ── Reset base ── */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; font-family: 'Helvetica Neue', Arial, sans-serif; }
img  { max-width: 100%; height: auto; display: block; }
a    { text-decoration: none; color: inherit; }
ul   { list-style: none; margin: 0; padding: 0; }


/* ══════════════════════════════════════
   BLOQUE 1 — BARRA DE ANUNCIO SUPERIOR
══════════════════════════════════════ */
.announcement-bar {
  background: var(--nb-gray-bg);
  border-bottom: 1px solid var(--nb-border);
  text-align: center;
  padding: 10px 1rem;
}

.announcement-bar__text {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--nb-black);
  line-height: 1.4;
}

@media (max-width: 575px) {
  .announcement-bar__text { font-size: 0.78rem; }
}


/* ══════════════════════════════════════
   BLOQUE 2 — NAVBAR
══════════════════════════════════════ */
.nb-navbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: var(--nb-white);
  border-bottom: 1px solid var(--nb-border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.nb-navbar__inner {
  display: flex;
  align-items: center;
  height: var(--navbar-h);
  padding: 0 24px;
  gap: 0;
  max-width: 1600px;
  margin: 0 auto;
}

/* ── Logo ── */
.nb-navbar__logo {
  flex-shrink: 0;
  margin-right: 32px;
  display: flex;
  align-items: center;
}

.nb-navbar__logo img {
  height: 44px;
  width: auto;
}

/* ── Menú desktop ── */
.nb-navbar__menu {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 1;
}

.nb-navbar__link {
  display: block;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--nb-black);
  letter-spacing: 0.01em;
  white-space: nowrap;
  position: relative;
  transition: color 0.15s;
}

.nb-navbar__link::after {
  content: '';
  position: absolute;
  bottom: 0; left: 12px; right: 12px;
  height: 2px;
  background: var(--nb-black);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}

.nb-navbar__link:hover { color: var(--nb-black); }
.nb-navbar__link:hover::after { transform: scaleX(1); }

/* ── Acciones derecha ── */
.nb-navbar__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Búsqueda */
.nb-navbar__search {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 3px;
  overflow: hidden;
  height: 36px;
}

.nb-navbar__search-input {
  border: none;
  outline: none;
  padding: 0 10px;
  font-size: 0.85rem;
  color: var(--nb-black);
  width: 160px;
  background: transparent;
}

.nb-navbar__search-input::placeholder { color: #aaa; }

.nb-navbar__search-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  color: var(--nb-black);
  display: flex;
  align-items: center;
  height: 36px;
}

.nb-navbar__search-btn:hover { color: var(--nb-red); }

/* Cuenta */
.nb-navbar__account {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--nb-black);
  white-space: nowrap;
  transition: color 0.15s;
}

.nb-navbar__account:hover { color: var(--nb-red); }

/* Carrito */
.nb-navbar__cart {
  position: relative;
  display: flex;
  align-items: center;
  color: var(--nb-black);
  transition: color 0.15s;
}

.nb-navbar__cart:hover { color: var(--nb-red); }

.nb-navbar__cart-count {
  position: absolute;
  top: -7px; right: -7px;
  background: var(--nb-red);
  color: var(--nb-white);
  font-size: 0.6rem;
  font-weight: 700;
  min-width: 16px; height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* Hamburger (solo mobile) */
.nb-navbar__hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  width: 32px;
  height: 32px;
}

.nb-navbar__hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--nb-black);
  border-radius: 2px;
  transition: all 0.25s ease;
  transform-origin: center;
}

/* Hamburger activo → X */
.nb-navbar__hamburger.is-open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nb-navbar__hamburger.is-open span:nth-child(2) {
  opacity: 0;
}
.nb-navbar__hamburger.is-open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Menú mobile drawer ── */
.nb-navbar__mobile-menu {
  display: none;
  background: var(--nb-white);
  border-top: 1px solid var(--nb-border);
  padding: 8px 0 16px;
  /* Animación slide-down */
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}

.nb-navbar__mobile-menu.is-open {
  max-height: 500px;
  padding: 8px 0 16px;
}

.nb-navbar__mobile-list li a {
  display: block;
  padding: 12px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--nb-black);
  border-bottom: 1px solid var(--nb-border);
  transition: background 0.15s, color 0.15s;
}

.nb-navbar__mobile-list li a:hover {
  background: var(--nb-gray-bg);
  color: var(--nb-red);
}

.nb-navbar__mobile-divider {
  height: 8px;
  background: var(--nb-gray-bg);
  border-top: 1px solid var(--nb-border);
  border-bottom: 1px solid var(--nb-border);
}


/* ══════════════════════════════════════
   RESPONSIVE — NAVBAR
══════════════════════════════════════ */

/* Tablet: ocultar texto de cuenta, achicar búsqueda */
@media (max-width: 1024px) {
  .nb-navbar__account-text { display: none; }
  .nb-navbar__search-input { width: 120px; }
}

/* Mobile: ocultar menú desktop y búsqueda, mostrar hamburger */
@media (max-width: 768px) {
  .nb-navbar__menu        { display: none; }
  .nb-navbar__search      { display: none; }
  .nb-navbar__account-text { display: none; }
  .nb-navbar__hamburger   { display: flex; }
  .nb-navbar__mobile-menu { display: block; }

  .nb-navbar__inner { padding: 0 16px; }
  .nb-navbar__logo  { margin-right: auto; }
  .nb-navbar__actions { gap: 12px; }
}


/* ══════════════════════════════════════════
   BLOQUE 3 — HERO BANNER
   Imagen de fondo con texto centrado encima
══════════════════════════════════════════ */
.hero-banner {
  position: relative;
  width: 100%;
  /* Alto desktop: ratio ~40% de 1500px = 600px */
  height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Capa de imagen de fondo */
.hero-banner__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* Zoom sutil al cargar */
  animation: heroZoom 8s ease forwards;
}

@keyframes heroZoom {
  from { transform: scale(1.04); }
  to   { transform: scale(1); }
}

/* Imagen mobile: oculta por defecto, visible en mobile */
.hero-banner__bg--mobile {
  display: none;
}

/* Overlay: gradiente oscuro en el centro para leer el texto */
.hero-banner__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}

/* Texto encima */
.hero-banner__content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #ffffff;
  padding: 0 1rem;
}

/* "new balance" — tipografía suave, peso ligero como en el diseño */
.hero-banner__brand {
  font-size: clamp(1.6rem, 4vw, 2.8rem);
  font-weight: 300;
  letter-spacing: 0.04em;
  margin: 0 0 8px;
  line-height: 1.1;
  text-transform: lowercase;
}

/* "Media maratón Cali" */
.hero-banner__title {
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  font-weight: 700;
  letter-spacing: 0.01em;
  margin: 0 0 10px;
  line-height: 1.15;
}

/* "21K – 10K – 5K" */
.hero-banner__distances {
  font-size: clamp(1.3rem, 3.5vw, 2.2rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  margin: 0;
  line-height: 1.2;
}

/* ── Responsive ── */

/* Tablet (≤992px): bajar altura un poco */
@media (max-width: 992px) {
  .hero-banner { height: 480px; }
}

/* Mobile (≤768px): cambiar a imagen mobile, ajustar altura */
@media (max-width: 768px) {
  .hero-banner {
    height: 420px;
    align-items: flex-end;
    padding-bottom: 40px;
  }

  /* Ocultar imagen desktop, mostrar mobile */
  .hero-banner__bg:not(.hero-banner__bg--mobile) { display: none; }
  .hero-banner__bg--mobile { display: block; }
}

/* Mobile pequeño (≤480px) */
@media (max-width: 480px) {
  .hero-banner {
    height: 360px;
    padding-bottom: 32px;
  }
}


/* ══════════════════════════════════════════
   BLOQUE 4 — FECHA + CTA
══════════════════════════════════════════ */
.cta-section {
  background: #f5f5f5;
  text-align: center;
  padding: 56px 1rem;
}

.cta-section__date {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 800;
  color: var(--nb-black);
  letter-spacing: -0.01em;
  margin: 0 0 28px;
  line-height: 1.1;
}

.cta-section__btn {
  display: inline-block;
  background: var(--nb-red);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 52px;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}

.cta-section__btn:hover {
  background: #a0081f;
  color: #fff;
  transform: translateY(-1px);
}

.cta-section__btn:active {
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 575px) {
  .cta-section          { padding: 40px 1rem; }
  .cta-section__btn     { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
}


/* ══════════════════════════════════════════
   BLOQUE KIT — BANNER KIT DEL CORREDOR
══════════════════════════════════════════ */
.kit-banner {
  position: relative;
  overflow: hidden;
  padding: 0;
}

.kit-banner__bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg,
      #0d0d2b 0%,
      #1a1040 20%,
      #2d1060 38%,
      #1a0820 55%,
      #3a0a0a 72%,
      #6b1010 85%,
      #8c1a00 100%
    );
  z-index: 0;
}

/* patrón de ruido sutil encima del gradiente */
.kit-banner__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.06'/%3E%3C/svg%3E");
  background-size: 300px 300px;
  opacity: 0.18;
  pointer-events: none;
}

.kit-banner__inner {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 2rem 0;
  display: flex;
  align-items: center;
  gap: 3rem;
}

/* ── Texto lado izquierdo ── */
.kit-banner__text {
  flex: 0 0 42%;
  color: #fff;
  padding-bottom: 60px;
}

.kit-banner__eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #e30613;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.kit-banner__eyebrow::before {
  content: '';
  display: inline-block;
  width: 28px;
  height: 2px;
  background: #e30613;
  flex-shrink: 0;
}

.kit-banner__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0 0 18px;
  color: #fff;
}

.kit-banner__desc {
  font-size: 0.97rem;
  line-height: 1.7;
  color: rgba(255,255,255,0.78);
  margin: 0 0 32px;
  max-width: 380px;
}

.kit-banner__btn {
  display: inline-block;
  background: #e30613;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 36px;
  border: none;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 4px 24px rgba(227,6,19,0.35);
}

.kit-banner__btn:hover {
  background: #b5000f;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(227,6,19,0.45);
  color: #fff;
}

/* ── Imagen lado derecho ── */
.kit-banner__img-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.kit-banner__img {
  width: 100%;
  max-width: 620px;
  height: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 -8px 40px rgba(0,0,0,0.5));
  transform: translateY(4px);
}

/* ── Responsive tablet ── */
@media (max-width: 900px) {
  .kit-banner__inner {
    flex-direction: column;
    padding: 52px 1.5rem 0;
    text-align: center;
    gap: 2rem;
  }
  .kit-banner__text {
    flex: none;
    padding-bottom: 0;
  }
  .kit-banner__eyebrow {
    justify-content: center;
  }
  .kit-banner__desc {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .kit-banner__img-wrap {
    width: 100%;
  }
  .kit-banner__img {
    max-width: 480px;
  }
}

/* ── Responsive mobile ── */
@media (max-width: 575px) {
  .kit-banner__inner {
    padding: 44px 1rem 0;
    gap: 1.5rem;
  }
  .kit-banner__title {
    font-size: 1.8rem;
  }
  .kit-banner__btn {
    display: block;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    text-align: center;
  }
  .kit-banner__img {
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════
   BLOQUE 5 — DESCRIPCIÓN DEL EVENTO
══════════════════════════════════════════ */
.event-desc {
  background: #fff;
  text-align: center;
  padding: 72px 1rem 64px;
}

.event-desc__title {
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 800;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 12px;
}

.event-desc__distances {
  font-size: clamp(1.3rem, 3vw, 2rem);
  font-weight: 700;
  color: var(--nb-black);
  letter-spacing: 0.04em;
  margin: 0 0 32px;
  line-height: 1.2;
}

.event-desc__body {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 400;
  color: #333;
  line-height: 1.9;
  max-width: 760px;
  margin: 0 auto;
}

/* Responsive */
@media (max-width: 768px) {
  .event-desc { padding: 48px 1.5rem 40px; }
  .event-desc__body { font-size: 1.05rem; line-height: 1.8; }
}

@media (max-width: 575px) {
  .event-desc { padding: 36px 1.2rem 32px; }
  .event-desc__body { font-size: 1rem; line-height: 1.75; }
}


/* ══════════════════════════════════════════
   BLOQUE 6 — VIDEO YOUTUBE
══════════════════════════════════════════ */
.video-section {
  width: 100%;
  background: #000;
  line-height: 0;   /* elimina espacio bajo la imagen */
}

/* Poster: imagen + botón play encima */
.video-section__poster {
  position: relative;
  width: 100%;
  cursor: pointer;
}

.video-section__img {
  width: 100%;
  height: auto;
  display: block;
  /* Altura máxima para que no sea demasiado alto en pantallas grandes */
  max-height: 85vh;
  object-fit: cover;
  transition: filter 0.2s ease;
}

.video-section__poster:hover .video-section__img {
  filter: brightness(0.88);
}

/* Botón play centrado */
.video-section__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  border: 3px solid rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  /* Sin outline feo al hacer click */
  outline: none;
}

.video-section__play:hover {
  background: rgba(0, 0, 0, 0.75);
  border-color: #fff;
  transform: translate(-50%, -50%) scale(1.1);
}

.video-section__play svg {
  margin-left: 4px; /* centrado óptico del triángulo */
}

/* iframe una vez que carga */
.video-section__frame {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* ratio 16:9 */
  height: 0;
  overflow: hidden;
  background: #000;
}

.video-section__frame iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Mobile */
@media (max-width: 768px) {
  .video-section__play {
    width: 56px;
    height: 56px;
  }
  .video-section__play svg {
    width: 28px;
    height: 28px;
  }
}


/* ══════════════════════════════════════════
   BLOQUE 7 — TABLA DE PRECIOS
══════════════════════════════════════════ */
.pricing-section {
  background: #fff;
  padding: 56px 1rem 64px;
  text-align: center;
}

/* Botón superior */
.pricing-section__top {
  margin-bottom: 32px;
}

.pricing-btn {
  display: inline-block;
  background: var(--nb-red);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 13px 48px;
  transition: background 0.18s ease, transform 0.18s ease;
}

.pricing-btn:hover {
  background: #a0081f;
  color: #fff;
  transform: translateY(-1px);
}

/* Título */
.pricing-section__title {
  font-size: clamp(1.8rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0 0 36px;
}

/* Tabla */
.pricing-table {
  width: 100%;
  border-collapse: collapse;
  /* Centrar tabla con ancho máximo */
  max-width: 900px;
  margin: 0 auto;
}

/* Cabecera: fondo rojo, texto blanco */
.pricing-table thead th {
  background: var(--nb-red);
  color: #fff;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 700;
  text-align: center;
  padding: 16px 24px;
  border: 2px solid #fff;
}

/* Celda vacía esquina superior izquierda */
.pricing-table__empty {
  background: #fff !important;
  border: none !important;
}

/* Filas */
.pricing-table tbody tr {
  border-bottom: 2px solid #e0e0e0;
}

/* Columna etapa: fondo rojo, texto blanco */
.pricing-table__stage {
  background: var(--nb-red);
  color: #fff;
  text-align: center;
  padding: 18px 20px;
  border-right: 2px solid #fff;
  min-width: 180px;
}

.stage-name {
  display: block;
  font-size: clamp(1.1rem, 2vw, 1.5rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 4px;
}

.stage-dates {
  display: block;
  font-size: 0.72rem;
  font-weight: 400;
  opacity: 0.92;
  line-height: 1.4;
}

/* Celdas de precio */
.pricing-table tbody td:not(.pricing-table__stage) {
  text-align: center;
  font-size: clamp(1.1rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--nb-black);
  padding: 18px 12px;
  border-right: 2px solid #e0e0e0;
  background: #fff;
}

.pricing-table tbody td:last-child {
  border-right: none;
}

/* ── Responsive ── */

/* Tablet: achicar un poco los paddings */
@media (max-width: 768px) {
  .pricing-table__stage   { padding: 14px 12px; min-width: 130px; }
  .pricing-table thead th { padding: 12px 10px; }
  .pricing-table tbody td:not(.pricing-table__stage) { padding: 14px 8px; }
}

/* Mobile: scroll horizontal en la tabla (Bootstrap table-responsive ya lo hace)
   + reducir fuentes */
@media (max-width: 575px) {
  .pricing-section          { padding: 36px 0.5rem 48px; }
  .pricing-btn              { display: block; width: 100%; max-width: 320px; margin: 0 auto; }
  .stage-name               { font-size: 1rem; }
  .stage-dates              { font-size: 0.65rem; }
  .pricing-table tbody td:not(.pricing-table__stage) { font-size: 1rem; padding: 12px 8px; }
  .pricing-table thead th   { font-size: 1rem; padding: 10px 8px; }
}


/* ══════════════════════════════════════════
   BLOQUE 8 — INFORMACIÓN IMPORTANTE
══════════════════════════════════════════ */
.info-section {
  background: #fff;
  padding: 64px 1rem 72px;
  text-align: center;
}

/* Encabezado */
.info-section__header {
  margin-bottom: 52px;
}

.info-section__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.1;
}

.info-section__subtitle {
  font-size: clamp(0.95rem, 2vw, 1.1rem);
  font-weight: 700;
  color: var(--nb-black);
  margin: 0;
  line-height: 1.4;
}

/* Cards */
.info-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 8px;
}

/* Ícono */
.info-card__icon {
  font-size: 3.2rem;
  color: #2b2b2b;
  margin-bottom: 18px;
  line-height: 1;
}

/* Label (FECHA, DISTANCIA…) */
.info-card__label {
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-black);
  margin: 0 0 10px;
}

/* Texto descriptivo */
.info-card__text {
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  color: #333;
  line-height: 1.8;
  margin: 0;
}

.info-card__text em {
  font-style: normal;
  font-size: 0.82rem;
  color: #777;
}

/* Separador vertical entre columnas en desktop */
.info-card-col + .info-card-col .info-card {
  border-left: 1px solid #e8e8e8;
}

/* ── Responsive ── */
@media (max-width: 991px) {
  /* En tablet quitar borde lateral */
  .info-card-col + .info-card-col .info-card {
    border-left: none;
  }
}

@media (max-width: 575px) {
  .info-section         { padding: 40px 1rem 48px; }
  .info-section__header { margin-bottom: 36px; }
  .info-card__icon      { font-size: 2.4rem; }
  .info-card__label     { font-size: 0.82rem; }
  .info-card__text      { font-size: 0.95rem; }
  /* 2 columnas en mobile */
  .info-card-col        { text-align: center; }
}


/* ══════════════════════════════════════════
   BLOQUE 9 — MAPA DEL RECORRIDO
══════════════════════════════════════════ */
.map-section {
  background: #f5f5f5;
  padding: 64px 0 72px;
}

/* Encabezado: izquierda + botón derecha */
.map-section__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.map-section__header-left { flex: 1; min-width: 260px; }
.map-section__header-right { flex-shrink: 0; display: flex; align-items: flex-start; padding-top: 8px; }

/* Eyebrow: línea roja + texto */
.map-section__eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 8px;
}

.map-section__eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--nb-red);
  flex-shrink: 0;
}

/* Título */
.map-section__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0 0 12px;
  line-height: 1.05;
}

.text-red { color: var(--nb-red); }

.map-section__desc {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: #444;
  line-height: 1.75;
  margin: 0;
  max-width: 520px;
}

/* Botón descargar GPX */
.map-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 14px 28px;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.map-download-btn:hover {
  background: #a0081f;
  color: #fff;
  transform: translateY(-2px);
}

/* Dropdown descarga GPX (apertura/cierre y posición los maneja Bootstrap) */
.gpx-dropdown {
  position: relative;
  display: inline-block;
}
.gpx-dropdown__toggle {
  cursor: pointer;
  border: none;
}
.gpx-dropdown__chevron {
  font-size: 0.65em;
  margin-left: 6px;
  transition: transform 0.25s ease;
}
.gpx-dropdown__toggle[aria-expanded="true"] .gpx-dropdown__chevron {
  transform: rotate(180deg);
}
/* Skin del menú de Bootstrap para que combine con el diseño */
.gpx-dropdown .dropdown-menu {
  min-width: 100%;
  margin-top: 8px;
  padding: 6px;
  background: #fff;
  border: 1px solid rgba(29, 29, 27, 0.1);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
  z-index: 1200; /* por encima de los controles de Leaflet (~1000) */
}
.gpx-dropdown .dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  color: #1d1d1b;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 5px;
  white-space: nowrap;
  transition: background 0.15s ease;
}
.gpx-dropdown .dropdown-item:hover,
.gpx-dropdown .dropdown-item:focus-visible,
.gpx-dropdown .dropdown-item:active {
  background: #f2f2f2;
  color: var(--nb-red);
}
.gpx-dropdown__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Mapa */
.map-container {
  width: 100%;
  height: 420px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  background: #e8e8e8;
}

@media (max-width: 768px) {
  .map-container { height: 300px; }
}

/* Leyenda debajo del mapa */
.map-legend {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #333;
}

.map-legend__item {
  display: flex;
  align-items: center;
  gap: 7px;
}

.map-legend__line {
  display: inline-block;
  width: 28px;
  height: 4px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* Aviso servidor */
.map-notice {
  margin-top: 14px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  padding: 10px 16px;
  font-size: 0.8rem;
  color: #6d4c00;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Ocultar aviso si el mapa cargó bien */
.map-notice.hidden { display: none; }

@media (max-width: 768px) {
  .map-section__header { flex-direction: column; }
  .map-section__header-right { width: 100%; }
  .map-download-btn { width: 100%; justify-content: center; }
  .gpx-dropdown { width: 100%; }
  .gpx-dropdown .dropdown-menu { width: 100%; }
  .gpx-dropdown .dropdown-item { justify-content: center; padding: 12px 16px; }
  .map-legend { gap: 16px; }
}


/* ══════════════════════════════════════════
   ANIMACIONES DE SCROLL (reveal)
   Clases: reveal-up  reveal-left  reveal-right
   Se activan cuando el elemento entra en viewport
══════════════════════════════════════════ */

/* Estado inicial: invisible + desplazado */
.reveal-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal-right {
  opacity: 0;
  transform: translateX(36px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* Estado visible (añadido por JS)
   IMPORTANTE: usar transform:none (y no translate(0,0)) para que el
   elemento NO conserve un stacking context al terminar la animación.
   Con translate(0,0) los dropdowns hijos quedaban atrapados detrás
   de secciones posteriores (filtros, mapa Leaflet) en responsive. */
.reveal-up.is-visible,
.reveal-left.is-visible,
.reveal-right.is-visible {
  opacity: 1;
  transform: none;
}

/* Delay escalonado para hijos dentro de un grid */
.reveal-up:nth-child(2) { transition-delay: 0.1s; }
.reveal-up:nth-child(3) { transition-delay: 0.2s; }
.reveal-up:nth-child(4) { transition-delay: 0.3s; }
.reveal-up:nth-child(5) { transition-delay: 0.4s; }


/* ══════════════════════════════════════════
   BLOQUE 10 — NEWSLETTER BAR
══════════════════════════════════════════ */
.newsletter-bar {
  background: #000;
  padding: 22px 1rem;
}

.newsletter-bar__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}

.newsletter-bar__text {
  color: #fff;
  font-size: 0.95rem;
  font-weight: 400;
  margin: 0;
  letter-spacing: 0.01em;
}

.newsletter-bar__btn {
  background: var(--nb-red);
  color: #fff;
  border: none;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 13px 36px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.newsletter-bar__btn:hover {
  background: #a0081f;
  transform: translateY(-1px);
}

@media (max-width: 575px) {
  .newsletter-bar__inner  { flex-direction: column; gap: 14px; }
  .newsletter-bar__btn    { width: 100%; max-width: 300px; }
}


/* ══════════════════════════════════════════
   SWEETALERT2 — estilos personalizados
   del modal de newsletter
══════════════════════════════════════════ */
.swal-newsletter .swal2-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0d0d0d;
  padding-bottom: 4px;
}

.swal-newsletter .swal2-html-container {
  font-size: 0.88rem;
  color: #555;
  margin-top: 4px;
}

/* Input de correo */
.swal-newsletter-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 0.92rem;
  border: 1.5px solid #ddd;
  border-radius: 6px;
  margin-top: 14px;
  outline: none;
  transition: border-color 0.18s;
  box-sizing: border-box;
}

.swal-newsletter-input:focus {
  border-color: var(--nb-red);
}

/* Checkbox términos */
.swal-terms-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  text-align: left;
}

.swal-terms-wrap input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--nb-red);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}

.swal-terms-wrap label {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.5;
  cursor: pointer;
}

.swal-terms-wrap a {
  color: var(--nb-red);
  text-decoration: underline;
}

/* Botón confirmar */
.swal2-confirm.swal-confirm-btn {
  background: var(--nb-red) !important;
  border-radius: 6px !important;
  font-weight: 700 !important;
  letter-spacing: 0.03em !important;
  padding: 11px 36px !important;
  font-size: 0.9rem !important;
  box-shadow: none !important;
}

.swal2-confirm.swal-confirm-btn:hover {
  background: #a0081f !important;
}

/* Botón cancelar */
.swal2-cancel.swal-cancel-btn {
  background: #f0f0f0 !important;
  color: #333 !important;
  border-radius: 6px !important;
  font-size: 0.88rem !important;
  box-shadow: none !important;
}


/* ══════════════════════════════════════════
   BLOQUE 11 — FOOTER
══════════════════════════════════════════ */
.site-footer {
  background: var(--nb-black);
  border-top: none;
  padding: 56px 0 0;
}

/* Título de cada columna */
.footer-col__title {
  font-size: 0.88rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: 0.02em;
  margin: 0 0 20px;
}

/* Links de cada columna */
.footer-col__links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col__links li {
  margin-bottom: 12px;
}

.footer-col__links a {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.15s;
  line-height: 1.4;
}

.footer-col__links a:hover {
  color: #fff;
}

/* Logo */
.footer-col__logo {
  margin-bottom: 16px;
}

.footer-col__logo img {
  height: 38px;
  width: auto;
}

/* Descripción */
.footer-col__desc {
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.75;
  margin: 0 0 20px;
}

/* Redes sociales */
.footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.footer-social__link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: rgba(255,255,255,0.7);
  font-size: 1.15rem;
  text-decoration: none;
  transition: color 0.15s ease, transform 0.15s ease;
}

.footer-social__link:hover {
  color: #fff;
  transform: translateY(-2px);
}

/* Línea inferior */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  border-top: 1px solid rgba(255,255,255,0.1);
  margin-top: 48px;
  padding: 18px 0;
}

.footer-bottom p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  margin: 0;
}

.footer-bottom__links {
  display: flex;
  gap: 20px;
}

.footer-bottom__links a {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-bottom__links a:hover {
  color: #fff;
}

/* ── Responsive footer ── */

/* Tablet (≤991px): 2 columnas */
@media (max-width: 991px) {
  .site-footer { padding: 48px 0 0; }

  /* Columnas: logo+redes ocupa todo el ancho, contacto y nav se reparten */
  .site-footer .col-lg-4:first-child {
    order: 1;
  }
  .site-footer .col-lg-4:nth-child(2) {
    order: 2;
  }
  .site-footer .col-lg-4:last-child {
    order: 3;
  }
}

/* Mobile (≤767px): 1 columna, centrado */
@media (max-width: 767px) {
  .site-footer {
    padding: 40px 0 0;
    text-align: center;
  }

  /* Logo centrado */
  .footer-col__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
  }

  /* Descripción centrada */
  .footer-col__desc {
    text-align: center;
  }

  /* Redes sociales centradas */
  .footer-social {
    justify-content: center;
  }

  /* Contacto: íconos y texto alineados al centro */
  .footer-col__contact-list {
    align-items: flex-start;
    display: inline-flex;
    flex-direction: column;
    text-align: left;
    margin: 0 auto;
  }

  /* Footer bottom: apilado */
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 8px;
    margin-top: 32px;
  }

  .footer-bottom__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }
}

/* Mobile pequeño (≤575px) */
@media (max-width: 575px) {
  .site-footer { padding: 32px 0 0; }

  .footer-col__title {
    font-size: 0.82rem;
    margin-bottom: 12px;
  }

  .footer-col__desc {
    font-size: 0.82rem;
  }

  .footer-col__contact-list li {
    font-size: 0.82rem;
    gap: 8px;
  }

  .footer-col__links a {
    font-size: 0.82rem;
  }

  .footer-bottom p {
    font-size: 0.72rem;
  }

  .footer-bottom__links a {
    font-size: 0.72rem;
  }
}


/* ══════════════════════════════════════════
   BLOQUE 12 — BARRA INFERIOR LEGAL
══════════════════════════════════════════ */
.footer-legal {
  background: #f5f5f5;
  border-top: 1px solid #e8e8e8;
  padding: 28px 1rem 24px;
  text-align: center;
}

/* Logos de pago */
.footer-legal__payments {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 18px;
}

.payment-icon {
  width: 48px;
  height: 32px;
  border-radius: 4px;
  display: block;
  flex-shrink: 0;
}

/* Links legales */
.footer-legal__links {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 16px;
}

.footer-legal__links a {
  font-size: 0.82rem;
  color: var(--nb-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0 14px;
  border-right: 1px solid #ccc;
  line-height: 1;
  transition: color 0.15s;
}

.footer-legal__links a:last-child {
  border-right: none;
}

.footer-legal__links a:hover {
  color: var(--nb-red);
}

/* Datos empresa */
.footer-legal__company {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.6;
  margin: 0 0 6px;
}

/* Copyright */
.footer-legal__copy {
  font-size: 0.78rem;
  color: #666;
  margin: 0;
}

/* Responsive */
@media (max-width: 575px) {
  .footer-legal__links a {
    padding: 4px 10px;
    border-right: none;
    display: block;
    width: 100%;
    text-align: center;
  }
  .footer-legal__links {
    flex-direction: column;
    gap: 4px;
  }
  .footer-legal__company {
    font-size: 0.72rem;
  }
}


/* ══════════════════════════════════════════
   TIPOGRAFÍA GLOBAL — Questrial (Google Fonts)
   Aplicada a todo el documento
══════════════════════════════════════════ */
body,
h1, h2, h3, h4, h5, h6,
p, a, span, li, td, th,
input, button, select, textarea {
  font-family: 'Questrial', sans-serif;
}

/* Ajustes finos con Questrial (una sola weight: 400)
   Para negritas usamos font-weight + letter-spacing */
.announcement-bar__text,
.nb-navbar__link,
.cta-section__date,
.event-desc__title,
.event-desc__distances,
.pricing-section__title,
.info-section__title,
.map-section__title,
.footer-col__title {
  /* Questrial no tiene bold nativo — simulamos con letter-spacing */
  letter-spacing: -0.01em;
}

/* Botones: Questrial con letter-spacing ligeramente más amplio */
.cta-section__btn,
.pricing-btn,
.newsletter-bar__btn,
.map-download-btn,
.nb-navbar__account-text {
  letter-spacing: 0.04em;
}


/* ══════════════════════════════════════════
   BOTÓN FLOTANTE WHATSAPP
══════════════════════════════════════════ */
.whatsapp-float {
  position: fixed;
  bottom: 28px;
  right: 24px;
  z-index: 9999;
  width: 56px;
  height: 56px;
  background: #25D366;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(37, 211, 102, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-decoration: none;
  /* Entrada animada al cargar */
  animation: waBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s both;
}

@keyframes waBounce {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; transform: scale(1); }
}

.whatsapp-float:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37, 211, 102, 0.6);
}

.whatsapp-float svg {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}

/* Tooltip al hacer hover */
.whatsapp-float__tooltip {
  position: absolute;
  right: 66px;
  top: 50%;
  transform: translateY(-50%);
  background: #111;
  color: #fff;
  font-size: 0.75rem;
  white-space: nowrap;
  padding: 6px 12px;
  border-radius: 6px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* Flecha del tooltip */
.whatsapp-float__tooltip::after {
  content: '';
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  border: 5px solid transparent;
  border-left-color: #111;
}

.whatsapp-float:hover .whatsapp-float__tooltip {
  opacity: 1;
}

/* Mobile: un poco más pequeño */
@media (max-width: 575px) {
  .whatsapp-float {
    width: 50px;
    height: 50px;
    bottom: 18px;
    right: 16px;
  }
  .whatsapp-float svg    { width: 26px; height: 26px; }
  .whatsapp-float__tooltip { display: none; }
}


/* ══════════════════════════════════════════
   REVISIÓN GENERAL — ajustes finos
══════════════════════════════════════════ */

/* Suavizar scroll de toda la página */
html {
  scroll-behavior: smooth;
  /* Offset global para el navbar sticky:
     todo anchor #id respeta este espacio al hacer scroll */
  scroll-padding-top: var(--navbar-h);
}

/* Margen individual por sección — respaldo para navegadores más antiguos */
section[id] {
  scroll-margin-top: var(--navbar-h);
}

/* Asegurar que las imágenes no desborden */
img { max-width: 100%; height: auto; display: block; }

/* Remover outline feo en botones pero mantener accesibilidad */
button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--nb-red);
  outline-offset: 3px;
}

/* Separación coherente entre secciones:
   todas las section tienen mínimo padding vertical */
section {
  position: relative;
}

/* Asegurar que el footer-legal quede pegado al fondo */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-footer,
.footer-legal {
  margin-top: auto;
}


/* ══════════════════════════════════════════
   MEJORAS V4 — Media Maratón Cali 2026
   ① Countdown  ② Etapa activa  ③ Mapa mejorado
   ④ Patrocinadores  ⑤ Responsive fixes
══════════════════════════════════════════ */


/* ── ① COUNTDOWN ── */
.cta-countdown {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 0 0 32px;
}

.cta-countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 72px;
  background: var(--nb-black);
  border-radius: 8px;
  padding: 12px 8px 8px;
}

.cta-countdown__num {
  font-size: clamp(1.8rem, 5vw, 2.8rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -0.02em;
  min-width: 2ch;
  text-align: center;
}

.cta-countdown__label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

.cta-countdown__sep {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  color: var(--nb-black);
  margin: 0 2px;
  padding-bottom: 12px;
  align-self: center;
}

@media (max-width: 480px) {
  .cta-countdown__unit  { min-width: 58px; padding: 10px 6px 7px; }
  .cta-countdown__num   { font-size: 1.7rem; }
  .cta-countdown__sep   { font-size: 1.4rem; }
}


/* ── ② ETAPA ACTIVA — eliminada por petición del usuario ── */


/* ── ③ MAPA MEJORADO ── */

/* Filtros de distancia */
.map-filters {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.map-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 22px;
  border: 2px solid #ddd;
  background: #fff;
  color: #333;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.18s ease;
  font-family: 'Questrial', sans-serif;
}

.map-filter-btn:hover {
  border-color: var(--nb-black);
  background: var(--nb-black);
  color: #fff;
}

.map-filter-btn--active {
  background: var(--nb-black);
  border-color: var(--nb-black);
  color: #fff;
}

.map-filter-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Layout mapa + panel */
.map-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: stretch;
}

/* Panel lateral */
.map-panel {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 480px;
}

.map-panel__item {
  display: none;
  flex-direction: column;
  padding: 24px 20px;
  flex: 1;
}

.map-panel__item--active {
  display: flex;
}

.map-panel__badge {
  display: inline-block;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 900;
  padding: 6px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  width: fit-content;
  letter-spacing: -0.02em;
}

.map-panel__title {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--nb-black);
  margin: 0 0 4px;
  line-height: 1.2;
}

.map-panel__subtitle {
  font-size: 0.78rem;
  color: #888;
  margin: 0 0 16px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.map-panel__list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.map-panel__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.82rem;
  color: #333;
  line-height: 1.4;
}

.map-panel__list li i {
  color: var(--nb-red);
  width: 14px;
  flex-shrink: 0;
}

.map-panel__distances {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.map-panel__chip {
  color: #fff;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 100px;
}

/* Mapa más alto */
.map-container {
  height: 480px !important;
  border-radius: 8px !important;
  touch-action: pan-y;
}

/* Leyenda interactiva */
.map-legend--interactive {
  margin-top: 14px;
}

.map-legend__item--btn {
  background: none;
  border: 2px solid #e0e0e0;
  border-radius: 100px;
  padding: 5px 14px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 600;
  color: #999;
  font-family: 'Questrial', sans-serif;
  transition: all 0.18s ease;
  display: flex;
  align-items: center;
  gap: 6px;
}

.map-legend__item--btn.is-active {
  color: #333;
  border-color: #bbb;
}

.map-legend__item--btn:not(.is-active) .map-legend__line {
  opacity: 0.25;
}

.map-legend__item--btn:not(.is-active) {
  text-decoration: line-through;
  color: #bbb;
}

/* Responsive mapa */
@media (max-width: 900px) {
  .map-layout {
    grid-template-columns: 1fr;
  }
  .map-panel {
    min-height: auto;
    order: 2;        /* panel va debajo del mapa en mobile */
  }
  #mapa-recorrido {
    order: 1;
  }
  .map-container {
    height: 380px !important;
  }
}

@media (max-width: 575px) {
  .map-container  { height: 320px !important; }
  .map-filters    { gap: 8px; }
  .map-filter-btn { padding: 7px 14px; font-size: 0.78rem; }
}


/* ── ④ PATROCINADORES — 4 niveles: Oficial / Principal / Apoyo / Aliados ── */
.sponsors-section {
  background: #fff;
  padding: 64px 1rem 72px;
  text-align: center;
  border-top: 1px solid #eee;
}

.sponsors-section__header {
  margin-bottom: 48px;
}

.sponsors-section__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 8px;
}

.sponsors-section__eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--nb-red);
  flex-shrink: 0;
}

.sponsors-section__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.05;
}

/* ── Tier row ── */
.sponsors-tier {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 28px 0;
}

.sponsors-tier__divider {
  border: none;
  border-top: 1px solid #ebebeb;
  margin: 0;
}

/* Label lateral izquierdo */
.sponsors-tier__label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #aaa;
  margin: 0;
  min-width: 72px;
  text-align: left;
  flex-shrink: 0;
}

/* Logos wrapper */
.sponsors-tier__logos {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  flex: 1;
}

/* ── Tarjeta de sponsor ── */
.sponsor-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  /* padding: 10px 14px; */
  text-decoration: none;
  color: inherit;
}

.sponsor-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,0.10);
  border-color: #ccc;
  transform: translateY(-2px);
}

.sponsor-card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Texto placeholder mientras no llega el archivo de logo */
.sponsor-card__name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #aaa;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.02em;
}

/*
  TAMAÑOS POR NIVEL
  ─────────────────────────────────────────
  Oficial   : 200 × 100 px  (2 logos)
  Principal : 130 × 72 px   (hasta 7 logos)
  Apoyo     : 110 × 60 px   (hasta 7 logos)
  Aliados   :  88 × 50 px   (hasta 9 logos)
  ─────────────────────────────────────────
  Formato recomendado de imágenes:
    • PNG con fondo transparente  (preferido)
    • SVG vectorial               (ideal para logos planos)
    • Mínimo 2× resolución del tamaño mostrado
      (Oficial: 400×200px, Principal: 260×144px, etc.)
*/

.sponsor-card--oficial {
  width: 200px;
  height: 100px;
}

.sponsor-card--principal {
  width: 160px;
  height: 90px;
}

.sponsor-card--apoyo {
  width: 140px;
  height: 80px;
}

.sponsor-card--aliado {
  width: 120px;
  height: 68px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .sponsors-tier {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 0;
  }
  .sponsors-tier__label {
    min-width: auto;
  }
  .sponsors-tier__logos {
    gap: 12px;
    justify-content: flex-start;
  }
  .sponsor-card--oficial   { width: 160px; height: 80px; }
  .sponsor-card--principal { width: 130px; height: 74px; }
  .sponsor-card--apoyo     { width: 115px; height: 66px; }
  .sponsor-card--aliado    { width:  98px; height: 56px; }
}

@media (max-width: 480px) {
  .sponsors-section   { padding: 40px 1rem 48px; }
  .sponsors-tier__logos { gap: 10px; }
  .sponsor-card--oficial   { width: 140px; height: 70px; }
  .sponsor-card--principal { width: 110px; height: 64px; }
  .sponsor-card--apoyo     { width:  98px; height: 56px; }
  .sponsor-card--aliado    { width:  84px; height: 50px; }
}


/* ── ⑤ RESPONSIVE FIXES ── */

/* Hero: textos más legibles en mobile con gradiente mejorado */
@media (max-width: 768px) {
  .hero-banner__overlay {
    background: linear-gradient(
      to top,
      rgba(0,0,0,0.65) 0%,
      rgba(0,0,0,0.25) 60%,
      rgba(0,0,0,0.10) 100%
    );
  }
  .hero-banner__content {
    width: 100%;
    padding: 0 20px 0;
  }
  .hero-banner__brand    { font-size: 1.3rem; }
  .hero-banner__title    { font-size: 1.7rem; }
  .hero-banner__distances{ font-size: 1.2rem; }
}

/* Info cards: más padding y tamaño de icono en mobile */
@media (max-width: 575px) {
  .info-card {
    padding: 20px 12px;
    background: #fafafa;
    border-radius: 10px;
    border: 1px solid #efefef;
  }
  .info-card__icon { font-size: 2rem; margin-bottom: 12px; }
  .info-card__text { font-size: 0.85rem; }
  /* Eliminar borde entre cards en mobile */
  .info-card-col + .info-card-col .info-card { border-left: none !important; }
}

/* Tabla precios mobile: tarjetas en vez de tabla */
@media (max-width: 480px) {
  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  /* Indicador de scroll */
  .table-responsive::after {
    content: '← desliza →';
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #aaa;
    padding: 6px 0 0;
    letter-spacing: 0.04em;
  }
}

/* ═══════════════════════════════════════════════════════════════
   ALTIMETRÍA — Agregar al final de styles.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Contenedor principal ── */
.elevation-section {
  background: #fff;
  padding: 3rem 0 3.5rem;
  border-top: 1px solid #ebebeb;
}

.elevation-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ── Cabecera ── */
.elevation-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.elevation-heading {
  font-size: clamp(1.4rem, 4vw, 2rem);
  font-weight: 800;
  color: #1d1d1b;
  margin: 0 0 .4rem;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.elevation-sub {
  color: #666;
  font-size: .9rem;
  margin: 0;
}
.elevation-sub a {
  color: #e30613;
  text-decoration: none;
}
.elevation-sub a:hover { text-decoration: underline; }

/* ── Tabs de selección de ruta ── */
.elevation-tabs {
  display: flex;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1rem;
}

.elev-tab {
  padding: .45rem 1.4rem;
  border-radius: 999px;
  border: 2px solid #e0e0e0;
  background: #fff;
  font-size: .85rem;
  font-weight: 700;
  color: #555;
  cursor: pointer;
  transition: all .2s;
  letter-spacing: .04em;
}

.elev-tab:hover {
  border-color: #1d1d1b;
  color: #1d1d1b;
}

.elev-tab--active[data-elev="21k"],
.elev-tab--active[data-elev="21k"]:hover {
  background: #1d1d1b;
  border-color: #1d1d1b;
  color: #fff;
}
.elev-tab--active[data-elev="10k"],
.elev-tab--active[data-elev="10k"]:hover {
  background: #e30613;
  border-color: #e30613;
  color: #fff;
}
.elev-tab--active[data-elev="5k"],
.elev-tab--active[data-elev="5k"]:hover {
  background: #7c8187;
  border-color: #7c8187;
  color: #fff;
}

/* ── Título de ruta activa ── */
.elevation-route-title {
  text-align: center;
  font-weight: 700;
  font-size: 1rem;
  color: #333;
  margin: 0 0 .75rem;
}

/* ── Estadísticas: ↑ ↓ ▲ ▼ ── */
.elevation-stats {
  display: flex;
  justify-content: center;
  gap: 1.2rem;
  flex-wrap: wrap;
  margin-bottom: .75rem;
  font-size: .82rem;
  font-weight: 600;
  color: #444;
}

.elevation-stats span {
  background: #f5f5f5;
  padding: .3rem .75rem;
  border-radius: 6px;
}

/* ── Wrapper del gráfico ── */
.elevation-chart-wrap {
  position: relative;
  height: 180px;
  background: #fafafa;
  border: 1px solid #ebebeb;
  border-radius: 12px;
  overflow: hidden;
}

#elev-chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── Spinner de carga ── */
.elevation-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  background: #fafafa;
  font-size: .85rem;
  color: #888;
  z-index: 5;
}

.elev-spin-ring {
  width: 30px;
  height: 30px;
  border: 3px solid #e0e0e0;
  border-top-color: #1d1d1b;
  border-radius: 50%;
  animation: elev-spin .7s linear infinite;
}

@keyframes elev-spin {
  to { transform: rotate(360deg); }
}

/* ── Mensaje de error ── */
.elevation-error {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1rem;
  font-size: .85rem;
  color: #888;
  line-height: 1.6;
  background: #fafafa;
  z-index: 4;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .elevation-stats { gap: .6rem; }
  .elevation-stats span { font-size: .76rem; padding: .25rem .5rem; }
  .elev-tab { padding: .4rem .9rem; font-size: .8rem; }
}
/* ══════════════════════════════════════════
   BLOQUE — HOTELES ALIADOS
   Agregar al final de styles.css
══════════════════════════════════════════ */

/* ── Sección ── */
.hotels-section {
  background: var(--nb-gray-bg);
  padding: 72px 0 80px;
  border-top: 1px solid #ebebeb;
}

.hotels-section__header {
  text-align: center;
  margin-bottom: 56px;
  padding: 0 1rem;
}

.hotels-section__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 8px;
}

.hotels-section__eyebrow-line {
  display: inline-block;
  width: 28px;
  height: 2px;
  background: var(--nb-red);
  flex-shrink: 0;
}

.hotels-section__title {
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 900;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
  line-height: 1.05;
}

.hotels-section__subtitle {
  font-size: clamp(0.95rem, 1.8vw, 1.08rem);
  color: #555;
  margin: 0;
}

/* ══════════════════════════════════════════
   HCARD — Tarjeta de hotel full-width
   Layout: slider izq (45%) | info der (55%)
   hcard--reverse invierte el orden
══════════════════════════════════════════ */
.hcard {
  display: grid;
  grid-template-columns: 45% 1fr;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,0.08);
  border: 1.5px solid var(--nb-border);
  margin-bottom: 40px;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hcard:last-of-type {
  margin-bottom: 0;
}

.hcard:hover {
  box-shadow: 0 12px 48px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}

/* Reverse: slider a la derecha, info a la izquierda */
.hcard--reverse {
  grid-template-columns: 1fr 45%;
}

.hcard--reverse .hcard__slider-col {
  order: 2;
}

.hcard--reverse .hcard__info-col {
  order: 1;
}

/* Badge "Hotel Aliado" */
.hcard__badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 100px;
  z-index: 10;
  pointer-events: none;
}

/* ══════════════════════════════════════════
   HSLIDER — Slider de imágenes con flechas
══════════════════════════════════════════ */
.hcard__slider-col {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Banner de fachada: imagen estática encima del slider */
.hcard__banner {
  width: 100%;
  aspect-ratio: 21 / 9;
  overflow: hidden;
  flex-shrink: 0;
}

.hcard__banner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.hcard:hover .hcard__banner img {
  transform: scale(1.03);
}

/* Separador entre banner y slider */
.hcard__slider-label {
  background: var(--nb-black);
  color: rgba(255,255,255,0.7);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: center;
  padding: 5px 0;
  flex-shrink: 0;
}

.hslider {
  position: relative;
  width: 100%;
  flex: 1;
  /* Ratio 16:9 para fotos horizontales */
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111;
}

.hslider__track {
  display: flex;
  height: 100%;
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.hslider__slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hslider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

/* Flechas de navegación */
.hslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--nb-black);
  box-shadow: 0 2px 12px rgba(0,0,0,0.18);
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
  outline: none;
}

.hslider__arrow:hover {
  background: var(--nb-red);
  color: #fff;
  transform: translateY(-50%) scale(1.08);
}

.hslider__arrow--prev { left: 14px; }
.hslider__arrow--next { right: 14px; }

/* Dots */
.hslider__dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  z-index: 20;
}

.hslider__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.5);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s ease, transform 0.2s ease;
  outline: none;
}

.hslider__dot--active {
  background: #fff;
  transform: scale(1.25);
}

/* ══════════════════════════════════════════
   HCARD — Columna de información
══════════════════════════════════════════ */
.hcard__info-col {
  padding: 36px 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  overflow-y: auto;
}

/* Nombre + tagline */
.hcard__name {
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  color: var(--nb-black);
  letter-spacing: -0.02em;
  margin: 0 0 4px;
  line-height: 1.1;
}

.hcard__tagline {
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  font-weight: 700;
  color: var(--nb-red);
  margin: 0;
  line-height: 1.4;
}

/* Descripción */
.hcard__desc {
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  color: #444;
  line-height: 1.8;
  margin: 0;
}

/* Título de bloque (servicios, tarifas, contacto) */
.hcard__block-title {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Servicios */
.hcard__services {
  background: #fff8f8;
  border-left: 3px solid var(--nb-red);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}

.hcard__services-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hcard__services-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: clamp(0.88rem, 1.4vw, 0.96rem);
  color: #333;
  line-height: 1.55;
}

.hcard__services-list li i {
  color: var(--nb-red);
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

/* Tarifas */
.hcard__rates {
  background: var(--nb-gray-bg);
  border-radius: 8px;
  padding: 14px 16px;
}

.hcard__rates-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hcard__rates-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.83rem;
  color: #333;
  border-bottom: 1px solid #e4e4e4;
  padding-bottom: 5px;
  gap: 12px;
}

.hcard__rates-list li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hcard__rates-list li span { color: #555; }

.hcard__rates-list li strong {
  color: var(--nb-black);
  font-weight: 800;
  white-space: nowrap;
}

/* Contacto */
.hcard__contact {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.hcard__contact-line {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: clamp(0.88rem, 1.4vw, 0.96rem);
  color: #444;
  margin: 0;
  line-height: 1.5;
}

.hcard__contact-line i {
  color: var(--nb-red);
  margin-top: 2px;
  flex-shrink: 0;
  width: 14px;
  text-align: center;
}

.hcard__contact-line a {
  color: var(--nb-red);
  text-decoration: none;
  font-weight: 600;
  word-break: break-all;
  transition: opacity 0.15s;
}

.hcard__contact-line a:hover { opacity: 0.75; }

.hcard__contact-sep {
  color: #bbb;
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* Mapa */
.hcard__map-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.hcard__map {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  border: 1.5px solid var(--nb-border);
  height: 190px;
}

.hcard__map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.hcard__map-link {
  position: absolute;
  bottom: 10px;
  right: 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--nb-black);
  color: #fff;
  font-size: 0.73rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.hcard__map-link:hover {
  background: var(--nb-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Acciones */
.hcard__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 4px;
}

/* Botón primario */
.hcard__btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--nb-black);
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 11px 22px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.hcard__btn--primary:hover {
  background: var(--nb-red);
  color: #fff;
  transform: translateY(-1px);
}

/* Botón WhatsApp */
.hcard__btn--whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #25D366;
  color: #fff;
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 11px 20px;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.18s ease, transform 0.18s ease;
  white-space: nowrap;
}

.hcard__btn--whatsapp:hover {
  background: #1da851;
  color: #fff;
  transform: translateY(-1px);
}

.hcard__btn--whatsapp i { font-size: 1.05rem; }

/* Botones sociales — base */
.hcard__btn--social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1.5px solid var(--nb-border);
  background: #fff;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

/* Instagram */
.hcard__btn--instagram {
  color: #C13584;
  border-color: #C13584;
}

.hcard__btn--instagram:hover {
  background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  color: #fff;
  border-color: transparent;
  transform: translateY(-2px);
}

/* Facebook */
.hcard__btn--facebook {
  color: #1877F2;
  border-color: #1877F2;
}

.hcard__btn--facebook:hover {
  background: #1877F2;
  color: #fff;
  border-color: #1877F2;
  transform: translateY(-2px);
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */

/* ══════════════════════════════════════════
   RESPONSIVE — HOTELES
   Breakpoints: 1024 / 900 / 768 / 575 / 400
══════════════════════════════════════════ */

/* ── Tablet ancho (≤1024px) ── */
@media (max-width: 1024px) {
  .hcard {
    grid-template-columns: 42% 1fr;
  }
  .hcard--reverse {
    grid-template-columns: 1fr 42%;
  }
  .hcard__info-col {
    padding: 28px 28px 26px;
    gap: 16px;
  }
  /* Banner un poco menos alto */
  .hcard__banner {
    aspect-ratio: 19 / 7;
  }
}

/* ── Tablet (≤900px): apila slider arriba, info abajo ── */
@media (max-width: 900px) {
  .hcard,
  .hcard--reverse {
    grid-template-columns: 1fr;   /* una sola columna */
    border-radius: 14px;
  }

  /* Ambos hoteles: slider siempre arriba */
  .hcard--reverse .hcard__slider-col { order: 1; }
  .hcard--reverse .hcard__info-col   { order: 2; }

  /* El slider-col no necesita altura fija: aspect-ratio lo controla */
  .hcard__slider-col {
    width: 100%;
  }

  /* Banner más apaisado en tablet */
  .hcard__banner {
    aspect-ratio: 21 / 7;
  }

  /* Slider 16:9 se mantiene */
  .hslider {
    aspect-ratio: 16 / 9;
  }

  .hcard__info-col {
    padding: 24px 28px 28px;
    gap: 16px;
  }

  /* Tarifas: 2 columnas en tablet si hay espacio */
  .hcard__rates-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px 20px;
  }

  .hcard__map { height: 210px; }

  /* Botones: más espacio entre ellos */
  .hcard__actions { gap: 12px; }
}

/* ── Mobile (≤768px) ── */
@media (max-width: 768px) {
  .hotels-section {
    padding: 48px 0 56px;
  }
  .hotels-section__header {
    margin-bottom: 36px;
    padding: 0 1.2rem;
  }

  .hcard {
    margin-bottom: 28px;
    border-radius: 12px;
    /* Sin hover lift en touch: puede sentirse raro */
    transition: box-shadow 0.25s ease;
  }
  .hcard:hover { transform: none; }

  .hcard__banner {
    aspect-ratio: 16 / 6;
  }

  .hcard__slider-label {
    font-size: 0.58rem;
    padding: 4px 0;
  }

  /* Flechas más pequeñas */
  .hslider__arrow {
    width: 36px;
    height: 36px;
    font-size: 0.78rem;
  }
  .hslider__arrow--prev { left: 10px; }
  .hslider__arrow--next { right: 10px; }

  /* Dots más pequeños */
  .hslider__dot { width: 7px; height: 7px; }

  .hcard__info-col {
    padding: 20px 20px 24px;
    gap: 14px;
  }

  .hcard__name { font-size: 1.35rem; }

  /* Tarifas: vuelven a 1 columna */
  .hcard__rates-list {
    display: flex;
    flex-direction: column;
  }

  .hcard__map { height: 185px; }
  .hcard__map-link { font-size: 0.68rem; padding: 6px 10px; }
}

/* ── Mobile pequeño (≤575px) ── */
@media (max-width: 575px) {
  .hotels-section { padding: 40px 0 48px; }

  .hcard { border-radius: 10px; margin-bottom: 24px; }

  .hcard__banner { aspect-ratio: 16 / 7; }

  .hslider { aspect-ratio: 4 / 3; } /* un poco más cuadrado facilita ver fotos */

  .hcard__info-col {
    padding: 18px 16px 20px;
    gap: 12px;
  }

  .hcard__tagline { font-size: 0.95rem; }
  .hcard__desc    { font-size: 0.95rem; line-height: 1.75; }

  .hcard__services-list li { font-size: 0.92rem; }
  .hcard__rates-list li    { font-size: 0.92rem; }
  .hcard__contact-line     { font-size: 0.92rem; }

  /* Botones: primario y WA full-width, sociales al lado */
  .hcard__actions {
    flex-wrap: wrap;
    gap: 8px;
  }
  .hcard__btn--primary,
  .hcard__btn--whatsapp {
    flex: 1 1 auto;
    justify-content: center;
    padding: 11px 12px;
    font-size: 0.8rem;
    min-width: 130px;
  }
  .hcard__btn--social {
    width: 42px;
    height: 42px;
  }

  .hcard__map { height: 170px; }
  .hcard__map-link { font-size: 0.65rem; padding: 5px 9px; }

  /* Dots más juntos */
  .hslider__dots { gap: 5px; }
  .hslider__dot  { width: 6px; height: 6px; }
}

/* ── Mobile muy pequeño (≤400px) ── */
@media (max-width: 400px) {
  .hcard__banner { aspect-ratio: 16 / 8; }
  .hslider { aspect-ratio: 3 / 2; }
  .hcard__info-col { padding: 16px 14px 18px; }
  .hcard__name { font-size: 1.2rem; }
  .hcard__map  { height: 155px; }
  .hcard__btn--primary,
  .hcard__btn--whatsapp { font-size: 0.76rem; }
}

/* ══════════════════════════════════════════
   NAVBAR — Landing MMC 2026
   Botón Inscribirse + ajustes menú scroll
══════════════════════════════════════════ */

/* Botón Inscribirse en navbar desktop */
.nb-navbar__inscribirse {
  display: inline-flex;
  align-items: center;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 9px 22px;
  border-radius: 4px;
  white-space: nowrap;
  transition: background 0.18s ease, transform 0.18s ease;
  margin-left: 8px;
}

.nb-navbar__inscribirse:hover {
  background: #a0081f;
  color: #fff;
  transform: translateY(-1px);
}

/* Subrayado activo al hacer scroll — clase añadida por JS */
.nb-navbar__link.is-active::after {
  transform: scaleX(1);
}

/* ── CTA Inscribirse en menú mobile ── */
.nb-navbar__mobile-cta {
  padding: 12px 20px 16px;
}

.nb-navbar__mobile-cta a {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--nb-red);
  color: #fff !important;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 6px;
  text-align: center;
  transition: background 0.18s ease;
  border-bottom: none !important; /* quitar borde de lista mobile */
}

.nb-navbar__mobile-cta a:hover {
  background: #a0081f;
  color: #fff !important;
}

/* Quitar borde inferior del ítem CTA */
.nb-navbar__mobile-cta a {
  border-bottom: none !important;
}

/* ── Responsive: ocultar inscribirse en mobile (ya está en drawer) ── */
@media (max-width: 768px) {
  .nb-navbar__inscribirse { display: none; }
}


/* ══════════════════════════════════════════
   FOOTER — Landing MMC 2026
   Lista de contacto con íconos
══════════════════════════════════════════ */
.footer-col__contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.footer-col__contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.6;
}

.footer-col__contact-list li i {
  color: var(--nb-red);
  font-size: 1rem;
  margin-top: 2px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.footer-col__contact-list li a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.15s;
}

.footer-col__contact-list li a:hover {
  color: #fff;
}

/* contact-list responsive — incluido en bloque footer responsive arriba */

/* ══════════════════════════════════════
   HOTELES PREVIEW — INDEX (cards compactas)
══════════════════════════════════════ */
.hotels-preview-section {
  padding: 80px 0 60px;
  background: #f5f5f5;
}

.hotels-preview__header {
  text-align: center;
  margin-bottom: 48px;
}

.hotels-preview__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 12px;
}

.hotels-preview__eyebrow-line {
  display: block;
  width: 36px;
  height: 2px;
  background: var(--nb-red);
  border-radius: 2px;
}

.hotels-preview__title {
  font-size: clamp(1.8rem, 4vw, 2.6rem);
  font-weight: 900;
  color: var(--nb-black);
  margin: 0 0 10px;
  text-transform: uppercase;
  letter-spacing: -0.01em;
}

.hotels-preview__subtitle {
  color: #666;
  font-size: 1rem;
  margin: 0;
}

/* ── Grid de cards ── */
.hotels-preview__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 520px), 1fr));
  gap: 28px;
  margin-bottom: 40px;
}

/* ── Card ── */
.hpreview-card {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--nb-border);
  box-shadow: 0 2px 16px rgba(0,0,0,0.06);
  transition: box-shadow 0.25s, transform 0.25s;
  background: #fff;
}

.hpreview-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}

/* Columna imagen */
.hpreview-card__img-col {
  position: relative;
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
}

.hpreview-card__img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hpreview-card__badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}

/* Columna info */
.hpreview-card__body {
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.hpreview-card__location {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 5px;
}

.hpreview-card__name {
  font-size: 1.25rem;
  font-weight: 900;
  color: var(--nb-black);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.hpreview-card__desc {
  font-size: clamp(0.92rem, 1.5vw, 1rem);
  color: #555;
  margin: 0;
  line-height: 1.6;
}

/* Chips de servicios */
.hpreview-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0;
  padding: 0;
  list-style: none;
}

.hpreview-card__chips li {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  font-weight: 600;
  color: #444;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 4px 10px;
  white-space: nowrap;
}

.hpreview-card__chips li i {
  color: var(--nb-red);
  font-size: 0.68rem;
}

/* Botones */
.hpreview-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding-top: 4px;
}

.hpreview-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  border-radius: 8px;
  padding: 8px 14px;
  transition: filter 0.2s, transform 0.15s;
  text-decoration: none;
  white-space: nowrap;
}

.hpreview-card__btn:hover {
  filter: brightness(0.88);
  transform: translateY(-1px);
}

.hpreview-card__btn--wa {
  background: #25d366;
  color: #fff;
}

.hpreview-card__btn--more {
  background: var(--nb-black);
  color: #fff;
}

/* ── CTA ver todos ── */
.hotels-preview__cta {
  text-align: center;
}

.hotels-preview__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s;
}

.hotels-preview__cta-btn:hover {
  background: #a50823;
  transform: translateY(-2px);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .hpreview-card {
    flex-direction: column;
  }

  .hpreview-card__img-col {
    width: 100%;
    height: 200px;
  }

  .hotels-preview__grid {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════
   HOTELES PAGE — Banner hero + sección completa
   (hoteles.html)
══════════════════════════════════════ */
.hotels-hero {
  position: relative;
  height: 340px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--nb-black);
}

.hotels-hero__bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/img/hoteles/hotels-hero-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: 0.45;
}

.hotels-hero__content {
  position: relative;
  z-index: 1;
  text-align: center;
  color: #fff;
}

.hotels-hero__eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 10px;
}

.hotels-hero__title {
  font-size: clamp(2.2rem, 7vw, 4.5rem);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  line-height: 1;
}

.hotels-hero__sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.hotels-page-section {
  padding: 72px 0 80px;
  background: #fff;
}

.hotels-page__back {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--nb-red);
  margin-bottom: 40px;
  text-decoration: none;
  transition: gap 0.2s;
}

.hotels-page__back:hover { gap: 11px; }


/* ══════════════════════════════════════
   AVISOS — banner compacto y banner full
══════════════════════════════════════ */
.aviso-banner {
  background: #1e1e1e;
  border-left: 6px solid var(--nb-red);
  position: relative;
  overflow: hidden;
}

/* Línea decorativa de fondo */
.aviso-banner::before {
  content: '🚨';
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 9rem;
  opacity: 0.04;
  pointer-events: none;
  line-height: 1;
}

/* ── Compacto (aviso inscripciones) ── */
.aviso-banner--compact {
  padding: 24px 0;
}

.aviso-banner__inner {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.aviso-banner__icon {
  font-size: 2rem;
  color: var(--nb-red);
  flex-shrink: 0;
  line-height: 1;
}

.aviso-banner__icon--big {
  font-size: 2.8rem;
  display: block;
}

.aviso-banner__body {
  flex: 1;
  min-width: 200px;
}

.aviso-banner__title {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--nb-red);
  margin: 0 0 4px;
}

.aviso-banner__text {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  color: rgba(255,255,255,0.88);
  margin: 0;
  line-height: 1.7;
}

.aviso-banner__text strong {
  color: #fff;
}

.aviso-banner__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 8px;
  white-space: nowrap;
  flex-shrink: 0;
  text-decoration: none;
  transition: background 0.2s, transform 0.15s;
}

.aviso-banner__cta:hover {
  background: #a50823;
  transform: translateY(-2px);
  color: #fff;
}

/* ── Full (aviso médico) ── */
.aviso-banner--full {
  padding: 40px 0;
  border-left-width: 8px;
}

.aviso-banner__inner--full {
  align-items: flex-start;
  gap: 28px;
  flex-wrap: nowrap;
}

.aviso-banner__icon-col {
  flex-shrink: 0;
  padding-top: 2px;
}

.aviso-banner--full .aviso-banner__title {
  font-size: 0.72rem;
  margin-bottom: 10px;
}

.aviso-banner--full .aviso-banner__text {
  font-size: clamp(0.95rem, 1.6vw, 1.05rem);
  line-height: 1.8;
  color: rgba(255,255,255,0.82);
}

/* ── Responsive — tablet (max 768px) ── */
@media (max-width: 768px) {
  .aviso-banner--compact {
    padding: 20px 0;
  }

  .aviso-banner--full {
    padding: 28px 0;
  }

  .aviso-banner--full .aviso-banner__text {
    font-size: 0.88rem;
  }
}

/* ── Responsive — mobile (max 640px) ── */
@media (max-width: 640px) {
  /* Border pasa a top en mobile */
  .aviso-banner {
    border-left: none;
    border-top: 5px solid var(--nb-red);
  }

  /* Decorativo reposicionado */
  .aviso-banner::before {
    right: 50%;
    transform: translate(50%, -50%);
    font-size: 6rem;
  }

  /* Compacto — apila verticalmente */
  .aviso-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /* Full — también apila */
  .aviso-banner__inner--full {
    flex-direction: column;
    flex-wrap: wrap;
    gap: 12px;
  }

  .aviso-banner__icon-col {
    padding-top: 0;
  }

  .aviso-banner__icon {
    font-size: 1.6rem;
  }

  .aviso-banner__icon--big {
    font-size: 1.8rem;
  }

  .aviso-banner__text {
    font-size: 0.85rem;
    line-height: 1.6;
  }

  .aviso-banner--full .aviso-banner__text {
    font-size: 0.85rem;
  }

  .aviso-banner__title {
    font-size: 0.65rem;
  }

  .aviso-banner__cta {
    width: 100%;
    justify-content: center;
  }

  .aviso-banner--compact {
    padding: 18px 0;
  }

  .aviso-banner--full {
    padding: 24px 0;
    border-left: none;
    border-top: 5px solid var(--nb-red);
  }
}


/* ══════════════════════════════════════
   MAPA — Controles UX (v6)
   Botones centrar / fullscreen + fullscreen state
══════════════════════════════════════ */

/* ── Botones de control Leaflet custom ── */
.map-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #fff;
  border: 2px solid rgba(0,0,0,0.2);
  border-radius: 6px;
  color: #333;
  font-size: 0.88rem;
  cursor: pointer;
  margin-bottom: 4px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  box-shadow: 0 1px 5px rgba(0,0,0,0.18);
}

.map-ctrl-btn:hover {
  background: var(--nb-red);
  color: #fff;
  border-color: var(--nb-red);
}

/* ── Fullscreen ── */
#mapa-recorrido.map-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 9999 !important;
  border-radius: 0 !important;
}

/* ── Overlay táctil 2 dedos ── */
.map-touch-overlay__msg {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  background: rgba(0,0,0,0.72);
  color: #fff;
  padding: 20px 32px;
  border-radius: 16px;
  font-size: 1rem;
  font-weight: 600;
  text-align: center;
  font-family: inherit;
  pointer-events: none;
}

.map-touch-overlay__msg i {
  font-size: 2rem;
  opacity: 0.9;
}

/* ── Tooltip de rutas (Leaflet override) ── */
.leaflet-tooltip {
  background: rgba(0,0,0,0.78) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 6px !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
  padding: 4px 10px !important;
  font-family: inherit !important;
}

.leaflet-tooltip::before {
  border-top-color: rgba(0,0,0,0.78) !important;
}

/* ── Popup de rutas (Leaflet override) ── */
.leaflet-popup-content-wrapper {
  border-radius: 10px !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.18) !important;
  font-family: inherit !important;
}

.leaflet-popup-content {
  margin: 12px 14px !important;
  font-family: inherit !important;
}

/* ══════════════════════════════════════════
   BLOQUE TALLAS — Sección + Modal
══════════════════════════════════════════ */

/* ── Sección contenedora ── */
.sizes-section {
  background: #0a0a0a;
  padding: 72px 0 80px;
}

.sizes-section__header {
  text-align: center;
  margin-bottom: 40px;
}

.sizes-section__title {
  font-family: 'Questrial', sans-serif;
  font-size: clamp(1.35rem, 3vw, 2rem);
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}

.sizes-section__subtitle {
  font-family: 'Questrial', sans-serif;
  font-size: .95rem;
  color: rgba(255,255,255,.55);
  margin: 0;
}

/* ── Tarjeta ── */
.size-card {
  background: #161616;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color .25s, transform .25s;
}

.size-card:hover {
  border-color: rgba(229,0,0,.55);
  transform: translateY(-4px);
}

/* Badge género */
.size-card__badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  background: rgba(229,0,0,.12);
  border-bottom: 1px solid rgba(229,0,0,.2);
}

.size-card__badge i {
  font-size: 1.1rem;
  color: #e50000;
}

.size-card__badge span {
  font-family: 'Questrial', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

/* Thumbnail con overlay lupa */
.size-card__thumb-wrap {
  position: relative;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 4 / 3;
  cursor: pointer;
}

.size-card__thumb {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: transform .35s ease;
}

.size-card:hover .size-card__thumb {
  transform: scale(1.04);
}

.size-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .25s;
}

.size-card:hover .size-card__overlay {
  opacity: 1;
}

.size-card__overlay i {
  font-size: 2rem;
  color: #fff;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.6));
}

/* Botón ampliar */
.size-card__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 13px 18px;
  background: transparent;
  border: none;
  border-top: 1px solid rgba(255,255,255,.07);
  font-family: 'Questrial', sans-serif;
  font-size: .85rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
  cursor: pointer;
  transition: background .2s, color .2s;
}

.size-card__btn:hover,
.size-card__btn:focus-visible {
  background: rgba(229,0,0,.15);
  color: #fff;
  outline: none;
}

.size-card__btn i {
  font-size: .9rem;
  color: #e50000;
}

/* ── Modal tallas ── */
.sizes-modal {
  background: #111;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  overflow: hidden;
}

.sizes-modal__header {
  background: #161616;
  border-bottom: 1px solid rgba(255,255,255,.08);
  padding: 14px 20px;
}

.sizes-modal__title {
  font-family: 'Questrial', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
}

.sizes-modal__body {
  background: #fff;
  text-align: center;
}

.sizes-modal__img {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: block;
}

.sizes-modal__footer {
  background: #161616;
  border-top: 1px solid rgba(255,255,255,.08);
  justify-content: center;
  padding: 10px 20px;
}

.sizes-modal__note {
  font-family: 'Questrial', sans-serif;
  font-size: .78rem;
  color: rgba(255,255,255,.45);
}

.sizes-modal__note i {
  color: #e50000;
}

/* ── Responsive ── */
@media (max-width: 575.98px) {
  .sizes-section {
    padding: 52px 0 60px;
  }
  .size-card {
    max-width: 400px;
    margin: 0 auto;
  }
  /* En móvil el overlay siempre visible (no hay hover táctil) */
  .size-card__overlay {
    opacity: 1;
    background: rgba(0,0,0,.25);
  }
  .size-card__overlay i {
    font-size: 1.5rem;
  }
}


/* ══════════════════════════════════════════
   LANG TOGGLE — Botón ES / EN
══════════════════════════════════════════ */
.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0;
  background: transparent;
  border: 1.5px solid var(--nb-black);
  border-radius: 20px;
  padding: 3px;
  cursor: pointer;
  transition: border-color .2s;
  flex-shrink: 0;
}

.lang-toggle:hover {
  border-color: var(--nb-red);
}

/* Cada opción inactiva */
.lang-toggle__option {
  font-family: 'Questrial', sans-serif;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  padding: 3px 10px;
  border-radius: 14px;
  color: var(--nb-gray-mid);
  background: transparent;
  transition: background .2s, color .2s;
  pointer-events: none;
  user-select: none;
  line-height: 1.6;
}

/* Opción ACTIVA — coincide data-lang del botón con data-value del span */
.lang-toggle[data-lang="es"] .lang-toggle__option[data-value="es"],
.lang-toggle[data-lang="en"] .lang-toggle__option[data-value="en"] {
  background: var(--nb-red);
  color: #fff;
}

/* Ajuste dentro de la navbar desktop */
.nb-navbar__actions .lang-toggle {
  margin-right: 6px;
}

/* ── Menú MÓVIL — fondo oscuro, invertir colores ── */
.nb-navbar__mobile-lang {
  padding: 14px 20px 6px;
  display: flex;
  justify-content: center;
}

.nb-navbar__mobile-lang .lang-toggle {
  border-color: rgba(255,255,255,.35);
  scale: 1.1;
}

.nb-navbar__mobile-lang .lang-toggle:hover {
  border-color: rgba(229,0,0,.8);
}

.nb-navbar__mobile-lang .lang-toggle .lang-toggle__option {
  color: rgba(255,255,255,.4);
}

/* Opción activa en móvil — igual: rojo */
.nb-navbar__mobile-lang .lang-toggle[data-lang="es"] .lang-toggle__option[data-value="es"],
.nb-navbar__mobile-lang .lang-toggle[data-lang="en"] .lang-toggle__option[data-value="en"] {
  background: var(--nb-red);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   BOTÓN VER REGLAMENTO — sección Información Importante
   ══════════════════════════════════════════════════════════════ */
.btn-reglamento {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: transparent;
  border: 2px solid var(--nb-black);
  color: var(--nb-black);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  padding: 12px 30px;
  border-radius: 3px;
  text-decoration: none;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.btn-reglamento:hover {
  background: var(--nb-black);
  color: #fff;
}
.btn-reglamento i {
  font-size: 0.95rem;
  transition: transform 0.2s;
}
.btn-reglamento:hover i {
  transform: translateX(3px);
}


/* ══════════════════════════════════════════════════════════════
   PÁGINA REGLAMENTO — reglamento.html
   ══════════════════════════════════════════════════════════════ */

/* ── Hero ── */
.reg-hero {
  background: var(--nb-black);
  padding: 100px 0 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.reg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('assets/img/hero-bg.jpg') center / cover no-repeat;
  opacity: 0.15;
}
.reg-hero__eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--nb-red);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
  position: relative;
}
.reg-hero__eyebrow-line {
  display: inline-block;
  width: 36px;
  height: 2px;
  background: var(--nb-red);
}
.reg-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.1;
  position: relative;
  margin-bottom: 10px;
}
.reg-hero__sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.95rem;
  position: relative;
}
.reg-back {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.7);
  font-size: 0.85rem;
  text-decoration: none;
  margin-bottom: 28px;
  transition: color 0.2s;
}
.reg-back:hover { color: #fff; }

/* ── Cuerpo ── */
.reg-body {
  background: #fff;
  padding: 56px 0 80px;
}
.reg-intro {
  background: var(--nb-gray-bg);
  border-left: 4px solid var(--nb-red);
  border-radius: 0 8px 8px 0;
  padding: 20px 24px;
  margin-bottom: 40px;
  font-size: 0.97rem;
  color: #333;
  line-height: 1.7;
}

/* ── Acordeones ── */
.reg-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--nb-border);
  border-radius: 0 !important;
}
.reg-accordion .accordion-item:first-child {
  border-top: 1px solid var(--nb-border);
}
.reg-accordion .accordion-button {
  background: #fff;
  color: var(--nb-black);
  font-weight: 700;
  font-size: 1rem;
  padding: 18px 20px;
  box-shadow: none !important;
  border-radius: 0 !important;
  gap: 14px;
}
.reg-accordion .accordion-button:not(.collapsed) {
  background: #fafafa;
  color: var(--nb-red);
}
.reg-accordion .accordion-button:not(.collapsed)::after {
  filter: invert(14%) sepia(96%) saturate(3000%) hue-rotate(340deg) brightness(85%);
}
.reg-accordion .acc-icon {
  font-size: 1.05rem;
  width: 20px;
  text-align: center;
  color: var(--nb-red);
  flex-shrink: 0;
}
.reg-accordion .accordion-body {
  padding: 20px 24px 28px;
  color: #444;
  font-size: 0.95rem;
  line-height: 1.75;
}

/* Subtítulos internos */
.reg-accordion .accordion-body h5 {
  font-size: 0.82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--nb-black);
  margin: 22px 0 10px;
  border-bottom: 2px solid var(--nb-red);
  padding-bottom: 4px;
  display: inline-block;
}
.reg-accordion .accordion-body h5:first-child { margin-top: 0; }

.reg-accordion .accordion-body ul {
  padding-left: 1.3rem;
  margin-bottom: 12px;
}
.reg-accordion .accordion-body ul li { margin-bottom: 6px; }

/* Tablas de premios */
.reg-accordion .accordion-body .prize-table {
  width: 100%;
  border-collapse: collapse;
  margin: 12px 0 20px;
  font-size: 0.9rem;
}
.reg-accordion .accordion-body .prize-table th {
  background: var(--nb-black);
  color: #fff;
  padding: 8px 12px;
  text-align: left;
  font-weight: 700;
}
.reg-accordion .accordion-body .prize-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--nb-border);
}
.reg-accordion .accordion-body .prize-table tr:nth-child(even) td {
  background: var(--nb-gray-bg);
}

/* Badges */
.reg-badge {
  display: inline-block;
  background: var(--nb-red);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-left: 6px;
  vertical-align: middle;
}

/* Notas y alertas */
.reg-note {
  background: #fff8e1;
  border-left: 3px solid #ffc107;
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #555;
  margin: 14px 0;
}
.reg-alert {
  background: #ffeaea;
  border-left: 3px solid var(--nb-red);
  border-radius: 0 6px 6px 0;
  padding: 10px 14px;
  font-size: 0.88rem;
  color: #555;
  margin: 14px 0;
}

/* Bloques de ruta */
.route-block {
  background: var(--nb-gray-bg);
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  line-height: 1.65;
}
.route-block__label {
  font-weight: 800;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--nb-red);
  margin-bottom: 6px;
}

/* Grid de horarios */
.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 16px 0;
}
.time-card {
  background: var(--nb-gray-bg);
  border-radius: 8px;
  padding: 14px;
  text-align: center;
}
.time-card__dist {
  font-weight: 900;
  font-size: 1.3rem;
  color: var(--nb-red);
  margin-bottom: 6px;
}
.time-card__row {
  font-size: 0.82rem;
  color: #555;
  margin-top: 4px;
  line-height: 1.4;
}
.time-card__row strong { color: var(--nb-black); }

/* CTA final */
.reg-cta {
  background: var(--nb-black);
  color: #fff;
  border-radius: 10px;
  padding: 36px 32px;
  text-align: center;
  margin-top: 48px;
}
.reg-cta h3 {
  font-size: 1.4rem;
  font-weight: 900;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.reg-cta p {
  color: rgba(255,255,255,0.6);
  margin-bottom: 22px;
  font-size: 0.95rem;
}
.reg-cta .btn-reg {
  background: var(--nb-red);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 13px 36px;
  border-radius: 3px;
  text-decoration: none;
  display: inline-block;
  transition: background 0.2s;
}
.reg-cta .btn-reg:hover { background: #a8071e; color: #fff; }

/* ── Responsive ── */
@media (max-width: 575px) {
  .time-grid { grid-template-columns: 1fr; }
  .reg-hero  { padding: 80px 0 36px; }
  .reg-body  { padding: 36px 0 56px; }
  .reg-cta   { padding: 28px 20px; }
  .reg-accordion .accordion-body { padding: 16px 16px 22px; }
  .reg-intro { padding: 16px 18px; }
}