/* ==========================================================================
Enviar paquete a Holanda · hoja de estilo
Maqueta «técnico oscuro»: líneas de plano, coordenadas y datos en
monoespaciada sobre gris hormigón y cian.
Base pensada para móvil; los @media de ajuste van al final del fichero.
========================================================================== */
:root {
--noche: #12181C;
--grafito: #1C2228;
--grafito-2: #232B32;
--pizarra: #37474F;
--hormigon: #EEF0F2;
--blanco: #FFFFFF;
--cian: #00A6C8;
--cian-vivo: #3FC3DD;
--cian-tinta: #00718A; /* cian para texto sobre claro (4,9:1 en hormigón) */
--cian-velo: #DCF2F7;
--tiza: #E8ECEF; /* texto principal sobre oscuro */
--vapor: #C9D2D8; /* entradillas sobre oscuro */
--niebla: #A3B0B9; /* texto secundario sobre oscuro */
--gris-tinta: #4A5761; /* texto secundario sobre claro */
--filete: #CDD4D9;
--filete-osc: rgba(255, 255, 255, .12);
--filete-cian: rgba(0, 166, 200, .42);
--f-titulo: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
--f-texto: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
--f-mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace;
--ancho: 76rem;
--margen: clamp(1rem, 4vw, 2.5rem);
--cab-alto: 4rem;
--radio: 3px;
--capa: linear-gradient(transparent, transparent);
}
/* --- Base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
scroll-behavior: smooth;
scroll-padding-top: calc(var(--cab-alto) + 1rem);
}
body {
margin: 0;
font-family: var(--f-texto);
font-size: 1.0625rem;
line-height: 1.65;
color: var(--grafito);
background: var(--hormigon);
overflow-wrap: break-word;
-webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; height: auto; }
svg { flex-shrink: 0; }
h1, h2, h3 {
margin: 0;
font-family: var(--f-titulo);
font-weight: 600;
line-height: 1.1;
letter-spacing: -.02em;
hyphens: none;
-webkit-hyphens: none;
text-wrap: balance;
}
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
a { color: inherit; }
strong { font-weight: 600; }
:focus-visible {
outline: 2px solid var(--cian);
outline-offset: 3px;
}
.vh {
position: absolute !important;
width: 1px; height: 1px;
margin: -1px; padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
/* aunque no se vea, se mide: tinta oscura sobre blanco */
color: var(--grafito) !important;
background: var(--blanco) !important;
}
.salto {
position: absolute;
left: 1rem; top: -4rem;
z-index: 100;
padding: .6rem 1rem;
background: var(--cian);
color: var(--noche);
font: 600 .95rem/1.2 var(--f-titulo);
text-decoration: none;
}
.salto:focus { top: .75rem; }
.c {
width: 100%;
max-width: var(--ancho);
margin-inline: auto;
padding-inline: var(--margen);
}
/* Papel de plano: rejilla menor cada 32 px y mayor cada 160 px, la misma en todas las páginas */
.plano {
background-color: var(--grafito);
background-image:
var(--capa),
linear-gradient(rgba(0, 166, 200, .055) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 166, 200, .055) 1px, transparent 1px),
linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
background-size: 100% 100%, 160px 160px, 160px 160px, 32px 32px, 32px 32px;
background-position: 0 0, -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}
.papel {
background-color: var(--hormigon);
background-image:
linear-gradient(rgba(55, 71, 79, .06) 1px, transparent 1px),
linear-gradient(90deg, rgba(55, 71, 79, .06) 1px, transparent 1px);
background-size: 32px 32px;
}
/* Duotono grafito → cian, solo con CSS (la foto se ve siempre) */
.duo {
position: relative;
isolation: isolate;
overflow: hidden;
background: linear-gradient(135deg, #A6EAF6 0%, #00A6C8 52%, #0D3440 100%);
}
.duo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(1) contrast(1.22) brightness(.94);
mix-blend-mode: multiply;
}
/* --- Botones --------------------------------------------------------------- */
.boton,
.w-cta {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .7rem;
min-height: 2.875rem;
padding: .7rem 1.3rem;
border: 1px solid transparent;
border-radius: var(--radio);
font: 600 1rem/1.2 var(--f-titulo);
letter-spacing: -.005em;
text-decoration: none;
cursor: pointer;
transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.boton::after,
.w-cta::after {
content: "";
width: .45em;
height: .45em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .2s ease;
}
.boton:hover::after,
.w-cta:hover::after { transform: translateX(3px) rotate(45deg); }
.boton--cian,
.w-cta { background: var(--cian); color: var(--noche); }
.boton--cian:hover,
.w-cta:hover { background: var(--cian-vivo); color: var(--noche); }
.boton--linea { border-color: var(--filete-cian); color: var(--cian-vivo); background: transparent; }
.boton--linea:hover { border-color: var(--cian); background: rgba(0, 166, 200, .12); color: var(--blanco); }
.boton--suave { background: var(--cian-velo); color: var(--cian-tinta); border-color: #A9DCE7; }
.boton--suave:hover { background: var(--cian-tinta); color: var(--blanco); border-color: var(--cian-tinta); }
.boton--tel::after { display: none; }
.w-cta-linea { margin: 2rem 0; }
/* --- Cabecera y menú ------------------------------------------------------- */
.cab {
position: sticky;
top: 0;
z-index: 50;
background: var(--noche);
border-bottom: 1px solid var(--filete-osc);
color: var(--tiza);
transition: box-shadow .25s ease;
}
.cab--sombra { box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .55); }
.cab__barra {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: .75rem;
min-height: var(--cab-alto);
}
.marca {
display: inline-flex;
align-items: center;
gap: .65rem;
min-width: 0;
color: var(--tiza);
text-decoration: none;
font: 600 .9375rem/1.1 var(--f-titulo);
letter-spacing: -.01em;
white-space: nowrap;
}
.marca__icono { width: 1.875rem; height: 1.875rem; }
.marca__a { color: var(--cian); }
.marca:hover .marca__nombre { color: var(--blanco); }
.cab__boton {
display: inline-flex;
align-items: center;
gap: .55rem;
height: 2.5rem;
padding: 0 .7rem;
border: 1px solid var(--filete-cian);
border-radius: var(--radio);
background: transparent;
color: var(--tiza);
font: 500 .75rem/1 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
cursor: pointer;
}
.cab__raya {
position: relative;
width: 16px;
height: 12px;
border-top: 2px solid currentColor;
border-bottom: 2px solid currentColor;
transition: border-color .2s ease;
}
.cab__raya::before,
.cab__raya::after {
content: "";
position: absolute;
left: 0; right: 0;
top: 3px;
height: 2px;
background: currentColor;
transition: transform .2s ease;
}
.cab__boton[aria-expanded="true"] { border-color: var(--cian); }
.cab__boton[aria-expanded="true"] .cab__raya { border-color: transparent; }
.cab__boton[aria-expanded="true"] .cab__raya::before { transform: rotate(45deg); }
.cab__boton[aria-expanded="true"] .cab__raya::after { transform: rotate(-45deg); }
.menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
max-height: calc(100vh - var(--cab-alto));
overflow-y: auto;
padding: .5rem var(--margen) 1.5rem;
background: var(--noche);
border-bottom: 1px solid var(--filete-cian);
}
.menu.esta-abierto { display: block; }
.no-js .menu { display: block; position: static; width: 100%; padding-inline: 0; border-bottom: 0; }
.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__enlace {
display: block;
padding: .9rem 0;
border-bottom: 1px solid var(--filete-osc);
color: var(--tiza);
font: 500 1.125rem/1.2 var(--f-titulo);
text-decoration: none;
}
.menu__enlace:hover { color: var(--cian); }
.menu__sub {
list-style: none;
margin: 0;
padding: .35rem 0 .5rem;
border-bottom: 1px solid var(--filete-osc);
}
.menu__sub a {
display: flex;
align-items: baseline;
gap: .75rem;
padding: .5rem 0;
color: var(--vapor);
font-size: 1rem;
text-decoration: none;
}
.menu__sub a:hover { color: var(--cian); }
.menu__cod {
display: inline-block;
min-width: 1.5rem;
font: 500 .72rem/1 var(--f-mono);
color: var(--cian);
letter-spacing: .08em;
}
.menu__cta { width: 100%; margin-top: 1.25rem; }
/* --- Héroes --------------------------------------------------------------- */
.heroe {
position: relative;
color: var(--tiza);
padding-block: clamp(2rem, 6vw, 4.5rem) clamp(2.75rem, 7vw, 5.5rem);
}
.heroe__rejilla {
display: grid;
gap: 2.25rem;
align-items: center;
}
.heroe__texto { min-width: 0; }
.heroe__ficha { min-width: 0; }
.heroe__ficha:empty { display: none; }
.heroe h1 {
margin: .25rem 0 1.25rem;
color: var(--blanco);
font-size: clamp(1.9rem, 1.15rem + 3.1vw, 3.5rem);
letter-spacing: -.03em;
line-height: 1.04;
}
.heroe--portada h1 { font-size: clamp(1.45rem, .55rem + 3.9vw, 3.3rem); }
.h1__a, .h1__b { display: block; }
.h1__b {
margin-top: .35em;
font-size: .62em;
font-weight: 500;
letter-spacing: -.015em;
line-height: 1.2;
color: var(--cian);
}
.heroe__acciones {
display: flex;
flex-wrap: wrap;
gap: .75rem;
margin-top: 1.75rem;
}
.heroe__nota {
margin-top: 1.25rem;
font: 500 .8125rem/1.5 var(--f-mono);
color: var(--niebla);
}
.heroe__nota a { color: var(--tiza); text-decoration-color: var(--cian); text-underline-offset: 3px; }
.heroe__nota a:hover { color: var(--cian); }
.heroe__nota > span { display: block; margin-bottom: .55rem; }
/* Teléfono táctil: en su propia línea, sin partirse */
.heroe__nota .heroe__tel {
display: inline-flex;
align-items: center;
gap: .6rem;
min-height: 2.75rem;
padding: .55rem 1rem;
border: 1px solid var(--filete-cian);
border-radius: var(--radio);
background: rgba(0, 166, 200, .08);
color: var(--blanco);
font: 600 1.0625rem/1.2 var(--f-titulo);
letter-spacing: -.005em;
text-decoration: none;
white-space: nowrap;
transition: border-color .2s ease, background-color .2s ease;
}
.heroe__nota .heroe__tel:hover { border-color: var(--cian); background: rgba(0, 166, 200, .16); color: var(--blanco); }
.heroe__tel svg {
width: 1.1em; height: 1.1em;
fill: none;
stroke: var(--cian);
stroke-width: 1.6;
stroke-linejoin: round;
}
/* Regla graduada al pie del héroe */
.heroe__regla {
position: absolute;
left: 0; right: 0; bottom: 0;
height: 12px;
background:
repeating-linear-gradient(90deg, rgba(0, 166, 200, .55) 0 1px, transparent 1px 80px) bottom left / 100% 12px no-repeat,
repeating-linear-gradient(90deg, rgba(0, 166, 200, .35) 0 1px, transparent 1px 16px) bottom left / 100% 6px no-repeat;
border-bottom: 1px solid var(--filete-cian);
}
/* Trayecto de la portada: pólder con molinos + ruta Madrid → Ámsterdam */
.trayecto {
position: relative;
margin: 0 0 1rem;
border: 1px solid var(--filete-cian);
background: var(--noche);
}
.trayecto__foto { aspect-ratio: 16 / 7; }
.trayecto__ruta {
display: block;
width: 100%;
height: auto;
padding: .35rem .5rem .5rem;
color: var(--cian);
border-top: 1px solid var(--filete-osc);
}
.trayecto__rotulos { fill: var(--vapor); }
.trayecto__fin { fill: var(--blanco); font-weight: 600; }
.trayecto__trazo {
stroke: var(--cian);
stroke-dasharray: 426;
stroke-dashoffset: 0;
animation: trazo 1.6s ease-out both;
}
.trayecto__paradas circle { fill: var(--noche); stroke: var(--cian); stroke-width: 1.5; }
.trayecto__paradas .trayecto__meta { fill: var(--cian); }
.trayecto__km { fill: var(--niebla); }
.trayecto__molino { stroke: var(--cian-vivo); }
.trayecto__pie { fill: var(--niebla); }
@keyframes trazo { from { stroke-dashoffset: 426; } }
/* Atención telefónica: línea fina bajo el héroe; en contacto, bloque protagonista */
.atencion {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .35rem 1rem;
min-width: 0;
padding-top: 1rem;
border-top: 1px solid var(--filete-osc);
}
.atencion > * { margin: 0; }
.atencion__rotulo {
font: 500 .72rem/1.3 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cian);
}
.atencion__tel {
display: inline-flex;
align-items: center;
gap: .5rem;
color: var(--blanco);
font: 600 1.0625rem/1.2 var(--f-titulo);
letter-spacing: -.005em;
text-decoration: none;
white-space: nowrap;
}
.atencion__tel:hover { color: var(--cian); }
.atencion__icono {
width: 1.05em; height: 1.05em;
fill: none;
stroke: var(--cian);
stroke-width: 1.6;
stroke-linejoin: round;
}
.atencion__horario { font-size: .875rem; line-height: 1.45; color: var(--niebla); }
.atencion__recogida {
flex-basis: 100%;
display: flex;
align-items: baseline;
gap: .6rem;
font-size: .875rem;
line-height: 1.5;
color: var(--vapor);
}
.atencion__recogida::before {
content: "";
flex: 0 0 .45rem;
height: .45rem;
border: 1.5px solid var(--cian);
transform: translateY(-.05em);
}
/* Héroe interior: la misma retícula fina en todas las páginas; un velo la apaga detrás del texto.
Lo que cambia según el tipo de página es la composición (foto, mapa, ficha), no la trama. */
.heroe--interior {
isolation: isolate;
--capa: linear-gradient(rgba(28, 34, 40, .72), rgba(28, 34, 40, .72));
}
[class*="servicio"] .heroe--interior { border-bottom: 2px solid var(--cian); }
[class*="division"] .heroe--interior .heroe__texto {
padding-left: 1.25rem;
border-left: 2px solid var(--cian);
}
[class*="ciudad"] .heroe--interior .heroe__rejilla { align-items: start; }
/* Foto del héroe: la {{FOTO}} de cada página, con el duotono cian de la portada.
El pie describe la foto de banco, así que en el héroe no se muestra (el alt se queda). */
.heroe__foto {
position: relative;
min-width: 0;
border: 1px solid var(--filete-cian);
background: var(--noche);
}
.heroe__foto:not(:has(img)) { display: none; }
.heroe__foto .w-foto { margin: 0; height: 100%; }
.heroe__foto .w-foto img { height: 100%; aspect-ratio: 16 / 9; }
.heroe__foto figcaption { display: none; }
[class*="servicio"] { --km: "≈ 1.770 km de Madrid a Ámsterdam por carretera"; }
[class*="servicio"] .heroe__foto .w-foto img { aspect-ratio: 16 / 7; }
.pag-ciudad .heroe__foto .w-foto img { aspect-ratio: 21 / 9; }
/* Rótulo de la ficha según el tipo de página */
[class*="region"] .heroe .w-datos::before { content: "Ficha de la región"; }
[class*="division"] .heroe .w-datos::before { content: "Ficha de la provincia"; }
[class*="ciudad"] .heroe .w-datos::before { content: "Ficha de la ciudad"; }
[class*="contacto"] .heroe .w-datos::before { content: "Datos del servicio"; }
/* Mapa de Países Bajos: contorno simplificado de la costa, el IJsselmeer (agua), Flevoland (pólder),
las islas Frisias y los límites de las 12 provincias, proyectados desde sus coordenadas
(x = 80 + (lon − 4) · 100, y = 250 − (lat − 52) · 150). Capas:
--mapa-nl (base con rótulos, para el mapa grande de región) · --mapa-mini (sin rótulos, para el localizador)
--zona (región de la página en cian) · --punto (provincia o ciudad) · --foco (encuadre del localizador).
La zona, el punto y el encuadre se eligen por el canonical que pone la fábrica en {{HEAD}}. */
:root {
--mapa-nl: url("data:image/svg+xml;utf8,");
--mapa-mini: url("data:image/svg+xml;utf8,");
--reticula-mapa:
linear-gradient(rgba(0, 166, 200, .06) 1px, transparent 1px) 0 0 / 24px 24px,
linear-gradient(90deg, rgba(0, 166, 200, .06) 1px, transparent 1px) 0 0 / 24px 24px;
}
/* Zona de cada región (también en sus provincias y ciudades) */
:root:has(link[rel="canonical"][href*="/norte-de-los-paises-bajos/"]) {
--zona: url("data:image/svg+xml;utf8,");
--foco: 100% 0%;
}
:root:has(link[rel="canonical"][href*="/este-de-los-paises-bajos/"]) {
--zona: url("data:image/svg+xml;utf8,");
--foco: 100% 33%;
}
:root:has(link[rel="canonical"][href*="/oeste-de-los-paises-bajos/"]) {
--zona: url("data:image/svg+xml;utf8,");
--foco: 0% 48%;
}
:root:has(link[rel="canonical"][href*="/sur-de-los-paises-bajos/"]) {
--zona: url("data:image/svg+xml;utf8,");
--foco: 63% 100%;
}
/* Región: el mapa ocupa la columna derecha, de la altura del antetítulo al pie de la ficha */
[class*="region"] .heroe--interior .heroe__rejilla::after {
content: "";
display: none;
grid-area: mapa;
align-self: stretch;
min-height: 22rem;
border: 1px solid var(--filete-cian);
background:
var(--zona, none) center / contain no-repeat,
var(--mapa-nl) center / contain no-repeat,
var(--reticula-mapa),
var(--noche);
}
/* Localizador de provincia y ciudad: mapa sin rótulos, ampliado y encuadrado en su región
(las tres capas comparten tamaño y posición, así que siguen alineadas) */
.pag-division .heroe__foto::after,
.pag-ciudad .heroe--interior .heroe__ficha::before {
content: "";
border: 1px solid var(--filete-cian);
background:
var(--punto, none) var(--foco, 50% 50%) / auto 180% no-repeat,
var(--zona, none) var(--foco, 50% 50%) / auto 180% no-repeat,
var(--mapa-mini) var(--foco, 50% 50%) / auto 180% no-repeat,
var(--reticula-mapa),
var(--noche);
}
/* Provincia: el localizador va encastrado en la esquina de la foto */
.pag-division .heroe__foto::after {
position: absolute;
right: .75rem;
bottom: .75rem;
width: clamp(7.5rem, 34%, 10.5rem);
aspect-ratio: 1;
box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .6);
}
/* Ciudad: el localizador encabeza la ficha */
.pag-ciudad .heroe--interior .heroe__ficha::before {
display: block;
height: clamp(11rem, 26vw, 14rem);
margin-bottom: 1rem;
}
/* Punto y distancia por carretera desde Madrid (aprox.) de cada provincia y ciudad.
Primero provincias y después ciudades: la ciudad, que también contiene la ruta de su provincia, gana. */
:root:has(link[rel="canonical"][href*="/groninga/"]) { --km: "≈ 1.945 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/frisia/"]) { --km: "≈ 1.915 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/drente/"]) { --km: "≈ 1.920 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/overijssel/"]) { --km: "≈ 1.845 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/gueldres/"]) { --km: "≈ 1.770 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/flevoland/"]) { --km: "≈ 1.800 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/utrecht/"]) { --km: "≈ 1.725 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/holanda-septentrional/"]) { --km: "≈ 1.770 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/holanda-meridional/"]) { --km: "≈ 1.720 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/zelanda/"]) { --km: "≈ 1.620 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/brabante-septentrional/"]) { --km: "≈ 1.700 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/limburgo/"]) { --km: "≈ 1.705 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/amsterdam/"]) { --km: "≈ 1.775 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/haarlem/"]) { --km: "≈ 1.770 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/haarlemmermeer/"]) { --km: "≈ 1.755 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/zaanstad/"]) { --km: "≈ 1.790 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/roterdam/"]) { --km: "≈ 1.695 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/leiden/"]) { --km: "≈ 1.740 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/la-haya/"]) { --km: "≈ 1.720 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/dordrecht/"]) { --km: "≈ 1.675 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/eindhoven/"]) { --km: "≈ 1.685 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/tilburg/"]) { --km: "≈ 1.675 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/breda/"]) { --km: "≈ 1.650 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/bolduque/"]) { --km: "≈ 1.700 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/nimega/"]) { --km: "≈ 1.745 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/apeldoorn/"]) { --km: "≈ 1.800 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/arnhem/"]) { --km: "≈ 1.770 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/enschede/"]) { --km: "≈ 1.870 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/zwolle/"]) { --km: "≈ 1.845 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/almere/"]) { --km: "≈ 1.770 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/maastricht/"]) { --km: "≈ 1.705 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/venlo/"]) { --km: "≈ 1.750 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/vlissingen/"]) { --km: "≈ 1.620 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
:root:has(link[rel="canonical"][href*="/amersfoort/"]) { --km: "≈ 1.750 km desde Madrid por carretera"; --punto: url("data:image/svg+xml;utf8,"); }
/* Servicio, provincia y ciudad: ruta por carretera España → Países Bajos al pie del héroe */
[class*="servicio"] .heroe--interior,
[class*="division"] .heroe--interior,
[class*="ciudad"] .heroe--interior { padding-bottom: calc(clamp(2.75rem, 7vw, 5.5rem) + 3.5rem); }
[class*="servicio"] .heroe--interior .heroe__regla,
[class*="division"] .heroe--interior .heroe__regla,
[class*="ciudad"] .heroe--interior .heroe__regla {
height: 4.5rem;
border-top: 1px solid var(--filete-osc);
background:
url("data:image/svg+xml;utf8,") center / auto 100% no-repeat,
var(--noche);
}
.heroe__km { display: none; }
[class*="servicio"] .heroe__km,
[class*="division"] .heroe__km,
[class*="ciudad"] .heroe__km {
display: block;
position: absolute;
left: var(--margen); right: var(--margen);
bottom: .4rem;
text-align: center;
font: 500 .6875rem/1.2 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--tiza);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.heroe__km::before { content: var(--km, "Ruta por carretera desde Madrid"); }
/* --- Componentes de la fábrica ---------------------------------------------- */
/* Migas */
.w-migas { margin: 0 0 1.5rem; }
.w-migas ol {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: .25rem 0;
list-style: none;
margin: 0;
padding: 0;
font: 500 .75rem/1.5 var(--f-mono);
letter-spacing: .04em;
color: var(--niebla);
}
.w-migas li { display: inline-flex; align-items: center; min-width: 0; }
.w-migas li + li::before {
content: "/";
margin: 0 .6rem;
color: var(--cian);
}
.w-migas a { color: var(--niebla); text-decoration: none; border-bottom: 1px solid transparent; }
.w-migas a:hover { color: var(--cian); border-bottom-color: var(--cian); }
.w-migas [aria-current] { color: var(--tiza); }
/* Antetítulo */
.w-antetitulo {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1rem;
font: 500 .75rem/1.45 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cian);
}
.w-antetitulo::before {
content: "";
flex: 0 0 1.75rem;
height: 1px;
background: currentColor;
}
/* Entradilla */
.w-entradilla {
max-width: 34em;
font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
line-height: 1.6;
color: var(--vapor);
}
.w-entradilla p { margin-bottom: .75em; }
.w-entradilla p:last-child { margin-bottom: 0; }
.w-entradilla a { color: var(--tiza); text-decoration-color: var(--cian); text-underline-offset: 3px; }
/* Ficha de datos: lista de filas numeradas, siempre compensada */
.w-datos {
position: relative;
margin: 0;
padding: 2.75rem 1.25rem .35rem;
border: 1px solid var(--filete-cian);
background: linear-gradient(180deg, rgba(0, 166, 200, .07), rgba(0, 166, 200, 0) 45%), var(--noche);
color: var(--tiza);
counter-reset: dato;
}
.w-datos::before {
content: "Ficha técnica";
position: absolute;
top: 0; left: 0; right: 0;
padding: .7rem 1.25rem;
border-bottom: 1px solid var(--filete-osc);
font: 500 .72rem/1.2 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cian);
}
.w-datos::after {
content: "";
position: absolute;
top: -1px; right: -1px;
width: 12px; height: 12px;
border-top: 2px solid var(--cian);
border-right: 2px solid var(--cian);
}
.w-datos__fila {
display: grid;
grid-template-columns: 2rem minmax(0, 1fr);
column-gap: .5rem;
padding: .85rem 0;
border-bottom: 1px solid var(--filete-osc);
counter-increment: dato;
}
.w-datos__fila:last-child { border-bottom: 0; }
.w-datos__fila::before {
content: counter(dato, decimal-leading-zero);
grid-column: 1;
grid-row: 1 / span 2;
font: 500 .75rem/1.6 var(--f-mono);
color: var(--cian);
}
.w-datos dt {
grid-column: 2;
margin: 0;
font: 500 .72rem/1.45 var(--f-mono);
letter-spacing: .09em;
text-transform: uppercase;
color: var(--niebla);
}
.w-datos dd {
grid-column: 2;
margin: .2rem 0 0;
font: 500 1.0625rem/1.35 var(--f-titulo);
color: var(--blanco);
}
/* Valores con varias cifras: una por línea, sin separadores sueltos */
.w-datos__lineas > span { display: block; }
.w-datos__lineas > span + span { margin-top: .15rem; }
.nw { white-space: nowrap; }
/* La ficha sobre papel claro, si aparece dentro del texto */
.w-seccion .w-datos,
.bloque--claro .w-datos {
background: var(--blanco);
border-color: var(--filete);
color: var(--grafito);
}
.w-seccion .w-datos::before { color: var(--cian-tinta); border-bottom-color: var(--filete); }
.w-seccion .w-datos__fila { border-bottom-color: var(--filete); }
.w-seccion .w-datos__fila:last-child { border-bottom: 0; }
.w-seccion .w-datos__fila::before { color: var(--cian-tinta); }
.w-seccion .w-datos dt { color: var(--gris-tinta); }
.w-seccion .w-datos dd { color: var(--grafito); }
/* Cotizador: panel de borde fino, sin caja blanca, centrado */
.w-cotizador {
position: relative;
max-width: 820px;
margin-inline: auto;
padding: clamp(.75rem, 2.5vw, 1.75rem);
border: 1px solid #AEB9C1;
background: var(--hormigon);
color: var(--grafito);
}
.w-cotizador::before,
.w-cotizador::after {
content: "";
position: absolute;
width: 14px; height: 14px;
pointer-events: none;
}
.w-cotizador::before { top: -1px; left: -1px; border-top: 2px solid var(--cian-tinta); border-left: 2px solid var(--cian-tinta); }
.w-cotizador::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cian-tinta); border-right: 2px solid var(--cian-tinta); }
.w-cotizador__titulo {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1rem;
font: 500 .75rem/1.45 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
text-wrap: balance;
color: var(--gris-tinta);
}
.w-cotizador__titulo::before {
content: "";
flex: 0 0 1.5rem;
height: 1px;
background: var(--cian-tinta);
}
/* Foto con duotono */
.w-foto {
position: relative;
isolation: isolate;
margin: 2rem 0;
background: linear-gradient(135deg, #A6EAF6 0%, #00A6C8 52%, #0D3440 100%);
}
.w-foto img {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
filter: grayscale(1) contrast(1.12) brightness(1.04);
mix-blend-mode: multiply;
}
.w-foto figcaption {
display: flex;
align-items: baseline;
gap: .75rem;
padding: .75rem 0 0;
background: var(--hormigon);
font-size: .875rem;
line-height: 1.5;
color: var(--gris-tinta);
}
.w-foto figcaption::before {
content: "";
flex: 0 0 1.25rem;
height: 1px;
transform: translateY(-.3em);
background: var(--cian-tinta);
}
/* Secciones del documento, numeradas en el margen */
.w-seccion {
position: relative;
margin: 0 0 clamp(2.75rem, 5vw, 4rem);
padding-top: 1.5rem;
border-top: 1px solid var(--filete);
counter-increment: seccion;
}
.w-seccion::before {
content: "§ " counter(seccion, decimal-leading-zero);
display: block;
margin-bottom: .9rem;
font: 500 .75rem/1 var(--f-mono);
letter-spacing: .12em;
color: var(--cian-tinta);
}
.w-seccion > h2 {
margin: 0 0 1.1rem;
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
color: var(--grafito);
}
.w-seccion h3 {
display: flex;
align-items: baseline;
gap: .6rem;
margin: 2rem 0 .6rem;
font-size: clamp(1.125rem, 1.05rem + .3vw, 1.3rem);
color: var(--grafito);
}
.w-seccion h3::before {
content: "";
flex: 0 0 .5rem;
height: .5rem;
border: 1.5px solid var(--cian-tinta);
transform: translateY(-.1em);
}
.w-seccion p { max-width: 68ch; }
.w-seccion a:not(.w-cta) {
color: var(--cian-tinta);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.w-seccion a:not(.w-cta):hover { color: var(--grafito); text-decoration-color: var(--cian); }
.w-seccion strong { color: var(--grafito); }
.w-seccion ul,
.w-seccion ol { max-width: 68ch; margin: 0 0 1em; padding-left: 1.25rem; }
.w-seccion ul { list-style: none; padding-left: 0; }
.w-seccion ul li { position: relative; padding-left: 1.4rem; margin-bottom: .4rem; }
.w-seccion ul li::before {
content: "";
position: absolute;
left: .15rem; top: .62em;
width: .45rem; height: .45rem;
background: var(--cian-tinta);
}
.w-seccion ol li::marker { font-family: var(--f-mono); color: var(--cian-tinta); }
/* Tablas: scroll propio si no caben */
.w-tabla {
max-width: 100%;
margin: 1.5rem 0;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
border: 1px solid var(--filete);
background: var(--blanco);
}
.w-tabla table {
width: 100%;
border-collapse: collapse;
font-size: .975rem;
line-height: 1.45;
}
.w-tabla table:has(th:nth-child(3)) { min-width: 34rem; }
.w-tabla th {
padding: .8rem 1rem;
background: var(--grafito);
color: var(--blanco);
text-align: left;
vertical-align: bottom;
font: 500 .72rem/1.35 var(--f-mono);
letter-spacing: .09em;
text-transform: uppercase;
white-space: nowrap;
}
.w-tabla caption {
padding: .75rem 1rem;
border-bottom: 1px solid var(--filete);
background: var(--blanco);
color: var(--grafito);
text-align: left;
font: 500 .75rem/1.4 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
}
.bloque--oscuro .w-tabla caption {
background: var(--noche);
border-bottom-color: var(--filete-osc);
color: var(--tiza);
}
.w-tabla td {
padding: .85rem 1rem;
border-top: 1px solid var(--filete);
background: var(--blanco);
color: var(--grafito);
vertical-align: top;
}
.w-tabla td:first-child { font-family: var(--f-titulo); font-weight: 600; }
.w-tabla tbody tr:hover td { background: #F3F9FB; }
.w-tabla a { color: var(--cian-tinta); text-underline-offset: 3px; }
/* Preguntas frecuentes */
.w-faq {
margin: 0 0 clamp(2.75rem, 5vw, 4rem);
padding: clamp(1.25rem, 3vw, 2.25rem);
border: 1px solid var(--filete);
background: var(--blanco);
counter-reset: pregunta;
}
.w-faq > h2 {
margin: 0 0 1.25rem;
font-size: clamp(1.5rem, 1.15rem + 1.4vw, 2.25rem);
color: var(--grafito);
}
.w-faq__item { border-top: 1px solid var(--filete); counter-increment: pregunta; }
.w-faq__item:last-child { border-bottom: 1px solid var(--filete); }
.w-faq__item summary {
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr) 1.5rem;
align-items: center;
gap: .5rem;
padding: 1.1rem 0;
list-style: none;
cursor: pointer;
font: 600 1.0625rem/1.4 var(--f-titulo);
color: var(--grafito);
transition: color .2s ease;
}
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::before {
content: counter(pregunta, decimal-leading-zero);
font: 500 .75rem/1 var(--f-mono);
color: var(--cian-tinta);
}
.w-faq__item summary::after {
content: "";
width: 1.5rem; height: 1.5rem;
border: 1px solid var(--filete);
color: var(--cian-tinta);
background:
linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 10px no-repeat;
transition: background-size .2s ease, border-color .2s ease;
}
.w-faq__item summary:hover { color: var(--cian-tinta); }
.w-faq__item summary:hover::after { border-color: var(--cian-tinta); }
.w-faq__item[open] summary::after {
border-color: var(--cian-tinta);
background:
linear-gradient(currentColor, currentColor) center / 10px 2px no-repeat,
linear-gradient(currentColor, currentColor) center / 2px 0 no-repeat;
}
.w-faq__resp { padding: 0 2rem 1.25rem 2.75rem; color: var(--gris-tinta); }
.w-faq__resp p { max-width: 64ch; }
.w-faq__resp a { color: var(--cian-tinta); text-underline-offset: 3px; }
/* Páginas hijas: rejilla de plano, ordenada aunque haya cien */
.w-hijas { margin: 0 0 clamp(2.75rem, 5vw, 4rem); }
.w-hijas__titulo,
.w-hermanas__titulo {
margin: 0 0 1.25rem;
font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
color: var(--grafito);
}
.w-hijas__rejilla {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
border-top: 1px solid var(--filete);
border-left: 1px solid var(--filete);
counter-reset: hija;
}
.w-tarjeta {
position: relative;
display: flex;
flex-direction: column;
gap: .35rem;
min-width: 0;
padding: 1.15rem 2.75rem 1.35rem 1.25rem;
border-right: 1px solid var(--filete);
border-bottom: 1px solid var(--filete);
background: var(--blanco);
color: var(--grafito);
text-decoration: none;
counter-increment: hija;
transition: background-color .2s ease, box-shadow .2s ease;
}
.w-tarjeta::before {
content: counter(hija, decimal-leading-zero);
font: 500 .72rem/1 var(--f-mono);
letter-spacing: .1em;
color: var(--cian-tinta);
}
.w-tarjeta::after {
content: "";
position: absolute;
top: 1.2rem; right: 1.35rem;
width: .5rem; height: .5rem;
border-top: 2px solid var(--cian-tinta);
border-right: 2px solid var(--cian-tinta);
transform: rotate(45deg);
transition: transform .2s ease;
}
.w-tarjeta:hover { background: #F3F9FB; box-shadow: inset 0 -2px 0 var(--cian); }
.w-tarjeta:hover::after { transform: translateX(3px) rotate(45deg); }
.w-tarjeta__nombre {
font: 600 1.125rem/1.25 var(--f-titulo);
letter-spacing: -.01em;
text-wrap: balance;
hyphens: none;
}
.w-tarjeta__texto { font-size: .95rem; line-height: 1.5; color: var(--gris-tinta); }
.w-hijas__rejilla:has(> :nth-child(13)) {
grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr));
}
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta { padding: .8rem 2.25rem .9rem 1rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta::after { top: .85rem; right: 1rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta__nombre { font-size: 1rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta__texto { font-size: .875rem; }
/* Hermanas: columnas de filas compactas */
.w-hermanas {
margin: 0 0 clamp(2.75rem, 5vw, 4rem);
padding-top: 1.5rem;
border-top: 2px solid var(--grafito);
}
.w-hermanas__enlaces {
columns: 2 9rem;
column-gap: 1.5rem;
}
.w-hermanas__enlaces a {
position: relative;
display: block;
padding: .55rem 0 .55rem 1.1rem;
border-bottom: 1px solid var(--filete);
break-inside: avoid;
color: var(--grafito);
font-size: .975rem;
line-height: 1.35;
text-decoration: none;
transition: color .2s ease, padding-left .2s ease;
}
.w-hermanas__enlaces a::before {
content: "";
position: absolute;
left: 0; top: 1.05em;
width: .4rem; height: .4rem;
border-top: 1.5px solid var(--cian-tinta);
border-right: 1.5px solid var(--cian-tinta);
transform: rotate(45deg);
}
.w-hermanas__enlaces a:hover { color: var(--cian-tinta); padding-left: 1.35rem; }
/* Cierre */
.w-cierre {
position: relative;
padding: clamp(1.5rem, 4vw, 3rem);
border-left: 3px solid var(--cian);
background-color: var(--grafito);
background-image:
linear-gradient(rgba(0, 166, 200, .075) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 166, 200, .075) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--tiza);
}
.w-cierre::after {
content: "";
position: absolute;
top: 1rem; right: 1rem;
width: 1.5rem; height: 1.5rem;
background:
linear-gradient(var(--cian), var(--cian)) center / 100% 1px no-repeat,
linear-gradient(var(--cian), var(--cian)) center / 1px 100% no-repeat;
border-radius: 50%;
box-shadow: inset 0 0 0 1px var(--filete-cian);
}
.w-cierre p {
max-width: 44em;
font-size: clamp(1.125rem, 1rem + .5vw, 1.375rem);
line-height: 1.55;
}
.w-cierre a:not(.w-cta) { color: var(--cian-vivo); text-underline-offset: 3px; }
.w-cierre a:not(.w-cta):hover { color: var(--blanco); }
.w-cierre .w-cta { margin-top: .5rem; }
/* --- Páginas interiores -------------------------------------------------- */
.p-cotizar { padding-block: clamp(2rem, 5vw, 4rem); }
.p-cotizar:not(:has(.p-cotizar__marco > *)),
.p-hijas:empty,
.p-hermanas:empty,
.p-cierre:empty { display: none; }
/* Páginas sin cotizador: la banda lleva su titular y el botón, dentro de la retícula */
.p-cotizar__marco:not(:has(.w-cotizador)) {
position: relative;
display: grid;
gap: .6rem 2.5rem;
max-width: var(--ancho);
}
.p-cotizar__marco:not(:has(.w-cotizador))::before {
content: "Precio cerrado al momento";
font: 600 clamp(1.375rem, 1.1rem + 1vw, 1.875rem)/1.15 var(--f-titulo);
letter-spacing: -.02em;
color: var(--grafito);
}
.p-cotizar__marco:not(:has(.w-cotizador))::after {
content: "Indicas origen, destino y bultos; el cotizador compara ofertas cerradas de varios transportistas y la recogida se programa en día laborable.";
max-width: 40em;
font-size: 1.0625rem;
line-height: 1.55;
color: var(--gris-tinta);
}
.p-cotizar__marco .w-cta-linea { margin: 0; }
.p-cotizar__marco:not(:has(.w-cotizador)) .w-cta-linea { order: 3; margin-top: .6rem; }
.p-doc { padding-block: clamp(2rem, 5vw, 3.5rem) clamp(.5rem, 2vw, 1.5rem); }
.p-articulo { max-width: 62rem; counter-reset: seccion; }
.p-articulo:empty { display: none; }
/* Contacto: teléfono como cifra grande, botón de llamada y datos de la empresa */
[class*="contacto"] .atencion {
position: relative;
display: grid;
gap: .9rem;
align-self: start;
padding: clamp(1.4rem, 3vw, 2.25rem);
border: 1px solid var(--filete-cian);
background: linear-gradient(180deg, rgba(0, 166, 200, .08), rgba(0, 166, 200, 0) 55%), var(--noche);
}
[class*="contacto"] .atencion::after {
content: "";
position: absolute;
top: -1px; right: -1px;
width: 14px; height: 14px;
border-top: 2px solid var(--cian);
border-right: 2px solid var(--cian);
}
[class*="contacto"] .atencion { container-type: inline-size; }
/* El número cabe entero en la tarjeta: el tamaño sale del ancho de la propia tarjeta */
[class*="contacto"] .atencion__tel {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 1rem .6rem;
max-width: 100%;
font-size: clamp(1.375rem, 1rem + 1.5vw, 2.25rem);
font-size: clamp(1.25rem, 8.4cqi, 2.75rem);
letter-spacing: -.03em;
line-height: 1;
white-space: nowrap;
}
[class*="contacto"] .atencion__tel::after {
content: "Llamar ahora";
grid-column: 1 / -1;
justify-self: start;
padding: .75rem 1.3rem;
border-radius: var(--radio);
background: var(--cian);
color: var(--noche);
font: 600 1rem/1.2 var(--f-titulo);
letter-spacing: 0;
transition: background-color .2s ease;
}
[class*="contacto"] .atencion__tel:hover { color: var(--blanco); }
[class*="contacto"] .atencion__tel:hover::after { background: var(--cian-vivo); }
[class*="contacto"] .atencion__horario {
padding-top: .9rem;
border-top: 1px solid var(--filete-osc);
font-size: 1rem;
color: var(--vapor);
}
[class*="contacto"] .atencion__recogida { font-size: 1rem; }
/* Contacto: el teléfono ya está en la tarjeta; la ficha (cuya primera fila es el teléfono) no lo repite */
.pag-contacto .heroe .w-datos__fila:first-child,
.pag-contacto .heroe .w-datos__fila:has(a[href^="tel:"]) { display: none; }
.p-hijas,
.p-hermanas { margin-top: clamp(1rem, 3vw, 2rem); }
.p-cierre { padding-bottom: clamp(3rem, 7vw, 5rem); }
/* Recorrido del cotizador */
.recorrido__cab { position: relative; padding-block: clamp(1.75rem, 4vw, 2.75rem) clamp(2rem, 4vw, 3rem); color: var(--tiza); }
.recorrido__cab .w-migas { margin-bottom: 1rem; }
.recorrido__cab .w-antetitulo { margin: 0 0 .75rem; }
/* Cabecera y cotizador comparten eje: la misma caja centrada de 820 px y la retícula centrada con ella */
.recorrido__rejilla { max-width: calc(820px + 2 * var(--margen)); }
.recorrido__cab.plano,
.recorrido__cuerpo.papel { background-position: center top; }
.recorrido__texto { min-width: 0; }
.recorrido__titulo {
margin: 0;
color: var(--blanco);
font-size: clamp(1.625rem, 1.1rem + 2.2vw, 2.625rem);
letter-spacing: -.03em;
}
.recorrido__apoyo {
max-width: 40em;
margin: .75rem 0 0;
font-size: clamp(1rem, .95rem + .3vw, 1.125rem);
line-height: 1.55;
color: var(--vapor);
}
/* Teléfono integrado bajo el párrafo, con su filete: una línea más del texto, no una caja suelta */
.recorrido__tel {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: .25rem .9rem;
margin: 1rem 0 0;
padding-top: .9rem;
border-top: 1px solid var(--filete-osc);
}
.recorrido__tel-rotulo {
font: 500 .72rem/1.3 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cian-vivo);
}
.recorrido__tel a {
color: var(--blanco);
font: 600 1.125rem/1.2 var(--f-titulo);
text-decoration: none;
white-space: nowrap;
border-bottom: 1px solid var(--filete-cian);
transition: color .2s ease, border-color .2s ease;
}
.recorrido__tel a:hover { color: var(--cian-vivo); border-bottom-color: var(--cian); }
/* Migas del héroe interior: encima de las dos columnas */
.heroe__migas:empty { display: none; }
/* Modalidades: pausa visual entre las secciones del documento (servicio y destinos) */
.p-modos {
display: none;
margin: 0 0 clamp(2.75rem, 5vw, 4rem);
border: 1px solid var(--filete-cian);
background-color: var(--grafito);
background-image:
linear-gradient(rgba(0, 166, 200, .075) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 166, 200, .075) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--tiza);
}
[class*="servicio"] .p-modos,
[class*="geo"] .p-modos { display: block; }
.p-modos__rotulo {
margin: 0;
padding: .8rem 1.25rem;
border-bottom: 1px solid var(--filete-osc);
font: 500 .75rem/1.4 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cian-vivo);
}
.p-modos__lista { display: grid; margin: 0; padding: 0; list-style: none; }
.p-modos__item {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
column-gap: 1rem;
row-gap: .25rem;
padding: 1.25rem;
border-top: 1px solid var(--filete-osc);
}
.p-modos__item:first-child { border-top: 0; }
.p-modos__icono {
grid-row: 1 / span 3;
width: 2.75rem; height: 2.75rem;
padding: .55rem;
border: 1px solid var(--filete-cian);
fill: none;
stroke: var(--cian);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.p-modos__nombre { font: 600 1.1875rem/1.25 var(--f-titulo); color: var(--blanco); }
.p-modos__dato { font: 500 .8125rem/1.45 var(--f-mono); letter-spacing: .02em; color: var(--cian-vivo); }
.p-modos__texto { font-size: .95rem; line-height: 1.5; color: var(--vapor); }
/* El módulo entra tras la segunda sección del texto (el artículo cede sus hijos al flujo de .p-doc) */
[class*="servicio"] .p-doc,
[class*="geo"] .p-doc { display: flex; flex-direction: column; counter-reset: seccion; }
[class*="servicio"] .p-articulo,
[class*="geo"] .p-articulo { display: contents; }
[class*="servicio"] .p-articulo > *,
[class*="geo"] .p-articulo > * { max-width: 62rem; }
[class*="servicio"] .p-articulo > :nth-child(n+3),
[class*="geo"] .p-articulo > :nth-child(n+3) { order: 2; }
[class*="servicio"] .p-modos,
[class*="geo"] .p-modos { order: 1; }
/* Ritmo: una de cada tres secciones va en ficha blanca con filete cian */
.p-articulo > .w-seccion:nth-child(3n+2) {
padding: 1.5rem clamp(1.1rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem);
border-top: 0;
border-left: 3px solid var(--cian);
background: var(--blanco);
}
.recorrido__cuerpo { padding: clamp(2rem, 5vw, 3.5rem) var(--margen) clamp(3rem, 7vw, 5rem); }
.recorrido__marco {
position: relative;
max-width: 820px;
margin-inline: auto;
padding: clamp(.75rem, 2.5vw, 1.75rem);
border: 1px solid #AEB9C1;
background: var(--hormigon);
}
.recorrido__marco::before,
.recorrido__marco::after {
content: "";
position: absolute;
width: 14px; height: 14px;
pointer-events: none;
}
.recorrido__marco::before { top: -1px; left: -1px; border-top: 2px solid var(--cian-tinta); border-left: 2px solid var(--cian-tinta); }
.recorrido__marco::after { bottom: -1px; right: -1px; border-bottom: 2px solid var(--cian-tinta); border-right: 2px solid var(--cian-tinta); }
/* --- Portada -------------------------------------------------------------- */
.franja-cotizar { padding: clamp(2.5rem, 6vw, 4.5rem) var(--margen); }
.bloque { position: relative; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.bloque--blanco { background: var(--blanco); }
.bloque--oscuro { color: var(--tiza); }
.bloque__cab { max-width: 46rem; margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.bloque h2 {
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.875rem);
letter-spacing: -.03em;
color: var(--grafito);
}
.bloque--oscuro h2 { color: var(--blanco); }
.bloque__intro {
max-width: 36em;
margin-top: 1.1rem;
font-size: clamp(1.0625rem, 1rem + .4vw, 1.25rem);
line-height: 1.6;
color: var(--gris-tinta);
}
.bloque--oscuro .bloque__intro { color: var(--vapor); }
.num {
display: flex;
align-items: center;
gap: .75rem;
margin: 0 0 1rem;
font: 500 .75rem/1.3 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cian-tinta);
}
.num::after {
content: "";
flex: 0 0 3rem;
height: 1px;
background: currentColor;
}
.bloque--oscuro .num,
.banda .num,
.cierre-portada .num { color: var(--cian); }
.texto p { max-width: 62ch; }
.texto a:not(.boton) { color: var(--cian-tinta); text-underline-offset: 3px; text-decoration-thickness: 1px; }
.texto a:not(.boton):hover { color: var(--grafito); }
.bloque--oscuro .texto { color: var(--vapor); }
.bloque--oscuro .texto strong { color: var(--blanco); }
.bloque--oscuro .texto a:not(.boton) { color: var(--cian-vivo); }
.bloque--oscuro .texto a:not(.boton):hover { color: var(--blanco); }
.texto .boton { margin-top: 1rem; }
.dos { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.dos > * { min-width: 0; }
/* Tres pasos */
.pasos {
display: grid;
gap: 1rem;
margin: 0;
padding: 0;
list-style: none;
}
.paso {
position: relative;
padding: 1.75rem 1.5rem 1.85rem;
border: 1px solid var(--filete);
background: var(--blanco);
}
.paso::before {
content: "";
position: absolute;
top: -1px; left: -1px;
width: 3rem; height: 3px;
background: var(--cian);
}
.paso__cab { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.paso__num {
font: 600 2.75rem/1 var(--f-titulo);
letter-spacing: -.04em;
color: var(--cian-tinta);
}
.paso__icono {
width: 2.25rem; height: 2.25rem;
fill: none;
stroke: var(--pizarra);
stroke-width: 1.5;
stroke-linecap: round;
stroke-linejoin: round;
}
.paso h3 { margin: 1.1rem 0 .55rem; font-size: 1.25rem; color: var(--grafito); }
.paso p { color: var(--gris-tinta); }
/* Banda de foto a todo ancho */
.banda { position: relative; background: var(--noche); color: var(--tiza); }
.banda__foto { height: clamp(15rem, 42vw, 34rem); }
.banda__texto { padding-block: 1.75rem 2.25rem; }
.banda__caja {
max-width: 31rem;
padding: 1.5rem 1.6rem;
border: 1px solid var(--filete-cian);
background: var(--noche);
}
.banda__frase {
font: 500 clamp(1.25rem, 1.05rem + .9vw, 1.625rem)/1.35 var(--f-titulo);
letter-spacing: -.015em;
color: var(--blanco);
text-wrap: balance;
}
.banda__coord {
margin-top: 1rem;
font: 500 .72rem/1.4 var(--f-mono);
letter-spacing: .1em;
color: var(--niebla);
}
/* Trayecto (España → Países Bajos) */
.ruta {
position: relative;
margin: 0;
padding: 1.25rem 1.5rem;
list-style: none;
border: 1px solid var(--filete-cian);
background: var(--noche);
}
.ruta::after {
content: "";
position: absolute;
top: -1px; right: -1px;
width: 12px; height: 12px;
border-top: 2px solid var(--cian);
border-right: 2px solid var(--cian);
}
.ruta__paso {
position: relative;
display: grid;
grid-template-columns: 2.25rem minmax(0, 1fr);
gap: 1rem;
align-items: center;
padding: .9rem 0;
}
.ruta__paso:not(:last-child)::before {
content: "";
position: absolute;
left: calc(1.125rem - .5px);
top: calc(50% + 1.125rem);
height: calc(100% - 2.25rem);
border-left: 1px dashed var(--cian);
}
.ruta__punto {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 2.25rem; height: 2.25rem;
border: 1px solid var(--cian);
border-radius: 50%;
background: var(--noche);
font: 600 .8rem/1 var(--f-mono);
color: var(--cian);
}
.ruta__paso:last-child .ruta__punto { background: var(--cian); color: var(--noche); }
.ruta__dato { display: flex; flex-direction: column; gap: .15rem; }
.ruta__clave {
font: 500 .72rem/1.4 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
color: var(--niebla);
}
.ruta__valor { font: 500 1.0625rem/1.35 var(--f-titulo); color: var(--blanco); }
/* Factores del precio */
.factores {
margin: 0;
border: 1px solid var(--filete);
background: var(--blanco);
}
.factores__cab {
margin: 0;
padding: .8rem 1.25rem;
border-bottom: 1px solid var(--filete);
font: 500 .72rem/1.3 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cian-tinta);
}
.factores__lista { margin: 0; padding: 0; list-style: none; }
.factor {
display: grid;
grid-template-columns: 2.75rem minmax(0, 1fr);
gap: 1rem;
align-items: center;
padding: 1.1rem 1.25rem;
border-bottom: 1px solid var(--filete);
}
.factor:last-child { border-bottom: 0; }
.factor__icono {
display: grid;
place-items: center;
width: 2.75rem; height: 2.75rem;
background: var(--cian-velo);
}
.factor__icono svg {
width: 1.5rem; height: 1.5rem;
fill: none;
stroke: var(--cian-tinta);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.factor__nombre { display: block; font: 600 1.0625rem/1.3 var(--f-titulo); color: var(--grafito); }
.factor__unidad { display: block; font: 500 .8rem/1.4 var(--f-mono); color: var(--gris-tinta); }
.factores__pie {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin: 0;
padding: 1.5rem 1.25rem;
background-color: var(--grafito);
background-image:
linear-gradient(rgba(0, 166, 200, .075) 1px, transparent 1px),
linear-gradient(90deg, rgba(0, 166, 200, .075) 1px, transparent 1px);
background-size: 32px 32px;
color: var(--tiza);
}
.factores__pie p {
font: 500 1.125rem/1.4 var(--f-titulo);
letter-spacing: -.01em;
color: var(--blanco);
}
/* Factores en fila (portada): tres celdas + la de acción */
.factores { display: grid; }
.factores .factor { padding: 1.4rem 1.25rem; }
/* Límites en franja oscura: cifras grandes y tabla a todo el ancho */
.bloque--oscuro .cifra { border-top-color: var(--cian); }
.bloque--oscuro .cifra__valor { color: var(--cian); }
.bloque--oscuro .cifra__unidad { color: var(--vapor); }
.bloque--oscuro .cifra__texto { color: var(--vapor); }
.bloque--oscuro .w-tabla { margin: 0; border-color: var(--filete-cian); }
.bloque--oscuro .w-tabla th { background: var(--noche); color: var(--cian-vivo); }
.bloque--limites .cifra { grid-template-columns: 9rem minmax(0, 1fr); }
/* Tabla de límites plegable: abierta en escritorio, plegada en móvil (las cifras ya dan lo esencial) */
.plegable > summary { display: none; }
.plegable__cab {
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: .95rem 1.1rem;
border: 1px solid var(--filete-cian);
background: var(--noche);
color: var(--tiza);
font: 500 .8125rem/1.3 var(--f-mono);
letter-spacing: .1em;
text-transform: uppercase;
list-style: none;
cursor: pointer;
}
.plegable__cab::-webkit-details-marker { display: none; }
.plegable__cab::after {
content: "";
flex: 0 0 .55rem;
height: .55rem;
border-right: 2px solid var(--cian);
border-bottom: 2px solid var(--cian);
transform: rotate(45deg) translateY(-2px);
transition: transform .2s ease;
}
.plegable[open] > .plegable__cab::after { transform: rotate(-135deg) translateY(-2px); }
.plegable[open] > .plegable__cab { border-bottom-color: transparent; }
.bloque--limites .cifra__valor { font-size: clamp(2.75rem, 1.6rem + 5vw, 6.5rem); }
/* Notas cortas bajo el trayecto */
.notas { display: grid; gap: 1rem; margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.nota {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: 1rem;
align-items: start;
margin: 0;
padding: 1.1rem 1.25rem;
border: 1px solid var(--filete);
background: var(--hormigon);
color: var(--gris-tinta);
font-size: 1rem;
line-height: 1.55;
}
.nota strong { color: var(--grafito); }
.nota a { color: var(--cian-tinta); text-underline-offset: 3px; white-space: nowrap; }
.nota a:hover { color: var(--grafito); }
.nota__icono {
width: 2.5rem; height: 2.5rem;
padding: .5rem;
background: var(--cian-velo);
fill: none;
stroke: var(--cian-tinta);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.bloque__cab--ancha { max-width: 58rem; }
/* Cifras de la ficha */
.cifras {
display: grid;
gap: 0;
margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
padding: 0;
list-style: none;
}
.cifra {
display: grid;
grid-template-columns: 7.5rem minmax(0, 1fr);
align-items: baseline;
gap: 1rem;
padding: 1rem 0;
border-top: 2px solid var(--grafito);
}
.cifra__valor {
font: 600 clamp(2.25rem, 1.5rem + 3.2vw, 4.5rem)/1 var(--f-titulo);
letter-spacing: -.045em;
color: var(--cian-tinta);
white-space: nowrap;
}
.cifra__unidad { font-size: .42em; letter-spacing: 0; margin-left: .15em; color: var(--pizarra); }
.cifra__texto { font-size: .975rem; line-height: 1.45; color: var(--gris-tinta); }
/* Foto + texto: la foto llena su caja (no queda el degradado solo) y lleva un rótulo de plano */
.foto-lado { aspect-ratio: 4 / 3; border: 1px solid var(--filete-cian); }
.foto-lado img { position: absolute; inset: 0; }
.foto-lado__dato {
position: absolute;
left: 0; bottom: 0;
z-index: 1;
max-width: calc(100% - 1.5rem);
margin: 0;
padding: .55rem .9rem;
background: var(--noche);
color: var(--tiza);
font: 500 .72rem/1.4 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
}
.foto-lado::after {
content: "";
position: absolute;
top: -1px; right: -1px;
width: 14px; height: 14px;
border-top: 2px solid var(--cian);
border-right: 2px solid var(--cian);
}
.apartado {
display: grid;
grid-template-columns: 2.5rem minmax(0, 1fr);
gap: 1rem;
padding: 1.25rem 0;
border-top: 1px solid var(--filete);
}
.apartado:first-of-type { margin-top: 1.5rem; }
.apartado__icono {
width: 2.5rem; height: 2.5rem;
padding: .5rem;
border: 1px solid var(--filete);
background: var(--blanco);
fill: none;
stroke: var(--cian-tinta);
stroke-width: 1.6;
stroke-linecap: round;
stroke-linejoin: round;
}
.apartado h3 { margin: .3rem 0 .4rem; font-size: 1.2rem; color: var(--grafito); }
.apartado p { color: var(--gris-tinta); }
.aviso {
margin-top: .5rem;
padding: .85rem 1rem;
border-left: 3px solid var(--cian-tinta);
background: var(--cian-velo);
color: var(--grafito);
font-weight: 500;
}
/* Índice de destinos */
.destinos { display: grid; gap: 1rem; }
.region {
border: 1px solid var(--filete-osc);
background: var(--noche);
}
.region__cab {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto auto;
align-items: center;
gap: .75rem;
padding: 1rem 1.25rem;
list-style: none;
cursor: pointer;
border-bottom: 1px solid var(--filete-osc);
}
.region__cab::-webkit-details-marker { display: none; }
.region__cab::after {
content: "";
width: .55rem; height: .55rem;
margin-right: .2rem;
border-right: 2px solid var(--cian);
border-bottom: 2px solid var(--cian);
transform: rotate(45deg) translateY(-2px);
transition: transform .2s ease;
}
.region[open] .region__cab::after { transform: rotate(-135deg) translateY(-2px); }
.region:not([open]) .region__cab { border-bottom-color: transparent; }
.region__cod {
display: grid;
place-items: center;
width: 2.25rem; height: 2.25rem;
border: 1px solid var(--cian);
font: 600 .95rem/1 var(--f-mono);
color: var(--cian);
}
.region__nombre { font: 600 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.1 var(--f-titulo); letter-spacing: -.025em; color: var(--blanco); }
.region__cuenta {
font: 500 .8125rem/1.2 var(--f-mono);
letter-spacing: .06em;
color: var(--vapor);
white-space: nowrap;
}
.region__cuerpo { padding: 1rem 1.25rem 1.25rem; }
.region__enlace {
display: flex;
align-items: center;
justify-content: space-between;
gap: .75rem;
padding-bottom: .8rem;
border-bottom: 1px dashed var(--filete-cian);
color: var(--cian);
font: 600 1rem/1.3 var(--f-titulo);
text-decoration: none;
}
.region__enlace::after {
content: "";
flex: 0 0 .45rem;
height: .45rem;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
transition: transform .2s ease;
}
.region__enlace:hover { color: var(--cian-vivo); }
.region__enlace:hover::after { transform: translateX(3px) rotate(45deg); }
.region__lista { margin: 0; padding: 0; list-style: none; }
.region__lista a {
position: relative;
display: flex;
flex-direction: column;
gap: .3rem;
padding: 1rem 1.5rem 1rem 0;
border-bottom: 1px solid rgba(255, 255, 255, .2);
color: var(--blanco);
text-decoration: none;
}
.region__lista a::after {
content: "";
position: absolute;
right: .25rem; top: 50%;
width: .45rem; height: .45rem;
margin-top: -.25rem;
border-top: 1.5px solid var(--cian);
border-right: 1.5px solid var(--cian);
transform: rotate(45deg);
transition: transform .2s ease;
}
.region__lista a:hover::after { transform: translateX(3px) rotate(45deg); }
.region__lista li:last-child a { border-bottom: 0; }
.region__prov { font: 600 1.1875rem/1.25 var(--f-titulo); letter-spacing: -.01em; transition: color .2s ease; }
.region__meta { font: 500 .8125rem/1.4 var(--f-mono); letter-spacing: .03em; color: var(--vapor); }
.region__lista a:hover .region__prov { color: var(--cian-vivo); }
.region__ciudades {
display: grid;
gap: .6rem;
margin: .5rem 0 0;
padding: 1rem;
border: 1px solid var(--filete-cian);
background: rgba(0, 166, 200, .07);
}
.region__rotulo {
font: 500 .75rem/1.3 var(--f-mono);
letter-spacing: .12em;
text-transform: uppercase;
color: var(--cian-vivo);
}
.region__chips { display: grid; gap: .1rem; margin: 0; font: 500 1.0625rem/1.35 var(--f-titulo); color: var(--blanco); }
.region__chips > * {
display: flex;
align-items: center;
gap: .6rem;
padding: .3rem 0;
color: var(--blanco);
text-decoration: none;
}
.region__chips > *::before {
content: "";
flex: 0 0 .4rem;
height: .4rem;
border: 1.5px solid var(--cian);
border-radius: 50%;
}
.region__chips a:hover { color: var(--cian-vivo); }
.region__chips a:hover::before { background: var(--cian); }
.destinos__pie {
margin-top: 1.75rem;
padding-top: 1.25rem;
border-top: 1px solid var(--filete-osc);
color: var(--vapor);
max-width: 62ch;
}
.destinos__pie a { color: var(--cian-vivo); text-underline-offset: 3px; }
.destinos__pie a:hover { color: var(--blanco); }
/* Cierre de portada */
.cierre-portada { padding-block: clamp(3rem, 7vw, 5.5rem); }
.cierre-portada__caja {
display: grid;
border: 1px solid var(--filete-cian);
background: var(--grafito);
color: var(--tiza);
}
.cierre-portada__texto { padding: clamp(1.75rem, 4.5vw, 3.5rem); }
.cierre-portada h2 {
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
letter-spacing: -.03em;
color: var(--blanco);
}
.cierre-portada__texto > p:not(.num) { margin-top: 1rem; max-width: 34em; color: var(--vapor); font-size: 1.125rem; }
.cierre-portada__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }
.cierre-portada__foto { min-height: 14rem; }
/* --- Pie ------------------------------------------------------------------ */
.pie {
padding-top: clamp(3rem, 6vw, 4.5rem);
background: var(--noche);
color: var(--tiza);
border-top: 1px solid var(--filete-cian);
}
.pie__rejilla {
display: grid;
gap: 2.25rem;
padding-bottom: 2.5rem;
}
.pie__marca .marca { margin-bottom: 1rem; }
.pie__texto { max-width: 30em; font-size: .95rem; color: var(--niebla); }
.pie__texto strong { color: var(--tiza); font-weight: 600; }
.pie__titulo {
margin: 0 0 .9rem;
font: 500 .72rem/1.3 var(--f-mono);
letter-spacing: .14em;
text-transform: uppercase;
color: var(--cian);
}
.pie__lista { margin: 0; padding: 0; list-style: none; }
.pie__lista li + li { margin-top: .5rem; }
.pie__lista a,
.pie__tel {
color: var(--niebla);
font-size: .95rem;
text-decoration: none;
transition: color .2s ease;
}
.pie__lista a:hover { color: var(--blanco); }
.pie__tel {
display: inline-block;
font: 600 1.25rem/1.2 var(--f-titulo);
color: var(--blanco);
letter-spacing: -.01em;
}
.pie__tel:hover { color: var(--cian); }
.pie__horario { margin-top: .4rem; font-size: .9rem; color: var(--niebla); }
.pie__base {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: .5rem 1.5rem;
padding-block: 1.25rem 1.5rem;
border-top: 1px solid var(--filete-osc);
font: 500 .75rem/1.5 var(--f-mono);
letter-spacing: .04em;
color: var(--niebla);
}
.pie__base p { margin: 0; }
/* ==========================================================================
Ajustes por ancho (siempre al final)
========================================================================== */
@media (max-width: 39.99rem) {
.w-hermanas__enlaces:has(> a:nth-child(25)) {
max-height: 26rem;
overflow-y: auto;
padding: 0 .75rem;
border: 1px solid var(--filete);
background: var(--blanco);
}
.w-hijas__rejilla:has(> :nth-child(13)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-faq__resp { padding: 0 0 1.25rem 2.75rem; }
.heroe__acciones .boton { flex: 1 1 auto; }
.cierre-portada__acciones .boton { flex: 1 1 auto; }
/* Antetítulo compacto: una línea y el filete alineado con ella */
.w-antetitulo { align-items: flex-start; gap: .55rem; font-size: .6875rem; letter-spacing: .03em; }
.w-antetitulo::before { flex-basis: .9rem; margin-top: .72em; }
/* La ruta del héroe no se lee a este ancho: queda la foto */
.trayecto__ruta { display: none; }
.p-cotizar__marco .w-cta { width: 100%; }
/* Páginas largas en móvil: menos aire vertical en bloques y fichas, para que no sean un muro de tarjetas */
.bloque { padding-block: 2.5rem; }
.bloque__cab { margin-bottom: 1.5rem; }
.paso { padding: 1.15rem 1.1rem 1.25rem; }
.paso h3 { margin-top: .75rem; }
.paso__num { font-size: 2.25rem; }
.pasos { gap: .75rem; }
.cifra { padding: .7rem 0; }
.cifras { margin-bottom: 1.5rem; }
.apartado { padding: .9rem 0; }
.nota { padding: .9rem 1rem; }
.factor,
.factores .factor { padding: .9rem 1.1rem; }
.ruta__paso { padding: .6rem 0; }
.region__cab { padding: .8rem 1rem; }
.region__lista a { padding: .75rem 1.5rem .75rem 0; }
.w-datos { padding: 2.6rem 1rem .2rem; }
.w-datos__fila { padding: .65rem 0; }
.p-modos__item { padding: .9rem 1rem; }
.w-seccion { margin-bottom: 2.25rem; padding-top: 1.1rem; }
.p-articulo > .w-seccion:nth-child(3n+2) { padding: 1.1rem 1rem 1.25rem; }
.w-faq { padding: 1.1rem 1rem; margin-bottom: 2.25rem; }
.w-faq__item summary { padding: .85rem 0; }
.w-hijas,
.w-hermanas { margin-bottom: 2.25rem; }
.w-tarjeta { padding: .9rem 2.5rem 1rem 1rem; }
.w-cierre { padding: 1.25rem 1.1rem; }
.cierre-portada { padding-block: 2.5rem; }
.banda__texto { padding-block: 1.25rem 1.5rem; }
.heroe--interior .heroe__rejilla { gap: 1.5rem; }
/* Tabla de límites de la portada: plegada tras su rótulo (el JS la cierra al cargar) */
.plegable > summary { display: flex; }
.plegable[open] > .w-tabla { margin-top: 0; }
/* Tablas en filas apiladas: etiqueta arriba, valor abajo */
.w-tabla:has(> table.tabla-apilable) { overflow: visible; border: 0; background: none; }
table.tabla-apilable,
.tabla-apilable tbody,
.tabla-apilable tr,
.tabla-apilable td { display: block; width: 100%; }
table.tabla-apilable { min-width: 0 !important; margin: 1.5rem 0; }
.tabla-apilable thead {
position: absolute;
width: 1px; height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.tabla-apilable tr {
margin-bottom: .5rem;
border: 1px solid var(--filete);
background: var(--blanco);
color: var(--grafito);
}
.tabla-apilable td { padding: .5rem .85rem; border-top: 1px solid var(--filete); background: var(--blanco); }
.tabla-apilable td:first-child { border-top: 0; background: var(--hormigon); font: 600 1.0625rem/1.35 var(--f-titulo); }
.tabla-apilable td[data-label]::before {
content: attr(data-label);
display: block;
margin-bottom: .2rem;
font: 500 .7rem/1.35 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gris-tinta);
}
.tabla-apilable td:first-child::before { display: none; }
/* Dos columnas: la primera celda ya es la etiqueta */
.tabla-apilable:not(:has(th:nth-child(3))) tbody { border: 1px solid var(--filete); background: var(--blanco); }
.tabla-apilable:not(:has(th:nth-child(3))) tr { margin: 0; border: 0; border-top: 1px solid var(--filete); padding: .8rem 1rem; }
.tabla-apilable:not(:has(th:nth-child(3))) tr:first-child { border-top: 0; }
.tabla-apilable:not(:has(th:nth-child(3))) td { padding: 0; border: 0; background: none; }
.tabla-apilable:not(:has(th:nth-child(3))) td:first-child {
margin-bottom: .2rem;
font: 500 .72rem/1.4 var(--f-mono);
letter-spacing: .08em;
text-transform: uppercase;
color: var(--gris-tinta);
}
.tabla-apilable:not(:has(th:nth-child(3))) td + td { font: 600 1.0625rem/1.4 var(--f-titulo); }
.tabla-apilable:not(:has(th:nth-child(3))) td + td::before { display: none; }
.w-tabla .tabla-apilable tbody tr:hover td { background: var(--blanco); }
.w-tabla .tabla-apilable tbody tr:hover td:first-child { background: var(--hormigon); }
.w-tabla .tabla-apilable:not(:has(th:nth-child(3))) tbody tr:hover td { background: none; }
}
@media (min-width: 40rem) {
.w-datos__fila { grid-template-columns: 2rem 8.5rem minmax(0, 1fr); align-items: baseline; }
.w-datos__fila::before { grid-row: 1; }
.w-datos dd { grid-column: 3; grid-row: 1; margin: 0; }
.w-datos dt { grid-row: 1; }
.cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; }
.cifra { display: block; padding-top: 1.25rem; }
.cifra__texto { display: block; margin-top: .75rem; }
.bloque--limites .cifra { display: block; }
.destinos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.region__lista { min-height: 20.5rem; }
.p-modos__lista { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.p-modos__item { grid-template-columns: minmax(0, 1fr); align-content: start; border-top: 0; border-left: 1px solid var(--filete-osc); }
.p-modos__item:first-child { border-left: 0; }
.p-modos__icono { grid-row: auto; margin-bottom: .6rem; }
.pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.w-hermanas__enlaces { columns: 3 11rem; column-gap: 2rem; }
.notas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.factores__lista { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.factores .factor {
grid-template-columns: minmax(0, 1fr);
align-content: start;
border-bottom: 0;
border-right: 1px solid var(--filete);
}
.factores .factor:last-child { border-right: 0; }
.factores__pie { flex-direction: row; align-items: center; }
.p-cotizar__marco:not(:has(.w-cotizador)) { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
.p-cotizar__marco:not(:has(.w-cotizador))::before { grid-column: 1; grid-row: 1; }
.p-cotizar__marco:not(:has(.w-cotizador))::after { grid-column: 1; grid-row: 2; }
.p-cotizar__marco:not(:has(.w-cotizador)) .w-cta-linea { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
/* Contacto: datos del servicio en una fila de tres columnas compactas (sin el teléfono) */
[class*="contacto"] .heroe .w-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.5rem; padding-bottom: .5rem; }
[class*="contacto"] .heroe .w-datos__fila { grid-template-columns: minmax(0, 1fr); align-items: start; border-bottom: 0; }
[class*="contacto"] .heroe .w-datos__fila::before { grid-row: auto; }
[class*="contacto"] .heroe .w-datos dt { grid-column: 1; grid-row: auto; }
[class*="contacto"] .heroe .w-datos dd { grid-column: 1; grid-row: auto; margin-top: .2rem; }
}
@media (min-width: 60rem) {
:root { --cab-alto: 4.5rem; }
.cab__barra { flex-wrap: nowrap; }
.cab__boton { display: none; }
.menu,
.no-js .menu {
position: static;
display: flex;
align-items: center;
gap: 1.25rem;
width: auto;
max-height: none;
overflow: visible;
padding: 0;
background: none;
border: 0;
}
.menu__lista { display: flex; align-items: center; gap: .25rem; }
.menu__lista > li { position: relative; }
.menu__enlace {
position: relative;
padding: .6rem .85rem;
border: 0;
font-size: .975rem;
}
.menu__enlace::after {
content: "";
position: absolute;
left: .85rem; right: .85rem; bottom: .3rem;
height: 1px;
background: var(--cian);
transform: scaleX(0);
transform-origin: left;
transition: transform .25s ease;
}
.menu__enlace:hover::after,
.menu__grupo:focus-within > .menu__enlace::after { transform: scaleX(1); }
.menu__grupo > .menu__enlace { padding-right: 1.6rem; }
.menu__grupo > .menu__enlace::before {
content: "";
position: absolute;
right: .7rem; top: 50%;
width: .38rem; height: .38rem;
margin-top: -.3rem;
border-right: 1.5px solid var(--cian);
border-bottom: 1.5px solid var(--cian);
transform: rotate(45deg);
}
.menu__sub {
position: absolute;
top: calc(100% + .5rem);
left: 0;
min-width: 17.5rem;
padding: .5rem 0;
border: 1px solid var(--filete-cian);
background: var(--noche);
box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .6);
opacity: 0;
visibility: hidden;
transform: translateY(-4px);
transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.menu__sub::before {
content: "";
position: absolute;
left: 0; right: 0; top: -.6rem;
height: .6rem;
}
.menu__grupo:hover > .menu__sub,
.menu__grupo:focus-within > .menu__sub {
opacity: 1;
visibility: visible;
transform: none;
}
.menu__sub a { padding: .6rem 1.1rem; font-size: .95rem; }
.menu__sub a:hover { background: rgba(0, 166, 200, .1); }
.menu__cta { width: auto; margin: 0; min-height: 2.5rem; padding: .55rem 1rem; font-size: .95rem; }
.heroe__rejilla { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 5rem); }
.heroe__rejilla:has(> .heroe__ficha:empty) { grid-template-columns: minmax(0, 1fr); }
.heroe__rejilla:has(> .heroe__ficha:empty) .heroe__texto { max-width: 54rem; }
/* Héroe interior: texto + atención a la izquierda, ficha a la derecha */
/* Las migas quedan encima de las dos columnas: la derecha arranca a la altura del antetítulo */
.heroe--interior .heroe__rejilla {
grid-template-areas: "texto ficha" "atencion ficha" "foto foto";
grid-template-rows: auto 1fr auto;
align-items: start;
align-content: start;
row-gap: 1.75rem;
}
.heroe--interior .heroe__texto { grid-area: texto; }
.heroe--interior .atencion { grid-area: atencion; }
.heroe--interior .heroe__ficha { grid-area: ficha; align-self: start; }
.heroe--interior .heroe__rejilla:has(> .heroe__ficha:empty) { grid-template-areas: "texto" "atencion" "foto"; }
/* El velo de la retícula solo cubre la columna del texto */
.heroe--interior { --capa: linear-gradient(90deg, rgba(28, 34, 40, .8) 0, rgba(28, 34, 40, .8) 48%, rgba(28, 34, 40, 0) 70%); }
.heroe--interior .heroe__foto { grid-area: foto; }
/* Composición del héroe según el nivel del árbol */
/* Servicio: foto a todo el ancho del héroe, bajo el texto y la ficha */
[class*="servicio"] .heroe--interior .heroe__foto { height: clamp(13rem, 20vw, 17rem); }
[class*="servicio"] .heroe--interior .heroe__foto .w-foto img { aspect-ratio: auto; }
/* Provincia: foto con el localizador arriba a la derecha y la ficha debajo */
.pag-division .heroe--interior .heroe__rejilla {
grid-template-areas: "texto foto" "texto ficha" "atencion ficha";
grid-template-rows: auto auto 1fr;
}
.pag-division .heroe--interior .heroe__foto .w-foto img { aspect-ratio: 16 / 10; }
/* Ciudad: foto apaisada bajo la entradilla; localizador y ficha a la derecha */
.pag-ciudad .heroe--interior .heroe__rejilla {
grid-template-areas: "texto ficha" "foto ficha" "atencion ficha";
grid-template-rows: auto auto 1fr;
}
/* Región: el mapa ocupa la columna derecha, del antetítulo al pie de la ficha; la atención, debajo a lo ancho */
[class*="region"] .heroe--interior .heroe__rejilla,
[class*="region"] .heroe--interior .heroe__rejilla:has(> .heroe__ficha:empty) {
grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
grid-template-rows: auto auto auto;
grid-template-areas: "texto mapa" "ficha mapa" "atencion atencion";
}
[class*="region"] .heroe--interior .heroe__rejilla::after { display: block; }
[class*="region"] .heroe--interior .heroe__ficha { align-self: start; }
/* Región: la foto pasa a fondo de todo el héroe, apagada; encima, la retícula, el mapa y la ficha */
.pag-region .heroe--interior .heroe__foto {
position: absolute;
inset: 0;
z-index: -1;
border: 0;
}
.pag-region .heroe--interior .heroe__foto .w-foto img { aspect-ratio: auto; }
.pag-region .heroe--interior .heroe__foto::after {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(rgba(0, 166, 200, .05) 1px, transparent 1px) -1px -1px / 160px 160px,
linear-gradient(90deg, rgba(0, 166, 200, .05) 1px, transparent 1px) -1px -1px / 160px 160px,
linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) -1px -1px / 32px 32px,
linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) -1px -1px / 32px 32px,
linear-gradient(90deg, rgba(18, 24, 28, .95) 0, rgba(18, 24, 28, .92) 50%, rgba(18, 24, 28, .62) 100%);
}
/* Contacto: la tarjeta de atención arriba a la derecha, a la altura del texto; debajo, ficha y foto */
[class*="contacto"] .heroe--interior .heroe__rejilla,
[class*="contacto"] .heroe--interior .heroe__rejilla:has(> .heroe__ficha:empty) {
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
grid-template-rows: auto auto;
grid-template-areas: "texto atencion" "ficha foto";
}
[class*="contacto"] .heroe--interior .heroe__ficha { align-self: start; }
[class*="contacto"] .heroe--interior .atencion { align-self: start; }
[class*="contacto"] .heroe--interior .heroe__foto .w-foto img { aspect-ratio: 16 / 10; }
/* Trayecto de la portada en horizontal */
.ruta--linea {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1.5rem;
padding: 1.75rem;
}
.ruta--linea .ruta__paso { grid-template-columns: minmax(0, 1fr); align-items: start; gap: .9rem; padding: 0; }
.ruta--linea .ruta__paso:not(:last-child)::before {
left: 2.75rem;
top: 1.125rem;
width: calc(100% - 1.75rem);
height: 0;
border-left: 0;
border-top: 1px dashed var(--cian);
}
.factores { grid-template-columns: minmax(0, 3fr) minmax(0, 1.25fr); }
.factores__pie { flex-direction: column; align-items: flex-start; justify-content: center; padding: 1.75rem; }
.dos { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.dos--foto { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; }
.pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.paso + .paso { border-left: 0; }
.banda__texto {
position: absolute;
left: 0; right: 0;
bottom: clamp(1.5rem, 4vw, 3rem);
padding-block: 0;
}
.marca { font-size: 1.0625rem; gap: .75rem; }
.marca__icono { width: 2.125rem; height: 2.125rem; }
.cierre-portada__caja { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.cierre-portada__foto { min-height: 20rem; }
.cierre-portada__foto img { position: absolute; inset: 0; }
.pie__rejilla { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
}
@media (min-width: 75rem) {
.destinos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.region__cab { pointer-events: none; cursor: default; }
.region__cab::after { display: none; }
.region__cab { grid-template-columns: auto minmax(0, 1fr); }
.region__cuenta { grid-column: 2; }
.w-seccion {
display: grid;
grid-template-columns: 8rem minmax(0, 1fr);
column-gap: 2rem;
}
.w-seccion::before { grid-column: 1; grid-row: 1; margin: .55rem 0 0; }
.w-seccion > * { grid-column: 2; }
.w-seccion > h2 { grid-row: 1; }
.w-hermanas__enlaces { columns: 4 12rem; }
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { transition: none !important; animation: none !important; }
}
@media print {
.cab, .pie, .w-cotizador, .heroe__regla { display: none; }
.plano, .heroe { background: none; color: #000; }
}