/* Rubik autoalojada. Antes las 34 páginas cargaban la fuente desde Google con un
   <link rel="stylesheet"> a fonts.googleapis.com, y eso bloquea el render: el
   navegador no pinta NADA hasta resolver DNS + TLS + descarga de dos dominios
   ajenos (googleapis y gstatic), uno detrás del otro porque el CSS recién ahí te
   dice de dónde bajar el .woff2. Con la fuente en el propio servidor son cero
   dominios externos y el archivo sale del mismo origen que ya está conectado.
   De paso deja de haber una llamada a Google en cada visita, que para la Ley
   19.628 es una menos que explicar.

   Bajamos solo latin y latin-ext: el sitio es en castellano y los subsets
   cyrillic, cyrillic-ext, hebrew y arabic que sirve Google son peso muerto
   (arabic solito pesa más que los dos que sí usamos). Son fuentes variables,
   un archivo por subset cubre de 300 a 900 sin descargar un peso por corte.

   El unicode-range va copiado tal cual del CSS de Google (Rubik v31): es lo que
   le permite al navegador saltarse latin-ext si la página no tiene ni un
   carácter de ese rango. Si lo tocas a mano, se baja de más.

   Ojo con el orden: latin-ext va primero y latin después, igual que Google. Los
   dos declaran U+0304, U+0308 y U+0329 (marcas combinantes), y cuando dos
   @font-face se pisan gana el último; dejándolo así el que resuelve esos tres
   es latin, que es el archivo que igual se va a bajar siempre. */

/* latin-ext */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: "Rubik";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/assets/fonts/rubik-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  /* Los oscuros subieron un escalón completo de luminosidad. Los de antes
     (#050f16 / #06141d) eran casi negro puro y, como el grueso de las secciones
     va sobre fondo oscuro, la página entera se leía apagada. Estos mantienen
     exactamente el mismo tono azul-petróleo pero al doble de luz: sigue siendo
     un sitio de tono oscuro, no una pantalla apagada.
     --navy-700 NO se toca: no es un fondo, es la tinta sobre .bg-bone y
     .bg-white y el relleno del hover de los botones; aclararlo bajaría el
     contraste del texto de las secciones claras. */
  --navy-900:#0a1c26;--navy-800:#0f2833;--navy-700:#072233;--navy-600:#15455a;--navy-500:#1c5670;
  --teal-500:#02a294;--teal-600:#028074;--teal-300:#3fd6c7;
  --orange-500:#ec7016;--orange-400:#ff8a32;
  --bone:#f4f2ec;--bone-2:#e7e3d8;--paper:#fbfaf6;
  --concrete:#8aa0ab;--concrete-ink:#5d6f78;
  --line:rgba(244,242,236,.14);--line-dark:rgba(7,34,51,.12);
  /* Una sola familia en todo el sitio: Rubik, la misma del sitio anterior de DEXA.
     Se conservan los tres nombres de token para no tocar las 50+ reglas que los usan;
     --f-mono queda para los rótulos técnicos (van en mayúscula + letter-spacing). */
  --f-display:"Rubik",system-ui,sans-serif;--f-body:"Rubik",system-ui,-apple-system,sans-serif;--f-mono:"Rubik",system-ui,sans-serif;
  --step--1:clamp(.78rem,.74rem + .2vw,.9rem);--step-0:clamp(1rem,.95rem + .25vw,1.15rem);
  --step-1:clamp(1.2rem,1.1rem + .5vw,1.5rem);--step-2:clamp(1.5rem,1.3rem + 1vw,2.2rem);
  --step-3:clamp(2rem,1.6rem + 2vw,3.4rem);--step-4:clamp(2.6rem,1.9rem + 3.4vw,5rem);--step-5:clamp(3.2rem,2.1rem + 5.6vw,7.2rem);
  --container:1320px;--gutter:clamp(1.25rem,1rem + 3vw,5rem);
  --ease-out:cubic-bezier(.16,1,.3,1);--ease-inout:cubic-bezier(.76,0,.24,1);
}
*,*::before,*::after{box-sizing:border-box}*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:var(--step-0);line-height:1.6;color:var(--bone);background:var(--navy-800);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul{list-style:none}
::selection{background:var(--orange-500);color:#fff}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:.98;letter-spacing:-.02em;text-transform:uppercase}
.display{font-size:var(--step-5);line-height:.92;letter-spacing:-.035em}
.h1{font-size:var(--step-4)}.h2{font-size:var(--step-3)}.h3{font-size:var(--step-2);letter-spacing:-.01em}
/* Segundo nivel de h2, para los títulos largos de las páginas de servicio y de
   En los medios. Antes eran 30 font-size sueltos en el HTML con dos valores
   distintos, ninguno de la escala: el mismo tipo de título cambiaba de porte de
   una página a otra. Ahora cae en --step-2, que es el escalón que ya existía. */
.h2--sub{font-size:var(--step-2)}
p{text-wrap:pretty}
.lead{font-size:var(--step-1);line-height:1.45;font-weight:400}
.muted{color:var(--concrete)}
.text-brand{color:var(--teal-500)}.text-accent{color:var(--orange-500)}
.eyebrow{font-family:var(--f-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.28em;color:var(--teal-500);display:inline-flex;align-items:center;gap:.7em}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--orange-500);animation:pulse 2.4s var(--ease-out) infinite}
.eyebrow.no-dot::before{display:none}
/* Los títulos van con line-height .9, así que la tilde de MÉTODO o de NICOLÁS se
   sale por arriba de su caja de línea y llegaba a tocar el rótulo. Este respiro
   la despega sin mover el bloque entero. */
.eyebrow + .h1,.eyebrow + .h2,.eyebrow + .h3{margin-top:.55rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(236,112,22,.55)}70%{box-shadow:0 0 0 12px rgba(236,112,22,0)}100%{box-shadow:0 0 0 0 rgba(236,112,22,0)}}
.container{width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto}
.section{padding-block:clamp(4.5rem,3.5rem + 7vw,9.5rem);position:relative}
.section--tight{padding-block:clamp(3rem,2.5rem + 4vw,5.5rem)}
.bg-navy{background:var(--navy-800)}.bg-deep{background:var(--navy-900)}
.bg-bone{background:var(--bone);color:var(--navy-700)}
.bg-bone .muted{color:var(--concrete-ink)}.bg-bone .eyebrow{color:var(--teal-600)}
.bg-white{background:var(--paper);color:var(--navy-700)}
.bg-white .muted{color:var(--concrete-ink)}.bg-white .eyebrow{color:var(--teal-600)}
.rule-top{border-top:1px solid var(--line)}.bg-bone .rule-top,.bg-white .rule-top{border-color:var(--line-dark)}

/* botones */
.btn{--bg-btn:var(--orange-500);--fg-btn:#0a0a0a;position:relative;display:inline-flex;align-items:center;gap:.8em;padding:1.05em 2em;font-family:var(--f-mono);font-size:var(--step--1);text-transform:uppercase;letter-spacing:.16em;font-weight:700;background:var(--bg-btn);color:var(--fg-btn);border-radius:100px;overflow:hidden;isolation:isolate;transition:color .5s var(--ease-out),transform .4s var(--ease-out)}
.btn span{position:relative;z-index:2;display:inline-flex;align-items:center;gap:.7em}
.btn::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;background:var(--navy-700);transform:translateY(101%);transition:transform .55s var(--ease-out)}
.btn:hover::after{transform:translateY(0)}
.btn:hover{color:#fff;transform:translateY(-2px)}
.btn .arrow{transition:transform .45s var(--ease-out)}
.btn:hover .arrow{transform:translate(.3em,-.3em)}
.btn--ghost{--bg-btn:transparent;--fg-btn:var(--bone);border:1px solid var(--line)}
.btn--ghost::after{background:var(--orange-500)}
.btn--ghost:hover{color:#0a0a0a;border-color:var(--orange-500)}
.bg-bone .btn--ghost,.bg-white .btn--ghost{--fg-btn:var(--navy-700);border-color:rgba(7,34,51,.25)}
.btn--teal{--bg-btn:var(--teal-500);--fg-btn:#fff}
/* El enlace de cabecera de sección comparte gramática con el remate .cta-in:
   mismo color de acento y misma flecha. Antes iba en blanco liso y no se leía
   como enlace: parecía un rótulo más de la cabecera. */
.link-underline{position:relative;display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-mono);font-size:var(--step--1);font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding-bottom:.3em;color:var(--orange-500)}
.bg-bone .link-underline,.bg-white .link-underline{color:var(--teal-600)}
.link-underline svg{width:12px;height:12px;flex:none;transition:transform .4s var(--ease-out)}
.link-underline:hover svg{transform:translate(3px,-3px)}
.link-underline::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease-out)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

/* preloader */
.preloader{position:fixed;inset:0;z-index:9999;background:var(--navy-900);display:grid;place-items:center;transition:opacity .5s var(--ease-out),visibility .5s}
.preloader.done{opacity:0;visibility:hidden}
.preloader__inner{text-align:center;width:min(76vw,400px)}
.preloader__logo{height:52px;margin-inline:auto}
.preloader__bar{margin-top:1.6rem;height:2px;width:100%;background:var(--line);overflow:hidden}
.preloader__bar i{display:block;height:100%;background:var(--orange-500);transform-origin:left;transform:scaleX(0);transition:transform .3s}
.preloader__count{margin-top:.9rem;font-family:var(--f-mono);font-size:var(--step--1);letter-spacing:.3em;color:var(--concrete)}

/* cursor personalizado: eliminado. Se usa el cursor nativo del sistema. */
.cursor,.cursor-ring{display:none}

/* header */
.header{position:fixed;top:0;left:0;width:100%;z-index:1000;transition:transform .5s var(--ease-out),background .4s,border-color .4s;border-bottom:1px solid transparent}
.header.hide{transform:translateY(-110%)}
.header.solid{background:rgba(10,28,38,.88);backdrop-filter:blur(14px) saturate(140%);border-color:var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;height:82px;width:min(100% - var(--gutter)*2,1500px);margin-inline:auto}
/* El ® venía como <span> aparte porque el logo anterior no lo traía. Ahora va
   dentro del SVG, en su círculo y a la proporción del original. */
.nav__logo{display:flex;align-items:center}
.nav__logo img{height:36px;width:auto}
.nav__menu{display:flex;align-items:center;gap:1.9rem}
.nav__link{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.14em;color:var(--bone);position:relative;padding:.4rem 0;display:inline-flex;align-items:center;gap:.45em;opacity:.85;transition:opacity .3s}
.nav__link:hover{opacity:1}
.nav__link::after{content:"";position:absolute;left:0;bottom:-2px;width:100%;height:1px;background:var(--orange-500);transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease-out)}
.nav__link:hover::after,.nav__link[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.nav__caret{width:8px;height:8px;transition:transform .35s}
.nav__item:hover .nav__caret{transform:rotate(180deg)}
.nav__right{display:flex;align-items:center;gap:1.2rem}
.nav__cta{padding:.85em 1.6em}
/* mega menú */
.mega{position:absolute;top:calc(100% + 1px);left:0;width:100%;background:rgba(10,28,38,.98);backdrop-filter:blur(18px);border-bottom:1px solid var(--line);box-shadow:0 40px 80px rgba(0,0,0,.5);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s var(--ease-out),transform .35s var(--ease-out),visibility .35s}
.nav__item:hover .mega,.nav__item:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega::before{content:"";position:absolute;top:-14px;left:0;width:100%;height:14px}
.mega__in{width:min(100% - var(--gutter)*2,1500px);margin-inline:auto;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2.5rem;padding:2.4rem 0 2.6rem}
/* Los rótulos de columna del mega eran <h5>. Un menú es navegación, no la
   estructura del documento: como el <nav> va antes del <main>, el lector de
   pantalla abría el esquema de encabezados de las 34 páginas en h5 y recién
   después aparecía el <h1>. Ahora son párrafos rotulados; el <nav> y la lista
   de enlaces ya dan la estructura que hacía falta. El font-weight:700 va
   explícito porque antes lo ponía el navegador por ser <h5>, no esta regla. */
.mega__col .mega__t{font-family:var(--f-mono);font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-300);margin-bottom:1rem}
.mega__col .mega__t a{display:inline-flex;align-items:center;gap:.5em;color:var(--teal-300)}
.mega__col .mega__t a:hover{color:#fff}
.mega__col .mega__t a svg{width:11px;height:11px}
/* Ojo: este :not() nombra al rótulo para no pintar su enlace como uno más de la
   lista. Va atado a .mega__t, así que se mueve junto con la regla de arriba. */
.mega__col a:not(.mega__t a){display:flex;align-items:baseline;justify-content:space-between;gap:.8rem;padding:.5rem 0;font-size:.88rem;color:rgba(244,242,236,.82);border-bottom:1px dashed rgba(244,242,236,.08);transition:color .25s,padding-left .25s}
.mega__col a:not(.mega__t a):hover{color:#fff;padding-left:.4rem}
.mega__col a em{font-style:normal;font-family:var(--f-mono);font-size:.6rem;color:var(--concrete)}
.mega__feat{border:1px solid rgba(236,112,22,.45);border-radius:12px;padding:1.2rem 1.2rem 1.4rem;background:linear-gradient(160deg,rgba(236,112,22,.14),rgba(236,112,22,.04));display:flex;flex-direction:column;gap:.6rem}
.mega__feat .tag{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-400)}
.mega__feat b{font-family:var(--f-display);font-size:1.06rem;line-height:1.1;letter-spacing:-.01em}
.mega__feat p{font-size:.82rem;color:var(--concrete);line-height:1.5}
.mega__feat a{margin-top:auto;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-400)}
.mega__feat a:hover{color:#fff}
/* burger + menú móvil */
.burger{display:none;flex-direction:column;gap:6px;padding:8px;z-index:1101}
.burger i{width:26px;height:2px;background:var(--bone);transition:.35s var(--ease-out)}
.burger.open i:first-child{transform:translateY(4px) rotate(45deg)}
.burger.open i:last-child{transform:translateY(-4px) rotate(-45deg)}
.mmenu{position:fixed;inset:0;z-index:1100;background:var(--navy-900);padding:110px var(--gutter) 3rem;overflow-y:auto;transform:translateY(-100%);transition:transform .55s var(--ease-inout);display:flex;flex-direction:column}
.mmenu.open{transform:translateY(0)}
.mmenu a.mmain{font-family:var(--f-display);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;padding:.9rem 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
.mmenu a.mmain small{font-family:var(--f-mono);font-size:.62rem;color:var(--orange-500);letter-spacing:.14em}
.mmenu details{border-bottom:1px solid var(--line)}
.mmenu summary{font-family:var(--f-display);font-size:clamp(1.5rem,6vw,2.2rem);font-weight:800;text-transform:uppercase;letter-spacing:-.02em;padding:.9rem 0;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center}
.mmenu summary::after{content:"+";font-family:var(--f-mono);font-size:1.4rem;color:var(--orange-500);transition:transform .3s;margin-left:auto}
.mmenu details summary small{display:none}
.mmenu details[open] summary::after{transform:rotate(45deg)}
.mmenu .sub{padding:0 0 1.2rem;display:flex;flex-direction:column;gap:.15rem}
.mmenu .sub a{font-size:.95rem;color:var(--concrete);padding:.42rem 0}
.mmenu .sub a.mother{color:var(--teal-300);font-weight:700}
.mmenu .sub a:hover{color:#fff}
.mmenu__foot{margin-top:auto;padding-top:2rem;font-family:var(--f-mono);font-size:.72rem;color:var(--concrete);line-height:2}

/* hero */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy-900)}
.hero__media{position:absolute;inset:0}
.hero__media video,.hero__media>img{width:100%;height:100%;object-fit:cover;transform:scale(1.08)}
/* El velo del hero era casi opaco arriba (.62) y prácticamente negro abajo (.94):
   la foto —que es lo que hay que ver— quedaba sepultada. Ahora el centro va casi
   limpio y el oscuro se concentra en la franja de abajo, que es la única que de
   verdad necesita contraste porque ahí van el h1 y la bajada. El h1 ya trae su
   propio drop-shadow (más abajo), así que la legibilidad no depende del velo.
   La primera capa es un velo lateral: el texto del hero siempre va pegado a la
   izquierda, así que sólo esa franja necesita piso. Con fotos claras (el escenario
   del ETMday, la calle de asesorías) la bajada se lavaba; así queda legible sin
   apagar la foto entera, que era justo lo que había que evitar. */
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(10,28,38,.58) 0%,rgba(10,28,38,.36) 26%,rgba(10,28,38,.10) 48%,rgba(10,28,38,0) 66%),linear-gradient(180deg,rgba(10,28,38,.38) 0%,rgba(10,28,38,.08) 38%,rgba(10,28,38,.10) 52%,rgba(10,28,38,.62) 80%,rgba(10,28,38,.84) 100%)}
.hero__grain{position:absolute;inset:0;opacity:.5;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E")}
.hero__inner{position:relative;z-index:2;width:min(100% - var(--gutter)*2,var(--container));margin-inline:auto;padding:9rem 0 clamp(3rem,2rem + 4vw,6rem)}
/* Las píldoras del héroe (.hero__kicker / .chip) y la promesa de las 48 h salieron
   de la portada a pedido del cliente: sobraba texto sobre el video. Los datos
   siguen en la página — los 18 años y los 0 accidentes en el bloque de cifras, la
   autorización SEREMI en "por qué DEXA" y las 48 h en las preguntas frecuentes.
   El CSS se va con ellas porque solo las usaba el home; .hero__promise se queda,
   que las otras 33 páginas sí la muestran. */
/* La sombra va como drop-shadow del h1 completo, NO como text-shadow.
   SplitType envuelve cada palabra en .word{overflow:hidden} y ese overflow recortaba
   la sombra al rectángulo de la palabra: se veía un recuadro gris de bordes duros. */
.hero h1{font-size:var(--step-5);max-width:20ch;filter:drop-shadow(0 8px 26px rgba(0,0,0,.5))}
/* Home: el slogan completo del cliente es largo, así que baja un escalón de tamaño
   y la cola calificadora va más chica, dentro del mismo h1. */
.hero--home h1{font-size:clamp(2.1rem,1.3rem + 2.8vw,3.4rem);max-width:22ch}
.hero h1 .h1__cola{display:block;font-size:.4em;line-height:1.2;letter-spacing:-.01em;margin-top:.6em;color:rgba(244,242,236,.86)}
@media(max-width:768px){.hero h1 .h1__cola{font-size:.5em}}
/* Al sacar las píldoras y la promesa, el bloque perdió alto y con align-items:
   flex-end quedaba pegado abajo con todo el vacío arriba. En el home se centra;
   el padding superior es mayor que el inferior para descontar el header fijo, así
   el texto queda centrado en el espacio que se ve y no en el del contenedor. */
.hero--home{align-items:center}
.hero--home .hero__inner{padding-top:7rem;padding-bottom:3rem}
.hero--home .hero__sub{margin-top:1.2rem}
.hero--home .hero__actions{margin-top:1.6rem}
.hero h1 .hl{color:var(--teal-300)}
.hero h1 em{font-style:normal;color:var(--orange-400)}
.hero__sub{margin-top:1.6rem;max-width:56ch;color:rgba(244,242,236,.88);font-size:var(--step-1);text-shadow:0 1px 12px rgba(6,18,26,.65)}
.hero__sub b{color:#fff}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem}
.hero__promise{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:2rem;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--teal-300);text-shadow:0 1px 10px rgba(6,18,26,.75)}
.hero__promise svg{width:16px;height:16px;stroke:var(--teal-300);fill:none;stroke-width:2}
.hero__scroll{position:absolute;right:var(--gutter);bottom:2.2rem;z-index:3;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:var(--concrete);writing-mode:vertical-rl;display:flex;align-items:center;gap:.8rem}
.hero__scroll i{width:1px;height:56px;background:linear-gradient(var(--orange-500),transparent);display:block;animation:drip 1.8s var(--ease-out) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}55%{transform:scaleY(1);transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
/* hero interior */
.hero--in{min-height:0;align-items:flex-end}
.hero--in .hero__inner{padding:10.5rem 0 clamp(2.6rem,2rem + 3vw,4.6rem)}
.hero--in h1{font-size:var(--step-4);max-width:19ch}
/* La misma sombra que .hero__sub: el teal se apoya bien sobre las fotos oscuras,
   pero en heroes con zonas claras (un traje blanco, un cielo quemado) la miga
   quedaba ilegible. La sombra la salva sin cambiar el color de marca. */
.crumb{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300);margin-bottom:1.4rem;display:flex;flex-wrap:wrap;gap:.6em;align-items:center;text-shadow:0 1px 10px rgba(6,18,26,.75)}
.crumb a{opacity:.85}.crumb a:hover{color:#fff;opacity:1}
.crumb .sep{opacity:.4}
/* El ultimo tramo es la pagina actual, no un enlace: va en el hueso del subtitulo
   y no en teal. Ademas de distinguirlo del resto de la miga, el teal sobre las
   zonas claras de algunas fotos de hero no se leia. */
.crumb>span:last-child{color:rgba(244,242,236,.9)}

/* huincha de clientes (marquee delgada, todas las páginas) */
.huincha{background:var(--paper);border-bottom:1px solid var(--line-dark);padding:.9rem 0;overflow:hidden;position:relative}
.huincha__label{position:absolute;left:0;top:0;bottom:0;z-index:2;display:flex;align-items:center;padding:0 1.2rem;background:var(--paper);font-family:var(--f-mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--concrete-ink)}
.huincha__track{display:flex;gap:3.4rem;width:max-content;animation:huincha 46s linear infinite;padding-left:9rem}
.huincha:hover .huincha__track{animation-play-state:paused}
.huincha img{height:26px;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.05);opacity:.75;transition:filter .3s,opacity .3s}
.huincha img:hover{filter:none;opacity:1}
@keyframes huincha{to{transform:translateX(-50%)}}

/* secciones genéricas */
/* La bajada iba a la derecha del título y alineada a su base. Con títulos de dos
   líneas quedaba flotando a media altura y separada del título del que depende,
   con un hueco muerto al medio. Ahora baja a su propia línea, debajo.
   Va en grid y no en flex a propósito: con flex-wrap, un flex-basis de 100% lo
   recorta el max-width antes de decidir el corte de línea, así que las bajadas
   cortas se quedaban arriba y las largas bajaban — la mitad de las secciones de
   una forma y la mitad de la otra. En grid el salto lo da grid-column y no
   depende del largo del texto.
   Los enlaces de sección sí siguen a la derecha del título: ahí la posición es
   la que los hace legibles como acción y no como parte del texto. */
.sec-head{display:grid;grid-template-columns:1fr auto;align-items:end;column-gap:2rem;row-gap:1.15rem;margin-bottom:clamp(2.6rem,2rem + 2.5vw,4.5rem)}
.sec-head .h2{max-width:16ch}
.sec-head > p{grid-column:1/-1;max-width:62ch}
.sec-head > a{justify-self:end}
/* En móvil el título y el enlace no caben en la misma fila y el grid, a
   diferencia del flex-wrap que había antes, no los baja solo: se iban al costado
   y la sección desbordaba. Una sola columna y el enlace queda debajo. */
@media(max-width:768px){.sec-head{grid-template-columns:1fr}.sec-head > a{justify-self:start}}
/* display:flex explícito: la regla de arriba pasó a grid y flex-direction ahí no
   hace nada. */
.sec-head--center{display:flex;text-align:center;justify-content:center;flex-direction:column;align-items:center;gap:1.2rem}

/* stats */
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(1.5rem,1rem + 2vw,3rem)}
.stat{border-left:1px solid var(--line);padding-left:clamp(1.2rem,1rem + 1vw,2rem)}
.stat:first-child{border-left:none;padding-left:0}
/* La caja de la cifra mide siempre lo mismo aunque el cuerpo cambie, y el contenido
   se apoya abajo. Así los cinco números comparten línea de base y los rótulos
   arrancan todos a la misma altura. */
.stat__num{font-family:var(--f-display);font-weight:900;font-size:clamp(2.6rem,1.8rem + 3.4vw,4.6rem);line-height:1;letter-spacing:-.04em;color:#fff;display:flex;align-items:flex-end;min-height:clamp(2.6rem,1.8rem + 3.4vw,4.6rem)}
.stat__num small{font-size:.42em;color:var(--orange-500);font-weight:800;letter-spacing:0}
/* "TODAS" es palabra, no cifra: a 4,6rem se come la columna y rompe la grilla de cinco. */
.stat__num--palabra{font-size:clamp(1.7rem,1.1rem + 2vw,3rem)}
.stat__label{margin-top:.8rem;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete)}
.bg-bone .stat__num,.bg-white .stat__num{color:var(--navy-700)}
.bg-bone .stat__label,.bg-white .stat__label{color:var(--concrete-ink)}
.bg-bone .stat,.bg-white .stat{border-color:var(--line-dark)}

/* servicios cards */
.svc-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4rem}
.svc{grid-column:span 4;position:relative;display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--navy-600);border:1px solid var(--line);min-height:380px;transition:transform .45s var(--ease-out),border-color .45s,box-shadow .45s}
.svc:nth-child(1),.svc:nth-child(2){grid-column:span 6}
.svc:hover{transform:translateY(-8px);border-color:rgba(2,162,148,.5);box-shadow:0 30px 70px rgba(0,0,0,.45)}
.svc__img{position:relative;height:210px;overflow:hidden}
.svc__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.svc:hover .svc__img img{transform:scale(1.07)}
.svc__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,20,29,.85))}
.svc__num{position:absolute;top:1rem;left:1rem;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;color:#fff;background:rgba(10,28,38,.58);backdrop-filter:blur(6px);padding:.5em 1em;border-radius:100px;border:1px solid rgba(244,242,236,.2)}
.svc__body{padding:1.6rem 1.6rem 1.8rem;display:flex;flex-direction:column;gap:.6rem;flex:1}
/* Un solo porte para el título de tarjeta de servicio. Los 20 títulos largos
   traían font-size:1.05rem suelto en el HTML, así que la misma tarjeta cambiaba
   de tamaño según lo que dijera el texto. Ahora todos miden igual y el título
   largo simplemente ocupa más líneas: la tarjeta es flex y se empareja sola. */
.svc__body h3{font-size:1.3rem;text-wrap:balance}
.svc__body p{font-size:.9rem;color:var(--concrete);flex:1}
.svc__link{display:inline-flex;align-items:center;gap:.5em;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-300)}
.svc__link svg{width:12px;height:12px;transition:transform .4s var(--ease-out)}
.svc:hover .svc__link svg{transform:translate(3px,-3px)}
.svc__subs{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.4rem}
.svc__subs a{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;padding:.45em .9em;border:1px solid rgba(244,242,236,.18);border-radius:100px;color:var(--concrete);transition:all .3s}
.svc__subs a:hover{border-color:var(--teal-500);color:#fff;background:rgba(2,162,148,.15)}
.bg-bone .svc,.bg-white .svc{background:#fff;border-color:var(--line-dark)}
.bg-bone .svc__body p,.bg-white .svc__body p{color:var(--concrete-ink)}
.bg-bone .svc__subs a,.bg-white .svc__subs a{border-color:rgba(7,34,51,.18);color:var(--concrete-ink)}
.bg-bone .svc__subs a:hover,.bg-white .svc__subs a:hover{color:var(--navy-700);border-color:var(--teal-600);background:rgba(2,162,148,.08)}

/* proceso */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;counter-reset:step}
.step{position:relative;border:1px solid var(--line);border-radius:14px;padding:2rem 1.5rem 1.7rem;overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end;isolation:isolate}
/* La foto se veía como un rectángulo negro: al 34% de opacidad y con el degradado
   cerrando en .92 no quedaba nada de imagen, pero el archivo se descargaba igual.
   Ahora la foto respira arriba y el degradado solo oscurece donde va el texto. */
.step img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;opacity:.62;transition:opacity .5s,transform .8s var(--ease-out)}
.step::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,28,38,.04) 0%,rgba(10,28,38,.30) 40%,rgba(10,28,38,.80) 100%)}
.step:hover img{opacity:.78;transform:scale(1.06)}
.step__n{font-family:var(--f-mono);font-size:.66rem;letter-spacing:.2em;color:var(--orange-400);margin-bottom:.8rem}
.step h3{font-size:1.18rem;margin-bottom:.5rem;text-shadow:0 1px 12px rgba(5,15,22,.6)}
/* Las cuatro tarjetas anclan el texto abajo, así que un párrafo de dos líneas
   subía su título 22px respecto de los de tres. Se reserva el alto de tres
   líneas y los cuatro <h3> arrancan a la misma altura. */
.step p{font-size:.86rem;line-height:1.55;color:rgba(244,242,236,.92);min-height:4.65em;text-shadow:0 1px 10px rgba(5,15,22,.55)}

/* split */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,1.5rem + 3vw,5rem);align-items:center}
.split--rev .split__media{order:2}
.split__media{position:relative;border-radius:16px;overflow:hidden}
.split__media img{width:100%;height:100%;max-height:560px;object-fit:cover;transition:transform .9s var(--ease-out)}
/* La foto del equipo es muy apaisada: al lado de una columna de texto alta
   dejaba un hueco enorme y la gente salía diminuta. Recortada a 4:3 el grupo
   llena el cuadro y las dos columnas quedan parejas. */
.split__media--4x3 img{aspect-ratio:4/3;height:auto;max-height:none}
.split__media:hover img{transform:scale(1.04)}
.split__media figcaption{position:absolute;left:1rem;bottom:1rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,28,38,.6);backdrop-filter:blur(8px);color:var(--bone);padding:.6em 1.1em;border-radius:100px;border:1px solid rgba(244,242,236,.2)}
.split__body .h2{margin:1.2rem 0 1.4rem}
.split__body p{max-width:52ch}

/* insignias — los dos servicios que mandan, uno al lado del otro.
   Antes iban en dos .split seguidos: el mismo esqueleto dos veces, dos pantallas
   de alto, y el visitante leía dos monólogos en vez de comparar. */
.insignias{display:grid;grid-template-columns:1fr 1fr;column-gap:clamp(2rem,1.5rem + 3vw,4.5rem);row-gap:0}
.insignia{display:flex;flex-direction:column}
/* Las dos columnas tienen que leerse en paralelo: si un título ocupa dos líneas
   y el otro una, los párrafos, las listas y los botones quedan desfasados y ya
   no se comparan. Con subgrid cada fila mide lo mismo en las dos columnas.
   El separador vertical lo ponen los márgenes de cada bloque, no el row-gap. */
@supports (grid-template-rows:subgrid){
  .insignias{grid-template-rows:auto auto auto auto auto}
  .insignia{display:grid;grid-row:span 5;grid-template-rows:subgrid}
}
.insignia__media{position:relative;border-radius:16px;overflow:hidden;margin-bottom:1.6rem}
.insignia__media img{display:block;width:100%;aspect-ratio:5/4;object-fit:cover;transition:transform .9s var(--ease-out)}
.insignia__media:hover img{transform:scale(1.04)}
.insignia__media figcaption{position:absolute;left:1rem;bottom:1rem;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;background:rgba(10,28,38,.6);backdrop-filter:blur(8px);color:var(--bone);padding:.6em 1.1em;border-radius:100px;border:1px solid rgba(244,242,236,.2)}
.insignia .h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin:.9rem 0 1rem}
.insignia__media + .eyebrow,.insignia > .eyebrow:first-child{margin-bottom:.2rem}
.insignia p{max-width:46ch}
.insignia .feature-list{margin:1.4rem 0 1.8rem}
.insignia .btn{margin-top:auto;align-self:flex-start;justify-self:start}

/* respaldos — la tira que prueba lo que afirma la lista de arriba.
   Eran tres tarjetas grandes con un logo chico al medio y mucho aire muerto, y la
   tercera repetía por cuarta vez los 18 años y las 15.000 horas que ya dicen la
   promesa del hero, el bloque de cifras y el propio título de esta sección. Sin
   ella quedan solo los dos organismos que efectivamente respaldan a DEXA, en una
   barra compacta y rotulada: dos sellos leen como credencial, tres tarjetas
   leían como relleno. */
.respaldos{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin-top:2.6rem;padding-top:1.9rem;border-top:1px solid var(--line-dark)}
/* El rótulo empuja los sellos al otro extremo: así la barra ocupa el ancho que
   ya tiene la línea de arriba, en vez de amontonarse en el primer tercio. */
.respaldos__label{font-family:var(--f-mono);font-size:var(--step--1);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete-ink);margin:0 auto 0 0}
/* Alto fijo: los dos sellos tienen proporciones distintas, así que dejar que cada
   caja creciera con su logo las dejaba desparejas y ya no leían como un par. */
.respaldo{background:#fff;border:1px solid var(--line-dark);border-radius:12px;height:88px;padding:.85rem 1.5rem;display:grid;place-items:center}
.respaldo img{display:block;max-width:100%;width:auto;object-fit:contain}
/* Los dos sellos no tienen la misma forma: el de la SEREMI es casi cuadrado y el
   de Mutual es un logotipo apaisado. Igualando el alto, el primero se veía la
   mitad de grande. Se iguala el área óptica, no la altura. */
.respaldo--seremi img{max-height:60px}
.respaldo--mutual img{max-height:45px}
.feature-list{margin:1.8rem 0 2.2rem;display:grid;gap:.15rem}
.feature-list li{display:flex;gap:.9rem;align-items:flex-start;padding:.7rem 0;border-bottom:1px dashed var(--line);font-size:.95rem}
.bg-bone .feature-list li,.bg-white .feature-list li{border-color:var(--line-dark)}
.feature-list li::before{content:"";flex:none;width:20px;height:20px;margin-top:.15rem;border-radius:6px;background:rgba(2,162,148,.14);border:1.5px solid var(--teal-500);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302a294' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-size:12px;background-position:center;background-repeat:no-repeat}

/* videos */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.video-grid--1{grid-template-columns:1fr;max-width:900px;margin-inline:auto}
.video-grid--2{grid-template-columns:repeat(2,1fr)}
.video-grid--4{grid-template-columns:repeat(4,1fr)}
.yt{position:relative;border-radius:14px;overflow:hidden;background:var(--navy-900);border:1px solid var(--line);aspect-ratio:16/9;cursor:pointer;isolation:isolate}
.yt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-out),opacity .4s}
.yt:hover img{transform:scale(1.05)}
/* El velo arrancaba en el 55% y llegaba a .85: suficiente para un rótulo de una
   línea, pero en el móvil los títulos largos se parten en dos y la línea de
   arriba quedaba donde el velo casi no tapa nada. Medido: "DEXA Chile
   Demoliciones — Rodrigo Germain en terreno" daba 3,7:1 contra el fondo, bajo el
   4,5:1 que pide texto de este porte. Con estos cuatro topes el peor rótulo sube
   a 6,3:1 sin oscurecer la mitad de arriba de la foto (medido: 0,0% de cambio). */
.yt::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(10,28,38,.18) 70%,rgba(10,28,38,.70) 88%,rgba(10,28,38,.82));z-index:1}
/* Con el video ya cargado hay que sacar el degradado: cubre todo el iframe y se
   comía los clics, por eso el video partía pero después no se podía pausar. */
.yt.is-playing::after{content:none}
.yt.is-playing{cursor:default}
.yt__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;width:64px;height:64px;border-radius:50%;background:var(--orange-500);display:grid;place-items:center;transition:transform .4s var(--ease-out),background .3s;box-shadow:0 10px 30px rgba(236,112,22,.45)}
.yt:hover .yt__play{transform:translate(-50%,-50%) scale(1.12)}
.yt__play svg{width:22px;height:22px;fill:#fff;margin-left:3px}
.yt__title{position:absolute;left:1rem;right:1rem;bottom:.9rem;z-index:2;font-family:var(--f-mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--bone)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt--hero{aspect-ratio:21/9}
.video-feature{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(2rem,1.5rem + 3vw,4rem);align-items:center}
.video-feature .yt{margin:0}
/* La miniatura mas grande que guarda YouTube de estos videos son 640px de ancho
   —maxresdefault y hq720 no existen para subidas de esa epoca—, asi que estirar
   el bloque a los 1320px del contenedor lo dejaba al 48% de su resolucion. Acotarlo
   a 760px y centrarlo lo deja limpio sin que pierda peso en la seccion — es ademas
   el mismo ancho que ya tiene este bloque en la home. Va despues de
   .video-feature .yt para que ese margin:0 no le quite el centrado. */
.yt--hero{max-width:760px;margin-inline:auto}
@media(max-width:900px){.video-feature{grid-template-columns:1fr}}

/* testimonios */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.testi{position:relative;display:flex;flex-direction:column;gap:1rem;background:#fff;color:var(--navy-700);border-radius:14px;padding:1.8rem;border:1px solid var(--line-dark);transition:transform .4s var(--ease-out),box-shadow .4s}
.testi:hover{transform:translateY(-6px);box-shadow:0 26px 60px rgba(5,15,22,.14)}
.testi__q{font-family:var(--f-display);font-size:3rem;line-height:.6;color:var(--orange-500);font-weight:900}
.testi__frase{font-size:1.02rem;font-weight:600;line-height:1.45;flex:none}
.testi__detalle{font-size:.83rem;color:var(--concrete-ink);line-height:1.55;flex:1}
.testi__meta{display:flex;align-items:center;gap:1rem;border-top:1px solid var(--line-dark);padding-top:1.1rem}
.testi__meta img{height:34px;width:auto;object-fit:contain}
.testi__meta b{display:block;font-size:.92rem}
.testi__meta span{font-size:.74rem;color:var(--concrete-ink)}
.testi__comuna{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--teal-600)}
.testi__cert{display:inline-flex;align-items:center;gap:.45em;margin-left:auto;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--orange-500);border:1px solid rgba(236,112,22,.4);padding:.5em .9em;border-radius:100px;transition:all .3s}
.testi__cert:hover{background:var(--orange-500);color:#fff}
.testi__cert svg{width:12px;height:12px}
/* certificados */
.cert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.cert{position:relative;border-radius:12px;overflow:hidden;background:#fff;border:1px solid var(--line-dark);transition:transform .4s var(--ease-out),box-shadow .4s}
.cert:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(5,15,22,.16)}
.cert img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:top}
/* La ficha pasó de decir "Certificado — vedisa ddc" a decir de qué obra se trata:
   quién la encargó, dónde y cuántos metros. Todo sale del propio certificado. */
.cert span{display:block;color:var(--navy-700)}
.cert__cli{padding:.8rem .9rem .25rem;font-family:var(--f-display);font-size:.9rem;line-height:1.2;letter-spacing:-.01em}
.cert__det{padding:0 .9rem .9rem;font-size:.72rem;line-height:1.35;color:var(--concrete-ink)}
/* Filtro por servicio: pastillas sobre la grilla. */
.filtros{display:flex;flex-wrap:wrap;align-items:center;gap:.55rem;margin-bottom:1.8rem}
.filtro{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
        padding:.62em 1.15em;border-radius:100px;border:1px solid var(--line-dark);background:transparent;
        color:var(--navy-700);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.filtro:hover{border-color:var(--teal-600)}
.filtro.is-on{background:var(--navy-700);border-color:var(--navy-700);color:var(--bone)}
.filtro:focus-visible{outline:2px solid var(--orange-500);outline-offset:2px}
.filtros__cuenta{margin-left:auto;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-ink)}
.bg-navy .filtro,.bg-deep .filtro{border-color:var(--line);color:var(--bone)}
.bg-navy .filtro.is-on,.bg-deep .filtro.is-on{background:var(--bone);border-color:var(--bone);color:var(--navy-700)}
.bg-navy .filtros__cuenta,.bg-deep .filtros__cuenta{color:var(--concrete)}
@media(max-width:640px){.filtros__cuenta{margin-left:0;width:100%}}

/* equipo */
/* Dos caras, no tres: Raúl Castellanos pasó a los departamentos, que es donde
   corresponde. Con repeat(3,1fr) quedaba una columna vacía y el par descentrado. */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;max-width:720px;margin-inline:auto}
.team{text-align:center}
.team__foto{width:min(220px,60vw);aspect-ratio:1;border-radius:50%;overflow:hidden;margin:0 auto 1.4rem;border:4px solid var(--orange-500);box-shadow:0 20px 50px rgba(0,0,0,.35);transition:transform .45s var(--ease-out)}
.team:hover .team__foto{transform:scale(1.05)}
.team__foto img{width:100%;height:100%;object-fit:cover}
.team b{font-family:var(--f-display);font-size:1.15rem;letter-spacing:-.01em;display:block}
.team span{font-size:.86rem;color:var(--concrete)}
.bg-bone .team span,.bg-white .team span{color:var(--concrete-ink)}
.depto-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1.2rem}
.depto{border:1px solid var(--line);border-radius:12px;padding:1.6rem;transition:border-color .3s,transform .4s var(--ease-out)}
.depto:hover{border-color:var(--teal-500);transform:translateY(-4px)}
.depto h3{font-size:1rem;margin-bottom:.6rem;color:var(--teal-300)}
.depto p{font-size:.84rem;color:var(--concrete)}
.bg-bone .depto,.bg-white .depto{border-color:var(--line-dark)}
.bg-bone .depto h3,.bg-white .depto h3{color:var(--teal-600)}
/* Tres de los cinco departamentos tienen logo propio del cliente (señalética de
   asbesto, Mutual de Seguridad, isotipo DEXA) y va arriba, en un cuadro blanco de
   alto fijo para que los tres queden alineados aunque tengan proporciones distintas.
   Si el texto arrancara arriba, las tarjetas con y sin logo quedarían desparejas;
   con la columna flexible y el h3 empujado con margin-top:auto, todos los títulos y
   descripciones cierran a la misma altura y el logo flota arriba donde lo hay. */
.depto{display:flex;flex-direction:column}
.depto h3{margin-top:auto}
.depto__logo{height:96px;margin:-.4rem 0 1.1rem;display:grid;place-items:center;background:#fff;border-radius:8px;padding:.7rem}
/* El tope va en píxeles, no en 100%: el porcentaje no resuelve contra la caja de
   96px y los logos verticales (la señalética de asbesto, la D de DEXA) se salían
   por arriba y se montaban sobre el título. */
.depto__logo img{max-width:100%;max-height:74px;width:auto;height:auto;object-fit:contain}
/* Ingeniería Estructural es un departamento con nombre y cara. La foto va redonda
   dentro del mismo recuadro blanco que usan los logos, para que la tarjeta siga
   siendo cuadrada como las otras tres y la persona se lea como persona. */
.depto__logo--persona img{width:74px;height:74px;max-width:74px;border-radius:50%;object-fit:cover;border:2px solid var(--orange-500)}
.bg-bone .depto p,.bg-white .depto p{color:var(--concrete-ink)}

/* FAQ acordeón */
.faq{max-width:860px;margin-inline:auto;border-top:1px solid var(--line-dark)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1.4rem;padding:1.5rem .4rem;font-family:var(--f-display);font-weight:700;font-size:clamp(1.02rem,.95rem+.4vw,1.3rem);letter-spacing:-.01em;transition:color .25s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--teal-600)}
.faq summary .ico{flex:none;width:34px;height:34px;border-radius:50%;border:1.5px solid var(--teal-600);display:grid;place-items:center;transition:background .3s,transform .35s var(--ease-out)}
.faq summary .ico svg{width:13px;height:13px;stroke:var(--teal-600);stroke-width:2.4;fill:none;transition:stroke .3s}
.faq details[open] summary .ico{background:var(--teal-600);transform:rotate(45deg)}
.faq details[open] summary .ico svg{stroke:#fff}
.faq details p{padding:0 3.4rem 1.6rem .4rem;color:var(--concrete-ink);max-width:62ch}

/* obras */
.obra-feat{position:relative;border-radius:18px;overflow:hidden;background:linear-gradient(140deg,var(--navy-600),var(--navy-800));border:1px solid rgba(236,112,22,.35);display:grid;grid-template-columns:1.05fr .95fr;min-height:420px}
.obra-feat__body{padding:clamp(1.8rem,1.4rem + 2vw,3.4rem);display:flex;flex-direction:column;gap:1.1rem}
.obra-feat__tag{display:inline-flex;align-items:center;gap:.6em;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--orange-400)}
.obra-feat__tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--orange-500);animation:pulse 2.4s infinite}
.obra-feat h3{font-size:clamp(1.7rem,1.3rem + 1.8vw,2.6rem)}
.obra-feat .where{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-300)}
.obra-feat__metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:auto;padding-top:.6rem}
.obra-feat__metrics div{border-left:2px solid var(--orange-500);padding-left:.9rem}
.obra-feat__metrics b{font-family:var(--f-display);font-size:clamp(1.3rem,1rem + 1.2vw,2rem);display:block;line-height:1}
.obra-feat__metrics span{font-size:.7rem;color:var(--concrete);text-transform:uppercase;letter-spacing:.08em;font-family:var(--f-mono)}
.obra-feat__logos{display:flex;gap:1rem;align-items:center;margin-top:auto;padding-top:1.2rem}
.obra-feat__logos div{background:#fff;border-radius:10px;padding:.7rem 1rem;min-width:120px;height:58px;display:grid;place-items:center}
.obra-feat__logos img{max-height:40px;max-width:130px;object-fit:contain}
.obra-feat__media{position:relative;min-height:280px}
.obra-feat__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.obra-feat__media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--navy-800) 0%,transparent 30%)}
.obra-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:1rem}
.obra-logo{background:#fff;border-radius:12px;border:1px solid var(--line-dark);aspect-ratio:16/10;display:grid;place-items:center;padding:1rem;transition:transform .35s var(--ease-out),box-shadow .35s}
.obra-logo:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(5,15,22,.12)}
.obra-logo img{max-height:56px;max-width:100%;object-fit:contain;filter:saturate(.9)}
/* Clientes nuevos que todavía no mandan su logo: van con el nombre compuesto, en
   la misma caja que los demás, para que la grilla no quede con huecos. Cuando
   llegue el logo se cambia el rótulo por la imagen y no hay que tocar nada más. */
.obra-logo--txt b{font-family:var(--f-display);font-size:1.05rem;letter-spacing:-.01em;line-height:1.15;
                  text-align:center;color:var(--navy-700);text-wrap:balance}
/* galería */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gallery figure{position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.gallery figure:hover img{transform:scale(1.08)}
.gallery figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,28,38,.7));opacity:0;transition:opacity .4s}
.gallery figure:hover::after{opacity:1}
.gallery figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.7rem;z-index:2;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:all .4s var(--ease-out)}
.gallery figure:hover figcaption{opacity:1;transform:none}
.gallery--3{grid-template-columns:repeat(3,1fr)}
/* Pantallazos de celular (295px de ancho, verticales) metidos en la caja 4/3 de la
   galeria: salian recortados a una franja del centro y encima estirados un 25%.
   Aca conservan su proporcion vertical y no pasan del ancho que tiene el archivo,
   asi que se ven exactamente como se tomaron. */
.gallery--tel{align-items:start;justify-items:center}
.gallery--tel figure{aspect-ratio:auto;width:100%;max-width:295px}
.gallery--tel img{height:auto;object-fit:contain}

/* media / prensa */
.press-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1.6rem}
.press-card{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--navy-600);display:flex;flex-direction:column;transition:transform .4s var(--ease-out),border-color .4s}
.press-card:hover{transform:translateY(-6px);border-color:rgba(2,162,148,.5)}
.press-card__img{aspect-ratio:16/10;overflow:hidden}
.press-card__img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease-out)}
.press-card:hover .press-card__img img{transform:scale(1.06)}
.press-card__body{padding:1.4rem;display:flex;flex-direction:column;gap:.5rem;flex:1}
.press-card__body .tag{font-family:var(--f-mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--orange-400)}
/* La tarjeta es oscura aunque la sección sea clara: sin color propio el título
   heredaba el azul del texto de la sección y quedaba más apagado que su bajada.
   Se fija el color y la jerarquía vuelve a su orden. */
.press-card__body h3{font-size:1.12rem;color:var(--bone);line-height:1.25;text-wrap:balance}
.press-card__body p{font-size:.84rem;color:rgba(244,242,236,.66);flex:1}

/* CTA band */
.ctab{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(135deg,var(--navy-600),var(--navy-900));border:1px solid var(--line);padding:clamp(2.6rem,2rem + 3vw,5rem) clamp(1.6rem,1rem + 3vw,4.5rem);text-align:center}
.ctab::before{content:"";position:absolute;top:-60%;right:-8%;width:440px;height:440px;background:radial-gradient(circle,rgba(2,162,148,.35),transparent 65%)}
.ctab::after{content:"";position:absolute;bottom:-70%;left:-6%;width:400px;height:400px;background:radial-gradient(circle,rgba(236,112,22,.28),transparent 65%)}
/* La banda de cierre pasó a vivir sobre secciones claras (.bg-bone). La tarjeta
   sigue siendo oscura a propósito —es el remate fuerte de la página— así que
   tiene que reponer su propia tinta clara: si no, hereda el navy-700 de .bg-bone
   y queda texto oscuro sobre tarjeta oscura. Lo mismo con el botón fantasma:
   .bg-bone .btn--ghost lo pinta para fondo claro y aquí el fondo es oscuro.
   Van después de esas reglas en el archivo, así que ganan a igual especificidad. */
.bg-bone .ctab,.bg-white .ctab{color:var(--bone)}
.ctab .btn--ghost{--fg-btn:var(--bone);border-color:rgba(244,242,236,.3)}
.ctab .btn--ghost:hover{color:#0a0a0a;border-color:var(--orange-500)}
.ctab h2{font-size:var(--step-3);position:relative;z-index:1;max-width:22ch;margin-inline:auto}
.ctab p{position:relative;z-index:1;color:var(--concrete);margin:1.2rem auto 2rem;max-width:54ch}
.ctab .row{position:relative;z-index:1;display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}

/* formulario */
.form{display:grid;gap:1rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form label{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--concrete-ink);margin-bottom:.45rem}
.form input,.form select,.form textarea{width:100%;padding:.95rem 1.1rem;border:1px solid rgba(7,34,51,.2);border-radius:10px;font:inherit;font-size:.95rem;background:#fff;color:var(--navy-700);transition:border-color .3s,box-shadow .3s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--teal-500);box-shadow:0 0 0 3px rgba(2,162,148,.15)}
.form input.err,.form textarea.err{border-color:#d33;box-shadow:0 0 0 3px rgba(220,50,50,.12)}
.form .hint{font-size:.76rem;color:var(--concrete-ink);margin-top:.35rem}
.form .err-msg{display:none;font-size:.76rem;color:#c22;margin-top:.35rem}
.form .err-msg.on{display:block}
.form__file{position:relative;border:1.5px dashed rgba(7,34,51,.25);border-radius:12px;padding:1.6rem;text-align:center;cursor:pointer;transition:border-color .3s,background .3s}
.form__file:hover,.form__file.on{border-color:var(--teal-500);background:rgba(2,162,148,.05)}
.form__file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.form__file b{display:block;font-size:.95rem;color:var(--navy-700)}
.form__file span{font-size:.78rem;color:var(--concrete-ink)}
.form__file .fname{margin-top:.5rem;font-family:var(--f-mono);font-size:.68rem;color:var(--teal-600)}
.form__captcha{display:flex;align-items:center;gap:1rem;background:#fff;border:1px solid rgba(7,34,51,.2);border-radius:10px;padding:.8rem 1.1rem;width:max-content;max-width:100%}
.form__captcha .q{font-family:var(--f-mono);font-size:1rem;color:var(--navy-700);letter-spacing:.06em}
.form__captcha input{width:90px;text-align:center;padding:.55rem .7rem}
.form__ok{display:none;border:1px solid rgba(2,162,148,.4);background:rgba(2,162,148,.08);color:var(--teal-600);border-radius:12px;padding:1.2rem 1.4rem;font-size:.95rem}
.form__ok.on{display:block}
.contact-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2rem,1.5rem + 3vw,4.5rem);align-items:start}
.contact-card{background:var(--navy-600);border:1px solid var(--line);border-radius:16px;padding:1.8rem;display:grid;gap:1.1rem}
.contact-row{display:grid;grid-template-columns:110px 1fr;gap:1rem;align-items:baseline;padding-bottom:1rem;border-bottom:1px dashed var(--line)}
.contact-row:last-child{border:none;padding-bottom:0}
.contact-row .k{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--concrete)}
.contact-row .v{font-weight:600;color:#fff;overflow-wrap:anywhere}
.contact-row .v:hover{color:var(--teal-300)}
/* En móvil la columna fija de 110px deja 166px para el valor y rgermain@dexachile.cl
   no cabe: se salía 3px y aparecía scroll horizontal en toda la página. El rótulo
   pasa arriba del dato, que es como se ve una ficha de contacto en el teléfono. */
@media(max-width:560px){.contact-row{grid-template-columns:1fr;gap:.3rem}}

/* relacionadas */
.rel-g{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
/* En /nosotros/ estas tres cajas no tienen nada que ver en alto —principios y
   valores lleva ocho puntos y las otras dos, tres lineas—, asi que en la grilla de
   tres columnas vision y mision quedaban con media caja vacia. Apilando esas dos en
   una sola columna el bloque queda parejo, sin tocar .rel-g, que en el resto del
   sitio si lleva tarjetas del mismo alto. */
.rel-g--par{grid-template-columns:1fr 1fr;align-items:start}
.rel-g--par .rel-col{display:grid;gap:1.1rem;align-content:start}
.rel{position:relative;background:var(--navy-600);border:1px solid var(--line);border-radius:12px;padding:1.4rem 1.5rem;transition:transform .3s var(--ease-out),border-color .3s}
.rel:hover{border-color:rgba(2,162,148,.5);transform:translateY(-5px)}
.rel h3{font-size:1rem;margin-bottom:.4rem}
.rel span{font-size:.74rem;color:var(--teal-300);font-family:var(--f-mono);letter-spacing:.1em;text-transform:uppercase}
.bg-bone .rel,.bg-white .rel{background:#fff;border-color:var(--line-dark)}
.bg-bone .rel span,.bg-white .rel span{color:var(--teal-600)}

/* cuerpo de contenido (páginas de servicio) */
.body-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(2.4rem,2rem + 3vw,5.5rem);align-items:start}
.body-wrap h2{font-size:var(--step-2);margin:2.6rem 0 1rem;color:inherit}
.body-wrap h2:first-child{margin-top:0}
.body-wrap h3{font-size:1.22rem;margin:2rem 0 .8rem;color:var(--teal-300)}
.bg-bone .body-wrap h3,.bg-white .body-wrap h3{color:var(--teal-600)}
.body-wrap p{margin:1rem 0;color:inherit;opacity:.92;max-width:64ch}
.body-wrap>ul{margin:1.4rem 0;display:grid;gap:.1rem}
.body-wrap>ul li{padding:.65rem 0 .65rem 1.9rem;position:relative;border-bottom:1px dashed var(--line)}
.bg-bone .body-wrap>ul li,.bg-white .body-wrap>ul li{border-color:var(--line-dark)}
.body-wrap>ul li::before{content:"";position:absolute;left:0;top:.85rem;width:18px;height:18px;border-radius:5px;border:1.5px solid var(--teal-500);background:rgba(2,162,148,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302a294' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat}
.lead-b{font-size:var(--step-1);border-left:3px solid var(--orange-500);padding-left:1.3rem;margin:1.6rem 0;line-height:1.5;font-weight:500}
.media-col{position:sticky;top:110px;display:grid;gap:1.1rem}
.mimg{border-radius:14px;overflow:hidden;position:relative}
.mimg img{width:100%;object-fit:cover;transition:transform .7s var(--ease-out)}
.mimg:hover img{transform:scale(1.05)}
.mimg .cap{position:absolute;left:.8rem;bottom:.8rem;font-family:var(--f-mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;background:rgba(10,28,38,.6);backdrop-filter:blur(8px);padding:.5em 1em;border-radius:100px;color:var(--bone)}
.mimg--2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}

/* CTA de sección. El cliente pidió call to action en todas las secciones. Repetir
   la banda naranja .ctab diez veces por página la convierte en ruido y deja de
   funcionar, así que esta es la versión liviana: una línea de remate al pie de la
   sección, con el enlace a la derecha. La banda sigue siendo el cierre fuerte,
   una sola vez por página. Va después de .body-wrap p para ganarle al margen. */
.cta-in{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.7rem 2rem;margin-top:clamp(1.8rem,1.4rem + 1vw,2.8rem);padding-top:1.3rem;border-top:1px solid var(--line)}
.bg-bone .cta-in,.bg-white .cta-in{border-top-color:var(--line-dark)}
.cta-in p{margin:0;font-size:var(--step--1);opacity:.8;max-width:56ch}
/* Naranjo sobre fondo oscuro y verde sobre fondo claro: el naranjo no da el
   contraste mínimo sobre bone ni sobre blanco en texto de este porte. */
.cta-in a{display:inline-flex;align-items:center;gap:.55em;font-family:var(--f-mono);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-500);white-space:nowrap}
.bg-bone .cta-in a,.bg-white .cta-in a{color:var(--teal-600)}
.cta-in a svg{width:12px;height:12px;flex:none;transition:transform .4s var(--ease-out)}
.cta-in a:hover svg{transform:translate(3px,-3px)}

/* footer */
.footer{background:var(--navy-900);border-top:1px solid var(--line);padding:4.5rem 0 2rem;margin-top:0}
.footer__top{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:2.6rem;padding-bottom:3rem}
.footer__logo{display:flex;align-items:center}
.footer__logo img{height:40px;width:auto}
.footer p.muted{font-size:.88rem;margin-top:1.1rem;max-width:34ch}
/* Los rótulos de columna del pie eran <h5> colgando de un <h2> de sección: un
   salto de dos niveles en las 34 páginas. Pasan a <h2> —el pie es una región de
   la página, hermana de las secciones— y así no salta sea cual sea la estructura
   de arriba. Como <h2> sí entra en la regla base de h1..h4, hay que reponer el
   peso y el interlineado que antes daba el navegador por ser <h5>: si no, salen
   en 800 y con line-height .98. */
.footer h2{font-family:var(--f-mono);font-size:.62rem;font-weight:700;line-height:1.6;letter-spacing:.2em;text-transform:uppercase;color:var(--concrete);margin-bottom:1.1rem}
.footer__col a,.footer__col li{display:block;font-size:.9rem;color:rgba(244,242,236,.82);padding:.32rem 0;transition:color .25s,padding-left .25s}
.footer__col a:hover{color:#fff;padding-left:.3rem}
.footer__big{font-family:var(--f-display);font-weight:900;font-size:clamp(3.4rem,12vw,11rem);line-height:.9;letter-spacing:-.04em;color:rgba(244,242,236,.05);text-align:center;user-select:none;padding:1rem 0 2rem;white-space:nowrap;overflow:hidden}
.footer__bar{border-top:1px solid var(--line);padding-top:1.6rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.8rem;font-size:.76rem;color:var(--concrete)}
.footer__bar a{color:var(--teal-300)}
/* El botón flotante se metía 20px dentro de la columna de contenido y pisaba la
   cola de los enlaces de remate. Más chico y más pegado al canto se queda casi
   entero en el margen; el aro oscuro lo despega cuando cae sobre una foto. */
.wa-fab{position:fixed;right:18px;bottom:18px;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 8px 26px rgba(37,211,102,.4),0 0 0 3px rgba(5,15,22,.35);z-index:950;transition:transform .3s var(--ease-out)}
.wa-fab:hover{transform:scale(1.1)}
.wa-fab svg{width:26px;height:26px;fill:#fff}

/* Barra de acción fija en móvil — Llamar · WhatsApp · Cotizar.
   Pedida en la pauta: en el teléfono las tres acciones tienen que estar siempre a
   la vista, aunque el usuario siga scrolleando, sin obligarlo a volver al header.
   Solo existe bajo 768px; en escritorio el header ya lleva el botón de cotizar.
   Al aparecer, el botón flotante de WhatsApp sube para no quedar encima, y el
   <body> gana el alto de la barra como padding para que el pie no quede tapado.
   env(safe-area-inset-bottom) es por la barra de gestos del iPhone. */
.dock{display:none}
@media(max-width:768px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:960;display:grid;grid-template-columns:1fr 1fr 1.15fr;
        background:rgba(10,28,38,.97);backdrop-filter:blur(14px);border-top:1px solid var(--line);
        padding-bottom:env(safe-area-inset-bottom)}
  .dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.22rem;
          padding:.6rem .3rem .55rem;color:var(--bone);font-family:var(--f-mono);font-size:.58rem;
          letter-spacing:.11em;text-transform:uppercase;line-height:1;min-height:56px}
  .dock a+a{border-left:1px solid var(--line)}
  .dock svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
  .dock .dock--wa svg{fill:currentColor;stroke:none}
  .dock .dock--wa{color:#4ce07f}
  .dock .dock--cta{background:var(--orange-500);color:#0a0a0a;font-weight:700}
  body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .wa-fab{bottom:calc(72px + env(safe-area-inset-bottom))}
  /* El padding del body corre el final del documento, pero el héroe mide 100svh y
     su borde inferior cae justo donde está la barra fija: los últimos 56 px
     quedaban tapados y en el home se comía el botón "Ver obras realizadas".
     Se le descuenta el alto de la barra. */
  .hero{min-height:calc(100svh - 56px - env(safe-area-inset-bottom))}
}

/* reveals — visible por defecto (robusto sin JS); GSAP los oculta y revela */
.rv.will{opacity:0;transform:translateY(36px);filter:blur(5px);will-change:transform,opacity,filter}
[data-split] .word{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.09em;margin-bottom:-.09em;white-space:nowrap}
[data-split] .char{display:inline-block;transform:translateY(112%) rotate(3deg);will-change:transform}
html.no-motion [data-split] .char,html.rm [data-split] .char{transform:none}

/* responsive */
@media(max-width:1120px){
  .svc{grid-column:span 6}.svc:nth-child(1),.svc:nth-child(2){grid-column:span 6}
  .testi-grid{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .cert-grid{grid-template-columns:repeat(3,1fr)}
  .gallery{grid-template-columns:repeat(3,1fr)}
  .footer__top{grid-template-columns:1fr 1fr}
  /* Las cinco cifras del cliente no caben en fila bajo 1120px. Al reacomodarse
     hay que devolver el filete izquierdo solo a las que abren fila. */
  .stats{grid-template-columns:repeat(3,1fr);row-gap:2.4rem}
  .stat:nth-child(3n+1){border-left:none;padding-left:0}
}
@media(max-width:960px){
  .nav__menu,.nav__cta{display:none}
  .burger{display:flex}
  .body-grid,.split,.contact-grid,.obra-feat{grid-template-columns:1fr}
  .split--rev .split__media{order:0}
  /* En una sola columna no hay nada que emparejar: se vuelve al apilado normal
     para que no queden huecos reservados bajo cada bloque. */
  .insignias{grid-template-columns:1fr;grid-template-rows:none;row-gap:clamp(2.6rem,2rem + 2vw,4rem)}
  .insignia{display:flex;flex-direction:column;grid-row:auto}
  .insignia .btn{margin-top:0}
  .media-col{position:static;grid-template-columns:1fr 1fr}
  .video-feature{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr;row-gap:2.4rem}
  .stat{border-left:1px solid var(--line);padding-left:clamp(1.2rem,1rem + 1vw,2rem)}
  .bg-bone .stat,.bg-white .stat{border-left-color:var(--line-dark)}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .obra-feat__media{min-height:240px;order:-1}
}
@media(max-width:640px){
  .svc-grid{grid-template-columns:1fr}.svc,.svc:nth-child(1),.svc:nth-child(2){grid-column:span 1}
  .testi-grid,.rel-g,.media-col,.cert-grid,.gallery,.gallery--3,.video-grid,.video-grid--2,.video-grid--4,.team-grid{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .process{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr 1fr}
  .huincha__label{display:none}
  .huincha__track{padding-left:1rem}
  .hero--in h1{font-size:clamp(1.9rem,8.6vw,2.6rem)}
  .footer__top{grid-template-columns:1fr}
  .obra-feat__metrics{grid-template-columns:1fr 1fr}
  /* En el teléfono el video destacado quedaba en 149px de alto: a 21:9 y con
     348px de ancho no caben a la vez el botón de play (64px, centrado) y un
     rótulo de dos líneas, y se pisaban. Además la miniatura que da YouTube es
     16:9, así que el recorte a 21:9 estaba botando casi un tercio de la imagen
     para nada. En móvil vuelve a 16:9: 196px de alto, los dos caben, y se ve
     entera la foto. */
  .yt--hero{aspect-ratio:16/9}
  /* Los dos sellos caben lado a lado en 390px, pero no con el rótulo delante:
     quedaba uno arriba y el otro solo abajo. El rótulo se lleva su propia línea
     y los sellos vuelven a leerse como par. */
  .respaldos{gap:.9rem}
  .respaldos__label{flex:1 0 100%;margin:0}
  .respaldo{padding:.85rem 1.15rem}
  /* En el móvil el botón de WhatsApp ocupa la esquina y, al llegar al final de
     la página, se quedaba encima del último enlace del pie. Se reserva su alto. */
  .footer{padding-bottom:calc(2rem + 54px)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001s!important;transition-duration:.001s!important}.huincha__track{animation:none}}

/* ── Grillas de tarjetas (estructura recuperada del sitio original) ── */
/* un hijo de CSS Grid tiene min-width:auto y se estira con contenido ancho
   (el carrusel horizontal): esto lo mantiene dentro de su columna */
.body-grid > *{min-width:0}
.dxg{margin:3.2rem 0;max-width:100%}
.dxg__head{margin-bottom:1.7rem}
.dxg__eyebrow{font-family:var(--f-mono,Rubik,sans-serif);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:#02a294;font-weight:600;margin:0 0 .5rem}
.dxg__t{font-size:clamp(1.35rem,1.1rem + 1.1vw,2rem);line-height:1.1;margin:0 0 .7rem;text-transform:uppercase;letter-spacing:-.01em}
.dxg__intro{color:var(--concrete-ink,#5d6f78);margin:0;max-width:60ch}
.dxg__grid{display:grid;gap:1rem}
.dxg--2 .dxg__grid{grid-template-columns:repeat(2,1fr)}
.dxg--3 .dxg__grid{grid-template-columns:repeat(3,1fr)}
.dxg--4 .dxg__grid{grid-template-columns:repeat(2,1fr)}
.dxcard{position:relative;background:#fff;border:1px solid rgba(7,34,51,.09);border-radius:16px;padding:1.5rem 1.35rem 1.4rem;overflow:hidden;transition:transform .55s cubic-bezier(.16,1,.3,1),box-shadow .55s cubic-bezier(.16,1,.3,1),border-color .35s}
.dxcard::before{content:"";position:absolute;inset:0 0 auto;height:2px;background:linear-gradient(90deg,#02a294,#3fd6c7);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.dxcard:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(7,34,51,.09);border-color:rgba(2,162,148,.35)}
.dxcard:hover::before{transform:scaleX(1)}
.dxcard__i{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:12px;background:rgba(2,162,148,.09);color:#02a294;margin-bottom:.95rem;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.dxcard__i svg{width:22px;height:22px}
.dxcard:hover .dxcard__i{transform:scale(1.08) rotate(-5deg)}
.dxcard__t{font-size:.94rem;line-height:1.25;margin:0 0 .5rem;text-transform:uppercase;letter-spacing:.01em;color:#072233;padding-right:2rem}
.dxcard__d{font-size:.87rem;line-height:1.6;color:var(--concrete-ink,#5d6f78);margin:0}
.dxcard__n{position:absolute;top:1.1rem;right:1.1rem;font-family:var(--f-mono,Rubik,sans-serif);font-size:.62rem;font-weight:700;letter-spacing:.1em;color:rgba(7,34,51,.16)}
/* en secciones oscuras */
.bg-deep .dxcard,.bg-navy .dxcard{background:rgba(255,255,255,.04);border-color:rgba(244,242,236,.13)}
.bg-deep .dxcard__t,.bg-navy .dxcard__t{color:var(--bone,#f4f2ec)}
.bg-deep .dxcard__d,.bg-navy .dxcard__d{color:rgba(244,242,236,.72)}
@media(max-width:900px){
  .dxg--3 .dxg__grid,.dxg--4 .dxg__grid{grid-template-columns:repeat(2,1fr)}
}
/* ── CELULAR: carrusel horizontal en vez de apilar ──
   Apilar 3-4 tarjetas agrega ~3 pantallas de scroll por grilla. En horizontal
   ocupa una sola altura de tarjeta y se recorre con el dedo. Se asoma la
   siguiente tarjeta para que se note que hay más. ── */
@media(max-width:620px){
  .dxg{margin:2.4rem 0}
  .dxg__grid{
    display:flex;gap:.75rem;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
    /* sangrado a los bordes de la pantalla para que respire */
    margin-inline:calc(var(--gutter,1.25rem) * -1);
    padding:.25rem var(--gutter,1.25rem) 1rem;
    scroll-padding-left:var(--gutter,1.25rem);
    scrollbar-width:none;
  }
  .dxg__grid::-webkit-scrollbar{display:none}
  .dxg--2 .dxg__grid,.dxg--3 .dxg__grid,.dxg--4 .dxg__grid{grid-template-columns:none}
  .dxcard{
    flex:0 0 78%;min-width:78%;scroll-snap-align:start;
    padding:1.25rem 1.15rem;
  }
  .dxcard__d{font-size:.95rem;line-height:1.55}   /* legible en celular */
  .dxcard__t{font-size:.95rem}
  .dxcard:hover{transform:none;box-shadow:none}    /* sin hover en táctil */
  /* pista de que se desliza */
  .dxg__hint{display:flex;align-items:center;gap:.4rem;font-family:var(--f-mono,Rubik,sans-serif);
    font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete-ink,#5d6f78);
    opacity:.75;margin-top:-.35rem}
  .dxg__hint svg{width:14px;height:14px}
}
@media(min-width:621px){.dxg__hint{display:none}}

/* ── Apoyos visuales SVG (horizontales) ── */
.dxsvg{margin:2.4rem 0;border-radius:14px;background:linear-gradient(180deg,#fbfaf6,#f2efe7);border:1px solid rgba(7,34,51,.08);overflow:hidden;box-shadow:0 1px 2px rgba(7,34,51,.04)}
.dxsvg svg{display:block;width:100%;height:auto}
.dxsvg figcaption{font-family:var(--f-mono,Rubik,sans-serif);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete-ink,#5d6f78);padding:.1rem .95rem .8rem;text-align:center}
.bg-deep .dxsvg,.bg-navy .dxsvg{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border-color:rgba(244,242,236,.12)}
@media(max-width:720px){
  .dxsvg{margin:1.9rem 0;border-radius:12px}
  /* se mantiene HORIZONTAL en celular; se ocultan las etiquetas secundarias
     para que las principales queden legibles sin agrandar el bloque */
  .dxsvg .m-sec{display:none}
  .dxsvg figcaption{font-size:.55rem;padding:.1rem .7rem .7rem}
}
@media(prefers-reduced-motion:no-preference){
  .dxsvg{transition:transform .7s cubic-bezier(.16,1,.3,1),box-shadow .7s cubic-bezier(.16,1,.3,1)}
  .dxsvg:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(7,34,51,.09)}
}

/* ── Dock inferior: 2 acciones y más delgado ── */
@media(max-width:768px){
  .dock{grid-template-columns:1fr 1.1fr}
  .dock a{min-height:44px;padding:.42rem .3rem .38rem;gap:.16rem;font-size:.54rem}
  .dock svg{width:16px;height:16px}
}
/* ── Cotizador: hoja deslizante en 2 pasos ── */
.qz{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center}
.qz[hidden]{display:none}
.qz__veil{position:absolute;inset:0;background:rgba(6,20,29,.62);backdrop-filter:blur(3px);opacity:0;transition:opacity .32s cubic-bezier(.16,1,.3,1)}
.qz.on .qz__veil{opacity:1}
.qz__sheet{position:relative;width:min(94vw,470px);max-height:92dvh;overflow:auto;background:var(--paper,#fbfaf6);
  border-radius:22px;padding:1.6rem 1.4rem 1.5rem;box-shadow:0 30px 70px rgba(6,20,29,.36);
  opacity:0;transform:translateY(14px) scale(.985);transition:opacity .34s cubic-bezier(.16,1,.3,1),transform .34s cubic-bezier(.16,1,.3,1)}
.qz.on .qz__sheet{opacity:1;transform:none}
.qz__x{position:absolute;top:.85rem;right:.9rem;width:34px;height:34px;border:0;border-radius:50%;background:rgba(7,34,51,.06);
  color:var(--navy-700,#072233);display:grid;place-items:center;cursor:pointer}
.qz__x svg{width:16px;height:16px}
.qz__x:hover{background:rgba(7,34,51,.11)}
.qz__steps{display:flex;gap:.35rem;margin-bottom:1.1rem;width:64px}
.qz__steps i{height:3px;flex:1;border-radius:3px;background:rgba(7,34,51,.14);transition:background .3s}
.qz__steps i.on{background:var(--teal-500,#02a294)}
.qz__step{display:none}
.qz__step.on{display:block;animation:qzIn .34s cubic-bezier(.16,1,.3,1) both}
@keyframes qzIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.qz__eyebrow{font-family:var(--f-mono,Rubik,sans-serif);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--teal-600,#028074);margin:0 0 .35rem;font-weight:600}
.qz__t{font-size:1.45rem;line-height:1.1;margin:0 0 1.1rem;color:var(--navy-700,#072233)}
.qz__step label{display:block;font-size:.76rem;font-weight:600;letter-spacing:.02em;color:var(--navy-700,#072233);margin-bottom:.75rem;text-transform:uppercase}
.qz__step input,.qz__step select,.qz__step textarea{
  display:block;width:100%;margin-top:.34rem;padding:.72rem .8rem;font:inherit;font-size:1rem;font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--navy-700,#072233);background:#fff;border:1px solid rgba(7,34,51,.16);border-radius:11px;transition:border-color .2s,box-shadow .2s}
.qz__step input:focus,.qz__step select:focus,.qz__step textarea:focus{outline:0;border-color:var(--teal-500,#02a294);box-shadow:0 0 0 3px rgba(2,162,148,.14)}
.qz__step input.err{border-color:#d9534f;box-shadow:0 0 0 3px rgba(217,83,79,.12)}
.qz__step textarea{resize:vertical;min-height:74px}
.qz__err{display:none;font-size:.72rem;font-style:normal;color:#d9534f;margin-top:.3rem;text-transform:none;letter-spacing:0;font-weight:500}
.qz__err.on{display:block}
.qz__cap b{font-weight:700}
.qz__hp{position:absolute;left:-9999px}
.qz__btn{display:flex;align-items:center;justify-content:center;gap:.55rem;width:100%;margin-top:.35rem;
  padding:.85rem 1.1rem;border:0;border-radius:100px;background:var(--orange-500,#ec7016);color:#0a0a0a;
  font-family:inherit;font-size:.95rem;font-weight:700;cursor:pointer;
  transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,filter .2s}
.qz__btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(236,112,22,.34)}
.qz__btn:active{transform:scale(.985)}
.qz__ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(0,0,0,.13);transition:transform .25s cubic-bezier(.16,1,.3,1)}
.qz__ic svg{width:14px;height:14px}
.qz__btn:hover .qz__ic{transform:translateX(2px)}
.qz__back{display:inline-flex;align-items:center;gap:.35rem;background:0;border:0;padding:0;margin:0 0 .6rem;cursor:pointer;
  font-family:var(--f-mono,Rubik,sans-serif);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete-ink,#5d6f78)}
.qz__back svg{width:13px;height:13px}
.qz__back:hover{color:var(--teal-600,#028074)}
.qz__alt{display:block;text-align:center;margin-top:.8rem;font-size:.76rem;color:var(--concrete-ink,#5d6f78);text-decoration:underline}
.qz__ok{text-align:center;padding:1.2rem .4rem .4rem}
.qz__ok svg{width:46px;height:46px;color:var(--teal-500,#02a294);margin-bottom:.7rem}
.qz__ok h3{font-size:1.2rem;margin:0 0 .4rem;color:var(--navy-700,#072233)}
.qz__ok p{font-size:.88rem;color:var(--concrete-ink,#5d6f78);margin:0}
/* celular: hoja que sube desde abajo */
@media(max-width:600px){
  .qz{align-items:flex-end}
  .qz__sheet{width:100%;max-height:90dvh;border-radius:20px 20px 0 0;padding:1.35rem 1.15rem calc(1.3rem + env(safe-area-inset-bottom));
    transform:translateY(100%);transition:transform .38s cubic-bezier(.16,1,.3,1),opacity .28s}
  .qz.on .qz__sheet{transform:none}
  .qz__t{font-size:1.28rem}
}
@media(prefers-reduced-motion:reduce){
  .qz__veil,.qz__sheet{transition:none}
  .qz__step.on{animation:none}
}
body.qz-open{overflow:hidden}

/* ── /contacto/: formulario en dos pasos ── */
.fsteps{display:flex;gap:.35rem;width:70px;margin-bottom:1.3rem}
.fsteps i{height:3px;flex:1;border-radius:3px;background:rgba(7,34,51,.16);transition:background .3s}
.fsteps i.on{background:var(--teal-500,#02a294)}
.bg-deep .fsteps i,.bg-navy .fsteps i{background:rgba(244,242,236,.2)}
.fstep{display:none}
.fstep.on{display:block;animation:fstepIn .34s cubic-bezier(.16,1,.3,1) both}
@keyframes fstepIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
.fstep__k{font-family:var(--f-mono,Rubik,sans-serif);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--teal-600,#028074);margin:0 0 1rem;font-weight:600}
.fnav{margin-top:1.1rem}
.fback{display:inline-flex;align-items:center;gap:.35rem;background:0;border:0;padding:0;margin:0 0 .8rem;cursor:pointer;
  font-family:var(--f-mono,Rubik,sans-serif);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--concrete-ink,#5d6f78)}
.fback:hover{color:var(--teal-600,#028074)}
@media(prefers-reduced-motion:reduce){.fstep.on{animation:none}}
/* NOTA: los selectores van con :is(.body-wrap, .body-wrap>.mfold) y no con
   .body-wrap> a secas. El plegado móvil envuelve parte del contenido en un
   .mfold, y con hijo directo TODO lo plegado se quedaba sin estilo: las listas
   perdían la palomilla y el rótulo se pegaba a su descripción ("EPPbuzo
   desechable"). Se mantiene el hijo directo (en vez de descendiente) para no
   pisar el interior de .dxcard, .dxg ni .dxsvg. */
/* ═══════════════════════════════════════════════════════════════════════════
   JERARQUÍA DEL CUERPO DE PÁGINA — reconstrucción (ago-2026)

   El defecto que corrige, medido a 390px: todo el cuerpo se dibujaba con DOS
   estilos casi idénticos, 25px/800/MAYÚSCULAS y 20px/800/MAYÚSCULAS. Cinco
   píxeles de diferencia, el mismo peso y la misma caja: el ojo no percibía
   ninguna jerarquía y la página se leía como un muro de titulares pegados.
   El sitio anterior usaba OCHO escalones (45/36/32/26/18/16/15 px, con pesos
   de 400 a 800 y cajas mezcladas) y solo el 13-15% de sus palabras iban dentro
   de un titular; aquí iba el 22-25%.

   Regla que se aplica: dos niveles consecutivos SIEMPRE difieren en al menos
   dos dimensiones de tres (tamaño ≥1.3x, peso ≥200, caja MAY/normal). Un solo
   eje de diferencia no basta — ese fue exactamente el error anterior.

   Todo va a selector de HIJO DIRECTO (:is(.body-wrap,.body-wrap>.mfold)>…) para no tocar los
   componentes que ya funcionan y viven anidados: .dxcard, .dxg, .dxsvg.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Nivel 1 · ANTETÍTULO ──────────────────────────────────────────────────
   Diminuto, en mayúsculas, muy espaciado y en el color de acento. Su trabajo
   es rotular la sección sin competir: por eso el salto al título es de 2.4x.
   Va sin el punto naranja pulsante de .eyebrow porque dentro de un texto largo
   ese punto se vuelve ruido repetido. */
:is(.body-wrap,.body-wrap>.mfold)>.eyebrow{
  display:block;font-size:clamp(.7rem,.66rem + .16vw,.78rem);font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;margin:3.2rem 0 .5rem;line-height:1.35;
}
:is(.body-wrap,.body-wrap>.mfold)>.eyebrow:first-child{margin-top:0}
/* pegado a su título: el par se lee como UNA unidad, no como dos titulares */
:is(.body-wrap,.body-wrap>.mfold)>.eyebrow + h2,
:is(.body-wrap,.body-wrap>.mfold)>.eyebrow + h3{margin-top:0}

/* ── Nivel 2 · TÍTULO DE SECCIÓN ───────────────────────────────────────────
   El único bloque que puede ir grande y en mayúsculas. Mucho aire ARRIBA y
   poco abajo: así el título se lee pegado a su propio contenido y separado
   de lo anterior, que es lo que le dice al ojo dónde empieza cada bloque. */
:is(.body-wrap,.body-wrap>.mfold)>h2{
  font-size:clamp(1.72rem,1.48rem + 1.2vw,2.5rem);font-weight:800;
  line-height:1.08;letter-spacing:-.015em;text-transform:uppercase;
  margin:3.4rem 0 .9rem;text-wrap:balance;
}
:is(.body-wrap,.body-wrap>.mfold)>h2:first-child{margin-top:0}

/* ── Nivel 3 · SUBTÍTULO ───────────────────────────────────────────────────
   Baja a CAJA NORMAL. Ese cambio de caja es el salto que antes no existía:
   contra el título de arriba cambia tamaño (1.6x) y caja; contra el cuerpo de
   abajo cambia peso (700 vs 400) y color. */
:is(.body-wrap,.body-wrap>.mfold)>h3{
  font-size:clamp(1.08rem,1rem + .45vw,1.45rem);font-weight:700;
  line-height:1.25;letter-spacing:-.005em;text-transform:none;
  margin:2.4rem 0 .6rem;
}

/* ── Nivel 4 · BAJADA (deck) ───────────────────────────────────────────────
   La frase de 13-16 palabras que resume la página. Antes se dibujaba igual
   que un titular y por eso aparecía como un segundo muro en mayúsculas.
   Ahora: caja normal, peso intermedio, y más grande que el cuerpo. */
:is(.body-wrap,.body-wrap>.mfold)>.bwd{
  font-size:clamp(1.28rem,1.14rem + .68vw,1.7rem);font-weight:600;
  line-height:1.3;letter-spacing:-.01em;margin:.2rem 0 1.4rem;max-width:34ch;
  text-wrap:balance;
}

/* ── Nivel 5 · ENTRADA (lead) ──────────────────────────────────────────────
   El párrafo de apertura: era un <h2> de hasta 29 palabras y DOS frases.
   Es texto corrido, y como tal se compone. */
:is(.body-wrap,.body-wrap>.mfold)>.lead{
  font-size:clamp(1.12rem,1.04rem + .42vw,1.35rem);font-weight:400;
  line-height:1.55;margin:0 0 1.6rem;max-width:60ch;
}

/* ── Nivel 5b · DESTACADO ──────────────────────────────────────────────────
   La frase descriptiva de 8-12 palabras que quedó varada entre un párrafo y
   el siguiente título (era un <h3> suelto). No es titular ni cuerpo: es una
   afirmación con peso. Filete naranja, el único acento del sistema, y por eso
   se usa poco. */
:is(.body-wrap,.body-wrap>.mfold)>.bwq{
  font-size:clamp(1rem,.95rem + .28vw,1.18rem);font-weight:500;line-height:1.45;
  border-left:3px solid var(--orange-500);padding-left:1.05rem;
  margin:1.6rem 0;max-width:52ch;
}

/* ── Nivel 6 · CUERPO ──────────────────────────────────────────────────────
   16px reales en el teléfono y medida corta: por debajo de 16px un lector de
   45 años en la calle deja de leer. */
:is(.body-wrap,.body-wrap>.mfold)>p{
  font-size:clamp(1rem,.96rem + .18vw,1.1rem);font-weight:400;
  line-height:1.68;margin:0 0 1.15rem;max-width:64ch;
}

/* ── LISTA ESCANEABLE ──────────────────────────────────────────────────────
   Es el bloque MÁS repetido del sitio: 90 listas del original que la migración
   convirtió en <h3> sueltos y en <ul> partidos de un solo <li> cada uno.
   Dos niveles dentro del ítem: el rótulo en negrita arriba y la explicación
   debajo, para que en un teléfono se pueda leer SOLO la columna de rótulos y
   entender de qué va la lista sin leer el detalle. */
:is(.body-wrap,.body-wrap>.mfold)>.bwl{
  list-style:none;margin:1.5rem 0 1.9rem;padding:0;display:grid;gap:0;max-width:60ch;
}
:is(.body-wrap,.body-wrap>.mfold)>.bwl > li{
  position:relative;padding:.85rem 0 .85rem 2.15rem;
  border-bottom:1px dashed var(--line-dark);
}
:is(.body-wrap,.body-wrap>.mfold)>.bwl > li:first-child{border-top:1px dashed var(--line-dark)}
:is(.body-wrap,.body-wrap>.mfold)>.bwl > li::before{
  content:"";position:absolute;left:0;top:1.02rem;width:18px;height:18px;
  border-radius:5px;border:1.5px solid var(--teal-500);background:rgba(2,162,148,.12)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2302a294' stroke-width='3'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
}
:is(.body-wrap,.body-wrap>.mfold)>.bwl b{
  display:block;font-weight:700;font-size:.98rem;line-height:1.3;letter-spacing:-.005em;
}
:is(.body-wrap,.body-wrap>.mfold)>.bwl b + span{margin-top:.22rem}
:is(.body-wrap,.body-wrap>.mfold)>.bwl span{display:block;font-size:.95rem;line-height:1.52}

/* ── COLOR SEGÚN EL FONDO ──────────────────────────────────────────────────
   Las secciones alternan claro y oscuro; cada rol necesita su tinta en ambos.
   Nunca negro puro: la tinta oscura es --navy-700, del propio sistema. */
.bg-white .body-wrap, .bg-bone .body-wrap{color:var(--navy-700)}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>.eyebrow, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>.eyebrow{color:var(--teal-600)}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>h3, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>h3{color:var(--teal-600)}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>.bwd, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>.bwd{color:var(--navy-700)}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>.lead, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>.lead,
.bg-white :is(.body-wrap,.body-wrap>.mfold)>p, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>p{color:var(--navy-700);opacity:.9}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>.bwl b, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>.bwl b{color:var(--navy-700)}
.bg-white :is(.body-wrap,.body-wrap>.mfold)>.bwl span, .bg-bone :is(.body-wrap,.body-wrap>.mfold)>.bwl span{color:var(--navy-700);opacity:.82}

.bg-navy .body-wrap, .bg-deep .body-wrap{color:var(--bone)}
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>.eyebrow, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>.eyebrow,
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>h3, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>h3{color:var(--teal-300)}
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>.lead, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>.lead,
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>p, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>p{opacity:.88}
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>.bwl > li, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>.bwl > li,
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>.bwl > li:first-child, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>.bwl > li:first-child{border-color:var(--line)}
.bg-navy :is(.body-wrap,.body-wrap>.mfold)>.bwl span, .bg-deep :is(.body-wrap,.body-wrap>.mfold)>.bwl span{opacity:.85}

/* ── ESCRITORIO ────────────────────────────────────────────────────────────
   El teléfono manda; en pantalla ancha solo se abre el aire y la medida. */
@media(min-width:900px){
  :is(.body-wrap,.body-wrap>.mfold)>h2{margin:4.2rem 0 1.1rem}
  :is(.body-wrap,.body-wrap>.mfold)>.eyebrow{margin-top:4rem}
  :is(.body-wrap,.body-wrap>.mfold)>.bwl > li{padding-left:2.4rem}
}

/* ── El botón flotante de WhatsApp, fuera del teléfono ─────────────────────
   Es un círculo fijo de 54px sobre la columna de texto: a 390px SIEMPRE tapa
   las últimas palabras de varias líneas (se veía encima de "suministros
   básicos"). En el teléfono WhatsApp ya está en el botón del hero, y la barra
   inferior tiene Llamar y Cotizar, así que aquí estorba más de lo que aporta.
   En escritorio no hay barra inferior ni solapamiento: ahí se queda. */
@media(max-width:620px){ .wa-fab{display:none} }
/* ═══════════════════════════════════════════════════════════════════════════
   TELÉFONO: QUE NO SEA UNA HOJA INFINITA (ago-2026)

   Medido a 390x844 antes de tocar nada: 14.1 pantallas de scroll por página
   (la home 21.2, /retiro-de-asbesto/ 18.5). Entre el 22% y el 44% de ese
   scroll eran imágenes, y una sola foto costaba una pantalla entera (851px).

   Reparto real del scroll en /servicios-industriales/ (16.8 pantallas):
     · galería de 12 fotos … 3.78 pantallas  ← se dibujaba en UNA columna
     · índice de servicios .. 5.40 pantallas  ← tarjetas-póster de 300-380px
     · columna de fotos ..... 1.86 pantallas  ← cada foto medía 744px de alto
     · hero ................. 0.93 pantallas

   Criterio: en el teléfono la foto ACOMPAÑA, no protagoniza. Cuatro tamaños y
   ninguno más — hero 52vh · foto de cuerpo 28vh · miniatura de rejilla 104px ·
   miniatura de fila 64px — y ninguna se sirve ya a su proporción original.

   Recorte con object-fit:cover y object-position:center 42%, NO 50%: en las
   fotos de faena el operario, la máquina y el letrero viven en la banda media
   -baja del encuadre; centrar al 50% deja cielo y muro y corta el sujeto.

   Objetivo: 6.5 pantallas en una página de servicio, 7.0 en la home.
   ═══════════════════════════════════════════════════════════════════════════ */

@media(max-width:620px){

  /* ── Regla general de recorte ─────────────────────────────────────────────
     La banda útil de una foto industrial está algo por debajo del centro. */
  .gallery img,.mimg img,.svc__img img,.hero__media img,:is(.body-wrap,.body-wrap>.mfold)>figure img{
    object-fit:cover;object-position:center 42%;
  }

  /* ── Galería: de 12 filas apiladas a rejilla de miniaturas ────────────────
     Era el bloque más caro del sitio: 3.78 pantallas para doce fotos.
     Se probó carrusel horizontal (0.35 pantallas) y se descartó: esconde 2-3
     fotos que nadie llega a ver. En rejilla de 3 columnas cuestan 0.55, y
     poder abarcar de una mirada TODO el volumen de obra vale esos 0.2. */
  .gallery:not(.gallery--tel){
    display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;
  }
  .gallery:not(.gallery--tel) > figure{aspect-ratio:1/1;border-radius:9px}
  /* En táctil no hay hover: el pie tapaba la miniatura entera. Se apaga aquí
     y el dato queda en el alt, que es lo que además lee un lector de pantalla. */
  .gallery:not(.gallery--tel) figcaption{display:none}
  .gallery:not(.gallery--tel) figure::after{opacity:0}

  /* ── Fotos de cuerpo: de 744px a 28vh ─────────────────────────────────────
     A 22vh una faena pierde la escala, que es justamente el argumento de
     venta; a 34vh tres fotos ya se comen una pantalla. 28vh = 236px. */
  .mimg img{height:28vh;width:100%}
  .mimg{border-radius:12px}
  /* blur sobre contenido que scrollea = repintado continuo de GPU */
  .mimg .cap{backdrop-filter:none;background:rgba(10,28,38,.78);font-size:.52rem}
  .mimg--2 .mimg img,.mimg--2 img{height:21vh}
  :is(.body-wrap,.body-wrap>.mfold)>figure:not(.dxsvg) img{max-height:28vh;width:100%}

  /* ── Hero: 52vh de MÍNIMO, nunca de altura fija ───────────────────────────
     A pantalla completa empujaba el contenido fuera de la vista. Pero con
     `height:52svh` fijo pasó algo peor: el hero es un flex con
     align-items:flex-end y overflow:hidden, así que en las páginas de titular
     largo el contenido no cabía y se desbordaba HACIA ARRIBA — el <h1> quedaba
     en -181px, recortado, y la bajada se metía debajo del logo.
     Con min-height el hero crece lo que su texto necesite. */
  .hero:not(.hero--home){min-height:52svh;height:auto}
  .hero:not(.hero--home) .hero__media,
  .hero:not(.hero--home) .hero__media img{height:100%}
  /* el relleno superior solo tiene que despejar la cabecera (83px), no 168 */
  .hero:not(.hero--home) .hero__inner{padding-top:7.5rem}

  /* ── Índice de servicios: de tarjeta-póster a fila con miniatura ──────────
     Doce tarjetas de 300-380px costaban 5.4 pantallas para lo que es, en el
     fondo, un índice de "a dónde puedo ir". En fila —miniatura a la izquierda,
     nombre y bajada a la derecha— cuesta 1.4 y se recorre con la vista.
     NO se pliega: son 12 enlaces internos en plena migración de SEO, y plegar
     navegación es el único error de esta lista que no se deshace con CSS.
     Las alturas van con !important porque el generador las escribe EN LÍNEA. */
  .svc-grid{grid-template-columns:1fr;gap:.55rem}
  .svc{
    grid-column:auto!important;min-height:0!important;
    flex-direction:row;align-items:stretch;border-radius:12px;
  }
  .svc__img{height:auto!important;width:98px;flex:0 0 98px;border-radius:0}
  .svc__img img{height:100%}
  .svc__img::after{background:linear-gradient(90deg,transparent 55%,rgba(6,20,29,.35))}
  .svc__num{display:none}   /* no cabe en 98px y no ayuda a decidir */
  .svc__body{padding:.75rem .95rem;gap:.2rem;justify-content:center}
  .svc__body h3{font-size:1rem;line-height:1.22}
  .svc__body p{                       /* se conserva: es contenido, pero acotado */
    font-size:.82rem;line-height:1.35;flex:none;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  }
  .svc__link{font-size:.55rem}
  .svc:hover{transform:none;box-shadow:none}   /* el hover no existe en táctil */

  /* ── Logos de clientes y prensa: fila de 28px ─────────────────────────────*/
  .huincha__track img{height:26px;width:auto}

  /* ══ PLEGADO DEL DETALLE ══════════════════════════════════════════════════
     A la vista queda la respuesta corta de cada bloque; el detalle técnico y
     normativo se abre con un toque.

     Se usa max-height + overflow, NUNCA display:none: el contenido sigue en el
     flujo y en el HTML servido, que es lo que permite mantener el 34/34 de la
     auditoría de SEO mientras se está migrando el posicionamiento. Tampoco se
     carga nada por fetch por la misma razón. */
  .mfold{
    max-height:0;overflow:hidden;
    transition:max-height .45s var(--ease-out,cubic-bezier(.16,1,.3,1));
  }
  .mfold.on{max-height:400vh}
  .mfold__b{
    display:inline-flex;align-items:center;gap:.5rem;
    min-height:44px;padding:.55rem 1.1rem;margin:.3rem 0 1.9rem;
    background:0;border:1px solid var(--line-dark);border-radius:100px;
    font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;font-weight:600;color:var(--teal-600);cursor:pointer;
    transition:border-color .3s,color .3s;
  }
  .mfold__b svg{width:14px;height:14px;transition:transform .35s var(--ease-out,ease)}
  .mfold__b[aria-expanded="true"] svg{transform:rotate(180deg)}
  .bg-navy .mfold__b,.bg-deep .mfold__b{border-color:var(--line);color:var(--teal-300)}

  /* ══ ACCIÓN EN LÍNEA cada 2.5 pantallas ═══════════════════════════════════
     La barra fija de abajo NO cuenta como ritmo: sirve a quien ya decidió, y
     a los 30 segundos el ojo la deja de ver. Hacen falta anclas en el recorrido.
     Un solo primario visual por pantalla, y cada uno dice algo distinto: cinco
     botones que repiten el mismo texto se leen como banner. */
  .mcta{
    display:flex;align-items:center;justify-content:space-between;gap:.9rem;
    margin:1.6rem 0 2rem;padding:.95rem 1.1rem;border-radius:14px;
    background:rgba(2,162,148,.07);border:1px solid rgba(2,162,148,.22);
  }
  .bg-navy .mcta,.bg-deep .mcta{background:rgba(2,162,148,.12);border-color:rgba(63,214,199,.28)}
  .mcta p{margin:0;font-size:.85rem;line-height:1.35;font-weight:500;max-width:22ch}
  .mcta a{
    flex:0 0 auto;display:inline-flex;align-items:center;gap:.4rem;
    min-height:44px;padding:.6rem 1.05rem;border-radius:100px;
    background:var(--orange-500);color:#0a1c26;text-decoration:none;
    font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
    text-transform:uppercase;font-weight:700;
  }
  .mcta a svg{width:13px;height:13px}
}

/* En escritorio no se pliega nada: la página se ve completa como siempre. */
@media(min-width:621px){
  .mfold{max-height:none!important;overflow:visible}
  .mfold__b,.mcta{display:none}
}

@media(max-width:620px){
  /* ── Contener el sangrado de los carruseles ───────────────────────────────
     Los carruseles horizontales se sangran hasta el borde con un margen
     negativo de un gutter para que se vea que hay más a la derecha. Ese margen
     empujaba el ancho del documento 28px y dejaba la página moviéndose de lado
     (medido: 418px de ancho en una pantalla de 390). overflow-x:clip lo corta
     en el borde de la pantalla SIN crear un contenedor de scroll, que es lo que
     rompería los elementos pegajosos si se usara overflow:hidden. */
  body{overflow-x:clip}

  /* ── Fotos de la home ─────────────────────────────────────────────────────
     Los mismos topes que en el resto: .step 298px, .insignia 268px y
     .split 251px se salían del criterio de 28vh. */
  .step img,.insignia__media img,.split__media img,.yt img{
    height:28vh;width:100%;object-fit:cover;object-position:center 42%;
  }
  .step img{height:22vh}          /* van de a cuatro: cada una pesa el doble */
}

@media(max-width:620px){
  /* El sangrado del carrusel se calculó suponiendo que .container usa padding,
     pero .container reduce ANCHO (width:min(100% - gutter*2, ...)). Con esa
     geometría el margen negativo sobra un gutter y empuja el documento a 418px
     en una pantalla de 390: la página entera se movía de lado. Sin sangrado el
     carrusel se sigue deslizando igual, solo que no llega al borde. */
  .dxg__grid{margin-inline:0;padding-inline:0}
}

@media(max-width:620px){
  /* ── Certificados: de una columna a dos ───────────────────────────────────
     Doce escaneos verticales de 443px en una sola columna costaban 5.3
     pantallas. En dos columnas siguen siendo legibles (son documentos: se
     reconocen por el membrete, y el enlace abre el PDF completo) y cuestan 1.5. */
  .cert-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
  .cert img{width:100%;height:auto;max-height:30vh;object-fit:cover;object-position:center top}
  .cert{border-radius:10px;overflow:hidden}
}

@media(max-width:620px){
  /* ── Pie del testimonio: que el nombre tenga dónde caber ──────────────────
     Defecto que venía de antes (idéntico en ambas versiones): logo, nombre y
     botón "ver certificado" competían por 275px en una sola fila, y el bloque
     del nombre quedaba en 80px de ancho por 125 de alto — una palabra por línea.
     El botón baja a su propia fila y el nombre recupera el ancho. */
  .testi__meta{flex-wrap:wrap;gap:.65rem .8rem}
  .testi__meta > div{flex:1 1 auto;min-width:0}
  .testi__cert{flex:1 0 100%;justify-content:center;min-height:44px}
}

@media(max-width:620px){
  /* ── Burbuja de WhatsApp: se queda ────────────────────────────────────────
     La había ocultado en el teléfono porque a 54px tapaba palabras del texto.
     Es un canal de contacto y va: se mantiene, algo más pequeña y levantada
     por encima de la barra inferior para que estorbe lo mínimo. */
  .wa-fab{
    display:grid;width:48px;height:48px;right:14px;
    bottom:calc(45px + 14px + env(safe-area-inset-bottom,0px));
    box-shadow:0 6px 18px rgba(37,211,102,.34),0 0 0 2px rgba(5,15,22,.3);
  }
  .wa-fab svg{width:24px;height:24px}
}

/* ══ WEB2: feedback 2.0 del cliente (7-ago-2026) — se anexa a assets/site.css ══
   1. Huincha destacada ("Han confiado en DEXA") y logos más grandes en PC.
   2. .s-mcta: el CTA móvil en sección propia NO deja franja vacía en escritorio.
   3. En los medios: columnas de video + galería emparejadas en alto.
   4. Anclas del menú Nosotros (#equipo, #mision) que respetan la cabecera fija.
   5. Líneas de negocio y manifiesto de /nosotros/ (texto original restaurado). */

.huincha__label{font-size:.7rem;font-weight:700;letter-spacing:.24em;color:#028074}
@media(min-width:621px){
  .huincha{padding:1.1rem 0}
  .huincha img{height:34px}
  .huincha__track{padding-left:14rem}
  .s-mcta{display:none}
}
@media(max-width:620px){
  .huincha__label{display:flex;position:static;justify-content:center;padding:0 0 .55rem;background:none}
}

#equipo,#mision{scroll-margin-top:96px}

/* medios: la galería no puede doblar en alto al video que la acompaña */
.video-feature .gallery:not(.gallery--tel) img{max-height:320px;object-fit:cover}
.gallery--tel figure img{max-height:360px;width:auto;margin-inline:auto}
@media(max-width:620px){
  /* en el teléfono rige la política de fotos (≤236px), también para estas
     galerías; el :not() iguala la especificidad de la regla de escritorio
     de arriba (si no, 320px le gana a 236px también en móvil) */
  .video-feature .gallery:not(.gallery--tel) img{max-height:236px;object-fit:cover}
  .gallery--tel figure img{max-height:236px}
  /* la obra destacada estaba en 240px EXACTOS: el borde justo del tope hace
     parpadear el veredicto con el redondeo; se alinea a la política (236) */
  .obra-feat__media{min-height:236px}
}

/* fotos de origen pequeño junto a un video: apiladas a tamaño natural,
   sin estirar ni recortar (ETM 2023) */
.gallery--stack{grid-template-columns:1fr;justify-items:center}
.gallery--stack figure img{width:auto;max-width:100%;max-height:226px}

/* un ancla de conversión sembrada DENTRO de una rejilla ocupa la fila completa:
   como celda angosta aprieta el botón (desborde horizontal) y estira las filas
   vecinas (los certificados pasaban de 221 a 253px de alto) */
.mcta{grid-column:1/-1;min-width:0}

/* ── tarjetas de "Qué hacemos" (home): TODA la tarjeta es clic — imagen,
   título o texto llevan al servicio, no solo el enlace "Ver servicio".
   Se estira el hit-area del enlace principal con un ::after; los sub-enlaces
   (Friable, Silos, …) van POR ENCIMA y siguen llevando a su propia página.
   Solo article.svc: en las interiores la tarjeta ya es un <a> completo. ── */
article.svc a.svc__link::after{content:"";position:absolute;inset:0;z-index:1}
article.svc .svc__subs{position:relative;z-index:2}

/* la foto de "Retiro de Asbesto": la faena (cuadrilla y tijera con planchas)
   vive en el tercio INFERIOR del encuadre; anclado al centro (42%) quedaba
   borrada. Se ancla abajo. */
.svc__img img[src*="retiro-planchas-asbesto"]{object-position:center 88%}

/* ── la CAJA destacada de los desplegables (Nosotros, Nuestros Proyectos) es
   clic completa: antes solo navegaba el enlace chico ("Ver la empresa →") ── */
.mega__feat{position:relative}
.mega__feat > a::after{content:"";position:absolute;inset:0}

/* menú móvil: la palabra "Nosotros" del acordeón es un enlace real a la página;
   el resto de la fila (número/flecha) sigue abriendo el acordeón */
.mmenu summary .sumlink{color:inherit;text-decoration:none}

/* ── MENÚ MÓVIL · SERVICIOS EN DOS NIVELES (9-ago): "Servicios" abre las tres
   ramas y cada rama despliega sus páginas. El nombre de la rama es un ENLACE a
   su página madre y lleva flecha propia; al abrirla, el primer ítem repite
   "(página principal)" para que se vea que la rama también se visita. ── */
.mmenu__rama{border-bottom:1px solid var(--line)}
.mmenu__rama:last-child{border-bottom:0}
.mmenu__rama > summary{font-family:var(--f-display);font-size:1.02rem;font-weight:700;text-transform:none;
  letter-spacing:0;padding:.72rem 0;color:var(--bone);display:flex;align-items:center;justify-content:space-between;
  gap:.8rem;cursor:pointer;list-style:none}
.mmenu__rama > summary::-webkit-details-marker{display:none}
.mmenu__rama > summary .sumlink{border-bottom:1px solid rgba(244,242,236,.35);padding-bottom:1px}
.mmenu__rama > summary::after{content:"";width:9px;height:9px;flex:none;border-right:2px solid var(--teal-300,#3fd6c7);
  border-bottom:2px solid var(--teal-300,#3fd6c7);transform:rotate(45deg) translateY(-2px);transition:transform .28s var(--ease-out)}
.mmenu__rama[open] > summary::after{transform:rotate(225deg) translateY(-2px)}
.mmenu .sub--hija{padding:.1rem 0 .9rem .9rem;border-left:1px solid var(--line);margin-left:.15rem}
.mmenu .sub--hija .mother{color:var(--teal-300,#3fd6c7);font-weight:600}

/* ── FORMULARIO (7-ago): servicios acumulables, captcha de ícono y adjunto ── */
.qz__servlab,.qz__filelab{display:block;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;margin:.2rem 0 .45rem;color:var(--concrete-ink)}
.qz__servlab small,.qz__filelab small{opacity:.6;letter-spacing:.06em;text-transform:none}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;margin:0 0 .95rem}
/* tinta EXPLÍCITA: el modal hereda color hueso (fue diseñado sobre fondo
   oscuro) y los chips/captcha quedaban casi invisibles sobre la hoja clara */
.chip{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.05em;text-transform:uppercase;padding:.52rem .78rem;border:1px solid var(--line-dark);border-radius:999px;background:transparent;color:var(--navy-900,#072233);cursor:pointer;transition:border-color .18s,background .18s,color .18s}
.chip:hover{border-color:#028074}
.chip.on{background:#028074;border-color:#028074;color:#fff}
.chip.on::after{content:" ✓"}
.icap{margin:.2rem 0 .95rem}
.icap__q{display:block;font-size:.82rem;margin-bottom:.5rem;color:var(--navy-900,#072233)}
.icap__q b{color:#028074}
.icap__row{display:flex;gap:.5rem;flex-wrap:wrap}
.icap__b{width:50px;height:46px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:12px;background:transparent;color:var(--navy-900,#072233);cursor:pointer;transition:border-color .18s,background .18s}
.icap__b:hover{border-color:#028074}
.icap__b:disabled{opacity:.35;cursor:default}
.icap__b.ok{background:#028074;border-color:#028074;color:#fff;opacity:1}
.icap__b svg{width:24px;height:24px}
.qz__filelab input{display:block;margin-top:.4rem;font-family:inherit;font-size:.8rem;letter-spacing:0;text-transform:none;width:100%}

/* con el modal de cotización abierto, el fondo no trabaja: la huincha se pausa
   (el video del hero lo pausa el JS). Menos repaints bajo el overlay. */
body.qz-open .huincha__track{animation-play-state:paused}

/* ── iOS hace ZOOM automático al enfocar un campo con fuente <16px, y al saltar
   de campo en campo la página entera "parpadea" (zoom in/out) — aviso de
   Ignacio del 7-ago rellenando /contacto/ (sus campos medían 15.2px).
   TODO campo de texto va a 16px mínimo en pantallas táctiles. ── */
@media(max-width:900px){
  #cotizaForm input,#cotizaForm select,#cotizaForm textarea,
  .qz input,.qz select,.qz textarea{font-size:16px}
}
.qz__fname{display:block;font-size:.75rem;margin:-.5rem 0 .8rem;color:#028074}

/* ── MÉTRICAS DE OBRA EJECUTADA (gráfica del Word del cliente; los contadores
   se recargan al entrar en pantalla con el mismo data-count del sitio) ── */
.mnum-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line-dark);border:1px solid var(--line-dark);border-radius:16px;overflow:hidden}
.mnum{background:var(--bone);padding:1.7rem 1.5rem 1.5rem}
.mnum__i{margin-bottom:1rem;color:#028074}
.mnum__i svg{width:36px;height:36px;display:block}
.mnum__i img{width:46px;height:auto;display:block;mix-blend-mode:multiply}
.mnum__n{font-family:var(--f-display);font-weight:900;font-size:clamp(1.7rem,1.2rem + 1.6vw,2.5rem);line-height:1;letter-spacing:-.03em;color:var(--navy-900,#072233);display:flex;align-items:baseline;gap:.3rem}
/* los contadores NO pueden cambiar de geometría mientras cuentan: 13 números
   mutando texto a 60fps reflowaban la página entera y el scroll suave (Lenis)
   se ponía a tiritar. Ancho FINAL reservado (min-width inline) + dígitos
   tabulares = solo repintado, cero reflow. */
[data-count]{display:inline-block;font-variant-numeric:tabular-nums}
.mnum__n small{font-size:.5em;font-weight:700;color:#028074;letter-spacing:0}
.mnum__l{margin-top:.7rem;font-family:var(--f-mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-ink)}
@media(max-width:900px){.mnum-grid{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.mnum{padding:1.1rem .95rem 1rem}.mnum__n{font-size:1.5rem}.mnum__l{font-size:.58rem;letter-spacing:.08em}.mnum__i{margin-bottom:.7rem}.mnum__i svg{width:28px;height:28px}.mnum__i img{width:38px}}

/* nosotros: líneas de negocio (texto original del sitio vivo). Rediseño 8-ago
   (pedido de Ignacio: "que no pasen tan desapercibidas"): tarjetas blancas con
   borde teal, marcador naranjo y sombra — protagonistas, no chips mudos. */
.lineas{display:flex;flex-wrap:wrap;gap:.8rem;margin:1.3rem 0 0;padding:0;list-style:none}
.lineas li{position:relative;font-family:var(--f-mono);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:.95rem 1.35rem .95rem 2.35rem;border:2px solid var(--teal-600,#028074);border-radius:14px;color:var(--navy-900,#072233);background:#fff;box-shadow:0 12px 30px rgba(5,15,22,.10);transition:transform .35s var(--ease-out),box-shadow .35s}
.lineas li::before{content:"";position:absolute;left:1.05rem;top:50%;transform:translateY(-50%);width:9px;height:9px;border-radius:2px;background:var(--orange-500,#ec7016)}
.lineas li:hover{transform:translateY(-3px);box-shadow:0 18px 40px rgba(5,15,22,.16)}
.bg-deep .lineas li,.bg-navy .lineas li{background:rgba(255,255,255,.06);border-color:var(--teal-300,#3fd6c7);color:var(--bone,#f4f2ec)}

/* nosotros: la tarjeta de Ingeniería Estructural lleva ícono de línea (la foto
   de Raúl subió al equipo y la caja quedaba vacía) */
.depto__logo--icono svg{width:64px;height:64px}

/* los CTA en línea NO cortan la frase a la mitad (aviso de Ignacio, 8-ago:
   "Hablas directo con el equipo…" quedaba partida por el max-width de 56ch);
   la frase usa todo el espacio libre junto al botón */
.cta-in p{max-width:none;flex:1 1 auto}

/* nosotros: con 3 integrantes la grilla de 2 dejaba a Raúl solo abajo: fila
   de 3 en PC. (El marco cuadrado del 8-ago se revirtió: el cliente lo quiere
   en círculo idéntico a Rodrigo y Mercedes.) */
@media(min-width:769px){.team-grid{grid-template-columns:repeat(3,1fr);max-width:980px}.team__foto{width:min(200px,60vw)}}

/* nosotros: manifiesto con la foto de la flota al costado derecho (el cliente
   marcó ese vacío el 8-ago; foto inédita camiones-maquinaria) */
.manif-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:2.6rem;align-items:center}
.manif-foto{margin:0}
.manif-foto img{width:100%;height:auto;max-height:420px;object-fit:cover;border-radius:16px;box-shadow:0 24px 60px rgba(5,15,22,.28)}
@media(max-width:900px){.manif-grid{grid-template-columns:1fr;gap:1.4rem}.manif-foto img{max-height:236px}}

/* en los medios: grilla de entrevistas (miniaturas al canal). OJO: se llama
   .ytv porque .yt YA existe en el sitio (lightbox navy 16/9) y pisaba todo. */
.yt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.ytv{display:block;border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);background:#fff;text-decoration:none;transition:transform .35s var(--ease-out),box-shadow .35s}
.ytv:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(5,15,22,.16)}
.ytv img{width:100%;height:150px;object-fit:cover;display:block}
.ytv span{display:flex;align-items:center;gap:.5em;padding:.7rem .9rem;font-family:var(--f-mono);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-600,#028074)}
.ytv span svg{width:11px;height:11px}
@media(max-width:900px){.yt-grid{grid-template-columns:repeat(2,1fr)}.ytv img{height:118px}}

/* obras: las dos marcas del proyecto conjunto chino caben en una celda normal */
.obra-dato__imgs img{max-width:48%}

/* ── HEROES: el titular NO se leía sobre la foto/el video. Medido con
   `contraste-hero.mjs` antes de tocar: 21 de las 34 páginas por debajo de
   4,5:1 de contraste medio (mínimo legible para un titular) y la portada en
   3,08:1 con puntos de 1,17:1. Se refuerza el velo de TODOS los heroes, no
   solo el del home que reportó Ignacio: el defecto era del sistema. ── */
.hero__media::after{
  background:
    linear-gradient(95deg,rgba(10,28,38,.82) 0%,rgba(10,28,38,.64) 30%,rgba(10,28,38,.38) 55%,rgba(10,28,38,.20) 78%,rgba(10,28,38,.12) 100%),
    linear-gradient(180deg,rgba(10,28,38,.50) 0%,rgba(10,28,38,.22) 32%,rgba(10,28,38,.36) 55%,rgba(10,28,38,.74) 82%,rgba(10,28,38,.9) 100%),
    rgba(10,28,38,.12)}

/* ── HERO DEL HOME: el video pedía más oscuridad para que el titular se lea
   (pedido de Ignacio, 9-ago). Medido con `contraste-hero.mjs` antes de tocar:
   3.08:1 de contraste medio en escritorio y 2.46:1 en móvil, con puntos en
   1.17:1 — por debajo del mínimo de 3:1 que necesita un titular. Se refuerza el
   velo del lado donde vive el texto y se agrega una capa pareja; en móvil, que
   el texto cruza todo el ancho, el velo es más parejo y más fuerte. ── */
.hero--home .hero__media::after{
  background:
    linear-gradient(95deg,rgba(10,28,38,.86) 0%,rgba(10,28,38,.72) 28%,rgba(10,28,38,.44) 52%,rgba(10,28,38,.22) 74%,rgba(10,28,38,.14) 100%),
    linear-gradient(180deg,rgba(10,28,38,.52) 0%,rgba(10,28,38,.24) 34%,rgba(10,28,38,.30) 52%,rgba(10,28,38,.68) 80%,rgba(10,28,38,.88) 100%),
    rgba(10,28,38,.14)}
@media(max-width:900px){
  .hero--home .hero__media::after{
    background:
      linear-gradient(180deg,rgba(10,28,38,.62) 0%,rgba(10,28,38,.46) 30%,rgba(10,28,38,.52) 55%,rgba(10,28,38,.78) 82%,rgba(10,28,38,.9) 100%),
      rgba(10,28,38,.24)}
}

/* ── VISOR DE IMÁGENES (9-ago): las fotos de contenido se abren grandes al
   hacer clic. La lupa avisa que son ampliables; el overlay respeta el fondo
   de marca y se cierra con Esc, con la X o tocando fuera. ── */
.ampliable{cursor:zoom-in;transition:filter .3s var(--ease-out)}
.ampliable:hover{filter:brightness(1.04)}
figure:has(> .ampliable){position:relative}
figure:has(> .ampliable)::after{content:"";position:absolute;right:.6rem;bottom:.6rem;width:30px;height:30px;border-radius:50%;
  background:rgba(10,28,38,.62) center/15px 15px no-repeat;pointer-events:none;opacity:0;transition:opacity .3s var(--ease-out);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6M11 8.4v5.2M8.4 11h5.2'/%3E%3C/svg%3E")}
figure:has(> .ampliable):hover::after{opacity:1}

.visor{position:fixed;inset:0;z-index:1300;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem);
  background:rgba(6,18,26,.94);backdrop-filter:blur(6px);animation:visorIn .22s var(--ease-out)}
@keyframes visorIn{from{opacity:0}to{opacity:1}}
.visor[hidden]{display:none}
.visor__f{margin:0;max-width:min(1100px,94vw);display:flex;flex-direction:column;gap:.9rem;align-items:center}
.visor__f img{max-width:100%;max-height:82vh;width:auto;height:auto;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.visor__f figcaption{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete);text-align:center;max-width:70ch}
.visor__x{position:absolute;top:clamp(.8rem,2vw,1.6rem);right:clamp(.8rem,2vw,1.6rem);width:46px;height:46px;display:grid;place-items:center;
  border-radius:50%;border:1px solid rgba(244,242,236,.28);background:rgba(244,242,236,.08);color:var(--bone);cursor:pointer;transition:background .2s,transform .2s}
.visor__x:hover{background:rgba(244,242,236,.18);transform:scale(1.06)}
.visor__x svg{width:20px;height:20px}
body.visor-open{overflow:hidden}

/* ── BLOQUES DE VIDEO: el texto se alineaba al CENTRO de una columna más alta
   (align-items:center del diseño original), así que con un título corto quedaba
   "flotando" con un vacío enorme sobre él — se veía roto en Entrevistas (aviso
   de Ignacio, 8-ago) y pasaba en 6 bloques del sitio, con desfases de 68 a
   195px. Ahora las dos columnas arrancan ARRIBA, a la misma línea.
   Lo vigila el veredicto lint-escritorio.mjs (COLUMNA-FLOTANTE). ── */
.video-feature{align-items:start}
/* el título del video destacado ya no necesita el empujón vertical */
.video-feature > div > .eyebrow{margin-top:0}
/* …pero alinear arriba no bastaba: un titular de dos líneas al lado de un video
   deja 150-280px de vacío bajo el texto (media columna en blanco). En los
   bloques "titular → video" se abandona la fila de dos columnas: el titular
   pasa a ser CABECERA y el video va debajo, centrado y protagonista. Cero
   hueco y el video se ve el doble de grande. */
@media(min-width:901px){
  /* SOLO los marcados por feedback-web2 (video + texto). Los bloques con
     galería conservan sus dos columnas: apilarlos dejaba la galería angosta
     arriba y el video gigante abajo. */
  .video-feature--stack{display:flex;flex-direction:column}
  .video-feature--stack > .yt{max-width:880px;width:100%;margin:1.9rem auto 0;order:2}
  .video-feature--stack > :not(.yt){order:1}
}

/* obra destacada con UNA sola marca (Grupo Patio): la caja del logo crece —
   con el tamaño de dos logos el único quedaba diminuto y perdido */
.obra-feat__logos:has(> div:only-child) div{min-width:190px;height:82px;padding:.9rem 1.3rem}
.obra-feat__logos:has(> div:only-child) img{max-height:56px;max-width:170px}

/* obra destacada con el LOGO en el panel (pedido del cliente, 9-ago: la marca
   en vez de la foto). El panel es una placa blanca y el logo va CENTRADO y
   contenido — con el `object-fit:cover` del panel de foto saldría estirado y
   recortado. La marca ya no se repite en el cuerpo de la tarjeta. */
.obra-feat__media--logo{background:#fff;display:grid;place-items:center;padding:clamp(1.6rem,1rem + 3vw,3.4rem)}
.obra-feat__media--logo img{position:static;width:auto;height:auto;max-width:min(330px,80%);max-height:60%;object-fit:contain}
@media(max-width:900px){.obra-feat__media--logo{min-height:190px;padding:1.8rem}.obra-feat__media--logo img{max-height:120px}}
/* 4 métricas: 2×2 parejo en escritorio (con 3 columnas la cuarta quedaba sola) */
.obra-feat__metrics:has(> div:nth-child(4)){grid-template-columns:repeat(2,1fr)}

/* nosotros: manifiesto "En economía y rapidez marcamos la diferencia" */
.manif{max-width:62ch}
.manif p{margin:0 0 1.05rem;font-size:1.02rem;line-height:1.6}
.manif p:last-child{color:#028074;font-weight:600}
.bg-deep .manif p:last-child,.bg-navy .manif p:last-child{color:var(--teal-300)}

/* ── muralla de obras CON los datos por proyecto (comuna + métricas del sitio
   vivo, recuperados el 8-ago: la extracción de julio no los capturó) ── */
.obra-logo--dato{aspect-ratio:auto;grid-template-rows:56px auto;align-content:center;gap:.55rem;padding:.9rem .8rem 1rem}
.obra-logo--dato img{max-height:48px}
.obra-dato{display:block;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.02em;line-height:1.65;color:var(--concrete-ink);text-align:center}
.obra-dato b{color:var(--navy-900,#072233)}
.obra-logo--doble{grid-column:span 2}
.obra-dato__imgs{display:flex;gap:.7rem;justify-content:center;align-items:center}
.obra-dato__imgs img{max-height:48px;min-width:0}

/* ══ AJUSTES FINALES del cliente (27-ago-2026) ═══════════════════════════════ */
/* ── logo un poco más grande en el HOME (pedido: "en el menú del home") ── */
.header--home .nav__logo img{height:44px}
@media(max-width:620px){.header--home .nav__logo img{height:40px}}

/* ── BOTÓN DE PLAY fuera del centro: en el testimonio de Nicolás Larraín el
   círculo caía justo en su nariz. Va a la esquina inferior derecha (las caras
   de las miniaturas viven al centro) y el rótulo le deja el espacio. ── */
.yt .yt__play,.yt:hover .yt__play,.yt:focus-visible .yt__play{top:auto;left:auto;right:1rem;bottom:.85rem;transform:none;width:52px;height:52px;box-shadow:0 8px 24px rgba(236,112,22,.4)}
.yt:hover .yt__play,.yt:focus-visible .yt__play{transform:scale(1.1)}
.yt .yt__title{right:calc(1rem + 52px + .9rem)}

/* ── /clientes/: 7 columnas en PC, 2 en el teléfono (clase que pone el generador) ── */
.obra-grid--clientes{grid-template-columns:repeat(4,1fr)}
@media(min-width:1100px){.obra-grid--clientes{grid-template-columns:repeat(7,1fr);gap:.9rem}.obra-grid--clientes .obra-logo{padding:.8rem}.obra-grid--clientes .obra-logo img{max-height:44px}}
@media(max-width:620px){.obra-grid--clientes{grid-template-columns:repeat(2,1fr);gap:.8rem}}

/* ── SLIDER de obras destacadas (home y /obras-realizadas/): scroll-snap nativo,
   una tarjeta .obra-feat por slide, flechas + puntos + contador. ── */
.obra-slider{position:relative}
.obra-slider__track{display:flex;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;border-radius:18px}
.obra-slider__track::-webkit-scrollbar{display:none}
.obra-slider__track>.obra-feat{flex:0 0 100%;scroll-snap-align:start;min-width:0}
.obra-feat__sub{font-size:.9rem;color:var(--concrete);margin-top:-.5rem}
.obra-slider__nav{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.1rem}
.obra-slider__btn{width:42px;height:42px;border-radius:50%;border:1px solid rgba(244,242,236,.25);background:transparent;color:var(--bone);display:grid;place-items:center;cursor:pointer;padding:0;transition:background .3s,border-color .3s,transform .3s var(--ease-out)}
.obra-slider__btn svg{width:20px;height:20px}
.obra-slider__btn:hover{background:rgba(255,255,255,.08);border-color:var(--orange-500);transform:scale(1.06)}
.obra-slider__dots{display:flex;gap:.5rem}
.obra-slider__dot{width:8px;height:8px;border-radius:50%;background:rgba(244,242,236,.28);border:0;padding:0;cursor:pointer;transition:transform .3s,background .3s}
.obra-slider__dot.is-on{background:var(--orange-500);transform:scale(1.3)}
.obra-slider__cuenta{font-family:var(--f-mono);font-size:.62rem;letter-spacing:.18em;color:var(--concrete);min-width:3.4em;text-align:center}
.bg-white .obra-slider__btn,.bg-bone .obra-slider__btn{color:var(--navy-700);border-color:rgba(7,34,51,.25)}
.bg-white .obra-slider__dot,.bg-bone .obra-slider__dot{background:rgba(7,34,51,.22)}

/* ── COMPARADOR ANTES/DESPUÉS (Espacio Cultural Chino): "antes" recortado con
   clip-path hasta --pos; el range invisible encima da el arrastre. ── */
.obra-feat__media--ba::after{display:none}
.ba{position:absolute;inset:0;overflow:hidden;--pos:50%;user-select:none;-webkit-user-select:none}
.ba img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ba__after{z-index:0}
.ba__before{clip-path:inset(0 calc(100% - var(--pos)) 0 0);z-index:1}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;font-size:16px;cursor:ew-resize;touch-action:none;-webkit-appearance:none;appearance:none;z-index:3}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:#fff;transform:translateX(-50%);z-index:2;pointer-events:none;box-shadow:0 0 14px rgba(0,0,0,.5)}
.ba__line::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;border-radius:50%;background:var(--orange-500) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5'/%3E%3C/svg%3E") center/22px no-repeat;transform:translate(-50%,-50%);box-shadow:0 8px 24px rgba(0,0,0,.4)}
.ba__tag{position:absolute;top:.9rem;z-index:2;font-family:var(--f-mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:#fff;background:rgba(10,28,38,.74);padding:.45em .75em;border-radius:6px;pointer-events:none}
.ba__tag--a{left:.9rem}.ba__tag--b{right:.9rem}
.ba:focus-within .ba__line::after{outline:2px solid #fff;outline-offset:2px}

/* ── "Presencia en ETM Day" (/en-los-medios/): la página de El Mercurio acercada
   al texto, la dedicatoria destacada y las fotos del evento. ── */
.etm-lead{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.45fr);grid-template-areas:"diario dedic" "diario fotos" "posts posts";gap:1.2rem;align-items:start}
.etm-lead__diario{grid-area:diario;margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line-dark);box-shadow:0 18px 44px rgba(5,15,22,.10)}
.etm-lead__diario img{display:block;width:100%;height:auto}
.etm-lead__dedic{grid-area:dedic;margin:0;border:2px solid var(--orange-500);border-radius:14px;padding:.7rem;background:#fff}
.etm-lead__dedic img{display:block;width:100%;height:auto;border-radius:8px}
.etm-lead figcaption{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-ink);padding:.7rem .9rem}
.etm-lead__dedic figcaption{padding:.6rem .2rem 0;color:var(--orange-600,#c85d0f)}
.etm-lead__fotos{grid-area:fotos}
.etm-lead__posts{grid-area:posts;grid-template-columns:repeat(3,minmax(0,300px));justify-content:start}
.etm-lead__posts figure{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);background:#fff}
@media(max-width:900px){.etm-lead{grid-template-columns:1fr;grid-template-areas:"diario" "dedic" "fotos" "posts"}.etm-lead__posts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){
  .etm-lead__diario img,.etm-lead__dedic img,.etm-lead__posts img{max-height:236px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
  .etm-lead__posts{grid-template-columns:1fr}
}

/* ── AVISO DE COOKIES (patrón maluperez.com / Dominant §26.3): velo + modal que
   exige decisión + UN botón grande + denegar como link chico. Sheet abajo en el
   teléfono, centrado en escritorio. z por sobre el visor (1300). ── */
#dxVelo{position:fixed;inset:0;z-index:1400;background:rgba(5,15,22,.62);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;transition:opacity .4s ease;pointer-events:none}
html.ck-abierto #dxVelo{opacity:1;pointer-events:auto}
html.ck-abierto,html.ck-abierto body{overflow:hidden}
#dxCk{position:fixed;left:0;right:0;bottom:0;z-index:1401;background:linear-gradient(160deg,var(--navy-600),var(--navy-900));color:var(--bone);border:1px solid rgba(236,112,22,.35);border-bottom:0;border-radius:22px 22px 0 0;padding:26px 22px calc(22px + env(safe-area-inset-bottom,0px));box-shadow:0 -30px 80px -30px rgba(0,0,0,.9);transform:translateY(104%);transition:transform .55s cubic-bezier(.22,1,.36,1)}
html.ck-abierto #dxCk{transform:none}
#dxCk .ck-logo{height:30px;width:auto;display:block;margin-bottom:16px}
#dxCk h2{font-family:var(--f-display);font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1.1;color:var(--bone);text-transform:uppercase}
#dxCk p{margin-top:10px;font-size:.95rem;line-height:1.6;color:var(--concrete)}
#dxCk .ck-ok{margin-top:20px;width:100%;justify-content:center;min-height:52px;border:0;cursor:pointer}
#dxCk .ck-no{display:block;margin:14px auto 0;background:none;border:0;font-family:inherit;font-size:.84rem;color:rgba(244,242,236,.55);text-decoration:underline;text-underline-offset:3px;cursor:pointer;min-height:44px;padding:0 10px;-webkit-tap-highlight-color:transparent;transition:color .25s}
#dxCk .ck-no:hover{color:var(--bone)}
@media(min-width:761px){
  #dxCk{left:50%;right:auto;bottom:auto;top:50%;width:min(460px,92vw);border-radius:22px;border-bottom:1px solid rgba(236,112,22,.35);padding:30px 30px 26px;transform:translate(-50%,calc(-50% + 18px));opacity:0;transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease}
  html.ck-abierto #dxCk{transform:translate(-50%,-50%);opacity:1}
}
@media(prefers-reduced-motion:reduce){#dxCk,#dxVelo{transition:none}}
#dxCk:focus{outline:none}
#dxCk .ck-ok:focus-visible{outline:2px solid var(--bone);outline-offset:3px}
/* "En terreno" compacta en el teléfono: el hub /retiro-de-asbesto/ quedó en 16,6 pantallas (tope 16,5) */
@media(max-width:620px){#en-terreno{padding-top:1.6rem;padding-bottom:1.6rem}#en-terreno .sec-head{margin-bottom:1rem}#en-terreno .gallery{gap:.5rem}}

/* ── /en-los-medios/ realineada (27-ago): Emprende Tu Mente consolidado ── */
.etm-top{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:1.6rem;align-items:start;margin-bottom:1.6rem}
.etm-diario{margin:0;border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line-dark);box-shadow:0 18px 44px rgba(5,15,22,.10)}
.etm-diario img{display:block;width:100%;height:auto}
.etm-diario figcaption,.etm-posts figcaption{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-ink);padding:.7rem .9rem}
.etm-lado{display:flex;flex-direction:column;gap:1.4rem}
.etm-cita{margin:0;padding:1.6rem 1.8rem;border-left:4px solid var(--orange-500);background:#fff;border-radius:0 14px 14px 0}
.etm-cita p{font-family:var(--f-display);font-weight:800;font-size:clamp(1.25rem,1rem + 1.2vw,1.9rem);line-height:1.2;color:var(--navy-700);margin:0;text-transform:uppercase;letter-spacing:-.01em}
.etm-cita cite{display:block;margin-top:.9rem;font-style:normal;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--orange-600,#c85d0f)}
.etm-posts{grid-template-columns:repeat(3,minmax(0,300px));justify-content:center;margin-top:1.6rem}
.etm-posts figure{border-radius:14px;overflow:hidden;border:1px solid var(--line-dark);background:#fff}
.gallery--prensa{grid-template-columns:minmax(0,1fr) minmax(0,2fr);align-items:start}
.gallery--prensa figure:first-child{aspect-ratio:auto;background:#fff;border:1px solid var(--line-dark)}
.gallery--prensa figure:first-child img{height:auto;object-fit:contain}
/* carrusel de fotos: 3 por vista en PC, 2 en tablet, 1 en el teléfono; rota solo (misma lógica que el de obras) */
.foto-slider{position:relative}
.foto-slider__track{display:flex;gap:1rem;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none}
.foto-slider__track::-webkit-scrollbar{display:none}
.foto-slider__track>figure{flex:0 0 calc((100% - 2rem)/3);scroll-snap-align:start;margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;background:var(--navy-900)}
.foto-slider__track>figure img{width:100%;height:100%;object-fit:cover;display:block}
.foto-slider__track>figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,28,38,.7));opacity:0;transition:opacity .4s}
.foto-slider__track>figure:hover::after{opacity:1}
.foto-slider__track>figure figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.7rem;z-index:2;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:all .4s var(--ease-out)}
.foto-slider__track>figure:hover figcaption{opacity:1;transform:none}
@media(max-width:900px){.etm-top{grid-template-columns:1fr}.etm-diario{max-width:360px}.foto-slider__track>figure{flex-basis:calc((100% - 1rem)/2)}.etm-posts{grid-template-columns:repeat(3,1fr)}}
@media(max-width:620px){
  .etm-diario img,.etm-posts img{max-height:236px;width:auto;max-width:100%;margin-inline:auto;object-fit:contain}
  .foto-slider__track>figure{flex-basis:100%;aspect-ratio:auto;max-height:236px}
  .foto-slider__track>figure img{max-height:236px}
  .foto-slider__track>figure figcaption{opacity:1;transform:none}
  .etm-posts{grid-template-columns:1fr}
  .gallery--prensa{grid-template-columns:1fr}
}
/* prensa: páginas completas (contain) lado a lado; en el teléfono una columna */
.gallery.gallery--paginas{grid-template-columns:1.45fr 1fr;align-items:start}
.gallery.gallery--paginas figure{aspect-ratio:auto;background:#fff;border:1px solid var(--line-dark)}
.gallery.gallery--paginas img{height:auto;max-height:820px;object-fit:contain}
@media(max-width:620px){.gallery.gallery--paginas,.gallery.gallery--prensa{grid-template-columns:1fr}.gallery.gallery--paginas img,.gallery.gallery--prensa img{max-height:236px;width:auto;margin-inline:auto}}
@media(max-width:620px){.gallery.gallery--paginas figure,.gallery.gallery--prensa figure{aspect-ratio:auto}}

/* ── CINTA DE FOTOS en movimiento continuo (ETM Day, 27-ago): sangra a todo el ancho,
   bordes fundidos, velocidad constante; se pausa con el mouse y fuera de pantalla ── */
#etm{overflow:clip}
.foto-marquee{position:relative;width:100vw;margin:1.6rem calc(50% - 50vw) 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.foto-marquee__track{display:flex;gap:1rem;width:max-content;animation:fm-scroll var(--dur,90s) linear infinite;will-change:transform}
.foto-marquee:hover .foto-marquee__track,.foto-marquee.is-off .foto-marquee__track,body.visor-open .foto-marquee__track{animation-play-state:paused}
.foto-marquee__track>figure{margin:0;flex:0 0 auto;height:300px;position:relative;border-radius:12px;overflow:hidden;background:var(--navy-900)}
.foto-marquee__track>figure img{height:100%;width:auto;display:block;object-fit:cover}
.foto-marquee__track>figure::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(10,28,38,.7));opacity:0;transition:opacity .4s}
.foto-marquee__track>figure:hover::after{opacity:1}
.foto-marquee__track>figure figcaption{position:absolute;left:.9rem;right:.9rem;bottom:.7rem;z-index:2;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;opacity:0;transform:translateY(8px);transition:all .4s var(--ease-out)}
.foto-marquee__track>figure:hover figcaption{opacity:1;transform:none}
@keyframes fm-scroll{to{transform:translateX(calc(-50% - .5rem))}}
@media(max-width:620px){.foto-marquee__track>figure{height:200px}.foto-marquee__track>figure img{max-height:200px}}
@media(prefers-reduced-motion:reduce){.foto-marquee__track{animation:none}.foto-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}}

/* ══ V3: look moderno — INICIO ══ */
/* ══ V3 · REDISEÑO (28-ago-2026) ═════════════════════════════════════════════
   Ignacio, tras ver el primer intento: "literalmente dejaste todo idéntico. Solo
   añadiste una grilla en el home y está mal, no me gusta. En la v3 quería que
   rediseñaras a tu gusto para un sitio moderno."  Y en seguida: "tipografía y lo
   que dicen los textos se mantiene".

   Tenía razón: lo anterior era una capa de refinamiento, no un rediseño. La malla
   técnica se eliminó por completo. Esto es un sistema visual NUEVO que respeta dos
   cosas intocables —la TIPOGRAFÍA (Rubik, la de la marca) y el CONTENIDO (frases,
   33 URLs, metadatos, JSON-LD)— y rehace todo lo demás: color, escala, retícula,
   superficies, ritmo y movimiento.

   ── DIRECCIÓN: "ACERO Y PAPEL" ────────────────────────────────────────────────
   Editorial industrial de alto contraste. La referencia no es una web de servicios:
   es un catálogo técnico impreso. Cuatro decisiones que cambian la percepción de
   golpe sin tocar la fuente:

   1. COLOR. Fuera el azul-petróleo corporativo. Entra papel cálido como suelo
      dominante y carbón casi negro como tinta; el naranja de seguridad —que es de
      la marca— pasa a usarse como BLOQUE, no como adorno.
   2. ESCALA. Los titulares de sección pasan de 3,4rem a 5,6rem, con la misma
      familia pero en peso 900 y tracking cerrado. Un titular que ocupa media
      pantalla no se lee como un documento de Word.
   3. SUPERFICIE. Se acaban las sombras difusas, los degradados y las esquinas
      redondeadas. Bordes de tinta, bloques planos y esquinas vivas: el volumen lo
      dan el contraste y el corte, no el blur.
   4. RITMO. Se termina la alternancia navy/bone/white sección tras sección — el
      acordeón de colores que hacía que todas las páginas se sintieran iguales.
      El papel es el suelo; el carbón aparece solo donde el contenido pide peso.
   ══════════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── PALETA */
  --tinta:#14181a;            /* casi negro, nunca #000 */
  --carbon:#1b2124;
  --carbon-2:#252c30;
  --papel:#f2efe9;            /* papel cálido */
  --papel-2:#e9e4dc;
  --naranja:#ec7016;
  --naranja-claro:#ff8a32;
  --teal:#02a294;

  /* se reescriben los tokens que usa TODO el CSS del sitio: cambiar la paleta
     desde la raíz repinta las 33 páginas sin dejar una regla huérfana */
  --navy-900:var(--tinta);--navy-800:var(--carbon);--navy-700:#14181a;
  --navy-600:var(--carbon-2);--navy-500:#31393e;
  --bone:#f4f1eb;--bone-2:var(--papel-2);--paper:var(--papel);
  --concrete:#9aa4a8;--concrete-ink:#5b6468;   /* concrete es SOLO para fondo oscuro: sobre papel rinde 2,2:1 */
  --line:rgba(244,241,235,.16);--line-dark:rgba(20,24,26,.15);
  --teal-500:var(--teal);--teal-600:#046b61;--teal-300:#3fd6c7;
  /* --teal-600 bajó de #04796e a #046b61: el anterior daba 4,19:1 sobre el papel-2
     de las secciones .bg-bone, bajo el mínimo de 4,5 para texto pequeño (medido). */
  --orange-500:var(--naranja);--orange-400:var(--naranja-claro);

  /* ── ESCALA (misma familia, otra proporción): el cuerpo sube un punto —se leía
     pequeño— y los titulares se van muy arriba. */
  --step--1:clamp(.72rem,.69rem + .16vw,.82rem);
  --step-0:clamp(1.02rem,.98rem + .22vw,1.16rem);
  --step-1:clamp(1.24rem,1.12rem + .6vw,1.6rem);
  --step-2:clamp(1.7rem,1.4rem + 1.5vw,2.7rem);
  --step-3:clamp(2.4rem,1.7rem + 3.6vw,5.2rem);
  --step-4:clamp(2.9rem,2rem + 4.6vw,6.4rem);
  --step-5:clamp(3rem,2rem + 5.8vw,7.4rem);
  --container:1420px;
  --gutter:clamp(1.15rem,.9rem + 2.6vw,4rem);
}

/* ── BASE ──────────────────────────────────────────────────────────────────── */
body{background:var(--papel);color:var(--tinta);font-size:var(--step-0);
  line-height:1.55;letter-spacing:-.005em}
h1,h2,h3,h4{font-weight:900;line-height:.92;letter-spacing:-.032em}
.h1{font-size:var(--step-4)}
.h2{font-size:var(--step-3)}
::selection{background:var(--naranja);color:#fff}

/* ── ANTETÍTULO: de pastilla con puntito a rótulo de catálogo, con su filete. */
.eyebrow{font-size:.68rem;font-weight:700;letter-spacing:.2em;color:var(--tinta);
  opacity:.62;display:flex;align-items:center;gap:.9rem;margin-bottom:1rem}
.eyebrow::before{content:"";width:38px;height:3px;border-radius:0;background:var(--naranja);
  animation:none;flex:none;opacity:1}
.eyebrow.no-dot::before{display:block}
.bg-navy .eyebrow,.bg-deep .eyebrow{color:var(--papel);opacity:.72}

/* ── CABEZA DE SECCIÓN: el titular manda y la fila se cierra con un filete de
   tinta, como el encabezado de un capítulo. */
.sec-head{align-items:end;padding-bottom:1.3rem;border-bottom:2px solid var(--tinta);
  margin-bottom:clamp(2.2rem,1.6rem + 2.4vw,3.8rem)}
.bg-navy .sec-head,.bg-deep .sec-head{border-bottom-color:rgba(244,241,235,.28)}
.sec-head .h2{max-width:none;text-wrap:balance}
/* La bajada de sección: cuando la cabecera no lleva enlace, se va a la SEGUNDA
   columna, alineada con la base del titular — patrón editorial y, de paso, deja de
   colgar bajo el título dejando un vacío (lint-escritorio la marcaba como columna
   flotante en /en-los-medios/ y /testimonios-y-certificados/). Si hay enlace, la
   columna 2 es suya y la bajada queda debajo, pegada al titular. */
.sec-head > p{max-width:52ch;margin-top:.55rem}
.sec-head:not(:has(> a)) > p{grid-column:2;grid-row:1;align-self:end;margin:0 0 .2rem;max-width:34ch}
@media(max-width:900px){.sec-head:not(:has(> a)) > p{grid-column:1;grid-row:auto;margin-top:.55rem;max-width:52ch}}
/* el enlace de la fila vuelve SIEMPRE a la primera fila, junto al titular: cuando la
   cabecera trae además una bajada (que ocupa las dos columnas) la colocación
   automática lo mandaba a una tercera fila y quedaba flotando bajo el título
   —lo marcó lint-escritorio en /en-los-medios/ y /testimonios-y-certificados/—. */
.sec-head > a{grid-column:2;grid-row:1;align-self:end}
.sec-head--center{border-bottom:0;padding-bottom:0}

/* ── SECCIONES: se acaba la alternancia de tres fondos por página. */
.section{padding-block:clamp(3.8rem,3rem + 4.6vw,7.4rem);position:relative}
.bg-white{background:var(--papel);color:var(--tinta)}
.bg-bone{background:var(--papel-2);color:var(--tinta)}
.bg-navy{background:var(--carbon);color:var(--bone)}
.bg-deep{background:var(--tinta);color:var(--bone)}
.rule-top{border-top:0}
/* el corte hacia una sección oscura es un filete naranja de 4px: marca el cambio
   de capítulo sin repetir la línea de 1px de siempre */
.bg-navy.rule-top,.bg-deep.rule-top{box-shadow:inset 0 4px 0 var(--naranja)}

/* ── BOTONES: bloque sólido de esquina viva. Un pill naranja con sombra es el
   default de cualquier plantilla; un bloque que se invierte al pasar, no. */
.btn{border-radius:0;padding:1.1em 2em;font-size:.72rem;letter-spacing:.14em;
  box-shadow:none;background:var(--naranja);color:#14181a;border:2px solid var(--naranja);
  transition:background .3s var(--ease-out),color .3s,border-color .3s,transform .2s}
.btn::before,.btn::after{display:none}
.btn:hover{background:var(--tinta);border-color:var(--tinta);color:var(--papel)}
.btn:active{transform:translateY(1px)}
.btn--ghost{background:transparent;border-color:currentColor}
.btn--ghost:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}
.hero .btn--ghost,.bg-navy .btn--ghost,.bg-deep .btn--ghost{color:var(--bone);border-color:rgba(244,241,235,.55)}
.btn--teal{background:var(--teal);border-color:var(--teal);color:#fff}
.link-underline,.cta-in a,.svc__link{font-size:.68rem;font-weight:700;letter-spacing:.14em;
  border-bottom:2px solid currentColor;padding-bottom:.22rem;transition:color .3s,gap .3s var(--ease-out)}
.cta-in a:hover,.link-underline:hover{color:var(--naranja);gap:.9em}

/* ── HERO: titular a la escala del papel y el velo con punto de fuga abajo, no un
   telón parejo. */
.hero{background:var(--tinta)}
.hero h1{font-size:var(--step-5);max-width:15ch;letter-spacing:-.04em;line-height:.9;
  filter:none;text-shadow:0 2px 34px rgba(0,0,0,.5)}
.hero h1 .hl{color:var(--papel)}
.hero h1 em{color:var(--naranja-claro)}
.hero__media::after{background:
  linear-gradient(180deg,rgba(20,24,26,.5) 0%,rgba(20,24,26,.34) 34%,rgba(20,24,26,.9) 100%),
  linear-gradient(92deg,rgba(20,24,26,.78) 0%,rgba(20,24,26,.18) 62%,transparent 100%)}
.hero--home .hero__media::after{background:
  linear-gradient(180deg,rgba(20,24,26,.46) 0%,rgba(20,24,26,.3) 30%,rgba(20,24,26,.93) 100%),
  linear-gradient(92deg,rgba(20,24,26,.84) 0%,rgba(20,24,26,.22) 66%,transparent 100%)}
.hero__promise,.hero__scroll{font-size:.66rem;letter-spacing:.16em}
.hero__actions{gap:.8rem}

/* ── HUINCHA: banda de tinta con los logos en negativo; cierra el hero como el
   pie de una portada, en vez de la tira gris que se perdía. */
.huincha{background:var(--tinta);border:0;padding:1.1rem 0}
.huincha__label{background:var(--tinta);color:var(--papel);opacity:.55;
  font-size:.6rem;letter-spacing:.2em}
.huincha img{height:30px;filter:grayscale(1) brightness(0) invert(1);opacity:.52;transition:opacity .3s}
.huincha img:hover{opacity:1}

/* ── CIFRAS: el patrimonio real de la empresa. Enormes, a la izquierda, separadas
   por filete y con la unidad en naranja. */
.stats{gap:0;border-top:2px solid rgba(244,241,235,.28)}
.bg-white .stats,.bg-bone .stats{border-top-color:var(--tinta)}
.stat{border-left:1px solid rgba(244,241,235,.18);padding:1.8rem 1.4rem 0}
.bg-white .stat,.bg-bone .stat{border-left-color:var(--line-dark)}
.stat:first-child{border-left:0;padding-left:0}
.stat__num{font-size:clamp(2.6rem,1.7rem + 3.6vw,5rem);line-height:.86;letter-spacing:-.05em;
  font-variant-numeric:tabular-nums;color:var(--papel);align-items:baseline}
.bg-white .stat__num,.bg-bone .stat__num{color:var(--tinta)}
.stat__num small{font-size:.26em;font-weight:800;letter-spacing:.04em;color:var(--naranja);margin-left:.3em}
.stat__num--palabra{font-size:clamp(1.8rem,1.2rem + 2.4vw,3.4rem)}
.stat__label{font-size:.62rem;letter-spacing:.09em;line-height:1.5;margin-top:1rem;
  max-width:18ch;opacity:.72}
.mnum-grid{border:2px solid var(--tinta);border-radius:0;gap:0;background:var(--tinta)}
.mnum{background:var(--papel);padding:1.7rem 1.4rem 1.5rem}
.mnum__i{margin-bottom:1.1rem}
.mnum__i img{width:36px;opacity:.7}
.mnum__n{font-size:clamp(1.8rem,1.3rem + 1.8vw,2.9rem);letter-spacing:-.045em;
  font-variant-numeric:tabular-nums;color:var(--tinta)}
.mnum__n small{font-size:.36em;color:var(--naranja);letter-spacing:.04em}
.mnum__l{font-size:.6rem;letter-spacing:.07em;margin-top:.85rem;line-height:1.5;color:var(--concrete-ink)}

/* ── TARJETAS: ficha técnica, no "material card". Filete superior, sin sombra ni
   redondeo, y al pasar el contenido se corre en vez de levitar. */
.dxcard,.testi,.press-card,.ytv,.lineas li,.obra-logo,.svc,.qz__panel{border-radius:0}
.dxcard{background:transparent;border:0;border-top:2px solid var(--line-dark);
  padding:1.4rem 0 1.5rem;box-shadow:none;transition:padding-left .4s var(--ease-out)}
.dxcard::before{height:2px;background:var(--naranja);top:-2px}
.dxcard:hover{transform:none;box-shadow:none;padding-left:.9rem;border-color:var(--naranja)}
.bg-navy .dxcard,.bg-deep .dxcard{background:transparent;border-top-color:rgba(244,241,235,.22)}
.dxcard__i{border-radius:0;background:transparent;color:var(--naranja);width:32px;height:32px;margin-bottom:.7rem}
.dxcard__i svg{width:26px;height:26px}
.dxcard:hover .dxcard__i{transform:none}
.dxcard__t{font-size:1rem;letter-spacing:-.01em}
.dxcard__n{display:none}
.dxcard__d{font-size:.92rem;line-height:1.55}

/* índice de servicios: foto a sangre y título sobre la imagen */
.svc{background:var(--tinta);border:0;box-shadow:none;min-height:0}
.svc:hover{transform:none;box-shadow:none}
.svc__img{height:auto;aspect-ratio:4/3}
.svc__img img{transition:transform .9s var(--ease-out)}
.svc:hover .svc__img img{transform:scale(1.04)}
.svc__img::after{background:linear-gradient(180deg,transparent 38%,rgba(20,24,26,.92))}
.svc__num{display:none}
.svc__body{padding:1.25rem 1.4rem 1.5rem;gap:.5rem}
.svc__body h3{font-size:1.22rem;letter-spacing:-.025em}
.svc__body p{font-size:.9rem}
.svc__link{border-bottom-color:var(--naranja);color:var(--naranja);align-self:flex-start}

/* testimonios: la cita manda, el adorno se va */
.testi{background:var(--papel);border:0;border-top:2px solid var(--tinta);padding-top:1.5rem;box-shadow:none}
.testi:hover{transform:none;box-shadow:none}
.testi__q{display:none}
.testi__frase{font-size:1.26rem;font-weight:900;line-height:1.16;letter-spacing:-.025em;text-transform:uppercase}
.testi__detalle{font-size:.8rem;line-height:1.7}
.testi__cert{border-radius:0}

/* ── FOTOS: esquina viva y galerías A SANGRE. Que una galería rompa el contenedor
   y llegue a los bordes cambia el ritmo de toda la página. */
.gallery figure,.mimg,.insignia__media,.svc__img,.yt,.press-card__img,.etm-diario,
.etm-posts figure,.obra-feat,.ctab,.obra-slider__track,.foto-marquee__track > figure{border-radius:0}
.gallery{gap:2px}
.gallery figure::after{background:linear-gradient(180deg,transparent 55%,rgba(20,24,26,.82))}
.gallery figcaption,.insignia__media figcaption,.yt__title{font-size:.58rem;letter-spacing:.1em}
.insignia__media figcaption{border-radius:0;background:var(--naranja);color:#14181a;border:0;
  font-weight:700;backdrop-filter:none}
@media(min-width:901px){
  .section:has(> .container > .gallery) > .container > .gallery{
    width:100vw;max-width:100vw;margin-left:calc(50% - 50vw)}
}

/* ── OBRAS: la ficha destacada como portada de expediente */
.obra-feat{border:2px solid var(--naranja);background:var(--carbon)}
.obra-feat__tag{color:var(--naranja)}
.obra-feat__tag::before{border-radius:0;width:10px;height:10px;animation:none}
.obra-feat h3{font-size:clamp(1.8rem,1.4rem + 1.9vw,3rem);letter-spacing:-.035em}
.obra-feat__metrics b{font-weight:900;font-variant-numeric:tabular-nums;letter-spacing:-.04em}
.obra-feat__metrics span{font-size:.58rem;letter-spacing:.06em}
.obra-feat__metrics div{border-left:2px solid var(--naranja)}
.obra-logo{background:var(--papel);border:1px solid var(--line-dark);box-shadow:none}
.obra-logo:hover{transform:none;border-color:var(--naranja);box-shadow:none}
.obra-dato{font-size:.58rem;line-height:1.7}
.obra-slider__btn{border-radius:0;border-width:2px}
.obra-slider__dot{border-radius:0;width:14px;height:3px}
.obra-slider__dot.is-on{transform:none;background:var(--naranja);width:26px}

/* ── CTA de cierre: bloque de tinta, sin los dos orbes de color de siempre */
.ctab{background:var(--tinta);border:0;box-shadow:none}
.ctab::before,.ctab::after{display:none}
.ctab h2{font-size:var(--step-3);max-width:18ch}
.cta-in{border-top:2px solid var(--line-dark)}
.bg-navy .cta-in,.bg-deep .cta-in{border-top-color:rgba(244,241,235,.24)}
.mcta{border-radius:0}

/* ── FAQ */
.faq{max-width:none;border-top:2px solid var(--tinta)}
.bg-navy .faq,.bg-deep .faq{border-top-color:rgba(244,241,235,.28)}
.faq details{border-bottom:1px solid var(--line-dark)}
.faq summary{font-size:clamp(1.02rem,.95rem + .5vw,1.32rem);font-weight:800;letter-spacing:-.018em;
  padding:1.4rem .2rem;transition:padding-left .35s var(--ease-out),color .25s}
.faq summary:hover{padding-left:.7rem;color:var(--naranja)}
.faq summary .ico{border-radius:0;border-width:2px;border-color:var(--tinta);width:30px;height:30px}
.faq summary .ico svg{stroke:var(--tinta)}
.faq details[open] summary .ico{background:var(--naranja);border-color:var(--naranja);transform:rotate(45deg)}
.faq details[open] summary .ico svg{stroke:#14181a}
.faq details p{font-size:.98rem;padding-bottom:1.5rem}

/* ── CUERPO de las interiores: medida de lectura editorial */
:is(.body-wrap,.body-wrap>.mfold)>h2{letter-spacing:-.03em;font-size:clamp(1.7rem,1.35rem + 1.5vw,2.7rem)}
:is(.body-wrap,.body-wrap>.mfold)>.bwd{font-weight:900;letter-spacing:-.028em;max-width:24ch}
:is(.body-wrap,.body-wrap>.mfold)>p{max-width:60ch;line-height:1.7}
:is(.body-wrap,.body-wrap>.mfold)>.bwl > li{border-bottom-style:solid}
:is(.body-wrap,.body-wrap>.mfold)>.bwq{border-left-width:4px;font-weight:800;font-size:1.14rem;
  line-height:1.3;text-transform:uppercase;letter-spacing:-.02em}
.lineas li{border-radius:0;border-width:0 0 0 4px;border-left-color:var(--naranja);
  background:var(--papel-2);box-shadow:none;color:var(--tinta)}
.bg-navy .lineas li,.bg-deep .lineas li{background:rgba(244,241,235,.07);color:var(--bone);
  border-left-color:var(--naranja)}
.lineas li::before{display:none}
.lineas li:hover{transform:none;box-shadow:none}

/* ── CABECERA y PIE */
.header.solid{background:rgba(20,24,26,.92);backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(244,241,235,.14)}
.nav{height:76px}
.nav__link{font-size:.68rem;letter-spacing:.12em}
.nav__logo img{height:38px}
.footer{background:var(--tinta)}
.footer__col h2{font-size:.62rem;letter-spacing:.2em;font-weight:700}

/* ── MOVIMIENTO: entrada por máscara (el bloque se descubre de abajo hacia
   arriba) en vez del fade + blur genérico. Más seco, más de imprenta. */
.rv.will{opacity:0;transform:translateY(20px);filter:none;clip-path:inset(0 0 100% 0)}
.rv.in{clip-path:inset(0 0 0 0);
  transition:opacity .65s var(--ease-out),transform .65s var(--ease-out),clip-path .85s var(--ease-out)}

/* ══ MÓVIL ═══════════════════════════════════════════════════════════════════ */
@media(max-width:620px){
  /* ── El tamaño de los titulares lo manda la PALABRA MÁS LARGA del sitio ──────
     Con la escala nueva, "DEMOLICIONES" en peso 900 medía 377px dentro de un
     contenedor de 341 y empujaba el documento a 432px en una pantalla de 390: la
     página se movía de lado. En el teléfono la escala se acota, y como red de
     seguridad los titulares parten la palabra antes que desbordar. */
  /* red de seguridad, no herramienta de maquetación: si un titular llega a necesitar
     esto es que el bloque quedó angosto — se arregla el bloque, no la palabra. */
  h1,h2,.h1,.h2,.h2--sub,.testi__frase{overflow-wrap:break-word;word-break:normal;hyphens:none}
  :root{
    --step-3:clamp(1.9rem,1.35rem + 2.2vw,2.6rem);
    --step-4:clamp(1.85rem,1.3rem + 2.4vw,2.8rem);   /* el tope lo pone "DESCONTAMINACIÓN": 16 letras */
    --step-5:clamp(1.8rem,1.2rem + 2.6vw,2.9rem);   /* el titular del hero: mismo tope que arriba */
  }
  .section{padding-block:clamp(2.8rem,2.2rem + 3vw,4rem)}
  /* en el teléfono la cabecera es UNA columna: la segunda es `auto` y, al mandarle
     la bajada, crecía al ancho del texto y sacaba la página de cuadro (446px en 390). */
  .sec-head{grid-template-columns:minmax(0,1fr);padding-bottom:1rem;margin-bottom:1.5rem}
  /* ojo con la especificidad: `.sec-head > a` (0,1,1) le gana a `.sec-head > *` (0,1,0),
     así que el enlace se quedaba en la segunda columna, angostaba la primera y el titular
     se partía en sílabas ("ECONO MÍA, RAPID EZ"). Hay que devolverlo por su mismo selector. */
  .sec-head > *{grid-column:1;grid-row:auto;min-width:0}
  .sec-head > a,.sec-head:not(:has(> a)) > p{grid-column:1;grid-row:auto;justify-self:start;align-self:start}
  .hero h1{font-size:var(--step-5);max-width:none;line-height:.98}
  /* a 390px, "DEMOLICIONES" en peso 900 medía 377px y sacaba la página 42px de su
     ancho (el lint móvil lo marcó como DESBORDE). El titular más largo del sitio
     manda el tope. */
  .stats{grid-template-columns:1fr 1fr;row-gap:0}
  .stat,.stat:nth-child(3n+1){border-left:1px solid var(--line-dark);padding:1.2rem 0 1rem 1rem}
  .bg-navy .stat,.bg-deep .stat{border-left-color:rgba(244,241,235,.18)}
  .stat:nth-child(odd),.stat:first-child{border-left:0;padding-left:0}
  .stat:last-child{grid-column:1/-1;border-left:0;padding-left:0}
  .stat__num{font-size:clamp(2.3rem,1.4rem + 4.6vw,3.2rem)}
  .stat__label{font-size:.58rem;max-width:none;margin-top:.65rem}
  .mnum{padding:1.05rem .95rem}
  .mnum__n{font-size:1.65rem}
  .btn{padding:1em 1.4em;font-size:.68rem;min-height:48px;display:inline-flex;align-items:center}
  .svc__img{aspect-ratio:16/10;max-height:200px}
  .svc__img img{max-height:200px}
  .svc__body{padding:1rem 1.05rem 1.2rem}
  .faq summary{padding:1.15rem .1rem;min-height:56px}
  .faq summary:hover{padding-left:.1rem}
  .huincha img{height:24px}
}
@media(prefers-reduced-motion:reduce){
  .rv.will{clip-path:none;transform:none}
  .rv.in{transition:opacity .3s}
}

/* ── HERENCIA DE COLOR tras el cambio de paleta ───────────────────────────────
   El <body> pasó de tinta clara sobre fondo oscuro a tinta oscura sobre papel.
   Todo lo que NO declara color propio se invirtió: en el hero, las palabras del
   titular que van sueltas (sin <span>) quedaron NEGRAS sobre la foto. Los
   contenedores oscuros tienen que declarar su color explícitamente. */
.hero,.hero__inner,.hero h1,.footer,.mmenu,.ctab,.obra-feat{color:var(--bone)}
.hero h1 .hl{color:var(--papel)}
.footer,.footer p,.footer a,.footer__col a{color:var(--bone)}
.footer a:hover{color:var(--naranja)}

/* ── CONTRASTE tras el cambio de paleta (medido con lint-contraste-texto) ─────
   El naranja de marca (#ec7016) rinde 5,9:1 sobre tinta pero solo 2,65:1 sobre
   papel: sirve como BLOQUE de fondo, no como color de texto sobre claro. Para
   texto pequeño sobre papel se usa su versión oscura (5,2:1). El antetítulo pasa
   de opacidad .62 (4,19:1 sobre papel-2, bajo el mínimo) a .75. */
:root{--naranja-texto:#a34909}
.eyebrow{opacity:.75}
.bg-white .svc__link,.bg-bone .svc__link,
.bg-white .cta-in a:hover,.bg-bone .cta-in a:hover,
.bg-white .link-underline:hover,.bg-bone .link-underline:hover,
.bg-white .faq summary:hover,.bg-bone .faq summary:hover,
.bg-white .text-accent,.bg-bone .text-accent,
.bg-white .mnum__n small,.bg-bone .mnum__n small,
.bg-white .testi__cert,.bg-bone .testi__cert{color:var(--naranja-texto)}
.svc__body{background:var(--papel)}
.svc__body .svc__link{color:var(--naranja-texto);border-bottom-color:var(--naranja-texto)}
.text-accent{color:var(--naranja-texto)}
.bg-navy .text-accent,.bg-deep .text-accent,.hero .text-accent{color:var(--naranja-claro)}

/* el gris claro de los cuerpos de tarjeta era para fondo oscuro; con el cuerpo en
   papel hay que usar la tinta gris (2,22:1 → 5,28:1) */
.svc__body p,.bg-white .svc__body p,.bg-bone .svc__body p{color:var(--concrete-ink)}
.bg-navy .svc__body p,.bg-deep .svc__body p{color:var(--concrete-ink)}
/* la firma de la cita del ETM usaba un naranja intermedio (4,18:1 sobre papel) */
.etm-cita cite{color:var(--naranja-texto)}

/* ── BOTONES FANTASMA sobre bloque oscuro ─────────────────────────────────────
   .btn fija color tinta; .btn--ghost solo lo invertía dentro de .bg-navy/.bg-deep,
   y el bloque de cierre (.ctab) es tinta DENTRO de una sección clara: los botones
   "WhatsApp directo" y el teléfono quedaron con texto negro sobre negro — cajas
   vacías. El ghost hereda el color de su contenedor, no el del botón. */
.ctab .btn--ghost,.footer .btn--ghost,.obra-feat .btn--ghost{color:var(--bone);border-color:rgba(244,241,235,.55)}
.ctab .btn--ghost:hover,.footer .btn--ghost:hover{background:var(--papel);color:var(--tinta);border-color:var(--papel)}

/* la cabecera de sección ya cierra con su filete: el borde superior del acordeón
   dibujaba una segunda línea a 2px de la primera */
.sec-head + .faq{border-top:0}
/* el desplegable del menú traía el azul-petróleo antiguo escrito a mano */
.mega{background:rgba(20,24,26,.98);border-color:rgba(244,241,235,.14)}
.mega__feat{border-radius:0;border-color:rgba(244,241,235,.16)}
.mega__t a{color:var(--teal-300)}
/* ══ V3: look moderno — FIN ══ */