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

/* ---------- fuentes autohospedadas (nada de CDN) ---------- */
@font-face{
  font-family:'Fraunces';
  src:url('../fonts/fraunces-latin.woff2') format('woff2-variations');
  font-weight:300 700;
  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;
}
@font-face{
  font-family:'Figtree';
  src:url('../fonts/figtree-latin.woff2') format('woff2-variations');
  font-weight:300 900;
  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:#0E4F8F;
  --gc-blue-lit:#1E6FC4;
  --gc-slate:#636466;
  --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;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;

  --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 ---------- */
h1,h2,h3{
  font-family:var(--serif);
  /* Sin la wonk: vuelve caprichosa la serif y aquí sobra. */
  font-variation-settings:'SOFT' 20,'WONK' 0;
  font-weight:600;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}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:1.25}
p{margin:0 0 1rem}
.entradilla{font-size:1.1875rem;color:var(--gc-slate);max-width:44ch}
.etiqueta{
  font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;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:700}
/* «Contáctanos» es un botón azul lleno: la regla de arriba le ponía texto azul
   sobre fondo azul y en contacto.php el botón salía en blanco. */
.menu .btn[aria-current=page]{color:#fff;background:var(--gc-ink);border-color:var(--gc-ink)}

/* ---------- 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:600;
  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:700;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:700;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:600;
  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:700;color:var(--gc-slate);margin-bottom:.15rem}
.ficha dd,.ficha .val{margin:0;font-size:.9375rem;font-weight:600;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:700;text-transform:uppercase;letter-spacing:.06em;background:rgba(10,55,99,.92);
  color:#fff;backdrop-filter:saturate(1.4)}
.sello--arriendo{background:rgba(14,79,143,.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:700;color:var(--gc-slate)}
.tarjeta__titulo{font-size:1.0625rem;line-height:1.3;margin:0;font-family:var(--sans);
  font-weight:600;color:var(--gc-text);letter-spacing:0}
.tarjeta__titulo a{color:inherit;text-decoration:none}
.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:700;color:var(--gc-ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em;line-height:1.2}
.precio small{font-size:.75rem;font-weight:600;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. */
.precio small + small{display:block;margin-left:0;margin-top:.1rem}
.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:700;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 dos columnas — para foto vertical.
   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: en línea, sobre papel blanco, a la altura del titular. */
.buscador-hero{display:flex;gap:.75rem;flex-wrap:wrap;align-items:end;background:var(--gc-white);
  border:1px solid var(--gc-line);border-radius:var(--r);padding:.9rem 1rem;
  box-shadow:var(--sombra)}
/* 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 botón crece hasta llenar lo que quede de su fila. Los tres campos más el
   botón no caben en una sola línea sin volver a estrechar los `select`, así
   que el botón envuelve; y envuelto a lo ancho se lee como la acción del
   panel, no como un resto que sobró al final. */
.buscador-hero .btn{flex:1 1 8rem}

@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 ---------- */
.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)}
.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}
.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}
.pie-filtros{display:flex;gap:.85rem;align-items:center;flex-wrap:wrap;margin-top:.85rem}

/* ---------- resultados ---------- */
.barra-resultados{display:flex;gap:1rem;align-items:center;flex-wrap:wrap;margin-bottom:1.25rem}
.contador{font-family:var(--serif);font-variation-settings:'SOFT' 20,'WONK' 0;
  font-size:1.375rem;font-weight:600;color:var(--gc-ink);font-variant-numeric:tabular-nums}
.chips-activos{display:flex;gap:.4rem;flex-wrap:wrap}
.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:700;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:700}
.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:600}

.ficha-encabezado{display:flex;gap:2rem;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;margin-bottom:1.5rem}
.ficha-encabezado h1{font-size:var(--fs-h2);margin:.35rem 0 .5rem;max-width:22ch}
.ficha-ubicacion{color:var(--gc-slate);font-size:var(--fs-body);margin:0;max-width:44ch}

.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:700;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:700;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. */
.ficha-galeria{margin:0 0 2.5rem;display:grid;gap:.6rem;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
.ficha-galeria .escena{max-height:min(66vh,620px)}
.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:700;
  font-size:var(--fs-small);padding:.5rem .9rem;border-radius:999px;box-shadow:var(--sombra)}
.escena__abrir:hover{background:#fff}

.mosaico{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.mosaico__foto{position:relative;border:0;padding:0;cursor:pointer;overflow:hidden;
  border-radius:var(--r);background:var(--gc-paper);aspect-ratio:3/4;
  max-height:calc((min(66vh,620px) - .6rem) / 2)}
.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:700;
  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:700;color:var(--gc-slate)}
.datos-secundarios dd{margin:.15rem 0 0;font-weight:600;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:700;margin:0 0 1rem}
.prosa{max-width:64ch;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:700;
  padding:.9rem 1.4rem;border-radius:var(--r);box-shadow:var(--sombra-alta)}
.video-diferido__play small{font-weight:600;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:700;
  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:600}
.respuesta-form.mal{color:#a3241a;font-weight:600}

/* ---------- 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. */
  .ficha-galeria{grid-template-columns:1fr}
  .ficha-galeria .escena{max-height:min(62vh,560px)}
  .mosaico{grid-template-columns:repeat(4,1fr)}
  .mosaico__foto{max-height: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:600;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:700}
.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}
.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}
.encabezado-seccion p{color:var(--gc-slate);margin:.5rem 0 0;max-width:54ch}

/* 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:700;text-decoration:none;white-space:nowrap}
.hero-dos__marca{font-size:var(--fs-label);text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;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:700;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:700;
  color:var(--gc-blue);text-decoration:none}
.servicio__ir::after{content:'';position:absolute;inset:0}
.servicio:hover .servicio__ir{color:var(--gc-blue-lit)}

/* 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)}
.proyecto-activo__figura img{width:100%;height:100%;object-fit:cover;display:block}
.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}
.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:700;
  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:700;color:var(--gc-slate)}
.datos-contacto dd{margin:.15rem 0 0;font-weight:600;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:700;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:600;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:700;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:700;font-size:.9375rem}
.pasos h3{font-family:var(--sans);font-size:1.0625rem;font-weight:700;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:700;letter-spacing:0;
  color:var(--gc-text);margin:0 0 .5rem}
.riesgos p{margin:0;color:var(--gc-slate);line-height:1.65}
.riesgos__r{display:block;font-size:var(--fs-label);text-transform:uppercase;
  letter-spacing:.08em;font-weight:700;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:700;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 ---------- */
/* La prosa normal se corta en 64ch para que la línea no canse. Aquí el bloque
   es el que abre la página y va solo, así que aguanta algo más de medida sin
   volverse un muro. */
.prosa--ancha{max-width:72ch;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(--serif);font-variation-settings:'SOFT' 20,'WONK' 0;
  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. Altura uniforme y gris; el color entra al pasar el cursor.
   Con logos de marcas distintas —trazos, colores y pesos que no se eligieron
   juntos—, el gris es lo que impide que la franja se vea como una colcha de
   retazos al lado de la disciplina cromática del resto del sitio. */
.aliados{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;
  align-items:center;justify-content:flex-start;gap:clamp(1.5rem,4vw,3.5rem)}
/* Todos los aliados llevan el mismo padding y la misma altura, tengan fondo o
   no: así el que sí lo lleva se lee como una decisión y no como un parche. */
/* Fondo blanco también en los claros: los tres archivos traen su propio fondo
   dentro, así que sin esto se veían dos rectángulos blancos flotando sobre el
   papel gris y uno azul. Como fichas iguales, la franja se lee entera. */
.aliado{padding:.75rem 1rem;border-radius:var(--r);display:flex;align-items:center;
  background:var(--gc-white);border:1px solid var(--gc-line)}
/* 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. Sin esto se vería un
   cuadro negro dentro de un cuadro azul. */
.aliado--oscuro{background:var(--gc-ink);border-color:var(--gc-ink)}
.aliado--oscuro img{mix-blend-mode:screen}
/* 4.5rem y no 3.25: los tres logos son cuadrados y traen su propio aire dentro,
   así que a 52px la marca real medía la mitad y la franja se leía como tres
   sellos sueltos en medio de la página. */
.aliado img{height:4.5rem;width:auto;display:block;filter:grayscale(1);opacity:.65;
  transition:filter .2s ease,opacity .2s ease}
.aliado:hover img,.aliado:focus-within img{filter:grayscale(0);opacity:1}

/* 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:700;color:#9fb4cb}
.contacto-datos dd{margin:.1rem 0 0;font-weight:600;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}
  .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}
}

@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}
}