/* Hallmark · macrostructure: custom (Signed Off) · tone: architectural-trust · anchor hue: Naples Blue 230°
   Hallmark · pre-emit critique: P4 H4 E4 S5 R4 V4
   ═══════════════════════════════════════════════════════════════════════
   NAPLES GARAGE DOOR PROS · Estilos del sitio
   369 Creative Agency · septiembre 2026

   Mundo visual (sale del logo y de la firma, no de una plantilla):
   - ESTUCO claro de fondo y cabecera blanca con el logo real en sus colores.
   - NAPLES BLUE como tinta: títulos, botones y un solo campo entero (la mesa
     de la firma "Signed Off"). El azul hondo, solo en velos y en el pie.
   - El TECHO PLANO en voladizo del logo: una línea azul de 4 px que sobresale
     a la izquierda y corona grupos, notas y fichas (clase .techo).
   - Las TRES LUCES empotradas del logo (puntos dorados) como único ornamento:
     cuelgan del borde superior de cada hero interno y del cierre.
   - PAPEL con sellos en tinta dorada: la hoja de la firma.
   Letras: Jost (geométrica, pariente del "NAPLES" del logo) sobre Public Sans.
   Esquinas: 2 px en todo (arquitectura de techo plano). Nunca Inter, nunca
   degradado violeta, nunca glassmorphism, nunca el dorado como fondo de botón.

   Secciones:
    0 Variables            9 Firma "Signed Off"    18 Zonas
    1 Base                10 Confianza y reseñas   19 Formularios
    2 Tipografía          11 Agua                  20 Tiempos
    3 Estructura          12 Verificador de ZIP    21 Plano, legal y 404
    4 Botones             13 FAQ acordeón          22 Apertura "Lights On"
    5 Motivos             14 Cierre                23 Entradas por scroll
    6 Cabecera y menú     15 Pie y barra móvil     24 Responsive
    7 Hero                16 Artículo (servicios)  25 Menos movimiento
    8 Índice de servicios 17 Permisos              26 Impresión
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══ 0 · VARIABLES ═══
   Contrastes medidos (WCAG 2.2, fórmula de luminancia relativa):
   - blanco sobre --azul .............. 11.83:1  (botón principal, campo de la firma)
   - blanco sobre --azul-hondo ........ 14.56:1  (velos, pie)
   - --carbon sobre --estuco .......... 12.25:1  (texto)
   - --carbon sobre --papel ........... 12.80:1  (hoja de la firma)
   - --carbon sobre --estuco-2 ........ 11.19:1
   - --gris-texto sobre --estuco ...... 5.87:1   (texto secundario; --gris-costa da 2.12 y NO se usa como texto)
   - --gris-texto sobre --papel ....... 6.14:1
   - --gris-texto sobre --estuco-2 .... 5.37:1
   - --azul sobre --estuco ............ 10.67:1  (enlaces y títulos sobre claro)
   - --sol-tinta sobre --papel ........ 5.44:1   (sellos y estrellas; el #8A6A2B del plan daba 4.53 sobre estuco: se oscureció)
   - --sol sobre --azul-hondo ......... 7.09:1   (luces, foco sobre oscuro)
   - --sol sobre --azul ............... 5.76:1
   - --niebla sobre --azul-hondo ...... 9.59:1   (texto secundario sobre oscuro)
   - --niebla sobre --azul ............ 7.79:1
   - --sol sobre blanco ............... 2.06:1   → por eso el dorado NUNCA es fondo de botón
   - borde de campo #6E7277 sobre blanco 4.9:1   (≥ 3:1 para controles) */
:root {
  --azul: #0E3A5B;
  --azul-hondo: #0A2B44;
  --carbon: #2E2E2E;
  --gris-costa: #A7A9AC;
  --gris-texto: #5B5E63;
  --sol: #D4B06A;
  --sol-tinta: #7F6124;
  --sol-luz: #F2D696;
  --estuco: #F5F3EE;
  --estuco-2: #ECE9E1;
  --papel: #FBF8F1;
  --blanco: #FFFFFF;
  --niebla: #C9D3DC;
  --borde-campo: #6E7277;
  --error: #A3261E;
  --verde: #3FA877;
  --linea: rgba(14, 58, 91, .15);
  --linea-papel: rgba(46, 46, 46, .26);
  --foco: var(--azul);

  --letra-titulo: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;
  --letra-texto: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --radio: 2px;
  --ancho: 1240px;
  --margen: clamp(16px, 4vw, 40px);
  --banda: clamp(64px, 8vw, 120px);
  --cabecera: 84px;
  --izquierda: max(var(--margen), calc((100vw - var(--ancho)) / 2 + var(--margen)));   /* borde del contenedor */

  /* Escala de espacios de 4 pt */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px; --e8: 64px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.55, 0, .75, .1);
  --ease-inout: cubic-bezier(.7, 0, .25, 1);
}

/* ═══ 1 · BASE ═══ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: clip; scroll-padding-top: calc(var(--cabecera) + 16px); }
body {
  margin: 0; overflow-x: clip;
  font-family: var(--letra-texto); font-size: 1.1875rem; line-height: 1.6; font-weight: 400;
  color: var(--carbon); background: var(--estuco);
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
img, svg, picture { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--azul); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }
/* Sobre fondos oscuros el anillo de foco pasa a dorado (7:1 sobre azul hondo) */
.hero, .banda--azul, .pie, .caja--azul, .apertura, .menu-movil .botones { --foco: var(--sol); }
::selection { background: var(--azul); color: #fff; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.saltar { position: absolute; left: 12px; top: -80px; z-index: 2000; background: var(--azul); color: #fff; padding: 12px 18px; font-weight: 700; border-radius: var(--radio); }
.saltar:focus { top: 12px; }
.ico { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
symbol.relleno path, .relleno { fill: currentColor; stroke: none; }
.sin-quiebre { white-space: nowrap; }
[hidden] { display: none !important; }
@view-transition { navigation: auto; }

/* ═══ 2 · TIPOGRAFÍA ═══
   Jost 600 para títulos (la geometría del "NAPLES" del logo), Public Sans para
   leer. Base 19 px (18 px en móvil): el público es mayor y lee con calma. */
h1, h2, h3, h4 { font-family: var(--letra-titulo); color: inherit; margin: 0 0 .5em; text-wrap: balance; font-weight: 600; overflow-wrap: anywhere; min-width: 0; }
h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.6rem); line-height: 1.06; letter-spacing: -.015em; }
h2 { font-size: clamp(1.75rem, 1.2rem + 1.8vw, 2.7rem); line-height: 1.12; letter-spacing: -.01em; }
h3, .h3 { font-size: 1.32rem; line-height: 1.25; letter-spacing: 0; }
h4 { font-size: 1.1rem; line-height: 1.3; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.18rem, 1.08rem + .35vw, 1.38rem); line-height: 1.5; max-width: 58ch; text-wrap: pretty; }
strong { font-weight: 700; }

/* ═══ 3 · ESTRUCTURA ═══ */
.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: var(--margen); }
.angosto { max-width: 900px; }
.banda { padding-block: var(--banda); position: relative; }
.banda--estuco { background: var(--estuco); }
.banda--estuco2 { background: var(--estuco-2); }
.banda--blanca { background: var(--blanco); }
.banda--azul { background: var(--azul); color: #fff; }
.banda--azul a:not(.boton) { color: #fff; }
/* La hoja es papel dentro del campo azul: sus enlaces vuelven a la tinta azul (misma especificidad + orden) */
.banda--azul .hoja a:not(.boton) { color: var(--azul); }
.cabeza-seccion { max-width: 780px; margin-bottom: var(--e7); }
.dos-col { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.dos-col--arriba { align-items: start; }
.foto { margin: 0; position: relative; overflow: hidden; border-radius: var(--radio); background: var(--estuco-2); }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--prosa { aspect-ratio: 16 / 10; margin: 2em 0; }
.enlaces { display: flex; flex-wrap: wrap; gap: 10px 26px; font-weight: 700; margin: 0; }

/* ═══ 4 · BOTONES ═══
   Llamar siempre primero. Botón de color = azul con texto blanco (11.8:1).
   Sobre un fondo oscuro el principal se invierte: blanco con letra azul.
   El dorado nunca es fondo de botón (2.06:1 con blanco). */
.botones { display: flex; flex-wrap: wrap; gap: var(--e3); margin-top: 1.5em; }
.botones--columna { flex-direction: column; }
.botones--columna .boton { width: 100%; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 54px; padding: .8em 1.4em;
  font-family: var(--letra-titulo); font-weight: 600; font-size: 1.08rem; line-height: 1.1; letter-spacing: .01em;
  text-decoration: none; border: 2px solid transparent; border-radius: var(--radio); cursor: pointer; white-space: nowrap;
  transition: background-color .18s var(--ease-out), color .18s var(--ease-out), border-color .18s var(--ease-out), transform .1s;
}
.boton:active { transform: translateY(1px); }
.boton .ico { width: 1.2em; height: 1.2em; }
.boton--azul { background: var(--azul); color: #fff; }
.boton--azul:hover { background: var(--azul-hondo); color: #fff; }
.boton--blanco { background: #fff; color: var(--azul); }
.boton--blanco:hover { background: var(--estuco); color: var(--azul-hondo); }
.boton--linea { background: transparent; color: inherit; border-color: currentColor; }
.boton--linea:hover { background: rgba(255, 255, 255, .1); }
.banda--estuco .boton--linea:hover, .banda--estuco2 .boton--linea:hover, .banda--blanca .boton--linea:hover, .cierre .boton--linea:hover { background: rgba(14, 58, 91, .07); }
.boton--linea-clara { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .72); }
.boton--linea-clara:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }
.boton--linea-azul { background: #fff; color: var(--azul); border-color: var(--azul); }
.boton--linea-azul:hover { background: var(--estuco); }
.boton--chico { min-height: 46px; padding: .55em 1em; font-size: 1.02rem; }
.boton[disabled] { opacity: .6; cursor: progress; }
.sms-aviso { font-size: .95rem; margin: .6em 0 0; flex-basis: 100%; }

/* ═══ 5 · MOTIVOS: techo, luces, rótulo ═══ */
/* El techo plano del logo: línea azul de 4 px que sobresale 12 px a la izquierda */
.techo { position: relative; padding-bottom: .6em; margin-bottom: .4em; }
.techo::after { content: ""; position: absolute; left: -12px; right: 0; bottom: 0; height: 4px; background: var(--azul); }
/* Las tres luces empotradas: puntos dorados, siempre de a tres y siempre aria-hidden */
.luces { display: inline-flex; gap: 9px; }
.luces i { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--sol); }
/* Rótulo: mayúsculas espaciadas entre filetes, como el "GARAGE DOOR PROS" del logo.
   Solo en la hoja de la firma: no es un antetítulo de sección. */
.rotulo { display: flex; align-items: center; gap: .9em; margin: 0 0 .7em; font: 500 .78rem/1 var(--letra-titulo); letter-spacing: .24em; text-transform: uppercase; color: var(--gris-texto); }
.rotulo::before, .rotulo::after { content: ""; height: 1px; flex: 0 0 2.4em; background: currentColor; opacity: .7; }
/* La cornisa: el techo a todo el ancho con sus tres luces y los conos que caen (cierre) */
.cornisa { position: absolute; left: 0; right: 0; top: 0; height: 0; pointer-events: none; }
.cornisa__techo { position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--azul); }
.cornisa__luces { position: absolute; top: 6px; left: calc(var(--izquierda) + 40px); gap: clamp(56px, 9vw, 120px); }
.cornisa__luces i { width: 14px; height: 5px; border-radius: 0 0 7px 7px; position: relative; }
.cornisa__luces i::after {
  content: ""; position: absolute; left: 50%; top: 5px; width: 120px; height: 110px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(212, 176, 106, .30), rgba(212, 176, 106, 0) 88%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}

/* ═══ 6 · CABECERA Y MENÚ ═══
   Clara, con el logo horizontal real en sus colores (DECISIONES §2). Menú grueso. */
.cabecera { position: sticky; top: 0; z-index: 900; background: #fff; border-bottom: 1px solid var(--linea); }
.cabecera__fila { display: flex; align-items: center; gap: 20px; min-height: var(--cabecera); position: relative; }
.marca { display: flex; align-items: center; flex: none; }
.marca img { height: 54px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav > a, .nav__grupo > button {
  display: inline-flex; align-items: center; gap: .3em; padding: 10px 13px; min-height: 46px; white-space: nowrap;
  font: 700 1.03rem/1.1 var(--letra-texto); color: var(--carbon); text-decoration: none; background: none; border: 0; cursor: pointer; border-radius: var(--radio);
}
.nav > a:hover, .nav__grupo > button:hover { color: var(--azul); box-shadow: inset 0 -2px 0 var(--azul); }
.nav > a[aria-current="page"], .nav__grupo > button.actual { color: var(--azul); box-shadow: inset 0 -3px 0 var(--azul); }
.nav__grupo > button .ico { width: 1em; height: 1em; transition: transform .2s var(--ease-out); }
.nav__grupo > button[aria-expanded="true"] .ico { transform: rotate(180deg); }
.desplegable {
  position: absolute; top: 100%; left: var(--margen); right: var(--margen); z-index: 910;
  background: #fff; color: var(--carbon); padding: 30px 32px 22px; border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: 0 28px 48px -20px rgba(10, 43, 68, .38);
}
.desplegable__rejilla { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.desplegable h3 { font-size: 1.05rem; color: var(--azul); margin-bottom: .7em; }
.desplegable ul { list-style: none; margin: 0; padding: 0; }
.desplegable li a { display: block; padding: 7px 0; color: var(--carbon); text-decoration: none; font-weight: 700; font-size: 1rem; line-height: 1.25; }
.desplegable li a small { display: block; font-weight: 400; color: var(--gris-texto); font-size: .88rem; margin-top: 2px; }
.desplegable li a:hover { color: var(--azul); }
.desplegable__pie { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--linea); font-size: .98rem; font-weight: 700; }
.cabecera__llamar { flex: none; }
.hamburguesa { display: none; margin-left: auto; width: 48px; height: 48px; align-items: center; justify-content: center; background: none; border: 2px solid var(--linea); color: var(--azul); border-radius: var(--radio); cursor: pointer; }
.hamburguesa .ico { width: 26px; height: 26px; }
.menu-movil {
  position: fixed; inset: var(--cabecera) 0 0 0; z-index: 890; background: #fff; color: var(--carbon); overflow-y: auto;
  padding: 18px var(--margen) 120px; transform: translateX(100%); visibility: hidden;
  transition: transform .3s var(--ease-out), visibility 0s linear .3s;
}
.menu-movil[data-abierto="true"] { transform: none; visibility: visible; transition: transform .3s var(--ease-out); }
.menu-movil ul { list-style: none; margin: 0 0 22px; padding: 0; }
.menu-movil a { color: var(--carbon); text-decoration: none; }
.menu-movil__principal a { display: block; padding: 13px 0; font: 600 1.35rem/1.2 var(--letra-titulo); border-bottom: 1px solid var(--linea); }
.menu-movil h3 { font-size: 1rem; color: var(--azul); margin: 20px 0 4px; }
.menu-movil ul:not(.menu-movil__principal) a { display: block; padding: 9px 0; font-weight: 700; }
.estado { display: inline-flex; align-items: center; gap: 9px; margin: 0; font-size: .95rem; }
.estado__punto { width: 9px; height: 9px; border-radius: 50%; background: var(--gris-costa); flex: none; }
.estado--abierto .estado__punto { background: var(--verde); }

/* ═══ 7 · HERO ═══
   Home: foto a pantalla completa con velo azul hondo más denso del lado del
   texto; en móvil, la foto vertical con el velo desde abajo.
   Internas: hero partido (texto en campo azul hondo, foto a la derecha
   fundida con un velo) porque casi todas las fotos tienen caras a los dos
   lados y un texto encima las tapaba (fotos.md). */
.hero { position: relative; display: grid; isolation: isolate; overflow: hidden; background: var(--azul-hondo); color: #fff; }
.hero__fondo { position: absolute; inset: 0; z-index: -2; }
.hero__fondo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--encuadre, 50% 50%); }
.hero h1 { color: #fff; }
.hero .lead { color: #E9EEF2; }
.hero a:not(.boton) { color: #fff; }
.hero__contenido { position: relative; }

.hero--home { min-height: min(calc(100svh - var(--cabecera)), 880px); align-items: end; }
.hero--home .hero__fondo img { object-position: var(--encuadre, 64% 28%); }
.hero--home::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(10, 43, 68, .94) 0%, rgba(10, 43, 68, .88) 26%, rgba(10, 43, 68, .6) 46%, rgba(10, 43, 68, .14) 66%, rgba(10, 43, 68, 0) 78%),
    linear-gradient(0deg, rgba(10, 43, 68, .55) 0%, rgba(10, 43, 68, 0) 40%);
}
.hero--home .hero__contenido { padding-block: 96px clamp(64px, 10vh, 112px); }
.hero--home h1 { font-size: clamp(2.5rem, 1.3rem + 3.6vw, 4.4rem); max-width: 14ch; }
/* Portátil y tableta horizontal: el texto ocupa más del cuadro, el velo llega más lejos */
@media (min-width: 761px) and (max-width: 1240px) {
  .hero--home::before {
    background:
      linear-gradient(90deg, rgba(10, 43, 68, .95) 0%, rgba(10, 43, 68, .9) 36%, rgba(10, 43, 68, .55) 54%, rgba(10, 43, 68, .1) 70%, rgba(10, 43, 68, 0) 78%),
      linear-gradient(0deg, rgba(10, 43, 68, .55) 0%, rgba(10, 43, 68, 0) 40%);
  }
  .hero--home h1 { max-width: 12ch; }
  .hero--home .hero__fondo img { object-position: var(--encuadre, 22% 28%); }   /* el técnico se corre a la derecha, fuera del texto */
  .hero--home .lead { max-width: 36ch; }
}
.hero--home .lead { max-width: 40ch; }

.hero--interno { grid-template-columns: minmax(0, 1.06fr) minmax(0, 1fr); min-height: clamp(460px, 58vh, 620px); }
.hero--interno .hero__contenido {
  grid-column: 1; grid-row: 1; align-self: center; width: auto; max-width: none; margin: 0;
  padding: 88px clamp(28px, 4vw, 64px) 72px var(--izquierda);
}
.hero--interno h1 { font-size: clamp(2.1rem, 1.3rem + 2.4vw, 3.3rem); max-width: 20ch; }
.hero--interno .lead { max-width: 46ch; }
.hero__foto { grid-column: 2; grid-row: 1; position: relative; min-height: 100%; }
.hero__foto .hero__fondo { z-index: 0; }
.hero__foto::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, var(--azul-hondo) 0%, rgba(10, 43, 68, .5) 12%, rgba(10, 43, 68, 0) 34%);
}
/* Las tres luces cuelgan del borde de la cabecera sobre el campo del texto, con sus conos */
.hero > .hero__luces, .hero--plano .hero__luces { position: absolute; top: 0; left: calc(var(--izquierda) + 4px); z-index: 2; gap: 44px; pointer-events: none; }
.hero__luces i { width: 12px; height: 4px; border-radius: 0 0 6px 6px; position: relative; background: var(--sol); }
.hero__luces i::after {
  content: ""; position: absolute; left: 50%; top: 4px; width: 96px; height: 120px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(242, 214, 150, .2), rgba(242, 214, 150, 0) 86%);
  clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%);
}
.migas ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 20px; padding: 0; font-size: .95rem; color: var(--niebla); }
.migas li + li::before { content: "/"; margin-right: 6px; color: var(--niebla); }
.hero .migas a { color: var(--niebla); }
.hero .migas a:hover { color: #fff; }
.ficha { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 4px 0 0; padding: 0; font-size: 1rem; color: #E9EEF2; }
.ficha li { display: inline-flex; align-items: center; gap: 8px; }
.ficha .ico, .ficha-zips .ico { color: var(--sol); }
.ficha-zips { display: inline-flex; align-items: center; gap: 8px; font-size: 1rem; color: var(--niebla); margin: 0; }

.hero--plano { min-height: 0; background: var(--azul); }   /* azul de marca: no se funde con el pie (azul hondo) en el 404 */
.hero--plano .enlaces { margin-top: 28px; }
.hero--plano .enlaces a { color: #fff; }
.hero--plano .hero__contenido { padding-block: 72px 64px; }
.hero--plano .hero__luces { position: static; display: flex; margin: 0 0 26px; }
.hero--plano .hero__luces i { width: 9px; height: 9px; border-radius: 50%; }
.hero--plano .hero__luces i::after { display: none; }

/* ═══ 8 · ÍNDICE DE SERVICIOS ═══
   Todo a la vista por grupo (nunca pestañas cerradas): nombre, síntoma y
   tiempo en sitio. El título de cada grupo lleva el techo plano. */
.indice__rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px clamp(32px, 5vw, 80px); }
.indice__col { display: grid; gap: 48px; align-content: start; }
.indice__grupo h3 { font-size: 1.4rem; color: var(--azul); }
.indice { list-style: none; margin: 0; padding: 0; }
.indice li { border-bottom: 1px solid var(--linea); }
.indice a {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nombre tiempo" "que tiempo";
  gap: 2px 20px; align-items: center; padding: 15px 8px; color: var(--carbon); text-decoration: none; transition: background-color .15s;
}
.indice a:hover { background: #fff; }
.indice a:hover .indice__nombre { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.indice__nombre { grid-area: nombre; font-weight: 700; font-size: 1.08rem; }
.indice__que { grid-area: que; color: var(--gris-texto); font-size: .96rem; }
.indice__tiempo { grid-area: tiempo; display: inline-flex; align-items: center; gap: 6px; justify-self: end; max-width: 14em; color: var(--azul); font-size: .93rem; font-weight: 500; line-height: 1.3; text-align: right; }
.indice__tiempo .ico { width: 1.05em; height: 1.05em; }
.indice__nota { display: flex; flex-wrap: wrap; gap: 10px 32px; margin: 40px 0 0; font-weight: 700; }
/* Cabeza de la sección de servicios: el texto y la foto 13 (dos técnicos con el resorte) */
.cabeza-seccion--foto { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.servicios__foto { aspect-ratio: 3 / 2; }

/* Franja bajo el hero: cuatro compromisos en una línea, sin tarjetas, separados por filetes */
.franja { background: #fff; border-bottom: 1px solid var(--linea); }
.franja__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.franja__lista li { display: flex; gap: 14px; align-items: flex-start; padding: 26px 22px 24px; border-left: 1px solid var(--linea); font-size: .98rem; line-height: 1.4; color: var(--gris-texto); }
.franja__lista li:first-child { border-left: 0; padding-left: 0; }
.franja__lista .ico { width: 28px; height: 28px; color: var(--sol-tinta); stroke-width: 1.6; margin-top: 2px; }
.franja__lista strong { display: block; font: 600 1.08rem/1.25 var(--letra-titulo); color: var(--azul); margin-bottom: 3px; }

/* ═══ 9 · FIRMA "SIGNED OFF" ═══
   El único campo azul entero del sitio es la mesa donde se firma: a la
   izquierda los controles; a la derecha la hoja de papel con los sellos en
   tinta dorada. Sin JS: la hoja de ejemplo completa, sin controles. */
.firma { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.firma__lado { position: sticky; top: calc(var(--cabecera) + 28px); }
.firma .lead { color: #E3EAF0; }
.firma__ejemplo { color: var(--niebla); font-size: 1rem; }
.firma__controles { display: none; }
.js .firma__controles { display: block; }
.firma__zip label, .firma__etiqueta { display: block; font: 600 1.02rem/1.2 var(--letra-titulo); margin: 26px 0 10px; color: #fff; }
.fila-zip { display: flex; flex-wrap: wrap; gap: 10px; }
.fila-zip input {
  width: 8.5ch; min-height: 54px; padding: 0 .55em; font: 600 1.35rem/1 var(--letra-titulo); letter-spacing: .08em;
  color: #fff; background: var(--azul-hondo); border: 2px solid rgba(255, 255, 255, .75); border-radius: var(--radio);
}
.fila-zip input:focus { border-color: #fff; }
.firma__estado { min-height: 1.6em; margin: 12px 0 0; font-size: 1rem; color: #E3EAF0; }
.firma__estado strong { color: #fff; }
.firma__estado.error strong { color: var(--sol); }
.conmutador { display: flex; flex-wrap: wrap; gap: 8px; }
.conmutador button {
  min-height: 48px; padding: .55em 1.05em; font: 600 1.02rem/1.1 var(--letra-titulo); color: #fff; background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .55); border-radius: var(--radio); cursor: pointer; transition: background-color .15s, color .15s, border-color .15s;
}
.conmutador button:hover { border-color: #fff; }
.conmutador button[aria-pressed="true"] { background: #fff; color: var(--azul); border-color: #fff; }
.firma__imprimir { margin-top: 30px; }
.firma__mas { margin: 18px 0 0; font-weight: 700; }
.firma__pie { grid-column: 1 / -1; max-width: 76ch; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .22); color: #E3EAF0; }
.firma__pie p:first-child { margin-bottom: 0; }

/* La mesa: la hoja encima de otra hoja un poco torcida, como un legajo de verdad */
.firma__mesa { position: relative; }
.firma__mesa::before {
  content: ""; position: absolute; inset: 14px -8px -10px 10px; background: #EDE6D6; border-radius: var(--radio);
  rotate: 1.6deg; box-shadow: 0 24px 40px -26px rgba(3, 18, 30, .7);
}
.hoja {
  --paso-sello: 180ms;
  position: relative; background: var(--papel); color: var(--carbon); border-radius: var(--radio); padding: clamp(24px, 3.4vw, 46px);
  box-shadow: 0 34px 60px -34px rgba(3, 18, 30, .8), 0 10px 20px -12px rgba(3, 18, 30, .45);

}
.hoja__cabeza { border-bottom: 1px solid var(--linea-papel); padding-bottom: 20px; margin-bottom: 4px; }
.hoja h3 { font-size: clamp(1.4rem, 1.15rem + .8vw, 1.8rem); color: var(--azul); margin: 0 0 .65em; }
.hoja__datos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 30px; margin: 0; font-size: .95rem; line-height: 1.45; }
.hoja__datos dt { font-weight: 700; color: var(--gris-texto); font-size: .84rem; margin-bottom: 3px; }
.hoja__datos dd { margin: 0; }
.hoja__paradas { list-style: none; margin: 0; padding: 0; }
.parada { display: grid; grid-template-columns: minmax(0, 1fr) 86px; gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px dashed var(--linea-papel); break-inside: avoid; }
.parada--final { grid-template-columns: minmax(0, 1fr) 108px; border-bottom: 0; }
.parada__titulo { font-size: 1.16rem; line-height: 1.25; margin: 0 0 6px; color: var(--carbon); }
/* Filas de formulario: rótulo a la izquierda, lo que queda escrito a la derecha */
.parada__datos { display: grid; gap: 6px; margin: 4px 0 6px; font-size: .98rem; line-height: 1.45; }
.parada__datos div { display: grid; grid-template-columns: 6.6em minmax(0, 1fr); gap: 0 .8em; align-items: baseline; }
.parada__datos dt { font: 600 .8rem/1.3 var(--letra-titulo); letter-spacing: .08em; text-transform: uppercase; color: var(--gris-texto); }
.parada__datos dd { margin: 0; }
.parada__datos div + div dd { font-weight: 700; }
.parada__detalle, .parada__jur { font-size: .93rem; line-height: 1.5; color: var(--gris-texto); margin: 6px 0 0; }
.parada__jur strong { color: var(--carbon); }
/* El sello: un solo anillo en tinta dorada, un poco torcido como un sello de verdad */
.sello { width: 86px; height: 86px; color: var(--sol-tinta); rotate: -6deg; }
.parada:nth-child(3n + 2) .sello { rotate: 4deg; }
.parada:nth-child(3n) .sello { rotate: -2deg; }
.sello--final, .parada--final .sello { width: 108px; height: 108px; rotate: -8deg; }
.sello__num { font: 600 30px var(--letra-titulo); fill: currentColor; }
.sello__fin { font: 700 13px var(--letra-titulo); fill: currentColor; }
.sello__fin--chica { font-size: 9.5px; }
.hoja__pie { margin-top: 20px; font-size: .93rem; color: var(--gris-texto); }
.hoja__pie p { margin: 0 0 14px; }
.hoja__firma { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-top: 14px; border-top: 1px solid var(--linea-papel); font: 500 .86rem/1.3 var(--letra-titulo); letter-spacing: .04em; color: var(--carbon); }
/* El estampado: con JS y movimiento permitido, los sellos esperan y caen uno tras otro */
.js .hoja--lista .sello { opacity: 0; }
.hoja--lista.estampar .sello { animation: estampar 200ms var(--ease-out) both; animation-delay: calc(var(--i) * var(--paso-sello) + 120ms); }
@keyframes estampar {
  0% { opacity: 0; transform: scale(1.5); }
  70% { opacity: 1; transform: scale(.95); }
  100% { opacity: 1; transform: scale(1); }
}

/* ═══ 10 · CONFIANZA Y RESEÑAS ═══
   Lo que se puede exigir, con los botones al lado, y las reseñas (de ejemplo,
   fuera del schema) en la columna vecina. */
.confianza__rejilla { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(40px, 6vw, 96px); align-items: start; }
.confianza__lado > p { max-width: 60ch; }
.confianza__foto { aspect-ratio: 4 / 5; position: sticky; top: calc(var(--cabecera) + 28px); }
.confianza__foto img { object-position: 50% 40%; }
.confianza__mas { margin: 26px 0 0; font-weight: 700; }
.confianza__lista { list-style: none; margin: 8px 0 0; padding: 0; }
.confianza__lista li { padding: 18px 0; border-top: 1px solid var(--linea); }
.confianza__lista li:last-child { border-bottom: 1px solid var(--linea); }
.confianza__lista h3 { font-size: 1.18rem; margin: 0 0 .25em; color: var(--azul); }
.confianza__lista p { margin: 0; color: var(--gris-texto); }
.confianza__lista--ancha { columns: 2 320px; column-gap: 48px; margin-top: 24px; }
.confianza__lista--ancha li { break-inside: avoid; }
.resenas { columns: 3 280px; column-gap: 44px; margin-top: 28px; }
.resena { break-inside: avoid; margin: 0 0 32px; padding-top: 18px; border-top: 1px solid var(--linea); }
.estrellas { display: flex; gap: 3px; color: var(--sol-tinta); margin-bottom: 10px; }
.estrella { width: 18px; height: 18px; fill: currentColor; }
.estrella--vacia { color: var(--gris-texto); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.resena p { font-size: 1.02rem; margin: 0 0 12px; }
.resena footer { font-size: .92rem; color: var(--gris-texto); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.resena footer strong { color: var(--carbon); }

/* ═══ 11 · AGUA ═══ */
.agua__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.agua__foto { aspect-ratio: 5 / 6; }
.agua__foto img { object-position: 72% 50%; }
.datos { display: grid; gap: 18px; margin: 24px 0 28px; }
.datos div { padding-top: 14px; border-top: 1px solid var(--linea); }
.datos dt { font: 600 1.12rem/1.3 var(--letra-titulo); color: var(--azul); }
.datos dd { margin: 4px 0 0; }

/* ═══ 12 · VERIFICADOR DE ZIP (zonas) ═══ */
.zonas__rejilla { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.zip label { display: block; font: 600 1.06rem/1.2 var(--letra-titulo); margin: 26px 0 10px; }
.zip .fila-zip input { color: var(--carbon); background: #fff; border-color: var(--borde-campo); }
.zip .fila-zip input:focus { border-color: var(--azul); }
.zip__respuesta { margin: 16px 0 0; padding: 16px 18px; background: #fff; border-radius: var(--radio); box-shadow: inset 0 4px 0 var(--azul); }
.zip__respuesta:empty { padding: 0; box-shadow: none; }
.zip__respuesta.fuera { box-shadow: inset 0 4px 0 var(--sol-tinta); }
.zonas { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linea); }
.zonas a { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 17px 6px; border-bottom: 1px solid var(--linea); text-decoration: none; color: var(--carbon); }
.zonas a:hover { background: #fff; }
.zonas a:hover strong { text-decoration: underline; text-underline-offset: 4px; }
.zonas strong { font: 600 1.18rem/1.25 var(--letra-titulo); color: var(--azul); }
.zonas span { color: var(--gris-texto); font-size: .95rem; text-align: right; }
.zonas--grande span { max-width: 24ch; }
.zonas__nota { margin: 22px 0 0; font-weight: 700; }
.zonas__aviso { margin: 22px 0 0; color: var(--gris-texto); font-size: 1rem; }
.zonas__aviso a { font-weight: 700; }

/* ═══ 13 · FAQ ACORDEÓN ═══
   Abre con la primera respuesta a la vista; sin JS, todas abiertas. La fila
   se abre animando grid-template-rows (sin medir alturas). */
.faq { border-top: 1px solid var(--linea); margin-bottom: 1.2em; }
.faq__item { border-bottom: 1px solid var(--linea); }
.faq__item h3 { margin: 0; font-size: inherit; }
.faq__boton {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; width: 100%; padding: 20px 0;
  text-align: left; font: 600 1.16rem/1.4 var(--letra-titulo); color: var(--carbon); background: none; border: 0; cursor: pointer;
}
.faq__boton:hover { color: var(--azul); }
.faq__signo { position: relative; flex: none; width: 18px; height: 18px; margin-top: .3em; color: var(--azul); }
.faq__signo::before, .faq__signo::after { content: ""; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; background: currentColor; transition: transform .3s var(--ease-out); }
.faq__signo::after { transform: rotate(90deg); }
.faq__boton[aria-expanded="true"] .faq__signo::after { transform: rotate(0); }
.faq__panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease-out); }
.faq__panel > div { overflow: hidden; visibility: visible; max-width: 68ch; }
.faq__panel > div > :last-child { margin-bottom: 1.2em; }
.js .faq__panel[data-abierto="false"] { grid-template-rows: 0fr; }
.js .faq__panel[data-abierto="false"] > div { visibility: hidden; transition: visibility 0s linear .3s; }

/* ═══ 14 · CIERRE ═══
   Bajo el techo con sus tres luces: el teléfono grande y los dos botones. */
.cierre { background: var(--estuco-2); padding-top: calc(var(--banda) + 24px); overflow: hidden; }
.cierre__rejilla { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; position: relative; }
.cierre h2 { color: var(--azul); }
.cierre__tel { justify-self: end; text-decoration: none; color: var(--azul); text-align: right; }
.cierre__tel span { display: block; font: 600 clamp(2.3rem, 1.4rem + 2.8vw, 3.8rem)/1 var(--letra-titulo); letter-spacing: -.01em; white-space: nowrap; }
.cierre__tel small { display: block; color: var(--gris-texto); font-size: .98rem; margin-top: 10px; }
.cierre__tel:hover span { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* ═══ 15 · PIE Y BARRA MÓVIL ═══ */
.pie { background: var(--azul-hondo); color: #E7EDF2; padding: 76px 0 30px; }
.pie__rejilla { display: grid; grid-template-columns: minmax(0, 1.35fr) repeat(4, minmax(0, 1fr)); gap: 36px; }
.pie__marca img { width: 240px; height: auto; margin-bottom: 22px; }
.pie h2 { font-size: 1.05rem; color: #fff; margin: 0 0 .8em; letter-spacing: .01em; }
.pie__h2-mas { margin-top: 1.6em !important; }
.pie ul { list-style: none; margin: 0; padding: 0; }
.pie li a { display: inline-block; padding: 5px 0; color: #E7EDF2; text-decoration: none; font-size: .96rem; line-height: 1.35; }
.pie a:hover { color: #fff; text-decoration: underline; }
.pie__tel { font: 600 1.75rem/1 var(--letra-titulo); color: #fff; text-decoration: none; }
.pie .estado { color: #E7EDF2; margin-bottom: 12px; }
.pie__obra { font-size: .92rem; color: var(--niebla); max-width: 34ch; }
.pie__legal { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 52px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .16); font-size: .9rem; color: var(--niebla); }
.pie__legal p { margin: 0; }
.pie__legal a { color: var(--niebla); margin-right: 18px; }
.pie__credito { font-size: .84rem; color: var(--niebla); margin: 16px 0 0; }
.pie__credito a { color: var(--niebla); }
.barra-movil { display: none; }

/* ═══ 16 · ARTÍCULO (SERVICIOS) ═══ */
.articulo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(32px, 5vw, 80px); align-items: start; }
.prosa { max-width: 70ch; }
.prosa h2 { font-size: clamp(1.5rem, 1.15rem + 1vw, 2rem); margin-top: 1.8em; }
.prosa h2:first-child { margin-top: 0; }
.prosa h3 { margin-top: 1.4em; }
.prosa ul:not([class]) { padding-left: 1.2em; }
.prosa li { margin-bottom: .4em; }
.lista-check { list-style: none; padding: 0; margin: 0 0 1.4em; display: grid; gap: 12px; }
.lista-check li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; margin: 0; }
.lista-check .ico { color: var(--azul); margin-top: .22em; stroke-width: 2.2; }
.nota-honesta, .respuesta-corta, .abierto { position: relative; background: #fff; padding: 28px 30px 24px; margin: 2.2em 0; border-radius: var(--radio); }
.nota-honesta::before, .respuesta-corta::before, .abierto::before { content: ""; position: absolute; left: -12px; right: 0; top: 0; height: 4px; background: var(--azul); }
.nota-honesta h3 { color: var(--azul); }
.nota-honesta > :last-child, .respuesta-corta > :last-child { margin-bottom: 0; }
.lateral { display: grid; gap: 24px; }
.tarjeta-firmado { position: relative; background: var(--papel); padding: 28px 26px 24px; border-radius: var(--radio); box-shadow: 0 16px 34px -26px rgba(10, 43, 68, .55); }
.tarjeta-firmado .sello { position: absolute; top: -20px; right: -8px; width: 84px; height: 84px; rotate: 8deg; }
.tarjeta-firmado h2 { margin: 0 0 .8em; padding-right: 64px; color: var(--azul); }
.lista-firmado { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: .98rem; }
.lista-firmado li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; }
.lista-firmado .ico { color: var(--sol-tinta); margin-top: .2em; stroke-width: 2.2; }
.tarjeta__permiso { font-size: .95rem; margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--linea-papel); }
.caja { background: #fff; padding: 26px 24px; border-radius: var(--radio); }
.caja h2 { margin-bottom: .6em; }
.caja--azul { background: var(--azul); color: #fff; }
.caja--azul p { color: #E3EAF0; }
.caja--azul a:not(.boton) { color: #fff; }
.caja--papel { background: var(--papel); }
.caja__estimado { margin: 16px 0 0; font-weight: 700; }
.caja__viento { display: flex; gap: 10px; align-items: flex-start; font-size: .96rem; margin: 14px 0 0; }
.caja__viento .ico { color: var(--azul); margin-top: .15em; }
.relacionados { list-style: none; margin: 0; padding: 0; }
.relacionados a { display: block; padding: 10px 0; border-bottom: 1px solid var(--linea); font-weight: 700; text-decoration: none; }
.relacionados a:hover { text-decoration: underline; }

/* ═══ 17 · PERMISOS ═══
   Las tres oficinas lado a lado. Con subgrid, las filas se alinean entre
   columnas y se leen como una tabla; en móvil, una ficha por oficina. */
.respuesta-corta { margin-top: 0; font-size: 1.08rem; }
.tabla__titulo { margin-top: var(--e7); }
.jurisdicciones { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(var(--filas, 10), auto); column-gap: 22px; margin-top: 30px; }
.juris { display: grid; grid-row: span var(--filas, 10); grid-template-rows: subgrid; background: #fff; border-radius: var(--radio); padding: 0 24px 22px; scroll-margin-top: calc(var(--cabecera) + 20px); }
.juris h3 { position: relative; margin: 0; padding: 24px 0 16px; font-size: 1.4rem; color: var(--azul); }
.juris h3::after { content: ""; position: absolute; left: -12px; right: 0; bottom: 0; height: 4px; background: var(--azul); }
.juris:target { outline: 3px solid var(--sol-tinta); outline-offset: 4px; }
.juris__fila { padding: 14px 0; border-bottom: 1px solid var(--linea); font-size: .96rem; line-height: 1.5; }
.juris__fila:last-child { border-bottom: 0; }
.juris__fila h4 { font: 700 .84rem/1.2 var(--letra-texto); color: var(--gris-texto); margin: 0 0 6px; }
.juris__fila p { margin: 0 0 .5em; }
.juris__fila p:last-child { margin: 0; }
.juris__fila ul { margin: 0; padding-left: 1.1em; }
.fuentes { font-size: .93rem; padding-left: 1.1em; }
.fuentes li { margin-bottom: .35em; overflow-wrap: anywhere; }
.revisado { font-size: .93rem; color: var(--gris-texto); margin-top: 2em; }
.en-esta-pagina { margin: 40px 0 0; }
.en-esta-pagina h2 { margin-bottom: .6em; }
.en-esta-pagina ul { list-style: none; margin: 0; padding: 0; columns: 2 260px; column-gap: 40px; border-top: 1px solid var(--linea); }
.en-esta-pagina li { break-inside: avoid; border-bottom: 1px solid var(--linea); }
.en-esta-pagina a { display: block; padding: 11px 0; font-weight: 700; text-decoration: none; }
.en-esta-pagina a:hover { text-decoration: underline; }
.seccion, .abierto { scroll-margin-top: calc(var(--cabecera) + 20px); }
.prosa .seccion + .seccion > h2, .prosa .seccion + .abierto > h2 { margin-top: 1.8em; }
.prosa .seccion:first-child > h2 { margin-top: 0; }

/* ═══ 18 · ZONAS ═══ */
.barrios { font-size: 1.02rem; }
.populares { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.populares a { display: block; height: 100%; padding: 18px 18px 16px; background: #fff; border-radius: var(--radio); text-decoration: none; color: var(--carbon); box-shadow: inset 0 4px 0 var(--azul); }
.populares strong { display: block; font: 600 1.08rem/1.25 var(--letra-titulo); color: var(--azul); margin-bottom: 4px; }
.populares span { font-size: .92rem; color: var(--gris-texto); }
.populares a:hover strong { text-decoration: underline; }

/* ═══ 19 · FORMULARIOS ═══ */
.caja-form { background: #fff; padding: clamp(22px, 3vw, 38px); border-radius: var(--radio); }
.campo { margin-bottom: 18px; }
.campo label { display: block; font: 600 1.02rem/1.2 var(--letra-titulo); margin-bottom: 7px; }
.campo input, .campo select, .campo textarea {
  width: 100%; font: inherit; font-size: 1.06rem; padding: .7em .8em; min-height: 52px;
  border: 2px solid var(--borde-campo); border-radius: var(--radio); background: #fff; color: var(--carbon);
}
.campo input:focus, .campo select:focus, .campo textarea:focus { border-color: var(--azul); outline: 3px solid rgba(14, 58, 91, .3); outline-offset: 0; }
.campo--error input, .campo--error textarea { border-color: var(--error); }
.campo__error { color: var(--error); font-weight: 700; font-size: .94rem; margin: 6px 0 0; }
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formulario__falla { background: var(--papel); padding: 12px 14px; border-radius: var(--radio); box-shadow: inset 0 3px 0 var(--error); }
.formulario__legal { font-size: .95rem; color: var(--gris-texto); margin: 14px 0 0; }
.campo__ayuda { font-size: .95rem; color: var(--gris-texto); margin: -2px 0 8px; }
.campo--casilla { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; align-items: start; margin: 4px 0 22px; }
.campo--casilla input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--azul); }
.campo--casilla label { font: 400 .95rem/1.45 var(--letra-texto); color: var(--gris-texto); margin: 0; }
.formulario__exito { background: var(--papel); padding: 26px; border-radius: var(--radio); box-shadow: inset 0 4px 0 var(--azul); }
.formulario__sinjs { font-weight: 700; }
.pasos { list-style: none; counter-reset: paso; margin: 0 0 1.4em; padding: 0; display: grid; gap: 14px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 0 12px; }
.pasos li::before { content: counter(paso); grid-row: span 2; font: 600 1.3rem/1.3 var(--letra-titulo); color: var(--azul); }
.pasos h3 { font-size: 1.14rem; margin: 0 0 .2em; }
.pasos p { margin: 0; color: var(--gris-texto); }
.notas { padding-left: 1.2em; }
.notas li { margin-bottom: .6em; }
.contacto__h { margin-top: 1.6em; }
.datos--horario { margin-top: 12px; }
.datos--horario dt { font-size: 1.02rem; }
.contacto__tel a { font: 600 clamp(2rem, 1.4rem + 2vw, 2.9rem)/1.1 var(--letra-titulo); text-decoration: none; }
.contacto__datos .estado { margin-bottom: 1em; }

/* ═══ 20 · TIEMPOS ═══ */
.tabla-rodante { overflow-x: auto; margin: 24px 0 36px; border-radius: var(--radio); }
.tabla { width: 100%; border-collapse: collapse; background: #fff; font-size: 1rem; }
.tabla thead th { background: var(--azul); color: #fff; text-align: left; padding: 14px 20px; font: 600 1.02rem/1.2 var(--letra-titulo); }
.tabla th[scope="row"], .tabla td { padding: 15px 20px; border-bottom: 1px solid var(--linea); text-align: left; vertical-align: top; }
.tabla th[scope="row"] { font-weight: 400; width: 58%; }
.tabla th[scope="row"] a { font-weight: 700; }
.tabla th[scope="row"] small { display: block; color: var(--gris-texto); font-size: .9rem; margin-top: 2px; }
.tabla__grupo th { background: var(--estuco-2); font: 600 1.06rem/1.2 var(--letra-titulo); color: var(--azul); padding: 14px 20px; text-align: left; }

/* ═══ 21 · PLANO, LEGAL Y 404 ═══ */
.hero--plano .botones .boton--linea { color: #fff; }

/* ═══ 22 · APERTURA "LIGHTS ON" ═══
   Velo azul hondo con el isotipo real del logo en su versión clara. Las tres
   luces empotradas se encienden una por una (150 ms), los conos se abren y el
   velo se levanta. Total ≤ 1,6 s. La puerta no sube. Solo existe con JS y sin
   "reducir movimiento". El velo provisional del <head> evita que se vea el
   hero medio segundo antes de que el JS inserte el real. */
.apertura-pendiente body::before { content: ""; position: fixed; inset: 0; z-index: 2999; background: var(--azul-hondo); }
.apertura {
  position: fixed; inset: 0; z-index: 3000; display: grid; place-items: center; background: var(--azul-hondo); cursor: pointer;
  transition: opacity .42s var(--ease-in), transform .42s var(--ease-in);
}
.apertura__escena { position: relative; width: min(500px, 74vw); aspect-ratio: var(--proporcion, 2 / 1); }
.apertura__logo { width: 100%; height: auto; opacity: 0; transform: scale(.985); transition: opacity .3s var(--ease-out), transform 1.2s var(--ease-out); }
.apertura.lista .apertura__logo { opacity: .94; transform: none; }
.apertura__luz {
  position: absolute; left: var(--x); top: var(--y); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--sol-luz); opacity: 0; transform: scale(.4); transition: opacity .12s var(--ease-out), transform .2s var(--ease-out);
}
.apertura.luz-1 .apertura__luz:nth-child(2), .apertura.luz-2 .apertura__luz:nth-child(3), .apertura.luz-3 .apertura__luz:nth-child(4) {
  opacity: 1; transform: none; box-shadow: 0 0 16px 5px rgba(242, 214, 150, .7);
}
.apertura__luz::after {
  content: ""; position: absolute; left: 50%; top: 7px; width: clamp(64px, 12vw, 120px); height: clamp(80px, 15vw, 150px);
  transform: translateX(-50%) scaleY(0); transform-origin: 50% 0; opacity: 0;
  background: linear-gradient(180deg, rgba(242, 214, 150, .55), rgba(242, 214, 150, 0));
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  transition: transform .34s var(--ease-out), opacity .34s var(--ease-out);
}
.apertura.abre .apertura__luz::after { transform: translateX(-50%) scaleY(1); opacity: 1; }
.apertura.sube { opacity: 0; transform: translateY(-3%); }
.apertura.rapido, .apertura.rapido * { transition-duration: .18s !important; transition-delay: 0s !important; }
.apertura__saltar { position: absolute; right: 22px; bottom: 20px; color: var(--niebla); font: 500 .92rem/1 var(--letra-titulo); letter-spacing: .08em; }

/* ═══ 23 · ENTRADAS POR SCROLL ═══
   Solo las fotos marcadas, una vez. La clase .por-entrar la pone el JS: sin JS
   o sin IntersectionObserver, todo queda visible. */
.js [data-reveal].por-entrar { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease-out), transform .9s var(--ease-out); }
.js [data-reveal].por-entrar.en-vista { opacity: 1; transform: none; }

/* ═══ 24 · RESPONSIVE ═══ */
@media (max-width: 1240px) {
  .cabecera__llamar span { display: none; }
  .cabecera__llamar { padding-inline: .8em; }
}
@media (max-width: 1100px) {
  .nav { display: none; }
  .hamburguesa { display: inline-flex; margin-left: 0; }
  .cabecera__llamar { margin-left: auto; }
  .cabecera__llamar span { display: inline; }
  .pie__rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pie__marca { grid-column: 1 / -1; }
}
@media (max-width: 1000px) {
  .firma, .confianza__rejilla, .agua__rejilla, .zonas__rejilla, .dos-col, .articulo, .cierre__rejilla, .cabeza-seccion--foto { grid-template-columns: minmax(0, 1fr); }
  .firma__lado, .confianza__lado, .confianza__foto { position: static; }
  .confianza__foto { aspect-ratio: 16 / 11; }
  .franja__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .franja__lista li:nth-child(3) { border-left: 0; padding-left: 0; }
  .franja__lista li:nth-child(n + 3) { border-top: 1px solid var(--linea); }
  .agua__foto { aspect-ratio: 16 / 10; }
  .cierre__tel { justify-self: start; text-align: left; }
  .jurisdicciones { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 22px; }
  .juris { grid-row: auto; grid-template-rows: none; }
  .populares { grid-template-columns: minmax(0, 1fr); }
  .tarjeta-firmado { margin-top: 20px; }
}
@media (max-width: 760px) {
  :root { --cabecera: 64px; }
  body { font-size: 1.125rem; }
  .marca img { height: 40px; }
  .cabecera__fila { gap: 12px; }
  .cabecera__llamar { min-height: 44px; }
  .cabecera__llamar span { display: none; }

  .hero--home { min-height: calc(100svh - var(--cabecera)); }
  .hero--home .hero__fondo img { object-position: var(--encuadre, 50% 18%); }
  .hero--home::before {
    background: linear-gradient(0deg, rgba(10, 43, 68, .97) 0%, rgba(10, 43, 68, .9) 34%, rgba(10, 43, 68, .42) 56%, rgba(10, 43, 68, 0) 74%);
  }
  .hero--home .hero__contenido { padding-block: 40vh 36px; }
  .hero--home h1 { font-size: clamp(2.1rem, 1.3rem + 4vw, 2.7rem); }

  .hero--interno { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__foto { grid-column: 1; grid-row: 1; min-height: max(38svh, 240px); }
  .hero__foto::before { background: linear-gradient(0deg, var(--azul-hondo) 0%, rgba(10, 43, 68, .35) 22%, rgba(10, 43, 68, 0) 44%); }
  .hero--interno .hero__contenido { grid-column: 1; grid-row: 2; padding: 8px var(--margen) 40px; }
  .hero--interno .hero__fondo img { object-position: var(--encuadre, 50% 30%); }
  .hero > .hero__luces { display: none; }

  .botones .boton { flex: 1 1 100%; }
  .indice__rejilla { grid-template-columns: minmax(0, 1fr); }
  .indice a { grid-template-columns: minmax(0, 1fr); grid-template-areas: "nombre" "que" "tiempo"; }
  .indice__tiempo { justify-self: start; text-align: left; max-width: none; margin-top: 4px; }
  .hoja__datos { grid-template-columns: minmax(0, 1fr); }
  .franja__lista { grid-template-columns: minmax(0, 1fr); }
  .franja__lista li { border-left: 0 !important; padding: 16px 0 !important; }
  .franja__lista li + li { border-top: 1px solid var(--linea); }
  .firma__mesa::before { inset: 10px -4px -8px 6px; }
  .parada, .parada--final { grid-template-columns: minmax(0, 1fr) 60px; gap: 0 12px; align-items: start; }
  .parada--final { grid-template-columns: minmax(0, 1fr) 78px; }
  .parada__texto { display: contents; }
  .parada__texto > * { grid-column: 1 / -1; }
  .parada__texto > .parada__titulo { grid-column: 1; grid-row: 1; align-self: center; margin: 0; }
  .parada .sello { grid-column: 2; grid-row: 1; width: 60px; height: 60px; margin-bottom: 6px; }
  .parada--final .sello { width: 78px; height: 78px; }
  .parada__datos div { grid-template-columns: minmax(0, 1fr); }
  .conmutador button { flex: 1 1 auto; }
  .zonas a { flex-direction: column; gap: 2px; }
  .zonas span { text-align: left; }
  .pie__rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .pie__legal { flex-direction: column; }

  /* Tabla de tiempos → fichas */
  .tabla thead { display: none; }
  .tabla, .tabla tbody, .tabla tr, .tabla th, .tabla td { display: block; width: 100%; }
  .tabla th[scope="row"] { width: 100%; border-bottom: 0; padding-bottom: 2px; }
  .tabla td { padding-top: 0; }
  .tabla td::before { content: attr(data-col) ": "; font-weight: 700; color: var(--gris-texto); }

  .barra-movil {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 800; display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--linea);
    box-shadow: 0 -8px 24px rgba(10, 43, 68, .14); transition: transform .25s var(--ease-out);
  }
  .barra-movil .boton { min-height: 52px; padding-inline: .6em; }
  .hero-a-la-vista .barra-movil { transform: translateY(110%); }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
}
@media (max-width: 420px) {
  .boton { white-space: normal; text-align: center; }
  .pie__rejilla { grid-template-columns: minmax(0, 1fr); }
}

/* ═══ 25 · MENOS MOVIMIENTO ═══
   Sin apertura, sin estampado (los sellos ya están puestos), sin entradas y
   con cambios de página secos. No se pierde ningún contenido. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
  .apertura, .apertura-pendiente body::before { display: none !important; }
  .js .hoja--lista .sello, .sello { opacity: 1 !important; animation: none !important; }
  .js [data-reveal].por-entrar { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}

/* ═══ 26 · IMPRESIÓN ═══
   "Print this checklist": el JS copia la hoja a .impresion y marca el <html>;
   así se imprime la hoja sola. Con Ctrl+P normal sale la página sin menú,
   sin botones y sin barra. */
.impresion { display: none; }
@media print {
  html, body { background: #fff !important; color: #000; }
  body { font-size: 11pt; padding: 0 !important; }
  .cabecera, .menu-movil, .barra-movil, .apertura, .pie, .botones, .firma__controles, .saltar, .hero__luces, .cornisa, .hamburguesa { display: none !important; }
  .hero { background: #fff !important; color: #000 !important; min-height: 0 !important; }
  .hero::before, .hero__foto { display: none !important; }
  .hero h1, .hero .lead, .hero a { color: #000 !important; }
  .banda--azul { background: #fff !important; color: #000 !important; }
  .hoja { box-shadow: none !important; padding: 0; background: #fff; }
  .sello { opacity: 1 !important; animation: none !important; }
  .parada { break-inside: avoid; }
  a { color: inherit; }
  html.imprime-hoja body > *:not(.impresion):not(.sprite) { display: none !important; }
  html.imprime-hoja .impresion { display: block; }
  html.imprime-hoja .hoja { max-width: 7.2in; margin: 0 auto; }
}