/* =====================================================================
   LAYEN · Laboratorio y Ensaye · layen.mx · styles.css
   Sistema visual: propuesta 01 «Matriz Granular» (elegida por el cliente, 2026-10-21).
   Héroes de servicio adaptados de la 02 «Perfil Estratigráfico» (mecánica de suelos)
   y de la 03 «Carga Máxima» (laboratorio de concreto) a la tipografía y colores de la 01.
   ===================================================================== */

/* ---------- tipografías autoalojadas (subconjunto latino, variables) ---------- */
@font-face{font-family:'Geologica';src:url('../fonts/geologica-latin.woff2') format('woff2');font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:'Azeret Mono';src:url('../fonts/azeret-mono-latin.woff2') format('woff2');font-weight:400 600;font-style:normal;font-display:swap}

:root{
  --lab:#F6F8F5;          /* Blanco Laboratorio */
  --papel:#FFFFFF;
  --tinta:#0C1A12;        /* Tinta Grava */
  --grafito:#56635B;      /* Grafito */
  --niebla:#5E6A62;       /* (5.3:1 sobre lab) */
  --linea:#DCE3DD;
  --menta:#E4F2E8;        /* Menta Ensaye */
  --verde:#008F3E;        /* Verde Layen: titulares, iconos, bordes */
  --verde-hondo:#00672C;  /* de la paleta aprobada de la propuesta 01: superficies con texto blanco y títulos grandes */
  --verde-vivo:#22C76E;   /* Verde Señal: sobre oscuro */
  --noche:#06120B;        /* Noche Granular */
  --noche-2:#0C1D13;
  --claro-oscuro:#9FB0A5; /* texto secundario chico sobre oscuro (8.4:1) */
  --arena:#B8A57E;        /* Arena de muestra */
  --f-disp:'Geologica',system-ui,sans-serif;
  --f-mono:'Azeret Mono',ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.1,1);
  --pad:clamp(1.1rem,4.2vw,2.5rem);
  --max:1240px;
  --hdr:76px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:90px}
body{font-family:var(--f-disp);font-weight:300;color:var(--tinta);background:var(--lab);line-height:1.6;overflow-x:clip;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button{font:inherit;color:inherit}
::selection{background:var(--verde);color:#fff}
:focus-visible{outline:2px solid var(--verde);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.04em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:1rem;top:-60px;z-index:3000;background:var(--tinta);color:#fff;padding:.7rem 1rem;border-radius:10px;text-decoration:none;font-weight:500}
.skip:focus{top:1rem}
main{display:block;overflow-x:clip}
main:focus{outline:none}
strong,b{font-weight:600}

/* retícula milimétrica */
.grid-bg{background-image:linear-gradient(rgba(12,26,18,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.045) 1px,transparent 1px),linear-gradient(rgba(12,26,18,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.025) 1px,transparent 1px);background-size:80px 80px,80px 80px,16px 16px,16px 16px}

/* ---------- eyebrow, H1 de keyword y títulos ---------- */
.eyebrow,.h1-top{display:inline-flex;align-items:center;gap:.6rem;font:500 .7rem/1.35 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--tinta)}
.eyebrow::before,.h1-top::before{content:"";flex:0 0 22px;height:2px;background:var(--verde)}
.eyebrow.on-dark,.on-dark .eyebrow,[data-dark] .eyebrow,[data-dark] .h1-top{color:var(--verde-vivo)}
.h1-top{font-size:.76rem;letter-spacing:.14em;font-weight:600}
h1,h2,h3,.h1-main{font-family:var(--f-disp);font-weight:700;letter-spacing:-.025em;line-height:1.04}
h2{font-size:clamp(2rem,5vw,3.4rem)}
h2,h3{text-wrap:pretty}
h2 em,.h1-main em,h3 em{font-style:normal;color:var(--verde)}
[data-dark] h2 em,[data-dark] .h1-main em{color:var(--verde-vivo)}
.eyebrow+h2,.eyebrow+.split,.tit .eyebrow+h2{margin-top:.85rem}
.lead{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--grafito);max-width:58ch}
h2+.lead,.split+.lead{margin-top:1.2rem}
[data-dark] .lead{color:rgba(233,241,236,.74)}

/* ---------- botones ---------- */
/* =====================================================================
   BOTÓN MATRIZ — sale del isotipo de Layen (anillos unidos por cuellos
   cóncavos + granos sueltos). Estructura que arma construir.py:
   <a class="btn"><span class="btn__nodo"><svg/></span><span class="btn__t">Texto</span><span class="btn__grano"></span></a>
   · nodo  = anillo del logo con hueco REAL (se ve el fondo) y el icono dentro
   · cuello = curvas cóncavas tangentes al anillo y al cuerpo (geometría del isotipo)
   · grano = la partícula suelta del logo; al pasar el cursor se integra al cuerpo
     y el anillo se compacta (engrosa): la prueba de compactación hecha botón.
   ===================================================================== */
@property --hueco{syntax:'<length>';inherits:true;initial-value:30px}
.btn{
  --nd:56px;                          /* diámetro del anillo */
  --bh:calc(var(--nd)*.66);           /* alto del cuerpo (proporción del cuello del isotipo) */
  --bg:var(--verde-hondo);            /* color de la pieza */
  --fg:#fff;                          /* texto */
  --ico:var(--verde);                 /* icono dentro del hueco (va sobre el fondo de la página) */
  --hueco:calc(var(--nd)*.6);         /* diámetro del hueco: anillo de ~20 % como el logo */
  --grano:12px;
  position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:var(--nd);padding:0 calc(1.3rem + var(--grano) + 6px) 0 calc(var(--nd) + .75rem);
  background:none;border:0;color:var(--fg);font:600 .95rem/1.15 var(--f-disp);letter-spacing:-.005em;
  text-decoration:none;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:--hueco .5s var(--ease),color .3s
}
/* cuerpo */
.btn::before{content:"";position:absolute;z-index:-1;left:calc(var(--nd)*.96);right:calc(var(--grano) + 6px);top:50%;height:var(--bh);
  transform:translateY(-50%);background:var(--bg);border-radius:0 999px 999px 0;transition:right .5s var(--ease),background-color .3s,border-color .3s}
/* cuello: la unión cóncava anillo → cuerpo, con la geometría del isotipo */
.btn::after{content:"";position:absolute;z-index:-1;left:calc(var(--nd)*44/58);top:50%;width:calc(var(--nd)*20/58);height:var(--nd);
  transform:translateY(-50%);background:var(--bg);transition:background-color .3s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='44 0 20 58'%3E%3Cpath d='M47.86 6.97A12 12 0 0 0 55.66 9.85H64V48.15H55.66A12 12 0 0 0 47.86 51.03A29 29 0 0 0 47.86 6.97Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='44 0 20 58'%3E%3Cpath d='M47.86 6.97A12 12 0 0 0 55.66 9.85H64V48.15H55.66A12 12 0 0 0 47.86 51.03A29 29 0 0 0 47.86 6.97Z'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
/* anillo con hueco real */
.btn__nodo{position:absolute;left:0;top:50%;width:var(--nd);height:var(--nd);margin-top:calc(var(--nd)/-2);border-radius:50%;
  display:grid;place-items:center;color:var(--ico);
  background:radial-gradient(circle closest-side,transparent calc(var(--hueco)/2 - .6px),var(--bg) calc(var(--hueco)/2));
  transition:transform .3s cubic-bezier(.3,1.6,.5,1),background-color .3s}
.btn__nodo svg{width:calc(var(--nd)*.3);height:calc(var(--nd)*.3);transition:transform .5s var(--ease)}
/* los puntos intersticiales del isotipo: asoman arriba y abajo del cuello al pasar el cursor */
.btn__nodo::before,.btn__nodo::after{content:"";position:absolute;left:calc(var(--nd)*1.02);width:calc(var(--nd)*.1);height:calc(var(--nd)*.1);
  border-radius:50%;background:var(--bg);opacity:0;transform:scale(0);transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.btn__nodo::before{top:calc(var(--nd)*-.02)}.btn__nodo::after{bottom:calc(var(--nd)*-.02)}
.btn__t{position:relative;white-space:nowrap}
/* grano suelto */
.btn__grano{position:absolute;right:0;top:50%;width:var(--grano);height:var(--grano);margin-top:calc(var(--grano)/-2);border-radius:50%;
  background:var(--bg);transition:transform .5s var(--ease),opacity .35s .1s,background-color .3s}

/* interacción: el grano se integra y el anillo se compacta */
.btn:active .btn__nodo{transform:scale(.92)}
.btn:focus-visible{outline:2px solid var(--verde);outline-offset:5px;border-radius:999px}

/* variantes */
.btn.ghost{--bg:var(--tinta);--fg:var(--tinta);--ico:var(--tinta);--hueco:calc(var(--nd)*.8);--linea-btn:rgba(12,26,18,.26)}
.btn.ghost::before{background:transparent;border:1.5px solid var(--linea-btn);border-left:0;left:calc(var(--nd)*.86)}
.btn.ghost::after{display:none}
.btn.light{--bg:#fff;--fg:var(--tinta);--ico:#fff}
.btn.line-light{--bg:#fff;--fg:#fff;--ico:#fff;--hueco:calc(var(--nd)*.8);--linea-btn:rgba(255,255,255,.45)}
.btn.line-light::before{background:transparent;border:1.5px solid var(--linea-btn);border-left:0;left:calc(var(--nd)*.86)}
.btn.line-light::after{display:none}
[data-dark] .btn{--ico:var(--verde-vivo)}
[data-dark] .btn.light,[data-dark] .btn.line-light{--ico:#fff}
.btn.sm{--nd:44px;--grano:9px;font-size:.86rem;padding-right:calc(1rem + var(--grano) + 5px);padding-left:calc(var(--nd) + .6rem)}
@media (hover:hover){
  .btn:hover,.btn:focus-visible{--hueco:calc(var(--nd)*.44)}
  .btn:hover::before,.btn:focus-visible::before{right:calc(var(--grano)*.5)}
  .btn:hover .btn__grano,.btn:focus-visible .btn__grano{transform:translateX(calc(var(--grano)*-1.6)) scale(.35);opacity:0}
  .btn:hover .btn__nodo::before,.btn:hover .btn__nodo::after,.btn:focus-visible .btn__nodo::before,.btn:focus-visible .btn__nodo::after{opacity:1;transform:scale(1)}
  .btn:hover .btn__nodo svg{transform:scale(.88)}
  .btn.ghost:hover,.btn.ghost:focus-visible{--bg:var(--verde);--ico:var(--verde);--hueco:calc(var(--nd)*.5);--linea-btn:var(--tinta)}
  .btn.line-light:hover,.btn.line-light:focus-visible{--linea-btn:#fff;--hueco:calc(var(--nd)*.5)}
}
@media (max-width:380px){.btn{font-size:.9rem}.btn__t{white-space:normal;line-height:1.1}}
@media (prefers-reduced-motion:reduce){.btn,.btn *,.btn::before,.btn::after,.btn__nodo::before,.btn__nodo::after{transition:none!important}}
.btn-row{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;align-items:center}
.link-go{display:inline-flex;align-items:center;gap:.45rem;font-weight:600;color:var(--tinta);text-decoration:none;border-bottom:2px solid var(--verde);padding-bottom:2px}
.link-go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.link-go:hover svg{transform:translateX(3px)}
button.link-go{background:none;border:0;border-bottom:2px solid var(--verde);border-radius:0;cursor:pointer;padding:0 0 2px;font:inherit;font-weight:600;color:var(--tinta)}
[data-dark] .link-go{color:var(--verde-vivo)}
.i{width:18px;height:18px;flex:0 0 18px}

/* =========================== HEADER =========================== */
.hdr{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
/* vuelve al subir: al bajar se esconde (sin la línea de abajo, que asomaría), al subir regresa */
.hdr.oculto{transform:translateY(-100%);box-shadow:none}
.hdr.scrolled{background:rgba(246,248,245,.9);-webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3);box-shadow:0 1px 0 var(--linea)}
.hdr.dark{background:rgba(6,18,11,.86);box-shadow:0 1px 0 rgba(255,255,255,.08);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hdr.dark.top{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr.dark .nav a,.hdr.dark .hdr-tel{color:rgba(233,241,236,.82)}
.hdr.dark .nav a:hover,.hdr.dark .nav a[aria-current]{color:#fff}
.hdr.dark .brand .word,.hdr.dark .brand-tag{color:#fff}
.hdr.dark .brand .iso{color:var(--verde-vivo)}
.hdr.dark .burger{background:transparent;border-color:rgba(255,255,255,.3)}
.hdr.dark .burger span,.hdr.dark .burger span::before,.hdr.dark .burger span::after{background:#fff}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:var(--hdr)}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--tinta);flex:0 0 auto}
.brand .iso{width:34px;height:auto;color:var(--verde);transition:transform .8s var(--ease)}
.brand:hover .iso{transform:rotate(90deg)}
.brand .word{width:84px;height:auto;color:var(--tinta)}
.brand-tag{display:block;font:500 .5rem/1 var(--f-mono);letter-spacing:.22em;color:var(--grafito);margin-top:.35rem;text-transform:uppercase}
.nav{display:flex;gap:1.5rem;list-style:none}
.nav a{font-size:.88rem;font-weight:400;text-decoration:none;color:var(--grafito);position:relative;padding:.3rem 0;transition:color .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:var(--verde);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.nav a:hover,.nav a[aria-current]{color:var(--tinta)}
.nav a:hover::after,.nav a[aria-current]::after{transform:scaleX(1)}
.hdr-cta{display:flex;align-items:center;gap:1rem}
.hdr-tel{display:inline-flex;align-items:center;gap:.4rem;font:500 .8rem/1 var(--f-mono);color:var(--tinta);background:none;border:0;cursor:pointer;letter-spacing:.03em;padding:.5rem 0}
.hdr-tel svg{width:15px;height:15px}
.burger{display:none;width:44px;height:44px;border-radius:50%;border:1px solid var(--linea);background:var(--papel);align-items:center;justify-content:center;cursor:pointer}
.burger span{display:block;width:16px;height:1.5px;background:var(--tinta);position:relative;transition:background .3s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:16px;height:1.5px;background:var(--tinta);transition:transform .3s}
.burger span::before{top:-5px}.burger span::after{top:5px}
.menu-open .burger span{background:transparent!important}
.menu-open .burger span::before{transform:translateY(5px) rotate(45deg)}
.menu-open .burger span::after{transform:translateY(-5px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:70;background:var(--noche);color:#fff;padding:100px var(--pad) 2rem;display:flex;flex-direction:column;justify-content:space-between;gap:2rem;overflow-y:auto;clip-path:circle(0% at calc(100% - 44px) 38px);transition:clip-path .7s var(--ease),visibility 0s .7s;visibility:hidden}
.menu-open .mmenu{clip-path:circle(150% at calc(100% - 44px) 38px);visibility:visible;transition:clip-path .7s var(--ease)}
.mmenu ol{list-style:none;counter-reset:m}
.mmenu li{border-bottom:1px solid rgba(255,255,255,.1);counter-increment:m}
.mmenu li a{display:flex;align-items:baseline;gap:1rem;padding:.95rem 0;font-size:1.7rem;font-weight:600;letter-spacing:-.03em;text-decoration:none}
.mmenu li a::before{content:"0" counter(m);font:500 .7rem var(--f-mono);color:var(--verde-vivo);letter-spacing:.1em}
.mmenu li a[aria-current]{color:var(--verde-vivo)}
.mm-btns{display:grid;gap:.7rem}
.mm-foot{font:500 .78rem/1.7 var(--f-mono);color:var(--claro-oscuro)}
.menu-open .hdr{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.menu-open .hdr .brand .word,.menu-open .hdr .brand-tag{color:#fff}
.menu-open .hdr .brand .iso{color:var(--verde-vivo)}
.menu-open .burger{background:transparent;border-color:rgba(255,255,255,.3)}
.menu-open .burger span::before,.menu-open .burger span::after{background:#fff}
.menu-open .hdr-cta .btn,.menu-open .hdr-tel{visibility:hidden}
.menu-open{overflow:hidden}
.progress{position:fixed;left:0;right:0;top:0;height:2px;z-index:90;pointer-events:none}
.progress i{display:block;height:100%;width:100%;background:var(--verde-vivo);transform-origin:left;transform:scaleX(var(--sp,0))}

/* =========================== HERO HOME (pin): compactación del isotipo =========================== */
.hero{position:relative;height:250vh}
.hero-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(2rem,5vw,4.5rem);padding:calc(var(--hdr) + clamp(.5rem,2.6vh,1.25rem)) var(--pad) clamp(.75rem,3vh,2rem);max-width:var(--max);margin:0 auto}
.hero-copy{position:relative;z-index:2}
/* el titular grande es IGUAL en todos los héroes: el de la home manda (Alberto, 2026-10-22) */
.hero .h1-main,.page-hero .h1-main,.hs .h1-main,.hp .h1-main,.hc .h1-main{font-size:clamp(2.35rem,min(5.2vw,9.4vh),4.4rem);margin:clamp(.6rem,2.2vh,1.2rem) 0 clamp(.7rem,2.4vh,1.3rem);max-width:13ch}
/* la entrada del héroe baja un punto solo en ventanas bajas (laptops con escala de Windows) */
.hero .lead,.page-hero .lead,.hs .lead,.hp .lead,.hc .lead{font-size:clamp(.95rem,min(1.5vw,2.9vh),1.16rem)}
.h1-main .ln{display:block;overflow:hidden;padding-bottom:.06em}
.js .h1-main .ln>span{display:inline-block;transform:translateY(105%);animation:lnUp 1s var(--ease) forwards}
.h1-main .ln:nth-child(2)>span{animation-delay:.07s}.h1-main .ln:nth-child(3)>span{animation-delay:.14s}.h1-main .ln:nth-child(4)>span{animation-delay:.21s}
@keyframes lnUp{to{transform:none}}
.js .hero .lead,.js .page-hero .lead,.js .hs .lead,.js .hp .lead,.js .hc .lead{opacity:0;animation:fadeUp .9s .35s var(--ease) forwards}
.lead-m{display:none}
.js .hero-btns{opacity:0;animation:fadeUp .9s .5s var(--ease) forwards}
.hero-btns{display:flex;flex-wrap:wrap;gap:.8rem 1.4rem;margin-top:clamp(1rem,3.4vh,1.8rem)}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero-viz{position:relative;height:min(74svh,640px);border-radius:28px;background:var(--papel);box-shadow:0 1px 0 var(--linea),0 40px 80px -50px rgba(12,26,18,.35);overflow:hidden;isolation:isolate}
.hero-viz::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(12,26,18,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.05) 1px,transparent 1px);background-size:24px 24px;mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);-webkit-mask-image:radial-gradient(ellipse at 50% 45%,#000 30%,transparent 78%);z-index:-1}
#grains{position:absolute;inset:0;width:100%;height:100%}
.hero-iso{position:absolute;left:0;top:0;width:200px;color:var(--verde);opacity:var(--iso,0);pointer-events:none;filter:drop-shadow(0 18px 30px rgba(0,143,62,.22))}
.viz-tag{position:absolute;top:1rem;left:1rem;right:1rem;display:flex;justify-content:space-between;gap:1rem;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.12em;color:var(--grafito);text-transform:uppercase;z-index:2}
.viz-tag b{color:var(--tinta);font-weight:600}
.readout{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:2;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--linea);border-radius:16px;padding:.9rem 1rem;display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem .8rem}
.ro-cell .k{display:block;font:500 .56rem/1.2 var(--f-mono);letter-spacing:.12em;color:var(--niebla);text-transform:uppercase}
.ro-cell .v{display:block;font:600 1.2rem/1.2 var(--f-mono);color:var(--tinta);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.ro-cell .v small{font-size:.62rem;color:var(--grafito);margin-left:.15rem;font-weight:500}
.ro-bar{grid-column:1/-1;position:relative;height:6px;border-radius:6px;background:var(--linea);margin-top:.4rem}
.ro-bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--hp,0)*100%);border-radius:6px;background:linear-gradient(90deg,var(--arena),var(--verde))}
.ro-bar s{position:absolute;top:-4px;bottom:-4px;width:1px;background:var(--tinta);opacity:.35;text-decoration:none}
.ro-bar s::after{content:attr(data-l);position:absolute;top:12px;left:50%;transform:translateX(-50%);font:500 .5rem var(--f-mono);color:var(--grafito);white-space:nowrap}
.ro-state{grid-column:1/-1;display:flex;justify-content:space-between;align-items:center;gap:.6rem;font:600 .62rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito);margin-top:.9rem}
.ro-state .st{display:inline-flex;align-items:center;gap:.45rem;color:var(--tinta)}
.ro-state .st i{width:8px;height:8px;border-radius:50%;background:var(--arena);transition:background .3s,box-shadow .3s}
.ro-state .st.ok{color:var(--tinta)}.ro-state .st.ok i{background:var(--verde-vivo);box-shadow:0 0 0 4px rgba(34,199,110,.2)}
.stamp{position:absolute;right:1.4rem;top:3.2rem;z-index:3;font:700 .8rem/1 var(--f-mono);letter-spacing:.16em;color:var(--tinta);border:2px solid var(--verde);border-radius:8px;padding:.55rem .7rem;transform:rotate(-8deg) scale(1.6);opacity:0;transition:transform .45s cubic-bezier(.3,1.6,.5,1),opacity .2s;text-transform:uppercase;background:rgba(255,255,255,.8)}
.stamp.on{opacity:1;transform:rotate(-8deg) scale(1)}
.scroll-hint{position:absolute;left:var(--pad);bottom:1.6rem;display:flex;align-items:center;gap:.7rem;font:500 .66rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafito);opacity:calc(1 - var(--hp,0)*4);pointer-events:none}
/* home: --hp arranca en .08 (la barra de compactación empieza en 72.4 %); la pista se apaga con el avance real
   (--hint), si no en reposo queda al 68 % de opacidad y no pasa el contraste AA */
.hero .scroll-hint{opacity:calc(1 - var(--hint,0)*5)}
.scroll-hint i{width:1px;height:38px;background:linear-gradient(var(--verde),transparent);position:relative;overflow:hidden}
.scroll-hint i::after{content:"";position:absolute;left:-1px;top:-12px;width:3px;height:12px;border-radius:2px;background:var(--verde);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{to{top:40px}}
[data-dark] .scroll-hint{color:var(--claro-oscuro)}
[data-dark] .scroll-hint i{background:linear-gradient(var(--verde-vivo),transparent)}
[data-dark] .scroll-hint i::after{background:var(--verde-vivo)}

/* =========================== CREDENCIALES =========================== */

/* =========================== REVELADOS =========================== */
.js [data-rv]{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.js [data-rv].in{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js .split .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s var(--ease);transition-delay:calc(var(--i)*.04s)}
.js .split.in .w>span{transform:none}

/* =========================== SECCIONES GENERALES =========================== */
.sec{padding:clamp(4.5rem,10vw,8rem) 0}
.sec.tight{padding:clamp(3.5rem,7vw,5.5rem) 0}
.sec.white{background:var(--papel);border-block:1px solid var(--linea)}
.sec.menta{background:var(--menta)}
.sec.dark{background:var(--noche);color:#E9F1EC}
.sec.dark h2,.sec.dark h3{color:#fff}
.tit{margin-bottom:clamp(2rem,4vw,3rem)}
.tit-row{display:block;margin-bottom:clamp(2rem,4vw,3rem)}
.tit-row h2{max-width:24ch}
.tit-row>p{max-width:70ch;margin-top:1.1rem;color:var(--grafito);font-size:clamp(1.02rem,1.5vw,1.16rem)}
.sec.dark .tit-row>p{color:rgba(233,241,236,.72)}
/* bloque de texto en dos columnas: título fijo a la izquierda, contenido a la derecha */
/* texto + foto o tarjeta al costado (Snippet 16 del playbook); en celular, una columna */
.split-media{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.78fr);column-gap:clamp(2rem,5vw,4.5rem);align-items:start}
.split-media.al-centro{align-items:center}
.split-media>figure{margin:0}
.sec-cta{margin-top:1.8rem}
.prose{max-width:70ch}
.split-media .prose,.dos-col .prose{max-width:none}
.prose p+p,.prose p+ul,.prose ul+p,.prose p+.nota,.prose .nota+p{margin-top:1rem}
.prose h3{font-size:1.3rem;margin:2.2rem 0 .7rem;letter-spacing:-.02em}
.prose h3:first-child{margin-top:0}
.prose ul{list-style:none;display:grid;gap:.55rem}
.prose ul li{position:relative;padding-left:1.3rem}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:7px;border-radius:2px;background:var(--verde);transform:rotate(45deg)}
.prose a{color:var(--tinta);text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:3px}
.sec.dark .prose a{color:var(--verde-vivo)}
.answer{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--grafito);max-width:70ch}
.answer strong,.lead strong{font-weight:600;color:var(--tinta)}
.sec.dark .answer{color:rgba(233,241,236,.78)}
.sec.dark .answer strong{color:#fff}
.nota{background:var(--menta);border-radius:16px;padding:1.1rem 1.3rem;font-size:.95rem;max-width:68ch}
.nota b{color:var(--tinta)}
.sec.menta .nota{background:var(--papel)}
.dos-col{columns:2;column-gap:clamp(2rem,4vw,4rem);orphans:2;widows:2}
.dos-col>*{break-inside:auto}
.dos-col h3{break-after:avoid}
.dos-col li,.dos-col .nota{break-inside:avoid}

/* ficha técnica (lista numerada con norma) */
.ficha{border-top:1px solid var(--linea)}
.ficha-row{display:grid;grid-template-columns:2.6rem 1fr auto;gap:1rem;align-items:baseline;padding:1.05rem 0;border-bottom:1px solid var(--linea)}
.ficha-row .n{font:500 .72rem var(--f-mono);color:var(--tinta)}
.ficha-row b{font-weight:600;font-size:1.04rem;letter-spacing:-.01em}
.ficha-row small{display:block;font-size:.9rem;color:var(--grafito);margin-top:.2rem;line-height:1.5;max-width:70ch}
.ficha-row .nrm{font:500 .64rem var(--f-mono);color:var(--niebla);letter-spacing:.06em;white-space:nowrap;text-align:right}
.sec.dark .ficha,.sec.dark .ficha-row{border-color:rgba(255,255,255,.12)}
.sec.dark .ficha-row small{color:rgba(233,241,236,.72)}
.sec.dark .ficha-row .n{color:var(--verde-vivo)}
.sec.dark .ficha-row .nrm{color:var(--claro-oscuro)}
.ficha.art .ficha-row{grid-template-columns:6.2rem 1fr auto}
.razones.cuatro{grid-template-columns:repeat(4,1fr)}
.razones.tres{grid-template-columns:repeat(3,1fr)}

/* pasos */
.pasos{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;counter-reset:p}
.pasos.tres{grid-template-columns:repeat(3,1fr)}
.paso{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1.4rem 1.3rem 1.3rem;counter-increment:p}
.paso::before{content:"0" counter(p);display:block;font:500 .72rem var(--f-mono);color:var(--tinta);letter-spacing:.1em;margin-bottom:1.1rem}
.paso::after{content:"";position:absolute;left:1.3rem;right:1.3rem;top:3rem;height:1px;background:linear-gradient(90deg,var(--verde),transparent)}
.paso b{display:block;font-size:1.1rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.paso p{font-size:.92rem;color:var(--grafito);margin-top:.45rem}

/* tabla */
.tabla-wrap{overflow-x:auto;border:1px solid var(--linea);border-radius:18px;background:var(--papel)}
.tabla{width:100%;border-collapse:collapse;font-size:.94rem}
.tabla th,.tabla td{text-align:left;padding:.9rem 1.1rem;border-bottom:1px solid var(--linea);vertical-align:top}
.tabla th{font:500 .64rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);background:var(--lab)}
.tabla tr:last-child td{border-bottom:0}
.tabla td b{font-weight:600}
.tabla .si{color:var(--tinta);font-weight:600}
.tabla.alcance td:last-child{white-space:nowrap;font:500 .8rem var(--f-mono);letter-spacing:.02em}

/* banda de llamada a la acción */
.cta-band{position:relative;overflow:hidden;background:var(--verde-hondo);color:#fff;border-radius:28px;padding:clamp(2rem,5vw,3.6rem);display:grid;grid-template-columns:1.3fr auto;gap:2rem;align-items:center}
.cta-band::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.14) 1.4px,transparent 1.6px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 40%,#000);-webkit-mask-image:linear-gradient(90deg,transparent,#000 40%,#000);pointer-events:none}
.cta-band>*{position:relative}
.cta-band h2{font-size:clamp(1.7rem,3.4vw,2.6rem);color:#fff;max-width:22ch}
.cta-band p{margin-top:.8rem;color:rgba(255,255,255,.92);max-width:56ch}
.cta-band .btn-row{justify-content:flex-end}
.cta-band .btn.light{--fg:var(--tinta)}

/* relacionados */
.rel{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.rel a{display:flex;flex-direction:column;gap:.5rem;background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1.3rem 1.4rem;text-decoration:none;transition:border-color .3s,transform .4s var(--ease)}
.rel a:hover{border-color:var(--verde);transform:translateY(-4px)}
.rel small{font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.rel b{font-size:1.15rem;font-weight:600;letter-spacing:-.015em}
.rel span{font-size:.9rem;color:var(--grafito)}

/* migas */
.crumbs{font:500 .66rem/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--niebla);margin-bottom:1.4rem}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem}
.crumbs li+li::before{content:"/";margin-right:.4rem;color:var(--linea)}
.crumbs a{color:var(--grafito);text-decoration:none}
.crumbs a:hover{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--verde)}
[data-dark] .crumbs,[data-dark] .crumbs a{color:var(--claro-oscuro)}
[data-dark] .crumbs li+li::before{color:rgba(255,255,255,.25)}

/* =========================== FIRMA: MECÁNICA DE SUELOS (home) =========================== */
.firma-in{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(2rem,6vw,5.5rem);align-items:center}
.scanframe{position:relative;aspect-ratio:3/4;border-radius:22px;overflow:hidden;background:var(--noche);margin:0}
.scanframe img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.08);transition:transform 2.2s var(--ease)}
.scanframe .img-gray{filter:grayscale(1) contrast(1.05) brightness(.82)}
.js .scanframe .img-color{clip-path:inset(0 0 calc(100% - var(--scan,0)*100%) 0)}
.scanframe.in img,.no-js .scanframe img{transform:scale(1)}
.scanline{position:absolute;left:0;right:0;top:calc(var(--scan,0)*100%);height:2px;background:var(--verde-vivo);box-shadow:0 0 18px 3px rgba(34,199,110,.75);opacity:calc((1 - var(--scan,0))*8);pointer-events:none}
.reticle{position:absolute;inset:14px;pointer-events:none;z-index:2}
.reticle i{position:absolute;width:22px;height:22px;border-color:#fff;border-style:solid;opacity:.8}
.reticle i:nth-child(1){top:0;left:0;border-width:2px 0 0 2px}.reticle i:nth-child(2){top:0;right:0;border-width:2px 2px 0 0}
.reticle i:nth-child(3){bottom:0;left:0;border-width:0 0 2px 2px}.reticle i:nth-child(4){bottom:0;right:0;border-width:0 2px 2px 0}
.scan-meta{position:absolute;left:1.2rem;right:1.2rem;bottom:1.2rem;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;color:#fff;font:500 .62rem/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.scan-meta b{display:block;font:600 1rem/1.15 var(--f-disp);letter-spacing:-.01em;text-transform:none;margin-top:.2rem}
.scan-meta .depth{text-align:right}
.scanframe::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,18,11,.8));z-index:1}
.ruler{position:absolute;right:14px;top:60px;bottom:90px;width:26px;z-index:2;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-end;color:rgba(255,255,255,.8);font:500 .5rem var(--f-mono)}
.ruler span{display:flex;align-items:center;gap:4px}
.ruler span::after{content:"";width:8px;height:1px;background:currentColor}
.ruler span:nth-child(odd)::after{width:14px}
.firma h2{margin-bottom:1.3rem}
.firma .ficha{margin-top:2rem}
.firma-cta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2rem}

/* =========================== GRANULOMETRÍA (pin, oscura) =========================== */
.granu{position:relative;height:300vh;background:var(--noche);color:#E9F1EC}
.granu-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:.95fr 1.05fr;grid-template-rows:1fr auto;grid-template-areas:'copy sieve' 'curve sieve';column-gap:clamp(1.5rem,4vw,4rem);row-gap:1.4rem;align-items:center;padding:96px var(--pad) 2rem;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.granu-copy{grid-area:copy;align-self:end;position:relative}
.sieve-wrap{grid-area:sieve;align-self:stretch;position:relative;min-height:0}
.curve-card{grid-area:curve;align-self:start}
.granu-stage::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 30% 50%,rgba(0,143,62,.18),transparent 70%);pointer-events:none}
.granu-big{font:700 clamp(1.9rem,4.4vw,3.2rem)/1.04 var(--f-disp);letter-spacing:-.025em;text-wrap:pretty;color:#fff;margin:.85rem 0 1.2rem}
.granu-big em{font-style:normal;color:var(--verde-vivo)}
#sieve{position:absolute;inset:0;width:100%;height:100%}
.curve-card{position:relative;background:var(--noche-2);border:1px solid rgba(255,255,255,.08);border-radius:18px;padding:1rem 1.1rem 1.1rem}
.curve-head{display:flex;justify-content:space-between;font:500 .6rem/1.3 var(--f-mono);letter-spacing:.14em;color:var(--claro-oscuro);text-transform:uppercase;margin-bottom:.4rem}
.curve-head b{color:var(--verde-vivo);font-weight:600}
#curve{width:100%;height:auto;overflow:visible}
#curve .grid line{stroke:rgba(255,255,255,.08)}
#curve .ax text{fill:var(--claro-oscuro);font:500 7px var(--f-mono)}
#curve .crv{fill:none;stroke:var(--verde-vivo);stroke-width:2.4;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(34,199,110,.6))}
#curve .area{fill:url(#cg);opacity:.5}
#curve circle{fill:var(--noche);stroke:var(--verde-vivo);stroke-width:2}
.pasa{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem;margin-top:.8rem}
.pasa div{background:rgba(255,255,255,.05);border-radius:10px;padding:.5rem .45rem;text-align:center}
.pasa dt{font:500 .54rem var(--f-mono);letter-spacing:.06em;color:var(--claro-oscuro)}
.pasa dd{font:600 .95rem var(--f-mono);color:#fff;font-variant-numeric:tabular-nums}
.sucs{display:flex;align-items:center;gap:.8rem;margin-top:1rem;font:500 .66rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--claro-oscuro)}
.sucs b{font:700 1.3rem var(--f-disp);color:#fff;letter-spacing:-.02em;white-space:nowrap;padding:.2rem .7rem;border:1px solid var(--verde-vivo);border-radius:10px;opacity:calc((var(--gp,0) - .82)*6);text-transform:none}
/* pantallas bajas (laptops): la tarjeta de la curva cabe completa. Primero salen las casillas (los % ya están en las mallas),
   luego el párrafo, y abajo de 760 px la tarjeta se achica en proporción a la altura (Alberto, 2026-10-27: se cortaba en 1308×585) */
@media (min-width:901px) and (max-height:820px){.granu .pasa{display:none}}
@media (min-width:901px) and (max-height:760px){.granu .lead{display:none}.granu-big{margin-bottom:.4rem}.curve-card{justify-self:start;width:min(100%,calc((100vh - 410px)*2.13))}.sucs{margin-top:.6rem;font-size:.56rem;gap:.5rem}.sucs b{font-size:1rem;padding:.15rem .5rem}}

/* =========================== SERVICIOS (tarjetas) =========================== */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
.card{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:22px;padding:1.5rem 1.5rem 1.4rem;display:flex;flex-direction:column;min-height:360px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .5s var(--ease),border-color .3s,box-shadow .5s var(--ease)}
.card::before{content:"";position:absolute;left:0;right:0;top:0;height:100%;background:linear-gradient(180deg,rgba(34,199,110,0),rgba(34,199,110,.12) 85%,var(--verde-vivo) 85.5%,rgba(34,199,110,0) 87%);transform:translateY(-100%);pointer-events:none}
.card.in::before{animation:cardScan 1.4s var(--ease) var(--d,0s) both}
@keyframes cardScan{to{transform:translateY(100%)}}
.card:hover{transform:translateY(-6px);border-color:var(--verde);box-shadow:0 30px 50px -36px rgba(0,103,44,.55)}
.card-top{display:flex;justify-content:space-between;align-items:center;font:500 .64rem var(--f-mono);letter-spacing:.12em;color:var(--niebla);text-transform:uppercase}
.card-top b{color:var(--tinta);font-weight:600}
.glyph{width:100%;height:110px;margin:1.2rem 0 1rem;color:var(--tinta)}
.glyph .g-acc{color:var(--verde)}
.card h3{font-size:1.38rem;font-weight:700;letter-spacing:-.025em}
.card p{font-size:.93rem;color:var(--grafito);margin-top:.5rem;flex:1}
.card-foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-top:1.2rem;padding-top:1rem;border-top:1px dashed var(--linea);font:500 .64rem var(--f-mono);color:var(--niebla);letter-spacing:.06em}
.card-foot i{flex:0 0 34px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--linea);transition:background .3s,border-color .3s,color .3s;color:var(--tinta)}
.card-foot i svg{width:16px;height:16px}
.card:hover .card-foot i{background:var(--verde-hondo);border-color:var(--verde-hondo);color:#fff}
.g-press{transition:transform .8s var(--ease)}
.card:hover .g-press{transform:translateY(10px)}
.g-crack{stroke-dasharray:60;stroke-dashoffset:60;transition:stroke-dashoffset .8s var(--ease) .25s}
.card:hover .g-crack{stroke-dashoffset:0}
.g-curve{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.6s var(--ease)}
.card.in .g-curve,.no-js .g-curve{stroke-dashoffset:0}
.g-bore{transition:transform 1s var(--ease)}
.card:hover .g-bore{transform:translateY(16px)}
.g-layer{transition:transform .7s var(--ease)}
.card:hover .g-layer.a{transform:translateY(-6px)}.card:hover .g-layer.b{transform:translateY(-3px)}
.servs-nota{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:1.1rem;padding:1.2rem 1.4rem;border:1px dashed rgba(12,26,18,.22);border-radius:18px;font-size:.95rem;color:var(--grafito)}
.servs-nota b{color:var(--tinta);font-weight:600}
.servs-nota p{flex:1 1 34rem;max-width:72ch}

/* =========================== POR QUÉ LAYEN =========================== */
.porque-in{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.razones{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.razon{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1.4rem 1.3rem}
.razon svg{width:34px;height:34px;color:var(--verde);margin-bottom:1rem}
.razon b{display:block;font-size:1.12rem;font-weight:600;letter-spacing:-.015em;line-height:1.25}
.razon p{font-size:.92rem;color:var(--grafito);margin-top:.45rem}
.razon q{font-style:normal;quotes:none}
.perfiles{display:grid;gap:1rem;margin-top:2rem}
.perfil{border-top:1px solid var(--linea);padding-top:1rem}
.perfil small{font:500 .64rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--tinta)}
.perfil p{margin-top:.35rem;color:var(--grafito);font-size:.98rem}

/* =========================== CIFRAS (odómetro) =========================== */
.cifras{background:var(--verde-hondo);color:#fff;padding:clamp(3.5rem,8vw,6rem) 0;position:relative;overflow:hidden}
.cifras::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.12) 1.4px,transparent 1.6px);background-size:22px 22px;mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 30%,#000 70%,transparent)}
.cifras-in{position:relative;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem}
@media (max-width:1100px) and (min-width:641px){.cifras-in{grid-template-columns:repeat(6,1fr);row-gap:2.4rem}.cifra{grid-column:span 2}.cifra:nth-child(-n+2){grid-column:span 3}}
.cifra{border-left:1px solid rgba(255,255,255,.3);padding-left:1.2rem}
.odo{display:flex;align-items:baseline;font:700 clamp(2.6rem,6vw,4.6rem)/1 var(--f-disp);letter-spacing:-.04em;height:1em;overflow:hidden}
.odo .col{display:flex;flex-direction:column;transition:transform 2.2s cubic-bezier(.16,.84,.2,1);transition-delay:var(--d,0s)}
.odo .col span{height:1em;display:block}
.odo .fix{display:block}
.odo .suf{font-size:.42em;letter-spacing:-.01em;margin-left:.2em;align-self:flex-end;line-height:1.6}
.cifra p{font-size:.94rem;margin-top:.7rem;color:rgba(255,255,255,.92);max-width:26ch}
.cifra small{display:block;font:500 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.85);margin-top:.5rem}

/* =========================== CADENA DE CUSTODIA (pin) =========================== */
.custodia{position:relative;height:320vh}
.cus-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(2rem,5vw,5rem);padding:90px var(--pad) 2rem;max-width:calc(var(--max) + 2*var(--pad));margin:0 auto}
.cus-copy h2{font-size:clamp(1.9rem,4.4vw,3.2rem)}
.cus-steps{list-style:none;margin-top:1.8rem;position:relative}
.cus-steps li{display:grid;grid-template-columns:3.2rem 1fr;gap:.9rem;padding:.95rem 0;border-top:1px solid var(--linea);transition:opacity .5s}
.js .cus-steps li{opacity:.32}
.js .cus-steps li.on{opacity:1}
.cus-steps .k{font:600 .78rem var(--f-mono);color:var(--tinta);padding-top:.2rem}
.cus-steps b{font-size:1.12rem;font-weight:600;letter-spacing:-.015em}
.cus-steps p{font-size:.9rem;color:var(--grafito);margin-top:.2rem}
.tag-wrap{position:relative;display:grid;place-items:center;height:100%}
.etiqueta{position:relative;width:min(380px,82vw);aspect-ratio:.66;background:#FBFAF4;border-radius:14px 14px 18px 18px;box-shadow:0 2px 0 rgba(12,26,18,.06),0 50px 80px -40px rgba(12,26,18,.45);padding:1.5rem 1.4rem 1.2rem;transform:rotate(calc(-4deg + var(--cp,0)*5deg));color:var(--tinta);overflow:hidden}
.etiqueta::before{content:"";position:absolute;top:16px;left:50%;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:var(--lab);box-shadow:inset 0 2px 3px rgba(0,0,0,.18)}
.etiqueta::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 27px,rgba(12,26,18,.06) 27px 28px);pointer-events:none}
.et-head{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;padding-top:1.4rem;padding-bottom:.8rem;border-bottom:2px solid var(--tinta)}
.et-head svg{width:30px;color:var(--verde)}
.et-head .mono{font-size:.62rem;text-align:right;line-height:1.4}
.et-ej{position:absolute;z-index:2;top:.7rem;right:.9rem;font:600 .54rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafito)}
.et-rows{position:relative;z-index:1;margin-top:.6rem;font:500 .7rem/2 var(--f-mono)}
.et-rows div{display:flex;justify-content:space-between;gap:.6rem;border-bottom:1px dotted rgba(12,26,18,.25)}
.et-rows span{color:var(--grafito)}
.et-rows b{font-weight:600;text-align:right}
.sello{position:absolute;z-index:2;width:118px;height:118px;border-radius:50%;border:3px solid currentColor;display:grid;place-items:center;text-align:center;font:700 .64rem/1.15 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:scale(2.2) rotate(var(--r,0deg));transition:transform .4s cubic-bezier(.3,1.5,.55,1),opacity .15s;mix-blend-mode:multiply}
.sello::before{content:"";position:absolute;inset:6px;border-radius:50%;border:1px dashed currentColor}
.sello.on{opacity:.9;transform:scale(1) rotate(var(--r,0deg))}
.s1{left:5%;top:57%;color:#2C5E8C;--r:-14deg}
.s2{right:5%;top:55%;color:#8A5F0F;--r:10deg}
.s3{left:11%;bottom:4%;color:var(--verde-hondo);--r:6deg}
.s4{right:6%;bottom:6%;color:#A8231B;--r:-8deg;width:132px;height:132px}
.cus-bar{position:absolute;left:var(--pad);right:var(--pad);bottom:1.4rem;height:2px;background:var(--linea)}
.cus-bar i{display:block;height:100%;width:calc(var(--cp,0)*100%);background:var(--verde)}

/* =========================== OBRA =========================== */
.obra-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:minmax(120px,auto);gap:1rem}
.shot{position:relative;border-radius:20px;overflow:hidden;background:var(--noche);min-height:240px;margin:0}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter 1.2s var(--ease),transform 1.6s var(--ease)}
.js .shot img{filter:grayscale(1) contrast(1.1);transform:scale(1.06)}
.shot::before{content:"";position:absolute;inset:0;background:var(--verde);mix-blend-mode:multiply;opacity:0;z-index:1;transition:opacity 1.2s var(--ease)}
.js .shot::before{opacity:.55}
.js .shot.in img{filter:none;transform:scale(1)}
.js .shot.in::before{opacity:0}
.shot:hover img{transform:scale(1.04)}
.shot figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.1rem 1.2rem;background:linear-gradient(transparent,rgba(6,18,11,.88));color:#fff}
.shot figcaption b{display:block;font-weight:600;font-size:1.02rem;letter-spacing:-.01em;line-height:1.25}
.shot figcaption span{font:500 .6rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.sh-a{grid-column:1/8;grid-row:1/4}.sh-b{grid-column:8/13;grid-row:1/3}.sh-c{grid-column:8/13;grid-row:3/6}.sh-d{grid-column:1/5;grid-row:4/6}
.dato-obra{grid-column:5/8;grid-row:4/6;border-radius:20px;background:var(--menta);padding:1.3rem;display:flex;flex-direction:column;justify-content:space-between;gap:1rem}
.dato-obra b{font:700 2.2rem/1 var(--f-disp);letter-spacing:-.04em;color:var(--verde-hondo)}
.dato-obra p{font-size:.88rem;color:var(--grafito)}
.clientes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 3rem;margin-top:3rem;padding-top:2rem;border-top:1px solid var(--linea)}
.clientes .mono{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.logos{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem 2.6rem;flex:1;list-style:none}
.logos img{height:34px;width:auto;opacity:.7;transition:opacity .3s,transform .4s var(--ease)}
.logos img:hover{opacity:1;transform:translateY(-2px)}
.logos .lg-alto{height:44px}

/* =========================== RESEÑAS (fondo oscuro, carrusel propio) =========================== */
.resenas{background:var(--noche);color:#E9F1EC}
.resenas .res-in{display:grid;grid-template-columns:minmax(220px,.34fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;margin-top:clamp(2rem,4vw,3rem)}
#resenas{--rv-acento:var(--verde-vivo);--rv-borde:rgba(34,199,110,.55);--rv-fondo:#102419;--rv-texto:#E9F1EC;--rv-texto-2:rgba(233,241,236,.76);--rv-oscuro:#03100A;--rv-oscuro-texto:#fff;--rv-oscuro-texto-2:rgba(233,241,236,.76);--rv-icono:var(--verde-vivo);--rv-radio:18px;--rv-fuente:var(--f-disp);--rv-fuente-titulo:var(--f-disp);--rv-fuente-ui:var(--f-mono);--rv-panel-texto:#E9F1EC;--rv-panel-acento:var(--verde-vivo)}
#resenas .rev-car .rev .rev-g{width:22px;height:22px;background:none}
#resenas .rev-car .rev .rev-g svg{width:22px;height:22px}
#resenas .rev-car .rev figcaption{padding-right:2.1rem}
#resenas .rev.sk{background:linear-gradient(100deg,#102419 30%,#173022 50%,#102419 70%) 0 0/220% 100%}
#resenas .rev-car .rev blockquote{font:300 1rem/1.5 var(--f-disp);color:inherit;padding:0;border:0;margin:0 0 .7rem}

/* =========================== ACREDITACIONES =========================== */
.acred-in{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.registro{background:var(--papel);border:1px solid var(--linea);border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -45px rgba(12,26,18,.4)}
.reg-head{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.3rem;background:var(--noche);color:#fff;font:500 .62rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.reg-head i{display:inline-flex;align-items:center;gap:.45rem;font-style:normal;color:var(--verde-vivo)}
.reg-head i::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(34,199,110,.6)}70%{box-shadow:0 0 0 9px rgba(34,199,110,0)}100%{box-shadow:0 0 0 0 rgba(34,199,110,0)}}
.reg-body{padding:1.4rem 1.3rem}
.reg-id{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.reg-id b{font:800 clamp(2.6rem,6vw,4rem)/1 var(--f-disp);letter-spacing:-.05em}
.reg-id span{font:600 .68rem var(--f-mono);letter-spacing:.12em;color:var(--tinta);border:1px solid var(--verde);padding:.35rem .6rem;border-radius:999px}
.reg-rows{margin-top:1.2rem;font-size:.93rem}
.reg-rows div{display:grid;grid-template-columns:8.5rem 1fr;gap:1rem;padding:.7rem 0;border-top:1px solid var(--linea)}
.reg-rows dt{font:500 .62rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--niebla);padding-top:.15rem}
.vigencia{margin-top:1.2rem}
.vig-bar{position:relative;height:8px;border-radius:8px;background:var(--linea);overflow:hidden}
.vig-bar i{position:absolute;inset:0 auto 0 0;width:0;background:linear-gradient(90deg,var(--verde-hondo),var(--verde-vivo));border-radius:8px;transition:width 2s var(--ease) .3s}
.registro.in .vig-bar i,.no-js .vig-bar i{width:var(--vig,83%)}
.vig-lbl{display:flex;justify-content:space-between;font:500 .62rem var(--f-mono);color:var(--grafito);margin-top:.4rem}
.reg-foot{padding:1rem 1.3rem;border-top:1px solid var(--linea);display:flex;justify-content:space-between;align-items:center;gap:1rem;font-size:.86rem;color:var(--grafito)}
.reg-foot a{font:600 .82rem var(--f-disp);color:var(--tinta);white-space:nowrap;text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:3px}
.sellos{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:2rem}
.sellos>div{border:1px solid var(--linea);border-radius:16px;padding:1rem;background:var(--papel)}
.sellos b{font:700 1.3rem/1 var(--f-disp);letter-spacing:-.03em;color:var(--verde-hondo)}
.sellos span{display:block;font-size:.84rem;color:var(--grafito);margin-top:.35rem;line-height:1.4}
.sellos small{display:block;font:500 .6rem var(--f-mono);letter-spacing:.06em;color:var(--niebla);margin-top:.45rem}

/* =========================== FAQ (dos columnas en escritorio) =========================== */
.faq-list{border-top:1px solid var(--linea)}
.faq-list--2{border-top:0}
.faq-col{border-top:1px solid var(--linea)}
details.qa{border-bottom:1px solid var(--linea)}
details.qa summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr 34px;gap:1rem;align-items:center;padding:1.15rem 0}
details.qa summary::-webkit-details-marker{display:none}
details.qa summary h3{font-size:1.06rem;font-weight:600;letter-spacing:-.012em;line-height:1.35}
details.qa summary i{width:34px;height:34px;border-radius:50%;border:1px solid var(--linea);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s,border-color .3s}
details.qa summary i::before,details.qa summary i::after{content:"";grid-area:1/1;width:12px;height:1.5px;background:var(--tinta);transition:transform .35s var(--ease)}
details.qa summary i::after{transform:rotate(90deg)}
details.qa[open] summary i{background:var(--verde-hondo);border-color:var(--verde-hondo)}
details.qa[open] summary i::before,details.qa[open] summary i::after{background:#fff}
details.qa[open] summary i::after{transform:rotate(0)}
details.qa summary:hover h3{text-decoration:underline;text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:4px}
.qa-a{padding:0 2.6rem 1.3rem 0;color:var(--grafito);font-size:.98rem}
.qa-a p+p{margin-top:.7rem}
@media (min-width:901px){.faq-list--2{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(2.5rem,4vw,4.5rem);align-items:start}}

/* =========================== CONTACTO / MAPA =========================== */
.contacto{background:var(--noche);color:#E9F1EC;padding:clamp(5rem,11vw,8.5rem) 0 clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.contacto h2{color:#fff;max-width:15ch}
.cto-in{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
.zonas-t{font:500 .64rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--claro-oscuro);margin-top:2rem}
.zonas{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.7rem;list-style:none}
.zonas li{font:500 .74rem var(--f-mono);letter-spacing:.03em;padding:.45rem .75rem;border-radius:999px;border:1px solid rgba(255,255,255,.16);color:rgba(233,241,236,.86)}
.zonas li.hq{background:var(--verde-hondo);border-color:var(--verde-hondo);color:#fff}
.zonas.estados li{border-style:dashed}
.cto-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.2rem}
.mapbox{border-radius:24px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:var(--noche-2)}
.mapbox iframe{display:block;width:100%;height:420px;border:0;filter:grayscale(.35) contrast(1.05);background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='46' viewBox='0 0 34 46'%3E%3Cpath d='M17 1C8.2 1 1 8.1 1 17c0 11.6 16 28 16 28s16-16.4 16-28C33 8.1 25.8 1 17 1z' fill='%2322C76E'/%3E%3Ccircle cx='17' cy='17' r='6.5' fill='%2306120B'/%3E%3C/svg%3E") center/34px 46px no-repeat,linear-gradient(115deg,transparent 47%,rgba(255,255,255,.07) 47.4%,rgba(255,255,255,.07) 49%,transparent 49.4%) 0 0/100% 100%,linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px) 0 0/44px 44px,var(--noche-2)}
.nap{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid rgba(255,255,255,.1)}
.nap>div{padding:1rem 1.1rem;border-left:1px solid rgba(255,255,255,.1);font-size:.9rem;line-height:1.5}
.nap>div:first-child{border-left:0}
.nap dt{font:500 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--verde-vivo);margin-bottom:.3rem}
.nap a,.nap button{color:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;background:none;border:0;cursor:pointer;padding:0;font:inherit;text-align:left}

/* =========================== FOOTER =========================== */
.ft{background:var(--noche);color:rgba(233,241,236,.78);padding:3.5rem 0 6rem;border-top:1px solid rgba(255,255,255,.08)}
.ft-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:2rem}
.ft-t{font:500 .62rem var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--verde-vivo);margin-bottom:.9rem}
.ft ul{list-style:none;font-size:.92rem;line-height:2}
.ft a{text-decoration:none}.ft a:hover{color:#fff;text-decoration:underline}
/* logotipo horizontal del pie, igual que el del encabezado (en claro sobre el fondo oscuro) */
.ft-logo{display:inline-flex;gap:.8rem}
.ft-logo .iso{width:44px;color:var(--verde-vivo)}
.ft-logo .word{width:112px;color:#fff}
.ft-logo .brand-tag{color:var(--claro-oscuro);font-size:.56rem}
.ft a.ft-logo:hover{text-decoration:none}
.ft-brand p{font-size:.88rem;margin-top:1rem;max-width:34ch}
.ft-brand small{display:block;font:500 .62rem/1.6 var(--f-mono);letter-spacing:.06em;color:var(--claro-oscuro);margin-top:.9rem}
.ft-brand .ft-redes{display:flex;gap:.6rem;margin-top:1.2rem}
.ft-redes a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:50%;color:rgba(233,241,236,.85);transition:color .2s,border-color .2s,background-color .2s}
.ft-redes a:hover,.ft-redes a:focus-visible{color:#fff;border-color:var(--verde-vivo);background-color:rgba(255,255,255,.06)}
.ft-redes svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ft-redes .ig-punto{fill:currentColor;stroke:none}
.ft address{font-style:normal;font-size:.92rem;line-height:1.7}
.ft-contact p{font-size:.92rem;margin-top:.6rem;line-height:1.7}
.ft-tel{background:none;border:0;cursor:pointer;color:inherit;font:inherit;text-decoration:underline;text-decoration-color:rgba(255,255,255,.3);text-underline-offset:3px;padding:0}
.ft-tel:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;gap:1rem 2rem;flex-wrap:wrap;margin-top:3rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.08);font-size:.8rem}
.ft-bot nav{display:flex;gap:1.2rem;flex-wrap:wrap}
.ft-credit a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.ft-credit a:hover{color:#fff}

/* =========================== HÉROE DE PÁGINA (genérico) =========================== */
.page-hero{position:relative;padding:calc(var(--hdr) + clamp(1.25rem,min(6vw,7vh),4.5rem)) 0 clamp(3rem,6vw,4.5rem);overflow:hidden}
.page-hero .ph-in{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.page-hero.solo .ph-in{grid-template-columns:minmax(0,1fr) minmax(0,.62fr)}
.ph-card{background:var(--papel);border:1px solid var(--linea);border-radius:22px;padding:1.4rem;box-shadow:0 30px 60px -46px rgba(12,26,18,.35)}
.ph-card dl>div{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-top:1px solid var(--linea);font-size:.93rem}
.ph-card dl>div:first-child{border-top:0;padding-top:0}
.ph-card dt{font:500 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--niebla);padding-top:.2rem}
.ph-card dd{text-align:right;font-weight:500}
.ph-foto{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:4/3.4;margin:0;background:var(--noche)}
.ph-foto img{width:100%;height:100%;object-fit:cover}
.ph-foto figcaption{position:absolute;left:1rem;right:1rem;bottom:1rem;font:500 .62rem/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(6,18,11,.72);padding:.5rem .7rem;border-radius:10px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* =========================== HÉROE MECÁNICA DE SUELOS (de la propuesta 02, en clave 01) =========================== */
.hs{position:relative;height:300vh}
/* misma retícula que el héroe de la home: texto a la izquierda, escena en un panel a la derecha */
.hs-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(2rem,5vw,4.5rem);padding:calc(var(--hdr) + clamp(.5rem,2.6vh,1.25rem)) var(--pad) clamp(.75rem,3vh,2rem);max-width:var(--max);margin:0 auto}
.hs-copy{position:relative;z-index:2}
.hs-copy .crumbs{margin-bottom:1rem}
.hs-viz{position:relative;height:min(74svh,640px);border-radius:28px;background:var(--papel);box-shadow:0 1px 0 var(--linea),0 40px 80px -50px rgba(12,26,18,.35);overflow:hidden;isolation:isolate}
.hs-sheet{position:absolute;top:1rem;left:1rem;right:1rem;z-index:3;display:flex;justify-content:space-between;gap:1rem;font:500 .62rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.hs-sheet span:nth-child(2),.hs-sheet span:nth-child(3){display:none}
.hs-sheet b{color:var(--tinta);font-weight:600}
.cut{position:absolute;left:0;right:0;bottom:0;height:calc(100% - 16rem);z-index:1;--bx:36%}
.sky{position:absolute;left:0;right:0;bottom:100%;height:58%;pointer-events:none}
.sky svg{width:100%;height:100%}
.sky path{fill:none;stroke:var(--tinta);stroke-width:1.2;opacity:.3}
.sky .silla{fill:rgba(12,26,18,.04);opacity:1;stroke-width:1.5}
.ground{position:absolute;inset:0;border-top:2px solid var(--tinta)}
.st{position:absolute;left:0;right:0;border-top:1px solid rgba(12,26,18,.4)}
.st>span{position:absolute;right:1rem;top:.45rem;font:500 .6rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--tinta);padding:.22rem .55rem;border-radius:999px;white-space:nowrap}
.st-1{top:0;height:10%;background:#E7E0CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cg fill='none' stroke='%230C1A12' stroke-opacity='.45' stroke-width='1.1'%3E%3Ccircle cx='7' cy='8' r='2.6'/%3E%3Ccircle cx='23' cy='20' r='3.4'/%3E%3Ccircle cx='27' cy='5' r='1.5'/%3E%3Ccircle cx='11' cy='24' r='1.4'/%3E%3C/g%3E%3C/svg%3E");background-size:34px 30px;border-top:0}
.st-2{top:10%;height:22%;background:#CDBB93 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Cpath d='M2 3.5H13M17 10.5H28' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1.1' fill='none'/%3E%3C/svg%3E");background-size:30px 14px}
.st-3{top:32%;height:28%;background:#3E4A43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='9'%3E%3Cpath d='M0 .5H44' stroke='%23E4F2E8' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M8 5H26' stroke='%23E4F2E8' stroke-opacity='.3' stroke-width='.8'/%3E%3C/svg%3E");background-size:44px 9px}
.st-4{top:60%;height:40%;background:#B8A57E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M.5 0V10M20.5 10V20' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1' fill='none'/%3E%3C/svg%3E");background-size:40px 20px}
.st-3>span{background:rgba(6,18,11,.82);color:#fff}
.bore{position:absolute;top:0;left:var(--bx);width:16px;margin-left:-8px;height:calc(var(--dy,0)*1%);z-index:2}
.bore .hole{position:absolute;inset:0;background:linear-gradient(90deg,#0b140e,#2a3a30 50%,#0b140e);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.bore .bit{position:absolute;left:-4px;right:-4px;bottom:-14px;height:16px;background:var(--verde-vivo);clip-path:polygon(0 0,100% 0,50% 100%)}
.bore .tip{position:absolute;left:24px;bottom:-12px;font:600 .72rem var(--f-mono);white-space:nowrap;color:#fff;background:var(--noche);padding:.25rem .55rem;border-radius:8px;letter-spacing:.03em}
.bore .tip b{color:var(--verde-vivo)}
.rig{position:absolute;bottom:100%;left:var(--bx);width:86px;margin-left:-43px;z-index:3;opacity:calc(1 - var(--bf,0))}
.rig svg{width:100%;height:auto;overflow:visible}
.rig .mast{animation:vib .09s linear infinite alternate;animation-play-state:var(--vib,paused)}
@keyframes vib{to{transform:translateX(.8px)}}
.samples{position:absolute;left:calc(var(--bx) - 8.5rem);top:0;width:7.5rem;height:100%;z-index:2;pointer-events:none}
.core{position:absolute;right:0;width:2.4rem;height:.8rem;border-radius:.4rem;background:linear-gradient(180deg,rgba(255,255,255,.25),rgba(0,0,0,.25)),var(--c,#C9A57D);box-shadow:0 2px 4px rgba(0,0,0,.25);transform:translateX(40px) scale(.6);opacity:0;transition:transform .5s var(--ease),opacity .3s}
.core.on{transform:none;opacity:1}
.core i{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);font:600 .58rem var(--f-mono);font-style:normal;white-space:nowrap;color:#fff;background:rgba(6,18,11,.8);padding:.1rem .35rem;border-radius:6px}
.building{position:absolute;bottom:100%;left:var(--bx);width:min(170px,30%);transform:translateX(-50%);z-index:2;clip-path:inset(calc((1 - var(--bb,0))*100%) 0 0 0);pointer-events:none}
.building svg{width:100%;height:auto;overflow:visible}
.piles{position:absolute;top:0;left:var(--bx);width:min(145px,26%);transform:translateX(-50%);height:24%;z-index:2;clip-path:inset(0 0 calc((1 - var(--bp,0))*100%) 0)}
.piles i{position:absolute;top:0;bottom:0;width:10px;background:#9AA39C;border:1px solid var(--tinta);border-radius:2px}
.piles i:nth-child(1){left:6%}.piles i:nth-child(2){left:36%}.piles i:nth-child(3){left:62%}.piles i:nth-child(4){right:6%}
.splog,.reco{position:absolute;z-index:5;right:1rem;top:2.8rem;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--linea);border-radius:18px;box-shadow:0 30px 60px -40px rgba(12,26,18,.4)}
.splog{width:min(260px,46%);font:500 .7rem var(--f-mono);opacity:calc(1 - var(--bb,0))}
.splog header{display:flex;justify-content:space-between;padding:.65rem .9rem;border-bottom:1px solid var(--linea);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-size:.6rem;color:var(--grafito)}
.splog ol{list-style:none;padding:.4rem .9rem .7rem}
.splog li{display:grid;grid-template-columns:3.6rem 1fr 2.4rem;align-items:center;gap:.5rem;padding:.2rem 0;opacity:.2;transition:opacity .3s}
.splog li.on{opacity:1}
.splog li s{display:block;height:7px;border-radius:4px;background:var(--tinta);width:calc(var(--n)*2%);text-decoration:none;transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease)}
.splog li.on s{transform:none}
.splog li.ref s{background:var(--verde)}
.splog li em{font-style:normal;text-align:right;font-weight:600}
.reco{width:min(280px,48%);padding:1.1rem 1.2rem;font-size:.9rem;line-height:1.5;opacity:var(--bb,0);transform:translateY(calc((1 - var(--bb,0))*20px));color:var(--grafito)}
.reco b{display:block;font:700 1.35rem/1.1 var(--f-disp);letter-spacing:-.02em;color:var(--tinta);margin-bottom:.45rem}
.reco .ok{display:block;margin-top:.5rem;font:600 .64rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--tinta)}
.reco .ej{display:block;margin-top:.35rem;font:500 .56rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--niebla)}

/* =========================== HÉROE LABORATORIO DE CONCRETO (de la propuesta 03, en clave 01) =========================== */
.hp{position:relative;height:320vh;background:var(--lab);color:var(--tinta)}
.hp-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:center;gap:clamp(2rem,5vw,4.5rem);padding:calc(var(--hdr) + 1rem) var(--pad) 8.4rem;max-width:var(--max);margin:0 auto}
.hp-stage::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(12,26,18,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);-webkit-mask-image:radial-gradient(ellipse at 70% 50%,#000 20%,transparent 75%);pointer-events:none}
.hp-stage.fail{animation:shake .5s cubic-bezier(.36,.07,.19,.97) both}
@keyframes shake{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(4px,-2px,0)}30%,50%,70%{transform:translate3d(-7px,2px,0)}40%,60%{transform:translate3d(7px,-1px,0)}}
.flash{position:absolute;inset:0;background:var(--tinta);opacity:0;pointer-events:none;z-index:6}
.hp-stage.fail .flash{animation:flash .5s ease-out}
@keyframes flash{0%{opacity:.08}100%{opacity:0}}
.hp-copy{position:relative;z-index:3}
.press-wrap{position:relative;height:100%;max-height:600px;align-self:center;min-height:0}
#press{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
#press .steel{fill:url(#steel)}
#press .steel-d{fill:#2E3A33}
#press .bolt{fill:#0C1D13;stroke:#5F6B64;stroke-width:1.5}
#press text{font:600 9px var(--f-mono);fill:var(--claro-oscuro)}
.hp-readout{position:absolute;z-index:4;left:var(--pad);right:var(--pad);bottom:1.4rem;max-width:calc(var(--max) - 2*var(--pad));margin:0 auto;display:grid;grid-template-columns:auto auto auto 1fr;border:1px solid var(--linea);background:var(--papel);border-radius:18px;overflow:hidden;box-shadow:0 30px 60px -46px rgba(12,26,18,.35)}
.hp-readout .ro{padding:.75rem 1.1rem;border-left:1px solid var(--linea);min-width:0}
.hp-readout .ro:first-child{border-left:0}
.hp-readout .k{display:block;font:500 .58rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafito)}
.hp-readout .v{display:block;font:600 1.55rem/1.15 var(--f-mono);color:var(--tinta);font-variant-numeric:tabular-nums;letter-spacing:-.02em;white-space:nowrap}
.hp-readout .v small{font-size:.62rem;color:var(--grafito);margin-left:.25rem;font-weight:500}
.hp-readout .graph{display:flex;align-items:center;gap:1rem}
.hp-readout .graph svg{width:100%;height:46px;overflow:visible}
.hp-readout .graph path.c{fill:none;stroke:var(--verde);stroke-width:2}
.hp-readout .graph path.ax{fill:none;stroke:rgba(12,26,18,.18);stroke-width:1}
.verdict{font:600 .68rem/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grafito);white-space:nowrap}
.verdict b{display:block;font-size:.92rem;color:var(--tinta)}
.hp-stage.broken .verdict b{color:var(--verde-hondo)}
.spec-tag{position:absolute;z-index:4;right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));top:calc(var(--hdr) + 1.2rem);text-align:right;font:500 .6rem/1.7 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.spec-tag b{color:var(--tinta);font-weight:600}
.hp .scroll-hint{left:50%;transform:translateX(-50%);bottom:6.6rem;opacity:calc(1 - var(--hp,0)*6)}

/* =========================== HÉROE COMPACTACIÓN (curva Proctor) =========================== */
.proctor{position:relative;background:var(--papel);border:1px solid var(--linea);border-radius:24px;padding:1.2rem 1.3rem 1.3rem;box-shadow:0 40px 80px -55px rgba(12,26,18,.4)}
.proctor-head{display:flex;justify-content:space-between;gap:1rem;font:500 .6rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito);margin-bottom:.6rem}
.proctor-head b{color:var(--tinta);font-weight:600}
#proctor-svg{width:100%;height:auto;overflow:visible}
#proctor-svg .grid line{stroke:rgba(12,26,18,.07)}
#proctor-svg text{font:500 8px var(--f-mono);fill:var(--grafito)}
#proctor-svg .crv{fill:none;stroke:var(--verde);stroke-width:2.6;stroke-linecap:round}
#proctor-svg .pt{fill:#fff;stroke:var(--tinta);stroke-width:1.6}
#proctor-svg .opt{stroke:var(--verde);stroke-dasharray:3 4;stroke-width:1.2}
#proctor-svg .campo{fill:var(--verde-vivo);stroke:#fff;stroke-width:2}
.proctor-ro{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin-top:.9rem}
.proctor-ro div{background:var(--lab);border-radius:12px;padding:.55rem .7rem}
.proctor-ro dt{font:500 .54rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--niebla)}
.proctor-ro dd{font:600 1.05rem var(--f-mono);font-variant-numeric:tabular-nums}
.proctor-ro dd small{font-size:.6rem;color:var(--grafito);margin-left:.15rem}
.proctor-ro .ok dd{color:var(--tinta)}
.proctor .ej{display:block;margin-top:.7rem;font:500 .56rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--niebla)}

/* =========================== GALERÍA SIMPLE =========================== */
.fotos{display:grid;grid-template-columns:1.25fr 1fr;gap:1rem}
.fotos .shot{min-height:300px}
.fotos .shot.alta{grid-row:span 2;min-height:520px}

/* =========================== LEGALES =========================== */
.legal-in{display:grid;grid-template-columns:minmax(0,.55fr) minmax(0,1.45fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.legal-in nav{position:sticky;top:110px;font-size:.9rem}
.legal-in nav p{font:500 .62rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--niebla);margin-bottom:.7rem}
.legal-in nav ol{list-style:none;display:grid;gap:.45rem}
.legal-in nav a{color:var(--grafito);text-decoration:none}
.legal-in nav a:hover{color:var(--tinta);text-decoration:underline;text-decoration-color:var(--verde)}
.legal{max-width:76ch}
.legal h2{font-size:1.45rem;margin:2.4rem 0 .8rem;letter-spacing:-.02em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--grafito)}
.legal p+p,.legal p+ul,.legal ul+p{margin-top:.8rem}
.legal ul{padding-left:1.2rem;display:grid;gap:.4rem}
.legal a{color:var(--tinta);text-decoration-color:var(--verde);text-decoration-thickness:2px;text-underline-offset:3px}
.legal .act{font:500 .7rem var(--f-mono);letter-spacing:.08em;color:var(--niebla);text-transform:uppercase}

/* =========================== 404 =========================== */
.e404{min-height:100svh;display:grid;align-items:center;padding:calc(var(--hdr) + 3rem) 0 4rem}
.e404 .h1-main{font-size:clamp(2rem,4.4vw,3.4rem);margin-top:1rem;max-width:16ch}
.e404 .code{font:800 clamp(5rem,16vw,11rem)/.9 var(--f-disp);letter-spacing:-.06em;color:var(--verde)}

/* =========================== BOTONES FLOTANTES Y MODALES (botones-conversion) =========================== */
.floating-wa-btn{position:fixed;bottom:28px;right:28px;width:64px;height:64px;padding:0;background:var(--verde);border:2px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 10px 26px rgba(0,103,44,.4);z-index:2000;cursor:pointer;animation:wa-float 4s ease-in-out infinite;transition:transform .3s ease,opacity .3s}
.floating-wa-btn:hover{transform:scale(1.1)}
.floating-wa-btn:focus-visible,.floating-call-btn:focus-visible{outline:3px solid var(--tinta);outline-offset:3px}
@keyframes wa-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.wa-icon{width:35px;height:35px;object-fit:contain}
.floating-call-btn{display:none;position:fixed;bottom:28px;left:22px;width:58px;height:58px;padding:0;background:var(--noche);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;box-shadow:0 8px 20px rgba(6,18,11,.35);z-index:2000;cursor:pointer;transition:transform .3s ease,opacity .3s}
.floating-call-btn:hover{transform:scale(1.1)}
.menu-open .floating-wa-btn,.menu-open .floating-call-btn{opacity:0;pointer-events:none}
.wa-modal,.call-modal{display:none;position:fixed;inset:0;z-index:2100;justify-content:center;align-items:center;padding:1rem;background:rgba(6,18,11,.66);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);overflow-y:auto}
.wa-modal.active,.call-modal.active{display:flex}
.wa-modal-content,.call-modal-content{position:relative;width:100%;max-width:450px;margin:auto;background:var(--papel);color:var(--tinta);border-radius:24px;box-shadow:0 40px 90px rgba(6,18,11,.45);animation:modalIn .35s var(--ease);overflow:hidden}
.wa-modal-content::before,.call-modal-content::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:linear-gradient(90deg,var(--verde),var(--verde-vivo))}
@keyframes modalIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}
.wa-modal-content{padding:1.9rem 1.6rem 1.6rem}
.wa-modal-close{position:absolute;top:.9rem;right:.9rem;width:40px;height:40px;border:1px solid var(--linea);border-radius:50%;background:var(--papel);color:var(--tinta);font-size:1.4rem;line-height:1;cursor:pointer}
.wa-modal-close:hover{border-color:var(--verde);color:var(--tinta)}
.wa-modal-content h2,.call-modal-content h2{font-size:1.55rem;letter-spacing:-.025em;padding-right:2.6rem}
.wa-modal-content>p{margin:.55rem 0 1.2rem;font-size:.95rem;color:var(--grafito)}
.form-group{margin-bottom:.95rem}
.form-group label{display:block;margin-bottom:.4rem;font:500 .66rem/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.form-group input,.form-group select,.form-group textarea{width:100%;font:400 1rem var(--f-disp);padding:.8rem .9rem;border:1.5px solid var(--linea);border-radius:12px;background:var(--lab);color:var(--tinta);transition:border-color .2s,box-shadow .2s}
.form-group textarea{min-height:76px;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--verde);outline:none;box-shadow:0 0 0 3px rgba(0,143,62,.18);background:#fff}
.form-group.is-invalid label{color:#B42318}
.form-group.is-invalid input,.form-group.is-invalid select{border-color:#D92D20!important;box-shadow:0 0 0 3px rgba(217,45,32,.14);animation:fieldShake .35s cubic-bezier(.36,.07,.19,.97) both}
.form-error{display:none;font-size:.8rem;color:#B42318;margin-top:.35rem}
.form-group.is-invalid .form-error{display:block}
@keyframes fieldShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
.btn-wa-submit{width:100%;margin-top:.4rem}
.m-legal{font-size:.8rem;color:var(--grafito);margin:.9rem 0 0;line-height:1.5}
.m-legal a{color:var(--tinta);text-decoration-color:var(--verde)}
.call-modal-content{padding:2.2rem 1.7rem 1.7rem;text-align:center;max-width:400px}
.call-modal-content h2{padding-right:0}
.call-num{font:600 1.7rem var(--f-mono);letter-spacing:-.01em;color:var(--verde-hondo);margin:.7rem 0 .2rem}
.modal-subtitle{color:var(--grafito);font-size:.93rem;margin-bottom:1.5rem}
.call-modal-buttons{display:flex;flex-direction:column;gap:.7rem}
.btn-call-cancel{background:none;border:0;color:var(--grafito);padding:.7rem;cursor:pointer;font:500 .92rem var(--f-disp);text-decoration:underline;text-decoration-color:var(--linea);text-underline-offset:4px;transition:color .2s,text-decoration-color .2s}
.btn-call-cancel:hover{color:var(--tinta);text-decoration-color:var(--verde)}

/* =========================== RESPONSIVE =========================== */
.creds-in>*,.cards>*,.cifras-in>*,.obra-grid>*,.ft-in>*,.nap>*,.pasa>*,.sellos>*,.firma-in>*,.acred-in>*,.cto-in>*,.split-media>*,.hero-stage>*,.granu-stage>*,.cus-stage>*,.porque-in>*,.razones>*,.pasos>*,.rel>*,.ph-in>*,.hp-stage>*,.legal-in>*,.res-in>*{min-width:0}
@media (max-width:1180px){.hdr-tel{display:none}.nav{gap:1.1rem}.nav a{font-size:.84rem}}
@media (max-width:1024px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .pasos{grid-template-columns:repeat(2,1fr)}
  .rel{grid-template-columns:1fr 1fr}
}
@media (max-width:980px){.nav{display:none}.burger{display:flex}}
@media (max-width:900px){
  .hero{height:210vh}
  .hero-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:1rem;padding:88px var(--pad) 5.9rem}
  .hero .h1-main,.page-hero .h1-main,.hs .h1-main,.hp .h1-main,.hc .h1-main{font-size:clamp(2.05rem,8.2vw,3.1rem);margin:.8rem 0 .6rem;max-width:15ch}
  .hero .lead,.page-hero .lead,.hs .lead,.hp .lead,.hc .lead{font-size:.95rem;max-width:44ch}
  .page-hero{padding-top:88px}
  .lead-d{display:none}.lead-m{display:block}
  .hero-btns{margin-top:1rem}
  .hero-viz{height:auto;min-height:0;align-self:stretch;border-radius:22px}
  .hero .scroll-hint{display:none}
  .readout{padding:.7rem .8rem;bottom:.7rem;left:.7rem;right:.7rem}
  .ro-cell .v{display:block;font-size:1rem}
  .viz-tag{top:.8rem;left:.9rem;right:.9rem}
  .stamp{top:2.5rem;right:.9rem;font-size:.66rem}
  .firma-in,.acred-in,.cto-in,.split-media,.porque-in,.page-hero .ph-in,.page-hero.solo .ph-in,.legal-in{grid-template-columns:1fr}
  .split-media>figure,.split-media>aside{margin-top:1.6rem}
  .legal-in nav{position:relative;top:0}
  .scanframe{aspect-ratio:4/5;max-height:72svh;width:100%}
  .granu{height:280vh}
  .granu-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:'copy' 'sieve' 'curve';row-gap:.6rem;align-items:stretch;padding:84px var(--pad) 4.4rem}
  .granu-big{font-size:clamp(1.6rem,6.6vw,2.4rem);margin:.6rem 0 .4rem}
  .granu .lead{display:none}
  .curve-card{padding:.7rem .8rem .8rem}
  .curve-head{gap:.5rem;white-space:nowrap;letter-spacing:.08em}
  .pasa{display:none}
  .sucs{margin-top:.35rem;font-size:.56rem;gap:.5rem}.sucs b{font-size:1rem;padding:.15rem .5rem}
  .custodia{height:280vh}
  .cus-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;gap:.6rem;align-items:start;padding:84px var(--pad) 4.4rem}
  .cus-copy h2{font-size:clamp(1.6rem,6.6vw,2.4rem)}
  .cus-copy .lead{display:none}
  .cus-steps{margin-top:.9rem}
  .js .cus-steps li{display:none;border-top:0;padding:.2rem 0;grid-template-columns:2.6rem 1fr}
  .js .cus-steps li.cur{display:grid;opacity:1}
  .tag-wrap{align-content:center}
  .etiqueta{width:min(300px,68vw)}
  .sello{width:80px;height:80px;font-size:.48rem;border-width:2px}.s4{width:90px;height:90px}
  .s1{top:63%;left:4%}.s2{top:61%;right:4%}.s3{bottom:3%;left:12%}.s4{bottom:4%;right:8%}
  .et-rows{font-size:.62rem;line-height:1.9}.et-head{padding-top:1.1rem}
  .obra-grid{grid-template-columns:1fr 1fr}
  .sh-a{grid-column:1/-1;grid-row:auto;min-height:300px}
  .sh-b,.sh-c,.sh-d{grid-column:auto;grid-row:auto;min-height:220px}
  .sh-d{grid-column:1/-1}
  .dato-obra{grid-column:1/-1;grid-row:auto}
  .clientes{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .logos{gap:1.3rem 2rem}.logos img{height:28px}.logos .lg-alto{height:38px}
  .resenas .res-in{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr 1fr}
  .mapbox iframe{height:360px}
  .cta-band{grid-template-columns:1fr}
  .cta-band .btn-row{justify-content:flex-start}
  .dos-col{columns:1}
  .razones,.razones.cuatro{grid-template-columns:1fr 1fr}
  .razones.tres{grid-template-columns:1fr}
  .fotos{grid-template-columns:1fr}
  .fotos .shot.alta{grid-row:auto;min-height:340px}
  /* héroe de suelos en celular */
  .hs{height:250vh}
  .hs-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:1rem;padding:88px var(--pad) 5.9rem}
  .hs-copy .crumbs{margin-bottom:.6rem}
  .hs-viz{height:auto;min-height:0;align-self:stretch;border-radius:22px}
  .hs-sheet{font-size:.52rem}
  .hs-sheet span:nth-child(n+2){display:none}
  .cut{--bx:50%;height:60%}
  .sky{height:44%}
  .samples,.splog{display:none}
  .st>span{font-size:.5rem;right:.6rem}
  .st-2>span,.st-4>span{top:auto;bottom:.4rem}
  .bore .tip{font-size:.6rem;left:20px}
  .reco{left:.8rem;right:.8rem;top:auto;bottom:.8rem;width:auto;font-size:.84rem;opacity:calc(var(--bb,0)*2.2 - 1.2)}
  .reco b{font-size:1.15rem}
  .building{width:34%}.piles{width:29%}
  .rig{width:62px;margin-left:-31px}
  .hs .scroll-hint{display:none}
  /* héroe de concreto en celular */
  .hp{height:260vh}
  .hp-stage{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-items:start;gap:0;padding:calc(var(--hdr) + .6rem) var(--pad) 10.4rem}
  .press-wrap{height:100%;max-height:none}
  .spec-tag{display:none}
  .hp-readout{grid-template-columns:1fr 1fr;bottom:5.9rem;left:var(--pad);right:var(--pad)}
  .hp-readout .ro{padding:.55rem .75rem}
  .hp-readout .ro:nth-child(3){border-left:0;border-top:1px solid var(--linea)}
  .hp-readout .ro:nth-child(4){border-top:1px solid var(--linea)}
  .hp-readout .v{display:block;font-size:1.12rem}
  .hp-readout .graph svg{display:none}
  .verdict{font-size:.56rem;white-space:normal}.verdict b{font-size:.74rem}
  .hp .scroll-hint{display:none}
}
@media (max-width:720px){:root{--pad:1.25rem}}
@media (max-width:640px){
  .hdr .hdr-cta .btn{display:none} /* en celular WhatsApp ya está en el botón flotante y en el menú (Alberto, 2026-10-27) */
  .brand .word{width:74px}
  .hero-btns .btn{width:100%}
  .cards{grid-template-columns:1fr}
  .card{min-height:0}
  .cifras-in{grid-template-columns:1fr 1fr;gap:2rem 1rem}.cifra:last-child{grid-column:1/-1}
  .ficha-row{grid-template-columns:2rem 1fr}
  .ficha-row .nrm{grid-column:2;text-align:left;margin-top:-.4rem}
  .firma-cta .btn,.cto-btns .btn,.cta-band .btn{width:100%}
  .nap{grid-template-columns:1fr}.nap>div{border-left:0;border-top:1px solid rgba(255,255,255,.1)}.nap>div:first-child{border-top:0}
  .mapbox iframe{height:300px}
  .reg-rows div{grid-template-columns:1fr;gap:.15rem}
  .sellos{grid-template-columns:1fr}
  .ft-in{grid-template-columns:1fr}
  .pasos,.pasos.tres,.rel,.razones,.razones.cuatro,.razones.tres{grid-template-columns:1fr}
  .ficha.art .ficha-row{grid-template-columns:1fr}.ficha.art .ficha-row .nrm{grid-column:1}
  .proctor-ro{grid-template-columns:1fr 1fr 1fr}
  .floating-call-btn{display:flex;bottom:20px;left:16px}
  .floating-wa-btn{bottom:20px;right:16px}
  .tabla th,.tabla td{padding:.75rem .8rem}
  .tabla.alcance thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabla.alcance tbody,.tabla.alcance tr,.tabla.alcance td{display:block}
  .tabla.alcance tr{border-bottom:1px solid var(--linea)}
  .tabla.alcance tr:last-child{border-bottom:0}
  .tabla.alcance td{border:0;padding:0 1rem}
  .tabla.alcance td[rowspan]{padding:.6rem 1rem;background:var(--lab);border-bottom:1px solid var(--linea);font:500 .7rem/1.35 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
  .tabla.alcance td:nth-last-child(2){padding-top:.8rem}
  .tabla.alcance td:last-child{padding:.3rem 1rem .8rem;color:var(--grafito)}
}
@media (max-width:480px){
  :root{--pad:1.1rem}
  .eyebrow,.h1-top{font-size:.62rem;letter-spacing:.1em}
  .ro-state>span:last-child,.viz-tag span:last-child{display:none}
  .ro-state{font-size:.56rem}
  .hero .h1-main,.page-hero .h1-main,.hs .h1-main,.hp .h1-main,.hc .h1-main{font-size:clamp(1.9rem,8.8vw,2.5rem)}
  .readout{gap:.3rem .5rem}
  .ro-cell .k{display:block;font-size:.5rem}.ro-cell .v{display:block;font-size:.9rem}
  .obra-grid{grid-template-columns:1fr}
  .sh-b,.sh-c{grid-column:1/-1}
  .reg-foot{flex-direction:column;align-items:flex-start}
  .qa-a{padding-right:0}
}
@media (max-height:760px) and (min-width:901px){.spec-tag{display:none}.hero .scroll-hint,.hs .scroll-hint,.hc .scroll-hint{display:none}}
@media (max-height:700px) and (min-width:901px){.hp-stage{padding-top:calc(var(--hdr) + .1rem);padding-bottom:6.6rem}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .hero,.granu,.custodia,.hs,.hp{height:auto}
  .hero-stage,.granu-stage,.cus-stage,.hs-stage,.hp-stage{position:relative;height:auto;min-height:100svh}
  .floating-wa-btn{animation:none}
}


/* =====================================================================
   RAPTOR LIB 20 — HILO CONDUCTOR (LÍNEA DE ETAPAS) QUE SE DIBUJA CON EL SCROLL
   Origen: Ozetta Fumigaciones, propuesta 02 «Protocolo MIP» (2026-10-04),
   diagrama «Protocolo MIP · 4 etapas». Horizontal en escritorio, vertical en celular.
   Tokens a adaptar: el bloque :where(.etapas) de abajo.
   ===================================================================== */
:where(.etapas) {
  --et-tarjeta: #FFFFFF;
  --et-borde: #DCE3DD;
  --et-acento: #008F3E;            /* verde Layen: línea, punto guía e icono encendido */
  --et-acento-rgb: 0, 143, 62;
  --et-acento-texto: #0C1A12;      /* texto chico en tinta: no se inventa un verde (regla de marca) */
  --et-nodo-on: #0C1A12;
  --et-ok: #22C76E;
  --et-texto: #0C1A12;
  --et-texto-2: #56635B;
  --et-gris: #5E6A62;
  --et-display: 'Geologica', system-ui, sans-serif;
  --et-body: 'Geologica', system-ui, sans-serif;
  --et-mono: 'Azeret Mono', ui-monospace, monospace;
  --et-nodo: 60px;
  --et-radio: 14px;
  --et-cols: 4;
}

.etapas { background: var(--et-tarjeta); border: 1px solid var(--et-borde); border-radius: calc(var(--et-radio) + 2px); padding: clamp(1.4rem, 3vw, 2.5rem); }
.etapas__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; padding-bottom: 1.5rem; margin-bottom: 2rem; border-bottom: 1px solid var(--et-borde); }
.etapas__head h3 { margin: 0; font: 600 clamp(1.45rem, 1rem + 1.4vw, 2.2rem)/1.15 var(--et-display); letter-spacing: -.025em; color: var(--et-texto); }
.etapas__head p { margin: .4rem 0 0; max-width: 62ch; color: var(--et-texto-2); font: 400 .95rem/1.65 var(--et-body); }
.etapas__meter { min-width: 210px; font: 500 .66rem/1 var(--et-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--et-gris); }
.etapas__meter b { display: block; margin-top: .45rem; font: 600 2rem/1 var(--et-display); letter-spacing: -.03em; color: var(--et-texto); font-variant-numeric: tabular-nums; }
.etapas__meter small { font: 500 .9rem var(--et-mono); color: var(--et-acento-texto); }

.etapas__flow { position: relative; display: grid; grid-template-columns: repeat(var(--et-cols), minmax(0, 1fr)); }
.etapas__svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.etapas__base { fill: none; stroke: var(--et-borde); stroke-width: 2; stroke-dasharray: 4 5; }
.etapas__line { fill: none; stroke: var(--et-acento); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.etapas__dot { fill: var(--et-acento); opacity: 0; transition: opacity .3s; }

.etapa { position: relative; padding: 0 1.6rem 0 0; font-family: var(--et-body); }
.etapa__mk {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: var(--et-nodo); height: var(--et-nodo); border: 1px solid var(--et-borde); border-radius: var(--et-radio);
  background: var(--et-tarjeta); color: var(--et-texto-2);
  transition: background-color .5s, border-color .5s, color .5s, box-shadow .5s;
}
.etapa__mk svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.etapa__code { display: flex; align-items: center; gap: .5rem; margin-top: 1.3rem; font: 500 .64rem/1 var(--et-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--et-gris); transition: color .4s; }
.etapa__code i { width: 6px; height: 6px; border-radius: 50%; background: var(--et-borde); transition: background-color .4s; }
.etapa h4 { margin: .6rem 0 0; font: 600 1.28rem/1.2 var(--et-display); color: var(--et-texto); }
.etapa p { margin: .55rem 0 0; font-size: .92rem; line-height: 1.6; color: var(--et-texto-2); }
.etapa__dl { margin-top: .85rem !important; padding-top: .75rem; border-top: 1px dashed var(--et-borde); font: 500 .62rem/1.45 var(--et-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--et-gris) !important; }
.etapa__dl b { display: block; font-weight: 500; color: var(--et-texto); }

/* Encendido: lo pone el JS al pasar la línea. Sin JS (o con movimiento reducido) todo queda encendido. */
.etapa.on .etapa__mk,
.etapas:not(.etapas--vivo) .etapa__mk { background: var(--et-nodo-on); border-color: var(--et-nodo-on); color: var(--et-acento); box-shadow: 0 0 0 6px rgba(var(--et-acento-rgb), .12); }
.etapa.on .etapa__code,
.etapas:not(.etapas--vivo) .etapa__code { color: var(--et-acento-texto); }
.etapa.on .etapa__code i,
.etapas:not(.etapas--vivo) .etapa__code i { background: var(--et-ok); }

/* Iconos con animación contextual (Snippet 03 del playbook): solo cuando el nodo está encendido */
@media (prefers-reduced-motion: no-preference) {
  .etapa.on .ga { animation: var(--an) var(--dur, 2.4s) ease-in-out var(--del, 0s) infinite; }
  @keyframes et-lupa { 0%,100% { transform: translate(0,0) scale(1) } 25% { transform: translate(2px,-2px) scale(1.08) } 50% { transform: translate(0,2px) scale(1) } 75% { transform: translate(-2px,-1px) scale(1.08) } }
  @keyframes et-trazo { 0% { stroke-dashoffset: 1 } 45%,100% { stroke-dashoffset: 0 } }
  @keyframes et-pulso { 0% { transform: scale(.5); opacity: 1 } 100% { transform: scale(1.6); opacity: 0 } }
  @keyframes et-giro { to { transform: rotate(360deg) } }
}

/* Celular: la misma línea pasa a vertical y conecta un icono con el siguiente */
@media (max-width: 900px) {
  .etapas__flow { grid-template-columns: 1fr; gap: 2rem; }
  .etapa { display: grid; grid-template-columns: var(--et-nodo) minmax(0, 1fr); column-gap: 1.3rem; padding: 0; }
  .etapa__mk { grid-row: 1 / span 5; }
  .etapa__code { margin-top: .2rem; }
}
@media (max-width: 480px) {
  .etapas__meter { min-width: 0; }
}

/* =====================================================================
   RAPTOR LIB 23 — CINTA DE CLIENTES (marquee doble que acelera con el scroll · textos o logotipos)
   Origen: Ozetta Fumigaciones, propuesta 01 «Fuerza Ozetta» (2026-10-04), muro de clientes.
   Tokens a adaptar: :where(.cinta).
   ===================================================================== */
:where(.cinta) {
  --ci-texto: #0C1A12;
  --ci-contorno: rgba(12, 26, 18, .52);   /* .42 daba 2.66:1 en Lighthouse; .52 = 3.5:1 (texto grande pide 3:1) */
  --ci-hover: #008F3E;
  --ci-display: 'Geologica', system-ui, sans-serif;
  --ci-peso: 800;
  --ci-tamano: clamp(1.8rem, 4.6vw, 3.6rem);
  --ci-hueco: clamp(1.2rem, 2.6vw, 2.4rem);
  --ci-separador: url("../img/isotipo-layen.svg");
  --ci-fade: 8%;
  --ci-logo-alto: clamp(2.2rem, 5vw, 4.2rem);
  --ci-logo-filtro: brightness(0);
  --ci-logo-opacidad: .72;
}

.cinta { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 var(--ci-fade), #000 calc(100% - var(--ci-fade)), transparent); mask-image: linear-gradient(90deg, transparent, #000 var(--ci-fade), #000 calc(100% - var(--ci-fade)), transparent); }
.cinta + .cinta { margin-top: .4rem; }
.cinta__track { display: flex; width: max-content; will-change: transform; }
.cinta__set { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.cinta__set > * {
  display: inline-flex; align-items: center; gap: var(--ci-hueco); padding-right: var(--ci-hueco);
  font: var(--ci-peso) var(--ci-tamano)/1.08 var(--ci-display); text-transform: uppercase; white-space: nowrap; letter-spacing: -.005em;
  color: var(--ci-texto); transition: color .35s, -webkit-text-stroke-color .35s;
}
/* Separador: isotipo de la marca (o punto del acento si no hay isotipo) */
.cinta__set > *::after {
  content: ""; width: .34em; height: .4em; flex: none; opacity: .9;
  background: var(--ci-separador) center / contain no-repeat;
}
.cinta[data-sep="punto"] .cinta__set > *::after { width: .18em; height: .18em; border-radius: 50%; background: var(--ci-hover); }
.cinta__set > .o { color: transparent; -webkit-text-stroke: 1.5px var(--ci-contorno); }   /* contorno: 1 de cada 2 */
@media (hover: hover) {
  .cinta__set > *:hover { color: var(--ci-hover); -webkit-text-stroke-color: var(--ci-hover); }
}
/* ---- VARIANTE LOGOTIPOS: <span class="logo"><img src="img/clientes/x.svg" alt="Nombre"></span> ----
   Se pueden mezclar con nombres de texto en la misma franja. Todos en UNA tinta (blanco sobre oscuro,
   tinta sobre claro) para que ninguna marca grite más que otra; al pasar el mouse, su color original. */
.cinta__set > .logo { line-height: 0; }
.cinta__set > .logo img {
  display: block; height: var(--ci-logo-alto); width: auto; max-width: 14em; object-fit: contain;
  filter: var(--ci-logo-filtro); opacity: var(--ci-logo-opacidad);
  transition: filter .4s, opacity .4s;
}
.cinta__set > .logo.o img { opacity: calc(var(--ci-logo-opacidad) * .6); }   /* «contorno» de los logos = más tenue */
@media (hover: hover) {
  .cinta__set > .logo:hover img { filter: none; opacity: 1; }
}
.cinta:not(.cinta--viva) .cinta__set > .logo img { height: calc(var(--ci-logo-alto) * .75); }

/* Lista para lectores de pantalla (la genera el JS si no existe) */
.cinta-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Sin JS o con movimiento reducido: un muro estático que envuelve en renglones */
.cinta:not(.cinta--viva) { -webkit-mask-image: none; mask-image: none; }
.cinta:not(.cinta--viva) .cinta__track { width: auto; }
.cinta:not(.cinta--viva) .cinta__set { flex-wrap: wrap; justify-content: center; padding-inline: 1rem; }
.cinta:not(.cinta--viva) .cinta__set > * { font-size: clamp(1.8rem, 4vw, 3.2rem); }
.cinta:not(.cinta--viva) + .cinta:not(.cinta--viva) { display: none; }   /* la 2.ª fila repite la 1.ª */

@media (max-width: 640px) {
  :where(.cinta) { --ci-fade: 5%; }
}
/* cinta de pruebas acreditadas en la home */
.cinta-sec{overflow:hidden;padding-bottom:clamp(3rem,6vw,4.5rem)}
.cinta-sec .tit{margin-bottom:clamp(1.4rem,3vw,2.2rem)}
.cinta-pie{margin-top:clamp(1.4rem,3vw,2rem)}
/* proyectos: fichas de obra (mismo lenguaje que .razon y .dato-obra de la home) */
.obras-lista{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.obra-ficha{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1.5rem 1.4rem}
.sec.white .obra-ficha{background:var(--lab)}
.obra-ficha h3{font-size:1.3rem;letter-spacing:-.02em;margin:.45rem 0 .75rem}
.obra-ficha p:not(.eyebrow){font-size:.95rem;color:var(--grafito);max-width:60ch}
.obra-ficha p+p{margin-top:.4rem}
.obra-ficha p b{color:var(--tinta);font-weight:600}
.obra-links{display:flex;flex-wrap:wrap;gap:.6rem 1.4rem;margin-top:1rem!important}
.cifras-mini{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.cifras-mini div{background:var(--menta);border-radius:20px;padding:1.3rem}
.cifras-mini b,.cifras-mini .odo{display:flex;font:700 2.2rem/1 var(--f-disp);letter-spacing:-.04em;color:var(--verde-hondo)}
.cifras-mini span{display:block;font-size:.9rem;color:var(--grafito);margin-top:.5rem}
@media (max-width:900px){.obras-lista,.cifras-mini{grid-template-columns:1fr}}
/* iconos extra del Hilo Conductor de Layen (Snippet 03: cada icono anima su función) */
@media (prefers-reduced-motion:no-preference){
  @keyframes et-baja{0%,100%{transform:translateY(-1px)}50%{transform:translateY(2.5px)}}
  @keyframes et-golpe{0%,60%,100%{transform:translateY(-2px)}75%{transform:translateY(2px)}}
  @keyframes et-avanza{0%,100%{transform:translateX(-1.5px)}50%{transform:translateX(1.5px)}}
}
.etapa h4{letter-spacing:-.015em}

/* =====================================================================
   RAPTOR LIB 18 — TAMBOR (skill tambor-de-servicios), en clave de la propuesta 01:
   Geologica sin mayúsculas forzadas (la «ema» va en minúsculas), fondo Noche,
   alineado a la retícula del sitio (.wrap dentro del pin, --t-gut:0).
   Sin JS o con movimiento reducido: lista estática legible.
   ===================================================================== */
.tambor{--t-gut:0px;--t-display:var(--f-disp);--t-mono:var(--f-mono);--t-dim:var(--claro-oscuro);--t-texto:rgba(233,241,236,.8);--t-perspectiva:900px;--t-eje:-80px;position:relative;padding:14vh 0}
.tambor[data-dark]{background:var(--noche) linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px) 0 0/48px 48px;color:#E9F1EC}
.tambor__in{width:100%}
.tambor__eyebrow{margin:0 0 1.2rem}
.tambor__intro{max-width:60ch;color:var(--t-texto);font-size:clamp(1rem,1.4vw,1.12rem);margin:0 0 4vh}
.tambor__cara+.tambor__cara{margin-top:6vh}
.tambor__titulo{font-family:var(--t-display);font-weight:700;letter-spacing:-.035em;line-height:.95;margin:0;font-size:clamp(48px,7vw,112px);color:var(--c,currentColor)}
.tambor__cara p{max-width:52ch;color:var(--t-texto);margin:2vh 0 0}
.tambor__cara .tambor__etiqueta{display:flex;align-items:center;gap:.7rem;font:500 .7rem/1.3 var(--t-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--t-dim);margin:0 0 1.8vh;max-width:none}
.tambor__etiqueta svg{flex:0 0 28px;width:28px;height:28px;color:var(--c)}
.tambor--largo .tambor__cara p:last-child{font-size:clamp(1rem,1.25vw,1.12rem);line-height:1.6;max-width:44ch}
/* modo vivo (lo activa el motor con .tambor--vivo) */
.tambor--vivo{padding:0;height:calc(var(--len,360)*1vh)}
@supports (height:1svh){.tambor--vivo{height:calc(var(--len,360)*1svh)}}
.tambor--vivo .tambor__pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding-top:var(--hdr)}
.tambor--vivo .tambor__escenario{position:relative;height:clamp(260px,38vh,420px);perspective:var(--t-perspectiva)}
.tambor--vivo .tambor__cara{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;transform-origin:50% 50% var(--t-eje);backface-visibility:hidden;opacity:0}
.tambor--vivo .tambor__cara:first-child{opacity:1}
@media (min-width:901px){
  .tambor--largo .tambor__cara{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);column-gap:5vw;align-content:center}
  .tambor--largo .tambor__etiqueta{grid-column:1;align-self:end}
  .tambor--largo .tambor__titulo{grid-column:1}
  .tambor--largo .tambor__cara>p:last-child{grid-column:2;grid-row:1/span 2;align-self:center;margin:0}
}
@media (max-width:900px){
  .tambor--vivo.tambor--largo .tambor__pin{justify-content:center;padding-top:var(--hdr)}
  .tambor--vivo.tambor--largo .tambor__escenario{height:clamp(280px,44svh,380px)}
  .tambor--largo .tambor__cara{justify-content:center}
  .tambor__titulo{font-size:clamp(48px,13vw,72px)}
  .tambor__intro{font-size:.95rem;margin-bottom:2.4vh}
}

/* ======= RAPTOR LIB 21 — EXPEDIENTE ABIERTO: alcance ema en Nosotros (skill expediente-abierto) ======= */
/* =====================================================================
   RAPTOR LIB 21 — EXPEDIENTE ABIERTO (CARPETA EN ABANICO) + LISTA SINCRONIZADA
   Origen: Ozetta Fumigaciones, propuesta 02 «Protocolo MIP» (2026-10-04),
   «Carpeta documental al firmar contrato». Tokens a adaptar: :where(.carpeta).
   ===================================================================== */
:where(.carpeta) {
  --cp-hoja: var(--papel);
  --cp-borde: var(--linea);
  --cp-carpeta: var(--noche);
  --cp-carpeta-atras: #163323;
  --cp-carpeta-texto: #FFFFFF;
  --cp-carpeta-texto-2: var(--claro-oscuro);
  --cp-acento: var(--verde);
  --cp-acento-texto: var(--verde-hondo);
  --cp-ok: var(--verde);
  --cp-texto: var(--tinta);
  --cp-texto-2: var(--grafito);
  --cp-gris: var(--niebla);
  --cp-display: var(--f-disp);
  --cp-body: var(--f-disp);
  --cp-mono: var(--f-mono);
  --cp-paso: 7.5deg;               /* ángulo entre hojas abiertas (el JS lo calcula: 60° / (N−1), entre 6° y 14°) */
  --cp-centro: 4;                  /* índice de la hoja central (el JS lo calcula: (N−1)/2) */
}

.carpeta { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; font-family: var(--cp-body); }
.carpeta__intro { grid-column: 1 / -1; }
.carpeta__intro h3 { margin: 0; font: 600 clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem)/1.1 var(--cp-display); letter-spacing: -.025em; color: var(--cp-texto); }
.carpeta__intro p { margin: .8rem 0 0; max-width: 68ch; color: var(--cp-texto-2); line-height: 1.65; }

/* ---- El abanico ---- */
.carpeta__fan { position: relative; z-index: 1; aspect-ratio: 6 / 4.8; container-type: inline-size; }
.carpeta__atras { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 52%; border-radius: 10px 10px 8px 8px; background: var(--cp-carpeta-atras); }
.carpeta__atras::before { content: ""; position: absolute; left: 0; top: -18px; width: 36%; height: 22px; border-radius: 8px 8px 0 0; background: var(--cp-carpeta-atras); } /* pestaña */
.carpeta__frente {
  position: absolute; z-index: 40; left: 12%; right: 12%; bottom: 4%; height: 32%;
  border-radius: 8px; background: var(--cp-carpeta); color: var(--cp-carpeta-texto);
  padding: 5% 6%; display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: 0 -10px 30px -10px rgba(15, 23, 32, .45);
}
.carpeta__frente::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 8px 8px 0 0; background: var(--cp-acento); }
.carpeta__frente b { font: 600 clamp(.85rem, 3.2cqw, 1.35rem)/1.1 var(--cp-display); letter-spacing: -.01em; }
.carpeta__frente small { display: flex; justify-content: space-between; gap: 1rem; font: 500 clamp(.5rem, 1.7cqw, .66rem)/1.2 var(--cp-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cp-carpeta-texto-2); }
.carpeta__frente .cp-iso { position: absolute; right: 6%; top: 18%; width: 9%; height: auto; color: var(--verde-vivo); }

.hoja {
  position: absolute; left: 35%; bottom: 17%; width: 30%; aspect-ratio: 3 / 4;   /* 30 % de ancho: abierto, el abanico no invade la lista a 1366-1440 px */
  transform-origin: 50% 150%;                                          /* pivote DEBAJO de la hoja = baraja */
  transform: rotate(calc((var(--i) - var(--cp-centro)) * 1deg));       /* cerrada: casi encimadas */
  transition: transform 1.1s cubic-bezier(.22,1,.36,1), box-shadow .4s, border-color .4s;
  z-index: calc(var(--i) + 1);
  background: var(--cp-hoja); border: 1px solid var(--cp-borde); border-radius: 6px; padding: 6% 7%;
  box-shadow: 0 8px 20px -12px rgba(15, 23, 32, .35); cursor: pointer;
}
.carpeta__fan.open .hoja { transform: rotate(calc((var(--i) - var(--cp-centro)) * var(--cp-paso))); transition-delay: calc(var(--i) * 45ms); }
.carpeta__fan .hoja.is-act {
  transform: rotate(calc((var(--i) - var(--cp-centro)) * var(--cp-paso))) translateY(-14%);
  z-index: 30; border-color: var(--cp-acento); box-shadow: 0 26px 40px -18px rgba(15, 23, 32, .5); transition-delay: 0s;
}
.hoja__n { display: flex; justify-content: space-between; font: 500 clamp(.5rem, 1.9cqw, .72rem)/1 var(--cp-mono); letter-spacing: .08em; color: var(--cp-acento-texto); }
.hoja__n i { width: 22%; height: 4px; margin-top: 2px; background: var(--cp-acento); border-radius: 2px; }
.hoja__t { margin-top: 8%; font: 600 clamp(.55rem, 2.5cqw, .95rem)/1.15 var(--cp-display); color: var(--cp-texto); letter-spacing: -.01em; }
.hoja__ln { display: block; height: 3px; margin-top: 7%; border-radius: 2px; background: var(--cp-borde); }
.hoja__ln.s { width: 62%; } .hoja__ln.m { width: 80%; }
.hoja__sello { position: absolute; right: 9%; bottom: 7%; width: 24%; aspect-ratio: 1; border: 1.5px solid var(--cp-acento); border-radius: 50%; opacity: .8; }
.hoja__sello::after { content: ""; position: absolute; inset: 22%; border: 1px dashed var(--cp-acento); border-radius: 50%; }

/* ---- La lista sincronizada ---- */
.carpeta__lista { position: relative; z-index: 2; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--cp-borde); } /* siempre por encima de las hojas */
.carpeta__fila {
  display: grid; grid-template-columns: 58px minmax(0, 1fr) 26px; align-items: center; gap: .9rem;
  width: 100%; padding: .8rem .6rem .8rem 0; border: 0; border-bottom: 1px solid var(--cp-borde);
  background: transparent; text-align: left; cursor: pointer; position: relative; font: inherit; color: var(--cp-texto);
  transition: background-color .3s, padding .45s cubic-bezier(.22,1,.36,1);
}
.carpeta__fila::before { content: ""; position: absolute; left: 0; top: 0; bottom: -1px; width: 3px; background: var(--cp-acento); transform: scaleY(0); transition: transform .4s cubic-bezier(.22,1,.36,1); }
.carpeta__fila.is-act { background: var(--cp-hoja); padding-left: .8rem; }
.carpeta__fila.is-act::before { transform: scaleY(1); }
.carpeta__fila:focus-visible { outline: 2px solid var(--cp-acento); outline-offset: -2px; }
.carpeta__fila .n { white-space: nowrap; font: 500 .7rem/1 var(--cp-mono); letter-spacing: .08em; color: var(--cp-gris); }
.carpeta__fila.is-act .n { color: var(--cp-acento-texto); }
.carpeta__fila strong { display: block; font: 600 1.02rem/1.25 var(--cp-display); letter-spacing: -.01em; }
.carpeta__fila small { display: block; margin-top: .15rem; font-size: .84rem; color: var(--cp-texto-2); }
.carpeta__fila svg { width: 22px; height: 22px; fill: none; stroke: var(--cp-ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.carpeta__fila svg circle { stroke: var(--cp-borde); stroke-width: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .hoja, .carpeta__fila, .carpeta__fila::before { transition: none !important; }
}
@media (max-width: 900px) {
  .carpeta { grid-template-columns: 1fr; }
  .carpeta__fan { max-width: 520px; width: 100%; margin-inline: auto; }
}
@media (max-width: 480px) {
  .carpeta__fila { grid-template-columns: 48px minmax(0, 1fr) 22px; gap: .7rem; }
}

/* ======= RAPTOR LIB 22 — TELÓN DE HALCÓN: «Campo» en Proyectos (skill telon-de-halcon) ======= */
/* =====================================================================
   RAPTOR LIB 22 — TELÓN DE HALCÓN (MARCO QUE SE ABRE) (escritorio Y celular)
   Origen: Ozetta Fumigaciones, propuesta 03 «Dominio del Halcón» (2026-10-04), sección Cetrería.
   Mejora 2026-10-14: el efecto ahora también corre en celular (marco vertical + el texto sube dentro
   de la escena fija si no cabe). Tokens a adaptar: :where(.marco).
   ===================================================================== */
:where(.marco) {
  --mc-bg: var(--noche);
  --mc-bg-rgb: 6, 18, 11;
  --mc-texto: #E9F1EC;
  --mc-texto-2: rgba(233, 241, 236, .82);
  --mc-acento: var(--verde-vivo);
  --mc-acento-2: var(--verde-vivo);
  --mc-palabra: rgba(233, 241, 236, .8);
  --mc-display: var(--f-disp);
  --mc-body: var(--f-disp);
  --mc-encabezado: var(--hdr);
  --mc-foco: 66% 40%;                /* el técnico dentro del pozo */
  --mc-foco-movil: 66% 42%;
  /* Marco inicial: recorte en % (arriba/abajo, lados). El JS lo lee. */
  --mc-iy: 17;  --mc-ix: 27;         /* escritorio: marco apaisado de 66 % × 46 % */
}
@media (max-width: 900px) {
  :where(.marco) { --mc-iy: 21; --mc-ix: 9; --mc-encabezado: 64px; }   /* celular: marco vertical de 82 % × 58 % */
}

.marco { position: relative; background: var(--mc-bg); color: var(--mc-texto); font-family: var(--mc-body); }
.marco__stage { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; overflow: hidden; }
.marco__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.marco__media img { width: 100%; height: 100%; object-fit: cover; object-position: var(--mc-foco); transform: scale(1.04); }
.marco__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--mc-bg-rgb), .45) 0%, rgba(var(--mc-bg-rgb), 0) 20%, rgba(var(--mc-bg-rgb), 0) 44%, rgba(var(--mc-bg-rgb), .8) 62%, var(--mc-bg) 92%);
}
.marco__palabra {
  position: absolute; left: 50%; top: 50%; z-index: 0; margin: 0; transform: translate(-50%, -50%); pointer-events: none;
  font: italic 300 clamp(4rem, 17vw, 17rem)/.8 var(--mc-display); letter-spacing: -.04em; white-space: nowrap;
  color: transparent; -webkit-text-stroke: 1px var(--mc-palabra); opacity: 0;
}
.marco__copy { position: relative; z-index: 1; width: 100%; box-sizing: border-box; padding-block: calc(var(--mc-encabezado) + 3rem) clamp(2.6rem, 5vw, 4.4rem); }
.marco__copy .eyebrow { margin: 0 0 14px; }
.marco__h { margin: 0; font: 500 clamp(2.6rem, 5.1vw, 5.4rem)/.96 var(--mc-display); letter-spacing: -.03em; color: var(--mc-texto); }
.marco__h em { color: var(--mc-acento-2); font-weight: 400; }
.marco__cols { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 3.4rem; align-items: end; margin-top: 1.4rem; }
.marco__cols p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: var(--mc-texto-2); max-width: 56ch; }
.marco__facts { margin: 0; padding: 0; list-style: none; display: grid; gap: .7rem; }
.marco__facts li { display: flex; gap: .8rem; align-items: baseline; padding-bottom: .55rem; border-bottom: 1px solid rgba(242, 238, 230, .18); }
.marco__facts b { font: italic 400 1rem var(--mc-display); color: var(--mc-acento); min-width: 1.6rem; }
.marco__cta { margin-top: 1.6rem; }

/* ---- Efecto vivo (lo activa el JS con .marco--vivo; nunca sin JS ni con movimiento reducido) ---- */
.marco--vivo .marco__stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.marco--vivo .marco__palabra { opacity: 1; -webkit-text-stroke: 1.4px var(--mc-palabra); }
.marco--vivo .marco__copy { opacity: 0; will-change: transform, opacity; }

/* ---- Celular ---- */
@media (max-width: 900px) {
  .marco__media img { object-position: var(--mc-foco-movil); }
  .marco__h { font-size: clamp(2.2rem, 9.4vw, 3rem); }
  .marco__cols { grid-template-columns: 1fr; gap: 1.6rem; margin-top: 1.2rem; }
  .marco__cols p { font-size: 1rem; }
  .marco__copy { padding-block: calc(var(--mc-encabezado) + 1.5rem) 2rem; }
  /* En vivo: el texto va SOBRE la foto, así que la sombra cubre más (lectura AA en todo el texto) */
  .marco--vivo .marco__shade { background: linear-gradient(180deg, rgba(var(--mc-bg-rgb), .35) 0%, rgba(var(--mc-bg-rgb), .2) 22%, rgba(var(--mc-bg-rgb), .72) 50%, rgba(var(--mc-bg-rgb), .92) 72%, var(--mc-bg) 100%); }
  /* Sin efecto (sin JS o movimiento reducido): foto arriba y texto debajo, como lista normal */
  .marco:not(.marco--vivo) .marco__stage { display: block; min-height: 0; }
  .marco:not(.marco--vivo) .marco__media { position: relative; height: 64vh; height: 64svh; z-index: 0; }
  .marco:not(.marco--vivo) .marco__shade { bottom: auto; height: 64vh; height: 64svh; z-index: 0; background: linear-gradient(180deg, rgba(var(--mc-bg-rgb), .35) 0%, rgba(var(--mc-bg-rgb), 0) 28%, rgba(var(--mc-bg-rgb), 0) 58%, var(--mc-bg) 100%); }
  .marco:not(.marco--vivo) .marco__copy { margin-top: -5.5rem; padding-top: 0; }
}

/* en clave de la propuesta 01: Geologica derecha (sin cursiva), numerales en mono */
.marco__palabra{font:800 clamp(4rem,17vw,17rem)/.8 var(--mc-display);letter-spacing:-.05em}
.marco__h{font:700 clamp(2.4rem,4.8vw,4.6rem)/1 var(--mc-display);letter-spacing:-.035em}
.marco__facts b{font:500 .72rem var(--f-mono);letter-spacing:.1em;color:var(--mc-acento)}
.marco__facts span{color:var(--mc-texto-2)}
.marco__copy .eyebrow{color:var(--verde-vivo)}
.fotos-dos{grid-template-columns:1fr 1fr;margin-top:1.6rem}
.fotos-dos .shot{min-height:340px}
@media (max-width:900px){.fotos-dos{grid-template-columns:1fr}.fotos-dos .shot{min-height:280px}}

/* ======= FIRMAS EN ANILLO: el nodo del isotipo con las iniciales; al entrar, el anillo se compacta ======= */
@property --anillo-g{syntax:'<length>';inherits:false;initial-value:3px}
.anillo{--anillo-g:3px;position:relative;display:grid;place-items:center;width:64px;height:64px;margin-bottom:1.1rem;border-radius:50%;
  background:radial-gradient(circle closest-side,var(--papel) calc(100% - var(--anillo-g) - .5px),var(--verde) calc(100% - var(--anillo-g)));
  font:600 .92rem var(--f-mono);letter-spacing:.06em;color:var(--tinta);transition:--anillo-g 1.1s var(--ease) .2s}
.anillo::after{content:"";position:absolute;right:-13px;top:50%;width:9px;height:9px;margin-top:-4.5px;border-radius:50%;background:var(--verde);transform:scale(0);transition:transform .6s cubic-bezier(.3,1.6,.5,1) .9s}
.razon.in .anillo,.no-js .anillo{--anillo-g:10px}
.razon.in .anillo::after,.no-js .anillo::after{transform:scale(1)}
.firma-tag{display:block;margin-top:.45rem;font:500 .62rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--verde-hondo)}
@media (prefers-reduced-motion:reduce){.anillo,.anillo::after{transition:none}}

/* ======= ACI: la tarjeta en espejo de la del registro LC-019 ======= */
@media (min-width:901px){.acred-in.inv{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.acred-in.inv>.registro{order:-1}}
.aci-card .reg-rows div{grid-template-columns:8.5rem 1fr}

/* ======= NORMAS POR MUNICIPIO (suelos): cada artículo en su ficha ======= */
.normas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;margin-top:2rem}
.norma{background:var(--papel);border:1px solid var(--linea);border-radius:20px;padding:1.3rem 1.3rem 1.1rem}
.norma header{padding-bottom:.8rem;border-bottom:1px solid var(--linea)}
.norma h3{font-size:1.18rem;letter-spacing:-.02em;line-height:1.15}
.norma header small{display:block;margin-top:.35rem;font:500 .6rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--niebla)}
.norma ul{list-style:none;margin:0;padding:0}
.norma li{display:grid;grid-template-columns:auto;gap:.35rem;padding:.75rem 0;border-bottom:1px dashed var(--linea);font-size:.92rem;color:var(--grafito);line-height:1.5}
.norma li:last-child{border-bottom:0;padding-bottom:0}
.norma li b{justify-self:start;font:600 .64rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);border:1px solid var(--verde);border-radius:999px;padding:.28rem .6rem}
.norma.todo-nl{background:var(--menta);border-color:transparent}
.normas-nota{margin-top:1.2rem}
@media (max-width:1100px){.normas{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.normas{grid-template-columns:1fr}}

/* ======= TABLA DE PRECIO (suelos): en celular, una ficha por tipo de proyecto ======= */
@media (max-width:640px){
  .tabla.precio thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .tabla.precio tbody,.tabla.precio tr,.tabla.precio td{display:block}
  .tabla.precio tr{padding:.95rem 1rem;border-bottom:1px solid var(--linea)}
  .tabla.precio tr:last-child{border-bottom:0}
  .tabla.precio td{border:0;padding:0}
  .tabla.precio td:first-child b{font-size:1rem}
  .tabla.precio td:nth-child(2){margin-top:.3rem;color:var(--grafito)}
  .tabla.precio td:nth-child(3){display:inline-block;margin-top:.6rem;font:500 .66rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);border:1px solid var(--verde);border-radius:999px;padding:.3rem .65rem}
  .tabla.precio td:nth-child(3)::before{content:"Plazo · "}
}
/* ajustes de la revisión: carpeta fija junto a la lista larga · aire del título en columnas · sombra del telón en celular */
@media (min-width:901px){.carpeta{align-items:start}.carpeta__fan{position:sticky;top:calc(var(--hdr) + 2.5rem)}}
.acred-in h2+.answer,.acred-in h2+p{margin-top:1.2rem}
@media (max-width:900px){.marco--vivo .marco__shade{background:linear-gradient(180deg,rgba(6,18,11,.62) 0%,rgba(6,18,11,.66) 30%,rgba(6,18,11,.82) 55%,rgba(6,18,11,.94) 78%,var(--noche) 100%)}}
@media (max-width:900px){.marco__copy{padding-bottom:6.2rem}}  /* la última línea del telón termina arriba de los botones flotantes */
.marco__copy .eyebrow+.marco__h{margin-top:0}

/* =====================================================================
   REGISTRO DE SONDEO — «Qué incluye» de mecánica de suelos (Layen, 2026-10-25)
   Las 6 etapas son estratos de una columna de suelo con su profundidad. Al bajar, la perforadora desciende,
   revela el estrato (pasa de gris a su color), enciende la etapa y la lectura de profundidad avanza;
   al llegar al fondo se sella el informe. Sin JS o con movimiento reducido: todo revelado y sellado.
   ===================================================================== */
.sondeo{position:relative;margin-top:2.2rem;background:var(--papel);border:1px solid var(--linea);border-radius:24px;box-shadow:0 40px 80px -60px rgba(12,26,18,.45);overflow:hidden}
.sondeo__cab{display:grid;grid-template-columns:1.5fr 1fr 1.5fr 1fr;border-bottom:1px solid var(--tinta);background:var(--noche);color:#fff}
.sondeo__cab>div{padding:.9rem 1.2rem;border-left:1px solid rgba(255,255,255,.12)}
.sondeo__cab>div:first-child{border-left:0}
.sondeo__cab small{display:block;font:500 .58rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--claro-oscuro)}
.sondeo__cab b{display:block;margin-top:.25rem;font:600 .95rem/1.2 var(--f-disp);letter-spacing:-.01em}
.sondeo__lect b{font:600 1.35rem/1.1 var(--f-mono);color:var(--verde-vivo);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.sondeo__cols,.capa{display:grid;grid-template-columns:7rem 8.5rem minmax(0,1fr) 13rem}
.sondeo__cols{border-bottom:1px solid var(--linea);background:var(--lab)}
.sondeo__cols span{padding:.6rem 1.2rem;font:500 .58rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--niebla)}
.sondeo__cuerpo{position:relative}
.capa{border-bottom:1px dashed var(--linea);transition:background-color .5s}
.capa:last-child{border-bottom:0}
.capa__prof{padding:1.4rem 1.2rem;font-variant-numeric:tabular-nums}
.capa__prof b{display:block;font:600 1.05rem/1 var(--f-mono);letter-spacing:-.02em;color:var(--tinta)}
.capa__prof small{display:block;margin-top:.35rem;font:500 .6rem var(--f-mono);letter-spacing:.06em;color:var(--niebla)}
.capa__perfil{position:relative;border-inline:1px solid rgba(12,26,18,.18);transition:filter .7s var(--ease),opacity .7s var(--ease)}
.capa--relleno .capa__perfil{background:#E7E0CC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='30'%3E%3Cg fill='none' stroke='%230C1A12' stroke-opacity='.45' stroke-width='1.1'%3E%3Ccircle cx='7' cy='8' r='2.6'/%3E%3Ccircle cx='23' cy='20' r='3.4'/%3E%3Ccircle cx='27' cy='5' r='1.5'/%3E%3Ccircle cx='11' cy='24' r='1.4'/%3E%3C/g%3E%3C/svg%3E")}
.capa--arcilla .capa__perfil{background:#CDBB93 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='14'%3E%3Cpath d='M2 3.5H13M17 10.5H28' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1.1' fill='none'/%3E%3C/svg%3E")}
.capa--lutita .capa__perfil{background:#3E4A43 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='9'%3E%3Cpath d='M0 .5H44' stroke='%23E4F2E8' stroke-opacity='.5' stroke-width='1'/%3E%3Cpath d='M8 5H26' stroke='%23E4F2E8' stroke-opacity='.3' stroke-width='.8'/%3E%3C/svg%3E")}
.capa--caliza .capa__perfil{background:#B8A57E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M.5 0V10M20.5 10V20' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1' fill='none'/%3E%3C/svg%3E")}
.capa__perfil span{position:absolute;left:.55rem;bottom:.55rem;font:600 .56rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.92);color:var(--tinta);padding:.2rem .45rem;border-radius:999px}
.capa--lutita .capa__perfil span{background:rgba(6,18,11,.85);color:#fff}
/* nivel freático: el símbolo de la geotecnia (triángulo invertido con dos rayas) en la cima del estrato */
.capa--agua .capa__perfil::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);opacity:.9}
.capa--agua .capa__perfil::after{content:"";position:absolute;right:.6rem;top:.45rem;width:16px;height:16px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12L8 10z' fill='%23fff'/%3E%3Cpath d='M4 12.5h8M6 15h4' stroke='%23fff' stroke-width='1.4'/%3E%3C/svg%3E") center/contain no-repeat}
.capa__txt{position:relative;padding:1.3rem 1.4rem 1.4rem 1.6rem}
.capa__n{display:inline-block;font:500 .66rem var(--f-mono);letter-spacing:.1em;color:var(--niebla);margin-bottom:.4rem;transition:color .4s}
.capa__txt b{display:block;font-weight:600;font-size:1.12rem;letter-spacing:-.015em;line-height:1.25}
.capa__txt p{margin-top:.35rem;font-size:.92rem;color:var(--grafito);line-height:1.55;max-width:62ch}
.capa__nrm{padding:1.4rem 1.2rem;border-left:1px dashed var(--linea)}
.capa__nrm b{display:inline-block;font:600 .62rem var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--tinta);border:1px solid var(--verde);border-radius:999px;padding:.28rem .6rem}
.capa__nrm span{display:block;margin-top:.5rem;font-size:.82rem;color:var(--grafito)}
/* barreno: el tubo que baja por el centro del perfil */
.sondeo__barreno{position:absolute;z-index:2;top:0;bottom:0;left:calc(7rem + 4.25rem);width:12px;margin-left:-6px;pointer-events:none}
.sondeo__barra{position:absolute;inset:0;background:linear-gradient(90deg,#0b140e,#2a3a30 50%,#0b140e);box-shadow:0 0 0 1px rgba(0,0,0,.25);transform-origin:top;transform:scaleY(1)}
.sondeo__broca{position:absolute;left:-5px;right:-5px;top:-2px;height:16px}
.sondeo__broca i{position:absolute;inset:0;background:var(--verde-vivo);clip-path:polygon(0 0,100% 0,50% 100%)}
.sondeo__pie{position:relative;display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1.2rem;border-top:1px solid var(--tinta);background:var(--lab);font:500 .6rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--grafito)}
.sondeo__sello{position:absolute;right:15rem;bottom:.9rem;display:grid;place-items:center;width:104px;height:104px;border:2px solid var(--verde);border-radius:50%;color:var(--verde-hondo);font:600 .62rem/1.15 var(--f-mono);letter-spacing:.1em;text-align:center;transform:rotate(-12deg);background:rgba(255,255,255,.85)}
.sondeo__sello::before{content:"";position:absolute;inset:6px;border:1px dashed var(--verde);border-radius:50%}
.sondeo__sello b{display:block;font:800 .95rem var(--f-disp);letter-spacing:-.01em;text-transform:none}
.sondeo__sello small{display:block;font-size:.5rem;letter-spacing:.08em;color:var(--grafito)}
/* modo vivo (lo pone el JS): estratos en gris hasta que pasa la perforadora */
.sondeo--vivo .capa__perfil{filter:grayscale(1);opacity:.35}
.sondeo--vivo .capa.on .capa__perfil{filter:none;opacity:1}
.sondeo--vivo .capa .capa__txt b,.sondeo--vivo .capa .capa__txt p,.sondeo--vivo .capa .capa__nrm{opacity:.45;transition:opacity .5s}
.sondeo--vivo .capa.on .capa__txt b,.sondeo--vivo .capa.on .capa__txt p,.sondeo--vivo .capa.on .capa__nrm{opacity:1}
.sondeo--vivo .capa.act{background:linear-gradient(90deg,transparent 15.5rem,var(--menta) 15.5rem)}
.sondeo--vivo .capa.act .capa__n{color:var(--verde-hondo)}
.sondeo--vivo .sondeo__barra{transform:scaleY(0)}
.sondeo--vivo .sondeo__sello{opacity:0;transform:rotate(-12deg) scale(1.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.sondeo--vivo.fin .sondeo__sello{opacity:1;transform:rotate(-12deg) scale(1)}
.sondeo:not(.sondeo--vivo) .sondeo__broca{display:none}
@media (max-width:1100px){
  .sondeo__cols,.capa{grid-template-columns:5.6rem 6rem minmax(0,1fr) 11rem}
  .sondeo__barreno{left:calc(5.6rem + 3rem)}
  .sondeo--vivo .capa.act{background:linear-gradient(90deg,transparent 11.6rem,var(--menta) 11.6rem)}
}
@media (max-width:760px){
  .sondeo{border-radius:18px;margin-inline:calc(var(--pad)*-.35)}
  .sondeo__cab{grid-template-columns:1fr auto}
  .sondeo__cab>div:nth-child(2),.sondeo__cab>div:nth-child(3){display:none}
  .sondeo__cab>div{padding:.75rem .9rem}
  .sondeo__cols{display:none}
  .sondeo__cols,.capa{grid-template-columns:3.6rem 2.6rem minmax(0,1fr)}
  .capa__prof{padding:1.1rem .5rem 1rem .8rem}
  .capa__prof b{font-size:.84rem}
  .capa__prof small{font-size:.54rem}
  .capa__perfil span{display:none}
  .capa--agua .capa__perfil::after{right:50%;margin-right:-8px;top:.3rem;width:13px;height:13px}
  .capa__txt{padding:1rem .9rem 1.1rem 1rem}
  .capa__txt b{font-size:1.02rem}
  .capa__txt p{font-size:.88rem}
  .capa__nrm{grid-column:3;border-left:0;padding:0 .9rem 1.1rem 1rem;margin-top:-.4rem}
  .capa__nrm span{display:inline;margin:0 0 0 .5rem;font-size:.78rem}
  .sondeo__barreno{left:calc(3.6rem + 1.3rem);width:9px;margin-left:-4.5px}
  .sondeo--vivo .capa.act{background:linear-gradient(90deg,transparent 6.2rem,var(--menta) 6.2rem)}
  .sondeo__pie{flex-direction:column;gap:.3rem;padding-right:7rem}
  .sondeo__sello{right:1rem;bottom:.6rem;width:82px;height:82px;font-size:.52rem}
  .sondeo__sello b{font-size:.8rem}
}
@media (prefers-reduced-motion:reduce){.capa,.capa__perfil,.sondeo__sello{transition:none}}
/* registro de sondeo: el sello vive en el pie (no tapa la última etapa) · profundidad en un renglón */
.sondeo__pie{align-items:center;min-height:7.4rem;padding:1rem 1.2rem}
.sondeo__pie>span:not(.sondeo__sello){align-self:center}
.sondeo__sello{position:relative;right:auto;bottom:auto;flex:0 0 auto;margin-left:auto}
.capa__prof small{white-space:nowrap}
@media (max-width:760px){
  .sondeo__pie{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.3rem 1rem;padding:.9rem;min-height:0}
  .sondeo__pie>span:nth-child(2){grid-row:2}
  .sondeo__sello{grid-row:1/3;grid-column:2}
  .capa__prof{padding:1.1rem .25rem 1rem .6rem}
}
@media (max-width:760px){.capa__prof{padding:1.1rem .2rem 1rem .5rem}.capa__prof small{font-size:.5rem;letter-spacing:0}}
/* prensa: el polvo de la ruptura queda suspendido y se mece, aunque no haya scroll */
#dust circle{transform-box:fill-box;transform-origin:center;animation:polvo 3.4s ease-in-out infinite alternate}
#dust circle:nth-child(3n){animation-duration:4.2s;animation-delay:-1.3s}
#dust circle:nth-child(3n+1){animation-duration:2.8s;animation-delay:-.6s}
@keyframes polvo{0%{transform:translate(0,0)}50%{transform:translate(2px,-5px)}100%{transform:translate(-2px,-9px)}}
@media (prefers-reduced-motion:reduce){#dust circle{animation:none}}

/* =====================================================================
   HÉROE DE SUELOS A PANTALLA COMPLETA (escritorio) — como la propuesta 02 «Perfil Estratigráfico»
   La escena es el fondo: banda del registro arriba, titular sobre el cielo, tarjeta con el texto y los
   botones sobre los estratos, registro SPT a la derecha. Tipografía y botones = los de todos los héroes.
   ===================================================================== */
@media (min-width:901px){
  .hs-stage{display:block;max-width:none;margin:0;padding:0}
  .hs-viz{position:absolute;inset:0;height:auto;border-radius:0;box-shadow:none;background:var(--lab)}
  .hs-viz::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(12,26,18,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.045) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
  .hs-sheet{top:var(--hdr);left:0;right:0;padding:.5rem max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));border-block:1px solid var(--linea);background:rgba(246,248,245,.92)}
  .hs-sheet span:nth-child(2),.hs-sheet span:nth-child(3){display:inline}
  .hs-copy{position:static}
  .hs-tit{position:absolute;z-index:4;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));top:calc(var(--hdr) + 2rem + clamp(.5rem,2.6vh,1.5rem));max-width:min(48vw,680px)}
  .hs-card{position:absolute;z-index:5;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:clamp(1rem,3vh,1.8rem);width:min(560px,42vw);background:rgba(255,255,255,.96);border:1px solid var(--linea);border-radius:20px;box-shadow:0 30px 60px -40px rgba(12,26,18,.45);padding:1.1rem 1.3rem 1.25rem}
  .hs-card .lead{max-width:none}
  .hs-card .hero-btns{margin-top:1rem}
  .cut{height:44%;--bx:66%}
  .sky{height:66%}
  .splog,.reco{right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));top:calc(var(--hdr) + 3.4rem)}
  .splog{width:min(290px,23vw)}
  .reco{width:min(330px,27vw)}
  .building{width:min(260px,19vw)}.piles{width:min(220px,16vw)}
  .hs .scroll-hint{left:auto;right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:1.6rem;z-index:5;background:rgba(255,255,255,.92);padding:.45rem .7rem;border-radius:999px;border:1px solid var(--linea)}
}
@media (min-width:901px) and (max-height:700px){.hs-card .lead-d{display:none}.hs-card .lead-m{display:block}}

/* =====================================================================
   CELULAR (suelos y concreto): primero el texto y los dos botones; al bajar, la escena se fija a pantalla
   completa y la animación corre. La pista y el arranque los calcula el motor (--pin-off = alto del texto).
   ===================================================================== */
@media (max-width:900px){
  .hs{height:calc(var(--pin-off,0px) + 250vh)}
  .hp{height:calc(var(--pin-off,0px) + 260vh)}
  .hs-stage,.hp-stage{display:block;top:calc(var(--pin-off,0px) * -1);height:auto;padding:0;max-width:none}
  .hs-copy,.hp-copy{position:relative;z-index:4;padding:88px var(--pad) 1.4rem}
  .hs-card{position:static;background:none;border:0;box-shadow:none;padding:0;width:auto}
  .hs-viz{height:100vh;height:100svh;border-radius:0;box-shadow:none;background:var(--lab)}
  .hs-sheet{top:calc(var(--hdr) + .7rem);left:var(--pad);right:var(--pad)}
  .cut{--bx:60%;height:54%}
  .sky{height:42%}
  .splog{display:block;top:calc(var(--hdr) + 2.6rem);right:var(--pad);width:min(200px,54%);font-size:.6rem}
  .splog header{padding:.5rem .7rem;font-size:.52rem}
  .splog ol{padding:.3rem .7rem .5rem}
  .splog li{grid-template-columns:3rem 1fr 1.8rem;gap:.35rem;padding:.12rem 0}
  .reco{left:var(--pad);right:var(--pad);top:auto;bottom:6rem}
  .press-wrap{height:100vh;height:100svh;max-height:none}
  #press{top:calc(var(--hdr) + .8rem);bottom:12.2rem;height:auto}
  .hp .scroll-hint,.hs .scroll-hint{display:none}
}
/* ajustes: el titular no toca la línea del terreno · en celular el registro SPT no tapa la perforadora */
@media (min-width:901px){.cut{height:40%}}
@media (min-width:901px) and (max-height:700px){.cut{height:30%}}
@media (max-width:900px){
  .cut{--bx:74%}
  .splog{right:auto;left:var(--pad);width:min(190px,50%)}
  .st>span{right:auto;left:.6rem}
  .bore .tip{left:auto;right:20px}
  .building{width:32%}.piles{width:27%}
}
/* suelos (escritorio): la línea del terreno se calcula con el tamaño real del titular para que nunca lo toque */
@media (min-width:901px){
  .hs{--tf:clamp(2.35rem,min(5.2vw,9.4vh),4.4rem)}
  .hs-tit{top:calc(var(--hdr) + 2.6rem)}
  .cut{height:clamp(24%,calc(100% - var(--hdr) - 7.6rem - 4.16 * var(--tf)),44%)}
}
@media (min-width:901px) and (max-height:700px){
  .hs-card{padding:.85rem 1.1rem 1rem;bottom:.7rem}
  .hs-card .hero-btns{margin-top:.7rem}
}
/* home (celular): igual que suelos y concreto — texto y botones primero; luego la animación a pantalla completa */
@media (max-width:900px){
  .hero{height:calc(var(--pin-off,0px) + 210vh)}
  .hero-stage{display:block;top:calc(var(--pin-off,0px) * -1);height:auto;padding:0;max-width:none}
  .hero-copy{padding:88px var(--pad) 1.4rem}
  .hero-viz{height:100vh;height:100svh;border-radius:0;box-shadow:none}
  .viz-tag{top:calc(var(--hdr) + .7rem);left:var(--pad);right:var(--pad)}
  .readout{bottom:6rem;left:var(--pad);right:var(--pad)}
  .stamp{top:calc(var(--hdr) + 3rem)}
}
@media (prefers-reduced-motion:reduce){.hero,.hs,.hp{height:auto}.hero-stage,.hs-stage,.hp-stage{position:relative;top:auto}}
/* registro SPT: las filas pendientes en gris legible (AA); la barra es la que aparece al pasar la perforadora */
.splog li{opacity:1}
.splog li:not(.on) span,.splog li:not(.on) em{color:var(--niebla)}
/* celular: la escena se fija JUSTO DEBAJO del encabezado (sin reservar su alto dentro de la escena, que dejaba aire
   bajo los botones) y la prensa ocupa solo el espacio libre encima de la ficha de lecturas (antes se metía debajo) */
@media (max-width:900px){
  .hero-stage,.hs-stage,.hp-stage,.hc-stage{top:calc(var(--hdr) - var(--pin-off,0px))}
  .hero-viz,.hs-viz,.press-wrap{height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr))}
  .hero-copy,.hs-copy,.hp-copy,.hc-copy{padding-bottom:.6rem}
  .viz-tag,.hs-sheet{top:.7rem}
  .stamp{top:3rem}
  .splog{top:2.6rem}
  #press{top:.4rem;bottom:auto;height:calc(100% - .4rem - 14.4rem)}
  .hp-readout{bottom:5.9rem}
  .hp-readout .ro{padding:.5rem .75rem}
}
@media (prefers-reduced-motion:reduce){.hero-stage,.hs-stage,.hp-stage{top:auto}}

/* =====================================================================
   HÉROE DE PRUEBAS DE COMPACTACIÓN — el terraplén se construye capa por capa (Layen, 2026-10-26)
   Pantalla completa (como suelos). Tendido de la capa → rodillo vibratorio que la compacta a su paso →
   cala con trompa y arena → capa liberada; ×3 (subrasante, subbase, base hidráulica) → carpeta y sello.
   Sin JS: el terraplén terminado. Variables por capa: --d (tendido), --ca/--cb (tramo compactado),
   --la/--lb (tramo suelto), --k (cala). Las pone el motor de secciones fijas (handlers.compac).
   ===================================================================== */
.hc{--t:clamp(26px,6.2vh,54px);position:relative;height:340vh}
.hc-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.hc-viz{position:absolute;inset:0;background:var(--lab);overflow:hidden}
.hc-viz::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(12,26,18,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(12,26,18,.045) 1px,transparent 1px);background-size:48px 48px;pointer-events:none}
.hc-copy{position:static}
.hc-tit{position:absolute;z-index:4;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));top:calc(var(--hdr) + 2.6rem);max-width:min(48vw,680px)}
.hc-card{position:absolute;z-index:6;left:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:clamp(1rem,3vh,1.8rem);width:min(560px,42vw);background:rgba(255,255,255,.96);border:1px solid var(--linea);border-radius:20px;box-shadow:0 30px 60px -40px rgba(12,26,18,.45);padding:1.1rem 1.3rem 1.25rem}
.hc-card .lead{max-width:none}
.hc-card .hero-btns{margin-top:1rem}
.hc-sheet{position:absolute;z-index:3;top:var(--hdr);left:0;right:0;display:flex;justify-content:space-between;gap:1rem;padding:.5rem max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));border-block:1px solid var(--linea);background:rgba(246,248,245,.92);font:500 .6rem/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.hc-sheet b{color:var(--tinta);font-weight:600}
/* terreno natural y terraplén */
.hc-suelo{position:absolute;left:0;right:0;bottom:0;height:max(22%,140px);z-index:1;border-top:2px solid var(--tinta);background:#7E6B4F url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cpath d='M0 .5H40M0 10.5H40M.5 0V10M20.5 10V20' stroke='%230C1A12' stroke-opacity='.28' stroke-width='1' fill='none'/%3E%3C/svg%3E")}
.hc-suelo span{position:absolute;left:calc(50% + 1rem);top:.6rem;font:600 .58rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(6,18,11,.82);color:#fff;padding:.22rem .55rem;border-radius:999px}
.hc-terr{position:absolute;z-index:2;left:50%;right:0;bottom:max(22%,140px);height:calc(var(--t)*3.7)}
.hc-capas{position:absolute;inset:0;clip-path:polygon(calc(var(--t)*5) 0,100% 0,100% 100%,0 100%)}
.hc-g{position:absolute;left:0;right:0;bottom:calc(var(--i)*var(--t));height:var(--t);border-top:1.5px dashed rgba(12,26,18,.32);background:rgba(12,26,18,.035)}
.hc-c,.hc-s{position:absolute;left:0;right:0}
.hc-c{height:var(--t);border-top:1.5px solid rgba(12,26,18,.55)}
.hc-s{height:calc(var(--t)*1.32);transform-origin:bottom;border-top:1px dashed rgba(12,26,18,.4)}
.hc-c.hc-c0{bottom:0;background:#C2A878 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cg fill='%230C1A12' fill-opacity='.32'%3E%3Ccircle cx='2.5' cy='2.5' r='1.3'/%3E%3Ccircle cx='8.5' cy='6.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='1.8' r='.8'/%3E%3C/g%3E%3C/svg%3E");clip-path:inset(0 calc(100% - var(--cb0,100%)) 0 var(--ca0,0%))}
.hc-c.hc-c1{bottom:var(--t);background:#A99470 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cg fill='%230C1A12' fill-opacity='.32'%3E%3Ccircle cx='2.5' cy='2.5' r='1.3'/%3E%3Ccircle cx='8.5' cy='6.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='1.8' r='.8'/%3E%3C/g%3E%3C/svg%3E");clip-path:inset(0 calc(100% - var(--cb1,100%)) 0 var(--ca1,0%))}
.hc-c.hc-c2{bottom:calc(var(--t)*2);background:#8F958C url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='9'%3E%3Cg fill='%230C1A12' fill-opacity='.32'%3E%3Ccircle cx='2.5' cy='2.5' r='1.3'/%3E%3Ccircle cx='8.5' cy='6.5' r='1.5'/%3E%3Ccircle cx='9.5' cy='1.8' r='.8'/%3E%3C/g%3E%3C/svg%3E");clip-path:inset(0 calc(100% - var(--cb2,100%)) 0 var(--ca2,0%))}
.hc-s.hc-s0{bottom:0;background:#D9C6A0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cg fill='none' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1.1'%3E%3Ccircle cx='6' cy='6' r='3.4'/%3E%3Ccircle cx='19' cy='15' r='4.2'/%3E%3Ccircle cx='21' cy='4' r='1.6'/%3E%3C/g%3E%3C/svg%3E");transform:scaleY(var(--d0,1));clip-path:inset(0 calc(100% - var(--lb0,100%)) 0 var(--la0,100%))}
.hc-s.hc-s1{bottom:var(--t);background:#C6B591 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cg fill='none' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1.1'%3E%3Ccircle cx='6' cy='6' r='3.4'/%3E%3Ccircle cx='19' cy='15' r='4.2'/%3E%3Ccircle cx='21' cy='4' r='1.6'/%3E%3C/g%3E%3C/svg%3E");transform:scaleY(var(--d1,1));clip-path:inset(0 calc(100% - var(--lb1,100%)) 0 var(--la1,100%))}
.hc-s.hc-s2{bottom:calc(var(--t)*2);background:#B3B9AF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='22'%3E%3Cg fill='none' stroke='%230C1A12' stroke-opacity='.4' stroke-width='1.1'%3E%3Ccircle cx='6' cy='6' r='3.4'/%3E%3Ccircle cx='19' cy='15' r='4.2'/%3E%3Ccircle cx='21' cy='4' r='1.6'/%3E%3C/g%3E%3C/svg%3E");transform:scaleY(var(--d2,1));clip-path:inset(0 calc(100% - var(--lb2,100%)) 0 var(--la2,100%))}
.hc-carp{position:absolute;left:0;right:0;bottom:calc(var(--t)*3);height:calc(var(--t)*.32);background:linear-gradient(#4A524D,#2A302C 30%,#1E2420);clip-path:inset(0 calc((1 - var(--cp,1))*100%) 0 0)}
.hc-lab{position:absolute;z-index:1;right:5%;bottom:calc(var(--i)*var(--t) + var(--t)/2);transform:translateY(50%);font:600 .56rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--tinta);padding:.18rem .5rem;border-radius:999px;white-space:nowrap}
.hc-nivel{position:absolute;left:calc(var(--t)*4.49);right:0;bottom:calc(var(--t)*3.32);border-top:1.5px dashed var(--verde)}
.hc-nivel span{position:absolute;left:0;bottom:.35rem;font:500 .58rem var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--verde-hondo);white-space:nowrap}
/* rodillo vibratorio */
.hc-rod{position:absolute;z-index:4;left:calc(var(--rx,40)*1%);bottom:calc(var(--ry,3.32)*var(--t));width:clamp(150px,14vw,230px);transform:translateX(-80%)}
.hc-rod svg{display:block;width:100%;height:auto;overflow:visible}
.hc-rod.izq{transform:translateX(-20%)}
.hc-rod.izq svg{transform:scaleX(-1)}
.hc-ondas{opacity:0}
.hc-rod.vibra .hc-tambor{animation:hc-vib .05s linear infinite alternate}
.hc-rod.vibra .hc-ondas{animation:hc-ondas .5s ease-out infinite}
@keyframes hc-vib{to{transform:translateY(1px)}}
@keyframes hc-ondas{0%{opacity:.9;transform:translateY(0)}100%{opacity:0;transform:translateY(5px)}}
/* calas */
.hc-cala{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;gap:.25rem;transform:translateX(-50%) translateY(calc((1 - var(--k,1))*-14px));opacity:var(--k,1)}
.hc-cala svg{width:20px;height:auto}
.hc-cala b{order:-1;font:600 .58rem var(--f-mono);letter-spacing:.06em;white-space:nowrap;background:var(--papel);color:var(--verde-hondo);border:1px solid var(--verde);border-radius:999px;padding:.18rem .5rem}
.hc-cala.hc-k0{left:34%;bottom:var(--t);--k:var(--k0,1)}
.hc-cala.hc-k1{left:66%;bottom:calc(var(--t)*2);--k:var(--k1,1)}
.hc-cala.hc-k2{left:46%;bottom:calc(var(--t)*3.32);--k:var(--k2,1)}
/* lecturas */
.hc-ro{position:absolute;z-index:5;right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:clamp(1rem,3vh,1.8rem);width:min(540px,40vw);display:grid;grid-template-columns:1fr 1fr 1.25fr 1.15fr;background:var(--papel);border:1px solid var(--linea);border-radius:18px;box-shadow:0 30px 60px -46px rgba(12,26,18,.35);overflow:hidden}
.hc-ro .ro{padding:.7rem .85rem;border-left:1px solid var(--linea);min-width:0}
.hc-ro .ro:first-child{border-left:0}
.hc-ro .k{display:block;font:500 .54rem var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grafito)}
.hc-ro .v{display:block;margin-top:.15rem;font:600 1.18rem/1.15 var(--f-mono);color:var(--tinta);letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.hc-ro #hc-capa{font:700 .98rem/1.2 var(--f-disp);letter-spacing:-.01em;white-space:normal}
.hc-ro .v small,.hc-ro .ro>small{font-size:.6rem;color:var(--grafito);margin-left:.2rem;font-weight:500}
.hc-ro .ro>small{display:block;margin:.15rem 0 0;font:500 .56rem var(--f-mono);letter-spacing:.08em}
.hc-bar{position:relative;height:5px;border-radius:5px;background:var(--linea);margin-top:.45rem}
.hc-bar i{position:absolute;inset:0 auto 0 0;width:var(--gb,100%);border-radius:5px;background:linear-gradient(90deg,var(--arena),var(--verde))}
.hc-bar s{position:absolute;left:75%;top:-3px;bottom:-3px;width:1.5px;background:var(--tinta);text-decoration:none}
.hc-ro .est b{display:block;margin-top:.2rem;font:600 .68rem/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--tinta)}
.hc-ro .est b.ok{color:var(--verde-hondo)}
/* sello final */
.hc-sello{position:absolute;z-index:4;right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));top:calc(var(--hdr) + 3.4rem);display:grid;place-items:center;width:112px;height:112px;border:2px solid var(--verde);border-radius:50%;background:rgba(255,255,255,.88);color:var(--verde-hondo);font:600 .62rem/1.15 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;text-align:center;transform:rotate(-10deg)}
.hc-sello::before{content:"";position:absolute;inset:6px;border:1px dashed var(--verde);border-radius:50%}
.hc-sello b{display:block;font:800 .92rem var(--f-disp);letter-spacing:-.01em;text-transform:none}
.hc-sello small{display:block;font-size:.5rem;letter-spacing:.08em;color:var(--grafito)}
.hc--vivo .hc-sello{opacity:0;transform:rotate(-10deg) scale(1.6);transition:opacity .35s,transform .45s cubic-bezier(.3,1.6,.5,1)}
.hc--vivo.fin .hc-sello{opacity:1;transform:rotate(-10deg) scale(1)}
.hc .scroll-hint{left:auto;right:max(var(--pad),calc((100vw - var(--max))/2 + var(--pad)));bottom:auto;top:calc(var(--hdr) + 3.4rem);z-index:5;background:rgba(255,255,255,.92);padding:.45rem .7rem;border-radius:999px;border:1px solid var(--linea);opacity:calc(1 - var(--hp,0)*5)}
@media (min-width:901px) and (max-height:700px){.hc-card .lead-d{display:none}.hc-card .lead-m{display:block}.hc-card{padding:.85rem 1.1rem 1rem;bottom:.7rem}.hc-card .hero-btns{margin-top:.7rem}.hc-ro{bottom:.7rem}.hc-sello{width:96px;height:96px}}
@media (max-width:1100px) and (min-width:901px){.hc-sheet span:nth-child(3){display:none}}
/* celular: primero el texto y los dos botones; luego la escena se fija bajo el encabezado a pantalla completa */
@media (max-width:900px){
  .hc{--t:clamp(22px,4.2svh,34px);height:calc(var(--pin-off,0px) + 300vh)}
  .hc-stage{height:auto;top:calc(var(--hdr) - var(--pin-off,0px))}
  .hc-copy{position:relative;z-index:4;padding:88px var(--pad) .6rem}
  .hc-tit,.hc-card{position:static;width:auto;max-width:none}
  .hc-card{background:none;border:0;box-shadow:none;padding:0}
  .hc-viz{position:relative;height:calc(100vh - var(--hdr));height:calc(100svh - var(--hdr))}
  .hc-sheet{top:.7rem;left:var(--pad);right:var(--pad);padding:0;border:0;background:none;font-size:.52rem}
  .hc-sheet span:nth-child(n+2){display:none}
  .hc-ro{top:2.4rem;bottom:auto;left:var(--pad);right:var(--pad);width:auto;grid-template-columns:1fr 1fr}
  .hc-ro .ro{padding:.5rem .7rem}
  .hc-ro .ro:nth-child(3){border-left:0;border-top:1px solid var(--linea)}
  .hc-ro .ro:nth-child(4){border-top:1px solid var(--linea)}
  .hc-ro .v{font-size:1.02rem}
  .hc-suelo{height:max(26%,150px)}
  .hc-suelo span{left:auto;right:var(--pad)}
  .hc-terr{left:3%;bottom:max(26%,150px)}
  .hc-rod{width:clamp(100px,30vw,130px)}
  .hc-lab{right:4%;font-size:.5rem}
  .hc-sello{right:var(--pad);top:calc(2.4rem + 8.8rem);width:84px;height:84px;font-size:.5rem}
  .hc-sello b{font-size:.76rem}
  .hc .scroll-hint{display:none}
}
@media (prefers-reduced-motion:reduce){.hc{height:auto}.hc-stage{position:relative;top:auto;height:auto;min-height:100svh}.hc-rod.vibra .hc-tambor,.hc-rod.vibra .hc-ondas{animation:none}}
/* =====================================================================
   BOTONES FLOTANTES «NODO» (Layen, 2026-10-26): cada botón es un nodo del isotipo. Cada pocos segundos se
   DESPRENDEN DOS GRANOS: al alejarse estiran un cuello cóncavo (filtro metaball, la misma unión de los anillos
   del logo), se sueltan, flotan y regresan a fundirse. Contorno blanco del propio filtro (se lee sobre verde).
   El icono oficial de WhatsApp va encima, nítido (no pasa por el filtro).
   ===================================================================== */
.fab{background:none!important;border:0!important;box-shadow:none!important;animation:none!important;overflow:visible}
.fab-gota{position:absolute;left:50%;top:50%;width:200%;height:200%;max-width:none;transform:translate(-50%,-50%);overflow:visible;pointer-events:none;filter:drop-shadow(0 4px 15px rgba(0,0,0,.3))}
.fab-n,.fab-g{fill:var(--verde-hondo)}   /* el verde de los botones del sitio (Alberto, 2026-10-28) */
.floating-call-btn .fab-n,.floating-call-btn .fab-g{fill:var(--noche)}
.floating-call-btn .fab-gota{transform:translate(-50%,-50%) scaleX(-1)}
.fab .wa-icon,.fab>svg:not(.fab-gota){position:relative;z-index:1}
.fab-g{animation:fab-g1 6.5s cubic-bezier(.45,0,.2,1) infinite}
.fab-g.g2{animation-name:fab-g2}
.floating-call-btn .fab-g{animation-delay:-3.2s}
@keyframes fab-g1{0%,30%{transform:translate(0,0)}46%{transform:translate(-36px,-30px)}56%,68%{transform:translate(-47px,-39px)}84%,100%{transform:translate(0,0)}}
@keyframes fab-g2{0%,36%{transform:translate(0,0)}52%{transform:translate(-12px,-46px)}62%,72%{transform:translate(-15px,-60px)}88%,100%{transform:translate(0,0)}}
.fab{transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s}
.fab:hover{transform:scale(1.07)}
.fab:active{transform:scale(.94)}
.fab-txt{position:absolute;right:calc(100% + 14px);top:50%;white-space:nowrap;font:600 .86rem var(--f-disp);color:var(--tinta);background:var(--papel);border:1px solid var(--linea);border-radius:999px;padding:.55rem .9rem;box-shadow:0 14px 30px -18px rgba(12,26,18,.45);opacity:0;transform:translate(10px,-50%);transition:opacity .25s,transform .35s var(--ease);pointer-events:none}
@media (hover:hover) and (min-width:901px){.fab:hover .fab-txt,.fab:focus-visible .fab-txt{opacity:1;transform:translate(0,-50%)}}
@media (max-width:900px){.fab-txt{display:none}}
@media (prefers-reduced-motion:reduce){.fab-g{animation:none}}