/* =====================================================   SANABRIA PROPERTY GROUP — main.css
   Paleta: #0B1F33 navy | #F7F5F0 cream | var(--coral) coral | #8A94A6 gray
   Tipografía: Archivo (display 700–800) + Inter (body)
   ============================================================ */

/* ── RESET + VARIABLES ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --navy:   #0B1F33;
  --cream:  #F7F5F0;
  --gray:   #8A94A6;
  --white:  #ffffff;
  --creds-bar-h: 40px;
  --nav-h:  72px;
  --radius: 16px;
  --shadow: 0 8px 32px rgba(11,31,51,.15);
  --shadow-xl: 0 20px 60px rgba(11,31,51,.25);
  --max-w:  1200px;
  --trans:  0.2s ease;
  /* ── Tarjetas de la página 2 (white-label: cambia el look en un solo lugar) ──
     ES: radio + sombra compartidos por las 3 tarjetas. Las tarjetas claras suman
         una sombra más marcada + un borde de 1px casi imperceptible para
         despegarse del fondo claro; la navy se despega sola por contraste de color.
     EN: shared radius + shadow for the 3 cards. Light cards add a stronger shadow
         + a hairline 1px border; the navy card pops by color contrast. */
  /* ES: SISTEMA DE RADIOS (2g-ii) — todas las familias de tarjetas salen de
         estos pasos: 4 (campos chicos/badges) · 8 · 10 (inputs/botones) · 12
         (tarjetas internas) · 16 (tarjeta estándar = --card-radius) · 20
         (héroes/CTA grandes) · full (pastillas). Los radios raros históricos
         (6,7,9→8 · 14→12 · 18→16) quedaron ajustados al paso vecino.
     EN: RADIUS SYSTEM — every card family draws from these steps. */
  --radio-4: 4px; --radio-8: 8px; --radio-10: 10px; --radio-12: 12px;
  --radio-20: 20px; --radio-full: 999px;
  --card-radius: 16px;
  --card-shadow: 0 4px 16px rgba(0,0,0,0.12);
  --card-shadow-light: 0 6px 16px rgba(0,0,0,0.20);   /* un punto más marcada — blur 16px (tope) */
  --card-border-light: 1px solid rgba(16,35,58,0.12); /* 1px sutil, apenas perceptible */
  /* ── Cuadros de "El mercado hoy" (tipo botón, DENTRO de la tarjeta blanca) ──
     ES: radio MENOR que --card-radius (son cuadros dentro de una tarjeta), contorno
         definido en las 4 caras (el perímetro se lee sin depender solo de la sombra).
     EN: smaller radius than the card; a defined 4-side outline. Reusable tokens. */
  --mcard-radius: 10px;
  --mcard-bg:       #F6F7F9;
  --mcard-bg-hover: #ffffff;
  --mcard-border:  1px solid rgba(16,35,58,0.16);
  --mcard-gap:     var(--esp-12);
  /* ES: ZONAS INTERNAS del cuadro de mercado — alturas RESERVADAS (reglas
         duras de dimensión): ícono 1 línea / VALOR 1 línea / texto máx 2
         líneas. La reserva NO cambia aunque el texto use menos: un subtítulo
         largo no puede descuadrar al cuadro vecino. Si un texto no cabe en 2
         líneas, se acorta en config (no se achica la letra por cuadro).
     EN: Market box INNER ZONES — RESERVED heights: icon / VALUE / text (max 2
         lines). Reserve never changes, so a long subtitle can't unbalance the
         neighbor. Text that needs 3 lines gets shortened in config. */
  --mz-icono: 1.6rem;
  --mz-valor: 2.2rem;
  --mz-texto: 2rem;
  --mz-gap:   var(--esp-4);
  /* ES: tope de alto por cuadro al estirar la rejilla (si la tarjeta da más alto,
         la rejilla se centra en el sobrante en vez de deformar los cuadros).
     EN: max height per stat box when the grid stretches (extra space centers the
         grid instead of deforming the boxes). */
  --mcard-hmax: 220px;
  /* ES: MAPA de condados — la reducción anterior quedó CANCELADA: ahora el mapa
         CRECE hasta llenar el espacio de su tarjeta (nunca hace crecer la fila).
         --mapa-box-min = piso natural de la caja navy (mantiene la fila estable);
         --mapa-margen  = marco interno navy alrededor del dibujo.
     EN: Counties MAP — the previous reduction is CANCELED: the map now GROWS to
         fill its card's space (it never grows the row). --mapa-box-min = the
         box's natural floor (keeps the row stable); --mapa-margen = the inner
         navy frame around the drawing. */
  /* ES: 240px -> 324px. CORRECCIÓN: la bajada anterior a 240 se aprobó sobre una
         medición errónea. El SVG NO está limitado por el ancho: en desktop su
         altura está esclavizada a esta caja (main.css: .counties-map svg
         height:calc(100% - 2*--mapa-margen)), así que este token ES el limitador
         real del dibujo. Se midió el tamaño de los rótulos con
         getComputedStyle().fontSize, que devuelve UNIDADES DE USUARIO del
         viewBox y es invariante a la escala — por eso parecía que nada cambiaba.
         Medido bien, con getBoundingClientRect: bajar de 324 a 240 encogió el
         dibujo de 247.8×296 a 177.5×212 (−28% lineal, −49% de área).
         REGLA: el texto dentro de un SVG se mide con getBoundingClientRect,
         nunca con getComputedStyle().fontSize.
         El presupuesto para volver a 324 lo liberaron el párrafo de cierre de
         condados (−48.9px) y el título a 2 renglones (−45.8px): la fila de
         página 2 queda en 674.4px contra una altura ÚTIL de 696 (768 − navbar
         fijo 72) a 1366×768, respetando el margen de 16px.
     EN: 240px -> 324px. The earlier cut to 240 rested on a bad measurement: on
         desktop the SVG height is slaved to this box, so this token IS the real
         limiter. getComputedStyle().fontSize reports viewBox USER UNITS and is
         scale-invariant, which hid the shrink. Measured properly, 324 -> 240 cut
         the drawing from 247.8×296 to 177.5×212. Budget to restore 324 came from
         removing the counties closing paragraph and tightening its title. */
  --mapa-box-min: 324px;
  --mapa-margen: 14px;
  --vidriera-h: 31vh;
  /* ES: AQUÍ VIVÍA --ad-h, el alto de los cuadros de anuncio, derivado del de
         las tarjetas de Cursos. Se retira entero, y con él la idea de dar un
         ALTO a un hueco donde se monta una FOTO.
         Ese era el fallo de raíz: al fijar el alto en vh, la forma del hueco
         dependía de la altura de la ventana y nunca coincidía con la de la
         imagen. En una pantalla alta salía un cuadro de 352×338 —casi
         cuadrado— para una foto panorámica de 2.20, así que el navegador la
         ampliaba hasta 745px de ancho y sólo cabía el 47% central. Se veía
         deformada, y subirle el alto lo empeoraba en vez de arreglarlo.
         Un cuadro de imagen se define por su PROPORCIÓN, no por su alto: así
         su forma no depende del tamaño de la ventana y la foto entra siempre
         igual. La proporción vive en .franja-ad (16/9), una sola para móvil y
         escritorio.
     EN: --ad-h lived here — the ad box height derived from the Courses cards.
         Removed entirely, and with it the idea of giving a HEIGHT to a slot
         that holds a PHOTO. That was the root fault: a vh height made the
         slot's shape depend on window height and never match the artwork. On
         a tall screen it produced a near-square 352×338 box for a 2.20
         panoramic photo, so the browser blew it up to 745px wide and only the
         middle 47% fitted. An image slot is defined by its RATIO, not its
         height — the ratio now lives on .franja-ad (16/9), one for mobile and
         desktop alike. */
  /* ES: HERO — ESCALERA de factores por breakpoint (aprobada): todas las letras
         del bloque se multiplican por --hero-escala; la jerarquía se conserva
         sola. La base es 1.0 porque en laptop 1280x720 la banda cierra exacta
         (fmax medido = 1.00); cada breakpoint sube hasta su máximo medido con
         margen: tablet ≤1024 → 1.15 (el hero fluye) · 1440 → 1.10 (fmax
         1.114) · 1920 → 1.25 (fmax 1.280) · móvil ≤600 → 1.06 (en su media,
         hero capado en alto). Ajustar el hero = tocar SOLO estos números.
     EN: HERO — approved per-breakpoint factor LADDER. Base 1.0 (1280 has zero
         slack); each breakpoint rises to its measured max with margin. */
  --hero-escala: 1;
  /* ES: TECHO DE CONTENIDO del home (decisión B del PARE 2.4): por encima de
         1920px el CONTENIDO se centra y los FONDOS siguen a todo el ancho (sin
         marco visible). A ≤1920 no actúa: todo lo aprobado a 1440/1920 queda
         byte-idéntico. La LÍNEA MAESTRA queda redefinida: el borde del
         contenido centrado (máx --contenido-max), una sola vertical para
         hero, Cursos, franja AD y página 2.
     EN: HOME CONTENT CEILING (decision B): above 1920 content centers,
         backgrounds stay full-width. Master line = centered content edge. */
  --contenido-max: 1920px;

  /* ═══ ES: ESCALA ÚNICA DE ESPACIADO (Tanda 2f) — todo padding/margen/gap
         sale de aquí. Principal: 4·8·12·16·20·24·32·40·48·64·80 (el 20 entra
         por latitud del "algo como" — es el paso más usado del sitio).
         MICRO-escala documentada para separaciones finas: 2·6·10.
         Los valores raros del CSS histórico (3,5,7,9,11,13,14,18,22,28,56)
         fueron AJUSTADOS al paso inferior más cercano (dirección que encoge:
         protege las anclas de altura de página 2).
     EN: SINGLE SPACING SCALE — all spacing from these tokens; micro-scale
         2/6/10 documented; odd legacy values snapped DOWN (anchor-safe). ═══ */
  --esp-2: 2px;   --esp-4: 4px;   --esp-6: 6px;   --esp-8: 8px;
  --esp-10: 10px; --esp-12: 12px; --esp-16: 16px; --esp-20: 20px;
  --esp-24: 24px; --esp-32: 32px; --esp-40: 40px; --esp-48: 48px;
  --esp-64: 64px; --esp-80: 80px;
  /* ES: TIPOGRAFÍA FLUIDA (2.3) — pisos y techos para títulos nuevos; los
         títulos existentes ya escalan con clamp() propio. Piso global móvil:
         16px párrafo / 14px secundario (Tanda 2c).
     EN: FLUID TYPE tokens for new headings; existing titles already clamp. */
  --tipo-h1: clamp(1.75rem, 4vw, 2.6rem);
  --tipo-h2: clamp(1.35rem, 2.6vw, 1.95rem);
  --tipo-h3: clamp(1.1rem, 1.8vw, 1.35rem);
  --tipo-cuerpo: clamp(15px, 1.1vw, 16.5px);
  --tipo-sec: 14px;
  /* ═══ ES: SISTEMA ÚNICO DE BREAKPOINTS (Tanda 2e) — CUATRO, no más:
         móvil ≤767 · tableta 768-1023 · laptop 1024-1439 · escritorio ≥1440.
         (CSS no permite var() en @media: los valores van literales pero SOLO
         estos cuatro. Excepciones justificadas y comentadas en su sitio:
         combos de ALTURA del layout 100vh de página-1, el ajuste del navbar
         en ventanas estrechas, la escalera aprobada del hero a ≥1920, y las
         capability queries hover/reduced-motion, que no son breakpoints.)
     EN: SINGLE BREAKPOINT SYSTEM — four only: ≤767 / 768-1023 / 1024-1439 /
         ≥1440. Documented exceptions only. ═══ */
}
@media (max-width: 1023px) { :root { --hero-escala: 1.15; } }
@media (min-width: 1440px) { :root { --hero-escala: 1.10; } }
@media (min-width: 1920px) { :root { --hero-escala: 1.25; } }

/* ES: Breakpoints estándar del proyecto (documentados como referencia)
   EN: Standard project breakpoints (documented for reference)
   --bp-xs:  360px  — móvil chico (Moto G4, Galaxy A series)
   --bp-sm:  480px  — móvil mediano
   --bp-md:  768px  — tablet vertical / iPad
   --bp-lg:  1024px — tablet horizontal / laptop
   --bp-xl:  1440px — desktop
   --bp-2xl: 1920px — pantallas grandes (contenido centrado en max 1200px)
*/

html {
  scroll-behavior: smooth;
  /* ES: Base de 16px garantiza que 1rem = 16px en todos los browsers */
  /* EN: 16px base ensures 1rem = 16px across all browsers */
  font-size: 16px;
  overflow-x: clip;
}

body {
  font-family: 'Inter', sans-serif;
  background: var(--cream);
  color: var(--navy);
  /* ES: Mínimo 16px en body para buena legibilidad en mobile */
  /* EN: Minimum 16px body text for good mobile readability */
  font-size: clamp(1rem, 2.5vw, 1.0625rem);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* ES: Evita scroll horizontal en cualquier página */
  /* EN: Prevents horizontal scroll on any page */
  overflow-x: hidden;
  min-width: 320px;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}
a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ES: Targets táctiles mínimos de 44px para accesibilidad */
/* EN: Minimum 44px touch targets for accessibility */
button, [role="button"], input[type="submit"], input[type="button"] {
  min-height: 44px;
}

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
}

/* ES: Hover solo en dispositivos con puntero real — evita estados pegados en táctil */
/* EN: Hover only on pointer devices — prevents stuck hover states on touch */
@media (hover: none) {
  a:hover, button:hover { opacity: 1 !important; transform: none !important; }
}

/* ── BARRA DE CREDENCIALES (top strip) ─────────────────────── */
.creds-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 101;
  height: var(--creds-bar-h);
  background: var(--white);
  border-bottom: 1px solid rgba(11,31,51,.08);
  overflow: hidden;
  display: flex;
  align-items: center;
}

.creds-bar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
}

.creds-bar-list {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
  padding: 0 var(--esp-24);
}

.cb-item {
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  padding: 0 var(--esp-20);
  font-size: .72rem;
  font-weight: 600;
  color: var(--navy);
  white-space: nowrap;
  letter-spacing: .01em;
  position: relative;
}

.cb-item + .cb-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background: rgba(11,31,51,.12);
}

.cb-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

/* Mobile: marquee deslizante */
@media (max-width: 1023px) {
  .creds-bar { --creds-bar-h: 36px; }

  .creds-bar-inner {
    max-width: none;
    width: auto;
    display: flex;
    animation: cb-marquee 18s linear infinite;
  }

  .creds-bar-list {
    display: flex;
    width: auto;
    padding: 0;
    justify-content: flex-start;
    flex-shrink: 0;
  }

  .creds-bar-list--dup { display: flex; }

  .cb-item {
    padding: 0 var(--esp-24);
    font-size: .7rem;
  }
}

@media (min-width: 1024px) {
  .creds-bar-list--dup { display: none; }
}

@keyframes cb-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.creds-bar:hover .creds-bar-inner { animation-play-state: paused; }

/* ── NAVBAR ────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--navy);
  height: var(--nav-h);
  display: flex;
  align-items: center;
  transition: box-shadow var(--trans);
  isolation: isolate;
}

.site-header.scrolled {
  box-shadow: 0 4px 24px rgba(0,0,0,.35);
}

.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 var(--esp-16);
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--esp-12);
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: var(--esp-10);
  flex-shrink: 0;
  /* ES: área táctil 44px sin mover el layout (padding + margen negativo).
     EN: 44px hit area with zero layout shift. */
  padding-block: var(--esp-10);
  margin-block: -11px;
}

/* SPG gradient — navbar & footer */
.logo-spg, .footer-spg {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: 1.6rem;
  letter-spacing: -.02em;
  line-height: 1;
  background: linear-gradient(180deg, #FF8C42 0%, #E8531F 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.logo-divider {
  width: 2px;
  height: 36px;
  background: rgba(255,255,255,.2);
}

.logo-text { display: flex; flex-direction: column; gap: 1px; }

.logo-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .85rem;
  color: var(--white);
  line-height: 1.1;
  letter-spacing: .01em;
}

.logo-sub {
  font-size: .58rem;
  color: var(--gray);
  letter-spacing: .12em;
  text-transform: uppercase;
}

/* ── NAV LINKS wrapper ──────────────────────────────────────── */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  flex: 1;
  justify-content: center;
}

/* ── NAV LIC items (license dropdowns) ─────────────────────── */
.nav-lic {
  position: relative;
}

.nav-lic-btn {
  display: flex;
  align-items: center;
  gap: var(--esp-4);
  background: none;
  border: none;
  color: rgba(255,255,255,.82);
  font-family: 'Inter', sans-serif;
  font-size: clamp(.65rem, .85vw, .78rem);
  font-weight: 500;
  padding: var(--esp-6) var(--esp-6);
  border-radius: var(--radio-8);
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--trans), background var(--trans);
  min-height: 44px;
}

.nav-lic-btn:hover,
.nav-lic.is-open .nav-lic-btn {
  color: var(--white);
  background: rgba(255,255,255,.09);
}

.nav-lic-icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.nav-lic-chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  opacity: .55;
  transition: transform var(--trans);
}

.nav-lic.is-open .nav-lic-chevron {
  transform: rotate(180deg);
  opacity: .9;
}

/* ── Dropdown panel (desktop) ───────────────────────────────── */
.nav-lic-panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--white);
  border-radius: var(--radio-12);
  box-shadow: 0 8px 40px rgba(11,31,51,.18), 0 2px 8px rgba(11,31,51,.08);
  padding: var(--esp-20) var(--esp-20) var(--esp-16);
  z-index: 200;
  animation: nlp-in .18s ease both;
}

.nav-lic-panel::before {
  content: '';
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 12px; height: 12px;
  background: var(--white);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

@keyframes nlp-in {
  from { opacity: 0; transform: translateX(-50%) translateY(-6px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.nlp-lic-title {
  font-family: 'Archivo', sans-serif;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: var(--esp-6);
}

.nlp-lic {
  font-family: 'Archivo', sans-serif;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--esp-8);
}

.nlp-desc {
  font-size: .82rem;
  color: var(--navy);
  line-height: 1.55;
  margin-bottom: var(--esp-12);
}

.nlp-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  font-family: 'Archivo', sans-serif;
  font-size: .78rem;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: .02em;
  transition: gap var(--trans);
}

.nlp-cta:hover { gap: var(--esp-8); }

/* ── Recursos panel (Bienes Raíces) ─────────────────────────── */
.nlp-recursos-panel { width: 320px; }

.nlp-recursos-titulo {
  font-family: 'Archivo', sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gray);
  margin-bottom: var(--esp-8);
}

.nlp-recursos-lista {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-2);
}

.nlp-recurso-link {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: var(--esp-6) var(--esp-10);
  border-radius: var(--radio-8);
  text-decoration: none;
  transition: background var(--trans);
}

.nlp-recurso-link:hover { background: rgba(11,31,51,.05); }

.nlp-recurso-nombre {
  font-family: 'Archivo', sans-serif;
  font-size: .79rem;
  font-weight: 700;
  color: var(--navy);
}

.nlp-recurso-desc {
  font-size: .71rem;
  color: var(--gray);
  line-height: 1.4;
}

/* ── CTA button ─────────────────────────────────────────────── */
/* ── Botón Acceder (ghost coral) ─────────────────────────── */
.nav-acceder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-6);
  height: 44px;                    /* táctil mínimo 44 (Tanda 2b) */
  padding: 0 var(--esp-16);
  border: 1.5px solid rgba(255,107,74,.7);
  border-radius: 50px;
  background: transparent;
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  margin-left: var(--esp-6);
  text-decoration: none;
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.nav-acceder-icon { flex-shrink: 0; }
.nav-acceder:hover {
  background: rgba(255,107,74,.12);
  border-color: var(--coral);
  box-shadow: 0 4px 16px rgba(255,107,74,.25);
  transform: translateY(-2px);
}
.nav-acceder:active { transform: translateY(0); box-shadow: none; }

/* ── Botón Contacto (CTA sólido coral) ──────────────────────── */
.nav-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--coral);
  /* ES: texto NAVY sobre el coral de marca — blanco daba 2.82:1 (falla AA),
         navy da 5.63:1 (CUMPLE) sin tocar el coral. Token inyectado de config.
     EN: NAVY text on brand coral — white was 2.82:1 (fails AA), navy is
         5.63:1 (PASSES) with the coral untouched. Config-injected token. */
  color: var(--coral-boton-texto, #10233A) !important;
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  height: 44px;                    /* táctil mínimo 44 (Tanda 2b) */
  padding: 0 var(--esp-20);
  border: 1.5px solid var(--coral);
  border-radius: 50px;
  font-size: .82rem;
  flex-shrink: 0;
  margin-left: var(--esp-6);
  box-shadow: 0 2px 8px rgba(255,107,74,.3);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
  white-space: nowrap;
  text-decoration: none;
}
.nav-cta:hover {
  background: #E5532F;
  border-color: #E5532F;
  box-shadow: 0 6px 20px rgba(255,107,74,.45);
  transform: translateY(-2px);
}
.nav-cta:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(255,107,74,.3);
}

/* ── WhatsApp navbar (ghost verde) ─────────────────────────── */
.nav-wa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-6);
  height: 44px;                    /* táctil mínimo 44 (Tanda 2b) */
  padding: 0 var(--esp-16);
  border: 1.5px solid rgba(37,211,102,.7);
  border-radius: 50px;
  background: transparent;
  color: #fff;
  flex-shrink: 0;
  margin-left: var(--esp-6);
  transition: background .2s, border-color .2s, box-shadow .2s, transform .2s;
}
.nav-wa svg { width: 19px; height: 19px; flex-shrink: 0; }
.nav-wa:hover {
  background: rgba(37,211,102,.12);
  border-color: #25D366;
  box-shadow: 0 4px 16px rgba(37,211,102,.25);
  transform: translateY(-2px);
}
.nav-wa:active { transform: translateY(0); box-shadow: none; }
.nav-wa::after {
  content: 'WhatsApp';
  font-family: 'Archivo', sans-serif;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ES: EXCEPCIÓN justificada (2e): ajuste de CONTENIDO del navbar — entre
      1024 y 1279 los 4 menús + CTAs no caben con el wordmark completo.
   EN: justified CONTENT exception: navbar fitting in narrow desktop. */
@media (min-width: 1024px) and (max-width: 1279px) {
  /* ES: Conserva ambos CTAs visibles cuando la ventana desktop es más estrecha. */
  /* EN: Keeps both CTAs visible in narrower desktop windows. */
  .logo-divider,
  .logo-text { display: none; }

  .nav-inner { padding: 0 var(--esp-10); gap: var(--esp-6); }
  .nav-lic-btn { padding: var(--esp-6) var(--esp-4); gap: var(--esp-4); font-size: .62rem; }
}

/* ── Hamburger ──────────────────────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: var(--esp-4);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--esp-4);
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  align-items: center;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform var(--trans), opacity var(--trans);
}

.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile + tablet navigation ─────────────────────────────── */
@media (max-width: 1023px) {
  .nav-inner { gap: var(--esp-8); padding: 0 clamp(10px, 2.5vw, 16px); }
  .nav-toggle { display: flex; order: 3; }

  /* ES: Los dos CTAs permanecen visibles aunque el menú esté cerrado. */
  /* EN: Both CTAs remain visible while the menu is closed. */
  .nav-links {
    display: flex;
    position: static;
    order: 2;
    flex: 0 0 auto;
    margin-left: auto;
    background: transparent;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: var(--esp-8);
    border: 0;
    box-shadow: none;
  }

  .nav-links .nav-lic { display: none; }

  /* ES: Al abrir, el mismo contenedor se convierte en el acordeón completo. */
  /* EN: When opened, the same container becomes the full accordion menu. */
  .nav-links.open {
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    max-height: calc(100svh - var(--nav-h));
    overflow-y: auto;
    margin: 0;
    padding: var(--esp-12) var(--esp-16) var(--esp-24);
    gap: 0;
    background: var(--navy);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 12px 32px rgba(0,0,0,.3);
    z-index: 99;
  }

  .nav-links.open .nav-lic { display: block; width: 100%; }

  .nav-lic-btn {
    width: 100%;
    justify-content: flex-start;
    font-size: .95rem;
    padding: var(--esp-12) var(--esp-12);
    min-height: 52px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    border-radius: 0;
  }

  .nav-lic-btn span { flex: 1; }

  /* Accordion panel (mobile) — inline, not absolute */
  .nav-lic-panel {
    position: static;
    transform: none;
    width: 100%;
    left: auto;
    border-radius: 0 0 10px 10px;
    box-shadow: none;
    background: rgba(255,255,255,.06);
    padding: var(--esp-12) var(--esp-16) var(--esp-16);
    margin-bottom: var(--esp-4);
    animation: nlp-mobile-in .18s ease both;
  }

  .nav-lic-panel::before { display: none; }

  @keyframes nlp-mobile-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  .nlp-lic  { color: rgba(255,255,255,.45); }
  .nlp-desc { color: rgba(255,255,255,.75); font-size: .85rem; }
  .nlp-cta  { color: var(--coral); font-size: .82rem; }

  .nlp-recursos-titulo { color: rgba(255,255,255,.45); }
  .nlp-recurso-nombre  { color: rgba(255,255,255,.9); }
  .nlp-recurso-desc    { color: rgba(255,255,255,.6); }
  .nlp-recurso-link:hover { background: rgba(255,255,255,.08); }

  .nav-acceder {
    height: 44px;
    padding: 0 var(--esp-12);
    margin: 0;
    font-size: .78rem;
  }
  .nav-cta {
    height: 44px;
    margin: 0;
    padding: 0 var(--esp-12);
    font-size: .78rem;
  }
  /* ES: WhatsApp conserva un target táctil real de 44px. */
  /* EN: WhatsApp keeps a true 44px touch target. */
  .nav-wa {
    height: 44px;
    margin: 0;
    padding: 0 var(--esp-12);
  }
  .nav-links.open .nav-acceder {
    width: 100%;
    margin: var(--esp-8) 0 0;
    border-radius: var(--radio-10);
    font-size: .95rem;
  }
  .nav-links.open .nav-cta {
    width: 100%;
    margin: var(--esp-12) 0 0;
    border-radius: var(--radio-10);
    font-size: .95rem;
  }
  .nav-links.open .nav-wa {
    width: 100%;
    margin: var(--esp-8) 0 0;
    border-radius: var(--radio-10);
  }
}

@media (max-width: 767px) {
  /* ES: En teléfonos estrechos queda el monograma SPG para dar aire a los CTAs. */
  /* EN: Narrow phones keep the SPG monogram to leave room for both CTAs. */
  .logo-divider,
  .logo-text { display: none; }

  .nav-inner { gap: var(--esp-6); }
  .nav-links { gap: var(--esp-6); }
  /* ≤480px: Acceder muestra solo ícono, WA y Contacto compactos */
  .nav-acceder-text { display: none; }
  .nav-acceder { width: 44px; padding: 0; min-width: 44px; }
  .nav-cta,
  .nav-wa {
    padding: 0 var(--esp-10);
    font-size: .72rem;
  }
  .nav-wa::after { font-size: .72rem; }
}

/* ES: EXCEPCIÓN justificada (2e): ajuste de CONTENIDO del navbar en teléfonos
      mínimos (320-360) — SOLO espaciado y tamaño del monograma; los controles
      CONSERVAN sus 44px (G6 no negociable — el antiguo 40px era una violación).
   EN: content exception for tiny phones — spacing only; 44px targets stay. */
@media (max-width: 360px) {
  .nav-inner { padding-inline: var(--esp-8); gap: var(--esp-4); }
  .nav-links { gap: var(--esp-4); }
  .logo-spg { font-size: 1.4rem; }
  .nav-wa,
  .nav-cta {
    height: 40px;
    padding-inline: var(--esp-8);
    font-size: .68rem;
  }
  .nav-wa { gap: var(--esp-4); }
  .nav-wa svg { width: 17px; height: 17px; }
  .nav-wa::after { font-size: .68rem; }
  .nav-toggle { width: 44px; height: 44px; }  /* G6: táctil 44, sin excepción */
}

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  min-height: 560px;
  position: relative;
  overflow: hidden;
  background: var(--navy);
  padding-top: var(--nav-h);
  display: grid;
  grid-template-columns: 52% 1fr;
}

.hero-img-col {
  position: absolute;
  inset: 0;
}

.hero-img-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero-img-col::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to right,
    var(--navy) 0%,
    var(--navy) 22%,
    rgba(11,31,51,.92) 38%,
    rgba(11,31,51,.55) 58%,
    rgba(11,31,51,.15) 80%,
    transparent 100%
  );
  z-index: 1;
}

.hero::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 160px;
  background: linear-gradient(to top, var(--navy), transparent);
  pointer-events: none;
  z-index: 2;
}

.hero-content {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* ES: Reduce solo el aire vertical para evitar recortar el texto inferior. */
  /* EN: Reduces only vertical whitespace so the lower copy is not clipped. */
  /* ES: LÍNEA MAESTRA — el borde izquierdo del bloque se alinea con el borde
         izquierdo de la tarjeta izquierda de Cursos (3vw = el margen 3% de
         .vidriera-grid y de la franja AD). Una sola vertical para todo el home.
     EN: MASTER LINE — the block aligns with the left Courses card (3vw). */
  /* ES: por encima del techo, la línea deja de ser 3vw y se ancla al borde
         del contenido centrado: (100vw − techo)/2 + 3%% del techo. El max()
         hace que a ≤1920 sea exactamente el 3vw de siempre.
     EN: above the ceiling the line anchors to the centered content edge. */
  padding: 100px 48px 80px max(3vw, calc((100vw - var(--contenido-max)) / 2 + 0.03 * var(--contenido-max)));
}

.hero-eyebrow {
  font-size: calc(.72rem * var(--hero-escala));  /* × escalera del hero */
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--esp-8);
}

.hero-spg {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: calc(clamp(3.6rem, 7.6vw, 6.5rem) * var(--hero-escala));
  line-height: .88;
  letter-spacing: -.04em;
  color: var(--white);
}

.hero-sanabria {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: calc(clamp(1.7rem, 3.4vw, 3rem) * var(--hero-escala));
  line-height: .95;
  color: var(--white);
  letter-spacing: -.01em;
}

.hero-group-row {
  display: flex;
  align-items: center;
  gap: var(--esp-12);
  margin-top: var(--esp-2);
  margin-bottom: var(--esp-12);
}

.hero-line {
  height: 2px;
  flex: 1;
  background: var(--coral);
  flex-shrink: 0;
}

.hero-group-text {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: calc(clamp(.55rem, .85vw, .68rem) * var(--hero-escala));
  letter-spacing: .32em;
  color: var(--coral);
  text-transform: uppercase;
  white-space: nowrap;
}

.hero-tagline {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: calc(clamp(1rem, 1.9vw, 1.25rem) * var(--hero-escala));
  line-height: 1.25;
  color: var(--white);
  margin-bottom: var(--esp-8);
}

.hero-tagline em { font-style: normal; color: var(--coral); }

.hero-sub {
  font-size: calc(.88rem * var(--hero-escala));
  color: rgba(255,255,255,.65);
  line-height: 1.6;
  max-width: 440px;
  margin-bottom: 0;
}

.hero-btns {
  display: flex;
  gap: var(--esp-12);
  flex-wrap: wrap;
}


.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  background: var(--coral);
  color: var(--coral-boton-texto, #10233A);  /* AA sobre coral */
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  padding: var(--esp-12) var(--esp-24);
  border-radius: 50px;
  transition: background var(--trans), transform var(--trans), box-shadow var(--trans);
  letter-spacing: .02em;
}

.btn-primary:hover {
  background: #e85a3a;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255,107,74,.35);
}

.btn-outline-white {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  background: transparent;
  color: var(--white);
  font-family: 'Archivo', sans-serif;
  font-weight: 600;
  font-size: .88rem;
  padding: var(--esp-12) var(--esp-20);
  border-radius: 50px;
  border: 1.5px solid rgba(255,255,255,.4);
  transition: border-color var(--trans), background var(--trans);
}

.btn-outline-white:hover {
  border-color: var(--white);
  background: rgba(255,255,255,.08);
}

.btn-outline-white svg { width: 18px; height: 18px; flex-shrink: 0; }

@media (max-width: 767px) {
  .hero {
    display: block;
    /* ES: intención de pantalla como MÍNIMO (regla sellada) — no corta contenido.
       EN: screen intent as MINIMUM (sealed rule) — never cuts content. */
    height: auto;
    min-height: clamp(420px, 55svh, 520px);
    min-height: 420px;
    max-height: 520px;
    padding-top: var(--nav-h);
  }
  .hero-img-col { position: absolute; inset: 0; width: 100%; height: 100%; }
  .hero-img-col::before {
    background: linear-gradient(to bottom, rgba(11,31,51,.5) 0%, rgba(11,31,51,.85) 100%);
  }
  .hero::after { display: none; }
  .hero-content {
    height: calc(100% - var(--nav-h));
    padding: clamp(18px, 4vw, 28px) clamp(20px, 6vw, 40px);
    justify-content: safe center;
  }

  .hero-sub {
    font-size: clamp(.82rem, 3.6vw, .9rem);
    line-height: 1.55;
  }
}

/* ES: (2e) antiguo ≤380 de PROPERTY GROUP disuelto: tracking y gap ya son
       seguros en todo el rango móvil (sin sub-quiebre). EN: dissolved. */


/* ── SERVICIOS ───────────────────────────────────────────────── */
.section-services {
  background: var(--navy);
  padding: var(--esp-32) var(--esp-24) var(--esp-24);
}

.section-header { text-align: center; margin-bottom: var(--esp-8); }

.section-eyebrow {
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: var(--esp-10);
  display: inline-block;
  position: relative;
  padding: 0 var(--esp-20);
}

.section-eyebrow::before,
.section-eyebrow::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 32px;
  height: 2px;
  background: var(--coral);
  opacity: .55;
}
.section-eyebrow::before { right: 100%; margin-right: -16px; }
.section-eyebrow::after  { left:  100%; margin-left:  -16px; }

/* ── Título principal SERVICIOS ──────────────────────────────── */
.section-services-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  /* ES: Escala más refinada sin perder la jerarquía coral de la sección. */
  /* EN: More refined scale while preserving the section's coral hierarchy. */
  font-size: clamp(2.25rem, 3.8vw, 3.2rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--coral);
  line-height: 1;
  margin: 0 0 var(--esp-8);
  position: relative;
  display: inline-block;
  padding-bottom: var(--esp-10);
}

.section-services-title::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 48px; height: 3px;
  background: var(--coral);
  border-radius: 2px;
  opacity: .7;
}

.section-services-sub {
  font-family: 'Inter', sans-serif;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  font-weight: 500;
  color: rgba(255,255,255,.55);
  margin: var(--esp-8) 0 0;
  letter-spacing: .01em;
}

.section-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  color: var(--navy);
  line-height: 1.2;
}

.section-title-underline {
  display: inline-block;
  position: relative;
  padding-bottom: var(--esp-8);
}

.section-title-underline::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 60px; height: 3px;
  background: var(--coral);
  border-radius: 2px;
}

/* ── App grid estilo home screen iOS ──────────────────────────── */

.services-app-grid {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(36px, 7vw, 80px);
  margin-top: var(--esp-24);
  flex-wrap: nowrap;
}

.svc-app-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-10);
  text-decoration: none;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: var(--card-radius);
  padding: var(--esp-32) var(--esp-20) var(--esp-24);
  box-shadow: 0 2px 16px rgba(0,0,0,.18);
  transition: transform .2s, box-shadow .2s;
}
.svc-app-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0,0,0,.28);
}

.svc-icon-canvas {
  display: block;
  width: 120px;
  height: 120px;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,.32));
  transition: transform .25s ease, filter .25s ease;
}

.svc-app-item:hover .svc-icon-canvas {
  transform: translateY(-8px) scale(1.06);
  filter: drop-shadow(0 20px 36px rgba(0,0,0,.44));
}

.svc-app-item:active .svc-icon-canvas {
  transform: translateY(2px) scale(0.96);
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.22));
  transition-duration: .1s;
}

.svc-app-label {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--white);
  text-align: center;
  text-wrap: balance;
}

.svc-app-micro {
  font-size: .68rem;
  color: rgba(255,255,255,.45);
  text-align: center;
  margin-top: -4px;
  letter-spacing: .02em;
}

/* T1: laptops comunes (≤820px alto, ≥1025px ancho) — 1280×800, 1366×768 */
/* ES: EXCEPCIÓN justificada (2e): combo de ALTURA — compresión del layout
      100vh de página-1 en laptops de pantalla baja. EN: height-combo. */
@media (max-height: 820px) and (min-width: 1024px) {
  .hero { min-height: 420px; }
  .hero-content { padding-top: 60px; padding-bottom: var(--esp-48); }
  .section-services { padding: var(--esp-8) var(--esp-24) var(--esp-16); }
  .section-header { margin-bottom: var(--esp-2); }
  .services-app-grid { margin-top: var(--esp-16); }
}

/* Tablet ≤1024px (iPad vertical 768×1024, etc.) */
@media (max-width: 1023px) {
  .section-services {
    padding: clamp(20px, 5vw, 32px) clamp(16px, 3vw, 24px) 24px;
  }
}

/* Mobile ≤600px: grid 2×2, íconos compactos, subtítulo oculto */
@media (max-width: 767px) {
  .section-services-sub { display: none; }
  .section-header { margin-bottom: var(--esp-4); }
  .services-app-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 26px var(--esp-16);
    max-width: min(320px, 88vw);   /* fluido — absorbe el antiguo ≤380 */
    margin: var(--esp-16) auto 0;
  }
  /* ES: fluido 68-80px — cubre del teléfono chico al grande sin sub-quiebre.
     EN: fluid 68-80px, no sub-breakpoint needed. */
  .svc-icon-canvas { width: clamp(68px, 20.5vw, 80px); height: clamp(68px, 20.5vw, 80px); }
  .section-services { padding: var(--esp-20) var(--esp-16) var(--esp-24); }
  .section-counties { padding-top: var(--esp-16); }
}

/* Hero compactado para primera pantalla sin scroll — iPhone 390×844 */
/* ES: EXCEPCIÓN justificada (2e): combo de ALTURA — hero de primera pantalla
      en teléfonos (el alto manda, no el ancho). EN: height-combo exception. */
@media (max-width: 767px) and (max-height: 900px) {
  .hero {
    /* ES: REGLA SELLADA (Tanda 2.2) — el alto de pantalla es una INTENCIÓN,
           no una ley: min-height con svh (la barra del navegador móvil aparece
           y desaparece; svh usa el alto chico estable). El alto FIJO cortaba
           la marca en 320px ("SANABRIA" a la mitad, tagline tragado). Si el
           contenido crece (otro tenant, otro texto), el hero crece con él.
       EN: SEALED RULE — screen height is an INTENTION: min-height with svh.
           The FIXED height was cutting the brand block at 320px. Content-first:
           the hero grows with its content. */
    height: auto;
    min-height: clamp(240px, 38svh, 340px);
    max-height: none;
    /* ES: peldaño móvil de la escalera — el hero móvil prioriza compacidad.
       EN: mobile rung of the ladder — compact hero. */
    --hero-escala: 1.06;
  }
  .hero-sub { display: none; }
  .hero-group-row { gap: var(--esp-8); margin-bottom: var(--esp-8); }     /* del antiguo ≤380 */
  .hero-group-text { letter-spacing: .24em; }            /* del antiguo ≤380 */
}

/* ES: (2e) el antiguo bloque ≤380 desapareció: el hero ya es min-height
       fluido (Tanda 2a) y los íconos/rejilla de servicios pasan a clamp
       DENTRO del breakpoint móvil único — cero sub-quiebres.
   EN: former ≤380 block dissolved into fluid clamps inside the single
       mobile breakpoint. */

/* ── GALERÍA "NUESTRO TRABAJO" ────────────────────────────────────
   ES: Oculta cuando flag está off — sin renderizar en EJS no hay hueco.
   EN: Hidden when flag is off — not rendered in EJS so no gap appears.
   Fondo: cream (#F7F5F0) con dot-grid sutil en navy .065 para distinguirla
   del cream plano de Condados y aportar textura sin competir con las fotos.
   ─────────────────────────────────────────────────────────────────── */
.section-gallery {
  background:
    radial-gradient(circle, rgba(11,31,51,.065) 1.5px, transparent 1.5px),
    var(--cream);
  background-size: 22px 22px;
  padding: 72px var(--esp-24) var(--esp-80);
}

.gallery-header { margin-bottom: var(--esp-40); }

/* ES: Grid responsive — 4 col desktop, 3 tablet, 2 móvil */
/* EN: Responsive grid — 4 col desktop, 3 tablet, 2 mobile */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--esp-16);
  max-width: var(--max-w);
  margin: 0 auto;
}

.gallery-tile {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  border-radius: var(--radio-10);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}

.gallery-tile:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

.gallery-tile-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--navy);
}

.gallery-tile-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .35s ease;
}

.gallery-tile:hover .gallery-tile-media img { transform: scale(1.04); }

/* ES: Ícono play coral sobre el poster de video */
/* EN: Coral play icon over the video poster */
.gallery-tile--video .gallery-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11,31,51,.35);
  transition: background .2s ease;
}

.gallery-tile--video:hover .gallery-tile-play { background: rgba(11,31,51,.18); }

.gallery-tile-play svg {
  width: 40px;
  height: 40px;
  color: var(--coral);
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.5));
}

.gallery-tile-label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--navy);
  padding: var(--esp-8) var(--esp-10);
  background: var(--white);
  line-height: 1.3;
  flex: 1;
}

/* ── LIGHTBOX ──────────────────────────────────────────────── */
/* ES: Modal oscuro de pantalla completa para imagen o video */
/* EN: Full-screen dark modal for image or video */
.gallery-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  align-items: center;
  justify-content: center;
}

.gallery-lightbox.is-open { display: flex; }

.lightbox-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,15,26,.92);
  cursor: pointer;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 24px;
  z-index: 1001;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--white);
  transition: background .18s;
  padding: 0;
}

.lightbox-close:hover { background: rgba(255,255,255,.2); }
.lightbox-close svg { width: 20px; height: 20px; }

.lightbox-content {
  position: relative;
  z-index: 1001;
  max-width: 90vw;
  max-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lightbox-content img {
  max-width: 90vw;
  max-height: 88vh;
  object-fit: contain;
  border-radius: var(--radio-8);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
}

.lightbox-content video {
  max-width: 90vw;
  max-height: 88vh;
  border-radius: var(--radio-8);
  box-shadow: 0 24px 80px rgba(0,0,0,.7);
  outline: none;
}

/* ── Responsive galería ─────────────────────────────────────── */
@media (max-width: 1023px) {
  .gallery-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
  .section-gallery { padding: var(--esp-48) var(--esp-16) var(--esp-48); }
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--esp-10);
  }
  .gallery-header { margin-bottom: var(--esp-24); }
}

/* ── ESTADÍSTICAS (oculta por defecto — enabled:false en config) ── */
.section-stats { display: none; }
.section-stats.stats-enabled {
  display: block;
  background: var(--navy);
  padding: var(--esp-64) var(--esp-24);
}

.stats-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-radius: var(--radius);
  overflow: hidden;
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--esp-40) var(--esp-24);
  position: relative;
  background: rgba(255,255,255,.04);
}

.stat-item + .stat-item::before {
  content: '';
  position: absolute;
  left: 0; top: 15%; height: 70%;
  width: 1px;
  background: rgba(255,255,255,.1);
}

.stat-icon {
  width: 48px; height: 48px;
  margin-bottom: var(--esp-12);
  border-radius: var(--radio-12);
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-icon svg { width: 24px; height: 24px; color: var(--white); }

.stat-item:nth-child(1) .stat-icon { background: rgba(255,107,74,.2); color: var(--coral); }
.stat-item:nth-child(2) .stat-icon { background: rgba(11,31,51,.4); border: 1px solid rgba(100,149,237,.3); }
.stat-item:nth-child(3) .stat-icon { background: rgba(76,175,138,.15); }
.stat-item:nth-child(4) .stat-icon { background: rgba(155,126,189,.15); }

.stat-num {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  line-height: 1;
  margin-bottom: var(--esp-8);
}

.stat-label {
  font-size: .82rem;
  color: var(--gray);
  line-height: 1.4;
}

@media (max-width: 767px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(2n+1)::before { display: none; }
}

/* ── ESTADÍSTICAS DEL MERCADO — SOBRE BLANCO ───────────────── */
.section-stats-mercado {
  background: #ffffff;
  padding: var(--esp-48) var(--esp-24) var(--esp-80);
  min-height: 420px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  position: relative;   /* ancla el panel de detalle de fuentes (superpuesto) */
}
.section-stats-mercado::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
  margin: 0 auto 44px;
}
.smc-titulo {
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--coral);
  margin: 0 0 var(--esp-40);
}
.smc-fuente {
  grid-column: 1 / -1;
  text-align: center;
  font-size: .7rem;
  color: rgba(0,0,0,.38);
  margin: var(--esp-24) 0 0;
  letter-spacing: .03em;
}
.stats-mercado-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-24);
}
.stat-mercado-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: var(--esp-40) 30px;
  background: #F8F8F8;
  border-radius: var(--radio-20);
  border: 1px solid rgba(0,0,0,.04);
  box-shadow: 0 4px 20px rgba(0,0,0,.08);
  transition: transform .2s, box-shadow .2s;
}
.stat-mercado-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}
.stat-mercado-card:nth-child(2) {
  border: 1px solid var(--coral);
  box-shadow: 0 4px 20px rgba(255,107,74,.12);
}
.smc-emoji {
  font-size: 2rem;
  margin-bottom: var(--esp-16);
  display: block;
}
.smc-valor {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  font-weight: 800;
  color: #10233A;
  line-height: 1;
  display: block;
  margin-bottom: var(--esp-10);
  font-variant-numeric: tabular-nums;
}
.smc-etiqueta {
  font-size: .95rem;
  font-weight: 600;
  color: #5C6B7C;
  display: block;
  margin-bottom: var(--esp-4);
  line-height: 1.6;
}
.smc-sub {
  font-size: .8rem;
  color: #5C6B7C;
  display: block;
  line-height: 1.6;
}
@media (max-width: 767px) {
  .stats-mercado-inner { grid-template-columns: 1fr; gap: var(--esp-16); }
  .section-stats-mercado { padding: 60px var(--esp-24); min-height: unset; }
}

/* ── EL MERCADO HOY — rejilla 2×3 de cuadros tipo botón (columna 2) ──
   ES: 2 columnas × 3 filas; los cuadros con la MISMA altura (grid-auto-rows:1fr +
       stretch), separación uniforme. Si hay menos de 6 (valores null), la rejilla
       se reacomoda sola. Cuadro tipo botón: contorno en las 4 caras + tacto (hover
       en desktop, active al pulsar en móvil). El VALOR domina; etiqueta y subtítulo
       secundarios. Todo por tokens (--mcard-*).
   EN: 2×3 grid of equal-height, button-like cells; the value dominates. */
.mercado-titulo {
  text-align: center;
  font-size: .72rem; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
  color: var(--coral); margin: 0 0 var(--esp-12);
}
.mercado-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2 columnas */
  grid-auto-rows: minmax(0, 1fr);   /* filas de igual altura → cuadros iguales */
  gap: var(--mcard-gap);
  position: relative;              /* ancla los paneles de explicación (superpuestos) */
  /* ES: La rejilla LLENA su tarjeta — crece y reparte el alto entre sus filas
         (2 filas con 3 reportes, 3 con 6…). El navegador hace la cuenta, no
         nosotros. Tope por cuadro: --mcard-hmax; el tope total sale del número
         de filas (--mgrid-filas, lo pone la vista según los datos). Si la
         tarjeta da más alto, los márgenes auto centran la rejilla en el
         sobrante (y el pie queda anclado abajo) en vez de deformar cuadros.
     EN: The grid FILLS its card — it grows and splits the height across its
         rows. The browser does the math. Per-box cap: --mcard-hmax; the total
         cap comes from the row count (--mgrid-filas, set by the view from the
         data). Extra space centers the grid (auto margins) instead of
         deforming the boxes; the footer stays pinned at the bottom. */
  flex: 1 1 auto;
  min-height: 0;
  max-height: calc(var(--mgrid-filas, 3) * var(--mcard-hmax)
               + (var(--mgrid-filas, 3) - 1) * var(--mcard-gap));
  margin-top: auto;
  margin-bottom: auto;
}
.mercado-cuadro {
  position: relative;              /* ancla el signo en la esquina */
  /* ES: rejilla de 3 ZONAS con altura reservada (tokens --mz-*), todo centrado
         vertical y horizontal. EN: 3 reserved-height zones, fully centered. */
  display: grid;
  grid-template-rows: var(--mz-icono) var(--mz-valor) var(--mz-texto);
  align-content: center;
  align-items: center;
  justify-items: center;
  row-gap: var(--mz-gap);
  text-align: center;
  padding: var(--esp-16) var(--esp-12);
  background: var(--mcard-bg);
  border: var(--mcard-border);       /* contorno definido en las 4 caras */
  border-radius: var(--mcard-radius); /* radio menor que la tarjeta */
  transition: background .15s, box-shadow .15s, transform .1s;
}
/* ES: SIMETRÍA — los 6 cuadros son EXACTAMENTE iguales (mismo ancho, alto,
       padding y tamaño de número). NINGÚN cuadro abarca dos celdas: con un
       número impar de reportes la última celda queda vacía a propósito; el
       desbalance desaparece al cargar los 6.
   EN: SYMMETRY — all boxes are EXACTLY equal. NO box spans two cells: with an
       odd count the last cell stays empty on purpose; balance returns at 6. */
.mercado-cuadro:hover { background: var(--mcard-bg-hover); box-shadow: 0 2px 12px rgba(0,0,0,.09); }
.mercado-cuadro:active { transform: scale(.98); }   /* tacto al pulsar (móvil) */
.mercado-icono { font-size: 1.35rem; line-height: 1; }
.mercado-valor {                     /* elemento DOMINANTE */
  font-family: 'Archivo', sans-serif; font-weight: 800;
  font-size: clamp(1.3rem, 1.7vw, 1.75rem); line-height: 1.05;
  color: #10233A; font-variant-numeric: tabular-nums;
}
/* ES: zona de texto — etiqueta+sub centrados DENTRO de su altura reservada.
   EN: text zone — label+sub centered INSIDE their reserved height. */
.mercado-texto {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--esp-2); height: 100%; min-width: 0;
}
.mercado-etiqueta { font-size: .78rem; font-weight: 600; color: #5C6B7C; line-height: 1.25; }
.mercado-sub { font-size: .7rem; color: #8A94A6; line-height: 1.2; }
/* ── Signo (info) — <button> táctil de 44×44 con ícono pequeño ──
   ES: se PULSA (no hover). Área táctil 44×44 aunque el ícono se vea chico. */
.mercado-signo {
  position: absolute; top: 3px; right: 3px;
  width: 44px; height: 44px;          /* área táctil mínima 44×44 */
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer;
  color: #98A2B0; transition: color .15s; z-index: 2;
}
.mercado-signo svg { width: 17px; height: 17px; }
.mercado-signo:hover, .mercado-signo[aria-expanded="true"] { color: var(--coral); }
.mercado-signo:focus-visible { outline: 2px solid var(--coral); outline-offset: 2px; border-radius: 50%; }
.mercado-signo--pie { position: static; width: 44px; height: 44px; vertical-align: middle; margin-left: 0; }  /* táctil 44 (antes 30) */
.mercado-signo--pie svg { width: 15px; height: 15px; }

/* ── Pie: fecha + crédito (VISIBLE SIEMPRE) + símbolo ── */
.mercado-pie {
  text-align: center; font-size: .7rem; color: rgba(0,0,0,.5);
  margin: var(--esp-12) 0 0; letter-spacing: .02em; line-height: 1.4;
}
.mercado-pie-fuente { color: rgba(0,0,0,.62); font-weight: 600; }

/* ── Paneles SUPERPUESTOS — se superponen sin desplazar la rejilla. Una a la vez.
   ES: REGLA: el panel NUNCA cubre su propio disparador. La explicación se ancla
       DEBAJO del cuadro (el signo, arriba, queda visible y pulsable → 2º toque
       cierra). El detalle de fuentes cubre la rejilla pero el símbolo del pie
       (debajo de la rejilla) queda visible.
   EN: The panel NEVER covers its own trigger; the sign/symbol stays clickable. */
.mercado-expl {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 10;
  width: calc(200% + var(--mcard-gap));   /* ancho de las 2 columnas de la rejilla */
  background: #fff; border: var(--mcard-border); border-radius: var(--mcard-radius);
  padding: var(--esp-16) var(--esp-16) var(--esp-12);
  display: flex; flex-direction: column; gap: var(--esp-6);
  box-shadow: 0 8px 26px rgba(0,0,0,.16); text-align: left;
}
.mercado-cuadro:nth-child(even) .mercado-expl { left: auto; right: 0; }        /* col. derecha ancla a la derecha */
.mercado-fuentes-detalle {
  position: absolute; inset: 0; z-index: 10;
  background: #fff; border: var(--mcard-border); border-radius: var(--mcard-radius);
  padding: var(--esp-16) var(--esp-16) var(--esp-16); overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--esp-8);
  box-shadow: 0 6px 24px rgba(0,0,0,.14); text-align: left;
}
.mercado-expl[hidden], .mercado-fuentes-detalle[hidden] { display: none; }
.mercado-panel-close {
  position: absolute; top: 6px; right: 6px; width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer; color: #98A2B0;
}
.mercado-panel-close svg { width: 15px; height: 15px; }
.mercado-panel-close:hover { color: #10233A; }
.mercado-panel-titulo { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: .92rem; color: #10233A; margin: 0; padding-right: 34px; }
.mercado-panel-texto { font-size: .8rem; color: #5C6B7C; line-height: 1.5; margin: 0; }
.mercado-fuentes-lista { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--esp-6); font-size: .76rem; color: #5C6B7C; line-height: 1.35; }
.mercado-fuentes-lista strong { color: #10233A; font-weight: 700; }
.mercado-fuentes-nota { font-size: .74rem; color: #8A94A6; font-style: italic; margin: var(--esp-4) 0 0; border-top: 1px solid rgba(0,0,0,.08); padding-top: var(--esp-8); }

/* ── CONDADOS ───────────────────────────────────────────────── */
.section-counties {
  padding: var(--esp-48) var(--esp-24) var(--esp-80);
  min-height: 420px;
  background: #FAF6F0;
  border-bottom: 1px solid rgba(0,0,0,.06);
}
.section-counties::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
  margin: 0 auto 44px;
}

.counties-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 3fr 2fr;
  gap: var(--esp-64);
  align-items: start;
}

.counties-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: var(--esp-24);
}

.county-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-10);
  margin-bottom: var(--esp-24);
}

.county-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-6);
  background: var(--navy);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: var(--esp-8) var(--esp-16);
  font-size: .82rem;
  font-weight: 600;
  color: var(--white);
  box-shadow: 0 2px 8px rgba(11,31,51,.12);
  text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
a.county-chip:hover {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
}

.county-chip svg { width: 14px; height: 14px; color: var(--coral); flex-shrink: 0; }

.counties-sub {
  font-size: .9rem;
  color: var(--gray);
  line-height: 1.7;
}

.counties-map {
  background: var(--navy);
  border-radius: var(--radius);
  padding: var(--esp-32);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 320px;
}

/* ES: EXENCIÓN del piso de 14px (decisión del arquitecto): los nombres de
       condado DENTRO del SVG son refuerzo gráfico — el texto accesible y
       táctil vive en las pastillas de condado (≥14px, táctil 44). A 14px los
       nombres colisionarían entre sí en el mapa móvil.
   EN: 14px-floor EXEMPTION: the in-SVG county names are graphic reinforcement;
       accessible text lives in the county pills (≥14px, 44px targets). */
.counties-map svg {
  width: 100%;
  max-width: 360px;
  height: auto;
}

@media (max-width: 767px) {
  .counties-inner { grid-template-columns: 1fr; gap: var(--esp-40); }
  .counties-map { min-height: 240px; }
}

/* ── CTA — CUENTA SPG ──────────────────────────────────────── */
.section-cta {
  background: #10233A;
  padding: var(--esp-48) var(--esp-24) var(--esp-80);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.section-cta::before {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--coral);
  border-radius: 2px;
  margin: 0 auto 44px;
}
.cta-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}
.cta-title {
  font-family: 'Fraunces', Georgia, serif;
  font-size: clamp(1.7rem, 3.5vw, 2.6rem);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 var(--esp-16);
  text-wrap: balance;
  line-height: 1.25;
}
.cta-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,.55);
  margin: 0 0 var(--esp-48);
  line-height: 1.6;
  letter-spacing: .02em;
}
.cta-benefits {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-20);
  margin-bottom: var(--esp-48);
  flex-wrap: wrap;
}
.cta-benefit {
  display: flex;
  align-items: center;
  gap: var(--esp-8);
}
.cta-benefit-icon { font-size: 1.2rem; }
.cta-benefit-label {
  font-size: .95rem;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.6;
}
.cta-benefit-dot {
  color: rgba(255,255,255,.3);
  font-size: 1.4rem;
}
.btn-cta-primary {
  display: inline-block;
  background: var(--coral);
  color: #fff;
  font-size: .95rem;
  font-weight: 700;
  padding: var(--esp-16) var(--esp-40);
  border-radius: 30px;
  text-decoration: none;
  transition: background .15s, transform .1s;
  letter-spacing: .02em;
}
.btn-cta-primary:hover {
  background: #e85a3a;
  transform: translateY(-2px);
}
.cta-sinpass {
  margin: var(--esp-20) 0 0;
  font-size: .78rem;
  color: rgba(255,255,255,.35);
  letter-spacing: .02em;
}
@media (max-width: 767px) {
  .cta-benefits { flex-direction: column; gap: var(--esp-16); }
  .cta-benefit-dot { display: none; }
  .section-cta { padding: 60px var(--esp-24); min-height: unset; }
}

/* ── Vidriera — fila completa (página 1) ── */
.section-vidriera {
  background: #0A1628;
  width: 100%;
}
.vidriera-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;   /* 3 cuadros exactamente iguales */
  gap: 2%;                              /* 2% de separación entre cuadros */
  /* ES: el 3%% se capa junto al techo: min(3%%, 3%% de --contenido-max) — si no,
         el %% resuelve contra la sección full-width y la línea se corre.
     EN: side margin capped with the ceiling so the master line holds. */
  padding: 0 min(3%, calc(0.03 * var(--contenido-max)));
  box-sizing: border-box;
  width: 100%;
  min-height: 300px;
  /* ES: techo de contenido centrado (>1920) — el fondo de la sección sigue
         a todo el ancho. EN: content ceiling; section bg stays full-width. */
  max-width: var(--contenido-max);
  margin-inline: auto;
}

/* ── Home Página 2 — 3 columnas ── */
/* ES: Base MÓVIL — las 3 tarjetas apiladas en una columna, con separación
       vertical y margen lateral (16px) para que la sombra no toque el borde.
   EN: MOBILE base — the 3 cards stacked in one column, vertical gap + side margin. */
.home-page2 {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-20);
  padding: 0 var(--esp-16);
  width: 100%;
  box-sizing: border-box;
  max-width: var(--contenido-max);  /* techo (>1920); el navy sigue full */
  margin-inline: auto;
}
/* ES: Estilo de tarjeta — SE MANTIENE en todos los tamaños. Cada sección conserva
       su propio fondo (navy/blanco/crema); radio y sombra salen de los tokens.
   EN: Card style — kept at ALL sizes. Each section keeps its own background. */
.home-page2 > section {
  /* ES: RECORTE del 2% — el padding vertical baja de 24 a 16px (−8 arriba y
         −8 abajo = −16px por tarjeta, las TRES por igual: la fila pasa de
         832→816px @1440). Ese alto recuperado se le da a la barra inferior
         de copyright/términos como aire interno (.footer-bottom de página 2).
     EN: 2% TRIM — vertical padding drops 24→16px (−16px per card, all THREE
         equally: the row goes 832→816px @1440). The recovered height goes to
         the copyright/terms bar as inner breathing room. */
  padding: var(--esp-16) var(--esp-24);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow-light);   /* sombra reforzada en las 3 (suma en la navy) */
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
/* ES: SOLO las tarjetas claras (stats + condados) suman un borde 1px sutil para
       darle arista contra el fondo. La navy (portal) NO lleva borde: sobre navy
       quedaría como caja de alambre; se despega por su tono elevado.
   EN: ONLY light cards add a hairline border; the navy card has no border (it would
       look like a wireframe box on navy) — it lifts by its elevated tone. */
.home-page2 > .section-stats-mercado,
.home-page2 > .section-counties {
  border: var(--card-border-light);
}
/* ES: Ocultamos la barrita coral superior dentro de las tarjetas (redundante). */
.home-page2 > .section-stats-mercado::before,
.home-page2 > .section-counties::before { display: none; }
.home-page2 .counties-inner { max-width: none; grid-template-columns: 1fr; gap: var(--esp-24); }
.home-page2 .section-stats-mercado { justify-content: flex-start; }
.home-page2 .stats-mercado-inner { max-width: none; grid-template-columns: 1fr; gap: var(--esp-12); }
.home-page2 .stat-mercado-card { padding: var(--esp-24) var(--esp-20); }

/* ── Portal — col 1 del home-page2 ── */
.section-portal {
  /* ES: Tarjeta elevada — navy medio (--card-bg-elevated, #1B3A5E) un punto más
     claro que el fondo #10233A de la sección, para despegarse. En superficies
     oscuras la elevación se comunica subiendo la LUMINOSIDAD de la superficie,
     no con sombra: una sombra sobre un fondo casi negro no tiene nada que
     oscurecer. Por eso sube el tono y NO lleva borde (sobre navy sería alambre).
     EN: Elevated card — a mid navy one step lighter than the section, so it lifts
     by luminosity. On dark surfaces elevation reads as a lighter tone, not shadow. */
  background: var(--card-bg-elevated);
  color: #fff;
}
.portal-inner {
  display: flex;
  flex-direction: column;
  gap: var(--esp-12);                          /* compacto: el bloque nuevo debe caber */
  /* ES: El bloque de contenido se CENTRA horizontalmente en la tarjeta; los
         textos de presentación van centrados (los campos del form no: sus
         etiquetas se quedan alineadas con su campo, ver .portal-form).
     EN: The content block CENTERS horizontally; presentation texts center
         (form fields don't: labels stay aligned with their field). */
  align-items: center;
  text-align: center;
}
/* ES: JERARQUÍA en 3 niveles — título DOMINANTE / invitación INTERMEDIA /
       beneficios y textos de apoyo SECUNDARIOS. Antes los tamaños eran
       demasiado parejos y nada guiaba la vista.
   EN: 3-level HIERARCHY — dominant title / mid invitation / secondary rest. */
.portal-titulo {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.45rem, 2.6vw, 1.95rem);   /* nivel 1: DOMINANTE */
  line-height: 1.22;
  color: #fff;
  margin: 0;
  text-wrap: balance;
}
.portal-sub {
  font-size: .85rem;                            /* nivel 3: apoyo */
  color: rgba(255,255,255,.55);
  margin: 0;
}
.portal-beneficios {
  list-style: none;
  padding: 0;
  margin: 0;
  /* ES: la LISTA se centra como bloque, pero sus filas se leen alineadas a la
         izquierda (una lista centrada línea a línea queda dentada). En móvil
         1 columna; desde 640px, rejilla de 2 columnas × 3 filas (compacta:
         6 beneficios sin estirar la tarjeta — la fila de página 2 no crece).
     EN: the LIST centers as a block; rows read left-aligned inside it. One
         column on mobile; from 640px, a 2×3 grid (compact: 6 benefits
         without growing the page-2 row). */
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--esp-6) var(--esp-16);
  align-self: center;
  text-align: left;
}
@media (min-width: 768px) {
  .portal-beneficios { grid-template-columns: auto auto; justify-content: center; }
}
.portal-beneficios li {
  display: flex;
  align-items: center;
  gap: var(--esp-10);
  font-size: .9rem;                             /* nivel 3: apoyo */
  color: rgba(255,255,255,.85);
}
.portal-emoji { font-size: 1.1rem; flex-shrink: 0; }
.btn-portal-cta {
  display: inline-block;
  background: var(--coral);
  color: var(--coral-boton-texto, #10233A);   /* AA sobre coral (5.63:1) */
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: var(--esp-12) var(--esp-24);
  border-radius: var(--radio-10);
  text-decoration: none;
  text-align: center;
  transition: background .15s, transform .15s;
  align-self: flex-start;
}
.btn-portal-cta:hover { background: #e85a3a; transform: translateY(-1px); }
.portal-cta-sub {
  font-size: .75rem;
  color: rgba(255,255,255,.55);   /* AA sobre el navy medio elevado (era .35 → 2.81:1) */
  margin: -8px 0 0;
  text-align: center;             /* apoyo del botón: centrado bajo el CTA */
}

/* ── Registro (columna 1): introducción + porqués + formulario ──
   ES: JERARQUÍA — intro L1 destacada > porqués > capitancitos de la rejilla.
       Tipografía y espaciados COMPACTOS: el bloque entero debe caber en el
       ancla de la fila sin tocar una palabra de los textos del dueño.
   EN: Hierarchy intro > whys > grid captions. COMPACT spacing/type: the block
       must fit the row anchor without touching a single approved word. */
.portal-intro-l1 {
  font-size: 1.02rem;                 /* destacada */
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
  margin: -8px 0 0;
  max-width: 40ch;
}
.portal-intro-l2 {
  font-size: .84rem;                  /* secundaria */
  color: rgba(255,255,255,.72);
  line-height: 1.42;
  margin: -6px 0 0;
  max-width: 58ch;                    /* menos envolturas; sigue < 70ch legible */
}
.portal-porques {
  list-style: none;
  padding: 0;
  margin: -2px 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
  align-self: center;                 /* bloque centrado, filas a la izquierda */
  text-align: left;
  max-width: 58ch;                    /* menos envolturas; sigue < 70ch legible */
}
.portal-porques li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-8);
  font-size: .84rem;                  /* más peso que capitancitos vía negrita */
  line-height: 1.38;
  color: rgba(255,255,255,.7);
}
.pq-vineta { color: var(--coral); flex-shrink: 0; font-size: .74rem; line-height: 1.6; }
.pq-fuerte { color: #fff; font-weight: 700; }
/* ES: El form ocupa TODO el ancho (los campos conservan su ancho actual) y su
       interior vuelve a alinearse a la izquierda: etiqueta pegada a su campo.
   EN: The form spans full width (fields keep their width); its inside goes
       back to left alignment: each label stays with its field. */
.portal-form { display: flex; flex-direction: column; gap: var(--esp-10); margin-top: var(--esp-2); width: 100%; text-align: left; }
.portal-field { display: flex; flex-direction: column; gap: var(--esp-4); }
.portal-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: rgba(255,255,255,.6);
}
/* ES: "(opcional)" junto a la etiqueta del teléfono. Va más apagado y sin
       mayúsculas para que se lea como una aclaración y no como parte del
       nombre del campo: quien lo ve tiene que entender de un vistazo que puede
       saltárselo. EN: the "(optional)" tag next to the phone label — quieter
       and lowercase so it reads as an aside, not as part of the field name. */
.portal-opcional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: rgba(255,255,255,.38);
}
.portal-input {
  width: 100%; box-sizing: border-box;
  background: rgba(255,255,255,.10);   /* +definición sobre el navy medio elevado */
  border: 1.5px solid rgba(255,255,255,.26);
  border-radius: var(--radio-10);
  padding: var(--esp-10) var(--esp-12);
  font-size: .95rem; color: #fff;
  transition: border-color .15s, background .15s;
}
.portal-input::placeholder { color: rgba(255,255,255,.4); }
.portal-input:focus { outline: none; border-color: var(--coral); background: rgba(255,255,255,.1); }
.portal-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.portal-consent {
  display: flex; align-items: flex-start; gap: var(--esp-8);
  font-size: .82rem; line-height: 1.4; color: rgba(255,255,255,.82);
  cursor: pointer; margin-top: var(--esp-2);
}
.portal-consent input[type="checkbox"] {
  flex-shrink: 0; width: 18px; height: 18px; margin-top: 1px;
  accent-color: var(--coral); cursor: pointer;
}
/* El botón CTA ahora es <button>: reset + estado deshabilitado (gris/inerte) */
.btn-portal-cta { border: none; cursor: pointer; }
.portal-form .btn-portal-cta { align-self: stretch; margin-top: var(--esp-2); }
.btn-portal-cta:disabled { background: #4a5a6e; color: rgba(255,255,255,.55); cursor: not-allowed; transform: none; }
.btn-portal-cta:disabled:hover { background: #4a5a6e; transform: none; }
/* Panel de éxito "Revise su correo" */
.portal-success { display: flex; flex-direction: column; align-items: flex-start; gap: var(--esp-6); margin-top: var(--esp-4); }
.portal-success[hidden] { display: none; }
.portal-success-icon { font-size: 2rem; line-height: 1; }
.portal-success-titulo { font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 1.1rem; color: #fff; margin: 0; }
.portal-success-msg { font-size: .88rem; color: rgba(255,255,255,.72); line-height: 1.5; margin: 0; }
.portal-resend { background: none; border: none; color: var(--coral); font-size: .82rem; font-weight: 700; cursor: pointer; text-decoration: underline; padding: 0; margin-top: var(--esp-4); }
.portal-resend[hidden] { display: none; }

.vidriera-cuadro {
  aspect-ratio: 1;
  border-radius: var(--card-radius);                 /* esquinas redondeadas generosas */
  overflow: hidden;                    /* la foto respeta el redondeo, no se sale */
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* ES: Empty-state de marca (white-label) — reemplaza el viejo borde punteado de editor.
   Nunca visible como "suba aquí": fondo navy + monograma tenue en color de marca. */
.vidriera-cuadro--marca {
  background: #071D3A;
}
.vidriera-marca {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  letter-spacing: .12em;
  color: var(--coral);
  opacity: .16;
  user-select: none;
}
.vidriera-cuadro--activo {
  background: #0A1628;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: transform .2s;
}
.vidriera-cuadro--activo:hover { transform: scale(1.03); }
.vidriera-cuadro--activo img,
.vidriera-cuadro--activo video {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.vidriera-play {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,.25);
  color: rgba(255,255,255,.85);
  opacity: 0;
  transition: opacity .2s;
}
.vidriera-cuadro--activo:hover .vidriera-play { opacity: 1; }

/* ── Franja de transición — eslogan de marca (separador vidriera → página 2) ──
   Separador con propósito al hacer scroll: un degradado suave funde el navy de
   la vidriera (#0A1628) con el navy de la sección de abajo (#10233A), sin corte
   blanco. Config-driven (cfg.frase_transicion). El .pagina-2 (wrapper de la
   página 2) tenía transparente el padding-top que descuenta el navbar → mostraba
   el crema del body; se pinta navy para que la transición sea continua. */
.franja-transicion {
  background: linear-gradient(to bottom, var(--ft-grad-top, #1C3A5E) 0%, var(--ft-grad-bottom, #10233A) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* ES: el padding lateral pasa a 0 — el margen lateral (3%) lo pone la fila,
         para que los cuadros AD queden EXACTAMENTE alineados con Cursos.
     EN: side padding goes to 0 — the row provides the 3% side margin so the
         AD boxes align EXACTLY with the Courses cards. */
  /* ES: padding vertical = token FIJO de la escala 2(f), NO 'vh'. El 'vh' crecía
         con el alto del viewport (en un monitor alto el vacío se agrandaba solo,
         violando G4/G5); con anuncios apagados no debe reservar altura. Ahora la
         franja respira con la misma escala que el resto del home (--esp-32, igual
         que .section-services) y su altura la define su contenido real.
     EN: vertical padding = FIXED token from the 2(f) scale, NOT 'vh'. 'vh' grew
         with viewport height (taller screen = bigger gap, violating G4/G5); with
         ads off it must not reserve height. The strip now breathes on the same
         scale as the rest of the home (--esp-32, like .section-services) and its
         height is defined by its real content. */
  padding: var(--esp-32) 0;
  text-align: center;
}
/* ── Fila [cuadro AD] · [marca + eslogan] · [cuadro AD] ──
   ES: MISMA rejilla que .vidriera-grid (Cursos): 3 columnas iguales, separación
       2%, margen lateral 3%. No se inventan anchos nuevos. En móvil se apila
       (cuadro, eslogan, cuadro — orden del DOM).
   EN: SAME grid as .vidriera-grid (Courses): 3 equal columns, 2% gap, 3% side
       margin. No new widths invented. On mobile it stacks (DOM order). */
.franja-fila {
  display: grid;
  grid-template-columns: 1fr;      /* base móvil: apilado */
  gap: var(--esp-16);
  padding: 0 min(3%, calc(0.03 * var(--contenido-max)));  /* capado con el techo */
  box-sizing: border-box;
  width: 100%;
  align-items: center;
  max-width: var(--contenido-max);  /* techo (>1920); el degradado sigue full */
  margin-inline: auto;
}
/* ES: Cuadro de anuncio — foto de fondo tipo cover (llena sin deformar), radio
       del sistema de tarjetas, pastilla AD legible sobre cualquier foto.
       Con enlace es <a> (cursor de mano del propio <a>); sin enlace es <div>
       (cursor normal). En móvil conserva proporción 16/9.
   EN: Ad box — cover photo (fills without distortion), system card radius,
       AD pill readable over any photo. 16/9 ratio on mobile. */
.franja-ad {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;            /* móvil: proporción fija, sin deformar */
  border-radius: var(--card-radius);
  overflow: hidden;
}
.franja-ad-img {
  width: 100%;
  height: 100%;
  object-fit: cover;               /* recorte tipo cover — jamás se aplasta */
  display: block;
}
.franja-ad-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(16, 35, 58, .72);   /* navy semitransparente — legible sobre foto */
  color: #fff;
  font-family: 'Archivo', sans-serif;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .09em;
  padding: var(--esp-2) var(--esp-8);
  border-radius: var(--radio-8);
}
/* ES: Bloque del eslogan — marca del tenant (config) arriba + frase. Centrado
       vertical y horizontal en su columna.  EN: slogan block, centered. */
.franja-eslogan {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 1.6vw, 16px);
  padding: 0 var(--esp-12);
}
/* ES: Marca de la franja — REUTILIZA .logo-spg (el wordmark del navbar: misma
       fuente, mismo peso 800, mismo tracking y su gradiente coral) y solo lo
       escala al bloque. Nada de letter-spacing exagerado ni versión "light":
       es el logo firmando el eslogan. Un clon hereda su propio wordmark.
   EN: Strip mark — REUSES .logo-spg (the navbar wordmark) and only scales it
       to the block. It's the logo signing the slogan; a clone inherits its own. */
.franja-marca {
  /* ES: SPG DOMINANTE (decisión del dueño: "tiene que resaltar bastante" →
         variante 2.5×): 104px @1440 vs eslogan 41.6px. El clamp escala por
         breakpoint (7.2vw) con piso 3.2rem — en móvil queda ~51px, ~2× el
         eslogan móvil: domina en todas las medidas. Mismo gradiente del
         wordmark (.logo-spg); el eslogan firma debajo.
     EN: DOMINANT SPG (owner's 2.5× choice): 104px @1440, breakpoint-scaled,
         ~2× the slogan at every size. Same wordmark gradient. */
  font-size: clamp(3.2rem, 7.2vw, 6.5rem);
}
/* ES: Variante BLANCA — anula el gradiente del wordmark y firma en blanco
       sólido (misma fuente/peso/solidez). Se activa poniendo esta clase.
   EN: WHITE variant — overrides the wordmark gradient with solid white. */
.franja-marca--blanca {
  background: none;
  -webkit-text-fill-color: currentColor;
  color: #fff;
}
/* ES: Conjunto SELLADO — marca pegada al eslogan y las dos líneas de la frase
       leídas como UNA (interlineado apretado solo aquí).
   EN: SEALED unit — mark tight to the slogan; the two lines read as ONE. */
.franja-eslogan { gap: clamp(4px, .7vw, 8px); }
.franja-eslogan .ft-frase { line-height: 1.05; }
/* ES: Desktop — fila real de 3 columnas con posiciones FIJAS: si falta un
       cuadro su columna queda vacía y el eslogan NO se mueve de la del medio.

       EL CUADRO YA NO IMPONE SU ALTO. Antes lo sacaba de un token en vh y el
       resultado era un hueco casi cuadrado (352×338, proporción 1.04) donde
       se monta una foto panorámica de 2.20: para taparlo, el navegador
       ampliaba la imagen hasta 745px de ancho en una caja de 352 y enseñaba
       el 47% central. Eso es lo que se veía deformado, y subir el alto lo
       empeoraba — cuanto más alto, más amplía y menos anuncio se ve.
       Ahora conserva la proporción 16/9 de la regla base, la misma que ya
       usaba el móvil: una sola forma en todas las pantallas y casi toda la
       foto a la vista. El alto sale de la anchura de su columna, que es como
       se comporta una imagen.
   EN: Desktop — real 3-column row with FIXED slots. THE BOX NO LONGER FORCES
       A HEIGHT: it used to take one from a vh token, producing a near-square
       352×338 (1.04) slot holding a 2.20 panoramic photo. To cover it the
       browser blew the image up to 745px wide inside 352px and showed the
       middle 47% — that was the "stretched" look, and more height made it
       worse. It now keeps the base 16/9 ratio, the same one mobile already
       used: one shape on every screen, and nearly the whole photo visible. */
@media (min-width: 1024px) {
  .franja-fila { grid-template-columns: 1fr 1fr 1fr; gap: 2%; }
  .franja-ad--izq  { grid-column: 1; }
  .franja-eslogan  { grid-column: 2; }
  .franja-ad--der  { grid-column: 3; }
}
.ft-frase {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.01em;
  color: var(--ft-text, #fff);
  text-wrap: balance;
}
.ft-acento { color: var(--ft-acento-color, var(--coral)); }
/* Rellena de navy el padding-top (descuento del navbar) del wrapper de página 2,
   que antes mostraba el crema del body y creaba el "hueco blanco". */
.pagina-2 { background: #10233A; }

/* ══════════════════════════════════════════════════════════════
   HOME · PÁGINA 1 encaja en 100vh (solo desktop) — 4 franjas:
   navbar (fijo, ~7vh overlay) + hero 31vh + servicios 31vh + vidriera 31vh.
   El hero mide 38vh porque su padding-top: var(--nav-h) reserva el navbar.
   En móvil/tablet (<1025px) NO aplica: las franjas se apilan y fluyen.
   ══════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .page-home .hero {
    height: 38vh;            /* 7vh navbar (overlay) + 31vh de contenido */
    min-height: 0;
  }
  /* Comprimir el contenido del hero para que quepa entero en su 31vh */
  .page-home .hero-content { padding-block: 0; justify-content: center; }
  /* ES: los tamaños comprimidos también van × --hero-escala — la escalera
         gobierna el bloque en TODAS las medidas. EN: compressed sizes too. */
  .page-home .hero-eyebrow { margin-bottom: clamp(4px, 1vh, 8px); font-size: calc(.68rem * var(--hero-escala)); }
  .page-home .hero-spg { font-size: calc(clamp(2.4rem, 6vh, 4.4rem) * var(--hero-escala)); line-height: .84; }
  .page-home .hero-sanabria { font-size: calc(clamp(1.2rem, 3vh, 2.1rem) * var(--hero-escala)); }
  .page-home .hero-group-row { margin-top: var(--esp-2); margin-bottom: clamp(4px, 1vh, 10px); }
  .page-home .hero-tagline { font-size: calc(clamp(.9rem, 1.7vh, 1.2rem) * var(--hero-escala)); margin-bottom: clamp(4px, 1vh, 8px); line-height: 1.2; }
  .page-home .hero-sub { font-size: calc(clamp(.76rem, 1.5vh, .88rem) * var(--hero-escala)); line-height: 1.45; }
  .page-home .section-services {
    height: 31vh;
    min-height: 0;
    overflow: hidden;
    padding: var(--esp-10) var(--esp-24);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .page-home .section-header { margin-bottom: var(--esp-2); }
  .page-home .section-eyebrow { margin-bottom: var(--esp-4); }
  .page-home .section-services-title { font-size: clamp(1.5rem, 2.4vw, 2rem); margin: 0 0 var(--esp-2); padding-bottom: var(--esp-6); }
  .page-home .section-services-sub { font-size: .88rem; margin-top: var(--esp-4); }
  .page-home .services-app-grid { margin-top: clamp(6px, 1.6vh, 18px); align-items: center; }
  .page-home .svc-app-item { padding: clamp(8px, 1.4vh, 18px) 18px; gap: var(--esp-6); }
  .page-home .svc-icon-canvas { width: clamp(52px, 9vh, 84px); height: clamp(52px, 9vh, 84px); }

  /* Vidriera: su 31vh completo, fotos enteras (cover), sin corte */
  /* ES: mismo 31vh de siempre, ahora vía token --vidriera-h para que el alto de
         los cuadros AD de la franja derive de él (cero cambio visual aquí).
     EN: same 31vh as always, now via the --vidriera-h token so the ad boxes
         derive from it (zero visual change here). */
  .page-home .section-vidriera { height: var(--vidriera-h); min-height: 0; overflow: hidden; }
  .page-home .vidriera-grid { height: 100%; min-height: 0; align-items: stretch; padding-top: 1.6%; padding-bottom: 1.6%; }
  .page-home .vidriera-cuadro { aspect-ratio: auto; height: auto; min-height: 0; }
}

/* ── Lightbox vidriera ── */
.vidriera-lightbox {
  display: none;
  position: fixed; inset: 0; z-index: 9000;
  align-items: center; justify-content: center;
}
.vidriera-lightbox.is-open { display: flex; }
.vidriera-lb-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.88);
}
.vidriera-lb-content {
  position: relative; z-index: 1;
  max-width: min(90vw, 900px);
  max-height: 88vh;
  display: flex; align-items: center; justify-content: center;
}
.vidriera-lb-content img,
.vidriera-lb-content video {
  max-width: 100%; max-height: 88vh;
  border-radius: var(--radio-8); display: block;
}
.vidriera-lb-close {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: rgba(255,255,255,.12); border: none; border-radius: 50%;
  width: 40px; height: 40px; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.vidriera-lb-close:hover { background: rgba(255,255,255,.25); }
/* ── Mini-grid vidriera real en columna 3 ── */
.gallery-col-titulo {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  color: rgba(255,255,255,.3);
  margin: 0 0 var(--esp-20);
}
.gallery-col-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--esp-8);
  width: 100%;
}
/* gallery-col-tile extiende gallery-tile para el lightbox */
.gallery-col-tile {
  border-radius: var(--radio-8);
  overflow: hidden;
  cursor: pointer;
}
.gallery-col-tile .gallery-tile-media {
  aspect-ratio: 1;
}
.gallery-col-tile:hover .gallery-tile-media img { transform: scale(1.06); }

/* (El apilado móvil de .home-page2 ahora es la base mobile-first — 1 columna,
   gap 20px, margen lateral 16px, tarjetas con su padding de 24px. Sin regla
   extra: el grid de 7 tracks solo vive en @media (min-width:1024px).) */

/* Vidriera: los 3 cuadros SIEMPRE en fila horizontal (3 columnas 1fr, gap 2%,
   padding lateral 3% = 3/30/2/30/2/30/3) en TODOS los tamaños — nunca se
   apilan. En móvil se estrechan pero siguen en fila; el overlay encoge para
   seguir legible sin tapar la foto. El overlay de desktop/tablet queda intacto
   (solo se ajusta ≤600px). Bordes redondeados: intactos (base .vidriera-cuadro). */
@media (max-width: 767px) {
  .vidriera-grid { grid-template-columns: 1fr 1fr 1fr; gap: 2%; padding: 0 3%; min-height: 0; }
  /* cuadros estrechos y algo verticales para mostrar más foto y dar aire al texto */
  .vidriera-cuadro { aspect-ratio: 3 / 4; }
}

/* ── Portal link en footer ── */
.footer-portal-link {
  margin-top: var(--esp-6);
}
.footer-portal-link a {
  font-size: .78rem;
  color: rgba(255,255,255,.3);
  text-decoration: none;
  letter-spacing: .03em;
  transition: color .15s;
}
.footer-portal-link a:hover { color: rgba(255,255,255,.65); }

/* ── FOOTER ────────────────────────────────────────────────── */
.site-footer {
  background: var(--navy);
  color: var(--white);
  padding: 72px var(--esp-24) 0;
}

.footer-grid {
  max-width: var(--max-w);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: var(--esp-48);
  padding-bottom: var(--esp-48);
  border-bottom: 1px solid rgba(255,255,255,.1);
}

.footer-logo-wrap {
  display: flex;
  align-items: center;
  gap: var(--esp-10);
  margin-bottom: var(--esp-12);
}

.footer-spg {
  font-size: 1.75rem;
}

.footer-brand-text { display: flex; flex-direction: column; gap: 1px; }

.footer-brand-name {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .8rem;
  color: var(--white);
  line-height: 1.1;
}

.footer-brand-sub {
  font-size: .55rem;
  color: var(--gray);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-tagline {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  line-height: 1.65;
  margin-bottom: var(--esp-20);
}

.footer-socials { display: flex; gap: var(--esp-10); }

.social-link {
  width: 44px; height: 44px;         /* táctil mínimo 44 (Tanda 2b) */
  border-radius: var(--radio-8);
  border: 1px solid rgba(255,255,255,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255,255,255,.55);
  transition: border-color var(--trans), color var(--trans), background var(--trans);
}

.social-link svg { width: 17px; height: 17px; }
.social-link:hover { border-color: var(--coral); color: var(--coral); background: rgba(255,107,74,.08); }

.footer-heading {
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .7rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--white);
  margin-bottom: var(--esp-20);
}

.footer-links li { margin-bottom: var(--esp-10); }
.footer-links a {
  font-size: .85rem;
  color: rgba(255,255,255,.55);
  display: flex;
  align-items: center;
  gap: var(--esp-6);
  transition: color var(--trans);
}
.footer-links a::before { content: '›'; color: var(--coral); font-size: 1.1rem; }
.footer-links a:hover { color: var(--white); }

.footer-contact { display: flex; flex-direction: column; gap: var(--esp-12); }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: var(--esp-10);
  font-size: .84rem;
  color: rgba(255,255,255,.55);
}
.footer-contact li svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: var(--esp-2); color: var(--coral); }
.footer-contact a { color: rgba(255,255,255,.55); transition: color var(--trans); }
.footer-contact a:hover { color: var(--white); }

.footer-licenses {
  display: flex;
  flex-direction: column;
  gap: var(--esp-8);
  margin-bottom: var(--esp-20);
}
.footer-licenses li {
  font-size: .77rem;
  color: rgba(255,255,255,.55);
  line-height: 1.45;
  padding-bottom: var(--esp-8);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.footer-licenses li:last-child { border-bottom: none; }

/* ES: LAS FILAS DE SELLOS, EN REJILLA DE TRES COLUMNAS.
 *     Con una fila flexible cada sello ocupaba lo que le pedía su dibujo, así
 *     que los dos de abajo no caían debajo de los de arriba y el conjunto se
 *     leía torcido. Con tres columnas iguales, el primero de la segunda fila
 *     queda justo bajo el primero de la primera, y así los tres.
 *     Las columnas son iguales aunque la fila de abajo tenga solo dos sellos:
 *     esa tercera columna vacía es la que mantiene la alineación.
 * EN: BADGE ROWS AS A THREE-COLUMN GRID. With a plain flex row each badge took
 *     whatever width its artwork asked for, so the bottom two did not sit under
 *     the top ones and the block read crooked. Three equal columns put the
 *     second row's first badge directly under the first row's. The columns stay
 *     equal even though the bottom row has only two — that empty third column
 *     is what holds the alignment. */
.footer-badges {
  display: flex;
  flex-wrap: wrap;
  /* ES: CENTRADO, no pegado a la izquierda. Con tres columnas fijas la segunda
         fila —que solo tiene dos sellos— dejaba la tercera vacía a la derecha y
         el bloque quedaba cojo, con un agujero. Centrando cada fila, los dos de
         abajo se reparten bajo los tres de arriba y el conjunto se lee como un
         bloque, no como una lista a la que le falta un trozo.
     EN: CENTRED, not left-flushed. With three fixed columns the second row —
         which holds only two badges — left the third empty on the right and the
         block read lopsided, with a hole in it. Centring each row spreads the
         bottom two under the top three and the whole thing reads as one block
         rather than a list missing a piece. */
  justify-content: center;
  align-items: center;
  gap: var(--esp-12);
}
.footer-badges + .footer-badges { margin-top: var(--esp-12); }

/* ES: LOS SELLOS, PAREJOS DE ALTURA Y CON SU COLOR.
 *
 *     Dos decisiones, y las dos vienen de mirar la pantalla:
 *
 *  1. SE IGUALA LA ALTURA, NO LA CAJA. Una fila de logos se lee pareja cuando
 *     todos miden lo mismo de ALTO y cada uno conserva su proporción. Meterlos
 *     en una caja cuadrada idéntica hace justo lo contrario: los redondos la
 *     llenan y un logotipo apaisado como SUNachi queda flotando pequeño en el
 *     medio. Por eso el ancho es libre, con un tope para que ninguno se coma
 *     la fila.
 *
 *  2. SE QUITA EL FILTRO MONOCROMO. Aquí había un
 *     "filter: brightness(0) invert(1)" que pintaba de blanco cada píxel
 *     opaco. Eso funciona con dibujos de línea sobre transparencia, pero TRES
 *     de estos cinco sellos son discos OPACOS —el CPI de InterNACHI, el de
 *     One Stop Realty y el octógono— y con ese filtro salían convertidos en
 *     manchas blancas lisas, sin una letra legible. Es decir: el sello
 *     desaparecía y quedaba un borrón. Un sello ilegible no acredita nada, y
 *     además son marcas de terceros, que se enseñan como son.
 *     Con su color propio se leen los cinco sobre el navy del pie.
 *
 * EN: BADGES: EQUAL HEIGHT, OWN COLOURS. Two decisions, both from looking at
 *     the screen. (1) HEIGHT is equalised, not the box: a logo row reads even
 *     when every mark shares a height and keeps its proportions; forcing an
 *     identical square box does the opposite — round marks fill it and a
 *     landscape wordmark like SUNachi floats small inside. (2) The monochrome
 *     filter is gone: it painted every opaque pixel white, which works for
 *     line art on transparency, but THREE of these five are OPAQUE discs
 *     (InterNACHI CPI, One Stop Realty, the octagon) and came out as blank
 *     white smudges with no legible letter. An unreadable seal certifies
 *     nothing — and these are third-party marks, shown as they are. */
.footer-badge {
  /* ES: cada sello llena SU celda y se encaja dentro sin deformarse. Los
         redondos topan por el alto, el apaisado por el ancho — y como la celda
         es la misma para todos, ocupan una mancha parecida aunque midan
         distinto. Eso es lo que hace que la fila se lea pareja.
     EN: each badge fills ITS cell and is fitted inside without distortion:
         round marks are limited by height, the landscape one by width — and
         since the cell is identical for all, they occupy a similar visual mass
         despite different shapes. */
  /* ES: LAS CELDAS, MEDIDAS CONTRA LA COLUMNA REAL. El pie tiene 272px de
         ancho. La fila de arriba lleva dos celdas normales y una ancha:
         62 + 62 + 118 + dos separaciones de 12 = 266, que entra con 6px de
         sobra. Con 84 para las tres pedía 276 y por CUATRO píxeles el tercer
         sello se caía abajo: la fila de tres dejaba de serlo.
     EN: CELLS MEASURED AGAINST THE REAL COLUMN. The footer column is 272px.
         The top row holds two normal cells and one wide: 62 + 62 + 118 plus two
         12px gaps = 266, fitting with 6px to spare. At 84 apiece it needed 276
         and by FOUR pixels the third badge dropped to the next line. */
  width: 62px;
  height: 56px;
  object-fit: contain;
  transition: transform .18s ease, opacity var(--trans);
  align-self: center;
  /* ES: quita el recuadro gris que pinta el móvil al tocar — el efecto de
         presionar ya es la respuesta, y los dos juntos ensucian.
     EN: removes the mobile tap highlight — the press effect is the feedback. */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* ES: EFECTO PRESIONAR. Mientras el dedo o el ratón están ENCIMA sin soltar, el
       sello crece un 15%; al soltar vuelve solo. La clase la pone y la quita el
       script del pie con eventos de puntero, que valen igual para ratón, dedo y
       lápiz — un solo camino en vez de uno para cada cosa.
   EN: PRESS EFFECT. While the finger or mouse is held down, the badge grows
       15% and returns on release. The class is added and removed by the footer
       script using pointer events, which cover mouse, touch and pen alike. */
/* ES: La celda ancha, para los logotipos apaisados. 118px es lo que le permite
       a SUNachi llegar a unos 53px de alto —prácticamente los mismos 56 de los
       redondos—, que es lo que hace que se vea del mismo tamaño y no como el
       pequeño de la fila.
   EN: The wide cell, for landscape marks. 118px lets SUNachi reach roughly 53px
       tall — essentially the round marks' 56 — which is what makes it read at
       the same size instead of as the row's runt. */
.footer-badge--ancho { width: 118px; }

.footer-badge.esta-presionado { transform: scale(1.15); }

/* ES: Quien pide en su sistema que no le muevan las cosas —mareo, vértigo,
       migrañas— no las ve moverse. No es un detalle opcional: para algunas
       personas el movimiento inesperado da síntomas de verdad.
   EN: Anyone who asks their system for less motion — nausea, vertigo, migraine
       — gets none. Not optional: for some people unexpected motion is a real
       symptom trigger. */
@media (prefers-reduced-motion: reduce) {
  .footer-badge { transition: opacity var(--trans); }
  .footer-badge.esta-presionado { transform: none; }
}

.footer-badge:hover { opacity: 1; }

.footer-bottom {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: var(--esp-20) 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-8);
  justify-content: space-between;
}

.footer-bottom p { font-size: .74rem; color: rgba(255,255,255,.3); }
.footer-legal-links a {
  color: rgba(255,255,255,.6); text-decoration: none;
  /* ES: área táctil 44px sin engordar la barra (padding + margen negativo). */
  display: inline-block; padding-block: var(--esp-12); margin-block: -14px;
}
.footer-legal-links a:hover { color: #fff; text-decoration: underline; }
.footer-legal-links span { color: rgba(255,255,255,.3); margin: 0 var(--esp-6); }

/* ══════════════════════════════════════════════════════════════════════
   HOME · PÁGINA 2 — encaje en 100vh (solo desktop ≥1025px)
   Reparto vertical: navbar 7% (padding) / grid 58% / footer 29% / copyright 6%.
   Usamos flex-ratios (58/29/6) sobre el alto restante tras descontar el
   navbar fijo real (--nav-h), en vez de vh fijos: así el navbar nunca tapa
   contenido y footer + copyright JAMÁS quedan cortados. El contenido de las
   columnas se comprime (padding reducido, mapa capado por altura, sin
   desbordar). Config-driven: cero identidad hardcodeada.
   ══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* ES: DESKTOP — página 2 con altura MÍNIMA de una pantalla, NUNCA fija (regla
         sellada: el contenido cambia por tenant). Crece con el contenido y hace
         scroll natural; nada se recorta (sin overflow:hidden).
     EN: DESKTOP — page 2 is at least one screen tall, never fixed. Grows with
         content, natural scroll, nothing clipped. */
  .page-home .pagina-2 {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding-top: var(--nav-h);   /* descuenta el navbar fijo */
    box-sizing: border-box;
  }

  /* ── Grid de 3 tarjetas: 7 tracks = 1% | 32% | 1% | 32% | 1% | 32% | 1% ──
     ES: los tracks impares (1,3,5,7) son las separaciones de 1%; el contenido va
         en los tracks 2,4,6. gap:0 y SIN padding/borde/margen en el contenedor
         para que los % se calculen contra el ancho COMPLETO. overflow visible
         para no recortar las sombras de las tarjetas.
     EN: odd tracks (1,3,5,7) are the 1% gutters; content sits in tracks 2,4,6.
         No gap/padding so percentages resolve against the full width; overflow
         visible so card shadows aren't clipped. */
  .page-home .pagina-2 .home-page2 {
    flex: 1 0 auto;             /* crece para llenar la pantalla; nunca recorta el form */
    grid-template-columns: 1% 32% 1% 32% 1% 32% 1%;
    gap: 0;
    /* ── D1 ────────────────────────────────────────────────────────────────
       ES: La fila arrancaba EXACTAMENTE en el borde inferior del navbar fijo
           — gap medido: 0 px en 1366, 1440 y 1920 — y las tarjetas se veían
           encajadas en él. El criterio sellado es 16 px de respiro.
           Va SOLO dentro de este min-width:1024px: la regla base de móvil
           (.home-page2, sin padding vertical) queda intacta.
           Los laterales siguen en 0 A PROPÓSITO: los % de los 7 tracks se
           calculan contra el ancho COMPLETO, y un padding lateral los
           descuadraría.
       EN: D1 — the row started flush against the fixed navbar (measured gap:
           0 px at all three widths). Sealed criterion is 16 px. Desktop only;
           the mobile base rule keeps its zero vertical padding. Side padding
           stays 0 so the column percentages resolve against the full width. */
    padding: var(--esp-16) 0 0;
    /* ESCUADRA — ES: las 3 tarjetas se estiran a la MISMA altura, bordes inferiores
       alineados.  EN: the 3 cards stretch to the SAME height, bottom edges aligned. */
    align-items: stretch;
    overflow: visible;
  }
  .page-home .pagina-2 .home-page2 > .section-portal        { grid-column: 2; }
  /* ES: El contenido del portal LLENA su tarjeta: el espacio sobrante se
         reparte proporcionalmente ENTRE los bloques (título, invitación,
         beneficios, form), no se acumula abajo.
     EN: The portal content FILLS its card: leftover space distributes
         proportionally BETWEEN blocks instead of piling at the bottom. */
  .page-home .pagina-2 .home-page2 > .section-portal .portal-inner {
    flex: 1 1 auto;
    justify-content: space-between;
  }
  .page-home .pagina-2 .home-page2 > .section-stats-mercado { grid-column: 4; }
  .page-home .pagina-2 .home-page2 > .section-counties      { grid-column: 6; }
  /* ES: EL MAPA LLENA SU TARJETA (sin hacer crecer la fila). El interior de
         condados pasa a 2 filas: texto arriba (auto) y el MAPA toma TODO el
         resto (1fr). El dibujo va absoluto dentro de la caja navy con un marco
         --mapa-margen: crece con el espacio disponible y, al estar fuera del
         flujo, su tamaño intrínseco NO empuja la fila — el piso natural lo da
         --mapa-box-min. El SVG conserva su proporción (preserveAspectRatio):
         escala completo y centrado, jamás aplastado.
     EN: THE MAP FILLS ITS CARD (without growing the row). The counties inner
         becomes 2 rows: text (auto) + MAP takes the rest (1fr). The drawing is
         absolutely positioned inside the navy box with a --mapa-margen frame:
         it grows with available space and, being out of flow, its intrinsic
         size never pushes the row — the natural floor is --mapa-box-min. The
         SVG keeps its ratio (preserveAspectRatio): whole and centered. */
  .page-home .pagina-2 .home-page2 > .section-counties .counties-inner {
    flex: 1 1 auto;
    grid-template-rows: auto 1fr;
    min-height: 0;
  }
  /* ES: TÍTULO DE CONDADOS — de 4 renglones a 2, apretando tamaño e
         interlineado. EL TEXTO NO SE TOCA (es del dueño). Solo desktop:
         la regla base de main.css:1820 gobierna móvil y queda intacta.
         Medido a 1366 (tarjeta 387.1px de ancho): 27px es el tamaño MÁS
         GRANDE que aún da 2 renglones; por encima salta a 3 y luego a 4.
         El clamp resuelve 26.6px a 1366 y topa en 27.2px de 1440 en
         adelante, donde la tarjeta es más ancha y sobra sitio.
     EN: Counties title — 4 lines to 2, tightening size and leading. TEXT
         UNTOUCHED. Desktop only; the base rule keeps mobile as-is. 27px
         measured as the largest size still yielding 2 lines at 1366. */
  .page-home .pagina-2 .home-page2 > .section-counties .counties-title {
    font-size: clamp(1.35rem, 1.95vw, 1.7rem);
    line-height: 1.15;
  }
  .page-home .pagina-2 .home-page2 > .section-counties .counties-map {
    position: relative;
    min-height: var(--mapa-box-min);
  }
  .page-home .pagina-2 .home-page2 > .section-counties .counties-map svg {
    position: absolute;
    inset: var(--mapa-margen);
    width: calc(100% - 2 * var(--mapa-margen));
    height: calc(100% - 2 * var(--mapa-margen));
    max-width: none;
  }

  /* ── Footer: se libera el forzado de altura (el flex del 100vh que YO añadí);
        su contenido y su look compacto NO cambian. ── */
  .page-home .pagina-2 .site-footer {
    padding: 0 var(--esp-24);            /* anula el padding-top de 72px del footer normal */
    display: flex;
    flex-direction: column;
  }
  .page-home .pagina-2 .footer-grid {
    padding: clamp(20px, 3vh, 40px) 0;
    gap: clamp(18px, 2.4vw, 44px);
  }
  /* Compactar el interior del footer para caber en el 29% sin cortar */
  .page-home .pagina-2 .footer-logo-wrap { margin-bottom: clamp(5px, 0.8vh, 12px); }
  .page-home .pagina-2 .footer-tagline {
    margin-bottom: clamp(5px, 0.8vh, 12px);
    font-size: .78rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 3;      /* la frase de marca no domina la altura del footer */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .page-home .pagina-2 .footer-heading { margin-bottom: clamp(3px, 0.5vh, 11px); }
  .page-home .pagina-2 .footer-links li { margin-bottom: clamp(2px, 0.4vh, 6px); }
  .page-home .pagina-2 .footer-contact { gap: clamp(4px, 0.6vh, 10px); }
  .page-home .pagina-2 .footer-licenses li { padding: clamp(3px, 0.5vh, 9px) 0; }
  /* ES: En el home el pie tiene que caber en UNA pantalla, por eso aquí los
         sellos se encogen. Se encoge la caja ENTERA —ancho y alto a la vez—
         para que sigan siendo todos iguales; antes se recortaba solo el alto y
         se soltaba el ancho, que es lo que los descuadraba.
     EN: On the home the footer must fit ONE screen, hence the shrink here. The
         WHOLE box shrinks — width and height together — so they stay equal;
         before, only the height was capped and the width set free, which is
         what knocked them out of line. */
  /* ES: En el home el pie tiene que caber en UNA pantalla, así que aquí los
         sellos bajan de altura. Se toca SOLO la altura, igual que arriba: el
         ancho sigue libre para que cada marca conserve su proporción y la fila
         siga leyéndose pareja. El tope de ancho baja en la misma medida.
     EN: On the home the footer must fit ONE screen, so the badges lose height
         here. Only the height is touched, as above: width stays free so every
         mark keeps its proportions and the row still reads even. */
  /* ES: en el home el pie cabe en UNA pantalla, así que baja la altura. El
         ancho sigue siendo el de la celda —no se toca— para que la rejilla de
         tres columnas siga alineada también aquí.
     EN: on the home the footer fits ONE screen, so height drops. Width stays
         the cell's, untouched, so the three-column grid stays aligned here too. */
  .page-home .pagina-2 .footer-badge { height: 40px; }
  .page-home .pagina-2 .social-link { width: 44px; height: 44px; }  /* táctil 44 */
  /* ES: AIRE para la barra de copyright/términos — recibe los 16px del recorte
         de las tarjetas como espacio interno (+8 arriba, +8 abajo) y más
         separación entre el copyright, los enlaces legales y la nota del
         brokerage. Misma estructura, mismo contenido: solo respira.
     EN: BREATHING ROOM for the copyright/terms bar — it receives the 16px
         trimmed from the cards as inner space (+8 top, +8 bottom) plus more
         separation between its items. Same structure and content. */
  .page-home .pagina-2 .footer-bottom {
    /* ES: D2 — Era 20 arriba / 8 abajo y el copyright quedaba a 12 px del fin
           del documento: se leía pegado al borde. Pasa a 20/20.
           ESTA es la regla que manda en el home: su selector de tres clases
           gana por especificidad a la regla global de áreas seguras de más
           abajo, así que tocar solo aquella no cambiaba nada aquí.
       EN: D2 — was 20 top / 8 bottom, leaving the copyright 12 px from the end
           of the document. Now 20/20. This three-class selector is the one that
           wins on the home page; editing only the global safe-area rule below
           had no effect here. */
    padding: var(--esp-20) 0;
    gap: var(--esp-16);
    align-items: center;
  }
}

/* Móvil: el reparto estricto de 100vh NO aplica — la página 2 fluye con
   scroll natural, columnas apiladas, footer y copyright completos. */
@media (max-width: 767px) {
  .pagina-2 { height: auto; padding-top: 0; overflow: visible; display: block; }
}

/* Nota de privacidad bajo formularios de captura (señal de confianza) */
.form-privacy-note {
  font-size: .76rem;
  line-height: 1.5;
  color: #6B7787;
  margin: var(--esp-12) 0 0;
  max-width: 46ch;
}
.form-privacy-note a { color: var(--coral, #FF6B4A); }

/* ══════════════════════════════════════════════════════════════
   ES: EL FORMULARIO DE LEAD (views/partials/form-lead.ejs)
       Todo lo que empieza por .fl- es del formulario único. Se apoya en las
       clases de formulario que ya existían (.insp-form, .form-group,
       .btn-form-submit) para no cambiar el aspecto de nada: lo nuevo aquí es
       solo lo que antes no existía o vivía en un style="" suelto.
   EN: THE lead form. Everything prefixed .fl- belongs to the single form. It
       leans on the existing form classes so nothing changes visually; what is
       new here is only what did not exist before or lived in a loose style="".
   ══════════════════════════════════════════════════════════════ */

/* ES: MAQUETACIÓN DE LA SECCIÓN — y por qué está AQUÍ y no en un módulo.
       La sección de formulario usaba .insp-form-layout / .form-col-main /
       .form-col-contact, que solo existen en inspecciones.css. Esa hoja la
       cargan las páginas de inspecciones y NADIE MÁS. Mientras el formulario
       vivía copiado dentro de cada módulo eso no se notaba: cada copia traía su
       propia maquetación. En cuanto el formulario es UNO y viaja a /contacto,
       /multimedia, /administracion y /bienes-raices, se lleva unas clases que
       en esas páginas no significan nada, y la sección se cae a una columna sin
       rejilla ni separación.
       Un componente único necesita su maquetación en la hoja única. Estas
       reglas son las mismas de inspecciones.css, con nombres .fl-. En las
       páginas de inspecciones, inspecciones.css se carga DESPUÉS que main.css,
       así que sus reglas siguen mandando y esas páginas no cambian ni un píxel.
   EN: SECTION LAYOUT — and why it lives HERE, not in a module. The form section
       used classes that only exist in inspecciones.css, a sheet loaded by the
       inspections pages and NOBODY ELSE. That went unnoticed while the form was
       copy-pasted into each module (each copy carried its own layout). The
       moment the form is ONE and travels to /contacto, /multimedia,
       /administracion and /bienes-raices, it carries classes that mean nothing
       there and the section collapses. A single component needs its layout in
       the single sheet. These are the same rules under .fl- names; on
       inspections pages inspecciones.css loads AFTER main.css and still wins,
       so those pages do not shift by a pixel. */
.fl-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: var(--esp-64, 64px);
  align-items: start;
}
.fl-col-main    { display: flex; flex-direction: column; }
.fl-col-contact { padding-top: var(--esp-8, 8px); }

@media (max-width: 1023px) {
  .fl-layout { grid-template-columns: 1fr; gap: var(--esp-40, 40px); }
}

/* ES: Honeypot — fuera de la pantalla, no display:none. Algunos bots saltan
       lo que está en display:none; el que se lo cree, cae.
   EN: Honeypot — moved off-screen rather than display:none, which some bots
       skip on purpose. */
.fl-hp {
  position: absolute;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* ES: Aviso bajo un campo (teléfono, ZIP). Reserva su alto SIEMPRE para que la
       página no dé un salto el momento en que aparece el texto.
   EN: Per-field hint. Height is always reserved so the page never jumps when
       the text appears. */
.fl-hint {
  font-size: .72rem;
  line-height: 1.35;
  margin-top: 3px;
  min-height: 16px;
  color: #8A94A6;
}
.fl-hint.is-ok    { color: #16A34A; }
.fl-hint.is-error { color: #DC2626; }

.fl-zip-wrap { position: relative; }
.fl-zip-wrap input { padding-right: 28px; }
.fl-zip-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .9rem;
  pointer-events: none;
}

/* ES: El texto de consentimiento que se guarda por versión. Va más pequeño y
       más apagado que la nota de privacidad: es letra legal, no un argumento
       de venta, y no debe competir con el botón.
   EN: The versioned consent text. Smaller and quieter than the privacy note:
       it is legal copy, not a selling point, and must not fight the button. */
.fl-consent-texto {
  display: block;
  margin-top: 4px;
  font-size: .7rem;
  line-height: 1.45;
  color: #8A94A6;
}

/* ES: Casilla de miembro. Hoy no se dibuja (el flag del config está apagado),
       pero su estilo entra ya para que encenderla sea de verdad UNA línea y
       no "una línea y además maquetar la casilla".
   EN: Member checkbox. Not rendered today (config flag off), but its styling
       ships now so switching it on is genuinely a one-line change. */
.fl-check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: var(--esp-12) 0 0;
  font-size: .82rem;
  line-height: 1.45;
  color: #4A5568;
  cursor: pointer;
}
.fl-check input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex: 0 0 auto;
  accent-color: var(--coral, #FF6B4A);
}

/* ES: Variante 'tarjeta' — el formulario metido en una columna estrecha
       (barra lateral de un artículo, cuadro de una herramienta).
   EN: 'card' variant — the form inside a narrow column. */
.fl-card {
  background: #fff;
  border: 1px solid rgba(11,31,51,.08);
  border-radius: 14px;
  padding: var(--esp-24, 24px);
  box-shadow: 0 2px 14px rgba(11,31,51,.05);
}
.fl-card-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy, #0B1F33);
  margin: 0 0 6px;
}
.fl-card-sub {
  font-size: .84rem;
  line-height: 1.5;
  color: #5A6475;
  margin: 0 0 var(--esp-16, 16px);
}

/* ES: El botón en marcha. .is-loading la pone y la quita form-lead.js; sin
       esta regla el texto "Enviando…" se vería siempre encima del otro.
   EN: Button while submitting. form-lead.js toggles .is-loading; without this
       rule the "Enviando…" label would always sit on top of the other. */
.fl-form .btn-loading { display: none; }
.fl-form .btn-form-submit.is-loading .btn-text    { display: none; }
.fl-form .btn-form-submit.is-loading .btn-loading { display: inline; }
.fl-form .btn-form-submit[disabled] { opacity: .65; cursor: progress; }

/* IDX Attribution bar */
.footer-idx {
  border-top: 1px solid rgba(255,255,255,.08);
  padding: var(--esp-20) 0;
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  align-items: flex-start;
  gap: var(--esp-16);
}
.footer-idx-text {
  font-size: .72rem;
  line-height: 1.6;
  color: rgba(255,255,255,.35);
  margin: 0;
  flex: 1;
}
.footer-idx-text strong { color: rgba(255,255,255,.5); font-weight: 600; }
.footer-idx-equal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--esp-4);
  font-size: .65rem;
  color: rgba(255,255,255,.3);
  white-space: nowrap;
  flex-shrink: 0;
  margin: 0;
}
.footer-idx-equal svg { width: 28px; height: 28px; opacity: .5; }

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--esp-32); }
  .footer-bottom { flex-direction: column; text-align: center; }
}

/* ── WHATSAPP FLOTANTE ─────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
   ES: CORRECCIONES GLOBALES DE RESPONSIVE
   EN: GLOBAL RESPONSIVE FIXES
   ══════════════════════════════════════════════════════════ */

/* ES: iOS hace zoom automático si el input tiene font-size < 16px — lo prevenimos */
/* EN: iOS auto-zooms when input font-size < 16px — we prevent that */
input, select, textarea, button {
  font-size: max(1rem, 16px);
}

/* ES: Imágenes nunca se salen de su contenedor */
/* EN: Images never overflow their container */
img, video, iframe, svg { max-width: 100%; height: auto; }

/* ES: Celdas de tabla con scroll horizontal si el contenido es ancho */
/* EN: Table cells with horizontal scroll if content is wide */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ── PÁGINAS INTERNAS ──────────────────────────────────────── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  background: transparent;
  color: var(--navy);
  font-family: 'Archivo', sans-serif;
  font-weight: 700;
  font-size: .875rem;
  padding: var(--esp-12) var(--esp-24);
  border-radius: 50px;
  border: 2px solid var(--navy);
  transition: background var(--trans), color var(--trans);
}
.btn-secondary:hover { background: var(--navy); color: var(--white); }

.insp-page {
  padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  min-height: 100svh;
}
.insp-header { margin-bottom: 2.5rem; }
.insp-title {
  font-family: 'Archivo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  color: var(--navy);
  margin-bottom: 1.5rem;
}
.insp-badges-block { margin-top: 1rem; }
.insp-certified-label {
  font-size: .78rem; font-weight: 600;
  color: var(--gray); letter-spacing: .06em;
  text-transform: uppercase; display: block; margin-bottom: 1rem;
}
.insp-badges { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.insp-badge {
  height: 80px; width: auto;
  max-width: 120px;
  object-fit: contain;
  align-self: center;
}

.insp-badge[alt*="SUNACHI"] {
  height: 52px;
  max-width: 140px;
}

.stub-page {
  padding: calc(var(--nav-h) + 4rem) 1.5rem 5rem;
  min-height: 100svh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.stub-title {
  font-family: 'Archivo', sans-serif;
  font-weight: 800;
  font-size: clamp(1.5rem, 3vw, 2.25rem);
  color: var(--navy);
  margin-bottom: 1rem;
}
.stub-msg { font-size: 1rem; color: var(--gray); margin-bottom: 2rem; }

/* ── SKIP LINK ─────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -9999px; left: 50%;
  transform: translateX(-50%);
  padding: 15px var(--esp-20);                 /* táctil mínimo 44 de alto */
  background: var(--navy);
  color: #fff;
  border-radius: 0 0 8px 8px;
  font: 600 .9rem/1 var(--font-head, Archivo, sans-serif);
  text-decoration: none;
  z-index: 10000;
  white-space: nowrap;
}
.skip-link:focus { top: 0; }

/* ── FOCUS VISIBLE ─────────────────────────────────────────── */
:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

/* ── Portal: botón "Hola, [nombre]" en el nav ──────────────── */
.nav-portal {
  position: relative;
  margin-left: var(--esp-6);
  flex-shrink: 0;
}
.nav-portal-btn {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 var(--esp-12);
  background: rgba(255,107,74,.12);
  color: var(--coral);
  border: 1.5px solid rgba(255,107,74,.3);
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--trans), border-color var(--trans);
}
.nav-portal-btn:hover { background: rgba(255,107,74,.2); border-color: var(--coral); }
.nav-portal-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  border-radius: var(--radio-12);
  box-shadow: 0 8px 32px rgba(11,31,51,.14);
  min-width: 180px;
  padding: var(--esp-8) 0;
  z-index: 200;
}
.npm-link {
  display: block;
  padding: var(--esp-8) var(--esp-16);
  font-size: .84rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  transition: background .12s;
}
.npm-link:hover { background: var(--cream); }
.npm-logout {
  display: block;
  width: 100%;
  text-align: left;
  padding: var(--esp-8) var(--esp-16);
  font-size: .84rem;
  font-weight: 600;
  color: var(--gray);
  background: none;
  border: none;
  cursor: pointer;
  border-top: 1px solid #EDEBE6;
  margin-top: var(--esp-4);
  transition: color .12s;
}
.npm-logout:hover { color: #EF4444; }

/* ES: Tanda 2b (ronda 2) — táctil mínimo 44: campos del registro y chips de
   condados. El honeypot (.portal-hp) y el checkbox envuelto en <label>
   (.portal-consent, el label ES el área táctil) quedan exentos.
   EN: 44px min targets; honeypot + label-wrapped checkbox are exempt. */
.portal-input { min-height: 44px; box-sizing: border-box; }
.county-chip { min-height: 44px; box-sizing: border-box; display: inline-flex; align-items: center; }

/* ═══ TANDA 2c — PISO de 14px en móvil (regla 2.3, no negociable) ═══
   ES: ningún texto secundario baja de 14px en móvil. Este bloque impone el
       piso a los infractores sistémicos detectados en la auditoría (footer
       completo, botón del nav). EXCLUIDO por ahora: los rótulos de la caja
       de mercado — su piso de 14px choca con las 3 zonas de altura reservada
       recién ordenadas (los textos re-envuelven a 3 líneas en el cuadro móvil
       de 148px); PENDIENTE de decisión del arquitecto.
   EN: 14px mobile floor for systemic offenders; market-box captions excluded
       pending an architect decision (conflicts with the 3-zone reserve). */
@media (max-width: 767px) {
  .nav-cta { font-size: 14px; }
  .footer-brand-name { font-size: 14px; }
  .footer-brand-sub { font-size: 14px; letter-spacing: .08em; }  /* tracking bajado para que quepa */
  .footer-tagline { font-size: 14px; }
  .footer-heading { font-size: 14px; }
  .footer-links a, .footer-links li { font-size: 14px; }
  .footer-contact, .footer-contact a, .footer-contact li { font-size: 14px; }
  .footer-licenses li { font-size: 14px; }
  .footer-bottom p { font-size: 14px; }
  /* hero (fluye en móvil, sin ancla) */
  .hero-eyebrow { font-size: 14px; }
  .hero-group-text { font-size: 14px; letter-spacing: .18em; }
  /* servicios */
  .svc-app-label { font-size: 14px; }
  .svc-app-micro { font-size: 14px; }
  /* portal (columna apilada, sin ancla en móvil) */
  .portal-sub { font-size: 14px; }
  .portal-intro-l2 { font-size: 14px; }
  .portal-porques li { font-size: 14px; }
  .portal-label { font-size: 14px; text-transform: none; letter-spacing: .02em; }
  .portal-cta-sub { font-size: 14px; }
  .portal-beneficios li { font-size: 14px; }
  .portal-consent { font-size: 14px; }
  /* mercado: rótulos al piso de 14px con la reserva de texto RE-TUNEADA en
     móvil (decisión del arquitecto): --mz-texto crece para alojar 2 líneas de
     14px; si un texto aún pide 3 líneas se reporta (el recorte es del dueño). */
  .mercado-titulo { font-size: 14px; }
  .mercado-pie { font-size: 14px; }
  .mercado-etiqueta { font-size: 14px; }
  .mercado-sub { font-size: 14px; }
  .mercado-cuadro {
    --mz-texto: 40px;
    --mz-valor: 2rem;
    /* ES: INTERINO reportado — "Días en el mercado" + "Hasta aceptar oferta"
           piden 4 líneas a 14px (recorte pendiente del dueño). La zona de
           texto pasa a MÍNIMO en móvil (minmax) para no romperse visualmente;
           la rejilla externa sigue igualando las alturas por fila (regla dura
           intacta). Al recortar el dueño, vuelve a cerrar en 2 líneas.
       EN: INTERIM — one box needs 4 lines at 14px (owner to trim). Text zone
           becomes a MINIMUM on mobile; the outer grid still equalizes rows. */
    grid-template-rows: var(--mz-icono) var(--mz-valor) minmax(var(--mz-texto), auto);
  }
  /* condados del home */
  .county-chip { font-size: 14px; }
}

/* ═══ TANDA 2g(i) — áreas seguras iOS + foco visible global ═══
   ES: con viewport-fit=cover, el contenido puede meterse bajo la muesca o la
       barra inferior del iPhone; estos rellenos lo impiden en las superficies
       fijas (navbar) y en los cierres de página (footer/copyright).
   EN: safe-area padding for the fixed navbar and page-end surfaces. */
.site-header { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); padding-top: env(safe-area-inset-top); }
/* ES: D2 — Esta regla pisaba el padding simétrico de .footer-bottom (20/20, más
       arriba) y lo dejaba en 20 arriba / 8 abajo: el copyright quedaba a 12 px
       del fin del documento y se leía pegado al borde. Sube a 20 para que la
       barra respire igual por los dos lados. El env(safe-area-inset-bottom) se
       CONSERVA: es lo que evita que el copyright se meta bajo la barra inferior
       del iPhone, y quitarlo reabriría ese defecto.
   EN: D2 — this rule overrode the symmetric 20/20 padding with 20/8, leaving the
       copyright 12 px from the document end. Now 20 both sides. The iOS
       safe-area inset is KEPT: removing it would tuck the line under the home
       indicator. */
.footer-bottom { padding-bottom: calc(var(--esp-20) + env(safe-area-inset-bottom)); }
/* ES: FOCO VISIBLE por teclado en TODO control interactivo (G6/2.9) — anillo
       coral de 2px; no depende del estilo de cada componente.
   EN: global keyboard focus ring on every interactive control. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, summary:focus-visible,
[role="button"]:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 2px;
  border-radius: var(--radio-4);
}

/* ═══ TANDA 2g(iii) — contenido ancho con scroll INTERNO + guardas de imagen ═══
   ES: toda tabla de contenido (recibos de calculadoras, comparativas DPA,
       resultados) se desplaza DENTRO de su caja en móvil — jamás desborda la
       página. Las imágenes nunca exceden su contenedor ni se deforman.
   EN: content tables scroll inside their box; images never overflow. */
.herr-scope table, article table, .art-cuerpo table, .co-main table, .legal-wrap table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
img { max-width: 100%; height: auto; }
/* ES: los héroes/covers con object-fit conservan su recorte (cover ya no
       deforma); height:auto arriba no los toca porque tienen height explícita.
   EN: object-fit covers keep their crop. */

/* ══════════════════════════════════════════════════════════════
   ES: LA PIEZA DE ACCESO (.ac-) y EL CUADRO DESLIZANTE (.ca-)
       La pieza es la misma en los tres sitios; lo único que cambia es la caja
       que la envuelve. Por eso sus estilos son neutros —heredan el color del
       contenedor— y la variante .ac--panel es la que la adapta al fondo navy
       del cuadro. Un solo juego de reglas, tres apariencias.
   EN: THE access piece (.ac-) and THE slide-over (.ca-). The piece is identical
       in all three places; only its container changes, so its styles are
       neutral and .ac--panel adapts it to the slide-over's navy. One rule set,
       three appearances.
   ══════════════════════════════════════════════════════════════ */

.ac-titulo {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px; font-weight: 700; line-height: 1.25;
  color: var(--navy, #0B1F33); margin: 0 0 8px;
}
.ac-sub { font-size: 14px; color: #5C6B7C; line-height: 1.6; margin: 0 0 20px; }

.ac-campo { margin-bottom: 14px; }
.ac-label {
  display: block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #6B7787; margin-bottom: 6px;
}
/* ES: etiqueta que existe para el lector de pantalla pero no se dibuja: el
       campo de reintento ya está explicado por el texto de encima.
   EN: label present for screen readers but not drawn — the retry field is
       already explained by the text above it. */
.ac-label--oculta {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ac-opcional { font-weight: 500; text-transform: none; letter-spacing: 0; color: #9CA3AF; }

.ac-input {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid #E7E1D6; border-radius: 12px;
  padding: 12px 14px; font: inherit; font-size: 15px;
  color: var(--navy, #0B1F33); background: #fff; transition: border-color .15s;
}
.ac-input:focus { outline: 0; border-color: var(--coral, #FF6B4A); }

.ac-consent {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 4px 0 16px; font-size: 13px; line-height: 1.55; color: #4A5568; cursor: pointer;
}
.ac-consent input { width: 18px; height: 18px; margin-top: 1px; flex: 0 0 auto; accent-color: var(--coral, #FF6B4A); }

.ac-error {
  background: #FFF0EE; border: 1px solid #F5A89A; border-radius: 10px;
  padding: 10px 12px; font-size: 13px; color: #B83A2E; line-height: 1.5; margin-bottom: 12px;
}

.ac-btn {
  display: inline-block; width: 100%; box-sizing: border-box; text-align: center;
  border: 0; border-radius: 10px;
  background: var(--coral, #FF6B4A); color: var(--coral-boton-texto, #10233A);
  padding: 13px 22px; font: inherit; font-size: 15px; font-weight: 700;
  cursor: pointer; text-decoration: none; transition: opacity .15s;
}
.ac-btn:hover:not(:disabled) { opacity: .88; }
.ac-btn:disabled { opacity: .45; cursor: not-allowed; }
.ac-btn--sec { background: transparent; color: var(--coral, #FF6B4A); border: 1.5px solid var(--coral, #FF6B4A); }
.ac-btn--invita { background: var(--navy, #0B1F33); color: #fff; }

/* ── Estado: revise su bandeja ── */
.ac-ok { text-align: center; }
.ac-icono { width: 54px; height: 54px; margin: 0 auto 14px; color: var(--coral, #FF6B4A); }
.ac-icono svg { width: 100%; height: 100%; }
.ac-ok-h { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: var(--navy, #0B1F33); margin: 0 0 8px; }
.ac-ok-p { font-size: 14px; color: #5C6B7C; line-height: 1.6; margin: 0; }
.ac-reenviar {
  margin-top: 16px; background: none; border: 0; font: inherit; font-size: 13px;
  font-weight: 700; color: var(--coral, #FF6B4A); cursor: pointer; text-decoration: underline;
}

/* ── Estado: ese correo no está registrado ──
   ES: La invitación va separada por una línea y con aire: se lee como OTRA
       oferta, no como el castigo por haberse equivocado escribiendo.
   EN: The invitation is set apart by a hairline and space, so it reads as a
       different offer rather than as a punishment for a typo. */
.ac-nuevo-h { font-family: 'Fraunces', Georgia, serif; font-size: 19px; color: var(--navy, #0B1F33); margin: 0 0 8px; }
.ac-nuevo-p { font-size: 14px; color: #5C6B7C; line-height: 1.6; margin: 0 0 14px; }
.ac-reintento { margin-bottom: 26px; }
.ac-invita { border-top: 1px solid #E7E1D6; padding-top: 22px; }
.ac-invita-h { font-size: 15px; font-weight: 700; color: var(--navy, #0B1F33); margin: 0 0 6px; }
.ac-invita-p { font-size: 13.5px; color: #5C6B7C; line-height: 1.6; margin: 0 0 14px; }

/* ── Variantes sobre navy: el cuadro del navbar y el bloque del home ──
   ES: Las dos usan .ac--navy, que reproduce EXACTAMENTE los valores que tenían
       .portal-input y .portal-label en el home. Por eso el home no cambia de
       aspecto al pasar al parcial: no se ha rediseñado nada, se ha mudado.
   EN: Both use .ac--navy, reproducing the EXACT values .portal-input and
       .portal-label had on the home — which is why the home does not change
       appearance: nothing was redesigned, it moved house. */
.ac--navy .ac-titulo,
.ac--navy .ac-ok-h,
.ac--navy .ac-nuevo-h,
.ac--navy .ac-invita-h { color: #fff; }
.ac--navy .ac-sub,
.ac--navy .ac-ok-p,
.ac--navy .ac-nuevo-p,
.ac--navy .ac-invita-p { color: rgba(255,255,255,.66); }
.ac--navy .ac-label   { color: rgba(255,255,255,.6); }
.ac--navy .ac-opcional{ color: rgba(255,255,255,.38); }
.ac--navy .ac-input {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.26); color: #fff;
}
.ac--navy .ac-input::placeholder { color: rgba(255,255,255,.42); }
.ac--navy .ac-consent { color: rgba(255,255,255,.72); }
.ac--navy .ac-invita  { border-top-color: rgba(255,255,255,.14); }
.ac--navy .ac-btn--invita { background: #fff; color: var(--navy, #0B1F33); }
.ac--navy .ac-btn--sec    { color: #fff; border-color: rgba(255,255,255,.4); }

/* ── El cuadro deslizante ── */
.ca { position: fixed; inset: 0; z-index: 1200; }
.ca-fondo {
  position: absolute; inset: 0; background: rgba(11,31,51,.55);
  opacity: 0; transition: opacity .22s ease;
}
.ca.is-abierto .ca-fondo { opacity: 1; }
.ca-panel {
  position: absolute; top: 0; right: 0; height: 100%;
  width: 100%; max-width: 400px; box-sizing: border-box;
  background: var(--navy, #0B1F33);
  padding: 68px 30px 30px;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s ease;
  box-shadow: -8px 0 40px rgba(0,0,0,.25);
}
.ca.is-abierto .ca-panel { transform: translateX(0); }
/* ES: quien haya pedido menos animación no ve el deslizamiento, solo el cambio.
   EN: anyone who asked for less motion gets the change without the slide. */
@media (prefers-reduced-motion: reduce) {
  .ca-fondo, .ca-panel { transition: none; }
}
.ca-cerrar {
  position: absolute; top: 18px; right: 18px; width: 38px; height: 38px;
  background: rgba(255,255,255,.08); border: 0; border-radius: 10px;
  color: #fff; cursor: pointer; padding: 9px;
}
.ca-cerrar:hover { background: rgba(255,255,255,.16); }
.ca-cerrar svg { width: 100%; height: 100%; }
.ca-marca { display: flex; align-items: center; gap: 9px; margin-bottom: 26px; }
.ca-siglas {
  background: var(--coral, #FF6B4A); color: var(--coral-boton-texto, #10233A);
  font-size: 13px; font-weight: 900; letter-spacing: .06em;
  padding: 5px 10px; border-radius: 5px;
}
.ca-marca-txt { color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .05em; }

@media (max-width: 480px) {
  .ca-panel { max-width: 100%; padding: 64px 22px 26px; }
}

/* ES: Lo propio del bloque del home: sin título ni subtítulo (los pone la
       sección que lo rodea) y la nota pequeña bajo el botón.
   EN: Home-block specifics: no title or subtitle (its section provides them)
       and the small note under the button. */
/* ES: LO QUE HACE QUE EL HOME NO CAMBIE. La tarjeta del registro centra su
       contenido (.portal-inner), y el formulario viejo lo desandaba con
       text-align:left. La pieza tiene que hacer lo mismo o las etiquetas se
       van al medio — que es justo lo que enseñó la primera captura.
       Y el botón toma los valores exactos de .btn-portal-cta, incluido su gris
       apagado cuando está deshabilitado: con el coral a media opacidad se veía
       rojizo y no era el mismo botón.
   EN: WHAT KEEPS THE HOME UNCHANGED. The signup card centres its content and
       the old form undid that with text-align:left; the piece must do the same
       or the labels drift to the middle — exactly what the first screenshot
       showed. The button takes .btn-portal-cta's exact values, including its
       muted disabled grey: coral at half opacity read as reddish and was not
       the same button. */
.ac--home .ac-form  { text-align: left; gap: var(--esp-10); }
.ac--home .ac-campo { margin-bottom: var(--esp-10); }
.ac--home .ac-btn {
  font-family: 'Archivo', sans-serif;
  font-size: .88rem;
  letter-spacing: .04em;
  padding: var(--esp-12) var(--esp-24);
  border-radius: var(--radio-10);
  margin-top: var(--esp-2);
}
.ac--home .ac-btn:hover:not(:disabled) { background: #e85a3a; opacity: 1; transform: translateY(-1px); }
.ac--home .ac-btn:disabled {
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.45);
  opacity: 1;
  transform: none;
}
.ac--home .ac-nota {
  margin: 10px 0 0; font-size: 12.5px; line-height: 1.5;
  color: rgba(255,255,255,.45); text-align: center;
}
.ac--navy .ac-error {
  background: rgba(184,58,46,.18); border-color: rgba(245,168,154,.5); color: #FFC9C0;
}

/* ES: LA CASILLA DE MIEMBRO en los formularios (M4). Va en su propia caja y
       separada del resto para que no se lea como un campo más: es una decisión
       aparte, opcional, y tiene que verse como tal.
       El título en negrita dice QUÉ es en tres palabras; la letra debajo dice
       exactamente a qué se está diciendo que sí. Y el desplegable de ventajas
       usa <details>, que abre y cierra sin una línea de JavaScript — si el JS
       fallara, sigue funcionando.
   EN: THE MEMBER CHECKBOX on the lead forms (M4). Its own box, set apart so it
       does not read as just another field: it is a separate, optional decision
       and must look like one. The bold title says WHAT it is in three words;
       the wording below says exactly what is being agreed to. The benefits
       disclosure uses <details>, which opens without a line of JavaScript. */
.fl-miembro {
  margin: var(--esp-16, 16px) 0 0;
  padding: 14px 16px;
  background: rgba(255, 107, 74, .06);
  border: 1px solid rgba(255, 107, 74, .28);
  border-radius: 12px;
}
.fl-miembro .fl-check { margin: 0; align-items: flex-start; }
.fl-miembro-titulo {
  display: block; font-size: .9rem; font-weight: 700;
  color: var(--navy, #0B1F33); margin-bottom: 3px;
}
.fl-miembro-letra {
  display: block; font-size: .78rem; line-height: 1.5; color: #6B7787;
}
.fl-ventajas { margin-top: 10px; }
.fl-ventajas summary {
  display: inline-flex; align-items: center; gap: 7px;
  cursor: pointer; list-style: none;
  font-size: .78rem; font-weight: 700; color: var(--coral, #FF6B4A);
}
.fl-ventajas summary::-webkit-details-marker { display: none; }
.fl-ventajas-simbolo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%;
  background: var(--coral, #FF6B4A); color: var(--coral-boton-texto, #10233A);
  font-size: 11px; font-weight: 900; line-height: 1;
}
.fl-ventajas-lista {
  margin: 10px 0 0; padding: 0 0 0 4px; list-style: none;
  font-size: .78rem; line-height: 1.7; color: #5A6475;
}
.fl-ventajas-lista li { margin-bottom: 3px; }


/* ══════════════════════════════════════════════════════════════
   ES: LOS CAMPOS DEL FORMULARIO DE LEAD — y por qué están AQUÍ.

       HERENCIA DEL CARRIL DE FORMULARIOS, arreglada aquí. Cuando los doce
       formularios se unificaron en un parcial, la MAQUETACIÓN de la sección se
       mudó a esta hoja (.fl-layout) pero los ESTILOS DE CAMPO se quedaron donde
       siempre habían estado: dentro de inspecciones.css, multimedia.css y
       bienes-raices.css. Mientras cada módulo tenía su copia del formulario eso
       no se notaba — cada copia vivía en la página que cargaba su hoja.

       En cuanto el formulario fue UNO y viajó a páginas sin hoja de módulo, sus
       campos se quedaron sin estilo: botón gris del navegador, bordes inset,
       textarea en monoespaciada. Afectaba a /contacto, /administracion, los
       siete /condados/:slug y /herramientas/guia-hipotecas — diez URLs de
       captación, la página de contacto incluida. Y llegó a producción.

       CÓMO SE ME PASÓ: aquella tanda se verificó con jsdom, que ejecuta el
       JavaScript de verdad pero NO DIBUJA. Todas las pruebas funcionales
       pasaron —los leads entraban con su servicio y su origen— y ninguna podía
       ver que el formulario estaba desnudo. La evidencia funcional y la visual
       no se sustituyen; hacen falta las dos.

       POR QUÉ SE COPIA Y NO SE MUEVE: inspecciones.css se carga DESPUÉS que
       esta hoja, así que en las páginas de inspecciones siguen mandando sus
       reglas, idénticas a estas. Esas páginas no se mueven ni un píxel; las
       demás dejan de estar desnudas. Es el mismo patrón que .fl-layout.

   EN: THE LEAD FORM FIELDS — and why they live HERE.
       INHERITED FROM THE FORMS LANE, fixed here. When the twelve forms were
       unified, the section LAYOUT moved to this sheet but the FIELD styles
       stayed inside the module sheets. That went unnoticed while each module
       had its own copy of the form. The moment the form was ONE and travelled
       to pages without a module sheet, its fields lost all styling — browser
       grey button, inset borders, monospace textarea — on /contacto,
       /administracion, the seven county pages and the mortgage guide. Ten
       lead-capture URLs, and it reached production.
       HOW IT WAS MISSED: that lane was verified with jsdom, which really runs
       the JavaScript but DOES NOT PAINT. Every functional test passed and none
       could see the form was naked. Functional and visual evidence do not
       substitute for one another.
       WHY COPIED, NOT MOVED: inspecciones.css loads AFTER this sheet, so its
       identical rules still win there and those pages do not shift a pixel.
       Same pattern as .fl-layout.
   ══════════════════════════════════════════════════════════════ */

.insp-form {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--esp-32) var(--esp-32);
  display: flex;
  flex-direction: column;
  gap: var(--esp-20);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-16); }

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--esp-6);
}

.form-group label {
  font-family: 'Inter', sans-serif;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: .02em;
}
.req { color: var(--coral); margin-left: var(--esp-2); }

.form-group input,
.form-group select,
.form-group textarea {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  color: var(--navy);
  background: var(--cream);
  border: 1.5px solid rgba(11,31,51,.12);
  border-radius: var(--radio-10);
  padding: var(--esp-12) var(--esp-12);
  outline: none;
  transition: border-color .2s, box-shadow .2s;
  width: 100%;
  box-sizing: border-box;
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray); }
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px rgba(255,107,74,.15);
}
.form-group textarea { resize: vertical; }

.form-error-msg {
  background: #fff0ee;
  border: 1px solid rgba(255,107,74,.4);
  border-radius: var(--radio-10);
  padding: var(--esp-12) var(--esp-16);
  font-family: 'Inter', sans-serif;
  font-size: .875rem;
  color: #c0392b;
}

.btn-form-submit {
  background: var(--coral);
  color: var(--white);
  font-family: 'Archivo', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  padding: var(--esp-16) var(--esp-32);
  border: none;
  border-radius: 100px;
  cursor: pointer;
  transition: background .2s, transform .2s;
  position: relative;
  overflow: hidden;
}
.btn-form-submit:hover { background: #e85d3e; transform: translateY(-1px); }
.btn-form-submit:disabled { opacity: .7; cursor: not-allowed; transform: none; }

.btn-form-submit .btn-loading { display: none; }
.btn-form-submit.is-loading .btn-text { display: none; }
.btn-form-submit.is-loading .btn-loading { display: inline; }

.form-success {
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--esp-48) var(--esp-32);
  text-align: center;
}
.success-icon {
  width: 64px; height: 64px;
  background: rgba(46,213,115,.12);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto var(--esp-24);
  color: #2ed573;
}
.success-icon svg { width: 40px; height: 40px; }
.form-success h3 {
  font-family: 'Archivo', sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 var(--esp-12);
}
.form-success p {
  font-family: 'Inter', sans-serif;
  font-size: .9375rem;
  color: var(--gray);
  line-height: 1.6;
  margin: 0 0 var(--esp-8);
}
.success-contact a { color: var(--coral); font-weight: 600; }

/* ES: alto táctil mínimo de 44 px en los controles. */
.insp-form input:not([type=hidden]), .insp-form select, .insp-form textarea { min-height: 44px; box-sizing: border-box; }

/* ES: EL ATRIBUTO hidden TIENE QUE GANAR AQUÍ.
       El navegador aplica [hidden]{display:none} con la menor prioridad que
       existe, así que CUALQUIER regla propia que fije un display se lo come.
       .nav-acceder es display:inline-flex y .nav-portal es display:block, de
       modo que ponerles hidden desde el JavaScript no los ocultaba: el navbar
       enseñaba a la vez "Hola, Daniel" y "Acceder", como si la persona
       estuviera dentro y fuera al mismo tiempo. Lo cazó una captura.
       Estas dos reglas le devuelven a hidden el poder de ocultar, solo en los
       dos elementos donde el JavaScript lo usa.
   EN: THE hidden ATTRIBUTE MUST WIN HERE. Browsers apply [hidden]{display:none}
       at the lowest possible priority, so any authored display rule beats it.
       .nav-acceder is inline-flex and .nav-portal is block, so setting hidden
       from JavaScript did not hide them: the navbar showed "Hola, Daniel" and
       "Acceder" at once, as if the person were signed in and out simultaneously.
       A screenshot caught it. These two rules give hidden its power back, only
       on the two elements where the JavaScript uses it. */
.nav-acceder[hidden],
.nav-portal[hidden] { display: none !important; }
/* ═══════════════════════════════════════════════════════════════
   ES: EL OFRECIMIENTO DEL ASISTENTE — la línea del pie de las
       herramientas y las páginas de servicio que abre el chat.
       Vive aquí, en la hoja de siempre, y no en chat.css, porque
       chat.css solo se descarga cuando alguien toca la burbuja: si
       estos estilos vivieran allí, el ofrecimiento se vería roto
       justo hasta el momento en que ya no hace falta.
       En papel no sale: un botón impreso es tinta que no hace nada.
   EN: THE ASSISTANT OFFER — the footer line on tools and service
       pages that opens the chat. It lives in the always-loaded
       sheet and not in chat.css, which is only fetched when the
       bubble is tapped: living there, the offer would look broken
       exactly until it stopped being needed. Never printed.
   ═══════════════════════════════════════════════════════════════ */
.spgc-oferta {
  display: flex; align-items: center; justify-content: center;
  flex-wrap: wrap; gap: 10px 14px;
  margin: 24px auto 0; padding: 16px 20px; max-width: 620px;
  background: rgba(11, 31, 51, .04);
  border-radius: var(--radius, 16px);
}
.spgc-oferta-txt {
  margin: 0;
  font: 600 .92rem/1.4 var(--font-body, Inter, sans-serif);
  color: var(--navy, #0B1F33);
}
.spgc-oferta-btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: none; border-radius: 100px; cursor: pointer;
  padding: 10px 18px;
  background: var(--coral, #FF6B4A); color: var(--coral-boton-texto, #fff);
  font: 700 .86rem/1 var(--font-head, Archivo, sans-serif);
  transition: transform .2s ease;
}
.spgc-oferta-btn:hover { transform: translateY(-2px); }
.spgc-oferta-btn:focus-visible { outline: 2px solid var(--navy, #0B1F33); outline-offset: 2px; }
.spgc-oferta-btn svg { flex-shrink: 0; }

@media (max-width: 520px) {
  .spgc-oferta { flex-direction: column; text-align: center; }
  .spgc-oferta-btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .spgc-oferta-btn { transition: none; }
  .spgc-oferta-btn:hover { transform: none; }
}
@media print { .spgc-oferta { display: none !important; } }