/* ============================================================
   Gómez Contreras — sistema visual
   Tokens y reglas de CLAUDE.md §4. CSS puro, sin build.
   ============================================================ */

/* ---------- fuente autohospedada (nada de CDN) ----------
   UNA SOLA FAMILIA: Figtree. Variable, OFL, 20 K, y ya estaba en el repo desde
   F4a, donde se eligió justamente como sustituto de Avenir —geométrica
   humanista, la misma familia de sensación—.
   Passenger Display y Avenir LT Std quedan descartados por licencia: son
   comerciales y autohospedarlos en un sitio público exige licencia *webfont*.
   Fraunces también sale: era el otro sustituto de F4a y ya no hay dos familias.

   La jerarquía es por PESO, no por familia (misma decisión que la referencia
   del cliente): 800 el H1, 700 los H2, 600 los H3 y el énfasis, 400 el cuerpo.
   Al ser VARIABLE, esos pesos son reales: ninguna negrita la sintetiza el
   navegador.

   El `unicode-range` es el subset latino con el que se generó el archivo:
   declarar de más sería mentirle al navegador. */
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin.woff2') format('woff2');
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+2000-206F,U+2122,U+2191,U+2193,U+2212;
}

:root{
  /* Disciplina cromática: sin cuarto color, sin acento cálido.
     Esta empresa vende respaldo jurídico, no estilo de vida. */
  --gc-ink:#0A3763;
  --gc-blue:#144E8D;
  --gc-blue-lit:#1E6FC4;
  --gc-slate:#636465;
  --gc-text:#14181D;
  --gc-paper:#F2F4F7;
  --gc-white:#FFFFFF;
  --gc-line:#D8DEE7;

  --fs-display:clamp(2.5rem,1.6rem + 3.6vw,4.5rem);
  --fs-h2:clamp(1.75rem,1.3rem + 1.8vw,2.75rem);
  --fs-h3:1.375rem;
  --fs-body:1.0625rem;
  --fs-small:0.875rem;
  --fs-label:0.75rem;

  --sans:'Figtree',system-ui,-apple-system,'Segoe UI',sans-serif;
  /* Alias, no otra familia: la jerarquía la hace el peso. */
  --serif:var(--sans);

  --r:2px;
  --sombra:0 1px 2px rgba(10,55,99,.06),0 2px 8px rgba(10,55,99,.06);
  --sombra-alta:0 4px 12px rgba(10,55,99,.10),0 12px 28px rgba(10,55,99,.12);
  --ancho:1200px;
}

*,*::before,*::after{box-sizing:border-box}

/* El atributo `hidden` solo aplica display:none desde la hoja del navegador, así
   que cualquier regla de autor con display:grid o display:flex lo anula. Sin
   esta línea, el esqueleto de carga y los chips activos nunca se ocultan. */
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--gc-paper);color:var(--gc-text);
  font-family:var(--sans);font-size:var(--fs-body);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--gc-blue-lit)}
:focus-visible{outline:2px solid var(--gc-blue-lit);outline-offset:2px;border-radius:1px}

/* ---------- tipografía ---------- */
/* Una familia, tres pesos. El salto entre 800, 700 y 600 es el que separa un
   nivel del siguiente: si todos pesaran igual, la jerarquía dependería solo
   del tamaño y a 360px eso se pierde. */
h1,h2,h3{
  font-family:var(--sans);
  letter-spacing:-.015em;line-height:1.12;
  color:var(--gc-ink);margin:0 0 .5rem;
}
h1{font-size:var(--fs-display);overflow-wrap:break-word;font-weight:700;letter-spacing:-.02em}
h2{font-size:var(--fs-h2);font-weight:600}
h3{font-size:var(--fs-h3);line-height:1.25;font-weight:500}
p{margin:0 0 1rem}
/* F9-1: explícito. Sin esto el navegador los pone en `bolder`, 700 sobre cuerpo 400,
   y la negrita del texto corrido quedaría por encima de la de los H2. */
b,strong{font-weight:600}
/* F9-4: sin tope de medida. Alineado a la izquierda, un tope en `ch` cortaba la frase a
   mitad de página y dejaba el hueco a la derecha que el cliente leyó como un «enter». */
.entradilla{font-size:1.1875rem;color:var(--gc-slate)}
.etiqueta{
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate);
}
/* Obligatorio en precios, áreas y tablas: sin esto las cifras bailan. */
.cifra{font-variant-numeric:tabular-nums;font-feature-settings:'tnum' 1}

/* ---------- segundo recurso de marca ----------
   El degradé de hairlines del logo, reutilizado como regla de sección.
   Solo aquí. Nunca como fondo, nunca como borde de tarjeta. */
.regla-seccion{height:2px;background:linear-gradient(90deg,#082E53,#0E5294);border:0;margin:0 0 2rem}

.contenedor{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem}

/* ---------- cabecera ---------- */
.cabecera{background:var(--gc-white);border-bottom:1px solid var(--gc-line);
  position:sticky;top:0;z-index:40}
.cabecera-in{max-width:var(--ancho);margin:0 auto;padding:0 1.25rem;
  display:flex;align-items:center;gap:2rem;min-height:4.5rem}
/* El logotipo real desde F6. Antes era tipográfico (Fraunces + versalitas)
   porque el PNG oficial vive en /datos/, que está bloqueado por .htaccess. */
.logo{display:flex;align-items:center;text-decoration:none;flex-shrink:0}
.logo img{display:block;height:3rem;width:auto}
/* A 360px el lockup completo compite con el botón de menú: se encoge, no se
   parte en dos líneas ni se recorta. Sigue leyéndose «Grupo Consultor». */
@media (max-width:26em){.logo img{height:2.5rem}}
.menu{display:flex;gap:.25rem;margin-left:auto;align-items:center;flex-wrap:wrap}
.menu a{color:var(--gc-text);text-decoration:none;font-size:.9375rem;font-weight:500;
  padding:.5rem .75rem;border-radius:var(--r)}
.menu a:hover{background:var(--gc-paper);color:var(--gc-blue)}
.menu a[aria-current=page]{color:var(--gc-blue);font-weight:600}
/* «Contáctenos» (F8-6): fondo blanco y texto azul. Antes era un botón azul
   lleno y se perdía contra el azul del resto de la interfaz. El filete azul es
   lo que impide que un botón blanco sobre cabecera blanca se lea como un
   enlace más.
   Y la lección de `REUTILIZABLE.md` §F4b sigue viva, ahora del revés: el
   estado activo NO puede limitarse a recolorear el texto —lo dejaría azul
   sobre blanco, idéntico al reposo—, así que se invierte el botón entero.
   Misma regla para hover, foco y activo: un solo aspecto que decir «este es
   el botón», sin estados intermedios que confundan. */
/* F9i-23: el cliente lo quiere azul oscuro con letra blanca SIEMPRE, no solo
   en su propia página, para que resalte. La cabecera es blanca, así que el
   azul profundo ya se distingue de los enlaces sin ayuda. Hover y foco suben a
   `--gc-blue`; la página actual se queda como el reposo —ya no hay un estado
   «apagado» del que tenga que distinguirse—. */
.menu .btn,
.menu .btn[aria-current=page]{background:var(--gc-ink);color:#fff;border-color:var(--gc-ink);
  font-weight:600}
.menu .btn:hover,
.menu .btn:focus-visible{background:var(--gc-blue);color:#fff;border-color:var(--gc-blue)}

/* ---------- botón «Últimas unidades» (hilo 8 → hilo 9) ----------
   Hilo 9, docx del cliente del 2026-10-02: un botón en una esquina de arriba del
   Inicio, con el logo del proyecto y un texto que invite a hacer clic. Sustituye
   a la franja del hilo 8, que iba encima de la cabecera.
   Tarjeta BLANCA sobre el azul del hero: es lo único claro del primer pantallazo
   y por eso se ve sin color nuevo, y el logotipo de Primea 53 —oscuro y ocre, con
   sus colores (§4, marca de un tercero)— necesita fondo claro. Sin animación de
   entrada ni parpadeo (§4): solo la sombra que sube al pasar, como una tarjeta.
   Desde 75rem: fuera del flujo, en la esquina superior derecha, sin empujar el
   contenido del hero; desde el hilo 12, fija y pegada a la ventana (ver abajo).
   Por debajo de 75rem, en el flujo, arriba a la derecha: a 1024px, superpuesta,
   quedaba a 7px del H1 (medido por el reviewer) y con zoom de texto lo tapaba. */
.aviso-unidades{position:relative;z-index:1;display:flex;align-items:center;gap:.75rem;
  width:fit-content;max-width:calc(100% - 2.5rem);margin:1rem 1.25rem 0 auto;
  padding:.55rem .95rem .55rem .55rem;background:var(--gc-white);color:var(--gc-text);
  border-radius:var(--r);box-shadow:var(--sombra-alta);text-decoration:none;
  font-size:.875rem;line-height:1.35;transition:box-shadow .2s ease}
.aviso-unidades:hover,.aviso-unidades:focus-visible{box-shadow:0 8px 20px rgba(10,55,99,.22),0 20px 44px rgba(10,55,99,.28)}
/* El anillo del sitio es `--gc-blue-lit`: sobre el azul del hero apenas se ve,
   y un anillo blanco no se ve sobre el fondo claro al que llega la tarjeta fija
   al bajar (hilo 12). Doble anillo: blanco pegado y `--gc-blue-lit` por fuera;
   siempre contrasta uno de los dos. */
.aviso-unidades:focus-visible{outline:2px solid var(--gc-blue-lit);outline-offset:2px;
  box-shadow:0 0 0 2px var(--gc-white),0 8px 20px rgba(10,55,99,.22),0 20px 44px rgba(10,55,99,.28)}
/* El logo es el `.logo-sello` de siempre (hilo 6); aquí sin filete: ya va sobre blanco. */
.aviso-unidades .logo-sello{border:0}
.aviso-unidades__texto{display:flex;flex-direction:column;align-items:flex-start;gap:.2rem}
/* Blanco sobre `--gc-blue-lit` da 5,1:1 (AA). */
.aviso-unidades__sello{background:var(--gc-blue-lit);color:var(--gc-white);font-size:var(--fs-label);
  font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:.15rem .6rem;border-radius:999px}
.aviso-unidades__ir{color:var(--gc-blue);font-weight:600}
.aviso-unidades:hover .aviso-unidades__ir,
.aviso-unidades:focus-visible .aviso-unidades__ir{text-decoration:underline;text-underline-offset:3px}
/* Hilo 12 (pedido de JuanJo): más a la derecha —a 1.5rem del borde de la
   ventana, ya no alineado con el contenedor— y FIJO al bajar, siempre a la
   vista. `top` = alto de la cabecera pegajosa (4.5rem, ver `.barra-filtros`) +
   el mismo 1.25rem de antes: en reposo cae justo donde caía dentro del hero.
   `z-index:35`: por debajo de la cabecera (40) y del WhatsApp (50). Solo desde
   75rem: en móvil fijo taparía contenido y el botón de WhatsApp, y se queda en
   el flujo como estaba. */
@media (min-width:75rem){
  .aviso-unidades{position:fixed;top:5.75rem;right:1.5rem;z-index:35;margin:0;
    padding:.7rem 1.15rem .7rem .7rem;font-size:.9375rem}
  /* Al tabular, el navegador desplaza el foco hasta que se vea, pero no sabe que
     hay una tarjeta fija de ~6rem bajo la cabecera: lo dejaría debajo (WCAG
     2.4.11). Cabecera + tarjeta + aire. Solo en la página que la lleva. */
  html:has(.aviso-unidades){scroll-padding-top:12.5rem}
  .aviso-unidades .logo-sello{width:4.25rem;height:4.25rem}
}

/* ---------- botones ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:.7rem 1.25rem;border-radius:var(--r);border:1px solid var(--gc-blue);
  background:var(--gc-blue);color:#fff;font:inherit;font-size:.9375rem;font-weight:500;
  text-decoration:none;cursor:pointer;line-height:1.3;transition:background .15s,border-color .15s;
}
.btn:hover{background:var(--gc-blue-lit);border-color:var(--gc-blue-lit)}
.btn--fantasma{background:transparent;color:var(--gc-blue);border-color:var(--gc-line)}
.btn--fantasma:hover{background:var(--gc-white);border-color:var(--gc-blue-lit);color:var(--gc-blue)}
.btn--chico{padding:.4rem .8rem;font-size:var(--fs-small)}
.btn[aria-disabled=true],.btn:disabled{opacity:.45;pointer-events:none}

/* ---------- chips ---------- */
.chip{
  display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .8rem;
  border:1px solid var(--gc-line);border-radius:999px;background:var(--gc-white);
  font-size:.875rem;font-weight:500;color:var(--gc-text);cursor:pointer;
  transition:border-color .15s,background .15s,color .15s;
}
.chip:hover{border-color:var(--gc-blue-lit)}
.chip[aria-pressed=true]{background:var(--gc-blue);border-color:var(--gc-blue);color:#fff}
.chip--quitar{background:var(--gc-white);border-style:solid;padding-right:.5rem}
.chip--quitar b{font-weight:600;color:var(--gc-ink)}
.chip--quitar span{color:var(--gc-slate)}
.chip--quitar .x{display:inline-flex;align-items:center;justify-content:center;
  width:1.1rem;height:1.1rem;border-radius:999px;background:var(--gc-paper);
  color:var(--gc-slate);font-size:.75rem;line-height:1}
.chip--quitar:hover .x{background:var(--gc-blue);color:#fff}

/* ---------- formularios ---------- */
.campo{display:flex;flex-direction:column;gap:.35rem}
.campo > label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
input[type=text],input[type=search],input[type=number],input[type=email],
input[type=tel],select,textarea{
  width:100%;padding:.6rem .75rem;border:1px solid var(--gc-line);border-radius:var(--r);
  font:inherit;font-size:.9375rem;background:var(--gc-white);color:var(--gc-text);
}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gc-slate) 50%),
  linear-gradient(135deg,var(--gc-slate) 50%,transparent 50%);
  background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:2.25rem}
input:focus,select:focus,textarea:focus{border-color:var(--gc-blue-lit);outline:none;
  box-shadow:0 0 0 3px rgba(30,111,196,.15)}
input::placeholder{color:#9aa3ad}

/* ---------- pestañas de operación ---------- */
.pestanas-op{display:inline-flex;background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:var(--r);padding:.25rem;gap:.25rem}
.pestanas-op button{border:0;background:none;font:inherit;font-size:.9375rem;font-weight:500;
  color:var(--gc-slate);padding:.45rem 1rem;border-radius:var(--r);cursor:pointer;white-space:nowrap}
.pestanas-op button[aria-selected=true]{background:var(--gc-ink);color:#fff}
.pestanas-op button:hover:not([aria-selected=true]){color:var(--gc-blue)}

/* ============================================================
   Ficha catastral — el elemento firma.
   Etiquetas en versalitas, cifras tabulares, filetes verticales.
   Es el dato que el comprador colombiano busca primero.
   ============================================================ */
.ficha{display:flex;border-top:1px solid var(--gc-line);border-bottom:1px solid var(--gc-line);
  margin:0;padding:0;list-style:none}
.ficha > div{flex:1;padding:.6rem .5rem;text-align:center;border-left:1px solid var(--gc-line);
  min-width:0}
.ficha > div:first-child{border-left:0;text-align:left;padding-left:0}
.ficha dt,.ficha .et{display:block;font-size:.625rem;text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;color:var(--gc-slate);margin-bottom:.15rem}
.ficha dd,.ficha .val{margin:0;font-size:.9375rem;font-weight:500;color:var(--gc-text);
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ficha--grande > div{padding:.9rem 1rem}
.ficha--grande .val{font-size:1.25rem}

/* Dentro de la tarjeta vertical la columna es angosta: cinco celdas en una
   sola fila dejarían las cifras pegadas a los filetes. Se aprieta el aire
   lateral y se recorta la etiqueta, sin tocar la ficha grande de la ficha. */
.tarjeta .ficha > div{padding:.55rem .35rem}
.tarjeta .ficha > div:first-child{padding-left:0}
.tarjeta .ficha .et{font-size:.5625rem;letter-spacing:.06em}
.tarjeta .ficha .val{font-size:.875rem}

/* ---------- tarjeta de inmueble ----------
   La retícula se diseñó en vertical (CLAUDE.md §4): la foto ocupa 3/4, así que
   la tarjeta es alta y la columna tiene que ser más angosta para que quepan
   cuatro y la parrilla no se estire a lo largo. */
.rejilla-inmuebles{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.tarjeta{
  background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  overflow:hidden;display:flex;flex-direction:column;
  transition:box-shadow .2s ease,transform .2s ease;
}
.tarjeta:hover{box-shadow:var(--sombra-alta)}
.tarjeta__figura{position:relative;margin:0;overflow:hidden;background:var(--gc-paper);
  /* 3/4 y no 4/3: el material del cliente es mayoritariamente vertical y se
     diseña para él, no contra él. Una horizontal entra recortada a miniatura,
     que es un recorte aceptable en una tarjeta; la galería de la ficha no
     recorta nunca (.escena). */
  aspect-ratio:3/4}
.tarjeta__figura img{width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.tarjeta:hover .tarjeta__figura img{transform:scale(1.03)}
.tarjeta__sin-foto{display:flex;align-items:center;justify-content:center;height:100%;
  color:var(--gc-slate);font-size:var(--fs-small);background:
  repeating-linear-gradient(45deg,#eef1f5,#eef1f5 10px,#e7ebf1 10px,#e7ebf1 20px)}
.tarjeta__ops{position:absolute;top:.65rem;left:.65rem;display:flex;gap:.35rem;flex-wrap:wrap}
.sello{display:inline-block;padding:.2rem .55rem;border-radius:999px;font-size:.625rem;
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;background:rgba(10,55,99,.92);
  color:#fff;backdrop-filter:saturate(1.4)}
.sello--arriendo{background:rgba(20,78,141,.92)}
.sello--estado{position:absolute;top:.65rem;right:.65rem;background:rgba(20,24,29,.88)}

/* Inmueble cerrado: es prueba de gestión, no oferta. Baja un punto de
   saturación para que no compita con lo que sí está disponible, y el precio
   pierde el azul de llamada. Nada más: sigue siendo una tarjeta de verdad. */
.tarjeta--cerrada .tarjeta__figura img{filter:saturate(.72)}
.tarjeta--cerrada .precio{color:var(--gc-slate)}
.tarjeta__cuerpo{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;flex:1;gap:.5rem}

/* Tarjeta sin figura: la de una unidad que todavía no tiene fotos, dentro de
   la ficha de su proyecto. No lleva marca de agua ni hueco rayado; lleva el
   filete de marca arriba para que se lea como una ficha de datos y no como una
   tarjeta a la que le falta algo. */
.tarjeta--sin-figura{border-top:2px solid transparent;
  background-image:linear-gradient(90deg,#082E53,#0E5294),
    linear-gradient(var(--gc-white),var(--gc-white));
  background-origin:border-box;background-clip:border-box,padding-box;
  background-repeat:no-repeat;background-size:100% 2px,100% 100%}
.tarjeta--sin-figura .tarjeta__cuerpo{padding-top:1.15rem}
/* Sin figura que ocupe la parte de arriba, el `margin-top:auto` del precio lo
   manda al fondo de la tarjeta y abre un vacío entre la ficha y el precio. Aquí
   el bloque de datos va junto: es lo único que hay que leer. */
.tarjeta--sin-figura .tarjeta__precios{margin-top:.5rem}
.tarjeta__sellos-linea{display:flex;gap:.35rem;flex-wrap:wrap}
.tarjeta__barrio{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
.tarjeta__titulo{font-size:1.0625rem;line-height:1.3;margin:0;font-family:var(--sans);
  font-weight:500;color:var(--gc-text);letter-spacing:0}
.tarjeta__titulo a{color:inherit;text-decoration:none}
/* F9i-5: «Business Center» bajo el nombre de Arttick 79. */
.tarjeta__categoria{display:block;margin-top:.15rem;font-size:var(--fs-small);color:var(--gc-slate)}
.tarjeta__titulo a::after{content:'';position:absolute;inset:0}
.tarjeta{position:relative}
.tarjeta__precios{display:flex;flex-direction:column;gap:.1rem;margin-top:auto;padding-top:.35rem}
.precio{font-family:var(--sans);font-size:1.3125rem;font-weight:600;color:var(--gc-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.precio small{font-size:.75rem;font-weight:500;color:var(--gc-slate);text-transform:uppercase;
  letter-spacing:.06em;margin-left:.35rem}
/* La nota de administración va siempre en su renglón: pegada al «/mes» partía
   en mitad de «ADMÓN. INCLUIDA» según el ancho de la tarjeta.
   F9d-1: y ahora el renglón existe SIEMPRE, también cuando no hay nota que dar.
   Antes el bloque medía uno, dos o tres renglones según lo que trajera la
   operación, y «Código» caía a una altura distinta en cada tarjeta de la fila.
   `:empty` lo reserva con un espacio duro: ocupa el renglón y no añade nada que
   un lector de pantalla tenga que decir. */
.precio__nota{display:block;margin-left:0;margin-top:.1rem}
.precio__nota:empty::before{content:'\00a0'}
.tarjeta__codigo{font-size:.6875rem;color:var(--gc-slate);font-variant-numeric:tabular-nums;
  letter-spacing:.04em}

/* ============================================================
   Galería de la ficha — el escenario se ADAPTA, no recorta.
   La tarjeta y la galería no llevan la misma regla, a propósito:
     · Tarjeta  → 3/4 fijo con `cover`. El grid tiene que ser uniforme y ahí
                  sí se recorta: es una miniatura.
     · Galería  → el escenario toma la proporción de CADA foto. Ni recorte ni
                  bandas: esta es la foto que decide una visita.
   La proporción entra por `--ratio`, escrita en el marcado desde `ancho`/`alto`
   de la BD. Va en el HTML y no en el CSS porque es un dato de cada imagen, y
   así el hueco queda reservado antes de que la foto cargue: cero CLS.
   ============================================================ */
.escena{position:relative;aspect-ratio:var(--ratio,3/4);background:var(--gc-ink);
  border-radius:var(--r);overflow:hidden;display:grid;place-items:center;
  /* Tope para el 9:16 de un reel, que si no se comería la pantalla entera.
     Solo en ese extremo aparece algo de fondo, y sigue sin recortar nada. */
  max-height:min(80vh,860px)}
.escena img{width:100%;height:100%;object-fit:contain;display:block}
.escena__proporcion{position:absolute;right:.6rem;bottom:.6rem;font-size:.625rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;color:#fff;
  background:rgba(10,55,99,.75);padding:.2rem .5rem;border-radius:999px}

/* Tiras de miniaturas. Aquí sí se recorta: son índice, no contenido. */
.tiras{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.5rem;
  margin-top:.6rem}
.tira{aspect-ratio:3/4;border:1px solid var(--gc-line);padding:0;background:var(--gc-paper);
  border-radius:var(--r);overflow:hidden;cursor:pointer}
.tira img{width:100%;height:100%;object-fit:cover;display:block}
.tira[aria-current=true]{border-color:var(--gc-blue-lit);box-shadow:0 0 0 1px var(--gc-blue-lit)}

/* ============================================================
   HERO A SANGRE (F8-7) — imagen de fondo, texto centrado, buscador debajo.
   La foto ya no es un inmueble al lado del titular: es la superficie del
   bloque entero, con el azul de marca encima.

   Vive FUERA de `.contenedor` —`index.php` cierra la caja y la reabre después—
   y por eso llega a los bordes sin `100vw`: en escritorio `100vw` incluye el
   ancho de la barra de scroll y saca la página hacia la derecha. El truco de
   `margin-inline:calc(50% - 50vw)` tiene exactamente el mismo defecto.
   ============================================================ */
.hero{position:relative;background:var(--gc-ink);overflow:hidden}
/* `object-position` a media altura: la foto tiene el horizonte y los cerros en
   el centro, y es lo que se quiere ver cuando el hero recorta arriba y abajo. */
.hero__foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 50%}
/* El velo es lo que sostiene el contraste del texto blanco, y se calculó
   contra el PEOR caso —una zona blanca de la foto—: a .62 da 6,9:1, por encima
   del 4,5:1 de AA. Por eso ningún tramo baja de .62.
   F9b: el último tramo llega a `--gc-ink` SÓLIDO, que es el fondo de la banda
   que va debajo. La foto se disuelve en ella y no queda línea de corte. */
.hero__velo{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,55,99,.62) 0%,rgba(10,55,99,.66) 50%,
    rgba(10,55,99,.84) 80%,var(--gc-ink) 100%)}
.hero__in{position:relative;text-align:center;
  padding-top:clamp(2.5rem,7vw,4.5rem);padding-bottom:clamp(2.25rem,5vw,3.5rem)}
.hero .etiqueta{color:#cfdcea}
/* F9-4: centrados, así que no dejan hueco a la derecha; lo que sí dejaban era una
   palabra huérfana («cuadrado») en su propia línea. `balance` reparte las líneas
   por igual, y la entrada llega al ancho del buscador de abajo. */
.hero h1{color:var(--gc-white);margin:.5rem auto .85rem;text-wrap:balance}
.hero__entrada{color:#dbe6f2;font-size:1.0625rem;line-height:1.6;max-width:58rem;text-wrap:balance;
  margin:0 auto clamp(1.5rem,3vw,2.25rem)}

/* Pestañas: son ENLACES, no controles de JS. Cada una es una vista del
   catálogo que ya existe y que se puede compartir y pautear (CLAUDE.md §5), y
   «Proyectos» además es otra página: un `<form>` contra `inmuebles.php` no
   podría llevar allí sin JS. */
/* Las pestañas van OPACAS, no en blanco translúcido: sobre una foto, un
   fondo semitransparente deja que cada pestaña tome el brillo de lo que
   tiene detrás y las tres salen de colores distintos. Se probó y se veía
   como un error, no como un efecto. */
.hero__buscador{max-width:58rem;margin:0 auto;text-align:left}
.hero__pestanas{display:flex;flex-wrap:wrap;gap:.3rem}
.hero__pestana{padding:.6rem 1.4rem;font-size:.9375rem;font-weight:600;line-height:1.3;
  text-decoration:none;color:var(--gc-white);background:var(--gc-blue);
  border:1px solid rgba(255,255,255,.3);border-bottom:0;
  border-radius:var(--r) var(--r) 0 0;transition:background .15s}
.hero__pestana:hover{background:var(--gc-blue-lit)}

/* ---------- hero de landing (F9d-6 y F9d-7) ----------
   Misma receta que el hero del home, con UNA diferencia que no es cosmética:
   el velo cierra en `--gc-paper` y no en `--gc-ink`. En el home cierra en azul
   sólido porque debajo va la banda azul de «Qué hacemos» y así no queda línea
   de corte (F9b-2); en una landing lo que sigue es papel, y cerrar en azul
   recrearía exactamente el borde que F9b quitó, en el otro sentido.
   Por eso el texto lleva más aire abajo: tiene que terminar ANTES de que el
   velo empiece a aclararse, o el blanco se quedaría sin contraste. */
/* F9e-2: el velo tapaba demasiada foto. Se aclara DONDE NO HAY TEXTO —el borde
   superior— y el barrido a papel se comprime al último 16 % en vez de empezar
   en el 72 %, que blanqueaba el tercio inferior entero.
   ⚠️ Lo que no se toca es el `.62` de la banda del titular: es el valor con el
   que se calculó el contraste AA del texto blanco en F8, y F9b lo dejó escrito
   como suelo. Bajarlo en bloque aclararía la foto y dejaría el H1 y la
   entradilla por debajo de AA, que es piso de calidad del contrato y no una
   preferencia. Por eso el tramo del 18 % al 68 % —donde vive el texto— se queda
   clavado en .62. */
.hero--landing .hero__velo{
  background:linear-gradient(180deg,rgba(10,55,99,.50) 0%,rgba(10,55,99,.62) 18%,
    rgba(10,55,99,.62) 68%,rgba(10,55,99,.70) 84%,var(--gc-paper) 100%)}
.hero--landing .hero__in{padding-bottom:clamp(4rem,9vw,7rem)}
.hero--landing .hero__entrada{margin-bottom:clamp(1.25rem,2.5vw,1.75rem)}
/* El hero del home lleva buscador porque su destino es el catálogo. Una landing
   tiene un solo destino —su formulario, que está en la misma página—, así que
   lleva un botón y no un panel. Blanco sobre la foto: el azul de marca sobre
   azul de marca no se lee, que es la lección del botón de la cabecera (F8-6). */
.hero--landing .btn{background:var(--gc-white);color:var(--gc-blue);
  border-color:var(--gc-white);font-weight:600}
.hero--landing .btn:hover,.hero--landing .btn:focus-visible{
  background:var(--gc-blue-lit);color:#fff;border-color:var(--gc-blue-lit)}

/* ============================================================
   Hero a dos columnas — para foto vertical.
   YA NO LO USA LA HOME (F8-7): sobrevive porque `styleguide.html` lo pinta.
   A ancho completo una vertical hay que recortarla a una franja y el inmueble
   desaparece. Al lado del titular se ve entera y el buscador queda a la
   izquierda, en el camino de lectura.
   ============================================================ */
.hero-dos{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;
  gap:clamp(1.5rem,4vw,3.5rem);padding:clamp(1.75rem,4vw,3.5rem) 0}
.hero-dos__texto{max-width:36rem}
.hero-dos__texto h1{font-size:var(--fs-display);line-height:1.04;margin:.25rem 0 .75rem}
.hero-dos__entrada{font-size:1.0625rem;color:var(--gc-slate);max-width:32rem;margin:0 0 1.5rem}
.hero-dos__figura{position:relative;margin:0;aspect-ratio:3/4;overflow:hidden;
  border-radius:var(--r);background:var(--gc-paper);box-shadow:var(--sombra-alta)}
.hero-dos__figura img{width:100%;height:100%;object-fit:cover;display:block}
/* Ficha catastral montada sobre el borde inferior de la foto: el dato duro
   encima de la imagen, que es como lo lee un comprador colombiano. */
.hero-dos__ficha{position:absolute;left:0;right:0;bottom:0;background:rgba(255,255,255,.94);
  backdrop-filter:saturate(1.2) blur(2px);border-top:1px solid var(--gc-line)}
.hero-dos__ficha .ficha{border:0}
.hero-dos__ficha .ficha > div:first-child{padding-left:.75rem}

/* Buscador del hero: panel blanco colgando de las pestañas. La esquina
   superior izquierda va a escuadra a propósito — es donde encaja la primera
   pestaña, y redondearla partiría el bloque en dos piezas sueltas. */
.buscador-hero{display:flex;gap:.75rem;flex-wrap:wrap;align-items:flex-end;
  background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:0 var(--r) var(--r) var(--r);padding:1rem;box-shadow:var(--sombra-alta)}
/* 10rem y no 8: con 8 el `select` quedaba tan angosto que «Venta y arriendo»
   —la opción por defecto, la que se lee siempre— salía cortada en «Venta y
   arrier». Antes que abreviar la etiqueta, se ensancha el campo: si no cabe,
   la fila envuelve, que es lo que ya hace en móvil. */
.buscador-hero .campo{flex:1 1 10rem;min-width:0}
/* El barrio es el campo con el que empieza cualquiera que busque casa, así que
   es el ancho del panel y no una casilla más. */
.buscador-hero .campo--ancho{flex:2 1 14rem}
.buscador-hero .btn{flex:1 1 9rem;padding:.62rem 1.25rem}
.buscador-hero .btn svg{width:1.15em;height:1.15em;fill:none;stroke:currentColor;
  stroke-width:2;stroke-linecap:round}

@media (max-width:640px){
  /* A pulgar: cada campo su renglón y el botón entero al final. Nada de tres
     `select` de 100px en fila. */
  .buscador-hero{padding:.85rem}
  .buscador-hero .campo,.buscador-hero .campo--ancho,.buscador-hero .btn{flex:1 1 100%}
  .hero__pestana{flex:1 1 auto;text-align:center;padding:.55rem .9rem}
}

@media (max-width:820px){
  .hero-dos{grid-template-columns:1fr;gap:1.5rem}
  /* La foto baja: primero se lee qué vende esta empresa. */
  .hero-dos__figura{order:2;max-width:26rem;margin-inline:auto;width:100%}
}

/* revelado al hacer scroll, una sola vez */
.revelar{opacity:0;transform:translateY(12px)}
.revelar.visible{opacity:1;transform:none;transition:opacity .5s ease,transform .5s ease}

/* ---------- barra de filtros ---------- */
/* `scroll-margin-top`: al subir desde la barra (F9h-4) el panel queda debajo de
   la cabecera fija, no tapado por ella. */
.filtros{background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  padding:1.1rem;margin-bottom:1.5rem;box-shadow:var(--sombra);scroll-margin-top:5.5rem}
.filtros__fila{display:flex;gap:.85rem;flex-wrap:wrap;align-items:flex-end}
.filtros__fila + .filtros__fila{margin-top:.85rem}
.filtros .campo{min-width:9.5rem;flex:1}
.filtros .campo--codigo{max-width:12rem}

/* F9h-1: las tres filas principales, en columnas FIJAS. Con flex cada campo
   medía lo que le tocaba en su fila, así que las pestañas, Tipo y Habitaciones
   no compartían ancho ni borde. Tres columnas desde 901px y dos por debajo: a
   tres, en 800px las cuatro pestañas no caben en su celda. En móvil manda la
   hoja inferior, con un campo por renglón. */
@media (min-width:641px){
  .filtros__fila--rejilla{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .filtros__fila--rejilla .campo{min-width:0}
  .filtros__fila--rejilla .campo--codigo{max-width:none}
  .filtros__fila--rejilla .pestanas-op{display:flex;width:100%}
  .filtros__fila--rejilla .pestanas-op button{flex:1 1 0;padding-inline:.5rem}
}
@media (min-width:901px){
  .filtros__fila--rejilla{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* F9d-3: el filtro se levanta al pasar por encima y al enfocar, y su etiqueta
   se tiñe de azul. Es la mitad del pedido del cliente que SÍ se puede cumplir.
   La otra —que el texto del cuadro se teclee letra por letra— se descarta y no
   por capricho: estos controles son `<select>` e `<input>`, cuyo valor visible
   lo dibuja el sistema operativo y no hay forma de animarlo; `prefers-reduced-
   motion` obligaría a apagarlo; y un texto que se escribe solo se lo come el
   lector de pantalla carácter a carácter. */
.filtros .campo{border-radius:var(--r);transition:box-shadow .18s ease}
.filtros .campo:hover{box-shadow:var(--sombra)}
.filtros .campo:focus-within{box-shadow:var(--sombra-alta)}
.filtros .campo:hover > label,
.filtros .campo:focus-within > label{color:var(--gc-blue)}
.filtros select:hover,.filtros input:hover{border-color:var(--gc-blue-lit)}
/* Los chips ya cambiaban de filete; la sombra es lo que los saca del papel. */
.filtros .chip:hover{box-shadow:var(--sombra)}
.rango{display:flex;gap:.5rem;align-items:center}
.rango input{font-variant-numeric:tabular-nums}
.rango span{color:var(--gc-slate);font-size:var(--fs-small)}
.grupo-chips{display:flex;gap:.4rem;flex-wrap:wrap}

.mas-filtros{margin-top:.85rem;border-top:1px solid var(--gc-line);padding-top:.85rem}
.mas-filtros[hidden]{display:none}
/* F9h-2: acciones a la izquierda y, a su lado, los filtros puestos con su X.
   El filete va en la fila y no en el resumen: separa el pie del panel haya o no
   filtros. */
.pie-filtros{display:flex;gap:.6rem .85rem;align-items:center;flex-wrap:wrap;
  margin-top:.85rem;padding-top:.85rem;border-top:1px solid var(--gc-line)}
.pie-filtros__acciones{display:flex;gap:.5rem;flex:0 0 auto}
/* F9h-3: cierra la hoja inferior. Solo existe donde hay hoja: en móvil. */
#cerrar-filtros{display:none;margin-left:auto}
@media (max-width:640px){#cerrar-filtros{display:inline-flex}}

/* F9d-5 / F9h-2: lo que se está filtrando, un chip con X por filtro. Lo pinta
   una sola función para el panel y para la barra fija. */
.filtros__resumen{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;margin:0;min-width:0;
  font-size:var(--fs-small);color:var(--gc-slate);line-height:1.4}
.filtros__resumen b{color:var(--gc-ink);font-weight:600}

/* ---------- resultados ---------- */
.barra-resultados{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem}
.contador{font-family:var(--sans);font-size:1.375rem;font-weight:700;color:var(--gc-ink);
  font-variant-numeric:tabular-nums}
.orden{margin-left:auto;display:flex;align-items:center;gap:.5rem}
.orden label{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
.orden select{width:auto}

/* ---------- estados ---------- */
.estado-vacio{background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  padding:3rem 1.5rem;text-align:center}
.estado-vacio h3{margin-bottom:.5rem}
.estado-vacio p{color:var(--gc-slate);max-width:42ch;margin:0 auto 1.25rem}
.estado-vacio .acciones{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}

.esqueleto{background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  overflow:hidden}
.esqueleto__img{aspect-ratio:3/4;background:var(--gc-paper)}
.esqueleto__linea{height:.75rem;margin:.75rem 1.1rem;border-radius:2px;background:var(--gc-paper)}
.esqueleto__linea--corta{width:40%}
.esqueleto__linea--media{width:70%}
.pulso{position:relative;overflow:hidden}
.pulso::after{content:'';position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.75),transparent);
  animation:barrido 1.3s infinite}
@keyframes barrido{100%{transform:translateX(100%)}}

/* ---------- hoja inferior en móvil ---------- */
.abrir-filtros{display:none}

/* ---------- pie ---------- */
.pie{background:var(--gc-ink);color:#cfdcea;margin-top:4rem;padding:3rem 0 2rem}
.pie a{color:#fff;text-decoration:none}
.pie a:hover{text-decoration:underline}
.pie-rejilla{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.pie h3{color:#fff;font-size:1rem;font-family:var(--sans);letter-spacing:.06em;
  text-transform:uppercase;font-weight:600}
.pie p{font-size:var(--fs-small);line-height:1.7}
.pie-legal{border-top:1px solid rgba(255,255,255,.15);margin-top:2rem;padding-top:1.25rem;
  font-size:.8125rem;color:#9fb4cb}

/* ============================================================
   Ficha de inmueble
   ============================================================ */
.migas{font-size:var(--fs-small);color:var(--gc-slate);margin:0 0 1.25rem}
.migas a{color:var(--gc-slate)}
.migas a:hover{color:var(--gc-blue)}
.migas span[aria-current]{color:var(--gc-text);font-weight:500}

.ficha-encabezado{display:flex;gap:2rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:1.5rem}
/* F9-4: el bloque de texto crece hasta donde empiezan los precios, sin tope en `ch`. */
.ficha-encabezado > div:first-child{flex:1 1 20rem;min-width:0}
.ficha-encabezado h1{font-size:var(--fs-h2);margin:.35rem 0 .5rem}
.ficha-ubicacion{color:var(--gc-slate);font-size:var(--fs-body);margin:0}

/* Hilo 6: logotipo de proyecto en caja cuadrada. Blanca y con filete, como una
   tarjeta: los cuatro logos son de naturaleza distinta —vector, transparencia,
   maqueta fotográfica— y la caja común es lo que los hace leerse como serie.
   `contain` con margen para los limpios; la maqueta llena la caja (`--foto`). */
.logo-sello{flex:none;display:block;width:3.25rem;height:3.25rem;padding:.3rem;
  background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);overflow:hidden}
.logo-sello img{display:block;width:100%;height:100%;object-fit:contain}
.logo-sello--foto{padding:0}
.logo-sello--foto img{object-fit:cover}
.tarjeta__marca{display:flex;gap:.75rem;align-items:center}
.tarjeta__marca > div{min-width:0;display:flex;flex-direction:column;gap:.35rem}
.ficha-marca{display:flex;gap:1.25rem;align-items:center}
.ficha-marca > div{min-width:0}
.ficha-marca .logo-sello{width:6rem;height:6rem;padding:.5rem}
.ficha-marca .logo-sello--foto{padding:0}
@media (max-width:640px){
  .ficha-marca{gap:.9rem}
  .ficha-marca .logo-sello{width:4.25rem;height:4.25rem;padding:.35rem}
  .ficha-marca .logo-sello--foto{padding:0}
}

.ficha-precios{display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;text-align:right}
.ficha-precio{display:flex;flex-direction:column;align-items:flex-end}
.ficha-precio .et{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
.ficha-precio .precio{font-size:1.75rem;line-height:1.15}
.ficha-precio .ayuda{font-size:var(--fs-small);color:var(--gc-slate)}
/* El sello de cerrado va en el flujo, no encima de una foto: aquí es un hecho
   del inmueble, no una marca sobre una miniatura. */
.sello--cerrado{display:inline-block;background:var(--gc-text);color:#fff;padding:.3rem .7rem;
  border-radius:999px;font-size:.6875rem;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em}
.ayuda-cerrado{font-size:var(--fs-small);color:var(--gc-slate);max-width:28ch;margin:.35rem 0 .5rem}

/* ---------- galería ----------
   Escena grande a la izquierda y mosaico de cuatro a la derecha. Con material
   vertical, una sola columna deja media pantalla vacía y empuja los datos
   duros fuera del primer pantallazo. */
/* F9g: las columnas se ajustan AL CONTENIDO y el conjunto va centrado.
   Antes eran fracciones (`1.15fr` / `1fr`), así que la escena medía lo que le
   tocaba de la fila —unos 580px— mientras la foto vertical, con `contain`,
   solo pintaba 465px centrados dentro. Esos ~115px de aire iban POR DENTRO de
   la escena, no en el `gap`: de ahí que la foto principal y el mosaico se
   vieran separados por un vacío que ninguna regla declaraba.
   Con la altura definida, `aspect-ratio` deriva el ancho y la escena mide
   exactamente lo que mide su foto, sea vertical, cuadrada o apaisada. */
/* ⚠️ Las dos columnas son LONGITUDES derivadas del ancla y del ratio, nunca
   porcentajes ni `auto`. Un `%` sobre un hijo de columna `auto` se resuelve
   contra la propia columna, que a su vez se dimensiona por su contenido: es
   circular, y el navegador lo resuelve encogiéndolo todo —se probó, y la
   escena vertical cayó de 465px a 285px con MÁS hueco que antes—.
   `minmax(0, …)` deja que ambas encojan a la vez cuando no caben, y como la
   escena lleva la altura automática, encoger solo la achata: nunca aparecen
   bandas. La segunda columna son dos miniaturas 3:4 a media altura del ancla. */
/* `scroll-margin-top`: quien llegue a `#fotos` —el aviso del Inicio saltaba ahí
   en el hilo 8; desde el hilo 9 lleva a la ficha— no la ve tapada por la
   cabecera pegajosa. */
.ficha-galeria{margin:0 0 2.5rem;display:grid;gap:.5rem;align-items:start;scroll-margin-top:5.5rem;
  justify-content:center;max-width:100%;
  grid-template-columns:
    minmax(0, calc(min(66vh,620px) * var(--ratio,3/4)))
    minmax(0, calc((min(66vh,620px) - .5rem) * .75 + .5rem))}
/* ⚠️ El ANCHO se deriva del ratio y la ALTURA se deja automática, nunca al
   revés. Fijar `height` obliga a la escena a medir 620px de alto sea cual sea
   la foto: una apaisada se queda con el ancho recortado por `max-width` y la
   altura clavada, así que aparece con BANDAS arriba y abajo — justo lo que
   CLAUDE.md §4 prohíbe en la galería («ni recorte ni bandas»). Se vio en la
   ficha de 1002, con las 27 suites en verde.
   `--ratio` viaja en el marcado como par (`1200/1600`), y dentro de `calc()`
   eso es `alto * 1200 / 1600`: multiplicar y dividir por números es válido, y
   da el ancho exacto de la foto. Con `height:auto`, `aspect-ratio` deriva la
   altura de ese ancho, así que la proporción se respeta también cuando
   `max-width` recorta en una ventana angosta. */
/* La escena llena su columna, que ya mide lo que mide su foto. La altura la
   deriva `aspect-ratio` del ancho, y no al revés: fijar la altura es lo que
   metía bandas arriba y abajo en las fotos apaisadas (CLAUDE.md §4). */
.ficha-galeria .escena{width:100%;height:auto;max-height:none}
.escena__abrir{position:absolute;right:.8rem;bottom:.8rem;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--gc-ink);font-family:var(--sans);font-weight:600;
  font-size:var(--fs-small);padding:.5rem .9rem;border-radius:999px;box-shadow:var(--sombra)}
.escena__abrir:hover{background:#fff}

/* F9g: el mosaico tiene ancho propio y las miniaturas derivan su alto de él por
   `aspect-ratio`. Antes el alto venía de un `max-height` atado a los 620px de la
   escena, que dejó de ser una medida fija cuando la escena pasó a medir lo que
   mide su foto. */
.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.mosaico__foto{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:var(--r);background:var(--gc-paper);aspect-ratio:3/4}
.mosaico__foto img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .35s ease}
.mosaico__foto:hover img{transform:scale(1.03)}
/* El «+N» no es decoración: dice cuántas fotos quedan sin que haya que contar. */
.mosaico__mas{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,55,99,.62);color:#fff;font-family:var(--sans);font-weight:600;
  font-size:1.5rem;letter-spacing:-.01em}

/* ---------- cuerpo a dos columnas ---------- */
.ficha-cuerpo{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start}
.ficha-cuerpo .ficha--grande{margin-bottom:1.25rem}

.datos-secundarios{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:.85rem 1.5rem;margin:0 0 2rem;padding:0}
.datos-secundarios > div{border-top:1px solid var(--gc-line);padding-top:.5rem}
.datos-secundarios dt{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
.datos-secundarios dd{margin:.15rem 0 0;font-weight:500;font-variant-numeric:tabular-nums}

.bloque{margin:2.5rem 0}
.bloque h2{font-size:var(--fs-h3);font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin:0 0 1rem}
.prosa{color:var(--gc-text);line-height:1.7}
.prosa p{margin:0 0 1rem}

.grupo-caracteristicas{margin-bottom:1.5rem}
.grupo-caracteristicas h3{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--gc-slate);font-family:var(--sans);margin:0 0 .5rem}
.lista-caracteristicas{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.4rem}
.lista-caracteristicas li{background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:999px;padding:.3rem .75rem;font-size:var(--fs-small)}

/* ---------- video ---------- */
.video-ficha,.video-diferido{width:100%;aspect-ratio:16/9;border-radius:var(--r);
  background:var(--gc-ink);display:block}
.video-diferido{position:relative;overflow:hidden;cursor:pointer;border:0;padding:0}
.video-diferido img{width:100%;height:100%;object-fit:cover;opacity:.55}
.video-diferido__play{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content;
  display:flex;flex-direction:column;align-items:center;gap:.3rem;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:var(--gc-ink);font-family:var(--sans);font-weight:600;
  padding:.9rem 1.4rem;border-radius:var(--r);box-shadow:var(--sombra-alta)}
.video-diferido__play small{font-weight:500;color:var(--gc-slate);text-transform:uppercase;
  letter-spacing:.06em;font-size:.625rem}
.bloque iframe{width:100%;aspect-ratio:16/9;border:0;border-radius:var(--r)}

/* ---------- formulario lateral ---------- */
.ficha-lateral{position:sticky;top:5rem}
.tarjeta-contacto{background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:var(--r);padding:1.5rem;box-shadow:var(--sombra);display:flex;
  flex-direction:column;gap:.85rem}
.tarjeta-contacto h2{font-size:var(--fs-h3);margin:0;font-family:var(--sans);font-weight:600;
  letter-spacing:0;text-transform:none}
.tarjeta-contacto .ayuda{font-size:var(--fs-small);color:var(--gc-slate);margin:0;line-height:1.5}
.tarjeta-contacto .check{display:flex;gap:.5rem;align-items:flex-start}
.tarjeta-contacto .check label{font-size:.8125rem;color:var(--gc-slate);line-height:1.45}
/* El honeypot tiene que ser invisible sin `display:none`: algunos bots ignoran
   los campos ocultos, y así caen igual. */
.trampa{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.respuesta-form{margin:0;font-size:var(--fs-small);min-height:1.2em}
.respuesta-form.bien{color:#1c6b45;font-weight:500}
.respuesta-form.mal{color:#a3241a;font-weight:500}

/* ---------- lightbox ---------- */
body.sin-scroll{overflow:hidden}
.lightbox{position:fixed;inset:0;z-index:100;background:rgba(10,24,40,.94);
  display:flex;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.lightbox[hidden]{display:none}
.lightbox__marco{margin:0;aspect-ratio:var(--ratio,3/4);max-height:88vh;max-width:100%;
  display:flex;align-items:center;justify-content:center}
.lightbox__marco img{max-width:100%;max-height:88vh;width:auto;height:auto;
  border-radius:var(--r);display:block}
.lightbox__cerrar,.lightbox__nav{position:absolute;border:0;cursor:pointer;color:#fff;
  background:rgba(255,255,255,.12);width:2.75rem;height:2.75rem;border-radius:999px;
  font-size:1.5rem;line-height:1;display:flex;align-items:center;justify-content:center}
.lightbox__cerrar:hover,.lightbox__nav:hover{background:rgba(255,255,255,.28)}
.lightbox__cerrar{top:1rem;right:1rem;font-size:1.1rem}
.lightbox__nav--antes{left:1rem}
.lightbox__nav--luego{right:1rem}
.lightbox__cuenta{position:absolute;bottom:1rem;left:0;right:0;text-align:center;color:#cfdcea;
  font-size:var(--fs-small);font-variant-numeric:tabular-nums;margin:0}

@media (max-width:900px){
  .ficha-cuerpo{grid-template-columns:1fr}
  /* El formulario deja de ser lateral: pegado abajo estorbaría al leer. */
  .ficha-lateral{position:static;order:2}
  .ficha-encabezado{gap:1rem}
  .ficha-precios{align-items:flex-start;text-align:left}
  .ficha-precio{align-items:flex-start}
  /* La escena manda sola y el mosaico pasa a una tira de cuatro debajo.
     Aquí sí manda el ancho: la escena ocupa la columna entera y el alto vuelve
     a ser un tope, no una medida (F9g solo aplica al de dos columnas). */
  .ficha-galeria{grid-template-columns:1fr;justify-content:stretch}
  .ficha-galeria .escena{height:auto;width:100%;max-width:100%;max-height:min(62vh,560px)}
  /* El 38 % del mosaico es cosa del diseño a dos columnas: aquí la tira de
     cuatro ocupa el ancho entero, o quedaría a un tercio de la pantalla. */
  .mosaico{grid-template-columns:repeat(4,1fr);width:auto;max-width:none}
}

/* ---------- WhatsApp flotante ---------- */
.wasap{position:fixed;right:1rem;bottom:1rem;z-index:50;width:3.25rem;height:3.25rem;
  border-radius:999px;background:var(--gc-ink);color:#fff;display:flex;align-items:center;
  justify-content:center;box-shadow:var(--sombra-alta);text-decoration:none}
.wasap:hover{background:var(--gc-blue)}
.wasap svg{width:1.6rem;height:1.6rem;fill:currentColor}

/* ============================================================
   Navegación — salto al contenido, submenú y menú de móvil
   ============================================================ */
.saltar{position:absolute;left:-9999px;top:0;z-index:100;background:var(--gc-white);
  color:var(--gc-blue);padding:.6rem 1rem;border:1px solid var(--gc-blue-lit);
  border-radius:var(--r);font-weight:500;text-decoration:none}
.saltar:focus{left:.75rem;top:.75rem}

/* Sin JS, `display:contents` deja los dos enlaces de Servicios como dos
   entradas más del menú: la navegación se ve entera aunque el script falle.
   `nav.js` añade .submenu--plegado y a partir de ahí sí es un desplegable. */
.submenu{display:contents}
.submenu--plegado{display:block;position:relative}
.submenu__boton{border:0;background:none;font:inherit;font-size:.9375rem;font-weight:500;
  color:var(--gc-text);padding:.5rem .75rem;border-radius:var(--r);cursor:pointer;
  display:inline-flex;align-items:center;gap:.3rem;line-height:1.3}
.submenu__boton:hover{background:var(--gc-paper);color:var(--gc-blue)}
.submenu__boton[aria-current=page]{color:var(--gc-blue);font-weight:600}
.submenu__boton span{font-size:.7em;transition:transform .15s}
.submenu.abierto .submenu__boton span{transform:rotate(180deg)}
.submenu__panel{display:none;position:absolute;top:calc(100% + .35rem);left:0;min-width:15rem;
  background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  box-shadow:var(--sombra-alta);padding:.35rem;z-index:45}
.submenu.abierto .submenu__panel{display:block}
.submenu__panel a{display:block;white-space:nowrap}

.nav__boton{display:none;border:1px solid var(--gc-line);background:var(--gc-white);
  color:var(--gc-ink);border-radius:var(--r);padding:.5rem .6rem;cursor:pointer;
  margin-left:auto;align-items:center;justify-content:center}
.nav__boton:hover{border-color:var(--gc-blue-lit);color:var(--gc-blue)}

/* ============================================================
   Home
   ============================================================ */
.franja{padding-top:3.5rem}

/* ---------- banda de sección en azul (F8-1) ----------
   Dónde va el azul: en los bloques de ESTRUCTURA —hero, esta banda, el cierre
   de contacto y el pie—. En las tarjetas de inmueble NO: ahí manda la foto, y
   un fondo oscuro detrás de once fotos distintas se come todas.
   Como el hero, va fuera de `.contenedor` para llegar a los bordes sin `vw`. */
.franja--azul{background:var(--gc-ink);color:#cfdcea;
  padding-block:clamp(2.5rem,5vw,3.75rem);margin-top:clamp(2.5rem,5vw,3.5rem)}
/* Dos superficies azules seguidas NO llevan margen entre ellas: ese margen es
   papel, y entre el hero y esta banda se veia como una franja blanca suelta —un
   fallo de maquetacion, no una decision—. El margen solo separa del papel. */
.hero + .franja--azul,
.franja--azul + .franja--azul{margin-top:0}
.franja--azul h2{color:var(--gc-white)}
.franja--azul .encabezado-seccion p{color:#cfdcea}
/* La regla de marca es un degradé de azules: sobre azul desaparece. Mismo
   recurso, invertido — de la luz del logo al blanco. */
.franja--azul .regla-seccion{
  background:linear-gradient(90deg,var(--gc-blue-lit),rgba(255,255,255,.85))}
/* Las tarjetas de servicio no se vuelven blancas dentro de la banda: se
   convierten en un velo sobre el azul. Un rectángulo blanco aquí rompería la
   superficie en tres agujeros. */
.franja--azul .servicio{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.22);
  padding:clamp(1.5rem,3vw,2rem)}
.franja--azul .servicio h3{color:var(--gc-white)}
.franja--azul .servicio p{color:#cfdcea}
.franja--azul .servicio__ir{color:var(--gc-white)}
.franja--azul .servicio:hover{background:rgba(255,255,255,.13);box-shadow:none}
.franja--azul .servicio:hover .servicio__ir{color:var(--gc-white);text-decoration:underline}
/* La banda pone el texto claro por herencia, y dentro de ella hay un panel
   BLANCO: el del proyecto activo. Sin este reset, su resumen saldría en azul
   claro sobre blanco — ilegible, y sin que ninguna regla lo declare. */
.franja--azul .proyecto-activo{color:var(--gc-text)}
.encabezado-seccion{display:flex;align-items:flex-end;justify-content:space-between;
  gap:1rem 1.5rem;flex-wrap:wrap;margin-bottom:1.75rem}
.encabezado-seccion h2{margin:0}
/* F9-3: el texto ocupa lo que le deja el botón. `flex:1 1 0` y no `auto`: con `auto` una
   frase larga reclama su ancho entero y empuja el botón a otra fila antes de hacer falta. */
.encabezado-seccion > div{flex:1 1 0;min-width:min(100%,18rem)}
.encabezado-seccion p{color:var(--gc-slate);margin:.5rem 0 0}

/* Pie del hero: la ficha catastral montada sobre la foto, con el barrio y el
   enlace al inmueble en su propio renglón. */
.hero-dos__pie{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .75rem;border-bottom:1px solid var(--gc-line);font-size:var(--fs-small)}
.hero-dos__pie a{font-weight:600;text-decoration:none;white-space:nowrap}
.hero-dos__marca{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}

/* Las tres líneas de negocio. */
.servicios{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(255px,1fr))}
.servicio{position:relative;background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:var(--r);padding:1.5rem;display:flex;flex-direction:column;gap:.55rem;
  transition:box-shadow .2s ease}
.servicio:hover{box-shadow:var(--sombra-alta)}
.servicio h3{font-family:var(--sans);font-size:1.125rem;font-weight:600;letter-spacing:0;
  color:var(--gc-text);margin:0}
.servicio p{color:var(--gc-slate);font-size:var(--fs-small);line-height:1.65;margin:0}
.servicio__ir{margin-top:auto;padding-top:.75rem;font-size:var(--fs-small);font-weight:600;
  color:var(--gc-blue);text-decoration:none}
.servicio__ir::after{content:'';position:absolute;inset:0}
.servicio:hover .servicio__ir{color:var(--gc-blue-lit)}

/* ---------- carrusel de inmuebles (F8-4) ----------
   Una sola fila, no dos. El scroll nativo hace todo el trabajo: sin una línea
   de JS sigue funcionando con el dedo, con el trackpad y con el teclado —la
   tira es focalizable—. Las flechas son un extra que enciende `carrusel.js`;
   por eso salen del servidor con `hidden` y no como botones muertos. */
.carrusel-envoltura{position:relative}
.carrusel{display:flex;gap:1.25rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Aire arriba y abajo para que la sombra del hover no salga recortada: con
     `overflow-x:auto` el eje vertical también recorta, lo diga o no la regla. */
  padding:.35rem 0 1.1rem;
  /* El gesto se conserva; lo que se va es la barra. */
  scrollbar-width:none;-ms-overflow-style:none}
.carrusel::-webkit-scrollbar{display:none}
/* En móvil entra una tarjeta y el borde de la siguiente: eso es lo que dice
   «esto se arrastra» sin ningún cartel que lo explique. */
.carrusel > .tarjeta{flex:0 0 clamp(15rem,72vw,17rem);scroll-snap-align:start}
/* F9-2: en escritorio, tres por vista. El paso de las flechas lo mide `carrusel.js`
   sobre la tarjeta real, así que no hay número que sincronizar. */
@media (min-width:901px){
  .carrusel > .tarjeta{flex-basis:calc((100% - 2 * 1.25rem) / 3)}
}
.carrusel__flecha{position:absolute;top:35%;z-index:5;width:2.75rem;height:2.75rem;
  border-radius:999px;border:1px solid var(--gc-line);background:var(--gc-white);
  color:var(--gc-ink);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--sombra-alta);font-size:1.25rem;line-height:1;
  transition:background .15s,border-color .15s,color .15s}
.carrusel__flecha--antes{left:-1rem}
.carrusel__flecha--luego{right:-1rem}
.carrusel__flecha:hover{background:var(--gc-blue);border-color:var(--gc-blue);
  color:var(--gc-white)}
.carrusel__flecha:disabled{opacity:.3;cursor:default;box-shadow:none}
@media (max-width:900px){
  /* A partir de aquí manda el dedo y las flechas solo taparían tarjeta. */
  .carrusel__flecha{display:none}
}

/* Proyecto activo: banda a dos columnas. Es el único que se vende hoy, así
   que no comparte parrilla con los entregados: comparte parrilla con nada. */
.proyecto-activo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  overflow:hidden;align-items:stretch}
/* El tope de altura no es cosmético: con material vertical —el render de
   Primea 53 es 2000x2500— la figura estira la fila hasta ~875px y la columna
   de texto queda flotando en medio de un vacío. Acotada, la banda se lee como
   una banda. Aquí sí se recorta: la foto sin recortar está en la ficha. */
.proyecto-activo__figura{margin:0;min-height:20rem;max-height:30rem;overflow:hidden;
  background:var(--gc-paper);position:relative}
.proyecto-activo__figura img{width:100%;height:100%;object-fit:cover;display:block}
/* Hilo 12: el video va ENCIMA de la portada y ocupa la figura entera.
   Hilo 13: `contain`, no `cover`. El video de Primea 53 es 16:9 y lleva logos
   pegados a los bordes (Gómez Contreras, Alianza, Primea 53): recortado al
   centro se perdían. Ahora se ve entero, con bandas blancas arriba y abajo
   que se funden con la tarjeta y con los cuadros de fondo blanco del video
   (pedido de JuanJo). Es invisible hasta que sale el primer cuadro
   (`.reproduciendo`, lo pone `video-banda.js`): antes, sin JS o con
   movimiento reducido se ve la portada de debajo, recortada como siempre
   en escritorio; en móvil, recortada a 16:9 (la forma del video). */
.proyecto-activo__video{position:absolute;inset:0;width:100%;height:100%;
  object-fit:contain;object-position:center;display:block;opacity:0;
  transition:opacity .3s}
.proyecto-activo__video.reproduciendo{opacity:1;background:var(--gc-white)}
/* El botón de pausa lo crea `video-banda.js` (WCAG 2.2.2): sin JS no hay video
   que pausar. Blanco con icono en `--gc-ink`, como la flecha del carrusel. */
.video-banda__pausa{position:absolute;left:.75rem;bottom:.75rem;z-index:1;
  width:2.5rem;height:2.5rem;border:0;border-radius:50%;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.92);color:var(--gc-ink);box-shadow:var(--sombra-alta)}
.video-banda__pausa:hover{background:var(--gc-white)}
.proyecto-activo__texto{padding:clamp(1.5rem,3vw,2.75rem);display:flex;flex-direction:column;
  gap:.75rem;justify-content:center}
.proyecto-activo__texto h3{font-size:var(--fs-h2);margin:0}
/* F9i-4: el logotipo ocupa el sitio del nombre. Su fondo ya es transparente
   (db/procesar_logo_proyecto.php): `multiply` dejaba la caja gris. */
.proyecto-activo__logo img{height:clamp(5rem,9vw,7rem);width:auto}
.proyecto-activo__texto .ficha{margin:.35rem 0}
.proyecto-activo__acciones{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:.5rem}
/* Varias bandas seguidas necesitan aire entre ellas; con una sola no cambia nada. */
.bandas-proyecto{display:grid;gap:1.5rem}

/* Galería del proyecto agrupada por tipo de imagen. El epígrafe solo aparece
   cuando hay más de un grupo: rotular un grupo único es ruido. */
.grupo-galeria{margin-bottom:1.5rem}
.grupo-galeria h3{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  color:var(--gc-slate);font-family:var(--sans);margin:0 0 .5rem}
.grupo-galeria .tiras{grid-template-columns:repeat(auto-fill,minmax(92px,1fr))}

/* ---------- Contacto ---------- */
.contacto-cuerpo{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:2rem}
/* El formulario de contacto no es el lateral de una ficha: es lo principal de
   la página, así que respira más y los campos cortos van en pareja. */
.tarjeta-contacto--ancha{padding:clamp(1.5rem,3vw,2.25rem)}
.campos-fila{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:.85rem}
.contacto-lateral{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:5rem}
.tarjeta-datos{background:var(--gc-ink);color:#cfdcea;border-radius:var(--r);
  padding:1.5rem;display:flex;flex-direction:column;gap:.75rem}
.tarjeta-datos h2{color:#fff;font-family:var(--sans);font-size:var(--fs-h3);font-weight:600;
  letter-spacing:0;margin:0}
.tarjeta-datos .ayuda{color:#9fb4cb;font-size:var(--fs-small);margin:0;line-height:1.55}
.tarjeta-datos .btn--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.tarjeta-datos .btn--fantasma:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.datos-contacto{display:grid;gap:1rem;margin:0;padding:0}
.datos-contacto dt{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:var(--gc-slate)}
.datos-contacto dd{margin:.15rem 0 0;font-weight:500;color:var(--gc-text);line-height:1.6}
.btn--bloque{width:100%}

/* Mapa diferido. El bloque que se sirve es nuestro: superficie de marca, no un
   hueco gris esperando a que cargue algo de fuera. */
.mapa-diferido,.mapa-marco{width:100%;aspect-ratio:16/7;border:0;border-radius:var(--r);
  display:block}
.mapa-diferido{position:relative;background:var(--gc-ink);display:flex;
  align-items:center;justify-content:center;
  background-image:radial-gradient(circle at 30% 40%,rgba(30,111,196,.35),transparent 55%),
                   radial-gradient(circle at 70% 70%,rgba(14,79,143,.35),transparent 55%)}
.mapa-diferido__play{display:flex;flex-direction:column;align-items:center;gap:.3rem;
  border:0;cursor:pointer;background:rgba(255,255,255,.95);color:var(--gc-ink);
  font-family:var(--sans);font-weight:600;padding:.9rem 1.4rem;border-radius:var(--r);
  box-shadow:var(--sombra-alta);font-size:var(--fs-body)}
.mapa-diferido__play:hover{background:#fff}
.mapa-diferido__play small{font-weight:500;color:var(--gc-slate);text-transform:uppercase;
  letter-spacing:.06em;font-size:.625rem}
@media (max-width:640px){
  .mapa-diferido,.mapa-marco{aspect-ratio:4/3}
}

@media (max-width:900px){
  .contacto-cuerpo{grid-template-columns:1fr}
  /* Pegado arriba estorbaría al llenar el formulario. */
  .contacto-lateral{position:static}
}

/* ---------- Landings ---------- */
/* El formulario es el objetivo de la página, así que va al lado del contenido
   y no al final: en una landing, hacer scroll hasta abajo para encontrarlo es
   perder a la mitad de la gente. */
.landing-cuerpo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,25rem);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;margin-top:2rem}
.landing-lateral{position:sticky;top:5rem}
.titulo-bloque{font-size:var(--fs-h3);font-family:var(--sans);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin:0 0 1.25rem}

.pasos{list-style:none;margin:0;padding:0;display:grid;gap:1.25rem}
.pasos li{display:flex;gap:1rem;align-items:flex-start}
.pasos__n{flex:0 0 auto;width:2.25rem;height:2.25rem;border-radius:999px;
  background:var(--gc-ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.9375rem}
.pasos h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:0;
  color:var(--gc-text);margin:.25rem 0 .35rem}
.pasos p{margin:0;color:var(--gc-slate);line-height:1.65}

/* ---------- Riesgo y respuesta ----------
   Cada riesgo nombrado va SIEMPRE seguido de lo que hacemos para evitarlo.
   Nombrar el riesgo solo asusta; nombrarlo con la respuesta demuestra criterio.
   El filete de la izquierda ata visualmente las dos mitades, para que no se
   puedan leer por separado. */
.riesgos{list-style:none;margin:0;padding:0;display:grid;gap:1.75rem}
.riesgos li{border-left:2px solid var(--gc-line);padding-left:1.25rem}
.riesgos h3{font-family:var(--sans);font-size:1.0625rem;font-weight:600;letter-spacing:0;
  color:var(--gc-text);margin:0 0 .5rem}
.riesgos p{margin:0;color:var(--gc-slate);line-height:1.65}
/* F9i-16: la descripción del riesgo, del cliente, entre el título y la respuesta. */
.riesgos p.riesgos__d{margin:0 0 .6rem;color:var(--gc-text)}
.riesgos__r{display:block;font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;color:var(--gc-blue);margin-bottom:.2rem}

/* Lista de documentos: sobria, con el filete de sección entre filas. */
.documentos{list-style:none;margin:0;padding:0;display:grid;gap:0}
.documentos li{border-top:1px solid var(--gc-line);padding:.85rem 0;
  display:grid;grid-template-columns:minmax(11rem,15rem) 1fr;gap:.35rem 1.5rem}
.documentos li:last-child{border-bottom:1px solid var(--gc-line)}
.documentos b{font-family:var(--sans);font-weight:600;color:var(--gc-text)}
.documentos span{color:var(--gc-slate);line-height:1.6}

@media (max-width:640px){
  .documentos li{grid-template-columns:1fr}
}

@media (max-width:900px){
  .landing-cuerpo{grid-template-columns:1fr}
  /* Pegado arriba estorbaría al leer los pasos. */
  .landing-lateral{position:static;order:-1}
}

/* ---------- Nosotros ---------- */
/* Bloque que abre la página: cuerpo algo mayor. Sin tope de medida desde F9-4. */
.prosa--ancha{font-size:1.125rem;line-height:1.75}
.prosa--ancha strong{color:var(--gc-ink)}

.mision-vision{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(1.5rem,4vw,3rem)}
.mision-vision article{background:var(--gc-white);border:1px solid var(--gc-line);
  border-radius:var(--r);padding:1.75rem}
.mision-vision p{margin:.6rem 0 0;color:var(--gc-text);line-height:1.7}

/* Los valores son tres, con nombre y definición: una lista de definición de
   verdad, no tarjetas disfrazadas. Sin hover: no llevan a ninguna parte. */
.valores{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));
  gap:1.25rem;margin:0;padding:0}
.valor{background:var(--gc-white);border:1px solid var(--gc-line);border-radius:var(--r);
  padding:1.5rem}
.valor dt{font-family:var(--sans);font-size:1.25rem;font-weight:600;color:var(--gc-ink);
  letter-spacing:-.01em}
.valor dd{margin:.5rem 0 0;color:var(--gc-slate);font-size:var(--fs-small);line-height:1.65}

/* ---------- Franja de aliados (F9c) ----------
   Tres tarjetas centradas: logo arriba, nombre abajo, y la tarjeta entera es el
   enlace cuando el aliado tiene web.
   Sin el gris ni la opacidad de F4b: servían para que tres marcas que no se
   eligieron juntas no se vieran como una colcha de retazos a 52px. A este
   tamaño, y con el nombre escrito, lo que hacían era apagarlas —el cliente lo
   leyó como «no se ve»—. El marco blanco igual para todas sigue ordenándolas. */
.aliados{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(1rem,3vw,2rem)}
/* Hilo 8: cinco aliados con AFFI. Con la base fija de 16.5rem (F9i-6, pensada
   para cuatro) el quinto caía solo en una segunda fila. Ahora crecen desde
   11rem y topan en 16.5rem: los cinco caben en una fila en los 1200px del
   contenedor (~206px cada uno), y en móvil siguen de uno en uno. */
.aliado{flex:1 1 11rem;max-width:16.5rem;display:flex}
.aliado__enlace{flex:1;display:flex;flex-direction:column;background:var(--gc-white);
  border:1px solid var(--gc-line);border-radius:var(--r);overflow:hidden;
  color:var(--gc-text);text-decoration:none;transition:box-shadow .2s ease}
a.aliado__enlace:hover{box-shadow:var(--sombra-alta)}
/* Altura fija del área: los logos tienen proporciones distintas —varios son
   horizontales— y así las tarjetas quedan iguales y los nombres alineados. */
/* 12rem (era 15): con la tarjeta a ~206px de ancho, 15rem la dejaba más alta que
   ancha y el logo horizontal flotaba en blanco. */
.aliado__logo{height:12rem;padding:1.5rem;display:flex;align-items:center;justify-content:center}
/* `contain` y no medidas automáticas: un raster se pinta a su tamaño natural
   —232px el de PE— y al lado del SVG, que escala, parecía más pequeño sin que
   ninguna regla lo dijera. Así todos llenan el mismo área. */
.aliado__logo img{width:100%;height:100%;object-fit:contain;display:block}
/* Logotipo blanco sobre negro. El archivo trae el negro dentro, así que además
   del fondo oscuro hace falta `screen`: mezcla el negro con el azul del
   contenedor —desaparece— y deja solo el trazo blanco. */
.aliado--oscuro .aliado__logo{background:var(--gc-ink)}
.aliado--oscuro .aliado__logo img{mix-blend-mode:screen}
/* Hilo 6: logo claro que ya trae transparencia (Alianza). No hay negro que
   borrar, y `screen` aclararía sus azules: se pinta tal cual. */
.aliado--alfa .aliado__logo img{mix-blend-mode:normal}
.aliado__nombre{padding:.85rem 1rem;border-top:1px solid var(--gc-line);text-align:center;
  font-size:var(--fs-body);font-weight:500;color:var(--gc-ink)}
/* La flecha dice «esto sale del sitio» sin cartel; solo en los que son enlace. */
a.aliado__enlace .aliado__nombre::after{content:' ↗';color:var(--gc-blue-lit)}
a.aliado__enlace:hover .aliado__nombre{color:var(--gc-blue-lit)}

/* Cierre: contacto sobre azul profundo. Es el final del recorrido, no una
   sección más; el cambio de superficie lo dice sin necesidad de decirlo. */
.bloque-contacto{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:center;background:var(--gc-ink);color:#cfdcea;
  border-radius:var(--r);padding:clamp(1.75rem,4vw,3rem);margin-top:3.5rem}
.bloque-contacto h2{color:#fff}
.bloque-contacto p{margin:0 0 .75rem}
.bloque-contacto a{color:#fff}
.bloque-contacto .btn--fantasma{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.bloque-contacto .btn--fantasma:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
.contacto-datos{list-style:none;margin:0;padding:0;display:grid;gap:.85rem}
.contacto-datos dt{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:600;color:#9fb4cb}
.contacto-datos dd{margin:.1rem 0 0;font-weight:500;color:#fff}
.contacto-acciones{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:1.25rem}

@media (max-width:900px){
  .proyecto-activo{grid-template-columns:1fr}
  .proyecto-activo__figura{min-height:0;aspect-ratio:4/3}
  /* Hilo 13: en una columna el recuadro toma la forma del video, así que en
     móvil no hay bandas: se ve entero y de borde a borde. */
  .proyecto-activo__figura--video{aspect-ratio:16/9}
  .bloque-contacto{grid-template-columns:1fr}
}

/* ============================================================
   Responsive — hasta 360px
   ============================================================ */
@media (max-width:900px){
  .rejilla-inmuebles{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}

  /* El menú se pliega tras el botón SOLO si `nav.js` corrió: es él quien pone
     .menu--plegable. Sin JS el menú se queda visible y en bloque, que es feo
     pero navegable. Antes esto era `.menu{display:none}` a secas y el sitio
     entero se quedaba sin navegación en móvil. */
  .cabecera-in{flex-wrap:wrap;gap:.75rem 1rem;padding-top:.6rem;padding-bottom:.6rem}
  .nav__boton{display:inline-flex}
  .menu{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:.15rem}
  .menu > a,.submenu__boton{padding:.7rem .75rem;width:100%;justify-content:flex-start}
  .menu > .btn{justify-content:center;margin-top:.35rem}
  .menu--plegable{display:none}
  .menu--plegable.abierto{display:flex}
  /* Dentro de la columna, el panel de Servicios va indentado y en el flujo:
     un desplegable absoluto encima de la lista taparía los enlaces de abajo. */
  .submenu--plegado{width:100%}
  .submenu__panel{position:static;min-width:0;border:0;box-shadow:none;padding:0 0 0 .75rem;
    background:none}
  .submenu__panel a{padding:.55rem .75rem}
}
@media (max-width:440px){
  /* Cinco columnas con cifras que no parten no caben en 390px y empujaban
     la página entera hacia el desbordamiento horizontal. Se reparte en dos
     filas de 3 + 2, conservando los filetes verticales dentro de cada fila. */
  .ficha{flex-wrap:wrap}
  .ficha > div{flex:1 1 30%;min-width:30%;padding:.5rem .3rem;text-align:center}
  .ficha > div:first-child{text-align:center;padding-left:.3rem}
  .ficha > div:nth-child(3n+1){border-left:0}
  .ficha dt,.ficha .et{font-size:.5625rem;letter-spacing:.06em}
}

@media (max-width:640px){
  /* Dos por fila mientras la tarjeta aguante: con la tarjeta vertical, una
     sola columna obliga a un scroll larguísimo para ver cuatro inmuebles. */
  .rejilla-inmuebles{grid-template-columns:repeat(2,1fr);gap:.85rem}
  .cabecera-in{min-height:3.75rem}
  .orden{margin-left:0;width:100%}

  /* Los filtros van a hoja inferior, a pulgar, no en modal a pantalla completa. */
  .abrir-filtros{display:inline-flex;width:100%;justify-content:center}
  .filtros{
    position:fixed;left:0;right:0;bottom:0;top:auto;z-index:60;margin:0;
    border-radius:12px 12px 0 0;border-bottom:0;max-height:85vh;overflow-y:auto;
    transform:translateY(101%);transition:transform .25s ease;
    box-shadow:0 -8px 32px rgba(10,55,99,.25);padding-bottom:1.5rem;
  }
  .filtros.abierta{transform:none}
  .filtros__asa{display:block;width:2.5rem;height:.25rem;border-radius:999px;
    background:var(--gc-line);margin:0 auto .9rem}
  .velo{position:fixed;inset:0;background:rgba(10,55,99,.35);z-index:55;opacity:0;
    pointer-events:none;transition:opacity .25s}
  .velo.visible{opacity:1;pointer-events:auto}
  .filtros .campo{min-width:100%}
}
.filtros__asa{display:none}

/* Una sola columna por debajo de 500px.
   Va DESPUÉS del bloque de 640px a propósito: con la misma especificidad manda
   el último, y si se sube arriba el de 640 lo pisa y vuelven las dos columnas.
   Se probó a dos y no aguanta: con la tarjeta de ~160px las etiquetas de la
   ficha catastral se montan una encima de otra («ESTRATOHAB») y el sufijo
   «/mes» del precio se sale de la tarjeta. La ficha catastral es el elemento
   firma: antes que dejarla ilegible, se sacrifica densidad. */
@media (max-width:500px){
  .rejilla-inmuebles{grid-template-columns:1fr;gap:1.1rem}
  /* Con la tarjeta otra vez ancha, las cinco celdas caben en una sola fila. */
  .tarjeta .ficha{flex-wrap:nowrap}
  .tarjeta .ficha > div{flex:1 1 auto;min-width:0;padding:.55rem .35rem;text-align:center}
  .tarjeta .ficha > div:nth-child(3n+1){border-left:1px solid var(--gc-line)}
  .tarjeta .ficha > div:first-child{border-left:0;text-align:left;padding-left:0}
}

/* ---------- parrilla de tres (F9-2) ----------
   Sustituye a la de cuatro de F8-5. Pedido del cliente: «Proyectos» del home,
   «Entregados» y «Desde 2009 en Bogotá». Columnas FIJAS y no `auto-fill`: con
   `minmax()` el número de columnas lo decide el ancho de ventana y no el diseño.
   Dos columnas por debajo de 761px: a tres, la tarjeta baja de los 220px que
   aguanta la ficha catastral. Va al final del archivo a propósito — tiene la
   misma especificidad que las reglas de `.rejilla-inmuebles` y necesita ser la
   última en hablar. */
.rejilla--tres{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:760px){
  .rejilla--tres{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:500px){
  .rejilla--tres{grid-template-columns:1fr}
}

/* ---------- barra delgada de filtros al bajar (F9e-1) ----------
   Sustituye al panel pegajoso de F9d-4, que se pegaba entero: ~300px ocupando
   media pantalla de justo aquello que el visitante había bajado a mirar. Aquí
   solo viaja el resumen —«Todos» si no hay filtros, la concatenación si los hay—.

   FIJA y no pegada al flujo: un elemento `sticky` invisible sigue ocupando su
   hueco entre el panel y los resultados, así que abriría un vacío permanente.
   Fija no ocupa nada y se comporta como la cabecera, que es lo que hay encima.
   `top:4.5rem` es el alto de esa cabecera y `z-index:30` la deja pasar por
   encima (ella va a 40).

   Nace `hidden` desde el servidor y la enciende el JS: sin script el catálogo
   tiene que verse entero (regla de F4a), y una ayuda de navegación no es
   contenido. Y hasta que no está fijada no se ve: en reposo repetiría el
   renglón que ya vive dentro del panel, unos centímetros más arriba. */
.barra-filtros{position:fixed;left:0;right:0;top:4.5rem;z-index:30;
  background:var(--gc-white);border-bottom:1px solid var(--gc-line);
  box-shadow:var(--sombra);
  opacity:0;transform:translateY(-.5rem);pointer-events:none;
  transition:opacity .18s ease,transform .18s ease}
.barra-filtros.pegada{opacity:1;transform:none;pointer-events:auto}
.barra-filtros__in{max-width:var(--ancho);margin:0 auto;padding:.5rem 1.25rem;
  display:flex;align-items:center;gap:.5rem .85rem;flex-wrap:wrap;
  font-size:var(--fs-small);color:var(--gc-slate);line-height:1.4}
.barra-filtros b{color:var(--gc-ink);font-weight:600}
/* En móvil manda la hoja inferior a pulgar con su botón, y el alto de pantalla
   es todavía más escaso que en escritorio. */
@media (max-width:640px){.barra-filtros{display:none}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .revelar{opacity:1;transform:none}
}

/* Solo para lectores de pantalla. Faltaba: la usaban los chips desde F4a y el
   texto «Quitar filtro» se veía en pantalla (lo cazó JuanJo en F9h). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* F9i-10: el cliente veía la página de Proyectos «vacía». Con dos secciones y
   el cierre, los 3.5rem de cada franja sumaban más aire que contenido. Solo en
   esta página: en el home y en Nosotros el mismo aire separa más bloques. */
.pagina-proyectos .franja{padding-top:2rem}
.pagina-proyectos .franja .regla-seccion{margin-bottom:1.5rem}
.pagina-proyectos .bloque-contacto{margin-top:2.5rem}