/* ==========================================================================
   ELITE HOSTS GT — hoja de estilos principal
   Transporte ejecutivo privado · Guatemala
   ========================================================================== */

/* ---------- Tipografía (Google Fonts) ---------- */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ---------- Tokens de marca ---------- */
:root{
  /* Paleta oficial Elite Hosts GT — no introducir hex fuera de esta lista */
  --negro: #0B0B0B;
  --verde: #0B3D2E;
  --oro: #C5A65C;
  --crema: #FAFAF8;
  --acero: #A7A9AC;

  --negro-rgb: 11,11,11;
  --verde-rgb: 11,61,46;
  --oro-rgb: 197,166,92;
  --crema-rgb: 250,250,248;
  --acero-rgb: 167,169,172;

  --oro-claro: color-mix(in srgb, var(--oro) 78%, var(--crema) 22%);

  /* Superficies fijas "de tarjeta" (siempre oscuras, sin importar la sección) */
  --obsidiana: var(--negro);
  --obsidiana-2: color-mix(in srgb, var(--negro) 92%, var(--verde) 8%);
  --panel: color-mix(in srgb, var(--negro) 88%, var(--verde) 12%);
  --panel-2: color-mix(in srgb, var(--negro) 82%, var(--verde) 18%);

  /* Tokens adaptables — cambian dentro de .seccion--clara para mantener legibilidad */
  --marfil: var(--crema);
  --linea: rgba(var(--acero-rgb), .22);

  --fuente-display: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --fuente-cuerpo: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fuente-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace;

  --space-3xs: .25rem;
  --space-2xs: .5rem;
  --space-xs: .75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  --container: 1240px;
  --radius: 2px;
  --radius-lg: 6px;

  --ease-out: cubic-bezier(.16,.84,.44,1);
  --dur-fast: 180ms;
  --dur-base: 400ms;
  --dur-slow: 800ms;

  --nav-h: 84px;
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol{ margin: 0; }
ul[class], ol[class]{ list-style: none; padding: 0; }
img, picture, video{ max-width: 100%; display: block; }
input, button, textarea, select{ font: inherit; color: inherit; }
button{ background: none; border: none; cursor: pointer; }
a{ color: inherit; text-decoration: none; }

html, body{ min-height: 100dvh; }
body{
  /* Crema: coincide con el footer para que el rebote de scroll no muestre una franja negra */
  background: var(--crema);
  color: var(--marfil);
  font-family: var(--fuente-cuerpo);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection{ background: var(--oro); color: var(--obsidiana); }

/* ---------- Foco visible (accesibilidad) ---------- */
:focus-visible{
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 1px;
}
a:focus:not(:focus-visible), button:focus:not(:focus-visible){ outline: none; }

.skip-link{
  position: absolute;
  left: 1rem; top: -60px;
  background: var(--oro); color: var(--obsidiana);
  padding: .75rem 1.25rem;
  z-index: 999;
  font-weight: 700;
  transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: 1rem; }

/* ---------- Utilidades ---------- */
.contenedor{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.contenedor-ancho{
  width: 100%;
  max-width: 1600px;
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}

.eyebrow{
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--oro);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.eyebrow::before{
  content: '';
  width: 28px; height: 1px;
  background: var(--oro);
  display: inline-block;
}

em, .acento{
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 500;
  color: var(--oro-claro);
}

h1, h2, h3, .titular{
  font-family: var(--fuente-display);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -.01em;
  color: var(--marfil);
}

/* Títulos principales (hero + encabezados de sección) en mayúsculas, tono premium */
h1, h2{
  text-transform: uppercase;
  letter-spacing: .015em;
}

h1{ font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2{ font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3{ font-size: clamp(1.35rem, 2.2vw, 1.7rem); font-weight: 500; }

.parrafo-lead{
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--acero);
  max-width: 46ch;
  line-height: 1.7;
}

.parrafo{
  color: var(--acero);
  max-width: 52ch;
  line-height: 1.75;
}

.mono{ font-family: var(--fuente-mono); }

.etiqueta-dossier{
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .08em;
  color: var(--acero);
}

/* ---------- Botones ---------- */
.boton{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.85rem;
  font-family: var(--fuente-cuerpo);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .02em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  white-space: nowrap;
  min-height: 44px;
}
.boton:active{ transform: scale(.97); }

.boton-oro{
  background: var(--oro);
  color: var(--obsidiana);
}
.boton-oro:hover{ background: var(--oro-claro); }

.boton-linea{
  background: transparent;
  color: var(--marfil);
  border-color: var(--linea);
}
.boton-linea:hover{ border-color: var(--oro); color: var(--oro-claro); }
/* Sobre fotografía/video el borde tenue desaparece: se refuerza con oro */
.cta-final .boton-linea,
.pin-scrub .boton-linea{
  border-color: rgba(var(--oro-rgb), .55);
  background: rgba(11,11,11,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.cta-final .boton-linea:hover,
.pin-scrub .boton-linea:hover{ border-color: var(--oro); background: rgba(11,11,11,.4); }

.boton-ancho{ width: 100%; }

.boton svg{ width: 18px; height: 18px; flex-shrink: 0; }

/* ---------- Reveal on scroll ---------- */
[data-reveal]{
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
[data-reveal].en-vista{
  opacity: 1;
  transform: translateY(0);
}
[data-reveal-grupo] > *{ transition-delay: calc(var(--i, 0) * 90ms); }

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

/* ==========================================================================
   NAV
   ========================================================================== */
/* Encabezado invisible: sin fondo ni borde, altura constante para que el
   emblema no salte al hacer scroll. Queda fijo, siempre visible. */
.nav{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: none;
  pointer-events: none; /* deja pasar el clic al contenido de abajo... */
}
.nav__interior > *{ pointer-events: auto; } /* ...salvo en el logo y el menú */
.nav.nav--solida{
  background: transparent;
  height: var(--nav-h);
}
.nav__interior{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.marca-logo{
  display: flex;
  align-items: center;
  gap: .65rem;
  flex-shrink: 0;
}
.marca-logo img{ height: 26px; width: auto; }

/* Emblema del encabezado: 20% más grande y con sombra suave para que no se
   pierda al pasar sobre las secciones claras (el oro sobre crema contrasta poco). */
.marca-logo--nav img{
  height: 31.2px;
  /* Contorno tenue + sombra: mantiene el emblema legible sobre crema y sobre negro */
  filter:
    drop-shadow(0 0 1px rgba(11,11,11,.6))
    drop-shadow(0 1px 3px rgba(11,11,11,.6))
    drop-shadow(0 2px 14px rgba(11,11,11,.45));
}
.marca-logo--nav{ transition: transform var(--dur-fast) var(--ease-out); }
.marca-logo--nav:hover{ transform: translateY(-1px); }
.marca-logo__texto{
  font-family: var(--fuente-display);
  font-size: 1.28rem;
  letter-spacing: .03em;
  color: var(--marfil);
  font-weight: 500;
}
.marca-logo__texto b{ color: var(--oro-claro); font-weight: 500; font-style: italic; }


.nav__hamburguesa{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px; height: 44px;
}
.nav__hamburguesa span{
  width: 26px; height: 2px;
  background: var(--oro);
  border-radius: 2px;
  /* Contorno oscuro fino + sombra: el dorado sobre crema contrasta poco (≈2.3:1),
     el aro lo hace legible sobre cualquier fondo sin dejar de ser dorado. */
  box-shadow:
    0 0 0 1px rgba(11,11,11,.35),
    0 1px 3px rgba(11,11,11,.7),
    0 2px 12px rgba(11,11,11,.4);
  transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.nav__hamburguesa:hover span{ background: var(--oro-claro); }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav__hamburguesa[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }

.menu-movil{
  position: fixed;
  inset: 0;
  z-index: 190;
  background: var(--obsidiana);
  display: flex;
  flex-direction: column;
  /* Arriba se reserva el alto del encabezado: con el menú centrado, los
     primeros títulos se montaban sobre el emblema. */
  justify-content: space-between;
  padding: calc(var(--nav-h) + 2.5rem) clamp(1.5rem, 8vw, 4rem) 2.5rem;
  transform: translateY(-100%);
  transition: transform var(--dur-base) var(--ease-out);
  overflow-y: auto;
}
.menu-movil.abierto{ transform: translateY(0); }

/* --- Enlaces: una línea por opción, no bloques de display --- */
.menu-movil__enlaces{
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(var(--crema-rgb), .12);
}
.menu-movil__enlaces a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .95rem 0;
  border-bottom: 1px solid rgba(var(--crema-rgb), .12);
  font-family: var(--fuente-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marfil);
  transition: color var(--dur-fast) var(--ease-out), padding-left var(--dur-fast) var(--ease-out);
}
/* Flecha que aparece al pasar por encima, sin mover el alto de la fila */
.menu-movil__enlaces a::after{
  content: '';
  width: 16px; height: 8px;
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  transform: rotate(45deg) scale(.7);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.menu-movil__enlaces a:hover{ color: var(--oro); padding-left: .5rem; }
.menu-movil__enlaces a:hover::after{ opacity: 1; transform: rotate(45deg) scale(.8); }

/* Los tres destinos se distinguen del resto sin romper la linealidad */
.menu-movil__enlaces a.es-destino{ color: var(--oro-claro); }

/* --- Pie: contacto reducido a iconos --- */
.menu-movil__pie{
  margin-top: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: flex-start;
}
.menu-movil__pie-titulo{
  margin: 0;
  font-family: var(--fuente-mono);
  font-size: .66rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--acero);
}
.contacto-iconos{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  width: 100%;
  max-width: 340px;
}
.contacto-icono{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  padding: .8rem .25rem .65rem;
  border: 1px solid rgba(var(--crema-rgb), .18);
  border-radius: var(--radius);
  color: var(--marfil);
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out);
}
.contacto-icono svg{ width: 22px; height: 22px; }
.contacto-icono span{
  font-family: var(--fuente-mono);
  font-size: .56rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acero);
  transition: color var(--dur-fast) var(--ease-out);
}
.contacto-icono:hover{
  border-color: var(--oro);
  color: var(--oro);
  background: rgba(var(--oro-rgb), .08);
}
.contacto-icono:hover span{ color: var(--oro); }

/* El menú hamburguesa es ahora la única navegación: visible en todos los tamaños */

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{
  position: relative;
  min-height: 100dvh;
  display: flex;
  align-items: center;   /* composición centrada vertical y horizontalmente */
  overflow: hidden;
  background: var(--obsidiana);
}
.hero__media{ position: absolute; inset: 0; z-index: 0; }
.hero__media img,
.hero__media video{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 70%;
}
.hero__scrim{
  position: absolute; inset: 0;
  /* Viñeta central: sostiene el texto centrado dejando respirar los bordes de la
     foto (el volcán arriba, la Suburban a la derecha, el empedrado abajo). */
  background:
    radial-gradient(ellipse 80% 60% at 50% 48%,
      rgba(11,11,11,.70) 0%,
      rgba(11,11,11,.56) 40%,
      rgba(11,11,11,.26) 72%,
      rgba(11,11,11,0) 100%),
    linear-gradient(to bottom, rgba(11,11,11,.30) 0%, rgba(11,11,11,0) 32%, rgba(11,11,11,0) 62%, rgba(11,11,11,.42) 100%);
}
@media (max-width: 719px){
  /* En móvil el bloque ocupa casi toda la pantalla: viñeta más amplia */
  .hero__scrim{
    background:
      radial-gradient(ellipse 120% 58% at 50% 50%,
        rgba(11,11,11,.66) 0%,
        rgba(11,11,11,.5) 45%,
        rgba(11,11,11,.24) 78%,
        rgba(11,11,11,.1) 100%),
      linear-gradient(to bottom, rgba(11,11,11,.32) 0%, rgba(11,11,11,.08) 35%, rgba(11,11,11,.5) 100%);
  }
}
.hero__contenido{
  position: relative;
  z-index: 2;
  width: 100%;
  padding-top: calc(var(--nav-h) + 2rem);
  padding-bottom: var(--space-2xl);
  display: grid;
  gap: var(--space-2xl);
}
.hero__texto{ max-width: 720px; }
.hero__texto .eyebrow{ margin-bottom: var(--space-md); }
.hero__texto h1{ margin-bottom: var(--space-md); }

/* ---- Portada centrada: titular de marca + lema en cursiva + botón ---- */
.hero__contenido--centro{
  /* Padding simétrico arriba/abajo: el bloque queda ópticamente al centro
     y a la vez libre del encabezado fijo. */
  padding-block: calc(var(--nav-h) + var(--space-md));
  display: grid;
  place-items: center;
  gap: 0;
}
.hero__texto--centro{
  max-width: none;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.hero__titular{
  margin: 0;
  font-size: clamp(1.55rem, 3.3vw, 2.85rem);
  letter-spacing: .04em;
  text-shadow: 0 2px 8px rgba(11,11,11,.7), 0 4px 34px rgba(11,11,11,.55);
}
/* Filete dorado: separa el titular del lema y refuerza la simetría del eje central */
.hero__filete{
  display: block;
  width: clamp(56px, 7vw, 88px);
  height: 1px;
  margin-block: clamp(1.35rem, 3vh, 2.1rem);
  background: var(--oro);
  box-shadow: 0 0 10px rgba(var(--oro-rgb), .5), 0 1px 2px rgba(11,11,11,.6);
}
/* El lema — la frase que da la voz de la marca */
.hero__lema{
  margin: 0;
  font-family: var(--fuente-display);
  font-style: italic;
  font-weight: 400;
  color: #FFFFFF;
  font-size: clamp(1.3rem, 2.7vw, 2.2rem);
  line-height: 1.4;
  letter-spacing: .015em;
  /* Ancho medido para que quiebre en dos líneas equilibradas bajo el titular */
  max-width: min(40ch, 100%);
  text-wrap: balance;
  text-shadow: 0 1px 4px rgba(11,11,11,.85), 0 2px 20px rgba(11,11,11,.7), 0 0 46px rgba(11,11,11,.45);
}
.hero__texto--centro .boton-hero{
  margin-top: clamp(1.9rem, 4.5vh, 3rem);
}

@media (max-width: 719px){
  /* En pantallas angostas una medida corta se lee mejor que dos líneas largas */
  .hero__lema{ max-width: 19ch; }
}

.boton-hero{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 2vw, 1.25rem) clamp(2.25rem, 6vw, 3.5rem);
  background: var(--verde);
  color: #FFFFFF;
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: clamp(.8rem, 1.1vw, .9rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius);
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.boton-hero:hover{
  border-color: var(--oro);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11,61,46,.4);
}
.boton-hero:active{ transform: translateY(0) scale(.98); }
.hero__scroll{
  position: absolute;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);  /* centrado: mantiene el eje de simetría */
  z-index: 2;
  display: none;
  align-items: center;
  gap: .6rem;
  color: var(--acero);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .15em;
  text-transform: uppercase;
  text-shadow: 0 1px 6px rgba(11,11,11,.8);
}
.hero__scroll-linea{
  width: 1px; height: 40px;
  background: linear-gradient(to bottom, var(--oro), transparent);
  animation: caer 2.2s var(--ease-out) infinite;
}
@keyframes caer{
  0%{ transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%{ transform: scaleY(1); transform-origin: top; }
  51%{ transform-origin: bottom; }
  100%{ transform: scaleY(0); transform-origin: bottom; opacity: .4; }
}

/* ---- widget de cotización ---- */
.cotizador{
  position: relative;
  z-index: 2;
  background: var(--panel);
  border: 1px solid rgba(var(--oro-rgb), .25);
  border-radius: var(--radius-lg);
  padding: var(--space-md);
  width: 100%;
  max-width: 980px;
  margin-inline: auto;
  margin-top: var(--space-xl);
  /* Tarjeta siempre oscura: fija el texto claro aunque viva en una sección clara */
  --marfil: var(--crema);
  --acero: rgb(var(--acero-rgb));
  --linea: rgba(var(--acero-rgb), .22);
}
.cotizador__titulo{
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.cotizador__titulo .eyebrow{ margin: 0; }
.cotizador__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
.campo{ display: flex; flex-direction: column; gap: .4rem; }
.campo label{
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acero);
}
.campo input, .campo select{
  background: var(--obsidiana-2);
  border: 1px solid var(--linea);
  border-radius: var(--radius);
  padding: .8rem .9rem;
  color: var(--marfil);
  font-size: .92rem;
  line-height: 1.45;   /* igual en todos los campos, incluido el de fecha */
  min-height: 46px;
  transition: border-color var(--dur-fast) var(--ease-out);
  width: 100%;
}
.campo input:hover, .campo select:hover{ border-color: rgba(var(--oro-rgb), .4); }
.campo input:focus, .campo select:focus{ border-color: var(--oro); }
.campo select{ appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23C5A65C' stroke-width='1.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.2rem;
}
.campo input::-webkit-calendar-picker-indicator{ filter: invert(72%) sepia(30%) saturate(500%) hue-rotate(0deg); cursor: pointer; }

/* Campo de fecha en iOS/Safari.
   Safari le asigna al input[type=date] un ancho propio calculado a partir del
   texto de la fecha, y ese ancho ignora el width:100%. Por eso el recuadro se
   salía del formulario en el teléfono. appearance:none le quita ese cálculo y
   min-width:0 le permite encogerse dentro del contenedor flex. */
.campo input[type="date"]{
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  max-width: 100%;
}
/* Safari centra el valor y le mete margen propio: se alinea como los demás. */
.campo input[type="date"]::-webkit-date-and-time-value{
  text-align: left;
  margin: 0;
}
/* El contenedor interno de los dígitos trae un padding propio del navegador que
   hacía el recuadro 2px más alto que el resto de los campos. */
.campo input[type="date"]::-webkit-datetime-edit-fields-wrapper{
  padding: 0;
}
.cotizador__envio{ margin-top: var(--space-sm); }

@media (min-width: 640px){
  .cotizador__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px){
  .cotizador{ padding: var(--space-lg); }
  .cotizador__grid{ grid-template-columns: 1.3fr 1.3fr .9fr .9fr .8fr; align-items: end; }
  .cotizador__envio{ margin-top: 0; grid-column: 1 / -1; }
}

@media (min-width: 1024px){
  .hero__scroll{ display: flex; flex-direction: column; align-items: center; }
}

/* ==========================================================================
   SECCIONES / RITMO GENERAL
   ========================================================================== */
/* ==========================================================================
   CONDICIONES DEL SERVICIO — ficha de protocolo, no letra chica
   ========================================================================== */
.condiciones{
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.condicion{
  padding-block: var(--space-md);
  /* Línea fina verde de marca como separación; sin cajas ni sombras */
  border-top: 1px solid rgba(var(--verde-rgb), .3);
}
.condicion__titulo{
  font-family: var(--fuente-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  /* Verde bosque porque esta sección va sobre fondo claro */
  color: var(--verde);
  margin-bottom: .7rem;
}
.condicion p{
  color: var(--acero);
  font-size: .92rem;
  line-height: 1.8;
  max-width: 42ch;
}
.condicion .mono{ color: var(--verde); }

@media (min-width: 720px){
  .condiciones{ grid-template-columns: repeat(2, 1fr); column-gap: var(--space-xl); }
}
@media (min-width: 1100px){
  .condiciones{ grid-template-columns: repeat(3, 1fr); }
}

/* ==========================================================================
   MÁS ALLÁ DEL TRASLADO — split: imagen cuadrada + bloque de texto
   ========================================================================== */
.mas-alla{
  display: grid;
  grid-template-columns: 1fr;
  background: var(--negro);
}
.mas-alla__media{
  position: relative;
  aspect-ratio: 1 / 1;   /* la imagen es cuadrada: no se recorta a panorámica */
  overflow: hidden;
}
.mas-alla__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.mas-alla__texto{
  background: var(--negro);
  display: flex;
  align-items: center;
  padding: var(--space-2xl) clamp(1.25rem, 4vw, 2.5rem);
  /* Filete dorado de separación — horizontal en móvil */
  border-top: 1px solid var(--oro);
}
.mas-alla__inner{ max-width: 46ch; }
.mas-alla__inner .eyebrow{ margin-bottom: var(--space-md); }
.mas-alla__inner h2{
  margin-bottom: var(--space-md);
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
}
.mas-alla__inner .parrafo + .parrafo{ margin-top: var(--space-sm); }
.mas-alla__inner .boton-hero{ margin-top: var(--space-lg); }

@media (min-width: 900px){
  .mas-alla{ grid-template-columns: 1fr 1fr; }
  .mas-alla__media{ aspect-ratio: auto; height: 100%; }
  .mas-alla__texto{
    /* En escritorio el filete pasa a ser vertical, entre imagen y texto */
    border-top: none;
    border-left: 1px solid var(--oro);
    padding-inline: clamp(2rem, 4vw, 4rem);
  }
}

/* Línea de cortesía dentro del formulario, sobre el botón */
.cortesia-linea{
  margin: 0 0 var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid rgba(var(--oro-rgb), .45);
  font-family: var(--fuente-mono);
  font-size: .75rem;
  letter-spacing: .04em;
  line-height: 1.6;
  color: var(--oro);
  text-align: center;
}

/* ---------- Bloque de correo bajo el formulario ----------
   Se limita al mismo ancho del formulario para que quede alineado con él,
   no con el contenedor (que es más ancho y lo hacía ver descentrado). */
.correo-cta{
  max-width: 980px;
  margin-inline: auto;
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid rgba(var(--verde-rgb), .22);
  text-align: center;
}
.correo-cta__label{
  margin: 0 0 var(--space-md);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde);
}
.boton-correo{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  min-height: 48px;
  padding: clamp(.85rem, 1.6vw, 1.05rem) clamp(1.5rem, 3.5vw, 2.4rem);
  background: var(--verde);
  color: #FFFFFF;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-family: var(--fuente-mono);
  font-size: clamp(.82rem, 1.1vw, .95rem);
  letter-spacing: .06em;
  transition: border-color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.boton-correo svg{ width: 18px; height: 18px; flex-shrink: 0; }
.boton-correo:hover{
  border-color: var(--oro);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(11,61,46,.35);
}
.boton-correo:active{ transform: translateY(0) scale(.98); }

/* Confirmación al copiar. Reserva su alto para no mover el layout al aparecer. */
.correo-cta__aviso{
  margin: var(--space-sm) 0 0;
  min-height: 1.2em;
  font-family: var(--fuente-mono);
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--verde);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.correo-cta__aviso.visible{ opacity: 1; }

/* La cuadrícula de servicios cierra la sección: sin aire muerto antes
   de la sección siguiente. */
#servicios{ padding-bottom: 0; }

/* Ritmo vertical uniforme: todas las secciones respiran exactamente igual,
   así no quedan bloques con más aire que otros. */
.seccion{ padding-block: var(--space-2xl); position: relative; }
.seccion--compacta{ padding-block: var(--space-2xl); }

/* ---------- Ritmo negro / off-white (regla 1) ---------- */
.seccion--oscura{ background: var(--negro); }
.seccion--clara{
  background: var(--crema);
  --marfil: var(--negro);
  --acero: rgba(var(--negro-rgb), .62);
  --linea: rgba(var(--negro-rgb), .14);
}

/* ---------- Divisor de sección — línea dorada simétrica, sin altura propia ----------
   No añade espacio vertical: es solo una hairline al borde entre dos secciones. */
.divisor{
  height: 1px;
  line-height: 0;
  font-size: 0;
}
.divisor--clara{ background: var(--crema); }
.divisor--oscura{ background: var(--negro); }
.divisor__linea{
  display: block;
  width: 100%;
  max-width: var(--container);
  height: 1px;
  margin-inline: auto;
  background: rgba(var(--oro-rgb), .6);
}

.seccion__cabecera{
  max-width: 720px;
  margin-bottom: var(--space-xl);
}
.seccion__cabecera .eyebrow{ margin-bottom: var(--space-sm); }
.seccion__cabecera h2{ margin-bottom: var(--space-md); }
.seccion__cabecera--centrada{ margin-inline: auto; text-align: center; }
.seccion__cabecera--centrada .eyebrow{ justify-content: center; }
.seccion__cabecera--centrada .eyebrow::before{ display: none; }
.seccion__cabecera--split{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--space-md);
  max-width: none;
}

/* ---------- Intro de marca ---------- */
.intro{ text-align: center; }
.intro__inner{ max-width: 900px; margin-inline: auto; }
.intro h2{ margin-block: var(--space-md); }
.intro .parrafo-lead{ margin-inline: auto; }

/* ==========================================================================
   TARJETAS DE EXPERIENCIA
   ========================================================================== */
.experiencia__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.tarjeta-experiencia{ display: flex; flex-direction: column; }
.tarjeta-experiencia__media{
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: var(--space-md);
  background: var(--panel);
}
.parallax-capa{
  position: absolute;
  inset: -14% 0;
  width: 100%;
  height: 128%;
  will-change: transform;
}

.tarjeta-experiencia__media img,
.tarjeta-experiencia__media video{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--ease-out);
}
.tarjeta-experiencia:hover .tarjeta-experiencia__media img,
.tarjeta-experiencia:hover .tarjeta-experiencia__media video{
  transform: scale(1.045);
}
.tarjeta-experiencia h3{ margin-bottom: .5rem; }
.tarjeta-experiencia p{ color: var(--acero); font-size: .95rem; }

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

/* ==========================================================================
   SERVICIOS
   ========================================================================== */
.servicios__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
}
.tarjeta-servicio{
  position: relative;
  background: var(--obsidiana);
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-lg);
  overflow: hidden;
  /* Fotografía siempre oscura: fija el texto claro aunque la sección sea clara */
  --marfil: var(--crema);
  --acero: rgb(var(--acero-rgb));
}
.tarjeta-servicio__bg{
  position: absolute; inset: 0;
  z-index: 0;
}
.tarjeta-servicio__bg img{
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: .38;
  transition: opacity var(--dur-base) var(--ease-out), transform 1.4s var(--ease-out);
}
.tarjeta-servicio:hover .tarjeta-servicio__bg img{ opacity: .55; transform: scale(1.06); }
.tarjeta-servicio__scrim{
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(11,11,11,1) 10%, rgba(11,11,11,.35) 75%);
  z-index: 1;
}
.tarjeta-servicio__contenido{ position: relative; z-index: 2; }
.tarjeta-servicio__icono{
  width: 40px; height: 40px;
  margin-bottom: var(--space-md);
  color: var(--oro);
}
.tarjeta-servicio__icono svg{ width: 100%; height: 100%; }
.tarjeta-servicio h3{ margin-bottom: .6rem; }
.tarjeta-servicio p{ color: var(--acero); font-size: .92rem; max-width: 34ch; }

@media (min-width: 720px){
  .servicios__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px){
  .servicios__grid{ grid-template-columns: repeat(4, 1fr); }
  .tarjeta-servicio{ min-height: 460px; }
}

/* ==========================================================================
   VEHÍCULO
   ========================================================================== */
/* La sección del vehículo usa .pin-scrub; aquí solo quedan los chips de specs */
.vehiculo__chips{
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: var(--space-lg);
}
.chip{
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .03em;
  color: var(--marfil);
  border: 1px solid var(--linea);
  padding: .55rem .95rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.chip::before{
  content: '';
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--oro);
}


/* ==========================================================================
   VIDEO CON PIN + SCRUB — el avance del video se liga a la posición de scroll
   ========================================================================== */
.pin-scrub{
  position: relative;
  height: 200vh;              /* 100vh de pin + 100vh de recorrido de scrub */
  background: var(--negro);
}
.pin-scrub__sticky{
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.pin-scrub__video{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
}
.pin-scrub__scrim{ position: absolute; inset: 0; z-index: 1; }
/* Scrim lateral: protege el texto sin tapar el lado protagonista de la imagen */
.pin-scrub__scrim--lateral{
  background:
    linear-gradient(to right, rgba(11,11,11,.86) 0%, rgba(11,11,11,.74) 26%, rgba(11,11,11,.5) 44%, rgba(11,11,11,.16) 60%, rgba(11,11,11,0) 76%),
    linear-gradient(to bottom, rgba(11,11,11,.35) 0%, rgba(11,11,11,0) 30%);
}
/* Scrim centrado: para bloques con el contenido al medio */
.pin-scrub__scrim--centro{
  background: linear-gradient(180deg, rgba(11,11,11,.72) 0%, rgba(11,11,11,.52) 50%, rgba(11,11,11,.82) 100%);
}
.pin-scrub__contenido{ position: relative; z-index: 2; width: 100%; }
.pin-scrub__texto{ max-width: 560px; }
/* Sobre video en movimiento el gris acero pierde fuerza: se aclara el cuerpo */
.pin-scrub .parrafo{
  color: rgba(var(--crema-rgb), .88);
  text-shadow: 0 1px 12px rgba(11,11,11,.8);
}
.pin-scrub h2{ margin-block: var(--space-sm) var(--space-md); }
.pin-scrub .eyebrow{ text-shadow: 0 1px 10px rgba(11,11,11,.6); }

/* Indicador sutil de progreso del scrub */
.pin-scrub__barra{
  position: absolute;
  left: 0; bottom: 0;
  height: 2px;
  width: 100%;
  z-index: 3;
  background: rgba(var(--acero-rgb), .18);
}
/* La barra avanza con transform:scaleX, no con width. Animar width obliga al
   navegador a recalcular el layout en cada frame del scroll; scaleX corre en
   el compositor y no toca el layout. */
.pin-scrub__barra span{
  display: block;
  height: 100%;
  width: 100%;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
}

@media (max-width: 719px){
  .pin-scrub__scrim--lateral{
    background: linear-gradient(to bottom, rgba(11,11,11,.5) 0%, rgba(11,11,11,.35) 45%, rgba(11,11,11,.8) 100%);
  }
}

/* Sin pin ni scrub si el usuario pide menos movimiento: el video queda estático */
@media (prefers-reduced-motion: reduce){
  .pin-scrub{ height: auto; }
  .pin-scrub__sticky{ position: relative; height: auto; min-height: 70svh; }
  .pin-scrub__barra{ display: none; }
}

/* ==========================================================================
   COBERTURA
   ========================================================================== */
/* Cobertura: video de fondo en loop continuo, independiente del scroll */
.cobertura{ position: relative; overflow: hidden; }
.cobertura__media{ position: absolute; inset: 0; z-index: 0; }
.cobertura__media video{
  width: 100%; height: 100%; object-fit: cover;
  /* Se mantiene deliberadamente irreconocible */
  filter: grayscale(55%) brightness(.5) contrast(1.05);
}
.cobertura__scrim{
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(11,11,11,.88) 0%, rgba(11,11,11,.72) 45%, rgba(11,11,11,.92) 100%);
}
.cobertura__contenido{ position: relative; z-index: 2; }
.cobertura h2{ margin-block: var(--space-sm) var(--space-md); }
.cobertura__grid{
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}
.mapa{
  position: relative;
  aspect-ratio: 1/1;
  max-width: 460px;
  margin-inline: auto;
}
.mapa svg{ width: 100%; height: 100%; }
.mapa__punto{ fill: var(--oro); }
.mapa__punto-anillo{ fill: none; stroke: rgba(var(--oro-rgb), .35); stroke-width: 1; }
.mapa__linea{ fill: none; stroke: rgba(var(--oro-rgb), .4); stroke-width: 1; stroke-dasharray: 3 4; }
.mapa__etiqueta{
  font-family: var(--fuente-mono);
  font-size: 9px;
  fill: var(--marfil);
  letter-spacing: .04em;
}
.mapa__etiqueta-sec{ fill: var(--acero); }

@media (min-width: 960px){
  .cobertura__grid{ grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   CÓMO RESERVAR
   ========================================================================== */
.pasos{
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  counter-reset: paso;
}
.paso{
  border-top: 1px solid var(--linea);
  padding-top: var(--space-md);
}
.paso__num{
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: 2.6rem;
  color: var(--oro);
  display: block;
  margin-bottom: var(--space-sm);
  line-height: 1;
}
.paso h3{ margin-bottom: .6rem; }
.paso p{ color: var(--acero); font-size: .95rem; max-width: 36ch; }

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

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ max-width: 840px; }
.faq__item{
  border-bottom: 1px solid var(--linea);
}
.faq__pregunta{
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.5rem 0;
  text-align: left;
  font-family: var(--fuente-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--marfil);
}
.faq__pregunta:hover{ color: var(--oro-claro); }
.faq__icono{
  flex-shrink: 0;
  width: 22px; height: 22px;
  position: relative;
}
.faq__icono::before, .faq__icono::after{
  content: '';
  position: absolute;
  background: var(--oro);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
}
.faq__icono::before{ width: 14px; height: 1.4px; }
.faq__icono::after{ width: 1.4px; height: 14px; transition: transform var(--dur-fast) var(--ease-out); }
.faq__item[data-abierto="true"] .faq__icono::after{ transform: translate(-50%, -50%) rotate(90deg) scale(0); }

.faq__respuesta{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.faq__item[data-abierto="true"] .faq__respuesta{ grid-template-rows: 1fr; }
.faq__respuesta-inner{ overflow: hidden; }
.faq__respuesta p{
  color: var(--acero);
  padding-bottom: 1.6rem;
  max-width: 60ch;
  font-size: .96rem;
}

/* ==========================================================================
   INSTAGRAM
   ========================================================================== */
.instagram__grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
.instagram__item{
  aspect-ratio: 1/1;
  position: relative;
  overflow: hidden;
  background: var(--panel);
}
.instagram__item img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
}
.instagram__item::after{
  content: '';
  position: absolute; inset: 0;
  background: rgba(11,11,11,0);
  transition: background var(--dur-fast) var(--ease-out);
}
.instagram__item:hover::after{ background: rgba(11,11,11,.35); }
.instagram__item:hover img{ transform: scale(1.08); }
.instagram__icono{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
  z-index: 2;
  color: var(--crema); /* siempre claro: flota sobre la foto oscurecida, sin importar la sección */
}
.instagram__item:hover .instagram__icono{ opacity: 1; }
.instagram__icono svg{ width: 26px; height: 26px; }

@media (min-width: 640px){
  .instagram__grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px){
  .instagram__grid{ grid-template-columns: repeat(6, 1fr); }
}

/* ==========================================================================
   CTA FINAL
   ========================================================================== */
/* El CTA final vive dentro de .pin-scrub: el layout lo aporta esa clase */
.cta-final__contenido{ text-align: center; }
.cta-final h2{ margin-bottom: var(--space-lg); }
.cta-final__acciones{ display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.pie{
  border-top: 1px solid var(--linea);
  padding-block: var(--space-2xl) var(--space-lg);
}
.pie__grid{
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
  margin-bottom: var(--space-2xl);
}
.pie__marca .marca-logo{ margin-bottom: var(--space-md); }
.pie__marca p{ color: var(--acero); max-width: 32ch; font-size: .92rem; }
.pie__col h4{
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: var(--space-md);
}
.pie__col ul{ display: flex; flex-direction: column; gap: .7rem; }
/* El número no debe partirse entre dos líneas */
.pie__col .mono{ white-space: nowrap; }
.pie__col a, .pie__col p{ color: var(--acero); font-size: .92rem; }
.pie__col a:hover{ color: var(--oro-claro); }
.pie__social{ display: flex; gap: .8rem; margin-top: var(--space-md); }
.pie__social a{
  width: 40px; height: 40px;
  border: 1px solid var(--linea);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  /* Explícito: sin esto hereda el color del body (crema) y los iconos
     desaparecen sobre el footer claro. */
  color: var(--marfil);
  transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.pie__social a:hover{ border-color: var(--oro); color: var(--oro); }
.pie__social svg{ width: 18px; height: 18px; }

.pie__base{
  border-top: 1px solid var(--linea);
  padding-top: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  color: var(--acero);
  font-size: .82rem;
}

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

/* ---------- Botón flotante de WhatsApp ---------- */
.whatsapp-flotante{
  position: fixed;
  bottom: var(--space-md);
  right: var(--space-md);
  z-index: 150;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--oro);
  color: var(--obsidiana);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0,0,0,.4);
  transition: transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.whatsapp-flotante:hover{ transform: translateY(-3px); background: var(--oro-claro); }
.whatsapp-flotante svg{ width: 26px; height: 26px; }

/* ---------- placeholder de media faltante ---------- */
.media-placeholder{
  width: 100%; height: 100%;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.5rem;
  background: linear-gradient(135deg, var(--panel) 0%, var(--obsidiana) 55%, rgba(var(--oro-rgb),.14) 100%);
  border: 1px dashed rgba(var(--oro-rgb), .35);
  color: var(--acero);
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .05em;
}

/* ==========================================================================
   PORTADA EN CARRUSEL (3 diapositivas)
   Sustituye al hero de una sola imagen. Cada diapositiva trae su propia foto,
   su titular, su CTA y su fila de pilares.
   ========================================================================== */
.diapo{
  position: absolute; inset: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 850ms var(--ease-out), visibility 0s linear 850ms;
}
.diapo.es-activa{
  opacity: 1;
  visibility: visible;
  transition: opacity 850ms var(--ease-out), visibility 0s;
  z-index: 1;
}
.diapo__media{ position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Toda la portada cambia de diapositiva al tocarla. touch-action: pan-y deja
   pasar el scroll vertical y reserva el gesto horizontal para el carrusel. */
.hero{
  cursor: pointer;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
}
/* Sobre el botón y los enlaces manda el cursor normal: ahí el toque es para
   reservar, no para pasar de diapositiva. */
.hero a, .hero button{ cursor: pointer; }
.diapo__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
  /* Zoom lentísimo: la foto nunca queda del todo quieta. Solo escala, así que
     corre en el compositor y no cuesta layout. */
  transform: scale(1.06);
  transition: transform 1400ms var(--ease-out);
}
.diapo.es-activa .diapo__media img{
  transform: scale(1);
  transition: transform 8600ms linear;   /* deriva durante toda la diapositiva */
}
.diapo__scrim{
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(to right,
      rgba(11,11,11,.86) 0%,
      rgba(11,11,11,.68) 38%,
      rgba(11,11,11,.22) 70%,
      rgba(11,11,11,.30) 100%),
    linear-gradient(to bottom,
      rgba(11,11,11,.55) 0%,
      rgba(11,11,11,.05) 30%,
      rgba(11,11,11,.10) 55%,
      rgba(11,11,11,.88) 100%);
}
.diapo__contenido{
  position: relative; z-index: 2; width: 100%;
  /* Se reserva abajo el alto de la fila de pilares (142px medidos) más aire.
     Como la diapositiva centra su contenido, este relleno sube el bloque de
     texto justo lo necesario para que nunca invada los iconos, sea cual sea el
     alto de la ventana o el número de líneas del titular. */
  padding-bottom: 176px;
}
.diapo__texto{ max-width: 660px; }

/* --- Entrada escalonada del texto de la diapositiva activa --- */
.diapo__texto > *{
  opacity: 0;
  transform: translateY(18px);
}
.diapo.es-activa .diapo__texto > *{
  opacity: 1;
  transform: none;
  transition: opacity 520ms var(--ease-out), transform 520ms var(--ease-out);
}
.diapo.es-activa .diapo__texto > *:nth-child(1){ transition-delay: 70ms; }
.diapo.es-activa .diapo__texto > *:nth-child(2){ transition-delay: 140ms; }
.diapo.es-activa .diapo__texto > *:nth-child(3){ transition-delay: 210ms; }
.diapo.es-activa .diapo__texto > *:nth-child(4){ transition-delay: 280ms; }
.diapo.es-activa .diapo__texto > *:nth-child(5){ transition-delay: 350ms; }

.diapo__eyebrow{
  font-family: var(--fuente-mono);
  font-size: .78rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: var(--space-md);
}
.diapo__titulo{
  font-family: var(--fuente-titulo);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  font-size: clamp(2.6rem, 7.4vw, 5.6rem);
  color: var(--crema);
  margin: 0 0 var(--space-md);
}
.diapo__titulo em{ font-style: italic; }
.diapo__lema{
  font-family: var(--fuente-titulo);
  font-size: clamp(1.05rem, 2.1vw, 1.5rem);
  line-height: 1.45;
  color: rgba(var(--crema-rgb), .92);
  margin: 0 0 var(--space-lg);
}

/* --- CTA principal: el elemento más visible de la portada --- */
.boton-cta{
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: 1.15rem 2.3rem;
  background: var(--oro);
  color: var(--negro);
  border: 1px solid var(--oro);
  border-radius: 2px;
  font-family: var(--fuente-mono);
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 10px 34px rgba(0,0,0,.42);
  transition: background var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out);
}
.boton-cta svg{ width: 18px; height: 18px; transition: transform var(--dur-fast) var(--ease-out); }
.boton-cta:hover{
  background: var(--crema);
  border-color: var(--crema);
  transform: translateY(-2px);
  box-shadow: 0 16px 42px rgba(0,0,0,.5);
}
.boton-cta:hover svg{ transform: translateX(4px); }
.boton-cta:active{ transform: translateY(0); }
.cta-apoyo{
  margin: .9rem 0 0;
  font-family: var(--fuente-mono);
  font-size: .74rem;
  letter-spacing: .1em;
  color: rgba(var(--crema-rgb), .72);
}

/* --- Fila de pilares al pie de cada diapositiva --- */
.diapo__pilares{
  /* Sin transición en esta regla base: al salir, la fila desaparece de golpe.
     Si se desvaneciera, durante el cruce se verían encimados los pilares de las
     dos diapositivas y el texto quedaba ilegible. */
  opacity: 0;
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0;
  list-style: none;
}
/* El reset del sitio trae ul[class]{padding:0}, y ese selector de atributo pesa
   más que una sola clase: por eso el padding de la regla de arriba se ignoraba y
   los iconos quedaban pegados al borde inferior de la foto. Con .diapo delante
   la regla gana, y de paso se alinea con el mismo margen lateral del resto. */
.diapo .diapo__pilares{
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  padding-top: 22px;
  padding-bottom: 52px;
}
.diapo__pilares li{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .55rem;
  text-align: center;
  padding: 0 .6rem;
  border-left: 1px solid rgba(var(--crema-rgb), .18);
}
.diapo__pilares li{ padding-block: 6px; }   /* aire dentro del separador */
.diapo__pilares li:first-child{ border-left: 0; }
.diapo.es-activa .diapo__pilares{
  opacity: 1;
  transition: opacity 500ms var(--ease-out) 260ms;   /* entra después del cruce */
}
.diapo__pilares svg{ width: 30px; height: 30px; color: var(--oro); }
.diapo__pilares span{
  font-family: var(--fuente-mono);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(var(--crema-rgb), .88);
}

/* --- Tablet --- */
@media (max-width: 899px){
  .diapo__pilares{ grid-template-columns: repeat(2, 1fr); row-gap: 1.4rem; }
  .diapo .diapo__pilares{ padding-top: 18px; padding-bottom: 40px; }
  .diapo__pilares li:nth-child(3){ border-left: 0; }
}

/* --- Móvil --- */
@media (max-width: 719px){
  .diapo{ align-items: flex-end; }
  .diapo__contenido{ padding-bottom: 236px; }
  .diapo__texto{ max-width: 100%; }
  .diapo__scrim{
    background: linear-gradient(to bottom,
      rgba(11,11,11,.62) 0%,
      rgba(11,11,11,.30) 26%,
      rgba(11,11,11,.62) 58%,
      rgba(11,11,11,.94) 100%);
  }
  .boton-cta{ width: 100%; justify-content: center; padding: 1.1rem 1.4rem; }
  .cta-apoyo{ text-align: center; }
  .diapo .diapo__pilares{ padding-top: 16px; padding-bottom: 34px; }
  .diapo__pilares svg{ width: 24px; height: 24px; }
  .diapo__pilares span{ font-size: .58rem; letter-spacing: .14em; }
}

/* --- Quien pide menos movimiento: sin zoom ni desplazamientos --- */
@media (prefers-reduced-motion: reduce){
  .diapo, .diapo__media img, .diapo__texto > *{ transition: none !important; }
  .diapo__media img{ transform: none !important; }
}

/* ==========================================================================
   EL VEHÍCULO — video en loop con vaivén
   Reemplaza al pin + scrub. El video ya no depende del scroll: corre solo, en
   cámara lenta, con un acercamiento y alejamiento continuo (estilo boomerang).
   El vaivén se hace con transform:scale, que corre en el compositor: no vuelve
   a decodificar ni a buscar fotogramas, así que no se entrecorta.
   ========================================================================== */
.vehiculo-loop{
  position: relative;
  height: 100svh;          /* antes eran 200vh por el recorrido del scrub */
  background: var(--negro);
}
.vehiculo-loop__marco{
  position: relative;      /* ya no es sticky */
  top: auto;
  height: 100%;
}
.vehiculo-loop__video{
  transform-origin: 52% 58%;   /* el vaivén se centra en el frente del vehículo */
  animation: vaiven 17s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes vaiven{
  from{ transform: scale(1.02); }
  to  { transform: scale(1.20); }
}
@media (prefers-reduced-motion: reduce){
  .vehiculo-loop__video{ animation: none; transform: scale(1.02); }
}

/* --- Pantallas bajas (portátil en ventana pequeña, tablet en horizontal) ---
   El texto va centrado y los pilares están anclados abajo. Cuando la pantalla
   es baja, el bloque de texto crece hasta invadirlos. Aquí se le reserva el
   sitio que ocupa la fila (medido: 142px a cuatro columnas) más un respiro. */
@media (max-height: 700px) and (min-width: 720px){
  .diapo{ align-items: flex-start; }
  .diapo__contenido{ padding-top: 88px; }
  .diapo__titulo{ font-size: clamp(2.2rem, 5.2vw, 3.6rem); }
  .diapo__lema{ margin-bottom: var(--space-md); }
  .diapo .diapo__pilares{ padding-top: 16px; padding-bottom: 30px; }
}

/* ==========================================================================
   DESTINOS — tarjetas en la portada
   ========================================================================== */
.destinos{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--linea);        /* el gap deja ver la línea: rejilla fina */
  border: 1px solid var(--linea);
  margin-top: var(--space-xl);
}
.destino-tarjeta{
  display: flex;
  flex-direction: column;
  background: var(--crema);
  transition: background var(--dur-base) var(--ease-out);
}
.destino-tarjeta__foto{
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.destino-tarjeta__foto img{
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 900ms var(--ease-out);
}
.destino-tarjeta:hover .destino-tarjeta__foto img{ transform: scale(1.05); }
.destino-tarjeta__cuerpo{
  display: flex;
  flex-direction: column;
  gap: .7rem;
  padding: var(--space-md) var(--space-md) var(--space-lg);
  flex: 1;
}
.destino-tarjeta__etiqueta{
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
}
.destino-tarjeta__nombre{
  font-family: var(--fuente-display);
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  line-height: 1.15;
  color: var(--marfil);
}
.destino-tarjeta__texto{
  color: var(--acero);
  line-height: 1.7;
  flex: 1;
}
.destino-tarjeta__ver{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: var(--space-xs);
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--verde);
}
.destino-tarjeta__ver svg{ width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.destino-tarjeta:hover .destino-tarjeta__ver svg{ transform: translateX(5px); }

@media (max-width: 899px){
  .destinos{ grid-template-columns: 1fr; }
  .destino-tarjeta__foto{ aspect-ratio: 16 / 9; }
}

/* ==========================================================================
   PÁGINAS DE DESTINO (/antigua, /atitlan, /el-paredon)
   ========================================================================== */
.destino-hero{
  position: relative;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  background: var(--negro);
  overflow: hidden;
}
.destino-hero__media{ position: absolute; inset: 0; z-index: 0; }
.destino-hero__media img{
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 60%;
}
.destino-hero__scrim{
  position: absolute; inset: 0; z-index: 1;
  /* Aligerado: con el velo anterior el texto quedaba en 16.6:1, muy por encima
     del 4.5:1 que exige WCAG, y apagaba fotos que valen por su luz. Con estos
     valores el texto sigue sobre 8:1 en las tres portadas. */
  background:
    linear-gradient(to right, rgba(11,11,11,.74) 0%, rgba(11,11,11,.44) 48%, rgba(11,11,11,.08) 100%),
    linear-gradient(to bottom, rgba(11,11,11,.5) 0%, rgba(11,11,11,0) 38%, rgba(11,11,11,.74) 100%);
}
.destino-hero__contenido{
  position: relative; z-index: 2;
  padding-top: calc(var(--nav-h) + var(--space-xl));
  padding-bottom: var(--space-2xl);
  max-width: 760px;
  margin-inline: 0;
}
.miga{
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(var(--crema-rgb), .6);
  margin-bottom: var(--space-md);
}
.miga a{ color: var(--oro); }
.miga a:hover{ text-decoration: underline; }
.destino-hero__titulo{
  font-family: var(--fuente-display);
  font-weight: 400;
  text-transform: uppercase;
  line-height: .98;
  font-size: clamp(2.6rem, 6.6vw, 5rem);
  color: var(--crema);
  margin: 0 0 var(--space-md);
}
.destino-hero__lede{
  font-family: var(--fuente-display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  line-height: 1.5;
  color: rgba(var(--crema-rgb), .92);
  max-width: 34ch;
  margin: 0 0 var(--space-lg);
}
.destino-hero .cta-apoyo{ margin-top: .9rem; }
.destino-hero .cta-apoyo a{ color: var(--oro); }

/* --- Intro + ficha de datos --- */
.destino-intro{
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.destino-intro__datos{
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
.dato{
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  padding: var(--space-sm) 0;
  border-bottom: 1px solid var(--linea);
}
.dato__clave{
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--acero);
}
.dato__valor{
  font-family: var(--fuente-display);
  font-size: 1.15rem;
  color: var(--marfil);
}

/* --- Qué incluye --- */
.incluye{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: var(--space-xl);
}
.incluye__item{
  background: var(--negro);
  padding: var(--space-lg) var(--space-md);
}
.seccion--clara .incluye__item{ background: var(--crema); }
.incluye__item h3{
  font-size: 1.15rem;
  margin-bottom: .6rem;
  color: var(--marfil);
}
.incluye__item p{ color: var(--acero); line-height: 1.7; margin: 0; }

/* --- La ruta --- */
.ruta{
  list-style: none;
  margin: var(--space-xl) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--linea);
}
.ruta__paso{
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--linea);
}
.ruta__numero{
  font-family: var(--fuente-mono);
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--oro);
  padding-top: .35rem;
}
.ruta__paso h3{ font-size: 1.25rem; margin-bottom: .45rem; color: var(--marfil); }
.ruta__paso p{ color: var(--acero); line-height: 1.7; margin: 0; max-width: 60ch; }

/* --- Atajos a los otros destinos ---
   Cada uno es una tarjeta con la foto del destino, su dato clave y el nombre
   dentro del propio verbo: "Explore Lake Atitlán". La foto se revela al pasar
   por encima, así la tarjeta en reposo no compite con el contenido de arriba. */
.atajos{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.atajo{
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 132px;
  padding: var(--space-md);
  overflow: hidden;
  border: 1px solid var(--linea);
  background: var(--crema);
  transition: border-color var(--dur-base) var(--ease-out);
}
.seccion--oscura .atajo{ background: var(--negro); }
.atajo__foto{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}
.atajo__foto img{
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.08);
  transition: transform 1200ms var(--ease-out);
}
/* Velo para que el texto siga legible cuando la foto aparece */
.atajo__foto::after{
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to right, rgba(11,11,11,.88) 0%, rgba(11,11,11,.55) 100%);
}
.atajo:hover .atajo__foto{ opacity: 1; }
.atajo:hover .atajo__foto img{ transform: scale(1); }
.atajo:hover{ border-color: var(--oro); }

.atajo__cuerpo{ position: relative; z-index: 1; flex: 1; display: block; }
.atajo__meta{
  display: block;
  font-family: var(--fuente-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--oro);
  margin-bottom: .5rem;
  transition: color var(--dur-base) var(--ease-out);
}
.seccion--clara .atajo__meta{ color: var(--verde); }
.seccion--clara .atajo:hover .atajo__meta{ color: var(--oro); }   /* sobre la foto sí rinde */
.atajo__nombre{
  display: block;
  font-family: var(--fuente-display);
  font-size: clamp(1.25rem, 2.4vw, 1.7rem);
  line-height: 1.15;
  color: var(--marfil);
  transition: color var(--dur-base) var(--ease-out);
}
.seccion--clara .atajo:hover .atajo__nombre,
.seccion--clara .atajo:hover .atajo__meta ~ .atajo__nombre{ color: var(--crema); }
.atajo__flecha{
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex-shrink: 0;
  border: 1px solid var(--linea);
  border-radius: 50%;
  color: var(--oro);
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.atajo__flecha svg{ width: 18px; height: 18px; }
.atajo:hover .atajo__flecha{
  background: var(--oro);
  border-color: var(--oro);
  color: var(--negro);
  transform: translateX(4px);
}

@media (max-width: 719px){
  .atajos{ grid-template-columns: 1fr; gap: var(--space-sm); }
  .atajo{ min-height: 108px; }
  /* En táctil no hay hover: la foto se muestra siempre, atenuada */
  .atajo__foto{ opacity: 1; }
  .atajo__foto::after{ background: linear-gradient(to right, rgba(11,11,11,.9) 0%, rgba(11,11,11,.6) 100%); }
  .atajo__nombre, .seccion--clara .atajo__nombre{ color: var(--crema); }
  .seccion--clara .atajo__meta{ color: var(--oro); }
}

/* --- CTA final de la página de destino --- */
.destino-cta__interior{ text-align: center; max-width: 680px; }
.destino-cta__interior .parrafo{ margin: var(--space-md) auto var(--space-lg); }
.destino-cta__interior .cta-apoyo{ margin-top: var(--space-md); }
.destino-cta__interior .cta-apoyo a{ color: var(--oro); }

@media (max-width: 899px){
  .destino-intro{ grid-template-columns: 1fr; gap: var(--space-xl); }
  .incluye, .otros-destinos{ grid-template-columns: 1fr; }
}
@media (max-width: 719px){
  .destino-hero{ min-height: 72svh; }
  .destino-hero__contenido{ padding-bottom: var(--space-xl); }
  .ruta__paso{ grid-template-columns: 48px 1fr; gap: var(--space-sm); }
  .boton-hero{ width: 100%; }
}

/* --- Tira de fotos del destino --- */
.tira{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}
.tira__foto{ margin: 0; }
.tira__foto img{
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--linea);
}
.tira__foto figcaption{
  margin-top: .8rem;
  font-family: var(--fuente-mono);
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acero);
}
@media (max-width: 719px){
  .tira{ grid-template-columns: 1fr; gap: var(--space-lg); }
}
/* Una sola foto: ocupa todo el ancho en lugar de media rejilla */
.tira--una{ grid-template-columns: 1fr; }
.tira--una .tira__foto img{ aspect-ratio: 16 / 9; }

/* ==========================================================================
   TARIFAS
   La cifra es el elemento con más peso visual de la página después del titular:
   serif de display en grande, con el símbolo de moneda reducido y elevado.
   ========================================================================== */
.tarifas{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  margin-top: var(--space-xl);
}
.tarifa{
  background: var(--crema);
  padding: var(--space-lg) var(--space-md) var(--space-xl);
  display: flex;
  flex-direction: column;
}
.seccion--oscura .tarifa{ background: var(--negro); }
.tarifa--principal{ position: relative; }
/* Filete de oro que distingue la tarifa del traslado frente al paquete */
.tarifa--principal::before{
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--oro);
}
.tarifa__ruta{
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--marfil);
  margin: 0;
}
.tarifa__tipo{
  font-family: var(--fuente-mono);
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--oro);
  margin: .45rem 0 0;
}
.tarifa__cifra{
  font-family: var(--fuente-display);
  font-weight: 400;
  font-size: clamp(3.2rem, 7vw, 5rem);
  line-height: 1;
  color: var(--marfil);
  margin: var(--space-md) 0 0;
  display: flex;
  align-items: flex-start;
  gap: .12em;
}
.tarifa__cifra span{
  font-size: .42em;
  color: var(--oro);
  margin-top: .22em;
}
.tarifa__cifra--consulta{
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-style: italic;
  color: var(--acero);
  align-items: baseline;
}
.tarifa__pie{
  color: var(--acero);
  font-size: .92rem;
  line-height: 1.65;
  margin: var(--space-sm) 0 0;
  max-width: 40ch;
}

/* --- Lo que incluye toda tarifa --- */
.beneficios{
  list-style: none;
  margin: var(--space-lg) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm) var(--space-lg);
}
.beneficios li{
  position: relative;
  padding-left: 1.6rem;
  font-family: var(--fuente-mono);
  font-size: .76rem;
  letter-spacing: .08em;
  color: var(--acero);
}
/* Palomita en oro dibujada con bordes: sin icono extra que cargar */
.beneficios li::before{
  content: '';
  position: absolute;
  left: 0; top: .34em;
  width: 9px; height: 5px;
  border-left: 1.5px solid var(--oro);
  border-bottom: 1.5px solid var(--oro);
  transform: rotate(-45deg);
}

@media (max-width: 899px){
  .tarifas{ grid-template-columns: 1fr; }
  .beneficios{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 519px){
  .beneficios{ grid-template-columns: 1fr; }
}

/* --- Precio dentro de la tarjeta de destino --- */
.destino-tarjeta__meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
}
.destino-tarjeta__precio{
  font-family: var(--fuente-display);
  font-size: 1.35rem;
  color: var(--marfil);
  white-space: nowrap;
}
.destino-tarjeta__precio small{
  font-family: var(--fuente-mono);
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
  margin-left: .25rem;
}
.tarifas--portada{ margin-top: var(--space-xl); }
.tarifas__nota{
  margin: var(--space-lg) 0 0;
  font-family: var(--fuente-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.7;
  color: var(--acero);
  max-width: 70ch;
}

/* ==========================================================================
   LEGIBILIDAD DEL ORO SOBRE FONDO CLARO
   El oro (#C5A65C) rinde 8.42:1 sobre el negro, pero solo 2.24:1 sobre el
   crema: por debajo del 4.5:1 que exige WCAG AA para texto normal. En las
   secciones claras el texto de acento pasa al verde de marca (11.67:1), que
   sigue estando dentro de la paleta. El oro se conserva como acento en los
   elementos puramente decorativos y en todas las secciones oscuras.
   ========================================================================== */
.seccion--clara .eyebrow,
.seccion--clara .tarifa__tipo,
.seccion--clara .tarifa__cifra span,
.seccion--clara .destino-tarjeta__precio small,
.seccion--clara .tira__foto figcaption,
.seccion--clara .ruta__numero{
  color: var(--verde);
}
.seccion--clara .eyebrow::before{ background: var(--verde); }
/* La palomita de los beneficios es un elemento gráfico informativo: 3:1 mínimo */
.seccion--clara .beneficios li::before{
  border-left-color: var(--verde);
  border-bottom-color: var(--verde);
}
/* Tres fotos: rejilla de tres, y en tablet baja a dos con la última a lo ancho */
.tira--tres{ grid-template-columns: repeat(3, 1fr); }
@media (max-width: 899px){
  .tira--tres{ grid-template-columns: repeat(2, 1fr); }
  .tira--tres .tira__foto:last-child{ grid-column: 1 / -1; }
  .tira--tres .tira__foto:last-child img{ aspect-ratio: 16 / 9; }
}
@media (max-width: 719px){
  .tira--tres{ grid-template-columns: 1fr; }
  .tira--tres .tira__foto:last-child img{ aspect-ratio: 4 / 5; }
}

/* Una sola tarifa: ocupa todo el ancho en vez de media rejilla */
.tarifas--una{ grid-template-columns: 1fr; }

/* ==========================================================================
   TEASE — el paquete de 12 horas
   Deliberadamente sin casilla de precio: al ir junto a una tarifa con cifra,
   un hueco vacío se leía como un precio pendiente. Aquí es una invitación.
   ========================================================================== */
.tease{
  margin-top: var(--space-lg);
  padding: var(--space-lg) var(--space-md);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--oro);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .7rem;
}
.tease__titulo{
  font-family: var(--fuente-display);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
  color: var(--marfil);
  margin: 0;
}
.tease__texto{
  color: var(--acero);
  line-height: 1.75;
  max-width: 62ch;
  margin: 0;
}
.tease__enlace{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .3rem;
  font-family: var(--fuente-mono);
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--oro);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur-fast) var(--ease-out);
}
.seccion--clara .tease__enlace{ color: var(--verde); }   /* el oro no rinde sobre crema */
.tease__enlace svg{ width: 15px; height: 15px; transition: transform var(--dur-fast) var(--ease-out); }
.tease__enlace:hover{ border-bottom-color: currentColor; }
.tease__enlace:hover svg{ transform: translateX(4px); }

/* ==========================================================================
   ACCESO A /pay
   La página de pago está fuera del menú y fuera de buscadores, pero el
   cliente que ya acordó su viaje necesita poder llegar. Estos son los dos
   accesos: aquí, al cerrar la reservación, y un enlace en el pie.
   ========================================================================== */
.pago-cta{
  max-width: 980px;
  margin: var(--space-lg) auto 0;
  padding: var(--space-md);
  border: 1px solid var(--linea);
  border-left: 2px solid var(--verde);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.pago-cta__texto{ flex: 1; min-width: 240px; }
.pago-cta__label{
  margin: 0 0 .3rem;
  font-family: var(--fuente-display);
  font-size: 1.25rem;
  color: var(--marfil);
}
.pago-cta__nota{
  margin: 0;
  font-size: .86rem;
  line-height: 1.65;
  color: var(--acero);
  max-width: 52ch;
}
.boton-pagar{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 48px;
  padding: .9rem 1.6rem;
  background: var(--verde);
  color: #FFFFFF;
  border: 1px solid var(--verde);
  border-radius: var(--radius);
  font-family: var(--fuente-cuerpo);
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.boton-pagar svg{ width: 17px; height: 17px; }
.boton-pagar svg:last-child{ transition: transform var(--dur-fast) var(--ease-out); }
.boton-pagar:hover{ background: var(--oro); border-color: var(--oro); color: var(--negro); }
.boton-pagar:hover svg:last-child{ transform: translateX(4px); }

.cta-apoyo--pago a{ color: var(--oro); border-bottom: 1px solid currentColor; }
.seccion--clara .cta-apoyo--pago a{ color: var(--verde); }

@media (max-width: 599px){
  .pago-cta{ flex-direction: column; align-items: stretch; }
  .boton-pagar{ width: 100%; }
}