:root{
  --navy:#0B3954; --navy-deep:#082B40; --agua:#1497C9; --agua-texto:#3FB0DE; --ambar:#E8951C;
  --fg:#FFFFFF; --muted:#B9CCD9; --line:rgba(255,255,255,.18); --card:rgba(255,255,255,.06);
  --display:"Poppins","Segoe UI",system-ui,sans-serif; --body:"Source Sans 3","Segoe UI",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{min-height:100%}
body{margin:0; background:var(--navy); color:var(--fg); font-family:var(--body); font-size:1.0625rem; line-height:1.6;
  display:flex; flex-direction:column; min-height:100vh}
a{color:inherit}
:focus-visible{outline:3px solid var(--agua); outline-offset:3px; border-radius:6px}
.skip{position:absolute; left:-9999px; top:8px; background:var(--fg); color:var(--navy); padding:8px 14px; border-radius:8px; z-index:9}
.skip:focus{left:8px}
.wrap{width:100%; max-width:1080px; margin-inline:auto; padding-inline:clamp(16px,4vw,32px)}

/* header */
.bar{display:flex; justify-content:space-between; align-items:center; gap:12px; padding-block:18px; flex-wrap:wrap}
.brand{display:block; width:132px; line-height:0}
.brand svg{width:100%; height:auto}
.navs{display:flex; align-items:center; gap:8px; margin-left:auto}
nav{display:flex; gap:2px; background:var(--card); border:1px solid var(--line); border-radius:999px; padding:4px}
nav a{font:600 .92rem var(--display); color:var(--muted); text-decoration:none; border-radius:999px; padding:10px 16px; min-height:44px; display:inline-flex; align-items:center}
nav a:hover{color:var(--fg)}
nav a[aria-current="page"]{background:var(--fg); color:var(--navy)}
.lang{font:600 .85rem var(--display); letter-spacing:.06em; color:var(--fg); text-decoration:none; border:1.5px solid var(--line); border-radius:999px; min-width:48px; min-height:44px; display:inline-flex; align-items:center; justify-content:center}
.lang:hover{border-color:var(--agua)}

main{flex:1}
main.center{display:flex; align-items:center}
main .wrap{padding-block:clamp(28px,5vw,64px)}

/* home */
.home{display:flex; flex-direction:column; align-items:center; text-align:center; gap:clamp(22px,4vw,34px)}
.home .logo{width:min(100%,520px)}
.home .logo svg{width:100%; height:auto; display:block}
.home h1{font:600 clamp(1.25rem,2.6vw,1.75rem)/1.4 var(--display); margin:0; max-width:34ch; text-wrap:balance}
.home h1 span, .hero .kicker{color:var(--agua-texto)}
.home h1 b{color:var(--ambar); font-weight:600}
.intro{margin:0; max-width:60ch; color:var(--muted); text-wrap:pretty}
.ctas{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{display:inline-flex; align-items:center; font:600 1rem var(--display); text-decoration:none; border-radius:999px; padding:12px 26px; min-height:44px; background:var(--ambar); color:#1B1405; border:0; cursor:pointer}
.btn.ghost{background:none; color:var(--fg); border:1.5px solid var(--line)}
.btn.ghost:hover{border-color:var(--agua)}

/* solutions */
.hero{max-width:760px}
.kicker{font:600 .8rem var(--display); letter-spacing:.14em; text-transform:uppercase; margin:0 0 6px}
.hero h1{font:700 clamp(2rem,4.5vw,2.9rem)/1.15 var(--display); margin:0 0 14px}
.lead{color:var(--muted); margin:0; text-wrap:pretty}
.grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:16px; margin-top:clamp(28px,4vw,44px)}
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:22px 22px 18px}
.card .ico{width:34px; height:34px; color:var(--agua-texto)}
.card h3{font:600 1.15rem/1.3 var(--display); margin:12px 0 10px}
.card dl{margin:0}
.card dt{font:600 .74rem var(--display); letter-spacing:.12em; text-transform:uppercase; color:var(--ambar); margin-top:10px}
.card dd{margin:2px 0 0; color:var(--muted); font-size:1rem}
.card dd:last-child{color:var(--fg)}
.split{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr)); gap:clamp(24px,4vw,48px); margin-top:clamp(44px,6vw,72px); padding-top:clamp(32px,4vw,48px); border-top:1px solid var(--line)}
.split h2{font:700 clamp(1.4rem,2.6vw,1.75rem) var(--display); margin:0 0 10px}
.ticks,.steps{list-style:none; margin:18px 0 0; padding:0; display:grid; gap:14px}
.ticks li,.steps li{display:grid; gap:2px; padding-left:34px; position:relative}
.ticks li strong,.steps li strong{font:600 1rem var(--display)}
.ticks li span,.steps li span{color:var(--muted); font-size:1rem}
.ticks li::before{content:""; position:absolute; left:4px; top:7px; width:14px; height:8px; border-left:2.5px solid var(--agua-texto); border-bottom:2.5px solid var(--agua-texto); transform:rotate(-45deg)}
.steps{counter-reset:s}
.steps li{counter-increment:s}
.steps li::before{content:counter(s); position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--ambar); color:#1B1405; font:700 .8rem/24px var(--display); text-align:center}
.closing{margin-top:clamp(44px,6vw,72px); background:var(--navy-deep); border:1px solid var(--line); border-radius:18px; padding:clamp(22px,4vw,34px); display:flex; gap:18px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.closing p{margin:0; font:600 clamp(1.05rem,2vw,1.25rem)/1.4 var(--display); max-width:40ch}

/* contact */
.contact{max-width:560px; width:100%; margin-inline:auto; display:grid; gap:14px}
.contact h1{font:700 clamp(1.6rem,3vw,2.1rem) var(--display); margin:0 0 8px}
.contact p{margin:10px 0 0}
.row{display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px 20px}
.row small{display:block; font-size:.8rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.row strong{font:600 1.15rem var(--display); user-select:all; overflow-wrap:anywhere}
.copy{font:600 .9rem var(--display); background:none; color:var(--fg); border:1.5px solid var(--line); border-radius:999px; padding:8px 16px; min-height:44px; cursor:pointer}
.copy:hover{border-color:var(--agua)}

footer{border-top:1px solid var(--line); color:var(--muted); font-size:.88rem}
footer .wrap{padding-block:16px; text-align:center}
footer p{margin:2px 0}

@media (max-width:560px){
  .bar{justify-content:center}
  .brand{width:118px}
  .navs{margin-left:0; width:100%; justify-content:center}
  nav a{padding:10px 12px}
  .p-home .bar .navs{width:auto}
}
@media (prefers-reduced-motion:no-preference){
  .home .ring{transform-origin:100px 108px; animation:spin 1.4s cubic-bezier(.3,.7,.2,1) 1}
  @keyframes spin{from{transform:rotate(-120deg)}to{transform:rotate(0)}}
}

/* product lines */
.subnav{display:flex; gap:8px; flex-wrap:wrap; margin-top:24px; background:none; border:0; padding:0}
.subnav a{font:600 .9rem var(--display); color:var(--fg); text-decoration:none; border:1.5px solid var(--line); border-radius:999px; padding:10px 18px; min-height:44px}
.subnav a:hover{border-color:var(--agua)}
h2.line{font:700 clamp(1.4rem,2.6vw,1.8rem) var(--display); margin:clamp(40px,5vw,60px) 0 0; padding-top:24px; border-top:1px solid var(--line); scroll-margin-top:16px}
h2.line span{color:var(--ambar); margin-right:8px}
.lead.sub{margin-top:6px}
h2.line + .grid, .lead.sub + .grid{margin-top:20px}

/* imagery: tenues y difuminadas */
.p-home main, .p-con main{position:relative; isolation:isolate}
.p-home main::before, .p-con main::before{content:""; position:absolute; inset:0; z-index:-1;
  background:url(/assets/img/home.jpg) center/cover no-repeat; opacity:.28;
  -webkit-mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%); mask-image:radial-gradient(ellipse at center, #000 30%, transparent 78%)}
.p-con main::before{opacity:.16}
.p-sol .hero{position:relative; isolation:isolate}
.p-sol .hero::before{content:""; position:absolute; z-index:-1; inset:-40px -50vw -40px 30%;
  background:url(/assets/img/home.jpg) center/cover no-repeat; opacity:.22;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent); mask-image:linear-gradient(90deg, transparent, #000 35%, #000 70%, transparent)}
.band{position:relative; isolation:isolate; overflow:hidden; margin-top:clamp(44px,6vw,72px); border-radius:18px; border:1px solid var(--line);
  padding:clamp(28px,5vw,52px) clamp(20px,4vw,36px); scroll-margin-top:16px; background:var(--navy-deep)}
.band::before{content:""; position:absolute; inset:0; z-index:-1; background-position:center; background-size:cover; opacity:.45}
.band::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,43,64,.96) 0%, rgba(8,43,64,.75) 45%, rgba(8,43,64,.25) 100%)}
.band-quimica::before{background-image:url(/assets/img/quimica.jpg)}
.band-equipos::before{background-image:url(/assets/img/equipos.jpg)}
.band-consumibles::before{background-image:url(/assets/img/consumibles.jpg)}
.band h2{font:700 clamp(1.4rem,2.8vw,1.9rem) var(--display); margin:0}
.band h2 span{color:var(--ambar); margin-right:8px}
.band p{margin:6px 0 0; color:var(--muted); max-width:56ch}
.band + .grid{margin-top:16px}
.p-sol main{overflow-x:clip}