/* Palami Web — sistema de diseño completo.
   Toda la identidad vive en estas seis variables. */

:root{
  /* Dirección A: petróleo y latón.
     El verde petróleo es el color que ninguna agencia de Dubái usa, y el
     logo negro y oro se apoya en él sin pelearse. El latón solo aparece
     en las cifras: nunca rellena bloques grandes. */
  --ivory:#F2EDE3;          /* hueso cálido, fondo general */
  --sand:#E7E0D2;           /* alterno */
  --ink:#0E2B28;            /* petróleo: superficies oscuras y titulares */
  --deep:#07201E;           /* petróleo profundo: cabecera y pie */
  --bronze:#7A5A24;         /* latón sobre claro, legible */
  --bronze-light:#D9B274;   /* latón sobre oscuro */
  --brass-solid:#B98C46;    /* relleno de botón */
  --muted:#5E6B67;
  --muted-sand:#566360;   /* gris sobre arena: la arena es mas clara, el gris baja */
  --muted-dark:#AFC3BF;     /* texto secundario sobre petróleo */
  --line:#DBD3C4;
  --alert:#9A3B2A;
  --measure:1180px;
  --display:"Fraunces",Georgia,serif;
  --body:"Instrument Sans",system-ui,-apple-system,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--ivory);color:var(--ink);
  font-family:var(--body);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding:0 24px}

h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.08;margin:0;letter-spacing:-0.015em}
h1{font-size:clamp(2.3rem,5.6vw,3.9rem)}
h2{font-size:clamp(1.8rem,4vw,2.8rem)}
h3{font-size:1.28rem;line-height:1.25}
p{margin:0 0 1rem}
.lede{font-size:1.1rem;color:var(--muted);max-width:56ch}
.eyebrow{
  font-family:var(--body);font-size:.92rem;font-weight:400;
  color:var(--bronze);margin:0 0 .9rem;
}
.num{font-family:var(--display);font-variant-numeric:tabular-nums;letter-spacing:-0.01em}
.hint{font-size:.84rem;color:var(--muted);margin:8px 0 0;line-height:1.55}

/* fronda de palmera: el único elemento decorativo */
.frond{
  height:9px;border:0;margin:0;max-width:220px;
  background-repeat:repeat-x;background-position:left center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cg fill='none' stroke='%237A5A24' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M0 4.5h18'/%3E%3Cpath d='M6 4.5l3-3.4'/%3E%3Cpath d='M6 4.5l3 3.4'/%3E%3C/g%3E%3C/svg%3E");
}

.site-head{
  position:sticky;top:0;z-index:40;background:var(--deep);
  border-bottom:1px solid #14403B;
}
.site-head .brand{color:var(--ivory)}
.site-head .nav a{color:#9FB3AF}
.site-head .nav a:hover,.site-head .nav a:focus-visible{color:var(--ivory);border-bottom-color:var(--bronze-light)}
.site-head .nav a[aria-current="page"]{color:var(--ivory);border-bottom-color:var(--bronze-light)}
.site-head .wrap{display:flex;align-items:center;gap:32px;min-height:78px}
.brand{font-family:var(--display);font-size:1.32rem;text-decoration:none;letter-spacing:-0.02em;white-space:nowrap}
.brand em{font-style:normal;color:var(--bronze-light)}
.nav{margin-left:auto;display:flex;gap:24px;flex-wrap:wrap}
.nav a{font-size:.93rem;text-decoration:none;padding:4px 0;border-bottom:1px solid transparent}
.nav a:hover,.nav a:focus-visible{border-bottom-color:var(--bronze)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}

.btn{
  display:inline-block;font-family:var(--body);font-size:.93rem;padding:13px 28px;
  text-decoration:none;border:1px solid var(--brass-solid);
  background:var(--brass-solid);color:#0A1F1D;
  cursor:pointer;transition:background .18s ease,color .18s ease;
}
.btn:hover,.btn:focus-visible{background:transparent;color:var(--ink);border-color:var(--ink)}
.section-ink .btn:hover,.section-ink .btn:focus-visible{color:var(--bronze-light);border-color:var(--bronze-light)}
.btn-quiet{background:transparent;color:var(--ink)}
.btn-quiet:hover,.btn-quiet:focus-visible{background:var(--ink);color:var(--ivory)}

.section{padding:84px 0}
.section-sand{background:var(--sand)}
.section-ink{background:var(--ink);color:var(--ivory)}
.section-ink h2{color:var(--ivory)}
.section-ink .eyebrow{color:var(--bronze-light)}
.section-ink .lede{color:var(--muted-dark)}
.section-ink .btn{border-color:var(--brass-solid);background:var(--brass-solid);color:#0A1F1D}
.section-head{max-width:62ch;margin-bottom:42px}
.section-head h1 + .lede,
.section-head h2 + .lede{margin-top:1.1rem}

.crumbs{font-size:.86rem;color:var(--muted);padding:24px 0 0}
.crumbs a{text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{border-bottom-color:var(--bronze)}

.hero{padding:92px 0 68px}
.hero h1{max-width:15ch;margin-bottom:1.4rem}
.hero h1 em{font-style:italic;color:var(--bronze)}
.hero .frond{margin:2.6rem 0 2rem}

.searchbar{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}
.searchbar select,.searchbar input{
  font-family:var(--body);font-size:.95rem;padding:12px 14px;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink);
  min-width:150px;flex:1 1 150px;
}
.searchbar select:focus,.searchbar input:focus{outline:2px solid var(--bronze);outline-offset:1px}

.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:56px 0 0}
.creds div{background:var(--ivory);padding:22px 24px}
.creds dt{font-size:.82rem;color:var(--bronze);margin-bottom:8px}
.creds dd{margin:0;font-family:var(--display);font-size:1.14rem;line-height:1.3}

.tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(272px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tool{background:var(--sand);padding:32px 28px;display:flex;flex-direction:column}
.section-sand .tool{background:var(--ivory)}
.tool-icon{color:var(--bronze);display:block;margin-bottom:16px}
.tool h2,.tool h3{font-size:1.28rem;margin-bottom:.7rem}
.tool p{font-size:.96rem;color:var(--muted);margin-bottom:1.4rem}
.tool .go{margin-top:auto;font-size:.9rem;text-decoration:none;color:var(--bronze);border-bottom:1px solid var(--bronze);align-self:flex-start;padding-bottom:2px}

/* listado: la fotografia es la estructura */
.listings{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:28px}
.listing{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--ivory);border:1px solid var(--line);
  transition:border-color .2s ease,transform .2s ease;
}
.listing:hover,.listing:focus-visible{border-color:var(--bronze);transform:translateY(-2px)}
.listing-shot{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.listing-shot img{width:100%;height:100%;object-fit:cover;display:block}

/* Sin foto, el hueco informa en vez de quedarse vacio */
.listing-noshot{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;text-align:center;padding:20px;
  background:
    linear-gradient(135deg, transparent 46%, rgba(14,43,40,.12) 47%, rgba(14,43,40,.12) 48%, transparent 49%) 0 0/22px 22px,
    var(--sand);
}
.listing-noshot-price{font-family:var(--display);font-size:1.5rem;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.1}
.listing-noshot-sub{font-size:.8rem;color:var(--muted)}
.listing-noimg .listing-price{display:none}

.listing-flag{
  position:absolute;top:0;left:0;background:var(--ink);color:var(--ivory);
  font-size:.7rem;letter-spacing:.1em;padding:6px 12px;
}
.listing-body{display:flex;flex-direction:column;gap:5px;padding:20px 22px 22px;flex:1}
.listing-area{font-size:.8rem;color:var(--bronze)}
.listing-name{font-family:var(--display);font-size:1.26rem;line-height:1.2}
.listing-specs{font-size:.88rem;color:var(--muted)}
.listing-price{
  font-family:var(--display);font-size:1.3rem;font-variant-numeric:tabular-nums;
  margin-top:auto;padding-top:14px;border-top:2px solid var(--ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
}
.listing:hover .listing-price{border-top-color:var(--brass-solid)}
.listing-psf{font-size:.82rem;color:var(--bronze);font-family:var(--body)}
.reg-foot{font-size:.88rem;color:var(--muted);margin-top:22px}

/* portada con fotografia */
.hero-visual{position:relative;min-height:clamp(380px,56vh,580px);display:flex;align-items:flex-end;overflow:hidden;background:var(--ink)}
.hero-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-visual::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(7,32,30,.9) 0%, rgba(7,32,30,.46) 45%, rgba(7,32,30,.14) 100%);
}
.hero-visual .wrap{position:relative;z-index:2;padding-top:72px;padding-bottom:52px;width:100%}
.hero-visual h1{color:var(--ivory);max-width:17ch;margin-bottom:1rem}
.hero-visual .lede{color:#D8D2C6;max-width:52ch}
.hero-visual .hero-kicker{color:var(--bronze-light);font-size:.95rem;margin:0 0 1.1rem}

/* cabecera de comunidad con imagen */
.area-banner{position:relative;aspect-ratio:21/9;max-height:360px;overflow:hidden;background:var(--sand);margin-bottom:0}
.area-banner img{width:100%;height:100%;object-fit:cover}

.filters{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:40px;padding-bottom:30px;border-bottom:1px solid var(--line)}
.filters select{font-family:var(--body);font-size:.93rem;padding:11px 13px;border:1px solid var(--line);background:var(--ivory);color:var(--ink);min-width:140px}
.filters select:focus{outline:2px solid var(--bronze);outline-offset:1px}

/* ficha individual */
.detail{display:grid;grid-template-columns:1fr;gap:50px;padding:30px 0 84px}
@media(min-width:900px){.detail{grid-template-columns:1.55fr 1fr;gap:62px}}
.gallery{aspect-ratio:3/2;background:var(--sand);border:1px solid var(--line);overflow:hidden}
.gallery-empty{background:linear-gradient(135deg, transparent 46%, rgba(14,43,40,.12) 47%, rgba(14,43,40,.12) 48%, transparent 49%) 0 0/26px 26px, var(--sand)}
.gallery img{width:100%;height:100%;object-fit:cover}
.gallery-empty{position:relative}
.thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:8px;margin-top:8px}
.thumbs img{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--line)}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0}
.facts div{background:var(--ivory);padding:18px 20px}
.facts dt{font-size:.8rem;color:var(--bronze);margin-bottom:6px}
.facts dd{margin:0;font-family:var(--display);font-size:1.2rem;line-height:1.35}
.amenities{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px 24px}
.amenities li{font-size:.95rem;padding-left:20px;position:relative;color:var(--muted)}
.amenities li::before{content:"";position:absolute;left:0;top:.68em;width:9px;height:1px;background:var(--bronze)}
.spec-table{width:100%;border-collapse:collapse;margin-top:12px}
.spec-table th,.spec-table td{text-align:left;font-weight:400;padding:12px 0;border-bottom:1px solid var(--line);font-size:.95rem}
.spec-table th{color:var(--muted);width:48%}
.aside-box{border:1px solid var(--line);padding:28px 26px;position:sticky;top:104px}
.aside-box .price{font-family:var(--display);font-size:2rem;font-variant-numeric:tabular-nums;margin:0 0 .3rem}
.aside-box .btn{width:100%;text-align:center;margin-top:12px}

.prose{max-width:68ch}
.prose h2{margin:48px 0 16px;font-size:1.6rem}
.prose h2:first-child{margin-top:0}
.prose h3{margin:32px 0 10px}
.prose p{color:var(--muted)}
.prose p strong{color:var(--ink);font-weight:500}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}

/* comunidad */
.area-hero{padding:66px 0 0}
.area-hero h1{max-width:16ch}
.stat-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);margin:42px 0 0}
.stat-strip div{background:var(--ivory);padding:22px}
.stat-strip dt{font-size:.82rem;color:var(--bronze);margin-bottom:7px}
.stat-strip dd{margin:0;font-family:var(--display);font-size:1.55rem;font-variant-numeric:tabular-nums;line-height:1.1}
.stat-strip dd small{display:block;font-family:var(--body);font-size:.75rem;color:var(--muted);margin-top:5px;letter-spacing:0}
.section-sand .stat-strip div{background:var(--sand)}

.pill-row{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.pill{font-size:.85rem;border:1px solid var(--line);padding:8px 15px;text-decoration:none;background:var(--ivory);transition:border-color .18s ease}
.pill:hover{border-color:var(--bronze)}

.area-list{border-top:1px solid var(--line)}
.area-note{border-bottom:1px solid var(--line);padding:30px 0}
.area-note h2,.area-note h3{margin-bottom:.3rem}
.area-note h2 a,.area-note h3 a{text-decoration:none}
.area-note h2 a:hover,.area-note h3 a:hover{color:var(--bronze)}
.area-note .area-vibe{font-size:.86rem;color:var(--bronze);margin-bottom:.9rem}
.area-note p{color:var(--muted);font-size:.97rem;max-width:70ch}
.area-note .area-figures{color:var(--ink)}
.area-note .go{font-size:.9rem;text-decoration:none;color:var(--bronze);border-bottom:1px solid var(--bronze);padding-bottom:2px}

/* guía por pasos */
.steps{counter-reset:step;list-style:none;padding:0;margin:0;border-top:1px solid var(--line)}
.steps > li{counter-increment:step;padding:30px 0 30px 66px;border-bottom:1px solid var(--line);position:relative}
.steps > li::before{
  content:counter(step,decimal-leading-zero);position:absolute;left:0;top:32px;
  font-family:var(--display);font-size:1.05rem;color:var(--bronze);font-variant-numeric:tabular-nums;
}
.steps h2{font-size:1.3rem;margin-bottom:.5rem}
.steps p{color:var(--muted);font-size:.97rem;margin-bottom:.6rem}
.steps .when{font-size:.84rem;color:var(--bronze);display:block;margin-bottom:.6rem}
.steps a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--bronze);text-underline-offset:3px}

/* herramientas */
.tool-layout{display:grid;grid-template-columns:1fr;gap:44px}
@media(min-width:920px){.tool-layout{grid-template-columns:1fr 1.05fr;gap:56px;align-items:start}}
.calc-form fieldset{border:1px solid var(--line);padding:24px 26px 28px;margin:0 0 22px}
.calc-form legend{font-family:var(--body);font-size:.9rem;color:var(--bronze);padding:0 10px}
.calc-form label{display:block;font-size:.89rem;color:var(--muted);margin:16px 0 6px}
.calc-form fieldset > label:first-of-type{margin-top:0}
.calc-form input,.calc-form select,.calc-form textarea{
  width:100%;font-family:var(--body);font-size:1rem;padding:11px 13px;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink);
}
.calc-form input:focus,.calc-form select:focus,.calc-form textarea:focus{outline:2px solid var(--bronze);outline-offset:1px}
.calc-out{border:1px solid var(--line);padding:30px 28px;background:var(--sand)}
.calc-out .calc-form input,.calc-out .calc-form select,.calc-out .calc-form textarea{background:var(--ivory)}
.out-block .big{font-family:var(--display);font-size:clamp(2rem,5vw,2.7rem);margin:0 0 .4rem;font-variant-numeric:tabular-nums;line-height:1.05}
.out-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.out-pair .mid{font-family:var(--display);font-size:1.6rem;margin:0;font-variant-numeric:tabular-nums}
.calc-out .spec-table th,.calc-out .spec-table td{border-bottom-color:#DCD1BC}
.calc-out .spec-table td{text-align:right;font-variant-numeric:tabular-nums}
.calc-out .frond{max-width:100%}

/* comparador */
.picker{border:1px solid var(--line);padding:26px 24px 22px;margin-bottom:38px}
.picker legend{padding:0 10px}
.area-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.area-card{display:flex;flex-direction:column;gap:3px;cursor:pointer;user-select:none;border:1px solid var(--line);background:var(--ivory);padding:14px 16px;transition:all .18s ease}
.area-card input{position:absolute;opacity:0;width:0;height:0}
.area-card-name{font-family:var(--display);font-size:1.02rem;line-height:1.2}
.area-card-sub{font-size:.77rem;color:var(--muted)}
.area-card:hover{border-color:var(--bronze)}
.area-card:has(input:checked){background:var(--ink);border-color:var(--ink)}
.area-card:has(input:checked) .area-card-name{color:var(--ivory)}
.area-card:has(input:checked) .area-card-sub{color:var(--bronze-light)}
.area-card:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:2px}

.compare-scroll{overflow-x:auto;border:1px solid var(--line);margin-bottom:32px}
.cmp{background:var(--ivory)}
.cmp-row{display:grid;border-bottom:1px solid var(--line)}
.cmp-row:last-child{border-bottom:0}
.cmp-head{background:var(--sand);border-bottom:1px solid var(--bronze)}
.cmp-area{padding:18px 16px;display:flex;flex-direction:column;gap:4px;border-left:1px solid var(--line)}
.cmp-area-name{font-family:var(--display);font-size:1.14rem;line-height:1.15}
.cmp-area-vibe{font-size:.75rem;color:var(--muted);line-height:1.4}
.cmp-cat{font-size:.88rem;color:var(--bronze);margin:0;padding:20px 16px 10px;background:var(--ivory);border-bottom:1px solid var(--line)}
.cmp-label{padding:14px 16px;display:flex;flex-direction:column;justify-content:center;gap:2px}
.cmp-label-name{font-size:.89rem}
.cmp-label-desc{font-size:.75rem;color:var(--muted)}
.cmp-cell{padding:14px 16px;border-left:1px solid var(--line);display:flex;flex-direction:column;gap:5px;justify-content:center}
.cmp-value{font-family:var(--display);font-size:1.12rem;font-variant-numeric:tabular-nums;line-height:1.2}
.cmp-value.best{color:var(--bronze)}
.cmp-sub{font-size:.73rem;color:var(--muted)}
.cmp-bar{display:block;height:3px;background:var(--line);overflow:hidden}
.cmp-bar > span{display:block;height:100%;background:var(--bronze);transition:width .5s ease}
.verdict-row{display:grid;gap:20px}
@media(max-width:760px){.verdict-row{grid-template-columns:1fr!important}}
.verdict-card{border:1px solid var(--line);padding:24px 22px;background:var(--sand)}
.verdict-card h3{margin-bottom:.6rem}
.verdict-card p{font-size:.93rem;color:var(--muted);line-height:1.65}
.verdict-card .best-for{font-size:.86rem;color:var(--bronze);margin:14px 0 0}

/* simulador de visado */
.quiz{border:1px solid var(--line);padding:32px 30px;max-width:640px;margin-bottom:20px}
.quiz .q{margin-bottom:26px}
.quiz .q > p{font-family:var(--display);font-size:1.18rem;margin:0 0 14px}
.quiz .opts{display:flex;flex-wrap:wrap;gap:10px}
.quiz .opts label{font-size:.92rem;border:1px solid var(--line);padding:10px 18px;cursor:pointer;background:var(--ivory)}
.quiz .opts label:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.quiz .opts label:has(input:focus-visible){outline:2px solid var(--bronze);outline-offset:2px}
.quiz .opts input{position:absolute;opacity:0;width:0;height:0}
.verdict{border:1px solid var(--bronze);padding:26px;margin-top:30px;background:var(--sand)}
.verdict h3{margin-bottom:.6rem}
.verdict p{margin:0 0 .6rem;font-size:.96rem;color:var(--muted)}
.verdict p:last-child{margin-bottom:0}
.verdict.no{border-color:var(--line)}

.site-foot{background:var(--deep);color:#9FB3AF;padding:62px 0 32px;font-size:.92rem}
.site-foot a{color:#9FB3AF;text-decoration:none}
.site-foot a:hover{color:var(--bronze-light)}
.foot-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:36px}
.foot-brand{font-family:var(--display);font-size:1.5rem;color:var(--ivory);margin-bottom:.5rem}
.foot-grid .foot-h{font-family:var(--body);font-size:.88rem;color:var(--bronze-light);margin:0 0 14px;font-weight:500}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin-bottom:9px}
.foot-bottom{margin-top:46px;padding-top:22px;border-top:1px solid #14403B;display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.84rem}

:focus-visible{outline:2px solid var(--bronze);outline-offset:2px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:24px;top:12px;z-index:60;background:var(--ink);color:var(--ivory);padding:10px 18px}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

@media(max-width:760px){
  .section{padding:56px 0}
  .hero{padding:52px 0 42px}
  .area-hero{padding:40px 0 0}
  .site-head .wrap{min-height:0;padding-top:14px;padding-bottom:14px;flex-wrap:wrap;gap:12px}
  .nav{margin-left:0;gap:16px}
  .aside-box{position:static}
  .reg-item{grid-template-columns:26px 1fr;gap:10px}
  .reg-price{grid-column:2;margin-top:8px}
  .reg-name{font-size:1.14rem}
}

.hero-under{padding-top:48px}
.gallery-empty{display:flex;align-items:center;justify-content:center}
.gallery-empty-inner{text-align:center}
.gallery-empty-price{font-family:var(--display);font-size:clamp(1.8rem,4vw,2.6rem);margin:0 0 .3rem;font-variant-numeric:tabular-nums}
.gallery-empty-sub{font-size:.9rem;color:var(--muted);margin:0}
@media(max-width:760px){
  .hero-visual{min-height:340px}
  .hero-visual .wrap{padding-top:48px;padding-bottom:36px}
  .area-banner{aspect-ratio:16/9}
  .listings{grid-template-columns:1fr;gap:22px}
}

/* portada sin fotografia: el contraste hace el trabajo */
.hero-dark{background:var(--ink);color:var(--ivory);padding:92px 0 76px}
.hero-dark h1{color:var(--ivory);max-width:16ch;margin-bottom:1.1rem}
.hero-dark .lede{color:#CFC8BA;max-width:54ch}
.hero-dark .hero-kicker{color:var(--bronze-light);font-size:.95rem;margin:0 0 1.1rem}
.hero-figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:#14403B;border:1px solid #14403B;margin:52px 0 0;
}
.hero-figures div{background:var(--ink);padding:22px}
.hero-figures dt{font-size:.82rem;color:var(--bronze-light);margin-bottom:7px}
.hero-figures dd{margin:0;font-family:var(--display);font-size:1.7rem;color:var(--ivory);font-variant-numeric:tabular-nums;line-height:1.1}
@media(max-width:760px){.hero-dark{padding:56px 0 48px}}

/* logo real: grande, que es la marca */
.brand-logo{display:flex;align-items:center;padding:6px 0}
.brand-logo img{display:block;width:auto;max-width:280px;object-fit:contain}
.foot-logo{max-width:220px;height:auto;margin-bottom:14px;display:block}
@media(max-width:760px){
  .brand-logo img{max-width:190px;height:44px!important}
  .foot-logo{max-width:170px}
}

/* ===========================================================
   PORTADA
   La fotografía ocupa, el texto se apoya encima y las cifras
   cuelgan del borde inferior. Nada de tiras de cajas grises.
   =========================================================== */
.stage{position:relative;background:var(--ink);overflow:hidden;isolation:isolate}
.stage-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.stage::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to right, rgba(7,32,30,.93) 0%, rgba(7,32,30,.74) 45%, rgba(7,32,30,.22) 100%),
    linear-gradient(to top, rgba(7,32,30,.95) 0%, rgba(7,32,30,0) 42%);
}
.stage-bare{
  background:
    radial-gradient(68% 58% at 86% 10%, rgba(14,43,40,.16) 0%, rgba(14,43,40,0) 62%),
    linear-gradient(165deg, #F7F3EB 0%, var(--ivory) 48%, var(--sand) 100%);
  border-bottom:1px solid var(--line);
}
.stage-bare::after{background:none}
.stage.stage-bare .stage-kicker{color:var(--bronze)}
.stage.stage-bare h1{color:var(--ink)}
.stage.stage-bare .stage-lede{color:#3F4C49}
.stage.stage-bare .stage-search{
  background:var(--ivory);border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(14,43,40,.16);
}
.stage.stage-bare .stage-bar{background:transparent;border-top:1px solid var(--line);backdrop-filter:none}
.stage.stage-bare .stage-bar dl > div{border-left-color:var(--line)}
.stage.stage-bare .stage-bar dt{color:var(--bronze)}
.stage.stage-bare .stage-bar dd{color:var(--ink)}
.stage-inner{position:relative;z-index:2;padding-top:clamp(84px,13vh,150px);padding-bottom:clamp(70px,11vh,120px)}
.stage-kicker{color:var(--bronze-light);font-size:1rem;margin:0 0 1.3rem;letter-spacing:.01em}
.stage h1{
  color:var(--ivory);max-width:16ch;margin:0 0 1.3rem;
  font-size:clamp(2.6rem,6.4vw,5rem);line-height:1.02;letter-spacing:-0.025em;
}
.stage-lede{color:var(--muted-dark);max-width:48ch;font-size:1.12rem;margin:0}

.stage-search{
  display:flex;flex-wrap:wrap;gap:0;margin-top:2.6rem;max-width:860px;
  background:rgba(250,247,240,.97);border:1px solid rgba(250,247,240,.5);
  box-shadow:0 24px 60px rgba(7,32,30,.42);
}
.stage-search select{
  flex:1 1 170px;min-width:150px;font-family:var(--body);font-size:.97rem;
  padding:17px 18px;border:0;border-right:1px solid var(--line);
  background:transparent;color:var(--ink);appearance:none;cursor:pointer;
}
.stage-search select:focus{outline:2px solid var(--bronze);outline-offset:-2px}
.stage-search .btn{flex:0 0 auto;padding:17px 34px;border:0}

.stage-bar{position:relative;z-index:2;background:rgba(7,32,30,.78);border-top:1px solid rgba(217,178,116,.32);backdrop-filter:blur(6px)}
.stage-bar dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:0;margin:0}
.stage-bar dl > div{padding:22px 0;border-left:1px solid rgba(217,178,116,.24);padding-left:24px}
.stage-bar dl > div:first-child{border-left:0;padding-left:0}
.stage-bar dt{font-size:.8rem;color:var(--bronze-light);margin-bottom:6px}
.stage-bar dd{margin:0;font-family:var(--display);font-size:1.4rem;color:var(--ivory);font-variant-numeric:tabular-nums;line-height:1.1}

/* propiedad destacada: imagen grande con la ficha montada encima */
.showcase{padding:88px 0 76px;background:var(--ivory)}
.showcase-grid{position:relative;display:grid;grid-template-columns:1fr;gap:0}
.showcase-img{display:block;overflow:hidden;background:var(--sand)}
.showcase-img img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .6s ease}
.showcase-img:hover img{transform:scale(1.03)}
.showcase-card{background:var(--ink);color:var(--ivory);padding:38px 36px}
.showcase-eyebrow{color:var(--bronze-light);font-size:.92rem;margin:0 0 1rem}
.showcase-card h2{color:var(--ivory);font-size:clamp(1.7rem,3vw,2.3rem);margin-bottom:.4rem;line-height:1.1}
.showcase-area{color:var(--muted-dark);font-size:.98rem;margin:0 0 1.6rem}
.showcase-price{font-family:var(--display);font-size:clamp(2rem,3.6vw,2.7rem);color:var(--bronze-light);margin:0;font-variant-numeric:tabular-nums;line-height:1.05}
.showcase-psf{color:var(--muted-dark);font-size:.9rem;margin:.3rem 0 1.6rem}
.showcase-specs{list-style:none;padding:0;margin:0 0 2rem;display:flex;flex-wrap:wrap;gap:0}
.showcase-specs li{font-size:.95rem;color:var(--muted-dark);padding:0 18px;border-left:1px solid #14403B}
.showcase-specs li:first-child{padding-left:0;border-left:0}
.showcase-card .btn{border-color:var(--bronze-light);background:var(--bronze-light);color:var(--ink)}
.showcase-card .btn:hover,.showcase-card .btn:focus-visible{background:transparent;color:var(--bronze-light)}

@media(min-width:900px){
  .showcase-grid{grid-template-columns:1.35fr 1fr;align-items:center}
  .showcase-card{margin-left:-80px;padding:52px 46px;box-shadow:0 28px 70px rgba(7,32,30,.3)}
}

/* comunidades como tarjetas altas con foto */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(285px,1fr));gap:20px}
.tile{position:relative;display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ink);text-decoration:none;color:var(--ivory)}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.tile:hover img,.tile:focus-visible img{transform:scale(1.06)}
.tile::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top, rgba(7,32,30,.93) 0%, rgba(7,32,30,.32) 50%, rgba(7,32,30,.05) 100%);
}
.tile-plate{
  /* Sin foto no se finge una: placa tipográfica con los datos de la zona.
     Al lado de las reales se lee como una decisión editorial, no como
     un hueco, y además dice algo que la foto no dice. */
  background:
    linear-gradient(135deg, transparent 47%, rgba(217,178,116,.07) 48%, rgba(217,178,116,.07) 49%, transparent 50%) 0 0/24px 24px,
    linear-gradient(160deg, #15433D 0%, #0A2522 58%, #07201E 100%);
  border:1px solid rgba(217,178,116,.22);
}
.tile-plate::after{background:linear-gradient(to top, rgba(7,32,30,.85) 0%, rgba(7,32,30,0) 46%)}
.tile-plate:hover{border-color:rgba(217,178,116,.5)}
.plate{
  position:absolute;left:0;right:0;top:0;height:62%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:0 18px;z-index:1;
}
.plate-fig{
  font-family:var(--display);font-size:clamp(3rem,5.4vw,4rem);line-height:.92;
  color:var(--bronze-light);font-variant-numeric:tabular-nums;
}
.plate-fig em{font-style:normal;font-size:.44em;margin-left:.08em;vertical-align:.5em}
.plate-cap{margin-top:8px;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-dark)}
.plate-rule{display:block;width:44px;height:1px;background:rgba(217,178,116,.45);margin:16px 0}
.plate-sqft{font-size:.86rem;color:var(--muted-dark);font-variant-numeric:tabular-nums}
.plate-sqft em{font-style:normal;color:rgba(175,195,191,.7)}
.plate-sm{height:100%;padding-bottom:34px}
.plate-sm .plate-fig{font-size:2.6rem}
.guide-shot-bare .plate-cap{font-size:.68rem}
.tile-plate .tile-text{position:absolute;left:0;right:0;bottom:0;padding:20px 18px;z-index:2}
.tile-plate .tile-name{color:var(--ivory)}
.tile-plate .tile-meta{color:var(--bronze-light)}
.tile-bare .tile-meta{color:var(--bronze)}
.tile-text{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 20px;display:block}
.tile-name{display:block;font-family:var(--display);font-size:1.3rem;line-height:1.15;margin-bottom:5px}
.tile-meta{display:block;font-size:.82rem;color:var(--bronze-light)}

.section-head-split{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-end;justify-content:space-between;max-width:none}
.section-head-split > div{max-width:62ch}

/* herramientas sobre fondo oscuro */
.section-ink .tools{background:#14403B;border-color:#14403B}
.section-ink .tool{background:var(--ink)}
.section-ink .tool h3{color:var(--ivory)}
.section-ink .tool p{color:var(--muted-dark)}
.section-ink .tool-icon{color:var(--bronze-light)}
.section-ink .tool .go{color:var(--bronze-light);border-bottom-color:var(--bronze-light)}

/* bloque de argumento */
.pitch{display:grid;grid-template-columns:1fr;gap:32px}
@media(min-width:900px){.pitch{grid-template-columns:1fr 1.25fr;gap:64px}}
.pitch h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}
.pitch-body p{color:var(--muted);max-width:60ch}
.pitch-body .creds{margin-top:36px}

@media(max-width:760px){
  .stage-inner{padding-top:62px;padding-bottom:52px}
  .stage-search{flex-direction:column;margin-top:2rem}
  .stage-search select{border-right:0;border-bottom:1px solid var(--line);width:100%}
  .stage-search .btn{width:100%}
  .stage-bar dl > div{padding-left:0;border-left:0;border-top:1px solid rgba(217,178,116,.2);padding-top:16px;padding-bottom:16px}
  .stage-bar dl > div:first-child{border-top:0}
  .showcase{padding:56px 0 48px}
  .showcase-card{margin-left:0;padding:30px 24px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
}


/* ---------- Dirección A: piezas propias ---------- */

/* Panel de cifras junto al titular, no debajo. Es lo que convierte la
   portada en una declaración de intenciones en vez de un eslogan. */
.stage-figures{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:1px;background:rgba(217,178,116,.24);border:1px solid rgba(217,178,116,.24);
  margin-top:48px;
}
.stage-figures div{background:var(--deep);padding:22px 24px}
.stage-figures dt{font-size:.82rem;color:var(--bronze-light);margin-bottom:7px}
.stage-figures dd{
  margin:0;font-family:var(--display);font-size:1.6rem;color:var(--ivory);
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.stage.stage-bare .stage-figures{background:var(--line);border-color:var(--line)}
.stage.stage-bare .stage-figures div{background:var(--ivory)}
.stage.stage-bare .stage-figures dt{color:var(--bronze)}
.stage.stage-bare .stage-figures dd{color:var(--ink)}

/* El logo en la cabecera, cuando no hay imagen, en latón claro */
.site-head .brand em{color:var(--bronze-light)}

/* Credenciales: filete de latón arriba, que ata la tira al sistema */
.creds{border-top:2px solid var(--bronze-light)}
.section-ink .creds{border-top-color:var(--bronze-light)}

/* La tabla de datos de las fichas, con el filete de petróleo */
.spec-table th{color:var(--muted)}
.facts{border-top:2px solid var(--ink)}
.stat-strip{border-top:2px solid var(--ink)}

/* ===========================================================
   PÁGINAS INTERIORES
   La portada tenía tratamiento propio y el resto abrían con un
   titular suelto sobre crema, tablas de dos columnas y listas
   con viñetas. Esto le da a todas las páginas el mismo lenguaje
   que la portada, sin tocar ninguna plantilla.
   =========================================================== */

/* Banda de cabecera: migas y titular sobre petróleo.
   Es una sección propia (.page-head), no la sección de contenido. El
   intento anterior pintaba la primera sección entera con :has(h1), y en
   las páginas de herramienta eso teñía también la calculadora: texto
   claro sobre fondo claro, ilegible. */
main > nav.crumbs{
  background:var(--ink);color:var(--muted-dark);
  padding:26px 0 0;margin:0;
}
main > nav.crumbs a{color:var(--bronze-light);border-bottom-color:rgba(217,178,116,.35)}
main > nav.crumbs a:hover{border-bottom-color:var(--bronze-light)}
main > nav.crumbs span{color:var(--ivory)}

.page-head{
  background:var(--ink);color:var(--ivory);
  padding:42px 0 54px;
}
main > nav.crumbs + .page-head{padding-top:28px}
.page-head h1{color:var(--ivory)}
.page-head .section-head{margin-bottom:0;max-width:64ch}
.page-head .eyebrow{color:var(--bronze-light)}
.page-head .lede{color:var(--muted-dark)}
.page-head .btn-quiet{color:var(--ivory);border-color:var(--ivory)}
.page-head .btn-quiet:hover{background:var(--ivory);color:var(--ink)}
.page-head + .section{padding-top:64px}

/* Cabecera de comunidad y de edificio, al mismo lenguaje */
.area-hero{background:var(--ink);color:var(--ivory);padding:46px 0 0;margin-bottom:0}
.area-hero h1{color:var(--ivory)}
.area-hero .eyebrow{color:var(--bronze-light)}
.area-hero .lede{color:var(--muted-dark)}
.area-hero .stat-strip{
  background:rgba(217,178,116,.24);border:0;border-top:2px solid var(--bronze-light);
  margin:40px 0 0;transform:translateY(1px);
}
.area-hero .stat-strip div{background:var(--deep)}
.area-hero .stat-strip dt{color:var(--bronze-light)}
.area-hero .stat-strip dd{color:var(--ivory)}
.area-hero .stat-strip dd small{color:var(--muted-dark)}
.area-banner{margin-bottom:0}

/* Datos: fuera el aspecto de tabla de 2010 */
.spec-table{border-collapse:separate;border-spacing:0}
.spec-table th,.spec-table td{
  padding:15px 0;border-bottom:1px solid var(--line);font-size:.97rem;vertical-align:baseline;
}
.spec-table th{
  color:var(--bronze);font-size:.84rem;letter-spacing:.01em;width:42%;
}
.spec-table td{text-align:right;font-family:var(--display);font-size:1.05rem}
.spec-table tr:first-child th,.spec-table tr:first-child td{border-top:2px solid var(--ink)}
.calc-out .spec-table td{font-family:var(--display)}

/* Amenidades: de lista con viñetas a etiquetas */
.amenities{display:flex;flex-wrap:wrap;gap:8px}
.amenities li{
  padding:9px 16px;border:1px solid var(--line);background:var(--ivory);
  color:var(--ink);font-size:.9rem;
}
.amenities li::before{display:none}
.section-sand .amenities li{background:var(--sand)}
.section-ink .amenities li{background:var(--deep);border-color:#14403B;color:var(--ivory)}

/* Cifras: tarjetas con filete de latón, no cajas grises */
.facts{border:0;background:transparent;gap:16px;border-top:0}
.facts div{
  background:var(--ivory);border:1px solid var(--line);
  border-top:2px solid var(--ink);padding:20px 22px;
}
.facts dd{font-size:1.4rem}

.stat-strip{gap:1px;background:var(--line);border:1px solid var(--line);border-top:2px solid var(--ink)}

/* Pasos: el número en latón, grande, como ancla visual */
.steps > li{padding-left:84px}
.steps > li::before{
  font-size:2.1rem;color:var(--bronze);top:26px;
  font-variant-numeric:tabular-nums;line-height:1;
}
.steps h2,.steps h3{font-size:1.38rem}

/* Prosa: filete de latón sobre cada apartado */
.prose h2{position:relative;padding-top:22px}
.prose h2::before{
  content:"";position:absolute;top:0;left:0;width:48px;height:2px;background:var(--bronze);
}
.prose h2:first-child{padding-top:0}
.prose h2:first-child::before{display:none}

/* Listas de comunidad y edificio, con más presencia */
.area-note{padding:34px 0}
.area-note h2,.area-note h3{font-size:1.5rem}

@media(max-width:760px){
  .page-head{padding:30px 0 38px}
  main > nav.crumbs + .page-head{padding-top:20px}
  .page-head + .section{padding-top:48px}
  .area-hero{padding-top:30px}
  .spec-table th{width:52%}
  .steps > li{padding-left:58px}
  .steps > li::before{font-size:1.5rem;top:28px}
}

/* ---------- Blindaje de color ----------
   El panel de la calculadora no declaraba color propio y heredaba el de
   la sección. Cuando la sección se volvió petróleo, el precio salió en
   hueso sobre arena: invisible. Estos bloques fijan su color siempre,
   da igual dónde se coloquen. */
.calc-out{color:var(--ink)}
.calc-out .eyebrow{color:var(--bronze)}
.calc-out .big{color:var(--ink)}
.calc-out .mid{color:var(--ink)}
.calc-out .hint{color:var(--muted)}
.calc-out .spec-table th{color:var(--bronze)}
.calc-out .spec-table td{color:var(--ink)}
.calc-form{color:var(--ink)}
.calc-form legend{color:var(--bronze)}
.calc-form label{color:var(--muted)}
.calc-form input,.calc-form select,.calc-form textarea{color:var(--ink);background:var(--ivory)}
.quiz{color:var(--ink);background:var(--ivory)}
.quiz .q > p{color:var(--ink)}
.verdict{color:var(--ink)}
.verdict h3{color:var(--ink)}
.verdict p{color:var(--muted)}
.listing{color:var(--ink)}
.listing-name{color:var(--ink)}
.listing-price{color:var(--ink)}
.area-note{color:var(--ink)}
.spec-table{color:var(--ink)}
.facts dd{color:var(--ink)}
.prose{color:var(--ink)}
.prose h2,.prose h3{color:var(--ink)}

/* ===========================================================
   ÍNDICE DE COMUNIDADES
   Era una pared de siete bloques de prosa. Ahora abre con una
   comparación visual y sigue con fichas que mezclan foto, cifras
   y texto, en lugar de texto solo.
   =========================================================== */

/* Ranking por rentabilidad: la barra es el argumento */
.rank{border-top:2px solid var(--ink)}
.rank-head,.rank-row{
  display:grid;grid-template-columns:1.1fr 2.2fr .8fr .8fr;
  gap:20px;align-items:center;padding:15px 0;
  border-bottom:1px solid var(--line);
}
.rank-head{font-size:.84rem;color:var(--bronze);padding-top:12px}
.rank-row{text-decoration:none;color:var(--ink);transition:background .18s ease}
.rank-row:hover,.rank-row:focus-visible{background:var(--ivory)}
.rank-name{font-family:var(--display);font-size:1.12rem;line-height:1.2;color:var(--ink)}
.rank-bar{position:relative;display:flex;align-items:center;gap:12px;height:20px}
.rank-bar > span{
  display:block;height:10px;background:var(--ink);
  transition:background .18s ease;min-width:4px;
}
.rank-row:hover .rank-bar > span{background:var(--brass-solid)}
.rank-bar em{
  font-style:normal;font-family:var(--display);font-size:1.02rem;
  color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;
}
.rank-num{
  text-align:right;font-family:var(--display);font-size:1rem;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap;
}
.rank-head .rank-num{font-family:var(--body);color:var(--bronze)}

/* Fichas de guía: foto, cifras y texto en la misma tarjeta */
.guides{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:860px){.guides{grid-template-columns:1fr 1fr}}
.guide{background:var(--ivory);display:grid;grid-template-columns:1fr}
@media(min-width:560px){.guide{grid-template-columns:200px 1fr}}
.guide-shot{position:relative;display:block;background:var(--sand);overflow:hidden;min-height:190px}
.guide-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.guide-shot:hover img{transform:scale(1.05)}
.guide-shot-bare{
  background:
    linear-gradient(135deg, transparent 47%, rgba(14,43,40,.12) 48%, rgba(14,43,40,.12) 49%, transparent 50%) 0 0/20px 20px,
    linear-gradient(150deg, #0E2B28 0%, #14403B 100%);
}
.guide-profile{
  position:absolute;left:0;bottom:0;z-index:2;
  background:var(--ink);color:var(--bronze-light);
  font-size:.76rem;padding:6px 12px;
}
.guide-body{padding:22px 24px 24px}
.guide-body h3{font-size:1.4rem;margin-bottom:.2rem}
.guide-body h3 a{text-decoration:none;color:var(--ink)}
.guide-body h3 a:hover{color:var(--bronze)}
.guide-vibe{font-size:.84rem;color:var(--bronze);margin:0 0 14px}
.guide-figs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 18px;
  margin:0 0 16px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
@media(min-width:700px){.guide-figs{grid-template-columns:repeat(4,1fr)}}
.guide-figs dt{font-size:.74rem;color:var(--bronze);margin-bottom:3px}
.guide-figs dd{margin:0;font-family:var(--display);font-size:1.02rem;color:var(--ink);font-variant-numeric:tabular-nums}
.guide-intro{font-size:.93rem;color:var(--muted);line-height:1.6;margin:0 0 14px}
.guide-foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;margin:0;font-size:.86rem}
.guide-count{color:var(--ink)}
.guide-foot .go{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:1px}

@media(max-width:620px){
  .rank-head,.rank-row{grid-template-columns:1fr 1.4fr;row-gap:6px}
  .rank-head .rank-num:last-child,.rank-row .rank-num:last-child{display:none}
  .rank-num{text-align:left;grid-column:1/3;color:var(--muted);font-size:.88rem}
  .guide-shot{min-height:150px}
}

/* ─────────────────────────────────────────────────────────────
   Índice de edificios: ficha con foto y cifras.
   ───────────────────────────────────────────────────────────── */
.towers{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:720px){.towers{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.towers{grid-template-columns:repeat(3,1fr)}}
.tower{background:var(--ivory);display:flex;flex-direction:column}
.tower-shot{position:relative;display:block;background:var(--sand);overflow:hidden;aspect-ratio:7/5}
.tower-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tower-shot:hover img{transform:scale(1.05)}
.tower-shot-bare{
  background:
    linear-gradient(135deg, transparent 47%, rgba(14,43,40,.12) 48%, rgba(14,43,40,.12) 49%, transparent 50%) 0 0/20px 20px,
    linear-gradient(150deg, #0E2B28 0%, #14403B 100%);
}
.tower-count{
  position:absolute;right:0;top:0;z-index:2;
  background:var(--ink);color:var(--bronze-light);
  font-size:.74rem;padding:5px 11px;letter-spacing:.02em;
}
.tower-body{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.tower-body h2{font-size:1.3rem;margin-bottom:.2rem}
.tower-body h2 a{text-decoration:none;color:var(--ink)}
.tower-body h2 a:hover{color:var(--bronze)}
.tower-area{display:block;font-family:var(--body);font-size:.82rem;font-weight:400;color:var(--bronze);margin:5px 0 0;letter-spacing:.04em;text-transform:uppercase}
.tower-figs{
  display:grid;grid-template-columns:repeat(2,1fr);gap:10px 16px;
  margin:0 0 13px;padding:13px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.tower-figs dt{font-size:.72rem;color:var(--bronze);margin-bottom:3px}
.tower-figs dd{margin:0;font-family:var(--display);font-size:1rem;color:var(--ink);font-variant-numeric:tabular-nums}
.tower-range{font-size:.9rem;color:var(--muted);line-height:1.55;margin:0 0 14px}
.tower-foot{margin:auto 0 0;font-size:.86rem}
.tower-foot .go{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:1px}

/* ─────────────────────────────────────────────────────────────
   Índice de promotoras: sin logos de marca, con monograma.
   ───────────────────────────────────────────────────────────── */
.devs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:680px){.devs{grid-template-columns:1fr 1fr}}
.dev{
  background:var(--ivory);display:grid;grid-template-columns:62px 1fr;
  gap:18px;align-items:start;padding:22px 24px;text-decoration:none;color:var(--ink);
  transition:background .25s ease;
}
.dev:hover{background:var(--sand)}
.dev-mark{
  display:flex;align-items:center;justify-content:center;
  width:62px;height:62px;background:var(--ink);color:var(--bronze-light);
  font-family:var(--display);font-size:1.3rem;letter-spacing:.04em;
}
.dev-body{display:block}
.dev-name{display:block;font-family:var(--display);font-weight:400;font-size:1.28rem;line-height:1.2;color:var(--ink)}
.dev-areas{display:block;font-size:.82rem;color:var(--bronze);margin-top:3px}
.dev-figs{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:11px;font-size:.88rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────
   Notas numeradas: sustituyen a los muros de prosa.
   ───────────────────────────────────────────────────────────── */
.notes{display:grid;grid-template-columns:1fr;gap:28px 40px;margin-top:40px}
@media(min-width:760px){.notes{grid-template-columns:1fr 1fr}}
.note{border-top:1px solid var(--line);padding-top:18px}
.note-key{
  font-family:var(--display);font-size:.92rem;color:var(--bronze);
  margin:0 0 .5rem;letter-spacing:.06em;
}
.note h3{color:var(--ink);margin-bottom:.5rem}
.note p{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0}

/* Texto secundario sobre arena: #5E6B67 solo da 4.24 contra #E7E0D2. */
.section-sand .lede,
.section-sand .note p,
.section-sand .prose p,
.section-sand .rank-num,
.section-sand .hint{color:var(--muted-sand)}

/* ─────────────────────────────────────────────────────────────
   Móvil: correcciones sobre la portada.
   El buscador en columna heredaba flex:1 1 170px, y en vertical
   ese 170px es ALTURA, así que cada select se estiraba a media
   pantalla. Y la cabecera pegajosa se comía 230px de un iPhone.
   ───────────────────────────────────────────────────────────── */
@media(max-width:760px){
  .stage-search{flex-direction:column;align-content:flex-start}
  .stage-search select{flex:0 0 auto;min-width:0;height:54px;padding:0 16px;font-size:1rem}
  .stage-search .btn{flex:0 0 auto;padding:16px 24px}

  /* Degradado vertical: en móvil el texto ocupa todo el ancho y el
     degradado horizontal dejaba la mitad derecha sin cobertura. */
  .stage::after{
    background:
      linear-gradient(to bottom, rgba(7,32,30,.90) 0%, rgba(7,32,30,.72) 55%, rgba(7,32,30,.86) 100%);
  }
  .stage-bare::after{background:none}

  /* Cabecera compacta: logo en una línea, navegación deslizable. */
  .site-head .wrap{
    min-height:0;padding-top:10px;padding-bottom:0;
    flex-wrap:wrap;gap:0;row-gap:0;
  }
  .brand-logo{flex:0 0 auto}
  .brand-logo img{max-width:150px;height:38px!important}
  /* Desplegable en vertical. Siete entradas no caben deslizándolas:
     se cortaba la última y no había forma de saber que había más. */
  .nav{
    margin-left:0;flex:1 0 100%;flex-direction:column;align-items:stretch;
    gap:0;padding:0;overflow:hidden;max-height:0;
    transition:max-height .28s ease;
  }
  body.nav-open .nav{max-height:70vh;overflow-y:auto}
  .nav a{
    font-size:1rem;padding:14px 0;border-bottom:1px solid rgba(217,178,116,.18);
    border-top:0;white-space:normal;
  }
  .nav a:last-child{border-bottom:0}
  .nav a[aria-current="page"]{border-bottom-color:rgba(217,178,116,.18);color:var(--ivory)}
  .nav .lang-pair{align-self:flex-start;margin:16px 0 18px;font-size:.84rem}
  .nav .lang-now,.site-head .nav .lang-go{padding:8px 14px}
  .site-head .wrap{align-items:center;justify-content:space-between}
  .nav a{font-size:.9rem;white-space:nowrap;padding-bottom:3px}

  .stage-inner{padding-top:46px;padding-bottom:42px}
  .stage h1{font-size:clamp(2rem,8.4vw,2.7rem);max-width:none}
  .stage-lede{font-size:1.04rem}
  .stage-kicker{font-size:.92rem;margin-bottom:1rem}
  .stage-bar dl{grid-template-columns:1fr 1fr}
  .stage-bar dl > div{padding-left:0;padding-right:14px}
  .stage-bar dd{font-size:1.15rem}
}

@media(max-width:420px){
  .brand-logo img{max-width:132px;height:34px!important}
  .nav{gap:16px}
  .nav a{font-size:.86rem}
  .stage-bar dl{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────
   Artículos: columna de lectura con índice fijo al lado.
   ───────────────────────────────────────────────────────────── */
.art-meta{
  display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 0;
  font-size:.86rem;color:var(--muted-dark);
}
.art-meta span{position:relative}
.art-meta span + span::before{content:"";position:absolute;left:-12px;top:.55em;width:3px;height:3px;background:var(--bronze-light);border-radius:50%}

.art-layout{display:grid;grid-template-columns:1fr;gap:40px}
@media(min-width:960px){.art-layout{grid-template-columns:236px 1fr;gap:64px}}
.art-layout-solo{grid-template-columns:1fr!important;max-width:74ch}

.art-toc{align-self:start;background:var(--ivory)}
@media(min-width:960px){.art-toc{position:sticky;top:104px}}
.art-toc ol{list-style:none;margin:14px 0 0;padding:0;border-left:1px solid var(--line)}
.art-toc li{margin:0}
.art-toc a{
  display:block;padding:7px 0 7px 16px;margin-left:-1px;
  border-left:1px solid transparent;
  font-size:.88rem;color:var(--muted);text-decoration:none;line-height:1.4;
}
.art-toc a:hover{color:var(--ink);border-left-color:var(--bronze)}

.art-body{max-width:72ch;color:var(--ink);background:var(--ivory)}
.art-body h2{font-size:clamp(1.5rem,3vw,2rem);margin:44px 0 1rem;scroll-margin-top:110px}
.art-body h2:first-child{margin-top:0}
.art-body h3{font-size:1.22rem;margin:30px 0 .7rem}
.art-body p{color:#3F4C49;margin:0 0 1.15rem;line-height:1.72}
.art-list{margin:0 0 1.3rem;padding-left:1.25rem;color:#3F4C49}
.art-list li{margin-bottom:.6rem;line-height:1.65}
.art-list::marker{color:var(--bronze)}
ol.art-list li::marker{font-family:var(--display);color:var(--bronze)}

.art-note{
  border-left:3px solid var(--bronze-light);background:var(--sand);
  padding:18px 22px;margin:28px 0 1.5rem!important;color:var(--ink)!important;
  font-size:.97rem;
}
.art-table-wrap{overflow-x:auto;margin:0 0 1.6rem;-webkit-overflow-scrolling:touch}
.art-table-wrap .spec-table{margin:0;min-width:430px}

.art-faqs{margin:0 0 2rem;border-top:1px solid var(--line);background:var(--ivory)}
.art-faqs details{border-bottom:1px solid var(--line)}
.art-faqs summary{
  cursor:pointer;list-style:none;padding:17px 30px 17px 0;position:relative;
  font-family:var(--display);font-size:1.08rem;color:var(--ink);line-height:1.3;
}
.art-faqs summary::-webkit-details-marker{display:none}
.art-faqs summary::after{
  content:"";position:absolute;right:4px;top:26px;width:9px;height:9px;
  border-right:1.5px solid var(--bronze);border-bottom:1.5px solid var(--bronze);
  transform:rotate(45deg);transition:transform .2s ease;
}
.art-faqs details[open] summary::after{transform:rotate(-135deg);top:30px}
.art-faqs p{margin:0 0 18px;color:#3F4C49;font-size:.97rem;line-height:1.7}

.art-disclaimer{
  background:var(--ivory);margin-top:44px;padding-top:20px;border-top:1px solid var(--line);
  font-size:.86rem;color:var(--muted);line-height:1.6;
}

.art-related{margin-top:66px;padding-top:34px;border-top:1px solid var(--line)}
.art-related-grid{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:16px}
@media(min-width:760px){.art-related-grid{grid-template-columns:repeat(3,1fr)}}
.art-card{background:var(--ivory);display:block;padding:22px 24px;text-decoration:none;transition:background .25s ease}
.art-card:hover{background:var(--sand)}
.art-card-kicker{display:block;font-size:.76rem;color:var(--bronze);margin-bottom:8px}
.art-card strong{display:block;font-family:var(--display);font-weight:400;font-size:1.14rem;line-height:1.25;color:var(--ink)}
.art-card-lede{display:block;margin-top:9px;font-size:.89rem;color:var(--muted);line-height:1.55}

/* ─────────────────────────────────────────────────────────────
   Portada en español: rejilla de guías.
   ───────────────────────────────────────────────────────────── */
.guides-es{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:680px){.guides-es{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.guides-es{grid-template-columns:repeat(3,1fr)}}
.guide-es{
  background:var(--ivory);display:flex;flex-direction:column;
  padding:26px 26px 24px;text-decoration:none;transition:background .25s ease;
}
.guide-es:hover{background:var(--sand)}
.guide-es-kicker{font-size:.76rem;color:var(--bronze);margin-bottom:10px}
.guide-es strong{font-family:var(--display);font-weight:400;font-size:1.3rem;line-height:1.2;color:var(--ink)}
.guide-es-lede{margin-top:11px;font-size:.92rem;color:var(--muted);line-height:1.6}
.guide-es-foot{margin-top:auto;padding-top:18px;font-size:.82rem;color:var(--bronze)}

/* Selector de idioma: los dos visibles, el actual relleno. */
.lang-pair{
  display:inline-flex;align-items:stretch;border:1px solid rgba(217,178,116,.42);
  font-size:.76rem;letter-spacing:.06em;line-height:1;overflow:hidden;
}
.lang-now,.site-head .nav .lang-go{
  display:flex;align-items:center;padding:6px 10px;border:0;text-decoration:none;
}
.lang-now{background:var(--bronze-light);color:var(--deep);cursor:default}
.site-head .nav .lang-go{color:var(--bronze-light);background:transparent;transition:background .2s ease,color .2s ease}
.site-head .nav .lang-go:hover,.site-head .nav .lang-go:focus-visible{background:rgba(217,178,116,.2);color:var(--ivory)}

/* Botón secundario sobre el hero */
.stage-actions{display:flex;flex-wrap:wrap;gap:14px;margin:2.4rem 0 0}
.btn-ghost{
  display:inline-block;font-family:var(--body);font-size:.93rem;padding:13px 28px;
  text-decoration:none;color:var(--ivory);border:1px solid rgba(242,237,227,.4);
  background:transparent;cursor:pointer;
  transition:border-color .25s ease,background .25s ease;
}
.btn-ghost:hover{border-color:var(--bronze-light);background:rgba(217,178,116,.12)}
.stage-bare .btn-ghost{color:var(--ink);border-color:var(--line)}
.stage-bare .btn-ghost:hover{border-color:var(--bronze);background:rgba(122,90,36,.07)}

/* ─────────────────────────────────────────────────────────────
   Blog: entradas de WordPress.
   ───────────────────────────────────────────────────────────── */
.posts{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
@media(min-width:760px){.posts{grid-template-columns:1fr 1fr}}
.post{background:var(--ivory);display:flex;flex-direction:column}
.post-shot{position:relative;display:block;background:var(--sand);overflow:hidden;aspect-ratio:3/2}
.post-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.post-shot:hover img{transform:scale(1.05)}
.post-shot-bare{background:linear-gradient(150deg,#0E2B28 0%,#14403B 100%)}
.post-body{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.post-meta{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0 0 12px;font-size:.8rem;color:var(--bronze)}
.post-body h2{font-size:1.4rem;margin-bottom:.6rem}
.post-body h2 a{text-decoration:none;color:var(--ink)}
.post-body h2 a:hover{color:var(--bronze)}
.post-excerpt{color:var(--muted);font-size:.94rem;line-height:1.6;margin:0 0 16px}
.post-body .go{margin-top:auto;color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:1px;align-self:flex-start;font-size:.88rem}
.post-hero{margin:0 0 40px}
.post-hero img{width:100%;height:auto}

@media(max-width:620px){
  .art-body h2{margin-top:34px}
  .art-note{padding:15px 17px}
  .guide-es{padding:22px}
}

/* Celdas de texto en tablas de artículo: deben respirar en vertical. */
.art-table-wrap .spec-table td:not(.num),
.art-table-wrap .spec-table th:not(.num){text-align:left}
.art-table-wrap .spec-table td,
.art-table-wrap .spec-table th{vertical-align:top;line-height:1.5}
/* Texto corrido en la fuente de texto; la serif se reserva para las cifras. */
.art-table-wrap .spec-table td:not(.num){font-family:var(--body);font-size:.95rem;color:#3F4C49}
.art-table-wrap .spec-table td.num{font-variant-numeric:tabular-nums}
.art-table-wrap .spec-table th[scope="row"]{color:var(--bronze);width:30%;padding-right:22px}

/* ─────────────────────────────────────────────────────────────
   Equipo. Retrato vertical, que es como se fotografía a la gente,
   y las etiquetas de idioma debajo porque para el cliente español
   son el dato que decide.
   ───────────────────────────────────────────────────────────── */
.team{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:40px 28px;
}
@media(min-width:680px){.team{grid-template-columns:repeat(3,1fr);gap:46px 34px}}
.member{background:transparent;display:flex;flex-direction:column;text-align:center;align-items:center}

/* Retrato en círculo. Encuadrado un poco por encima del centro, que es
   donde está la cara en casi cualquier foto vertical. */
.member-shot{
  position:relative;width:100%;max-width:168px;aspect-ratio:1;
  border-radius:50%;overflow:hidden;background:var(--sand);
  border:1px solid var(--line);
}
.member-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
.member-shot-bare{
  display:flex;align-items:center;justify-content:center;border-color:transparent;
  background:linear-gradient(150deg,#14403B 0%,#0E2B28 100%);
}
.member-initials{font-family:var(--display);font-size:2.1rem;color:var(--bronze-light);letter-spacing:.04em}

.member-body{padding:20px 2px 0;display:flex;flex-direction:column;align-items:center;flex:1;background:var(--ivory)}
.member-body h3{font-size:1.16rem;color:var(--ink);margin-bottom:.25rem;line-height:1.25}
.member-role{font-size:.8rem;color:var(--bronze);margin:0 0 12px;line-height:1.35}
.member-line{font-size:.88rem;color:var(--muted);line-height:1.6;margin:0 0 14px}
.member-tags{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:auto 0 0}
.member-tags .tag{
  font-size:.74rem;color:var(--ink);background:var(--sand);
  border:1px solid var(--line);padding:3px 9px;line-height:1.3;
}
.member-tags .tag-brn{background:transparent;color:var(--bronze);border-color:var(--bronze);font-variant-numeric:tabular-nums}
.member-mail{margin:12px 0 0;font-size:.82rem}
.member-mail a{color:var(--bronze);text-decoration:none;border-bottom:1px solid var(--bronze);padding-bottom:1px}
.section-sand .member-tags .tag{background:var(--ivory)}

/* ─────────────────────────────────────────────────────────────
   Oficina: mosaico donde la primera foto manda.
   ───────────────────────────────────────────────────────────── */
.office{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.office-shot{margin:0;position:relative;background:var(--sand);overflow:hidden;aspect-ratio:4/3}
.office-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* El mosaico se arma por número de fotos: una tira de iguales no cuenta
   nada, y cualquier combinación tiene que rellenar la rejilla entera
   o queda un agujero donde debería haber una foto. */
@media(min-width:720px){
  .office{grid-auto-rows:188px}
  .office-shot{aspect-ratio:auto;height:100%}

  .office-2{grid-template-columns:1fr 1fr;grid-auto-rows:300px}

  .office-3{grid-template-columns:repeat(3,1fr)}
  .office-3 .office-shot:first-child{grid-column:span 2;grid-row:span 2}

  .office-4{grid-template-columns:repeat(4,1fr)}
  .office-4 .office-shot:first-child{grid-column:span 2;grid-row:span 2}
  .office-4 .office-shot:last-child{grid-column:span 2}

  .office-5{grid-template-columns:repeat(4,1fr)}
  .office-5 .office-shot:first-child{grid-column:span 2;grid-row:span 2}

  .office-6{grid-template-columns:repeat(3,1fr);grid-auto-rows:230px}
}
@media(max-width:719px){
  .office{grid-template-columns:1fr 1fr}
  .office-shot:first-child{grid-column:span 2}
}
.office-caption{margin:16px 0 0;font-size:.88rem;color:var(--muted)}
.section-sand .office-caption{color:var(--muted-sand)}

/* ─────────────────────────────────────────────────────────────
   Banda de equipo en portada.
   Foto real a un lado y los tres servicios al otro: el encargo es
   que en la home se vea de un vistazo que hay personas detrás y que
   no solo venden pisos.
   ───────────────────────────────────────────────────────────── */
.band{background:var(--ink);color:var(--ivory)}
.band-grid{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:900px){
  .band-grid{grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);align-items:center}
}

/* La foto conserva su proporción en lugar de estirarse a la altura del
   texto: es una horizontal con dos personas y el skyline, y un recorte
   vertical se come justo lo que hay que ver. */
.band-shot{margin:0;position:relative;overflow:hidden;background:var(--deep);aspect-ratio:4/3}
.band-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media(min-width:900px){
  /* Sangra hasta el borde izquierdo de la pantalla: la foto es el
     argumento, no una ilustración de acompañamiento. */
  .band-shot{margin-left:calc((100vw - min(100vw, var(--measure))) / -2 - 24px)}
}

.band{padding:0}
@media(min-width:900px){.band{padding:72px 0}}
.band-body{padding:44px 0 56px}
@media(min-width:900px){.band-body{padding:0 0 0 64px}}
.band .eyebrow{color:var(--bronze-light)}
.band h2{color:var(--ivory);font-size:clamp(1.8rem,3.4vw,2.6rem);margin-bottom:1.1rem}
.band-lede{color:var(--muted-dark);font-size:1.02rem;line-height:1.6;margin:0 0 26px;max-width:52ch}

.band-points{margin:0 0 28px;padding:0;border-top:1px solid rgba(217,178,116,.26)}
.band-points > div{padding:14px 0;border-bottom:1px solid rgba(217,178,116,.26)}
.band-points dt{
  font-family:var(--display);font-size:1.05rem;color:var(--bronze-light);
  margin-bottom:4px;line-height:1.25;
}
.band-points dd{margin:0;color:var(--muted-dark);font-size:.92rem;line-height:1.55;max-width:56ch}

.band-faces{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:0 0 26px}
.faces{display:flex}
.face{
  width:52px;height:52px;border-radius:50%;overflow:hidden;position:relative;
  border:2px solid var(--ink);margin-left:-14px;background:var(--deep);
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
}
.face:first-child{margin-left:0}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%}
.face-bare{
  font-family:var(--display);font-size:.95rem;color:var(--bronze-light);
  background:linear-gradient(150deg,#14403B 0%,#0E2B28 100%);
}
.band-names{margin:0;font-size:.88rem;color:var(--muted-dark)}

.band-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin:0}
.band-actions .go{
  color:var(--bronze-light);text-decoration:none;font-size:.92rem;
  border-bottom:1px solid var(--bronze-light);padding-bottom:2px;
}

@media(max-width:899px){
  .band-shot{margin-left:-24px;margin-right:-24px}
}

/* ─────────────────────────────────────────────────────────────
   Bloque partido: titular a la izquierda, desarrollo a la derecha.
   Rompe los muros de prosa sin convertirlos en viñetas.
   ───────────────────────────────────────────────────────────── */
.split{padding:84px 0;background:var(--ivory)}
.split-grid{display:grid;grid-template-columns:1fr;gap:28px}
@media(min-width:880px){.split-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:72px}}
.split-lead h2{color:var(--ink);font-size:clamp(1.7rem,3.2vw,2.5rem);margin-top:.5rem}
@media(min-width:880px){.split-lead{position:sticky;top:112px;align-self:start}}
.split-body{background:var(--ivory)}
.split-body p{color:#3F4C49;font-size:1.03rem;line-height:1.75;margin:0 0 1.2rem;max-width:66ch}
.split-body p:last-child{margin-bottom:0}
.split-body p:first-child{font-size:1.14rem;color:var(--ink)}

/* Nota al pie de la tira de credenciales */
.strip-note{margin:22px 0 0;font-size:.9rem;color:var(--muted-dark);max-width:76ch;line-height:1.6}
.strip-note a{color:var(--bronze-light)}
.section-ink .stat-strip{background:rgba(217,178,116,.26);border-color:rgba(217,178,116,.26)}
.section-ink .stat-strip div{background:var(--deep)}
.section-ink .stat-strip dt{color:var(--bronze-light)}
.section-ink .stat-strip dd{color:var(--ivory)}

/* Apunte suelto, para lo que no merece una sección entera */
.aside-note{border-left:2px solid var(--bronze-light);padding:4px 0 4px 24px;max-width:62ch;background:var(--ivory)}
.aside-note p:last-child{margin:0;color:var(--muted);font-size:.97rem;line-height:1.7}

/* ─────────────────────────────────────────────────────────────
   Frase destacada. Grande, en serif, sin comillas decorativas:
   lo que la hace sonar humana es que sea suya, no el adorno.
   ───────────────────────────────────────────────────────────── */
.pull{background:var(--sand);padding:60px 0}
.pull blockquote{margin:0;max-width:30ch}
.pull blockquote p{
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.7rem,3.6vw,2.7rem);line-height:1.18;letter-spacing:-0.02em;
  color:var(--ink);margin:0;
}
.pull cite{
  display:block;margin-top:22px;font-style:normal;
  font-size:.88rem;color:var(--bronze);
}
.pull cite::before{content:"— "}

/* ─────────────────────────────────────────────────────────────
   La carta. Foto grande a la izquierda con pie que nombra a
   quien sale, texto en primera persona y firma debajo.
   ───────────────────────────────────────────────────────────── */
.letter{background:var(--ivory);padding:80px 0}
.letter-grid{display:grid;grid-template-columns:1fr;gap:38px}
@media(min-width:920px){.letter-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:64px;align-items:start}}

.letter-shot{margin:0}
@media(min-width:920px){.letter-shot{position:sticky;top:112px}}
.letter-shot img{width:100%;height:auto;display:block}
.letter-shot figcaption{
  margin-top:12px;font-size:.84rem;color:var(--muted);line-height:1.5;
  padding-left:14px;border-left:2px solid var(--bronze-light);
}

.letter-body{background:var(--ivory)}
.letter-body p{color:#3F4C49;font-size:1.06rem;line-height:1.78;margin:0 0 1.25rem;max-width:62ch}
.letter-body p:first-child{font-size:1.2rem;line-height:1.65;color:var(--ink)}
.letter-sign{margin-top:34px!important;padding-top:24px;border-top:1px solid var(--line)}
.letter-name{
  display:block;font-family:var(--display);font-size:1.35rem;color:var(--ink);
  line-height:1.2;
}
.letter-role{display:block;margin-top:4px;font-size:.86rem;color:var(--bronze)}

@media(max-width:620px){
  .letter{padding:52px 0}
  .pull{padding:44px 0}
}

/* ─────────────────────────────────────────────────────────────
   Botón del menú. Solo existe en móvil.
   ───────────────────────────────────────────────────────────── */
.nav-toggle{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;margin-left:auto;flex:0 0 auto;
  background:transparent;border:1px solid rgba(217,178,116,.38);
  cursor:pointer;padding:0;
}
.nav-bars{display:block;width:20px;height:14px;position:relative}
.nav-bars span{
  position:absolute;left:0;width:100%;height:1.5px;background:var(--bronze-light);
  transition:transform .25s ease,opacity .2s ease;
}
.nav-bars span:nth-child(1){top:0}
.nav-bars span:nth-child(2){top:6px}
.nav-bars span:nth-child(3){top:12px}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] .nav-bars span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Solo en móvil. Va después de la regla base a propósito: si no, la
   base la pisaría por orden de declaración. */
@media(max-width:760px){
  .nav-toggle{display:flex}
}

/* ─────────────────────────────────────────────────────────────
   Buscador guiado. Preguntas a la izquierda, resultados reales a
   la derecha actualizándose: la gracia es que el contador no miente.
   ───────────────────────────────────────────────────────────── */
.finder{background:var(--ink);color:var(--ivory);padding:84px 0}
.finder .eyebrow{color:var(--bronze-light)}
.finder h2{color:var(--ivory)}
.finder .lede{color:var(--muted-dark)}

.finder-box{display:grid;grid-template-columns:1fr;gap:34px;align-items:start}
@media(min-width:960px){.finder-box{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:56px}}

.finder-rail{display:flex;gap:8px;grid-column:1/-1;margin-bottom:-14px}
.rail-step{
  width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.76rem;border:1px solid rgba(217,178,116,.35);color:var(--muted-dark);
  font-variant-numeric:tabular-nums;transition:all .25s ease;
}
.rail-step.is-on{background:var(--bronze-light);border-color:var(--bronze-light);color:var(--deep)}

.finder-form{min-width:0}
.step{display:none;border:0;padding:0;margin:0;min-width:0}
.step.is-on{display:block}
.step legend{
  padding:0;font-family:var(--display);font-size:clamp(1.3rem,2.4vw,1.75rem);
  color:var(--ivory);line-height:1.2;margin-bottom:22px;
}
.opts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(min-width:560px){.opts-grid{grid-template-columns:repeat(3,1fr)}}
.opts-grid label{display:block;margin:0}
.opts-grid input{position:absolute;opacity:0;width:0;height:0}
.opts-grid span{
  display:block;padding:14px 16px;cursor:pointer;font-size:.95rem;
  border:1px solid rgba(217,178,116,.3);color:var(--ivory);
  transition:background .2s ease,border-color .2s ease;
}
.opts-grid span:hover{border-color:var(--bronze-light)}
.opts-grid input:checked + span{background:var(--bronze-light);border-color:var(--bronze-light);color:var(--deep)}
.opts-grid input:focus-visible + span{outline:2px solid var(--bronze-light);outline-offset:2px}

.finder-hint{margin:18px 0 0;font-size:.86rem;color:var(--muted-dark);max-width:52ch}
.finder-fields{display:grid;grid-template-columns:1fr;gap:14px}
@media(min-width:560px){.finder-fields{grid-template-columns:1fr 1fr}}
.finder-fields label{display:block}
.finder-fields span{display:block;font-size:.82rem;color:var(--bronze-light);margin-bottom:6px}
.finder-fields input{
  width:100%;padding:13px 14px;font-family:var(--body);font-size:1rem;
  background:rgba(242,237,227,.06);border:1px solid rgba(217,178,116,.3);color:var(--ivory);
}
.finder-fields input:focus{outline:2px solid var(--bronze-light);outline-offset:-2px}

.finder-nav{display:flex;gap:12px;margin-top:28px}
.finder-nav .btn-ghost{color:var(--ivory);border-color:rgba(242,237,227,.35)}

/* Resultados */
.finder-out{
  background:var(--deep);border:1px solid rgba(217,178,116,.26);padding:26px 24px;
}
.finder-count{margin:0 0 18px;font-size:.9rem;color:var(--muted-dark)}
.finder-n{
  font-family:var(--display);font-size:2.6rem;color:var(--bronze-light);
  display:block;line-height:1;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
.finder-list{display:flex;flex-direction:column;gap:1px;background:rgba(217,178,116,.18)}
.finder-card{
  display:flex;gap:14px;align-items:center;background:var(--deep);
  padding:12px;text-decoration:none;transition:background .2s ease;
}
.finder-card:hover{background:#0B2A27}
.finder-shot{
  width:76px;height:60px;flex:0 0 76px;overflow:hidden;position:relative;background:#14403B;
}
.finder-shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.finder-shot-bare{background:linear-gradient(150deg,#14403B,#0A2320)}
.finder-meta{min-width:0;display:block}
.finder-meta strong{
  display:block;font-family:var(--display);font-weight:400;font-size:1rem;color:var(--ivory);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.finder-area{display:block;font-size:.78rem;color:var(--muted-dark);margin-top:2px}
.finder-price{display:block;font-size:.86rem;color:var(--bronze-light);margin-top:3px;font-variant-numeric:tabular-nums}
.finder-cta{margin:16px 0 0}
.finder-note{font-size:.88rem;color:var(--muted-dark);line-height:1.6;display:block}
.finder-box.is-empty .finder-n{color:var(--alert)}
.is-empty .finder-list{display:none}

@media(max-width:620px){
  .finder{padding:56px 0}
  .finder-out{padding:20px 18px}
}

/* ─────────────────────────────────────────────────────────────
   Vídeos del canal. Fachada hasta que alguien pulsa.
   ───────────────────────────────────────────────────────────── */
.videos{display:grid;grid-template-columns:1fr;gap:26px 22px}
@media(min-width:620px){.videos{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.videos{grid-template-columns:repeat(3,1fr)}}
.video{margin:0}
.video-play,.video-frame{
  display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);
  padding:0;position:relative;overflow:hidden;background:var(--ink);cursor:pointer;
}
.video-play img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease,opacity .3s ease;
}
.video-play:hover img{transform:scale(1.04);opacity:.86}
.video-tri{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(14,43,40,.82);
  border:1px solid var(--bronze-light);
  display:flex;align-items:center;justify-content:center;
  transition:background .25s ease;
}
.video-tri::after{
  content:"";width:0;height:0;margin-left:4px;
  border-left:15px solid var(--bronze-light);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}
.video-play:hover .video-tri{background:var(--ink)}
.video-play:focus-visible{outline:2px solid var(--bronze);outline-offset:3px}
.video-title{
  margin:12px 0 0;font-size:.92rem;color:var(--muted-sand);line-height:1.5;
}

/* ─────────────────────────────────────────────────────────────
   Las tres cosas que hacemos. Pestañas, no una lista de nueve
   apartados: el que entra decide en dos segundos si le sirve.
   ───────────────────────────────────────────────────────────── */
.offer-box{border:1px solid var(--line);background:var(--ivory);scroll-margin-top:110px}
.offer-tabs{display:grid;grid-template-columns:1fr;gap:1px;background:var(--line)}
@media(min-width:720px){.offer-tabs{grid-template-columns:repeat(3,1fr)}}
.offer-tab{
  display:flex;align-items:center;gap:12px;width:100%;
  background:var(--sand);border:0;cursor:pointer;
  padding:20px 22px;font-family:var(--display);font-size:1.18rem;
  color:var(--muted-sand);text-align:left;line-height:1.2;
  transition:background .25s ease,color .25s ease;
}
.offer-tab:hover{color:var(--ink)}
.offer-tab.is-on{background:var(--ivory);color:var(--ink)}
.offer-num{
  width:28px;height:28px;flex:0 0 28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--body);font-size:.8rem;
  border:1px solid var(--line);color:var(--bronze);background:var(--ivory);
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.offer-tab.is-on .offer-num{background:var(--bronze-light);border-color:var(--bronze-light);color:var(--deep)}
.offer-tab:focus-visible{outline:2px solid var(--bronze);outline-offset:-2px}

.offer-panel{display:none;padding:34px 26px 32px;background:var(--ivory)}
@media(min-width:720px){.offer-panel{padding:42px 40px 40px}}
.offer-panel.is-on{display:block}
.offer-panel h3{
  font-size:clamp(1.5rem,3vw,2.1rem);color:var(--ink);
  line-height:1.15;margin-bottom:.8rem;max-width:22ch;
}
.offer-lede{color:#3F4C49;font-size:1.03rem;line-height:1.65;margin:0 0 28px;max-width:62ch}

.offer-list{list-style:none;margin:0 0 28px;padding:0;border-top:1px solid var(--line)}
.offer-list li{
  display:grid;grid-template-columns:1fr;gap:4px;
  padding:15px 0;border-bottom:1px solid var(--line);
}
@media(min-width:700px){
  .offer-list li{grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:28px;align-items:baseline}
}
.offer-list strong{
  font-family:var(--display);font-weight:400;font-size:1.05rem;
  color:var(--ink);line-height:1.25;
}
.offer-list span{color:var(--muted);font-size:.94rem;line-height:1.6}

.offer-cost{
  margin:0 0 24px;padding:16px 20px;background:var(--sand);
  color:var(--ink);font-size:.95rem;line-height:1.6;
}
.offer-cost span{
  display:block;font-size:.76rem;color:var(--bronze);
  letter-spacing:.04em;margin-bottom:5px;
}

/* ─────────────────────────────────────────────────────────────
   Por qué nosotros. Lo primero tras el hero: es la pregunta que
   el visitante se hace antes de mirar ninguna propiedad.
   ───────────────────────────────────────────────────────────── */
.why{background:var(--ivory);padding:76px 0 80px}
.why-head{max-width:68ch;margin-bottom:46px}
.why h2{
  color:var(--ink);font-size:clamp(1.9rem,4.2vw,3rem);
  line-height:1.08;margin:.5rem 0 1.1rem;
}
.why-lede{color:#3F4C49;font-size:1.1rem;line-height:1.65;margin:0;max-width:60ch}

.why-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:1px;
  background:var(--line);border:1px solid var(--line);
}
@media(min-width:620px){.why-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1040px){.why-grid{grid-template-columns:repeat(4,1fr)}}
.why-grid li{background:var(--ivory);padding:26px 24px 28px}
.why-n{
  display:block;font-family:var(--display);font-size:.92rem;
  color:var(--bronze);letter-spacing:.06em;margin-bottom:12px;
}
.why-grid h3{color:var(--ink);font-size:1.18rem;line-height:1.25;margin-bottom:.6rem}
.why-grid p{color:var(--muted);font-size:.93rem;line-height:1.6;margin:0}

/* El equipo, en grande y con nombre */
.why-team{margin-top:46px;padding-top:32px;border-top:1px solid var(--line)}
.why-team-lead{margin:0 0 24px;font-size:1.02rem;color:var(--ink)}
.why-faces{display:grid;grid-template-columns:repeat(3,1fr);gap:26px 16px}
@media(min-width:760px){.why-faces{grid-template-columns:repeat(6,1fr)}}
.why-face{display:block;text-align:center;text-decoration:none}
.why-shot{
  display:block;width:100%;max-width:124px;margin:0 auto 12px;aspect-ratio:1;
  border-radius:50%;overflow:hidden;position:relative;background:var(--sand);
  border:1px solid var(--line);
}
.why-shot img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%;
  transition:transform .5s ease;
}
.why-face:hover .why-shot img{transform:scale(1.06)}
.why-shot-bare{
  display:flex;align-items:center;justify-content:center;border-color:transparent;
  background:linear-gradient(150deg,#14403B 0%,#0E2B28 100%);
  font-family:var(--display);font-size:1.5rem;color:var(--bronze-light);
}
.why-name{display:block;font-family:var(--display);font-size:1rem;color:var(--ink);line-height:1.2}
.why-face:hover .why-name{color:var(--bronze)}
.why-role{display:block;font-size:.76rem;color:var(--bronze);margin-top:3px;line-height:1.35}

@media(max-width:620px){
  .why{padding:52px 0 56px}
  .why-head{margin-bottom:32px}
}

/* ─────────────────────────────────────────────────────────────
   Calculadora rápida de /tools/. La página tiene que hacer algo,
   no limitarse a enlazar a sitios donde se hacen cosas.
   ───────────────────────────────────────────────────────────── */
.quick{display:grid;grid-template-columns:1fr;gap:34px}
@media(min-width:900px){.quick{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:start}}

.quick-field{display:block;margin-bottom:30px}
.quick-field > span{display:block;font-size:.84rem;color:var(--bronze-light);margin-bottom:6px}
.quick-out{
  display:block;font-family:var(--display);font-size:1.9rem;color:var(--ivory);
  line-height:1.1;margin-bottom:14px;font-variant-numeric:tabular-nums;
}
.quick input[type=range]{
  -webkit-appearance:none;appearance:none;width:100%;height:3px;
  background:rgba(217,178,116,.3);outline:none;cursor:pointer;
}
.quick input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:22px;border-radius:50%;
  background:var(--bronze-light);border:0;cursor:grab;
}
.quick input[type=range]::-moz-range-thumb{
  width:22px;height:22px;border-radius:50%;background:var(--bronze-light);border:0;cursor:grab;
}
.quick input[type=range]:focus-visible{outline:2px solid var(--bronze-light);outline-offset:6px}

.quick-toggles{display:flex;flex-wrap:wrap;gap:10px}
.quick-toggles label{display:block}
.quick-toggles input{position:absolute;opacity:0;width:0;height:0}
.quick-toggles span{
  display:block;padding:10px 16px;cursor:pointer;font-size:.9rem;
  border:1px solid rgba(217,178,116,.3);color:var(--ivory);transition:all .2s ease;
}
.quick-toggles input:checked + span{background:var(--bronze-light);border-color:var(--bronze-light);color:var(--deep)}
.quick-toggles input:focus-visible + span{outline:2px solid var(--bronze-light);outline-offset:2px}

.quick-out-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:0;
  background:rgba(217,178,116,.22);border:1px solid rgba(217,178,116,.22);
}
.quick-out-grid > div{background:var(--deep);padding:22px 20px}
.quick-out-grid dt{font-size:.8rem;color:var(--bronze-light);margin-bottom:8px}
.quick-out-grid dd{
  margin:0;font-family:var(--display);font-size:1.6rem;color:var(--ivory);
  line-height:1.05;font-variant-numeric:tabular-nums;
}
.quick-out-grid small{display:block;margin-top:7px;font-size:.76rem;color:var(--muted-dark);line-height:1.4}
.quick-note{
  grid-column:1/-1;margin:0;padding:15px 18px;background:rgba(217,178,116,.1);
  border-left:2px solid var(--bronze-light);color:var(--muted-dark);
  font-size:.9rem;line-height:1.6;
}
.quick-cta{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 26px;margin:0}
.quick-cta .go{color:var(--bronze-light);text-decoration:none;border-bottom:1px solid var(--bronze-light);padding-bottom:2px;font-size:.92rem}
.tool h3{font-size:1.28rem;color:var(--ink);margin-bottom:.5rem}