/* =========================================================================
   RumboThai — styles.css (v2, arquitectura multipágina)
   Mobile-first, sin frameworks. Sistema editorial: menos tarjetas,
   composiciones a sangre completa, tipografía con carácter.
   ========================================================================= */

/* ---------- Reset básico ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
figure,
blockquote {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

picture {
  display: block;
  width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* ---------- Tokens de marca ---------- */
:root {
  --color-navy: #0b2a4a;
  --color-navy-dark: #071b30;
  --color-navy-light: #123a63;
  --color-saffron: #e8772b;
  --color-saffron-dark: #c75f1b;
  --color-saffron-light: #fbe1cc;
  /* Variante oscurecida de --color-saffron-dark para texto pequeño en negrita
     sobre fondos claros (warm-white/cream): ~5:1 de contraste, cumple WCAG AA
     (--color-saffron-dark original da ~3.8:1 en ese uso). */
  --color-saffron-a11y: #a34d16;
  --color-turquoise: #1fa8a0;
  --color-turquoise-dark: #167e78;
  --color-warm-white: #faf6ef;
  --color-cream: #f3ece0;
  --color-ink: #1c2125;
  --color-gray: #5c6470;
  --color-gray-light: #e4ded2;
  --color-white: #ffffff;

  /* Paleta específica del mapa interactivo: verde bosque/esmeralda para
     el territorio, terracota/dorado para los marcadores. */
  --color-forest: #1f5c45;
  --color-forest-dark: #123d2d;
  --color-emerald: #2f9169;
  --color-terracotta: #c1652f;
  --color-gold: #c9a227;
  --color-whatsapp: #1e9e6b;

  --font-body: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-pill: 999px;

  --shadow-sm: 0 2px 8px rgba(11, 42, 74, 0.08);
  --shadow-md: 0 8px 24px rgba(11, 42, 74, 0.12);
  --shadow-lg: 0 16px 40px rgba(11, 42, 74, 0.16);

  --container-width: 1180px;
  --header-height: 64px;
  --topbar-height: 40px;

  /* Escala de espaciados (para separar secciones/bloques con consistencia) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.15s ease;
  --transition-base: 0.3s ease;
  --duration-reveal: 0.7s;
  --focus-ring: 0 0 0 3px rgba(232, 119, 43, 0.45);
}

/* Foco visible por teclado, consistente en toda la web */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------- Aparición suave al hacer scroll (IntersectionObserver) ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--duration-reveal) var(--ease-out), transform var(--duration-reveal) var(--ease-out);
}

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  font-family: var(--font-body);
  color: var(--color-ink);
  background: var(--color-warm-white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-navy);
  letter-spacing: -0.01em;
}

h1 {
  font-size: clamp(2.4rem, 4vw + 1.4rem, 4rem);
}

h2 {
  font-size: clamp(1.9rem, 2.6vw + 1rem, 2.75rem);
}

h3 {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 700;
}

p {
  color: var(--color-gray);
}

/* ---------- Utilidades de layout ---------- */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.container--narrow {
  max-width: 760px;
}

.container--text {
  max-width: 640px;
}

.section {
  padding-block: clamp(3.5rem, 8vw, 7rem);
}

.section--tight {
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.section--cream {
  background: var(--color-cream);
}

.section--navy {
  background: var(--color-navy);
}

.section--navy h2,
.section--navy p {
  color: var(--color-white);
}

.section--navy p {
  opacity: 0.78;
}

.eyebrow {
  display: inline-block;
  color: var(--color-saffron-a11y);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.78rem;
  margin-bottom: 0.9rem;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  z-index: 1000;
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

:focus-visible {
  outline: 3px solid var(--color-turquoise);
  outline-offset: 2px;
}

/* ---------- Botones ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: 0.98rem;
  font-family: var(--font-body);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
  white-space: nowrap;
}

.btn--small {
  padding: 0.55rem 1.1rem;
  font-size: 0.85rem;
}

.btn--primary {
  background: var(--color-navy);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.btn--primary:hover {
  background: var(--color-navy-light);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--ghost {
  background: transparent;
  color: var(--color-navy);
  border: 2px solid var(--color-navy);
}

.btn--ghost:hover {
  background: var(--color-navy);
  color: var(--color-white);
}

.btn--ghost-light {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.7);
}

.btn--ghost-light:hover {
  background: var(--color-white);
  color: var(--color-navy);
}

.btn--whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-white);
}

.btn--whatsapp:hover {
  background: #187e56;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.btn--disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--whatsapp.btn--disabled:hover {
  background: var(--color-whatsapp);
  transform: none;
  box-shadow: none;
}

.btn img {
  flex-shrink: 0;
}

.text-link {
  font-weight: 700;
  color: var(--color-navy);
  border-bottom: 2px solid var(--color-saffron);
  padding-bottom: 0.15rem;
}

.text-link:hover {
  color: var(--color-saffron-dark);
}

/* ---------- Topbar ---------- */
.topbar {
  background: var(--color-navy);
  color: var(--color-white);
  font-size: 0.8rem;
  min-height: var(--topbar-height);
  display: flex;
  align-items: center;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.5rem;
}

.topbar__msg {
  color: var(--color-white);
  opacity: 0.92;
  font-size: 0.78rem;
}

.topbar__social {
  display: flex;
  gap: 0.75rem;
}

.topbar__social img {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

.topbar__social a:hover img {
  opacity: 1;
}

/* ---------- Header / navegación ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 246, 239, 0.98);
  box-shadow: var(--shadow-sm);
  transition: background var(--transition-base), box-shadow var(--transition-base);
}

/* En la Home, la cabecera se integra visualmente sobre el hero: empieza
   transparente (con una veladura oscura solo detrás de logo/menú, para que
   se lea bien encima de cualquier foto) y pasa a sólida al hacer scroll. */
body[data-page="home"] .site-header {
  position: fixed;
  top: var(--topbar-height);
  left: 0;
  right: 0;
  background: linear-gradient(to bottom, rgba(7, 27, 48, 0.45), rgba(7, 27, 48, 0));
  box-shadow: none;
  transition: background var(--transition-base), box-shadow var(--transition-base), top var(--transition-base);
}

body[data-page="home"] .site-header.is-scrolled {
  top: 0;
  background: rgba(250, 246, 239, 0.98);
  box-shadow: var(--shadow-sm);
}

body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__list a,
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__list .nav-link {
  color: var(--color-white);
  /* Sombra sutil para mantener el contraste del texto blanco incluso
     cuando el fotograma del vídeo/foto del hero es claro (la veladura del
     header se desvanece hacia el borde inferior). */
  text-shadow: 0 1px 3px rgba(7, 27, 48, 0.55);
}

body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__list a[aria-current="page"] {
  color: var(--color-saffron-light);
}

body[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle__bar,
body[data-page="home"] .site-header:not(.is-scrolled) .brand__logo {
  /* Mismo motivo que el text-shadow de arriba: el icono de menú y el
     logo son blancos sobre un header transparente, así que necesitan su
     propio contraste independiente del fotograma del hero. */
  filter: drop-shadow(0 1px 2px rgba(7, 27, 48, 0.55));
}

body[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle__bar {
  background: var(--color-white);
}

body[data-page="home"] .site-header:not(.is-scrolled) .nav-toggle:hover {
  background: rgba(255, 255, 255, 0.15);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height);
  gap: 1rem;
}

.brand {
  position: relative;
  z-index: 95;
}

.brand__logo {
  height: 46px;
  width: auto;
  display: block;
}

/* Home: logo "sin fondo" (recorte circular con margen transparente propio,
   usado tal cual). object-fit: contain evita deformarlo dentro de la caja. */
body[data-page="home"] .brand__logo {
  height: 56px;
  width: 56px;
  object-fit: contain;
  background: none;
  border: none;
  box-shadow: none;
}

.footer-logo-badge {
  display: inline-block;
  background: var(--color-warm-white);
  border-radius: var(--radius-md);
  padding: 0.6rem;
  line-height: 0;
}

.footer-logo-badge img {
  height: 72px;
  width: auto;
  display: block;
}

.site-header__actions {
  position: relative;
  z-index: 95;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.nav-whatsapp-cta span {
  display: none;
}

@media (min-width: 480px) {
  .nav-whatsapp-cta span {
    display: inline;
  }
}

.nav-toggle {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
}

.nav-toggle:hover {
  background: var(--color-gray-light);
}

.nav-toggle__bar {
  width: 22px;
  height: 2px;
  background: var(--color-navy);
  margin-inline: auto;
  transition: transform var(--transition-base), opacity var(--transition-base);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.main-nav {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  background: var(--color-warm-white);
  transform: translateX(100%);
  transition: transform var(--transition-base);
  overflow-y: auto;
  padding: 1.5rem 1.25rem;
  z-index: 90;
}

.main-nav.is-open {
  transform: translateX(0);
}

.main-nav__list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.main-nav__list a,
.main-nav__list .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 0.25rem;
  font-weight: 600;
  color: var(--color-navy);
  border-bottom: 1px solid var(--color-gray-light);
}

.main-nav__list a[aria-current="page"] {
  color: var(--color-saffron-a11y);
}

.main-nav__badge {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  background: var(--color-saffron-light);
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
}

@media (min-width: 1040px) {
  .nav-toggle {
    display: none;
  }

  .main-nav {
    position: static;
    inset: auto;
    transform: none;
    background: transparent;
    padding: 0;
    overflow: visible;
    z-index: auto;
  }

  .main-nav__list {
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
  }

  .main-nav__list a,
  .main-nav__list .nav-link {
    padding: 0.4rem 0;
    border-bottom: none;
    position: relative;
    font-size: 0.92rem;
  }

  .main-nav__list a:hover,
  .main-nav__list .nav-link:hover {
    color: var(--color-saffron-dark);
  }
}

/* =========================================================================
   COMPONENTES EDITORIALES
   ========================================================================= */

/* ---------- Hero a sangre completa (Home) ---------- */
.hero-full {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: flex-end;
  background: var(--color-navy);
  overflow: hidden;
}

.hero-full__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero-full__media picture {
  height: 100%;
}

.hero-full__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-full__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

@media (max-width: 767px) {
  .hero-full__video {
    object-position: center center;
  }
}

.hero-full__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 27, 48, 0.88) 0%, rgba(7, 27, 48, 0.35) 55%, rgba(7, 27, 48, 0.15) 100%);
}

.hero-full__content {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 8vw, 5rem);
  max-width: 760px;
}

.hero-full h1,
.hero-full .eyebrow {
  color: var(--color-white);
}

.hero-full p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
  max-width: 50ch;
  margin-top: 1rem;
}

.hero-full__actions {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
}

/* Entrada suave y escalonada del contenido del hero al cargar la página */
@keyframes hero-rise-in {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero-full .eyebrow,
.hero-full h1,
.hero-full p,
.hero-full__actions {
  animation: hero-rise-in 0.8s var(--ease-out) both;
}

.hero-full .eyebrow {
  animation-delay: 0.05s;
}

.hero-full h1 {
  animation-delay: 0.15s;
}

.hero-full p {
  animation-delay: 0.3s;
}

.hero-full__actions {
  animation-delay: 0.45s;
}

/* ---------- Cabecera de página interior ---------- */
.page-header {
  position: relative;
  min-height: 42vh;
  display: flex;
  align-items: flex-end;
  background: var(--color-navy);
  overflow: hidden;
}

.page-header__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.page-header__media picture {
  height: 100%;
}

.page-header__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-header__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 27, 48, 0.85) 0%, rgba(7, 27, 48, 0.3) 70%);
}

.page-header__content {
  position: relative;
  z-index: 1;
  padding-block: 2.5rem;
  max-width: 700px;
}

.page-header h1,
.page-header .eyebrow {
  color: var(--color-white);
}

.page-header p {
  color: rgba(255, 255, 255, 0.88);
  margin-top: 0.75rem;
  max-width: 55ch;
}

/* ---------- Manifiesto / declaración editorial ---------- */
.manifesto {
  text-align: center;
}

.manifesto blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw + 1rem, 2.35rem);
  line-height: 1.35;
  color: var(--color-navy);
  font-style: italic;
}

.manifesto cite {
  display: block;
  margin-top: 1.5rem;
  font-style: normal;
  font-weight: 700;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-saffron-dark);
}

.manifesto--with-image .manifesto__inner {
  display: grid;
  gap: 2.5rem;
  align-items: center;
  text-align: left;
}

.manifesto--with-image .manifesto__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.manifesto--with-image .manifesto__text {
  text-align: left;
}

@media (min-width: 780px) {
  .manifesto--with-image .manifesto__inner {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

/* ---------- Cabecera de sección ---------- */
.section-head {
  max-width: 640px;
  margin-bottom: 2.5rem;
}

.section-head p {
  margin-top: 0.75rem;
  font-size: 1.05rem;
}

.section-head--center {
  margin-inline: auto;
  text-align: center;
}

/* ---------- Tile grid (entradas visuales, sin caja de tarjeta) ---------- */
.tile-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .tile-grid {
    grid-template-columns: repeat(var(--tile-cols, 2), 1fr);
  }
}

@media (min-width: 1040px) {
  .tile-grid--3 {
    grid-template-columns: repeat(3, 1fr);
  }
  .tile-grid--5,
  .tile-grid--6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tile {
  position: relative;
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  isolation: isolate;
}

.tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
  z-index: -2;
}

.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 27, 48, 0.92) 0%, rgba(7, 27, 48, 0.15) 65%, rgba(7, 27, 48, 0) 100%);
  z-index: -1;
}

.tile:hover img {
  transform: scale(1.06);
}

.tile__body {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.5rem;
}

.tile__body h3 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-white);
  margin-bottom: 0.4rem;
}

.tile__body p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
  /* Red de seguridad: si un texto futuro es más largo, se recorta en vez
     de desbordar el tile o tapar el enlace inferior. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.tile__link {
  color: var(--color-white);
  font-weight: 700;
  font-size: 0.85rem;
  border-bottom: 2px solid var(--color-saffron);
  padding-bottom: 2px;
}

.tile--short {
  aspect-ratio: 4 / 3;
}

/* ---------- Catálogo de experiencias (tarjetas de excursiones) ---------- */
.experience-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .experience-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .experience-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.experience-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.experience-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Altura fija (no aspect-ratio) para que ninguna foto vertical desborde
   la tarjeta: todas las imágenes ocupan exactamente el mismo espacio. */
.experience-card__media {
  display: block;
  position: relative;
  height: 240px;
  flex-shrink: 0;
}

.experience-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

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

.experience-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.25rem 1.4rem 1.5rem;
  flex: 1;
}

/* Patrón de "tarjeta completamente clicable": un enlace invisible cubre
   toda la tarjeta (hijo directo, sin ningún ancestro con overflow:hidden
   de por medio que lo recorte), y los botones reales (Ver detalles,
   WhatsApp) quedan por encima con su propio z-index para seguir siendo
   clicables de forma independiente. */
.experience-card__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.experience-card__actions .btn {
  position: relative;
  z-index: 2;
}

.experience-card__badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  align-content: flex-start;
  gap: 0.5rem;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
}

.experience-card__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-saffron-dark);
  background: var(--color-saffron-light);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
}

.experience-card__destination {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-gray);
}

.experience-card__title {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.3;
  height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.experience-card__title {
  color: var(--color-navy);
}

.experience-card:hover .experience-card__title {
  color: var(--color-saffron-dark);
}

.experience-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem 0.9rem;
  font-size: 0.85rem;
  line-height: 1.4;
  height: 4.2em;
  overflow: hidden;
  color: var(--color-navy);
}

.experience-card__meta li {
  position: relative;
  padding-left: 0.9rem;
}

.experience-card__meta li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--color-saffron);
}

.experience-card__meta li:first-child::before {
  content: "";
}

.experience-card__meta li:first-child {
  padding-left: 0;
}

.experience-card__price {
  font-weight: 700;
}

.experience-card__meta .is-tentative {
  color: var(--color-gray);
  font-style: italic;
  font-weight: 400;
}

.experience-card__desc {
  font-size: 0.92rem;
  line-height: 1.5;
  height: 4.5em;
  color: var(--color-gray);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.experience-card__actions {
  margin-top: auto;
  padding-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* ---------- Página de detalle de una experiencia ---------- */
.experience-checklists {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .experience-checklists {
    grid-template-columns: 1fr 1fr;
  }
}

.experience-checklist h3 {
  font-size: 1.05rem;
  color: var(--color-navy);
  margin-bottom: 0.75rem;
}

.experience-checklist ul {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.experience-checklist li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-navy);
  font-size: 0.95rem;
}

.experience-checklist li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
}

.experience-checklist--includes li::before {
  content: "✓";
  color: var(--color-turquoise-dark);
}

.experience-checklist--excludes li::before {
  content: "✕";
  color: var(--color-gray);
}

.experience-notes {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  font-size: 0.92rem;
  font-style: italic;
  color: var(--color-gray);
}

/* ---------- Split editorial (imagen + texto) ---------- */
.editorial {
  display: grid;
  gap: 2rem;
  align-items: center;
}

.editorial__media img {
  border-radius: var(--radius-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
  box-shadow: var(--shadow-md);
}

.editorial__content p {
  margin-bottom: 1rem;
  font-size: 1.02rem;
}

.editorial__content ul {
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.editorial__content ul li {
  padding-left: 1.4rem;
  position: relative;
  color: var(--color-gray);
}

.editorial__content ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-saffron);
}

@media (min-width: 900px) {
  .editorial {
    grid-template-columns: 1fr 1fr;
  }
  .editorial--reverse .editorial__media {
    order: 2;
  }
  .editorial--reverse .editorial__content {
    order: 1;
  }
}

/* ---------- Pasos mínimos (numerados) ---------- */
.steps-minimal {
  display: grid;
  gap: 2rem;
}

@media (min-width: 780px) {
  .steps-minimal {
    grid-template-columns: repeat(3, 1fr);
  }
}

.step-minimal__number {
  font-family: var(--font-display);
  font-size: 3rem;
  font-weight: 700;
  color: var(--color-saffron);
  line-height: 1;
  margin-bottom: 0.75rem;
}

.step-minimal h3 {
  margin-bottom: 0.4rem;
  color: var(--color-navy);
}

.step-minimal p {
  font-size: 0.95rem;
}

/* ---------- Datos rápidos (páginas de detalle) ---------- */
.detail-facts {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  border-top: 1px solid var(--color-gray-light);
  padding-top: 1.5rem;
}

@media (min-width: 700px) {
  .detail-facts {
    grid-template-columns: repeat(3, 1fr);
  }
}

.detail-facts dt {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 700;
  color: var(--color-saffron-a11y);
  margin-bottom: 0.35rem;
}

.detail-facts dd {
  color: var(--color-navy);
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}

/* ---------- Cita destacada / testimonio ---------- */
.pull-quotes {
  display: grid;
  gap: 2.5rem;
}

@media (min-width: 900px) {
  .pull-quotes {
    grid-template-columns: repeat(var(--quote-cols, 1), 1fr);
  }
}

.pull-quote {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

.pull-quote blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(1.2rem, 1.6vw + 0.9rem, 1.6rem);
  color: var(--color-navy);
  line-height: 1.45;
}

.pull-quote figcaption {
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.pull-quote img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.pull-quote strong {
  display: block;
  font-size: 0.9rem;
  color: var(--color-navy);
}

.pull-quote span {
  font-size: 0.8rem;
  color: var(--color-gray);
}

.pending-note {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

/* ---------- FAQ ---------- */
.faq-item {
  background: var(--color-white);
  border-radius: var(--radius-sm);
  margin-bottom: 0.75rem;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.faq-item summary {
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  color: var(--color-navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  list-style: none;
}

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

.faq-item summary::after {
  content: "+";
  font-size: 1.4rem;
  color: var(--color-saffron);
  flex-shrink: 0;
  transition: transform var(--transition-base);
}

.faq-item[open] summary::after {
  transform: rotate(45deg);
}

.faq-item__answer {
  padding: 0 1.25rem 1.1rem;
  font-size: 0.95rem;
}

/* ---------- CTA bands ---------- */
.cta-band {
  text-align: center;
}

.cta-band__inner {
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.cta-band--saffron {
  background: var(--color-saffron);
}

.cta-band--saffron h2,
.cta-band--saffron p {
  color: var(--color-white);
}

.cta-band--saffron p {
  opacity: 0.95;
}

.cta-band--saffron .btn--primary {
  background: var(--color-navy);
}

.cta-band--navy {
  background: var(--color-navy);
}

.cta-band--navy h2,
.cta-band--navy p {
  color: var(--color-white);
}

.cta-band--navy p {
  opacity: 0.85;
}

.cta-band__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.85rem;
  margin-top: 0.4rem;
}

/* ---------- Bloque de contacto ---------- */
.contact-block {
  display: grid;
  gap: 2rem;
}

@media (min-width: 900px) {
  .contact-block {
    grid-template-columns: 1.1fr 0.9fr;
  }
}

.contact-block__channels {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.5rem;
}

.contact-channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact-channel img {
  width: 24px;
  height: 24px;
}

.contact-channel strong {
  display: block;
  color: var(--color-navy);
  font-size: 0.95rem;
}

.contact-channel span {
  font-size: 0.85rem;
  color: var(--color-gray);
}

.contact-channel:not(.contact-channel--pending):hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.contact-channel--pending {
  opacity: 0.65;
}

.contact-channel--pending img {
  opacity: 0.7;
}

.contact-block__note {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1.5rem;
}

.contact-block__note h3 {
  margin-bottom: 0.6rem;
}

.contact-block__note p {
  font-size: 0.92rem;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-navy-dark);
  color: rgba(255, 255, 255, 0.85);
  padding-top: 3.5rem;
}

.site-footer__inner {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__brand p {
  color: rgba(255, 255, 255, 0.7);
  margin-block: 1rem;
  max-width: 32ch;
}

.site-footer__social {
  display: flex;
  gap: 0.9rem;
}

.site-footer__social img {
  width: 20px;
  height: 20px;
}

.site-footer__columns {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: repeat(2, 1fr);
}

.site-footer__columns h3,
.site-footer__contact h3 {
  color: var(--color-white);
  font-size: 0.95rem;
  margin-bottom: 0.9rem;
  font-family: var(--font-body);
}

.site-footer__columns li {
  margin-bottom: 0.6rem;
}

.site-footer__columns a,
.site-footer__contact a {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
}

.site-footer__columns a:hover,
.site-footer__contact a:hover {
  color: var(--color-saffron);
}

.site-footer__contact p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.92rem;
  margin-bottom: 0.5rem;
}

.site-footer__location {
  opacity: 0.65;
}

.site-footer__bottom-inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-block: 1.5rem;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.6);
}

.site-footer__legal {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
}

@media (min-width: 700px) {
  .site-footer__inner {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .site-footer__bottom-inner {
    flex-direction: row;
    justify-content: space-between;
  }
}

/* ---------- Badges (próximamente) ---------- */
.badge-soon {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-saffron-dark);
  background: var(--color-saffron-light);
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  margin-left: 0.4rem;
}

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-float {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg);
  z-index: 80;
  animation: whatsapp-pulse 2.6s ease-in-out infinite;
}

.whatsapp-float:hover {
  transform: scale(1.06);
}

@keyframes whatsapp-pulse {
  0%,
  100% {
    box-shadow: var(--shadow-lg), 0 0 0 0 rgba(30, 158, 107, 0.45);
  }
  50% {
    box-shadow: var(--shadow-lg), 0 0 0 10px rgba(30, 158, 107, 0);
  }
}

/* ---------- Toast (aviso "próximamente") ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 150%);
  background: var(--color-navy);
  color: var(--color-white);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-pill);
  font-size: 0.88rem;
  box-shadow: var(--shadow-md);
  z-index: 200;
  transition: transform var(--transition-base);
  max-width: 90vw;
  text-align: center;
}

.toast.is-visible {
  transform: translate(-50%, 0);
}

/* ---------- noscript ---------- */
.noscript-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-block: 0.75rem;
  font-weight: 600;
}

/* =========================================================================
   MAPA INTERACTIVO DE TAILANDIA
   ========================================================================= */
.map-section {
  background: var(--color-cream);
}

.map-section__intro {
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
  margin-bottom: 2rem;
}

.thailand-map {
  max-width: 420px;
  margin-inline: auto;
}

.thailand-map__svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.thailand-map__land {
  fill: var(--color-forest);
  stroke: var(--color-forest-dark);
  stroke-width: 1.5;
}

.thailand-map__pin {
  cursor: pointer;
  outline: none;
}

.thailand-map__pin-hitarea {
  fill: transparent;
}

.thailand-map__pin-halo {
  fill: var(--color-gold);
  opacity: 0.3;
  transition: opacity var(--transition-fast), r var(--transition-fast);
}

.thailand-map__pin-dot {
  fill: var(--color-terracotta);
  stroke: var(--color-warm-white);
  stroke-width: 1.5;
  transition: r var(--transition-fast), fill var(--transition-fast);
}

.thailand-map__pin-label {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 700;
  fill: var(--color-warm-white);
  paint-order: stroke;
  stroke: var(--color-forest-dark);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.thailand-map__pin:hover .thailand-map__pin-halo,
.thailand-map__pin:focus-visible .thailand-map__pin-halo {
  opacity: 0.45;
  r: 12;
}

.thailand-map__pin:hover .thailand-map__pin-dot,
.thailand-map__pin:focus-visible .thailand-map__pin-dot {
  r: 6.5;
}

.thailand-map__pin-hint {
  font-family: var(--font-body);
  font-size: 9.5px;
  font-weight: 600;
  fill: var(--color-gold);
  paint-order: stroke;
  stroke: var(--color-forest-dark);
  stroke-width: 2.5px;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.thailand-map__pin:hover .thailand-map__pin-hint,
.thailand-map__pin:focus-visible .thailand-map__pin-hint {
  opacity: 1;
  transform: translateY(0);
}

.thailand-map__pin-order {
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: 800;
  fill: var(--color-warm-white);
  pointer-events: none;
}

.thailand-map__legend {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-gray);
}

/* Puntos de referencia geográfica sin página propia todavía (navigate) */
.thailand-map__pin--reference .thailand-map__pin-dot {
  fill: rgba(250, 246, 239, 0.55);
  stroke: none;
}

.thailand-map__pin--reference .thailand-map__pin-halo {
  fill: rgba(250, 246, 239, 0.3);
}

.thailand-map__pin--reference:hover .thailand-map__pin-dot,
.thailand-map__pin--reference:focus-visible .thailand-map__pin-dot {
  r: 4.5;
}

/* Destino activo/seleccionado en el mapa de Destinos (navigate) */
.thailand-map__pin--onsite.is-active .thailand-map__pin-dot {
  fill: var(--color-gold);
  r: 7.5;
}

.thailand-map__pin--onsite.is-active .thailand-map__pin-halo {
  opacity: 0.45;
  r: 13;
}

.thailand-map__pin--onsite.is-active .thailand-map__pin-label {
  fill: var(--color-gold);
}

/* Layout navigate: mapa + panel lateral */
.thailand-map--navigate {
  max-width: none;
}

.thailand-map__panel {
  margin-top: 1.5rem;
  background: var(--color-warm-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-lg, 16px);
  padding: 1.25rem 1.5rem;
  text-align: left;
}

.thailand-map__panel h3 {
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}

.thailand-map__panel p {
  color: var(--color-gray);
  margin-bottom: 0.6rem;
}

.thailand-map__panel-link {
  font-weight: 700;
}

@media (min-width: 700px) {
  .thailand-map--navigate {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    gap: 2rem;
    align-items: start;
  }
  .thailand-map--navigate .thailand-map__panel {
    margin-top: 0;
  }
  .thailand-map--navigate .thailand-map__legend {
    grid-column: 1 / -1;
  }
}

.thailand-map__pin--builder.is-selected .thailand-map__pin-dot,
.thailand-map__pin--select.is-selected .thailand-map__pin-dot {
  fill: var(--color-gold);
  r: 8;
}

.thailand-map__pin--builder.is-selected .thailand-map__pin-halo,
.thailand-map__pin--select.is-selected .thailand-map__pin-halo {
  fill: var(--color-gold);
  opacity: 0.4;
  r: 12;
}

.thailand-map__chips {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.thailand-map__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-white);
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius-pill);
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-navy);
}

.thailand-map__chip button {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-gray-light);
  color: var(--color-navy);
  font-size: 0.9rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.thailand-map__chip button:hover {
  background: var(--color-saffron);
  color: var(--color-white);
}

.thailand-map__pin--muted .thailand-map__pin-dot {
  fill: rgba(250, 246, 239, 0.45);
  stroke: none;
}

.thailand-map__pin--muted .thailand-map__pin-halo {
  opacity: 0;
}

.thailand-map__pin--muted .thailand-map__pin-label {
  opacity: 0.55;
}

.thailand-map__pin--active .thailand-map__pin-dot {
  fill: var(--color-terracotta);
  r: 7;
}

.thailand-map__route-line {
  stroke: var(--color-gold);
  stroke-width: 2.5;
  stroke-dasharray: 6 6;
  fill: none;
}

.thailand-map__route-line--fixed {
  stroke: var(--color-terracotta);
  stroke-dasharray: none;
  stroke-width: 3;
}

.thailand-map__live {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.thailand-map__controls {
  margin-top: 1.5rem;
  text-align: center;
}

.thailand-map__summary {
  font-weight: 700;
  color: var(--color-navy);
  min-height: 1.4em;
}

.thailand-map__btn-row {
  margin-top: 1rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

.thailand-map__reset {
  font-weight: 700;
  color: var(--color-gray);
  text-decoration: underline;
  padding: 0.85rem 0.5rem;
}

.thailand-map__cta--disabled {
  opacity: 0.5;
  pointer-events: none;
}

.thailand-map__note {
  margin-top: 1.25rem;
  text-align: center;
  font-size: 0.88rem;
  font-style: italic;
}

@media (min-width: 900px) {
  .map-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    align-items: center;
    text-align: left;
  }
  .map-section__grid .map-section__intro {
    margin: 0;
    text-align: left;
  }
}

/* ---------- Utilidad: oculto visualmente, accesible por lector de pantalla ---------- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================================
   ASESORÍAS
   ========================================================================= */
.advisory-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  /* Todas las tarjetas de la fila comparten la misma altura (la de la más
     alta), así que los botones de acción (margin-top: auto en
     .advisory-card__actions) quedan alineados en la misma línea. */
  align-items: stretch;
}

@media (min-width: 700px) {
  .advisory-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.advisory-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.advisory-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.advisory-card--featured {
  box-shadow: 0 0 0 2px var(--color-saffron), var(--shadow-md);
}

.advisory-card__badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 1;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-white);
  background: var(--color-saffron-dark);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.advisory-card__media {
  /* Altura fija y compacta en vez de aspect-ratio 4/3: en un grid de 3
     columnas la imagen no debe ser el elemento que más espacio ocupa. */
  height: 108px;
}

.advisory-card__media picture,
.advisory-card__media img {
  width: 100%;
  height: 100%;
}

.advisory-card__media img {
  object-fit: cover;
  display: block;
}

.advisory-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding: 1.1rem 1.15rem;
  flex: 1;
}

.advisory-card__name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  line-height: 1.2;
  color: var(--color-navy);
}

.advisory-card__price {
  font-size: 0.95rem;
  color: var(--color-gray);
}

.advisory-card__price strong {
  color: var(--color-saffron-dark);
  font-size: 1.15rem;
}

.advisory-card__for {
  font-size: 0.82rem;
  line-height: 1.35;
  font-weight: 600;
  color: var(--color-navy);
}

.advisory-card__outcome {
  font-size: 0.82rem;
  line-height: 1.35;
}

.advisory-card__includes {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  margin: 0.15rem 0;
}

.advisory-card__includes li {
  position: relative;
  padding-left: 1.3rem;
  font-size: 0.8rem;
  line-height: 1.3;
  color: var(--color-navy);
}

.advisory-card__includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 700;
  color: var(--color-turquoise-dark);
}

.advisory-card__delivery {
  font-size: 0.75rem;
  color: var(--color-gray);
  font-style: italic;
}

.advisory-card__actions {
  margin-top: auto;
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
}

.advisory-card__actions .btn {
  width: 100%;
}

/* Sección "Elige tu asesoría" (#paquetes): con tarjetas ya compactas, la
   sección no necesita el padding-block genérico de .section (pensado
   para bloques mucho más altos) — así las tres tarjetas caben enteras
   en una pantalla de escritorio sin scroll adicional. */
#paquetes {
  padding-block: clamp(2rem, 4vw, 3rem);
}

#paquetes .section-head {
  margin-bottom: 1.5rem;
}

/* ---------- Teaser compacto (Home) ---------- */
.advisory-mini-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
  max-width: 980px;
  margin-inline: auto;
}

@media (min-width: 700px) {
  .advisory-mini-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.advisory-mini {
  position: relative;
  background: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 1.5rem;
  text-align: left;
}

.advisory-mini--featured {
  box-shadow: 0 0 0 2px var(--color-saffron), var(--shadow-sm);
}

.advisory-mini h3 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--color-navy);
  margin-top: 0.5rem;
}

.advisory-mini__price {
  color: var(--color-gray);
  margin-top: 0.35rem;
}

.advisory-mini__price strong {
  color: var(--color-saffron-dark);
  font-size: 1.2rem;
}

.advisory-mini__for {
  margin-top: 0.5rem;
  font-size: 0.88rem;
}

.advisory-mini-grid__cta {
  text-align: center;
  margin-top: 2.5rem;
}

/* ---------- Tabla comparativa ---------- */
.advisory-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.advisory-table {
  width: 100%;
  min-width: 560px;
  border-collapse: collapse;
}

.advisory-table th,
.advisory-table td {
  padding: 0.85rem 1rem;
  text-align: center;
  border-bottom: 1px solid var(--color-gray-light);
  font-size: 0.9rem;
}

.advisory-table thead th {
  font-family: var(--font-display);
  color: var(--color-navy);
  font-size: 1rem;
  font-weight: 700;
}

.advisory-table tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--color-navy);
  white-space: nowrap;
}

.advisory-table td.is-included span[aria-hidden] {
  color: var(--color-turquoise-dark);
  font-weight: 700;
  font-size: 1.1rem;
}

.advisory-table td.is-excluded span[aria-hidden] {
  color: var(--color-gray-light);
  font-weight: 700;
  font-size: 1.1rem;
}

.advisory-table tbody tr:hover {
  background: var(--color-cream);
}

/* =========================================================================
   NAVEGACIÓN — desplegables (Viajes, Destinos)
   ========================================================================= */
.nav-link--trigger {
  background: none;
  border: none;
  font: inherit;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.nav-link--trigger::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}

.main-nav__item.has-children.is-open .nav-link--trigger::after {
  transform: rotate(-135deg);
}

.main-nav__submenu {
  display: none;
  flex-direction: column;
  gap: 0.15rem;
  padding-left: 1rem;
}

.main-nav__item.has-children.is-open .main-nav__submenu {
  display: flex;
}

/* Selector específico (repite .has-children) para ganar siempre a
   cualquier regla de color heredada de la cabecera (p. ej. el texto
   blanco de la cabecera transparente de la Home): el desplegable es un
   panel propio, sólido, y nunca debe heredar ese color. */
.main-nav__item.has-children .main-nav__submenu a,
.main-nav__item.has-children .main-nav__submenu .nav-link {
  color: var(--color-navy);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.75rem 0.6rem;
}

@media (min-width: 1040px) {
  .main-nav__item.has-children {
    position: relative;
  }

  .main-nav__submenu {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 260px;
    background: var(--color-warm-white);
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-md);
    padding: 0.6rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
    z-index: 110;
  }

  .main-nav__item.has-children:hover .main-nav__submenu,
  .main-nav__item.has-children:focus-within .main-nav__submenu,
  .main-nav__item.has-children.is-open .main-nav__submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .main-nav__item.has-children .main-nav__submenu a,
  .main-nav__item.has-children .main-nav__submenu .nav-link {
    border-bottom: none;
    padding: 0.7rem 0.85rem;
    border-radius: var(--radius-sm);
    white-space: normal;
    display: block;
  }

  .main-nav__item.has-children .main-nav__submenu a:hover,
  .main-nav__item.has-children .main-nav__submenu a:focus-visible {
    background: var(--color-emerald);
    color: var(--color-white);
  }
}

/* Blindaje extra: en la Home, con la cabecera transparente (antes de
   hacer scroll), los enlaces del nav principal se pintan de blanco para
   leerse sobre el hero. El desplegable de "Viajes" es un panel sólido
   propio y debe mantenerse siempre en azul marino sobre fondo claro,
   nunca heredar ese blanco. */
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__item.has-children .main-nav__submenu a {
  color: var(--color-navy);
}

body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__item.has-children .main-nav__submenu a:hover,
body[data-page="home"] .site-header:not(.is-scrolled) .main-nav__item.has-children .main-nav__submenu a:focus-visible {
  color: var(--color-white);
}

/* =========================================================================
   VIAJES EN GRUPO — tarjetas de próximas salidas
   ========================================================================= */
.group-trip-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .group-trip-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .group-trip-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.group-trip-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.group-trip-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Loy Krathong se diferencia solo por el color, nunca por el tamaño:
   el "borde" se simula con box-shadow (no añade grosor a la caja como
   un border real) para que las 4 tarjetas midan exactamente lo mismo. */
.group-trip-card--featured {
  background: var(--color-saffron-light);
  box-shadow: 0 0 0 2px var(--color-saffron), var(--shadow-md);
}

.group-trip-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-navy);
  background: var(--color-white);
  padding: 0.35rem 0.75rem;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}

.group-trip-card__badge.is-featured {
  color: var(--color-white);
  background: var(--color-saffron-dark);
}

/* Tarjeta clicable de Loy Krathong: mismo patrón que
   .experience-card__cover-link (enlace invisible que cubre toda la
   tarjeta, hijo directo sin ningún ancestro con overflow:hidden de por
   medio que lo recorte). El botón "Ver viaje" mantiene su propio
   z-index más alto para seguir siendo clicable de forma independiente. */
.group-trip-card__cover-link {
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Viajes "Próximamente": tarjeta a propósito inerte, sin más señal que
   la banda diagonal y el botón desactivado — nunca cambia de tamaño
   respecto a las demás. */
.group-trip-card--soon .group-trip-card__media img {
  filter: grayscale(35%);
  opacity: 0.85;
}

.group-trip-card__ribbon {
  position: absolute;
  top: 22px;
  left: -46px;
  width: 190px;
  transform: rotate(-45deg);
  background: var(--color-navy);
  color: var(--color-white);
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.45rem 0;
  box-shadow: var(--shadow-sm);
  z-index: 2;
  pointer-events: none;
}

/* Altura fija (no aspect-ratio) igual que en las tarjetas de
   experiencias: garantiza la misma altura de imagen en las 4 tarjetas
   sin depender de que <picture> resuelva porcentajes correctamente. */
.group-trip-card__media {
  display: block;
  height: 200px;
  flex-shrink: 0;
}

.group-trip-card__media picture {
  display: block;
  width: 100%;
  height: 100%;
}

.group-trip-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.group-trip-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  flex: 1;
}

.group-trip-card__body h3 {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.3;
  height: 2.6em;
  color: var(--color-navy);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group-trip-card__dates {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.3;
  height: 2.6em;
  overflow: hidden;
  color: var(--color-saffron-dark);
}

.group-trip-card__meta {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-size: 0.85rem;
  line-height: 1.3;
  height: 3.9em;
  overflow: hidden;
  color: var(--color-gray);
}

.group-trip-card__route,
.group-trip-card__duration {
  font-size: 0.85rem;
  line-height: 1.3;
  height: 1.7em;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  color: var(--color-gray);
}

.group-trip-card__price {
  font-size: 1.05rem;
  color: var(--color-gray);
}

.group-trip-card__price strong {
  color: var(--color-saffron-dark);
  font-size: 1.25rem;
}

.group-trip-card__desc {
  font-size: 0.88rem;
  line-height: 1.5;
  height: 4.5em;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.group-trip-card__group-info {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-gray);
}

.group-trip-card__actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

.group-trip-card__actions .btn {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Botón principal ("Solicitar plaza") de la tarjeta destacada: azul
   marino, distinto del resto, texto siempre blanco y perfectamente
   legible. El botón secundario ("Ver viaje completo") mantiene su
   estilo ghost habitual en las dos tarjetas. */
.group-trip-card--featured .group-trip-card__actions .btn--whatsapp {
  background: var(--color-navy);
  color: var(--color-white);
}

.group-trip-card--featured .group-trip-card__actions .btn--whatsapp:hover {
  background: #0d3459;
}

.group-trip-card--featured .group-trip-card__dates,
.group-trip-card--featured .group-trip-card__price strong {
  color: var(--color-saffron-dark);
}

.group-trip-card--featured .group-trip-card__body h3,
.group-trip-card--featured .group-trip-card__desc,
.group-trip-card--featured .group-trip-card__meta,
.group-trip-card--featured .group-trip-card__route,
.group-trip-card--featured .group-trip-card__duration,
.group-trip-card--featured .group-trip-card__group-info,
.group-trip-card--featured .group-trip-card__price {
  color: var(--color-navy);
}

.group-trip-grid__note {
  margin-top: 1.25rem;
  color: var(--color-gray);
  font-style: italic;
}

/* Aviso discreto sobre vuelos internacionales: separado del listado de
   tarjetas con un margen amplio para que quede claro que es
   información secundaria, no la primera lectura de la sección. */
.flights-note {
  max-width: 700px;
  margin: 3.5rem auto 0;
  padding: 1.25rem 1.5rem;
  background: var(--color-cream);
  border-radius: var(--radius-md);
}

.flights-note__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 0.4rem;
}

.flights-note__text {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-gray);
}

/* ---------- Mini tarjetas de viajes relacionados (páginas de destino) ---------- */
.group-trip-mini-grid {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .group-trip-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.group-trip-mini {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  background: var(--color-white);
  border-radius: var(--radius-md);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}

.group-trip-mini:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.group-trip-mini__badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-saffron-dark);
}

.group-trip-mini span {
  font-size: 0.85rem;
  color: var(--color-gray);
}

/* =========================================================================
   GUÍA DE TAILANDIA — artículo por temporadas
   ========================================================================= */
.blog-season {
  padding-block: 1.5rem;
  border-bottom: 1px solid var(--color-gray-light);
}

.blog-season:last-child {
  border-bottom: none;
}

.blog-season__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 0.85rem;
}

/* =========================================================================
   HERO CON BENEFICIOS Y ACCIONES (Viajes a medida)
   ========================================================================= */
.page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: 1.25rem;
}

.page-header__benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(11, 42, 74, 0.12);
}

.page-header__benefit {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-navy);
}

.page-header__benefit::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-emerald);
  color: var(--color-white);
  font-size: 0.75rem;
  font-weight: 700;
}

/* =========================================================================
   CONFIGURADOR DE VIAJE (Viajes a medida)
   ========================================================================= */
/* Evita que la cabecera fija tape el título al llegar por enlace directo
   (p. ej. desde el botón "Diseña tu viaje" de la Home). */
#configurador-viaje {
  scroll-margin-top: 120px;
}

.trip-config {
  background: var(--color-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 1.75rem 1.5rem 2rem;
}

@media (min-width: 700px) {
  .trip-config {
    padding: 2.5rem 3rem 3rem;
  }
}

.trip-config__progress {
  margin-bottom: 1.75rem;
}

.trip-config__progress-bar {
  height: 8px;
  border-radius: var(--radius-pill);
  background: var(--color-gray-light);
  overflow: hidden;
}

.trip-config__progress-fill {
  height: 100%;
  background: var(--color-emerald);
  border-radius: var(--radius-pill);
  transition: width var(--transition-base);
}

.trip-config__progress-label {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray);
}

.trip-config__question {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--color-navy);
  margin-bottom: 1.5rem;
}

.trip-config__field {
  margin-bottom: 1.25rem;
}

.trip-config__field label {
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-navy);
  margin-bottom: 0.5rem;
}

.trip-config__field input[type="text"],
.trip-config__field input[type="number"],
.trip-config__field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  background: var(--color-warm-white);
  color: var(--color-navy);
  transition: border-color var(--transition-fast);
}

.trip-config__field input:focus-visible,
.trip-config__field textarea:focus-visible {
  outline: none;
  border-color: var(--color-emerald);
  box-shadow: var(--focus-ring);
}

.trip-config__field textarea {
  min-height: 100px;
  resize: vertical;
}

.trip-config__row {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 1fr;
}

@media (min-width: 560px) {
  .trip-config__row {
    grid-template-columns: 1fr 1fr;
  }
}

.trip-config__hint {
  font-size: 0.85rem;
  color: var(--color-gray);
  margin-top: -0.75rem;
  margin-bottom: 1.25rem;
}

/* ---------- Opciones seleccionables (tarjetas grandes) ---------- */
.trip-config__options {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 560px) {
  .trip-config__options--4col {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trip-config__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.5rem;
  min-height: 56px;
  padding: 0.9rem 1rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-navy);
  background: var(--color-warm-white);
  border: 2px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.trip-config__option:hover {
  border-color: var(--color-emerald);
}

.trip-config__option.is-selected {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  color: var(--color-white);
}

.trip-config__option.is-selected::after {
  content: "✓";
  font-weight: 700;
}

/* ---------- Destinos (paso 3) ---------- */
.trip-config__destino-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

@media (min-width: 700px) {
  .trip-config__destino-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.trip-config__destino-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 64px;
  padding: 0.9rem;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-warm-white);
  border: 2px solid var(--color-gray-light);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast), transform var(--transition-fast);
}

.trip-config__destino-card:hover {
  border-color: var(--color-emerald);
  transform: translateY(-1px);
}

.trip-config__destino-card.is-selected {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.trip-config__destino-card.is-selected::after {
  content: "✓";
  position: absolute;
  top: 0.4rem;
  right: 0.55rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.trip-config__destino-card--advise {
  border-style: dashed;
}

/* ---------- Intereses (chips más pequeños) ---------- */
.trip-config__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.trip-config__chip {
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-pill);
  border: 2px solid var(--color-gray-light);
  background: var(--color-warm-white);
  color: var(--color-navy);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), color var(--transition-fast);
}

.trip-config__chip:hover {
  border-color: var(--color-emerald);
}

.trip-config__chip.is-selected {
  background: var(--color-emerald);
  border-color: var(--color-emerald);
  color: var(--color-white);
}

/* ---------- Mapa dentro del paso 3 ---------- */
.trip-config__map-host .thailand-map--select {
  max-width: 420px;
  margin: 0 auto 1.5rem;
}

.trip-config__map-host .thailand-map__svg {
  width: 100%;
  height: auto;
}

/* ---------- Navegación del asistente ---------- */
.trip-config__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-gray-light);
}

.trip-config__nav .btn {
  min-width: 140px;
}

.trip-config__nav .btn:only-child {
  margin-left: auto;
}

/* ---------- Errores de validación ---------- */
.trip-config__error {
  color: #b3261e;
  background: #fbe9e7;
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 1.25rem;
}

/* ---------- Resumen ---------- */
.trip-config__summary {
  background: var(--color-cream);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.5rem;
  margin-top: 1.5rem;
}

.trip-config__summary h4 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-gray);
  margin-bottom: 0.85rem;
}

.trip-config__summary dl {
  display: grid;
  gap: 0.5rem 1rem;
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .trip-config__summary dl {
    grid-template-columns: 1fr 1fr;
  }
}

.trip-config__summary-item {
  font-size: 0.9rem;
}

.trip-config__summary dt {
  font-weight: 700;
  color: var(--color-navy);
  display: inline;
}

.trip-config__summary dd {
  display: inline;
  color: var(--color-gray);
  margin-left: 0.3rem;
}

.trip-config__summary-empty {
  font-size: 0.9rem;
  color: var(--color-gray);
  font-style: italic;
}

/* =========================================================================
   MIGAS DE NAVEGACIÓN (categorías y experiencias)
   ========================================================================= */
.breadcrumbs {
  padding-block: 0.7rem;
  background: var(--color-cream);
  border-bottom: 1px solid var(--color-gray-light);
}

.breadcrumbs__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem;
  color: var(--color-gray);
}

.breadcrumbs__inner a {
  color: var(--color-gray);
  font-weight: 600;
}

.breadcrumbs__inner a:hover {
  color: var(--color-saffron-dark);
}

.breadcrumbs__current {
  color: var(--color-navy);
  font-weight: 700;
}

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

.breadcrumbs__back-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-block: 0.5rem 0;
}

/* =========================================================================
   ESPECIAL LOY KRATHONG 2026
   ========================================================================= */
/* Chips de datos rápidos en el hero (fechas · duración · ruta · precio):
   reutiliza .experience-card__meta (lista con separador "·") pero sobre
   foto oscura, así que hay que reescribir color y anular la altura fija
   pensada para igualar tarjetas en cuadrícula, que aquí no aplica. */
.page-header__meta {
  height: auto;
  overflow: visible;
  margin-top: 0.85rem;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.92);
}

.page-header__meta li {
  color: rgba(255, 255, 255, 0.92);
}

/* ---------- "Así será nuestro viaje": línea temporal de etapas ---------- */
.journey-stages {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 1.5rem;
  padding-left: 3.25rem;
}

.journey-stages::before {
  content: "";
  position: absolute;
  left: 1.1rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: var(--color-gray-light);
}

.journey-stage {
  position: relative;
}

.journey-stage__number {
  position: absolute;
  left: -3.25rem;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--color-navy);
  color: var(--color-white);
  font-family: var(--font-display);
  font-size: 0.9rem;
  font-weight: 700;
}

.journey-stage__body h3 {
  font-family: var(--font-display);
  font-size: 1.15rem;
  color: var(--color-navy);
  margin-bottom: 0.35rem;
}

.journey-stage__body p {
  color: var(--color-gray);
}

/* ---------- Bloque destacado de precio y reserva ---------- */
.pricing-block {
  background: var(--color-cream);
  border-radius: var(--radius-lg);
  padding: 2rem 1.75rem;
  text-align: center;
}

.pricing-block__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.6rem;
  border-bottom: 1px solid rgba(11, 42, 74, 0.1);
  text-align: left;
}

.pricing-block__row:first-child {
  padding-top: 0;
}

.pricing-block__row span {
  color: var(--color-gray);
  font-weight: 600;
}

.pricing-block__row strong {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--color-saffron-dark);
}

.pricing-block__note {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
  color: var(--color-gray);
  font-size: 0.9rem;
}

.pricing-block .btn {
  width: 100%;
}

.pricing-block__disclaimer {
  margin-top: 1rem;
  font-size: 0.8rem;
  font-style: italic;
  color: var(--color-gray);
}

/* ---------- "Para quién es este viaje" ---------- */
.audience-list {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.audience-list li {
  position: relative;
  padding-left: 1.6rem;
  color: var(--color-navy);
}

.audience-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-turquoise-dark);
  font-weight: 700;
}