/* ==========================================================================
   ALPEZ - PORTADA WEB DESKTOP 16:9 + SERVICIOS + EXPERIENCIA + CONFIANZA + DESTINOS
   Diseño de Alta Gama Minimalista, Limpio y Editorial
   ========================================================================== */

:root {
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  
  /* Paleta cromática */
  --c-black: #0c0d0e;
  --c-dark: #1b1d21;
  --c-subtle-gray: #4b525f;
  --c-muted-gray: #7d8491;
  --c-light-gray: #8c93a0;
  --c-border-hairline: rgba(0, 0, 0, 0.09);
  --c-electric-blue: #0052FF;
  --c-electric-blue-hover: #0043d4;
  --c-electric-glow: rgba(0, 82, 255, 0.28);
  --c-orange: #ff5500;
  --c-orange-glow: rgba(255, 85, 0, 0.35);
  --c-white: #ffffff;
  --c-bg-stage: #eaedf2;
  --c-bg-pure: #ffffff;
  --c-bg-cool: #fafbfc;
  --c-shadow-subtle: 0 16px 45px rgba(0, 0, 0, 0.06);
}

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

html {
  scroll-behavior: smooth;
}

body {
  width: 100%;
  min-height: 100vh;
  background-color: var(--c-bg-pure);
  font-family: var(--font-sans);
  color: var(--c-black);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ==========================================================================
   SECCIÓN 1: PORTADA HERO 16:9
   ========================================================================== */

.hero-section {
  width: 100%;
  position: relative;
  background: radial-gradient(circle at center 40%, #f4f5f8 0%, #e2e5eb 100%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.desktop-viewport {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-canvas {
  position: relative;
  width: 100vw;
  max-width: 1920px;
  aspect-ratio: 16 / 9;
  height: auto;
  max-height: 100vh;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

@media (min-aspect-ratio: 16/9) {
  .hero-canvas {
    height: 100vh;
    width: calc(100vh * (16 / 9));
  }
}

/* Fondo del Autobús Original */
.backdrop-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.backdrop-bus-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Barra Superior de Navegación */
.navbar-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 30;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: clamp(1.2rem, 2.4vw, 2.2rem) clamp(1.8rem, 4vw, 4rem) 0 clamp(1.8rem, 4vw, 4rem);
}

.brand-title {
  justify-self: start;
  text-decoration: none;
  line-height: 1;
  display: flex;
  align-items: center;
  transition: opacity 0.2s ease;
}

.brand-title:hover {
  opacity: 0.88;
}

.main-brand-logo {
  height: clamp(34px, 2.5vw, 42px);
  width: auto;
  object-fit: contain;
  display: block;
}

.center-navigation {
  justify-self: center;
}

.nav-menu {
  display: flex;
  align-items: center;
  list-style: none;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 0.55rem 1.6rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
}

.nav-item {
  font-size: clamp(0.82rem, 0.96vw, 0.98rem);
  font-weight: 500;
  color: #2c3038;
  text-decoration: none;
  padding: 0.25rem 0.75rem;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.nav-item:hover {
  color: var(--c-black);
}

.nav-divider {
  width: 1px;
  height: 13px;
  background-color: rgba(0, 0, 0, 0.16);
  margin: 0 0.15rem;
}

.header-cta-wrapper {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 1vw, 0.95rem);
}

/* Selector de Idioma (ES / EN) de Alta Gama */
.lang-switch-capsule,
.capsule-lang-switch {
  display: inline-flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 9999px;
  padding: 3px 5px;
  gap: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
}

.lang-btn {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.78vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #64748b;
  padding: 4px 8px;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 1;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.lang-btn:hover {
  color: var(--c-black);
}

.lang-btn.is-active {
  background: var(--c-black);
  color: var(--c-white);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.lang-sep {
  font-size: 0.68rem;
  color: rgba(0, 0, 0, 0.22);
  user-select: none;
}

.btn-cotizar-header {
  background-color: var(--c-electric-blue);
  color: var(--c-white);
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 0.95vw, 0.95rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(0.6rem, 0.85vw, 0.82rem) clamp(1.3rem, 1.7vw, 1.9rem);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 6px 18px var(--c-electric-glow);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-cotizar-header:hover {
  background-color: var(--c-electric-blue-hover);
  transform: translateY(-1.5px);
  box-shadow: 0 8px 24px rgba(0, 82, 255, 0.42);
}

.btn-cotizar-header:active {
  transform: translateY(0);
}

/* Zona Central Superior */
.hero-heading-zone {
  position: absolute;
  top: clamp(10%, 12.5%, 15%);
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 860px;
  z-index: 25;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}

.main-heading {
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.06;
  margin-bottom: clamp(0.25rem, 0.5vw, 0.45rem);
}

.heading-black {
  color: var(--c-black);
}

.heading-metallic {
  background: linear-gradient(135deg, #42464d 0%, #767d87 50%, #4f545d 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #555a64;
}

.sub-heading {
  font-size: clamp(0.9rem, 1.15vw, 1.25rem);
  font-weight: 400;
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  margin-bottom: clamp(0.9rem, 1.4vw, 1.5rem);
}

.heading-actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 1.1vw, 1.25rem);
}

.pill-btn {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 0.98vw, 0.98rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(0.65rem, 0.9vw, 0.85rem) clamp(1.6rem, 2.2vw, 2.5rem);
  border-radius: 9999px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.pill-btn-dark {
  background-color: var(--c-black);
  color: var(--c-white);
  border: 1px solid var(--c-black);
  box-shadow: 0 6px 18px rgba(12, 13, 14, 0.16);
}

.pill-btn-dark:hover {
  background-color: #212429;
  border-color: #212429;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 13, 14, 0.24);
}

.pill-btn-light {
  background-color: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: var(--c-black);
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

.pill-btn-light:hover {
  background-color: #ffffff;
  border-color: rgba(0, 0, 0, 0.45);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Flechas Laterales */
.side-arrow {
  position: absolute;
  top: 57%;
  transform: translateY(-50%);
  z-index: 25;
  width: clamp(2.6rem, 3.3vw, 3.6rem);
  height: clamp(2.6rem, 3.3vw, 3.6rem);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.16);
  color: #1a1c20;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.arrow-flank-left {
  left: clamp(1.2rem, 3.2vw, 3.5rem);
}

.arrow-flank-right {
  right: clamp(1.2rem, 3.2vw, 3.5rem);
}

.side-arrow:hover {
  background: #ffffff;
  border-color: rgba(0, 0, 0, 0.4);
  transform: translateY(-50%) scale(1.08);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
  color: var(--c-black);
}

/* Selector Inferior Izquierdo */
.corner-selector-bottom-left {
  position: absolute;
  bottom: clamp(1.8rem, 4.5vw, 3.6rem);
  left: clamp(1.8rem, 4vw, 4rem);
  z-index: 25;
}

.selector-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(0.55rem, 0.9vw, 0.95rem);
}

.selector-choice {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.15rem 0;
  font-family: var(--font-sans);
  text-align: left;
  transition: all 0.25s ease;
}

.choice-bar {
  width: 14px;
  height: 2px;
  background-color: transparent;
  transition: all 0.25s ease;
  border-radius: 2px;
}

.choice-text {
  font-size: clamp(0.72rem, 0.88vw, 0.85rem);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-muted-gray);
  text-transform: uppercase;
  transition: all 0.25s ease;
}

.selector-choice.is-active .choice-text {
  color: var(--c-black);
  font-weight: 800;
}

.selector-choice.is-active .choice-bar {
  width: 22px;
  background-color: var(--c-black);
}

/* Miniaturas Inferiores Derechas */
.corner-thumbnails-bottom-right {
  position: absolute;
  bottom: clamp(1.8rem, 4.5vw, 3.6rem);
  right: clamp(1.8rem, 4vw, 4rem);
  z-index: 25;
}

.thumbnail-strip {
  display: flex;
  align-items: center;
  gap: clamp(0.6rem, 0.85vw, 1rem);
}

.thumbnail-box {
  width: clamp(76px, 7.8vw, 115px);
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
  border: 1.5px solid rgba(0, 0, 0, 0.14);
  padding: 0;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.thumbnail-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.thumbnail-box.is-active {
  border-color: var(--c-black);
  box-shadow: 0 0 0 1.5px var(--c-black), 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* ==========================================================================
   ANIMACIÓN CINEMATOGRÁFICA DE ENTRADA HERO (PAGE LOAD CHOREOGRAPHY)
   ========================================================================== */
@keyframes heroBackdropReveal {
  0% {
    opacity: 0;
    transform: scale(1.06);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@keyframes heroNavbarSlide {
  0% {
    opacity: 0;
    transform: translateY(-20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroElementRise {
  0% {
    opacity: 0;
    transform: translateY(28px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes heroFadeDirect {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.backdrop-bus-img {
  animation: heroBackdropReveal 1.3s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.navbar-header {
  animation: heroNavbarSlide 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.12s both;
}

.main-heading {
  animation: heroElementRise 1s cubic-bezier(0.16, 1, 0.3, 1) 0.25s both;
}

.sub-heading {
  animation: heroElementRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

.heading-actions {
  animation: heroElementRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.corner-selector-bottom-left {
  animation: heroElementRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.7s both;
}

.corner-thumbnails-bottom-right {
  animation: heroElementRise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.8s both;
}

.side-arrow {
  animation: heroFadeDirect 0.8s ease 0.9s both;
}

/* ==========================================================================
   SECCIÓN 2: SERVICIOS ("EL VIAJE QUE NECESITAS")
   ========================================================================== */

.services-section {
  width: 100%;
  background-color: var(--c-bg-pure);
  padding: clamp(5rem, 8vw, 8.5rem) clamp(2rem, 5vw, 6.5rem);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--c-border-hairline);
}

.services-inner-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 5vw, 5rem);
}

.services-top-header {
  max-width: 800px;
}

.services-section-tag {
  display: inline-block;
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-light-gray);
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

.services-main-headline {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: clamp(0.9rem, 1.4vw, 1.4rem);
}

.headline-black {
  color: var(--c-black);
}

.headline-gray {
  color: var(--c-light-gray);
}

.services-subheadline {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 400;
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.services-main-layout {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: clamp(3rem, 6vw, 7rem);
  align-items: center;
}

.services-col-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service-counter-tag {
  font-size: clamp(0.85rem, 1vw, 1rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--c-light-gray);
  margin-bottom: clamp(0.75rem, 1.2vw, 1.2rem);
}

.service-item-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin-bottom: clamp(1rem, 1.5vw, 1.5rem);
  line-height: 1.15;
}

.service-item-description {
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  font-weight: 400;
  line-height: 1.68;
  color: #434954;
  max-width: 500px;
  margin-bottom: clamp(1.8rem, 2.6vw, 2.6rem);
}

.btn-quote-service {
  background-color: var(--c-black);
  color: var(--c-white);
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(0.75rem, 1vw, 0.95rem) clamp(1.8rem, 2.5vw, 2.8rem);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(12, 13, 14, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-quote-service:hover {
  background-color: #212429;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(12, 13, 14, 0.22);
}

.services-col-media {
  display: flex;
  flex-direction: column;
}

.service-media-frame {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
  background-color: #f1f3f6;
  position: relative;
}

.service-media-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity 0.35s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-caption-container {
  margin-top: 1.1rem;
}

.service-caption-badge {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--c-light-gray);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}

.service-caption-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.1);
}

.services-bottom-nav {
  margin-top: clamp(1rem, 2vw, 2rem);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 1.5rem;
}

.services-tab-bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  position: relative;
}

.service-nav-item {
  background: transparent;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1rem 0.5rem 1.4rem 0.5rem;
  text-align: left;
  font-family: var(--font-sans);
  position: relative;
  transition: all 0.25s ease;
}

.nav-item-title {
  font-size: clamp(0.85rem, 1.05vw, 1.05rem);
  font-weight: 500;
  color: var(--c-light-gray);
  transition: color 0.25s ease;
}

.nav-item-indicator {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: var(--c-black);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-nav-item.is-active .nav-item-title {
  color: var(--c-black);
  font-weight: 800;
}

.service-nav-item.is-active .nav-item-indicator {
  width: 100%;
}

.service-nav-item:hover .nav-item-title {
  color: #3b404a;
}

.service-nav-separator {
  width: 1px;
  height: 36px;
  background-color: rgba(0, 0, 0, 0.12);
  margin: 0 1rem;
}

/* ==========================================================================
   SECCIÓN 3: EXPERIENCIA A BORDO ("CADA DETALLE CUENTA")
   ========================================================================== */

/* ==========================================================================
   SECCIÓN 3: EXPLORADOR INTERACTIVO DEL VEHÍCULO («NUESTRO AUTOBÚS»)
   Layout Compacto y Proporcionado para Pantalla Completa (Vehicle Studio)
   ========================================================================== */

.experience-section {
  width: 100%;
  background-color: #f2f4f7;
  padding: clamp(0.8rem, 1.6vh, 1.4rem) clamp(1.2rem, 3vw, 3.5rem);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--c-border-hairline);
  transition: background-color 0.4s ease, border-color 0.4s ease;
  overflow: hidden;
  box-sizing: border-box;
}

/* En pantallas de escritorio: Ocupa el viewport completo con espacio generoso para el autobús */
@media (min-width: 1025px) {
  .experience-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(0.8rem, 1.8vh, 1.5rem) clamp(1.5rem, 3.5vw, 4rem);
    box-sizing: border-box;
  }

  .experience-inner-container {
    max-width: 100% !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    margin: 0 auto !important;
    gap: clamp(0.6rem, 1.4vh, 1.2rem) !important;
  }
}

/* Ocultar el navbar flotante pegajoso cuando el explorador está en pantalla para evitar colisión */
body.in-experience #stickyCapsuleNav {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, -25px) !important;
}

/* Modo Nocturno Suave (Dark Studio Ambiance) */
.experience-section.is-night-mode {
  background-color: #0b0e14;
  border-bottom-color: rgba(255, 255, 255, 0.08);
}

.experience-inner-container {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(0.6rem, 1.2vh, 1rem);
  width: 100%;
}

/* --------------------------------------------------------------------------
   1. Barra Superior del Explorador (Logo, Pestañas Centrales, Idioma & CTA)
   -------------------------------------------------------------------------- */
.exp-top-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0.2rem 0.4rem;
  z-index: 20;
}

.exp-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.exp-brand-logo {
  height: clamp(24px, 2.2vw, 30px);
  width: auto;
  display: block;
}

/* Selector Central Flotante de Tres Pestañas */
.exp-view-tabs {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.is-night-mode .exp-view-tabs {
  background-color: #171b24;
  border-color: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.exp-view-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.76rem, 0.84vw, 0.82rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #64748b;
  padding: 0.42rem 1.05rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.exp-view-tab svg {
  stroke: currentColor;
}

.exp-view-tab:hover {
  color: #111827;
}

.is-night-mode .exp-view-tab {
  color: #94a3b8;
}

.is-night-mode .exp-view-tab:hover {
  color: #ffffff;
}

.exp-view-tab.is-active {
  background-color: #111827;
  color: #ffffff;
  box-shadow: 0 2px 8px rgba(17, 24, 39, 0.25);
}

.is-night-mode .exp-view-tab.is-active {
  background-color: #ffffff;
  color: #0c0f16;
  box-shadow: 0 2px 10px rgba(255, 255, 255, 0.25);
}

/* Lado Derecho de la Barra Superior */
.exp-top-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.exp-lang-pill {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  padding: 2px 4px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.is-night-mode .exp-lang-pill {
  background-color: #171b24;
  border-color: rgba(255, 255, 255, 0.1);
}

.exp-lang-btn {
  background: transparent;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: #64748b;
  padding: 3px 8px;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.18s ease;
}

.exp-lang-btn.is-active {
  background-color: #111827;
  color: #ffffff;
}

.is-night-mode .exp-lang-btn.is-active {
  background-color: #ffffff;
  color: #0c0f16;
}

.exp-lang-sep {
  font-size: 0.72rem;
  color: #cbd5e1;
  margin: 0 1px;
}

.exp-quote-btn {
  background-color: #111827;
  color: #ffffff;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.5rem 1.15rem;
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(17, 24, 39, 0.15);
  transition: all 0.22s ease;
}

.exp-quote-btn:hover {
  background-color: #000000;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.is-night-mode .exp-quote-btn {
  background-color: #ffffff;
  color: #0c0f16;
}

.is-night-mode .exp-quote-btn:hover {
  background-color: #e2e8f0;
}

/* --------------------------------------------------------------------------
   2. Escenario Central Proporcionado (Título Izquierdo, Día/Noche y Autobús)
   -------------------------------------------------------------------------- */
.exp-stage-row {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.4rem 0;
}

/* Columna Izquierda Flotante: Título y Herramientas */
.exp-stage-left {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 15;
  max-width: clamp(210px, 20vw, 290px);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  pointer-events: auto;
}

.exp-section-tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #94a3b8;
  text-transform: uppercase;
}

.exp-main-headline {
  font-size: clamp(1.6rem, 2.5vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.04em;
  color: #0f172a;
  margin: 0;
  transition: color 0.4s ease;
}

.is-night-mode .exp-main-headline {
  color: #ffffff;
}

.exp-subheadline {
  font-size: clamp(0.74rem, 0.85vw, 0.84rem);
  font-weight: 400;
  color: #64748b;
  line-height: 1.4;
  margin: 0;
  transition: color 0.4s ease;
}

.is-night-mode .exp-subheadline {
  color: #94a3b8;
}

/* Micro-herramientas de Vista (Zoom, Fullscreen, Reset) */
.exp-view-tools {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.5rem;
}

.exp-tool-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.exp-tool-btn:hover {
  background-color: #111827;
  color: #ffffff;
  border-color: #111827;
  transform: scale(1.08);
}

.is-night-mode .exp-tool-btn {
  background-color: #171b24;
  border-color: rgba(255, 255, 255, 0.1);
  color: #94a3b8;
}

.is-night-mode .exp-tool-btn:hover {
  background-color: #ffffff;
  color: #0c0f16;
}

/* Esquina Superior Derecha: Switcher Día / Noche */
.exp-stage-right-top {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 15;
}

.exp-daynight-toggle {
  display: inline-flex;
  align-items: center;
  background-color: #ffffff;
  padding: 3px;
  border-radius: 9999px;
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
}

.is-night-mode .exp-daynight-toggle {
  background-color: #171b24;
  border-color: rgba(255, 255, 255, 0.1);
}

.exp-dn-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.82rem;
  border-radius: 9999px;
  border: none;
  outline: none;
  background: transparent;
  color: #64748b;
  font-family: var(--font-sans);
  font-size: 0.76rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.dn-sun-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background-color: #ff6b00;
  color: #ffffff;
}

.exp-dn-btn.is-active {
  background-color: #111827;
  color: #ffffff;
}

.is-night-mode .exp-dn-btn.is-active {
  background-color: #ff6b00;
  color: #ffffff;
}

/* Escenario del Autobús en Corte Lateral */
.exp-cutaway-stage {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.cutaway-viewport-wrapper {
  position: relative;
  width: 100%;
  max-width: clamp(1000px, 92vw, 1580px);
  aspect-ratio: 1024 / 576;
  margin: 0 auto;
  display: block;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.cutaway-viewport-wrapper.is-zoomed {
  transform: scale(1.15);
}

.cutaway-bus-image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: fill;
  filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.06));
  transition: filter 0.45s ease;
  user-select: none;
  -webkit-user-drag: none;
}

.is-night-mode .cutaway-bus-image {
  filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 35px rgba(255, 120, 0, 0.18))
          brightness(0.97);
}

.cutaway-ambient-glow {
  position: absolute;
  inset: 15% 10% 25% 10%;
  background: radial-gradient(ellipse at center, rgba(255, 107, 0, 0.12) 0%, rgba(0, 82, 255, 0.04) 55%, transparent 75%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 1;
}

.is-night-mode .cutaway-ambient-glow {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Hotspots Superpuestos y Cápsula Horizontal Interactiva (Estilo Referencia)
   -------------------------------------------------------------------------- */
.cutaway-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 25;
  display: flex;
  align-items: center;
}

.hotspot-trigger {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  outline: none;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hotspot-badge {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #111827;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 2;
}

.hotspot-pulse-ring {
  position: absolute;
  inset: -2px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 107, 0, 0.6);
  opacity: 0;
  pointer-events: none;
}

.cutaway-hotspot:hover .hotspot-badge {
  transform: scale(1.12);
  border-color: #ff6b00;
}

/* Punto Activo: Naranja ALPEZ */
.cutaway-hotspot.is-active .hotspot-badge {
  background-color: #ff6b00;
  color: #ffffff;
  border-color: #ffffff;
  transform: scale(1.18);
  box-shadow: 0 0 0 4px rgba(255, 107, 0, 0.32), 0 4px 12px rgba(255, 107, 0, 0.4);
}

.cutaway-hotspot.is-active .hotspot-pulse-ring {
  opacity: 1;
  animation: hotspotRadarPing 2s infinite ease-out;
}

@keyframes hotspotRadarPing {
  0% { transform: scale(1); opacity: 0.85; }
  75% { transform: scale(1.85); opacity: 0; }
  100% { transform: scale(2.1); opacity: 0; }
}

/* Cápsula Horizontal Flotante Conectada al Hotspot (Diseño Exacto del Mockup) */
.hotspot-capsule-tag {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  background: #ffffff;
  border-radius: 9999px;
  padding: 3px 12px 3px 4px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  border: 1px solid rgba(0, 0, 0, 0.06);
  white-space: nowrap;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.cutaway-hotspot.is-active .hotspot-capsule-tag,
.cutaway-hotspot:hover .hotspot-capsule-tag {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(-50%) translateX(10px);
}

.capsule-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #ff6b00;
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: 0.68rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.capsule-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
}

.capsule-title {
  font-size: 0.76rem;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.01em;
}

.capsule-sub {
  font-size: 0.65rem;
  color: #64748b;
}

.capsule-arrow {
  font-size: 1rem;
  font-weight: 600;
  color: #94a3b8;
  margin-left: 2px;
}

/* Inversión de Orientación para Puntos a la Derecha del Autobús */
.cutaway-hotspot[data-feature="04"] .hotspot-capsule-tag,
.cutaway-hotspot[data-feature="05"] .hotspot-capsule-tag {
  left: auto;
  right: 100%;
  transform: translateY(-50%) translateX(-6px);
}

.cutaway-hotspot[data-feature="04"].is-active .hotspot-capsule-tag,
.cutaway-hotspot[data-feature="04"]:hover .hotspot-capsule-tag,
.cutaway-hotspot[data-feature="05"].is-active .hotspot-capsule-tag,
.cutaway-hotspot[data-feature="05"]:hover .hotspot-capsule-tag {
  transform: translateY(-50%) translateX(-10px);
}

/* --------------------------------------------------------------------------
   3. Panel Inferior Compacto (Tarjeta Asiento + Plano Superior de 200px)
   -------------------------------------------------------------------------- */
.exp-bottom-panel {
  display: grid;
  grid-template-columns: clamp(280px, 24vw, 380px) 1fr;
  gap: clamp(1rem, 1.6vw, 1.8rem);
  width: 100%;
  align-items: stretch;
  min-height: clamp(175px, 23vh, 215px);
  max-height: clamp(185px, 25vh, 225px);
}

/* Lado Izquierdo: Tarjeta Asiento Compacta con Fondo de Montaña */
.exp-seat-card {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  min-height: clamp(175px, 23vh, 215px);
  max-height: clamp(185px, 25vh, 225px);
  background-color: #171b24;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.seat-card-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  transition: transform 0.4s ease;
  z-index: 1;
}

.exp-seat-card:hover .seat-card-bg {
  transform: scale(1.04);
}

.seat-card-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(12, 15, 22, 0.25) 0%,
    rgba(12, 15, 22, 0.7) 50%,
    rgba(12, 15, 22, 0.94) 100%
  );
  z-index: 2;
}

.seat-card-content {
  position: relative;
  z-index: 5;
  padding: 1rem 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  box-sizing: border-box;
}

.seat-card-icon-pill {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

.seat-card-text-block {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.seat-card-title {
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.seat-card-desc {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.35;
  margin: 0;
}

.seat-card-circle-btn {
  position: absolute;
  right: 1.1rem;
  bottom: 1rem;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: #ffffff;
  color: #111827;
  border: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.seat-card-circle-btn:hover {
  background-color: #ff6b00;
  color: #ffffff;
  transform: scale(1.08);
}

/* Lado Derecho: Categorías, Capacidad y Plano Superior */
.exp-plan-card {
  background-color: #ffffff;
  border-radius: 20px;
  padding: 0.85rem 1.4rem;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 180px;
  max-height: 215px;
  box-sizing: border-box;
  transition: all 0.35s ease;
}

.is-night-mode .exp-plan-card {
  background-color: #171b24;
  border-color: rgba(255, 255, 255, 0.08);
}

.exp-plan-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.exp-categories-nav {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.exp-cat-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  border-radius: 9999px;
  border: 1px solid transparent;
  background-color: transparent;
  color: #4b5563;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.18s ease;
}

.exp-cat-btn svg {
  stroke: currentColor;
}

.exp-cat-btn:hover {
  color: #111827;
}

.is-night-mode .exp-cat-btn {
  color: #94a3b8;
}

.is-night-mode .exp-cat-btn:hover {
  color: #ffffff;
}

/* Categoría Activa: Naranja ALPEZ */
.exp-cat-btn.is-active {
  color: #ff6b00;
  background-color: rgba(255, 107, 0, 0.08);
  border-color: rgba(255, 107, 0, 0.2);
}

.is-night-mode .exp-cat-btn.is-active {
  color: #ff9d42;
  background-color: rgba(255, 107, 0, 0.15);
  border-color: rgba(255, 107, 0, 0.3);
}

.exp-capacity-indicator {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}

.capacity-bold {
  font-size: 0.8rem;
  font-weight: 700;
  color: #111827;
}

.is-night-mode .capacity-bold {
  color: #ffffff;
}

.capacity-sub {
  font-size: 0.65rem;
  color: #94a3b8;
}

.exp-plan-main-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(0.6rem, 1.2vw, 1.2rem);
  width: 100%;
  margin: auto 0;
}

.cat-nav-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  background-color: #ffffff;
  color: #334155;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
  transition: all 0.18s ease;
}

.cat-nav-arrow:hover {
  background-color: #111827;
  color: #ffffff;
  border-color: #111827;
  transform: scale(1.06);
}

.is-night-mode .cat-nav-arrow {
  background-color: #11141c;
  border-color: rgba(255, 255, 255, 0.12);
  color: #ffffff;
}

.is-night-mode .cat-nav-arrow:hover {
  background-color: #ff6b00;
  border-color: #ff6b00;
}

.topview-canvas-wrap {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0;
  overflow: hidden;
}

.topview-bus-image {
  width: 100%;
  height: clamp(118px, 15vh, 146px);
  object-fit: fill;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: 10px;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.05));
  transition: transform 0.25s ease;
}

.topview-zone-highlight {
  position: absolute;
  top: 6%;
  bottom: 6%;
  border-radius: 8px;
  border: 2px dashed #ff6b00;
  background: rgba(255, 107, 0, 0.08);
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.topview-zone-highlight.zone-seats {
  left: 19%;
  right: 21%;
}

.topview-zone-highlight.zone-entertainment {
  left: 24%;
  right: 30%;
}

.topview-zone-highlight.zone-luggage {
  left: 21%;
  right: 26%;
}

.topview-zone-highlight.zone-services {
  left: 80%;
  right: 4%;
}

/* 4. Pie de Sección Discreto */
.exp-section-footer {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 0 0.4rem;
}

.exp-legal-disclaimer {
  font-size: 0.68rem;
  color: #94a3b8;
  text-align: right;
  line-height: 1;
}

.is-night-mode .exp-legal-disclaimer {
  color: #64748b;
}

/* --------------------------------------------------------------------------
   Adaptación Móvil y Responsiva
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .exp-top-bar {
    flex-wrap: wrap;
    gap: 0.8rem;
  }

  .exp-bottom-panel {
    grid-template-columns: 1fr;
  }

  .exp-seat-card {
    min-height: 150px;
    max-height: none;
  }

  .exp-plan-card {
    min-height: 180px;
    max-height: none;
    padding: 1rem 1.2rem;
    gap: 0.8rem;
  }

  .exp-stage-left {
    position: relative;
    max-width: 100%;
    margin-bottom: 0.8rem;
  }

  .exp-stage-right-top {
    position: relative;
    margin-bottom: 0.8rem;
  }

  .exp-stage-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 640px) {
  .exp-view-tabs {
    width: 100%;
    justify-content: space-around;
  }

  .exp-categories-nav {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .cat-nav-arrow {
    display: none;
  }

  .exp-capacity-indicator {
    display: none;
  }
}

/* ==========================================================================
   SECCIÓN 4: CONFIANZA Y SEGURIDAD ("VIAJA CON LA TRANQUILIDAD")
   ========================================================================== */

.trust-section {
  width: 100%;
  background-color: var(--c-bg-pure);
  padding: clamp(5rem, 8vw, 8.5rem) clamp(2rem, 5vw, 6.5rem);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--c-border-hairline);
}

.trust-inner-container {
  max-width: 1400px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(2.5rem, 4vw, 4rem);
}

.trust-top-header {
  max-width: 860px;
}

.trust-section-tag {
  display: inline-block;
  font-size: clamp(0.72rem, 0.85vw, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--c-light-gray);
  text-transform: uppercase;
  margin-bottom: clamp(1rem, 1.6vw, 1.5rem);
}

.trust-main-headline {
  font-size: clamp(2.6rem, 4.6vw, 4.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: clamp(0.9rem, 1.4vw, 1.4rem);
}

.trust-subheadline {
  font-size: clamp(1.05rem, 1.35vw, 1.35rem);
  font-weight: 400;
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.trust-media-frame {
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.08);
  background-color: #eaedf2;
  position: relative;
}

.trust-main-img {
  width: 100%;
  height: auto;
  aspect-ratio: 982 / 244;
  object-fit: cover;
  display: block;
}

.trust-badge-overlay {
  position: absolute;
  bottom: 1.2rem;
  left: 1.4rem;
  z-index: 10;
  pointer-events: none;
}

.badge-conceptual {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(11, 15, 25, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 0.42rem 1.05rem;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.trust-stats-grid {
  display: grid;
  grid-template-columns: 1fr auto 1.15fr auto 1.15fr;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 4rem);
  margin-top: clamp(0.5rem, 1.5vw, 1.8rem);
  padding: 1rem 0;
}

.trust-stat-block {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.stat-number {
  font-size: clamp(2.6rem, 4.2vw, 4.2rem);
  font-weight: 800;
  color: var(--c-black);
  letter-spacing: -0.04em;
  line-height: 1;
}

.stat-title {
  font-size: clamp(1.5rem, 2.2vw, 2.4rem);
  font-weight: 800;
  color: var(--c-black);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}

.stat-description {
  font-size: clamp(0.95rem, 1.1vw, 1.15rem);
  font-weight: 400;
  color: var(--c-subtle-gray);
  line-height: 1.45;
  letter-spacing: -0.01em;
  max-width: 340px;
}

.trust-vertical-divider {
  width: 1px;
  height: 85%;
  min-height: 70px;
  background-color: rgba(0, 0, 0, 0.12);
  align-self: center;
}

.trust-bottom-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: clamp(1.5rem, 2.5vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.trust-motto {
  font-size: clamp(0.95rem, 1.15vw, 1.2rem);
  font-weight: 500;
  color: #555d6b;
  letter-spacing: -0.01em;
}

.trust-action-wrap {
  display: flex;
  justify-content: flex-end;
}

.btn-conoce-alpez {
  background-color: #ffffff;
  color: var(--c-black);
  border: 1px solid var(--c-black);
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 0.96vw, 0.96rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(0.7rem, 0.9vw, 0.88rem) clamp(1.8rem, 2.2vw, 2.5rem);
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-conoce-alpez:hover {
  background-color: var(--c-black);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(12, 13, 14, 0.18);
}

/* ==========================================================================
   SECCIÓN 5: DESTINOS ("DE MONTERREY HACIA DONDE EMPIEZA TU HISTORIA")
   Arquitectura 100% Funcional e Interactiva
   ========================================================================== */

.destinations-section {
  width: 100%;
  background-color: var(--c-bg-pure);
  padding: clamp(3.5rem, 5.5vw, 6rem) clamp(1.5rem, 4vw, 5rem);
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--c-border-hairline);
  scroll-margin-top: 80px;
}

.destinations-stage-container {
  position: relative;
  width: 100%;
  max-width: 1400px;
  min-height: 720px;
  aspect-ratio: 16 / 9.5;
  margin: 0 auto;
  border-radius: 14px;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.04);
  container-type: inline-size;
}

/* Capa del Mapa en Fondo */
.destinations-map-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

.destinations-map-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 18% center;
  display: block;
}

/* Cabecera Superior Izquierda (Texto Real DOM) */
.destinations-top-header {
  position: absolute;
  top: 5.5%;
  left: 3.8%;
  z-index: 10;
  max-width: 60%;
  pointer-events: auto;
}

.destinations-section-tag {
  display: inline-block;
  font-size: clamp(0.72rem, 1.15cqi, 0.85rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--c-light-gray);
  text-transform: uppercase;
  margin-bottom: clamp(0.35rem, 0.7cqi, 0.75rem);
}

.destinations-main-headline {
  font-size: clamp(1.8rem, 3.45cqi, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
  margin-bottom: clamp(0.35rem, 0.6cqi, 0.65rem);
}

.destinations-headline-row {
  display: block;
  white-space: nowrap;
}

.destinations-subheadline {
  font-size: clamp(0.88rem, 1.4cqi, 1.22rem);
  font-weight: 400;
  color: #1f232b;
  letter-spacing: -0.015em;
  line-height: 1.35;
}

/* Divisor Vertical Fino (en x=66%) */
.destinations-vertical-divider {
  position: absolute;
  top: 5%;
  bottom: 5%;
  left: 66%;
  width: 1px;
  background-color: rgba(0, 0, 0, 0.09);
  z-index: 10;
}

/* Columna Derecha: Selector de Países y Botón */
.destinations-right-panel {
  position: absolute;
  top: 5%;
  left: 66%;
  right: 2.5%;
  bottom: 5%;
  padding-left: clamp(1.4rem, 2.4cqi, 3rem);
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  pointer-events: auto;
}

.country-selector-stack {
  display: flex;
  flex-direction: column;
  gap: clamp(0.2rem, 0.35cqi, 0.45rem);
}

.country-choice-item {
  padding: clamp(0.35rem, 0.65cqi, 0.75rem) 0;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
  outline: none;
}

.country-number {
  font-size: clamp(1.6rem, 3.2cqi, 2.8rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #8e95a2;
  transition: color 0.25s ease;
}

.country-name {
  font-size: clamp(1.1rem, 1.8cqi, 1.55rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #8e95a2;
  text-transform: uppercase;
  line-height: 1.15;
  transition: color 0.25s ease;
  margin-top: 0.1cqi;
}

.country-content-body {
  margin-top: 0;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.25s ease;
}

.country-description {
  font-size: clamp(0.8rem, 1.1cqi, 0.94rem);
  font-weight: 400;
  color: #555d6b;
  line-height: 1.48;
  max-width: 100%;
}

/* Estado Activo: Se resalta en negro y muestra la descripción y tags */
.country-choice-item.is-active .country-number,
.country-choice-item.is-active .country-name {
  color: var(--c-black);
}

.country-choice-item.is-active .country-content-body {
  margin-top: clamp(0.35rem, 0.6cqi, 0.65rem);
  max-height: 380px;
  opacity: 1;
  overflow: visible;
}

.country-choice-item:hover:not(.is-active) .country-name {
  color: #4b5260;
}

.country-horizontal-divider {
  width: 100%;
  height: 1px;
  background-color: rgba(0, 0, 0, 0.08);
  margin: 0.2cqi 0;
}

/* Pie del Panel: Botón "Planear mi viaje ↗" y Aviso */
.destinations-footer-box {
  margin-top: clamp(0.6rem, 1.2cqi, 1.4rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.3rem, 0.5cqi, 0.55rem);
}

.btn-plan-trip {
  background-color: var(--c-black);
  color: var(--c-white);
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 1.28cqi, 0.96rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: clamp(0.6rem, 0.85cqi, 0.85rem) clamp(1.4rem, 1.8cqi, 2.2rem);
  border-radius: 9999px;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(12, 13, 14, 0.15);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.btn-plan-trip:hover {
  background-color: #212429;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(12, 13, 14, 0.24);
}

.destinations-disclaimer {
  font-size: clamp(0.68rem, 0.95cqi, 0.78rem);
  color: #8e95a2;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

@media (max-width: 1024px) {
  .destinations-stage-container {
    aspect-ratio: 16 / 9;
  }

  
  .experience-main-layout {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }
  .experience-cta-wrap {
    justify-content: flex-start;
  }
  .trust-stats-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .trust-vertical-divider {
    display: none;
  }
  .trust-bottom-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  .services-main-layout {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  .services-tab-bar {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .service-nav-separator {
    display: none;
  }
  .service-nav-item {
    padding: 0.8rem 0;
  }
}

/* ==========================================================================
   MODAL DE COTIZACIÓN
   ========================================================================== */

.quote-dialog {
  margin: auto;
  border: none;
  background: transparent;
  padding: 1.5rem;
  max-width: 520px;
  width: 92%;
  border-radius: 20px;
}

.quote-dialog::backdrop {
  background: rgba(12, 13, 14, 0.58);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.dialog-inner {
  background: #ffffff;
  border-radius: 20px;
  padding: 2.2rem;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.dialog-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}

.dialog-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--c-electric-blue);
  margin-bottom: 0.25rem;
}

.dialog-title {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--c-black);
  letter-spacing: -0.02em;
}

.btn-close-dialog {
  background: #f1f2f5;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  color: #555;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-close-dialog:hover {
  background: #e3e6ea;
  color: #000;
}

.dialog-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.field-item label {
  font-size: 0.78rem;
  font-weight: 600;
  color: #555c68;
}

.field-item input {
  font-family: var(--font-sans);
  font-size: 0.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid #dbe0e8;
  border-radius: 10px;
  background-color: #fafbfc;
  color: var(--c-black);
  outline: none;
  transition: all 0.2s ease;
}

.field-item input:focus {
  border-color: var(--c-electric-blue);
  background-color: #fff;
  box-shadow: 0 0 0 3px var(--c-electric-glow);
}

.btn-submit-quote {
  background-color: var(--c-electric-blue);
  color: var(--c-white);
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.85rem 1.5rem;
  border-radius: 12px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

.btn-submit-quote:hover {
  background-color: var(--c-electric-blue-hover);
  box-shadow: 0 6px 20px var(--c-electric-glow);
}

/* ==========================================================================
   MEJORAS DE ULTRALUJO: NAVBAR CÁPSULA FLOTANTE
   ========================================================================== */

.sticky-capsule-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translate(-50%, -100px);
  opacity: 0;
  pointer-events: none;
  z-index: 1000;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.sticky-capsule-nav.is-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.capsule-inner {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 1.3vw, 1.5rem);
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0.4rem 0.45rem 0.4rem 1.4rem;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.09), 0 2px 6px rgba(0, 0, 0, 0.04);
}

.capsule-brand {
  text-decoration: none;
  display: flex;
  align-items: center;
  transition: transform 0.2s ease;
}

.capsule-brand:hover {
  transform: scale(1.02);
}

.capsule-brand-logo {
  height: 28px;
  width: auto;
  object-fit: contain;
  display: block;
}

.capsule-menu {
  display: flex;
  align-items: center;
  gap: 1.4rem;
}

.capsule-link {
  font-family: var(--font-sans);
  font-size: 0.82rem;
  font-weight: 600;
  color: #58616f;
  text-decoration: none;
  transition: color 0.2s ease;
}

.capsule-link:hover {
  color: var(--c-electric-blue);
}

.capsule-cta-btn {
  background: var(--c-black);
  color: var(--c-white);
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}

.capsule-cta-btn:hover {
  background: var(--c-electric-blue);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px var(--c-electric-glow);
}

/* ==========================================================================
   MEJORAS SECCIÓN SERVICIOS: BARRA DE AUTO-PROGRESO Y TRANSICIONES SUAVES
   ========================================================================== */

.service-nav-item {
  position: relative;
  overflow: hidden;
}

.service-tab-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 2px;
  overflow: hidden;
}

.service-tab-progress .progress-fill {
  display: block;
  width: 0%;
  height: 100%;
  background: var(--c-electric-blue);
  transition: width 0.1s linear;
}

.service-media-frame {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.service-media-img {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ==========================================================================
   MEJORAS SECCIÓN EXPERIENCIA: MODO DÍA/NOCHE & TOOLTIPS FLOTANTES GLASS
   ========================================================================== */

.ambient-switch-container {
  position: absolute;
  top: 1.2rem;
  right: 1.3rem;
  z-index: 25;
}

.ambient-switch-pill {
  display: flex;
  align-items: center;
  background: rgba(12, 13, 14, 0.72);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  padding: 3px;
  gap: 3px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}

.ambient-mode-btn {
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ambient-mode-btn:hover {
  color: #ffffff;
}

.ambient-mode-btn.is-active {
  background: rgba(255, 255, 255, 0.95);
  color: #0c0d0e;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.experience-night-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 65% 35%, rgba(12, 28, 70, 0.55), rgba(4, 9, 24, 0.88));
  mix-blend-mode: multiply;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 5;
}

.experience-photo-frame.is-night .experience-night-overlay {
  opacity: 1;
}

/* ==========================================================================
   MEJORAS DE DISEÑO DE ULTRALUJO (SPOTLIGHT, BOARDING PASS, WATERMARKS, HUD)
   ========================================================================== */

/* 1. BARRA ULTRAMINIMALISTA DE PROGRESO DE LECTURA / SCROLL */
.scroll-progress-line {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2.5px;
  background: linear-gradient(90deg, #ff6b00 0%, #0052ff 65%, #6366f1 100%);
  box-shadow: 0 0 10px rgba(0, 82, 255, 0.7);
  z-index: 99999;
  pointer-events: none;
  transition: width 0.08s linear;
}

/* 2. TRANSICIÓN DEGRADADA AL PIE DEL HERO & INDICADOR SCROLL */
.hero-canvas::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.45) 60%, #ffffff 100%);
  pointer-events: none;
  z-index: 12;
}

.hero-scroll-indicator {
  position: absolute;
  bottom: clamp(1rem, 2vw, 1.8rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s ease, transform 0.3s ease;
  animation: heroFadeDirect 1s ease 1s both;
}

.hero-scroll-indicator:hover {
  opacity: 1;
  transform: translateX(-50%) translateY(2px);
}

.scroll-indicator-text {
  font-family: var(--font-sans);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: #7b8494;
  text-transform: uppercase;
}

.scroll-indicator-track {
  width: 1.5px;
  height: 26px;
  background: rgba(0, 0, 0, 0.14);
  position: relative;
  overflow: hidden;
  border-radius: 999px;
}

.scroll-indicator-beam {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(180deg, transparent 0%, var(--c-electric-blue) 100%);
  animation: scrollBeamSlide 2s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes scrollBeamSlide {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    transform: translateY(220%);
    opacity: 0;
  }
}

/* 3. NÚMEROS EDITORIALES ARQUITECTÓNICOS EN MARCA DE AGUA */
.services-section,
.experience-section,
.trust-section,
.destinations-section,
.faq-editorial-section,
.planner-tool-section {
  position: relative;
  overflow: hidden;
}

.section-watermark-number {
  display: none;
}

/* 4. CURSOR SPOTLIGHT EFFECT EN TARJETAS GLASSMORPHISM */
.has-spotlight {
  position: relative;
  isolation: isolate;
}

.has-spotlight::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    520px circle at var(--mouse-x, -999px) var(--mouse-y, -999px),
    rgba(0, 82, 255, 0.08) 0%,
    rgba(0, 82, 255, 0.02) 40%,
    transparent 65%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* 5. HOTSPOTS CABINA HUD CON SEGUNDO ANILLO RADAR */
.hotspot-pin::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(0, 82, 255, 0.45);
  animation: hotspotPulse 2.8s infinite 1.4s ease-out;
  pointer-events: none;
}

/* 6. REDISEÑO ESTILO BOARDING PASS VIP (SIMULADOR DE VIAJE) */
.boarding-pass-card {
  background: #ffffff;
  border-radius: 20px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.boarding-pass-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.6rem;
  background: #f8fafc;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  color: #0c0d10;
}

.bp-airline-pill {
  display: block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: #ff6b00;
  text-transform: uppercase;
}

.bp-serial-code {
  font-size: 0.65rem;
  color: #64748b;
  font-family: monospace;
  letter-spacing: 0.06em;
}

.bp-stamp-guarantee {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: #059669;
  background: rgba(16, 185, 129, 0.09);
  border: 1px solid rgba(16, 185, 129, 0.25);
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
}

.boarding-pass-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 1.8rem 1.1rem 1.8rem;
  background: #ffffff;
}

.bp-route-node {
  display: flex;
  flex-direction: column;
}

.bp-city-code {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0b0f19;
  line-height: 1;
}

.bp-city-name {
  font-size: 0.78rem;
  font-weight: 600;
  color: #64748b;
  margin-top: 0.2rem;
}

.bp-flight-vector {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 1.2rem;
  position: relative;
}

.bp-vector-line {
  width: 100%;
  height: 2px;
  background: repeating-linear-gradient(90deg, #0052ff, #0052ff 6px, transparent 6px, transparent 12px);
}

.bp-vector-bus {
  position: absolute;
  top: -8px;
  background: #ffffff;
  color: var(--c-electric-blue);
  padding: 0 6px;
}

.bp-flight-duration {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--c-electric-blue);
  letter-spacing: 0.08em;
  margin-top: 0.6rem;
  text-transform: uppercase;
}

.boarding-pass-perforation {
  display: flex;
  align-items: center;
  position: relative;
  margin: 0.3rem 0;
}

.perf-circle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #f7f9fc;
  border: 1px solid rgba(0, 0, 0, 0.08);
  position: absolute;
  z-index: 5;
}

.perf-circle.left {
  left: -10px;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.04);
}

.perf-circle.right {
  right: -10px;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.04);
}

.perf-line {
  flex: 1;
  height: 1px;
  border-top: 1.5px dashed rgba(0, 0, 0, 0.12);
}

.boarding-pass-body {
  padding: 1.2rem 1.8rem 1.6rem 1.8rem;
  background: #ffffff;
}

.boarding-barcode-wrap {
  margin: 1.3rem 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}

.barcode-bars {
  width: 75%;
  height: 32px;
  background: repeating-linear-gradient(
    90deg,
    #1e293b 0px,
    #1e293b 2px,
    transparent 2px,
    transparent 5px,
    #1e293b 5px,
    #1e293b 9px,
    transparent 9px,
    transparent 11px,
    #1e293b 11px,
    #1e293b 14px,
    transparent 14px,
    transparent 16px,
    #1e293b 16px,
    #1e293b 17px
  );
  opacity: 0.75;
}

.barcode-number {
  font-family: monospace;
  font-size: 0.65rem;
  font-weight: 700;
  color: #64748b;
  letter-spacing: 0.18em;
}

/* 7. REDISEÑO PREMIUM DE LA TABLA COMPARATIVA */
.comparison-col.col-alpez {
  border: 1.5px solid rgba(0, 82, 255, 0.35);
  box-shadow: 0 16px 40px rgba(0, 82, 255, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  position: relative;
}

.comparison-col.col-alpez::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3.5px;
  background: linear-gradient(90deg, #ff6b00 0%, #0052ff 50%, #4f46e5 100%);
  border-radius: 16px 16px 0 0;
}

.comparison-col.col-alpez .alpez-badge {
  background: linear-gradient(135deg, #0052ff 0%, #0037a8 100%);
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(0, 82, 255, 0.35);
}

.comparison-col.col-alpez .comp-icon.good-icon {
  background: rgba(0, 82, 255, 0.1);
  color: var(--c-electric-blue);
  box-shadow: 0 2px 8px rgba(0, 82, 255, 0.2);
}

.experience-photo-frame.is-night .experience-main-img {
  filter: brightness(0.85) contrast(1.12) saturate(1.1);
}

.experience-photo-frame:hover .experience-main-img {
  transform: scale(1.02);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Tooltips Flotantes Glassmorphism de los Hotspots */
.pin-floating-tooltip {
  position: absolute;
  width: 220px;
  background: rgba(12, 13, 14, 0.9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 0.65rem 0.85rem;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
  color: #fff;
  pointer-events: none;
  opacity: 0;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 40;
  text-align: left;
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
}

.tooltip-pos-right {
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
}

.hotspot-pin:hover .tooltip-pos-right,
.hotspot-pin.is-active .tooltip-pos-right {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
  pointer-events: auto;
}

.tooltip-pos-bottom {
  top: calc(100% + 12px);
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
}

.hotspot-pin:hover .tooltip-pos-bottom,
.hotspot-pin.is-active .tooltip-pos-bottom {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}

.tooltip-badge {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 800;
  background: var(--c-electric-blue);
  color: #ffffff;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}

.tooltip-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.tooltip-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.25;
}

.tooltip-sub {
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.35;
}

/* ==========================================================================
   MEJORAS SECCIÓN CONFIANZA: FOCUS HOVER DIMMING & CONTADOR
   ========================================================================== */

.trust-stats-grid {
  transition: opacity 0.3s ease;
}

.trust-stat-block {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  padding: 0.6rem 0;
  border-radius: 12px;
}

.trust-stats-grid.has-focus .trust-stat-block:not(.is-hovered) {
  opacity: 0.35;
}

.trust-stat-block.is-hovered {
  transform: translateY(-3px);
}

.stat-number {
  display: flex;
  align-items: baseline;
  font-size: clamp(2.8rem, 4.2vw, 4.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-black);
}

.stat-plus {
  color: var(--c-electric-blue);
  margin-left: 2px;
  font-size: 0.8em;
}

/* ==========================================================================
   MEJORAS SECCIÓN DESTINOS: RADAR BEACON & RUTAS SVG DINÁMICAS
   ========================================================================== */

.monterrey-radar-beacon {
  position: absolute;
  transform: translate(-50%, -50%);
  z-index: 10;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
}

.radar-core {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #ff6b00;
  box-shadow: 0 0 10px #ff6b00;
  z-index: 2;
}

.radar-wave {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 107, 0, 0.7);
  pointer-events: none;
}

.wave-1 {
  animation: radarPing 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1);
}

.wave-2 {
  animation: radarPing 2.4s infinite cubic-bezier(0.16, 1, 0.3, 1) 0.8s;
}

@keyframes radarPing {
  0% {
    width: 9px;
    height: 9px;
    opacity: 0.95;
    transform: scale(1);
  }
  100% {
    width: 65px;
    height: 65px;
    opacity: 0;
    transform: scale(1);
  }
}

.destinations-route-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 8;
  overflow: visible;
}

.route-arc {
  fill: none;
  stroke: url(#routeGradMexico);
  stroke-width: 2.8px;
  stroke-linecap: round;
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  opacity: 0;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.route-arc.route-usa {
  stroke: url(#routeGradUSA);
}

.route-arc.route-canada {
  stroke: url(#routeGradCanada);
}

.route-arc.is-active {
  stroke-dashoffset: 0;
  opacity: 1;
  filter: drop-shadow(0 3px 10px rgba(0, 82, 255, 0.45));
}

.route-beam {
  fill: none;
  stroke: #ffffff;
  stroke-width: 3.5px;
  stroke-linecap: round;
  stroke-dasharray: 24 300;
  stroke-dashoffset: 324;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.route-beam.is-active {
  opacity: 1;
  animation: laserTravel 2.4s linear infinite;
  filter: drop-shadow(0 0 4px #ffffff) drop-shadow(0 0 10px #0052ff);
}

@keyframes laserTravel {
  0% {
    stroke-dashoffset: 324;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.route-endpoint {
  fill: var(--c-electric-blue);
  stroke: #ffffff;
  stroke-width: 2;
  opacity: 0;
  transition: opacity 0.4s ease 0.45s;
}

.route-endpoint.is-active {
  opacity: 1;
}

.route-time-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.8rem;
}

.route-pill {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  background: #f1f3f6;
  color: #4b5360;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  letter-spacing: -0.01em;
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

.country-choice-item.is-active .route-pill {
  background: rgba(0, 82, 255, 0.08);
  color: var(--c-electric-blue);
  border-color: rgba(0, 82, 255, 0.16);
}

/* ==========================================================================
   FOOTER EDITORIAL DE ULTRALUJO (FONDO BLANCO / LUXURY LIGHT)
   ========================================================================== */

.site-luxury-footer {
  background-color: #ffffff;
  color: #1f242e;
  padding: clamp(4.5rem, 6.5vw, 6.5rem) 0 clamp(2.2rem, 3.5vw, 3rem);
  border-top: 1px solid var(--c-border-hairline);
}

.footer-inner-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.footer-top-grid {
  display: grid;
  grid-template-columns: 2fr 1.2fr 1.2fr 1.5fr;
  gap: clamp(2rem, 4vw, 4.5rem);
  margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.footer-brand-logo {
  display: inline-block;
  background: transparent;
  padding: 0;
  margin-bottom: 1.2rem;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-brand-logo:hover {
  transform: translateY(-2px);
}

.footer-logo-img {
  height: 34px;
  width: auto;
  object-fit: contain;
  display: block;
}

.footer-brand-bio {
  font-size: 0.88rem;
  line-height: 1.6;
  color: #555d6b;
  margin-bottom: 1.4rem;
  max-width: 360px;
}

.footer-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #059669;
  background: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.24);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: liveStatusGlow 2s infinite ease-in-out;
}

@keyframes liveStatusGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.85); }
}

.footer-col-title {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #0c0d10;
  margin-bottom: 1.2rem;
}

.footer-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.footer-link {
  font-size: 0.86rem;
  color: #555d6b;
  text-decoration: none;
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.footer-link:hover {
  color: var(--c-electric-blue);
  transform: translateX(3px);
}

.footer-contact-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  margin-bottom: 0.85rem;
}

.contact-lbl {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8e95a2;
  font-weight: 600;
}

.contact-val {
  font-size: 0.86rem;
  color: #1f242e;
  font-weight: 600;
}

.contact-link {
  text-decoration: none;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--c-electric-blue);
}

.btn-footer-quote {
  margin-top: 0.6rem;
  background: var(--c-electric-blue);
  color: #ffffff;
  border: none;
  font-family: var(--font-sans);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.65rem 1.2rem;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-footer-quote:hover {
  background: var(--c-electric-blue-hover);
  box-shadow: 0 6px 18px var(--c-electric-glow);
}

.footer-bottom-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--c-border-hairline);
  padding-top: 2rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer-copyright {
  font-size: 0.8rem;
  color: #8e95a2;
}

.footer-legal-links {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.legal-link {
  font-size: 0.8rem;
  color: #636b7b;
  text-decoration: none;
  transition: color 0.2s ease;
}

.legal-link:hover {
  color: #d1d5db;
}

.legal-sep {
  color: #424957;
  font-size: 0.7rem;
}

/* ==========================================================================
   BOTÓN FLOTANTE CONCIERGE WHATSAPP
   ========================================================================== */

.floating-concierge-wrap {
  position: fixed;
  bottom: 26px;
  right: 28px;
  z-index: 999;
}

.floating-concierge-pill {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #0c0d0e;
  padding: 0.6rem 1.15rem 0.6rem 0.9rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  font-family: var(--font-sans);
}

.floating-concierge-pill:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 38px rgba(0, 0, 0, 0.18);
  border-color: rgba(37, 211, 102, 0.4);
}

.concierge-live-pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 10px #25d366;
  animation: liveStatusGlow 2s infinite ease-in-out;
}

.concierge-icon {
  display: flex;
  align-items: center;
  color: #25d366;
}

.concierge-text {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #0c0d0e;
}

.concierge-arrow {
  font-size: 0.85rem;
  color: #6b7280;
  font-weight: 600;
  transition: transform 0.2s ease;
}

.floating-concierge-pill:hover .concierge-arrow {
  transform: translate(2px, -2px);
  color: #25d366;
}

/* ==========================================================================
   FICHA TÉCNICA EJECUTIVA DE SERVICIOS (DATOS REALES ALPEZ)
   ========================================================================== */

.service-specs-box {
  margin: 1.4rem 0 1.6rem;
  padding: 1.1rem 1.3rem;
  background: #f8f9fb;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  transition: all 0.3s ease;
}

.spec-row {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  font-size: clamp(0.78rem, 0.88vw, 0.85rem);
  line-height: 1.4;
}

.spec-label {
  font-weight: 700;
  color: var(--c-black);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.spec-val {
  color: var(--c-subtle-gray);
  font-weight: 400;
  transition: opacity 0.2s ease;
}

/* ==========================================================================
   ESTÁNDARES Y REGULACIONES OFICIALES (U.S. DOT, GPS, ANTIDOPING)
   ========================================================================== */

.trust-regulations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin: 2.2rem 0 2.5rem;
  padding: 1.6rem;
  background: #f8f9fb;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.05);
}

.reg-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.reg-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.reg-badge-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0, 82, 255, 0.08);
  border: 1px solid rgba(0, 82, 255, 0.22);
  color: var(--c-electric-blue);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.reg-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reg-title {
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 0.92vw, 0.9rem);
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.reg-desc {
  font-family: var(--font-sans);
  font-size: clamp(0.72rem, 0.8vw, 0.78rem);
  color: var(--c-subtle-gray);
  line-height: 1.4;
}

/* ==========================================================================
   FRANJA EDITORIAL DE REPUTACIÓN Y TESTIMONIOS (SOCIAL PROOF)
   ========================================================================== */

.testimonials-editorial-section {
  padding: clamp(5rem, 7.5vw, 8rem) 0;
  background-color: #fafbfc;
  border-top: 1px solid var(--c-border-hairline);
  border-bottom: 1px solid var(--c-border-hairline);
}

.testimonials-inner-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.testimonials-top-header {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  max-width: 800px;
}

.testimonials-section-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.88vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: clamp(0.75rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
}

.testimonials-headline {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.4vw, 3.2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: clamp(0.8rem, 1.2vw, 1.2rem);
}

.testimonials-subheadline {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 2.5vw, 2.5rem);
}

.testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: clamp(1.8rem, 2.4vw, 2.4rem);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.testimonial-card.is-corporate {
  border-color: rgba(0, 82, 255, 0.25);
  box-shadow: 0 8px 30px rgba(0, 82, 255, 0.06);
}

.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stars-gold {
  color: #f59e0b;
  font-size: 1rem;
  letter-spacing: 2px;
}

.testimonial-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: #f1f3f6;
  color: #4b5360;
}

.badge-blue {
  background: rgba(0, 82, 255, 0.08);
  color: var(--c-electric-blue);
  border: 1px solid rgba(0, 82, 255, 0.18);
}

.testimonial-quote {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  font-weight: 400;
  line-height: 1.6;
  color: #2b303a;
  letter-spacing: -0.01em;
  font-style: italic;
}

.testimonial-footer {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  padding-top: 1rem;
}

.author-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: -0.015em;
}

.author-type {
  font-size: 0.75rem;
  color: var(--c-subtle-gray);
}

/* ==========================================================================
   RESPONSIVE PARA NUEVOS ELEMENTOS
   ========================================================================== */

@media (max-width: 900px) {
  .header-cta-wrapper {
    gap: 0.5rem;
  }
  .lang-btn {
    padding: 3px 6px;
    font-size: 0.7rem;
  }
  .sticky-capsule-nav {
    display: none;
  }
  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .floating-concierge-wrap {
    bottom: 18px;
    right: 18px;
  }
  .pin-floating-tooltip {
    display: none;
  }
  .trust-regulations-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   BARRA DE GARANTÍAS REALES (SECCIÓN SERVICIOS)
   ========================================================================== */

.service-guarantees-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 0.8rem;
  margin-top: 1.2rem;
}

.guarantee-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-sans);
  font-size: clamp(0.74rem, 0.84vw, 0.82rem);
  font-weight: 600;
  color: #3b424e;
  background: #f1f3f6;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.chip-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-electric-blue);
}

/* ==========================================================================
   BANNER DE FILOSOFÍA CORPORATIVA ALPEZ (SECCIÓN CONFIANZA)
   ========================================================================== */

.trust-philosophy-banner {
  margin: 2.2rem 0;
  padding: clamp(1.4rem, 2.2vw, 2rem) clamp(1.6rem, 2.6vw, 2.4rem);
  background: linear-gradient(135deg, #f7f9fc 0%, #edf1f7 100%);
  border-left: 3px solid var(--c-electric-blue);
  border-radius: 0 16px 16px 0;
}

.philosophy-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: 0.6rem;
}

.philosophy-quote {
  font-family: var(--font-sans);
  font-size: clamp(0.95rem, 1.15vw, 1.15rem);
  font-weight: 500;
  line-height: 1.55;
  color: #1a1e24;
  letter-spacing: -0.015em;
  font-style: normal;
}

/* ==========================================================================
   SECCIÓN 6: PREGUNTAS FRECUENTES (FAQ EDITORIAL)
   ========================================================================== */

.faq-editorial-section {
  padding: clamp(5.5rem, 8vw, 8.5rem) 0;
  background-color: #ffffff;
  border-top: 1px solid var(--c-border-hairline);
}

.faq-inner-container {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
}

.faq-top-header {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  max-width: 750px;
}

.faq-section-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.88vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: clamp(0.75rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
}

.faq-main-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: clamp(0.8rem, 1.2vw, 1.2rem);
}

.faq-subheadline {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.faq-accordion-stack {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--c-border-hairline);
}

.faq-item {
  border-bottom: 1px solid var(--c-border-hairline);
  transition: background-color 0.2s ease;
}

.faq-item[open] {
  background-color: #fafbfc;
}

.faq-question {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1.2rem, 1.8vw, 1.8rem) 0.5rem;
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.25vw, 1.25rem);
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: -0.02em;
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.2s ease;
}

.faq-question::-webkit-details-marker {
  display: none;
}

.faq-question:hover {
  color: var(--c-electric-blue);
}

.faq-toggle-icon {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--c-subtle-gray);
  transition: transform 0.25s ease, color 0.2s ease;
  line-height: 1;
}

.faq-item[open] .faq-toggle-icon {
  transform: rotate(45deg);
  color: var(--c-electric-blue);
}

.faq-answer {
  padding: 0 0.5rem clamp(1.4rem, 2vw, 2rem) 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.faq-answer p {
  font-family: var(--font-sans);
  font-size: clamp(0.92rem, 1.05vw, 1.02rem);
  line-height: 1.65;
  color: #454d5a;
  letter-spacing: -0.01em;
}

.faq-answer strong {
  color: var(--c-black);
  font-weight: 600;
}

/* ==========================================================================
   DYNAMIC SPOTLIGHT GLOW ON FROSTED GLASS
   ========================================================================== */
.has-spotlight {
  position: relative;
  overflow: hidden;
}

.has-spotlight::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(
    600px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
    rgba(0, 82, 255, 0.08),
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

.has-spotlight:hover::before {
  opacity: 1;
}

/* ==========================================================================
   FLOATING TELEMETRY CHIPS OVERLAY (SECCIÓN EXPERIENCIA)
   ========================================================================== */
.telemetry-chips-overlay {
  position: absolute;
  bottom: 24px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  z-index: 10;
  pointer-events: none;
}

.telemetry-chip-glass {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(12, 13, 16, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: #ffffff;
  font-family: var(--font-sans);
  font-size: clamp(0.74rem, 0.84vw, 0.82rem);
  font-weight: 600;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  letter-spacing: -0.01em;
  transition: transform 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}

.telemetry-chip-glass:hover {
  transform: translateY(-2px);
  background: rgba(12, 13, 16, 0.88);
  border-color: rgba(0, 82, 255, 0.6);
}

.telemetry-chip-icon {
  font-size: 0.9rem;
}

.telemetry-pulse-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: liveStatusGlow 2s infinite ease-in-out;
}

/* ==========================================================================
   PLANO ESQUEMÁTICO 2D Y BOTÓN DE APERTURA (SECCIÓN EXPERIENCIA)
   ========================================================================== */
.experience-cta-wrap {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.btn-toggle-floorplan {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #ffffff;
  color: var(--c-black);
  border: 1px solid rgba(0, 0, 0, 0.12);
  padding: 0.75rem 1.3rem;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-size: clamp(0.82rem, 0.9vw, 0.88rem);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-toggle-floorplan:hover {
  background: #f8f9fb;
  border-color: var(--c-electric-blue);
  color: var(--c-electric-blue);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 82, 255, 0.12);
}

.btn-floorplan-icon {
  font-size: 1rem;
}

.bus-floorplan-drawer {
  margin-top: 2.5rem;
  border-radius: 20px;
  background: #0f1115;
  color: #f1f3f6;
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25);
  overflow: hidden;
  animation: slideFloorplanDown 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes slideFloorplanDown {
  from {
    opacity: 0;
    transform: translateY(-16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.floorplan-card-inner {
  padding: clamp(1.6rem, 2.8vw, 2.8rem);
}

.floorplan-card-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding-bottom: 1.2rem;
}

.floorplan-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: 0.4rem;
}

.floorplan-heading {
  font-family: var(--font-sans);
  font-size: clamp(1.2rem, 1.6vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.btn-close-floorplan {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-close-floorplan:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: rotate(90deg);
}

.bus-schematic-blueprint {
  display: flex;
  flex-direction: column;
  gap: 1.8rem;
}

.blueprint-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.8rem;
  color: #a0a6b4;
}

.leg-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.leg-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 5px;
  font-size: 0.65rem;
  font-weight: 700;
}

.seat-box {
  background: rgba(0, 82, 255, 0.25);
  border: 1px solid rgba(0, 82, 255, 0.6);
}

.plug-box {
  background: rgba(245, 158, 11, 0.2);
  border: 1px solid rgba(245, 158, 11, 0.6);
  color: #fbbf24;
}

.exit-box {
  background: rgba(239, 68, 68, 0.2);
  border: 1px solid rgba(239, 68, 68, 0.6);
}

.wc-box {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.6);
  color: #34d399;
}

.blueprint-bus-body {
  border: 2px dashed rgba(255, 255, 255, 0.16);
  border-radius: 36px 36px 16px 16px;
  padding: 1.8rem 1.4rem;
  background: rgba(255, 255, 255, 0.02);
}

.blueprint-nose {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.2rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 999px;
  font-size: 0.78rem;
  color: #94a3b8;
  font-weight: 600;
}

.entry-door {
  color: #10b981;
  font-weight: 700;
}

.blueprint-seating-grid {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-width: 650px;
  margin: 0 auto;
}

.b-row {
  display: grid;
  grid-template-columns: 46px 46px 1fr 46px 46px;
  gap: 0.5rem;
  align-items: center;
}

.b-seat {
  height: 38px;
  background: rgba(0, 82, 255, 0.15);
  border: 1px solid rgba(0, 82, 255, 0.4);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.74rem;
  font-weight: 700;
  color: #93c5fd;
  transition: all 0.2s ease;
}

.b-seat:hover {
  background: rgba(0, 82, 255, 0.45);
  color: #ffffff;
  transform: scale(1.08);
}

.b-seat.em {
  border-color: rgba(239, 68, 68, 0.6);
  background: rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.b-aisle {
  text-align: center;
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.3);
  font-weight: 600;
}

.em-text {
  color: #ef4444;
}

.row-dots .b-seat {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.3);
}

.back-row {
  display: grid;
  grid-template-columns: repeat(6, 1fr) 110px;
  gap: 0.4rem;
  margin-top: 0.6rem;
}

.b-wc {
  background: rgba(16, 185, 129, 0.2);
  border: 1px solid rgba(16, 185, 129, 0.5);
  color: #34d399;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0 0.5rem;
}

.blueprint-rear {
  text-align: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
  font-size: 0.75rem;
  color: #64748b;
  font-weight: 600;
}

/* ==========================================================================
   COMPARADOR VISUAL: TRANSPORTE CONVENCIONAL VS. ESTÁNDAR ALPEZ
   ========================================================================== */
.luxury-comparison-card {
  margin: 3.5rem 0 2.5rem;
  background: #ffffff;
  border-radius: 24px;
  padding: clamp(2rem, 3.2vw, 3.2rem);
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.04);
}

.comparison-header {
  margin-bottom: clamp(1.8rem, 2.5vw, 2.5rem);
  max-width: 820px;
}

.comparison-tag {
  display: inline-block;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: 0.5rem;
}

.comparison-title {
  font-family: var(--font-sans);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--c-black);
  margin-bottom: 0.6rem;
}

.comparison-subtitle {
  font-size: clamp(0.92rem, 1.05vw, 1.05rem);
  color: var(--c-subtle-gray);
  line-height: 1.5;
}

.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.2rem, 2vw, 2rem);
}

.comparison-col {
  border-radius: 18px;
  padding: clamp(1.4rem, 2vw, 2rem);
  display: flex;
  flex-direction: column;
}

.col-traditional {
  background: #fbfbfc;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.col-alpez {
  background: linear-gradient(145deg, #f8faff 0%, #f0f4fd 100%);
  border: 1.5px solid rgba(0, 82, 255, 0.22);
  box-shadow: 0 12px 32px rgba(0, 82, 255, 0.06);
  position: relative;
}

.col-head {
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.col-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.28rem 0.75rem;
  border-radius: 999px;
  margin-bottom: 0.6rem;
  letter-spacing: 0.02em;
}

.bad-badge {
  background: #f1f3f6;
  color: #636b7b;
}

.alpez-badge {
  background: var(--c-electric-blue);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 82, 255, 0.3);
}

.col-tier-title {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.35vw, 1.35rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--c-black);
}

.col-features-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.comp-item {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}

.comp-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
  margin-top: 2px;
}

.bad-icon {
  background: #fee2e2;
  color: #dc2626;
}

.good-icon {
  background: #dbeafe;
  color: var(--c-electric-blue);
}

.comp-content strong {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(0.85rem, 0.95vw, 0.95rem);
  font-weight: 700;
  color: var(--c-black);
  margin-bottom: 0.2rem;
  letter-spacing: -0.01em;
}

.comp-content p {
  font-size: clamp(0.78rem, 0.86vw, 0.86rem);
  line-height: 1.45;
  color: #555d6b;
}

/* ==========================================================================
   SECCIÓN: SIMULADOR INTERACTIVO DE ITINERARIO & FLOTA (ALPEZ PLANNER)
   ========================================================================== */
.planner-tool-section {
  padding: clamp(5.5rem, 8vw, 8.5rem) 0;
  background-color: #f7f9fc;
  border-top: 1px solid var(--c-border-hairline);
  border-bottom: 1px solid var(--c-border-hairline);
}

.planner-inner-container {
  width: 90%;
  max-width: 1400px;
  margin: 0 auto;
}

.planner-top-header {
  margin-bottom: clamp(2.5rem, 4vw, 4rem);
  max-width: 820px;
}

.planner-section-tag {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: clamp(0.75rem, 0.88vw, 0.88rem);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--c-electric-blue);
  margin-bottom: clamp(0.75rem, 1.2vw, 1.2rem);
  text-transform: uppercase;
}

.planner-main-headline {
  font-family: var(--font-sans);
  font-size: clamp(2.2rem, 3.8vw, 3.6rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.04em;
  margin-bottom: clamp(0.8rem, 1.2vw, 1.2rem);
}

.planner-subheadline {
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  color: var(--c-subtle-gray);
  letter-spacing: -0.015em;
  line-height: 1.4;
}

.planner-glass-card {
  background: #ffffff;
  border-radius: 24px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.04);
  padding: clamp(2rem, 3.5vw, 3.5rem);
}

.planner-interactive-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: clamp(2rem, 3.5vw, 4rem);
  align-items: start;
}

.planner-config-col {
  display: flex;
  flex-direction: column;
  gap: clamp(1.8rem, 2.5vw, 2.5rem);
}

.plan-step-group {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.plan-step-label {
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 1vw, 1rem);
  font-weight: 700;
  color: var(--c-black);
  letter-spacing: -0.02em;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 82, 255, 0.1);
  color: var(--c-electric-blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.plan-chips-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.plan-chip {
  background: #f1f3f6;
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: var(--font-sans);
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  font-weight: 600;
  color: #3f4753;
  cursor: pointer;
  letter-spacing: -0.01em;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  outline: none;
  display: inline-flex;
  align-items: center;
}

.plan-chip:hover {
  background: #e6eaf0;
  color: var(--c-black);
  transform: translateY(-2px);
}

.plan-chip.is-active {
  background: var(--c-electric-blue);
  color: #ffffff;
  border-color: var(--c-electric-blue);
  box-shadow: 0 4px 16px rgba(0, 82, 255, 0.35);
  transform: translateY(-2px);
}

.planner-result-col {
  position: sticky;
  top: 100px;
}

.planner-summary-card {
  background: #ffffff;
  border-radius: 20px;
  color: #0c0d10;
  padding: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 16px 45px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03);
}

.summary-top-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: #059669;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

.live-dot-green {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 8px #10b981;
  animation: liveStatusGlow 2s infinite ease-in-out;
}

.summary-unit-title {
  font-family: var(--font-sans);
  font-size: clamp(1.4rem, 1.9vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #0c0d10;
  margin-bottom: 0.75rem;
  transition: opacity 0.2s ease;
}

.summary-unit-desc {
  font-size: clamp(0.82rem, 0.92vw, 0.92rem);
  line-height: 1.55;
  color: #555d6b;
  margin-bottom: 1.6rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.07);
  transition: opacity 0.2s ease;
}

.summary-specs-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.8rem;
}

.summary-spec-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-size: clamp(0.78rem, 0.88vw, 0.88rem);
  border-bottom: 1px solid rgba(0, 0, 0, 0.04);
  padding-bottom: 0.45rem;
}

.s-spec-k {
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

.s-spec-v {
  color: #1e293b;
  font-weight: 600;
  text-align: right;
  letter-spacing: -0.01em;
}

.s-spec-v.highlight-v {
  color: #0052ff;
  font-weight: 700;
}

.summary-actions {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.btn-planner-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #25d366;
  color: #0c0d10;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: clamp(0.88rem, 0.98vw, 0.98rem);
  font-weight: 800;
  padding: 0.85rem 1.4rem;
  border-radius: 12px;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.3);
}

.btn-planner-whatsapp:hover {
  background: #20ba5a;
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.45);
}

.btn-wsp-icon {
  font-size: 1.15rem;
}

.summary-guarantee-note {
  font-size: 0.72rem;
  line-height: 1.45;
  color: #6b7280;
  text-align: center;
}

/* ==========================================================================
   RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */
@media (max-width: 1024px) {
  .trust-regulations-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .comparison-grid {
    grid-template-columns: 1fr;
  }
  .planner-interactive-grid {
    grid-template-columns: 1fr;
  }
  .planner-result-col {
    position: static;
  }
}

@media (max-width: 768px) {
  /* Prevención estricta de desbordamiento horizontal */
  html, body {
    overflow-x: hidden !important;
    max-width: 100vw;
    width: 100%;
  }

  /* ------------------------------------------------------------------------
     1. PORTADA HERO (MÓVIL) - FLUJO LIMPIO Y SIN SUPERPOSICIONES
     ------------------------------------------------------------------------ */
  .desktop-viewport {
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .hero-canvas {
    aspect-ratio: auto;
    height: auto;
    min-height: 100vh;
    min-height: 100dvh;
    max-height: none;
    width: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: none;
    overflow: hidden;
    padding-bottom: 1.5rem;
  }

  .backdrop-container {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
  }

  .backdrop-bus-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% 38%;
    filter: brightness(1.02);
  }

  .navbar-header {
    position: relative !important;
    top: auto;
    left: auto;
    width: 100%;
    z-index: 30;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.1rem 0.4rem;
  }

  .center-navigation {
    display: none !important;
  }

  .brand-title .main-brand-logo {
    height: clamp(28px, 6.5vw, 34px);
    width: auto;
  }

  .header-cta-wrapper {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .lang-switch-capsule {
    padding: 3px 6px;
    font-size: 0.72rem;
  }

  .btn-cotizar-header {
    padding: 0.45rem 0.9rem;
    font-size: 0.78rem;
    border-radius: 9999px;
  }

  .hero-heading-zone {
    position: relative !important;
    top: auto;
    left: auto;
    transform: none !important;
    width: 100%;
    margin: 1.8rem 0 1.2rem;
    padding: 0 1.2rem;
    text-align: center;
    z-index: 20;
  }

  .main-heading {
    font-size: clamp(2rem, 8.5vw, 2.75rem);
    line-height: 1.08;
    letter-spacing: -0.03em;
    margin-bottom: 0.5rem;
  }

  .sub-heading {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #4b5563;
    margin-bottom: 1.3rem;
  }

  .heading-actions {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
  }

  .heading-actions .pill-btn {
    width: 100%;
    justify-content: center;
    padding: 0.78rem 1.4rem;
    font-size: 0.88rem;
  }

  .side-arrow {
    display: none !important;
  }

  .corner-selector-bottom-left {
    position: relative !important;
    bottom: auto;
    left: auto;
    margin: 0.8rem 1.2rem 0.5rem;
    width: calc(100% - 2.4rem);
    z-index: 25;
  }

  .selector-stack {
    display: flex;
    flex-direction: row;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0.45rem;
    width: 100%;
    padding: 0.2rem 0;
  }

  .selector-stack::-webkit-scrollbar {
    display: none;
  }

  .selector-choice {
    white-space: nowrap;
    padding: 0.48rem 0.85rem;
    font-size: 0.72rem;
    border-radius: 9999px;
    background: rgba(255, 255, 255, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    flex-shrink: 0;
  }

  .corner-thumbnails-bottom-right {
    position: relative !important;
    bottom: auto;
    right: auto;
    margin: 0.4rem 1.2rem 1rem;
    align-self: flex-start;
    z-index: 25;
  }

  .thumbnail-box {
    width: 68px;
    height: 42px;
    border-radius: 8px;
  }

  .hero-scroll-indicator {
    display: none !important;
  }

  /* ------------------------------------------------------------------------
     NAVBAR CÁPSULA FLOTANTE EN MÓVIL (COMO EN PC, ADAPTADA CON DESPLAZAMIENTO TÁCTIL)
     ------------------------------------------------------------------------ */
  .sticky-capsule-nav {
    display: block !important;
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translate(-50%, -100px);
    width: calc(100% - 20px);
    max-width: 480px;
    z-index: 1000;
    pointer-events: none;
    opacity: 0;
    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
  }

  .sticky-capsule-nav.is-visible {
    transform: translate(-50%, 0);
    opacity: 1;
    pointer-events: auto;
  }

  .capsule-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.35rem 0.6rem 0.35rem 0.8rem;
    gap: 0.5rem;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04);
    box-sizing: border-box;
    overflow: hidden;
  }

  .capsule-brand {
    flex-shrink: 0;
    display: flex;
    align-items: center;
  }

  .capsule-brand-logo {
    height: 22px;
    width: auto;
  }

  .capsule-menu {
    display: flex !important;
    align-items: center;
    gap: 0.35rem;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    min-width: 0;
    padding: 0 0.25rem;
    mask-image: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px, black calc(100% - 10px), transparent);
  }

  .capsule-menu::-webkit-scrollbar {
    display: none;
  }

  .capsule-link {
    font-size: 0.74rem;
    font-weight: 600;
    color: #4b5563;
    padding: 0.32rem 0.65rem;
    border-radius: 9999px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s ease;
  }

  .capsule-link:hover,
  .capsule-link:active {
    color: #0c0d10;
    background: rgba(0, 0, 0, 0.06);
  }

  .capsule-lang-switch {
    display: none;
  }

  .capsule-cta-btn {
    flex-shrink: 0;
    padding: 0.38rem 0.78rem;
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 9999px;
    background: var(--c-electric-blue, #0052ff);
    color: #ffffff;
    border: none;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 82, 255, 0.3);
  }

  /* ------------------------------------------------------------------------
     2. SERVICIOS (MÓVIL)
     ------------------------------------------------------------------------ */
  .services-section {
    padding: clamp(3rem, 7vw, 4.5rem) 1.2rem;
  }

  .services-main-layout {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .service-guarantees-bar {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }

  .guarantee-chip {
    font-size: 0.74rem;
    padding: 0.4rem 0.75rem;
  }

  .service-hero-visual {
    height: 250px;
    min-height: 250px;
  }

  .services-tab-bar {
    display: flex;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 0.5rem;
    -webkit-overflow-scrolling: touch;
    width: 100%;
  }

  .service-nav-item {
    white-space: nowrap;
    padding: 0.65rem 0.95rem;
    font-size: 0.76rem;
    flex-shrink: 0;
  }

  .service-nav-separator {
    display: none;
  }

  /* ------------------------------------------------------------------------
     3. SECCIÓN EXPERIENCIA / NUESTRO AUTOBÚS (MÓVIL)
     ------------------------------------------------------------------------ */
  .experience-section {
    min-height: auto;
    height: auto;
    max-height: none;
    padding: 2.2rem 1.2rem;
  }

  .experience-inner-container {
    height: auto;
    max-height: none;
    gap: 1.2rem;
  }

  /* Selector Superior Flotante Centrado (Sin elementos duplicados en móvil) */
  .exp-top-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 0.4rem;
    width: 100%;
  }

  .exp-brand,
  .exp-top-actions {
    display: none !important;
  }

  .exp-view-tabs {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 9999px;
    padding: 4px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
    width: auto;
    max-width: 100%;
    gap: 0.25rem;
  }

  .exp-view-tab {
    padding: 0.42rem 0.85rem;
    font-size: 0.74rem;
    font-weight: 600;
    border-radius: 9999px;
    white-space: nowrap;
  }

  .exp-stage-row {
    flex-direction: column;
    align-items: stretch;
    margin: 0.6rem 0;
    gap: 1rem;
  }

  .exp-stage-left {
    position: static;
    max-width: 100%;
  }

  .exp-stage-right-top {
    position: absolute;
    right: 0;
    top: 0;
  }

  .exp-cutaway-stage {
    width: 100%;
    overflow: visible;
    padding: 0;
    margin: 0.4rem 0 0.8rem;
  }

  .cutaway-viewport-wrapper {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    aspect-ratio: 1024 / 576;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #eaedf2;
  }

  .cutaway-bus-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
  }

  .hotspot-trigger {
    width: 32px;
    height: 32px;
  }

  .hotspot-badge {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }

  /* Etiqueta flotante del hotspot: sin número duplicado ni textos truncados */
  .hotspot-capsule-tag {
    padding: 4px 10px 4px 8px;
    border-radius: 9999px;
    font-size: 0.72rem;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16);
    background: #ffffff;
    gap: 0.35rem;
    white-space: nowrap;
    max-width: 160px;
  }

  .hotspot-capsule-tag .capsule-num {
    display: none !important;
  }

  .hotspot-capsule-tag .capsule-title {
    font-size: 0.72rem;
    font-weight: 700;
    color: #111827;
  }

  .hotspot-capsule-tag .capsule-sub {
    display: none !important;
  }

  .hotspot-capsule-tag .capsule-arrow {
    font-size: 0.85rem;
    color: #ff6b00;
    font-weight: 700;
  }

  /* Evitar que las etiquetas emergentes de hotspots a la derecha se corten */
  .cutaway-hotspot[data-feature="04"] .hotspot-capsule-tag,
  .cutaway-hotspot[data-feature="05"] .hotspot-capsule-tag {
    left: auto !important;
    right: 100% !important;
    transform: translateY(-50%) translateX(-6px) !important;
  }

  .cutaway-hotspot.is-active {
    z-index: 35 !important;
  }

  .cutaway-hotspot.is-active .hotspot-capsule-tag,
  .cutaway-hotspot[data-feature="04"].is-active .hotspot-capsule-tag,
  .cutaway-hotspot[data-feature="05"].is-active .hotspot-capsule-tag {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    display: flex !important;
  }

  .exp-bottom-panel {
    grid-template-columns: 1fr;
    gap: 0.8rem;
    min-height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
  }

  /* Tarjeta Asiento Compacta en Celular */
  .exp-seat-card {
    min-height: 130px;
    height: auto;
    max-height: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
  }

  .seat-card-content {
    padding: 0.85rem 0.95rem;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    z-index: 5;
  }

  .seat-card-icon-pill {
    width: 24px;
    height: 24px;
    margin-bottom: 0.35rem;
  }

  .seat-card-icon-pill svg {
    width: 13px;
    height: 13px;
  }

  .seat-card-text-block {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    width: 100%;
    min-width: 0;
  }

  .seat-card-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.15;
    margin: 0;
    letter-spacing: -0.01em;
  }

  .seat-card-desc {
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.88);
    margin: 0;
    padding-right: 38px;
    word-break: normal;
  }

  .seat-card-circle-btn {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .seat-card-circle-btn svg {
    width: 12px;
    height: 12px;
  }

  /* Tarjeta de Plano Superior / Categorías Compacta en Celular */
  .exp-plan-card {
    min-height: auto;
    max-height: none;
    padding: 0.75rem 0.8rem;
    gap: 0.55rem;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    border-radius: 16px;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  .exp-plan-top-row {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  /* 4 Categorías distribuidas en 4 columnas: la 4ta parte (Servicios) se muestra completa */
  .exp-categories-nav {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.25rem !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    padding: 1px 0 !important;
    box-sizing: border-box !important;
  }

  .exp-categories-nav::-webkit-scrollbar {
    display: none;
  }

  .exp-cat-btn {
    white-space: nowrap !important;
    padding: 0.35rem 0.2rem !important;
    font-size: 0.65rem !important;
    font-weight: 600 !important;
    border-radius: 9999px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.2rem !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .exp-cat-btn .cat-icon {
    width: 12px !important;
    height: 12px !important;
    flex-shrink: 0 !important;
  }

  .exp-cat-btn span {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .exp-capacity-indicator {
    display: none !important;
  }

  .exp-plan-main-row {
    display: grid;
    grid-template-columns: 28px 1fr 28px;
    align-items: center;
    gap: 0.35rem;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    margin: 0;
  }

  .cat-nav-arrow {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .cat-nav-arrow svg {
    width: 12px;
    height: 12px;
  }

  .topview-canvas-wrap {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #f8fafc !important;
    padding: 2px !important;
    box-sizing: border-box !important;
  }

  .topview-bus-image {
    width: 100% !important;
    max-width: 100% !important;
    height: 52px !important;
    object-fit: fill !important;
    display: block !important;
    border-radius: 4px !important;
  }

  /* ------------------------------------------------------------------------
     4. CONFIANZA Y SEGURIDAD (MÓVIL)
     ------------------------------------------------------------------------ */
  .trust-section {
    padding: clamp(3rem, 7vw, 4.5rem) 1.2rem;
  }

  .trust-inner-container {
    gap: 2rem;
  }

  .trust-main-headline {
    font-size: clamp(1.6rem, 6.5vw, 2.2rem);
    line-height: 1.15;
    letter-spacing: -0.02em;
  }

  .trust-subheadline {
    font-size: 0.88rem;
    line-height: 1.45;
  }

  .trust-stats-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .trust-regulations-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .trust-philosophy-card {
    padding: 1.4rem 1.2rem;
  }

  /* Marco de Imagen de Confianza y Badge en Móvil */
  .trust-media-frame {
    border-radius: 14px !important;
    overflow: hidden !important;
    margin-bottom: 1.4rem !important;
    position: relative !important;
  }

  .trust-main-img {
    width: 100% !important;
    height: 195px !important;
    aspect-ratio: auto !important;
    object-fit: cover !important;
    object-position: 55% center !important;
    display: block !important;
  }

  .trust-media-frame::after {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.1) 45%, transparent 70%) !important;
    pointer-events: none !important;
  }

  .trust-badge-overlay {
    position: absolute !important;
    bottom: 0.75rem !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    z-index: 10 !important;
    display: flex !important;
    justify-content: flex-start !important;
    pointer-events: none !important;
  }

  .badge-conceptual {
    display: inline-block !important;
    background: rgba(11, 15, 25, 0.85) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 8px !important;
    padding: 0.35rem 0.65rem !important;
    font-size: 0.58rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    line-height: 1.35 !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35) !important;
    max-width: 95% !important;
  }

  /* ------------------------------------------------------------------------
     5. DESTINOS Y PLANIFICADOR / BOARDING PASS TICKET (MÓVIL)
     ------------------------------------------------------------------------ */
  .destinations-section {
    padding: clamp(2.5rem, 6vw, 3.8rem) 1.2rem !important;
    position: relative !important;
    overflow: hidden !important;
  }

  .destinations-stage-container {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    position: relative !important;
  }

  /* Cabecera Móvil */
  .destinations-top-header {
    position: static !important;
    top: auto !important;
    left: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-bottom: 1.25rem !important;
    order: 1 !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .destinations-section-tag {
    font-size: 0.72rem !important;
    letter-spacing: 0.16em !important;
    margin-bottom: 0.4rem !important;
    display: inline-block !important;
  }

  .destinations-main-headline {
    font-size: clamp(1.55rem, 6.4vw, 2.15rem) !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 0.5rem !important;
  }

  .destinations-headline-row {
    display: inline !important;
    white-space: normal !important;
  }

  .destinations-subheadline {
    font-size: 0.92rem !important;
    line-height: 1.42 !important;
    color: #4b5260 !important;
    margin: 0 !important;
  }

  /* Capa Interactiva del Mapa Móvil */
  .destinations-map-layer {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 10 !important;
    min-height: 200px !important;
    max-height: 260px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04) !important;
    margin-bottom: 1.25rem !important;
    order: 2 !important;
    pointer-events: auto !important;
    display: block !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .destinations-map-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
  }

  .destinations-route-svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    pointer-events: none !important;
    z-index: 8 !important;
    overflow: visible !important;
  }

  .monterrey-radar-beacon {
    z-index: 9 !important;
  }

  /* Divisor de escritorio oculto en móvil */
  .destinations-vertical-divider {
    display: none !important;
  }

  /* Panel y Selector de Países Móvil */
  .destinations-right-panel {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    pointer-events: auto !important;
  }

  .country-selector-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.65rem !important;
    width: 100% !important;
  }

  .country-choice-item {
    background: #ffffff !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    border-radius: 14px !important;
    padding: 1rem 1.15rem !important;
    cursor: pointer !important;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
  }

  .country-choice-item.is-active {
    border-color: rgba(0, 82, 255, 0.45) !important;
    box-shadow: 0 6px 20px rgba(0, 82, 255, 0.09) !important;
    background: #ffffff !important;
  }

  .country-choice-item .country-number {
    font-size: 1.35rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    color: #9aa1ad !important;
  }

  .country-choice-item.is-active .country-number {
    color: var(--c-black) !important;
  }

  .country-choice-item .country-name {
    font-size: 1.08rem !important;
    font-weight: 800 !important;
    margin-top: 0.2rem !important;
    color: #8e95a2 !important;
    letter-spacing: -0.02em !important;
  }

  .country-choice-item.is-active .country-name {
    color: var(--c-black) !important;
  }

  .country-choice-item .country-content-body {
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    margin-top: 0 !important;
    transition: max-height 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, margin-top 0.25s ease !important;
  }

  .country-choice-item.is-active .country-content-body {
    max-height: 600px !important;
    opacity: 1 !important;
    margin-top: 0.65rem !important;
    overflow: visible !important;
  }

  .country-description {
    font-size: 0.84rem !important;
    line-height: 1.48 !important;
    color: #4b5260 !important;
    max-width: 100% !important;
  }

  .country-horizontal-divider {
    display: none !important;
  }

  .route-time-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.35rem !important;
    margin-top: 0.65rem !important;
  }

  .route-pill {
    font-size: 0.72rem !important;
    padding: 0.32rem 0.65rem !important;
    border-radius: 999px !important;
    background: rgba(0, 0, 0, 0.05) !important;
    color: #212429 !important;
    font-weight: 600 !important;
  }

  /* Pie del selector / CTA */
  .destinations-footer-box {
    margin-top: 1.25rem !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.45rem !important;
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  .btn-plan-trip {
    width: 100% !important;
    justify-content: center !important;
    padding: 0.95rem 1.4rem !important;
    font-size: 0.95rem !important;
    border-radius: 9999px !important;
  }

  .destinations-disclaimer {
    text-align: center !important;
    width: 100% !important;
    font-size: 0.72rem !important;
  }

  .planner-interactive-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .planner-result-col {
    position: static;
    width: 100%;
    max-width: 100%;
  }

  .planner-summary-card.boarding-pass-card {
    padding: 0 !important;
    background: #ffffff !important;
    border-radius: 20px !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  }

  .boarding-pass-head {
    padding: 0.95rem 1.2rem !important;
    background: #f8fafc !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
  }

  .boarding-pass-route {
    padding: 1.1rem 1.2rem 0.9rem !important;
    background: #ffffff !important;
  }

  .bp-city-code {
    font-size: 1.7rem !important;
    color: #0b0f19 !important;
  }

  .bp-flight-vector {
    padding: 0 0.8rem !important;
  }

  .boarding-pass-perforation {
    background: #ffffff !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .perf-circle {
    width: 16px !important;
    height: 16px !important;
    background: #f7f9fc !important;
    border: 1px solid rgba(0, 0, 0, 0.08) !important;
  }

  .perf-circle.left {
    left: -8px !important;
  }

  .perf-circle.right {
    right: -8px !important;
  }

  .perf-line {
    border-top: 1.5px dashed rgba(0, 0, 0, 0.12) !important;
  }

  .boarding-pass-body {
    padding: 1.2rem 1.2rem 1.4rem !important;
    background: #ffffff !important;
  }

  .summary-actions {
    margin-bottom: 0.8rem;
  }

  .btn-planner-whatsapp {
    min-height: 48px;
    font-size: 0.92rem;
  }

  /* ------------------------------------------------------------------------
     6. FLOTA Y COMPARATIVA (MÓVIL)
     ------------------------------------------------------------------------ */
  .fleet-section {
    padding: clamp(3rem, 7vw, 4.5rem) 1.2rem;
  }

  .fleet-cards-grid,
  .comparison-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .blueprint-bus-body {
    padding: 1rem 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .b-row {
    grid-template-columns: 34px 34px 1fr 34px 34px;
    gap: 0.25rem;
  }

  .b-seat {
    height: 30px;
    font-size: 0.65rem;
  }

  .back-row {
    grid-template-columns: repeat(4, 1fr);
  }

  .b-wc {
    grid-column: span 4;
    height: 30px;
  }

  /* ------------------------------------------------------------------------
     7. TESTIMONIOS, FAQ & FOOTER (MÓVIL)
     ------------------------------------------------------------------------ */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-bottom-bar {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }

  /* ------------------------------------------------------------------------
     MODAL DE COTIZACIÓN (MÓVIL / INPUTS ACCESIBLES)
     ------------------------------------------------------------------------ */
  .quote-dialog {
    width: 95%;
    max-width: 95%;
    padding: 0.5rem;
  }

  .dialog-inner {
    padding: 1.4rem 1.1rem;
    max-height: 88vh;
    overflow-y: auto;
  }

  .dialog-header h3 {
    font-size: 1.25rem;
  }

  /* Font-size 16px en inputs para evitar auto-zoom molesto en iPhone Safari */
  .form-input,
  .form-select,
  .form-textarea {
    font-size: 16px !important;
    padding: 0.72rem 0.85rem;
  }

  .btn-submit-quote {
    min-height: 48px;
    font-size: 0.95rem;
  }

  /* Botón Flotante Concierge Circular en Móvil (No tapa contenido ni botones) */
  .floating-concierge-wrap {
    bottom: 16px;
    right: 16px;
    z-index: 990;
  }

  .floating-concierge-pill {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    max-width: 48px !important;
    border-radius: 50% !important;
    padding: 0 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    background: #ffffff !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(37, 211, 102, 0.3) !important;
    border: 1.5px solid rgba(37, 211, 102, 0.5) !important;
    position: relative;
    overflow: hidden;
  }

  .concierge-text,
  .concierge-text-wrap,
  .concierge-arrow {
    display: none !important;
  }

  .concierge-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #25d366 !important;
  }

  .concierge-icon svg {
    width: 24px !important;
    height: 24px !important;
  }

  .concierge-live-pulse {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #25d366;
    box-shadow: 0 0 6px #25d366;
  }
}

/* Teléfonos Compactos (<= 480px) */
@media (max-width: 480px) {
  .hero-main-title {
    font-size: 1.95rem;
  }

  .brand-title .main-brand-logo {
    height: 28px;
  }

  .exp-brand-logo {
    height: 22px;
  }

  .exp-main-headline {
    font-size: 1.7rem;
  }

  .service-item-title {
    font-size: 1.45rem;
  }

  .seat-card-title {
    font-size: 1.05rem;
  }
}

/* ==========================================================================
   MARQUEE TELEMÉTRICO EDITORIAL (LUXURY TICKER)
   ========================================================================== */
.editorial-marquee-wrap {
  width: 100%;
  overflow: hidden;
  background: #0c0d10;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 0.95rem 0;
  user-select: none;
  position: relative;
}

.editorial-marquee-wrap::before,
.editorial-marquee-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(40px, 8vw, 100px);
  z-index: 2;
  pointer-events: none;
}

.editorial-marquee-wrap::before {
  left: 0;
  background: linear-gradient(90deg, #0c0d10, transparent);
}

.editorial-marquee-wrap::after {
  right: 0;
  background: linear-gradient(-90deg, #0c0d10, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  animation: luxuryMarqueeScroll 38s linear infinite;
  will-change: transform;
}

.editorial-marquee-wrap:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-content {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding-right: 1.8rem;
}

.m-item {
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c4cad4;
  white-space: nowrap;
  text-transform: uppercase;
  transition: color 0.2s ease;
}

.m-item:hover {
  color: #ffffff;
}

.m-dot {
  color: var(--c-electric-blue);
  font-size: 0.9rem;
}

@keyframes luxuryMarqueeScroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ==========================================================================
   3D TILT HOLOGRÁFICO EN TARJETAS
   ========================================================================== */
.tilt-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card:hover {
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.08), 0 0 24px rgba(0, 82, 255, 0.06);
}

/* ==========================================================================
   CHECKEO SECUENCIAL DE ASIENTOS (CHOREOGRAPHED SEAT SCAN)
   ========================================================================== */
.bus-floorplan-drawer.is-active .b-row {
  animation: seatRowScan 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.bus-floorplan-drawer.is-active .b-row:nth-child(1) { animation-delay: 0.05s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(2) { animation-delay: 0.10s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(3) { animation-delay: 0.15s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(4) { animation-delay: 0.20s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(5) { animation-delay: 0.25s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(6) { animation-delay: 0.30s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(7) { animation-delay: 0.35s; }
.bus-floorplan-drawer.is-active .b-row:nth-child(8) { animation-delay: 0.40s; }

@keyframes seatRowScan {
  0% {
    opacity: 0.15;
    transform: translateY(8px) scale(0.97);
  }
  50% {
    opacity: 1;
    filter: drop-shadow(0 0 8px rgba(0, 82, 255, 0.7));
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: none;
  }
}

/* ==========================================================================
   REVELACIÓN EDITORIAL POR SCROLL & STAGGER
   ========================================================================== */
.scroll-reveal,
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal.is-inview,
.scroll-reveal.is-revealed,
.reveal-on-scroll.is-inview,
.reveal-on-scroll.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

.scroll-reveal-scale {
  opacity: 0;
  transform: translateY(28px) scale(0.96);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.scroll-reveal-scale.is-inview,
.scroll-reveal-scale.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.stagger-group > *,
.stagger-children > * {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.stagger-group.is-inview > *:nth-child(1),
.stagger-group.is-revealed > *:nth-child(1),
.stagger-children.is-inview > *:nth-child(1),
.stagger-children.is-revealed > *:nth-child(1) { transition-delay: 0.05s; }

.stagger-group.is-inview > *:nth-child(2),
.stagger-group.is-revealed > *:nth-child(2),
.stagger-children.is-inview > *:nth-child(2),
.stagger-children.is-revealed > *:nth-child(2) { transition-delay: 0.12s; }

.stagger-group.is-inview > *:nth-child(3),
.stagger-group.is-revealed > *:nth-child(3),
.stagger-children.is-inview > *:nth-child(3),
.stagger-children.is-revealed > *:nth-child(3) { transition-delay: 0.19s; }

.stagger-group.is-inview > *:nth-child(4),
.stagger-group.is-revealed > *:nth-child(4),
.stagger-children.is-inview > *:nth-child(4),
.stagger-children.is-revealed > *:nth-child(4) { transition-delay: 0.26s; }

.stagger-group.is-inview > *:nth-child(5),
.stagger-group.is-revealed > *:nth-child(5),
.stagger-children.is-inview > *:nth-child(5),
.stagger-children.is-revealed > *:nth-child(5) { transition-delay: 0.33s; }

.stagger-group.is-inview > *:nth-child(6),
.stagger-group.is-revealed > *:nth-child(6),
.stagger-children.is-inview > *:nth-child(6),
.stagger-children.is-revealed > *:nth-child(6) { transition-delay: 0.40s; }

.stagger-group.is-inview > *:nth-child(7),
.stagger-group.is-revealed > *:nth-child(7),
.stagger-children.is-inview > *:nth-child(7),
.stagger-children.is-revealed > *:nth-child(7) { transition-delay: 0.47s; }

.stagger-group.is-inview > *:nth-child(8),
.stagger-group.is-revealed > *:nth-child(8),
.stagger-children.is-inview > *:nth-child(8),
.stagger-children.is-revealed > *:nth-child(8) { transition-delay: 0.54s; }

.stagger-group.is-inview > *,
.stagger-group.is-revealed > *,
.stagger-children.is-inview > *,
.stagger-children.is-revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ==========================================================================
   TRANSICIÓN CINEMATOGRÁFICA DE CABINA DIURNA / NOCTURNA
   ========================================================================== */
.experience-photo-frame .experience-main-img {
  transition: filter 0.75s cubic-bezier(0.16, 1, 0.3, 1), transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.experience-photo-frame.is-night .experience-main-img {
  filter: brightness(0.72) contrast(1.18) saturate(1.22) hue-rotate(-8deg);
}

.experience-night-overlay {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(2, 6, 23, 0.35) 0%, rgba(2, 6, 23, 0.7) 100%),
              linear-gradient(180deg, rgba(0, 82, 255, 0.12) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.75s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  mix-blend-mode: multiply;
  z-index: 5;
}

.experience-photo-frame.is-night .experience-night-overlay {
  opacity: 1;
}