/* 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}}




/* ── 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)}
}