/* ==========================================================================
   Enviar paquete a Alemania · hoja de estilo
   Paleta «Verde menta y tinta» · Bebas Neue + Rubik · maqueta en mosaico
   ========================================================================== */

:root {
  --menta: #EFF8F4;
  --menta-2: #E2F2EA;
  --verde-claro: #D3EEE3;
  --tinta: #102A24;
  --tinta-2: #3B5650;
  --tinta-3: #1B3D35;
  --verde: #0E7C66;
  --verde-osc: #0A5E4D;
  --coral: #F45D48;
  --coral-osc: #A8321F;
  --coral-papel: #FDE6E1;
  --blanco: #FFFFFF;
  --sobre-tinta: #EFF8F4;
  --sobre-tinta-2: #A9D3C5;
  --filete: #C7E3D7;
  --filete-osc: #2C4A43;

  --titulos: 'Bebas Neue', 'Oswald', Impact, 'Arial Narrow', sans-serif;
  --texto: 'Rubik', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --m: clamp(1rem, 4vw, 2.5rem);
  --ancho: 77.5rem;
  --hueco: clamp(.75rem, 1.4vw, 1.25rem);
  --radio: 1.25rem;
  --radio-s: .75rem;
  --celda: clamp(17rem, 24vw, 22rem);
  --bloque: clamp(2.5rem, 5vw, 4.5rem);
  --sombra: 0 1px 2px rgba(16, 42, 36, .06), 0 12px 32px -12px rgba(16, 42, 36, .18);
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--menta);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--titulos);
  font-weight: 400;
  line-height: .95;
  letter-spacing: .01em;
  margin: 0;
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
}

h1 { font-size: clamp(2.8rem, 1.5rem + 5.2vw, 5.75rem); overflow-wrap: break-word; }
h2 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); }
h3 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2rem); line-height: 1; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--verde-osc); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--tinta); text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; border-radius: 4px; }

strong { font-weight: 600; }

.envase {
  width: min(calc(100% - 2 * var(--m)), var(--ancho));
  margin-inline: auto;
}

.saltar {
  position: absolute;
  left: var(--m);
  top: -4rem;
  z-index: 100;
  background: var(--tinta);
  color: var(--sobre-tinta);
  padding: .6rem 1rem;
  border-radius: var(--radio-s);
  text-decoration: none;
  font-weight: 600;
}
.saltar:focus { top: .75rem; color: var(--sobre-tinta); }

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

/* ---------- Iconos ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.ico {
  width: 2rem;
  height: 2rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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

.boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--texto);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: .01em;
  line-height: 1.2;
  padding: .85rem 1.35rem;
  border-radius: 999px;
  background: var(--coral);
  color: var(--tinta);
  text-decoration: none;
  border: 2px solid var(--coral);
  transition: background-color .2s var(--curva), color .2s var(--curva), border-color .2s var(--curva), transform .2s var(--curva);
}
.boton::after,
.w-cta::after {
  content: "";
  width: .9em;
  height: .9em;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .25s var(--curva);
}
.boton:hover,
.w-cta:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--sobre-tinta);
}
.boton:hover::after,
.w-cta:hover::after { transform: translateX(4px); }

/* Sistema de botones: primario coral (.boton) y secundario con contorno
   tinta (.boton--linea); en fondos oscuros, contorno claro (.boton--claro) */
.boton--linea {
  background: transparent;
  border-color: var(--tinta);
  color: var(--tinta);
}
.boton--linea::after { display: none; }
.boton--linea:hover { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }

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

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

.enlace-flecha {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 2px solid currentColor;
  padding-bottom: .1rem;
}
.enlace-flecha::after {
  content: "→";
  transition: transform .25s var(--curva);
}
.enlace-flecha:hover::after { transform: translateX(4px); }

/* ==========================================================================
   Cabecera y menú
   ========================================================================== */

.cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 248, 244, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--filete);
}

.cab__in {
  width: min(calc(100% - 2 * var(--m)), var(--ancho));
  margin-inline: auto;
  min-height: 4.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

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

.marca__icono {
  width: 2.6rem;
  height: 2.6rem;
  transition: transform .4s var(--curva);
}
.marca:hover .marca__icono { transform: rotate(-6deg) scale(1.04); }

.marca__texto {
  display: flex;
  flex-direction: column;
  font-family: var(--titulos);
  font-size: 1.5rem;
  line-height: .88;
  letter-spacing: .02em;
}
.marca__texto span + span { color: var(--verde); }

.cab__boton { display: none; }

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

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: .15rem;
}

.menu__enlace,
.menu__sub > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  font-family: var(--texto);
  font-weight: 600;
  font-size: .975rem;
  letter-spacing: 0;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  padding: .7rem .7rem;
  border-radius: .5rem;
  cursor: pointer;
}
.menu__enlace::after {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .3rem;
  height: 2px;
  background: var(--coral);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--curva);
}
.menu__enlace:hover { color: var(--tinta); }
.menu__enlace:hover::after,
.menu__enlace[aria-current="page"]::after { transform: scaleX(1); }

.menu__sub { position: relative; }
.menu__sub > summary { list-style: none; }
.menu__sub > summary::-webkit-details-marker { display: none; }
.menu__sub > summary::after {
  content: "";
  width: .45rem;
  height: .45rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s var(--curva);
}
.menu__sub[open] > summary { background: var(--menta-2); }
.menu__sub[open] > summary::after { transform: translateY(1px) rotate(-135deg); }

.menu__desp {
  list-style: none;
  margin: 0;
  padding: .5rem;
  position: absolute;
  top: calc(100% + .5rem);
  left: 0;
  width: 19rem;
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-radius: var(--radio-s);
  box-shadow: var(--sombra);
}
.menu__desp a {
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  column-gap: .75rem;
  align-items: center;
  padding: .65rem .7rem;
  border-radius: .5rem;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .15s;
}
.menu__desp a:hover { background: var(--menta); color: var(--tinta); }
.menu__desp .ico {
  grid-row: span 2;
  width: 2.25rem;
  height: 2.25rem;
  padding: .4rem;
  border-radius: .5rem;
  background: var(--verde-claro);
  color: var(--verde-osc);
}
.menu__desp-nombre {
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.2;
}
.menu__desp-texto {
  font-size: .875rem;
  line-height: 1.3;
  color: var(--tinta-2);
}

.menu__cta { font-size: .975rem; padding: .7rem 1.1rem; }

/* ==========================================================================
   Componentes de la fábrica
   ========================================================================== */

/* Migas */
.w-migas { margin: 0 0 1.25rem; font-size: .875rem; }
.w-migas ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
}
.w-migas li {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--h-suave, var(--tinta-2));
  min-width: 0;
}
.w-migas li + li::before {
  content: "";
  width: .4rem;
  height: .4rem;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
.w-migas a {
  color: var(--h-enlace, var(--verde-osc));
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.w-migas a:hover { border-bottom-color: currentColor; color: var(--h-enlace, var(--verde-osc)); }
.w-migas [aria-current] { font-weight: 600; color: var(--h-texto, var(--tinta)); }

/* Antetítulo */
.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  line-height: 1.35;
  text-wrap: balance;
  hyphens: none;
  color: var(--h-acento, var(--verde-osc));
}
.w-antetitulo::before {
  content: "";
  width: 2rem;
  height: 3px;
  flex: none;
  border-radius: 2px;
  background: var(--coral);
}

/* Entradilla */
.w-entradilla {
  margin-top: clamp(1rem, 2vw, 1.5rem);
  max-width: 54ch;
}
.w-entradilla p {
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  line-height: 1.55;
  color: var(--h-texto, var(--tinta));
}

/* Ficha de datos */
.w-datos {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(7rem, 2fr) minmax(0, 3fr);
  gap: .25rem 1.5rem;
  align-items: baseline;
  align-content: start;
  padding: .85rem 0;
  border-top: 1px solid var(--d-filete, var(--filete));
}
.w-datos__fila:last-child { border-bottom: 1px solid var(--d-filete, var(--filete)); }
/* Etiquetas en caja baja y sin espaciar: un término largo (Regierungsbezirke)
   se lee entero y no se pega a la columna de valores */
.w-datos dt {
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--d-suave, var(--tinta-2));
  line-height: 1.35;
  min-width: 0;
  hyphens: none;
  overflow-wrap: break-word;
}
.w-datos dd {
  margin: 0;
  font-weight: 500;
  line-height: 1.4;
  color: var(--d-texto, var(--tinta));
  min-width: 0;
}

/* Cotizador: contenedor con el estilo de la web, sin entrar en el formulario.
   Fondo blanco y liso (sin trama ni degradado) para que todo el texto del
   formulario se lea; el carácter lo ponen el filete verde y el punto coral. */
/* El contenedor mide lo que el formulario (760 px + relleno) y se centra:
   nunca una caja blanca más ancha que el widget */
.w-cotizador {
  position: relative;
  width: 100%;
  max-width: 52rem;
  margin-inline: auto;
  border-radius: var(--radio);
  padding: clamp(.75rem, 2.5vw, 2rem);
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-top: 6px solid var(--verde);
  color: var(--tinta);
}
.w-cotizador > * {
  max-width: 47.5rem;
  margin-inline: auto;
}
.w-cotizador__titulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .9rem;
  font-family: var(--texto);
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--verde-osc);
}
.w-cotizador__titulo::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-papel);
}

/* Foto */
.w-foto {
  margin: 0;
  position: relative;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--tinta);
}
.w-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.w-foto figcaption {
  padding: .8rem 1.1rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--sobre-tinta);
  background: var(--tinta);
}

/* Secciones del documento */
.w-seccion {
  counter-increment: seccion;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--filete);
}
.w-seccion:first-child { border-top: 0; padding-top: 0; }
.w-seccion > h2 {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: .9rem;
  align-items: baseline;
  margin-bottom: 1.1rem;
}
.w-seccion > h2::before {
  content: counter(seccion, decimal-leading-zero);
  font-size: .5em;
  letter-spacing: .06em;
  color: var(--coral-osc);
  padding: .2em .45em .1em;
  border: 1.5px solid currentColor;
  border-radius: .35em;
  transform: translateY(-.3em);
}
.w-seccion h3 {
  margin: 1.75rem 0 .6rem;
  color: var(--verde-osc);
}
.w-seccion p,
.w-seccion ul,
.w-seccion ol { max-width: 68ch; }
.w-seccion ul,
.w-seccion ol { padding-left: 1.2rem; margin: 0 0 1em; }
.w-seccion li { margin-bottom: .35em; }
.w-seccion li::marker { color: var(--verde); }

/* Tablas: scroll propio en móvil */
.w-tabla {
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--filete);
  border-radius: var(--radio-s);
  max-width: 100%;
  /* Indicador de scroll: sombra en el borde por el que queda tabla oculta
     (las capas «local» la tapan cuando se llega al extremo) */
  background:
    linear-gradient(90deg, var(--blanco) 40%, rgba(255, 255, 255, 0)) left center / 2.5rem 100% no-repeat local,
    linear-gradient(270deg, var(--blanco) 40%, rgba(255, 255, 255, 0)) right center / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(16, 42, 36, .22), rgba(16, 42, 36, 0)) left center / 1rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(16, 42, 36, .22), rgba(16, 42, 36, 0)) right center / 1rem 100% no-repeat scroll,
    var(--blanco);
}
.w-tabla table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}
.w-tabla th,
.w-tabla td {
  text-align: left;
  padding: .85rem 1rem;
  vertical-align: top;
}
.w-tabla thead th {
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-family: var(--texto);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.w-tabla tbody th { color: var(--tinta); font-weight: 600; }
.w-tabla tbody tr + tr td,
.w-tabla tbody tr + tr th { border-top: 1px solid var(--filete); }
.w-tabla tbody tr:hover td,
.w-tabla tbody tr:hover th { background: var(--menta); }
.w-tabla td:first-child { font-weight: 600; color: var(--verde-osc); }

/* Preguntas frecuentes */
.w-faq { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.w-faq > h2 { margin-bottom: 1.25rem; }
.w-faq__item {
  border-top: 1px solid var(--filete);
}
.w-faq__item:last-of-type { border-bottom: 1px solid var(--filete); }
.w-faq__item > summary {
  list-style: none;
  cursor: pointer;
  display: grid;
  grid-template-columns: 1fr 2rem;
  gap: 1rem;
  align-items: center;
  padding: 1.1rem 0;
  font-weight: 500;
  font-size: 1.08rem;
  line-height: 1.4;
  color: var(--tinta);
  transition: color .2s;
}
.w-faq__item > summary::-webkit-details-marker { display: none; }
.w-faq__item > summary::after {
  content: "";
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background:
    linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
    var(--verde-claro);
  color: var(--verde-osc);
  transition: transform .3s var(--curva), background-color .2s;
}
.w-faq__item > summary:hover { color: var(--verde-osc); }
.w-faq__item[open] > summary::after {
  transform: rotate(135deg);
  background-color: var(--coral-papel);
  color: var(--coral-osc);
}
.w-faq__resp {
  padding: 0 3rem 1.25rem 0;
  color: var(--tinta-2);
  max-width: 68ch;
}

/* Hijas: rejilla de tarjetas de 2 a 100 */
.w-hijas {
  counter-reset: hija;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.w-hijas__titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
}
.w-hijas__titulo::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--filete);
}
.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  gap: var(--hueco);
}
.w-tarjeta {
  counter-increment: hija;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-height: 9rem;
  padding: 1.15rem 1.25rem 1.25rem;
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: transform .25s var(--curva), border-color .2s, box-shadow .25s var(--curva);
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-family: var(--titulos);
  font-size: 1rem;
  letter-spacing: .08em;
  color: var(--coral-osc);
  margin-bottom: auto;
  padding-bottom: .9rem;
}
.w-tarjeta::after {
  content: "";
  position: absolute;
  top: 1.1rem;
  right: 1.1rem;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--menta) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 12 12 4M6 4h6v6' fill='none' stroke='%230A5E4D' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  transition: transform .25s var(--curva), background-color .2s;
}
.w-tarjeta:hover {
  color: var(--tinta);
  transform: translateY(-3px);
  border-color: var(--verde);
  box-shadow: var(--sombra);
}
.w-tarjeta:hover::after { transform: rotate(45deg); background-color: var(--verde-claro); }
.w-tarjeta__nombre {
  font-weight: 600;
  font-size: clamp(1.05rem, 1rem + .25vw, 1.2rem);
  line-height: 1.25;
  padding-right: 2.5rem;
  text-wrap: balance;
  hyphens: none;
}
.w-tarjeta__texto {
  font-size: .925rem;
  line-height: 1.45;
  color: var(--tinta-2);
}
/* Con muchas hijas, tarjetas compactas en filas */
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: .6rem;
}
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta {
  min-height: 0;
  padding: .8rem 3rem .85rem 1rem;
  border-radius: var(--radio-s);
}
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::before { padding-bottom: .3rem; font-size: .85rem; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::after { top: 50%; right: .75rem; width: 1.6rem; height: 1.6rem; margin-top: -.8rem; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__nombre { font-size: 1rem; padding-right: 0; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__texto { font-size: .85rem; }

/* Hermanas: columnas ordenadas, hasta 100 enlaces */
.w-hermanas {
  margin-block: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.25rem, 3vw, 2.25rem);
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--filete);
}
.w-hermanas__titulo {
  font-size: clamp(1.7rem, 1.3rem + 1.2vw, 2.4rem);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 3px solid var(--tinta);
}
.w-hermanas__enlaces {
  columns: 14rem auto;
  column-gap: 2rem;
  column-rule: 1px solid var(--filete);
}
.w-hermanas__enlaces a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  break-inside: avoid;
  padding: .55rem 0;
  border-bottom: 1px solid var(--menta-2);
  font-size: .975rem;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  transition: color .15s, padding-left .2s var(--curva);
}
.w-hermanas__enlaces a::after {
  content: "→";
  color: var(--verde);
  opacity: .55;
  transition: opacity .2s, transform .2s var(--curva);
}
.w-hermanas__enlaces a:hover { color: var(--verde-osc); padding-left: .35rem; }
.w-hermanas__enlaces a:hover::after { opacity: 1; transform: translateX(3px); }
.w-hermanas__enlaces a[aria-current] { font-weight: 600; color: var(--coral-osc); }

.w-hermanas__mas {
  margin-top: 1rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border: 1.5px solid var(--verde);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--verde-osc);
  font: 600 .95rem/1 var(--texto);
  cursor: pointer;
}
.w-hermanas__mas:hover { background: var(--verde-claro); }
.w-hermanas.is-plegada .w-hermanas__enlaces a:nth-child(n+11) { display: none; }

/* Cierre */
.w-cierre p {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  line-height: 1.5;
  max-width: 46ch;
}

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

.pie {
  margin-top: clamp(3rem, 6vw, 5rem);
  background: var(--tinta);
  color: var(--sobre-tinta);
  padding-block: clamp(3rem, 6vw, 4.5rem) 1.5rem;
  font-size: .95rem;
}
.pie a { color: var(--sobre-tinta); text-decoration: none; }
.pie a:hover { color: var(--blanco); text-decoration: underline; }

.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}

.pie .marca { color: var(--sobre-tinta); }
.pie .marca__texto span + span { color: var(--coral); }
.pie__lema {
  margin: 1.25rem 0;
  color: var(--sobre-tinta-2);
  max-width: 30ch;
}
.pie__tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--titulos);
  font-size: 1.9rem;
  letter-spacing: .03em;
  line-height: 1;
}
.pie__tel .ico { width: 1.5rem; height: 1.5rem; color: var(--coral); }
.pie__horario { margin-top: .4rem; font-size: .85rem; color: var(--sobre-tinta-2); }

.pie__titulo {
  font-family: var(--texto);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--coral);
  margin-bottom: .9rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--filete-osc);
}
.pie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
}
.pie__lista li { padding: .3rem 0; line-height: 1.35; }
.pie .pie__mas {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .9rem;
  padding: .55rem 1rem;
  border: 1.5px solid var(--sobre-tinta-2);
  border-radius: 999px;
  font-weight: 600;
  font-size: .9rem;
  line-height: 1.2;
}
.pie .pie__mas::after { content: "→"; color: var(--coral); transition: transform .2s var(--curva); }
.pie .pie__mas:hover { border-color: var(--coral); text-decoration: none; }
.pie .pie__mas:hover::after { transform: translateX(3px); }

.pie__base {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--filete-osc);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  font-size: .85rem;
  color: var(--sobre-tinta-2);
}
.pie__base p { margin: 0; }
.pie__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
}
.pie__legal a { color: var(--sobre-tinta-2); }

/* ==========================================================================
   Páginas interiores (_pagina.html)
   ========================================================================== */

/* La página es una columna flexible: el orden de los módulos cambia según el
   nivel (en un Land, sus regiones suben junto al héroe) y en móvil */
.p {
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
}
body[class*="region"] .p > .p-heroe { order: -2; }
body[class*="region"] .p > .w-hijas { order: -1; }

/* Héroe: una regla fija por nivel, igual en todas las páginas del nivel.
   El botón «Calcular precio» y el indicador de nivel van siempre dentro
   del panel del titular; la ficha cierra con el teléfono.
   · País y servicio (y contacto): panel tinta a la izquierda; a la derecha,
     ficha arriba y foto debajo
   · Land: panel verde y ficha en la misma fila; debajo, foto panorámica a
     todo el ancho (recorte horizontal)
   · Distrito y ciudad: panel blanco con filete coral, ancho, a la derecha;
     a la izquierda, foto en 3:2 y ficha debajo */
.p-heroe {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  grid-template-areas:
    "texto ficha"
    "texto foto";
  grid-template-rows: auto minmax(13rem, 1fr);
  gap: var(--hueco);
}
.p-heroe__texto { grid-area: texto; }
.p-heroe__ficha { grid-area: ficha; min-width: 0; }
.p-heroe__foto { grid-area: foto; position: relative; min-height: 13rem; }
.p-heroe__foto:empty { display: none; }
.p-heroe__ficha:not(:has(.w-datos)) { display: none; }

.p-heroe:not(:has(.w-foto)) { grid-template-areas: "texto ficha"; grid-template-rows: auto; }
.p-heroe:not(:has(.w-datos)) { grid-template-areas: "texto foto"; grid-template-rows: minmax(20rem, auto); }

/* Una lógica por nivel, con el titular SIEMPRE a la izquierda (o arriba):
   · País y servicio: panel tinta | ficha arriba y foto debajo
   · Land: panel verde | foto del mismo alto que el panel; debajo, la ficha
     en franja a todo el ancho; después, el mosaico de sus regiones
   · Región: la misma retícula que el país (panel | ficha + foto), con panel
     blanco de filete coral y ficha oscura
   · Ciudad: foto en banda a todo el ancho, panel montado sobre ella y ficha
     en franja
   La ficha nunca se estira: toma su alto natural y la foto rellena el resto */

/* Land: la foto ocupa solo la fila del panel (stretch + cover), nunca baja
   por debajo de su borde */
body[class*="region"] .p-heroe {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
  grid-template-areas:
    "texto foto"
    "ficha ficha";
  grid-template-rows: auto auto;
  align-items: stretch;
}
body[class*="region"] .p-heroe__foto { min-height: 18rem; align-self: stretch; }
body[class*="region"] .p-heroe:not(:has(.w-foto)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "ficha"; }
body[class*="region"] .p-heroe:not(:has(.w-datos)) { grid-template-areas: "texto foto"; grid-template-rows: auto; }

/* Ciudad: foto a sangre de la retícula; el panel se monta sobre su borde
   inferior y la ficha cierra el héroe en franja: tres filas, ningún hueco */
body[class*="ciudad"] .p-heroe {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "foto"
    "texto"
    "ficha";
  grid-template-rows: auto;
}
body[class*="ciudad"] .p-heroe:not(:has(.w-foto)) { grid-template-areas: "texto" "ficha"; }
body[class*="ciudad"] .p-heroe:not(:has(.w-datos)) { grid-template-areas: "foto" "texto"; }
body[class*="ciudad"] .p-heroe__foto { min-height: 0; height: clamp(14rem, 26vw, 21rem); }
body[class*="ciudad"] .p-heroe__foto .w-foto img { object-position: center 55%; }
body[class*="ciudad"] .p-heroe__texto { position: relative; z-index: 1; }
body[class*="ciudad"] .p-heroe:has(.w-foto) .p-heroe__texto { margin: -4.5rem clamp(1rem, 3vw, 2.5rem) 0; }

/* En los destinos la foto va a color, como en la portada, con una veladura
   verde suave (multiply al 35 %) que la ata a la paleta sin apagarla */
body[class*="region"] .p-heroe__foto .w-foto::after,
body[class*="division"] .p-heroe__foto .w-foto::after,
body[class*="provincia"] .p-heroe__foto .w-foto::after,
body[class*="ciudad"] .p-heroe__foto .w-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--verde) 0%, var(--verde-osc) 100%);
  mix-blend-mode: multiply;
  opacity: .35;
  pointer-events: none;
}

/* Recorte por foto: el encuadre va a lo que se lee (vehículo, muelle,
   carretera), no al cielo ni a la sombra. Las fotos nocturnas se aclaran y
   llevan menos veladura para que se vean la nave y el vehículo */
.p-heroe__foto img[src*="banco-urgente-1"] { object-position: 78% 72%; }
.p-heroe__foto img[src*="banco-internacional-3"] { object-position: center 88%; }
.p-heroe__foto img[src*="banco-internacional-8"] { object-position: center 70%; }
.p-heroe__foto img[src*="banco-internacional-4"],
.p-heroe__foto img[src*="banco-camion-5"] { object-position: center 70%; }
.p-heroe__foto img[src*="banco-internacional-1"],
.p-heroe__foto img[src*="internacional-1280"],
.p-heroe__foto img[src*="internacional-768"] { object-position: center 60%; }
.p-heroe__foto img[src*="banco-urgente-1"],
.p-heroe__foto img[src*="banco-internacional-8"] { filter: brightness(1.35) contrast(1.05); }
.p-heroe__foto .w-foto:has(img[src*="banco-urgente-1"])::after,
.p-heroe__foto .w-foto:has(img[src*="banco-internacional-8"])::after { opacity: .15; }

/* Contacto: panel a todo el ancho y, debajo, la ficha en franja compacta
   (filas a su alto natural, sin estirarse para igualar al panel); el
   teléfono va una vez en el panel y el botón es el coral relleno de todas
   las páginas. El cuerpo conserva su columna lateral para no dejar media
   página vacía junto a cada apartado */
body[class*="contacto"] .p-heroe {
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "ficha";
  grid-template-rows: auto;
  align-items: start;
}
body[class*="contacto"] .p-nivel,
body[class*="contacto"] .p-heroe__foto,
body[class*="contacto"] .p-heroe__llamar,
body[class*="contacto"] .p-heroe__ficha .w-datos__fila:has(a[href^="tel:"]),
body[class*="contacto"] .p-atencion,
body[class*="contacto"] .p-cierre__accion,
body[class*="contacto"] .p-mosaico:not(:has(> .w-cotizador)) { display: none; }
body[class*="contacto"] .p-cierre { grid-template-columns: minmax(0, 1fr); }
body[class*="contacto"] .p-doc .w-seccion p,
body[class*="contacto"] .p-doc .w-seccion ul,
body[class*="contacto"] .p-doc .w-seccion ol { max-width: none; }
/* Sin la tesela de atención, el cotizador va solo y centrado: sin columna vacía */
body[class*="contacto"] .p-mosaico:has(> .w-cotizador) { grid-template-columns: minmax(0, 1fr); }
.p-heroe__foto .w-foto {
  position: absolute;
  inset: 0;
}
.p-heroe__foto .w-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
}
/* En el héroe la foto va sin pie: el titular y la ficha ya dicen de qué va la
   página, y un pie que describe la imagen solo repite el texto alternativo */
.p-heroe__foto .w-foto figcaption { display: none; }

/* Pies de foto en el cuerpo: una sola línea, sin cortes contra el borde */
.p-doc .w-foto figcaption {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-heroe__texto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radio);
  padding: clamp(1.5rem, 4vw, 3.5rem);
  background: var(--h-fondo);
  color: var(--h-texto);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1.5rem;
}
.p-heroe__texto > .w-migas { margin-bottom: 0; }
.p-heroe__titular { margin-top: 0; }
/* Titular de interiores: un cuerpo menor que el de la portada para que
   quede en 2-3 líneas en la columna del héroe */
.p-heroe__texto h1 { max-width: 22ch; font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.6rem); }
.p-heroe__texto .w-entradilla { max-width: 60ch; }
/* La entradilla manda con su primer párrafo; el segundo, a cuerpo de texto */
.p-heroe__texto .w-entradilla p + p { margin-top: -.25em; font-size: 1rem; line-height: 1.55; color: var(--h-suave); }

/* Acción principal dentro del héroe, como en la portada */
.p-heroe__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}
.p-heroe__accion .boton:hover { background: var(--h-texto); border-color: var(--h-texto); color: var(--h-fondo); }
.p-heroe__accion-nota { margin: 0; font-size: .925rem; line-height: 1.4; color: var(--h-suave); max-width: 30ch; }

/* Indicador de nivel (país, Land, región, ciudad) al pie del panel */
.p-nivel {
  margin-top: auto;
  padding-top: .75rem;
  display: grid;
  gap: .6rem;
  max-width: 30rem;
}
.p-nivel__rotulo {
  margin: 0;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--h-suave);
}
.p-nivel__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
}
.p-nivel__n {
  position: relative;
  padding-top: .65rem;
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--h-suave);
  min-width: 0;
  white-space: nowrap;
}
.p-nivel__n::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--h-linea);
}
/* Nivel actual en coral; los ya recorridos, con el color de paso del panel */
.p-nivel__n--pais { color: var(--h-texto); }
.p-nivel__n--pais::before { background: var(--coral); }
body[class*="region"] .p-nivel__n--pais::before,
body[class*="division"] .p-nivel__n--pais::before,
body[class*="provincia"] .p-nivel__n--pais::before,
body[class*="ciudad"] .p-nivel__n--pais::before,
body[class*="division"] .p-nivel__n--land::before,
body[class*="provincia"] .p-nivel__n--land::before,
body[class*="ciudad"] .p-nivel__n--land::before,
body[class*="ciudad"] .p-nivel__n--region::before { background: var(--h-paso); }
body[class*="region"] .p-nivel__n--pais,
body[class*="division"] .p-nivel__n--pais,
body[class*="provincia"] .p-nivel__n--pais,
body[class*="ciudad"] .p-nivel__n--pais { color: var(--h-suave); }
body[class*="region"] .p-nivel__n--land,
body[class*="division"] .p-nivel__n--region,
body[class*="provincia"] .p-nivel__n--region,
body[class*="ciudad"] .p-nivel__n--ciudad { color: var(--h-texto); }
body[class*="region"] .p-nivel__n--land::before,
body[class*="division"] .p-nivel__n--region::before,
body[class*="provincia"] .p-nivel__n--region::before,
body[class*="ciudad"] .p-nivel__n--ciudad::before { background: var(--coral); }

/* Pie de la ficha: llamada y horario, justo debajo de los datos */
.p-heroe__llamar {
  padding: .9rem 1rem;
  border-radius: var(--radio-s);
  background: var(--menta);
  display: grid;
  gap: .3rem;
}
.p-heroe__tel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--titulos);
  font-size: clamp(1.6rem, 1.35rem + .6vw, 1.9rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
}
.p-heroe__tel .ico { width: 1.4rem; height: 1.4rem; color: var(--coral-osc); }
.p-heroe__tel:hover { color: var(--verde-osc); }
.p-heroe__llamar p { margin: 0; font-size: .875rem; line-height: 1.4; color: var(--tinta-2); }

/* Ficha: blanca (oscura en región); el filete superior lleva el color del
   nivel. Las filas nunca se estiran: si la celda es más alta, la llamada
   baja al pie y el sobrante queda entre datos y llamada */
.p-heroe__ficha > .w-datos { flex: none; }
.p-heroe__ficha > .p-heroe__llamar { margin-top: auto; }
.p-heroe__ficha {
  --d-texto: var(--tinta);
  --d-suave: var(--tinta-2);
  --d-filete: var(--filete);
  border-radius: var(--radio);
  border-top: 6px solid var(--nivel-color, var(--tinta));
  padding: clamp(1.1rem, 2.4vw, 1.75rem) clamp(1.25rem, 2.6vw, 2rem);
  background: var(--blanco);
  color: var(--d-texto);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 1rem;
}
.p-heroe__rotulo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--d-texto);
}
.p-heroe__rotulo .ico { width: 1.9rem; height: 1.9rem; color: var(--nivel-ico, var(--coral-osc)); }

/* Color del panel por nivel (la composición la fija la retícula de arriba):
   · Tinta con trama: servicio y contacto
   · Verde primario: Land
   · Blanco con filete coral: distrito y ciudad */
.p-heroe__texto {
  --h-fondo: var(--tinta);
  --h-texto: var(--sobre-tinta);
  --h-suave: var(--sobre-tinta-2);
  --h-enlace: var(--sobre-tinta);
  --h-acento: var(--coral);
  --h-trama: rgba(255, 255, 255, .06);
  --h-linea: var(--filete-osc);
  --h-paso: var(--verde);
  background-image: repeating-linear-gradient(135deg, var(--h-trama) 0 1px, transparent 1px 16px);
}
.p-heroe { --nivel-color: var(--tinta); --nivel-ico: var(--coral-osc); }

body[class*="division"] .p-heroe__texto,
body[class*="provincia"] .p-heroe__texto,
body[class*="ciudad"] .p-heroe__texto {
  --h-fondo: var(--blanco);
  --h-texto: var(--tinta);
  --h-suave: var(--tinta-2);
  --h-enlace: var(--verde-osc);
  --h-acento: var(--verde-osc);
  --h-trama: rgba(16, 42, 36, .045);
  --h-linea: var(--filete);
  --h-paso: var(--verde);
  border: 1px solid var(--filete);
  border-top: 6px solid var(--coral);
}
body[class*="division"] .p-heroe,
body[class*="provincia"] .p-heroe,
body[class*="ciudad"] .p-heroe { --nivel-color: var(--verde); --nivel-ico: var(--verde-osc); }

/* Región: la ficha es la tesela oscura del mosaico (tinta, filete coral) */
body[class*="division"] .p-heroe__ficha,
body[class*="provincia"] .p-heroe__ficha {
  --d-texto: var(--sobre-tinta);
  --d-suave: var(--sobre-tinta-2);
  --d-filete: var(--filete-osc);
  --nivel-color: var(--coral);
  --nivel-ico: var(--coral);
  background: var(--tinta);
}
body[class*="division"] .p-heroe__llamar,
body[class*="provincia"] .p-heroe__llamar { background: var(--tinta-3); }
body[class*="division"] .p-heroe__tel,
body[class*="provincia"] .p-heroe__tel { color: var(--sobre-tinta); }
body[class*="division"] .p-heroe__tel .ico,
body[class*="provincia"] .p-heroe__tel .ico { color: var(--coral); }
body[class*="division"] .p-heroe__tel:hover,
body[class*="provincia"] .p-heroe__tel:hover { color: var(--blanco); }
body[class*="division"] .p-heroe__llamar p,
body[class*="provincia"] .p-heroe__llamar p { color: var(--sobre-tinta-2); }
body[class*="division"] .p-heroe__ficha .w-datos a,
body[class*="provincia"] .p-heroe__ficha .w-datos a { color: var(--sobre-tinta); }

/* Ciudad: panel compacto, menos aire vertical */
body[class*="ciudad"] .p-heroe__texto { padding: clamp(1.25rem, 3vw, 2.5rem); gap: 1.1rem; }

/* Land: #0E7C66 con texto #FFFFFF (5,1:1) y secundarios en menta (4,8:1) */
body[class*="region"] .p-heroe__texto {
  --h-fondo: var(--verde);
  --h-texto: var(--blanco);
  --h-suave: var(--menta);
  --h-enlace: var(--blanco);
  --h-acento: var(--menta);
  --h-trama: rgba(255, 255, 255, .07);
  --h-linea: rgba(255, 255, 255, .28);
  --h-paso: var(--menta);
}
body[class*="region"] .p-heroe { --nivel-color: var(--coral); --nivel-ico: var(--coral-osc); }

/* Land: sus regiones suben junto al héroe como bloque propio del mosaico */
body[class*="region"] .p > .w-hijas {
  margin-top: var(--hueco);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radio);
  background: var(--tinta);
  color: var(--sobre-tinta);
}
body[class*="region"] .p > .w-hijas .w-hijas__titulo { color: var(--sobre-tinta); }
body[class*="region"] .p > .w-hijas .w-hijas__titulo::after { background: var(--filete-osc); }
body[class*="region"] .p > .w-hijas .w-tarjeta { border-color: var(--tinta); }

/* Mosaico bajo el héroe: cotizador (o tesela de CTA) + tesela de atención */
.p-mosaico {
  margin-top: var(--hueco);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hueco);
}

/* Páginas sin cotizador: el botón de la fábrica y la tesela de atención forman
   una sola tarjeta; el botón ocupa su columna, sin tesela vacía alrededor */
.p-mosaico:not(:has(> .w-cotizador)) {
  gap: 0;
  border-radius: var(--radio);
  border: 1px solid var(--filete);
  background: var(--blanco);
  overflow: hidden;
}
.p-mosaico:not(:has(> .w-cotizador)) > .p-atencion { border: 0; border-radius: 0; }
/* El botón nunca va solo: lo acompaña una nota fija con lo que se obtiene */
.p-mosaico__nota { display: none; }
.p-mosaico:not(:has(> .w-cotizador)) > .p-mosaico__nota {
  display: block;
  order: 1;
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem) 0;
  background: var(--verde-claro);
  border-top: 1px solid var(--filete);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  max-width: none;
}
.p-mosaico__nota strong { color: var(--verde-osc); }
.p-mosaico > .w-cta-linea {
  order: 2;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  padding: 1rem clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.25rem);
  background: var(--verde-claro);
}
.p-mosaico > .w-cta-linea::before {
  content: "";
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  background: var(--verde-osc);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2.5 8.5h16v13h-16zM18.5 12.5h5.5l4.5 5v4h-10z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='23.5' r='2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Ccircle cx='23.5' cy='23.5' r='2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M2.5 8.5h16v13h-16zM18.5 12.5h5.5l4.5 5v4h-10z' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'/%3E%3Ccircle cx='8' cy='23.5' r='2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3Ccircle cx='23.5' cy='23.5' r='2.5' fill='none' stroke='black' stroke-width='1.6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .5s var(--curva);
}
.p-mosaico > .w-cta-linea:hover::before { transform: translateX(10px); }
.p-mosaico > .w-cta-linea .w-cta { font-size: 1.05rem; padding: .95rem 1.4rem; }
.p-mosaico > .w-cta-linea .w-cta:hover { background: var(--tinta); border-color: var(--tinta); }

/* Tesela de atención (rótulos fijos, válidos en todas las páginas) */
.p-atencion {
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--blanco);
  border: 1px solid var(--filete);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
}
.p-atencion__rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-osc);
}
.p-atencion__rotulo::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px var(--coral-papel);
}
.p-atencion__tel {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--titulos);
  font-size: clamp(2rem, 1.6rem + 1.2vw, 2.6rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--tinta);
  text-decoration: none;
}
.p-atencion__tel .ico { width: 1.8rem; height: 1.8rem; color: var(--coral-osc); }
.p-atencion__tel:hover { color: var(--verde-osc); }
.p-atencion__datos {
  margin: auto 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 3px solid var(--tinta);
}
.p-atencion__datos div {
  padding: .75rem .9rem .75rem 0;
  border-bottom: 1px solid var(--filete);
}
.p-atencion__datos div:nth-child(even) { padding-left: .9rem; border-left: 1px solid var(--filete); }
.p-atencion__datos dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral-osc);
}
.p-atencion__datos dd { margin: .2rem 0 0; font-size: .925rem; line-height: 1.4; color: var(--tinta); }

/* Cuerpo: documento + aside fijo */
.p-cuerpo {
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.p-doc { counter-reset: seccion; min-width: 0; }
.p-doc > .w-seccion:nth-of-type(3n+2) {
  background: var(--blanco);
  border-top: 0;
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  margin-block: 1rem;
}
.p-doc > .w-seccion:nth-of-type(3n+2) + .w-seccion { border-top: 0; }
.p-doc > .w-faq {
  margin-top: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radio);
  background: var(--verde-claro);
}
.p-doc > .w-faq .w-faq__item { border-color: #A9D6C4; }
.p-doc > .w-faq .w-faq__item > summary::after { background-color: var(--blanco); }
.p-doc > .w-foto { margin-block: 1.5rem; }

.p-aside {
  position: sticky;
  top: 6rem;
  display: grid;
  gap: var(--hueco);
}
.p-aside__bloque {
  border-radius: var(--radio);
  padding: 1.5rem;
  background: var(--tinta);
  color: var(--sobre-tinta);
}
.p-aside__titulo {
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.25;
  margin-bottom: .6rem;
}
.p-aside__texto { font-size: .95rem; line-height: 1.5; color: var(--sobre-tinta-2); margin-bottom: 1.1rem; }
.p-aside .boton { width: 100%; justify-content: center; }
.p-aside__tel {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--titulos);
  font-size: 1.75rem;
  letter-spacing: .03em;
  color: var(--tinta);
  text-decoration: none;
  line-height: 1;
}
.p-aside__tel .ico { width: 1.6rem; height: 1.6rem; color: var(--coral-osc); }
.p-aside__tel:hover { color: var(--verde-osc); }

/* Bloque final */
.p-cierre {
  margin-top: clamp(1.5rem, 4vw, 3rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: var(--hueco);
}
.p-cierre__texto {
  border-radius: var(--radio);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--tinta);
  color: var(--sobre-tinta);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
}
.p-cierre__texto::before {
  content: "";
  width: 3rem;
  height: 4px;
  border-radius: 2px;
  background: var(--coral);
}
.p-cierre__texto .w-cierre p { color: var(--sobre-tinta); }
.p-cierre__texto .w-cierre a { color: var(--sobre-tinta); }
.p-cierre__accion {
  border-radius: var(--radio);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--coral-papel);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 1rem;
}
.p-cierre__rotulo {
  margin: 0;
  font-family: var(--titulos);
  font-size: clamp(1.8rem, 1.4rem + 1vw, 2.4rem);
  line-height: 1;
  color: var(--coral-osc);
}
.p-cierre__accion .p-aside__tel { font-size: 1.5rem; }

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

/* Misma rejilla de 1240 px que el resto; la tesela blanca mide lo que el
   formulario (820 px + relleno) y, en escritorio, la acompaña una columna
   lateral con lo que hay que saber */
.c { padding-top: clamp(1rem, 2.5vw, 1.75rem); }
.c__rejilla { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--hueco); }
.c__rejilla > .c__marco { width: 100%; max-width: 56.25rem; margin-inline: auto; }
.c__cabeza {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  padding: 1rem clamp(1.25rem, 3vw, 2rem);
  margin-bottom: var(--hueco);
  border-radius: var(--radio);
  background: var(--blanco);
  border: 1px solid var(--filete);
}
.c__marco {
  border-radius: var(--radio);
  padding: clamp(.75rem, 3vw, 2.5rem);
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-top: 6px solid var(--verde);
}
.c__marco > .c__cuerpo { max-width: 51.25rem; margin-inline: auto; }
.c__cabeza .w-migas { margin: 0; }
.c__marca {
  margin: 0;
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--verde-osc);
}
.c__marca::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--coral);
}
.c__cuerpo { min-height: 32rem; }
.c__ayuda {
  display: grid;
  align-content: start;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--hueco);
}
.c__tesela {
  border-radius: var(--radio);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  background: var(--blanco);
  border: 1px solid var(--filete);
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.c__tesela .ico { width: 2.25rem; height: 2.25rem; color: var(--verde); margin-bottom: .25rem; }
.c__tesela--tinta { background: var(--tinta); border-color: var(--tinta); color: var(--sobre-tinta); }
.c__tesela--claro { background: var(--verde-claro); border-color: var(--verde-claro); }
.c__tesela--claro .ico { color: var(--verde-osc); }
.c__rotulo {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.25;
}
.c__texto { margin: 0; font-size: .95rem; line-height: 1.5; color: var(--tinta-2); }
.c__tesela--tinta .c__texto { color: var(--sobre-tinta-2); }
.c__tel {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--titulos);
  font-size: clamp(1.9rem, 1.5rem + 1vw, 2.4rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--sobre-tinta);
  text-decoration: none;
}
.c__tel .ico { width: 1.6rem; height: 1.6rem; margin: 0; color: var(--coral); }
.c__tel:hover { color: var(--blanco); }

/* ==========================================================================
   Portada (index.html)
   ========================================================================== */

.i-rotulo {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--verde-osc);
}
.i-rotulo__n {
  font-family: var(--titulos);
  font-size: 1.05rem;
  letter-spacing: .06em;
  padding: .2rem .45rem .05rem;
  border-radius: .35rem;
  background: var(--coral-papel);
  color: var(--coral-osc);
}
.i-rotulo--claro { color: var(--sobre-tinta-2); }
.i-rotulo--claro .i-rotulo__n { background: var(--coral); color: var(--tinta); }

/* Un solo sistema: mismo hueco entre filas del mosaico, mismo radio y mismo
   alto mínimo de celda de foto en toda la portada */
.i-bloque { margin-top: var(--bloque); }
.i-bloque__cabeza { max-width: 44rem; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.i-bloque__cabeza h2 { margin-bottom: 1rem; }
.i-bloque__cabeza p { font-size: 1.1rem; color: var(--tinta-2); max-width: 60ch; }

.i-tesela {
  position: relative;
  border-radius: var(--radio);
  padding: clamp(1.4rem, 3vw, 2.25rem);
  background: var(--blanco);
  min-width: 0;
}
.i-tesela--tinta { background: var(--tinta); color: var(--sobre-tinta); }
.i-tesela--verde { background: var(--verde); color: var(--blanco); }
.i-tesela--claro { background: var(--verde-claro); color: var(--tinta); }
.i-tesela--papel { background: var(--coral-papel); color: var(--tinta); }
figure.i-tesela { margin: 0; }
.i-tesela--foto { padding: 0; overflow: hidden; background: var(--tinta); }
.i-tesela--foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Héroe */
.i-heroe {
  padding-top: clamp(1rem, 2.5vw, 1.75rem);
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hueco);
}
.i-heroe__texto {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.5rem, 4.5vw, 4rem);
  min-height: clamp(26rem, 44vw, 36rem);
}
.i-heroe__texto h1 { max-width: 16ch; margin-top: .25rem; }
.i-heroe__texto .w-entradilla { margin-top: 1.25rem; }
.i-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.i-coord {
  display: flex;
  align-items: center;
  gap: .9rem;
  margin: 0;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--tinta-2);
  font-variant-numeric: tabular-nums;
}
.i-coord__linea {
  flex: 1;
  max-width: 9rem;
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--verde) 0 6px, transparent 6px 11px);
  position: relative;
}
.i-coord__linea::after {
  content: "";
  position: absolute;
  right: -2px;
  top: 50%;
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--coral);
}
.i-heroe__foto { min-height: 20rem; }
.i-chip {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  max-width: max-content;
  padding: .75rem 1rem;
  border-radius: var(--radio-s);
  background: var(--tinta);
  color: var(--sobre-tinta);
  font-size: .9rem;
  line-height: 1.35;
}
.i-chip .ico { width: 1.6rem; height: 1.6rem; color: var(--coral); }
.i-chip strong { display: block; font-weight: 600; color: var(--blanco); }

/* Cotizador + cifras en la misma fila (mismo alto) y pasos debajo a todo el
   ancho: las dos columnas del mosaico terminan alineadas */
.i-cotfila {
  margin-top: var(--hueco);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--hueco);
}
.i-pasos-tesela {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.i-pasos-tesela h2 { font-size: clamp(2rem, 1.4rem + 1.8vw, 2.75rem); margin-bottom: 1rem; }
.i-pasos-tesela__intro p { color: var(--tinta-2); font-size: 1rem; max-width: 60ch; }
.i-pasos {
  list-style: none;
  counter-reset: paso;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0 clamp(1rem, 2.5vw, 2rem);
}
.i-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: .1rem 1rem;
  padding: .9rem 0;
  border-top: 1px solid var(--filete);
  line-height: 1.45;
}
.i-pasos li::before {
  content: counter(paso, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--titulos);
  font-size: 2rem;
  line-height: 1;
  color: var(--coral-osc);
}
.i-pasos strong { font-weight: 600; }
.i-pasos span { font-size: .925rem; color: var(--tinta-2); }

/* Columna lateral del cotizador: cifras con su alto natural y, debajo, una
   foto que rellena hasta el pie del cotizador (mismo arranque, mismo final) */
.i-cotlado {
  display: flex;
  flex-direction: column;
  gap: var(--hueco);
  min-width: 0;
}
.i-cotlado__foto { flex: 1 1 auto; min-height: 9rem; }
.i-cotlado__foto img { object-position: center 60%; }

.i-cifras {
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  display: flex;
  flex-direction: column;
}
.i-cifras .i-rotulo { margin-bottom: 1.1rem; align-self: flex-start; }
.i-cifras__rejilla {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--filete-osc);
  border-radius: var(--radio-s);
  overflow: hidden;
}
.i-cifras__celda {
  background: var(--tinta);
  padding: .9rem .9rem 1rem;
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .35rem;
}
.i-cifras__celda dd {
  margin: 0;
  font-family: var(--titulos);
  font-size: clamp(2.2rem, 1.8rem + 1.4vw, 3rem);
  line-height: .9;
  color: var(--coral);
  font-variant-numeric: tabular-nums;
}
.i-cifras__celda dd small { font-size: .55em; color: var(--sobre-tinta); margin-left: .15em; }
/* Etiquetas a 14 px, en menta casi blanca (14:1 sobre tinta) */
.i-cifras__celda dt { font-size: .875rem; font-weight: 500; line-height: 1.35; color: var(--sobre-tinta); }

/* Modalidades */
.i-modos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
}
.i-modos__intro { grid-column: 1 / 6; align-self: end; padding: clamp(.5rem, 2vw, 1.5rem) clamp(0rem, 2vw, 1.5rem) clamp(.5rem, 2vw, 1.5rem) 0; }
.i-modos__intro h2 { margin-bottom: 1rem; }
.i-modos__intro p { color: var(--tinta-2); font-size: 1.05rem; }
.i-modo--paq { grid-column: 6 / 13; }
.i-modo--palet { grid-column: 1 / 5; }
.i-modo--camion { grid-column: 5 / 8; }
.i-modos__foto { grid-column: 8 / 13; grid-row: 2 / 4; min-height: var(--celda); }
.i-modos__tabla { grid-column: 1 / 8; }

.i-modo {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  transition: transform .3s var(--curva), box-shadow .3s var(--curva);
}
.i-modo:hover { transform: translateY(-3px); box-shadow: var(--sombra); }
.i-modo__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .5rem;
}
.i-modo__n {
  font-family: var(--titulos);
  font-size: 1.1rem;
  letter-spacing: .08em;
  color: var(--coral-osc);
}
.i-modo .ico { width: 2.75rem; height: 2.75rem; color: var(--verde); }
.i-modo h3 { font-size: clamp(1.9rem, 1.5rem + 1.2vw, 2.5rem); }
.i-modo p { font-size: .975rem; line-height: 1.55; margin: 0; }
.i-modo .enlace-flecha { margin-top: auto; align-self: flex-start; }
.i-modo--paq p { color: var(--tinta-2); max-width: 52ch; }
.i-modo--paq .enlace-flecha { color: var(--verde-osc); }
.i-modo--palet .i-modo__n,
.i-modo--palet .ico,
.i-modo--palet .enlace-flecha { color: var(--blanco); }
.i-modo--camion .i-modo__n { color: var(--coral); }
.i-modo--camion .ico { color: var(--coral); }
.i-modo--camion p { color: var(--sobre-tinta-2); }
.i-modo--camion .enlace-flecha { color: var(--sobre-tinta); }

.i-modos__tabla h3 { margin-bottom: .25rem; }
.i-modos__tabla .w-tabla { margin: 1rem 0; }
.i-modos__tabla .i-nota { font-size: .9rem; color: var(--tinta-2); margin: 0; }

/* Ruta: foto + texto */
.i-ruta {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--hueco);
}
.i-ruta__foto { min-height: var(--celda); }
.i-ruta__texto { padding: clamp(1.5rem, 4vw, 3.25rem); }
.i-ruta__texto h2 { margin-bottom: 1.25rem; max-width: 18ch; }
.i-ruta__texto p { max-width: 62ch; }
.i-ruta__texto .w-datos { margin-top: 1.75rem; }
.i-ruta__texto .w-datos__fila { grid-template-columns: minmax(6.5rem, 1fr) minmax(0, 2.4fr); }

/* Fila foto + cita: dos celdas del mosaico, como el resto */
.i-banda {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hueco);
}
.i-banda__foto { min-height: var(--celda); }
.i-banda__foto img { object-position: center 60%; }
.i-banda__cita {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 16px);
}
.i-banda__cita blockquote {
  margin: 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--coral);
}
.i-banda__cita p:first-child {
  font-family: var(--titulos);
  font-size: clamp(2.2rem, 1.5rem + 2.2vw, 3.4rem);
  line-height: .92;
  text-wrap: balance;
  hyphens: none;
  margin-bottom: .6rem;
}
.i-banda__cita p + p { font-size: .95rem; color: var(--sobre-tinta-2); }

/* Destinos: índice geográfico por zonas */
.i-destinos__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.i-destinos__cabeza h2 { margin-bottom: 1rem; }
.i-destinos__cabeza p { color: var(--tinta-2); font-size: 1.05rem; max-width: 60ch; }
.i-destinos__resumen {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 3px solid var(--tinta);
}
.i-destinos__resumen div { padding: .9rem .25rem 0; }
.i-destinos__resumen div + div { border-left: 1px solid var(--filete); padding-left: 1rem; }
.i-destinos__resumen dd {
  margin: 0;
  font-family: var(--titulos);
  font-size: clamp(2.4rem, 2rem + 1.5vw, 3.25rem);
  line-height: .9;
  color: var(--verde);
}
.i-destinos__resumen dt { font-size: .82rem; color: var(--tinta-2); line-height: 1.3; margin-top: .3rem; }
.i-destinos__resumen div { display: flex; flex-direction: column-reverse; justify-content: flex-end; }

/* Índice de Länder: cuatro zonas en rejilla de 2 × 2. Cada Land ocupa una
   fila: a la izquierda su nombre y su capital; a la derecha, sus regiones o
   ciudades en una lista a cuerpo de lectura (dos columnas). En Sur y Oeste,
   con menos filas, una foto rellena la zona hasta igualar la vecina */
.i-zonas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hueco);
  align-items: stretch;
}
.i-zona {
  --z-fondo: var(--tinta);
  --z-texto: var(--sobre-tinta);
  --z-suave: var(--sobre-tinta-2);
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
}
.i-zona--sur { --z-fondo: var(--verde); --z-texto: var(--blanco); --z-suave: #EAF7F1; }
.i-zona--norte { --z-fondo: var(--tinta-3); }
.i-zona--este { --z-fondo: var(--coral); --z-texto: var(--tinta); --z-suave: var(--tinta); }
.i-zona__cabeza {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem .9rem;
  border-radius: var(--radio-s);
  background: var(--z-fondo);
  color: var(--z-texto);
  font-family: var(--texto);
  font-size: inherit;
  line-height: 1;
}
.i-zona__boton {
  all: unset;
  box-sizing: border-box;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}
.i-zona__boton::after {
  content: "";
  width: .55rem;
  height: .55rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform .2s var(--curva);
}
.i-zona__boton[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.i-zona__boton:focus-visible { outline: 3px solid var(--tinta); outline-offset: 4px; border-radius: 4px; }
.i-zona__nombre {
  font-family: var(--titulos);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  letter-spacing: .04em;
  line-height: 1;
}
.i-zona__cuenta { font-size: .8rem; font-weight: 600; color: var(--z-suave); letter-spacing: .06em; text-transform: uppercase; margin-left: auto; }

.i-lands {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.i-zona:not(:has(.i-zona__foto)) .i-lands { flex: 1 0 auto; }
.i-zona:not(:has(.i-zona__foto)) .i-land:last-child { flex-grow: 1; }
.i-land {
  position: relative;
  display: grid;
  grid-template-columns: minmax(10rem, 15rem) minmax(0, 1fr);
  gap: .5rem clamp(1rem, 2.5vw, 2rem);
  align-items: start;
  padding: .95rem 1.1rem 1rem;
  border-radius: var(--radio-s);
  background: var(--blanco);
  border: 1px solid var(--filete);
  border-left: 4px solid var(--z-fondo);
  transition: border-color .2s, box-shadow .25s var(--curva);
}
.i-land:hover { border-color: var(--verde); border-left-color: var(--z-fondo); box-shadow: var(--sombra); }
.i-land__nombre {
  display: inline-flex;
  align-items: baseline;
  gap: .45rem;
  font-size: 1.075rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  text-decoration: none;
  text-wrap: balance;
  hyphens: none;
}
.i-land__nombre::after {
  content: "→";
  color: var(--verde);
  transition: transform .2s var(--curva);
}
.i-land__nombre:hover { color: var(--verde-osc); }
.i-land__nombre:hover::after { transform: translateX(3px); }
.i-land__cabeza { display: grid; gap: .2rem; min-width: 0; }
.i-land__nota { font-size: .9rem; line-height: 1.4; color: var(--tinta-2); margin: 0; }
/* Regiones y ciudades: lista en dos columnas, una por línea, a 16 px */
.i-land__hijas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  min-width: 0;
}
.i-land__hijas li { border-top: 1px solid var(--menta-2); min-width: 0; }
.i-land__hijas li:nth-child(-n+2) { border-top: 0; }
.i-land__hijas a {
  display: flex;
  align-items: baseline;
  gap: .45rem;
  padding: .3rem 0;
  font-size: 1rem;
  line-height: 1.35;
  color: var(--verde-osc);
  font-weight: 500;
  text-decoration: none;
  transition: color .15s, transform .2s var(--curva);
}
.i-land__hijas a::before {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  border-radius: 50%;
  background: var(--coral);
  transform: translateY(-.1em);
}
.i-land__hijas a:hover { color: var(--tinta); transform: translateX(2px); }
.i-zona__foto {
  position: relative;
  flex: 1 1 auto;
  min-height: 8rem;
  margin: 0;
  border-radius: var(--radio-s);
  overflow: hidden;
  background: var(--verde);
}
.i-zona__foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Foto a color con veladura suave del color de la zona */
.i-zona__foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--z-fondo);
  mix-blend-mode: multiply;
  opacity: .3;
  pointer-events: none;
}
.i-zona--oeste .i-zona__foto img { object-position: center 80%; }

/* Móvil: cada zona se pliega (lo activa web.js; sin JS todo queda abierto) */
.i-zona.is-plegada .i-lands { display: none; }

/* Lo que no viaja */
/* Tres teselas del mosaico, mismo alto: titular en tinta, la línea de
   mercancía en blanco y el seguro en verde claro */
.i-no {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 4fr);
  gap: var(--hueco);
  align-items: stretch;
}
.i-no > .i-tesela { min-height: clamp(15rem, 20vw, 18rem); }
.i-no__cabeza {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 16px);
}
.i-no__cabeza h2 { font-size: clamp(2.2rem, 1.5rem + 1.8vw, 3.1rem); }
.i-no__cabeza .i-no__marca { margin-bottom: 0; }
.i-no__tesela {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  border-top: 6px solid var(--coral);
}
.i-no__tesela .enlace-flecha { color: var(--verde-osc); }
.i-no__linea {
  font-size: clamp(1.2rem, 1rem + .7vw, 1.55rem);
  line-height: 1.45;
  font-weight: 500;
  max-width: 34ch;
  margin: 0;
}
.i-no__marca {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  background: var(--coral-papel);
  color: var(--coral-osc);
  margin-bottom: 1.25rem;
}
.i-no__marca .ico { width: 1.9rem; height: 1.9rem; }
/* Tesela blanca como las demás; el acento coral, en el icono y la cifra */
.i-no__tesela { color: var(--tinta); }
.i-seguro { display: flex; flex-direction: column; gap: .8rem; justify-content: space-between; }
.i-seguro .ico { margin-bottom: auto; }
.i-seguro .ico { width: 2.75rem; height: 2.75rem; color: var(--verde-osc); }
.i-seguro h3 { color: var(--verde-osc); }
.i-seguro p { color: var(--tinta); font-size: 1rem; }

/* Preguntas + aside */
.i-dudas {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: var(--hueco);
  align-items: start;
}
.i-dudas .w-faq { padding: clamp(1.4rem, 3.5vw, 2.75rem); background: var(--blanco); border-radius: var(--radio); }
.i-dudas .w-faq > h2 { margin-bottom: 1.5rem; }
.i-dudas__aside { position: sticky; top: 6rem; display: grid; gap: 1rem; }
.i-dudas__aside .ico { width: 2.5rem; height: 2.5rem; color: var(--coral); }
.i-dudas__aside h3 { margin: 1rem 0 .5rem; }
.i-dudas__aside p { color: var(--sobre-tinta-2); font-size: .95rem; }
.i-tel {
  display: inline-block;
  margin: .5rem 0 1rem;
  font-family: var(--titulos);
  font-size: clamp(2rem, 1.6rem + 1vw, 2.5rem);
  letter-spacing: .03em;
  line-height: 1;
  color: var(--sobre-tinta);
  text-decoration: none;
  border-bottom: 2px solid var(--coral);
}
.i-tel:hover { color: var(--blanco); }
.i-guias { list-style: none; margin: 0; padding: 0; }
.i-guias li + li { border-top: 1px solid var(--filete-osc); }
.i-guias a {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .75rem 0;
  color: var(--sobre-tinta);
  text-decoration: none;
  font-weight: 500;
}
.i-guias a::after { content: "→"; color: var(--coral); transition: transform .2s var(--curva); }
.i-guias a:hover { color: var(--blanco); }
.i-guias a:hover::after { transform: translateX(4px); }

/* Cierre de portada */
.i-cierre {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2rem, 5vw, 4rem);
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .06) 0 1px, transparent 1px 16px);
}
.i-cierre h2 { margin-bottom: 1rem; }
.i-cierre p { font-size: 1.1rem; color: var(--blanco); max-width: 46ch; }
.i-cierre__acciones { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; }
.i-cierre__tel { color: var(--blanco); font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; }
.i-cierre__tel:hover { color: var(--blanco); border-bottom-width: 2px; }

/* ==========================================================================
   Movimiento reducido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ==========================================================================
   Ajustes responsive (siempre al final)
   ========================================================================== */

@media (min-width: 48em) {
  .i-cifras__rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .i-pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 68.76em) {
  .i-pasos-tesela { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .i-pasos { margin-top: 0; }
}

@media (min-width: 68.76em) {
  .i-cotfila { grid-template-columns: minmax(0, 52rem) minmax(16rem, 1fr); }
  .i-cotfila > .i-pasos-tesela { grid-column: 1 / -1; }
  .i-cifras__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-cifras__celda { padding: 1.25rem 1.1rem; }
}

@media (min-width: 75em) {
  .c__rejilla { grid-template-columns: minmax(0, 56.25rem) minmax(15rem, 1fr); align-items: start; }
  .c__rejilla > .c__marco { max-width: none; }
  .c__ayuda { grid-template-columns: minmax(0, 1fr); }
  .c__ayuda .c__tesela--tinta { grid-column: auto; }
}

@media (min-width: 80em) {
  .p-mosaico:has(> .w-cotizador) { grid-template-columns: minmax(0, 52rem) minmax(0, 1fr); }
  .p-mosaico:has(> .w-cotizador) .p-atencion { justify-content: space-between; }
  .p-mosaico:has(> .w-cotizador) .p-atencion__datos { grid-template-columns: minmax(0, 1fr); margin-top: 0; }
  .p-mosaico:has(> .w-cotizador) .p-atencion__datos div:nth-child(even) { padding-left: 0; border-left: 0; }
}

@media (min-width: 48em) {
  .p-mosaico:not(:has(> .w-cotizador)) { grid-template-columns: minmax(0, 1fr) auto; }
  .p-mosaico:not(:has(> .w-cotizador)) > .p-atencion { grid-column: 1 / -1; }
  .p-mosaico:not(:has(> .w-cotizador)) > .p-mosaico__nota {
    grid-column: 1;
    padding-bottom: clamp(1.25rem, 3vw, 2.25rem);
  }
  .p-mosaico:not(:has(> .w-cotizador)) > .w-cta-linea {
    grid-column: 2;
    flex-wrap: nowrap;
    justify-content: flex-end;
    padding-top: clamp(1.25rem, 3vw, 2.25rem);
    padding-left: 0;
    border-top: 1px solid var(--filete);
  }
}

@media (min-width: 48em) and (max-width: 79.99em) {
  .p-mosaico:has(> .w-cotizador) .p-atencion { width: 100%; max-width: 52rem; margin-inline: auto; }
  .p-mosaico:has(> .w-cotizador) .p-atencion { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); align-items: center; column-gap: 2rem; }
  .p-mosaico:has(> .w-cotizador) .p-atencion__rotulo { grid-column: 1; }
  .p-mosaico:has(> .w-cotizador) .p-atencion__tel { grid-column: 1; }
  .p-mosaico:has(> .w-cotizador) .p-atencion__datos { grid-column: 2; grid-row: 1 / 3; margin: 0; }
}

@media (max-width: 80em) {
  .cab__boton {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    margin-left: auto;
    margin-right: -.6rem;
    min-height: 2.75rem;
    padding: .65rem .6rem .6rem;
    border: 0;
    border-radius: var(--radio-s);
    background: transparent;
    color: var(--tinta);
    font-family: var(--texto);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    transition: background-color .2s var(--curva);
  }
  .cab__boton:hover,
  .cab--abierta .cab__boton { background: var(--menta-2); }
  .cab__hamb,
  .cab__hamb::before,
  .cab__hamb::after {
    display: block;
    width: 1.35rem;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    transition: transform .25s var(--curva), background-color .2s;
  }
  .cab__hamb { position: relative; }
  .cab__hamb::before,
  .cab__hamb::after { content: ""; position: absolute; left: 0; }
  .cab__hamb::before { top: -6px; }
  .cab__hamb::after { top: 6px; }
  .cab--abierta .cab__hamb { background: transparent; }
  .cab--abierta .cab__hamb::before { transform: translateY(6px) rotate(45deg); }
  .cab--abierta .cab__hamb::after { transform: translateY(-6px) rotate(-45deg); }

  .cab__in { position: relative; flex-wrap: wrap; }
  html:not(.js) .cab__boton { display: none; }
  html:not(.js) .menu { width: 100%; margin: 0; padding-bottom: 1rem; }

  html.js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--m));
    right: calc(-1 * var(--m));
    padding: .5rem var(--m) 1.5rem;
    background: var(--menta);
    border-bottom: 1px solid var(--filete);
    box-shadow: 0 20px 30px -20px rgba(16, 42, 36, .3);
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
  }
  html.js .cab--abierta .menu { display: block; }

  .menu { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-bottom: 1px solid var(--filete); }
  .menu__enlace,
  .menu__sub > summary { font-size: 1.125rem; padding: 1rem 0; justify-content: space-between; }
  .menu__enlace::after { display: none; }
  .menu__sub[open] > summary { background: transparent; }
  .menu__desp {
    position: static;
    width: auto;
    padding: 0 0 .75rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
  .menu__desp a { padding-inline: 0; }
  .menu__desp a:hover { background: transparent; }
  .menu__cta { justify-content: center; margin-top: 1.25rem; font-size: 1.05rem; padding: 1rem; }
}

@media (max-width: 68.75em) {
  .i-heroe { grid-template-columns: minmax(0, 1fr); }
  .i-heroe__foto { min-height: 0; aspect-ratio: 16 / 9; }
  .i-heroe__texto { min-height: 0; }

  .i-modos__intro { grid-column: 1 / -1; padding: 0; }
  .i-modo--paq { grid-column: 1 / -1; }
  .i-modo--palet { grid-column: 1 / 7; }
  .i-modo--camion { grid-column: 7 / 13; }
  .i-modos__foto { grid-column: 1 / -1; grid-row: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .i-modos__tabla { grid-column: 1 / -1; }

  .i-ruta { grid-template-columns: minmax(0, 1fr); }
  .i-ruta__foto { min-height: 0; aspect-ratio: 16 / 9; }

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

  .i-no { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .i-no > .i-no__cabeza { grid-column: 1 / -1; min-height: 0; }

  .i-dudas { grid-template-columns: minmax(0, 1fr); }
  .i-dudas__aside { position: static; }

  /* Tableta: el panel a lo ancho y, debajo, ficha y foto lado a lado; la
     foto (que se estira) iguala la altura de la ficha (que no se estira).
     Land: panel y foto vertical arriba, franja de datos debajo.
     Ciudad: la misma columna de escritorio (foto, panel, franja) */
  .p-heroe,
  body[class*="division"] .p-heroe,
  body[class*="provincia"] .p-heroe {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "texto texto"
      "ficha foto";
    grid-template-rows: auto minmax(15rem, auto);
  }
  .p-heroe__ficha { align-self: start; }
  body[class*="region"] .p-heroe {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    grid-template-areas:
      "texto foto"
      "ficha ficha";
    grid-template-rows: auto auto;
  }
  .p-heroe:not(:has(.w-foto)),
  body[class*="region"] .p-heroe:not(:has(.w-foto)),
  body[class*="division"] .p-heroe:not(:has(.w-foto)),
  body[class*="provincia"] .p-heroe:not(:has(.w-foto)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "ficha"; grid-template-rows: auto; }
  .p-heroe:not(:has(.w-datos)),
  body[class*="region"] .p-heroe:not(:has(.w-datos)),
  body[class*="division"] .p-heroe:not(:has(.w-datos)),
  body[class*="provincia"] .p-heroe:not(:has(.w-datos)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "foto"; grid-template-rows: auto; }
  body[class*="contacto"] .p-heroe { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "ficha"; }
  .p-heroe__foto { min-height: 15rem; }
  body[class*="ciudad"] .p-heroe__foto { min-height: 0; }

  .i-cotlado__foto { display: none; }
  .i-zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Con la zona estrecha, el Land encabeza y sus páginas van debajo */
  .i-land { grid-template-columns: minmax(0, 1fr); }
  .p-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .p-aside { position: static; }
  .c__ayuda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .c__tesela--tinta { grid-column: 1 / -1; }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pie__rejilla > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 47.99em) {
  body { font-size: 1rem; }

  .i-modo--palet,
  .i-modo--camion { grid-column: 1 / -1; }
  .i-no { grid-template-columns: minmax(0, 1fr); }
  .i-no > .i-tesela { min-height: 0; }
  .i-cierre { grid-template-columns: minmax(0, 1fr); }
  .i-zonas { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .i-zona__foto { display: none; }
  .i-zona__cabeza { padding: .9rem 1.1rem; }
  .i-zona__nombre { font-size: 1.9rem; }
  .i-land { padding: .8rem 1rem .85rem; }
  .i-chip { font-size: .85rem; }

  .p-cierre { grid-template-columns: minmax(0, 1fr); }
  .p-heroe__texto h1 { max-width: none; }

  /* Móvil: héroe y mosaico se disuelven en la columna de la página para
     ordenar los módulos: titular, (foto de la ciudad), cotizador, ficha,
     (regiones del Land), contenido, foto, hijas, hermanas, atención y cierre */
  .p { gap: var(--hueco); }
  .p-heroe,
  .p-mosaico { display: contents; }
  .p-heroe__texto { order: 10; }
  body[class*="division"] .p-heroe__foto,
  body[class*="provincia"] .p-heroe__foto,
  body[class*="ciudad"] .p-heroe__foto { order: 20; }
  .p-mosaico > .w-cotizador,
  .p-mosaico > .p-mosaico__nota { order: 30; }
  .p-mosaico > .w-cta-linea { order: 31; }
  .p-heroe__ficha { order: 40; }
  body[class*="region"] .p > .w-hijas { order: 45; margin-top: 0; }
  .p-cuerpo { order: 50; margin-top: 1rem; }
  .p-heroe__foto { order: 55; min-height: 0; aspect-ratio: 16 / 9; }
  .p > .w-hijas { order: 60; }
  .p > .w-hermanas { order: 70; margin-block: 0; }
  .p-mosaico > .p-atencion { order: 80; }
  .p-cierre { order: 90; margin-top: 0; }
  body[class*="division"] .p-heroe__foto,
  body[class*="provincia"] .p-heroe__foto,
  body[class*="ciudad"] .p-heroe__foto { min-height: 0; aspect-ratio: 16 / 9; }
  /* En móvil el color del panel ya marca el nivel: el indicador se omite
     para que titular, entradilla y botón quepan en el primer pantallazo */
  .p-nivel { display: none; }
  .p-heroe__texto h1 { font-size: clamp(2.4rem, 1.4rem + 4.4vw, 3rem); }
  .p-heroe__texto .w-entradilla p + p { font-size: .975rem; }
  .p-heroe__accion { gap: .6rem 1rem; }
  .p-heroe__accion .boton { font-size: 1rem; padding: .8rem 1.2rem; }
  body[class*="ciudad"] .p-heroe:has(.w-foto) .p-heroe__texto { margin: 0; }
  body[class*="region"] .p-heroe__foto { min-height: 0; }
  body[class*="ciudad"] .p-heroe__foto { height: auto; }
  /* Sin cotizador: nota y botón siguen formando una sola tarjeta */
  .p-mosaico:not(:has(> .w-cotizador)) > .p-mosaico__nota { border-radius: var(--radio) var(--radio) 0 0; border-top: 0; }
  .p-mosaico > .w-cta-linea { margin-top: calc(-1 * var(--hueco)); border-radius: 0 0 var(--radio) var(--radio); }
  .p-mosaico:not(:has(> .w-cotizador)) > .p-atencion { border: 1px solid var(--filete); border-radius: var(--radio); }

  .p-heroe__texto { gap: 1rem; }
  .p-atencion__datos { grid-template-columns: minmax(0, 1fr); }
  .p-atencion__datos div:nth-child(even) { padding-left: 0; border-left: 0; }
  .p-mosaico > .w-cta-linea::before { width: 2.5rem; height: 2.5rem; }
  .p-mosaico > .w-cta-linea .w-cta { max-width: 100%; white-space: normal; text-align: left; }

  .w-datos__fila { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); padding: .6rem 0; }
  .w-faq__resp { padding-right: 0; }
  .w-hermanas__enlaces { columns: 2; column-gap: 1rem; }
  .w-hermanas__enlaces a { font-size: .9rem; padding: .5rem 0; gap: .4rem; }
  .w-hermanas__titulo { font-size: 1.7rem; padding-bottom: .75rem; margin-bottom: .75rem; }

  /* Tablas de dos columnas: cada fila, una tarjeta apilada (la primera
     celda como título, la segunda debajo), sin scroll ni columnas apretadas.
     La cabecera queda fuera de vista pero con sus colores (tinta sobre
     menta) para que siga midiendo bien */
  .w-tabla:not(:has(tr > :nth-child(3))) { overflow: visible; background: var(--blanco); }
  .w-tabla:not(:has(tr > :nth-child(3))) table { min-width: 0; font-size: .95rem; }
  .w-tabla:not(:has(tr > :nth-child(3))) thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .w-tabla:not(:has(tr > :nth-child(3))) tbody,
  .w-tabla:not(:has(tr > :nth-child(3))) tr,
  .w-tabla:not(:has(tr > :nth-child(3))) td,
  .w-tabla:not(:has(tr > :nth-child(3))) tbody th { display: block; width: 100%; }
  .w-tabla:not(:has(tr > :nth-child(3))) tr { padding: .8rem 1rem .85rem; }
  .w-tabla:not(:has(tr > :nth-child(3))) tbody tr + tr { border-top: 1px solid var(--filete); }
  .w-tabla:not(:has(tr > :nth-child(3))) tbody tr + tr td,
  .w-tabla:not(:has(tr > :nth-child(3))) tbody tr + tr th { border-top: 0; }
  .w-tabla:not(:has(tr > :nth-child(3))) td,
  .w-tabla:not(:has(tr > :nth-child(3))) tbody th { padding: 0; }
  .w-tabla:not(:has(tr > :nth-child(3))) td + td { margin-top: .25rem; color: var(--tinta); }
  .w-tabla:not(:has(tr > :nth-child(3))) tbody tr:hover td,
  .w-tabla:not(:has(tr > :nth-child(3))) tbody tr:hover th { background: transparent; }

  /* Tablas de tres o más columnas: scroll propio con ancho holgado (nada
     cortado ni apretado), primera columna fija y aviso fijo de deslizar */
  .w-tabla:has(tr > :nth-child(3)) table { min-width: max(100%, 36rem); font-size: .9rem; }
  .w-tabla:has(tr > :nth-child(3)) th,
  .w-tabla:has(tr > :nth-child(3)) td { padding: .7rem .8rem; }
  .w-tabla:has(tr > :nth-child(3)) tbody td:first-child,
  .w-tabla:has(tr > :nth-child(3)) tbody th:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    max-width: 9rem;
    background: var(--blanco);
    box-shadow: 1px 0 0 var(--filete);
  }
  .w-tabla:has(tr > :nth-child(3)) thead th:first-child { position: sticky; left: 0; z-index: 2; }
  .w-tabla:has(tr > :nth-child(3))::before {
    content: "Desliza la tabla →";
    position: sticky;
    left: 0;
    display: block;
    padding: .45rem .8rem;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--verde-osc);
    background: var(--menta-2);
    border-bottom: 1px solid var(--filete);
  }
  .w-hijas__rejilla { grid-template-columns: minmax(0, 1fr); }
  .w-tarjeta { min-height: 0; }
  .w-tarjeta::before { padding-bottom: .4rem; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta { padding: .7rem .8rem .75rem; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::after { display: none; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__nombre { font-size: .95rem; }

  .i-coord { font-size: .7rem; gap: .6rem; }
  .w-antetitulo { font-size: .8rem; letter-spacing: .1em; }
  .w-antetitulo::before { width: 1.5rem; }
  .w-entradilla p { font-size: 1.0625rem; line-height: 1.5; }
  .i-heroe__texto { gap: 1.25rem; }
  .i-heroe__acciones { margin-top: 1.25rem; }
  .i-banda { grid-template-columns: minmax(0, 1fr); }
  .i-banda__foto { min-height: 0; aspect-ratio: 16 / 9; }

  .c__ayuda { grid-template-columns: minmax(0, 1fr); }
  .c__cabeza { padding: .85rem 1rem; }

  /* Pie en móvil: marca y teléfono arriba; Servicios y Destinos en dos
     columnas cortas, con su rótulo; legales en una línea que se reparte */
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.25rem; }
  .pie__rejilla > :first-child { grid-column: 1 / -1; }
  .pie__lista li { padding: .25rem 0; font-size: .9rem; }
  .pie .pie__mas { font-size: .85rem; padding: .5rem .85rem; }
  .pie__base { flex-direction: column; gap: .75rem; }
}

@media (max-width: 26em) {
  .marca__texto { font-size: 1.3rem; }
  .marca__icono { width: 2.25rem; height: 2.25rem; }
  .cab__boton-txt { display: none; }
  .i-destinos__resumen div + div { padding-left: .6rem; }
  .boton, .w-cta { font-size: .975rem; }
}

/* ==========================================================================
   Portada en móvil: H1 y «Calcular precio» en el primer pantallazo; la foto,
   después, como banda de 200 px
   ========================================================================== */

@media (max-width: 47.99em) {
  .i-heroe__foto { aspect-ratio: auto; min-height: 0; height: 12.5rem; }
  .i-heroe__texto { padding: 1.25rem 1.25rem 1.5rem; gap: .9rem; }
  .i-heroe__texto .w-entradilla { margin-top: .9rem; }
  .i-heroe__acciones { gap: .5rem; }
  .i-heroe__acciones .boton { font-size: .975rem; padding: .75rem 1.1rem; }
  .i-chip {
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    gap: 0;
    padding: .45rem .7rem;
    font-size: .78rem;
    line-height: 1.3;
  }
  .i-chip .ico { display: none; }
}

/* ==========================================================================
   Ficha en franja (Land y ciudad, desde tableta): rótulo y teléfono en la
   cabeza; los datos, en celdas que se reparten la fila sin dejar huecos
   ========================================================================== */

@media (min-width: 48em) {
  body[class*="region"] .p-heroe__ficha,
  body[class*="ciudad"] .p-heroe__ficha,
  body[class*="contacto"] .p-heroe__ficha {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "rotulo llamar"
      "datos datos";
    align-items: center;
    gap: 1rem 1.5rem;
    align-self: start;
  }
  body[class*="region"] .p-heroe__rotulo,
  body[class*="ciudad"] .p-heroe__rotulo,
  body[class*="contacto"] .p-heroe__rotulo { grid-area: rotulo; justify-content: flex-start; }
  body[class*="region"] .p-heroe__llamar,
  body[class*="ciudad"] .p-heroe__llamar {
    grid-area: llamar;
    grid-template-columns: auto auto;
    align-items: center;
    column-gap: 1rem;
    padding: .55rem 1rem;
  }
  body[class*="region"] .p-heroe__ficha > .w-datos,
  body[class*="ciudad"] .p-heroe__ficha > .w-datos,
  body[class*="contacto"] .p-heroe__ficha > .w-datos {
    grid-area: datos;
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: var(--filete);
    border: 1px solid var(--filete);
    border-radius: var(--radio-s);
    overflow: hidden;
  }
  body[class*="region"] .p-heroe__ficha .w-datos__fila,
  body[class*="ciudad"] .p-heroe__ficha .w-datos__fila,
  body[class*="contacto"] .p-heroe__ficha .w-datos__fila {
    flex: 1 1 11rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: .3rem;
    padding: .8rem 1rem .9rem;
    border: 0;
    background: var(--blanco);
  }
  body[class*="region"] .p-heroe__ficha .w-datos dt,
  body[class*="ciudad"] .p-heroe__ficha .w-datos dt,
  body[class*="contacto"] .p-heroe__ficha .w-datos dt { color: var(--coral-osc); font-size: .8rem; }
}

/* Ciudad en escritorio: el panel ancho reparte titular (izquierda) y botón
   con indicador de nivel (derecha). El bloque «Calcular precio» arranca a la
   altura del H1, arriba de la columna: el sobrante queda al pie, nunca un
   hueco encima del botón */
@media (min-width: 68.76em) {
  body[class*="ciudad"] .p-heroe__texto {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(16rem, 1fr);
    grid-template-areas:
      "migas migas"
      "titular accion"
      "titular nivel"
      "titular .";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: clamp(2rem, 4vw, 4rem);
    row-gap: 1.1rem;
  }
  body[class*="ciudad"] .p-heroe__texto > .w-migas { grid-area: migas; }
  body[class*="ciudad"] .p-heroe__titular { grid-area: titular; }
  /* Botón y nivel apoyados en la línea base de la entradilla */
  body[class*="ciudad"] .p-heroe__accion {
    grid-area: accion;
    padding: 1.1rem 1.2rem;
    border-radius: var(--radio-s);
    background: var(--menta);
  }
  body[class*="ciudad"] .p-nivel { grid-area: nivel; margin-top: 0; padding-top: 0; max-width: none; }
}