:root{--bg:#f4f5f7;--text:#101828;--muted:#475467;--card:#fff;--blue:#0b2e55;--wa:#16a34a}
*{box-sizing:border-box}
body{margin:0;font-family:Inter,system-ui,Arial;background:var(--bg);color:var(--text)}
.wrap{max-width:1080px;margin:0 auto;padding:0 18px}
.topbar{background:var(--blue);color:#fff;position:sticky;top:0;z-index:20}
.topbar-inner{min-height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:10px}
.brand img{width:36px;height:36px;border-radius:50%;object-fit:cover;background:#fff}
.brand h1{font-size:1.08rem;margin:0}
.brand p{margin:2px 0 0;color:#cdd8ea;font-size:.83rem}
.btn{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border-radius:10px;text-decoration:none;font-weight:700;color:#fff;border:none}
.btn-wa{background:var(--wa)}
.wa-header-icon{width:40px;height:40px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#16a34a;border:1px solid rgba(255,255,255,.25);box-shadow:0 4px 10px rgba(0,0,0,.25)}
.wa-header-icon svg{width:22px;height:22px;fill:#fff;display:block}
.hero{height:420px;background-size:cover;background-position:center}
.hero-overlay{height:100%;background:rgba(40,40,40,.5);display:flex;align-items:flex-end}
.hero-content{padding-bottom:28px;color:#fff}
.hero-content h2{font-size:2.5rem;margin:0 0 8px;text-transform:uppercase;letter-spacing:.02em}
.hero-content p{max-width:700px;margin:0 0 14px;font-size:1.05rem}
.card{background:var(--card);border:1px solid #eaecf0;border-radius:14px;padding:18px;box-shadow:0 6px 18px rgba(16,24,40,.06)}
.intro{margin:20px 0}
.intro h3,.map-section h3,.gallery h3{margin:0 0 10px}
.intro ul{margin:0;padding-left:18px;color:var(--muted)}
.map-section{margin:16px 0}
.map-frame{border:1px solid #d0d5dd;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 6px 16px rgba(16,24,40,.08)}
.map-frame iframe{width:100%;height:340px;border:0;display:block}
.gallery{margin:22px 0 30px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.gallery-grid figure{margin:0}
.gallery-grid img{width:100%;height:260px;object-fit:cover;border-radius:12px;border:1px solid #d0d5dd;display:block}
.gallery-grid figcaption{margin-top:6px;text-align:center;font-weight:600;color:#344054}
.footer{background:#0f172a;color:#d0d5dd;padding:26px 0}
.footer-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.footer p{margin:6px 0;color:#c2c8d3}
.footer a{color:#fff}

@media (max-width: 900px){
  .topbar-inner{min-height:56px;padding:8px 0}
  .brand img{width:32px;height:32px}
  .brand h1{font-size:1rem}
  .brand p{font-size:.78rem}
  .wa-header-icon{width:34px;height:34px}
  .wa-header-icon svg{width:18px;height:18px}
  .hero{height:380px}
  .hero-content h2{font-size:2rem}
  .gallery-grid,.footer-grid{grid-template-columns:1fr}
  .gallery-grid img{height:220px}
}

/* Carrusel de rubros */
.carrusel-rubros {
  margin: 30px 0;
}
.carrusel-rubros h3 {
  margin: 0 0 20px;
  font-size: 1.5rem;
  color: var(--blue);
}
.rubros-container {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.rubro h4 {
  margin: 0 0 12px;
  font-size: 1.2rem;
  color: var(--text);
}
.carrusel {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: var(--card);
  border: 1px solid #eaecf0;
  padding: 16px;
}
.carrusel-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #c2c8d3 transparent;
  padding-bottom: 10px;
}
.carrusel-track::-webkit-scrollbar {
  height: 6px;
}
.carrusel-track::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}
.carrusel-track::-webkit-scrollbar-thumb {
  background: #c2c8d3;
  border-radius: 3px;
}
.carrusel-slide {
  flex: 0 0 auto;
  width: 180px;
  text-align: center;
}
.carrusel-slide img {
  width: 100%;
  height: 140px;
  object-fit: contain;
  border-radius: 10px;
  border: 1px solid #d0d5dd;
  background-color: #f8f9fa;
  padding: 4px;
}
.carrusel-slide p {
  margin: 8px 0 0;
  font-size: 0.85rem;
  color: #4b5563;
  font-weight: 500;
  line-height: 1.2;
}
.carrusel-prev,
.carrusel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: white;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 20px;
  cursor: pointer;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.carrusel-prev:hover,
.carrusel-next:hover {
  opacity: 1;
}
.carrusel-prev {
  left: 8px;
}
.carrusel-next {
  right: 8px;
}

/* Productos más vendidos - ELIMINADO (ahora es carrusel) */
@media (max-width: 900px) {
  .carrusel-slide {
    width: 150px;
  }
  .carrusel-slide img {
    height: 120px;
    padding: 3px;
  }
  .carrusel-prev,
  .carrusel-next {
    width: 30px;
    height: 30px;
    font-size: 18px;
  }

}