/* =========================================================
   INDECOLOR — Sitio Web
   Reconstrucción HTML + CSS puro del diseño de Figma
   ========================================================= */

/* ---------- Tipografía ---------- */
@font-face{
  font-family:'DIN Black';
  src:url('../assets/fonts/DIN-Black.otf') format('opentype');
  font-weight:400 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'D-DIN';
  src:url('../assets/fonts/D-DIN.otf') format('opentype');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'D-DIN';
  src:url('../assets/fonts/D-DIN-Bold.otf') format('opentype');
  font-weight:700; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'D-DIN';
  src:url('../assets/fonts/D-DIN-Italic.otf') format('opentype');
  font-weight:400; font-style:italic; font-display:swap;
}

/* ---------- Tokens ---------- */
:root{
  --azul:#034592;          /* azul corporativo */
  --azul-bright:#028FE1;   /* azul brillante */
  --navy:#001A39;          /* navy oscuro / texto */
  --bg:#F2FAFF;            /* fondo de página */
  --blanco:#FFFFFF;
  --gris:#676767;          /* texto de cuerpo */
  --gris-2:#8A8A8A;
  --amarillo:#E79F05;
  --rojo:#CF0912;
  --morado:#592B88;
  --verde:#4A7602;
  --azul-suave:#DEF2FD;    /* chips */
  --linea:#E4EBF2;

  --display:'DIN Black','DIN Alternate',Impact,sans-serif;
  --body:'D-DIN','DIN Alternate',-apple-system,Segoe UI,sans-serif;

  --container:1280px;
  --r-card:20px;
  --r-lg:24px;
  --sombra:0 10px 30px rgba(0,42,92,.07);
  --sombra-sm:0 4px 14px rgba(0,42,92,.06);
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; overflow-x:clip}
body{
  margin:0; background:var(--bg); color:var(--navy);
  font-family:var(--body); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
ul{margin:0; padding:0; list-style:none}
h1,h2,h3,h4{margin:0; font-family:var(--display); font-weight:400; line-height:1.08; letter-spacing:0}
p{margin:0}
button,input,textarea,select{font:inherit; color:inherit}

/* ---------- Utilidades ---------- */
.container{width:min(var(--container), calc(100% - 48px)); margin-inline:auto}
.az{color:var(--azul-bright)}
.am{color:var(--amarillo)}
.vd{color:var(--verde)}
.nv{color:var(--navy)}
.bl{color:#fff}
.center{text-align:center}
.section{position:relative; padding:88px 0}
.lead{font-size:20px; line-height:1.45; color:var(--gris)}
.lead strong{color:#4A5560; font-weight:700}

.eyebrow{
  font-family:var(--display); font-size:15px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--azul-bright); margin-bottom:14px;
}
.eyebrow.blanca{color:#fff}

.chip{
  display:inline-block; padding:8px 20px; border-radius:999px;
  background:var(--azul-suave); color:var(--azul-bright);
  font-family:var(--display); font-size:14.5px; letter-spacing:.12em; text-transform:uppercase;
}
.chip.verde{background:#EAF3DC; color:var(--verde)}
.chip.amarilla{background:#FDF1DA; color:var(--amarillo)}
.chip.azul-solido{background:var(--azul); color:#fff}
.chip.blanca{background:rgba(255,255,255,.16); color:#fff}

.h1{font-size:62px; line-height:68px}
.h2{font-size:48px; line-height:1.1}
.h3{font-size:34px; line-height:1.14}
.h4{font-size:22px; line-height:1.2}

/* ---------- Botones ---------- */
.btn{
  display:inline-flex; align-items:center; gap:9px;
  height:46px; padding:0 22px; border-radius:10px;
  font-family:var(--display); font-size:16.5px; letter-spacing:.01em;
  border:2px solid transparent; cursor:pointer; white-space:nowrap;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn svg{width:17px; height:17px; flex:0 0 auto}
.btn--azul{background:var(--azul-bright); color:#fff; box-shadow:0 6px 16px rgba(2,143,225,.28)}
.btn--navy{background:var(--azul); color:#fff; box-shadow:0 6px 16px rgba(3,69,146,.25)}
.btn--blanco{background:#fff; color:var(--navy)}
.btn--out-azul{background:transparent; border-color:var(--azul-bright); color:var(--azul-bright)}
.btn--out-navy{background:transparent; border-color:var(--navy); color:var(--navy)}
.btn--out-blanco{background:transparent; border-color:#fff; color:#fff}
.btn--verde{background:#4C7A0B; color:#fff}
.btn--pill{border-radius:999px}
.btn--lg{height:56px; padding:0 28px; font-size:17.5px}

.link-mas{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--display); font-size:15.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--azul-bright);
}

/* ---------- Blobs decorativos ---------- */
.blob{position:absolute; z-index:0; pointer-events:none}
.blob-shape{
  width:100%; height:100%;
  border-radius:62% 38% 46% 54% / 55% 48% 52% 45%;
}
.blob-shape--a{border-radius:44% 56% 62% 38% / 52% 44% 56% 48%}
.blob-shape--b{border-radius:58% 42% 38% 62% / 45% 58% 42% 55%}
.blob-shape--c{border-radius:36% 64% 55% 45% / 60% 40% 60% 40%}
.blob--azul .blob-shape{background:var(--azul)}
.blob--azulb .blob-shape{background:var(--azul-bright)}
.blob--amarillo .blob-shape{background:var(--amarillo)}
.blob--morado .blob-shape{background:var(--morado)}
.blob--verde .blob-shape{background:var(--verde)}
.blob--rojo .blob-shape{background:var(--rojo)}

/* =========================================================
   TOPBAR
   ========================================================= */
.topbar{background:transparent; color:#fff; font-size:14.5px; padding-top:0; position:relative; z-index:41}
.topbar .container{
  background:var(--azul); border-radius:0 0 16px 16px;
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; min-height:38px; padding:0 24px;
}
.topbar__item{display:flex; align-items:center; gap:7px; font-family:var(--display); letter-spacing:.01em}
.topbar__msg{display:flex; align-items:center; gap:7px; font-family:var(--body); font-size:14px}
.topbar__msg strong{font-weight:700}
.topbar svg{width:17px; height:17px; flex:0 0 auto}
.social{display:flex; align-items:center; gap:7px}
.social a{
  width:19px; height:19px; border-radius:50%; background:var(--amarillo);
  display:grid; place-items:center; color:#fff;
}
.social a svg{width:11px; height:11px}
.social--footer a{width:26px; height:26px}
.social--footer a svg{width:15px; height:15px}
.social--footer a:nth-child(1){background:#1877F2}
.social--footer a:nth-child(2){background:var(--morado)}
.social--footer a:nth-child(3){background:var(--rojo)}
.social--footer a:nth-child(4){background:var(--amarillo)}

/* =========================================================
   HEADER
   ========================================================= */
.header{padding:13px 0 0; position:relative; z-index:40}
.header__inner{
  background:#fff; border-radius:16px; box-shadow:var(--sombra-sm);
  height:92px; display:flex; align-items:center; gap:18px; padding:0 26px;
}
.header__logo img{height:62px; width:auto}
.nav{display:flex; align-items:center; gap:22px; margin:0 auto}
.nav a{
  font-family:var(--display); font-size:14.5px; letter-spacing:.01em;
  text-transform:uppercase; color:var(--azul); white-space:nowrap;
}
.nav a:hover,.nav a.is-active{color:var(--azul-bright)}

/* Submenú desplegable (solo CSS) */
.nav__drop{position:relative}
.nav__drop > a{display:inline-flex; align-items:center; gap:6px}
.nav__drop > a svg{width:11px; height:11px; transition:transform .2s ease}
.nav__drop:hover > a svg,.nav__drop:focus-within > a svg{transform:rotate(180deg)}
.nav__menu{
  position:absolute; top:100%; left:50%; transform:translate(-50%,8px);
  min-width:230px; background:#fff; border-radius:14px; box-shadow:0 16px 40px rgba(0,26,57,.16);
  padding:10px; display:grid; gap:2px; z-index:60;
  opacity:0; visibility:hidden; pointer-events:none; transition:opacity .18s ease, transform .18s ease;
}
.nav__drop::after{content:''; position:absolute; top:100%; left:0; right:0; height:16px}
.nav__drop:hover .nav__menu,.nav__drop:focus-within .nav__menu{
  opacity:1; visibility:visible; pointer-events:auto; transform:translate(-50%,12px);
}
.nav__menu a{
  display:block; padding:11px 14px; border-radius:9px; white-space:nowrap;
  font-family:var(--display); font-size:14px; text-transform:uppercase; color:var(--azul); letter-spacing:.02em;
}
.nav__menu a:hover{background:var(--azul-suave); color:var(--azul-bright)}
.header .btn{height:42px; font-size:15px; text-transform:uppercase; letter-spacing:.04em; padding:0 20px}
.nav-toggle{display:none}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative; padding:72px 0 52px; overflow:visible}
.hero__grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr);
  gap:40px; align-items:start;
}
.hero__txt{padding-top:28px}
.hero__txt .h1{margin-bottom:20px}
.hero__txt .lead{max-width:640px; margin-bottom:30px}
.hero__cta{display:flex; flex-wrap:wrap; gap:14px}
.hero__art{position:relative; display:grid; place-items:start center; margin-right:-40px}
.hero__art img{position:relative; z-index:2; width:685px; max-width:none; height:auto}
.hero__blob{
  position:absolute; z-index:1;
  width:530px; height:515px; background:#57C0F0;
  border-radius:56% 44% 47% 53% / 50% 44% 56% 50%;
  top:-18px; left:150px;
}
.hero__blob-am{
  position:absolute; left:-235px; top:534px; width:575px; height:430px;
  background:var(--amarillo); border-radius:46% 54% 42% 58% / 44% 58% 42% 56%;
  z-index:0;
}
.hero--img .hero__art{display:block; min-height:0; margin-right:-80px; padding-top:14px}
.hero--img .hero__foto{
  position:relative; z-index:2; aspect-ratio:718/555; width:100%;
}
.hero--img .hero__foto img{width:100%; height:100%; object-fit:cover; max-height:none}

/* ---------- Barra de features ---------- */
.features{
  position:relative; z-index:3; background:#fff; border-radius:var(--r-card);
  box-shadow:var(--sombra); padding:30px 10px; margin-top:40px;
  display:grid; grid-template-columns:repeat(6,1fr);
}
.features__i{padding:0 16px; text-align:center; position:relative}
.features__i + .features__i::before{
  content:''; position:absolute; left:0; top:14px; bottom:14px; width:1px; background:var(--linea);
}
.ico{
  width:44px; height:44px; border-radius:50%; margin:0 auto 14px;
  display:grid; place-items:center; color:#fff;
}
.ico svg{width:22px; height:22px}
.ico--verde{background:var(--verde)}
.ico--azulb{background:var(--azul-bright)}
.ico--rojo{background:var(--rojo)}
.ico--amarillo{background:var(--amarillo)}
.ico--azul{background:var(--azul)}
.ico--morado{background:var(--morado)}
.features__t{font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:#000; margin-bottom:5px}
.features__d{font-size:15.5px; color:var(--gris); line-height:1.4}

/* =========================================================
   DOS LÍNEAS
   ========================================================= */
.head-c{position:relative; z-index:2; text-align:center; max-width:760px; margin:0 auto 62px}
.head-c .chip{margin-bottom:20px}
.head-c .h2{margin-bottom:16px}
.head-c .lead{color:var(--gris); max-width:560px; margin:0 auto}

.lineas{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:24px}
.linea-card{
  position:relative; border-radius:var(--r-card); overflow:hidden;
  min-height:590px; display:flex; flex-direction:column; justify-content:flex-end;
  padding:38px; box-shadow:var(--sombra);
}
.linea-card__bg{position:absolute; inset:0; z-index:0}
.linea-card__bg img{width:100%; height:100%; object-fit:cover; object-position:50% 34%}
.linea-card--osc .linea-card__bg img{object-position:57% 46%; transform:scale(1.06)}
.linea-card__bg::after{content:''; position:absolute; inset:0}
.linea-card--claro .linea-card__bg::after{background:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(252,253,255,.62) 26%,rgba(250,252,254,.90) 46%,rgba(249,251,253,.97) 62%,#F8FAFC 78%)}
.linea-card--osc .linea-card__bg::after{
  background:linear-gradient(34deg,#00101F 0%,rgba(0,16,32,.96) 26%,rgba(0,20,40,.86) 44%,rgba(2,26,50,.52) 62%,rgba(4,32,60,.20) 80%,rgba(6,36,68,.04) 100%),
             linear-gradient(180deg,rgba(0,14,28,.45) 0%,rgba(0,14,28,0) 34%);
}
.linea-card > *:not(.linea-card__bg){position:relative; z-index:2}
.linea-card .badge{
  align-self:flex-start; padding:6px 14px; border-radius:8px;
  font-family:var(--display); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:16px;
}
.linea-card--claro .badge{background:var(--azul-bright); color:#fff}
.linea-card--osc .badge{background:#fff; color:var(--navy)}
.linea-card h3{font-size:44px; line-height:1.06; margin-bottom:14px}
.linea-card--claro h3{color:var(--azul)}
.linea-card--osc h3{color:#fff}
.linea-card p{font-size:19px; line-height:1.45; margin-bottom:20px; max-width:400px}
.linea-card--claro p{color:var(--navy)}
.linea-card--osc p{color:#D5DEE8}
.tags{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:28px}
.tags span{
  padding:6px 13px; border-radius:999px; font-family:var(--display);
  font-size:13px; letter-spacing:.09em; text-transform:uppercase;
}
.linea-card--claro .tags span{background:#fff; color:var(--azul); box-shadow:var(--sombra-sm)}
.linea-card--osc .tags span{background:#0A1F3C; color:#fff; border:1px solid #23384F}
.linea-card .btn{align-self:flex-start}

/* =========================================================
   PRODUCTOS DESTACADOS
   ========================================================= */
.split-head{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:end; margin-bottom:56px}
.split-head .h2{max-width:620px}
.split-head .lead{max-width:392px; margin-left:auto}

.prods{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center}
.prod__img{height:230px; display:grid; place-items:end center; margin-bottom:20px}
.prod__img img{max-height:230px; width:auto}
.prod__l{font-family:var(--display); font-size:13.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--azul-bright); margin-bottom:8px}
.prod__t{font-family:var(--body); font-weight:700; font-size:21px; color:var(--navy); margin-bottom:8px}
.prod__d{font-size:16.5px; color:var(--gris); line-height:1.45; max-width:278px; margin:0 auto}
.cta-row{position:relative; z-index:2; display:flex; justify-content:center; gap:16px; margin-top:44px}

/* =========================================================
   POR QUÉ
   ========================================================= */
.porque{display:grid; grid-template-columns:517fr 658fr; gap:105px; align-items:center; position:relative; z-index:2}
.porque .h2{margin-bottom:22px}
.porque .lead{margin-bottom:38px; max-width:505px}
.stats{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.stat svg{width:22px; height:22px; color:var(--azul-bright); margin-bottom:12px}
.stat__n{font-family:var(--display); font-size:46px; line-height:1; color:var(--navy); margin-bottom:6px}
.stat__n small{font-size:22px; font-family:var(--body); font-weight:700}
.stat__l{font-family:var(--display); font-size:13.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--azul-bright); margin-bottom:8px}
.stat__d{font-size:15px; color:var(--gris); line-height:1.4}
.porque__art{position:relative}
.porque__foto{position:relative; z-index:2; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:645/520}
.porque__foto img{width:100%; height:100%; object-fit:cover}
.badge-iso{
  position:absolute; z-index:3; top:62px; right:-32px;
  background:#fff; border-radius:16px; box-shadow:var(--sombra);
  padding:17px 24px; display:flex; align-items:center; gap:16px;
}
.badge-iso img{height:46px; width:auto}
.badge-iso b{display:block; font-family:var(--body); font-weight:700; font-size:17px; color:var(--navy)}
.badge-iso span{font-size:16px; color:var(--gris)}

/* =========================================================
   PROYECTOS / CASOS
   ========================================================= */
.casos{display:grid; grid-template-columns:repeat(3,1fr); gap:52px; position:relative; z-index:2}
.caso__img{border-radius:14px; overflow:hidden; aspect-ratio:390/253; margin-bottom:16px; box-shadow:var(--sombra-sm)}
.caso__img img{width:100%; height:100%; object-fit:cover}
.caso__loc{display:flex; align-items:center; gap:7px; font-size:15.5px; color:var(--gris); margin-bottom:7px}
.caso__loc svg{width:15px; height:15px; color:var(--azul-bright)}
.caso__t{font-family:var(--body); font-weight:700; font-size:20px; color:var(--navy); margin-bottom:8px}
.caso__d{font-size:16.5px; color:var(--gris); line-height:1.5; margin-bottom:16px}

/* ---------- Marcas ---------- */
.marcas{position:relative; z-index:2; text-align:center; padding-top:64px}
.marcas__t{position:relative; z-index:3; font-family:var(--display); font-size:15.5px; letter-spacing:.14em; text-transform:uppercase; color:#fff; margin-bottom:22px}
.marcas__row{position:relative; z-index:3; display:flex; justify-content:center; gap:18px; flex-wrap:wrap}
.marcas__row div{
  background:#fff; border-radius:12px; box-shadow:var(--sombra-sm);
  width:196px; height:84px; display:grid; place-items:center; padding:10px 16px;
}
.marcas__row img{max-height:58px; width:auto; object-fit:contain}

/* =========================================================
   DISTRIBUIDOR
   ========================================================= */
.distri{display:grid; grid-template-columns:700fr 533fr; gap:47px; align-items:center; position:relative; z-index:2}
.distri__art{position:relative; padding:74px 90px}
.distri__foto{position:relative; z-index:3; border-radius:var(--r-card); overflow:hidden; box-shadow:var(--sombra); aspect-ratio:520/600}
.distri__foto img{width:100%; height:100%; object-fit:cover}
.distri__blobs span{position:absolute; border-radius:50%; opacity:.62; z-index:1}
.distri__blobs span:nth-child(1){width:330px; height:330px; background:#4FB3E8; top:-6px; left:-10px}
.distri__blobs span:nth-child(2){width:340px; height:340px; background:#8FBF3C; top:18px; right:-6px}
.distri__blobs span:nth-child(3){width:360px; height:360px; background:#2E6FB8; bottom:-14px; left:-16px}
.distri__blobs span:nth-child(4){width:300px; height:300px; background:#F0A63C; bottom:-24px; right:52px}
.distri .h2{margin-bottom:16px}
.distri .lead{margin-bottom:38px}
.bens{display:grid; grid-template-columns:1fr 1fr; gap:30px 38px; margin-bottom:40px}
.ben .ico{margin:0 0 14px}
.ben__t{font-family:var(--display); font-size:14.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--navy); margin-bottom:7px}
.ben__d{font-size:16.5px; color:var(--gris); line-height:1.45}

/* =========================================================
   CTA FINAL
   ========================================================= */
.cta-final{position:relative; z-index:5; padding:0}
.cta-box{
  position:relative; overflow:hidden; background:var(--navy);
  border-radius:var(--r-lg); padding:95px 40px 90px; text-align:center;
  max-width:1064px; margin:0 auto;
}
.cta-box > *{position:relative; z-index:2}
.cta-box .h2{color:#fff; margin-bottom:16px}
.cta-box p{color:#C6D2DF; font-size:16px; line-height:1.5; max-width:442px; margin:0 auto 32px}
.cta-box .eyebrow{color:#fff}
.cta-box__b{position:absolute; z-index:1}
.cta-box__b--am{width:152px; height:152px; background:var(--amarillo); top:-44px; left:-14px; border-radius:0 0 60% 40% / 0 0 90% 60%}
.cta-box__b--rojo{width:152px; height:152px; background:var(--rojo); top:-44px; right:-14px; border-radius:0 0 40% 60% / 0 0 60% 90%}
.cta-box__b--azul{width:158px; height:180px; background:var(--azul); bottom:-14px; left:-14px; border-radius:60% 40% 0 0 / 88% 62% 0 0}
.cta-box__b--mor{width:158px; height:180px; background:var(--morado); bottom:-14px; right:-14px; border-radius:40% 60% 0 0 / 62% 88% 0 0}

/* =========================================================
   FOOTER
   ========================================================= */
.footer{margin-top:-173px; position:relative; z-index:1}
.footer .container{background:#fff; border-radius:var(--r-lg); padding:266px 80px 118px}
.footer__grid{display:grid; grid-template-columns:1.45fr 1fr 1fr 1.25fr; gap:44px}
.footer__logo{height:66px; width:auto; margin-bottom:20px}
.footer__d{font-size:17px; color:var(--gris); line-height:1.55; max-width:288px; margin-bottom:22px}
.footer__iso{height:58px; width:auto; margin-top:24px}
.footer__t{font-family:var(--display); font-size:15.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--azul-bright); margin-bottom:20px}
.footer__nav li{margin-bottom:13px}
.footer__nav a{font-family:var(--body); font-weight:700; font-size:17px; color:var(--azul)}
.footer__nav a:hover{color:var(--azul-bright)}
.footer__c li{display:flex; align-items:flex-start; gap:11px; margin-bottom:16px; font-size:17px; color:var(--gris); line-height:1.5}
.footer__c svg{width:17px; height:17px; color:var(--azul-bright); flex:0 0 auto; margin-top:3px}
.legal{color:#fff; margin:30px 0 26px}
.legal .container{background:var(--azul); border-radius:10px; padding:0 26px}
.legal .container{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:48px; font-size:15px; flex-wrap:wrap}
.legal b{font-family:var(--body); font-weight:700}
.legal__r{display:flex; align-items:center; gap:10px}
.legal a{text-decoration:underline}

/* ---------- WhatsApp flotante ---------- */
.wa{position:fixed; right:26px; bottom:26px; z-index:90}
.wa img{width:70px; height:70px; filter:drop-shadow(0 8px 20px rgba(0,0,0,.22))}
.wa b{
  position:absolute; top:-3px; right:-3px; width:22px; height:22px; border-radius:50%;
  background:var(--rojo); color:#fff; font-family:var(--body); font-size:12px; font-weight:700;
  display:grid; place-items:center;
}

/* =========================================================
   COMPONENTES DE LÍNEA (comercial / industrial)
   ========================================================= */
.familia{position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; overflow:visible}
.familia__art{position:relative; display:grid; place-items:center; min-height:520px}
.familia__art img{position:relative; z-index:2; max-height:520px; width:auto; max-width:100%; object-fit:contain}
.familia__blob{position:absolute; z-index:1; width:450px; height:420px; border-radius:56% 44% 48% 52% / 52% 46% 54% 48%; left:52%; transform:translateX(-50%); top:38px}
.familia__blob--verde{background:var(--verde)}
.familia__blob--azul{background:var(--azul-bright)}
.familia__blob--amarillo{background:var(--amarillo)}
.pill-dato{
  position:absolute; z-index:4; left:0; top:52%;
  background:#fff; border-radius:14px; box-shadow:var(--sombra); padding:16px 22px;
}
.pill-dato svg{width:20px; height:20px; color:var(--verde); margin-bottom:8px}
.pill-dato b{display:block; font-family:var(--display); font-size:34px; color:var(--navy); line-height:1}
.pill-dato b small{font-size:19px; font-family:var(--body); font-weight:700}
.pill-dato span{font-size:14px; color:var(--gris)}

.familia__t{font-family:var(--display); font-size:30px; color:var(--navy); margin-bottom:12px}
.familia__d{font-size:18px; color:var(--gris); line-height:1.55; margin-bottom:26px}
.familia__d strong{color:var(--navy); font-weight:700}

.item{
  display:grid; grid-template-columns:112px 1fr auto; gap:20px; align-items:center;
  background:#fff; border-radius:14px; box-shadow:var(--sombra-sm); padding:14px 18px; margin-bottom:14px;
}
.item__img{height:86px; display:grid; place-items:center}
.item__img img{max-height:86px; width:auto}
.item__t{font-family:var(--body); font-weight:700; font-size:18px; color:var(--navy); margin-bottom:5px}
.item__d{font-size:16px; color:var(--gris); line-height:1.45}
.item__d strong{color:var(--navy); font-weight:700}
.btn-ficha{
  display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 18px;
  border:1.5px solid var(--navy); border-radius:9px; color:var(--navy);
  font-family:var(--display); font-size:15.5px; white-space:nowrap;
}
.btn-ficha svg{width:15px; height:15px}
.btn-ficha:hover{background:var(--navy); color:#fff}

/* ---------- Ola azul + tabla comparativa ---------- */
.ola{position:relative; background:transparent; padding:0}
.ola__top,.ola__bot{display:block; width:100%; height:auto}
.ola__in{background:var(--azul-bright); padding:0 0 34px; text-align:center; position:relative; z-index:2}
.ola .h2{color:#fff; margin-bottom:14px}
.ola .chip{background:rgba(255,255,255,.9); color:var(--azul-bright); margin-bottom:22px}

.tabla{
  position:relative; z-index:2; background:#fff; border-radius:var(--r-card); box-shadow:var(--sombra);
  max-width:846px; margin:0 auto; overflow:hidden; text-align:left;
}
.tabla table{width:100%; border-collapse:collapse}
.tabla th,.tabla td{padding:17px 24px; border-bottom:1px solid var(--linea); font-size:17px}
.tabla tr:last-child td{border-bottom:0}
.tabla thead th{text-align:center; padding:22px}
.tabla thead img{height:34px; width:auto; margin:0 auto}
.tabla thead .gen{font-family:var(--body); font-weight:700; color:var(--navy); font-size:15px; line-height:1.25}
.tabla tbody th{text-align:left; font-family:var(--body); font-weight:700; color:var(--navy); width:34%}
.tabla td{text-align:center; color:var(--gris)}
.tabla .ok{color:var(--verde); font-weight:700; display:inline-flex; align-items:center; gap:8px}
.tabla .no{color:var(--gris); display:inline-flex; align-items:center; gap:8px}
.tabla svg{width:15px; height:15px}

/* ---------- Pasos 01 02 03 ---------- */
.pasos{display:grid; grid-template-columns:repeat(3,1fr); gap:30px; position:relative; z-index:2}
.paso{background:#fff; border-radius:18px; box-shadow:var(--sombra); padding:38px 34px 42px}
.paso__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:22px}
.paso__n{font-family:var(--display); font-size:64px; line-height:1; color:var(--amarillo)}
.paso__top svg{width:38px; height:38px; color:var(--azul-bright)}
.paso__t{font-family:var(--body); font-weight:700; font-size:22px; color:var(--navy); margin-bottom:12px}
.paso__d{font-size:17px; color:var(--gris); line-height:1.55}

/* ---------- Contacto / formulario ---------- */
.contacto{display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:start}
.contacto .h2{margin-bottom:16px}
.contacto .lead{margin-bottom:38px}
.vias{display:grid; grid-template-columns:1fr 1fr; gap:34px 40px}
.via .ico{margin:0 0 14px}
.via__t{font-family:var(--display); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:6px}
.via__d{font-size:16.5px; color:var(--gris); line-height:1.5}
.form{background:var(--navy); border-radius:var(--r-lg); padding:42px 40px}
.form h3{font-size:30px; color:#fff; margin-bottom:10px}
.form > p{color:#C6D2DF; font-size:17px; margin-bottom:28px}
.form__row{display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px}
.form label{display:block; font-family:var(--body); font-weight:700; font-size:15.5px; color:#fff; margin-bottom:8px}
.form input,.form textarea,.form select{
  width:100%; background:#0A2544; border:1px solid #1C3B60; border-radius:9px;
  padding:15px 17px; color:#fff; font-size:16.5px; font-family:var(--body);
}
.form input::placeholder,.form textarea::placeholder{color:#7E93AB}
.form textarea{min-height:104px; resize:vertical}
.form .btn{width:100%; justify-content:center; margin-top:24px; height:56px; border-radius:12px}
.form__field{margin-bottom:18px}

/* ---------- Grid de productos INDETECH ---------- */
.sistemas{position:relative; z-index:2; display:grid; grid-template-columns:repeat(4,1fr); gap:56px; align-items:stretch}
.sistema{display:flex; flex-direction:column}
.sistema .sistema__d{flex:0 0 auto}
.sistema .sistema__b{margin-top:auto}
.sistema__img{height:360px; display:grid; place-items:center; margin-bottom:26px}
.sistema__img img{max-height:360px; width:auto}
.sistema__t{font-family:var(--display); font-size:30px; color:var(--navy); margin-bottom:12px}
.sistema__s{font-family:var(--body); font-weight:700; font-size:17px; color:var(--navy); margin-bottom:10px}
.sistema__d{font-size:16.5px; color:var(--gris); line-height:1.5}

/* ---------- Blog ---------- */
.posts{display:grid; grid-template-columns:repeat(3,1fr); gap:30px}
.post{background:#fff; border-radius:16px; box-shadow:var(--sombra-sm); overflow:hidden; display:flex; flex-direction:column}
.post__img{aspect-ratio:400/230; overflow:hidden}
.post__img img{width:100%; height:100%; object-fit:cover}
.post__b{padding:24px; display:flex; flex-direction:column; flex:1}
.post__tag{font-family:var(--display); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--azul-bright); margin-bottom:10px}
.post__t{font-family:var(--body); font-weight:700; font-size:18px; color:var(--navy); line-height:1.3; margin-bottom:10px}
.post__d{font-size:14.5px; color:var(--gris); line-height:1.5; margin-bottom:18px; flex:1}
.post__m{display:flex; align-items:center; gap:14px; font-size:13px; color:var(--gris-2)}

/* ---------- Contenido largo (aviso / blog post) ---------- */
.prosa{max-width:820px; margin:0 auto}
.prosa h2{font-size:28px; margin:40px 0 14px}
.prosa h3{font-size:22px; margin:30px 0 12px}
.prosa p{font-size:16px; line-height:1.72; color:var(--gris); margin-bottom:16px}
.prosa ul{margin:0 0 18px 20px; list-style:disc}
.prosa li{font-size:16px; line-height:1.72; color:var(--gris); margin-bottom:8px}
.prosa strong{color:var(--navy); font-weight:700}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1320px){ .nav{gap:15px} .nav a{font-size:13.5px} .header .btn{padding:0 16px; font-size:14px} }
@media (max-width:1180px){
  .h1{font-size:52px; line-height:56px}
  .h2{font-size:38px}
  .features{grid-template-columns:repeat(3,1fr); row-gap:28px}
  .features__i:nth-child(3n+1)::before{display:none}
  .prods,.sistemas{grid-template-columns:repeat(2,1fr); gap:34px}
  .nav{gap:20px}
  .nav a{font-size:13px}
}
@media (max-width:980px){
  .section{padding:64px 0}
  .hero__grid,.lineas,.porque,.distri,.contacto,.familia,.split-head{grid-template-columns:1fr; gap:38px}
  .casos,.pasos,.posts{grid-template-columns:1fr; gap:28px}
  .split-head .lead{margin-left:0}
  .footer__grid{grid-template-columns:1fr; gap:34px}
  .badge-iso{right:0; top:-16px}
  .distri__art{padding:34px}
  .header__inner{height:auto; padding:14px 18px; flex-wrap:wrap; gap:14px}
  .nav{order:3; width:100%; margin:0; overflow-x:auto; gap:18px; padding-bottom:4px}
  .header .btn{margin-left:auto}
  .item{grid-template-columns:88px 1fr; gap:14px}
  .item .btn-ficha{grid-column:1/-1; justify-content:center}
}
@media (max-width:640px){
  .h1{font-size:38px; line-height:42px}
  .h2{font-size:30px}
  .h3{font-size:26px}
  .container{padding:0 18px}
  .features{grid-template-columns:1fr 1fr}
  .features__i::before{display:none}
  .prods,.sistemas,.form__row,.bens,.vias,.stats{grid-template-columns:1fr}
  .topbar__msg{display:none}
  .marcas__row div{width:150px; height:70px}
  .cta-box{padding:54px 22px 62px}
  .form{padding:30px 22px}
  .wa img{width:58px; height:58px}
}

/* ---------- Ritmo vertical por sección (Inicio) ---------- */
.s-prods{padding-bottom:133px}
.s-porque{padding-bottom:168px}
.s-casos{padding-bottom:188px}
.s-distri{padding-bottom:190px}

/* ---------- Variantes de familia ---------- */
.familia--rev .familia__art{order:2}
.pill-dato--izq{left:-16px; right:auto; top:46%}
.ola__top{margin-bottom:-1px}
.ola__bot{margin-top:-1px}
.s-recibes{padding-top:12px; padding-bottom:34px}
.s-recibes .h2{font-size:32px}
.s-fam{padding:88px 0}
.s-fam .head-c .h2{font-size:40px}
.s-pasos{padding:88px 0}
.s-contacto{padding:88px 0}
.s-indetech{padding:118px 0 130px}
@media (max-width:980px){
  .familia--rev .familia__art{order:0}
  .pill-dato,.pill-dato--izq{position:static; margin:20px auto 0; width:max-content}
}

/* =========================================================
   LÍNEA INDUSTRIAL
   ========================================================= */
.hero-ind{position:relative; margin-top:-143px; padding:143px 0 0; overflow:hidden; background:#0A2038}
.hero-ind__bg{position:absolute; inset:0; z-index:0}
.hero-ind__bg img{width:100%; height:100%; object-fit:cover; object-position:center 46%}
.hero-ind__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(4,18,36,.5) 0%,rgba(4,18,36,0) 20%,rgba(242,250,255,0) 64%,rgba(242,250,255,.42) 79%,rgba(242,250,255,.93) 92%,var(--bg) 100%),
             linear-gradient(100deg,rgba(5,21,40,.93) 0%,rgba(6,24,45,.80) 30%,rgba(8,30,54,.34) 50%,rgba(10,34,58,.10) 68%,rgba(10,34,58,0) 82%);
}
.hero-ind__in{position:relative; z-index:2; padding:96px 0 200px}
.hero-ind .eyebrow{color:#7FD0FF}
.hero-ind h1{font-size:48px; line-height:1.16; color:#fff; margin-bottom:20px; max-width:700px}
.hero-ind h1 .thin{font-family:var(--body); font-weight:400}
.hero-ind__lead{font-size:18px; line-height:1.5; color:#DCE7F2; max-width:472px; margin-bottom:30px}
.hero-ind__lead strong{color:#fff; font-weight:700}
.hero-ind__cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:48px}
.hero-ind__meta{display:flex; gap:0; border-top:1px solid rgba(255,255,255,.28); padding-top:18px; width:536px; max-width:100%}
.hero-ind__meta div{flex:1; padding:0 26px; border-left:1px solid rgba(255,255,255,.28)}
.hero-ind__meta div:first-child{padding-left:0; border-left:0}
.hero-ind__meta span{display:block; font-family:var(--display); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:#7FD0FF; margin-bottom:6px}
.hero-ind__meta b{font-family:var(--body); font-weight:700; font-size:17.5px; color:#fff}

/* Grid de sistemas con ficha */
.sistema__b{display:flex; align-items:flex-start; gap:10px; margin:20px 0 22px; min-height:52px}
.sistema__b svg{width:18px; height:18px; flex:0 0 auto; margin-top:2px}
.sistema__b span{font-family:var(--body); font-weight:700; font-size:16.5px; color:var(--navy); line-height:1.35}
.btn-ficha--full{
  display:flex; align-items:center; justify-content:center; gap:9px; width:100%; height:52px;
  background:var(--navy); color:#fff; border-radius:10px;
  font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase;
}
.btn-ficha--full:hover{background:#062B52}

/* Banda navy */
.banda{
  background:var(--navy); border-radius:18px; padding:52px 48px;
  display:flex; align-items:center; justify-content:space-between; gap:30px; flex-wrap:wrap;
}
.banda h3{font-size:34px; color:#fff; line-height:1.14}
.banda h3 .thin{font-family:var(--body); font-weight:400}

/* Dos cards de imagen a sangre */
.duo{display:grid; grid-template-columns:1fr 1fr; min-height:560px}
.duo__c{position:relative; display:flex; flex-direction:column; justify-content:center; padding:72px 60px; overflow:hidden}
.duo__c img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0}
.duo__c::after{content:''; position:absolute; inset:0; background:linear-gradient(90deg,rgba(4,12,22,.80) 0%,rgba(4,12,22,.50) 58%,rgba(4,12,22,.16) 100%); z-index:1}
.duo__c > *{position:relative; z-index:2}
.duo__e{font-family:var(--display); font-size:12.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--amarillo); margin-bottom:12px}
.duo__c h3{font-size:42px; color:#fff; line-height:1.1; margin-bottom:16px}
.duo__c p{font-size:17.5px; color:#D8E2EC; line-height:1.5; max-width:470px}

/* Bloque tecnologías (navy) */
.tec{background:var(--navy); padding:130px 0}
.tec__grid{display:grid; grid-template-columns:490fr 582fr; gap:80px; align-items:center; padding-left:44px}
.tec h2{font-size:44px; color:#fff; line-height:1.16; margin-bottom:20px}
.tec h2 .thin{font-family:var(--body); font-weight:400}
.tec p.lead{color:#C6D5E4}
.tec .chip{background:#0E5DB0; color:#fff; margin-bottom:22px}
.tec__cards{display:grid; grid-template-columns:1fr 1fr; gap:24px}
.tec__card{background:#F6FAFD; border-radius:14px; padding:26px 24px 28px}
.tec__card svg{width:26px; height:26px; color:var(--azul-bright); margin-bottom:18px}
.tec__card h4{font-family:var(--body); font-weight:700; font-size:20px; color:var(--navy); margin-bottom:9px}
.tec__card p{font-size:16px; color:var(--gris); line-height:1.45}

/* Casos sobre fondo navy */
.casos-navy{background:var(--navy); border-radius:0 0 var(--r-lg) var(--r-lg); padding:96px 0 196px; margin-bottom:-196px}
.casos-navy .h2,.casos-navy .eyebrow{color:#fff}
.casos-navy .lead{color:#C6D5E4}
.casos-navy .lead strong{color:#fff}
.s-casos-ind{padding-top:0; padding-bottom:150px}
.s-casos-ind .marcas{padding-top:132px}
.s-casos-ind .casos{padding-top:10px}

@media (max-width:980px){
  .hero-ind h1{font-size:40px}
  .hero-ind__in{padding:72px 0 150px}
  .duo{grid-template-columns:1fr}
  .duo__c{padding:44px 30px}
  .tec__grid,.tec__cards{grid-template-columns:1fr; gap:30px}
  .banda{padding:32px 26px}
  .banda h3{font-size:26px}
}

/* =========================================================
   CASOS DE ÉXITO
   ========================================================= */
.hero-caso{position:relative; background:#D9E7F3; overflow:hidden; padding:66px 0 88px; margin-top:-143px; padding-top:209px}
.hero-caso__blob{position:absolute; z-index:0; top:-40px; right:-90px; width:420px; height:420px;
  background:#AEC6DF; border-radius:42% 58% 34% 66% / 38% 46% 54% 62%}
.hero-caso .container{position:relative; z-index:2}
.hero-caso .h1{margin-bottom:22px}
.hero-caso .lead{max-width:530px; color:#4E5C69}

.chip-out{
  display:inline-block; padding:8px 20px; border-radius:999px;
  background:#E8F7FF; border:1.5px solid var(--azul-bright); color:var(--azul-bright);
  font-family:var(--display); font-size:13px; letter-spacing:.12em; text-transform:uppercase;
}

.caso-full{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:start; padding:14px 0; max-width:1191px; margin:0 auto}
.caso-full__img{position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--sombra); aspect-ratio:570/430}
.caso-full__img img{width:100%; height:100%; object-fit:cover}
.caso-full__n{
  position:absolute; top:18px; left:18px; z-index:2; background:#fff; border-radius:8px;
  padding:7px 14px; font-family:var(--display); font-size:12px; letter-spacing:.12em; color:var(--navy); text-transform:uppercase;
}
.caso-full__blob{position:absolute; z-index:0; width:300px; height:280px; background:#DCEAF7;
  border-radius:54% 46% 42% 58% / 48% 52% 48% 52%; left:180px; bottom:-70px}
.tag{
  display:inline-block; padding:7px 16px; border-radius:999px; margin-bottom:16px;
  font-family:var(--display); font-size:12px; letter-spacing:.1em; text-transform:uppercase;
}
.tag--azul{background:#E1EEFA; color:#2E6BA8}
.tag--rosa{background:#F0EAEE; color:#A84D59}
.tag--verde{background:#E4EDE8; color:#576C3D}
.caso-full h3{font-size:32px; color:var(--navy); line-height:1.1; margin-bottom:10px}
.caso-full__loc{display:flex; align-items:center; gap:7px; font-size:16px; color:var(--gris); margin-bottom:22px}
.caso-full__loc svg{width:16px; height:16px; color:var(--azul-bright)}
.caso-lab{
  display:flex; align-items:center; gap:9px; margin-bottom:8px;
  font-family:var(--display); font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--navy);
}
.caso-lab::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--azul-bright)}
.caso-full p.txt{font-size:16.5px; line-height:1.55; color:var(--gris); margin-bottom:22px}
.pill-sist{
  display:inline-flex; align-items:center; gap:10px; background:#E2EEFA; border-radius:999px;
  padding:10px 18px; margin-bottom:22px; font-family:var(--body); font-weight:700; font-size:15.5px; color:var(--navy);
}
.pill-sist svg{width:16px; height:16px; color:var(--azul-bright)}
.mets{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin:4px 0 16px}
.met{background:#fff; border:1px solid #E4EDF6; border-radius:12px; padding:16px 20px 18px}
.met__top{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px}
.met__l{font-family:var(--display); font-size:13px; letter-spacing:.12em; text-transform:uppercase; color:var(--gris)}
.met__top svg{width:17px; height:17px; color:var(--azul-bright)}
.met__v{font-family:var(--display); font-size:26px; color:var(--navy); line-height:1}
.nota{font-size:15px; font-style:italic; color:#8C97A3}
.sep-caso{height:1px; background:#DEE8F2; margin:52px auto; max-width:952px}

@media (max-width:980px){
  .caso-full{grid-template-columns:1fr; gap:30px}
  .sep-caso{margin:40px 0}
  .mets{grid-template-columns:1fr 1fr}
}

/* =========================================================
   DISTRIBUIDORES
   ========================================================= */
.hero-dis{position:relative; padding:56px 0 96px}
.hero-dis__grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center}
.hero-dis__grid > div:first-child{padding-left:90px}
.hero-dis .distri__art{padding:40px 56px; max-width:516px; margin-left:auto}
.hero-dis .distri__blobs span:nth-child(1){width:292px; height:292px; top:-4px; left:-8px}
.hero-dis .distri__blobs span:nth-child(2){width:300px; height:300px; top:16px; right:-4px}
.hero-dis .distri__blobs span:nth-child(3){width:318px; height:318px; bottom:-12px; left:-14px}
.hero-dis .distri__blobs span:nth-child(4){width:266px; height:266px; bottom:-20px; right:46px}
.hero-dis .h1{margin-bottom:22px}
.hero-dis .lead{max-width:452px; margin-bottom:30px; font-size:16px}
.hero-dis__cta{display:flex; gap:16px; flex-wrap:wrap}
.hero-dis__cta .btn{text-transform:uppercase; letter-spacing:.05em; height:46px; font-size:14px}

.vent{display:grid; grid-template-columns:repeat(4,1fr); gap:44px; text-align:center; position:relative; z-index:2}
.vent .ico{margin:0 auto 18px}
.vent__t{font-family:var(--display); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:10px}
.vent__d{font-size:16.5px; color:var(--gris); line-height:1.45; max-width:250px; margin:0 auto}

.pasos-dis{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; position:relative; z-index:2; max-width:1215px; margin:0 auto}
.paso-dis{background:#fff; border:1px solid #E6EEF7; border-radius:16px; box-shadow:var(--sombra-sm); padding:28px 26px 30px}
.paso-dis__i{width:48px; height:48px; border-radius:12px; display:grid; place-items:center; color:#fff; margin-bottom:22px}
.paso-dis__i svg{width:22px; height:22px}
.paso-dis__t{font-family:var(--body); font-weight:700; font-size:19px; color:var(--navy); margin-bottom:10px}
.paso-dis__d{font-size:16px; color:var(--gris); line-height:1.5}
.blob-cta-dis{position:absolute; z-index:0; right:-24px; top:-40px; width:322px; height:308px;
  background:var(--azul-bright); border-radius:46% 54% 38% 62% / 42% 50% 50% 58%}
.familia__art--ancho img{max-width:78%; max-height:390px}

@media (max-width:980px){
  .hero-dis__grid{grid-template-columns:1fr; gap:36px}
  .vent{grid-template-columns:1fr 1fr; gap:34px}
  .pasos-dis{grid-template-columns:1fr}
}
@media (max-width:640px){ .vent{grid-template-columns:1fr} }

/* =========================================================
   BLOG
   ========================================================= */
.hero-blog{position:relative; background:#F2FAFF; overflow:hidden; margin-top:-143px; padding:209px 0 96px}
.hero-blog__blob{position:absolute; z-index:0; top:-30px; right:-100px; width:420px; height:420px;
  background:#C6D6E7; border-radius:34% 66% 30% 70% / 30% 42% 58% 70%}
.hero-blog .container{position:relative; z-index:2}
.hero-blog .h1{margin-bottom:22px}
.hero-blog .lead{max-width:520px; color:#5A6772}

.filtros{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:44px}
.filtro{
  display:inline-flex; align-items:center; height:48px; padding:0 26px; border-radius:999px;
  border:1.5px solid var(--azul-bright); color:var(--azul-bright); background:transparent;
  font-family:var(--body); font-weight:700; font-size:16.5px;
}
.filtro.is-on{background:var(--azul-bright); color:#fff; border-color:var(--azul-bright)}

.blog-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:34px}
.bcard{background:#fff; border:1px solid #E9F0F7; border-radius:14px; overflow:hidden; display:flex; flex-direction:column}
.bcard__img{position:relative; aspect-ratio:409/253; overflow:hidden}
.bcard__img img{width:100%; height:100%; object-fit:cover}
.bcard__tag{
  position:absolute; top:18px; left:18px; z-index:2; padding:8px 16px; border-radius:7px; color:#fff;
  font-family:var(--display); font-size:13.5px; letter-spacing:.05em; text-transform:uppercase;
}
.bcard__b{padding:26px 24px 28px; display:flex; flex-direction:column; flex:1}
.bcard__m{font-size:15.5px; color:var(--gris); margin-bottom:12px}
.bcard__t{font-family:var(--display); font-size:24px; line-height:1.2; color:var(--navy); margin-bottom:12px}
.bcard__d{font-size:16.5px; line-height:1.5; color:var(--gris); margin-bottom:22px; flex:1}
.bcard__l{display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-weight:700; font-size:16.5px; color:var(--azul-bright)}
.bcard__l svg{width:16px; height:16px}

@media (max-width:980px){ .blog-grid{grid-template-columns:1fr 1fr} }
@media (max-width:640px){ .blog-grid{grid-template-columns:1fr} .filtros{gap:12px} }

/* =========================================================
   SINGLE BLOG
   ========================================================= */
.post-hero{position:relative; background:#F2FAFF; overflow:hidden; margin-top:-143px; padding:209px 0 0}
.post-hero__blob{position:absolute; z-index:0; top:-30px; right:-100px; width:420px; height:420px;
  background:#C6D6E7; border-radius:34% 66% 30% 70% / 30% 42% 58% 70%}
.post-hero .container{position:relative; z-index:2}
.post-hero .h1{font-size:56px; line-height:1.12; margin-bottom:22px; max-width:840px}
.post-hero .lead{max-width:700px; color:#5A6772; margin-bottom:100px}
.post-foto{position:relative; z-index:2; max-width:1064px; margin:0 auto; border-radius:16px; overflow:hidden;
  box-shadow:var(--sombra); aspect-ratio:1064/700}
.post-foto img{width:100%; height:100%; object-fit:cover}
.post-hero__wave{position:absolute; left:0; right:0; bottom:0; height:420px; background:#fff; z-index:0;
  clip-path:polygon(0 42%,100% 0,100% 100%,0 100%)}

.post-body{background:#fff; padding:64px 0 96px}
.post-body .prosa{max-width:831px}
.post-body .prosa h2{font-family:var(--display); font-size:30px; color:var(--azul); margin:44px 0 16px; line-height:1.15}
.post-body .prosa p{font-size:18.5px; line-height:1.62; color:#5B6570; margin-bottom:18px}
.post-body .prosa ul{margin:0 0 22px 22px}
.post-body .prosa li{font-size:18.5px; line-height:1.62; color:#5B6570; margin-bottom:6px}

.rel{background:#F2FAFF; padding:112px 0 145px}
.rel__head{display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start; margin-bottom:40px}
.rel__head .h2{font-size:44px; color:var(--azul)}
.rel__head .lead{max-width:400px; margin-left:auto; font-size:16px}

@media (max-width:980px){
  .post-hero .h1{font-size:36px}
  .rel__head{grid-template-columns:1fr}
  .rel__head .lead{margin-left:0}
}

/* =========================================================
   AVISO DE PRIVACIDAD
   ========================================================= */
.aviso-hero{position:relative; background:#F2FAFF; overflow:hidden; margin-top:-143px; padding:209px 0 0; text-align:center}
.aviso-hero__blob{position:absolute; z-index:0; top:-30px; right:-100px; width:420px; height:420px;
  background:#C6D6E7; border-radius:34% 66% 30% 70% / 30% 42% 58% 70%}
.aviso-hero__wave{position:absolute; left:0; right:0; bottom:0; height:300px; background:#fff; z-index:0;
  clip-path:polygon(0 46%,100% 0,100% 100%,0 100%)}
.aviso-hero .container{position:relative; z-index:2}
.aviso-hero .h1{font-size:61px; margin-bottom:74px}
.aviso-body{background:#fff; padding:0 0 96px}
.aviso-body .prosa{max-width:831px}
.aviso-body .prosa h2{font-family:var(--body); font-weight:700; font-size:20px; color:var(--azul); margin:34px 0 6px}
.aviso-body .prosa h2:first-child{margin-top:0}
.aviso-body .prosa p{font-size:18.5px; line-height:1.62; color:#5B6570; margin-bottom:14px}
.aviso-body .prosa ul{margin:0 0 14px 22px}
.aviso-body .prosa li{font-size:18.5px; line-height:1.62; color:#5B6570; margin-bottom:2px}
.aviso-body .prosa .fin{font-size:18.5px; line-height:1.62; color:#5B6570; margin-bottom:6px}
@media (max-width:640px){ .aviso-hero .h1{font-size:34px} }

/* =========================================================
   RESPONSIVE — PASADA FINAL
   ========================================================= */
@media (max-width:1180px){
  .footer .container{padding:230px 44px 80px}
  .footer__grid{grid-template-columns:1fr 1fr; gap:40px}
  .tec__grid{padding-left:0}
  .caso-full,.pasos-dis,.cta-box,.post-foto{max-width:100%}
  .hero-dis__grid > div:first-child{padding-left:0}
  .hero-dis .distri__art{margin:0 auto}
}
@media (max-width:980px){
  .hero__art{margin-right:0}
  .hero__art img{width:100%; max-width:520px}
  .hero__blob{width:78%; height:auto; aspect-ratio:1/.97; left:50%; transform:translateX(-50%); top:4%}
  .hero__blob-am{left:-140px; top:auto; bottom:-40px; width:340px; height:270px}
  .hero--img .hero__art{margin-right:0}
  .hero-ind__meta{width:100%; flex-wrap:wrap; gap:18px 0}
  .hero-ind__meta div{flex:1 1 45%; padding:0 18px}
  .familia__art img{max-height:360px}
  .familia__blob{width:78%; height:auto; aspect-ratio:1/.93}
  .marcas__row div{width:150px; height:74px}
  .rel__head .h2,.tec h2{font-size:32px}
  .duo__c h3{font-size:28px}
  .blob{display:none}
  .hero__blob,.hero__blob-am,.hero-caso__blob,.hero-blog__blob,.post-hero__blob,.aviso-hero__blob,
  .familia__blob,.blob-cta-dis,.caso-full__blob,.distri__blobs span{display:block}
}
@media (max-width:820px){
  .tabla{overflow-x:auto; -webkit-overflow-scrolling:touch}
  .tabla table{min-width:640px}
}
@media (max-width:640px){
  .footer .container{padding:190px 22px 60px}
  .footer__grid{grid-template-columns:1fr}
  .legal .container{padding:12px 18px; text-align:center; justify-content:center}
  .hero,.hero-dis{padding-top:44px}
  .hero-ind__in{padding:56px 0 110px}
  .hero-ind h1{font-size:31px}
  .hero-caso,.hero-blog,.post-hero,.aviso-hero{padding-top:128px}
  .post-hero .h1,.aviso-hero .h1{font-size:31px}
  .rel__head .h2{font-size:28px}
  .filtro{height:38px; padding:0 16px; font-size:14px}
  .caso-full h3{font-size:24px}
  .mets{grid-template-columns:1fr}
  .banda{padding:26px 20px}
  .banda h3{font-size:22px}
  .duo__c{padding:36px 22px; min-height:300px}
  .duo__c h3{font-size:24px}
  .tec{padding:64px 0}
  .tec h2{font-size:26px}
  .sistema__img{height:220px}
  .sistema__img img{max-height:220px}
  .prod__img{height:180px}
  .prod__img img{max-height:180px}
  .badge-iso{position:static; margin-top:16px; width:max-content}
  .porque__art{display:flex; flex-direction:column}
  .cta-box__b{transform:scale(.7); transform-origin:center}
  .hero__blob-am{width:240px; height:200px; left:-100px}
  .aviso-body .prosa p,.aviso-body .prosa li,.post-body .prosa p,.post-body .prosa li{font-size:16px}
  .post-body .prosa h2{font-size:24px}
}

/* Grid de 3 productos (sección "línea comercial" de Línea Industrial) */
.prods--3{grid-template-columns:repeat(3,1fr); max-width:1000px; margin:0 auto}
@media (max-width:1180px){ .prods--3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .prods--3{grid-template-columns:1fr} }

/* Sin desbordes horizontales en móvil */
@media (max-width:640px){
  .cta-row,.hero__cta,.hero-dis__cta,.hero-ind__cta{flex-wrap:wrap; justify-content:center}
  .hero__cta,.hero-dis__cta,.hero-ind__cta{justify-content:flex-start}
  .cta-row .btn,.hero__cta .btn{max-width:100%}
  .btn{white-space:normal; text-align:center; line-height:1.15}
}

/* Ritmo vertical afinado de Línea Comercial */
.p-comercial .s-fam{padding:106px 0}
.p-comercial .s-pasos{padding:106px 0}
.p-comercial .s-contacto{padding:106px 0}
.p-comercial .s-indetech{padding:120px 0 132px}


/* ===== Ajuste 10: el encabezado de familia va dentro de una tarjeta, ya no "vuela" ===== */
.familia__head{
  background:#fff; border-radius:16px; box-shadow:var(--sombra-sm);
  border-left:5px solid var(--azul-bright);
  padding:28px 30px 30px; margin-bottom:22px;
}
.familia__head .familia__t{margin-bottom:6px}
.familia__sub{
  font-family:var(--body); font-weight:400; font-size:22px; line-height:1.25;
  color:#3F4C59; margin-bottom:16px;
}
.familia__head .familia__d{margin-bottom:0}
@media (max-width:640px){ .familia__head{padding:22px 20px 24px} .familia__sub{font-size:19px} }

/* ===== Ajuste 5: la ola azul necesita curva de verdad ===== */
.ola__top,.ola__bot{height:126px; position:relative; z-index:1}
@media (max-width:980px){ .ola__top,.ola__bot{height:64px} }

/* ===== Ajuste 15: páginas sin CTA final (Distribuidores) ===== */
/* El margin-top negativo del footer sólo tiene sentido cuando hay un CTA navy encima */
.footer--sin-cta{margin-top:0}
.footer--sin-cta .container{padding-top:96px}

/* =========================================================
   NOSOTROS  (rediseño: cada sección con un propósito)
   ========================================================= */

/* --- 1. Banner de portada: foto real + overlay, con la franja de datos integrada --- */
.nos-banner{position:relative; margin-top:-143px; padding:143px 0 0; background:#06203C}
.nos-banner__bg{position:absolute; inset:0; z-index:0; overflow:hidden}
.nos-banner__bg img{width:100%; height:100%; object-fit:cover; object-position:center 55%}
.nos-banner__bg::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(102deg,rgba(4,20,40,.95) 0%,rgba(5,26,50,.88) 46%,rgba(6,32,60,.55) 78%,rgba(6,32,60,.35) 100%);
}
.nos-banner__in{position:relative; z-index:2; padding:104px 0 0}
.nos-banner .eyebrow{color:#7FD0FF}
.nos-banner h1{font-size:58px; line-height:1.1; color:#fff; margin-bottom:26px; max-width:820px}
.nos-banner h1 .thin{font-family:var(--body); font-weight:400}
.nos-banner__lead{font-size:20px; line-height:1.6; color:#D3E1EF; max-width:640px; margin-bottom:40px}
.nos-banner__lead strong{color:#fff; font-weight:700}
.nos-banner__cta{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:78px}

/* franja de datos, montada sobre el borde inferior del banner */
.nos-datos{
  position:relative; z-index:4; display:grid; grid-template-columns:repeat(4,1fr);
  background:#fff; border-radius:20px; box-shadow:0 18px 44px rgba(0,26,57,.16);
  margin-bottom:-72px;
}
.nos-dato{padding:30px 30px 32px; position:relative}
.nos-dato + .nos-dato::before{content:''; position:absolute; left:0; top:26px; bottom:26px; width:1px; background:var(--linea)}
.nos-dato svg{width:26px; height:26px; color:var(--azul-bright); margin-bottom:16px}
.nos-dato b{display:block; font-family:var(--display); font-size:48px; line-height:1; color:var(--navy); margin-bottom:10px}
.nos-dato b small{font-size:23px; font-family:var(--body); font-weight:700}
.nos-dato span{display:block; font-size:15.5px; color:var(--gris); line-height:1.4}

/* --- 2. Encabezado de sección con propósito (kicker + título + bajada) --- */
.sec-head{max-width:730px; margin:0 0 46px}
.sec-head--c{margin-left:auto; margin-right:auto; text-align:center}
.sec-head .h2{margin-bottom:18px}
.sec-head p{font-size:19px; line-height:1.6; color:var(--gris)}
.sec-head p strong{color:var(--navy); font-weight:700}

/* --- 3. Video con marco --- */
.nos-video{position:relative; z-index:2; border-radius:20px; overflow:hidden; box-shadow:0 22px 54px rgba(0,26,57,.18); aspect-ratio:16/9; background:#000}
.nos-video iframe{width:100%; height:100%; border:0; display:block}
.nos-video__pie{margin-top:18px; font-size:15.5px; color:var(--gris-2); text-align:center}

/* --- 4. Split texto + foto (historia / propósito) --- */
.nos-split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center}
.nos-split--rev .nos-split__art{order:-1}
.nos-split__art{position:relative; border-radius:20px; overflow:hidden; box-shadow:var(--sombra); aspect-ratio:4/3}
.nos-split__art img{width:100%; height:100%; object-fit:cover}
.nos-lista{margin-top:30px; display:grid; gap:18px}
.nos-lista li{display:flex; gap:14px; align-items:flex-start}
.nos-lista svg{width:22px; height:22px; flex:0 0 auto; color:var(--azul-bright); margin-top:3px}
.nos-lista b{display:block; font-family:var(--body); font-weight:700; font-size:17.5px; color:var(--navy); margin-bottom:3px}
.nos-lista span{font-size:16px; color:var(--gris); line-height:1.5}

/* --- 5. Galería uniforme: todas las tarjetas del mismo alto, sin huecos --- */
.galeria{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.galeria--2{grid-template-columns:repeat(2,1fr)}
.gal-card{
  position:relative; border-radius:16px; overflow:hidden; box-shadow:var(--sombra-sm);
  aspect-ratio:4/3; display:block;
}
.gal-card img{width:100%; height:100%; object-fit:cover; transition:transform .4s ease}
.gal-card:hover img{transform:scale(1.04)}
.gal-card__cap{
  position:absolute; left:0; right:0; bottom:0; z-index:2; padding:44px 20px 18px;
  background:linear-gradient(180deg,rgba(2,14,28,0) 0%,rgba(2,14,28,.82) 68%,rgba(2,14,28,.92) 100%);
}
.gal-card__cap b{display:block; font-family:var(--display); font-size:15px; letter-spacing:.05em; text-transform:uppercase; color:#fff; margin-bottom:4px}
.gal-card__cap span{font-size:14.5px; color:#C9D8E6; line-height:1.35}
.gal-card--alta{grid-row:span 2; aspect-ratio:auto}

/* --- 6. Principios --- */
.valores{display:grid; grid-template-columns:repeat(3,1fr); gap:26px}
.valor{background:#fff; border:1px solid #E6EEF7; border-radius:18px; padding:34px 30px 36px}
.valor__i{width:52px; height:52px; border-radius:14px; display:grid; place-items:center; color:#fff; margin-bottom:22px}
.valor__i svg{width:24px; height:24px}
.valor h3{font-family:var(--body); font-weight:700; font-size:20px; color:var(--navy); margin-bottom:12px}
.valor p{font-size:16.5px; color:var(--gris); line-height:1.55}

@media (max-width:980px){
  .nos-banner h1{font-size:38px}
  .nos-banner__in{padding:72px 0 0}
  .nos-banner__cta{margin-bottom:56px}
  .nos-datos{grid-template-columns:1fr 1fr; margin-bottom:-56px}
  .nos-dato:nth-child(3)::before{display:none}
  .nos-split,.valores{grid-template-columns:1fr; gap:34px}
  .nos-split--rev .nos-split__art{order:0}
  .galeria{grid-template-columns:1fr 1fr}
  .gal-card--alta{grid-row:auto; aspect-ratio:4/3}
}
@media (max-width:640px){
  .nos-banner h1{font-size:31px}
  .nos-banner__lead{font-size:17px}
  .nos-datos{grid-template-columns:1fr}
  .nos-dato::before{display:none !important}
  .galeria{grid-template-columns:1fr}
  .sec-head p{font-size:17px}
}

/* =========================================================
   LÍNEA VIAL
   ========================================================= */




/* Aquí quedaba un selector huérfano «.apl__c:hover» sin llaves, de un rediseño
   anterior. El navegador lo unía con la regla siguiente y la leía como
   «.apl__c:hover .bases», así que base agua / base solvente sólo se ponían en
   dos columnas al pasar el mouse por una tarjeta de aplicación: en escritorio
   salían apiladas a todo lo ancho. Las reglas buenas de hover están en .apl__c
   más abajo. 21-ago-2026. */






.bases{display:grid; grid-template-columns:1fr 1fr; gap:26px; position:relative; z-index:2}
.base{border-radius:18px; padding:38px 36px 40px; position:relative; overflow:hidden}
.base--agua{background:#E5F3FC; border:1.5px solid #B9DDF4}
.base--solv{background:#FDF3E0; border:1.5px solid #F0D9AA}
.base__t{display:flex; align-items:center; gap:14px; margin-bottom:16px}
.base__t .ico{margin:0; width:52px; height:52px}
.base__t .ico svg{width:26px; height:26px}
.base h3{font-family:var(--display); font-size:30px; color:var(--navy)}
.base > p{font-size:17.5px; line-height:1.55; color:#4A5560; margin-bottom:22px}
.base ul{display:grid; gap:12px}
.base li{display:flex; align-items:flex-start; gap:11px; font-size:16.5px; line-height:1.45; color:#3F4C59}
.base li svg{width:19px; height:19px; flex:0 0 auto; margin-top:2px}
.base--agua li svg{color:var(--azul-bright)}
.base--solv li svg{color:var(--amarillo)}

@media (max-width:980px){
  
  .bases{grid-template-columns:1fr}
}
@media (max-width:640px){  .base{padding:28px 22px 30px} .base h3{font-size:25px} }

/* Variante de familia con foto rectangular en vez de bote recortado */
.familia__art--foto{min-height:0}
.familia__art--foto .familia__blob{width:88%; height:86%; top:7%}
.familia__marco{
  position:relative; z-index:2; width:86%; border-radius:18px; overflow:hidden;
  box-shadow:var(--sombra); aspect-ratio:4/3;
}
.familia__marco img{width:100%; height:100%; object-fit:cover}
@media (max-width:640px){ .familia__marco{width:100%} }

/* =========================================================
   CONTACTO
   ========================================================= */
.hero-cont{position:relative; background:#F2FAFF; overflow:hidden; margin-top:-143px; padding:209px 0 78px}
.hero-cont__blob{position:absolute; z-index:0; top:-40px; right:-90px; width:440px; height:430px;
  background:#C6D6E7; border-radius:34% 66% 30% 70% / 30% 42% 58% 70%}
.hero-cont .container{position:relative; z-index:2}
.hero-cont .h1{margin-bottom:22px; max-width:840px}
.hero-cont .lead{max-width:640px; color:#4E5C69}

.cont-vias{display:grid; grid-template-columns:repeat(4,1fr); gap:26px; position:relative; z-index:2}
.cont-via{background:#fff; border:1px solid #E6EEF7; border-radius:16px; box-shadow:var(--sombra-sm); padding:30px 26px 32px}
.cont-via .ico{margin:0 0 18px}
.cont-via__t{font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:8px}
.cont-via__d{font-size:16.5px; color:var(--gris); line-height:1.5}
.cont-via__d a:hover{color:var(--azul-bright)}
.cont-via__nota{display:block; margin-top:10px; font-size:14.5px; color:var(--gris-2)}

.cont-grid{display:grid; grid-template-columns:1fr 1.05fr; gap:60px; align-items:start}
.cont-mapa{border-radius:20px; overflow:hidden; box-shadow:var(--sombra); aspect-ratio:4/3; background:#DCE7F2}
.cont-mapa img{width:100%; height:100%; object-fit:cover}
.horario{background:#fff; border:1px solid #E6EEF7; border-radius:16px; padding:26px 28px; margin-top:26px}
.horario__t{font-family:var(--display); font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--navy); margin-bottom:16px}
.horario li{display:flex; justify-content:space-between; gap:20px; padding:9px 0; border-bottom:1px solid var(--linea); font-size:16.5px; color:var(--gris)}
.horario li:last-child{border-bottom:0}
.horario li b{font-family:var(--body); font-weight:700; color:var(--navy)}

@media (max-width:1180px){ .cont-vias{grid-template-columns:1fr 1fr} }
@media (max-width:980px){ .cont-grid{grid-template-columns:1fr; gap:36px} }
@media (max-width:640px){ .cont-vias{grid-template-columns:1fr} .hero-cont{padding-top:128px} }

/* --- Tercera card de la bifurcación: Línea Vial --- */
.linea-card--vial .linea-card__bg::after{background:linear-gradient(180deg,rgba(28,18,0,.12) 0%,rgba(46,30,0,.80) 46%,rgba(38,25,0,.94) 78%,#231800 100%)}
.linea-card--vial .badge{background:var(--amarillo); color:#231800}
.linea-card--vial h3{color:#fff}
.linea-card--vial p{color:#F0E4CC}
.linea-card--vial .tags span{background:rgba(255,255,255,.14); color:#fff; border:1px solid rgba(255,255,255,.28)}
.btn--amarillo{background:var(--amarillo); color:#231800; box-shadow:0 6px 16px rgba(231,159,5,.30)}
.linea-card--vial .linea-card__bg img{object-fit:cover; object-position:center 62%}
@media (max-width:1180px){ .lineas{grid-template-columns:1fr} .linea-card{min-height:440px} }

/* --- #8: blobs de Distribuidores dentro de la paleta de marca --- */

/* =========================================================
   IMPACTO AMBIENTAL (Nosotros)
   ========================================================= */
.impacto{
  display:grid; grid-template-columns:1fr 1.08fr; gap:56px; align-items:center;
  background:#F4FAEE; border:1px solid #E1EED4; border-radius:24px; padding:52px 54px;
}
.impacto .h2{color:var(--navy)}
.impacto--foto .h2{font-size:38px}
.impacto--foto .impacto__txt{align-self:center}
.impacto--foto .impacto__nums{align-self:center}
.impacto__nums{display:grid; gap:26px}
.impacto__n{
  background:#fff; border:1px solid #E4EFD9; border-radius:16px; padding:26px 28px 28px;
  display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; column-gap:20px; align-items:center;
}
.impacto__n svg{grid-row:1/3; width:42px; height:42px; color:var(--verde)}
.impacto__n b{
  font-family:var(--display); font-size:48px; line-height:1; color:var(--verde); margin-bottom:10px;
}
.impacto__n b small{font-size:23px; font-family:var(--body); font-weight:700}
.impacto__n span{font-size:16.5px; line-height:1.45; color:var(--gris)}
.impacto__n span strong{color:var(--navy); font-weight:700}

@media (max-width:980px){
  .impacto{grid-template-columns:1fr; gap:32px; padding:40px 30px}
}
@media (max-width:640px){
  .impacto{padding:30px 20px}
  .impacto__n{grid-template-columns:1fr; row-gap:12px}
  .impacto__n svg{grid-row:auto}
  .impacto__n b{font-size:32px}
}

/* Impacto con foto: 3 columnas (foto · texto · números) */
.impacto--foto{grid-template-columns:0.78fr 1.06fr 1.12fr; gap:36px; padding:40px; align-items:stretch}
.impacto__foto{border-radius:18px; overflow:hidden; box-shadow:var(--sombra); min-height:100%}
.impacto__foto img{width:100%; height:100%; object-fit:cover}
@media (max-width:1180px){
  .impacto--foto{grid-template-columns:1fr 1fr; gap:32px}
  .impacto--foto .impacto__foto{grid-row:span 2; aspect-ratio:auto; min-height:100%}
}
@media (max-width:980px){
  .impacto--foto{grid-template-columns:1fr}
  .impacto--foto .impacto__foto{grid-row:auto; aspect-ratio:16/10; min-height:0}
}

/* --- Chips de familias en el hero (Arquitectónica) --- */
.hero__fams{display:flex; gap:10px; flex-wrap:wrap; margin:0 0 28px}
.hero__fams span{
  padding:9px 18px; border-radius:999px; background:#fff; box-shadow:var(--sombra-sm);
  font-family:var(--display); font-size:13px; letter-spacing:.09em; text-transform:uppercase; color:var(--azul);
}
@media (max-width:640px){ .hero__fams span{font-size:11.5px; padding:7px 13px} }

/* Botón dentro de los banners a sangre (Tráfico / Pisos) */
.duo__btn{align-self:flex-start; margin-top:28px; width:auto; flex:0 0 auto}

/* =========================================================
   LÍNEA VIAL — distintivo de base y tarjetas de aplicación
   ========================================================= */

/* Base agua / base solvente: sin foto, con distintivo tipográfico */
.base__i{
  width:112px; height:86px; border-radius:12px; display:grid; place-content:center; justify-items:center;
  gap:6px; border:1.5px solid; text-align:center;
}
.base__i svg{width:26px; height:26px}
.base__i b{font-family:var(--display); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase}
.base__i--sol{background:#FDF3E6; border-color:#F3D6A8; color:#B4720A}
.base__i--agua{background:#E6F4FD; border-color:#B4DDF5; color:#0A6FA8}

/* Tarjetas de aplicación: icono de color en vez de foto genérica */




@media (max-width:640px){
  
  
  .base__i{width:88px; height:74px}
}

/* =========================================================
   DISTRIBUIDORES — ventajas rediseñadas (mosaico con foto)
   ========================================================= */
.vent2{display:grid; grid-template-columns:repeat(2,1fr); gap:26px}
.vent2__c{
  background:#fff; border:1px solid #E6EEF7; border-radius:20px; overflow:hidden;
  box-shadow:var(--sombra-sm); display:flex; flex-direction:column;
}
.vent2__c--ancha{grid-column:1/-1; display:grid; grid-template-columns:0.85fr 1.15fr; align-items:stretch}
.vent2__c--rev .vent2__foto{order:2}
.vent2__foto{position:relative; overflow:hidden; min-height:300px}
.vent2__foto img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.vent2__b{padding:38px 40px; display:flex; flex-direction:column; justify-content:center}
.vent2__b .ico{margin:0 0 20px}
.vent2__c h3{font-family:var(--display); font-size:26px; color:var(--navy); margin-bottom:12px}
.vent2__c p{font-size:17px; line-height:1.55; color:var(--gris)}
.vent2__c p strong{color:var(--navy); font-weight:700}
.vent2__l{margin-top:20px; display:grid; gap:10px}
.vent2__l li{
  position:relative; padding-left:26px; font-size:15.5px; color:var(--gris); line-height:1.45;
}
.vent2__l li::before{
  content:''; position:absolute; left:0; top:7px; width:14px; height:14px; border-radius:50%;
  background:var(--azul-suave);
  box-shadow:inset 0 0 0 3px var(--azul-bright);
}
@media (max-width:980px){
  .vent2{grid-template-columns:1fr}
  .vent2__c--ancha{grid-template-columns:1fr}
  .vent2__c--rev .vent2__foto{order:0}
  .vent2__foto{min-height:230px}
}
@media (max-width:640px){ .vent2__b{padding:28px 22px 30px} .vent2__c h3{font-size:22px} }

/* Chips de familia con el color de cada línea */
.hero__fams span[data-f="bio"]{color:var(--verde); box-shadow:var(--sombra-sm), inset 0 0 0 1.5px #CFE3B4}
.hero__fams span[data-f="vini"]{color:var(--azul-bright); box-shadow:var(--sombra-sm), inset 0 0 0 1.5px #B7DFF6}
.hero__fams span[data-f="llanti"]{color:#B4720A; box-shadow:var(--sombra-sm), inset 0 0 0 1.5px #F3D6A8}
.linea-card--claro .tags span[data-f="bio"]{color:var(--verde)}
.linea-card--claro .tags span[data-f="vini"]{color:var(--azul-bright)}
.linea-card--claro .tags span[data-f="llanti"]{color:#B4720A}

/* El número de aplicación no repite la palabra en las 6 tarjetas */


/* =========================================================
   INDETECH — franja de tecnologías (hexágonos)
   ========================================================= */
.tecno{
  position:relative; z-index:3; background:#fff; border-radius:var(--r-card);
  box-shadow:var(--sombra); padding:44px 40px 46px; margin-top:-84px;
}
.tecno__t{
  text-align:center; max-width:720px; margin:0 auto 38px;
  font-size:17.5px; line-height:1.55; color:var(--gris);
}
.tecno__t strong{color:var(--navy); font-weight:700}
.tecno__g{display:grid; grid-template-columns:repeat(4,1fr); gap:30px}
.tecno__i{text-align:center; position:relative}
.tecno__i + .tecno__i::before{content:''; position:absolute; left:-15px; top:16px; bottom:10px; width:1px; background:var(--linea)}
.hexa{
  width:100px; height:110px; margin:0 auto 20px; display:grid; place-items:center;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--c); position:relative;
}
.hexa::after{
  content:''; position:absolute; inset:5px;
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:#fff;
}
.hexa svg{position:relative; z-index:2; width:46px; height:46px; color:var(--c)}
.tecno__n{
  font-family:var(--display); font-size:13.5px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--c); margin-bottom:8px; line-height:1.25;
}
.tecno__d{font-size:14.5px; line-height:1.45; color:var(--gris); max-width:210px; margin:0 auto 12px}
.tecno__s{
  display:inline-block; padding:5px 12px; border-radius:999px; background:#F1F6FB;
  font-family:var(--display); font-size:11.5px; letter-spacing:.07em; color:var(--navy);
}
@media (max-width:980px){
  .tecno{margin-top:-60px; padding:34px 26px 36px}
  .tecno__g{grid-template-columns:1fr 1fr; gap:32px 20px}
  .tecno__i:nth-child(3)::before{display:none}
}
@media (max-width:640px){
  .tecno__g{grid-template-columns:1fr}
  .tecno__i::before{display:none !important}
}

/* =========================================================
   LÍNEA VIAL — mosaico editorial (foto a sangre, sin card blanca)
   ========================================================= */
.apl{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}
.apl__c{
  position:relative; overflow:hidden; border-radius:18px; min-height:400px;
  display:flex; flex-direction:column; justify-content:flex-end;
  isolation:isolate;
}
.apl__c--ancha{grid-column:span 2}
.apl__img{position:absolute; inset:0; z-index:0}
.apl__img img{width:100%; height:100%; object-fit:cover; transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.apl__c::after{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(28deg,
    rgba(2,10,20,.94) 0%, rgba(2,12,24,.86) 26%,
    rgba(3,16,30,.60) 48%, rgba(4,20,38,.26) 68%, rgba(5,24,44,.05) 88%);
  transition:opacity .4s ease;
}
.apl__c:hover .apl__img img{transform:scale(1.06)}
.apl__c:hover::after{opacity:.88}
.apl__b{position:relative; z-index:2; padding:30px 30px 32px}
.apl__n{
  display:block; font-family:var(--display); font-size:44px; line-height:1; margin-bottom:10px;
  /* el color de marca aclarado: mantiene la identidad y se lee sobre foto oscura */
  color:color-mix(in srgb, var(--c, #028FE1) 42%, #fff);
  text-shadow:0 2px 12px rgba(0,8,18,.55);
}
.apl__c h3{font-family:var(--display); font-size:25px; color:#fff; line-height:1.14; margin-bottom:10px; text-shadow:0 2px 14px rgba(0,8,18,.5)}
.apl__c p{font-size:15px; line-height:1.5; color:#CFDBE7; max-width:420px}
.apl__c--ancha h3{font-size:30px}
.apl__c--ancha p{font-size:16px}
/* filete de color abajo, la única pista cromática */
.apl__c::before{
  content:''; position:absolute; left:0; right:0; bottom:0; height:4px; z-index:3;
  background:var(--c, var(--azul-bright));
}
@media (max-width:980px){
  .apl{grid-template-columns:1fr 1fr}
  .apl__c--ancha{grid-column:span 2}
  .apl__c{min-height:320px}
}
@media (max-width:640px){
  .apl{grid-template-columns:1fr; gap:14px}
  .apl__c--ancha{grid-column:auto}
  .apl__c{min-height:280px}
  .apl__b{padding:24px 22px 26px}
  .apl__n{font-size:36px}
  .apl__c h3,.apl__c--ancha h3{font-size:22px}
}

/* Recuadro de producto montado sobre la foto del hero (Línea Vial) */
.hero__foto{position:relative}
.hero--img .hero__foto > img{border-radius:var(--r-card); box-shadow:var(--sombra)}
.hero__prod{
  position:absolute; left:-30px; bottom:-34px; z-index:6; margin:0;
  width:242px; background:#fff; border-radius:16px; padding:12px 12px 14px;
  box-shadow:0 18px 44px rgba(0,26,57,.22);
}
.hero__prod img{width:100%; height:132px; object-fit:cover; border-radius:10px; margin-bottom:11px}
.hero__prod figcaption{padding:0 4px 2px}
.hero__prod b{
  display:block; font-family:var(--display); font-size:15px; letter-spacing:.03em;
  color:var(--navy); margin-bottom:3px;
}
.hero__prod span{font-size:13.5px; color:var(--gris)}
@media (max-width:980px){
  .hero__prod{left:12px; bottom:-24px; width:200px}
  .hero__prod img{height:112px}
}
@media (max-width:640px){ .hero__prod{position:static; width:100%; margin-top:16px; box-shadow:var(--sombra-sm)} }