/* ═══════════════════════════════════════════
   TOKENS — Expediente Luminoso
═══════════════════════════════════════════ */
:root{
  --papel:#F5F3EE;
  --cemento:#E8E6DF;
  --azulgris:#9AA09A;
  --azul:#315B5B;
  --azul-dark:#274A4A;
  --grafito:#202321;
  --blanco:#FBFAF7;
  --muted:#5F635E;
  --line:#DEDACF;
  --line-strong:#CFCABD;

  --sans:'Archivo',system-ui,-apple-system,sans-serif;
  --exp:'Archivo Expanded','Archivo',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;

  --max:1220px;
  --gutter:clamp(1.2rem,5vw,4rem);
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--papel);color:var(--grafito);
  font-family:var(--sans);font-weight:400;line-height:1.7;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
::selection{background:var(--azul);color:var(--papel)}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--cemento)}
::-webkit-scrollbar-thumb{background:var(--azulgris)}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gutter)}

/* utilities */
.label{font-family:var(--mono);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.meta{font-family:var(--mono);font-size:.73rem;letter-spacing:.05em;color:var(--muted)}
.eyebrow{font-family:var(--mono);font-size:.71rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px}

.h2{font-family:var(--exp);font-weight:600;font-size:clamp(1.7rem,3.8vw,3rem);line-height:1.03;letter-spacing:-.01em}
.lead{font-size:clamp(1rem,1.5vw,1.12rem);color:var(--muted);line-height:1.75;max-width:56ch}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;font-weight:500;
  letter-spacing:.08em;text-transform:uppercase;padding:.85rem 1.5rem;border:1px solid transparent;cursor:pointer;
  transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease);white-space:nowrap}
.btn .ar{transition:transform .35s var(--ease)}
.btn:hover .ar{transform:translateX(4px)}
.btn-solid{background:var(--azul);color:var(--papel);border-color:var(--azul)}
.btn-solid:hover{background:var(--azul-dark);border-color:var(--azul-dark)}
.btn-line{background:transparent;color:var(--azul);border-color:var(--azul)}
.btn-line:hover{background:var(--azul);color:var(--papel)}
.btn-invert{background:var(--papel);color:var(--grafito);border-color:var(--papel)}
.btn-invert:hover{background:var(--azul);color:var(--papel);border-color:var(--azul)}
.btn-ghost{background:transparent;color:var(--grafito);border-color:var(--line-strong)}
.btn-ghost:hover{border-color:var(--grafito)}

/* ═══════════════════════════════════════════
   NAV
═══════════════════════════════════════════ */
#nav{position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:1.15rem var(--gutter);
  transition:background .4s var(--ease),box-shadow .4s var(--ease),padding .4s var(--ease);}
#nav::before{content:"";position:absolute;inset:0;z-index:-1;opacity:1;
  background:linear-gradient(180deg,rgba(245,243,238,.85),rgba(245,243,238,0));transition:opacity .4s}
#nav.solid{background:rgba(245,243,238,.94);backdrop-filter:blur(10px);box-shadow:0 1px 0 var(--line);padding-top:.85rem;padding-bottom:.85rem}
#nav.solid::before{opacity:0}
.nav-logo{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.nav-logo img{height:26px;width:auto}
.nav-links{display:flex;align-items:center;gap:2rem;list-style:none}
.nav-links > li{position:relative}
.nav-links a{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grafito);
  padding:.4rem 0;display:inline-block;position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--azul);transition:width .35s var(--ease)}
.nav-links a:hover{color:var(--azul)}
.nav-links a:hover::after{width:100%}
/* dropdown */
.has-menu .submenu{position:absolute;top:100%;left:-1rem;min-width:270px;background:var(--blanco);border:1px solid var(--line);
  padding:.5rem 0;opacity:0;visibility:hidden;transform:translateY(6px);transition:all .3s var(--ease)}
.has-menu:hover .submenu,.has-menu:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu li a{display:block;padding:.62rem 1.1rem;letter-spacing:.03em;text-transform:none;font-size:.8rem}
.submenu li a::after{display:none}
.submenu li a:hover{background:var(--papel)}
.nav-right{display:flex;align-items:center;gap:1.1rem;flex-shrink:0}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:6px}
.nav-burger span{display:block;width:24px;height:1.6px;background:var(--grafito);transition:.3s var(--ease)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:120;background:var(--papel);overflow-y:auto;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column;
  padding:5rem var(--gutter) 2rem;transform:translateX(100%);transition:transform .45s var(--ease);visibility:hidden}
.drawer.open{transform:translateX(0);visibility:visible}
.drawer a{font-family:var(--exp);font-weight:500;font-size:1.5rem;padding:.75rem 0;border-bottom:1px solid var(--line);color:var(--grafito)}
.drawer .sub{font-family:var(--mono);font-size:.85rem;color:var(--muted);text-transform:none;padding-left:1rem}
.drawer-close{position:absolute;top:1.4rem;right:var(--gutter);background:none;border:none;font-size:2rem;cursor:pointer;color:var(--grafito);line-height:1}

/* ═══════════════════════════════════════════
   HERO
═══════════════════════════════════════════ */
#hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden}
.hero-img{position:absolute;inset:0;background:var(--cemento)}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.hero-inner{position:relative;z-index:2;width:100%;padding-bottom:clamp(2rem,5vw,4rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,560px);align-items:end;gap:2rem}
.hero-panel{background:rgba(245,243,238,.80);backdrop-filter:blur(14px);border:none;border-left:2px solid var(--azul);
  padding:clamp(1.2rem,2.4vw,1.9rem) clamp(1.3rem,2.6vw,2.1rem)}
.hero-panel .eyebrow{margin-bottom:1rem;color:var(--azul)}
.hero-h1{font-family:var(--exp);font-weight:600;font-size:clamp(2.3rem,6vw,4.4rem);line-height:.98;letter-spacing:-.015em;color:var(--grafito)}
.hero-h1 .plus{color:var(--azul);font-weight:600}
.hero-sub{margin-top:1.1rem;font-size:clamp(1.02rem,1.5vw,1.14rem);color:var(--muted);max-width:46ch;line-height:1.7}
.hero-actions{display:flex;gap:.7rem;margin-top:1.6rem;flex-wrap:wrap}
.hero-corner{position:absolute;top:calc(1.15rem + 46px);left:var(--gutter);right:var(--gutter);z-index:2;
  display:flex;justify-content:space-between;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(32,35,33,.55);pointer-events:none}

/* ═══════════════════════════════════════════
   TICKER / RECORRIDO INLINE
═══════════════════════════════════════════ */
.recorrido{background:var(--grafito);color:var(--papel);padding:1.15rem 0;overflow:hidden}
.recorrido .wrap{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:center;font-family:var(--mono);
  font-size:.78rem;letter-spacing:.1em;text-transform:uppercase}
.recorrido span{white-space:nowrap;color:var(--papel)}
.recorrido .sep{color:var(--azulgris)}

/* ═══════════════════════════════════════════
   SECTIONS base
═══════════════════════════════════════════ */
section[id]{scroll-margin-top:80px}
.sec{padding:clamp(4rem,9vw,7.5rem) 0}
.sec-cemento{background:var(--cemento)}
.sec-blanco{background:var(--blanco)}
.sec-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:clamp(2.5rem,5vw,4rem)}
.sec-head .label{margin-bottom:1rem;display:block}
@media(max-width:760px){.sec-head{grid-template-columns:1fr;gap:1rem}}

/* PROBLEM SELECTOR */
#resolver .problist{border-top:1px solid var(--grafito);margin-top:.5rem}
.prob{display:grid;grid-template-columns:1fr auto;align-items:center;gap:1.2rem;padding:1.15rem .2rem;
  border-bottom:1px solid var(--line);color:var(--grafito);transition:padding .35s var(--ease),color .35s var(--ease)}
.prob .n{font-family:var(--mono);font-size:.72rem;color:var(--muted)}
.prob .t{font-family:var(--exp);font-weight:500;font-size:clamp(1.1rem,2.4vw,1.55rem);line-height:1.15}
.prob .ar{font-family:var(--mono);color:var(--azul);opacity:.4;transition:opacity .35s var(--ease),transform .35s var(--ease)}
.prob:hover{color:var(--azul);padding-left:1rem}
.prob:hover .ar{opacity:1;transform:translateX(5px)}
.prob:hover .n{color:var(--azul)}

/* SERVICIOS */
.serv-list{border-top:1px solid var(--grafito)}
.serv{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;gap:1.5rem;align-items:baseline;
  padding:1.5rem .2rem;border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.serv:hover{background:var(--blanco)}
.serv .sname{font-family:var(--exp);font-weight:600;font-size:clamp(1.15rem,2.2vw,1.5rem);line-height:1.1}
.serv .sdesc{font-size:1rem;color:var(--muted);line-height:1.6}
.serv .sgo{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--azul);white-space:nowrap}
.serv .sgo .ar{display:inline-block;transition:transform .35s var(--ease)}
.serv:hover .sgo .ar{transform:translateX(5px)}
@media(max-width:760px){.serv{grid-template-columns:1fr;gap:.5rem}.serv .sgo{margin-top:.4rem}}

/* EXPEDIENTE VIVO — filmstrip */
#expediente{background:var(--cemento)}
.strip{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(225px,1.05fr) minmax(300px,1.5fr) minmax(195px,.8fr) minmax(255px,1.2fr);
  gap:1px;background:var(--line-strong);border:1px solid var(--line-strong);overflow-x:auto;scroll-snap-type:x mandatory}
/* piezas de distinto peso: el plano manda, una foto se angosta */
.frame:nth-child(1) .fimg{aspect-ratio:3/4}
.frame:nth-child(2) .fimg{aspect-ratio:5/6}
.frame:nth-child(3) .fimg{aspect-ratio:1/1}
.frame:nth-child(4) .fimg{aspect-ratio:2/3}
.frame:nth-child(5) .fimg{aspect-ratio:4/5}
.frame{background:var(--blanco);scroll-snap-align:start;display:flex;flex-direction:column}
.frame .fimg{aspect-ratio:4/5;overflow:hidden;background:var(--cemento);position:relative}
.frame .fimg img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.frame:hover .fimg img{transform:scale(1.04)}
.frame .fstep{position:absolute;top:.6rem;left:.6rem;background:var(--papel);border:1px solid var(--grafito);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;padding:.3rem .5rem}
.frame .fbody{padding:1rem 1.1rem 1.3rem}
.frame .fbody h4{font-family:var(--exp);font-weight:600;font-size:1rem;margin-bottom:.35rem}
.frame .fbody p{font-size:.88rem;color:var(--muted);line-height:1.55}
.strip-hint{font-family:var(--mono);font-size:.71rem;color:var(--muted);letter-spacing:.05em;margin-top:.9rem}

/* PROYECTOS grid */
.proj-filters{display:flex;gap:1.3rem;flex-wrap:wrap;margin-bottom:1.8rem}
.filt{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:none;border:none;cursor:pointer;padding-bottom:.3rem;border-bottom:1.5px solid transparent;transition:.3s var(--ease)}
.filt.on,.filt:hover{color:var(--grafito);border-color:var(--azul)}
a.filt{text-decoration:none;display:inline-block}
.proj-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.proj{position:relative;overflow:hidden;background:var(--cemento)}
a.proj{cursor:pointer}
.proj img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s var(--ease),filter .6s}
.proj:hover img{transform:scale(1.045)}
.proj .over{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;padding:1.1rem;
  background:linear-gradient(180deg,rgba(32,35,33,0) 45%,rgba(32,35,33,.78));opacity:0;transition:opacity .4s var(--ease)}
.proj:hover .over{opacity:1}
.proj .over .pc{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azulgris)}
.proj .over .pn{font-family:var(--exp);font-weight:500;color:var(--papel);font-size:1.05rem;margin-top:.2rem}
.proj .ficha{position:absolute;top:.6rem;left:.6rem;background:rgba(245,243,238,.92);border:1px solid var(--grafito);
  font-family:var(--mono);font-size:.63rem;line-height:1.5;padding:.4rem .55rem;letter-spacing:.02em}
.proj .ficha b{color:var(--grafito);font-weight:500}
.proj.c7{grid-column:span 7}.proj.c5{grid-column:span 5}.proj.c4{grid-column:span 4}
.proj.c6{grid-column:span 6}.proj.c8{grid-column:span 8}.proj.c12{grid-column:span 12}
.proj.c12 img{aspect-ratio:21/8}
@media(max-width:760px){.proj-grid{grid-template-columns:1fr}.proj{grid-column:span 1 !important}.proj img{aspect-ratio:3/2}.proj.c12 img{aspect-ratio:3/2}}

/* VALOR (arquitectura+normativa+construcción) */
#valor .valor-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){#valor .valor-grid{grid-template-columns:1fr}}
.valor-img{position:relative;border:1px solid var(--line-strong)}
.valor-img img{width:100%;aspect-ratio:3/4;object-fit:cover}
.valor-img .cap{position:absolute;bottom:0;left:0;right:0;background:rgba(245,243,238,.94);padding:.8rem 1rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.03em;color:var(--grafito);border-top:1px solid var(--line)}
.combo{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:1.6rem 0}
.combo b{font-family:var(--exp);font-weight:600;font-size:clamp(1.1rem,2.5vw,1.6rem);color:var(--grafito)}
.combo .plus{color:var(--azul);font-family:var(--exp);font-size:clamp(1.1rem,2.5vw,1.6rem)}

/* ESTUDIO */
#estudio .est-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media(max-width:860px){#estudio .est-grid{grid-template-columns:1fr}}
.est-img img{width:100%;aspect-ratio:5/4;object-fit:cover;border:1px solid var(--line-strong)}
.comunas{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem}
.comuna{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line-strong);
  padding:.35rem .7rem;background:var(--blanco)}

/* CONTACTO */
#contacto{background:var(--grafito);color:var(--papel)}
#contacto .label{color:var(--azulgris)}
#contacto .h2{color:var(--papel)}
.cont-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5rem);margin-top:2.5rem;align-items:start}
@media(max-width:860px){.cont-grid{grid-template-columns:1fr}}
.cont-lead{color:var(--cemento);max-width:44ch;line-height:1.8}
.cont-direct{margin-top:2rem;display:flex;flex-direction:column;gap:1.1rem}
.cont-item{display:flex;gap:1rem;align-items:baseline}
.cont-item .k{font-family:var(--mono);font-size:.69rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azulgris);min-width:90px}
.cont-item a{color:var(--papel);border-bottom:1px solid transparent;transition:border-color .3s}
.cont-item a:hover{border-color:var(--azulgris)}
.form{display:flex;flex-direction:column;gap:1rem}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:520px){.form .row{grid-template-columns:1fr}}
.field{display:flex;flex-direction:column;gap:.4rem}
.field label{font-family:var(--mono);font-size:.67rem;letter-spacing:.1em;text-transform:uppercase;color:var(--azulgris)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.16);
  color:var(--papel);font-family:var(--sans);font-size:.92rem;padding:.8rem .9rem;outline:none;transition:border-color .3s;border-radius:0}
.field textarea{resize:vertical;min-height:96px}
.field input::placeholder,.field textarea::placeholder{color:rgba(245,243,238,.35)}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--azulgris)}
.field select option{background:var(--grafito)}
.form .consent{display:flex;gap:.6rem;align-items:flex-start;font-size:.78rem;color:var(--cemento);line-height:1.5}
.form .consent input{margin-top:.25rem;accent-color:var(--azulgris)}
.form .consent a{color:var(--papel);border-bottom:1px solid var(--azulgris)}

/* FOOTER */
footer{background:var(--grafito);color:var(--cemento);padding:clamp(3rem,6vw,4.5rem) 0 2rem}
.foot-top{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid rgba(255,255,255,.08)}
@media(max-width:860px){.foot-top{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.foot-top{grid-template-columns:1fr}}
.foot-brand img{height:30px;width:auto;margin-bottom:1rem}
.foot-brand p{font-size:.88rem;color:var(--azulgris);max-width:30ch;line-height:1.7}
.foot-col .foot-h{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--papel);margin-bottom:1rem}
.foot-col a,.foot-col span{display:block;font-size:.9rem;color:var(--azulgris);padding:.28rem 0;transition:color .3s}
.foot-col a:hover{color:var(--papel)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:1.6rem;flex-wrap:wrap}
.foot-bottom p{font-size:.72rem;color:rgba(245,243,238,.35);font-family:var(--mono);letter-spacing:.03em}

/* WhatsApp float */
.wa{position:fixed;bottom:1.4rem;right:1.4rem;z-index:90;display:inline-flex;align-items:center;gap:.65rem;
  padding:.85rem 1.25rem;background:var(--papel);border:1.5px solid var(--grafito);color:var(--grafito);
  font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
  box-shadow:0 2px 10px rgba(32,35,33,.10);
  transition:background .3s var(--ease),color .3s var(--ease),transform .3s var(--ease)}
.wa:hover{transform:translateY(-2px)}
.wa:hover{background:var(--grafito);color:var(--papel)}
.wa svg{width:19px;height:19px;fill:var(--azul);transition:fill .3s}
.wa:hover svg{fill:var(--papel)}
@media(max-width:520px){.wa span{display:none}.wa{padding:.95rem}}

/* reveal motion */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .rv.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  .frame .fimg img,.proj img{transition:none}
}

/* responsive nav */
@media(max-width:940px){
  .hero-corner{display:none}
  .nav-links,.nav-right .btn{display:none}
  .nav-burger{display:flex}
  .hero-grid{grid-template-columns:1fr}
  }
/* ═══ FICHA EXP — firma transversal del sistema ═══ */
.exp-wrap{position:relative}
.exp-ficha{position:absolute;top:.75rem;left:.75rem;z-index:3;background:var(--papel);border:1px solid var(--grafito);
  font-family:var(--mono);font-size:.63rem;line-height:1.55;letter-spacing:.03em;padding:.48rem .62rem;
  color:var(--grafito);max-width:15rem}
.exp-ficha b{display:block;color:var(--grafito);font-weight:500;letter-spacing:.09em}
.exp-ficha .r{height:1px;background:var(--line);margin:.42rem 0}
.exp-ficha.right{left:auto;right:.75rem}
.exp-ficha.static{position:static;display:inline-block;margin-top:1.7rem;max-width:none}

/* ═══ CTA intermedia — para no depender del cierre de página ═══ */
.cta-mid{display:flex;justify-content:space-between;align-items:center;gap:1.5rem;flex-wrap:wrap;
  border:1px solid var(--grafito);background:var(--blanco);padding:clamp(1.3rem,3vw,2rem) clamp(1.4rem,3.2vw,2.2rem);
  margin-top:clamp(2.5rem,5vw,3.5rem)}
.cta-mid .tx{max-width:52ch}
.cta-mid p{font-family:var(--exp);font-weight:600;font-size:clamp(1.05rem,2.2vw,1.45rem);line-height:1.25;color:var(--grafito)}
.cta-mid small{display:block;margin-top:.5rem;font-family:var(--sans);font-size:.92rem;color:var(--muted);line-height:1.6}

/* ═══ CASOS REALES — situación → resolución ═══ */
.casos-r{border-top:1px solid var(--grafito)}
.caso-r{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,3vw,3rem);
  padding:clamp(1.3rem,2.6vw,1.8rem) .2rem;border-bottom:1px solid var(--line);transition:background .35s var(--ease)}
.caso-r:hover{background:var(--blanco)}
@media(max-width:760px){.caso-r{grid-template-columns:1fr;gap:.6rem}}
.caso-r .sit-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azulgris);margin-bottom:.45rem}
.caso-r .sit-t{font-family:var(--exp);font-weight:600;font-size:clamp(1.02rem,2.1vw,1.3rem);line-height:1.25;color:var(--grafito)}
.caso-r .res-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--azul);margin-bottom:.45rem}
.caso-r .res-t{font-size:.95rem;color:var(--muted);line-height:1.7}
.caso-r{color:inherit;text-decoration:none;cursor:pointer}
.caso-r .res-go{color:var(--azul);font-weight:500;white-space:nowrap}
.caso-r .res-go .ar{display:inline-block;transition:transform .3s var(--ease)}
.caso-r:hover .res-go{border-bottom:1px solid var(--azul)}
.caso-r:hover .res-go .ar{transform:translateX(3px)}
.caso-r .exp-cod{display:inline-block;margin-top:.6rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  color:var(--grafito);border:1px solid var(--line-strong);padding:.28rem .6rem;background:var(--papel)}

/* hero compacto en móvil — el CTA debe verse sin hacer scroll */
@media(max-width:620px){
  #hero{min-height:88svh}
  .hero-panel{padding:1.1rem 1.15rem 1.25rem}
  .hero-h1{font-size:clamp(2rem,9.5vw,2.6rem)}
  .hero-sub{margin-top:.7rem;font-size:1rem;line-height:1.55;max-width:34ch}
  .hero-panel .eyebrow{margin-bottom:.6rem;font-size:.66rem}
  .hero-actions{margin-top:1.1rem;gap:.5rem}
  .hero-actions .btn{padding:.75rem 1.1rem;font-size:.7rem}
  .hero-inner{padding-bottom:1.2rem}
}

/* ═══ VALORES Y PLAZOS DE REFERENCIA ═══ */
.vp{border-top:1px solid var(--grafito);border-bottom:1px solid var(--grafito)}
.vp-in{display:grid;grid-template-columns:1fr 1fr;gap:0}
.vp-col{padding:clamp(1.8rem,4vw,2.8rem) clamp(1.4rem,3vw,2.4rem)}
.vp-col + .vp-col{border-left:1px solid var(--line)}
.vp-k{font-family:var(--mono);font-size:.65rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1.3rem}
.vp-l{display:flex;justify-content:space-between;align-items:baseline;gap:1.2rem;
  padding:.72rem 0;border-bottom:1px solid var(--line)}
.vp-l:last-of-type{border-bottom:none}
.vp-l span{font-size:.93rem;line-height:1.45;color:var(--grafito)}
.vp-l b{font-family:var(--mono);font-size:.8rem;font-weight:500;color:var(--azul);
  white-space:nowrap;text-align:right}
.vp-l b.libre{white-space:normal;text-align:right;max-width:13ch}
.vp-nota{font-family:var(--mono);font-size:.68rem;color:var(--muted);line-height:1.8;margin-top:1.2rem}
@media(max-width:820px){
  .vp-in{grid-template-columns:1fr}
  .vp-col + .vp-col{border-left:none;border-top:1px solid var(--line)}
  .vp-l{flex-direction:column;gap:.2rem}
  .vp-l b,.vp-l b.libre{text-align:left;max-width:none}
}

/* ═══ Sin hover no se esconde información ═══
   En pantallas táctiles no existe un hover estable: el nombre del proyecto y el rol
   tienen que estar siempre visibles, no aparecer al pasar el mouse. */
@media(hover:none),(max-width:940px){
  .proj .over{opacity:1;
    background:linear-gradient(to top,rgba(32,35,33,.82) 0%,rgba(32,35,33,.35) 45%,transparent 78%)}
  .proj .over .pc{color:rgba(245,243,238,.78)}
}

/* ── firma: quién está detrás, temprano y sin estadísticas ── */
.firma{border-top:1px solid var(--grafito);border-bottom:1px solid var(--grafito);
  padding:clamp(1rem,2.4vw,1.4rem) 0;background:var(--papel)}
.firma p{display:flex;align-items:center;flex-wrap:wrap;gap:.55rem 1rem;margin:0;
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--muted);line-height:1.6}
.firma strong{color:var(--grafito);font-weight:600}
.firma .sep{width:1px;height:14px;background:var(--line-strong);flex-shrink:0}
.firma a{margin-left:auto;color:var(--azul);white-space:nowrap;border-bottom:1px solid transparent}
.firma a:hover{border-color:var(--azul)}
@media(max-width:760px){.firma .sep{display:none}.firma a{margin-left:0}}

/* ── cómo se paga y de quién dependen los plazos ── */
.vp-pie{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0;
  border-top:1px solid var(--grafito)}
.vp-pie > div{padding:clamp(1.6rem,3.4vw,2.2rem) clamp(1.4rem,3vw,2.4rem)}
.vp-pie > div + div{border-left:1px solid var(--line)}
.vp-pie h3{font-family:var(--exp);font-weight:600;font-size:clamp(1.02rem,2vw,1.22rem);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:.75rem}
.vp-pie p{font-size:.94rem;color:var(--muted);line-height:1.8;max-width:50ch}
.vp-etapas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:1rem}
.vp-etapas span{font-family:var(--mono);font-size:.65rem;letter-spacing:.06em;text-transform:uppercase;
  border:1px solid var(--line-strong);padding:.34rem .62rem;color:var(--grafito);background:var(--papel)}
@media(max-width:820px){
  .vp-pie{grid-template-columns:1fr}
  .vp-pie > div + div{border-left:none;border-top:1px solid var(--line)}
}

/* ═══ Banda de evidencia en paginas de servicio ═══
   Dos o tres imagenes reales del estudio, con su pie diciendo que son. */
.ev{padding:clamp(2.5rem,6vw,4rem) 0;border-top:1px solid var(--grafito)}
.ev-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:1rem}
.ev h2{font-family:var(--exp);font-weight:600;font-size:clamp(1.25rem,2.8vw,1.8rem);
  line-height:1.1;letter-spacing:-.015em;max-width:26ch;margin-bottom:1.6rem}
.ev-g{display:grid;gap:clamp(.8rem,2vw,1.2rem)}
.ev-g.dos{grid-template-columns:1fr 1fr}
.ev-g.des{grid-template-columns:1.4fr 1fr}
.ev-g figure{margin:0}
.ev-g img{width:100%;height:auto;display:block;border:1px solid var(--line)}
.ev-g figcaption{font-family:var(--mono);font-size:.67rem;color:var(--muted);
  margin-top:.55rem;line-height:1.65}
@media(max-width:760px){.ev-g.dos,.ev-g.des{grid-template-columns:1fr}}

/* ── cobertura: la lista de comunas, sin repetir la biografia ── */
.cob{padding:clamp(3rem,7vw,4.5rem) 0;background:var(--cemento)}
.cob-cab{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.4rem,3vw,2.5rem);
  align-items:end;margin-bottom:clamp(1.6rem,3.5vw,2.2rem)}
.cob-k{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:.8rem}
.cob h2{font-family:var(--exp);font-weight:600;font-size:clamp(1.4rem,3.2vw,2.2rem);
  line-height:1.06;letter-spacing:-.015em;max-width:20ch}
.cob-cab p{font-size:.99rem;color:var(--muted);line-height:1.8;max-width:48ch;margin:0}
.cob-pie{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:clamp(1.6rem,3.5vw,2.2rem)}
@media(max-width:820px){.cob-cab{grid-template-columns:1fr;align-items:start}}

/* ═══ WhatsApp contextual: el mensaje ya viene escrito segun la seccion ═══ */
.btn-wa{background:var(--grafito);color:var(--papel);border-color:var(--grafito)}
.btn-wa:hover{background:var(--azul-dark);border-color:var(--azul-dark);color:var(--papel)}
.btn-wa svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.wa-in{display:flex;align-items:center;gap:.75rem 1.1rem;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:clamp(1.6rem,3.5vw,2.4rem);
  padding-top:clamp(1rem,2.4vw,1.4rem);font-size:.95rem;color:var(--muted);line-height:1.6}
.wa-in a{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.05em;text-transform:uppercase;color:var(--grafito);
  border:1px solid var(--grafito);padding:.55rem .9rem;white-space:nowrap;transition:.3s var(--ease)}
.wa-in a:hover{background:var(--grafito);color:var(--papel)}
.wa-in a svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}

/* banda de contacto a media pagina — para quien no baja hasta el cierre */
.wa-mid{background:var(--azul)}
.wa-mid .wrap{display:flex;align-items:center;justify-content:space-between;gap:1.1rem 1.6rem;flex-wrap:wrap;padding-top:clamp(1.3rem,3.2vw,2rem);padding-bottom:clamp(1.3rem,3.2vw,2rem)}
.wa-mid p{margin:0;color:var(--papel);font-family:var(--exp);font-weight:600;font-size:clamp(1.05rem,2.3vw,1.4rem);line-height:1.2;max-width:32ch}
.wa-mid .btn{flex:none;background:var(--papel);color:var(--azul);border-color:var(--papel)}
.wa-mid .btn:hover{background:var(--blanco);border-color:var(--blanco)}
.wa-mid .btn .ar{display:inline-block;transition:transform .3s var(--ease)}
.wa-mid .btn:hover .ar{transform:translateX(3px)}
@media(max-width:560px){.wa-mid .btn{width:100%;text-align:center;justify-content:center}}

/* ── CASOS REALES: el momento oscuro de la home (dirección de arte) ── */
#casos{background:var(--grafito);color:var(--papel)}
#casos .label{color:var(--azulgris)}
#casos .h2{color:var(--papel)}
#casos .lead{color:var(--cemento)}
#casos .casos-r{border-top-color:rgba(245,243,238,.28)}
#casos .caso-r{border-bottom-color:rgba(245,243,238,.14)}
#casos .caso-r:hover{background:rgba(245,243,238,.035)}
#casos .caso-r .sit-t{color:var(--papel)}
#casos .caso-r .sit-k{color:var(--azulgris)}
#casos .caso-r .res-k{color:#7FAEAC}
#casos .caso-r .res-t{color:var(--cemento)}
#casos .caso-r .res-go{color:#7FAEAC}
#casos .caso-r:hover .res-go{border-bottom-color:#7FAEAC}
#casos .caso-r .exp-cod{color:var(--papel);border-color:rgba(245,243,238,.32);background:transparent}
#casos .strip-hint{color:var(--cemento)}