/* ==========================================================================
   Envíos 24h · hoja de estilo
   Maqueta «Ruta A→B»: bandas a todo el ancho que alternan color, una línea
   de ruta (SVG) que baja por el carril izquierdo desde el origen (A, donde
   está el cotizador) hasta el destino (B), y cada sección es una parada.
   Nada de esta hoja entra en .cotizador__hueco: el cotizador trae su estilo.
   ========================================================================== */

:root {
  --fondo: #0B1320;
  --fondo-hondo: #070D17;
  --superficie: #132036;
  --superficie-alta: #1B2B47;
  --texto: #F3EFE6;
  --texto-suave: #BEB7A9;
  --oro: #D4A84B;
  --oro-claro: #E8C987;
  --azul: #6FA8DC;
  --azul-claro: #9CC4E8;
  --filete: rgba(243, 239, 230, .12);
  --filete-fuerte: rgba(243, 239, 230, .24);

  --f-titulo: 'Space Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-texto: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --ancho: 1280px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --carril: clamp(2.5rem, 6vw, 5.5rem);
  --hito: 3.25rem;
  --pad-banda: clamp(3.5rem, 8vw, 7rem);
  --pad-heroe: clamp(1.75rem, 4vw, 3.5rem);
  --pad-destino: clamp(2.5rem, 5vw, 4rem);
  --radio: 14px;
  --suave: cubic-bezier(.2, .7, .2, 1);
}

@media (max-width: 640px) {
  :root { --hito: 2.4rem; }
}

/* --- Base (acotada: nunca dentro del cotizador) ------------------------- */

*:not(.cotizador__hueco *),
*:not(.cotizador__hueco *)::before,
*:not(.cotizador__hueco *)::after {
  box-sizing: border-box;
}

html {
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--f-texto);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5.5rem;
}

body {
  margin: 0;
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

:where(.cabecera, .pie, .migas, .heroe__texto, .parada, .destino, .datos, .foto) :focus-visible {
  outline: 2px solid var(--oro);
  outline-offset: 3px;
  border-radius: 4px;
}

.icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--oro);
  color: var(--fondo);
  font: 600 .9rem/1 var(--f-titulo);
  border-radius: 8px;
  text-decoration: none;
  transition: top .2s var(--suave);
}
.saltar:focus { top: 1rem; }

.envoltura {
  position: relative;
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: calc(var(--margen) + var(--carril)) var(--margen);
}
.envoltura--llana { padding-inline: var(--margen); }

.antetitulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.1rem;
  font: 500 .78rem/1.3 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.antetitulo::before {
  content: '';
  width: 1.75rem;
  height: 1px;
  background: currentColor;
  opacity: .7;
}

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

.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(11, 19, 32, .86);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--filete);
}

.cabecera__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: 4.25rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  margin-right: auto;
  color: var(--texto);
  text-decoration: none;
}
.marca__icono { width: 2rem; height: 2rem; flex: none; }
.marca__nombre {
  font: 600 1.15rem/1 var(--f-titulo);
  letter-spacing: -.01em;
}
.marca__nombre b { font-weight: 700; color: var(--oro); }
.marca__icono .marca__trazo { transition: stroke-dashoffset .6s var(--suave); }
.marca:hover .marca__trazo { stroke-dashoffset: -8; }

/* Menú agrupado: Servicios ▾ · Destinos ▾ · Precios · Contacto.
   Los grupos son <details>: funcionan sin JS; web.js solo los cierra al salir. */
.menu__lista,
.menu__sub {
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem 2rem;
}
.menu__lista > li > a,
.menu__titulo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem 0;
  color: var(--texto-suave);
  font: 500 .97rem/1.2 var(--f-titulo);
  text-decoration: none;
  cursor: pointer;
  transition: color .2s;
}
.menu__titulo { list-style: none; }
.menu__titulo::-webkit-details-marker { display: none; }
.menu__titulo::before {
  content: '';
  order: 2;
  width: .4rem;
  height: .4rem;
  margin-top: -.2rem;
  border-right: 1.5px solid var(--oro);
  border-bottom: 1.5px solid var(--oro);
  transform: rotate(45deg);
  transition: transform .3s var(--suave), margin .3s var(--suave);
}
.menu__desplegable[open] > .menu__titulo::before { transform: rotate(-135deg); margin-top: .2rem; }
.menu__lista > li > a::after,
.menu__titulo::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1.5px;
  background: var(--oro);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s var(--suave);
}
.menu__lista > li > a:hover,
.menu__titulo:hover,
.menu__desplegable[open] > .menu__titulo,
.menu__lista > li > a[aria-current],
.menu__grupo:has([aria-current]) .menu__titulo { color: var(--texto); }
.menu__lista > li > a:hover::after,
.menu__lista > li > a[aria-current]::after,
.menu__grupo:has([aria-current]) .menu__titulo::after { transform: scaleX(1); }

.menu__grupo { position: relative; }
.menu__sub {
  display: grid;
  gap: 2px;
}
.menu__sub a {
  display: grid;
  gap: .1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  color: var(--texto);
  text-decoration: none;
  transition: background .2s;
}
.menu__sub a:hover { background: var(--superficie-alta); }
.menu__sub a[aria-current] { background: rgba(212, 168, 75, .1); }
.menu__sub b { font: 600 .97rem/1.3 var(--f-titulo); }
.menu__sub small { font-size: .84rem; line-height: 1.4; color: var(--texto-suave); }
.menu__sub a:hover b,
.menu__sub a[aria-current] b { color: var(--oro-claro); }

@media (min-width: 900px) {
  .menu__sub {
    position: absolute;
    z-index: 60;
    top: calc(100% + 1rem);
    left: -1.25rem;
    width: 21rem;
    padding: .55rem;
    background: var(--superficie);
    border: 1px solid var(--filete-fuerte);
    border-radius: var(--radio);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7);
  }
  .menu__sub::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 1.25rem;
    width: 3rem;
    height: 2px;
    background: var(--oro);
  }
  @media (prefers-reduced-motion: no-preference) {
    .menu__desplegable[open] .menu__sub { animation: despliega .25s var(--suave); }
  }
}
@keyframes despliega {
  from { opacity: 0; transform: translateY(-6px); }
}

.cabecera__tel {
  display: none;
  align-items: center;
  gap: .5rem;
  padding: .55rem .9rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: 999px;
  color: var(--texto);
  font: 500 .875rem/1 var(--f-titulo);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .2s, color .2s;
}
.cabecera__tel .icono { width: 1rem; height: 1rem; color: var(--oro); }
.cabecera__tel:hover { border-color: var(--oro); color: var(--oro-claro); }

.menu-boton { display: none; }

@media (min-width: 1100px) {
  .cabecera__tel { display: inline-flex; }
}

@media (max-width: 899px) {
  .cabecera__barra { flex-wrap: wrap; }
  .menu { flex-basis: 100%; padding-bottom: 1rem; }

  .js .cabecera__barra { flex-wrap: nowrap; }
  .js .menu-boton {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .85rem;
    background: transparent;
    border: 1px solid var(--filete-fuerte);
    border-radius: 999px;
    color: var(--texto);
    font: 500 .875rem/1 var(--f-titulo);
    cursor: pointer;
  }
  .menu-boton__barras,
  .menu-boton__barras::before,
  .menu-boton__barras::after {
    display: block;
    width: 1rem;
    height: 1.5px;
    background: currentColor;
    transition: transform .3s var(--suave), opacity .2s;
  }
  .menu-boton__barras { position: relative; }
  .menu-boton__barras::before,
  .menu-boton__barras::after { content: ''; position: absolute; left: 0; }
  .menu-boton__barras::before { top: -5px; }
  .menu-boton__barras::after { top: 5px; }
  .menu-boton[aria-expanded='true'] .menu-boton__barras { background: transparent; }
  .menu-boton[aria-expanded='true'] .menu-boton__barras::before { transform: translateY(5px) rotate(45deg); }
  .menu-boton[aria-expanded='true'] .menu-boton__barras::after { transform: translateY(-5px) rotate(-45deg); }

  .js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    padding: .5rem var(--margen) 1.5rem;
    background: var(--fondo);
    border-bottom: 1px solid var(--filete);
    box-shadow: 0 30px 60px rgba(0, 0, 0, .45);
    max-height: calc(100vh - 4.25rem);
    overflow-y: auto;
  }
  .js .menu.menu--abierto { display: block; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-top: 1px solid var(--filete); }
  .menu__lista > li > a,
  .menu__titulo {
    display: flex;
    justify-content: space-between;
    padding: 1rem 0;
    font-size: 1.15rem;
    color: var(--texto);
  }
  .menu__lista > li > a::after,
  .menu__titulo::after { display: none; }
  .menu__lista > li > a[aria-current] { color: var(--oro-claro); }
  .menu__sub { padding: 0 0 .9rem; }
  .menu__sub a { padding: .6rem .9rem; border-left: 1.5px solid var(--filete-fuerte); border-radius: 0 10px 10px 0; }
  .menu__sub a[aria-current] { border-left-color: var(--oro); }
}

/* --- Ruta: la línea que recorre la página -------------------------------- */

.ruta { position: relative; display: block; }

.ruta__linea {
  position: absolute;
  z-index: 2;
  top: calc(var(--pad-heroe) + var(--hito) / 2);
  left: calc(max(0px, (100% - var(--ancho)) / 2) + var(--margen) + var(--carril) / 2 - 20px);
  width: 40px;
  height: calc(100% - var(--pad-heroe) - var(--pad-destino) - var(--hito));
  overflow: visible;
  pointer-events: none;
}
/* La calzada (banda ancha azul) y las marcas viales doradas encima */
.ruta__sombra {
  fill: none;
  stroke: rgba(111, 168, 220, .22);
  stroke-width: 12;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.ruta__trazo {
  fill: none;
  stroke: var(--oro);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 9 11;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px rgba(212, 168, 75, .45));
}

@media (prefers-reduced-motion: no-preference) {
  .ruta__trazo { animation: avanza 1.6s linear infinite; }
}
@keyframes avanza {
  to { stroke-dashoffset: -40; }
}

.hito {
  position: absolute;
  z-index: 3;
  top: -.4rem;
  left: calc(var(--margen) + var(--carril) / 2);
  transform: translateX(-50%);
  display: grid;
  place-items: center;
  width: var(--hito);
  height: var(--hito);
  border: 2px solid var(--oro);
  border-radius: 50%;
  background: var(--fondo);
  box-shadow: 0 0 0 6px var(--fondo);
  color: var(--oro-claro);
  font: 700 1.05rem/1 var(--f-titulo);
  letter-spacing: .02em;
}
.banda--superficie .hito {
  background: var(--superficie);
  box-shadow: 0 0 0 6px var(--superficie);
}
/* Desvío de la ruta hasta el antetítulo de cada parada */
.parada .hito::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(100% + 6px);
  width: max(0px, var(--carril) / 2 - var(--hito) / 2 - 6px);
  border-top: 2px dashed rgba(212, 168, 75, .6);
}
.parada .hito--paso::before { display: none; }
.hito--origen,
.hito--destino {
  top: 0;
  width: calc(var(--hito) * 1.3);
  height: calc(var(--hito) * 1.3);
  border-color: var(--oro-claro);
  background: var(--oro);
  color: var(--fondo);
  font-size: 1.4rem;
  font-weight: 700;
  box-shadow: 0 0 0 6px var(--fondo), 0 0 0 7px rgba(212, 168, 75, .35), 0 0 36px 6px rgba(212, 168, 75, .35);
}
.hito--origen::after,
.hito--destino::after {
  content: '';
  position: absolute;
  inset: -9px;
  border: 1.5px solid rgba(212, 168, 75, .6);
  border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  .hito--origen::after { animation: pulso 2.8s var(--suave) infinite; }
}
@keyframes pulso {
  0% { transform: scale(.85); opacity: 1; }
  100% { transform: scale(1.5); opacity: 0; }
}
.hito--paso {
  top: 50%;
  width: .8rem;
  height: .8rem;
  border: 0;
  background: var(--azul);
  box-shadow: 0 0 0 5px var(--fondo), 0 0 0 6px rgba(111, 168, 220, .4);
  transform: translate(-50%, -50%);
}
.banda--superficie .hito--paso {
  background: var(--azul);
  box-shadow: 0 0 0 5px var(--superficie), 0 0 0 6px rgba(111, 168, 220, .4);
}
/* La B se coloca en su posición estática, centrada en la fila de llegada */
.llegada .hito--destino { top: auto; }

/* --- Bandas ------------------------------------------------------------- */

.banda { padding-block: var(--pad-banda); }
.banda--superficie {
  background:
    linear-gradient(90deg, rgba(111, 168, 220, .05), transparent 40%),
    var(--superficie);
  border-block: 1px solid rgba(111, 168, 220, .12);
}

/* Banda honda: la pausa del recorrido (cifras, preguntas). Medianoche más
   profunda con filetes oro arriba y abajo, para que el cambio se note. */
.banda--hondo {
  background:
    radial-gradient(40rem 18rem at 80% 0%, rgba(212, 168, 75, .08), transparent 70%),
    var(--fondo-hondo);
  border-block: 1px solid rgba(212, 168, 75, .28);
}
.banda--hondo .hito { background: var(--fondo-hondo); box-shadow: 0 0 0 6px var(--fondo-hondo); }
.banda--hondo .hito--paso { background: var(--oro); box-shadow: 0 0 0 5px var(--fondo-hondo), 0 0 0 6px rgba(212, 168, 75, .4); }

/* Bandas de cierre (preguntas y otros servicios): menos aire, más densas */
.parada:has(.faq),
.parada:has(.sigue) { padding-block: clamp(2.75rem, 5.5vw, 4.75rem); }

/* --- Cifras (cambio de escala, oro sobre medianoche) ---------------------- */

.cifras { padding-block: clamp(3rem, 6vw, 5rem); }
.cifras__lista {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  border-top: 1px solid rgba(212, 168, 75, .35);
}
.cifra {
  display: grid;
  align-content: start;
  gap: .6rem;
  padding: 1.5rem 1.5rem 0 0;
}
@media (min-width: 900px) {
  .cifra + .cifra { padding-left: 1.75rem; border-left: 1px solid var(--filete); }
}
.cifra__valor {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  font: 700 clamp(3.5rem, 2rem + 5vw, 6.25rem)/.9 var(--f-titulo);
  letter-spacing: -.05em;
  color: var(--oro);
}
.cifra__valor small {
  font-size: .26em;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--oro-claro);
}
.cifra__texto { margin: 0; max-width: 16rem; font-size: 1rem; line-height: 1.5; color: var(--texto); }

/* --- Parada a lo ancho: titular arriba y contenido debajo, a toda la caja --- */

@media (min-width: 960px) {
  .parada--ancha .parada__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .parada--ancha .parada__cabeza {
    position: static;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: .5rem 4.5rem;
    align-items: end;
  }
  .parada--ancha .parada__cabeza .antetitulo { grid-column: 1 / -1; margin-bottom: 0; }
  .parada--ancha .parada__cabeza p:not(.antetitulo) { margin: 0; }
  .parada--ancha .prosa { max-width: 52rem; }
}

/* --- Trayecto: los pasos dibujados como una ruta con paradas -------------- */

@media (min-width: 760px) {
  .pasos--trayecto {
    position: relative;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 2rem;
  }
  .pasos--trayecto::before {
    content: '';
    position: absolute;
    top: calc(1.3rem - 1.5px);
    left: 1.3rem;
    right: 0;
    border-top: 3px dashed rgba(212, 168, 75, .6);
  }
  .pasos--trayecto::after {
    content: '';
    position: absolute;
    top: calc(1.3rem - 8px);
    right: 0;
    border-left: 12px solid var(--oro);
    border-block: 8px solid transparent;
  }
  .pasos--trayecto .paso { padding: 3.25rem 0 0; }
  .pasos--trayecto .paso::before {
    top: 0;
    width: 2.6rem;
    height: 2.6rem;
    background: var(--fondo);
    box-shadow: 0 0 0 6px var(--fondo);
    font-size: 1rem;
  }
  .banda--superficie .pasos--trayecto .paso::before { background: var(--superficie); box-shadow: 0 0 0 6px var(--superficie); }
  .pasos--trayecto .paso::after { display: none; }
  .pasos--trayecto .paso:last-child::before { background: var(--oro); }
  .pasos--trayecto .paso__titulo { font-size: 1.2rem; }
}

/* --- Migas -------------------------------------------------------------- */

.migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem .5rem;
  margin: 0 0 2.25rem;
  padding: .55rem 0 0;
  list-style: none;
  font-size: .85rem;
  color: var(--texto-suave);
}
.migas li + li::before {
  content: '›';
  margin-right: .5rem;
  color: var(--oro);
}
.migas a { color: var(--texto-suave); text-decoration: none; }
.migas a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.migas [aria-current='page'] { color: var(--texto); }

/* --- Héroe -------------------------------------------------------------- */

.heroe {
  position: relative;
  padding-block: var(--pad-heroe) var(--pad-banda);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(111, 168, 220, .16), transparent 65%),
    radial-gradient(40rem 24rem at 10% 110%, rgba(212, 168, 75, .07), transparent 70%),
    var(--fondo);
  overflow: hidden;
}
.heroe::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(243, 239, 230, .035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(243, 239, 230, .035) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  mask-image: linear-gradient(180deg, #000 0%, transparent 85%);
  pointer-events: none;
}
.heroe .migas ol { padding-top: .7rem; }
.heroe--portada .heroe__texto { padding-top: .35rem; }

.heroe__texto { position: relative; max-width: 56rem; }
.heroe__texto h1 {
  margin: 0;
  font: 600 clamp(2.15rem, 1.3rem + 2.8vw, 3.75rem)/1.04 var(--f-titulo);
  letter-spacing: -.035em;
  text-wrap: balance;
}
.entradilla {
  max-width: 44rem;
  margin: 1.5rem 0 0;
  font-size: clamp(1.05rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
  color: var(--texto-suave);
}
.entradilla a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; }
.entradilla a:hover { color: var(--oro-claro); }

.heroe__rejilla {
  position: relative;
  display: grid;
  gap: 2rem 2.5rem;
  margin-top: clamp(2rem, 4vw, 3.25rem);
}
/* Escritorio: titular y cotizador en la columna principal; la tarjeta de ruta
   A→B arriba a la derecha, a la altura del titular, sin vacío ni corte en el pliegue. */
@media (min-width: 1120px) {
  .heroe:has(.datos) > .envoltura {
    display: grid;
    grid-template-columns: minmax(0, 820px) minmax(15rem, 1fr);
    column-gap: 2.5rem;
    align-items: start;
  }
  .heroe:has(.datos) .migas { grid-column: 1 / -1; }
  .heroe:has(.datos) .heroe__texto { grid-column: 1; }
  .heroe:has(.datos) .heroe__rejilla { display: contents; }
  .heroe:has(.datos) .cotizador { grid-column: 1; margin-top: clamp(1.5rem, 2.5vw, 2.25rem); }
  .heroe:has(.datos) .datos { grid-column: 2; grid-row: 2 / span 2; }
  .heroe--portada:has(.datos) .datos { grid-row: 1 / span 2; }
}

/* --- Contenedor del cotizador (el formulario lo inserta la fábrica) ------ */

.cotizador {
  position: relative;
  z-index: 4;
  width: 100%;
  max-width: 820px;
  padding: clamp(1rem, 2.5vw, 1.75rem);
  background: var(--fondo-hondo);
  border: 1px solid rgba(212, 168, 75, .5);
  border-radius: calc(var(--radio) + 4px);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8), 0 0 0 6px rgba(212, 168, 75, .06);
}
.cotizador::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.75rem;
  width: 4.5rem;
  height: 3px;
  background: var(--oro);
}
.cotizador--centro { margin-inline: auto; }

.cotizador__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .35rem 1.5rem;
  padding: 0 .25rem 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--filete);
}
.cotizador__titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font: 600 clamp(1.2rem, 1rem + .7vw, 1.5rem)/1.2 var(--f-titulo);
  letter-spacing: -.01em;
}
.cotizador__titulo .icono { color: var(--oro); }
.cotizador__nota {
  margin: 0;
  font-size: .9rem;
  color: var(--texto-suave);
}
/* El cotizador trae titulares azul marino y botones propios pensados para fondo
   claro (sus colores no se tocan desde aquí). El hueco es una hoja fría, gris
   azulada y apagada, enmarcada por un filete oro dentro del panel medianoche:
   así el formulario se lee como una pieza encajada y no como un recorte crema.
   Solo se toca el contenedor, nunca lo que hay dentro. */
.cotizador__hueco {
  width: 100%;
  min-height: 520px;
  padding: clamp(.75rem, 2vw, 1.5rem);
  background: #E6EBF2;
  border: 1px solid var(--oro);
  border-radius: var(--radio);
  box-shadow: inset 0 0 0 4px #D5DCE6, 0 18px 40px -24px rgba(0, 0, 0, .9);
  color: #0B1320;
  color-scheme: light;
}
.cotizador__tel {
  color: var(--texto);
  text-decoration-color: var(--oro);
  text-underline-offset: 3px;
  white-space: nowrap;
}
.cotizador--flujo { padding: clamp(.6rem, 1.5vw, .9rem); }
.cotizador--flujo::before { left: 3rem; right: 3rem; }
.cotizador__ayuda {
  max-width: 820px;
  margin: 1rem auto 0;
  text-align: center;
  font-size: .92rem;
  color: var(--texto-suave);
}

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

/* Páginas del recorrido del cotizador (_plantilla.html) */
.heroe--plantilla { padding-bottom: var(--pad-destino); }
.heroe__texto--centro {
  max-width: 820px;
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.heroe__texto--centro .antetitulo { justify-content: center; }
.heroe__texto--centro h1 { font-size: clamp(2rem, 1.4rem + 2.4vw, 3.5rem); }
.heroe--plantilla .migas ol { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }

@media (max-width: 640px) {
  .heroe .cotizador {
    width: calc(100% + var(--carril));
    max-width: none;
    margin-left: calc(-1 * var(--carril));
  }
}

/* --- Datos de ruta (al lado del cotizador) ------------------------------- */

/* Tarjeta hermana del cotizador: arranca a su misma altura, se queda fija al
   hacer scroll (el cotizador es más alto) y une sus datos con un tramo de ruta. */
.datos {
  position: relative;
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--filete);
  border-radius: calc(var(--radio) + 4px);
  background: linear-gradient(180deg, rgba(19, 32, 54, .85), rgba(19, 32, 54, .35));
}
@media (min-width: 1120px) {
  .datos { position: sticky; top: 6rem; padding: 1.1rem 1.25rem .4rem; }
  .datos .dato { padding: .65rem 0; }
}

/* Pieza de ruta A→B en lo alto de la tarjeta (SVG dibujado en cada página) */
.datos__mapa {
  display: block;
  width: 100%;
  height: auto;
  margin: 0 0 .5rem;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--filete);
  overflow: visible;
}
.datos__mapa .mapa__rejilla { stroke: rgba(243, 239, 230, .07); stroke-width: 1; fill: none; }
.datos__mapa .mapa__calzada { fill: none; stroke: rgba(111, 168, 220, .22); stroke-width: 9; stroke-linecap: round; }
.datos__mapa .mapa__trazo { fill: none; stroke: var(--oro); stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 6 7; }
.datos__mapa .mapa__parada { fill: var(--superficie); stroke: var(--azul); stroke-width: 1.6; }
.datos__mapa .mapa__a { fill: var(--azul); }
.datos__mapa .mapa__b { fill: var(--oro); }
.datos__mapa .mapa__aro { fill: none; stroke: rgba(212, 168, 75, .55); stroke-width: 1.2; }
.datos__mapa .mapa__letra { font: 700 13px var(--f-titulo); fill: var(--fondo); text-anchor: middle; }
.datos__mapa .mapa__rotulo { font: 500 10.5px var(--f-titulo); letter-spacing: .12em; fill: var(--texto-suave); text-transform: uppercase; }
@media (prefers-reduced-motion: no-preference) {
  .datos__mapa .mapa__trazo { animation: avanza 2.4s linear infinite; }
}
.datos__lista {
  position: relative;
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}
.datos__lista::before {
  content: '';
  position: absolute;
  top: 1.4rem;
  bottom: 1.4rem;
  left: 1.05rem;
  border-left: 2px dashed rgba(212, 168, 75, .55);
}
@media (min-width: 641px) and (max-width: 1119px) {
  .datos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .datos__lista::before { display: none; }
}
.dato {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .1rem .9rem;
  padding: .8rem 0;
}
.dato + .dato { border-top: 1px solid var(--filete); }
.dato .icono {
  position: relative;
  grid-row: span 2;
  box-sizing: content-box;
  width: 1.25rem;
  height: 1.25rem;
  padding: .45rem;
  border: 1.5px solid rgba(212, 168, 75, .7);
  border-radius: 50%;
  background: var(--superficie);
  color: var(--oro);
}
.dato__titulo {
  margin: 0;
  font: 600 1rem/1.3 var(--f-titulo);
}
.dato__texto { margin: 0; font-size: .92rem; line-height: 1.45; color: var(--texto-suave); }
.dato__texto a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; white-space: nowrap; }

/* --- Paradas (secciones del árbol) -------------------------------------- */

.parada__cabeza h2 {
  margin: 0;
  font: 600 clamp(1.65rem, 1.15rem + 2vw, 2.75rem)/1.08 var(--f-titulo);
  letter-spacing: -.028em;
  text-wrap: balance;
}
.parada__cabeza p:not(.antetitulo) {
  margin: 1rem 0 0;
  color: var(--texto-suave);
}

.parada__rejilla { display: grid; gap: 1.75rem; }
@media (min-width: 960px) {
  .parada__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 2.5rem 4.5rem;
    align-items: start;
  }
  .parada__cabeza { position: sticky; top: 6.5rem; }
  .parada__ancho { grid-column: 1 / -1; }
}

.prosa { max-width: 42rem; }
.prosa > * { margin: 0; }
.prosa > * + * { margin-top: 1.1em; }
.prosa p { color: var(--texto); }
.prosa ul { display: grid; gap: .55rem; padding: 0; list-style: none; }
.prosa li { position: relative; padding-left: 1.5rem; }
.prosa li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .7rem;
  border-top: 2px solid var(--oro);
}
.prosa strong { font-weight: 600; color: var(--oro-claro); }
.prosa a,
.parada .enlace {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: rgba(212, 168, 75, .7);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}
.prosa a:hover,
.parada .enlace:hover { color: var(--oro-claro); text-decoration-color: var(--oro-claro); }

/* --- Zonas (H3 por comunidad, provincia o país) -------------------------- */

.zonas {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--filete);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  overflow: hidden;
}
@media (min-width: 720px) {
  .zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zonas--tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 720px) and (max-width: 1099px) {
  .zonas--tres { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.zona {
  padding: 1.35rem 1.5rem 1.5rem;
  background: var(--fondo);
  transition: background .25s;
}
.banda--superficie .zona { background: var(--superficie); }
.zona:hover { background: var(--superficie-alta); }
.zona h3 {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin: 0 0 .5rem;
  font: 600 1.15rem/1.25 var(--f-titulo);
  letter-spacing: -.01em;
}
.zona h3 .icono { width: 1.15rem; height: 1.15rem; color: var(--oro); }
.zona p { margin: 0; font-size: .95rem; color: var(--texto-suave); }
.zona p + p { margin-top: .6rem; }
.zona p a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* Varias paradas cortas fundidas en una banda: cada ficha lleva su propio H2 */
.zonas--paradas .zona { padding: clamp(1.5rem, 3vw, 2.25rem); }
.zonas--paradas .zona .antetitulo { margin-bottom: .6rem; }
.zonas--paradas .zona h2 {
  margin: 0 0 .8rem;
  font: 600 clamp(1.45rem, 1.15rem + 1vw, 2rem)/1.1 var(--f-titulo);
  letter-spacing: -.02em;
}
.zonas--paradas .zona p { font-size: 1rem; color: var(--texto); }

/* --- Tablas ------------------------------------------------------------- */

.tabla-marco {
  overflow-x: auto;
  border: 1px solid rgba(212, 168, 75, .35);
  border-top: 3px solid var(--oro);
  border-radius: var(--radio);
  background: var(--fondo-hondo);
  -webkit-overflow-scrolling: touch;
}
.tabla {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: clamp(1rem, .97rem + .15vw, 1.08rem);
  line-height: 1.5;
}
.tabla--compacta { min-width: 0; }
.tabla caption {
  padding: 1.1rem 1.35rem .5rem;
  text-align: left;
  font: 600 1.05rem/1.3 var(--f-titulo);
  color: var(--texto);
}
.tabla th,
.tabla td {
  padding: 1rem 1.35rem;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--filete-fuerte);
}
.tabla thead th {
  font: 600 .82rem/1.3 var(--f-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-claro);
  background: rgba(212, 168, 75, .1);
}
.tabla caption + thead th { border-top: 0; }
.tabla tbody th {
  min-width: 9rem;
  font: 600 1.05rem/1.4 var(--f-titulo);
  color: var(--oro-claro);
}
.tabla td { color: var(--texto); }
.tabla td strong { color: var(--texto); font-weight: 700; }
.tabla tbody tr:nth-child(even) { background: rgba(243, 239, 230, .035); }
.tabla tbody tr { transition: background .2s; }
.tabla tbody tr:hover { background: rgba(111, 168, 220, .08); }
.tabla__nota {
  margin: .9rem 0 0;
  font-size: .95rem;
  color: var(--texto-suave);
}
.tabla__nota a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* --- Tarjetas (modalidades y enlaces) ------------------------------------ */

.tarjetas {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.tarjeta__enlace {
  display: flex;
  flex-direction: column;
  gap: .7rem;
  height: 100%;
  padding: 1.5rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: linear-gradient(180deg, rgba(243, 239, 230, .035), rgba(243, 239, 230, 0));
  color: var(--texto);
  text-decoration: none;
  transition: border-color .25s, transform .3s var(--suave), background .25s;
}
.tarjeta__enlace:hover {
  border-color: rgba(212, 168, 75, .6);
  background: linear-gradient(180deg, rgba(212, 168, 75, .08), rgba(212, 168, 75, 0));
  transform: translateY(-3px);
}
.tarjeta__enlace > .icono { width: 2.25rem; height: 2.25rem; color: var(--oro); }
.tarjeta__titulo {
  margin: .25rem 0 0;
  font: 600 1.2rem/1.25 var(--f-titulo);
  letter-spacing: -.01em;
}
.tarjeta__texto { margin: 0; font-size: .95rem; color: var(--texto-suave); }
.tarjeta__ir {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: auto;
  padding-top: .5rem;
  font: 500 .85rem/1 var(--f-titulo);
  color: var(--oro);
}
.tarjeta__ir .icono { width: 1rem; height: 1rem; transition: transform .3s var(--suave); }
.tarjeta__enlace:hover .tarjeta__ir .icono { transform: translateX(4px); }

/* --- Pasos (paradas pequeñas dentro de una sección) ---------------------- */

.pasos {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.paso {
  position: relative;
  padding: 0 0 1.75rem 3.25rem;
  counter-increment: paso;
}
.paso::before {
  content: counter(paso);
  position: absolute;
  left: 0;
  top: -.1rem;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  border: 1.5px solid var(--azul);
  border-radius: 50%;
  font: 600 .85rem/1 var(--f-titulo);
  color: var(--azul-claro);
}
.paso::after {
  content: '';
  position: absolute;
  left: 1.05rem;
  top: 2.2rem;
  bottom: .2rem;
  border-left: 1.5px dashed rgba(111, 168, 220, .45);
}
.paso:last-child { padding-bottom: 0; }
.paso:last-child::after { display: none; }
.paso:last-child::before { background: var(--oro); border-color: var(--oro); color: var(--fondo); }
.pasos + .prosa,
.prosa + .pasos,
.prosa + .tabla-marco,
.tabla-marco + .prosa,
.prosa + .aviso,
.tabla-marco + .aviso { margin-top: 1.75rem; }
.paso__titulo { margin: 0; font: 600 1.05rem/1.35 var(--f-titulo); }
.paso__texto { margin: .3rem 0 0; font-size: .95rem; color: var(--texto-suave); }

/* --- Aviso de una línea -------------------------------------------------- */

.aviso {
  display: flex;
  align-items: flex-start;
  gap: .8rem;
  padding: 1rem 1.15rem;
  border: 1px solid rgba(111, 168, 220, .3);
  border-left: 3px solid var(--azul);
  border-radius: 6px var(--radio) var(--radio) 6px;
  background: rgba(111, 168, 220, .07);
  font-size: .95rem;
}
.aviso .icono { margin-top: .05rem; color: var(--azul-claro); }
.aviso p { margin: 0; }

/* --- Garantías (lista con icono) ------------------------------------------ */

.garantias {
  display: grid;
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .garantias { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.garantia { display: flex; gap: .9rem; }
.garantia .icono { margin-top: .15rem; color: var(--oro); }
.garantia__titulo { margin: 0; font: 600 1rem/1.35 var(--f-titulo); }
.garantia__texto { margin: .25rem 0 0; font-size: .93rem; color: var(--texto-suave); }
.garantia__texto a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* --- Fotos --------------------------------------------------------------- */

/* Una sola foto por página, siempre igual: apaisada dentro de la caja, con el
   mismo virado medianoche/oro (desaturada, sombras azules, luces cálidas) y un
   pie montado sobre ella. El virado iguala fotos de orígenes distintos. */
.foto {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(212, 168, 75, .35);
  border-radius: var(--radio);
  background: var(--fondo-hondo);
  isolation: isolate;
}
.foto__img {
  display: block;
  width: 100%;
  height: clamp(16rem, 38vw, 30rem);
  object-fit: cover;
  object-position: var(--encuadre, 50% 50%);
  filter: grayscale(.55) contrast(1.08) brightness(.85);
}
.foto::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(115deg, #0B1320 0%, #1B2B47 45%, #D4A84B 100%);
  mix-blend-mode: color;
  opacity: .55;
  pointer-events: none;
}
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(0deg, rgba(7, 13, 23, .85) 0%, rgba(7, 13, 23, 0) 55%);
  pointer-events: none;
}
.foto__pie {
  position: absolute;
  z-index: 2;
  left: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  bottom: clamp(1rem, 3vw, 1.75rem);
  display: grid;
  gap: .3rem;
  max-width: 30rem;
  padding-left: 1rem;
  border-left: 2px solid var(--oro);
  font-size: .98rem;
  line-height: 1.45;
  color: var(--texto);
}
.foto__pie b {
  font: 600 .78rem/1.4 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro-claro);
}

/* --- Preguntas frecuentes ------------------------------------------------- */

/* Las preguntas ocupan todo el ancho en mosaico (sin media pantalla vacía):
   cabeza arriba, fichas abajo en dos o tres columnas. */
.parada:has(.faq) .parada__rejilla { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.parada:has(.faq) .parada__cabeza { position: static; }
.faq {
  display: grid;
  gap: 1rem;
  align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  counter-reset: pregunta;
}
.faq__item {
  counter-increment: pregunta;
  padding: 0 1.35rem;
  border: 1px solid var(--filete-fuerte);
  border-top: 2px solid var(--oro);
  border-radius: 0 0 var(--radio) var(--radio);
  background: var(--superficie);
  transition: background .25s, border-color .25s;
}
.banda--superficie .faq__item { background: var(--fondo); }
.faq__item[open] { background: var(--superficie-alta); }
.faq__pregunta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  font: 600 1.08rem/1.4 var(--f-titulo);
  cursor: pointer;
  list-style: none;
  transition: color .2s;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: '';
  flex: none;
  width: .7rem;
  height: .7rem;
  border-right: 1.5px solid var(--oro);
  border-bottom: 1.5px solid var(--oro);
  transform: translateY(-25%) rotate(45deg);
  transition: transform .3s var(--suave);
}
.faq__item[open] .faq__pregunta::after { transform: translateY(15%) rotate(-135deg); }
.faq__pregunta:hover { color: var(--oro-claro); }
.faq__respuesta { margin: 0; padding: 0 0 1.35rem; color: var(--texto); }
.faq__respuesta a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; }

/* --- Otros servicios ------------------------------------------------------ */

/* La cabecera va arriba a lo ancho (título y ayuda) y los enlaces en fila:
   sin columna izquierda vacía. */
.parada:has(.sigue) .parada__rejilla { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
.parada:has(.sigue) .parada__cabeza {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem 3rem;
}
.parada:has(.sigue) .parada__cabeza .antetitulo { flex-basis: 100%; margin-bottom: 0; }
.parada:has(.sigue) .parada__cabeza p:not(.antetitulo) { max-width: 30rem; margin: 0; }
.sigue__ayuda a { color: var(--texto); text-decoration-color: var(--oro); text-underline-offset: 3px; white-space: nowrap; }
.sigue__ayuda a:hover { color: var(--oro-claro); }
/* Desvíos de la ruta: fichas con número de salida, filete y flecha, en
   rejilla a todo el ancho. */
.sigue {
  display: grid;
  gap: 1rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15.5rem), 1fr));
  counter-reset: desvio;
}
@media (min-width: 1100px) {
  .sigue.sigue--doble { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.sigue li { counter-increment: desvio; }
.sigue__enlace {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-content: start;
  gap: .35rem 1rem;
  height: 100%;
  padding: 2.6rem 1.35rem 1.35rem;
  border: 1px solid var(--filete-fuerte);
  border-radius: var(--radio);
  background: linear-gradient(160deg, var(--superficie-alta), var(--superficie) 70%);
  color: var(--texto);
  text-decoration: none;
  transition: border-color .25s, transform .3s var(--suave);
}
.banda--superficie .sigue__enlace { background: linear-gradient(160deg, var(--superficie-alta), var(--fondo) 70%); }
.sigue__enlace::before {
  content: 'Salida ' counter(desvio, decimal-leading-zero);
  position: absolute;
  top: 1rem;
  left: 1.35rem;
  font: 600 .72rem/1 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.sigue__enlace::after {
  content: '';
  position: absolute;
  top: -1px;
  left: 1.35rem;
  width: 2.5rem;
  height: 2px;
  background: var(--oro);
  transition: width .35s var(--suave);
}
.sigue__enlace:hover { border-color: rgba(212, 168, 75, .6); transform: translateY(-3px); }
.sigue__enlace:hover::after { width: calc(100% - 2.7rem); }
.sigue__nombre {
  font: 600 1.2rem/1.25 var(--f-titulo);
  letter-spacing: -.01em;
  transition: color .2s;
}
.sigue__porque { grid-column: 1; font-size: .95rem; color: var(--texto-suave); }
.sigue__enlace .icono {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: end;
  color: var(--oro);
  transition: transform .3s var(--suave);
}
.sigue__enlace:hover .sigue__nombre { color: var(--oro-claro); }
.sigue__enlace:hover .icono { transform: translateX(5px); }

/* --- Destino (B) ---------------------------------------------------------- */

.destino {
  padding-block: var(--pad-banda) var(--pad-destino);
  background:
    radial-gradient(50rem 22rem at 30% 100%, rgba(212, 168, 75, .1), transparent 70%),
    var(--fondo);
}
.destino__panel {
  position: relative;
  display: grid;
  gap: 1.25rem 3rem;
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: calc(var(--radio) + 6px);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 45%),
    var(--oro);
  color: var(--fondo);
  overflow: hidden;
}
@media (min-width: 900px) {
  .destino__panel { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
}
.destino__panel::after {
  content: '';
  position: absolute;
  right: -3rem;
  top: -3rem;
  width: 14rem;
  height: 14rem;
  border: 1.5px dashed rgba(11, 19, 32, .25);
  border-radius: 50%;
  pointer-events: none;
}
.destino__panel .antetitulo { color: var(--fondo); }
.destino__titulo {
  margin: 0;
  font: 600 clamp(1.7rem, 1.2rem + 2vw, 2.75rem)/1.08 var(--f-titulo);
  letter-spacing: -.03em;
}
.destino__texto { margin: .8rem 0 0; max-width: 36rem; color: #1E2636; }

.boton {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  background: var(--oro);
  color: var(--fondo);
  font: 600 1rem/1 var(--f-titulo);
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s, transform .3s var(--suave), box-shadow .3s;
}
.boton .icono { width: 1.15rem; height: 1.15rem; transition: transform .3s var(--suave); }
.boton:hover { transform: translateY(-2px); }
.boton:hover .icono { transform: translateX(4px); }
.boton--oscuro { background: var(--fondo); color: var(--oro-claro); box-shadow: 0 14px 30px -14px rgba(11, 19, 32, .8); }
.boton--oscuro:hover { background: #142037; }
.boton:focus-visible { outline: 2px solid var(--fondo); outline-offset: 3px; }

.llegada {
  display: flex;
  align-items: center;
  min-height: var(--hito);
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  font: 500 .8rem/1.4 var(--f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
.llegada b { color: var(--oro); font-weight: 600; margin-right: .5rem; }

/* --- Contacto ------------------------------------------------------------- */

.telefono-grande {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  font: 600 clamp(1.8rem, 1.2rem + 2.6vw, 3.25rem)/1.1 var(--f-titulo);
  letter-spacing: -.02em;
  color: var(--texto);
  text-decoration: none;
  transition: color .2s;
}
.telefono-grande .icono { width: .9em; height: .9em; color: var(--oro); }
.telefono-grande:hover { color: var(--oro-claro); }

/* --- Pie ------------------------------------------------------------------ */

.pie {
  position: relative;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--fondo-hondo);
  border-top: 1px solid var(--filete);
  font-size: .92rem;
  color: var(--texto-suave);
}
.pie__rejilla { display: grid; gap: 2.5rem; }
@media (min-width: 860px) {
  .pie__rejilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; }
}
.pie__lema { max-width: 26rem; margin: 1rem 0 0; }
.pie__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  color: var(--texto);
  font: 600 1.15rem/1 var(--f-titulo);
  text-decoration: none;
}
.pie__tel .icono { width: 1.1rem; height: 1.1rem; color: var(--oro); }
.pie__tel:hover { color: var(--oro-claro); }
.pie__horario { margin: .5rem 0 0; font-size: .85rem; }
.pie__titulo {
  margin: 0 0 1rem;
  font: 500 .75rem/1.3 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}
.pie__lista { display: grid; gap: .55rem; margin: 0; padding: 0; list-style: none; }
.pie__lista a { color: var(--texto-suave); text-decoration: none; transition: color .2s; }
.pie__lista a:hover { color: var(--texto); text-decoration: underline; text-underline-offset: 3px; }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete);
  font-size: .85rem;
}
.pie__base p { margin: 0; }
.pie__base strong { color: var(--texto); font-weight: 500; }

/* --- Ajustes móviles ----------------------------------------------------- */

@media (max-width: 640px) {
  .hito { box-shadow: 0 0 0 4px var(--fondo); font-size: .7rem; }
  .banda--superficie .hito { box-shadow: 0 0 0 4px var(--superficie); }
  .zona { padding: 1.15rem 1.15rem 1.25rem; }
  .tabla th, .tabla td { padding: .8rem 1rem; }
  .tabla tbody th { min-width: 7rem; }
  .foto__img { height: 17rem; }
  .boton { width: 100%; }
  .faq__item { padding: 0 1.1rem; }
  .sigue__enlace { padding: 2.4rem 1.1rem 1.1rem; }
}

@media (prefers-reduced-motion: reduce) {
  *:not(.cotizador__hueco *) { transition: none !important; animation: none !important; }
}