:root{
  --bg:#0a0a0a;
  --card:#1e1e1e;
  --border:#2a2a2a;
  --accent:#f5c400;
  --muted:#9a9a9a;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{
  background:var(--bg);
  color:#fff;
  font-family:'Barlow', sans-serif;
  overflow-x:hidden;
}
h1,h2,h3,.display{
  font-family:'Barlow Condensed', sans-serif;
  font-weight:900;
  text-transform:uppercase;
  line-height:0.95;
  letter-spacing:-0.01em;
}
.eyebrow{
  font-family:'Barlow', sans-serif;
  font-weight:700;
  letter-spacing:0.15em;
  text-transform:uppercase;
  font-size:0.75rem;
  color:var(--accent);
}
a{color:inherit; text-decoration:none;}
.container{max-width:1200px; margin:0 auto; padding:0 24px;}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Barlow', sans-serif; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em; font-size:0.85rem;
  padding:16px 28px; border-radius:0; cursor:pointer; border:2px solid transparent;
  transition:transform .15s ease, background .15s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-solid{background:var(--accent); color:#0a0a0a;}
.btn-outline{background:transparent; color:#fff; border-color:#fff;}
.btn-outline:hover{background:#fff; color:#0a0a0a;}

/* HEADER */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(10,10,10,0.85); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.logo{font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:1.6rem; color:var(--accent); letter-spacing:0.02em;}
.logo small{display:block; font-family:'Barlow',sans-serif; font-weight:600; font-size:0.6rem; letter-spacing:0.2em; color:var(--muted);}
nav ul{display:flex; gap:32px; list-style:none; align-items:center;}
nav a{font-weight:600; font-size:0.85rem; letter-spacing:0.03em; text-transform:uppercase; color:#e5e5e5;}
nav a:hover, nav a.active{color:var(--accent);}
.nav-right{display:flex; align-items:center; gap:24px;}
.burger{display:none; flex-direction:column; gap:5px; cursor:pointer; padding:4px;}
.burger span{width:24px; height:2px; background:#fff; transition:transform .2s ease, opacity .2s ease;}
.burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.burger.open span:nth-child(2){opacity:0;}
.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.has-sub{position:relative;}
.has-sub::after{
  content:''; position:absolute; top:100%; left:0; right:0; height:12px;
}
.submenu{
  display:none; position:absolute; top:100%; left:0; background:#141414;
  border:1px solid var(--border); min-width:180px; padding:8px 0; margin-top:12px;
}
.has-sub:hover .submenu{display:block;}
.submenu a{display:block; padding:10px 18px;}
.submenu a:hover{background:#1e1e1e;}

/* HERO (home) */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:center;
  background:
    linear-gradient(90deg, rgba(10,10,10,0.97) 15%, rgba(10,10,10,0.55) 60%, rgba(10,10,10,0.75) 100%),
    url('https://images.unsplash.com/photo-1631364918346-2e38c6b13956?auto=format&fit=crop&w=1800&q=70') center/cover;
  padding:120px 0 60px;
}
.badge{
  display:inline-flex; align-items:center; gap:8px;
  border:1px solid var(--accent); color:var(--accent);
  font-weight:700; font-size:0.75rem; letter-spacing:0.1em;
  padding:8px 16px; margin-bottom:28px;
}
.badge::before{content:''; width:6px; height:6px; background:var(--accent); border-radius:50%;}
.hero h1{font-size:clamp(3rem, 7vw, 6rem); max-width:900px;}
.hero p.sub{max-width:560px; color:#d4d4d4; font-size:1.05rem; margin:24px 0 36px; line-height:1.6;}
.sub a{color:var(--accent); font-weight:600;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap; margin-bottom:56px;}
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:2px; max-width:520px; background:var(--border);}
.stat{background:rgba(10,10,10,0.8); padding:22px 24px;}
.stat.jcb{border:1px solid var(--accent);}
.stat b{font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.2rem; color:var(--accent); display:block; line-height:1;}
.stat span{font-size:0.8rem; color:#ccc;}

/* PAGE HERO (subpages) */
.page-hero{
  position:relative; padding:150px 0 70px;
  background-size:cover; background-position:center;
  border-bottom:1px solid var(--border);
}
.page-hero::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(10,10,10,0.96) 20%, rgba(10,10,10,0.6) 100%);
}
.page-hero .container{position:relative; z-index:1;}
.page-hero--jcb{background-image:url('https://images.unsplash.com/photo-1580901369227-308f6f40bdeb?auto=format&fit=crop&w=1800&q=60');}
.page-hero--catalizadores{background-image:url('https://images.unsplash.com/photo-1768929571671-4e58e2d9e72f?auto=format&fit=crop&w=1800&q=60');}
.page-hero--warehouse{background-image:url('https://images.unsplash.com/photo-1689942010216-dc412bb1e7a9?auto=format&fit=crop&w=1800&q=60');}
.page-hero--clientes{background-image:url('https://images.unsplash.com/photo-1521791136064-7986c2920216?auto=format&fit=crop&w=1800&q=60');}
.page-hero--blog{background-image:url('https://images.unsplash.com/photo-1530124566582-a618bc2615dc?auto=format&fit=crop&w=1800&q=60');}

/* Mid-page breather band: breaks up long stretches of solid black with a photo */
.breather{
  position:relative; padding:100px 0; text-align:center;
  background:
    linear-gradient(rgba(10,10,10,0.82), rgba(10,10,10,0.88)),
    url('https://images.unsplash.com/photo-1629807473015-41699c4471b5?auto=format&fit=crop&w=1800&q=60') center 30%/cover;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.breather .eyebrow{color:var(--accent);}
.breather h2{font-size:clamp(2rem,5vw,3.4rem); margin:12px 0 20px; max-width:700px; margin-left:auto; margin-right:auto;}
.breather p{color:#d9d9d9; max-width:560px; margin:0 auto 32px; font-size:1.05rem; line-height:1.6;}
.page-hero h1{font-size:clamp(2.6rem,6vw,4.5rem);}
.page-hero p{color:#d4d4d4; max-width:560px; margin-top:16px; font-size:1rem; line-height:1.6;}
.breadcrumb{color:var(--muted); font-size:0.8rem; margin-top:14px;}
.breadcrumb a{color:var(--accent);}

/* MARQUEE */
.marquee-wrap{
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  background:#0f0f0f; padding:16px 0; overflow:hidden; white-space:nowrap;
}
.marquee{display:inline-flex; animation:scroll 32s linear infinite;}
.marquee span{
  font-family:'Barlow Condensed',sans-serif; font-weight:700; letter-spacing:0.08em;
  font-size:1rem; color:#e5e5e5; padding:0 10px; display:inline-flex; align-items:center; gap:10px;
}
.marquee span::after{content:'●'; color:var(--accent); font-size:0.5rem; margin-left:10px;}
@keyframes scroll{ from{transform:translateX(0);} to{transform:translateX(-50%);} }

/* SECTION generic */
section{padding:110px 0;}
.section-head{margin-bottom:56px;}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem); margin-top:8px;}

/* LINEAS (home) */
.lineas-grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border);}
.linea-card{background:#0f0f0f; padding:48px; position:relative; overflow:hidden;}
.linea-num{
  position:absolute; top:20px; right:32px; font-family:'Barlow Condensed',sans-serif;
  font-weight:900; font-size:6rem; color:rgba(255,255,255,0.04); line-height:1;
}
.icon-box{width:56px; height:56px; background:var(--accent); display:flex; align-items:center; justify-content:center; margin-bottom:24px;}
.icon-box svg{width:28px; height:28px; stroke:#0a0a0a; fill:none;}
.linea-card h3{font-size:1.9rem; margin-bottom:14px;}
.linea-card p{color:#c9c9c9; line-height:1.6; margin-bottom:24px; max-width:480px;}
.tags{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:28px;}
.tag{border:1px solid var(--border); padding:8px 14px; font-size:0.72rem; font-weight:700; letter-spacing:0.05em; text-transform:uppercase; color:#ddd;}
.ver-catalogo{color:var(--accent); font-weight:700; text-transform:uppercase; font-size:0.85rem; letter-spacing:0.05em;}

/* SERVICIOS BAR */
.servicios{display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--border); border-bottom:1px solid var(--border);}
.servicio{padding:40px 24px; text-align:center; border-right:1px solid var(--border);}
.servicio:last-child{border-right:none;}
.servicio .emoji{margin-bottom:12px; display:flex; justify-content:center;}
.servicio .emoji svg{width:30px; height:30px; stroke:var(--accent); fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.servicio h4{font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.1rem;}
.servicio p{color:var(--muted); font-size:0.82rem; margin-top:4px;}

/* MARCAS */
.marcas-wrap{text-align:center; padding:90px 0;}
.marcas-grid{display:grid; grid-template-columns:repeat(8,1fr); border:1px solid var(--border); margin-top:40px;}
.marca{padding:28px 8px; text-align:center; border-right:1px solid var(--border); font-weight:700; letter-spacing:0.05em; font-size:0.85rem; color:#aaa;}
.marca:last-child{border-right:none;}

/* BANNER BROU */
.banner-brou{
  background:#141414; border-top:1px solid var(--border); border-bottom:1px solid var(--border);
  padding:36px 0;
}
.banner-brou .container{display:flex; align-items:center; justify-content:center; gap:20px; flex-wrap:wrap; text-align:center;}
.banner-brou b{color:var(--accent); font-family:'Barlow Condensed',sans-serif; font-size:2.4rem; font-weight:900;}
.divider-v{width:1px; height:28px; background:var(--border);}

/* QUIENES SOMOS (home mini + empresa page) */
.somos-grid{display:grid; grid-template-columns:1.2fr 1fr; gap:64px; align-items:start;}
.somos-grid h2{font-size:clamp(2rem,4.5vw,3.2rem); margin:10px 0 24px;}
.somos-grid > div:first-child p{color:#c9c9c9; line-height:1.7; margin-bottom:32px;}
.bullet{display:flex; gap:16px; margin-bottom:24px;}
.bullet .dot{width:10px; height:10px; border-radius:50%; background:var(--accent); margin-top:8px; flex-shrink:0;}
.bullet h4{font-family:'Barlow Condensed',sans-serif; font-weight:800; text-transform:uppercase; font-size:1.05rem;}
.bullet p{color:var(--muted); font-size:0.9rem; margin-top:2px;}
.info-card{border:1px solid var(--border); padding:24px; margin-bottom:1px;}
.info-card .eyebrow{margin-bottom:8px; display:block;}
.info-card p{font-weight:600; font-size:1.05rem;}

/* CTA WHATSAPP */
.cta-yellow{background:var(--accent); color:#0a0a0a; text-align:center; padding:90px 0;}
.cta-yellow h2{color:#0a0a0a; font-size:clamp(2.2rem,6vw,4rem); margin-bottom:16px;}
.cta-yellow p{max-width:520px; margin:0 auto 32px; font-weight:600;}
.cta-yellow .btn{background:#0a0a0a; color:#fff;}

/* CONTACTO */
.contacto-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:64px;}
.contacto-grid h2{font-size:clamp(2.2rem,5vw,3.6rem); margin:10px 0 20px;}
.contact-item{border-left:2px solid var(--accent); padding-left:16px; margin-bottom:24px;}
.contact-item .eyebrow{display:block; margin-bottom:4px; color:var(--muted); letter-spacing:0.1em;}
.contact-item p{font-weight:700; font-size:1.1rem;}
.social-row{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.chip{border:1px solid var(--border); padding:12px 20px; font-weight:700; font-size:0.85rem; display:flex; align-items:center; gap:8px;}
.form-box{background:var(--card); border:1px solid var(--border); padding:40px;}
label{display:block; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#ccc; margin-bottom:8px;}
input, textarea{
  width:100%; background:#141414; border:1px solid var(--border); color:#fff;
  padding:14px; font-family:'Barlow',sans-serif; margin-bottom:20px; resize:vertical;
}
input:focus, textarea:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.form-box .btn{width:100%; justify-content:center;}

/* PRODUCT GRID (catalog pages) */
.product-toolbar{display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:40px;}
.product-count{color:var(--muted); font-size:0.9rem;}
.product-search{background:#141414; border:1px solid var(--border); color:#fff; padding:12px 16px; min-width:260px; font-family:'Barlow',sans-serif;}
.product-search:focus{outline:2px solid var(--accent); border-color:var(--accent);}
.product-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:1px; background:var(--border); border:1px solid var(--border);}
.product-card{background:#0f0f0f; padding:0; display:flex; flex-direction:column;}
.product-img{width:100%; aspect-ratio:1/1; background:#161616; display:flex; align-items:center; justify-content:center; overflow:hidden; border-bottom:1px solid var(--border);}
.product-img img{width:100%; height:100%; object-fit:contain; padding:14px;}
.product-body{padding:20px; display:flex; flex-direction:column; flex:1;}
.product-body h3{font-family:'Barlow',sans-serif; text-transform:none; font-weight:700; font-size:0.95rem; line-height:1.3; margin-bottom:8px; letter-spacing:0; min-height:2.6em;}
.product-body p{color:var(--muted); font-size:0.82rem; line-height:1.5; margin-bottom:16px; flex:1;}
.product-cta{color:var(--accent); font-weight:700; text-transform:uppercase; font-size:0.75rem; letter-spacing:0.05em; display:inline-flex; align-items:center; gap:6px;}
.no-results{grid-column:1/-1; text-align:center; padding:60px 20px; color:var(--muted); background:#0a0a0a;}

/* EMPRESA page */
.founder-row{display:flex; gap:32px; align-items:center; margin:36px 0; flex-wrap:wrap;}
.founder-photo{width:96px; height:96px; border-radius:50%; object-fit:cover; border:2px solid var(--accent); flex-shrink:0;}
.valores-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); margin-top:56px;}
.valor-card{background:#0f0f0f; padding:36px;}
.valor-card .num{font-family:'Barlow Condensed',sans-serif; font-weight:900; font-size:2.2rem; color:var(--accent); display:block; margin-bottom:12px;}
.valor-card h4{font-size:1.3rem; margin-bottom:12px;}
.valor-card p{color:#c9c9c9; font-size:0.9rem; line-height:1.6;}

/* CLIENTES page */
.clientes-grid{display:grid; grid-template-columns:repeat(3, 1fr); gap:1px; background:var(--border); border:1px solid var(--border);}
.cliente-card{background:#0f0f0f; padding:32px; text-align:center;}
.cliente-photo{width:100%; height:140px; object-fit:cover; margin-bottom:20px; filter:grayscale(40%);}
.cliente-card h4{font-size:1.15rem; margin-bottom:6px;}
.cliente-card .role{color:var(--accent); font-size:0.78rem; font-weight:700; text-transform:uppercase; letter-spacing:0.05em; margin-bottom:10px;}
.cliente-card .loc{color:var(--muted); font-size:0.85rem;}
.cliente-card .phone{color:#ddd; font-size:0.85rem; margin-top:4px; font-weight:600;}

/* FOOTER */
footer{border-top:1px solid var(--border); padding:56px 0 28px;}
.footer-top{display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:24px; margin-bottom:40px;}
.footer-top nav ul{gap:24px;}
.footer-bottom{display:flex; justify-content:space-between; padding-top:24px; border-top:1px solid var(--border); font-size:0.8rem; color:var(--muted); flex-wrap:wrap; gap:12px;}
.footer-bottom b{color:var(--accent);}

.whatsapp-fab{
  position:fixed; bottom:24px; right:24px; width:56px; height:56px; background:#25D366;
  border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(0,0,0,0.4); z-index:60;
}
.whatsapp-fab svg{width:30px; height:30px; fill:#fff;}

@media (max-width: 860px){
  nav ul, .nav-right .btn{display:none;}
  .burger{display:flex;}
  #mainNavList.open{
    display:flex; flex-direction:column; gap:0;
    position:absolute; top:76px; left:0; right:0;
    background:#0a0a0a; border-bottom:1px solid var(--border);
    padding:8px 24px 20px; z-index:99; max-height:80vh; overflow-y:auto;
  }
  #mainNavList.open li{list-style:none; border-bottom:1px solid var(--border);}
  #mainNavList.open li:last-child{border-bottom:none;}
  #mainNavList.open a{display:block; padding:16px 0;}
  #mainNavList.open .has-sub::after{display:none;}
  #mainNavList.open .submenu{
    display:block; position:static; border:none; background:transparent;
    padding:0 0 10px 16px; margin-top:0;
  }
  #mainNavList.open .submenu a{padding:10px 0;}
  .lineas-grid, .somos-grid, .contacto-grid, .form-row{grid-template-columns:1fr;}
  .servicios{grid-template-columns:repeat(2,1fr);}
  .servicio:nth-child(2){border-right:none;}
  .marcas-grid{grid-template-columns:repeat(4,1fr);}
  .stats{grid-template-columns:1fr 1fr;}
  .valores-grid, .clientes-grid{grid-template-columns:1fr;}
  .product-toolbar{flex-direction:column; align-items:stretch;}
  .product-search{min-width:0; width:100%;}
}