:root{
  --orange:#e28e17;
  --orange-2:#f2a23a;
  --ink:#121212;
  --muted:#6b6b6b;
  --surface:#fffdfa;
  --surface-2:#f7f2e8;
  --ring:rgba(226,142,23,.20);
  --bg:#f6f2eb;
  --card:#ffffff;
  --panel:#f3ede4;
  --line:rgba(0,0,0,.10);
  --shadow:0 18px 46px rgba(0,0,0,.12);
  --shadow-soft:0 10px 24px rgba(0,0,0,.08);
  --radius:18px;
  --container:1240px;
  --ease:cubic-bezier(.2,.8,.2,1);
  --headerH:128px;
  --fixedH:var(--headerH);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
html,body{ height:100%; }

body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink);
  background:
    radial-gradient(circle at top left, rgba(242,162,58,.10), transparent 28%),
    radial-gradient(circle at right 12%, rgba(226,142,23,.08), transparent 24%),
    linear-gradient(180deg,#fffdfa 0%, #f8f3eb 36%, #f3ede4 100%);
  overflow-x:hidden;
}

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }

.js-ready img[loading="lazy"]{
  opacity:0;
  transition:opacity .24s var(--ease), transform .8s var(--ease);
}

.js-ready img[loading="lazy"].is-loaded{
  opacity:1;
}

.page-progress{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:4px;
  z-index:100100;
  background:linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events:none;
}

.page-progress__bar{
  display:block;
  width:0;
  height:100%;
  background:linear-gradient(90deg, var(--orange), #ffd18a);
  box-shadow:0 0 20px rgba(226,142,23,.45);
  transform-origin:left center;
}

.container{
  width:min(var(--container), calc(100% - 32px));
  margin-inline:auto;
}

/* HEADER */
.header{
  background:rgba(255,255,255,.92);
  position:fixed;
  top:0; left:0; right:0;
  z-index:99999;
  backdrop-filter:saturate(1.15) blur(10px);
  transition:box-shadow .25s var(--ease), background .25s var(--ease), backdrop-filter .25s var(--ease);
}

.header.is-scrolled{
  box-shadow:0 18px 48px rgba(0,0,0,.09);
  background:rgba(255,255,255,.84);
}

.header__row{
  display:grid;
  grid-template-columns:320px 1fr auto;
  align-items:center;
  gap:20px;
  padding:16px 0;
  position:relative;
  z-index:5;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:280px;
}

.brand__logo{
  width:88px;
  height:88px;
  object-fit:contain;
  flex-shrink:0;
}

.brand__text{
  display:block;
  max-width:190px;
  font-size:12px;
  line-height:1.05;
  font-weight:1000;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#2a2a2a;
}

.search{
  min-width:0;
  position:relative;
  z-index:6;
}

.search__inner{
  position:relative;
  height:46px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  display:flex;
  align-items:stretch;
  overflow:visible;
  transition:box-shadow .2s var(--ease), transform .2s var(--ease);
}

.search__inner:focus-within{
  box-shadow:0 16px 40px rgba(226,142,23,.18);
  transform:translateY(-1px);
}

.search input{
  width:100%;
  border:0;
  outline:none;
  padding:0 16px;
  font-size:14px;
  background:transparent;
}

.search__btn{
  width:56px;
  border:0;
  cursor:pointer;
  background:var(--orange);
  color:#fff;
  display:grid;
  place-items:center;
  transition:filter .15s var(--ease);
}

.search__btn:hover{ filter:brightness(1.05); }

.search__results{
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  right:0;
  display:grid;
  gap:6px;
  padding:10px;
  border-radius:18px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  box-shadow:0 18px 36px rgba(0,0,0,.12);
  z-index:100020;
}

.search__results[hidden]{
  display:none !important;
}

.search__result{
  display:block;
  padding:10px 12px;
  border-radius:12px;
  color:#222;
  font-size:14px;
  font-weight:700;
  transition:background .18s var(--ease), color .18s var(--ease);
}

.search__result:hover,
.search__result.is-active{
  background:#fff5e5;
  color:var(--orange);
}

.search__result-note{
  display:block;
  margin-top:4px;
  color:#777;
  font-size:12px;
  font-weight:600;
}

.header__actions{
  display:flex;
  align-items:center;
  gap:12px;
}

.header__actions .btn{
  min-width:170px;
  min-height:46px;
  padding:.78rem 1.15rem;
  box-shadow:0 12px 28px rgba(226,142,23,.18);
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5rem;
  padding:.62rem 1rem;
  border-radius:999px;
  border:1px solid transparent;
  cursor:pointer;
  font-weight:800;
  font-size:14px;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
  white-space:nowrap;
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

.btn:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 44px rgba(0,0,0,.12);
}

.btn::before{
  content:"";
  position:absolute;
  inset:-1px;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.26) 24%, transparent 48%);
  transform:translateX(-130%);
  transition:transform .65s var(--ease);
  z-index:-1;
}

.btn:hover::before{
  transform:translateX(130%);
}

.btn--primary{
  background:linear-gradient(135deg, var(--orange), #f0aa46);
  color:#fff;
  box-shadow:0 14px 34px rgba(226,142,23,.28);
}

.btn--primary:hover{
  background:linear-gradient(135deg, var(--orange-2), #f7b55f);
}

.nav{
  background:rgba(255,255,255,.92);
  border-top:1px solid rgba(0,0,0,.06);
  border-bottom:4px solid var(--orange);
  position:relative;
  z-index:2;
}

.nav__inner{
  position:relative;
  display:flex;
  justify-content:center;
  gap:36px;
  padding:12px 0;
  flex-wrap:wrap;
}

.nav__link{
  font-weight:900;
  color:#1b1b1b;
  opacity:.92;
  padding:8px 2px;
  transition:color .2s var(--ease);
}

.nav__link:hover,
.nav__link.is-active{
  color:var(--orange);
}

.nav__line{
  position:absolute;
  bottom:6px;
  height:3px;
  border-radius:999px;
  background:var(--orange);
  width:40px;
  left:0;
  transform:translateX(0);
  transition:transform .28s var(--ease), width .28s var(--ease);
}

main{
  padding-top:var(--fixedH);
  position:relative;
  overflow:hidden;
}

/* HERO */
.inner-hero{
  position:relative;
  padding:64px 0 44px;
  background:
    linear-gradient(135deg, rgba(226,142,23,.12), rgba(255,255,255,.85)),
    #fff;
  overflow:hidden;
}

.inner-hero::before{
  content:"";
  position:absolute;
  inset:auto -120px -120px auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(226,142,23,.18), transparent 70%);
  pointer-events:none;
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#666;
  font-size:14px;
  margin-bottom:18px;
}

.breadcrumb a:hover{
  color:var(--orange);
}

.inner-hero__content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
}

.inner-hero__title{
  margin:0 0 10px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1;
  font-weight:1000;
  color:#111;
}

.inner-hero__text{
  margin:0;
  max-width:720px;
  color:#4b4b4b;
  font-size:15px;
  line-height:1.6;
}

.inner-hero__meta{
  flex-shrink:0;
  display:flex;
  gap:12px;
  align-items:center;
}

.stat-badge{
  min-width:120px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-soft);
  text-align:center;
}

.stat-badge strong{
  display:block;
  font-size:26px;
  line-height:1;
  color:var(--orange);
  font-weight:1000;
}

.stat-badge span{
  display:block;
  font-size:12px;
  margin-top:6px;
  color:#666;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* CATEGORY */
.catalog{
  padding:34px 0 64px;
}

.catalog__wrap{
  display:grid;
  grid-template-columns:290px 1fr;
  gap:26px;
  align-items:start;
}

.catalog__panel,
.sidebar,
.category-hero__badge,
.u-card,
.product-card,
.product-gallery,
.product-info,
.product-block,
.product-cta,
.product-stage,
.product-thumb{
  position:relative;
  isolation:isolate;
}

.catalog__panel::before,
.sidebar::before,
.category-hero__badge::before,
.u-card::before,
.product-card::before,
.product-gallery::before,
.product-info::before,
.product-block::before,
.product-cta::before,
.product-stage::before,
.product-thumb::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(242,162,58,.18), transparent 44%);
  opacity:0;
  transition:opacity .28s var(--ease);
  pointer-events:none;
}

.catalog__panel:hover::before,
.sidebar:hover::before,
.category-hero__badge:hover::before,
.u-card:hover::before,
.product-card:hover::before,
.product-gallery:hover::before,
.product-info:hover::before,
.product-block:hover::before,
.product-cta:hover::before,
.product-stage:hover::before,
.product-thumb:hover::before,
.product-thumb.is-active::before{
  opacity:1;
}

.sidebar{
  position:sticky;
  top:calc(var(--headerH) + 22px);
  background:rgba(255,255,255,.75);
  backdrop-filter:blur(10px);
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  padding:24px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.sidebar__title{
  margin:0 0 18px;
  font-size:13px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#6a6a6a;
  font-weight:900;
}

.sidebar__menu{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.sidebar__link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:14px 14px;
  border-radius:14px;
  border:1px solid transparent;
  background:transparent;
  font-weight:800;
  color:#222;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}

.sidebar__link:hover{
  transform:translateX(4px);
  background:#fff;
  border-color:rgba(226,142,23,.16);
  color:var(--orange);
}

.sidebar__link.is-active{
  background:linear-gradient(135deg, var(--orange), var(--orange-2));
  color:#fff;
  box-shadow:0 16px 34px rgba(226,142,23,.22);
}

.sidebar__count{
  min-width:32px;
  height:32px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:1000;
  background:rgba(0,0,0,.08);
  color:inherit;
}

.sidebar__link.is-active .sidebar__count{
  background:rgba(255,255,255,.18);
  color:#fff;
}

.catalog__content{
  min-width:0;
}

.catalog__panel{
  background:rgba(243,237,228,.82);
  border:1px solid rgba(0,0,0,.06);
  border-radius:28px;
  padding:24px;
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}

.catalog__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
  flex-wrap:wrap;
}

.catalog__heading{
  margin:0;
  font-size:30px;
  line-height:1.1;
  font-weight:1000;
  color:#111;
}

.catalog__subtitle{
  margin:6px 0 0;
  color:#666;
  font-size:14px;
}

.catalog__back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  font-weight:800;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}

.catalog__back:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(0,0,0,.08);
  color:var(--orange);
}

.products-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.product-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display:flex;
  flex-direction:column;
  min-height:360px;
}

.product-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,.14);
  border-color:rgba(226,142,23,.26);
}

.product-card__media{
  position:relative;
  height:220px;
  overflow:hidden;
  background:#fff;
}

.product-card__media img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .8s var(--ease);
}

.product-card:hover .product-card__media img{
  transform:scale(1.06);
}

.product-card__body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  z-index:1;
}

.product-card__title{
  margin:0;
  font-size:18px;
  line-height:1.28;
  font-weight:500;
  text-align:center;
  font-family:Georgia, "Times New Roman", serif;
  min-height:92px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.product-card__link{
  margin-top:auto;
  text-align:right;
  color:#d61414;
  font-size:13px;
  font-weight:500;
  font-family:Georgia, "Times New Roman", serif;
  transition:color .18s var(--ease), transform .18s var(--ease);
}

.product-card:hover .product-card__link{
  color:var(--orange);
  transform:translateX(-4px);
}

.empty-state{
  display:grid;
  place-items:center;
  text-align:center;
  min-height:240px;
  color:#666;
  background:#fff;
  border-radius:18px;
  border:1px dashed rgba(0,0,0,.12);
  padding:24px;
  margin-top:20px;
}

[hidden]{
  display:none !important;
}

/* FOOTER */
.footer--pro{
  background:#3a3a3a;
  color:#fff;
  margin-top:64px;
  position:relative;
  overflow:hidden;
}

.footer--pro::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 12% 18%, rgba(226,142,23,.18), transparent 26%),
    radial-gradient(circle at 88% 0%, rgba(255,255,255,.08), transparent 20%);
  pointer-events:none;
}

.footer__top{
  display:grid;
  grid-template-columns:1.15fr 1fr 1fr 1fr;
  gap:48px;
  padding:56px 0 34px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.footer__logo{
  width:96px;
  margin-bottom:16px;
  object-fit:contain;
}

.footer__brand-text{
  margin:0;
  color:rgba(255,255,255,.72);
  line-height:1.7;
  font-size:15px;
}

.footer__col h3{
  margin:0 0 18px;
  font-size:15px;
  font-weight:900;
  letter-spacing:.3px;
  color:#fff;
  text-transform:uppercase;
}

.footer__links,
.footer__contact{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:10px;
}

.footer__links a,
.footer__contact a,
.footer__map{
  color:rgba(255,255,255,.84);
  transition:color .2s var(--ease);
}

.footer__links a:hover,
.footer__contact a:hover,
.footer__map:hover{
  color:#fff;
}

.footer__col p{
  margin:0 0 14px;
  color:rgba(255,255,255,.82);
  line-height:1.7;
  font-size:15px;
}

.footer__bottom-inner{
  min-height:74px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  text-align:left;
}

.footer__bottom{
  background:#454545;
}

.footer__bottom p{
  margin:0;
  color:rgba(255,255,255,.86);
  font-size:15px;
  line-height:1.6;
}

/* WHATSAPP */
.whatsapp-float{
  position:fixed;
  right:22px;
  bottom:22px;
  width:62px;
  height:62px;
  border-radius:999px;
  background:#25d366;
  display:grid;
  place-items:center;
  box-shadow:0 18px 34px rgba(0,0,0,.20);
  z-index:9999;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}

.whatsapp-float:hover{
  transform:translateY(-4px) scale(1.04);
  box-shadow:0 24px 40px rgba(0,0,0,.24);
  filter:brightness(1.03);
}

.whatsapp-float svg{
  width:30px;
  height:30px;
  fill:#fff;
}

/* ANIM */
.fade-up{
  opacity:0;
  transform:translateY(14px);
  animation:fadeUp .55s var(--ease) forwards;
}

@keyframes fadeUp{
  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* RESPONSIVE */
@media (max-width: 1100px){
  .products-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }

  .footer__top{
    grid-template-columns:1fr 1fr;
    gap:34px 28px;
  }
}

@media (max-width: 980px){
  :root{
    --headerH:188px;
  }

  .header__row{
    grid-template-columns:1fr;
    gap:14px;
  }

  .brand{
    justify-content:center;
  }

  .header__actions{
    justify-content:center;
    flex-wrap:wrap;
  }

  .nav__inner{
    gap:18px;
  }

  .inner-hero__content{
    flex-direction:column;
    align-items:flex-start;
  }

  .catalog__wrap{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
  }

  .sidebar__menu{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
  }
}

@media (max-width: 640px){
  :root{
    --headerH:210px;
  }

  .brand{
    gap:10px;
  }

  .brand__logo{
    width:72px;
    height:72px;
  }

  .brand__text{
    font-size:10px;
    max-width:140px;
  }

  .products-grid{
    grid-template-columns:1fr;
  }

  .catalog__panel{
    padding:18px;
  }

  .sidebar{
    padding:18px;
  }

  .sidebar__menu{
    grid-template-columns:1fr;
  }

  .footer__top{
    grid-template-columns:1fr;
    padding:42px 0 26px;
  }

  .whatsapp-float{
    right:16px;
    bottom:16px;
    width:56px;
    height:56px;
  }

  .whatsapp-float svg{
    width:27px;
    height:27px;
  }
}

/* =========================================================
   AGREGADO PARA categoria/uniones.html
   ========================================================= */

/* HERO UNIONES */
.category-hero{
  position:relative;
  padding:64px 0 44px;
  background:
    linear-gradient(135deg, rgba(226,142,23,.12), rgba(255,255,255,.85)),
    #fff;
  overflow:hidden;
}

.category-hero::before{
  content:"";
  position:absolute;
  inset:auto -120px -120px auto;
  width:360px;
  height:360px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(226,142,23,.18), transparent 70%);
  pointer-events:none;
}

.category-hero__content{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:end;
}

.category-hero__kicker{
  margin:0 0 10px;
  color:var(--orange);
  font-size:14px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
}

.category-hero__title{
  margin:0 0 10px;
  font-size:clamp(2rem, 4vw, 3.2rem);
  line-height:1;
  font-weight:1000;
  color:#111;
}

.category-hero__text{
  margin:0;
  max-width:720px;
  color:#4b4b4b;
  font-size:15px;
  line-height:1.6;
}

.category-hero__badge{
  flex-shrink:0;
  min-width:120px;
  padding:14px 16px;
  border-radius:16px;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:var(--shadow-soft);
  text-align:center;
  overflow:hidden;
}

.category-hero__badge-number{
  display:block;
  font-size:26px;
  line-height:1;
  color:var(--orange);
  font-weight:1000;
}

.category-hero__badge-label{
  display:block;
  font-size:12px;
  margin-top:6px;
  color:#666;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.4px;
}

/* TOP CATALOGO UNIONES */
.section-title--left{
  text-align:left;
}

.catalog__desc{
  margin:6px 0 0;
  color:#666;
  font-size:14px;
}

/* GRID UNIONES */
.catalog__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

/* CARD UNIONES */
.u-card{
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
  display:flex;
  flex-direction:column;
  min-height:400px;
}

.u-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,.14);
  border-color:rgba(226,142,23,.26);
}

.u-card__media{
  position:relative;
  height:280px;
  overflow:hidden;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:12px;
}

.u-card__media img{
  width:auto;
  height:auto;
  max-width:92%;
  max-height:92%;
  object-fit:contain;
  transition:transform .8s var(--ease);
}

.u-card:hover .u-card__media img{
  transform:scale(1.06);
}

.u-card__body{
  padding:18px 18px 20px;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  z-index:1;
}

.u-card__title{
  margin:0;
  font-size:18px;
  line-height:1.28;
  font-weight:500;
  text-align:center;
  font-family:Georgia, "Times New Roman", serif;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.u-card__link{
  margin-top:auto;
  text-align:right;
  color:#d61414;
  font-size:13px;
  font-weight:500;
  font-family:Georgia, "Times New Roman", serif;
  transition:color .18s var(--ease), transform .18s var(--ease);
}

.u-card:hover .u-card__link{
  color:var(--orange);
  transform:translateX(-4px);
}

/* RESPONSIVE NUEVO */
@media (max-width: 1100px){
  .catalog__grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 980px){
  .category-hero__content{
    flex-direction:column;
    align-items:flex-start;
  }
}

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

  .u-card{
    min-height:380px;
  }

  .u-card__media{
    height:250px;
  }

  .u-card__title{
    min-height:60px;
    font-size:17px;
  }
}

/* PRODUCT DETAIL */
.product-detail{
  padding:34px 0 64px;
}

.product-layout{
  display:grid;
  grid-template-columns:minmax(320px, 520px) minmax(0, 1fr);
  gap:26px;
  align-items:start;
}

.product-side{
  display:grid;
  gap:16px;
  align-self:start;
  transition:transform .22s var(--ease);
  will-change:transform;
}

.product-gallery,
.product-info,
.product-block,
.product-cta{
  background:rgba(255,255,255,.92);
  border:1px solid rgba(0,0,0,.08);
  border-radius:24px;
  box-shadow:var(--shadow-soft);
}

.product-gallery{
  padding:18px;
  position:relative;
  top:auto;
  overflow:visible;
  transition:transform .22s var(--ease);
  will-change:transform;
}

.product-stage{
  position:relative;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(180deg, #fff, #f7f2eb);
  min-height:330px;
  display:grid;
  place-items:center;
  cursor:zoom-in;
  transition:transform .22s var(--ease);
  will-change:transform;
}

.product-stage img{
  width:100%;
  height:100%;
  max-width:92%;
  max-height:92%;
  object-fit:contain;
  transform-origin:center center;
  transform:translateY(var(--product-scroll-shift, 0px));
  transition:transform .22s var(--ease);
}

.product-stage.is-zoomed img{
  transform:translateY(var(--product-scroll-shift, 0px)) scale(1.9);
}

.product-gallery--single-image .product-stage{
  min-height:390px;
}

.product-stage img[src*="actuadores-electricos"],
.product-stage img[src*="master-station"]{
  max-width:100%;
  max-height:100%;
  transform:translateY(var(--product-scroll-shift, 0px)) scale(1.08);
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.16));
}

.product-stage.is-zoomed img[src*="actuadores-electricos"],
.product-stage.is-zoomed img[src*="master-station"]{
  transform:translateY(var(--product-scroll-shift, 0px)) scale(1.9);
}

.product-stage__hint{
  position:absolute;
  right:14px;
  bottom:14px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(18,18,18,.72);
  color:#fff;
  font-size:12px;
  font-weight:800;
  pointer-events:none;
}

.product-thumbs{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:12px;
  margin-top:14px;
  transition:transform .22s var(--ease);
  will-change:transform;
}

.product-thumb{
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius:16px;
  padding:10px;
  cursor:pointer;
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
  overflow:hidden;
}

.product-thumb:hover,
.product-thumb.is-active{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(0,0,0,.08);
  border-color:rgba(226,142,23,.34);
}

.product-thumb img{
  width:100%;
  height:88px;
  object-fit:contain;
}

.product-thumb span{
  display:block;
  margin-top:8px;
  font-size:12px;
  font-weight:800;
  color:#555;
  text-align:center;
}

.product-info{
  padding:24px;
  display:grid;
  gap:18px;
}

.product-info__eyebrow{
  margin:0;
  color:var(--orange);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
}

.product-info__eyebrow-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:#fff1f1;
  border:1px solid rgba(198,40,40,.18);
  color:#c62828;
  font-size:11px;
  font-weight:900;
  letter-spacing:.4px;
  text-transform:uppercase;
}

.product-info__title{
  margin:0;
  font-size:clamp(2rem, 4vw, 3rem);
  line-height:1.02;
  font-weight:1000;
}

.product-info__lead{
  margin:0;
  color:#4b4b4b;
  font-size:15px;
  line-height:1.7;
}

.product-meta{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.product-meta__item{
  padding:14px;
  border-radius:18px;
  background:#f7f2ea;
  border:1px solid rgba(0,0,0,.06);
}

.product-meta__label{
  display:block;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.5px;
  color:#7b7b7b;
  font-weight:900;
}

.product-meta__value{
  display:block;
  margin-top:8px;
  font-size:15px;
  line-height:1.4;
  font-weight:800;
  color:#111;
}

.product-stack{
  display:grid;
  gap:18px;
}

.product-block{
  padding:24px;
}

.product-block__title{
  margin:0 0 12px;
  font-size:24px;
  line-height:1.1;
  font-weight:1000;
}

.product-block__text{
  margin:0;
  color:#505050;
  line-height:1.75;
  font-size:15px;
}

.product-block--video{
  background:linear-gradient(135deg, #fff3f3 0%, #ffe3e3 100%);
  border:1px solid rgba(198, 40, 40, .18);
  box-shadow:0 18px 34px rgba(198, 40, 40, .10);
}

.product-block--video .product-block__title{
  color:#b71c1c;
}

.product-block--video .product-block__text a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 16px;
  border-radius:999px;
  background:linear-gradient(135deg, #d32f2f, #ef5350);
  color:#fff;
  font-weight:900;
  line-height:1.2;
  box-shadow:0 14px 30px rgba(211, 47, 47, .28);
  transition:transform .18s var(--ease), box-shadow .18s var(--ease), filter .18s var(--ease);
}

.product-block--video .product-block__text a:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 36px rgba(211, 47, 47, .34);
  filter:brightness(1.03);
}

.product-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:12px;
}

.product-list li{
  padding:14px 16px;
  border-radius:16px;
  background:#fffaf2;
  border:1px solid rgba(226,142,23,.14);
  color:#444;
  line-height:1.65;
}

.product-list strong{
  color:#111;
}

.product-cta{
  padding:24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.product-side .product-cta{
  align-items:flex-start;
  flex-direction:column;
  gap:14px;
  padding:20px;
}

.product-side .product-cta .btn{
  width:100%;
  justify-content:center;
}

.product-cta__text{
  max-width:720px;
}

.product-cta__title{
  margin:0 0 8px;
  font-size:22px;
  font-weight:1000;
}

.product-cta__desc{
  margin:0;
  color:#555;
  line-height:1.7;
}

.related-products{
  padding:0 0 8px;
}

.related-products .container{
  width:min(var(--container), calc(100% - 32px));
}

.related-products__head{
  margin:0 auto 22px;
  max-width:820px;
  text-align:center;
}

.related-products__eyebrow{
  margin:0 0 10px;
  color:var(--orange);
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.related-products__title{
  margin:0;
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  line-height:1.05;
  font-weight:1000;
}

.related-products__text{
  margin:12px auto 0;
  max-width:680px;
  color:#555;
  line-height:1.75;
  font-size:15px;
}

.related-products__grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.related-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:360px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  background:rgba(255,255,255,.92);
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.related-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(242,162,58,.18), transparent 44%);
  opacity:0;
  transition:opacity .28s var(--ease);
  pointer-events:none;
}

.related-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,.14);
  border-color:rgba(226,142,23,.26);
}

.related-card:hover::before{
  opacity:1;
}

.related-card__media{
  height:240px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  background:linear-gradient(180deg, #fff, #f7f2eb);
}

.related-card__media img{
  width:auto;
  height:auto;
  max-width:92%;
  max-height:92%;
  object-fit:contain;
  transition:transform .8s var(--ease);
}

.related-card:hover .related-card__media img{
  transform:scale(1.06);
}

.u-card__media img[src*="actuadores-electricos"],
.u-card__media img[src*="master-station"],
.related-card__media img[src*="actuadores-electricos"],
.related-card__media img[src*="master-station"]{
  max-width:100%;
  max-height:100%;
  transform:scale(1.16);
  filter:drop-shadow(0 16px 18px rgba(0,0,0,.14));
}

.u-card:hover .u-card__media img[src*="actuadores-electricos"],
.u-card:hover .u-card__media img[src*="master-station"],
.related-card:hover .related-card__media img[src*="actuadores-electricos"],
.related-card:hover .related-card__media img[src*="master-station"]{
  transform:scale(1.22);
}

.related-card__body{
  position:relative;
  z-index:1;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:12px;
  padding:18px 18px 20px;
}

.related-card__title{
  margin:0;
  min-height:72px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:Georgia, "Times New Roman", serif;
  font-size:18px;
  font-weight:500;
  line-height:1.28;
  text-align:center;
}

.related-card__link{
  margin-top:auto;
  text-align:right;
  color:#d61414;
  font-size:13px;
  font-weight:500;
  font-family:Georgia, "Times New Roman", serif;
  transition:color .18s var(--ease), transform .18s var(--ease);
}

.related-card:hover .related-card__link{
  color:var(--orange);
  transform:translateX(-4px);
}

.business-reco{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid rgba(0,0,0,.08);
}

.business-reco__head{
  margin:0 auto 22px;
  max-width:860px;
  text-align:center;
}

.business-reco__eyebrow{
  margin:0 0 10px;
  color:var(--orange);
  font-size:13px;
  font-weight:900;
  letter-spacing:.6px;
  text-transform:uppercase;
}

.business-reco__title{
  margin:0;
  font-size:clamp(1.7rem, 3vw, 2.3rem);
  line-height:1.08;
  font-weight:1000;
}

.business-reco__text{
  margin:12px auto 0;
  max-width:720px;
  color:#555;
  line-height:1.75;
  font-size:15px;
}

.business-reco__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
}

.business-reco-card{
  position:relative;
  isolation:isolate;
  display:flex;
  flex-direction:column;
  min-height:100%;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.08);
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,242,234,.96));
  box-shadow:var(--shadow-soft);
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease);
}

.business-reco-card::before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(242,162,58,.16), transparent 44%);
  opacity:0;
  transition:opacity .28s var(--ease);
  pointer-events:none;
}

.business-reco-card:hover{
  transform:translateY(-6px);
  box-shadow:0 22px 45px rgba(0,0,0,.14);
  border-color:rgba(226,142,23,.26);
}

.business-reco-card:hover::before{
  opacity:1;
}

.business-reco-card__media{
  display:flex;
  align-items:center;
  justify-content:center;
  height:140px;
  padding:18px;
  background:#fff;
}

.business-reco-card__media img{
  width:auto;
  height:auto;
  max-width:90%;
  max-height:90%;
  object-fit:contain;
}

.business-reco-card__body{
  position:relative;
  z-index:1;
  display:flex;
  flex:1;
  flex-direction:column;
  gap:12px;
  padding:18px 18px 20px;
}

.business-reco-card__title{
  margin:0;
  font-size:18px;
  line-height:1.2;
  font-weight:900;
  text-align:center;
}

.business-reco-card__text{
  margin:0;
  color:#555;
  line-height:1.65;
  font-size:14px;
  text-align:center;
}

.business-reco-card__link{
  margin-top:auto;
  text-align:center;
  color:#d61414;
  font-size:13px;
  font-weight:800;
  transition:color .18s var(--ease), transform .18s var(--ease);
}

.business-reco-card:hover .business-reco-card__link{
  color:var(--orange);
  transform:translateY(-1px);
}

@media (max-width: 1100px){
  .product-layout{
    grid-template-columns:1fr;
  }

  .product-side,
  .product-gallery{
    position:static;
    transform:none !important;
  }

  .related-products__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
  }

  .business-reco__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 700px){
  .product-stage{
    min-height:300px;
  }

  .product-meta{
    grid-template-columns:1fr;
  }

  .product-thumbs{
    grid-template-columns:1fr;
  }

  .related-products__grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:12px;
  }

  .related-card{
    min-height:0;
    border-radius:14px;
  }

  .related-card__media{
    height:auto;
    aspect-ratio:1 / 1;
    padding:8px;
  }

  .related-card__body{
    flex:none;
    padding:10px 8px 11px;
    gap:0;
  }

  .related-card__title{
    min-height:0;
    font-size:12px;
    line-height:1.15;
  }

  .related-card__link{
    display:none;
  }

  .business-reco__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .business-reco-card{
    min-height:0;
    border-radius:16px;
  }

  .business-reco-card__media{
    height:96px;
    padding:12px;
  }

  .business-reco-card__body{
    flex:none;
    padding:12px 10px 14px;
    gap:0;
  }

  .business-reco-card__title{
    font-size:14px;
    line-height:1.15;
  }

  .business-reco-card__text,
  .business-reco-card__link{
    display:none;
  }
}

/* RESPONSIVE REFINADO */
@media (max-width: 1024px){
  :root{
    --headerH: 206px;
  }

  .container{
    width:min(var(--container), calc(100% - 28px));
  }

  .header__row{
    grid-template-columns:1fr;
    gap:14px;
    padding:14px 0 12px;
  }

  .brand,
  .header__actions{
    justify-content:center;
  }

  .brand{
    min-width:0;
    width:100%;
  }

  .brand__text{
    max-width:220px;
    text-align:center;
  }

  .search{
    width:100%;
  }

  .search__inner{
    max-width:720px;
    margin-inline:auto;
  }

  .header__actions .btn{
    min-width:190px;
  }

  .nav__inner{
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:14px;
    min-height:50px;
    padding:8px 2px 12px;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }

  .nav__inner::-webkit-scrollbar{
    display:none;
  }

  .nav__link{
    flex:0 0 auto;
    white-space:nowrap;
  }

  .nav__line{
    display:none;
  }

  .category-hero,
  .inner-hero{
    padding:52px 0 34px;
  }

  .category-hero__content,
  .inner-hero__content{
    flex-direction:column;
    align-items:flex-start;
  }

  .catalog__grid,
  .products-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .catalog__wrap,
  .product-layout{
    grid-template-columns:1fr;
  }

  .sidebar{
    position:static;
  }

  .product-side,
  .product-gallery{
    position:static;
    transform:none !important;
    top:auto;
  }

  .footer__top{
    grid-template-columns:1fr 1fr;
    gap:32px 24px;
  }
}

@media (max-width: 768px){
  :root{
    --headerH: 214px;
  }

  .container{
    width:min(var(--container), calc(100% - 22px));
  }

  .brand{
    gap:10px;
    flex-direction:column;
  }

  .brand__logo{
    width:72px;
    height:72px;
  }

  .brand__text{
    max-width:160px;
    font-size:10px;
    line-height:1.08;
    text-align:center;
  }

  .search__inner{
    height:44px;
    max-width:none;
  }

  .search input{
    font-size:16px;
  }

  .header__actions{
    width:100%;
  }

  .header__actions .btn{
    width:100%;
    min-width:0;
  }

  .catalog__top{
    align-items:flex-start;
  }

  .catalog__back{
    width:100%;
    justify-content:center;
  }

  .category-hero__badge{
    width:auto;
    max-width:none;
    min-width:0;
  }

  .sidebar,
  .catalog__panel,
  .product-gallery,
  .product-info,
  .product-block,
  .product-cta{
    border-radius:22px;
  }

  .sidebar__menu{
    grid-template-columns:1fr;
  }

  .catalog__grid,
  .products-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:10px;
  }

  .products-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  .u-card,
  .product-card{
    min-height:auto;
    border-radius:14px;
  }

  .u-card__media{
    height:auto;
    aspect-ratio:1 / 1;
    padding:8px;
  }

  .u-card__body{
    flex:none;
    padding:10px 6px 11px;
    gap:0;
  }

  .u-card__title{
    min-height:0;
    font-size:12px;
    line-height:1.12;
  }

  .u-card__link{
    display:none;
  }

  .product-card__media{
    height:auto;
    aspect-ratio:1 / 1;
  }

  .product-card__body{
    flex:none;
    padding:11px 8px 12px;
    gap:0;
  }

  .product-card__title{
    min-height:0;
    font-size:14px;
    line-height:1.14;
  }

  .product-card__link{
    display:none;
  }

  .product-stage{
    min-height:280px;
  }

  .product-thumbs,
  .product-meta{
    grid-template-columns:1fr;
  }

  .product-cta{
    align-items:flex-start;
  }

  .product-cta .btn{
    width:100%;
    justify-content:center;
  }

  .footer__top{
    grid-template-columns:1fr;
    gap:28px;
    padding:40px 0 24px;
    text-align:left;
  }

  .footer__logo{
    margin-inline:0;
  }

  .footer__links,
  .footer__contact{
    justify-items:start;
  }
}

@media (max-width: 480px){
  :root{
    --headerH: 222px;
  }

  .container{
    width:min(var(--container), calc(100% - 18px));
  }

  .nav__inner{
    gap:10px;
    min-height:46px;
  }

  .nav__link{
    min-height:36px;
    padding:8px 6px;
    font-size:13px;
  }

  .category-hero__title,
  .inner-hero__title,
  .product-info__title{
    font-size:clamp(1.9rem, 9vw, 2.5rem);
  }

  .category-hero__text,
  .inner-hero__text,
  .product-info__lead,
  .product-block__text{
    font-size:14px;
  }

  .catalog__panel,
  .sidebar,
  .product-gallery,
  .product-info,
  .product-block,
  .product-cta{
    padding:18px;
  }

  .category-hero,
  .inner-hero{
    padding:28px 0 24px;
  }

  .breadcrumb{
    display:none;
  }

  .category-hero__content,
  .inner-hero__content{
    gap:16px;
    align-items:flex-start;
  }

  .category-hero__kicker{
    margin-bottom:8px;
    font-size:12px;
    letter-spacing:.7px;
  }

  .category-hero__title{
    max-width:340px;
    margin-bottom:8px;
    font-size:clamp(2rem, 10vw, 2.75rem);
    line-height:.98;
  }

  .category-hero__text{
    max-width:360px;
    line-height:1.55;
  }

  .category-hero__badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:9px 12px;
    border-radius:14px;
    box-shadow:0 8px 18px rgba(0,0,0,.08);
  }

  .category-hero__badge-number{
    font-size:22px;
  }

  .category-hero__badge-label{
    margin-top:0;
    font-size:11px;
  }

  .catalog{
    padding:26px 0 54px;
  }

  .catalog__top{
    gap:14px;
    margin-bottom:18px;
  }

  .section-title--left{
    font-size:25px;
    line-height:1.08;
  }

  .catalog__desc{
    margin-top:8px;
    line-height:1.55;
  }

  .catalog__back{
    padding:11px 14px;
    border-radius:16px;
  }

  .u-card__media{
    height:auto;
  }

  .product-stage{
    min-height:240px;
  }

  .whatsapp-float{
    right:12px;
    bottom:12px;
  }
}

/* TOPBAR UNIFICADO CON INDEX */
@media (max-width: 768px){
  :root{
    --headerH:146px;
    --fixedH:146px;
  }

  .header__row{
    grid-template-columns:64px minmax(0, 1fr);
    align-items:center;
    gap:10px;
    padding:10px 0;
  }

  .brand{
    width:auto;
    min-width:0;
    gap:0;
    flex-direction:row;
    justify-content:flex-start;
  }

  .brand__logo{
    width:64px;
    height:64px;
  }

  .brand__text{
    display:none;
  }

  .search{
    width:100%;
  }

  .search__inner{
    height:42px;
    max-width:none;
    margin:0;
  }

  .search input{
    font-size:15px;
    padding:0 14px;
  }

  .search__btn{
    width:52px;
  }

  .header__actions{
    display:none;
  }

  .nav{
    border-bottom-width:3px;
  }

  .nav__inner{
    justify-content:space-between;
    flex-wrap:nowrap;
    gap:8px;
    min-height:48px;
    padding:8px 0 9px;
    overflow:visible;
  }

  .nav__link{
    flex:1 1 0;
    min-width:0;
    min-height:34px;
    padding:6px 4px;
    font-size:13px;
    text-align:center;
    white-space:nowrap;
  }
}

@media (max-width: 480px){
  :root{
    --headerH:138px;
    --fixedH:138px;
  }

  .header__row{
    grid-template-columns:58px minmax(0, 1fr);
    gap:8px;
    padding:10px 0;
  }

  .brand__logo{
    width:58px;
    height:58px;
  }

  .search__inner{
    height:40px;
  }

  .search input{
    font-size:14px;
  }

  .nav__inner{
    gap:4px;
    min-height:42px;
  }

  .nav__link{
    min-height:32px;
    padding:6px 2px;
    font-size:11px;
    letter-spacing:-.1px;
  }
}

/* Header consistency with the home topbar */
.header .container{
  width:min(1180px, calc(100% - 32px));
}

@media (max-width: 1024px){
  .header .container{
    width:min(1180px, calc(100% - 28px));
  }
}

@media (max-width: 768px){
  .header .container{
    width:min(1180px, calc(100% - 22px));
  }
}