/* Hoja de estilo del sitio de WAR Propiedades.
   Extraída del <style> de la portada el 7-sep-2026 para que la compartan la
   portada, los listados, la ficha y las páginas nuevas: un solo lugar donde
   ajustar tipografía y color, en vez de tres copias que se van separando. */
/* ============ Tokens ============ */

/* ===== Indicadores económicos diarios ===== */
.indic{
  position:fixed; inset:0 0 auto 0; z-index:51; height:34px;
  /* La franja va en ARENA (paleta rev3, pedido de Javiera): es la primera cosa
     que se ve y ancla el color de marca antes de la barra azul. Sobre arena
     ningun token claro sirve, asi que redefine los suyos: azul 7,84 · azul
     apagado 4,89 · cafe hondo 5,61. */
  background:var(--arena);
  --bone:#123346; --bone-dim:#375262; --copper-soft:#663B24;
  border-bottom:1px solid rgba(18,51,70,.20);
  font-size:.75rem; color:var(--bone-dim);
}
.indic .wrap{
  display:flex; align-items:center; gap:1.25rem; height:34px; overflow:hidden;
}
.indic dl{ display:flex; align-items:baseline; gap:.42rem; margin:0; }
.indic dt{ letter-spacing:.09em; text-transform:uppercase; font-size:.68rem; color:var(--bone-dim); }
.indic dd{
  margin:0; font-variant-numeric:tabular-nums; font-weight:700; color:var(--bone);
}
.indic-rotulo{ font-weight:700; letter-spacing:.12em; text-transform:uppercase; font-size:.68rem; color:var(--bone); }
.indic .fecha{ margin-left:auto; font-size:.7rem; color:var(--bone-dim); }
.indic .fuente{ color:var(--copper-soft); border-bottom:1px solid currentColor; }
.indic[data-estado="cargando"] dd{ opacity:.45; }
.indic[data-estado="referencial"] .fecha{ color:var(--copper-soft); }
/* Equivalencia en pesos bajo el precio en UF de cada tarjeta */
/* `--muted` no existe: caía siempre al gris de respaldo, que daba 4,38 sobre la
   banda oscura (ya por debajo del mínimo) y 3,24 sobre papel. Atado al token que
   sí cambia con la banda: 7,0 en oscuro y 5,6 en claro. */
.prop-clp{ display:block; margin-top:.15rem; font-size:.85rem; color:var(--bone-dim); font-variant-numeric:tabular-nums; }
@media (max-width:640px){
  .indic .wrap{ gap:1rem; }
  .indic-rotulo, .indic .fecha, .indic dl:nth-of-type(3), .indic dl:nth-of-type(4){ display:none; }  /* en una linea solo caben UF y USD */
}

/* ===== Pie: jerarquia y contacto accionable (4-ago-2026) ===== */
/* Las listas quedaron muy aireadas al subir los objetivos tactiles a 44px:
   aca se recupera el ritmo con padding en vez de altura minima. */
.footer ul li{ min-height:0; }
.footer ul li a{ min-height:0; padding:.34rem 0; line-height:1.3; }
.footer ul{ display:grid; gap:.1rem; }
.f-sub{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); opacity:.75; }
/* inline-flex (de los objetivos tactiles) ponia el subtitulo AL LADO y centraba
   los telefonos: los enlaces del pie apilan y se alinean a la izquierda. */
.f-wa{ flex-direction:row !important; align-items:center !important; }
.f-tels a{ padding:.3rem 0; }
.f-wa{ display:inline-flex !important; align-items:center; gap:.5rem; color:var(--copper-soft) !important; font-weight:600; }
.f-wa svg{ width:17px; height:17px; fill:currentColor; flex:none; }
@media (hover:hover) and (pointer:fine){ .f-wa:hover{ color:var(--copper) !important; } }

/* ===== Profundidad de fondo (4-ago-2026) =====
   Los rellenos planos se ven baratos. Se suman tres capas suaves: textura de
   puntos, halo superior y lavados de color por seccion en posiciones distintas,
   para que ninguna banda quede igual a la anterior. Todo en %, sin desbordes. */
body{
  background-image:
    radial-gradient(rgba(249,248,248,.030) 1px, transparent 1.4px),
    radial-gradient(120% 78% at 50% 0%, rgba(205,134,96,.09), transparent 58%);
  background-size:26px 26px, 100% 100%;
  background-attachment:fixed, scroll;
}
.band, .zone{ position:relative; overflow:hidden; }
.band > .wrap, .zone > .wrap{ position:relative; z-index:1; }
.band::before{
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
}
/* Bandas OSCURAS: café y azul en esquinas opuestas, alternando el lado. */
.band-dark:nth-of-type(odd)::before{
  background:
    radial-gradient(58% 62% at 88% 8%, rgba(205,134,96,.13), transparent 62%),
    radial-gradient(52% 58% at 6% 92%, rgba(23,79,115,.16), transparent 64%);
}
.band-dark:nth-of-type(even)::before{
  background:
    radial-gradient(56% 60% at 10% 10%, rgba(205,134,96,.11), transparent 62%),
    radial-gradient(54% 58% at 92% 88%, rgba(23,79,115,.14), transparent 64%);
}
/* La banda azul ya trae color: se le da relieve, no mas tinte. */
.band-dark.green::before{
  background:
    radial-gradient(70% 70% at 50% -10%, rgba(249,248,248,.07), transparent 60%),
    radial-gradient(46% 52% at 88% 96%, rgba(205,134,96,.12), transparent 62%);
}
/* Bandas CLARAS: el mismo recurso, muy diluido, y una base con gradiente. */
.band-light{ background:linear-gradient(168deg, #FDFDFD 0%, var(--light) 58%, #F3F1EC 100%); }
.band-light:nth-of-type(odd)::before{
  background:
    radial-gradient(50% 56% at 92% 6%, rgba(205,134,96,.10), transparent 60%),
    radial-gradient(46% 52% at 4% 94%, rgba(18,51,70,.07), transparent 62%);
}
.band-light:nth-of-type(even)::before{
  background:
    radial-gradient(48% 54% at 6% 8%, rgba(205,134,96,.085), transparent 60%),
    radial-gradient(44% 50% at 94% 92%, rgba(18,51,70,.06), transparent 62%);
}
/* Franja de la zona: hairline de café arriba para separarla de la anterior. */
.zone::after{
  content:''; position:absolute; inset:0 0 auto 0; height:1px; z-index:1;
  background:linear-gradient(90deg, transparent, rgba(125,74,46,.42), transparent);
}
@media (prefers-reduced-motion:reduce){ body{ background-attachment:scroll, scroll; } }

/* --- Pie: bloque FINAL de contacto. Va al final y con selectores especificos
   porque las reglas previas se pisaban entre si por orden. --- */
.footer ul li.f-mapa > a{ display:block; padding:.34rem 0; }
.footer ul li.f-tels{ display:block; min-height:0; padding-top:.25rem; }
.footer ul li.f-tels > a{ display:inline-block; min-height:0; padding:.18rem 0; margin-right:1.15rem; }
.f-sub{ display:block; font-size:.72rem; letter-spacing:.06em; text-transform:uppercase; color:var(--bone-dim); opacity:.75; }

/* ===== Mejoras de usabilidad (4-ago-2026) ===== */
/* 1. Objetivos táctiles: 58 de 66 medían menos de 44px y este sitio se usa
      sobre todo desde el teléfono, donde el CTA es WhatsApp. */
.nav-links a, .footer a, .footer ul li a, .footer-social a,
.active-chips .ac, .active-chips .clear, .prop-body h3 a,
.mobile-menu a, .filters label, .footer-bottom a{
  display:inline-flex; align-items:center; min-height:44px;
}
.footer ul li{ display:flex; align-items:center; min-height:38px; }
/* Los select y botones de filtro también se tocan con el dedo */
.filters select, .filters .btn, .filters input, .op-toggle button{ min-height:44px; }

/* 2. Una sola escala de radios (había 5 valores sueltos: 2, 3, 10, 13, 999). */
:root{ --r-xs:6px; --r-sm:10px; --r-md:14px; --r-pill:999px; }

/* 3. Sin scroll horizontal accidental: faltaba el candado en el body. */
html, body{ overflow-x:hidden; }

/* 4. El foco de teclado tiene que verse (navegación con tabulador). */
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible{
  outline:3px solid var(--copper); outline-offset:3px; border-radius:var(--r-xs);
}
:root{
  /* PALETA OFICIAL WAR (rev3, 10-sep-2026, pedida por Javiera):
     azul #123346 · café #7D4A2E · arena #CFC7AF · blanco #F9F8F8 · grafito #262725.
     Sustituye a la rev2 (verde · ámbar · cobre · hueso) peldaño por peldaño, con la
     MISMA luminosidad en cada uno, así que los cuarenta componentes pensados para
     banda oscura y banda clara siguen valiendo sin reescribir una sola regla.
     Los oscuros son el mismo azul oficial bajado de luminosidad (H202 S58%), no un
     gris azulado inventado. El café oficial está al 33% de luminosidad y sobre el
     azul no llega a 4,5, así que el acento SOBRE OSCURO es el café aclarado; el
     oficial se usa donde vive bien, sobre papel. Contrastes medidos:
     blanco 15,7 · arena 9,9 · café aclarado 5,70 · azul sobre papel 12,5 ·
     café sobre papel 6,85 (AA en todos). */
  --azul:#123346;          /* azul oficial, tal cual el logotipo */
  --grafito:#262725;       /* grafito oficial */
  --arena:#CFC7AF;         /* arena oficial: texto secundario sobre oscuro (9,9) */
  --bg:#0C202C;            /* azul oficial al 11% de luminosidad */
  --bg-2:#112F40;
  --line:rgba(249,248,248,.12);
  --bone:#F9F8F8;          /* blanco oficial: texto sobre oscuro (15,7) */
  --bone-dim:#BDB8AB;      /* arena apagada: secundario sobre oscuro (8,4) */
  --copper:#CD8660;        /* café ACLARADO: acento sobre oscuro (5,70) */
  --copper-soft:#D69C7C;
  /* secciones claras */
  --light:#F9F8F8;         /* blanco oficial */
  --light-2:#ffffff;
  --ink:#123346;           /* azul oficial: texto sobre claro (12,5) */
  --ink-dim:#506C7C;       /* azul apagado: secundario sobre claro (5,24) */
  --line-light:rgba(18,51,70,.13);
  --copper-ink:#7D4A2E;    /* café oficial: acento sobre claro (6,85) */
  --radius:14px;
  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Manrope',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--bone);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
body::after{content:"";position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--font-display);letter-spacing:-.02em;line-height:1.08;font-weight:600}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
section{position:relative}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:3px}
::selection{background:rgba(205,134,96,.3);color:#fff}
/* Barra de progreso de scroll (CSS scroll-driven, sin listeners) */
.scrollbar{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--copper),var(--copper-soft));animation:growProgress linear both;animation-timeline:scroll(root)}
@keyframes growProgress{to{transform:scaleX(1)}}

/* ============ Bandas claro / oscuro ============ */
.band{padding:100px 0}
.band-light{
  background:var(--light);color:var(--ink);
  /* La clienta encontró el sitio demasiado oscuro (4-sep-2026): el 74% de la
     página lo era. En vez de reescribir las cuarenta reglas que dan por hecho
     un fondo oscuro, la banda clara REDEFINE los mismos tokens con su variante
     clara del manual de marca, y cada componente de dentro se aclara solo.
     Las piezas que van sobre FOTOGRAFÍA (los sellos, los chips del territorio)
     llevan color propio más abajo: ésas no siguen el tema de la banda. */
  --bg:var(--light);
  --bg-2:var(--light-2);
  --bone:var(--ink);            /* azul oficial sobre papel: 12,5 */
  --bone-dim:var(--ink-dim);
  --line:var(--line-light);
  --copper:var(--copper-ink);   /* el café aclarado sobre papel da 2,76; el oficial 6,85 */
  --copper-soft:#663B24;
}
.band-dark{color:var(--bone);overflow:hidden}
.band-dark.green{background:
  radial-gradient(900px 620px at 106% 2%, rgba(26,72,104,.5), transparent 60%),
  linear-gradient(180deg,#0B1D28 0%,#102C3C 55%,#0B1D28 100%)}

/* ===== Banda ARENA =====
   El arena oficial no es un fondo de texto: sobre él, el papel y el blanco casi
   no se ven (1,6) y el café oficial se queda en 4,30. La banda redefine sus
   tokens con los tonos que sí llegan a AA —azul de marca 7,84 · azul apagado
   4,89 · café hondo 5,61— y el resto de las reglas de `band-light` siguen
   valiendo, porque la sección conserva las DOS clases. */
.band-arena{
  background:var(--arena);
  --bg:var(--arena);
  --bone:#123346;
  --bone-dim:#375262;
  --line:rgba(18,51,70,.20);
  --copper:#663B24;
  --copper-soft:#5B3420;
}
/* Los lavados de color de band-light se dibujan para fondo casi blanco: sobre
   arena ensucian. La banda arena ya tiene color propio. */
.band-arena::before{ display:none; }

/* Las tarjetas traían el degradado azul de la banda oscura. En banda clara
   toman la misma superficie y la misma sombra que las tarjetas que YA vivían en
   claro (.stat-card), para no dejar 110 cajas oscuras flotando sobre papel. */
.band-light .prop,
.band-light .svc,
.band-light .post{
  background:var(--light-2);
  box-shadow:0 14px 34px -26px rgba(10,38,55,.5);
}
.band-light .owners-copy{
  background:
    radial-gradient(480px 320px at 8% -10%, rgba(125,74,46,.10), transparent 65%),
    var(--light-2);
}
/* El café aclarado escrito a mano pasa al oficial: sobre papel el claro casi no se ve. */
.band-light .prop:hover{border-color:rgba(125,74,46,.45)}
.band-light .post:hover{border-color:rgba(125,74,46,.5)}
.band-light .picon{background:rgba(125,74,46,.10);border-color:rgba(125,74,46,.30)}
.band-light .btn-copper{box-shadow:0 10px 24px -12px rgba(125,74,46,.55),inset 0 1px 0 rgba(255,255,255,.28)}
.band-light .btn-copper:hover{box-shadow:0 16px 30px -12px rgba(125,74,46,.65),inset 0 1px 0 rgba(255,255,255,.32)}

/* Rellenos y bordes escritos como rgba fijo: no siguen al token, hay que
   darles su versión clara a mano. */
.band-light .btn-ghost{background:rgba(18,51,70,.05)}
.band-light .btn-ghost:hover{background:rgba(18,51,70,.10);border-color:rgba(18,51,70,.26)}
.band-light .op-toggle{background:rgba(18,51,70,.05)}
.band-light .filters select,
.band-light .filters .search input{background-color:var(--light-2)}
.band-light .filters select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23506C7C' stroke-width='2' fill='none'/%3E%3C/svg%3E")}
.band-light .tog-cerradas:hover{border-color:rgba(18,51,70,.28)}
.band-light .active-chips .ac{background:rgba(125,74,46,.10);border-color:rgba(125,74,46,.42)}

/* Curvas de nivel (textura de marca) solo en bandas oscuras */
.topo{position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='900' viewBox='0 0 900 900' fill='none' stroke='%23E9E4D6' stroke-opacity='.08' stroke-width='1.4'%3E%3Cg id='r'%3E%3Cpath d='M450 50 C 650 60, 840 230, 830 450 C 820 670, 640 850, 440 845 C 240 840, 70 660, 65 455 C 60 250, 250 40, 450 50 Z'/%3E%3C/g%3E%3Cuse href='%23r' transform='translate(450 450) scale(.82) translate(-450 -450)'/%3E%3Cuse href='%23r' transform='translate(450 450) scale(.64) translate(-450 -450)'/%3E%3Cuse href='%23r' transform='translate(450 450) scale(.47) translate(-460 -440)'/%3E%3Cuse href='%23r' transform='translate(450 450) scale(.31) translate(-470 -435)'/%3E%3Cuse href='%23r' transform='translate(450 450) scale(.17) translate(-480 -425)'/%3E%3C/svg%3E")}

/* ============ Reveals ============ */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  *{transition:none!important;animation:none!important}
}

/* ============ Encabezado de sección ============ */
/* Las cabeceras de sección van CENTRADAS: alineadas a la izquierda, un h2 de dos
   líneas dejaba media banda vacía a la derecha. */
.sec-head{margin:0 auto 46px;max-width:62ch;text-align:center}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);text-wrap:balance}
.sec-head .lead{margin:14px auto 0;font-size:1.02rem;max-width:56ch;text-wrap:pretty}

/* ===== Separador de marca =====
   Cada sección abre con la CRESTA DE MONTAÑA de la A del logotipo sobre una línea
   de horizonte. Es la pieza que identifica a WAR, así que la separación entre
   secciones no es un adorno genérico: es su marca repitiéndose.
   Va como máscara para que el MISMO archivo tome café aclarado en banda oscura y café oficial en
   banda clara. Ojo: una máscara SVG está sujeta a CORS (por file:// no carga), y si
   el navegador no soporta máscaras quedaría una barra de color sólido — por eso el
   color sólo se pinta dentro del @supports. */
.sec-head::before, .cat-head::before{
  content:""; display:block; width:min(420px,78%); aspect-ratio:940/74;
  margin:0 auto 22px; background-color:transparent;
}
@supports ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .sec-head::before, .cat-head::before{
    background-color:var(--copper);
    -webkit-mask:url(/img/cresta-sep.svg) no-repeat center/100% 100%;
            mask:url(/img/cresta-sep.svg) no-repeat center/100% 100%;
  }
  .band-light .sec-head::before, .band-light .cat-head::before{background-color:var(--copper-ink)}
}
/* Con la cresta arriba, los filetes del rótulo sobran. */
.sec-head .eyebrow::before, .cat-head .eyebrow::before{display:none}
.band-light .sec-head .lead{color:var(--ink-dim)}
.band-dark .sec-head .lead{color:var(--bone-dim)}
.eyebrow{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--copper);margin-bottom:16px;display:inline-flex;align-items:center;gap:11px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.55}
/* El café aclarado sobre papel da 2,76: en banda clara el rótulo va en café oficial (6,85). */
.band-light .eyebrow{color:var(--copper-ink)}

/* ============ Botones ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-display);font-weight:600;font-size:15px;border-radius:999px;padding:13px 26px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-color .25s,color .25s;cursor:pointer;border:none;white-space:nowrap}
.btn:active{transform:translateY(0) scale(.98)}
.btn-copper{background:linear-gradient(180deg,var(--copper-soft),var(--copper));color:var(--bg);box-shadow:0 10px 24px -12px rgba(205,134,96,.85),inset 0 1px 0 rgba(255,255,255,.28)}
.btn-copper:hover{background:linear-gradient(180deg,#E0B294,var(--copper-soft));transform:translateY(-2px);box-shadow:0 16px 30px -12px rgba(205,134,96,.95),inset 0 1px 0 rgba(255,255,255,.32)}
.btn-ghost{background:rgba(249,248,248,.06);color:var(--bone);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(249,248,248,.13);border-color:rgba(249,248,248,.28);transform:translateY(-2px)}
.btn-ink{background:transparent;color:var(--ink);border:1px solid var(--line-light)}
.btn-ink:hover{background:rgba(18,51,70,.06);transform:translateY(-2px)}

/* ============ Nav flotante ============ */
.nav{position:fixed;inset:34px 0 auto 0;z-index:50;height:70px;display:flex;align-items:center;transition:background .35s var(--ease),border-color .35s var(--ease);border-bottom:1px solid transparent}
.nav.scrolled{background:#123346;border-bottom-color:var(--line)}
.nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
/* La marca es el logotipo oficial en vector (lockup vertical, variante Blanco),
   recortado a su caja real. height:auto obligatorio: con width/height puestos el
   navegador conserva el alto del atributo y deforma. */
.brand{display:block;line-height:0}
.brand img{width:150px;height:auto}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500}
/* Los rotulos son mas largos en aleman: sin esto la barra parte en dos lineas. */
.nav-links a{color:var(--bone-dim);transition:color .25s;white-space:nowrap}
.nav-links a:hover{color:var(--bone)}
.nav .btn{padding:10px 20px;font-size:14px}
.burger{display:none;background:rgba(12,32,44,.55);backdrop-filter:blur(6px);border:none;cursor:pointer;width:44px;height:44px;border-radius:10px}
.burger span{display:block;width:20px;height:2px;background:var(--bone);margin:4px auto;border-radius:2px;transition:transform .3s var(--ease),opacity .3s}
.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-open .burger span:nth-child(2){opacity:0}
.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mobile-menu{display:none}

/* ============ Hero ============ */
.hero{min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.04)}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 42%;opacity:0;transition:opacity 1s ease}
.hero-bg.con-video .hero-video{opacity:1}
.hero-bg.con-video img{animation:none;transform:scale(1.04)}
@media (prefers-reduced-motion:reduce){.hero-video{display:none}}
@media (prefers-reduced-motion:no-preference){
  .hero-bg img{animation:kenburns 28s ease-in-out infinite alternate}
}
@keyframes kenburns{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.14) translateY(-1.5%)}}
.hero-scrim{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(12,32,44,.42) 0%,rgba(12,32,44,.18) 38%,rgba(12,32,44,.78) 74%,var(--bg) 100%)}
.hero-inner{padding:120px 0 56px}
.hero h1{font-size:clamp(2.4rem,5.2vw,4.2rem);max-width:18ch;text-shadow:0 2px 30px rgba(9,24,33,.55)}
.hero h1 em{font-style:normal;color:var(--copper)}
.hero p{margin:22px 0 30px;font-size:clamp(1.02rem,1.4vw,1.18rem);color:#CFC7AF;max-width:46ch;text-shadow:0 1px 18px rgba(9,24,33,.6)}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap}
.finder{margin-top:46px;background:rgba(16,44,60,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:var(--radius);padding:18px;display:grid;grid-template-columns:1fr 1fr auto;gap:12px;max-width:760px}
.finder label{display:flex;flex-direction:column;gap:6px;font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-dim)}
.finder select{appearance:none;background:var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BDB8AB' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line);color:var(--bone);font-family:var(--font-body);font-size:15px;padding:12px 38px 12px 14px;border-radius:10px;cursor:pointer}
.finder select:focus{outline:2px solid var(--copper);outline-offset:1px}
.finder .btn{align-self:end}

/* ============ Banda 1: intro + cifras (clara) ============ */
.intro-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:54px;align-items:center}
.intro-copy h2{font-size:clamp(1.9rem,3.4vw,2.7rem);max-width:18ch}
.intro-copy p{color:var(--ink-dim);margin-top:18px;max-width:50ch}
.intro-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.intro-chips button{font-family:var(--font-body);border:1px solid var(--line-light);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:600;color:var(--ink);background:transparent;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.intro-chips button:hover{background:var(--ink);color:var(--light);border-color:var(--ink)}
.stat-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.stat-card{background:var(--light-2);border:1px solid var(--line-light);border-radius:var(--radius);padding:26px 24px;box-shadow:0 14px 34px -26px rgba(10,38,55,.5);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.stat-card:hover{transform:translateY(-4px);box-shadow:0 24px 46px -28px rgba(10,38,55,.6)}
.stat-card:first-child{grid-column:1/-1}
.stat-card b{font-family:var(--font-display);font-weight:700;font-size:clamp(1.9rem,3vw,2.5rem);color:var(--copper-ink);display:block;line-height:1}
.stat-card>span{color:var(--ink-dim);font-size:14.5px;display:block;margin-top:8px}

/* ============ Catálogo (oscura) ============ */
.cat-head{display:flex;flex-direction:column;align-items:center;gap:10px;margin-bottom:30px;text-align:center}
.cat-head h2{font-size:clamp(1.9rem,3.4vw,2.8rem);text-wrap:balance}
.cat-count{color:var(--bone-dim);font-size:14.5px;white-space:nowrap}
.filters{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-bottom:34px}
.op-toggle{display:flex;gap:6px;background:rgba(249,248,248,.05);border:1px solid var(--line);border-radius:999px;padding:5px}
.op-toggle button{background:none;border:none;color:var(--bone-dim);font-family:var(--font-display);font-weight:600;font-size:14px;padding:8px 18px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.op-toggle button.active{background:var(--copper);color:var(--bg)}
.filters select{appearance:none;background:rgba(12,32,44,.7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23BDB8AB' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 14px center;border:1px solid var(--line);color:var(--bone);font-family:var(--font-body);font-size:14.5px;padding:11px 38px 11px 16px;border-radius:999px;cursor:pointer}
.filters select:focus{outline:2px solid var(--copper);outline-offset:1px}
.filters .search{position:relative;flex:1;min-width:210px}
.filters .search input{width:100%;background:rgba(12,32,44,.7);border:1px solid var(--line);color:var(--bone);font-family:var(--font-body);font-size:14.5px;padding:11px 16px 11px 40px;border-radius:999px}
.filters .search input::placeholder{color:var(--bone-dim)}
.filters .search input:focus{outline:2px solid var(--copper);outline-offset:1px}
.filters .search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);width:16px;height:16px;stroke:var(--bone-dim);fill:none;stroke-width:2;pointer-events:none}
.active-chips{display:flex;flex-wrap:wrap;gap:9px;margin:-18px 0 30px;align-items:center}
.active-chips .ac{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--bone);background:rgba(205,134,96,.14);border:1px solid rgba(205,134,96,.4);border-radius:999px;padding:6px 9px 6px 14px;cursor:pointer;transition:background .2s}
.active-chips .ac:hover{background:rgba(205,134,96,.26)}
.active-chips .ac i{font-style:normal;width:16px;height:16px;border-radius:50%;background:rgba(205,134,96,.4);display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1}
.active-chips .clear{font-size:13px;color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px;cursor:pointer;border:none;background:none;font-family:var(--font-body)}
.active-chips .clear:hover{color:var(--bone)}
.prop-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prop{position:relative;border-radius:var(--radius);overflow:hidden;background:linear-gradient(170deg,#14384D 0%,#102C3C 100%);border:1px solid var(--line);display:flex;flex-direction:column;transition:transform .4s var(--ease),border-color .3s;box-shadow:0 18px 40px -24px rgba(8,21,29,.8)}
.prop:hover{transform:translateY(-5px);border-color:rgba(205,134,96,.45)}
.prop-img{aspect-ratio:16/11;overflow:hidden;position:relative;background:#0B1D28}
.prop-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.prop-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 48%,rgba(8,21,29,.45));pointer-events:none}
.prop:hover .prop-img img{transform:scale(1.06)}
/* z-index sobre el velo de las cerradas: si no, el velo tapa el sello. */
.prop-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
/* Los sellos se dibujan SOBRE la fotografía, no sobre la banda: llevan color
   propio, o al aclarar la sección quedaban azul sobre azul e invisibles. */
.badge{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.03em;padding:5px 11px;border-radius:999px;background:rgba(12,32,44,.78);backdrop-filter:blur(4px);color:#F9F8F8}
.badge.feat{background:var(--copper);color:var(--bg)}
/* Propiedad cerrada: sello en vez de precio y la foto un punto más apagada, para que
   se distinga de un golpe de vista sin desaparecer del catálogo (siguen sirviendo
   como prueba de trabajo hecho). */
.badge.cerrada{background:rgba(249,248,248,.92);color:#123346}
.prop-velo{position:absolute;inset:0;z-index:1;pointer-events:none;background:rgba(12,32,44,.42)}
.prop-cerrada{font-family:var(--font-display);font-weight:700;font-size:16px;letter-spacing:.02em;color:var(--bone-dim)}
.prop-body{padding:17px 20px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.prop-meta{font-size:13.5px;color:var(--bone-dim);letter-spacing:.02em}
.prop h3{font-size:18px;font-weight:600;line-height:1.3;text-wrap:pretty}

/* Ficha técnica real, traída del portal: terreno, construido, dormitorios y baños.
   Sin ella la tarjeta sólo decía ciudad, título y precio. Si una propiedad no trae
   ningún dato la fila no se dibuja — no se rellena con guiones. */
.prop-specs{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:10px}
.prop-specs li{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:600;
  color:var(--bone-dim);background:rgba(249,248,248,.055);border:1px solid rgba(249,248,248,.09);
  border-radius:8px;padding:5px 9px;white-space:nowrap}
.prop-specs svg{width:13px;height:13px;flex:none;stroke:var(--copper);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;opacity:.9}

.prop-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  margin-top:12px;padding-top:13px;border-top:1px solid rgba(249,248,248,.09)}
.prop-price{font-family:var(--font-display);font-weight:700;font-size:21.5px;color:var(--copper);line-height:1.1;display:block}
.prop-price .prop-clp{margin-top:1px}
.prop-cta{font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--bone-dim);
  display:inline-flex;align-items:center;gap:5px;white-space:nowrap;transition:color .25s,gap .25s var(--ease)}
.prop-cta svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.prop:hover .prop-cta{color:var(--copper);gap:8px}
.prop .stretch::after{content:"";position:absolute;inset:0;z-index:1}
.prop .go-arrow{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;background:var(--copper);color:var(--bg);display:flex;align-items:center;justify-content:center;opacity:0;transform:translateY(-5px);transition:opacity .3s var(--ease),transform .3s var(--ease);z-index:2;pointer-events:none}
.prop:hover .go-arrow{opacity:1;transform:none}
.cat-actions{margin-top:40px;display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.cat-empty{text-align:center;color:var(--bone-dim);padding:50px 0;display:none}
.tog-cerradas{font-family:var(--font-body);font-size:13.5px;font-weight:600;color:var(--bone-dim);
  background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 18px;cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;white-space:nowrap}
.tog-cerradas:hover{color:var(--bone);border-color:rgba(249,248,248,.28)}
.tog-cerradas[aria-pressed="true"]{background:var(--copper);border-color:transparent;color:var(--bg)}

/* ============ Blindaje (clara) ============ */
/* La columna del título era 1fr: con títulos de dos palabras dejaba ~400 px de
   hueco antes del texto y las tres columnas se leían como tres cosas sueltas.
   Ahora el icono y el número van EN LÍNEA (apilados estiraban la fila a lo alto),
   el título ocupa lo que necesita y el párrafo se limita a un ancho de lectura. */
.pillar{display:grid;grid-template-columns:auto minmax(170px,.5fr) minmax(0,1fr);gap:24px 34px;align-items:center;padding:32px 0;border-top:1px solid var(--line-light)}
.pillar:first-child{border-top:none}
.pillar .pcol{display:flex;align-items:center;gap:14px}
.picon{width:48px;height:48px;border-radius:13px;background:rgba(205,134,96,.12);border:1px solid rgba(205,134,96,.32);display:flex;align-items:center;justify-content:center}
.picon svg{width:24px;height:24px;stroke:var(--copper-ink);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.pillar .num{font-family:var(--font-display);font-weight:700;font-size:30px;color:var(--copper-ink);line-height:1;opacity:.85}
.pillar h3{font-size:21px;text-wrap:balance}
.pillar p{color:var(--ink-dim);font-size:15.5px;max-width:60ch;text-wrap:pretty}
.shield-note{margin:36px auto 0;padding:26px 30px;border-left:3px solid var(--copper);background:rgba(205,134,96,.09);border-radius:0 var(--radius) var(--radius) 0;max-width:780px}
.shield-note p{font-family:var(--font-display);font-size:19px;font-weight:500;line-height:1.45;color:var(--ink)}

/* ============ Servicios (oscura) ============ */
.svc-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:20px}
.svc{grid-column:span 2;background:linear-gradient(165deg,#14384D 0%,#102C3C 100%);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;transition:border-color .3s,transform .4s var(--ease);box-shadow:0 18px 40px -24px rgba(8,21,29,.8)}
.svc:hover{border-color:rgba(205,134,96,.45);transform:translateY(-4px)}
.svc.wide{grid-column:span 3}
.svc .sico{width:48px;height:48px;border-radius:13px;background:rgba(205,134,96,.1);border:1px solid rgba(205,134,96,.28);display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.svc .sico svg{width:24px;height:24px;stroke:var(--copper);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.svc h3{font-size:19px;margin-bottom:10px}
.svc p{color:var(--bone-dim);font-size:14.5px}
.svc .go{display:inline-block;margin-top:16px;font-size:14px;font-weight:600;color:var(--copper)}
.svc .go:hover{color:var(--copper-soft)}

/* ============ Zona (photo-bleed) ============ */
.zone{padding:50px 0;background:var(--light)}
.zone-bleed{position:relative;border-radius:var(--radius);overflow:hidden}
.zone-bleed img{width:100%;height:480px;object-fit:cover;object-position:center 50%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 16%,#000 84%,transparent 100%)}
.zone-content{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 7%;background:linear-gradient(90deg,rgba(11,29,40,.85) 0%,rgba(11,29,40,.35) 55%,transparent 100%)}
.zone-content h2{font-size:clamp(1.8rem,3.2vw,2.5rem);max-width:18ch}
.zone-content p{color:#CFC7AF;margin-top:14px;max-width:44ch}
.zone-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.zone-chips button{font-family:var(--font-body);color:var(--bone);border:1px solid rgba(249,248,248,.35);border-radius:999px;padding:9px 18px;font-size:14px;font-weight:600;background:rgba(11,29,40,.45);backdrop-filter:blur(4px);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.zone-chips button:hover{background:var(--copper);color:var(--bg);border-color:var(--copper)}

/* ============ Equipo (clara) ============ */
/* Tres personas: la grilla de 4 dejaba una celda vacía. Con el ancho acotado hay
   que centrarla — si no, queda pegada a la izquierda bajo una cabecera centrada. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:980px;margin-inline:auto}
.member{border-top:2px solid var(--copper);padding:22px 4px 0}
.member-foto{margin:0 0 18px;border-radius:12px;overflow:hidden;aspect-ratio:4/5;background:var(--bg);border:1px solid var(--line-light)}
.member-foto img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.member-foto--mono{display:grid;place-items:center;background:linear-gradient(158deg,#123346 0%,var(--bg) 100%)}
.member-foto--mono span{font-family:var(--font-display);font-size:clamp(2rem,3.4vw,2.7rem);font-weight:600;letter-spacing:.08em;color:var(--copper);opacity:.92}
/* Territorio: fotografías propias de la corredora */
.gal-nota{color:var(--bone-dim);max-width:56ch;margin:14px auto 0}

/* Aprende (blog). Tarjeta entera clicable: el <a> ES la tarjeta, así que no hay
   una capa ::after que se pelee con el :hover (ver la tarjeta que parpadeaba). */
.post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:38px}
.post{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(170deg,#14384D 0%,#102C3C 100%);transition:transform .4s var(--ease),border-color .3s}
.post:hover{transform:translateY(-4px);border-color:rgba(205,134,96,.5)}
.post-img{overflow:hidden}
.post-img img{width:100%;aspect-ratio:16/10;object-fit:cover;height:auto;display:block;transition:transform .7s var(--ease)}
@media (hover:hover) and (pointer:fine){.post:hover .post-img img{transform:scale(1.05)}}
.post-txt{padding:22px 22px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.post-cat{font-family:var(--font-display);font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--copper)}
.post h3{font-size:18.5px;line-height:1.25}
.post p{color:var(--bone-dim);font-size:14.2px;flex:1}
.post-mas{font-family:var(--font-display);font-weight:600;font-size:13.5px;color:var(--copper);margin-top:4px}
.post:hover .post-mas{color:var(--copper-soft)}
.member h3{font-size:18px}
.member .role{color:var(--copper-ink);font-size:13.5px;font-weight:600;margin:6px 0 10px}
.member p{color:var(--ink-dim);font-size:14px}

/* ============ Propietarios (oscura) ============ */
.owners-panel{position:relative;border-radius:var(--radius);overflow:hidden;display:grid;grid-template-columns:1.15fr 1fr;min-height:380px;border:1px solid var(--line)}
.owners-copy{padding:56px 52px;display:flex;flex-direction:column;justify-content:center;gap:18px;background:
  radial-gradient(480px 320px at 8% -10%, rgba(205,134,96,.12), transparent 65%),
  linear-gradient(150deg,#14384D 0%,#102C3C 100%)}
.owners-copy h2{font-size:clamp(1.7rem,3vw,2.4rem);max-width:18ch}
.owners-copy p{color:var(--bone-dim);max-width:48ch}
.owners-copy .btn{align-self:flex-start;margin-top:8px}
.owners-img{overflow:hidden}
.owners-img picture{display:block;width:100%;height:100%}
.owners-img img{width:100%;height:100%;object-fit:cover;object-position:center 62%;display:block}

/* ============ Footer ============ */
.footer{border-top:1px solid var(--line);padding:46px 0 0;background:linear-gradient(180deg,#102C3C 0%,#0A1A24 100%)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;padding-bottom:50px}
.footer h4{font-family:var(--font-display);font-size:15px;font-weight:600;margin-bottom:16px}
.footer ul{list-style:none;display:flex;flex-direction:column;gap:10px;font-size:14.5px}
.footer ul a,.footer ul li{color:var(--bone-dim)}
.footer ul a:hover{color:var(--bone)}
.footer .brand img{width:168px}
.footer-about p{color:var(--bone-dim);font-size:14.5px;margin-top:14px;max-width:34ch}
.footer-social{display:flex;gap:12px;margin-top:18px}
.footer-social a{width:38px;height:38px;border-radius:10px;border:1px solid var(--line);display:flex;align-items:center;justify-content:center;transition:border-color .25s,background .25s}
.footer-social a:hover{border-color:var(--copper);background:rgba(205,134,96,.1)}
.footer-social svg{width:18px;height:18px;fill:var(--bone-dim)}
.footer-social a:hover svg{fill:var(--copper)}
/* Entrada del equipo al panel de propiedades. Va discreta a propósito: es una
   puerta de servicio, no una llamada al visitante. El panel ya va noindex. */
.acceso-panel{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-display);
  font-size:12.5px;font-weight:600;color:var(--bone-dim);border:1px solid var(--line);
  border-radius:999px;padding:6px 14px;text-decoration:none;transition:color .25s,border-color .25s,background .25s}
.acceso-panel:hover{color:var(--bone);border-color:var(--copper);background:rgba(205,134,96,.10)}
/* La regla del pie subraya TODOS sus enlaces y le ganaba en especificidad. */
.footer-bottom .acceso-panel{text-decoration:none}
.acceso-panel svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.footer-bottom{border-top:1px solid var(--line);padding:14px 0;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--bone-dim)}
.footer-bottom a{color:var(--bone-dim);text-decoration:underline;text-underline-offset:3px}
.footer-bottom a:hover{color:var(--bone)}

/* WhatsApp flotante */
.wa-float{position:fixed;right:22px;bottom:22px;z-index:40;width:56px;height:56px;border-radius:50%;background:#1fa855;display:flex;align-items:center;justify-content:center;box-shadow:0 8px 28px rgba(9,24,33,.5);transition:transform .3s var(--ease)}
.wa-float:hover{transform:scale(1.07)}
.wa-float svg{width:28px;height:28px;fill:#fff}

/* ============ Móvil ============ */
@media (max-width:1023px){
  .nav-links{display:none}
  .nav>.wrap>.btn{display:none}
  .burger{display:block}
  .mobile-menu{display:flex;position:fixed;inset:0;z-index:45;background:rgba(12,32,44,.97);backdrop-filter:blur(10px);flex-direction:column;align-items:center;justify-content:center;gap:28px;font-family:var(--font-display);font-size:23px;font-weight:600;opacity:0;pointer-events:none;transition:opacity .35s var(--ease)}
  .menu-open .mobile-menu{opacity:1;pointer-events:auto}
  .mobile-menu a{color:var(--bone)}
  .intro-grid{grid-template-columns:1fr;gap:36px}
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .svc,.svc.wide{grid-column:span 1}
  .prop-grid{grid-template-columns:repeat(2,1fr)}
  .team-grid{grid-template-columns:repeat(2,1fr);max-width:660px}
  .post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
  /* Javiera, desde su iPhone (8-sep-2026), circuló el hueco entre «Hablemos de su
       propiedad» y la sección siguiente: eran 176 px sin nada. En escritorio los 72
       de arriba y 72 de abajo separan bien; en un teléfono de 390 son 144 px de
       página en blanco entre dos bloques que se leen seguidos. Bajan a 44. */
    .band{padding:40px 0}
  /* Un margen inferior en el ÚLTIMO hijo de una sección no separa de nada: el
     relleno de la sección ya hace ese trabajo, y los dos se suman. En «Por qué
     WAR» el `.sec-head` cerraba con 46 px de margen y era lo último del bloque:
     46 + 44 + 44 daban 134 px de página en blanco. En escritorio no molesta —hay
     sitio de sobra—; en un teléfono es medio pantallazo vacío. */
  .band .wrap > *:last-child{margin-bottom:0}
  .hero-inner{padding:104px 0 44px}
  /* En vertical, un 16:9 recortado a pantalla completa deja el volcán irreconocible:
     la foto ocupa la franja superior y el buscador queda sobre el fondo oscuro. */
  .hero-bg{inset:0 0 auto 0;height:min(56vh,470px)}
  .hero-bg img{object-position:center 46%}
  .hero-scrim{background:linear-gradient(180deg,rgba(12,32,44,.5) 0%,rgba(12,32,44,.34) 26%,rgba(12,32,44,.88) 52%,var(--bg) 66%)}
  .finder{grid-template-columns:1fr;margin-top:34px}
  .stat-cards{grid-template-columns:1fr}
  .prop-grid{grid-template-columns:1fr}
  .cat-head{align-items:center}
  .filters{flex-direction:column;align-items:stretch}
  .op-toggle{width:100%;overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .op-toggle::-webkit-scrollbar{display:none}
  .op-toggle button{white-space:nowrap;flex:0 0 auto}
  .filters select{width:100%}
  .pillar{grid-template-columns:1fr;gap:8px;padding:26px 0}
  .pillar .num{font-size:34px}
  .svc-grid{grid-template-columns:1fr}
  .zone-bleed img{height:540px}
  .zone-content{padding:0 24px;justify-content:flex-end;padding-bottom:48px;background:linear-gradient(180deg,transparent 0%,rgba(11,29,40,.85) 70%)}
  .team-grid{grid-template-columns:1fr}
  .member-foto{aspect-ratio:5/4}
  .member-foto img{object-position:center 14%}
  /* En una sola columna, un monograma a pantalla completa es sólo hueco. */
  .member-foto--mono{display:none}
  .post-grid{grid-template-columns:1fr;gap:16px}
  .owners-panel{grid-template-columns:1fr}
  .owners-img{order:-1;max-height:240px}
  .owners-copy{padding:36px 26px}
  .footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .footer-about{grid-column:1/-1}
}

/* Crédito Vertex: el logotipo, no el nombre escrito. El wordmark usa currentColor,
   así que funciona igual sobre un pie claro y uno oscuro. Proporción ícono/palabra
   2,43, la del logotipo oficial. */
.vertex-credito{display:inline-flex; align-items:center; gap:8px; vertical-align:middle;
  text-decoration:none; color:inherit}
.vertex-credito svg{width:27px; height:27px; flex:none; display:block}
.vertex-credito-txt{display:grid; line-height:1; text-align:left}
.vertex-credito-txt b{font-size:11px; font-weight:800; letter-spacing:2px; color:currentColor}
.vertex-credito-txt b i{font-style:normal; color:#1A6FFF}
.vertex-credito-txt > i{font-style:normal; font-size:6.5px; font-weight:600;
  letter-spacing:1.33px; color:currentColor; opacity:.72; margin-top:2px}
.vertex-credito:hover .vertex-credito-txt b i{color:#7FBBFF}

/* Conmutador de idioma */
.idiomas{display:inline-flex;gap:2px;align-items:center;margin-left:14px}
.idiomas a{font-family:var(--font-display);font-size:12px;font-weight:600;letter-spacing:.06em;
  color:var(--bone-dim);padding:5px 7px;border-radius:6px;transition:color .2s,background .2s}
.idiomas a:hover{color:var(--bone)}
.idiomas a[aria-current]{color:var(--bg);background:var(--copper)}
@media(max-width:1023px){.idiomas{margin-left:auto;margin-right:10px}}

/* Los controles de formulario no heredan la tipografía de la página: sin esto,
   los desplegables y el buscador del catálogo caen en la fuente por defecto del
   navegador (informe, 3.2). */
input, select, textarea, button{ font-family:inherit; }

/* Una tarjeta oculta DEBE desaparecer: `.prop` declara display:flex y eso vence
   al atributo `hidden`, que sólo trae display:none de la hoja del navegador. Sin
   esta regla, la portada dibuja las 110 tarjetas y ninguna se oculta. */
.prop[hidden], .cat-empty[hidden], #loadMore[hidden]{ display:none !important; }