/* city-pillar.css · páginas de ciudad, hubs, guía y development con el sistema de marca de la home (3-oct-2026).
   Va DESPUÉS de tulum.css, home.css y es-pillar.css: reutiliza sus componentes (hm-hero, hm-caps, ep-faq, ep-fit, ep-cats, ep-tbl,
   invest, hm-contact) y añade solo lo que esas páginas traen y la home no: franja de cifras en la portada, "por qué" en rejilla de
   cuatro, frase de día, rejilla de ciudades, cierre, filas de precios y fotos de development.
   Mismos tokens: carbón / hueso / oro, Libre Caslon Display + Bodoni Moda cursiva + Jost. Esquinas rectas, filetes de 1 px. */

/* ---------- Portada: titular largo (las ciudades traen una frase en dos líneas) + franja de cifras ---------- */
.cp-hero .ep-t{max-width:21ch;font-size:clamp(34px,min(4.5vw,6.6vh),72px)}
.cp-hero .ep-t .cp-sub{display:block;margin-top:.1em;color:#DAD4C8}
.cp-hero .ep-s--2{margin-top:14px}
.cp-hero .hm-shade{background:
  linear-gradient(0deg,rgba(19,18,17,.97) 0,rgba(19,18,17,.84) 36%,rgba(19,18,17,0) 76%),
  linear-gradient(90deg,rgba(19,18,17,.8) 0,rgba(19,18,17,.52) 36%,rgba(19,18,17,0) 64%),
  linear-gradient(180deg,rgba(19,18,17,.5) 0,rgba(19,18,17,0) 18%)}
.ep-link{display:inline-flex;align-items:center;gap:10px;min-height:44px;font:500 12px/1 var(--text);letter-spacing:.26em;text-transform:uppercase;text-decoration:none;color:var(--bone);padding:10px 0 14px;border-bottom:1px solid rgba(242,239,233,.3);transition:color .3s,border-color .3s}
.ep-link:hover{color:var(--gold-text);border-bottom-color:var(--gold-text)}
.ep-link span{display:inline-block;transition:transform .5s var(--ease)}
.ep-link:hover span{transform:translateX(4px)}
.cp-stats{list-style:none;display:flex;flex-wrap:wrap;gap:22px clamp(26px,3.4vw,52px);max-width:min(900px,56vw);margin-top:clamp(28px,4.2vh,48px);padding-top:clamp(18px,2.8vh,28px);border-top:1px solid rgba(242,239,233,.2)}
.cp-stats li{display:flex;flex-direction:column;gap:9px}
.cp-stats .n{font:400 clamp(26px,2.5vw,38px)/1 var(--display);letter-spacing:-.01em;color:var(--bone);font-feature-settings:"lnum","tnum"}
.cp-stats .l{font:500 10px/1.55 var(--text);letter-spacing:.2em;text-transform:uppercase;color:#CFC8BC;max-width:24ch}
@media (prefers-reduced-motion:no-preference){
  .cp-stats{animation:hm-in 1s var(--ease) .42s both}
}
@media (prefers-reduced-motion:reduce){.cp-cities a,.cp-cities a::after,.ep-link,.ep-link span{transition:none}}
@media(max-width:900px){.cp-stats{max-width:none}}
@media(max-width:560px){.cp-stats{display:grid;grid-template-columns:1fr 1fr;gap:22px 20px}}

/* ---------- Rótulo + titular de pregunta ---------- */
.ep .hm-head .label+.ep-h2{margin-top:22px}
.ep .hm-head .ep-h2+.ep-p{margin-top:28px}
.ep-raised .hm-capc{background:var(--raised)}

/* ---------- "Por qué": cuatro tarjetas en rejilla de filetes (2 x 2), número en cursiva dorada ---------- */
.ep-caps.cp-why{grid-template-columns:repeat(2,1fr)}
.ep-caps.cp-why .hm-capc,.ep-caps.cp-why .hm-capc:nth-child(n+4){grid-column:span 1}
.ep-caps.cp-why .hm-capc:last-child:nth-child(odd){grid-column:1/-1}
.cp-why .hm-capc::before{display:none}
.cp-n{display:block;font:400 26px/1 var(--display);letter-spacing:.04em;color:var(--gold-text);margin-bottom:clamp(28px,4vw,56px);font-feature-settings:"lnum"}
.cp-why .hm-capc p{max-width:52ch}
@media(max-width:700px){.ep-caps.cp-why{grid-template-columns:1fr}.ep-caps.cp-why .hm-capc:last-child:nth-child(odd){grid-column:auto}}

/* ---------- Frase de día ("by the numbers"): el único capítulo en hueso de la página ---------- */
.cp-numbers .label{color:var(--gold-text-lt)}
.cp-q{margin-top:clamp(24px,3vw,40px);max-width:46ch;font:400 clamp(24px,2.5vw,38px)/1.3 var(--display);letter-spacing:-.008em;color:var(--carbon);text-wrap:pretty;font-variation-settings:"opsz" 96}
.cp-qc{position:relative;margin-top:clamp(28px,3.4vw,44px);padding-top:26px;font:500 11px/1.6 var(--text);letter-spacing:.24em;text-transform:uppercase;color:var(--muted-lt)}
.cp-qc::before{content:"";position:absolute;left:0;top:0;width:44px;height:1px;background:var(--gold)}

/* ---------- Nueve categorías (mismo marcado que las páginas de categorías y LA; reglas repetidas aquí para no depender del orden de commits) ---------- */
div.ep-cat:not(.static):hover{border-top-color:var(--gold)}
div.ep-cat:not(.static):hover i{transform:scaleX(1)}
.ep-cat-l{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:8px}
.ep-cat-l a{display:inline-flex;align-items:center;min-height:44px;padding:0;font:300 14px/1.5 var(--text);color:var(--gold-text);text-decoration:none;border-bottom:1px solid var(--line);transition:color .3s,border-color .3s}
.ep-cat-l a:hover{color:var(--bone);border-bottom-color:var(--gold-text)}
.ep-cat-l a:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.cp-nine{margin-top:clamp(40px,4.6vw,68px);max-width:62ch}
.ep-fit-note{margin-top:22px;max-width:46ch;font:300 14px/1.7 var(--text);color:var(--muted)}

/* ---------- Ciudades: rejilla de enlaces con filete ---------- */
.cp-cities{display:grid;grid-template-columns:repeat(4,1fr);gap:0 var(--hm-gap);margin-top:clamp(36px,4.6vw,64px)}
.cp-cities a{position:relative;display:block;padding:18px 0 20px;border-top:1px solid var(--line);font:400 clamp(18px,1.55vw,23px)/1.3 var(--display);font-variation-settings:"opsz" 72;color:var(--bone);text-decoration:none;transition:color .35s,border-color .5s var(--ease)}
.cp-cities a::after{content:"";display:block;width:28px;height:1px;margin-top:14px;background:var(--gold);opacity:.5;transform:scaleX(.5);transform-origin:left;transition:transform .5s var(--ease),opacity .4s}
.cp-cities a:hover{color:var(--gold-text);border-top-color:var(--gold)}
.cp-cities a:hover::after{transform:scaleX(1);opacity:1}
.cp-cities a:focus-visible{outline:2px solid var(--gold-text);outline-offset:4px}
@media(max-width:1100px){.cp-cities{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.cp-cities{grid-template-columns:repeat(2,1fr)}}
.cp-index{margin-top:0}
.cp-index .ep-cat{padding:24px 0 30px}
.cp-index .ep-cat strong{max-width:24ch}

/* ---------- Cierre: titular a la izquierda, texto y botón a la derecha, entre dos filetes ---------- */
.cp-cta{border-top:1px solid var(--line)}
.cp-cta .wrap{display:grid;grid-template-columns:6fr 5fr;gap:clamp(32px,6vw,104px);align-items:end}
.cp-cta .ep-h2{font-size:clamp(30px,3.6vw,56px)}
.cp-cta-body .ep-p{max-width:46ch}
.cp-cta-body .hm-act{margin-top:clamp(26px,3.4vw,40px)}
.cp-cta-body .hm-act .cta{margin-top:0}
@media(max-width:900px){.cp-cta .wrap{grid-template-columns:1fr;align-items:start}}

/* ---------- Guía: lista de preguntas y medida de lectura ---------- */
.ep-measure{max-width:62ch}
.ep-list--q{margin:clamp(22px,2.6vw,34px) 0}
.ep-list--q li{margin-top:18px}
.ep-list--q li:first-child{margin-top:0}

/* ---------- Guía: la tabla de cifras (invest) sobre hueso ---------- */
.ep-day .invest{border-top-color:var(--carbon)}
.ep-day .ep-ledger .invest__k{color:#3b3833}
.ep-day .ep-ledger .invest__k strong{color:var(--carbon)}
.ep-day .ep-ledger .invest__k em{color:var(--muted-lt)}
.ep-day .invest__v{color:var(--carbon)}
.ep-day .invest__cur,.ep-day .invest__unit{color:var(--muted-lt)}
.ep-day .invest__row::after{border-bottom-color:#B9B0A0}

/* ---------- Development: filas de precio, fotos, lista y nota ---------- */
.cp-split{display:grid;grid-template-columns:5fr 7fr;gap:clamp(40px,7vw,120px);align-items:start}
.cp-split .hm-head{position:sticky;top:112px;max-width:none}
.cp-split .ep-h2{font-size:clamp(28px,2.9vw,44px)}
.cp-flow{min-width:0}
.cp-flow>*:first-child{margin-top:0}
.cp-flow>*+*{margin-top:clamp(22px,2.6vw,34px)}
@media(max-width:900px){.cp-split{grid-template-columns:1fr;gap:32px}.cp-split .hm-head{position:static}}
.cp-flow .ep-p+.ep-p{margin-top:16px}
.cp-flow .ep-p strong{font-weight:500}
.cp-rows{border-bottom:1px solid var(--line)}
.cp-row{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:12px 40px;align-items:baseline;padding:20px 0;border-top:1px solid var(--line)}
.cp-row dt{font:300 16px/1.6 var(--text);color:#CFC8BC}
.cp-row dt strong{font:400 clamp(19px,1.5vw,23px)/1.3 var(--display);color:var(--bone);font-variation-settings:"opsz" 72}
.cp-row dd{font:300 15px/1.65 var(--text);color:#CFC8BC;text-align:right}
.cp-row dd em{font-style:normal;color:var(--muted)}
.cp-row--h{padding:0 0 14px;border-top:0}
.cp-row--h dt,.cp-row--h dd{font:500 11px/1.5 var(--text);letter-spacing:.2em;text-transform:uppercase;color:var(--gold-text)}
.cp-row .dev-price{font:400 clamp(26px,2.4vw,36px)/1 var(--display);color:var(--bone);font-feature-settings:"lnum","tnum";font-variation-settings:"opsz" 72}
.cp-row .dev-price .cur{margin-right:4px;font:500 11px/1 var(--text);letter-spacing:.12em;color:var(--muted);vertical-align:.55em}
.cp-row .dev-price .unit{margin-left:8px;font:400 12px/1 var(--text);letter-spacing:.04em;color:var(--muted);white-space:nowrap}
.cp-tbl .dev-price{font:inherit}
.cp-tbl td.num{white-space:nowrap;font:400 clamp(17px,1.4vw,21px)/1.3 var(--display);color:var(--carbon)}
@media(max-width:640px){.cp-row{grid-template-columns:1fr}.cp-row dd{text-align:left}}
.cp-fig{margin:0;position:relative}
.cp-fig img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border:1px solid var(--line)}
.cp-list li{font-size:16px}
.cp-callout{padding:clamp(24px,3vw,40px);border:1px solid var(--line);border-left:2px solid var(--gold);background:rgba(201,160,78,.04);font:300 16px/1.75 var(--text);color:#CFC8BC}
.cp-callout strong{font-weight:500;color:var(--bone)}
.cp-flow .hm-act{margin-top:clamp(28px,3.4vw,44px)}
.cp-flow .hm-act .cta{margin-top:0}