:root{
  --primary:#B52616;
  --primary-dark:#920600;
  --surface:#F5F1EC;
  --surface-2:#EFEDED;
  --card:#FFFFFF;
  --ink:#1B1C1C;
  --outline:#8f706b;
  --muted:#5a5a5a;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{background:var(--surface); color:var(--ink); font-family:'Inter','Segoe UI',sans-serif; line-height:1.5; overflow-x:hidden;}
h1,h2,h3,.font-head{font-family:'Oswald','Arial Narrow',sans-serif; text-transform:uppercase; letter-spacing:.01em; font-weight:600;}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
.wrap{max-width:1100px; margin:0 auto; padding:0 20px;}

/* Header */
header{background:var(--primary); position:fixed; top:0; left:0; right:0; width:100%; z-index:100;}
.header-inner{max-width:1150px; margin:0 auto; padding:5px 24px; display:flex; align-items:center; justify-content:space-between; gap:20px;}
.brand{display:flex; align-items:center;}
.brand img{height:130px; width:auto; transform:scaleX(1.12); transform-origin:left center;}

nav{display:flex; gap:30px; font-family:'Oswald',sans-serif; font-size:16px; font-weight:600; text-transform:uppercase;}
nav a{color:rgba(255,255,255,.85); padding-bottom:4px; border-bottom:2px solid transparent;}
nav a.active, nav a:hover{color:#fff; border-color:var(--ink);}

.right-side{display:flex; align-items:center; gap:10px;}
.icon-box{width:40px; height:40px; border:1.5px solid rgba(255,255,255,.5); border-radius:4px; display:flex; align-items:center; justify-content:center; color:#fff; background:transparent;}
.icon-box svg{width:19px; height:19px;}
.icon-box:hover{border-color:#fff; background:var(--ink);}

.nav-toggle{
  display:none;
  width:40px; height:40px;
  align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.5); border-radius:4px;
  background:transparent; color:#fff; cursor:pointer;
}
.nav-toggle:hover{border-color:#fff; background:var(--ink);}
.nav-toggle svg{width:20px; height:20px;}

@media(max-width:768px){
  .brand img{height:52px;}
  .nav-toggle{display:flex;}
  nav{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:0;
    background:var(--ink);
    border-top:2px solid #000;
    box-shadow:5px 5px 0 #000;
  }
  nav.open{display:flex;}
  nav a{
    padding:16px 24px;
    border-bottom:1px solid rgba(255,255,255,.15);
  }
  nav a:last-child{border-bottom:none;}
}

/* Buttons */
.btn{display:inline-block; font-family:'Oswald',sans-serif; text-transform:uppercase; font-weight:600; padding:14px 26px; border-radius:4px; border:1px solid var(--ink); transition:transform .15s ease;}
.btn-primary{background:var(--primary); color:#fff; box-shadow:4px 4px 0 var(--ink);}
.btn-primary:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--ink);}
.btn-dark{background:var(--ink); color:#fff; box-shadow:4px 4px 0 var(--primary);}
.btn-dark:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--primary);}

.chip{background:var(--ink); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; padding:5px 10px; border-radius:4px; display:inline-block; border:2px solid var(--ink);}

.hard-card{background:var(--card); border:2px solid var(--ink); box-shadow:5px 5px 0 var(--ink); border-radius:6px; transition:transform .15s ease, box-shadow .15s ease;}
.hard-card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}

/* Hero */
.hero{padding:calc(var(--header-height, 143px) + 0px) 0 64px;}
.hero-bleed{width:100vw; position:relative; left:50%; right:50%; margin-left:-50vw; margin-right:-50vw; margin-bottom:16px;}
.hero-inner{padding-top:20px;}
.hero-text{display:flex; flex-direction:column; align-items:center; width:100%; text-align:center;}
.hero h1{font-size:40px; line-height:1.08; margin:16px 0 18px;}
@media(min-width:600px){ .hero h1{font-size:52px;} }
.hero-intro{max-width:760px; margin:0 auto 32px; color:var(--muted); font-size:18px; line-height:1.6;}

.hero-features{display:grid; grid-template-columns:1fr; gap:32px; width:100%; max-width:780px; margin:0 auto 36px;}
@media(min-width:600px){ .hero-features{grid-template-columns:1fr 1fr; gap:40px;} }
.hero-feature{display:flex; flex-direction:column; align-items:center;}
.hero-feature-icon{width:44px; height:44px; color:var(--primary); margin-bottom:14px;}
.hero-feature-icon svg{width:100%; height:100%; display:block;}
.hero-feature h3{font-size:17px; margin-bottom:8px;}
.hero-feature-text{font-size:14.5px; color:var(--muted); line-height:1.5; max-width:280px;}

.hero-actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:center;}

.hero-video-wrap{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/7.4;
  background:var(--surface);
}
@media(max-width:768px){
  .hero-video-wrap{aspect-ratio:16/8;}
}
.hero-slide{
  position:absolute;
  inset:0;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transition:opacity .5s ease;
}
.hero-slide.active{
  opacity:1;
  visibility:visible;
}
.hero-slide video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
}
.hero-slide img{
  position:relative;
  z-index:2;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:center;
  display:block;
}
.hero-slide img[src*="hero-carousel-01"]{transform:scale(1.09); object-position:center top;}
.hero-slide img[src*="hero-carousel-02"]{transform:scale(1.10);}
.hero-slide img[src*="hero-carousel-03"]{transform:scale(1.08);}
.hero-slide img[src*="hero-carousel-04"]{transform:scale(1.09);}
.hero-slide img[src*="hero-carousel-05"]{transform:scale(1.22);}
.hero-slide img[src*="hero-carousel-06"]{transform:scale(1.17);}
.hero-slide img[src*="hero-carousel-07"]{transform:scale(1.16);}
.hero-slide img[src*="hero-carousel-08"]{transform:scale(1.16);}
.hero-slide img[src*="hero-carousel-09"]{transform:scale(1.07);}
.hero-slide img[src*="hero-carousel-10"]{transform:scale(1.23);}
.hero-slide img[src*="hero-carousel-11"]{transform:scale(1.07);}
.hero-slide img[src*="hero-carousel-12"]{transform:scale(1.17);}
.hero-slide img[src*="hero-carousel-13"]{transform:scale(1.09);}
.hero-slide img[src*="hero-carousel-14"]{transform:scale(1.09);}

.hero-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:10;
  background:none; border:none; box-shadow:none;
  width:36px; height:36px;
  color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6);
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease;
}
.hero-arrow.prev{left:12px;}
.hero-arrow.next{right:12px;}
.hero-arrow:hover{transform:translateY(-50%) scale(1.15);}

/* Sections */
section{padding:56px 0;}
.section-title{font-size:26px; margin-bottom:6px;}
@media(min-width:600px){ .section-title{font-size:30px;} }
.underline{width:64px; height:4px; background:var(--primary); margin-bottom:30px;}

.grid-3{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:700px){ .grid-3{grid-template-columns:repeat(3,1fr);} }
.grid-4{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:560px){ .grid-4{grid-template-columns:1fr 1fr;} }
@media(min-width:900px){ .grid-4{grid-template-columns:repeat(4,1fr);} }

.cat-card{padding:24px; height:370px; background-color:var(--ink); background-size:cover; background-position:center; position:relative; display:flex; flex-direction:column; justify-content:space-between;}
.cat-card::before{content:""; position:absolute; inset:0; background:linear-gradient(to bottom, rgba(0,0,0,.6) 0%, rgba(0,0,0,0) 28%, rgba(0,0,0,0) 60%, rgba(0,0,0,.65) 100%); border-radius:inherit; pointer-events:none;}
.cat-card h3{font-size:17px; margin-bottom:6px; color:#fff; position:relative; z-index:1;}
.cat-card p{font-size:14px; color:#F5F1EC; text-align:justify; position:relative; z-index:1;}
.cat-card h3, .cat-card p{text-shadow:0 2px 6px rgba(0,0,0,.8);}

.elegirnos-item{padding:20px; text-align:center;}
.elegirnos-icon{width:96px; height:96px; object-fit:contain; margin:0 auto 16px;}
.elegirnos-item h3{font-size:1.5rem; letter-spacing:.02em; margin-bottom:0;}

.elegirnos-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; text-align:center;}
.stat-item{display:inline-flex; flex-direction:column; align-items:center; width:fit-content; margin:0 auto;}
.stat-number{display:block; font-family:'Oswald',sans-serif; text-transform:uppercase; color:var(--primary); font-size:5.5rem; line-height:1; font-weight:700;}
.stat-phrase{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  color:#B52616;
  font-weight:700;
  font-size:3rem;
  line-height:1.1;
}
.stat-label{display:block; font-family:'Oswald',sans-serif; color:var(--ink); font-size:1.15rem; font-weight:700; margin-top:4px;}
@media(max-width:600px){
  .stat-number{font-size:3.5rem;}
}
@media(max-width:700px){
  .elegirnos-stats{grid-template-columns:1fr;}
  .stat-phrase{font-size:2rem;}
}

.section-alt{background:var(--surface-2); border-top:1px solid #000; border-bottom:1px solid #000;}

.brands-section{padding:50px 0;}
.brands-slider{position:relative; min-height:140px; max-width:1050px; margin:0 auto;}
.brand-slide{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .5s ease;
  display:flex; align-items:center; justify-content:center;
  gap:40px; flex-wrap:wrap;
}
.brand-slide.active{opacity:1; visibility:visible; position:relative;}
.brand-slide img{
  height:72px; width:auto; max-width:170px; object-fit:contain;
  box-sizing:content-box; background:#fff; padding:20px 26px;
  border:2px solid var(--ink); border-radius:6px; box-shadow:3px 3px 0 var(--ink);
}
.brand-dots{
  position:absolute; bottom:-28px; left:0; right:0;
  display:flex; justify-content:center; gap:7px;
}
.brand-dot{width:7px; height:7px; border-radius:50%; background:var(--outline); cursor:pointer;}
.brand-dot.active{background:var(--primary);}
@media(max-width:700px){
  .brand-slide{gap:18px;}
  .brand-slide img{height:46px; max-width:120px; padding:12px 16px;}
}

.distribucion-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:40px;
}

@media (max-width:768px){
  .distribucion-grid{
    grid-template-columns:1fr;
  }
}

/* Columna izquierda: mapa */
.distribucion-mapa{
  display:flex;
  flex-direction:column;
  height:100%;
}
.ruta-video-wrapper{
  position:relative;
  overflow:hidden;
  border:2px solid var(--ink);
  border-radius:6px;
  box-shadow:5px 5px 0 var(--ink);
  background:#fff;
  flex:1 1 auto;
  min-height:340px;
}
.ruta-video-wrapper video{
  display:block;
  width:100%;
  height:100%;
  min-height:340px;
  object-fit:cover;
}

.ruta-overlay{
  position:absolute;
  opacity:0;
  pointer-events:none;
  transition:opacity .6s ease;
  z-index:2;
}
.ruta-overlay.is-visible{ opacity:1; }

/* Titulo de apertura/cierre: centrado */
.ruta-overlay--titulo{
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  text-align:center;
  background:var(--ink);
  border:2px solid #000;
  box-shadow:5px 5px 0 #000;
  padding:20px 28px;
}
.ruta-overlay__titulo{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  font-size:22px;
  color:var(--surface);
  margin:8px 0 0;
  letter-spacing:.5px;
}
.ruta-overlay__subtitulo{
  font-family:'Inter', sans-serif;
  font-size:13px;
  color:var(--primary);
  margin:4px 0 0;
}
.ruta-overlay__badge{
  display:flex;
  align-items:center;
  justify-content:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--primary);
  border:2px solid #000;
  margin:0 auto;
}

/* Etiqueta de municipio: esquina inferior izquierda, estilo lower-third */
.ruta-overlay--municipio{
  left:24px;
  bottom:24px;
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--primary);
  border:2px solid #000;
  box-shadow:5px 5px 0 #000;
  padding:10px 18px;
}
.ruta-overlay__pin{
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--surface);
  border:2px solid #000;
  flex-shrink:0;
}
.ruta-overlay__nombre{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  font-size:16px;
  color:var(--surface);
  margin:0;
  letter-spacing:.5px;
}

@media (max-width:640px){
  .ruta-overlay__titulo{ font-size:17px; }
  .ruta-overlay__nombre{ font-size:13px; }
  .ruta-overlay--municipio{ left:12px; bottom:12px; padding:8px 14px; }
}

.mapa-caption{
  margin-top:16px;
  font-family:'Inter', sans-serif;
  color:#1B1C1C;
  font-size:.95rem;
  text-align:center;
}

/* Columna derecha: tarjetas */
.distribucion-info{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.dist-card{
  background:#fff;
  border:2px solid #1B1C1C;
  border-radius:6px;
  box-shadow:5px 5px 0 #1B1C1C;
  padding:28px;
  transition:transform .2s ease;
}
.dist-card:hover{
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 #1B1C1C;
}

.dist-card-icon{
  width:56px;
  height:56px;
  background:#B52616;
  border:2px solid #1B1C1C;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:16px;
}

.dist-card h3{
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  color:#1B1C1C;
  font-size:1.25rem;
  margin-bottom:10px;
}

.dist-card p{
  font-family:'Inter', sans-serif;
  color:#4a4a4a;
  line-height:1.5;
  text-align:justify;
}

/* Boton CTA */
.btn-whatsapp-dist{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:#25D366;
  color:#fff;
  font-family:'Oswald', sans-serif;
  text-transform:uppercase;
  text-decoration:none;
  padding:16px 24px;
  border:2px solid #1B1C1C;
  border-radius:6px;
  box-shadow:5px 5px 0 #1B1C1C;
  transition:background .2s ease, transform .2s ease;
  text-align:center;
}
.btn-whatsapp-dist:hover{
  background:#1DA851;
  transform:translate(-2px,-2px);
  box-shadow:7px 7px 0 #1B1C1C;
}

.cta-band{background:var(--ink); color:#fff;}
.cta-inner{display:flex; flex-direction:column; gap:20px; align-items:flex-start; justify-content:space-between; padding:44px 0;}
@media(min-width:760px){ .cta-inner{flex-direction:row; align-items:center;} }
.cta-inner h3{font-size:20px; color:#fff; margin-bottom:4px;}
.cta-inner p{color:#c9c6c1; font-size:14px;}

.encuentranos{
  padding:64px 0;
}

.mapa-ubicacion{
  margin-top:40px;
  border:2px solid #1B1C1C;
  border-radius:6px;
  box-shadow:5px 5px 0 #1B1C1C;
  overflow:hidden;
  background:#fff;
}

.mapa-ubicacion iframe{
  display:block;
  width:100%;
  height:450px;
  border:0;
}

@media (max-width:600px){
  .mapa-ubicacion iframe{
    height:300px;
  }
}

footer{padding:56px 0 30px;}
.foot-grid{display:grid; grid-template-columns:1fr; gap:28px; font-size:14px;}
@media(min-width:700px){ .foot-grid{grid-template-columns:repeat(3,1fr);} }
.foot-grid > div{text-align:center;}
.foot-grid .h{font-family:'Oswald',sans-serif; color:#1B1C1C; font-weight:700; margin-bottom:8px; font-size:1.15rem;}
.foot-grid p{color:var(--muted); font-size:1rem; line-height:1.6;}
.foot-bottom{border-top:1px solid #000; margin-top:28px; padding-top:16px; font-size:.95rem; color:var(--outline); text-align:center;}

.wa-float{position:fixed; bottom:20px; right:20px; z-index:50; background:#25D366; color:#fff; padding:13px 18px; border-radius:999px; box-shadow:3px 3px 0 var(--ink); font-family:'Oswald',sans-serif; text-transform:uppercase; font-size:13px; display:flex; align-items:center; gap:8px;}

/* Catalogo */
.catalogo{padding:calc(var(--header-height, 143px) + 40px) 0 64px;}
.catalogo-grid{display:grid; grid-template-columns:1fr; gap:20px;}
@media(min-width:360px){ .catalogo-grid{grid-template-columns:repeat(2,1fr);} }
@media(min-width:700px){ .catalogo-grid{grid-template-columns:repeat(4,1fr);} }
.cat-brand-card{
  position:relative;
  background:var(--card); border:2px solid var(--ink);
  box-shadow:5px 5px 0 var(--ink); border-radius:6px;
  overflow:hidden; cursor:pointer; text-align:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.cat-brand-card:hover{transform:translate(-2px,-2px); box-shadow:7px 7px 0 var(--ink);}
.cat-brand-thumb{
  width:100%; aspect-ratio:3/4; object-fit:contain;
  background:#fff; display:block; border-bottom:2px solid var(--ink);
  padding:32px; box-sizing:border-box;
}
.cat-brand-card h3{padding:16px; font-size:17px;}
.tarjeta-catalogo__imagenes{
  width:100%; aspect-ratio:3/4; box-sizing:border-box;
  background:#fff; border-bottom:2px solid var(--ink);
  display:flex; align-items:center; justify-content:center;
  gap:12px; padding:20px;
}
.tarjeta-catalogo__producto{height:auto; object-fit:contain;}
.tarjeta-catalogo__producto--guardabarro{width:45%;}
.tarjeta-catalogo__producto--farola{width:50%;}
.tarjeta-catalogo__insignia-jm{
  position:absolute; top:10px; right:10px; width:40px; height:40px;
  border-radius:50%; border:2px solid var(--ink); background:var(--primary);
  padding:6px; box-sizing:border-box; box-shadow:3px 3px 0 var(--ink);
}
.tarjeta-catalogo__logos-marca{
  width:100%; aspect-ratio:3/4; box-sizing:border-box;
  background:#fff; border-bottom:2px solid var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:20px; padding:20px;
}
.tarjeta-catalogo__logo-marca{max-width:70%; height:auto; object-fit:contain;}
.cat-brand-pdf{
  display:block; text-align:center; padding:10px 8px;
  background:var(--ink); color:#fff; text-decoration:none;
  font-family:'Inter',sans-serif; font-size:.9rem; font-weight:600;
}
.cat-brand-pdf:hover{background:var(--primary);}

/* Flipbook overlay */
.flipbook-overlay{
  position:fixed; inset:0; z-index:200;
  background:rgba(27,28,28,.92);
  display:flex; align-items:center; justify-content:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease;
}
.flipbook-overlay.active{opacity:1; visibility:visible;}
.flipbook-container{
  background:#fff; border:2px solid var(--ink); border-radius:6px;
  box-shadow:6px 6px 0 var(--primary);
  width:min(90vw, 700px); height:min(80vh, 1000px);
}
.flipbook-container .page{
  background:#fff;
  overflow:hidden;
}
.flipbook-container .page img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.flipbook-close{
  position:absolute; top:20px; right:24px; z-index:210;
  width:44px; height:44px; border-radius:4px;
  background:#fff; color:var(--ink); border:2px solid var(--ink);
  font-size:26px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--primary);
}
.flipbook-close:hover{background:var(--ink); color:#fff;}
.flipbook-nav{
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:16px; z-index:210;
}
.flipbook-nav button{
  width:44px; height:44px; border-radius:4px;
  background:#fff; color:var(--ink); border:2px solid var(--ink);
  font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:3px 3px 0 var(--primary);
}
.flipbook-nav button:hover{background:var(--ink); color:#fff;}
@media(max-width:600px){
  .flipbook-container{width:94vw; height:70vh;}
}