/* ═══════════════════════════════════════════════════════════════════════════
   Kitchen Remodeler Boca Raton — la piel

   TRASLADO de las maquetas de diseno/, importadas el 2026-08-19 del proyecto
   de Claude Design 3b9fe333. No hay una decisión de diseño nueva acá: los
   colores, las tipografías, los radios, los espesores y las composiciones
   salen de los archivos de esa carpeta. Lo que cambia es el soporte — los
   ~19 KB de `style=` inline de cada maqueta pasan a tokens de `:root`, que es
   lo único contra lo que `verificar.py` bloque C puede medir contraste.

   MOLDE ELEGIDO POR TIPO (decisión del usuario, 2026-08-19):
     servicio + crítico  →  diseno/servicio/01-columnas.html
     LOS TRES HUBS       →  diseno/hub/01-cinta.html
       /services/ · /locations/ · /resources/ — la misma maqueta para los tres,
       decisión del usuario del 2026-08-19. Trasladada ese día; el bloque está
       al final de esta hoja, §LOS TRES HUBS.
     /contact/           →  diseno/contacto/01-vitrina.html
     location page       →  diseno/location/02-carril.html
       TRASLADADO ENTERO el 2026-08-20, con las seis geográficas ya escritas.
       Hasta ese día acá había cuatro reglas de dos columnas que NO eran
       Carril: eran el molde de servicio con otros nombres. El bloque vive al
       final de esta hoja, §LOCATION PAGE, y ahí están anotadas las tres cosas
       que se le cambiaron al molde y la única que no se pudo trasladar.
     supporting content  →  diseno/soporte/01-cinta.html     (Fase 2, sin páginas hoy)
     Homepage            →  SIN MAQUETA. Ver el bloque del final.

   EL TRASLADO ES 1 A 1, por decisión del usuario del 2026-08-19. Incluye el
   `columns:2` de `cuando` y del bloque de mercado de `costo`, que el README de
   la maqueta desaconseja (su choque #2: a 1.600 palabras la columna izquierda
   queda de dos pantallas). Va igual: la fidelidad manda sobre esa objeción, y
   en móvil colapsa a una columna, que es donde el costo desaparecía.

   LO ÚNICO QUE NO SE TRASLADÓ son los `style=` inline y las clases `.hvN`:
   son del visor de claude.ai, no del diseño.

   LO QUE NO SE PUEDE TRASLADAR HOY POR FALTA DE MATERIAL, no por criterio:
     · el `<aside>` de `costo` — cifra grande + tabla de bandas + foto. Sus
       tres piezas son CONTENIDO y no existen como dato separado en el brief.
     · los slots de foto de `cuando` (16:10 + dos detalles) y de `why` (1:1).
       Sin ellos esas dos secciones son media composición.

   REGLAS DEL REPO QUE ESTA HOJA CUMPLE, y dónde se miden:
     · `font-display: swap` en los tres @font-face          → verificar.py C6
     · ningún token de color redefinido en un @media de tema → C5
     · el fondo de sección se fija por NOMBRE, nunca por
       `:nth-of-type()`, y no se usa `order`                 → C7
     · `letter-spacing` mínimo -0.035em, sobre el piso -0.04 → C4
     · cero JavaScript y cero pedidos a un CDN               → B1
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── Las tres fuentes, servidas desde el dominio ──────────────────────────
   Rutas ABSOLUTAS: esta hoja se sirve en /estilo.css y los assets en
   /assets/. Las de los `_fuentes.css` de cada carpeta de diseno son
   relativas porque esas maquetas se abren haciendo doble clic; acá eso
   daría 404 en silencio.

   ⚠ ACÁ DECÍA `diseno/` + comodín + `/_fuentes.css` Y ESO CERRABA EL
   COMENTARIO. La secuencia de dos caracteres que termina un comentario CSS
   aparecía en medio de la ruta, así que el comentario moría ahí, lo que
   seguía entraba como CSS basura y el parser descartaba hasta poder
   resincronizar: se comía el `@font-face` de Manrope ENTERO.

   QUÉ COSTÓ. Las 19 páginas se sirvieron con los titulares en `system-ui`
   —el fallback de la familia— desde que existe esta hoja. Y es exactamente
   el modo de falla que `diseno/README.md` describe en su recuadro: la página
   se ve bien, el .woff2 responde 200, no hay nada en la consola, y no es tu
   diseño. Se cazó midiendo `document.fonts` el 2026-08-19 al trasladar la
   maqueta de About: la maqueta listaba `Manrope:loaded` y `dist/` no.
   No se ve mirando. */

@font-face {
  font-family: "Manrope";
  src: url("/assets/fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 400 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-variable.woff2") format("woff2-variations");
  font-weight: 400 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}


/* ── Los tokens ───────────────────────────────────────────────────────────
   EL SELECTOR DOBLE NO ES UN DESCUIDO. `base.css` trae su propio modo oscuro
   en `@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) }`,
   y ese selector pesa más que un `:root` pelado: sin la segunda línea, toda
   máquina con dark mode del sistema serviría esta piel crema sobre los tokens
   oscuros de la base. Repetir el selector acá lo gana por orden de hoja
   —estilo.css se carga después— sin declarar una segunda paleta, que es lo
   que C5 busca. El design system que llegó tiene UNA apariencia. */

:root,
:root:not([data-theme="light"]) {

  /* La paleta, tal como la traen las siete maquetas.
     Los números de contraste están medidos en diseno/contraste.md. */
  --piel-tinta:         #1f1b16;   /* titulares, texto fuerte */
  --piel-profunda:      #221c16;   /* bandas oscuras, tarjetas de cifra */
  --piel-negra:         #15110d;   /* el pie */
  /* ⚠ EL ÁMBAR SE OSCURECIÓ EL 2026-08-20, autorizado por el operador, para
     cerrar el bloque C. La maqueta traía #c07a3a y con blanco encima medía
     3.45 — y el ámbar lleva texto CLARO en seis de sus siete usos (los dos
     botones, los dos chips mono, y la franja de cierre; el único texto oscuro
     encima es el botón de esa franja). No había forma de ajustarlo sin mover
     el token: para 4.5 con blanco el fondo necesita luminancia ≤ 0.1833 y para
     4.5 con `--piel-profunda` necesita ≥ 0.2303, y esos dos rangos no se
     cruzan. Un ámbar no puede servir a los dos, así que se eligió el lado que
     usan seis de siete. El botón oscuro sobre la franja pasa a medirse como
     elemento de interfaz (3.0, WCAG 1.4.11) y da 3.50 — el cambio de mínimo
     está escrito en diseno/contraste.md, que es donde vive el manifiesto.
     Efecto colateral bueno: los rótulos ámbar sobre el papel (.faq__rotulo,
     .apertura__rotulo, .site-header__marca-ciudad) pasan de 3.12 a 4.35. */
  --piel-acento:        #a4622a;   /* botones primarios, franja de cierre */
  --piel-acento-oscuro: #915626;   /* enlaces en prosa, hover del botón */
  --piel-acento-claro:  #e5a463;   /* cifras sobre fondo oscuro */
  --piel-numero:        #e0c9a8;   /* la numeración del proceso */
  --piel-tinte:         #f0e6d9;   /* chips, bloques cálidos */
  --piel-papel:         #f6f3ee;   /* fondo del cuerpo */
  --piel-blanco:        #ffffff;   /* tarjetas */
  --piel-borde:         #e6e1d8;   /* separadores */
  --piel-borde-fuerte:  #ded7c9;   /* reglas horizontales */
  --piel-borde-oscuro:  #3a332b;   /* separador dentro de la banda oscura */
  --piel-texto:         #4a443b;   /* cuerpo */
  /* La paleta trae DOS tenues y la maqueta los usa en lugares distintos:
     #8a8276 en los rótulos mono de ficha y en los pies de la tabla de costo,
     #6b655b en la etiqueta de los slots. Se trasladan los dos, con su uso.
     ⚠ #8a8276 NO llegaba a 4.5 (3.43 sobre el papel, 3.79 sobre la tarjeta
     blanca). El operador autorizó corregirlo el 2026-08-20: va a #726b61, que
     da 4.75 y 5.26. NO se usó el #6b655b que ya está en la paleta —sería el
     arreglo obvio y pasa de sobra— porque colapsaría contra `--piel-tenue-baja`
     y la maqueta los usa en lugares distintos: dos tokens con el mismo valor
     son un token, y el próximo que los lea no va a saber que eran dos. */
  --piel-tenue:         #726b61;   /* rótulos mono de ficha, pies de tabla */
  --piel-tenue-baja:    #6b655b;   /* etiquetas de slot */
  /* El tenue de la TARJETA INVERTIDA: el rótulo mono del tercer tramo de costo
     va sobre `--piel-profunda`, donde los dos de arriba no se leen. Maqueta de
     Home línea 123. Medido: 6.2:1 sobre #221c16. */
  --piel-tenue-oscuro:  #a89e90;   /* rótulo mono sobre banda oscura */
  /* El ámbar de los rótulos SOBRE FONDO OSCURO — maqueta de Home línea 265. Es
     un paso entre el acento y el acento claro, y sólo lo usa el rótulo de la
     banda `about`. Medido: 6.4:1 sobre #221c16. */
  --piel-acento-medio:  #d99a5c;   /* rótulo mono de la banda oscura */
  --piel-claro:         #fbf9f5;   /* texto fuerte sobre banda oscura */
  --piel-claro-2:       #ede8e0;
  --piel-claro-3:       #cfc7ba;   /* prosa sobre banda oscura */
  --piel-claro-4:       #b5aba0;   /* pies sobre banda oscura */
  /* La barra superior tiene su propio claro y no es ninguno de los cuatro de
     arriba: la maqueta pone #e8e2d8 y sólo ahí. Entró el 2026-08-19 con el
     traslado del molde de Home, que hasta ese día se dibujaba con
     `--piel-claro-3` (#cfc7ba) y en sans. Medido: 12.4:1 sobre #15110d. */
  --piel-claro-topbar:  #e8e2d8;   /* texto de la barra superior */
  /* Sobre el ámbar nuevo, el #fdf1e5 de la maqueta se queda en 4.33: le falta
     el último tramo y no hay dónde sacarlo salvo llegar al blanco. 2026-08-20. */
  --piel-sobre-acento:  #ffffff;   /* prosa sobre la franja ámbar */

  --piel-radio:      18px;
  --piel-radio-gr:   20px;
  --piel-pildora:    100px;
  /* MEDIDO contra la maqueta el 2026-08-19, no deducido: su contenedor es
     `max-width:1280px; padding:0 32px` en content-box, así que el CONTENIDO
     mide 1280 y el bloque completo 1344. Restarle los paddings —que es lo que
     hacía este token con 1216— achicaba cada grid 64px y corría todos los
     centrados. Es el error que desalineaba la página entera.

     SE PROBÓ EN 1472 Y SE VOLVIÓ. El 2026-08-19 se ensanchó el sitio entero un
     15% para que no se viera recortado en una pantalla ancha, y el operador lo
     revirtió mirándolo: ensanchar TODO se lleva puesta la prosa. Las tres
     secciones a `columns: 2` —`cuando`, `variantes` y el bloque de mercado de
     `costo`— pasaban de columnas de ~616 a ~712 px, porque ahí el límite en
     `ch` está anulado a propósito, y eso es el choque #2 del README de la
     maqueta un poco más grande. El ensanche quedó SOLO en el hero, que es
     donde el recorte se veía y donde no hay prosa larga que romper. */
  --piel-ancho:      1280px;
  /* LAS BANDAS DE ARRIBA, Y NADA MÁS. Decisión del operador del 2026-08-19, en
     tres pasos: ensanchar todo, revertir, y volver a ensanchar sólo esto.

     Lo usan CUATRO piezas y ninguna más — `.topbar`, `.site-header`, `.hero` y
     `.trust`—, que es justo la franja que se ve al abrir la página sin
     scrollear. De `apertura` para abajo manda `--piel-ancho`.

     POR QUÉ ESAS CUATRO Y NO OTRAS: son las que dibujan un borde horizontal
     visible —la barra oscura, la línea de la nav, la fila de specs del hero y
     la caja redondeada de la franja de confianza—. Un borde que frena a 320 px
     del filo es lo que se lee como "página recortada". Un párrafo no: su
     medida la fija el `ch`, no el contenedor, y ensancharlo sólo alarga la
     línea. Por eso el primer intento —mover `--piel-ancho` y ensanchar todo—
     se revirtió mirándolo.

     1472 = 1280 + 15%, el recorte que el operador midió a ojo. A 1920 el
     margen de estas cuatro baja de 320 a 224 px por lado (16,7% → 11,7%).

     ⚠ EL PIE SE QUEDA EN 1280 Y ESO SE VE: es la otra banda de chrome del
     sitio, y ahora es 192 px más angosta que la nav con la que hace juego.
     Está así porque el operador dijo "el resto dejalo igual", no porque no se
     haya notado. Sumarlo es agregar `footer` a la lista de abajo. */
  --piel-ancho-banda: 1472px;
  /* LA CANALETA MÍNIMA CRECE CON LA PANTALLA. La maqueta declara `padding: 0
     32px` fijo, y a 1.280–1.366 px —un portátil cualquiera— eso deja el texto
     a 32–43 px del borde: la columna derecha de `costo` es prosa que llega al
     final del contenedor y se lee pegada al filo. La maqueta no lo acusa
     porque ahí esa columna es un aside angosto de tarjetas.
     Por encima de ~1.400 px NO CAMBIA NADA: ahí manda el centrado
     `(100% - 1280)/2`, que es mayor que este mínimo. La comparación 1 a 1
     está medida a 1920, donde el padding sigue siendo 320 px.
     Para el hero el cruce se corre a ~1.616 px, porque su contenedor es 192 px
     más ancho: entre 1.472 y 1.616 el que manda es este piso de 72 px. */
  --piel-borde-lat:  clamp(20px, 5vw, 72px);

  --piel-display: "Manrope", system-ui, sans-serif;
  --piel-cuerpo:  "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --piel-mono:    "IBM Plex Mono", ui-monospace, "SF Mono", monospace;

  /* Los tokens de base.css remapeados. Todo lo que la hoja neutra pinta sin
     que esta piel lo nombre —una tabla, un <pre>, un placeholder— queda dentro
     del sistema en vez de gris. */
  --b-tinta:  #1f1b16;
  --b-cuerpo: #4a443b;
  --b-mute:   #6b655b;
  --b-papel:  #f6f3ee;
  --b-hunde:  #f0e6d9;
  --b-pelo:   #e6e1d8;
  --b-enlace: #a4622a;
  --b-foco:   #a4622a;
  --b-radio:  18px;

  color-scheme: light;
}


/* ── Base ─────────────────────────────────────────────────────────────────── */

body {
  background: var(--piel-papel);
  color: var(--piel-texto);
  font-family: var(--piel-cuerpo);
  font-size: 16px;
  line-height: 1.7;
}

h1, h2, h3, h4,
.hero__h1, .sc__h1 {
  font-family: var(--piel-display);
  color: var(--piel-tinta);
  text-wrap: balance;
}

h2 {
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0 0 28px;
  max-width: 22ch;   /* la maqueta: 22ch en `cuando`, `normativa` y `faq` */
}

/* 24ch en las que la maqueta centra */
.proceso__h2 { max-width: 24ch; }

h3 {
  font-weight: 600;
  font-size: 21px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 32px 0 12px;
  max-width: none;
}

h4 {
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
  margin: 24px 0 10px;
}

p { max-width: 74ch; text-wrap: pretty; }

a { color: var(--piel-acento-oscuro); text-underline-offset: 2px; }
a:hover { color: var(--piel-acento); }

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

strong, b { font-weight: 600; color: var(--piel-tinta); }

hr {
  border: 0;
  height: 1px;
  background: var(--piel-borde-fuerte);
  margin: 40px 0;
}

.skip {
  position: absolute;
  left: -9999px;
  background: var(--piel-profunda);
  color: var(--piel-claro);
  padding: 12px 20px;
  border-radius: var(--piel-pildora);
  text-decoration: none;
  z-index: 20;
}
.skip:focus { left: 16px; top: 16px; }


/* ── El contenedor ────────────────────────────────────────────────────────
   Una sola declaración resuelve las dos formas que usa la maqueta: el
   contenido queda centrado a `--piel-ancho`, y el FONDO de la sección llega a
   los dos bordes de la pantalla, que es lo que necesitan `proceso`, `why` y
   `cta`. Sin esto habría que envolver cada sección en un div que las
   plantillas no emiten.

   El número NO se escribe acá. Esta expresión es la misma en los cuatro
   lugares que fijan el ancho —esta, `.topbar`, `.site-header` y el pie—, así
   que mover el token los mueve a los cuatro a la vez y no hay forma de que la
   nav quede de un ancho y el cuerpo de otro. */

main {
  max-width: none;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* `aside` y `nav` NO son un adorno de la lista: son las dos formas que toma
   el índice "On this page" —`<aside class="indice">` en /contact/ y
   `<nav class="indice">` en /privacy-policy/—. Sin ellos ese bloque quedaba
   FUERA del contenedor, pegado al borde izquierdo de la pantalla, en las dos
   páginas. Medido el 2026-08-19 sobre el HTML publicado. */
main > section,
main > div,
main > aside,
main > nav {
  margin: 0;
  padding-inline: max(var(--piel-borde-lat), calc((100% - var(--piel-ancho)) / 2));
  padding-block: 72px 0;
}

main > section:last-child { padding-bottom: 0; }


/* ── Barra superior ───────────────────────────────────────────────────────── */

/* MONO, VERSALITA Y A SANGRE — maqueta línea 29, verbatim:
   `background:#15110d; gap:22px; padding:10px 32px;
    font-family:'IBM Plex Mono'; font-size:11px; letter-spacing:0.05em`.

   Las tres maquetas que traen barra superior —home, hub y soporte— la escriben
   IGUAL, así que esto no es una decisión del Homepage: es el chrome del sistema.
   Hasta el 2026-08-19 se dibujaba en sans de 13.5px sobre `--piel-profunda` y
   acotada a `--piel-ancho-banda`, que es el molde de servicio.

   `text-transform` y no texto en mayúsculas en el dato: el molde escribe
   "ANSWERED WITHIN 24 HOURS" y "CGC1524886 · LICENSED, INSURED AND BONDED",
   pero acá los dos salen de `datos.json` en su capitalización natural. La
   versalita es del molde, la capitalización del dato es del cliente.

   ⚠ EL PADDING LATERAL NO ES EL `32px` DEL MOLDE, y volver a ponerlo es lo que
   el operador mandó deshacer el 2026-08-19: *"el nav y los strips están
   estirados porque cambiaron de posición"*.

   La tipografía de esta barra SÍ es del molde y se queda. Lo que no puede ser
   del molde es el ancho, porque el molde acota TODO a 1240 y este sitio tiene
   DOS anchos desde la corrección #178 — `--piel-ancho-banda` para las cuatro
   piezas de arriba y `--piel-ancho` para el cuerpo. Con `32px` fijo esta barra
   arranca en x=32 mientras el hero, que está pegado debajo, arranca en x=72: no
   se lee como "una barra más ancha", se lee como que la página está mal
   alineada. Medido a 1440 px: contenido 1376 contra los 1296 del hero. */
.topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 22px;
  background: var(--piel-negra);
  color: var(--piel-claro-topbar);
  padding: 10px max(var(--piel-borde-lat),
                    calc((100% - var(--piel-ancho-banda)) / 2));
  font-family: var(--piel-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ⚠ EL `min-height` ES EL ÁREA TÁCTIL, no una decisión de aire. Medido el
   2026-08-20 en la Banda 2: el teléfono daba 93×17 y es el control más
   valioso del chrome —es una llamada—. WCAG 2.2 pide 24×24 en AA (2.5.8);
   los 44×44 que pide la tabla de `cierre-de-pagina` son AAA (2.5.5), y el
   operador eligió AA para no estirar la barra 27px. El `inline-flex` está
   para que el `min-height` tenga efecto: en un `<a>` en línea no hace nada. */
.topbar__phone {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  font-family: var(--piel-mono);
  font-weight: 400;
  color: var(--piel-acento-claro);
  text-decoration: none;
}
.topbar__phone:hover { color: var(--piel-claro); }

.topbar__licencia { margin-left: auto; }


/* ── Cabecera ─────────────────────────────────────────────────────────────── */

/* TRES COLUMNAS, y la del medio es la nav. La maqueta la centra con
   `margin: 0 auto` dentro de un flex row, y eso NO centra en la página:
   centra en el espacio que sobra entre el logo y el CTA. Si los dos no miden
   lo mismo, la nav se corre — y nunca miden lo mismo.

   Medido el 2026-08-19 sobre el HTML publicado, a 1600 px:

     maqueta   logo 268px · CTA 188px  →  nav corrida  +40px
     sitio     logo 187px · CTA 353px  →  nav corrida  −83px

   El desvío de acá es el doble porque el CTA lleva el teléfono adentro. Con
   `1fr | auto | 1fr` la columna del medio cae en el centro de la banda sea
   cual sea el ancho de las otras dos, y deja de depender de cuánto mide el
   texto del botón. Es la única regla del chrome que se aparta del molde, y se
   aparta para cumplir lo que el molde quiere decir: la nav va al medio. */
/* ⚠ EL GRID VOLVIÓ, Y ES LA TERCERA VEZ QUE ESTA REGLA CAMBIA DE MANOS.
   El 2026-08-19 alguien la pasó a `display:flex` + `padding:16px 32px` para
   copiar la maqueta al pie de la letra, y el operador lo mandó deshacer el
   mismo día: *"el nav y los strips están estirados porque cambiaron de
   posición… necesito reducirlo a como estaba antes"*.

   Las dos cosas que el flex del molde se llevaba puestas:

     · EL ANCHO. `32px` fijo desalinea la barra del hero que tiene pegado
       debajo — ver la nota larga en `.topbar`, es el mismo defecto.
     · EL CENTRO DE LA NAV. Con flex, `margin: 0 auto` no centra en la página:
       centra en lo que sobra entre el logo y el CTA, y esos dos nunca miden lo
       mismo. Medido a 1440: la nav caía 42 px a la izquierda del centro.
       Con `1fr auto 1fr` la columna del medio cae en el centro de la banda sea
       cual sea el ancho de las otras dos. Es la corrección #181.

   EL MÓVIL LO DABA POR HECHO Y NADIE LO NOTÓ: el bloque de ≤62rem declara
   `grid-template-areas` para apilar logo · CTA · nav en ese orden. Sobre un
   contenedor flex esas cuatro reglas son inertes, así que mientras esto fue
   flex el teléfono publicaba logo · nav · CTA —el orden del HTML— y el botón de
   conversión quedaba tercero. Un cambio de `display` apaga en silencio todo lo
   que otra regla apoyaba en él.

   El fondo translúcido con `blur` SÍ es del molde y se queda: es de las tres
   maquetas de la familia Cinta. Sólo se distingue con la página scrolleada, que
   es justo cuando la barra pegajosa se apoya sobre el contenido. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 5;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  background: rgba(246, 243, 238, 0.94);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--piel-borde);
  padding: 16px max(var(--piel-borde-lat),
                    calc((100% - var(--piel-ancho-banda)) / 2));
}

/* Las tres columnas del grid. Sin `justify-self` cada una se estira a su pista
   y el `1fr auto 1fr` no se ve: el logo quedaría centrado en su mitad. */
.site-header__logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  justify-self: start;
}

.site-header__logo img { width: auto; height: 26px; }

/* 26px, que es lo que mide la marca en el molde (línea 37: `width:26px;
   height:26px; border-radius:8px`). Ahí es un hueco de color; acá entra el
   monograma KR de verdad, recortado a su caja y sin fondo. */
.site-header__simbolo { width: 26px; height: 26px; }

/* UNA SOLA LÍNEA, con la ciudad en el ámbar — maqueta línea 38:
   `Kitchen Remodeler <span style="color:#c07a3a">Boca Raton</span>`, todo en
   Manrope 700 de 16px. Estaba en dos renglones, con la ciudad debajo y en la
   tipografía de texto, que es el logotipo del molde de servicio. */
.site-header__marca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.28em;
  line-height: 1.15;
}

.site-header__marca-nombre,
.site-header__marca-ciudad {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
}

.site-header__marca-nombre { color: var(--piel-tinta); }
.site-header__marca-ciudad { color: var(--piel-acento); }

/* La columna del medio del grid. `margin: 0 auto` centraba en el hueco entre el
   logo y el CTA, que es lo que hace el molde y lo que dejaba la nav 42 px
   corrida — ver la nota de `.site-header`. */
.site-nav { justify-self: center; }

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 16px, NO los 14 de la maqueta — decisión del operador, sostenida dos veces.

   La tomó el 2026-08-19 y ese mismo día el traslado del chrome la revirtió al
   14 del archivo, con el argumento de que la barra había vuelto a sangre y ya
   no le quedaban chicos. El operador la repuso: *"los nombres de los tabs
   también están muy pequeños en el nav"*.

   El motivo de fondo no era el ancho de la barra: son TRES ítems —Services,
   About, Contact— contra un logo de 16px y un botón de 14 que lleva el teléfono
   adentro. A 14 la nav es lo más chico de la banda siendo lo único que se
   navega. La maqueta trae cinco ítems y ahí el 14 se sostiene solo.

   El padding sube con la fuente: `10px 16px`, o las píldoras del hover quedan
   apretadas contra el texto más grande. */
.site-nav__list a {
  display: block;
  font-family: var(--piel-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--piel-texto);
  text-decoration: none;
  padding: 10px 16px;
  border-radius: var(--piel-pildora);
}

.site-nav__list a:hover {
  background: var(--piel-tinte);
  color: var(--piel-acento-oscuro);
}

.site-header__cta {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  background: var(--piel-acento);
  color: var(--piel-blanco);
  padding: 12px 22px;
  border-radius: var(--piel-pildora);
  white-space: nowrap;
  justify-self: end;
}
.site-header__cta:hover { background: var(--piel-acento-oscuro); color: var(--piel-blanco); }

/* El rótulo corto del botón sólo existe para el teléfono: acá se apaga y en el
   bloque de 40rem se enciende, cambiándose por el largo. Ver la nota del
   `<a class="site-header__cta">` en `plantillas/_base.html`. */
.site-header__cta-corto { display: none; }


/* ── Botones ──────────────────────────────────────────────────────────────── */

.btn,
a.btn[href^="tel:"] {
  display: inline-block;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 15px;
  /* SIN line-height propio: la maqueta hereda el 1.7 del cuerpo y eso es lo
     que le da al botón su altura (25.5px de caja de texto, no 19.5). */
  line-height: 1.7;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: var(--piel-pildora);
  min-height: 0;
  cursor: pointer;
  white-space: normal;
}

.btn--primario {
  background: var(--piel-acento);
  color: var(--piel-blanco);
  border: 1px solid var(--piel-acento);
}
.btn--primario:hover { background: var(--piel-acento-oscuro); border-color: var(--piel-acento-oscuro); color: var(--piel-blanco); }

.btn--secundario {
  background: transparent;
  color: var(--piel-tinta);
  border: 1px solid #cfc6b8;
}
.btn--secundario:hover { background: var(--piel-tinta); color: var(--piel-claro); }


/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
  padding-block: 56px 0 !important;
}

/* ═══ EL ENSANCHE ═══ las dos piezas de `main` que van a `--piel-ancho-banda`.
   Las otras dos —`.topbar` y `.site-header`— lo declaran en su propia regla,
   más arriba, porque no cuelgan de `main`.

   Misma expresión que `main > section`, con el otro token. Alcanza con la
   clase: `main > section` pesa (0,0,2) —dos selectores de tipo— y `.hero`
   pesa (0,1,0), así que una clase sola ya le gana sin `!important` y sin
   `main >` adelante. (El `!important` del `padding-block` de acá arriba es
   anterior a esto y no hace falta para ganarle a esa regla.)

   `.trust` es un `<div>`, no un `<section>`, y por eso entra por
   `main > section, main > div`. Con la clase se resuelve igual. */
.hero,
.trust {
  padding-inline: max(var(--piel-borde-lat),
                      calc((100% - var(--piel-ancho-banda)) / 2));
}

.hero__texto { display: flex; flex-direction: column; gap: 18px; }

.hero__rotulo {
  align-self: flex-start;
  margin: 0;
  max-width: none;
  font-family: var(--piel-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-acento-oscuro);
  background: var(--piel-tinte);
  padding: 7px 14px;
  border-radius: var(--piel-pildora);
}

.hero__h1 {
  font-weight: 700;
  font-size: clamp(34px, 5vw, 64px);
  line-height: 1.0;
  letter-spacing: -0.035em;
  margin: 0;
  max-width: none;
}

.hero__sub {
  margin: 0;
  font-size: 18px;
  line-height: 1.55;
  max-width: 54ch;
}

.hero__acciones { display: flex; flex-wrap: wrap; gap: 10px; }

.hero__figura { margin: 0; }

.hero__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}

.hero__figura img:nth-of-type(2) { aspect-ratio: 1; margin-top: 16px; }

.hero__dato {
  display: flex;
  flex-direction: column;
  gap: 2px;
  background: var(--piel-profunda);
  border-radius: var(--piel-radio);
  padding: 18px 22px;
  margin-top: 16px;
  color: var(--piel-claro-4);
  font-size: 13px;
}
.hero__dato b {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--piel-acento-claro);
}

/* La fila de specs: la maqueta la dibuja como fichas con rótulo mono arriba. */
.hero__specs {
  border-top: 1px solid var(--piel-borde);
  margin-top: 20px;
}
/* EL PADDING IZQUIERDO NO ES DECORATIVO: sin él el texto toca la línea.
   `base.css` da a estas fichas `padding: .85rem 1rem`, con aire de los dos
   lados. La piel lo pisaba con `14px 18px 14px 0` —left en CERO—, y como cada
   ficha lleva su separador vertical a la derecha, el rótulo y el dato de la
   2ª, 3ª y 4ª arrancaban pegados a la línea de la ficha anterior. Se veía como
   texto tocando la raya, que es exactamente lo que era.

   La PRIMERA conserva el left en 0 a propósito: es la única que no tiene una
   línea a su izquierda, y su borde es el del contenedor, así que su rótulo
   tiene que caer a plomo con el H1 de arriba. Darle padding la desalinearía
   del resto del hero. */
.hero__spec { border-right: 1px solid var(--piel-borde); padding: 14px 18px; }
.hero__spec:first-child { padding-left: 0; }
.hero__spec dt {
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}
.hero__spec dd {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--piel-tinta);
}


/* ── Franja de confianza ──────────────────────────────────────────────────── */

.trust {
  padding-block: 44px 0 !important;
}

.trust__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--piel-profunda);
  border-radius: var(--piel-radio);
  overflow: hidden;
}

.trust__item {
  padding: 22px 26px;
  border-right: 1px solid var(--piel-borde-oscuro);
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.7;   /* heredado en la maqueta = 23.8px */
  color: var(--piel-claro-2);
}
.trust__item:last-child { border-right: 0; }


/* ── Apertura ─────────────────────────────────────────────────────────────
   Dos columnas: la prosa a la izquierda, la figura a la derecha. El primer
   párrafo va en display, más grande: es el "lead" de la maqueta. */

.apertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 52px;
  align-items: stretch;
  padding-block: 64px 0 !important;
}

/* SIN FIGURA, UNA SOLA COLUMNA. La segunda pista mide 420 px más los 52 de
   separación, y si nadie la ocupa esos 472 px siguen ahí: el texto queda en la
   mitad izquierda con la derecha vacía. Centrarlo por dentro no alcanza —el
   bloque entero está corrido— y así se publicó `/services/` el 2026-08-19: los
   párrafos daban `text-align: center` y aun así se veían pegados a la
   izquierda, con 411 px de aire de un lado y 883 del otro.

   Es la misma regla que ya tienen `.local`, `.hub-intro`, `.why` y las otras
   siete secciones de dos columnas; a `.apertura` le faltaba. Hoy la enciende
   una sola página —el resto de las aperturas del sitio traen su foto— pero
   vale para cualquiera que se quede sin ella. */
.apertura:not(:has(figure)) { display: block; }

/* La columna de texto: un solo ítem del grid, con el ritmo de 18px de la
   maqueta. Antes cada <p> era una fila propia y el `align-items:center` de la
   sección abría huecos de media pantalla entre el título y la prosa. */
.apertura__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.apertura__h2 { margin: 0; }
.apertura__texto p { margin: 0; }

/* El primer párrafo es el lead: Manrope 500, hasta 27px. */
.apertura__texto > p:first-of-type {
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--piel-tinta);
  max-width: none;
}

/* LA COLUMNA DE FOTOS IGUALA EL ALTO DEL TEXTO, que es lo que la maqueta
   consigue con una sola figura 4:5 contra un texto de ese largo. Con DOS
   fotos y un `aspect-ratio` fijo cada una pedía 525px y la columna se iba a
   1066px contra un texto de la mitad: por eso salían desproporcionadas.
   `stretch` + `flex:1` + `object-fit:cover` las reparte en el alto que hay. */
.apertura__figura {
  grid-column: 2;
  align-self: stretch;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}

.apertura__figura img {
  width: 100%;
  flex: 1 1 0;
  min-height: 220px;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}

/* Con una sola foto vuelve a la proporción 4:5 de la maqueta. */
.apertura__figura:has(img:only-child) img { flex: 0 0 auto; aspect-ratio: 4 / 5; }


/* ── Secciones de prosa: cuando · variantes · costo · opciones ────────────
   Regla horizontal arriba, como en la maqueta. La prosa queda PROSA: sin
   `columns:2` y sin tarjetas — los párrafos de estas secciones son los que
   llevan los enlaces contextuales, que son la única arista del mapa del
   sitio (no hay breadcrumbs). */

.cuando,
.variantes,
.opciones,
.costo,
.problemas,
.area,
.historia,
.refuerzo,
.servicios-prosa,
.hub-intro,
.hub-ciudad,
.hub-cobertura,
.credenciales,
.propietario,
.about-resumen,
.local,
.angulo,
.direcciones,
.areas,
.mapa,
.gbp,
.redes,
.señales,
.locations,
.criticos,
.cats,
.geo,
.servicio-ahi {
  padding-block: 56px 0 !important;
}

.cuando::before,
.variantes::before,
.costo::before,
.señales::before,
.opciones::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--piel-borde-fuerte);
  margin: 0 0 40px;
}

.cuando p,
.variantes p,
.señales p,
.opciones p,
.costo p,
.problemas p,
.local p,
.area p { margin: 0 0 18px; }

/* ── La prosa a dos columnas ──────────────────────────────────────────────
   `columns:2; column-gap:48px` en `cuando`, y `column-gap:40px` en el bloque
   de mercado de `costo`. Copiado de la maqueta, valor por valor.

   ⚠ EL README DE LA MAQUETA LO DESACONSEJA — choque #2 de
   diseno/servicio/README.md: a 1.600 palabras la columna izquierda queda de
   dos pantallas, y un párrafo con enlaces adentro se lee peor partido. Va
   igual por decisión del usuario del 2026-08-19: el traslado es 1 a 1.
   En móvil colapsa a una sola columna, que es donde ese costo desaparece.

   Y el `max-width` del párrafo se anula acá: dentro de `columns` la medida
   la fija el ancho de la columna, no el `ch`. Con los dos puestos, la prosa
   ocupaba 710 px de los 1216 y dejaba media página vacía.

   Y LOS DOS CRÍTICOS ENTRAN ACÁ desde el 2026-08-20, por la decisión del
   usuario de que un crítico se vea como un servicio: `señales` es el `cuando`
   del tipo y `opciones` es su `variantes`. Antes no emitían envoltorio, así
   que las cuatro secciones de prosa de las dos páginas se publicaban como una
   columna de 74ch con media pantalla en blanco al lado. */

.cuando__prosa,
.variantes__prosa,
.señales__prosa,
.opciones__prosa {
  columns: 2;
  column-gap: 48px;
}

/* NINGÚN BLOQUE SE PARTE ENTRE LAS DOS COLUMNAS. Sin esto, un ítem que empieza
   al final de la izquierda termina arriba de la derecha y el texto deja de
   leerse como una unidad — es lo que pasaba con "Drawers or doors below the
   counter". El `avoid` mantiene juntos el subtítulo y su párrafo. */
.cuando__prosa > *,
.variantes__prosa > *,
.señales__prosa > *,
.opciones__prosa > *,
.costo__cuerpo > * { break-inside: avoid; }

.cuando__prosa h3,
.variantes__prosa h3,
.señales__prosa h3,
.opciones__prosa h3,
.costo__cuerpo h3 { break-after: avoid; }

/* ── El título y la entrada, centrados ──────────────────────────────────
   Vale para `variantes` y para `costo`: las dos abren con un H2 y un párrafo
   que presenta la sección, y ese par va centrado y a todo el ancho, fuera de
   las dos columnas. */
.variantes__h2,
.opciones__h2,
.costo__h2 {
  margin-inline: auto;
  text-align: center;
  max-width: 24ch;
}

/* ⚠ `opciones` NO CENTRA SU PRIMER PÁRRAFO, y `variantes` sí. No es un olvido:
   en `variantes` el primero presenta la sección, y en los dos críticos el
   primero YA ES el primer ítem de la lista —"Cabinetry is the largest line and
   the longest lead time"—, así que cruzarlo a las dos columnas y centrarlo lo
   sacaba de la lista. La entrada de verdad, si alguna página la escribe, viene
   por `opciones_intro:` en el front matter y ES la que se centra. Va FUERA del
   envoltorio `__prosa` —es hermana, no hija— así que no necesita `column-span`:
   nunca entra en el multicolumna. */
.opciones__intro {
  text-align: center;
  max-width: 74ch;
  margin: 0 auto 28px;
}

.costo__cuerpo > p:first-child {
  column-span: all;
  text-align: center;
  max-width: 74ch;
  margin: 0 auto 28px;
}

.variantes__prosa > p:first-child {
  column-span: all;
  text-align: center;
  max-width: 74ch;
  margin: 0 auto 28px;
}

/* ── DÓNDE CORTA LA COLUMNA ─────────────────────────────────────────────
   `columns` reparte por ALTURA, así que un bloque puede empezar a mitad de la
   columna izquierda y seguir arriba de la derecha: los dos lados dejan de
   estar alineados y el subtítulo derecho aparece a media altura del párrafo
   de al lado.

   EL CORTE DEPENDE DE CUÁNTOS SUBTÍTULOS HAY, y por eso son dos selectores y
   no uno. La regla anterior cortaba siempre antes del ÚLTIMO, y eso sólo
   equilibra si son dos o tres — que es lo que tenía la página contra la que se
   escribió—. Medido sobre las diez páginas de servicio, `variantes` trae de 2
   a 5 subtítulos, y con cinco el último dejaba cuatro bloques apilados a la
   izquierda y uno solo a la derecha.

   El corte va antes del subtítulo en la posición `floor(N/2) + 1`:

     N=2 → antes del 2º   1 | 1     N=4 → antes del 3º   2 | 2
     N=3 → antes del 3º   2 | 1     N=5 → antes del 4º   3 | 2

   Que en CSS, sin saber N de antemano, son dos casos:
     · hasta 3 subtítulos → el último          (`-n+3` acota la posición)
     · 4 o más            → el ANTEÚLTIMO      (`n+3` descarta N=2 y N=3)

   ⚠ TECHO: a partir de 6 subtítulos el anteúltimo se queda corto y la columna
   izquierda vuelve a cargar de más. Hoy ninguna página llega —el máximo es 5,
   en pantry, island, accessible, cabinet-installation y granite— y cuando
   alguna llegue, el arreglo es un tercer caso, no cambiar estos dos.

   Para `costo` no cambia nada: con 1 o 2 subtítulos cae siempre en el primer
   caso, que es exactamente lo que hacía la regla vieja. */
.variantes__prosa h3:last-of-type:nth-of-type(-n+3),
.variantes__prosa h3:nth-last-of-type(2):nth-of-type(n+3),
.opciones__prosa h3:last-of-type:nth-of-type(-n+3),
.opciones__prosa h3:nth-last-of-type(2):nth-of-type(n+3),
.costo__cuerpo h3:last-of-type:nth-of-type(-n+3),
.costo__cuerpo h3:nth-last-of-type(2):nth-of-type(n+3) { break-before: column; }

.cuando__prosa p,
.variantes__prosa p,
.señales__prosa p,
.opciones__prosa p,
.costo__cuerpo p { max-width: none; }

.cuando__prosa p:last-child,
.variantes__prosa p:last-child,
.señales__prosa p:last-child,
.opciones__prosa p:last-child { margin-bottom: 0; }

/* Listas del cuerpo: viñeta discreta, sin convertirse en tarjetas. */
main ul:not([class]),
main ol:not([class]) { padding-left: 1.25rem; max-width: 74ch; }
main ul:not([class]) li,
main ol:not([class]) li { margin-bottom: 10px; }

main table {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  overflow: hidden;
  margin-bottom: 24px;
}
main th {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--piel-tinta);
  background: var(--piel-tinte);
}
main th, main td { border-bottom: 1px solid var(--piel-borde); padding: 14px 18px; }
main tr:last-child td { border-bottom: 0; }

/* La cita en bloque del cuerpo. */
main blockquote:not([class]) {
  margin: 0 0 24px;
  padding: 20px 26px;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-left: 3px solid var(--piel-acento);
  border-radius: var(--piel-radio);
}


/* ── Proceso ──────────────────────────────────────────────────────────────
   Banda blanca a sangre, título centrado, pasos a una columna con la
   numeración en ámbar claro. Fondo fijado por NOMBRE de la sección. */

.proceso {
  background: var(--piel-blanco);
  margin-top: 72px !important;
  padding-block: 72px !important;
}

.proceso__h2 { margin: 0 auto 36px; max-width: 24ch; text-align: center; }

/* `display:flex; flex-direction:column` es de la maqueta, y NO es decorativo:
   es lo que centra los pasos. Con el `<ol>` en block, el `margin-inline:auto`
   del `<li>` no alcanzaba y los ocho pasos quedaban pegados a la izquierda
   dentro de un contenedor de 1216 px. */
.proceso ol,
.proceso ul,
.proceso ol:not([class]),
.proceso ul:not([class]) {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
  max-width: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.proceso li {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
  padding: 26px 0;
  border-top: 1px solid var(--piel-borde);
  counter-increment: paso;
  margin: 0;
  max-width: none;
}

.proceso ol li::before {
  content: counter(paso, decimal-leading-zero);
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--piel-numero);
}

.proceso li strong {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  color: var(--piel-tinta);
  margin: 0;
}

/* El `<span>` descriptivo de cada paso: 74ch, como en la maqueta. El centrado
   ya lo da el `align-items:center` del flex, no un margin auto. */
.proceso li > p,
.proceso li > span { max-width: 74ch; margin: 0; }

.proceso__figura { display: none; }


/* ── Costo ────────────────────────────────────────────────────────────────
   Prosa a la izquierda; si la página publica una tabla, va al lado en una
   tarjeta blanca. Es el aside de la maqueta, armado con lo que la plantilla
   ya emite en vez de pedirle un slot nuevo. */

/* La maqueta parte esta sección en dos: la prosa a 1.6fr y un `<aside>` a 1fr
   con la cifra grande, la tabla de bandas de mercado y un slot de foto.
   ESE ASIDE NO SE PUEDE ARMAR ACÁ y no es un olvido: sus tres piezas son
   contenido —un monto, una banda de mercado con su fuente, una foto—, y
   ninguna existe en `contenido/*.md` ni en `brief/precios.md` como dato
   separado. Fabricarlas sería inventar un número, que es la corrección #105.

   Lo que sí se traslada es la otra mitad del patrón: el bloque de prosa a dos
   columnas, con los subtítulos cruzando las dos. Así la sección ocupa los
   1216 px de la maqueta en vez de dejar media página en blanco. */

.costo__cuerpo {
  columns: 2;
  column-gap: 48px;
}

/* Los h3 fluyen DENTRO de las columnas. Con `column-span: all` el flujo se
   corta en cada subtítulo y la columna derecha queda con huecos de media
   pantalla — medido el 2026-08-19. Solo las tablas cruzan, porque una tabla
   partida en dos columnas no se lee. */
.costo__cuerpo table,
.costo__cuerpo blockquote { column-span: all; }

.costo__cuerpo h3 { margin-top: 0; break-after: avoid; }

/* LA LÍNEA DEL PRECIO PUBLICADO — el párrafo que la página dedica a la cifra
   que promete. Va a cuerpo menor para entrar en UNA línea y arrancar a la
   misma altura que el subtítulo de la otra columna.

   ⚠ EL SELECTOR ES POSICIONAL A PROPÓSITO. El intento semántico era
   `p:has(> strong:only-child)`, y está MAL: `:only-child` cuenta elementos y
   no nodos de texto, así que también matchea un párrafo que ABRE en negrita y
   sigue en redonda — que es la forma del cierre de `costo`. Con el
   `text-wrap: nowrap` que llevaba, ese párrafo salía en una sola línea y se
   cortaba contra el borde derecho de la página.

   Sin `nowrap`: el cuerpo menor ya lo mete en una línea, y si algún día el
   texto crece, envuelve en vez de desbordar. */
.costo__cuerpo > p:nth-of-type(2) {
  font-size: 14.4px;
  line-height: 1.55;
  margin-bottom: 22px;
}
.costo__cuerpo p + h3 { margin-top: 26px; }

.costo__cuerpo h3:first-child { margin-top: 0; }
.costo__cuerpo p:last-child { margin-bottom: 0; }


/* ── Why us ───────────────────────────────────────────────────────────────
   Banda oscura a sangre. La prosa pasa a claro-3, que mide 10:1 sobre el
   fondo. Fondo por NOMBRE. */

.why {
  background: var(--piel-profunda);
  margin-top: 72px !important;
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

/* ⚠ TEXTO A LA IZQUIERDA, FOTO A LA DERECHA — decisión del operador del
   2026-08-20, y va CONTRA la maqueta, que pone la foto en la columna
   izquierda. Se anota porque el día que llegue la maqueta de este tipo va a
   decir lo contrario y hay que saber que esto fue elegido, no heredado.

   Las dos plantillas que emiten la sección —`gbp_service` y
   `critical_gbp_service`— cambiaron el ORDEN DEL DOM en el mismo movimiento:
   el texto va primero y la figura después. Sin eso, en móvil —donde la banda
   colapsa a un bloque y manda el orden del marcado— la foto quedaba arriba del
   H2 y la sección abría con una imagen sin título. */
.why__texto { grid-column: 1; }
.why__h2 { color: var(--piel-claro); margin-bottom: 24px; max-width: none; }
.why p { color: var(--piel-claro-3); max-width: 62ch; margin: 0 0 18px; }
.why p:last-child { margin-bottom: 0; }
.why strong, .why b { color: var(--piel-claro); }
.why a { color: var(--piel-acento-claro); }
.why a:hover { color: var(--piel-claro); }
.why li { color: var(--piel-claro-3); }

.why__figura {
  grid-column: 2;
  align-self: center;
  margin: 0;
}
.why__figura img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}

/* Sin figura no queda una columna vacía: la banda pasa a dos columnas de
   prosa, que es lo que mantiene el bloque oscuro lleno de borde a borde. El
   H2 cruza las dos. */
.why:not(:has(.why__figura)) { display: block; }
.why:not(:has(.why__figura)) .why__h2 { max-width: 20ch; }

/* EL ENVOLTORIO SE DISUELVE, y sin él no hay fallback (§4 #174). Todo esto
   estaba escrito contra hijos DIRECTOS de `.why`, y la sesión anterior metió
   un `.why__texto` en el medio: el `grid-column: 2` del caso CON figura caía
   sobre el envoltorio, los párrafos se apilaban en la mitad derecha y la
   izquierda de la banda oscura salía VACÍA en las nueve páginas de servicio.
   `display: contents` devuelve los párrafos al grid sin tocar la plantilla.

   Los dos críticos tampoco lo traían, y desde el 2026-08-20 sí. La regla se
   queda igual: cubre las dos formas de marcado a propósito, porque el fallback
   tiene que sobrevivir a cualquier plantilla que llegue sin envoltorio. */
.why:not(:has(.why__figura)) .why__texto { display: contents; }

@media (min-width: 62rem) {
  .why:not(:has(.why__figura)) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 48px;
    row-gap: 0;
    align-items: start;
  }
  .why:not(:has(.why__figura)) .why__h2 { grid-column: 1 / -1; max-width: none; }
  /* Sin esto los párrafos heredan el `grid-column: 2` del caso CON figura y
     se apilan todos en la columna derecha. */
  .why:not(:has(.why__figura)) > * { grid-column: auto; }
  /* 62ch es la medida de la maqueta y se conserva aunque la composición
     cambie: sin la foto 1:1 la banda va a dos columnas, pero la línea mide
     lo mismo. Va SIN `>`: con el envoltorio disuelto los párrafos son nietos
     del grid, no hijos. */
  .why:not(:has(.why__figura)) p { max-width: 62ch; }
}


/* ── El H2 de la banda oscura, centrado · SOLO en /resources/ ─────────────
   Pedido del usuario, 2026-08-20, mirando "How to Read a Kitchen Quote".

   ⚠ VA ACOTADO AL TIPO Y NO A LA VARIANTE SIN FIGURA, y la diferencia importa:
   esa variante la publican DIEZ páginas —los nueve servicios sin foto en la
   banda y este hub—, así que centrar en `.why:not(:has(.why__figura))` cambia
   nueve páginas de dinero ya construidas sin que nadie lo haya pedido. Acá el
   H2 titula un bloque de dos columnas que no tiene foto de qué colgarse, y
   centrado cierra la banda; en un servicio la banda tiene otra composición y
   esa decisión es aparte. */
.t-resources_hub .why__h2 {
  text-align: center;
  margin-inline: auto;
  max-width: 24ch;
}


/* ── Normativa ────────────────────────────────────────────────────────────
   El párrafo centrado y las credenciales en fichas blancas. La grilla es
   auto-fit: la maqueta trae cinco, pero una página puede declarar tres. */

.normativa { padding-block: 72px 0 !important; }

.normativa__texto { text-align: center; }
.normativa__h2 { margin: 0 auto 24px; max-width: 22ch; }
.normativa__texto p { margin: 0 auto 36px; max-width: 78ch; }

/* UNA SOLA FILA, cualquiera sea el número de fichas. La maqueta trae cinco y
   las pone en fila; este cliente declara seis, y con `repeat(5,…)` la sexta
   bajaba sola a una segunda fila. `auto-fit` con `minmax(0,1fr)` —sin ancho
   mínimo— reparte las que haya en una única fila, que es la forma de la
   maqueta y no su número exacto de columnas. */
.normativa__datos {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 14px;
  margin: 0;
}

.normativa__dato {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 22px 20px;
}

.normativa__dato dt {
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}

.normativa__dato dd {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13.5px;
  line-height: 1.55;
}

.normativa__dato dd b {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--piel-tinta);
}


/* ── FAQ ──────────────────────────────────────────────────────────────────── */

.faq { padding-block: 72px 0 !important; }

.faq__h2 { margin: 0 auto 32px; max-width: 22ch; text-align: center; }

.faq__lista {
  max-width: 940px;
  margin: 0 auto;
  border-top: 1px solid var(--piel-borde-fuerte);
}

.faq__item {
  border-bottom: 1px solid var(--piel-borde-fuerte);
  padding: 22px 0;
}

.faq__pregunta {
  cursor: pointer;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.35;
  color: var(--piel-tinta);
  list-style: none;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}
.faq__pregunta::-webkit-details-marker { display: none; }

.faq__pregunta::after {
  content: "+";
  font-weight: 400;
  font-size: 24px;
  line-height: 1;
  color: var(--piel-acento);
  flex: 0 0 auto;
}
.faq__item[open] .faq__pregunta::after { content: "–"; }

.faq__respuesta {
  margin: 14px 0 0;
  max-width: 74ch;
  font-size: 15px;
}


/* ── Galería ──────────────────────────────────────────────────────────────
   La mecánica del carrusel la resuelve base.css y no se toca: son radios
   con `:checked`, sin una línea de JavaScript. Acá va solo la piel. */

.galeria { padding-block: 72px 0 !important; }

.galeria__h2 { margin: 0 0 8px; }
.galeria__cabecera { margin-bottom: 28px; }

.galeria__figura img { border-radius: var(--piel-radio); aspect-ratio: 4 / 3; }

.galeria__titulo {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--piel-tinta);
}
.galeria__detalle { color: var(--piel-tenue); font-size: 13.5px; }

.galeria__flecha {
  border-color: var(--piel-borde-fuerte);
  background: var(--piel-blanco);
  color: var(--piel-tinta);
}
.galeria__flecha:hover { background: var(--piel-tinte); color: var(--piel-acento-oscuro); }


/* ── La frase de vuelta al padre ──────────────────────────────────────────
   Sigue siendo prosa dentro de una franja con reglas arriba y abajo, como en
   la maqueta. No es un botón ni un breadcrumb: es el único enlace de esa
   arista del mapa. */

.vuelta {
  margin-top: 56px !important;
  padding-block: 24px !important;
  border-top: 1px solid var(--piel-borde-fuerte);
  border-bottom: 1px solid var(--piel-borde-fuerte);
}
.vuelta p { margin: 0; max-width: none; }


/* ── CTA de cierre ────────────────────────────────────────────────────────
   Franja ámbar a sangre, centrada, con el botón en la profunda. Fondo por
   NOMBRE. Es el último bloque del cuerpo y pega con el pie. */

.cta {
  background: var(--piel-acento);
  margin-top: 72px !important;
  padding-block: 64px !important;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 32px;
}

/* El bloque de texto va a 58ch y el botón AL LADO, envolviendo si no entra:
   `flex-wrap` + `justify-content:center` de la maqueta. */
.cta__texto-bloque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 58ch;
}

.cta__h2 {
  color: var(--piel-blanco);
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: none;
}

.cta__texto {
  margin: 0;
  max-width: none;
  color: var(--piel-sobre-acento);
}

.cta .btn--primario {
  background: var(--piel-profunda);
  border-color: var(--piel-profunda);
  color: var(--piel-claro);
  font-size: 16px;
  padding: 17px 32px;
}
.cta .btn--primario:hover { background: var(--piel-negra); border-color: var(--piel-negra); }


/* ── Grillas de índice — /services/, /locations/, /resources/ ─────────────
   Tarjetas enlazadas. Es el ÚNICO lugar donde la tarjeta con enlace adentro
   es correcta: los tres hubs son índices y ahí el enlace ES la navegación.
   Dentro del cuerpo de una página de dinero el enlace va en la prosa. */

.servicios-grilla,
.bloque { padding-block: 56px 0 !important; }

.bloque__h2,
.servicios-grilla h2 { margin-bottom: 24px; }

.bloque__resumen { max-width: 74ch; margin-bottom: 28px; }

.grilla,
.bloque__grilla,
.locations__grilla,
.contacto__grilla,
.geo__grilla,
.cats__lista,
.criticos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.grilla > *,
.bloque__grilla > *,
.locations__grilla > *,
.geo__grilla > *,
.cats__item,
.criticos__item {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 24px 26px;
}

.grilla > *:hover,
.bloque__grilla > *:hover,
.cats__item:hover,
.criticos__item:hover { border-color: var(--piel-acento); }

/* El H3 de la tarjeta pierde el ritmo de 32px que le da el cuerpo: adentro de
   una caja de 24px de padding esa separación abre un hueco arriba del título. */
.cats__item h3,
.criticos__item h3 { margin: 0 0 8px; font-size: 19px; }
.cats__item p,
.criticos__item p { margin: 0; font-size: 15px; }

.grilla__enlace,
.bloque__grilla a,
.locations__grilla a,
.cats__item a,
.criticos__item a {
  display: block;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--piel-tinta);
  text-decoration: none;
  margin-bottom: 8px;
}
.grilla__enlace:hover,
.bloque__grilla a:hover { color: var(--piel-acento-oscuro); }

.grilla__resumen { margin: 0; font-size: 15px; color: var(--piel-texto); }

.bloque__pendiente,
.geo__pendiente {
  font-family: var(--piel-mono);
  font-size: 12px;
  color: var(--piel-tenue);
}

/* Las listas de enlaces de los índices que NO son grilla de tarjetas.

   ⚠ `cats__lista` y `criticos__lista` SALIERON DE ACÁ. Sus ítems no son una
   palabra: son un `<h3>` con enlace más un párrafo de resumen, y como píldora
   en fila salían apilados sin caja, que es como se veían los dos críticos en
   el Homepage. Van con las otras grillas de tarjetas, arriba. Las que quedan
   —`areas` y `area`— sí son nombres de ciudad sueltos. */
.areas__lista,
.area__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.areas__lista li,
.area__lista li {
  background: var(--piel-tinte);
  color: var(--piel-tinta);
  border-radius: var(--piel-pildora);
  padding: 8px 16px;
  font-size: 14px;
}


/* ── ⚑ PROVISORIA · El índice "On this page" ─────────────────────────────
   Lo publican /contact/ (`<aside>`) y /privacy-policy/ (`<nav>`), y hasta hoy
   salía como una lista de enlaces subrayados pegada al borde de la pantalla:
   el contenedor no lo alcanzaba (arreglado arriba) y `.indice__tarjeta` —la
   única caja que había— es una clase que ninguna de las dos plantillas emite.

   Se viste la pieza que EXISTE. Píldoras en fila, como `areas__lista`: es un
   salto dentro de la misma página, no navegación del sitio, y la fila lo dice
   sin robarle peso a la nav de arriba. */

.indice { padding-block: 40px 0 !important; }

.indice__tarjeta {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 24px 26px;
}

.indice__rotulo {
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piel-tenue);
  margin: 0 0 12px;
}

.indice__lista {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.indice__item,
.indice__lista li { margin: 0; }

.indice__lista a {
  display: inline-block;
  background: var(--piel-tinte);
  color: var(--piel-acento-oscuro);
  border-radius: var(--piel-pildora);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
}
.indice__lista a:hover {
  background: var(--piel-acento-oscuro);
  color: var(--piel-claro);
}

.indice__tel { margin: 0; font-size: 14px; color: var(--piel-tenue); }
.indice__tel small { font-size: inherit; }

.indice__telefono,
.indice__tel a {
  font-family: var(--piel-display);
  font-weight: 700;
  color: var(--piel-acento-oscuro);
  text-decoration: none;
}


/* ── Reseñas ──────────────────────────────────────────────────────────────── */

.reseñas { padding-block: 72px 0 !important; }

.reseñas__cabecera {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 28px;
}

.reseñas__rating {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 50px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--piel-acento-oscuro);
  margin: 0;
}

.reseñas__h2 { margin: 0 0 4px; }
.reseñas__resumen { margin: 0; font-size: 15px; }

.reseñas__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 16px;
}

.reseña {
  margin: 0;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 24px 26px;
}
.reseña p { margin: 0 0 12px; font-size: 15px; }
.reseña cite {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  font-style: normal;
  color: var(--piel-tinta);
}


/* ── Formulario ───────────────────────────────────────────────────────────
   Tarjeta blanca. En /contact/ vive dentro del hero, así que se estiliza la
   pieza y no su lugar. */

.form {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio-gr);
  padding: 32px 34px;
}

.hero__form { margin: 0; }
/* EL `margin: 0` DE LA TARJETA NO ES REDUNDANTE con el de la línea de arriba.
   El envoltorio es un `<div>` y la tarjeta de adentro es un `<section>`, y
   `base.css` le da a todo `<section>` un `margin-block: 2.5rem`. Ese margen
   no lo tocaba nadie: la tarjeta caía 40px por debajo de su celda de la
   grilla y sobresalía otros 40 por abajo, encima de la franja de confianza.
   Medido el 2026-08-19 a 1440px — celda 136→950, tarjeta 176→990. */
.hero__form .form { margin: 0; padding-block: 32px !important; }

.form__h2 { margin: 0 0 8px; font-size: clamp(22px, 2.4vw, 30px); }
.form__nota { margin: 0 0 24px; font-size: 15px; }

.form__campos label {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--piel-tinta);
  margin-bottom: 6px;
}

.form__campos input,
.form__campos textarea {
  font-family: var(--piel-cuerpo);
  background: var(--piel-papel);
  border: 1px solid var(--piel-borde-fuerte);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 16px;
}

.form__campos input:focus,
.form__campos textarea:focus { border-color: var(--piel-acento); }

.form__legal { font-size: 13px; color: var(--piel-tenue); max-width: none; }

/* La etiqueta `optional` de los dos campos que no son obligatorios. Sale de
   la maqueta `Contacto Vitrina`, que es la única de las 33 que dibuja un
   formulario, así que vale para los dos que publica el sitio: el del hero de
   /contact/ y el del Homepage. */
.form__opcional {
  font-family: var(--piel-mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}

.form__campos .btn--primario { border: 0; width: 100%; }


/* ── Contacto ─────────────────────────────────────────────────────────────── */

.contacto__grilla { margin-bottom: 24px; }

.contacto__dato {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 24px 26px;
}

.contacto__rotulo {
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--piel-tenue);
  margin: 0 0 8px;
}

.contacto__valor {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.25;
  color: var(--piel-tinta);
  margin: 0;
}
.contacto__valor a { text-decoration: none; color: var(--piel-acento-oscuro); }
.contacto__valor--email { font-size: 16px; word-break: break-word; }

.contacto__pie { margin: 8px 0 0; font-size: 14px; color: var(--piel-tenue); }

.mapa iframe,
.site-footer__mapa iframe { border-radius: var(--piel-radio); }


/* ── Páginas legales ──────────────────────────────────────────────────────── */

.legal { padding-block: 40px 0 !important; }
.legal__h2 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 16px; }
.legal p, .legal li { max-width: 74ch; }

.legal__meta,
.legal__fecha,
.legal__vigencia { font-size: 14px; color: var(--piel-tenue); }

.legal__datos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: 14px;
  margin: 0;
}
.legal__dato {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 20px 22px;
}


/* ═════════════════════════════════════════════════════════════════════════
   SUPPORTING CONTENT — molde `Soporte Cinta`, TRASLADO COMPLETO
   `diseno/soporte/01-cinta.html` · una pieza viva desde el 2026-08-20

   HASTA HOY ESTE BLOQUE ESTABA ESCRITO A CIEGAS y su propio encabezado lo
   decía: "Fase 2, sin páginas hoy". La primera pieza real lo desmintió en
   cuatro puntos, y ninguno era de matiz:
     · el rótulo era texto suelto y el molde lo dibuja como PÍLDORA sobre
       `--piel-tinte`, centrada;
     · el H1 no centraba ni tenía medida, y el molde lo pone a 24ch centrado y
       en clamp(28,3.6vw,44) — no en 56, que es tamaño de hero de servicio;
     · la respuesta estaba a 27px, o sea a tamaño de lead, y el molde la pone
       en cuerpo 17 a 76ch: es la cita que un motor de IA levanta, no un
       titular;
     · las dos cifras eran tarjetas OSCURAS con el número en 44px, y el molde
       las dibuja BLANCAS con borde, el rótulo mono arriba y el número en 20
       con su pie EN LA MISMA LÍNEA.
   Es la corrección #109 con otra ropa: un molde escrito antes de la primera
   página real es una hipótesis, no una especificación.

   NAV Y PIE NO SE TOCAN — indicación del usuario del 2026-08-20. El molde
   trae los suyos y son los de Davie; ganan los del sitio. Todo lo demás va
   1 a 1.

   ═══ EL CONTENEDOR SE RESUELVE HIJO POR HIJO, Y NO EN `.sc` ═══
   `main > section, main > div, main > aside, main > nav` es la regla que
   centra el sitio entero, y `<article class="sc">` NO ESTÁ EN ESA LISTA: la
   pieza es el único tipo cuyo cuerpo es un `<article>`. Agregar `article` ahí
   arreglaría el centrado y rompería el molde, porque entonces las tres bandas
   del desarrollo no podrían llegar a los bordes.
   Así que la canaleta se le da a CADA HIJO con la misma expresión, y las
   bandas la reciben ADEMÁS de su fondo: el fondo llega al filo de la pantalla
   y el texto queda a plomo con el del resto del sitio. `.trust` queda afuera
   a propósito — ver más abajo. */

.sc {
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sc > *,
.sc__desarrollo,
.sc__banda2 {
  padding-inline: max(var(--piel-borde-lat), calc((100% - var(--piel-ancho)) / 2));
}

/* ── El bloque de apertura: rótulo, H1, respuesta y cifras, centrados ──────
   Molde líneas 41 a 55: `padding:36px 32px 0`, `align-items:center`,
   `text-align:center`, `gap:16px`. Acá son cuatro hermanos sueltos del
   `<article>` en vez de los hijos de un `<section>`, así que el gap se
   reparte en márgenes y el centrado va uno por uno. */

.sc__rotulo,
.sc__h1,
.sc__respuesta {
  text-align: center;
  margin-inline: auto;
}

.sc__rotulo {
  /* PÍLDORA, no texto suelto — molde línea 42: mono 11, `letter-spacing:.08em`,
     fondo `--piel-tinte`, `padding:7px 14px`, radio de píldora. */
  width: max-content;
  margin: 36px auto 16px;
  padding: 7px 14px;
  background: var(--piel-tinte);
  border-radius: var(--piel-pildora);
  font-family: var(--piel-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* ⚠ EL ÁMBAR DEL MOLDE NO PASA ACÁ, y es el mismo caso que ya resolvió el
     token: `--piel-acento` sobre `--piel-tinte` mide 3.91 y el mínimo son 4.5.
     Medido por el bloque C con la píldora construida, no antes. Va el tono de
     enlace, `--piel-acento-oscuro`, que sobre el mismo fondo da 4.78 y ya es
     parte de la paleta. Sobre el PAPEL el ámbar sí pasa (4.35), que es por qué
     los ordinales de las bandas lo conservan. */
  color: var(--piel-acento-oscuro);
}

/* Sin rótulo el H1 se queda sin el aire de arriba: lo recupera él. */
.sc__rotulo + .sc__h1 { margin-top: 0; }

.sc__h1 {
  margin: 36px auto 16px;
  /* ⚠ 30ch Y NO LOS 24ch DEL MOLDE, y el número cambió por una razón medible:
     los 24ch del molde están puestos contra un ancla de 51 caracteres —"How
     Long a Full Kitchen Remodel Really Takes in Davie"— y ahí dan DOS líneas.
     La nuestra tiene 61 y con 24ch caía en TRES, que es de dónde salía media
     pantalla de más en el hero. Lo que se traslada del molde es el titular a
     dos líneas, no la cifra que en ese copy lo producía. */
  /* ⚠ Y VA EN `width: min(...)`, NO EN `max-width`. Es el MISMO defecto que
     tenían las dos fichas de cifra: `.sc > *` le da a cada hijo la canaleta del
     contenedor —160px a 1440— y con `max-width` esa canaleta se COME la medida
     desde adentro, así que una caja declarada en 30ch rendía 666 de texto. La
     medida es del titular; la canaleta sólo tiene que evitar que toque los
     bordes en una pantalla angosta, y de eso se ocupa el segundo término. */
  width: min(30ch, 100% - 2 * var(--piel-borde-lat));
  max-width: none;
  padding-inline: 0;
  font-weight: 700;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.02;
  letter-spacing: -0.033em;
  text-wrap: pretty;
}

/* LA RESPUESTA VA EN CUERPO, NO EN TITULAR — molde línea 44. Es el bloque que
   un motor de IA levanta como cita, y el molde lo trata como lo que es: la
   respuesta entera, legible de un tirón, no un subtítulo. Manrope 500 para que
   pese más que la prosa que viene después sin convertirse en otro título. */
/* ⚠ EL DEFECTO QUE EL USUARIO VIO COMO "el hero desproporcionado", y estaba
   acá: MEDIDO con una página de prueba el 2026-08-20, `76ch` de Manrope 500 a
   17px son 809px, que es exactamente lo que rinde el molde. La página rendía
   655. La diferencia son los 160px de canaleta que `.sc > *` mete DENTRO del
   `max-width`, y el efecto compuesto es el que se ve: la respuesta salía más
   ANGOSTA que las fichas de cifra que van debajo, cuando en el molde es al
   revés, y el hero entero se leía como una columna fina empujando hacia abajo.
   Misma corrección que en el H1 y en `.sc__cifras`. */
.sc__respuesta {
  width: min(76ch, 100% - 2 * var(--piel-borde-lat));
  max-width: none;
  padding-inline: 0;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--piel-tinta);
}
/* ⚠ ACÁ SE APAGA `text-wrap: pretty`, que llega de la regla global de `p`, y es
   el otro renglón que estiraba el hero. MEDIDO con una página de prueba el
   2026-08-20: la caja de este bloque mide 809px —76ch de Manrope 500 a 17px, o
   sea exactamente lo que rinde el molde— pero el texto adentro rompía a 655 y
   caía en CUATRO líneas. No era la caja: era `pretty` acortando los renglones
   para no dejar huérfana la última. En un párrafo de cuatro líneas eso cuesta
   una línea entera, y en el bloque que un motor de IA levanta como cita esa
   línea se paga dos veces: de alto y de ancho. */
.sc__respuesta p { margin: 0; max-width: none; text-wrap: wrap; }

/* ── Las dos cifras ───────────────────────────────────────────────────────
   Molde líneas 46 a 53: `max-width:720px`, DOS COLUMNAS FIJAS, `gap:12px`,
   tarjeta blanca con borde y radio 16, y el contenido ALINEADO A LA IZQUIERDA
   aunque todo lo de arriba esté centrado. El contraste entre el bloque
   centrado y las dos fichas alineadas es del molde, no un descuido.

   `1fr 1fr` Y NO `auto-fit`: son dos y son un PAR que se opone. Con auto-fit,
   una pieza que declare una sola cifra la estira a los 720px y deja de leerse
   como media comparación. */
/* ⚠ ACÁ LA CANALETA SE APAGA, y es el defecto que se vio mirando el hero al
   lado del molde. `.sc > *` le da a cada hijo el `padding-inline` del
   contenedor, y este bloque además declara su propio `max-width: 720px`: los
   dos juntos dejan las fichas en 560px a 1440 de ancho, o sea 160 menos que el
   molde, y el par se lee apretado y sin alinear con nada. El `max-width` YA ES
   la medida de este bloque; la canaleta sólo tiene que impedir que toque los
   bordes en una pantalla angosta, y para eso alcanza el `min()`. */
.sc__cifras {
  width: min(720px, 100% - 2 * var(--piel-borde-lat));
  max-width: none;
  padding-inline: 0;
  margin: 6px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.sc__cifra {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: 16px;
  padding: 14px 18px;
  text-align: left;
}

.sc__cifra-rotulo {
  display: block;
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}

/* EL DATO Y SU PIE VAN EN LA MISMA LÍNEA. En el molde son un `<dd>` con el
   número y un `<span>` chico al lado; acá la plantilla emite DOS `<dd>`, que
   es la forma correcta en un `<dl>` y no se toca desde la piel. Dos `dd` en
   `inline` dan el mismo renglón. */
.sc__cifra-dato,
.sc__cifra-pie { display: inline; margin: 6px 0 0; }

.sc__cifra-dato {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--piel-tinta);
}

/* LA SEGUNDA FICHA LLEVA EL NÚMERO EN ÁMBAR — molde línea 51. Es el caso que
   cambia la respuesta, y el color es lo único que lo dice. */
.sc__cifra:nth-child(2) .sc__cifra-dato { color: var(--piel-acento); }

.sc__cifra-pie {
  margin-left: 6px;
  font-family: var(--piel-cuerpo);
  font-weight: 400;
  font-size: 13px;
  color: var(--piel-tenue);
}

/* ── La imagen de la respuesta: 21:9 ──────────────────────────────────────
   Molde línea 57: `border-radius:20px; aspect-ratio:21/9; max-height:34vh`.
   La foto llega en 720×540, o sea 4:3, así que la relación la impone el
   recorte: `object-fit: cover`. Es el LCP de esta plantilla —no hay hero— y
   por eso la figura no se carga perezosa: eso ya lo resuelve `carga_lcp`. */
.sc__figura {
  margin: 26px 0 0;
  width: 100%;
}
.sc__figura img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  max-height: 34vh;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}

/* ── La franja de confianza, ACÁ SÍ A SANGRE ──────────────────────────────
   Molde línea 59: `margin-top:26px`, fondo `--piel-profunda`, grilla auto-fit
   de 230px, SIN radio y SIN contenedor.

   ⚠ ES LO CONTRARIO DE LO QUE HACE EL HOME, y no es una contradicción: allá
   el operador la acotó a `--piel-ancho-banda` con radio porque es el último
   renglón del hero y tenía que cerrar la composición con la foto. Acá no hay
   hero: la franja es la banda que SEPARA la respuesta del desarrollo, que es
   justo el papel para el que sirve estar a sangre. Las dos decisiones están
   acotadas por tipo y ninguna pisa a la otra. */
.t-supporting_content .sc .trust {
  padding-inline: 0;
  padding-block: 0 !important;
  margin-top: 26px;
}
.t-supporting_content .trust__lista { border-radius: 0; }
.t-supporting_content .trust__item {
  padding: 14px 22px;
  font-size: 13px;
  text-align: center;
}

/* ── Las tres bandas del desarrollo ───────────────────────────────────────
   Molde: papel · blanco · papel, `padding:72px 32px` cada una, y el H2
   centrado con su ordinal mono encima. La banda es el `<div>` entero, así que
   el fondo llega a los dos bordes y el texto se queda en la canaleta. */

.sc__desarrollo,
.sc__banda2 { padding-block: 72px; }

.sc__desarrollo--1 { background: var(--piel-papel); }
.sc__banda2        { background: var(--piel-blanco); }
.sc__desarrollo--3 { background: var(--piel-papel); }

/* La banda 2 pinta el fondo, así que su hijo no lo repite. Y una banda vacía
   —una pieza sin `desarrollo2` ni foto— no deja 144px de blanco. */
.sc__banda2 > .sc__desarrollo--2 { padding: 0; background: none; }
.sc__banda2:not(:has(*)) { display: none; }

/* Los H2 del cuerpo: centrados, 26ch, y el ordinal mono ámbar encima.
   ⚠ EL ORDINAL VA EN `::before` y no en el `.md`, por la misma razón que en
   location page: es el número del ORDEN DE ESTE MOLDE y no del contenido. Un
   "01" escrito en el markdown viaja al `llms.txt`, al schema y a cualquier
   resumen que levante el texto, y ahí no significa nada. */
.sc__desarrollo h2 {
  margin: 0 auto 26px;
  max-width: 26ch;
  text-align: center;
  font-weight: 700;
  font-size: clamp(25px, 2.9vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.sc__desarrollo h2::before {
  display: block;
  margin-bottom: 8px;
  font-family: var(--piel-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--piel-acento);
}
.sc__desarrollo--1 h2::before { content: "01"; }
.sc__desarrollo--2 h2::before { content: "02"; }
.sc__desarrollo--3 h2::before { content: "03"; }

/* ── Bandas 1 y 3: entrada centrada y la prosa a dos columnas ─────────────
   Molde líneas 62 y 74: el H2, debajo un párrafo de entrada CENTRADO y a
   tamaño de lead, y recién después la prosa en `auto-fit` de 330px con gap
   44. Acá los tres son hermanos dentro del mismo `<div>` de markdown rendido,
   sin envoltorios donde colgar un grid, así que la partición se hace con
   `columns` sobre el bloque y `column-span:all` sobre lo que va entero.
   Es el mismo mecanismo que `cuando__prosa`, resuelto sin el envoltorio que
   esta plantilla no emite. */
.sc__desarrollo--1,
.sc__desarrollo--3 {
  columns: 2;
  column-gap: 44px;
}

.sc__desarrollo--1 > h2,
.sc__desarrollo--3 > h2,
.sc__desarrollo--1 > h2 + p,
.sc__desarrollo--3 > h2 + p { column-span: all; }

/* La entrada: el párrafo que sigue al H2. En la banda 1 es un lead; en la 3 el
   molde lo sube a 600 y lo acorta a 70ch, porque ahí es la PREGUNTA que ordena
   la sección y no una introducción (molde línea 76). */
.sc__desarrollo--1 > h2 + p,
.sc__desarrollo--3 > h2 + p {
  margin: 0 auto 26px;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--piel-tinta);
  text-align: center;
  max-width: 80ch;
  text-wrap: pretty;
}
.sc__desarrollo--3 > h2 + p {
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.4;
  letter-spacing: -0.018em;
  max-width: 70ch;
}

.sc__desarrollo--1 > p,
.sc__desarrollo--3 > p { margin: 0 0 18px; break-inside: avoid; }
.sc__desarrollo--1 > p:last-child,
.sc__desarrollo--3 > p:last-child { margin-bottom: 0; }

/* ── Banda 2: la foto a la izquierda y el texto a la derecha ──────────────
   Molde línea 68: `minmax(0,320px) minmax(0,1fr)`, gap 44, centrado vertical,
   Y EL H2 ENTERO ARRIBA de las dos columnas.

   ═══ REESCRITA EL 2026-08-20 POR DECISIÓN DEL USUARIO ═══ y se aparta del
   molde en UNA cosa, a propósito. El molde pone el H2 CENTRADO cruzando las
   dos columnas, con la foto abajo a la izquierda y vertic­almente centrada
   contra el texto. Mirado con el copy real, la foto quedaba flotando: no
   arrancaba a la altura de nada y el título no pertenecía a ninguna de las dos
   columnas.

   Lo que pidió el usuario, y es lo que está escrito acá: TÍTULO Y TEXTO JUNTOS
   en la columna derecha, la FOTO en la izquierda, y la foto ALINEADA ARRIBA con
   el título. Así la banda tiene dos bloques y no tres, y el borde superior de
   la foto y el del ordinal empiezan en la misma línea.

   ES MÁS SIMPLE QUE LO QUE HABÍA, y esa es la señal de que va bien: se cayó el
   `display: contents`, se cayeron las filas explícitas, se cayó el `span 50` y
   se cayó el `grid-auto-rows: min-content` que existía sólo para que ese span
   no costara 48 filas vacías. `.sc__desarrollo--2` vuelve a ser UN ítem de la
   grilla, con su H2 y sus párrafos adentro, que es como estaba en el HTML desde
   el principio. */
.sc__banda2:has(.sc__figura2) {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  column-gap: 44px;
  align-items: start;
}

.sc__figura2 {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
}
.sc__figura2 img {
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--piel-radio);
}

.sc__banda2 > .sc__desarrollo--2 { grid-column: 2; grid-row: 1; }

/* EL H2 DEJA DE CENTRAR, y es consecuencia directa de lo de arriba: ahora vive
   sobre su columna de texto y no sobre la banda entera, así que centrado
   quedaría desalineado del párrafo que encabeza. Alineado a la izquierda,
   el ordinal, el título y la primera línea del texto arrancan todos en la misma
   vertical, que es donde también arranca la foto. */
.sc__banda2 > .sc__desarrollo--2 > h2 {
  margin: 0 0 20px;
  max-width: 22ch;
  text-align: left;
}

/* ⚠ `max-width: none` ES LA CORRECCIÓN DEL 2026-08-20, y el defecto se veía
   como "el texto empujado hacia la izquierda": la regla global `p { max-width:
   74ch }` cortaba el párrafo a 787px dentro de una columna de ~975, y esos 190
   sobrantes quedaban de aire muerto contra el borde derecho. El molde no le
   pone medida a estos párrafos: la medida ES la columna. */
.sc__banda2 > .sc__desarrollo--2 > p { margin: 0 0 18px; max-width: none; }
.sc__banda2 > .sc__desarrollo--2 > p:last-child { margin-bottom: 0; }

.sc__banda2 > .sc__desarrollo--2 > p:last-of-type:not(:first-of-type) {
  background: var(--piel-tinte);
  border: 1px solid #e3d3bf;
  border-radius: var(--piel-radio);
  padding: 24px 26px;
  color: var(--piel-tinta);
}

/* ── La banda local, en oscuro ────────────────────────────────────────────
   Molde línea 80: banda `--piel-profunda`, ordinal en `--piel-acento-medio`,
   H2 en `--piel-claro`, prosa en `--piel-claro-3` y la foto 3:4 a la DERECHA,
   a 250px.

   `.local` es el parcial COMPARTIDO con categoría y crítico, así que todo esto
   va acotado al tipo: sin el `.t-supporting_content` delante, dos páginas de
   dinero ya publicadas se volverían oscuras esta misma tarde. */
.t-supporting_content .local {
  background: var(--piel-profunda);
  padding-block: 72px !important;
  /* LA FOTO A 360 Y NO A LOS 250 DEL MOLDE — pedido del usuario, 2026-08-20.
     A 250 la columna de texto se iba a ~975px y la foto quedaba como una tira
     angosta al costado de un bloque de prosa muy ancho. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  column-gap: 44px;
}
.t-supporting_content .local__h2 {
  margin: 0 0 20px;
  max-width: 22ch;
  text-align: left;
  font-size: clamp(25px, 2.9vw, 36px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--piel-claro);
}
.t-supporting_content .local__h2::before {
  content: "04";
  display: block;
  margin-bottom: 8px;
  font-family: var(--piel-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--piel-acento-medio);
}
.t-supporting_content .local p { color: var(--piel-claro-3); }
.t-supporting_content .local__figura img { aspect-ratio: 3 / 4; object-fit: cover; }

/* MISMA DECISIÓN QUE LA BANDA 2, del mismo día y del mismo usuario: título y
   texto juntos en una columna, la foto en la otra y ALINEADA ARRIBA con el
   título. Acá la foto va a la DERECHA, que es el lado que le da el molde.
   `.local__texto` vuelve a ser un ítem de la grilla: sin `display: contents` no
   hace falta colocar cada párrafo a mano. */
.t-supporting_content .local:has(.local__figura) { display: grid; align-items: start; }
.t-supporting_content .local > .local__texto { grid-column: 1; grid-row: 1; }
.t-supporting_content .local__texto > p { margin: 0 0 18px; max-width: none; }
.t-supporting_content .local__texto > p:last-child { margin-bottom: 0; }
.t-supporting_content .local__figura {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}

/* ── El ordinal 05 de la FAQ ──────────────────────────────────────────────
   Mismo criterio que los cuatro de arriba. La FAQ la emiten seis plantillas,
   así que el número vive acá y no en el parcial. */
.t-supporting_content .faq__h2::before {
  content: "05";
  display: block;
  margin-bottom: 8px;
  font-family: var(--piel-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  color: var(--piel-acento);
}

/* ── El enlace de vuelta al Homepage ──────────────────────────────────────
   Molde línea 96: bloque centrado sobre papel, 76ch, cuerpo 17.

   ⚠ ES UN `<p>` HIJO DIRECTO DE `<main>`, y `main > p` NO ESTÁ en la regla del
   contenedor: sin esta canaleta el párrafo sale pegado al borde de la
   pantalla. Es el segundo hueco que dejó el molde a ciegas.

   ⚠ EL RÓTULO DEL MOLDE —"BACK TO THE FULL SCOPE"— NO SE TRASLADA, y es
   deliberado: eso es COPY, y el copy sale del `.md`. Escrito en un `::before`
   sería una frase que ninguna página declaró, igual en las dos aristas y en
   toda pieza futura, diciendo "the full scope" aunque la pieza cuelgue de otra
   cosa. Si el rótulo se quiere de verdad, la plantilla necesita su clave en el
   front matter, como `rotulo_faq`. */
.sc__home {
  margin: 0 auto;
  padding-inline: max(var(--piel-borde-lat), calc((100% - var(--piel-ancho)) / 2));
  padding-block: 64px 0 !important;
  max-width: none;
  text-align: center;
  font-size: 17px;
}

/* ── Móvil ────────────────────────────────────────────────────────────────
   Las tres grillas del molde colapsan a una columna, y la foto de la banda 2
   pasa DEBAJO de su texto: a 320px de ancho una columna de 3:4 al lado de la
   prosa deja dos líneas por renglón. */
@media (max-width: 780px) {
  .sc__desarrollo--1,
  .sc__desarrollo--3 { columns: 1; }

  .sc__cifras { grid-template-columns: 1fr; }

  /* Las dos bandas de foto vuelven a UNA columna, y la foto pasa DEBAJO de su
     texto — también la de la banda 2, que en escritorio va primero: en móvil
     una foto 3:4 antes del título empuja el texto una pantalla entera hacia
     abajo. `order` lo resuelve sin tocar el orden del documento, que es el que
     lee un motor. */
  .sc__banda2:has(.sc__figura2),
  .t-supporting_content .local:has(.local__figura) {
    grid-template-columns: 1fr;
  }
  .sc__banda2 > .sc__desarrollo--2,
  .t-supporting_content .local > .local__texto { grid-column: 1; grid-row: 1; }
  .sc__figura2,
  .t-supporting_content .local__figura {
    grid-column: 1;
    grid-row: 2;
    margin-top: 26px;
  }
}


/* ═════════════════════════════════════════════════════════════════════════
   LOCATION PAGE — molde `02 · Carril`, TRASLADO COMPLETO
   `diseno/location/02-carril.html` · seis páginas vivas desde el 2026-08-20

   Hasta hoy acá había cuatro reglas: dos columnas, un gap de 52 y el radio de
   las fotos. Eso no era Carril, era el molde de servicio con otros nombres, y
   se notaba porque Carril NO tiene gap, NO tiene radio y NO centra a 1280:
   su gesto entero es la MITAD A SANGRE, texto contra foto, alternando lado.

   TODO VA BAJO `.t-location_page`. El `<body>` lo emite `_base.html` como
   `t-{{ tipo }}`, y con eso las otras 19 páginas no cambian un byte: `.angulo`,
   `.servicio-ahi`, `.direcciones` y `.tira` sólo las emite `location_page.html`
   —verificado con grep sobre `plantillas/` antes de escribir esto— pero el
   alcance se escribe igual, porque la regla que hoy no colisiona es la que
   mañana colisiona en silencio.

   QUÉ SE LE CAMBIÓ AL MOLDE, y las tres son decisiones anteriores del
   operador, no criterio de este traslado:

     1 · EL ÁMBAR. La maqueta trae #c07a3a en los seis lugares donde pinta
         fondo. Acá va `--piel-acento` (#a4622a), que es el mismo ámbar
         oscurecido el 2026-08-20 para cerrar el bloque C. Revertirlo a la
         maqueta vuelve a poner el CTA en 3.45 sobre blanco.
     2 · LA GALERÍA. Carril cierra FAQ → CTA y no tiene sección de trabajos.
         El sitio sí: "va en TODAS las páginas", operador del 2026-08-13, y
         vive en un parcial justamente para que una plantilla nueva la herede.
         Se queda, vestida en la banda crema, entre la FAQ y la frase de
         vuelta. Es la única sección de estas seis páginas que no está en el
         molde, y está por una regla más vieja que el molde.
     3 · LAS CREDENCIALES. La 04 de la maqueta es sólo título y prosa. La
         nuestra arrastra las seis fichas de `datos.json`, que son contenido
         publicado: esconderlas con CSS es contenido invisible. Se quedan, y
         se rediseñan para la banda oscura en vez de las tarjetas blancas del
         molde de servicio.

   Y UNA que no se pudo trasladar, dicha acá y no tapada: en la maqueta la
   frase de vuelta al hub vive DENTRO de la columna izquierda de la FAQ, bajo
   el H2. Acá es un hermano de `<main>` que emite `{{> vuelta_al_padre }}`, y
   meterla ahí adentro pedía inlinear el parcial de FAQ en esta plantilla, o
   sea duplicar el bloque que `verificar.py` mide por clase, por conteo y por
   schema. Se dibuja como continuación de la banda, con la misma tipografía
   tenue de 14px que tiene en el molde. Es lo único de la página que no está
   donde la maqueta lo pone.
   ═════════════════════════════════════════════════════════════════════════ */


/* ── Las cuatro mitades a sangre ──────────────────────────────────────────
   `padding-inline: 0` mata el contenedor centrado: en Carril el fondo Y el
   contenido llegan al filo, y el aire lo pone la CELDA de texto, no la
   sección. Los `!important` responden a los de `.hero`, `.trust` y `.cta`,
   que ya los traían; ganan por especificidad (0,2,0) contra (0,1,0). */

.t-location_page .hero,
.t-location_page .angulo,
.t-location_page .servicio-ahi,
.t-location_page .direcciones,
.t-location_page .cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  margin-top: 0 !important;
  padding-inline: 0 !important;
  padding-block: 0 !important;
}

/* SIN FOTO VUELVEN A UNA COLUMNA. Los seis slots son opcionales en la
   plantilla y una página puede publicarse sin ninguno: con la grilla puesta,
   la mitad vacía dejaba el texto en el 50% izquierdo y medio ancho de papel
   al lado. Mismo `:has()` que ya usan `.apertura`, `.local` y los tres hubs. */
.t-location_page .angulo:not(:has(figure)),
.t-location_page .servicio-ahi:not(:has(figure)),
.t-location_page .direcciones:not(:has(figure)),
.t-location_page .cta:not(:has(figure)) { display: block; }

/* Los fondos, por NOMBRE de sección y nunca por posición — C7. El ritmo del
   molde es crema · oscuro · blanco · crema · blanco · crema · oscuro · blanco. */
.t-location_page .apertura,
.t-location_page .servicio-ahi,
.t-location_page .faq { background: var(--piel-blanco); }


/* ── La celda de texto ────────────────────────────────────────────────────
   El molde declara `padding:64px 56px; max-width:760px` y, en las mitades
   cuyo texto va a la IZQUIERDA, `margin-left:auto`: el bloque de 760 se pega
   al centro de la pantalla en vez de flotar en medio de su celda.

   Los 56px del molde pasan a un clamp con el mismo techo. A 1280–1366 px una
   celda es de ~640 y 56 fijos dejan la prosa a 56 del filo, que es el mismo
   motivo por el que `--piel-borde-lat` existe. Por encima de ~1120 px de
   viewport el clamp ya vale 56 y la comparación 1 a 1 se hace ahí. */

.t-location_page .hero__texto,
.t-location_page .angulo__texto,
.t-location_page .servicio-ahi__texto,
.t-location_page .direcciones__col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  max-width: 760px;
  padding: 64px clamp(20px, 5vw, 56px);
}

.t-location_page .hero__texto { padding-block: 104px; gap: 22px; }

/* ═══ LA TIRA ENTRA EN LA PRIMERA PANTALLA ═══ pedido del usuario, 2026-08-20.

   EL PROBLEMA, MEDIDO. A 1440×900 la geográfica más alta —FAU, la del H1 más
   largo— apilaba topbar 44 + header 81 + hero 659 + tira 119 = 903 contra 900
   de ventana. La tira NO estaba recortada por dentro: caía abajo del pliegue.

   ⚠ LO QUE FALLÓ PRIMERO, ESCRITO PARA NO REPETIRLO. Se probó techar el hero
   con `max-block-size` y `overflow:hidden` en la figura, que es como lo
   resuelve la escalera de los dos críticos más abajo. ACÁ DESCOMPONE EL HERO,
   y el usuario lo vio al toque: el alto de Carril no lo manda el texto, lo
   manda el DÍPTICO, y un techo sobre la sección recorta las dos fotos contra
   su propio marco. Abajo de ~660 de ventana, además, el texto se derramaba
   sobre la banda oscura. Techar no es la herramienta.

   ⚠ Y LO SEGUNDO QUE FALLÓ FUE EL DIAGNÓSTICO. Se leyó que el alto lo fijaba la
   PROPORCIÓN de las fotos —9:16, que en una celda de 360 da 640— y se llegó a
   recortarlas a 4:5. No era: `.t-location_page .hero__figura img` traía un
   `min-height: 620px` CABLEADO del traslado de Carril, y con eso la fila nacía
   en 620 con cualquier foto y cualquier ventana. Se cazó midiendo el
   `min-height` computado de la imagen, no leyendo la regla que la dibuja. Las
   fotos volvieron a su 9:16, que además es la proporción que le corresponde a
   un hueco de 360×620.

   ASÍ QUE CEDEN DOS COSAS Y NINGUNA SE ROMPE: ese `min-height` pasa de fijo a
   `min(620px, …)`, y la celda de texto entrega aire con un `clamp` continuo
   contra `100svh` en vez de escalones que hacen saltar el layout. Nada lleva
   `overflow:hidden` y nada tiene `max-height`: a ventana entera el hero mide
   los 620 de la maqueta, y si el texto crece, el hero crece con él y la tira
   baja. Se degrada, no se rompe.

   `svh` y no `vh`, y `min-width: 62rem` de guarda: abajo de 62rem el hero
   colapsa a una columna y esta cuenta no aplica. */

@media (min-width: 62rem) {
  /* El 724 es la cuenta del chrome (44 + 81 + 119 + 40 de sobra = 284) más los
     440 que mide el texto de la geográfica más alta con el gap ya recortado.
     La sobra de 40 es lo que separa "entra" de "entra al filo", que es el error
     que el escalón de los críticos documenta. El piso de 20 es aire real:
     abajo de eso el rótulo toca el filo de la sección. */
  .t-location_page .hero__texto {
    padding-block: clamp(20px, calc((100svh - 724px) / 2), 76px);
    gap: 16px;
  }
}

/* Abajo de 740 el aire ya está en el piso y lo único que queda por ceder es el
   cuerpo del H1: en la geográfica más larga son 184 px de los 384 del texto.
   Baja de 60 a 44. El piso de 34 no se toca, que es el del teléfono y ahí no
   manda esta regla. Abajo de ~660 la tira vuelve a caer bajo el pliegue, y se
   dice en vez de taparlo: no hay un tercer escalón porque el hero se volvería
   ilegible antes de entrar. Misma decisión, y el mismo límite, que la escalera
   de los críticos. */
@media (min-width: 62rem) and (max-height: 740px) {
  .t-location_page .hero__texto { gap: 10px; }
  .t-location_page .hero__h1 { font-size: clamp(34px, 3.4vw, 44px); }
}

/* Texto a la izquierda de la mitad → el bloque se pega al centro.
   Texto a la derecha (la 02) → se pega al centro por el otro lado. */
.t-location_page .hero__texto,
.t-location_page .angulo__texto,
.t-location_page .direcciones__col { margin-left: auto; }
.t-location_page .servicio-ahi__texto { margin-right: auto; }

.t-location_page .angulo__texto p,
.t-location_page .servicio-ahi__texto p,
.t-location_page .direcciones__texto p { margin: 0; max-width: none; }

.t-location_page .direcciones__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}


/* ── La celda de foto ─────────────────────────────────────────────────────
   A SANGRE Y SIN RADIO. Es la diferencia visible entre Carril y el molde de
   servicio, donde toda foto es una tarjeta redondeada de 20px. Acá la foto ES
   la mitad de la pantalla: llena su celda, se recorta con `cover` y no tiene
   borde. Los `min-height` son los del molde: 620 en el hero, 420 en las tres
   del cuerpo, 340 en el cierre. */

.t-location_page .hero__figura,
.t-location_page .angulo__figura,
.t-location_page .servicio-ahi__figura,
.t-location_page .direcciones__figura,
.t-location_page .cta__figura {
  margin: 0;
  height: 100%;
  display: block;
}

/* EL HERO LLEVA DOS, LADO A LADO Y PEGADAS. La maqueta parte la mitad derecha
   en dos columnas de `gap:0`: es un díptico, no una foto con una segunda
   debajo, que es lo que hace el molde de servicio. */
.t-location_page .hero__figura {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.t-location_page .hero__figura img,
.t-location_page .angulo__figura img,
.t-location_page .servicio-ahi__figura img,
.t-location_page .direcciones__figura img,
.t-location_page .cta__figura img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
}

/* EL 620 ERA FIJO Y ERA EL QUE MANDABA. Es el alto del hero en la maqueta, y
   cableado así ganaba siempre: la fila nacía en 620 pasara lo que pasara con el
   texto o con la ventana, y por eso la tira de abajo caía fuera de la primera
   pantalla. Ahora es un techo que cede — la cuenta y el porqué, en el bloque
   "LA TIRA ENTRA EN LA PRIMERA PANTALLA" unas líneas más abajo. A ventana
   entera vale 620 y la maqueta se ve 1 a 1; recién cuando no entra, baja. */
.t-location_page .hero__figura img {
  min-height: min(620px, calc(100svh - (44px + 81px + 119px + 40px)));
}
/* La segunda del hero NO baja ni cambia de proporción: es la celda de al lado.
   El molde de servicio la manda 16px abajo y a 1:1, y eso acá parte el díptico. */
.t-location_page .hero__figura img:nth-of-type(2) { margin-top: 0; aspect-ratio: auto; }

.t-location_page .angulo__figura img,
.t-location_page .servicio-ahi__figura img,
.t-location_page .direcciones__figura img { min-height: 420px; }
.t-location_page .cta__figura img { min-height: 340px; }

/* ═══ LA 02 INVIERTE EL LADO ═══ y es el gesto que le da el nombre al molde.
   Se hace con `grid-column` EXPLÍCITO y no con `order`: C7 falla en rojo
   contra cualquier regla de `order` sobre los hijos de `main`, y su motivo es
   la corrección §4 #118 —la galería nueva cayó al `order:0` por defecto y se
   publicó arriba del título en nueve páginas—. Colocar por columna no tiene
   ese modo de fallo: una sección que nadie nombró se queda donde está. */
.t-location_page .servicio-ahi__figura { grid-column: 1; grid-row: 1; }
.t-location_page .servicio-ahi__texto  { grid-column: 2; grid-row: 1; }


/* ── El hero ──────────────────────────────────────────────────────────────
   Los tres tamaños del molde. Difieren del hero de servicio en poco y en algo
   que se ve: el H1 baja de 64 a 60 y el subtítulo pierde su tope de 54ch,
   porque acá la medida se la da la celda de 760 y no un `ch`. */

.t-location_page .hero__h1 {
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -0.033em;
}

.t-location_page .hero__sub {
  font-size: 17px;
  line-height: 1.6;
  max-width: none;
}

.t-location_page .hero__acciones { gap: 10px; margin-top: 2px; }


/* ── La tira de cuatro datos ──────────────────────────────────────────────
   La banda oscura entre el hero y la apertura. Es un `<dl>` hijo directo de
   `main`, y por eso NO le toca el `padding-inline` del contenedor: esa regla
   nombra `section`, `div`, `aside` y `nav`. Sale a sangre sin pedir permiso,
   que es lo que el molde quiere. */

.t-location_page .tira {
  margin: 0;
  background: var(--piel-profunda);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.t-location_page .tira__celda {
  padding: 26px 32px;
  border-right: 1px solid var(--piel-borde-oscuro);
}
.t-location_page .tira__celda:last-child { border-right: 0; }

.t-location_page .tira dt {
  font-family: var(--piel-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--piel-tenue-oscuro);
}

.t-location_page .tira dd {
  margin: 6px 0 0;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 25px;
  letter-spacing: -0.02em;
  color: var(--piel-claro);
}


/* ⚠ ACÁ VIVÍA UNA LLAVE HUÉRFANA, y se comió la regla de abajo ═══ 2026-08-20.
   Una `}` de más a nivel raíz no es inocua: Chrome descarta la regla que la
   SIGUE. Con ella puesta, `.t-location_page .apertura` no llegaba a la hoja
   —medido con `document.styleSheets`: la regla no estaba— y la apertura de las
   seis geográficas caía en `.apertura:not(:has(figure)) { display: block }`,
   o sea el lead a todo el ancho y la ficha suelta debajo. Se veía como un
   defecto de diseño y era un defecto de sintaxis. */


/* ── La apertura: el lead arriba, las cinco tarjetas en una línea ─────────
   UNA SOLA COLUMNA desde el 2026-08-20, decisión del operador: la ficha dejó
   de ser una columna al costado del lead y pasó a ser una fila de cinco
   tarjetas debajo. Ver el bloque de `.apertura__ficha`.
   Ésta SÍ vuelve al contenedor centrado de 1280: el molde la escribe como
   `padding:64px 56px` con un `max-width:1280px; margin:0 auto` adentro, que
   es exactamente lo que produce la expresión del contenedor del sitio.
   No lleva H2 y no lleva foto: el `.md` no declara `apertura_h2` ni
   `apertura_img`, y los dos ganchos siguen en la plantilla para los otros
   moldes de location page. */

/* EL `display: grid` NO ES REDUNDANTE, y descubrirlo costó una medición. La
   regla base `.apertura:not(:has(figure)) { display: block }` existe para la
   apertura SIN foto, y acá la apertura no lleva foto: lleva la ficha, que es un
   `<div>`. Esa regla pesa (0,1,1) contra los (0,1,0) del `.apertura` base, así
   que ganaba, y como este bloque sólo declaraba la grilla y no el `display`, la
   apertura se publicaba a una columna con la ficha debajo del lead. Medido en
   navegador: `disp=block` a 1440. */
.t-location_page .apertura {
  display: grid;
  padding-block: 64px !important;
  padding-inline: max(var(--piel-borde-lat),
                      calc((100% - var(--piel-ancho)) / 2));
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
  align-items: start;
}

.t-location_page .apertura__texto > p:first-of-type {
  font-size: clamp(19px, 1.9vw, 26px);
  line-height: 1.4;
  letter-spacing: -0.018em;
}

/* ═══ LAS CINCO TARJETAS, EN UNA SOLA LÍNEA ═══ decisión del operador,
   2026-08-20. Antes la ficha era una COLUMNA de 320px al costado del lead: la
   cifra arriba y las cuatro señales apiladas debajo. Ahora las cinco van en una
   fila bajo el lead, y por eso la apertura pasa a UNA columna: en dos, cinco
   tarjetas en fila entran en la mitad del ancho y ninguna se lee.

   La cifra es la primera tarjeta de la fila y no un elemento aparte: pesa más
   que una señal —crece 1.4 contra 1— porque su pie es una frase, no un rótulo.

   `align-items: stretch` es lo que las deja todas de la misma altura cuando una
   señal se parte en dos renglones. Sin eso, la fila queda con cinco alturas. */
.t-location_page .apertura__ficha {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 12px;
}

.t-location_page .apertura__dato {
  flex: 1.4 1 260px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px;
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  background: var(--piel-papel);
  text-align: center;
  max-width: none;
}
.t-location_page .apertura__dato b {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--piel-tinta);
}
.t-location_page .apertura__dato span { font-size: 13px; line-height: 1.4; color: var(--piel-tenue); }

/* ═══ LAS CUATRO SEÑALES, COMO TARJETAS EN FILA ═══
   El mismo componente que el resto del sitio publica en franja oscura bajo el
   hero. Acá cambia de sitio y de forma, no de contenido: lo emite
   `location_page.html` dentro de esta ficha, y el parcial `hero` lo apaga con
   `trust_fuera_del_hero`. Los `!important` responden a los de `.trust`, que
   está escrita para la franja.

   `.trust` es un `<div>` con la `<ul>` adentro, así que son DOS niveles entre
   la fila y las cuatro celdas: el div toma el ancho de las cuatro y la lista
   las reparte. `height: 100%` es lo que hace que estiren junto con la cifra. */
.t-location_page .apertura .trust {
  padding: 0 !important;
  flex: 4 1 620px;
  min-width: 0;
  max-width: none;
}

.t-location_page .apertura .trust__lista {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  height: 100%;
  background: none;
  border-radius: 0;
  overflow: visible;
}

.t-location_page .apertura .trust__item {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 12px;
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  background: var(--piel-papel);
  font-family: var(--piel-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.45;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
  color: var(--piel-tinta);
}


/* ── Las cabeceras numeradas 01 a 05 ──────────────────────────────────────
   El molde abre cada sección con un ordinal mono en ámbar y una regla de
   56×2 a su derecha, y recién debajo el H2.

   VA EN `::before` Y NO EN LA PLANTILLA, a propósito. El ordinal es del ORDEN
   DE ESTE MOLDE y no de la página: `normativa` y `faq` las emiten seis
   plantillas distintas —el comentario del parcial de normativa lo dice con
   todas las letras al explicar por qué su `id` es semántico y no `l04`— y
   escribir un "04" en el parcial se lo lleva puesto a las otras cinco. Acá el
   número vive en la piel, que es la única capa que sabe en qué molde está.

   La regla de 56px es el `background` del propio pseudo: un degradado de un
   solo color, 56×2, anclado a la derecha del padding. Un segundo pseudo daría
   el mismo dibujo y gastaría el `::after`, que la FAQ ya usa para su signo. */

.t-location_page .angulo__h2::before,
.t-location_page .servicio-ahi__h2::before,
.t-location_page .direcciones__h2::before,
.t-location_page .normativa__h2::before,
.t-location_page .faq__h2::before {
  display: block;
  width: max-content;
  margin-bottom: 18px;
  padding-right: 70px;
  background: linear-gradient(var(--piel-acento) 0 0) right center / 56px 2px no-repeat;
  font-family: var(--piel-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--piel-acento);
}

.t-location_page .angulo__h2::before       { content: "01"; }
.t-location_page .servicio-ahi__h2::before { content: "02"; }
.t-location_page .direcciones__h2::before  { content: "03"; }
.t-location_page .normativa__h2::before    { content: "04"; }
.t-location_page .faq__h2::before          { content: "05"; }

/* Sobre la banda oscura el ámbar del cuerpo no se lee: el molde usa ahí su
   propio tono, que ya está en la paleta como `--piel-acento-medio`. La regla
   de 56px se queda en el ámbar del cuerpo, igual que en el molde. */
.t-location_page .normativa__h2::before { color: var(--piel-acento-medio); }

.t-location_page .angulo__h2,
.t-location_page .servicio-ahi__h2,
.t-location_page .direcciones__h2,
.t-location_page .normativa__h2,
.t-location_page .faq__h2 {
  margin: 0;
  max-width: none;
  text-align: left;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: clamp(25px, 2.7vw, 35px);
  line-height: 1.13;
  letter-spacing: -0.027em;
  color: var(--piel-tinta);
}


/* ── 02 · el recuadro cálido de cierre ────────────────────────────────────
   El molde cierra la sección del servicio con un párrafo dentro de una caja
   `--piel-tinte` de radio 18 y borde propio. Es el último párrafo de la
   sección POR CONSTRUCCIÓN —en las seis páginas es la nota de permiso y
   alcance—, igual que el primero de la apertura es el lead y lo toma
   `:first-of-type`. El motor no emite clases dentro de la prosa: `md()`
   publica párrafos, listas, tablas y h3, y no conoce el blockquote. */

.t-location_page .servicio-ahi__texto > p:last-child {
  margin-top: 6px;
  padding: 24px 26px;
  border: 1px solid #e3d3bf;
  border-radius: var(--piel-radio);
  background: var(--piel-tinte);
  font-size: 15px;
  color: var(--piel-tinta);
}


/* ── 03 · el NAP cierra la columna ────────────────────────────────────────
   En el molde de servicio el NAP es una tarjeta blanca con borde y radio. En
   Carril es el pie de la misma columna: una regla de 1px arriba y nada más. */

.t-location_page .direcciones__nap {
  margin-top: 4px;
  padding: 18px 0 0;
  border: 0;
  border-top: 1px solid var(--piel-borde);
  border-radius: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 14px;
}
.t-location_page .direcciones__linea { margin: 0; max-width: none; }
.t-location_page .direcciones__linea strong {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 17px;
  color: var(--piel-tinta);
}


/* ── 04 · la banda oscura de normativa ────────────────────────────────────
   Título a la izquierda, prosa a la derecha, sobre `--piel-profunda`. La
   grilla va en `.normativa__texto` y no en `.normativa`: el DOM envuelve la
   cabecera y el párrafo juntos, y las credenciales son el tercer nodo, que en
   el molde de servicio es una fila de fichas y acá cierra la banda abajo. */

.t-location_page .normativa {
  background: var(--piel-profunda);
  padding-block: 64px !important;
  padding-inline: max(var(--piel-borde-lat),
                      calc((100% - var(--piel-ancho)) / 2));
}

.t-location_page .normativa__texto {
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 44px;
  align-items: center;
}

.t-location_page .normativa__h2 { color: var(--piel-claro); }

.t-location_page .normativa__texto p {
  margin: 0;
  max-width: none;
  color: var(--piel-claro-3);
}
.t-location_page .normativa__texto a { color: var(--piel-acento-claro); }

/* Las seis credenciales, rediseñadas para la banda. La tarjeta blanca del
   molde de servicio sobre `--piel-profunda` sería un parche de papel en medio
   de la banda: acá son columnas separadas por una regla superior, que es como
   el mismo design system resuelve un dato sobre fondo oscuro en la tira. */
.t-location_page .normativa__datos { margin-top: 44px; gap: 0; }

.t-location_page .normativa__dato {
  padding: 20px 24px 0 0;
  border: 0;
  border-top: 1px solid var(--piel-borde-oscuro);
  border-radius: 0;
  background: none;
}
.t-location_page .normativa__dato dt { color: var(--piel-tenue-oscuro); }
.t-location_page .normativa__dato dd { color: var(--piel-claro-4); }
.t-location_page .normativa__dato dd b { color: var(--piel-claro); }


/* ── 05 · la FAQ a dos columnas ───────────────────────────────────────────
   Cabecera angosta a la izquierda —300px topeados— y el acordeón ocupando
   todo lo que queda. En el molde de servicio la FAQ va centrada a 940. */

.t-location_page .faq {
  padding-block: 64px !important;
  padding-inline: max(var(--piel-borde-lat),
                      calc((100% - var(--piel-ancho)) / 2));
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 44px;
  align-items: start;
}

.t-location_page .faq__lista { max-width: none; margin: 0; }
.t-location_page .faq__pregunta { font-size: 18px; }
.t-location_page .faq__respuesta { margin: 12px 0 0; font-size: 15px; max-width: 76ch; }


/* ── La galería, en la banda crema ────────────────────────────────────────
   No está en el molde. Está por la regla del operador del 2026-08-13 —"va en
   TODAS las páginas"— y por eso vive en un parcial. Se deja con la piel que
   ya tiene y sólo se le ajusta el aire, para que caiga en el ritmo de bandas
   entre la FAQ blanca y el cierre. */

.t-location_page .galeria { padding-block: 64px 0 !important; }


/* ── La frase de vuelta ───────────────────────────────────────────────────
   ⚠ ES LO ÚNICO QUE NO ESTÁ DONDE EL MOLDE LO PONE. Ver la cabecera de este
   bloque: en la maqueta vive dentro de la columna izquierda de la FAQ, y para
   llevarla ahí habría que inlinear el parcial de FAQ en esta plantilla.
   Se dibuja con la tipografía que tiene en el molde —14px, tenue— y sin las
   dos reglas horizontales del molde de servicio, que la convertían en una
   franja propia y acá la separarían todavía más de la FAQ. */

/* ═══ CENTRADA Y A 16px ═══ decisión del operador, 2026-08-20. Antes salía a
   14px, tenue y pegada al filo izquierdo de la sección, o sea con el peso de un
   pie de página. Y es el ÚNICO enlace de esta arista del mapa —el modelo no usa
   breadcrumbs—, así que no puede leerse como letra chica.
   El tope en `ch` y el `margin-inline: auto` son los mismos que ya usan los
   tres hubs para esta pieza: la frase se centra como bloque y como texto.
   `.vuelta p` queda por si el `.md` la escribe como párrafo: acá `frase_vuelta`
   llega como texto suelto dentro del `<div>` y el color lo toma la sección. */
.t-location_page .vuelta {
  margin-top: 0 !important;
  padding-block: 40px 0 !important;
  border: 0;
  font-size: 16px;
  line-height: 1.6;
  text-align: center;
  color: var(--piel-tenue);
}
.t-location_page .vuelta p {
  color: var(--piel-tenue);
  max-width: 72ch;
  margin-inline: auto;
}


/* ── El cierre: panel ámbar contra foto ───────────────────────────────────
   El molde parte el cierre en dos mitades: el panel ámbar a la izquierda, con
   el titular, el párrafo y un botón oscuro, y una foto a sangre a la derecha.

   EL FONDO ÁMBAR SIGUE SIENDO EL DE LA SECCIÓN, y no un envoltorio: la foto
   cubre su celda entera con `object-fit:cover`, así que el ámbar sólo asoma
   en la mitad izquierda. Ahorra un `<div>` que la plantilla no emite.

   Las tres piezas se colocan por fila y columna EXPLÍCITAS porque son TRES
   hermanos en una grilla de dos pistas: sin esto el botón se va a la celda de
   la derecha y la foto baja a una segunda fila. Otra vez `grid-column`, no
   `order` — C7. */

.t-location_page .cta {
  grid-template-rows: auto auto;
  text-align: left;
  flex-wrap: initial;
  justify-content: initial;
}

/* `align-items: flex-start` NO es de más: el bloque de texto del CTA es un
   flex en columna centrado, porque en el molde de servicio la franja ámbar va
   centrada. Acá el panel es la mitad izquierda y todo se alinea a la izquierda,
   y sin esto el párrafo quedaba 54 px a la derecha del H2 — el H2 llena el
   ancho y el párrafo, topeado en 52ch, se centraba solo dentro de él. Medido en
   navegador: h2 en x=56 y párrafo en x=110. */
/* ═══ EL GRUPO SE CENTRA EN EL PANEL, EL TEXTO SIGUE A LA IZQUIERDA ═══
   Decisión del operador, 2026-08-20. Antes el bloque colgaba del filo: 56px de
   aire a la izquierda contra ~175 a la derecha, porque el H2 y el párrafo
   —topeado en 52ch— nunca llegan al borde de la mitad ámbar. Se leía pegado al
   canto y no como el panel de un cierre.

   EL ANCHO ES UNA SOLA CUENTA, `--cierre-ancho`, y por eso el botón sigue a
   plomo con la primera letra del título. El botón NO es hijo del bloque de
   texto: es el tercer hermano de la grilla, así que centrarlo con `justify-self`
   lo centraría a él, no lo alinearía con el texto. Lo que lo alinea es empujarlo
   con el MISMO margen que sobra de un lado: en un ítem de grilla los márgenes en
   porcentaje se resuelven contra el ancho de la celda, que es el mismo 100% con
   el que se calcula el ancho del bloque. Las dos cuentas dan el mismo número. */
.t-location_page .cta {
  --cierre-ancho: min(100% - 2 * clamp(20px, 5vw, 56px), 52ch);
}

.t-location_page .cta__texto-bloque {
  grid-column: 1;
  grid-row: 1;
  align-self: end;
  align-items: flex-start;
  text-align: left;
  width: var(--cierre-ancho);
  max-width: none;
  padding: 64px 0 16px;
  justify-self: center;
}

.t-location_page .cta .btn {
  grid-column: 1;
  grid-row: 2;
  align-self: start;
  justify-self: start;
  margin: 0 0 64px calc((100% - var(--cierre-ancho)) / 2);
  background: var(--piel-profunda);
  color: var(--piel-claro);
  border-color: var(--piel-profunda);
}
.t-location_page .cta .btn:hover { background: var(--piel-negra); border-color: var(--piel-negra); }

.t-location_page .cta__h2 {
  margin: 0 0 16px;
  max-width: none;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

.t-location_page .cta__texto { margin: 0; max-width: none; }

.t-location_page .cta__figura { grid-column: 2; grid-row: 1 / 3; }


/* ── Lo que comparten con el resto del sitio ──────────────────────────────
   `.area` se queda en la regla genérica de dos columnas: la emiten
   `contact.html`, `about.html` y `homepage.html`, y no es de este molde. */

.area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 52px;
  align-items: center;
}

.angulo__col--der { grid-column: 2; }
.angulo__col--izq { grid-column: 1; }

.angulo__figura img,
.area__figura img,
.direcciones__figura img,
.servicio-ahi__figura img,
.local__figura img,
.historia__figura img,
.credenciales__figura img,
.refuerzo__figura img,
.about-resumen__figura img,
.hub-intro__figura img,
.hub-ciudad__figura img,
.hub-cobertura__figura img,
.servicios-prosa__figura img,
.cats__figura img,
.propietario img {
  width: 100%;
  border-radius: var(--piel-radio-gr);
  object-fit: cover;
}

.direcciones__nap {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 22px 24px;
}
.direcciones__linea { margin: 0 0 4px; }


/* ── Secciones de dos columnas con figura ────────────────────────────────
   El patrón que comparten `local`, `historia`, `credenciales`, `refuerzo`,
   `about-resumen`, `servicios-prosa` y los tres `hub-*`: texto envuelto a la
   izquierda, figura a la derecha. Sin figura quedan a una columna. */

.local,
.historia,
.credenciales,
.refuerzo,
.about-resumen,
.servicios-prosa,
.hub-intro,
.hub-ciudad,
.hub-cobertura {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: 52px;
  align-items: center;
}

.local:not(:has(figure)),
.historia:not(:has(figure)),
.credenciales:not(:has(figure)),
.refuerzo:not(:has(figure)),
.about-resumen:not(:has(figure)),
.servicios-prosa:not(:has(figure)),
.hub-intro:not(:has(figure)),
.hub-ciudad:not(:has(figure)),
.hub-cobertura:not(:has(figure)) { display: block; }

.local__figura,
.historia__figura,
.credenciales__figura,
.refuerzo__figura,
.about-resumen__figura,
.servicios-prosa__figura,
.hub-intro__figura,
.hub-ciudad__figura,
.hub-cobertura__figura {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}


/* ── Pie ──────────────────────────────────────────────────────────────────
   TRAÍDO DEL REPO DE DAVIE por pedido del usuario (2026-08-19), con la paleta
   de este cliente. Allá es el "requisito 7 del operador": un pie COMPLETO, no
   una franja — superficie propia a ancho completo, bloques centrados y el
   copyright separado abajo.

   Las dos decisiones de Davie que no son obvias y por eso se copian enteras:

   · FLEX Y NO GRID. Con `auto-fit`, las pistas de los bloques que no se
     dibujan —redes y legales, que no toda página tiene— no colapsan, porque
     el copyright las mantiene ocupadas al abarcar de 1 a -1; el pie quedaba
     corrido a la mitad izquierda. En flex solo existe el bloque que se dibuja.

   · `flex: 1 1 0` Y NO UNA BASE FIJA. El corte de fila en flex lo decide la
     BASE, no el ancho final: con base 340 y la separación de 9vw, tres
     columnas piden 1.279 px, así que en un portátil de 1.366 la tercera se
     caía sola a una segunda fila. Con base 0 la fila no se parte por
     aritmética y manda el `min-width`, que es el número que sí describe
     cuándo conviene envolver. De paso las columnas quedan IGUALES: con base
     fija cada una medía lo que su contenido dejaba. */

/* ⚠ REESCRITO EL 2026-08-19 CONTRA EL MOLDE — maqueta líneas 356-386, que la
   del hub repite igual. Era un pie de tres bloques CENTRADOS en flex, traído
   del repo de Davie; el molde de este cliente lo dibuja en CUATRO COLUMNAS
   alineadas a la izquierda:

     `padding:52px 32px 30px; font-size:14px`
     inner: `max-width:1240px; grid; repeat(auto-fit,minmax(200px,1fr)); gap:36px`
     columna: `flex column; gap:8px`

   No hay `<div>` interior en el marcado del repo, así que la grilla va sobre
   el propio `<footer>` y el ancho lo acota el mismo `padding-inline` calculado
   que usan `main > section` y la topbar: la superficie llega a los dos bordes
   —si no, el fondo oscuro se recorta— y el contenido queda centrado a
   `--piel-ancho`, que en el Homepage vale 1240 por el bloque de abajo. */

.site-footer {
  margin-top: 0;
  text-align: left;
  background: var(--piel-negra);
  color: var(--piel-claro-4);
  border: 0;
  font-size: 14px;
  padding-block: 52px 30px;
  max-width: none;
  padding-inline: max(var(--piel-borde-lat), calc((100% - var(--piel-ancho)) / 2));

  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  align-items: start;
  gap: 36px;
}

.site-footer > * { min-width: 0; }

.site-footer__datos,
.site-footer__links,
.site-footer__legales {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* El mapa es opt-in: cuando existe, ocupa la fila entera debajo de las columnas
   en vez de robarle el ancho a una. */
.site-footer__mapa { grid-column: 1 / -1; max-width: 100%; }

/* ⚠ LEGALES Y COPYRIGHT SON FRANJAS, NO COLUMNAS — 2026-08-20, al bajar el pie
   a la forma de Davie por decisión del operador. Con `auto-fit` los dos serían
   celdas de la fila de arriba: legales quedaría al lado de Quick Links y el
   copyright abriría una tercera columna con una línea suelta adentro. El
   `1 / -1` los saca de la fila y los apila, que es lo que publica Davie. */
.site-footer__legales,
.site-footer__copy { grid-column: 1 / -1; }

.site-footer__negocio {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--piel-papel);
  margin: 0;
}

.site-footer address { font-style: normal; margin: 0; line-height: 1.6; }
.site-footer p { max-width: none; margin: 0; }

.site-footer ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-footer li { margin: 0; }

.site-footer a { color: var(--piel-claro-2); text-decoration: none; }
.site-footer a:hover { color: var(--piel-acento-claro); text-decoration: underline; }

/* Área táctil de los enlaces del pie — 2026-08-20, mismo hallazgo de Banda 2
   que el teléfono de la topbar: medían 19px de alto y son doce. Va sobre
   `li a` y no sobre `.site-footer a` A PROPÓSITO: el segundo alcanzaría
   también a los enlaces dentro de `address`, y un `inline-flex` ahí saca al
   enlace del flujo de la línea de texto y parte la dirección. Con el `gap: 8px`
   de la lista, el paso queda en 32px: cada objetivo de 24px conserva su
   separación, que es la otra mitad de 2.5.8. */
.site-footer li a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

.site-footer__datos a { color: var(--piel-acento-claro); }
.site-footer__horarios { color: var(--piel-acento-claro); }

/* Mono de 11px, igual que el rótulo de sección — maqueta línea 366. Estaba en
   Manrope 700 de 12px con 0.9rem de aire abajo; el molde lo trata como una
   etiqueta más de la columna, con el mismo `gap: 8px` que los enlaces. */
.site-footer__titulo {
  font-family: var(--piel-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--piel-claro-4);
  margin: 0;
}

/* `.site-footer__licencia` NO TIENE REGLA acá: el pie dejó de emitir esa línea
   el 2026-08-20. La licencia se sigue publicando en la topbar, que tiene su
   propia regla, y el dato sigue en `datos.json`. */

.site-footer :focus-visible { outline-color: var(--piel-acento-claro); }

/* El copyright cierra el pie en su propia línea, sin filete ni franja con
   fondo — sigue siendo el `margin-top:10px; font-size:12px` de la maqueta, sólo
   que ahora la caja es la fila entera y no la cuarta columna. */
.site-footer__copy {
  margin-top: 10px !important;
  font-size: 12px;
  color: var(--piel-claro-4);
}

.site-footer__mapa { max-width: 100%; }
.site-footer__mapa iframe {
  height: 220px;
  border: 1px solid var(--piel-borde-oscuro);
  border-radius: var(--piel-radio);
}


/* ── 404 ──────────────────────────────────────────────────────────────────── */

.t-404 main > section { padding-block: 96px 72px !important; }


/* ═══════════════════════════════════════════════════════════════════════════
   HOMEPAGE — traslado 1 a 1 de diseno/home/01-cinta.html

   REESCRITO ENTERO EL 2026-08-19, contra el archivo abierto al lado. La
   versión anterior ya sabía que el molde existía y dejó anotado, con un ⚠ por
   caso, todo lo que no podía vestir porque el marcado no lo daba: las tres
   tarjetas de precio, el hueco de foto de `why`, las tarjetas de `criticos`,
   los dos recuadros de cierre de `area`, la frase suelta antes del CTA y el
   CTA como tarjeta. Esta pasada arregló el marcado —`plantillas/homepage.html`
   se reescribió con el molde al lado— y acá quedan las medidas.

   CÓMO LEER ESTE BLOQUE: cada regla cita la línea de la maqueta de donde sale.
   Si una medida no tiene cita, no está en el molde y es del repo.

   EL MOLDE DE HOME ES OTRA COMPOSICIÓN, no una variante del de servicio:
     · el hero va CENTRADO y la foto DEBAJO, a 21:9 y a todo el ancho, con la
       cifra suelta debajo. El de servicio es texto-izquierda / foto-derecha 4:5
     · la franja de confianza va A SANGRE y sin radio
     · el ritmo de bandas alterna papel / blanco por sección, y la banda OSCURA
       es `about`, no `why`
     · `why` es una GRILLA DE TARJETAS sobre papel, con una tintada
     · cada sección abre con rótulo mono + H2 centrado, sin recorte de medida
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── El contenedor del Homepage ───────────────────────────────────────────
   1240 y 32, que es lo que declara ESTE molde: `max-width:1240px` en el div
   interior de cada sección y `padding:… 32px` en la sección. El resto del
   sitio se queda en 1280 y en la canaleta que crece, que es el molde de
   servicio.

   ⚠ SOBRE `main` Y NO SOBRE EL BODY, y el cambio no es cosmético.

   Declarado en `body.t-homepage`, los dos tokens los heredaba también el
   CHROME —`.topbar`, `.site-header` y `.site-footer` cuelgan del body, no de
   `main`—, así que la barra del Homepage salía 80 px más ancha que la de las
   otras dieciocho y el encabezado SALTABA al navegar del Home a cualquier
   página. Es exactamente lo que prohíbe la §4 #188: *el cuerpo se viste por
   molde, el chrome no*. Medido a 1440 el 2026-08-19: canaleta 32 en el Home
   contra 72 en el resto.

   Acotado a `main`, el molde del Home sigue mandando en su cuerpo —el hero, la
   franja y las secciones leen los dos tokens igual, porque están adentro— y el
   chrome se resuelve UNA vez para todo el sitio, que es donde tiene que
   resolverse. Ninguna de las otras dieciocho páginas cambia un pixel. */

.t-homepage main {
  --piel-ancho: 1240px;
  --piel-borde-lat: 32px;
  /* LO QUE HAY ARRIBA DEL HERO, MEDIDO SOBRE EL HTML PUBLICADO a 1440 el
     2026-08-19: barra superior 39 + cabecera 81 = 120. Lo consume el bloque
     "el hero entra en una pantalla", más abajo. Es un número medido y no
     deducido, y este token es el único lugar donde se corrige si algún día la
     cabecera cambia de altura. */
  --piel-chrome-alto: 120px;
}


/* ── El hero: dos columnas, y el formulario a la derecha ──────────────────
   ⚠ REESCRITO EL 2026-08-20 contra la versión nueva de `Home Cinta`. Hasta ese
   día el hero era una sola columna centrada con la foto a lo ancho y la cifra
   debajo; el molde nuevo lo parte en dos.

   Maqueta línea 48: la sección lleva `padding:44px 32px 0` y NO tiene
   contenedor: el de 1240 es el `<div>` de adentro (línea 49), con
   `display:grid; grid-template-columns:minmax(0,1fr) minmax(0,400px);
   gap:44px; align-items:center`.

   POR QUÉ HACE FALTA `.hero__grid` Y NO ALCANZA CON PONER LA GRILLA EN
   `.hero`. Adentro de la sección viven TRES piezas con DOS anchos distintos:
   las dos columnas van a `--piel-ancho` (1240) y la franja de confianza va a
   `--piel-ancho-banda` (1472), que es el tamaño que el operador pidió dejar
   como estaba. Con la grilla en la sección, la franja tendría que ser una
   celda `grid-column: 1 / -1` acotada por su cuenta, y la canaleta lateral
   dejaría de ser la misma para las dos. Con el envoltorio, cada una lee su
   propio techo y la regla de la franja no se toca.

   La sección se queda en flex column —que es lo que ya era— sólo para apilar
   la grilla y la franja y centrarlas. */

.t-homepage .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: left;
  gap: 0;
  padding-inline: 32px;
  padding-block: 44px 0 !important;
}

.t-homepage .hero__grid {
  width: 100%;
  max-width: var(--piel-ancho);
  margin-inline: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: 44px;
  align-items: center;
}


/* ── EL HERO ENTRA EN UNA PANTALLA, Y LA FRANJA CIERRA ABAJO ──────────────
   Operador, 2026-08-19. ESTO NO SALE DE LA MAQUETA y conviene que quede dicho:
   medida a 1440×1000, la maqueta pone su franja en y=972 y la termina en 1027,
   o sea DEBAJO del pliegue. Lo que sigue es una decisión del sitio.

   CÓMO SE PAGA. El presupuesto de la primera pantalla es
   `100svh - --piel-chrome-alto`, y adentro todo tiene altura fija menos UNA
   pieza: la foto. El texto, la cifra y la franja miden lo que miden; la foto
   toma lo que sobra y recorta con `object-fit: cover`. A 1440×900 eso la deja
   en ~256px de alto sobre 1240 de ancho —más apaisada que el 21:9 del molde— y
   en una pantalla alta queda más alta. Es el precio de que la franja toque el
   pliegue, y se paga en el único elemento que puede recortarse sin perder dato.

   `svh` Y NO `vh`, con `vh` de respaldo en la línea de arriba: en un móvil `vh`
   mide la ventana SIN la barra del navegador, así que la franja quedaría
   siempre unos 60px por debajo de lo que se ve. `svh` es la ventana chica, la
   que hay de verdad al llegar.

   SÓLO DE 1000px PARA ARRIBA. Debajo de eso la cabecera envuelve —el CTA se va
   a su propia fila y el chrome deja de medir 120— así que el presupuesto sería
   falso; y en un teléfono nadie espera el hero entero en una pantalla. Abajo
   de 1000 el hero fluye como venía, con la foto en 21:9. */

@media (min-width: 1000px) {
  /* LOS 32 DE ABAJO NO SON SIMETRÍA: son el aire que necesita la franja para
     que se le vean las cuatro esquinas. Sin ellos el borde inferior del strip
     caía EXACTAMENTE sobre el pliegue —medido: bottom 899 con la ventana en
     900— y las dos esquinas de abajo quedaban pegadas al filo de la pantalla,
     así que el radio de 20 estaba pero no se leía: parecía una franja cortada.
     Son los mismos 32 de la canaleta lateral, no un número nuevo. */
  /* EL AIRE DE ARRIBA TAMBIÉN CEDE, por lo mismo que las medidas de la tarjeta:
     los 44 del molde valen cuando hay pantalla de sobra y son lo primero que
     conviene resignar cuando no. Los 32 de abajo NO ceden: son los que dejan
     ver las cuatro esquinas de la franja. */
  .t-homepage .hero {
    box-sizing: border-box;
    min-height: calc(100vh - var(--piel-chrome-alto));
    min-height: calc(100svh - var(--piel-chrome-alto));
    padding-block: clamp(26px, 4.4vh, 44px) 32px !important;
  }

  /* ⚠ ACÁ ESTABA LA FOTO ELÁSTICA, Y SE FUE EL 2026-08-20 con el molde viejo.
     Cuando el hero era una columna, la figura era su ÚNICA pieza sin altura
     fija: tomaba `flex: 1 1 0` y estiraba hasta empujar la franja al pliegue.
     En el molde nuevo la foto ya no es la pieza elástica —el molde le fija
     21:9 y un techo de 26vh, y la altura del hero la manda la tarjeta del
     formulario, que es más alta que la columna de texto—, así que estirarla
     la sacaba de proporción y peleaba con el `align-items:center` de la
     grilla.

     LO QUE ESTIRA AHORA ES LA GRILLA ENTERA. Con `flex: 1 1 auto` el envoltorio
     se queda con el hueco que sobra hasta el pliegue y sus dos columnas se
     centran adentro, que es lo que pide `align-items:center` de la maqueta. La
     franja sigue cerrando abajo, que era el punto del bloque. */
  .t-homepage .hero__grid { flex: 1 1 auto; }
}

/* ── La columna izquierda ─────────────────────────────────────────────────
   Maqueta línea 50: `display:flex; flex-direction:column; gap:16px`, sin
   `align-items`, o sea al RAS IZQUIERDO. Hasta el 2026-08-20 esta pila iba
   centrada; con el formulario al lado, centrarla dejaría el texto flotando
   contra la tarjeta. */

.t-homepage .hero__texto {
  align-items: flex-start;
  text-align: left;
  gap: 16px;
  width: 100%;
}

/* La píldora mono — maqueta línea 51. El ras izquierdo ya lo trae la regla
   genérica de `.hero__rotulo`; esto deshace el `align-self: center` del molde
   viejo y queda escrito para que no vuelva por herencia. */
.t-homepage .hero__rotulo { align-self: flex-start; }

/* Maqueta línea 52: `clamp(30px,3.6vw,48px); line-height:1.0;
   letter-spacing:-0.034em`. SIN `max-width`: el recorte a 22ch era del molde
   viejo, donde el H1 iba centrado a todo el ancho de la página y sin tope
   partía en tres renglones cortos. Acá el tope lo pone la columna. */
.t-homepage .hero__h1 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.0;
  letter-spacing: -0.034em;
  max-width: none;
  margin-inline: 0;
}

/* La bajada del Home es DISPLAY, no cuerpo — maqueta línea 53:
   Manrope 500, `clamp(16px,1.5vw,19px)`, `line-height:1.5`,
   `letter-spacing:-0.012em`, en tinta y a 62ch. */
.t-homepage .hero__sub {
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--piel-tinta);
  max-width: 62ch;
  margin-inline: 0;
}

.t-homepage .hero__acciones { justify-content: flex-start; }

/* La foto, ya adentro de la columna — maqueta línea 58: `margin-top:8px;
   width:100%; border-radius:18px; aspect-ratio:21/9; max-height:26vh`. Los 8
   se suman al `gap:16` del flex de arriba, igual que en el molde. */
.t-homepage .hero__figura {
  width: 100%;
  max-width: none;
  margin: 8px 0 0;
  display: block;
}

.t-homepage .hero__figura img {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 26vh;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── La tarjeta del formulario ────────────────────────────────────────────
   Maqueta línea 62: `background:#fff; border:1px solid #e6e1d8;
   border-radius:20px; padding:28px 26px; display:flex; flex-direction:column;
   gap:14px`. La pista de la grilla la topea en 400px.

   ES LA MISMA PIEZA QUE EL HERO DE /contact/ Y SE VISTE DISTINTO A PROPÓSITO:
   allá la tarjeta es el asunto de la página y va a 36/34 con los dos primeros
   campos compartiendo renglón; acá es la columna angosta de un hero y el molde
   la dibuja en UNA sola pista, más ajustada. Por eso las reglas cuelgan de
   `.t-homepage`, y ninguna de las otras dieciocho páginas cambia un pixel. */

/* ⚠ LA TARJETA ESTÁ COMPRIMIDA CONTRA EL MOLDE, Y ES UNA DECISIÓN ═══════════
   Operador, 2026-08-20: *"el strip tiene que entrar en la página sin cortarse;
   reducí el largo del formulario en DIMENSIÓN, no en datos adentro"*.

   EL PRESUPUESTO, medido a 1440×900. La primera pantalla da
   `100svh - 120` = 780. Le sacan el `padding-block` del hero (44 arriba, 32
   abajo) y la franja con su margen (55 + 32): a la grilla le quedan ~617. La
   tarjeta, con las medidas del molde —`padding:28px 26px`, `gap:14px`,
   campos de `12px 14px` y el `rows="4"` del parcial— medía ~800 y empujaba la
   franja 180px por debajo del pliegue.

   QUÉ SE TOCÓ Y QUÉ NO. Los cinco campos siguen siendo cinco, con las mismas
   etiquetas, el mismo aviso legal y el mismo botón: no se sacó un dato. Lo que
   bajó es el aire — la canaleta de la tarjeta, el `gap` entre campos, el alto
   de los controles y el del `<textarea>`. Es el mismo criterio que ya usa el
   bloque de arriba con la foto: cuando la primera pantalla no alcanza, se
   recorta lo que no lleva información.

   ⚠ Y SE COMPRIME EN `vh`, NO EN PÍXELES FIJOS. Con medidas fijas la tarjeta
   entra a 1440×900 y vuelve a cortar la franja a 1180×800, que fue justo lo
   que se midió al primer intento: 726 de hero contra 681 de presupuesto. Cada
   `clamp(mínimo, Nvh, medida del molde)` hace que el aire ceda solo cuando la
   ventana es más baja — a 900 la tarjeta se acerca al molde, a 800 se aprieta,
   y nunca baja del mínimo, que es donde el control deja de ser cómodo de
   tocar. Es el mismo mecanismo que el `max-height` en `vh` de la foto.

   DÓNDE SE ACABA. Debajo de ~780px de ventana no alcanza ni apretando: los
   cinco campos, el aviso legal y el botón tienen un piso, y el presupuesto
   sigue bajando. Ahí la franja pide scroll. Las dos únicas salidas son sacar
   un campo o achicar la franja, y las dos son decisión del operador.

   SÓLO DE 1000px PARA ARRIBA no haría falta, pero se deja para todos los
   anchos: apretada se ve mejor que suelta también en el teléfono, y no hay dos
   versiones que mantener. */
.t-homepage .hero__form .form {
  border-radius: var(--piel-radio-gr);
  padding: clamp(14px, 2.2vh, 22px) 24px !important;
}

/* Maqueta línea 64: Manrope 700 de 21px con `letter-spacing:-0.02em`, y el pie
   a 13.5px en el tenue. El H2 del parcial pesa lo que pesa por ser título de
   sección; acá es el rótulo de una tarjeta. */
.t-homepage .hero__form .form__h2 {
  margin: 0 0 2px;
  font-size: 21px;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.t-homepage .hero__form .form__nota {
  margin: 0 0 clamp(6px, 1.1vh, 12px);
  font-size: 13px;
  line-height: 1.4;
  color: var(--piel-tenue);
}

/* Una sola pista — maqueta línea 62. El `gap` del molde es 14 y acá arranca en
   10: es el recorte más barato del presupuesto, porque son SIETE huecos y cada
   píxel se cobra siete veces. */
.t-homepage .hero__form .form__campos {
  display: flex;
  flex-direction: column;
  gap: clamp(5px, 1vh, 10px);
}

/* Las etiquetas en MONO Y VERSALES — maqueta línea 67: `font-size:10px;
   letter-spacing:0.08em`, en el tenue. De bloque y no en flex column, por lo
   mismo que en /contact/: el `optional` es un `<span>` inline y en flex column
   se iría a su propio renglón. */
.t-homepage .hero__form .form__campos label {
  display: block;
  margin: 0;
  font-family: var(--piel-mono);
  font-weight: 400;
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}

/* Maqueta línea 67: `font-size:14px; border-radius:12px; padding:12px 14px`,
   en Manrope. Acá el `padding` vertical baja a 9 y el hueco entre la etiqueta
   y su campo, de 6 a 4: por cinco controles son ~40px del presupuesto.

   El `min-width: 0` y el `box-sizing` están por el mismo motivo que en
   /contact/: un `<input>` trae del navegador un ancho mínimo propio. */
.t-homepage .hero__form .form__campos input,
.t-homepage .hero__form .form__campos textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: clamp(3px, 0.5vh, 4px) 0 0;
  padding: clamp(6px, 1vh, 9px) 14px;
  border-color: var(--piel-borde-fuerte);
  border-radius: 12px;
  font-family: var(--piel-display);
  font-size: 14px;
  line-height: 1.4;
}

/* EL `<textarea>` SE MIDE ACÁ Y NO EN EL PARCIAL. El `rows="4"` de
   `_componentes.html` lo comparte con /contact/, donde la caja grande está
   bien porque la conversión ES el formulario. Pisarlo allá para arreglar el
   Home sería cambiar dos páginas para arreglar una. Con `height` fijo el
   atributo sigue en su lugar y sólo cambia lo que se ve, que es lo que pidió
   el operador: dimensión, no datos. Sigue estirándose a mano. */
.t-homepage .hero__form .form__campos textarea {
  height: clamp(42px, 6.5vh, 62px);
  min-height: 42px;
}

.t-homepage .hero__form .form__legal {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.4;
}

/* Maqueta línea 72: `padding:15px 22px; font-size:15px`. El horizontal no se
   toca —no cuesta alto— y sólo el vertical entra al presupuesto. */
.t-homepage .hero__form .form__campos .btn--primario {
  padding: clamp(8px, 1.3vh, 12px) 22px;
  font-size: 15px;
}


/* ── La franja de confianza, a sangre ─────────────────────────────────────
   Maqueta línea 70: `margin-top:32px; background:#221c16`, grilla auto-fit de
   230px, SIN radio y SIN contenedor — llega a los dos bordes de la pantalla.
   Los ítems, línea 71: `padding:16px 24px; border-right:1px solid #3a332b;
   Manrope 600 13.5px; color:#ede8e0; text-align:center`. */

/* ⚠ LA FRANJA ES HIJA DEL HERO Y NO VA A SANGRE — operador, 2026-08-19, en dos
   pasos: primero entró al `<section class="hero">` y después se acotó.

   EL MOLDE LA DIBUJA A SANGRE (maqueta línea 70: `background:#221c16`, sin
   contenedor y sin radio) y ACÁ SE APARTA A PROPÓSITO. Con los dos bordes
   tocando la pantalla, la franja se lee como una banda SEPARADORA entre el hero
   y la sección que sigue, no como parte del hero. Acotada a `--piel-ancho`
   —los mismos 1240 de la figura de arriba— y con el radio grande de la foto,
   queda a plomo con ella y cierra la composición: es el último renglón del
   hero, que es lo que el operador pidió.

   ⚠ Y NO SE ACOTA A LA FOTO: llega hasta la CANALETA DEL HERO — operador,
   2026-08-19, tercer paso. A los 1240 de la figura la franja se leía corta,
   con 100px de papel a cada lado y el radio marcándolos. Con el ancho del hero
   —1376 a 1440px, o sea los 32 de canaleta— sigue sin tocar los bordes, sigue
   teniendo su radio, y llega hasta donde llega la barra de arriba.

   EL TECHO ES `--piel-ancho-banda` Y NO ES UN NÚMERO NUEVO: es el token que el
   operador fijó el mismo día para "las cuatro piezas de la franja que se ve al
   abrir la página sin scrollear" —topbar, cabecera, hero y esta franja—. Sin
   techo, a 1920 la franja mediría 1856 contra los 1240 de la foto y la
   diferencia se vería. Con él, 1472.

   Para volver al molde, que la dibuja a sangre: `width: calc(100% + 64px);
   margin: 32px -32px 0` y el radio en 0. Los 64 y los 32 son la canaleta. */
.t-homepage .hero .trust {
  width: 100%;
  max-width: var(--piel-ancho-banda);
  margin: 32px auto 0;
  padding-inline: 0;
  padding-block: 0 !important;
}
.t-homepage .trust__lista { border-radius: var(--piel-radio-gr); }
.t-homepage .trust__item {
  padding: 16px 24px;
  font-size: 13.5px;
  text-align: center;
}


/* ── El ritmo de bandas ───────────────────────────────────────────────────
   Ocho secciones a 72px, alternando papel y blanco, con los filetes donde el
   molde los pone: `costo` y `proceso` cerrados arriba y abajo, `normativa`
   sólo abajo. El fondo se fija por NOMBRE, que es lo que mide C7. */

.t-homepage .criticos,
.t-homepage .why,
.t-homepage .area,
.t-homepage .faq,
.t-homepage .cierre-lead,
.t-homepage .cta-home { background: var(--piel-papel); }

.t-homepage .costo,
.t-homepage .proceso,
.t-homepage .normativa { background: var(--piel-blanco); }

.t-homepage .about-resumen { background: var(--piel-profunda); }

.t-homepage .costo,
.t-homepage .proceso {
  border-top: 1px solid var(--piel-borde);
  border-bottom: 1px solid var(--piel-borde);
}
.t-homepage .normativa { border-bottom: 1px solid var(--piel-borde); }

/* EL FILETE FLOTANTE SE VA. `.costo::before` dibuja una regla horizontal
   sobre la sección en el molde de servicio, donde `costo` es una sección más
   dentro de una banda continua. Acá la sección ya tiene su borde y su cambio
   de fondo, y la regla quedaba como una línea suelta sobre el rótulo. */
.t-homepage .costo::before { content: none; }

.t-homepage .criticos,
.t-homepage .costo,
.t-homepage .why,
.t-homepage .proceso,
.t-homepage .area,
.t-homepage .about-resumen,
.t-homepage .normativa {
  margin-top: 0 !important;
  padding-block: 72px !important;
}

/* El FAQ cierra en 0: lo que sigue es la frase de cierre, que trae su propio
   aire de 64 — maqueta línea 289, `padding:72px 32px 0`. */
.t-homepage .faq {
  margin-top: 0 !important;
  padding-block: 72px 0 !important;
}


/* ── La cabecera de sección ───────────────────────────────────────────────
   Maqueta línea 79: envoltorio `flex column; align-items:center;
   text-align:center; gap:8px; margin-bottom:32px`. El rótulo, línea 80: mono
   11px con `letter-spacing:0.1em` en el ámbar. El H2, línea 81: Manrope 700,
   `clamp(26px,3vw,38px)`, `line-height:1.12`, `letter-spacing:-0.025em`,
   `margin:0`.

   ⚠ SIN `max-width`. Acá había 26ch para todos los H2, y era lo que partía en
   dos renglones un título que en el molde entra en uno —"The Two Projects We
   Are Asked For Most" mide 38 caracteres—. El único H2 con medida en el molde
   es el de `normativa`, y son 26ch (línea 280). */

.t-homepage .criticos__rotulo,
.t-homepage .costo__rotulo,
.t-homepage .why__rotulo,
.t-homepage .proceso__rotulo,
.t-homepage .area__rotulo,
.t-homepage .about-resumen__rotulo,
.t-homepage .normativa__rotulo,
.t-homepage .faq__rotulo {
  font-family: var(--piel-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--piel-acento);
  text-align: center;
  margin: 0 0 8px;
  max-width: none;
}

.t-homepage .criticos__h2,
.t-homepage .costo__h2,
.t-homepage .why__h2,
.t-homepage .proceso__h2,
.t-homepage .area__h2,
.t-homepage .normativa__h2,
.t-homepage .faq__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: center;
  max-width: none;
  margin: 0 auto 32px;
}

/* Maqueta línea 280: es el único H2 con medida, y el molde le deja 30px de
   aire abajo en vez de 32 (línea 278). Lo mismo el del FAQ, línea 291. */
.t-homepage .normativa__h2,
.t-homepage .faq__h2 { margin-bottom: 30px; }
.t-homepage .normativa__h2 { max-width: 26ch; }

/* `about` es la ÚNICA que no centra: su encabezado vive en la columna
   izquierda de la banda oscura — maqueta líneas 264-267, con 8px entre rótulo
   y H2 y 18px hasta la prosa. */
.t-homepage .about-resumen__rotulo {
  text-align: left;
  color: var(--piel-acento-medio);
}
.t-homepage .about-resumen__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: none;
  margin: 0 0 18px;
}


/* ── 01 · `criticos`: tarjetas con foto ───────────────────────────────────
   Maqueta líneas 83-100. La grilla: `repeat(auto-fit,minmax(320px,1fr));
   gap:16px`. La tarjeta: `background:#fff; border:1px solid #e6e1d8;
   border-radius:20px; overflow:hidden; display:flex; flex-direction:column`.
   La foto: `aspect-ratio:16/10`. El cuerpo: `padding:26px 28px; gap:6px`. */

/* `max-width: none` pisa los 74ch que le pone el molde viejo más arriba: con
   ellos el envoltorio medía 710px de 1240 y el H2 se centraba DENTRO de esos
   710, o sea corrido 265px a la izquierda. Se veía como un título desalineado
   y era una medida heredada. */
.t-homepage .criticos__intro {
  text-align: center;
  max-width: none;
  margin-bottom: 0;
}

.t-homepage .criticos__lista {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.t-homepage .criticos__item { margin: 0; padding: 0; border: 0; background: none; }

.t-homepage .criticos__enlace {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio-gr);
  overflow: hidden;
  text-decoration: none;
}
.t-homepage .criticos__enlace:hover { border-color: var(--piel-acento); }

.t-homepage .criticos__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.t-homepage .criticos__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 26px 28px;
}

/* Maqueta línea 87: mono 10px, `letter-spacing:0.08em`, en el acento oscuro.
   Es el rótulo de la TARJETA y mide menos que el de la sección: 10 contra 11,
   y 0.08em contra 0.1em. */
.t-homepage .criticos__grupo {
  font-family: var(--piel-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-acento-oscuro);
}

/* Maqueta línea 88: Manrope 700 de 22px, `letter-spacing:-0.018em`. */
.t-homepage .criticos__nombre {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--piel-tinta);
}

/* Maqueta línea 89: Manrope 600 de 14px, en el acento oscuro. */
.t-homepage .criticos__ver {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--piel-acento-oscuro);
}


/* ── 02 · `costo`: lead, tres tramos y cierre ─────────────────────────────
   Maqueta líneas 104-130.

   El lead (línea 110): `margin:0 auto 30px; max-width:80ch; text-align:center`,
   Manrope 500 `clamp(17px,1.7vw,21px)`, `line-height:1.45`,
   `letter-spacing:-0.014em`, en tinta.
   Los tramos (línea 111): `grid repeat(auto-fit,minmax(280px,1fr)); gap:16px;
   margin:0 0 30px`.
   El cierre (línea 128): `margin:0 auto; max-width:80ch; text-align:center`,
   en el cuerpo de la página. */

.t-homepage .costo__texto {
  columns: 1;
  max-width: none;
  margin-inline: auto;
}

/* `:not([class])` Y NO `:first-of-type`. El rótulo de sección TAMBIÉN es un
   `<p>`, y es el primero: con `:first-of-type` el "02 · COST" se llevaba el
   cuerpo de 21px del lead y el lead quedaba en la tipografía de texto. Los
   párrafos que salen de `md()` no traen clase; el rótulo sí. */
.t-homepage .costo__texto > p:not([class]) {
  max-width: 80ch;
  margin: 0 auto 30px;
  text-align: center;
}

/* El LEAD es el párrafo que sigue al H2 —bloque `## costo`— y va en display;
   el que sigue a las tarjetas —`## costo_cierre`— es prosa normal. */
.t-homepage .costo__h2 + p {
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--piel-tinta);
}

.t-homepage .costo__tramos + p { margin-bottom: 0; }

.t-homepage .costo__tramos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin: 0 0 30px;
}

/* Maqueta línea 112: `background:#f6f3ee; border:1px solid #e6e1d8;
   border-radius:18px; padding:26px 28px; gap:6px`. */
.t-homepage .costo__tramo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: var(--piel-papel);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 26px 28px;
}

.t-homepage .costo__tramo dt {
  font-family: var(--piel-mono);
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-tenue);
}

/* Maqueta línea 114: Manrope 700 de 26px, `line-height:1.1`,
   `letter-spacing:-0.024em`. */
.t-homepage .costo__monto {
  margin: 0;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: -0.024em;
  color: var(--piel-tinta);
}

.t-homepage .costo__pie {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--piel-tenue);
}

/* EL SEGUNDO VA TINTADO Y EL TERCERO INVERTIDO — maqueta líneas 117 y 122. Es
   la escala: el tramo del medio es el que la página quiere que se lea, y el
   tercero es el techo. `:nth-of-type()` acá es de LAYOUT dentro de una
   sección, no el fondo de una sección: es lo que C7 permite. */
.t-homepage .costo__tramo:nth-of-type(2) {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
}
.t-homepage .costo__tramo:nth-of-type(2) dt { color: var(--piel-acento-oscuro); }
.t-homepage .costo__tramo:nth-of-type(2) .costo__pie { color: var(--piel-tenue-baja); }

.t-homepage .costo__tramo:nth-of-type(3) {
  background: var(--piel-profunda);
  border-color: var(--piel-profunda);
}
.t-homepage .costo__tramo:nth-of-type(3) dt { color: var(--piel-tenue-oscuro); }
.t-homepage .costo__tramo:nth-of-type(3) .costo__monto { color: var(--piel-acento-claro); }
.t-homepage .costo__tramo:nth-of-type(3) .costo__pie { color: var(--piel-claro-4); }


/* ── 03 · `why`: grilla de tarjetas sobre papel ───────────────────────────
   Maqueta líneas 132-162. La banda oscura a dos columnas es del molde de
   SERVICIO. Acá son cinco tarjetas, la última tintada, y un hueco de foto que
   es UNA CELDA MÁS de la misma grilla: `repeat(auto-fit,minmax(320px,1fr));
   gap:16px; align-items:stretch`, tarjeta `padding:28px 30px; gap:10px`,
   `border-radius:18px`.

   Cada `<p>` del marcado ES una tarjeta: abre con un `<strong>` que en el
   molde es el `<b>` de 19px y sigue con el cuerpo a 15px. El envoltorio se
   disuelve con `display:contents` para que los párrafos sean ítems del grid. */

.t-homepage .why {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  align-items: stretch;
}

.t-homepage .why__texto { display: contents; }

/* EL ENCABEZADO ES UNA SOLA CELDA, no dos. Con el rótulo y el H2 sueltos, cada
   uno ocupaba su propia fila a ancho completo y entre los dos caía el
   `gap: 16px` de la grilla de tarjetas: el "03 · Why us" quedaba flotando a 16
   de su título en vez de a los 8 del molde. Envueltos, adentro manda el margen
   de cada uno. */
.t-homepage .why__cabecera {
  grid-column: 1 / -1;
  text-align: center;
}
.t-homepage .why__h2 { color: var(--piel-tinta); }

/* `:not([class])` por lo mismo que en `costo`: el rótulo de sección es un
   `<p>` y con el selector pelado se dibujaba dentro de una tarjeta blanca a
   todo el ancho de la grilla. Las tarjetas son los párrafos de `## why_us`,
   que salen de `md()` sin clase. */
.t-homepage .why p:not([class]) {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 28px 30px;
  margin: 0;
  max-width: none;
  font-size: 15px;
  color: var(--piel-texto);
}

/* El lead de cada tarjeta: en el molde es un `<b>` de bloque, no una negrita
   corrida dentro del párrafo — maqueta línea 140: Manrope 700 de 19px,
   `letter-spacing:-0.015em`, con 10px hasta el cuerpo. */
.t-homepage .why p strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--piel-tinta);
}

/* La quinta va tintada — maqueta línea 155. El molde la elige por contenido;
   acá se toma la ÚLTIMA, que es la que cierra la sección en las dos. */
.t-homepage .why p:not([class]):last-of-type {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
  color: var(--piel-tinta);
}

.t-homepage .why a { color: var(--piel-acento-oscuro); }
.t-homepage .why a:hover { color: var(--piel-acento); }

/* El hueco de foto es una celda más — maqueta línea 159: `border-radius:18px;
   min-height:260px`. VA ÚLTIMO EN EL DOM y por eso cae en la sexta celda; con
   la figura antes del texto quedaba arriba del H2. El molde trae un hueco y
   esta página publica dos fotos: se apilan dentro de la celda. */
.t-homepage .why__figura {
  grid-column: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  min-height: 260px;
}
.t-homepage .why__figura img {
  width: 100%;
  flex: 1 1 0;
  min-height: 120px;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── 04 · `proceso`: pasos a la izquierda, fotos a la derecha ─────────────
   Maqueta línea 170: `grid-template-columns: minmax(0,1fr) minmax(0,300px);
   gap:40px; align-items:start`. El `<ol>` (línea 171): sin viñeta y con
   `border-top`. Cada paso (línea 172): `grid 56px minmax(0,1fr); gap:20px;
   padding:20px 0; border-bottom`. La numeración (línea 173): Manrope 700 de
   26px, `line-height:1`, `letter-spacing:-0.03em`, color #e0c9a8. */

.t-homepage .proceso {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  column-gap: 40px;
  row-gap: 0;
  align-items: start;
}

/* El envoltorio se disuelve para que el encabezado cruce las dos columnas y el
   `<ol>` quede en la primera. */
.t-homepage .proceso__texto { display: contents; }
.t-homepage .proceso__rotulo,
.t-homepage .proceso__h2 { grid-column: 1 / -1; }
.t-homepage .proceso ol { grid-column: 1; }
.t-homepage .proceso__figura { grid-column: 2; }

.t-homepage .proceso ol { border-top: 1px solid var(--piel-borde); }

/* La celda del número son 56px + 20px de gap. Va con `position:absolute` y no
   con una columna del grid porque el `<li>` trae el `<strong>` y un nodo de
   texto suelto: en grid, ese texto se convierte en un ítem anónimo y se separa
   de su título. */
.t-homepage .proceso li {
  display: block;
  position: relative;
  text-align: left;
  align-items: stretch;
  padding: 20px 0 20px 76px;
  border-top: 0;
  border-bottom: 1px solid var(--piel-borde);
}
.t-homepage .proceso li:last-child { border-bottom: 0; }

.t-homepage .proceso ol li::before {
  position: absolute;
  left: 0;
  top: 20px;
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--piel-numero);
}

/* Maqueta línea 175: Manrope 600 de 18px, `line-height:1.3`, con 5px hasta la
   descripción, que va a 15px. */
.t-homepage .proceso li strong {
  display: block;
  margin-bottom: 5px;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  color: var(--piel-tinta);
}
.t-homepage .proceso li > p,
.t-homepage .proceso li > span { font-size: 15px; }

/* Maqueta líneas 222-224: `flex column; gap:14px`, la primera 3:4 y la
   segunda 4:3, las dos con radio 18. */
.t-homepage .proceso__figura {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
}
.t-homepage .proceso__figura img {
  width: 100%;
  object-fit: cover;
  border-radius: var(--piel-radio);
}
.t-homepage .proceso__figura img:first-child { aspect-ratio: 3 / 4; }
.t-homepage .proceso__figura img:last-child { aspect-ratio: 4 / 3; }

/* ⚠ LA SEGUNDA FOTO SE ESTIRA HASTA EL FINAL DE LA LISTA — operador,
   2026-08-19. No sale de la maqueta: ahí la columna de fotos mide 3:4 + 4:3 y
   sobra, porque los siete pasos del molde son más cortos que los de este
   cliente. Acá la lista termina ~230px más abajo que las fotos y esa esquina
   quedaba vacía.

   Cómo: la sección es un grid con `align-items: start`, así que la figura no
   se estira sola — se lo pide `align-self: stretch`, y adentro la PRIMERA foto
   conserva su 3:4 mientras la segunda pasa a `flex: 1 1 0` y se come lo que
   sobra. `aspect-ratio: auto` saca de en medio el 4:3, que si no pelearía con
   el flex; `object-fit: cover` ya estaba y es lo que recorta sin deformar.

   `nth-of-type(2)` y no `last-child`: si una página declarara UNA sola foto,
   `last-child` sería también la primera y se llevaría puesto el 3:4. */
.t-homepage .proceso__figura img:nth-of-type(2) {
  flex: 1 1 0;
  min-height: 200px;
  aspect-ratio: auto;
}
.t-homepage .proceso__figura { align-self: stretch; }


/* ── 05 · `area`: 1fr contra 400px, y dos recuadros de cierre ─────────────
   Maqueta línea 236: `grid-template-columns: minmax(0,1fr) minmax(0,400px);
   gap:44px; align-items:start`, con la prosa y las píldoras a la izquierda y
   la foto 4:5 a la derecha. Debajo, línea 254: `margin-top:32px; grid
   repeat(auto-fit,minmax(340px,1fr)); gap:16px` con los dos párrafos de cierre
   como tarjetas.

   ROW-GAP EN CERO, y el aire entre párrafos por margen: con el envoltorio
   disuelto cada `<p>` es una FILA del grid, así que un `gap:44px` no separa
   dos columnas, separa siete párrafos. El 44 del molde es el gap de COLUMNA. */

.t-homepage .area {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  column-gap: 44px;
  row-gap: 0;
  align-items: start;
}

/* DOS FILAS: arriba la columna de texto contra la foto, abajo los dos
   recuadros a lo ancho. Ningún ítem cruza filas, así que ninguno estira el
   interlineado del otro.

   ⚠ EL ENCABEZADO YA NO VA A ANCHO COMPLETO — operador, 2026-08-19. Antes
   ocupaba las dos columnas, o sea que se centraba sobre 1240 mientras la prosa
   que titula ocupa 796: el título caía 220px a la derecha de su propio texto.
   Ahora vive DENTRO de `area__col`, se centra sobre esos 796, y la foto de la
   derecha arranca a la altura del rótulo en vez de debajo del H2. */
.t-homepage .area__col {
  grid-column: 1;
  grid-row: 1;
}

.t-homepage .area__cabecera { text-align: center; }

/* ═══ LA COLUMNA DE TEXTO ES UNA GRILLA PROPIA ═══ y sus filas van numeradas a
   mano: es la única forma de meter las píldoras ENTRE los dos párrafos, que es
   donde las pone el molde (línea 239, entre el 238 y el 250). El
   `{{{ area_cuerpo }}}` entrega los dos párrafos en un solo bloque de HTML, así
   que en el DOM el `<ul>` va después de los dos; la grilla los reordena sin
   tocar el marcado y sin `order`, que C7 vigila sobre los hijos de `main`.

   ⚠ ESTO ASUME DOS PÁRRAFOS en `## area_cuerpo`. Si el copy suma un tercero,
   cae en la fila 4 encima del enlace al hub. La cuenta está acá y no repartida:
     1 primer párrafo · 2 píldoras · 3 segundo párrafo · 4 enlace al hub */
.t-homepage .area__texto {
  display: grid;
  grid-template-rows: repeat(4, auto);
  row-gap: 18px;
}

.t-homepage .area__texto > p,
.t-homepage .area__lista { max-width: none; margin: 0; }

.t-homepage .area__texto > p:nth-of-type(1) { grid-row: 1; }
.t-homepage .area__lista { grid-row: 2; }
.t-homepage .area__texto > p:nth-of-type(2) { grid-row: 3; }
.t-homepage .area__hub { grid-row: 4; }

.t-homepage .area__figura {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
}
.t-homepage .area__figura img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--piel-radio);
}

/* Maqueta línea 240: píldora BLANCA con borde, `padding:9px 18px`,
   `font-size:14px`, en tinta. Van bajo el primer párrafo y a lo ancho de la
   columna de texto, no apiladas en la columna de la foto. */
.t-homepage .area__lista {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  list-style: none;
}
.t-homepage .area__lista li {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-pildora);
  padding: 9px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--piel-tinta);
}

/* ⚑ El enlace al hub no está en el molde y se queda: es el único entrante de
   /locations/ desde el <main> del Homepage. Va discreto, cerrando la columna. */
.t-homepage .area__hub { margin: 0; }

/* Maqueta líneas 254-256: los dos párrafos de cierre, a ancho completo, como
   tarjetas — la primera blanca y la segunda tintada, las dos `padding:28px
   30px` y `border-radius:18px`. */
.t-homepage .area__cierre {
  grid-row: 2;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 16px;
  align-items: stretch;
  margin-top: 32px;
}
.t-homepage .area__cierre p {
  margin: 0;
  max-width: none;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 28px 30px;
}
.t-homepage .area__cierre p:last-of-type {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
  color: var(--piel-tinta);
}


/* ── 06 · `about`: la banda oscura del Home ───────────────────────────────
   El molde de servicio la pone en `why`; el de Home, acá. Maqueta línea 262:
   `grid-template-columns: minmax(0,1fr) minmax(0,360px); gap:48px;
   align-items:center`, con la columna de texto a `gap:18px`. */

.t-homepage .about-resumen {
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: 48px;
  align-items: center;
}

.t-homepage .about-resumen__texto {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
/* `max-width: none` pisa los 74ch del cuerpo: en el molde la prosa de esta
   banda llena su columna de 832px, y con la medida heredada cortaba 100px
   antes y dejaba una canaleta que la maqueta no tiene. */
.t-homepage .about-resumen__texto > p { margin: 0; max-width: none; }

.t-homepage .about-resumen__h2 { color: var(--piel-claro); }
.t-homepage .about-resumen p { color: var(--piel-claro-3); }
.t-homepage .about-resumen strong,
.t-homepage .about-resumen b { color: var(--piel-claro); }
.t-homepage .about-resumen a { color: var(--piel-acento-claro); }
.t-homepage .about-resumen a:hover { color: var(--piel-claro); }

/* Maqueta línea 272: 4:5 y radio 18. */
.t-homepage .about-resumen__figura img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── 07 · `normativa`: prosa a dos columnas ───────────────────────────────
   Maqueta línea 282: `grid repeat(auto-fit,minmax(340px,1fr)); gap:24px 44px`,
   con los párrafos a `margin:0` y sin fichas. Las seis credenciales de
   `datos.json` no salen acá: el Homepage no usa el parcial. */

.t-homepage .normativa__texto { text-align: center; }

.t-homepage .normativa__cuerpo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 24px 44px;
  text-align: left;
}
.t-homepage .normativa__cuerpo p { margin: 0; max-width: none; }


/* ── 08 · `faq`: acordeón numerado ────────────────────────────────────────
   Maqueta línea 295: `max-width:920px; margin:0 auto; border-top:1px solid
   #ded7c9`. Cada `<details>` (línea 296): `border-bottom; padding:22px 0`. El
   `<summary>` (línea 297): `display:flex; gap:14px`, Manrope 600 de 18px,
   `line-height:1.35`, con la numeración mono de 12px en el acento y 4px de
   `padding-top` para que caiga a plomo con la primera línea. La respuesta
   (línea 298): `margin:12px 0 0 32px; font-size:15px`.

   LA NUMERACIÓN LA PONE `counter()` Y NO EL MARCADO: así el parcial `faq` no
   cambia un nodo y las otras dieciocho páginas siguen con su acordeón de "+".
   `decimal-leading-zero` da el 01…10 del molde. */

.t-homepage .faq__lista {
  max-width: 920px;
  margin: 0 auto;
  border-top: 1px solid var(--piel-borde-fuerte);
  counter-reset: faq;
}

.t-homepage .faq__item {
  border-bottom: 1px solid var(--piel-borde-fuerte);
  padding: 22px 0;
}

.t-homepage .faq__pregunta {
  justify-content: flex-start;
  align-items: flex-start;
  gap: 14px;
  font-size: 18px;
  line-height: 1.35;
  counter-increment: faq;
}

.t-homepage .faq__pregunta::before {
  content: counter(faq, decimal-leading-zero);
  flex: 0 0 auto;
  padding-top: 4px;
  font-family: var(--piel-mono);
  font-size: 12px;
  line-height: 1.35;
  color: var(--piel-acento);
}

/* El "+" es del molde de servicio. Acá el afordance es la numeración y el
   cursor; el molde no dibuja ningún signo. */
.t-homepage .faq__pregunta::after { content: none; }

.t-homepage .faq__respuesta {
  margin: 12px 0 0 32px;
  max-width: none;
  font-size: 15px;
}


/* ── La frase de cierre ───────────────────────────────────────────────────
   Maqueta líneas 340-344: sección propia a `padding:64px 32px 0` y un solo
   párrafo `margin:0 auto; max-width:70ch; text-align:center`, en Manrope 500
   `clamp(18px,1.8vw,23px)`, `line-height:1.42`, `letter-spacing:-0.016em`.

   NO es la franja `.vuelta` con filetes arriba y abajo: eso es el molde de las
   páginas hijas, y el Homepage no tiene padre. */

.t-homepage .cierre-lead {
  margin-top: 0 !important;
  padding-block: 64px 0 !important;
}

.t-homepage .cierre-lead p {
  margin: 0 auto;
  max-width: 70ch;
  text-align: center;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--piel-tinta);
}


/* ── El CTA: tarjeta ámbar redondeada ─────────────────────────────────────
   Maqueta líneas 346-354. La sección: `padding:64px 32px` sobre el papel. La
   caja: `background:#c07a3a; border-radius:22px; padding:52px 44px; grid
   repeat(auto-fit,minmax(320px,1fr)); gap:32px; align-items:center`. El H2:
   Manrope 700 `clamp(26px,3.2vw,40px)`, `line-height:1.1`,
   `letter-spacing:-0.028em`, blanco, a 22ch. La columna derecha:
   `gap:18px; align-items:flex-start`. El botón: `background:#221c16;
   color:#fbf9f5; padding:16px 30px`, y al pasar por encima, `#15110d`.

   No es la franja a sangre de `.cta`: esa es el molde de servicio, y por eso
   este bloque tiene clases propias en vez de pisar aquéllas. */

.t-homepage .cta-home {
  margin-top: 0 !important;
  padding-block: 64px !important;
}

.t-homepage .cta-home__caja {
  background: var(--piel-acento);
  border-radius: 22px;
  padding: 52px 44px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 32px;
  align-items: center;
}

.t-homepage .cta-home__h2 {
  margin: 0;
  max-width: 22ch;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  color: var(--piel-blanco);
}

.t-homepage .cta-home__col {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}

.t-homepage .cta-home__texto {
  margin: 0;
  max-width: none;
  color: var(--piel-sobre-acento);
}

.t-homepage .cta-home__btn {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.7;
  text-decoration: none;
  background: var(--piel-profunda);
  color: var(--piel-claro);
  padding: 16px 30px;
  border-radius: var(--piel-pildora);
  white-space: nowrap;
}
.t-homepage .cta-home__btn:hover { background: var(--piel-negra); color: var(--piel-claro); }


/* ── Lo que queda del molde viejo ─────────────────────────────────────────
   `cats`, `señales` y `gbp` no existen en este sitio —0 categorías— pero las
   reglas viajan por si el tipo se instancia. */

.cats__cabecera { margin-bottom: 28px; }
.criticos__intro { max-width: 74ch; margin-bottom: 28px; }

/* ⚠ `.señales__h2` SALIÓ DE ACÁ el 2026-08-20. La sección dejó de ser "molde
   viejo": es la que abre los dos críticos, y desde la decisión de vestirlos
   como un servicio su H2 es el de `cuando` —28px de aire abajo, a la
   izquierda, 22ch— y no una excepción de 24px. */
.gbp__h2,
.geo__h2 { margin-bottom: 24px; }


/* ═══════════════════════════════════════════════════════════════════════════
   LAS NUEVE QUE NO SON UN SERVICIO — 2026-08-19

   La hoja se calibró contra `gbp_service`, que es el molde de diez de las
   diecinueve páginas. Las otras nueve —Homepage, los dos críticos, los tres
   hubs, About, Contact y Privacy Policy— salen de OTRAS SEIS PLANTILLAS, y
   ahí la misma sección llega con otro marcado: con envoltorio o sin él, con
   `<ol>` o con `<p>` sueltos, con figura o sin ella.

   Nada de esto es una composición nueva. Es la misma que ya está arriba,
   alcanzando las formas de marcado que la sesión anterior no midió. Los
   defectos se midieron sobre el HTML publicado, página por página.

   ⚠ ESTO NO ES EL DISEÑO DE ESTOS TIPOS, Y NO PRETENDE SERLO.
   El diseño de cada tipo vive en las maquetas, y **faltan 22 de las 33** del
   proyecto de Claude Design — entre ellas las DOS de Homepage, las DOS de
   Privacidad y los OCHO archivos "Contrato", que son justamente los que
   documentan cómo va alineado cada layout. Ver `diseno/README.md`
   §"Las 22 maquetas que faltan".

   Lo que sigue son DOS clases de regla, y conviene no confundirlas:

     REPARACIÓN — el marcado rompía la composición que YA estaba escrita
     arriba. Sobrevive a cualquier maqueta que llegue, porque no elige nada:
     el contenedor que no alcanzaba a `<aside>`, el envoltorio que disolvía
     el fallback de `why`, la `apertura` sin envoltorio, las tarjetas de
     contacto en inline, la grilla vacía del crítico.

     PROVISORIA ⚑ — acá SÍ hubo que elegir, porque la alternativa era dejarlo
     visiblemente roto y no hay maqueta que lo dicte. Están marcadas una por
     una. **Cuando llegue la maqueta del tipo, se reemplazan, no se mezclan.**
   ═══════════════════════════════════════════════════════════════════════════ */


/* ── `apertura` sin el envoltorio `__texto` ───────────────────────────────
   `gbp_service` envuelve la prosa en `.apertura__texto`; `services_hub` NO.
   Sin envoltorio cada `<p>` y cada `<h3>` es un ítem propio del grid de dos
   columnas y se reparte solo entre las dos: /services/ publicaba 21 bloques
   en zig-zag y los dos críticos, tres.

   ⚠ LOS DOS CRÍTICOS YA NO CAEN ACÁ desde el 2026-08-20: `critical_gbp_service`
   emite el envoltorio, por la decisión del usuario de que un crítico se vea
   como un servicio. La regla queda para `services_hub`, que sigue sin él.

   La piel no puede pedir un envoltorio que sólo emite una de las tres
   plantillas (§4 #174), así que cubre las dos formas. */

/* UNA COLUMNA, y las fotos como tira al final. NO es la composición de la
   maqueta: es la ausencia de composición, a propósito, hasta que llegue la
   maqueta del tipo. El intento de mandar la prosa a la columna 1 y la figura
   a la 2 con `grid-row: 1 / -1` NO FUNCIONA sin envoltorio — `-1` apunta al
   final del grid EXPLÍCITO, que sin `grid-template-rows` es la línea 1, así
   que la figura se queda en la fila del H2 y la estira 470 px: el título
   quedaba solo arriba de un hueco. Medido el 2026-08-19. */
.apertura:not(:has(.apertura__texto)) { display: block; }
.apertura:not(:has(.apertura__texto)) > .apertura__figura {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  margin-top: 36px;
}
.apertura:not(:has(.apertura__texto)) > .apertura__figura img {
  flex: none;
  aspect-ratio: 4 / 3;
}

/* El lead de la maqueta, que sin envoltorio no tenía de quién colgar. */
.apertura:not(:has(.apertura__texto)) > p:first-of-type {
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(19px, 2vw, 27px);
  line-height: 1.38;
  letter-spacing: -0.02em;
  color: var(--piel-tinta);
  max-width: none;
}

.apertura:not(:has(.apertura__texto)) > p { margin: 0 0 18px; }
.apertura:not(:has(.apertura__texto)) > h3 { margin: 32px 0 12px; }


/* ── ⚑ PROVISORIA · La apertura CENTRADA de los dos críticos ──────────────
   Pedido del operador el 2026-08-20 sobre "What Makes a Kitchen a Luxury
   Project". Es la misma pieza que ya usan los tres hubs veinte reglas más
   abajo: cuando la sección NO trae figura, el texto se centra y toma una
   medida, en vez de correr los 1216 px del contenedor.

   POR QUÉ UNA MEDIDA Y NO SÓLO `text-align`. Un párrafo centrado a todo el
   ancho se lee peor que uno alineado a la izquierda: el ojo pierde el punto
   de retorno de cada renglón. El centrado sólo funciona con la línea corta,
   así que las dos cosas van juntas o no va ninguna.

   ⚠ SE APAGA SOLA EL DÍA QUE LLEGUEN LAS FOTOS, y por eso cuelga de
   `:not(:has(figure))` y no del tipo a secas. Las dos aperturas están a una
   columna porque las 44 fotos del design system ya están usadas; en cuanto el
   .md declare `apertura_img`, la sección vuelve a la composición de dos
   columnas de `gbp_service` —texto a la izquierda, fotos a la derecha— y
   centrar el texto contra una foto al lado se leería como un desperfecto.
   Es literalmente la misma advertencia que trae la regla de los hubs. */

/* ── ⚑ PROVISORIA · La franja de confianza, DENTRO de la primera pantalla ──
   Pedido del operador el 2026-08-20: en los dos críticos el strip tiene que
   entrar entero en el alto de la ventana, sin que el borde inferior lo corte,
   y quedar apoyado contra ese borde.

   ⚠ LA PRIMERA VERSIÓN LIMITÓ SÓLO LA FOTO Y NO ALCANZABA. Parecía obvio que
   el culpable era la imagen —`width:100%` con `aspect-ratio:4/5`, 691 px de
   alto a 1440— y capándola el strip entraba a 900 y a 800, que fue donde se
   probó. Medido después a más alturas con un script que lee
   `getBoundingClientRect()`, el reparto real era otro:

     ventana  disponible para el hero   texto    foto     strip
     900      607                       501      607      ✓ entra
     800      507                       501      507      ✓ entra, al filo
     740      447                       501      447      ✗ cortado 54 px
     700      407                       501      407      ✗ cortado 94 px

   O sea que abajo de 800 el alto del hero YA NO LO FIJA LA FOTO SINO LA
   COLUMNA DE TEXTO, que mide 501 px en luxury y 437 en design y no se puede
   capar: es el H1, el subtítulo, los dos botones y la fila de specs. Capar la
   foto ahí no hace nada, y es exactamente el rango de ventana de un portátil
   —un MacBook de 13" da ~700 px de viewport—, que es donde el operador lo vio
   cortado mientras las capturas de 900 decían que estaba bien.

   ENTONCES SON DOS REGLAS Y NO UNA. Arriba de 820 alcanza con capar la foto.
   Abajo, además, SE RECORTA EL AIRE Y NUNCA EL CONTENIDO: el respiro del hero
   baja de 56 a 28, el de la franja de 44 a 24, el ritmo interno del texto de
   18 a 12 y el techo del H1 de 64 a 52 px. No se saca ni un dato.

   LAS SUMAS VAN ESCRITAS SUMANDO y no como un número redondo, para que el día
   que cambie cualquiera de las piezas se vea cuál tocar. Medidas, no
   estimadas: topbar 44 · barra pegajosa 81 · padding del hero · padding de la
   franja · franja 68 (22 arriba, 22 abajo, 23,8 de línea).

   `svh` Y NO `vh`: en un teléfono `vh` mide la ventana SIN la barra del
   navegador, así que promete más alto del que hay. La regla es de escritorio
   —abajo de 62rem el hero colapsa a una columna— pero la unidad correcta no
   cuesta nada.

   ⚠ SÓLO LOS DOS CRÍTICOS, que es lo que se pidió. Las diez de servicio tienen
   el mismo hero y el mismo strip y hoy siguen cortándolo: si esto se quiere
   parejo, se les saca el `.t-critical_gbp_service` de adelante a las dos
   reglas. Es decisión del operador, no del agente. */

@media (min-width: 62rem) {
  .t-critical_gbp_service .hero__figura img {
    max-height: calc(100svh - (44px + 81px + 56px + 44px + 68px));
  }
}

/* La ventana baja del portátil. El corte va en 820 y no en 800 porque a 800
   justo entraba, sin un pixel de sobra, y un techo al filo se rompe con
   cualquier cosa que crezca un renglón. */
@media (min-width: 62rem) and (max-height: 820px) {
  .t-critical_gbp_service .hero { padding-block: 28px 0 !important; }
  .t-critical_gbp_service .trust { padding-block: 24px 0 !important; }
  .t-critical_gbp_service .hero__texto { gap: 12px; }

  /* El techo del H1 baja de 64 a 52. El piso de 34 no se toca: es el del
     teléfono y ahí no manda esta regla. */
  .t-critical_gbp_service .hero__h1 { font-size: clamp(34px, 3.8vw, 52px); }

  .t-critical_gbp_service .hero__figura img {
    max-height: calc(100svh - (44px + 81px + 28px + 24px + 68px));
  }
}

/* El tercer escalón: la pantalla de 1280×720, que después del chrome del
   navegador deja ~600 px de viewport y sigue siendo común. Con el escalón de
   arriba quedaban 355 px para un texto de 389 y el strip se cortaba 34.
   Mismo criterio: se sigue recortando el aire y el cuerpo del H1, nunca un
   dato. Abajo de esto no hay cuarto escalón — el hero se volvería ilegible
   antes de entrar, y a esa altura la respuesta correcta es que el visitante
   scrollee dos dedos. */
@media (min-width: 62rem) and (max-height: 660px) {
  .t-critical_gbp_service .hero { padding-block: 20px 0 !important; }
  .t-critical_gbp_service .trust { padding-block: 16px 0 !important; }
  .t-critical_gbp_service .hero__texto { gap: 8px; }
  .t-critical_gbp_service .hero__h1 { font-size: clamp(34px, 3.2vw, 44px); }

  .t-critical_gbp_service .hero__figura img {
    max-height: calc(100svh - (44px + 81px + 20px + 16px + 68px));
  }
}


.t-critical_gbp_service .apertura:not(:has(figure)) { text-align: center; }

.t-critical_gbp_service .apertura:not(:has(figure)) .apertura__texto {
  align-items: center;
  gap: 20px;
}

.t-critical_gbp_service .apertura:not(:has(figure)) .apertura__h2 {
  margin-inline: auto;
  max-width: 24ch;   /* 24ch es la medida de los H2 que la hoja centra */
}

.t-critical_gbp_service .apertura:not(:has(figure)) .apertura__texto > p {
  max-width: 74ch;
  margin-inline: auto;
}

/* El lead conserva su tipografía —Manrope 500 hasta 27px, la de `gbp_service`—
   y sólo recibe la medida. La regla compartida le pone `max-width:none`, que
   es lo que hay que revertir acá.

   ⚠ VA DESPUÉS de la regla de arriba y no antes: las dos pesan igual —una
   clase, una pseudo-clase, un elemento— así que gana la última escrita. Puesta
   primero, el `74ch` genérico le pisaba el `46ch` al lead y el párrafo grande
   salía con la misma medida que la prosa. */
.t-critical_gbp_service .apertura:not(:has(figure)) .apertura__texto > p:first-of-type {
  max-width: 46ch;
}


/* ── ⚑ PROVISORIA · El hero sin figura ────────────────────────────────────
   /locations/ y /privacy-policy/ no traen foto de hero, y /contact/ tampoco
   pero pone el formulario en su lugar. Sin una cosa ni la otra, la mitad
   derecha de la banda queda vacía y el subtítulo envuelve a 54ch contra el
   H1 a todo lo ancho. Una columna, y el subtítulo respira. */

.hero:not(:has(.hero__figura)):not(:has(.hero__form)) { display: block; }
.hero:not(:has(.hero__figura)):not(:has(.hero__form)) .hero__sub { max-width: 68ch; }
.hero:not(:has(.hero__figura)):not(:has(.hero__form)) .hero__acciones { margin-top: 4px; }


/* ── ⚑ PROVISORIA · Los dos críticos dentro de /services/ ─────────────────
   RETIRADA EL 2026-08-19, al bajar la maqueta del tipo. Es lo que este mismo
   bloque anunciaba: "cuando llegue la maqueta del tipo, se reemplazan, no se
   mezclan".

   Lo que resolvía: `services_hub` repartía el catálogo en tres secciones
   —categoría, crítico, general— y le daba a cada una su `<ul>`. La de un
   crítico llegaba VACÍA, porque un crítico no tiene hijas, así que las dos
   páginas que más facturan salían como dos H2-enlace flotando sobre una lista
   vacía, y esta regla las envolvía en una franja tintada.

   Por qué ya no hace falta: la maqueta dibuja el catálogo como UNA grilla de
   tarjetas y el grupo viaja en el rótulo de cada una, así que un crítico es
   una tarjeta igual que las demás y no hay `<ul>` vacío que tapar. Ver el
   bloque «LOS TRES HUBS» más abajo.

   `:empty` SE QUEDA. `bloque__grilla` la siguen emitiendo otras plantillas y
   una grilla vacía no se dibuja en ninguna. */

.bloque__grilla:empty { display: none; }


/* ── Un encabezado que ES un enlace se dibuja como encabezado ─────────────
   `bloque__h2` y `geo__h2` llevan el enlace adentro del H2. Con el estilo de
   enlace del cuerpo salían naranjas y subrayados al tamaño de un título: se
   leía como un desperfecto de la página, no como el índice que son. */

.bloque__h2 a,
.geo__h2 a,
.criticos__item h3 a,
.cats__item h3 a {
  color: var(--piel-tinta);
  text-decoration: none;
}
.bloque__h2 a:hover,
.geo__h2 a:hover,
.criticos__item h3 a:hover,
.cats__item h3 a:hover { color: var(--piel-acento-oscuro); }


/* ── Las tres tarjetas de contacto ────────────────────────────────────────
   `.contacto__dato` es un `<a>` y sus tres partes son `<span>` y `<b>`: todo
   inline. La caja ya estaba escrita más arriba, pero sobre elementos inline
   el padding no empuja y los márgenes verticales no existen, así que rótulo,
   valor y pie salían en una sola línea desbordando la tarjeta. */

.contacto__dato { display: block; text-decoration: none; }
.contacto__rotulo,
.contacto__valor,
.contacto__pie { display: block; }

a.contacto__dato .contacto__valor { color: var(--piel-acento-oscuro); }
a.contacto__dato:hover { border-color: var(--piel-acento); }

/* `<address>` viene en itálica por el navegador, y el NAP no es una cita. */
.contacto__direccion { font-style: normal; }


/* ── ⚑ PROVISORIA · `proceso` cuando no son pasos numerados ───────────────
   Diez páginas de servicio traen un `<ol>` y esta banda las dibuja centradas.
   El Homepage y los dos críticos traen párrafos sueltos, y sin regla la prosa
   quedaba contra el borde izquierdo con media banda blanca vacía al lado. La
   composición de la banda es centrada: se centra el bloque, no el texto. */

.proceso__texto,
.proceso > p {
  max-width: 74ch;
  margin-inline: auto;
}
.proceso__texto p:last-child { margin-bottom: 0; }


/* ── ⚑ PROVISORIA · `costo` en el Homepage ────────────────────────────────
   Las páginas de servicio envuelven en `.costo__cuerpo` y reciben las dos
   columnas; el Homepage envuelve en `.costo__texto` y se quedaba en una sola
   de 74ch con media página al lado. Mismo tratamiento, sin la regla
   posicional del precio: esa vive en `costo__cuerpo` y ya se sabe frágil
   (§4 #176). */

.costo__texto {
  columns: 2;
  column-gap: 48px;
}
.costo__texto > * { break-inside: avoid; }
.costo__texto h3 { break-after: avoid; margin-top: 0; }
.costo__texto p { max-width: none; }
.costo__texto > p:first-child {
  column-span: all;
  text-align: center;
  max-width: 74ch;
  margin: 0 auto 28px;
}


/* ── ⚑ PROVISORIA · Los perfiles del pie de About ─────────────────────────
   `redes` publica una `<ul>` sin clase, así que caía en la viñeta del cuerpo:
   cinco enlaces subrayados en fila india. Son nombres sueltos, como las
   ciudades de `areas`, y llevan la misma píldora. */

/* ⚠ EL SELECTOR LLEVA `main` ADELANTE Y NO ES ADORNO. El `max-width: none` de
   acá abajo NO se estaba aplicando: `base.css` acota la lista con
   `main ul:not([class])`, que pesa (0,1,2), y `.redes ul` pesa (0,1,1). Los
   cinco perfiles quedaban dentro de 710px en vez de los 1240 de la columna, y
   con eso ningún centrado los alcanzaba. Medido el 2026-08-19 sobre el HTML
   publicado, al trasladar la maqueta de About. Con `main` adelante empatan en
   especificidad y gana ésta por orden de hoja. */
main .redes ul {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.redes ul li { margin: 0; }
.redes ul a {
  display: inline-block;
  background: var(--piel-tinte);
  color: var(--piel-acento-oscuro);
  border-radius: var(--piel-pildora);
  padding: 8px 16px;
  font-size: 14px;
  text-decoration: none;
}
.redes ul a:hover {
  background: var(--piel-acento-oscuro);
  color: var(--piel-claro);
}


/* ═════════════════════════════════════════════════════════════════════════
   /contact/ — molde `contacto/01-vitrina.html`
   ═════════════════════════════════════════════════════════════════════════

   TRASLADO 1 A 1 DEL 2026-08-19. Hasta hoy la página estaba vestida con OTRA
   maqueta del mismo proyecto —`Contacto Ficha`, trasladada el 2026-08-13— y
   por eso no se parecía a lo que el usuario tenía a la vista: índice lateral
   en la canaleta, hero de texto sobre papel y foto en el refuerzo. Nada de
   eso es de la Vitrina. Se bajó el archivo remoto con `DesignSync` y es
   idéntico byte a byte a `diseno/contacto/01-vitrina.html`, así que los
   valores de acá abajo salen del archivo, no de mirar la vista.

   EL GANCHO ES `p-contact`, la clase de página que `_base.html` empezó a
   emitir hoy. `t-utility` no servía: About es del mismo tipo y se comía todas
   estas reglas.

   LO QUE LA VITRINA HACE Y EL RESTO DEL SITIO NO:

     · el hero es UNA FOTO A SANGRE con el H1 encima, y el formulario al lado
     · la franja de confianza son cuatro cajas SUELTAS con gap, no una barra
     · cada sección abre con una PÍLDORA NUMERADA al lado del H2, en la misma
       línea de base — 01 REACH US · 02 COVERAGE · 03 COMPLIANCE · 04 FAQ
     · la prosa sale en TARJETAS, no en párrafos corridos
     · la FAQ es una grilla de dos tarjetas por fila, no una lista con reglas
     · el CTA es una caja ámbar REDONDEADA dentro del contenedor, no una
       franja a sangre centrada

   TRES COSAS SE APARTAN, Y ESTÁN ACÁ PARA QUE NO SE DESCUBRAN DE NUEVO:

     1. La sección de refuerzo lleva H2 y la maqueta no le pone ninguno. Esta
        página trae su `h2_refuerzo` escrito y aprobado; sacarlo es tirar copy
        del cliente para parecerse a un ejemplo de Davie. Va sin píldora, para
        no romper la numeración 01–04 que sí es de la maqueta.
     2. La maqueta trae 3 tarjetas de refuerzo, 2 de normativa y 5 fichas.
        Esta página trae 5, 3 y 6. Las grillas son `auto-fit`, así que el
        molde aguanta el número real. Lo que se traslada es la forma.
     3. La galería de trabajos y la línea legal del formulario no están en la
        maqueta. Las dos son del sitio —la galería está en las 19 páginas, el
        aviso legal lo pide `_componentes.html`— y se quedan. Si el operador
        quiere la página sin galería, es una línea menos en `contact.html`.


/* ── El ritmo: la maqueta separa sus secciones con 64px ───────────────── */

.p-contact main > section,
.p-contact main > div { padding-block: 64px 0 !important; }


/* ── La línea entre secciones ─────────────────────────────────────────────
   Pedido del operador el 2026-08-19. La maqueta separa sus secciones sólo
   con aire, y con seis bloques de tarjetas seguidos el aire no alcanza para
   decir dónde termina una y empieza la otra.

   NO LLEGA AL BORDE DE LA PANTALLA, y sale gratis: el `::before` vive dentro
   de la caja de padding de la sección, así que mide exactamente el ancho del
   contenedor y queda a plomo con los títulos y las tarjetas. Una regla a
   sangre habría necesitado sacarla del padding a mano.

   ES LA MISMA PIEZA QUE YA USAN `cuando`, `variantes`, `costo` y `opciones`
   en las páginas de servicio: 1px de `--piel-borde-fuerte` con 40px de aire
   abajo. No se inventa un separador nuevo para esta página.

   LA PRIMERA SECCIÓN NO LLEVA. Entre la franja de confianza y `01 · REACH US`
   no va línea: la franja son cuatro cajas oscuras y una regla pegada debajo
   se lee como subrayado de la franja, no como división. Las cajas ya cierran
   el hero por su cuenta.

   TAMPOCO LA FRASE DE VUELTA NI EL CTA: los dos son cajas con borde propio
   —tarjeta blanca y caja ámbar—, y una línea encima de una caja es un borde
   de más. */

.p-contact .areas::before,
.p-contact .refuerzo::before,
.p-contact .normativa::before,
.p-contact .faq::before,
.p-contact .galeria::before {
  content: "";
  display: block;
  height: 1px;
  background: var(--piel-borde-fuerte);
  margin: 0 0 40px;
}


/* ── El hero: foto a la izquierda con el título encima, formulario a la
      derecha ───────────────────────────────────────────────────────────

   `align-items: stretch` y las dos columnas iguales: la maqueta usa
   `repeat(auto-fit, minmax(440px,1fr))`, que en su contenedor da dos columnas
   parejas. Acá se escriben las dos columnas y el corte a una lo hace el único
   breakpoint de la hoja, que es la convención de este archivo.

   LA FOTO Y EL TEXTO COMPARTEN CELDA. Son dos hijos distintos del hero
   —`hero__figura` y `hero__texto`— y el parcial los emite en ese orden, así
   que sin `z-index` la foto taparía el texto. En grilla el `z-index` funciona
   sin `position`, que es lo que evita sacar el texto del flujo. */

/* EL AIRE DE ARRIBA ES 5% Y NO LOS 14px DE LA MAQUETA. Decisión del operador
   del 2026-08-19: en la maqueta la nav es una píldora flotante con 20px de
   respiro por fuera, y acá es una barra pegajosa a sangre, así que los mismos
   14px dejan la foto y la tarjeta pegadas al filo de la nav.

   PORCENTAJE Y NO PÍXELES, a pedido: un padding vertical en `%` se resuelve
   contra el ANCHO del contenedor, así que el respiro crece con la pantalla —
   40px a 1600, 32px a 1280, 12px en un teléfono— en vez de quedarse fijo.

   SE PROBÓ EN 5% Y SE BAJÓ A LA MITAD mirándolo: a 1600px eran 80px y el
   operador lo cortó en dos. */
.p-contact .hero {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
  align-items: stretch;
  padding-block: 2.5% 0 !important;
}

.p-contact .hero__figura {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  min-height: 600px;
  border-radius: 22px;
  overflow: hidden;
}

.p-contact .hero__figura img {
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  display: block;
}

/* El degradé de la maqueta, verbatim. Va en un pseudo y no en un `<div>`
   porque es decoración: no tiene por qué existir en el DOM. */
.p-contact .hero__figura::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(20, 16, 12, 0.72) 0%,
              rgba(20, 16, 12, 0.60) 45%,
              rgba(20, 16, 12, 0.90) 100%);
}

/* `align-self: end` es el `align-items: flex-end` del original: el bloque de
   texto se apoya en el borde de abajo de la foto.

   EL 34ch VA EN EL TÍTULO Y LA BAJADA, NO EN EL BLOQUE ENTERO. La maqueta se
   lo pone al envoltorio, y así se probó primero: con el CTA de este cliente
   —"Get a Free In-Home Estimate", bastante más largo que el "Call (786)…" del
   ejemplo— los dos botones no entran en 34ch y se apilan uno sobre otro. La
   fila de botones de la maqueta es una fila, así que el límite se aplica
   donde de verdad importa, que es la medida de lectura. */
.p-contact .hero__texto {
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
  align-self: end;
  padding: 44px 42px;
  gap: 18px;
}

.p-contact .hero__h1,
.p-contact .hero__sub { max-width: 34ch; }

.p-contact .hero__rotulo {
  color: var(--piel-blanco);
  background: rgba(192, 122, 58, 0.92);
  padding: 7px 14px;
}

.p-contact .hero__h1 {
  font-size: clamp(30px, 3.4vw, 48px);
  line-height: 1.04;
  letter-spacing: -0.032em;
  color: var(--piel-claro);
}

/* La maqueta pone acá `#ddd6ca`, que no es un token de la paleta. Va con
   `--piel-claro-3` (#cfc7ba), cuyo papel declarado es exactamente éste
   —prosa sobre banda oscura—, medido en contraste.md y un punto MÁS claro de
   contraste. Es la misma decisión que ya se tomó con el `#d99a5c` del rótulo
   de la banda oscura del Home. */
.p-contact .hero__sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--piel-claro-3);
}

/* El botón fantasma va sobre la foto: borde y texto claros, y al pasar por
   encima se invierte. El `.btn--secundario` del resto del sitio está pensado
   sobre papel y acá desaparecería. */
.p-contact .hero__acciones .btn--secundario {
  color: var(--piel-claro);
  border-color: rgba(251, 249, 245, 0.5);
}
.p-contact .hero__acciones .btn--secundario:hover {
  background: var(--piel-claro);
  color: var(--piel-tinta);
}


/* ── El formulario, en la columna derecha ─────────────────────────────── */

.p-contact .hero__form { grid-column: 2; grid-row: 1; }

.p-contact .hero__form .form {
  height: 100%;
  border-radius: 22px;
  padding: 36px 34px !important;
}

.p-contact .hero__form .form__h2 {
  margin: 0 0 6px;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.025em;
}
.p-contact .hero__form .form__nota {
  margin: 0 0 18px;
  font-size: 14px;
  color: var(--piel-tenue);
}

/* DOS COLUMNAS, y sólo los dos primeros campos las usan. Name y Phone van
   lado a lado; correo, dirección, el mensaje, el aviso legal y el botón
   cruzan la grilla entera, igual que en la maqueta. `nth-of-type` cuenta
   `<label>` y los ocultos del servicio de formularios no cuentan: el
   navegador les da `display:none` en su propia hoja. */
.p-contact .form__campos {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 14px;
}
.p-contact .form__campos > * { grid-column: 1 / -1; min-width: 0; }
.p-contact .form__campos > label:nth-of-type(1),
.p-contact .form__campos > label:nth-of-type(2) { grid-column: auto; }

/* El label queda de BLOQUE y no en flex column: la etiqueta `optional` es un
   `<span>` inline al lado del texto, y en flex column se iría a su propio
   renglón. */
.p-contact .form__campos label {
  display: block;
  margin: 0;
  font-size: 13px;
}

/* `min-width: 0` está en la maqueta y no es adorno: un `<input>` trae del
   navegador un ancho mínimo de unos 180px, y en una grilla el ítem no baja de
   su min-content aunque la pista sea `minmax(0,1fr)`. Sin esto, los dos
   campos de arriba desbordan la tarjeta en móvil y el formulario se sale de
   la pantalla. Medido a 430px. */
.p-contact .form__campos input,
.p-contact .form__campos textarea {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
  margin: 6px 0 0;
  padding: 13px 16px;
  border-color: var(--piel-borde);
  font-size: 15px;
}

.p-contact .form__legal { margin: 2px 0 0; }
.p-contact .form__campos .btn--primario { padding: 16px 30px; }


/* ── La franja de confianza: cuatro cajas sueltas ─────────────────────────
   La maqueta de servicio la dibuja como UNA barra oscura continua con
   separadores, y así está escrita más arriba. La Vitrina la parte en cuatro
   cajas con 12px de aire y esquinas de 16px. Es el mismo contenido y otra
   forma, así que se pisa acá y no allá. */

.p-contact .trust { padding-block: 14px 0 !important; }

.p-contact .trust__lista {
  background: none;
  overflow: visible;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}

.p-contact .trust__item {
  background: var(--piel-profunda);
  border-right: 0;
  border-radius: 16px;
  padding: 20px 22px;
}


/* ── La cabecera de sección: píldora numerada y H2 en la misma línea ──── */

.p-contact .contacto__cabecera,
.p-contact .areas__cabecera,
.p-contact .normativa__cabecera,
.p-contact .faq__cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 18px;
}

.p-contact .contacto__rotulo-seccion,
.p-contact .areas__rotulo,
.p-contact .normativa__rotulo,
.p-contact .faq__rotulo {
  margin: 0;
  max-width: none;
  font-family: var(--piel-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-blanco);
  background: var(--piel-acento);
  padding: 6px 12px;
  border-radius: var(--piel-pildora);
}

.p-contact .contacto__h2,
.p-contact .areas__h2,
.p-contact .normativa__h2,
.p-contact .faq__h2,
.p-contact .refuerzo__h2 {
  margin: 0;
  max-width: none;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.025em;
  text-align: left;
}


/* ── 01 · Las tres fichas de contacto ─────────────────────────────────────
   La del teléfono va TINTADA y las otras dos blancas, que es la jerarquía de
   la maqueta: en este rubro la llamada es la conversión. El valor va en
   tinta y no en ámbar aunque la ficha entera sea un enlace — el ámbar de
   `a.contacto__dato .contacto__valor` es de la piel vieja. */

.p-contact .contacto__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 14px;
  margin-bottom: 0;
}

.p-contact .contacto__dato { padding: 26px 28px; }

.p-contact .contacto__dato--tel {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
}

.p-contact .contacto__rotulo {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.1em;
}
.p-contact .contacto__dato--tel .contacto__rotulo { color: var(--piel-acento-oscuro); }

.p-contact a.contacto__dato .contacto__valor,
.p-contact .contacto__valor {
  font-size: 26px;
  letter-spacing: -0.02em;
  color: var(--piel-tinta);
}
.p-contact .contacto__valor--email {
  font-size: 17px;
  letter-spacing: -0.01em;
  word-break: break-all;
}
.p-contact .contacto__direccion {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.45;
}

.p-contact .contacto__pie { margin: 4px 0 0; }
.p-contact .contacto__dato--tel .contacto__pie { color: var(--piel-tenue-baja); }


/* ── 02 · Las ciudades ────────────────────────────────────────────────────
   Píldora BLANCA con borde, no tintada. ⚠ El comentario de `area` en el
   bloque del Homepage dice lo contrario —"la tintada es la de contact"—:
   era cierto con el molde `Ficha` y dejó de serlo hoy. Queda corregido allá. */

.p-contact .areas__lista { gap: 8px; margin-bottom: 0; }

.p-contact .areas__lista li {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  padding: 11px 20px;
}

.p-contact .areas p { margin: 18px 0 0; }


/* ── El refuerzo: la prosa en tarjetas ────────────────────────────────────
   Cada `<p>` de la sección es una tarjeta de la grilla y la ÚLTIMA va
   tintada, que es donde la maqueta pone la que lleva la cita saliente. Es la
   misma regla que ya usa `why` en el Homepage, y por el mismo motivo: la
   maqueta la elige por contenido y acá se toma la que cierra.

   `> p` y no `p`: el rótulo de las secciones que tienen cabecera también es
   un `<p>`, y sin el hijo directo se convertiría en tarjeta. */

/* TRES COLUMNAS, que es lo que se VE en la maqueta. Su declaración es
   `minmax(300px,1fr)`, que en un contenedor de 1.280px daría cuatro; ahí no
   se nota porque trae exactamente tres tarjetas. Con las cinco de esta
   página, cuatro columnas dejan la quinta sola en una fila de un cuarto de
   ancho. A 340px la grilla da tres y las cinco salen 3 + 2. */
.p-contact .refuerzo__texto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 14px;
  align-items: stretch;
}

.p-contact .refuerzo__h2 {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}

.p-contact .refuerzo__texto > p {
  margin: 0;
  max-width: none;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: 18px;
  padding: 28px 30px;
}

.p-contact .refuerzo__texto > p:last-of-type {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
  color: var(--piel-tinta);
}


/* ── 03 · Normativa: la prosa en tarjetas, las fichas debajo ───────────── */

.p-contact .normativa__texto {
  text-align: left;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 14px;
  align-items: stretch;
  margin-bottom: 14px;
}

.p-contact .normativa__cabecera { grid-column: 1 / -1; }

.p-contact .normativa__texto > p {
  margin: 0;
  max-width: none;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: 18px;
  padding: 28px 30px;
}


/* ── 04 · La FAQ: grilla de tarjetas ──────────────────────────────────────
   Sale de la lista con reglas horizontales y pasa a dos tarjetas por fila.
   El `+`/`–` del acordeón se queda: es la única señal de que la tarjeta se
   abre, y la maqueta no la tiene porque su `<summary>` no se ve cerrado en
   una captura. */

.p-contact .faq__lista {
  max-width: none;
  margin: 0;
  border-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr));
  gap: 14px;
  align-items: start;
}

.p-contact .faq__item {
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: 18px;
  padding: 24px 26px;
}

.p-contact .faq__pregunta { font-size: 17px; }
.p-contact .faq__respuesta { margin: 12px 0 0; max-width: none; }


/* ── La frase de vuelta: la tarjeta blanca del final ──────────────────────
   La maqueta la mete DENTRO de la sección de FAQ, pegada a la grilla. Acá
   queda después de la galería porque la galería no existe en la maqueta y su
   posición está decidida en `_componentes.html` por otro motivo. Lo que se
   traslada es la forma: tarjeta blanca, no franja con reglas.

   La caja va en el `<p>` y no en el `.vuelta`: el div es el que lleva el
   padding del contenedor, así que un fondo ahí llegaría a los dos bordes de
   la pantalla. */

.p-contact .vuelta {
  border: 0;
  margin-top: 0 !important;
  padding-block: 64px 0 !important;
}

.p-contact .vuelta p {
  max-width: none;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: 18px;
  padding: 24px 28px;
}


/* ── El CTA: caja ámbar redondeada, texto a la izquierda ──────────────────
   En el resto del sitio es una franja a sangre y centrada. Acá es una caja
   de 22px de radio DENTRO del contenedor, con el texto a la izquierda y el
   botón contra el borde derecho.

   EL CENTRADO PASA DE `padding` A `margin`. La regla de `main > section` deja
   el fondo llegando a los dos bordes de la pantalla, que es lo que quieren
   `proceso`, `why` y el CTA del resto del sitio. Para que el ámbar sea una
   caja hay que correr el mismo cálculo al margen: el porcentaje se resuelve
   contra el ancho de `main`, igual que el del padding. */

/* EL 64px DE ABAJO NO ES SIMETRÍA: en el resto del sitio el CTA es una franja
   a sangre y pega con el pie a propósito. Acá es una caja redondeada, y una
   caja redondeada apoyada contra la losa oscura del pie se lee como un error
   de recorte. La maqueta separa las dos con 64px y por eso van. */
.p-contact .cta {
  margin: 64px max(var(--piel-borde-lat),
                   calc((100% - var(--piel-ancho)) / 2)) 64px !important;
  padding: 52px 44px !important;
  border-radius: 22px;
  justify-content: space-between;
  text-align: left;
  gap: 28px;
}

.p-contact .cta__texto-bloque {
  align-items: flex-start;
  max-width: 52ch;
}

.p-contact .cta__h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.12;
}


/* ═══════════════════════════════════════════════════════════════════════════
   LOS TRES HUBS — traslado 1 a 1 de diseno/hub/01-cinta.html

   `/services/`, `/locations/` y `/resources/` se visten con la MISMA maqueta.
   Decisión del usuario del 2026-08-19: "los otros dos hubs usarlo igual, donde
   van los service irían las páginas de locations y en resources los resources,
   así como están los cards en services".

   Es el molde correcto para los tres porque los tres son la misma página con
   otro inventario: un índice que no argumenta nada, cuya única razón de existir
   son los enlaces internos que reparte. Por eso además ninguno lleva citas
   salientes (regla dura, `verificar.py` B7 no les exige nada).

   ═══ QUÉ CAMBIA CONTRA EL MOLDE DE SERVICIO ═══ que es con el que estaban
   vestidos hasta hoy, y no es una variante: es otra composición.

     · el hero va CENTRADO y la foto DEBAJO, a 21:9 y a todo el ancho. El de
       servicio es texto-izquierda / foto-derecha a 4:5.
     · la franja de confianza va A SANGRE y sin radio.
     · cada sección abre con un rótulo mono numerado —"01 · WHERE TO START"— y
       el ritmo de superficies alterna papel / blanco, con UNA banda oscura
       antes del FAQ.
     · el catálogo es una GRILLA DE TARJETAS CON FOTO, no una lista de enlaces
       con resumen. El grupo de cada tarjeta va en su rótulo mono.
     · la FAQ numera las preguntas y no lleva el `+` del acordeón.
     · el CTA es a dos columnas —título a la izquierda, texto y botón a la
       derecha— y no la franja centrada del resto del sitio.

   ⚠ TRES COSAS QUE LA MAQUETA NO DECIDE Y ESTÁN ACÁ IGUAL, anotadas para que
   no se lean como parte del traslado:

     1 · LA GALERÍA. No existe en la maqueta. Va porque "en TODAS las páginas"
         es decisión del operador del 2026-08-13, anterior a esta importación, y
         la maqueta no la contradice: no hay sección suya que ésta desplace.
         Se pinta sobre la misma banda blanca del FAQ, que es lo que sigue.
     2 · EL ANCHO DEL HERO. La maqueta lo acota a 1240 como todo lo demás; acá
         va a `--piel-ancho-banda` porque el operador ensanchó esa franja el
         2026-08-19, después de la maqueta. Se respeta la decisión más nueva.
     3 · LA APERTURA CON FOTO. En la maqueta va centrada y sin figura, y así
         sale /services/. `/locations/` y `/resources/` tienen su slot de foto
         lleno, y vaciarlo para parecerse a la maqueta perdería una imagen que
         el operador colocó: esas dos quedan a dos columnas, que es otra
         composición del mismo molde.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El selector se repite tres veces en cada regla y no hay forma de acortarlo
   sin `:is()`, que acá se evita a propósito: `verificar.py` C7 lee los
   selectores con expresiones regulares para saber qué secciones nombra la
   piel, y un `:is()` le esconde las tres clases adentro de un paréntesis. */


/* ── Los H3 del molde van en 700 ─────────────────────────────────────────
   La hoja dibuja `h3` en 600, que es el peso del molde de servicio. En la
   maqueta de hub los tres H3 del cuerpo —las dos preguntas, las dos columnas
   del alcance y el de la banda oscura— son 700, y a 27 y 34 px la diferencia
   entre 600 y 700 se ve. Medido contra la maqueta el 2026-08-19 con sus
   fuentes servidas: 700 en las tres, 600 acá. */

.t-services_hub .preguntas h3,
.t-services_hub .alcance h3,
.t-services_hub .contra h3 { font-weight: 700; }


/* ── El hero: centrado, y la foto debajo ─────────────────────────────────
   Maqueta línea 50: `padding:52px 32px 0; display:flex; flex-direction:column;
   align-items:center; text-align:center; gap:18px`. */

.t-services_hub .hero,
.t-locations_hub .hero,
.t-resources_hub .hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 18px;
  padding-block: 52px 0 !important;
}

.t-services_hub .hero__texto,
.t-locations_hub .hero__texto,
.t-resources_hub .hero__texto { align-items: center; gap: 18px; width: 100%; }

/* La píldora mono deja de estar pegada a la izquierda: en un hero centrado va
   centrada, y `align-self` es lo único que la sujetaba al borde. */
.t-services_hub .hero__rotulo,
.t-locations_hub .hero__rotulo,
.t-resources_hub .hero__rotulo { align-self: center; }

.t-services_hub .hero__h1,
.t-locations_hub .hero__h1,
.t-resources_hub .hero__h1 {
  font-size: clamp(30px, 4vw, 52px);
  line-height: 1.02;
  letter-spacing: -0.033em;
  max-width: 22ch;
  text-wrap: pretty;
}

/* La bajada del hub es DISPLAY, no cuerpo: Manrope 500 hasta 19px, 76ch. */
.t-services_hub .hero__sub,
.t-locations_hub .hero__sub,
.t-resources_hub .hero__sub {
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  letter-spacing: -0.012em;
  color: var(--piel-tinta);
  max-width: 76ch;
}

.t-services_hub .hero__acciones,
.t-locations_hub .hero__acciones,
.t-resources_hub .hero__acciones { justify-content: center; }

/* Maqueta línea 60: `margin:32px auto 0` y el hueco a `aspect-ratio:21/9;
   max-height:36vh; border-radius:20px`. El `max-height` NO es decorativo: sin
   él, a 1472 px de ancho una imagen 21:9 mide 630 px de alto y se come la
   primera pantalla entera. */
.t-services_hub .hero__figura,
.t-locations_hub .hero__figura,
.t-resources_hub .hero__figura { width: 100%; margin: 14px 0 0; }

.t-services_hub .hero__figura img,
.t-locations_hub .hero__figura img,
.t-resources_hub .hero__figura img {
  width: 100%;
  aspect-ratio: 21 / 9;
  max-height: 36vh;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}


/* ── La franja de confianza ─────────────────────────────────────────────
   Maqueta línea 66: `margin-top:32px; background:#221c16`, grilla auto-fit de
   230px, SIN radio y SIN contenedor — a sangre.

   ⚠ ACÁ SE APARTA DEL MOLDE, y es la MISMA corrección que el Homepage recibió
   el 2026-08-19 unas horas antes: la franja se acota y lleva radio. Los tres
   hubs habían quedado con la versión a sangre —`border-radius: 0` y márgenes
   negativos que cancelaban el padding del contenedor— y el operador lo vio
   navegando: *«el strip de los hubs en el hero debe tener los bordes
   redondos»*.

   EL MOTIVO ES EL DEL HOMEPAGE, palabra por palabra: con los dos bordes
   tocando la pantalla la franja se lee como una banda SEPARADORA entre el hero
   y lo que sigue, no como el último renglón del hero. Con el radio grande
   —el mismo de la foto 21:9 de arriba— cierra la composición.

   NO HACE FALTA FIJAR NINGÚN ANCHO: alcanza con sacar el margen negativo. El
   padding que `.hero, .trust` ya declaran usa `--piel-ancho-banda`, así que la
   franja queda exactamente del ancho del hero y a plomo con su figura.

   Para volver al molde: reponer el `margin-inline` negativo y el radio en 0. */

.t-services_hub .trust,
.t-locations_hub .trust,
.t-resources_hub .trust { padding-block: 32px 0 !important; }

.t-services_hub .trust__lista,
.t-locations_hub .trust__lista,
.t-resources_hub .trust__lista { border-radius: var(--piel-radio-gr); }

.t-services_hub .trust__item,
.t-locations_hub .trust__item,
.t-resources_hub .trust__item {
  padding: 16px 24px;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}


/* ── El rótulo mono de sección ───────────────────────────────────────────
   Maqueta: `font-size:11px; letter-spacing:0.1em; color:#c07a3a`, encima de un
   H2 centrado y separado 8px. Es la pieza que le da el ritmo numerado a la
   página —01, 02, 03— y la que más se nota si falta.

   El texto se escribe en el .md con su ordinal ("01 · Where to start") y en
   minúscula: la caja alta la pone el CSS, igual que en el resto de la hoja. */

.t-services_hub .apertura__rotulo,
.t-locations_hub .apertura__rotulo,
.t-resources_hub .apertura__rotulo,
.t-services_hub .catalogo__eyebrow,
.t-locations_hub .catalogo__eyebrow,
.t-resources_hub .catalogo__eyebrow,
.t-locations_hub .hub-ciudad__rotulo,
.t-services_hub .faq__rotulo,
.t-locations_hub .faq__rotulo,
.t-resources_hub .faq__rotulo {
  font-family: var(--piel-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--piel-acento);
  margin: 0 0 8px;
  max-width: none;
}

/* ⚠ Y ESTA REPETICIÓN ES LA QUE HACE QUE SE VEA. El rótulo de la apertura es un
   `<p>` y va antes del H2, así que es el `p:first-of-type` del envoltorio — y
   la hoja ya tiene ahí la regla del LEAD, `.apertura__texto > p:first-of-type`,
   que pesa (0,2,1) contra los (0,2,0) del selector de arriba y le gana aunque
   esté 2.500 líneas antes. El resultado era el rótulo publicado en Manrope 27px
   como si fuera la bajada de la sección.

   No alcanza con reordenar: la especificidad no la arregla el orden. Se le suma
   el elemento y el envoltorio —(0,3,1)— y ahí sí. Vale para los tres hubs
   porque los tres emiten el mismo `<p>` en el mismo lugar. */
.t-services_hub .apertura__texto > p.apertura__rotulo,
.t-resources_hub .apertura__texto > p.apertura__rotulo,
.t-locations_hub .hub-intro__texto > p.apertura__rotulo {
  font-family: var(--piel-mono);
  font-weight: 400;
  font-size: 11px;
  line-height: 1.72;
  letter-spacing: 0.1em;
  color: var(--piel-acento);
  max-width: none;
}


/* ── 01 · La apertura ────────────────────────────────────────────────────
   Maqueta línea 73: papel, `padding:72px 32px`, cabecera centrada y el cuerpo
   centrado también — párrafo a 76ch y el lead a 60ch en Manrope 600.

   SÓLO CENTRADA CUANDO NO HAY FIGURA. Con foto —que es el caso de
   `/resources/`— la sección se queda en la composición de dos columnas que ya
   está escrita más arriba: centrar el texto de una columna contra una foto al
   lado se lee como un desperfecto. */

.t-services_hub .apertura,
.t-locations_hub .apertura,
.t-resources_hub .apertura,
.t-locations_hub .hub-intro {
  background: var(--piel-papel);
  padding-block: 72px !important;
}

.t-services_hub .apertura:not(:has(figure)),
.t-locations_hub .apertura:not(:has(figure)),
.t-resources_hub .apertura:not(:has(figure)),
.t-locations_hub .hub-intro:not(:has(figure)) { text-align: center; }

.t-services_hub .apertura:not(:has(figure)) .apertura__texto,
.t-locations_hub .apertura:not(:has(figure)) .apertura__texto,
.t-resources_hub .apertura:not(:has(figure)) .apertura__texto,
.t-locations_hub .hub-intro:not(:has(figure)) .hub-intro__texto {
  align-items: center;
  gap: 20px;
  max-width: none;
}

.t-services_hub .apertura__h2,
.t-locations_hub .apertura__h2,
.t-resources_hub .apertura__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  max-width: 26ch;
  margin: 0 0 26px;
}

.t-services_hub .apertura:not(:has(figure)) .apertura__h2,
.t-locations_hub .hub-intro:not(:has(figure)) .apertura__h2 { margin-inline: auto; }

/* El primer párrafo del hub NO es el lead grande de la página de servicio: acá
   el lead es el ÚLTIMO párrafo, la frase que cierra la apertura ("Two questions
   sort the whole list"). Se apaga el que trae la regla compartida y se enciende
   el que pide la maqueta.

   ⚠ `:not(.apertura__rotulo)` NO ES DECORATIVO, y la primera versión no lo
   tenía. El rótulo mono es un `<p>` y va ANTES del H2, así que ES el
   `p:first-of-type` del envoltorio: la regla que apagaba el lead se lo comía
   entero y lo devolvía a 16px en IBM Plex Sans gris — el rótulo naranja de la
   sección simplemente no existía. No se veía leyendo el CSS; lo cazó medir los
   estilos computados de las dos páginas lado a lado. Por lo mismo la regla ya
   no depende de `:first-of-type`: vale para TODOS los párrafos de prosa, y el
   lead lo elige `:last-child` más abajo. */
.t-services_hub .apertura:not(:has(figure)) .apertura__texto > p:not(.apertura__rotulo),
.t-locations_hub .hub-intro:not(:has(figure)) .hub-intro__texto > p:not(.apertura__rotulo) {
  font-family: var(--piel-cuerpo);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.72;
  letter-spacing: normal;
  color: var(--piel-texto);
  max-width: 76ch;
  margin-inline: auto;
}

.t-services_hub .apertura:not(:has(figure)) .apertura__texto > p:last-child,
.t-locations_hub .hub-intro:not(:has(figure)) .hub-intro__texto > p:last-child {
  margin-inline: auto;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--piel-tinta);
  max-width: 60ch;
}


/* ── Las dos preguntas — zigzag sobre blanco ─────────────────────────────
   Maqueta línea 86: `background:#fff`, filete arriba y abajo, `padding:72px`,
   y las dos filas a `minmax(0,1fr) minmax(0,380px)` con 44px de separación. La
   segunda fila invierte las pistas, no el orden. */

.t-services_hub .preguntas {
  background: var(--piel-blanco);
  border-top: 1px solid var(--piel-borde);
  border-bottom: 1px solid var(--piel-borde);
  padding-block: 72px !important;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.t-services_hub .preguntas__fila {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 44px;
  align-items: center;
}
.t-services_hub .preguntas__fila--inv {
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
}

/* Sin figura la fila es una sola columna, y no media fila vacía. */
.t-services_hub .preguntas__fila:not(:has(figure)) { display: block; }

.t-services_hub .preguntas__texto {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.t-services_hub .preguntas__texto p { margin: 0; max-width: none; }

.t-services_hub .preguntas h3 {
  font-size: clamp(22px, 2.3vw, 29px);
  line-height: 1.15;
  letter-spacing: -0.022em;
  margin: 0;
}

/* La frase que cierra la segunda pregunta va en display, como el lead. */
.t-services_hub .preguntas__fila--inv .preguntas__texto > p:last-child {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.45;
  color: var(--piel-tinta);
}

.t-services_hub .preguntas__figura { margin: 0; }
.t-services_hub .preguntas__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── Las cuatro combinaciones — tarjetas ─────────────────────────────────
   Maqueta línea 111: papel, grilla auto-fit de 280px con 16px de separación, y
   cada tarjeta blanca con borde, radio 18 y `padding:28px 30px`.

   LA LETRA DE CADA TARJETA LA CUENTA EL CSS. En la maqueta es un `<span>`
   escrito a mano con la letra adentro; acá el copy es prosa —cuatro párrafos
   con entradilla en negrita— y meter la letra en el .md sería marcado
   disfrazado de contenido. Un `counter` con `upper-alpha` da A, B, C, D y
   sigue dando la letra correcta el día que se agregue o se saque una.

   `p:has(strong)` SEPARA LAS TARJETAS DEL CIERRE. El quinto párrafo no lleva
   entradilla y por eso no es tarjeta: cruza la grilla entera y va centrado,
   que es exactamente lo que hace la maqueta con él (línea 134). */

.t-services_hub .combinaciones {
  background: var(--piel-papel);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
  align-items: stretch;
  counter-reset: combi;
}

.t-services_hub .combinaciones p:has(strong) {
  counter-increment: combi;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 28px 30px;
  margin: 0;
  max-width: none;
  font-size: 15px;
}

.t-services_hub .combinaciones p:has(strong)::before {
  content: counter(combi, upper-alpha);
  display: inline-block;
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--piel-blanco);
  background: var(--piel-acento);
  padding: 6px 12px;
  border-radius: var(--piel-pildora);
  margin-bottom: 10px;
}

/* La entradilla es el título de la tarjeta, así que ocupa su propia línea.
   `display:block` sobre un elemento en línea es CSS legal y no cambia el HTML:
   el `<strong>` sigue siendo contenido de frase dentro del `<p>`. */
/* SIN `line-height` PROPIO, y es lo que dice la maqueta aunque no lo declare:
   su `<b>` no trae ninguno y hereda el 1.72 del cuerpo. Medido, 32.68px contra
   los 23.75 que daba fijarlo en 1.25. Se nota sólo cuando el título entra en
   dos líneas, que es la mitad de las tarjetas. */
.t-services_hub .combinaciones p strong {
  display: block;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 19px;
  line-height: inherit;
  letter-spacing: -0.015em;
  color: var(--piel-tinta);
  margin-bottom: 10px;
}

/* La cuarta va tintada — maqueta línea 128. Es `:nth-of-type(4)` DENTRO de una
   sección, no sobre los hijos de `main`: lo que C7 mide es lo segundo. */
.t-services_hub .combinaciones p:has(strong):nth-of-type(4) {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
  color: var(--piel-tinta);
}
.t-services_hub .combinaciones p:has(strong):nth-of-type(4)::before {
  background: var(--piel-acento-oscuro);
}

.t-services_hub .combinaciones p:not(:has(strong)) {
  grid-column: 1 / -1;
  text-align: center;
  margin: 10px 0 0;
  max-width: none;
}


/* ── 02 · El catálogo — la grilla de tarjetas de los tres hubs ───────────
   Maqueta línea 137: blanco con filete arriba y abajo, cabecera centrada, y la
   grilla a `repeat(auto-fit, minmax(300px,1fr))` con 16px.

   `.geo` y `.bloque` son las secciones equivalentes en los otros dos hubs, y
   reciben lo mismo. En /locations/ y /resources/ hay VARIAS seguidas —una por
   página de dinero— así que sólo la primera y la última llevan filete; entre
   ellas una línea sola alcanza. */

.t-services_hub .catalogo,
.t-locations_hub .geo,
.t-locations_hub .locations,
.t-resources_hub .bloque {
  background: var(--piel-blanco);
  padding-block: 72px !important;
}

.t-locations_hub .geo,
.t-locations_hub .locations,
.t-resources_hub .bloque { padding-block: 48px !important; }

.t-services_hub .catalogo,
.t-locations_hub .geo:first-of-type,
.t-locations_hub .locations:first-of-type,
.t-resources_hub .bloque:first-of-type { border-top: 1px solid var(--piel-borde); padding-top: 72px !important; }

.t-services_hub .catalogo,
.t-locations_hub .geo:last-of-type,
.t-locations_hub .locations:last-of-type,
.t-resources_hub .bloque:last-of-type { border-bottom: 1px solid var(--piel-borde); padding-bottom: 72px !important; }

.catalogo__cabecera {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  margin-bottom: 34px;
}

.t-services_hub .catalogo__h2,
.t-locations_hub .geo__h2,
.t-locations_hub .locations__h2,
.t-resources_hub .bloque__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0;
  max-width: 26ch;
  text-align: center;
}

/* ── La tarjeta ──────────────────────────────────────────────────────────
   Maqueta línea 144: fondo papel dentro de la sección blanca, borde, radio 18
   y `overflow:hidden` para que la foto respete la esquina. La tarjeta ENTERA
   es el enlace, así que el hover va sobre el `<a>` y no sobre el `<li>`. */

/* 320 Y NO LOS 300 DE LA MAQUETA, y es aritmética, no gusto. Lo que la maqueta
   fija de verdad es el RESULTADO —tres columnas en escritorio— y ese número
   sale de su contenedor de 1240: con 300, cuatro columnas piden 1.248 px y no
   entran. Este sitio mide 1280 (ver `--piel-ancho`), así que con 300 entran
   cuatro y la grilla se lee distinta. Medido a 1440 contra la maqueta el
   2026-08-19: ella 3 columnas, ésta 4. Con 320, cuatro piden 1.328 y vuelven a
   no entrar. Es el mismo criterio con el otro ancho. */
.catalogo__grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: none;
}

/* ⚠ LA CAJA DE LA TARJETA SE MUDÓ DEL <a> AL <li> — 2026-08-20. El enlace ahora
   envuelve SOLO el nombre, para que el ancla sea el nombre (ver el comentario
   del parcial `catalogo_grilla`), así que el `<a>` ya no puede ser la caja. Lo
   único que cambia acá es el selector: las declaraciones son las mismas.

   `overflow: hidden` sigue recortando la foto contra el radio, y `height: 100%`
   sigue emparejando las alturas de una fila. */
.catalogo__item {
  margin: 0;
  position: relative;          /* ancla del rectángulo estirado de abajo */
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--piel-papel);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  overflow: hidden;
  transition: border-color .15s ease, background .15s ease;
}
/* El hover es del ÍTEM y se dispara desde cualquier punto de la tarjeta, igual
   que antes; `:focus-within` lo suma para el teclado, que antes venía gratis
   porque el `<a>` era la caja y hoy hay que pedirlo. */
.catalogo__item:hover,
.catalogo__item:focus-within {
  border-color: var(--piel-acento);
  background: var(--piel-tinte);
}

/* ── EL ENLACE ESTIRADO ────────────────────────────────────────────────────
   El `<a>` es de texto y el `::after` le presta el área de la tarjeta entera:
   mismo objetivo táctil que cuando la tarjeta era el enlace, con un solo `<a>`
   en el DOM. El pseudo va por ENCIMA del contenido (`z-index: 1`) pero la foto
   y el texto no son interactivos, así que no tapa nada clickeable. */
.catalogo__enlace {
  text-decoration: none;
  color: inherit;
}
.catalogo__enlace::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
/* El foco se dibuja sobre la TARJETA, no sobre las dos líneas del nombre: el
   objetivo real es la tarjeta y un anillo que rodee sólo el texto miente sobre
   qué se va a activar con Enter. */
.catalogo__enlace:focus-visible { outline: none; }
.catalogo__item:has(.catalogo__enlace:focus-visible) {
  outline: 2px solid var(--piel-acento-oscuro);   /* el mismo anillo del `:focus-visible` global, línea 286 */
  outline-offset: 2px;
}

.catalogo__img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

.catalogo__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 24px;
}

/* El rótulo de la TARJETA es más chico que el de la sección: 10px contra 11, y
   en la acento oscura porque va sobre papel y no sobre blanco. */
.catalogo__rotulo {
  font-family: var(--piel-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--piel-acento-oscuro);
}

/* `line-height` HEREDADO, igual que en la maqueta: su `<b>` no declara ninguno
   y toma el 1.72 del cuerpo. Acá se nota más que en la maqueta porque estos
   títulos son el H1 del destino —con ciudad y estado, que es lo que pide el
   modelo— y entran en dos líneas casi siempre. */
.catalogo__nombre {
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 19px;
  line-height: inherit;
  letter-spacing: -0.015em;
  color: var(--piel-tinta);
}

.catalogo__ver {
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: 14px;
  color: var(--piel-acento-oscuro);
  margin-top: auto;
  padding-top: 4px;
}

.catalogo__pendiente {
  text-align: center;
  color: var(--piel-tenue);
  font-size: 15px;
  margin: 0 auto;
  max-width: 60ch;
}


/* ── El alcance — dos columnas de prosa ──────────────────────────────────
   Maqueta línea 228: papel, `repeat(auto-fit,minmax(340px,1fr))` con `32px
   48px` de separación y las columnas alineadas ARRIBA, no al centro. */

.t-services_hub .alcance {
  background: var(--piel-papel);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px 48px;
  align-items: start;
}

.t-services_hub .alcance__col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.t-services_hub .alcance__col p { margin: 0; max-width: none; }

.t-services_hub .alcance h3 {
  font-size: clamp(21px, 2.1vw, 27px);
  line-height: 1.18;
  letter-spacing: -0.022em;
  margin: 0;
}

/* El último párrafo de la segunda columna es el recuadro tintado — maqueta
   línea 238. Se escribe como párrafo normal y lo pinta esto. */
.t-services_hub .alcance__col--2 > p:last-child {
  background: var(--piel-tinte);
  border: 1px solid #e3d3bf;
  border-radius: var(--piel-radio);
  padding: 22px 26px;
  color: var(--piel-tinta);
}


/* ── `hub-ciudad` cierra con el mismo aire con el que abre ───────────────
   `03 · What is different here` / «Working in Boca Raton Itself» es la ÚNICA
   sección de los tres hubs con el padding asimétrico que trae el default del
   contenedor: `56px 0`. Medido el 2026-08-19 sobre el HTML publicado — todas
   sus vecinas son simétricas (`hub-intro` 72/72, `geo` 48/48, `hub-cobertura`
   72/72), y las de `/services/` y `/resources/` también.

   NO SE VE EN LAS DEMÁS PORQUE EL FONDO NO CAMBIA. El ritmo del sitio confía
   en el padding SUPERIOR de la sección siguiente para separar, y eso funciona
   mientras las dos comparten superficie. Acá la que sigue es la banda oscura:
   su borde superior corta exactamente donde termina el último renglón de
   prosa, sin un pixel de aire. Lo vio el operador navegando los hubs.

   56px y no 72: es el aire que la propia sección ya tiene arriba. */

.t-locations_hub .hub-ciudad { padding-bottom: 56px !important; }


/* ── La banda oscura ─────────────────────────────────────────────────────
   Maqueta línea 243: `background:#221c16`, `padding:72px`, y dos columnas a
   `minmax(0,320px) minmax(0,1fr)` con 48px — el título a la izquierda, la
   prosa a la derecha, las dos centradas verticalmente.

   Es la única banda oscura del cuerpo y por eso no lleva rótulo: la superficie
   ya la separa de lo que viene antes y después. En /locations/ el mismo lugar
   lo ocupa `hub-cobertura`. */

.t-services_hub .contra,
.t-locations_hub .hub-cobertura {
  background: var(--piel-profunda);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: 48px;
  align-items: center;
}

/* `contra` deja sus dos nodos sueltos —un H3 y un párrafo— y cae en las dos
   celdas sola. `hub-cobertura` emite el H2 SUELTO y la prosa ENVUELTA, que es
   la forma que necesita esta composición: el título ocupa la celda izquierda y
   los cuatro párrafos entran como UNA celda a la derecha. Disolver el
   envoltorio los repartiría en cuatro filas, y la que comparte fila con la foto
   se estiraría hasta su alto — cuatro párrafos con cuatro separaciones
   distintas. Está explicado en la plantilla, que es donde se decide. */
.t-locations_hub .hub-cobertura__texto { grid-column: 2; grid-row: 1 / 3; }
.t-locations_hub .hub-cobertura__texto p:last-child { margin-bottom: 0; }

.t-services_hub .contra h3,
.t-locations_hub .hub-cobertura__h2 {
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: var(--piel-claro);
  margin: 0;
  grid-column: 1;
  grid-row: 1;
}

.t-services_hub .contra p,
.t-locations_hub .hub-cobertura p {
  color: var(--piel-claro-3);
  margin: 0 0 16px;
  max-width: none;
  grid-column: 2;
}
.t-services_hub .contra p:last-child,
.t-locations_hub .hub-cobertura p:last-child { margin-bottom: 0; }

.t-services_hub .contra strong,
.t-locations_hub .hub-cobertura strong { color: var(--piel-claro); }
.t-services_hub .contra a,
.t-locations_hub .hub-cobertura a { color: var(--piel-acento-claro); }

/* Sin H2 declarado la banda vuelve a una columna: dos columnas con la primera
   vacía es media banda oscura en blanco. */
.t-locations_hub .hub-cobertura:not(:has(.hub-cobertura__h2)) { display: block; }

/* LA FOTO DE LA BANDA OSCURA. La maqueta no tiene ninguna —su banda es título y
   prosa— pero `/locations/` trae el slot lleno y vaciarlo perdería una imagen
   que el operador colocó. Va en la columna ANGOSTA, debajo del título, que es
   el único lugar donde no compite con nada: la columna ancha es la prosa.

   `align-items: start` es lo que lo hace posible. Con el `center` que la banda
   hereda, la columna angosta —dos ítems contra cuatro párrafos— se centraba
   contra el bloque entero y la foto quedaba flotando a media altura, con
   espacio vacío arriba y abajo. Medido el 2026-08-19 sobre el HTML publicado. */
.t-locations_hub .hub-cobertura:has(.hub-cobertura__figura) { align-items: start; }

/* `grid-row: 2` EXPLÍCITO, y sin él la foto se va al fondo de la banda. La
   figura es el ÚLTIMO nodo del HTML —el envoltorio de texto se disuelve y deja
   el H2 y los cuatro párrafos delante— y la colocación automática de grid no
   retrocede: cuando le toca, el cursor ya está en la fila 4, así que pedirle
   sólo la columna 1 la manda a la fila 5, con el título arriba y media banda
   oscura vacía entre los dos. Medido el 2026-08-19 sobre el HTML publicado. */
.t-locations_hub .hub-cobertura__figura {
  grid-column: 1;
  grid-row: 2;
  margin: 24px 0 0;
}
.t-locations_hub .hub-cobertura__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── La banda oscura de /resources/ ──────────────────────────────────────
   Ahí el lugar de la banda lo ocupa `why`, que ya viene vestida de oscuro por
   el molde de servicio y se deja como está: mismo papel en la página —el único
   fondo oscuro del cuerpo, justo antes del FAQ— y una composición que ya está
   calibrada. Lo único que cambia es la separación.

   EL `margin-top` LA SEPARABA DE LA BANDA DE ARRIBA con una franja de papel de
   72 px. Entre dos superficies que se tocan eso se lee como un error de
   maquetado, no como aire: en la maqueta las bandas van pegadas y el corte lo
   hace el color. */
.t-resources_hub .why { margin-top: 0 !important; }


/* ── 03 · La FAQ, numerada ───────────────────────────────────────────────
   Maqueta línea 250: blanco con filete arriba, cabecera centrada, la lista a
   920px y cada pregunta con su ordinal mono a la izquierda.

   ⚠ SE VA EL `+` DEL ACORDEÓN, y es la decisión más discutible del traslado.
   La maqueta no lo dibuja: la fila es número + pregunta y nada más. Se traslada
   tal cual porque la fidelidad es lo que se pidió, pero es una AFORDANCIA menos
   —el `+` es lo que dice "esto se abre"— y el `<details>` sigue siendo un
   acordeón. Volver atrás es borrar las dos reglas de `::after` de acá abajo y
   dejar que gane la compartida de más arriba. */

.t-services_hub .faq,
.t-locations_hub .faq,
.t-resources_hub .faq {
  background: var(--piel-blanco);
  border-top: 1px solid var(--piel-borde);
  padding-block: 72px 0 !important;
}

.t-services_hub .faq__h2,
.t-locations_hub .faq__h2,
.t-resources_hub .faq__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  margin: 0 auto 32px;
  max-width: 26ch;
}

.t-services_hub .faq__rotulo,
.t-locations_hub .faq__rotulo,
.t-resources_hub .faq__rotulo { text-align: center; }

.t-services_hub .faq__lista,
.t-locations_hub .faq__lista,
.t-resources_hub .faq__lista { max-width: 920px; counter-reset: faq; }

.t-services_hub .faq__pregunta,
.t-locations_hub .faq__pregunta,
.t-resources_hub .faq__pregunta {
  justify-content: flex-start;
  align-items: baseline;
  gap: 14px;
  font-size: 18px;
}

.t-services_hub .faq__pregunta::before,
.t-locations_hub .faq__pregunta::before,
.t-resources_hub .faq__pregunta::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  font-family: var(--piel-mono);
  /* 600 y `padding-top:4px` como en la maqueta: ahí el número es un `<span>`
     dentro del `<summary>`, así que hereda el peso de la pregunta y se baja
     4px a mano para que su caja de 12px caiga a plomo con la de 18. */
  font-weight: 600;
  font-size: 12px;
  padding-top: 4px;
  color: var(--piel-acento);
  flex: 0 0 auto;
}

.t-services_hub .faq__pregunta::after,
.t-locations_hub .faq__pregunta::after,
.t-resources_hub .faq__pregunta::after { content: none; }

.t-services_hub .faq__respuesta,
.t-locations_hub .faq__respuesta,
.t-resources_hub .faq__respuesta { margin: 12px 0 0 32px; }


/* ── La galería y la frase de vuelta, sobre la misma banda blanca ────────
   La galería no está en la maqueta (ver la nota 1 del encabezado). Va sobre el
   blanco del FAQ para no abrir una franja de papel entre él y el CTA.

   La frase de vuelta pierde sus dos reglas horizontales: en la maqueta (línea
   282) es una línea centrada y tenue al pie del FAQ, no una franja.

   ⚠ ESTA REGLA SUMA UN HALLAZGO AL BLOQUE C, y es a propósito. La maqueta pinta
   esa línea en `#8a8276`, que sobre blanco da 3.79:1 contra un mínimo de 4.5.
   Es el tenue de la paleta y su déficit ya estaba medido y declarado en
   `diseno/contraste.md` desde la importación: acá aparece un caso más, no un
   color nuevo. Se traslada tal cual porque la fidelidad es lo que se pidió, y
   porque corregir la paleta es decisión del operador y no de un traslado.

   ⚠ PERO NO ES EL MISMO CASO QUE LOS OTROS DOS que ya fallan por nombre
   —`.site-nav__list a:hover` y `.site-header__cta`—: aquéllos son un hover de
   navegación y un botón, y esto es PROSA, con el único enlace de vuelta al
   padre adentro. Si el operador arregla uno solo de los tres, es éste, y el
   arreglo es una línea: cambiar `var(--piel-tenue)` por `var(--piel-texto)`
   en la regla de acá abajo. */

.t-services_hub .galeria,
.t-locations_hub .galeria,
.t-resources_hub .galeria {
  background: var(--piel-blanco);
  padding-block: 56px 0 !important;
}

.t-services_hub .vuelta,
.t-locations_hub .vuelta,
.t-resources_hub .vuelta {
  background: var(--piel-blanco);
  border: 0;
  margin-top: 0 !important;
  padding-block: 30px 72px !important;
  text-align: center;
  color: var(--piel-tenue);
}
.t-services_hub .vuelta p,
.t-locations_hub .vuelta p,
.t-resources_hub .vuelta p { max-width: 76ch; margin-inline: auto; }


/* ── El CTA, a dos columnas ──────────────────────────────────────────────
   Maqueta línea 286: `background:#c07a3a; padding:64px`, dos columnas a
   `repeat(auto-fit,minmax(340px,1fr))` con 32px. El título a la izquierda a
   24ch, y a la derecha el párrafo y el botón alineados al filo izquierdo de su
   columna. El botón va en la profunda, no en la tinta. */

.t-services_hub .cta,
.t-locations_hub .cta,
.t-resources_hub .cta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  gap: 32px;
  align-items: center;
  text-align: left;
  margin-top: 0 !important;
  padding-block: 64px !important;
}

.t-services_hub .cta__texto-bloque,
.t-locations_hub .cta__texto-bloque,
.t-resources_hub .cta__texto-bloque {
  display: contents;
}

.t-services_hub .cta__h2,
.t-locations_hub .cta__h2,
.t-resources_hub .cta__h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.028em;
  max-width: 24ch;
  grid-column: 1;
  grid-row: 1;
}

.t-services_hub .cta__texto,
.t-locations_hub .cta__texto,
.t-resources_hub .cta__texto {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  max-width: 60ch;
  align-self: end;
}

.t-services_hub .cta .btn--primario,
.t-locations_hub .cta .btn--primario,
.t-resources_hub .cta .btn--primario {
  grid-column: 2;
  grid-row: 2;
  justify-self: start;
  align-self: start;
  margin-top: -14px;
  background: var(--piel-profunda);
  border-color: var(--piel-profunda);
  color: var(--piel-claro);
  padding: 16px 30px;
}
.t-services_hub .cta .btn--primario:hover,
.t-locations_hub .cta .btn--primario:hover,
.t-resources_hub .cta .btn--primario:hover {
  background: var(--piel-negra);
  border-color: var(--piel-negra);
  color: var(--piel-claro);
}


/* ═══════════════════════════════════════════════════════════════════════════
   /about/ — traslado 1 a 1 de diseno/about/01-vitrina.html

   Bajada del proyecto de Claude Design 3b9fe333 el 2026-08-19 por pedido del
   usuario. Hasta hoy `diseno/README.md` decía "About: ❌ no hay maqueta, de
   nadie" y la página salía vestida con las reglas genéricas del molde de
   servicio. Ahora la maqueta existe y esto la mide.

   CÓMO LEER ESTE BLOQUE: cada regla cita el valor de la maqueta. Si una medida
   no tiene cita, no está en el molde y es del repo — y va marcada con ⚑.

   ═══ QUÉ COMPOSICIÓN ES, y por qué no es la del servicio ═══

     · el hero es una BANDA OSCURA a sangre: la foto de fondo bajo un degradé
       horizontal, el texto a la izquierda y una foto 3:4 a la derecha. El de
       servicio es texto sobre papel con foto 4:5.
     · la franja de confianza va DENTRO de esa banda, a sangre, en cuatro
       celdas con filete vertical. En el resto del sitio es una píldora oscura
       centrada sobre el papel.
     · cada sección abre con rótulo mono numerado y H2 CENTRADOS a todo el
       ancho, y recién debajo se parte en dos columnas.
     · `historia` abre con un párrafo LEAD centrado a 80ch y cierra con el
       último párrafo convertido en tarjeta tintada.
     · `area` invierte el lado: la foto a la IZQUIERDA a 380px, y las píldoras
       de ciudades entre el primer párrafo y el segundo.
     · `credenciales` no es prosa con viñetas: son SEIS TARJETAS en grilla, una
       por párrafo, con la última tintada y un hueco de foto como sexta celda.
     · la FAQ numera las preguntas y no lleva el `+` del acordeón.
     · el CTA es una TARJETA ámbar de esquinas redondeadas, no la franja a
       sangre del molde de servicio. Misma forma que la de /contact/, que es la
       otra Vitrina del proyecto.

   ═══ LO QUE HUBO QUE ARREGLAR EN EL MARCADO ═══ y es deuda de propagar.py,
   porque `plantillas/about.html` es del motor:

     1 · LOS RÓTULOS MONO no existían en esta plantilla. Se agregaron con la
         convención `rotulo_{seccion}` que ya usan homepage y services_hub:
         condicionales, así que una About que no los declare no cambia un nodo.
     2 · `<section class="propietario">` se publicaba VACÍA, con un `<h2>Meet
         </h2>` colgando, en todo sitio que no declara dueño — el caso que el
         modelo admite a propósito. Ahora cuelga de `propietario_bio`.
     3 · EL CTA. Esta plantilla era la única del sitio, junto con
         privacy-policy, que no cerraba con uno. La maqueta sí lo trae.

   ═══ TRES COSAS QUE NO SALEN DE LA MAQUETA ═══ anotadas para que no se lean
   como parte del traslado:

     ⚑ 1 · LA GALERÍA. No existe en el molde. Va por decisión del operador del
           2026-08-13 ("en TODAS las páginas") y se pinta sobre la misma banda
           blanca del FAQ, igual que en los tres hubs.
     ⚑ 2 · `redes` — los cinco perfiles de `sameas`. El molde no tiene sección
           de redes; vaciarla para parecerse perdería contenido que el operador
           declaró en `datos.json`. Se pinta como cola de la banda de papel de
           `credenciales`, sin banda propia.
     ⚑ 3 · EL ENLACE A /locations/ que cierra `area`. Tampoco está en el molde
           y se queda: es el único entrante del hub desde el cuerpo de esta
           página, igual que en el Homepage.

   ═══ Y UNA DECISIÓN DE FOTO QUE CONVIENE VER ESCRITA ═══
   El molde etiqueta el fondo del hero como `hero_img` y la foto 3:4 de su
   derecha como `historia_img`, o sea que REUSA la del taller, que vuelve a
   aparecer en `historia`. Se trasladó tal cual y **el operador lo corrigió el
   2026-08-20**: el hueco 3:4 lleva ahora una COCINA TERMINADA
   (`luxury-…-waterfront`) y no la del taller. La repetición dentro de la misma
   pantalla desaparece, y de paso una banda oscura gana una foto clara. El
   fondo sigue siendo el que dice el molde y sigue yendo por `hero_bg` —es
   decoración, y por eso es custom property y no `<img>`—.
   ═══════════════════════════════════════════════════════════════════════════ */

/* El contenedor del molde: 1240 de contenido y 32 de canaleta —`max-width:
   1240px` en el div interior de cada sección y `padding:… 32px` en la sección—.
   Acotado a `main` como en el Homepage: el chrome se resuelve una sola vez para
   todo el sitio y no se viste por página (§4 #188). */
.p-about main {
  --piel-ancho: 1240px;
  --piel-borde-lat: 32px;
}


/* ── El hero: banda oscura con la foto al fondo ───────────────────────────
   Maqueta líneas 55-70. La sección es `slotd` con un `<div>` de degradé en
   `position:absolute; inset:0`; acá el degradé es la PRIMERA capa del
   `background-image` y la foto la segunda, que es lo mismo sin un nodo de
   decoración en el DOM.

   `var(--hero-fondo, none)` y no `var(--hero-fondo)` pelado: si la página no
   declara `hero_bg`, un `var()` sin fallback invalida la declaración ENTERA y
   se perdería también el degradé. Con `none` la capa de foto simplemente no
   existe y la banda queda oscura y lisa. */
.p-about .hero {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 40px;
  padding-block: 64px !important;
  padding-inline: max(var(--piel-borde-lat),
                      calc((100% - var(--piel-ancho)) / 2));
  background-color: var(--piel-negra);
  background-image:
    linear-gradient(90deg,
      rgba(20, 16, 12, 0.95) 0%,
      rgba(20, 16, 12, 0.82) 54%,
      rgba(20, 16, 12, 0.60) 100%),
    var(--hero-fondo, none);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Maqueta línea 58: `flex:1 1 460px; max-width:640px; gap:20px`. */
.p-about .hero__texto {
  flex: 1 1 460px;
  max-width: 640px;
  gap: 20px;
}

/* Maqueta línea 66: `flex:0 1 340px; aspect-ratio:3/4; max-height:44vh;
   border-radius:20px`, que es `--piel-radio-gr`. */
.p-about .hero__figura {
  flex: 0 1 340px;
  margin: 0;
}
.p-about .hero__figura img {
  width: 100%;
  aspect-ratio: 3 / 4;
  max-height: 44vh;
  object-fit: cover;
  border-radius: var(--piel-radio-gr);
}

/* Maqueta línea 60: el chip va BLANCO sobre ámbar translúcido, no ámbar sobre
   el tinte. Misma decisión que en /contact/, que es la otra Vitrina. */
.p-about .hero__rotulo {
  color: var(--piel-blanco);
  background: rgba(192, 122, 58, 0.92);
}

/* Maqueta línea 61. `text-wrap: pretty` y no el `balance` que la hoja da a
   todos los titulares: es lo que declara el molde. */
.p-about .hero__h1 {
  font-size: clamp(30px, 3.8vw, 50px);
  line-height: 1.0;
  letter-spacing: -0.034em;
  color: var(--piel-claro);
  text-wrap: pretty;
}

/* Maqueta línea 62: filete ámbar a la izquierda y la bajada en DISPLAY, no en
   el cuerpo. El `#ddd6ca` del molde no es un token de la paleta y va con
   `--piel-claro-3` (#cfc7ba), cuyo papel declarado es exactamente éste —prosa
   sobre banda oscura—, medido en contraste.md y un punto más claro. Es la
   misma sustitución que ya se hizo en /contact/. */
.p-about .hero__sub {
  margin: 0;
  max-width: none;
  border-left: 3px solid var(--piel-acento);
  padding-left: 20px;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.5;
  color: var(--piel-claro-3);
  text-wrap: pretty;
}

/* El botón fantasma va sobre la banda oscura: borde y texto claros, y al pasar
   se invierte. Maqueta línea 65. */
.p-about .hero__acciones .btn--secundario {
  color: var(--piel-claro);
  border-color: rgba(251, 249, 245, 0.5);
}
.p-about .hero__acciones .btn--secundario:hover {
  background: var(--piel-claro);
  border-color: var(--piel-claro);
  color: var(--piel-tinta);
}


/* ── La franja de confianza, dentro de la banda y A SANGRE ────────────────
   Maqueta líneas 71-76: `border-top:1px solid #3a332b`, grid
   `repeat(auto-fit,minmax(220px,1fr))`, sin contenedor y sin radio. Los ítems,
   `padding:15px 24px; border-right:1px solid #3a332b; Manrope 600 13.5px;
   color:#ede8e0; text-align:center`.

   ⚠ EL FONDO ES PLANO Y EN EL MOLDE NO LO ES. Ahí la franja es HIJA de la
   sección, así que la pisa el mismo degradé sobre la misma foto y por la
   derecha se ve la foto al 40%. Acá `.trust` es un `<div>` HERMANO del hero
   —así lo emite el parcial, para las 19 páginas— y no hay forma de continuarle
   el fondo a otro elemento. Va en `--piel-negra` (#15110d), que es el color al
   que el degradé lleva el extremo izquierdo, y la banda cierra pareja. */
.p-about .trust {
  padding-inline: 0;
  padding-block: 0 !important;
  background: var(--piel-negra);
  border-top: 1px solid var(--piel-borde-oscuro);
}

.p-about .trust__lista {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  background: none;
  border-radius: 0;
  overflow: visible;
}

.p-about .trust__item {
  padding: 15px 24px;
  font-size: 13.5px;
  line-height: 1.7;
  text-align: center;
}


/* ── La cabecera de sección: rótulo mono + H2, centrados ──────────────────
   Maqueta líneas 79-82, y repetida igual en las cuatro secciones: `flex
   column; align-items:center; text-align:center; gap:8px`, rótulo mono 11px
   con `letter-spacing:0.1em` en ámbar y H2 `clamp(26px,3vw,38px); line-height:
   1.12; letter-spacing:-0.025em`.

   No hay un `<div>` de cabecera en el marcado de esta plantilla, así que los
   8px del `gap` los pone el margen del rótulo y los 32 de separación con lo
   que sigue, el del H2. */
.p-about .historia__rotulo,
.p-about .area__rotulo,
.p-about .credenciales__rotulo,
.p-about .redes__rotulo,
.p-about .faq__rotulo {
  font-family: var(--piel-mono);
  font-size: 11px;
  line-height: 1.7;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--piel-acento);
  text-align: center;
  margin: 0 0 8px;
  max-width: none;
}

.p-about .historia__h2,
.p-about .area__h2,
.p-about .credenciales__h2,
.p-about .redes__h2,
.p-about .faq__h2 {
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -0.025em;
  text-align: center;
  margin: 0 auto 32px;
  max-width: 26ch;
}


/* ── 01 · historia ────────────────────────────────────────────────────────
   Maqueta líneas 78-96. Cabecera centrada, un párrafo LEAD centrado a 80ch, y
   debajo `grid-template-columns: minmax(0,1fr) minmax(0,360px); gap:44px;
   align-items:center` con la prosa a la izquierda y dos fotos 4:3 apiladas a
   la derecha. El último párrafo va como tarjeta tintada.

   ═══ POR QUÉ EL ENVOLTORIO SE DISUELVE ═══ El molde tiene TRES bloques
   —cabecera, lead y grilla— y la plantilla entrega los seis nodos dentro de un
   solo `historia__texto`. Con `display: contents` cada uno es un ítem de la
   grilla de la sección y se coloca a mano, que es lo mismo que ya hace el
   Homepage con `area__texto`.

   ═══ LAS DOS FILAS `1fr` NO SON RELLENO ═══ son las que centran la columna de
   texto contra la de fotos, que es el `align-items:center` del molde. Sin
   ellas, el sobrante de alto de la columna de fotos se reparte entre las filas
   de los párrafos y los separa: el molde los deja a 18px y mueve el bloque
   entero. Con una fila flexible arriba y otra abajo, el sobrante cae ahí.

   ⚠ ESTO ASUME CUATRO PÁRRAFOS en `## historia` — lead, dos de prosa y el de
   la tarjeta—, que es lo que la maqueta dibuja. La cuenta está acá y no
   repartida, y el rótulo es el `p` nº 1:
     1 rótulo · 2 lead · 3 y 4 prosa · 5 tarjeta */
.p-about .historia {
  background: var(--piel-papel);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  grid-template-rows: auto auto auto 1fr auto auto auto 1fr;
  column-gap: 44px;
  row-gap: 0;
}

.p-about .historia__texto { display: contents; }

.p-about .historia__rotulo { grid-area: 1 / 1 / 2 / -1; }
.p-about .historia__h2     { grid-area: 2 / 1 / 3 / -1; }

/* Maqueta línea 84: `max-width:80ch; Manrope 500; clamp(17px,1.7vw,21px);
   line-height:1.45; letter-spacing:-0.014em`, en tinta y centrado. */
.p-about .historia__texto > p:nth-of-type(2) {
  grid-area: 3 / 1 / 4 / -1;
  margin: 0 auto 30px;
  max-width: 80ch;
  text-align: center;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.45;
  letter-spacing: -0.014em;
  color: var(--piel-tinta);
  text-wrap: pretty;
}

.p-about .historia__texto > p:nth-of-type(3) { grid-area: 5 / 1 / 6 / 2; }
.p-about .historia__texto > p:nth-of-type(4) { grid-area: 6 / 1 / 7 / 2; }

.p-about .historia__texto > p:nth-of-type(3),
.p-about .historia__texto > p:nth-of-type(4) {
  margin: 0 0 18px;
  max-width: none;
}

/* Maqueta línea 89: el último párrafo es una tarjeta tintada —`background:
   #f0e6d9; border:1px solid #e3d3bf; border-radius:18px; padding:24px 28px`—.
   El borde no es un token: es el mismo `#e3d3bf` que ya usa la tarjeta tintada
   del Homepage. */
.p-about .historia__texto > p:nth-of-type(5) {
  grid-area: 7 / 1 / 8 / 2;
  margin: 0;
  max-width: none;
  background: var(--piel-tinte);
  border: 1px solid #e3d3bf;
  border-radius: var(--piel-radio);
  padding: 24px 28px;
  color: var(--piel-tinta);
}

/* Maqueta línea 92: `flex column; gap:14px`, dos slots 4:3 con radio 18. */
.p-about .historia__figura {
  grid-area: 4 / 2 / 9 / 3;
  align-self: center;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.p-about .historia__figura img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── 02 · area ────────────────────────────────────────────────────────────
   Maqueta líneas 99-118. Banda BLANCA con filete arriba y abajo, cabecera
   centrada, y `grid-template-columns: minmax(0,380px) minmax(0,1fr); gap:44px;
   align-items:center`: la foto 4:5 a la IZQUIERDA y la prosa a la derecha, con
   las píldoras de ciudades ENTRE el primer párrafo y el segundo.

   Las píldoras viven en `area__col`, junto a la figura, y los párrafos en
   `area__texto`: son dos envoltorios distintos y hay que disolver los dos para
   poder intercalarlas. Es la misma maniobra que el Homepage hace con esta
   misma sección, con la fila del medio numerada a mano.

   ⚠ ESTO ASUME DOS PÁRRAFOS en `## area_cuerpo`. El tercero de la cuenta es el
   enlace al hub, que lo emite la plantilla:
     1 rótulo · 2 primer párrafo · 3 segundo · 4 enlace a /locations/ */
.p-about .area {
  background: var(--piel-blanco);
  border-top: 1px solid var(--piel-borde);
  border-bottom: 1px solid var(--piel-borde);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: minmax(0, 380px) minmax(0, 1fr);
  grid-template-rows: auto auto 1fr auto auto auto auto 1fr;
  column-gap: 44px;
  row-gap: 0;
}

.p-about .area__texto,
.p-about .area__col { display: contents; }

.p-about .area__rotulo { grid-area: 1 / 1 / 2 / -1; }
.p-about .area__h2     { grid-area: 2 / 1 / 3 / -1; }

.p-about .area__figura {
  grid-area: 3 / 1 / 9 / 2;
  align-self: center;
  margin: 0;
}
.p-about .area__figura img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--piel-radio);
}

.p-about .area__texto > p:nth-of-type(2) { grid-area: 4 / 2 / 5 / 3; }
.p-about .area__lista                    { grid-area: 5 / 2 / 6 / 3; }
.p-about .area__texto > p:nth-of-type(3) { grid-area: 6 / 2 / 7 / 3; }
.p-about .area__texto > p:nth-of-type(4) { grid-area: 7 / 2 / 8 / 3; }

/* `:nth-of-type(n + 2)` Y NO `> p` PELADO: el rótulo TAMBIÉN es un `<p>` de
   `area__texto`, así que un selector de la misma especificidad escrito más
   abajo le pisaba los 8px del molde y le daba los 18 de la prosa. Se midió
   sobre el HTML publicado: el H2 caía 10px más abajo que en la maqueta. */
.p-about .area__texto > p:nth-of-type(n + 2) {
  margin: 0 0 18px;
  max-width: none;
}
.p-about .area__texto > p:nth-of-type(4) { margin: 0; }

/* Maqueta línea 106: la píldora va sobre PAPEL con borde, porque acá la banda
   es blanca. En el resto del sitio es al revés. */
.p-about .area__lista {
  gap: 8px;
  margin: 0 0 18px;
}
.p-about .area__lista li {
  background: var(--piel-papel);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-pildora);
  padding: 9px 18px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--piel-tinta);
}


/* ── 03 · credenciales ────────────────────────────────────────────────────
   Maqueta líneas 121-146. Cabecera centrada con 26 de aire —no 32—, un lead
   centrado a 70ch en Manrope 600, y una grilla `repeat(auto-fit,minmax(320px,
   1fr)); gap:16px; align-items:stretch` con SEIS celdas: los cinco párrafos
   como tarjetas y el hueco de foto como sexta.

   Cada tarjeta es un `<p>` que empieza con `<strong>The license.</strong>`, y
   el molde dibuja ese `<b>` como un renglón propio de 19px con 10px de aire
   debajo. Por eso el `strong` va a `display: block`.

   LOS DOS MÁRGENES NEGATIVOS SON DELIBERADOS. El `row-gap` de la grilla es 16
   —el de las tarjetas— y el molde quiere 8 entre el rótulo y el H2. Un margen
   de -8 en el rótulo achica su fila y deja los 8. Lo mismo con el H2 y el lead,
   que buscan 26 y 30. */
.p-about .credenciales {
  background: var(--piel-papel);
  padding-block: 72px !important;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  column-gap: 16px;
  row-gap: 16px;
  align-items: stretch;
}

.p-about .credenciales__texto { display: contents; }

.p-about .credenciales__rotulo { grid-column: 1 / -1; margin: 0 0 -8px; }
.p-about .credenciales__h2     { grid-column: 1 / -1; margin: 0 auto 10px; }

.p-about .credenciales__texto > p:nth-of-type(2) {
  grid-column: 1 / -1;
  margin: 0 auto 14px;
  max-width: 70ch;
  text-align: center;
  font-family: var(--piel-display);
  font-weight: 600;
  font-size: clamp(17px, 1.7vw, 21px);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--piel-tinta);
}

.p-about .credenciales__texto > p:nth-of-type(n + 3) {
  margin: 0;
  max-width: none;
  background: var(--piel-blanco);
  border: 1px solid var(--piel-borde);
  border-radius: var(--piel-radio);
  padding: 28px 30px;
  font-size: 15px;
}

.p-about .credenciales__texto > p:nth-of-type(n + 3) strong {
  display: block;
  margin-bottom: 10px;
  font-family: var(--piel-display);
  font-weight: 700;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--piel-tinta);
}

/* Maqueta línea 141: la última tarjeta —"The permits."— va tintada. Se toma
   por `:last-of-type` y no por su número: es la última pase lo que pase, y el
   `n+3` la mantiene fuera del lead si algún día no hay tarjetas. */
.p-about .credenciales__texto > p:nth-of-type(n + 3):last-of-type {
  background: var(--piel-tinte);
  border-color: #e3d3bf;
  color: var(--piel-tinta);
}

/* Maqueta línea 145: `min-height:260px`, es una celda más de la grilla. */
.p-about .credenciales__figura {
  margin: 0;
  min-height: 260px;
}
.p-about .credenciales__figura img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  object-fit: cover;
  border-radius: var(--piel-radio);
}


/* ── ⚑ redes · los cinco perfiles ─────────────────────────────────────────
   NO ESTÁ EN LA MAQUETA. Los publica `sameas` de `datos.json` y se quedan.
   Sin banda propia: continúa el papel de `credenciales` y sólo cierra abajo,
   para que no se lean como dos bandas del mismo color con 144px en medio. */
.p-about .redes,
.p-about .gbp {
  background: var(--piel-papel);
  padding-block: 0 72px !important;
}
.p-about .redes ul { justify-content: center; }


/* ── 04 · FAQ ─────────────────────────────────────────────────────────────
   Maqueta líneas 149-176. Banda blanca con filete arriba, cabecera centrada
   con 30 de aire, lista a 920 centrada, y las preguntas NUMERADAS con un mono
   de 12px en ámbar en vez del `+` del acordeón. Es la misma mecánica que ya
   usan el Homepage y los tres hubs. */
.p-about .faq {
  background: var(--piel-blanco);
  border-top: 1px solid var(--piel-borde);
  padding-block: 72px !important;
}

.p-about .faq__h2 { margin: 0 auto 30px; }

.p-about .faq__lista { max-width: 920px; counter-reset: faq; }

.p-about .faq__pregunta {
  justify-content: flex-start;
  align-items: baseline;
  gap: 14px;
  font-size: 18px;
}

/* 600 y `padding-top:4px` como en la maqueta: ahí el número es un `<span>`
   dentro del `<summary>` y hereda el peso de la pregunta. */
.p-about .faq__pregunta::before {
  counter-increment: faq;
  content: counter(faq, decimal-leading-zero);
  font-family: var(--piel-mono);
  font-weight: 600;
  font-size: 12px;
  padding-top: 4px;
  color: var(--piel-acento);
  flex: 0 0 auto;
}

.p-about .faq__pregunta::after { content: none; }

.p-about .faq__respuesta { margin: 12px 0 0 32px; }


/* ── ⚑ La galería ────────────────────────────────────────────────────────
   Tampoco está en el molde. Se pinta sobre la misma banda blanca del FAQ, que
   es lo que ya se decidió para los tres hubs. */
.p-about .galeria {
  background: var(--piel-blanco);
  padding-block: 0 72px !important;
}


/* ── La frase de vuelta ───────────────────────────────────────────────────
   Maqueta líneas 179-183: sobre papel, `max-width:70ch`, centrada, en Manrope
   500 a `clamp(18px,1.8vw,23px)`. SIN los filetes que le pone el resto del
   sitio: en este molde es una frase suelta antes del CTA, no un pie. */
.p-about .vuelta {
  background: var(--piel-papel);
  margin-top: 0 !important;
  padding-block: 64px 0 !important;
  border: 0;
}
.p-about .vuelta p {
  margin: 0 auto;
  max-width: 70ch;
  text-align: center;
  font-family: var(--piel-display);
  font-weight: 500;
  font-size: clamp(18px, 1.8vw, 23px);
  line-height: 1.42;
  letter-spacing: -0.016em;
  color: var(--piel-tinta);
  text-wrap: pretty;
}


/* ── El CTA, tarjeta ámbar ────────────────────────────────────────────────
   Maqueta líneas 186-193: `background:#c07a3a; border-radius:22px;
   padding:52px 44px`, dos bloques con `justify-content:space-between`, el
   texto a 44ch a la izquierda y el botón oscuro a la derecha.

   La misma forma que el CTA de /contact/: la sección ES la tarjeta.

   ⚠ EL ANCHO ES 1328 Y NO 1240, y es la trampa nº1 del método de traslado
   —`diseno/README.md`, "el max-width de la maqueta es content-box"—. Ahí la
   tarjeta declara `max-width:1240px` con `padding:52px 44px` y SIN
   `box-sizing`, así que los 1240 son el CONTENIDO y la caja mide 1328. Lo que
   queda a plomo con la grilla de 1240 del resto de la página es el TEXTO de
   adentro, y el ámbar se sale 44px por cada lado. Con la tarjeta a 1240 el
   titular caía 44px adentro de la columna de todas las otras secciones: no se
   lee como un error de ancho, se lee como que está apenas mal.

   Se escribe con `width` y no con `max-width` porque acá la caja SÍ es
   border-box: `1240 + 44 + 44`. El segundo término del `min()` es la canaleta
   mínima, para que en una pantalla angosta no toque los bordes. */
.p-about .cta {
  background: var(--piel-acento);
  width: min(calc(var(--piel-ancho) + 88px),
             calc(100% - 2 * var(--piel-borde-lat)));
  margin: 64px auto !important;
  padding: 52px 44px !important;
  border-radius: 22px;
  justify-content: center;
  text-align: left;
  gap: 48px;
}

/* ⚑ EL BLOQUE Y EL BOTÓN VAN AL CENTRO, y el molde los manda a los extremos
   (`justify-content: space-between`, maqueta línea 187). Decisión del operador
   del 2026-08-20: con el CTA de este cliente —"Get a Free In-Home Estimate",
   bastante más corto que el "Call (561) 555-0142 →" del ejemplo— entre el
   titular y el botón quedaban 460px de ámbar vacío y los dos se leían como dos
   piezas sueltas en vez de una.

   El texto sigue alineado a la IZQUIERDA dentro de su bloque: lo que se centra
   es el PAR, no el párrafo. Y el `gap` sube de 28 a 48 para que juntarlos no
   los pegue. */
.p-about .cta__texto-bloque {
  align-items: flex-start;
  gap: 10px;
  max-width: 44ch;
}

.p-about .cta__h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.1;
  letter-spacing: -0.028em;
}

/* Maqueta línea 191: 15px y `padding:16px 30px`. El resto del sitio lo dibuja
   un punto más grande. */
.p-about .cta .btn--primario {
  font-size: 15px;
  padding: 16px 30px;
}


/* ── Responsive ───────────────────────────────────────────────────────────
   Un solo corte. Las composiciones de dos columnas pasan a una y el orden
   del documento manda: el texto antes que la figura, que es como se escribió. */

@media (max-width: 62rem) {

  /* ── El hero del Home vuelve a una columna ─────────────────────────────
     La maqueta no trae media queries —el lienzo de Claude Design dibuja a
     ancho de escritorio— así que el corte es del sitio, y es el mismo 62rem
     donde ya colapsa el hero de /contact/.

     El ORDEN queda como está en el DOM: texto y foto arriba, formulario
     abajo. Es lo correcto acá y no es lo mismo que en /contact/, donde la
     conversión ES la página y la tarjeta pelea por subir: en el Home lo que
     tiene que leerse primero es el H1 con el ancla. */
  .t-homepage .hero__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  /* Sin la segunda columna, la foto deja de estar topeada por los 26vh: es la
     única imagen del hero a todo el ancho y con ese techo quedaba una cinta.
     El 21:9 del molde manda solo. */
  .t-homepage .hero__figura img { max-height: none; }

  /* Las composiciones de dos columnas del molde de hub. La banda oscura y el
     CTA vuelven a una sola pista: sus reglas de `grid-column` explícito se
     apagan solas cuando el grid es de una columna, salvo la del botón, que
     pide la fila 2 y la tendría vacía. */
  .t-services_hub .preguntas__fila,
  .t-services_hub .preguntas__fila--inv,
  .t-services_hub .contra,
  .t-locations_hub .hub-cobertura,
  .t-services_hub .cta,
  .t-locations_hub .cta,
  .t-resources_hub .cta { display: block; }

  .t-services_hub .cta__texto-bloque,
  .t-locations_hub .cta__texto-bloque,
  .t-resources_hub .cta__texto-bloque { display: block; margin-bottom: 20px; }

  .t-services_hub .cta .btn--primario,
  .t-locations_hub .cta .btn--primario,
  .t-resources_hub .cta .btn--primario { margin-top: 0; }

  .t-locations_hub .hub-cobertura__texto { display: block; }

  .t-services_hub .preguntas__texto,
  .t-services_hub .contra h3,
  .t-locations_hub .hub-cobertura__h2 { margin-bottom: 18px; }

  .t-services_hub .preguntas__figura { margin-top: 20px; }
  .t-services_hub .preguntas__fila--inv .preguntas__figura { margin: 0 0 20px; }

  .t-services_hub .hero__figura img,
  .t-locations_hub .hero__figura img,
  .t-resources_hub .hero__figura img { aspect-ratio: 16 / 9; max-height: none; }


  .hero,
  .apertura,
  .why,
  .angulo,
  .area,
  .direcciones,
  .servicio-ahi,
  .local,
  .historia,
  .credenciales,
  .refuerzo,
  .about-resumen,
  .servicios-prosa,
  .hub-intro,
  .hub-ciudad,
  .hub-cobertura {
    display: block;
  }

  .hero__texto { gap: 16px; }
  .hero__figura,
  .apertura__figura,
  .why__figura { margin-top: 28px; }

  .angulo__col--der,
  .angulo__col--izq { grid-column: auto; }


  /* ── Location page · molde 02 · Carril ───────────────────────────────────
     LA REGLA DE ARRIBA NO LAS ALCANZA, y por eso este bloque existe. Un
     `@media` no suma especificidad: `.hero { display: block }` pesa (0,1,0) y
     `.t-location_page .hero { display: grid }` pesa (0,2,0), así que la grilla
     de escritorio seguía puesta a 360px y las mitades quedaban en dos columnas
     de 180. Cada override de este molde necesita su contraparte acá.

     La maqueta no trae media queries: el lienzo de Claude Design dibuja a
     ancho de escritorio. El corte es del sitio y es el mismo 62rem del resto. */

  .t-location_page .hero,
  .t-location_page .angulo,
  .t-location_page .servicio-ahi,
  .t-location_page .direcciones,
  .t-location_page .cta,
  .t-location_page .apertura,
  .t-location_page .faq,
  .t-location_page .normativa__texto { display: block; }

  .t-location_page .servicio-ahi__figura,
  .t-location_page .servicio-ahi__texto,
  .t-location_page .cta__texto-bloque,
  .t-location_page .cta .btn,
  .t-location_page .cta__figura { grid-column: auto; grid-row: auto; }

  /* Las celdas de texto pierden el tope de 760 y el `margin:auto` que las
     pegaba al centro: a una columna eso las descentraba. El aire lateral pasa
     a ser el del contenedor del sitio. */
  .t-location_page .hero__texto,
  .t-location_page .angulo__texto,
  .t-location_page .servicio-ahi__texto,
  .t-location_page .direcciones__col {
    max-width: none;
    margin: 0;
    padding: 48px var(--piel-borde-lat);
  }
  .t-location_page .hero__texto { padding-block: 56px 40px; gap: 16px; }

  /* Las fotos dejan de llenar una celda que ya no existe. */
  .t-location_page .hero__figura,
  .t-location_page .angulo__figura,
  .t-location_page .servicio-ahi__figura,
  .t-location_page .direcciones__figura,
  .t-location_page .cta__figura { height: auto; margin-top: 0; }

  .t-location_page .angulo__figura img,
  .t-location_page .servicio-ahi__figura img,
  .t-location_page .direcciones__figura img,
  .t-location_page .cta__figura img { min-height: 0; aspect-ratio: 16 / 10; }

  /* EL DÍPTICO DEL HERO SE QUEDA EN DOS COLUMNAS, y es a propósito: apiladas
     son dos fotos a todo el ancho antes de la primera línea de cuerpo. A 3:4
     el par entero mide ~240px de alto en un teléfono de 360 y sigue leyéndose
     como el par que el molde dibuja. */
  .t-location_page .hero__figura img { min-height: 0; aspect-ratio: 3 / 4; }

  .t-location_page .tira {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
  .t-location_page .tira__celda {
    padding: 20px 24px;
    border-right: 0;
    border-bottom: 1px solid var(--piel-borde-oscuro);
  }
  .t-location_page .tira__celda:last-child { border-bottom: 0; }
  .t-location_page .tira dd { font-size: 22px; }

  .t-location_page .apertura,
  .t-location_page .normativa,
  .t-location_page .faq { padding-block: 48px !important; }

  /* La fila de cinco se parte en dos: la cifra a todo el ancho y las señales
     de a dos. Cuatro celdas de ~160px con texto mono en mayúsculas se parten en
     tres renglones cada una, y eso deja de ser una fila para ser un bloque. */
  .t-location_page .apertura__ficha { margin-top: 28px; }
  .t-location_page .apertura__dato { flex-basis: 100%; }
  .t-location_page .apertura .trust { flex-basis: 100%; max-width: none; }
  .t-location_page .apertura .trust__lista {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .t-location_page .normativa__h2,
  .t-location_page .faq__h2 { margin-bottom: 20px; }

  .t-location_page .normativa__datos { margin-top: 32px; }

  .t-location_page .galeria { padding-block: 48px 0 !important; }
  .t-location_page .vuelta { padding-block: 32px 0 !important; }

  /* Apilado, el panel ocupa el ancho entero y el centrado del grupo deja de
     tener sentido: el bloque vuelve al borde lateral del sitio, como el resto
     de las secciones de la página. */
  .t-location_page .cta__texto-bloque {
    width: auto;
    padding: 48px var(--piel-borde-lat) 16px;
    justify-self: stretch;
  }
  .t-location_page .cta .btn { margin: 0 var(--piel-borde-lat) 48px; }

  .cuando__prosa,
  .variantes__prosa,
  .señales__prosa,
  .opciones__prosa,
  .costo__cuerpo,
  .costo__texto { columns: 1; }

  /* `grid-auto-flow: row` NO es decorativo: sin él esta regla no hace nada.
     La regla base (línea ~1236) pone `grid-auto-flow: column` para que las seis
     fichas queden en UNA fila en escritorio, y el flujo en columna manda sobre
     el `auto-fit`: el navegador abre una columna implícita nueva por cada ficha
     en vez de envolver, así que a 360px las seis seguían pedidas en fila y se
     cortaban hacia la derecha. Reportado por el operador el 2026-08-20 sobre las
     páginas de servicio. El `auto-fit` ya estaba acá y era correcto; lo que
     faltaba era devolver el flujo a filas antes de pedirle que envuelva. */
  .normativa__datos {
    grid-auto-flow: row;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  }

  /* ═══ 04 `proceso` y 05 `area` DEL HOME: A UNA COLUMNA ═══ 2026-08-20,
     reportado por el operador como "desproporcionadas en el móvil". Medido a
     390px antes de tocar nada, y era peor que una desproporción:

       .t-homepage .proceso  →  grid-template-columns: 0px 286px
       .t-homepage .area     →  grid-template-columns: 0px 282px

     La columna de texto medía CERO. El `<ol>` del proceso quedaba en 0×6357:
     ancho nulo, una palabra por renglón, y 6.357px de alto. Esa fila estiraba
     la figura —que lleva `align-self: stretch` a propósito— y la segunda foto
     se comía el sobrante: 286×5962 con un natural de 2432×1792. Una foto 4:3
     mostrada en 1:21.

     POR QUÉ NINGÚN CHEQUEO LO CAZÓ, que es lo que hay que recordar: el
     `minmax(0, 1fr)` de la regla de escritorio existe para que la columna
     pueda encogerse en vez de desbordar, y cumple — `scrollWidth` da 390 sobre
     390, o sea CERO scroll horizontal. El check de la Banda 2 mide desborde y
     pasa en verde con la sección destruida. Un layout puede romperse hacia
     adentro sin salirse ni un píxel.

     Son tres arreglos y hacen falta los tres. Con sólo el primero, los
     `grid-column: 2` abren una columna implícita y no cambia nada; sin el
     tercero, la figura sigue estirándose a la altura de la fila. */
  .t-homepage .proceso,
  .t-homepage .area { grid-template-columns: 1fr; }

  /* Los CUATRO vuelven a `auto`, y el cuarto es el que se olvida: `.area__cierre`
     lleva `grid-row: 2` fijo en la regla de escritorio, así que alcanza con
     soltar los otros tres para que la FIGURA sea empujada a la fila 3 y la foto
     termine DEBAJO de los dos recuadros de cierre, separada del texto que
     ilustra. Medido: col @9982, cierre @10856, figura @11963, con el DOM en el
     orden correcto. En una sola columna no hay filas que asignar: que las cuatro
     se coloquen solas, en el orden del marcado. */
  .t-homepage .proceso__figura,
  .t-homepage .area__figura,
  .t-homepage .area__col,
  .t-homepage .area__cierre {
    grid-column: 1;
    grid-row: auto;
  }

  /* El relleno de la esquina es una respuesta a las DOS columnas: apiladas no
     hay esquina que tapar, así que la segunda foto recupera su 4:3. */
  .t-homepage .proceso__figura { align-self: start; }
  .t-homepage .proceso__figura img:nth-of-type(2) {
    flex: none;
    min-height: 0;
    aspect-ratio: 4 / 3;
  }

  main > section,
  main > div { padding-block: 48px 0 !important; }

  .proceso,
  .why,
  .cta { margin-top: 48px !important; padding-block: 48px !important; }

  .trust { padding-block: 32px 0 !important; }
  .trust__item { border-right: 0; border-bottom: 1px solid var(--piel-borde-oscuro); }
  .trust__item:last-child { border-bottom: 0; }

  .hero__spec { border-right: 0; border-bottom: 1px solid var(--piel-borde); }

  /* UNA SOLA COLUMNA, y los tres bloques apilados.

     ⚠ UN GRID NO ENVUELVE. Con `flex-wrap` el CTA se pasaba solo a la fila de
     abajo cuando no entraba; al pasar la cabecera a grid dejó de hacerlo, y a
     430 px el botón —que mide ~500 px porque lleva el teléfono adentro— se
     montaba encima del logo. Medido el 2026-08-19 con la cabecera nueva.

     Se declara por ÁREAS y no por orden: el CTA viene tercero en el HTML y
     con autocolocación caería debajo de la nav. Y va estirado, que en un
     teléfono es lo correcto para el único botón de conversión de la barra. */
  .site-header {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "logo"
      "cta"
      "nav";
    gap: 12px;
  }
  .site-header__logo { grid-area: logo; justify-self: start; }
  .site-header__cta {
    grid-area: cta;
    justify-self: stretch;
    text-align: center;
  }
  .site-nav {
    grid-area: nav;
    justify-self: stretch;
    width: 100%;
    overflow-x: auto;
  }
  .site-nav__list { flex-wrap: nowrap; }

  .topbar { font-size: 12.5px; }
  .topbar__licencia { margin-left: 0; flex: 1 1 100%; }

  /* ── /contact/ en una columna ──────────────────────────────────────────
     El `display: block` de arriba es para los heros de texto + figura: acá
     apilaría el título DEBAJO de la foto en vez de dejarlo encima, que es lo
     único que hace a este hero el de la Vitrina. Se queda en grilla de una
     columna, con la foto y el texto compartiendo la primera fila y el
     formulario en la segunda. Es lo que hace el `auto-fit` del original
     cuando se queda sin ancho. */
  .p-contact .hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .p-contact .hero__figura,
  .p-contact .hero__texto { grid-column: 1; grid-row: 1; margin-top: 0; }
  .p-contact .hero__form { grid-column: 1; grid-row: 2; }
  .p-contact .hero__figura { min-height: 460px; }
  .p-contact .hero__texto { gap: 16px; padding: 32px 28px; }

  .p-contact main > section,
  .p-contact main > div { padding-block: 48px 0 !important; }
  .p-contact .hero { padding-block: 2.5% 0 !important; }
  .p-contact .trust { padding-block: 12px 0 !important; }
  .p-contact .vuelta { padding-block: 48px 0 !important; }

  .p-contact .trust__item { border-bottom: 0; }

  .p-contact .cta {
    margin: 48px max(var(--piel-borde-lat),
                     calc((100% - var(--piel-ancho)) / 2)) 48px !important;
    padding: 40px 28px !important;
  }

  /* ── /about/ en una columna ────────────────────────────────────────────
     Las reglas de arriba no lo alcanzan y no es un olvido: una media query no
     suma especificidad, así que el `display:block` genérico de `.historia`,
     `.area` y `.credenciales` —(0,1,0)— pierde contra el `.p-about .historia`
     de este molde, que pesa (0,2,0). Lo mismo con el `padding-block` de
     `main > section`, que pesa (0,0,2). Hay que apagarlo a mano, sección por
     sección. */

  .p-about .hero {
    padding-block: 48px !important;
    gap: 28px;
  }
  .p-about .hero__figura { flex: 1 1 100%; margin-top: 0; }
  .p-about .hero__figura img { aspect-ratio: 16 / 9; max-height: none; }

  /* `historia` vuelve al flujo del documento: la prosa y después las fotos,
     que es el orden en que está escrita. Con el envoltorio otra vez en bloque,
     las coordenadas de grilla de arriba quedan inertes solas. */
  .p-about .historia,
  .p-about .historia__texto { display: block; }
  .p-about .historia__figura { margin-top: 28px; }

  /* `area` NO pasa a bloque, y es a propósito: con los dos envoltorios
     disueltos el orden del DOM deja las píldoras y la foto al final, después
     del enlace al hub. Se queda en grilla de UNA columna con las filas
     numeradas, que conserva el orden del molde —foto, prosa, píldoras, prosa,
     enlace— en el teléfono. */
  .p-about .area {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(7, auto);
  }
  .p-about .area__rotulo { grid-area: 1 / 1 / 2 / 2; }
  .p-about .area__h2     { grid-area: 2 / 1 / 3 / 2; }
  .p-about .area__figura { grid-area: 3 / 1 / 4 / 2; margin-bottom: 28px; }
  .p-about .area__texto > p:nth-of-type(2) { grid-area: 4 / 1 / 5 / 2; }
  .p-about .area__lista                    { grid-area: 5 / 1 / 6 / 2; }
  .p-about .area__texto > p:nth-of-type(3) { grid-area: 6 / 1 / 7 / 2; }
  .p-about .area__texto > p:nth-of-type(4) { grid-area: 7 / 1 / 8 / 2; }

  .p-about .historia,
  .p-about .area,
  .p-about .credenciales,
  .p-about .faq { padding-block: 48px !important; }

  .p-about .redes,
  .p-about .gbp,
  .p-about .galeria { padding-block: 0 48px !important; }

  .p-about .vuelta { padding-block: 48px 0 !important; }

  .p-about .cta {
    margin: 48px auto !important;
    padding: 40px 28px !important;
  }
  .p-about .cta__texto-bloque { max-width: none; }
}

@media (max-width: 40rem) {
  body { font-size: 15.5px; }
  .form { padding: 24px 22px; }

  /* En el teléfono las cuatro señales se apilan: de a dos, "LICENSED &
     INSURED: CGC1524886" se parte en tres renglones dentro de una celda de
     ~160px. Apiladas siguen siendo cuatro tarjetas, no una lista. */
  .t-location_page .apertura .trust__lista {
    grid-template-columns: minmax(0, 1fr);
  }

  /* ── LA BARRA SUPERIOR, EN DOS RENGLONES Y CENTRADA ──────────────────────
     Operador, 2026-08-20. En el teléfono salía en TRES renglones y al ras
     izquierdo, y las tres líneas son un dato cada una: el número, el horario y
     la licencia.

     POR QUÉ ERAN TRES. El bloque de 62rem sube la barra a `font-size: 12.5px`
     —más grande que en escritorio, para que el mono se lea— y a 390px de
     ventana el teléfono y el horario dejan de entrar juntos en un renglón:
     114 + 236 + 22 de `gap` = 372 contra 350 de ancho útil, medido. El par se
     partía y la licencia caía tercera.

     EL TAMAÑO SE ATA AL ANCHO, que es de dónde viene el problema.
     `clamp(9.5px, 2.85vw, 11.5px)` mantiene el par en un renglón desde 320px:
     a 390 da 11.1 y el par mide ~314 contra 358 de útil; a 320 da 9.5 y mide
     ~274 contra 288. El piso de 9.5 es donde el mono en VERSALES deja de
     leerse, y por eso es un piso y no una cuenta.

     LA LICENCIA YA IBA SOLA AL SEGUNDO RENGLÓN: su `flex: 1 1 100%` sale del
     bloque de 62rem y no se toca. Acá sólo se centra, y la canaleta baja de 20
     a 16 para devolverle 8px al primer renglón. */
  .topbar {
    font-size: clamp(9.5px, 2.85vw, 11.5px);
    gap: 4px 12px;
    justify-content: center;
    text-align: center;
    padding-inline: 16px;
  }

  /* ── EL BOTÓN DE LA CABECERA SE QUEDA EN "CALL {NÚMERO}" ────────────────
     Operador, 2026-08-20: el CTA largo se cortaba. El cambio es de rótulo, no
     de tamaño de letra: bajarle los puntos al único botón de la cabecera lo
     vuelve el elemento más chico de una barra donde todo lo demás creció.
     El HTML trae los dos rótulos; acá se cambia cuál se ve. */
  .site-header__cta-label { display: none; }
  .site-header__cta-corto { display: inline; }

  /* El formulario del hero de /contact/ pasa a UNA columna: Name y Phone
     dejan de compartir renglón. A 430px la tarjeta deja ~270px de contenido,
     que no alcanza para dos campos ni con `min-width: 0`. */
  .p-contact .hero__form .form { padding: 24px 22px !important; }
  .p-contact .form__campos { grid-template-columns: minmax(0, 1fr); }
  .p-contact .form__campos > label:nth-of-type(1),
  .p-contact .form__campos > label:nth-of-type(2) { grid-column: 1 / -1; }

  /* La tarjeta del Home ya viene en una sola pista; lo único que pide el
     teléfono es la canaleta más chica. */
  .t-homepage .hero__form .form { padding: 24px 22px !important; }
  .normativa__dato,
  .grilla > *,
  .bloque__grilla > * { padding: 20px 22px; }
}