/* ==========================================================================
   Tirando Ruta · Transporte privado con conductor en Medellín y Antioquia
   Identidad: carretera y paisaje. Verde de montaña, papel cálido como la
   neblina de la mañana y el naranja del atardecer. Motivo: curvas de nivel.
   ========================================================================== */

/* Plus Jakarta Sans guardada con la página (licencia SIL OFL 1.1 en assets/fonts/).
   Letra variable, pesos 400 a 800. */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal; font-weight: 400 800; font-display: swap;
  src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Mientras llega la letra se usa Arial ajustada a sus medidas: el texto no salta */
@font-face {
  font-family: 'Plus Jakarta respaldo';
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  font-weight: 100 500;
  size-adjust: 103.6%; ascent-override: 100.4%; descent-override: 21.2%; line-gap-override: 0%;
}
@font-face {
  font-family: 'Plus Jakarta respaldo';
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  font-weight: 501 900;
  size-adjust: 99%; ascent-override: 105%; descent-override: 22.2%; line-gap-override: 0%;
}

:root {
  color-scheme: light;

  /* Color */
  --papel: #f4f0e6;          /* papel cálido, como la neblina de la mañana */
  --papel-2: #ebe5d7;
  --tarjeta: #fbf9f3;
  --tinta: #15211c;          /* verde casi negro */
  --tinta-2: #45514a;
  --tinta-3: #5f6a62;
  --linea: rgba(21, 33, 28, 0.14);
  --linea-fuerte: rgba(21, 33, 28, 0.26);
  --pino: #11261f;           /* verde de montaña */
  --pino-2: #173229;
  --pino-rgb: 17, 38, 31;
  --claro: #f6f1e6;
  --claro-2: #c9cfc5;
  --claro-3: #9fab9f;
  --sol: #f08a3c;            /* naranja del atardecer */
  --sol-hover: #ff9c52;
  --sol-tinta: #b14f12;      /* el naranja para texto sobre papel (6,5:1) */

  /* Tipografía */
  --letra: 'Plus Jakarta Sans', 'Plus Jakarta respaldo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Medidas */
  --contenedor: 1240px;
  --margen: clamp(16px, 4vw, 48px);
  --espacio: clamp(72px, 9vw, 136px);
  --radio: 28px;
  --cabecera: 72px;
  --salida: cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--cabecera) + 8px); }
body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { font-weight: 800; letter-spacing: -0.03em; text-wrap: balance; }
p { text-wrap: pretty; }
ol, ul { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--sol); outline-offset: 3px; border-radius: 6px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.contenedor { width: 100%; max-width: calc(var(--contenedor) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen); }

.saltar {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 16px; border-radius: 999px;
  background: var(--sol); color: var(--tinta); font-weight: 700; text-decoration: none;
  transform: translateY(-160%);
}
.saltar:focus { transform: none; }

/* --------------------------------------------------------------------------
   Piezas comunes
   -------------------------------------------------------------------------- */

.etiqueta {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--sol-tinta);
}
.etiqueta::before { content: ''; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.etiqueta--clara { color: var(--sol); }

.titulo { font-size: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem); line-height: 1.02; letter-spacing: -0.035em; }
.titulo--claro { color: var(--claro); }

.seccion-cabeza { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.seccion-cabeza__texto { color: var(--tinta-2); max-width: 520px; }

.sol { color: var(--sol-tinta); }

.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 24px;
  border-radius: 999px; border: 0;
  font: inherit; font-size: 1rem; font-weight: 700; letter-spacing: -0.005em; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.25s var(--salida), box-shadow 0.25s;
  -webkit-tap-highlight-color: transparent;
}
.boton svg { width: 20px; height: 20px; flex: none; }
.boton:active { transform: scale(0.97); }
.boton--sol { background: var(--sol); color: var(--tinta); box-shadow: 0 10px 30px -12px rgba(240, 138, 60, 0.7); }
.boton--claro { color: var(--claro); box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, 0.45); }
.boton--chico { min-height: 42px; padding: 0 18px; font-size: 0.92rem; }
.boton--chico svg { width: 18px; height: 18px; }
.boton--grande { min-height: 62px; padding: 0 32px; font-size: 1.1rem; }
@media (hover: hover) {
  .boton--sol:hover { background: var(--sol-hover); }
  .boton--claro:hover { background: rgba(246, 241, 230, 0.1); }
}

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--claro); text-decoration: none; }
.logo__marca { width: 36px; height: 36px; flex: none; }
.logo__nombre { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.045em; line-height: 1; padding-bottom: 2px; }

/* Grano fotográfico sobre las escenas 3D y las bandas oscuras: ruido gris, quieto y muy
   tenue, encima del 3D y debajo de los textos (la misma técnica del sitio de Once Once).
   Suaviza los degradados del cielo, que en algunas pantallas se ven en escalones */
.portada::after,
.vitrina__escenario::after,
.destinos::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.38; mix-blend-mode: soft-light;
}
.portada::after, .destinos::after { z-index: -1; }
/* En celulares y tabletas (pantallas táctiles), sin grano sobre el 3D: mezclarlo con una
   escena que cambia en cada cuadro cuesta, y en esas pantallas no hace falta */
@media (hover: none) { .portada::after, .vitrina__escenario::after { display: none; } }

/* Aparición al bajar */
.js .revelar { opacity: 0; transform: translateY(22px); transition: opacity 0.8s var(--salida), transform 0.8s var(--salida); }
.js .revelar.is-visible, .js.sin-revelado .revelar { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
  position: fixed; inset: 0 0 auto; z-index: 50;
  padding-top: env(safe-area-inset-top);
  transition: background-color 0.35s, box-shadow 0.35s;
}
/* Sin desenfoque de fondo: encima de la escena 3D, que cambia en cada cuadro, obligaba a
   desenfocar de nuevo 60 veces por segundo (caro en celular). Casi opaca, se ve igual */
.cabecera.is-solida {
  background: rgba(var(--pino-rgb), 0.95);
  box-shadow: 0 1px 0 rgba(246, 241, 230, 0.08);
}
.cabecera__fila {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: var(--cabecera);
  max-width: calc(var(--contenedor) + var(--margen) * 2); margin-inline: auto; padding-inline: var(--margen);
}
.cabecera__nav { display: none; gap: 30px; }
.cabecera__nav a { color: var(--claro-2); font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: color 0.2s; }
.cabecera__nav a:hover { color: var(--claro); }
@media (min-width: 960px) { .cabecera__nav { display: flex; } }

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.portada {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100vh; min-height: 100svh;
  padding-bottom: clamp(40px, 9vh, 104px);
  color: var(--claro);
  background: linear-gradient(180deg, #23404f 0%, #4f6673 30%, #b9927f 56%, #f0b483 70%, #f6c991 76%);
  overflow: hidden;
}
@media (min-height: 1000px) and (min-width: 900px) { .portada { min-height: 860px; height: 86svh; } }
.portada__fondo { position: absolute; inset: 0; z-index: -3; }
.portada__montes { position: absolute; inset: auto 0 0; width: 100%; height: 62%; }
.portada__escena { position: absolute; inset: 0; z-index: -2; }
.portada__escena canvas, .vitrina__escena canvas { width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; }
.portada__escena canvas.is-lista, .vitrina__escena canvas.is-lista { opacity: 1; }
/* En celular, detrás del texto el velo es casi sólido: así las líneas de la vía y las
   casas no se cruzan con las letras. Se abre arriba, donde va el carro */
.portada__velo {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(0deg, rgba(var(--pino-rgb), 0.95) 0%, rgba(var(--pino-rgb), 0.88) 44%, rgba(var(--pino-rgb), 0.6) 57%, rgba(var(--pino-rgb), 0) 70%),
    linear-gradient(180deg, rgba(var(--pino-rgb), 0.45) 0%, rgba(var(--pino-rgb), 0) 18%);
}
@media (min-width: 900px) {
  .portada__velo {
    background:
      linear-gradient(90deg, rgba(var(--pino-rgb), 0.7) 0%, rgba(var(--pino-rgb), 0.3) 34%, rgba(var(--pino-rgb), 0) 56%),
      linear-gradient(0deg, rgba(var(--pino-rgb), 0.75) 0%, rgba(var(--pino-rgb), 0) 38%),
      linear-gradient(180deg, rgba(var(--pino-rgb), 0.45) 0%, rgba(var(--pino-rgb), 0) 18%);
  }
}
.portada__texto { display: grid; gap: 20px; justify-items: start; }
.portada__titulo {
  max-width: 11ch;
  font-size: clamp(2.75rem, 1.5rem + 5.6vw, 6.5rem);
  line-height: 0.95; letter-spacing: -0.045em;
  text-shadow: 0 2px 30px rgba(var(--pino-rgb), 0.35);
}
.portada__titulo em { font-style: normal; color: var(--sol); }
.portada__lead { max-width: 40ch; font-size: clamp(1.05rem, 0.95rem + 0.45vw, 1.3rem); line-height: 1.5; color: rgba(246, 241, 230, 0.92); text-shadow: 0 1px 14px rgba(var(--pino-rgb), 0.55); }
.portada__botones { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
/* Tres datos cortos bajo los botones: lo que hace distinto el servicio, sin relleno */
.portada__datos {
  display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 2px 0 0; padding: 0; list-style: none;
  font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.96rem); font-weight: 600; color: rgba(246, 241, 230, 0.88);
}
.portada__datos li { display: inline-flex; align-items: center; gap: 8px; text-shadow: 0 1px 12px rgba(var(--pino-rgb), 0.6); }
.portada__datos svg { width: 18px; height: 18px; flex: none; color: var(--sol); }
@media (max-width: 899px) { .portada__datos { gap: 6px 16px; } .portada__datos svg { width: 16px; height: 16px; } }
/* En celular, el texto ocupa menos alto para que el carro tenga su espacio arriba: la
   etiqueta en una línea (el titular ya dice «Antioquia») y los dos botones en una fila */
@media (max-width: 599px) {
  .portada__zona { display: none; }
  .portada__texto { gap: 16px; }
  .portada__botones { gap: 10px; margin-top: 4px; }
  .portada__botones .boton { min-height: 50px; padding-inline: 16px; gap: 8px; font-size: 0.94rem; }
}
@media (max-width: 400px) { .portada__botones .boton--sol svg { display: none; } }
.portada__bajar {
  position: absolute; right: var(--margen); bottom: clamp(40px, 9vh, 104px);
  display: none; width: 30px; height: 50px; border-radius: 999px;
  box-shadow: inset 0 0 0 1.5px rgba(246, 241, 230, 0.5);
}
.portada__bajar span { position: absolute; left: 50%; top: 10px; width: 4px; height: 9px; margin-left: -2px; border-radius: 4px; background: var(--claro); animation: bajar 2.2s var(--salida) infinite; }
@keyframes bajar { 0% { opacity: 0; transform: translateY(-4px); } 30% { opacity: 1; } 80%, 100% { opacity: 0; transform: translateY(16px); } }
@media (min-width: 900px) { .portada__bajar { display: block; } }
@media (max-width: 380px) {
  .portada__botones .boton { width: 100%; }
}

/* --------------------------------------------------------------------------
   Qué es
   -------------------------------------------------------------------------- */

.intro { padding-block: var(--espacio); }
.intro__grid { display: grid; gap: 28px; }
.intro__frase { max-width: 20em; font-size: clamp(1.75rem, 1.15rem + 2.7vw, 3.4rem); line-height: 1.1; letter-spacing: -0.03em; font-weight: 750; }
.intro__texto { max-width: 46ch; color: var(--tinta-2); font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); }
.datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; margin-top: 16px; }
.datos li { display: grid; gap: 2px; padding: 18px 0; border-top: 1.5px solid var(--linea-fuerte); }
.datos strong { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.35rem); font-weight: 750; letter-spacing: -0.02em; line-height: 1.2; }
.datos span { color: var(--tinta-3); font-size: 0.95rem; }
@media (min-width: 900px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .intro__grid .etiqueta, .intro__frase { grid-column: 1 / -1; }
  /* El texto va a la izquierda, debajo del título (a la derecha quedaba un hueco raro) */
  .intro__texto { grid-column: 1 / -1; max-width: 60ch; }
  .datos { grid-column: 1 / -1; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; margin-top: 32px; }
}

/* --------------------------------------------------------------------------
   Servicios
   -------------------------------------------------------------------------- */

.servicios { padding-block: var(--espacio); background: var(--papel-2); }
.servicios__cabeza { display: grid; gap: 14px; margin-bottom: clamp(24px, 3.5vw, 44px); }
.servicios__cabeza .seccion-cabeza { margin-bottom: 0; }
.servicios__intro { max-width: 34ch; color: var(--tinta-2); }
@media (min-width: 900px) { .servicios__cabeza { grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 48px; } }

/* Tarjetas compactas: en celular y tableta, el ícono a la izquierda; en computador,
   cuatro en una fila con el ícono arriba */
.servicios__lista { display: grid; gap: 12px; }
@media (min-width: 640px) { .servicios__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .servicios__lista { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.servicio {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start;
  padding: 20px 20px 18px;
  border-radius: 20px;
  background: var(--tarjeta);
  box-shadow: 0 0 0 1px var(--linea);
  transition: transform 0.4s var(--salida), box-shadow 0.4s var(--salida), opacity 0.8s var(--salida);
}
.servicio > * { grid-column: 2; }
.servicio > .servicio__icono { grid-column: 1; grid-row: 1 / span 3; }
.servicio__num {
  position: absolute; top: 18px; right: 20px;
  font-size: 0.78rem; font-weight: 800; color: var(--sol-tinta); font-variant-numeric: tabular-nums; letter-spacing: 0.06em;
}
.servicio__icono { width: 44px; height: 44px; padding: 11px; border-radius: 50%; background: var(--pino); color: var(--sol); }
.servicio h3 { padding-right: 28px; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.15; letter-spacing: -0.02em; }
.servicio p { color: var(--tinta-2); font-size: 0.95rem; line-height: 1.5; }
.servicio__enlace {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  margin-top: 4px;
  font-size: 0.92rem; font-weight: 700; text-decoration: none; color: var(--tinta);
}
.servicio__enlace svg { width: 18px; height: 18px; color: var(--sol-tinta); transition: transform 0.3s var(--salida); }
/* Toda la tarjeta se puede tocar */
.servicio__enlace::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
@media (min-width: 1100px) {
  .servicio { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; row-gap: 8px; padding: 22px 22px 20px; }
  .servicio > *, .servicio > .servicio__icono { grid-column: 1; grid-row: auto; }
  .servicio > .servicio__icono { margin-bottom: 6px; }
  .servicio h3 { padding-right: 0; }
  .servicio__enlace { padding-top: 4px; align-self: end; }
}
@media (hover: hover) {
  .servicio:hover { transform: translateY(-3px); box-shadow: 0 0 0 1px var(--linea-fuerte), 0 20px 40px -26px rgba(21, 33, 28, 0.45); }
  .servicio:hover .servicio__enlace svg { transform: translateX(4px); }
}

/* Acompañamiento de pacientes: franja destacada, del mismo tamaño de letra que las otras
   tarjetas. En celular, el ícono a la izquierda (como las demás), los pasos de a dos y el
   botón abajo; en computador, el texto arriba y los cuatro pasos en una línea con el botón */
.acompanamiento {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 16px;
  grid-template-areas: "icono texto" "pasos pasos" "boton boton";
  margin-top: 14px;
  padding: 20px 20px 20px;
  border-radius: 20px;
  background: radial-gradient(60% 120% at 100% 0%, rgba(240, 138, 60, 0.14), rgba(240, 138, 60, 0) 60%), var(--pino);
  color: var(--claro);
}
.acompanamiento > .servicio__icono { grid-area: icono; background: rgba(246, 241, 230, 0.08); }
.acompanamiento > .servicio__num { color: var(--sol); }
.acompanamiento__texto { grid-area: texto; display: grid; gap: 6px; align-content: start; padding-right: 22px; }
.acompanamiento .etiqueta { font-size: 0.7rem; }
@media (max-width: 639px) { .acompanamiento .etiqueta::before { display: none; } } /* sin la rayita, en dos líneas y no en tres */
.acompanamiento h3 { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.15; letter-spacing: -0.02em; }
.acompanamiento__texto > p { color: var(--claro-2); font-size: 0.95rem; line-height: 1.5; max-width: 70ch; }
.acompanamiento__pasos { grid-area: pasos; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.acompanamiento__pasos li {
  display: flex; align-items: center; gap: 10px;
  font-size: 0.9rem; font-weight: 700; line-height: 1.25; color: var(--claro);
}
.acompanamiento__pasos span {
  display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--sol); color: var(--tinta); font-size: 0.8rem; font-weight: 800;
}
.acompanamiento > .boton { grid-area: boton; justify-self: start; max-width: 100%; white-space: normal; text-align: center; }
@media (max-width: 380px) { .acompanamiento > .boton { justify-self: stretch; } }
@media (min-width: 760px) { .acompanamiento__pasos { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
  .acompanamiento {
    grid-template-columns: 44px minmax(0, 1fr) auto; column-gap: 20px; align-items: center;
    grid-template-areas: "icono texto boton" ". pasos pasos";   /* hasta 1299 px, el botón al lado del texto */
    padding: 22px 26px 22px 22px;
  }
  .acompanamiento > .servicio__icono { align-self: start; }
  .acompanamiento > .boton { align-self: end; }
  .acompanamiento__texto { padding-right: 40px; }
  .acompanamiento__pasos { grid-template-columns: repeat(4, auto); justify-content: start; padding-block: 2px; } /* cada paso, a su ancho (en una línea si cabe) */
  .acompanamiento__pasos li + li { padding-left: 14px; box-shadow: inset 1px 0 0 rgba(246, 241, 230, 0.14); }
}
@media (min-width: 1300px) {
  /* Con espacio, el botón baja a la línea de los pasos y la franja queda más baja */
  .acompanamiento { grid-template-areas: "icono texto texto" ". pasos boton"; }
  .acompanamiento > .boton { align-self: center; }
}

/* --------------------------------------------------------------------------
   La Duster: la escena queda fija y los textos se reemplazan en el mismo lugar,
   con un fundido, según lo que hayas bajado (cuatro pantallas de recorrido)
   -------------------------------------------------------------------------- */

.vitrina { position: relative; background: var(--pino); color: var(--claro); }
.js .vitrina { height: 400vh; height: 400svh; }
.vitrina__escenario {
  position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden;
  background:
    radial-gradient(90% 60% at 60% 70%, rgba(240, 138, 60, 0.22), rgba(240, 138, 60, 0) 70%),
    linear-gradient(180deg, #1d3a44 0%, #3f5a5c 45%, #c99a78 75%, #22382d 76%, #11261f 100%);
}
.js .vitrina__escenario { position: sticky; top: 0; height: 100vh; height: 100svh; }
.vitrina__escena { position: absolute; inset: 0; }
.vitrina__velo {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(var(--pino-rgb), 0.85) 0%, rgba(var(--pino-rgb), 0) 40%),
    linear-gradient(180deg, rgba(var(--pino-rgb), 0.5) 0%, rgba(var(--pino-rgb), 0) 16%);
}
.vitrina__progreso { position: absolute; right: var(--margen); top: 50%; display: none; flex-direction: column; gap: 10px; transform: translateY(-50%); }
.vitrina__progreso span { width: 8px; height: 8px; border-radius: 50%; background: rgba(246, 241, 230, 0.3); transition: background-color 0.3s, transform 0.3s var(--salida); }
.vitrina__progreso span.is-activo { background: var(--sol); transform: scale(1.35); }
/* Sin JavaScript, los textos van uno debajo del otro */
.vitrina__pasos { position: relative; display: grid; gap: 28px; padding: var(--espacio) var(--margen); }
.js .vitrina__pasos { position: absolute; inset: 0; display: block; padding: 0; }
.js .vitrina__paso {
  position: absolute; top: 0; bottom: 0; left: var(--margen); right: var(--margen);
  max-width: var(--contenedor); margin-inline: auto;
  display: flex; align-items: flex-end;
  /* En celular, la tarjeta queda por encima del botón flotante de WhatsApp */
  padding-bottom: calc(86px + env(safe-area-inset-bottom));
  /* El texto que sale se desvanece; el que entra aparece un instante después */
  opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(10px);
  transition: opacity 0.45s ease, transform 0.6s var(--salida), filter 0.45s ease, visibility 0s linear 0.6s;
}
.js .vitrina__paso.is-activo {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.8s ease 0.18s, transform 0.9s var(--salida) 0.18s, filter 0.8s ease 0.18s, visibility 0s;
}
.vitrina__tarjeta {
  display: grid; gap: 12px; justify-items: start;
  width: 100%; max-width: 440px;
  padding: clamp(22px, 3vw, 32px);
  border-radius: 24px;
  background: rgba(var(--pino-rgb), 0.88);   /* sin desenfoque de fondo: encima del 3D costaba mucho en celular */
  box-shadow: inset 0 0 0 1px rgba(246, 241, 230, 0.1);
}
/* Textos grandes y claros, para que se lean sobre la escena */
.vitrina__tarjeta h3 { font-size: clamp(1.75rem, 1.1rem + 2.4vw, 3.3rem); line-height: 1.04; letter-spacing: -0.03em; }
.vitrina__tarjeta p { color: rgba(246, 241, 230, 0.93); font-size: clamp(1.08rem, 0.9rem + 0.5vw, 1.32rem); line-height: 1.55; max-width: 40ch; }
.vitrina__tarjeta .titulo { font-size: clamp(2.2rem, 1.3rem + 3.4vw, 4.4rem); }
.vitrina__tarjeta .boton { margin-top: 8px; }
.vitrina__num { font-size: 1.05rem; font-weight: 800; letter-spacing: 0.08em; color: var(--sol) !important; }
@media (min-width: 900px) {
  /* A la izquierda, un velo más oscuro y más ancho que cubre todo el texto */
  .vitrina__velo {
    background: linear-gradient(90deg, rgba(var(--pino-rgb), 0.9) 0%, rgba(var(--pino-rgb), 0.66) 32%, rgba(var(--pino-rgb), 0.2) 52%, rgba(var(--pino-rgb), 0) 64%),
      linear-gradient(180deg, rgba(var(--pino-rgb), 0.5) 0%, rgba(var(--pino-rgb), 0) 16%);
  }
  .js .vitrina__paso { align-items: center; padding-bottom: 0; filter: blur(8px); }
  .js .vitrina__paso.is-activo { filter: none; }
  .vitrina__tarjeta { background: none; box-shadow: none; padding: 0; max-width: 560px; gap: 16px; }
  .vitrina__tarjeta h3, .vitrina__tarjeta .titulo, .vitrina__tarjeta p { text-shadow: 0 2px 22px rgba(var(--pino-rgb), 0.7); }
  .vitrina__progreso { display: flex; }
}

/* --------------------------------------------------------------------------
   Cómo reservar: tres paradas sobre una vía
   -------------------------------------------------------------------------- */

.reservar { padding-block: var(--espacio); }
.ruta { position: relative; display: grid; gap: 36px; padding-left: 40px; }
/* La vía: línea punteada que se dibuja al aparecer */
.ruta::before {
  content: ''; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: repeating-linear-gradient(180deg, var(--sol) 0 12px, transparent 12px 22px);
  transform-origin: top; transform: scaleY(var(--avance, 1));
}
.js .ruta::before { --avance: 0; transition: transform 1.6s var(--salida); }
.js .ruta.is-visible::before, .js.sin-revelado .ruta::before { --avance: 1; }
.ruta__parada { position: relative; display: grid; gap: 8px; }
.ruta__punto {
  position: absolute; left: -40px; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--papel); box-shadow: inset 0 0 0 3px var(--tinta);
}
.ruta__punto::after { content: ''; position: absolute; inset: 7px; border-radius: 50%; background: var(--sol); }
.ruta__num { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sol-tinta); }
.ruta h3 { font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem); line-height: 1.15; }
.ruta p { color: var(--tinta-2); max-width: 34ch; }
@media (min-width: 860px) {
  .ruta { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; padding-left: 0; padding-top: 52px; }
  .ruta::before {
    left: 12px; right: 12px; top: 11px; bottom: auto; width: auto; height: 2px;
    background: repeating-linear-gradient(90deg, var(--sol) 0 14px, transparent 14px 26px);
    transform-origin: left; transform: scaleX(var(--avance, 1));
  }
  .ruta__punto { left: 0; top: -52px; }
}

/* --------------------------------------------------------------------------
   Destinos, sobre curvas de nivel
   -------------------------------------------------------------------------- */

/* Compacta: cabe entera en una pantalla. En computador, el texto al lado del título y
   las cuatro regiones en una fila; en celular, las dos regiones cortas lado a lado */
.destinos { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(44px, 6.5vw, 96px); background: var(--pino-2); color: var(--claro); }
.destinos .etiqueta { color: var(--sol); }
.destinos .seccion-cabeza { gap: 10px; max-width: none; margin-bottom: clamp(18px, 3vw, 40px); }
.destinos .titulo { font-size: clamp(1.9rem, 1.2rem + 2.3vw, 3.1rem); }
.destinos .seccion-cabeza__texto { color: var(--claro-2); font-size: clamp(0.98rem, 0.92rem + 0.25vw, 1.1rem); max-width: 46ch; }
@media (min-width: 900px) {
  .destinos .seccion-cabeza { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 48px; align-items: end; }
  .destinos .seccion-cabeza .etiqueta { grid-column: 1 / -1; }
  .destinos .titulo { grid-column: 1; grid-row: 2; }
  .destinos .seccion-cabeza__texto { grid-column: 2; grid-row: 2; }
}
.curvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; color: rgba(246, 241, 230, 0.09); }
.regiones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; }
.region:nth-child(-n + 2) { grid-column: 1 / -1; }   /* en celular, las dos listas largas a todo el ancho */
.region { display: grid; gap: 6px; align-content: start; padding: 16px 0; border-top: 1.5px solid rgba(246, 241, 230, 0.16); }
.region h3 { display: flex; align-items: center; gap: 10px; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.4rem); }
.region h3::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); flex: none; }
.region p { color: var(--claro-2); font-size: clamp(0.92rem, 0.88rem + 0.2vw, 1.02rem); line-height: 1.55; }
@media (min-width: 760px) {
  .regiones { gap: 0 36px; }
  .region:nth-child(-n + 2) { grid-column: auto; }
  .region { padding: 20px 0; gap: 8px; }
}
@media (min-width: 1100px) { .regiones { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; } }

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */

/* Papel claro con un poco de luz de atardecer arriba y, al pie, tres filas de montañas;
   la de adelante es del mismo verde del pie de página, así la sección se funde con él */
/* Compacto: cabe entero en una pantalla, montañas incluidas (en computador, el título
   en una sola línea) */
.cierre {
  --alto-montanas: clamp(64px, 8vw, 120px);
  position: relative; isolation: isolate; overflow: hidden;
  padding-block: clamp(48px, 6vw, 84px) calc(20px + var(--alto-montanas) * 0.8);
  background: radial-gradient(70% 60% at 50% 0%, rgba(240, 138, 60, 0.12), rgba(240, 138, 60, 0) 70%), linear-gradient(180deg, var(--papel) 0%, #efe6d6 100%);
  color: var(--tinta); text-align: center;
}
.cierre__caja { display: grid; justify-items: center; gap: 14px; }
.cierre__marca { width: 58px; height: 58px; color: var(--tinta); }
.cierre__titulo { max-width: 12ch; font-size: clamp(2.2rem, 1.2rem + 3vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
@media (min-width: 760px) { .cierre__titulo { max-width: none; } }
.cierre__texto { font-size: clamp(1.02rem, 0.95rem + 0.3vw, 1.18rem); max-width: 46ch; color: var(--tinta-2); }
.cierre .boton--sol { margin-top: 6px; }
.cierre__numero { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.cierre__montanas { position: absolute; z-index: -1; left: 0; right: 0; bottom: -1px; width: 100%; height: var(--alto-montanas); display: block; }

/* --------------------------------------------------------------------------
   Pie de página
   -------------------------------------------------------------------------- */

.pie { padding: 56px 0 calc(40px + env(safe-area-inset-bottom)); background: var(--pino); color: var(--claro-3); font-size: 0.875rem; line-height: 1.6; }
.pie__grid { display: grid; gap: 32px; }
.pie__marca { display: grid; gap: 10px; justify-items: start; color: var(--claro-2); }
.pie__marca .logo { margin-bottom: 6px; }
.pie a { color: var(--claro-2); text-underline-offset: 3px; }
.pie a:hover { color: var(--claro); }
.pie__creditos { display: grid; gap: 10px; max-width: 70ch; }
@media (min-width: 900px) { .pie__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 64px; } }

/* --------------------------------------------------------------------------
   Botón flotante de WhatsApp
   -------------------------------------------------------------------------- */

.flotante {
  position: fixed; z-index: 40;
  left: 16px; right: 16px; bottom: calc(14px + env(safe-area-inset-bottom));
  display: flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 22px; border-radius: 999px;
  background: var(--sol); color: var(--tinta);
  font-weight: 700; text-decoration: none;
  box-shadow: 0 16px 40px -14px rgba(21, 33, 28, 0.55);
  transform: translateY(calc(100% + 30px)); opacity: 0; pointer-events: none;
  transition: transform 0.5s var(--salida), opacity 0.3s;
  -webkit-tap-highlight-color: transparent;
}
.flotante svg { width: 22px; height: 22px; }
.flotante.is-visible { transform: none; opacity: 1; pointer-events: auto; }
@media (min-width: 700px) { .flotante { left: auto; right: 24px; bottom: calc(24px + env(safe-area-inset-bottom)); } }

/* --------------------------------------------------------------------------
   Movimiento reducido
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .revelar { opacity: 1; transform: none; transition: none; }
  .js .ruta::before { --avance: 1; transition: none; }
  .portada__bajar span { animation: none; }
  * { transition-duration: 0.01ms !important; }
}
.sin-movimiento .revelar { opacity: 1 !important; transform: none !important; transition: none !important; }
.sin-movimiento .vitrina__paso { transition: none !important; filter: none !important; transform: none !important; }
.sin-movimiento .ruta::before { --avance: 1 !important; transition: none !important; }
html.sin-movimiento { scroll-behavior: auto; }