/* =========================================================================
   Enviar paquete a Luxemburgo · estilo propio
   Paleta «Cielo claro y ladrillo» · Unbounded (títulos) + Onest (texto)
   Maqueta: mosaico asimétrico de teselas, fotos y bloques de color.
   ========================================================================= */

:root {
  /* Paleta base */
  --cielo: #EAF4FB;
  --cielo-2: #D7E9F5;
  --cielo-3: #BFDAEC;
  --tinta: #13293D;
  --tinta-2: #3F5468;
  --ladrillo: #9C3D23;
  --ladrillo-osc: #7E2F1A;
  --ladrillo-claro: #F5E2DA;
  --ladrillo-luz: #F4B9A5;
  --acento: #247BA0;
  --acento-tinta: #1B6A8C;
  --acento-claro: #8FCBE8;
  --papel: #FFFFFF;
  --linea: #CFE0EC;
  --niebla: #D5E6F2;

  /* Retícula */
  --ancho: 1240px;
  --margen: clamp(1rem, 4vw, 2.5rem);
  --hueco: clamp(.625rem, 1.2vw, .875rem);
  --radio: clamp(14px, 1.6vw, 22px);
  --sombra: 0 22px 44px -26px rgba(19, 41, 61, .38);

  --fuente-titulo: "Unbounded", "Segoe UI", system-ui, sans-serif;
  --fuente-texto: "Onest", "Segoe UI", system-ui, -apple-system, sans-serif;

  --flecha: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%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: 5.5rem;
}

body {
  margin: 0;
  background: var(--cielo);
  color: var(--tinta);
  font-family: var(--fuente-texto);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3 {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.022em;
  color: inherit;
  margin: 0 0 .65em;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
  overflow-wrap: normal;
}
h1 { font-size: clamp(1.3rem, .55rem + 3.4vw, 3rem); }
h2 { font-size: clamp(1.35rem, .9rem + 1.9vw, 2.25rem); }
h3 { font-size: clamp(1.02rem, .95rem + .35vw, 1.2rem); font-weight: 500; line-height: 1.3; }

p { margin: 0 0 1em; }
strong { font-weight: 600; }

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

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

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

.saltar {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 100;
  background: var(--tinta);
  color: #fff;
  padding: .7rem 1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}
.saltar:focus { top: 1rem; color: #fff; }

.icono {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Botones ---------- */
.boton,
.w-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: .82rem;
  line-height: 1.2;
  letter-spacing: -.005em;
  padding: .95rem 1.35rem;
  border-radius: 999px;
  border: 2px solid var(--ladrillo);
  background: var(--ladrillo);
  color: #fff;
  text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.boton::after,
.w-cta::after {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.boton:hover,
.w-cta:hover { background: var(--ladrillo-osc); border-color: var(--ladrillo-osc); color: #fff; }
.boton:hover::after,
.w-cta:hover::after { transform: translateX(3px); }
.boton:active,
.w-cta:active { transform: translateY(1px); }

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

.boton--blanco { background: #fff; border-color: #fff; color: var(--ladrillo); }
.boton--blanco:hover { background: var(--cielo); border-color: var(--cielo); color: var(--ladrillo-osc); }

.boton--borde-claro { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; }
.boton--borde-claro::after { display: none; }
.boton--borde-claro:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }

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

/* ---------- Cabecera y menú ---------- */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(234, 244, 251, .94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--linea);
  transition: box-shadow .25s ease;
}
.cabecera--sombra { box-shadow: 0 10px 30px -22px rgba(19, 41, 61, .55); }

.cabecera__in {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  min-height: 4.5rem;
}

.marca {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  color: var(--tinta);
  text-decoration: none;
  min-width: 0;
}
.marca:hover { color: var(--tinta); }
.marca__sello { width: 2.875rem; height: 2.875rem; flex: none; transition: transform .35s ease; }
.marca:hover .marca__sello { transform: rotate(-8deg); }
.marca__nombre {
  display: flex;
  flex-direction: column;
  font-family: var(--fuente-titulo);
  font-weight: 800;
  font-size: .98rem;
  line-height: 1.12;
  letter-spacing: -.025em;
  white-space: nowrap;
}
.marca__nombre span:last-child { color: var(--ladrillo); }

.menu { display: flex; align-items: center; gap: 1.25rem; }

.menu__lista {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.menu__lista a,
.desplegable > summary {
  display: block;
  font-family: var(--fuente-titulo);
  font-size: .76rem;
  font-weight: 500;
  letter-spacing: -.005em;
  color: var(--tinta);
  text-decoration: none;
  padding: .6rem .8rem;
  /* Subrayado ladrillo para el paso del ratón y la sección activa */
  background: linear-gradient(var(--ladrillo), var(--ladrillo)) no-repeat .8rem calc(100% - .25rem) / 0 2px;
  transition: background-size .25s ease, color .2s ease;
}
.menu__lista a:hover,
.desplegable > summary:hover { color: var(--ladrillo); background-size: calc(100% - 1.6rem) 2px; }
.menu__lista a[aria-current="page"] { color: var(--ladrillo); font-weight: 600; background-size: calc(100% - 1.6rem) 2px; }

.desplegable { position: relative; }
.desplegable > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
  cursor: pointer;
}
.desplegable > summary::-webkit-details-marker { display: none; }
.desplegable > summary::after {
  content: "";
  width: .42rem;
  height: .42rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}
.desplegable[open] > summary::after { transform: translateY(1px) rotate(225deg); }
.desplegable[open] > summary { color: var(--ladrillo); background-size: calc(100% - 1.6rem) 2px; }

.desplegable__lista {
  position: absolute;
  top: calc(100% + .55rem);
  left: 0;
  min-width: 16.5rem;
  list-style: none;
  margin: 0;
  padding: .5rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 16px;
  box-shadow: var(--sombra);
}
.menu__lista .desplegable__lista a {
  font-family: var(--fuente-texto);
  font-size: .98rem;
  font-weight: 500;
  border-radius: 10px;
  padding: .65rem .85rem;
  background: none;
  transition: background-color .2s ease, color .2s ease;
}
.menu__lista .desplegable__lista a:hover,
.menu__lista .desplegable__lista a[aria-current="page"] { background: var(--cielo); }
.desplegable__lista li:last-child { border-top: 1px solid var(--linea); margin-top: .35rem; padding-top: .35rem; }
.menu__lista .desplegable__lista li:last-child a { color: var(--acento-tinta); font-weight: 600; }

.boton--menu { padding: .75rem 1.1rem; font-size: .76rem; }

.menu-boton {
  display: none;
  align-items: center;
  gap: .6rem;
  font-family: var(--fuente-titulo);
  font-size: .75rem;
  font-weight: 600;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 999px;
  padding: .65rem 1rem;
  cursor: pointer;
}
.menu-boton__icono,
.menu-boton__icono::before,
.menu-boton__icono::after {
  display: block;
  width: 1.05rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  transition: transform .25s ease, background-color .2s ease;
}
.menu-boton__icono { position: relative; }
.menu-boton__icono::before,
.menu-boton__icono::after { content: ""; position: absolute; left: 0; }
.menu-boton__icono::before { top: -6px; }
.menu-boton__icono::after { top: 6px; }
.menu-boton[aria-expanded="true"] .menu-boton__icono { background: transparent; }
.menu-boton[aria-expanded="true"] .menu-boton__icono::before { transform: translateY(6px) rotate(45deg); }
.menu-boton[aria-expanded="true"] .menu-boton__icono::after { transform: translateY(-6px) rotate(-45deg); }

/* ---------- Componentes comunes ---------- */
.w-antetitulo {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.25rem;
  font-family: var(--fuente-titulo);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ladrillo);
}
.w-antetitulo::before {
  content: "";
  width: 1.75rem;
  height: 2px;
  flex: none;
  background: currentColor;
}

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

.numeral {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 0 0 1.1rem;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--acento-tinta);
}
.numeral::after {
  content: "";
  width: 3rem;
  height: 1px;
  background: var(--acento);
}

/* Tesela: la pieza del mosaico */
.tesela {
  position: relative;
  border-radius: var(--radio);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}
.tesela__rotulo {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1rem;
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
}
.tesela__rotulo::before {
  content: "";
  width: .5rem;
  height: .5rem;
  flex: none;
  background: currentColor;
  transform: rotate(45deg);
}
.tesela__frase {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.3rem);
  line-height: 1.32;
  letter-spacing: -.015em;
  text-wrap: balance;
  -webkit-hyphens: none;
  hyphens: none;
}
.tesela--papel { background: var(--papel); }
.tesela--ladrillo-claro { background: var(--ladrillo-claro); }
.tesela--marino { background: var(--tinta); color: #fff; }
.tesela--marino .tesela__rotulo { color: var(--acento-claro); }

/* ---------- Portada: héroe en mosaico ---------- */
.heroe { padding-block: clamp(1rem, 2.5vw, 2rem) clamp(3rem, 6vw, 5rem); }

.mosaico {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
}

.tesela--titulo {
  grid-column: 1 / 9;
  grid-row: 1;
  background: var(--papel);
  padding: clamp(1.25rem, 4vw, 3.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Titular de portada en tres líneas como mucho: tesela más ancha y cuerpo contenido */
.tesela--titulo h1 { margin-bottom: .55em; font-size: clamp(1.3rem, .6rem + 2.1vw, 2.2rem); line-height: 1.14; }

.heroe__acciones {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin: 1.75rem 0 0;
}

.tesela--foto {
  grid-column: 9 / 13;
  grid-row: 1;
  margin: 0;
  padding: 0;
  overflow: hidden;
  min-height: 22rem;
  background: var(--cielo-3);
}
.tesela--foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.tesela--cotizador {
  grid-column: 1 / 9;
  grid-row: 2 / 4;
  background: var(--cielo-2);
  border: 1px solid var(--cielo-3);
  padding: clamp(.75rem, 2vw, 1.75rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tesela--cotizador .tesela__rotulo { color: var(--acento-tinta); align-self: stretch; justify-content: center; }
.tesela--cotizador .w-cotizador {
  width: 100%;
  max-width: 47.5rem;
  min-height: 32.5rem;
  margin-inline: auto;
}

.tesela--cifras {
  grid-column: 9 / 13;
  grid-row: 2;
  background: var(--ladrillo);
  color: #fff;
}
.tesela--cifras .tesela__rotulo { color: #FBE3DA; }

.cifras { display: grid; gap: 0; margin: 0; }
.cifras > div {
  display: flex;
  flex-direction: column-reverse;
  gap: .2rem;
  padding-block: .85rem;
  border-top: 1px solid rgba(255, 255, 255, .3);
}
.cifras > div:last-child { padding-bottom: 0; }
.cifras dd {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-weight: 700;
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.cifras dt { font-size: .95rem; line-height: 1.4; color: #fff; }

.tesela--ruta {
  grid-column: 9 / 13;
  grid-row: 3;
  background: var(--tinta);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
}
.tesela--ruta .tesela__rotulo { color: var(--acento-claro); }
.tesela--ruta .icono { width: 2.25rem; height: 2.25rem; color: var(--acento-claro); margin-bottom: .25rem; }
.tesela--ruta p { margin: 0; }
.tesela--ruta .tesela__nota { color: var(--niebla); font-size: .98rem; }
.tesela--ruta a { color: #fff; font-weight: 600; white-space: nowrap; }
.tesela--ruta a:hover { color: var(--acento-claro); }

/* ---------- Portada: secciones ---------- */
.seccion { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.seccion__texto p { max-width: 62ch; }

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

.foto-tesela {
  margin: 2.25rem 0 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--cielo-3);
}
.foto-tesela img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Pasos numerados */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--hueco);
  counter-reset: paso;
}
.paso {
  position: relative;
  counter-increment: paso;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio);
  padding: clamp(1.4rem, 2.5vw, 1.9rem);
  transition: transform .25s ease, border-color .25s ease;
}
.paso:nth-child(even) { margin-top: 2.5rem; }
.paso:hover { transform: translateY(-3px); border-color: var(--cielo-3); }
.paso::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 700;
  color: var(--acento-tinta);
}
.paso .icono {
  width: 2.9rem;
  height: 2.9rem;
  padding: .65rem;
  margin-bottom: 1.4rem;
  border-radius: 14px;
  background: var(--cielo);
  color: var(--ladrillo);
}
.paso__titulo { font-size: 1.02rem; font-weight: 600; margin-bottom: .5rem; padding-right: 2rem; }
.paso p { margin: 0; font-size: 1rem; color: var(--tinta-2); }
.paso:first-child { background: var(--tinta); color: #fff; }
.paso:first-child::before { color: var(--acento-claro); }
.paso:first-child .icono { background: rgba(143, 203, 232, .14); color: var(--acento-claro); }
.paso:first-child p { color: var(--niebla); }

/* Banda de color */
.banda { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.banda--cielo { background: var(--cielo-2); }

.foto-alta {
  position: relative;
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  min-height: 24rem;
  height: 100%;
  background: var(--cielo-3);
}
.foto-alta img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.foto-alta__sello {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  margin: 0;
  max-width: calc(100% - 2rem);
  background: var(--ladrillo);
  color: #fff;
  border-radius: 14px;
  padding: .9rem 1.1rem;
  font-family: var(--fuente-titulo);
  font-size: .82rem;
  font-weight: 600;
  line-height: 1.35;
}
.foto-alta__sello strong { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -.03em; line-height: 1.05; }

/* Banda de foto a todo ancho */
.banda-foto {
  position: relative;
  display: grid;
  align-items: end;
  min-height: clamp(22rem, 46vw, 36rem);
  background: var(--tinta);
}
.banda-foto > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.banda-foto .contenedor { position: relative; padding-block: clamp(1.25rem, 4vw, 3rem); }
.banda-foto__placa {
  max-width: 35rem;
  background: var(--tinta);
  color: #fff;
  border-radius: var(--radio);
  padding: clamp(1.25rem, 3vw, 2rem);
}
.banda-foto__placa .tesela__rotulo { color: var(--acento-claro); }
.banda-foto__placa .tesela__frase { margin: 0; font-size: clamp(1.05rem, .9rem + .8vw, 1.5rem); }

/* Bloque asimétrico (plazos) */
.asimetrico {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--hueco) clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.asimetrico__texto { grid-row: span 2; }
.asimetrico__texto p { max-width: 62ch; }

.tesela--urgente {
  display: flex;
  flex-direction: column;
  gap: .9rem;
  background: var(--acento);
  color: #fff;
  text-decoration: none;
  transition: background-color .25s ease, transform .25s ease;
}
.tesela--urgente:hover { background: var(--acento-tinta); color: #fff; transform: translateY(-3px); }
.tesela--urgente .icono { width: 2.4rem; height: 2.4rem; }
.tesela--urgente .tesela__rotulo { margin: 0; color: #fff; }
.tesela__enlace {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: .25rem;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}
.tesela__enlace::after {
  content: "";
  width: 1em;
  height: 1em;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.tesela--urgente:hover .tesela__enlace::after { transform: translateX(4px); }

.tesela--recogida { background: var(--papel); }
.tesela--recogida .icono { width: 2.4rem; height: 2.4rem; color: var(--ladrillo); margin-bottom: 1rem; }
.tesela--recogida .tesela__rotulo { color: var(--ladrillo); }
.tesela--recogida p:last-child { margin: 0; color: var(--tinta-2); }

/* Índice de destinos */
.destinos {
  background: var(--papel);
  border-block: 1px solid var(--linea);
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
}
.destinos__cabeza {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.destinos__cabeza h2 { margin: 0; }
.destinos__cabeza p:last-child { margin: 0; color: var(--tinta-2); max-width: 52ch; }

/* Mosaico de distritos: el del sur, grande con foto; el norte, tesela apaisada; el este, bloque marino */
.destinos__rejilla {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
}

.distrito {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--cielo);
  border-radius: var(--radio);
  overflow: hidden;
}
.distrito--sur { grid-column: 1 / 7; grid-row: 1 / 3; }
.distrito--norte { grid-column: 7 / 13; grid-row: 1; flex-direction: row; }
.distrito--este { grid-column: 7 / 13; grid-row: 2; background: var(--tinta); color: #fff; }

.distrito__foto {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  background: var(--cielo-3);
}
.distrito__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.distrito--norte .distrito__foto { flex: 0 0 40%; aspect-ratio: auto; }

/* Cifra del distrito: sello ladrillo sobre la foto */
.distrito__cifra {
  margin: 0;
  font-family: var(--fuente-titulo);
  font-size: .8rem;
  font-weight: 600;
  line-height: 1.2;
}
.distrito__cifra strong { display: block; font-size: 2.1rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.distrito__foto .distrito__cifra {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  background: var(--ladrillo);
  color: #fff;
}
.distrito--este .distrito__cifra { float: right; margin: 0 0 .5rem 1rem; text-align: right; color: var(--niebla); }
.distrito--este .distrito__cifra strong { font-size: clamp(2.6rem, 2rem + 2vw, 3.6rem); color: var(--ladrillo-luz); }

.distrito__cuerpo { flex: 1 1 auto; min-width: 0; padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.distrito__num {
  margin: 0 0 .5rem;
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ladrillo);
}
.distrito__nombre {
  margin: 0 0 .5rem;
  font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.2;
}
.distrito__dato { margin: 0 0 1.1rem; font-size: 1rem; line-height: 1.5; color: var(--tinta-2); max-width: 46ch; }
.distrito--este .distrito__num { color: var(--acento-claro); }
.distrito--este .distrito__dato { color: var(--niebla); }

.distrito__enlace {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.1rem;
  padding: .8rem 1rem;
  background: var(--papel);
  border-radius: 12px;
  color: var(--ladrillo);
  font-weight: 600;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}
.distrito__enlace::after {
  content: "";
  width: 1.05em;
  height: 1.05em;
  flex: none;
  background: currentColor;
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
}
.distrito__enlace:hover { background: var(--ladrillo); color: #fff; }
.distrito--este .distrito__enlace { background: rgba(255, 255, 255, .1); color: #fff; }
.distrito--este .distrito__enlace:hover { background: var(--ladrillo); }

/* Índice secundario del distrito: cantones en dos columnas y, debajo, sus ciudades en texto menor */
.distrito__indice { clear: both; }
.distrito__indice > summary {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .35rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.distrito__indice > summary::-webkit-details-marker { display: none; }
.distrito__indice > summary::after {
  content: "";
  width: .4rem;
  height: .4rem;
  margin-top: -.2rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}
.distrito__indice[open] > summary::after { margin-top: .2rem; transform: rotate(225deg); }
.distrito--este .distrito__indice > summary { color: var(--acento-claro); }

.cantones {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: canton;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 1.25rem;
  align-items: start;
}
.cantones > li { counter-increment: canton; padding-block: .55rem; border-top: 1px solid var(--cielo-3); }
.cantones > li > a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: .98rem;
  font-weight: 600;
  color: var(--tinta);
  text-decoration: none;
}
.cantones > li > a::before {
  content: counter(canton, decimal-leading-zero);
  font-family: var(--fuente-titulo);
  font-size: .64rem;
  font-weight: 700;
  color: var(--acento-tinta);
  min-width: 1.25rem;
}
.cantones > li > a:hover { color: var(--ladrillo); text-decoration: underline; }
.distrito--este .cantones > li { border-color: rgba(213, 230, 242, .22); }
.distrito--este .cantones > li > a { color: #fff; }
.distrito--este .cantones > li > a::before { color: var(--acento-claro); }
.distrito--este .cantones > li > a:hover { color: var(--acento-claro); }

/* Ciudades: un nivel menor, en línea bajo su cantón */
.ciudades {
  list-style: none;
  margin: .3rem 0 0 1.85rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0 .2rem;
  font-size: .9rem;
  line-height: 1.6;
}
.ciudades li + li::before { content: "·"; margin-right: .2rem; color: var(--acento-tinta); }
.ciudades a { color: var(--tinta-2); text-decoration: none; }
.ciudades a:hover { color: var(--ladrillo); text-decoration: underline; }

/* Bento de precio, pago y seguro */
.seccion__intro {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 1rem clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}
.seccion__intro h2 { margin: 0; }
.seccion__intro p:last-child { margin: 0; color: var(--tinta-2); }

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
  margin-top: clamp(2rem, 4vw, 3rem);
}
.bento > * { margin: 0; }
.bento__a { grid-column: 1 / 8; }
.bento__b { grid-column: 8 / 13; }
.bento__d { grid-column: 1 / -1; }
.bento .icono { width: 2.5rem; height: 2.5rem; color: var(--ladrillo); margin-bottom: 1.25rem; }
.bento h3 { font-weight: 600; margin-bottom: .55rem; }
.bento p { margin: 0; color: var(--tinta-2); max-width: 54ch; }
.bento .tesela--marino .icono { color: var(--acento-claro); }
.bento .tesela--marino p { color: var(--niebla); }
.bento__d { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem 2rem; align-items: end; }
.tel-grande {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: clamp(1.15rem, .95rem + 1vw, 1.7rem);
  letter-spacing: -.025em;
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid var(--acento-claro);
  padding-bottom: .2rem;
}
.tel-grande:hover { color: var(--acento-claro); }

/* Galería de la mercancía */
.galeria {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
}
.galeria__texto {
  grid-column: 1 / 6;
  grid-row: 1 / 3;
  background: var(--papel);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.galeria__texto::before {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(1.5rem, 3vw, 2.25rem);
  width: 3.5rem;
  height: 4px;
  background: var(--ladrillo);
  border-radius: 0 0 3px 3px;
}
.galeria__texto p:last-child { margin: 0; }
.galeria__linea {
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: clamp(1rem, .95rem + .35vw, 1.2rem);
  line-height: 1.4;
  color: var(--ladrillo);
}
.galeria__foto {
  margin: 0;
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--cielo-3);
}
.galeria__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.galeria__foto:hover img { transform: scale(1.03); }
.galeria__foto--a { grid-column: 6 / 13; grid-row: 1; aspect-ratio: 16 / 8; }
.galeria__foto--b { grid-column: 6 / 10; grid-row: 2; aspect-ratio: 4 / 3; }
.galeria__foto--c { grid-column: 10 / 13; grid-row: 2; }

/* Cierre de la portada */
.cierre { padding-bottom: clamp(3.5rem, 8vw, 6rem); }
.cierre__tesela {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 1.5rem clamp(2rem, 5vw, 4rem);
  align-items: end;
  padding: clamp(1.75rem, 5vw, 4rem);
  border-radius: var(--radio);
  background: var(--ladrillo);
  color: #fff;
}
.cierre__tesela::after {
  content: "";
  position: absolute;
  right: -6rem;
  top: -6rem;
  width: 20rem;
  height: 20rem;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 0 0 3rem rgba(255, 255, 255, .04), 0 0 0 6rem rgba(255, 255, 255, .03);
  pointer-events: none;
}
.cierre__tesela > * { position: relative; z-index: 1; }
.cierre__tesela h2 { margin: 0 0 .5em; color: #fff; }
.cierre__tesela p { margin: 0; font-size: 1.08rem; color: #fff; }
.cierre__acciones { display: flex; flex-wrap: wrap; gap: .75rem; }

.cierre__servicios {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--hueco);
  margin-top: var(--hueco);
}
.servicio {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 10.5rem;
  padding: 1.5rem;
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.servicio:hover { color: var(--tinta); transform: translateY(-3px); border-color: var(--cielo-3); box-shadow: var(--sombra); }
.servicio__nombre { font-family: var(--fuente-titulo); font-weight: 600; font-size: .95rem; line-height: 1.3; }
.servicio__texto { font-size: .98rem; color: var(--tinta-2); line-height: 1.45; }
.servicio::after {
  content: "";
  margin-top: auto;
  width: 1.2rem;
  height: 1.2rem;
  background: var(--ladrillo);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.servicio:hover::after { transform: translateX(4px); }

/* ---------- Páginas interiores ---------- */
.pag-heroe {
  padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(2rem, 5vw, 3.5rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
/* Héroe interior en mosaico de teselas sobre 12 columnas. La placa es el fondo de la tesela de texto:
   cubre texto y llamada, así la columna nunca se queda corta y el botón cae dentro del bloque.
   Aquí, el orden apilado (móvil); cada nivel del árbol tiene su composición en escritorio, al final del fichero. */
.pag-heroe__in {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--hueco);
  --placa-pad: clamp(1.25rem, 3.5vw, 3rem);
}
.pag-heroe__in > * { grid-column: 1 / -1; min-width: 0; }
.pag-heroe__placa {
  grid-row: 1 / 3;
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: inset 4px 0 0 var(--ladrillo);
}
.pag-heroe__texto { grid-row: 1; padding: var(--placa-pad) var(--placa-pad) 0; }
.pag-cotizar { grid-row: 2; align-self: end; padding: 1.5rem var(--placa-pad) var(--placa-pad); }
.pag-heroe__in:has(.pag-cotizar:empty) .pag-heroe__texto,
.pag-heroe__in:has(.pag-cotizar .w-cotizador) .pag-heroe__texto { padding-bottom: var(--placa-pad); }
.pag-heroe__foto { grid-row: 3; display: grid; }
.pag-heroe__datos { grid-row: 4; }
.pag-heroe__foto:empty,
.pag-heroe__datos:empty { display: none; }
.pag-heroe h1 { font-size: clamp(1.45rem, .9rem + 2.4vw, 2.6rem); max-width: 24ch; }

.pag-heroe .w-foto { position: relative; margin: 0; min-height: 15rem; border-radius: var(--radio); overflow: hidden; background: var(--cielo-3); }
.pag-heroe .w-foto img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
/* Los pies de foto que llegan describen la imagen (ya lo hace el alt): en el héroe no se muestran */
.pag-heroe .w-foto figcaption { display: none; }

.w-migas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .55rem;
  list-style: none;
  margin: 0 0 1.75rem;
  padding: 0;
  font-size: .9rem;
  line-height: 1.4;
}
.w-migas li { display: inline-flex; align-items: center; gap: .55rem; color: var(--tinta-2); }
.w-migas li + li::before {
  content: "";
  width: .38rem;
  height: .38rem;
  flex: none;
  border-top: 1.5px solid var(--acento);
  border-right: 1.5px solid var(--acento);
  transform: rotate(45deg);
}
.w-migas a { color: var(--acento-tinta); text-decoration: none; }
.w-migas a:hover { color: var(--ladrillo); text-decoration: underline; }
.w-migas [aria-current="page"] { color: var(--tinta); font-weight: 500; }

/* Ficha de datos */
.w-datos {
  margin: 0;
  padding: .5rem clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radio);
  background: linear-gradient(var(--ladrillo), var(--ladrillo)) top / 100% 5px no-repeat, var(--papel);
  box-shadow: var(--sombra);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.w-datos__fila {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr);
  gap: .35rem 1.25rem;
  padding-block: 1rem;
  border-bottom: 1px solid var(--linea);
}
.w-datos__fila:last-child { border-bottom: 0; }
.w-datos dt {
  padding-top: .2rem;
  font-family: var(--fuente-titulo);
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--acento-tinta);
}
.w-datos dd { margin: 0; font-weight: 500; line-height: 1.45; color: var(--tinta); }

/* Un tono y una composición de héroe por nivel del árbol, según la profundidad de las migas:
   servicio y contacto = placa de papel sobre cielo · distrito = marino · cantón = cielo · comuna = ladrillo claro */

/* Distrito (Inicio › distrito, con hijas): marino; la placa es un marino un punto más claro */
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) { background: var(--tinta); color: #fff; }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__placa { background: #1D3650; box-shadow: inset 4px 0 0 var(--ladrillo-luz); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-entradilla p { color: #E4EFF7; }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-entradilla a { color: var(--acento-claro); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-antetitulo { color: var(--ladrillo-luz); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-migas li { color: var(--niebla); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-migas li + li::before { border-color: var(--acento-claro); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-migas a { color: var(--acento-claro); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-migas a:hover { color: #fff; }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-migas [aria-current="page"] { color: #fff; }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-foto figcaption { color: var(--niebla); border-color: var(--ladrillo-luz); }
body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-cta { background: #fff; border-color: #fff; color: var(--ladrillo); }

/* Cantón (tres migas): cielo, texto sin placa y filete ladrillo bajo el título */
.pag-heroe:has(.w-migas li:nth-child(3):last-child) { background: var(--cielo-2); }
.pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__placa { background: none; box-shadow: none; }
.pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__in { --placa-pad: 0px; }
.pag-heroe:has(.w-migas li:nth-child(3):last-child) h1::after,
.pag-heroe:has(.w-migas li:nth-child(4)) h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin-top: .45em;
  border-radius: 2px;
  background: var(--ladrillo);
}

/* Comuna (cuatro migas o más): ladrillo claro, filete marino y ficha marina */
.pag-heroe:has(.w-migas li:nth-child(4)) { background: var(--ladrillo-claro); }
.pag-heroe:has(.w-migas li:nth-child(4)) h1::after { width: 2.5rem; background: var(--tinta); }
/* La ficha de la comuna es una tesela marina en dos columnas */
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.5rem;
  background: linear-gradient(var(--ladrillo-luz), var(--ladrillo-luz)) top / 100% 5px no-repeat, var(--tinta);
}
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos__fila { grid-template-columns: minmax(0, 1fr); gap: .15rem; border-bottom: 0; border-top: 1px solid rgba(213, 230, 242, .2); }
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos__fila:nth-child(-n + 2) { border-top: 0; }
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos__fila:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos dt { color: var(--acento-claro); }
.pag-heroe:has(.w-migas li:nth-child(4)) .w-datos dd { color: #fff; }

/* Cotizador o llamada a cotizar en el héroe interior */
.pag-cotizar:empty { display: none; }
.pag-cotizar .w-cta-linea { margin: 0; }
/* El cotizador completo ocupa siempre su propia fila a todo ancho, sea cual sea la composición del nivel */
.pag-heroe__in > .pag-cotizar:has(.w-cotizador) {
  grid-column: 1 / -1 !important;
  grid-row: 5 !important;
  align-self: auto !important;
  padding: 0 !important;
  margin-top: clamp(1rem, 3vw, 2rem);
}
.w-cotizador { scroll-margin-top: 5.5rem; }
/* La caja del cotizador es siempre clara: fija su tinta para no heredar el blanco de los héroes oscuros */
.pag-cotizar .w-cotizador {
  max-width: 52rem;
  margin-inline: auto;
  padding: clamp(1rem, 3vw, 2rem) clamp(.5rem, 2vw, 1.5rem);
  border-radius: var(--radio);
  background: var(--cielo-2);
  border: 1px solid var(--cielo-3);
  color: var(--tinta);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.w-cotizador__titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: 0 0 1.25rem;
  font-size: clamp(1.02rem, .95rem + .4vw, 1.25rem);
  text-align: center;
  color: var(--tinta);
}
.w-cotizador__titulo::before {
  content: "";
  width: .55rem;
  height: .55rem;
  flex: none;
  background: var(--ladrillo);
  transform: rotate(45deg);
}
.w-cotizador > [data-cotizador-one] { width: 100%; max-width: 47.5rem; min-height: 32.5rem; margin-inline: auto; }

/* Cuerpo de la página */
.pag-cuerpo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 19rem;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  padding-bottom: clamp(3rem, 6vw, 5rem);
}
.pag-cuerpo__principal { min-width: 0; max-width: 46rem; counter-reset: seccion; }
.pag-cuerpo__lateral { position: sticky; top: 6rem; display: grid; gap: var(--hueco); }

.lateral { border-radius: var(--radio); padding: 1.5rem; }
.lateral--papel { background: var(--papel); }
.lateral--marino { background: var(--tinta); color: #fff; }
.lateral .tesela__rotulo { color: var(--ladrillo); }
.lateral--marino .tesela__rotulo { color: var(--acento-claro); }
.lateral__pasos { list-style: none; margin: 0 0 1.25rem; padding: 0; counter-reset: lp; }
.lateral__pasos li {
  counter-increment: lp;
  display: grid;
  grid-template-columns: 1.8rem minmax(0, 1fr);
  gap: .5rem;
  padding-block: .55rem;
  border-top: 1px solid var(--linea);
  font-size: .97rem;
  line-height: 1.45;
}
.lateral__pasos li::before {
  content: counter(lp, decimal-leading-zero);
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 700;
  color: var(--acento-tinta);
  padding-top: .2rem;
}
.lateral .boton { width: 100%; }
.lateral__tel { margin: 1rem 0 0; font-size: .95rem; color: var(--tinta-2); }
.lateral__tel a { font-weight: 600; white-space: nowrap; }
.lateral--marino p { margin: 0; color: var(--niebla); font-size: .98rem; }
.lateral--cielo { background: var(--cielo-2); }
.lateral--cielo .tesela__rotulo { color: var(--ladrillo); }
.lateral__lista { list-style: none; margin: 0 0 1rem; padding: 0; }
.lateral__lista li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: .45rem;
  padding-block: .5rem;
  border-top: 1px solid var(--cielo-3);
  font-size: .97rem;
  line-height: 1.45;
}
.lateral__lista li::before {
  content: "";
  width: .7rem;
  height: .4rem;
  margin-top: .45rem;
  border-left: 2px solid var(--acento-tinta);
  border-bottom: 2px solid var(--acento-tinta);
  transform: rotate(-45deg);
}
.lateral__nota { margin: 0; font-size: .95rem; color: var(--tinta-2); }

.w-foto { margin: 0 0 2.5rem; }
.w-foto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radio);
  background: var(--cielo-3);
}
.w-foto figcaption {
  margin-top: .8rem;
  padding-left: .9rem;
  border-left: 2px solid var(--ladrillo);
  font-size: .92rem;
  line-height: 1.45;
  color: var(--tinta-2);
}

.w-seccion { counter-increment: seccion; padding-block: 2.25rem; }
.w-seccion + .w-seccion { border-top: 1px solid var(--linea); }
.pag-cuerpo__principal > .w-seccion:first-child,
.w-foto + .w-seccion { padding-top: 0; }
.w-seccion > h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem); }
.w-seccion > h2::before {
  content: counter(seccion, decimal-leading-zero);
  display: block;
  margin-bottom: .8rem;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--acento-tinta);
}
.w-seccion h3 { margin-top: 1.6em; font-weight: 600; }
.w-seccion p,
.w-seccion li { max-width: 68ch; }
.w-seccion ul,
.w-seccion ol { padding-left: 1.25rem; margin: 0 0 1em; }
.w-seccion li { margin-bottom: .35em; }
.w-seccion li::marker { color: var(--ladrillo); }
.w-seccion > :last-child { margin-bottom: 0; }

/* Ritmo en páginas largas: una de cada tres secciones es una tesela destacada con su número grande */
.pag-cuerpo__principal > .w-seccion:nth-of-type(3n + 2) {
  margin-block: 1rem;
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  border-radius: var(--radio);
  background: var(--papel);
  box-shadow: inset 4px 0 0 var(--ladrillo);
}
.pag-cuerpo__principal > .w-seccion:nth-of-type(3n + 2),
.pag-cuerpo__principal > .w-seccion:nth-of-type(3n + 2) + .w-seccion { border-top: 0; }
.pag-cuerpo__principal > .w-seccion:nth-of-type(3n + 2) > h2::before {
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--ladrillo);
}
.pag-cuerpo__principal > .w-seccion:nth-of-type(3n + 2) .w-tabla { background: var(--cielo); }

/* Tablas: scroll horizontal propio en móvil */
.w-tabla {
  margin: 1.75rem 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px;
  border: 1px solid var(--linea);
  background: var(--papel);
}
.w-tabla table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.w-tabla table:has(thead th:nth-child(3)) { min-width: 34rem; }
.w-tabla caption {
  caption-side: top;
  text-align: left;
  padding: 1.1rem 1.25rem .9rem;
  font-family: var(--fuente-titulo);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--ladrillo);
  background: var(--papel);
}
.w-tabla th,
.w-tabla td {
  padding: .85rem 1.25rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--linea);
  line-height: 1.45;
}
.w-tabla thead th {
  background: var(--tinta);
  color: #fff;
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.w-tabla tbody th { font-weight: 600; color: var(--tinta); background: var(--papel); }
.w-tabla td { color: var(--tinta); font-variant-numeric: tabular-nums; }
.w-tabla tbody tr:last-child > * { border-bottom: 0; }
.w-tabla tbody tr { transition: background-color .15s ease; }
.w-tabla tbody tr:hover,
.w-tabla tbody tr:hover th { background: var(--cielo); }

/* Preguntas frecuentes */
.w-faq { padding-block: 2.25rem; border-top: 1px solid var(--linea); }
.w-faq > h2 { font-size: clamp(1.3rem, 1rem + 1.2vw, 1.85rem); }
.w-faq__item {
  margin-bottom: .6rem;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 14px;
  transition: border-color .2s ease;
}
.w-faq__item[open] { border-color: var(--cielo-3); }
.w-faq__item > summary {
  position: relative;
  padding: 1.1rem 3.5rem 1.1rem 1.25rem;
  list-style: none;
  cursor: pointer;
  font-family: var(--fuente-titulo);
  font-size: .92rem;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
  -webkit-hyphens: none;
  hyphens: none;
}
.w-faq__item > summary::-webkit-details-marker { display: none; }
.w-faq__item > summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 1rem;
  height: 1rem;
  margin-top: -.5rem;
  background:
    linear-gradient(var(--ladrillo), var(--ladrillo)) center / 100% 2px no-repeat,
    linear-gradient(var(--ladrillo), var(--ladrillo)) center / 2px 100% no-repeat;
  transition: transform .25s ease;
}
.w-faq__item[open] > summary::after { transform: rotate(45deg); }
.w-faq__item > summary:hover { color: var(--ladrillo); }
.w-faq__resp { padding: 0 1.25rem 1.25rem; color: var(--tinta-2); }
.w-faq__resp p { max-width: 68ch; }
.w-faq__resp > :last-child { margin-bottom: 0; }

/* Red de enlaces: hijas y hermanas */
.pag-red:empty { display: none; }
.pag-red { padding-bottom: clamp(3rem, 6vw, 5rem); }

.w-hijas { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.w-hijas__titulo {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
}
.w-hijas__titulo::after { content: ""; flex: 1 1 2rem; height: 1px; background: var(--cielo-3); }
.w-hijas__rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  gap: var(--hueco);
  counter-reset: hija;
}
.w-tarjeta {
  position: relative;
  counter-increment: hija;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-height: 8.5rem;
  padding: 1.35rem 1.4rem 1.3rem;
  background: var(--papel);
  border: 1px solid transparent;
  border-radius: var(--radio);
  color: var(--tinta);
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.w-tarjeta::before {
  content: counter(hija, decimal-leading-zero);
  font-family: var(--fuente-titulo);
  font-size: .7rem;
  font-weight: 700;
  color: var(--acento-tinta);
}
.w-tarjeta::after {
  content: "";
  position: absolute;
  top: 1.3rem;
  right: 1.3rem;
  width: 1.1rem;
  height: 1.1rem;
  background: var(--ladrillo);
  -webkit-mask: var(--flecha) center / contain no-repeat;
  mask: var(--flecha) center / contain no-repeat;
  transition: transform .2s ease;
}
.w-tarjeta:hover { color: var(--tinta); transform: translateY(-3px); border-color: var(--cielo-3); box-shadow: var(--sombra); }
.w-tarjeta:hover::after { transform: translateX(4px); }
.w-tarjeta__nombre {
  font-family: var(--fuente-titulo);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.28;
  letter-spacing: -.015em;
  -webkit-hyphens: none;
  hyphens: none;
  text-wrap: balance;
}
.w-tarjeta__texto { font-size: .96rem; line-height: 1.45; color: var(--tinta-2); }
.w-tarjeta:nth-child(5n + 1) { background: var(--tinta); color: #fff; }
.w-tarjeta:nth-child(5n + 1):hover { color: #fff; }
.w-tarjeta:nth-child(5n + 1)::before { color: var(--acento-claro); }
.w-tarjeta:nth-child(5n + 1)::after { background: var(--acento-claro); }
.w-tarjeta:nth-child(5n + 1) .w-tarjeta__texto { color: var(--niebla); }

/* Rejilla densa: a partir de 13 tarjetas, filas compactas y uniformes */
.w-hijas__rejilla:has(> :nth-child(13)) { grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr)); gap: .5rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta { min-height: 0; padding: .95rem 2.6rem .95rem 1.1rem; border-radius: 12px; gap: .25rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta::after { top: 1rem; right: 1rem; width: .95rem; height: .95rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta__nombre { font-size: .88rem; }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta:nth-child(5n + 1) { background: var(--papel); color: var(--tinta); }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta:nth-child(5n + 1)::before { color: var(--acento-tinta); }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta:nth-child(5n + 1)::after { background: var(--ladrillo); }
.w-hijas__rejilla:has(> :nth-child(13)) .w-tarjeta:nth-child(5n + 1) .w-tarjeta__texto { color: var(--tinta-2); }

.w-hermanas {
  padding: clamp(1.5rem, 3vw, 2.25rem);
  background: var(--papel);
  border-radius: var(--radio);
}
.w-hermanas__titulo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.25rem;
  font-size: clamp(1rem, .95rem + .4vw, 1.2rem);
}
.w-hermanas__titulo::before {
  content: "";
  width: .55rem;
  height: .55rem;
  flex: none;
  background: var(--acento);
  transform: rotate(45deg);
}
.w-hermanas__enlaces { columns: 4 9.5rem; column-gap: 2rem; }
.w-hermanas__enlaces a {
  display: flex;
  align-items: center;
  gap: .65rem;
  padding-block: .6rem;
  border-bottom: 1px solid var(--linea);
  break-inside: avoid;
  color: var(--tinta);
  font-weight: 500;
  line-height: 1.35;
  text-decoration: none;
}
.w-hermanas__enlaces a::before {
  content: "";
  width: .4rem;
  height: .4rem;
  flex: none;
  border-radius: 1px;
  background: var(--ladrillo);
  transition: background-color .2s ease, transform .2s ease;
}
.w-hermanas__enlaces a:hover { color: var(--ladrillo); }
.w-hermanas__enlaces a:hover::before { background: var(--acento); transform: rotate(45deg); }

/* Cierre de la página interior */
.pag-cierre:empty { display: none; }
.pag-cierre { padding-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.w-cierre {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 1.25rem 1.75rem;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: var(--radio);
  background: var(--ladrillo);
  color: #fff;
}
.w-cierre::before {
  content: "";
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 1.4rem no-repeat,
    rgba(255, 255, 255, .14);
}
.w-cierre > * { grid-column: 2; }
.w-cierre p {
  margin: 0 0 .6em;
  max-width: 62ch;
  font-family: var(--fuente-titulo);
  font-weight: 500;
  font-size: clamp(1rem, .92rem + .5vw, 1.3rem);
  line-height: 1.45;
  letter-spacing: -.012em;
  text-wrap: balance;
}
.w-cierre > :last-child { margin-bottom: 0; }
.w-cierre a { color: #fff; text-decoration: underline; }
.w-cierre a:hover { color: var(--ladrillo-claro); }
.w-cierre .w-cta { background: #fff; border-color: #fff; color: var(--ladrillo); text-decoration: none; }

/* ---------- Recorrido del cotizador ---------- */
.recorrido { padding-block: clamp(1.25rem, 3vw, 2.5rem) clamp(3rem, 6vw, 5rem); }
.recorrido__in { max-width: calc(51.25rem + 2 * var(--margen)); }
.recorrido .w-antetitulo { margin-bottom: 1.5rem; }
.recorrido .w-antetitulo::after { content: ""; flex: 1 1 2rem; height: 1px; background: var(--cielo-3); }
.recorrido__cotizador { min-height: 32.5rem; }
.recorrido__ayuda { margin: 2rem 0 0; text-align: center; font-size: .97rem; color: var(--tinta-2); }
.recorrido__ayuda a { font-weight: 600; white-space: nowrap; }

/* ---------- Pie ---------- */
.pie {
  background: var(--tinta);
  color: var(--niebla);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  font-size: .98rem;
}
.pie__rejilla {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
}
.pie .marca { color: #fff; margin-bottom: 1.25rem; }
.pie .marca__nombre span:last-child { color: var(--acento-claro); }
.pie__texto { margin: 0 0 1rem; max-width: 34ch; }
.pie h2 {
  margin-bottom: 1rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--acento-claro);
}
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pie a { color: #fff; text-decoration: none; }
.pie a:hover { color: var(--acento-claro); text-decoration: underline; }
.pie__tel { font-family: var(--fuente-titulo); font-weight: 600; font-size: 1.05rem; letter-spacing: -.02em; white-space: nowrap; }
.pie__base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem 2rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(213, 230, 242, .22);
  font-size: .9rem;
}
.pie__base p { margin: 0; }
.pie__legal { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; list-style: none; margin: 0; padding: 0; }

/* =========================================================================
   Ajustes responsive (siempre al final)
   ========================================================================= */

/* Héroe interior en escritorio: una composición de mosaico por nivel del árbol */
@media (min-width: 861px) {
  /* Servicio y contacto: placa con texto, ficha en franja y llamada; foto alta a la derecha que crece con la placa */
  .pag-heroe__placa { grid-column: 1 / 8; grid-row: 1 / 4; }
  .pag-heroe__texto { grid-column: 1 / 8; grid-row: 1; }
  .pag-heroe .pag-heroe__in .pag-heroe__texto { padding-bottom: 0; }
  .pag-heroe__datos { grid-column: 1 / 8; grid-row: 2; margin: 1.75rem var(--placa-pad) 0; }
  .pag-cotizar { grid-column: 1 / 8; grid-row: 3; }
  .pag-heroe__foto { grid-column: 8 / 13; grid-row: 1 / 4; }
  .pag-heroe__in:has(.pag-cotizar:empty) .pag-heroe__datos,
  .pag-heroe__in:has(.pag-cotizar .w-cotizador) .pag-heroe__datos { margin-bottom: var(--placa-pad); }

  /* Ficha dentro de la placa: dos columnas de cielo; si las filas son impares, la última va a lo ancho */
  .pag-heroe .w-datos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1.5rem;
    padding: .4rem clamp(1rem, 2vw, 1.5rem);
    background: linear-gradient(var(--acento), var(--acento)) top / 100% 4px no-repeat, var(--cielo);
    box-shadow: none;
  }
  .pag-heroe .w-datos__fila { grid-template-columns: minmax(0, 1fr); gap: .2rem; padding-block: .8rem; border-bottom: 0; border-top: 1px solid var(--cielo-3); }
  .pag-heroe .w-datos__fila:nth-child(-n + 2) { border-top: 0; }
  .pag-heroe .w-datos__fila:last-child:nth-child(odd) { grid-column: 1 / -1; }

  /* Distrito: placa marina y foto grande a media anchura; la ficha, franja de papel a todo ancho */
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__placa { grid-column: 1 / 7; grid-row: 1 / 3; }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__texto { grid-column: 1 / 7; grid-row: 1; padding-bottom: var(--placa-pad); }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-cotizar { grid-column: 1 / 7; grid-row: 2; padding-top: 0; }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__foto { grid-column: 7 / 13; grid-row: 1 / 3; }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__foto .w-foto { min-height: 24rem; }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .pag-heroe__datos { grid-column: 1 / -1; grid-row: 3; margin: 0; }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-datos {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    padding: 1.1rem .25rem .9rem;
    background: linear-gradient(var(--ladrillo), var(--ladrillo)) top / 100% 4px no-repeat, var(--papel);
  }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-datos__fila { grid-column: auto; padding: .35rem 1.25rem; border-top: 0; border-left: 1px solid var(--linea); }
  body:has(.w-hijas) .pag-heroe:has(.w-migas li:nth-child(2):last-child) .w-datos__fila:first-child { border-left: 0; }

  /* Cantón: texto libre sobre cielo; foto alta con la ficha superpuesta en su parte baja */
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__placa { display: none; }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__texto { grid-column: 1 / 7; grid-row: 1; align-self: center; padding-right: clamp(0rem, 2vw, 1.5rem); }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-cotizar { grid-column: 1 / 7; grid-row: 2; align-self: start; padding-top: 1.75rem; }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__foto { grid-column: 7 / 13; grid-row: 1 / 3; }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__foto .w-foto { min-height: 30rem; }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .pag-heroe__datos { grid-column: 7 / 13; grid-row: 2; align-self: end; position: relative; z-index: 1; margin: 0 1rem 1rem; }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .w-datos {
    grid-template-columns: minmax(0, 1fr);
    padding: .35rem clamp(1rem, 2vw, 1.4rem);
    background: linear-gradient(var(--ladrillo), var(--ladrillo)) top / 100% 4px no-repeat, var(--papel);
    box-shadow: var(--sombra);
  }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .w-datos__fila { grid-column: auto; grid-template-columns: minmax(0, .8fr) minmax(0, 1.3fr); padding-block: .7rem; border-top: 0; border-bottom: 1px solid var(--linea); }
  .pag-heroe:has(.w-migas li:nth-child(3):last-child) .w-datos__fila:last-child { border-bottom: 0; }

  /* Comuna: foto alta a la izquierda; placa y ficha marina a la derecha */
  .pag-heroe:has(.w-migas li:nth-child(4)) .pag-heroe__foto { grid-column: 1 / 6; grid-row: 1 / 4; }
  .pag-heroe:has(.w-migas li:nth-child(4)) .pag-heroe__placa { grid-column: 6 / 13; grid-row: 1 / 3; }
  .pag-heroe:has(.w-migas li:nth-child(4)) .pag-heroe__texto { grid-column: 6 / 13; grid-row: 1; padding-bottom: var(--placa-pad); }
  .pag-heroe:has(.w-migas li:nth-child(4)) .pag-cotizar { grid-column: 6 / 13; grid-row: 2; padding-top: 0; }
  .pag-heroe:has(.w-migas li:nth-child(4)) .pag-heroe__datos { grid-column: 6 / 13; grid-row: 3; margin: 0; }
  .pag-heroe:has(.w-migas li:nth-child(4)) .w-datos {
    padding: .5rem clamp(1.25rem, 2.5vw, 1.75rem);
    background: linear-gradient(var(--ladrillo-luz), var(--ladrillo-luz)) top / 100% 5px no-repeat, var(--tinta);
  }
  .pag-heroe:has(.w-migas li:nth-child(4)) .w-datos__fila { border-top-color: rgba(213, 230, 242, .2); }
}
@media (max-width: 1180px) {
  .menu-boton { display: inline-flex; }
  .js .menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    max-height: calc(100vh - 4.5rem);
    overflow-y: auto;
    padding: .75rem var(--margen) 1.5rem;
    background: var(--papel);
    border-bottom: 1px solid var(--linea);
    box-shadow: var(--sombra);
  }
  .js .menu.abierto { display: flex; }
  html:not(.js) .cabecera__in { flex-wrap: wrap; padding-block: .75rem; }
  html:not(.js) .menu-boton { display: none; }
  html:not(.js) .menu { width: 100%; flex-direction: column; align-items: stretch; }

  .menu__lista { flex-direction: column; align-items: stretch; gap: 0; }
  .menu__lista > li { border-bottom: 1px solid var(--linea); }
  .menu__lista a,
  .desplegable > summary { font-size: .86rem; padding: .95rem .25rem; border-radius: 0; background-position: .25rem calc(100% - .55rem); }
  .menu__lista a:hover,
  .desplegable > summary:hover,
  .desplegable[open] > summary,
  .menu__lista a[aria-current="page"] { background-size: 1.75rem 3px; }
  .desplegable > summary { justify-content: space-between; }
  .desplegable__lista {
    position: static;
    min-width: 0;
    padding: 0 0 .75rem .75rem;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .menu__lista .desplegable__lista a { padding: .6rem .5rem; }
  .boton--menu { width: 100%; padding: 1rem 1.25rem; font-size: .82rem; }
}

@media (max-width: 1100px) {
  .tesela--titulo { grid-column: 1 / 8; grid-row: 1; }
  .tesela--titulo h1 { font-size: clamp(1.3rem, .6rem + 2vw, 1.85rem); }
  .tesela--cifras { grid-column: 8 / 13; grid-row: 1; }
  .tesela--cotizador { grid-column: 1 / -1; grid-row: 2; }
  .tesela--foto { grid-column: 1 / 8; grid-row: 3; min-height: 16rem; }
  .tesela--ruta { grid-column: 8 / 13; grid-row: 3; }

  .pag-cuerpo { grid-template-columns: minmax(0, 1fr); }
  .pag-cuerpo__principal { max-width: none; }
  .pag-cuerpo__lateral { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); }

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

@media (max-width: 860px) {
  .dos-col,
  .asimetrico,
  .seccion__intro,
  .destinos__cabeza,
  .cierre__tesela { grid-template-columns: minmax(0, 1fr); }
  .asimetrico__texto { grid-row: auto; }
  .foto-alta { min-height: 0; height: auto; aspect-ratio: 4 / 3; }

  .destinos__rejilla { grid-template-columns: minmax(0, 1fr); }
  .distrito--sur,
  .distrito--norte,
  .distrito--este { grid-column: 1; grid-row: auto; }
  .distrito--norte { flex-direction: column; }
  .distrito__foto,
  .distrito--norte .distrito__foto { flex: none; aspect-ratio: 16 / 7; }

  .bento__a, .bento__b, .bento__d { grid-column: 1 / -1; }

  .galeria__texto { grid-column: 1 / -1; grid-row: auto; }
  .galeria__foto--a { grid-column: 1 / -1; grid-row: auto; }
  .galeria__foto--b { grid-column: 1 / 8; grid-row: auto; }
  .galeria__foto--c { grid-column: 8 / -1; grid-row: auto; }

  /* Héroe interior apilado: la foto, apaisada y baja para no alargar la primera pantalla */
  .pag-heroe .w-foto { min-height: 0; aspect-ratio: 16 / 8; }
  .pag-cuerpo__lateral { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 700px) {
  .tesela--titulo,
  .tesela--cotizador,
  .tesela--foto,
  .tesela--cifras,
  .tesela--ruta { grid-column: 1 / -1; grid-row: auto; }
  /* Portada móvil: foto baja, tarjeta apretada y botones en una fila, para que el cotizador asome en la primera pantalla */
  .tesela--foto { order: 1; min-height: 0; aspect-ratio: 5 / 2; }
  .tesela--titulo { order: 2; padding: 1.1rem 1rem 1.15rem; }
  .tesela--titulo .w-antetitulo { margin-bottom: .75rem; }
  .tesela--titulo .w-entradilla p { font-size: 1.0625rem; line-height: 1.5; }
  .heroe__acciones { flex-wrap: nowrap; gap: .5rem; margin-top: 1rem; }
  .heroe__acciones .boton { flex: 1 1 0; min-width: 0; padding: .75rem .6rem; font-size: .74rem; }
  .heroe__acciones .boton::after { display: none; }
  .tesela--cotizador { order: 3; padding: .75rem .5rem; }
  .tesela--cotizador .tesela__rotulo { margin-bottom: .6rem; }
  .tesela--cifras { order: 4; }
  .tesela--ruta { order: 5; }

  /* Ritmo más compacto en móvil */
  .seccion,
  .banda,
  .destinos { padding-block: 2.75rem; }
  .heroe { padding-bottom: 2.5rem; }
  .foto-tesela { margin-top: 1.5rem; }
  .foto-tesela img { aspect-ratio: 16 / 9; }
  .foto-alta { aspect-ratio: 16 / 9; }

  .pasos { grid-template-columns: minmax(0, 1fr); gap: .5rem; }
  .paso:nth-child(even) { margin-top: 0; }
  .paso {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: .1rem .9rem;
    padding: 1rem 1.1rem;
  }
  .paso .icono { grid-row: 1 / 3; width: 2.6rem; height: 2.6rem; padding: .55rem; margin: 0; border-radius: 12px; }
  .paso::before { top: 1rem; right: 1.1rem; }
  .paso__titulo { margin-bottom: .2rem; }
  .paso p { font-size: .95rem; line-height: 1.45; }

  /* Tabla de límites del palet: fichas en dos columnas en lugar de ocho filas */
  .w-tabla--fichas { overflow: visible; border: 0; background: transparent; }
  .w-tabla--fichas table,
  .w-tabla--fichas tbody { display: block; }
  .w-tabla--fichas caption { display: block; padding: 0 0 .75rem; background: transparent; }
  .w-tabla--fichas thead { display: none; }
  .w-tabla--fichas tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
  .w-tabla--fichas tbody tr {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    padding: .7rem .85rem;
    background: var(--papel);
    border-radius: 12px;
  }
  .w-tabla--fichas tbody th,
  .w-tabla--fichas tbody td { display: block; padding: 0; border: 0; background: transparent; }
  .w-tabla--fichas tbody th { font-size: .82rem; font-weight: 500; color: var(--tinta-2); }
  .w-tabla--fichas tbody td { font-weight: 600; font-size: .95rem; }
  .w-tabla--fichas tbody tr:hover,
  .w-tabla--fichas tbody tr:hover th { background: var(--papel); }

  .distrito__cuerpo { padding: 1.1rem 1.1rem 1.25rem; }
  .distrito__foto .distrito__cifra { left: .75rem; bottom: .75rem; padding: .5rem .7rem; }
  .distrito__cifra strong { font-size: 1.6rem; }
  .distrito__indice > summary { padding-block: .5rem; margin-bottom: 0; }

  .bento .tesela { padding: 1.25rem; }
  .bento .icono { width: 2.1rem; height: 2.1rem; margin-bottom: .8rem; }

  .pag-cuerpo__lateral { grid-template-columns: minmax(0, 1fr); }
  .bento__d { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
  h1 { font-size: 1.3rem; }
  .tesela--titulo h1 { font-size: 1.14rem; letter-spacing: -.03em; }
  .pag-heroe h1 { font-size: clamp(1.3rem, .9rem + 2.6vw, 1.6rem); }
  .marca__sello { width: 2.5rem; height: 2.5rem; }
  .marca__nombre { font-size: .875rem; }
  .menu-boton__texto { display: none; }
  .menu-boton { padding: .75rem .8rem; }

  .w-antetitulo { letter-spacing: .04em; gap: .6rem; }
  .w-antetitulo::before { width: 1.25rem; }

  .cifras > div { padding-block: .7rem; }
  .galeria__foto--a { aspect-ratio: 16 / 9; }
  .galeria__foto--b { grid-column: 1 / 7; aspect-ratio: 1; }
  .galeria__foto--c { grid-column: 7 / -1; aspect-ratio: 1; }
  .cantones { grid-template-columns: minmax(0, 1fr); }
  .ciudades { margin-left: 0; font-size: .86rem; }

  .w-datos { padding-inline: 1.1rem; }
  .w-datos__fila { grid-template-columns: minmax(0, 1fr); gap: .15rem; padding-block: .75rem; }
  .w-tabla th,
  .w-tabla td { padding: .75rem .9rem; }
  /* Tablas anchas: columnas holgadas con scroll propio, primera columna fija y sombra que avisa del desplazamiento */
  .w-tabla:has(thead th:nth-child(3)) {
    background:
      linear-gradient(to right, var(--papel) 40%, rgba(255, 255, 255, 0)) left / 1.5rem 100% no-repeat local,
      linear-gradient(to left, var(--papel) 40%, rgba(255, 255, 255, 0)) right / 1.5rem 100% no-repeat local,
      linear-gradient(to right, rgba(19, 41, 61, .16), rgba(19, 41, 61, 0)) left / .75rem 100% no-repeat scroll,
      linear-gradient(to left, rgba(19, 41, 61, .16), rgba(19, 41, 61, 0)) right / .75rem 100% no-repeat scroll,
      var(--papel);
  }
  .w-tabla table:has(thead th:nth-child(3)) { min-width: 36rem; font-size: .95rem; }
  .w-tabla table:has(thead th:nth-child(3)) tr > :first-child { position: sticky; left: 0; z-index: 1; min-width: 8.5rem; background: var(--papel); box-shadow: 1px 0 0 var(--linea); }
  .w-tabla table:has(thead th:nth-child(3)) thead tr > :first-child { background: var(--tinta); }
  .w-hermanas__enlaces { column-gap: 1.25rem; }
  .w-hermanas__enlaces a { font-size: .95rem; }
  .w-cierre { grid-template-columns: minmax(0, 1fr); }
  .w-cierre::before { width: 2.75rem; height: 2.75rem; }
  .w-cierre > * { grid-column: 1; }

  .cierre__servicios { grid-template-columns: minmax(0, 1fr); }
  .servicio { min-height: 0; }
  .cierre__acciones .boton { width: 100%; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
}

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