/* ==========================================================================
   Luxury Mexico Travel — hoja de estilo del sitio
   --------------------------------------------------------------------------
   Sustituye a los cinco archivos de tokens anteriores (colors, typography,
   spacing, borders, styles), que declaraban fuentes que el sitio nunca
   cargaba y clases que ninguna página usaba.

   Dos familias, dos papeles:
     · Fraunces        — títulos y prosa
     · Hanken Grotesk  — rótulos, navegación y botones

   Contiene además los bloques que estaban copiados en cada página: el pie
   (25 copias) y la maqueta de las páginas de experiencia (23 copias).
   ========================================================================== */

:root {
  /* --- Color ------------------------------------------------------------ */
  --navy-900:        #040729;   /* fondo del sitio */
  --navy-700:        #14213D;
  --gold:            #FCA311;   /* acento de marca */
  --gold-claro:      #FFC15A;
  --gold-brillante:  #FFD166;
  --hueso:           #F4F2EC;   /* texto sobre fondo oscuro */
  --gris-claro:      #E5E5E5;
  --gris-medio:      #8b93ab;   /* texto secundario */
  --gris-tenue:      #4b5578;
  --verde-whatsapp:  #25D366;

  --linea-tenue:  rgba(252, 163, 17, .14);
  --linea-media:  rgba(252, 163, 17, .25);
  --borde-suave:  rgba(233, 231, 226, .28);

  /* --- Tipografía -------------------------------------------------------- */
  --fuente-titulo: 'Fraunces', Georgia, serif;
  --fuente-texto:  'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --texto-rotulo:   12px;   /* mayúsculas espaciadas */
  --texto-cuerpo:   17px;
  --texto-guia:     20px;

  --espaciado-rotulo: .24em;
  --espaciado-boton:  .14em;

  /* --- Maquetación ------------------------------------------------------- */
  --ancho-contenido: 1180px;
  --ancho-ancho:     1240px;
  --margen-lateral:  48px;
  --margen-movil:    22px;
}

/* --- Base ---------------------------------------------------------------- */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--navy-900);
}

body {
  font-family: var(--fuente-texto);
  color: var(--gris-claro);
  -webkit-font-smoothing: antialiased;
}

::selection {
  background: rgba(252, 163, 17, .3);
  color: #fff;
}

/* Respeta a quien pide menos movimiento en su sistema. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Foco visible y coherente en todo el sitio. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}


/* ==========================================================================
   Pie de página — presente en las 25 páginas
   ========================================================================== */
.lmt-wa:hover { background: var(--verde-whatsapp); color: var(--navy-900); }
.lmt-footer a.lmt-nav:hover { color: var(--gold); }

@media (max-width: 767px) {
  .lmt-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .lmt-footer .lmt-pad {
    padding-left: var(--margen-movil) !important;
    padding-right: var(--margen-movil) !important;
  }
}


/* ==========================================================================
   Páginas de experiencia
   ========================================================================== */
.x-nav a {
  color: rgba(233, 231, 226, .7);
  text-decoration: none;
  font-family: var(--fuente-texto);
  font-size: var(--texto-rotulo);
  letter-spacing: .16em;
  text-transform: uppercase;
  transition: color .25s ease;
}
.x-nav a:hover { color: var(--gold); }

.x-link { color: var(--gold); text-decoration: none; transition: color .25s ease; }
.x-link:hover { color: var(--gold-claro); }

.x-cross a {
  color: rgba(233, 231, 226, .82);
  text-decoration: none;
  font-family: var(--fuente-texto);
  font-size: var(--texto-guia);
  transition: color .25s ease;
  border-bottom: 1px solid transparent;
  padding-bottom: 3px;
}
.x-cross a:hover { color: var(--gold); border-bottom-color: rgba(252, 163, 17, .5); }

.x-cta { transition: gap .3s ease, color .25s ease; }
.x-cta:hover { color: var(--gold-claro); }

.x-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--fuente-texto);
  font-size: 13px;
  letter-spacing: var(--espaciado-boton);
  text-transform: uppercase;
  color: var(--navy-900);
  background: var(--gold);
  padding: 15px 30px;
  text-decoration: none;
  transition: background .25s ease;
}
.x-btn:hover { background: var(--gold-claro); }

.x-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.x-dropcap::first-letter {
  float: left;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 4.4em;
  line-height: .78;
  color: var(--gold);
  padding: .04em .09em 0 0;
}

@media (max-width: 767px) {
  .x-hero { height: 560px !important; }
  .x-hero-bar { padding: 20px var(--margen-movil) !important; }
  .x-hero-bar img { height: 30px !important; }
  .x-nav { gap: 18px !important; }
  .x-nav a { font-size: 11px !important; }
  .x-hero-text { padding: 0 var(--margen-movil) 40px !important; }
  .x-hero-text h1 { font-size: 40px !important; max-width: 100% !important; }
  .x-intro { padding: 56px var(--margen-movil) 32px !important; }
  .x-intro-grid { grid-template-columns: 1fr !important; gap: 32px !important; }
  .x-intro-grid > div:last-child {
    padding-left: 0 !important;
    border-left: none !important;
    border-top: 1px solid var(--linea-media) !important;
    padding-top: 28px !important;
  }
  .x-intro p { font-size: 18px !important; line-height: 1.55 !important; }
  .x-editorial { height: 420px !important; }
  .x-editorial-inner { padding: 0 var(--margen-movil) 28px !important; }
  .x-editorial-inner p { font-size: 16px !important; line-height: 1.55 !important; }
  .x-destino-a {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 var(--margen-movil) !important;
    margin: 48px auto 24px !important;
  }
  .x-destino-a > div:first-child { height: 260px !important; }
  .x-destino-b { height: auto !important; min-height: 480px !important; }
  .x-destino-b-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
    padding: 0 var(--margen-movil) 32px !important;
  }
  .x-destino-h3 { font-size: 28px !important; }
  .x-destino-text { font-size: 17px !important; }
  .x-cross-section { padding: 56px var(--margen-movil) 24px !important; }
  .x-cross-grid {
    grid-template-columns: 1fr !important;
    max-width: 100% !important;
    gap: 36px !important;
  }
  .x-footer { padding: 20px var(--margen-movil) 56px !important; }
  .x-footer-grid { grid-template-columns: 1fr !important; gap: 36px !important; }
  .x-other-grid { grid-template-columns: 1fr !important; }
  .x-cta a { font-size: 20px !important; }
  .x-cta-inner { padding: 64px var(--margen-movil) !important; }
}