/* Hoja de las páginas nuevas (ficha, listados, contacto, nosotros, errores).
   Base: los estilos que ya tenía la ficha. Encima, los componentes que la
   portada ya resolvía (menú, pie de cuatro columnas, tarjeta, bandas), para
   que las páginas nuevas se vean como el resto del sitio sin inventar nada. */
/* Estilos propios de la ficha de propiedad. Van SOBRE war.css. */
:root{
  --bg:#0C202C;--bg-2:#112F40;--line:rgba(249,248,248,.12);
  --bone:#F9F8F8;--bone-dim:#BDB8AB;--copper:#CD8660;--copper-soft:#D69C7C;
  --light:#F9F8F8;--light-2:#ffffff;--ink:#123346;--ink-dim:#506C7C;--line-light:rgba(18,51,70,.13);--copper-ink:#7D4A2E;
  --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(--light);color:var(--ink);font-family:var(--font-body);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased}
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.12;font-weight:600}
.wrap{max-width:1240px;margin:0 auto;padding:0 24px}
:focus-visible{outline:2px solid var(--copper);outline-offset:3px;border-radius:3px}
::selection{background:rgba(205,134,96,.3);color:#fff}
.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)}}
.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 24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,border-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)}
.btn-ghost{background:rgba(18,51,70,.05);color:var(--bone);border:1px solid var(--line)}
.btn-ghost:hover{background:rgba(18,51,70,.10)}

/* Nav */
.nav{position:sticky;top:0;z-index:50;height:66px;display:flex;align-items:center;background:#123346;border-bottom:1px solid var(--line)}
.nav .wrap{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px}
/* Logotipo oficial en vector; height:auto obligatorio con width/height puestos. */
.brand{display:block;line-height:0}
.brand img{width:140px;height:auto}
.back{font-size:14px;color:var(--bone-dim);display:inline-flex;align-items:center;gap:7px}
.back:hover{color:var(--bone)}

/* Hero ficha */
/* La clienta pidió el sitio claro (4-sep-2026). Igual que en la portada, las
   secciones redefinen los tokens con su variante clara y los componentes de
   dentro se aclaran solos. Lo que va sobre la FOTOGRAFÍA —los sellos, las
   flechas de la galería, el visor— lleva color propio y no sigue a la sección. */
.fhero, .fdesc, .fmap, .similar{
  --bg:var(--light);
  --bg-2:var(--light-2);
  --bone:var(--ink);
  --bone-dim:var(--ink-dim);
  --line:var(--line-light);
  --copper:var(--copper-ink);
  --copper-soft:#663B24;
  color:var(--ink);
}
.fhero{padding:34px 0 70px;background:radial-gradient(900px 500px at 100% -5%,rgba(125,74,46,.07),transparent 60%),var(--light)}
.crumb{font-size:13px;color:var(--bone-dim);margin-bottom:18px}
.crumb a:hover{color:var(--bone)}
.fhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}
.fhead .badges{display:flex;gap:8px;margin-bottom:12px}
.badge{font-family:var(--font-display);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;background:rgba(12,32,44,.72);color:#F9F8F8}
.badge.feat{background:var(--copper);color:var(--bg)}
.badge.cerrada{background:rgba(249,248,248,.92);color:#123346}
.fhead .price .main.cerrada{color:var(--bone-dim)}
.aviso-cerrada{margin-top:16px;padding:12px 14px;border-radius:10px;background:rgba(18,51,70,.06);
  border:1px solid var(--line-light);font-size:13.5px;color:var(--ink-dim)}
.fhead h1{font-size:clamp(1.6rem,3.4vw,2.5rem);max-width:20ch}
.fhead .loc{color:var(--bone-dim);margin-top:8px;font-size:15px}
.fhead .price{text-align:right}
.fhead .price .main{font-family:var(--font-display);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.4rem);color:var(--copper)}
.fhead .price .uf{color:var(--bone-dim);font-size:15px;margin-top:2px}

/* Galería */
.gallery{display:grid;grid-template-columns:1fr;gap:14px}
.gmain{position:relative;border-radius:var(--radius);overflow:hidden;background:#0A1A24;aspect-ratio:16/9}
.gmain img{width:100%;height:100%;object-fit:cover}
.garr{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;background:rgba(12,32,44,.6);backdrop-filter:blur(6px);border:1px solid var(--line);color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.garr:hover{background:rgba(205,134,96,.8);color:var(--bg)}
.garr.prev{left:14px}.garr.next{right:14px}
.gcount{position:absolute;right:14px;bottom:14px;font-family:var(--font-display);font-size:13px;font-weight:600;color:#F9F8F8;background:rgba(12,32,44,.7);backdrop-filter:blur(4px);padding:5px 12px;border-radius:999px}
.gthumbs{display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin}
.gthumbs img{width:104px;height:70px;object-fit:cover;border-radius:9px;cursor:pointer;border:2px solid transparent;opacity:.6;transition:opacity .2s,border-color .2s;flex:0 0 auto}
.gthumbs img.active{opacity:1;border-color:var(--copper)}

.gmain{cursor:zoom-in}
.gzoom{position:absolute;top:14px;left:14px;width:40px;height:40px;border-radius:50%;background:rgba(12,32,44,.6);backdrop-filter:blur(6px);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;pointer-events:none}
.gzoom svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2}

/* Datos clave */
.keydata{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-top:26px}
.kd{background:rgba(18,51,70,.04);border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;display:flex;gap:14px;align-items:center}
.kd .kdi{width:40px;height:40px;border-radius:11px;background:rgba(205,134,96,.14);border:1px solid rgba(205,134,96,.3);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.kd .kdi svg{width:20px;height:20px;stroke:var(--copper);fill:none;stroke-width:1.7}
.kd b{font-family:var(--font-display);font-weight:700;font-size:1.25rem;color:var(--copper);display:block;line-height:1.05}
.kd span{color:var(--bone-dim);font-size:12.5px;display:block;margin-top:5px;letter-spacing:.02em}

/* Lightbox */
.lb{position:fixed;inset:0;z-index:200;background:rgba(8,21,29,.95);display:none;align-items:center;justify-content:center;padding:40px}
.lb.open{display:flex}
.lb img{max-width:92vw;max-height:86vh;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb .lbclose{position:absolute;top:22px;right:26px;width:46px;height:46px;border-radius:50%;background:rgba(249,248,248,.1);border:1px solid var(--line);color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.lb .lbarr{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(249,248,248,.1);border:1px solid var(--line);color:#fff;font-size:26px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s}
.lb .lbarr:hover{background:var(--copper);color:var(--bg)}
.lb .lbarr.prev{left:24px}.lb .lbarr.next{right:24px}
.lb .lbcount{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-family:var(--font-display);font-weight:600;font-size:14px;color:var(--bone-dim)}

/* Compartir */
.share{display:flex;align-items:center;gap:10px;margin-top:18px}
.share span{font-size:13px;color:var(--bone-dim)}
.share button, .share a{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:rgba(18,51,70,.05);color:var(--bone);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:border-color .2s,background .2s}
.share button:hover{border-color:var(--copper);background:rgba(205,134,96,.12)}
.share button svg{width:17px;height:17px;fill:currentColor}
.share .copied{font-size:12.5px;color:var(--copper);opacity:0;transition:opacity .2s}
.share .copied.show{opacity:1}

/* Banda descripción (clara) */
.fdesc{background:var(--light);color:var(--ink);padding:80px 0}
.fdesc .grid{display:grid;grid-template-columns:1.55fr .85fr;gap:46px;align-items:start}
.eyebrow{font-family:var(--font-display);font-size:12.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--copper-ink);display:inline-flex;align-items:center;gap:11px;margin-bottom:14px}
.eyebrow::before{content:"";width:26px;height:1.5px;background:currentColor;opacity:.55}
.fdesc .lead{font-family:var(--font-display);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:600;line-height:1.25;max-width:24ch;margin-bottom:24px}
.desc-body h3{font-size:1.05rem;margin:26px 0 10px;color:var(--ink);display:flex;align-items:center;gap:9px}
.desc-body h3::before{content:"";width:6px;height:18px;border-radius:3px;background:var(--copper);flex:0 0 auto}
.desc-body p{color:var(--ink-dim);margin:10px 0;max-width:62ch}
.desc-body ul{list-style:none;margin:10px 0;display:flex;flex-direction:column;gap:9px;max-width:62ch}
.desc-body li{position:relative;padding-left:28px;color:var(--ink-dim)}
.desc-body li::before{content:"";position:absolute;left:0;top:8px;width:15px;height:15px;border-radius:50%;background:rgba(205,134,96,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D4A2E' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");background-size:10px;background-position:center;background-repeat:no-repeat}
.feat-chips{display:flex;flex-wrap:wrap;gap:9px;margin:24px 0 0}
.feat-chips span{border:1px solid var(--line-light);border-radius:999px;padding:7px 15px;font-size:13px;font-weight:600;color:var(--ink)}
.ytembed{margin-top:28px;border-radius:var(--radius);overflow:hidden;aspect-ratio:16/9;border:1px solid var(--line-light);position:relative;background:#0A1A24;cursor:pointer}
.ytembed iframe{width:100%;height:100%;border:0;display:block}
.ytembed img{width:100%;height:100%;object-fit:cover;display:block}
.ytembed .ytplay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(11,29,40,.15),rgba(11,29,40,.5))}
.ytembed .ytplay i{width:74px;height:74px;border-radius:50%;background:rgba(208,68,58,.92);display:flex;align-items:center;justify-content:center;transition:transform .25s var(--ease),background .25s;box-shadow:0 10px 30px rgba(0,0,0,.4)}
.ytembed:hover .ytplay i{transform:scale(1.08);background:#e0443a}
.ytembed .ytplay i svg{width:30px;height:30px;fill:#fff;margin-left:4px}
.ytembed .ytlabel{position:absolute;left:14px;bottom:12px;font-family:var(--font-display);font-size:12.5px;font-weight:600;color:#fff;background:rgba(11,29,40,.6);backdrop-filter:blur(4px);padding:5px 12px;border-radius:999px}

/* Aside agente */
.aside{position:sticky;top:90px;display:flex;flex-direction:column;gap:18px}
.agent-card{background:var(--light-2);border:1px solid var(--line-light);border-radius:var(--radius);padding:24px;box-shadow:0 16px 40px -28px rgba(10,38,55,.5)}
.agent-top{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.agent-top img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:#CFC7AF}
.agent-top .nm{font-family:var(--font-display);font-weight:600;font-size:16px;color:var(--ink)}
.agent-top .rl{color:var(--ink-dim);font-size:13px}
.agent-card .ln{display:flex;align-items:center;gap:9px;color:var(--ink-dim);font-size:14px;margin:7px 0}
.agent-card .actions{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.agent-card .btn{width:100%}
.btn-wa{background:#15803d;color:#fff}.btn-wa:hover{background:#1a9b4a}
.btn-ink{background:transparent;color:var(--ink);border:1px solid var(--line-light)}.btn-ink:hover{background:rgba(18,51,70,.05)}
.codebox{font-size:12.5px;color:var(--ink-dim);text-align:center}
.sim-body .sm{font-size:12.5px;color:var(--bone-dim);margin-top:3px}

/* Simulador de financiamiento. Replica el cálculo del portal actual de WAR
   (financiar %, interés %, plazo) con la fórmula de cuota francesa; sólo
   aparece en VENTA y cuando el precio es un número (no en "Consultar"). */
.simul{background:var(--light-2);border:1px solid var(--line-light);border-radius:var(--radius);padding:22px 24px 20px;box-shadow:0 16px 40px -28px rgba(10,38,55,.5)}
.simul h3{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--ink);margin-bottom:2px}
.simul .sub{color:var(--ink-dim);font-size:13px;margin-bottom:16px}
.simul-campos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.simul-campos label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-dim)}
.simul-campos input{font-family:var(--font-body);font-size:15px;font-weight:600;color:var(--ink);text-align:center;
  border:1px solid var(--line-light);border-radius:9px;padding:9px 6px;background:#fff;width:100%}
.simul-campos input:focus{outline:2px solid var(--copper-ink);outline-offset:1px}
.simul-out{margin-top:16px;display:flex;flex-direction:column;gap:1px;border-radius:10px;overflow:hidden;border:1px solid var(--line-light)}
.simul-fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:11px 14px;background:rgba(18,51,70,.035)}
.simul-fila.destacada{background:rgba(125,74,46,.10)}
.simul-fila .rot{font-size:12.5px;color:var(--ink-dim);font-weight:600}
.simul-fila .val{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--ink);text-align:right;line-height:1.25}
.simul-fila.destacada .val{color:#663B24;font-size:18px}
.simul-fila .val small{display:block;font-family:var(--font-body);font-weight:600;font-size:12px;color:var(--ink-dim)}
.simul-nota{margin-top:12px;font-size:11.5px;line-height:1.5;color:var(--ink-dim)}
.simul-nota a{color:var(--copper-ink);text-decoration:underline;text-underline-offset:2px}
@media (max-width:420px){.simul-campos{grid-template-columns:1fr 1fr}}

/* Mapa */
.fmap{padding:70px 0;background:var(--light)}
.fmap h2{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:8px}
.fmap .sub{color:var(--bone-dim);margin-bottom:24px}
.map-frame{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);aspect-ratio:21/9;background:var(--bg-2)}
.map-frame iframe{width:100%;height:100%;border:0;display:block;filter:saturate(.88) brightness(.97)}
.map-nota{margin-top:12px;font-size:12.5px;color:var(--bone-dim)}
.map-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* Similares */
.similar{padding:70px 0;background:radial-gradient(700px 400px at 100% 0%,rgba(125,74,46,.06),transparent 60%),var(--light);border-top:1px solid var(--line)}
/* Separador de marca: la cresta de la A del logotipo sobre su línea de horizonte.
   Máscara, no imagen, para que el color salga de la hoja (por file:// no carga). */
.similar h2{font-size:clamp(1.4rem,2.6vw,1.9rem);margin-bottom:6px;text-align:center}
.similar .sub{text-align:center}
.similar h2::before{content:"";display:block;width:min(400px,74%);aspect-ratio:940/74;margin:0 auto 20px}
@supports ((-webkit-mask-image:url(#a)) or (mask-image:url(#a))){
  .similar h2::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%}
}
.similar .sub{color:var(--bone-dim);margin-bottom:28px}
.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.sim{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--light-2);box-shadow:0 14px 34px -26px rgba(10,38,55,.5);border:1px solid var(--line);transition:transform .35s var(--ease),border-color .3s}
.sim:hover{transform:translateY(-5px);border-color:rgba(205,134,96,.45)}
.sim-img{aspect-ratio:16/11;overflow:hidden}
.sim-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.sim:hover .sim-img img{transform:scale(1.05)}
.sim-body{padding:16px 18px}
.sim-body .m{font-size:12.5px;color:var(--bone-dim)}
.sim-body h3{font-size:15.5px;font-weight:600;line-height:1.3;margin:5px 0}
.sim-body .pr{font-family:var(--font-display);font-weight:700;color:var(--copper);font-size:17px}
.sim .st::after{content:"";position:absolute;inset:0}

/* Footer */
/* 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)}
.acceso-panel svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.footer{border-top:1px solid var(--line);padding:48px 0;background:linear-gradient(180deg,#102C3C,#0A1A24);text-align:center}
.footer .brand{margin:0 auto 14px;width:max-content}
.footer p{color:var(--bone-dim);font-size:13.5px}
.footer a{color:var(--copper)}
.foot-credit{margin-top:10px;font-size:12.5px;color:var(--bone-dim)}

.wa-float{position:fixed;right:22px;bottom:22px;z-index:60;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}

.notfound{min-height:70vh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:18px;padding:40px}

@media(max-width:900px){
  .fdesc .grid{grid-template-columns:1fr;gap:32px}
  .aside{position:static}
  .sim-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:767px){
  .fhead{flex-direction:column;align-items:flex-start}
  .fhead .price{text-align:left}
  .fdesc{padding:56px 0}.fmap{padding:50px 0}
  .gmain{aspect-ratio:4/3}
  .sim-grid{grid-template-columns:1fr}
  .lb{padding:16px}
  .lb .lbarr{width:42px;height:42px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 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. */
/* `!important` solo en lo que decide la MAQUETA (el display y el tamaño del logotipo).
   Este fragmento se deja caer en decenas de hojas ajenas y varias imponen su propio
   `display` a los enlaces del pie: sin esto el logotipo y la palabra se apilan.
   El color NO lleva !important, para que siga heredando el tono del pie. */
.vertex-credito{display:inline-flex !important; align-items:center; gap:8px; vertical-align:middle;
  flex-wrap:nowrap; white-space:nowrap; text-decoration:none; color:inherit}
.vertex-credito svg{width:27px !important; height:27px !important; flex:none; display:block !important}
.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}}

/* ===== Componentes compartidos con la portada ===== */
.prop-clp{ display:block; margin-top:.15rem; font-size:.85rem; color:var(--bone-dim); font-variant-numeric:tabular-nums; }
.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; }
.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; }
}
.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;
}
.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%);
}
.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%);
}
.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%);
}
.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; }
.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; }
.filters select, .filters .btn, .filters input, .op-toggle button{ min-height:44px; }
.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%)}
.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);
}
.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)}
.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)}
.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")}
.sec-head::before, .cat-head::before{
  content:""; display:block; width:min(420px,78%); aspect-ratio:940/74;
  margin:0 auto 22px; background-color:transparent;
}
.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}
.band-light .eyebrow{color:var(--copper-ink)}
.nav-links{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500}
.nav-links a{color:var(--bone-dim);transition:color .25s;white-space:nowrap}
.nav-links a:hover{color:var(--bone)}
.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}
.mobile-menu{display:none}
.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)}
.prop-badges{position:absolute;top:12px;left:12px;display:flex;gap:6px;z-index:2}
.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)}
.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}
.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)}
.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)}
.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)}
.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)}
.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}
@media (max-width:1023px){
.nav-links{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)}
/* 🔴 Esta regla FALTABA en esta hoja y sí estaba en war.css. El menú quedaba
   declarado con `opacity:0; pointer-events:none` y nada lo volvía a encender: en
   TODAS las páginas que usan paginas.css —el catálogo, las fichas, «Por qué WAR»,
   «Contacto» y las guías— la hamburguesa se veía, se podía pulsar, y no pasaba
   nada. Desde el teléfono no había forma de navegar desde esas páginas. Lo
   encontró Javiera desde su iPhone el 8-sep-2026; llevaba así desde el estreno.
   Dos hojas con el mismo componente y solo una completa: lo que se duplica se
   desincroniza. */
.menu-open .mobile-menu{opacity:1;pointer-events:auto}
/* Y la hamburguesa se vuelve una X, que es lo que dice que está abierto. */
.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)}
/* Con el menú abierto la página de atrás no se mueve bajo el dedo. */
.menu-open{overflow:hidden}
.mobile-menu a{color:var(--bone)}
.prop-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}
.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%}
.footer-grid{grid-template-columns:1fr 1fr;gap:32px}
.footer-about{grid-column:1/-1}
}
.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}
.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}
}

/* ===== Ajustes de las páginas nuevas ===== */
/* 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 esto, el filtro «oculta» tarjetas que siguen viéndose. */
.prop[hidden], .cat-empty[hidden], #loadMore[hidden]{ display:none !important; }
.crumb{ font-size:13.5px; color:var(--bone-dim); margin-bottom:18px; display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.crumb a{ color:var(--bone-dim); border-bottom:1px solid transparent; }
.crumb a:hover{ color:var(--copper); border-bottom-color:currentColor; }
.explorar h2{ font-size:clamp(20px,2.4vw,26px); margin-bottom:22px; }
.explorar-cols{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.explorar-cols h3{ font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--copper); margin-bottom:12px; }
.explorar-cols ul{ list-style:none; display:flex; flex-direction:column; gap:8px; }
.explorar-cols a{ font-size:15px; line-height:1.5; border-bottom:1px solid transparent; }
.explorar-cols a:hover{ border-bottom-color:var(--copper); color:var(--copper); }
.explorar-cols span{ color:var(--bone-dim); font-size:13px; }
@media (max-width:820px){ .explorar-cols{ grid-template-columns:1fr; gap:20px; } }
.aviso-idioma{ font-size:14.5px; line-height:1.6; padding:12px 16px; border-radius:10px; margin-bottom:18px;
  background:rgba(205,134,96,.10); border:1px solid rgba(205,134,96,.30); color:var(--bone); }
.simul-aviso{ font-size:13.5px; line-height:1.55; margin-top:12px; padding:10px 13px; border-radius:9px;
  background:rgba(125,74,46,.10); border:1px solid rgba(125,74,46,.28); color:var(--ink); }
.eyebrow-h{ font-family:var(--font-display); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--copper); font-weight:700; margin-bottom:10px; }
.feat-h{ font-size:17px; margin:26px 0 12px; }

/* ===== Bloques de «Por qué WAR», tomados tal cual de la portada ===== */
.band, .zone{ position:relative; overflow:hidden; }
.band > .wrap, .zone > .wrap{ position:relative; z-index:1; }
.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);
}
.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}
.sec-head::before, .cat-head::before{
  content:""; display:block; width:min(420px,78%); aspect-ratio:940/74;
  margin:0 auto 22px; background-color:transparent;
}
.sec-head .eyebrow::before, .cat-head .eyebrow::before{display:none}
.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)}
.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)}
.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}
.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}
@media (max-width:1023px){
.team-grid{grid-template-columns:repeat(2,1fr);max-width:660px}
}
@media (max-width:767px){
.pillar{grid-template-columns:1fr;gap:8px;padding:26px 0}
.pillar .num{font-size:34px}
.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%}
.member-foto--mono{display:none}
}

/* ===== Formularios y contacto ===== */
/* Los controles de formulario NO heredan la tipografía: sin esto caen en la
   fuente por defecto del navegador (Arial en Chrome), que es justo lo que marcó
   el informe en 3.2. Va aquí y en war.css, para todo el sitio. */
input, select, textarea, button{ font-family:inherit; font-size:16px; color:inherit; }
.contacto-wrap{ display:grid; grid-template-columns:1fr 1.05fr; gap:46px; align-items:start; }
.contacto-intro h1{ font-size:clamp(28px,3.6vw,42px); line-height:1.15; margin:6px 0 14px; }
.contacto-datos{ list-style:none; display:flex; flex-direction:column; gap:12px; margin:26px 0 24px; }
.contacto-datos li{ font-size:15.5px; line-height:1.55; }
.contacto-datos strong{ display:block; font-family:var(--font-display); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--copper); margin-bottom:3px; }
.contacto-datos a{ border-bottom:1px solid rgba(125,74,46,.4); }
.contacto-datos a:hover{ color:var(--copper); }
.contacto-mapa{ margin-top:8px; }
.form-war{ background:var(--bg-2); border:1px solid var(--line); border-radius:var(--radius); padding:30px 30px 26px; }
.form-war h2{ font-size:22px; margin-bottom:18px; }
.form-prop{ font-size:14.5px; line-height:1.5; margin-bottom:18px; padding:11px 14px; border-radius:10px;
  background:rgba(205,134,96,.10); border:1px solid rgba(205,134,96,.28); }
.form-prop a{ font-weight:600; border-bottom:1px solid currentColor; }
.form-prop span{ color:var(--bone-dim); }
.campo{ display:block; margin-bottom:16px; }
/* El rótulo va en un <span> con su propio tamaño: dentro de un <label> el texto
   heredaba la regla de mayúsculas y salía gritado y partido en dos columnas. */
.campo > span{ display:block; font-size:14px; font-weight:600; margin-bottom:6px; text-transform:none; letter-spacing:0; }
.campo input, .campo select, .campo textarea{ width:100%; padding:12px 14px; border-radius:10px;
  border:1px solid var(--line); background:var(--bg); color:var(--bone); line-height:1.5; }
.campo textarea{ resize:vertical; min-height:120px; }
.campo input:focus, .campo select:focus, .campo textarea:focus{ outline:2px solid var(--copper); outline-offset:1px; border-color:transparent; }
.campo [aria-invalid="true"]{ border-color:#B4472F; }
.campo .err{ display:block; font-style:normal; font-size:13.5px; color:#B4472F; margin-top:5px; }
.campo-fila{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form-error-top{ font-size:14.5px; color:#B4472F; margin-bottom:14px; }
.form-nota{ font-size:13px; color:var(--bone-dim); margin-top:12px; line-height:1.5; }
.trampa{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.ok-caja{ background:var(--bg-2); border:1px solid rgba(205,134,96,.4); border-radius:var(--radius); padding:34px 30px; }
.ok-caja h2{ font-size:24px; margin-bottom:10px; }
.ok-caja p{ margin-bottom:14px; line-height:1.6; }
.oficina-foto{ margin-top:34px; }
.oficina-foto img{ width:100%; height:auto; border-radius:var(--radius); }
.oficina-foto figcaption{ font-size:13.5px; color:var(--bone-dim); margin-top:10px; line-height:1.5; }
@media (max-width:900px){
  .contacto-wrap{ grid-template-columns:1fr; gap:34px; }
  .campo-fila{ grid-template-columns:1fr; }
  .form-war{ padding:24px 20px 22px; }
}

/* ===== El pie es una BANDA OSCURA dentro de páginas claras ===== */
/* La hoja de la ficha deja el cuerpo en claro (texto azul sobre papel), así que
   el pie —que va sobre azul oscuro— heredaba texto oscuro sobre fondo oscuro y
   los títulos de columna desaparecían. En vez de repintar veinte reglas, la
   banda redefine sus tokens y los componentes de dentro se adaptan solos
   (mismo criterio que usó el sitio al pasar a claro el 4-sep). */
.footer{
  --bg:#0C202C; --bg-2:#112F40; --bone:#F9F8F8; --bone-dim:#BDB8AB;
  --copper:#CD8660; --copper-soft:#D69C7C; --line:rgba(249,248,248,.12);
  color:var(--bone); text-align:left; padding:46px 0 0;
}
.footer h4{ color:var(--bone); }
.footer a{ color:var(--bone-dim); }
.footer a:hover{ color:var(--copper); }
.footer .footer-bottom{ color:var(--bone-dim); }

/* Los filtros de operación pasaron de <button> a <a>: son direcciones propias y
   se pueden compartir e indexar. Los estilos tienen que alcanzar a los dos. */
.op-toggle a{ 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;
  min-height:44px; display:inline-flex; align-items:center; transition:background .25s,color .25s; }
.op-toggle a.active{ background:var(--copper); color:var(--light); }
.op-toggle a:hover{ color:var(--copper); }
.op-toggle a.active:hover{ color:var(--light); }
.search{ display:flex; align-items:center; }

/* Compartir: el botón de WhatsApp pasó a ser un enlace de verdad (se puede abrir
   en otra pestaña y funciona sin JavaScript). */
.share a svg{ width:17px; height:17px; fill:currentColor; }

/* ===== Tarjetas de las guías (mismas que la banda «Aprende» de la portada) ===== */
.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)}
@media (max-width:1023px){
.post-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:767px){
.post-grid{grid-template-columns:1fr;gap:16px}
}

/* ===== Lo que faltaba para el teléfono =====
   La hoja de la ficha nunca tuvo menú (sólo el logo y un «volver»). Al poner el
   menú de cinco entradas en todas las páginas, en 360 px el botón de WhatsApp se
   salía 89 px de la pantalla: la regla que lo esconde vivía sólo en la portada. */
@media (max-width:1023px){
  .nav > .wrap > .btn{ display:none; }
  .team-grid{ grid-template-columns:repeat(2,1fr); max-width:660px; }
  .post-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:767px){
  .team-grid{ grid-template-columns:1fr; max-width:420px; }
  .post-grid{ grid-template-columns:1fr; }
  .filters{ flex-direction:column; align-items:stretch; }
  .footer-grid{ grid-template-columns:1fr; gap:26px; }
  .contacto-wrap{ grid-template-columns:1fr; }
}
/* El pie no puede empujar la página a lo ancho en pantallas estrechas. */
.footer-about{ min-width:0; }
.footer-about p{ overflow-wrap:anywhere; }

/* =========================================================================
   FICHA DE PROPIEDAD — maqueta del 7-sep-2026
   Cabecera con el precio a la derecha y una tira de datos clave · galería con
   miniaturas · cuerpo a dos columnas con la ficha desglosada por temas y la
   tarjeta del asesor pegada al scroll · ubicación con el mapa y las distancias.
   ========================================================================= */
.fichap{ background:var(--light); color:var(--ink); }
.fichap .wrap{ max-width:1240px; }

/* --- cabecera --- */
.f-cab{ padding:26px 0 22px; background:var(--light); border-bottom:1px solid var(--line-light); }
.f-cab .crumb{ margin-bottom:14px; color:var(--ink-dim); }
.f-cab .crumb a{ color:var(--ink-dim); }
.f-cab .crumb a:hover{ color:var(--copper-ink); }
.f-cab-fila{ display:flex; gap:28px; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; }
.f-cab-txt{ flex:1 1 460px; min-width:0; }
.f-cab h1{ font-size:clamp(23px,2.7vw,32px); line-height:1.2; color:var(--ink); margin-bottom:6px; text-wrap:balance; }
.f-sub{ font-size:15.5px; color:var(--ink-dim); }
.f-marcas{ display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.marca{ font-family:var(--font-display); font-size:12.5px; font-weight:700; letter-spacing:.03em;
  padding:5px 13px; border-radius:999px; }
.marca.op{ background:var(--copper-ink); color:#F9F8F8; }
.marca.disp{ background:rgba(32,110,70,.12); color:#1d6b45; border:1px solid rgba(32,110,70,.28); }
.marca.dest{ background:rgba(205,134,96,.16); color:var(--copper-ink); border:1px solid rgba(205,134,96,.35); }
.marca.cerrada{ background:rgba(18,51,70,.10); color:var(--ink-dim); border:1px solid var(--line-light); }
.f-precio{ text-align:right; padding-left:24px; border-left:2px solid rgba(125,74,46,.30); }
.f-precio b{ display:block; font-family:var(--font-display); font-size:clamp(26px,3.4vw,34px); font-weight:700;
  color:var(--copper-ink); line-height:1.05; }
.f-precio span{ display:block; font-size:14.5px; color:var(--ink-dim); margin-top:4px; }
.f-precio b.cerrado{ color:var(--ink-dim); font-size:26px; }
.f-tira{ list-style:none; display:flex; flex-wrap:wrap; gap:12px 34px; margin-top:20px; }
.f-tira li{ display:flex; align-items:center; gap:10px; }
.f-tira-txt{ display:flex; flex-direction:column; line-height:1.25; }
.f-tira-txt b{ font-family:var(--font-display); font-size:15.5px; font-weight:700; color:var(--ink); }
.f-tira-txt i{ font-style:normal; font-size:12.5px; color:var(--ink-dim); }
.f-ico{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none;
  border-radius:9px; background:rgba(205,134,96,.12); }
.f-ico svg{ width:18px; height:18px; fill:none; stroke:var(--copper-ink); stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

/* --- galería --- */
.f-galeria{ padding:18px 0 0; }
.f-galeria .gmain{ position:relative; aspect-ratio:16/8.2; overflow:hidden; background:#0B1D28; }
.f-galeria .gmain img{ width:100%; height:100%; object-fit:cover; display:block; cursor:zoom-in; }
.f-galeria .garr{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border:none;
  border-radius:50%; background:rgba(249,248,248,.92); color:var(--ink); font-size:24px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(9,24,33,.25); }
.f-galeria .garr.prev{ left:18px; } .f-galeria .garr.next{ right:18px; }
.f-galeria .gcount{ position:absolute; left:18px; bottom:16px; background:rgba(12,32,44,.72); color:#F9F8F8;
  font-size:13px; font-weight:600; padding:5px 11px; border-radius:8px; }
.f-galeria .gver{ position:absolute; right:18px; bottom:16px; display:inline-flex; align-items:center; gap:8px;
  background:rgba(12,32,44,.78); color:#F9F8F8; border:none; cursor:pointer; font-family:var(--font-display);
  font-weight:600; font-size:13.5px; padding:9px 15px; border-radius:9px; }
.f-galeria .gver svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; }
.f-galeria .gver:hover{ background:var(--copper-ink); }
.f-galeria .gthumbs{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; margin-top:8px; }
.f-galeria .gthumbs img{ width:100%; aspect-ratio:16/10; object-fit:cover; cursor:pointer; border-radius:6px;
  opacity:.72; transition:opacity .25s, outline-color .25s; outline:2px solid transparent; }
.f-galeria .gthumbs img:hover, .f-galeria .gthumbs img.active{ opacity:1; outline-color:var(--copper-ink); }

/* --- cuerpo a dos columnas --- */
.f-cuerpo{ padding:34px 0 46px; }
.f-grid{ display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:34px; align-items:start; }
.f-col{ min-width:0; }
.f-aside{ position:sticky; top:86px; display:flex; flex-direction:column; gap:16px; }
.f-rot{ font-family:var(--font-display); font-size:16.5px; font-weight:700; color:var(--ink);
  padding-left:11px; border-left:3px solid var(--copper-ink); line-height:1.25; margin-bottom:12px; }
.f-bloque{ margin-bottom:26px; }
.f-bloque p{ font-size:15.5px; line-height:1.62; color:var(--ink); margin-bottom:10px; }
.f-lead{ font-size:16px; line-height:1.62; }
.f-dos{ display:grid; grid-template-columns:1fr 1fr; gap:8px 30px; }
@media (max-width:900px){ .f-dos{ grid-template-columns:1fr; } }
.f-checks{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.f-checks li{ position:relative; padding-left:26px; font-size:14.8px; line-height:1.55; color:var(--ink); }
.f-checks li::before{ content:""; position:absolute; left:0; top:.28em; width:16px; height:16px; border-radius:4px;
  background:rgba(205,134,96,.14) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D4A2E' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") no-repeat center/10px; }
.f-tecnica{ list-style:none; display:grid; grid-template-columns:repeat(auto-fit,minmax(132px,1fr)); gap:14px;
  border:1px solid var(--line-light); border-radius:12px; padding:16px 18px; background:var(--light-2); }
.f-tecnica li{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.f-tecnica b{ font-family:var(--font-display); font-size:16px; color:var(--ink); line-height:1.15; }
.f-tecnica i{ font-style:normal; font-size:12.5px; color:var(--ink-dim); }

/* --- tarjetas de la columna derecha --- */
.f-tarjeta{ background:var(--light-2); border:1px solid var(--line-light); border-radius:14px; padding:20px;
  box-shadow:0 2px 10px -6px rgba(14,40,55,.25); }
.ag-top{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
.ag-top img{ width:54px; height:54px; border-radius:50%; object-fit:cover; flex:none; }
.ag-top b{ display:block; font-family:var(--font-display); font-size:16px; color:var(--ink); }
.ag-top span{ font-size:13px; color:var(--ink-dim); }
.ag-dato{ font-size:14.5px; margin-bottom:6px; word-break:break-word; }
.ag-dato a{ color:var(--ink); border-bottom:1px solid rgba(125,74,46,.35); }
.ag-dato a:hover{ color:var(--copper-ink); }
.ag-aviso{ font-size:13.5px; line-height:1.5; color:var(--ink-dim); background:rgba(18,51,70,.05);
  border-radius:9px; padding:10px 12px; margin:10px 0; }
.f-tarjeta .btn{ width:100%; margin-top:10px; gap:9px; }
.btn-wa{ background:#1fa855; color:#fff; }
.btn-wa:hover{ background:#188c46; }
.btn-wa svg{ width:18px; height:18px; fill:currentColor; }
.btn-linea{ background:transparent; color:var(--ink); border:1px solid rgba(18,51,70,.28); }
.btn-linea:hover{ border-color:var(--copper-ink); color:var(--copper-ink); }
.btn-linea svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.8; }
.ag-share{ display:flex; align-items:center; gap:8px; margin-top:16px; font-size:13.5px; color:var(--ink-dim); position:relative; }
.ag-share a, .ag-share button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line-light);
  background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; }
.ag-share a:hover, .ag-share button:hover{ border-color:var(--copper-ink); color:var(--copper-ink); }
.ag-share svg{ width:15px; height:15px; }
.ag-share a svg{ fill:currentColor; }
.ag-share .copied{ position:absolute; right:0; bottom:-22px; font-size:12px; color:var(--copper-ink); opacity:0; transition:opacity .25s; }
.ag-share .copied.show{ opacity:1; }
.ag-codigo{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line-light); font-size:13px; color:var(--ink-dim); }
.f-tarjeta.simul .sub{ font-size:13.5px; color:var(--ink-dim); margin:-6px 0 12px; line-height:1.5; }

/* --- ubicación --- */
.f-mapa{ padding:10px 0 40px; }
.f-mapa-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:20px; align-items:stretch; }
.f-mapa .map-frame{ border-radius:14px; overflow:hidden; border:1px solid var(--line-light); min-height:330px; background:var(--bg-2); }
.f-mapa .map-frame iframe{ width:100%; height:100%; min-height:330px; border:0; display:block; }
.f-lugar{ display:flex; flex-direction:column; gap:10px; }
.lugar-nom{ display:flex; align-items:center; gap:10px; }
.lugar-nom b{ font-family:var(--font-display); font-size:16px; color:var(--ink); }
.lugar-dir{ font-size:14.5px; color:var(--ink-dim); line-height:1.55; }
.lugar-btns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:auto; }
.lugar-btns .btn{ flex:1 1 auto; font-size:14px; padding:11px 16px; }
.lugar-nota{ font-size:12.5px; color:var(--ink-dim); line-height:1.5; }

/* --- similares --- */
.sim-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-bottom:20px; }
.sim-cab h2{ font-size:clamp(20px,2.3vw,26px); }
.sim-todas{ font-family:var(--font-display); font-weight:600; font-size:14.5px; color:var(--copper-ink); }
.sim-todas:hover{ border-bottom:1px solid currentColor; }
.sim-grid{ grid-template-columns:repeat(3,1fr); }

@media (max-width:1023px){
  .f-grid{ grid-template-columns:1fr; }
  .f-aside{ position:static; }
  .f-mapa-grid{ grid-template-columns:1fr; }
  .sim-grid{ grid-template-columns:repeat(2,1fr); }
  .f-galeria .gthumbs{ grid-template-columns:repeat(4,1fr); }
}
@media (max-width:767px){
  .f-cab-fila{ gap:16px; }
  .f-precio{ text-align:left; padding-left:0; border-left:none; border-top:1px solid var(--line-light); padding-top:12px; width:100%; }
  .f-tira{ gap:12px 20px; }
  .sim-grid{ grid-template-columns:1fr; }
  .f-galeria .gthumbs{ grid-template-columns:repeat(3,1fr); }
  .f-galeria .gmain{ aspect-ratio:4/3; }
  .f-galeria .gver{ font-size:12.5px; padding:8px 12px; }
}
/* --- correcciones de la maqueta --- */
/* El subtítulo heredaba las mayúsculas de la regla de `.loc` de la ficha vieja:
   «PIEDRA AMARILLA, VILLARRICA · PARCELA» se leía como un grito. */
.f-sub{ text-transform:none; letter-spacing:0; }
/* El marco del mapa va sobre banda clara: en oscuro se veía un rectángulo negro
   mientras el iframe carga (y queda así si no carga). */
.fichap .map-frame{ background:rgba(18,51,70,.06); }
/* El enlace de vuelta al catálogo, en la barra de la ficha. */
.nav .volver{ font-family:var(--font-display); font-size:14px; font-weight:600; color:var(--bone-dim);
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
.nav .volver:hover{ color:var(--copper-soft); }
/* En el grupo de compartir, sólo el icono de WhatsApp es de relleno; los otros
   dos son de trazo y salían como un cuadrado negro. */
.ag-share a svg{ fill:none; stroke:currentColor; stroke-width:1.8; }
.ag-share #shWa svg{ fill:currentColor; stroke:none; }
@media (max-width:1023px){ .nav .volver{ display:none; } }
/* `.map-frame` trae `aspect-ratio:21/9` de la ficha antigua. Junto a un
   `min-height:330px` el navegador despeja la ANCHURA: 330 × 21/9 = 770 px, y en
   un teléfono de 360 la página se iba 434 px a la derecha. En esta maqueta el
   alto lo manda la columna, no la proporción. */
.f-mapa .map-frame{ aspect-ratio:auto; height:100%; }
/* Contraste AA: blanco sobre #1fa855 daba 3,09:1 (es el mismo defecto que se
   corrigió el 4-sep y que había que no repetir). */
.btn-wa{ background:#157a3d; }
.btn-wa:hover{ background:#11602f; }
.marca.dest{ background:rgba(205,134,96,.10); color:#663B24; }

/* ===== Galería: la foto manda, no el marco =====
   Las fotografías que trajo el portal miden 800 px en su lado mayor y vienen en
   todas las formas. El marco a pantalla completa con recorte hacía dos destrozos
   a la vez: agrandaba una foto de 800 px hasta 1.440 —pixelada— y de una foto
   vertical mostraba una franja del medio. Ahora el alto lo da la proporción real
   de la primera foto, el ancho no pasa de un 20 % sobre su tamaño real, y la
   imagen va CONTENIDA: nunca se recorta. */
.f-galeria{ max-width:var(--ancho-galeria,1000px); margin:0 auto; padding:20px 24px 0; }
.f-galeria .gmain{ aspect-ratio:var(--marco,16/9); max-height:min(70vh,640px); border-radius:14px;
  background:#0D2330; }
.f-galeria .gmain img{ object-fit:contain; }
.f-galeria .gthumbs{ grid-template-columns:repeat(5,1fr); margin-top:10px; }
.f-galeria .gthumbs img{ aspect-ratio:4/3; border-radius:7px; background:#0D2330; }
.f-galeria .garr{ width:40px; height:40px; }
@media (max-width:767px){
  .f-galeria{ padding:14px 16px 0; }
  .f-galeria .gmain{ aspect-ratio:var(--marco,16/9); max-height:56vh; }
  .f-galeria .gthumbs{ grid-template-columns:repeat(4,1fr); }
}

/* ===== El desglose del aviso, en dos columnas de verdad =====
   Con `grid` de dos columnas, cada FILA mide lo que el bloque más alto, así que
   un bloque corto dejaba un hueco enorme debajo y la ficha se veía rota por la
   mitad. Con columnas de texto los bloques se van acomodando uno tras otro y no
   queda aire muerto. `break-inside` evita que un bloque quede partido. */
.f-dos{ display:block; column-count:2; column-gap:32px; }
.f-dos > .f-bloque{ break-inside:avoid; page-break-inside:avoid; margin:0 0 24px; display:inline-block; width:100%; }
@media (max-width:900px){ .f-dos{ column-count:1; } }

/* El marco del mapa quedaba más bajo que la tarjeta de al lado y la última fila
   de baldosas salía cortada. */
.f-mapa-grid{ align-items:stretch; }
.f-mapa .map-frame{ min-height:380px; }
.f-lugar{ justify-content:flex-start; }

/* ===== La foto principal, a pantalla completa =====
   El escenario ocupa todo el ancho de la ventana y la foto va centrada dentro,
   entera y con tope de ampliación: las fotografías miden 800 px en su lado mayor
   y estirarlas hasta 1.440 las deja pixeladas —fue el defecto que hubo que
   arreglar—. Así se ve grande de verdad sin verse rota, y ninguna se recorta. */
.f-galeria{ max-width:none; margin:0; padding:0; background:#0C202C; }
.f-galeria .gmain{ aspect-ratio:auto; height:min(76vh, 780px); max-height:none; border-radius:0;
  display:flex; align-items:center; justify-content:center; }
/* La foto CRECE hasta llenar el escenario, pero nunca más allá de su tope: con
   `width:auto` se quedaba en su tamaño original y dejaba dos franjas negras
   enormes a los lados. */
.f-galeria .gmain img{ width:100%; height:100%;
  max-width:var(--foto-max-ancho, 1400px);
  max-height:var(--foto-max-alto, 780px);
  object-fit:contain; }
.f-galeria .garr{ width:46px; height:46px; }
.f-galeria .garr.prev{ left:26px; } .f-galeria .garr.next{ right:26px; }
.f-galeria .gcount{ left:26px; bottom:22px; }
.f-galeria .gver{ right:26px; bottom:22px; }
.f-galeria .gthumbs{ max-width:1240px; margin:0 auto; padding:10px 24px 0; background:var(--light); }
@media (max-width:767px){
  /* En el teléfono el escenario toma la FORMA de la foto en vez de una altura
     fija: con altura fija quedaba una banda negra arriba y abajo de una foto
     apaisada, y la pantalla se veía medio vacía. */
  .f-galeria .gmain{ height:auto; aspect-ratio:var(--marco, 16/9); max-height:72vh; }
  .f-galeria .garr{ width:38px; height:38px; }
  .f-galeria .garr.prev{ left:12px; } .f-galeria .garr.next{ right:12px; }
  .f-galeria .gcount{ left:14px; bottom:14px; }
  .f-galeria .gver{ right:14px; bottom:14px; }
  .f-galeria .gthumbs{ padding:10px 16px 0; }
}
/* En pantalla completa la capa del visor es la pantalla: sin bordes ni radios. */
.lb:fullscreen{ width:100vw; height:100vh; background:#0A1A24; }
.lb:-webkit-full-screen{ width:100vw; height:100vh; background:#0A1A24; }

/* =========================================================================
   PLANTILLA ESTRUCTURADA DE LA FICHA (8-sep-2026)
   Tamaños pedidos por WAR: títulos de sección 22–28 px, cuerpo mínimo 16,
   viñetas y datos 15–16, interlineado 1,5 y nada de grises demasiado claros
   sobre el fondo de papel.
   ========================================================================= */
.f-rot{ font-size:clamp(20px,2.1vw,24px); font-weight:600; line-height:1.25;
  padding-left:13px; border-left-width:3px; margin-bottom:14px; }
.f-bloque{ margin-bottom:30px; }
.f-bloque p{ font-size:16.5px; line-height:1.62; color:var(--ink); }
.f-resumen{ font-size:17px; line-height:1.62; font-weight:400; color:var(--ink); max-width:70ch; }
.f-ampliada{ max-width:72ch; }                 /* ancho de columna que se lee bien */
.f-checks li{ font-size:15.8px; line-height:1.55; padding-left:27px; }
.f-tecnica b{ font-size:17px; }
.f-tecnica i{ font-size:13.5px; color:var(--ink-dim); }
.f-tira-txt b{ font-size:16px; }
.f-tira-txt i{ font-size:13.5px; }

/* Un servicio que NO está, o que está a medias, se dice con todas sus letras:
   publicar «Alcantarillado» a secas cuando está en trámite sería mentir. */
.f-checks li.sin{ color:var(--ink-dim); }
.f-checks li.sin::before{ background:rgba(18,51,70,.07)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23506C7C' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") no-repeat center/9px; }
.f-checks li em{ font-style:normal; font-size:13.5px; font-weight:600; color:var(--copper-ink);
  background:rgba(205,134,96,.12); padding:2px 8px; border-radius:999px; margin-left:6px; white-space:nowrap; }
.f-checks li.parcial::before{ background:rgba(205,134,96,.14)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237D4A2E' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E") no-repeat center/10px; }

/* Acceso y distancias: dato → valor, en filas que se escanean de una pasada. */
.f-datos{ display:flex; flex-direction:column; gap:0; margin:0; }
.f-datos > div{ display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:9px 0; border-bottom:1px solid var(--line-light); }
.f-datos > div:last-child{ border-bottom:none; }
.f-datos dt{ font-size:15.5px; color:var(--ink-dim); }
.f-datos dd{ margin:0; font-size:15.8px; font-weight:600; color:var(--ink); text-align:right;
  font-variant-numeric:tabular-nums; }
.f-codigo{ display:inline-block; margin-left:10px; font-family:var(--dato,var(--font-body));
  font-size:13px; color:var(--ink-dim); border-left:1px solid var(--line-light); padding-left:10px; }