/* ==========================================================================
   LA CERNIA ADVENTURES — SISTEMA DE DISEÑO
   Luxury concierge · Guanacaste, Costa Rica · In partnership with Waldorf Astoria
   Stack: HTML + CSS + JS puro + PHP. Sin frameworks, sin build tools.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABLES / DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* — Color · Fondos y superficies — */
  --color-bg:            #F6F2EA; /* marfil, fondo del sitio        */
  --color-surface:       #FFFFFF; /* superficie blanca              */
  --color-cream:         #FBF9F4; /* crema, superficie cálida       */
  --color-hero-dark:     #1E2723; /* fondo oscuro de hero           */

  /* — Color · Tinta / texto — */
  --color-ink:           #1E2723; /* tinta carbón, titulares        */
  --color-ink-soft:      #3A423D; /* tinta suave, cuerpo            */
  --color-muted:         #8A8378; /* texto tenue, captions          */

  /* — Color · Latón / dorado — */
  --color-brass:         #B08D57; /* latón / dorado principal       */
  --color-brass-dark:    #8A6C3A; /* dorado oscuro, hover           */
  --color-brass-light:   #C9A86A; /* dorado claro, acentos          */

  /* — Color · Líneas — */
  --color-hairline:      rgba(30, 39, 35, 0.12); /* hairline / borde */
  --color-hairline-strong: rgba(30, 39, 35, 0.22);

  /* — Tipografía — */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Jost", "Helvetica Neue", Arial, sans-serif;

  /* — Escala tipográfica (fluida con clamp) — */
  --fs-eyebrow:   0.72rem;
  --fs-body:      1rem;
  --fs-body-lg:   1.125rem;
  --fs-h4:        clamp(1.25rem, 1rem + 1vw, 1.6rem);
  --fs-h3:        clamp(1.6rem, 1.2rem + 1.6vw, 2.2rem);
  --fs-h2:        clamp(2.1rem, 1.5rem + 2.6vw, 3.2rem);
  --fs-h1:        clamp(2.8rem, 1.8rem + 4.4vw, 5rem);

  /* — Letter-spacing — */
  --ls-eyebrow:   0.28em;  /* eyebrows y navegación en mayúsculas   */
  --ls-nav:       0.2em;
  --ls-button:    0.16em;
  --ls-tight:     0.01em;

  /* — Escala de espaciado (base 8px) — */
  --space-3xs:  0.25rem;  /*  4px */
  --space-2xs:  0.5rem;   /*  8px */
  --space-xs:   0.75rem;  /* 12px */
  --space-sm:   1rem;     /* 16px */
  --space-md:   1.5rem;   /* 24px */
  --space-lg:   2.5rem;   /* 40px */
  --space-xl:   4rem;     /* 64px */
  --space-2xl:  6rem;     /* 96px */
  --space-3xl:  9rem;     /* 144px */

  /* — Layout — */
  --container-max:   1240px;
  --container-pad:   clamp(1.25rem, 5vw, 4rem);
  --section-y:       clamp(4rem, 9vw, 9rem);

  /* — Forma · esquinas casi rectas para sensación premium — */
  --radius:      2px;
  --radius-pill: 2px;

  /* — Bordes — */
  --border-hairline: 1px solid var(--color-hairline);

  /* — Transiciones — */
  --ease:        cubic-bezier(0.22, 0.61, 0.36, 1);
  --transition:  0.4s var(--ease);
}

/* --------------------------------------------------------------------------
   2. RESET / BASE
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-ink-soft);
  background-color: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

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

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

button { font-family: inherit; }

::selection {
  background: var(--color-brass);
  color: var(--color-surface);
}

/* --------------------------------------------------------------------------
   3. TIPOGRAFÍA
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  color: var(--color-ink);
  letter-spacing: var(--ls-tight);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { max-width: 62ch; }

.lead {
  font-size: var(--fs-body-lg);
  color: var(--color-ink-soft);
  font-weight: 300;
}

/* Eyebrow — mayúsculas, letter-spacing amplio, dorado */
.eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass);
  margin-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   4. LAYOUT HELPERS
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section {
  padding-block: var(--section-y);
}

.site-main { flex: 1 0 auto; }

/* --------------------------------------------------------------------------
   5. BOTONES · latón sólido + outline
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  line-height: 1;
  padding: 1.05em 2.2em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition),
              border-color var(--transition);
  white-space: nowrap;
}

/* Latón sólido */
.btn--brass {
  background-color: var(--color-brass);
  color: var(--color-surface);
  border-color: var(--color-brass);
}
.btn--brass:hover {
  background-color: var(--color-brass-dark);
  border-color: var(--color-brass-dark);
}

/* Outline */
.btn--outline {
  background-color: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline-strong);
}
.btn--outline:hover {
  border-color: var(--color-brass);
  color: var(--color-brass-dark);
}

/* Outline sobre fondo oscuro (hero) */
.btn--outline-light {
  background-color: transparent;
  color: var(--color-surface);
  border-color: rgba(255, 255, 255, 0.4);
}
.btn--outline-light:hover {
  border-color: var(--color-brass-light);
  color: var(--color-brass-light);
}

/* Sólido carbón — para el CTA sobre la franja dorada */
.btn--ink {
  background-color: var(--color-ink);
  color: var(--color-surface);
  border-color: var(--color-ink);
}
.btn--ink:hover {
  background-color: var(--color-ink-soft);
  border-color: var(--color-ink-soft);
}

/* --------------------------------------------------------------------------
   6. LINKS DE TEXTO Y "QUIET LINK"
   -------------------------------------------------------------------------- */
.link {
  color: var(--color-brass-dark);
  border-bottom: 1px solid var(--color-hairline-strong);
  padding-bottom: 1px;
  transition: color var(--transition), border-color var(--transition);
}
.link:hover {
  color: var(--color-ink);
  border-color: var(--color-brass);
}

/* Link estilo navegación: mayúsculas, espaciado, subrayado animado */
.nav-link {
  position: relative;
  font-size: 0.82rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: var(--ls-nav);
  color: var(--color-ink-soft);
  transition: color var(--transition);
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 100%;
  height: 1px;
  background: var(--color-brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-link:hover,
.nav-link[aria-current="page"] { color: var(--color-ink); }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   7. HAIRLINE / DIVISOR
   -------------------------------------------------------------------------- */
.hairline {
  border: 0;
  border-top: 1px solid var(--color-hairline);
}

/* --------------------------------------------------------------------------
   8. HEADER / NAVEGACIÓN
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--color-bg) 88%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--color-hairline);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  min-height: 98px;
}

/* Marca / logo */
.brand {
  grid-column: 1;
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  line-height: 1;
}
/* Emblema del caracol (recorte del logo de marca) + wordmark */
.brand__mark-img {
  flex-shrink: 0;
  height: 70px;
  width: auto;
  display: block;
}
.brand__text {
  display: flex;
  flex-direction: column;
}
.brand__name {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--color-ink);
  white-space: nowrap;
}
.brand__sub {
  font-family: var(--font-body);
  font-size: 0.58rem;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-brass);
  margin-top: 5px;
  padding-left: 0.12em;
}

.site-nav {
  grid-column: 2;
  justify-self: center;
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
}
.site-nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.75rem);
  list-style: none;
  padding: 0;
}

/* Toggle móvil */
.nav-toggle {
  grid-column: 3;
  justify-self: end;
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--color-ink);
  transition: transform var(--transition), opacity var(--transition);
}

@media (max-width: 880px) {
  .nav-toggle { display: flex; }

  .site-nav {
    position: fixed;
    inset: 88px 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--space-md) var(--container-pad) var(--space-lg);
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition), transform var(--transition);
  }
  .site-nav[data-open="true"] {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  .site-nav__list li { border-bottom: 1px solid var(--color-hairline); }
  .site-nav .nav-link { display: block; padding: var(--space-sm) 0; }
  .site-nav .btn { margin-top: var(--space-md); width: 100%; }

  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

/* --------------------------------------------------------------------------
   9. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  flex-shrink: 0;
  background: var(--color-hero-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-2xl) var(--space-lg);
}
.site-footer a { color: inherit; }

.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
@media (max-width: 760px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-lg); }
}

.footer-brand__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.2em;
  color: var(--color-surface);
}
.footer-brand__sub {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.4em;
  color: var(--color-brass-light);
  margin-top: var(--space-2xs);
}
.footer-col__title {
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-light);
  margin-bottom: var(--space-md);
}
.footer-col p,
.footer-col a {
  font-size: 0.9rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.72);
}
.footer-col a:hover { color: var(--color-brass-light); }

/* Lista de contactos con ícono */
.footer-contact {
  list-style: none;
  margin: 0 0 var(--space-md);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.footer-contact__item {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.9rem;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.72);
  transition: color var(--transition);
}
a.footer-contact__item:hover { color: var(--color-brass-light); }
.footer-contact__ico {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--color-brass-light);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-top: var(--space-lg);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
}

/* --------------------------------------------------------------------------
   10. IMAGE SLOT · imagen real o placeholder elegante
   -------------------------------------------------------------------------- */
.image-slot {
  position: relative;
  overflow: hidden;
  background: var(--color-cream);
  border-radius: var(--radius);
}
.image-slot > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-slot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
}
.image-slot__ph-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-lg);
  max-width: 90%;
}
.image-slot__ph-mark {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-brass);
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: var(--color-brass);
  font-family: var(--font-display);
  font-size: 1rem;
  margin-bottom: var(--space-2xs);
}
.image-slot__ph-label {
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-muted);
}
.image-slot__ph-file {
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--color-ink-soft);
}
.image-slot__ph-size {
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   11. BLOQUE TEMPORAL DE VERIFICACIÓN (index temporal)
   -------------------------------------------------------------------------- */
.verify {
  display: grid;
  place-items: center;
  text-align: center;
  min-height: 62vh;
  padding-block: var(--space-2xl);
}
.verify__inner { max-width: 720px; }
.verify h1 { margin-bottom: var(--space-md); }
.verify p { margin-inline: auto; }

/* --------------------------------------------------------------------------
   12. UTILIDADES
   -------------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }
.stack-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}
.verify .stack-buttons { justify-content: center; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   13. HOME · adorno dorado reutilizable
   -------------------------------------------------------------------------- */
.rule-gold {
  width: 56px;
  height: 1px;
  background: var(--color-brass);
  border: 0;
  margin: var(--space-md) 0;
}
.rule-gold--center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   14. HOME · HERO a pantalla completa
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  min-height: calc(100vh - 88px);
  padding-block: var(--space-2xl);
  background: var(--color-hero-dark);
  color: var(--color-surface);
  overflow: hidden;
}

/* La imagen de fondo llena todo el hero (anula el aspect-ratio del slot) */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.hero__media .image-slot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0;
}
.hero__media .image-slot > img { width: 100%; height: 100%; object-fit: cover; }
.hero__media .image-slot--placeholder { background: #232e29; border: 0; }
/* Video de fondo del hero (Cloudinary) */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* Respeta reduced-motion: sin video, queda el fondo carbón + velo. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Velo oscuro para legibilidad del texto */
.hero__veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(20, 27, 23, 0.58);
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 760px;
  padding-inline: var(--container-pad);
}
.hero__content .eyebrow { color: var(--color-brass-light); }
.hero h1 {
  color: var(--color-surface);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: var(--space-md);
}
.hero__sub {
  font-size: var(--fs-body-lg);
  font-weight: 300;
  color: rgba(255, 255, 255, 0.78);
  max-width: 44ch;
  margin-inline: auto;
}
.hero .stack-buttons { justify-content: center; }

/* --------------------------------------------------------------------------
   15. HOME · INTRO / FILOSOFÍA
   -------------------------------------------------------------------------- */
.intro {
  text-align: center;
  background: var(--color-bg);
}
.intro__inner {
  max-width: 680px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.intro h2 { margin-bottom: var(--space-xs); }
.intro p { margin-top: var(--space-xs); }

/* --------------------------------------------------------------------------
   16. HOME · TRES PILARES
   -------------------------------------------------------------------------- */
.pillars { background: var(--color-bg); padding-top: 0; }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  max-width: 820px;
  margin-inline: auto;
}
@media (max-width: 700px) {
  .pillars__grid { grid-template-columns: 1fr; max-width: 460px; }
}

.pillar {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--color-brass);
}
.pillar .image-slot { border-radius: 0; }
/* Crossfade de las dos fotos de Activities (terrestre <-> marítima): la 1ª
   siempre visible; la 2ª se desvanece encima en bucle. */
.pillar__xfade > img { position: absolute; inset: 0; }
.pillar__xfade > img + img {
  opacity: 0;
  animation: pillarXfade 9s ease-in-out infinite;
}
@keyframes pillarXfade {
  0%, 42%  { opacity: 0; }
  50%, 92% { opacity: 1; }
  100%     { opacity: 0; }
}
.pillar__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-md) var(--space-lg);
  flex: 1; /* llena la altura de la tarjeta (todas iguales por el grid) */
}
.pillar__title { font-size: var(--fs-h4); }
/* Imagen y título clicables (abren el Discover, igual que el link) */
.pillar__media { display: block; }
.pillar__title-link {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}
.pillar__title-link:hover { color: var(--color-brass); }
.pillar__text {
  font-size: 0.95rem;
  color: var(--color-muted);
  margin: 0;
}
.pillar__link {
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-brass-dark);
  transition: color var(--transition), gap var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}
.pillar__link:hover { color: var(--color-ink); gap: 0.9em; }

/* --------------------------------------------------------------------------
   17. HOME · LLAMADO FINAL (CTA)
   -------------------------------------------------------------------------- */
.cta {
  /* Ilustración de cierre (monos + perezoso) desde Cloudinary; fallback crema.
     Los animales quedan a los lados y el texto en el centro despejado. */
  position: relative;
  background: #f8efe4 var(--cta-bg, none) center 42% / cover no-repeat;
  color: var(--color-ink);
  text-align: center;
  min-height: 372px;
  padding-block: 60px;
  display: flex;
  align-items: center;
}
/* Difuminado superior: la ilustración se funde con la sección de arriba (sin costura). */
.cta::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 92px;
  background: linear-gradient(var(--color-bg), rgba(246, 242, 234, 0));
  pointer-events: none;
}
.cta .eyebrow { color: var(--color-brass-dark); opacity: 1; }
.cta__inner {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.cta h2 { margin-bottom: var(--space-lg); color: var(--color-ink); }
/* En móvil: el texto va ENCIMA de la ilustración (overlay, como en escritorio)
   Y la ilustración se DIFUMINA arriba y abajo (sin borde/corte). El texto va en
   columna angosta con título más chico para no chocar con los animales. */
@media (max-width: 700px) {
  .cta {
    background: #f8efe4;          /* MISMO tono del papel de la ilustración → sin recuadro */
    min-height: 340px;
    padding-block: 44px;
    align-items: center;
    overflow: hidden;
  }
  .cta::before {                  /* difuminado superior: funde la marfil (tarjetas) con el crema */
    display: block;
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 64px;
    background: linear-gradient(var(--color-bg), rgba(248, 239, 228, 0));
    z-index: 2;
    pointer-events: none;
  }
  .cta::after {                   /* la ilustración (su papel = #f8efe4 = fondo → solo el dibujo) */
    content: "";
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 210px;
    background: var(--cta-bg, none) center / 100% auto no-repeat;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 18%, #000 82%, transparent);
    z-index: 0;
    pointer-events: none;
  }
  .cta__inner { position: relative; z-index: 1; max-width: 286px; }
  .cta h2 { font-size: 1.5rem; line-height: 1.18; margin-bottom: var(--space-md); }
  .cta .eyebrow { font-size: 0.6rem; }
}

/* --------------------------------------------------------------------------
   19. PÁGINAS INTERNAS · encabezado de página reutilizable
   -------------------------------------------------------------------------- */
.page-head {
  text-align: center;
  background: var(--color-bg);
  /* Encabezado más compacto que una sección normal (menos aire arriba/abajo). */
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(1.75rem, 3vw, 2.75rem);
}
.page-head__inner {
  max-width: 760px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* Enlace "regresar al listado" arriba a la izquierda del encabezado de detalle. */
.detail-back {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-bottom: var(--space-md);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-button);
  color: var(--color-brass-dark);
  transition: color var(--transition), gap var(--transition);
}
.detail-back:hover { color: var(--color-ink); gap: 0.85em; }
.page-head h1 { margin-bottom: var(--space-xs); }
.page-head__intro {
  margin-top: var(--space-sm);
  max-width: 64ch;
}

/* --------------------------------------------------------------------------
   20. TRANSFERS · grid de destinos
   Reutiliza las tarjetas .pillar* (foto arriba · título serif · texto · link).
   -------------------------------------------------------------------------- */
.dest-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (max-width: 560px) {
  .dest-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

/* --------------------------------------------------------------------------
   21. TRANSFER DETAIL · tagline, banner, history, flota
   -------------------------------------------------------------------------- */
.page-head__tagline {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  font-weight: 400;
  color: var(--color-brass-dark);
  margin-top: var(--space-2xs);
}

/* Banner ancho del destino */
.detail-banner {
  margin-bottom: var(--section-y);
}
.detail-banner .image-slot { border-radius: var(--radius); }

/* The History */
.history {
  background: var(--color-cream);
  text-align: center;
}
.history__inner { max-width: 720px; margin-inline: auto; }
.history__subtitle {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-brass-dark);
  margin: var(--space-sm) 0 var(--space-md);
}
.history p { margin-inline: auto; }

/* Our Fleet */
.fleet {
  background: var(--color-bg);
  text-align: center;
}
.fleet__head { margin-bottom: var(--space-xl); }
.fleet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
  text-align: left;
}
@media (max-width: 720px) {
  .fleet-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
}

.vehicle {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}
.vehicle:hover { transform: translateY(-4px); border-color: var(--color-brass); }
.vehicle .image-slot { border-radius: 0; }
.vehicle__body { padding: var(--space-md) var(--space-md) var(--space-lg); }
.vehicle__name { font-size: var(--fs-h4); }
.vehicle__capacity {
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: var(--space-2xs) 0 var(--space-sm);
}
.vehicle__price {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1;
  color: var(--color-brass);
}
/* Nota opcional bajo el precio (ej. Papagayo: one way / round trip) */
.vehicle__note {
  display: block;
  margin-top: var(--space-2xs);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   22. ACTIVITY DETAIL · dos columnas (highlights + ficha) y botón grande
   -------------------------------------------------------------------------- */
.detail-cols {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
@media (max-width: 760px) {
  .detail-cols { grid-template-columns: 1fr; }
}

/* Lista de highlights con viñeta dorada discreta */
.highlights-list {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
}
.highlights-list li {
  position: relative;
  padding-left: 1.7em;
  margin-bottom: var(--space-sm);
  color: var(--color-ink-soft);
}
.highlights-list li::before {
  content: "\25C6"; /* ◆ rombo */
  position: absolute;
  left: 0;
  top: 0.05em;
  font-size: 0.62em;
  line-height: 1.9;
  color: var(--color-brass);
}

/* Ficha "At a Glance" */
.glance {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: var(--space-lg);
}
.glance__heading {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass);
  margin-bottom: var(--space-sm);
}
.glance__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-hairline);
}
.glance__row:last-child { border-bottom: 0; padding-bottom: 0; }
.glance__label {
  font-size: 0.92rem;
  color: var(--color-ink-soft);
}
.glance__value {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: 500;
  color: var(--color-brass);
  white-space: nowrap;
}
.glance__value--text {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--color-ink);
  text-align: right;
}

/* Botón grande para el CTA de reserva */
.btn--lg {
  padding: 1.25em 3em;
  font-size: 0.85rem;
}

/* --------------------------------------------------------------------------
   23. ABOUT · Our Story (dos columnas) y grid de valores
   -------------------------------------------------------------------------- */
.about-story {
  display: grid;
  grid-template-columns: 0.85fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
@media (max-width: 760px) {
  .about-story { grid-template-columns: 1fr; }
}
.about-story .image-slot { border-radius: var(--radius); }
.about-story__text > * + * { margin-top: var(--space-md); }

/* Sello / valores */
.values { background: var(--color-bg); text-align: center; }
.values__head { margin-bottom: var(--space-xl); }
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
}
@media (max-width: 760px) {
  .values-grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; }
}
.value { text-align: center; }
.value__num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1;
  color: var(--color-brass);
  margin-bottom: var(--space-sm);
}
.value__title { font-size: var(--fs-h4); }
.value__text {
  margin-top: var(--space-xs);
  font-size: 0.95rem;
  color: var(--color-muted);
  margin-inline: auto;
  max-width: 28ch;
}

/* --------------------------------------------------------------------------
   24. BOOKING MODAL · pop-up de reserva
   -------------------------------------------------------------------------- */
body.no-scroll { overflow: hidden; }

.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
}
.modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 23, 0.62);
}
.modal__dialog {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-md));
  overflow: hidden;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(20, 27, 23, 0.28);
}

/* Header carbón con pestañas */
.modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  background: var(--color-hero-dark);
  color: var(--color-surface);
  padding-inline: var(--space-lg);
}
.modal__tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--space-md);
  margin: 0;
  padding: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.modal__tabs::-webkit-scrollbar { display: none; }
.modal__tab {
  position: relative;
  flex-shrink: 0;
  background: none;
  border: 0;
  padding: var(--space-md) 0;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--transition);
}
.modal__tab:hover { color: rgba(255, 255, 255, 0.85); }
.modal__tab.is-active { color: var(--color-brass-light); }
.modal__tab.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--color-brass);
}
.modal__close {
  flex-shrink: 0;
  background: none;
  border: 0;
  color: var(--color-surface);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  padding: var(--space-2xs);
  transition: color var(--transition);
}
.modal__close:hover { color: var(--color-brass-light); }

/* Body marfil · con scroll interno propio */
.modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: var(--space-md) var(--space-lg);
}
.modal__title { font-size: var(--fs-h3); }

/* Secciones apiladas (Details · What to Bring · Photos · Book Now) */
.tab-panel[hidden] { display: none; }
.tab-panel:focus { outline: none; }
.tab-panel + .tab-panel {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-hairline);
}
.tab-panel > .modal__subhead:first-child { margin-top: 0; }
/* Desplazamiento suave dentro del cuerpo del modal */
.modal__body { scroll-behavior: smooth; }

/* Details */
/* Ícono que acompaña a cada dato (hereda el color del texto) */
.tag-ico {
  width: 1.55em;
  height: 1.55em;
  flex-shrink: 0;
  color: var(--color-brass);
}

/* Fila de datos: ícono + etiqueta, separados por una línea (sin cuadros) */
.meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) 0;
  margin-top: var(--space-sm);
}
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.1em 0.95em;
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-ink);
  white-space: nowrap;
}
.meta-item .tag-ico { width: 1.9em; height: 1.9em; }
.meta-item:first-child { padding-left: 0; }
.meta-item + .meta-item { border-left: 1px solid var(--color-hairline); }
.meta-item .tag-ico { color: var(--color-brass); }

/* En las tarjetas de la lista: un poco más chico.
   margin-top:auto empuja la fila de iconos + DISCOVER al fondo, de modo que
   queden ALINEADOS entre tarjetas aunque las descripciones midan distinto. */
.meta-row--card { margin-top: auto; gap: 0.2em 0; }
/* Si una tarjeta no tuviera fila de iconos, el DISCOVER igual baja al fondo. */
.pillar__body:not(:has(.meta-row--card)) .pillar__link { margin-top: auto; }
.meta-row--card .meta-item {
  padding: 0.1em 0.8em;
  font-size: 0.72rem;
  letter-spacing: 0.09em;
}
.meta-row--card .meta-item .tag-ico { width: 1.7em; height: 1.7em; }
.modal__subhead {
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass);
}
.modal__overview p { margin-bottom: var(--space-sm); color: var(--color-ink-soft); }
.modal__overview p:last-child { margin-bottom: 0; }
/* Nota bajo una lista (ej. Diamante: "*Adventure Pass only…") — cursiva y opaca. */
.modal__list-note {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.4;
  color: var(--color-muted);
  opacity: 0.85;
}
.modal__list-note[hidden] { display: none; }

/* Nota destacada (Important Note) */
.modal__note-box {
  margin-top: var(--space-md);
  padding: var(--space-md);
  background: var(--color-cream);
  border-left: 3px solid var(--color-brass);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.modal__note-box[hidden] { display: none; }
.modal__note-box p { margin-bottom: var(--space-sm); font-size: 0.92rem; color: var(--color-ink-soft); }
.modal__note-box p:last-child { margin-bottom: 0; }
.modal__note-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-dark);
}
.detail-lists {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}
.detail-lists .highlights-list { margin-top: var(--space-2xs); }
.detail-lists .highlights-list li { margin-bottom: var(--space-2xs); font-size: 0.92rem; }

/* Availability */
.modal__note {
  margin-top: var(--space-lg);
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-brass-dark);
}

/* Photos */
.photo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}
.photo-grid .image-slot { border-radius: var(--radius); }
/* Foto real: cursor de ampliar + zoom suave al pasar/tocar */
.photo-grid .image-slot:not(.image-slot--placeholder) { cursor: zoom-in; }
.photo-grid .image-slot > img { transition: transform 0.6s var(--ease); }
.photo-grid .image-slot:not(.image-slot--placeholder):hover > img,
.photo-grid .image-slot:not(.image-slot--placeholder):active > img { transform: scale(1.07); }

/* Video (debajo de las fotos) */
.video-block { margin-top: var(--space-lg); }
.video-block__label {
  margin: 0 0 var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass);
}
.video-slot {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
}
.video-slot__player {
  display: block;
  width: 100%;
  height: 100%;
  background: #000;
}
.video-slot--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Policies */
.policy { text-align: center; }
.policy + .policy { margin-top: var(--space-lg); }
.policy__title {
  font-size: var(--fs-h4);
  margin-bottom: var(--space-sm);
}
.policy__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.policy__list li {
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
}
.policy__note {
  max-width: 46ch;
  margin: var(--space-sm) auto 0;
  font-size: 0.82rem;
  font-style: italic;
  color: var(--color-muted);
}

/* Selector de huéspedes */
.guests {
  border-top: 1px solid var(--color-hairline);
}
.guest-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--color-hairline);
}
/* Fila de Kids oculta en actividades "NO KIDS ACCEPTED". */
.guest-row[hidden] { display: none; }
.guest-row__label {
  font-size: 1.05rem;
  color: var(--color-ink);
}
.counter {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.counter__btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius);
  font-size: 1.2rem;
  line-height: 1;
  color: var(--color-ink);
  cursor: pointer;
  transition: border-color var(--transition), color var(--transition);
}
.counter__btn:hover { border-color: var(--color-brass); color: var(--color-brass-dark); }
.counter__btn:disabled { opacity: 0.35; cursor: not-allowed; border-color: var(--color-hairline); color: var(--color-muted); }
.counter__val {
  min-width: 2ch;
  text-align: center;
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
}

/* Passes Selection (actividades con pases, ej. Diamante) */
.passes[hidden] { display: none; }
.passes__title {
  font-size: var(--fs-h4);
  text-align: center;
  margin-bottom: var(--space-md);
}

/* Diamante: total de huéspedes (antes de los pases) para calcular el vehículo */
.pass-guests[hidden] { display: none; }
.pass-guests {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
.pass-guests__note {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-md);
  text-align: center;
}
.passes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}
@media (max-width: 560px) {
  .passes-grid { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
}
.pass {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-2xs);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
}
.pass__icon .tag-ico { width: 2.6em; height: 2.6em; color: var(--color-brass); }
.pass__name {
  font-family: var(--font-display);
  font-size: 1rem;
  line-height: 1.15;
  color: var(--color-ink);
  min-height: 2.3em;
  display: flex;
  align-items: center;
}
.pass__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 100%;
}
.pass__label {
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.counter--sm { gap: var(--space-2xs); }
.counter--sm .counter__btn { width: 26px; height: 26px; font-size: 0.9rem; }
.counter--sm .counter__val { min-width: 1.4ch; font-size: 0.92rem; }

/* Menú de precios FIJOS (tours en barco) — estilo carta, sin selección */
.packages[hidden] { display: none; }
.packages-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--space-md);
  max-width: 640px;
  margin-inline: auto;
}
.pkg {
  padding: var(--space-md) var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  position: relative;
}
/* Filete dorado superior, detalle de lujo */
.pkg::before {
  content: "";
  position: absolute;
  top: -1px; left: 50%; transform: translateX(-50%);
  width: 46px; height: 2px;
  background: var(--color-brass);
}
.pkg__head {
  text-align: center;
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-hairline);
}
.pkg__name {
  display: block;
  font-family: var(--font-display);
  font-size: 1.3rem;
  line-height: 1.15;
  color: var(--color-ink);
}
.pkg__note {
  display: block;
  margin-top: 4px;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--color-brass);
}
.pkg__tiers { display: flex; flex-direction: column; gap: 0.55em; }
.pkg__tier {
  display: flex;
  align-items: baseline;
  gap: 0.4em;
}
.pkg__tier-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  color: var(--color-ink-soft);
  white-space: nowrap;
}
/* Línea punteada tipo carta de restaurante entre etiqueta y precio */
.pkg__lead {
  flex: 1;
  border-bottom: 1px dotted var(--color-hairline);
  transform: translateY(-0.28em);
  min-width: 1.2em;
}
.pkg__price {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--color-brass-dark);
  white-space: nowrap;
}
.pkg__footnote {
  grid-column: 1 / -1;
  margin: 0;
  text-align: center;
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}

/* Rate tiers: contador de personas + vehículo incluido/upgrades.
   Tarjetas GRANDES con foto (reutilizan .veh / .veh__slides), selección por
   radio y etiqueta Included / +precio. */
.tiers[hidden] { display: none; }
.tier-veh { margin-top: var(--space-md); }
.tier-veh__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.tier-veh__card { cursor: pointer; }
.tier-veh__card:has(.tier-veh__radio:checked) {
  border-color: var(--color-brass);
  box-shadow: inset 0 0 0 1px var(--color-brass);
}
.tier-veh__tag {
  font-family: var(--font-body);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-brass-dark);
}
.tier-veh__tag.is-included { color: var(--color-muted); }
.tier-veh__radio {
  accent-color: var(--color-brass);
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  margin: 0;
}
.tier-veh__slides--ph {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}
.tier-veh__ph { color: var(--color-brass); font-size: 1.4rem; }

/* Vehículo · tarjetas GRANDES reutilizadas por el modo tiers/Diamante */
.veh-section__title { font-size: var(--fs-h4); }
.veh {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  text-align: left;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--transition), box-shadow var(--transition);
}

/* Slideshow de fotos del vehículo (foto media a la izquierda, crossfade) */
.veh__slides {
  position: relative;
  flex-shrink: 0;
  width: clamp(150px, 40%, 200px);
  aspect-ratio: 4 / 3;
  background: #000;
  overflow: hidden;
  cursor: zoom-in;
}
.veh__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s ease;
}
.veh__slide.is-active { opacity: 1; }
.veh__slides .image-slot { position: absolute; inset: 0; border-radius: 0; }

/* Cuerpo: info a la izquierda, contador a la derecha */
.veh__body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm) var(--space-md);
}
.veh__info { display: flex; flex-direction: column; gap: 2px; }
.veh__name {
  font-family: var(--font-display);
  font-size: 1.2rem;
  line-height: 1.1;
  color: var(--color-ink);
}

/* Lightbox · foto del vehículo ampliada */
.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(20, 27, 23, 0.86);
  cursor: zoom-out;
}
.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: min(1100px, 92vw);
  max-height: 86vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}
.lightbox__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 2;
  background: none;
  border: 0;
  color: var(--color-surface);
  font-size: 2.2rem;
  line-height: 1;
  cursor: pointer;
  transition: color var(--transition);
}
.lightbox__close:hover { color: var(--color-brass-light); }
.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.32);
  color: var(--color-surface);
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color var(--transition), border-color var(--transition);
}
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.22); border-color: var(--color-brass-light); }
.lightbox__nav--prev { left: var(--space-md); }
.lightbox__nav--next { right: var(--space-md); }
.lightbox__nav[hidden] { display: none; }

/* Desglose de precio */
.breakdown {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
/* Precios fijos (paquetes): el desglose se oculta con el atributo hidden. */
.breakdown[hidden] { display: none; }
.breakdown__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
/* Rate tiers: se ocultan las filas de subtotal/impuesto (solo Total). */
.breakdown__row[hidden] { display: none; }
.breakdown__row > span:first-child {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-muted);
}
.breakdown__row > span:last-child {
  font-variant-numeric: tabular-nums;
  color: var(--color-ink-soft);
}
.breakdown__row--total {
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--color-hairline);
}
.breakdown__row--total > span:first-child { color: var(--color-ink); }
.breakdown__row--total > span:last-child {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 500;
  color: var(--color-brass);
}

/* Footer crema */
.modal__footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-md);
  background: var(--color-cream);
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-md) var(--space-lg);
}
.modal__footer[hidden] { display: none; }
.modal__actions { display: flex; gap: var(--space-sm); }

/* Vista de confirmación */
.confirm-view { text-align: center; }
.confirm-view[hidden] { display: none; }
.confirm__text {
  margin: var(--space-md) auto var(--space-lg);
  max-width: 42ch;
  color: var(--color-ink-soft);
}
.confirm__back {
  display: inline-block;
  margin-top: var(--space-md);
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  transition: color var(--transition);
}
.confirm__back:hover { color: var(--color-ink); }

@media (max-width: 520px) {
  .modal { padding: var(--space-sm); }
  .modal__dialog { max-height: calc(100vh - 2 * var(--space-sm)); }
  .modal__header { padding-inline: var(--space-md); }
  .modal__tabs { gap: var(--space-sm); }
  .modal__tab { font-size: 0.58rem; letter-spacing: 0.1em; }
  .modal__body { padding: var(--space-md); }
  .modal__footer { padding: var(--space-md); }
  .detail-lists { grid-template-columns: 1fr; gap: var(--space-md); }
  .photo-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   26. MY TRIPS · búsqueda de reservación (datos del CRM vía endpoint)
   -------------------------------------------------------------------------- */
.trip-search { max-width: 640px; margin-inline: auto; }

.trip-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  align-items: flex-end;
  justify-content: center;
}
.trip-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex: 1 1 200px;
  text-align: left;
}
.trip-form__field label {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-dark);
}
.trip-form input {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius);
  padding: 0.75em 0.9em;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.trip-form input::placeholder { color: var(--color-muted); opacity: 0.75; }
.trip-form input:focus {
  outline: none;
  border-color: var(--color-brass);
  box-shadow: inset 0 0 0 1px var(--color-brass);
}
.trip-form__submit { flex: 0 0 auto; }

@media (max-width: 560px) {
  .trip-form { flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .trip-form__field { flex: 0 0 auto; }
  .trip-form__submit { width: 100%; }
}

/* Mensajes (buscando / no encontrada / error de red) */
.trip-result { margin-top: var(--space-xl); }
.trip-message {
  text-align: center;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h4);
  color: var(--color-muted);
  margin: 0;
}
.trip-message--error { color: var(--color-brass-dark); }

/* Advertencia de confirmación (ID + nombre antes de mostrar los detalles) */
.trip-confirm {
  max-width: 520px;
  margin-inline: auto;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  padding: var(--space-xl) var(--space-lg);
}
.trip-confirm__eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-dark);
  margin: 0;
}
.trip-confirm__text {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--color-ink);
  margin: var(--space-sm) 0 var(--space-lg);
}
.trip-confirm__text strong { color: var(--color-brass-dark); font-weight: 500; }
.trip-confirm__actions {
  display: flex;
  gap: var(--space-sm);
  justify-content: center;
  flex-wrap: wrap;
}

/* Tarjeta de reservación */
.trip-card {
  max-width: 560px;
  margin-inline: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.trip-card__head {
  padding: var(--space-lg) var(--space-lg) var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
  text-align: center;
}
.trip-card__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-dark);
  margin-bottom: var(--space-xs);
}
.trip-card__title { font-size: var(--fs-h3); margin-bottom: var(--space-2xs); }
.trip-card__sub {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
}
.trip-card__badge {
  display: inline-block;
  margin-top: var(--space-sm);
  padding: 0.4em 1.2em;
  font-family: var(--font-body);
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--color-brass-dark);
  border: 1px solid var(--color-brass);
  border-radius: 100px;
}
.trip-card__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg) var(--space-xl);
  padding: var(--space-lg);
}
.trip-card__row { display: flex; flex-direction: column; gap: 3px; }
.trip-card__row--full { grid-column: 1 / -1; }
.trip-card__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.trip-card__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-ink);
}

@media (max-width: 480px) {
  .trip-card__grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* Tour que ya pasó: mensaje de servicio completado */
.trip-card__done {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
}
.trip-card__done-check {
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto var(--space-md);
  color: var(--color-brass);
}
.trip-card__done-check svg { width: 100%; height: 100%; display: block; }
.trip-card__done-msg {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  color: var(--color-ink);
  margin: 0 0 var(--space-2xs);
}
.trip-card__done-date {
  font-family: var(--font-body);
  font-size: 0.9rem;
  color: var(--color-muted);
  margin: 0;
}

/* Pop-up (modal) que muestra la advertencia / detalles / completado */
.trip-modal[hidden] { display: none; }
.trip-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}
.trip-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(30, 39, 35, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}
.trip-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2 * var(--space-lg));
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.trip-modal__close {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--color-muted);
  cursor: pointer;
  z-index: 2;
  transition: color var(--transition);
}
.trip-modal__close:hover { color: var(--color-ink); }
/* El diálogo ya aporta el marco: el contenido interno no duplica fondo/borde. */
.trip-modal .trip-confirm,
.trip-modal .trip-card {
  max-width: none;
  margin: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}
.trip-modal .trip-message {
  padding: var(--space-xl) var(--space-lg);
}

/* ----- Vista de la reserva INLINE (header visible, SIN scroll) -----
   Dos columnas: identidad + datos (izquierda) · listas + notas (derecha). */
.trip-detail { padding-block: var(--space-lg) var(--space-xl); }
.trip-detail__inner { max-width: 1160px; margin-inline: auto; }

/* Franja superior: "Your Reservation" + actividad CENTRADOS · estado a la derecha.
   Grid 1fr·auto·1fr: la columna del medio queda centrada en pantalla. */
.trip-detail__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
.trip-detail__top-left { grid-column: 2; text-align: center; min-width: 0; }
.trip-detail__top .eyebrow { display: block; }
.trip-detail__activity {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--color-ink-soft);
  margin: var(--space-2xs) 0 0;
}
/* Badge "Confirmed" más marcado: relleno dorado con texto claro. */
.trip-detail__top .trip-card__badge {
  grid-column: 3;
  justify-self: end;
  margin: 0;
  background: var(--color-brass);
  border-color: var(--color-brass);
  color: var(--color-surface);
  font-size: 0.64rem;
  letter-spacing: 0.22em;
  padding: 0.55em 1.5em;
}
@media (max-width: 620px) {
  .trip-detail__top { grid-template-columns: 1fr; }
  .trip-detail__top-left { grid-column: 1; }
  .trip-detail__top .trip-card__badge { grid-column: 1; justify-self: center; margin-top: var(--space-sm); }
  .trip-detail__activity { font-size: 1.25rem; }
  .trip-detail__name { font-size: clamp(1.7rem, 8vw, 2.4rem); }
}

/* Cuerpo en dos columnas */
.trip-detail__body {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 4vw, var(--space-2xl));
  align-items: start;
}
.trip-detail__body--single { grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
/* min-width:0 evita que el contenido impida encoger las columnas (desbordes). */
.trip-detail__identity, .trip-detail__extra { min-width: 0; }
@media (max-width: 900px) {
  .trip-detail__body { grid-template-columns: 1fr; gap: var(--space-xl); }
}

/* Identidad (izquierda) */
.trip-detail__name {
  font-size: clamp(2rem, 3.2vw, 3rem);
  line-height: 1.04;
  margin: 0 0 var(--space-2xs);
}
.trip-detail__id {
  font-family: var(--font-body);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--color-muted);
  margin: 0 0 var(--space-md);
}
.trip-detail__id strong { color: var(--color-brass-dark); font-weight: 500; }
.trip-detail__identity .rule-gold { margin: 0 0 var(--space-lg); }

/* Datos (2 columnas dentro de la izquierda) */
.trip-detail__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md) var(--space-lg);
}
.trip-detail__row { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.trip-detail__label {
  font-family: var(--font-body);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--color-muted);
}
.trip-detail__value {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.25;
  color: var(--color-ink);
  overflow-wrap: break-word;
}
@media (max-width: 600px) { .trip-detail__grid { grid-template-columns: 1fr; } }

/* Extra (derecha): listas Activities / Includes / What to Bring (3 columnas) */
.trip-detail__lists {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg) var(--space-md);
  align-items: start;
}
.trip-detail__list { min-width: 0; }
.trip-detail__list-title { font-size: var(--fs-h4); margin: 0; }
.trip-detail__list-note {
  margin-top: var(--space-sm);
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--color-muted);
  opacity: 0.85;
}
.trip-detail__list .highlights-list { margin-top: var(--space-xs); }
.trip-detail__list .highlights-list li { margin-bottom: var(--space-2xs); overflow-wrap: break-word; }
@media (max-width: 600px) { .trip-detail__lists { grid-template-columns: 1fr; } }

/* Notas de operaciones (del CRM) — debajo de las listas, en la derecha */
.trip-detail__notes {
  margin-top: var(--space-lg);
  background: var(--color-cream);
  border: 1px solid var(--color-hairline);
  border-left: 3px solid var(--color-brass);
  border-radius: var(--radius);
  padding: var(--space-md) var(--space-lg);
}
.trip-detail__notes-title {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--color-brass-dark);
  margin: 0 0 var(--space-xs);
}
.trip-detail__notes-text {
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--color-ink-soft);
  margin: 0 0 var(--space-2xs);
  overflow-wrap: break-word;
}
.trip-detail__notes-text:last-child { margin-bottom: 0; }

/* Cabecera CENTRADA (solo se usa en el caso "servicio completado") */
.trip-detail__head { text-align: center; margin-bottom: var(--space-md); }
.trip-detail__head .trip-detail__id,
.trip-detail__head .trip-detail__activity { margin-left: 0; margin-right: 0; }
.trip-detail__head .trip-detail__activity { margin-bottom: var(--space-sm); }
.trip-detail__head .trip-card__badge { margin: 0 0 var(--space-md); }

/* Servicio completado (tour que ya pasó) */
.trip-detail__done { text-align: center; padding: var(--space-lg) 0 var(--space-xl); }
.trip-detail__done-check { display: block; width: 52px; height: 52px; margin: 0 auto var(--space-md); color: var(--color-brass); }
.trip-detail__done-check svg { width: 100%; height: 100%; display: block; }
.trip-detail__done-msg { font-family: var(--font-display); font-size: var(--fs-h3); color: var(--color-ink); margin: 0 0 var(--space-2xs); }
.trip-detail__done-date { font-family: var(--font-body); font-size: 0.95rem; color: var(--color-muted); margin: 0; }

/* Botones "Add to calendar" + "Find another reservation" */
.trip-detail__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-xl);
}

/* --------------------------------------------------------------------------
   25. ACCESIBILIDAD · reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}