/* ==========================================================================
   Enviar palet internacional · hoja de estilo
   Cartel tipográfico en azul petróleo y coral: titulares grandes en
   Newsreader, texto en Public Sans, bloques planos y esquinas rectas.
   ========================================================================== */

:root {
  /* Paleta */
  --fondo: #F2F6F7;
  --tinta: #0E2A33;
  --primario: #0F5563;
  --acento: #FF6F59;
  --superficie: #FFFFFF;

  /* Tonos derivados (todos comprobados a 4,5:1 sobre su fondo de uso) */
  --tinta-suave: #3D5A63;      /* texto secundario sobre claros */
  --acento-tinta: #B83A26;     /* coral legible sobre claros */
  --acento-luz: #FFB3A6;       /* coral legible sobre petróleo y tinta */
  --acento-claro: #FFE5DF;     /* papel coral */
  --primario-claro: #DCEAED;   /* papel petróleo */
  --primario-hondo: #0B4450;
  --sobre-oscuro: #D3E6EA;     /* texto secundario sobre oscuros */
  --linea-suave: #C5D6DA;
  --linea-oscura: rgba(255, 255, 255, .2);

  /* Tipografía */
  --f-titulo: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-texto: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* Retícula */
  --ancho: 1240px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --cabecera: 4.5rem;
  --ritmo: clamp(3rem, 7vw, 6rem);

  /* Flecha dibujada (se tiñe con currentColor vía mask) */
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M2.5 10h13M10.5 4.5 16 10l-5.5 5.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}

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

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

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

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--tinta);
  background: var(--fondo);
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: var(--primario);
  text-decoration-thickness: 1px;
  text-underline-offset: .2em;
  transition: color .18s ease, text-decoration-color .18s ease;
}
a:hover { color: var(--acento-tinta); }

:focus-visible {
  outline: 3px solid var(--acento);
  outline-offset: 3px;
}

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
  margin: 0 0 .5em;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
  overflow-wrap: normal;
}
h2 { font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); }
h3 { font-size: clamp(1.25rem, 1.12rem + .55vw, 1.6rem); line-height: 1.2; }

p { margin: 0 0 1em; }
strong { font-weight: 700; }

.w-contenedor {
  width: 100%;
  max-width: var(--ancho);
  margin-inline: auto;
  padding-inline: var(--margen);
}

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

.w-saltar {
  position: absolute;
  left: var(--margen);
  top: -4rem;
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--tinta);
  color: var(--superficie);
  font-weight: 700;
  text-decoration: none;
}
.w-saltar:focus { top: .75rem; color: var(--superficie); }

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

.w-boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  background: var(--acento);
  color: var(--tinta);
  /* Botón primario único en toda la web: coral plano sin filete, sobre claro o sobre oscuro */
  border: 2px solid var(--acento);
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.w-boton::after,
.w-cta::after {
  content: "";
  flex: none;
  width: 1.1em;
  height: 1.1em;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.w-boton:hover,
.w-cta:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--acento);
  box-shadow: 4px 4px 0 var(--acento);
  transform: translate(-2px, -2px);
}
/* Sobre fondos de tinta el hover pasa a blanco para no fundirse con el bloque */
.w-bloque--oscuro .w-boton:hover,
.w-portada-heroe .w-boton:not(.w-boton--linea):hover,
.w-cierre-marco .w-cta:hover,
body.pag-region .w-heroe .w-boton:hover,
body.pag-continente .w-heroe .w-boton:hover { background: var(--superficie); border-color: var(--superficie); color: var(--tinta); }
.w-boton:hover::after,
.w-cta:hover::after { transform: translateX(3px); }

.w-boton--linea {
  background: transparent;
  color: var(--tinta);
  border-color: var(--tinta);
}
.w-boton--linea:hover { background: var(--tinta); color: var(--superficie); }

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

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

.w-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--fondo);
  border-bottom: 2px solid var(--tinta);
  transition: background-color .2s ease;
}
.w-cabecera.is-desplazada { background: rgba(242, 246, 247, .97); }

.w-cabecera__barra {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--cabecera);
}

.w-marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: none;
  color: var(--tinta);
  text-decoration: none;
}
.w-marca:hover { color: var(--tinta); }
.w-marca__simbolo {
  width: 2.5rem;
  height: 2.5rem;
  flex: none;
  transition: transform .25s ease;
}
.w-marca:hover .w-marca__simbolo { transform: rotate(-4deg); }
.w-marca__nombre {
  display: flex;
  flex-direction: column;
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 700;
  line-height: .95;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.w-marca__nombre small {
  margin-top: .3rem;
  font-family: var(--f-texto);
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}

.w-menu {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-left: auto;
}
.w-menu__lista {
  display: flex;
  align-items: center;
  gap: .15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.w-menu__enlace {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .55rem .7rem;
  font-family: var(--f-titulo);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
  list-style: none;
  white-space: nowrap;
}
.w-menu__enlace::-webkit-details-marker { display: none; }
.w-menu__enlace::before {
  content: "";
  position: absolute;
  left: .7rem;
  right: .7rem;
  bottom: .25rem;
  height: 2px;
  background: var(--acento);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.w-menu__enlace:hover { color: var(--tinta); }
.w-menu__enlace:hover::before,
.w-menu__enlace[aria-current]::before,
.w-menu__grupo.is-actual > .w-menu__enlace::before,
.w-menu__grupo[open] > .w-menu__enlace::before { transform: scaleX(1); }

.w-menu__chevron {
  width: .8rem;
  height: .8rem;
  transition: transform .2s ease;
}
.w-menu__grupo[open] .w-menu__chevron { transform: rotate(180deg); }

.w-menu__grupo { position: relative; }
.w-submenu {
  position: absolute;
  top: calc(100% + .7rem);
  left: 0;
  z-index: 60;
  min-width: 15.5rem;
  margin: 0;
  padding: .4rem 0;
  list-style: none;
  background: var(--superficie);
  border: 2px solid var(--tinta);
  box-shadow: 6px 6px 0 var(--primario);
}
.w-submenu a {
  display: block;
  padding: .6rem 1.15rem;
  border-left: 4px solid transparent;
  font-size: .975rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.w-submenu a:hover,
.w-submenu a[aria-current] {
  background: var(--acento-claro);
  border-left-color: var(--acento);
  color: var(--tinta);
}

.w-menu-boton {
  display: none;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  padding: .5rem .85rem;
  background: transparent;
  color: var(--tinta);
  border: 2px solid var(--tinta);
  font-family: var(--f-texto);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}
.w-menu-boton__icono,
.w-menu-boton__icono::before,
.w-menu-boton__icono::after {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: currentColor;
  transition: transform .22s ease, background-color .22s ease;
}
.w-menu-boton__icono { position: relative; }
.w-menu-boton__icono::before,
.w-menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.w-menu-boton__icono::before { top: -6px; }
.w-menu-boton__icono::after { top: 6px; }
.w-menu-boton[aria-expanded="true"] .w-menu-boton__icono { background: transparent; }
.w-menu-boton[aria-expanded="true"] .w-menu-boton__icono::before { transform: translateY(6px) rotate(45deg); }
.w-menu-boton[aria-expanded="true"] .w-menu-boton__icono::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Migas, antetítulo, entradilla ---------- */

.w-migas { margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--tinta-suave);
}
.w-migas li { display: inline-flex; align-items: center; gap: .55rem; min-width: 0; }
/* Separador fino: una barra inclinada de 1 px en el tono del texto, nunca más pesada que la miga */
.w-migas li + li::before {
  content: "";
  flex: none;
  width: 1px;
  height: .8em;
  background: currentColor;
  opacity: .55;
  transform: skewX(-20deg);
}
.w-migas a {
  color: var(--tinta-suave);
  text-decoration: none;
  border-bottom: 1px solid var(--linea-suave);
  transition: color .15s ease, border-color .15s ease;
}
.w-migas a:hover { color: var(--primario); border-bottom-color: var(--primario); }
.w-migas [aria-current] { font-weight: 600; color: var(--tinta); }

.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.25rem;
  font-family: var(--f-texto);
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.w-antetitulo::before {
  content: "";
  flex: none;
  width: 2.5rem;
  height: 3px;
  background: var(--acento);
}

.w-entradilla { max-width: 40rem; }
.w-entradilla p {
  max-width: 32em;
  margin: 0 0 .75em;
  font-size: clamp(1.125rem, 1.06rem + .28vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta);
}
.w-entradilla p:last-child { margin-bottom: 0; }

/* ---------- Ficha de datos ---------- */

.w-datos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0;
  background: var(--primario);
  color: var(--superficie);
  border-top: 6px solid var(--acento);
  counter-reset: dato;
}
.w-datos__fila {
  counter-increment: dato;
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .6rem;
  padding: 1rem 1.35rem;
  border-bottom: 1px solid var(--linea-oscura);
}
.w-datos__fila:last-child { border-bottom: 0; }
.w-datos__fila::before {
  content: counter(dato, decimal-leading-zero);
  grid-row: 1 / span 2;
  padding-top: .05rem;
  font-family: var(--f-titulo);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acento-luz);
}
.w-datos dt {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sobre-oscuro);
}
.w-datos dd {
  margin: .25rem 0 0;
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--superficie);
  /* Nunca «Transferenci / a»: las palabras de la ficha no se parten */
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  word-break: normal;
  /* Valores largos («A-92 Sevilla–Granada–Almería») en dos líneas equilibradas, no una palabra suelta */
  text-wrap: balance;
}

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

.w-heroe {
  margin-bottom: clamp(2rem, 4vw, 3rem);
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
}
/* Rejilla base (servicio): texto a la izquierda; ficha numerada y foto apiladas
   a la derecha, las dos alineadas arriba con el antetítulo */
.w-heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 23rem);
  grid-template-areas: "texto ficha" "texto foto";
  grid-template-rows: auto 1fr;
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.w-heroe__rejilla:has(> .w-heroe__ficha:empty) { grid-template-areas: "texto foto" "texto foto"; }
.w-heroe__rejilla:has(> .w-heroe__ficha:empty):has(> .w-heroe__foto:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "texto"; }
.w-heroe__ficha:empty,
.w-heroe__foto:empty { display: none; }
.w-heroe__texto { grid-area: texto; min-width: 0; }
.w-heroe__ficha { grid-area: ficha; min-width: 0; }
.w-heroe__foto { grid-area: foto; min-width: 0; }
.w-heroe__foto .w-foto { margin: 0; }
.w-heroe__foto .w-foto img { aspect-ratio: 3 / 2; }
.w-heroe h1 {
  margin: 0 0 .45em;
  font-size: clamp(2.1rem, 1.05rem + 4vw, 4.6rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -.028em;
}

.w-heroe__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin-top: 1.75rem;
}
.w-heroe__tel {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  min-width: 0;
  margin: 0;
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tinta-suave);
}
.w-heroe__tel svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  margin-top: .12rem;
  color: var(--acento-tinta);
}
.w-heroe__tel a {
  font-weight: 700;
  color: var(--tinta);
  white-space: nowrap;
  text-decoration-color: var(--acento);
  text-decoration-thickness: 2px;
}

/* Rótulo de cartel: el servicio raíz en display, con la cursiva coral de la portada.
   Vive en su propia franja al final de la página, con aire encima: nunca compite con el H1 */
.w-cartel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 .3em;
  margin: var(--ritmo) 0 0;
  padding-top: clamp(.9rem, 2vw, 1.4rem);
  border-top: 6px solid var(--tinta);
  font-family: var(--f-titulo);
  font-size: clamp(2.2rem, .6rem + 5vw, 5.75rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.04em;
  color: var(--tinta);
  -webkit-hyphens: none;
  hyphens: none;
  overflow-wrap: normal;
  user-select: none;
}
.w-cartel span,
.w-cartel em { white-space: nowrap; }
.w-cartel em {
  font-style: italic;
  font-weight: 600;
  color: var(--acento-tinta);
}
.w-cartel svg {
  flex: none;
  width: .9em;
  height: .45em;
  color: var(--acento);
}
.w-cartel + .w-cierre-marco { margin-top: clamp(1.5rem, 3vw, 2.5rem); }

/* ---- Servicio: filete grueso bajo el héroe y la ficha numerada (la única con números) ---- */
body.pag-servicio .w-heroe { border-bottom: 2px solid var(--tinta); }
body.pag-servicio .w-heroe h1 { font-size: clamp(2.2rem, 1.05rem + 4.4vw, 5rem); }

/* ---- Páginas geográficas: cada nivel tiene su propia cabecera, no solo otro fondo.
   Continente → tinta, texto | foto y ficha · Región → tinta, texto | ficha y foto panorámica a lo ancho
   País → cartel en petróleo, titular gigante | foto y ficha en banda horizontal
   Provincia → papel petróleo, texto | foto y ficha · Municipio → compacta en tres columnas ---- */
body.pag-geo .w-heroe__rejilla {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "texto foto" "texto ficha";
  grid-template-rows: auto 1fr;
  gap: 1.5rem clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
body.pag-geo .w-heroe__rejilla:has(> .w-heroe__ficha:empty) { grid-template-areas: "texto foto" "texto foto"; }
body.pag-geo .w-heroe__rejilla:has(> .w-heroe__foto:empty) { grid-template-areas: "texto ficha" "texto ficha"; }
body.pag-geo .w-heroe__rejilla:has(> .w-heroe__ficha:empty):has(> .w-heroe__foto:empty) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "texto"; }
body.pag-geo .w-heroe__foto .w-foto img { aspect-ratio: 4 / 3; }

/* Ficha geográfica: tarjeta blanca en filas etiqueta / valor, la misma en todos los niveles */
body.pag-geo .w-datos {
  grid-template-columns: minmax(0, 1fr);
  background: var(--superficie);
  color: var(--tinta);
  border-top: 4px solid var(--tinta);
}
body.pag-geo .w-datos__fila {
  display: grid;
  /* Columna de valores ancha: los valores largos caben en una línea o en dos equilibradas */
  grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
  gap: .2rem 1rem;
  align-items: baseline;
  padding: .75rem 1.25rem;
  border-bottom: 1px solid var(--linea-suave);
}
body.pag-geo .w-datos__fila:last-child { border-bottom: 0; }
body.pag-geo .w-datos__fila::before { content: none; }
body.pag-geo .w-datos dt { color: var(--tinta-suave); }
body.pag-geo .w-datos dd { margin: 0; font-size: 1.12rem; color: var(--tinta); }
body.pag-geo .w-datos a { color: var(--primario); text-decoration-color: var(--acento); }

/* Tono por nivel */
body.pag-region .w-heroe,
body.pag-continente .w-heroe {
  padding-block: clamp(1.25rem, 3vw, 2.25rem) clamp(2rem, 4vw, 3.5rem);
  background: var(--tinta);
  color: var(--superficie);
}
body.pag-region .w-datos,
body.pag-continente .w-datos { border-top: 6px solid var(--acento); }
body.pag-division .w-heroe,
body.pag-provincia .w-heroe { background: var(--primario-claro); }

body.pag-region .w-heroe h1 { font-size: clamp(2.2rem, 1rem + 4.6vw, 5.25rem); }
/* Continente: titulares largos, cuerpo contenido para quedarse en 2-3 líneas */
body.pag-continente .w-heroe h1 { font-size: clamp(2rem, 1rem + 3vw, 3.9rem); line-height: 1.04; }

/* Región: texto y ficha arriba; la foto baja a una panorámica a todo el ancho del contenedor */
body.pag-region .w-heroe__rejilla {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "texto ficha" "foto foto";
  grid-template-rows: auto auto;
  row-gap: clamp(2rem, 4vw, 3rem);
}
body.pag-region .w-heroe__rejilla:has(> .w-heroe__ficha:empty) { grid-template-areas: "texto texto" "foto foto"; }
body.pag-region .w-heroe__foto .w-foto img { aspect-ratio: 21 / 8; }

/* País: cartel en petróleo plano. Titular gigante y foto arriba; la ficha baja a una banda
   horizontal blanca a todo el ancho, una casilla por dato, como la de la portada */
body[class*="pag-pais"] .w-heroe {
  background: var(--primario);
  color: var(--superficie);
}
body[class*="pag-pais"] .w-heroe__rejilla {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "texto foto" "ficha ficha";
  grid-template-rows: auto auto;
  row-gap: clamp(1.75rem, 3vw, 2.5rem);
  align-items: end;
}
body[class*="pag-pais"] .w-heroe__rejilla:has(> .w-heroe__foto:empty) { grid-template-areas: "texto texto" "ficha ficha"; }
body[class*="pag-pais"] .w-heroe h1 {
  font-size: clamp(2.4rem, .9rem + 5.6vw, 6.25rem);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.035em;
}
body[class*="pag-pais"] .w-heroe__foto .w-foto img { aspect-ratio: 5 / 4; }
body[class*="pag-pais"] .w-datos {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 6px solid var(--acento);
}
body[class*="pag-pais"] .w-datos__fila {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 1.25rem 1.1rem;
  border-bottom: 0;
  border-left: 1px solid var(--linea-suave);
}
body[class*="pag-pais"] .w-datos__fila:first-child { border-left: 0; }

/* Municipio: cabecera compacta en tres columnas (texto, ficha, foto cuadrada), sin bloque de color */
body.pag-municipio .w-heroe,
body.pag-ciudad .w-heroe {
  padding-block: clamp(1rem, 2.5vw, 1.75rem) clamp(1.5rem, 3vw, 2.5rem);
  border-bottom: 6px solid var(--primario);
}
body.pag-municipio .w-heroe__rejilla,
body.pag-ciudad .w-heroe__rejilla {
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem) minmax(0, 15rem);
  grid-template-areas: "texto ficha foto";
  grid-template-rows: auto;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
}
body.pag-municipio .w-heroe__rejilla:has(> .w-heroe__ficha:empty),
body.pag-ciudad .w-heroe__rejilla:has(> .w-heroe__ficha:empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); grid-template-areas: "texto foto"; }
body.pag-municipio .w-heroe__rejilla:has(> .w-heroe__foto:empty),
body.pag-ciudad .w-heroe__rejilla:has(> .w-heroe__foto:empty) { grid-template-columns: minmax(0, 1fr) minmax(0, 22rem); grid-template-areas: "texto ficha"; }
body.pag-municipio .w-heroe__foto .w-foto img,
body.pag-ciudad .w-heroe__foto .w-foto img { aspect-ratio: 1 / 1; }
body.pag-municipio .w-heroe h1,
body.pag-ciudad .w-heroe h1 { font-size: clamp(1.9rem, 1rem + 2.8vw, 3.5rem); }
body.pag-municipio .w-datos__fila,
body.pag-ciudad .w-datos__fila { grid-template-columns: minmax(0, 1fr); padding: .6rem 1rem; }

/* Textos del cartel de país sobre petróleo */
body[class*="pag-pais"] .w-heroe h1,
body[class*="pag-pais"] .w-heroe .w-entradilla p,
body[class*="pag-pais"] .w-heroe .w-migas [aria-current] { color: var(--superficie); }
body[class*="pag-pais"] .w-heroe .w-antetitulo { color: var(--acento-luz); }
body[class*="pag-pais"] .w-heroe__texto a:not(.w-boton) { color: var(--acento-luz); text-decoration-color: var(--acento); }
body[class*="pag-pais"] .w-heroe__texto a:not(.w-boton):hover { color: var(--superficie); }
body[class*="pag-pais"] .w-heroe__tel,
body[class*="pag-pais"] .w-heroe .w-migas ol,
body[class*="pag-pais"] .w-heroe .w-migas a { color: var(--sobre-oscuro); }
body[class*="pag-pais"] .w-heroe__tel svg,
body[class*="pag-pais"] .w-heroe__tel a { color: var(--acento-luz); }
body[class*="pag-pais"] .w-heroe .w-migas a { border-bottom-color: var(--linea-oscura); }
body[class*="pag-pais"] .w-heroe .w-migas a:hover { color: var(--superficie); border-bottom-color: var(--superficie); }
body[class*="pag-pais"] .w-heroe .w-boton:hover { background: var(--superficie); border-color: var(--superficie); color: var(--tinta); }

/* ---- Servicio: la primera cifra de la ficha en grande, como cifra de cartel ---- */
body.pag-servicio .w-datos__fila:first-child dd {
  font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--acento-luz);
  text-wrap: balance;
}

/* Textos sobre fondo oscuro (región y continente) */
body.pag-region .w-heroe h1,
body.pag-continente .w-heroe h1 { color: var(--superficie); }
body.pag-region .w-heroe .w-entradilla p,
body.pag-continente .w-heroe .w-entradilla p { color: var(--superficie); }
body.pag-region .w-heroe .w-antetitulo,
body.pag-continente .w-heroe .w-antetitulo { color: var(--acento-luz); }
/* Enlaces que la fábrica mete en la entradilla o el antetítulo: nunca petróleo sobre tinta */
body.pag-region .w-heroe__texto a:not(.w-boton),
body.pag-continente .w-heroe__texto a:not(.w-boton) { color: var(--acento-luz); text-decoration-color: var(--acento); }
body.pag-region .w-heroe__texto a:not(.w-boton):hover,
body.pag-continente .w-heroe__texto a:not(.w-boton):hover { color: var(--superficie); }
body.pag-region .w-heroe__tel,
body.pag-continente .w-heroe__tel { color: var(--sobre-oscuro); }
body.pag-region .w-heroe__tel svg,
body.pag-continente .w-heroe__tel svg,
body.pag-region .w-heroe__tel a,
body.pag-continente .w-heroe__tel a { color: var(--acento-luz); }
body.pag-region .w-heroe .w-migas ol,
body.pag-region .w-heroe .w-migas a,
body.pag-continente .w-heroe .w-migas ol,
body.pag-continente .w-heroe .w-migas a { color: var(--sobre-oscuro); }
body.pag-region .w-heroe .w-migas a,
body.pag-continente .w-heroe .w-migas a { border-bottom-color: var(--linea-oscura); }
body.pag-region .w-heroe .w-migas a:hover,
body.pag-continente .w-heroe .w-migas a:hover { color: var(--superficie); border-bottom-color: var(--superficie); }
body.pag-region .w-heroe .w-migas [aria-current],
body.pag-continente .w-heroe .w-migas [aria-current] { color: var(--superficie); }

/* ---- Contacto: tarjeta de contacto en tinta junto al titular, teléfono en grande. Sin foto
   decorativa: debajo del héroe entran directamente los bloques útiles (teléfono y horario,
   cotizador, quién presta el servicio) y la banda de canales del pie ---- */
body.pag-contacto .w-heroe { border-bottom: 2px solid var(--tinta); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
body.pag-contacto .w-heroe__rejilla,
body.pag-contacto .w-heroe__rejilla:has(> .w-heroe__foto:empty) {
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-areas: "texto ficha";
  grid-template-rows: auto;
  align-items: center;
}
body.pag-contacto .w-heroe__foto { display: none; }
body.pag-contacto .w-heroe__ficha { align-self: stretch; }
body.pag-contacto .w-heroe__ficha .w-datos {
  height: 100%;
  grid-auto-rows: 1fr;
}
body.pag-contacto .w-heroe__ficha .w-datos__fila {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Titular de cartel pero pegado a su entradilla: sin hueco muerto entre los dos */
body.pag-contacto .w-heroe h1 {
  margin-bottom: .2em;
  font-size: clamp(2.6rem, 1rem + 5vw, 5.5rem);
  line-height: .95;
}
body.pag-contacto .w-heroe .w-antetitulo { margin-bottom: .75rem; }
body.pag-contacto .w-heroe__accion { margin-top: 1.25rem; }
/* El teléfono destacado vive en la tarjeta de tinta; en el texto queda solo el acceso al cotizador */
body.pag-contacto .w-heroe__tel { display: none; }
body.pag-contacto .w-datos { background: var(--tinta); }
body.pag-contacto .w-datos__fila { padding: 1.25rem 1.5rem; }
body.pag-contacto .w-datos__fila::before { content: none; }
body.pag-contacto .w-datos dd { font-size: 1.45rem; }
body.pag-contacto .w-datos__fila:first-child dd {
  font-size: clamp(1.7rem, 1.3rem + 1.4vw, 2.4rem);
  color: var(--acento-luz);
  white-space: nowrap;
}
/* El acceso suelto que la fábrica pone en el hueco del cotizador sobra: el botón del héroe
   y el cierre ya llevan al cotizador (web.js los apunta a /#cotizar si aquí no lo hay) */
body.pag-contacto .w-cta-linea { display: none; }
/* Las secciones de contacto, en fichas de canal unidas por filetes de tinta */
body.pag-contacto .w-cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 2px;
  margin-top: clamp(.5rem, 2vw, 1.5rem);
  background: var(--tinta);
  border: 2px solid var(--tinta);
}
body.pag-contacto .w-cuerpo > .w-seccion,
body.pag-contacto .w-cuerpo > .w-seccion:nth-of-type(3n + 2) {
  display: block;
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--superficie);
  border-top: 0;
  box-shadow: none;
  clip-path: none;
}
body.pag-contacto .w-cuerpo > .w-seccion > h2 {
  position: static;
  margin-bottom: .75rem;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
}
body.pag-contacto .w-cuerpo > .w-seccion > h2::before {
  font-size: clamp(2.6rem, 2rem + 2vw, 3.75rem);
  color: var(--acento-tinta);
}
body.pag-contacto .w-cuerpo > .w-seccion p { font-size: 1rem; }

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

.w-cotizador {
  position: relative;
  margin: 0 0 var(--ritmo);
  padding: clamp(1.25rem, 3.5vw, 3rem) clamp(.75rem, 3.5vw, 3rem) clamp(1.25rem, 3vw, 2.5rem);
  background-color: var(--primario);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 80px);
}
.w-cotizador::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(3rem, 10vw, 7rem);
  height: 6px;
  background: var(--acento);
}
.w-cotizador__titulo {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  color: var(--superficie);
}
.w-cotizador__marco,
.w-cotizador > .cotizador-one {
  width: 100%;
  max-width: 760px;
  min-height: 32.5rem;
  margin-inline: auto;
  background: var(--superficie);
  color: var(--tinta);
}
.w-cotizador__nota {
  max-width: 760px;
  margin: 1.1rem auto 0;
  font-size: .9rem;
  line-height: 1.5;
  text-align: center;
  color: var(--sobre-oscuro);
}
.w-cotizador__nota a { color: var(--superficie); text-decoration-color: var(--acento); }
.w-cotizador__nota a:hover { color: var(--acento-luz); }

/* ---------- Foto ---------- */

.w-foto { margin: 0 0 var(--ritmo); }
.w-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--primario-claro);
}
/* Sin pies de foto: la foto acompaña, el dato lo da el texto y la ficha */
.w-foto figcaption { display: none; }

/* ---------- Cuerpo: secciones del documento ---------- */

.w-cuerpo { counter-reset: seccion; }

.w-seccion,
.w-faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 8fr);
  column-gap: clamp(2rem, 5vw, 5rem);
  row-gap: 0;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  border-top: 2px solid var(--tinta);
}
.w-seccion > *,
.w-faq > * { grid-column: 2; min-width: 0; }
.w-seccion > h2,
.w-faq > h2 {
  grid-column: 1;
  grid-row: 1 / span 60;
  align-self: start;
  position: sticky;
  top: calc(var(--cabecera) + 1.5rem);
  margin: 0;
  font-size: clamp(1.7rem, 1.2rem + 1.9vw, 2.75rem);
  line-height: 1.06;
}
.w-seccion { counter-increment: seccion; }
/* Numeración de cartel: cifra gigante sobre cada titular de sección */
.w-seccion > h2::before {
  content: counter(seccion, decimal-leading-zero);
  display: block;
  margin-bottom: .2em;
  font-family: var(--f-titulo);
  font-size: clamp(3.5rem, 2.4rem + 3.6vw, 6.5rem);
  font-weight: 800;
  line-height: .85;
  letter-spacing: -.05em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--acento-tinta);
}
/* Cada tercera sección, banda de papel petróleo a sangre (sin desbordar la caja) */
.w-cuerpo > .w-seccion:nth-of-type(3n + 2) {
  background: var(--primario-claro);
  box-shadow: 0 0 0 100vmax var(--primario-claro);
  clip-path: inset(0 -100vmax);
  border-top-color: var(--primario);
}
.w-cuerpo > .w-seccion:nth-of-type(3n + 2) > h2::before { color: var(--primario); }
.w-faq > h2::before {
  content: "";
  display: block;
  width: 2.5rem;
  height: 3px;
  margin-bottom: 1.1rem;
  background: var(--acento);
}

.w-seccion p,
.w-seccion li { max-width: 66ch; }
.w-seccion > :last-child { margin-bottom: 0; }
.w-seccion h3 { margin-top: 1.6em; }
.w-seccion > h3:first-of-type:nth-child(2) { margin-top: 0; }
.w-seccion a { text-decoration-color: var(--acento); text-decoration-thickness: 2px; }

.w-seccion ul,
.w-seccion ol { margin: 0 0 1.25em; padding: 0; list-style: none; }
.w-seccion ul > li {
  position: relative;
  padding-left: 1.4rem;
  margin-bottom: .45em;
}
.w-seccion ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: .45rem;
  height: .45rem;
  background: var(--acento);
}
.w-seccion ol { counter-reset: lista; }
.w-seccion ol > li {
  counter-increment: lista;
  position: relative;
  padding-left: 2.4rem;
  margin-bottom: .6em;
}
.w-seccion ol > li::before {
  content: counter(lista, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: .05em;
  font-family: var(--f-titulo);
  font-weight: 700;
  color: var(--acento-tinta);
}
.w-seccion blockquote {
  margin: 1.5em 0;
  padding: .25rem 0 .25rem 1.25rem;
  border-left: 4px solid var(--acento);
  font-family: var(--f-titulo);
  font-size: 1.3rem;
  line-height: 1.4;
}

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

.w-tabla {
  max-width: 100%;
  margin: 1.5rem 0 1.75rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--superficie);
  border: 2px solid var(--tinta);
  scrollbar-color: var(--primario) var(--primario-claro);
  scrollbar-width: thin;
}
.w-tabla:focus-visible { outline-offset: 2px; }
.w-tabla table {
  width: 100%;
  min-width: 32rem;
  border-collapse: collapse;
  font-size: .95rem;
  line-height: 1.45;
}
.w-tabla thead th {
  padding: .8rem 1rem;
  background: var(--tinta);
  color: var(--superficie);
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.w-tabla tbody th {
  padding: .85rem 1rem;
  background: var(--primario-claro);
  color: var(--tinta);
  font-weight: 700;
  text-align: left;
}
.w-tabla td {
  padding: .85rem 1rem;
  border-top: 1px solid var(--linea-suave);
  color: var(--tinta);
  vertical-align: top;
}
.w-tabla tbody tr:first-child td { border-top: 0; }
.w-tabla td:first-child {
  font-family: var(--f-titulo);
  font-size: 1.08rem;
  font-weight: 600;
}
.w-tabla tbody tr { transition: background-color .15s ease; }
.w-tabla tbody tr:hover { background: var(--acento-claro); }

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

.w-faq__item { border-bottom: 1px solid var(--linea-suave); }
.w-faq__item:first-of-type { border-top: 1px solid var(--linea-suave); }
.w-faq > h2 + .w-faq__item { border-top: 0; }
.w-faq__item summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.15rem 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.15rem, 1.06rem + .4vw, 1.4rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
}
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::after {
  content: "";
  flex: none;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: -.05rem;
  border: 2px solid var(--tinta);
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / .8rem 2px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 2px .8rem no-repeat;
  background-color: transparent;
  transition: transform .25s ease, background-color .2s ease;
}
.w-faq__item summary:hover { color: var(--primario); }
.w-faq__item summary:hover::after { background-color: var(--acento-claro); }
.w-faq__item[open] summary::after { transform: rotate(45deg); background-color: var(--acento); }
.w-faq__resp { padding: 0 3.25rem 1.35rem 0; }
.w-faq__resp p { max-width: 62ch; color: var(--tinta); }
.w-faq__resp p:last-child { margin-bottom: 0; }

/* ---------- Páginas hijas ---------- */

.w-hijas {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  border-top: 2px solid var(--tinta);
}
.w-hijas__titulo {
  max-width: 18em;
  margin-bottom: clamp(1.25rem, 3vw, 2rem);
  font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  counter-reset: hija;
}
.w-tarjeta {
  counter-increment: hija;
  position: relative;
  display: grid;
  grid-template-columns: 2.3rem minmax(0, 1fr) 1.2rem;
  column-gap: .6rem;
  align-content: start;
  padding: 1.1rem 0 1.4rem;
  border-top: 2px solid var(--tinta);
  color: var(--tinta);
  text-decoration: none;
  background-image: linear-gradient(var(--acento), var(--acento));
  background-repeat: no-repeat;
  background-position: 0 -2px;
  background-size: 0 4px;
  transition: background-size .3s ease;
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1;
  padding-top: .2rem;
  font-family: var(--f-titulo);
  font-size: .95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--acento-tinta);
}
.w-tarjeta::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 1.2rem;
  height: 1.2rem;
  margin-top: .25rem;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.w-tarjeta__nombre {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
  transition: color .2s ease;
}
.w-tarjeta__texto {
  grid-column: 2 / span 2;
  grid-row: 2;
  margin-top: .4rem;
  font-size: .95rem;
  line-height: 1.5;
  color: var(--tinta-suave);
}
.w-tarjeta:hover { color: var(--tinta); background-size: 100% 4px; }
.w-tarjeta:hover .w-tarjeta__nombre { color: var(--primario); }
.w-tarjeta:hover::after { transform: translateX(4px); color: var(--acento-tinta); }

/* Rejillas largas: más columnas y filas compactas */
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
}
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta { padding: .75rem 0 .9rem; border-top-width: 1px; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__nombre { font-size: 1.08rem; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__texto { font-size: .875rem; }

/* ---------- Hermanas ---------- */

.w-hermanas {
  margin-block: clamp(1rem, 3vw, 2rem) 0;
  padding: clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3.5vw, 3rem);
  background: var(--primario-claro);
}
.w-hermanas__titulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
}
.w-hermanas__titulo::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  background: var(--acento);
}
.w-hermanas__enlaces {
  columns: 4 13rem;
  column-gap: 2rem;
}
.w-hermanas__enlaces a {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  padding: .45rem 0;
  border-bottom: 1px solid #B4CBD0;
  font-size: .975rem;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  break-inside: avoid;
  transition: color .15s ease, padding-left .2s ease;
}
.w-hermanas__enlaces a::before {
  content: "";
  flex: none;
  width: .4rem;
  height: .4rem;
  background: var(--primario);
  transform: translateY(-.15em);
  transition: background-color .15s ease;
}
.w-hermanas__enlaces a:hover { color: var(--primario); padding-left: .25rem; }
.w-hermanas__enlaces a:hover::before { background: var(--acento); }
.w-hermanas__enlaces a[aria-current] { font-weight: 700; }

.w-hermanas__mas {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-top: 1rem;
  min-height: 2.75rem;
  padding: .55rem 1rem;
  background: var(--superficie);
  color: var(--tinta);
  border: 2px solid var(--tinta);
  font-family: var(--f-texto);
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
}

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

.w-cierre-marco {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--tinta);
  color: var(--superficie);
}
.w-cierre-marco::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(3rem, 10vw, 7rem);
  height: 6px;
  background: var(--acento);
}
.w-cierre p {
  max-width: 34ch;
  margin: 0 0 .6em;
  font-family: var(--f-titulo);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2.05rem);
  font-weight: 500;
  line-height: 1.28;
  color: var(--superficie);
  text-wrap: pretty;
}
.w-cierre p:last-child { margin-bottom: 0; }
.w-cierre a { color: var(--acento-luz); text-decoration-color: var(--acento); }
.w-cierre a:hover { color: var(--superficie); }
.w-cierre-marco__accion {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  margin: 0;
}
.w-cierre-marco__rotulo {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento-luz);
}
/* Sin texto de cierre (contacto): el rótulo pasa a titular de cartel junto al botón */
.w-cierre-marco:not(:has(> .w-cierre)) { grid-template-columns: minmax(0, 1fr); }
.w-cierre-marco:not(:has(> .w-cierre)) .w-cierre-marco__accion {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.w-cierre-marco:not(:has(> .w-cierre)) .w-cierre-marco__rotulo {
  max-width: 22em;
  font-family: var(--f-titulo);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  text-transform: none;
  color: var(--superficie);
  text-wrap: balance;
}

.w-principal { padding-bottom: var(--ritmo); }

/* ---------- Recorrido del cotizador ---------- */

.w-recorrido {
  max-width: calc(820px + 2 * var(--margen));
  padding-block: clamp(1.25rem, 3vw, 2.25rem) var(--ritmo);
}
.w-recorrido__cabeza {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.w-recorrido__cabeza .w-antetitulo { margin: 0; }
.w-recorrido__cabeza::after {
  content: "";
  flex: 1;
  height: 2px;
  background: var(--tinta);
}
.w-recorrido__titulo {
  max-width: 14em;
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(2.1rem, 1rem + 4.2vw, 4.25rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}
.w-recorrido__titulo em {
  font-style: italic;
  font-weight: 600;
  color: var(--acento-tinta);
}
.w-recorrido__marco {
  min-height: 32.5rem;
  background: var(--superficie);
  border-top: 6px solid var(--primario);
}

/* ==========================================================================
   Portada
   ========================================================================== */

/* Héroe en cartel: petróleo a sangre, titular a todo el ancho, foto de palets
   y ficha en banda coral. Alto según su contenido: el cotizador entra justo debajo,
   sin franja de petróleo vacía en medio */
.w-portada-heroe {
  padding-block: clamp(1.5rem, 3vw, 2.5rem) 0;
  background-color: var(--primario);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 80px);
  color: var(--superficie);
}
/* La foto ocupa la columna derecha entera, desde la altura del antetítulo hasta la banda
   de datos: pesa como la mitad del cartel y no deja hueco entre titular e imagen */
.w-portada-heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  grid-template-rows: auto auto 1fr auto;
  grid-template-areas:
    "ante  foto"
    "h1    foto"
    "texto foto"
    "datos datos";
  gap: 0 clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.w-portada-heroe .w-antetitulo { grid-area: ante; color: var(--acento-luz); }
.w-portada-heroe h1 {
  grid-area: h1;
  max-width: 15em;
  margin: 0 0 clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(2rem, .5rem + 4.3vw, 5rem);
  font-weight: 800;
  line-height: .95;
  letter-spacing: -.035em;
  color: var(--superficie);
}
.w-portada-heroe h1 em {
  font-style: italic;
  font-weight: 600;
  color: var(--acento-luz);
}
.w-portada-heroe__texto { grid-area: texto; min-width: 0; }
.w-portada-heroe .w-entradilla p { color: var(--superficie); }
.w-portada-heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}
.w-portada-heroe .w-boton--linea { color: var(--superficie); border-color: var(--superficie); }
.w-portada-heroe .w-boton--linea:hover { background: var(--superficie); color: var(--tinta); box-shadow: 4px 4px 0 var(--acento); }
.w-portada-heroe__foto {
  grid-area: foto;
  align-self: stretch;
  position: relative;
  min-width: 0;
  min-height: 22rem;
  margin: 0;
}
/* Sin sombra coral desplazada: el único coral del héroe es la banda de datos */
/* La foto llena la columna (alto del antetítulo + titular + entradilla) */
.w-portada-heroe__foto img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--primario-hondo);
}

/* Ficha de la portada en banda coral: cuatro casillas iguales, etiqueta encima y valor
   corto en una sola línea */
.w-datos.w-datos--banda {
  grid-area: datos;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  background: var(--acento);
  color: var(--tinta);
  border-top: 0;
}
.w-datos--banda .w-datos__fila {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .35rem;
  min-height: 5.25rem;
  padding: .85rem 1.1rem .9rem;
  border-bottom: 0;
  border-left: 2px solid var(--tinta);
}
.w-datos--banda .w-datos__fila:first-child { border-left: 0; }
.w-datos--banda .w-datos__fila::before { content: none; }
.w-datos--banda dt { color: var(--tinta); }
/* Las seis casillas valen lo mismo: valor siempre en una línea y mismo cuerpo */
.w-datos--banda dd {
  margin-top: 0;
  font-size: clamp(1.15rem, .9rem + .55vw, 1.4rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: var(--tinta);
}

/* Cotizador de la portada: bloque de tinta a un respiro de la banda de datos; el petróleo
   del héroe sigue por detrás de su arranque para que el bloque nazca del cartel */
.w-portada-cotiza {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  background: linear-gradient(var(--primario) 0 4rem, transparent 4rem);
}
.w-portada .w-cotizador {
  background-color: var(--tinta);
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 80px);
}

/* Bloques de la portada */

.w-bloque { padding-block: var(--ritmo); }
.w-bloque--blanco { background: var(--superficie); }
.w-bloque--papel { background: var(--primario-claro); }
.w-bloque--oscuro { background: var(--tinta); color: var(--superficie); }
.w-bloque--oscuro h2,
.w-bloque--oscuro h3 { color: var(--superficie); }
.w-bloque--oscuro p { color: var(--sobre-oscuro); }
.w-bloque--oscuro a { color: var(--acento-luz); text-decoration-color: var(--acento); }
.w-bloque--oscuro a:hover { color: var(--superficie); }

.w-bloque__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 1.25rem clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
  padding-top: 1.25rem;
  border-top: 2px solid var(--tinta);
}
.w-bloque--oscuro .w-bloque__cabeza { border-top-color: var(--linea-oscura); }
/* Titulares de sección en escala de cartel */
.w-bloque h2,
.w-destinos h2 {
  font-size: clamp(2rem, 1rem + 3.4vw, 4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
}
.w-bloque__cabeza { border-top-width: 6px; }
.w-bloque__cabeza h2 { margin: 0; font-size: clamp(2.1rem, .9rem + 4.4vw, 5rem); line-height: .98; }
.w-bloque__intro { margin: 0; font-size: 1.125rem; line-height: 1.6; max-width: 34em; }

.w-bloque__num {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1rem;
  font-family: var(--f-texto);
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.w-bloque__num::after {
  content: "";
  width: 2.5rem;
  height: 3px;
  background: var(--acento);
}
.w-bloque--oscuro .w-bloque__num { color: var(--acento-luz); }

.w-prosa p { max-width: 64ch; }
.w-prosa a { text-decoration-color: var(--acento); text-decoration-thickness: 2px; }

/* Pasos */

.w-pasos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0 clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.w-paso {
  position: relative;
  padding-top: 1.25rem;
  border-top: 2px solid var(--tinta);
}
.w-paso__cabeza {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
}
.w-paso__num {
  font-family: var(--f-titulo);
  font-size: clamp(3rem, 2rem + 3vw, 4.75rem);
  font-weight: 700;
  line-height: .85;
  letter-spacing: -.04em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--acento-tinta);
}
.w-paso__icono {
  width: 2.75rem;
  height: 2.75rem;
  padding: .55rem;
  background: var(--primario);
  color: var(--superficie);
  transition: background-color .2s ease, transform .25s ease;
}
.w-paso:hover .w-paso__icono { background: var(--acento); color: var(--tinta); transform: rotate(-6deg); }
.w-paso h3 { margin-bottom: .5rem; font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); }
.w-paso p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--tinta); }

/* Banda de foto con frase */

.w-banda {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  background: var(--acento);
}
.w-banda__foto { margin: 0; min-height: clamp(18rem, 38vw, 34rem); }
.w-banda__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--primario-hondo);
}
.w-banda__frase {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  color: var(--tinta);
}
.w-banda__frase p {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.6rem, 1.05rem + 1.8vw, 2.75rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.015em;
  color: var(--tinta);
  text-wrap: balance;
}
.w-banda__frase p::before {
  content: "";
  display: block;
  width: 3rem;
  height: 6px;
  margin-bottom: 1.5rem;
  background: var(--tinta);
}
.w-banda__frase small {
  display: block;
  padding-top: 1rem;
  border-top: 2px solid var(--tinta);
  font-size: .9rem;
  line-height: 1.5;
  color: var(--tinta);
}

/* Foto a sangre con cartel: el segundo golpe de cartel de la portada. La cifra gigante va
   en un bloque de tinta plano apoyado en la foto, nunca impresa sobre la imagen */

.w-sangre { position: relative; background: var(--tinta); }
.w-sangre__foto { margin: 0; }
.w-sangre__foto img {
  width: 100%;
  min-height: 26rem;
  aspect-ratio: 21 / 8;
  object-fit: cover;
  background: var(--primario-hondo);
}
.w-sangre__marco {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.w-sangre__cartel {
  position: relative;
  max-width: 38rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
  background: var(--tinta);
  color: var(--superficie);
}
.w-sangre__cartel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(3rem, 10vw, 7rem);
  height: 6px;
  background: var(--acento);
}
.w-sangre__cartel h2 {
  margin: 0 0 1rem;
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--superficie);
}
.w-sangre__cifra {
  display: block;
  font-size: clamp(5rem, 3rem + 8vw, 10.5rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.06em;
  font-variant-numeric: lining-nums;
  color: var(--acento);
}
.w-sangre__cartel p { max-width: 34em; margin: 0; color: var(--sobre-oscuro); }

/* Dos columnas asimétricas */

.w-dos {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.w-dos--invertido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.w-dos__lado { min-width: 0; }

/* Bases de palet dibujadas a escala */

.w-bases {
  margin: 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  background: var(--fondo);
  border: 2px solid var(--tinta);
}
.w-bases__rotulo {
  margin: 0 0 1.25rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.w-bases__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 2fr) minmax(0, 1fr);
  gap: clamp(.75rem, 2vw, 1.25rem);
  align-items: end;
}
.w-base svg { width: 100%; height: auto; }
.w-base__nombre {
  display: block;
  margin-top: .65rem;
  font-family: var(--f-titulo);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--tinta);
}
.w-base__medida {
  display: block;
  font-size: .8125rem;
  line-height: 1.35;
  color: var(--tinta-suave);
  font-variant-numeric: tabular-nums;
}
.w-bases__limites {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 1.5rem 0 0;
  border-top: 2px solid var(--tinta);
}
.w-bases__limites div { padding: .9rem .75rem 0 0; }
.w-bases__limites div + div { padding-left: .75rem; border-left: 1px solid var(--linea-suave); }
.w-bases__limites dt {
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--tinta-suave);
}
.w-bases__limites dd {
  margin: .2rem 0 0;
  font-family: var(--f-titulo);
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--acento-tinta);
}

/* Vehículo dedicado */

.w-foto-bloque { margin: 0; }
.w-foto-bloque img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--primario-hondo);
}
.w-hechos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 2rem 0 0;
  border-top: 1px solid var(--linea-oscura);
}
.w-hechos div { padding: 1rem 1rem 0 0; }
.w-hechos div + div { padding-left: 1rem; border-left: 1px solid var(--linea-oscura); }
.w-hechos dt {
  font-family: var(--f-titulo);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 700;
  line-height: 1;
  color: var(--acento-luz);
}
.w-hechos dd {
  margin: .4rem 0 0;
  font-size: .9rem;
  line-height: 1.45;
  color: var(--sobre-oscuro);
}

/* Aduana: foto con bloque coral desplazado */

.w-foto-desfase {
  position: relative;
  margin: 0 clamp(.75rem, 2vw, 1.25rem) clamp(.75rem, 2vw, 1.25rem) 0;
}
.w-foto-desfase::before {
  content: "";
  position: absolute;
  inset: clamp(.75rem, 2vw, 1.25rem) clamp(-1.25rem, -2vw, -.75rem) clamp(-1.25rem, -2vw, -.75rem) clamp(.75rem, 2vw, 1.25rem);
  background: var(--acento);
}
.w-foto-desfase img {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--primario-claro);
}
.w-aviso {
  margin: 1.75rem 0 0;
  padding: 1.1rem 1.25rem;
  background: var(--acento-claro);
  border-left: 6px solid var(--acento);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
}
.w-aviso strong { color: var(--acento-tinta); }

/* Índice de destinos */

.w-destinos { padding-block: var(--ritmo); background: var(--superficie); }
.w-destinos .w-bloque__cabeza { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.w-destinos__seccion + .w-destinos__seccion { margin-top: clamp(2rem, 4vw, 3rem); }
.w-destinos__subtitulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1rem;
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
}
.w-destinos__subtitulo::before {
  content: "";
  flex: none;
  width: .7rem;
  height: .7rem;
  background: var(--acento);
}
/* Ocho países destacados en rejilla de cartel sobre papel: filetes de tinta, casillas
   blancas y coral al pasar; el listado completo vive en /europa/ */
.w-destinos__paises {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 0;
  padding: 2px;
  list-style: none;
  background: var(--tinta);
  counter-reset: pais;
}
.w-destinos__pais { min-width: 0; }
.w-destinos__pais a {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  min-height: clamp(9.5rem, 14vw, 12rem);
  padding: 1rem 1.25rem 1.15rem;
  background: var(--fondo);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
/* Bandera tipográfica: el distintivo internacional de matrícula, en óvalo como la pegatina
   de la trasera del camión */
.w-destinos__placa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 3.4rem;
  height: 2.2rem;
  padding: 0 .7rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: var(--superficie);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  transition: transform .25s ease;
}
.w-destinos__pais a:hover .w-destinos__placa { transform: rotate(-6deg); }
.w-destinos__pais-nombre {
  margin-top: auto;
  font-family: var(--f-titulo);
  font-size: clamp(1.45rem, 1.1rem + 1.3vw, 2.25rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
}
.w-destinos__pais-dato {
  margin-top: .35rem;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--tinta-suave);
  transition: color .2s ease;
}
.w-destinos__pais a:hover { background: var(--acento); color: var(--tinta); }
.w-destinos__pais a:hover .w-destinos__pais-dato { color: var(--tinta); }

.w-destinos__mas {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.5rem 0 0;
}

/* Acceso compacto al índice completo: dos barras plegadas a todo el ancho; al abrirse,
   cada comunidad o zona es un párrafo corrido en columnas ordenadas */
.w-destinos__acceso {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 2px solid var(--tinta);
}
.w-acceso { border-bottom: 1px solid var(--linea-suave); }
.w-acceso > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .25rem 1rem;
  padding: 1rem 2.75rem 1rem 0;
  position: relative;
  cursor: pointer;
  list-style: none;
  transition: color .15s ease;
}
.w-acceso > summary::-webkit-details-marker { display: none; }
.w-acceso > summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1.85rem;
  height: 1.85rem;
  margin-top: -.925rem;
  border: 2px solid var(--tinta);
  background:
    linear-gradient(var(--tinta), var(--tinta)) center / .8rem 2px no-repeat,
    linear-gradient(var(--tinta), var(--tinta)) center / 2px .8rem no-repeat;
  transition: transform .25s ease, background-color .2s ease;
}
.w-acceso > summary:hover::after { background-color: var(--acento-claro); }
.w-acceso[open] > summary::after { transform: rotate(45deg); background-color: var(--acento); }
.w-acceso__titulo {
  font-family: var(--f-titulo);
  font-size: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  color: var(--tinta);
}
.w-acceso > summary:hover .w-acceso__titulo { color: var(--primario); }
.w-acceso__cuenta {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.w-acceso__cuerpo {
  columns: 3 16rem;
  column-gap: clamp(1.5rem, 3vw, 2.5rem);
  padding: .25rem 0 1.5rem;
}
.w-acceso__grupo {
  margin: 0 0 1rem;
  padding-top: .6rem;
  border-top: 1px solid var(--linea-suave);
  font-size: .95rem;
  line-height: 1.6;
  color: var(--tinta-suave);
  break-inside: avoid;
}
.w-acceso__grupo a { color: var(--tinta); text-decoration-color: var(--linea-suave); }
.w-acceso__grupo a:hover { color: var(--primario); text-decoration-color: var(--acento); }
.w-acceso__rotulo {
  display: block;
  margin-bottom: .1rem;
  font-family: var(--f-titulo);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--tinta);
}
a.w-acceso__rotulo { text-decoration: none; }
a.w-acceso__rotulo:hover { color: var(--acento-tinta); }

/* Empresa */

.w-empresa__ficha {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--superficie);
  border-top: 6px solid var(--primario);
}
.w-empresa__ficha h3 { margin-bottom: .25rem; font-size: clamp(1.4rem, 1.2rem + .8vw, 1.85rem); }
.w-empresa__rol { margin: 0 0 1.5rem; font-size: .95rem; color: var(--tinta-suave); }
.w-empresa__telefono {
  display: inline-block;
  margin-bottom: .25rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.6rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--primario);
  text-decoration: none;
  white-space: nowrap;
}
.w-empresa__telefono:hover { color: var(--acento-tinta); }
.w-empresa__horario { margin: 0 0 1.5rem; font-size: .9rem; color: var(--tinta-suave); }
.w-empresa__lista {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--linea-suave);
}
.w-empresa__lista li {
  display: flex;
  gap: .75rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--linea-suave);
  font-size: .95rem;
  line-height: 1.45;
}
.w-empresa__lista svg {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  margin-top: .12rem;
  color: var(--acento-tinta);
}

/* La portada usa los componentes comunes en su propio contenedor */
.w-portada .w-hijas,
.w-portada .w-faq { border-top: 2px solid var(--tinta); }
.w-portada .w-cierre-marco { margin-top: clamp(2.5rem, 5vw, 4rem); }

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

.w-pie {
  padding-top: clamp(3rem, 6vw, 5rem);
  background: var(--tinta);
  color: var(--sobre-oscuro);
  font-size: .95rem;
  line-height: 1.55;
}
.w-pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 4vw, 3.5rem);
}
.w-pie .w-marca { color: var(--superficie); margin-bottom: 1.25rem; }
.w-pie .w-marca__nombre small { color: var(--acento-luz); }
.w-pie__intro p { max-width: 30rem; }
.w-pie__telefono { margin: 1.5rem 0 .2rem; }
.w-pie__telefono a {
  font-family: var(--f-titulo);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem);
  font-weight: 700;
  color: var(--superficie);
  text-decoration: none;
  white-space: nowrap;
}
.w-pie__telefono a:hover { color: var(--acento-luz); }
.w-pie__horario { margin: 0; font-size: .875rem; }
.w-pie h2 {
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid var(--linea-oscura);
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--acento-luz);
}
.w-pie ul { margin: 0; padding: 0; list-style: none; }
.w-pie li { margin-bottom: .4rem; break-inside: avoid; }
.w-pie a { color: var(--sobre-oscuro); text-decoration: none; }
.w-pie a:hover { color: var(--superficie); text-decoration: underline; text-decoration-color: var(--acento); }
.w-pie__destinos ul { columns: 2; column-gap: 1.5rem; }
.w-pie__legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 2rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-block: 1.5rem;
  border-top: 1px solid var(--linea-oscura);
  font-size: .85rem;
}
.w-pie__legal p { margin: 0; }
.w-pie__legal ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
.w-pie__legal li { margin: 0; }

/* Canales de contacto: banda de tres bloques planos que abre el pie en todas las páginas */
.w-canales {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.w-pie .w-canal {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 1rem;
  row-gap: .35rem;
  padding: clamp(1.1rem, 2.5vw, 1.6rem);
  background: var(--primario);
  color: var(--superficie);
  text-decoration: none;
  transition: background-color .2s ease;
}
.w-pie .w-canal--principal { background: var(--acento); color: var(--tinta); }
.w-canal__icono {
  grid-row: 1 / span 2;
  width: 2.5rem;
  height: 2.5rem;
  padding: .5rem;
  border: 2px solid currentColor;
}
.w-canal__rotulo {
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sobre-oscuro);
}
.w-canal--principal .w-canal__rotulo { color: var(--tinta); }
.w-canal__dato {
  font-family: var(--f-titulo);
  font-size: clamp(1.15rem, 1rem + .5vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
  color: inherit;
}
.w-canal__dato--tel {
  font-size: clamp(1.35rem, 1.1rem + .8vw, 1.8rem);
  font-weight: 700;
  white-space: nowrap;
}
.w-pie a.w-canal:hover { background: var(--primario-hondo); color: var(--superficie); text-decoration: none; }
.w-pie a.w-canal--principal:hover { background: var(--superficie); color: var(--tinta); }
.w-pie a.w-canal--principal:hover .w-canal__rotulo { color: var(--tinta); }

/* Contacto: la banda de canales gana cuerpo, es el bloque principal de la página */
body.pag-contacto .w-pie .w-canal { padding-block: clamp(1.5rem, 3.5vw, 2.5rem); }
body.pag-contacto .w-canal__dato { font-size: clamp(1.3rem, 1.05rem + .9vw, 1.75rem); }
body.pag-contacto .w-canal__dato--tel { font-size: clamp(1.5rem, 1.15rem + 1.2vw, 2.2rem); }

/* ==========================================================================
   Ajustes por ancho (al final para que manden sobre las reglas base)
   ========================================================================== */

@media (max-width: 76rem) {
  .w-menu__enlace { padding-inline: .5rem; font-size: 1.06rem; }
  .w-menu__enlace::before { left: .5rem; right: .5rem; }

  /* Municipio: con menos ancho, la foto baja bajo la ficha y el texto conserva su medida */
  body.pag-municipio .w-heroe__rejilla,
  body.pag-ciudad .w-heroe__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    grid-template-areas: "texto ficha" "texto foto";
    grid-template-rows: auto 1fr;
  }
  body.pag-municipio .w-heroe__foto .w-foto img,
  body.pag-ciudad .w-heroe__foto .w-foto img { aspect-ratio: 3 / 2; }
}

@media (max-width: 68rem) {
  :root { --cabecera: 4rem; }

  .w-menu-boton { display: inline-flex; margin-left: auto; }

  .w-menu {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
    margin-left: 0;
  }
  .js .w-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--cabecera));
    max-height: calc(100dvh - var(--cabecera));
    overflow-y: auto;
    padding: .5rem var(--margen) 1.5rem;
    background: var(--fondo);
    border-bottom: 2px solid var(--tinta);
  }
  .js .w-cabecera.is-abierta .w-menu { display: flex; }
  html:not(.js) .w-cabecera__barra { flex-wrap: wrap; padding-bottom: 1rem; }
  html:not(.js) .w-menu-boton { display: none; }

  .w-menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .w-menu__lista > li { border-bottom: 1px solid var(--linea-suave); }
  .w-menu__enlace {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: .85rem 0;
    font-size: 1.3rem;
  }
  .w-menu__enlace::before { left: 0; right: auto; width: 2rem; bottom: .45rem; }
  .w-submenu {
    position: static;
    min-width: 0;
    padding: 0 0 .75rem;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .w-submenu a { padding: .55rem 0 .55rem 1rem; font-size: 1rem; }
  .w-menu__cta { margin-top: 1.25rem; width: 100%; }
}

@media (max-width: 60rem) {
  /* Héroes interiores apilados: titular, ficha y foto, a ancho completo */
  .w-heroe__rejilla { display: flex; flex-direction: column; align-items: stretch; gap: 1.75rem; }
  .w-heroe__ficha { order: 1; }
  .w-heroe__foto { order: 2; }
  /* País y región: la foto antes que la ficha, como en escritorio */
  body[class*="pag-pais"] .w-heroe__foto,
  body.pag-region .w-heroe__foto { order: 1; }
  body[class*="pag-pais"] .w-heroe__ficha,
  body.pag-region .w-heroe__ficha { order: 2; }
  body.pag-region .w-heroe__foto .w-foto img { aspect-ratio: 16 / 9; }
  body[class*="pag-pais"] .w-heroe__foto .w-foto img { aspect-ratio: 16 / 9; }
  /* Banda de país: en vertical, filas etiqueta / valor */
  body[class*="pag-pais"] .w-datos { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); }
  body[class*="pag-pais"] .w-datos__fila {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 5fr);
    gap: .2rem 1rem;
    border-left: 0;
    border-bottom: 1px solid var(--linea-suave);
  }
  body[class*="pag-pais"] .w-datos__fila:last-child { border-bottom: 0; }

  /* Portada apilada: titular, texto, foto panorámica y la tira de datos al final */
  .w-portada-heroe__rejilla {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "ante" "h1" "texto" "foto" "datos";
  }
  .w-portada-heroe__foto { align-self: auto; min-height: 0; margin-top: 1.75rem; }
  .w-portada-heroe__foto img { height: auto; aspect-ratio: 16 / 9; }
  .w-datos.w-datos--banda { margin-top: 1.25rem; }

  /* Foto a sangre: el cartel de tinta pasa debajo de la foto */
  .w-sangre__foto img { min-height: 0; aspect-ratio: 16 / 9; }
  .w-sangre__marco { position: static; }
  .w-sangre__cartel { max-width: none; padding-inline: 0; }

  /* Secciones y preguntas: una sola columna real, titular encima */
  .w-seccion,
  .w-faq { grid-template-columns: minmax(0, 1fr); }
  .w-seccion > *,
  .w-faq > * { grid-column: 1; }
  .w-seccion > h2,
  .w-faq > h2 { grid-row: auto; position: static; margin-bottom: 1.25rem; }

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

  .w-bloque__cabeza { grid-template-columns: minmax(0, 1fr); }
  .w-dos,
  .w-dos--invertido { grid-template-columns: minmax(0, 1fr); }
  .w-dos--invertido .w-dos__lado { order: 2; }

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

  .w-banda { grid-template-columns: minmax(0, 1fr); }
  .w-banda__foto { min-height: 0; }
  .w-banda__foto img { height: auto; aspect-ratio: 16 / 9; }

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

  .w-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-pie__intro { grid-column: 1 / -1; }
  .w-canales { grid-template-columns: minmax(0, 1fr); }
}

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

  .w-marca__simbolo { width: 2.2rem; height: 2.2rem; }
  .w-marca__nombre { font-size: 1.15rem; }

  .w-migas ol { font-size: .8125rem; }
  .w-antetitulo { font-size: .75rem; letter-spacing: .12em; }
  .w-antetitulo::before { width: 1.5rem; }

  /* Ficha compacta: etiqueta encima del valor, nunca en dos columnas */
  .w-datos__fila { padding: .75rem 1rem; }
  .w-datos__fila::before { font-size: .85rem; }
  .w-datos dt { font-size: .7rem; letter-spacing: .08em; }
  .w-datos dd { font-size: 1.1rem; }
  body.pag-geo .w-datos__fila { padding: .65rem 1rem; }
  body.pag-geo .w-datos dd { font-size: 1.05rem; }
  .w-recorrido__titulo { font-size: clamp(2rem, 1rem + 4.2vw, 2.6rem); line-height: 1.06; }

  /* Tira compacta de cuatro datos: sin relleno coral, solo el filete coral de las casillas */
  .w-datos.w-datos--banda {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1.25rem;
    background: transparent;
    border-top: 2px solid var(--acento);
  }
  .w-datos--banda .w-datos__fila {
    min-height: 0;
    gap: .15rem;
    padding: .55rem .75rem .6rem;
    border-left: 2px solid var(--acento);
  }
  .w-datos--banda .w-datos__fila:nth-child(2n + 1) { border-left: 0; padding-left: 0; }
  .w-datos--banda .w-datos__fila:nth-child(n + 3) { border-top: 1px solid var(--linea-oscura); }
  .w-datos--banda dt { color: var(--sobre-oscuro); }
  .w-datos--banda dd { font-size: 1.1rem; color: var(--superficie); }

  /* Foto del héroe móvil: a todo el ancho y en panorámica, por encima de la tira de datos */
  .w-portada-heroe__foto { margin: 1.5rem 0 0; }
  .w-portada-heroe__foto img { aspect-ratio: 16 / 9; }

  .w-portada-heroe .w-antetitulo { font-size: .7rem; letter-spacing: .1em; }
  /* Aire entre líneas: los descendentes de «palets» no tocan la línea siguiente */
  .w-portada-heroe h1 { line-height: 1.08; letter-spacing: -.025em; }
  .w-heroe h1 { line-height: 1.08; }

  .w-heroe__accion { gap: .9rem; }
  .w-heroe__accion .w-boton { flex: 1 1 100%; }

  .w-cotizador { padding: 1rem .625rem 1.25rem; }
  .w-cotizador__marco,
  .w-cotizador > .cotizador-one { min-height: 30rem; }

  .w-foto img { aspect-ratio: 4 / 3; }

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

  .w-hijas__rejilla { grid-template-columns: minmax(0, 1fr); }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1rem; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta { grid-template-columns: minmax(0, 1fr); }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::before,
  .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,
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__texto { grid-column: 1; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__nombre { font-size: 1rem; }

  .w-hermanas { padding: 1.5rem 1rem; }
  .w-hermanas__enlaces { columns: 2; column-gap: 1rem; }
  .w-hermanas__enlaces a { font-size: .9rem; }
  .w-hermanas.is-plegable .w-hermanas__mas { display: inline-flex; }
  .w-hermanas.is-plegable:not(.is-desplegada) .w-hermanas__enlaces {
    max-height: 14.5rem;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(#000 65%, transparent);
    mask-image: linear-gradient(#000 65%, transparent);
  }

  .w-cierre-marco { padding: 2rem 1.25rem; }
  .w-cierre-marco .w-cta { width: 100%; }

  /* Los dos botones del héroe en una sola fila y más bajos: el primer pantallazo no se alarga */
  .w-portada-heroe__acciones { flex-wrap: nowrap; gap: .5rem; margin-top: 1.25rem; }
  .w-portada-heroe__acciones .w-boton {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 2.75rem;
    padding: .55rem .8rem;
    gap: .4rem;
    font-size: .95rem;
    white-space: nowrap;
  }
  .w-portada-heroe__acciones .w-boton--linea::after { content: none; }

  .w-pasos { grid-template-columns: minmax(0, 1fr); }
  .w-paso__num { font-size: 3rem; }

  .w-bases__limites,
  .w-hechos { grid-template-columns: minmax(0, 1fr); }
  .w-bases__limites div,
  .w-hechos div { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; padding: .7rem 0; }
  .w-bases__limites div + div,
  .w-hechos div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--linea-suave); }
  .w-hechos div + div { border-top-color: var(--linea-oscura); }
  .w-hechos dd { margin: 0; text-align: right; }
  .w-bases__limites dd { margin: 0; }
  .w-base__medida { font-size: .75rem; }

  .w-destinos__pais a { min-height: 7.5rem; padding: .85rem 1rem 1rem; }
  .w-destinos__pais-nombre { font-size: 1.35rem; }
  .w-destinos__pais-dato { font-size: .8125rem; }
  .w-destinos__mas .w-boton { flex: 1 1 100%; }
  .w-destinos__placa { min-width: 2.9rem; height: 1.9rem; font-size: .875rem; }
  .w-acceso__cuerpo { columns: 1; }

  .w-portada .w-faq,
  .w-portada .w-hijas { padding-block: 2.25rem; }

  .w-pie__rejilla { grid-template-columns: minmax(0, 1fr); }
  .w-pie__legal { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 22rem) {
  .w-marca__nombre { font-size: 1.02rem; }
  .w-menu-boton__texto { display: none; }
  .w-hermanas__enlaces { columns: 1; }
  .w-portada-heroe__acciones { flex-wrap: wrap; }
}

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

@media print {
  .w-cabecera, .w-cotizador, .w-pie, .w-cierre-marco__accion { display: none; }
  body { background: #fff; }
}