/* ============================= TOKENS ============================= */
:root{
  --bg:#F8FAF9; --surface:#FFFFFF; --surface-alt:#F1F5F9;
  --top-bar-bg:#0A192F; --top-bar-text:#E2E8F0;
  --panel-deep:#0A192F; --panel-deep-2:#0F2148; --panel-deep-text:#F8FAFC; --panel-deep-muted:#94A3B8; --panel-deep-line:#1E293B;
  --text:#0F172A; --text-muted:#475569; --text-soft:#64748B;
  --border:#E2E8F0; --border-strong:#CBD5E1;
  --brand:#0B4FD6; --brand-strong:#093EB5; --brand-soft:#EFF6FF; --sky:#3B82F6;
  --accent-gold:#D97706; --accent-gold-dark:#B45309; --accent-gold-soft:#FEF3C7; --accent-gold-hover:#F59E0B;
  --shadow-sm:0 1px 3px rgba(15,23,42,.06);
  --shadow-md:0 10px 25px -5px rgba(15,23,42,.08), 0 8px 10px -6px rgba(15,23,42,.04);
  --shadow-lg:0 20px 40px -15px rgba(15,23,42,.12);
  --radius-sm:8px; --radius-md:12px; --radius-lg:20px;
  --status-info:#0B4FD6; --status-info-bg:#EFF6FF;
  --status-progress:#D97706; --status-progress-bg:#FEF3C7;
  --status-warehouse:#7C3AED; --status-warehouse-bg:#F5F3FF;
  --status-ready:#0284C7; --status-ready-bg:#E0F2FE;
  --status-shipped:#2563EB; --status-shipped-bg:#EFF6FF;
  --status-success:#166534; --status-success-bg:#DCFCE7;
  --status-danger:#991B1B; --status-danger-bg:#FEE2E2;
  --status-neutral:#475569; --status-neutral-bg:#F1F5F9;
  --font-display:'Archivo',system-ui,sans-serif;
  --font-body:'Public Sans',system-ui,-apple-system,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',monospace;
  --maxw:1260px;
  --header-h:130px;
}

/* ============================= RESET / BASE ============================= */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:15.5px; line-height:1.55;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
button{font:inherit; color:inherit;}
ul,ol{margin:0; padding:0; list-style:none;}
h1,h2,h3,h4{font-family:var(--font-display); margin:0; text-wrap:balance; letter-spacing:-0.01em;}
p{margin:0;}
input,textarea,select{font:inherit; color:inherit; background:none; border:none;}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px; border-radius:4px;}
::selection{background:var(--brand); color:#fff;}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important;}
}
html{scroll-behavior:smooth;}
.sr-only, svg.sr-only{position:absolute !important; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0,0,0,0) !important; white-space:nowrap !important; border:0 !important;}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 24px;}
@media (max-width:640px){ .wrap{padding:0 16px;} }

.eyebrow{
  display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono);
  font-size:12px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
  color:var(--brand);
}
.eyebrow::before{content:""; width:18px; height:2px; background:var(--brand); display:inline-block; border-radius:2px;}

.h2{font-size:clamp(26px,3.4vw,40px); font-weight:800; color:var(--text);}
.h3{font-size:20px; font-weight:700;}
.lede{font-size:17px; color:var(--text-muted); max-width:60ch; line-height:1.6;}
.section{padding:72px 0;}
@media (max-width:760px){ .section{padding:50px 0;} }
.section-head{display:flex; flex-direction:column; gap:14px; margin-bottom:36px;}
.section-head-row{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:32px;}
.h2-accent{font-size:clamp(24px,3vw,34px); font-weight:800; color:#0F172A; position:relative; padding-bottom:10px;}
.h2-accent::after{content:""; position:absolute; bottom:0; left:0; width:54px; height:4px; background:var(--accent-gold); border-radius:999px;}
.link-more{font-weight:700; color:var(--brand); font-size:14.5px; transition:color .18s ease;}
.link-more:hover{color:var(--accent-gold); text-decoration:underline;}

.section-alt{background:var(--surface-alt);}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:12px 22px; border-radius:999px; font-weight:700; font-size:14.5px;
  cursor:pointer; border:1.5px solid transparent; transition:transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--brand); color:#fff; box-shadow:0 6px 18px -4px rgba(11,79,214,.4);}
.btn-primary:hover{background:var(--brand-strong); box-shadow:0 10px 24px -4px rgba(11,79,214,.5);}
.btn-outline-gold{background:#fff; border:2px solid var(--accent-gold); color:var(--accent-gold-dark); box-shadow:0 2px 8px rgba(217,119,6,.08);}
.btn-outline-gold:hover{background:var(--accent-gold-soft); border-color:var(--accent-gold-hover);}
.btn-ghost{background:transparent; border-color:var(--border-strong); color:var(--text);}
.btn-ghost:hover{border-color:var(--brand); color:var(--brand);}
.btn-light{background:#fff; color:var(--brand-strong);}
.btn-light:hover{background:#eef3ff;}
.btn-outline-light{background:transparent; border-color:rgba(255,255,255,.4); color:var(--panel-deep-text);}
.btn-outline-light:hover{border-color:#fff; background:rgba(255,255,255,.08);}
.btn-sm{padding:8px 16px; font-size:13.5px;}
.btn-block{width:100%;}
.btn[disabled],.btn.is-disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}
.btn-danger{background:transparent; border-color:var(--status-danger); color:var(--status-danger);}
.btn-danger:hover{background:var(--status-danger-bg);}
.icon{width:1em; height:1em; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0;}
.icon-fill{fill:currentColor; stroke:none;}

.card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:box-shadow .28s ease, transform .28s ease, border-color .28s ease;}
.card-hover:hover{box-shadow:var(--shadow-md); transform:translateY(-3px); border-color:var(--border-strong);}

.badge{display:inline-flex; align-items:center; gap:6px; font-family:var(--font-mono); font-size:12px; font-weight:600; padding:4px 10px; border-radius:999px; letter-spacing:.02em;}
section[id]{scroll-margin-top:calc(var(--header-h) + 10px);}

/* ============================= TOP ANNOUNCEMENT BAR ============================= */
.top-bar{background:var(--top-bar-bg); color:var(--top-bar-text); font-size:12px; font-weight:500; padding:5px 0; border-bottom:1px solid rgba(255,255,255,.08);}
.top-bar-inner{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.top-bar-left{display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
.top-bar-left span, .top-bar-right span{display:inline-flex; align-items:center; gap:5px;}
.top-bar-left .sep{color:rgba(255,255,255,.25); font-weight:300;}
.top-bar .icon{font-size:13px; opacity:.9;}
@media (max-width:768px){
  .top-bar-right{display:none;}
  .top-bar-left{justify-content:center; font-size:11px;}
}

/* ============================= HEADER (2-TIER) ============================= */
#site-header{
  position:sticky; top:0; z-index:60; background:#FFFFFF;
  border-bottom:1px solid var(--border); transition:box-shadow .3s ease;
}
#site-header.is-scrolled{box-shadow:0 8px 24px -10px rgba(15,23,42,.1);}
.header-inner-wrap{display:flex; flex-direction:column;}

.header-top{display:flex; align-items:center; justify-content:space-between; gap:20px; padding:8px 0;}
.brand{display:flex; align-items:center; gap:10px; flex-shrink:0;}
.brand img{height:42px; width:auto;}

.header-search{flex:1; max-width:500px;}
.search-form-hdr{display:flex; align-items:center; background:#F8FAFC; border:1.5px solid #CBD5E1; border-radius:999px; padding:2px 2px 2px 14px; transition:border-color .2s ease, box-shadow .2s ease;}
.search-form-hdr:focus-within{border-color:var(--brand); box-shadow:0 0 0 3px rgba(11,79,214,.12); background:#FFFFFF;}
.search-form-hdr input{flex:1; border:none; outline:none; font-size:13.5px; color:#0F172A;}
.search-form-hdr input::placeholder{color:#94A3B8;}
.btn-hdr-search{background:var(--brand); color:#fff; border:none; border-radius:999px; padding:6px 16px; font-weight:700; font-size:13px; display:inline-flex; align-items:center; gap:5px; cursor:pointer; transition:background .18s ease;}
.btn-hdr-search:hover{background:var(--brand-strong);}

.header-widgets{display:flex; align-items:center; gap:16px; flex-shrink:0;}
.hdr-widget{display:inline-flex; align-items:center; gap:8px; color:#0F172A; text-decoration:none; position:relative; cursor:pointer; background:none; border:none; padding:0;}
.hdr-widget .icon{font-size:22px; color:var(--brand);}
.hdr-widget-text{display:flex; flex-direction:column; text-align:left; line-height:1.15;}
.hdr-widget-title{font-size:12.5px; font-weight:700; color:#0F172A;}
.hdr-widget-sub{font-size:11px; color:#64748B;}

.hdr-cart-badge{
  position:absolute; top:-5px; left:14px; background:var(--accent-gold); color:#FFFFFF;
  font-size:10.5px; font-weight:800; min-width:17px; height:17px; border-radius:999px;
  display:inline-flex; align-items:center; justify-content:center; padding:0 4px; box-shadow:0 2px 6px rgba(217,119,6,.35);
}

.header-nav-bar{border-top:1px solid #F1F5F9; padding:0; display:flex; justify-content:center;}
.main-nav{display:flex; align-items:center; justify-content:center; gap:4px; margin:0 auto;}
.main-nav a{
  padding:8px 14px; font-size:13.8px; font-weight:600; color:#334155;
  position:relative; transition:color .18s ease; display:inline-flex; align-items:center; gap:3px;
}
.main-nav a small{font-size:9.5px; opacity:.65;}
.main-nav a:hover{color:var(--brand);}
.main-nav a.is-active{color:#0F172A; font-weight:700;}
.main-nav a.is-active::after{content:""; position:absolute; bottom:0; left:14px; right:14px; height:3px; background:var(--accent-gold); border-radius:999px;}

.menu-toggle{display:none; background:none; border:none; padding:8px; font-size:22px; cursor:pointer; color:#0F172A;}

@media (max-width:960px){
  .header-search{display:none;}
  .hdr-widget-text{display:none;}
  .menu-toggle{display:block;}
  .main-nav{display:none;}
}

#mobile-nav{position:fixed; inset:var(--header-h) 0 0 0; background:var(--surface); z-index:59; transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease, transform .2s ease; overflow-y:auto;}
#mobile-nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
#mobile-nav .wrap{padding-top:22px; padding-bottom:32px; display:flex; flex-direction:column; gap:4px;}
#mobile-nav a{font-family:var(--font-display); font-size:22px; font-weight:800; padding:14px 4px; border-bottom:1px solid var(--border); color:var(--text);}
#mobile-nav .mobile-actions{display:flex; flex-direction:column; gap:10px; margin-top:22px;}

/* ============================= HERO INTEGRADO (DEGRADADO Y FONDO) ============================= */
.hero-integrated {
  position: relative;
  min-height: 540px;
  display: flex;
  align-items: center;
  background-image: url('/assets/images/hero-solar.jpg');
  background-size: cover;
  background-position: center right;
  overflow: hidden;
}

.hero-integrated::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    rgba(10, 25, 47, 0.90) 0%,
    rgba(10, 25, 47, 0.68) 45%,
    rgba(10, 25, 47, 0.20) 75%,
    rgba(10, 25, 47, 0) 100%
  );
  z-index: 1;
}

.hero-wrap {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 72px 24px 76px;
}

.hero-content {
  max-width: 600px;
}

.hero-content h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 56px);
  font-weight: 900;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 20px;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.hero-content p {
  font-size: 18px;
  font-weight: 600;
  color: #F1F5F9;
  line-height: 1.6;
  margin-bottom: 34px;
  max-width: 48ch;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.hero-bottom-features {
  position: absolute;
  bottom: 48px;
  right: 28px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(10, 25, 47, 0.85);
  backdrop-filter: blur(10px);
  color: #FFFFFF;
  padding: 8px 20px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}
.hero-bottom-features span { display: inline-flex; align-items: center; gap: 6px; }
.hero-bottom-features .sep { opacity: 0.35; font-weight: 300; }
.hero-bottom-features .icon { font-size: 14px; color: var(--accent-gold); }
@media (max-width: 880px) { .hero-bottom-features { display: none; } }

@media (max-width: 768px) {
  .hero-integrated {
    min-height: auto;
    background-position: center center;
  }
  .hero-integrated::before {
    background: linear-gradient(
      180deg,
      rgba(10, 25, 47, 0.92) 0%,
      rgba(10, 25, 47, 0.75) 70%,
      rgba(10, 25, 47, 0.35) 100%
    );
  }
  .hero-wrap {
    padding: 44px 18px 54px;
  }
  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ============================= TRUST BAR ============================= */
.trust-bar{
  margin: -28px auto 40px; position: relative; z-index: 10;
  padding: 20px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
  background: #FFFFFF; border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: 0 10px 30px -10px rgba(15,23,42,.1);
}
@media (max-width: 900px){
  .trust-bar{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 10px 4px;
    margin-top: 10px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .trust-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
    min-width: 0;
    padding: 0 1px;
  }
  .trust-text{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .trust-item .icon{
    font-size: 20px;
    color: var(--brand);
    flex-shrink: 0;
  }
  .trust-title{
    font-size: 10px;
    font-weight: 700;
    line-height: 1.15;
    word-break: normal;
    white-space: normal;
  }
  .trust-sub{
    display: none;
  }
}
.trust-item{ display: flex; align-items: center; gap: 14px; }
.trust-item .icon{ font-size: 32px; color: var(--brand); flex-shrink: 0; }
.trust-text{ display: flex; flex-direction: column; line-height: 1.25; }
.trust-title{ font-weight: 800; font-size: 14.5px; color: #0F172A; }
.trust-sub{ font-size: 12.5px; color: #64748B; margin-top: 2px; }

/* ============================= SECCIÓN OFERTAS ============================= */
.section-offers {
  padding: 42px 0 32px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F1F5F9 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.offers-header {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 24px;
}

.offers-head-title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.offers-head-title-wrap .eyebrow {
  justify-content: center;
}

.offers-head-title-wrap .eyebrow::before {
  display: none;
}

.offers-title-animated {
  font-family: var(--font-display);
  font-size: clamp(28px, 4.5vw, 42px);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #0A192F;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  margin-top: 6px;
}

.offers-title-animated .letter {
  display: inline-block;
  opacity: 0;
  transform: translateY(12px) scale(0.8);
  animation: spellLetter 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

@keyframes spellLetter {
  0% {
    opacity: 0;
    transform: translateY(12px) scale(0.8);
    color: var(--accent-gold);
  }
  50% {
    color: var(--brand);
    transform: translateY(-4px) scale(1.15);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    color: #0A192F;
  }
}

.offers-title-animated .letter:nth-child(1) { animation-delay: 0.1s; }
.offers-title-animated .letter:nth-child(2) { animation-delay: 0.2s; }
.offers-title-animated .letter:nth-child(3) { animation-delay: 0.3s; }
.offers-title-animated .letter:nth-child(4) { animation-delay: 0.4s; }
.offers-title-animated .letter:nth-child(5) { animation-delay: 0.5s; }
.offers-title-animated .letter:nth-child(6) { animation-delay: 0.6s; }
.offers-title-animated .letter:nth-child(7) { animation-delay: 0.7s; }

.offers-badge-fire {
  display: inline-block;
  font-size: 0.85em;
  animation: firePulse 1.8s infinite ease-in-out;
  margin-left: 6px;
}

@keyframes firePulse {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.25) rotate(-6deg); }
}

.offers-carousel-wrap {
  position: relative;
  width: 100%;
}

.offers-track {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 6px 4px 16px;
}

.offers-track::-webkit-scrollbar {
  display: none;
}

.offer-card {
  flex: 0 0 270px;
  min-width: 270px;
  display: flex;
  flex-direction: column;
  background: #FFFFFF;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  height: 100%;
}

.offer-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px -6px rgba(11, 79, 214, 0.18);
  border-color: var(--brand);
}

.offer-card .pm-img {
  height: 180px;
  background: #F8FAFC;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid #F1F5F9;
  cursor: pointer;
}

.offer-card .pm-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px;
  transition: transform 0.3s ease;
}

.offer-card:hover .pm-img img {
  transform: scale(1.05);
}

.offer-card .pm-body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.offer-card .pm-sub {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand);
  margin-bottom: 4px;
}

.offer-card .pm-title {
  font-size: 14.5px;
  font-weight: 800;
  color: #0F172A;
  margin-bottom: 8px;
  line-height: 1.3;
  text-align: center;
  min-height: 2.6em;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.offer-card .pm-price-wrap {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin-bottom: 12px;
}

.offer-card .pm-price {
  font-size: 17px;
  font-weight: 800;
  color: var(--brand);
  font-family: var(--font-mono);
}

.offer-card .pm-price-old {
  font-size: 12px;
  text-decoration: line-through;
  color: #94A3B8;
  font-family: var(--font-mono);
}

.offer-card .btn-add-cart {
  width: 100%;
  background: var(--brand);
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px -2px rgba(11, 79, 214, 0.3);
}

.offer-card .btn-add-cart:hover {
  background: var(--brand-strong);
  transform: translateY(-1px);
}

.offer-card .btn-ask-price {
  width: 100%;
  background: #166534;
  color: #FFFFFF;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  font-weight: 700;
  font-size: 13.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.15s ease;
  box-shadow: 0 4px 12px -2px rgba(22, 101, 52, 0.3);
}

.offer-card .btn-ask-price:hover {
  background: #14532d;
  transform: translateY(-1px);
}

.offer-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  background: linear-gradient(135deg, #D97706 0%, #DC2626 100%);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  box-shadow: 0 3px 8px rgba(220, 38, 38, 0.35);
}

.offers-nav-btns {
  position: absolute;
  right: 0;
  bottom: 0;
  display: flex;
  gap: 8px;
}

.carousel-nav-btn {
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: #FFFFFF;
  border: 1.5px solid var(--border-strong);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.carousel-nav-btn:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #FFFFFF;
}

@media (max-width: 640px) {
  .offers-nav-btns {
    display: none !important;
  }
  .offer-card {
    flex: 0 0 220px;
    min-width: 220px;
  }
}

/* ============================= MODAL TABS ============================= */
.modal-tabs {
  display: flex;
  gap: 8px;
  border-bottom: 2px solid var(--border, #E2E8F0);
  margin-top: 14px;
  margin-bottom: 12px;
}

.modal-tab {
  background: transparent;
  border: none;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-muted, #64748B);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.modal-tab:hover {
  color: var(--brand, #0B4FD6);
}

.modal-tab.is-active {
  color: var(--brand, #0B4FD6);
  border-bottom-color: var(--brand, #0B4FD6);
}

.modal-tab-panes {
  min-height: 70px;
  padding: 4px 0;
}

.modal-tab-pane {
  animation: fadeIn 0.2s ease;
}


/* ============================= PRODUCT CARD MODERN ============================= */
.product-card-modern{
  display: flex; flex-direction: column; background: #FFFFFF; border: 1px solid var(--border);
  border-radius: var(--radius-md); overflow: hidden; transition: transform .22s ease, box-shadow .22s ease;
  height: 100%;
}
.product-card-modern:hover{ transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--border-strong); }
.product-card-modern .pm-img{ height: 190px; background: #F8FAFC; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; border-bottom: 1px solid #F1F5F9; }
.product-card-modern .pm-img img{ width: 100%; height: 100%; object-fit: contain; padding: 12px; transition: transform .3s ease; }
.product-card-modern:hover .pm-img img{ transform: scale(1.05); }
.product-card-modern .pm-body{ padding: 16px; display: flex; flex-direction: column; flex: 1; justify-content: space-between; }
.product-card-modern .pm-title{ font-size: 15px; font-weight: 800; color: #0F172A; margin-bottom: 4px; line-height: 1.3; }
.product-card-modern .pm-sub{ font-size: 12px; color: #64748B; margin-bottom: 12px; }
.product-card-modern .pm-price{ font-size: 18px; font-weight: 800; color: #0B4FD6; margin-bottom: 12px; }
.product-card-modern .btn-add-cart{
  width: 100%; background: #0B4FD6; color: #FFFFFF; border: none; border-radius: 8px;
  padding: 10px; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; transition: background .18s ease;
}
.product-card-modern .btn-add-cart:hover{ background: #093EB5; }


/* ============================= DIVISIONS ============================= */
.divisions-head{text-align:center; max-width:760px; margin:0 auto 52px; display:flex; flex-direction:column; align-items:center; gap:16px;}
.divisions-head .eyebrow{justify-content:center;}
.divisions-head .eyebrow::before{display:none;}
.divisions-head h2{font-size:clamp(28px,4vw,42px); font-weight:900; line-height:1.06;}
.divisions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
@media (max-width:900px){ .divisions-grid{grid-template-columns:1fr;} }
.division-card{padding:34px 28px; display:flex; flex-direction:column; gap:16px; position:relative;}
.division-card .tag{align-self:flex-start; font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.1em; padding:5px 11px; border-radius:999px;}
.tag-si{background:#E7EEFB; color:#0A3EA8;}
.tag-gs{background:#E4F5EC; color:#187A4E;}
.tag-hs{background:#FBF0DC; color:#9A6400;}
:root[data-theme="dark"] .tag-si{background:#12213F;color:#8FB4FF;}
:root[data-theme="dark"] .tag-gs{background:#0E2A1F;color:#49C48D;}
:root[data-theme="dark"] .tag-hs{background:#2B2210;color:#E0A93B;}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .tag-si{background:#12213F;color:#8FB4FF;}
  :root:not([data-theme="light"]) .tag-gs{background:#0E2A1F;color:#49C48D;}
  :root:not([data-theme="light"]) .tag-hs{background:#2B2210;color:#E0A93B;}
}
.division-card .dv-icon{width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--brand-soft); color:var(--brand-strong);}
.division-card h3{font-size:22px; font-weight:800;}
.division-card .sub{font-family:var(--font-mono); font-size:11.5px; color:var(--text-soft); letter-spacing:.03em; text-transform:uppercase; font-weight:600;}
.division-card p{color:var(--text-muted); font-size:15px; flex-grow:1;}
.division-card .btn{align-self:flex-start; margin-top:6px;}

/* ============================= GENERIC SUBSECTION HEADER ============================= */
.sub-hero{padding:70px 0 40px; position:relative;}
.sub-hero .eyebrow{margin-bottom:16px;}
.sub-hero h2{font-size:clamp(30px,4.6vw,48px); font-weight:900;}
.sub-hero .kicker{font-family:var(--font-mono); font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-soft); font-weight:600; margin-top:6px;}
.sub-hero blockquote{font-size:19px; font-style:normal; color:var(--text); font-weight:600; max-width:56ch; margin-top:20px; padding-left:18px; border-left:3px solid var(--brand);}

.pillars{display:flex; gap:14px; flex-wrap:wrap; margin:30px 0 6px;}
.pillar{display:flex; align-items:center; gap:9px; padding:10px 16px; border-radius:999px; background:var(--surface); border:1px solid var(--border); font-weight:700; font-size:13.5px;}
.pillar .icon{width:16px; height:16px; color:var(--brand);}

.grid-services{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:36px;}
.service-card{padding:24px; display:flex; flex-direction:column; gap:12px;}
.service-card .num{font-family:var(--font-mono); font-size:12px; color:var(--text-soft); font-weight:600;}
.service-card .si{width:40px; height:40px; border-radius:10px; background:var(--brand-soft); color:var(--brand-strong); display:flex; align-items:center; justify-content:center;}
.service-card .si .icon{width:20px; height:20px;}
.service-card p{font-size:14.5px; color:var(--text-muted); line-height:1.5;}
.section-cta{margin-top:40px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;}

/* HUBERT GS categories */
.gs-cats{display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:36px;}
@media (max-width:900px){ .gs-cats{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .gs-cats{grid-template-columns:1fr;} }
.gs-cat{padding:24px; display:flex; flex-direction:column; gap:12px;}
.gs-cat-head{display:flex; align-items:center; gap:12px;}
.gs-cat .si{width:42px; height:42px; border-radius:11px; background:var(--status-success-bg); color:var(--status-success); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.gs-cat .si .icon{width:21px; height:21px;}
.gs-cat h4{font-size:16.5px; font-weight:800;}
.gs-cat ul{display:flex; flex-direction:column; gap:8px;}
.gs-cat li{font-size:13.8px; color:var(--text-muted); display:flex; gap:8px; line-height:1.45;}
.gs-cat li::before{content:""; width:5px; height:5px; border-radius:999px; background:var(--brand); flex-shrink:0; margin-top:7px;}

/* HUMASEND pricing */
.ship-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:36px;}
@media (max-width:980px){ .ship-grid{grid-template-columns:repeat(2,1fr);} }
@media (max-width:600px){ .ship-grid{grid-template-columns:1fr;} }
.ship-card{padding:26px 22px; display:flex; flex-direction:column; gap:14px;}
.ship-card.featured{border-color:var(--brand); box-shadow:0 0 0 1px var(--brand), var(--shadow-md);}
.ship-card .si{width:38px; height:38px; border-radius:10px; background:var(--brand-soft); color:var(--brand-strong); display:flex; align-items:center; justify-content:center;}
.ship-card .si .icon{width:19px; height:19px;}
.ship-card h4{font-size:16px; font-weight:800;}
.ship-card .price{font-family:var(--font-mono); font-size:25px; font-weight:700; color:var(--brand-strong); letter-spacing:-.01em;}
:root[data-theme=dark] .ship-card .price{color:var(--brand);}
.ship-card .price small{font-size:12px; font-weight:600; color:var(--text-soft);}
.ship-card p{font-size:13.5px; color:var(--text-muted); flex-grow:1;}
.ship-card .fee{font-size:12.5px; font-family:var(--font-mono); color:var(--text-soft); padding-top:10px; border-top:1px dashed var(--border);}
.advisory-card{margin-top:18px; padding:26px; display:flex; gap:22px; align-items:center; flex-wrap:wrap;}
.advisory-card .si{width:48px;height:48px;border-radius:12px;background:var(--brand-soft);color:var(--brand-strong);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.advisory-card .si .icon{width:24px;height:24px;}
.advisory-card ul{display:flex; gap:16px; flex-wrap:wrap; margin-top:8px;}
.advisory-card li{font-size:12.5px; font-family:var(--font-mono); color:var(--text-soft); font-weight:600;}

/* ============================= PRODUCTOS ============================= */
.catalog-toolbar{display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:24px;}
.search-box{position:relative; flex:1 1 260px; max-width:420px;}
.search-box input{width:100%; padding:12px 16px 12px 42px; border-radius:11px; background:var(--surface); border:1.5px solid var(--border); font-size:14.5px; transition:border-color .25s ease, box-shadow .25s ease;}
.search-box input:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);}
.search-box .icon{position:absolute; left:14px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-soft);}
.sort-select{padding:12px 16px; border-radius:11px; background:var(--surface); border:1.5px solid var(--border); font-size:14px; font-weight:600; cursor:pointer;}
.cat-chips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:28px;}
.chip{padding:8px 15px; border-radius:999px; border:1.5px solid var(--border-strong); font-size:13.5px; font-weight:700; cursor:pointer; background:var(--surface); transition:.15s;}
.chip:hover{border-color:var(--brand);}
.chip.is-active{background:var(--brand); border-color:var(--brand); color:#fff;}
.products-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px;}
.product-card{overflow:hidden; display:flex; flex-direction:column;}
.product-media{aspect-ratio:16/9; background:var(--surface-alt); position:relative; overflow:hidden;}
.product-media img{width:100%; height:100%; object-fit:contain; transition:transform .3s cubic-bezier(.16,1,.3,1);}
.product-card:hover .product-media img{transform:scale(1.03);}
.product-media .ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-soft);}
.product-media .ph .icon{width:34px;height:34px;}
.stock-flag{position:absolute; top:10px; left:10px; font-family:var(--font-mono); font-size:10.5px; font-weight:700; padding:4px 9px; border-radius:999px;}
.product-body{padding:18px; display:flex; flex-direction:column; gap:8px; flex-grow:1;}
.product-cat{font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--brand); font-weight:700;}
.product-name{font-size:16px; font-weight:800; line-height:1.3; min-height:2.6em;}
.product-desc{font-size:13px; color:var(--text-muted); line-height:1.5; flex-grow:1;}
.product-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:6px;}
.product-price{font-family:var(--font-mono); font-weight:700; font-size:16.5px; color:var(--text);}
.product-price.tbd{font-size:12.5px; color:var(--brand); font-weight:700; text-transform:uppercase; letter-spacing:.03em;}
.add-btn{width:40px; height:40px; border-radius:10px; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; border:none; flex-shrink:0; transition:.15s;}
.add-btn:hover{background:var(--brand-strong); transform:scale(1.05);}
.add-btn[disabled]{background:var(--status-neutral-bg); color:var(--status-neutral); cursor:not-allowed;}
.add-btn .icon{width:18px; height:18px;}

.empty-state{grid-column:1/-1; text-align:center; padding:70px 24px; display:flex; flex-direction:column; align-items:center; gap:16px; background:var(--surface); border:1px dashed var(--border-strong); border-radius:var(--radius-lg);}
.empty-state .ei{width:58px; height:58px; border-radius:16px; background:var(--brand-soft); color:var(--brand-strong); display:flex; align-items:center; justify-content:center;}
.empty-state .ei .icon{width:28px; height:28px;}
.empty-state h4{font-size:19px; font-weight:800;}
.empty-state p{max-width:44ch; color:var(--text-muted); font-size:14.5px;}
.empty-state .row{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px;}

/* ============================= CONTACT ============================= */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start;}
@media (max-width:860px){ .contact-grid{grid-template-columns:1fr;} }
.contact-panel{padding:34px; background:var(--panel-deep); color:var(--panel-deep-text); border-radius:var(--radius-lg); display:flex; flex-direction:column; gap:22px;}
.contact-line{display:flex; align-items:center; gap:14px;}
.contact-line .si{width:44px; height:44px; border-radius:12px; background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.contact-line .si .icon{width:21px; height:21px; color:var(--sky);}
.contact-line b{display:block; font-size:15.5px;}
.contact-line span{font-size:12.5px; color:var(--panel-deep-muted); font-family:var(--font-mono);}
.contact-panel .cbtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px;}
.form-card{padding:30px;}
.field{display:flex; flex-direction:column; gap:7px; margin-bottom:16px;}
.field label{font-size:12.5px; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em;}
.field input,.field textarea,.field select{padding:12px 14px; border-radius:10px; border:1.5px solid var(--border); background:var(--surface); font-size:14.5px; width:100%; transition:border-color .25s ease, box-shadow .25s ease;}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-soft);}
.field textarea{resize:vertical; min-height:90px;}
.field-row{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media (max-width:520px){ .field-row{grid-template-columns:1fr;} }

/* ============================= FOOTER ============================= */
footer{background:var(--panel-deep); color:var(--panel-deep-text); padding:64px 0 26px; position:relative; overflow:hidden;}
.footer-top{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:44px; border-bottom:1px solid var(--panel-deep-line);}
@media (max-width:860px){ .footer-top{grid-template-columns:1fr 1fr; row-gap:34px;} }
@media (max-width:560px){ .footer-top{grid-template-columns:1fr;} }
.footer-brand img{height:58px; width:auto; margin-bottom:14px; border-radius:6px;}
.footer-brand p{font-size:14px; color:var(--panel-deep-muted); max-width:32ch; line-height:1.6;}
.footer-tagline{font-family:var(--font-display); font-weight:800; font-size:15px; color:#fff; margin-top:14px;}
.footer-sub{font-family:var(--font-mono); font-size:11px; color:var(--sky); letter-spacing:.06em; text-transform:uppercase; margin-top:4px;}
.footer-col h5{font-family:var(--font-mono); font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--sky); margin-bottom:16px; font-weight:600;}
.footer-col a,.footer-col p{display:block; font-size:14px; color:var(--panel-deep-muted); margin-bottom:10px; line-height:1.5;}
.footer-col a:hover{color:#fff;}
.footer-bottom{display:flex; justify-content:space-between; align-items:center; padding-top:22px; flex-wrap:wrap; gap:10px;}
.footer-bottom span{font-size:12.5px; color:var(--panel-deep-muted);}

/* ============================= WHATSAPP FLOAT ============================= */
#wa-float{position:fixed; right:20px; bottom:20px; z-index:70; width:56px; height:56px; border-radius:999px; background:#1FAF4E; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -8px rgba(0,0,0,.4); cursor:pointer; transition:transform .2s cubic-bezier(.16,1,.3,1); animation:waFloatIn .5s cubic-bezier(.16,1,.3,1) .4s both;}
#wa-float:hover{transform:scale(1.05);}
#wa-float:active{transform:scale(1.05);}
#wa-float .icon{width:27px; height:27px;}
#wa-float::after{content:""; position:absolute; inset:0; border-radius:999px; border:2px solid #1FAF4E; animation:wa-pulse 6s ease-out infinite;}
@keyframes wa-pulse{0%{transform:scale(1); opacity:.45;} 16%{transform:scale(1.45); opacity:0;} 100%{transform:scale(1.45); opacity:0;}}
@keyframes waFloatIn{from{opacity:0; transform:scale(.85);} to{opacity:1; transform:scale(1);}}

/* ============================= CART DRAWER ============================= */
#cart-overlay{position:fixed; inset:0; background:rgba(8,14,30,.5); z-index:80; opacity:0; pointer-events:none; transition:opacity .25s ease;}
#cart-overlay.is-open{opacity:1; pointer-events:auto;}
#cart-drawer{position:fixed; top:0; right:0; bottom:0; width:min(420px,100vw); background:var(--surface); z-index:81; display:flex; flex-direction:column; transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); box-shadow:-16px 0 40px -20px rgba(0,0,0,.4);}
#cart-drawer.is-open{transform:translateX(0);}
.drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--border); flex-shrink:0;}
.drawer-head h3{font-size:18px; font-weight:800;}
.drawer-close{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;cursor:pointer;background:var(--surface-alt);}
.drawer-close .icon{width:17px;height:17px;}
.drawer-body{flex-grow:1; overflow-y:auto; padding:18px 22px;}
.cart-line{display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--border);}
.cart-line img,.cart-line .ph{width:64px; height:64px; border-radius:9px; object-fit:cover; background:var(--surface-alt); flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--text-soft);}
.cart-line .ph .icon{width:22px;height:22px;}
.cart-line-info{flex-grow:1; min-width:0;}
.cart-line-info b{font-size:14px; font-weight:700; display:block; margin-bottom:3px;}
.cart-line-info .p{font-family:var(--font-mono); font-size:13px; color:var(--text-muted);}
.qty-ctrl{display:flex; align-items:center; gap:0; margin-top:8px; border:1.5px solid var(--border-strong); border-radius:8px; width:fit-content;}
.qty-ctrl button{width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer; color:var(--text-muted);}
.qty-ctrl button:hover{color:var(--brand);}
.qty-ctrl span{width:26px; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:700;}
.line-remove{align-self:flex-start; color:var(--text-soft); cursor:pointer; padding:4px;}
.line-remove:hover{color:var(--status-danger);}
.line-remove .icon{width:16px;height:16px;}
.drawer-empty{padding:60px 10px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:14px; color:var(--text-muted);}
.drawer-empty .icon{width:40px;height:40px; color:var(--text-soft);}
.drawer-foot{border-top:1px solid var(--border); padding:20px 22px 24px; flex-shrink:0; display:flex; flex-direction:column; gap:12px;}
.drawer-total{display:flex; justify-content:space-between; align-items:baseline; font-weight:800; font-size:16px;}
.drawer-total b{font-family:var(--font-mono); font-size:19px;}
.drawer-note{font-size:12px; color:var(--text-soft); line-height:1.5;}

/* ============================= VIEWS (checkout/admin) ============================= */
.view{min-height:70vh; padding:36px 0 90px;}
.view[hidden]{display:none;}
.back-link{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--text-muted); margin-bottom:26px; cursor:pointer;}
.back-link:hover{color:var(--brand);}
.back-link .icon{width:15px;height:15px;}
.steps{display:flex; gap:10px; margin-bottom:34px; flex-wrap:wrap;}
.step{display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; color:var(--text-soft); font-family:var(--font-mono);}
.step .n{width:22px;height:22px;border-radius:999px; background:var(--surface-alt); border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:11px;}
.step.is-active{color:var(--brand);}
.step.is-active .n{background:var(--brand); border-color:var(--brand); color:#fff;}
.checkout-grid{display:grid; grid-template-columns:1.2fr .9fr; gap:28px; align-items:start;}
@media (max-width:900px){ .checkout-grid{grid-template-columns:1fr;} }
.summary-card{padding:26px; position:sticky; top:calc(var(--header-h) + 20px);}
.summary-line{display:flex; justify-content:space-between; gap:10px; font-size:14px; padding:10px 0; border-bottom:1px solid var(--border);}
.summary-line b{font-family:var(--font-mono);}
.summary-line.pending b{color:var(--brand);}
.summary-total{display:flex; justify-content:space-between; align-items:baseline; padding-top:16px; font-weight:800; font-size:17px;}
.summary-total b{font-family:var(--font-mono); font-size:21px;}
.notice{padding:14px 16px; border-radius:11px; background:var(--status-progress-bg); color:var(--status-progress); font-size:13px; line-height:1.55; display:flex; gap:10px; margin-top:16px;}
.notice .icon{width:18px;height:18px; flex-shrink:0; margin-top:1px;}
.paymethods{display:flex; gap:8px; flex-wrap:wrap; margin-top:16px;}
.paymethod{display:flex; align-items:center; gap:6px; padding:8px 12px; border-radius:9px; background:var(--surface-alt); border:1px solid var(--border); font-size:12px; font-weight:700; color:var(--text-soft); opacity:.65;}
.paymethod .icon{width:15px;height:15px;}

.order-done{text-align:center; max-width:560px; margin:0 auto; display:flex; flex-direction:column; align-items:center; gap:18px;}
.order-done .ok{width:70px;height:70px; border-radius:999px; background:var(--status-success-bg); color:var(--status-success); display:flex; align-items:center; justify-content:center;}
.order-done .ok .icon{width:34px;height:34px;}
.order-num{font-family:var(--font-mono); font-size:24px; font-weight:700; background:var(--surface-alt); border:1px dashed var(--border-strong); padding:12px 22px; border-radius:12px; letter-spacing:.03em;}
.order-done .actions{display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:8px;}

/* ============================= ADMIN ERP DESIGN SYSTEM ============================= */
.admin-login{max-width:380px; margin:60px auto; padding:36px; text-align:center; display:flex; flex-direction:column; gap:16px; align-items:center;}
.admin-login .ai{width:52px;height:52px;border-radius:14px;background:var(--panel-deep);color:var(--sky);display:flex;align-items:center;justify-content:center;}
.admin-login .ai .icon{width:26px;height:26px;}

.admin-shell{display:grid; grid-template-columns:240px minmax(0, 1fr); gap:0; border:1px solid #E2E8F0; border-radius:14px; overflow:hidden; background:#FFFFFF; min-height:700px; box-shadow:0 1px 3px rgba(15,23,42,.04);}
@media (min-width:768px) and (max-width:1023px){
  .admin-shell{grid-template-columns:72px minmax(0, 1fr);}
  .admin-side .atitle, .admin-tab span, .admin-side .logout span{display:none;}
  .admin-tab{justify-content:center; padding:12px; title:attr(data-title);}
}
@media (max-width:767px){
  .admin-shell{grid-template-columns:1fr;}
  .admin-side{position:fixed; inset:0 auto 0 0; width:260px; z-index:100; transform:translateX(-100%); transition:transform .25s cubic-bezier(.16,1,.3,1); box-shadow:0 20px 25px -5px rgba(0,0,0,.3);}
  .admin-side.is-open{transform:translateX(0);}
  .admin-backdrop{position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:99; opacity:0; pointer-events:none; transition:opacity .2s ease;}
  .admin-backdrop.is-open{opacity:1; pointer-events:auto;}
}

.admin-side{background:#0F172A; color:#F8FAFC; padding:20px 12px; display:flex; flex-direction:column; gap:4px;}
.admin-side .atitle{font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; color:#94A3B8; text-transform:uppercase; padding:8px 12px 16px; font-weight:600;}
.admin-tab{position:relative; display:flex; align-items:center; gap:12px; padding:10px 14px; border-radius:8px; cursor:pointer; font-size:13.5px; font-weight:500; color:#94A3B8; text-decoration:none; transition:all .15s ease;}
.admin-tab .icon{width:18px; height:18px; flex-shrink:0;}
.admin-tab:hover{background:rgba(255,255,255,.06); color:#FFFFFF;}
.admin-tab.is-active{background:#EFF6FF; color:#2563EB; font-weight:600;}
.admin-tab.is-active .icon{color:#2563EB;}
.admin-tab.is-active::before{content:""; position:absolute; left:0; top:6px; bottom:6px; width:3.5px; background:#2563EB; border-radius:0 4px 4px 0;}
.admin-side .logout{margin-top:auto; padding-top:16px; border-top:1px solid #1E293B;}

.admin-main{padding:28px 32px; min-width:0; width:100%; box-sizing:border-box; background:#F8FAFC;}
@media (max-width:640px){ .admin-main{padding:20px 16px;} }

.admin-breadcrumb{font-size:12px; color:#64748B; margin-bottom:4px; display:flex; align-items:center; gap:6px; font-weight:500;}
.admin-head{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:22px; gap:16px; flex-wrap:wrap;}
.admin-head h3{font-size:22px; font-weight:800; color:#0F172A; margin:0;}
.admin-head p{color:#475569; font-size:13.5px; margin-top:3px;}

.stat-row{display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px; margin-bottom:28px;}
@media (max-width:640px){ .stat-row{grid-template-columns:repeat(2,1fr);} }

.kpi-card, .stat-tile{background:#FFFFFF; border:1px solid #E2E8F0; border-radius:12px; padding:16px 12px; display:flex; flex-direction:column; gap:6px; min-width:0; box-sizing:border-box; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:border-color .15s ease;}
.kpi-card:hover, .stat-tile:hover{border-color:#CBD5E1;}
.kpi-card b, .stat-tile b{font-family:var(--font-mono); font-size:clamp(13px, 1.2vw, 17px); font-weight:700; color:#0F172A; white-space:nowrap; letter-spacing:-0.03em; overflow:hidden; text-overflow:ellipsis;}
.kpi-card span, .stat-tile span{font-size:12px; color:#64748B; font-weight:600;}

.card{background:#FFFFFF; border:1px solid #E2E8F0; border-radius:12px; box-shadow:0 1px 2px rgba(15,23,42,.04); padding:20px; margin-bottom:20px;}

.draft-banner{display:flex; align-items:center; gap:12px; padding:13px 16px; border-radius:11px; background:#FEF3C7; color:#92400E; font-size:13px; margin-bottom:22px; flex-wrap:wrap; border:1px solid #FDE68A;}
.draft-banner .icon{width:17px;height:17px; flex-shrink:0;}
.draft-banner .grow{flex-grow:1;}

table.admin-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.admin-table th{background:#F8FAFC; text-align:left; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:#64748B; padding:10px 14px; border-bottom:1px solid #E2E8F0; white-space:nowrap; font-weight:600;}
table.admin-table td{padding:12px 14px; border-bottom:1px solid #E2E8F0; vertical-align:middle; white-space:nowrap; color:#334155;}
table.admin-table tr:hover td{background:#F8FAFC;}
.table-wrap{overflow-x:auto; width:100%; max-width:100%; border:1px solid #E2E8F0; border-radius:10px; box-sizing:border-box; background:#FFFFFF;}
.table-wrap table{margin:0;}

.pill, .badge{padding:4px 10px; border-radius:6px; font-size:11.5px; font-weight:600; font-family:var(--font-mono); display:inline-flex; align-items:center; gap:4px; line-height:1.2;}
.pill-success, .badge-success{background:#ECFDF5; color:#059669; border:1px solid #A7F3D0;}
.pill-progress, .badge-warning{background:#FEF3C7; color:#D97706; border:1px solid #FDE68A;}
.pill-danger, .badge-danger{background:#FEE2E2; color:#DC2626; border:1px solid #FCA5A5;}
.pill-info, .badge-info{background:#EFF6FF; color:#2563EB; border:1px solid #BFDBFE;}
.pill-neutral, .badge-neutral{background:#F1F5F9; color:#475569; border:1px solid #E2E8F0;}
.pill-warehouse{background:#F5F3FF; color:#7C3AED; border:1px solid #DDD6FE;}
.pill-ready{background:#E0F2FE; color:#0284C7; border:1px solid #BAE6FD;}

.row-actions{display:flex; gap:6px; align-items:center;}
.icon-mini{width:32px; height:32px; border-radius:7px; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; background:#F8FAFC; color:#64748B; border:1px solid #E2E8F0; transition:all .15s ease;}
.icon-mini:hover{background:#EFF6FF; color:#2563EB; border-color:#BFDBFE;}
.icon-mini .icon{width:15px; height:15px;}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media (max-width:600px){ .form-grid{grid-template-columns:1fr;} }
.form-grid .span2{grid-column:1/-1;}

.field label, .form-label{display:block; font-size:13px; font-weight:600; color:#334155; margin-bottom:6px;}
.field input, .field select, .field textarea, input.form-control, select.form-control{
  height:40px; border-radius:8px; border:1px solid #CBD5E1; padding:0 12px; font-size:13.5px; color:#0F172A; background:#FFFFFF; transition:border-color .15s ease, box-shadow .15s ease; width:100%; box-sizing:border-box;
}
.field textarea{height:auto; padding:10px 12px;}
.field input:focus, .field select:focus, input.form-control:focus, select.form-control:focus{
  outline:none; border-color:#2563EB; box-shadow:0 0 0 3px rgba(37,99,235,0.12);
}

.btn{height:38px; padding:0 16px; border-radius:8px; font-size:13.5px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; border:1px solid transparent; transition:all .15s ease; text-decoration:none;}
.btn .icon{width:16px; height:16px;}
.btn-primary{background:#2563EB; color:#FFFFFF; border-color:#2563EB;}
.btn-primary:hover{background:#1D4ED8; border-color:#1D4ED8;}
.btn-ghost, .btn-secondary{background:#FFFFFF; color:#334155; border-color:#CBD5E1;}
.btn-ghost:hover, .btn-secondary:hover{background:#F8FAFC; color:#0F172A; border-color:#94A3B8;}
.btn-danger{background:#DC2626; color:#FFFFFF; border-color:#DC2626;}
.btn-danger:hover{background:#B91C1C; border-color:#B91C1C;}
.btn-sm{height:34px; padding:0 12px; font-size:12.5px;}

.modal-overlay{position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:90; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; pointer-events:none; transition:opacity .2s ease;}
.modal-overlay.is-open{opacity:1; pointer-events:auto;}
.modal{background:#FFFFFF; border-radius:14px; max-width:560px; width:100%; max-height:88vh; overflow-y:auto; padding:28px; box-shadow:0 20px 25px -5px rgba(0,0,0,.1), 0 10px 10px -5px rgba(0,0,0,.04); border:1px solid #E2E8F0;}
.modal-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; border-bottom:1px solid #F1F5F9; padding-bottom:14px;}
.modal-head h4{font-size:18px; font-weight:800; color:#0F172A; margin:0;}
.upload-box{border:1.5px dashed #CBD5E1; border-radius:11px; padding:16px; display:flex; align-items:center; gap:14px; cursor:pointer; background:#F8FAFC; transition:border-color .15s ease;}
.upload-box:hover{border-color:#2563EB;}
.upload-box img{width:52px;height:52px;border-radius:8px;object-fit:cover;}
.upload-box .ph{width:52px;height:52px;border-radius:8px;background:#E2E8F0; display:flex;align-items:center;justify-content:center; color:#64748B;}

.upload-box span{font-size:13px; color:var(--text-muted);}
.detail-kv{display:grid; grid-template-columns:120px 1fr; gap:8px 14px; font-size:13.5px; margin-bottom:4px;}
.detail-kv dt{color:var(--text-soft); font-weight:600;}
.detail-kv dd{margin:0; font-weight:600;}
.config-block{padding:22px; margin-bottom:16px;}
.config-block h4{font-size:15.5px; font-weight:800; margin-bottom:6px;}
.config-block p{font-size:13.5px; color:var(--text-muted); margin-bottom:14px; line-height:1.6;}
.kbd{font-family:var(--font-mono); background:var(--surface-alt); padding:2px 7px; border-radius:5px; font-size:12.5px; border:1px solid var(--border);}

/* ============================= TOAST ============================= */
#toast-host{position:fixed; left:50%; bottom:26px; transform:translateX(-50%); z-index:100; display:flex; flex-direction:column; gap:8px; align-items:center; width:min(400px,92vw);}
.toast{background:var(--panel-deep); color:#fff; padding:13px 20px; border-radius:11px; font-size:13.5px; font-weight:600; box-shadow:var(--shadow-lg); display:flex; align-items:center; gap:10px; animation:toast-in .25s ease;}
.toast .icon{width:17px;height:17px; color:var(--sky); flex-shrink:0;}
@keyframes toast-in{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}

@media print{
  #site-header,footer,#wa-float,#cart-drawer,#cart-overlay,.no-print{display:none !important;}
}

/* ============================= HERO — AJUSTE MÓVIL (<=760px) ============================= */
@media (max-width:760px){
  .hero-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    max-width:100%;
    box-sizing:border-box;
    padding-left:18px;
    padding-right:18px;
    padding-top:4px;
  }
  .hero-stat{
    flex:none;
    min-width:0;
    padding-right:0;
  }
  .hero-stat b{
    display:block;
    font-size:14px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .hero-stat span{
    display:block;
    font-size:9.5px;
    line-height:1.3;
    white-space:normal;
    overflow-wrap:break-word;
  }
  .hero-ctas{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    width:100%;
    box-sizing:border-box;
    padding-left:18px;
    padding-right:18px;
    margin-bottom:18px;
  }
  .hero-ctas .btn{
    width:100%;
    box-sizing:border-box;
    padding:12px 10px;
    font-size:13.5px;
    white-space:normal;
    text-align:center;
  }
  .hero-ctas a:nth-child(3){
    grid-column:1 / -1;
  }
}

/* ============================= BOTÓN "ESCRIBIR POR WHATSAPP" (#btn-wa-contact) — VERDE WHATSAPP ============================= */
#btn-wa-contact{
  background:#25D366;
  color:var(--text);
}
#btn-wa-contact:hover{
  background:#1DA851;
}

/* =====================================================================
   SISTEMA DE ANIMACIONES — variables de control (reveal on scroll)
   Nota: la regla @media (prefers-reduced-motion: reduce) ya declarada
   arriba (líneas ~80-82) reduce automáticamente la duración de TODAS las
   animaciones/transiciones de este archivo a ~0, cumpliendo el punto 20.
===================================================================== */
:root{
  --reveal-y:25px;
  --reveal-x:28px;
}
@media (max-width:760px){
  :root{ --reveal-y:14px; --reveal-x:16px; }
}

/* ============================= 1–2. HEADER Y LOGO — entrada al cargar ============================= */
@keyframes headerFadeIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:translateY(0);} }
#site-header{ animation:headerFadeIn .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes logoFadeIn{ from{opacity:0; transform:translateY(-14px);} to{opacity:1; transform:translateY(0);} }
.brand img{ animation:logoFadeIn .7s cubic-bezier(.16,1,.3,1) .05s both; }

/* ============================= 3. HERO INTEGRADO — entrada escalonada ============================= */
@keyframes heroFadeUp{ from{opacity:0; transform:translateY(20px);} to{opacity:1; transform:translateY(0);} }
.hero-content h1{ animation:heroFadeUp .75s cubic-bezier(.16,1,.3,1) .1s both; }
.hero-content p{ animation:heroFadeUp .75s cubic-bezier(.16,1,.3,1) .25s both; }
.hero-actions{ animation:heroFadeUp .75s cubic-bezier(.16,1,.3,1) .4s both; }

/* =====================================================================
   6, 8, 9, 10, 14, 16 — SCROLL REVEAL (IntersectionObserver, ver site.js)
   Clases reutilizables: .reveal (sube), .reveal-sm (sube, distancia menor,
   para tarjetas de producto/servicio), .reveal-left / .reveal-right
   (entra desde el costado). La clase .is-visible la agrega site.js cuando
   el elemento entra en pantalla.
===================================================================== */
.reveal,.reveal-left,.reveal-right{ opacity:0; }
@keyframes revealUp{ from{opacity:0; transform:translateY(var(--reveal-y));} to{opacity:1; transform:translateY(0);} }
@keyframes revealLeft{ from{opacity:0; transform:translateX(calc(var(--reveal-x) * -1));} to{opacity:1; transform:translateX(0);} }
@keyframes revealRight{ from{opacity:0; transform:translateX(var(--reveal-x));} to{opacity:1; transform:translateX(0);} }
.reveal.is-visible{ animation:revealUp .6s cubic-bezier(.16,1,.3,1) both; }
.reveal-sm{ --reveal-y:15px; }
.reveal-sm.is-visible{ animation:revealUp .55s cubic-bezier(.16,1,.3,1) both; }
.reveal-left.is-visible{ animation:revealLeft .7s cubic-bezier(.16,1,.3,1) both; }
.reveal-right.is-visible{ animation:revealRight .7s cubic-bezier(.16,1,.3,1) both; }
@media (max-width:760px){
  /* Evita cualquier desplazamiento horizontal en móvil: las secciones que
     entrarían desde el costado, en móvil entran desde abajo (vertical). */
  .reveal-left.is-visible,.reveal-right.is-visible{ animation-name:revealUp; }
}
#hubert-si,#hubert-gs,#humasend{ overflow-x:hidden; }

/* ============================= 13. BUSCADOR — ya cubierto: .search-box input (focus) arriba ============================= */
/* ============================= 14. FORMULARIO DE CONTACTO — ya cubierto: .field input/textarea/select (focus) arriba ============================= */

/* ============================= PRODUCTOS — GRID MÓVIL 2 COLUMNAS (<=760px) ============================= */
@media (max-width:760px){
  .products-grid{
    grid-template-columns:repeat(2,1fr);
    gap:12px;
  }
  .product-body{
    padding:12px;
  }
}

/* ============================= CUENTAS DE USUARIO & AUTENTICACIÓN ============================= */
.hdr-account-btn{display:inline-flex; align-items:center; gap:8px; color:#0F172A; text-decoration:none; position:relative; cursor:pointer; background:none; border:none; padding:0;}
.hdr-account-btn .icon{font-size:22px; color:var(--brand);}
.hdr-account-btn:hover .hdr-widget-title{color:var(--brand);}

.account-tabs{display:flex; gap:8px; border-bottom:2px solid var(--border); margin-bottom:24px; flex-wrap:wrap;}
.account-tab{background:none; border:none; border-bottom:3px solid transparent; padding:10px 18px; font-weight:700; font-size:14.5px; color:var(--text-muted); cursor:pointer; transition:all .2s ease; margin-bottom:-2px;}
.account-tab:hover{color:var(--brand);}
.account-tab.is-active{color:var(--brand); border-bottom-color:var(--brand);}

.order-history-card{border:1px solid var(--border); border-radius:12px; padding:18px 20px; background:#fff; margin-bottom:16px; box-shadow:0 1px 3px rgba(0,0,0,.04); transition:box-shadow .2s ease;}
.order-history-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.order-history-head{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:12px; flex-wrap:wrap;}

.status-pill{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.3px;}
.status-pill.nuevo{background:#FEF3C7; color:#92400E;}
.status-pill.confirmado{background:#E0E7FF; color:#3730A3;}
.status-pill.preparacion,.status-pill.almacen{background:#DBEAFE; color:#1E40AF;}
.status-pill.despacho,.status-pill.despachado{background:#D1FAE5; color:#065F46;}
.status-pill.completado{background:#DCFCE7; color:#166534;}
.status-pill.cancelado{background:#FEE2E2; color:#991B1B;}

.auth-box{max-width:440px; margin:0 auto; width:100%;}
.auth-box h3{font-size:22px; font-weight:800; margin-bottom:6px; color:#0F172A;}
.auth-box p{font-size:13.5px; color:var(--text-muted); margin-bottom:20px;}
.auth-toggle-link{color:var(--brand); font-weight:700; cursor:pointer; text-decoration:none;}
.auth-toggle-link:hover{text-decoration:underline;}

/* ============================= PÁGINAS INDEPENDIENTES Y LEGALES ============================= */
.page-container { padding: 36px 0 70px; }
.legal-card { background: #FFFFFF; border: 1px solid #E2E8F0; border-radius: 14px; padding: 36px 40px; box-shadow: 0 1px 4px rgba(15,23,42,0.04); margin-top: 20px; }
@media (max-width: 640px) { .legal-card { padding: 22px 18px; } }
.legal-card h1 { font-family: var(--font-display); font-size: clamp(22px, 2.5vw, 30px); font-weight: 800; color: #0F172A; margin-bottom: 8px; }
.legal-card .updated-at { font-size: 13px; color: var(--text-muted); margin-bottom: 24px; display: block; border-bottom: 1px solid #E2E8F0; padding-bottom: 14px; }
.legal-card h2 { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: #0F172A; margin: 28px 0 12px; }
.legal-card h3 { font-size: 15.5px; font-weight: 700; color: #1E293B; margin: 20px 0 10px; }
.legal-card p { font-size: 14.5px; line-height: 1.7; color: #334155; margin-bottom: 14px; }
.legal-card ul, .legal-card ol { margin: 12px 0 18px 24px; font-size: 14.5px; color: #334155; line-height: 1.7; }
.legal-card li { margin-bottom: 6px; }

/* FAQ Acordeón */
.faq-list { display: flex; flex-direction: column; gap: 14px; margin-top: 24px; }
.faq-item { border: 1px solid #E2E8F0; border-radius: 12px; background: #FFFFFF; overflow: hidden; transition: border-color .15s ease; }
.faq-item:hover { border-color: #CBD5E1; }
.faq-question { width: 100%; padding: 18px 20px; background: none; border: none; text-align: left; font-family: var(--font-display); font-size: 16px; font-weight: 700; color: #0F172A; display: flex; justify-content: space-between; align-items: center; cursor: pointer; gap: 12px; }
.faq-question .icon { font-size: 16px; color: #64748B; transition: transform .2s ease; }
.faq-item.is-open .faq-question .icon { transform: rotate(180deg); color: var(--brand); }
.faq-answer { padding: 0 20px 18px; font-size: 14.5px; line-height: 1.7; color: #334155; display: none; border-top: 1px solid #F1F5F9; padding-top: 14px; }
.faq-item.is-open .faq-answer { display: block; }

/* =====================================================================
   SISTEMA RESPONSIVO PARA PANTALLAS GRANDES Y MONITORES ANCHOS
   (Breakpoints: 1440px, 1600px, 1920px+)
   ===================================================================== */

/* 1. Escritorio Gran Formato (1440px - MacBook Pro 16", Monitores QHD/4K) */
@media (min-width: 1440px) {
  :root {
    --maxw: 1380px;
    --header-h: 138px;
  }
  .wrap {
    padding: 0 28px;
  }
  .section {
    padding: 84px 0;
  }
  .legal-card {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    padding: 44px 48px;
  }

  /* Encabezado y Navegación */
  .header-top {
    gap: 28px;
    padding: 10px 0;
  }
  .header-search {
    max-width: 620px;
  }
  .header-widgets {
    gap: 22px;
  }
  .main-nav a {
    padding: 10px 18px;
    font-size: 14.5px;
  }

  /* Banner Principal (Hero) */
  .hero-integrated {
    min-height: 580px;
  }
  .hero-wrap {
    padding: 84px 28px 90px;
  }
  .hero-content {
    max-width: 660px;
  }
  .hero-content h1 {
    font-size: clamp(40px, 4.2vw, 62px);
    margin-bottom: 24px;
  }
  .hero-content p {
    font-size: 19.5px;
    line-height: 1.65;
    max-width: 50ch;
  }
  .hero-bottom-features {
    bottom: 52px;
    right: 36px;
    padding: 10px 24px;
    font-size: 13.5px;
  }

  /* Barra de Confianza (Trust Bar) */
  .trust-bar {
    margin-top: -34px;
    margin-bottom: 48px;
    padding: 24px 32px;
    gap: 28px;
  }
  .trust-item {
    gap: 16px;
  }
  .trust-item .icon {
    font-size: 36px;
  }
  .trust-title {
    font-size: 15.5px;
  }
  .trust-sub {
    font-size: 13px;
  }

  /* Carrusel de Ofertas y Catálogo */
  .offer-card {
    flex: 0 0 290px;
    min-width: 290px;
  }
  .offer-card .pm-img {
    height: 200px;
  }

  .search-box {
    max-width: 500px;
  }
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
  }
  .product-card-modern .pm-img {
    height: 210px;
  }
  .product-card-modern .pm-title {
    font-size: 16px;
  }

  /* Grillas de Secciones */
  .divisions-grid {
    gap: 28px;
  }
  .division-card {
    padding: 38px 32px;
  }
  .gs-cats {
    gap: 24px;
  }
  .ship-grid {
    gap: 24px;
  }

  /* Pie de Página y Panel ERP */
  .footer-top {
    gap: 48px;
    padding-bottom: 52px;
  }
  .admin-shell {
    grid-template-columns: 260px minmax(0, 1fr);
  }
}

/* 2. Pantallas Anchas Full HD / 1440p (1600px+) */
@media (min-width: 1600px) {
  :root {
    --maxw: 1520px;
    --header-h: 144px;
  }
  .wrap {
    padding: 0 34px;
  }
  .section {
    padding: 96px 0;
  }
  .legal-card {
    max-width: 1200px;
    padding: 48px 56px;
  }

  /* Encabezado y Navegación */
  .brand img {
    height: 48px;
  }
  .header-top {
    gap: 34px;
    padding: 12px 0;
  }
  .header-search {
    max-width: 700px;
  }
  .search-form-hdr input {
    font-size: 14.5px;
  }
  .btn-hdr-search {
    padding: 8px 20px;
    font-size: 14px;
  }
  .header-widgets {
    gap: 26px;
  }
  .hdr-widget .icon {
    font-size: 24px;
  }
  .hdr-widget-title {
    font-size: 13.5px;
  }
  .hdr-widget-sub {
    font-size: 12px;
  }
  .main-nav {
    gap: 10px;
  }
  .main-nav a {
    padding: 11px 22px;
    font-size: 15px;
  }

  /* Banner Principal (Hero) */
  .hero-integrated {
    min-height: 630px;
  }
  .hero-wrap {
    padding: 96px 34px 104px;
  }
  .hero-content {
    max-width: 720px;
  }
  .hero-content h1 {
    font-size: clamp(44px, 4vw, 68px);
    margin-bottom: 26px;
  }
  .hero-content p {
    font-size: 21px;
    line-height: 1.65;
    max-width: 52ch;
    margin-bottom: 38px;
  }
  .btn {
    padding: 14px 26px;
    font-size: 15.5px;
  }
  .hero-bottom-features {
    bottom: 58px;
    right: 44px;
    padding: 12px 28px;
    font-size: 14px;
  }
  .hero-bottom-features .icon {
    font-size: 16px;
  }

  /* Barra de Confianza (Trust Bar) */
  .trust-bar {
    margin-top: -40px;
    margin-bottom: 56px;
    padding: 28px 40px;
    gap: 36px;
  }
  .trust-item .icon {
    font-size: 38px;
  }
  .trust-title {
    font-size: 16.5px;
  }
  .trust-sub {
    font-size: 13.5px;
  }

  /* Carrusel de Ofertas y Catálogo (5 Productos por Fila) */
  .offer-card {
    flex: 0 0 310px;
    min-width: 310px;
  }
  .offer-card .pm-img {
    height: 215px;
  }
  .offer-card .pm-title {
    font-size: 15.5px;
  }
  .offer-card .pm-price {
    font-size: 18.5px;
  }

  .products-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 24px;
  }
  .product-card-modern .pm-img {
    height: 220px;
  }
  .product-card-modern .pm-body {
    padding: 18px;
  }
  .product-card-modern .pm-title {
    font-size: 16px;
  }
  .product-card-modern .pm-price {
    font-size: 19px;
  }

  /* Component Grids */
  .divisions-grid {
    gap: 32px;
  }
  .division-card h3 {
    font-size: 24px;
  }
  .gs-cats {
    gap: 28px;
  }
  .gs-cat {
    padding: 28px;
  }
  .ship-grid {
    gap: 28px;
  }
  .ship-card {
    padding: 30px 26px;
  }
  .contact-grid {
    gap: 36px;
  }
  .contact-panel {
    padding: 40px;
  }

  /* Footer & Admin Shell */
  .footer-top {
    gap: 56px;
    padding-bottom: 60px;
  }
  .footer-brand p {
    font-size: 15px;
    max-width: 36ch;
  }
  .admin-shell {
    grid-template-columns: 280px minmax(0, 1fr);
  }
}

/* 3. Monitores Ultra-Anchos y 4K (1920px+) */
@media (min-width: 1920px) {
  :root {
    --maxw: 1680px;
    --header-h: 150px;
  }
  .wrap {
    padding: 0 40px;
  }
  .section {
    padding: 108px 0;
  }

  /* Encabezado y Navegación */
  .brand img {
    height: 52px;
  }
  .header-top {
    gap: 40px;
    padding: 14px 0;
  }
  .header-search {
    max-width: 780px;
  }
  .header-widgets {
    gap: 30px;
  }
  .main-nav {
    gap: 14px;
  }
  .main-nav a {
    padding: 12px 26px;
    font-size: 15.5px;
  }

  /* Banner Principal (Hero) */
  .hero-integrated {
    min-height: 680px;
  }
  .hero-wrap {
    padding: 110px 40px 120px;
  }
  .hero-content {
    max-width: 780px;
  }
  .hero-content h1 {
    font-size: clamp(48px, 4.2vw, 74px);
  }
  .hero-content p {
    font-size: 22px;
    max-width: 54ch;
  }
  .hero-bottom-features {
    bottom: 64px;
    right: 56px;
    padding: 14px 32px;
    font-size: 14.5px;
  }

  /* Barra de Confianza (Trust Bar) */
  .trust-bar {
    margin-top: -44px;
    margin-bottom: 64px;
    padding: 32px 48px;
    gap: 44px;
  }
  .trust-item .icon {
    font-size: 42px;
  }
  .trust-title {
    font-size: 17.5px;
  }
  .trust-sub {
    font-size: 14px;
  }

  /* Carrusel de Ofertas y Catálogo */
  .offer-card {
    flex: 0 0 325px;
    min-width: 325px;
  }
  .offer-card .pm-img {
    height: 230px;
  }
  .products-grid {
    grid-template-columns: repeat(5, 1fr);
    gap: 28px;
  }
  .product-card-modern .pm-img {
    height: 235px;
  }

  /* Component Grids */
  .divisions-grid {
    gap: 36px;
  }
  .gs-cats {
    gap: 32px;
  }
  .ship-grid {
    gap: 32px;
  }
}

/* =====================================================================
   TABLA COMPACTA DEL MÓDULO DE PRODUCTOS E INVENTARIO (.admin-products-table)
   Aislada mediante clases específicas para no afectar otras tablas del panel.
   ===================================================================== */
.admin-products-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 220px);
  width: 100%;
  max-width: 100%;
  border: 1px solid #E2E8F0;
  border-radius: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  position: relative;
}

table.admin-table.admin-products-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  table-layout: auto;
}

table.admin-table.admin-products-table thead th {
  position: sticky;
  top: 0;
  z-index: 3;
  background: #F8FAFC;
  padding: 9px 10px;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  border-bottom: 1px solid #E2E8F0;
  box-shadow: 0 1px 0 #E2E8F0;
  user-select: none;
}

table.admin-table.admin-products-table thead th.is-sortable {
  cursor: pointer;
  transition: color 0.15s ease, background-color 0.15s ease;
}

table.admin-table.admin-products-table thead th.is-sortable:hover {
  background: #F1F5F9;
  color: #0F172A;
}

table.admin-table.admin-products-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #E2E8F0;
  vertical-align: middle;
  color: #334155;
  background: #FFFFFF;
}

table.admin-table.admin-products-table tbody tr:hover td {
  background: #F8FAFC;
}

/* Columnas con anchos optimizados según su contenido */
table.admin-table.admin-products-table .col-prod-code {
  width: 64px;
  max-width: 74px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: #64748B;
  white-space: nowrap;
}

table.admin-table.admin-products-table .col-prod-name {
  width: 220px;
  max-width: 220px;
  min-width: 175px;
  white-space: normal;
}

.prod-name-cell {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 220px;
}

.prod-thumb-mini {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  object-fit: cover;
  border: 1px solid #E2E8F0;
  background: #F8FAFC;
  flex-shrink: 0;
  margin-top: 1px;
}

.prod-name-wrap {
  min-width: 0;
  flex: 1;
}

.prod-name-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.32;
  color: #0F172A;
  max-height: 2.65em;
  cursor: pointer;
}

.prod-name-clamp:hover {
  color: #2563EB;
}

table.admin-table.admin-products-table .col-prod-cat {
  width: 120px;
  max-width: 135px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.prod-cat-ellipsis {
  display: block;
  max-width: 125px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12.5px;
  color: #475569;
}

table.admin-table.admin-products-table .col-prod-stock {
  width: 88px;
  max-width: 98px;
  white-space: nowrap;
}

table.admin-table.admin-products-table .col-prod-price {
  width: 100px;
  max-width: 112px;
  white-space: nowrap;
}

table.admin-table.admin-products-table .col-prod-cost {
  width: 135px;
  max-width: 150px;
  white-space: nowrap;
}

table.admin-table.admin-products-table .col-prod-status {
  width: 108px;
  max-width: 120px;
  white-space: nowrap;
}

/* Columna de acciones fija a la derecha cuando hay desplazamiento horizontal */
table.admin-table.admin-products-table th.col-prod-actions,
table.admin-table.admin-products-table td.col-prod-actions {
  width: 82px;
  max-width: 92px;
  text-align: right;
  white-space: nowrap;
  position: sticky;
  right: 0;
  box-shadow: -1px 0 0 #E2E8F0;
}

table.admin-table.admin-products-table th.col-prod-actions {
  z-index: 4;
  background: #F8FAFC;
}

table.admin-table.admin-products-table td.col-prod-actions {
  z-index: 2;
  background: #FFFFFF;
}

table.admin-table.admin-products-table tbody tr:hover td.col-prod-actions {
  background: #F8FAFC;
}

table.admin-table.admin-products-table .pill {
  padding: 2px 7px;
  font-size: 11px;
}

table.admin-table.admin-products-table .icon-mini {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.admin-products-toolbar {
  display: flex;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  align-items: center;
}

.admin-products-toolbar .field {
  margin: 0;
}

.admin-products-toolbar input,
.admin-products-toolbar select {
  height: 36px;
  font-size: 13px;
  padding: 0 10px;
}

.admin-products-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: #F8FAFC;
  border: 1px solid #E2E8F0;
  border-top: none;
  border-radius: 0 0 10px 10px;
  font-size: 12.5px;
  color: #475569;
}

.admin-products-wrap.has-pagination {
  border-radius: 10px 10px 0 0;
}

@media (max-width: 767px) {
  .admin-products-wrap {
    max-height: calc(100vh - 190px);
  }
  table.admin-table.admin-products-table .col-prod-name {
    width: 180px;
    max-width: 185px;
    min-width: 155px;
  }
  .prod-name-cell {
    max-width: 180px;
  }
}

/* Tabla de clientes: cabe en el ancho disponible, sin desplazamiento horizontal */
table.admin-table.admin-clients-table {
  table-layout: fixed;
}
table.admin-table.admin-clients-table th,
table.admin-table.admin-clients-table td {
  padding-left: 10px;
  padding-right: 10px;
}
table.admin-table.admin-clients-table td {
  white-space: normal;
  overflow-wrap: anywhere;
}
table.admin-table.admin-clients-table .col-cli-id { width: 58px; }
table.admin-table.admin-clients-table .col-cli-estado { width: 112px; }
table.admin-table.admin-clients-table .col-cli-num { width: 78px; text-align: center; }
table.admin-table.admin-clients-table .col-cli-total { width: 130px; text-align: right; white-space: nowrap; }
table.admin-table.admin-clients-table .col-cli-acciones { width: 92px; }
table.admin-table.admin-clients-table .row-actions { justify-content: flex-end; }
.admin-clients-table .cli-sub {
  font-size: 12px;
  color: #64748B;
}
.admin-clients-table .icon-mini { flex: 0 0 32px; padding: 0; }
.admin-clients-table .icon-mini-danger:hover {
  background: #FEF2F2;
  color: #DC2626;
  border-color: #FECACA;
}

/* En pantallas angostas cada cliente pasa a ser una tarjeta */
@media (max-width: 1240px) {
  table.admin-table.admin-clients-table,
  table.admin-table.admin-clients-table tbody {
    display: block;
    width: 100%;
  }
  table.admin-table.admin-clients-table thead {
    display: none;
  }
  table.admin-table.admin-clients-table tr {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: 10px 0;
    border-bottom: 1px solid #E2E8F0;
  }
  table.admin-table.admin-clients-table td[data-label] {
    width: auto;
    padding: 5px 14px;
    border-bottom: 0;
    text-align: left;
  }
  table.admin-table.admin-clients-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 3px;
    font-size: 12px;
    font-weight: 400;
    color: #64748B;
  }
  table.admin-table.admin-clients-table td[data-label="Cliente"],
  table.admin-table.admin-clients-table td[data-label="Contacto"] {
    grid-column: 1 / -1;
  }
  table.admin-table.admin-clients-table td[data-label="Cliente"]::before,
  table.admin-table.admin-clients-table td[data-label="Contacto"]::before {
    content: none;
  }
  table.admin-table.admin-clients-table td[data-label="Cliente"] {
    padding-right: 100px;
  }
  table.admin-table.admin-clients-table .col-cli-id {
    display: none;
  }
  table.admin-table.admin-clients-table .col-cli-acciones {
    position: absolute;
    top: 10px;
    right: 0;
    width: auto;
    border-bottom: 0;
  }
}
@media (max-width: 560px) {
  table.admin-table.admin-clients-table tr {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}