/* ==========================================================================
   Comparador de precios de transporte · hoja de estilo
   Paleta «Arena y verde oliva» · Instrument Serif + Instrument Sans
   Maqueta suiza: rejilla de 12 columnas, filetes finos, numeración,
   alineación a la izquierda y la tipografía como protagonista.
   Orden: 1 base · 2 cabecera · 3 botones · 4 componentes de la fábrica ·
   5 páginas interiores · 6 portada · 7 recorrido del cotizador · 8 pie ·
   9 ajustes por ancho (siempre al final)
   ========================================================================== */

/* 1 · BASE
   ------------------------------------------------------------------------ */

:root {
  --fondo: #EFE9DD;
  --superficie: #F8F5EE;
  --arena: #E4DCCB;
  --tinta: #2B2A20;
  --gris: #5E5B4C;
  --oliva: #5B6B2F;
  --oliva-tinta: #4A5726;
  --oliva-hondo: #343D1A;
  --oliva-papel: #E3E6D2;
  --oliva-claro: #E9ECDD;
  --acento: #D9822B;
  --acento-tinta: #8A480C;
  --acento-papel: #F3D9B8;
  --filete: #CBC2AE;
  --filete-suave: #DDD5C4;
  --pie-suave: #B9B29E;

  --serif: 'Instrument Serif', 'Iowan Old Style', Georgia, serif;
  --sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ancho: 1360px;
  --margen: clamp(20px, 4.5vw, 56px);
  --hueco: clamp(16px, 2.2vw, 32px);
  --cab-alto: 64px;
  --bloque: clamp(64px, 8vw, 120px);
  --curva: cubic-bezier(.2, .7, .2, 1);

  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --flecha-abajo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--cab-alto) + 20px);
}

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.01em;
  color: var(--tinta);
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  overflow-wrap: normal;
}

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

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

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

strong { font-weight: 600; }

:focus-visible {
  outline: 2px solid var(--acento-tinta);
  outline-offset: 3px;
  border-radius: 1px;
}

::selection { background: var(--acento-papel); color: var(--tinta); }

.r {
  width: 100%;
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}

.rej {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
}
.rej > * { grid-column: 1 / -1; min-width: 0; }

.saltar {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 16px;
  background: var(--tinta);
  color: var(--fondo);
  font-weight: 600;
  text-decoration: none;
}
.saltar:focus { top: 12px; color: var(--fondo); }

.rotulo {
  margin: 0;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
}

.ico {
  width: 28px;
  height: 28px;
  flex: none;
  color: var(--oliva);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 2 · CABECERA Y MENÚ
   ------------------------------------------------------------------------ */

.cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(239, 233, 221, .95);
  border-bottom: 1px solid var(--filete);
  transition: box-shadow .3s var(--curva), border-color .3s var(--curva);
}
@supports (backdrop-filter: blur(8px)) {
  .cab { background: rgba(239, 233, 221, .86); backdrop-filter: saturate(1.3) blur(10px); }
}
.cab--movida { border-bottom-color: var(--tinta); box-shadow: 0 10px 30px -24px rgba(43, 42, 32, .6); }

.cab__in {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: var(--cab-alto);
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  color: var(--tinta);
  text-decoration: none;
}
.marca:hover { color: var(--tinta); }
.marca__signo { width: 32px; height: 32px; flex: none; transition: transform .35s var(--curva); }
.marca:hover .marca__signo { transform: rotate(-4deg); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marca__l1 { font-family: var(--serif); font-size: 1.5rem; letter-spacing: -.01em; }
.marca__l2 {
  margin-top: 3px;
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}

.cab__boton-menu {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.cab__hamb {
  position: relative;
  width: 16px;
  height: 10px;
}
.cab__hamb::before, .cab__hamb::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transition: transform .3s var(--curva), top .3s var(--curva);
}
.cab__hamb::before { top: 1px; }
.cab__hamb::after { top: 7.5px; }
.cab--abierta .cab__hamb::before { top: 4.25px; transform: rotate(45deg); }
.cab--abierta .cab__hamb::after { top: 4.25px; transform: rotate(-45deg); }

.menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--cab-alto));
  max-height: calc(100dvh - var(--cab-alto));
  overflow-y: auto;
  padding: 4px var(--margen) 28px;
  background: var(--fondo);
  border-bottom: 1px solid var(--tinta);
}
.cab--abierta .menu { display: block; }

.menu__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: menu;
}
.menu__lista > li { border-bottom: 1px solid var(--filete); counter-increment: menu; }
.menu__lista > li > a,
.menu__sub summary {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 0;
  font-family: var(--serif);
  font-size: 1.375rem;
  line-height: 1.15;
  color: var(--tinta);
  text-decoration: none;
  cursor: pointer;
}
.menu__lista > li > a::before,
.menu__sub summary::before {
  content: counter(menu, decimal-leading-zero);
  min-width: 1.5em;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}
.menu__lista > li > a:hover,
.menu__sub summary:hover { color: var(--oliva-tinta); }

.menu__sub summary { list-style: none; }
.menu__sub summary::-webkit-details-marker { display: none; }
.menu__sub summary::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-left: auto;
  align-self: center;
  background: currentColor;
  -webkit-mask: var(--flecha-abajo) center / contain no-repeat;
  mask: var(--flecha-abajo) center / contain no-repeat;
  transition: transform .25s var(--curva);
}
.menu__sub details[open] summary::after { transform: rotate(180deg); }
.menu__sub ul {
  list-style: none;
  margin: 0;
  padding: 0 0 12px calc(1.5em * .75 + 14px);
}
.menu__sub ul a {
  display: block;
  padding: 7px 0;
  font-size: 1rem;
  color: var(--tinta);
  text-decoration: none;
}
.menu__sub ul a:hover { color: var(--oliva-tinta); }

.menu .boton--cab { margin-top: 22px; width: 100%; justify-content: center; }

/* Página actual (js/web.js marca el enlace del menú con aria-current) */
.menu__lista a[aria-current="page"],
.menu__sub:has(a[aria-current="page"]) summary { color: var(--oliva-tinta); }
.menu__lista > li > a[aria-current="page"]::before { color: var(--oliva-tinta); }

/* 3 · BOTONES
   Regla única: el oliva es la marca y la acción principal («Calcular
   precio») va en oliva con papel claro, en todas las páginas. El ocre se
   reserva para el secundario (papel ocre), estados y numeraciones; el
   terciario es de línea.
   ------------------------------------------------------------------------ */

.boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: .95em 1.35em;
  border: 1px solid var(--oliva);
  border-radius: 2px;
  background: var(--oliva);
  color: var(--superficie);
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .25s var(--curva), border-color .25s var(--curva), color .25s var(--curva);
}
.boton::after,
.w-cta::after {
  content: "";
  width: 15px;
  height: 15px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .3s var(--curva);
}
.boton:hover,
.w-cta:hover { background: var(--tinta); border-color: var(--tinta); color: var(--fondo); }
.boton:hover::after,
.w-cta:hover::after { transform: translateX(3px); }

.boton--acento { background: var(--acento-papel); border-color: var(--acento); color: var(--tinta); }
.boton--linea { background: transparent; border-color: var(--tinta); color: var(--tinta); }
/* El icono no suma alto: secundario y principal miden lo mismo */
.boton--linea .ico { width: 18px; height: 18px; margin-block: -1.5px; color: var(--oliva-tinta); }
.boton--linea:hover .ico { color: var(--acento-papel); }
.boton--sin-flecha::after { display: none; }

.enlace-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.enlace-tel .ico { width: 18px; height: 18px; color: var(--acento-tinta); }
.enlace-tel:hover { color: var(--oliva-tinta); }

/* 4 · COMPONENTES DE LA FÁBRICA
   ------------------------------------------------------------------------ */

/* Migas */
.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 0;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: var(--gris);
}
.w-migas li { display: inline-flex; align-items: baseline; min-width: 0; }
.w-migas li + li::before {
  content: "/";
  margin: 0 .6em;
  color: var(--gris);
}
.w-migas a { color: var(--gris); text-decoration-color: var(--filete); }
.w-migas a:hover { color: var(--oliva-tinta); text-decoration-color: currentColor; }
.w-migas [aria-current] { color: var(--tinta); font-weight: 500; }

/* Antetítulo */
.w-antetitulo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 18px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.w-antetitulo::before {
  content: "";
  width: 9px;
  height: 9px;
  flex: none;
  background: var(--acento);
}

/* Entradilla */
.w-entradilla,
.entradilla {
  max-width: 31em;
  font-size: clamp(1.1875rem, 1.12rem + .3vw, 1.25rem);
  line-height: 1.5;
  color: var(--tinta);
}
.w-entradilla p { margin-bottom: .7em; }
.w-entradilla p:last-child { margin-bottom: 0; }

/* Ficha de datos */
.w-datos {
  margin: 0;
  border-top: 2px solid var(--tinta);
}
.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, 10.5rem) minmax(0, 1fr);
  gap: 4px 16px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--filete);
}
.w-datos dt {
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}
.w-datos dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.3125rem;
  line-height: 1.2;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* Cotizador: solo el contenedor; el formulario es común y no se toca */
.w-cotizador {
  width: 100%;
  max-width: 820px;
  min-width: 0;
  margin-inline: auto;
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
}
.w-cotizador__titulo {
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gris);
  text-wrap: balance;
}
/* Raíz del formulario común: ocupa todo el ancho de la columna (nada de
   márgenes propios que lo estrechen en móvil); dentro no entra ninguna regla */
.w-cotizador > .cotizador-one,
.w-cotizador > [data-cotizador-one],
.w-cotizador > iframe {
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

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

/* Foto */
.w-foto { margin: 0; }
.w-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--arena);
}
/* Los pies que pone la fábrica repiten el texto alternativo («Un camión
   cruza…»): no aportan nada al lector y no se muestran */
.w-foto figcaption { display: none; }

/* Secciones numeradas (interiores y portada comparten la maqueta) */
.w-seccion,
.w-faq,
.sec {
  counter-increment: sec;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--hueco);
  row-gap: 0;
  align-items: start;
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
}
.w-seccion > *,
.w-faq > * { grid-column: 1 / -1; min-width: 0; }

.w-seccion > h2,
.w-faq > h2,
.sec__cab h2,
.w-hijas__titulo,
.w-hermanas__titulo {
  font-size: clamp(1.875rem, 1.35rem + 1.7vw, 2.75rem);
  line-height: 1.04;
  margin: 0 0 26px;
}
.w-seccion > h2::before,
.w-faq > h2::before,
.sec__cab h2::before,
.w-hijas__titulo::before,
.w-hermanas__titulo::before {
  content: counter(sec, decimal-leading-zero);
  display: block;
  margin-bottom: 14px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}

.w-seccion > p,
.w-seccion > ul,
.w-seccion > ol,
.w-seccion > blockquote,
.w-seccion > h3 { max-width: 40em; }

.w-seccion > h3 {
  margin: 1.5em 0 .45em;
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
  line-height: 1.12;
}
.w-seccion > h2 + h3 { margin-top: 0; }

.w-seccion ul,
.sec ul.lista {
  list-style: none;
  margin: 0 0 1.2em;
  padding: 0;
}
.w-seccion ul > li,
.sec ul.lista > li {
  position: relative;
  padding: 0 0 0 1.4em;
  margin-bottom: .5em;
}
.w-seccion ul > li::before,
.sec ul.lista > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .78em;
  width: .7em;
  height: 1px;
  background: var(--acento-tinta);
}
.w-seccion ol {
  margin: 0 0 1.2em;
  padding-left: 1.6em;
}
.w-seccion ol > li { margin-bottom: .5em; padding-left: .2em; }
.w-seccion ol > li::marker { font-weight: 600; color: var(--acento-tinta); font-variant-numeric: tabular-nums; }

.w-seccion blockquote {
  margin: 1.4em 0;
  padding: 2px 0 2px 22px;
  border-left: 2px solid var(--acento);
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.25;
}

/* Tablas: scroll horizontal propio en móvil */
.w-tabla {
  margin: 8px 0 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--tinta);
  scrollbar-width: thin;
  scrollbar-color: var(--oliva) var(--arena);
}
.w-tabla:last-child { margin-bottom: 0; }
.w-tabla table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.w-tabla th {
  padding: 12px 18px 10px 0;
  border-bottom: 1px solid var(--tinta);
  background: transparent;
  color: var(--gris);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
  white-space: nowrap;
}
.w-tabla td {
  padding: 14px 18px 14px 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  vertical-align: top;
}
.w-tabla td:first-child { font-weight: 600; }
.w-tabla tbody tr { transition: background-color .2s var(--curva); }
.w-tabla tbody tr:hover { background: var(--superficie); }

/* Preguntas frecuentes */
.w-faq__item { border-top: 1px solid var(--filete); }
.w-faq__item:last-child { border-bottom: 1px solid var(--filete); }
.w-faq__item summary {
  position: relative;
  display: block;
  padding: 18px 48px 18px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.12rem + .45vw, 1.5rem);
  line-height: 1.2;
  color: var(--tinta);
  text-wrap: balance;
  hyphens: none;
  transition: color .2s var(--curva);
}
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::before,
.w-faq__item summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--tinta);
  transition: transform .3s var(--curva);
}
.w-faq__item summary::after { transform: rotate(90deg); }
.w-faq__item[open] summary::after { transform: rotate(0deg); }
.w-faq__item summary:hover { color: var(--oliva-tinta); }
.w-faq__resp { max-width: 40em; padding: 0 0 22px; }

/* Páginas hijas: tarjetas numeradas sobre filete */
.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  gap: 0 var(--hueco);
  counter-reset: hija;
}
.w-tarjeta {
  counter-increment: hija;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding: 16px 34px 26px 0;
  border-top: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .25s var(--curva);
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}
.w-tarjeta::after {
  content: "";
  position: absolute;
  top: 18px;
  right: 4px;
  width: 16px;
  height: 16px;
  background: var(--tinta);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .3s var(--curva), background-color .25s var(--curva);
}
.w-tarjeta__nombre {
  font-family: var(--serif);
  font-size: 1.5rem;
  line-height: 1.1;
  text-wrap: balance;
  hyphens: none;
  transition: color .2s var(--curva);
}
.w-tarjeta__texto {
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--gris);
}
.w-tarjeta:hover { color: var(--tinta); border-top-color: var(--tinta); box-shadow: inset 0 2px 0 var(--oliva); }
.w-tarjeta:hover .w-tarjeta__nombre { color: var(--oliva-tinta); }
.w-tarjeta:hover::after { transform: translateX(4px); background: var(--oliva); }

/* Muchas hijas: 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: 12px 28px 16px 0; gap: 3px; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::after { top: 13px; width: 13px; height: 13px; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__nombre { font-size: 1.1875rem; }
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__texto { font-size: .875rem; }

/* Hermanas: índice en columnas */
.w-hermanas__enlaces {
  column-width: 12.5rem;
  column-gap: var(--hueco);
}
.w-hermanas__enlaces > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--filete-suave);
  break-inside: avoid;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  transition: color .2s var(--curva), padding .25s var(--curva);
}
.w-hermanas__enlaces > a::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: none;
  align-self: center;
  background: var(--gris);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .25s var(--curva), background-color .2s var(--curva);
}
.w-hermanas__enlaces > a:hover { color: var(--oliva-tinta); padding-left: 4px; }
.w-hermanas__enlaces > a:hover::after { background: var(--oliva); transform: translateX(2px); }

.w-hermanas__mas {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid var(--tinta);
  border-radius: 2px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.w-hermanas__mas::after {
  content: "";
  width: 13px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--flecha-abajo) center / contain no-repeat;
  mask: var(--flecha-abajo) center / contain no-repeat;
  transition: transform .25s var(--curva);
}
.w-hermanas--plegable .w-hermanas__mas { display: inline-flex; }
.w-hermanas--abierta .w-hermanas__mas::after { transform: rotate(180deg); }
.w-hermanas--plegable:not(.w-hermanas--abierta) .w-hermanas__enlaces > a:nth-child(n+9) { display: none; }

/* Cierre */
.w-cierre {
  padding-top: 22px;
  border-top: 2px solid var(--tinta);
}
.w-cierre p {
  max-width: 34ch;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.2rem + 1.5vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.01em;
  text-wrap: balance;
  hyphens: none;
}
.w-cierre p + p { margin-top: .5em; }

/* 5 · PÁGINAS INTERIORES
   ------------------------------------------------------------------------ */

/* Orden de los bloques según el nivel del árbol ({{CLASE}} de la fábrica,
   puesta en <main class="pag …">: las reglas «.pag-x > …» dependen de
   ello: pag-servicio, pag-contacto, pag-geo + pag-region / pag-continente /
   pag-division / pag-pais-europa / pag-municipio). El HTML es uno; cambia
   la composición:
     región y Europa .. cabecera salvia, foto junto al H1, ficha en fila y,
                        debajo, la rejilla de provincias o países en salvia
                        honda con texto oscuro
     provincia y país . cabecera arena con ficha y foto; municipios en salvia
     municipio ........ cabecera compacta con dato grande y el cotizador debajo
     servicio ......... H1 a todo el ancho, foto en banda; modalidades en oliva
     contacto ......... cabecera con ficha y foto; guía del cotizador debajo */
.pag {
  display: flex;
  flex-direction: column;
  counter-reset: sec;
}
.pag > * { order: 7; width: 100%; min-width: 0; }
.pag > .pag-cab { order: 0; }
.pag > .w-hijas { order: 1; }
.pag > .pag-cotizar { order: 2; }
.pag > .pag-doc { order: 3; }
.pag > .pag-modos { order: 4; }
.pag > .w-hermanas { order: 5; }
.pag > .w-cierre { order: 6; }
.pag-servicio > .pag-modos { order: 1; }
.pag-servicio > .w-hijas,
.pag-municipio > .w-hijas { order: 4; }

.pag > .w-hijas,
.pag > .w-hermanas,
.pag > .w-cierre {
  max-width: calc(var(--ancho) + 2 * var(--margen));
  margin-inline: auto;
  padding-inline: var(--margen);
}
.pag > .w-hijas,
.pag > .w-hermanas,
.pag > .pag-modos { margin-top: var(--bloque); }
.pag > .w-hijas .w-hijas__titulo,
.pag > .w-hermanas .w-hermanas__titulo {
  padding-top: 18px;
  border-top: 1px solid var(--tinta);
}
/* Índices sin número (cambian de sitio según el nivel): filete oliva */
.pag > .w-hijas .w-hijas__titulo::before,
.pag > .w-hermanas .w-hermanas__titulo::before {
  content: "";
  width: 28px;
  height: 3px;
  margin-bottom: 16px;
  background: var(--oliva);
}
.pag > .w-hermanas .w-hermanas__titulo { font-size: clamp(1.625rem, 1.25rem + 1.2vw, 2.25rem); }

/* Hijas justo bajo la cabecera (geografía): banda a todo el ancho con
   filas compactas. El fondo sale con una sombra para no desbordar. */
.pag-geo:not(.pag-municipio) > .w-hijas {
  margin-top: 0;
  padding-block: clamp(32px, 4.5vw, 60px);
  background: var(--oliva-claro);
  box-shadow: 0 0 0 100vmax var(--oliva-claro);
  clip-path: inset(0 -100vmax);
}
.pag-geo:not(.pag-municipio) > .w-hijas .w-hijas__titulo {
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem);
  margin-bottom: 18px;
}
.pag-geo:not(.pag-municipio) .w-hijas__rejilla {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
}
.pag-geo:not(.pag-municipio) .w-tarjeta { padding: 12px 30px 16px 0; gap: 3px; border-top-color: var(--pie-suave); }
.pag-geo:not(.pag-municipio) .w-tarjeta::after { top: 14px; }
.pag-geo:not(.pag-municipio) .w-tarjeta__nombre { font-size: 1.3125rem; }
.pag-geo:not(.pag-municipio) .w-tarjeta__texto { font-size: .875rem; color: var(--gris); }

/* Región y Europa: la rejilla de provincias o países es la puerta del
   árbol. Papel salvia algo más hondo que la cabecera, filete fuerte y
   SIEMPRE texto oscuro (nunca texto claro: si el fondo no llegara a
   aplicarse, seguiría leyéndose sobre arena). Sin animaciones de entrada:
   el índice está visible desde el primer pintado. */
.pag.pag-region > .w-hijas,
.pag.pag-continente > .w-hijas {
  background: var(--oliva-papel);
  box-shadow: 0 0 0 100vmax var(--oliva-papel);
  border-top: 2px solid var(--tinta);
  color: var(--tinta);
}
.pag > .w-hijas,
.pag > .w-hijas .w-tarjeta { opacity: 1; transform: none; animation: none; }
.pag.pag-region > .w-hijas .w-hijas__titulo,
.pag.pag-continente > .w-hijas .w-hijas__titulo { color: var(--tinta); border-top: 0; padding-top: 0; }
.pag.pag-region > .w-hijas .w-tarjeta,
.pag.pag-continente > .w-hijas .w-tarjeta { color: var(--tinta); border-top-color: var(--pie-suave); }
.pag.pag-region > .w-hijas .w-tarjeta__nombre,
.pag.pag-continente > .w-hijas .w-tarjeta__nombre { color: var(--tinta); }
.pag.pag-region > .w-hijas .w-tarjeta__texto,
.pag.pag-continente > .w-hijas .w-tarjeta__texto { color: var(--gris); }
.pag.pag-region > .w-hijas .w-tarjeta:hover,
.pag.pag-continente > .w-hijas .w-tarjeta:hover { border-top-color: var(--tinta); box-shadow: inset 0 2px 0 var(--oliva); }
.pag.pag-region > .w-hijas .w-tarjeta:hover .w-tarjeta__nombre,
.pag.pag-continente > .w-hijas .w-tarjeta:hover .w-tarjeta__nombre { color: var(--oliva-tinta); }

/* Banda de modalidades (rótulo fijo, igual en todas las páginas) */
.pag-modos__rotulo { margin-bottom: 14px; }
.pag-modos__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-top: 2px solid var(--tinta);
}
.pag-modos__lista a {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  align-content: start;
  gap: 2px 14px;
  height: 100%;
  padding: 14px 8px 14px 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .25s var(--curva), color .2s var(--curva);
}
.pag-modos__lista .ico { grid-row: 1 / span 2; width: 26px; height: 26px; }
.pag-modos__nombre { font-family: var(--serif); font-size: 1.375rem; line-height: 1.1; text-wrap: balance; }
.pag-modos__dato { font-size: .875rem; line-height: 1.35; color: var(--gris); }
.pag-modos__lista a:hover { color: var(--oliva-tinta); }

/* Servicio: la banda sube bajo la cabecera, en oliva hondo (fondo y texto
   claro en el mismo selector). En contacto queda en su sitio, en arena. */
.pag-servicio > .pag-modos {
  margin-top: 0;
  padding-block: clamp(26px, 3.5vw, 44px);
  background: var(--oliva-tinta);
  color: var(--superficie);
}
.pag-servicio > .pag-modos .rotulo { color: var(--oliva-papel); }
.pag-servicio > .pag-modos .pag-modos__lista { border-top-color: var(--oliva-papel); }
.pag-servicio > .pag-modos .pag-modos__lista a { color: var(--superficie); border-bottom-color: #6B7546; }
.pag-servicio > .pag-modos .pag-modos__lista .ico { color: var(--acento-papel); }
.pag-servicio > .pag-modos .pag-modos__dato { color: var(--oliva-papel); }
.pag-servicio > .pag-modos .pag-modos__lista a:hover { color: var(--acento-papel); background: var(--oliva-hondo); }
.pag > .w-cierre {
  margin-top: var(--bloque);
  border-top: 0;
  padding-top: 0;
}
.pag > .w-cierre > * { padding-top: 22px; border-top: 2px solid var(--tinta); }
.pag > .w-cierre > * + * { padding-top: 0; border-top: 0; }

/* Héroe de página */
.pag-cab {
  position: relative;
  padding: 18px 0 clamp(36px, 4.5vw, 64px);
  border-bottom: 1px solid var(--tinta);
}
.pag-cab__rej {
  row-gap: 32px;
  margin-top: clamp(28px, 5vw, 64px);
  align-items: stretch;
}
/* Columna de texto: las acciones van pegadas a la entradilla (nada de
   margin-top:auto, que dejaba un hueco muerto junto a ficha y foto) */
.pag-cab__texto { display: flex; flex-direction: column; align-self: start; min-width: 0; }
.pag-cab h1 {
  max-width: 20ch;
  margin: 0 0 .45em;
  font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
}
.pag-cab .w-entradilla { max-width: 34em; }
.pag-cab__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
  margin: 0;
  padding-top: 28px;
}
.pag-cab__ficha .w-datos {
  padding: 4px 22px 10px;
  background: var(--superficie);
  border-top: 3px solid var(--oliva);
}
.pag-cab__ficha .w-datos__fila:last-child { border-bottom: 0; }
.pag-cab__ficha:not(:has(*)) { display: none; }

/* Columna lateral: ficha arriba (alineada con el antetítulo) y, debajo, la
   foto de la página, que en escritorio se estira hasta el pie de la
   cabecera: ni hueco crema bajo la ficha ni dos lugares con la misma
   primera pantalla. Patrón único para servicios y lugares; en contacto
   solo la ficha. */
.pag-cab__lado { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.pag-cab__lado .w-foto { margin: 0; }
.pag-cab__lado .w-foto img { aspect-ratio: 16 / 10; }
.pag-cab__lado:not(:has(.w-datos)):not(:has(.w-foto)) { display: none; }

/* Variantes de la cabecera según el nivel. Norma de fondo para todo el
   sitio: salvia en los hubs (región y Europa), arena en todo lo demás
   (provincia, país, municipio, servicio y contacto). Moldes (en ≥1000 px,
   ver ajustes al final): servicio, H1 a 12 columnas y foto en banda;
   región y Europa, foto junto al H1 y ficha tendida en fila; provincia y
   país, 7/5 con ficha y foto; municipio, compacto con dato grande. */
.pag-servicio .pag-cab h1 { font-size: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem); }

.pag-region .pag-cab,
.pag-continente .pag-cab {
  padding-bottom: clamp(28px, 3.5vw, 48px);
  background: var(--oliva-claro);
  border-bottom: 0;
}
.pag-region .pag-cab__rej,
.pag-continente .pag-cab__rej { margin-top: clamp(22px, 3.5vw, 44px); }
.pag-region .pag-cab__acciones,
.pag-continente .pag-cab__acciones { padding-top: 20px; }

.pag-division .pag-cab,
.pag-pais-europa .pag-cab { border-bottom: 0; }

.pag-municipio .pag-cab { padding-bottom: clamp(24px, 3vw, 40px); }
.pag-municipio .pag-cab__rej { margin-top: clamp(18px, 3vw, 36px); row-gap: 22px; }
.pag-municipio .pag-cab h1 { max-width: 24ch; font-size: clamp(2.125rem, 1.45rem + 2.4vw, 3.5rem); }
.pag-municipio .pag-cab .w-entradilla { font-size: 1.1875rem; }
.pag-municipio .pag-cab__acciones { padding-top: 18px; }
.pag-municipio > .pag-cotizar { padding-top: clamp(24px, 3vw, 40px); }
/* Municipio: héroe compacto sin foto (la del silo ya sale en provincia) y
   el primer dato de la ficha en grande, como cifra de cabecera */
.pag-municipio .pag-cab__lado .w-foto { display: none; }
.pag-municipio .pag-cab__ficha .w-datos { border-top: 0; box-shadow: inset 0 3px 0 var(--acento); }
.pag-municipio .pag-cab__ficha .w-datos__fila:first-child {
  grid-template-columns: minmax(0, 1fr);
  padding: 18px 0 20px;
  border-bottom: 1px solid var(--tinta);
}
.pag-municipio .pag-cab__ficha .w-datos__fila:first-child dd {
  font-size: clamp(2.5rem, 1.7rem + 2.6vw, 4rem);
  line-height: .95;
  letter-spacing: -.02em;
  color: var(--oliva-tinta);
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
}

/* Contacto: la foto acompaña a la ficha (sin media pantalla vacía) y la
   guía del cotizador sube a ocupar el lugar de la banda de modalidades */
.pag-contacto > .pag-cotizar { order: 1; }


/* Banda del cotizador */
.pag-cotizar {
  padding-block: clamp(44px, 6vw, 88px);
  row-gap: 36px;
}
.pag-cotizar__widget { order: -1; }
.pag-cotizar__lema {
  margin: 14px 0 22px;
  max-width: 16ch;
  font-family: var(--serif);
  font-size: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);
  line-height: 1.08;
  text-wrap: balance;
  hyphens: none;
}
.pasos-mini {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  counter-reset: paso;
}
.pasos-mini li {
  counter-increment: paso;
  display: flex;
  gap: 14px;
  padding: 10px 0;
  border-top: 1px solid var(--filete);
  font-size: .9375rem;
  line-height: 1.4;
}
.pasos-mini li:last-child { border-bottom: 1px solid var(--filete); }
.pasos-mini li::before {
  content: counter(paso, decimal-leading-zero);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.85;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}
.pag-cotizar__nota { font-size: .875rem; color: var(--gris); }

/* Sin widget en la página: la guía ocupa el ancho y el botón que ponga la
   fábrica queda debajo de los pasos, nunca suelto en una columna vacía */
.pag-cotizar__widget:not(:has(*)) { display: none; }
.pag-cotizar:not(:has(.w-cotizador)) { row-gap: 0; }
.pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__widget { order: 0; margin-top: 4px; }
.pag-cotizar:not(:has(.w-cotizador)) .w-cta-linea { margin: 0; }

/* Documento */
.pag-doc {
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vw, 104px);
}
.pag-doc > :not(.w-seccion):not(.w-faq) { max-width: 44rem; }
.pag-doc > .w-cta-linea { margin: 0; }

.pag-final {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 32px;
}

/* 6 · PORTADA
   ------------------------------------------------------------------------ */

.ini { counter-reset: sec; }

.ini-heroe {
  padding-block: clamp(28px, 5vw, 72px) clamp(52px, 7vw, 104px);
  row-gap: 40px;
}
.ini-heroe h1 {
  margin: 0 0 .42em;
  font-size: clamp(2.125rem, 1.2rem + 4vw, 4.5rem);
  line-height: .98;
  letter-spacing: -.02em;
}
.ini-heroe__pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: 30px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
  font-size: .9375rem;
}
.ini-heroe__baja {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
}
.ini-heroe__baja::after {
  content: "";
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: var(--flecha-abajo) center / contain no-repeat;
  mask: var(--flecha-abajo) center / contain no-repeat;
  transition: transform .3s var(--curva);
}
.ini-heroe__baja:hover { color: var(--oliva-tinta); }
.ini-heroe__baja:hover::after { transform: translateY(3px); }

.ini-heroe__cot { min-width: 0; border-top: 2px solid var(--tinta); }
.ini-heroe__rotulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding: 12px 0 18px;
}
.ini-heroe__rotulo .rotulo:last-child { color: var(--acento-tinta); }
/* Sin márgenes propios: el formulario arranca en la misma línea que la
   regla y el rótulo «Cotizador», en todos los anchos */
.ini-heroe .w-cotizador { max-width: none; margin-inline: 0; padding: 0; border-top: 0; }
.ini-heroe .w-cotizador > .cotizador-one,
.ini-heroe .w-cotizador > [data-cotizador-one],
.ini-heroe .w-cotizador > iframe { margin-inline: 0; }

/* Cifras de la ficha: panel oliva dentro de la retícula */
.cifras {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3.5vw, 44px) clamp(20px, 3vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px var(--hueco);
  background: var(--oliva-tinta);
  color: var(--superficie);
}
.cifras li { padding-top: 14px; border-top: 1px solid var(--oliva-papel); min-width: 0; }
/* Número en serif y unidad en sans, sobre la misma línea base y con
   tamaño fijo: no compiten y no se aprietan */
.cifras__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .4rem;
  font-family: var(--serif);
  font-size: clamp(2.5rem, 1.6rem + 1.9vw, 3.75rem);
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--superficie);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.cifras__num small {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-papel);
}
.cifras li:first-child .cifras__num { color: var(--acento-papel); }
.cifras__txt {
  display: block;
  margin-top: 10px;
  font-size: .875rem;
  line-height: 1.4;
  color: var(--oliva-papel);
  text-wrap: balance;
}

/* Secciones de portada */
.ini > .r + .r,
.ini > .r + .franja,
.ini > .franja + .r,
.ini > .ini-foto + .r,
.ini > .r + .ini-foto { margin-top: var(--bloque); }
.ini > .ini-heroe + .r { margin-top: 0; }
.modos__nota { margin-top: 28px; }
.tablas-ini .rotulo { margin-bottom: 12px; }

.sec__cab { grid-column: 1 / -1; min-width: 0; }
.sec__cuerpo { grid-column: 1 / -1; min-width: 0; }
.sec__cuerpo > p { max-width: 40em; }
.sec__intro { font-size: clamp(1.1875rem, 1.12rem + .3vw, 1.25rem); line-height: 1.5; }

/* Pasos */
.pasos {
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--hueco);
  counter-reset: paso;
}
.pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 18px;
  padding: 22px 0 26px;
  border-top: 1px solid var(--filete);
}
.pasos .ico { grid-row: 1 / span 2; margin-top: 2px; }
.pasos h3 { font-size: 1.5rem; line-height: 1.1; }
.pasos h3::before {
  content: counter(paso, decimal-leading-zero) "  ";
  white-space: pre;
  font-family: var(--sans);
  font-size: .75rem;
  font-weight: 600;
  vertical-align: .35em;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}
.pasos p { font-size: .9688rem; color: var(--tinta); }

/* Foto a todo ancho. El contenedor lleva la misma foto de fondo: si la
   imagen tarda o falla, nunca queda una caja de color plano. */
.ini-foto { margin: 0; background: var(--arena) url("/img/banco-palets-1-768.webp") center / cover no-repeat; }
.ini-foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--arena);
}

/* Modalidades */
.modos {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  border-top: 2px solid var(--tinta);
}
.modo {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 16px;
  padding: 20px 36px 22px 0;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  text-decoration: none;
  transition: background-color .25s var(--curva), padding .3s var(--curva);
}
.modo .ico { grid-row: 1 / span 3; }
.modo__nombre { font-family: var(--serif); font-size: 1.625rem; line-height: 1.08; }
.modo__limites { font-size: .9375rem; line-height: 1.45; }
.modo__plazo { font-size: .875rem; font-weight: 600; color: var(--acento-tinta); }
.modo::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 26px;
  width: 16px;
  height: 16px;
  background: var(--tinta);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .3s var(--curva);
}
.modo:hover { color: var(--tinta); background: var(--superficie); }
.modo:hover .modo__nombre { color: var(--oliva-tinta); }
.modo:hover::after { transform: translateX(4px); }

/* Franja de color con bloque asimétrico */
.franja {
  background: var(--oliva-claro);
  border-block: 1px solid var(--oliva);
  padding-block: var(--bloque);
}
.duo { row-gap: 36px; align-items: start; }
.duo .sec { border-top: 0; padding-top: 0; }
.duo__foto { margin: 0; background: var(--arena) url("/img/banco-paqueteria-3-768.webp") center / cover no-repeat; }
.duo__foto img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--arena);
}

/* Cita */
.cita {
  margin: 0;
  padding: 0;
}
.cita p {
  max-width: 22ch;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3.75rem);
  line-height: 1.04;
  letter-spacing: -.015em;
  text-wrap: balance;
  hyphens: none;
}
.cita::before {
  content: "";
  display: block;
  width: 56px;
  height: 6px;
  margin-bottom: 26px;
  background: var(--acento);
}
.cita-bloque { row-gap: 28px; align-items: end; }
.ini > .franja + .r.cita-bloque { margin-top: clamp(56px, 6vw, 88px); }
.ini > .cita-bloque + .r { margin-top: clamp(56px, 6vw, 88px); }
.cita__accion {
  padding-top: 16px;
  border-top: 1px solid var(--tinta);
}
.cita__accion p { margin-bottom: 20px; max-width: 30em; font-size: 1rem; line-height: 1.5; }

/* Plazos y pago */
.tablas-ini {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px var(--hueco);
  margin-top: 32px;
}
.tablas-ini .w-datos dd { font-size: 1.1875rem; }

/* Banda de dato: foto y una cifra de la ficha en papel ocre, respiro
   entre los bloques de texto de la segunda mitad */
.ini-dato { row-gap: 0; align-items: stretch; }
.ini-dato__foto {
  margin: 0;
  min-width: 0;
  background: var(--arena) url("/img/banco-paqueteria-5-768.webp") center / cover no-repeat;
}
.ini-dato__foto img {
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.ini-dato__texto {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 16px;
  min-width: 0;
  padding: clamp(24px, 3.5vw, 48px) clamp(20px, 3vw, 44px);
  background: var(--acento-papel);
  border-top: 2px solid var(--acento-tinta);
}
.ini-dato__texto .rotulo { color: var(--acento-tinta); }
.ini-dato__num {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .5rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 3rem + 5vw, 8.5rem);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--tinta);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.ini-dato__num small {
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.ini-dato__texto p:last-child { max-width: 26em; font-size: 1.0625rem; line-height: 1.5; }

/* Lo que no viaja */
.aviso {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  margin: 0 0 26px;
  padding: 22px 22px 24px;
  background: var(--acento-papel);
  border-top: 2px solid var(--acento-tinta);
}
.aviso .ico { color: var(--acento-tinta); }
.aviso p {
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.875rem);
  line-height: 1.15;
  color: var(--tinta);
  text-wrap: balance;
}

/* Servicios de portada */
.ini-servicios .w-hijas__rejilla { margin-top: 8px; }

/* Destinos: índice geográfico */
.destinos__intro { max-width: 40em; margin-bottom: 36px; }
.destinos__rotulo { margin: 0 0 14px; }

/* Índice por comunidad: una fila numerada por región (nombre enlazado y
   su dato: cuántos destinos tiene) bajo un filete fuerte; las provincias o
   ciudades se despliegan debajo en dos columnas. Plegado en todos los
   anchos: se lee la jerarquía, no un muro de nombres. */
.destinos__rej,
.europa__zonas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  column-gap: calc(var(--hueco) * 1.5);
  align-items: start;
  counter-reset: dest;
  border-top: 2px solid var(--tinta);
}
.dest {
  counter-increment: dest;
  display: block;
  min-width: 0;
  border-bottom: 1px solid var(--filete);
  transition: background-color .25s var(--curva);
}
.dest[open] { background: var(--superficie); box-shadow: inset 0 2px 0 var(--oliva); }
.dest > summary {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 15px 10px 14px 0;
  list-style: none;
  cursor: pointer;
}
.dest[open] > summary { padding-left: 12px; }
.dest > summary::-webkit-details-marker { display: none; }
.dest > summary::before {
  content: counter(dest, decimal-leading-zero);
  flex: none;
  min-width: 1.7em;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--acento-tinta);
  font-variant-numeric: tabular-nums;
}
.dest > summary::after {
  content: "";
  width: 14px;
  height: 14px;
  flex: none;
  align-self: center;
  background: var(--tinta);
  -webkit-mask: var(--flecha-abajo) center / contain no-repeat;
  mask: var(--flecha-abajo) center / contain no-repeat;
  transition: transform .25s var(--curva);
}
.dest > summary:hover::after { background: var(--oliva); }
.dest[open] > summary::after { transform: rotate(180deg); }
.dest h3 { flex: 1 1 auto; min-width: 0; font-size: 1.375rem; line-height: 1.1; }
.dest h3 a { color: var(--tinta); text-decoration: none; }
.dest h3 a:hover { color: var(--oliva-tinta); text-decoration: underline; text-decoration-thickness: 1px; }
.dest__num {
  flex: none;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gris);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
/* Contador de cada comunidad o zona: la cifra en serif manda en la fila */
.dest__num b {
  font-family: var(--serif);
  font-size: 1.75rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  color: var(--oliva-tinta);
  font-variant-numeric: lining-nums;
}

.dest__lista {
  list-style: none;
  margin: 0;
  padding: 0 12px 16px calc(12px + 1.7 * .75rem + 12px);
  columns: 2;
  column-gap: 18px;
}
.dest__lista li { break-inside: avoid; }
.dest__lista a {
  display: block;
  padding: 6px 0;
  border-bottom: 1px solid var(--filete-suave);
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  transition: color .2s var(--curva), padding .25s var(--curva);
}
.dest__lista a:hover { color: var(--oliva-tinta); padding-left: 4px; }

/* Europa: cabecera con enlace al silo y países agrupados por zona */
.europa {
  margin-top: clamp(48px, 6vw, 80px);
  padding-top: 18px;
  border-top: 2px solid var(--tinta);
}
.europa__cab {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 28px;
  margin-bottom: 26px;
}
.europa__cab h3 { font-size: clamp(1.875rem, 1.4rem + 1.5vw, 2.75rem); line-height: 1.04; }
.europa__cab h3 a { color: var(--tinta); text-decoration: none; }
.europa__cab h3 a:hover { color: var(--oliva-tinta); }
.europa__cab p { margin: 0; max-width: 34em; color: var(--tinta); }

/* Cierre de portada: bloque asimétrico con foto, a la altura de un final */
.ini-cierre {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--superficie);
  border-top: 2px solid var(--tinta);
}
.ini-cierre__texto {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-width: 0;
  padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4vw, 56px);
}
.ini-cierre h2 {
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5.25rem);
  line-height: .98;
  letter-spacing: -.02em;
  max-width: 13ch;
}
.ini-cierre__lema { max-width: 30em; font-size: clamp(1.125rem, 1.08rem + .25vw, 1.25rem); line-height: 1.5; }
.ini-cierre__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 26px;
  padding-top: 18px;
  border-top: 1px solid var(--filete);
}
.ini-cierre__foto { margin: 0; min-width: 0; background: var(--arena) url("/img/banco-camion-6-768.webp") center / cover no-repeat; }
.ini-cierre__foto img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

/* 7 · RECORRIDO DEL COTIZADOR
   ------------------------------------------------------------------------ */

.recorrido { padding-block: 18px var(--bloque); }
.recorrido__caja {
  max-width: 820px;
  margin: clamp(28px, 5vw, 56px) auto 0;
}
.recorrido__rotulo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 0 22px;
  border-top: 2px solid var(--tinta);
}
.recorrido__rotulo .rotulo:last-child { color: var(--acento-tinta); }
.recorrido__notas {
  list-style: none;
  margin: 48px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--hueco);
}
.recorrido__notas li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--filete);
  font-size: .9375rem;
  line-height: 1.45;
}
.recorrido__notas .ico { width: 22px; height: 22px; }

/* 8 · PIE
   ------------------------------------------------------------------------ */

.pie {
  margin-top: var(--bloque);
  padding-block: clamp(52px, 6vw, 80px) 28px;
  background: var(--oliva-hondo);
  border-top: 4px solid var(--oliva);
  color: var(--fondo);
}
.pie a { color: var(--fondo); text-decoration-color: rgba(239, 233, 221, .35); }
.pie a:hover { color: var(--acento-papel); text-decoration-color: currentColor; }
.pie__rej { row-gap: 40px; }
.pie .marca { color: var(--fondo); }
.pie .marca__l2 { color: var(--pie-suave); }
.pie__marca p { margin-top: 20px; max-width: 26em; font-size: .9375rem; color: var(--fondo); }
.pie__tel {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.1;
  text-decoration: none;
  font-variant-numeric: lining-nums;
}
.pie .rotulo { color: var(--pie-suave); margin-bottom: 14px; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li { padding: 4px 0; font-size: .9375rem; line-height: 1.4; }
.pie li a { text-decoration: none; }
.pie li a:hover { text-decoration: underline; }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 52px;
  padding-top: 20px;
  border-top: 1px solid rgba(239, 233, 221, .22);
  font-size: .8125rem;
  color: var(--pie-suave);
}

/* 9 · AJUSTES POR ANCHO (al final, para que manden sobre la regla base)
   ------------------------------------------------------------------------ */

@media (max-width: 359px) {
  .cab__boton-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .marca__l1 { font-size: 1.3125rem; }
  .marca__l2 { font-size: .625rem; letter-spacing: .06em; }
}

@media (max-width: 759px) {
  .w-datos__fila { grid-template-columns: minmax(0, 8.75rem) minmax(0, 1fr); gap: 4px 12px; padding: 10px 0; }
  .w-datos dt { letter-spacing: .05em; }
  .w-datos dd { font-size: 1.1875rem; }
  .pag-cab__ficha .w-datos { padding: 2px 16px 6px; }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta { padding-right: 22px; }
  .w-hermanas__enlaces { column-width: 9.5rem; }

  /* Portada: aire entre antetítulo, H1 y bloques; el cotizador sube (un
     solo rótulo en una línea y menos margen encima) */
  .ini-heroe { row-gap: 22px; padding-bottom: 44px; }
  .ini-heroe .w-antetitulo { margin-bottom: 20px; }
  .ini-heroe h1 { margin-bottom: .5em; }
  .ini-heroe__pie { margin-top: 20px; padding-top: 14px; }
  .ini-heroe__rotulo { padding: 10px 0 12px; }
  .ini-heroe__rotulo-lema { display: none; }
  .recorrido__rotulo { flex-direction: column; gap: 8px; }

  /* Guías de servicio: filas compactas */
  .ini-servicios__rejilla .w-tarjeta { padding: 12px 30px 14px 0; gap: 2px; }
  .ini-servicios__rejilla .w-tarjeta__nombre { font-size: 1.3125rem; }
  .ini-servicios__rejilla .w-tarjeta::after { top: 14px; }

  /* Héroe interior: foto apaisada bajo la ficha */
  .pag-cab__lado .w-foto img { aspect-ratio: 16 / 9; }

  /* Cotizador: el contenedor ocupa toda la columna, igual que el texto */
  .w-cotizador,
  .ini-heroe .w-cotizador { max-width: none; margin-inline: 0; }
  .w-cotizador > .cotizador-one,
  .w-cotizador > [data-cotizador-one],
  .w-cotizador > iframe { max-width: none; margin-inline: 0; }

  /* Modalidades: filas compactas */
  .pag-modos__lista a { padding-block: 11px; }
  .pag-modos__nombre { font-size: 1.25rem; }

  /* Destinos: filas algo más compactas */
  .dest > summary { padding-block: 13px 12px; }
  .dest h3 { font-size: 1.25rem; }
  .dest__lista { padding-left: 12px; }

  .pie__base { flex-direction: column; }
}

@media (min-width: 760px) {
  .cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tablas-ini { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .recorrido__notas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ini-foto img { aspect-ratio: 21 / 9; }
  .w-foto img { aspect-ratio: 16 / 9; }
  .modo {
    grid-template-columns: 40px minmax(0, 13rem) minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 24px;
    padding: 22px 44px 22px 0;
  }
  .modo .ico { grid-row: 1 / span 2; align-self: start; }
  .modo__nombre { grid-row: 1 / span 2; }
  .modo__limites { grid-column: 3; }
  .modo__plazo { grid-column: 3; }
  .modo:hover { padding-left: 10px; }
  .modo::after { top: 50%; margin-top: -8px; }
  .destinos__rej { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .europa__zonas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pag-modos__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--hueco); }
  .ini-cierre__foto img { aspect-ratio: 21 / 9; }
  .pie__rej > .pie__marca { grid-column: 1 / 7; }
  .pie__rej > .pie__col { grid-column: span 3; }
}

@media (min-width: 1000px) {
  .w-seccion > *,
  .w-faq > * { grid-column: 5 / -1; }
  .w-seccion > h2,
  .w-faq > h2 {
    grid-column: 1 / 5;
    grid-row: 1 / span 60;
    position: sticky;
    top: calc(var(--cab-alto) + 24px);
    padding-right: 12px;
  }
  .w-seccion > .w-tabla { max-width: none; }

  .sec__cab { grid-column: 1 / 5; position: sticky; top: calc(var(--cab-alto) + 24px); padding-right: 12px; }
  .sec__cuerpo { grid-column: 5 / -1; }
  .sec--ancha .sec__cab,
  .sec--ancha .sec__cuerpo { grid-column: 1 / -1; position: static; }
  .sec--ancha .sec__cab h2 { max-width: 20ch; }

  /* Rejilla 7/5 con el medianil de la retícula, sin pasillo extra */
  .pag-cab__texto { grid-column: 1 / 8; }
  .pag-cab__lado { grid-column: 8 / -1; }
  .pag-cab__rej:not(:has(.w-datos)):not(:has(.w-foto)) .pag-cab__texto { grid-column: 1 / 10; }
  /* La ficha arranca en la línea del antetítulo en todos los niveles */
  .pag-cab__lado { align-self: stretch; justify-content: flex-start; }
  /* La foto ocupa lo que queda de columna hasta el pie de la cabecera */
  .pag-cab__lado .w-foto { position: relative; flex: 1 1 auto; min-height: 220px; }
  .pag-cab__lado .w-foto img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Servicio: retícula suiza asimétrica. El H1 cruza las 12 columnas,
     entradilla y acciones en 1-6, ficha en 8-12 y la foto a todo el ancho
     de la retícula debajo, como banda apaisada */
  .pag-servicio .pag-cab__texto,
  .pag-servicio .pag-cab__lado { display: contents; }
  .pag-servicio .pag-cab__rej { row-gap: 0; align-items: start; }
  .pag-servicio .pag-cab__rej .w-antetitulo { grid-column: 1 / 8; grid-row: 1; }
  .pag-servicio .pag-cab__rej h1 { grid-column: 1 / -1; grid-row: 2; max-width: 17ch; }
  .pag-servicio .pag-cab__rej .w-entradilla { grid-column: 1 / 7; grid-row: 3; }
  .pag-servicio .pag-cab__acciones { grid-column: 1 / 7; grid-row: 4; }
  .pag-servicio .pag-cab__ficha { grid-column: 8 / -1; grid-row: 3 / span 2; }
  .pag-servicio .pag-cab__lado .w-foto {
    grid-column: 1 / -1;
    grid-row: 5;
    margin-top: clamp(36px, 4vw, 56px);
    position: static;
    min-height: 0;
  }
  .pag-servicio .pag-cab__lado .w-foto img { position: static; height: auto; aspect-ratio: 21 / 8; }

  /* Región y Europa: H1 ancho con la foto al lado de H1 y entradilla, y la
     ficha tendida en una fila de columnas iguales que da paso al índice */
  .pag-region .pag-cab__texto,
  .pag-region .pag-cab__lado,
  .pag-continente .pag-cab__texto,
  .pag-continente .pag-cab__lado { display: contents; }
  .pag-region .pag-cab__rej,
  .pag-continente .pag-cab__rej { row-gap: 0; align-items: start; }
  .pag-region .pag-cab__rej .w-antetitulo,
  .pag-continente .pag-cab__rej .w-antetitulo { grid-column: 1 / 8; grid-row: 1; }
  .pag-region .pag-cab__rej h1,
  .pag-continente .pag-cab__rej h1 { grid-column: 1 / 8; grid-row: 2; }
  .pag-region .pag-cab__rej .w-entradilla,
  .pag-continente .pag-cab__rej .w-entradilla { grid-column: 1 / 7; grid-row: 3; }
  .pag-region .pag-cab__acciones,
  .pag-continente .pag-cab__acciones { grid-column: 1 / 7; grid-row: 4; }
  .pag-region .pag-cab__lado .w-foto,
  .pag-continente .pag-cab__lado .w-foto { grid-column: 8 / -1; grid-row: 1 / span 4; align-self: stretch; min-height: 300px; }
  .pag-region .pag-cab__ficha,
  .pag-continente .pag-cab__ficha { grid-column: 1 / -1; grid-row: 5; margin-top: clamp(32px, 3.5vw, 48px); }
  .pag-region .pag-cab__ficha .w-datos,
  .pag-continente .pag-cab__ficha .w-datos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    column-gap: 0;
    padding: 0 22px;
  }
  .pag-region .pag-cab__ficha .w-datos__fila,
  .pag-continente .pag-cab__ficha .w-datos__fila {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 16px 18px 18px;
    border-bottom: 0;
  }
  .pag-region .pag-cab__ficha .w-datos__fila:first-child,
  .pag-continente .pag-cab__ficha .w-datos__fila:first-child { padding-left: 0; }
  .pag-region .pag-cab__ficha .w-datos__fila + .w-datos__fila,
  .pag-continente .pag-cab__ficha .w-datos__fila + .w-datos__fila { border-left: 1px solid var(--filete); }

  /* Municipio: texto en 1-8 y la ficha con su dato grande en 9-12 */
  .pag-municipio .pag-cab__texto { grid-column: 1 / 9; }
  .pag-municipio .pag-cab__lado { grid-column: 9 / -1; }

  .pag-cotizar__guia { grid-column: 1 / 5; padding-top: 18px; border-top: 1px solid var(--tinta); }
  .pag-cotizar__widget { grid-column: 5 / -1; order: 0; }
  /* El contenedor ocupa exactamente las columnas 5-12: filete y caja
     terminan en el borde derecho de la retícula */
  .pag-cotizar__widget > .w-cotizador { max-width: none; margin-inline: 0; }

  /* Sin widget: guía a ancho completo (lema a la izquierda, pasos y botón a la derecha) */
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__guia {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hueco);
    align-items: start;
  }
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__guia > * { grid-column: 5 / -1; min-width: 0; }
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__guia > .rotulo { grid-column: 1 / 5; grid-row: 1; }
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__lema { grid-column: 1 / 5; grid-row: 2 / span 3; margin-bottom: 0; }
  .pag-cotizar:not(:has(.w-cotizador)) .pasos-mini { grid-row: 1 / span 2; margin-bottom: 18px; }
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__nota { grid-row: 3; }
  .pag-cotizar:not(:has(.w-cotizador)) .pag-cotizar__widget { grid-column: 5 / -1; margin-top: 22px; }

  .pag > .w-hermanas {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--hueco);
    align-items: start;
  }
  .pag > .w-hermanas > * { grid-column: 5 / -1; min-width: 0; }
  .pag > .w-hermanas > .w-hermanas__titulo { grid-column: 1 / 5; grid-row: 1 / span 3; padding-right: 12px; }
  .pag > .w-hermanas .w-hermanas__enlaces { padding-top: 0; border-top: 1px solid var(--tinta); }

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

  .duo__foto { grid-column: 1 / 6; position: sticky; top: calc(var(--cab-alto) + 24px); }
  .duo .sec { grid-column: 7 / -1; display: block; }
  .duo .sec__cab { position: static; padding-right: 0; }

  .cita { grid-column: 1 / 9; }
  .cita__accion { grid-column: 9 / -1; }

  .ini-dato__foto { grid-column: 1 / 8; }
  .ini-dato__texto { grid-column: 8 / -1; }
  .ini-dato__foto img { aspect-ratio: auto; min-height: 420px; }

  .ini-cierre { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .ini-cierre__foto img { aspect-ratio: auto; min-height: 100%; }

  .destinos__rej { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .europa__zonas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .pag-modos__lista { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pag-modos__lista a {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 8px;
    padding: 18px 10px 18px 0;
    border-bottom: 0;
  }
  .pag-modos__lista .ico { grid-row: auto; }
  /* Nombres de una o dos líneas: el dato arranca a la misma altura */
  .pag-modos__nombre { min-height: 2.2em; }

  .pie__rej > .pie__marca { grid-column: 1 / 5; }
  .pie__rej > .pie__col { grid-column: span 2; }
  .pie__rej > .pie__col--ancha { grid-column: span 4; }
  .pie__col--ancha ul { columns: 2; column-gap: var(--hueco); }
  .pie__col--ancha li { break-inside: avoid; }
}

@media (min-width: 1320px) {
  .cab__boton-menu { display: none; }
  .menu {
    position: static;
    display: flex;
    align-items: center;
    gap: 28px;
    margin-left: auto;
    max-height: none;
    overflow: visible;
    padding: 0;
    background: transparent;
    border: 0;
  }
  .menu__lista { display: flex; align-items: center; gap: 22px; }
  .menu__lista > li { border: 0; }
  .menu__lista > li > a,
  .menu__sub summary {
    position: relative;
    padding: 8px 0;
    font-family: var(--sans);
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    color: var(--tinta);
    gap: 6px;
  }
  .menu__lista > li > a::before,
  .menu__sub summary::before { display: none; }
  .menu__lista > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 3px;
    height: 1px;
    background: var(--oliva);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--curva);
  }
  .menu__lista > li > a:hover::after { transform: scaleX(1); }
  .menu__lista > li > a[aria-current="page"],
  .menu__sub:has(a[aria-current="page"]) summary { color: var(--oliva-tinta); font-weight: 600; }
  .menu__lista > li > a[aria-current="page"]::after { height: 2px; transform: scaleX(1); }
  .menu__sub summary::after { width: 12px; height: 12px; margin-left: 2px; }
  .menu__sub { position: relative; }
  .menu__sub ul {
    position: absolute;
    top: calc(100% + 12px);
    left: -22px;
    z-index: 5;
    min-width: 270px;
    padding: 10px 22px 12px;
    background: var(--superficie);
    border-top: 2px solid var(--tinta);
    box-shadow: 0 24px 48px -28px rgba(43, 42, 32, .55);
  }
  .menu__sub ul li + li { border-top: 1px solid var(--filete-suave); }
  .menu__sub ul a { padding: 9px 0; font-size: .9375rem; font-weight: 500; }
  .menu .boton--cab { margin-top: 0; width: auto; padding: .8em 1.1em; }
}

@media (min-width: 1200px) {
  .ini-heroe { align-items: start; }
  .ini-heroe__texto { grid-column: 1 / 6; padding-top: 6px; }
  .ini-heroe__cot { grid-column: 6 / -1; }
}

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

@media print {
  .cab, .pie, .w-cotizador, .pag-cotizar, .ini-heroe__cot { display: none; }
  body { background: #fff; }
}