/* ==========================================================================
   Enviar paquete a Grecia · hoja de estilo propia
   Cartel tipográfico «Pizarra y mandarina»: tipografía gigante, bloques
   planos, esquinas rectas, filetes y numeraciones.
   Todo va con prefijo .w- para no entrar nunca en el formulario del cotizador.
   ========================================================================== */

:root {
  --pizarra: #1E242B;
  --pizarra-honda: #161B20;
  --superficie: #28303A;
  --superficie-alta: #323B47;
  --papel: #F2F2F0;
  --niebla: #B4BBC4;
  --mandarina: #FF8A3D;
  --mandarina-viva: #FFA062;
  /* El azul de la paleta queda fuera del texto y de los filetes: la web se
     lee en pizarra, papel y mandarina. Enlaces y teléfonos van en papel con
     subrayado mandarina. */
  --cielo: #8FD3FE;
  --filete: rgba(242, 242, 240, .14);
  --filete-fuerte: rgba(242, 242, 240, .34);

  --f-titulo: 'Sora', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-texto: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --ancho: 1280px;
  --margen: clamp(16px, 4vw, 48px);
  --bloque: clamp(56px, 8vw, 128px);
  --cab-alto: 68px;

  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 14'%3E%3Cpath d='M1 7h16M11 1.5 17 7l-6 5.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
  /* Greca (meandro griego) en módulo de 40 × 40: UN solo uso, el friso fino
     que separa el contenido del pie */
  --greca-mandarina: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M0 36H36V4H8V28H28V12H16V20' fill='none' stroke='%23FF8A3D' stroke-width='4' stroke-linecap='square'/%3E%3C/svg%3E");
}

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

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

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

[class^="w-"], [class*=" w-"],
[class^="w-"]::before, [class*=" w-"]::before,
[class^="w-"]::after, [class*=" w-"]::after,
.w-tabla *, .w-tabla *::before, .w-tabla *::after {
  box-sizing: border-box;
}

/* Teléfonos siempre en una línea */
a[href^="tel:"] {
  white-space: nowrap;
}

::selection {
  background: var(--mandarina);
  color: var(--pizarra);
}

:is(a, button, summary):focus-visible:not(.w-cotizador *) {
  outline: 3px solid var(--papel);
  outline-offset: 3px;
}

.w-salto {
  position: absolute;
  left: 12px;
  top: -80px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--mandarina);
  color: var(--pizarra);
  font: 700 .9375rem/1 var(--f-titulo);
  text-decoration: none;
}

.w-salto:focus {
  top: 12px;
}

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

/* --------------------------------------------------------------------------
   Botones y llamadas
   -------------------------------------------------------------------------- */

.w-cta,
.w-boton {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 22px;
  background: var(--mandarina);
  color: var(--pizarra);
  font: 700 .9375rem/1.2 var(--f-titulo);
  letter-spacing: -.005em;
  text-decoration: none;
  border: 0;
  border-radius: 0;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}

.w-cta::after,
.w-boton::after {
  content: "";
  flex: none;
  width: 18px;
  height: 13px;
  background: currentColor;
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  transition: transform .2s ease;
}

.w-cta:hover,
.w-boton:hover {
  background: var(--mandarina-viva);
  transform: translate(-3px, -3px);
  box-shadow: 3px 3px 0 var(--papel);
}

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

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

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

.w-cab {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--pizarra);
  border-bottom: 1px solid var(--filete);
  transition: background-color .25s ease, border-color .25s ease;
}

/* Al desplazarse solo se marca el filete: el fondo de la cabecera es el
   mismo pizarra en toda la web */
.w-cab--desplazada {
  border-bottom-color: var(--filete-fuerte);
}

.w-cab__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  min-height: var(--cab-alto);
}

.w-marca {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: var(--cab-alto);
  color: var(--papel);
  text-decoration: none;
}

.w-marca__simbolo {
  display: block;
  flex: none;
  width: 38px;
  height: 38px;
  transition: transform .3s ease;
}

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

/* Marca tipográfica: «Enviar paquete a» de rótulo y «Grecia» de cartel,
   junto a un isotipo con la greca (meandro) recortada en mandarina */
.w-marca__nombre {
  display: flex;
  flex-direction: column;
  gap: 3px;
  white-space: nowrap;
}

.w-marca__pre {
  color: var(--niebla);
  font: 600 .6875rem/1 var(--f-titulo);
  letter-spacing: .16em;
  text-transform: uppercase;
}

.w-marca__pais {
  color: var(--papel);
  font: 800 1.5rem/.9 var(--f-titulo);
  letter-spacing: -.045em;
}

.w-marca__pais::after {
  content: ".";
  color: var(--mandarina);
}

.w-cab__conmutador {
  display: none;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  color: var(--papel);
  border: 1px solid var(--filete-fuerte);
  border-radius: 0;
  font: 600 .875rem/1 var(--f-titulo);
  cursor: pointer;
  transition: border-color .2s ease, background-color .2s ease;
}

.js .w-cab__conmutador {
  display: inline-flex;
}

.w-cab__conmutador:hover {
  border-color: var(--mandarina);
}

.w-cab__rayas {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: background-color .2s ease;
}

.w-cab__rayas::before,
.w-cab__rayas::after {
  content: "";
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease;
}

.w-cab__rayas::before { top: -6px; }
.w-cab__rayas::after { top: 6px; }

.w-cab__conmutador[aria-expanded="true"] .w-cab__rayas {
  background: transparent;
}

.w-cab__conmutador[aria-expanded="true"] .w-cab__rayas::before {
  transform: translateY(6px) rotate(45deg);
}

.w-cab__conmutador[aria-expanded="true"] .w-cab__rayas::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Sin JS el menú se queda visible debajo de la marca */
.w-menu {
  width: 100%;
}

.w-menu__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 22px;
  margin: 0;
  padding: 0 0 14px;
  list-style: none;
}

.w-menu__enlace {
  display: inline-block;
  padding: 8px 0;
  color: var(--papel);
  font: 500 .9375rem/1.2 var(--f-titulo);
  text-decoration: none;
  background: linear-gradient(var(--mandarina), var(--mandarina)) 0 100% / 0 2px no-repeat;
  transition: background-size .25s ease, color .2s ease;
}

.w-menu__enlace:hover {
  background-size: 100% 2px;
}

.w-menu__cta {
  padding: 11px 16px;
  font-size: .875rem;
}

/* Submenú de modalidades */
.w-menu__abre {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  text-align: left;
  cursor: pointer;
}

.w-menu__abre::after {
  content: "";
  flex: none;
  width: 12px;
  height: 9px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  transform: rotate(90deg);
  transition: transform .25s ease;
}

.w-menu__abre[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.w-menu__sub {
  display: flex;
  flex-wrap: wrap;
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-menu__subenlace {
  display: block;
  padding: 8px 0;
  color: var(--papel);
  font: 500 .9375rem/1.3 var(--f-titulo);
  text-decoration: none;
  transition: color .2s ease;
}

.w-menu__subenlace:hover {
  color: var(--mandarina);
}

/* Con JS, en móvil: panel plegable bajo la cabecera */
.js .w-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: none;
  max-height: calc(100vh - var(--cab-alto));
  max-height: calc(100dvh - var(--cab-alto));
  overflow-y: auto;
  background: var(--superficie);
  border-bottom: 4px solid var(--mandarina);
}

.js .w-cab--abierta .w-menu {
  display: block;
}

.js .w-menu__lista {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 6px var(--margen) 26px;
}

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

.js .w-menu__item--cta {
  border-bottom: 0;
  padding-top: 22px;
}

.js .w-menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 17px 0;
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.02em;
  background: none;
}

.js .w-menu__enlace::after {
  content: "";
  width: 18px;
  height: 13px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
}

.js .w-menu__cta {
  width: 100%;
  justify-content: space-between;
  padding: 17px 20px;
  font-size: 1rem;
}

.js .w-menu__abre {
  width: 100%;
}

.js .w-menu__abre::after {
  transform: rotate(90deg);
}

.js .w-menu__abre[aria-expanded="true"]::after {
  transform: rotate(-90deg);
}

.js .w-menu__sub {
  display: none;
  margin: 0 0 16px;
  padding-left: 16px;
  border-left: 2px solid var(--mandarina);
}

.js .w-menu__abre[aria-expanded="true"] + .w-menu__sub {
  display: block;
}

.js .w-menu__subenlace {
  padding: 11px 0;
  font-size: 1.0625rem;
}

/* --------------------------------------------------------------------------
   Rótulos comunes
   -------------------------------------------------------------------------- */

/* Antetítulo: UN solo sistema en toda la web (portada, interiores de
   cualquier tipo, contacto y recorrido del cotizador): versalitas en
   mandarina con un cuadrado macizo delante. Ni placa rellena ni regla
   vertical; lo que distingue cada tipo de página es la composición de la
   cabecera, no la etiqueta. */
.w-antetitulo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  color: var(--mandarina);
  font: 700 .9375rem/1.35 var(--f-titulo);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.w-antetitulo::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  background: currentColor;
}

.w-rotulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 22px;
  color: var(--niebla);
  font: 600 .8125rem/1.2 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
}

.w-rotulo__num {
  padding: 6px 8px;
  background: var(--mandarina);
  color: var(--pizarra);
  letter-spacing: .04em;
}

.w-rotulo::after {
  content: "";
  flex: 1 1 auto;
  max-width: 120px;
  height: 1px;
  background: var(--filete-fuerte);
}

.w-h2 {
  max-width: 20ch;
  margin: 0;
  font: 700 clamp(1.875rem, 1.05rem + 3.1vw, 3.75rem)/1.04 var(--f-titulo);
  letter-spacing: -.03em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-h3 {
  margin: 0 0 10px;
  font: 600 clamp(1.1875rem, 1rem + .7vw, 1.5rem)/1.2 var(--f-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-texto {
  max-width: 38em;
  text-wrap: pretty;
}

.w-texto p {
  margin: 0 0 1em;
}

.w-texto p:last-child {
  margin-bottom: 0;
}

.w-texto a,
.w-seccion a,
.w-faq a,
.w-entradilla a {
  color: var(--papel);
  text-decoration: underline;
  text-decoration-color: var(--mandarina);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.w-texto a:hover,
.w-seccion a:hover,
.w-faq a:hover,
.w-entradilla a:hover {
  color: var(--mandarina);
}

.w-texto strong,
.w-seccion strong,
.w-faq strong {
  font-weight: 700;
  color: var(--papel);
}

/* --------------------------------------------------------------------------
   Héroe: portada e interiores
   -------------------------------------------------------------------------- */

.w-portada-heroe {
  padding-block: clamp(36px, 7vw, 104px) clamp(28px, 4vw, 56px);
}

.w-portada-heroe__rejilla,
.w-heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.w-titular {
  margin: 20px 0 0;
  font: 800 clamp(2.125rem, .9rem + 5.4vw, 6.5rem)/.98 var(--f-titulo);
  letter-spacing: -.04em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-titular__acento {
  color: var(--mandarina);
}

.w-portada-heroe__texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.w-portada-heroe__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 28px;
  margin: 28px 0 0;
}

.w-portada-heroe__tel {
  color: var(--papel);
  font: 600 1.0625rem/1.2 var(--f-titulo);
  text-decoration: none;
  padding-bottom: 3px;
  border-bottom: 2px solid var(--mandarina);
  transition: color .2s ease, border-color .2s ease;
}

.w-portada-heroe__tel:hover {
  color: var(--mandarina);
}

/* Columna derecha de la portada: foto y ficha. En escritorio la foto
   arranca a la altura del antetítulo y la ficha acaba a la altura de los
   botones (la foto rellena lo que haya entre las dos) */
.w-portada-heroe__lado {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.w-portada-heroe__foto {
  display: block;
  margin: 0;
}

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

.w-portada-heroe__lado .w-datos {
  margin-top: 0;
}

/* Héroe interior: migas y, debajo, la rejilla de texto, ficha, foto (o
   mapa) y acción. El titular abre siempre la página; la composición la
   decide el tipo de página (ver «Variantes de cabecera») */
.w-heroe {
  position: relative;
  padding-top: clamp(20px, 3vw, 40px);
  background: var(--pizarra);
}

.w-heroe__cabeza {
  padding-bottom: clamp(20px, 3vw, 40px);
}

.w-heroe__cabeza:empty {
  display: none;
}

.w-heroe__cuerpo {
  padding-bottom: clamp(32px, 5vw, 72px);
}

.w-heroe__foto {
  min-width: 0;
}

.w-heroe__foto:empty {
  display: none;
}

/* Botón fijo de la cabecera: solo cuando el cotizador va debajo del héroe
   (si la página trae su propia línea de llamada, esa basta) */
.w-heroe__boton {
  display: none;
  margin: 28px 0 0;
}

.w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador) .w-heroe__boton {
  display: block;
}

/* Mapa de la cabecera de región: ciudades por latitud y longitud reales;
   la región de la página se enciende en mandarina (por su canonical) */
.w-heroe__mapa {
  display: none;
}

.w-heroe__zona circle {
  fill: var(--superficie-alta);
}

.w-heroe__zona text {
  fill: #B4BBC4;
  color: #B4BBC4;
  font: 600 22px/1 var(--f-titulo);
}

html:has(link[rel="canonical"][href*="/grecia-septentrional/"]) .w-heroe__zona--norte circle,
html:has(link[rel="canonical"][href*="/grecia-central/"]) .w-heroe__zona--centro circle,
html:has(link[rel="canonical"][href*="/atica/"]) .w-heroe__zona--atica circle,
html:has(link[rel="canonical"][href*="/islas-del-egeo-y-creta/"]) .w-heroe__zona--islas circle {
  fill: var(--mandarina);
}

html:has(link[rel="canonical"][href*="/grecia-septentrional/"]) .w-heroe__zona--norte text,
html:has(link[rel="canonical"][href*="/grecia-central/"]) .w-heroe__zona--centro text,
html:has(link[rel="canonical"][href*="/atica/"]) .w-heroe__zona--atica text,
html:has(link[rel="canonical"][href*="/islas-del-egeo-y-creta/"]) .w-heroe__zona--islas text {
  fill: #F2F2F0;
  color: #F2F2F0;
  font-weight: 700;
}

.w-heroe__h1 {
  margin: 16px 0 0;
  font: 800 clamp(2rem, 1rem + 4vw, 4.75rem)/1 var(--f-titulo);
  letter-spacing: -.035em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-heroe__texto > .w-heroe__h1:first-child {
  margin-top: 0;
}

/* Rejilla del héroe interior: texto, acción (botón o cotizador) y una
   columna lateral con la ficha y la foto. En móvil el botón va justo
   debajo de la entradilla, dentro del primer pantallazo. */
.w-heroe__rejilla {
  grid-template-areas: "texto" "accion" "lado";
  row-gap: 28px;
}

.w-heroe__texto {
  grid-area: texto;
  min-width: 0;
}

.w-heroe__lado {
  grid-area: lado;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.w-heroe__accion {
  grid-area: accion;
  min-width: 0;
}

.w-heroe__accion:empty {
  display: none;
}

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

/* Foto de cabecera, limpia (sin frisos); sin pie: los del banco describen
   la foto y no aportan */
.w-heroe__foto .w-foto {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.w-heroe__foto .w-foto img {
  aspect-ratio: 16 / 9;
}

.w-heroe figcaption {
  display: none;
}

.w-entradilla {
  max-width: 31em;
  margin-top: 26px;
  color: var(--papel);
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.w-entradilla p {
  margin: 0;
}

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

/* Migas */
.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.4;
}

.w-migas li {
  display: inline-flex;
  align-items: center;
  color: var(--papel);
  font-weight: 600;
}

.w-migas li + li::before {
  content: "/";
  margin: 0 10px;
  color: var(--mandarina);
  font-weight: 700;
}

.w-migas a {
  color: var(--niebla);
  text-decoration: none;
  font-weight: 500;
  transition: color .2s ease;
}

.w-migas a:hover {
  color: var(--mandarina);
}

/* Ficha de datos: tratamiento común; cada tipo de página la coloca y la
   acentúa a su manera (ver «Variantes de cabecera») */
.w-datos {
  margin: 0;
  background: var(--superficie);
  border-top: 4px solid var(--mandarina);
}

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

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

.w-datos dt {
  color: var(--niebla);
  font: 700 .8125rem/1.35 var(--f-texto);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.w-datos dd {
  margin: 0;
  color: var(--papel);
  font: 600 1rem/1.35 var(--f-titulo);
  letter-spacing: -.01em;
  text-wrap: balance;
}

.w-datos dd a {
  color: var(--papel);
  text-decoration: underline;
  text-decoration-color: var(--mandarina);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.w-datos dd a:hover {
  color: var(--mandarina);
}

/* --------------------------------------------------------------------------
   Cotizador: bloque de pizarra a todo el ancho del contenedor, igual en
   todas las páginas; el filete mandarina superior ocupa todo el borde
   -------------------------------------------------------------------------- */

.w-cotizador {
  position: relative;
  padding: clamp(14px, 3.5vw, 56px) clamp(10px, 3vw, 48px);
  background: var(--superficie);
  color: var(--papel);
  border-top: 6px solid var(--mandarina);
  scroll-margin-top: calc(var(--cab-alto) + 12px);
}

.w-cotizador__titulo {
  max-width: 760px;
  margin: 0 auto 20px;
  color: var(--papel);
  font: 700 clamp(1.375rem, 1rem + 1.4vw, 2rem)/1.15 var(--f-titulo);
  letter-spacing: -.02em;
  text-align: center;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-cotizador__rotulo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 760px;
  margin: 0 auto 18px;
  color: var(--niebla);
  font: 600 .75rem/1.35 var(--f-titulo);
  letter-spacing: .12em;
  text-align: center;
  text-transform: uppercase;
}

.w-cotizador__rotulo::before,
.w-cotizador__rotulo::after {
  content: "";
  flex: 1 1 0;
  max-width: 96px;
  height: 2px;
  background: var(--mandarina);
}

.w-cotizador__marco,
.w-cotizador > .cotizador-one,
.w-cotizador > [data-cotizador-one] {
  max-width: 760px;
  margin-inline: auto;
}

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

.w-foto {
  margin: clamp(32px, 5vw, 64px) 0 0;
}

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

.w-foto figcaption {
  display: flex;
  gap: 14px;
  align-items: baseline;
  margin-top: 12px;
  color: var(--niebla);
  font-size: .875rem;
  line-height: 1.5;
}

.w-foto figcaption::before {
  content: "";
  flex: none;
  width: 24px;
  height: 2px;
  background: var(--mandarina);
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Cuerpo de las páginas: secciones, tablas, preguntas
   -------------------------------------------------------------------------- */

.w-cuerpo {
  counter-reset: seccion;
  padding-bottom: var(--bloque);
}

.w-seccion,
.w-faq {
  padding-top: clamp(44px, 6vw, 88px);
  margin-top: clamp(44px, 6vw, 88px);
  border-top: 1px solid var(--filete);
}

.w-cuerpo > :first-child {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 0;
  border-top: 0;
}

.w-seccion > h2,
.w-faq > h2 {
  margin: 0 0 24px;
  font: 700 clamp(1.75rem, 1.1rem + 2.4vw, 3rem)/1.06 var(--f-titulo);
  letter-spacing: -.03em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-cuerpo .w-seccion > h2::before,
.w-cuerpo .w-faq > h2::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero);
  display: block;
  width: 3.25rem;
  margin-bottom: 18px;
  padding-top: 10px;
  border-top: 3px solid var(--mandarina);
  color: var(--mandarina);
  font: 700 .9375rem/1 var(--f-titulo);
  letter-spacing: .06em;
}

.w-seccion > p,
.w-seccion > ul,
.w-seccion > ol {
  max-width: 40em;
  margin: 0 0 1.05em;
  text-wrap: pretty;
}

.w-seccion > h3 {
  margin: 1.8em 0 .55em;
  font: 600 clamp(1.1875rem, 1rem + .7vw, 1.5rem)/1.2 var(--f-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-seccion ul {
  padding: 0;
  list-style: none;
}

.w-seccion ul > li {
  position: relative;
  padding-left: 24px;
  margin-bottom: .45em;
}

.w-seccion ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 8px;
  height: 8px;
  background: var(--mandarina);
}

.w-seccion ol {
  padding-left: 1.4em;
}

.w-seccion ol > li::marker {
  color: var(--mandarina);
  font-family: var(--f-titulo);
  font-weight: 700;
}

/* Ritmo: las secciones con tabla van sobre un panel de superficie, así
   «tabla, texto, tabla» no se lee como una sola tira oscura */
.w-cuerpo > .w-seccion:has(> .w-tabla):not(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border-top: 0;
  background: var(--superficie);
}

.w-cuerpo > .w-seccion:has(> .w-tabla):not(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) + .w-seccion,
.w-cuerpo > .w-seccion:has(> .w-tabla):not(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) + .w-faq {
  border-top: 0;
}

/* Ritmo en páginas largas: bloques planos de color con texto pizarra cada
   dos secciones; mandarina en la tercera, la séptima…, y papel en la
   quinta, la novena… (las reglas de color de texto son comunes a los dos) */
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) {
  padding: clamp(28px, 5vw, 64px) clamp(20px, 4vw, 56px);
  border-top: 0;
  background: var(--mandarina);
  color: var(--pizarra);
}

.w-cuerpo > .w-seccion:nth-of-type(4n + 5) {
  background: var(--papel);
  border-left: 10px solid var(--mandarina);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) + .w-seccion,
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) + .w-faq {
  border-top: 0;
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) > h2::before {
  border-top-color: var(--pizarra);
  color: var(--pizarra);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) a,
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) a:hover,
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) strong {
  color: var(--pizarra);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) a {
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) a:hover {
  text-decoration-color: var(--papel);
}

.w-cuerpo > .w-seccion:nth-of-type(4n + 5) a:hover {
  text-decoration-color: var(--mandarina);
}

/* Dentro de una tabla el fondo vuelve a ser pizarra: colores de siempre */
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla a,
.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla a:hover {
  color: var(--papel);
  text-decoration-color: var(--mandarina);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla strong {
  color: var(--papel);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) ul > li::before {
  background: var(--pizarra);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) ol > li::marker {
  color: var(--pizarra);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla__mas {
  color: var(--pizarra);
  border-color: var(--pizarra);
}

.w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla__mas:hover {
  background: var(--pizarra);
  color: var(--papel);
}

/* Tablas: scroll propio si no caben */
.w-tabla {
  max-width: 100%;
  margin: 28px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 3px solid var(--mandarina);
  background: var(--pizarra);
}

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

.w-tabla caption {
  padding: 14px 16px 12px;
  color: var(--niebla);
  font: 600 .875rem/1.3 var(--f-titulo);
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  background: var(--pizarra);
}

.w-tabla th {
  padding: 14px 16px;
  background: var(--superficie);
  color: var(--mandarina);
  font: 700 .875rem/1.3 var(--f-titulo);
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}

.w-tabla td {
  padding: 14px 16px;
  color: var(--papel);
  border-bottom: 1px solid var(--filete);
  vertical-align: top;
  overflow-wrap: break-word;
}

/* Botón para desplegar las tablas largas en móvil (lo añade web.js) */
.w-tabla__mas {
  display: none;
  margin: -10px 0 28px;
  padding: 12px 18px;
  background: transparent;
  color: var(--papel);
  border: 1px solid var(--mandarina);
  border-radius: 0;
  font: 600 .875rem/1 var(--f-titulo);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.w-tabla__mas:hover {
  background: var(--mandarina);
  color: var(--pizarra);
}

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

.w-tabla tbody tr:hover {
  background: rgba(242, 242, 240, .04);
}

.w-tabla td:first-child {
  font-family: var(--f-titulo);
  font-weight: 600;
}

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

.w-faq > h2 + .w-faq__item,
.w-faq > .w-h2 + .w-faq__item {
  border-top: 1px solid var(--filete-fuerte);
}

.w-faq__item summary {
  position: relative;
  display: block;
  padding: 22px 60px 22px 0;
  color: var(--papel);
  font: 600 clamp(1.0625rem, 1rem + .3vw, 1.1875rem)/1.4 var(--f-titulo);
  letter-spacing: -.01em;
  list-style: none;
  cursor: pointer;
  transition: color .2s ease;
}

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

.w-faq__item summary::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  border: 2px solid var(--filete-fuerte);
  background:
    linear-gradient(var(--mandarina), var(--mandarina)) center / 12px 2px no-repeat,
    linear-gradient(var(--mandarina), var(--mandarina)) center / 2px 12px no-repeat;
  transition: transform .25s ease, border-color .2s ease, background-color .2s ease;
}

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

.w-faq__item summary:hover::after {
  border-color: var(--mandarina);
}

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

.w-faq__resp {
  max-width: 40em;
  padding: 0 60px 24px 0;
  color: var(--papel);
  text-wrap: pretty;
}

.w-faq__resp p {
  margin: 0 0 .8em;
}

.w-faq__resp p:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   Hijas, hermanas y cierre
   -------------------------------------------------------------------------- */

.w-hijas-marco,
.w-hermanas-marco,
.w-cierre-marco {
  padding-top: var(--bloque);
}

.w-hijas-marco:empty,
.w-hermanas-marco:empty,
.w-cierre-marco:empty {
  display: none;
}

.w-hijas__titulo,
.w-hermanas__titulo {
  margin: 0 0 28px;
  font: 700 clamp(1.625rem, 1.1rem + 2vw, 2.75rem)/1.06 var(--f-titulo);
  letter-spacing: -.03em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

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

.w-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 10rem;
  padding: 20px 22px 58px;
  background: var(--superficie);
  color: var(--papel);
  text-decoration: none;
  border-top: 3px solid var(--filete-fuerte);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}

.w-tarjeta::before {
  counter-increment: hija;
  content: counter(hija, decimal-leading-zero);
  color: var(--mandarina);
  font: 700 .9375rem/1 var(--f-titulo);
  letter-spacing: .06em;
}

.w-tarjeta::after {
  content: "";
  position: absolute;
  left: 22px;
  bottom: 22px;
  width: 22px;
  height: 15px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  transition: transform .25s ease;
}

.w-tarjeta:hover {
  background: var(--superficie-alta);
  border-top-color: var(--mandarina);
}

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

.w-tarjeta__nombre {
  font: 600 1.1875rem/1.22 var(--f-titulo);
  letter-spacing: -.015em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

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

/* Muchas hijas: filas compactas, sin muro */
.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr));
  gap: 8px;
}

.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta {
  min-height: 0;
  padding: 14px 48px 14px 16px;
  gap: 4px;
}

.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta::after {
  left: auto;
  right: 16px;
  bottom: auto;
  top: 18px;
  width: 16px;
  height: 11px;
}

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

.w-hijas__rejilla:has(> .w-tarjeta:nth-child(13)) .w-tarjeta__texto {
  font-size: .875rem;
}

.w-hermanas {
  padding: clamp(24px, 4vw, 48px);
  background: var(--pizarra-honda);
  border-left: 6px solid var(--mandarina);
}

.w-hermanas__titulo {
  font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem);
}

.w-hermanas__enlaces {
  columns: 4 11rem;
  column-gap: 28px;
}

.w-hermanas__enlaces > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--filete);
  break-inside: avoid;
  color: var(--papel);
  font-weight: 600;
  font-size: .96875rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .2s ease;
}

.w-hermanas__enlaces > a::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  opacity: .55;
  transition: transform .2s ease, opacity .2s ease, background-color .2s ease;
}

.w-hermanas__enlaces > a:hover {
  color: var(--mandarina);
}

.w-hermanas__enlaces > a:hover::after {
  opacity: 1;
  background: var(--mandarina);
  transform: translateX(3px);
}

.w-hermanas__mas {
  display: none;
  margin-top: 20px;
  padding: 12px 18px;
  background: transparent;
  color: var(--papel);
  border: 1px solid var(--mandarina);
  border-radius: 0;
  font: 600 .875rem/1 var(--f-titulo);
  cursor: pointer;
}

.w-hermanas__mas:hover {
  background: var(--mandarina);
  color: var(--pizarra);
}

/* Cierre: placa mandarina plana con la flecha de cartel */
.w-cierre {
  position: relative;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 64px);
  padding-right: clamp(22px, 14vw, 220px);
  background: var(--mandarina);
  color: var(--pizarra);
}

.w-cierre::after {
  content: "";
  position: absolute;
  right: clamp(22px, 4vw, 64px);
  bottom: clamp(22px, 4vw, 56px);
  width: clamp(48px, 8vw, 120px);
  height: clamp(34px, 5.6vw, 84px);
  background: var(--pizarra);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
}

.w-cierre p {
  max-width: 40ch;
  margin: 0 0 .7em;
  font: 600 clamp(1.25rem, 1rem + 1vw, 1.75rem)/1.35 var(--f-titulo);
  letter-spacing: -.015em;
  text-wrap: pretty;
}

.w-cierre p:last-child {
  margin-bottom: 0;
}

.w-cierre a {
  color: var(--pizarra);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.w-cierre a:hover {
  text-decoration-color: var(--papel);
}

.w-cierre .w-cta {
  background: var(--pizarra);
  color: var(--papel);
  text-decoration: none;
}

/* --------------------------------------------------------------------------
   Portada: módulos
   -------------------------------------------------------------------------- */

.w-bloque {
  padding-block: var(--bloque);
}

.w-bloque__intro {
  margin-top: 24px;
}

/* Módulo sobre superficie: cambia el fondo entre dos bloques de pizarra */
.w-bloque--superficie {
  background: var(--superficie);
}

/* Tres pasos */
.w-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: clamp(36px, 5vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}

.w-paso {
  padding: 22px 0 36px;
  border-top: 2px solid var(--papel);
  transition: border-color .25s ease;
}

.w-paso:hover {
  border-top-color: var(--mandarina);
}

.w-paso__cabeza {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 22px;
}

.w-paso__num {
  color: var(--mandarina);
  font: 800 clamp(3.25rem, 2rem + 4vw, 6rem)/.86 var(--f-titulo);
  letter-spacing: -.05em;
}

.w-paso__icono {
  flex: none;
  width: 48px;
  height: 48px;
  color: var(--papel);
  transition: transform .3s ease;
}

.w-paso:hover .w-paso__icono {
  transform: translateY(-4px);
}

.w-paso__texto {
  max-width: 34em;
  margin: 0;
  text-wrap: pretty;
}

/* Banda de foto con lema recortado */
.w-banda {
  position: relative;
  margin: 0;
}

.w-banda__foto {
  margin: 0;
}

.w-banda__foto img {
  display: block;
  width: 100%;
  height: clamp(280px, 52vw, 640px);
  object-fit: cover;
  background: var(--superficie);
}

.w-banda__pie {
  position: relative;
  margin-top: -44px;
}

.w-banda__lema {
  max-width: 24ch;
  margin: 0;
  padding: 24px 24px 0 0;
  background: var(--pizarra);
  font: 700 clamp(1.5rem, 1rem + 2.2vw, 3rem)/1.1 var(--f-titulo);
  letter-spacing: -.03em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-banda__lema span {
  color: var(--mandarina);
}

/* Segunda banda: foto más baja y lema sobre placa mandarina */
.w-banda--placa .w-banda__foto img {
  height: clamp(220px, 40vw, 520px);
}

.w-banda--placa .w-banda__lema {
  max-width: 22ch;
  padding: 22px 24px;
  background: var(--mandarina);
  color: var(--pizarra);
}

/* Ruta habitual hasta Grecia: etapas en línea con hitos cuadrados */
.w-ruta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  font: 600 .875rem/1.3 var(--f-titulo);
  letter-spacing: .02em;
}

.w-ruta__rotulo {
  margin: 28px 0 12px;
  color: var(--niebla);
  font: 600 .75rem/1.3 var(--f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.w-ruta__etapa {
  display: inline-flex;
  align-items: center;
  color: var(--papel);
}

.w-ruta__etapa::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 8px;
  background: var(--papel);
}

.w-ruta__etapa + .w-ruta__etapa {
  padding-left: 30px;
  background: linear-gradient(var(--filete-fuerte), var(--filete-fuerte)) 8px 50% / 16px 2px no-repeat;
}

.w-ruta__etapa--mar::before {
  background: transparent;
  border: 2px solid var(--papel);
}

.w-ruta__etapa--fin {
  color: var(--mandarina);
}

.w-ruta__etapa--fin::before {
  background: var(--mandarina);
}

/* Pesos y cifras */
.w-cifras {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: clamp(36px, 5vw, 64px) 0 0;
  background: var(--papel);
  color: var(--pizarra);
}

.w-cifras__item {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 8px;
  padding: 22px 22px 24px;
  border-bottom: 2px solid var(--pizarra);
}

.w-cifras__item:last-child {
  border-bottom: 0;
}

.w-cifras dt {
  color: var(--pizarra);
  font: 700 .9375rem/1.4 var(--f-texto);
  letter-spacing: .02em;
}

.w-cifras dd {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0;
}

.w-cifras__num {
  font: 800 clamp(3.25rem, 1.6rem + 6vw, 7.5rem)/.9 var(--f-titulo);
  letter-spacing: -.05em;
}

.w-cifras__unidad {
  font: 700 clamp(1.125rem, .9rem + .9vw, 1.75rem)/1 var(--f-titulo);
  letter-spacing: -.02em;
}

.w-pesos__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px 64px;
  margin-top: clamp(32px, 4vw, 56px);
}

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

/* Qué se puede enviar */
.w-envia__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.w-envia__foto {
  margin: 0;
}

.w-envia__foto img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--superficie-alta);
}

.w-envia__texto {
  padding: clamp(28px, 5vw, 72px) clamp(20px, 5vw, 72px);
  background: var(--superficie);
}

.w-excluido {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 38em;
  margin: 26px 0;
  padding: 16px 18px;
  background: var(--pizarra);
  border-left: 4px solid var(--mandarina);
  font: 600 1rem/1.45 var(--f-titulo);
  letter-spacing: -.01em;
}

.w-excluido svg {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  color: var(--mandarina);
}

/* Bloque plano mandarina: corta la secuencia de módulos oscuros */
.w-envia__texto--mandarina {
  background: var(--mandarina);
  color: var(--pizarra);
}

.w-envia__texto--mandarina .w-rotulo {
  color: var(--pizarra);
}

.w-envia__texto--mandarina .w-rotulo__num {
  background: var(--pizarra);
  color: var(--mandarina);
}

.w-envia__texto--mandarina .w-rotulo::after {
  background: rgba(30, 36, 43, .4);
}

.w-envia__texto--mandarina .w-texto a {
  color: var(--pizarra);
  font-weight: 700;
  text-decoration-thickness: 2px;
}

.w-envia__texto--mandarina .w-texto a:hover {
  color: var(--pizarra);
  text-decoration-color: var(--papel);
}

.w-envia__texto--mandarina .w-excluido {
  color: var(--papel);
  border-left-color: var(--pizarra);
}

/* Seguro y atención */
.w-seguro__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px 72px;
}

.w-coberturas {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 36px;
}

.w-cobertura {
  padding: 20px 22px 22px;
  border: 1px solid var(--filete-fuerte);
}

.w-cobertura__estado {
  display: inline-block;
  margin: 0 0 14px;
  padding: 5px 9px;
  background: var(--papel);
  color: var(--pizarra);
  font: 700 .75rem/1 var(--f-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.w-cobertura--opcional .w-cobertura__estado {
  background: var(--mandarina);
}

.w-cobertura__nombre {
  margin: 0 0 6px;
  font: 600 1.25rem/1.2 var(--f-titulo);
  letter-spacing: -.015em;
}

.w-cobertura__texto {
  margin: 0;
  color: var(--niebla);
  font-size: .9375rem;
  line-height: 1.5;
}

.w-atencion {
  align-self: start;
  padding: clamp(24px, 4vw, 44px);
  background: var(--superficie);
  border-top: 6px solid var(--mandarina);
}

.w-atencion__icono {
  display: block;
  width: 40px;
  height: 40px;
  margin-bottom: 22px;
  color: var(--mandarina);
}

.w-atencion__rotulo {
  margin: 0 0 8px;
  color: var(--niebla);
  font: 600 .8125rem/1.3 var(--f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.w-atencion__tel {
  display: inline-block;
  color: var(--papel);
  font: 700 clamp(1.625rem, 1.1rem + 2vw, 2.625rem)/1.1 var(--f-titulo);
  letter-spacing: -.03em;
  white-space: nowrap;
  text-decoration: none;
  background: linear-gradient(var(--mandarina), var(--mandarina)) 0 100% / 0 3px no-repeat;
  transition: background-size .3s ease, color .2s ease;
}

.w-atencion__tel:hover {
  color: var(--mandarina);
  background-size: 100% 3px;
}

.w-atencion__horario {
  margin: 10px 0 26px;
  color: var(--papel);
}

.w-atencion__enlace {
  color: var(--papel);
  font: 600 .9375rem/1.3 var(--f-titulo);
  text-decoration: underline;
  text-decoration-color: var(--mandarina);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.w-atencion__enlace:hover {
  color: var(--mandarina);
}

/* Índice de destinos */
.w-destinos {
  padding-block: var(--bloque);
  background: var(--pizarra-honda);
  scroll-margin-top: var(--cab-alto);
}

.w-destinos__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 64px;
  align-items: start;
}

.w-destinos__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3.5vw, 48px);
  margin-top: clamp(40px, 6vw, 80px);
}

/* Plano de Grecia: cada ciudad con página propia, situada por su latitud y
   longitud reales (proyección equirrectangular, sin silueta inventada) */
.w-mapa {
  margin: 0;
  padding: clamp(16px, 2.5vw, 28px);
  background: var(--pizarra);
  border-top: 4px solid var(--mandarina);
}

.w-mapa svg {
  display: block;
  width: 100%;
  height: auto;
}

.w-mapa__reticula {
  fill: none;
  stroke: var(--filete-fuerte);
  stroke-width: 1.5;
  stroke-dasharray: 3 7;
}

.w-mapa__grado {
  fill: #B4BBC4;
  color: #B4BBC4;
  font: 600 18px/1 var(--f-titulo);
  letter-spacing: .04em;
}

.w-mapa__ciudad {
  fill: #F2F2F0;
  color: #F2F2F0;
  font: 600 24px/1 var(--f-titulo);
  letter-spacing: -.01em;
}

.w-mapa__punto--norte { fill: var(--mandarina); }
.w-mapa__punto--centro { fill: var(--cielo); }
.w-mapa__punto--atica { fill: var(--papel); }
.w-mapa__punto--islas { fill: var(--pizarra); stroke: var(--mandarina); stroke-width: 4; }
.w-mapa__punto--puerto { fill: none; stroke: var(--papel); stroke-width: 3; }

.w-mapa__leyenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  color: var(--papel);
  font: 600 .875rem/1.3 var(--f-titulo);
}

.w-mapa__leyenda li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.w-mapa__leyenda li::before {
  content: "";
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--mandarina);
}

.w-mapa__leyenda .w-mapa__clave--centro::before { background: var(--cielo); }
.w-mapa__leyenda .w-mapa__clave--atica::before { background: var(--papel); }
.w-mapa__leyenda .w-mapa__clave--islas::before { background: var(--pizarra); box-shadow: inset 0 0 0 3px var(--mandarina); }
.w-mapa__leyenda .w-mapa__clave--puerto::before { border-radius: 0; background: none; box-shadow: inset 0 0 0 2px var(--papel); }

.w-mapa__nota {
  margin: 10px 0 0;
  color: var(--niebla);
  font-size: .875rem;
  line-height: 1.5;
}

/* Cada región es un cartel propio: cabecera de color plano con su cifra
   y su nombre; debajo, todas sus periferias y ciudades
   enlazadas a la vista, en columnas */
.w-destinos__region {
  background: var(--superficie);
}

.w-destinos__sum {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 2px 16px;
  padding: clamp(18px, 2.5vw, 30px) 64px clamp(18px, 2.5vw, 30px) clamp(16px, 3vw, 36px);
  background: var(--mandarina);
  color: var(--pizarra);
  list-style: none;
  cursor: pointer;
}

/* Damero: en dos columnas se alternan mandarina y papel */
.w-destinos__region:nth-child(4n + 2) > .w-destinos__sum,
.w-destinos__region:nth-child(4n + 3) > .w-destinos__sum {
  background-color: var(--papel);
}

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

.w-destinos__sum::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 24px;
  width: 30px;
  height: 30px;
  border: 2px solid var(--pizarra);
  background:
    linear-gradient(var(--pizarra), var(--pizarra)) center / 10px 2px no-repeat,
    linear-gradient(var(--pizarra), var(--pizarra)) center / 2px 10px no-repeat;
  transition: transform .25s ease;
}

.w-destinos__region[open] > .w-destinos__sum::after {
  transform: rotate(45deg);
}

/* Cifra de cartel: cuántos destinos tiene la región, en grande */
.w-destinos__cifra {
  grid-row: span 2;
  min-width: 1.15em;
  padding-right: 16px;
  border-right: 2px solid var(--pizarra);
  color: var(--pizarra);
  font: 800 clamp(3rem, 2rem + 3vw, 4.75rem)/.82 var(--f-titulo);
  letter-spacing: -.06em;
  transition: transform .25s ease;
}

.w-destinos__region:hover .w-destinos__cifra {
  transform: translateY(-3px);
}

.w-destinos__nombre {
  font: 700 clamp(1.375rem, 1.1rem + .9vw, 1.875rem)/1.12 var(--f-titulo);
  letter-spacing: -.02em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-destinos__desc {
  max-width: 34em;
  margin: 0 0 18px;
  color: var(--papel);
  font-size: .96875rem;
  line-height: 1.55;
  text-wrap: pretty;
}

.w-destinos__cuenta {
  align-self: start;
  color: var(--pizarra);
  font: 700 .75rem/1.3 var(--f-titulo);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.w-destinos__nombre {
  align-self: end;
}

.w-destinos__cuerpo {
  padding: clamp(24px, 3vw, 36px) clamp(18px, 3vw, 40px) clamp(28px, 3.5vw, 44px);
}

/* Enlace a la página de la región: texto con filete, no botón */
.w-destinos__principal {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 3px;
  color: var(--papel);
  font: 700 .9375rem/1.3 var(--f-titulo);
  text-decoration: none;
  border-bottom: 2px solid var(--mandarina);
  transition: color .2s ease;
}

.w-destinos__principal::after {
  content: "";
  flex: none;
  width: 16px;
  height: 11px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  transition: transform .2s ease;
}

.w-destinos__principal:hover {
  color: var(--mandarina);
}

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

/* Jerarquía en tres niveles: región (cabecera de color), periferia (en
   Sora, a buen cuerpo) y, colgadas de ella con un filete, sus ciudades.
   Sin numeración ni letra pequeña: filas con aire, nunca un muro. */
.w-destinos__lista {
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  border-top: 2px solid var(--filete-fuerte);
}

/* Lista sin ciudades debajo (Ática): en dos columnas ordenadas */
.w-destinos__lista:not(:has(.w-destinos__ciudades)) {
  columns: 2 10rem;
  column-gap: 32px;
}

.w-destinos__lista > li {
  position: relative;
  padding: 16px 0 18px;
  border-bottom: 1px solid var(--filete);
  break-inside: avoid;
}

.w-destinos__lista > li > a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  color: var(--papel);
  font: 600 clamp(1.125rem, 1rem + .4vw, 1.3125rem)/1.25 var(--f-titulo);
  letter-spacing: -.015em;
  text-decoration: none;
  transition: color .2s ease;
}

.w-destinos__ciudades {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin-top: 10px;
  padding-left: 14px;
  border-left: 2px solid var(--mandarina);
  font-size: 1rem;
  line-height: 1.4;
}

.w-destinos__ciudades a {
  color: var(--papel);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgba(255, 138, 61, .55);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color .2s ease, text-decoration-color .2s ease;
}

.w-destinos__ciudades a:hover {
  color: var(--mandarina);
  text-decoration-color: var(--mandarina);
}

.w-destinos__lista > li > a::after {
  content: "";
  flex: none;
  width: 14px;
  height: 10px;
  background: var(--mandarina);
  -webkit-mask: var(--flecha) no-repeat center / contain;
  mask: var(--flecha) no-repeat center / contain;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .2s ease, transform .2s ease;
}

.w-destinos__lista > li > a:hover {
  color: var(--mandarina);
}

.w-destinos__lista > li > a:hover::after {
  opacity: 1;
  transform: none;
}

.w-destinos__modos {
  margin-top: clamp(44px, 6vw, 88px);
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--filete-fuerte);
}

.w-destinos__modos .w-h3 {
  margin-bottom: 22px;
}

/* Preguntas de la portada */
.w-faq--portada {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.w-faq--portada > h2::before {
  content: "Dudas";
  display: block;
  width: max-content;
  margin-bottom: 18px;
  padding: 6px 8px;
  background: var(--mandarina);
  color: var(--pizarra);
  font: 600 .8125rem/1.2 var(--f-titulo);
  letter-spacing: .1em;
  text-transform: uppercase;
}

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

.w-pie {
  background: var(--pizarra-honda);
  color: var(--papel);
}

/* El único uso de la greca: friso fino que separa el contenido del pie */
.w-pie::before {
  content: "";
  display: block;
  height: 14px;
  background: var(--pizarra) var(--greca-mandarina) repeat-x 0 50% / 14px 14px;
}

.w-pie__cartel {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 28px 48px;
  align-items: end;
  padding-block: clamp(48px, 7vw, 104px) clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--filete);
}

.w-pie__lema {
  margin: 0;
  font: 800 clamp(2.25rem, 1rem + 6vw, 7rem)/.95 var(--f-titulo);
  letter-spacing: -.045em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-pie__lema span {
  color: var(--mandarina);
}

.w-pie__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}

.w-pie__tel {
  color: var(--papel);
  font: 600 1.125rem/1.2 var(--f-titulo);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--mandarina);
  padding-bottom: 3px;
  transition: color .2s ease, border-color .2s ease;
}

.w-pie__tel:hover {
  color: var(--mandarina);
}

.w-pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 36px 40px;
  padding-block: clamp(40px, 5vw, 64px);
}

.w-pie__marca .w-marca {
  min-height: 0;
}

.w-pie__presta {
  max-width: 28em;
  margin: 18px 0 0;
  color: var(--niebla);
  font-size: .9375rem;
  line-height: 1.6;
}

.w-pie__rotulo {
  margin: 0 0 14px;
  color: var(--mandarina);
  font: 700 .875rem/1.3 var(--f-titulo);
  letter-spacing: .14em;
  text-transform: uppercase;
}

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

.w-pie__lista li + li {
  margin-top: 8px;
}

.w-pie__lista a,
.w-pie__dato a {
  color: var(--papel);
  font-size: .9375rem;
  text-decoration: none;
  transition: color .2s ease;
}

.w-pie__lista a:hover,
.w-pie__dato a:hover {
  color: var(--mandarina);
}

.w-pie__dato {
  margin: 0 0 8px;
  color: var(--niebla);
  font-size: .9375rem;
}

.w-pie__dato a {
  font-family: var(--f-titulo);
  font-weight: 600;
  font-size: 1.0625rem;
}

.w-pie__legal {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding-block: 22px 28px;
  border-top: 1px solid var(--filete);
  color: var(--niebla);
  font-size: .8125rem;
  line-height: 1.5;
}

.w-pie__legal p {
  margin: 0;
}

.w-pie__legales {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.w-pie__legales a {
  color: var(--niebla);
  text-decoration: none;
  transition: color .2s ease;
}

.w-pie__legales a:hover {
  color: var(--papel);
  text-decoration: underline;
  text-underline-offset: 3px;
}

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

/* Misma retícula que el resto: cabecera cartel a todo el contenedor y el
   formulario centrado (máx. 820 px) sobre el bloque común del cotizador */
.w-recorrido {
  padding-block: clamp(20px, 3vw, 40px) var(--bloque);
}

.w-recorrido__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px 48px;
  align-items: end;
  align-items: last baseline;
  margin-bottom: clamp(24px, 4vw, 48px);
}

.w-recorrido__cabeza > .w-migas {
  grid-column: 1 / -1;
}

.w-recorrido__titulo {
  padding-top: clamp(12px, 2vw, 28px);
}

.w-recorrido__h1 {
  margin: 16px 0 0;
  font: 800 clamp(2rem, 1rem + 4vw, 4.75rem)/1 var(--f-titulo);
  letter-spacing: -.035em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}

.w-recorrido__h1 span {
  color: var(--mandarina);
}

/* Su última línea comparte línea base con la del H1; filete mandarina a la
   izquierda */
.w-recorrido__nota {
  align-self: end;
  align-self: last baseline;
  max-width: 30em;
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--mandarina);
  color: var(--papel);
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.6;
  text-wrap: pretty;
}

.w-recorrido__nota a {
  color: var(--papel);
  text-decoration-color: var(--mandarina);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

.w-recorrido__nota a:hover {
  color: var(--mandarina);
}

.w-recorrido__bloque {
  scroll-margin-top: calc(var(--cab-alto) + 12px);
}

.w-recorrido__marco {
  max-width: 820px;
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Variantes de cabecera por tipo de página (clase de tipo en <body>)
   -------------------------------------------------------------------------- */

/* Una composición por tipo de página; el titular y el botón de precio
   siempre en el primer pantallazo:
   · SERVICIO (.pag-servicio) «columna»: texto a la izquierda y ficha en
     filas a la derecha, que acaba donde acaba; la foto, en banda después.
   · REGIÓN (.pag-region) «cartel con mapa»: H1 gigante a todo el ancho;
     debajo, entradilla, botón y ficha a la izquierda y, a la derecha, el
     mapa con las ciudades de la región encendidas; la foto, en banda.
   · PERIFERIA (.pag-division) «bloque»: a la derecha, ficha en un bloque
     plano mandarina y la foto debajo, hasta la altura del texto.
   · CIUDAD (.pag-ciudad) «foto vertical»: a la derecha la foto en alto y,
     al pie, la ficha en papel con el primer dato en grande.
   · CONTACTO (.pag-contacto) «tipográfica»: sin foto; H1 y entradilla en
     dos columnas, el botón bajo la entradilla y la ficha en banda de papel
     con el teléfono en grande. */

/* Primer dato de la ficha en grande (todos menos servicio) */
.w-pag:not(.pag-servicio) .w-heroe .w-datos__fila:first-child {
  display: block;
  padding: 18px 20px 16px;
  border-bottom: 2px solid var(--filete-fuerte);
}

.w-pag:not(.pag-servicio) .w-heroe .w-datos__fila:first-child dd {
  margin-top: 8px;
  color: var(--mandarina);
  font: 800 clamp(1.625rem, 1.1rem + 1.8vw, 2.75rem)/1.05 var(--f-titulo);
  letter-spacing: -.03em;
  -webkit-hyphens: none;
  hyphens: none;
}

/* Periferia: ficha en un bloque mandarina con texto pizarra */
.w-pag.pag-division .w-heroe .w-datos {
  background: var(--mandarina);
  border-top: 0;
}

.w-pag.pag-division .w-heroe .w-datos__fila,
.w-pag.pag-division .w-heroe .w-datos__fila:first-child {
  border-bottom-color: rgba(30, 36, 43, .28);
}

.w-pag.pag-division .w-heroe .w-datos dt,
.w-pag.pag-division .w-heroe .w-datos dd,
.w-pag.pag-division .w-heroe .w-datos dd a,
.w-pag.pag-division .w-heroe .w-datos__fila:first-child dd {
  color: var(--pizarra);
}

.w-pag.pag-division .w-heroe .w-datos dd a {
  text-decoration-color: var(--pizarra);
}

/* Ciudad: foto antes que la ficha, y la ficha en papel */
.w-pag.pag-ciudad .w-heroe__foto {
  order: -1;
}

.w-pag.pag-ciudad .w-heroe .w-datos {
  background: var(--papel);
  border-top: 0;
}

.w-pag.pag-ciudad .w-heroe .w-datos__fila,
.w-pag.pag-ciudad .w-heroe .w-datos__fila:first-child {
  border-bottom-color: rgba(30, 36, 43, .2);
}

.w-pag.pag-ciudad .w-heroe .w-datos dt {
  color: #4A525C;
}

.w-pag.pag-ciudad .w-heroe .w-datos dd,
.w-pag.pag-ciudad .w-heroe .w-datos dd a {
  color: var(--pizarra);
}

.w-pag.pag-ciudad .w-heroe .w-datos__fila:first-child dd {
  color: #A9470A;
}

.w-pag.pag-ciudad .w-heroe .w-datos dd a {
  text-decoration-color: var(--pizarra);
}

/* Servicio y región: la foto, en banda ancha bajo la cabecera */
.w-pag:is(.pag-servicio, .pag-region) .w-heroe__foto .w-foto img {
  aspect-ratio: auto;
  height: clamp(200px, 34vw, 460px);
}

/* Contacto: composición tipográfica, sin foto de banco */
.w-pag.pag-contacto .w-heroe__foto {
  display: none;
}

.w-pag.pag-contacto .w-heroe .w-datos {
  background: var(--papel);
}

.w-pag.pag-contacto .w-heroe .w-datos__fila,
.w-pag.pag-contacto .w-heroe .w-datos__fila:first-child {
  border-bottom-color: rgba(30, 36, 43, .2);
}

.w-pag.pag-contacto .w-heroe .w-datos dt {
  color: #4A525C;
}

.w-pag.pag-contacto .w-heroe .w-datos dd,
.w-pag.pag-contacto .w-heroe .w-datos dd a,
.w-pag.pag-contacto .w-heroe .w-datos__fila:first-child dd {
  color: var(--pizarra);
}

.w-pag.pag-contacto .w-heroe__h1 {
  font-size: clamp(2.75rem, 1rem + 6vw, 6.5rem);
  line-height: .95;
}

/* Contacto: los bloques del cuerpo, en paneles de dos en dos (sin media
   pantalla vacía junto a una sección corta); el titular arriba, sin
   numeración, para que cada panel muestre texto desde la primera línea */
.w-pag.pag-contacto .w-cuerpo > .w-seccion {
  margin-top: 16px;
  padding: clamp(22px, 3.5vw, 40px);
}

.w-pag.pag-contacto .w-cuerpo > .w-seccion:not(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) {
  border-top: 4px solid var(--mandarina);
  background: var(--superficie);
}

.w-pag.pag-contacto .w-cuerpo > .w-seccion > h2 {
  margin-bottom: 14px;
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
}

.w-pag.pag-contacto .w-cuerpo .w-seccion > h2::before {
  display: none;
}

/* Titulares largos (los marca web.js): cuerpo menor para no pasar de 3 líneas */
.w-pag .w-heroe__h1.w-heroe__h1--largo {
  font-size: clamp(1.75rem, 1rem + 2.2vw, 2.875rem);
  line-height: 1.06;
}


/* --------------------------------------------------------------------------
   Ajustes por ancho (siempre al final)
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  .w-foto img {
    aspect-ratio: 16 / 7;
  }

  .w-banda__pie {
    margin-top: -96px;
  }

  .w-banda__lema {
    padding: 32px 40px 0 0;
  }

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

  .w-cifras__item {
    padding: 28px 28px 30px;
    border-bottom: 0;
    border-right: 2px solid var(--pizarra);
  }

  .w-cifras__item:last-child {
    border-right: 0;
  }

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

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

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

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

@media (min-width: 720px) {
  /* En pantallas medianas y grandes el índice de destinos queda siempre
     abierto (lo abre web.js; sin JS cada región se abre con su botón) */
  .js .w-destinos__sum {
    cursor: default;
    padding-right: clamp(18px, 3vw, 36px);
  }

  .js .w-destinos__sum::after {
    display: none;
  }
}

@media (min-width: 860px) {
  .w-pasos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 clamp(28px, 3.5vw, 56px);
  }

  .w-envia__rejilla {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }

  .w-envia__foto img {
    aspect-ratio: auto;
    min-height: 100%;
  }

  .w-pie__cartel {
    grid-template-columns: minmax(0, 1fr) auto;
  }
}

@media (min-width: 1000px) {
  .w-portada-heroe__rejilla,
  .w-heroe__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: 48px clamp(40px, 5vw, 88px);
    align-items: start;
  }

  .w-portada-heroe__rejilla {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }

  /* Portada: la foto arranca con el antetítulo y la ficha acaba con los
     botones; la foto se estira para que las dos columnas cuadren arriba y
     abajo */
  .w-portada-heroe__rejilla {
    align-items: stretch;
  }

  .w-portada-heroe__accion {
    margin-top: auto;
    padding-top: 28px;
  }

  .w-portada-heroe__lado {
    align-self: stretch;
  }

  .w-portada-heroe__foto {
    position: relative;
    flex: 1 1 auto;
    min-height: 220px;
  }

  .w-portada-heroe__foto img {
    position: absolute;
    inset: 0;
    height: 100%;
    aspect-ratio: auto;
  }

  /* Interiores, composición base (servicio): texto y botón a la izquierda,
     ficha a la derecha arriba y sin relleno debajo; el cotizador, si lo
     hay, en la fila entera; la foto, en banda al final */
  .w-heroe__rejilla {
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "texto  lado"
      "accion lado"
      "foto   foto";
    row-gap: 0;
  }

  .w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador),
  .w-heroe__rejilla:has(> .w-heroe__accion:empty) {
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "texto  lado"
      "accion accion"
      "foto   foto";
  }

  .w-heroe__lado {
    display: contents;
  }

  .w-heroe .w-datos {
    grid-area: lado;
    align-self: start;
  }

  .w-heroe__foto {
    grid-area: foto;
    margin-top: clamp(40px, 4vw, 64px);
  }

  .w-heroe__accion {
    align-self: start;
    margin-top: 28px;
  }

  .w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador) > .w-heroe__accion {
    margin-top: clamp(40px, 4vw, 64px);
  }

  /* Periferia y ciudad: el lado es una columna con ficha y foto que llega
     justo a la altura del texto (la foto rellena, nunca sobra) */
  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__lado {
    grid-area: lado;
    display: flex;
    flex-direction: column;
    align-self: stretch;
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe .w-datos {
    align-self: auto;
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__foto {
    position: relative;
    flex: 1 1 auto;
    min-height: 200px;
    margin-top: 0;
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__foto .w-foto {
    position: absolute;
    inset: 0;
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__foto .w-foto img {
    height: 100%;
    aspect-ratio: auto;
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__rejilla {
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "texto  lado"
      "accion lado";
  }

  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador),
  .w-pag:is(.pag-division, .pag-ciudad) .w-heroe__rejilla:has(> .w-heroe__accion:empty) {
    grid-template-rows: auto auto;
    grid-template-areas:
      "texto  lado"
      "accion accion";
  }

  /* Ciudad: foto en alto, más protagonista que la ficha */
  .w-pag.pag-ciudad .w-heroe__rejilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .w-pag.pag-ciudad .w-heroe__foto {
    min-height: 300px;
  }

  /* Región: cartel con mapa. Texto y lado se disuelven en la rejilla para
     colocar cada pieza en su sitio */
  .w-pag.pag-region .w-heroe__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto auto auto 1fr auto auto;
    grid-template-areas:
      "ante   ante"
      "h1     h1"
      "entr   mapa"
      "boton  mapa"
      "datos  mapa"
      "accion accion"
      "foto   foto";
    column-gap: clamp(40px, 5vw, 88px);
  }

  .w-pag.pag-region .w-heroe__texto {
    display: contents;
  }

  .w-pag.pag-region .w-heroe .w-antetitulo {
    grid-area: ante;
    justify-self: start;
  }

  .w-pag.pag-region .w-heroe__h1 {
    grid-area: h1;
    max-width: 17ch;
    margin-bottom: clamp(28px, 3vw, 44px);
  }

  .w-pag.pag-region .w-heroe__h1:not(.w-heroe__h1--largo) {
    font-size: clamp(3rem, .6rem + 5.6vw, 7rem);
    line-height: .96;
    letter-spacing: -.045em;
  }

  .w-pag.pag-region .w-heroe .w-entradilla {
    grid-area: entr;
    align-self: start;
    margin-top: 0;
  }

  .w-pag.pag-region .w-heroe__boton {
    grid-area: boton;
  }

  .w-pag.pag-region .w-heroe .w-datos {
    grid-area: datos;
    align-self: start;
    margin-top: 32px;
  }

  .w-pag.pag-region .w-heroe__mapa {
    grid-area: mapa;
    display: block;
    align-self: start;
    width: 100%;
    height: auto;
    padding: clamp(16px, 2vw, 24px);
    background: var(--pizarra-honda);
    border-top: 4px solid var(--mandarina);
  }

  .w-pag.pag-region .w-heroe__accion {
    grid-area: accion;
  }

  /* Sin cotizador, la línea de llamada ocupa el sitio del botón */
  .w-pag.pag-region .w-heroe__rejilla:not(:has(> .w-heroe__accion .w-cotizador)) > .w-heroe__accion {
    grid-area: boton;
  }

  /* Contacto: H1 y entradilla en dos columnas, el botón bajo la entradilla
     y la ficha en una banda de papel a todo el ancho con el teléfono en
     grande */
  .w-pag.pag-contacto .w-heroe__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas:
      "ante   ante"
      "h1     entr"
      "h1     accion"
      "datos  datos";
    row-gap: 0;
  }

  .w-pag.pag-contacto .w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador) {
    grid-template-areas:
      "ante   ante"
      "h1     entr"
      "h1     boton"
      "datos  datos"
      "accion accion";
  }

  .w-pag.pag-contacto .w-heroe__boton {
    grid-area: boton;
  }

  .w-pag.pag-contacto .w-heroe__texto,
  .w-pag.pag-contacto .w-heroe__lado {
    display: contents;
  }

  .w-pag.pag-contacto .w-heroe .w-antetitulo {
    grid-area: ante;
    justify-self: start;
  }

  .w-pag.pag-contacto .w-heroe__h1 {
    grid-area: h1;
    align-self: end;
  }

  .w-pag.pag-contacto .w-heroe .w-entradilla {
    grid-area: entr;
    align-self: end;
    margin-top: 0;
  }

  .w-pag.pag-contacto .w-heroe .w-datos {
    grid-area: datos;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    margin-top: clamp(36px, 4vw, 56px);
  }

  .w-pag.pag-contacto .w-heroe .w-datos__fila,
  .w-pag.pag-contacto .w-heroe .w-datos__fila:first-child {
    display: block;
    padding: 22px 24px 24px;
    border-bottom: 0;
    border-right: 1px solid rgba(30, 36, 43, .2);
  }

  .w-pag.pag-contacto .w-heroe .w-datos__fila:first-child {
    grid-column: span 2;
  }

  .w-pag.pag-contacto .w-heroe .w-datos__fila:last-child {
    border-right: 0;
  }

  .w-pag.pag-contacto .w-heroe .w-datos dd {
    margin-top: 8px;
  }

  .w-pag.pag-contacto .w-heroe .w-datos__fila:first-child dd {
    font-size: clamp(1.75rem, 1rem + 1.6vw, 2.5rem);
  }

  .w-pag.pag-contacto .w-heroe__accion {
    grid-area: accion;
    margin-top: 28px;
  }

  .w-pag.pag-contacto .w-heroe__rejilla:has(> .w-heroe__accion .w-cotizador) > .w-heroe__accion {
    margin-top: clamp(40px, 4vw, 64px);
  }

  /* Contacto: paneles de dos en dos; el último, si queda solo, a todo el ancho */
  .w-pag[class*="contacto"] .w-cuerpo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 16px;
    align-items: stretch;
    padding-top: clamp(16px, 2.5vw, 40px);
  }

  .w-pag[class*="contacto"] .w-cuerpo > * {
    grid-column: 1 / -1;
  }

  .w-pag[class*="contacto"] .w-cuerpo > .w-seccion {
    grid-column: auto;
    display: block;
  }

  .w-pag[class*="contacto"] .w-cuerpo > .w-seccion:nth-of-type(odd):not(:has(+ .w-seccion)) {
    grid-column: 1 / -1;
  }

  .w-pag[class*="contacto"] .w-cuerpo > .w-seccion > h2 {
    position: static;
  }

  .w-pesos__cuerpo {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }

  .w-seguro__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

  .w-destinos__cabeza {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  }

  .w-recorrido__cabeza {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }

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

@media (min-width: 1040px) {
  .js .w-cab__conmutador {
    display: none;
  }

  .w-cab__barra {
    flex-wrap: nowrap;
  }

  .w-menu,
  .js .w-menu {
    position: static;
    display: block;
    width: auto;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
  }

  .w-menu__lista,
  .js .w-menu__lista {
    flex-direction: row;
    align-items: center;
    gap: 0 clamp(18px, 2vw, 30px);
    padding: 0;
  }

  .js .w-menu__item {
    border: 0;
  }

  .js .w-menu__item--cta {
    padding: 0 0 0 8px;
  }

  .js .w-menu__enlace {
    display: inline-block;
    padding: 8px 0;
    font-size: .9375rem;
    font-weight: 500;
    letter-spacing: 0;
    background: linear-gradient(var(--mandarina), var(--mandarina)) 0 100% / 0 2px no-repeat;
  }

  .js .w-menu__enlace:hover {
    background-size: 100% 2px;
  }

  .js .w-menu__enlace::after {
    display: none;
  }

  .js .w-menu__cta {
    width: auto;
    padding: 11px 16px;
    font-size: .875rem;
  }

  /* Submenú desplegable sobre la página */
  .w-menu__item--sub {
    position: relative;
  }

  .js .w-menu__abre {
    display: inline-flex;
    width: auto;
  }

  .js .w-menu__abre::after {
    display: block;
    width: 12px;
    height: 9px;
  }

  .w-menu__sub,
  .js .w-menu__sub {
    position: absolute;
    top: 100%;
    left: -18px;
    z-index: 5;
    display: none;
    width: max-content;
    min-width: 250px;
    margin: 0;
    padding: 8px 18px 10px;
    background: var(--superficie);
    border: 0;
    border-top: 3px solid var(--mandarina);
  }

  .w-menu__item--sub:hover > .w-menu__sub,
  .w-menu__item--sub:focus-within > .w-menu__sub,
  .js .w-menu__abre[aria-expanded="true"] + .w-menu__sub {
    display: block;
  }

  .w-menu__sub li + li,
  .js .w-menu__sub li + li {
    border-top: 1px solid var(--filete);
  }

  .w-menu__subenlace,
  .js .w-menu__subenlace {
    padding: 11px 0;
    font-size: .9375rem;
  }
}

@media (min-width: 1100px) {
  .w-seccion,
  .w-faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 5vw, 96px);
    row-gap: 0;
  }

  .w-seccion > *,
  .w-faq > * {
    grid-column: 2;
  }

  .w-seccion > h2,
  .w-faq > h2 {
    grid-column: 1;
    grid-row: 1 / span 60;
    align-self: start;
    position: sticky;
    top: calc(var(--cab-alto) + 32px);
  }
}

@media (max-width: 719px) {
  .w-hermanas--plegada .w-hermanas__enlaces > a:nth-child(n + 9) {
    display: none;
  }

  .w-hermanas--plegable .w-hermanas__mas {
    display: inline-flex;
  }

  .w-datos__fila {
    padding: 11px 14px;
    gap: 12px;
  }

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

  .w-faq__item summary {
    padding-right: 48px;
  }

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

  .w-cierre::after {
    display: none;
  }

  .w-cierre {
    padding-right: clamp(22px, 5vw, 64px);
  }
}

/* Tablas en móvil: una tarjeta por fila; el rótulo de cada dato sale de su <th> (data-label) */
@media (max-width: 639px) {
  .w-tabla {
    overflow: visible;
    border-top: 0;
    background: none;
  }

  /* Bloques sin ancho fijo: ocupan su caja sin sumarle el relleno */
  .w-tabla table,
  .w-tabla tbody,
  .w-tabla tr,
  .w-tabla td {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100%;
  }

  /* Tablas largas plegadas: se ven las tres primeras filas y un botón abre el resto */
  .w-tabla--plegada tbody tr:nth-child(n + 4) {
    display: none;
  }

  .w-tabla--plegable + .w-tabla__mas {
    display: inline-flex;
  }

  .w-tabla caption {
    display: block;
    padding: 0 0 12px;
  }

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

  /* Cada fila, una ficha de cartel: título grande y los datos debajo con
     su rótulo, sin caja gris de hoja de especificaciones */
  .w-tabla tbody tr {
    margin-bottom: 26px;
    padding-left: 16px;
    background: transparent;
    border-left: 4px solid var(--mandarina);
  }

  .w-tabla tbody tr:hover {
    background: transparent;
  }

  .w-tabla td {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: 12px;
    align-items: baseline;
    padding: 11px 16px;
  }

  .w-tabla td:last-child {
    border-bottom: 0;
  }

  .w-tabla td {
    font-size: 1rem;
  }

  .w-tabla td::before {
    content: attr(data-label);
    color: var(--niebla);
    font: 700 .875rem/1.35 var(--f-texto);
    letter-spacing: .02em;
  }

  .w-tabla td:not([data-label]) {
    grid-template-columns: minmax(0, 1fr);
  }

  .w-tabla td:not([data-label])::before {
    display: none;
  }

  /* La primera celda hace de título de la ficha */
  .w-tabla td:first-child {
    grid-template-columns: minmax(0, 1fr);
    padding: 0 0 10px;
    border-bottom: 0;
    font: 700 1.5rem/1.15 var(--f-titulo);
    letter-spacing: -.025em;
  }

  .w-tabla td:first-child::before {
    display: none;
  }

  .w-tabla td:not(:first-child) {
    padding: 10px 0;
    border-bottom: 1px solid var(--filete);
    line-height: 1.5;
  }

  .w-tabla td:last-child {
    padding-bottom: 2px;
  }

  .w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla caption {
    color: var(--pizarra);
    background: transparent;
  }

  /* Dentro de los bloques de color, las fichas vuelven a pizarra con su
     propio relleno para que el texto claro se lea */
  .w-cuerpo > .w-seccion:is(:nth-of-type(4n + 3), :nth-of-type(4n + 5)) .w-tabla tbody tr {
    padding: 16px 16px 14px;
    background: var(--pizarra);
  }
}

/* Móvil estrecho: en cada tarjeta, rótulo encima y valor debajo, a todo el
   ancho (nada de dos columnas apretadas a 390 px) */
@media (max-width: 479px) {
  .w-tabla td {
    display: block;
    padding: 10px 16px 11px;
  }

  .w-tabla td::before {
    display: block;
    margin-bottom: 3px;
    font-size: .8125rem;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
}

/* Antetítulos y rótulos de cartel en móvil estrecho: menos tracking, una línea */
@media (max-width: 479px) {
  .w-antetitulo {
    font-size: .875rem;
    letter-spacing: .04em;
  }

  .w-cotizador__rotulo {
    font-size: .8125rem;
    letter-spacing: .05em;
  }

  /* Portada: titular con aire entre líneas y entradilla corta */
  .w-titular {
    line-height: 1.06;
  }

  .w-pag--portada .w-entradilla {
    margin-top: 18px;
    font-size: 1.0625rem;
    line-height: 1.55;
  }

  .w-cotizador__rotulo::before,
  .w-cotizador__rotulo::after {
    max-width: 40px;
  }

  .w-marca__pais {
    font-size: 1.375rem;
  }
}

/* Portada en móvil: módulos compactos para no apilar pantallas sin
   descanso (cifras en una fila, mapa fuera, regiones plegadas, modalidades
   en filas) */
@media (max-width: 639px) {
  .w-bloque,
  .w-destinos {
    padding-block: 48px;
  }

  .w-pasos {
    margin-top: 28px;
  }

  .w-paso {
    padding: 16px 0 22px;
  }

  .w-paso__cabeza {
    margin-bottom: 10px;
  }

  .w-paso__num {
    font-size: 2.5rem;
  }

  .w-paso__icono {
    width: 36px;
    height: 36px;
  }

  .w-banda__foto img {
    height: 220px;
  }

  .w-banda--placa .w-banda__foto img {
    height: 180px;
  }

  .w-cifras {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 28px;
  }

  .w-cifras__item {
    padding: 14px 12px 16px;
    border-bottom: 0;
    border-right: 2px solid var(--pizarra);
  }

  .w-cifras__item:last-child {
    border-right: 0;
  }

  .w-cifras dd {
    flex-wrap: wrap;
    gap: 2px 6px;
  }

  .w-cifras__num {
    font-size: 2.25rem;
  }

  .w-cifras__unidad {
    font-size: 1rem;
  }

  .w-cifras dt {
    font-size: .8125rem;
    line-height: 1.3;
  }

  .w-envia__foto img {
    aspect-ratio: 16 / 9;
  }

  .w-mapa {
    display: none;
  }

  .w-destinos__rejilla {
    gap: 8px;
    margin-top: 32px;
  }

  .w-destinos__sum {
    padding: 14px 56px 14px 14px;
    gap: 0 12px;
  }

  .w-destinos__sum::after {
    top: 50%;
    margin-top: -15px;
  }

  .w-destinos__cifra {
    font-size: 2.25rem;
    padding-right: 12px;
  }

  .w-destinos__nombre {
    font-size: 1.25rem;
  }

  .w-destinos__modos {
    margin-top: 40px;
    padding-top: 28px;
  }

  .w-modos {
    gap: 6px;
  }

  .w-modos .w-tarjeta {
    min-height: 0;
    padding: 14px 48px 14px 16px;
    gap: 2px;
  }

  .w-modos .w-tarjeta::before {
    display: none;
  }

  .w-modos .w-tarjeta::after {
    left: auto;
    right: 16px;
    top: 50%;
    bottom: auto;
    margin-top: -7px;
    width: 18px;
    height: 13px;
  }

  .w-modos .w-tarjeta__nombre {
    font-size: 1.0625rem;
  }

  .w-modos .w-tarjeta__texto {
    font-size: .9375rem;
  }

  .w-faq__item summary {
    padding-block: 16px;
  }
}

@media (max-width: 380px) {
  .w-marca__pre {
    font-size: .625rem;
  }

  .w-cab__conmutador-texto {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .w-cab, .w-cab *, .w-cta, .w-boton, .w-tarjeta, .w-paso, .w-paso__icono,
  .w-tarjeta::after, .w-cta::after, .w-boton::after, .w-faq__item summary::after,
  .w-destinos__sum::after, .w-destinos__lista a::after, .w-hermanas__enlaces > a::after,
  .w-destinos__cifra, .w-menu__abre::after, .w-destinos__principal::after,
  .w-tabla__mas {
    transition: none;
  }

  .w-destinos__region:hover .w-destinos__cifra {
    transform: none;
  }

  .w-cta:hover,
  .w-boton:hover {
    transform: none;
  }
}