:root{
 --yellow:#f4c400;
 --blue:#07568f;
 --blue2:#064777;
 --orange:#ef6c00;
 --green:#43a047;
 --red:#e53935;
 --ink:#18232b;
 --soft:#f4f4f4;
 --line:#ddd;
 --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
 margin:0;
 font-family:Arial,Helvetica,sans-serif;
 color:var(--ink);
 line-height:1.55;
 background:#fff;
}
img{max-width:100%;height:auto}
a{color:inherit}
.container{width:min(calc(100% - 36px),var(--max));margin:auto}

/* HEADER AMARILLO */
.site-header{
 position:sticky;top:0;z-index:100;
 background:
  radial-gradient(circle at 20% 30%,rgba(255,255,255,.14) 0 1px,transparent 2px),
  radial-gradient(circle at 70% 60%,rgba(0,0,0,.07) 0 1px,transparent 2px),
  var(--yellow);
 background-size:9px 9px,13px 13px;
 box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.nav{
 min-height:86px;
 display:flex;align-items:center;justify-content:space-between;gap:25px;
}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{width:185px;max-height:70px;object-fit:contain}
nav{display:flex;align-items:center;gap:27px}
nav a{text-decoration:none;font-weight:800;font-size:.9rem}
nav a:hover{color:var(--blue)}
.catalog-nav{
 background:var(--blue);color:#fff!important;
 padding:9px 14px;border-radius:4px
}
.menu-toggle{display:none;border:0;background:none;font-size:1.7rem}

/* HERO / SLIDER */
.hero{
 position:relative;
 min-height:510px;
 display:flex;align-items:center;
 overflow:hidden;
 color:#fff;
 background:#15232c;
}
.hero::after{
 content:"";
 position:absolute;inset:0;
 background:linear-gradient(90deg,rgba(5,22,34,.88) 0%,rgba(5,22,34,.60) 48%,rgba(5,22,34,.18) 100%);
 z-index:1;
}
.hero-slide{
 position:absolute;inset:0;
 width:100%;height:100%;
 object-fit:cover;
 opacity:0;
 transition:opacity 1s ease;
}
.hero-slide.active{opacity:1}
.hero-content{position:relative;z-index:2;padding:80px 0}
.hero h1{
 font-size:clamp(2.7rem,5vw,4.8rem);
 line-height:1.02;
 max-width:750px;
 margin:8px 0 18px;
 text-shadow:0 2px 8px rgba(0,0,0,.35)
}
.hero .lead{font-size:1.2rem;max-width:680px}
.eyebrow{
 color:var(--orange);
 text-transform:uppercase;
 font-weight:900;
 letter-spacing:.12em;
 font-size:.78rem
}
.hero .eyebrow{color:var(--yellow)}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.button{
 display:inline-block;
 background:var(--yellow);
 color:#151515;
 padding:13px 21px;
 border-radius:4px;
 text-decoration:none;
 font-weight:900;
 border:0
}
.button:hover{filter:brightness(.94)}
.button-secondary{
 background:transparent;color:#fff;
 border:2px solid #fff
}

/* NOSOTROS AZUL */
.section{padding:78px 0}
#nosotros{
 background:linear-gradient(135deg,var(--blue),var(--blue2));
 color:#fff;
}
#nosotros .eyebrow{color:var(--yellow)}
#nosotros h2{text-align:center;margin-top:4px}
.about-grid{
 display:grid;grid-template-columns:1fr 1fr;gap:26px;
 margin-top:35px
}
.about-grid article{
 background:rgba(255,255,255,.10);
 border:1px solid rgba(255,255,255,.2);
 border-radius:8px;
 padding:25px
}
.about-grid h3{color:var(--yellow);margin-top:0}

/* VALORES */
.values{
 display:flex;
 justify-content:center;
 align-items:center;
 flex-wrap:wrap;
 gap:12px;
 margin-top:35px;
 text-align:center
}
.values strong{
 width:100%;
 font-size:1.1rem;
 margin-bottom:3px
}
.values span{
 min-width:115px;
 padding:10px 16px;
 border-radius:5px;
 color:#fff;
 font-weight:900
}
.values span:nth-of-type(1){background:#f9a825;color:#222}
.values span:nth-of-type(2){background:#1e88e5}
.values span:nth-of-type(3){background:#ef6c00}
.values span:nth-of-type(4){background:#43a047}
.values span:nth-of-type(5){background:#e53935}

/* PRODUCTOS */
.section-alt{background:#f4f4f4}
#productos h2,#marcas h2{text-align:center}
#productos>.container>.eyebrow,
#marcas>.container>.eyebrow{text-align:center}
.products-grid{
 display:grid;
 grid-template-columns:repeat(4,1fr);
 gap:18px
}
.product-card{
 background:#fff;
 border:1px solid #ddd;
 border-radius:6px;
 overflow:hidden;
 text-decoration:none;
 box-shadow:0 3px 10px rgba(0,0,0,.05);
 transition:.2s
}
.product-card:hover{transform:translateY(-4px)}
.product-image{
 height:190px;
 display:flex;align-items:center;justify-content:center;
 padding:12px;background:#fff
}
.product-image img{width:100%;height:100%;object-fit:contain}
.product-card h3{
 font-size:1rem;
 text-align:center;
 margin:14px 10px 4px
}
.product-card span{
 display:block;text-align:center;
 color:var(--blue);
 font-size:.86rem;font-weight:800;
 margin-bottom:15px
}

/* MARCAS */
.brands-grid{
 display:grid;grid-template-columns:repeat(4,1fr);gap:20px
}
.brand-card{
 min-height:150px;
 display:flex;flex-direction:column;
 align-items:center;justify-content:center;
 gap:13px;
 padding:20px;
 border:1px solid #ddd;
 border-radius:6px;
 text-decoration:none;
 background:#fff
}
.brand-card img{max-height:72px;object-fit:contain}
.brand-card span{font-weight:900}

/* CATALOGO */
.catalog-section{
 background:var(--yellow);
 padding:55px 0
}
.catalog-box{
 display:flex;align-items:center;
 justify-content:space-between;gap:30px
}
.catalog-box .eyebrow{color:var(--blue)}
.catalog-box h2{margin:3px 0}
.catalog-box .button{
 background:var(--blue);color:#fff
}

/* CONTACTO */
#contacto{background:#fff}
.contact-grid{
 display:grid;grid-template-columns:1fr 1fr;gap:35px
}
.contact-box{
 background:var(--blue);
 color:#fff;
 border-radius:7px;
 padding:28px;
 display:flex;flex-direction:column;gap:8px
}
.contact-box a{
 color:#fff;text-decoration:none;
 font-size:1.15rem;font-weight:900
}

/* PAGINAS INTERIORES */
.page-hero{
 background:var(--blue);
 color:#fff;
 padding:65px 0
}
.page-hero h1{font-size:clamp(2.2rem,5vw,4rem);margin:.2em 0}
.breadcrumb{color:#d8e8f2}
.product-detail{
 display:grid;grid-template-columns:1.2fr .8fr;gap:45px
}
.detail-gallery{
 display:grid;grid-template-columns:repeat(2,1fr);gap:15px
}
.detail-gallery img{
 width:100%;height:300px;object-fit:contain;
 border:1px solid #ddd;padding:12px;background:#fff
}
.detail-copy{font-size:1.05rem}
.text-link{
 display:block;margin-top:18px;
 color:var(--blue);font-weight:900
}
.narrow{max-width:850px}
.large-copy{font-size:1.18rem}

/* FOOTER */
.site-footer{
 background:#053b65;
 color:#fff;
 padding:45px 0 0
}
.footer-grid{
 display:grid;grid-template-columns:1fr 1fr;gap:35px
}
.site-footer p{color:#d8e6ef}
.copyright{
 border-top:1px solid rgba(255,255,255,.2);
 margin-top:30px;
 padding:16px;
 text-align:center;
 font-size:.84rem
}

@media(max-width:900px){
 .menu-toggle{display:block}
 nav{
  display:none;position:absolute;top:86px;left:0;right:0;
  flex-direction:column;align-items:flex-start;
  background:var(--yellow);padding:22px
 }
 nav.open{display:flex}
 .products-grid{grid-template-columns:repeat(2,1fr)}
 .brands-grid{grid-template-columns:repeat(2,1fr)}
 .about-grid,.contact-grid,.product-detail,.footer-grid{grid-template-columns:1fr}
}
@media(max-width:520px){
 .products-grid,.brands-grid,.detail-gallery{grid-template-columns:1fr}
 .hero{min-height:540px}
 .brand img{width:150px}
 .catalog-box{flex-direction:column;align-items:flex-start}
}