/* ==========================================================================
   Transporte directo a Croacia · hoja de estilo
   Paleta «Cobalto eléctrico y blanco» · Fraunces (títulos) + Inter (texto)
   Maqueta editorial: titular a todo el ancho, entradilla, columnas con
   capitular, fotos con pie y secciones numeradas.
   Los @media de ajuste van todos al final.
   ========================================================================== */

:root {
  --papel: #FFFFFF;
  --tinta: #0A0F2C;
  --cobalto: #1F3FFF;
  --cobalto-hondo: #1428C8;
  --acento: #FF3D7F;          /* solo como fondo o con texto oscuro encima */
  --acento-tinta: #C8104F;    /* acento legible sobre papel y superficie (≥ 5:1) */
  --superficie: #F1F3FF;
  --superficie-honda: #E3E7FF;
  --gris: #4A5070;            /* texto secundario: 7,8:1 sobre papel */
  --filete: #D6DBF4;
  --filete-superficie: #CDD3F2;
  --noche-texto: #E6E9FF;
  --noche-gris: #AEB5DA;
  --noche-filete: #262C52;
  --noche-cobalto: #8C9BFF;   /* cobalto legible sobre la tinta del pie (7,4:1) */

  --serif: 'Fraunces', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  --ancho: 1320px;
  --margen: clamp(20px, 4vw, 48px);
  --aire: clamp(56px, 8vw, 120px);
  --curva: cubic-bezier(.2, .7, .2, 1);
  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%231F3FFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E");

  /* Šahovnica: el ajedrezado de la bandera croata. El acento solo aparece con este motivo
     (logo, cotizador, numeración, remate y marcadores del mapa), nunca como franja suelta. */
  --sahovnica: conic-gradient(var(--acento) 25%, #fff 0 50%, var(--acento) 0 75%, #fff 0);

  /* Iconos de los índices (máscaras) */
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 18.5s6-5.3 6-10.2a6 6 0 0 0-12 0c0 4.9 6 10.2 6 10.2z'/%3E%3Ccircle cx='10' cy='8.3' r='2.2'/%3E%3C/svg%3E");
  --i-caja: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M10 2l7.5 3.7v8.6L10 18l-7.5-3.7V5.7z'/%3E%3Cpath d='M2.5 5.7L10 9.4l7.5-3.7M10 9.4V18'/%3E%3C/svg%3E");
  --i-camion: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M1.5 4.5h10.5v9.5H1.5z'/%3E%3Cpath d='M12 8h3.8l2.7 3.2V14H12'/%3E%3Ccircle cx='5' cy='15.2' r='1.7' fill='white'/%3E%3Ccircle cx='15' cy='15.2' r='1.7' fill='white'/%3E%3C/svg%3E");
  --i-rayo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M11.5 1.5L4 11h5.2l-1 7.5L16 9h-5.3z'/%3E%3C/svg%3E");
  --i-tel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5h-3a1 1 0 0 0-1 1C2.5 11 9 17.5 16.5 17.5a1 1 0 0 0 1-1v-3l-3.5-1.5-2 2a10 10 0 0 1-5-5l2-2z'/%3E%3C/svg%3E");
  --i-casa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M2.5 9L10 2.5 17.5 9v8.5h-15z'/%3E%3Cpath d='M8 17.5v-5h4v5'/%3E%3C/svg%3E");
}

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

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

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

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

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

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

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

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

strong { font-weight: 600; }

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

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

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

.t-boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border: 0;
  border-radius: 2px;
  background: var(--cobalto);
  color: #fff;
  font-family: var(--sans);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--curva), color .2s var(--curva), transform .2s var(--curva);
}
.t-boton:hover,
.w-cta:hover { background: var(--tinta); color: #fff; }
.t-boton:active,
.w-cta:active { transform: translateY(1px); }

.w-cta::after,
.t-boton--flecha::after {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 10h12M11 5l5 5-5 5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--curva);
}
.w-cta:hover::after,
.t-boton--flecha:hover::after { transform: translateX(3px); }

.t-boton--acento { background: var(--acento); color: var(--tinta); }
.t-boton--acento:hover { background: var(--tinta); color: #fff; }

.t-boton--claro { background: #fff; color: var(--cobalto-hondo); }
.t-boton--claro:hover { background: var(--superficie-honda); color: var(--tinta); }

/* Botón de línea blanca (sobre cobalto) */
.t-boton--linea {
  background: transparent;
  color: #fff;
  box-shadow: inset 0 0 0 1.5px #fff;
  font-variant-numeric: tabular-nums;
}
.t-boton--linea:hover { background: #fff; color: var(--cobalto-hondo); }
.t-boton--tel::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--i-tel) center / contain no-repeat;
  mask: var(--i-tel) center / contain no-repeat;
}

.w-cta-linea { margin: 1.6em 0; }

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

.t-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 255, 255, .96);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--filete);
  transition: box-shadow .25s var(--curva);
}
.t-cabecera::before {
  content: "";
  display: block;
  height: 3px;
  background: var(--cobalto);
}
.t-cabecera.con-sombra { box-shadow: 0 8px 24px -18px rgba(10, 15, 44, .45); }

.t-cabecera__barra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 16px;
  min-height: 66px;
}

.t-marca {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 10px 0;
  color: var(--tinta);
  text-decoration: none;
}
.t-marca:hover { color: var(--tinta); }
.t-marca svg { width: 36px; height: 36px; flex: none; transition: transform .3s var(--curva); }
.t-marca:hover svg { transform: rotate(-6deg); }
.t-marca__texto {
  display: flex;
  flex-direction: column;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -.01em;
}
.t-marca__texto span + span { color: var(--cobalto); }

.t-menu-boton {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 42px;
  padding: 0 16px 0 14px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.t-menu-boton__barras {
  position: relative;
  width: 16px;
  height: 10px;
}
.t-menu-boton__barras::before,
.t-menu-boton__barras::after {
  content: "";
  position: absolute;
  left: 0;
  width: 16px;
  height: 2px;
  background: currentColor;
  transition: transform .25s var(--curva), top .25s var(--curva);
}
.t-menu-boton__barras::before { top: 0; }
.t-menu-boton__barras::after { top: 8px; }
.t-menu-boton[aria-expanded="true"] .t-menu-boton__barras::before { top: 4px; transform: rotate(45deg); }
.t-menu-boton[aria-expanded="true"] .t-menu-boton__barras::after { top: 4px; transform: rotate(-45deg); }
.no-js .t-menu-boton { display: none; }

.t-menu {
  flex-basis: 100%;
  padding: 4px 0 22px;
}
.js .t-menu { display: none; }
.js .t-menu.esta-abierto { display: block; }

.t-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.t-menu li a {
  position: relative;
  display: block;
  padding: 13px 0;
  border-top: 1px solid var(--filete);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
}
.t-menu li a:hover { color: var(--cobalto); }
.t-menu .t-boton { width: 100%; margin-top: 14px; }

/* --------------------------------------------------------------------------
   Héroe (portada e interiores)
   -------------------------------------------------------------------------- */

.w-heroe {
  padding: clamp(26px, 4.5vw, 60px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--filete);
}

.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 0;
  margin: 0 0 clamp(18px, 3vw, 30px);
  padding: 0;
  list-style: none;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--gris);
}
.w-migas li { display: inline-flex; align-items: center; min-width: 0; }
.w-migas li + li::before {
  content: "";
  width: 14px;
  height: 1px;
  margin: 0 10px;
  background: var(--gris);
}
.w-migas a { color: var(--gris); text-decoration: none; }
.w-migas a:hover { color: var(--cobalto); text-decoration: underline; }
.w-migas [aria-current] { color: var(--tinta); font-weight: 600; }

/* Ubicaciones: la cadena completa país → zona → condado → ciudad. Las migas de la fábrica
   saltan de «Inicio» al condado; el CSS intercala, sin tocar el HTML, los dos niveles que faltan. */
:root:has(link[rel="canonical"]:is([href*="/ciudad-de-zagreb/"], [href*="/condado-de-zagreb/"], [href*="/krapina-zagorje/"], [href*="/sisak-moslavina/"], [href*="/karlovac/"])) { --miga-zona: "Zagreb y el centro"; }
:root:has(link[rel="canonical"]:is([href*="/varazdin/"], [href*="/medimurje/"], [href*="/koprivnica-krizevci/"], [href*="/bjelovar-bilogora/"])) { --miga-zona: "Norte"; }
:root:has(link[rel="canonical"]:is([href*="/virovitica-podravina/"], [href*="/pozega-eslavonia/"], [href*="/brod-posavina/"], [href*="/osijek-baranja/"], [href*="/vukovar-sirmia/"])) { --miga-zona: "Eslavonia"; }
:root:has(link[rel="canonical"]:is([href*="/istria/"], [href*="/primorje-gorski-kotar/"], [href*="/lika-senj/"])) { --miga-zona: "Istria, Kvarner y Lika"; }
:root:has(link[rel="canonical"]:is([href*="/zadar/"], [href*="/sibenik-knin/"], [href*="/split-dalmacia/"], [href*="/dubrovnik-neretva/"])) { --miga-zona: "Dalmacia"; }
.w-migas li:first-child::after {
  content: var(--miga-pais, none);
  padding-left: 34px;
  background: linear-gradient(var(--gris), var(--gris)) 10px 50% / 14px 1px no-repeat;
}
:root:has(link[rel="canonical"]:is([href*="/ciudad-de-zagreb/"], [href*="/condado-de-zagreb/"], [href*="/krapina-zagorje/"], [href*="/sisak-moslavina/"], [href*="/karlovac/"], [href*="/varazdin/"], [href*="/medimurje/"], [href*="/koprivnica-krizevci/"], [href*="/bjelovar-bilogora/"], [href*="/virovitica-podravina/"], [href*="/pozega-eslavonia/"], [href*="/brod-posavina/"], [href*="/osijek-baranja/"], [href*="/vukovar-sirmia/"], [href*="/istria/"], [href*="/primorje-gorski-kotar/"], [href*="/lika-senj/"], [href*="/zadar/"], [href*="/sibenik-knin/"], [href*="/split-dalmacia/"], [href*="/dubrovnik-neretva/"])) {
  --miga-pais: "Croacia";
}
:root:has(link[rel="canonical"]:is([href*="/ciudad-de-zagreb/"], [href*="/condado-de-zagreb/"], [href*="/krapina-zagorje/"], [href*="/sisak-moslavina/"], [href*="/karlovac/"], [href*="/varazdin/"], [href*="/medimurje/"], [href*="/koprivnica-krizevci/"], [href*="/bjelovar-bilogora/"], [href*="/virovitica-podravina/"], [href*="/pozega-eslavonia/"], [href*="/brod-posavina/"], [href*="/osijek-baranja/"], [href*="/vukovar-sirmia/"], [href*="/istria/"], [href*="/primorje-gorski-kotar/"], [href*="/lika-senj/"], [href*="/zadar/"], [href*="/sibenik-knin/"], [href*="/split-dalmacia/"], [href*="/dubrovnik-neretva/"])) .w-migas li:nth-child(2)::before {
  content: var(--miga-zona);
  width: auto;
  height: auto;
  margin: 0;
  padding: 0 34px;
  background:
    linear-gradient(var(--gris), var(--gris)) 10px 50% / 14px 1px no-repeat,
    linear-gradient(var(--gris), var(--gris)) right 10px top 50% / 14px 1px no-repeat;
  color: var(--gris);
  white-space: nowrap;
}

.w-antetitulo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cobalto);
}
.w-antetitulo::before {
  content: "";
  width: 32px;
  height: 3px;
  flex: none;
  background: var(--cobalto);
}

.w-heroe h1 {
  margin: 0;
  font-size: clamp(1.85rem, .9rem + 4vw, 4.6rem);
  line-height: 1.03;
  letter-spacing: -.025em;
}

.t-heroe .w-antetitulo { margin-bottom: -8px; }
.t-heroe h1 {
  margin-bottom: 0;
  font-size: clamp(1.5rem, .2rem + 5.4vw, 5.5rem);
  line-height: 1.02;
  letter-spacing: -.03em;
}

/* Retícula del héroe: titular, texto + CTA, mapa y ficha, cotizador.
   Cada pieza se coloca por columna; las filas solo existen si hay contenido. */
.w-heroe__cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(24px, 3vw, 40px) clamp(40px, 5vw, 72px);
}
.w-heroe__cuerpo > * { min-width: 0; }
/* Portada: sin filete sobre la retícula; las dos columnas arrancan a la misma altura con su rótulo */
.t-heroe .w-heroe__cuerpo { padding-top: 0; border-top: 0; }

/* Titular de las interiores: antetítulo y H1 cerrados por el filete de tinta */
.w-heroe__titular {
  padding-bottom: clamp(22px, 3vw, 34px);
  border-bottom: 1px solid var(--tinta);
}

/* Si la fábrica ya pone su botón (o el cotizador) en el héroe, el de la plantilla sobra */
.w-pagina .w-heroe__cuerpo:has(> .w-cta-linea, > .w-cotizador) .w-heroe__accion .w-cta { display: none; }
.w-heroe__cuerpo > .w-cta-linea { margin: 0; }

.w-heroe__texto {
  display: grid;
  align-content: start;
  gap: 22px;
}
.w-heroe__ficha:empty,
.w-heroe__foto:empty { display: none; }
.w-heroe__lado { display: grid; align-content: start; gap: 24px; }
.w-heroe__lado:not(:has(.w-heroe__ficha:not(:empty))) { display: none; }
.w-heroe__ficha { display: grid; align-content: start; gap: 18px; }

/* Mapa de condados: solo en páginas de ubicación. Recorte de la zona a la izquierda,
   Croacia entera como situación a la derecha. */
.w-heroe__mapa { display: none; }
.w-mapa {
  display: block;
  height: auto;
  overflow: hidden;
}
.w-mapa use,
.w-mapa .w-mapa__detalle,
.t-region__mapa use {
  fill: #D3DAFF;
  stroke: #fff;
  stroke-width: 1.2px;
  stroke-linejoin: round;
  transition: fill .2s var(--curva);
}
.w-mapa--zona {
  display: none;
  grid-column: 1;
  grid-row: 1;
  width: 100%;
  max-height: 300px;
}
.w-mapa--pais {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  width: 100%;
  padding: 8px;
  background: var(--papel);
  box-shadow: inset 0 0 0 1px var(--filete-superficie);
}
.w-mapa--pais use { stroke-width: .8px; }
.w-mapa__rio { fill: none; stroke: #6F84FF; stroke-width: 2.6px; stroke-linecap: round; }
.w-mapa__via { fill: none; stroke: var(--tinta); stroke-width: 1.6px; stroke-dasharray: 7 4; stroke-linecap: round; }
.w-mapa__punto { display: none; fill: var(--acento); stroke: #fff; stroke-width: 2.5px; }
/* Zagreb: las tres ciudades siempre marcadas en tinta; la de la página, en acento */
.w-mapa--zagreb .w-mapa__punto { display: inline; fill: var(--tinta); }
/* Rótulos: tinta con halo blanco, legibles sobre el condado claro y sobre el cobalto; color = fill */
.w-mapa__rotulo {
  font-family: var(--sans);
  font-size: 4.4px;
  font-weight: 600;
  letter-spacing: .01em;
  fill: var(--tinta);
  color: var(--tinta);
  stroke: #fff;
  stroke-width: 1.1px;
  stroke-linejoin: round;
  paint-order: stroke fill;
}
.w-mapa__rotulo--capital { font-family: var(--serif); font-size: 5.4px; font-weight: 700; }
.w-mapa__rotulo--paso { font-weight: 500; font-style: italic; }
.w-mapa__rotulo--rio { font-family: var(--serif); font-size: 4.2px; font-style: italic; font-weight: 500; fill: var(--cobalto-hondo); color: var(--cobalto-hondo); }

/* Recorte por zona según la URL canónica de la página (condado y sus ciudades) */
:root:has(link[rel="canonical"]:is([href*="/ciudad-de-zagreb/"], [href*="/condado-de-zagreb/"])) .w-mapa--zagreb,
:root:has(link[rel="canonical"]:is([href*="/krapina-zagorje/"], [href*="/sisak-moslavina/"], [href*="/karlovac/"])) .w-mapa--centro,
:root:has(link[rel="canonical"]:is([href*="/varazdin/"], [href*="/medimurje/"], [href*="/koprivnica-krizevci/"], [href*="/bjelovar-bilogora/"])) .w-mapa--norte,
:root:has(link[rel="canonical"]:is([href*="/virovitica-podravina/"], [href*="/pozega-eslavonia/"], [href*="/brod-posavina/"], [href*="/osijek-baranja/"], [href*="/vukovar-sirmia/"])) .w-mapa--eslavonia,
:root:has(link[rel="canonical"]:is([href*="/istria/"], [href*="/primorje-gorski-kotar/"], [href*="/lika-senj/"])) .w-mapa--istria,
:root:has(link[rel="canonical"]:is([href*="/zadar/"], [href*="/sibenik-knin/"], [href*="/split-dalmacia/"], [href*="/dubrovnik-neretva/"])) .w-mapa--dalmacia { display: block; }

/* En las ciudades, un solo marcador: el de la ciudad de la página */
:root:has(link[rel="canonical"][href*="/ciudad-de-zagreb/zagreb/"]) .w-mapa__punto[data-p="zagreb"],
:root:has(link[rel="canonical"][href*="/condado-de-zagreb/velika-gorica/"]) .w-mapa__punto[data-p="velika-gorica"],
:root:has(link[rel="canonical"][href*="/condado-de-zagreb/samobor/"]) .w-mapa__punto[data-p="samobor"],
:root:has(link[rel="canonical"][href*="/sisak-moslavina/sisak/"]) .w-mapa__punto[data-p="sisak"],
:root:has(link[rel="canonical"][href*="/medimurje/cakovec/"]) .w-mapa__punto[data-p="cakovec"],
:root:has(link[rel="canonical"][href*="/koprivnica-krizevci/koprivnica/"]) .w-mapa__punto[data-p="koprivnica"],
:root:has(link[rel="canonical"][href*="/bjelovar-bilogora/bjelovar/"]) .w-mapa__punto[data-p="bjelovar"],
:root:has(link[rel="canonical"][href*="/brod-posavina/slavonski-brod/"]) .w-mapa__punto[data-p="slavonski-brod"],
:root:has(link[rel="canonical"][href*="/osijek-baranja/osijek/"]) .w-mapa__punto[data-p="osijek"],
:root:has(link[rel="canonical"][href*="/osijek-baranja/dakovo/"]) .w-mapa__punto[data-p="dakovo"],
:root:has(link[rel="canonical"][href*="/vukovar-sirmia/vinkovci/"]) .w-mapa__punto[data-p="vinkovci"],
:root:has(link[rel="canonical"][href*="/vukovar-sirmia/vukovar/"]) .w-mapa__punto[data-p="vukovar"],
:root:has(link[rel="canonical"][href*="/primorje-gorski-kotar/rijeka/"]) .w-mapa__punto[data-p="rijeka"],
:root:has(link[rel="canonical"][href*="/istria/pula/"]) .w-mapa__punto[data-p="pula"],
:root:has(link[rel="canonical"][href*="/sibenik-knin/sibenik/"]) .w-mapa__punto[data-p="sibenik"],
:root:has(link[rel="canonical"][href*="/split-dalmacia/split/"]) .w-mapa__punto[data-p="split"],
:root:has(link[rel="canonical"][href*="/split-dalmacia/kastela/"]) .w-mapa__punto[data-p="kastela"],
:root:has(link[rel="canonical"][href*="/dubrovnik-neretva/dubrovnik/"]) .w-mapa__punto[data-p="dubrovnik"],
:root:has(link[rel="canonical"][href*="/dubrovnik-neretva/ploce/"]) .w-mapa__punto[data-p="ploce"] { display: inline; fill: var(--acento); }

/* Condado de la página en cobalto: se reconoce por su URL canónica (vale para el condado y sus ciudades) */
:root:has(link[rel="canonical"][href*="/ciudad-de-zagreb/"], meta[property="og:url"][content*="/ciudad-de-zagreb/"]) .w-mapa [data-c="ciudad-de-zagreb"],
:root:has(link[rel="canonical"][href*="/condado-de-zagreb/"], meta[property="og:url"][content*="/condado-de-zagreb/"]) .w-mapa [data-c="condado-de-zagreb"],
:root:has(link[rel="canonical"][href*="/krapina-zagorje/"], meta[property="og:url"][content*="/krapina-zagorje/"]) .w-mapa [data-c="krapina-zagorje"],
:root:has(link[rel="canonical"][href*="/sisak-moslavina/"], meta[property="og:url"][content*="/sisak-moslavina/"]) .w-mapa [data-c="sisak-moslavina"],
:root:has(link[rel="canonical"][href*="/karlovac/"], meta[property="og:url"][content*="/karlovac/"]) .w-mapa [data-c="karlovac"],
:root:has(link[rel="canonical"][href*="/varazdin/"], meta[property="og:url"][content*="/varazdin/"]) .w-mapa [data-c="varazdin"],
:root:has(link[rel="canonical"][href*="/medimurje/"], meta[property="og:url"][content*="/medimurje/"]) .w-mapa [data-c="medimurje"],
:root:has(link[rel="canonical"][href*="/koprivnica-krizevci/"], meta[property="og:url"][content*="/koprivnica-krizevci/"]) .w-mapa [data-c="koprivnica-krizevci"],
:root:has(link[rel="canonical"][href*="/bjelovar-bilogora/"], meta[property="og:url"][content*="/bjelovar-bilogora/"]) .w-mapa [data-c="bjelovar-bilogora"],
:root:has(link[rel="canonical"][href*="/virovitica-podravina/"], meta[property="og:url"][content*="/virovitica-podravina/"]) .w-mapa [data-c="virovitica-podravina"],
:root:has(link[rel="canonical"][href*="/pozega-eslavonia/"], meta[property="og:url"][content*="/pozega-eslavonia/"]) .w-mapa [data-c="pozega-eslavonia"],
:root:has(link[rel="canonical"][href*="/brod-posavina/"], meta[property="og:url"][content*="/brod-posavina/"]) .w-mapa [data-c="brod-posavina"],
:root:has(link[rel="canonical"][href*="/osijek-baranja/"], meta[property="og:url"][content*="/osijek-baranja/"]) .w-mapa [data-c="osijek-baranja"],
:root:has(link[rel="canonical"][href*="/vukovar-sirmia/"], meta[property="og:url"][content*="/vukovar-sirmia/"]) .w-mapa [data-c="vukovar-sirmia"],
:root:has(link[rel="canonical"][href*="/istria/"], meta[property="og:url"][content*="/istria/"]) .w-mapa [data-c="istria"],
:root:has(link[rel="canonical"][href*="/primorje-gorski-kotar/"], meta[property="og:url"][content*="/primorje-gorski-kotar/"]) .w-mapa [data-c="primorje-gorski-kotar"],
:root:has(link[rel="canonical"][href*="/lika-senj/"], meta[property="og:url"][content*="/lika-senj/"]) .w-mapa [data-c="lika-senj"],
:root:has(link[rel="canonical"][href*="/zadar/"], meta[property="og:url"][content*="/zadar/"]) .w-mapa [data-c="zadar"],
:root:has(link[rel="canonical"][href*="/sibenik-knin/"], meta[property="og:url"][content*="/sibenik-knin/"]) .w-mapa [data-c="sibenik-knin"],
:root:has(link[rel="canonical"][href*="/split-dalmacia/"], meta[property="og:url"][content*="/split-dalmacia/"]) .w-mapa [data-c="split-dalmacia"],
:root:has(link[rel="canonical"][href*="/dubrovnik-neretva/"], meta[property="og:url"][content*="/dubrovnik-neretva/"]) .w-mapa [data-c="dubrovnik-neretva"] {
  fill: var(--cobalto);
}

.w-heroe__accion {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 22px;
  margin: 0;
}
.w-heroe__tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.w-heroe__tel::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5h-3a1 1 0 0 0-1 1C2.5 11 9 17.5 16.5 17.5a1 1 0 0 0 1-1v-3l-3.5-1.5-2 2a10 10 0 0 1-5-5l2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 2.5h-3a1 1 0 0 0-1 1C2.5 11 9 17.5 16.5 17.5a1 1 0 0 0 1-1v-3l-3.5-1.5-2 2a10 10 0 0 1-5-5l2-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.w-heroe__tel:hover { color: var(--cobalto); text-decoration: underline; }

/* Foto del lugar: cierra el héroe, fuera de la retícula del texto */
.w-heroe__foto {
  width: min(calc(100% - 2 * var(--margen)), var(--ancho));
  margin: clamp(28px, 4vw, 48px) auto 0;
}
.w-heroe__foto .w-foto img { aspect-ratio: 16 / 9; }

.w-entradilla p {
  max-width: 60ch;
  margin: 0 0 .8em;
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.25rem);
  line-height: 1.56;
  color: var(--tinta);
}
.w-entradilla p:last-child { margin-bottom: 0; }

/* Ficha de datos: filas fijas dt | dd, nunca celdas sueltas */
.w-datos {
  display: grid;
  align-self: start;
  margin: 0;
  border-top: 2px solid var(--cobalto);
}
.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--filete);
}
.w-datos dt {
  padding-top: .28em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.w-datos dd {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* Cotizador: el contenedor no entra en el formulario */
.w-cotizador {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 780px;
  min-width: 0;
  margin-inline: auto;
}
/* Rótulo del cotizador con la misma medida que el antetítulo: las dos columnas empiezan en la misma línea */
.w-cotizador::before {
  content: "Precio cerrado · al momento";
  display: block;
  margin-bottom: 18px;
  padding-left: 44px;
  background: linear-gradient(var(--cobalto), var(--cobalto)) 0 50% / 32px 3px no-repeat;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cobalto);
}
.w-cotizador::after {
  content: "";
  position: absolute;
  top: 6px;
  right: 0;
  width: 48px;
  height: 8px;
  background: var(--sahovnica) 0 0 / 8px 8px;
}
.w-cotizador__titulo {
  margin: 0 0 16px;
  font-size: 1.375rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Foto con pie
   -------------------------------------------------------------------------- */

.w-foto { margin: 0; }
.w-foto img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  background: var(--superficie);
}
.w-foto figcaption,
.t-banda figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-top: 12px;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
}
.w-foto figcaption::before,
.t-banda figcaption::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--cobalto);
}

/* --------------------------------------------------------------------------
   Cuerpo de las páginas interiores
   -------------------------------------------------------------------------- */

.w-cuerpo { padding: clamp(36px, 5vw, 72px) 0 clamp(24px, 4vw, 48px); }
.w-cuerpo:has(> .w-articulo:empty) { display: none; }

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

.w-seccion,
.w-faq {
  padding: clamp(30px, 4vw, 52px) 0;
  border-top: 1px solid var(--tinta);
}
.w-articulo > .w-seccion,
.w-articulo > .w-faq { counter-increment: seccion; }

.w-seccion > h2,
.w-faq > h2 {
  margin: 0 0 22px;
  font-size: clamp(1.6rem, 1.15rem + 1.6vw, 2.4rem);
  line-height: 1.1;
}
.w-articulo > .w-seccion > h2::before,
.w-articulo > .w-faq > h2::before {
  content: counter(seccion, decimal-leading-zero);
  display: block;
  width: max-content;
  margin-bottom: 14px;
  padding-bottom: 12px;
  background: var(--sahovnica) left bottom / 6px 6px repeat-x;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--acento-tinta);
  font-variant-numeric: lining-nums tabular-nums;
}

.w-seccion p,
.w-seccion li { max-width: 68ch; }
.w-seccion h3 {
  margin: 1.7em 0 .5em;
  font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem);
  font-weight: 600;
  line-height: 1.25;
}
.w-seccion ul,
.w-seccion ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.w-seccion li { margin-bottom: .4em; }
.w-seccion ul li::marker { color: var(--cobalto); }
.w-seccion ol li::marker { color: var(--acento-tinta); font-family: var(--serif); font-weight: 600; }
.w-seccion > :last-child { margin-bottom: 0; }

/* Capitular en la primera sección: pegada al resto de la palabra («El», nunca «E l»).
   Margen derecho mínimo (la Fraunces ya trae su espaciado lateral) y, donde existe,
   initial-letter, que encaja la letra en tres líneas sin float ni hueco. */
.w-articulo > .w-seccion:first-of-type > p:first-of-type::first-letter,
.t-capitular::first-letter {
  float: left;
  margin: .06em .02em 0 -.03em;
  padding: 0;
  font-family: var(--serif);
  font-size: 3.85em;
  font-weight: 800;
  line-height: .8;
  color: var(--cobalto);
}
@supports (initial-letter: 3) or (-webkit-initial-letter: 3) {
  .w-articulo > .w-seccion:first-of-type > p:first-of-type::first-letter,
  .t-capitular::first-letter {
    float: none;
    margin: 0 .04em 0 0;
    font-size: inherit;
    line-height: inherit;
    -webkit-initial-letter: 3;
    initial-letter: 3;
  }
}

/* Tablas: scroll horizontal propio si no caben */
.w-tabla {
  max-width: 100%;
  margin: 1.6em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--tinta);
  overscroll-behavior-x: contain;
}
.w-tabla table {
  width: 100%;
  border-collapse: collapse;
  font-size: .9375rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
}
.w-tabla th {
  padding: 12px 14px;
  background: var(--superficie);
  color: var(--tinta);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-align: left;
  text-transform: uppercase;
  vertical-align: bottom;
}
.w-tabla td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--filete);
  color: var(--tinta);
  vertical-align: top;
}
.w-tabla td:first-child { font-weight: 600; }
.w-tabla tbody tr { transition: background-color .15s var(--curva); }
.w-tabla tbody tr:hover { background: #F8F9FF; }

/* Preguntas frecuentes */
.w-faq__item { border-top: 1px solid var(--filete); }
.w-faq__item:last-of-type { border-bottom: 1px solid var(--filete); }
.w-faq__item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 19px 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  transition: color .18s var(--curva);
}
.w-faq__item > summary::-webkit-details-marker { display: none; }
.w-faq__item > summary::after {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  margin-top: -2px;
  border: 1px solid var(--filete);
  border-radius: 50%;
  background:
    linear-gradient(var(--cobalto), var(--cobalto)) center / 12px 2px no-repeat,
    linear-gradient(var(--cobalto), var(--cobalto)) center / 2px 12px no-repeat;
  transition: transform .25s var(--curva), background-color .2s var(--curva), border-color .2s var(--curva);
}
.w-faq__item > summary:hover { color: var(--cobalto); }
.w-faq__item > summary:hover::after { border-color: var(--cobalto); }
.w-faq__item[open] > summary { color: var(--cobalto); }
.w-faq__item[open] > summary::after {
  transform: rotate(45deg);
  background-color: var(--superficie);
  border-color: var(--cobalto);
}
.w-faq__resp { padding: 0 50px 20px 0; }
.w-faq__resp p { max-width: 66ch; }
.w-faq__resp > :last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Índice: páginas hijas y hermanas
   -------------------------------------------------------------------------- */

.w-indice {
  padding: clamp(48px, 6vw, 88px) 0;
  background: var(--superficie);
}
.w-indice:not(:has(.w-hijas, .w-hermanas)) { display: none; }

.w-hijas__titulo,
.w-hermanas__titulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 24px;
}
.w-hijas__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.w-hermanas__titulo { font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); font-weight: 600; }
.w-hijas__titulo::before,
.w-hermanas__titulo::before {
  content: "";
  width: 22px;
  height: 3px;
  flex: none;
  align-self: center;
  background: var(--cobalto);
}

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

.w-tarjeta {
  counter-increment: hija;
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr) 20px;
  column-gap: 12px;
  align-content: start;
  padding: 18px 0 22px;
  border-top: 1px solid var(--tinta);
  color: var(--tinta);
  text-decoration: none;
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  grid-column: 1;
  grid-row: 1 / span 2;
  padding-top: .25em;
  font-family: var(--serif);
  font-size: .9375rem;
  font-weight: 500;
  color: var(--acento-tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.w-tarjeta::after {
  content: "";
  grid-column: 3;
  grid-row: 1;
  width: 20px;
  height: 20px;
  margin-top: .2em;
  background: var(--flecha) center / contain no-repeat;
  transition: transform .22s var(--curva);
}
.w-tarjeta__nombre {
  grid-column: 2;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  transition: color .18s var(--curva);
}
.w-tarjeta__texto {
  grid-column: 2 / span 2;
  margin-top: 6px;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gris);
}
.w-tarjeta:hover { color: var(--tinta); }
.w-tarjeta:hover .w-tarjeta__nombre { color: var(--cobalto); }
.w-tarjeta:hover::after { transform: translateX(4px); }

/* Rejillas largas (13 o más): más columnas, filas más compactas */
.w-hijas__rejilla:has(> :nth-child(13)) {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  column-gap: 28px;
}
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta { padding: 12px 0 14px; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta__nombre { font-size: 1.0625rem; }

.w-hijas + .w-hermanas { margin-top: clamp(48px, 6vw, 80px); }

/* Pocas hijas (1 a 3): tarjetas de papel con número grande, y el bloque se une a las hermanas */
.w-hijas__rejilla:not(:has(> :nth-child(4))) { gap: 14px 20px; }
.w-hijas__rejilla:not(:has(> :nth-child(4))) .w-tarjeta {
  grid-template-columns: 3rem minmax(0, 1fr) 20px;
  padding: 22px 22px 24px;
  border-top: 3px solid var(--cobalto);
  background: var(--papel);
  transition: box-shadow .25s var(--curva);
}
.w-hijas__rejilla:not(:has(> :nth-child(4))) .w-tarjeta::before {
  padding-top: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1;
}
.w-hijas__rejilla:not(:has(> :nth-child(4))) .w-tarjeta:hover { box-shadow: 0 18px 40px -28px rgba(10, 15, 44, .5); }
.w-hijas:has(.w-hijas__rejilla:not(:has(> :nth-child(4)))) + .w-hermanas { margin-top: 40px; }

/* Hermanas: lista con icono, nombre y una línea que dice qué hay detrás de cada enlace */
.w-hermanas__enlaces {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  column-gap: 32px;
  border-top: 1px solid var(--tinta);
}
.w-hermanas__enlaces a {
  --icono: var(--i-pin);
  --tipo: "Condado";
  --zona: "Croacia";
  --nota: var(--tipo) " · " var(--zona);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
  padding: 13px 0 14px;
  border-bottom: 1px solid var(--filete-superficie);
  color: var(--tinta);
  font-family: var(--serif);
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: color .18s var(--curva);
}
.w-hermanas__enlaces a::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 2;
  width: 22px;
  height: 22px;
  background: var(--cobalto);
  -webkit-mask: var(--icono) center / contain no-repeat;
  mask: var(--icono) center / contain no-repeat;
  transition: transform .22s var(--curva);
}
.w-hermanas__enlaces a::after {
  content: var(--nota);
  grid-column: 2;
  margin-top: 3px;
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gris);
}
.w-hermanas__enlaces a:hover { color: var(--cobalto); }
.w-hermanas__enlaces a:hover::before { transform: translateY(-2px); }

/* Zona de cada condado (y de sus ciudades) */
.w-hermanas__enlaces a:is([href*="/ciudad-de-zagreb/"], [href*="/condado-de-zagreb/"], [href*="/krapina-zagorje/"], [href*="/sisak-moslavina/"], [href*="/karlovac/"]) { --zona: "Croacia central"; }
.w-hermanas__enlaces a:is([href*="/varazdin/"], [href*="/medimurje/"], [href*="/koprivnica-krizevci/"], [href*="/bjelovar-bilogora/"]) { --zona: "Norte de Croacia"; }
.w-hermanas__enlaces a:is([href*="/osijek-baranja/"], [href*="/vukovar-sirmia/"], [href*="/brod-posavina/"], [href*="/pozega-eslavonia/"], [href*="/virovitica-podravina/"]) { --zona: "Eslavonia"; }
.w-hermanas__enlaces a:is([href*="/istria/"], [href*="/primorje-gorski-kotar/"], [href*="/lika-senj/"]) { --zona: "Istria, Kvarner y Lika"; }
.w-hermanas__enlaces a:is([href*="/zadar/"], [href*="/sibenik-knin/"], [href*="/split-dalmacia/"], [href*="/dubrovnik-neretva/"]) { --zona: "Dalmacia"; }
.w-hermanas__enlaces a[href$="/ciudad-de-zagreb/"] { --tipo: "Capital, con rango de condado"; }
.w-hermanas__enlaces a:is([href$="/velika-gorica/"], [href$="/samobor/"], [href$="/sisak/"], [href$="/koprivnica/"], [href$="/bjelovar/"], [href$="/rijeka/"], [href$="/slavonski-brod/"], [href$="/osijek/"], [href$="/dakovo/"], [href$="/sibenik/"], [href$="/vinkovci/"], [href$="/vukovar/"], [href$="/split/"], [href$="/kastela/"], [href$="/pula/"], [href$="/dubrovnik/"], [href$="/ploce/"], [href$="/cakovec/"], [href$="/zagreb/"]) { --tipo: "Ciudad"; }

/* Servicios, contacto y portada: su modalidad en vez de la zona */
.w-hermanas__enlaces a[href*="/enviar-paquete-a-croacia/"] { --icono: var(--i-caja); --nota: "Paquetería · hasta 25 bultos por envío"; }
.w-hermanas__enlaces a[href*="/camion-completo-croacia/"] { --icono: var(--i-camion); --nota: "Vehículo dedicado · carga parcial o completa"; }
.w-hermanas__enlaces a[href*="/transporte-urgente-croacia/"] { --icono: var(--i-rayo); --nota: "Exprés · sale en el momento de la recogida"; }
.w-hermanas__enlaces a[href*="/contacto/"] { --icono: var(--i-tel); --nota: "Teléfono, en horario laborable"; }
.w-hermanas__enlaces a:is([href="/"], [href$="transportedirectoacroacia.com/"]) { --icono: var(--i-casa); --nota: "Paquetes, palets y camión a toda Croacia"; }

.w-hermanas__mas {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding: 10px 16px;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font-family: var(--sans);
  font-size: .875rem;
  font-weight: 600;
  cursor: pointer;
}
.w-hermanas__mas:hover { background: var(--tinta); color: #fff; }
.w-hermanas__mas[hidden] { display: none; }
/* Plegada: los ocho primeros enlaces enteros y legibles, sin degradado; el resto, tras «Ver todos» */
.w-hermanas.es-plegada .w-hermanas__enlaces > a:nth-of-type(n+9) { display: none; }

/* --------------------------------------------------------------------------
   Remate (cierre de cada página)
   -------------------------------------------------------------------------- */

.w-remate {
  position: relative;
  display: grid;
  gap: 26px;
  margin-block: clamp(48px, 6vw, 88px);
  padding: clamp(40px, 5vw, 64px) clamp(24px, 5vw, 64px) clamp(30px, 5vw, 56px);
  border-radius: 2px;
  background: var(--cobalto);
  color: #fff;
}
.w-remate::before {
  content: "";
  position: absolute;
  top: 0;
  right: clamp(24px, 5vw, 64px);
  width: 96px;
  height: 16px;
  background: var(--sahovnica) 0 0 / 16px 16px;
}
.w-cierre p {
  max-width: 42ch;
  margin: 0 0 .6em;
  font-family: var(--serif);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.8rem);
  font-weight: 500;
  line-height: 1.28;
  color: #fff;
  text-wrap: balance;
}
.w-cierre p:last-child { margin-bottom: 0; }
.w-cierre a { color: #fff; }
.w-cierre a:hover { color: var(--superficie-honda); }
/* Dos botones del mismo ancho; el horario, como nota pequeña debajo del teléfono */
.w-remate__acciones {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px 16px;
  max-width: 36rem;
  margin: 0;
}
.w-remate__acciones .t-boton { width: 100%; white-space: nowrap; }
.w-remate__nota {
  margin: -2px 0 0;
  font-size: .8125rem;
  line-height: 1.4;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Portada
   -------------------------------------------------------------------------- */

.t-seccion { padding: var(--aire) 0; }
.t-seccion--superficie { background: var(--superficie); }
.t-seccion:not(.t-seccion--superficie, .t-seccion--cobalto) + .t-seccion:not(.t-seccion--superficie, .t-seccion--cobalto),
.t-banda + .t-seccion:not(.t-seccion--superficie, .t-seccion--cobalto) { padding-top: 0; }

/* Bloque a color completo: cobalto con texto blanco (6,5:1), a mitad de portada */
.t-seccion--cobalto { background: var(--cobalto); color: #fff; }
.t-seccion--cobalto h2,
.t-seccion--cobalto p { color: #fff; }
.t-seccion--cobalto .t-rotulo { border-top-color: #fff; color: #fff; }
.t-seccion--cobalto .t-rotulo b { color: #fff; }
.t-seccion--cobalto .t-cita { border-top-color: #fff; color: #fff; }
.t-seccion--cobalto .t-red svg { color: #fff; }
.t-seccion--cobalto .t-red figcaption,
.t-seccion--cobalto .t-red figcaption span:last-child { color: #fff; }

.t-rotulo {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 0 0 22px;
  padding-top: 14px;
  border-top: 1px solid var(--tinta);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.t-rotulo b {
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  color: var(--acento-tinta);
  font-variant-numeric: lining-nums tabular-nums;
}

.t-seccion h2 {
  max-width: 24ch;
  margin: 0 0 clamp(26px, 4vw, 44px);
  font-size: clamp(1.85rem, 1.15rem + 2.6vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -.022em;
}
.t-seccion h3 {
  font-size: clamp(1.3rem, 1.1rem + .6vw, 1.6rem);
  font-weight: 600;
  line-height: 1.2;
}

.t-dos {
  display: grid;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
.t-dos > * { min-width: 0; }

.t-columnas {
  columns: 2 18rem;
  column-gap: 44px;
  column-rule: 1px solid var(--filete);
}
.t-columnas p { break-inside: avoid-column; }

.t-texto p { max-width: 64ch; }

/* Banda de foto a todo el ancho */
.t-banda { margin: 0 0 var(--aire); }
.t-banda img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--superficie);
}
/* La segunda banda desemboca en la franja de destinos: sin margen blanco entre las dos */
.t-banda--noche { margin-bottom: 0; }
.t-banda--noche figcaption { padding-bottom: 16px; }

/* Modalidades */
.t-modalidades {
  display: grid;
  border-top: 1px solid var(--tinta);
}
.t-modalidad {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 0;
  border-bottom: 1px solid var(--filete);
}
.t-modalidad svg { width: 44px; height: 44px; color: var(--cobalto); }
.t-cifra {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 4px 0 0;
}
.t-cifra__num {
  font-family: var(--serif);
  font-size: clamp(3.4rem, 2.6rem + 3vw, 5.4rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--cobalto);
  font-variant-numeric: lining-nums;
}
.t-cifra__ud {
  max-width: 11ch;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
.t-modalidad p { margin: 0; color: var(--tinta); }
.t-modalidad__enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600;
  text-decoration: none;
}
.t-modalidad__enlace::after {
  content: "";
  width: 16px;
  height: 16px;
  background: var(--flecha) center / contain no-repeat;
  transition: transform .2s var(--curva);
}
.t-modalidad__enlace:hover { text-decoration: underline; }
.t-modalidad__enlace:hover::after { transform: translateX(4px); }

.t-aviso {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 72ch;
  margin: 32px 0 0;
  padding: 16px 20px;
  border-left: 3px solid var(--acento);
  background: var(--superficie);
  font-size: .9375rem;
  color: var(--tinta);
}
.t-aviso svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--acento-tinta); }

/* Red de transportistas */
.t-cita {
  position: relative;
  margin: 0 0 32px;
  padding-top: 18px;
  border-top: 3px solid var(--cobalto);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 1.1rem + 1.6vw, 2.3rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--cobalto-hondo);
  text-wrap: balance;
}
/* Cita de apertura a todo el ancho de la caja, con la šahovnica como firma */
.t-cita--ancha {
  max-width: 30ch;
  margin: 0 0 clamp(32px, 5vw, 60px);
  padding-top: 22px;
  font-size: clamp(1.75rem, 1.1rem + 2.6vw, 3.4rem);
  line-height: 1.1;
  letter-spacing: -.02em;
}
.t-cita--ancha::after {
  content: "";
  display: block;
  width: 48px;
  height: 8px;
  margin-top: 22px;
  background: var(--sahovnica) 0 0 / 8px 8px;
}

/* Primer párrafo de una sección larga: entrada en cuerpo mayor */
.t-entrada {
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.25rem);
  line-height: 1.56;
}

/* Cita destacada dentro del texto: Fraunces en cobalto, sangrada con filete */
.t-destacada {
  margin: 1.6em 0;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--cobalto);
}
.t-destacada p {
  max-width: 28ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 1.85rem);
  font-weight: 500;
  font-style: italic;
  line-height: 1.24;
  color: var(--cobalto-hondo);
  text-wrap: balance;
}

/* Tres cifras de la ficha en Fraunces, con filetes: nunca una sola cifra suelta */
.t-cifras {
  display: grid;
  margin: clamp(40px, 6vw, 72px) 0 0;
  border-top: 2px solid var(--tinta);
}
.t-cifras__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete);
}
.t-cifras dd {
  grid-column: 1;
  grid-row: 1;
  min-width: 2ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.2rem, 2.4rem + 3.4vw, 6rem);
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--cobalto);
  font-variant-numeric: lining-nums tabular-nums;
}
.t-cifras__item:nth-child(2) dd { color: var(--acento-tinta); }
.t-cifras dt {
  grid-column: 2;
  max-width: 22ch;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
}

.t-red { margin: 0; }
.t-red svg { width: 100%; height: auto; color: var(--cobalto); }
.t-red figcaption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--gris);
}
.t-red figcaption span:nth-child(2) { text-align: center; }
.t-red figcaption span:last-child { text-align: right; color: var(--acento-tinta); }

/* Pasos de contratación */
.t-pasos {
  counter-reset: paso;
  display: grid;
  gap: 0;
  margin: 0 0 30px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--tinta);
}
.t-pasos li {
  counter-increment: paso;
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr);
  column-gap: 18px;
  padding: 18px 0;
  border-bottom: 1px solid var(--filete);
}
.t-pasos li::before {
  content: counter(paso);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1.5px solid var(--cobalto);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cobalto);
  transition: background-color .2s var(--curva), color .2s var(--curva);
}
.t-pasos li:hover::before { background: var(--cobalto); color: #fff; }
.t-pasos strong {
  display: block;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.3;
}
.t-pasos span { color: var(--gris); font-size: .9688rem; }

/* Bloques secundarios de la portada: en móvil se pliegan tras un botón; en escritorio, abiertos y sin botón */
.t-plegable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 18px;
  padding: 15px 0;
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--filete);
  list-style: none;
  cursor: pointer;
  font-family: var(--serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
}
.t-plegable > summary::-webkit-details-marker { display: none; }
.t-plegable > summary::after {
  content: "";
  width: 30px;
  height: 30px;
  flex: none;
  border: 1px solid var(--cobalto);
  border-radius: 50%;
  background:
    linear-gradient(var(--cobalto), var(--cobalto)) center / 12px 2px no-repeat,
    linear-gradient(var(--cobalto), var(--cobalto)) center / 2px 12px no-repeat;
  transition: transform .25s var(--curva);
}
.t-plegable[open] > summary::after { transform: rotate(45deg); }
.t-plegable:not([open]) > summary { margin-bottom: 0; }

/* Índice geográfico */
.t-destinos__intro { max-width: 64ch; margin-bottom: clamp(30px, 4vw, 48px); }
/* Tarjeta por región: foto, nombre en Fraunces, tres destinos destacados y «ver todos» */
.t-destinos {
  display: grid;
  gap: 20px;
}
.t-region {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 16px;
  align-items: start;
  padding: 16px;
  background: var(--papel);
  border-top: 3px solid var(--cobalto);
  transition: box-shadow .25s var(--curva), transform .25s var(--curva);
}
.t-region:hover { box-shadow: 0 18px 40px -28px rgba(10, 15, 44, .5); }
.t-region { height: 100%; }
/* Cada tarjeta lleva el recorte real de su región, con sus condados; el que señalas en la lista se pinta en cobalto */
.t-region__mapa {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  padding: 6px;
  background: var(--superficie);
}
.t-region__mapa use { fill: #BCC7FF; stroke-width: 1.4px; }
.t-region:has(a[href^="/ciudad-de-zagreb/"]:is(:hover, :focus-visible)) [data-c="ciudad-de-zagreb"],
.t-region:has(a[href^="/condado-de-zagreb/"]:is(:hover, :focus-visible)) [data-c="condado-de-zagreb"],
.t-region:has(a[href^="/krapina-zagorje/"]:is(:hover, :focus-visible)) [data-c="krapina-zagorje"],
.t-region:has(a[href^="/sisak-moslavina/"]:is(:hover, :focus-visible)) [data-c="sisak-moslavina"],
.t-region:has(a[href^="/karlovac/"]:is(:hover, :focus-visible)) [data-c="karlovac"],
.t-region:has(a[href^="/varazdin/"]:is(:hover, :focus-visible)) [data-c="varazdin"],
.t-region:has(a[href^="/medimurje/"]:is(:hover, :focus-visible)) [data-c="medimurje"],
.t-region:has(a[href^="/koprivnica-krizevci/"]:is(:hover, :focus-visible)) [data-c="koprivnica-krizevci"],
.t-region:has(a[href^="/bjelovar-bilogora/"]:is(:hover, :focus-visible)) [data-c="bjelovar-bilogora"],
.t-region:has(a[href^="/virovitica-podravina/"]:is(:hover, :focus-visible)) [data-c="virovitica-podravina"],
.t-region:has(a[href^="/pozega-eslavonia/"]:is(:hover, :focus-visible)) [data-c="pozega-eslavonia"],
.t-region:has(a[href^="/brod-posavina/"]:is(:hover, :focus-visible)) [data-c="brod-posavina"],
.t-region:has(a[href^="/osijek-baranja/"]:is(:hover, :focus-visible)) [data-c="osijek-baranja"],
.t-region:has(a[href^="/vukovar-sirmia/"]:is(:hover, :focus-visible)) [data-c="vukovar-sirmia"],
.t-region:has(a[href^="/istria/"]:is(:hover, :focus-visible)) [data-c="istria"],
.t-region:has(a[href^="/primorje-gorski-kotar/"]:is(:hover, :focus-visible)) [data-c="primorje-gorski-kotar"],
.t-region:has(a[href^="/lika-senj/"]:is(:hover, :focus-visible)) [data-c="lika-senj"],
.t-region:has(a[href^="/zadar/"]:is(:hover, :focus-visible)) [data-c="zadar"],
.t-region:has(a[href^="/sibenik-knin/"]:is(:hover, :focus-visible)) [data-c="sibenik-knin"],
.t-region:has(a[href^="/split-dalmacia/"]:is(:hover, :focus-visible)) [data-c="split-dalmacia"],
.t-region:has(a[href^="/dubrovnik-neretva/"]:is(:hover, :focus-visible)) [data-c="dubrovnik-neretva"] { fill: var(--cobalto); }
.t-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.t-region__cuerpo { min-width: 0; }
.t-region .t-region__nombre {
  font-size: clamp(1.3rem, 1.15rem + .5vw, 1.6rem);
  font-weight: 700;
  line-height: 1.15;
}
.t-region__cuenta {
  margin: 6px 0 10px;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris);
}
.t-destinos__lista {
  margin: 0;
  padding: 0;
  list-style: none;
}
.t-destinos__lista > li {
  padding: 14px 0 15px;
  border-top: 1px solid var(--filete);
}
.t-region__mas > summary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  padding: 6px 0;
  list-style: none;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: var(--cobalto);
}
.t-region__mas > summary::-webkit-details-marker { display: none; }
.t-region__mas > summary::after {
  content: "";
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s var(--curva);
}
.t-region__mas[open] > summary::after { margin-top: 4px; transform: rotate(-135deg); }
.t-region__mas > summary:hover { text-decoration: underline; }
.t-region__mas[open] > summary { margin-bottom: 4px; }
/* Condado: Fraunces a cuerpo de lectura con su flecha; ciudades: Inter, sangradas bajo un filete
   de rama, una por línea. Dos niveles que se distinguen de un vistazo. */
.t-destinos__condado {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-family: var(--serif);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--tinta);
  text-decoration: none;
}
.t-destinos__condado::after {
  content: "";
  width: 18px;
  height: 18px;
  flex: none;
  align-self: center;
  background: var(--flecha) center / contain no-repeat;
  transition: transform .2s var(--curva);
}
.t-destinos__condado:hover { color: var(--cobalto); }
.t-destinos__condado:hover::after { transform: translateX(3px); }
.t-destinos__ciudades {
  display: grid;
  gap: 2px;
  margin: 10px 0 0 2px;
  padding: 0 0 0 16px;
  list-style: none;
  border-left: 2px solid var(--superficie-honda);
}
.t-destinos__ciudades a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--cobalto-hondo);
  text-decoration: none;
}
.t-destinos__ciudades a::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: none;
  background: var(--acento);
}
.t-destinos__ciudades a:hover { color: var(--tinta); text-decoration: underline; }

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

.t-recorrido { padding: clamp(32px, 5vw, 64px) 0 clamp(56px, 7vw, 96px); }
/* La caja mide lo que mide el formulario (600-760 px, tope 820): la cabecera no aporta ancho
   (width 0 + min-width 100 %), así migas, rótulo, H1 y formulario arrancan en el mismo x */
.t-recorrido__caja {
  width: fit-content;
  min-width: min(100%, 600px);
  max-width: min(100%, 820px);
  margin-inline: auto;
}
.t-recorrido__cabeza {
  width: 0;
  min-width: 100%;
}
.t-recorrido__rotulo {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--tinta);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cobalto);
}
.t-recorrido__rotulo::before {
  content: "";
  width: 32px;
  height: 3px;
  flex: none;
  background: var(--cobalto);
}
.t-recorrido__titulo {
  margin: 0 0 clamp(22px, 3vw, 32px);
  font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.02em;
}

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

.t-pie {
  padding: clamp(52px, 6vw, 84px) 0 28px;
  background: var(--tinta);
  color: var(--noche-texto);
  font-size: .9375rem;
}
.t-pie a { color: var(--noche-texto); text-decoration: none; }
.t-pie a:hover { color: #fff; text-decoration: underline; }

.t-pie__rejilla {
  display: grid;
  gap: 40px;
}
.t-pie__marca .t-marca { padding: 0; color: #fff; }
.t-pie__marca .t-marca__texto span + span { color: var(--noche-cobalto); }
.t-pie__marca p { max-width: 36ch; margin: 18px 0 0; color: var(--noche-gris); }

.t-pie__titulo {
  margin: 0 0 14px;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 600;
  color: var(--noche-cobalto);
}
.t-pie ul {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Condados del pie: tres columnas compactas; en móvil, plegados */
.t-pie__plegable > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}
.t-pie__plegable > summary::-webkit-details-marker { display: none; }
.t-pie__condados ul {
  display: block;
  columns: 3 8.5rem;
  column-gap: 20px;
  font-size: .875rem;
  line-height: 1.35;
}
.t-pie__condados li { margin-bottom: 7px; break-inside: avoid; }

.t-pie__tel {
  display: inline-block;
  font-family: var(--serif);
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
}
.t-pie__atencion p { margin: 8px 0 0; color: var(--noche-gris); }

.t-pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 14px 24px;
  margin-top: 52px;
  padding-top: 22px;
  border-top: 1px solid var(--noche-filete);
  font-size: .8125rem;
  color: var(--noche-gris);
}
.t-pie__base p { margin: 0; }
.t-pie__base ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
}
.t-pie__base a { color: var(--noche-gris); }

/* --------------------------------------------------------------------------
   Cabecera distinta según el tipo de página (clase del body)
   -------------------------------------------------------------------------- */

/* Servicio: héroe sobre superficie, titular más grande */
body[class*="servicio"] .w-heroe {
  background: var(--superficie);
  border-bottom: 0;
}
body[class*="servicio"] .w-heroe h1 { font-size: clamp(1.95rem, .9rem + 4.4vw, 5rem); }
body[class*="servicio"] .w-datos__fila { border-bottom-color: var(--filete-superficie); }
/* Servicio: el primer dato de la ficha se destaca en la ficha lateral, a media escala del H1
   (el titular manda; la cifra no compite con él) */
body[class*="servicio"] .w-heroe__ficha .w-datos__fila:first-child {
  display: block;
  padding: 16px 0 18px;
  border-bottom: 2px solid var(--tinta);
}
body[class*="servicio"] .w-heroe__ficha .w-datos__fila:first-child dt { padding-top: 0; margin-bottom: 8px; }
body[class*="servicio"] .w-heroe__ficha .w-datos__fila:first-child dd {
  font-size: clamp(1.375rem, 1.15rem + .8vw, 1.75rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--cobalto);
  overflow-wrap: normal;
  hyphens: none;
  text-wrap: balance;
  font-variant-numeric: lining-nums;
}

/* Todos los H1 en tinta (marino): el cobalto queda para enlaces, filetes y botones.
   Lo que cambia según el tipo es la retícula del héroe (ver @media del final). */

/* Condado (división): ficha sobre superficie y foto apaisada que cierra el héroe */
body[class*="division"] .w-heroe__ficha .w-datos,
body[class*="provincia"] .w-heroe__ficha .w-datos,
body[class*="region"] .w-heroe__ficha .w-datos {
  padding: 4px 20px 6px;
  background: var(--superficie);
}
body[class*="division"] .w-heroe__ficha .w-datos__fila,
body[class*="provincia"] .w-heroe__ficha .w-datos__fila,
body[class*="region"] .w-heroe__ficha .w-datos__fila { border-bottom-color: var(--filete-superficie); }
body[class*="division"] .w-heroe__ficha .w-datos__fila:last-child,
body[class*="provincia"] .w-heroe__ficha .w-datos__fila:last-child,
body[class*="region"] .w-heroe__ficha .w-datos__fila:last-child { border-bottom: 0; }

/* Ubicación (condado y ciudad): recorte de la zona con el condado en cobalto, encima de la ficha */
body[class*="division"] .w-heroe__mapa,
body[class*="provincia"] .w-heroe__mapa,
body[class*="region"] .w-heroe__mapa,
body[class*="ciudad"] .w-heroe__mapa,
body[class*="municipio"] .w-heroe__mapa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(120px, 30%, 160px);
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-top: 2px solid var(--cobalto);
  background: var(--superficie);
}

/* Ciudad: titular más contenido, filete grueso y foto a sangre a todo el ancho de la pantalla */
body[class*="ciudad"]:not([class*="division"]) .w-heroe h1,
body[class*="municipio"] .w-heroe h1 { font-size: clamp(1.8rem, .9rem + 3.4vw, 3.9rem); }
body[class*="ciudad"]:not([class*="division"]) .w-heroe__titular,
body[class*="municipio"] .w-heroe__titular { border-bottom: 3px solid var(--cobalto); }
body[class*="ciudad"]:not([class*="division"]) .w-heroe:has(.w-heroe__foto img:not([src*="aduanas"])),
body[class*="municipio"] .w-heroe:has(.w-heroe__foto img:not([src*="aduanas"])) { padding-bottom: 0; border-bottom: 0; }
body[class*="ciudad"]:not([class*="division"]) .w-heroe__foto,
body[class*="municipio"] .w-heroe__foto { width: 100%; }
body[class*="ciudad"]:not([class*="division"]) .w-heroe__foto .w-foto img,
body[class*="municipio"] .w-heroe__foto .w-foto img { aspect-ratio: 4 / 3; }
body[class*="ciudad"]:not([class*="division"]) .w-heroe__foto figcaption,
body[class*="municipio"] .w-heroe__foto figcaption {
  width: min(calc(100% - 2 * var(--margen)), var(--ancho));
  margin-inline: auto;
  padding-bottom: 14px;
}

/* Contacto va sin foto de almacén. Las ubicaciones siempre llevan su foto (ninguna se queda en puro texto) */
body[class*="contacto"] .w-heroe__foto { display: none; }

/* Duotono cobalto: tinta en las sombras, cobalto en los medios tonos y papel en las luces.
   Une las fotos de carretera con la paleta (portada y páginas de ubicación). Solo CSS, sin JS. */
.t-duotono {
  position: relative;
  display: block;
  isolation: isolate;
  background: var(--tinta);
}
.t-duotono img { filter: grayscale(1) contrast(1.12) brightness(1.04); }
.t-duotono::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, var(--cobalto) 0%, var(--cobalto-hondo) 100%);
  mix-blend-mode: color;
  pointer-events: none;
}
/* Fotos de la fábrica en las ubicaciones: el mismo tono con un filtro sobre la imagen (el pie no se toca) */
body:is([class*="division"], [class*="provincia"], [class*="region"], [class*="ciudad"], [class*="municipio"]) .w-foto img {
  filter: grayscale(1) sepia(1) hue-rotate(188deg) saturate(2.4) contrast(1.06) brightness(.96);
}

/* Contacto: héroe sereno con el teléfono como protagonista, un solo CTA y sin hueco ni filete suelto debajo */
body[class*="contacto"] .w-heroe { padding-bottom: 0; border-bottom: 0; }
body[class*="contacto"] .w-heroe__accion .w-cta { display: none; }
body[class*="contacto"] .w-heroe__titular { border-bottom-width: 2px; }
body[class*="contacto"] .w-remate { margin-top: clamp(32px, 4vw, 48px); }
body[class*="contacto"] .w-heroe h1 { font-size: clamp(2rem, 1rem + 4vw, 4.2rem); }
body[class*="contacto"] .w-heroe__accion { flex-direction: column; align-items: flex-start; gap: 18px; }
body[class*="contacto"] .w-heroe__tel {
  order: -1;
  gap: 14px;
  font-family: var(--serif);
  font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--cobalto);
  white-space: nowrap;
}
body[class*="contacto"] .w-heroe__tel::before { width: .75em; height: .75em; }

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

@media (min-width: 600px) {
  .t-banda img { aspect-ratio: 16 / 7; }
  .w-foto img { aspect-ratio: 16 / 9; }
  .t-destinos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .t-region { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 0 20px; }
  .t-region__mapa { aspect-ratio: 16 / 9; padding: 14px; }
  .t-region__cuerpo { padding: 24px 28px 4px; }
  .t-region:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); grid-template-rows: auto; padding: 0; }
  .t-region:last-child:nth-child(odd) .t-region__mapa { height: 100%; aspect-ratio: auto; min-height: 220px; }
  .t-region:last-child:nth-child(odd) .t-region__cuerpo { padding: 20px 24px 22px; }
  .t-pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Cifras: tres columnas con filete vertical */
  .t-cifras { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-cifras__item { grid-template-columns: minmax(0, 1fr); align-content: start; gap: 12px; padding: 24px 24px 26px; border-bottom: 0; }
  .t-cifras__item:first-child { padding-left: 0; }
  .t-cifras__item + .t-cifras__item { border-left: 1px solid var(--filete); }
  .t-cifras dd, .t-cifras dt { grid-column: 1; }
  .t-cifras dt { grid-row: 2; }

  /* Remate: los dos botones en paralelo y del mismo ancho */
  .w-remate__acciones { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-remate__nota { grid-column: 2; }
}

@media (min-width: 720px) {
  .t-plegable > summary { display: none; }
}

@media (min-width: 900px) {
  /* Héroe: texto y CTA a la izquierda, mapa y ficha a la derecha; la foto cierra fuera de la retícula */
  .w-heroe__cuerpo:has(> .w-heroe__lado .w-heroe__ficha:not(:empty)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .w-heroe__texto { grid-column: 1; grid-row: 1; }
  .w-heroe__lado { grid-column: 2; grid-row: 1; }
  .w-heroe__cuerpo > .w-cotizador { grid-column: 1 / -1; }
  /* Interiores: el titular ocupa todo el ancho encima; el botón de la fábrica, bajo el texto */
  .w-pagina .w-heroe__titular { grid-column: 1 / -1; grid-row: 1; }
  .w-pagina .w-heroe__texto { grid-row: 2; }
  .w-pagina .w-heroe__lado { grid-row: 2 / span 2; }
  /* La última fila es flexible: la altura que le sobra al mapa y la ficha se queda ahí, no estira
     la fila del texto. Así el botón de la fábrica va justo debajo del teléfono, sin hueco. */
  .w-pagina .w-heroe__cuerpo:has(> .w-heroe__lado .w-heroe__ficha:not(:empty)) { grid-template-rows: auto auto 1fr; }
  .w-pagina .w-heroe__cuerpo > .w-cta-linea {
    grid-column: 1;
    grid-row: 3;
    align-self: start;
    margin-top: calc(22px - clamp(24px, 3vw, 40px));
  }
  .w-heroe__foto .w-foto img { aspect-ratio: 21 / 8; }

  /* Ciudad: foto a sangre más baja y ancha */
  body[class*="ciudad"]:not([class*="division"]) .w-heroe__foto .w-foto img,
  body[class*="municipio"] .w-heroe__foto .w-foto img { aspect-ratio: 12 / 5; }
  body[class] .w-heroe__mapa { grid-template-columns: minmax(0, 1fr) clamp(130px, 32%, 168px); }

  .w-foto img { aspect-ratio: 21 / 9; }
  .t-modalidades { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .t-modalidad { padding: 34px 32px 36px; border-bottom: 0; }
  .t-modalidad:first-child { padding-left: 0; }
  .t-modalidad:last-child { padding-right: 0; }
  .t-modalidad + .t-modalidad { border-left: 1px solid var(--filete); }
  /* Destinos: dos tarjetas grandes arriba y tres debajo */
  .t-destinos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .t-region { grid-column: span 2; }
  .t-region:nth-child(-n+2) { grid-column: span 3; }
  .t-region:nth-child(-n+2) .t-region__mapa { aspect-ratio: 12 / 5; }
  .t-region:last-child:nth-child(odd) { grid-column: span 2; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; padding: 0 0 20px; }
  .t-region:last-child:nth-child(odd) .t-region__mapa { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .t-region:last-child:nth-child(odd) .t-region__cuerpo { padding: 24px 28px 4px; }
}

@media (min-width: 1000px) {
  .w-seccion,
  .w-faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(40px, 5vw, 80px);
    row-gap: 0;
    align-items: start;
  }
  .w-seccion > *,
  .w-faq > * { grid-column: 2; }
  .w-seccion > h2,
  .w-faq > h2 {
    grid-column: 1;
    grid-row: 1 / span 60;
    position: sticky;
    top: 104px;
  }
  .w-seccion > h3:first-of-type { margin-top: 0; }
  .w-seccion > p:first-of-type,
  .w-seccion > h2 + * { margin-top: 0; }

  .t-dos--apertura { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .t-dos--red { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .t-dos--contrata { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .t-dos--contrata > .w-foto { order: -1; position: sticky; top: 104px; }
  .t-dos--plazos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .t-plazos__tabla .w-tabla { margin-top: 0; }
  .t-dos--faq { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .t-dos--faq h2 { position: sticky; top: 104px; }

  .t-pie__rejilla { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); }

  /* Pocas hijas: el bloque se une a las hermanas en dos columnas, sin hueco */
  .w-indice__caja:has(> .w-hijas .w-hijas__rejilla:not(:has(> :nth-child(4)))):has(> .w-hermanas) {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(40px, 5vw, 80px);
    align-items: start;
  }
  .w-indice__caja:has(> .w-hijas .w-hijas__rejilla:not(:has(> :nth-child(4)))) > .w-hijas .w-hijas__rejilla { grid-template-columns: minmax(0, 1fr); }
  .w-indice__caja:has(> .w-hijas .w-hijas__rejilla:not(:has(> :nth-child(4)))) > .w-hijas + .w-hermanas { margin-top: 0; }
  .w-indice__caja:has(> .w-hijas .w-hijas__rejilla:not(:has(> :nth-child(4)))) .w-hermanas__titulo { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); font-weight: 700; }
}

@media (min-width: 1200px) {
  .t-cabecera__barra { min-height: 78px; flex-wrap: nowrap; }
  .t-menu-boton { display: none; }
  .t-menu,
  .js .t-menu {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-basis: auto;
    padding: 0;
  }
  .t-menu ul { display: flex; align-items: center; gap: 24px; }
  .t-menu li a {
    padding: 6px 0;
    border-top: 0;
    font-size: 1rem;
    font-weight: 500;
    white-space: nowrap;
  }
  .t-menu li a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: var(--cobalto);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--curva);
  }
  .t-menu li a:hover { color: var(--tinta); }
  .t-menu li a:hover::after { transform: scaleX(1); }
  .t-menu .t-boton { width: auto; margin-top: 0; white-space: nowrap; }
}

@media (min-width: 1180px) {
  /* Con cotizador: texto y ficha apilados a la izquierda, cotizador a la derecha desde arriba */
  .w-heroe__cuerpo:has(> .w-cotizador) {
    grid-template-columns: minmax(0, 1fr) minmax(600px, 680px);
    grid-template-rows: auto 1fr;
  }
  .w-heroe__cuerpo:has(> .w-cotizador) > .w-heroe__lado { grid-column: 1; grid-row: 2; }
  .w-heroe__cuerpo > .w-cotizador { grid-column: 2; grid-row: 1 / span 2; align-self: start; min-height: 520px; }

  /* Interiores con cotizador: titular, texto y ficha a la izquierda; el formulario arranca a la altura del antetítulo */
  .w-pagina .w-heroe__cuerpo:has(> .w-cotizador) { grid-template-rows: auto auto 1fr; }
  .w-pagina .w-heroe__cuerpo:has(> .w-cotizador) > .w-heroe__titular { grid-column: 1; }
  .w-pagina .w-heroe__cuerpo:has(> .w-cotizador) > .w-heroe__lado { grid-column: 1; grid-row: 3; }
  .w-pagina .w-heroe__cuerpo:has(> .w-cotizador) > .w-cotizador { grid-row: 1 / span 3; }
  .w-pagina .w-heroe__cuerpo:has(> .w-cotizador) .w-heroe__titular h1 {
    font-size: clamp(2.3rem, .9rem + 2.3vw, 3.6rem);
    line-height: 1.04;
  }

  /* Portada: H1 en la columna del texto, con cuerpo contenido para que el formulario se vea entero */
  .t-heroe { padding-top: clamp(26px, 3vw, 44px); }
  .t-heroe h1 {
    font-size: clamp(2.4rem, .9rem + 2.5vw, 3.75rem);
    line-height: 1.04;
  }
}

@media (max-width: 719px) {
  :root { --aire: 44px; }
  .t-red figcaption { font-size: .75rem; }
  .w-mapa--zona { max-height: 260px; }
  /* Móvil: el recorte de la zona a todo el ancho, con sus nombres legibles; la situación en el país sobra */
  body[class] .w-heroe__mapa { grid-template-columns: minmax(0, 1fr); padding: 12px; }
  .w-mapa--pais { display: none; }
  .w-hijas__rejilla:not(:has(> :nth-child(4))) .w-tarjeta { padding: 18px 18px 20px; }

  /* Portada más compacta en móvil */
  .t-banda img { aspect-ratio: 16 / 9; }
  .t-seccion .t-dos .w-foto img { aspect-ratio: 16 / 9; }
  .t-seccion h2 { margin-bottom: 22px; }
  .t-modalidad { gap: 10px; padding: 22px 0; }
  .t-cifra__num { font-size: 2.9rem; }
  .t-aviso { margin-top: 22px; }
  .t-pasos li { padding: 14px 0; }
  .w-faq__item > summary { padding: 15px 0; }

  /* Pie: condados plegados tras su rótulo */
  .t-pie { padding-top: 44px; }
  .t-pie__rejilla { gap: 28px; }
  .t-pie__plegable > summary {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid var(--noche-filete);
    border-bottom: 1px solid var(--noche-filete);
    cursor: pointer;
  }
  .t-pie__plegable > summary::after {
    content: "";
    width: 9px;
    height: 9px;
    flex: none;
    margin-right: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg);
    transition: transform .2s var(--curva);
  }
  .t-pie__plegable[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
  .t-pie__plegable[open] > ul { padding-top: 14px; }
  .t-pie__condados ul { columns: 2; }
  .t-pie__base { margin-top: 32px; }
}

@media (max-width: 480px) {
  .w-datos__fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; padding: 11px 0; }
  .w-datos dd { font-size: 1rem; }
  .w-faq__resp { padding-right: 0; }
  .w-faq__item > summary { font-size: 1.0938rem; }
  .w-tarjeta__nombre { font-size: 1.125rem; }
  .t-marca__texto { font-size: 1rem; }
  .t-marca svg { width: 32px; height: 32px; }
  .t-pasos li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 14px; }
  .t-pasos li::before { width: 40px; height: 40px; font-size: 1.125rem; }
}

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