/* ==========================================================================
   Transporte directo a Hungría · hoja de estilo
   Maqueta editorial: grafito sobre papel, naranja Valencia como tinta de acento.
   Base pensada para móvil; los @media de ajuste van todos al final.
   ========================================================================== */

/* ---------- 1. Variables ---------- */
:root {
  --papel: #FAF7F2;
  --papel-2: #F2ECE2;
  --blanco: #FFFFFF;
  --tinta: #1E1E1E;
  --grafito: #2B2D31;
  --grafito-2: #383B41;
  --noche: #1E1E1E;
  --gris: #5A5650;          /* texto secundario sobre papel: 6,8:1 */
  --gris-claro: #BDB7AD;    /* texto secundario sobre grafito: 6,9:1 */
  --filete: #D9D1C4;
  --filete-oscuro: #4A4D54;
  --naranja: #F26B1D;       /* fondos de botón, filetes, iconos */
  --naranja-tinta: #A8420B; /* texto naranja sobre papel y blanco: 5,6:1 */
  --naranja-claro: #FF8A47; /* texto naranja sobre grafito: 5,9:1 */

  --f-titulo: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --f-texto: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  --ancho: 82rem;
  --margen: clamp(1.25rem, 4vw, 3rem);
  --hueco: clamp(3.5rem, 8vw, 7.5rem);
  --radio: 4px;
  --curva: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- 2. Base ---------- */
:where(*:not(.w-cotizador *)),
:where(*:not(.w-cotizador *))::before,
:where(*:not(.w-cotizador *))::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-feature-settings: 'ss01', 'cv11';
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}

img { max-width: 100%; }

h1, h2, h3 {
  font-family: var(--f-titulo);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.015em;
  color: var(--tinta);
  hyphens: none;
  -webkit-hyphens: none;
  text-wrap: balance;
  margin: 0;
}

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

strong { font-weight: 600; }

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

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

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

.solo-lector {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.saltar {
  position: absolute;
  left: 1rem; top: -4rem;
  z-index: 100;
  padding: .7rem 1rem;
  background: var(--grafito);
  color: var(--papel);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radio);
  transition: top .2s var(--curva);
}
.saltar:focus { top: 1rem; }

/* Enlaces del texto corrido: subrayado fino que se engorda al pasar */
.prosa a,
.w-seccion a,
.w-faq__resp a,
.w-cierre a,
.w-entradilla a {
  color: var(--naranja-tinta);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: text-decoration-thickness .15s;
}
.prosa a:hover,
.w-seccion a:hover,
.w-faq__resp a:hover,
.w-entradilla a:hover { text-decoration-thickness: 2px; }

/* ---------- 3. Botones ---------- */
.boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-height: 3rem;
  padding: .75rem 1.35rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, border-color .2s, transform .2s var(--curva);
}
.boton::after,
.w-cta::after {
  content: '';
  width: .9em; height: .9em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%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 16 16'%3E%3Cpath d='M2 8h11M9 3.5 13.5 8 9 12.5' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s var(--curva);
}
.boton:hover::after,
.w-cta:hover::after { transform: translateX(3px); }
.boton:active,
.w-cta:active { transform: translateY(1px); }

.boton--naranja,
.w-cta {
  background: var(--naranja);
  color: var(--tinta);
}
.boton--naranja:hover,
.w-cta:hover { background: var(--naranja-claro); }

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

.boton--claro {
  border-color: var(--gris-claro);
  color: var(--papel);
  background: transparent;
}
.boton--claro:hover { border-color: var(--naranja-claro); color: var(--naranja-claro); }

.boton--tel::after { display: none; }
.boton--tel svg { width: 1.05em; height: 1.05em; flex: none; }

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

/* ---------- 4. Cabecera y menú ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
  transition: box-shadow .25s;
}
.cabecera--sombra { box-shadow: 0 6px 24px -14px rgba(30, 30, 30, .45); }

.cabecera__in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  min-height: 4.25rem;
  padding-block: .6rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  min-width: 0;
  color: var(--tinta);
  text-decoration: none;
}
.marca__signo { width: 2.25rem; height: 2.25rem; flex: none; border-radius: 8px; transition: transform .3s var(--curva); }
.marca:hover .marca__signo { transform: rotate(-4deg); }
.marca__texto { display: flex; flex-direction: column; line-height: 1; min-width: 0; }
.marca__l1 {
  font-family: var(--f-texto);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.marca__l2 {
  margin-top: .2rem;
  font-family: var(--f-titulo);
  font-size: 1.375rem;
  font-weight: 700;
  letter-spacing: -.02em;
}

.menu-boton {
  display: none;
  align-items: center;
  gap: .55rem;
  min-height: 2.75rem;
  padding: .5rem .9rem;
  border: 1px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: 600 .9375rem/1 var(--f-texto);
  cursor: pointer;
}
.js .menu-boton { display: inline-flex; }
.menu-boton__barras {
  position: relative;
  width: 1.1rem; height: 2px;
  background: currentColor;
  transition: background-color .2s;
}
.menu-boton__barras::before,
.menu-boton__barras::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%; height: 2px;
  background: currentColor;
  transition: transform .25s var(--curva);
}
.menu-boton__barras::before { top: -6px; }
.menu-boton__barras::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__barras { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__barras::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__barras::after { transform: translateY(-6px) rotate(-45deg); }

.menu {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-block: .5rem 1rem;
}
.js .menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: .75rem var(--margen) 1.5rem;
  max-height: calc(100vh - 4.25rem);
  max-height: calc(100dvh - 4.25rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--papel);
  border-bottom: 1px solid var(--tinta);
  box-shadow: 0 18px 30px -22px rgba(30, 30, 30, .5);
}
.js .menu.menu--abierto { display: flex; }

.menu__lista { list-style: none; margin: 0; padding: 0; }
.menu__lista li { border-bottom: 1px solid var(--filete); }
.menu__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .85rem 0;
  font-family: var(--f-titulo);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--tinta);
  text-decoration: none;
}
.menu__enlace::after {
  content: '→';
  font-family: var(--f-texto);
  font-size: 1rem;
  color: var(--naranja-tinta);
}
/* Desplegables Servicios y Destinos: <details>, funcionan sin JS.
   En móvil se abren dentro del panel; en escritorio, como hoja flotante */
.menu__desplegable > summary { list-style: none; cursor: pointer; }
.menu__desplegable > summary::-webkit-details-marker { display: none; }
.menu__enlace--grupo::after { content: none; }
.menu__flecha {
  width: .5rem; height: .5rem;
  flex: none;
  margin-left: .6rem;
  border-right: 2px solid var(--naranja-tinta);
  border-bottom: 2px solid var(--naranja-tinta);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s var(--curva);
}
.menu__desplegable[open] .menu__flecha { transform: rotate(-135deg) translateY(-1px); }
.submenu {
  list-style: none;
  margin: 0;
  padding: 0 0 .9rem;
}
.submenu li { border: 0; }
.submenu a {
  display: block;
  padding: .45rem 0 .45rem .9rem;
  border-left: 2px solid var(--filete);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--tinta);
  text-decoration: none;
  transition: border-color .15s, color .15s;
}
.submenu a span {
  display: block;
  font-size: .8125rem;
  font-weight: 400;
  color: var(--gris);
}
.submenu a:hover { color: var(--naranja-tinta); border-left-color: var(--naranja); }
.submenu__todos a { color: var(--naranja-tinta); }
.submenu--columnas { display: grid; grid-template-columns: minmax(0, 1fr); }

.menu__tel {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--tinta);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.menu__tel svg { width: 1rem; height: 1rem; color: var(--naranja-tinta); }
.menu__cta { align-self: flex-start; }

/* ---------- 5. Componentes de la fábrica ---------- */

/* Migas */
.w-migas { font-size: .8125rem; color: var(--gris); }
.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.w-migas li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.w-migas li + li::before {
  content: '';
  width: .9rem; height: 1px;
  background: currentColor;
  opacity: .6;
}
.w-migas a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  transition: border-color .15s, color .15s;
}
.w-migas a:hover { color: var(--naranja-tinta); border-color: currentColor; }
.w-migas [aria-current] { color: var(--gris); font-weight: 500; }

/* Antetítulo: cinta corta con filete naranja */
.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--naranja-tinta);
}
.w-antetitulo::before {
  content: '';
  width: 2rem; height: 2px;
  flex: none;
  background: var(--naranja);
}

/* Entradilla: 19-20 px, ~60 caracteres por línea */
.w-entradilla {
  max-width: 36rem;
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinta);
}
.w-entradilla p { margin-bottom: .8em; }

/* Ficha de datos: una sola forma en toda la web (filas con filete sobre el fondo,
   sin caja). En móvil, etiqueta encima del valor; desde 40em, columna de etiquetas
   fija y lo bastante ancha para «Entrada en Hungría» en una línea. */
.w-datos {
  margin: 0;
  border-top: 2px solid var(--tinta);
}
.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .1rem;
  padding: .65rem 0;
  border-bottom: 1px solid var(--filete);
}
.w-datos dt {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
  padding-top: .2rem;
}
/* Valores en Inter: Fraunces a cuerpo pequeño confunde la «f» de Székesfehérvár */
.w-datos dd {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--tinta);
}
.w-datos dd a { color: var(--naranja-tinta); text-decoration: none; border-bottom: 1px solid currentColor; }

/* Cotizador: el contenedor se ciñe al formulario y se centra */
.w-cotizador {
  box-sizing: border-box;
  width: 100%;
  max-width: 47.5rem;
  margin-inline: auto;
}
.w-cotizador__titulo {
  margin: 0 0 1.25rem;
  padding-top: 1rem;
  border-top: 3px solid var(--naranja);
  font-size: clamp(1.375rem, 1.2rem + .6vw, 1.75rem);
}

/* Foto con pie */
.w-foto { margin: 0; }
.w-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--grafito);
}
/* Un solo tratamiento en toda la web, sin JS: color conservado con virado cálido
   (luces hacia el naranja de la paleta, sombras hacia el grafito) para que las fotos
   hablen con el papel crema en vez de quedarse grises */
.w-foto img,
.banda-foto img { filter: sepia(.38) saturate(1.2) hue-rotate(-10deg) contrast(1.08) brightness(1.02); }
.w-foto figcaption {
  display: flex;
  gap: .75rem;
  margin-top: .75rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
}
.w-foto figcaption::before {
  content: '';
  width: 1.5rem; height: 2px;
  flex: none;
  margin-top: .65em;
  background: var(--naranja);
}

/* Secciones del documento: numeradas, con capitular en la primera */
.w-seccion { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--tinta); }
.w-seccion > h2 {
  font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem);
  margin-bottom: 1.25rem;
}
.w-seccion > h3 {
  margin: 2rem 0 .6rem;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
}
.w-seccion > p,
.w-seccion > ul,
.w-seccion > ol { max-width: 42rem; }
.w-seccion ul,
.w-seccion ol { padding-left: 1.2rem; margin: 0 0 1.1em; }
.w-seccion li { margin-bottom: .4em; }
.w-seccion li::marker { color: var(--naranja-tinta); }

.capitular::first-letter,
.cuerpo > .w-seccion:first-of-type > h2 + p::first-letter {
  float: left;
  margin: .06em .12em 0 0;
  font-family: var(--f-titulo);
  font-size: 3.7em;
  font-weight: 700;
  line-height: .78;
  color: var(--naranja-tinta);
}

/* Tablas: scroll horizontal propio en móvil */
.w-tabla {
  max-width: 100%;
  margin: 1.5rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 2px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
  background: var(--blanco);
}
.w-tabla table {
  width: 100%;
  min-width: 30rem;
  border-collapse: collapse;
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
}
.w-tabla th,
.w-tabla td {
  padding: .8rem 1rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--filete);
}
.w-tabla thead th {
  background: var(--grafito);
  color: var(--papel);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.w-tabla tbody th { color: var(--tinta); font-weight: 600; }
.w-tabla tbody tr:nth-child(even) { background: var(--papel); }
.w-tabla tbody tr:last-child td,
.w-tabla tbody tr:last-child th { border-bottom: 0; }
.w-tabla td:first-child { font-weight: 600; color: var(--tinta); }

/* Preguntas frecuentes */
.w-faq { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--tinta); }
.w-faq > h2 { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); margin-bottom: 1.5rem; }
.w-faq__item { border-bottom: 1px solid var(--filete); }
.w-faq__item:first-of-type { border-top: 2px solid var(--tinta); }
.w-faq__item summary {
  position: relative;
  display: block;
  padding: 1.15rem 3rem 1.15rem 0;
  list-style: none;
  cursor: pointer;
  font-family: var(--f-titulo);
  font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3125rem);
  font-weight: 500;
  line-height: 1.3;
  color: var(--tinta);
  transition: color .15s;
}
.w-faq__item summary::-webkit-details-marker { display: none; }
.w-faq__item summary::before,
.w-faq__item summary::after {
  content: '';
  position: absolute;
  right: .6rem;
  top: 50%;
  width: 1rem; height: 2px;
  background: var(--naranja-tinta);
  transition: transform .25s var(--curva);
}
.w-faq__item summary::after { transform: rotate(90deg); }
.w-faq__item[open] summary::after { transform: rotate(0deg); }
.w-faq__item summary:hover { color: var(--naranja-tinta); }
.w-faq__resp { padding: 0 0 1.4rem; max-width: 42rem; color: var(--tinta); }

/* Páginas hijas: tarjetas numeradas en rejilla regular */
.w-hijas { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--tinta); }
.w-hijas__titulo { font-size: clamp(1.75rem, 1.25rem + 1.9vw, 2.75rem); margin-bottom: 1.75rem; }
.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: 0 1.5rem;
  counter-reset: hija;
}
.w-tarjeta {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: 1rem 2.25rem 1.25rem 0;
  border-top: 2px solid var(--tinta);
  color: var(--tinta);
  text-decoration: none;
  counter-increment: hija;
  transition: border-color .2s;
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-family: var(--f-titulo);
  font-size: .875rem;
  font-weight: 600;
  color: var(--naranja-tinta);
  font-variant-numeric: tabular-nums;
}
.w-tarjeta::after {
  content: '→';
  position: absolute;
  right: .25rem;
  top: 1rem;
  color: var(--naranja-tinta);
  transition: transform .2s var(--curva);
}
.w-tarjeta:hover { border-color: var(--naranja); }
.w-tarjeta:hover::after { transform: translateX(4px); }
.w-tarjeta__nombre {
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
  hyphens: none;
}
.w-tarjeta__texto { font-size: .9375rem; line-height: 1.5; color: var(--gris); }

/* Hermanas: índice en columnas, filas compactas */
.w-hermanas { padding-block: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--tinta); }
.w-hermanas__titulo {
  margin-bottom: 1.25rem;
  font-size: clamp(1.375rem, 1.15rem + .9vw, 1.875rem);
}
.w-hermanas__enlaces {
  columns: 2 9rem;
  column-gap: 1.25rem;
  border-top: 2px solid var(--tinta);
  padding-top: .35rem;
}
.w-hermanas__enlaces a {
  display: block;
  break-inside: avoid;
  padding: .5rem 1.1rem .5rem 0;
  position: relative;
  border-bottom: 1px solid var(--filete);
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  transition: color .15s, padding-left .2s var(--curva);
}
.w-hermanas__enlaces a::after {
  content: '→';
  position: absolute;
  right: 0;
  top: .5rem;
  font-size: .875rem;
  color: var(--naranja-tinta);
  opacity: 0;
  transition: opacity .15s;
}
.w-hermanas__enlaces a:hover { color: var(--naranja-tinta); padding-left: .25rem; }
.w-hermanas__enlaces a:hover::after { opacity: 1; }

/* Cierre */
.w-cierre {
  max-width: 46rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.125rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.01em;
}
.w-cierre p { margin-bottom: .6em; }

/* ---------- 6. Rótulos y piezas comunes ---------- */
.rotulo {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin: 0 0 1rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gris);
}
.rotulo__num {
  font-family: var(--f-titulo);
  font-size: 1rem;
  letter-spacing: 0;
  color: var(--naranja-tinta);
  font-variant-numeric: tabular-nums;
}
.rotulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--filete);
}

.icono { width: 2.5rem; height: 2.5rem; flex: none; color: var(--naranja-tinta); }

/* ---------- 7. Portada ---------- */
.heroe { padding-block: clamp(1.25rem, 2.5vw, 2rem) var(--hueco); }

/* Antetítulo de la portada: el mismo .w-antetitulo de las interiores (Inter
   versalita naranja con filete), nada de migas */
.heroe__antetitulo { margin-bottom: clamp(1rem, 2vw, 1.5rem); }

.heroe__titulo {
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  font-size: clamp(2.125rem, .4rem + 5.6vw, 6rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.03em;
  overflow-wrap: break-word;
}
.heroe__titulo span { color: var(--naranja-tinta); }

/* En móvil: entradilla corta → cotizador → resto del texto y ficha.
   En escritorio: texto y ficha a la izquierda, cotizador a la derecha. */
.heroe__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "texto" "cotizar" "mas";
  gap: 2rem clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}
.heroe__texto { grid-area: texto; }
.heroe__cotizar { grid-area: cotizar; }
.heroe__mas { grid-area: mas; }
/* Botón y teléfono bajo la entradilla, en todos los anchos: la primera pantalla
   del móvil ya enseña cómo pedir precio o llamar */
.heroe__principal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: 1.5rem 0 0;
}
.heroe__mas .w-datos { max-width: 36rem; }
.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

.heroe__cotizar { min-width: 0; }
.heroe__rotulo {
  max-width: 47.5rem;
  margin: 0 auto 1rem;
  padding-top: .9rem;
  border-top: 3px solid var(--naranja);
}

/* Sección tipo de la portada */
.seccion { padding-block: var(--hueco); }
.seccion--superficie { background: var(--blanco); }
.seccion--papel { background: var(--papel-2); }
.seccion__cabeza { max-width: 52rem; margin-bottom: clamp(2rem, 4vw, 3rem); }
.seccion__titulo { font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.5rem); }
.seccion__entrada {
  max-width: 38rem;
  margin-top: 1.1rem;
  font-size: clamp(1.1875rem, 1.1rem + .3vw, 1.25rem);
  line-height: 1.55;
}

.prosa { max-width: 42rem; }
.prosa--columnas { max-width: none; }

/* Modalidades: cifras de la ficha en cuatro piezas */
.modalidades {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 2rem;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  padding: 0;
  list-style: none;
}
.modalidad {
  padding: 1rem 0 1.1rem;
  border-top: 2px solid var(--tinta);
}
/* Cabeza del acordeón: nombre e icono arriba, cifra debajo, flecha a la derecha */
.modalidad__resumen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .5rem 1rem;
  list-style: none;
  cursor: pointer;
}
.modalidad__resumen::-webkit-details-marker { display: none; }
.modalidad__resumen .icono { grid-column: 2; grid-row: 1; }
.modalidad__resumen::after {
  content: '';
  grid-column: 2;
  grid-row: 2;
  justify-self: center;
  width: .6rem; height: .6rem;
  border-right: 2px solid var(--naranja-tinta);
  border-bottom: 2px solid var(--naranja-tinta);
  transform: rotate(45deg) translateY(-3px);
  transition: transform .2s var(--curva);
}
.modalidad__plegable[open] .modalidad__resumen::after { transform: rotate(-135deg) translateY(-3px); }
.modalidad__cuerpo { display: grid; gap: .6rem; padding-top: .75rem; }
.modalidad__nombre { grid-column: 1; grid-row: 1; font-size: 1.375rem; }
/* Cifra con la misma estructura en las cuatro: rótulo de una línea encima
   («Tope por envío», «Franja de entrega»…) y número con unidad corta (kg, h)
   que nunca se parte */
.modalidad__cifra {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: 0;
  min-width: 0;
}
.modalidad__etiqueta {
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--gris);
  white-space: nowrap;
}
.modalidad__valor {
  display: flex;
  align-items: baseline;
  gap: .3rem;
  font-family: var(--f-titulo);
  font-size: clamp(2.5rem, 2rem + 1.6vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--naranja-tinta);
  font-variant-numeric: lining-nums;
  white-space: nowrap;
}
.modalidad__unidad {
  font-size: .5em;
  font-weight: 600;
  letter-spacing: 0;
}
.modalidad p { margin: 0; color: var(--tinta); font-size: 1rem; }
.modalidad__enlace {
  justify-self: start;
  padding-top: .25rem;
  font-weight: 600;
  font-size: .9375rem;
  color: var(--naranja-tinta);
  text-decoration: none;
}
.modalidad__enlace span { display: inline-block; transition: transform .2s var(--curva); }
.modalidad__enlace:hover span { transform: translateX(4px); }

/* Banda de foto a todo el ancho */
.banda-foto { margin: 0; background: var(--grafito); color: var(--papel); }
.banda-foto img {
  display: block;
  width: 100%;
  height: clamp(15rem, 48vw, 38rem);
  object-fit: cover;
}
.banda-foto figcaption {
  max-width: var(--ancho);
  margin-inline: auto;
  padding: 1.1rem var(--margen) 1.3rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--gris-claro);
}
.banda-foto figcaption strong { color: var(--papel); font-family: var(--f-titulo); font-weight: 600; margin-right: .35rem; }

/* Franja grafito */
.seccion--grafito { background: var(--grafito); color: var(--papel); }
.seccion--grafito h2,
.seccion--grafito h3 { color: var(--papel); }
.seccion--grafito .rotulo { color: var(--gris-claro); }
.seccion--grafito .rotulo__num { color: var(--naranja-claro); }
.seccion--grafito .rotulo::after { background: var(--filete-oscuro); }
.seccion--grafito .prosa a { color: var(--naranja-claro); }
.seccion--grafito .seccion__entrada { color: var(--papel); }

.contrata { display: grid; gap: 2.5rem; }

.pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.paso {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--filete-oscuro);
  counter-increment: paso;
}
.paso::before {
  content: counter(paso, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--f-titulo);
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1;
  color: var(--naranja-claro);
}
.paso h3 { font-size: 1.3125rem; margin-bottom: .4rem; }
.paso p { margin: 0; color: var(--gris-claro); }

.nota-tel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--filete-oscuro);
  color: var(--gris-claro);
}
.nota-tel a {
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--papel);
  text-decoration: none;
  border-bottom: 2px solid var(--naranja);
  font-variant-numeric: tabular-nums;
}
.nota-tel a:hover { color: var(--naranja-claro); }

/* Bloque asimétrico foto + texto */
.asimetrico {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.asimetrico .prosa h3 { margin: 1.75rem 0 .5rem; font-size: 1.375rem; }

/* Lema: titular de sección a todo el ancho entre filetes (no es una cita) */
.lema {
  padding-block: clamp(3rem, 7vw, 5.5rem);
  border-top: 1px solid var(--tinta);
  border-bottom: 1px solid var(--tinta);
}
.lema__titulo {
  max-width: 26ch;
  font-size: clamp(1.75rem, 1.1rem + 2.8vw, 3.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -.02em;
}
.lema__titulo span { color: var(--naranja-tinta); }
.lema__boton { margin-top: 2rem; }

/* Seguro */
.dos-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
}
.pieza {
  padding-top: 1.25rem;
  border-top: 2px solid var(--tinta);
}
.pieza__cabeza { display: flex; align-items: center; gap: .9rem; margin-bottom: .9rem; }
.pieza__cabeza h3 { font-size: 1.5rem; }
.linea-aviso {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin-top: 1.25rem;
  padding: 1rem 1.1rem;
  background: var(--papel);
  border-left: 3px solid var(--naranja);
  font-weight: 500;
}
.linea-aviso svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: .15rem; color: var(--naranja-tinta); }

/* Índice de destinos: el mapa como pieza grande junto al titular de la sección y,
   debajo, una tarjeta por región numerada igual que en el mapa (rejilla de 1, 2 o 4
   columnas: 8 tarjetas, filas siempre completas) */
.destinos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.destinos__lateral .seccion__entrada { margin-bottom: 0; }
.destinos__nota {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: 1.1rem 0 0;
  border-top: 2px solid var(--naranja);
}
.destinos__indice {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin: clamp(2rem, 4vw, 3.25rem) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: destino;
}

/* Mapa: solo desde 40em (en móvil mandan las tarjetas plegables) */
.destinos__mapa { display: none; margin: 0; }
.mapa { display: block; width: 100%; height: auto; overflow: visible; }
/* Silueta blanca con filete de tinta sobre el papel (la misma gama que el plano de
   las páginas interiores): números grandes y legibles a tamaño normal */
.mapa__pais { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.5; stroke-linejoin: round; }
.mapa__rio { fill: none; stroke: #9DB4C0; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.mapa__lago { fill: #CFDDE4; stroke: #9DB4C0; stroke-width: 1; }
.mapa__agua {
  font-family: var(--f-titulo);
  font-size: 13px;
  font-style: italic;
  font-weight: 500;
  fill: var(--gris);
  color: var(--gris);
}
.mapa__ciudad {
  font-family: var(--f-texto);
  font-size: 14px;
  font-weight: 700;
  fill: var(--tinta);
  color: var(--tinta);
  dominant-baseline: middle;
}
.mapa__punto circle {
  fill: var(--naranja);
  stroke: var(--tinta);
  stroke-width: 1.5;
  transform-box: fill-box;
  transform-origin: center;
  transition: fill .2s, transform .25s var(--curva);
}
.mapa__punto text {
  font-family: var(--f-texto);
  font-size: 13px;
  font-weight: 700;
  fill: var(--tinta);
  color: var(--tinta);
  text-anchor: middle;
  dominant-baseline: central;
  pointer-events: none;
  transition: fill .2s;
}
.mapa__punto:hover circle,
.mapa__punto:focus-visible circle { fill: var(--papel-2); transform: scale(1.15); }
.mapa__punto:hover text,
.mapa__punto:focus-visible text { fill: var(--tinta); color: var(--tinta); }
.mapa__punto:focus-visible { outline: none; }
.destinos__mapa figcaption {
  display: flex;
  gap: .75rem;
  margin-top: 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
}
.destinos__mapa figcaption::before {
  content: '';
  width: 1.5rem; height: 2px;
  flex: none;
  margin-top: .65em;
  background: var(--naranja);
}

.destino {
  display: flex;
  flex-direction: column;
  padding: .9rem 1.1rem .75rem;
  background: var(--blanco);
  border-top: 3px solid var(--tinta);
  border-radius: 0 0 var(--radio) var(--radio);
  counter-increment: destino;
  transition: border-color .2s, box-shadow .25s;
}
.destino:hover { border-top-color: var(--naranja); box-shadow: 0 18px 32px -26px rgba(30, 30, 30, .5); }
.destino__ver {
  align-self: flex-start;
  margin-top: .9rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--naranja-tinta);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}
.destino__ver::after { content: ' →'; }
.destino__ver:hover { border-bottom-width: 2px; }
.destino__aviso {
  margin: 0;
  max-width: 30rem;
  font-family: var(--f-titulo);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.35;
}
/* Tarjeta mínima: número, región y capital; los condados, plegados.
   En móvil el número va en línea con el nombre para acortar la columna */
.destino__nombre {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: clamp(1.25rem, 1.2rem + .4vw, 1.5rem);
  font-weight: 600;
  line-height: 1.15;
}
.destino__nombre::before {
  content: counter(destino, decimal-leading-zero);
  flex: none;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--naranja-tinta);
  font-variant-numeric: lining-nums tabular-nums;
}
.destino__nombre a { color: var(--tinta); text-decoration: none; background: linear-gradient(var(--naranja), var(--naranja)) 0 100% / 0 2px no-repeat; transition: background-size .25s var(--curva); }
.destino__nombre a:hover { background-size: 100% 2px; }
/* Todas las tarjetas con las mismas piezas: nombre, centro, vía de acceso y pie
   (condados plegados o, en Budapest, su dato de reparto) */
.destino__nota { margin: .3rem 0 0; font-size: .9375rem; color: var(--gris); }
.destino__via {
  display: flex;
  gap: .45rem;
  margin: .2rem 0 .75rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--tinta);
}
.destino__via::before {
  content: '';
  width: .9rem; height: 2px;
  flex: none;
  margin-top: .7em;
  background: var(--naranja);
}
.destino__pie {
  margin: auto 0 0;
  padding: .7rem 0 .35rem;
  border-top: 1px solid var(--filete);
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gris);
}
/* Plegable siempre al pie de la tarjeta: los «condados» de una fila quedan alineados */
.destino__plegable { margin-top: auto; padding-top: .35rem; border-top: 1px solid var(--filete); }
.destino__plegable summary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem 0;
  list-style: none;
  cursor: pointer;
  font-size: .875rem;
  font-weight: 600;
  color: var(--gris);
}
.destino__plegable summary::-webkit-details-marker { display: none; }
.destino__plegable summary::after {
  content: '';
  width: .45rem; height: .45rem;
  border-right: 2px solid var(--naranja-tinta);
  border-bottom: 2px solid var(--naranja-tinta);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s var(--curva);
}
.destino__plegable[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.destino__lista { list-style: none; margin: 0; padding: 0; }
.destino__lista li { padding: .5rem 0; border-bottom: 1px solid var(--filete); }
.destino__lista li:last-child { border-bottom: 0; }
.destino__condado {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--tinta);
  text-decoration: none;
  transition: color .15s;
}
.destino__condado::after { content: '→'; font-weight: 400; color: var(--naranja-tinta); transition: transform .2s var(--curva); }
.destino__condado:hover { color: var(--naranja-tinta); }
.destino__condado:hover::after { transform: translateX(3px); }
.destino__ciudades {
  display: block;
  margin-top: .2rem;
  font-size: .875rem;
  line-height: 1.5;
  color: var(--gris);
}
.destino__ciudades a {
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  transition: color .15s, border-color .15s;
}
.destino__ciudades a:hover { color: var(--naranja-tinta); border-color: currentColor; }

/* FAQ de portada a dos columnas */
.faq-portada .w-faq { padding: 0; border: 0; }

/* Cierre de portada e interiores */
.cierre {
  position: relative;
  padding-block: var(--hueco);
  background: var(--grafito);
  color: var(--papel);
}
.cierre::before {
  content: '';
  position: absolute;
  top: 0;
  left: max(var(--margen), calc((100% - var(--ancho)) / 2 + var(--margen)));
  width: 4.5rem; height: 4px;
  background: var(--naranja);
}
.cierre h2 { color: var(--papel); font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); max-width: 18ch; margin-bottom: 1.25rem; }
.cierre p { color: var(--gris-claro); max-width: 38rem; }
.cierre .w-cierre { color: var(--papel); }
.cierre .w-cierre p { color: var(--papel); }
.cierre .w-cierre a { color: var(--naranja-claro); }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }

/* ---------- 8. Páginas interiores ---------- */
.cabeza { padding-block: clamp(1.25rem, 3vw, 2rem) clamp(2.5rem, 5vw, 4rem); }
.cabeza .w-migas { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.cabeza__h1 {
  margin-bottom: clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(1.875rem, 1rem + 3.6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -.028em;
  overflow-wrap: break-word;
}
/* Cuatro piezas sueltas (titular, texto con botón, ficha y foto) que cada tipo de
   página compone a su manera con grid-template-areas (ver el final del bloque y
   los @media). En móvil: titular, texto, ficha y foto, una debajo de otra */
.cabeza__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "titular" "texto" "datos" "foto";
  gap: 1.75rem clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.cabeza__titular { grid-area: titular; min-width: 0; }
.cabeza__texto { grid-area: texto; min-width: 0; }
.cabeza__datos { grid-area: datos; min-width: 0; }
.cabeza__foto { grid-area: foto; min-width: 0; }
.cabeza__titular .cabeza__h1 { margin-bottom: 0; }
.cabeza__datos:not(:has(.w-datos:not(.w-datos--envio))),
.cabeza__foto:not(:has(img)) { display: none; }

/* Datos para el envío, fijos y útiles en cualquier página (código postal, plazo,
   modalidades): rematan la ficha propia de cada lugar con su mismo dibujo */
.cabeza__envio { display: none; margin-top: 1.25rem; }
body:is([class*="region"], [class*="provincia"], [class*="division"], [class*="ciudad"], [class*="servicio"]) .cabeza__envio { display: block; }
.cabeza__envio-rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .4rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--naranja-tinta);
}
.cabeza__envio-rotulo::before {
  content: '';
  width: 1.25rem; height: 2px;
  flex: none;
  background: var(--naranja);
}
.w-datos--envio { border-top-width: 1px; }

/* Botón y teléfono bajo la entradilla, en todas las cabeceras */
.cabeza__acciones {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.5rem;
  margin: clamp(1.5rem, 3vw, 2rem) 0 0;
}
.cabeza__acciones .boton { max-width: 100%; text-align: left; }
.cabeza__acciones .boton > span { min-width: 0; }
.cabeza__tel,
.heroe__tel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
  border-bottom: 1px solid var(--filete);
  font-variant-numeric: tabular-nums;
  transition: color .15s, border-color .15s;
}
.cabeza__tel svg,
.heroe__tel svg { width: 1.05rem; height: 1.05rem; flex: none; color: var(--naranja-tinta); }
.cabeza__tel:hover,
.heroe__tel:hover { color: var(--naranja-tinta); border-color: currentColor; }

/* Foto de cabecera: llena la altura que le dé su fila, sin depender de JS */
.cabeza__foto .w-foto img { aspect-ratio: 3 / 2; }

/* Franja con las páginas hijas (condados de una región, ciudades de un condado)
   justo bajo la cabecera: el nivel del árbol se ve desde la primera pantalla */
.franja-hijas { background: var(--papel-2); border-top: 1px solid var(--tinta); }
.franja-hijas:not(:has(.w-tarjeta)) { display: none; }
.franja-hijas .w-hijas { padding-block: clamp(1.75rem, 3.5vw, 2.5rem); border-top: 0; }
.franja-hijas .w-hijas__titulo { margin-bottom: 1rem; font-size: clamp(1.25rem, 1.1rem + .6vw, 1.625rem); }
.franja-hijas .w-tarjeta { padding-bottom: .9rem; }
.franja-hijas + .bloque-cotizar { border-top-width: 1px; }

.bloque-cotizar {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: var(--papel-2);
  border-block: 1px solid var(--tinta);
}
.bloque-cotizar__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2rem clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.bloque-cotizar__lado { max-width: 34rem; }
.bloque-cotizar__lema {
  margin: 0 0 .9rem;
  font-family: var(--f-titulo);
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.bloque-cotizar__lado p { color: var(--tinta); }
.bloque-cotizar__tel { font-size: .9375rem; }
.bloque-cotizar__tel a { color: var(--naranja-tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; }
.bloque-cotizar__widget { min-width: 0; }

/* Tres pasos fijos sobre el cotizador: una tira con filetes */
.bloque-cotizar__pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  counter-reset: bc-paso;
  font-size: .875rem;
  line-height: 1.45;
  color: var(--gris);
}
.bloque-cotizar__pasos li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  column-gap: .5rem;
  padding: .6rem 0;
  border-top: 1px solid var(--filete);
  counter-increment: bc-paso;
}
.bloque-cotizar__pasos li::before {
  content: counter(bc-paso, decimal-leading-zero);
  grid-row: span 2;
  font-family: var(--f-titulo);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--naranja-tinta);
  font-variant-numeric: tabular-nums;
}
.bloque-cotizar__pasos strong { display: block; color: var(--tinta); font-size: .9375rem; }

/* Páginas sin cotizador incrustado (solo botón): mismo patrón, la columna derecha
   es una pieza grafito con los pasos en grande y el botón al pie, sin huecos */
.bloque-cotizar__widget:not(:has(.w-cotizador)) {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--grafito);
  color: var(--gris-claro);
  border-top: 4px solid var(--naranja);
  border-radius: var(--radio);
}
.bloque-cotizar__widget:not(:has(.w-cotizador)) .bloque-cotizar__pasos { font-size: .9375rem; color: var(--gris-claro); }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .bloque-cotizar__pasos li { grid-template-columns: 3rem minmax(0, 1fr); padding: 1rem 0; border-top-color: var(--filete-oscuro); }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .bloque-cotizar__pasos li:first-child { border-top: 0; padding-top: 0; }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .bloque-cotizar__pasos li::before { font-size: 1.75rem; line-height: 1; color: var(--naranja-claro); }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .bloque-cotizar__pasos strong { color: var(--papel); font-family: var(--f-titulo); font-size: 1.1875rem; font-weight: 600; margin-bottom: .15rem; }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .w-cta-linea { margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--filete-oscuro); }
.bloque-cotizar__widget:not(:has(.w-cotizador)) .w-cta { width: 100%; justify-content: center; }

.cuerpo { counter-reset: seccion; }
.cuerpo > .w-seccion:first-child,
.cuerpo > .w-faq:first-child { border-top: 0; }
.cuerpo > .w-seccion > h2::before,
.cuerpo > .w-faq > h2::before {
  counter-increment: seccion;
  content: counter(seccion, decimal-leading-zero);
  display: block;
  margin-bottom: .5rem;
  font-size: clamp(2.25rem, 1.8rem + 1.4vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--naranja-tinta);
  font-variant-numeric: lining-nums tabular-nums;
}

/* Ritmo del texto largo, sin tocar el contenido: UNA sola cita destacada por
   página (primer párrafo de la segunda sección); el resto, texto corrido. Una
   sección de cada tres va en banda de papel tostado */
.cuerpo > .w-seccion:nth-of-type(2) > h2 + p {
  margin-bottom: 1.4rem;
  padding: .2rem 0 .2rem 1.1rem;
  border-left: 3px solid var(--naranja);
  font-family: var(--f-titulo);
  font-size: clamp(1.1875rem, 1.1rem + .45vw, 1.4375rem);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.005em;
  text-wrap: pretty;
}
.cuerpo > .w-seccion:nth-of-type(3n) {
  margin-inline: calc(-1 * var(--margen));
  padding-inline: var(--margen);
  background: var(--papel-2);
  border-top: 0;
}
.cuerpo > .w-seccion:nth-of-type(3n) .w-tabla tbody tr:nth-child(even) { background: var(--papel); }
.cuerpo > .w-seccion:nth-of-type(3n) + * { border-top: 0; }

/* Sin margen propio: el bloque anterior ya trae su aire (evita una franja vacía de papel) */
.cierre--interior { margin-top: 0; }
.cierre--interior .w-cta-linea { margin-top: 1.5rem; }

/* Cabecera según el nivel del árbol ({{CLASE}}): cada nivel tiene su composición
   reconocible. La cabecera de la web (marca y menú) es la misma en todas: filete
   fino de 1 px, sin franjas.
   · REGIÓN: plano de Hungría con las capitales de sus condados resaltadas junto
     al titular; ficha en franja debajo. Sin foto de banco.
   · CONDADO: titular y entradilla a la par; foto a sangre con la ficha superpuesta
     en tarjeta y un plano de situación pequeño.
   · CIUDAD: titular a todo el ancho; plano con la ciudad señalada a la izquierda
     y texto con la ficha a la derecha. Sin foto de banco.
   · SERVICIO: superficie blanca; titular a todo el ancho, texto y ficha a la
     izquierda, foto apaisada a la derecha.
   · Por defecto (contacto): titular y texto junto a la foto; ficha en franja. */

/* Plano de situación: el lugar de la página se resalta leyendo el canonical que
   pone la fábrica (CSS puro: sin JS y sin textos que cambien) */
.cabeza { container-type: inline-size; }
.cabeza__plano { grid-area: plano; display: none; min-width: 0; margin: 0; }
body:is([class*="region"], [class*="ciudad"]) .cabeza__plano { display: block; }
.plano { display: block; width: 100%; height: auto; overflow: visible; }
.plano__pais { fill: var(--blanco); stroke: var(--tinta); stroke-width: 1.4; stroke-linejoin: round; }
.plano__rio { fill: none; stroke: #9DB4C0; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plano__lago { fill: #CFDDE4; stroke: #9DB4C0; stroke-width: 1; }
.plano__agua { font-family: var(--f-titulo); font-size: 11px; font-style: italic; font-weight: 500; fill: var(--gris); color: var(--gris); }
.plano__dot {
  fill: var(--tono, var(--blanco));
  stroke: var(--tinta);
  stroke-width: 1.2;
  transform: scale(var(--escala, 1));
  transform-box: fill-box;
  transform-origin: center;
}
.plano__halo { fill: none; stroke: var(--naranja); stroke-width: 2; opacity: var(--halo, 0); }
.plano__punto text {
  font-family: var(--f-texto);
  font-size: var(--cuerpo, 11px);
  font-weight: var(--peso, 500);
  fill: var(--texto, var(--gris));
  color: var(--texto, var(--gris));
  dominant-baseline: middle;
}
/* Región: las capitales de sus condados */
html:has(link[rel="canonical"][href$="/budapest/"]) .plano [data-region="budapest"],
html:has(link[rel="canonical"][href$="/pest/"]) .plano [data-region="pest"],
html:has(link[rel="canonical"][href$="/transdanubia-central/"]) .plano [data-region="transdanubia-central"],
html:has(link[rel="canonical"][href$="/transdanubia-occidental/"]) .plano [data-region="transdanubia-occidental"],
html:has(link[rel="canonical"][href$="/transdanubia-meridional/"]) .plano [data-region="transdanubia-meridional"],
html:has(link[rel="canonical"][href$="/hungria-septentrional/"]) .plano [data-region="hungria-septentrional"],
html:has(link[rel="canonical"][href$="/gran-llanura-septentrional/"]) .plano [data-region="gran-llanura-septentrional"],
html:has(link[rel="canonical"][href$="/gran-llanura-meridional/"]) .plano [data-region="gran-llanura-meridional"],
/* Condado: su capital */
html:has(link[rel="canonical"][href$="/fejer/"]) .plano [data-condado="fejer"],
html:has(link[rel="canonical"][href$="/komarom-esztergom/"]) .plano [data-condado="komarom-esztergom"],
html:has(link[rel="canonical"][href$="/veszprem/"]) .plano [data-condado="veszprem"],
html:has(link[rel="canonical"][href$="/gyor-moson-sopron/"]) .plano [data-condado="gyor-moson-sopron"],
html:has(link[rel="canonical"][href$="/vas/"]) .plano [data-condado="vas"],
html:has(link[rel="canonical"][href$="/zala/"]) .plano [data-condado="zala"],
html:has(link[rel="canonical"][href$="/baranya/"]) .plano [data-condado="baranya"],
html:has(link[rel="canonical"][href$="/somogy/"]) .plano [data-condado="somogy"],
html:has(link[rel="canonical"][href$="/tolna/"]) .plano [data-condado="tolna"],
html:has(link[rel="canonical"][href$="/borsod-abauj-zemplen/"]) .plano [data-condado="borsod-abauj-zemplen"],
html:has(link[rel="canonical"][href$="/heves/"]) .plano [data-condado="heves"],
html:has(link[rel="canonical"][href$="/nograd/"]) .plano [data-condado="nograd"],
html:has(link[rel="canonical"][href$="/hajdu-bihar/"]) .plano [data-condado="hajdu-bihar"],
html:has(link[rel="canonical"][href$="/jasz-nagykun-szolnok/"]) .plano [data-condado="jasz-nagykun-szolnok"],
html:has(link[rel="canonical"][href$="/szabolcs-szatmar-bereg/"]) .plano [data-condado="szabolcs-szatmar-bereg"],
html:has(link[rel="canonical"][href$="/bacs-kiskun/"]) .plano [data-condado="bacs-kiskun"],
html:has(link[rel="canonical"][href$="/bekes/"]) .plano [data-condado="bekes"],
html:has(link[rel="canonical"][href$="/csongrad-csanad/"]) .plano [data-condado="csongrad-csanad"],
/* Ciudad: ella misma */
html:has(link[rel="canonical"][href$="/erd/"]) .plano [data-ciudad="erd"],
html:has(link[rel="canonical"][href$="/szekesfehervar/"]) .plano [data-ciudad="szekesfehervar"],
html:has(link[rel="canonical"][href$="/dunaujvaros/"]) .plano [data-ciudad="dunaujvaros"],
html:has(link[rel="canonical"][href$="/tatabanya/"]) .plano [data-ciudad="tatabanya"],
html:has(link[rel="canonical"][href$="/gyor/"]) .plano [data-ciudad="gyor"],
html:has(link[rel="canonical"][href$="/sopron/"]) .plano [data-ciudad="sopron"],
html:has(link[rel="canonical"][href$="/szombathely/"]) .plano [data-ciudad="szombathely"],
html:has(link[rel="canonical"][href$="/zalaegerszeg/"]) .plano [data-ciudad="zalaegerszeg"],
html:has(link[rel="canonical"][href$="/nagykanizsa/"]) .plano [data-ciudad="nagykanizsa"],
html:has(link[rel="canonical"][href$="/pecs/"]) .plano [data-ciudad="pecs"],
html:has(link[rel="canonical"][href$="/kaposvar/"]) .plano [data-ciudad="kaposvar"],
html:has(link[rel="canonical"][href$="/miskolc/"]) .plano [data-ciudad="miskolc"],
html:has(link[rel="canonical"][href$="/eger/"]) .plano [data-ciudad="eger"],
html:has(link[rel="canonical"][href$="/debrecen/"]) .plano [data-ciudad="debrecen"],
html:has(link[rel="canonical"][href$="/szolnok/"]) .plano [data-ciudad="szolnok"],
html:has(link[rel="canonical"][href$="/nyiregyhaza/"]) .plano [data-ciudad="nyiregyhaza"],
html:has(link[rel="canonical"][href$="/kecskemet/"]) .plano [data-ciudad="kecskemet"],
html:has(link[rel="canonical"][href$="/bekescsaba/"]) .plano [data-ciudad="bekescsaba"],
html:has(link[rel="canonical"][href$="/szeged/"]) .plano [data-ciudad="szeged"],
html:has(link[rel="canonical"][href$="/hodmezovasarhely/"]) .plano [data-ciudad="hodmezovasarhely"] {
  --tono: var(--naranja);
  --texto: var(--tinta);
  --peso: 700;
  --cuerpo: 13px;
  --escala: 1.6;
  --halo: 1;
}

/* Región: plano grande junto al titular, sin foto de banco */
body[class*="region"] .cabeza__rejilla { grid-template-areas: "titular" "texto" "plano" "datos"; }
body[class*="region"] .cabeza__h1 { max-width: 20ch; }
body[class*="region"] .cabeza__plano { max-width: 36rem; }

/* Condado: foto a sangre (de borde a borde de la pantalla) con la ficha encima */
body:is([class*="provincia"], [class*="division"]) .cabeza__rejilla { grid-template-areas: "titular" "texto" "foto" "datos"; }
body:is([class*="provincia"], [class*="division"]) .cabeza__foto {
  margin-inline: calc(-1 * var(--margen));
  margin-inline: calc(50% - 50cqw);
}
body:is([class*="provincia"], [class*="division"]) .cabeza__foto .w-foto img { aspect-ratio: 4 / 3; }
body:is([class*="provincia"], [class*="division"]) .cabeza__foto figcaption { padding-inline: var(--margen); }
body:is([class*="provincia"], [class*="division"]) .cabeza__datos {
  position: relative;
  z-index: 1;
  margin: -4.5rem .5rem 0;
  padding: 1rem 1.15rem 1.15rem;
  background: var(--blanco);
  border-top: 4px solid var(--naranja);
  border-radius: 0 0 var(--radio) var(--radio);
  box-shadow: 0 22px 44px -26px rgba(30, 30, 30, .55);
}
body:is([class*="provincia"], [class*="division"]) .cabeza__datos .w-datos:first-child { border-top: 0; }
body:is([class*="provincia"], [class*="division"]) .cabeza__datos .w-datos__fila:last-child { border-bottom: 0; }
/* Condado sin foto: la tarjeta no tiene nada que pisar */
body:is([class*="provincia"], [class*="division"]) .cabeza__rejilla:not(:has(.cabeza__foto img)) .cabeza__datos { margin: 0; }

/* Ciudad: el plano con la ciudad señalada, en lámina de papel tostado */
body[class*="ciudad"] .cabeza__rejilla { grid-template-areas: "titular" "texto" "plano" "datos"; }
body[class*="ciudad"] .cabeza__plano {
  padding: clamp(.75rem, 2vw, 1.25rem);
  background: var(--papel-2);
  border-top: 3px solid var(--naranja);
}
body[class*="ciudad"] .cabeza .w-datos { border-top-color: var(--naranja); }

/* Región y ciudad: el lugar lo cuenta el plano, no una foto de banco */
body:is([class*="region"], [class*="ciudad"]) .cabeza__foto { display: none; }

/* Servicio: superficie blanca, misma cabecera fina que el resto */
body[class*="servicio"] .cabeza { background: var(--blanco); }
body[class*="servicio"] .cabeza .w-datos { border-top-color: var(--naranja); }
body[class*="servicio"] .cabeza__foto .w-foto img { aspect-ratio: 3 / 2; }

/* Recorrido del cotizador: migas y cabecera en la retícula de todas las páginas
   y el formulario debajo, a 820 px como máximo, con su borde izquierdo en la misma
   línea que el H1 (nada de hueco descolgado a la izquierda). En escritorio, la
   entrada pasa a una columna lateral junto al formulario */
.paso-cotizador { padding-block: clamp(1.25rem, 3vw, 2rem) var(--hueco); }
.paso-cotizador .w-migas { margin-bottom: clamp(1.75rem, 4vw, 3rem); }
/* Cabecera editorial propia (el título de cada paso lo pone el formulario) */
.paso-cotizador__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "cabeza" "marco" "lado";
  gap: clamp(1.25rem, 2.5vw, 1.75rem) clamp(2rem, 4vw, 4rem);
  align-items: start;
}
.paso-cotizador__cabeza {
  grid-area: cabeza;
  min-width: 0;
  max-width: 51.25rem;
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
  border-bottom: 1px solid var(--tinta);
}
.paso-cotizador__marco { grid-area: marco; }
.paso-cotizador__lado { grid-area: lado; min-width: 0; max-width: 38rem; }
.paso-cotizador__pasos { margin: 1.25rem 0; }
.paso-cotizador__tel { font-size: .9375rem; }
.paso-cotizador__tel a { color: var(--naranja-tinta); font-weight: 600; text-decoration: none; border-bottom: 1px solid currentColor; white-space: nowrap; }
.paso-cotizador__h1 {
  margin: 0;
  font-size: clamp(2.125rem, 1.3rem + 3.2vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -.028em;
}
.paso-cotizador__marco { max-width: 51.25rem; margin-inline: 0; }
.paso-cotizador__h1 span { color: var(--naranja-tinta); }
.paso-cotizador__entrada {
  max-width: 38rem;
  font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);
  line-height: 1.55;
}
.paso-cotizador__widget { min-width: 0; }

/* ---------- 9. Pie ---------- */
.pie {
  background: var(--noche);
  color: var(--gris-claro);
  font-size: .9375rem;
}
.pie__in {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2.25rem;
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
}
.pie .marca { color: var(--papel); }
.pie .marca__l1 { color: var(--gris-claro); }
.pie__lema { margin: 1rem 0 0; max-width: 22rem; }
.pie__titulo {
  margin: 0 0 .9rem;
  font-family: var(--f-texto);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--papel);
}
.pie__lista { list-style: none; margin: 0; padding: 0; columns: 2 10rem; column-gap: 1.5rem; }
.pie__lista--simple { columns: 1; }
.pie__lista li { break-inside: avoid; padding: .2rem 0; }
.pie a { color: var(--gris-claro); text-decoration: none; transition: color .15s; }
.pie a:hover { color: var(--naranja-claro); }
.pie__tel {
  display: inline-block;
  font-family: var(--f-titulo);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--papel) !important;
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--naranja);
}
.pie__tel:hover { color: var(--naranja-claro) !important; }
.pie__horario { margin: .5rem 0 0; }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .75rem 2rem;
  padding-block: 1.5rem 2rem;
  border-top: 1px solid var(--filete-oscuro);
  font-size: .8125rem;
}
.pie__legal { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; list-style: none; margin: 0; padding: 0; }

/* ==========================================================================
   10. Ajustes por ancho (siempre al final)
   ========================================================================== */
@media (min-width: 40em) {
  .modalidades { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .modalidad { padding: 1.5rem 0 1.75rem; }
  /* modalidades abiertas y sin flecha desde pantallas medianas */
  .modalidad__resumen { cursor: default; pointer-events: none; }
  .modalidad__resumen::after { display: none; }
  .modalidad__resumen .icono { grid-row: 1; }
  .destinos__mapa { display: block; max-width: 40rem; }
  .destinos__indice { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .w-hermanas__enlaces { columns: 3 12rem; column-gap: 2rem; }
  .pie__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .paso { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .paso::before { font-size: 2.75rem; }
  .w-datos__fila { grid-template-columns: 11rem minmax(0, 1fr); gap: .25rem 1rem; padding: .8rem 0; }
  /* Tarjetas de destino: número grande encima del nombre, como en el mapa */
  .destino { padding: 1.1rem 1.25rem .9rem; }
  .destino__nombre { flex-direction: column; align-items: stretch; gap: .35rem; }
  .destino__nombre::before { font-size: 2rem; }
  .bloque-cotizar__widget:has(.w-cotizador) .bloque-cotizar__pasos { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 1.25rem; }
  .bloque-cotizar__widget:has(.w-cotizador) .bloque-cotizar__pasos li { border-top-width: 2px; border-top-color: var(--tinta); }
}

@media (min-width: 60em) {
  .cabecera__in { flex-wrap: nowrap; min-height: 5rem; }
  .js .menu-boton { display: none; }
  .menu,
  .js .menu {
    position: static;
    display: flex;
    flex-direction: row;
    flex-basis: auto;
    align-items: center;
    gap: 1.75rem;
    padding: 0;
    max-height: none;
    overflow: visible;
    background: none;
    border: 0;
    box-shadow: none;
  }
  .menu__lista { display: flex; gap: 1.75rem; }
  .menu__lista li { border: 0; }
  .menu__enlace {
    position: relative;
    padding: .4rem 0;
    font-size: 1.0625rem;
  }
  .menu__enlace::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 2px;
    background: var(--naranja);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .25s var(--curva);
  }
  .menu__enlace:hover::after,
  .menu__enlace[aria-current]::after,
  .menu__desplegable[open] > .menu__enlace::after { transform: scaleX(1); }
  .menu__enlace--grupo { justify-content: flex-start; }
  .menu__desplegable { position: relative; }
  .submenu {
    position: absolute;
    top: calc(100% + 1.1rem);
    left: 50%;
    z-index: 60;
    width: 20rem;
    padding: 1rem 1.25rem 1.1rem;
    background: var(--blanco);
    border: 1px solid var(--tinta);
    border-top: 3px solid var(--naranja);
    border-radius: var(--radio);
    box-shadow: 0 22px 40px -24px rgba(30, 30, 30, .55);
    transform: translateX(-50%);
  }
  .submenu li + li { margin-top: .15rem; }
  .submenu--columnas { width: 31rem; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
  .submenu--columnas .submenu__todos { grid-column: 1 / -1; margin-bottom: .35rem; }
  .menu__tel { display: none; padding-left: 1.75rem; border-left: 1px solid var(--filete); }
  .menu__cta { align-self: auto; min-height: 2.75rem; padding-block: .6rem; }

  .seccion__cabeza--lado {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 0 clamp(2rem, 5vw, 5rem);
    max-width: none;
    align-items: end;
  }
  .seccion__cabeza--lado .rotulo { grid-column: 1 / -1; }
  .seccion__cabeza--lado .seccion__entrada { margin-top: 0; }

  .prosa--columnas { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); column-rule: 1px solid var(--filete); }

  .dos-col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .asimetrico { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .asimetrico--invertido { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }

  .contrata {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: start;
  }

  .faq-portada {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: clamp(2rem, 5vw, 5rem);
  }
  .faq-portada .seccion__cabeza { margin: 0; }

  /* Cabecera por defecto (contacto…): la foto ocupa las filas del titular y del
     texto y se estira a su altura; la ficha va debajo, en franja */
  .cabeza__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "titular foto" "texto foto" "datos datos";
    row-gap: clamp(1.5rem, 2.5vw, 2rem);
  }
  .cabeza__foto { align-self: stretch; display: flex; flex-direction: column; }
  .cabeza__foto .w-foto { flex: 1; display: flex; flex-direction: column; }
  .cabeza__foto .w-foto img { flex: 1 1 auto; height: 0; min-height: 15rem; aspect-ratio: auto; }

  /* Ficha en franja horizontal (región y por defecto): una columna por dato */
  body:not([class*="servicio"], [class*="ciudad"], [class*="provincia"], [class*="division"]) .cabeza .w-datos {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    border-bottom: 1px solid var(--tinta);
  }
  body:not([class*="servicio"], [class*="ciudad"], [class*="provincia"], [class*="division"]) .cabeza .w-datos__fila {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: .2rem;
    padding: .9rem 1.25rem 1rem;
    border-bottom: 0;
    border-left: 1px solid var(--filete);
  }
  body:not([class*="servicio"], [class*="ciudad"], [class*="provincia"], [class*="division"]) .cabeza .w-datos__fila:first-child { padding-left: 0; border-left: 0; }

  /* Región: titular y entradilla a la izquierda, plano grande a la derecha a su
     altura; la ficha en franja debajo */
  body[class*="region"] .cabeza__rejilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "titular plano" "texto plano" "datos datos";
  }
  body[class*="region"] .cabeza__plano { align-self: center; width: 100%; max-width: 40rem; justify-self: end; }

  /* Condado: titular y entradilla a la par; debajo, foto a sangre con la ficha en
     tarjeta a la derecha y el plano de situación arriba a la izquierda */
  body:is([class*="provincia"], [class*="division"]) .cabeza__rejilla {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-rows: auto auto;
    grid-template-areas: "titular texto" "foto foto";
    align-items: end;
  }
  body:is([class*="provincia"], [class*="division"]) .cabeza__foto { align-self: stretch; }
  body:is([class*="provincia"], [class*="division"]) .cabeza__foto .w-foto img { min-height: clamp(26rem, 42vw, 38rem); aspect-ratio: auto; }
  body:is([class*="provincia"], [class*="division"]) .cabeza__foto figcaption {
    max-width: 55%;
    padding-inline: max(var(--margen), calc(50cqw - var(--ancho) / 2 + var(--margen)));
  }
  body:is([class*="provincia"], [class*="division"]) .cabeza__datos {
    grid-area: foto;
    align-self: end;
    justify-self: end;
    width: min(28rem, 45%);
    margin: 2rem 0 3.5rem;
  }
  body:is([class*="provincia"], [class*="division"]) .cabeza__plano {
    display: block;
    grid-area: foto;
    align-self: start;
    justify-self: start;
    position: relative;
    z-index: 1;
    width: min(17rem, 30%);
    margin-top: 2rem;
    padding: .6rem .75rem;
    background: var(--papel);
    border-top: 3px solid var(--naranja);
    box-shadow: 0 18px 36px -24px rgba(30, 30, 30, .55);
  }

  /* Ciudad: titular a todo el ancho arriba; debajo, el plano con la ciudad
     señalada a la izquierda y texto con la ficha a la derecha */
  body[class*="ciudad"] .cabeza__rejilla {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "titular titular" "plano texto" "plano datos";
  }
  body[class*="ciudad"] .cabeza__h1 { max-width: 24ch; }
  body[class*="ciudad"] .cabeza__plano { align-self: start; }

  /* Servicio: titular a todo el ancho; texto y ficha a la izquierda, foto
     apaisada (ancha y poco alta) a la derecha, sin estirarse */
  body[class*="servicio"] .cabeza__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "titular titular" "texto foto" "datos foto";
  }
  body[class*="servicio"] .cabeza__h1 { max-width: 22ch; }
  body[class*="servicio"] .cabeza__foto { align-self: start; }
  body[class*="servicio"] .cabeza__foto .w-foto img { height: auto; min-height: 0; flex: none; aspect-ratio: 3 / 2; }

  /* Sin foto (condado, servicio, contacto): titular arriba; texto y ficha a la par
     en servicio y condado, una columna en el resto. Región y ciudad no usan foto */
  body:not([class*="region"], [class*="ciudad"]) .cabeza__rejilla:not(:has(.cabeza__foto img)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "titular" "texto" "datos"; }
  body:is([class*="servicio"], [class*="provincia"], [class*="division"]) .cabeza__rejilla:not(:has(.cabeza__foto img)) {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    grid-template-areas: "titular titular" "texto datos";
  }
  body:is([class*="provincia"], [class*="division"]) .cabeza__rejilla:not(:has(.cabeza__foto img)) .cabeza__plano { display: none; }
  body:is([class*="provincia"], [class*="division"]) .cabeza__rejilla:not(:has(.cabeza__foto img)) .cabeza__datos { grid-area: datos; width: auto; margin: 0; }
  .cabeza__rejilla:not(:has(.cabeza__foto img)) .cabeza__h1 { max-width: 22ch; }

  /* Destinos: titular de la sección a la izquierda, mapa grande a la derecha;
     las tarjetas debajo, a todo el ancho */
  .destinos { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .destinos__mapa { max-width: none; }

  .bloque-cotizar__rejilla:not(:has(.w-cotizador)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }

  /* Secciones del documento: titular en su columna, texto en la otra */
  .cuerpo > .w-seccion,
  .cuerpo > .w-faq {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    column-gap: clamp(2rem, 5vw, 5rem);
    row-gap: 0;
    align-items: start;
  }
  .cuerpo > .w-seccion > h2,
  .cuerpo > .w-faq > h2 {
    grid-column: 1;
    grid-row: 1 / span 40;
    position: sticky;
    top: 6.5rem;
    margin-bottom: 0;
  }
  .cuerpo > .w-seccion > :not(h2),
  .cuerpo > .w-faq > :not(h2) { grid-column: 2; }
  .cuerpo > .w-seccion > h3:first-of-type { margin-top: 0; }

  .pie__in { grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 3fr); }
}

@media (min-width: 75em) {
  .heroe__rejilla {
    grid-template-columns: minmax(0, 1fr) minmax(37.5rem, 40rem);
    grid-template-rows: auto 1fr;
    grid-template-areas: "texto cotizar" "mas cotizar";
    row-gap: 0;
  }
  /* Las dos columnas arrancan en la misma línea: filete de 3 px y el mismo aire
     encima del texto y encima del cotizador */
  .heroe__texto { padding-top: .9rem; border-top: 3px solid var(--tinta); }
  .heroe__rotulo { margin: 0 0 1rem; }
  .heroe__mas { padding-top: 2rem; }
  .menu__tel { display: inline-flex; }
  .modalidades { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* Nombres de una o dos líneas: la cifra de las cuatro arranca a la misma altura */
  .modalidad__nombre { min-height: 2.2em; align-self: start; }
  .w-hermanas__enlaces { columns: 4 12rem; }
  /* Cotizador: titular y formulario en la columna del H1; la explicación al lado */
  .paso-cotizador__rejilla {
    grid-template-columns: minmax(0, 51.25rem) minmax(0, 1fr);
    grid-template-areas: "cabeza lado" "marco lado";
  }
  .paso-cotizador__lado { position: sticky; top: 7rem; padding-top: .9rem; border-top: 3px solid var(--naranja); }
  .bloque-cotizar__rejilla { grid-template-columns: minmax(0, 1fr) minmax(0, 47.5rem); }
  .bloque-cotizar__rejilla:not(:has(.w-cotizador)) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bloque-cotizar__rejilla:has(.w-cotizador) .bloque-cotizar__lado { position: sticky; top: 7rem; }
  .destinos { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
  .destinos__indice { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.25rem; }
}

/* Tablas en móvil: cada fila se apila (concepto arriba, valores debajo con su
   etiqueta de columna); nada de scroll oculto ni texto cortado */
@media (max-width: 39.99em) {
  /* Portada en móvil: el cotizador sube a la primera pantalla. Entradilla de una
     frase, sin botón que lleve a lo que ya está debajo (el teléfono sigue en la
     ficha y en el menú) */
  .heroe { padding-top: 1rem; }
  .heroe__titulo { margin-bottom: 1rem; }
  .heroe__rejilla { row-gap: 1.25rem; }
  .heroe__principal,
  .heroe__resto { display: none; }
  .heroe__rotulo { margin-bottom: .6rem; padding-top: .6rem; }
  .w-tabla { overflow: visible; background: none; border-bottom: 0; }
  .w-tabla table { min-width: 0; }
  .w-tabla table,
  .w-tabla tbody,
  .w-tabla tr,
  .w-tabla tbody th,
  .w-tabla td { display: block; width: 100%; }
  .w-tabla thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  .w-tabla tbody tr,
  .w-tabla tbody tr:nth-child(even) { padding: .85rem 0; background: none; border-bottom: 1px solid var(--filete); }
  .w-tabla tbody tr:last-child { border-bottom: 0; }
  .w-tabla tbody th,
  .w-tabla td { padding: 0; border: 0; }
  .w-tabla tbody tr > :first-child {
    margin-bottom: .3rem;
    font-family: var(--f-titulo);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--tinta);
  }
  .w-tabla tbody tr > :not(:first-child) + :not(:first-child) { margin-top: .35rem; }
  .w-tabla tbody tr > :not(:first-child)[data-etiqueta]::before {
    content: attr(data-etiqueta);
    display: block;
    font-family: var(--f-texto);
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--gris);
  }
}

@media (max-width: 23.99em) {
  .marca__l2 { font-size: 1.1875rem; }
  .marca__signo { width: 2rem; height: 2rem; }
  .menu-boton__texto { display: none; }
}

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