:root{
  --bg:#e9fbff;
  --surface:#ffffff;
  --muted:#eef0f3;
  --text:#1e2430;
  --text-2:#5b6578;
  --navy:#b40018;
  --navy-2:#d61b29;
  --orange:#ffb000;
  --ring:rgba(212,39,52,.25);
  --shadow:0 8px 24px rgba(11,31,59,.08);
  --radius:12px;
  --radius-sm:10px;
  --radius-lg:16px;
  --fs-h1:clamp(1.9rem,1.5rem + 1vw,2.4rem);
  --fs-h2:clamp(1.4rem,1.2rem + .6vw,1.9rem);
  --fs-h3:clamp(1.15rem,1.05rem + .3vw,1.35rem);
  --fs-body:clamp(.92rem,.9rem + .15vw,1.02rem);
  --fs-small:clamp(.78rem,.74rem + .12vw,.86rem);
  --lh-tight:1.15;
  --lh-normal:1.5;
  --lh-relaxed:1.7;
  --space-1:8px;
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:32px;
  --text-max:70ch;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#22c8ff, #11b6f5 40%, #06a4e8 100%);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
}
.container{
  max-width:1280px;
  width:100%;
  margin-inline:auto;
  padding-inline:20px;
}
h1,h2,h3{font-weight:700; letter-spacing:.01em; margin:0 0 var(--space-2)}
h1{font-size:var(--fs-h1); line-height:var(--lh-tight)}
h2{font-size:var(--fs-h2); line-height:var(--lh-tight)}
h3{font-size:var(--fs-h3); line-height:var(--lh-normal)}
p{margin:0 0 var(--space-2); max-width:var(--text-max)}
small,.text-sm{font-size:var(--fs-small); color:var(--text-2)}

.topbar{
  position:sticky; top:0; z-index:40;
  background:linear-gradient(180deg,#b40018, #d61b29);
  color:#fff; box-shadow:var(--shadow);
}
.topbar__inner{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0}
.brand{display:flex; align-items:baseline; gap:10px; text-decoration:none; color:#fff}
.brand__logo{font-weight:800; letter-spacing:.5px; font-size:20px; padding:6px 10px; background:var(--orange); color:#780010; border-radius:8px}
.brand__tag{opacity:.9; font-weight:600}
.topbar__nav{display:flex; gap:16px; align-items:center; flex:1}
.topbar__link{
  color:#dbe5f5; text-decoration:none; font-weight:600; padding:8px 10px; border-radius:999px;
}
.topbar__link:hover{background:rgba(255,255,255,.13)}
.topbar__link.is-active{background:#fff; color:var(--navy)}
.topbar__actions{display:flex; gap:10px; align-items:center}
.topbar__toggle{
  display:none; background:none; border:0; padding:6px; cursor:pointer;
}
.topbar__toggle span{
  display:block; width:20px; height:2px; background:#fff; border-radius:99px; margin:3px 0;
}
.btn{
  display:inline-block; padding:8px 14px; border-radius:10px;
  text-decoration:none; font-weight:600; transition:.2s transform;
  font-size:var(--fs-small); line-height:1.2;
}
.btn:hover{transform:translateY(-1px)}
.btn--outline{border:2px solid #fff; color:#fff}
.btn--accent{background:var(--orange); color:#0b1f3b}

.app{
  padding:var(--space-4) 0 var(--space-5);
  width:100%;
}
.app.container{
  max-width:1280px;
  width:100%;
  margin-inline:auto;
  padding-inline:20px;
}
.surface{
  background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); border:1px solid var(--muted);
}
.section{margin:var(--space-3) 0}
.section__title{margin:0 0 var(--space-2); font-size:var(--fs-h2)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{padding:8px 10px; border-radius:999px; background:var(--muted); color:var(--navy); font-weight:600}

.hero{
  display:grid; grid-template-columns: 1.1fr .9fr; gap:22px; align-items:center;
  background:linear-gradient(140deg, #b40018 0%, #d61b29 55%, #ff4b3a 100%);
  color:#fff; padding:var(--space-4); border-radius:var(--radius-lg); box-shadow:var(--shadow);
}
.hero__copy h1{margin:0 0 var(--space-2); font-size:var(--fs-h1)}
.hero__copy p{margin:0 0 var(--space-3); color:#d7e1ee}
.search{
  display:flex; gap:8px; background:#fff; border-radius:12px; padding:6px; border:1px solid #dfe6ee;
  box-shadow: inset 0 0 0 2px transparent; transition:.2s box-shadow;
}
.search:focus-within{box-shadow:0 0 0 4px var(--ring)}
.search input{
  flex:1; border:0; outline:0; padding:14px 12px; font-size:16px; border-radius:10px;
}
.search button{border:0; border-radius:10px; background:var(--orange); color:#780010; font-weight:800; padding:0 16px; cursor:pointer}
.hero__media{
  border-radius:16px; overflow:hidden; background:#7c0010; border:1px solid #e2534b;
  display:grid; place-items:center; min-height:230px;
}
.hero__media img{max-width:100%; object-fit:cover}

/* Carrusel horizontal */
.scroller{
  overflow:auto; display:flex; gap:12px; padding-bottom:6px; scroll-snap-type:x mandatory;
}
.scroller::-webkit-scrollbar{height:10px}
.scroller::-webkit-scrollbar-thumb{background:#c9d1dd; border-radius:999px}
.pill{
  flex:0 0 auto; scroll-snap-align:start; background:#fff; border:1px solid var(--muted);
  border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center;
  min-width:180px; box-shadow:var(--shadow)
}
.pill img{width:36px; height:36px; object-fit:cover; border-radius:8px}
.pill strong{color:var(--navy)}

.materials{display:grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap:12px}
.materials .mat{
  background:#fff; border:1px solid var(--muted); border-radius:12px; padding:12px; text-align:center; font-weight:700; color:var(--navy);
}

.catalog{
  display:grid;
  grid-template-columns: 280px minmax(0,1fr);
  gap:16px;
  width:100%;
}
.sidebar{
  background:#fff; border:1px solid var(--muted); border-radius:12px; padding:14px; box-shadow:var(--shadow);
  align-self:flex-start;
}
.sidebar h3{margin:0 0 8px}
.filter{display:grid; gap:8px; margin-bottom:14px}
.filter input[type="range"]{width:100%}
.filter .row{display:flex; gap:8px}
.order{width:100%; padding:8px 10px; border-radius:10px; border:1px solid #dfe6ee; background:#fff}
.grid{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap:16px;
}
.pager{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  margin-top:16px;
  font-size:var(--fs-small);
}
.pager__link{
  border:0;
  background:transparent;
  cursor:pointer;
  padding:4px 8px;
  border-radius:6px;
  color:var(--navy);
}
.pager__link.is-active{
  background:var(--navy);
  color:#fff;
}
.pager__link.is-disabled{
  opacity:.4;
  pointer-events:none;
}
.card{
  background:#fff; border:1px solid var(--muted); border-radius:12px;
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow);
}
.card__media{
  height:220px;
  background:#f1f4f8;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.card__body{padding:12px}
.card__title{font-size:var(--fs-body); font-weight:700; color:var(--navy); margin:0 0 6px}
.card__meta{font-size:var(--fs-small); color:var(--text-2)}
.price{font-weight:800; color:var(--orange)}
.meta-row{display:flex; align-items:center; justify-content:space-between; gap:6px; margin-top:4px}
.rating{display:flex; align-items:center; gap:4px; font-size:var(--fs-small); color:#f7b500}
.rating__stars{letter-spacing:1px}
.stock{font-size:var(--fs-small); color:var(--navy); font-weight:600}
.card__actions{margin-top:auto; display:flex; gap:8px; padding:12px}
.btn--light{background:var(--muted); color:var(--navy); border:0}

.product{
  display:grid;
  grid-template-columns: minmax(260px, 420px) minmax(0,1fr);
  gap:18px;
  align-items:flex-start;
}
.gallery{
  background:#fff; border:1px solid var(--muted); border-radius:12px; padding:12px;
}
.gallery__main{
  height:260px;
  display:grid;
  place-items:center;
  background:#f2f5f9;
  border-radius:10px;
  overflow:hidden;
}
.gallery__main img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.thumbs{display:flex; gap:8px; margin-top:10px}
.thumbs img{width:70px; height:70px; object-fit:cover; border-radius:8px; border:2px solid transparent; cursor:pointer}
.thumbs img.is-active{border-color:var(--navy)}
.product__info{background:#fff; border:1px solid var(--muted); border-radius:12px; padding:16px}
.product__info h2{margin:0 0 var(--space-2); font-size:var(--fs-h2); line-height:var(--lh-tight)}
.product__meta{color:var(--text-2); margin:0 0 var(--space-1); font-size:var(--fs-small)}
.breadcrumb{
  margin-bottom:var(--space-1);
  font-size:var(--fs-small);
  color:var(--text-2);
}
.product__desc{
  margin-top:var(--space-2);
  max-width:var(--text-max);
  line-height:var(--lh-relaxed);
}
.meta-chips{display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-2)}
.meta-chip{
  padding:6px 10px; border-radius:999px; background:var(--muted);
  font-size:var(--fs-small); color:var(--navy); font-weight:600;
}
.product__actions{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:var(--space-3);
}
.product__actions .btn--accent{
  min-width:0;
  width:100%;
  max-width:280px;
  text-align:center;
}
.badge{display:inline-block; padding:6px 8px; background:var(--muted); border-radius:8px; font-weight:700; color:var(--navy)}

.footer{margin-top:24px; background:#0b1f3b; color:#d7e1ee}
.footer__inner{padding:26px 0}
.footer__brand{display:grid; gap:6px}
.brand__logo--footer{display:inline-block; font-weight:900; padding:8px 12px; background:var(--orange); color:var(--navy); border-radius:10px; width:max-content}
.footer__cols{display:grid; grid-template-columns: 1fr 1fr; gap:12px; margin-top:10px}
.footer__copy{opacity:.8; margin-top:8px}

.floating{
  position:fixed; right:18px; width:56px; height:56px; display:grid; place-items:center; border-radius:50%;
  background:#fff; border:1px solid var(--muted); box-shadow:var(--shadow); z-index:45;
}
.floating img{width:32px; height:32px; object-fit:contain}
.floating--whatsapp{bottom:92px}
.floating--facebook{bottom:28px}

.hidden{display:none !important}
@media (max-width: 1024px){
  .topbar__inner{gap:10px}
  .topbar__nav{gap:10px}
  .grid{grid-template-columns: repeat(3, 1fr)}
  .materials{grid-template-columns: repeat(4, 1fr)}
}
@media (max-width: 820px){
  .hero{grid-template-columns: 1fr}
  .product{grid-template-columns: 1fr}
  .catalog{grid-template-columns: 1fr}
  .grid{grid-template-columns: repeat(2, 1fr)}
  .materials{grid-template-columns: repeat(3, 1fr)}
  .topbar__nav{
    position:fixed; inset-inline:0; top:56px; background:#0b1f3b;
    flex-direction:column; padding:10px 16px; transform:translateY(-120%);
    transition:.2s transform; border-bottom:1px solid #1d355e; z-index:39;
  }
  .topbar__link{width:100%}
  .topbar__toggle{display:block}
  .topbar__actions{display:none}
  .topbar.is-open .topbar__nav{transform:translateY(0)}
}
@media (max-width: 520px){
  .grid{grid-template-columns: 1fr}
  .materials{grid-template-columns: repeat(2, 1fr)}
  .hero{padding:var(--space-3)}
  .product__info{padding:var(--space-3)}
}