/* =====================================================
   styles.css
   GRID & Co — gridco.com.ar — v6
   Concepto: curvas de nivel orgánicas que aparecen de a poco; el orden como paisaje. Trazos orgánicos,
   curvas de nivel y movimiento suave. Tono y tipografía alineados a las placas de Instagram.
   ===================================================== */
:root{
  --crema:#F7F3E9;
  --crema-hueso:#EFE9DB;
  --oliva:#4A5340;
  --oliva-claro:#6E7A61;
  --oliva-tinte:#E4E8DE;
  --tinta:#23261F;
  --tinta-suave:#5A5F52;
  --gris-marca:#A8A597;
  --oro:#B08D44;
  --oro-profundo:#7A5A1E;
  --rust:#A6462F;
  --linea:rgba(74,83,64,.18);
  --linea-fuerte:rgba(74,83,64,.38);
  --crema-70:rgba(247,243,233,.72);
  --crema-55:rgba(247,243,233,.55);
  --crema-20:rgba(247,243,233,.2);
  --velo:rgba(35,38,31,.42);
  --topo-claro:rgba(74,83,64,.085);
  --topo-oscuro:rgba(247,243,233,.06);

  --display:'Fraunces',Georgia,serif;
  --texto:'DM Sans',system-ui,sans-serif;
  --mono:'DM Mono',ui-monospace,monospace;

  --ancho:1200px;
  --gutter:48px;
  --suave:cubic-bezier(.22,.8,.26,1);
  --t-corta:220ms;
  --t-media:600ms;
  --t-larga:1100ms;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:72px;-webkit-text-size-adjust:100%}
body{background:var(--crema);color:var(--tinta);font-family:var(--texto);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.trabado{overflow:hidden}
svg{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:left}
:focus-visible{outline:2px solid var(--oro);outline-offset:3px}
.wrap{max-width:var(--ancho);margin:0 auto;padding-inline:var(--gutter);position:relative}
section{position:relative;overflow:hidden}

h1,h2,h3{font-family:var(--display);font-weight:300;letter-spacing:-.02em;text-wrap:balance}
h2{font-size:clamp(2.2rem,4.6vw,3.8rem);line-height:1.04;margin-top:1.4rem}
h2 em,h1 em{font-style:italic;color:var(--oliva-claro);display:block}
.eti{font-family:var(--mono);font-size:.76rem;letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-suave)}
.eti.oro{color:var(--oro-profundo)}

/* ---------- revelado al hacer scroll ---------- */
.js [data-revelar]{opacity:0;transform:translateY(22px);transition:opacity var(--t-media) var(--suave),transform var(--t-media) var(--suave);transition-delay:var(--retardo,0ms)}
.js [data-revelar].visto{opacity:1;transform:none}

/* ---------- curvas de nivel ---------- */
.topo{position:absolute;inset:-6% 0;width:100%;height:112%;pointer-events:none;fill:none;stroke-width:1;stroke:var(--topo-claro);will-change:transform}
.topo path{vector-effect:non-scaling-stroke}

/* ---------- logo ---------- */
.logo{display:inline-flex;align-items:center;gap:.62em;line-height:1;text-decoration:none}
.logo-mark{width:1.06em;height:1.06em;flex:none}
.logo-txt{font-weight:700;color:var(--oliva);letter-spacing:.01em;white-space:nowrap}
.logo-txt i{font-style:normal;font-weight:400;font-size:.52em;color:var(--gris-marca);margin-left:.28em}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;font-weight:500;font-size:.95rem;padding:15px 28px;
  border:1px solid var(--oliva);background:var(--oliva);color:var(--crema);text-decoration:none;
  transition:background var(--t-corta) var(--suave),color var(--t-corta) var(--suave),transform var(--t-corta) var(--suave)}
.btn:hover{background:transparent;color:var(--oliva)}
.btn:active{transform:translateY(1px)}
.btn-min{font-weight:500;font-size:.95rem;color:var(--tinta);text-decoration:none;padding:4px 0;position:relative}
.btn-min::after{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--oro);transform-origin:left;transition:transform var(--t-corta) var(--suave)}
.btn-min:hover::after{transform:scaleX(.35)}

/* ---------- nav ---------- */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--crema);border-bottom:1px solid transparent;transition:border-color var(--t-corta)}
.nav.con-borde{border-bottom-color:var(--linea)}
.nav .wrap{height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav .logo{font-size:1.25rem}
.nav-der{display:flex;align-items:center;gap:28px}
.nav-der a{font-size:.9rem;color:var(--tinta-suave);text-decoration:none;transition:color var(--t-corta)}
.nav-der a:hover{color:var(--tinta)}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* =========== portada =========== */
.portada{padding-block:clamp(48px,7vw,104px) clamp(48px,7vw,96px)}
.portada .wrap{position:static}
.portada .texto{max-width:640px}
.portada .texto{position:relative;z-index:2}
.portada h1{font-size:clamp(2.7rem,6.3vw,5.4rem);line-height:1.02;font-variation-settings:"opsz" 144;margin-top:0}
.bajada{font-size:1.15rem;color:var(--tinta-suave);margin-top:1.8rem;max-width:36ch}
.acciones{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:2.4rem}
.relieve{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;fill:none;stroke:var(--oliva);stroke-width:1.1;stroke-opacity:.19;will-change:transform}
.relieve path{vector-effect:non-scaling-stroke}
.relieve path.maestra{stroke-width:1.6;stroke-opacity:.25}
.portada::after{content:'';position:absolute;inset:0 auto 0 0;width:52%;background:linear-gradient(90deg,var(--crema) 55%,rgba(247,243,233,0));pointer-events:none;z-index:1}

/* =========== qué es / qué no es =========== */
.esno{background:var(--crema-hueso);padding-block:clamp(56px,7vw,96px)}
.esno .wrap{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center}
.esno h2{font-size:clamp(2rem,3.8vw,3.2rem)}
.tachados{list-style:none}
.tachados li{position:relative;font-family:var(--display);font-weight:300;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.15;color:var(--tinta-suave);padding:.45rem 0;width:max-content;max-width:100%}
.tachados li svg{position:absolute;left:-4%;top:50%;width:108%;height:26px;transform:translateY(-40%);overflow:visible}
.tachados li path{fill:none;stroke:var(--rust);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.js .tachados li path{stroke-dashoffset:1;transition:stroke-dashoffset 700ms var(--suave);transition-delay:var(--retardo,0ms)}
.js .tachados.visto li path{stroke-dashoffset:0}
.tachados li.si{color:var(--tinta);margin-top:.9rem;padding-top:1.1rem;border-top:1px solid var(--linea-fuerte);width:100%}

/* =========== la diferencia (fija mientras se baja) =========== */
.dif{padding-block:0;overflow:visible}
.dif .pista{height:150vh}
.dif .fijo{position:sticky;top:64px;height:calc(100vh - 64px);display:flex;align-items:center}
.dif .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,6vw,80px);align-items:center;width:100%}
.selector{display:inline-grid;grid-template-columns:1fr 1fr;border:1px solid var(--linea-fuerte);margin-top:2.4rem;position:relative}
.selector .marca-sel{position:absolute;top:0;bottom:0;left:0;width:50%;background:var(--tinta);transition:transform 520ms var(--suave)}
.selector.con .marca-sel{transform:translateX(100%)}
.selector button{position:relative;z-index:1;padding:13px 22px;font-family:var(--mono);font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave);transition:color 300ms var(--suave)}
.selector button[aria-pressed="true"]{color:var(--crema)}
.lectura{display:flex;align-items:flex-start;gap:22px;margin-top:2rem;min-height:9rem}
.cifra{font-family:var(--display);font-weight:300;font-size:clamp(5.5rem,10vw,8.5rem);line-height:.82;letter-spacing:-.04em;font-variant-numeric:tabular-nums;min-width:1.15ch;transition:color 400ms var(--suave)}
.cifra.sin{color:var(--rust)} .cifra.con{color:var(--oliva)}
.lectura p{font-family:var(--display);font-size:clamp(1.3rem,2vw,1.65rem);line-height:1.22;max-width:19ch;padding-top:.4rem;transition:opacity 250ms}
.lectura p.cambiando{opacity:0}
.avance{display:flex;align-items:center;gap:12px;margin-top:2.2rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-suave)}
.avance i{display:block;width:120px;height:1px;background:var(--linea-fuerte);position:relative;overflow:hidden}
.avance i b{position:absolute;inset:0;background:var(--oliva);transform-origin:left;transform:scaleX(0)}
.lamina{position:relative;background:var(--crema-hueso);aspect-ratio:1/1;width:100%;max-width:540px;max-height:calc(100vh - 160px);justify-self:end;overflow:hidden}
.lamina .dib{position:absolute;inset:9%;width:82%;height:82%;transition:opacity 600ms var(--suave)}
.lamina .off{opacity:0}
.dib .ls{fill:none;stroke:var(--rust);stroke-opacity:.55;stroke-width:1.1;stroke-linecap:round}
.dib .lc{fill:none;stroke:var(--oliva);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dib .lazo{stroke-dasharray:1;stroke-dashoffset:0}
.js .dib .lazo{transition:stroke-dashoffset 1200ms var(--suave)}
.js #dCon.off .lazo{stroke-dashoffset:1}
.dib .nodo{fill:var(--oliva)}
.dib .aro{fill:none;stroke:var(--oliva);stroke-opacity:.35;stroke-width:1}
.lamina .rotulo{position:absolute;left:0;top:0;padding:14px 16px;font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase}
.lamina .rotulo.sin{color:var(--rust)} .lamina .rotulo.con{color:var(--tinta-suave)}

/* =========== qué queda instalado =========== */
.queda{background:var(--oliva);color:var(--crema);padding-block:clamp(64px,9vw,120px)}
.queda .topo{stroke:var(--topo-oscuro)}
.queda .eti{color:var(--crema-70)}
.queda h2{max-width:17ch}
.queda h2 em{color:var(--crema-55)}
.capas{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--crema-20)}
.capa{padding:28px 28px 8px 0;border-right:1px solid var(--crema-20);min-width:0}
.capa+.capa{padding-left:28px}
.capa:last-child{border-right:0}
.capa svg{width:64px;height:64px;fill:none;stroke:var(--crema);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:transform 500ms var(--suave)}
.capa:hover svg{transform:translateY(-3px) rotate(-3deg)}
.capa svg .f{fill:var(--crema);stroke:none}
.capa svg .d{stroke-dasharray:2 4;opacity:.6}
.capa h3{font-size:clamp(1.6rem,2.3vw,2rem);font-weight:400;margin:1.1rem 0 .6rem}
.capa p{font-size:.98rem;color:var(--crema-70);line-height:1.45}
.pie-queda{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:18px 40px;margin-top:clamp(40px,6vw,64px);padding-top:26px;border-top:1px solid var(--crema-20)}
.pie-queda p{font-family:var(--display);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:300;line-height:1.3;max-width:36ch}
.pie-queda p span{color:var(--crema-70)}

/* =========== cómo =========== */
.como{padding-block:clamp(64px,9vw,120px)}
.recorrido{position:relative;margin-top:clamp(40px,6vw,72px)}
.recorrido .onda{position:absolute;left:0;right:0;top:0;height:56px;width:100%;fill:none;stroke:var(--oliva-claro);stroke-width:1.4;stroke-linecap:round}
.onda path{stroke-dasharray:1;stroke-dashoffset:0}
.js .onda path{stroke-dashoffset:1;transition:stroke-dashoffset 1600ms var(--suave)}
.js .recorrido.visto .onda path{stroke-dashoffset:0}
.fases{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.fase{padding:0 22px;text-align:center;display:flex;flex-direction:column;align-items:center;min-width:0}
.fase .punto{width:56px;height:56px;border-radius:50%;background:var(--crema);border:1.5px solid var(--oliva);display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.82rem;color:var(--oliva);transition:transform 500ms var(--suave),background var(--t-corta),color var(--t-corta)}
.js .recorrido .punto{transform:scale(.4)}
.js .recorrido.visto .punto{transform:none}
.fase:hover .punto{background:var(--oliva);color:var(--crema)}
.fase h3{font-size:1.55rem;font-weight:400;margin:1.2rem 0 .35rem}
.fase p{font-size:.98rem;color:var(--tinta-suave);max-width:22ch}
.fase small{display:block;font-family:var(--mono);font-size:.72rem;color:var(--oliva);margin-top:.8rem;line-height:1.5}
.como-pie{display:flex;justify-content:flex-end;margin-top:clamp(40px,6vw,64px);padding-top:24px;border-top:1px solid var(--linea)}

/* =========== para quién =========== */
.quien{padding-block:clamp(64px,9vw,120px)}
.lados{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:clamp(40px,6vw,64px)}
.lado{background:var(--crema-hueso);display:flex;flex-direction:column;min-width:0;position:relative;padding:clamp(32px,4vw,52px) clamp(24px,3.6vw,48px) clamp(32px,4vw,48px)}
.lado::before{content:'';position:absolute;left:0;right:0;top:0;height:4px;background:var(--oliva-claro);transform-origin:left;transition:transform 900ms var(--suave)}
.lado.estudio::before{background:var(--oro)}
.js .lado::before{transform:scaleX(0)}
.js .lado.visto::before{transform:none}
.linea-nombre{display:flex;align-items:baseline;gap:.45em;flex-wrap:wrap}
.linea-nombre b{font-family:var(--texto);font-weight:700;font-size:clamp(1.6rem,2.6vw,2.2rem);letter-spacing:.01em;color:var(--oliva)}
.linea-nombre span{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.6rem,2.6vw,2.2rem);color:var(--oliva-claro)}
.lado.estudio .linea-nombre span{color:var(--oro-profundo)}
.lado .para{display:block;font-size:.95rem;color:var(--tinta-suave);margin-top:.35rem}
.lado blockquote{font-family:var(--display);font-style:italic;font-weight:300;font-size:clamp(1.45rem,2.3vw,1.9rem);line-height:1.2;letter-spacing:-.01em;margin:1.6rem 0 0;max-width:20ch;text-wrap:balance}
.lado .eti{margin-top:2.2rem}
.ordena{list-style:none;margin-top:1rem;border-top:1px solid var(--linea-fuerte)}
.ordena li{padding:1rem 0;border-bottom:1px solid var(--linea)}
.ordena b{display:block;font-size:1.1rem;font-weight:500}
.ordena span{display:block;font-size:.98rem;color:var(--tinta-suave);margin-top:.2rem}

/* =========== cómo empieza =========== */
.tecno{padding-block:clamp(44px,5.5vw,72px);border-top:1px solid var(--linea)}
.tecno .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(24px,5vw,80px);align-items:center}
.tecno .txt{font-family:var(--display);font-size:clamp(1.15rem,1.7vw,1.4rem);font-weight:300;line-height:1.3;margin-top:.9rem;max-width:26ch}
.herr{list-style:none;display:flex;flex-wrap:wrap;align-items:center;gap:22px 40px}
.herr li{display:flex;align-items:center;gap:9px;color:var(--tinta);font-size:.95rem;font-weight:500}
.herr svg{width:18px;height:18px;flex:none}
.herr img{display:block;height:22px;width:auto;filter:grayscale(1);opacity:.85;transition:filter var(--t-corta),opacity var(--t-corta)}
.herr li:hover img{filter:none;opacity:1}
.empieza{background:var(--oliva-tinte);padding-block:clamp(64px,9vw,120px)}
.empieza .topo{stroke:rgba(74,83,64,.075)}
.empieza h2{font-size:clamp(2.6rem,6vw,5rem);line-height:1}
.camino{position:relative;margin-top:clamp(44px,6vw,72px)}
.camino .traza{position:absolute;left:0;right:0;top:20px;width:100%;height:40px;fill:none;stroke:var(--oliva);stroke-width:1.3;stroke-linecap:round;stroke-dasharray:3 7;overflow:visible}
.pasos{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:0 40px;position:relative}
.paso{display:flex;flex-direction:column;min-width:0}
.paso .hito{width:40px;height:40px;border-radius:50%;background:var(--oliva-tinte);border:1.5px solid var(--oliva);position:relative;margin:20px 0 0;transition:transform 500ms var(--suave),background 300ms}
.paso .hito::after{content:'';position:absolute;inset:11px;border-radius:50%;background:var(--oliva);transform:scale(0);transition:transform 500ms var(--suave) .2s}
.js .camino.visto .paso .hito::after{transform:none}
.paso:last-child .hito{background:var(--oliva)}
.paso:last-child .hito::after{background:var(--crema)}
.paso .n{font-family:var(--display);font-weight:300;font-size:clamp(2.6rem,4vw,3.4rem);line-height:1;color:var(--oliva);margin-top:1.4rem}
.paso h3{font-size:1.4rem;font-weight:400;margin:.7rem 0 .3rem}
.paso p{font-size:.98rem;color:var(--tinta-suave);max-width:28ch}
.cierre{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:clamp(48px,6vw,72px);padding-top:28px;border-top:1px solid var(--linea-fuerte)}
.cierre p{font-family:var(--display);font-style:italic;font-size:clamp(1.2rem,2vw,1.5rem);line-height:1.3;color:var(--oliva)}

/* =========== contacto =========== */
.pie{padding-block:clamp(56px,7vw,88px) 28px}
.pie-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:40px 64px;align-items:end;padding-bottom:40px;border-bottom:1px solid var(--linea)}
.pie-grid h2{font-size:clamp(2rem,3.6vw,3rem);margin-top:1rem}
.datos-c{display:grid;grid-template-columns:1fr 1fr;gap:0 32px}
.datos-c div{padding:14px 0;border-top:1px solid var(--linea)}
.datos-c dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-suave);margin-bottom:.3rem}
.datos-c dd{font-size:1.02rem}
.datos-c a{text-decoration:none;background-image:linear-gradient(var(--oro),var(--oro));background-size:0 1px;background-repeat:no-repeat;background-position:0 100%;transition:background-size 300ms var(--suave)}
.datos-c a:hover{background-size:100% 1px}
.pie-bajo{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-top:20px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-suave)}

/* =========== memoria descriptiva =========== */
.memoria{position:fixed;inset:0;z-index:50}
.memoria .velo{position:absolute;inset:0;background:var(--velo);opacity:0;transition:opacity 350ms var(--suave)}
.hoja{position:absolute;top:0;right:0;bottom:0;width:min(720px,100%);background:var(--crema);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform 450ms var(--suave);border-left:1px solid var(--linea-fuerte)}
.memoria.abierta .velo{opacity:1}
.memoria.abierta .hoja{transform:none}
.hoja-cab{padding:calc(env(safe-area-inset-top,0px) + 26px) 36px 0;border-bottom:1px solid var(--linea)}
.hoja-cab .fila{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
.hoja-cab h2{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.05;margin-top:.7rem}
.cerrar{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:1px solid var(--linea-fuerte);flex:none;transition:background var(--t-corta),transform 300ms var(--suave)}
.cerrar:hover{background:var(--crema-hueso);transform:rotate(90deg)}
.cerrar svg{width:16px;height:16px;stroke:var(--tinta);stroke-width:1.5;fill:none}
.tabs{display:flex;margin-top:22px;position:relative}
.tab{padding:12px 0;margin-right:28px;font-size:.95rem;color:var(--tinta-suave);transition:color var(--t-corta)}
.tab[aria-selected="true"]{color:var(--tinta);font-weight:500}
.tabs .guia{position:absolute;bottom:-1px;height:2px;background:var(--oliva);left:0;width:0;transition:transform 380ms var(--suave),width 380ms var(--suave)}
.hoja-cuerpo{flex:1;overflow-y:auto;padding:32px 36px 40px;overscroll-behavior:contain}
.pnl{animation:entra 420ms var(--suave)}
@keyframes entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.hoja-pie{padding:18px 36px calc(env(safe-area-inset-bottom,0px) + 18px);border-top:1px solid var(--linea);display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;background:var(--crema-hueso)}
.hoja-pie span{font-size:.92rem;color:var(--tinta-suave)}
.pnl h3{font-size:1.6rem;font-weight:400;line-height:1.15}
.pnl .intro{color:var(--tinta-suave);margin:.6rem 0 1.6rem;max-width:56ch}
.nota{font-size:.9rem;color:var(--tinta-suave);margin-top:1.2rem;padding-left:12px;border-left:2px solid var(--linea-fuerte);max-width:60ch}
.ciclo{border-top:1px solid var(--linea)}
.ciclo li{list-style:none;display:grid;grid-template-columns:2.4rem 9rem 1fr;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--linea)}
.ciclo .k{font-family:var(--mono);font-size:.78rem;color:var(--oro-profundo)}
.ciclo b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.ciclo span{color:var(--tinta-suave);font-size:.95rem}
.fz{padding:18px 0;border-bottom:1px solid var(--linea);display:grid;grid-template-columns:2.4rem 1fr;gap:4px 12px}
.fz:first-of-type{border-top:1px solid var(--linea)}
.fz .k{font-family:var(--mono);font-size:.78rem;color:var(--oro-profundo);padding-top:.35rem}
.fz b{font-family:var(--display);font-weight:400;font-size:1.3rem}
.fz b small{font-family:var(--texto);font-size:.9rem;color:var(--tinta-suave);margin-left:.6rem}
.chips{grid-column:2;list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:.6rem}
.chips li{font-family:var(--mono);font-size:.72rem;color:var(--oliva);background:var(--crema-hueso);border:1px solid var(--linea);padding:.28rem .55rem}
.datos{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--linea)}
.datos div{padding:14px 16px;border-right:1px solid var(--linea)}
.datos div:last-child{border-right:0}
.datos b{display:block;font-family:var(--display);font-weight:300;font-size:2.2rem;line-height:1}
.datos span{font-size:.86rem;color:var(--tinta-suave)}
.escala{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px}
.escala div{padding:14px 12px 12px;min-width:0}
.escala .n1{background:var(--rust);color:var(--crema)}
.escala .n2{background:var(--oro);color:var(--tinta)}
.escala .n3{background:var(--oliva-claro);color:var(--crema)}
.escala .n4{background:var(--oliva);color:var(--crema)}
.escala b{display:block;font-family:var(--display);font-weight:400;font-size:1.05rem;line-height:1.15}
.escala span{display:block;font-family:var(--mono);font-size:.72rem;margin-top:.4rem}
.dims{list-style:none;margin-top:20px;columns:2;column-gap:24px}
.dims li{padding:.5rem 0;border-bottom:1px solid var(--linea);font-size:.95rem;break-inside:avoid}

/* =========== responsive =========== */
@media (max-width:960px){
  :root{--gutter:28px}
  .esno .wrap,.dif .wrap,.tecno .wrap{grid-template-columns:1fr}
  .portada{padding-block:clamp(56px,12vw,96px)}
  .relieve{stroke-opacity:.09}
  .relieve path.maestra{stroke-opacity:.12}
  .portada::after{display:none}
  .dif .pista{height:auto}
  .dif .fijo{position:static;height:auto;padding-block:clamp(64px,9vw,120px)}
  .lamina{max-height:none}
  .dif .wrap{gap:0}
  .dif .wrap>div:first-child{display:contents}
  .dif .eti{order:1}
  .dif h2{order:2}
  .dif .lamina{order:3;margin-top:28px;max-width:420px;justify-self:stretch}
  .dif .selector{order:4}
  .dif .lectura{order:5;min-height:7.5rem}
  .lamina{justify-self:start}
  .capas{grid-template-columns:1fr 1fr}
  .capa:nth-child(2){border-right:0}
  .capa:nth-child(3){padding-left:0}
  .capa:nth-child(-n+2){border-bottom:1px solid var(--crema-20);padding-bottom:26px}
  .recorrido .onda{display:none}
  .fases{grid-template-columns:1fr 1fr;gap:40px 0}
  .lados{grid-template-columns:1fr}
  .camino .traza{display:none}
  .pasos{grid-template-columns:1fr;gap:8px}
  .pie-grid{grid-template-columns:1fr}
  .nav-der a{display:none}
}
@media (max-width:640px){
  :root{--gutter:20px}
  .topo{opacity:.6}
  .bajada{font-size:1.05rem}
  .acciones .btn{width:100%}
  .selector{display:grid;width:100%}
  .lectura{min-height:0}
  .capas{grid-template-columns:1fr}
  .capa,.capa+.capa{padding:22px 0 18px;border-right:0;border-bottom:1px solid var(--crema-20)}
  .capa:last-child{border-bottom:0}
  .fases{grid-template-columns:1fr;gap:0}
  .fase{flex-direction:row;align-items:flex-start;text-align:left;gap:18px;padding:18px 0;border-bottom:1px solid var(--linea)}
  .fase .punto{width:44px;height:44px;flex:none}
  .fase h3{margin:.2rem 0 .3rem}
  .datos-c{grid-template-columns:1fr}
  .cierre .btn{width:100%}
  .hoja-cab{padding-inline:20px}
  .hoja-cuerpo{padding:24px 20px 32px}
  .hoja-pie{padding-inline:20px}
  .hoja-pie .btn{width:100%}
  .ciclo li{grid-template-columns:2rem 1fr}
  .ciclo span{grid-column:2}
  .escala{grid-template-columns:1fr 1fr}
  .dims{columns:1}
  .datos b{font-size:1.8rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js [data-revelar]{opacity:1;transform:none}
  .js .tachados li path,.js .onda path,.js .dib .lazo{stroke-dashoffset:0}
  .js .lado::before{transform:none}
  .js .recorrido .punto{transform:none}
}