:root{--azul:#1f6fd1;--azul-osc:#0f4c9e;--rojo:#e3161d;--texto:#1d2733;--gris:#f3f6fa;--borde:#d9e2ee}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Barlow',Arial,sans-serif;color:var(--texto);background:#fff;line-height:1.6}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1140px;margin:0 auto;padding:0 16px}
/* barra superior */
.topbar{background:var(--azul);color:#fff;font-size:.95rem}
.topbar .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;padding-top:8px;padding-bottom:8px}
.topbar a{text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.topbar a:hover{text-decoration:underline}
.topbar svg{width:18px;height:18px;fill:#fff}
/* navegación */
header.nav{background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);position:sticky;top:0;z-index:20}
header.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:10px;padding-bottom:10px}
.brand img{height:54px;width:auto}
nav ul{list-style:none;display:flex;flex-wrap:wrap;gap:4px}
nav a{display:block;padding:10px 18px;font-weight:700;text-decoration:none;color:#fff;background:var(--azul);font-size:1.05rem}
nav a:hover{background:var(--azul-osc)}
nav a.activo{background:var(--rojo)}
.menu-btn{display:none;background:var(--azul);color:#fff;border:0;font-size:1.6rem;padding:4px 12px;cursor:pointer}
@media(max-width:820px){
 .menu-btn{display:block}
 nav{position:absolute;left:0;right:0;top:100%;background:#fff;display:none;box-shadow:0 8px 16px rgba(0,0,0,.1)}
 nav.abierto{display:block}
 nav ul{flex-direction:column;padding:8px 16px 16px}
}
/* secciones */
section{padding:56px 0}
h1,h2,h3{line-height:1.2;font-weight:800}
h1{font-size:clamp(2rem,5vw,3rem);color:#555}
h2{font-size:clamp(1.6rem,4vw,2.4rem)}
.titulo-banda{background:var(--azul);color:#fff;text-align:center;padding:14px 16px;margin-bottom:32px}
.hero .wrap{display:grid;grid-template-columns:2fr 1fr;gap:32px;align-items:center}
.hero .logo-grande{max-width:480px;margin-top:12px}
.wa-card{text-align:center}
.wa-card h3{color:#555;margin-bottom:12px;font-size:1.4rem}
.wa-card img{width:180px;margin:0 auto 12px;border-radius:50%}
.wa-card a{font-weight:700;font-size:1.2rem}
.dedicamos{background:var(--azul);color:#fff}
.dedicamos .wrap{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:28px;align-items:center}
.dedicamos p{font-size:clamp(1.4rem,3vw,2rem);font-weight:700}
.dedicamos img{border-radius:8px;background:#fff}
.banner img{width:100%;height:auto}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px}
.galeria img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:6px;border:1px solid var(--borde)}
@media(max-width:820px){.hero .wrap,.dedicamos .wrap{grid-template-columns:1fr}}
/* productos */
.producto{display:grid;grid-template-columns:380px 1fr;gap:36px;padding:40px 0;border-bottom:1px solid var(--borde);align-items:start}
.producto:nth-child(even){grid-template-columns:1fr 380px}
.producto:nth-child(even) .foto{order:2}
.producto .foto img{width:100%;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.1)}
.producto h2{color:var(--azul);margin-bottom:12px}
.producto p{margin-bottom:12px}
.producto h3{color:var(--rojo);margin:16px 0 8px;font-size:1.15rem}
.producto ul{padding-left:20px}
.producto li{margin-bottom:6px}
@media(max-width:820px){.producto,.producto:nth-child(even){grid-template-columns:1fr}.producto:nth-child(even) .foto{order:0}}
.texto{max-width:820px;margin:0 auto;font-size:1.15rem}
.texto p{margin-bottom:18px}
.dos-col{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
@media(max-width:820px){.dos-col{grid-template-columns:1fr}}
.mv{background:var(--gris);border-left:6px solid var(--rojo);padding:28px;border-radius:6px;margin-bottom:28px}
.mv h2{color:var(--azul);margin-bottom:10px}
/* contacto */
form{display:grid;gap:16px;max-width:640px}
.fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:600px){.fila{grid-template-columns:1fr}}
label{font-weight:700;display:block;margin-bottom:4px}
input,textarea{width:100%;padding:12px;border:1px solid var(--borde);border-radius:4px;font:inherit}
textarea{min-height:150px}
button{background:var(--rojo);color:#fff;border:0;padding:14px 28px;font:inherit;font-weight:700;font-size:1.1rem;cursor:pointer;border-radius:4px;justify-self:start}
button:hover{background:#b80f15}
.oculto{display:none}
.datos li{list-style:none;margin-bottom:12px;font-size:1.1rem}
/* footer */
footer{background:var(--azul-osc);color:#fff;padding:32px 0;margin-top:40px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;align-items:center}
footer a{text-decoration:none}
footer a:hover{text-decoration:underline}
footer small{opacity:.8}
.wa-flotante{position:fixed;right:18px;bottom:18px;width:60px;height:60px;border-radius:50%;background:#25d366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(0,0,0,.25);z-index:30}
.wa-flotante svg{width:34px;height:34px;fill:#fff}
.wa-icono{width:180px;height:180px;margin:0 auto 12px;border-radius:50%;background:#25d366;display:flex!important;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(37,211,102,.35);transition:transform .2s}
.wa-icono:hover{transform:scale(1.05)}
.wa-icono svg{width:60%;height:60%;fill:#fff}
.wa-icono.chico{width:110px;height:110px;margin:8px 0 0}