/* ==========================================================================
   Enviar paquete a Finlandia · hoja de estilo propia
   Maqueta «Ruta A→B»: bandas a todo el ancho que alternan color, una línea de
   ruta que baja por el carril izquierdo de la página y paradas numeradas que
   van de la salida (A, el cotizador) a la llegada (B, el cierre).
   Nada de este fichero entra en el formulario del cotizador (.cotizador-one).
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  /* Paleta «Terracota y crema» */
  --fondo: #FBF4EC;
  --texto: #2A1D17;
  --primario: #B5452B;
  --primario-hondo: #93361F;
  --terracota-texto: #9A3A22;   /* terracota para texto pequeño: AA sobre crema, arena y blanco */
  /* Acento «verde fiordo» de la paleta: SOLO para el destino (punto B, Finlandia,
     regiones y ciudades). Todo lo demás (pasos, viñetas, estados) va en terracota. */
  --acento: #2E6E6A;
  --acento-hondo: #225450;
  --superficie: #FFFFFF;
  --arena: #F3E5D5;
  --filete: #E2CCB6;
  --filete-suave: #EEDFCF;
  --tenue: #6B5348;
  --noche: #2A1D17;
  --noche-filete: #4A382E;
  --crema: #FBF4EC;
  --noche-tenue: #CDB9A9;
  --terracota-claro: #F0A487;
  --acento-claro: #8CCBC4;

  /* Tipografía */
  --titulos: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --cuerpo: "Barlow", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* Retícula */
  --ancho: 75rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --carril: 4.5rem;
  --parada: 2.75rem;
  --aire: clamp(3.5rem, 7vw, 6.5rem);
  --cabecera-alto: 4.5rem;
  --radio: 14px;
  --sombra: 0 1px 2px rgba(42, 29, 23, .06), 0 14px 34px -14px rgba(42, 29, 23, .22);

  /* Dibujos SVG reutilizados como máscara (toman el color del elemento) */
  --svg-ruta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='16'%3E%3Crect x='0.5' width='3' height='8' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
  --svg-ruta-h: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect y='0.5' width='8' height='3' rx='1.5' fill='%23000'/%3E%3C/svg%3E");
  --svg-flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E");
  --svg-salida: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='10'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23000'/%3E%3Cpath d='M14 5h21' stroke='%23000' stroke-width='2' stroke-dasharray='1 5' stroke-linecap='round'/%3E%3C/svg%3E");
  --svg-chincheta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M12 2a7 7 0 0 1 7 7c0 5.2-7 13-7 13S5 14.2 5 9a7 7 0 0 1 7-7zm0 4.4A2.6 2.6 0 1 0 12 11.6 2.6 2.6 0 0 0 12 6.4z'/%3E%3C/svg%3E");
  --svg-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

/* ---------- 2. Base (con especificidad cero y fuera del cotizador) ---------- */
*:where(:not(.cotizador-one *)),
*:where(:not(.cotizador-one *))::before,
*:where(:not(.cotizador-one *))::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--cabecera-alto) + 1rem);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4):where(:not(.cotizador-one *)) {
  margin: 0;
  font-family: var(--titulos);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.005em;
  color: inherit;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  overflow-wrap: normal;
}

:where(p, ul, ol, dl, dd, figure, blockquote):where(:not(.cotizador-one *)) {
  margin: 0;
}

:where(img, svg):where(:not(.cotizador-one *)) {
  display: block;
  max-width: 100%;
}

:where(img):where(:not(.cotizador-one *)) {
  height: auto;
}

:where(a):where(:not(.cotizador-one *)) {
  color: inherit;
}

:where(a, summary, .menu-boton, .w-plegar):where(:not(.cotizador-one *)):focus-visible {
  outline: 3px solid var(--primario-hondo);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection {
  background: var(--primario);
  color: #fff;
}

.saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 100;
  padding: .7rem 1.1rem;
  background: var(--noche);
  color: var(--crema);
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 8px 8px;
}

.saltar:focus {
  top: 0;
}

/* ---------- 3. Retícula y bandas ---------- */
.marco {
  position: relative;
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.banda {
  --banda-fondo: var(--fondo);
  position: relative;
  background: var(--banda-fondo);
}

.banda > .marco {
  padding-block: var(--aire);
}

.banda--crema  { --banda-fondo: var(--fondo); }
.banda--blanca { --banda-fondo: var(--superficie); }
.banda--arena  { --banda-fondo: var(--arena); }
.banda--noche  { --banda-fondo: var(--noche); color: var(--crema); }

/* Bandas vacías (la fábrica deja el hueco sin nada): fuera */
.banda:has(> .marco:empty) {
  display: none;
}

/* La línea de ruta: un carril a la izquierda que atraviesa todas las bandas */
.banda--ruta > .marco {
  padding-left: calc(var(--margen) + var(--carril));
}

.banda--ruta > .marco::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--margen) + var(--carril) / 2 - 2px);
  width: 4px;
  background: var(--primario);
  -webkit-mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  pointer-events: none;
}

.banda--noche.banda--ruta > .marco::before {
  background: var(--terracota-claro);
}

/* La ruta arranca en la salida (A) y acaba en la llegada (B) */
.banda--salida > .marco::before {
  top: calc(var(--aire) + var(--parada) / 2);
}

.banda--final > .marco::before {
  bottom: auto;
  height: calc(var(--aire) + var(--parada) / 2);
}

/* Paradas numeradas sobre la línea */
.parada,
.tramo--salida > .marco::after,
.tramo--llegada > .marco::after,
.w-seccion::before,
.w-faq::before {
  position: absolute;
  z-index: 1;
  width: var(--parada);
  height: var(--parada);
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--superficie);
  border: 3px solid var(--primario);
  color: var(--terracota-texto);
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
  letter-spacing: .02em;
  box-shadow: 0 0 0 6px var(--banda-fondo, var(--fondo));
}

.parada,
.tramo--salida > .marco::after,
.tramo--llegada > .marco::after {
  top: var(--aire);
  left: calc(var(--margen) + var(--carril) / 2 - var(--parada) / 2);
}

.parada--a,
.tramo--salida > .marco::after {
  background: var(--primario);
  color: #fff;
}

.parada--b,
.tramo--llegada > .marco::after {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

.banda--noche .parada:not(.parada--a, .parada--b) {
  background: var(--noche);
  border-color: var(--terracota-claro);
  color: var(--terracota-claro);
}

.tramo--salida > .marco::after { content: "A"; }
.tramo--llegada > .marco::after { content: "B"; }

/* Hijas y hermanas: apeaderos sin número sobre la misma línea */
.tramo--hijas > .marco::after,
.tramo--hermanas > .marco::after {
  content: "";
  position: absolute;
  z-index: 1;
  top: calc(var(--aire) + .55rem);
  left: calc(var(--margen) + var(--carril) / 2 - .6rem);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--banda-fondo);
  border: 3px solid var(--acento);
  box-shadow: 0 0 0 5px var(--banda-fondo);
}

/* ---------- 4. Botones ---------- */
.boton,
.menu__cta,
.w-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .95rem 1.45rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.boton--primario,
.menu__cta,
.w-cta {
  background: var(--primario);
  color: #fff;
}

.w-cta {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.15;
}

.boton--primario:hover,
.menu__cta:hover,
.w-cta:hover {
  background: var(--primario-hondo);
  color: #fff;
}

.boton--secundario {
  background: transparent;
  color: var(--acento);
  border-color: var(--acento);
}

.boton--secundario:hover {
  background: var(--acento);
  color: #fff;
}

.boton--claro {
  background: transparent;
  color: var(--crema);
  border-color: var(--noche-tenue);
}

.boton--claro:hover {
  background: var(--crema);
  color: var(--noche);
  border-color: var(--crema);
}

.boton:active,
.w-cta:active,
.menu__cta:active {
  transform: translateY(1px);
}

.boton__flecha {
  width: 1.1em;
  height: 1.1em;
  flex: none;
  transition: transform .2s ease;
}

.boton:hover .boton__flecha {
  transform: translateX(3px);
}

.w-cta::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--svg-flecha) center / contain no-repeat;
  mask: var(--svg-flecha) center / contain no-repeat;
  transition: transform .2s ease;
}

.w-cta:hover::after {
  transform: translateX(3px);
}

.w-cta-linea {
  margin: 0;
}

/* ---------- 5. Cabecera y menú ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(251, 244, 236, .95);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
  backdrop-filter: saturate(1.3) blur(10px);
  border-bottom: 1px solid var(--filete);
  transition: box-shadow .25s ease;
}

.cabecera--sombra {
  box-shadow: 0 10px 28px -18px rgba(42, 29, 23, .45);
}

.cabecera__marco {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--cabecera-alto);
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  color: var(--texto);
  text-decoration: none;
}

.marca__icono {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  transition: transform .3s ease;
}

.marca:hover .marca__icono {
  transform: rotate(-6deg);
}

.marca__texto {
  display: flex;
  flex-direction: column;
  font-family: var(--titulos);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: .03em;
}

.marca__linea1 {
  font-weight: 600;
  font-size: .95rem;
  color: var(--tenue);
}

.marca__linea2 {
  font-weight: 800;
  font-size: 1.45rem;
  color: var(--texto);
}

.menu {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  margin-left: auto;
}

.menu__lista {
  display: flex;
  gap: 1.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.menu__lista a {
  position: relative;
  display: inline-block;
  padding: .5rem 0;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.08rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--texto);
  transition: color .2s ease;
}

.menu__lista a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 2px;
  border-radius: 2px;
  background: var(--primario);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s ease;
}

.menu__lista a:hover {
  color: var(--terracota-texto);
}

.menu__lista a:hover::after,
.menu__lista a[aria-current="page"]::after {
  transform: scaleX(1);
}

.menu__cta {
  padding: .75rem 1.15rem;
  font-size: 1.02rem;
}

.menu-boton {
  display: none;
  align-items: center;
  gap: .55rem;
  margin-left: auto;
  padding: .6rem .9rem;
  border: 1.5px solid var(--texto);
  border-radius: 999px;
  background: transparent;
  color: var(--texto);
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.menu-boton__icono {
  position: relative;
  width: 1.1rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: background-color .2s ease;
}

.menu-boton__icono::before,
.menu-boton__icono::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease;
}

.menu-boton__icono::before { transform: translateY(-5px); }
.menu-boton__icono::after  { transform: translateY(5px); }

.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after  { transform: rotate(-45deg); }

/* ---------- 6. Héroe de las páginas ---------- */
.heroe {
  --banda-fondo: var(--fondo);
  position: relative;
  background: var(--banda-fondo);
  border-bottom: 1px solid var(--filete);
}

/*
   Sistema de héroes: DOS patrones, siempre sobre crema y con las migas en su fila:
   · Servicio   → texto a la izquierda, foto apaisada a la derecha; ficha en franja
                  blanca debajo, con el A→B reducido a una línea.
   · Ubicación  → (región, ciudad y contacto) texto a la izquierda y tablero de datos
                  oscuro a la derecha; la panorámica del lugar cierra el héroe a lo ancho.
                  La ciudad solo cambia la chincheta del antetítulo.
   La portada lleva su billete A→B propio.
*/
/* Portada: texto a la izquierda, billete a la derecha */
.heroe__marco {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  align-items: center;
  padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

/* Interiores (patrón de ubicación por defecto): texto, botón y panorámica a la izquierda,
   tablero de datos a la derecha a toda la altura; la foto entra en la primera pantalla */
.heroe--pagina .heroe__marco {
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas:
    "migas  migas"
    "texto  ficha"
    "accion ficha"
    "foto   ficha"
    "salida salida";
  grid-template-rows: auto auto auto 1fr auto;
  align-items: start;
  padding-block: clamp(2rem, 4.5vw, 4rem) clamp(2.5rem, 5vw, 4.5rem);
}

.heroe--pagina .heroe__migas  { grid-area: migas; min-width: 0; margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }
.heroe--pagina .heroe__texto  { grid-area: texto; min-width: 0; }
.heroe--pagina .heroe__foto   { grid-area: foto; min-width: 0; }
.heroe--pagina .heroe__ficha  { grid-area: ficha; min-width: 0; }
.heroe--pagina .heroe__salida { grid-area: accion; min-width: 0; }

.heroe__migas:not(:has(*)) {
  display: none;
}

/* Sin ficha ni foto (contacto, por ejemplo): una sola columna */
.heroe--pagina .heroe__marco:not(:has(.w-datos, .w-foto img)) {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "migas" "texto" "accion" "salida";
  grid-template-rows: auto auto auto auto;
}

/* Salida sin cotizador: el botón queda dentro del héroe, bajo la entradilla */
.heroe__salida:not(:has(*)) {
  display: none;
}

.heroe__salida:not(:has(.w-cotizador)) {
  margin-top: 1.75rem;
}

/* Salida con cotizador: banda A a todo el ancho al pie del héroe */
.heroe__marco:has(> .heroe__salida .w-cotizador) {
  padding-bottom: 0;
}

.heroe__salida:has(.w-cotizador) {
  --banda-fondo: var(--arena);
  position: relative;
  grid-area: salida;
  margin-top: clamp(2.5rem, 6vw, 5rem);
  padding: var(--aire) 0;
  background: var(--arena);
  color: var(--texto);
  box-shadow: 0 0 0 100vmax var(--arena);
  clip-path: inset(0 -100vmax);
}

/* La parada A va centrada sobre el formulario, con un tramo corto de ruta hacia él */
.heroe__salida:has(.w-cotizador)::before {
  content: "A";
  position: relative;
  z-index: 1;
  width: var(--parada);
  height: var(--parada);
  margin: 0 auto 1.6rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--primario);
  border: 3px solid var(--primario);
  color: #fff;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.05rem;
  line-height: 1;
}

.heroe__salida:has(.w-cotizador)::after {
  content: "";
  position: absolute;
  top: calc(var(--aire) + var(--parada));
  left: calc(50% - 2px);
  width: 4px;
  height: 1.6rem;
  background: var(--primario);
  -webkit-mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  pointer-events: none;
}

.heroe:has(.heroe__salida .w-cotizador) {
  border-bottom: 0;
}

/* Foto del destino en el héroe: limpia, sin trazos pintados encima */
.heroe__foto {
  position: relative;
}

.heroe__foto:not(:has(img)) {
  display: none;
}

.heroe__foto .w-foto {
  border-radius: 20px;
}

.heroe__foto .w-foto img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* El envoltorio de la columna derecha solo cuenta en el héroe de ubicación con ficha */
.heroe__lado {
  display: contents;
}

/* Ubicación (región, ciudad, contacto): texto y botón a la izquierda; a la derecha, la
   foto arriba (entra entera sobre el pliegue) y el tablero debajo, a su altura natural:
   nada de estirarse hasta la altura de la columna de texto */
.heroe--pagina .heroe__foto {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

.heroe--pagina .heroe__foto .w-foto {
  border-radius: var(--radio);
}

.heroe--pagina .heroe__foto .w-foto img {
  aspect-ratio: auto;
  height: clamp(12rem, 22vw, 18rem);
  object-position: 50% 58%;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) {
  grid-template-areas:
    "migas  migas"
    "texto  lado"
    "accion lado"
    "salida salida";
  grid-template-rows: auto auto 1fr auto;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__lado {
  grid-area: lado;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__foto {
  margin-top: 0;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__foto .w-foto img {
  height: clamp(10rem, 15vw, 13rem);
}

body:not([class*="servicio"]) .heroe--pagina .heroe__ficha {
  align-self: start;
  padding-bottom: .6rem;
}

/* Tablero compacto: datos de dos en dos, rótulo encima y dato debajo (unos 56 px por
   fila); el último va a lo ancho si queda solo */
body:not([class*="servicio"]) .heroe--pagina .heroe__ficha .w-datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__ficha .w-datos__fila {
  display: block;
  padding: .7rem 0;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__ficha .w-datos__fila:nth-child(-n + 2) {
  border-top: 0;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__ficha .w-datos > :last-child:nth-child(odd) {
  grid-column: 1 / -1;
}

body:not([class*="servicio"]) .heroe--pagina .heroe__ficha .w-datos dd {
  margin-top: .2rem;
  font-size: 1.15rem;
}

/* Si el héroe ya tiene su botón, el del tablero sobra: queda solo el teléfono */
.heroe__marco:has(.heroe__salida :is(.w-cta, .w-cotizador)) .ficha__boton {
  display: none;
}

.ficha__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.1rem;
  margin-top: 1rem;
  padding: 1.15rem 0 .5rem;
  border-top: 2px dashed var(--noche-filete);
}

.ficha__boton {
  padding: .85rem 1.2rem;
  font-size: 1.02rem;
}

.ficha__llamada {
  font-size: .98rem;
  line-height: 1.4;
  color: var(--noche-tenue);
}

.ficha__llamada a {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .02em;
  white-space: nowrap;
  color: var(--crema);
  text-decoration: none;
  border-bottom: 1px solid var(--terracota-claro);
}

.ficha__llamada a:hover {
  color: var(--terracota-claro);
}

/* La franja de servicio ya tiene su botón en el héroe; en contacto el teléfono abre el tablero */
body[class*="servicio"] .ficha__pie,
.heroe--portada .ficha__pie {
  display: none;
}

body[class*="contacto"] .ficha__llamada {
  display: none;
}

/* Contacto con botón en el héroe: el pie del tablero se queda sin nada, fuera */
body[class*="contacto"] .heroe__marco:has(.heroe__salida :is(.w-cta, .w-cotizador)) .ficha__pie {
  display: none;
}

/* Ubicación: la ficha es un tablero oscuro de datos, sin billete A→B.
   Regla de acentos de todo el sitio: verde fiordo = geografía (regiones y ciudades);
   terracota = servicio e institucional (portada, servicios, contacto, cotizador).
   Por defecto el tablero va en terracota; las páginas geográficas lo pasan a verde. */
.heroe--pagina .ficha {
  --banda-fondo: var(--noche);
  background: var(--noche);
  color: var(--crema);
  border-color: var(--noche);
  border-top-color: var(--primario);
}

.heroe--pagina .ficha .ficha__cabeza {
  padding-bottom: .7rem;
  border-bottom: 2px solid var(--noche-filete);
}

.heroe--pagina .ficha .ficha__rotulo {
  color: var(--terracota-claro);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .heroe--pagina .ficha .ficha__rotulo {
  color: var(--acento-claro);
}

.heroe--pagina .ficha .ficha__trayecto {
  display: none;
}

.heroe--pagina .ficha .w-datos__fila {
  border-top-color: var(--noche-filete);
}

.heroe--pagina .ficha .w-datos dt {
  color: var(--noche-tenue);
}

.heroe--pagina .ficha .w-datos dd {
  color: var(--crema);
}

/* Sin ficha, la foto pasa a la columna derecha en vez de quedar suelta abajo */
.heroe--pagina .heroe__marco:not(:has(.w-datos)):has(.w-foto img) {
  grid-template-areas:
    "migas  migas"
    "texto  foto"
    "accion foto"
    "salida salida";
  grid-template-rows: auto auto 1fr auto;
}

.heroe--pagina .heroe__marco:not(:has(.w-datos)) .heroe__foto,
body[class*="servicio"] .heroe--pagina .heroe__foto {
  margin-top: 0;
}

.heroe--pagina .heroe__marco:not(:has(.w-datos)) .heroe__foto .w-foto,
body[class*="servicio"] .heroe--pagina .heroe__foto .w-foto {
  border-radius: 20px;
}

.heroe--pagina .heroe__marco:not(:has(.w-datos)) .heroe__foto .w-foto img,
body[class*="servicio"] .heroe--pagina .heroe__foto .w-foto img {
  height: auto;
  aspect-ratio: 3 / 2;
  object-position: 50% 60%;
}

/* Servicio: foto apaisada a la derecha, a ras del antetítulo; ficha en franja */
body[class*="servicio"] .heroe--pagina .heroe__marco:has(.w-datos) {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  grid-template-areas:
    "migas  migas"
    "texto  foto"
    "accion foto"
    "ficha  ficha"
    "salida salida";
  grid-template-rows: auto auto 1fr auto auto;
}

/* Ficha en franja (solo servicio): tarjeta blanca a todo el ancho; una cabecera fina
   con el rótulo y, debajo, los datos en una sola fila de 3 a 5 columnas, o en 4 si son
   7 u 8, para que nunca quede una celda vacía */
body[class*="servicio"] .heroe--pagina .ficha {
  background: var(--superficie);
  color: var(--texto);
  border-color: var(--filete);
  border-top-color: var(--primario);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: 1rem var(--ficha-pad) 1.35rem;
}

body[class*="servicio"] .heroe--pagina .ficha .ficha__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 2rem;
  margin-bottom: 1.1rem;
  padding-bottom: .8rem;
  border-bottom: 2px dashed var(--filete);
}

body[class*="servicio"] .heroe--pagina .ficha .ficha__rotulo {
  color: var(--tenue);
}

body[class*="servicio"] .heroe--pagina .ficha .w-datos dt {
  color: var(--tenue);
}

body[class*="servicio"] .heroe--pagina .ficha .w-datos dd {
  margin-top: .3rem;
  font-size: 1.15rem;
  color: var(--texto);
}

/* Servicio: el A→B se queda en una línea corta a la derecha del rótulo */
body[class*="servicio"] .heroe--pagina .ficha .ficha__trayecto {
  display: grid;
  grid-template-columns: auto 4.5rem auto;
  gap: .5rem;
  margin: 0;
  padding: 0;
  border: 0;
}

body[class*="servicio"] .heroe--pagina .ficha__trayecto::before,
body[class*="servicio"] .heroe--pagina .ficha__trayecto::after {
  display: none;
}

body[class*="servicio"] .heroe--pagina .ficha__punto {
  font-size: .98rem;
}

body[class*="servicio"] .heroe--pagina .ficha__letra {
  width: 1.5rem;
  height: 1.5rem;
  font-size: .82rem;
}

body[class*="servicio"] .heroe--pagina .ficha__linea {
  height: 18px;
}

/* Rejilla de datos de la franja: 3 columnas; 4 si son 4, 7 u 8; 5 en una sola fila si
   son 5; la última ocupa dos celdas cuando son 7, para no dejar celdas vacías */
body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos {
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}

.heroe__ficha .w-datos:has(> :nth-child(4):last-child),
.heroe__ficha .w-datos:has(> :nth-child(7):last-child),
.heroe__ficha .w-datos:has(> :nth-child(8):last-child) {
  --cols: 4;
}

.heroe__ficha .w-datos:has(> :nth-child(5):last-child) {
  --cols: 5;
}

.heroe__ficha .w-datos:not(:has(> :nth-child(3))) {
  --cols: 2;
}

.heroe__ficha .w-datos:not(:has(> :nth-child(2))) {
  --cols: 1;
}

body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(7):last-child) > :last-child {
  grid-column: span 2;
}

body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos__fila {
  display: block;
  padding: .1rem 0 .1rem 1rem;
  border-top: 0;
  border-left: 2px solid var(--filete-suave);
}

/* Contacto: patrón de ubicación; el tablero de la derecha abre con el teléfono en
   grande, como tarjeta de llamada, y el resto de datos debajo */
body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos__fila:first-child {
  display: block;
  padding: .3rem 0 1.1rem;
}

/* El teléfono a lo ancho; el resto de dos en dos, y el último a lo ancho si queda solo */
body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :first-child,
body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :last-child:nth-child(even) {
  grid-column: 1 / -1;
}

body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :last-child:nth-child(odd):not(:first-child) {
  grid-column: auto;
}

body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :nth-child(2),
body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :nth-child(3) {
  border-top: 1px dashed var(--noche-filete);
}

body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos__fila:first-child dd {
  margin-top: .45rem;
  font-size: clamp(2rem, 1.3rem + 2.2vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  color: var(--terracota-claro);
}

.heroe__texto > * + * {
  margin-top: 1.25rem;
}

.heroe__texto > .w-migas + * {
  margin-top: 1.75rem;
}

.heroe__titulo {
  max-width: 18ch;
  font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.012em;
}

.heroe--portada .heroe__titulo {
  font-size: clamp(2.75rem, 1.6rem + 4.6vw, 5.6rem);
  max-width: 14ch;
}

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1rem;
  padding-top: .5rem;
}

/* Migas */
.w-migas {
  font-size: .92rem;
  line-height: 1.4;
  color: var(--tenue);
}

.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.w-migas li {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-width: 0;
}

.w-migas li + li::before {
  content: "";
  flex: none;
  width: .9rem;
  height: 2px;
  border-radius: 2px;
  background: var(--primario);
}

.w-migas a {
  color: var(--tenue);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  transition: color .2s ease, border-color .2s ease;
}

.w-migas a:hover {
  color: var(--terracota-texto);
  border-color: currentColor;
}

.w-migas [aria-current] {
  color: var(--texto);
  font-weight: 600;
}

/* Antetítulo: un punto de salida y un tramo de ruta */
.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.02rem;
  line-height: 1.25;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}

.w-antetitulo::before {
  content: "";
  flex: none;
  width: 2.25rem;
  height: 10px;
  background: currentColor;
  -webkit-mask: var(--svg-salida) left center / contain no-repeat;
  mask: var(--svg-salida) left center / contain no-repeat;
}

/* Entradilla: 19-20 px, unos 60 caracteres por línea */
.w-entradilla {
  max-width: 34rem;
}

.w-entradilla p {
  font-size: clamp(1.1875rem, 1.12rem + .25vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto);
}

.w-entradilla p + p {
  margin-top: .8em;
}

/* Ficha del héroe: un billete de ruta */
.ficha {
  --ficha-pad: clamp(1.25rem, 2.5vw, 2rem);
  position: relative;
  padding: 1.5rem var(--ficha-pad) .9rem;
  background: var(--superficie);
  color: var(--texto);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--primario);
  border-radius: 20px;
  box-shadow: var(--sombra);
}

.heroe__ficha:not(:has(.w-datos)) {
  display: none;
}

.ficha__rotulo {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenue);
}

.ficha__trayecto {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .75rem;
  margin-top: .9rem;
  padding-bottom: 1.15rem;
  border-bottom: 2px dashed var(--filete);
}

/* Muescas del billete a los dos lados del troquel */
.ficha__trayecto::before,
.ficha__trayecto::after {
  content: "";
  position: absolute;
  bottom: -11px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--banda-fondo, var(--fondo));
  border: 1px solid var(--filete);
}

.ficha__trayecto::before {
  left: calc(-1 * var(--ficha-pad) - 11px);
  clip-path: inset(0 0 0 50%);
}

.ficha__trayecto::after {
  right: calc(-1 * var(--ficha-pad) - 11px);
  clip-path: inset(0 50% 0 0);
}

.ficha__punto {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ficha__letra {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  font-size: 1rem;
}

.ficha__punto--b .ficha__letra {
  background: var(--acento);
}

.ficha__linea {
  width: 100%;
  height: 26px;
  color: var(--primario);
  overflow: visible;
}

/* Ficha de datos (.w-datos): filas fijas, nunca celdas vacías */
.w-datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
}

.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, 9.5rem) minmax(0, 1fr);
  gap: .35rem 1rem;
  align-items: baseline;
  padding: .8rem 0;
  border-top: 1px dashed var(--filete);
}

.ficha .w-datos__fila:first-child {
  border-top: 0;
}

.w-datos dt {
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tenue);
}

.w-datos dd {
  margin: 0;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--texto);
  min-width: 0;
}

/* Variantes dentro del sistema: todas las cabeceras van sobre crema; el servicio
   marca el antetítulo en terracota y las ubicaciones en verde fiordo (el destino) */
body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .heroe .w-antetitulo {
  color: var(--acento-hondo);
}

/* El verde fiordo es el destino: en las páginas geográficas lo llevan también las migas,
   el filete del tablero, las tarjetas de hijas y hermanas y la región marcada en el mapa.
   Los botones de acción siguen en terracota (la salida). */
body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-migas li + li::before {
  background: var(--acento);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-migas a:hover {
  color: var(--acento-hondo);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-tarjeta::before {
  color: var(--acento-hondo);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-tarjeta::after {
  background: var(--acento);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-tarjeta:hover {
  border-color: var(--acento);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .heroe--pagina .ficha {
  border-top-color: var(--acento);
}

body[class*="ciudad"] .heroe .w-antetitulo::before {
  width: 1.1rem;
  height: 1.1rem;
  -webkit-mask-image: var(--svg-chincheta);
  mask-image: var(--svg-chincheta);
}

/* ---------- 7. Salida: el cotizador al principio de la ruta ---------- */
.w-cotizador {
  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: 32rem;
  margin-inline: auto;
}

.w-cotizador__titulo {
  margin-bottom: 1.5rem;
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  text-align: center;
}

.salida__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .7rem;
  margin-bottom: 1.5rem;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-texto);
  text-align: center;
}

.salida__rotulo::before,
.salida__rotulo::after {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: var(--primario);
  border-radius: 2px;
}

.salida__nota {
  max-width: 760px;
  margin: 1.5rem auto 0;
  font-size: .98rem;
  color: var(--tenue);
  text-align: center;
}

.salida__nota a {
  color: var(--terracota-texto);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

/* La banda de salida se centra con el formulario: la parada A va encima de él, con un
   tramo corto de ruta, y la línea del carril arranca en la primera parada de debajo */
.banda--salida > .marco {
  padding-inline: var(--margen);
}

.banda--salida > .marco::before {
  display: none;
}

.banda--salida .parada {
  position: relative;
  top: auto;
  left: auto;
  margin: 0 auto 1.6rem;
  box-shadow: none;
}

.banda--salida .parada::after {
  content: "";
  position: absolute;
  top: calc(100% + 3px);
  left: calc(50% - 2px);
  width: 4px;
  height: 1.6rem;
  background: var(--primario);
  -webkit-mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  mask: var(--svg-ruta) repeat-y center top / 4px 16px;
}

.banda--salida + .banda--ruta > .marco::before,
.heroe:has(.heroe__salida .w-cotizador) + .banda--ruta > .marco::before {
  top: calc(var(--aire) + var(--parada) / 2);
}

/* ---------- 8. Foto ---------- */
.w-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.w-foto img {
  width: 100%;
  height: clamp(16rem, 40vw, 34rem);
  object-fit: cover;
}

/* Tratamiento común de todas las fotos del sitio: acabado documental, algo más frío y
   menos saturado (apaga los atardeceres naranjas de banco) y una sombra tierra suave
   abajo, para que fotos de orígenes distintos se lean como una misma serie */
.w-foto img,
.banda-foto__imagen,
.plazos__foto img {
  filter: saturate(.72) contrast(1.05) brightness(1.02);
}

.w-foto::after,
.plazos__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(42, 29, 23, 0) 55%, rgba(42, 29, 23, .18) 100%);
  pointer-events: none;
}

/* Sin pies descriptivos: la foto acompaña, no se explica */
.w-foto figcaption {
  display: none;
}

.recorrido .w-foto {
  border-radius: var(--radio);
}

.recorrido .w-foto img {
  height: auto;
  aspect-ratio: 16 / 9;
}

/* ---------- 9. El recorrido: secciones del documento ---------- */
.recorrido {
  counter-reset: tramo;
}

main:not(:has(.w-cotizador)) .recorrido > .marco::before {
  top: calc(var(--aire) + var(--parada) / 2);
}

.recorrido > .marco > * + * {
  margin-top: clamp(3rem, 6vw, 5rem);
}

.w-seccion,
.w-faq {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  counter-increment: tramo;
}

.w-seccion::before,
.w-faq::before {
  content: counter(tramo, decimal-leading-zero);
  top: -.2rem;
  left: calc(-1 * var(--carril) / 2 - var(--parada) / 2);
}

.w-seccion > *,
.w-faq > * {
  grid-column: 2;
  min-width: 0;
}

.w-seccion > h2,
.w-faq > h2 {
  grid-column: 1;
  grid-row: 1 / span 60;
  align-self: start;
  position: sticky;
  top: calc(var(--cabecera-alto) + 1.5rem);
  font-size: clamp(1.9rem, 1.4rem + 1.7vw, 2.75rem);
}

.w-seccion > * + * {
  margin-top: 1.1rem;
}

.w-seccion > h2 + * {
  margin-top: 0;
}

.w-seccion > h3 {
  display: flex;
  align-items: baseline;
  gap: .65rem;
  margin-top: 2.25rem;
  font-size: clamp(1.35rem, 1.2rem + .5vw, 1.6rem);
}

.w-seccion > h2 + h3 {
  margin-top: 0;
}

.w-seccion > h3::before {
  content: "";
  flex: none;
  width: .65rem;
  height: .65rem;
  border-radius: 50%;
  border: 2px solid var(--primario);
  transform: translateY(-.1em);
}

.w-seccion p,
.w-seccion li {
  max-width: 42rem;
}

.w-seccion ul,
.w-seccion ol {
  padding-left: 1.25rem;
}

.w-seccion li + li {
  margin-top: .4rem;
}

.w-seccion li::marker {
  color: var(--primario);
}

.w-seccion strong,
.w-faq strong,
.w-cierre strong {
  font-weight: 600;
}

.w-seccion a:not(.w-cta),
.w-faq a:not(.w-cta),
.prosa a {
  color: var(--terracota-texto);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(154, 58, 34, .45);
  text-underline-offset: .2em;
  transition: text-decoration-color .2s ease;
}

.w-seccion a:not(.w-cta):hover,
.w-faq a:not(.w-cta):hover,
.prosa a:hover {
  text-decoration-color: currentColor;
}

.recorrido > .marco > .w-cta-linea,
.recorrido > .marco > p {
  padding-left: calc(17rem + clamp(2rem, 5vw, 4.5rem));
}

.recorrido > .marco > .w-cta-linea {
  margin-top: 2rem;
}

/* Contacto: las secciones son cortas; van como tarjetas en fila que llenan todo el
   ancho (nada de media pantalla vacía a la derecha). El teléfono ya sale en grande en
   la franja del héroe: aquí no se vuelve a destacar. */
body[class*="contacto"] .recorrido > .marco {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: stretch;
}

body[class*="contacto"] .recorrido > .marco > * + * {
  margin-top: 0;
}

body[class*="contacto"] .recorrido > .marco > :not(.w-seccion),
body[class*="contacto"] .recorrido > .marco > .w-faq {
  grid-column: 1 / -1;
}

body[class*="contacto"] .recorrido > .marco > .w-cta-linea,
body[class*="contacto"] .recorrido > .marco > p {
  padding-left: 0;
}

body[class*="contacto"] .w-seccion {
  display: block;
  padding: clamp(1.4rem, 3vw, 2rem);
  background: var(--fondo);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--primario);
  border-radius: 18px;
}

body[class*="contacto"] .w-faq {
  grid-template-columns: minmax(0, 1fr);
}

body[class*="contacto"] .w-seccion > *,
body[class*="contacto"] .w-faq > * {
  grid-column: 1;
}

body[class*="contacto"] .w-seccion::before {
  position: static;
  margin-bottom: 1.1rem;
  box-shadow: none;
}

body[class*="contacto"] .w-seccion > h2,
body[class*="contacto"] .w-faq > h2 {
  grid-row: auto;
  position: static;
  margin-bottom: .9rem;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
}

body[class*="contacto"] .w-seccion > h2 + * {
  margin-top: 0;
}

/* Respiro cada dos secciones (páginas de detalle): la sección par va en una franja
   arena a sangre y abre con su primer párrafo como destacado, para que el móvil no sea
   un muro de texto continuo. La franja es un pseudoelemento recortado por la banda. */
.recorrido {
  isolation: isolate;
  overflow-x: clip;
}

.recorrido > .marco::before {
  z-index: 0;
}

body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even) {
  --banda-fondo: var(--arena);
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}

body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even)::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: -100vmax;
  right: -100vmax;
  background: var(--arena);
  border-block: 1px solid var(--filete-suave);
}

body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even)::before {
  top: calc(clamp(2.25rem, 5vw, 3.75rem) - .2rem);
}

body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even) > h2 {
  top: calc(var(--cabecera-alto) + 1.5rem);
}

/* Primer párrafo de la franja: peso normal, solo un filete y un cuerpo algo mayor; lo
   único que pesa son las negritas que ya trae el texto */
body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even) > h2 + p {
  padding-left: 1.1rem;
  border-left: 3px solid var(--primario);
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--texto);
}

body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .recorrido .w-seccion:nth-of-type(even) > h2 + p {
  border-left-color: var(--acento);
}

/* ---------- 10. Tablas ---------- */
.w-tabla {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  /* sombras que avisan de que hay más tabla a la derecha */
  background:
    linear-gradient(to right, var(--superficie) 30%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--superficie) 30%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(42, 29, 23, .16), transparent) left center / .9rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(42, 29, 23, .16), transparent) right center / .9rem 100% no-repeat scroll,
    var(--superficie);
}

.w-tabla table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: 1rem;
  line-height: 1.45;
}

.w-tabla th {
  padding: .85rem 1.1rem;
  background: var(--noche);
  color: var(--crema);
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: left;
  vertical-align: bottom;
}

.w-tabla tbody th {
  background: var(--arena);
  color: var(--texto);
  letter-spacing: .03em;
  text-transform: none;
  font-size: 1.1rem;
  vertical-align: top;
}

.w-tabla td {
  padding: .85rem 1.1rem;
  border-top: 1px solid var(--filete-suave);
  color: var(--texto);
  vertical-align: top;
}

.w-tabla tbody tr:nth-child(even) td {
  background: rgba(243, 229, 213, .35);
}

.w-tabla tbody td:first-child {
  font-weight: 600;
}

/* Ninguna celda en blanco: si la fábrica deja una vacía, se marca con una raya */
.w-tabla td:empty::before {
  content: "—";
  color: var(--tenue);
}

.w-tabla tbody tr {
  transition: background-color .2s ease;
}

.w-tabla tbody tr:hover td {
  background: rgba(243, 229, 213, .7);
}

/* ---------- 11. Preguntas frecuentes ---------- */
.w-faq__item {
  border-top: 1px solid var(--filete);
}

.w-faq__item:last-child {
  border-bottom: 1px solid var(--filete);
}

.w-faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.15rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.1rem + .4vw, 1.4rem);
  line-height: 1.2;
  color: var(--texto);
  transition: color .2s ease;
}

.w-faq__item summary::-webkit-details-marker {
  display: none;
}

.w-faq__item summary::after {
  content: "";
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  border: 2px solid var(--primario);
  background:
    linear-gradient(var(--terracota-texto), var(--terracota-texto)) center / 12px 2px no-repeat,
    linear-gradient(var(--terracota-texto), var(--terracota-texto)) center / 2px 12px no-repeat;
  transition: transform .25s ease, background-color .2s ease;
}

.w-faq__item summary:hover {
  color: var(--terracota-texto);
}

.w-faq__item[open] summary::after {
  transform: rotate(180deg);
  background:
    linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
    var(--primario);
}

.w-faq__resp {
  padding: 0 3rem 1.35rem 0;
}

.w-faq__resp p + p {
  margin-top: .8rem;
}

.w-faq__resp p {
  max-width: 42rem;
}

/* ---------- 12. Hijas: tarjetas numeradas como paradas ---------- */
.w-hijas__titulo,
.w-hermanas__titulo {
  margin-bottom: 1.75rem;
  font-size: clamp(1.8rem, 1.4rem + 1.5vw, 2.5rem);
}

.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1rem;
  counter-reset: hija;
}

.w-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-height: 100%;
  padding: 1.1rem 3.25rem 1.2rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  color: var(--texto);
  text-decoration: none;
  counter-increment: hija;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .12em;
  color: var(--terracota-texto);
}

.w-tarjeta::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 1.35rem;
  height: 1.35rem;
  background: var(--primario);
  -webkit-mask: var(--svg-flecha) center / contain no-repeat;
  mask: var(--svg-flecha) center / contain no-repeat;
  transition: transform .2s ease;
}

.w-tarjeta:hover {
  border-color: var(--primario);
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.w-tarjeta:hover::after {
  transform: translateX(3px);
}

.w-tarjeta__nombre {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.4rem;
  line-height: 1.1;
  hyphens: none;
  text-wrap: balance;
}

.w-tarjeta__texto {
  font-size: .96rem;
  line-height: 1.45;
  color: var(--tenue);
}

/* Muchas hijas: rejilla más compacta */
.w-hijas__rejilla:has(> :nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  gap: .7rem;
}

.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta {
  padding: .8rem 2.75rem .85rem 1rem;
}

.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta__nombre {
  font-size: 1.18rem;
}

.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta::after {
  top: .85rem;
  right: .9rem;
}

/* ---------- 13. Hermanas: índice en columnas ---------- */
.w-hermanas__enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: .6rem;
}

.w-hermanas__enlaces a {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-width: 0;
  padding: .8rem 1rem;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-radius: 10px;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: .01em;
  line-height: 1.2;
  color: var(--texto);
  text-decoration: none;
  transition: color .2s ease, border-color .2s ease, transform .2s ease;
}

.w-hermanas__enlaces a:hover {
  border-color: var(--acento);
  transform: translateY(-1px);
}

/* Pocas hermanas: título a la izquierda y fichas más anchas, sin caja medio vacía */
.w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) {
  display: grid;
  grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
  column-gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__titulo {
  margin-bottom: 0;
}

.w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces a {
  padding-block: 1.15rem;
  font-size: 1.3rem;
}

.w-hermanas__enlaces a::before {
  content: "";
  flex: none;
  width: .6rem;
  height: .6rem;
  border-radius: 50%;
  border: 2px solid var(--acento);
  transition: background-color .2s ease, transform .2s ease;
}

.w-hermanas__enlaces a:hover {
  color: var(--acento-hondo);
}

.w-hermanas__enlaces a:hover::before {
  background: var(--acento);
  transform: scale(1.15);
}

.w-plegar {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  padding: .7rem 1.1rem;
  border: 2px solid var(--primario);
  border-radius: 999px;
  background: transparent;
  color: var(--terracota-texto);
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
}

.w-plegar::after {
  content: "";
  width: 1rem;
  height: 1rem;
  background: currentColor;
  -webkit-mask: var(--svg-chevron) center / contain no-repeat;
  mask: var(--svg-chevron) center / contain no-repeat;
  transition: transform .2s ease;
}

.w-plegar[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

/* ---------- 14. Llegada: el cierre ---------- */
.tramo--llegada .w-cierre {
  max-width: 46rem;
}

.w-cierre p {
  font-size: clamp(1.2rem, 1.1rem + .45vw, 1.4rem);
  font-weight: 500;
  line-height: 1.5;
}

.w-cierre p + p {
  margin-top: .8em;
}

.w-cierre a:not(.w-cta) {
  color: var(--terracota-claro);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.tramo--llegada .w-cta-linea,
.w-cierre .w-cta-linea {
  margin-top: 1.75rem;
}

.banda--noche .w-cierre p,
.banda--noche .w-cierre {
  color: var(--crema);
}

/* ---------- 15. Portada ---------- */
.cabeza-seccion {
  max-width: 50rem;
}

.cabeza-seccion h2,
.cierre h2 {
  font-size: clamp(2.1rem, 1.45rem + 2.2vw, 3.25rem);
}

.cabeza-seccion__texto {
  margin-top: 1.15rem;
  max-width: 40rem;
  font-size: 1.15rem;
  line-height: 1.6;
  color: var(--tenue);
}

.cabeza-seccion__texto + .cabeza-seccion__texto {
  margin-top: .9rem;
}

/* Tres pasos como tres paradas */
.pasos {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
  margin: clamp(2.5rem, 5vw, 3.5rem) 0 0;
  padding: 0;
}

.pasos::before {
  content: "";
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  right: 1.75rem;
  height: 4px;
  margin-top: -2px;
  background: var(--primario);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect y='0.5' width='8' height='3' rx='1.5' fill='%23000'/%3E%3C/svg%3E") repeat-x left center / 16px 4px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Crect y='0.5' width='8' height='3' rx='1.5' fill='%23000'/%3E%3C/svg%3E") repeat-x left center / 16px 4px;
}

.paso {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

.paso__cabeza {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.paso__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--superficie);
  border: 3px solid var(--primario);
  color: var(--terracota-texto);
  font-family: var(--titulos);
  font-weight: 800;
  font-size: 1.6rem;
  line-height: 1;
  box-shadow: 0 0 0 8px var(--superficie);
  transition: background-color .25s ease, color .25s ease;
}

.paso:hover .paso__num {
  background: var(--primario);
  color: #fff;
}

.paso__icono {
  width: 2rem;
  height: 2rem;
  color: var(--primario);
  background: var(--superficie);
  box-shadow: 0 0 0 8px var(--superficie);
}

.paso h3 {
  margin-top: .6rem;
  font-size: clamp(1.45rem, 1.25rem + .6vw, 1.75rem);
}

.paso p {
  color: var(--texto);
  max-width: 24rem;
}

/* Límites de paquetería: titular y texto en cabeza asimétrica; la tabla, a todo el
   ancho debajo, con letra de lectura y la modalidad bien marcada */
.limites__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1.25rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.limites__cabeza h2 {
  font-size: clamp(2.1rem, 1.45rem + 2.2vw, 3.25rem);
}

.limites__texto > * + * {
  margin-top: 1rem;
}

.limites__texto p {
  max-width: 40rem;
  font-size: 1.1rem;
}

.limites__tabla {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.limites .w-tabla table {
  min-width: 40rem;
  font-size: 1.125rem;
}

.limites .w-tabla th {
  padding: 1rem 1.4rem;
  font-size: 1.05rem;
}

.limites .w-tabla td {
  padding: 1.1rem 1.4rem;
  vertical-align: middle;
}

.limites .w-tabla thead th:first-child {
  width: 26%;
}

.limites .w-tabla tbody td:first-child {
  background: var(--arena);
  border-left: 4px solid var(--primario);
  font-family: var(--titulos);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.15;
  color: var(--texto);
}

.limites .w-tabla tbody tr:nth-child(even) td:first-child,
.limites .w-tabla tbody tr:hover td:first-child {
  background: var(--arena);
}

.nota-tabla {
  margin-top: 1rem;
  font-size: .98rem;
  color: var(--tenue);
}

/* Banda de foto con lema superpuesto */
.banda-foto {
  position: relative;
  background: var(--fondo);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

.banda-foto__imagen {
  width: 100%;
  height: clamp(18rem, 46vw, 38rem);
  object-fit: cover;
}

/* La línea de ruta sigue sobre la foto, sin cortarse entre bandas */
.banda-foto::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: calc(max(0px, (100% - var(--ancho) - 2 * var(--margen)) / 2) + var(--margen) + var(--carril) / 2 - 2px);
  width: 4px;
  background: var(--primario);
  -webkit-mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  mask: var(--svg-ruta) repeat-y center top / 4px 16px;
  pointer-events: none;
}

.banda-foto__marco {
  margin-top: clamp(-9rem, -10vw, -3rem);
  padding-left: calc(var(--margen) + var(--carril));
}

.banda-foto__lema {
  position: relative;
  z-index: 2;
  max-width: 38rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  background: var(--superficie);
  color: var(--texto);
  border-left: 5px solid var(--primario);
  border-radius: 0 var(--radio) var(--radio) 0;
  box-shadow: var(--sombra);
  font-family: var(--titulos);
  font-weight: 600;
  font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.15;
  text-wrap: balance;
  hyphens: none;
}

.banda-foto__lema span {
  color: var(--terracota-texto);
}

/* Qué viaja y qué no: dos columnas en banda oscura */
.banda--noche .cabeza-seccion__texto {
  color: var(--noche-tenue);
}

.mercancia {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.mercancia__lado {
  --mercancia-color: var(--arena);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1rem;
  align-content: start;
  padding: clamp(1.4rem, 3vw, 2.25rem);
  border: 1px solid var(--noche-filete);
  border-top: 4px solid var(--mercancia-color);
  border-radius: var(--radio);
  background: rgba(251, 244, 236, .04);
  color: var(--crema);
}

.mercancia__lado--no {
  --mercancia-color: var(--terracota-claro);
}

.mercancia__icono {
  width: 2.75rem;
  height: 2.75rem;
  color: var(--mercancia-color);
}

.mercancia__lado h3 {
  align-self: center;
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  color: var(--crema);
}

.mercancia__lado p {
  grid-column: 1 / -1;
  font-size: 1.1rem;
  line-height: 1.6;
  color: var(--crema);
}

.mercancia__lado strong {
  color: var(--mercancia-color);
  font-weight: 700;
}

/* Plazos y seguro: foto y bloques con icono */
.plazos {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.plazos__foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
}

.plazos__foto img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.plazos__texto > h2 {
  font-size: clamp(2.1rem, 1.45rem + 2.2vw, 3.25rem);
}

.bloque-icono {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem 1rem;
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--filete);
}

.plazos__texto > h2 + .bloque-icono {
  border-top: 0;
  padding-top: 0;
  margin-top: 2rem;
}

.bloque-icono__icono {
  grid-row: span 2;
  width: 2.75rem;
  height: 2.75rem;
  padding: .55rem;
  border-radius: 50%;
  background: var(--arena);
  color: var(--terracota-texto);
}

.bloque-icono h3 {
  font-size: 1.55rem;
  align-self: center;
}

.bloque-icono p {
  max-width: 34rem;
}

/* Índice geográfico de destinos */
/* Cuatro zonas de cinco filas cada una: columnas de la misma altura y filas alineadas */
.destinos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
  align-items: stretch;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.destinos__columna {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* Cada macrozona es una tarjeta: cabecera con nombre, cuenta y una línea de contexto */
.destinos__grupo {
  flex: 1 1 auto;
  background: var(--fondo);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--acento);
  border-radius: 16px;
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}

.destinos__grupo:hover {
  box-shadow: var(--sombra);
  transform: translateY(-2px);
}

.destinos__zona {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  align-items: baseline;
  gap: .35rem .75rem;
  min-height: 7.6rem;
  padding: 1.15rem 1.25rem 1rem;
  border-bottom: 1px solid var(--filete);
  background: var(--superficie);
  list-style: none;
  cursor: default;
}

.destinos__contexto {
  grid-column: 1 / -1;
  font-size: .98rem;
  line-height: 1.45;
  color: var(--tenue);
}

.destinos__zona::-webkit-details-marker {
  display: none;
}

.destinos__zona-nombre {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.2rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto);
}

.destinos__zona-cuenta {
  flex: none;
  font-size: .85rem;
  color: var(--tenue);
}

.destinos__lista {
  list-style: none;
  margin: 0;
  padding: .25rem 1.25rem .5rem;
}

.destino {
  min-height: 5.9rem;
  padding: .85rem 0 .9rem;
  border-bottom: 1px dashed var(--filete);
}

/* Servicios bajo el índice: una franja propia, fuera de las columnas de regiones */
.destinos__servicios {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.4rem;
  margin-top: 1.25rem;
  padding: 1rem 1.25rem;
  background: var(--superficie);
  border: 1px solid var(--filete);
  border-left: 4px solid var(--primario);
  border-radius: 12px;
}

.destinos__servicios-rotulo {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}

.destinos__servicios a {
  font-weight: 600;
  color: var(--terracota-texto);
  text-decoration: none;
  border-bottom: 1px solid rgba(154, 58, 34, .35);
  transition: border-color .2s ease;
}

.destinos__servicios a:hover {
  border-bottom-color: currentColor;
}

.destino:last-child {
  border-bottom: 0;
}

.destino__region {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.32rem;
  line-height: 1.15;
  color: var(--texto);
  text-decoration: none;
  transition: color .2s ease;
}

.destino__region:hover {
  color: var(--terracota-texto);
}

.destino__codigo {
  flex: none;
  min-width: 1.9rem;
  padding: .12rem .3rem;
  border: 1px solid var(--filete);
  border-radius: 4px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--terracota-texto);
  text-align: center;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

.destino__region:hover .destino__codigo {
  background: var(--primario);
  border-color: var(--primario);
  color: #fff;
}

.destino__ciudades {
  margin-top: .35rem;
  padding-left: 2.45rem;
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--tenue);
}

.destino__ciudades a {
  font-weight: 600;
  color: var(--acento-hondo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.destino__ciudades a + a::before {
  content: "·";
  display: inline-block;
  margin: 0 .45rem;
  color: var(--tenue);
}

.destino__ciudades a:hover {
  color: var(--acento-hondo);
  border-bottom-color: currentColor;
}

/* Cierre de la portada */
.cierre {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) auto;
  gap: 2rem clamp(2rem, 5vw, 4rem);
  align-items: end;
}

.cierre__rotulo {
  margin-bottom: 1rem;
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-claro);
}

.cierre__texto {
  margin-top: 1.1rem;
  max-width: 36rem;
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--crema);
}

.cierre__acciones {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .8rem;
}

/* Páginas del recorrido del cotizador */
/* Mismo crema que las cabeceras del resto del sitio y cabeza compacta: el primer paso
   del formulario tiene que verse sin desplazarse */
.cotizador-pagina {
  --cotizador-ancho: 766px;
}

.cotizador-pagina > .marco {
  padding-top: clamp(2.25rem, 4.5vw, 3.75rem);
}

/* Cabeza y formulario en la misma columna centrada, al ancho real del formulario
   (766 px): el filete del titular acaba donde acaba el cotizador */
.cotizador-pagina__cabeza {
  max-width: var(--cotizador-ancho);
  margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 2.75rem);
}

.cotizador-pagina__titular {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
  align-items: end;
  margin-top: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 2px solid var(--filete);
}

.cotizador-pagina__h1 {
  margin-top: .5rem;
  font-size: clamp(2rem, 1.5rem + 1.9vw, 3rem);
  font-weight: 800;
  line-height: 1;
}

.cotizador-pagina__ayuda {
  max-width: 44rem;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--texto);
}

.cotizador-pagina__ayuda a {
  color: var(--terracota-texto);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}

.cotizador-pagina__formulario {
  max-width: var(--cotizador-ancho);
  min-height: 32rem;
  margin-inline: auto;
}

/* ---------- 15 bis. Mapa de Finlandia (pieza firma) y respiros del recorrido ---------- */
/* Silueta y puntos con coordenadas reales (proyección equirectangular a 62° N): cada
   punto es la capital de su región, con su número oficial. Los textos del SVG llevan
   color igual que fill. */
.mapa-fi__svg {
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: var(--titulos);
}

/* Silueta con cuerpo: tierra arena con contorno tostado y mar insinuado en verde agua */
.mapa-fi__pais {
  fill: #F0DCC6;
  stroke: #9C7B62;
  stroke-width: 2;
  stroke-linejoin: round;
}

.mapa-fi__lagos ellipse {
  fill: #B9D6D2;
}

.mapa-fi__mares text {
  fill: var(--tenue);
  color: var(--tenue);
  font-family: var(--cuerpo);
  font-size: 13px;
  font-style: italic;
  letter-spacing: .04em;
}

.mapa-fi__ruta {
  fill: none;
  stroke: var(--primario);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 1 8;
}

.mapa-fi__salida circle {
  fill: var(--primario);
}

.mapa-fi__salida text {
  fill: #fff;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-anchor: middle;
}

.mapa-fi__desde {
  fill: var(--terracota-texto);
  color: var(--terracota-texto);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.mapa-fi__region {
  --r-fondo: var(--superficie);
  --r-borde: var(--acento);
  --r-texto: var(--acento-hondo);
  --r-grosor: 2.5;
  cursor: pointer;
  outline: none;
}

.mapa-fi__region circle {
  fill: var(--r-fondo);
  stroke: var(--r-borde);
  stroke-width: var(--r-grosor);
  paint-order: stroke;
  transition: fill .2s ease, stroke .2s ease, stroke-width .2s ease;
}

.mapa-fi__region text {
  fill: var(--r-texto);
  color: var(--r-texto);
  font-size: 10.5px;
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
}

.mapa-fi__region:hover,
.mapa-fi__region:focus-visible {
  --r-fondo: var(--acento-hondo);
  --r-borde: var(--acento-hondo);
  --r-texto: #fff;
}

.mapa-fi__region:focus-visible {
  --r-borde: var(--primario-hondo);
  --r-grosor: 4;
}

/* La región de la página (o la de la ciudad) queda marcada: se lee del canonical y,
   en las ciudades, también de las migas */
html:has(link[rel="canonical"][href*="/uusimaa/"]) .mapa-fi__region[href="/uusimaa/"],
html:has(link[rel="canonical"][href*="/finlandia-propia/"]) .mapa-fi__region[href="/finlandia-propia/"],
html:has(link[rel="canonical"][href*="/satakunta/"]) .mapa-fi__region[href="/satakunta/"],
html:has(link[rel="canonical"][href*="/tavastia-propia/"]) .mapa-fi__region[href="/tavastia-propia/"],
html:has(link[rel="canonical"][href*="/pirkanmaa/"]) .mapa-fi__region[href="/pirkanmaa/"],
html:has(link[rel="canonical"][href*="/paijat-hame/"]) .mapa-fi__region[href="/paijat-hame/"],
html:has(link[rel="canonical"][href*="/kymenlaakso/"]) .mapa-fi__region[href="/kymenlaakso/"],
html:has(link[rel="canonical"][href*="/karelia-del-sur/"]) .mapa-fi__region[href="/karelia-del-sur/"],
html:has(link[rel="canonical"][href*="/savonia-del-sur/"]) .mapa-fi__region[href="/savonia-del-sur/"],
html:has(link[rel="canonical"][href*="/savonia-del-norte/"]) .mapa-fi__region[href="/savonia-del-norte/"],
html:has(link[rel="canonical"][href*="/karelia-del-norte/"]) .mapa-fi__region[href="/karelia-del-norte/"],
html:has(link[rel="canonical"][href*="/finlandia-central/"]) .mapa-fi__region[href="/finlandia-central/"],
html:has(link[rel="canonical"][href*="/ostrobotnia-del-sur/"]) .mapa-fi__region[href="/ostrobotnia-del-sur/"],
html:has(link[rel="canonical"][href*="/ostrobotnia/"]) .mapa-fi__region[href="/ostrobotnia/"],
html:has(link[rel="canonical"][href*="/ostrobotnia-central/"]) .mapa-fi__region[href="/ostrobotnia-central/"],
html:has(link[rel="canonical"][href*="/ostrobotnia-del-norte/"]) .mapa-fi__region[href="/ostrobotnia-del-norte/"],
html:has(link[rel="canonical"][href*="/kainuu/"]) .mapa-fi__region[href="/kainuu/"],
html:has(link[rel="canonical"][href*="/laponia/"]) .mapa-fi__region[href="/laponia/"],
html:has(link[rel="canonical"][href*="/aland/"]) .mapa-fi__region[href="/aland/"],
body:has(.w-migas a[href="/uusimaa/"]) .mapa-fi__region[href="/uusimaa/"],
body:has(.w-migas a[href="/finlandia-propia/"]) .mapa-fi__region[href="/finlandia-propia/"],
body:has(.w-migas a[href="/satakunta/"]) .mapa-fi__region[href="/satakunta/"],
body:has(.w-migas a[href="/tavastia-propia/"]) .mapa-fi__region[href="/tavastia-propia/"],
body:has(.w-migas a[href="/pirkanmaa/"]) .mapa-fi__region[href="/pirkanmaa/"],
body:has(.w-migas a[href="/paijat-hame/"]) .mapa-fi__region[href="/paijat-hame/"],
body:has(.w-migas a[href="/kymenlaakso/"]) .mapa-fi__region[href="/kymenlaakso/"],
body:has(.w-migas a[href="/karelia-del-sur/"]) .mapa-fi__region[href="/karelia-del-sur/"],
body:has(.w-migas a[href="/savonia-del-sur/"]) .mapa-fi__region[href="/savonia-del-sur/"],
body:has(.w-migas a[href="/savonia-del-norte/"]) .mapa-fi__region[href="/savonia-del-norte/"],
body:has(.w-migas a[href="/karelia-del-norte/"]) .mapa-fi__region[href="/karelia-del-norte/"],
body:has(.w-migas a[href="/finlandia-central/"]) .mapa-fi__region[href="/finlandia-central/"],
body:has(.w-migas a[href="/ostrobotnia-del-sur/"]) .mapa-fi__region[href="/ostrobotnia-del-sur/"],
body:has(.w-migas a[href="/ostrobotnia/"]) .mapa-fi__region[href="/ostrobotnia/"],
body:has(.w-migas a[href="/ostrobotnia-central/"]) .mapa-fi__region[href="/ostrobotnia-central/"],
body:has(.w-migas a[href="/ostrobotnia-del-norte/"]) .mapa-fi__region[href="/ostrobotnia-del-norte/"],
body:has(.w-migas a[href="/kainuu/"]) .mapa-fi__region[href="/kainuu/"],
body:has(.w-migas a[href="/laponia/"]) .mapa-fi__region[href="/laponia/"],
body:has(.w-migas a[href="/aland/"]) .mapa-fi__region[href="/aland/"] {
  --r-fondo: var(--primario);
  --r-borde: rgba(181, 69, 43, .3);
  --r-texto: #fff;
  --r-grosor: var(--r-halo, 9);
}

/* Módulo del mapa en el recorrido de las páginas interiores */
.mapa-fi--recorrido {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 22rem);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  background: var(--fondo);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--acento);
  border-radius: 20px;
}

/* Apeadero sobre la línea de ruta, a la altura del módulo */
.mapa-fi--recorrido::before,
.cifras-ruta::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: 2rem;
  left: calc(-1 * var(--carril) / 2 - .6rem);
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--banda-fondo, var(--superficie));
  border: 3px solid var(--acento);
  box-shadow: 0 0 0 5px var(--banda-fondo, var(--superficie));
}

.cifras-ruta::before {
  border-color: var(--primario);
}

.mapa-fi__texto > * + * {
  margin-top: .9rem;
}

.mapa-fi__rotulo {
  font-family: var(--titulos);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-hondo);
}

.mapa-fi__titulo {
  font-family: var(--titulos);
  font-weight: 700;
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  line-height: 1.05;
  text-wrap: balance;
  hyphens: none;
  color: var(--texto);
}

.mapa-fi__nota {
  max-width: 30rem;
  color: var(--tenue);
}

.mapa-fi__leyenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .6rem;
  padding-top: .9rem;
  border-top: 1px dashed var(--filete);
  font-size: .95rem;
  color: var(--texto);
}

.mapa-fi__clave {
  display: inline-grid;
  place-items: center;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 50%;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .78rem;
  line-height: 1;
}

.mapa-fi__clave--a {
  background: var(--primario);
  color: #fff;
}

.mapa-fi__clave--b {
  margin-left: .6rem;
  background: var(--superficie);
  border: 2.5px solid var(--acento);
}

/* «Región de esta página» (terracota): solo en las páginas geográficas, que son las que
   marcan su región en el mapa */
.mapa-fi__aqui {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-left: .6rem;
}

.mapa-fi__clave--aqui {
  background: var(--primario);
  box-shadow: 0 0 0 3px rgba(181, 69, 43, .3);
}

body:not(:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"])) .mapa-fi__aqui {
  display: none;
}

.mapa-fi--recorrido .mapa-fi__svg {
  max-width: 22rem;
  margin-inline: auto;
}

/* Cifras de la ficha: tres datos en un tablero oscuro, sin franja a sangre */
.cifras-ruta {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem clamp(1.5rem, 3vw, 2.5rem);
  padding: clamp(1.5rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2.5rem);
  background: var(--noche);
  color: var(--crema);
  border-radius: 20px;
}

.cifras-ruta__item {
  display: flex;
  flex-direction: column;
  gap: .55rem;
  min-width: 0;
  padding-left: 1.1rem;
  border-left: 2px solid var(--noche-filete);
}

.cifras-ruta__num {
  font-family: var(--titulos);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.8rem + 2.4vw, 3.6rem);
  line-height: .95;
  letter-spacing: -.005em;
  white-space: nowrap;
  color: var(--terracota-claro);
}

.cifras-ruta__txt {
  font-size: 1rem;
  line-height: 1.45;
  color: var(--noche-tenue);
}

/* Orden del recorrido: dos bloques, mapa, dos bloques, cifras y el resto. El contenido
   de la fábrica no se mueve en el código; solo se intercalan los dos respiros. */
body:not([class*="contacto"]) .recorrido > .marco {
  display: flex;
  flex-direction: column;
}

body:not([class*="contacto"]) .recorrido > .marco > * {
  order: 5;
}

body:not([class*="contacto"]) .recorrido > .marco > :nth-child(-n + 2) {
  order: 1;
}

body:not([class*="contacto"]) .recorrido > .marco > :nth-child(3),
body:not([class*="contacto"]) .recorrido > .marco > :nth-child(4) {
  order: 3;
}

body:not([class*="contacto"]) .recorrido > .marco > .mapa-fi {
  order: 2;
}

body:not([class*="contacto"]) .recorrido > .marco > .cifras-ruta {
  order: 4;
}

/* Con poco contenido no se amontonan los respiros; sin contenido, fuera la banda */
.recorrido > .marco:not(:has(> :nth-child(6))) > .cifras-ruta,
.recorrido > .marco:not(:has(> :nth-child(3))) > .mapa-fi {
  display: none;
}

.recorrido:not(:has(> .marco > :nth-child(3))) {
  display: none;
}

/* Portada: mapa a la izquierda, fijo al desplazarse, y las cuatro áreas en 2 × 2 */
.destinos-mapa {
  display: grid;
  grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

/* Cuatro áreas de cinco filas cada una en 2 × 2: tarjetas de la misma altura y filas
   alineadas de una columna a otra */
.destinos-indice {
  min-width: 0;
}

.destinos-mapa .destinos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
}

.mapa-fi--portada {
  position: sticky;
  top: calc(var(--cabecera-alto) + 1.5rem);
  margin: 0;
  padding: 1.25rem 1.25rem 1rem;
  background: var(--fondo);
  border: 1px solid var(--filete);
  border-top: 4px solid var(--acento);
  border-radius: 20px;
}

/* ---------- 16. Pie ---------- */
.pie {
  background: var(--arena);
  color: var(--texto);
  border-top: 4px solid var(--primario);
}

/* Cierre del pie: el trayecto A→B de punta a punta y la salida al cotizador */
.pie__ruta {
  display: flex;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
  padding-block: clamp(1.75rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--filete);
}

.pie__trayecto {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: .85rem;
  min-width: 0;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto);
}

.pie__punto {
  flex: none;
  display: grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--primario);
  color: #fff;
  font-size: 1.1rem;
  letter-spacing: 0;
}

.pie__punto--b {
  background: var(--acento);
}

.pie__lugar {
  flex: none;
}

.pie__linea {
  flex: 1 1 auto;
  min-width: 2rem;
  height: 4px;
  background: var(--primario);
  -webkit-mask: var(--svg-ruta-h) repeat-x left center / 16px 4px;
  mask: var(--svg-ruta-h) repeat-x left center / 16px 4px;
}

.pie__cta {
  flex: none;
}

.pie__marco {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.5fr);
  gap: 2.5rem;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}

.pie__lista--doble {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.pie__todas {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.1rem;
  font-weight: 600;
  color: var(--acento-hondo);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.pie__todas::after {
  content: "";
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--svg-flecha) center / contain no-repeat;
  mask: var(--svg-flecha) center / contain no-repeat;
  transition: transform .2s ease;
}

.pie__todas:hover::after {
  transform: translateX(3px);
}

.pie__lema {
  margin-top: 1.1rem;
  max-width: 26rem;
  color: var(--tenue);
}

.pie__telefono {
  display: inline-block;
  margin-top: 1.25rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1;
  color: var(--terracota-texto);
  text-decoration: none;
}

.pie__telefono:hover {
  color: var(--primario-hondo);
}

.pie__horario {
  margin-top: .35rem;
  font-size: .95rem;
  color: var(--tenue);
}

.pie__titulo {
  margin-bottom: 1rem;
  font-family: var(--titulos);
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--terracota-texto);
}

.pie__lista {
  display: grid;
  gap: .55rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__lista a {
  color: var(--texto);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, color .2s ease;
}

.pie__lista a:hover {
  color: var(--terracota-texto);
  border-bottom-color: currentColor;
}

.pie__base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .6rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--filete);
  font-size: .92rem;
  color: var(--tenue);
}

.pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.pie__legal li + li::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  margin: 0 .75rem;
  border-radius: 50%;
  background: var(--primario);
  vertical-align: middle;
}

.pie__legal a {
  color: var(--tenue);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.pie__legal a:hover {
  color: var(--terracota-texto);
  border-bottom-color: currentColor;
}

/* ==========================================================================
   Ajustes por ancho de pantalla (siempre al final)
   ========================================================================== */

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

@media (prefers-reduced-motion: reduce) {
  *:where(:not(.cotizador-one *)),
  *:where(:not(.cotizador-one *))::before,
  *:where(:not(.cotizador-one *))::after {
    transition-duration: .01ms !important;
  }
}

@media (max-width: 1100px) {
  .menu-boton {
    display: inline-flex;
  }

  html:not(.js) .menu-boton {
    display: none;
  }

  .cabecera__marco {
    flex-wrap: wrap;
  }

  .menu {
    flex-basis: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-left: 0;
    padding-bottom: 1rem;
  }

  .js .menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    padding: .25rem var(--margen) 1.4rem;
    background: var(--fondo);
    border-bottom: 1px solid var(--filete);
    box-shadow: 0 22px 34px -22px rgba(42, 29, 23, .45);
  }

  .js .cabecera--abierta .menu {
    display: flex;
  }

  .menu__lista {
    flex-direction: column;
    gap: 0;
  }

  .menu__lista a {
    display: flex;
    padding: .9rem 0;
    border-bottom: 1px solid var(--filete-suave);
    font-size: 1.3rem;
  }

  .menu__lista a::after {
    display: none;
  }

  .menu__cta {
    margin-top: 1.1rem;
    padding: 1rem 1.2rem;
    font-size: 1.1rem;
  }
}

@media (max-width: 960px) {
  .heroe__marco,
  .limites__cabeza,
  .plazos,
  .cotizador-pagina__titular,
  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Héroe a una columna, el mismo orden en los dos patrones: texto, botón, ficha y foto */
  .heroe__marco {
    row-gap: 2rem;
  }

  .heroe--pagina .heroe__marco,
  .heroe--pagina .heroe__marco:not(:has(.w-datos, .w-foto img)),
  .heroe--pagina .heroe__marco:not(:has(.w-datos)):has(.w-foto img),
  body[class*="servicio"] .heroe--pagina .heroe__marco:has(.w-datos),
  body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "migas" "texto" "accion" "ficha" "foto" "salida";
    grid-template-rows: none;
    row-gap: 0;
  }

  body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__lado {
    display: contents;
  }

  body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__foto {
    margin-top: 1.75rem;
  }

  .heroe--pagina .heroe__ficha {
    margin-top: 1.75rem;
  }

  .heroe--pagina .heroe__foto,
  .heroe--pagina .heroe__marco:not(:has(.w-datos)) .heroe__foto,
  body[class*="servicio"] .heroe--pagina .heroe__foto {
    margin-top: 1.75rem;
    margin-bottom: 0;
  }

  .heroe--pagina .heroe__foto .w-foto img,
  .heroe--pagina .heroe__marco:not(:has(.w-datos)) .heroe__foto .w-foto img,
  body[class*="servicio"] .heroe--pagina .heroe__foto .w-foto img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  /* Ficha de 5 datos en franja: 3 + 2, con los dos últimos más anchos */
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) > * {
    grid-column: span 2;
  }

  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
    grid-column: span 3;
  }

  .heroe__salida:not(:has(.w-cotizador)) {
    margin-top: 1.5rem;
  }

  .heroe__salida:has(.w-cotizador) {
    margin-top: 2rem;
  }

  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__titulo {
    margin-bottom: 1.25rem;
  }

  .heroe__titulo,
  .heroe--portada .heroe__titulo {
    max-width: 20ch;
  }

  .w-seccion,
  .w-faq {
    grid-template-columns: minmax(0, 1fr);
  }

  .w-seccion > *,
  .w-faq > *,
  .w-seccion > h2,
  .w-faq > h2 {
    grid-column: 1;
  }

  .w-seccion > h2,
  .w-faq > h2 {
    grid-row: auto;
    position: static;
    margin-bottom: 1.25rem;
  }

  .w-seccion > h2 + * {
    margin-top: 0;
  }

  .recorrido > .marco > .w-cta-linea,
  .recorrido > .marco > p {
    padding-left: 0;
  }

  .plazos__foto img {
    aspect-ratio: 16 / 10;
  }

  .destinos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cierre {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .cierre__acciones {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .pie__marco {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pie__marca {
    grid-column: 1 / -1;
  }

  .mercancia {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Héroe de ubicación a una columna: la foto recupera su proporción y el tablero su
     altura natural; si el héroe ya tiene botón, el del tablero sobra */
  body:not([class*="servicio"]) .heroe--pagina .heroe__marco:has(.w-datos) .heroe__foto .w-foto img {
    flex: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
  }

  body:not([class*="servicio"]) .heroe--pagina .ficha__datos > .w-datos {
    grid-auto-rows: auto;
  }

  .heroe__marco:has(.heroe__salida :is(.w-cta, .w-cotizador)) .ficha__boton {
    display: none;
  }

  /* Mapa: encima del índice en la portada; en el recorrido, texto y mapa apilados */
  .destinos-mapa,
  .mapa-fi--recorrido {
    grid-template-columns: minmax(0, 1fr);
  }

  .mapa-fi--portada {
    position: static;
    width: 100%;
    max-width: 22rem;
    margin-inline: auto;
  }

  .cifras-ruta {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .cifras-ruta__item {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    align-items: center;
    gap: 1rem;
  }
}

@media (max-width: 720px) {
  /* Carril ancho: al menos 16 px entre el borde de cada parada y el contenido */
  :root {
    --carril: 4.25rem;
    --parada: 2rem;
    --cabecera-alto: 4rem;
  }

  .parada,
  .tramo--salida > .marco::after,
  .tramo--llegada > .marco::after,
  .w-seccion::before,
  .w-faq::before {
    font-size: .9rem;
    border-width: 2px;
    box-shadow: 0 0 0 4px var(--banda-fondo, var(--fondo));
  }

  .tramo--hijas > .marco::after,
  .tramo--hermanas > .marco::after {
    top: calc(var(--aire) + .4rem);
    width: 1rem;
    height: 1rem;
    left: calc(var(--margen) + var(--carril) / 2 - .5rem);
    border-width: 2px;
  }

  .marca__icono {
    width: 2.2rem;
    height: 2.2rem;
  }

  .marca__linea1 {
    font-size: .85rem;
  }

  .marca__linea2 {
    font-size: 1.3rem;
  }

  /* El contenedor del cotizador guarda el mismo margen lateral que el resto de
     bloques (unos 40 px a cada lado), sin pegarse a los bordes */
  .banda--salida > .marco {
    padding-inline: calc(var(--margen) + 1.25rem);
  }

  .heroe__salida:has(.w-cotizador) {
    padding-inline: 1.25rem;
  }

  .tramo--salida > .marco::after {
    display: none;
  }

  .banda--salida .parada,
  .heroe__salida:has(.w-cotizador)::before {
    margin-bottom: 1.1rem;
    border-width: 2px;
    font-size: .9rem;
  }

  .banda--salida .parada::after,
  .heroe__salida:has(.w-cotizador)::after {
    display: none;
  }

  .mercancia__lado {
    gap: .8rem;
  }

  .pie__ruta {
    flex-direction: column;
    align-items: stretch;
  }

  .pie__trayecto {
    gap: .6rem;
    font-size: 1.3rem;
  }

  .pie__punto {
    width: 2.2rem;
    height: 2.2rem;
    font-size: 1rem;
  }

  .w-cotizador {
    min-height: 30rem;
  }

  .salida__rotulo::before,
  .salida__rotulo::after {
    width: 1.25rem;
  }

  /* Portada: titular, entradilla de 3 líneas y botones en una fila, para que la
     ficha asome en la primera pantalla */
  .heroe--portada .heroe__marco {
    padding-block: 1.6rem 2.25rem;
    row-gap: 1.6rem;
  }

  .heroe--portada .heroe__titulo {
    font-size: clamp(2.4rem, 1.6rem + 3.4vw, 2.75rem);
  }

  .heroe--portada .heroe__texto > * + * {
    margin-top: 1rem;
  }

  .heroe--portada .w-entradilla p {
    font-size: 1.125rem;
    line-height: 1.5;
  }

  .heroe__acciones {
    align-items: center;
    gap: .6rem 1.25rem;
    padding-top: .25rem;
  }

  .heroe__acciones .boton--primario {
    padding: .9rem 1.15rem;
  }

  .heroe__acciones .boton--secundario {
    padding: .45rem 0;
    border: 0;
    border-bottom: 2px solid currentColor;
    border-radius: 0;
    color: var(--acento-hondo);
  }

  .heroe__acciones .boton--secundario:hover {
    background: transparent;
    color: var(--acento);
  }

  .ficha {
    border-radius: 16px;
  }

  .w-datos__fila {
    grid-template-columns: minmax(0, 8rem) minmax(0, 1fr);
    padding: .65rem 0;
  }

  .w-datos dd {
    font-size: 1.15rem;
  }

  /* Fichas compactas en móvil: datos de dos en dos; el último, a lo ancho si queda solo */
  .ficha .w-datos,
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos,
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }

  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) > *,
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) > :nth-child(n + 4) {
    grid-column: auto;
  }

  .ficha .w-datos__fila {
    display: block;
    min-width: 0;
  }

  .ficha .w-datos__fila:nth-child(-n + 2) {
    border-top: 0;
  }

  .ficha .w-datos > :last-child:nth-child(odd),
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos > :last-child:nth-child(odd),
  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos:has(> :nth-child(5):last-child) > :last-child {
    grid-column: 1 / -1;
  }

  /* Contacto: el teléfono a lo ancho, arriba del resto */
  body[class*="contacto"] .heroe--pagina .heroe__ficha .w-datos > :first-child {
    grid-column: 1 / -1;
  }

  .ficha .w-datos dd {
    margin-top: .2rem;
    font-size: 1.08rem;
  }

  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos {
    row-gap: .9rem;
  }

  body[class*="servicio"] .heroe--pagina .heroe__ficha .w-datos__fila {
    padding-left: .75rem;
  }

  .pasos {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  .pasos::before {
    display: none;
  }

  .paso p {
    max-width: none;
  }

  .banda-foto__lema {
    border-radius: 0 12px 12px 0;
  }

  .w-faq__resp {
    padding-right: 0;
  }

  .w-hijas__rejilla,
  .w-hijas__rejilla:has(> :nth-child(13)) {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
  }

  .w-tarjeta__nombre {
    font-size: 1.25rem;
  }

  /* Hermanas en móvil: lista de una columna, filas iguales, sin huecos a la derecha */
  .w-hermanas__enlaces {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    border-top: 1px solid var(--filete);
  }

  .w-hermanas__enlaces a,
  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces a {
    gap: .7rem;
    min-height: 3.25rem;
    padding: .7rem .25rem;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--filete);
    border-radius: 0;
    font-size: 1.15rem;
  }

  .w-hermanas__enlaces a::after {
    content: "";
    flex: none;
    width: 1rem;
    height: 1rem;
    margin-left: auto;
    background: var(--acento);
    -webkit-mask: var(--svg-flecha) center / contain no-repeat;
    mask: var(--svg-flecha) center / contain no-repeat;
  }

  .w-hermanas__enlaces a:hover {
    transform: none;
  }

  .w-tarjeta {
    min-height: 4.25rem;
    justify-content: center;
  }

  .w-plegar {
    display: inline-flex;
  }

  /* Listas largas de hermanas: plegadas tras su título en un desplegable; al abrirse,
     dos columnas compactas para no formar un muro de una sola columna */
  .w-hermanas--plegable .w-hermanas__titulo {
    margin-bottom: 0;
  }

  .w-hermanas--plegable:not(.w-hermanas--abierta) .w-hermanas__enlaces {
    display: none;
  }

  .w-hermanas--plegable .w-plegar {
    margin-top: 1rem;
  }

  .w-hermanas--abierta .w-hermanas__enlaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    margin-top: 1rem;
  }

  .w-hermanas--abierta .w-hermanas__enlaces a {
    min-height: 2.9rem;
    font-size: 1.05rem;
  }

  .w-hermanas--abierta .w-hermanas__enlaces a::after {
    display: none;
  }

  /* Pie: la columna de regiones se queda en un solo enlace al índice de destinos */
  .pie__nav--regiones .pie__lista {
    display: none;
  }

  .pie__nav--regiones .pie__todas {
    margin-top: 0;
  }

  /* Destinos: una columna de zonas plegables con cabecera bien marcada */
  .destinos {
    grid-template-columns: minmax(0, 1fr);
    gap: .6rem;
  }

  .destinos__columna {
    display: grid;
    gap: .6rem;
  }

  .destinos__columna > * + * {
    margin-top: 0;
  }

  /* Acordeón por zona: cabecera oscura con nombre, cuenta, contexto y chevron */
  .destinos__grupo,
  .destinos__columna:nth-child(even) .destinos__grupo {
    border-radius: 12px;
  }

  .destinos__grupo:hover {
    transform: none;
    box-shadow: none;
  }

  .destinos__zona {
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .3rem .75rem;
    padding: .95rem 1.1rem;
    border-bottom: 0;
    background: var(--noche);
    cursor: pointer;
  }

  .destinos__zona-nombre {
    color: var(--crema);
    font-size: 1.15rem;
  }

  .destinos__zona-cuenta {
    color: var(--noche-tenue);
  }

  .destinos__contexto {
    grid-row: 2;
    font-size: .92rem;
    color: var(--noche-tenue);
  }

  .destinos__zona::after {
    content: "";
    grid-column: 3;
    grid-row: 1;
    width: 1.1rem;
    height: 1.1rem;
    background: var(--terracota-claro);
    -webkit-mask: var(--svg-chevron) center / contain no-repeat;
    mask: var(--svg-chevron) center / contain no-repeat;
    transition: transform .2s ease;
  }

  .destinos__grupo[open] > .destinos__zona::after {
    transform: rotate(180deg);
  }

  .destinos__lista {
    padding: .2rem 1.1rem .4rem;
  }

  .destino__ciudades {
    padding-left: 2.45rem;
  }

  .cierre__acciones .boton {
    flex: 1 1 100%;
  }

  .pie__marco {
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem;
  }

  /* Ritmo más compacto en móvil: menos aire entre bandas */
  :root {
    --aire: 2.75rem;
  }

  /* Antetítulo: tracking más corto y, en la portada, solo la ruta en una línea */
  .w-antetitulo {
    letter-spacing: .08em;
    font-size: .95rem;
  }

  .w-antetitulo__largo {
    display: none;
  }

  .w-antetitulo__ruta {
    white-space: nowrap;
  }

  /* Pasos: número e icono en línea con el título, texto debajo, sin aire de sobra */
  .pasos {
    gap: 1.5rem;
    margin-top: 2rem;
  }

  .paso {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 1rem;
    row-gap: .4rem;
    align-items: center;
  }

  .paso__cabeza {
    grid-row: 1 / span 2;
    align-self: start;
  }

  .paso__icono {
    display: none;
  }

  .paso__num {
    width: 2.75rem;
    height: 2.75rem;
    font-size: 1.3rem;
    box-shadow: none;
  }

  .paso h3 {
    margin-top: 0;
  }

  .paso p {
    grid-column: 2;
  }

  /* Tabla de modalidades de la portada: tarjetas apiladas */
  .w-tabla--tarjetas {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .w-tabla--tarjetas table,
  .limites .w-tabla--tarjetas table {
    min-width: 0;
    font-size: 1.05rem;
  }

  .limites .w-tabla--tarjetas td {
    padding: .3rem 0;
    vertical-align: top;
  }

  .limites .w-tabla--tarjetas tbody td:first-child {
    padding: 0 0 .35rem;
    background: transparent;
    border-left: 0;
    font-size: 1.35rem;
  }

  .limites .w-tabla--tarjetas tbody tr:nth-child(even) td:first-child,
  .limites .w-tabla--tarjetas tbody tr:hover td:first-child {
    background: transparent;
  }

  .limites__tabla {
    margin-top: 1.75rem;
  }

  .w-tabla--tarjetas table,
  .w-tabla--tarjetas tbody,
  .w-tabla--tarjetas tr,
  .w-tabla--tarjetas td {
    display: block;
  }

  /* La cabecera sigue en el código para lectores de pantalla, con sus colores AA */
  .w-tabla--tarjetas thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .w-tabla--tarjetas tbody tr {
    padding: .9rem 1.1rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--filete);
    border-left: 4px solid var(--primario);
    border-radius: 12px;
  }

  .w-tabla--tarjetas tbody tr + tr {
    margin-top: .7rem;
  }

  .w-tabla--tarjetas tbody tr:nth-child(even) td,
  .w-tabla--tarjetas tbody tr:hover td {
    background: transparent;
  }

  .w-tabla--tarjetas td {
    display: grid;
    grid-template-columns: 5.5rem minmax(0, 1fr);
    gap: .75rem;
    padding: .3rem 0;
    border-top: 0;
  }

  .w-tabla--tarjetas td::before {
    content: attr(data-rotulo);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    line-height: 1.8;
    color: var(--tenue);
  }

  .w-tabla--tarjetas tbody td:first-child {
    display: block;
    padding: 0 0 .35rem;
    font-family: var(--titulos);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.15;
  }

  .w-tabla--tarjetas tbody td:first-child::before {
    display: none;
  }

  /* Qué viaja y qué no: dos bloques cortos con el icono junto al título */
  .mercancia {
    gap: .8rem;
    margin-top: 1.5rem;
  }

  .mercancia__lado {
    gap: .5rem .75rem;
    padding: 1.1rem 1.15rem 1.2rem;
  }

  .mercancia__icono {
    width: 2rem;
    height: 2rem;
  }

  .mercancia__lado h3 {
    font-size: 1.5rem;
  }

  .mercancia__lado p {
    font-size: 1.02rem;
    line-height: 1.5;
  }

  /* Banda de foto y foto de plazos, más bajas */
  .banda-foto__imagen {
    height: 13rem;
  }

  .banda-foto__marco {
    margin-top: -2.5rem;
  }

  .banda-foto__lema {
    font-size: 1.35rem;
  }

  .plazos__foto img {
    aspect-ratio: 2 / 1;
  }

  .bloque-icono {
    padding-top: 1.1rem;
    margin-top: 1.1rem;
  }

  .cabeza-seccion__texto {
    font-size: 1.05rem;
  }

  /* Tablas de la fábrica en móvil (hasta 4 columnas), sin scroll ni valores escondidos:
     · 2 columnas → filas concepto | valor a todo el ancho, sin anchura mínima.
     · 3 o 4 columnas → una tarjeta por fila: el primer dato de título y el resto
       debajo, alineados con una cabecera que repite la misma rejilla. */
  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(5))) table {
    min-width: 0;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) th,
  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) td {
    padding: .75rem .9rem;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tr > :first-child {
    width: 46%;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) {
    --sub: 2;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(4)):not(:has(tr > :nth-child(5))) {
    --sub: 3;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) :is(table, thead, tbody) {
    display: block;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tr {
    display: grid;
    grid-template-columns: repeat(var(--sub), minmax(0, 1fr));
    gap: .25rem .9rem;
    padding: .85rem 1rem .95rem;
    border: 1px solid var(--filete);
    border-left: 4px solid var(--primario);
    border-radius: 12px;
    background: var(--superficie);
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) thead tr {
    margin-bottom: .6rem;
    background: var(--noche);
    border-color: var(--noche);
    border-left-color: var(--primario);
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr + tr {
    margin-top: .6rem;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) :is(th, td) {
    display: block;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) thead th {
    background: transparent;
    color: var(--crema);
    font-size: .88rem;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tr > :first-child {
    grid-column: 1 / -1;
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr > :first-child {
    margin-bottom: .2rem;
    font-family: var(--titulos);
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--texto);
  }

  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr:nth-child(even) td,
  .w-tabla:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr:hover td {
    background: transparent;
  }

  /* Destinos en acordeón: sin alturas mínimas de la rejilla de escritorio */
  .destinos__zona,
  .destino {
    min-height: 0;
  }

  /* Respiros del recorrido: un poco menos de aire en la franja arena */
  body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even) {
    padding-block: 2rem;
  }

  body:not([class*="contacto"]) .recorrido .w-seccion:nth-of-type(even)::before {
    top: 1.8rem;
  }

  /* Secciones largas plegadas (la clase y el botón los pone web.js): se ven el titular y
     los dos primeros bloques, y el botón despliega el resto */
  .w-seccion--plegable:not(.w-seccion--abierta) > :nth-child(n + 4):not(.w-plegar) {
    display: none;
  }

  .w-seccion--plegable > .w-plegar--seccion {
    justify-self: start;
    margin-top: .9rem;
  }

  body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .w-plegar--seccion {
    border-color: var(--acento);
    color: var(--acento-hondo);
  }

  /* Mapa y cifras en móvil: compactos y centrados, dentro del ancho */
  .destinos-mapa .destinos {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Mapa en móvil: a todo el ancho disponible (el del recorrido sale sobre el carril de
     la ruta), puntos y números más grandes para que se lean a unos 12 px */
  .mapa-fi--portada {
    max-width: none;
    padding: 1rem .5rem .75rem;
  }

  .mapa-fi--recorrido {
    gap: 1.25rem;
    margin-left: calc(-1 * var(--carril));
    padding: 1.25rem .75rem 1.1rem;
    border-radius: 16px;
  }

  .mapa-fi--recorrido .mapa-fi__texto {
    padding-inline: .35rem;
  }

  .mapa-fi--recorrido .mapa-fi__svg {
    max-width: none;
  }

  .mapa-fi--recorrido::before {
    display: none;
  }

  .mapa-fi__region circle,
  .mapa-fi__salida circle {
    r: 13.5px;
  }

  .mapa-fi__region text,
  .mapa-fi__salida text {
    font-size: 14.5px;
    transform: translateY(1.5px);
    transform-box: fill-box;
  }

  .mapa-fi__mares text,
  .mapa-fi__desde {
    font-size: 16px;
  }

  .mapa-fi__pais {
    stroke-width: 2.5;
  }

  .mapa-fi__ruta {
    stroke-width: 4;
  }

  :root {
    --r-halo: 6;
  }

  body:is([class*="geo"], [class*="region"], [class*="division"], [class*="provincia"], [class*="ciudad"]) .mapa-fi__aqui {
    margin-left: 0;
  }

  .cifras-ruta::before {
    top: 1.4rem;
    left: calc(-1 * var(--carril) / 2 - .5rem);
    width: 1rem;
    height: 1rem;
    border-width: 2px;
  }

  .mapa-fi__leyenda {
    font-size: .92rem;
  }

  .cifras-ruta {
    padding: 1.25rem 1.1rem;
    border-radius: 16px;
  }

  .cifras-ruta__item {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding-left: .9rem;
  }

  .cifras-ruta__num {
    font-size: 2.4rem;
  }

  .cifras-ruta__txt {
    font-size: .98rem;
  }

  /* Tablas de dos columnas (concepto | valor): tarjetas de dos en dos, con el valor
     como dato grande; la cabecera sigue en el código con sus colores AA */
  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) {
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) table {
    display: block;
    min-width: 0;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) thead,
  .w-tabla.w-tabla--rotulada thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-width: 0;
    padding: .8rem .9rem .9rem;
    background: var(--superficie);
    border: 1px solid var(--filete);
    border-top: 3px solid var(--primario);
    border-radius: 12px;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody :is(th, td) {
    display: block;
    width: auto;
    padding: 0;
    border: 0;
    background: transparent;
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr > :first-child {
    width: auto;
    font-family: var(--cuerpo);
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tenue);
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr > :last-child {
    font-family: var(--titulos);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--texto);
  }

  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr:nth-child(even) td,
  .w-tabla:not(.w-tabla--tarjetas):not(:has(tr > :nth-child(3))) tbody tr:hover td {
    background: transparent;
  }

  /* Tablas de 3 o 4 columnas con rótulos (los pone web.js): una tarjeta por fila, el
     primer dato de título y cada valor con su rótulo encima, a lo ancho, sin columnas
     estrechas ni rótulos partidos en tres líneas */
  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) thead th {
    background: var(--noche);
    color: var(--crema);
  }

  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) thead tr {
    display: block;
    margin: 0;
    padding: 0;
    border: 0;
  }

  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: .9rem 1rem .5rem;
    border: 1px solid var(--filete);
    border-top: 3px solid var(--primario);
  }

  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr > :first-child {
    padding-bottom: .55rem;
  }

  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr > :not(:first-child) {
    padding: .55rem 0 .6rem;
    border-top: 1px dashed var(--filete);
    font-family: var(--titulos);
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--texto);
  }

  .w-tabla.w-tabla--rotulada:not(.w-tabla--tarjetas):has(tr > :nth-child(3)):not(:has(tr > :nth-child(5))) tbody tr > :not(:first-child)::before {
    content: attr(data-rotulo);
    display: block;
    margin-bottom: .2rem;
    font-family: var(--cuerpo);
    font-size: .78rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--tenue);
  }

  /* Pocas hermanas (Otras ciudades de la región): tarjetas como las hijas, con
     chincheta y flecha, no filas sueltas */
  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces {
    gap: .6rem;
    border-top: 0;
  }

  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces a {
    gap: .85rem;
    min-height: 4.25rem;
    padding: .9rem 1rem;
    background: var(--superficie);
    border: 1px solid var(--filete);
    border-radius: var(--radio);
    font-size: 1.35rem;
  }

  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces a::before {
    width: 1.4rem;
    height: 1.4rem;
    border: 0;
    border-radius: 0;
    background: var(--acento);
    -webkit-mask: var(--svg-chincheta) center / contain no-repeat;
    mask: var(--svg-chincheta) center / contain no-repeat;
  }

  .w-hermanas:not(:has(.w-hermanas__enlaces > :nth-child(5))) .w-hermanas__enlaces a::after {
    width: 1.2rem;
    height: 1.2rem;
  }
}

@media (max-width: 400px) {
  .w-datos__fila {
    grid-template-columns: minmax(0, 1fr);
    gap: .15rem;
  }

  .ficha__punto {
    font-size: 1.05rem;
  }

  .destino__ciudades {
    padding-left: 0;
  }
}