@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   General Contractor Davie — la piel (2026-11-10)

   ORIGEN: la hoja final de Sonno (2026-10-20), que ya resolvió los 8 tipos
   sobre el molde del motor: grilla de 12 columnas, cada foto al alto de su
   texto, las mismas secciones en su orden. De ella se toma TODA la
   estructura; lo que cambia es el vocabulario, que sale de la referencia que
   eligió el operador en Pinterest (shot de Dribbble «Mr. Appliance — Home &
   Appliance Repair Website», Abu Hossain): blanco y gris azulado muy claro, un
   solo acento azul, azul marino para el texto y el botón principal, una sans
   geométrica en semibold para los titulares y radios generosos.

   Los tokens conservan los NOMBRES de Sonno (crema, malva, topo…) para que la
   estructura no se toque: el nombre ya no dice el color, el comentario sí.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── La letra: Manrope, variable, archivo local (SIL OFL 1.1) ────────────── */
@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* ── Los tokens de la piel ───────────────────────────────────────────────── */
:root {
  --crema: #f8fafe;          /* el fondo de la página: blanco apenas azulado */
  --crema-hundido: #edf2fb;  /* las bandas hundidas: el gris lavanda de la referencia */
  --blanco: #ffffff;         /* tarjetas */
  --carbon: #0f1a33;         /* azul marino: titulares, texto y botón principal */
  --gris-texto: #535d73;     /* texto secundario */
  --malva: #3b7bf0;          /* EL acento azul: banda de cierre y números */
  --topo: #2a64d6;           /* azul más hondo: bordes y rótulos sobre claro */
  --salvia: #3b7bf0;
  --linea: #dfe6f3;          /* el filete fino */
  --panel: #0f1e3d;          /* el panel oscuro del hero y del video */
  --foco: #0f1a33;
  --foco-claro: #ffffff;

  --display: "Manrope", system-ui, -apple-system, sans-serif;
  --texto: "Manrope", system-ui, -apple-system, sans-serif;
  --pildora: 9999px;
  --foto: 24px;
  --canaleta: clamp(20px, 5%, 72px);
  --lateral: calc(max(0px, (100% - 1400px) / 2) + clamp(20px, 5%, 72px));
  --gap: 40px;
  --aire: 60px;
}

/* Una sola apariencia: los tokens de base.css se fijan a esta paleta en los
   dos modos. El selector pesa (0,2,1) para ganarle a :root:not([data-theme]). */
html:root:not([data-sonno]) {
  --b-tinta: var(--carbon);
  --b-cuerpo: var(--carbon);
  --b-mute: var(--gris-texto);
  --b-papel: var(--crema);
  --b-hunde: var(--crema-hundido);
  --b-pelo: var(--linea);
  --b-enlace: var(--carbon);
  --b-foco: var(--foco);
  --b-radio: 16px;
}

/* ── Global: todas las páginas ──────────────────────────────────────────── */
body {
  background: var(--crema);
  color: var(--carbon);
  font-family: var(--texto);
  font-size: 16px;
  line-height: 1.7;
}

a { color: var(--carbon); }
a:hover { color: var(--gris-texto); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  color: var(--carbon);
}
h1 { font-size: 3rem; line-height: 1.06; letter-spacing: -0.015em; }
h2 { font-size: 2.6rem; line-height: 1.12; letter-spacing: -0.01em; text-wrap: balance; }
h3 { font-size: 25px; line-height: 1.25; }

:focus-visible { outline-color: var(--foco); }

/* El salto al contenido: fuera de pantalla hasta que recibe el foco. */
.skip {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10;
  padding: 10px 18px;
  border-radius: var(--pildora);
  background: var(--carbon);
  color: var(--blanco);
  font-size: 13px;
}
.skip:focus { top: 12px; color: var(--blanco); }

/* Los botones del motor. `a.btn` y no `.btn`: `base.css` le pone
   `font-weight: 650` a todo `a[href^="tel:"]`, que pesa (0,1,1). */
a.btn, .btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--pildora);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
.btn--primario { background: var(--carbon); color: var(--blanco); }
.btn--primario:hover { color: var(--blanco); }
.btn--secundario { border: 1px solid var(--carbon); color: var(--carbon); }

/* El enlace fuerte (a /about/ y a /locations/): el botón secundario. */
a.enlace-fuerte {
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid var(--carbon);
  border-radius: var(--pildora);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── La barra superior ───────────────────────────────────────────────────── */
.topbar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 32px;
  padding: 10px max(var(--canaleta), calc((100% - 1400px) / 2));
  background: var(--crema-hundido);
  font-size: 13px;
  letter-spacing: 0.06em;
}
.topbar a { text-decoration: none; font-weight: 700; color: var(--carbon); }

/* ── La cabecera ─────────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px var(--lateral);
  border: 0;
  background: var(--crema);
}
.site-header__logo { display: flex; align-items: center; text-decoration: none; }
.site-header__logo img { height: 46px; width: auto; }
.site-header__marca-nombre { font-family: var(--display); font-size: 25px; }
.site-nav__list { gap: 12px 32px; }
.site-nav a {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}
a.site-header__cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 26px;
  border-radius: var(--pildora);
  background: var(--carbon);
  color: var(--blanco);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── El pie ──────────────────────────────────────────────────────────────── */
/* Cuatro columnas iguales (3 de las 12 cada una); en el celular, una. */
.site-footer {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
  gap: 32px var(--gap);
  margin: 0;
  padding: 60px var(--lateral);
  border: 0;
  background: var(--crema-hundido);
  color: var(--carbon);
  font-size: 14px;
}
.site-footer p, .site-footer address { margin: 0; font-style: normal; }
.site-footer__datos { display: flex; flex-direction: column; gap: 14px; }
.site-footer__negocio { font-family: var(--display); font-size: 25px; line-height: 1.25; }
.site-footer a { text-decoration: none; }
.site-footer a[href^="tel:"] { font-weight: 700; }
.site-footer__titulo {
  margin-bottom: 12px !important;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.site-footer nav ul { flex-direction: column; gap: 8px; }
.site-footer nav a { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; }
.site-footer__copy { margin-top: 10px !important; color: var(--gris-texto); }

/* ═══════════════════════════════════════════════════════════════════════════
   EL HOMEPAGE — dibujado sobre el molde
   ═══════════════════════════════════════════════════════════════════════════ */
.t-homepage main { max-width: none; margin: 0; padding: 0; }
.t-homepage main > :is(section, .cierre-lead) {
  margin: 0;
  padding-block: var(--aire);
  padding-inline: var(--lateral);
}
.t-homepage main p { max-width: none; margin: 0; }
.t-homepage main :is(h2, h3, ul, ol, dl, figure) { margin: 0; }
.t-homepage main picture { display: block; }

/* El fondo de cada banda, por NOMBRE (diseno/README.md): crema, hundida,
   crema… El hero y el video son paneles azul petróleo sobre crema. */
.t-homepage :is(.costo, .proceso, .about-resumen, .faq, .criticos) { background: var(--crema-hundido); }
.t-homepage .cta-home { background: var(--malva); }

/* Las secciones de dos columnas, en la grilla de 12. */
.t-homepage :is(.costo__texto, .why, .proceso, .area, .about-resumen) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}

/* El rótulo chico en mayúsculas, y su distancia al H2 */
.t-homepage :is(.costo__rotulo, .criticos__rotulo, .why__rotulo, .proceso__rotulo,
  .area__rotulo, .about-resumen__rotulo, .normativa__rotulo, .video__rotulo, .faq__rotulo) {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.t-homepage :is(.costo__rotulo, .why__rotulo, .proceso__rotulo, .area__rotulo,
  .about-resumen__rotulo, .normativa__rotulo, .video__rotulo, .faq__rotulo) + h2 { margin-top: 14px; }

/* Una foto que acompaña al texto: se estira al alto de la fila y no la
   empuja. Con `contain: size` la foto no aporta alto: la fila la mide el
   texto, y la foto la llena con `object-fit: cover`. El mínimo es para el
   cliente con poco texto. */
.t-homepage :is(.why__figura, .proceso__figura, .area__figura, .about-resumen__figura) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  contain: size;
}
.t-homepage :is(.why__figura, .proceso__figura, .area__figura, .about-resumen__figura) > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
.t-homepage :is(.why__figura, .proceso__figura, .area__figura, .about-resumen__figura) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}

/* ── 1 · El hero ─────────────────────────────────────────────────────────────
   La foto DE FONDO de un panel oscuro redondeado y el texto encima, en una
   columna de 540 (el H1 del molde tiene 74 letras). El motor emite texto,
   figura y franja como hermanos; con `display: contents` en los dos
   envoltorios todo cae en UNA grilla. Filas: aire · rótulo · H1 · bajada ·
   píldoras · resorte · cifra · botones · aire. */
.t-homepage main > section.hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 540px) 56px minmax(0, 1fr);
  grid-template-rows: 56px auto auto auto auto minmax(28px, 1fr) auto auto 52px;
  min-height: 708px;
  padding-top: 8px;
  padding-bottom: 0;
  color: var(--blanco);
}
.t-homepage .hero::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: var(--foto);
  background: var(--panel);
}
.t-homepage .hero__texto, .t-homepage .hero__figura { display: contents; }
.t-homepage .hero__figura > :is(img, picture) {
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  contain: size;
  z-index: 0;
}
.t-homepage .hero__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  border-radius: var(--foto);
}
.t-homepage :is(.hero__rotulo, .hero__h1, .hero__sub, .hero .trust, .hero__dato, .hero__acciones) {
  grid-column: 2;
  position: relative;
  z-index: 1;
  color: var(--blanco);
}
.t-homepage .hero__rotulo {
  grid-row: 2;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.t-homepage .hero__h1 { grid-row: 3; margin: 0; color: var(--blanco); text-wrap: balance; }
.t-homepage .hero__rotulo + .hero__h1 { margin-top: 20px; }
.t-homepage .hero__sub { grid-row: 4; margin-top: 20px; font-size: 17px; }
.t-homepage .hero .trust { grid-row: 5; margin-top: 22px; }
.t-homepage .hero__dato { grid-row: 7; font-size: 16px; }
.t-homepage .hero__dato b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 3.6rem;
  line-height: 0.95;
}
.t-homepage .hero__dato span { display: block; margin-top: 6px; font-size: 14px; }
.t-homepage .hero__acciones {
  grid-row: 8;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.t-homepage .hero .btn--primario {
  padding: 0 8px 0 26px;
  background: var(--blanco);
  color: var(--carbon);
}
.t-homepage .hero .btn--primario::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--pildora);
  background: var(--carbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.t-homepage .hero .btn--secundario { border-color: var(--blanco); color: var(--blanco); }
.t-homepage .hero :focus-visible { outline-color: var(--foco-claro); }

/* Las píldoras: la franja de confianza del motor */
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .trust__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .trust__item {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--carbon);
  font-size: 13px;
}

/* ── 2 · Servicios: el texto en tres columnas parejas, las tarjetas debajo ──
   El H2 abre la primera columna y la prosa corre por las tres; las columnas
   quedan del mismo alto con cualquier largo. Las tarjetas usan las mismas
   tres columnas, así los bordes coinciden. */
.t-homepage .cats { display: flex; flex-direction: column; gap: 56px; }
.t-homepage .cats__texto { columns: 3; column-gap: var(--gap); }
.t-homepage .cats__h2 { margin-bottom: 22px; break-inside: avoid; break-after: avoid; }
.t-homepage .cats__texto > p + p { margin-top: 1em; }
.t-homepage :is(.cats__lista, .criticos__lista) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px var(--gap);
  padding: 0;
  list-style: none;
}
.t-homepage :is(.cats__item, .criticos__enlace) { display: flex; flex-direction: column; gap: 14px; }
.t-homepage .criticos__enlace { text-decoration: none; }
.t-homepage .criticos__cuerpo { display: flex; flex-direction: column; gap: 12px; }
.t-homepage :is(.cats__img, .criticos__img) {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--foto);
}
.t-homepage .cats__item h3, .t-homepage .criticos__nombre {
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.25;
}
.t-homepage .cats__item h3 a { text-decoration: none; }
.t-homepage .cats__item p { color: var(--gris-texto); }
.t-homepage .criticos__ver { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.t-homepage .criticos { display: flex; flex-direction: column; gap: 32px; }

/* ── 3 · Precios: tres filas en tres columnas ───────────────────────────────
   Arriba, el rótulo y el H2 (4 columnas) al lado del párrafo, partido en dos
   columnas de 4. En el medio, los tramos en tarjetas blancas. Abajo, los
   párrafos del cierre, uno por columna. Todos los bordes caen en la misma
   grilla. */
.t-homepage .costo__texto { align-items: start; }
.t-homepage .costo__texto > * { grid-column: 1 / -1; }
.t-homepage .costo__rotulo { grid-column: 1 / span 4; grid-row: 1; }
.t-homepage .costo__h2 { grid-column: 1 / span 4; grid-row: 2; }
.t-homepage .costo__h2 + p {
  grid-column: 5 / -1;
  grid-row: 1 / span 2;
  columns: 2;
  column-gap: var(--gap);
}
.t-homepage .costo__texto > h3 { margin-top: 32px; }
/* Cada tarjeta toma tres filas de la lista (`subgrid`): el rótulo, el monto y
   el pie quedan a la misma altura en las tres, aunque un rótulo ocupe dos
   renglones. */
.t-homepage .costo__tramos {
  grid-row: 3;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
  margin-top: 48px;
}
.t-homepage .costo__tramo {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  row-gap: 10px;
  align-content: start;
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.t-homepage .costo__tramo dt {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.t-homepage .costo__tramo dd { margin: 0; }
.t-homepage .costo__monto {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1.1;
  color: var(--carbon);
}
.t-homepage .costo__pie { font-size: 15px; color: var(--gris-texto); }
.t-homepage .costo__tramos ~ p {
  grid-column: span 4;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--topo);
}

/* ── 4 · Por qué: las dos fotos a la izquierda, el texto numerado a la derecha
   Las fotos (5 columnas) se reparten el alto del texto (7 columnas). Cada
   párrafo lleva su número en el círculo malva, sin caja. Si el párrafo abre
   con un `**…**`, ese es su título. */
.t-homepage .why { grid-template-rows: auto 1fr; }
.t-homepage .why__cabecera { grid-column: 6 / -1; grid-row: 1; margin-bottom: 40px; }
.t-homepage .why__texto { grid-column: 6 / -1; grid-row: 2; counter-reset: why; }
.t-homepage .why__figura { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.t-homepage .why__texto > p {
  position: relative;
  padding-left: 84px;
  counter-increment: why;
}
.t-homepage .why__texto > p + p {
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid var(--linea);
}
.t-homepage .why__texto > p::before {
  content: counter(why);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pildora);
  background: var(--malva);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
}
.t-homepage .why__texto > p + p::before { top: 28px; }
.t-homepage .why__texto > p > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.25;
}
/* Sin fotos: el texto ocupa el ancho, en dos columnas. */
.t-homepage .why:not(:has(.why__figura)) :is(.why__cabecera, .why__texto) { grid-column: 1 / -1; }
.t-homepage .why:not(:has(.why__figura)) .why__texto { columns: 2; column-gap: var(--gap); }

/* ── 5 · Proceso: el texto a la izquierda, las fotos a la derecha ───────────
   Los pasos son una línea de tiempo: el número en Bodoni y un hilo topo que
   baja hasta el siguiente. Las dos fotos se reparten el alto en la
   proporción de sus huecos (960 y 540 de alto al mismo ancho: 16 a 9). */
.t-homepage .proceso__texto { grid-column: 1 / span 7; }
.t-homepage .proceso__h2 + p { margin-top: 20px; }
.t-homepage .proceso__figura { grid-column: 8 / -1; }
.t-homepage .proceso__figura > :first-child { flex-grow: 16; }
.t-homepage .proceso__figura > :last-child { flex-grow: 9; }
.t-homepage .proceso__texto > ol {
  margin-top: 40px;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}
.t-homepage .proceso__texto > ol > li {
  position: relative;
  padding: 0 0 30px 84px;
  counter-increment: paso;
}
.t-homepage .proceso__texto > ol > li:last-child { padding-bottom: 0; }
.t-homepage .proceso__texto > ol > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  text-align: center;
}
.t-homepage .proceso__texto > ol > li:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 46px;
  bottom: 10px;
  left: 26px;
  width: 1px;
  background: var(--topo);
}
.t-homepage .proceso__texto > ol > li > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}
.t-homepage .proceso:not(:has(.proceso__figura)) .proceso__texto { grid-column: 1 / -1; }

/* ── 6 · Zona: texto y foto mitad y mitad; el cierre debajo, en dos columnas
   que caen sobre las mismas dos mitades. */
.t-homepage .area__col { grid-column: 1 / span 6; display: flex; flex-direction: column; gap: 18px; }
.t-homepage .area__cabecera { margin-bottom: 4px; }
.t-homepage .area__texto { display: flex; flex-direction: column; gap: 18px; }
.t-homepage .area__figura { grid-column: 7 / -1; grid-row: 1; }
.t-homepage .area:not(:has(.area__figura)) .area__col { grid-column: 1 / span 8; }
.t-homepage .area__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.t-homepage .area__lista li {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--topo);
  border-radius: var(--pildora);
  font-size: 13px;
}
.t-homepage .area__hub { margin-top: 6px; }
.t-homepage .area__cierre {
  grid-column: 1 / -1;
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid var(--topo);
  columns: 2;
  column-gap: var(--gap);
}
.t-homepage .area__cierre > p + p { margin-top: 1em; }

/* ── 7 · Sobre Sonno: la foto a la izquierda (5), el texto a la derecha (7) */
.t-homepage .about-resumen__figura { grid-column: 1 / span 5; grid-row: 1; }
.t-homepage .about-resumen__texto { grid-column: 6 / -1; grid-row: 1; }
.t-homepage .about-resumen__texto > * + * { margin-top: 18px; }
.t-homepage .about-resumen__h2 + p { margin-top: 22px; }
.t-homepage .about-resumen__mas { margin-top: 24px; }
.t-homepage .about-resumen:not(:has(.about-resumen__figura)) .about-resumen__texto { grid-column: 1 / span 8; }

/* ── 8 · Habilitación: sin foto. Un filete arriba y la prosa en tres columnas
   parejas; el título abre la primera, como en Servicios. */
.t-homepage .normativa__texto {
  columns: 3;
  column-gap: var(--gap);
  padding-top: 40px;
  border-top: 1px solid var(--topo);
}
.t-homepage .normativa__cabecera { margin-bottom: 22px; break-inside: avoid; }
.t-homepage .normativa__cuerpo > p + p { margin-top: 1em; }

/* ── 9 · El video: un panel azul petróleo, como el hero ─────────────────────
   `base.css` centra el texto del video (⛔ 2026-09-07): con el texto a la
   izquierda y el marco a todo el ancho debajo quedaba media banda vacía.
   Acá el texto ocupa el ancho en dos columnas (el título en 5, la bajada en
   7) y el marco va debajo, del mismo ancho: el problema que la regla
   resuelve no aparece. `base.css` dice que la piel puede pisarlo. */
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) main > section.video {
  display: flex;
  flex-direction: column;
  gap: 44px;
  margin: 0 var(--lateral) var(--aire);
  padding: 64px 56px;
  border-radius: var(--foto);
  background: var(--panel);
  color: var(--blanco);
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__texto {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  column-gap: var(--gap);
  align-items: start;
  max-width: none;
  margin: 0;
  text-align: left;
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__rotulo { grid-column: 1; grid-row: 1; margin: 0; color: var(--blanco); }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__h2 { grid-column: 1; grid-row: 2; color: var(--blanco); }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__texto > p:not(.video__rotulo) { grid-column: 2; grid-row: 1 / span 2; font-size: 17px; }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__marco {
  margin: 0;
  border-radius: var(--foto);
  overflow: hidden;
  background: var(--panel);
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__marco > * {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--foto);
  background: var(--panel);   /* `base.css` lo pinta hundido: un hueco claro hasta que carga el video */
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video :focus-visible { outline-color: var(--foco-claro); }

/* ── 10 · FAQ: centrada (regla dura del 2026-09-09) ──────────────────────────
   Título y preguntas centrados, la respuesta no. 720 de lista, filete topo
   arriba, filetes finos entre preguntas y el + / − al lado. */
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__cabecera { display: flex; flex-direction: column; align-items: center; text-align: center; }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__lista { width: 100%; max-width: 760px; border-top: 1px solid var(--topo); }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__item { padding: 20px 0; border-bottom: 1px solid var(--linea); }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__pregunta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.3;
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__pregunta::-webkit-details-marker { display: none; }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__pregunta::after {
  content: "+";
  flex: none;
  font-family: var(--texto);
  font-size: 24px;
  line-height: 1;
}
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__item[open] .faq__pregunta::after { content: "\2212"; }
:is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__respuesta { margin: 12px 0 0 !important; color: var(--gris-texto); text-align: left; }

/* ── 11 · La frase suelta: una pausa antes del cierre ────────────────────── */
.t-homepage main > .cierre-lead {
  padding-inline: max(var(--lateral), calc((100% - 860px) / 2));
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
  color: var(--carbon);
}

/* ── 12 · El cierre: la banda malva ──────────────────────────────────────────
   Sobre malva solo va blanco de 24 px o más (la piel): el H2 y el párrafo en
   Bodoni de 24. El botón blanco, a la derecha. */
.t-homepage .cta-home__caja {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 20px;
  align-items: center;
}
.t-homepage .cta-home__h2 { grid-column: 1 / span 9; grid-row: 1; color: var(--blanco); }
.t-homepage .cta-home__col { display: contents; }
.t-homepage .cta-home__texto {
  grid-column: 1 / span 9;
  grid-row: 2;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.45;
  color: var(--blanco);
}
.t-homepage a.cta-home__btn {
  grid-column: 10 / -1;
  grid-row: 1 / span 2;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--pildora);
  background: var(--blanco);
  color: var(--carbon);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.t-homepage .cta-home :focus-visible { outline-color: var(--foco-claro); }

/* ═══════════════════════════════════════════════════════════════════════════
   LA PÁGINA DE SERVICIO (gbp_service) — dibujada sobre su molde (2026-10-18)
   Las mismas reglas que el Home: la grilla de 12 con canaleta de 40, la foto
   estirada al alto del texto que tiene al lado y la prosa sin foto en columnas
   parejas. El video, la FAQ y las píldoras usan las reglas del Home.
   ═══════════════════════════════════════════════════════════════════════════ */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main { max-width: none; margin: 0; padding: 0; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > :is(section, .trust, .vuelta) {
  margin: 0;
  padding-block: var(--aire);
  padding-inline: var(--lateral);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main p { max-width: none; margin: 0; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main :is(h2, h3, ul, ol, dl, figure) { margin: 0; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main picture { display: block; }

/* El fondo de cada banda, por nombre. Con la galería después de «Cuándo»
   (operador, 2026-10-18): crema · hundida · crema… desde la apertura. */
.t-gbp_service :is(.cuando, .variantes, .costo, .normativa, .faq) { background: var(--crema-hundido); }
.t-critical_gbp_service :is(.señales, .opciones, .proceso, .normativa, .faq) { background: var(--crema-hundido); }
.t-gbp_category :is(.problemas, .servicios-prosa, .why, .servicios-grilla, .faq) { background: var(--crema-hundido); }
/* El panel del video viene después de una banda hundida: aire crema arriba */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) main > section.video { margin-top: var(--aire); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta { background: var(--malva); }

:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__rotulo {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* ── 1 · El hero: el panel del Home. Filas: aire · rótulo · H1 · bajada ·
   botones · specs · aire. Las píldoras quedan debajo del panel. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > section.hero {
  display: grid;
  grid-template-columns: 56px minmax(0, 560px) 56px minmax(0, 1fr);
  grid-template-rows: 56px auto auto auto auto minmax(28px, 1fr) auto 52px;
  min-height: 660px;
  padding-top: 8px;
  padding-bottom: 0;
  color: var(--blanco);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  border-radius: var(--foto);
  background: var(--panel);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) :is(.hero__texto, .hero__figura) { display: contents; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__figura > :is(img, picture) {
  grid-column: 4 / -1;
  grid-row: 1 / -1;
  width: 100%;
  height: 100%;
  min-height: 0;
  contain: size;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 var(--foto) var(--foto) 0;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) :is(.hero__rotulo, .hero__h1, .hero__sub, .hero__acciones, .hero__specs) {
  grid-column: 2;
  position: relative;
  z-index: 1;
  color: var(--blanco);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__rotulo { grid-row: 2; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__h1 { grid-row: 3; margin: 20px 0 0; color: var(--blanco); text-wrap: balance; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__sub { grid-row: 4; margin-top: 20px; font-size: 17px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__acciones { grid-row: 5; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero .btn--primario { padding: 0 8px 0 26px; background: var(--blanco); color: var(--carbon); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero .btn--primario::after {
  content: "";
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--pildora);
  background: var(--carbon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.5'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4'/%3E%3C/svg%3E") center / 16px no-repeat;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero .btn--secundario { border-color: var(--blanco); color: var(--blanco); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero :focus-visible { outline-color: var(--foco-claro); }
/* Las 4 specs, de dos en dos, con un filete arriba */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__specs {
  grid-row: 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  border-top: 1px solid var(--topo);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__spec { padding: 16px 0 0; border: 0; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__spec dt {
  color: var(--blanco);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__spec dd {
  margin: 4px 0 0;
  color: var(--blanco);
  font-family: var(--display);
  font-weight: 600;
  font-size: 22px;
  line-height: 1.25;
}
/* Sin specs (la categoría): el texto, centrado en el alto del panel */
@media (min-width: 1101px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > section.hero:not(:has(.hero__specs)) {
    grid-template-rows: minmax(56px, 1fr) auto auto auto auto minmax(52px, 1fr);
    min-height: 560px;
  }
}
/* Las píldoras, debajo del panel, donde arranca el texto */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > .trust {
  padding-block: 20px 0;
  padding-inline: calc(var(--lateral) + 56px) var(--lateral);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .trust__item { border: 1px solid var(--linea); }

/* ── 2 · Apertura: el texto en 7 columnas, las dos fotos en 5 al alto del texto */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura, .local, .servicios-prosa, .why:has(> .why__texto)) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .apertura__texto { grid-column: 1 / span 7; grid-row: 1; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .apertura__texto > * + * { margin-top: 18px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .apertura__h2 + p { margin-top: 24px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.local__texto, .servicios-prosa__texto) { grid-column: 1 / span 7; grid-row: 1; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.local__texto, .servicios-prosa__texto) > * + * { margin-top: 18px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.local__h2, .servicios-prosa__h2) + p { margin-top: 24px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.local__figura, .servicios-prosa__figura) { grid-column: 8 / -1; grid-row: 1; }
/* Sin foto (la apertura del crítico): prosa en tres columnas parejas, el H2
   abre la primera. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura:not(:has(.apertura__figura)) .apertura__texto,
  .local:not(:has(.local__figura)) .local__texto,
  .servicios-prosa:not(:has(.servicios-prosa__figura)) .servicios-prosa__texto) {
  grid-column: 1 / -1;
  columns: 3;
  column-gap: var(--gap);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__h2, .local__h2, .servicios-prosa__h2) { break-inside: avoid; break-after: avoid; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .why__figura, .local__figura, .servicios-prosa__figura) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 420px;
  contain: size;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .apertura__figura { grid-column: 8 / -1; grid-row: 1; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .why__figura, .local__figura, .servicios-prosa__figura) > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .why__figura, .local__figura, .servicios-prosa__figura) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}

/* ── 3 · Cuándo (servicio) y Señales (crítico): ítems en dos columnas, cada
   uno con su filete; las filas se alinean de un lado al otro. La frase en
   negrita es el título del ítem. Si los ítems son impares, el H2 ocupa la
   primera celda y ninguna fila queda a medias. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando, .señales) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando__prosa, .señales__prosa) { display: contents; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando__h2, .señales__h2) { grid-column: 1 / -1; max-width: 16em; margin-bottom: 36px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando, .señales):has(> div > :last-child:nth-child(odd)) > h2 {
  grid-column: auto;
  margin-bottom: 0;
  padding: 24px 40px 24px 0;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando__prosa, .señales__prosa) > :is(p, h3) { padding: 24px 0; border-top: 1px solid var(--topo); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando__prosa, .señales__prosa) > p > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

/* ── 4 · Variantes: el H2 arriba y la prosa en dos columnas parejas; cada
   variante abre con su H3 y un filete. (Como tabla —H3 a la izquierda,
   párrafo a la derecha— dejaba vacía la columna de los títulos.) */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.variantes__h2, .problemas__h2) { max-width: 16em; margin-bottom: 36px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.variantes__prosa, .problemas__cuerpo) { columns: 2; column-gap: var(--gap); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.variantes__prosa, .problemas__cuerpo) > * + * { margin-top: 1em; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .variantes__prosa > p:first-child { font-size: 17px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.variantes__prosa, .problemas__cuerpo) > h3 {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--topo);
  font-size: 23px;
  line-height: 1.3;
  break-after: avoid;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .problemas__cuerpo > h3:first-child { margin-top: 0; }

/* ── 5 · Proceso: el H2 arriba y los pasos en dos columnas; las filas se
   alinean de un lado al otro (01 y 02, 03 y 04…), como en «Cuándo». */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
  counter-reset: paso;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso__h2 { grid-column: 1 / -1; max-width: 16em; margin-bottom: 36px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso:has(> ol > li:last-child:nth-child(odd)) > .proceso__h2 {
  grid-column: auto;
  margin-bottom: 0;
  padding: 24px 40px 24px 0;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol { display: contents; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li {
  display: block;
  position: relative;
  padding: 24px 0 24px 84px;
  border-top: 1px solid var(--topo);
  counter-increment: paso;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li::before {
  content: counter(paso, decimal-leading-zero);
  position: absolute;
  top: 22px;
  left: 0;
  width: 52px;
  font-family: var(--display);
  font-size: 34px;
  line-height: 1;
  text-align: center;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li > strong:first-child {
  display: block;
  margin-bottom: 4px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

/* ── 6 · Costo: el H2 abre la primera de tres columnas parejas de prosa ── */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo, .opciones) {
  columns: 3;
  column-gap: var(--gap);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__h2, .opciones__h2) { margin-bottom: 22px; break-inside: avoid; break-after: avoid; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__cuerpo, .opciones__prosa) > * + * { margin-top: 1em; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .opciones__intro { margin-bottom: 1em; font-size: 17px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .costo__cuerpo > h3 {
  margin-top: 1.4em;
  font-size: 21px;
  line-height: 1.3;
  break-after: avoid;
}

/* ── 7 · Por qué: la foto a la izquierda (5) al alto del texto (7); cada
   párrafo con su número en el círculo malva, como en el Home. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto { grid-column: 6 / -1; grid-row: 1; counter-reset: why; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__figura { grid-column: 1 / span 5; grid-row: 1; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why:not(:has(.why__figura)) .why__texto { grid-column: 1 / span 8; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__h2 { margin-bottom: 36px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p {
  position: relative;
  padding-left: 84px;
  counter-increment: why;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p + p { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--linea); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p::before {
  content: counter(why);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--pildora);
  background: var(--malva);
  color: var(--blanco);
  font-family: var(--display);
  font-size: 24px;
  line-height: 1;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p + p::before { top: 24px; }

/* ── El porqué de la categoría: sin foto. La entrada y la lista de razones en
   dos columnas, con la misma regla de celdas que «Cuándo»: si las razones son
   impares, la entrada ocupa la primera celda. */
.t-gbp_category .why {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.t-gbp_category .why__h2 { grid-column: 1 / -1; max-width: 16em; margin-bottom: 36px; }
.t-gbp_category .why > p { grid-column: 1 / -1; max-width: 46em; margin-bottom: 28px; font-size: 17px; }
.t-gbp_category .why:has(> ul > li:last-child:nth-child(odd)) > p {
  grid-column: auto;
  max-width: none;
  margin: 0;
  padding: 24px 40px 24px 0;
  border-top: 1px solid var(--topo);
}
.t-gbp_category .why > ul { display: contents; }
.t-gbp_category .why > ul > li { display: block; padding: 24px 0; border-top: 1px solid var(--topo); }
.t-gbp_category .why > ul > li > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

/* ── La grilla de servicios hijos (categoría): tarjetas blancas de a dos; con
   un número impar, la última toma el ancho entero. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .servicios-grilla .grilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  padding: 0;
  list-style: none;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .servicios-grilla .grilla__item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 28px;
  border: 0;
  border-radius: var(--foto);
  background: var(--blanco);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .servicios-grilla .grilla__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .grilla__enlace {
  font-family: var(--display);
  font-size: 23px;
  line-height: 1.3;
  color: var(--carbon);
  text-decoration: none;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .grilla__resumen { font-size: 15px; color: var(--gris-texto); }

/* ── 8 · Habilitación: la prosa en tres columnas (el H2 abre la primera) y
   las fichas en tarjetas blancas sobre las mismas tres columnas. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto {
  columns: 3;
  column-gap: var(--gap);
  padding-top: 40px;
  border-top: 1px solid var(--topo);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__cabecera { margin-bottom: 22px; break-inside: avoid; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto > p + p { margin-top: 1em; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__datos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 48px;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__dato {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__dato dt {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__dato dd { margin: 0; font-size: 15px; color: var(--gris-texto); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__dato dd b {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
  color: var(--carbon);
}

/* ── 11 · Galería: el H2 a la izquierda y las flechas a la derecha; cuatro
   fotos por página, sobre 3 columnas de las 12 cada una. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__cabecera { align-items: end; margin-bottom: 32px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__texto { flex: 1 1 auto; max-width: 75%; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__flecha {
  width: 52px;
  height: 52px;
  border: 1px solid var(--carbon);
  border-radius: var(--pildora);
  background: transparent;
  color: var(--carbon);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__flechas { gap: 12px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__nav { gap: 12px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__pagina { gap: var(--gap); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__figura img { aspect-ratio: 4 / 3; border-radius: var(--foto); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__pie { margin-top: 14px; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__titulo {
  font-family: var(--display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--carbon);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .galeria__detalle { display: block; margin-top: 6px; font-size: 15px; color: var(--gris-texto); }

/* ── 12 · La frase de vuelta: la pausa del Home ─────────────────────────── */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > .vuelta {
  padding-inline: max(var(--lateral), calc((100% - 860px) / 2));
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}

/* ── 13 · El cierre: la banda malva; texto blanco de 24 o más ──────────── */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: center;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__texto-bloque { grid-column: 1 / span 9; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__h2 { color: var(--blanco); }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__texto {
  margin-top: 20px;
  font-family: var(--display);
  font-size: 24px;
  line-height: 1.45;
  color: var(--blanco);
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta a.btn {
  grid-column: 10 / -1;
  justify-self: end;
  background: var(--blanco);
  color: var(--carbon);
  white-space: nowrap;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta :focus-visible { outline-color: var(--foco-claro); }

@media (max-width: 1100px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > section.hero {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-rows: 340px 48px auto auto auto auto 40px auto 48px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__figura > :is(img, picture) { grid-column: 1 / -1; grid-row: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__figura img { border-radius: var(--foto) var(--foto) 0 0; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__rotulo { grid-row: 3; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__h1 { grid-row: 4; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__sub { grid-row: 5; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__acciones { grid-row: 6; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__specs { grid-row: 8; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > .trust { padding-inline: var(--lateral); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo, .opciones, .normativa__texto,
    .apertura:not(:has(.apertura__figura)) .apertura__texto,
    .local:not(:has(.local__figura)) .local__texto,
    .servicios-prosa:not(:has(.servicios-prosa__figura)) .servicios-prosa__texto) { columns: 2; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura, .local, .servicios-prosa, .why:has(> .why__texto), .cta) { grid-template-columns: minmax(0, 1fr); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura, .local, .servicios-prosa, .why:has(> .why__texto), .cta) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .why__figura, .local__figura, .servicios-prosa__figura) {
    contain: none;
    min-height: 0;
    flex-direction: row;
    margin-top: 32px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__figura { order: -1; margin: 0 0 32px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .why__figura, .local__figura, .servicios-prosa__figura) > :is(img, picture) { flex: 1 1 0; aspect-ratio: 4 / 3; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta a.btn { justify-self: start; margin-top: 24px; }
}

@media (max-width: 760px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > section.hero {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    grid-template-rows: 280px 32px auto auto auto auto 32px auto 32px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__specs { grid-template-columns: minmax(0, 1fr); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando, .señales, .proceso) { grid-template-columns: minmax(0, 1fr); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.cuando, .señales, .proceso) > h2 { grid-column: 1 / -1 !important; margin-bottom: 36px !important; padding: 0 !important; }
  .t-gbp_category .why { grid-template-columns: minmax(0, 1fr); }
  .t-gbp_category .why > p { grid-column: 1 / -1 !important; border-top: 0 !important; padding: 0 0 24px !important; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .servicios-grilla .grilla { grid-template-columns: minmax(0, 1fr); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo, .opciones, .normativa__texto, .variantes__prosa, .problemas__cuerpo,
    .apertura:not(:has(.apertura__figura)) .apertura__texto,
    .local:not(:has(.local__figura)) .local__texto,
    .servicios-prosa:not(:has(.servicios-prosa__figura)) .servicios-prosa__texto) { columns: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__datos { grid-template-columns: minmax(0, 1fr); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p { padding-left: 64px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p::before { width: 44px; height: 44px; font-size: 21px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li { padding-left: 64px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li::before { width: 44px; font-size: 28px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > .vuelta { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LA LOCATION PAGE (location_page) — dibujada sobre su molde (2026-10-19)
   De la familia toma el hero (sin specs), las píldoras, la normativa, la FAQ,
   la galería, la frase de vuelta y el cierre. Lo propio: la entrada, el
   ángulo, «servicio ahí» y las direcciones. Va después de los cortes de la
   familia para ganarles en el orden; sus cortes, al final del bloque.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El fondo de cada banda: crema · hundida · crema… desde la apertura. La
   frase de vuelta, hundida: después de la galería (crema) no quedan dos
   bandas crema seguidas. */
.t-location_page :is(.angulo, .direcciones, .faq, .vuelta) { background: var(--crema-hundido); }

/* ── 1 · La cifra del hero (`hero_dato`; Sonno no la tiene, Davie sí): al pie
   del panel, con el filete de las specs. Sin esta regla caía fuera, en la
   columna del margen (layout.py, fixture, 19-oct). Va en la última fila (la
   flexible) y no en una fila propia: cambiar las filas pedía `:has()`, y esa
   regla, aunque no aplique, movía el antialias del hero del crítico. */
.t-location_page .hero__dato {
  grid-column: 2;
  grid-row: 6;
  align-self: end;
  position: relative;
  z-index: 1;
  margin: 28px 0 52px;          /* 28: lo mínimo entre los botones y las specs del servicio */
  padding-top: 16px;
  border-top: 1px solid var(--topo);
  color: var(--blanco);
  font-size: 15px;
}
.t-location_page .hero__dato b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
}
.t-location_page .hero__dato span { display: block; margin-top: 6px; }

/* ── 2 · Apertura: sin H2 ni foto. La entrada de la página, en dos columnas
   parejas y un punto más grande (149 palabras: 6 renglones por columna). */
.t-location_page .apertura:not(:has(.apertura__figura)) .apertura__texto {
  columns: 2;
  font-size: 19px;
  line-height: 1.65;
}

/* ── 3 · El ángulo, la sección más larga: el H2 abre la primera de tres
   columnas parejas de prosa y la foto va debajo, a todo el ancho y apaisada.
   (Al costado, estirada al alto del texto, era una tira de 500 × 990.) */
.t-location_page .angulo { columns: 3; column-gap: var(--gap); }
.t-location_page .angulo__h2 { margin-bottom: 22px; break-inside: avoid; break-after: avoid; }
.t-location_page .angulo > p + p { margin-top: 1em; }
/* Con 2 renglones mínimos al pie y arriba (lo de siempre) la primera columna
   terminaba 53 px antes que la tercera; con 1, a menos de un renglón. */
.t-location_page .angulo > p { orphans: 1; widows: 1; }
.t-location_page .angulo__figura { column-span: all; margin-top: 48px; }
.t-location_page .angulo__figura :is(img, picture) { display: block; width: 100%; }
.t-location_page .angulo__figura img {
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
  border-radius: var(--foto);
}

/* ── 4 · Servicio ahí: la foto a la izquierda (5) al alto del texto (7).
   Sin foto, la prosa en tres columnas parejas y el H2 abre la primera. */
.t-location_page :is(.servicio-ahi, .direcciones) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.t-location_page .servicio-ahi__texto { grid-column: 6 / -1; grid-row: 1; }
.t-location_page .servicio-ahi__texto > * + * { margin-top: 18px; }
.t-location_page .servicio-ahi__texto > .servicio-ahi__h2 + * { margin-top: 24px; }
.t-location_page .servicio-ahi:not(:has(.servicio-ahi__figura)) .servicio-ahi__texto {
  grid-column: 1 / -1;
  columns: 3;
  column-gap: var(--gap);
}
.t-location_page .servicio-ahi__h2 { break-inside: avoid; break-after: avoid; }
.t-location_page .servicio-ahi__figura { grid-column: 1 / span 5; grid-row: 1; }
/* La foto (y el mapa) se estiran al alto de la fila sin empujarla: con
   `contain: size` la fila la mide el texto. Como en el resto de la familia. */
.t-location_page :is(.servicio-ahi__figura, .direcciones__figura) {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  contain: size;
}
.t-location_page :is(.servicio-ahi__figura, .direcciones__figura) > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
.t-location_page :is(.servicio-ahi__figura, .direcciones__figura) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}

/* ── 5 · Direcciones: el H2, el texto y la ficha del lugar (blanca) a la
   izquierda (5); el mapa a la derecha (7), estirado al alto de la izquierda.
   La ficha baja al pie de la fila: termina donde termina el mapa. */
.t-location_page .direcciones { grid-template-rows: auto auto 1fr; }
.t-location_page :is(.direcciones__h2, .direcciones__texto, .direcciones__nap) { grid-column: 1 / span 5; }
.t-location_page .direcciones__h2 { grid-row: 1; }
.t-location_page .direcciones__texto { grid-row: 2; margin-top: 24px; }
.t-location_page .direcciones__figura { grid-column: 6 / -1; grid-row: 1 / span 3; }
.t-location_page .direcciones__nap {
  grid-row: 3;
  align-self: end;
  margin-top: 32px;
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.t-location_page .direcciones__linea + .direcciones__linea { margin-top: 4px; }
.t-location_page .direcciones__linea strong {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.25;
}
/* Sin mapa: el texto en 7 y la ficha en 5, estirada al alto del texto. */
.t-location_page .direcciones:not(:has(.direcciones__figura)) .direcciones__texto { grid-column: 1 / span 7; }
.t-location_page .direcciones:not(:has(.direcciones__figura)) .direcciones__nap {
  grid-column: 8 / -1;
  grid-row: 1 / span 3;
  align-self: stretch;
  margin-top: 0;
}

@media (max-width: 1100px) {
  .t-location_page .hero__dato { grid-row: 8; align-self: auto; margin: 0; }
  .t-location_page .angulo { columns: 2; }
  .t-location_page .servicio-ahi:not(:has(.servicio-ahi__figura)) .servicio-ahi__texto { columns: 2; }
}

@media (max-width: 900px) {
  /* Una sola columna, en el orden del HTML; la foto de «servicio ahí» va
     primero, como en escritorio. Las fotos dejan de estirarse. */
  .t-location_page :is(.servicio-ahi, .direcciones) { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .t-location_page :is(.servicio-ahi, .direcciones) > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .t-location_page :is(.servicio-ahi__figura, .direcciones__figura) { contain: none; min-height: 0; margin-top: 32px; }
  .t-location_page .servicio-ahi__figura { order: -1; margin: 0 0 32px; }
  .t-location_page .servicio-ahi__figura > :is(img, picture) { flex: none; aspect-ratio: 4 / 3; }
  .t-location_page .direcciones__figura > :is(img, picture) { flex: none; aspect-ratio: 3 / 2; }
  .t-location_page .direcciones__nap { align-self: auto; }
}

@media (max-width: 760px) {
  .t-location_page :is(.angulo, .servicio-ahi:not(:has(.servicio-ahi__figura)) .servicio-ahi__texto) { columns: 1; }
  .t-location_page .apertura:not(:has(.apertura__figura)) .apertura__texto { columns: 1; font-size: 18px; }
  .t-location_page .angulo__figura { margin-top: 32px; }
  .t-location_page .angulo__figura img { aspect-ratio: 4 / 3; }
  .t-location_page .direcciones__nap { padding: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOS TRES HUBS (services_hub, locations_hub, resources_hub) — UN dibujo para
   los tres, sobre su molde (2026-10-19). De la familia toman el hero (sin
   specs), las píldoras, la FAQ, la galería, la vuelta y el cierre. Lo propio:
   la tarjeta del índice (la misma en los tres), las aperturas, las preguntas en
   zigzag, las combinaciones, el alcance, la ciudad, el porqué de /resources/ y
   los dos paneles azules (contra y cobertura). Sin `:has()`: lo que depende de
   si hay foto o de cuántas tarjetas hay se resuelve con `:only-child`,
   `:last-child` y `:nth-child`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El fondo de cada banda: crema · hundida · crema… Los paneles azules van
   sobre crema, como el del video; la vuelta, hundida (después de la galería). */
.t-services_hub :is(.preguntas, .combinaciones, .alcance, .faq, .vuelta),
.t-locations_hub :is(.geo, .locations, .faq, .vuelta),
.t-resources_hub :is(.bloque, .faq, .vuelta) { background: var(--crema-hundido); }

/* El rótulo chico en mayúsculas arriba de cada sección, y su distancia al H2 */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__rotulo, .catalogo__eyebrow, .hub-ciudad__rotulo, .faq__rotulo) {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__rotulo, .catalogo__eyebrow, .hub-ciudad__rotulo, .faq__rotulo) + h2 { margin-top: 14px; }

/* ── 1 · La apertura (y la entrada de /locations/): con foto, el texto en 7 y
   las fotos en 5 al alto del texto; sin foto (el texto es el único hijo), el
   rótulo y el H2 arriba y la prosa en dos columnas parejas a 19 px, como la
   entrada de location. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura, .hub-intro) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto) { grid-column: 1 / span 7; grid-row: 1; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto) > * + * { margin-top: 18px; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .apertura__h2 { max-width: 16em; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .apertura__h2 + * { margin-top: 24px; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto) > h3 {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--topo);
  font-size: 23px;
  line-height: 1.3;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child {
  grid-column: 1 / -1;
  columns: 2;
  column-gap: var(--gap);
  font-size: 19px;
  line-height: 1.65;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child > :is(.apertura__rotulo, .apertura__h2) { column-span: all; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child > .apertura__h2 { margin-bottom: 32px; }
/* Después del H2 que abarca las dos columnas, el primer párrafo no lleva margen:
   la segunda columna arranca sin él y las dos quedan a la misma altura. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child > .apertura__h2 + * { margin-top: 0; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child > h3 { break-after: avoid; }

/* Una foto que acompaña al texto: se estira al alto de la fila sin empujarla
   (`contain: size`: la fila la mide el texto), como en el resto del sitio. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .preguntas__figura, .hub-ciudad__figura, .hub-cobertura__figura) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 260px;
  contain: size;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .hub-ciudad__figura) { min-height: 420px; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .preguntas__figura, .hub-ciudad__figura, .hub-cobertura__figura) > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .preguntas__figura, .hub-ciudad__figura, .hub-cobertura__figura) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura) { grid-column: 8 / -1; grid-row: 1; }

/* ── 2 · Las preguntas (/services/): zigzag, el texto en 7 y la foto en 5 al
   alto del texto; la segunda fila, al revés (la foto viene primero en el HTML).
   El H3 es la pregunta: el título de la fila. Sin foto, la prosa a dos columnas. */
.t-services_hub .preguntas { display: flex; flex-direction: column; gap: 56px; }
.t-services_hub .preguntas__fila {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.t-services_hub .preguntas__texto { grid-column: 1 / span 7; grid-row: 1; }
.t-services_hub .preguntas__figura { grid-column: 8 / -1; grid-row: 1; }
.t-services_hub .preguntas__fila--inv .preguntas__texto { grid-column: 6 / -1; }
.t-services_hub .preguntas__fila--inv .preguntas__figura { grid-column: 1 / span 5; }
.t-services_hub .preguntas__texto:only-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }
.t-services_hub .preguntas__texto > * + * { margin-top: 1em; }
.t-services_hub .preguntas__texto > h3 {
  margin-bottom: 8px;
  font-size: 32px;
  line-height: 1.2;
  text-wrap: balance;
  column-span: all;
}

/* ── 3 · Las combinaciones: la misma banda que las preguntas. Cada párrafo con
   entradilla en negrita es una tarjeta blanca, de dos en dos; el último (sin
   negrita) cierra a todo el ancho con un filete. Si las tarjetas son impares,
   la última toma la fila entera. */
.t-services_hub .preguntas + .combinaciones { padding-top: 0; }
.t-services_hub .combinaciones {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap);
  align-items: stretch;
}
.t-services_hub .combinaciones > p {
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.t-services_hub .combinaciones > p > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
}
.t-services_hub .combinaciones > p:nth-last-child(2):nth-child(odd) { grid-column: 1 / -1; }
.t-services_hub .combinaciones > p:last-child {
  grid-column: 1 / -1;
  padding: 24px 0 0;
  border-top: 1px solid var(--topo);
  border-radius: 0;
  background: none;
  font-size: 17px;
}

/* ── 4 · La tarjeta del índice, LA MISMA en los tres hubs: blanca, la foto
   16:10 arriba (si la hay), el rótulo, el nombre en Bodoni y «See the page →»
   al pie; el nombre estira el enlace sobre toda la tarjeta. Tres por fila
   sobre seis pistas; si la última fila queda con dos, se abren a media fila, y
   con una, a la fila entera. Cada tarjeta toma cuatro filas de la grilla
   (`subgrid`): la foto, el rótulo, el nombre y el enlace quedan a la misma
   altura en toda la fila. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__cabecera { max-width: 46em; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__h2 { max-width: 16em; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__grilla {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 0;
  margin: 40px 0 calc(-1 * var(--gap));
  padding: 0;
  list-style: none;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item {
  position: relative;
  grid-column: span 2;
  grid-row: span 4;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  margin-bottom: var(--gap);
  border-radius: var(--foto);
  background: var(--blanco);
  overflow: hidden;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item > picture { display: contents; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__img {
  grid-row: 1;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__cuerpo {
  grid-row: 2 / span 3;
  display: grid;
  grid-template-rows: subgrid;
  row-gap: 0;
  padding: 24px 28px 28px;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__rotulo {
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--gris-texto);
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__nombre {
  margin-top: 10px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 23px;
  line-height: 1.3;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) a.catalogo__enlace { color: var(--carbon); text-decoration: none; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) a.catalogo__enlace::after { content: ""; position: absolute; inset: 0; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:hover a.catalogo__enlace { color: var(--gris-texto); }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__ver {
  align-self: end;
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
/* Con dos de sobra (3n+2), las dos últimas a media fila; con una (3n+1), las
   CUATRO últimas a media fila, de dos en dos. Una tarjeta sola, a la fila entera. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(
  .catalogo__item:nth-last-child(2):nth-child(3n+1), .catalogo__item:last-child:nth-child(3n+2),
  .catalogo__item:nth-last-child(4):nth-child(3n+1), .catalogo__item:nth-last-child(4):nth-child(3n+1) ~ .catalogo__item) {
  grid-column: span 3;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:only-child {
  grid-column: 1 / -1;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
}
/* Sola y con foto: la foto a la izquierda (5) y el texto al lado. */
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:only-child .catalogo__img {
  grid-column: 1;
  grid-row: 1 / -1;
  height: 100%;
  aspect-ratio: auto;
}
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:only-child .catalogo__cuerpo { grid-column: 2; }
:is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:only-child > .catalogo__cuerpo:first-child { grid-column: 1 / -1; }

/* ── 5 · Los índices de /locations/ y /resources/: un bloque por página de
   dinero, todos en la misma banda, separados por un filete. El encabezado en 7
   columnas; con tarjetas, la grilla debajo; sin ellas, «in preparation» a la
   derecha, en la misma fila. El rótulo, sólo en el primero. */
:is(.t-locations_hub, .t-resources_hub) main > :is(.geo, .bloque, .locations) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: end;
  padding-block: 32px;
}
:is(.t-locations_hub, .t-resources_hub) :is(.geo, .bloque, .locations) > .catalogo__cabecera { grid-column: 1 / span 7; }
:is(.t-locations_hub, .t-resources_hub) :is(.geo, .bloque, .locations) > .catalogo__grilla { grid-column: 1 / -1; }
:is(.t-locations_hub, .t-resources_hub) .catalogo__pendiente {
  grid-column: 8 / -1;
  padding-bottom: 6px;
  text-align: right;
  color: var(--gris-texto);
}
:is(.t-locations_hub, .t-resources_hub) :is(.geo__h2, .bloque__h2, .locations__h2) a { color: var(--carbon); text-decoration: none; }
:is(.t-locations_hub, .t-resources_hub) :is(.geo__h2, .bloque__h2) a:hover { color: var(--gris-texto); }
.t-locations_hub .hub-intro + .geo,
.t-resources_hub .apertura + .bloque { padding-top: var(--aire); }
.t-locations_hub .geo + .geo .catalogo__eyebrow,
.t-resources_hub .bloque + .bloque:not(.bloque--general) .catalogo__eyebrow { display: none; }
.t-locations_hub .geo + .geo .catalogo__eyebrow + h2,
.t-resources_hub .bloque + .bloque:not(.bloque--general) .catalogo__eyebrow + h2 { margin-top: 0; }
/* El filete entre bloques: una línea en el ancho del contenido, no del borde */
:is(.t-locations_hub, .t-resources_hub) :is(.geo + .geo, .geo + .locations, .bloque + .bloque) {
  background: linear-gradient(var(--topo), var(--topo)) center top / calc(100% - 2 * var(--lateral)) 1px no-repeat,
              var(--crema-hundido);
}
/* El fondo de la banda sigue 28 px debajo del último bloque: 60 de aire */
.t-locations_hub :is(.geo, .locations) + :not(.geo, .locations),
.t-resources_hub .bloque + :not(.bloque) { border-top: 28px solid var(--crema-hundido); }

/* ── 6 · Alcance (/services/): dos columnas de prosa, cada una abre con su H3 y
   un filete; el último párrafo de la segunda es el recuadro blanco. */
.t-services_hub .alcance {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.t-services_hub .alcance__col:only-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }
.t-services_hub .alcance__col > * + * { margin-top: 1em; }
.t-services_hub .alcance__col > h3 {
  margin-bottom: 18px;
  padding-top: 24px;
  border-top: 1px solid var(--topo);
  font-size: 25px;
  line-height: 1.25;
}
.t-services_hub .alcance__col--2 > p:last-child {
  padding: 14px 20px;
  font-size: 15px;
  border-radius: var(--foto);
  background: var(--blanco);
}

/* ── 7 · Los paneles azules: «lo que te vamos a desaconsejar» (/services/) y
   la cobertura (/locations/), como el panel del video. El de contra: el H3
   arriba y la prosa en dos columnas parejas. El de cobertura: el H2 y el texto
   en 7, la foto en 5 al alto de los dos; sin foto, la prosa a dos columnas. */
:is(.t-services_hub, .t-locations_hub) main > :is(section.contra, section.hub-cobertura) {
  margin: 0 var(--lateral) var(--aire);
  padding: 64px 56px;
  border-radius: var(--foto);
  background: var(--panel);
  color: var(--blanco);
}
.t-services_hub main > section.contra { margin-top: var(--aire); columns: 2; column-gap: var(--gap); }
.t-services_hub .contra > h3 {
  column-span: all;
  max-width: 16em;
  margin-bottom: 32px;
  color: var(--blanco);
  font-size: 2.6rem;
  line-height: 1.12;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.t-services_hub .contra > p + p { margin-top: 1em; }
.t-locations_hub main > section.hub-cobertura {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: auto 1fr;
  column-gap: var(--gap);
}
.t-locations_hub .hub-cobertura__h2 { grid-column: 1 / span 7; grid-row: 1; max-width: 16em; margin-bottom: 28px; color: var(--blanco); }
.t-locations_hub .hub-cobertura__texto { grid-column: 1 / span 7; grid-row: 2; }
.t-locations_hub .hub-cobertura__texto > * + * { margin-top: 1em; }
.t-locations_hub .hub-cobertura__figura { grid-column: 8 / -1; grid-row: 1 / span 2; }
.t-locations_hub .hub-cobertura__texto:last-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }

/* ── 8 · La ciudad (/locations/): las dos fotos a la izquierda (5) al alto del
   texto (7). Las entradillas en negrita, como en «Cuándo». */
.t-locations_hub .hub-ciudad {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.t-locations_hub .hub-ciudad__texto { grid-column: 6 / -1; grid-row: 1; }
.t-locations_hub .hub-ciudad__figura { grid-column: 1 / span 5; grid-row: 1; }
.t-locations_hub .hub-ciudad__texto:only-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }
.t-locations_hub .hub-ciudad__texto > * + * { margin-top: 18px; }
.t-locations_hub .hub-ciudad__h2 { max-width: 16em; }
.t-locations_hub .hub-ciudad__h2 + p { margin-top: 24px; }
:is(.t-locations_hub .hub-ciudad__texto, .t-resources_hub .why__texto) > p > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

/* ── 9 · El porqué (/resources/): sin foto. La entrada y las razones en dos
   columnas, cada una con su filete; las filas se alinean de un lado al otro.
   Con un número impar de celdas, la última toma la fila entera. */
.t-resources_hub .why__texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.t-resources_hub .why__h2 { grid-column: 1 / -1; max-width: 16em; margin-bottom: 36px; }
.t-resources_hub .why__texto > ul { display: contents; }
.t-resources_hub .why__texto > :is(p, ul > li) { display: block; padding: 24px 0; border-top: 1px solid var(--topo); }
.t-resources_hub .why__texto > p:first-of-type { padding-right: 40px; font-size: 17px; }
.t-resources_hub .why__texto > p:last-child:nth-child(even),
.t-resources_hub .why__texto > p + ul > li:last-child:nth-child(even) { grid-column: 1 / -1; }
.t-resources_hub .why__texto > ul > li > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

@media (max-width: 900px) {
  /* Una sola columna, en el orden del HTML salvo las fotos, que van primero;
     dejan de estirarse y toman su proporción. Las tarjetas, de a dos. */
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura, .hub-intro, .preguntas__fila, .hub-ciudad, .cta),
  .t-locations_hub main > section.hub-cobertura { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura, .hub-intro, .preguntas__fila, .hub-ciudad, .cta) > *,
  .t-locations_hub main > section.hub-cobertura > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .preguntas__figura, .hub-ciudad__figura, .hub-cobertura__figura) {
    order: -1;
    contain: none;
    min-height: 0;
    flex-direction: row;
    margin: 0 0 32px;
  }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__figura, .hub-intro__figura, .preguntas__figura, .hub-ciudad__figura, .hub-cobertura__figura) > :is(img, picture) {
    flex: 1 1 0;
    aspect-ratio: 4 / 3;
  }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .cta a.btn { justify-self: start; margin-top: 24px; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__grilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:is(*, :only-child, :nth-last-child(2):nth-child(3n+1), :last-child:nth-child(3n+2),
    :nth-last-child(4):nth-child(3n+1), :nth-last-child(4):nth-child(3n+1) ~ .catalogo__item) {
    grid-column: span 1;
    grid-template-columns: none;
  }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item .catalogo__img { grid-column: auto; grid-row: 1; height: auto; aspect-ratio: 16 / 10; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item .catalogo__cuerpo { grid-column: auto; }
}

@media (max-width: 760px) {
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) :is(.apertura__texto, .hub-intro__texto):only-child { columns: 1; font-size: 18px; }
  .t-services_hub :is(.preguntas__texto:only-child, .alcance__col:only-child),
  .t-services_hub main > section.contra,
  .t-locations_hub :is(.hub-ciudad__texto:only-child, .hub-cobertura__texto:last-child) { columns: 1; }
  .t-services_hub .preguntas__texto > h3 { font-size: 26px; }
  .t-services_hub :is(.combinaciones, .alcance),
  .t-resources_hub .why__texto { grid-template-columns: minmax(0, 1fr); }
  .t-services_hub .alcance__col + .alcance__col { margin-top: 32px; }
  .t-resources_hub .why__texto > :is(p, ul > li) { grid-column: 1 / -1; }
  .t-resources_hub .why__texto > p:first-of-type { padding-right: 0; }
  :is(.t-services_hub, .t-locations_hub) main > :is(section.contra, section.hub-cobertura) { padding: 36px 24px; }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__grilla { grid-template-columns: minmax(0, 1fr); }
  :is(.t-services_hub, .t-locations_hub, .t-resources_hub) .catalogo__item:is(*, :last-child:nth-child(odd)) { grid-column: 1 / -1; }
  :is(.t-locations_hub, .t-resources_hub) :is(.geo, .bloque, .locations) > :is(.catalogo__cabecera, .catalogo__pendiente) { grid-column: 1 / -1; }
  :is(.t-locations_hub, .t-resources_hub) .catalogo__pendiente { margin-top: 12px; padding: 0; text-align: left; }
  .t-services_hub .contra > h3 { font-size: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL ARTÍCULO (supporting_content) — sobre su molde (2026-10-19). Sin hero: el
   <article class="sc"> abre con el mismo panel azul de todas las páginas,
   armado sobre su propia grilla (el texto a la izquierda y la foto 1 a la
   derecha; en el HTML la foto sigue DESPUÉS de la respuesta). De la familia
   toma las píldoras, el contexto local, el video, la FAQ, la galería, la
   vuelta y el cierre. Sin `:has()`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El fondo de cada banda: el panel sobre crema · desarrollo 1 crema · banda 2
   hundida · desarrollo 3 crema · local hundida · la frase al Home crema · el
   panel del video · FAQ hundida · galería crema · vuelta hundida. */
.t-supporting_content :is(.sc__banda2, .local, .faq, .vuelta) { background: var(--crema-hundido); }

/* ── 1 · La apertura: el panel. Columnas: margen · aire · texto (560) · aire ·
   foto · margen. Filas: aire · rótulo · H1 · respuesta · resorte · cifras ·
   aire; debajo, las píldoras y los tres bloques del desarrollo, a lo ancho. */
.t-supporting_content .sc {
  display: grid;
  grid-template-columns: var(--lateral) 56px minmax(0, 560px) 56px minmax(0, 1fr) var(--lateral);
  grid-template-rows: 56px auto auto auto minmax(28px, 1fr) auto 52px;
  padding-top: 8px;
}
.t-supporting_content .sc::before {
  content: "";
  grid-column: 2 / 6;
  grid-row: 1 / 8;
  border-radius: var(--foto);
  background: var(--panel);
}
.t-supporting_content :is(.sc__rotulo, .sc__h1, .sc__respuesta, .sc__cifras) {
  grid-column: 3;
  position: relative;
  z-index: 1;
  color: var(--blanco);
}
.t-supporting_content .sc__rotulo { grid-row: 2; font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.t-supporting_content .sc__h1 { grid-row: 3; margin: 20px 0 0; color: var(--blanco); text-wrap: balance; }
.t-supporting_content .sc__respuesta { grid-row: 4; margin-top: 22px; font-size: 17px; }
.t-supporting_content .sc__respuesta a { color: var(--blanco); }
/* Las dos cifras, lado a lado con el filete de las specs. Cada una toma tres
   filas (`subgrid`): el rótulo, el dato y el pie quedan a la misma altura en
   las dos aunque un rótulo ocupe dos renglones. */
.t-supporting_content .sc__cifras {
  grid-row: 6;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 32px;
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--topo);
}
.t-supporting_content .sc__cifra { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
.t-supporting_content .sc__cifra-rotulo { font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.t-supporting_content .sc__cifra-dato {
  margin: 6px 0 0;
  font-family: var(--display);
  font-size: 26px;
  line-height: 1.2;
}
.t-supporting_content .sc__cifra-pie { margin: 4px 0 0; font-size: 15px; }
/* La foto 1: el fondo de la mitad derecha del panel, al alto del texto */
.t-supporting_content .sc__figura {
  grid-column: 5;
  grid-row: 1 / 8;
  display: flex;
  flex-direction: column;
  margin: 0;
  min-height: 0;
  contain: size;
}
.t-supporting_content .sc__figura > :is(img, picture) { flex: 1 1 0; width: 100%; min-height: 0; }
.t-supporting_content .sc__figura img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 var(--foto) var(--foto) 0;
}
/* Las píldoras, debajo del panel, donde arranca el texto */
.t-supporting_content .sc > .trust { grid-column: 3 / 6; padding-top: 20px; }

/* ── 2 · El desarrollo: tres bandas a lo ancho. La 1 y la 3: el H2 arriba y la
   prosa en dos columnas parejas. La 2 (la caja de la plantilla): la foto 2 a
   la izquierda (5) al alto del texto (7); sin foto, la prosa a dos columnas. */
.t-supporting_content :is(.sc__desarrollo--1, .sc__banda2, .sc__desarrollo--3) {
  grid-column: 1 / -1;
  padding: var(--aire) var(--lateral);
}
.t-supporting_content .sc > .sc__desarrollo { columns: 2; column-gap: var(--gap); }
.t-supporting_content .sc__desarrollo > h2 { column-span: all; max-width: 16em; margin-bottom: 32px; }
.t-supporting_content .sc__desarrollo > :is(p, ul, ol) + :is(p, ul, ol) { margin-top: 1em; }
.t-supporting_content .sc__banda2 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.t-supporting_content .sc__banda2:empty { display: none; }
.t-supporting_content .sc__desarrollo--2 { grid-column: 6 / -1; grid-row: 1; }
.t-supporting_content .sc__desarrollo--2 > h2 { margin-bottom: 28px; }
.t-supporting_content .sc__desarrollo--2:only-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }
.t-supporting_content .sc__figura2 {
  grid-column: 1 / span 5;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 420px;
  margin: 0;
  contain: size;
}
.t-supporting_content .sc__figura2:only-child { grid-column: 1 / -1; min-height: 0; contain: none; }
.t-supporting_content .sc__figura2 > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
.t-supporting_content .sc__figura2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}

/* ── 3 · La frase al Home: la pausa de la vuelta, sobre crema. El video que la
   sigue no suma su aire de arriba (ya lo puso la frase). */
.t-supporting_content main > .sc__home {
  margin: 0;
  padding: var(--aire) max(var(--lateral), calc((100% - 860px) / 2));
  font-family: var(--display);
  font-size: 28px;
  line-height: 1.45;
  text-align: center;
  text-wrap: balance;
}
.t-supporting_content main > .sc__home + section.video { margin-top: 0; }

@media (max-width: 1100px) {
  /* El panel pasa a columna: la foto arriba (340 de alto) y el texto abajo. */
  .t-supporting_content .sc {
    grid-template-columns: var(--lateral) 48px minmax(0, 1fr) 48px var(--lateral);
    grid-template-rows: 340px 48px auto auto auto 40px auto 48px;
  }
  .t-supporting_content .sc::before { grid-column: 2 / 5; grid-row: 1 / 9; }
  .t-supporting_content .sc__figura { grid-column: 2 / 5; grid-row: 1; }
  .t-supporting_content .sc__figura img { border-radius: var(--foto) var(--foto) 0 0; }
  .t-supporting_content .sc__rotulo { grid-row: 3; }
  .t-supporting_content .sc__h1 { grid-row: 4; }
  .t-supporting_content .sc__respuesta { grid-row: 5; }
  .t-supporting_content .sc__cifras { grid-row: 7; }
  .t-supporting_content .sc > .trust { grid-column: 2 / 5; grid-row: 9; }
}

@media (max-width: 900px) {
  .t-supporting_content .sc__banda2 { grid-template-columns: minmax(0, 1fr); }
  .t-supporting_content .sc__banda2 > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .t-supporting_content .sc__figura2 { order: -1; min-height: 0; margin-bottom: 32px; contain: none; }
  .t-supporting_content .sc__figura2 > :is(img, picture) { flex: none; aspect-ratio: 4 / 3; }
}

@media (max-width: 760px) {
  .t-supporting_content .sc {
    grid-template-columns: var(--lateral) 24px minmax(0, 1fr) 24px var(--lateral);
    grid-template-rows: 280px 32px auto auto auto 32px auto 32px;
  }
  .t-supporting_content .sc__cifras { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .t-supporting_content .sc > .sc__desarrollo,
  .t-supporting_content .sc__desarrollo--2:only-child { columns: 1; }
  .t-supporting_content main > .sc__home { font-size: 24px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   ABOUT, CONTACTO Y PRIVACIDAD (utility) — sobre su molde (2026-10-19).
   Comparten el tipo y no el dibujo: cada bloque va con la clase de su página
   (`.p-about`, `.p-contact`, `.p-privacy-policy`). De la familia toman el hero,
   las píldoras, la habilitación (Contacto), la FAQ, la galería, la vuelta y el
   cierre. Sin `:has()`: lo que depende de si hay foto, de `:only-child`.
   ═══════════════════════════════════════════════════════════════════════════ */
/* El fondo de cada banda: crema · hundida · crema… */
.p-about :is(.propietario, .credenciales, .faq, .vuelta),
.p-contact :is(.contacto, .refuerzo, .faq, .vuelta),
.p-privacy-policy :is(.indice, .legal__contacto, .faq) { background: var(--crema-hundido); }

/* El rótulo chico en mayúsculas, y su distancia al H2 */
.t-utility :is(.historia__rotulo, .propietario__rotulo, .area__rotulo, .credenciales__rotulo, .redes__rotulo,
  .contacto__rotulo-seccion, .areas__rotulo, .normativa__rotulo, .faq__rotulo, .indice__rotulo, .legal__fecha) {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.t-utility :is(.historia__rotulo, .propietario__rotulo, .area__rotulo, .credenciales__rotulo, .redes__rotulo,
  .contacto__rotulo-seccion, .areas__rotulo, .normativa__rotulo, .faq__rotulo) + h2 { margin-top: 14px; }

/* Una foto que acompaña al texto: se estira al alto de la fila sin empujarla */
.t-utility :is(.historia__figura, .area__figura, .credenciales__figura) {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  contain: size;
}
.t-utility :is(.historia__figura, .area__figura, .credenciales__figura) > :is(img, picture) {
  flex: 1 1 0;
  width: 100%;
  min-height: 0;
  border-radius: var(--foto);
  overflow: hidden;
}
.t-utility :is(.historia__figura, .area__figura, .credenciales__figura) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}
/* Las píldoras de barrios (About y Contacto), las del Home */
.t-utility :is(.area__lista, .areas__lista) {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.t-utility :is(.area__lista, .areas__lista) li {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  border: 1px solid var(--topo);
  border-radius: var(--pildora);
  font-size: 13px;
}

/* ── About · 1 · La historia: el texto en 7, las dos fotos en 5 al alto del
   texto. 2 · El propietario: el H2 y el cargo arriba, la prosa a dos columnas.
   3 · La zona: el texto en 7; en 5, la foto estirada y las píldoras debajo.
   4 · Las credenciales: la foto a la izquierda (5); cada entradilla en Bodoni
   con su filete. 5 · Las redes: el H2 a la izquierda, los perfiles a la derecha. */
.p-about :is(.historia, .area, .credenciales, .redes) {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
}
.p-about :is(.historia__texto, .area__texto, .credenciales__texto) > * + * { margin-top: 18px; }
.p-about :is(.historia__h2, .area__h2, .credenciales__h2, .propietario__h2) { max-width: 16em; }
.p-about :is(.historia__h2, .area__h2, .credenciales__h2) + p { margin-top: 24px; }
.p-about .historia__texto { grid-column: 1 / span 7; grid-row: 1; }
.p-about .historia__figura { grid-column: 8 / -1; grid-row: 1; }
.p-about .historia__texto:only-child { grid-column: 1 / -1; columns: 2; column-gap: var(--gap); }
.p-about .historia__texto:only-child > :is(.historia__rotulo, .historia__h2) { column-span: all; }

.p-about .propietario__texto { columns: 2; column-gap: var(--gap); }
.p-about .propietario__texto > :is(.propietario__rotulo, .propietario__h2, .propietario__cargo, img) { column-span: all; }
.p-about .propietario__cargo {
  margin: 12px 0 32px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
}
.p-about .propietario__texto > img {
  width: 120px;
  height: 120px;
  margin-top: 24px;
  border-radius: var(--pildora);
  object-fit: cover;
}
.p-about .propietario__texto > p:not(.propietario__cargo) + p { margin-top: 1em; }

.p-about .area__texto { grid-column: 1 / span 7; grid-row: 1; }
.p-about .area__texto > p:last-child { margin-top: 28px; }
.p-about .area__col {
  grid-column: 8 / -1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
  contain: size;
}
.p-about .area__figura { flex: 1 1 0; }

.p-about .credenciales { display: block; }
.p-about .credenciales__texto {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 0 var(--gap);
  align-items: start;
}
.p-about .credenciales__texto > * + * { margin-top: 0; }
/* Como «Cuándo»: la primera celda es el rótulo, el H2 y la entrada (tres
   filas; la última, flexible, toma el alto de la razón de al lado); las cinco
   razones, cada una con su filete, de dos en dos. */
.p-about .credenciales__texto > .credenciales__rotulo { grid-column: 1; grid-row: 1; }
.p-about .credenciales__texto > .credenciales__h2 { grid-column: 1; grid-row: 2; }
.p-about .credenciales__texto > .credenciales__h2 + p { grid-column: 1; grid-row: 3; margin-top: 18px; font-size: 17px; }
.p-about .credenciales__texto > :is(.credenciales__rotulo, .credenciales__h2, .credenciales__h2 + p) { padding-right: 40px; }
.p-about .credenciales__texto > .credenciales__h2 + p { padding-bottom: 24px; }
.p-about .credenciales__texto > p + p,
.p-about .credenciales__texto > ul > li { padding: 24px 0; border-top: 1px solid var(--topo); }
.p-about .credenciales__texto > p + p:nth-child(4) { grid-column: 2; grid-row: 1 / span 3; }
.p-about .credenciales__texto > ul { display: contents; }
.p-about .credenciales__figura { margin-top: 48px; contain: none; }
.p-about .credenciales__figura > :is(img, picture) { flex: none; }
.p-about .credenciales__figura img { height: auto; aspect-ratio: 21 / 9; }
.p-about :is(.credenciales__texto > p, .credenciales__texto > ul > li) > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}

.p-about .redes { align-items: center; row-gap: 14px; }
.p-about .redes > :not(ul) { grid-column: 1 / span 4; }
.p-about .redes > ul {
  grid-column: 5 / -1;
  grid-row: 1 / span 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.p-about .redes a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 20px;
  border: 1px solid var(--carbon);
  border-radius: var(--pildora);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

/* ── Contacto · 1 · El hero de la familia y, debajo del panel, el formulario
   en una tarjeta blanca a todo el ancho: el H2 y la nota arriba, los cuatro
   campos en una fila, el mensaje a lo ancho y el aviso con el botón al pie. */
.p-contact main > section.hero { grid-template-rows: 56px auto auto auto auto minmax(28px, 1fr) auto 52px auto; }
.p-contact .hero::before { grid-row: 1 / 9; }
.p-contact .hero__figura > :is(img, picture) { grid-row: 1 / 9; }
.p-contact .hero__form { grid-column: 1 / -1; grid-row: 9; position: relative; z-index: 1; margin-top: 20px; }
.p-contact .hero__form :focus-visible { outline-color: var(--foco); }
.p-contact .hero__form .form {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  margin: 0;
  padding: 40px 48px;
  border-radius: var(--foto);
  background: var(--blanco);
  color: var(--carbon);
}
.p-contact .form__h2 { grid-column: 1 / span 6; color: var(--carbon); }
.p-contact .form__nota { grid-column: 7 / -1; align-self: end; text-align: right; color: var(--gris-texto); }
.p-contact .form__nota a { color: var(--carbon); }
.p-contact .form__campos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px var(--gap);
  margin-top: 32px;
}
/* Cada etiqueta llena su fila y el campo baja al pie: si una etiqueta parte
   en dos renglones, los campos de la fila siguen alineados. */
.p-contact .form__campos > label {
  display: flex;
  flex-wrap: wrap;
  align-content: space-between;
  align-items: baseline;
  gap: 8px 6px;
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--carbon);
}
.p-contact .form__campos > label:last-of-type { grid-column: 1 / -1; }
.p-contact .form__opcional { text-transform: none; letter-spacing: 0; color: var(--gris-texto); }
.p-contact .form__campos :is(input, textarea) {
  display: block;
  flex: 1 0 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--crema);
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
}
.p-contact .form__legal { grid-column: 1 / span 3; align-self: center; font-size: 14px; color: var(--gris-texto); }
.p-contact .form__legal a { color: var(--carbon); }
.p-contact .hero__form .form__campos > button.btn--primario {
  grid-column: 4;
  justify-self: end;
  align-self: center;
  padding: 0 32px;
  border: 0;
  background: var(--carbon);
  color: var(--blanco);
  cursor: pointer;
}
.p-contact .hero__form .form__campos > button.btn--primario::after { content: none; }

/* ── Contacto · 2 · Los tres datos: tarjetas, la del teléfono en azul. El
   valor parte donde haga falta (un correo largo desbordaba a 390). */
.p-contact .contacto__cabecera { margin-bottom: 40px; }
.p-contact .contacto__grilla {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.p-contact .contacto__dato {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
  color: var(--carbon);
  text-decoration: none;
}
.p-contact .contacto__dato--tel { background: var(--panel); color: var(--blanco); white-space: normal; }
/* `base.css` no deja partir un enlace `tel:`: el número sigue entero, el horario
   del pie baja de renglón (a 890 se salía de la tarjeta; layout.py, fixture). */
.p-contact .contacto__dato--tel .contacto__valor { white-space: nowrap; }
.p-contact .contacto__dato--tel:hover { color: var(--blanco); }
.p-contact .contacto__dato--tel :focus-visible, .p-contact .contacto__dato--tel:focus-visible { outline-color: var(--foco); }
.p-contact .contacto__rotulo { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-texto); }
.p-contact .contacto__dato--tel .contacto__rotulo { color: var(--blanco); }
.p-contact .contacto__valor {
  font-family: var(--display);
  font-weight: 600;
  font-style: normal;
  font-size: 26px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
.p-contact .contacto__pie { font-size: 15px; color: var(--gris-texto); }
.p-contact .contacto__dato--tel .contacto__pie { color: var(--blanco); }

/* ── Contacto · 3 · Las áreas: el encabezado a la izquierda (5), las píldoras
   y el enlace a la derecha (7). */
.p-contact .areas {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.p-contact .areas__cabecera { grid-column: 1 / span 5; grid-row: 1 / span 2; }
.p-contact .areas__lista { grid-column: 6 / -1; grid-row: 1; }
.p-contact .areas > p { grid-column: 6 / -1; grid-row: 2; margin-top: 24px; }

/* ── Contacto · 4 · El refuerzo: el H2 en la primera celda y cada párrafo una
   tarjeta, tres por fila; la última, en azul (la plantilla la tinta). */
.p-contact .refuerzo__texto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
}
.p-contact .refuerzo__h2 { padding-right: 20px; }
.p-contact .refuerzo__texto > p {
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.p-contact .refuerzo__texto > p:last-child { background: var(--panel); color: var(--blanco); }
.p-contact .refuerzo__texto > p:last-child a { color: var(--blanco); }

/* ── Privacidad · 1 · El hero sin foto: el panel con el texto a lo ancho y las
   cuatro specs en una fila. */
.p-privacy-policy main > section.hero { grid-template-columns: 56px minmax(0, 1fr) 56px; min-height: 0; }
.p-privacy-policy .hero__sub { max-width: 46em; }
.p-privacy-policy .hero__specs { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ── 2 · La fecha y la apertura: la apertura en dos columnas a 19 px. */
.p-privacy-policy main > section.legal__meta { padding-bottom: 0; }
.p-privacy-policy main > .legal__meta + .legal__apertura { padding-top: 16px; }
.p-privacy-policy .legal__apertura { columns: 2; column-gap: var(--gap); font-size: 19px; line-height: 1.65; }
.p-privacy-policy .legal__apertura > p + p { margin-top: 1em; }

/* ── 3 · El índice: el rótulo en la primera celda y los siete enlaces
   numerados, en dos columnas que se leen de arriba abajo (rótulo, 01–03 y
   04–07); la tarjeta del teléfono a la derecha. */
.p-privacy-policy main > .indice {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, auto);
  grid-auto-flow: column;
  column-gap: var(--gap);
  align-items: start;
  margin: 0;
  padding: var(--aire) var(--lateral);
  counter-reset: indice;
}
.p-privacy-policy .indice__lista { display: contents; }
.p-privacy-policy :is(.indice__rotulo, .indice__item) { margin: 0; padding: 16px 20px 16px 0; border-top: 1px solid var(--topo); }
.p-privacy-policy .indice__item {
  display: flex;
  gap: 16px;
  align-items: baseline;
  counter-increment: indice;
  list-style: none;
}
.p-privacy-policy .indice__item::before {
  content: counter(indice, decimal-leading-zero);
  flex: none;
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--gris-texto);
}
.p-privacy-policy .indice__item a {
  font-family: var(--display);
  font-size: 21px;
  line-height: 1.3;
  color: var(--carbon);
  text-decoration: none;
}
.p-privacy-policy .indice__tarjeta {
  grid-column: 3;
  grid-row: 1 / span 4;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.p-privacy-policy .indice__horario { font-size: 15px; color: var(--gris-texto); }
.p-privacy-policy .indice__horario:first-child { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.p-privacy-policy .indice__telefono {
  font-family: var(--display);
  font-size: 32px;
  line-height: 1.2;
  color: var(--carbon);
  text-decoration: none;
}

/* ── 4 · Las seis secciones en una grilla de dos por tres, cada una con su
   número (el mismo del índice), su H2 y su filete. `main` pasa a grilla; las
   secciones se ubican por su `id`, que es contrato de la plantilla. */
.p-privacy-policy main {
  display: grid;
  grid-template-columns: var(--lateral) minmax(0, 1fr) minmax(0, 1fr) var(--lateral);
  counter-reset: legal;
}
.p-privacy-policy main > * { grid-column: 1 / -1; }
.p-privacy-policy main > :is([id="information"], [id="communication"], [id="cookies"]) { grid-column: 2; padding: 24px 20px 24px 0; }
.p-privacy-policy main > :is([id="how"], [id="data"], [id="rights"]) { grid-column: 3; padding: 24px 0 24px 20px; }
.p-privacy-policy main > :is([id="information"], [id="how"]) { padding-top: var(--aire); }
.p-privacy-policy main > :is([id="cookies"], [id="rights"]) { padding-bottom: var(--aire); }
.p-privacy-policy .legal__h2 {
  margin-bottom: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--topo);
  counter-increment: legal;
}
.p-privacy-policy .legal__h2::before {
  content: counter(legal, decimal-leading-zero);
  display: block;
  margin-bottom: 10px;
  font-family: var(--texto);
  font-size: 13px;
  letter-spacing: 0.14em;
  line-height: 1.5;
  color: var(--gris-texto);
}
.p-privacy-policy .legal > :is(p, ul) + :is(p, ul) { margin-top: 1em; }
.p-privacy-policy .legal ul { padding-left: 1.2em; }
.p-privacy-policy .legal li + li { margin-top: 6px; }

/* ── 5 · Las consultas: el H2 a la izquierda, el texto a la derecha, y los
   cuatro datos en tarjetas blancas, en una fila. */
.p-privacy-policy .legal__contacto {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  align-items: start;
}
.p-privacy-policy .legal__contacto > .legal__h2 { grid-column: 1 / span 5; margin: 0; padding-top: 0; border-top: 0; }
.p-privacy-policy .legal__contacto > p { grid-column: 6 / -1; grid-row: 1; align-self: end; font-size: 17px; }
.p-privacy-policy .legal__datos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 40px;
}
.p-privacy-policy .legal__dato {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  padding: 24px;
  border-radius: var(--foto);
  background: var(--blanco);
}
.p-privacy-policy .legal__dato dt { font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gris-texto); }
.p-privacy-policy .legal__dato dd { margin: 0; font-family: var(--display); font-size: 21px; line-height: 1.3; overflow-wrap: anywhere; }
.p-privacy-policy .legal__dato :is(a, address) { color: var(--carbon); font-style: normal; text-decoration: none; }

/* ── 6 · La vigencia: la línea que cierra el documento, centrada */
.p-privacy-policy main > .legal__contacto + .legal__meta { padding-bottom: var(--aire); }
.p-privacy-policy .legal__vigencia { text-align: center; color: var(--gris-texto); }

@media (max-width: 1100px) {
  .p-contact main > section.hero { grid-template-rows: 340px 48px auto auto auto auto 40px auto 48px auto; }
  .p-contact .hero::before { grid-row: 1 / 10; }
  .p-contact .hero__figura > :is(img, picture) { grid-row: 1; }
  .p-contact .hero__form { grid-row: 10; }
  .p-privacy-policy main > section.hero { grid-template-rows: 0 48px auto auto auto auto 40px auto 48px; }
  .p-contact .refuerzo__texto { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  /* Una columna, en el orden del HTML salvo las fotos, que van primero y
     dejan de estirarse. */
  .p-about :is(.historia, .area, .credenciales, .redes),
  .p-contact .areas,
  .p-privacy-policy .legal__contacto { grid-template-columns: minmax(0, 1fr); }
  .p-about :is(.historia, .area, .credenciales, .redes) > *,
  .p-contact .areas > *,
  .p-privacy-policy .legal__contacto > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .p-about :is(.historia__figura, .credenciales__figura) {
    order: -1;
    contain: none;
    flex-direction: row;
    margin: 0 0 32px;
  }
  .p-about :is(.historia__figura, .credenciales__figura) > :is(img, picture) { flex: 1 1 0; aspect-ratio: 4 / 3; }
  .p-about .area__col { contain: none; margin-top: 32px; }
  .p-about .area__figura { flex: none; }
  .p-about .area__figura > :is(img, picture) { flex: none; aspect-ratio: 4 / 3; }
  .p-about .redes > ul { justify-content: flex-start; margin-top: 12px; }
  .p-contact .areas__lista { margin-top: 24px; }
  .p-contact .form__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-contact :is(.form__h2, .form__nota, .form__legal) { grid-column: 1 / -1; text-align: left; }
  .p-contact .form__nota { margin-top: 12px; }
  .p-contact .hero__form .form__campos > button.btn--primario { grid-column: 1 / -1; justify-self: start; }
  .p-privacy-policy main > .indice { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto) auto; }
  .p-privacy-policy .indice__tarjeta { grid-row: 5; }
  .p-privacy-policy .indice__tarjeta { grid-column: 1 / -1; grid-row: auto; margin-top: 24px; }
  .p-privacy-policy .legal__contacto > p { margin-top: 20px; }
  .p-privacy-policy .legal__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .p-privacy-policy .hero__specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  /* Las credenciales, a una columna (a 390 quedaban dos de 163 px; layout.py) */
  .p-about .credenciales__texto { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .p-about .credenciales__texto > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .p-about .credenciales__texto > :is(.credenciales__rotulo, .credenciales__h2, .credenciales__h2 + p) { padding-right: 0; }
  .p-about .propietario__texto,
  .p-about .historia__texto:only-child,
  .p-privacy-policy .legal__apertura { columns: 1; }
  .p-privacy-policy .legal__apertura { font-size: 18px; }
  .p-contact .hero__form .form { padding: 28px 24px; }
  .p-contact .form__campos,
  .p-contact .contacto__grilla,
  .p-contact .refuerzo__texto,
  .p-privacy-policy .legal__datos { grid-template-columns: minmax(0, 1fr); }
  .p-privacy-policy main > .indice { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
  .p-privacy-policy .indice__tarjeta { grid-row: auto; }
  .p-contact main > section.hero { grid-template-rows: 280px 32px auto auto auto auto 32px auto 32px auto; }
  .p-privacy-policy main > section.hero { grid-template-rows: 0 32px auto auto auto auto 32px auto 32px; }
  .p-privacy-policy .hero__specs { grid-template-columns: minmax(0, 1fr); }
  .p-privacy-policy main > :is([id="information"], [id="how"], [id="communication"], [id="data"], [id="cookies"], [id="rights"]) {
    grid-column: 1 / -1;
    padding: 20px var(--lateral);
  }
  .p-privacy-policy main > [id="information"] { padding-top: var(--aire); }
  .p-privacy-policy main > [id="rights"] { padding-bottom: var(--aire); }
}

/* ═══ Los cortes ════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  /* El hero pasa a columna: la foto arriba (380 de alto) y el texto abajo. */
  .t-homepage main > section.hero {
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    grid-template-rows: 380px 48px auto auto auto auto minmax(28px, 1fr) auto auto 48px;
  }
  .t-homepage .hero__figura > :is(img, picture) { grid-row: 1; }
  .t-homepage .hero__figura img { border-radius: var(--foto) var(--foto) 0 0; }
  .t-homepage .hero__rotulo { grid-row: 3; }
  .t-homepage .hero__h1 { grid-row: 4; }
  .t-homepage .hero__sub { grid-row: 5; }
  .t-homepage .hero .trust { grid-row: 6; }
  .t-homepage .hero__dato { grid-row: 8; }
  .t-homepage .hero__acciones { grid-row: 9; }
  /* La prosa en dos columnas */
  .t-homepage :is(.cats__texto, .normativa__texto) { columns: 2; }
}

@media (max-width: 900px) {
  :root { --gap: 28px; }
  /* Una sola columna: cada pieza en el orden del HTML, salvo la foto de
     Sobre Sonno, que va primero como en escritorio. */
  .t-homepage :is(.costo__texto, .why, .proceso, .area, .about-resumen) { grid-template-columns: minmax(0, 1fr); }
  .t-homepage :is(.costo__texto, .why, .proceso, .area, .about-resumen) > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
  .t-homepage .about-resumen__figura { order: -1; }
  .t-homepage .costo__h2 + p { margin-top: 20px; columns: 1; }
  .t-homepage .costo__tramos ~ p { margin-top: 28px; }
  .t-homepage .costo__tramos ~ p + p { margin-top: 0; border-top: 0; padding-top: 16px; }
  .t-homepage .why__cabecera { margin-bottom: 28px; }
  /* Las fotos dejan de estirarse: cada una con su proporción, dos lado a lado
     cuando son dos. */
  .t-homepage :is(.why__figura, .proceso__figura, .area__figura, .about-resumen__figura) {
    contain: none;
    min-height: 0;
    margin-top: 32px;
    flex-direction: row;
  }
  .t-homepage .about-resumen__figura { margin: 0 0 32px; }
  .t-homepage :is(.why__figura, .proceso__figura) > :is(img, picture) { flex: 1 1 0; aspect-ratio: 4 / 5; }
  .t-homepage .proceso__figura > :is(:first-child, :last-child) { flex-grow: 1; }
  .t-homepage .costo__tramos { row-gap: var(--gap); }
  .t-homepage .costo__tramo { grid-row: auto; grid-template-rows: none; }
  .t-homepage :is(.area__figura, .about-resumen__figura) > :is(img, picture) { flex: 1 1 0; aspect-ratio: 4 / 3; }
  .t-homepage .area__cierre { margin-top: 32px; }
  :is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__texto { grid-template-columns: minmax(0, 1fr); }
  :is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .video__texto > p:not(.video__rotulo) { grid-column: 1; grid-row: 3; margin-top: 20px; }
  .t-homepage .cta-home__h2, .t-homepage .cta-home__texto { grid-column: 1 / -1; }
  .t-homepage a.cta-home__btn { grid-column: 1 / -1; grid-row: 3; justify-self: start; margin-top: 8px; }
}

@media (max-width: 760px) {
  :root { --aire: 38px; --gap: 24px; }
  h1, .t-homepage .hero__h1 { font-size: 2.3rem; }
  h2 { font-size: 2rem; }
  .t-homepage main > section.hero {
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    grid-template-rows: 300px 32px auto auto auto auto minmax(24px, 1fr) auto auto 32px;
  }
  .t-homepage :is(.cats__texto, .normativa__texto, .area__cierre, .why__texto) { columns: 1; }
  .t-homepage .why__texto > p { padding-left: 64px; }
  .t-homepage .why__texto > p::before { width: 44px; height: 44px; font-size: 21px; }
  .t-homepage .proceso__texto > ol > li { padding-left: 64px; }
  .t-homepage .proceso__texto > ol > li::before { width: 44px; font-size: 28px; }
  .t-homepage .proceso__texto > ol > li:not(:last-child)::after { left: 22px; top: 40px; }
  :is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) main > section.video { padding: 36px 24px; gap: 32px; }
  .t-homepage main > .cierre-lead { font-size: 24px; }
  :is(.t-homepage, .t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .faq__pregunta { font-size: 19px; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   El vocabulario de la referencia, encima de la estructura
   ═══════════════════════════════════════════════════════════════════════════ */
h1, h2 { letter-spacing: -0.025em; }
h2 { font-size: 2.35rem; }

/* El hero del Home pone el texto ENCIMA de la foto. Las fotos de Sonno eran
   oscuras; las de una casa al sol de Davie no, y el blanco no se leía. Como en
   la referencia: un velo azul marino que tapa la columna del texto y se abre
   hacia la derecha. Sólo en escritorio: debajo de 1100 el texto baja al panel. */
@media (min-width: 1101px) {
  .t-homepage .hero::after {
    content: "";
    grid-column: 1 / -1;
    grid-row: 1 / -1;
    z-index: 0;
    border-radius: var(--foto);
    background: linear-gradient(90deg, rgb(15 30 61 / 0.9) 0%, rgb(15 30 61 / 0.78) 36%, rgb(15 30 61 / 0.2) 66%, rgb(15 30 61 / 0) 100%);
    pointer-events: none;
  }
}

/* ── Las categorías del Home (Sonno no las tenía: se dibujan acá) ───────────
   Con foto de sección: el texto en 7 columnas (la prosa en dos) y la foto en
   5, al alto del texto. Una sola categoría: la tarjeta va horizontal, la foto
   en 5 y el texto en 7. Con más de una, queda la grilla de arriba. */
@media (min-width: 901px) {
  .t-homepage .cats__cabecera {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--gap);
    align-items: stretch;
  }
  .t-homepage .cats__cabecera > .cats__texto:only-child { grid-column: 1 / -1; }
  .t-homepage .cats__cabecera .cats__texto:not(:only-child) { columns: 2; }
  .t-homepage .cats__figura { display: flex; margin: 0; min-height: 360px; contain: size; }
  .t-homepage .cats__figura > :is(picture, img) { display: flex; flex: 1; }
  .t-homepage .cats__figura img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--foto); }

  .t-homepage .cats__item:only-child {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto auto 1fr;
    column-gap: var(--gap);
    row-gap: 12px;
    padding: 16px;
  }
  .t-homepage .cats__item:only-child > :is(picture, img) { grid-column: 1; grid-row: 1 / -1; }
  .t-homepage .cats__item:only-child > :not(picture, img) { grid-column: 2; padding-right: 24px; }
  .t-homepage .cats__item:only-child > h3 { grid-row: 2; }
  .t-homepage .cats__item:only-child > p { grid-row: 3; }
  .t-homepage .cats__item:only-child .cats__img { aspect-ratio: 16 / 10; }
}

/* La tarjeta de la referencia: blanca, radio grande, un filete y una sombra
   apenas azul. Vale para las tarjetas del Home que antes eran sólo foto+texto. */
.t-homepage :is(.cats__item, .criticos__enlace) {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-radius: var(--foto);
  box-shadow: 0 12px 32px rgb(15 30 61 / 0.07);
}
.t-homepage .cats__item { padding: 16px; }
.t-homepage .criticos__enlace { padding: 14px 14px 24px; }
.t-homepage :is(.cats__item, .criticos__enlace) > :not(picture, img, .criticos__cuerpo) { padding-inline: 8px; }
.t-homepage .criticos__cuerpo { padding-inline: 10px; }
.t-homepage :is(.cats__img, .criticos__img) { border-radius: calc(var(--foto) - 8px); }

/* ── El costo SIN tramos (Sonno los tenía; este cliente publica prosa) ──────
   Los párrafos que siguen a la apertura toman la regla de los párrafos del
   cierre: uno por columna de 4, con el filete arriba. Con tramos, nada cambia. */
@media (min-width: 901px) {
  .t-homepage .costo__h2 + p ~ p:not(.costo__tramos ~ p) {
    grid-column: span 4;
    margin-top: 40px;
    padding-top: 22px;
    border-top: 1px solid var(--linea);
  }
}

/* El botón del cierre dice «Schedule Your Free On-Site Estimate» (372 px, sin
   cortar): en 3 columnas se metía debajo del texto. Texto en 8, botón en 4. */
@media (min-width: 901px) {
  .t-homepage :is(.cta-home__h2, .cta-home__texto) { grid-column: 1 / span 8; }
  .t-homepage a.cta-home__btn { grid-column: 9 / -1; }
}

/* ── La cifra del hero en TODA la familia ────────────────────────────────────
   La regla de la location page (arriba) se escribió para convivir con las
   specs del servicio, pero sólo la location la usaba. Acá casi todas las
   páginas traen `hero_dato`, y sin esto caía en la columna del margen. */
@media (min-width: 1101px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato {
    grid-column: 2;
    grid-row: 6;
    align-self: end;
    position: relative;
    z-index: 1;
    margin: 28px 0 28px;
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 0.25);
    color: var(--blanco);
    font-size: 15px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato b {
    display: block;
    font-family: var(--display);
    font-weight: 600;
    font-size: 2.6rem;
    line-height: 1;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato span { display: block; margin-top: 6px; }
}

/* ── Móvil: los botones largos se parten, y la cifra entra al panel ────────
   «Schedule Your Free On-Site Estimate» no entra en 390 sin cortar: la página
   scrolleaba de costado (Home 642 px, servicios 427). */
@media (max-width: 600px) {
  :is(.btn, a.cta-home__btn, .cta a) { white-space: normal; max-width: 100%; }
  .t-homepage a.cta-home__btn { justify-self: start; min-height: 52px; padding-block: 10px; }
  .hero .btn { min-height: 52px; height: auto; padding-block: 10px; text-align: left; }
  /* 2026-11-13, operador: el botón del hero cortaba «ON- / SITE». A todo el
     ancho y balanceado parte entre palabras: «SCHEDULE YOUR FREE / ON-SITE
     ESTIMATE». Privacy tenía el hero en 219 px (columnas de 56): pasa a 24. */
  .hero .btn--primario { width: 100%; justify-content: space-between; letter-spacing: 0.08em; text-wrap: balance; }
  .p-privacy-policy main > section.hero { grid-template-columns: 24px minmax(0, 1fr) 24px; }
}
@media (max-width: 359px) {
  .hero .btn--primario { font-size: 12px; letter-spacing: 0.04em; padding-left: 20px; }
}
@media (max-width: 1100px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility):not(.p-contact, .p-privacy-policy) main > section.hero {
    grid-template-rows: 340px 48px auto auto auto auto auto 40px auto 48px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato {
    grid-column: 2;
    grid-row: 7;
    position: relative;
    z-index: 1;
    margin-top: 28px;
    padding-top: 16px;
    border-top: 1px solid rgb(255 255 255 / 0.25);
    color: var(--blanco);
    font-size: 15px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato b {
    display: block; font-family: var(--display); font-weight: 600; font-size: 2.2rem; line-height: 1;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .hero__dato span { display: block; margin-top: 6px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility):not(.p-contact, .p-privacy-policy) .hero__specs { grid-row: 9; }
}

/* Contact tiene sus propias filas: la cifra necesita una fila suya (la 7),
   así que las specs bajan a la 9 y el formulario a la 11. */
@media (max-width: 1100px) {
  .t-utility.p-contact main > section.hero { grid-template-rows: 340px 48px auto auto auto auto auto 40px auto 48px auto; }
  .p-contact .hero__specs { grid-row: 9; }
  .p-contact .hero__form { grid-row: 11; }
}
@media (max-width: 760px) {
  .t-utility.p-contact main > section.hero { grid-template-rows: 280px 32px auto auto auto auto auto 32px auto 32px auto; }
}

/* ── Contacto: los datos llenan el ancho ──────────────────────────────────
   La grilla era de tres y este cliente tiene dos datos (sin email): quedaba
   un hueco a la derecha. Con auto-fit las tarjetas que haya se reparten. */
@media (min-width: 761px) {
  .p-contact .contacto__grilla { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ── El cierre de la familia, con o sin foto ───────────────────────────────
   Sonno no tenía foto en el cierre; acá 35 páginas traen `cta_img`, que caía
   en una columna de 68 px debajo del texto. Con foto: texto y botón en 7, la
   foto en 5 al alto de la banda. Sin foto: el botón largo (355 px) no entra en
   3 columnas, va en 4. El botón ANTES de la figura es el que tiene foto. */
@media (min-width: 901px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta {
    grid-template-rows: auto auto;
    row-gap: 28px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__texto-bloque { grid-column: 1 / span 7; grid-row: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta a.btn { grid-column: 9 / -1; grid-row: 1 / span 2; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta a.btn:not(:last-child) {
    grid-column: 1 / span 7;
    grid-row: 2;
    justify-self: start;
    align-self: start;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__figura {
    grid-column: 8 / -1;
    grid-row: 1 / span 2;
    align-self: stretch;
    display: flex;
    margin: 0;
    min-height: 300px;
    contain: size;
  }
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__figura > :is(picture, img) { display: flex; flex: 1; width: 100%; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__figura img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--foto);
}
@media (max-width: 900px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) :is(.cta__texto-bloque, .cta a.btn, .cta__figura) { grid-column: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta a.btn { justify-self: start; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) .cta__figura { grid-row: 1; margin: 0; aspect-ratio: 16 / 10; display: flex; }
}

/* ── «Cuándo no conviene» (servicio y crítico) ──────────────────────────────
   Sonno no tenía esta sección y salía sin estilo: el H2 pegado al párrafo y
   la prosa a todo el ancho. Son ~50 palabras: va como un recuadro blanco con
   filete, el H2 en 5 columnas y la prosa en 7. */
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gap);
  row-gap: 16px;
  grid-template-rows: auto;
  align-items: start;
}
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene > * {
  position: relative;
  z-index: 1;
}
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene::before {
  content: "";
  grid-column: 1 / -1;
  grid-row: 1 / -1;
  margin: -36px -40px;
  border: 1px solid var(--linea);
  border-radius: var(--foto);
  background: var(--blanco);
  box-shadow: 0 12px 32px rgb(15 30 61 / 0.06);
}
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene__h2 { grid-column: 1 / span 5; grid-row: 1; margin: 0; font-size: 1.9rem; line-height: 1.2; }
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene__prosa { grid-column: 6 / -1; grid-row: 1; }
:is(.t-gbp_service, .t-critical_gbp_service) .no-conviene__prosa > p + p { margin-top: 1em; }
:is(.t-gbp_service, .t-critical_gbp_service) main > section.no-conviene { padding-block: calc(var(--aire) + 36px); }
@media (max-width: 900px) {
  :is(.t-gbp_service, .t-critical_gbp_service) .no-conviene { grid-template-rows: auto auto; }
  :is(.t-gbp_service, .t-critical_gbp_service) .no-conviene__h2 { grid-column: 1 / -1; grid-row: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service) .no-conviene__prosa { grid-column: 1 / -1; grid-row: 2; }
  :is(.t-gbp_service, .t-critical_gbp_service) .no-conviene::before { margin: -24px -20px; }
  :is(.t-gbp_service, .t-critical_gbp_service) main > section.no-conviene { padding-block: calc(var(--aire) + 24px); }
}

/* About, debajo de 900: la foto de las áreas conservaba `contain: size` (alto
   0) y su imagen de 600 px se dibujaba encima de las píldoras y de la sección
   siguiente. Las otras dos fotos ya la soltaban; ésta no. */
@media (max-width: 900px) {
  .p-about .area__figura { contain: none; order: -1; margin-bottom: 24px; }
}

/* ── Los rótulos de la familia, como los del Home ─────────────────────────
   Sonno no tenía rótulos en servicio/crítico/categoría/hubs, así que «Permits»
   y «FAQ» salían como texto común pegado al H2. Mismo estilo que el Home:
   13 px, mayúsculas, gris, y 14 px hasta el H2. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content) main p[class$="__rotulo"]:not(.hero__rotulo) {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gris-texto);
  break-after: avoid;
}
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content) main p[class$="__rotulo"]:not(.hero__rotulo) + h2 { margin-top: 14px; }
.t-homepage .criticos__rotulo + .criticos__h2 { margin-top: 14px; }

/* ── Costo, opciones y permisos: el H2 en 4, la prosa en 8 (2 columnas) ────
   La hoja de Sonno abría el H2 en la primera de TRES columnas de prosa: con
   texto corto (los críticos traen un solo párrafo) la tercera quedaba vacía y
   la sección se veía corrida a la izquierda. Así aguanta cualquier largo. */
@media (min-width: 901px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo, .opciones) {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--gap);
    columns: auto;
    align-items: start;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__h2, .opciones__h2) { grid-column: 1; grid-row: 1 / span 2; margin-bottom: 0; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__cuerpo, .opciones__prosa) { grid-column: 2 / -1; columns: 2; column-gap: var(--gap); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .opciones__intro { grid-column: 2 / -1; grid-row: 1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .opciones__prosa { grid-row: 2; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__cuerpo, .opciones__prosa) > p { break-inside: auto; }

  /* Permisos: el rótulo y el H2 arriba, a todo el ancho; la prosa en tres
     columnas parejas que se equilibran solas, con poco o con mucho texto.
     (Una grilla de celdas dejaba los párrafos escalonados.) */
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto { columns: 3; column-gap: var(--gap); }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__cabecera { column-span: all; margin-bottom: 28px; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto > p { break-inside: auto; }

  /* «Por qué» SIN foto: la lista numerada a todo el ancho, en dos columnas */
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why:not(:has(.why__figura)) .why__texto {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gap);
    align-items: start;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why:not(:has(.why__figura)) .why__texto > :not(p) { grid-column: 1 / -1; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why:not(:has(.why__figura)) .why__texto > p {
    margin-top: 0;
    padding-top: 24px;
    padding-bottom: 24px;
    border-top: 1px solid var(--linea);
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why:not(:has(.why__figura)) .why__texto > p::before { top: 24px; }
}

/* Las píldoras debajo del hero: Sonno las corría 56 px para alinearlas con el
   texto DE ADENTRO del panel; afuera del panel se leían corridas contra todas
   las secciones de abajo. Van al mismo borde que el resto. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-services_hub, .t-locations_hub, .t-resources_hub, .t-supporting_content, .t-utility) main > .trust { padding-inline: var(--lateral); }

/* La categoría trae las razones como PÁRRAFOS con el título en negrita, no
   como lista: la regla de Sonno (ul > li) no les llegaba y cada razón corría
   a 46em, con un tercio vacío a la derecha. El primer párrafo es la entrada;
   los demás, celdas de a dos con el formato de los ítems. */
.t-gbp_category .why__h2 + p ~ p {
  grid-column: auto;
  max-width: none;
  margin: 0;
  padding: 24px 40px 24px 0;
  border-top: 1px solid var(--linea);
}
.t-gbp_category .why__h2 + p ~ p > strong:first-child {
  display: block;
  margin-bottom: 6px;
  font-family: var(--display);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
}
@media (max-width: 760px) {
  .t-gbp_category .why { grid-template-columns: minmax(0, 1fr); }
  .t-gbp_category .why__h2 + p ~ p { padding-right: 0; }
}
/* Un párrafo corto (los críticos) se reparte en las tres columnas, no en dos */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto > p { orphans: 1; widows: 1; }

/* ── Secciones CORTAS con foto (los críticos, revisión del 2026-11-10) ──────
   Sonno escribía 300+ palabras por sección: la foto (mínimo 420, dos apiladas)
   quedaba a la altura del texto. Con 3–6 renglones el texto quedaba arriba y
   la sección vacía debajo. Las dos fotos van lado a lado, el mínimo baja a
   340 y el texto se centra contra ellas: con texto largo nada cambia, porque
   la foto sigue estirándose al alto del texto. */
@media (min-width: 901px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__figura, .local__figura, .servicios-prosa__figura, .why__figura) {
    flex-direction: row;
    min-height: 340px;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.apertura__texto, .local__texto, .servicios-prosa__texto, .why__texto) { align-self: center; }

  /* Proceso: el H2 arriba siempre; los pasos en dos columnas que se leen de
     arriba abajo. Con pasos impares, el H2 en la primera celda dejaba los
     pasos en zigzag (01 a la derecha, 02 abajo a la izquierda). */
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso { display: block; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > .proceso__h2 { margin-bottom: 36px; padding: 0; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol {
    display: block;
    columns: 2;
    column-gap: var(--gap);
    margin: 0;
    padding: 0;
    list-style: none;
  }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .proceso > ol > li { break-inside: avoid; }
}

/* «Por qué» con UN solo párrafo: sin número. Un «1» solo no numera nada. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p:only-of-type { padding-left: 0; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .why__texto > p:only-of-type::before { content: none; }

/* ── Home: ningún párrafo partido entre columnas (revisión del operador, 2026-11-10)
   Las columnas de la hoja cortaban la frase a mitad: «the same kitchen can |
   land in…». Donde la prosa es UN solo párrafo (categorías con foto, apertura
   del costo, cierre de cobertura) las columnas se van y queda un bloque al
   ancho de lectura; donde hay varios (permisos) cada párrafo queda entero en
   su columna. */
@media (min-width: 901px) {
  .t-homepage .cats__cabecera .cats__texto:not(:only-child),
  .t-homepage .costo__h2 + p,
  .t-homepage .area__cierre { columns: auto; }
  .t-homepage .cats__cabecera > .cats__texto:only-child { columns: auto; max-width: 68ch; }
  .t-homepage .costo__h2 + p { max-width: 68ch; }
  .t-homepage .area__cierre > p { max-width: 68ch; }
  .t-homepage .normativa__cuerpo > p { break-inside: avoid; }
}
/* Móvil: el costo sin tramos perdía el aire entre párrafos (margen 0). */
@media (max-width: 900px) {
  .t-homepage .costo__h2 + p ~ p:not(.costo__tramos ~ p) { margin-top: 1em; }
}

/* ── Todo el sitio: ningún párrafo partido entre columnas (operador, 2026-11-10)
   La hoja dejaba partir los párrafos (`break-inside: auto`) para emparejar el
   alto de las columnas, y la frase quedaba cortada a mitad: medido en 35 de 38
   páginas. Cada párrafo, ítem y título queda entero en su columna. */
main :is(p, li, dd, dt, h3, h4) { break-inside: avoid; }
main :is(h3, h4) { break-after: avoid; }
/* Costo, opciones y permisos traían su propio `break-inside: auto`, más
   específico: se pisa acá. */
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__cuerpo, .opciones__prosa, .normativa__texto) > p { break-inside: avoid; }
/* Un solo párrafo en dos columnas deja la segunda vacía: sin columnas, al
   ancho de lectura (apertura de Privacy, «contra» de /services/). */
.p-privacy-policy .legal__apertura:not(:has(> p + p)),
.t-services_hub main > section.contra:not(:has(> p + p)) { columns: auto; }
.p-privacy-policy .legal__apertura:not(:has(> p + p)) > p,
.t-services_hub main > section.contra:not(:has(> p + p)) > :is(h3, p) { max-width: 68ch; }
/* Con los párrafos enteros, el reparto deja columnas vacías según cuántos haya.
   Un párrafo (costo y opciones de los críticos): sin columnas. Dos o cuatro
   párrafos de permisos: dos columnas, no tres. */
@media (min-width: 901px) {
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo__cuerpo, .opciones__prosa):not(:has(> * + *)) { columns: auto; max-width: 68ch; }
  :is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) .normativa__texto:is(:not(:has(> p:nth-of-type(3))), :has(> p:nth-of-type(4)):not(:has(> p:nth-of-type(5)))) { columns: 2; }
}
/* La misma regla entre 761 y 1100 px, donde la hoja abre dos columnas en
   secciones de un solo párrafo. */
.t-homepage .cats__texto:not(:has(> p + p)) { columns: auto; }
:is(.t-gbp_service, .t-critical_gbp_service, .t-gbp_category, .t-location_page, .t-supporting_content, .t-utility) :is(.costo:not(:has(> .costo__cuerpo > * + *)), .opciones:not(:has(> .opciones__prosa > * + *))) { columns: auto !important; }

/* Contacto · refuerzo con TRES párrafos (la hoja lo dibujó para dos): el H2
   en su celda dejaba la tercera tarjeta sola en una fila. El H2 arriba a todo
   el ancho y las tres tarjetas en una fila. (Operador, 2026-11-10.) */
@media (min-width: 1101px) {
  .p-contact .refuerzo__texto:has(> p:nth-of-type(3)):not(:has(> p:nth-of-type(4))) > .refuerzo__h2 { grid-column: 1 / -1; max-width: 16em; padding-right: 0; }
}

/* ── Contacto · el formulario de GoHighLevel (`form_embed`, 2026-11-12) ───────
   Ocupa el lugar de los campos: todo el ancho de la tarjeta, debajo del H2 y
   la nota. El alto es fijo porque el script de GHL que lo estira es JS de
   terceros (B1). Medido contra el formulario publicado: 952 px a 1160 de
   ancho, 972 a 700 y 1132 a 300; con un solo campo de nombre, 915 a 488 y
   1035 a 302. Si se le agregan campos en GHL, se re-mide. */
.p-contact .form__embed { grid-column: 1 / -1; margin-top: 24px; height: 900px; border-radius: 8px; }
.p-contact .form__embed + .form__legal { grid-column: 1 / -1; margin-top: 16px; }
@media (max-width: 760px) { .p-contact .form__embed { height: 1060px; } }

/* ── Contacto · el formulario EN EL LUGAR DE LA FOTO (operador, 2026-11-12) ───
   /contact/ ya no lleva foto en el hero: la columna derecha la toma la tarjeta
   del formulario, adentro del panel azul. En escritorio el panel crece al alto
   del formulario y el aire sobrante cae en la fila elástica (6), encima de la
   cifra. Debajo de 1101 px se apila como antes, sin la fila de 340 px que
   reservaba la foto. */
@media (min-width: 1101px) {
  /* EL MISMO LUGAR QUE LA FOTO: columna 4 hasta el borde, de arriba a abajo
     del panel, con las esquinas derechas redondeadas. Con márgenes propios
     (24 px) no coincidía con nada: ni con los 56 px del texto ni con el borde
     del panel. El relleno de arriba alinea el H2 con el rótulo de la izquierda. */
  .p-contact main > section.hero:not(:has(.hero__figura)) .hero__form {
    grid-column: 4 / -1;
    grid-row: 1 / 9;
    margin: 0;
    align-self: stretch;
    display: flex;
  }
  .p-contact .hero:not(:has(.hero__figura)) .hero__form .form {
    flex: 1;
    align-content: start;
    padding: 56px 48px 48px;
    border-radius: 0 var(--foto) var(--foto) 0;
  }
  .p-contact .hero:not(:has(.hero__figura)) :is(.form__h2, .form__nota, .form__legal) { grid-column: 1 / -1; text-align: left; }
  .p-contact .hero:not(:has(.hero__figura)) .form__nota { margin-top: 8px; }
  /* Acá el iframe mide ~490 px de ancho y el formulario de GHL pide 915
     (re-medido el 2026-11-12, con un solo campo de nombre). */
  .p-contact .hero:not(:has(.hero__figura)) .form__embed { margin-top: 16px; height: 935px; }
}
@media (max-width: 1100px) {
  .t-utility.p-contact main > section.hero:not(:has(.hero__figura)) { grid-template-rows: 0 48px auto auto auto auto auto 40px auto 48px auto; }
  /* El panel cerraba en la fila de las specs (9) y el aire de 48 px (10)
     quedaba afuera: el último renglón tocaba el borde. */
  .p-contact .hero:not(:has(.hero__figura))::before { grid-row: 1 / 11; }
}
@media (max-width: 760px) {
  .t-utility.p-contact main > section.hero:not(:has(.hero__figura)) { grid-template-rows: 0 32px auto auto auto auto auto 32px auto 32px auto; }
}

/* ── Contacto · el formulario PROPIO en la columna del hero (operador, 2026-11-12)
   Se volvió del iframe de GHL al formulario del sitio, con la piel, igual que
   kitchenremodelerdavie: el pedido sale por /api/lead hacia GHL. En la columna
   de 584 px los cuatro campos van de a dos; el mensaje, la línea legal y el
   botón, a todo el ancho. */
@media (min-width: 1101px) {
  .p-contact .hero:not(:has(.hero__figura)) .form__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin-top: 24px; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos > :is(label:last-of-type, .form__legal) { grid-column: 1 / -1; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos > button.btn--primario { grid-column: 1 / -1; justify-self: stretch; }
}

/* Contacto · el gracias (`form_gracias`): una franja de la tarjeta, en el
   color del acento, entre la nota y los campos. Sólo se ve en /contact/#gracias. */
.p-contact .form__gracias:target {
  grid-column: 1 / -1;
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--panel);
  color: var(--blanco);
  font-size: 15px;
  scroll-margin-top: 120px;
}

/* ── Contacto · el hero ENTRA EN UNA PANTALLA (operador, 2026-11-12) ──────────
   Hero + franja de chapas tienen que terminar antes de los 900 px de una
   pantalla 1440 × 900. Medido: el panel pedía 751 px y la tarjeta 758; acá se
   recortan las dos columnas a la par para que sigan alineadas. El aire de
   arriba del panel (fila 1) y el relleno de arriba de la tarjeta son el mismo
   número: así el H2 de la tarjeta sigue a la altura del rótulo. */
@media (min-width: 1101px) {
  .p-contact main > section.hero:not(:has(.hero__figura)) { grid-template-rows: 40px auto auto auto auto minmax(16px, 1fr) auto 36px auto; }
  .p-contact .hero:not(:has(.hero__figura)) .hero__acciones { margin-top: 16px; }
  .p-contact .hero:not(:has(.hero__figura)) .hero__dato { margin: 16px 0; }
  .p-contact .hero:not(:has(.hero__figura)) .hero__form .form { padding: 40px 48px 36px; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos { gap: 14px 20px; margin-top: 18px; }
  /* 111 px: con eso el botón «Send» cierra a la altura de las specs (652). */
  .p-contact .hero:not(:has(.hero__figura)) .form__campos textarea { min-height: 0; height: 111px; }
}
/* La franja de chapas cerraba con 0 px de aire y la sección que sigue
   (fondo tintado) empezaba pegada a las chapas. Es la única página del sitio
   donde lo que sigue a la franja tiene fondo propio (medido en las 38). */
.p-contact main > .trust { padding-bottom: 20px; }

/* ── Contacto · «Type of project» (`form_tipo`, operador 2026-11-12) ──────────
   El desplegable viste igual que los otros campos y ocupa la fila entera,
   arriba del mensaje. La flecha es un SVG en línea: sin ella, con
   `appearance: none`, el campo no parece desplegable. */
.p-contact .form__campos > .form__tipo { grid-column: 1 / -1; }
.p-contact .form__campos select {
  display: block;
  flex: 1 0 100%;
  min-height: 48px;
  margin: 0;
  padding: 10px 40px 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--crema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23596579' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
  font: inherit;
  font-size: 16px;
  letter-spacing: normal;
  text-transform: none;
  color: var(--carbon);
  appearance: none;
}

/* ── Contacto · las chapas: centradas y un poco más grandes (operador) ───── */
.p-contact main > .trust { padding-inline: var(--lateral); padding-top: 24px; padding-bottom: 24px; }
.p-contact .trust__lista { justify-content: center; gap: 12px; }
.p-contact .trust__item { padding: 9px 20px; font-size: 15px; }

/* ── Contacto · el hero OCUPA LA PANTALLA (operador, 2026-11-12) ─────────────
   El hero y la franja de chapas llenan la ventana y la sección siguiente
   empieza justo debajo del borde: no se asoma. 130 px es el encabezado
   (franja del teléfono + cabecera) y 94 px la franja de chapas, medidos a
   1440 y a 1788. Si el contenido no entra, el hero crece y no se corta. */
@media (min-width: 1101px) {
  .p-contact main > section.hero:not(:has(.hero__figura)) { min-height: calc(100svh - 130px - 94px); }
  /* Con el hero estirado, el aire sobrante de la tarjeta lo toma el cuadro del
     mensaje: el botón «Send» cierra siempre a la altura de las specs. */
  .p-contact .hero:not(:has(.hero__figura)) .hero__form .form { display: flex; flex-direction: column; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos { flex: 1; grid-template-rows: auto auto auto 1fr auto auto; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos > label:last-of-type { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; }
  .p-contact .hero:not(:has(.hero__figura)) .form__campos > label:last-of-type textarea { flex: 1 1 auto; height: auto; min-height: 96px; }
}

/* ── Contacto · el aire del panel, repartido (operador, 2026-11-12) ─────────
   Con el hero a pantalla completa, todo el alto sobrante caía en UNA fila
   (entre los botones y la cifra) y dejaba un vacío en el medio del panel.
   Ahora se reparte en tres filas elásticas iguales: después del subtítulo,
   después de los botones y después de la cifra. El rótulo sigue arriba a la
   altura del H2 de la tarjeta y las specs abajo a la altura del botón. */
@media (min-width: 1101px) {
  .p-contact main > section.hero:not(:has(.hero__figura)) {
    grid-template-rows: 40px auto auto auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto 36px;
  }
  .p-contact main > section.hero:not(:has(.hero__figura))::before { grid-row: 1 / 12; }
  .p-contact main > section.hero:not(:has(.hero__figura)) .hero__form { grid-row: 1 / 12; }
  .p-contact main > section.hero:not(:has(.hero__figura)) .hero__acciones { grid-row: 6; margin-top: 0; }
  .p-contact main > section.hero:not(:has(.hero__figura)) .hero__dato { grid-row: 8; margin: 0; align-self: center; }
  .p-contact main > section.hero:not(:has(.hero__figura)) .hero__specs { grid-row: 10; }
}