/* =====================================================================
   SkyPulse -- estilos de index
   ===================================================================== */

/* =====================================================================
   SkyPulse — Hoja de estilos general
   =====================================================================
   Índice:
     1.  Reset y base
     2.  Formularios (login / registro)
     3.  Dashboard / navbar
     4.  Secciones de página (scroll suave)
     5.  Hero (dashboard)
     6.  Search card
     7.  Ofertas y descuentos
     8.  Encabezados de sección compartidos
     9.  Destinos populares
     10. La experiencia SkyPulse
     11. Mi cuenta
     12. Fondo naturaleza (login / registro)
     13. Tarjeta de vuelo base (resultados)
     14. Panel de administrador
     15. Footer
     16. Resultados de búsqueda
     20. Completa tu viaje (inicio)
     21. Página de Hoteles
     22. Botón "fancy" (Volver al inicio, hoteles)
   ===================================================================== */

/* ===== 1. Reset y base ===== */

:root {
  /* Colores de marca */
  --color-primary: #2E6DA4;
  --color-accent-blue: #2563EB;
  --color-sky: #C9DFF2;
  --color-light-blue: #6FA8DC;
  --color-muted-blue: #9FB4CC;

  /* Texto */
  --color-text: #222;
  --color-text-dark: #22303D;
  --color-text-muted: #5B6B78;

  /* Neutros */
  --color-white: #fff;
  --color-black: #000;
  --color-border: #E2E5E9;

  /* Estado */
  --color-success: #1D8A6C;
}

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

html {
  scroll-behavior: smooth;
  scroll-snap-type: y proximity;
  scroll-padding-top: 76px;
}

body {
  font-family: 'Poppins', -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: linear-gradient(180deg, #F7EBCB 0%, var(--color-sky) 100%);
  color: var(--color-text);
  min-height: 100vh;
  position: relative;
}

.bg-decor {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.bg-decor-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
  will-change: transform;
  transform: scale(1.1);
}

header, main.hero {
  position: relative;
  z-index: 1;
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 40px;
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
}

.logo-img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: 6px;
}

.hero-logo {
  width: 260px;
  height: auto;
  margin-top: 32px;
  border-radius: 12px;
}

.btn {
  display: inline-block;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: var(--color-accent-blue);
  color: var(--color-white);
}
.btn-primary:hover {
  background: #1D4ED8;
}

.btn-secondary {
  background: transparent;
  color: var(--color-accent-blue);
  border: 1px solid var(--color-accent-blue);
}
.btn-secondary:hover {
  background: #EFF4FF;
}

/* ===== Tarjeta modal: "Inicia sesión para continuar" ===== */
.auth-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.auth-modal-overlay[hidden] {
  display: none;
}

.auth-modal-card {
  width: 320px;
  max-width: 100%;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
  animation: auth-modal-pop 0.18s ease-out;
}

.auth-modal-card::before {
  content: '';
  position: absolute;
  width: 130px;
  height: 160%;
  background-image: linear-gradient(
    180deg,
    var(--color-light-blue),
    var(--color-accent-blue),
    var(--color-primary)
  );
  animation: auth-modal-border-spin 3s linear infinite;
  transition: all 0.2s linear;
}

@keyframes auth-modal-border-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.auth-modal-card::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--color-white);
  border-radius: 13px;
}

.auth-modal-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.75rem;
  text-align: center;
}

@keyframes auth-modal-pop {
  from {
    transform: scale(0.96);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.auth-modal-title {
  font-size: 1.3rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 0.5rem;
}

.auth-modal-desc {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--color-text-muted);
  margin-bottom: 1.5rem;
}

.auth-modal-actions {
  display: flex;
  gap: 10px;
  margin-bottom: 1.1rem;
}

.auth-modal-actions .btn {
  flex: 1 1 0%;
  padding: 10px 12px;
}

.auth-modal-register-link {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
}

.auth-modal-register-link span {
  color: var(--color-accent-blue);
  font-weight: 600;
}

.auth-modal-register-link:hover span {
  text-decoration: underline;
}

/* ===== Tarjeta modal: "Ver detalles" (Destinos y Promociones) ===== */
.details-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(6, 26, 20, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 24px;
}

.details-modal-overlay[hidden] {
  display: none;
}

.details-modal-card {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: 90vh;
  background: var(--color-white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.4);
  animation: details-modal-pop 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

@keyframes details-modal-pop {
  from {
    transform: scale(0.97);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.details-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 2;
  width: 38px;
  height: 38px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: var(--color-white);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease;
}

.details-modal-close:hover {
  background: rgba(0, 0, 0, 0.65);
}

.details-modal-image {
  position: relative;
  flex: 0 0 45%;
  min-height: 220px;
  background: var(--color-sky);
}

.details-modal-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.details-modal-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--color-white);
  color: var(--color-text-dark);
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 999px;
}

.details-modal-body {
  flex: 1 1 auto;
  padding: 28px 32px;
  overflow-y: auto;
}

.details-modal-title {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.details-modal-subtitle {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.details-modal-desc {
  font-size: 15px;
  line-height: 1.6;
  color: var(--color-text);
  margin-bottom: 24px;
}

.details-modal-highlights {
  list-style: none;
  padding: 0;
  margin: -8px 0 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.details-modal-highlights:empty {
  display: none;
  margin: 0;
}

.details-modal-highlights li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.details-modal-highlights li::before {
  content: '✓';
  flex: 0 0 auto;
  color: var(--color-primary);
  font-weight: 700;
}

.details-modal-facts {
  list-style: none;
  padding: 0;
  margin: -8px 0 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
}

.details-modal-facts:empty {
  display: none;
  margin: 0;
}

.details-modal-facts li del,
.details-modal-includes-list li del,
.details-modal-places-list li del,
.details-modal-conditions-list li del {
  color: var(--color-text-muted);
  opacity: 0.8;
}

.details-modal-includes {
  margin-bottom: 24px;
}

.details-modal-includes-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.details-modal-includes-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.details-modal-conditions {
  margin-bottom: 24px;
}

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

.details-modal-conditions-list li {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
  padding-left: 14px;
  position: relative;
}

.details-modal-conditions-list li::before {
  content: '•';
  position: absolute;
  left: 0;
}

.details-modal-cta-note {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: 10px;
}

.details-modal-facts li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text);
  background: #F3F7FB;
  border-radius: 10px;
  padding: 8px 12px;
}

@media (max-width: 480px) {
  .details-modal-facts {
    grid-template-columns: 1fr;
  }
}

.details-modal-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 10px;
}

.details-modal-places {
  margin-bottom: 24px;
}

.details-modal-places-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.details-modal-places-list li {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
}

.details-modal-reco {
  background: #EAF3FC;
  border: 1px solid #BFDBF3;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 24px;
}

.details-modal-reco-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.details-modal-reco-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 6px;
}

.details-modal-reco-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text);
}

.details-modal-price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid var(--color-border);
}

.details-modal-price {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-dark);
}

@media (max-width: 720px) {
  .details-modal-card {
    height: 92vh;
    flex-direction: column;
  }
  .details-modal-image {
    flex-basis: 35%;
  }
  .details-modal-body {
    padding: 20px 20px 24px;
  }
  .details-modal-title {
    font-size: 22px;
  }
}

main.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 100px 20px;
}

main.hero h1 {
  font-size: 32px;
  margin-bottom: 12px;
}

main.hero p {
  color: #666;
  font-size: 15px;
  max-width: 420px;
}

.field {
  margin-bottom: 16px;
}

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 6px;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--color-white);
  color: var(--color-text);
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--color-accent-blue);
}

@keyframes email-particle-float {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
    background: var(--color-accent-blue);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translate(120px, -18px) scale(1.1);
    opacity: 0;
    background: var(--color-light-blue);
  }
}

@keyframes name-particle-float {
  0% {
    transform: translate(0, 0) scale(0.8);
    opacity: 0;
    background: var(--color-accent-blue);
  }
  20% {
    opacity: 0.7;
  }
  100% {
    transform: translate(120px, -18px) scale(1.1);
    opacity: 0;
    background: var(--color-light-blue);
  }
}

@keyframes pw-rotate {
  100% {
    transform: translate(-50%, -50%) rotate(450deg);
  }
}

.form-wrap .btn {
  width: 100%;
  padding: 12px;
  margin-top: 4px;
}

/* ===== 3. Dashboard / navbar ===== */

.fixed-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;
}

.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 40px;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.08);
  gap: 24px;
  min-height: 76px;
}

.nav-brand {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text-dark);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  justify-self: start;
}

.nav-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-self: center;
}

.nav-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  padding: 6px 2px;
  border-bottom: 2px solid transparent;
}

.nav-link:hover {
  color: var(--color-primary);
}

.nav-link.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-light-blue);
}

.nav-user-wrap {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 14px;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

/* ========================= */
/* BOTÓN HAMBURGUESA (menú móvil) */
/* Oculto en escritorio; aparece cuando el navbar entra en modo compacto. */
/* ========================= */
.nav-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border: 1px solid #D6D9DE;
  border-radius: 8px;
  background: var(--color-white);
  cursor: pointer;
  order: -1;
}

.nav-mobile-toggle:hover {
  background: #F5F6F8;
  border-color: #B8BCC4;
}

.nav-mobile-toggle-bar,
.nav-mobile-toggle-bar::before,
.nav-mobile-toggle-bar::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-dark);
}

.nav-mobile-toggle-bar {
  position: relative;
  transition: background 0.15s ease;
}

.nav-mobile-toggle-bar::before,
.nav-mobile-toggle-bar::after {
  content: '';
  position: absolute;
  left: 0;
  transition: transform 0.2s ease;
}

.nav-mobile-toggle-bar::before {
  top: -6px;
}

.nav-mobile-toggle-bar::after {
  top: 6px;
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-bar {
  background: transparent;
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-bar::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-mobile-toggle[aria-expanded="true"] .nav-mobile-toggle-bar::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* ========================= */
/* SELECTOR DE IDIOMA (navbar) */
/* Siempre visible, tanto para invitados como para usuarios con sesión. */
/* ========================= */
.nav-lang-switcher {
  position: relative;
  flex-shrink: 0;
}

.nav-lang-trigger {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid #D6D9DE;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.nav-lang-trigger:hover {
  background: #F5F6F8;
  border-color: #B8BCC4;
}

.nav-lang-trigger:active {
  transform: scale(0.98);
}

.nav-lang-trigger-flag {
  font-size: 15px;
  line-height: 1;
}

.nav-lang-trigger-code {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.nav-lang-caret {
  font-size: 10px;
  color: #6B7280;
  transition: transform 0.2s ease;
}

.nav-lang-trigger[aria-expanded="true"] .nav-lang-caret {
  transform: rotate(180deg);
}

.nav-lang-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 176px;
  background: var(--color-white);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12);
  z-index: 60;
}

.nav-lang-dropdown[hidden] {
  display: none;
}

.nav-lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  color: var(--color-text-dark);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.nav-lang-item:hover {
  background: #F5F6F8;
  border-color: #D6D9DE;
}

.nav-lang-item-flag {
  font-size: 16px;
  line-height: 1;
  flex-shrink: 0;
}

.nav-lang-item-text {
  flex: 1;
}

.nav-lang-item-check {
  font-size: 13px;
  color: var(--color-primary);
  visibility: hidden;
}

.nav-lang-item.is-active {
  background: #EEF3FB;
  border-color: #D6E0F0;
}

.nav-lang-item.is-active .nav-lang-item-check {
  visibility: visible;
}

@media (max-width: 860px) {
  .nav-lang-trigger-code {
    display: none;
  }
  .nav-lang-trigger {
    padding: 8px 10px;
  }
}

/* Oculto por defecto: JS lo muestra cuando el usuario inicia sesión */
#nav-user-loggedin {
  display: none;
}

.nav-greeting {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-dark);
}

/* ========================= */
/* USER MENU (dropdown)     */
/* Adaptado de Uiverse.io by bob_3989, con la paleta de SkyPulse */
/* ========================= */
.user-menu {
  position: relative;
}

.user-menu-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid #D6D9DE;
  border-radius: 999px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.user-menu-trigger:hover {
  background: #F5F6F8;
  border-color: #B8BCC4;
}

.user-menu-trigger:active {
  transform: scale(0.98);
}

.user-menu-avatar {
  font-size: 16px;
  line-height: 1;
}

.user-menu-caret {
  font-size: 11px;
  color: #6B7280;
  transition: transform 0.2s ease;
}

.user-menu-trigger[aria-expanded="true"] .user-menu-caret {
  transform: rotate(180deg);
}

.user-menu-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: 220px;
  background: var(--color-white);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(31, 41, 55, 0.12);
  z-index: 60;
}

.user-menu-dropdown[hidden] {
  display: none;
}

.user-menu-divider {
  height: 1px;
  background: var(--color-border);
  margin: 4px 2px;
}

/* ---- item base (equivalente a .vtab) ---- */
.user-menu-item {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--color-white);
  color: var(--color-text-dark);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 0.15s ease,
    border-color 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
  will-change: transform;
}

.user-menu-item-icon {
  font-size: 15px;
  line-height: 1;
  flex-shrink: 0;
}

.user-menu-item-text {
  position: relative;
  z-index: 1;
}

/* sutil brillo */
.user-menu-item::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.5),
    transparent 55%
  );
  pointer-events: none;
}

/* barrido sutil en tonos grises/carbón, elegante y discreto */
.user-menu-item::after {
  content: "";
  position: absolute;
  inset: -70%;
  background: conic-gradient(
    from 180deg,
    rgba(100, 116, 139, 0),
    rgba(100, 116, 139, 0.18),
    rgba(148, 163, 184, 0.16),
    rgba(226, 229, 233, 0.22),
    rgba(255, 255, 255, 0.3),
    rgba(100, 116, 139, 0)
  );
  filter: blur(16px);
  opacity: 0;
  transform: translateX(-70%) rotate(20deg);
}

.user-menu-item:hover::after {
  opacity: 1;
  animation: skypulse-sweep 3.2s ease-in-out infinite;
}

@keyframes skypulse-sweep {
  0% {
    transform: translateX(-70%) rotate(20deg);
  }
  50% {
    transform: translateX(0%) rotate(20deg);
  }
  100% {
    transform: translateX(70%) rotate(20deg);
  }
}

.user-menu-item:hover {
  color: var(--color-text-dark);
  border-color: #D6D9DE;
  background: #F5F6F8;
  transform: translateX(2px);
}

.user-menu-item:active {
  transform: translateX(1px) scale(0.99);
}

.user-menu-item-danger:hover {
  color: #C0392B;
  border-color: #E8A69B;
  background: #FBEEEC;
}

/* ---- debris (partículas al pasar el mouse) ---- */
.user-menu-debris {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(100, 116, 139, 0.3);
  border-radius: 1px;
  top: 50%;
  left: -20px;
  opacity: 0;
  filter: blur(0.3px);
  animation: skypulse-drift 6s linear infinite;
}

.user-menu-debris:nth-of-type(1) {
  top: 25%;
  animation-duration: 5s;
}

.user-menu-debris:nth-of-type(2) {
  top: 60%;
  animation-duration: 7s;
  opacity: 0.2;
}

.user-menu-debris:nth-of-type(3) {
  top: 80%;
  animation-duration: 6.5s;
  opacity: 0.14;
}

@keyframes skypulse-drift {
  0% {
    transform: translateX(-20px);
    opacity: 0;
  }
  10% {
    opacity: 0.3;
  }
  50% {
    opacity: 0.24;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateX(180px);
    opacity: 0;
  }
}

.user-menu-item:hover .user-menu-debris {
  animation-play-state: paused;
  opacity: 0;
}

@media (max-width: 860px) {
  .navbar {
    grid-template-columns: 1fr auto;
    row-gap: 0;
  }

  .nav-mobile-toggle {
    display: flex;
  }

  .nav-links {
    grid-column: 1 / -1;
    order: 3;
    justify-self: stretch;
    max-height: 0;
    overflow: hidden;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    flex-wrap: nowrap;
    background: var(--color-white);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(31, 41, 55, 0.12);
    margin-top: 0;
    transition: max-height 0.25s ease, margin-top 0.25s ease;
  }

  .nav-links.is-open {
    max-height: 420px;
    margin-top: 12px;
  }

  .nav-link {
    padding: 12px 14px;
    border-bottom: 1px solid var(--color-border);
    border-left: 2px solid transparent;
  }

  .nav-link:last-child {
    border-bottom: none;
  }

  .nav-link.active {
    border-bottom-color: var(--color-border);
    border-left-color: var(--color-light-blue);
    background: #F5F6F8;
  }
}

@media (min-width: 861px) {
  /* En escritorio el menú siempre se muestra; el estado is-open (que solo
     puede activarse en móvil) no debe afectar este layout si el usuario
     redimensiona la ventana. */
  .nav-links {
    max-height: none !important;
  }
}

.snap-section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  min-height: calc(100vh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ===== 4. Secciones de página (scroll suave) ===== */

.page-section {
  position: relative;
  scroll-margin-top: 150px;
  padding: 64px 0;
}

#inicio.page-section,
#beneficios.page-section {
  padding: 0;
}

/* ===== 5. Hero (dashboard) ===== */

main {
  position: relative;
  z-index: 1;
}

.hero-full {
  text-align: center;
  padding: 24px 20px 24px;
  position: relative;
  z-index: 1;
  min-height: calc(100vh - var(--topbar-height, 180px));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.eyebrow-pill {
  display: inline-block;
  background: #EAF3FC;
  color: var(--color-primary);
  border: 1px solid #BFDBF3;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.hero-title {
  font-size: 42px;
  font-weight: 700;
  color: var(--color-text-dark);
  line-height: 1.15;
  margin-bottom: 14px;
}

.hero-title em {
  font-style: italic;
  color: #4A90D9;
  font-weight: 600;
}

.hero-sub {
  max-width: 620px;
  margin: 0 auto 28px;
  color: var(--color-black);
  font-size: 15px;
  line-height: 1.6;
}

.stats-row {
  display: flex;
  justify-content: center;
  gap: 56px;
  flex-wrap: wrap;
}

.stat-num {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-primary);
}

.stat-label {
  font-size: 12px;
  color: var(--color-black);
  margin-top: 4px;
}

.btn-glass {
  display: inline-block;
  padding: 13px 32px;
  border-radius: 10px;
  border: 1.5px solid rgba(46, 109, 164, 0.5);
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--color-text-dark);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-decoration: none;
  text-transform: uppercase;
  transition: background 0.2s ease, transform 0.2s ease;
}

.btn-glass:hover {
  background: rgba(255, 255, 255, 0.55);
  transform: translateY(-2px);
}

.hero-preview-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 165px));
  justify-content: center;
  gap: 16px;
  margin: 28px auto 0;
  max-width: 800px;
}

.hero-preview-card {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 16px 40px -12px rgba(20, 40, 70, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hero-preview-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.65) 100%);
  backdrop-filter: saturate(120%);
}

.hero-preview-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 22px 48px -10px rgba(20, 40, 70, 0.45);
}

.hero-preview-title,
.hero-preview-sub {
  position: relative;
  z-index: 1;
  color: var(--color-white);
}

.hero-preview-title {
  font-size: 14px;
  font-weight: 700;
}

.hero-preview-sub {
  font-size: 11px;
  opacity: 0.85;
  margin-top: 2px;
}

@media (max-width: 700px) {
  .hero-preview-row {
    grid-template-columns: repeat(2, minmax(130px, 170px));
    max-width: 400px;
  }
}

/* ===== 6. Search card ===== */

.search-eyebrow {
  width: 100%;
  margin: 0 0 6px;
  padding: 0 2px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text-dark);
}

/* ---- Cabecera del buscador (eyebrow + botón para ocultar/mostrar en móvil) ---- */
.search-card-head {
  display: block;
}

.search-card-toggle {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  color: var(--color-text-dark);
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.search-card-toggle:hover {
  background: rgba(255, 255, 255, 0.65);
}

.search-card-toggle-caret {
  font-size: 10px;
  transition: transform 0.25s ease;
}

.search-card-toggle[aria-expanded="false"] .search-card-toggle-caret {
  transform: rotate(-90deg);
}

.search-card-body {
  max-height: none;
  overflow: visible;
  opacity: 1;
  transition: max-height 0.3s ease, opacity 0.25s ease;
}

@media (max-width: 700px) {
  .search-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .search-eyebrow {
    width: auto;
    margin: 0;
    text-align: left;
  }

  .search-card-toggle {
    display: inline-flex;
  }

  .search-card-body.is-collapsed {
    max-height: 0;
    opacity: 0;
  }
}

.search-card{
  position: static;
  width: calc(100% - 32px);
  max-width: 1300px;
  margin: 12px auto 0;
  padding: 14px 20px;

  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.45);
  box-shadow: 0 12px 36px rgba(31, 41, 55, 0.14);
  border-radius: 16px;

  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.search-card-row {
  display: flex;
  align-items: center;
  gap: 18px;
  row-gap: 10px;
  flex-wrap: nowrap;
}

.search-toggle {
  display: inline-flex;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 0;
  flex: 0 0 auto;
  align-self: flex-end;
}

.search-toggle .toggle-btn {
  cursor: pointer;
}

.toggle-btn {
  border: none;
  background: transparent;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}

.toggle-btn:hover:not(.active) {
  background: rgba(255, 255, 255, 0.4);
  color: var(--color-text-dark);
}

.toggle-btn.active {
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: 0 4px 14px -4px rgba(46, 109, 164, 0.6);
}

#search-form {
  display: flex;
  align-items: end;
  gap: 12px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.search-grid {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
  flex: 1 1 auto;
  flex-wrap: nowrap;
  min-width: 0;
}

.search-grid .field {
  margin-bottom: 0;
  flex: 1 1 95px;
  min-width: 85px;
}

.search-grid .field:has(#origen),
.search-grid .field:has(#destino) {
  flex: 1 1 140px;
  min-width: 135px;
}

.search-grid .field:has(#fecha-ida),
.search-grid .field:has(#fecha-vuelta) {
  flex: 1 1 115px;
  min-width: 110px;
}

.search-grid .field label {
  font-size: 10px;
  margin-bottom: 3px;
  white-space: nowrap;
}

.search-grid .field input,
.search-grid .field select {
  padding: 7px 9px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-text-dark);
}

.search-grid .field input:focus,
.search-grid .field select:focus {
  background: rgba(255, 255, 255, 0.75);
}

.search-btn {
  height: 34px;
  padding: 0 20px;
  flex: 0 0 auto;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .hero-title {
    font-size: 36px;
  }
  .search-card-row {
    flex-wrap: wrap;
  }
  #search-form,
  .search-grid {
    flex-wrap: wrap;
  }
}

/* --- Laptops y tablets en horizontal (901px–1180px): la fila de
   búsqueda (toggle + 6 campos + botón) necesita en realidad más de
   1000px de ancho para caber sin apretarse; con flex-wrap:nowrap fijo
   hasta 900px, en ese rango intermedio los campos se salían del
   contenedor y de la pantalla (ej. el campo "Clase" quedaba cortado).
   Se activa el mismo ajuste a varias líneas un poco antes. --- */
@media (min-width: 901px) and (max-width: 1180px) {
  .search-card-row {
    flex-wrap: wrap;
  }
  #search-form,
  .search-grid {
    flex-wrap: wrap;
  }
}

@media (max-width: 560px) {
  .search-card {
    width: calc(100% - 24px);
    padding: 10px 16px;
    gap: 12px;
  }
  .search-grid {
    gap: 10px;
  }
  .search-grid .field {
    min-width: 140px;
    flex: 1 1 140px;
  }
  .stats-row {
    gap: 32px;
  }
}

/* ===== 7. Ofertas y descuentos ===== */

.offers-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

.offers-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.offers-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-primary);
  margin-bottom: 6px;
}

.offers-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.offers-nav {
  display: flex;
  gap: 10px;
}

.offers-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid #BFDBF3;
  background: var(--color-white);
  color: var(--color-primary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.offers-nav-btn:hover {
  background: #EAF3FC;
}

.offers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.offer-card {
  position: relative;
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(46, 109, 164, 0.35);
  border: 1px solid var(--color-border);
  transition: scale 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.offer-card:hover {
  scale: 1.04;
  box-shadow: 0 20px 38px -16px rgba(46, 109, 164, 0.45);
  z-index: 1;
}

.offer-image {
  height: 130px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
}

.offer-image-1 { background: linear-gradient(135deg, #4A90D9, var(--color-text-dark)); }
.offer-image-2 { background: linear-gradient(135deg, var(--color-light-blue), var(--color-primary)); }
.offer-image-3 { background: linear-gradient(135deg, #A9CBEC, var(--color-primary)); }
.offer-image-4 { background: linear-gradient(135deg, var(--color-primary), var(--color-text-dark)); }

.offer-badge {
  background: var(--color-white);
  color: var(--color-success);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.offer-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.offer-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 4px;
}

.offer-route {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 14px;
}

.offer-price-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 10px;
}

.offer-desde {
  display: block;
  font-size: 11px;
  color: var(--color-text-muted);
}

.offer-price {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.offer-arrow {
  color: var(--color-primary);
  font-size: 18px;
}

.details-btn {
  border: none;
  background: var(--color-primary);
  color: var(--color-white);
  font-size: 12.5px;
  font-weight: 600;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.details-btn:hover {
  background: var(--color-accent-blue);
  transform: translateY(-1px);
}

@media (max-width: 900px) {
  .offers-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .offers-grid {
    grid-template-columns: 1fr;
  }
}

.welcome-note {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding-bottom: 40px;
}

/* ===== 8. Encabezados de sección compartidos ===== */

.section-heading {
  max-width: 640px;
  margin: 0 auto 30px;
  text-align: center;
  padding: 0 24px;
}

.section-eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.section-title {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 10px;
}

.section-sub {
  color: var(--color-black);
  font-size: 14px;
  line-height: 1.6;
}

.section-eyebrow-light {
  color: #A9CBEC;
}

.section-title-light {
  color: var(--color-white);
}

/* ===== 9. Destinos populares ===== */

.destinos-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

.destinos-filter {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.filter-btn {
  border: 1px solid #BFDBF3;
  background: #EAF3FC;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  padding: 9px 20px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.filter-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 18px -8px rgba(46, 109, 164, 0.5);
}

.filter-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.destinos-carousel {
  position: relative;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, black 48px, black calc(100% - 48px), transparent);
}

.destinos-grid {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 260px;
  gap: 20px;
  justify-items: stretch;
  align-items: stretch;
  width: max-content;
  padding: 14px 4px 18px;
  animation: destinos-scroll var(--destinos-duration, 24s) linear infinite;
}

.destinos-carousel:hover .destinos-grid,
.destinos-carousel:focus-within .destinos-grid {
  animation-play-state: paused;
}

@keyframes destinos-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .destinos-grid {
    animation-duration: 60s;
  }
}

.destinos-grid::-webkit-scrollbar {
  height: 6px;
}

.destinos-grid::-webkit-scrollbar-thumb {
  background: #1B4870;
  border-radius: 999px;
}

.destinos-grid::-webkit-scrollbar-thumb:hover {
  background: #0F2E45;
}

.dest-card {
  position: relative;
  background: var(--color-white);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(46, 109, 164, 0.35);
  border: 1px solid var(--color-border);
  width: 260px;
  transition: scale 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}

.dest-card:hover {
  scale: 1.04;
  box-shadow: 0 20px 38px -16px rgba(46, 109, 164, 0.45);
  z-index: 1;
}

.dest-image {
  height: 150px;
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  padding: 12px;
  overflow: hidden;
}

.dest-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--color-black);
  opacity: var(--dark, 0);
  pointer-events: none;
  transition: opacity 0.08s linear;
}

.dest-image-1 { background: linear-gradient(135deg, #4A90D9, var(--color-text-dark)); }
.dest-image-2 { background: linear-gradient(135deg, var(--color-light-blue), var(--color-primary)); }
.dest-image-3 { background: linear-gradient(135deg, #A9CBEC, var(--color-primary)); }
.dest-image-4 { background: linear-gradient(135deg, var(--color-primary), var(--color-text-dark)); }
.dest-image-5 { background: linear-gradient(135deg, #8FBC6F, #35603F); }
.dest-image-6 { background: linear-gradient(135deg, #2E9E6B, #163B2C); }
.dest-image-7 { background: linear-gradient(135deg, #38BDF8, #0C4A6E); }
.dest-image-8 { background: linear-gradient(135deg, #D4A24E, #7C5A1E); }
.dest-image-9 { background: linear-gradient(135deg, #9B6DE0, #3F2166); }
.dest-image-10 { background: linear-gradient(135deg, #E0A458, #8A4B2E); }
.dest-image-11 { background: linear-gradient(135deg, #7C93A8, var(--color-text-dark)); }

.dest-photo-rotator {
  padding: 0;
}

.dest-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease-in-out;
}

.dest-photo.active {
  opacity: 1;
}

.dest-photo-rotator .dest-badge,
.dest-photo-rotator .offer-badge {
  position: relative;
  z-index: 2;
  margin: 12px;
}

.dest-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  color: var(--color-white);
}

.dest-badge-popular { background: var(--color-accent-blue); }
.dest-badge-discount { background: var(--color-success); }
.dest-badge-neutral { background: var(--color-text-muted); }
.dest-badge-nature { background: #2E9E6B; }

.dest-body {
  padding: 16px 18px 18px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.dest-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.dest-country {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.dest-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
  margin-bottom: 14px;
  min-height: 36px;
}

@media (max-width: 560px) {
  .dest-card {
    width: 220px;
  }

  .destinos-grid {
    grid-auto-columns: 220px;
  }
}

/* ===== 10. La experiencia SkyPulse ===== */

.experience-section {
  background: linear-gradient(160deg, var(--color-primary), #172B3E);
  padding: 70px 32px;
  position: relative;
  z-index: 1;
}

.experience-grid {
  max-width: 1100px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.experience-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 14px;
  padding: 26px 24px;
}

.experience-icon {
  font-size: 26px;
  margin-bottom: 14px;
}

.experience-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-white);
  margin-bottom: 10px;
}

.experience-desc {
  font-size: 13px;
  color: var(--color-sky);
  line-height: 1.6;
}

@media (max-width: 900px) {
  .experience-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .experience-grid {
    grid-template-columns: 1fr;
  }
}

.flights-empty .btn {
  display: inline-block;
}

.admin-nav-link.active {
  background: var(--color-accent-blue);
  color: var(--color-white);
  font-weight: 600;
}

.results-edit-panel .search-card {
  width: 100%;
  max-width: none;
  margin: 0;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .results-edit-panel #edit-search-form,
  .results-edit-panel .search-grid {
    flex-wrap: wrap;
  }
}

.t-stub .btn {
  width: 100%;
  font-size: 1.15em;
  padding: 0.75em 1.2em;
}

.site-footer {
  background: #172B3E;
  color: var(--color-sky);
  padding: 56px 40px 24px;
  position: relative;
  z-index: 1;
}

.footer-top {
  max-width: 1100px;
  margin: 0 auto 36px;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 32px;
}

.footer-brand .nav-brand {
  margin-bottom: 12px;
  color: #fff;
}

.footer-about {
  font-size: 13px;
  color: #A9C4D8;
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 280px;
}

.footer-social {
  display: flex;
  gap: 10px;
}

.social-icon {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #fff;
  transition: background 0.2s ease, transform 0.2s ease;
}

.social-icon:hover {
  background: rgba(255, 255, 255, 0.18);
  transform: translateY(-2px);
}

.social-icon svg {
  width: 16px;
  height: 16px;
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 14px;
  margin-bottom: 14px;
}

.footer-col a {
  display: block;
  color: #A9C4D8;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 10px;
}

.footer-col a:hover {
  color: var(--color-white);
}

.footer-contact {
  max-width: 1100px;
  margin: 0 auto 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-size: 13px;
  color: var(--color-sky);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 24px;
}

.footer-bottom {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #7E9AB0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
}

@media (max-width: 900px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 560px) {
  .footer-top {
    grid-template-columns: 1fr;
  }
}

/* ===== 20. Selector "glass" (radios estilizados) para Pasajeros y Clase ===== */
/* Inspirado en un componente de Uiverse.io por chase2k25, adaptado como
   desplegable (el original es un bloque fijo) para que quepa en la barra
   compacta del buscador, y con los colores de SkyPulse en vez del vidrio
   oscuro original. */

.field-glass-select {
  position: relative;
}

.glass-select-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.glass-select-trigger .glass-select-trigger-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.glass-select-caret {
  flex-shrink: 0;
  font-size: 10px;
  color: var(--color-text-muted);
  transition: transform 0.25s ease;
}

.glass-select-trigger.is-open .glass-select-caret {
  transform: rotate(180deg);
}

/* Estilo del botón disparador dentro de la barra compacta del buscador */
.search-grid .field-glass-select .glass-select-trigger {
  padding: 7px 9px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(10px) saturate(140%);
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: var(--color-text-dark);
}

.search-grid .field-glass-select .glass-select-trigger:hover,
.search-grid .field-glass-select .glass-select-trigger.is-open {
  background: rgba(255, 255, 255, 0.75);
}

/* Estilo del botón disparador fuera de la barra compacta (por si este
   mismo campo se reutiliza en un formulario normal, tipo .field). */
.field-glass-select:not(.search-grid .field-glass-select) .glass-select-trigger {
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  background: var(--color-white);
  color: var(--color-text);
}

/* Panel flotante que contiene el grupo de radios */
.glass-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 1rem;
  box-shadow: 0 16px 40px -12px rgba(31, 41, 55, 0.28);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  pointer-events: none;
}

.glass-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}

/* --- Grupo de radios "glass" (base, tomado del componente de Uiverse) --- */
.glass-radio-group-vertical {
  position: relative;
  display: flex;
  flex-direction: column;
  background: transparent;
  padding: 1.1rem 0.9rem;
  border: 0px solid transparent;
  border-radius: 1rem;
  width: 250px;
  overflow: hidden;
  gap: 0.5rem;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.glass-radio-group-vertical input {
  display: none;
}

.glass-radio-group-vertical label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  border-radius: 0.8rem;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-muted);
  cursor: pointer;
  z-index: 2;
  transition: color 0.35s ease-in-out;
  overflow: hidden;
}

.glass-radio-group-vertical .label-text {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.glass-radio-group-vertical .radio-indicator {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--color-muted-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px transparent;
  transition: all 0.3s ease-in-out;
}

.glass-radio-group-vertical .checkmark {
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s ease-in-out;
}

.glass-glider-vertical {
  position: absolute;
  left: 0;
  top: 0;
  height: 56px;
  width: 100%;
  border-radius: 0.8rem;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.5, 1.6, 0.4, 1), background 0.5s ease-in-out,
    box-shadow 0.4s;
}

/* --- Variante CON colores: Clase (Economy / Premium Economy / Business) ---
   Usamos selectores por sufijo de id ([id$="-economy"], etc.) en vez de un
   id fijo, para que este mismo estilo aplique tanto al selector del inicio
   (id="glass-economy") como al del panel de edición de resultados
   (id="edit-glass-economy"), sin tener que duplicar reglas. */
input[id$="-economy"]:checked ~ .glass-glider-vertical {
  background: linear-gradient(135deg, #00000050, #d1d1d1cc);
  box-shadow: 0 0 15px #00000077;
}
input[id$="-economy"]:checked + label {
  color: white;
}
input[id$="-economy"]:checked + label .radio-indicator {
  background: #c0c0c0;
  box-shadow: 0 0 0 2px #858585aa, 0 0 6px #6b6b6baa;
}
input[id$="-economy"]:checked + label .checkmark {
  opacity: 1;
  transform: scale(1);
}

input[id$="-premium"]:checked ~ .glass-glider-vertical {
  background: linear-gradient(135deg, #00000050, #ffbb00);
  box-shadow: 0 0 15px #00000077;
}
input[id$="-premium"]:checked + label {
  color: white;
}
input[id$="-premium"]:checked + label .radio-indicator {
  background: #ffc400;
  box-shadow: 0 0 0 2px #9c7300d3, 0 0 6px #695a00aa;
}
input[id$="-premium"]:checked + label .checkmark {
  opacity: 1;
  transform: scale(1);
}

input[id$="-business"]:checked ~ .glass-glider-vertical {
  background: linear-gradient(135deg, #00000050, var(--color-accent-blue));
  box-shadow: 0 0 15px #00000077;
}
input[id$="-business"]:checked + label {
  color: white;
}
input[id$="-business"]:checked + label .radio-indicator {
  background: var(--color-accent-blue);
  box-shadow: 0 0 0 2px #1d4ed8aa, 0 0 6px #1d4ed8aa;
}
input[id$="-business"]:checked + label .checkmark {
  opacity: 1;
  transform: scale(1);
}

.glass-radio-group-clase:has(input[id$="-economy"]:checked) {
  box-shadow: inset 0 0 8px rgba(255, 255, 255, 0.5);
}
.glass-radio-group-clase:has(input[id$="-premium"]:checked) {
  box-shadow: inset 0 0 8px rgba(255, 196, 0, 0.35);
}
.glass-radio-group-clase:has(input[id$="-business"]:checked) {
  box-shadow: inset 0 0 8px rgba(37, 99, 235, 0.35);
}

/* --- Variante SIN colores: Pasajeros (1 a 6) ----
   Filas más compactas que la de Clase (que solo tiene 3 opciones) para
   que las 6 opciones quepan sin salirse de la pantalla; si aun así no
   caben (viewport muy bajo), el panel se vuelve desplazable. */
.glass-dropdown-neutral {
  max-height: min(320px, 70vh);
  overflow-y: auto;
}

.glass-radio-group-neutral {
  width: 220px;
  padding: 0.7rem 0.6rem;
  gap: 0.4rem;
}

.glass-radio-group-neutral label {
  padding: 0.65rem 0.9rem;
  font-size: 0.9rem;
}

.glass-radio-group-neutral .glass-glider-vertical {
  height: 42px;
  background: linear-gradient(135deg, var(--color-text-dark), var(--color-text-muted));
  box-shadow: 0 0 12px rgba(34, 48, 61, 0.35);
}

.glass-radio-group-neutral input:checked + label {
  color: white;
}
.glass-radio-group-neutral input:checked + label .radio-indicator {
  background: var(--color-white);
  color: var(--color-text-dark);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6), 0 0 6px rgba(255, 255, 255, 0.5);
}
.glass-radio-group-neutral input:checked + label .checkmark {
  opacity: 1;
  transform: scale(1);
  color: var(--color-text-dark);
}

.glass-radio-group-neutral:has(input:checked) {
  box-shadow: inset 0 0 8px rgba(34, 48, 61, 0.25);
}

@media (max-width: 560px) {
  .glass-dropdown {
    left: 50%;
    transform: translate(-50%, -6px);
  }
  .glass-dropdown.is-open {
    transform: translate(-50%, 0);
  }
}
/* ===== 20. Completa tu viaje (tarjetas estilo Uiverse, paleta SkyPulse) ===== */

.completa-viaje-section {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 32px;
  position: relative;
  z-index: 1;
}

.cv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  justify-items: center;
}

.cv-card {
  width: 100%;
  max-width: 230px;
  min-height: 254px;
  height: auto;
  background: rgba(255, 255, 255, 0.65);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 8px 32px rgba(31, 41, 55, 0.1);
  border-radius: 20px;
  text-align: center;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
}

.cv-card:hover {
  transform: scale(0.98);
  box-shadow: 0px 0px 30px 1px rgba(37, 99, 235, 0.35);
}

.cv-card-inner {
  width: 100%;
  min-height: 100%;
  background: transparent;
  border-radius: 10px;
  transition: all 0.25s cubic-bezier(0, 0, 0, 1);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cv-icon {
  font-size: 30px;
  line-height: 1;
}

.cv-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text-dark);
}

.cv-desc {
  font-size: 12.5px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.cv-btn {
  display: inline-block;
  margin-top: 4px;
  padding: 8px 18px;
  background: var(--color-accent-blue);
  color: var(--color-white);
  font-size: 13px;
  font-weight: 700;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.cv-btn:hover {
  background: #1D4ED8;
}

@media (max-width: 980px) {
  .cv-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 620px) {
  .cv-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 400px) {
  .cv-grid {
    grid-template-columns: 1fr;
  }
}

.cv-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}

.cv-divider-line {
  flex: 1;
  max-width: 340px;
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--color-accent-blue) 25%, var(--color-primary) 50%, var(--color-accent-blue) 75%, transparent);
}

.cv-divider-icon {
  font-size: 32px;
  color: var(--color-accent-blue);
  transform: rotate(90deg);
  flex-shrink: 0;
  filter: drop-shadow(0 2px 3px rgba(23, 43, 62, 0.25));
}

.hoteles-search-fields .field {
  flex: 1 1 160px;
  min-width: 140px;
  position: relative;
}

.hoteles-search-fields .field:first-child {
  flex: 1.4 1 220px;
}

.rh-card-actions .btn {
  padding: 8px 14px;
  font-size: 12.5px;
  white-space: nowrap;
}
/* ===== 23. Ajustes puntuales movidos desde el <style> embebido de index.html ===== */

/* Las tarjetas de Promociones ya no muestran el precio "Desde" en la
   vista de la grilla (sigue calculándose y disponible dentro de
   "Ver detalles"); solo queda el botón, centrado. */
.offer-card .offer-price-row > div:first-child {
  display: none;
}
.offer-card .offer-price-row {
  justify-content: center;
}

/* Modal "Completa tu búsqueda" (Aprovechar oferta): la tarjeta genérica
   de auth-modal-card es angosta (pensada para el mensaje corto de
   "Inicia sesión"), así que acá la ensanchamos para que los 3 campos
   de fecha/pasajeros respiren y no se corten. */
.oferta-modal-card {
  width: 92vw;
  max-width: 640px;
}
.oferta-modal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0 28px;
}
.oferta-modal-grid .field input,
.oferta-modal-grid .field select {
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 640px) {
  .oferta-modal-grid {
    grid-template-columns: 1fr;
  }
}

/* Modo "Solo ida": el campo de fecha de regreso se oculta y quedan
   solo 2 campos (Fecha de ida y Pasajeros). En vez de dejarlos pegados
   a la izquierda dentro de las 3 columnas originales, los centramos
   como un grupo de ancho fijo. */
.oferta-modal-grid:has(#oferta-field-vuelta[hidden]) {
  grid-template-columns: repeat(2, minmax(160px, 220px));
  justify-content: center;
}

/* ===== 24. Modal "Elige tu medio de transporte" (aire / mar) =====
   Reutiliza .auth-modal-overlay / .auth-modal-card / .auth-modal-inner /
   .auth-modal-title / .auth-modal-desc / .auth-modal-actions de arriba
   para verse igual al resto de modales del sitio; acá solo se agregan
   los estilos propios de los botones de transporte. */
.transport-modal-card {
  width: 92vw;
  max-width: 640px;
}

.transport-modal-card .auth-modal-title { margin-bottom: 4px; }
.transport-modal-card .auth-modal-desc { margin-bottom: 4px; }

.transport-quick {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}

.transport-quick-btn {
  flex: 1 1 auto;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.transport-quick-btn:hover {
  border-color: var(--color-accent-blue);
  color: var(--color-accent-blue);
}

.transport-quick-btn.active {
  background: var(--color-accent-blue);
  border-color: var(--color-accent-blue);
  color: var(--color-white);
}

.transport-legs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.transport-leg {
  margin-bottom: 0;
  min-width: 0;
}

.transport-leg-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--color-text-dark);
  margin-bottom: 8px;
}

.transport-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.transport-option {
  flex: 1 1 80px;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 6px;
  border-radius: 12px;
  border: 1.5px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}

.transport-option:hover {
  border-color: var(--color-light-blue);
}

.transport-option.active {
  border-color: var(--color-accent-blue);
  background: rgba(37, 99, 235, 0.08);
  box-shadow: 0 0 0 1px var(--color-accent-blue) inset;
}

.transport-option-icon {
  font-size: 1.15rem;
}

.transport-option[hidden] {
  display: none !important;
}

.transport-modal-hint {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  background: var(--color-sky);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 16px;
}

.transport-modal-route {
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 700;
  margin: -2px 0 14px;
}

/* En pantallas angostas, los dos tramos vuelven a apilarse para no
   comprimir demasiado los botones. */
@media (max-width: 560px) {
  .transport-legs {
    grid-template-columns: 1fr;
  }
}

/* ===== 25. Menú de usuario: submenú de idioma (dropdown anidado) ===== */
.user-menu-lang-panel {
  display: flex;
  flex-direction: column;
  padding: 2px 0 6px 34px;
}

.user-menu-lang-panel[hidden] {
  display: none;
}

.user-menu-lang-item:hover {
  background: rgba(0, 0, 0, 0.06);
}

.user-menu-lang-item .user-menu-lang-check {
  visibility: hidden;
}

.user-menu-lang-item.is-active {
  font-weight: 600;
}

.user-menu-lang-item.is-active .user-menu-lang-check {
  visibility: visible;
}

#user-menu-idioma-btn[aria-expanded="true"] .user-menu-item-caret {
  transform: rotate(180deg);
}

/* Centra el toggle "Ida y vuelta / Solo ida" dentro del modal
   "Completa tu búsqueda" (oferta). En .search-toggle normal usa
   align-self: flex-end para pegarse a la fila del buscador, pero acá
   el contenedor es una columna centrada, así que lo recentramos. */
.oferta-modal-toggle {
  align-self: center;
  margin: 4px 0 4px;
}
/* =============================================================================
   NOTIFICACIONES del menú de usuario (badge, panel desplegable y lista).
   Movido aquí desde el <style> inline de index.html.
   ============================================================================= */
.user-menu-notif-badge {
  background: #e63946;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  padding: 3px 6px;
  border-radius: 999px;
  margin-left: 6px;
}
.user-menu-notif-panel {
  max-height: 320px;
  overflow-y: auto;
  padding: 6px 4px;
}
.user-menu-notif-empty {
  margin: 10px 12px;
  font-size: 13px;
  color: #6b7280;
}
.user-menu-notif-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-menu-notif-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  cursor: pointer;
  font: inherit;
}
.user-menu-notif-item:hover {
  background: rgba(0, 0, 0, 0.04);
}
.user-menu-notif-item.is-unread {
  background: rgba(59, 130, 246, 0.08);
}
.user-menu-notif-item-title {
  font-weight: 600;
  font-size: 13px;
  display: flex;
  align-items: center !important;
  gap: 6px;
}
.user-menu-notif-item.is-unread .user-menu-notif-item-title::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3b82f6;
  flex: none;
}
.user-menu-notif-item-msg {
  font-size: 12px;
  color: #4b5563;
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.user-menu-notif-item-date {
  font-size: 11px;
  color: #9ca3af;
  margin-top: 4px;
}

/* =============================================================================
   26. RESPONSIVE — ajustes generales para pantallas angostas (celulares)
   ============================================================================= */

/* Evita cualquier scroll horizontal accidental por elementos que se
   desborden en pantallas muy angostas. */
html, body {
  overflow-x: hidden;
}

@media (max-width: 860px) {
  header,
  .navbar {
    padding-left: 20px;
    padding-right: 20px;
  }

  .nav-user-wrap {
    gap: 10px;
  }
}

@media (max-width: 600px) {
  header {
    padding: 16px 16px;
  }

  .navbar {
    padding: 14px 16px;
    min-height: 64px;
  }

  .nav-brand {
    font-size: 16px;
    gap: 8px;
  }

  .nav-user {
    gap: 8px;
  }

  .nav-user .btn {
    padding: 8px 12px;
    font-size: 13px;
  }

  .hero-title {
    font-size: 30px;
  }

  .section-title {
    font-size: 24px;
  }

  .offers-title {
    font-size: 22px;
  }

  .offers-header {
    align-items: flex-start;
  }

  .stats-row {
    gap: 24px;
  }
}

@media (max-width: 480px) {
  .nav-user-wrap {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 8px;
  }

  .eyebrow-pill {
    font-size: 12px;
    padding: 6px 14px;
  }

  .hero-title {
    font-size: 26px;
  }

  .hero-sub {
    font-size: 13.5px;
  }

  .btn-glass {
    padding: 11px 22px;
    font-size: 12px;
  }

  .section-heading {
    padding: 0 16px;
  }

  .section-title {
    font-size: 22px;
  }

  .offers-section,
  .destinos-section,
  .completa-viaje-section {
    padding: 0 20px;
  }

  .experience-section {
    padding: 50px 20px;
  }

  .stats-row {
    gap: 18px;
  }

  .stat-num {
    font-size: 21px;
  }
}

/* =============================================================================
   27. RESPONSIVE — refuerzo para todos los dispositivos
   (móviles muy pequeños, tablets, laptops, monitores grandes y TV)
   ============================================================================= */

/* --- Red de seguridad global: nunca permitir scroll horizontal ni
   imágenes/videos que se desborden del contenedor, sin importar el
   dispositivo. Las clases ya existentes (más específicas) siguen
   mandando sobre estas reglas por especificidad CSS. --- */
html, body {
  width: 100%;
  overflow-x: hidden;
}

img, video, iframe, svg {
  max-width: 100%;
  height: auto;
}

table {
  max-width: 100%;
}

/* --- Móviles muy pequeños (320px–374px: iPhone SE, gamas de entrada) --- */
@media (max-width: 374px) {
  .navbar {
    padding: 12px 12px;
    gap: 10px;
  }

  .nav-brand {
    font-size: 14px;
  }

  .hero-title {
    font-size: 22px;
  }

  .hero-sub {
    font-size: 13px;
  }

  .stats-row {
    gap: 14px;
  }

  .btn-glass,
  .btn {
    font-size: 12px;
    padding: 10px 16px;
  }

  .search-card {
    width: calc(100% - 16px);
    padding: 10px 12px;
  }
}

/* --- Móviles en horizontal (poca altura): evita que el hero empuje
   el contenido fuera de la pantalla --- */
@media (max-height: 480px) and (orientation: landscape) {
  main.hero {
    padding: 60px 20px 40px;
  }

  .hero-preview-row {
    display: none;
  }
}

/* --- Tablets en vertical y horizontal (768px–1024px: iPad y similares).
   El navbar de escritorio ya se activa en 861px; aquí se ajustan
   respiraciones para que no se vea apretado en ese rango intermedio. --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .navbar {
    padding-left: 28px;
    padding-right: 28px;
  }

  .nav-links {
    gap: 16px;
  }

  .hero-title {
    font-size: 38px;
  }

  .search-card {
    max-width: 92%;
  }

  .destinos-section,
  .offers-section,
  .completa-viaje-section {
    padding: 0 24px;
  }
}

/* --- Laptops y monitores estándar (1280px–1599px): sin cambios grandes,
   solo un poco más de aire en los contenedores principales. --- */
@media (min-width: 1280px) {
  .destinos-section,
  .offers-section {
    max-width: 1180px;
  }
}

/* --- Monitores grandes y televisores (1600px en adelante): la página
   ya está centrada con max-width, así que aquí se escala tipografía y
   contenedores para que no se vean pequeños vistos desde lejos. --- */
@media (min-width: 1600px) {
  html {
    font-size: 17px;
  }

  .navbar {
    padding: 20px 64px;
  }

  .hero-title {
    font-size: 50px;
  }

  .hero-sub {
    max-width: 700px;
    font-size: 16.5px;
  }

  .section-title {
    font-size: 34px;
  }

  .search-card {
    max-width: 1500px;
  }

  .destinos-section,
  .offers-section,
  .experience-section,
  .completa-viaje-section {
    max-width: 1400px;
  }
}

/* --- Televisores 4K / pantallas ultra anchas (2200px en adelante) --- */
@media (min-width: 2200px) {
  html {
    font-size: 19px;
  }

  .hero-title {
    font-size: 58px;
  }

  .search-card {
    max-width: 1700px;
  }

  .destinos-section,
  .offers-section,
  .experience-section,
  .completa-viaje-section {
    max-width: 1600px;
  }
}