/* ==========================================================================
   Transporte directo a Eslovenia · hoja de estilo
   Paleta «Rojo carretera sobre blanco roto» · Fraunces (títulos) + Inter (texto)
   Maqueta editorial: titular a todo el ancho, entradilla, columnas con
   capitulares, fotos con pie y secciones numeradas.
   Nada de esta hoja entra en el formulario del cotizador: las reglas base
   excluyen .w-cotizador y .recorrido__cotizador.
   ========================================================================== */

/* ---------- 1. Variables ---------- */

:root {
  --papel: #FFFDF9;
  --tinta: #1A1A1A;
  --rojo: #C8102E;
  --rojo-hondo: #A00D25;
  --superficie: #F4F1EC;
  --superficie-2: #E6E0D6;
  --filete: #D6CEC2;
  --texto-cuerpo: #2B2724;
  --gris: #5A5550;
  --pie-texto: #F4F1EC;
  --pie-gris: #B8B2AA;
  --pie-rojo: #FF7A8A;
  --pie-filete: #3A3631;

  --titulos: "Fraunces", Georgia, "Times New Roman", serif;
  --texto: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --ancho: 85rem;
  --radio: 2px;
  /* Filete doble: reservado al héroe (bajo el titular de cada página). La
     cabecera, las secciones y el cierre llevan filete simple o el número rojo */
  --filete-doble: 4px double var(--tinta);
  --transicion: .22s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Cimientos (sin tocar el cotizador) ---------- */

:where(*:not(.w-cotizador *, .recorrido__cotizador *)),
:where(*:not(.w-cotizador *, .recorrido__cotizador *))::before,
:where(*:not(.w-cotizador *, .recorrido__cotizador *))::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(h1, h2, h3, h4):where(:not(.w-cotizador *, .recorrido__cotizador *)) {
  margin: 0;
  font-family: var(--titulos);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--tinta);
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
}

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

:where(a):where(:not(.w-cotizador *, .recorrido__cotizador *)) {
  color: inherit;
}

:where(a, summary):where(:not(.w-cotizador *, .recorrido__cotizador *)):focus-visible,
.menu-boton:focus-visible,
.w-hermanas__mas:focus-visible {
  outline: 2px solid var(--rojo);
  outline-offset: 3px;
  border-radius: var(--radio);
}

:where(strong):where(:not(.w-cotizador *, .recorrido__cotizador *)) {
  font-weight: 600;
  color: var(--tinta);
}

.contenedor {
  width: min(100% - 2.5rem, var(--ancho));
  margin-inline: auto;
}

.saltar {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 100;
  padding: .65rem 1rem;
  background: var(--tinta);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
}

.saltar:focus {
  top: 1rem;
}

.rojo {
  color: var(--rojo);
}

/* ---------- 3. Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 2.875rem;
  padding: .7rem 1.3rem;
  border: 1.5px solid transparent;
  border-radius: var(--radio);
  font-family: var(--texto);
  font-size: .975rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transicion), color var(--transicion), border-color var(--transicion);
}

.boton--rojo {
  background: var(--rojo);
  color: var(--papel);
}

.boton--rojo:hover {
  background: var(--rojo-hondo);
}

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

.boton--tinta:hover {
  background: var(--tinta);
  color: var(--papel);
}

.boton__flecha {
  transition: transform var(--transicion);
}

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

.acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem;
}

/* ---------- 4. Cabecera y menú ---------- */

.cabecera {
  position: relative;
  z-index: 20;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
}

.cabecera__cinta {
  display: none;
  border-bottom: 1px solid var(--superficie-2);
  font-size: .8125rem;
  color: var(--gris);
}

.cabecera__cinta-dentro {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding-block: .45rem;
}

.cabecera__cinta p {
  margin: 0;
}

.cabecera__cinta a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

.cabecera__cinta a:hover {
  color: var(--rojo);
}

.cabecera__flecha {
  color: var(--rojo);
  font-weight: 700;
}

.cabecera__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1.5rem;
  padding-block: .75rem;
}

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

.marca__simbolo {
  flex: none;
  width: 2.375rem;
  height: 2.375rem;
  transition: transform var(--transicion);
}

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

.marca__texto {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.marca__linea1 {
  font-family: var(--texto);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gris);
}

.marca__linea2 {
  margin-top: .22rem;
  font-family: var(--titulos);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.menu-boton {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  background: transparent;
  color: var(--tinta);
  font: 600 .9rem/1 var(--texto);
  cursor: pointer;
  transition: background-color var(--transicion), color var(--transicion);
}

.menu-boton:hover {
  background: var(--tinta);
  color: var(--papel);
}

.menu-boton__icono {
  position: relative;
  width: 1.1rem;
  height: .75rem;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: border-color var(--transicion);
}

.menu-boton__icono::before,
.menu-boton__icono::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: currentColor;
  transition: transform var(--transicion);
}

.menu-boton[aria-expanded="true"] .menu-boton__icono {
  border-color: 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);
}

.menu {
  display: none;
  flex-basis: 100%;
  min-width: 0;
}

.menu.menu--abierto {
  display: block;
}

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tinta);
}

.menu__lista li {
  border-bottom: 1px solid var(--superficie-2);
}

.menu__enlace {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 0;
  font-family: var(--titulos);
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--transicion);
}

.menu__enlace::after {
  content: "→";
  font-family: var(--texto);
  font-size: 1rem;
  color: var(--rojo);
  transition: transform var(--transicion);
}

.menu__enlace:hover {
  color: var(--rojo);
}

.menu__pie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .9rem;
  padding: 1.1rem 0 .5rem;
}

.menu__telefono {
  margin: 0;
  font-size: .9375rem;
  color: var(--gris);
}

.menu__telefono a {
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- 5. Componentes de cabecera de página ---------- */

.w-migas {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--gris);
}

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

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

.w-migas li + li::before {
  content: "";
  flex: none;
  width: .38rem;
  height: .38rem;
  margin: 0 .7rem 0 .45rem;
  border-top: 1.5px solid var(--rojo);
  border-right: 1.5px solid var(--rojo);
  transform: rotate(45deg);
}

.w-migas a {
  color: var(--gris);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--transicion), border-color var(--transicion);
}

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

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

/* La raya va colgada a la izquierda: si el antetítulo pasa a dos líneas, la
   segunda arranca bajo el texto y no bajo la raya */
.w-antetitulo {
  position: relative;
  display: block;
  margin: 0;
  padding-left: 2.75rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rojo);
}

.w-antetitulo::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 2rem;
  height: 2px;
  background: currentColor;
}

.w-entradilla p {
  max-width: 32em;
  font-size: clamp(1.1875rem, 1.12rem + .3vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta);
}

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

.w-datos {
  margin: 0;
  border-top: 3px solid var(--tinta);
}

.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(6.5rem, 40%) minmax(0, 1fr);
  gap: .25rem 1rem;
  align-items: baseline;
  padding: .7rem 0;
  border-bottom: 1px solid var(--filete);
}

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

.w-datos dd {
  margin: 0;
  font-family: var(--titulos);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  hyphens: none;
  text-wrap: balance;
}

/* ---------- 6. Héroe de las páginas interiores ---------- */

.pagina,
.portada {
  counter-reset: capitulo;
}

.heroe {
  padding-block: 1.25rem 2rem;
}

.heroe .w-migas {
  margin-bottom: 1.75rem;
}

.heroe h1 {
  margin-top: .85rem;
  font-size: clamp(2rem, 1.1rem + 4.1vw, 5.25rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -.025em;
  overflow-wrap: break-word;
}

.heroe__pie {
  display: grid;
  gap: 1.75rem;
  margin-top: 1.75rem;
  padding-top: 1.75rem;
  border-top: var(--filete-doble);
}

.heroe__pie:empty {
  display: none;
}

/* Columna izquierda del héroe: entradilla y, justo debajo, los botones; nunca
   se estira hasta la altura de la ficha (sin hueco entre texto y botones). Sin
   rótulos fijos: lo propio de cada página es su ficha {{DATOS}} */
.heroe__lead {
  display: grid;
  gap: 1.75rem;
  align-content: start;
  align-self: start;
  min-width: 0;
}

.heroe__botones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
}

/* Botón de llamada del héroe: mismo tamaño y letra que «Calcular precio» en
   todas las páginas, también en Contacto */
.boton svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
}

/* Sistema editorial único de cabecera: migas, antetítulo rojo con raya, H1 y
   el filete doble de la cabecera bajo el titular, igual en todos los tipos.
   Lo que cambia según el tipo es solo la ficha de datos de la columna derecha:
   servicio = ficha técnica en superficie con el bulto y el palé dibujados;
   región = hoja de ruta en panel de tinta; ciudad = cifra destacada.
   La fábrica pone la clase en <body> ({{CLASE}}: pag-servicio, pag-division,
   pag-ciudad…); por si sus nombres cambian, cada variante reconoce también la
   página por su estructura: servicio = cotizador en el primer bloque; región =
   tiene hijas; ciudad = tres niveles de migas y sin hijas. */

:is(body[class*="servicio"], body:not([class*="contacto"]):has(.primer-bloque > .w-cotizador)) .heroe .w-datos {
  padding: 1.25rem 1.25rem .5rem;
  border-top: 0;
  border-left: 4px solid var(--rojo);
  background: var(--superficie);
}

:is(body[class*="servicio"], body:not([class*="contacto"]):has(.primer-bloque > .w-cotizador)) .heroe .w-datos::before {
  content: "";
  display: block;
  grid-column: 1 / -1;
  height: 6.5rem;
  margin-bottom: .75rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 112' fill='none' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 104h224' stroke='%23D6CEC2' stroke-width='2'/%3E%3Cg stroke='%231A1A1A' stroke-width='2.2'%3E%3Cpath d='M24 91h112v5H24zM26 96h10v8H26zM75 96h10v8H75zM124 96h10v8h-10z'/%3E%3Cpath d='M30 51h80v40H30zM30 51l20-12h80l-20 12M110 51l20-12v40l-20 12'/%3E%3Cpath d='M160 73h40v31h-40zM160 73l12-8h40l-12 8M200 73l12-8v31l-12 8'/%3E%3C/g%3E%3Cg stroke='%23C8102E' stroke-width='2.2'%3E%3Cpath d='M70 51l20-12M70 51v40M180 73l12-8'/%3E%3Cpath d='M30 27h80M30 23v8M110 23v8M222 65v31M218 65h8M218 96h8'/%3E%3C/g%3E%3C/svg%3E") left center / contain no-repeat;
}

:is(body[class*="servicio"], body:not([class*="contacto"]):has(.primer-bloque > .w-cotizador)) .heroe .w-datos__fila {
  border-bottom-color: var(--superficie-2);
}

/* Foto junto al cotizador: recortada hacia la carretera, no hacia el cielo */
.primer-bloque:has(> .w-cotizador) > .w-foto img {
  object-position: 50% 82%;
}

/* Fotos de noche o de anochecer del banco: más luz para que no queden como un
   bloque casi negro junto al texto o al cotizador */
.w-foto img:is([src*="banco-internacional-8"], [src*="banco-internacional-3"], [src*="banco-grupaje-6"]) {
  filter: sepia(.1) saturate(.95) brightness(1.38) contrast(.9);
}

/* Región (todas igual, tengan una ciudad o cuatro): franja de superficie y, en
   la columna derecha, la ficha como hoja de ruta en panel de tinta (paradas
   sobre una línea), arriba y a la altura de la entradilla. Solo las regiones:
   la ciudad tiene su propia ficha con cifra destacada (más abajo) */

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe {
  background: var(--superficie);
  padding-bottom: 2.5rem;
  margin-bottom: 2.5rem;
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos {
  position: relative;
  padding: 1rem 1.25rem 1rem 3rem;
  border-top: 0;
  background: var(--tinta);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos::before {
  content: "";
  position: absolute;
  left: 1.42rem;
  top: 2.1rem;
  bottom: 2.4rem;
  width: 2px;
  background: var(--pie-gris);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos__fila {
  position: relative;
  grid-template-columns: minmax(0, 1fr);
  gap: .15rem;
  padding: .6rem 0 .75rem;
  border-bottom: 0;
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos__fila::before {
  content: "";
  position: absolute;
  left: -1.95rem;
  top: .85rem;
  width: .85rem;
  height: .85rem;
  border: 2px solid var(--pie-rojo);
  border-radius: 50%;
  background: var(--tinta);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos__fila:is(:first-child, :last-child)::before {
  background: var(--pie-rojo);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos dt {
  color: var(--pie-gris);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe .w-datos dd {
  color: var(--papel);
}

/* Las ciudades de la región (abajo, no en la cabecera) cambian según cuántas
   hay: 4 o más, índice numerado a varias columnas; 2-3, tarjetas grandes;
   una sola, tarjeta destacada junto a las regiones hermanas. */

/* 2-3 ciudades: tarjetas grandes sobre superficie */
:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))):has(.w-hijas__rejilla > :nth-child(2)):not(:has(.w-hijas__rejilla > :nth-child(4))) .w-hijas__rejilla {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: 1rem;
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))):has(.w-hijas__rejilla > :nth-child(2)):not(:has(.w-hijas__rejilla > :nth-child(4))) .w-tarjeta {
  padding: 1.25rem 1.25rem 1.5rem;
  border-top: 3px solid var(--tinta);
  background: var(--superficie);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))):has(.w-hijas__rejilla > :nth-child(2)):not(:has(.w-hijas__rejilla > :nth-child(4))) .w-tarjeta__nombre {
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
}

:is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))):has(.w-hijas__rejilla > :nth-child(2)):not(:has(.w-hijas__rejilla > :nth-child(4))) .w-tarjeta:hover {
  box-shadow: none;
  border-top-color: var(--rojo);
}

/* Fotos: un mismo tratamiento cálido para que el banco no se lea como tal y
   ninguna foto fría rompa el rojo y blanco roto */
.w-foto img,
.banda-foto img {
  filter: sepia(.14) saturate(.9) contrast(1.03) brightness(1.02);
}

/* Ciudad: cabecera propia en banda de tinta a sangre (la región va en
   superficie y el servicio en papel), con la ficha de superficie y cinta roja
   encima. La ficha va en UNA columna: el primer dato como cifra destacada y el
   resto en filas etiqueta | valor, sin rejilla que deje celdas vacías */
:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe {
  margin-bottom: 3rem;
  padding-bottom: 2.75rem;
  background: var(--tinta);
  color: var(--papel);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe :is(h1, .w-entradilla p, .w-migas [aria-current]) {
  color: var(--papel);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe :is(.w-migas, .w-migas a) {
  color: var(--pie-gris);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-migas a:hover {
  color: var(--papel);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-migas li + li::before {
  border-color: var(--pie-rojo);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-antetitulo {
  color: var(--pie-rojo);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .heroe__pie {
  border-top-color: var(--pie-gris);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .heroe__botones {
  border-top-color: var(--pie-filete);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .boton--tinta {
  border-color: var(--papel);
  color: var(--papel);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .boton--tinta:hover {
  background: var(--papel);
  color: var(--tinta);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos {
  padding: 1.1rem 1.5rem .4rem;
  border-top: 4px solid var(--rojo);
  background: var(--superficie);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos__fila {
  border-bottom-color: var(--superficie-2);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos__fila:first-child {
  grid-template-columns: minmax(0, 1fr);
  gap: .2rem;
  padding: .2rem 0 1rem;
  border-bottom: 1px solid var(--tinta);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos__fila:first-child dt {
  color: var(--rojo-hondo);
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos__fila:first-child dd {
  font-size: clamp(1.75rem, 1.35rem + 1.5vw, 2.5rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -.02em;
}

:is(body[class*="ciudad"], body[class*="municipio"], body:not([class*="division"], [class*="region"], [class*="provincia"]):has(.w-migas li:nth-child(3)):not(:has(.w-hijas))) .pagina .heroe .w-datos__fila:last-child {
  border-bottom: 0;
}

/* Región y ciudad: las fotos de banco no son de Eslovenia y no muestran el
   sitio; antes que una foto genérica bajo la cabecera, ninguna. La banda de la
   cabecera (superficie en región, tinta en ciudad) hace de módulo visual */
:is(body[class*="geo"], body[class*="division"], body[class*="region"], body[class*="provincia"], body[class*="ciudad"], body[class*="municipio"]) .primer-bloque > .w-foto {
  display: none;
}

:is(body[class*="geo"], body[class*="division"], body[class*="region"], body[class*="provincia"], body[class*="ciudad"], body[class*="municipio"]) .primer-bloque:not(:has(> .w-cotizador, > .w-cta-linea)) {
  display: none;
}

:is(body[class*="geo"], body[class*="division"], body[class*="region"], body[class*="provincia"], body[class*="ciudad"], body[class*="municipio"]) .primer-bloque:not(:has(> .w-cotizador)) {
  margin-block: 0 3rem;
}

body[class*="contacto"] .heroe h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 4rem);
}

/* Contacto: la ficha (teléfono, horario, pago, empresa) es un panel de
   superficie a la altura de la entradilla */
body[class*="contacto"] .heroe .w-datos {
  padding: .5rem 1.25rem .75rem;
  border-top: 3px solid var(--tinta);
  background: var(--superficie);
}

body[class*="contacto"] .heroe .w-datos__fila {
  border-bottom-color: var(--superficie-2);
}

body[class*="contacto"] .heroe .w-datos__fila:last-child {
  border-bottom: 0;
}

/* ---------- 7. Primer bloque: foto y cotizador ---------- */

.primer-bloque {
  display: grid;
  gap: 2.5rem;
  margin-block: .5rem 3.5rem;
}

.primer-bloque:empty {
  display: none;
}

.primer-bloque > .w-cotizador {
  order: -1;
}

.w-cotizador {
  position: relative;
  width: 100%;
  min-width: 0;
  max-width: 47.5rem;
  margin-inline: auto;
}

.primer-bloque > .w-cotizador {
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete);
}

.w-cotizador > [data-cotizador-one],
.w-cotizador > .cotizador-one {
  max-width: 100%;
  margin-inline: auto;
}

.w-cotizador__titulo {
  margin: 0 0 1rem;
  font-family: var(--titulos);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tinta);
  hyphens: none;
  text-wrap: balance;
}

.w-cta-linea {
  margin: 1.75rem 0 0;
  justify-self: start;
  text-align: left;
}

/* Sin cotizador, el botón va pegado al pie de la foto, a la izquierda como
   todos los botones de la página */
.primer-bloque:not(:has(> .w-cotizador)) {
  row-gap: 1.25rem;
}

.primer-bloque > .w-cta-linea {
  margin: 0;
}

.w-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.875rem;
  padding: .75rem 1.35rem;
  border-radius: var(--radio);
  background: var(--rojo);
  color: var(--papel);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--transicion);
}

.w-cta::after {
  content: "→";
  transition: transform var(--transicion);
}

.w-cta:hover {
  background: var(--rojo-hondo);
}

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

.w-foto {
  margin: 0;
  min-width: 0;
}

.w-foto img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--superficie);
}

.w-foto figcaption {
  display: flex;
  gap: .65rem;
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--gris);
}

.w-foto figcaption::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  margin-top: .62em;
  background: var(--rojo);
}

.primer-bloque > .w-foto img {
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* ---------- 8. Cuerpo: secciones, tablas y preguntas ---------- */

.cuerpo {
  padding-bottom: 1rem;
}

.cuerpo > * + * {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.cuerpo > .w-seccion,
.cuerpo > .w-faq {
  max-width: 68rem;
}

.w-seccion {
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta);
  color: var(--texto-cuerpo);
  line-height: 1.7;
}

.w-seccion > h2,
.w-faq > h2,
.capitulo__cabeza > h2,
.nota__cuerpo > h2 {
  margin-bottom: 1.4rem;
  font-size: clamp(1.75rem, 1.25rem + 2vw, 3rem);
  line-height: 1.08;
  letter-spacing: -.02em;
  max-width: 24ch;
}

.w-seccion > h2::before,
.w-faq > h2::before,
.capitulo__cabeza > h2::before,
.nota__cuerpo > h2::before {
  counter-increment: capitulo;
  content: counter(capitulo, decimal-leading-zero);
  display: block;
  width: max-content;
  min-width: 2.75rem;
  margin-bottom: 1rem;
  padding-bottom: .3rem;
  border-bottom: 2px solid var(--rojo);
  font-family: var(--titulos);
  font-size: .9375rem;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.2;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

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

.w-seccion h3 {
  margin-top: 1.9rem;
  margin-bottom: -.25rem;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.2;
  break-after: avoid;
}

.w-seccion p {
  orphans: 3;
  widows: 3;
}

/* Una sola capitular por página y en el mismo sitio en todas: el primer
   párrafo de la primera sección */
.cuerpo > :nth-child(1 of .w-seccion) > h2 + p::first-letter,
.capitular::first-letter {
  float: left;
  margin: .07em .1em 0 -.02em;
  font-family: var(--titulos);
  font-size: 4.3em;
  font-weight: 700;
  line-height: .8;
  color: var(--rojo);
}

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

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

.w-seccion li {
  break-inside: avoid;
}

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

.w-seccion a:not([class]),
.w-faq a:not([class]),
.w-cierre a:not([class]),
.enlace {
  color: var(--rojo);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--transicion), text-decoration-thickness var(--transicion);
}

.w-seccion a:not([class]):hover,
.w-faq a:not([class]):hover,
.w-cierre a:not([class]):hover,
.enlace:hover {
  color: var(--tinta);
  text-decoration-thickness: 2px;
}

.w-seccion .w-foto {
  margin-block: 2rem;
}

/* Ritmo del cuerpo: el módulo cambia cada tres secciones para que el texto
   corrido no se haga muro (sobre todo en móvil). Con el texto de la fábrica,
   sin añadir nada: la 2.ª, 5.ª… van en franja de superficie con su primer
   párrafo como cita destacada. La numeración es la misma pequeña en todas. */
.cuerpo > :nth-child(3n + 2 of .w-seccion) {
  padding: 1.75rem 1.25rem 2rem;
  border-top: 3px solid var(--tinta);
  background: var(--superficie);
}

/* El primer párrafo de la franja, destacado en cuerpo Inter (algo mayor y en
   tinta). Solo si es corto (web.js marca .w-seccion--cita-corta: 3-4 líneas
   como mucho) pasa a cita en Fraunces, y solo en escritorio (ver al final). */
.cuerpo > :nth-child(3n + 2 of .w-seccion) > h2 + p {
  padding-left: 1rem;
  border-left: 2px solid var(--rojo);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.6;
  color: var(--tinta);
}

.cuerpo > :nth-child(3n + 2 of .w-seccion) > h2 + p + * {
  margin-top: 1.4rem;
}

/* Tablas: scroll horizontal propio y sombras que avisan de que hay más */

.w-tabla {
  margin-block: 1.75rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  border-top: 3px solid var(--tinta);
  background:
    linear-gradient(to right, var(--papel) 30%, rgba(255, 253, 249, 0)) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--papel) 30%, rgba(255, 253, 249, 0)) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, .16), transparent) left / .8rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, .16), transparent) right / .8rem 100% no-repeat scroll;
}

.w-tabla table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--texto-cuerpo);
  font-variant-numeric: tabular-nums;
}

/* Tablas anchas: medida de lectura, sin columnas perdidas en 85rem */
.capitulo .w-tabla,
.cuerpo .w-tabla {
  max-width: 64rem;
}

.w-tabla td:first-child {
  width: 22%;
}

.w-tabla caption {
  caption-side: top;
  padding: .9rem 0 .75rem;
  font-family: var(--titulos);
  font-size: 1.125rem;
  font-weight: 600;
  text-align: left;
  color: var(--tinta);
}

.w-tabla th {
  padding: .85rem 1.1rem;
  background: var(--tinta);
  border-bottom: 3px solid var(--rojo);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
  color: var(--papel);
}

.w-tabla tbody th {
  background: transparent;
  border-bottom: 1px solid var(--superficie-2);
  font-family: var(--titulos);
  font-size: 1.0625rem;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: top;
  color: var(--tinta);
}

.w-tabla td {
  padding: .95rem 1.1rem;
  border-bottom: 1px solid var(--superficie-2);
  vertical-align: top;
}

.w-tabla td:first-child {
  font-family: var(--titulos);
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--tinta);
}

.w-tabla tbody tr {
  transition: background-color var(--transicion);
}

.w-tabla tbody tr:nth-child(even) {
  background: rgba(244, 241, 236, .55);
}

.w-tabla tbody tr:hover {
  background: var(--superficie);
}

/* Preguntas frecuentes */

.w-faq {
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta);
}

.w-faq > h2 {
  margin-bottom: 1rem;
}

.w-faq__item {
  border-bottom: 1px solid var(--superficie-2);
}

.w-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.15rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--titulos);
  font-size: clamp(1.125rem, 1.05rem + .4vw, 1.375rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  transition: color var(--transicion);
}

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

.w-faq__item summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  margin-top: .05rem;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / .7rem 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px .7rem no-repeat;
  transition: transform var(--transicion);
}

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

.w-faq__item[open] summary {
  color: var(--rojo);
}

.w-faq__item[open] summary::after {
  transform: rotate(45deg);
}

.w-faq__resp {
  max-width: 46rem;
  padding: 0 3.25rem 1.4rem 0;
  color: var(--texto-cuerpo);
  line-height: 1.7;
}

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

/* ---------- 9. Remate: hijas, hermanas y cierre ---------- */

.remate {
  padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

.w-hijas {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  padding-top: 1.5rem;
  border-top: 3px solid var(--tinta);
}

.w-hijas__titulo {
  margin-bottom: 1.25rem;
  font-size: clamp(1.625rem, 1.25rem + 1.6vw, 2.5rem);
}

.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  column-gap: 2rem;
  counter-reset: hija;
}

.w-tarjeta {
  counter-increment: hija;
  position: relative;
  display: grid;
  grid-template-columns: 2.4rem minmax(0, 1fr) 1.25rem;
  grid-template-areas:
    "num nombre flecha"
    "num texto flecha";
  grid-template-rows: auto 1fr;
  column-gap: .75rem;
  row-gap: .3rem;
  padding: 1.1rem 0 1.3rem;
  border-top: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: box-shadow var(--transicion);
}

.w-tarjeta::before {
  grid-area: num;
  content: counter(hija, decimal-leading-zero);
  padding-top: .22rem;
  font-family: var(--titulos);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

.w-tarjeta::after {
  grid-area: flecha;
  content: "→";
  padding-top: .1rem;
  font-size: 1.05rem;
  color: var(--tinta);
  transition: transform var(--transicion), color var(--transicion);
}

.w-tarjeta__nombre {
  grid-area: nombre;
  font-family: var(--titulos);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.22;
  hyphens: none;
  text-wrap: balance;
  transition: color var(--transicion);
}

.w-tarjeta__texto {
  grid-area: texto;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gris);
}

.w-tarjeta:hover {
  box-shadow: inset 0 2px 0 var(--rojo);
}

.w-tarjeta:hover .w-tarjeta__nombre,
.w-tarjeta:hover::after {
  color: var(--rojo);
}

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

/* Una sola hija (p. ej. una región con una única ciudad con página): en vez de
   una rejilla con media fila vacía, una tarjeta destacada a todo el ancho */

.w-hijas__rejilla:has(> .w-tarjeta:only-child) {
  display: block;
}

.w-tarjeta:only-child {
  grid-template-columns: minmax(0, 1fr) 2.75rem;
  grid-template-areas:
    "nombre flecha"
    "texto flecha";
  column-gap: 1.5rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-top: 0;
  border-left: 4px solid var(--rojo);
  background: var(--superficie);
}

.w-tarjeta:only-child::before {
  content: none;
}

.w-tarjeta:only-child::after {
  align-self: center;
  justify-self: end;
  padding-top: 0;
  font-size: 1.75rem;
  color: var(--rojo);
}

.w-tarjeta:only-child .w-tarjeta__nombre {
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  line-height: 1.12;
}

.w-tarjeta:only-child .w-tarjeta__texto {
  max-width: 40em;
  font-size: 1rem;
  color: var(--texto-cuerpo);
}

.w-tarjeta:only-child:hover {
  box-shadow: none;
  background: var(--superficie-2);
}

.w-hermanas {
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: 1.5rem 1.25rem;
  background: var(--superficie);
  border-top: 3px solid var(--tinta);
}

.w-hermanas__titulo {
  margin-bottom: 1rem;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.625rem);
}

.w-hermanas__enlaces {
  columns: 8.5rem;
  column-gap: 1.5rem;
}

.w-hermanas__enlaces a {
  display: block;
  break-inside: avoid;
  padding: .5rem 0 .5rem 1.1rem;
  border-bottom: 1px solid var(--filete);
  position: relative;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  transition: color var(--transicion), padding-left var(--transicion);
}

.w-hermanas__enlaces a::before {
  content: "";
  position: absolute;
  left: .1rem;
  top: 1.02em;
  width: .36rem;
  height: .36rem;
  background: var(--rojo);
  transform: rotate(45deg);
}

.w-hermanas__enlaces a:hover {
  color: var(--rojo);
  padding-left: 1.35rem;
}

.w-hermanas--plegada .w-hermanas__enlaces > :nth-child(n + 11) {
  display: none;
}

.w-hermanas__mas {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 2.75rem;
  margin-top: 1rem;
  padding: .5rem 1rem;
  border: 1.5px solid var(--tinta);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  font: 600 .9rem/1 var(--texto);
  cursor: pointer;
}

.w-hermanas__mas[hidden] {
  display: none;
}

.w-hermanas__mas:hover {
  background: var(--tinta);
  color: var(--papel);
}

.w-cierre {
  margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  padding-top: 2.25rem;
  border-top: 3px solid var(--tinta);
}

.w-cierre p {
  max-width: 30ch;
  font-family: var(--titulos);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.375rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--tinta);
  hyphens: none;
  text-wrap: balance;
}

.w-cierre p + p {
  margin-top: 1rem;
}

.remate > .acciones {
  margin-top: 1.75rem;
}

/* ---------- 10. Portada ---------- */

.portada-heroe {
  padding-block: 1.5rem clamp(3rem, 2rem + 3vw, 5rem);
}

.portada-heroe h1 {
  margin-top: .9rem;
  font-size: clamp(1.875rem, .3rem + 6.6vw, 7rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.03em;
}

.portada-heroe__rejilla {
  display: grid;
  gap: 2.5rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: var(--filete-doble);
}

.portada-heroe__texto {
  display: grid;
  gap: 2rem;
  align-content: start;
  min-width: 0;
}

.portada-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.enlace-tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  white-space: nowrap;
}

.enlace-tel svg {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--rojo);
}

.enlace-tel:hover {
  color: var(--rojo);
}

/* Un solo filete en el héroe: el de la rejilla. El cotizador arranca a la
   altura del primer párrafo, sin línea propia. */
.portada-heroe .w-cotizador {
  min-height: 32.5rem;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
  background: none;
}

.capitulo {
  padding-block: clamp(3.5rem, 2.5rem + 4vw, 6.5rem);
}

.capitulo:not(.capitulo--franja) + .capitulo:not(.capitulo--franja) {
  padding-top: 0;
}

.capitulo__cabeza {
  display: grid;
  gap: 1rem;
  margin-bottom: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--tinta);
}

.capitulo__cabeza > h2 {
  margin-bottom: 0;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem);
  max-width: 20ch;
}

.capitulo__intro {
  max-width: 32em;
  font-size: clamp(1.125rem, 1.08rem + .25vw, 1.25rem);
  line-height: 1.55;
  color: var(--texto-cuerpo);
}

.columnas {
  color: var(--texto-cuerpo);
  line-height: 1.7;
}

.columnas p + p {
  margin-top: 1rem;
}

/* Modalidades */

.modalidades {
  display: grid;
  margin-top: 3rem;
  border-top: 3px solid var(--tinta);
}

.modalidad {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.75rem 0 2rem;
  border-bottom: 1px solid var(--superficie-2);
}

.modalidad__icono {
  width: 3rem;
  height: 3rem;
  color: var(--rojo);
}

.modalidad__titulo {
  font-size: 1.5rem;
}

.modalidad__cifra {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem .7rem;
}

.modalidad__numero {
  font-family: var(--titulos);
  font-size: clamp(3.25rem, 2.5rem + 2.5vw, 4.75rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.035em;
  color: var(--tinta);
  font-variant-numeric: lining-nums;
}

.modalidad__unidad {
  max-width: 11rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--gris);
}

.modalidad__detalle {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--texto-cuerpo);
}

.modalidad__enlace {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  width: fit-content;
  margin-top: auto;
  padding-top: .6rem;
  font-weight: 600;
  color: var(--rojo);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transicion);
}

.modalidad__enlace:hover {
  border-bottom-color: currentColor;
}

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

/* Banda de apertura de la portada: foto de carretera a sangre, a todo el
   ancho de la ventana, justo bajo el héroe; el pie va debajo de la imagen,
   alineado con el contenedor, en cuerpo pequeño como el resto de pies */

.portada-heroe:has(+ .banda-foto) {
  padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.banda-foto {
  margin: 0;
}

.banda-foto--apertura img {
  max-height: 40rem;
  object-position: 50% 55%;
}

.banda-foto__pie span {
  max-width: 44em;
}

.banda-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--superficie);
}

.banda-foto figcaption {
  display: flex;
  gap: .65rem;
  padding-top: .8rem;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--gris);
}

.banda-foto figcaption::before {
  content: "";
  flex: none;
  width: 1.5rem;
  height: 2px;
  margin-top: .62em;
  background: var(--rojo);
}

/* Agencia: pasos y lateral */

.agencia {
  display: grid;
  gap: 3rem;
}

.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  counter-reset: paso;
}

.paso {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--tinta);
}

.paso > details {
  min-width: 0;
}

.paso::before {
  content: counter(paso);
  font-family: var(--titulos);
  font-size: 2.75rem;
  font-weight: 700;
  line-height: .9;
  color: var(--rojo);
}

.paso__titulo {
  font-size: 1.375rem;
}

.paso p {
  margin-top: .45rem;
}

.ficha-contacto .ficha-contacto__accion {
  margin-top: 1.25rem;
}

.ficha-contacto .boton--rojo:hover {
  background: var(--papel);
  color: var(--rojo-hondo);
}

.paso p {
  line-height: 1.65;
  color: var(--texto-cuerpo);
}

.destacado {
  padding-left: 1.25rem;
  border-left: 4px solid var(--rojo);
  font-family: var(--titulos);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--tinta);
  hyphens: none;
  text-wrap: balance;
}

.ficha-contacto {
  margin-top: 2rem;
  padding: 1.75rem;
  background: var(--tinta);
  color: var(--papel);
}

.ficha-contacto p + p {
  margin-top: .6rem;
}

.ficha-contacto__rotulo {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pie-gris);
}

.ficha-contacto__tel a {
  font-family: var(--titulos);
  font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem);
  font-weight: 600;
  line-height: 1.15;
  color: var(--papel);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transicion);
}

.ficha-contacto__tel a:hover {
  color: var(--pie-rojo);
}

.ficha-contacto__texto {
  font-size: .9375rem;
  line-height: 1.55;
  color: var(--pie-gris);
}

/* Franja de plazos */

.capitulo--franja {
  background: var(--superficie);
}

.plazos {
  display: grid;
  gap: 2.5rem;
}

.plazos__bloques {
  display: grid;
}

.bloque {
  padding: 1.5rem 0;
  border-top: 1px solid var(--filete);
}

.bloque > .plegable__cabeza {
  gap: 1rem;
}

.bloque__icono {
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--rojo);
}

.bloque h3 {
  font-size: 1.375rem;
}

.bloque p {
  margin-top: .4rem;
  padding-left: 3rem;
  line-height: 1.65;
  color: var(--texto-cuerpo);
}

/* Plegables de la portada: en escritorio siempre abiertos y sin aspecto de
   botón; en móvil, acordeón con su flecha (ver ajustes al final) */
.plegable__cabeza {
  display: flex;
  align-items: center;
  list-style: none;
  cursor: default;
  pointer-events: none;
}

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

/* Lo que no viaja: ficha de papel al pie de la franja de plazos (cierra el
   capítulo de condiciones, no queda como franja suelta entre dos secciones) */

.nota {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  column-gap: 1.25rem;
  margin-top: clamp(2.5rem, 2rem + 2vw, 4rem);
  padding: 1.5rem 1.25rem 1.75rem;
  border-top: 3px solid var(--tinta);
  background: var(--papel);
}

.nota__icono {
  width: 2.75rem;
  height: 2.75rem;
  margin-top: 2.4rem;
  color: var(--rojo);
}

.nota__cuerpo > h2 {
  margin-bottom: .75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
}

.nota__linea {
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.25rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--tinta);
}

.nota__aclaracion {
  margin-top: .6rem;
  max-width: 44em;
  line-height: 1.65;
  color: var(--texto-cuerpo);
}

/* Índice de destinos */

.destinos {
  display: grid;
  border-top: 3px solid var(--tinta);
}

.destinos__zona {
  border-bottom: 1px solid var(--tinta);
}

/* Zonas (Noreste / Centro y sureste / Oeste y costa): en escritorio, una fila
   abierta por zona; en móvil, acordeón por zona (web.js las pliega; sin JS
   quedan abiertas) para que las doce regiones no formen una columna sin fin */
.destinos__cabeza {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1.25rem 0 1rem;
}

.destinos__zona-titulo {
  font-size: clamp(1.5rem, 1.3rem + .8vw, 1.875rem);
}

.destinos__cuenta {
  margin-left: auto;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

/* Cada región es una tarjeta sobria numerada (01-12): el nombre en Fraunces
   enlaza a la región; debajo, la capital destacada (etiqueta + nombre) y, si
   hay más ciudades con página, una sola línea discreta separada por puntos.
   Nada de flechas en círculo ni etiquetas sueltas: jerarquía región → capital
   → resto */
.destinos {
  counter-reset: region;
}

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

.destinos__region {
  counter-increment: region;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-content: start;
  column-gap: .5rem;
  padding: 1rem 0 1.15rem;
  border-top: 1px solid var(--filete);
  transition: border-color var(--transicion);
}

.destinos__region::before {
  grid-row: 1;
  content: counter(region, decimal-leading-zero);
  padding-top: .35rem;
  font-family: var(--titulos);
  font-size: .875rem;
  font-weight: 700;
  color: var(--rojo);
  font-variant-numeric: tabular-nums;
}

.destinos__region > * {
  grid-column: 2;
}

.destinos__region:hover {
  border-top-color: var(--rojo);
}

.destinos__region-enlace {
  font-family: var(--titulos);
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  hyphens: none;
  text-wrap: balance;
  transition: color var(--transicion);
}

.destinos__region-enlace:hover {
  color: var(--rojo);
}

.destinos__capital {
  margin-top: .45rem;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}

.destinos__rotulo {
  margin-right: .4rem;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}

.destinos__capital a {
  color: var(--rojo-hondo);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
}

.destinos__capital a:hover {
  color: var(--tinta);
}

.destinos__otras {
  list-style: none;
  margin: .3rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--gris);
}

.destinos__otras li + li::before {
  content: "·";
  margin: 0 .45rem;
}

.destinos__otras a {
  color: var(--texto-cuerpo);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  transition: color var(--transicion), border-color var(--transicion);
}

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

/* Tabla de límites de la portada: el rótulo es el summary del plegable (abierto
   en escritorio; en móvil, cerrado hasta que se pulsa) */
.tabla-plegable {
  max-width: 64rem;
  margin-bottom: 1.75rem;
}

.tabla-plegable__cabeza {
  padding: .9rem 0 .75rem;
  font-family: var(--titulos);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  hyphens: none;
  text-wrap: balance;
}

.tabla-plegable > .w-tabla {
  margin-block: 0;
}

/* Preguntas de la portada */

.faq-portada {
  display: grid;
  gap: 2.5rem;
  margin-top: 1rem;
}

.faq-portada__lista {
  border-top: 3px solid var(--tinta);
}

.aparte {
  padding: 1.75rem;
  background: var(--superficie);
}

.aparte__titulo {
  margin-bottom: .6rem;
  font-size: 1.375rem;
}

.aparte p {
  line-height: 1.6;
  color: var(--texto-cuerpo);
}

.aparte p + p {
  margin-top: .75rem;
}

/* ---------- 11. Recorrido del cotizador ---------- */

.recorrido {
  padding-block: 1rem clamp(3.5rem, 2.5rem + 4vw, 6rem);
}

/* El marco mide lo mismo que el formulario (760 px como máximo): titular,
   filete y caja del cotizador comparten borde izquierdo y derecho. Si la caja
   del widget queda metida dentro del marco, web.js mide cuánto y la cabecera
   se mete lo mismo (--eje-cotizador), para que todo arranque en el mismo eje */
.contenedor.recorrido__marco {
  width: min(100% - 2.5rem, 47.5rem);
}

.recorrido__cabeza {
  padding-inline: var(--eje-cotizador, 0px);
}

/* Cabecera del recorrido, compacta para que el primer paso del formulario se
   vea sin scroll: titular medio, filete doble y las tres notas fijas en una
   sola línea de cuerpo pequeño, al mismo eje y ancho que el formulario */
.recorrido__notas {
  list-style: none;
  margin: .6rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--tinta);
}

.recorrido__nota-rotulo {
  margin-right: .3rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--rojo-hondo);
}

/* En /cotizador/ sobra la cinta superior: el teléfono ya va en el menú y el pie */
body.recorrido-cotizador .cabecera__cinta {
  display: none;
}

.recorrido .w-migas {
  margin-bottom: .25rem;
}

.recorrido__antetitulo {
  margin-top: .75rem;
}

.recorrido__titulo {
  margin-top: .4rem;
  padding-bottom: .75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  border-bottom: var(--filete-doble);
}

.recorrido__cotizador {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  margin-top: 1rem;
  min-width: 0;
}

/* Solo la caja raíz del widget: centrada y al ancho del marco, sin entrar dentro */
.recorrido__cotizador > * {
  width: 100%;
  max-width: 100%;
  margin-inline: auto;
}

/* CTA fijo de móvil (oculto en escritorio; web.js lo esconde mientras se ven
   el héroe, el cotizador o el pie) */
.cta-fija {
  display: none;
}

/* ---------- 12. Pie ---------- */

.pie {
  padding-top: clamp(3rem, 2.5rem + 2vw, 4.5rem);
  border-top: 4px solid var(--rojo);
  background: var(--tinta);
  color: var(--pie-texto);
  font-size: .9375rem;
}

.pie a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transicion);
}

.pie a:hover {
  color: var(--pie-rojo);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.pie__rejilla {
  display: grid;
  gap: 2.5rem;
  padding-bottom: 3rem;
}

.marca--pie {
  color: var(--papel);
}

.marca--pie .marca__linea1 {
  color: var(--pie-gris);
}

.pie .marca--pie:hover {
  color: var(--papel);
  text-decoration: none;
}

.pie__texto {
  max-width: 30rem;
  margin-top: 1rem;
  line-height: 1.6;
  color: var(--pie-gris);
}

.pie__titulo {
  margin-bottom: 1rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--pie-filete);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pie-gris);
}

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

.pie__telefono {
  font-family: var(--titulos);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.15;
  white-space: nowrap;
}

.pie__nota {
  margin-top: .6rem;
  line-height: 1.55;
  color: var(--pie-gris);
}

.pie__legal {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--pie-filete);
  font-size: .8125rem;
  color: var(--pie-gris);
}

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

/* ==========================================================================
   13. Ajustes por ancho (siempre al final)
   ========================================================================== */

@media (min-width: 40rem) {
  .w-hermanas {
    padding: 1.75rem 2rem 2rem;
  }

  .w-hermanas__enlaces {
    columns: 11rem;
    column-gap: 2rem;
  }

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

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

@media (min-width: 48rem) {
  .contenedor {
    width: min(100% - 4rem, var(--ancho));
  }

  .contenedor.recorrido__marco {
    width: min(100% - 4rem, 47.5rem);
  }

  .heroe {
    padding-block: 1.75rem 2.5rem;
  }

  /* Las dos columnas del héroe arrancan juntas bajo el filete doble y cada una
     mide lo suyo: los botones quedan pegados a la entradilla y la ficha no se
     estira en vacío */
  .heroe__pie {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: 3rem;
    align-items: start;
  }

  .heroe__pie:not(:has(.w-datos)),
  .heroe__pie:not(:has(.w-entradilla)) {
    grid-template-columns: minmax(0, 1fr);
  }

  .w-datos__fila {
    padding: .8rem 0;
  }

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

  .portada-heroe__texto {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    column-gap: 3rem;
  }

  .portada-heroe__texto .w-datos {
    grid-column: 2;
    grid-row: 1 / span 2;
  }

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

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

  .banda-foto img {
    aspect-ratio: 21 / 9;
  }

  .nota {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    column-gap: 2rem;
    padding: 2rem 2.25rem 2.25rem;
  }

  .nota__icono {
    width: 3.5rem;
    height: 3.5rem;
  }

  /* Tableta: zonas una debajo de otra, regiones de cada zona a dos columnas,
     con las dos tarjetas de cada fila a la misma altura */
  .destinos__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.25rem;
    align-items: stretch;
  }

  /* Sin cotizador, la foto ocupa toda la rejilla del contenedor (nada de
     figura corta pegada a la izquierda), con el mismo recorte en todas las
     regiones y ciudades; en escritorio, composición 8 + 4 (ver 64rem) */
  .primer-bloque:not(:has(> .w-cotizador)) > .w-foto img {
    aspect-ratio: 16 / 9;
    object-position: 50% 60%;
  }
}

@media (min-width: 64rem) {
  /* Foto de las páginas sin cotizador: banda a todo el ancho del contenedor,
     baja (21:9) y con el pie editorial debajo; nunca una foto alta con una
     columna vacía al lado */
  .primer-bloque:not(:has(> .w-cotizador)) > .w-foto img {
    aspect-ratio: 21 / 9;
  }

  .capitulo__cabeza {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: end;
    column-gap: 4rem;
  }

  .columnas {
    columns: 2;
    column-gap: 3.5rem;
    column-rule: 1px solid var(--superficie-2);
  }

  .columnas p {
    orphans: 3;
    widows: 3;
  }

  .cuerpo .w-seccion {
    columns: 2;
    column-gap: 3.5rem;
    column-rule: 1px solid var(--superficie-2);
  }

  .cuerpo .w-seccion > h2,
  .cuerpo .w-seccion > .w-tabla,
  .cuerpo .w-seccion > .w-foto,
  .cuerpo .w-seccion > figure,
  .cuerpo .w-seccion > .w-cta-linea {
    column-span: all;
  }

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

  .cuerpo .w-seccion > .w-tabla + * {
    margin-top: 1.5rem;
  }

  /* La cita de la franja, a lo ancho sobre las dos columnas */
  .cuerpo > :nth-child(3n + 2 of .w-seccion) {
    padding: 2.25rem 2.5rem 2.5rem;
  }

  .cuerpo > :nth-child(3n + 2 of .w-seccion) > h2 + p {
    column-span: all;
    max-width: 40em;
  }

  .cuerpo > :nth-child(3n + 2 of .w-seccion).w-seccion--cita-corta > h2 + p {
    max-width: 30em;
    font-family: var(--titulos);
    font-size: clamp(1.25rem, 1.12rem + .6vw, 1.5rem);
    line-height: 1.35;
    letter-spacing: -.005em;
    hyphens: none;
    text-wrap: pretty;
  }

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

  .modalidad {
    padding: 2rem 2rem 2.25rem;
    border-bottom: 0;
    border-left: 1px solid var(--superficie-2);
  }

  .modalidad:first-child {
    padding-left: 0;
    border-left: 0;
  }

  .modalidad:last-child {
    padding-right: 0;
  }

  .agencia {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  /* Sin foto de banco: los cuatro bloques en una fila, con filete de tinta */
  .plazos__bloques {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2.25rem;
  }

  .bloque {
    border-top-color: var(--tinta);
  }

  .bloque > .plegable__cabeza {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .bloque p {
    padding-left: 0;
  }

  /* Escritorio: una fila por zona (de este a oeste) y sus cuatro regiones en
     cuatro columnas parejas: índice que se lee como un mapa por bandas */
  .destinos__lista {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: 2rem;
  }

  .destinos__cabeza {
    padding: 1.1rem 0 .85rem;
  }

  /* Escritorio: título a la izquierda y las dos líneas a la derecha */
  .nota__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 3rem;
    align-items: end;
  }

  .nota__cuerpo > h2 {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .faq-portada {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  .pie__rejilla {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 3rem;
  }

  .pie__marca {
    grid-column: auto;
  }

  /* Una sola hija: la tarjeta y las hermanas comparten fila, sin hueco */
  .remate:has(> .w-hijas .w-tarjeta:only-child):has(> .w-hermanas) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    column-gap: 2.5rem;
    align-items: start;
  }

  .remate:has(> .w-hijas .w-tarjeta:only-child):has(> .w-hermanas) > .w-hermanas {
    margin-top: clamp(3.5rem, 2.5rem + 3vw, 5rem);
  }

  .remate:has(> .w-hijas .w-tarjeta:only-child):has(> .w-hermanas) > :not(.w-hijas, .w-hermanas) {
    grid-column: 1 / -1;
  }

  .pie__legal {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  /* Región y Contacto: otro molde de cabecera. La ficha sube a la derecha
     desde las migas, junto al titular (no bajo el filete doble), y el texto va
     en columna con un filete simple; así no se repite el héroe del servicio */
  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador)), body[class*="contacto"]) .heroe > .contenedor {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    column-gap: 4rem;
    align-items: start;
  }

  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador)), body[class*="contacto"]) .heroe > .contenedor > * {
    grid-column: 1;
  }

  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador)), body[class*="contacto"]) .heroe .heroe__pie {
    display: contents;
  }

  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador)), body[class*="contacto"]) .heroe .heroe__lead {
    grid-column: 1;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--tinta);
  }

  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador)), body[class*="contacto"]) .heroe .w-datos {
    grid-column: 2;
    grid-row: 1 / span 4;
    align-self: start;
    margin-top: .25rem;
  }

  :is(body[class*="division"], body[class*="region"], body[class*="provincia"], body:not([class*="ciudad"], [class*="municipio"]):has(.remate > .w-hijas):not(:has(.primer-bloque > .w-cotizador))) .heroe h1 {
    font-size: clamp(2.75rem, 1.4rem + 3vw, 4.5rem);
  }

  /* Contacto: el teléfono (primer dato) como cifra grande de la ficha */
  body[class*="contacto"] .heroe .w-datos {
    padding: 1rem 1.5rem .75rem;
    border-top: 0;
    border-left: 4px solid var(--rojo);
  }

  body[class*="contacto"] .heroe .w-datos__fila:first-child {
    grid-template-columns: minmax(0, 1fr);
    padding-bottom: 1rem;
    border-bottom-color: var(--tinta);
  }

  body[class*="contacto"] .heroe .w-datos__fila:first-child dd {
    font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem);
    font-weight: 600;
    line-height: 1.1;
  }
}

@media (min-width: 68rem) {
  .cabecera__cinta {
    display: block;
  }

  .cabecera__barra {
    flex-wrap: nowrap;
    padding-block: 1rem;
  }

  .menu-boton {
    display: none;
  }

  .menu,
  .menu.menu--abierto {
    display: flex;
    align-items: center;
    gap: 2.25rem;
    flex-basis: auto;
  }

  .menu__lista {
    display: flex;
    gap: 1.75rem;
    border-top: 0;
  }

  .menu__lista li {
    border-bottom: 0;
  }

  .menu__enlace {
    padding: .35rem 0;
    font-size: 1.0625rem;
    white-space: nowrap;
  }

  .menu__enlace::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--rojo);
    transform: scaleX(0);
    transform-origin: left;
  }

  .menu__enlace:hover {
    color: var(--tinta);
  }

  .menu__enlace:hover::after {
    transform: scaleX(1);
  }

  .menu__pie {
    padding: 0;
  }

  .menu__telefono {
    display: none;
  }

  .marca__linea2 {
    font-size: 1.625rem;
  }
}

@media (min-width: 75rem) {
  .contenedor {
    width: min(100% - 5rem, var(--ancho));
  }

  /* Las dos columnas arrancan en el filete doble y cierran juntas: el texto
     baja su primera línea lo que el widget deja de aire arriba (web.js lo mide
     en --desfase-cotizador) y la ficha, compacta a dos columnas, se apoya en
     el pie de la columna, a ras del final del cotizador */
  .portada-heroe__rejilla {
    grid-template-columns: minmax(0, 1fr) clamp(37.5rem, 52vw, 47.5rem);
    column-gap: 3rem;
    align-items: stretch;
  }

  .portada-heroe__texto {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    gap: 1.5rem;
    padding-top: var(--desfase-cotizador, 0px);
  }

  .portada-heroe__texto .w-datos {
    grid-column: auto;
    grid-row: auto;
    align-self: end;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
  }

  .portada-heroe__texto .w-datos__fila {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .15rem;
    padding: .6rem 0 .65rem;
  }

  .portada-heroe__texto .w-datos__fila:last-child:nth-child(odd) {
    grid-column: 1 / -1;
  }

  .primer-bloque:has(> .w-foto):has(> .w-cotizador) {
    grid-template-columns: minmax(0, 1fr) clamp(37.5rem, 52vw, 47.5rem);
    column-gap: 3rem;
    align-items: stretch;
  }

  /* Foto y cotizador arrancan en la misma línea: en escritorio el cotizador
     empieza a ras, sin el filete ni el aire que lleva apilado en móvil */
  .primer-bloque > .w-cotizador {
    order: 0;
    padding-top: 0;
    border-top: 0;
  }

  .primer-bloque:has(> .w-cotizador) > .w-foto {
    display: flex;
    flex-direction: column;
  }

  .primer-bloque:has(> .w-cotizador) > .w-foto img {
    flex: 1 1 0;
    min-height: 18rem;
    height: auto;
    aspect-ratio: auto;
  }
}

@media (max-width: 47.99rem) {
  /* Antetítulo en una línea: menos tracking y, en la portada, solo la ruta */
  .w-antetitulo {
    padding-left: 2rem;
    letter-spacing: .07em;
  }

  .w-antetitulo::before {
    width: 1.35rem;
  }

  .w-antetitulo__resto {
    display: none;
  }

  /* Héroe de portada: entradilla a 18 px, claramente por debajo del H1, y el
     botón de cotizar justo debajo, dentro de la primera pantalla */
  .portada-heroe .w-entradilla p {
    font-size: 1.125rem;
    line-height: 1.55;
  }

  .portada-heroe__rejilla {
    gap: 2rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
  }

  .portada-heroe__texto {
    gap: 1.25rem;
  }

  /* Los dos botones del héroe, iguales: a ancho completo, uno sobre otro */
  .portada-heroe__acciones .boton {
    flex: 1 1 100%;
  }

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

  .w-tabla {
    margin-inline: 0;
  }

  /* Ficha de datos en móvil: una sola columna, etiqueta y valor en la misma
     línea (nada de cifras partidas en celdas estrechas ni celdas sueltas) */
  .w-datos {
    display: block;
  }

  .w-datos__fila {
    grid-template-columns: minmax(0, 7.25rem) minmax(0, 1fr);
    gap: .2rem .9rem;
    padding: .55rem 0;
  }

  .w-datos dd {
    font-size: .9875rem;
    text-wrap: pretty;
  }

  /* Tablas de dos columnas (límite | valor): caben sin scroll */
  .w-tabla table:not(:has(th:nth-child(3), td:nth-child(3))) {
    min-width: 0;
  }

  .w-tabla td,
  .w-tabla th {
    text-wrap: pretty;
  }

  /* Portada móvil más corta: menos aire entre capítulos y bloques más prietos */
  .capitulo {
    padding-block: 2.75rem;
  }

  .capitulo__cabeza {
    margin-bottom: 1.75rem;
  }

  .modalidades {
    margin-top: 2rem;
  }

  .modalidad {
    padding: 1.25rem 0 1.4rem;
  }

  .modalidad__numero {
    font-size: 2.75rem;
  }

  .paso,
  .bloque {
    padding: 1.1rem 0;
  }

  .plazos {
    gap: 1.75rem;
  }

  .agencia {
    gap: 2rem;
  }

  .ficha-contacto {
    margin-top: 1.5rem;
    padding: 1.25rem;
  }

  .destinos__cabeza {
    flex-wrap: nowrap;
    align-items: center;
    min-height: 3.5rem;
    padding: 1rem 0;
  }

  .destinos__cuenta {
    white-space: normal;
    text-align: right;
  }

  .destinos__cabeza.plegable__cabeza::after {
    margin-left: .75rem;
  }

  .destinos__zona[open] > .destinos__cabeza .destinos__zona-titulo {
    color: var(--rojo);
  }

  .faq-portada {
    gap: 1.75rem;
  }

  .tabla-plegable__cabeza {
    padding: 1rem 0;
    border-top: 3px solid var(--tinta);
    border-bottom: 1px solid var(--superficie-2);
  }

  .tabla-plegable[open] > .tabla-plegable__cabeza {
    margin-bottom: .9rem;
    color: var(--rojo);
  }

  .aparte {
    padding: 1.25rem;
  }

  .w-tarjeta:only-child {
    padding: 1.15rem 1.1rem 1.25rem;
    column-gap: 1rem;
  }

  /* Pasos y plazos en acordeón: una línea por apartado hasta que se abre */
  .plegable__cabeza {
    justify-content: space-between;
    gap: .9rem;
    cursor: pointer;
    pointer-events: auto;
  }

  .plegable__cabeza::after {
    content: "";
    flex: none;
    width: .55rem;
    height: .55rem;
    margin: 0 .3rem 0 auto;
    border-right: 2px solid var(--tinta);
    border-bottom: 2px solid var(--tinta);
    transform: translateY(-3px) rotate(45deg);
    transition: transform var(--transicion);
  }

  [open] > .plegable__cabeza::after {
    transform: translateY(2px) rotate(-135deg);
  }

  .paso {
    grid-template-columns: 2.25rem minmax(0, 1fr);
    align-items: center;
    padding: .85rem 0;
  }

  .paso::before {
    font-size: 1.75rem;
  }

  .paso__titulo,
  .bloque h3 {
    font-size: 1.1875rem;
  }

  .bloque {
    padding: .85rem 0;
  }

  .bloque__icono {
    width: 1.6rem;
    height: 1.6rem;
  }

  .bloque p {
    padding-left: 2.6rem;
  }

  .destacado {
    font-size: 1.375rem;
  }

  /* Destinos en móvil: enlaces a buen tamaño de dedo */
  .destinos__region {
    padding: .85rem 0 1rem;
  }

  .destinos__region-enlace {
    display: inline-block;
    padding-block: .3rem;
    font-size: 1.3125rem;
  }

  .destinos__capital a,
  .destinos__otras a {
    display: inline-block;
    padding-block: .45rem;
  }

  .destinos__capital {
    margin-top: .1rem;
  }

  .destinos__otras {
    margin-top: 0;
  }

  /* CTA fijo: dentro del ancho, sobre el borde inferior */
  .cta-fija {
    position: fixed;
    left: .75rem;
    right: .75rem;
    bottom: .75rem;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .6rem;
    min-height: 3rem;
    padding: .75rem 1rem;
    border-radius: var(--radio);
    background: var(--rojo);
    box-shadow: 0 6px 20px rgba(26, 26, 26, .25);
    color: var(--papel);
    font-weight: 600;
    text-decoration: none;
    transition: transform var(--transicion), opacity var(--transicion);
  }

  .cta-fija--oculta {
    opacity: 0;
    transform: translateY(150%);
    pointer-events: none;
  }

  .pie {
    padding-bottom: 4.5rem;
  }
}

/* En móvil y tableta pequeña (por debajo de 768 px), toda tabla con cabecera de
   dos o más columnas pasa a tarjetas apiladas a ancho completo, sin depender de
   JS: una por fila, con la primera celda (el umbral, la modalidad…) como título
   en tinta arriba y la explicación debajo; nunca dos columnas estrechas. web.js
   solo añade la etiqueta de cada columna (la copia de la cabecera). */
@media (max-width: 47.99rem) {
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) {
    overflow: visible;
    border-top: 0;
    background: none;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) table {
    min-width: 0;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) caption {
    display: block;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) table,
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody,
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tr,
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) td {
    display: block;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody {
    display: grid;
    gap: .9rem;
  }

  /* Tarjeta compacta y ligera: filete fino arriba, el nombre de la fila como
     título en tinta (sin barra negra ni cinta roja, que apiladas hacían ruido)
     y los datos de dos en dos; el último, si queda solo, ocupa la fila entera */
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody tr,
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody tr:nth-child(even),
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody tr:hover {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    padding: 0 0 .35rem;
    border-top: 1px solid var(--tinta);
    background: none;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) tbody {
    gap: .5rem;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) td {
    width: auto;
    min-width: 0;
    padding: .55rem 0;
    border-bottom: 0;
    font-size: .9375rem;
    line-height: 1.45;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) td:last-child:nth-child(even) {
    grid-column: 1 / -1;
    border-top: 1px solid var(--superficie-2);
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) td:first-child {
    grid-column: 1 / -1;
    padding: .65rem 0 .35rem;
    color: var(--tinta);
    font-size: 1.0625rem;
    line-height: 1.3;
  }

  /* Tabla de dos columnas (caso → respuesta): el valor a todo el ancho */
  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)):not(:has(thead th:nth-child(3))) td:nth-child(2) {
    grid-column: 1 / -1;
    border-top: 0;
    padding-top: 0;
  }

  .w-tabla:is(.w-tabla--fichas, :has(thead th + th)) td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    margin-bottom: .2rem;
    font-family: var(--texto);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris);
  }
}

/* Pie en móvil: enlaces y legales a dos columnas y menos aire entre bloques */
@media (max-width: 39.99rem) {
  .pie {
    padding-top: 2.25rem;
  }

  .pie__rejilla {
    gap: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .pie__texto {
    margin-top: .75rem;
  }

  .pie__titulo {
    margin-bottom: .6rem;
    padding-bottom: .45rem;
  }

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

  .pie__telefono {
    font-size: 1.5rem;
  }

  .pie__nota {
    margin-top: .35rem;
  }

  .pie__legal {
    gap: .75rem;
    padding-block: 1.1rem 1.25rem;
  }

  .pie__legal ul {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem 1.25rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  :where(*:not(.w-cotizador *, .recorrido__cotizador *)),
  :where(*:not(.w-cotizador *, .recorrido__cotizador *))::before,
  :where(*:not(.w-cotizador *, .recorrido__cotizador *))::after {
    transition-duration: .01ms !important;
  }
}

@media print {
  .cabecera__cinta,
  .menu,
  .menu-boton,
  .w-cotizador,
  .cta-fija,
  .heroe__botones,
  .acciones {
    display: none !important;
  }

  .pie {
    background: none;
    color: var(--tinta);
  }
}