/*
Theme Name: Santa Graciela
Theme URI: https://santagraciela.cl
Author: Santa Graciela SpA
Description: Tema a medida de Santa Graciela. Desarrollos inmobiliarios y constructivos en la Región del Maule. Sin dependencia de maquetadores ni licencias de terceros.
Version: 2.39
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: santagraciela
*/

/* ==========================================================================
   Sistema visual — ver capítulo 8 bis del documento de Fase 1.
   Paleta oficial únicamente. Un solo gris de texto (7540 C).
   Cool Gray 5 CP reservado al pie. 417 U y 4271 CP nunca llevan texto.
   ========================================================================== */

:root{
  /* Paleta oficial del manual de marca */
  --p418:#4a4a4a;      /* Pantone 7540 C         · gris de texto (nombre historico) */
  --calido:#978573;    /* Pantone 7530 C         · taupe terroso */
  --terracota:#986b58; /* Pantone 7723 C         · solo destacados, cajas y botones */
  --gris5:#b1aaa5;     /* Pantone 407 C          · pie y fondos de marcador */
  --negro:#3e3c38;     /* Pantone Black 7 C      · texto y fondo oscuro */
  --p7527:#d7d2c5;     /* Pantone 7527 C         · arena, fondo base */
  --p7540:#4a4a4a;     /* Pantone 7540 C         · gris oscuro */
  --arena-cl:#e8e4da;  /* 7527 C al 65% */
  --papel:#f4f2ec;     /* 7527 C al 30% */
  --linea:rgba(62,60,56,.20);
  --tipo:'Montserrat',system-ui,sans-serif;
  --maxw:1240px;
  --fondo:url(img/fondo-empresa.webp);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--p7527);color:var(--negro);font-family:var(--tipo);font-size:16px;line-height:1.7;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
p{margin:0 0 1em}

/* Titulares: Montserrat liviana, versalitas espaciadas — voz del brand book */
h1,h2,h3{font-family:var(--tipo);margin:0;line-height:1.14;font-weight:300;letter-spacing:.01em}
h1{font-size:clamp(2rem,4.6vw,3.5rem);text-transform:uppercase;letter-spacing:.02em}
h2{font-size:clamp(1.5rem,3vw,2.4rem);text-transform:uppercase;letter-spacing:.03em}
h3{font-size:1.05rem;font-weight:500;letter-spacing:.04em;text-transform:uppercase}
.h-fuerte{font-weight:500}
.u{text-transform:none}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}
.sec{padding:86px 0;position:relative}
.sec--osc{background:var(--negro);color:var(--p7527)}
.sec--osc h1,.sec--osc h2,.sec--osc h3{color:#fff}
.sec--gris{background:var(--p418);color:var(--p7527)}
.sec--gris h2,.sec--gris h3{color:#fff}
.sec--papel{background:var(--papel)}

.rotulo{font-size:.7rem;letter-spacing:.28em;text-transform:uppercase;color:#4a4a4a;margin-bottom:22px;font-weight:600;display:flex;align-items:center;gap:16px}
.rotulo::after{content:"";flex:1;height:1px;background:var(--linea)}
.sec--osc .rotulo,.sec--gris .rotulo{color:var(--p7527)}
.sec--osc .rotulo::after,.sec--gris .rotulo::after{background:rgba(215,210,197,.3)}
.bajada{font-size:1.02rem;max-width:62ch;font-weight:400;color:var(--p418)}
.dato{font-weight:600;letter-spacing:.02em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:0;cursor:pointer;font-family:var(--tipo);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;padding:15px 28px;text-decoration:none;transition:.18s}
.btn--pri{background:var(--terracota);color:#fff}
.btn--pri:hover{background:var(--negro);color:#fff}
.btn--cl{background:var(--p7527);color:var(--negro)}
.btn--wa{background:#25D366;color:#fff}
.btn--wa:hover{background:#1da851;color:#fff}


.btn--cl:hover{background:#fff}
.btn--linea{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor}
.btn--linea:hover{background:currentColor}
.btn--linea:hover span{color:var(--p7527)}
:focus-visible{outline:2px solid var(--negro);outline-offset:3px}

/* fondo corporativo · lámpara de oficina, origen del isotipo */
.fondo-emp{position:absolute;inset:0;background-image:var(--fondo);background-size:cover;background-position:center;pointer-events:none;z-index:0}
.fondo-emp::after{content:"";position:absolute;inset:0;background:var(--p7527);opacity:.74}
.fondo-emp::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse 72% 78% at 50% 50%, rgba(62,60,56,0) 42%, rgba(62,60,56,.16) 74%, rgba(62,60,56,.34) 100%)}
.fondo-emp--osc::after{background:var(--negro);opacity:.62}
.fondo-emp--osc::before{background:radial-gradient(ellipse 70% 76% at 50% 50%, rgba(0,0,0,0) 40%, rgba(0,0,0,.28) 76%, rgba(0,0,0,.55) 100%)}

/* trama corporativa */
.trama{position:absolute;inset:0;opacity:.5;pointer-events:none;
  background-image:url(img/hero.jpg)}

/* marca */
.marca{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-decoration:none}
.marca svg{width:32px;height:32px;margin-left:56px}
.marca__t{font-size:1.02rem;font-weight:400;letter-spacing:.13em;line-height:1.08;text-transform:uppercase}
.head .marca svg{width:26px;height:26px;margin-left:46px}
.head .marca__t{font-size:.86rem}

/* barra maqueta */
.mk{background:var(--negro);color:var(--p7527);padding:9px 28px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;position:sticky;top:0;z-index:95;font-weight:500}
.mk__v{display:flex;gap:5px;margin-left:auto;flex-wrap:wrap}
.mk__v button{font-family:var(--tipo);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;padding:6px 13px;background:rgba(215,210,197,.16);color:var(--p7527);border:0;cursor:pointer;font-weight:500}
.mk__v button.on{background:var(--p7527);color:var(--negro);font-weight:600}

/* header */
.head{position:sticky;top:35px;z-index:80;background:rgba(244,242,236,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--linea)}
.head__in{max-width:var(--maxw);margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:26px}
.nav{display:flex;gap:30px;margin-left:auto;font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;align-items:center}
.nav>div{position:relative}
.nav button{background:none;border:0;font-family:var(--tipo);font-size:.73rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;cursor:pointer;padding:10px 0;border-bottom:1px solid transparent;color:inherit}
.nav button:hover,.nav button.on{border-color:var(--negro)}
.drop{position:absolute;top:100%;left:-18px;background:var(--papel);border:1px solid var(--linea);min-width:240px;opacity:0;visibility:hidden;transition:.15s;box-shadow:0 16px 38px rgba(62,60,56,.14);z-index:90}
.nav>div:hover .drop{opacity:1;visibility:visible}
.drop button{width:100%;text-align:left;padding:14px 20px;border-bottom:1px solid var(--linea);font-weight:500;letter-spacing:.1em}
.drop button:last-child{border-bottom:0}
.drop button:hover{background:var(--p7527);border-color:transparent}
@media(max-width:1000px){.nav{display:none}}



/* duotono corporativo */
.duo{filter:grayscale(1) contrast(1.06) brightness(.95);}
.duo-w{position:relative;overflow:hidden;background:var(--negro)}
.duo-w::after{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.55;pointer-events:none}

/* hero — layout del letrero corporativo: marca izq, foto der */
.hero{background:var(--p7527);position:relative;overflow:hidden;min-height:min(76vh,640px);display:flex;flex-direction:column;justify-content:center;padding:96px 0 88px}
.hero__in{position:relative;z-index:2;max-width:720px;margin:0 auto;text-align:center}
.hero__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:38px;justify-content:center}
.hero h1{color:var(--negro);max-width:20ch;margin:0 auto;font-weight:200;font-size:clamp(1.7rem,3.1vw,2.55rem);line-height:1.2}
.hero h1 b{font-weight:500}
.hero__h1 span{display:block;margin:24px auto 0;font-size:clamp(.95rem,1.4vw,1.08rem);font-weight:400;text-transform:none;letter-spacing:.01em;line-height:1.65;color:#4a4a4a;max-width:62ch}
.hero__p{max-width:40ch;margin:24px 0 32px;font-weight:300;color:var(--p418)}
.hero__foto{position:relative;overflow:hidden;min-height:430px;background:var(--negro)}
.hero__foto img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.hero__iso{position:absolute;inset:0;display:grid;place-items:center;z-index:3}
.hero__iso svg{width:78px;height:78px}
.hero__firma{font-size:.76rem;letter-spacing:.2em;font-weight:600;color:var(--p418);text-transform:lowercase}
@media(max-width:1000px){.hero__g{grid-template-columns:1fr;gap:32px}.hero__foto{min-height:280px}}

/* cinta de datos duros — como el letrero de proyecto */
.cinta{margin-top:74px;border-top:1px solid var(--linea);display:grid;grid-template-columns:repeat(4,1fr);position:relative;z-index:2}
.cinta--3{grid-template-columns:repeat(3,1fr)}
.cinta div{padding:26px 22px 32px;border-left:1px solid var(--linea)}
.cinta div:first-child{border-left:0;padding-left:0}
.cinta b{font-size:1.75rem;font-weight:200;display:block;color:var(--negro);letter-spacing:.01em}
.cinta span{font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:#4a4a4a;font-weight:600;margin-top:6px;display:block}
@media(max-width:880px){.cinta{grid-template-columns:1fr 1fr}.cinta div{border-left:0;border-top:1px solid var(--linea);padding-left:0}.cinta div:nth-child(-n+2){border-top:0}}

/* estandar */
.est{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:44px}
.est div{background:var(--papel);padding:30px 26px 34px}
.est svg{width:26px;height:26px;stroke:var(--p418);fill:none;stroke-width:1.3;margin-bottom:16px}
.est h3{margin-bottom:9px;font-size:.82rem;letter-spacing:.13em}
.est h3
.est p{font-size:.9rem;font-weight:400;color:#4a4a4a;margin:0}
@media(max-width:880px){.est{grid-template-columns:1fr}}

/* tres mundos */
.mundos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:44px}
.mundo{position:relative;overflow:hidden;text-decoration:none;background:var(--negro);aspect-ratio:4/5;display:flex;align-items:flex-end}
.mundo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.6s}
.mundo:hover img{transform:scale(1.05)}
.mundo::before{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.5;z-index:2}
.mundo::after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 30%,rgba(62,60,56,.92));z-index:3}
.mundo__t{position:relative;z-index:4;padding:28px;color:#fff;width:100%}
.mundo__t h3{color:#fff;font-size:1.1rem;font-weight:300;letter-spacing:.14em;margin-bottom:8px}
.mundo__t p{font-size:.85rem;color:rgba(215,210,197,.6);font-weight:300;margin:0 0 14px}
.mundo__t span{font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--p7527)}
/* En una columna el texto no cabe sobre la foto: la tarjeta se parte en dos,
   la imagen arriba y el texto debajo sobre el fondo oscuro. Así el título y
   los contadores se leen siempre, aunque la foto sea clara. */
@media(max-width:880px){
  .mundos{grid-template-columns:1fr}
  .mundo{aspect-ratio:auto;display:block}
  .mundo img{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/10;filter:grayscale(.4)}
  .mundo::before,.mundo::after{display:none}
  .mundo__t{padding:22px 22px 26px}
  .mundo__t p{color:rgba(215,210,197,.75)}
}

/* filtros */
.filtros{display:flex;gap:26px;flex-wrap:wrap;align-items:flex-end;padding:24px 0 26px;border-bottom:1px solid var(--linea);margin-bottom:34px}
.fg label{display:block;font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:var(--p418);margin-bottom:10px;font-weight:600}
.fch{display:flex;gap:6px;flex-wrap:wrap}
.chip{font-family:var(--tipo);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:9px 15px;border:1px solid var(--linea);background:transparent;cursor:pointer;color:var(--p418);transition:.15s}
.chip:hover{border-color:var(--negro)}
.chip.on{background:var(--negro);color:var(--p7527);border-color:var(--negro)}
.conteo{margin-left:auto;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--p418);padding-bottom:10px;font-weight:600}

/* tarjeta — jerarquía del letrero: dato duro arriba */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
@media(max-width:1000px){.grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.grid{grid-template-columns:1fr}}
.card{background:var(--papel);border:1px solid var(--linea);text-decoration:none;display:flex;flex-direction:column;transition:.2s}
.card:hover{border-color:var(--p418);transform:translateY(-2px)}
.card__i{aspect-ratio:16/10;overflow:hidden;background:var(--gris5);position:relative}
.card__i img{width:100%;height:100%;object-fit:cover}
.card__i::before{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.45;z-index:2}
.badge{position:absolute;top:0;left:0;z-index:4;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;padding:7px 13px;font-weight:600;box-shadow:0 0 0 1px rgba(215,210,197,.45)}
.card__b{padding:22px;display:flex;flex-direction:column;flex:1}
.card__dato{font-size:1.5rem;font-weight:200;color:var(--negro);line-height:1;margin-bottom:4px}
.card__c{font-size:.64rem;letter-spacing:.2em;text-transform:uppercase;color:#4a4a4a;font-weight:600;margin-bottom:14px}
.card h3{margin-bottom:18px;font-size:.92rem;letter-spacing:.1em;color:var(--negro);flex:1}
.card__d{font-size:.86rem;font-weight:400;color:#4a4a4a;margin:0 0 16px;flex:1}
.card__f{display:flex;gap:22px;flex-wrap:wrap;border-top:1px solid var(--linea);padding-top:14px;font-size:.78rem;font-weight:500}
.card__f em{font-style:normal;display:block;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--p418);margin-bottom:3px;font-weight:600}
.card--ent{opacity:.66}.card--ent:hover{opacity:1}
.vacio{padding:56px 0;text-align:center;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p418);grid-column:1/-1}

/* ficha */
.fh{background:var(--negro);color:#fff;position:relative;min-height:420px;display:flex;align-items:flex-end;overflow:hidden}
.fh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.fh::before{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.5;z-index:2}
.fh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(62,60,56,.35),rgba(62,60,56,.94));z-index:3}
.fh--emp::before,.fh--emp::after{display:none}
.fh--emp{min-height:320px}
.fh--emp .fh__in{padding-top:76px;padding-bottom:46px}
.fh__in{position:relative;z-index:4;width:100%;max-width:var(--maxw);margin:0 auto;padding:82px 28px 42px}
.fh h1{color:#fff;font-size:clamp(1.8rem,4vw,3rem);font-weight:200}
.head__proy{display:none;height:auto;width:132px;padding-left:22px;border-left:1px solid var(--linea)}
body.proy-fsm .head__proy{display:block}
@media(max-width:620px){.head__proy{width:96px;padding-left:14px}}
.migas{font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(215,210,197,.6);margin-bottom:18px;font-weight:600}
.datos{display:grid;grid-template-columns:repeat(4,1fr);background:var(--papel);border:1px solid var(--linea);border-top:0}
.datos div{padding:24px 22px;border-left:1px solid var(--linea)}
.datos div:first-child{border-left:0}
.datos b{font-size:1.4rem;font-weight:200;display:block;color:var(--negro)}
.datos span{font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p418);display:block;margin-top:5px;font-weight:600}
@media(max-width:880px){.datos{grid-template-columns:1fr 1fr}.datos div{border-left:0;border-top:1px solid var(--linea)}.datos div:nth-child(-n+2){border-top:0}}
.cols{display:grid;grid-template-columns:1.5fr .82fr;gap:46px;margin-top:48px;align-items:start}
.cols--una{grid-template-columns:1fr;max-width:880px}
@media(max-width:880px){.cols{grid-template-columns:1fr;gap:34px}}
.panel{background:var(--negro);color:var(--p7527);padding:28px;position:sticky;top:118px}
.panel h3{font-size:.68rem;letter-spacing:.2em;color:var(--p7527);margin:0 0 16px;font-weight:600}
.panel dl{margin:0 0 22px;display:grid;grid-template-columns:auto 1fr;gap:10px 14px;font-size:.84rem}
.panel dt{color:rgba(215,210,197,.6);font-size:.63rem;letter-spacing:.16em;text-transform:uppercase;align-self:center;font-weight:600}
.panel dd{margin:0;text-align:right;font-weight:400}
.lista{list-style:none;padding:0;margin:0}
.lista li{padding:13px 0;border-bottom:1px solid var(--linea);font-size:.93rem;font-weight:400;color:#4a4a4a;display:grid;grid-template-columns:auto 1fr;gap:14px}
.lista li b{font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--negro);min-width:66px}

/* plano */
.plano{background:var(--papel);border:1px solid var(--linea);padding:18px;margin-top:16px}
.plano svg{width:100%;height:auto}
.lote{cursor:pointer}
.lote rect{stroke:var(--papel);stroke-width:1.4;transition:.14s}
.lote text{font-size:11px;fill:#fff;font-family:'Montserrat',sans-serif;font-weight:500;pointer-events:none}
.lote:hover rect{stroke:var(--negro);stroke-width:2.4}
.lote.sel rect{stroke:var(--negro);stroke-width:3}
.ley{display:flex;gap:22px;flex-wrap:wrap;margin-top:16px;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--p418)}
.ley i{width:11px;height:11px;display:inline-block;margin-right:8px;vertical-align:-1px}

/* lote seleccionado */
.lotesel{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:1px;background:var(--linea);border:1px solid var(--linea);border-top:0;margin-top:-1px}
.lotesel>div{background:var(--papel);padding:18px 20px}
.lotesel span{display:block;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:#4a4a4a;font-weight:600;margin-bottom:7px}
.lotesel b{font-size:1.18rem;font-weight:300;color:var(--negro)}
.lotesel em{font-style:normal;font-weight:500}
@media(max-width:620px){.lotesel{grid-template-columns:1fr}}

/* pagos */
.pagos{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:18px}
.pago{background:var(--papel);padding:26px 24px 28px;position:relative}
.pago__tag{position:absolute;top:0;right:0;background:var(--p7527);color:var(--negro);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;padding:6px 12px}
.sub--of{display:inline-block;padding:5px 10px;background:var(--negro);color:var(--p7527) !important}
.pago--dest .sub--of{background:var(--p7527);color:var(--negro) !important}
.pago--dest{background:var(--negro);color:var(--p7527)}
.pago h3{font-size:.66rem;letter-spacing:.2em;margin:0 0 14px;font-weight:600;color:var(--p418)}
.pago--dest h3{color:var(--p7527)}
.pago .val{font-size:1.85rem;font-weight:200;line-height:1;margin-bottom:4px;color:var(--negro)}
.pago--dest .val{color:#fff}
.pago .sub{font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;margin-bottom:18px;color:var(--p418)}
.pago--dest .sub{color:var(--p7540)}
.pago dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:.82rem;margin:0}
.pago dt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;align-self:center;font-weight:600;color:var(--p418)}
.pago--dest dt{color:rgba(215,210,197,.6)}
.pago dd{margin:0;text-align:right}
@media(max-width:880px){.pagos{grid-template-columns:1fr}}

/* tipologias */
.tipos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:18px}
.tipo{border:1px solid var(--linea);background:var(--papel);padding:24px}
.tipo h3{font-size:.92rem;letter-spacing:.12em;margin:0 0 4px;color:var(--negro)}
.tipo .m{font-size:1.3rem;font-weight:200;color:var(--negro);margin-bottom:16px}
.tipo dl{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:.82rem;margin:0 0 18px}
.tipo dt{font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;align-self:center;font-weight:600;color:var(--p418)}
.tipo dd{margin:0;text-align:right}
@media(max-width:880px){.tipos{grid-template-columns:1fr}}

/* equipo */
.equipo{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.persona__f{aspect-ratio:3/4;background:var(--gris5);margin-bottom:16px;position:relative;overflow:hidden}.persona__f img{width:100%;height:100%;object-fit:cover;display:block}.persona__f .persona__ini{position:absolute;inset:0;display:grid;place-items:center;font-size:2.4rem;font-weight:700;color:#fff;letter-spacing:.02em}
.persona__f:empty::after{content:"FOTO";position:absolute;inset:0;display:grid;place-items:center;font-size:.62rem;letter-spacing:.24em;color:var(--negro);font-weight:600}
.persona h3{font-size:.86rem;letter-spacing:.08em;margin-bottom:5px;color:var(--negro)}
.persona span{font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--p418);font-weight:600}
@media(max-width:1000px){.equipo{grid-template-columns:repeat(3,1fr)}}
@media(max-width:720px){.equipo{grid-template-columns:1fr 1fr}}
.terreno{display:grid;grid-template-columns:1fr 1.15fr;gap:40px;align-items:center;margin-top:44px;padding-top:36px;border-top:1px solid var(--linea)}
@media(max-width:880px){.terreno{grid-template-columns:1fr;gap:26px}}

/* alianzas */
.aliados{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea);margin-top:44px}
.aliado{background:var(--papel);padding:0 0 28px}
.aliado__logo{aspect-ratio:16/7;display:grid;place-items:center;border-bottom:1px solid var(--linea);margin-bottom:22px;background:#fff}
.aliado__logo span{font-size:.78rem;letter-spacing:.1em;color:var(--p418);font-weight:600}
.aliado h3{font-size:.8rem;letter-spacing:.14em;margin:0 26px 10px;color:var(--negro)}
.aliado p{font-size:.88rem;font-weight:400;color:#4a4a4a;margin:0 26px}
@media(max-width:880px){.aliados{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.aliados{grid-template-columns:1fr}}

/* nav de faq */
.faqnav{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--linea);padding-bottom:24px}
.faqnav a{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:10px 18px;border:1px solid var(--linea);text-decoration:none;color:var(--p418);transition:.15s}
.faqnav a:hover{background:var(--negro);color:var(--p7527);border-color:var(--negro)}

/* artículos */
.arts{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.art{background:var(--papel);border:1px solid var(--linea);text-decoration:none;display:grid;grid-template-columns:.85fr 1.15fr;transition:.2s}
.art:hover{border-color:var(--p418);transform:translateY(-2px)}
.art__i{overflow:hidden;background:var(--negro);position:relative}
.art__i img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.art__i::before{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.45;z-index:2}
.art__b{padding:26px 24px}
.art__k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--p418);font-weight:600;display:block;margin-bottom:12px}
.art h3{font-size:.95rem;line-height:1.4;letter-spacing:.04em;text-transform:none;font-weight:500;color:var(--negro);margin-bottom:10px}
.art p{font-size:.85rem;font-weight:400;color:#4a4a4a;margin:0}
@media(max-width:1000px){.arts{grid-template-columns:1fr}}
@media(max-width:620px){.art{grid-template-columns:1fr}.art__i{aspect-ratio:16/9}}

/* logos aliados */
.logos{display:grid;grid-template-columns:repeat(5,1fr);gap:1px;background:var(--linea);border:1px solid var(--linea)}
.logo{background:var(--papel);aspect-ratio:16/9;display:grid;place-items:center}
.logo span{font-size:.68rem;letter-spacing:.14em;color:var(--p418);font-weight:600;text-align:center;padding:0 8px}
.logo--v span{color:var(--p7540);letter-spacing:.24em}
.al__vacio{margin-top:20px;border:1px dashed var(--linea);padding:26px;text-align:center;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p7540);font-weight:600}
@media(max-width:880px){.logos{grid-template-columns:1fr 1fr}}

/* redes */
.redes{display:flex;gap:8px;margin-top:20px}
.redes a{width:38px;height:38px;border:1px solid var(--linea);display:grid;place-items:center;text-decoration:none;transition:.15s;color:var(--p418)}
.redes a:hover{background:var(--negro);border-color:var(--negro);color:var(--p7527)}
.redes svg{width:16px;height:16px;fill:currentColor}

/* faq */
.faq{max-width:880px;border-top:1px solid var(--linea);margin-top:30px}
.faq details{border-bottom:1px solid var(--linea)}
.faq summary{cursor:pointer;padding:19px 44px 19px 0;font-weight:500;font-size:.95rem;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;font-size:1.3rem;font-weight:200;color:var(--p418)}
.faq details[open] summary::after{content:"–"}
.faq p{padding:0 44px 22px 0;font-size:.92rem;font-weight:400;color:#4a4a4a;margin:0}
.faq--osc{border-color:rgba(215,210,197,.6);max-width:100%}
.faq--osc details{border-color:rgba(215,210,197,.6)}
.faq--osc summary{color:#fff}
.faq--osc summary::after{color:var(--p7527)}
.faq--osc p{color:var(--p7527)}

/* hero de ficha con presión comercial */
.fh__precio{display:grid;grid-auto-flow:column;grid-auto-columns:max-content;gap:0 44px;justify-content:start;margin-top:26px;padding-top:24px;border-top:1px solid rgba(215,210,197,.28)}
.fh__d b{font-size:clamp(1.6rem,3.2vw,2.4rem);font-weight:200;color:#fff;display:block;line-height:1;white-space:nowrap}
.fh__d span{font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(215,210,197,.6);font-weight:600;margin-top:9px;display:block;white-space:nowrap}
.fh__d--stock b{color:var(--p7527)}
.fh__d--desc b{color:var(--p7527)}
.barra{height:3px;background:rgba(215,210,197,.25);margin-top:12px;width:130px}
.barra i{display:block;height:100%;background:var(--p7527)}
.fh__d em{font-style:normal;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(215,210,197,.6);font-weight:600;margin-top:7px;display:block}
@media(max-width:880px){.fh__precio{grid-auto-flow:row;grid-template-columns:1fr 1fr;grid-auto-columns:auto;gap:22px 30px}}
.fh__cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}

/* llamada intermedia */
.cta-linea{margin-top:34px;background:var(--papel);border:1px solid var(--linea);padding:22px 24px;display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}
.cta-linea b{display:block;font-size:.95rem;font-weight:500;color:var(--negro);margin-bottom:4px}
.cta-linea span{font-size:.86rem;font-weight:400;color:#4a4a4a}
@media(max-width:720px){.cta-linea{grid-template-columns:1fr}}

/* formulario dentro de la ficha */
.formficha{background:var(--negro);color:var(--p7527);padding:38px 36px;margin-top:52px;display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;align-items:center;scroll-margin-top:120px}
@media(max-width:880px){.formficha{grid-template-columns:1fr;gap:28px;padding:30px 26px}}

/* galería */
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:24px}
/* Las fichas van en 4:5, el formato en que se toman las fotos del proyecto.
   Así la grilla recorta lo mínimo y el visor muestra la foto tal cual. */
.gal figure{margin:0;position:relative;overflow:hidden;background:var(--negro);aspect-ratio:4/5}
.gal{grid-auto-flow:dense}
.gal__g{grid-column:span 2;grid-row:span 2;aspect-ratio:auto}
.gal__g--der{grid-column:3 / span 2}
.gal img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:.5s}
.gal figure:hover img{transform:scale(1.04)}
/* La galería de la ficha va en color: la película de marca desaturaba las
   fotos y el bloque promete imágenes reales del terreno. */
.gal figcaption{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:16px 18px;background:linear-gradient(transparent,rgba(62,60,56,.9))}
.gal figcaption b{display:block;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:#fff;font-weight:600}
.gal figcaption span{font-size:.72rem;font-weight:300;color:var(--p7527)}
@media(max-width:880px){.gal{grid-template-columns:1fr 1fr}.gal__g,.gal__g--der{grid-column:span 2;grid-row:auto;aspect-ratio:4/3}}
/* En una sola columna todas las fotos van en 4:5. Antes la primera y la sexta
   conservaban el 4:3 que usan cuando son grandes, y en el teléfono se veían
   más bajas que el resto: la grilla quedaba despareja. */
@media(max-width:560px){
  .gal{grid-template-columns:1fr}
  .gal figure,.gal .gal__g,.gal .gal__g--der{aspect-ratio:4/5;grid-column:auto;grid-row:auto}
}

/* aviso de lanzamiento */
.aviso-lanz{margin-top:44px;background:var(--papel);border:1px solid var(--linea);padding:22px 24px}
.aviso-lanz b{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--negro);margin-bottom:6px}
.aviso-lanz span{font-size:.92rem;color:#4a4a4a}

/* trabaja con nosotros */
.areas{display:grid;gap:1px;background:var(--linea);border:1px solid var(--linea)}
.areas div{background:var(--papel);padding:20px 22px}
.areas b{display:block;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;color:var(--negro);margin-bottom:5px}
.areas span{font-size:.86rem;font-weight:400;color:#4a4a4a}
.formtrab{background:var(--negro);padding:32px 30px}
.formtrab input[type=file]{color:rgba(215,210,197,.6);font-size:.82rem;padding:11px 0}

/* canales de contacto */
.canales{display:grid;grid-template-columns:1fr 1fr;gap:22px 34px;margin-top:34px}
.canales span{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(215,210,197,.6);font-weight:600;display:block;margin-bottom:6px}
.canales b{font-size:.95rem;font-weight:400;color:#fff}
@media(max-width:620px){.canales{grid-template-columns:1fr}}

/* testimonios */
.testis{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:26px}
.testi{margin:0;background:var(--papel);border:1px solid var(--linea);padding:26px 24px 28px;display:flex;flex-direction:column}
/* Círculo con las iniciales del propietario. Reemplaza al marcador «FOTO»:
   no hay fotografía de cada persona y las de Instagram no se pueden enlazar. */
.testi__f{width:64px;height:64px;border-radius:50%;background:var(--gris5);margin-bottom:20px;flex-shrink:0;display:grid;place-items:center;color:var(--papel);font-size:1.05rem;letter-spacing:.06em;font-weight:300}
.testi blockquote{margin:0 0 22px;font-size:.95rem;font-weight:400;color:#4a4a4a;line-height:1.6;flex:1}
.testi figcaption b{display:block;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--negro);font-weight:600;margin-bottom:4px}
.testi figcaption span{font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:#4a4a4a;font-weight:600;display:block}
.testi figcaption em{font-style:normal;font-size:.72rem;letter-spacing:.04em;color:#4a4a4a;font-weight:400;display:block;margin-top:4px}
@media(max-width:880px){.testis{grid-template-columns:1fr}}

/* mapa */
.mapa{margin-top:22px;aspect-ratio:16/7;background:var(--arena-cl);border:1px solid var(--linea);display:grid;place-items:center;text-align:center}
.mapa span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p7540);font-weight:600;line-height:2}
.mapa em{font-style:normal;font-size:.62rem;letter-spacing:.14em}

/* tabla de distancias */
.tdist{width:100%;border-collapse:collapse;margin-top:22px;font-size:.9rem}
.tdist th{text-align:left;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p418);font-weight:600;padding:0 0 12px;border-bottom:1px solid var(--linea)}
.tdist th:not(:first-child),.tdist td:not(:first-child){text-align:right;width:110px}
.tdist td{padding:14px 0;border-bottom:1px solid var(--linea);font-weight:400;color:#4a4a4a}
.tdist td:not(:first-child){font-weight:500;color:var(--negro)}
.serv{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.serv span{font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:8px 14px;border:1px solid var(--linea);color:var(--p418)}

/* respaldo de marca en ficha */
.respaldo{margin-top:56px;padding-top:38px;border-top:1px solid var(--linea)}
.respaldo__m{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--negro);display:block;margin-bottom:10px}
.respaldo p{font-size:.95rem;font-weight:400;color:#4a4a4a;margin:0 0 16px;max-width:none;white-space:nowrap}
.respaldo a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px;color:var(--negro)}
.respaldo__c{display:flex;gap:40px}
.respaldo__c b{font-size:2rem;font-weight:200;display:block;color:var(--negro);line-height:1}
.respaldo__c span{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--p418);font-weight:600;margin-top:8px;display:block}
@media(max-width:880px){.respaldo{grid-template-columns:1fr}.respaldo__c{flex-wrap:wrap;gap:28px}}

/* venta cruzada, cierre de la ficha */
.cruzada{margin-top:40px;background:var(--negro);display:grid;grid-template-columns:1fr 1.1fr;align-items:stretch;overflow:hidden}
.cruzada__f{position:relative;min-height:320px;background:var(--negro)}
.cruzada__f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cruzada__f::after{content:"";position:absolute;inset:0;background:var(--p418);mix-blend-mode:color;opacity:.45}
.cruzada__t{padding:44px 42px}
@media(max-width:880px){.cruzada{grid-template-columns:1fr}.cruzada__f{min-height:220px}.cruzada__t{padding:32px 26px}}

/* puente */
.puente{border-top:1px solid var(--linea);padding-top:30px;margin-top:48px;display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center}
.puente h3{font-size:.95rem;letter-spacing:.1em;margin:0 0 8px;color:var(--negro)}
.puente p{font-size:.9rem;font-weight:400;color:#4a4a4a;margin:0}
.puente a{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;white-space:nowrap;text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}
@media(max-width:720px){.puente{grid-template-columns:1fr}}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:52px;margin-top:38px;align-items:start}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px}
.fgrid .w{grid-column:span 2}
.campo{margin-bottom:20px}
.campo label{display:block;font-size:.63rem;letter-spacing:.18em;text-transform:uppercase;color:var(--p7527);margin-bottom:9px;font-weight:600}
.campo input,.campo select{width:100%;padding:14px;border:0;border-bottom:1px solid rgba(215,210,197,.34);background:transparent;font-family:var(--tipo);font-size:.92rem;color:#fff;font-weight:300}
.campo input::placeholder{color:rgba(215,210,197,.6)}
.campo select option{background:var(--negro)}
@media(max-width:880px){.form{grid-template-columns:1fr;gap:34px}}

/* footer */
.foot{background:var(--gris5);padding:52px 0 0;border-top:1px solid rgba(62,60,56,.18)}
.foot__c{display:grid;grid-template-columns:1.25fr .8fr .8fr .8fr 1.35fr;gap:26px;padding-bottom:38px}
.foot__c h4{font-size:.63rem;letter-spacing:.2em;text-transform:uppercase;color:var(--negro);margin:0 0 15px;font-weight:600}
.foot__c a,.foot__c p{display:block;font-size:.86rem;text-decoration:none;margin:0 0 8px;font-weight:400;color:var(--negro)}
.foot__l{border-top:1px solid rgba(62,60,56,.18);padding:20px 0;font-size:.68rem;letter-spacing:.1em;color:var(--negro);text-transform:uppercase;font-weight:500}
@media(max-width:880px){.foot__c{grid-template-columns:1fr 1fr}}

.modal{position:fixed;inset:0;z-index:120;background:rgba(62,60,56,.72);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:24px}
.modal.on{display:flex}
.modal__c{background:var(--negro);color:var(--p7527);padding:40px 38px 34px;max-width:620px;width:100%;position:relative}
.modal__x{position:absolute;top:14px;right:16px;background:none;border:0;color:var(--p7527);font-size:1.6rem;line-height:1;cursor:pointer;font-family:var(--tipo);font-weight:200}
.modal__x:hover{color:#fff}
.wa{position:fixed;right:20px;bottom:20px;z-index:70;background:#25D366;color:#fff;border-radius:100px;display:none;align-items:center;gap:10px;padding:14px 20px;text-decoration:none;font-weight:600;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;box-shadow:0 8px 26px rgba(0,0,0,.28)}
.wa svg{width:20px;height:20px;fill:#fff}
body.en-ficha .wa{display:flex}
@media(max-width:620px){.wa span{display:none}.wa{padding:16px;right:16px;bottom:16px}}


/* ==========================================================================
   Añadidos del tema — lo que en la maqueta iba en estilos en línea
   ========================================================================== */

/* Distintivos de estado. La jerarquía es deliberada: lo disponible es lo que
   más contrasta, porque es lo que se quiere que se mire primero. */
.badge--venta     { background:var(--p7527); color:var(--negro); }
.badge--proximo   { background:var(--negro); color:var(--p7527); }
.badge--entregado { background:#4a4a4a; color:#d7d2c5; }

/* Marcador cuando todavía no hay fotografía */
.sinfoto{
  position:absolute; inset:0; display:grid; place-items:center;
  font-size:.62rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--negro); font-weight:600;
}

/* Menú desplegable: en la maqueta se abría al pasar el mouse; acá también
   responde al clic, que es lo único que funciona en pantalla táctil. */
.nav > div.abierto .drop{ opacity:1; visibility:visible; transform:translateY(0); }

/* Enlace de salto: invisible hasta que se navega con teclado */
.saltar{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--negro); color:#fff; padding:12px 20px;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}
.saltar:focus{ left:0; }

.screen-reader-text{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(1px,1px,1px,1px); white-space:nowrap;
}

/* Foco visible en todo el sitio */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--negro); outline-offset:3px;
}

/* Texto corrido de páginas institucionales */
.texto{ max-width:62ch; }
.texto h2{ margin:38px 0 14px; }
.texto h3{ margin:28px 0 10px; }
.texto ul,.texto ol{ padding-left:1.2em; margin:0 0 1em; }
.texto li{ margin-bottom:.4em; }

@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms!important; transition-duration:.01ms!important; }
  html{ scroll-behavior:auto; }
}

/* El pie declara .foot__c a{display:block}, que le gana en especificidad al
   .marca{display:flex} y desarma el logotipo. Se restituye explícitamente. */
.foot__c a.marca{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin:0 0 16px; }
.foot__c a.marca svg{ width:32px; height:32px; margin-left:56px; }
.foot__c a.marca .marca__t{ display:block; margin:0; font-size:1.02rem; }

/* Características de la ficha: cuando solo hay título, sin descripción */
.est h3{ margin:0; }

/* Filtro de listados */
.listado-nav{ display:flex; gap:4px; flex-wrap:wrap; margin-top:30px; }
.listado-nav a{
  font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:10px 16px; text-decoration:none; border:1px solid var(--linea);
  color:var(--p7540); transition:.2s;
}
.listado-nav a:hover{ border-color:var(--negro); }
.listado-nav a.is-activo{ background:var(--negro); border-color:var(--negro); color:#fff; }

/* --------------------------------------------------------------------------
   Menú: la maqueta usaba <button> porque no navegaba a ninguna parte.
   Acá son enlaces reales, así que las reglas de .nav button y .drop button
   deben alcanzarlos también. Sin esto el desplegable queda sin estilo.
   -------------------------------------------------------------------------- */
.nav a{
  background:none; border:0; font-family:var(--tipo); font-size:.73rem;
  letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  cursor:pointer; padding:10px 0; border-bottom:1px solid transparent;
  color:inherit; text-decoration:none; display:inline-block;
}
.nav > div > a:hover{ border-color:var(--negro); }

.drop a{
  display:block; width:100%; text-align:left; padding:14px 20px;
  border-bottom:1px solid var(--linea); font-weight:500; letter-spacing:.1em;
  font-size:.73rem; text-transform:uppercase; text-decoration:none;
  color:var(--negro);
}
.drop a:last-child{ border-bottom:0; }
.drop a:hover{ background:var(--p7527); border-color:transparent; }

/* Rejilla de dos columnas usada en Nosotros */
.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
@media (max-width:820px){ .cols-2{ grid-template-columns:1fr; gap:34px; } }

/* --------------------------------------------------------------------------
   Pie: rejilla pareja.
   La maqueta usaba anchos desiguales (1.25 · .8 · .8 · .8 · 1.35), así que
   los espacios entre columnas no coincidían entre sí. Las cuatro columnas de
   contenido pasan a ser idénticas y la dirección envuelve a dos líneas.
   -------------------------------------------------------------------------- */
.foot__c{ grid-template-columns:1.5fr repeat(4, 1fr); gap:40px; }
.foot__c > div:last-child p{ white-space:normal; }

@media (max-width:1000px){ .foot__c{ grid-template-columns:1fr 1fr 1fr; gap:34px; } }
@media (max-width:640px){ .foot__c{ grid-template-columns:1fr 1fr; gap:30px; } }

/* Cierre del pie */
.foot__l sup{ font-size:.7em; }

/* --------------------------------------------------------------------------
   Logotipo oficial. Reemplaza al isotipo reconstruido de la maqueta.
   -------------------------------------------------------------------------- */
.marca{ display:block; line-height:0; color:var(--p418); }
/* El logotipo oficial es más ancho que alto porque el isotipo va al costado:
   se dimensiona por ancho. El margen izquierdo venía de la maqueta, donde el
   isotipo iba encima del texto; acá lo desplazaría sin motivo. */
.marca svg,
.head .marca svg,
.foot__c .marca svg{ width:130px; height:auto; display:block; margin:0; }
.marca:hover{ color:var(--negro); }
.foot__c a.marca{ display:block; }
.foot__c a.marca svg{ width:150px; height:auto; }
@media (max-width:640px){ .marca svg, .head .marca svg{ width:112px; } }

/* --------------------------------------------------------------------------
   El Estándar: aire entre ícono, título y texto.
   Con tres columnas el texto es más largo que con seis, y el espaciado
   original dejaba el titular pegado al párrafo.
   -------------------------------------------------------------------------- */
.est div{ padding:38px 32px 42px; }
.est svg{ margin-bottom:24px; }
.est h3{ margin-bottom:16px; line-height:1.5; }
.est p{ line-height:1.65; }
@media (max-width:900px){ .est div{ padding:30px 26px 34px; } }

/* El Estándar con tres pilares en vez de seis */
.est--3{ grid-template-columns:repeat(3,1fr); }
@media (max-width:900px){ .est--3{ grid-template-columns:1fr; } }

/* --------------------------------------------------------------------------
   Tarjeta de proyecto entregado.
   La maqueta atenuaba la tarjeta completa (opacity .66) para señalar «esto ya
   pasó». Sobre el bloque oscuro de trayectoria eso deja el texto ilegible: el
   año y las cifras casi desaparecen. La señal se mantiene atenuando solo la
   fotografía; el texto conserva su contraste.
   -------------------------------------------------------------------------- */
.card--ent{ opacity:1; }
.card--ent .card__i{ opacity:.72; transition:opacity .2s; }
.card--ent:hover .card__i{ opacity:1; }

/* --------------------------------------------------------------------------
   Tarjetas dentro de una sección oscura.
   .sec--osc fija el color heredado en arena para su propio texto, pero la
   tarjeta tiene fondo claro propio: heredarlo deja el dato en arena sobre
   papel, dos tonos casi idénticos. La tarjeta restituye su escala de color.
   -------------------------------------------------------------------------- */
.sec--osc .card, .cruce .card{ color:var(--p7540); }
.sec--osc .card h3, .cruce .card h3{ color:var(--negro); }
.sec--osc .card__dato, .cruce .card__dato{ color:var(--negro); }
.sec--osc .card__c, .cruce .card__c{ color:var(--p7540); }
.sec--osc .card__f, .cruce .card__f{ color:var(--p7540); }
.sec--osc .card__f em, .cruce .card__f em{ color:var(--p418); }

/* --------------------------------------------------------------------------
   Ficha de proyecto: columna centrada.
   .cols--una limita el ancho a 880px pero dentro de un contenedor de 1240,
   así que el contenido quedaba pegado a la izquierda con un tercio vacío a
   la derecha. En la maqueta ese costado lo ocupaba una columna lateral que
   acá no existe.
   -------------------------------------------------------------------------- */
.cols--una{ margin-inline:auto; }

/* --------------------------------------------------------------------------
   Ficha de proyecto al ancho del sitio.
   La maqueta usaba 880 porque el costado lo ocupaba una columna lateral con
   el resumen del proyecto. Sin esa columna, 880 desalineaba la ficha respecto
   de la cabecera, la portada y el pie, que van a 1240.
   Solo el texto corrido conserva medida de lectura: una línea de 1240 px
   obliga a mover la cabeza y se pierde el renglón al saltar.
   -------------------------------------------------------------------------- */
.ficha{ width:100%; }
.ficha .texto{ max-width:62ch; }

/* Dirección bajo el título de la ficha.
   Usa la escala de bajada de la maqueta: es la única línea bajo el nombre
   del proyecto y con el tamaño anterior se perdía. */
.fh__dir{
  font-size:1.02rem; font-weight:300; color:var(--p7527);
  letter-spacing:.01em; margin:14px 0 0; max-width:62ch;
}

/* Guiño al descuento, junto a la disponibilidad */
.fh__d--desc b{ color:var(--p7527); }

/* Plano de loteo pendiente de montar */
.plano--pend{
  display:grid; place-items:center; min-height:230px;
  background:var(--p417); border-color:var(--p417);
}
.plano--pend span{
  font-size:.66rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--negro);
}

/* Instagram del propietario */
.testi__ig{
  display:inline-flex; align-items:center; gap:6px; margin-top:4px;
  font-size:.72rem; letter-spacing:.04em; color:var(--p418);
  text-decoration:none; font-weight:500;
}
.testi__ig svg{ width:14px; height:14px; fill:currentColor; }
.testi__ig:hover{ color:var(--negro); }

/* --------------------------------------------------------------------------
   Ritmo vertical del hero de ficha.
   Sobraba aire sobre la comuna y faltaba entre el hero y el bloque siguiente,
   que quedaba pegado al borde de la sección.
   -------------------------------------------------------------------------- */
.fh .migas{ margin-bottom:10px; }
.fh__in{ padding-block:56px 64px; }
.fh__dir{ margin-top:12px; }
.fh__precio{ margin-top:34px; }
.fh__cta{ margin-top:30px; }

/* La sección que sigue al hero necesita su propio aire arriba */
.fh + .wrap .rotulo:first-child,
.fh + .wrap > .ficha > .rotulo:first-child{ margin-top:0; }
.fh + .wrap{ padding-top:56px; }

/* Cita del propietario aún no levantada: ocupa su lugar sin fingir contenido */
.testi__pend{
  color:var(--p418); font-style:normal;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
}



/* Respaldo: «Un proyecto de Santa Graciela» pasa a la escala de bajada.
   Es la firma de la empresa al pie de la ficha y con .72rem se perdía. */
.respaldo__m{ font-size:1.02rem; letter-spacing:.14em; margin-bottom:14px; }
.respaldo p{ font-size:.98rem; white-space:normal; }
@media (max-width:640px){ .respaldo__m{ font-size:.9rem; } }

/* --------------------------------------------------------------------------
   Canales de contacto sobre fondo claro.
   Los originales están pensados para el bloque oscuro de la portada; sobre
   arena el blanco y el arena translúcido desaparecen.
   -------------------------------------------------------------------------- */
.canales--claro{ grid-template-columns:repeat(4,1fr); gap:26px 34px; margin-top:40px; }
.canales--claro span{ color:var(--p418); }
.canales--claro b{ color:var(--negro); }
@media (max-width:900px){ .canales--claro{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .canales--claro{ grid-template-columns:1fr; } }

/* Aviso de proyecto en preparación */
.aviso-lanz{
  background:var(--papel); border:1px solid var(--linea); padding:22px 24px;
}
.aviso-lanz b{
  display:block; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--negro); margin-bottom:6px;
}
.aviso-lanz span{ font-size:.92rem; color:var(--p7540); }

/* Enlaces de ruta bajo el mapa */
.rutas{ display:flex; gap:26px; flex-wrap:wrap; margin-top:16px; }
.rutas a{
  display:inline-flex; align-items:center; gap:8px;
  font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  color:var(--negro); text-decoration:none;
  border-bottom:1px solid var(--linea); padding-bottom:4px; transition:.2s;
}
.rutas a:hover{ border-color:var(--negro); }
.rutas svg{ width:15px; height:15px; fill:currentColor; }

/* Botón único del hero sobre fondo oscuro: arena de la paleta, no blanco */
.fh__cta .btn--cl{ background:var(--p7527); color:var(--negro); border-color:var(--p7527); }
.fh__cta .btn--cl:hover{ background:#fff; border-color:#fff; }

/* --------------------------------------------------------------------------
   Bloque de venta cruzada dentro de la ficha.
   Fondo oscuro para que remate con peso, pero con tarjetas dentro: quien mira
   un proyecto que no puede comprar necesita ver precio y disponibilidad, no
   solo un botón que lo manda a otra página.
   -------------------------------------------------------------------------- */
.cruce{ background:var(--negro); color:var(--p7527); padding:38px 36px 42px; margin-top:52px; }
.cruce .rotulo::after{ background:rgba(215,210,197,.3); }
.cruce .grid{ margin-top:0; }
@media (max-width:640px){ .cruce{ padding:28px 22px 32px; } }

/* Formularios: el botón deja de estar bloqueado */
.sgform button[type=submit]{ cursor:pointer; }
.sgform .campo input:invalid:not(:placeholder-shown){ border-bottom-color:#c0392b; }

/* Modal del brochure */
.modal{
  position:fixed; inset:0; z-index:120; background:rgba(62,60,56,.72);
  backdrop-filter:blur(3px); display:none; align-items:center; justify-content:center; padding:24px;
}
.modal.on{ display:flex; }
.modal__c{
  background:var(--negro); color:var(--p7527); padding:40px 38px 34px;
  max-width:620px; width:100%; position:relative; max-height:90vh; overflow:auto;
}
.modal__x{
  position:absolute; top:14px; right:16px; background:none; border:0;
  color:var(--p7527); font-size:1.6rem; line-height:1; cursor:pointer;
  font-family:var(--tipo); font-weight:200;
}
.modal__x:hover{ color:#fff; }
/* El botón del hero es un <button>, no un enlace: hereda el estilo igual */
.fh__cta button.btn{ font:inherit; cursor:pointer; }

/* Lote del propietario, entre el nombre y su Instagram */
.testi__lote{
  display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--p418); font-weight:600; margin-top:3px;
}

/* --------------------------------------------------------------------------
   Redes del pie.
   La maqueta las encajonaba en un recuadro con borde, pensado para un pie
   claro. Sobre el gris del pie ese borde queda flotando y los íconos se ven
   encerrados. Van sueltos, al tamaño de un ícono y no de un botón.
   -------------------------------------------------------------------------- */
.foot .redes{ gap:18px; margin-top:22px; }
.foot .redes a{
  width:auto; height:auto; border:0; background:none;
  color:var(--negro); opacity:.55; transition:opacity .18s;
}
.foot .redes a:hover{ background:none; border:0; color:var(--negro); opacity:1; }
.foot .redes svg{ width:19px; height:19px; }

/* --------------------------------------------------------------------------
   Logotipo del pie: alineado con el resto de la columna.
   Arrastraba un margen izquierdo de la maqueta, donde el isotipo iba encima
   del texto y ese espacio lo centraba. Con el logotipo oficial —isotipo al
   costado— solo lo desplazaba, dejándolo desalineado con las redes.
   -------------------------------------------------------------------------- */
.foot__c a.marca svg{ margin-left:0; width:150px; height:auto; }

/* --------------------------------------------------------------------------
   Misión y visión alineadas arriba.
   El contenedor centraba verticalmente, y como los textos son de distinto
   largo, el más corto quedaba desplazado y sus títulos no coincidían.
   -------------------------------------------------------------------------- */
.sec--osc .cols-2{ align-items:start; }

/* ==========================================================================
   Revisión móvil
   ==========================================================================
   El sitio se construyó y revisó en escritorio. Estas reglas corrigen lo que
   aparece al verlo en un teléfono, que es de donde llega la mayoría del
   tráfico de campañas.
   -------------------------------------------------------------------------- */

/* --- Menú móvil ---------------------------------------------------------- */
.head__ham{
  display:none; background:none; border:0; padding:10px 4px; cursor:pointer;
  flex-direction:column; gap:5px; margin-left:auto;
}
.head__ham span{
  display:block; width:22px; height:1.5px; background:var(--negro);
  transition:transform .22s, opacity .18s;
}
.head__ham[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.head__ham[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.head__ham[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Las ocho casillas miden exactamente lo mismo. Para eso: el contenedor no
   pone aire propio —se lo sumaba solo a la primera y a la última—, la línea
   divisoria va arriba de cada enlace, y la separación entre los dos grupos
   es un cambio de tono de esa misma línea, sin altura propia. */
.menum{
  display:none; flex-direction:column; background:var(--papel);
  border-top:1px solid var(--linea); padding:0;
}
.menum[hidden]{ display:none; }
.menum a{
  display:block; padding:13px 28px; text-decoration:none; color:var(--negro);
  font-size:.92rem; font-weight:400; line-height:1.7;
  border-top:1px solid rgba(0,0,0,.05); border-bottom:0;
}
.menum a:first-child{ border-top:0; }
.menum a:active{ background:rgba(0,0,0,.04); }
/* Separa los dos grupos sin ocupar altura: es la misma línea, más marcada. */
.menum__sep{ display:none; }
.menum__sep + a{ border-top-color:rgba(0,0,0,.14); }

@media (max-width:1000px){
  .head__ham{ display:flex; }
  .menum:not([hidden]){ display:flex; }
  /* El botón Contacto pasa al menú: en el teléfono compite con el logotipo */
  .head__cta{ display:none; }
}

/* --- Cabecera ------------------------------------------------------------ */
/* Solo se corre para dejar espacio a la barra de WordPress si está presente */
.head{ top:0; }
.admin-bar .head{ top:32px; }
@media (max-width:782px){ .admin-bar .head{ top:46px; } }

/* El logotipo arrastraba márgenes de la maqueta antigua, cuando el isotipo
   iba encima del texto. Con el logotipo oficial solo lo descuadraban. */
.head .marca svg{ margin:0; width:118px; height:auto; }
@media (max-width:620px){ .head .marca svg{ width:104px; } }
.head__in{ align-items:center; gap:14px; }

/* Los títulos quedaban tapados por la cabecera al saltar desde un enlace */
:target, h1, h2, .rotulo{ scroll-margin-top:96px; }

/* --- Legibilidad en pantalla chica --------------------------------------- */
@media (max-width:620px){
  /* Números de teléfono y correos partidos a la mitad */
  .foot__c p, .foot__c a, .canales b, .canales span{ overflow-wrap:normal; word-break:keep-all; }
  .canales b{ white-space:nowrap; }

  /* Interlineado más ajustado: en móvil el texto se veía muy suelto */
  .foot__c a, .foot__c p{ line-height:1.45; margin-bottom:11px; }

  /* Los datos del hero de ficha caben de a dos, no de a cuatro */
  .fh__ds{ gap:22px 30px; }
  .fh__d b{ font-size:1.5rem; }

  /* Botones del hero a lo ancho: dos botones juntos no caben */
  .fh__cta{ flex-direction:column; align-items:stretch; }
  .fh__cta .btn{ justify-content:center; }

  /* El modal necesita respirar y poder desplazarse */
  .modal{ padding:14px; align-items:flex-start; padding-top:40px; }
  .modal__c{ padding:30px 22px 26px; }

  /* Formularios en una columna */
  .fgrid{ grid-template-columns:1fr; }
}

/* --- Pie ------------------------------------------------------------------ */
@media (max-width:620px){
  .foot__c{ grid-template-columns:1fr; gap:30px; }
  .foot__c a.marca svg{ width:130px; }
}

/* ==========================================================================
   Formularios en móvil
   ========================================================================== */

/* El botón nace apagado hasta completar los campos, pero se veía idéntico al
   activo: se pulsaba y no pasaba nada, sin explicación. */
.sgform button[type=submit]:disabled{
  opacity:.42; cursor:not-allowed; background:var(--p418); color:rgba(255,255,255,.7);
}
.sgform button[type=submit]:disabled:hover{ background:var(--p418); }

/* iOS acerca la pantalla al tocar un campo con letra bajo 16 px, y deja la
   página desencuadrada. Con 16 px no lo hace. */
@media (max-width:820px){
  .campo input, .campo select, .campo textarea{ font-size:16px; padding:13px 2px; }
}

/* El desplegable de proyecto ocupa la fila completa: es una sola pregunta. */
.campo.w{ grid-column:1 / -1; }

/* El desplegable se veía como campo de texto en iOS */
.campo select{
  -webkit-appearance:none; appearance:none; border-radius:0;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23d7d2c5' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 4px center; background-size:11px;
  padding-right:26px;
}

/* Área de toque del cierre del modal: era del tamaño del signo */
.modal__x{
  width:44px; height:44px; display:grid; place-items:center;
  top:6px; right:6px; font-size:1.9rem;
}

/* El teclado del teléfono tapa el campo enfocado si el modal no puede subir */
@media (max-width:620px){
  .modal{ align-items:flex-start; padding:12px 12px 40px; }
  .modal__c{ max-height:none; }
  .sgform button[type=submit]{ padding:16px; font-size:.74rem; }
}

/* ==========================================================================
   Segunda pasada de móvil
   ========================================================================== */

@media (max-width:820px){

  /* El hero de las páginas interiores ocupaba casi toda la pantalla para
     mostrar solo dos palabras. */
  .fh--emp{ min-height:200px; }
  .fh--emp .fh__in{ padding-bottom:26px; }
  .fh--emp h1{ font-size:clamp(1.7rem,7vw,2.3rem); }

  /* El mapa era muy apaisado: el marcador, que va al centro, quedaba fuera
     del recorte. Con proporción más alta se ve el punto. */
  .mapa{ aspect-ratio:4/3; }
  .mapa iframe{ min-height:0; height:100%; }

  /* Las secciones respiraban demasiado: en un teléfono ese aire se lee como
     un hueco vacío entre bloques. */
  .sec{ padding:52px 0; }
  .filtros{ padding:18px 0 20px; margin-bottom:24px; }
}

/* Los filtros se acomodaban con anchos distintos según el largo del texto.
   En rejilla quedan todos iguales. */
@media (max-width:620px){
  .filtros{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .filtros a, .filtros .filtro{ text-align:center; padding:13px 8px; }
}

/* Los teléfonos y el correo dejan de partirse a mitad de número */
.canales b, .foot__c p{ white-space:nowrap; }
@media (max-width:400px){
  .canales b, .foot__c p{ white-space:normal; }
}

/* Dos columnas para el bloque argumental: el titular a la izquierda y el
   texto a la derecha. Antes ambos caían en la misma columna angosta y la
   mitad derecha de la pantalla quedaba vacía. En pantallas chicas se apilan. */
.dosc{ display:grid; grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr); gap:34px 56px; align-items:start; }
.dosc h2{ margin:0; }
.dosc .texto{ max-width:none; }
@media (max-width:860px){
  .dosc{ grid-template-columns:1fr; gap:16px; }
}

/* En el programa y el equipamiento, el concepto va a la derecha y es corto:
   se le deja el ancho que necesite en una sola línea y el resto queda para la
   descripción, que es la que puede crecer. */
.tdist--casa th:not(:first-child),
.tdist--casa td:not(:first-child){ width:1%; white-space:nowrap; padding-left:28px; }

/* El cuerpo de un artículo se lee mejor con una línea algo más corta que el
   texto de una ficha, y con más aire entre párrafos. El bloque no se centra:
   arranca en el mismo margen que todo el sitio. */
.texto--art{ max-width:66ch; font-size:1.02rem; }
.texto--art p{ margin-bottom:1.15em; }


/* Título del hero cuando no es el encabezado de la página: mismo aspecto,
   otra etiqueta. Pasa en los artículos, donde el h1 es el título del texto. */
.fh .fh__h1{ color:#fff; font-family:var(--tipo); font-size:clamp(1.8rem,4vw,3rem); font-weight:200; text-transform:uppercase; letter-spacing:.02em; line-height:1.14; margin:0; }

/* En la página de error las tarjetas no llevan imagen: el hueco de la foto se
   reduce a una franja de color para que la tarjeta no quede coja. */
.art__i:empty{ background:var(--p7527); min-height:0; }

/* Visor de galería */
.visor{position:fixed;inset:0;z-index:9999;background:rgba(62,60,56,.94);display:none;align-items:center;justify-content:center;padding:5vh 6vw}
.visor--on{display:flex}
.visor__c{margin:0;max-width:100%;max-height:90vh;display:flex;flex-direction:column;gap:14px}
.visor__c img{max-width:100%;max-height:82vh;object-fit:contain;display:block;margin:0 auto}
.visor__c figcaption{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p7527);text-align:center}
.visor__x{position:absolute;top:18px;right:22px;background:none;border:0;color:#fff;font-size:2.4rem;line-height:1;cursor:pointer;padding:6px 12px}
.visor__f{position:absolute;top:50%;transform:translateY(-50%);background:none;border:0;color:#fff;font-size:3rem;line-height:1;cursor:pointer;padding:10px 16px;opacity:.75}
.visor__f:hover,.visor__x:hover{opacity:1}
.visor__f--ant{left:10px}
.visor__f--sig{right:10px}
@media(max-width:700px){.visor{padding:8vh 4vw}.visor__f{font-size:2.2rem}}

/* Película de color sobre la foto de los proyectos vivos: mismo tratamiento
   que las tarjetas de mundo de la portada. Los entregados no la llevan. */
/* El gris de marca es casi neutro, así que como película de color no se veía:
   una capa «color» sin saturación deja la foto igual de gris. Para los
   proyectos vivos se conserva parte del color real de la foto y se le suma
   una capa cálida suave. */
.card__i--tono img{filter:grayscale(.45) contrast(1.04) saturate(1.1)}
.card__i--tono::after{content:"";position:absolute;inset:0;background:var(--calido);mix-blend-mode:soft-light;opacity:.45;pointer-events:none;z-index:1}
.card__i--tono .badge{z-index:2}

/* Banner de construcción con foto: el argumento se ve, no solo se lee.
   Se arma con filas flexibles en vez de columnas fijas: cuando no cabe al
   lado, la foto baja sola y ocupa todo el ancho. Así no depende de una regla
   por tamaño de pantalla, que era justamente lo que fallaba en el teléfono. */
.cruce--foto{display:flex;flex-wrap:wrap;gap:34px;align-items:stretch}
.cruce__t{flex:1 1 360px;min-width:0;align-self:center}
.cruce__i{flex:1 1 320px;min-width:0;position:relative;min-height:240px;overflow:hidden}
.cruce__i img{width:100%;height:100%;min-height:240px;object-fit:cover;display:block;filter:grayscale(.4) contrast(1.04)}

/* ---------------------------------------------------------------------------
   Plano de loteo interactivo
   La base es una imagen del terreno y encima van los marcadores, ubicados en
   porcentaje. Se puede acercar y arrastrar: en el teléfono es la única forma
   de que 46 lotes sean legibles.
   --------------------------------------------------------------------------- */
.plano{position:relative;background:var(--arena-cl);border:1px solid var(--linea);overflow:hidden;touch-action:none}
.plano__lienzo{position:relative;width:100%;aspect-ratio:16/11;overflow:hidden;cursor:grab}
.plano__lienzo.arrastrando{cursor:grabbing}
.plano__mapa{position:absolute;top:0;left:0;width:100%;transform-origin:0 0;will-change:transform}
.plano__mapa img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}

.plano__l{position:absolute;transform:translate(-50%,-50%) scale(var(--inv,1));transform-origin:center;
  width:30px;height:30px;border-radius:50%;border:0;cursor:pointer;padding:0;
  font:600 11px/1 var(--tipo);letter-spacing:.02em;color:var(--papel);background:var(--negro);
  display:grid;place-items:center;box-shadow:0 1px 4px rgba(62,60,56,.35);transition:box-shadow .15s}
.plano__l--reservado{background:var(--calido)}
.plano__l--vendido{background:var(--gris5);width:16px;height:16px;box-shadow:none;cursor:default}
.plano__l:hover,.plano__l[aria-current=true]{box-shadow:0 0 0 4px rgba(62,60,56,.18)}
.plano__l--vendido:hover{box-shadow:0 0 0 3px rgba(62,60,56,.12)}

.plano__zoom{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;gap:6px;z-index:3}
.plano__zoom button{width:34px;height:34px;border:1px solid var(--linea);background:var(--papel);
  color:var(--negro);font-size:16px;line-height:1;cursor:pointer;border-radius:2px}
.plano__zoom button:hover{background:#fff}

.plano__panel{position:absolute;left:12px;top:12px;z-index:4;background:var(--papel);
  border:1px solid var(--linea);padding:18px 20px;min-width:240px;max-width:300px;box-shadow:0 6px 24px rgba(62,60,56,.14)}
.plano__panel b{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--p418);margin-bottom:8px;font-weight:600}
.plano__panel h4{margin:0 0 10px;font-size:1.5rem;font-weight:200;letter-spacing:.01em}
.plano__panel dl{margin:0 0 14px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:.86rem}
.plano__panel dt{color:var(--p418)}
.plano__panel dd{margin:0;text-align:right;font-weight:500}
.plano__panel .pesos{display:block;font-size:.74rem;color:var(--p418);font-weight:400}
.plano__panel .cerrar{position:absolute;top:8px;right:10px;border:0;background:none;font-size:20px;line-height:1;cursor:pointer;color:var(--p418)}
.plano__panel .btn{width:100%;text-align:center}

@media(max-width:700px){
  .plano__lienzo{aspect-ratio:4/5}
  .plano__panel{left:0;right:0;top:auto;bottom:0;max-width:none;border-left:0;border-right:0;border-bottom:0}
  .plano__zoom{bottom:auto;top:12px}
}

/* El equivalente en pesos bajo cada valor en UF: informativo, no protagonista. */
.val__pesos{font-size:.78rem;font-weight:300;color:var(--p418);margin-top:-6px;margin-bottom:6px}
.pago--dest .val__pesos{color:rgba(215,210,197,.75)}

/* Aviso de que las formas de pago están mostrando un lote concreto.
   Va en bloque y no en flex: con flex, el texto y el número quedaban como
   piezas separadas y aparecía un hueco raro entre las palabras. */
.pagos__sel{display:block;font-size:1.12rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--negro);margin:0 0 16px}

/* Aclaración de que el equivalente en pesos es referencial (UF del día),
   no el valor final que se firma en la escritura. */
.pagos__nota{font-size:.74rem;line-height:1.5;color:var(--p418);margin:14px 0 0;max-width:56ch}
.plano__panel-nota{font-size:.66rem;line-height:1.4;color:var(--p418);margin:0 0 12px}