/* ═══════════════════════════════════════════════════════════════════════════
Multiplásticos Jaramillo — v3
Paleta y proporción: las definió el cliente el 2026-08-14.
→ imagen/CATALOGO-MATERIAL-CLIENTE-2026-08-14.md
Sin build, sin dependencias. Contraste medido con medir-contraste-v3.js.
Tres decisiones que explican todo lo demás:
1. Fondo marfil, tinta grafito, verde al 10%. El verde se gana el sitio
donde aparece: una línea, un dato, un botón. Nunca de relleno.
2. El mono (IBM Plex Mono) es el gesto del oficio — hoja de especificación
de obra. Va en dato, nunca en párrafo.
3. La fotografía va limpia, sin filtro de color: lo pidió el cliente y es
lo correcto — un comprador industrial quiere ver el producto, no un
tratamiento.
═══════════════════════════════════════════════════════════════════════════ */
:root{
/* ── PALETA OFICIAL DE MARCA ─────────────────────────────────────────────
La definió el cliente el 2026-08-14 (ver imagen/CATALOGO-MATERIAL-…md).
Proporción que pidió: 60% marfil/blanco · 25% grafito/negro · 10% verde ·
5% gris/arena. Su regla, textual: "el verde NO va a inundar; lo tratamos
como el segundero de un Rolex — pequeño, preciso y reconocible."
Los nombres de token se conservan para no reescribir 600 líneas; lo que
cambia es el valor. La equivalencia va en cada línea. */
--arena:#F4F3EE; /* Marfil Técnico — fondo principal */
--arena-2:#E7E2D7; /* Arena Industrial — bandas y piezas especiales */
--arena-3:#FFFFFF; /* Blanco — tarjetas, fichas técnicas, producto */
--cantera:#D9DDDA; /* Gris Cemento — líneas, tablas, bordes */
--cantera-2:#BFC5C1; /* gris cemento oscurecido, para bordes que deben verse */
--asfalto:#111412; /* Negro Técnico — títulos fuertes, fondos de alto contraste */
--asfalto-2:#1C201D; /* negro técnico elevado, para tarjetas sobre negro */
--grafito:#303532; /* Grafito — textos principales */
--grafito-2:#565C58; /* grafito claro — texto terciario */
--reciclado:#176B3A; /* VERDE JARAMILLO — el color de marca */
--reciclado-hondo:#0F4D2A; /* Verde Profundo — encabezados y piezas premium */
--reciclado-viv:#5FAF7C;/* verde claro: SOLO sobre fondo oscuro */
--acero:#303532; /* el dato técnico va en grafito, no en azul */
--senal:#B98420; /* ámbar de obra, solo para "por confirmar" */
--senal-bg:#F6EDD9; /* fondo del chip */
--senal-tx:#6B4A0E; /* texto del chip */
--sobre-oscuro:#F4F3EE; /* marfil sobre negro técnico */
--sobre-oscuro-2:#B9BEBA;
/* tipografía */
--d:'Archivo','Arial Narrow',Helvetica,sans-serif; /* display */
--s:'IBM Plex Sans',system-ui,'Segoe UI',sans-serif; /* cuerpo */
--m:'IBM Plex Mono',ui-monospace,'Consolas',monospace; /* dato */
--cont:1240px;
--r:3px; /* radio: casi recto. La v2 era redondeada; esto es obra */
/* Las FOTOS llevan su propio radio. 3 px en una foto grande no se lee como
decisión, se lee como descuido; 7 px sí, y no ablanda el resto de la
interfaz, que sigue casi recta. Va con un filete de tinta al 7%: define el
borde sobre el marfil sin dibujar un recuadro alrededor. */
--r-foto:7px;
--filete-foto:0 0 0 1px rgba(17,20,18,.07);
}
*{box-sizing:border-box}
/* Por defecto un hijo de grid/flex no baja de su min-content y ensancha la
columna. Con esto una palabra larga rompe línea en vez de romper la página. */
.contacto-grid>*,.planta-grid>*,.saber-grid>*,.cat-item>*,.especial-in>*,
.portada-in>*,.local-grid>*,.banda-in>*,.calc-form>*,.cot>*{min-width:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{
margin:0;background:var(--arena);color:var(--asfalto);
font-family:var(--s);font-size:17px;line-height:1.62;
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--d);font-weight:700;line-height:1.02;letter-spacing:-.018em;margin:0}
p{margin:0 0 1.1em}
.cont{width:min(var(--cont),100% - 48px);margin-inline:auto}
.visualmente-oculto{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.saltar{position:absolute;left:-9999px;top:0;z-index:400;background:var(--asfalto);
color:var(--sobre-oscuro);padding:12px 18px;font-family:var(--m);font-size:13px}
.saltar:focus{left:12px;top:12px}
:focus-visible{outline:2px solid var(--acero);outline-offset:3px}
/* ─── aviso de preview (se retira al promover a /) ─────────────────────── */
.preview-bar{position:relative;z-index:210;display:flex;align-items:center;gap:14px;
background:var(--asfalto);color:var(--sobre-oscuro);padding:9px 20px;
font-family:var(--m);font-size:12.5px;letter-spacing:.01em}
.preview-bar.oculto{display:none}
.pv-tag{flex:none;background:var(--senal);color:#241703;padding:2px 9px;border-radius:100px;
font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.pv-txt{flex:1;min-width:0;color:var(--sobre-oscuro-2)}
.pv-txt b{color:var(--senal);font-weight:600}
.pv-x{flex:none;background:none;border:0;color:var(--sobre-oscuro-2);font-size:22px;
line-height:1;cursor:pointer;padding:0 2px}
.pv-x:hover{color:var(--sobre-oscuro)}
/* ─── cabecera ─────────────────────────────────────────────────────────── */
#cab{position:sticky;top:0;z-index:150;display:flex;align-items:center;gap:26px;
padding:14px 24px;background:rgba(244,243,238,.82);backdrop-filter:blur(9px);
border-bottom:1px solid transparent;transition:border-color .25s,background .25s,padding .25s}
#cab.baja{border-bottom-color:var(--cantera);background:rgba(244,243,238,.95);padding:9px 24px}
/* El logo es un lockup apilado (marca + logotipo + "Jaramillo SAS"), así que
necesita más alto que un logo horizontal para que la bajada se lea.
⚠ Es un rescate del arte que mandó el cliente, no el original vectorial:
pedirlo antes de publicar. */
.marca{flex:none;display:flex;align-items:center;gap:14px;text-decoration:none}
.marca img{height:56px;width:auto;transition:height .25s}
#cab.baja .marca img{height:44px}
/* La bajada oficial, separada del logo por una línea: es de la marca, pero no
es parte del arte del logo. Se esconde al bajar para que la cabecera adelgace. */
.marca-bajada{font-family:var(--m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
color:var(--reciclado);padding-left:14px;border-left:1px solid var(--cantera);
white-space:nowrap;transition:opacity .2s}
#cab.baja .marca-bajada{opacity:0;pointer-events:none}
.nav{flex:1;display:flex;gap:26px;justify-content:center}
.nav a{text-decoration:none;font-size:14.5px;font-weight:500;color:var(--grafito);
padding:6px 0;position:relative;transition:color .18s}
.nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--reciclado);transition:right .25s}
.nav a:hover{color:var(--asfalto)}
.nav a:hover::after,.nav a[aria-current="true"]::after{right:0}
.nav a[aria-current="true"]{color:var(--reciclado);font-weight:600}
/* ── desplegable de Soluciones ──────────────────────────────────────────────
Lo pidió el cliente en su diseño (le dibujó la flecha). Abre por clic y
además por hover en escritorio; se cierra con Escape, al pinchar fuera y al
escoger una opción. Sin clic no se abriría nunca con teclado. */
.nav-menu{position:relative;display:flex}
.nav-btn{display:flex;align-items:center;gap:7px;background:none;border:0;cursor:pointer;
font-family:var(--s);font-size:14.5px;font-weight:500;color:var(--grafito);
padding:6px 0;position:relative;transition:color .18s}
.nav-btn svg{width:11px;height:auto;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round;transition:transform .22s}
.nav-btn::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--reciclado);transition:right .25s}
.nav-btn:hover{color:var(--asfalto)}
.nav-btn:hover::after,.nav-btn[aria-expanded="true"]::after{right:0}
.nav-btn[aria-expanded="true"]{color:var(--reciclado)}
.nav-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-sub{position:absolute;top:calc(100% + 12px);left:-16px;z-index:160;
min-width:212px;display:flex;flex-direction:column;
background:var(--arena-3);border:1px solid var(--cantera);border-radius:var(--r);
padding:8px;box-shadow:0 18px 44px -20px rgba(17,20,18,.4)}
.nav-sub[hidden]{display:none}
.nav-sub a{padding:9px 12px;border-radius:2px;font-size:14.5px;color:var(--grafito);
text-decoration:none;transition:background .16s,color .16s}
.nav-sub a::after{display:none}
.nav-sub a:hover{background:var(--arena);color:var(--asfalto)}
/* agrupador dentro del menú móvil */
.mm-grupo{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--grafito-2);margin:18px 0 2px;padding-bottom:8px;
border-bottom:1px solid var(--cantera)}
.menu-movil .mm-sub{font-size:17px;padding-left:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
font-family:var(--d);font-weight:600;font-size:14px;letter-spacing:.02em;
padding:13px 22px;border-radius:var(--r);text-decoration:none;cursor:pointer;
border:1.5px solid transparent;transition:background .18s,color .18s,border-color .18s,transform .18s}
.btn-solido{background:var(--reciclado);color:#FFFFFF;border-color:var(--reciclado)}
.btn-solido:hover{background:#0F4D2A;border-color:#0F4D2A;transform:translateY(-1px)}
.btn-linea{background:transparent;color:var(--asfalto);border-color:var(--cantera)}
.btn-linea:hover{border-color:var(--asfalto);background:rgba(17,20,18,.05)}
.cab-cta{flex:none;padding:11px 20px}
.hamb{display:none;flex-direction:column;gap:5px;background:none;border:0;padding:8px;cursor:pointer}
.hamb span{display:block;width:23px;height:2px;background:var(--asfalto);transition:transform .25s,opacity .2s}
.hamb.abierto span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamb.abierto span:nth-child(2){opacity:0}
.hamb.abierto span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
/* ── menú móvil ────────────────────────────────────────────────────────────
Se rehízo el 2026-08-16. Tenía tres fallos medidos, no supuestos:
1. padding-top de 88 px fijo contra una cabecera de 85 px → el primer enlace
quedaba a 3 px del logo, pegado. Ahora el alto real de la cabecera lo mide
el JS y lo pasa en --cab-alto, así que da igual si hay barra de preview.
2. inset:0 0 auto dejaba el alto en automático: con 831 px de contenido en
una ventana de 800 se salía por abajo y no había forma de llegar al final.
Ahora ocupa la ventana entera y hace scroll dentro.
3. el botón flotante de CONDU (z-index 200) se veía encima del menú abierto.
Se oculta mientras está abierto. */
.menu-movil{position:fixed;inset:0;z-index:148;background:var(--arena);
padding:calc(var(--cab-alto, 88px) + 20px) 24px calc(28px + env(safe-area-inset-bottom, 0px));
display:flex;flex-direction:column;gap:0;
overflow-y:auto;overscroll-behavior:contain}
.menu-movil[hidden]{display:none} /* display:flex le gana a [hidden] — trampa conocida de la v2 */
.menu-movil a{text-decoration:none;font-family:var(--d);font-size:21px;font-weight:600;
padding:15px 0;border-bottom:1px solid var(--cantera);
display:flex;align-items:center;justify-content:space-between;gap:12px}
.menu-movil a::after{content:'→';font-size:15px;color:var(--cantera-2);
transition:transform .2s,color .2s}
.menu-movil a:active::after{transform:translateX(4px);color:var(--reciclado)}
.menu-movil .btn{margin-top:auto;border-bottom:0;justify-content:center}
.menu-movil .btn::after{content:none}
/* con el menú abierto la página de detrás no se mueve y el botón flotante se
quita de en medio */
body.menu-abierto{overflow:hidden}
body.menu-abierto .condu-abrir{opacity:0;pointer-events:none}
/* ─── piezas transversales ─────────────────────────────────────────────── */
/* El verde como segundero, no como esfera: el rótulo va en grafito y el verde
se reduce a una marca de 7 px. Antes cada eyebrow del sitio era un bloque de
texto verde — sumaban mucho más del 10% que pidió el cliente. */
.eyebrow,.sec-eti{font-family:var(--m);font-size:12.5px;font-weight:500;letter-spacing:.14em;
text-transform:uppercase;color:var(--grafito-2);margin:0 0 14px;
display:flex;align-items:center;gap:10px}
.eyebrow::before,.sec-eti::before{content:'';flex:none;width:7px;height:7px;
background:var(--reciclado)}
.sec-tit{font-size:clamp(30px,4.4vw,52px)}
.sec-tit .ac{color:var(--reciclado)}
.sec-txt{max-width:62ch;color:var(--grafito);margin-top:16px;font-size:17.5px}
.sec-cab{margin-bottom:44px}
.sec-cab-fila{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
/* En la cabecera de dos columnas la bajada no puede comerse el ancho del botón. */
.sec-cab-fila .sec-txt{max-width:50ch;font-size:16.5px;margin-top:14px}
.porconf{display:inline-block;background:var(--senal-bg);color:var(--senal-tx);
border:1px solid rgba(185,132,32,.45);border-radius:2px;
font-family:var(--m);font-size:11px;font-weight:500;letter-spacing:.05em;
text-transform:uppercase;padding:2px 7px;margin-left:6px;vertical-align:middle;white-space:nowrap}
.nota{max-width:78ch;margin-top:34px;padding-left:16px;border-left:2px solid var(--cantera);
font-size:15.5px;color:var(--grafito);line-height:1.6}
.mini{font-weight:400;color:var(--grafito-2);font-size:13px}
/* ─── ilustración técnica ──────────────────────────────────────────────────
Mientras no hay fotos del cliente, el producto se dibuja como lo dibujaría
una ficha de obra: corte, sección y despiece, en la paleta del sitio.
Se lee intencional, no provisional — y no afirma ninguna medida.
Se generan con proyectos/web-v3/generar-ilustraciones.js.
Al llegar las fotos: cambiar el ![]()
y quitar el .il-tag. */
.il{position:relative;background:var(--arena-2);border:1px solid var(--cantera);
border-radius:var(--r);overflow:hidden}
.il img{width:100%;height:100%;object-fit:cover;display:block}
.il-tag{position:absolute;left:12px;bottom:12px;
font-family:var(--m);font-size:10.5px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;
color:var(--grafito);background:rgba(239,233,220,.92);border:1px solid var(--cantera);
padding:4px 9px;border-radius:2px;line-height:1}
.il-16-10{aspect-ratio:16/10}
.il-1-1{aspect-ratio:1/1}
/* ─── fotografía ───────────────────────────────────────────────────────────
Limpia, sin tratamiento de color: es lo que pidió el cliente y lo que le
sirve a un comprador industrial. Lo único que se unifica es el encuadre. */
.foto{position:relative;overflow:hidden;background:var(--arena-2);
border:1px solid var(--cantera);border-radius:var(--r)}
.foto img{width:100%;height:100%;object-fit:cover;display:block;
transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.foto:hover img{transform:scale(1.03)}
/* ─── revelado ─────────────────────────────────────────────────────────── */
.rev,.rev-izq{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.3,1)}
.rev{transform:translateY(16px)}
.rev-izq{transform:translateX(-18px)}
.rev.visible,.rev-izq.visible{opacity:1;transform:none}
.delay-1{transition-delay:.09s}
.delay-2{transition-delay:.18s}
@media (prefers-reduced-motion:reduce){
.rev,.rev-izq{opacity:1;transform:none;transition:none}
}
/* ═══ PORTADA ══════════════════════════════════════════════════════════════
La compuso el cliente (imagen/ejemplo de imgen en la principal.jpeg): fondo
oscuro, título a dos tonos, tres sellos y una banda de eslogan debajo.
El fondo oscuro no contradice el "60% marfil" de su guía — es la pieza
especial que esa misma guía autoriza, y es una sola en toda la página. */
.portada{background:var(--asfalto);color:var(--sobre-oscuro);overflow:hidden}
.portada-in{display:grid;grid-template-columns:1.05fr 1fr;align-items:center;gap:0}
/* El aire de la derecha subió el 2026-08-16: con 64 px, el botón de la derecha
terminaba a 64 px de la foto y se leía pegado al borde. Medido, no a ojo:
los botones acababan en 748 y la imagen empezaba en 812. */
/* El aire de arriba y abajo va con vh, NO con vw. Medido el 2026-08-16 en una
ventana de 1600×731 —portátil normal—: con 7vw cogía el tope de 104 px arriba
y abajo justo donde no sobra altura, la portada medía 901 px y los botones
caían en 737, fuera de pantalla. Con vh el relleno se encoge cuando la
ventana es baja y crece en monitores altos. */
.portada-txt{padding-block:clamp(36px,5vh,104px);
padding-inline:max(24px,calc((100vw - var(--cont))/2)) clamp(32px,5vw,92px)}
.portada-eti{font-family:var(--m);font-size:13px;font-weight:500;letter-spacing:.34em;
text-transform:uppercase;color:var(--sobre-oscuro-2);margin:0 0 18px}
/* min(vw,vh): el título manda sobre el ancho, pero nunca crece más de lo que
permite el alto. En 1600×731 pasa de 112 px a 95 y deja ver los botones; en
un monitor alto sigue en 112. En móvil no cambia: ahí gana el mínimo. */
.portada h1{font-size:clamp(52px,min(8.2vw,13vh),112px);letter-spacing:-.035em;line-height:.94;
margin:0 0 26px;text-transform:uppercase}
.portada h1 em{font-style:normal;color:var(--reciclado-viv)}
.portada .entrada{color:var(--sobre-oscuro-2);max-width:48ch}
.portada .entrada strong{color:var(--sobre-oscuro);font-weight:600}
.btn-linea-claro{background:transparent;color:var(--sobre-oscuro);
border-color:rgba(244,243,238,.4)}
.btn-linea-claro:hover{border-color:var(--sobre-oscuro);background:rgba(244,243,238,.08)}
/* los tres sellos que él escribió, separados por filete vertical */
/* más separación bajo los botones: los sube dentro del bloque sin tocar nada más */
.sellos{list-style:none;margin:clamp(26px,4vh,54px) 0 0;padding:0;display:grid;
grid-template-columns:repeat(3,1fr);gap:0}
.sellos li{padding:0 18px;border-left:1px solid rgba(244,243,238,.2)}
.sellos li:first-child{padding-left:0;border-left:0}
.sellos b{display:block;font-family:var(--m);font-size:11.5px;letter-spacing:.14em;
text-transform:uppercase;color:var(--reciclado-viv);font-weight:500;margin-bottom:7px}
.sellos span{font-size:13.5px;line-height:1.5;color:var(--sobre-oscuro-2)}
.portada-foto{margin:0;position:relative;align-self:stretch;
min-height:clamp(360px,48vw,660px)}
/* Desde el 2026-08-18 la foto es APAISADA (1080×600) y el hueco de escritorio es
alto: ahora "cover" recorta por los lados, no por arriba. El sujeto —la mano
con el pellet— está a la derecha del encuadre, así que el punto de anclaje va
pegado al borde derecho: medido sobre la página publicada, el hueco de 773×660
escala la foto a 1188 de ancho y recorta 377 px del original — al 62% se comía
la palma y solo se veía el montón de pellet. Al 100% entra la mano completa. */
.portada-foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:100% center}
.portada-foto picture{display:contents}
/* Degradado hacia el texto: funde la foto con el fondo, como en su diseño, y
de paso disimula que el origen es un video de 478 px de ancho. */
.portada-foto::after{content:'';position:absolute;inset:0;
background:linear-gradient(90deg,var(--asfalto) 0%,rgba(17,20,18,.55) 26%,rgba(17,20,18,0) 62%)}
/* ═══ BANDA DEL ESLOGAN ════════════════════════════════════════════════════ */
.banda{background:var(--arena-2);border-bottom:1px solid var(--cantera)}
.banda-in{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(20px,3.5vw,48px);
align-items:center;padding:26px 0}
.banda-lema{margin:0;font-family:var(--d);font-size:clamp(19px,2vw,25px);font-weight:700;
line-height:1.1;letter-spacing:-.015em;text-transform:uppercase;
padding-right:clamp(20px,3vw,44px);border-right:1px solid var(--cantera-2)}
.banda-lema em{font-style:normal;color:var(--reciclado)}
.banda-txt{margin:0;font-size:15.5px;color:var(--grafito);line-height:1.55;max-width:52ch}
.banda .btn{flex:none}
/* ── repuestos tras rehacer la portada ──────────────────────────────────────
Estos venían del bloque del héroe anterior y la portada nueva los sigue
usando. Se perdieron al reemplazar el bloque entero: la barra de
credibilidad quedó sin fondo ni rejilla y los rótulos se pegaron al valor. */
.entrada{font-size:clamp(17px,1.5vw,19.5px);line-height:1.66;margin:0}
.heroe-acc{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.credbar{background:var(--asfalto);color:var(--sobre-oscuro)}
.credbar-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:rgba(244,243,238,.16)}
.cb{background:var(--asfalto);padding:20px 22px;display:flex;flex-direction:column;gap:5px}
.cb-k{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--sobre-oscuro-2)}
.cb-v{font-family:var(--d);font-size:17px;font-weight:600;letter-spacing:-.01em}
.cb-v.pend{color:var(--senal)}
/* ── la palabra hecha de material, ahora sobre fondo oscuro ─────────────────
El efecto le gustó al usuario y encaja con el título que pidió el cliente:
"PARA UN" se rellena de hojuela. Sobre negro la receta se invierte —base
marfil con hojuelas verdes— para no perder contraste: marfil sobre negro
son 16,7:1 y el verde vivo 7:1, así que aun salpicado se lee de sobra. */
.portada h1 .flake{display:inline-block;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 40 40'%3E%3Cg fill='%235FAF7C'%3E%3Cpath d='M3 8l10-3 3 8-8 5z'/%3E%3Cpath d='M24 2l9 5-3 8-9-5z'/%3E%3Cpath d='M32 21l8 3-3 9-8-4z'/%3E%3Cpath d='M11 23l10 2-2 9-10-3z'/%3E%3Cpath d='M26 29l7 5-5 6-6-4z'/%3E%3Cpath d='M2 33l7-2 3 7-6 3z'/%3E%3C/g%3E%3Cg fill='%23176B3A'%3E%3Cpath d='M18 12l6-2 2 6-5 3z'/%3E%3Cpath d='M6 16l5 1-1 6-5-2z'/%3E%3Cpath d='M30 10l5 2-2 5-5-2z'/%3E%3C/g%3E%3C/svg%3E"),
linear-gradient(var(--sobre-oscuro),var(--sobre-oscuro));
-webkit-background-clip:text;background-clip:text;color:transparent}
/* ═══ PRODUCTOS ═══════════════════════════════════════════════════════════ */
.productos{padding:clamp(64px,8vw,110px) 0}
.filtros{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:30px}
.fil{font-family:var(--m);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;
background:transparent;border:1px solid var(--cantera);color:var(--grafito);
padding:9px 15px;border-radius:100px;cursor:pointer;transition:all .18s}
.fil:hover{border-color:var(--asfalto);color:var(--asfalto)}
.fil.activo{background:var(--asfalto);border-color:var(--asfalto);color:var(--arena)}
/* ── CATÁLOGO EDITORIAL ────────────────────────────────────────────────────
Antes esto era una rejilla de tarjetas con borde, tres por fila. Es el
patrón que hace que una página se lea como plantilla: todo del mismo tamaño,
todo enmarcado, nada manda. Ahora son filas a dos columnas que alternan
lado, sin marco, separadas por un filete. La foto respira y el nombre pesa.
Bonus: en móvil se apila solo, sin media queries acrobáticas. */
.cat{border-top:1px solid var(--cantera)}
.cat-item{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,64px);
align-items:center;padding:clamp(30px,3.6vw,58px) 0;
border-bottom:1px solid var(--cantera);transition:background .35s ease}
/* El fondo que aparece al pasar el cursor terminaba justo donde empieza el
texto por la izquierda y donde acaba la foto por la derecha: los dos
quedaban pegados al canto del rectángulo. Se le da relleno horizontal y se
compensa con margen negativo del mismo valor: así el rectángulo se extiende
MÁS ALLÁ del contenido —el texto respira dentro— y a la vez el texto sigue
alineado con los títulos de sección, que es el eje de toda la página.
El sangrado nunca supera los 22 px de margen que deja el contenedor, así que
no se sale de la pantalla en ningún ancho. */
@media (hover:hover){
.cat-item{padding-inline:clamp(16px,1.4vw,30px);
margin-inline:calc(-1 * clamp(16px,1.4vw,30px))}
/* (hover:hover) además evita que en táctil el fondo se quede "pegado"
después de tocar una fila, que es lo que pasa con :hover en un móvil. */
.cat-item:hover{background:var(--arena-3)}
}
.cat-item:nth-child(even) .cat-media{order:-1}
.cat-media{position:relative;overflow:hidden;border-radius:var(--r-foto);
background:var(--arena-2);box-shadow:var(--filete-foto)}
/* 16:9 en TODAS: es el formato nativo de las ilustraciones y de los fotogramas
de video. Forzar 4:3 recortaba los lados y cada imagen encuadraba distinto. */
/* height:auto NO es decorativo. Desde el 2026-08-18 el ![]()
lleva width/height
en el HTML para reservar el hueco; ese atributo se convierte en una altura
usada y GANA al aspect-ratio si el CSS no fija la altura. Sin esta línea la
foto sale con los 661 px del fichero en vez de los 330 del marco 16:9: el
doble de alta, y el recorte deja de tener sentido. */
.cat-media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
transition:transform .7s cubic-bezier(.2,.7,.3,1)}
.cat-item:hover .cat-media img{transform:scale(1.04)}
/* Sello de origen sobre la foto (2026-08-18, pedido del cliente): dice si la
línea sale de la planta o si es suministro. El punto verde marca fabricación
propia; el gris, línea comercial. Es la única diferencia de color: el verde
se gana el sitio donde aparece. */
.cat-tag{position:absolute;left:12px;bottom:12px;font-family:var(--m);font-size:10.5px;
letter-spacing:.11em;text-transform:uppercase;color:var(--grafito);
background:rgba(255,255,255,.92);border:1px solid var(--cantera);padding:4px 9px;border-radius:2px}
.cat-tag::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;
background:var(--reciclado);margin-right:7px;vertical-align:1px}
.cat-tag-com{color:var(--grafito-2)}
.cat-tag-com::before{background:var(--cantera-2)}
.cat-media picture{display:block}
.cat-cab{display:flex;align-items:baseline;gap:14px;margin-bottom:12px}
.cat-n{font-family:var(--m);font-size:13px;letter-spacing:.14em;color:var(--reciclado)}
.cat-cat{font-family:var(--m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;
color:var(--grafito-2)}
.cat-t{font-size:clamp(24px,2.8vw,38px);line-height:1.04}
.cat-d{margin:14px 0 0;color:var(--grafito);font-size:16px;line-height:1.6;max-width:46ch}
.cat-specs{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--cantera);
display:grid;grid-template-columns:1fr 1fr;gap:10px 28px}
.cat-specs li{display:flex;flex-direction:column;gap:2px;font-family:var(--m);font-size:12.5px}
.cat-specs .k{color:var(--grafito-2);letter-spacing:.05em;text-transform:uppercase;font-size:10.5px}
.cat-specs .v{color:var(--asfalto);font-weight:500}
.cat-specs .porconf{margin-left:0;align-self:flex-start}
.cat-cta{display:inline-flex;align-items:center;gap:9px;margin-top:22px;text-decoration:none;
font-family:var(--d);font-weight:600;font-size:14px;color:var(--asfalto);
border-bottom:2px solid var(--reciclado);padding-bottom:3px;transition:gap .22s,color .22s}
.cat-cta:hover{gap:15px;color:var(--reciclado)}
/* ── PIEZA ESPECIAL ────────────────────────────────────────────────────────
La receta que escribió el cliente, textual: fondo #0F4D2A, texto blanco,
producto en fotografía limpia, detalle en verde claro o marfil. Era el único
pedazo de su paleta que el sitio no estaba usando — y es el que le da el
aire de pieza de marca en vez de página de catálogo. */
.especial{background:var(--reciclado-hondo);color:#fff;overflow:hidden}
.especial-in{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.especial-txt{padding:clamp(52px,7vw,110px) clamp(28px,4vw,72px) clamp(52px,7vw,110px)
max(28px,calc((100vw - var(--cont))/2))}
.especial .sec-eti{color:#BFE0CB}
.especial .sec-eti::before{background:var(--reciclado-viv)}
.especial h2{font-size:clamp(34px,5vw,66px);letter-spacing:-.025em}
.especial h2 em{font-style:normal;color:var(--reciclado-viv)}
.especial p{margin:22px 0 0;color:#D7E5DC;font-size:17.5px;line-height:1.65;max-width:46ch}
.especial-datos{list-style:none;margin:32px 0 0;padding:0;display:grid;
grid-template-columns:1fr 1fr;gap:1px;background:rgba(255,255,255,.2);
border:1px solid rgba(255,255,255,.2)}
.especial-datos li{background:var(--reciclado-hondo);
padding:clamp(17px,1.3vw,22px) clamp(18px,1.45vw,24px);display:flex;
flex-direction:column;gap:6px}
.especial-datos .k{font-family:var(--m);font-size:10.5px;letter-spacing:.13em;
text-transform:uppercase;color:#A9CDB8}
.especial-datos .v{font-family:var(--d);font-size:17px;font-weight:600}
.especial .btn{margin-top:32px;background:var(--arena);color:var(--asfalto);border-color:var(--arena)}
.especial .btn:hover{background:#fff;border-color:#fff}
.especial-media{position:relative;min-height:clamp(300px,42vw,600px)}
.especial-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:center 42%}
/* ═══ TU OBRA SUMA ════════════════════════════════════════════════════════
Eran tres tarjetas con borde y fondo elevado. Ahora son tres columnas de un
libro mayor: sin caja, separadas por un filete vertical. Lo que desaparece
es el marco — que es justo lo que hacía que se leyera como plantilla. */
.suma{padding:clamp(64px,8vw,110px) 0;background:var(--asfalto);color:var(--sobre-oscuro)}
.suma .sec-eti{color:#BFE0CB}
.suma .sec-eti::before{background:var(--reciclado-viv)}
.suma .sec-tit .ac{color:var(--reciclado-viv)}
.suma .sec-txt{color:var(--sobre-oscuro-2)}
.suma .nota{color:var(--sobre-oscuro-2);border-left-color:var(--grafito)}
.suma .nota strong,.suma .nota em{color:var(--sobre-oscuro);font-style:normal}
.suma-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0}
.sm{padding:0 clamp(20px,2.6vw,40px);border-left:1px solid rgba(244,243,238,.18);
display:flex;flex-direction:column}
.sm:first-child{padding-left:0;border-left:0}
.sm:last-child{padding-right:0}
.sm-n{font-family:var(--m);font-size:clamp(30px,3.4vw,44px);line-height:1;
color:var(--reciclado-viv);margin:0 0 18px}
.sm-t{font-size:clamp(20px,2vw,26px);color:var(--sobre-oscuro)}
.sm-d{margin:12px 0 0;font-size:15.5px;color:var(--sobre-oscuro-2);line-height:1.6;flex:1}
.sm-progs{margin:18px 0 0;font-family:var(--m);font-size:11.5px;letter-spacing:.05em;
text-transform:uppercase;color:var(--sobre-oscuro-2);line-height:1.9}
.sm-progs b{color:var(--reciclado-viv);font-weight:500}
.sm-dato{margin-top:18px;padding-top:14px;border-top:1px solid rgba(244,243,238,.18);
font-family:var(--m);font-size:12.5px;display:flex;justify-content:space-between;
align-items:baseline;gap:12px}
.sm-dato .k{color:var(--sobre-oscuro-2);text-transform:uppercase;letter-spacing:.07em;font-size:10.5px}
.sm-dato .v{color:var(--sobre-oscuro);font-weight:500;text-align:right}
.sm-dato .porconf{margin-left:0}
.suma-cta{margin-top:44px;padding-top:34px;border-top:1px solid rgba(244,243,238,.18);
display:flex;align-items:flex-end;justify-content:space-between;gap:28px;flex-wrap:wrap}
.suma-cta h3{font-size:clamp(22px,2.4vw,30px);color:var(--sobre-oscuro)}
.suma-cta p{margin:8px 0 0;color:var(--sobre-oscuro-2);font-size:16px;max-width:56ch}
.suma-cta .btn-solido{background:var(--arena);color:var(--asfalto);border-color:var(--arena);flex:none}
.suma-cta .btn-solido:hover{background:#fff;border-color:#fff}
/* ═══ CADENA ══════════════════════════════════════════════════════════════ */
.cadena{padding:clamp(64px,8vw,110px) 0}
.cad-pasos{list-style:none;margin:0 0 0;padding:0;display:grid;
grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--cantera);border-radius:var(--r);
overflow:hidden;background:var(--cantera)}
.cad-pasos li{display:flex}
/* Relleno medido el 2026-08-16: con 16 px en una caja de 205×68 el texto se leía
pegado al filete. Sube a 22 px en escritorio y baja solo si la columna se
estrecha, así el número y el título respiran sin que la tira crezca de más. */
.cad-btn{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:6px;
background:var(--arena-3);border:0;padding:clamp(17px,1.35vw,22px);cursor:pointer;text-align:left;
transition:background .2s,color .2s;margin:0 1px 0 0}
.cad-pasos li:last-child .cad-btn{margin-right:0}
.cad-btn:hover{background:#fff}
.cad-btn.activo{background:var(--asfalto);color:var(--sobre-oscuro)}
.cad-n{font-family:var(--m);font-size:11.5px;letter-spacing:.1em;color:var(--grafito-2)}
.cad-btn.activo .cad-n{color:var(--reciclado-viv)}
.cad-t{font-family:var(--d);font-size:16px;font-weight:600;letter-spacing:-.01em}
.cad-detalle{background:var(--asfalto);color:var(--sobre-oscuro);border-radius:0 0 var(--r) var(--r);
padding:clamp(26px,3.4vw,42px);display:grid;grid-template-columns:1.5fr 1fr;
gap:clamp(24px,4vw,52px);margin-top:-1px}
.cad-d-t{font-size:clamp(24px,3vw,34px)}
.cad-d-p{margin:14px 0 0;color:var(--sobre-oscuro-2);font-size:16.5px;line-height:1.66}
.cad-d-clave{margin:18px 0 0;padding-left:16px;border-left:2px solid var(--reciclado-viv);
color:var(--sobre-oscuro);font-size:16px;line-height:1.55}
.cad-d-lado{border-left:1px solid rgba(244,243,238,.18);padding-left:clamp(20px,2.6vw,32px)}
.cad-d-k{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--sobre-oscuro-2);margin:0 0 5px}
.cad-d-k+.cad-d-v{margin-bottom:22px}
.cad-d-v{font-family:var(--d);font-size:19px;font-weight:600;margin:0;line-height:1.32}
.cad-d-v.chico{font-family:var(--s);font-size:15.5px;font-weight:400;color:var(--sobre-oscuro-2);line-height:1.55}
/* la ilustración que abría el héroe, ahora cerrando el proceso */
/* Banda, no lienzo: a ancho completo la ilustración medía 775 px de alto y se
comía la sección. Recortada a 21:9 y anclada abajo se ve lo que importa —
la losa con el ducto — y no el cielo. */
.cad-il{margin:36px 0 0}
/* Era 21/9 porque aquí vivía un dibujo en corte, que es horizontal por
naturaleza. Con foto, ese formato cortaba las piezas por arriba y por abajo:
16/9 las deja casi enteras. El recorte manda, no el object-position. */
/* Llevaba "border:1px solid var(--cantera)" y era la ÚNICA foto del sitio con
marco duro: por eso desentonaba. Ahora usa el mismo tratamiento que todas. */
.cad-il img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:center;
border:0;border-radius:var(--r-foto);box-shadow:var(--filete-foto)}
.cad-il figcaption{margin-top:12px;font-family:var(--m);font-size:12px;color:var(--grafito-2);
display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.il-tag-inline{border:1px solid var(--cantera);padding:3px 8px;border-radius:2px;
letter-spacing:.1em;text-transform:uppercase;font-size:10.5px}
/* ═══ CALCULADORA ═════════════════════════════════════════════════════════ */
.calc{padding:clamp(64px,8vw,110px) 0;background:var(--arena-3);border-block:1px solid var(--cantera)}
.calc-caja{display:grid;grid-template-columns:1.15fr .85fr;gap:0;border:1px solid var(--cantera);
border-radius:var(--r);overflow:hidden;background:var(--arena)}
.calc-form{padding:clamp(24px,3vw,34px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.campo{display:flex;flex-direction:column;gap:7px}
.campo-ancho{grid-column:1/-1}
label{font-family:var(--m);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--grafito)}
/* Los controles traen un ancho intrínseco (el select de diámetro dice
"3/4" — rollo de 25 m") que a 320 px empujaba la columna 3 px fuera de la
ventana. max-width y min-width los obligan a caber en su caja. */
input,select,textarea{max-width:100%;min-width:0;
font-family:var(--s);font-size:16px;color:var(--asfalto);
background:#fff;border:1px solid var(--cantera);border-radius:var(--r);padding:11px 13px;
transition:border-color .18s,box-shadow .18s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acero);
box-shadow:0 0 0 3px rgba(23,107,58,.18)}
textarea{resize:vertical;line-height:1.55}
.calc-res{background:var(--asfalto);color:var(--sobre-oscuro);padding:clamp(24px,3vw,34px);
display:flex;flex-direction:column;justify-content:center;gap:2px}
.cr-fila{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:11px 0;border-bottom:1px solid rgba(244,243,238,.16)}
.cr-fila:last-of-type{border-bottom:0}
.cr-k{font-family:var(--m);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
color:var(--sobre-oscuro-2);max-width:52%}
.cr-v{font-family:var(--d);font-size:clamp(22px,2.6vw,29px);font-weight:700;letter-spacing:-.02em;
white-space:nowrap}
.cr-v small{font-family:var(--m);font-size:11.5px;font-weight:400;letter-spacing:.06em;
color:var(--sobre-oscuro-2);margin-left:5px}
.cr-destacado .cr-v{color:var(--reciclado-viv)}
.cr-nota{margin:16px 0 0;font-size:13px;line-height:1.55;color:var(--sobre-oscuro-2)}
.formula{margin-top:24px;border:1px solid var(--cantera);border-radius:var(--r);
background:var(--arena);padding:0 20px}
.formula summary{font-family:var(--m);font-size:13px;letter-spacing:.05em;padding:15px 0;
cursor:pointer;color:var(--acero)}
.formula[open] summary{border-bottom:1px solid var(--cantera);margin-bottom:14px}
.formula ul{margin:0 0 18px;padding-left:20px;color:var(--grafito);font-size:15px}
.formula li{margin-bottom:8px}
/* ═══ PLANTA ══════════════════════════════════════════════════════════════
Las fotos pierden el marco y la barra oscura de pie: quedan como imagen
limpia con el pie debajo, en mono. El sello circular de "8 años" —que era
un adhesivo flotando sobre la foto— lo reemplaza la trayectoria con fechas.
Los valores pasan de seis chips a una sola línea. */
.planta{padding:clamp(64px,8vw,110px) 0}
.planta-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,68px);align-items:start}
.planta-fotos{display:grid;gap:26px}
.pf{margin:0}
/* height:auto por lo mismo que en .cat-media: el atributo height del HTML
ganaría al aspect-ratio y la foto del equipo saldría de 900 px de alto. */
.pf img{width:100%;height:auto;object-fit:cover;border-radius:var(--r-foto);box-shadow:var(--filete-foto);
transition:transform .6s ease}
.pf picture{display:block}
.pf-grande img{aspect-ratio:4/3}
.pf:not(.pf-grande) img{aspect-ratio:16/9}
.pf:hover img{transform:scale(1.015)}
.pf figcaption{margin-top:12px;font-size:14px;line-height:1.5;color:var(--grafito)}
.pf figcaption b{display:block;font-family:var(--m);font-size:11px;letter-spacing:.13em;
text-transform:uppercase;color:var(--grafito-2);font-weight:500;margin-bottom:5px}
.planta-txt .sec-tit{margin-bottom:20px}
.planta-txt p{color:var(--grafito)}
/* trayectoria: tres fechas comprobables, en formato de tabla */
.hitos{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--cantera-2)}
.hitos li{display:grid;grid-template-columns:74px 1fr;gap:20px;align-items:baseline;
padding:13px 0;border-bottom:1px solid var(--cantera)}
.h-a{font-family:var(--m);font-size:15px;letter-spacing:.06em;color:var(--reciclado)}
.h-t{font-size:15.5px;color:var(--grafito);line-height:1.5}
.mvv{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:30px 0}
.mvv article{padding:18px 0 0;border-top:2px solid var(--reciclado)}
.mvv h3{font-size:15px;font-family:var(--m);font-weight:600;letter-spacing:.12em;
text-transform:uppercase;color:var(--reciclado);margin-bottom:9px}
.mvv p{margin:0;font-size:14.5px;line-height:1.56}
.valores{font-family:var(--m);font-size:12px;letter-spacing:.05em;text-transform:uppercase;
color:var(--grafito-2);line-height:2;margin:0}
/* ═══ DÓNDE ESTAMOS ═══════════════════════════════════════════════════════
La foto grande manda, la vitrina la acompaña y los datos van en mono al
lado. Sin filtro de color: es la prueba de domicilio, no una postal. */
.local{padding:clamp(64px,8vw,110px) 0}
.local-grid{display:grid;grid-template-columns:1.55fr 1fr;
grid-template-rows:auto auto;gap:18px}
.local-a{grid-row:span 2;margin:0}
.local-a img{aspect-ratio:4/3}
.local-b{margin:0}
.local-b img{aspect-ratio:16/10}
/* mismo tratamiento que el resto de fotos del sitio */
.local-a img,.local-b img{object-fit:cover;border-radius:var(--r-foto);box-shadow:var(--filete-foto)}
.local-datos{background:var(--asfalto);color:var(--sobre-oscuro);border-radius:var(--r);
padding:24px;display:grid;gap:18px;align-content:center}
.ld{display:flex;flex-direction:column;gap:5px}
.ld-k{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--sobre-oscuro-2)}
.ld-v{font-family:var(--d);font-size:17px;font-weight:600;line-height:1.28;
color:var(--sobre-oscuro);text-decoration:none}
a.ld-v:hover{color:var(--reciclado-viv)}
/* ═══ FORMALIDAD ══════════════════════════════════════════════════════════
Nueve datos verificables son una TABLA, no nueve tarjetas. Puesto como
tabla se escanea de un vistazo, que es exactamente lo que hace quien está
comprobando una empresa. */
.formal{padding:clamp(64px,8vw,110px) 0;background:var(--arena-2);
border-block:1px solid var(--cantera)}
.formal-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(36px,5vw,80px);
border-top:1px solid var(--cantera-2)}
.fm{padding:18px 0;border-bottom:1px solid var(--cantera)}
.fm-k{font-family:var(--m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
color:var(--grafito-2);margin:0}
.fm-v{font-family:var(--d);font-size:clamp(19px,1.7vw,23px);font-weight:600;margin:4px 0 0;
letter-spacing:-.01em;overflow-wrap:anywhere}
.fm-d{margin:5px 0 0;font-size:14px;color:var(--grafito);line-height:1.5}
.fm.pend .fm-v{color:var(--senal-tx)}
/* ═══ SECTORES ════════════════════════════════════════════════════════════
Cinco frentes en fila, con índice y el icono pequeño. El gas lleva marca
propia: es el frente principal y en tarjetas iguales eso se perdía. */
.sectores{padding:clamp(64px,8vw,110px) 0}
.sec-grid{border-top:1px solid var(--cantera-2)}
.sc{display:grid;grid-template-columns:auto 40px minmax(180px,1fr) 1.5fr;
gap:clamp(14px,2.4vw,32px);align-items:center;padding:20px 0;
border-bottom:1px solid var(--cantera);transition:background .3s}
/* Mismo caso que .cat-item: al pasar el cursor se pintaba un fondo que llegaba
justo hasta el texto. Y además tenía "padding-left:14px" SOLO en :hover, con
lo que la fila entera daba un salto de 14 px hacia la derecha justo debajo
del cursor. Fuera el salto; el fondo sangra hacia afuera y el contenido no
se mueve. Mismo valor que el catálogo, para que las dos listas respiren
igual. */
@media (hover:hover){
.sc{padding-inline:clamp(16px,1.4vw,30px);
margin-inline:calc(-1 * clamp(16px,1.4vw,30px))}
.sc:hover{background:var(--arena-3)}
}
.sc-n{font-family:var(--m);font-size:12.5px;letter-spacing:.12em;color:var(--grafito-2)}
.sc-ico{width:34px;height:34px;color:var(--grafito)}
.sc-ico svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round}
.sc-t{font-size:clamp(19px,1.9vw,25px);display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.sc-t em{font-style:normal;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;
text-transform:uppercase;color:#fff;background:var(--reciclado);padding:3px 8px;border-radius:2px}
.sc-d{margin:0;font-size:15.5px;color:var(--grafito);line-height:1.55}
.sc.destacado .sc-ico{color:var(--reciclado)}
/* ═══ CONOCIMIENTO ════════════════════════════════════════════════════════
Contenido propio del cliente: su guía de instalación PE-AL-PE. Es lo único
del sitio que no pusimos nosotros — se lo ganó él. */
.saber{padding:clamp(64px,8vw,110px) 0;background:var(--asfalto);color:var(--sobre-oscuro)}
.saber .sec-eti{color:var(--reciclado-viv)}
.saber .sec-tit .ac{color:var(--reciclado-viv)}
.saber .sec-txt{color:var(--sobre-oscuro-2)}
.saber-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,64px);align-items:start}
/* ── guía interactiva ──────────────────────────────────────────────────────
La franja de imagen es ancha y baja (3,9:1) porque así viene el recorte de
la pieza original — y resulta que es el formato correcto: un tubo es largo,
no cuadrado. Avanza sola cada 3,8 s y se detiene al primer toque. */
.guia{display:grid;gap:22px}
.guia-visor{position:relative;background:#fff;border-radius:var(--r);overflow:hidden}
.guia-tira{position:relative;aspect-ratio:1364/350}
.guia-tira img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
opacity:0;transition:opacity .55s ease}
.guia-tira img.activa{opacity:1}
.guia-barra{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(17,20,18,.12)}
.guia-barra span{display:block;height:100%;width:14%;background:var(--reciclado-viv);
transition:width .55s cubic-bezier(.2,.7,.3,1)}
.guia-detalle{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;min-height:104px}
.guia-n{font-family:var(--m);font-size:34px;line-height:1;color:var(--reciclado-viv);margin:0}
.guia-t{font-size:23px;color:var(--sobre-oscuro)}
.guia-d{margin:8px 0 0;font-size:15.5px;line-height:1.6;color:var(--sobre-oscuro-2)}
.guia-pasos{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.guia-pasos button{display:flex;align-items:center;gap:8px;background:transparent;cursor:pointer;
border:1px solid rgba(244,243,238,.22);color:var(--sobre-oscuro-2);border-radius:100px;
padding:7px 13px;font-family:var(--m);font-size:11.5px;letter-spacing:.04em;transition:all .2s}
.guia-pasos button span{color:var(--reciclado-viv)}
.guia-pasos button:hover{border-color:rgba(244,243,238,.55);color:var(--sobre-oscuro)}
.guia-pasos button.activo{background:var(--sobre-oscuro);border-color:var(--sobre-oscuro);
color:var(--asfalto)}
.guia-pasos button.activo span{color:var(--reciclado-hondo)}
.saber-lista{list-style:none;margin:32px 0;padding:0}
.saber-lista li{display:grid;grid-template-columns:auto 1fr;gap:3px 16px;
padding:13px 0;border-top:1px solid rgba(244,243,238,.16)}
.saber-lista li:last-child{border-bottom:1px solid rgba(244,243,238,.16)}
.sl-n{grid-row:span 2;font-family:var(--m);font-size:12px;letter-spacing:.1em;
color:var(--reciclado-viv);padding-top:3px}
.sl-t{font-family:var(--d);font-size:17px;font-weight:600;color:var(--sobre-oscuro)}
.sl-d{font-size:14.5px;color:var(--sobre-oscuro-2);line-height:1.5}
.saber-pieza{margin:0}
.saber-pieza .foto{display:block;border-color:rgba(244,243,238,.2);background:var(--asfalto-2)}
.saber-pieza figcaption{margin-top:14px;font-size:14px;line-height:1.55;color:var(--sobre-oscuro-2)}
.saber-pieza figcaption strong{color:var(--sobre-oscuro);font-weight:600}
/* ═══ CONTACTO ════════════════════════════════════════════════════════════ */
.contacto{padding:clamp(64px,8vw,110px) 0;background:var(--arena-3);border-top:1px solid var(--cantera)}
.contacto-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px);align-items:start}
.contacto p{color:var(--grafito)}
.emprender{font-family:var(--d);font-size:clamp(19px,1.9vw,24px);font-weight:600;
color:var(--reciclado);letter-spacing:-.01em;margin:22px 0 0}
.cont-datos{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.cont-datos li{display:flex;flex-direction:column;gap:3px;padding-bottom:16px;
border-bottom:1px solid var(--cantera)}
.cd-k{font-family:var(--m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;
color:var(--grafito-2)}
/* El correo es un token que no parte: sin esto arrastra la columna a 337 px y
a 320 de ventana aparece scroll horizontal. Verificado midiendo el ancho de
cada elemento contra el viewport, no a ojo. */
.cont-datos a{text-decoration:none;font-family:var(--d);font-size:19px;font-weight:600;
color:var(--asfalto);transition:color .18s;overflow-wrap:anywhere}
.cont-datos a:hover{color:var(--reciclado)}
.redes{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.redes a{text-decoration:none;font-family:var(--m);font-size:12px;letter-spacing:.07em;
text-transform:uppercase;border:1px solid var(--cantera);padding:8px 14px;border-radius:100px;
color:var(--grafito);transition:all .18s}
.redes a:hover{background:var(--asfalto);border-color:var(--asfalto);color:var(--arena)}
.cot{background:var(--arena);border:1px solid var(--cantera);border-radius:var(--r);
padding:clamp(24px,3vw,32px);display:grid;grid-template-columns:1fr 1fr;gap:18px}
.cot .btn{grid-column:1/-1}
.cot-msg{grid-column:1/-1;margin:0;font-family:var(--m);font-size:13px;line-height:1.5}
/* ═══ PIE ═════════════════════════════════════════════════════════════════ */
.pie{background:var(--asfalto);color:var(--sobre-oscuro-2);padding:clamp(48px,6vw,72px) 0 0}
.pie-top{display:grid;grid-template-columns:2fr 1fr 1.3fr;gap:40px;padding-bottom:44px}
/* El logo va SIN tocar sobre una placa marfil. Se probó invertirlo (queda una
mancha blanca sin forma) y recolorear solo lo oscuro (se come el verde de la
marca): con un original en JPEG de baja resolución, ninguna de las dos sale
bien. La placa es honesta y siempre legible — y desaparece el día que el
cliente entregue el logo vectorial con su versión en negativo. */
.pie-marca img{height:64px;width:auto;margin-bottom:18px;
background:var(--arena);border-radius:var(--r);padding:10px 14px}
.pie-marca p{max-width:44ch;font-size:14.5px;line-height:1.6;margin:0}
.pie-bajada{font-family:var(--m);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;
color:var(--reciclado-viv);margin:0 0 10px}
.pie h3{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
color:var(--sobre-oscuro);margin:0 0 14px;font-weight:600}
.pie nav,.pie-top>div:last-child{display:flex;flex-direction:column;gap:9px}
.pie a{text-decoration:none;font-size:14.5px;color:var(--sobre-oscuro-2);transition:color .18s;
overflow-wrap:anywhere}
.pie a:hover{color:var(--sobre-oscuro)}
/* el pie deja aire a la derecha: ahí vive el botón flotante de CONDU */
.pie-bajo{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
padding:20px 0 84px;border-top:1px solid rgba(244,243,238,.16);
font-family:var(--m);font-size:12px;letter-spacing:.02em}
.pie-bajo .pie-demo{padding-right:210px}
.pie-demo{color:var(--grafito-2);color:#8A918C}
/* ═══ CONDU ═══════════════════════════════════════════════════════════════ */
.condu-abrir{position:fixed;right:22px;bottom:22px;z-index:200;display:flex;align-items:center;gap:10px;
background:var(--reciclado);color:#FFFFFF;border:0;border-radius:100px;padding:14px 20px 14px 18px;
font-family:var(--d);font-size:14px;font-weight:600;letter-spacing:.02em;cursor:pointer;
box-shadow:0 12px 30px -12px rgba(17,20,18,.7);transition:transform .2s,box-shadow .2s,opacity .2s}
.condu-abrir:hover{transform:translateY(-3px);box-shadow:0 16px 36px -12px rgba(17,20,18,.8)}
.condu-abrir.oculto{opacity:0;pointer-events:none;transform:translateY(10px) scale(.94)}
.condu-abrir svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linejoin:round}
.condu-punto{position:absolute;top:11px;left:11px;width:9px;height:9px;border-radius:50%;
background:var(--reciclado-viv)}
.condu-punto::after{content:'';position:absolute;inset:-4px;border-radius:50%;
border:2px solid var(--reciclado-viv);opacity:.6;animation:pulso 2.4s ease-out infinite}
@keyframes pulso{0%{transform:scale(.7);opacity:.7}100%{transform:scale(1.5);opacity:0}}
@media (prefers-reduced-motion:reduce){ .condu-punto::after{animation:none} }
.condu{position:fixed;right:22px;bottom:22px;z-index:201;width:392px;max-width:calc(100vw - 32px);
height:min(620px,calc(100dvh - 44px));display:flex;flex-direction:column;
background:var(--arena);border:1px solid var(--cantera);border-radius:var(--r);overflow:hidden;
box-shadow:0 30px 70px -24px rgba(17,20,18,.65)}
.condu[hidden]{display:none}
.condu-cab{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:14px 16px;background:var(--asfalto);color:var(--sobre-oscuro)}
.condu-id{display:flex;align-items:center;gap:11px}
.condu-av{width:38px;height:38px;flex:none;border-radius:var(--r);background:var(--reciclado-viv);
color:#0A1F12;display:grid;place-items:center;font-family:var(--d);font-size:19px;font-weight:700}
.condu-id b{display:block;font-family:var(--d);letter-spacing:.06em;font-size:16px;line-height:1.15}
.condu-id span{font-size:12px;color:var(--sobre-oscuro-2);font-family:var(--m)}
.condu-id i{font-style:normal;color:var(--reciclado-viv)}
.condu-cerrar{background:none;border:0;color:var(--sobre-oscuro-2);font-size:26px;line-height:1;
cursor:pointer;padding:0 4px}
.condu-cerrar:hover{color:var(--sobre-oscuro)}
.condu-hilo{flex:1;overflow-y:auto;padding:18px 16px 6px;background:var(--arena-3);
display:flex;flex-direction:column;gap:9px}
.condu-msg{max-width:88%;padding:11px 14px;border-radius:var(--r);font-size:15px;line-height:1.5;
animation:sube .28s ease}
@keyframes sube{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .condu-msg{animation:none} }
.condu-condu{align-self:flex-start;background:#fff;border:1px solid var(--cantera)}
.condu-yo{align-self:flex-end;background:var(--asfalto);color:var(--sobre-oscuro)}
.condu-por{display:block;margin-top:6px;font-size:13px;color:var(--grafito-2);line-height:1.45}
.condu-msg b{font-family:var(--d);letter-spacing:.02em;font-size:16px}
.condu-res{display:grid;gap:7px;margin-bottom:2px}
.condu-res div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
padding-bottom:6px;border-bottom:1px solid var(--cantera)}
.condu-res div:last-child{border-bottom:0;padding-bottom:0}
.condu-res span{font-family:var(--m);letter-spacing:.06em;font-size:11px;text-transform:uppercase;
color:var(--grafito-2)}
.condu-res b{font-family:var(--d);font-size:22px;color:var(--reciclado);letter-spacing:-.01em}
.escribiendo{display:flex;gap:4px;align-items:center}
.escribiendo span{width:7px;height:7px;border-radius:50%;background:var(--cantera);
animation:punto 1.1s infinite ease-in-out}
.escribiendo span:nth-child(2){animation-delay:.15s}
.escribiendo span:nth-child(3){animation-delay:.3s}
@keyframes punto{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}
.condu-opts{flex:none;display:flex;flex-wrap:wrap;gap:7px;padding:10px 16px 4px;background:var(--arena-3)}
.condu-op{background:#fff;border:1px solid var(--cantera);color:var(--reciclado);border-radius:100px;
font-family:var(--m);font-size:12.5px;padding:8px 13px;cursor:pointer;transition:all .18s}
.condu-op:hover{background:var(--reciclado);border-color:var(--reciclado);color:#FFFFFF}
.condu-pie{flex:none;display:flex;gap:8px;padding:12px 16px 6px;background:var(--arena-3);
border-top:1px solid var(--cantera)}
.condu-pie input{flex:1;border-radius:100px;font-size:15px;padding:11px 16px}
.condu-pie button{flex:none;width:44px;height:44px;border-radius:50%;border:0;
background:var(--reciclado);color:#FFFFFF;display:grid;place-items:center;cursor:pointer;
transition:background .18s}
.condu-pie button:hover{background:#0F4D2A}
.condu-pie button svg{width:20px;height:20px;fill:currentColor}
.condu-aviso{flex:none;margin:0;padding:4px 16px 12px;background:var(--arena-3);
font-family:var(--m);font-size:11px;color:var(--grafito-2);letter-spacing:.02em}
/* ═══ RESPONSIVE ══════════════════════════════════════════════════════════ */
@media (max-width:1080px){
.nav{display:none}
.hamb{display:flex}
.cab-cta{display:none}
.marca-bajada{display:none}
.portada-in{grid-template-columns:1fr;gap:0}
.portada-txt{padding-inline:24px}
.portada-foto{min-height:clamp(260px,58vw,380px);order:-1}
.portada-foto::after{background:linear-gradient(0deg,var(--asfalto) 0%,rgba(17,20,18,0) 55%)}
.banda-in{grid-template-columns:1fr;gap:18px;padding:28px 0}
.banda-lema{padding-right:0;border-right:0;padding-bottom:16px;
border-bottom:1px solid var(--cantera-2)}
/* en una columna manda el titular: la foto va debajo. En escritorio sigue
siendo imagen-protagonista, que es donde ese gesto se sostiene. */
.credbar-in{grid-template-columns:1fr 1fr}
.cad-pasos{grid-template-columns:repeat(3,1fr)}
.cad-detalle{grid-template-columns:1fr}
.cad-d-lado{border-left:0;border-top:1px solid rgba(244,243,238,.18);padding-left:0;padding-top:24px}
.calc-caja{grid-template-columns:1fr}
.planta-grid,.contacto-grid,.saber-grid{grid-template-columns:1fr}
.local-grid{grid-template-columns:1fr 1fr}
.local-a{grid-row:auto;grid-column:span 2}
/* el catálogo y la pieza especial se apilan; la foto siempre primero, que es
lo que se mira antes de leer */
.suma-grid{grid-template-columns:1fr;gap:0}
.sm{padding:24px 0;border-left:0;border-top:1px solid rgba(244,243,238,.18)}
.sm:first-child{padding-top:0;border-top:0}
.formal-grid{grid-template-columns:1fr}
.sc{grid-template-columns:auto 32px 1fr;gap:14px 18px}
.sc-d{grid-column:3/-1;margin-top:2px}
.cat-item{grid-template-columns:1fr;gap:24px}
.cat-item:nth-child(even) .cat-media{order:0}
.cat-media{order:-1}
.especial-in{grid-template-columns:1fr}
.especial-txt{padding:clamp(40px,8vw,64px) 24px}
.especial-media{min-height:clamp(240px,58vw,380px)}
.pie-top{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
body{font-size:16.5px}
/* Estaba en 32px = 16 por lado: en el móvil el texto y las fotos quedaban
pegados al borde de la pantalla, más apretados que en escritorio (24). No
tiene sentido estrechar el margen justo donde la pantalla es más pequeña.
44px = 22 por lado. Medido en un iframe de 414 px, que es como se mira. */
.cont,.heroe-in{width:calc(100% - 44px)}
.heroe h1{font-size:clamp(40px,12vw,58px)}
.credbar-in{grid-template-columns:1fr}
.cad-pasos{grid-template-columns:repeat(2,1fr)}
.calc-form,.cot,.mvv,.pie-top{grid-template-columns:1fr}
.sec-cab-fila{align-items:flex-start}
.sellos{grid-template-columns:1fr;gap:16px}
.sellos li{padding:0 0 0 14px;border-left:2px solid rgba(244,243,238,.2)}
.sellos li:first-child{padding-left:14px;border-left:2px solid rgba(244,243,238,.2)}
.suma-cta{flex-direction:column;align-items:flex-start}
.suma-cta .btn{width:100%}
.condu{right:0;bottom:0;width:100vw;max-width:100vw;height:100dvh;border-radius:0;border:0}
.condu-abrir{right:14px;bottom:14px;padding:15px;border-radius:50%}
.condu-abrir-txt{display:none}
.condu-punto{top:9px;left:9px}
.preview-bar{font-size:11.5px;padding:8px 14px;gap:9px}
.pie-bajo .pie-demo{padding-right:0}
}