/* ============================================================
   HUARI Desarrollos Inmobiliarios — hoja de estilos
   Sistema propio (manual de identidad Huari). NO mezclar con el de DMF.
   Tipografía: Jost (300/400/500/700) + IBM Plex Mono (datos)
   Color: 60 % neutros · 30 % grafito · 10 % terracota
   Sistema gráfico: retícula modular · formas núcleo · trama a 45°
   ============================================================ */

:root{
  /* paleta */
  --terra:#AE6741;
  --arcilla:#8A4E31;
  --grafito:#3C3B3C;
  --grafito-cl:#454344;
  --basalto:#1E1D1C;
  --arena:#D8C6B4;
  --hueso:#F5F2ED;
  --cal:#E4DED5;
  --piedra:#A79C90;
  --linea:#D5CCC1;
  --linea-osc:#565452;

  /* escala tipográfica 1.25 — 17 / 22 / 27 / 34 / 52 */
  --t-0:18px;
  --t-1:clamp(20px,1.8vw,24px);
  --t-2:clamp(24px,2.4vw,30px);
  --t-3:clamp(29px,3.3vw,38px);
  --t-4:clamp(37px,5vw,58px);

  /* medidas */
  --wrap:1280px;
  --pad:clamp(20px,5vw,64px);
  --sec-y:clamp(64px,8.5vw,104px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --header-h:74px;
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,h4,p,ul,ol,figure,dl,dd,table,fieldset,legend{margin:0;padding:0}
ul,ol{list-style:none}
fieldset{border:0}
img,picture,svg,video{display:block;max-width:100%}
img{height:auto}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
table{border-collapse:collapse;width:100%}

html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 14px)}
body{
  font-family:Jost,"Helvetica Neue",Arial,sans-serif;
  font-weight:400;font-size:var(--t-0);line-height:1.6;
  background:var(--hueso);color:var(--grafito);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
body.is-locked{overflow:hidden}
::selection{background:var(--arena);color:var(--basalto)}
:focus-visible{outline:3px solid var(--terra);outline-offset:3px}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--arcilla);color:var(--hueso);padding:14px 22px;
  font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--pad)}
.sec{padding-block:var(--sec-y);position:relative}
.sec--hueso{background:var(--hueso)}
.sec--cal{background:var(--cal)}
.sec--grafito{background:var(--grafito);color:var(--cal)}
.sec--basalto{background:var(--basalto);color:var(--cal)}

/* ---------- tipografía ---------- */
.h2{font-size:var(--t-3);line-height:1.12;font-weight:700;letter-spacing:-.02em;text-wrap:pretty;max-width:20ch}
.h2--ancho{max-width:26ch}
.h2--claro{color:var(--hueso)}
/* titular de una sola línea: en pantallas anchas no debe partirse */
.h2--linea{max-width:none}
@media (min-width:900px){.h2--linea{white-space:nowrap}}

.kicker{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  display:flex;align-items:center;gap:12px;color:var(--arcilla);
}
.kicker::before{content:"";width:22px;height:1px;background:currentColor;flex:none}
.kicker--claro{color:var(--arena)}

.lead{font-weight:300;font-size:var(--t-1);line-height:1.55;max-width:46ch;text-wrap:pretty}
.lead b{font-weight:500}
.prose{font-weight:300;max-width:60ch}
.prose p + p{margin-top:16px}
.sec--grafito .prose,.sec--basalto .prose{color:var(--cal)}

.enc{display:flex;flex-direction:column;gap:18px;margin-bottom:clamp(34px,4.5vw,56px)}
.enc--split{flex-direction:row;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap}
.enc--split > div{display:flex;flex-direction:column;gap:16px}

/* ---------- botones ---------- */
.btn{
  --bg:var(--arcilla);--fg:var(--hueso);--bd:var(--arcilla);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;padding:14px 28px;border:1px solid var(--bd);
  background:var(--bg);color:var(--fg);
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:13px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  position:relative;overflow:hidden;isolation:isolate;
  transition:color .3s var(--ease),border-color .3s var(--ease),transform .2s var(--ease);
}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--basalto);
  transform:translateY(101%);transition:transform .35s var(--ease)}
.btn:hover::after,.btn:focus-visible::after{transform:translateY(0)}
.btn:hover,.btn:focus-visible{color:var(--hueso);border-color:var(--basalto)}
.btn:active{transform:translateY(1px)}
.btn--lg{min-height:58px;padding:18px 34px}
.btn--claro{--bg:var(--hueso);--fg:var(--basalto);--bd:var(--hueso)}
/* único lugar donde entra la paleta de DMF: el enlace de vuelta a su sitio */
.btn--dmf{--bg:#E3C41A;--fg:#1C1C1C;--bd:#E3C41A}
.btn--dmf::after{background:#1C1C1C}
.btn--dmf:hover,.btn--dmf:focus-visible{color:#E3C41A;border-color:#1C1C1C}
.btn--linea{--bg:transparent;--fg:var(--grafito);--bd:var(--linea)}
.btn--linea:hover,.btn--linea:focus-visible{color:var(--hueso)}
.btn--linea-clara{--bg:transparent;--fg:var(--cal);--bd:var(--linea-osc)}
.btn--linea-clara::after{background:var(--hueso)}
.btn--linea-clara:hover,.btn--linea-clara:focus-visible{color:var(--basalto);border-color:var(--hueso)}

/* ---------- sistema gráfico: trama a 45° y formas núcleo ---------- */
.trama{
  background-image:repeating-linear-gradient(45deg,
    var(--tr,rgba(60,59,60,.14)) 0 3px, transparent 3px 16px);
}
.trama--franja{height:14px;width:100%}

.formas{display:flex;align-items:flex-end;gap:9px}
.formas i{display:block;flex:none}
.formas .f-cua{width:24px;height:24px;background:var(--arena)}
.formas .f-cir{width:24px;height:24px;border-radius:50%;background:var(--terra)}
.formas .f-tra{width:32px;height:24px;background:var(--grafito);
  clip-path:polygon(20% 0,100% 0,100% 100%,0 100%)}
.sec--grafito .formas .f-tra,.sec--basalto .formas .f-tra{background:var(--piedra)}

/* retícula modular en planta */
.reticula{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;
  width:clamp(128px,15vw,180px);aspect-ratio:1;flex:none}
.reticula span{background:var(--piedra);opacity:.3}
.reticula span:nth-child(3),.reticula span:nth-child(6),
.reticula span:nth-child(11),.reticula span:nth-child(14){background:var(--terra);opacity:1}
.reticula span:nth-child(7),.reticula span:nth-child(10){background:var(--grafito);opacity:.85}
.reticula--clara span{background:var(--hueso);opacity:.2}
.reticula--clara span:nth-child(3),.reticula--clara span:nth-child(6),
.reticula--clara span:nth-child(11),.reticula--clara span:nth-child(14){background:var(--arena);opacity:.95}
.reticula--clara span:nth-child(7),.reticula--clara span:nth-child(10){background:var(--hueso);opacity:.95}

/* ============================================================
   BARRA ÚTIL + HEADER
   ============================================================ */
.topbar{background:var(--cal);color:var(--grafito);border-bottom:1px solid var(--linea);font-size:13px}
.topbar__in{
  max-width:var(--wrap);margin-inline:auto;padding:9px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;
}
.topbar__volver{display:inline-flex;align-items:center;gap:8px;color:var(--arcilla);
  min-height:26px;transition:opacity .25s}
@media (pointer:coarse){.topbar__volver{min-height:44px}}
.topbar__volver:hover{opacity:.72}

.header{
  position:sticky;top:0;z-index:90;background:var(--grafito);color:var(--hueso);
  transition:box-shadow .35s var(--ease);
}
.header.is-stuck{box-shadow:0 10px 34px rgba(30,29,28,.3)}
.header__in{
  max-width:var(--wrap);margin-inline:auto;padding:14px var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:padding .35s var(--ease);
}
.header.is-stuck .header__in{padding-block:9px}
.header__logo{display:inline-flex;align-items:center;min-height:44px}
.header__logo img{width:clamp(112px,13vw,146px);transition:width .35s var(--ease)}
.header.is-stuck .header__logo img{width:104px}

.nav{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px)}
.nav__list{display:flex;align-items:center;gap:clamp(14px,1.9vw,26px)}
.nav__link{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  position:relative;padding-block:7px;color:var(--cal);transition:color .25s var(--ease);
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--terra);
  transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease);
}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1);transform-origin:left}
.nav__link:hover,.nav__link.is-active{color:var(--hueso)}
.nav__cta{min-height:44px;padding:12px 20px}

.burger{display:none;position:relative;z-index:90;width:46px;height:46px;
  flex-direction:column;justify-content:center;align-items:flex-end;gap:6px}
.burger span{display:block;height:2px;background:var(--hueso);
  transition:transform .3s var(--ease),opacity .2s,width .3s var(--ease)}
.burger span:nth-child(1){width:26px;background:var(--terra)}
.burger span:nth-child(2){width:26px}
.burger span:nth-child(3){width:17px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){width:26px;transform:translateY(-8px) rotate(-45deg)}

.nav-scrim{position:fixed;inset:0;z-index:80;background:rgba(30,29,28,.62);
  backdrop-filter:blur(2px);animation:fade .3s var(--ease)}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;
  isolation:isolate;background:var(--basalto)}
.hero__media{position:absolute;inset:0;z-index:-2}
.hero__media picture{display:block;width:100%;height:100%}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 58%}
/* dos capas: la vertical asienta la franja de datos, la horizontal
   asegura la lectura del titular sin apagar el render entero */
.hero__veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(30,29,28,.6) 0%,rgba(30,29,28,.18) 52%,rgba(30,29,28,0) 100%),
             linear-gradient(180deg,rgba(30,29,28,.5) 0%,rgba(30,29,28,.14) 26%,rgba(30,29,28,.58) 62%,rgba(30,29,28,.93) 100%)}
.hero__in{width:100%;max-width:var(--wrap);margin-inline:auto;
  padding:clamp(140px,24vh,240px) var(--pad) 0;display:flex;flex-direction:column;
  gap:clamp(18px,2.2vw,24px);align-items:flex-start}
.hero__t{font-size:var(--t-4);line-height:1.04;font-weight:700;letter-spacing:-.025em;
  color:var(--hueso);max-width:16ch;text-wrap:balance}
.hero__d{font-weight:300;font-size:var(--t-1);line-height:1.5;color:var(--arena);max-width:50ch}
.hero__acc{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px}

.hero__datos{
  margin-top:clamp(32px,5vw,58px);width:100%;
  border-top:1px solid rgba(245,242,237,.22);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
}
.hero__dato{padding:20px 22px 24px;border-left:1px solid rgba(245,242,237,.16);min-width:0}
.hero__dato:first-child{border-left:0;padding-left:0}
.hero__dv{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(21px,2.5vw,29px);font-weight:500;color:var(--hueso);line-height:1.1;
  font-variant-numeric:tabular-nums}
.hero__dl{display:block;margin-top:8px;font-size:12.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--arena);font-family:"IBM Plex Mono",ui-monospace,monospace}

/* ============================================================
   BLOQUES DE CONTENIDO
   ============================================================ */
.dos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}
.dos--3-2{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.dos__aside{display:flex;flex-direction:column;gap:26px;align-items:flex-start}

.cifras{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--linea);margin-top:clamp(36px,5vw,56px)}
.cifra{padding:24px 24px 0;border-left:1px solid var(--linea)}
.cifra:first-child{border-left:0;padding-left:0}
.cifra__v{display:block;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:clamp(30px,3.8vw,46px);font-weight:500;line-height:1;color:var(--terra);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifra__l{display:block;margin-top:10px;font-size:15px;font-weight:300;color:var(--grafito);max-width:20ch}

/* proceso: 4 etapas */
.etapas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--linea-osc);border:1px solid var(--linea-osc)}
.etapa{background:var(--grafito);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:12px;
  transition:background .35s var(--ease)}
.etapa:hover{background:var(--grafito-cl)}
.etapa__n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.16em;color:var(--terra)}
.etapa__t{font-size:var(--t-1);font-weight:500;color:var(--hueso);line-height:1.15}
.etapa__d{font-size:16px;font-weight:300;color:var(--arena);line-height:1.55}

.destacado{
  margin-top:clamp(34px,4.6vw,56px);background:var(--arcilla);color:var(--hueso);
  padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(24px,3.4vw,44px);align-items:start;
}
.destacado__p{font-weight:300;font-size:var(--t-1);line-height:1.55;max-width:58ch}
.destacado__p b{font-weight:500}
.destacado__p + .destacado__p{margin-top:16px}

/* ---------- Zorzal I ---------- */
.proyecto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(34px,5vw,72px);align-items:start}
.proyecto__logo{width:clamp(190px,22vw,252px);margin-bottom:clamp(20px,2.6vw,30px)}
.proyecto__col{display:flex;flex-direction:column}
.proyecto__fig img{width:100%}
.proyecto__pie{margin-top:10px;font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:12.5px;letter-spacing:.1em;color:var(--grafito);text-transform:uppercase}

.ficha{border-top:1px solid var(--linea);margin-top:clamp(26px,3.4vw,38px)}
.ficha div{display:flex;justify-content:space-between;align-items:baseline;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--linea)}
.ficha dt{font-size:15.5px;font-weight:300;color:var(--grafito)}
.ficha dd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;font-weight:500;
  color:var(--basalto);text-align:right;font-variant-numeric:tabular-nums}

.termina{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 26px;
  margin-top:clamp(24px,3vw,32px)}
.termina li{display:flex;gap:12px;align-items:flex-start;font-size:16px;font-weight:300;line-height:1.5}
.termina li::before{content:"";width:9px;height:9px;background:var(--terra);flex:none;margin-top:8px}

/* ---------- avance de obra ---------- */
.gal{background:var(--basalto)}
.gal__marco{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--basalto)}
.gal__i{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .7s var(--ease)}
.gal__i.is-on{opacity:1}
.gal__pie{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  padding:12px 18px;background:var(--grafito)}
.gal__txt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--arena)}
.gal__nav{display:flex;gap:6px}
.gal__p{width:44px;height:44px;display:grid;place-items:center}
.gal__p::after{content:"";width:100%;height:3px;background:rgba(245,242,237,.3);transition:background .3s}
.gal__p[aria-current="true"]::after{background:var(--terra)}

/* ---------- tablas ---------- */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabla{min-width:560px;font-size:16px}
.tabla caption{text-align:left;font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--arcilla);padding-bottom:16px}
.tabla thead th{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:var(--arcilla);
  text-align:left;padding:0 18px 14px 0;border-bottom:1px solid var(--linea);
}
.tabla th.num,.tabla td.num{text-align:right;padding-right:0}
.tabla tbody th{text-align:left;font-weight:400;padding:16px 18px 16px 0;
  border-bottom:1px solid var(--linea);color:var(--basalto)}
.tabla td{padding:16px 18px 16px 0;border-bottom:1px solid var(--linea);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--grafito)}
.tabla .precio{font-weight:500;color:var(--basalto)}
.tabla tfoot td{border-bottom:0;padding-top:16px;font-family:Jost,sans-serif;font-weight:300;font-size:14.5px}

.sec--grafito .tabla caption,.sec--grafito .tabla thead th{color:var(--arena)}
.sec--grafito .tabla thead th,.sec--grafito .tabla tbody th,.sec--grafito .tabla td{border-color:var(--linea-osc)}
.sec--grafito .tabla tbody th{color:var(--hueso)}
.sec--grafito .tabla td{color:var(--cal)}
.sec--grafito .tabla .precio{color:var(--hueso)}

.modos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea);margin-top:clamp(30px,4vw,44px)}
.modo{background:var(--hueso);padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;gap:10px}
.modo__t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arcilla)}
.modo__v{font-size:var(--t-2);font-weight:500;color:var(--basalto);line-height:1.1}
.modo__d{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--grafito)}

.nota{margin-top:22px;font-size:14.5px;font-weight:300;line-height:1.6;color:var(--grafito);max-width:74ch}
.faq .nota{font-size:17px}
.sec--grafito .nota,.sec--basalto .nota{color:var(--arena)}

/* ============================================================
   SIMULADOR
   ============================================================ */
.sim{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:1px;
  background:var(--linea-osc);border:1px solid var(--linea-osc)}
.sim__ctrl{background:var(--grafito);padding:clamp(24px,3.2vw,38px)}
.sim__out{background:var(--grafito-cl);padding:clamp(24px,3.2vw,38px);
  display:flex;flex-direction:column;gap:22px}

.campo{display:block;margin-bottom:24px}
.campo:last-child{margin-bottom:0}
.campo__l{display:flex;justify-content:space-between;align-items:baseline;gap:14px;margin-bottom:10px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arena)}
.campo__v{color:var(--hueso);font-weight:500}
.campo select{
  width:100%;min-height:48px;padding:12px 42px 12px 14px;
  background-color:var(--basalto);color:var(--hueso);border:1px solid var(--linea-osc);
  font-family:Jost,sans-serif;font-size:16px;appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--terra) 50%),
                   linear-gradient(135deg,var(--terra) 50%,transparent 50%);
  background-position:calc(100% - 22px) 22px,calc(100% - 16px) 22px;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.campo input[type=range]{width:100%;height:44px;accent-color:var(--terra);background:transparent;cursor:pointer}
.campo__esc{display:flex;justify-content:space-between;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--arena)}

.sim__cuota{border-bottom:1px solid var(--linea-osc);padding-bottom:20px}
.sim__cl{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arena);display:block;margin-bottom:8px}
.sim__cv{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(36px,5.2vw,56px);
  font-weight:500;line-height:1;color:var(--hueso);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.sim__cm{display:block;margin-top:10px;font-size:15px;font-weight:300;color:var(--arena)}

.sim__lista div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:11px 0;border-bottom:1px solid rgba(245,242,237,.12)}
.sim__lista dt{font-size:15.5px;font-weight:300;color:var(--arena)}
.sim__lista dd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15.5px;font-weight:500;
  color:var(--hueso);text-align:right;font-variant-numeric:tabular-nums}

.tl__barra{position:relative;height:22px;background:rgba(245,242,237,.1);margin-bottom:10px}
.tl__b{position:absolute;top:0;height:100%;transition:left .35s var(--ease),width .35s var(--ease)}
.tl__ant{background:var(--arena)}
.tl__pay{background:var(--terra)}
.tl__cola{background-color:var(--arcilla);
  background-image:repeating-linear-gradient(45deg,rgba(245,242,237,.3) 0 3px,transparent 3px 8px)}
.tl__llaves{position:absolute;top:-7px;bottom:-7px;width:2px;background:var(--hueso);
  transition:left .35s var(--ease)}
.tl__llaves::after{content:"";position:absolute;top:-9px;left:50%;translate:-50% 0;
  width:9px;height:9px;background:var(--hueso);rotate:45deg}
.tl__ejes{display:flex;justify-content:space-between;gap:12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;color:var(--arena)}
.tl__ref{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:14px}
.tl__ref span{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:300;color:var(--arena)}
.tl__ref i{width:14px;height:10px;flex:none}
.tl__ref .r-ant{background:var(--arena)}
.tl__ref .r-pay{background:var(--terra)}
.tl__ref .r-cola{background-color:var(--arcilla);
  background-image:repeating-linear-gradient(45deg,rgba(245,242,237,.3) 0 3px,transparent 3px 8px)}

.sim__plan{font-size:16px;font-weight:300;line-height:1.6;color:var(--cal)}
.sim__plan b{font-weight:500;color:var(--hueso)}
.sim__msg{font-size:14.5px;font-weight:300;line-height:1.6;color:var(--arena);
  border-top:1px solid var(--linea-osc);padding-top:18px}

/* ============================================================
   INVERSIÓN
   ============================================================ */
.vias{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.via{background:var(--hueso);padding:clamp(26px,3.2vw,40px);display:flex;flex-direction:column;gap:12px}
.via__n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arcilla)}
.via__v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:clamp(32px,4.2vw,48px);
  font-weight:500;line-height:1;color:var(--terra);letter-spacing:-.02em}
.via__s{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;color:var(--grafito)}
.via__d{font-size:16px;font-weight:300;line-height:1.6;color:var(--grafito)}

.tabla td.comp{width:26%;padding-right:0}
.barra-comp{display:block;width:100%;height:8px;background:var(--piedra);
  transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease)}
.barra-comp--alta{background:var(--terra)}
.is-visible .barra-comp{transform:scaleX(var(--p,1))}

/* ---------- entorno / respaldo / futuros ---------- */
.puntos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea);
  border:1px solid var(--linea)}
.punto{background:var(--hueso);padding:clamp(24px,3vw,34px);display:flex;flex-direction:column;gap:12px}
.punto__t{font-size:var(--t-1);font-weight:500;line-height:1.2;color:var(--basalto)}
.punto__d{font-size:16px;font-weight:300;line-height:1.6;color:var(--grafito)}

.roles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--linea-osc);
  border:1px solid var(--linea-osc)}
.rol{background:var(--grafito);padding:clamp(26px,3.2vw,38px);display:flex;flex-direction:column;
  align-items:flex-start;gap:16px}
.rol__l{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra)}
.rol__logo{display:flex;align-items:center;min-height:46px}
.rol__logo img{width:auto;max-height:42px}
.rol__d{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--arena)}

.servicios{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,34px);
  margin-top:clamp(30px,4vw,48px)}
.servicio{display:flex;flex-direction:column;gap:9px;padding-top:20px;border-top:2px solid var(--terra)}
.servicio__t{font-size:var(--t-0);font-weight:500;color:var(--hueso)}
.servicio__d{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--arena)}

.futuros{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3.4vw,44px)}
.futuro{border-top:1px solid var(--linea);padding-top:22px;display:flex;flex-direction:column;gap:10px}
.futuro__e{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arcilla)}
.futuro__t{font-size:var(--t-2);font-weight:500;line-height:1.15;color:var(--basalto)}
.futuro__d{font-size:17px;font-weight:300;line-height:1.6;color:var(--grafito);max-width:46ch}

/* ============================================================
   FAQ
   ============================================================ */
.faq{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:clamp(34px,5vw,80px);align-items:start}
.ac{border-bottom:1px solid var(--linea)}
.ac:first-child{border-top:1px solid var(--linea)}
.ac__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:20px 0;min-height:62px;text-align:left;
  font-size:var(--t-0);font-weight:500;color:var(--basalto);line-height:1.35;
  transition:color .25s var(--ease);
}
.ac__q:hover{color:var(--arcilla)}
.ac__x{position:relative;width:16px;height:16px;flex:none}
.ac__x::before,.ac__x::after{content:"";position:absolute;background:var(--terra);
  transition:transform .3s var(--ease)}
.ac__x::before{left:0;top:7px;width:16px;height:2px}
.ac__x::after{left:7px;top:0;width:2px;height:16px}
.ac__q[aria-expanded="true"] .ac__x::after{transform:scaleY(0)}
.ac__p{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease)}
.ac__p.is-open{grid-template-rows:1fr}
.ac__in{overflow:hidden}
.ac__in > *{font-size:16.5px;font-weight:300;line-height:1.65;color:var(--grafito);max-width:64ch}
.ac__in > *:last-child{padding-bottom:22px}
.ac__in p + p{margin-top:12px}

/* ============================================================
   CONTACTO
   ============================================================ */
.contacto{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(34px,5vw,72px);align-items:start}
.canales{display:grid;gap:1px;background:var(--linea-osc);border:1px solid var(--linea-osc)}
.canal{background:var(--grafito);padding:clamp(24px,3vw,34px);
  display:flex;flex-direction:column;gap:12px;align-items:flex-start;height:100%}
.canal__l{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra)}
.canal__t{font-size:var(--t-1);font-weight:500;color:var(--hueso);line-height:1.2}
.canal__d{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--arena);max-width:42ch}
.canal__v{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--t-1);font-weight:500;
  color:var(--hueso);min-height:44px;display:inline-flex;align-items:center;
  transition:color .25s var(--ease)}
.canal__v:hover{color:var(--terra)}
.canal__mat{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;color:var(--arena);letter-spacing:.06em}

/* ============================================================
   PIE
   ============================================================ */
.footer{background:var(--basalto);color:var(--arena);padding-top:clamp(48px,6vw,72px)}
.footer__in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.7fr) minmax(0,1fr);
  gap:clamp(30px,4vw,60px);align-items:start}
.footer__logo{width:clamp(130px,15vw,164px);margin-bottom:18px}
.footer__d{font-size:15.5px;font-weight:300;line-height:1.65;color:var(--arena);max-width:38ch}
.footer__nav ul{display:flex;flex-direction:column;margin-top:10px}
.footer__nav a{font-size:15.5px;font-weight:300;color:var(--arena);
  display:inline-flex;align-items:center;min-height:44px;transition:color .25s var(--ease)}
.footer__nav a:hover{color:var(--hueso)}
.footer__dmf{display:flex;flex-direction:column;gap:14px;align-items:flex-start;margin-top:14px}
.footer__dmf img{width:54px}
/* los enlaces de salida se alinean entre sí aunque el texto mida distinto */
.footer__dmf .btn{width:100%;max-width:280px}
.footer__dmf .btn + .btn{margin-top:-4px}
.footer__legal{margin-top:clamp(40px,5vw,60px);border-top:1px solid rgba(245,242,237,.14);padding-block:24px}
.footer__legal p{font-size:13.5px;font-weight:300;line-height:1.65;color:var(--arena);max-width:100ch}
.footer__legal p + p{margin-top:8px}
.footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;
  border-top:1px solid rgba(245,242,237,.14);padding-block:20px 26px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.08em;color:var(--arena)}
.footer__by{display:flex;align-items:center;gap:12px}
.footer__by a{display:inline-flex;align-items:center;min-height:44px}
.footer__by img{width:104px;opacity:.78;transition:opacity .3s var(--ease)}
.footer__by a:hover img{opacity:1}

/* WhatsApp flotante */
.wa{
  position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:70;
  width:56px;height:56px;display:grid;place-items:center;border-radius:10px;
  background:#25D366;color:#fff;box-shadow:0 10px 30px rgba(30,29,28,.3);
  opacity:0;visibility:hidden;transform:translateY(14px) scale(.9);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;
}
.wa.is-in{opacity:1;visibility:visible;transform:none}
.wa:hover{transform:scale(1.07)}
.wa svg{width:30px;height:30px}

/* aparición al hacer scroll */
.reveal{opacity:0;transform:translateY(24px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  transition-delay:calc(var(--d,0) * 85ms)}
.reveal.is-visible{opacity:1;transform:none}

/* ============================================================
   EL CONJUNTO · INTERIORES · PROTOTIPOS · VIDEO
   Bloques agregados con el material de la carpeta del proyecto.
   ============================================================ */

/* mosaico de exteriores: la primera pieza ocupa dos columnas */
.mosaico{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.mosaico figure{margin:0;position:relative;overflow:hidden;background:var(--cal)}
.mosaico img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.mosaico figure:hover img{transform:scale(1.04)}
.mosaico figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--hueso);
  background:linear-gradient(180deg,rgba(30,29,28,0),rgba(30,29,28,.82));
}
.mosaico .m-ancho{grid-column:span 2}
.mosaico .m-alto{grid-row:span 2}
.mosaico figure > picture{display:block;height:100%}

/* amenities del conjunto */
.amen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  background:var(--linea);border:1px solid var(--linea);margin-top:clamp(30px,4vw,44px)}
.amen div{background:var(--hueso);padding:clamp(20px,2.4vw,28px);display:flex;flex-direction:column;gap:8px}
.amen dt{font-size:var(--t-0);font-weight:500;color:var(--basalto);line-height:1.25}
.amen dd{font-size:15.5px;font-weight:300;line-height:1.55;color:var(--grafito)}

/* prototipos: axonometría + espacios + terminaciones */
.protos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--linea-osc);border:1px solid var(--linea-osc)}
.proto{background:var(--basalto);display:flex;flex-direction:column}
.proto__axo{background:var(--basalto);padding:clamp(14px,2vw,24px) clamp(14px,2vw,24px) 0}
.proto__axo img{width:100%}
.proto__cuerpo{padding:clamp(22px,2.8vw,32px);display:flex;flex-direction:column;gap:14px;flex:1}
.proto__n{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--terra)}
.proto__t{font-size:var(--t-2);font-weight:500;color:var(--hueso);line-height:1.1}
.proto__m{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;color:var(--arena)}
.proto__esp{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.proto__esp li{
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--cal);border:1px solid var(--linea-osc);padding:7px 11px;
}
.proto__desde{margin-top:auto;padding-top:16px;border-top:1px solid var(--linea-osc);
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap}
.proto__dl{font-size:15px;font-weight:300;color:var(--arena)}
.proto__dv{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:var(--t-2);font-weight:500;color:var(--hueso)}

/* terminaciones compartidas por los dos prototipos */
.term2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.6vw,32px);
  margin-top:clamp(30px,4vw,44px)}
.term2 div{border-top:2px solid var(--terra);padding-top:18px;display:flex;flex-direction:column;gap:7px}
.term2 + .tabla-wrap{margin-top:clamp(38px,5vw,62px)}
.term2 dt{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--arcilla)}
.term2 dd{font-size:16px;font-weight:300;line-height:1.55;color:var(--grafito)}
.sec--grafito .term2 dt,.sec--basalto .term2 dt{color:var(--arena)}
.sec--grafito .term2 dd,.sec--basalto .term2 dd{color:var(--cal)}

/* video de obra: no descarga un solo byte hasta que se toca el botón */
.video{position:relative;margin:0;background:var(--basalto)}
.video__marco{position:relative;aspect-ratio:16/9;overflow:hidden}
.video__poster,.video__poster img{display:block;width:100%;height:100%;object-fit:cover}
.video__v{position:absolute;inset:0;width:100%;height:100%;display:none;background:var(--basalto)}
.video.is-on .video__v{display:block}
.video.is-on .video__poster,.video.is-on .video__btn{display:none}
.video__btn{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
  color:var(--hueso);transition:background .3s var(--ease);
  background:radial-gradient(ellipse at center,rgba(30,29,28,.62) 0%,rgba(30,29,28,.34) 62%);
}
.video__btn:hover,.video__btn:focus-visible{background:radial-gradient(ellipse at center,rgba(30,29,28,.72) 0%,rgba(30,29,28,.48) 62%)}
.video__ico{
  width:78px;height:78px;display:grid;place-items:center;border:2px solid var(--hueso);
  border-radius:50%;background:rgba(30,29,28,.3);
  transition:background .3s var(--ease),border-color .3s var(--ease),transform .3s var(--ease);
}
.video__btn:hover .video__ico{background:var(--terra);border-color:var(--terra);transform:scale(1.06)}
.video__ico svg{width:26px;height:26px;margin-left:4px}
.video__t{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;text-align:center}
.video__peso{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.1em;
  color:var(--arena);text-align:center}
.video{margin-bottom:clamp(20px,2.6vw,32px)}
.video__pie{padding:12px 18px;background:var(--grafito);
  font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--arena)}

/* distancias del entorno */
.dist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3.4vw,44px);
  margin-top:clamp(28px,3.6vw,40px)}
.dist div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:14px 0;border-bottom:1px solid var(--linea)}
.dist dt{font-size:16px;font-weight:300;color:var(--grafito)}
.dist dd{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:15px;font-weight:500;
  color:var(--basalto);white-space:nowrap}

@media (max-width:1100px){
  .amen,.term2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .protos{grid-template-columns:1fr}
}
@media (max-width:760px){
  .mosaico{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .mosaico .m-ancho{grid-column:span 2}
  .mosaico .m-alto{grid-row:span 1}
  .amen,.term2,.dist{grid-template-columns:1fr}
  .video__ico{width:64px;height:64px}
}

/* ============================================================
   DOS PÁGINAS: HUARI Y EL PROYECTO
   huari.html es la desarrolladora; zorzal.html, el proyecto.
   Comparten esta hoja: el proyecto usa el sistema visual de
   Huari y sólo cambia la marca del encabezado y la portada.
   ============================================================ */

/* portada sin franja de datos (la de Huari) */
.hero__in--simple{padding-bottom:clamp(56px,8vh,104px)}

/* marca del proyecto en su propia portada y encabezado */
.hero__marca{width:clamp(220px,28vw,360px);margin-bottom:6px}
.header__logo--zorzal img{width:clamp(120px,14vw,158px)}
.header.is-stuck .header__logo--zorzal img{width:112px}
.footer__logo--zorzal{width:clamp(150px,17vw,196px)}

/* el logotipo de Huari acompaña al titular, a la derecha */
.enc--marca{flex-direction:row;justify-content:space-between;align-items:center;
  gap:clamp(24px,4vw,64px);flex-wrap:wrap}
.enc--marca > div{display:flex;flex-direction:column;gap:16px;min-width:0}
.aside__marca{width:clamp(210px,26vw,340px);flex:none}

/* El cuerpo ocupa todo el ancho, pero repartido en tres columnas: una por idea
   —el origen, la estructura, el proceso—. Así la línea vuelve a unos 45
   caracteres, que es donde el texto se sigue cómodo, en vez de los 128 que daba
   el párrafo corrido a ancho completo. El filete superior las ata sin encajonarlas. */
.pilares{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(24px,3.4vw,48px);margin-top:clamp(38px,5vw,58px)}
.pilar{border-top:1px solid var(--linea);padding-top:20px}
.pilar p{font-weight:300;font-size:17px;line-height:1.65;color:var(--grafito)}

/* El alcance es la definición de qué hace Huari: se despega del cuerpo con banda
   propia, la trama a 45° del sistema gráfico y tipografía mayor. Al ser dos
   líneas, el ancho completo no molesta acá. */
.alcance{margin-top:clamp(48px,6.5vw,80px);background:var(--cal);position:relative;
  overflow:hidden;padding:clamp(32px,4vw,48px) clamp(24px,3.2vw,44px) clamp(34px,4.4vw,52px)}
/* trama más cerrada que la general: en una franja corta y sobre cal, el paso
   de 16 px se lee como rayitas sueltas en vez de textura */
.alcance__trama{position:absolute;top:0;left:0;right:0;height:14px;
  background-image:repeating-linear-gradient(45deg,var(--terra) 0 3px,transparent 3px 9px)}
.alcance .kicker{margin-bottom:18px}
.alcance__t{font-size:var(--t-2);font-weight:300;line-height:1.35;
  letter-spacing:-.01em;color:var(--grafito);text-wrap:pretty}
.alcance__t b{font-weight:500;color:var(--basalto)}
.alcance + .etapas{margin-top:clamp(28px,3.6vw,44px)}

@media (max-width:900px){
  .pilares{grid-template-columns:1fr;gap:clamp(18px,3vw,26px)}
}

@media (max-width:860px){
  .enc--marca{align-items:flex-start}
}

/* las cuatro etapas, en versión clara para fondo hueso */
.etapas--claras{background:var(--linea);border-color:var(--linea);margin-top:clamp(38px,5vw,58px)}
.etapas--claras .etapa{background:var(--hueso)}
.etapas--claras .etapa:hover{background:var(--cal)}
.etapas--claras .etapa__n{color:var(--arcilla)}
.etapas--claras .etapa__t{color:var(--basalto)}
.etapas--claras .etapa__d{color:var(--grafito)}

/* bloque de destino: presenta un proyecto y lleva a su página.
   Misma lógica que el bloque de Huari dentro del sitio de DMF. */
.dest{overflow:hidden}
.dest__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(34px,5vw,72px);align-items:center;padding-top:clamp(30px,4vw,48px)}
.dest__body{display:flex;flex-direction:column;align-items:flex-start;gap:clamp(18px,2.4vw,26px)}
.dest__logo{width:clamp(210px,26vw,320px)}
.dest__d{font-weight:300;font-size:var(--t-1);line-height:1.55;color:var(--arena);max-width:46ch}
.dest__media{margin:0}
.dest__media img{width:100%;transition:transform .8s var(--ease)}
.dest__media a{display:block;overflow:hidden}
.dest__media a:hover img{transform:scale(1.03)}

@media (max-width:1100px){
  .dest__in{grid-template-columns:1fr}
  .dest__media{order:-1}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .dos,.dos--3-2,.proyecto,.faq,.contacto{grid-template-columns:1fr}
  .etapas,.puntos,.roles,.servicios{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sim{grid-template-columns:1fr}
  .footer__in{grid-template-columns:1fr 1fr}
  .footer__brand{grid-column:span 2}
}

@media (max-width:1024px){
  :root{--header-h:64px}
  .burger{display:flex}
  .nav{
    position:fixed;top:0;right:0;z-index:85;height:100dvh;width:min(88vw,360px);
    background:var(--basalto);flex-direction:column;align-items:stretch;justify-content:flex-start;
    gap:0;padding:92px 30px 30px;transform:translateX(100%);
    transition:transform .42s var(--ease);box-shadow:-20px 0 60px rgba(30,29,28,.4);overflow-y:auto;
  }
  .nav.is-open{transform:none}
  .nav__list{flex-direction:column;align-items:stretch;gap:0}
  .nav__list li{border-bottom:1px solid rgba(245,242,237,.1)}
  .nav__link{display:block;padding:17px 0;font-size:14px}
  .nav__link::after{display:none}
  .nav__cta{margin-top:24px;width:100%}
  .hero__datos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero__dato{border-left:1px solid rgba(245,242,237,.16)}
  .hero__dato:nth-child(odd){border-left:0;padding-left:0}
  .hero__dato:nth-child(n+3){border-top:1px solid rgba(245,242,237,.16)}
  .cifras{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cifra{border-left:1px solid var(--linea)}
  .cifra:nth-child(odd){border-left:0;padding-left:0}
  .cifra:nth-child(n+3){border-top:1px solid var(--linea);padding-top:24px}
  .destacado{grid-template-columns:1fr}
  .futuros{grid-template-columns:1fr}
}

@media (max-width:760px){
  :root{--sec-y:clamp(52px,11vw,72px)}
  .topbar__id{display:none}
  .topbar__in{justify-content:center}
  .etapas,.puntos,.roles,.vias,.modos,.servicios{grid-template-columns:1fr}
  .termina{grid-template-columns:1fr}
  .enc--split{flex-direction:column;align-items:flex-start}
  .footer__in{grid-template-columns:1fr}
  .footer__brand{grid-column:auto}
  .hero__in{padding-top:clamp(96px,20vh,150px)}
  /* en vertical el recorte se va al cielo: bajamos el encuadre al edificio */
  .hero__media img{object-position:center 72%}
  .gal__marco{aspect-ratio:3/2}
}

@media (max-width:420px){
  .hero__dato{padding:16px 14px 18px}
  .hero__dv{font-size:19px}
}

/* ═══════════════════════════════════════════════════════════════════
   AJUSTES DE REVISIÓN · ZORZAL (setiembre 2026)
   Sobre "ZORZAL .corrección web para Samma.pdf" y los dos zócalos que
   mandó el cliente como preview suelto.
   ═══════════════════════════════════════════════════════════════════ */

/* ---------- zócalos por perfil ----------
   El preview del cliente venía con botón redondeado y tipografía suelta;
   acá el contenido es el suyo y la forma es la del sitio: mismo botón
   mono, misma escala tipográfica, mismo ancho de caja. */
.zoc{position:relative;overflow:hidden;padding-block:clamp(38px,4.6vw,56px)}
.zoc--inv{background:var(--terra);color:var(--hueso)}
.zoc--uf{background:var(--grafito);color:var(--cal)}

.zoc__in{display:flex;align-items:center;justify-content:space-between;
  gap:clamp(26px,4vw,56px);flex-wrap:wrap}
.zoc__txt{max-width:64ch;flex:1 1 460px}

.zoc__k{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.zoc--inv .zoc__k{color:var(--arena)}
.zoc--uf .zoc__k{color:var(--piedra)}

.zoc__t{font-size:var(--t-2);font-weight:700;line-height:1.14;letter-spacing:-.01em;
  color:var(--hueso);margin-bottom:12px}
.zoc__d{font-size:16.5px;font-weight:300;line-height:1.55;max-width:56ch}
.zoc--inv .zoc__d{color:#F3E6DC}
.zoc--uf .zoc__d{color:var(--arena)}

.zoc__stat{margin-top:16px;padding:13px 18px;font-size:15px;font-weight:300;
  line-height:1.55;max-width:60ch;color:var(--hueso);
  background:rgba(255,255,255,.10)}
.zoc--inv .zoc__stat{border-left:3px solid var(--hueso)}
.zoc--uf .zoc__stat{border-left:3px solid var(--terra)}
.zoc__stat b{font-weight:600}

.zoc__cta{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.zoc__sub{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase}
.zoc--inv .zoc__sub{color:var(--arena)}
.zoc--uf .zoc__sub{color:var(--piedra)}
/* sobre grafito el botón claro se lee igual; sobre terracota también (hueso/basalto) */

/* la tirita de cuadrados del preview, con las formas núcleo del manual */
.zoc__deco{position:absolute;right:0;bottom:0;display:flex;pointer-events:none}
.zoc__deco i{width:34px;height:34px;display:block}
.zoc__deco .z-lleno{background:var(--hueso)}
.zoc__deco .z-trama{background-image:repeating-linear-gradient(45deg,var(--hueso) 0 3px,transparent 3px 7px)}
.zoc__deco .z-osc{background:var(--basalto)}
.zoc--inv .zoc__deco .z-medio{background:var(--arcilla)}
.zoc--uf .zoc__deco .z-medio{background:var(--terra)}

@media (max-width:820px){
  .zoc__in{flex-direction:column;align-items:flex-start;gap:26px}
  /* en columna, el "flex:1 1 460px" del texto se lee como alto mínimo y abría
     un hueco enorme antes del botón: acá la caja mide lo que mide su contenido */
  .zoc__txt{flex:0 1 auto;max-width:none}
  .zoc__cta{align-items:flex-start}
  .zoc__deco{display:none}
}

/* ---------- contacto: dos fichas con el logotipo de cada actor ----------
   Versión simple, sobre una maqueta del cliente. La unificación que pedía el
   PDF ("unificar quién hace qué con contactos, sumar logo Huari y Suma") se
   resuelve acá: cada ficha lleva su marca, y no hace falta un bloque aparte
   de roles. */
/* la bajada del proyecto salió de la columna izquierda y va bajo el título, a
   lo ancho: 72ch en vez de los 46 de una bajada de columna. Más que eso la
   línea se hace difícil de seguir. */
.lead--ancho{max-width:72ch}

.canal__d{font-size:16.5px}   /* un punto más que el resto, a pedido del cliente */
.canal__pie{margin-top:auto;padding-top:14px;width:100%;
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:16px;flex-wrap:wrap}
a.canal__mat{min-height:44px;display:inline-flex;align-items:center;   /* área táctil del correo */
  transition:color .25s var(--ease)}
a.canal__mat:hover{color:var(--hueso)}
.canal__logos{display:flex;align-items:center;gap:16px;margin-left:auto}
.canal__logos img{width:auto;max-height:30px;opacity:.92}
.canal__logos img.canal__logo--dmf{max-height:44px}   /* el isotipo es cuadrado: con el mismo alto que un logotipo apaisado se ve chico */

/* hilo de separación entre el último bloque y el pie: los dos van en basalto
   y sin esto se leen como una sola mancha */
.footer{border-top:1px solid var(--linea-osc)}

/* ---------- accesibilidad: menos movimiento ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .reveal{opacity:1;transform:none}
  .barra-comp{transform:scaleX(1)}
}

/* ---------- impresión ---------- */
@media print{
  .header,.topbar,.wa,.nav,.burger,.gal__nav{display:none !important}
  body{background:#fff;color:#000}
  .sec,.footer,.hero,.zoc{background:#fff !important;color:#000 !important;padding-block:16pt}
  .zoc__deco{display:none}
  .zoc__t,.zoc__stat{color:#000 !important}
  .reveal{opacity:1;transform:none}
}