/* ==========================================================================
   Enviar paquete a Bélgica · hoja de estilo
   Paleta «Burdeos y piedra» · Syne (títulos, menú, cifras) + Karla (texto)
   Maqueta minimalista: piedra casi monocroma, burdeos como único acento,
   oro viejo solo para filetes, numeraciones y estados.
   Nota: nada de esta hoja entra en el formulario del cotizador (.w-cotizador *).
   ========================================================================== */

:root {
  --piedra: #F4F0EA;
  --piedra-2: #EAE3D8;
  --tinta: #2B1B1F;
  --tinta-suave: #5E4B50;
  --burdeos: #7A1F35;
  --burdeos-hondo: #5C1627;
  --burdeos-papel: #F3E7E9;
  --oro: #B08D57;
  --oro-tinta: #6B4F22;
  --oro-papel: #F1E8DA;
  --superficie: #FFFFFF;
  --noche: #2B1B1F;
  --noche-texto: #F4F0EA;
  --noche-suave: #CBBFB9;
  --filete: rgba(43, 27, 31, .14);
  --filete-fuerte: rgba(43, 27, 31, .28);

  --f-titulo: 'Syne', 'Helvetica Neue', Arial, sans-serif;
  --f-texto: 'Karla', 'Helvetica Neue', Arial, sans-serif;

  --ancho: 80rem;
  --lateral: clamp(1.25rem, 4.5vw, 3rem);
  --hueco: clamp(4rem, 3rem + 5vw, 8rem);
  --radio: 4px;
  --radio-g: 10px;
  --cabecera-alto: 4.25rem;
  /* Escala del H1: un solo estilo (Syne 800, -.03em, interlínea 1.02) en
     todas las páginas. --h1 en la portada, --h1-compartido cuando el titular
     comparte fila con el cotizador y --h1-interior en el resto, más bajo
     para que entradilla y llamada entren en el primer pantallazo. */
  --h1: clamp(1.75rem, .9rem + 3.6vw, 3.75rem);
  --h1-compartido: 2.5rem;
  --h1-interior: clamp(1.75rem, 1.1rem + 2.2vw, 3rem);
  /* Filetes: solo dos recursos en toda la web.
     · Apertura: 2px tinta sobre listas, fichas y tablas.
     · Divisor: 1px var(--filete) entre filas y bloques. */
  --apertura: 2px solid var(--tinta);
  --divisor: 1px solid var(--filete);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* --- Base (fuera del formulario del cotizador) ------------------------- */

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

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

body {
  margin: 0;
  background: var(--piedra);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

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

:where(h1, h2, h3, h4):not(.w-cotizador *) {
  font-family: var(--f-titulo);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--tinta);
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  overflow-wrap: normal;
}

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

:where(a):not(.w-cotizador *) {
  color: var(--burdeos);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .2s var(--curva), text-decoration-color .2s var(--curva);
}

:where(a):not(.w-cotizador *):hover {
  color: var(--burdeos-hondo);
}

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

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

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

.b-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.b-saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  padding: .6rem 1rem;
  background: var(--burdeos);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radio);
}

.b-saltar:focus {
  top: .75rem;
  color: #fff;
}

.b-envoltura {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--lateral);
}

/* --- Botones ---------------------------------------------------------- */

.b-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  min-height: 2.875rem;
  padding: .7rem 1.35rem;
  border-radius: 999px;
  border: 1px solid var(--burdeos);
  background: var(--burdeos);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .9375rem;
  letter-spacing: .01em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s var(--curva), color .25s var(--curva), border-color .25s var(--curva), transform .25s var(--curva);
}

.b-boton:hover {
  background: var(--burdeos-hondo);
  border-color: var(--burdeos-hondo);
  color: #fff;
}

.b-boton:active {
  transform: translateY(1px);
}

.b-boton__flecha {
  width: 1rem;
  height: 1rem;
  transition: transform .25s var(--curva);
}

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

.b-boton--papel {
  background: var(--oro-papel);
  border-color: rgba(176, 141, 87, .55);
  color: var(--burdeos);
}

.b-boton--papel:hover {
  background: #E9DCC6;
  border-color: var(--oro);
  color: var(--burdeos-hondo);
}

.b-boton--noche {
  background: transparent;
  border-color: rgba(244, 240, 234, .4);
  color: var(--noche-texto);
}

.b-boton--noche:hover {
  background: rgba(244, 240, 234, .1);
  border-color: var(--noche-texto);
  color: #fff;
}

/* --- Cabecera y menú -------------------------------------------------- */

.b-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 240, 234, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--curva), box-shadow .3s var(--curva);
}

.b-cabecera--sombra {
  border-bottom-color: var(--filete);
  box-shadow: 0 6px 24px -18px rgba(43, 27, 31, .5);
}

.b-cabecera__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--cabecera-alto);
}

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

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

.b-marca__signo {
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  transition: transform .4s var(--curva);
}

.b-marca:hover .b-marca__signo {
  transform: rotate(-8deg);
}

.b-marca__nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -.01em;
  line-height: 1.1;
  white-space: nowrap;
}

.b-marca__nombre span {
  color: var(--burdeos);
}

.b-menu-boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  margin-inline-end: -.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tinta);
  cursor: pointer;
}

.b-menu-boton__rayas,
.b-menu-boton__rayas::before,
.b-menu-boton__rayas::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform .3s var(--curva), opacity .2s;
}

.b-menu-boton__rayas {
  position: relative;
}

.b-menu-boton__rayas::before,
.b-menu-boton__rayas::after {
  content: "";
  position: absolute;
  left: 0;
}

.b-menu-boton__rayas::before { top: -6px; }
.b-menu-boton__rayas::after { top: 6px; width: .85rem; }

.b-cabecera--abierta .b-menu-boton__rayas { background: transparent; }
.b-cabecera--abierta .b-menu-boton__rayas::before { transform: translateY(6px) rotate(45deg); }
.b-cabecera--abierta .b-menu-boton__rayas::after { transform: translateY(-6px) rotate(-45deg); width: 1.25rem; }

/* Menú: en móvil es un panel plegable dentro del ancho */
.b-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--cabecera-alto));
  overflow-y: auto;
  padding: .5rem var(--lateral) 1.75rem;
  background: var(--piedra);
  border-bottom: 1px solid var(--filete);
  box-shadow: 0 24px 40px -28px rgba(43, 27, 31, .45);
}

.b-cabecera--abierta .b-menu {
  display: block;
}

.b-menu__lista {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 0;
}

.b-menu__lista > li {
  border-bottom: 1px solid var(--filete);
}

.b-menu__lista a {
  display: block;
  padding: .85rem 0;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
  color: var(--tinta);
  text-decoration: none;
}

.b-menu__lista a:hover,
.b-menu__lista a[aria-current="page"] {
  color: var(--burdeos);
}

.b-menu__sub {
  list-style: none;
  margin: -.35rem 0 .6rem;
  padding: 0 0 0 1rem;
  border-left: var(--divisor);
}

.b-menu__sub a {
  padding: .45rem 0;
  font-family: var(--f-texto);
  font-weight: 500;
  font-size: 1rem;
  color: var(--tinta-suave);
}

.b-boton--menu {
  width: 100%;
}

/* --- Antetítulo, migas, entradilla ------------------------------------ */

.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1.25rem;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}

.w-migas {
  margin: 0 0 2rem;
  font-size: .875rem;
  line-height: 1.4;
}

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

.w-migas li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
  color: var(--tinta-suave);
}

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

.w-migas a {
  color: var(--tinta-suave);
  text-decoration: none;
}

.w-migas a:hover {
  color: var(--burdeos);
  text-decoration: underline;
}

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

.w-entradilla {
  max-width: 36rem;
  margin-top: 1.5rem;
}

.w-entradilla p {
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta-suave);
}

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

/* --- Ficha de datos (.w-datos): filas fijas, nunca celdas vacías ------- */

.w-datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  border-top: 2px solid var(--tinta);
}

.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-bottom: 1px solid var(--filete);
}

.w-datos dt {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}

.w-datos dd {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 500;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* --- Cotizador -------------------------------------------------------- */

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

.w-cotizador > :where(:not(.w-cotizador__titulo)) {
  margin-inline: auto;
  max-width: 100%;
}

/* Rótulo corto y centrado, sin filetes propios */
.w-cotizador__titulo {
  margin: 0 0 1.25rem;
  text-align: center;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro-tinta);
  text-wrap: balance;
}


/* --- Llamada a la acción ---------------------------------------------- */

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

.w-cta {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  min-height: 2.875rem;
  padding: .7rem 1.4rem;
  border-radius: 999px;
  background: var(--burdeos);
  color: #fff;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color .25s var(--curva);
}

.w-cta::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .25s var(--curva);
}

.w-cta:hover {
  background: var(--burdeos-hondo);
  color: #fff;
}

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

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

.w-foto {
  margin: 0 0 clamp(2.5rem, 2rem + 2vw, 4rem);
}

.w-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio-g);
  background: var(--piedra-2);
}

/* Los pies que llegan solo describen la foto: no se muestran */
.w-foto figcaption {
  display: none;
}

/* --- Cabeza de las páginas interiores --------------------------------- */

.b-cabeza {
  padding-block: clamp(2rem, 1.5rem + 2.5vw, 4rem) clamp(2.5rem, 2rem + 2.5vw, 4.5rem);
  border-bottom: 1px solid var(--filete);
}

/* Móvil: texto, acción (botón o cotizador) y ficha, en ese orden */
.b-cabeza__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "texto"
    "accion"
    "ficha";
  gap: 2rem;
  align-items: start;
}

.b-cabeza__texto { grid-area: texto; min-width: 0; }
.b-cabeza__ficha { grid-area: ficha; }
.b-cabeza__accion { grid-area: accion; min-width: 0; }

/* H1 único para portada e interiores (ver --h1 en :root) */
.b-cabeza h1,
.b-heroe__titulo {
  font-size: var(--h1);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.02;
}

.b-cabeza h1 {
  font-size: var(--h1-interior);
  line-height: 1.05;
  max-width: 24ch;
}

.b-cabeza__ficha:not(:has(> .w-datos, > .w-foto)),
.b-cabeza__accion:empty {
  display: none;
}

/* Columna derecha: UNA tarjeta en todas las páginas interiores (servicio,
   contacto, región, provincia y ciudad): foto arriba y ficha con cabecera
   burdeos debajo. Arranca a la altura de las migas. */
.b-cabeza__ficha {
  display: flex;
  flex-direction: column;
  align-self: start;
  min-width: 0;
  border: var(--divisor);
  border-radius: var(--radio-g);
  background: var(--superficie);
}

.b-cabeza .w-foto {
  margin: 0;
}

.b-cabeza .w-foto img {
  aspect-ratio: 16 / 9;
  border-radius: calc(var(--radio-g) - 1px) calc(var(--radio-g) - 1px) 0 0;
}

.b-cabeza__ficha > .w-foto:last-child img {
  border-radius: calc(var(--radio-g) - 1px);
}

/* Línea fija de contacto bajo la entradilla */
.b-cabeza__llamada {
  display: flex;
  align-items: flex-start;
  gap: .65rem;
  max-width: 36rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filete);
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

.b-cabeza__llamada svg {
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: .15rem;
  color: var(--burdeos);
}

.b-cabeza__llamada a {
  font-weight: 700;
  white-space: nowrap;
  text-decoration-color: rgba(122, 31, 53, .35);
}

.b-cabeza__llamada-cuerpo {
  min-width: 0;
}

/* El botón «Calcular envío a…» va dentro del héroe, bajo la entradilla */
.b-cabeza__accion .w-cta-linea {
  margin: 0;
}

.b-cabeza__accion .w-cotizador {
  padding-top: 1.75rem;
  border-top: var(--divisor);
}

/* Ficha de datos de interiores, dentro de la tarjeta: cabecera burdeos con
   el rótulo del nivel y la escala País → Región → Provincia → Ciudad.
   La portada usa la rejilla abierta. */
.b-cabeza .w-datos {
  position: relative;
  padding: 0 1.5rem .35rem;
  border: 0;
  background: transparent;
}

.b-cabeza .w-datos::before {
  content: "En resumen";
  display: block;
  margin: 0 -1.5rem .25rem;
  padding: .8rem 5.5rem .8rem 1.5rem;
  background: var(--burdeos);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .8125rem;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
}

.b-cabeza__ficha > .w-datos:first-child::before {
  border-radius: calc(var(--radio-g) - 1px) calc(var(--radio-g) - 1px) 0 0;
}

.b-cabeza .w-datos__fila:last-child {
  border-bottom: 0;
}

/* --- Cuerpo: módulo asimétrico (H2 a la izquierda, texto a la derecha) - */

.b-cuerpo {
  counter-reset: seccion;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem) 0;
}

.b-cuerpo > :where(p) {
  max-width: 42rem;
  margin-bottom: 1.25rem;
}

/* Ningún hijo de rejilla ensancha la página: palabras largas (direcciones,
   nombres compuestos, teléfonos) parten antes de salirse */
.b-cuerpo > *,
.b-cuerpo > .w-seccion > *,
.b-cuerpo > .w-faq > * {
  min-width: 0;
}

.b-cuerpo :where(p, li, dd, td, th, summary),
.b-cabeza__texto :where(p, li) {
  overflow-wrap: break-word;
}

.w-seccion {
  counter-increment: seccion;
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--filete);
}

/* Tablas sueltas que el redactor mete sin .w-tabla (etiqueta / valor) */
.w-seccion > table {
  width: 100%;
  max-width: 42rem;
  margin: 1.75rem 0;
  border-collapse: collapse;
  border-top: 2px solid var(--tinta);
  background: var(--superficie);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--tinta);
}

.w-seccion > table th,
.w-seccion > table td {
  padding: .85rem 1.1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filete);
  background: var(--superficie);
  color: var(--tinta);
}

.w-seccion > table th {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}

.w-seccion > table td:first-child {
  font-weight: 700;
}

.w-seccion:first-child {
  border-top: 0;
  padding-top: 0;
}

.w-seccion h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  margin-bottom: 1.25rem;
}

.w-seccion h2::before {
  content: counter(seccion, decimal-leading-zero);
  display: block;
  margin-bottom: .9rem;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: var(--oro-tinta);
}

.w-seccion h3 {
  font-size: clamp(1.1875rem, 1.1rem + .4vw, 1.375rem);
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 2rem 0 .75rem;
}

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

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

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

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

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

.w-seccion p a,
.w-seccion li a,
.w-faq__resp a,
.w-cierre a:not(.b-boton) {
  font-weight: 600;
  text-decoration-color: rgba(122, 31, 53, .35);
}

.w-seccion p a:hover,
.w-seccion li a:hover,
.w-faq__resp a:hover,
.w-cierre a:not(.b-boton):hover {
  text-decoration-color: currentColor;
}

/* --- Tablas: scroll horizontal propio en móvil ------------------------ */

.w-tabla {
  max-width: 100%;
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--filete);
  border-radius: var(--radio-g);
  background: var(--superficie);
  scrollbar-width: thin;
  scrollbar-color: var(--oro) transparent;
}

.w-tabla table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-family: var(--f-texto);
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--tinta);
}

.w-tabla caption {
  padding: 1rem 1.25rem .25rem;
  text-align: left;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oro-tinta);
  background: var(--superficie);
}

.w-tabla th,
.w-tabla td {
  padding: .9rem 1.25rem;
  text-align: left;
  vertical-align: top;
}

.w-tabla thead th {
  background: var(--superficie);
  color: var(--tinta-suave);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  border-bottom: 2px solid var(--tinta);
  white-space: nowrap;
}

.w-tabla tbody th,
.w-tabla tbody td:first-child {
  font-weight: 700;
  color: var(--tinta);
  background: var(--superficie);
}

.w-tabla tbody td {
  background: var(--superficie);
  color: var(--tinta);
}

.w-tabla tbody tr + tr > * {
  border-top: 1px solid var(--filete);
}

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

.w-tabla tbody tr:hover > * {
  background: #FBF8F4;
}

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

.w-faq {
  padding-block: clamp(2.5rem, 2rem + 2vw, 3.5rem);
  border-top: 1px solid var(--filete);
}

.w-faq h2 {
  font-size: clamp(1.625rem, 1.25rem + 1.4vw, 2.375rem);
  margin-bottom: 1.5rem;
}

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

.w-faq__item:first-of-type {
  border-top: 2px solid var(--tinta);
}

.w-faq__item summary {
  position: relative;
  display: block;
  padding: 1.15rem 3rem 1.15rem 0;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.35;
  letter-spacing: -.01em;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  text-wrap: balance;
  transition: color .2s;
}

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

.w-faq__item summary::before,
.w-faq__item summary::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: .875rem;
  height: 2px;
  background: var(--burdeos);
  transition: transform .3s var(--curva);
}

.w-faq__item summary::after {
  transform: rotate(90deg);
}

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

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

.w-faq__resp {
  padding: 0 3rem 1.4rem 0;
  color: var(--tinta-suave);
}

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

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

/* --- Páginas hijas: rejilla numerada (de 2 a 100 tarjetas) ------------ */

.w-hijas {
  counter-reset: hija;
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 0;
}

.w-hijas__titulo {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.75rem;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
}

.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  border-top: 2px solid var(--tinta);
}

.w-tarjeta {
  counter-increment: hija;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 0;
  padding: 1.35rem 2.75rem 1.5rem 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .25s var(--curva), padding .3s var(--curva);
}

.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--oro-tinta);
}

.w-tarjeta::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  top: 1.6rem;
  width: .55rem;
  height: .55rem;
  border-top: 2px solid var(--burdeos);
  border-right: 2px solid var(--burdeos);
  transform: rotate(45deg);
  transition: transform .3s var(--curva);
}

.w-tarjeta:hover {
  color: var(--tinta);
  background: var(--superficie);
  padding-left: 1rem;
}

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

.w-tarjeta__nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.1875rem;
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.w-tarjeta__texto {
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}

/* Rejillas largas: filas compactas */
.w-hijas__rejilla:has(> :nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}

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

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

/* --- Hermanas: columnas ordenadas (hasta 100 enlaces) ----------------- */

/* Siempre abiertas (también en móvil) y en tarjetas compactas: nada de
   lista larga de filas con flecha */
.b-relacionadas {
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
}

.b-relacionadas:not(:has(.w-hermanas)) {
  display: none;
}

.w-hermanas {
  padding-top: 1.25rem;
  border-top: 2px solid var(--tinta);
}

.w-hermanas__titulo {
  margin-bottom: 1.25rem;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  font-weight: 700;
  color: var(--tinta);
}

.w-hermanas__enlaces {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .5rem;
}

.w-hermanas__enlaces a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-width: 0;
  padding: .7rem .85rem;
  border: 1px solid var(--filete);
  border-radius: var(--radio);
  background: var(--superficie);
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  overflow-wrap: break-word;
  hyphens: none;
  transition: color .2s, border-color .2s;
}

.w-hermanas__enlaces a::after {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  border-top: 1.5px solid var(--oro);
  border-right: 1.5px solid var(--oro);
  transform: rotate(45deg);
  transition: border-color .2s, transform .3s var(--curva);
}

.w-hermanas__enlaces a:hover {
  color: var(--burdeos);
  border-color: var(--burdeos);
}

.w-hermanas__enlaces a:hover::after {
  border-color: var(--burdeos);
  transform: translateX(3px) rotate(45deg);
}

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

.b-remate {
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) var(--hueco);
}

.b-remate__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.75rem;
  align-items: center;
  padding: clamp(1.75rem, 1.2rem + 3vw, 3.5rem);
  border-radius: var(--radio-g);
  background: var(--noche);
  color: var(--noche-texto);
}

.w-cierre p {
  max-width: 40rem;
  font-size: clamp(1.125rem, 1.02rem + .45vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta);
}

.b-remate .w-cierre p {
  color: var(--noche-texto);
}

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

.b-remate .w-cierre a:not(.b-boton) {
  color: #fff;
  text-decoration-color: var(--oro);
}

.b-remate__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.b-remate__acciones .b-boton {
  background: var(--piedra);
  border-color: var(--piedra);
  color: var(--burdeos);
}

.b-remate__acciones .b-boton:hover {
  background: #fff;
  border-color: #fff;
  color: var(--burdeos-hondo);
}

.b-remate__acciones .b-boton--noche {
  background: transparent;
  border-color: rgba(244, 240, 234, .4);
  color: var(--noche-texto);
}

.b-remate__acciones .b-boton--noche:hover {
  background: rgba(244, 240, 234, .1);
  border-color: var(--noche-texto);
  color: #fff;
}

/* --- Variantes de cabeza según el tipo de página ({{CLASE}}) ----------- */

/* Un único sistema de cabecera (texto a la izquierda, tarjeta foto + ficha
   a la derecha, alineada arriba). Cada nivel del árbol se reconoce por el
   rótulo de la cabecera burdeos, la escala de tres tramos
   (región → provincia → ciudad) y el tamaño del titular, que baja un
   escalón por nivel. Nada más cambia: es la misma web en todos los niveles. */

.b-cabeza .w-datos::after {
  content: none;
  position: absolute;
  top: 1.1rem;
  right: 1.5rem;
  width: 3.5rem;
  height: .375rem;
  background: linear-gradient(90deg,
    var(--e1, rgba(255, 255, 255, .3)) 0 1rem, transparent 1rem 1.25rem,
    var(--e2, rgba(255, 255, 255, .3)) 1.25rem 2.25rem, transparent 2.25rem 2.5rem,
    var(--e3, rgba(255, 255, 255, .3)) 2.5rem 3.5rem);
}

body[class*="region"] .b-cabeza .w-datos::after,
body[class*="division"] .b-cabeza .w-datos::after,
body[class*="provincia"] .b-cabeza .w-datos::after,
body[class*="ciudad"] .b-cabeza .w-datos::after {
  content: "";
}

/* Región */
body[class*="region"]:not([class*="division"]):not([class*="provincia"]):not([class*="ciudad"]) .b-cabeza .w-datos::before {
  content: "Destino · Región";
}

body[class*="region"]:not([class*="division"]):not([class*="provincia"]):not([class*="ciudad"]) .b-cabeza .w-datos {
  --e1: #fff;
}

/* Provincia */
body[class*="division"] .b-cabeza .w-datos::before,
body[class*="provincia"] .b-cabeza .w-datos::before {
  content: "Destino · Provincia";
}

body[class*="division"] .b-cabeza .w-datos,
body[class*="provincia"] .b-cabeza .w-datos {
  --e1: #fff;
  --e2: #fff;
}

body[class*="division"] .b-cabeza h1,
body[class*="provincia"] .b-cabeza h1 {
  font-size: clamp(1.75rem, 1.1rem + 2vw, 2.75rem);
}

/* Ciudad */
body[class*="ciudad"] .b-cabeza .w-datos::before {
  content: "Destino · Ciudad";
}

body[class*="ciudad"] .b-cabeza .w-datos {
  --e1: #fff;
  --e2: #fff;
  --e3: #fff;
}

body[class*="ciudad"] .b-cabeza h1 {
  font-size: clamp(1.75rem, 1.1rem + 1.8vw, 2.5rem);
}

/* Contacto: el teléfono es el protagonista, grande y pulsable; el texto
   de la línea fija no se repite con la entradilla. Tamaño con tope de
   48 px para que quepa en la columna de texto (576-650 px) y, a 390 px,
   en unos 26 px; si aun así no cabe, parte por los espacios. */
body[class*="contacto"] .b-cabeza h1 {
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
}

body[class*="contacto"] .b-cabeza__llamada {
  display: block;
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: var(--apertura);
}

body[class*="contacto"] .b-cabeza__llamada > svg,
body[class*="contacto"] .b-cabeza__llamada-texto {
  display: none;
}

body[class*="contacto"] .b-cabeza__tel {
  display: block;
  max-width: 100%;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(1.5rem, 1rem + 2.6vw, 3rem);
  line-height: 1.1;
  letter-spacing: -.02em;
  white-space: normal;
  overflow-wrap: break-word;
  color: var(--burdeos);
  text-decoration: none;
}

body[class*="contacto"] .b-cabeza__tel:hover {
  color: var(--burdeos-hondo);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

body[class*="contacto"] .b-cabeza__horario {
  display: block;
  margin-top: .5rem;
  font-size: 1rem;
  color: var(--tinta-suave);
}

/* ==========================================================================
   PORTADA
   ========================================================================== */

/* Héroe: texto + ficha a la izquierda, cotizador a la derecha */
.b-heroe {
  padding-block: clamp(1.25rem, .6rem + 2.8vw, 4rem) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}

/* El primer bloque tras el héroe arranca cerca: sin hueco muerto */
.b-heroe + .b-bloque {
  padding-top: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.b-heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "texto"
    "cotizador"
    "datos";
  gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}

.b-heroe__texto { grid-area: texto; }
.b-heroe__cotizador { grid-area: cotizador; }
.b-heroe__datos { grid-area: datos; }

.b-heroe__titulo em {
  font-style: normal;
  color: var(--burdeos);
  white-space: nowrap;
}

.b-heroe .w-antetitulo {
  margin-bottom: clamp(.85rem, .6rem + 1vw, 1.25rem);
}

.b-heroe .w-entradilla {
  margin-top: clamp(1rem, .8rem + 1vw, 1.5rem);
}

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

.b-heroe__datos .w-datos__fila {
  grid-template-columns: minmax(0, 1fr);
  gap: .3rem;
}

/* Sin filete suelto: el borde superior del cotizador arranca a la altura
   del antetítulo */
.b-heroe__cotizador {
  max-width: 47.5rem;
  margin-inline: 0;
  align-self: start;
}

/* Bloques de portada */
.b-bloque {
  padding-block: var(--hueco);
}

.b-bloque + .b-bloque {
  padding-top: 0;
}

.b-bloque + .b-destinos-zona {
  padding-top: var(--hueco);
}

.b-bloque__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem);
}

.b-bloque__num {
  display: block;
  margin-bottom: 1rem;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .14em;
  color: var(--oro-tinta);
}

.b-bloque h2 {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  max-width: 22ch;
}

.b-bloque__intro {
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--tinta-suave);
}

.b-texto p {
  max-width: 40rem;
}

.b-texto p + p {
  margin-top: 1.1rem;
}

.b-texto a {
  font-weight: 600;
  text-decoration-color: rgba(122, 31, 53, .35);
}

.b-texto a:hover {
  text-decoration-color: currentColor;
}

/* Pasos: filas editoriales con numeral grande en Syne (nada de tarjetas
   con icono). En escritorio, numeral | título | texto en columnas
   asimétricas y cada paso entra un poco más que el anterior. */
.b-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--apertura);
}

.b-paso {
  display: grid;
  grid-template-columns: 4.25rem minmax(0, 1fr);
  gap: .5rem 1rem;
  align-items: baseline;
  padding: 1.5rem 0 1.75rem;
  border-bottom: var(--divisor);
}

.b-paso__num {
  grid-row: span 2;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(2.75rem, 2rem + 3.2vw, 5.5rem);
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--burdeos);
  transition: transform .4s var(--curva);
}

.b-paso:hover .b-paso__num {
  transform: translateX(4px);
}

.b-paso h3 {
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  font-weight: 700;
  letter-spacing: -.015em;
}

.b-paso p {
  color: var(--tinta-suave);
  max-width: 34rem;
}

.b-nota {
  margin-top: 2rem;
  max-width: 44rem;
  color: var(--tinta-suave);
}

.b-nota a {
  font-weight: 600;
  white-space: nowrap;
}

/* Límites: cifras de la ficha + tabla */
.b-limites {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.b-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  padding: .5rem clamp(1.5rem, 1rem + 2vw, 2.5rem);
  border-radius: var(--radio-g);
  background: var(--noche);
  color: var(--noche-texto);
}

.b-cifra {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  gap: 1rem;
  padding: 1.35rem 0;
  border-bottom: 1px solid rgba(244, 240, 234, .14);
}

.b-cifra:last-child {
  border-bottom: 0;
}

.b-cifra__num {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 800;
  font-size: clamp(2.5rem, 1.8rem + 2.6vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--oro);
}

.b-cifra__num small {
  font-size: .45em;
  font-weight: 700;
  letter-spacing: 0;
  margin-left: .15em;
}

.b-cifra__ud {
  margin: 0;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--noche-suave);
}

.b-limites .w-tabla {
  margin: 0 0 1.5rem;
}

/* Banda de foto a todo ancho */
.b-banda {
  margin: 0;
}

.b-banda img {
  width: 100%;
  height: clamp(15rem, 34vw, 32rem);
  object-fit: cover;
  object-position: center 60%;
}

/* Recogida: bloque asimétrico con foto pequeña */
.b-asimetrico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.b-asimetrico__foto {
  order: 2;
  margin: 0;
  max-width: 34rem;
}

.b-asimetrico__foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--radio-g);
}

.b-asimetrico .b-bloque__cabeza {
  margin-bottom: 1.5rem;
}

.b-marcas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--tinta);
}

.b-marcas li {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: .85rem;
  padding: .9rem 0;
  border-bottom: 1px solid var(--filete);
  font-weight: 500;
}

.b-marcas svg {
  width: 1.5rem;
  height: 1.5rem;
  color: var(--burdeos);
}

/* Seguro y mercancía: dos columnas con cita */
.b-dos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
}

.b-dos__col h3 {
  margin-bottom: .85rem;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
}

.b-dos__col p {
  color: var(--tinta-suave);
  max-width: 34rem;
}

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

.b-dos__icono {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1.25rem;
  color: var(--burdeos);
}

/* Cita: la tipografía hace el trabajo, sin filete vertical */
.b-cita {
  position: relative;
  margin: 0 0 1.25rem;
  padding: 0;
}

.b-cita p {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: clamp(1.25rem, 1.05rem + .9vw, 1.75rem);
  line-height: 1.25;
  letter-spacing: -.015em;
  color: var(--burdeos);
  text-wrap: balance;
}

/* Índice de destinos por regiones */
.b-destinos-zona {
  background: var(--superficie);
  border-block: 1px solid var(--filete);
}

.b-destinos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 3rem;
}

.b-region {
  border-top: 2px solid var(--tinta);
}

.b-region + .b-region {
  margin-top: 0;
}

.b-region__cabeza {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .25rem .85rem;
  padding: 1.15rem 2.5rem 1.15rem 0;
  cursor: pointer;
  list-style: none;
}

.b-region__cabeza::-webkit-details-marker {
  display: none;
}

.b-region__cabeza::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 1.5rem;
  width: .55rem;
  height: .55rem;
  border-right: 2px solid var(--burdeos);
  border-bottom: 2px solid var(--burdeos);
  transform: rotate(45deg);
  transition: transform .3s var(--curva);
}

.b-region[open] > .b-region__cabeza::after {
  transform: translateY(4px) rotate(-135deg);
}

.b-region__num {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .75rem;
  letter-spacing: .14em;
  color: var(--oro-tinta);
}

.b-region__nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .6vw, 1.5rem);
  line-height: 1.15;
  letter-spacing: -.015em;
  color: var(--tinta);
}

.b-region__cuenta {
  grid-column: 2;
  font-size: .875rem;
  color: var(--tinta-suave);
}

/* Región → provincia: una tarjeta por provincia, todas con el mismo
   formato (nombre, capital y, si las hay, ciudades con página propia).
   La primera tarjeta de cada región lleva a la página de la región. */
.b-region__provincias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14.5rem), 1fr));
  gap: .75rem;
  list-style: none;
  margin: 0;
  padding: 0 0 2rem;
}

.b-prov {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  padding: 1rem 1.15rem 1.1rem;
  border: var(--divisor);
  border-radius: var(--radio);
  background: var(--piedra);
  transition: border-color .25s var(--curva), background-color .25s var(--curva);
}

.b-prov:hover {
  border-color: var(--burdeos);
  background: #FBF8F4;
}

.b-prov__nombre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.25;
  letter-spacing: -.01em;
  color: var(--tinta);
  text-decoration: none;
  text-wrap: balance;
}

/* Toda la tarjeta lleva a la provincia; los enlaces de ciudad quedan encima */
.b-prov__nombre::before {
  content: "";
  position: absolute;
  inset: 0;
}

.b-prov__nombre::after {
  content: "";
  flex: none;
  width: .45rem;
  height: .45rem;
  border-top: 2px solid var(--burdeos);
  border-right: 2px solid var(--burdeos);
  transform: rotate(45deg);
  transition: transform .3s var(--curva);
}

.b-prov:hover .b-prov__nombre {
  color: var(--burdeos);
}

.b-prov:hover .b-prov__nombre::after {
  transform: translateX(3px) rotate(45deg);
}

.b-prov__dato {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}

/* Etiquetas «Capital / Ciudades»: 13 px y oro oscuro (6,6:1 sobre piedra) */
.b-prov__dato span {
  margin-right: .45rem;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: .8125rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}

.b-prov__dato a {
  position: relative;
  z-index: 1;
  color: var(--burdeos);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(122, 31, 53, .3);
}

.b-prov__dato a:hover {
  color: var(--burdeos-hondo);
  text-decoration-color: currentColor;
}

/* Tarjeta de la región: acento sobre papel claro */
.b-prov--region {
  border-color: rgba(176, 141, 87, .45);
  background: var(--oro-papel);
}

.b-prov--region:hover {
  background: #E9DCC6;
}

.b-prov--region .b-prov__nombre {
  color: var(--burdeos);
}

/* Páginas de servicio: bloque asimétrico. El precio va destacado a la
   izquierda en papel dorado; transporte y vuelta, en filas a la derecha */
.b-destinos-zona + .b-bloque {
  padding-top: var(--hueco);
}

.b-servicios {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

.b-servicio {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  min-width: 0;
  padding: 1.5rem 0 1.75rem;
  border-top: var(--divisor);
  color: var(--tinta);
  text-decoration: none;
}

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

.b-servicio:hover .b-servicio__nombre {
  color: var(--burdeos);
}

.b-servicio--principal {
  gap: 1rem;
  margin-bottom: 1rem;
  padding: clamp(1.75rem, 1.2rem + 2.5vw, 3rem);
  border: 0;
  border-radius: var(--radio-g);
  background: var(--oro-papel);
}

.b-servicio__nombre {
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  transition: color .2s;
}

.b-servicio--principal .b-servicio__nombre {
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 16ch;
}

.b-servicio__texto {
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--tinta-suave);
}

.b-servicio__ir {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: auto;
  padding-top: .5rem;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .9375rem;
  color: var(--burdeos);
}

.b-servicio__ir::after {
  content: "";
  width: .5rem;
  height: .5rem;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .3s var(--curva);
}

.b-servicio:hover .b-servicio__ir {
  color: var(--burdeos-hondo);
  text-decoration: underline;
  text-underline-offset: .2em;
}

.b-servicio:hover .b-servicio__ir::after {
  transform: translateX(4px) rotate(45deg);
}

/* Cierre de portada */
.b-final {
  padding-block: var(--hueco);
}

.b-final__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem;
  padding: clamp(2rem, 1.2rem + 4vw, 4.5rem);
  border-radius: var(--radio-g);
  background: var(--noche);
  color: var(--noche-texto);
}

.b-final h2 {
  color: var(--noche-texto);
  font-size: clamp(1.875rem, 1.2rem + 2.8vw, 3.25rem);
  max-width: 18ch;
}

.b-final h2 em {
  font-style: normal;
  color: var(--oro);
}

.b-final p {
  max-width: 34rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  color: var(--noche-suave);
}

.b-final p a {
  color: #fff;
  font-weight: 600;
  text-decoration-color: var(--oro);
}

.b-final p a:hover {
  color: #fff;
  text-decoration-color: #fff;
}

.b-final .b-remate__acciones {
  margin-top: 1.75rem;
}

/* ==========================================================================
   Recorrido del cotizador (_plantilla.html)
   ========================================================================== */

.b-recorrido {
  padding-block: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--hueco);
}

/* Mismo ancho que el formulario (766 px): migas, antetítulo y borde del
   cotizador comparten línea */
.b-recorrido__marco {
  max-width: 47.875rem;
  margin-inline: auto;
}

.b-recorrido__marca {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 0 2rem;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .8125rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oro-tinta);
}

.b-recorrido__marca::after {
  content: "";
  flex: 1 1 0;
  border-top: var(--divisor);
}

/* ==========================================================================
   Pie
   ========================================================================== */

.b-pie {
  background: var(--noche);
  color: var(--noche-suave);
  font-size: .9375rem;
  line-height: 1.6;
}

.b-pie a {
  color: var(--noche-texto);
  text-decoration: none;
}

.b-pie a:hover {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--oro);
}

.b-pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.5rem;
  padding-block: clamp(3rem, 2rem + 3vw, 5rem) 2.5rem;
}

.b-pie .b-marca {
  color: var(--noche-texto);
}

.b-pie .b-marca__nombre span {
  color: var(--oro);
}

.b-pie__lema {
  max-width: 22rem;
  margin-top: 1.25rem;
}

.b-pie__tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  margin-top: 1.25rem;
  font-family: var(--f-titulo);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -.01em;
}

.b-pie__tel svg {
  width: 1.125rem;
  height: 1.125rem;
  color: var(--oro);
}

.b-pie__horario {
  margin-top: .25rem;
  font-size: .875rem;
}

.b-pie__titulo {
  margin: 0 0 1rem;
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: .75rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--oro);
}

.b-pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.b-pie__lista li + li {
  margin-top: .55rem;
}

.b-pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid rgba(244, 240, 234, .14);
  font-size: .875rem;
}

/* ==========================================================================
   Ajustes por ancho (al final, para que manden sobre la regla base)
   ========================================================================== */

@media (min-width: 45rem) {
  .b-paso {
    grid-template-columns: 7.5rem minmax(0, 4fr) minmax(0, 6fr);
    column-gap: clamp(1.5rem, .5rem + 2.5vw, 3rem);
    padding: 2rem 0 2.25rem;
  }
  .b-paso__num { grid-row: auto; }

  .b-dos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }

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

  .w-hermanas__enlaces { grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }

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

@media (min-width: 70rem) {
  /* Menú de escritorio */
  .b-menu-boton { display: none; }
  .b-menu {
    display: flex;
    align-items: center;
    gap: 1.75rem;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .b-menu__lista {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin: 0;
  }
  .b-menu__lista > li {
    position: relative;
    border: 0;
  }
  .b-menu__lista > li > a {
    position: relative;
    padding: .5rem 0;
    font-size: .9375rem;
    font-weight: 500;
  }
  .b-menu__lista > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: .2rem;
    height: 1.5px;
    background: var(--burdeos);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--curva);
  }
  .b-menu__lista > li > a:hover::after,
  .b-menu__lista > li > a[aria-current="page"]::after { transform: scaleX(1); }

  .b-menu__lista > .b-menu__desplegable > a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
  }
  .b-menu__desplegable > a::before {
    content: "";
    order: 2;
    width: .35rem;
    height: .35rem;
    margin-top: -.2rem;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .b-menu__sub {
    position: absolute;
    top: 100%;
    left: -1.25rem;
    min-width: 15rem;
    margin: .5rem 0 0;
    padding: .6rem 0;
    border: var(--divisor);
    border-radius: var(--radio-g);
    background: var(--superficie);
    box-shadow: 0 18px 40px -20px rgba(43, 27, 31, .35);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .2s var(--curva), transform .2s var(--curva), visibility .2s;
  }
  .b-menu__sub::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -.75rem;
    height: .75rem;
  }
  .b-menu__desplegable:hover > .b-menu__sub,
  .b-menu__desplegable:focus-within > .b-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .b-menu__sub a {
    padding: .55rem 1.25rem;
    color: var(--tinta);
    font-size: .9375rem;
  }
  .b-menu__sub a:hover {
    background: var(--piedra);
    color: var(--burdeos);
  }
  .b-boton--menu {
    width: auto;
    min-height: 2.5rem;
    padding: .55rem 1.1rem;
    font-size: .875rem;
  }
}

@media (min-width: 62rem) {
  /* Cabeza interior a dos columnas: título a la izquierda, ficha a la derecha */
  /* La ficha arranca arriba, a la altura de las migas; el cotizador
     incrustado ocupa todo el ancho bajo el titular */
  .b-cabeza__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "texto ficha"
      "accion accion";
    column-gap: 4rem;
    row-gap: 2.5rem;
  }
  /* Si la acción es solo el botón, va bajo la entradilla y la ficha
     ocupa la columna derecha entera */
  .b-cabeza__rejilla:has(> .b-cabeza__accion .w-cta-linea) {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "texto ficha"
      "accion ficha";
    row-gap: 2rem;
  }
  .b-cabeza__rejilla:not(:has(> .b-cabeza__ficha > :is(.w-datos, .w-foto))) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "texto"
      "accion";
  }
  /* La tarjeta arranca arriba, a la altura de las migas: nada de ficha
     flotando a media altura con piedra vacía encima */
  .b-cabeza__ficha { align-self: start; }

  /* Cuerpo asimétrico: H2 fijo a la izquierda */
  .b-cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2.5rem, 1rem + 4vw, 6rem);
    align-items: start;
  }
  .b-cuerpo > * { grid-column: 2; }
  .b-cuerpo > .w-seccion,
  .b-cuerpo > .w-faq {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: start;
  }
  .b-cuerpo > .w-seccion > *,
  .b-cuerpo > .w-faq > * { grid-column: 2; }
  .b-cuerpo > .w-seccion > h2,
  .b-cuerpo > .w-faq > h2 {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: calc(var(--cabecera-alto) + 1.5rem);
    margin-bottom: 0;
  }
  .b-cuerpo > .w-seccion > h3:first-of-type { margin-top: 0; }
  .b-cuerpo > .w-faq > .w-faq__item:first-of-type { border-top: 2px solid var(--tinta); }

  .b-remate__panel { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; }

  /* Portada */
  /* Numeración a todo el ancho; H2 y entradilla comparten fila y arrancan
     en la misma línea: nada de párrafo colgando bajo un hueco */
  .b-bloque__cabeza {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    column-gap: 4rem;
    row-gap: 0;
    align-items: start;
  }
  .b-bloque__cabeza > div { display: contents; }
  .b-bloque__cabeza .b-bloque__num { grid-column: 1 / -1; }
  .b-bloque__cabeza .b-bloque__intro { padding-top: .35rem; }
  .b-bloque h2 { font-size: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem); }

  /* Pasos escalonados: cada uno entra un tramo más que el anterior */
  .b-paso:nth-child(2) { margin-left: 4rem; }
  .b-paso:nth-child(3) { margin-left: 8rem; }

  /* Servicios: el precio destacado a la izquierda, los otros dos en filas */
  .b-servicios {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    column-gap: 4rem;
    align-items: start;
  }
  .b-servicio--principal {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }
  .b-servicio:not(.b-servicio--principal) { padding-top: 1.75rem; }
  .b-servicio:nth-child(2) { border-top: var(--apertura); }

  .b-limites {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 4rem;
    align-items: start;
  }

  .b-asimetrico {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: clamp(3rem, 1rem + 5vw, 7rem);
    align-items: start;
  }
  .b-asimetrico .b-bloque__cabeza { grid-template-columns: minmax(0, 1fr); }
  .b-asimetrico__foto {
    order: 0;
    max-width: 26rem;
    position: sticky;
    top: calc(var(--cabecera-alto) + 1.5rem);
  }
  .b-asimetrico__foto img { aspect-ratio: 4 / 5; }

  /* Cada región en su fila; sus provincias, en tres columnas fijas */
  .b-region__provincias { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .b-final__panel {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    gap: 4rem;
  }

  .b-pie__rejilla { grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 2fr)); gap: 3rem; }
}

@media (min-width: 62rem) {
  /* Héroe intermedio: titular y ficha en la primera fila, cotizador centrado debajo */
  .b-heroe__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas:
      "texto datos"
      "cotizador cotizador";
    column-gap: 4rem;
    row-gap: 3rem;
  }
  .b-heroe__datos { align-self: start; }
  .b-heroe__cotizador { margin-inline: auto; }
}

@media (min-width: 80rem) {
  /* Héroe ancho: cotizador a la derecha desde la primera pantalla, dentro
     del mismo contenedor que la cabecera (titular y filete alineados con
     la marca y el menú) */
  .b-heroe__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 40rem);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "texto cotizador"
      "datos cotizador";
    column-gap: 3.5rem;
    row-gap: 2.5rem;
  }
  .b-heroe__titulo { font-size: var(--h1-compartido); }
  .b-heroe__cotizador { max-width: none; margin-inline: 0; }
  /* Las dos columnas acaban a la misma altura */
  .b-heroe__datos { align-self: end; }
}

/* Escritorio: la cabecera de destinos y la de hermanas no se pliegan */
@media (min-width: 45rem) {
  .b-region__cabeza {
    grid-template-columns: auto minmax(0, 1fr) auto;
    cursor: default;
    pointer-events: none;
    padding-right: 0;
  }
  .b-region__cabeza::after { display: none; }
  .b-region__cuenta { grid-column: 3; }
}

/* Móvil: fichas con la etiqueta encima del valor (nada de versalitas
   partidas en una columna estrecha) y portada más compacta */
@media (max-width: 44.99rem) {
  .w-datos__fila,
  .b-heroe__datos .w-datos__fila {
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    padding-block: .7rem;
  }
  .b-cabeza .w-datos { padding: 0 1.25rem .25rem; }
  .b-cabeza .w-datos::before { margin-inline: -1.25rem; padding-inline: 1.25rem 5.25rem; }
  .b-cabeza .w-datos::after { right: 1.25rem; }

  /* Cotizador: el envoltorio ocupa el mismo ancho que el texto (solo el
     contenedor; el interior del formulario no se toca) */
  .w-cotizador,
  .b-heroe__cotizador,
  .b-cabeza__accion .w-cotizador {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    padding-inline: 0;
  }
  .w-cotizador > :where(:not(.w-cotizador__titulo)) {
    width: 100%;
    margin-inline: 0;
  }

  /* Botones y enlaces largos parten línea en vez de ensanchar la página */
  .b-boton,
  .w-cta {
    max-width: 100%;
    white-space: normal;
    text-align: center;
  }

  /* Destinos: tarjetas compactas en una columna, nombre y datos en filas */
  .b-region__provincias { gap: .5rem; padding-bottom: 1.5rem; }
  .b-prov { padding: .85rem 1rem .9rem; }
  .b-prov__nombre { font-size: 1.0625rem; }
  .b-prov__dato { font-size: .9375rem; }

  /* Hermanas: dos columnas de filas, sin cajas (nada de muro de chips) */
  .w-hermanas__enlaces { gap: 0 1.25rem; }
  .w-hermanas__enlaces a {
    padding: .7rem 0;
    border: 0;
    border-bottom: var(--divisor);
    border-radius: 0;
    background: transparent;
    font-size: .9375rem;
  }

  /* Primera pantalla: entradilla corta y contenida para que asome el cotizador */
  .b-heroe { padding-top: 1rem; }
  .b-heroe .w-entradilla { margin-top: .85rem; }
  .b-heroe .w-entradilla p { font-size: 1.0625rem; line-height: 1.5; }

  .b-bloque { padding-block: 3.5rem; }
  .b-heroe + .b-bloque { padding-top: 2.5rem; }
  .b-destinos-zona + .b-bloque { padding-top: 3.5rem; }
  .b-bloque + .b-destinos-zona { padding-top: 3.5rem; }
  .b-bloque__cabeza { margin-bottom: 2rem; }
  .b-banda img { height: 11rem; }
  .b-asimetrico { gap: 1.75rem; }
  .b-asimetrico__foto img { aspect-ratio: 16 / 9; }
  .b-marcas { margin-top: 1.5rem; }
  .b-marcas li { padding-block: .7rem; }
  .b-dos { gap: 2rem; }
  .b-dos__icono { margin-bottom: .85rem; }
}

/* Móvil estrecho: la ficha del héroe pasa a una columna compacta y el
   antetítulo corta antes de la ruta, sin punto medio colgando */
@media (max-width: 29.99rem) {
  .b-heroe__datos { grid-template-columns: minmax(0, 1fr); }
  .b-heroe .w-antetitulo { letter-spacing: .08em; }
  .b-marca__nombre { font-size: .9375rem; }
  .b-cifra { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
  .w-tarjeta:hover { padding-left: 0; }
}

/* Móvil: tablas apiladas fila a fila, sin scroll ni celdas fuera de vista.
   La cabecera queda visible como leyenda (nada oculto). */
@media (max-width: 37.49rem) {
  .w-tabla { overflow: visible; }
  .w-tabla table,
  .w-tabla caption,
  .w-tabla thead,
  .w-tabla tbody,
  .w-tabla tr,
  .w-tabla th,
  .w-tabla td { display: block; }
  .w-tabla table { min-width: 0; }
  .w-tabla thead tr {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem .5rem;
    padding: .9rem 1.1rem .75rem;
    border-bottom: 2px solid var(--tinta);
    background: var(--superficie);
  }
  .w-tabla thead th {
    padding: 0;
    border: 0;
    white-space: normal;
  }
  .w-tabla thead th + th::before {
    content: "·";
    margin-right: .5rem;
    color: var(--oro-tinta);
  }
  .w-tabla tbody tr {
    padding: .85rem 1.1rem;
    background: var(--superficie);
  }
  .w-tabla tbody tr + tr { border-top: 1px solid var(--filete); }
  .w-tabla tbody tr + tr > * { border-top: 0; }
  .w-tabla tbody th,
  .w-tabla tbody td { padding: 0; }
  .w-tabla tbody td + td { margin-top: .2rem; }

  .w-seccion > table,
  .w-seccion > table > tbody,
  .w-seccion > table > thead { display: block; }
  .w-seccion > table tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: .2rem;
    padding: .8rem 1rem;
    border-bottom: 1px solid var(--filete);
    background: var(--superficie);
  }
  /* Filas de dos celdas: etiqueta a la izquierda, valor a la derecha */
  .w-seccion > table tr:has(> :nth-child(2):last-child) {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: 1rem;
    align-items: baseline;
  }
  .w-seccion > table th,
  .w-seccion > table td {
    padding: 0;
    border: 0;
    overflow-wrap: break-word;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  :where(*:not(.w-cotizador *)),
  :where(*:not(.w-cotizador *))::before,
  :where(*:not(.w-cotizador *))::after { transition: none !important; }
}