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

/* ══ MOVIL-V2B: optimización móvil — INICIO ══ */
/* ══ OPTIMIZACIÓN MÓVIL v2 · revisión antes de enviar a Soledad (28-ago-2026) ══
   Auditoría a 390×844 con `qa-movil.mjs`, `qa-tactil.mjs`, `lint-contraste-texto.mjs`
   y `verificar-titulares.mjs`. El sitio pasaba los seis veredictos; lo que aparece
   acá son cosas que esos lints no medían: el tamaño real de lo que toca un dedo y
   el texto que en un teléfono ya no se lee.
   Nada de esto cambia contenido ni estructura: son medidas. ═══════════════════ */

@media(max-width:900px){
  /* 1. EL BOTÓN DE MENÚ medía 42×26. Es el control más usado del sitio en el
     teléfono y estaba a la mitad del mínimo táctil de Apple (44×44). Las tres
     líneas no cambian de tamaño: crece el área que recibe el toque. */
  .burger{padding:12px 10px;min-width:44px;min-height:44px;justify-content:center;box-sizing:content-box}
}

@media(max-width:620px){
  /* 2. LEYENDAS SOBRE LA FOTO a 8,3px: describen lo que se ve ("Señalética
     obligatoria en toda faena con asbesto") y a ese tamaño no se leían. */
  .cap{font-size:.7rem;letter-spacing:.08em;padding:.45em .85em;line-height:1.35}
  .yt__title{font-size:.68rem;letter-spacing:.08em}
  .gallery figcaption,.insignia__media figcaption{font-size:.66rem;letter-spacing:.08em}

  /* 3. TEXTO DE LECTURA bajo 14px: el cuerpo de las tarjetas y las fichas quedaba
     en 12,6-13,6px. En un teléfono eso obliga a acercar la pantalla. */
  .dxcard__d,.svc__body p,.rel span,.cert__det,.press-card__body p,.testi__detalle{font-size:.88rem;line-height:1.6}
  .mnum__l,.stat__label{font-size:.7rem;letter-spacing:.06em}

  /* 4. ENLACES DEL PIE a 33px de alto: son doce y se tocan con el pulgar. */
  .footer__col a{padding:.5rem 0;display:block;min-height:44px;line-height:1.6}
  .footer__col h2{margin-bottom:.2rem}

  /* 5. ÍTEMS DEL MENÚ MÓVIL a 38px (los de segundo y tercer nivel). El menú se
     desplaza, así que ganar altura por ítem no esconde nada. */
  .mmenu .sub a,.mmenu .sub--hija a,.mmenu a.mother{min-height:44px;display:flex;align-items:center}
  .mmenu .sumlink{min-height:44px;display:inline-flex;align-items:center}

  /* 6b. El texto más grande alargó el hub de /retiro-de-asbesto/ de 16,4 a 16,6
     pantallas (tope 16,5). Se recupera apretando el aire de las secciones de
     rejilla, que ya traen separación propia entre tarjetas. */
  .section:has(> .container > .svc-grid),
  .section:has(> .container > .dxg),
  .section:has(> .container > .rel-g){padding-block:2.6rem}
  .sec-head{margin-bottom:1.4rem}

  /* 6. MIGAS DE PAN de 17px de alto: se tocan para volver atrás. La clase es .crumb
     (singular), no .crumbs — con el nombre equivocado la regla no hacía nada. */
  .crumb a{padding:.45rem 0;display:inline-block;min-height:34px;line-height:1.6}

  /* 7b. El LOGO del encabezado es el enlace a la portada y medía 109×36. */
  .nav__logo{min-height:44px;display:flex;align-items:center}
}

/* 7. CONTRASTE en /contacto/ (medido con lint-contraste-texto).
   ⚠ Primer intento: se oscureció el rótulo y el dato de la tarjeta de contacto…
   que está sobre fondo NAVY. El "Teléfono" cayó de 3,79:1 a 1,33:1 y el número a
   1,58:1 — texto oscuro sobre azul oscuro, casi invisible. Cada regla tiene que
   mirar el fondo REAL sobre el que va: la tarjeta es oscura, el paso del
   formulario es claro. */
.fstep__k{color:#4a5459}                       /* sobre papel: 3,79 → 7,1:1 */
.contact-card .k,.contact-card span.k{color:#b8c4c9}   /* sobre navy-600: 4,6:1 */
/* El antetítulo teal sobre el papel de las secciones claras rinde 4,32:1 y sobre el
   papel-2 de .bg-bone baja a 3,77 (mínimo 4,5). Un punto más oscuro lo deja en
   4,9-5,3 sin que se note el cambio de color. Va con la MISMA especificidad que la
   regla que lo pinta hoy (.bg-bone .eyebrow), o no gana. */
.bg-bone .eyebrow,.bg-white .eyebrow{color:#036c62}

/* "Obra parada por asbesto — atendemos 24/7" lleva el naranja en un style INLINE,
   así que ninguna regla lo pisa sin !important: es el único de este archivo.
   4,4:1 a 18px/600 (no califica como texto grande) → 4,9:1. */
.contact-card .v[style*="orange-400"]{color:#ff9a4d!important}
/* ══ MOVIL-V2B: optimización móvil — FIN ══ */
/* ===== CORRECCIONES 3-sep-2026 (cliente) — se anexa a assets/site.css ===== */

/* — 1. Control de reproducción del video destacado (.yt--hero).
     Historia de la corrección, porque las dos posiciones obvias ya fallaron:
       · Esquina inferior derecha → el cliente la rechazó ("quedó muy en la orilla").
       · Centrado → el disco naranja cae JUSTO sobre la cara de Larraín y se lee
         como una nariz de payaso. Eso es lo que el cliente estaba describiendo.
     Medido sobre el fotograma real (i.ytimg.com/vi/NcCHrETerEE): su cara ocupa
     del 34% al 66% del alto de la tarjeta en computador y del 45% al 75% en
     teléfono. En teléfono NO cabe ningún disco de tamaño usable bajo su mentón:
     entre el mentón (75%) y el borde quedan 47 px, y abajo va el rótulo.
     Salida: una PÍLDORA con etiqueta, centrada horizontalmente y baja en el
     encuadre. Está centrada (que es lo que pidió), no toca la cara, no está en
     la orilla y, al no ser un círculo, no puede volver a leerse como nariz.
     Solo afecta al video destacado: las demás tarjetas conservan el disco abajo
     a la derecha que el cliente pidió el 27-ago. */
.yt--hero .yt__play,
.yt--hero:hover .yt__play,
.yt--hero:focus-visible .yt__play {
  top: auto; bottom: 11%; left: 50%; right: auto;
  transform: translateX(-50%);
  width: auto; height: auto; border-radius: 999px;
  padding: .8rem 1.45rem .8rem 1.1rem;
  display: inline-flex; align-items: center; gap: .6rem;
  box-shadow: 0 12px 34px rgba(0,0,0,.45);
}
.yt--hero:hover .yt__play,
.yt--hero:focus-visible .yt__play { transform: translateX(-50%) scale(1.05); }
.yt--hero .yt__play svg { width: 16px; height: 16px; margin-left: 0; }
/* La etiqueta es del control, no del contenido: el nombre accesible sigue siendo
   el aria-label de la tarjeta. Cada página destaca un video distinto. */
.yt--hero .yt__play::after {
  content: "Ver el video";
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .7rem; font-weight: 600; letter-spacing: .11em;
  text-transform: uppercase; color: #fff; white-space: nowrap;
}
.yt--hero[data-yt="NcCHrETerEE"] .yt__play::after { content: "Ver el testimonio"; }

/* En teléfono el rótulo del video se parte en dos líneas contra el borde
   inferior — exactamente donde va la píldora. Se sube al borde superior con su
   propio degradado, y el de abajo se suaviza para que la píldora se apoye sobre
   la imagen y no sobre una franja negra. */
@media (max-width: 620px) {
  .yt--hero::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4.4rem; z-index: 1;
    background: linear-gradient(180deg, rgba(5,15,22,.92), rgba(5,15,22,0));
    pointer-events: none;
  }
  .yt--hero::after { background: linear-gradient(180deg, transparent 70%, rgba(5,15,22,.4)); }
  .yt--hero .yt__title { top: .85rem; bottom: auto; }
  .yt--hero .yt__play { bottom: 5%; padding: .6rem 1rem .6rem .78rem; gap: .45rem; }
  .yt--hero .yt__play::after { font-size: .6rem; letter-spacing: .09em; }
  .yt--hero .yt__play svg { width: 12px; height: 12px; }
}

/* — 2. Huincha de Nicolás Larraín: la franja de la web actual (larrain-bg.jpg),
     en las 33 páginas, justo sobre el pie. */
.hl-larrain {
  position: relative; isolation: isolate;
  background: #0a1c26 url("/assets/img/larrain-bg.jpg") center right / cover no-repeat;
  border-top: 1px solid var(--line);
}
.hl-larrain::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, #06141d 0%, rgba(6,20,29,.94) 38%, rgba(6,20,29,.35) 68%, rgba(6,20,29,.08) 100%);
}
.hl-larrain__in {
  max-width: 1240px; margin: 0 auto; padding: 3.2rem 1.4rem;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1rem;
  max-width: min(1240px, 100%);
}
.hl-larrain__in > * { max-width: 34rem; }
.hl-larrain .eyebrow { color: var(--teal-300, #43c6b7); }
.hl-larrain h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.7vw, 2.3rem);
  line-height: 1.12; letter-spacing: -.02em; color: #fff; margin: 0;
}
.hl-larrain__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--orange-500, #ec7016); color: #fff;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  padding: .85rem 1.3rem; border-radius: 999px; text-decoration: none;
  transition: transform .3s var(--ease-out, ease), box-shadow .3s;
}
.hl-larrain__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(236,112,22,.4); }
.hl-larrain__cta svg { width: 13px; height: 13px; }
@media (max-width: 620px) {
  .hl-larrain { background-position: 72% center; }
  .hl-larrain::before {
    background: linear-gradient(180deg, rgba(6,20,29,.55) 0%, rgba(6,20,29,.86) 46%, #06141d 100%);
  }
  .hl-larrain__in { padding: 12rem 1.2rem 2.2rem; }
}

/* — 3. Botón del audio del eslogan "Somos demoledores". El cliente lo pidió
     "más destacado y que se escuche más veces": el disparo automático al entrar
     a una sección lo hace el JS; este botón es el control siempre disponible
     (y el único camino que funciona en el teléfono sin un toque previo). */
.slogan-audio {
  display: inline-flex; align-items: center; gap: .7rem;
  background: transparent; border: 1px solid rgba(255,255,255,.28);
  color: #fff; border-radius: 999px; padding: .7rem 1.15rem .7rem .8rem;
  cursor: pointer; font: inherit;
  transition: border-color .3s, background .3s;
}
.slogan-audio:hover, .slogan-audio:focus-visible { border-color: var(--orange-500, #ec7016); background: rgba(236,112,22,.12); }
.slogan-audio__ico {
  width: 30px; height: 30px; border-radius: 50%; flex: none;
  background: var(--orange-500, #ec7016); display: grid; place-items: center;
}
.slogan-audio__ico svg { width: 14px; height: 14px; fill: #fff; }
.slogan-audio__txt {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
/* barras de la onda: quietas en reposo, animadas mientras suena */
.slogan-audio__wave { display: flex; align-items: flex-end; gap: 2px; height: 14px; }
.slogan-audio__wave i { width: 2px; height: 4px; background: currentColor; opacity: .55; border-radius: 1px; }
.slogan-audio.is-playing .slogan-audio__wave i { animation: sa-wave .9s ease-in-out infinite; opacity: 1; }
.slogan-audio.is-playing .slogan-audio__wave i:nth-child(2) { animation-delay: .12s; }
.slogan-audio.is-playing .slogan-audio__wave i:nth-child(3) { animation-delay: .24s; }
.slogan-audio.is-playing .slogan-audio__wave i:nth-child(4) { animation-delay: .36s; }
@keyframes sa-wave { 0%,100% { height: 4px } 50% { height: 14px } }
@media (prefers-reduced-motion: reduce) {
  .slogan-audio.is-playing .slogan-audio__wave i { animation: none; height: 9px; }
}
.footer .slogan-audio { margin-top: 1.1rem; }

/* — 4. Galería dentro de una tarjeta de obra destacada (Espacio Cultural Chino,
     Líder, Clínica Alemana): el cliente pidió "explotar el material".
     OJO con la regla base `.obra-feat__media img{position:absolute;inset:0}`:
     saca del flujo a TODA imagen de esa columna, así que las figuras se quedaban
     sin altura y la galería colapsaba a 0 — la tarjeta se veía con el lado de la
     foto vacío. Por eso acá se devuelve la imagen al flujo (igual que hace la
     variante --logo) y la altura la fija el aspect-ratio de cada figura. */
.obra-feat__media--gal { display: grid; gap: .5rem; align-content: start; padding: .5rem; }
.obra-feat__media--gal::after { display: none; }          /* el degradado del base tapaba las fotos */
.obra-feat__media--gal img { position: static; display: block; width: 100%; height: 100%; object-fit: cover; }
.obra-feat__media--gal .ofg-main { margin: 0; position: relative; border-radius: 4px; overflow: hidden; aspect-ratio: 3/2; }
.obra-feat__media--gal .ofg-tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.obra-feat__media--gal .ofg-tira figure { margin: 0; border-radius: 3px; overflow: hidden; aspect-ratio: 1/1; }
.obra-feat__media--gal figcaption {
  position: absolute; left: .7rem; bottom: .6rem; z-index: 2;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(6,20,29,.72); padding: .3rem .55rem; border-radius: 2px;
}

/* — 5. RSE / ETM Day en la portada: el testimonio de El Mercurio, legible.
     Hasta ahora la página del diario existía solo como imagen. */
.rse { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: 2.2rem; align-items: start; }
.rse__diario { margin: 0; }
.rse__diario img {
  display: block; width: 100%; height: auto; border-radius: 4px;
  border: 1px solid var(--line); background: #fff;
}
.rse__diario figcaption {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .62rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #8aa0aa); margin-top: .6rem;
}
.rse__cita { margin: 0 0 1.3rem; padding: 0 0 0 1.1rem; border-left: 2px solid var(--orange-500, #ec7016); }
.rse__cita p {
  font-size: clamp(1.15rem, .95rem + .8vw, 1.6rem); line-height: 1.28;
  letter-spacing: -.015em; font-weight: 500; margin: 0;
}
.rse__texto p { margin: 0 0 .85rem; }
.rse__texto p:last-child { margin-bottom: 0; }
.rse__firma {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #8aa0aa); margin-top: 1.1rem;
}
@media (max-width: 860px) { .rse { grid-template-columns: 1fr; gap: 1.6rem; } }

/* — 6. Las dos ediciones especiales de El Mercurio, lado a lado y grandes. */
.ediciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 1.4rem; }
.ediciones figure { margin: 0; display: flex; flex-direction: column; gap: .7rem; }
.ediciones a { display: block; border-radius: 4px; overflow: hidden; border: 1px solid var(--line); background: #fff; }
.ediciones img { display: block; width: 100%; height: auto; }
.ediciones figcaption {
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted, #8aa0aa);
}
.ediciones figcaption b { display: block; color: inherit; font-weight: 600; letter-spacing: .1em; }

/* — 7. Galería de la obra Meiggs (Espacio Cultural Chino).
     Iba con la clase .gallery genérica, que fuerza aspect-ratio 4/3 con
     object-fit:cover — y los renders son 1,41:1, así que el recorte se comía
     justo la franja de abajo: el LETRERO de auspicio con los tres logos
     (Espacio Cultural Chino · Comunidad de China en Chile · DEXA Chile), que es
     exactamente lo que el cliente pidió mostrar. Acá los renders van sin
     recortar y las fotos de faena sí se recortan, que da lo mismo. */
.gal-meiggs { display: grid; gap: 1rem; margin-top: 1.4rem; }
/* Las dos grandes se recortan a 4/3: ahora son FOTOS de la faena (antes eran
   renders con una franja de logos que no se podía cortar). Con fotos el recorte
   no pierde información, y permite mezclar horizontales y verticales sin que
   una columna quede más alta que la otra. */
.gal-meiggs__renders { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.gal-meiggs__renders figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; background: #0a1c26; aspect-ratio: 4/3; }
.gal-meiggs__renders img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-meiggs__faena { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.gal-meiggs__faena figure { margin: 0; position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/3; }
.gal-meiggs__faena img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gal-meiggs figcaption {
  position: absolute; left: .7rem; bottom: .6rem; z-index: 2;
  font-family: var(--f-mono, ui-monospace, monospace);
  font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(6,20,29,.74); padding: .3rem .55rem; border-radius: 3px;
}
@media (max-width: 760px) {
  .gal-meiggs__renders { grid-template-columns: 1fr; }
  .gal-meiggs__faena { grid-template-columns: repeat(2, 1fr); }
}
/* >>> corr-sep-4: Espacio Cultural Chino sin comparador antes/después — solo la foto del "antes" a sangre (Ignacio, 4-sep-2026) */
.obra-feat__media>.ofg-main--solo{position:absolute;inset:0;margin:0;aspect-ratio:auto;border-radius:0;overflow:hidden}
.obra-feat__media>.ofg-main--solo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* <<< corr-sep-4 */

/* >>> corr-sep-5: cada sección cabe en UNA pantalla de escritorio (Ignacio, 4-sep-2026)
   "La sección tiene mucho espacio en blanco arriba y abajo… debería verse completa sin hacer
   scroll, y eso en todas las secciones." A 1440 px cada sección traía 152 px de aire arriba y
   otros 152 abajo, más 72 px bajo el título: media pantalla en blanco antes del contenido.
   Criterio medible (medir-secciones.mjs): sección ≤ 817 px a 1440×900 (900 menos la cabecera).
   Móvil no cambia: todo va bajo min-width. */
@media(min-width:769px){
  .section{padding-block:clamp(3.25rem,2.5rem + 1.5vw,4.5rem)}
  .section--tight{padding-block:clamp(2.25rem,1.75rem + 1.5vw,3.25rem)}
  .sec-head{margin-bottom:clamp(1.6rem,1.2rem + 1.2vw,2.4rem)}
  .sec-head .h2{max-width:24ch}
  .cta-in{margin-top:clamp(1.4rem,1rem + .8vw,2rem)}
}

/* 1. "Qué hacemos": los cinco servicios en UNA fila (antes 2 grandes + 3 chicos en dos filas,
      1.180 px). Las fotos pasan a franja de 150 px y las tarjetas pierden el min-height. */
@media(min-width:1121px){
  .svc-grid{grid-template-columns:repeat(5,1fr);gap:1rem}
  .svc,.svc:nth-child(1),.svc:nth-child(2){grid-column:auto;min-height:0}
  .svc__img{height:150px}
  .svc__body{padding:1.1rem 1.1rem 1.2rem;gap:.55rem}
  .svc__body h3{font-size:1.08rem}
  .svc__subs{gap:.3rem}
  .svc__subs a{font-size:.54rem;padding:.4em .7em}
  /* en los hubs (8 y 11 especialidades) la descripción se limita a dos líneas */
  .svc__body p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:.86rem}
}

/* 2. Servicios insignia: cada uno pasa de "foto arriba, texto abajo" (1.290 px) a foto
      vertical a la izquierda y texto a la derecha. El subgrid de cinco filas ya no aplica. */
@media(min-width:961px){
  .insignias{grid-template-rows:none;column-gap:clamp(1.6rem,1rem + 2vw,3rem)}
  .insignia{display:grid;grid-row:auto;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);grid-template-rows:auto auto auto 1fr;column-gap:1.4rem;align-items:start}
  .insignia__media{grid-column:1;grid-row:1/-1;align-self:stretch;margin:0;min-height:0}
  .insignia__media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover}
  .insignia>:not(.insignia__media){grid-column:2}
  .insignia .h2{font-size:clamp(1.45rem,1.1rem + 1vw,1.95rem);margin:0 0 .8rem}
  .insignia p{max-width:none}
  .insignia .feature-list{margin:.9rem 0 1.1rem}
  .insignia .btn{margin-top:0;align-self:end}
  /* el salto forzado del titular dejaba "TIPO" solo en una línea; y el pie de foto repetía el titular */
  .insignia .h2 br{display:none}
  .insignia__media figcaption{display:none}
  .insignia:first-child .insignia__media img{object-position:58% 50%}
}

/* 3. Obras destacadas: el slider mide lo que mide su slide más alto (las de galería: foto
      3/2 + tira 1/1 = 615 px). Foto 16/9 y tira 3/2 → ~490 px, y la sección cabe. */
@media(min-width:961px){
  .obra-feat__media--gal .ofg-main{aspect-ratio:16/9}
  .obra-feat__media--gal .ofg-tira figure{aspect-ratio:3/2}
}

/* 4. Galería de terreno (#galeria, antes dentro de #obras): las 10 fotos en dos filas de
      cinco, todas iguales. Los tres grupos del HTML se disuelven en la grilla. */
.gal-meiggs__mas{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.gal-meiggs__mas figure{margin:0;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3}
.gal-meiggs__mas img{display:block;width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.gal-meiggs__mas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:961px){
  .gal-meiggs{grid-template-columns:repeat(5,1fr);gap:.9rem;margin-top:0}
  .gal-meiggs__renders,.gal-meiggs__faena,.gal-meiggs__mas{display:contents}
  .gal-meiggs figure{aspect-ratio:4/3}
}

/* 5. Quiénes somos: título y párrafo un punto más compactos; la fachada de Av. Kennedy 6800
      va a 400 px junto a los sellos (a 1.320 px de ancho se estiraba una foto de 1.100×500
      a 960 px de alto: gigante y pixelada). */
.fachada{margin:0;position:relative;border-radius:14px;overflow:hidden;width:100%}
.fachada img{display:block;width:100%;height:auto;aspect-ratio:11/5;object-fit:cover}
.fachada figcaption{position:absolute;left:.9rem;bottom:.8rem;font-family:var(--f-mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;background:rgba(10,28,38,.62);backdrop-filter:blur(8px);color:var(--bone);padding:.55em 1em;border-radius:100px;border:1px solid rgba(244,242,236,.2)}
@media(min-width:961px){
  .split__body .h2{font-size:clamp(1.9rem,1.4rem + 1.6vw,2.7rem)}
  .split__body p{font-size:.98rem;line-height:1.62}
  .respaldos--fachada{margin-top:1.5rem;padding-top:1.4rem;gap:1rem 1.6rem}
  .fachada{flex:0 0 400px;width:400px}
  .respaldos--fachada .respaldos__label{margin:0 0 0 auto}
  #nosotros .split__media--4x3 img{aspect-ratio:3/2}
}

/* 6. RSE: la página de El Mercurio medía 1.090 px; se muestra su parte alta (el artículo)
      en 470 px con un desvanecido al pie; la página entera sigue en /en-los-medios/#etm. */
@media(min-width:861px){
  .rse{grid-template-columns:minmax(0,.5fr) minmax(0,1fr);gap:2.6rem;align-items:start}
  .rse__diario{position:relative;max-height:420px;overflow:hidden;border-radius:6px;border:1px solid var(--line-dark)}
  .rse__diario img{height:420px;object-fit:cover;object-position:top;border:0;border-radius:0}
  .rse__diario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:190px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.55) 45%,#fff)}
  .rse__diario figcaption{position:absolute;left:.9rem;bottom:.9rem;z-index:2;margin:0;color:#fff;background:rgba(10,28,38,.74);padding:.5em .95em;border-radius:100px;font-size:.56rem}
}

/* 7. Preguntas frecuentes (26 páginas): título a la izquierda, preguntas a la derecha,
      preguntas un poco más apretadas. Antes el título iba arriba y la lista centrada. */
@media(min-width:961px){
  .section:has(> .container > .faq) > .container{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);column-gap:3rem;align-items:start}
  /* columna 1: el título y, en las páginas interiores, su párrafo de entrada; columna 2: las preguntas */
  .section:has(> .container > .faq) > .container > :not(.faq):not(.cta-in){grid-column:1}
  .section:has(> .container > .faq) > .container > .faq{grid-column:2;grid-row:1/span 2;max-width:none;margin:0}
  .section:has(> .container > .faq) > .container > .cta-in{grid-column:1/-1;grid-row:3}
  .section:has(> .container > .faq) .sec-head{margin-bottom:1rem}
  .faq summary{padding:1.05rem .4rem}
  .faq details p{padding-bottom:1.2rem}
}

/* 8. El testimonio de Nicolás Larraín (32 páginas): se mantiene apilado (titular arriba,
      video debajo — a dos columnas el titular de 160 px flotaba junto a un video de 400, que es
      justo lo que el lint de escritorio prohíbe), pero el video baja de 880 a 800 px de ancho (no menos: bajo el 60 % del contenedor el mismo lint lo marca como franja angosta):
      así el bloque entero, con su CTA, cabe en una pantalla. */
@media(min-width:961px){
  .video-feature--stack{gap:0}   /* el gap de 64 px del flex se reemplaza por el margen del video */
  .video-feature--stack > .yt{max-width:800px;margin-top:1.1rem}
}
/* <<< corr-sep-5 */

/* >>> corr-sep-6: MÓVIL — lo que agregó la ronda de Sole (galería, El Mercurio, Larraín) medido con
   lint-movil (390×844): ninguna foto pasa de 236 px, ningún tramo de más de 2,5 pantallas sin un
   CTA en línea, ninguna hoja de más de 16,5 pantallas. */
@media(max-width:760px){
  /* las dos fotos grandes de la galería de terreno, en par (251 px → 120 px cada una) */
  .gal-meiggs__renders{grid-template-columns:1fr 1fr}
}
@media(max-width:620px){
  /* Larraín ya está en video dos bloques más arriba en todas las páginas: en el teléfono el
     bloque de cita repetido (380 px) es lo que pasaba las hojas de 16,5 pantallas */
  .hl-larrain{display:none}
  /* recorte de El Mercurio (RSE): 594 px → 236 con desvanecido; la página completa vive en /en-los-medios/ */
  .rse__diario{position:relative;max-height:236px;overflow:hidden;border-radius:6px;border:1px solid var(--line-dark)}
  .rse__diario img{height:236px;object-fit:cover;object-position:top;border:0;border-radius:0}
  .rse__diario::after{content:"";position:absolute;left:0;right:0;bottom:0;height:110px;background:linear-gradient(180deg,rgba(255,255,255,0),rgba(255,255,255,.6) 45%,#fff)}
  .rse__diario figcaption{position:absolute;left:.8rem;bottom:.7rem;z-index:2;margin:0;color:#fff;background:rgba(10,28,38,.74);padding:.45em .85em;border-radius:100px;font-size:.54rem}
  /* ediciones especiales de El Mercurio (/en-los-medios/): 482 px → 236, mostrando la cabecera de la página */
  .ediciones figure img{max-height:236px;object-fit:cover;object-position:top}
  /* tarjeta de obra destacada: la foto no pasa de 236 px (la del ECC medía 285) */
  .obra-feat__media{max-height:236px}
  .obra-feat__media--gal .ofg-main{aspect-ratio:16/9}
  .obra-feat__media--gal .ofg-tira figure{aspect-ratio:3/2}
}
/* <<< corr-sep-6 */

/* >>> corr-sep-7: MÓVIL sin aire muerto (Ignacio, 4-sep-2026: "muchos espacios extraños… mucho espacio
   oscuro donde no hay nada"). Medido con medir-vacios.mjs a 390: cada barra de cotización (.s-mcta)
   ocupaba 256 px con 87 de contenido, y cada sección traía 83 px de aire arriba y abajo. */
@media(max-width:620px){
  .section{padding-block:3.25rem}
  .section--tight{padding-block:2.4rem}
  .sec-head{margin-bottom:1.9rem}
  .cta-in{margin-top:1.4rem;padding-top:1rem}
  /* la barra de cotización entre secciones: solo la barra, sin colchón */
  .s-mcta{padding-block:.7rem}
  .s-mcta .mcta{margin:0}
  /* slider de obras: cada slide mide lo suyo, no lo de la más alta (quedaba fondo oscuro vacío) */
  .obra-slider__track{align-items:flex-start;transition:height .35s var(--ease-out)}   /* el alto lo fija site.js según la slide activa */
  .obra-slider__nav{margin-top:.8rem}
  .obra-slider__cuenta{white-space:nowrap}
}
/* <<< corr-sep-7 */

/* >>> corr-sep-8: MURALLA DE OBRAS en el teléfono (Ignacio, 4-sep-2026: "el scroll es casi infinito y hay
   call to actions en la mitad que cortan la sección"). 58 obras a 2 columnas con los datos a la vista =
   6.844 px. Ahora: 3 columnas de logos y los datos de cada obra se despliegan al tocar la tarjeta. */
.s-mcta-in{display:none}
@media(max-width:620px){
  .s-mcta-in{display:block;margin:1.2rem 0 .4rem}
  .s-mcta-in .mcta{margin:0}
  .obra-grid{grid-template-columns:repeat(3,1fr);gap:.55rem;grid-auto-flow:dense}   /* la tarjeta abierta ocupa la fila entera sin dejar un hueco */
  .obra-grid--clientes{grid-template-columns:repeat(3,1fr);gap:.55rem}
  .obra-logo{padding:.7rem .55rem}
  .obra-logo img{max-height:38px}
  .obra-logo--dato{grid-template-rows:auto;aspect-ratio:auto;min-height:78px;padding:.75rem .5rem;position:relative;cursor:pointer;-webkit-tap-highlight-color:transparent}
  .obra-logo--dato img{max-height:38px}
  .obra-logo--dato .obra-dato{display:none}
  .obra-logo--dato::after{content:"+";position:absolute;right:.45rem;bottom:.2rem;font-family:var(--f-mono);font-size:.8rem;line-height:1;color:var(--teal-600);opacity:.85}
  .obra-logo--dato.is-open{grid-column:1/-1;grid-template-columns:96px 1fr;grid-template-rows:auto;gap:.9rem;align-items:center;justify-items:start;padding:.9rem .9rem .9rem .8rem;border-color:var(--teal-600)}
  .obra-logo--dato.is-open::after{content:"−"}
  .obra-logo--dato.is-open .obra-dato{display:block;text-align:left;font-size:.66rem;line-height:1.6}
  .obra-logo--dato.is-open .obra-dato__imgs{flex-direction:column;gap:.4rem}
  .obra-logo--doble{grid-column:span 2}
  .obra-logo--doble.is-open{grid-column:1/-1}
}
/* <<< corr-sep-8 */

/* ══ VIDEOS-TARJETA — INICIO ══ */
/* ══ TARJETAS DE VIDEO (7-sep-2026) ═════════════════════════════════════════════
   Adorno, no espectáculo: el clip se ve dentro de una tarjeta de 420-460 px, o sea
   MÁS chico que su resolución (720×405). Nunca a pantalla completa — el material no
   da, y estirarlo es lo que lo delata. Hasta que la tarjeta no entra en pantalla,
   lo único que pesa es el póster. */
/* La tarjeta va centrada y su CONTENEDOR mide lo que ella, no el ancho de la sección:
   con el contenedor a 1.320 px y la tarjeta a 480, lint-escritorio lo leía —con razón—
   como una franja en blanco al costado. La tarjeta tiene que ser chica (el material no
   da para más); lo que no puede quedar es el hueco alrededor. */
.vgrid{display:grid;gap:1rem;margin-top:1.5rem;width:max-content;max-width:100%;margin-inline:auto}
.vgrid--1{grid-template-columns:minmax(0,480px)}
.vgrid--compi{grid-template-columns:minmax(0,860px);margin-top:1.8rem}
.vcard{margin:0;position:relative}
.vcard__m{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:14px;
  background:var(--navy-900);border:1px solid var(--line)}
.bg-white .vcard__m,.bg-bone .vcard__m{border-color:var(--line-dark)}
.vcard__v{width:100%;height:100%;object-fit:cover;display:block;
  background:var(--navy-900) center/cover no-repeat}
.vcard figcaption{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--concrete);margin-top:.7rem;line-height:1.5}
.bg-white .vcard figcaption,.bg-bone .vcard figcaption{color:var(--concrete-ink)}
/* el triángulo solo se ve mientras el clip no está corriendo: avisa que hay video
   sin prometer controles que no existen (no lleva sonido ni barra) */
.vcard__play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:52px;height:52px;border-radius:50%;background:rgba(10,28,38,.62);
  display:grid;place-items:center;transition:opacity .5s var(--ease-out);pointer-events:none;
  border:1px solid rgba(244,242,236,.28)}
.vcard__play svg{width:20px;height:20px;fill:var(--bone);margin-left:3px}
.vcard.is-on .vcard__play{opacity:0}
@media(max-width:620px){
  .vgrid--1,.vgrid--compi{grid-template-columns:minmax(0,1fr)}
  .vcard__m{border-radius:11px}
  .vcard__play{width:60px;height:60px}   /* en el teléfono es un objetivo táctil real */
}
@media(prefers-reduced-motion:reduce){.vcard__play{opacity:1}}
/* ══ VIDEOS-TARJETA — FIN ══ */

/* ══ AJUSTES-14SEP — INICIO ══ */
/* 1. logos del cliente en las obras destacadas con foto: placa blanca porque los logos del
   cliente vienen sobre blanco (en la tarjeta navy se verían como rectángulos sin intención) */
.obra-feat__logo{display:inline-flex;align-items:center;gap:.8rem;align-self:flex-start;background:#fff;border-radius:10px;padding:.5rem .8rem;margin:-.15rem 0 .05rem}
.obra-feat__logo img{display:block;height:36px;width:auto;max-width:150px;object-fit:contain}
@media(max-width:620px){.obra-feat__logo{padding:.4rem .65rem;gap:.6rem}.obra-feat__logo img{height:28px;max-width:118px}}
/* 2. muralla: las obras nuevas (Abastible) usan el tile estándar logo + comuna + cifras */
/* 3. revista en los medios: la misma pieza que la RSE del home (la transcripción que le gustó al
   cliente). La página se recorta a 560 px con fundido —la dedicatoria está en el tercio de arriba—
   y el retrato de Rodrigo baja bajo el texto, a 380 px. */
.rse--medios{margin-top:.4rem}
.rse--medios .rse__retrato{margin:1.5rem 0 0;max-width:380px;border-radius:10px;overflow:hidden;border:1px solid var(--line-dark);background:#fff}
.rse--medios .rse__retrato img{display:block;width:100%;height:auto;border:0}
.rse--medios .rse__retrato figcaption{font-family:var(--f-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--concrete-ink);padding:.55rem .75rem;line-height:1.4}
/* en la sección de prensa la página del diario va COMPLETA (en el home se recorta con fundido porque
   ahí es un apoyo; acá es el documento) */
@media(min-width:861px){.rse--medios .rse__diario{max-height:none}.rse--medios .rse__diario img{height:auto}.rse--medios .rse__diario::after{display:none}}
/* 4. "Ver el video" en todas las tarjetas de video: la píldora con texto abajo a la derecha, no
   solo en las grandes (.yt--hero ya la tenía; las chicas mostraban el triángulo pelado) */
.yt:not(.yt--hero) .yt__play,.yt:not(.yt--hero):hover .yt__play,.yt:not(.yt--hero):focus-visible .yt__play{width:auto;height:auto;padding:.6rem .95rem .6rem .75rem;border-radius:100px;display:inline-flex;align-items:center;gap:.45rem}
.yt:not(.yt--hero) .yt__play::after{content:"Ver el video";font-family:var(--f-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;line-height:1}
.yt:not(.yt--hero) .yt__play svg{width:14px;height:14px;margin-left:0}
.yt:not(.yt--hero) .yt__title{right:calc(1rem + 122px)}
.vcard__play{left:auto;top:auto;right:1rem;bottom:.9rem;transform:none;width:auto;height:auto;padding:.6rem .95rem .6rem .75rem;border-radius:100px;display:inline-flex;align-items:center;gap:.45rem;background:var(--orange-500);border:0;box-shadow:0 8px 24px rgba(236,112,22,.4)}
.vcard__play::after{content:"Ver el video";font-family:var(--f-mono);font-size:.58rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;white-space:nowrap;line-height:1}
.vcard__play svg{width:14px;height:14px;margin-left:0;fill:#fff}
@media(max-width:620px){.vcard__play{width:auto;height:auto}}
/* 7. segunda vuelta del panel (14-sep): firma de la RSE legible (2,7:1 → 4,6:1 sobre blanco, en el
   home y en medios); píldoras "Ver el video" con la misma tinta que .btn (blanco sobre naranjo daba
   3:1) y rótulo a 10,6 px; aire entre el rótulo de la tarjeta y la píldora */
.rse__firma{color:var(--concrete-ink)}
.yt .yt__play::after,.yt--hero .yt__play::after,.vcard__play::after{color:#0a0a0a;font-size:.66rem;font-weight:700;letter-spacing:.1em}
.yt .yt__play svg,.yt--hero .yt__play svg,.vcard__play svg{fill:#0a0a0a}
.yt:not(.yt--hero) .yt__title{right:calc(1rem + 124px + .6rem)}
@media(max-width:620px){.vcard__play{min-height:40px}}
/* 5. remates de sección: el texto de .cta-in era demasiado chico ("esos textos tienen que estar
   más grandes") */
.cta-in p{font-size:var(--step-0);opacity:.92}
/* ══ AJUSTES-14SEP — FIN ══ */

/* ══ ESCENARIO DE VIDEO (14-sep-2026) ══════════════════════════════════════════════
   El video ya no es "un cuadrado pegado": se apoya sobre una banda diagonal con los colores
   corporativos (teal → navy) rematada con el filete naranjo, que cruza la ventana de canto a
   canto. La tarjeta sigue siendo chica (el material no da para más: 720 px = la resolución del
   clip) y flota sobre la banda con una sombra larga. La banda es decorativa (aria-hidden) y no
   cambia la carga: es CSS puro.
   Pendiente y filete en px atados al ANCHO (1,9 vw): misma inclinación en todas las páginas y
   anchos; el aire de la tarjeta = pendiente + respiro, así ninguna esquina toca el filete. */
#video-faena.section{padding-block:clamp(2.4rem,2rem + 1.2vw,3.25rem);overflow-x:clip}
#video-faena .sec-head{margin-bottom:0}
.vstage{margin-top:0}
.sec-head + .vstage{margin-top:clamp(.9rem,.7rem + .8vw,1.4rem)}
.vstage__head{text-align:center;max-width:66ch;margin:0 auto clamp(1.2rem,1rem + .8vw,1.6rem)}
.vstage__head .h2{text-wrap:balance;margin:0}
.vstage__cta{display:flex;justify-content:center;margin-top:clamp(1rem,.8rem + .6vw,1.4rem)}
.vstage__stage{--slant:clamp(14px,1.9vw,28px);--fil:clamp(3px,.3vw,5px);position:relative;display:grid;justify-items:center;padding:calc(var(--slant) + 1.6rem) 0 calc(var(--slant) + 1.3rem)}
/* un solo ancho en todas las páginas: 720 px = la resolución del clip (a 480 la banda quedaba con
   480 px de teal muerto por lado y el mismo componente se veía distinto entre el home y las interiores) */
.vstage__stage>.vcard{position:relative;z-index:1;width:min(100%,720px)}
.vstage .vcard__play{transition:opacity .25s var(--ease-out)}
.vstage .vcard__m{box-shadow:0 30px 60px -24px rgba(5,15,22,.6),0 0 0 1px rgba(244,242,236,.14)}
.vstage .vcard figcaption{text-align:center;font-size:.72rem;letter-spacing:.14em;margin-top:.7rem;color:#f4f2ec;text-shadow:0 1px 0 rgba(5,15,22,.3)}
.vstage__band{position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:0;pointer-events:none;overflow:hidden}
.vstage__band i{position:absolute;inset:0;display:block}
.vstage__band i:first-child{clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);background:linear-gradient(97deg,var(--teal-600) 0%,var(--teal-500) 46%,var(--navy-600) 100%)}
.vstage__band i:last-child{clip-path:polygon(0 var(--slant),100% 0,100% var(--fil),0 calc(var(--slant) + var(--fil)));background:var(--orange-500)}
.vstage__band::after{content:"";position:absolute;inset:0;clip-path:polygon(0 var(--slant),100% 0,100% calc(100% - var(--slant)),0 100%);background:linear-gradient(97deg,transparent 38%,rgba(255,255,255,.07) 52%,transparent 66%)}
/* sobre fondos claros la sombra es más suave */
.bg-bone .vstage .vcard__m,.bg-white .vstage .vcard__m{box-shadow:0 26px 50px -24px rgba(7,34,51,.45),0 0 0 1px rgba(7,34,51,.08)}
@media(max-width:620px){
  .vstage__stage{--slant:12px;padding:calc(var(--slant) + 1.75rem) 0 calc(var(--slant) + 1.5rem)}   /* 28 px de aire entre el filete y la esquina baja de la tarjeta */
  .vstage__stage>.vcard{width:100%}
  .vstage__head{margin-bottom:1rem}
  .vstage .vcard figcaption{font-size:.64rem;letter-spacing:.1em;line-height:1.45;padding-inline:.5rem;text-wrap:balance}
  .vstage .vcard__m{box-shadow:0 14px 28px -14px rgba(5,15,22,.5),0 0 0 1px rgba(244,242,236,.14)}
}
/* ── HOME, segunda vuelta (14-sep): texto a la izquierda, video a la derecha ─────────────────
   Ignacio: "hiciste literalmente un gradiente y una cinta… en este sitio no usamos gradiente…
   diseños estilo SVG, en diagonal, cortando los colores como cinta". Un bloque NAVY de color plano
   con el canto izquierdo en diagonal, y dos cintas paralelas (teal y naranjo) que lo acompañan;
   el video se apoya sobre el bloque y su esquina superior izquierda cruza las cintas. El bloque
   sale por la derecha hasta el borde de la ventana (la sección lo recorta con overflow-x:clip). */
.vstage--split{--gap:clamp(3rem,2rem + 4vw,7rem);display:grid;grid-template-columns:minmax(0,1fr) min(640px,50%);column-gap:var(--gap);align-items:start}   /* el texto se ancla arriba, a ras del canto superior del video (columna corta nunca flota al medio) */
.vstage__copy{container-type:inline-size;position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:clamp(1rem,.8rem + .6vw,1.4rem);padding-block:2.25rem .5rem}
.vstage__copy .eyebrow{margin:0}
.vstage__title{margin:0;font-size:max(1.5rem,min(2rem,5.7cqw));line-height:1.06;letter-spacing:-.015em;color:var(--navy-700)}   /* cortes de línea semánticos en escritorio (<br>); en móvil fluye */
.vstage__title .lt{font-weight:300;color:var(--navy-600)}
.vstage__title b{font-weight:800;color:var(--navy-700)}
.vstage--split .vstage__stage{--k:clamp(56px,7vw,104px);--x0:60px;justify-items:stretch;padding:2.25rem 0 1.9rem}
.vstage--split .vstage__stage>.vcard{width:100%}
.vstage--split .vstage__band{left:calc(-1*(var(--gap) + 2.5rem) - var(--x0));width:100vw;transform:none}   /* el bloque parte a la izquierda del video: la tarjeta queda ENTERA sobre el navy, sin pisar las cintas (Ignacio, 14-sep) */
.vstage--split .vstage__band::after{display:none}
.vstage--split .vstage__band i:nth-child(1){clip-path:polygon(calc(var(--x0) + var(--k)) 0,100% 0,100% 100%,var(--x0) 100%);background:var(--navy-700)}
.vstage--split .vstage__band i:nth-child(2){clip-path:polygon(calc(var(--x0) + var(--k) - 34px) 0,calc(var(--x0) + var(--k) - 12px) 0,calc(var(--x0) - 12px) 100%,calc(var(--x0) - 34px) 100%);background:var(--teal-600)}
.vstage--split .vstage__band i:nth-child(3){clip-path:polygon(calc(var(--x0) + var(--k) - 48px) 0,calc(var(--x0) + var(--k) - 40px) 0,calc(var(--x0) - 40px) 100%,calc(var(--x0) - 48px) 100%);background:var(--orange-500)}
.vstage--split .vcard__m,.bg-white .vstage--split .vcard__m{box-shadow:none;border:0;outline:0}   /* sin borde ni sombra: sobre el navy se leían como un marco negro */
@media(max-width:1180px) and (min-width:861px){.vstage--split{grid-template-columns:minmax(0,1fr) 44%}}   /* portátiles: más columna para el texto */
@media(max-width:860px){
  .vstage--split{grid-template-columns:minmax(0,1fr);row-gap:1.4rem}
  .vstage__copy{padding-block:.25rem 0}
  .vstage__title br{display:none}
  /* apilado: el bloque navy cruza la ventana de canto a canto con el canto superior en diagonal */
  .vstage--split .vstage__stage{--s:clamp(12px,2.4vw,20px);padding:calc(var(--s) + 16px + 1.5rem) 0 1.5rem}
  .vstage--split .vstage__band{left:50%;width:100vw;transform:translateX(-50%)}
  .vstage--split .vstage__band i:nth-child(1){clip-path:polygon(0 calc(var(--s) + 16px),100% 16px,100% 100%,0 100%)}
  .vstage--split .vstage__band i:nth-child(2){clip-path:polygon(0 calc(var(--s) + 6px),100% 6px,100% 12px,0 calc(var(--s) + 12px))}
  .vstage--split .vstage__band i:nth-child(3){clip-path:polygon(0 var(--s),100% 0,100% 3px,0 calc(var(--s) + 3px))}
}
/* ══ ESCENARIO DE VIDEO — FIN ══ */

/* ══ MÓVIL 17-SEP (scroll de un solo eje) — INICIO ══ */
@media(max-width:620px){
  /* un carril lateral NUNCA scrollea también en vertical: overflow-x:auto hacía computar overflow-y:auto
     (spec CSS) y, como el carril mide lo de la slide activa, el dedo lo arrastraba en diagonal */
  .obra-slider__track,.foto-slider__track{overflow-y:hidden}
  /* la hoja del cotizador solo scrollea en vertical (un formulario jamás se mueve de lado) */
  .qz__sheet{overflow-x:hidden}
}
/* el menú del teléfono (position:fixed, overflow-y:auto) también computaba overflow-x:auto: solo vertical */
.mmenu{overflow-x:hidden}
/* ── TARJETA DE OBRA DESTACADA EN EL TELÉFONO: un formato, una altura (Ignacio, 17-sep, segunda vuelta:
   "la experiencia de scroll lateral presenta muchos bugs de carga… la barra inferior se alarga y acorta según
   la tarjeta… un formato más unificado con mejor UX"). Antes: 11 tarjetas de 423 a 700 px (la barra de flechas
   saltaba hasta 277 px), gradiente oscuro sobre los logos, etiquetas de métricas a 2-3 líneas, fotos que se
   pedían recién al deslizar, 11 halos pulsantes animándose dentro del carril.
   Ahora la VARIABILIDAD SE ELIMINA (no se absorbe con aire): foto o logo de 200 px arriba; cuerpo en rejilla
   de filas FIJAS (etiqueta · título a 2 líneas · subtítulo · ubicación · métricas 2×2 arriba del pie), así
   título, ubicación y primera métrica quedan a la MISMA altura en las 11; la placa del logo del cliente va
   sobre la foto (como en las de logo el cliente vive en la cabecera). Panel de 3 jueces del 17-sep. ── */
@media(max-width:620px){
  .obra-slider__track{align-items:stretch;transition:none}
  .obra-slider__track>.obra-feat{height:var(--obra-h,512px);scroll-snap-stop:always;grid-template-rows:200px minmax(0,1fr);background:var(--navy-800);border-color:rgba(244,242,236,.14)}
  .obra-slider .obra-feat__tag::before{animation:none}          /* 11 halos infinitos dentro del carril = repaints; se percibía como "carga" */
  /* cabecera: foto o logo, 200 px, sin el degradado de escritorio */
  .obra-feat__media{min-height:0;max-height:none;height:200px;order:-1;overflow:hidden}
  .obra-feat__media::after{display:none}
  .obra-feat__media--gal{display:block;padding:0}
  .obra-feat__media--gal .ofg-main{position:absolute;inset:0;aspect-ratio:auto;border-radius:0;margin:0}
  .obra-feat__media--gal .ofg-tira{display:none}               /* la tira de miniaturas no cabe en 200 px: la foto principal manda */
  .obra-feat__media figcaption{display:none}                    /* la ubicación ya va en el cuerpo: sobre la foto era ruido */
  .obra-feat__media--logo{min-height:0;padding:1.4rem 1.6rem;background:var(--bone)}
  .obra-feat__media--logo img{max-width:58%;max-height:46%;width:auto;height:auto}   /* peso óptico común entre logos */
  /* la placa del logo del cliente (tarjetas con foto) se posa sobre la foto, esquina inferior izquierda */
  .obra-slider .obra-feat__logo{position:absolute;left:12px;top:148px;z-index:2;height:40px;margin:0;padding:.35rem .6rem;box-shadow:0 6px 18px -8px rgba(5,15,22,.6)}
  .obra-slider .obra-feat__logo img{height:28px;max-width:118px}
  /* cuerpo: rejilla de filas fijas → nada cambia de altura entre tarjetas */
  .obra-feat__body{display:grid;grid-template-rows:16px 52px 20px 18px minmax(0,1fr);row-gap:.5rem;padding:1.1rem 1.25rem 1.1rem;min-height:0;overflow:hidden;align-items:start}
  .obra-feat__tag{grid-row:1;margin:0}
  .obra-feat h3{grid-row:2;font-size:1.45rem;line-height:1.1;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin:0}
  .obra-feat__sub{grid-row:3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;font-size:.85rem;line-height:20px}
  .obra-feat .where{grid-row:4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0;line-height:18px}
  /* métricas: pie con filete arriba, 2 columnas, filas iguales, etiquetas a 11 px (mínimo legible en iPhone) */
  .obra-feat__metrics{grid-row:5;align-self:start;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:.6rem .8rem;margin:.35rem 0 0;padding-top:.85rem;border-top:1px solid rgba(244,242,236,.1)}
  .obra-feat__metrics div{padding-left:.7rem}
  .obra-feat__metrics b{font-size:1.25rem;line-height:1.05;margin-bottom:.2rem}
  .obra-feat__metrics span{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;line-height:1.3;font-size:11px;height:2.6em;letter-spacing:.05em;color:rgba(244,242,236,.72)}
}
/* ══ MÓVIL 17-SEP — FIN ══ */