/* ============================================================
   JIRSEG S.A. — Sitio Público
   ============================================================ */

/* ── TOPBAR ─────────────────────────────────────────────────── */
.topbar {
  background: var(--primary-dark);
  color: rgba(255,255,255,.75);
  font-size: .8125rem;
  line-height: 1;
}
.topbar .wrap {
  display: flex; align-items: center; justify-content: space-between;
  height: var(--topbar-h); gap: var(--sp-4);
}
.topbar a { color: rgba(255,255,255,.75); transition: color var(--t-sm); }
.topbar a:hover { color: var(--white); }
.topbar .loc { display: flex; align-items: center; gap: var(--sp-2); }
.topbar .loc svg { width: 14px; height: 14px; flex-shrink: 0; opacity: .7; }
.topbar .right { display: flex; align-items: center; gap: var(--sp-5); }
.pill-auth {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: var(--r-full);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.85);
  transition: var(--t-sm);
}
.pill-auth:hover { background: rgba(255,255,255,.15); color: var(--white); }
.pill-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .75rem; font-weight: 600;
  padding: 3px 10px; border-radius: var(--r-full);
  background: rgba(196,154,63,.20); border: 1px solid rgba(196,154,63,.35);
  color: var(--accent-hi);
}

/* ── HEADER ─────────────────────────────────────────────────── */
.site-header {
  position: sticky; top: 0; z-index: 200;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px) saturate(160%);
  border-bottom: 1px solid var(--steel);
  box-shadow: 0 1px 0 rgba(14,27,42,.06);
}
.nav {
  display: flex; align-items: center; gap: var(--sp-5);
  height: var(--header-h);
}
.brand { display: flex; align-items: center; gap: var(--sp-4); }
.brand .logo-jirseg { height: 36px; width: auto; }
.brand .sep { width: 1px; height: 28px; background: var(--steel); }
.brand .logo-multlock { height: 22px; width: auto; opacity: .85; }
.nav-links {
  display: flex; gap: var(--sp-6); margin-left: var(--sp-2);
  font-weight: 500; font-size: .9375rem; color: var(--dark-mid);
}
.nav-links a {
  padding: 4px 0; position: relative;
  color: var(--ink); transition: color var(--t-sm);
}
.nav-links a::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 0; height: 2px; background: var(--primary);
  border-radius: 1px; transition: width var(--t);
}
.nav-links a:hover { color: var(--primary); }
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--primary); font-weight: 600; }
.nav-spacer { flex: 1; }
.nav-actions { display: flex; align-items: center; gap: var(--sp-3); }

/* Search */
.search-wrap { position: relative; }
.search-wrap input {
  width: 200px; padding: 9px 36px 9px 14px;
  border: 1.5px solid var(--steel); border-radius: var(--r-full);
  font-size: .875rem; transition: var(--t); outline: none; background: var(--paper);
}
.search-wrap input:focus { border-color: var(--primary); width: 240px; background: var(--white); box-shadow: 0 0 0 3px rgba(49,47,108,.10); }
.search-wrap .search-icon {
  position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  color: var(--muted); pointer-events: none;
}
.search-wrap .search-icon svg { width: 16px; height: 16px; }

/* Cart badge */
.cart-btn {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-full);
  background: var(--paper); border: 1.5px solid var(--steel);
  color: var(--ink); transition: var(--t-sm);
}
.cart-btn:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.cart-btn svg { width: 20px; height: 20px; }
.cart-count {
  position: absolute; top: -5px; right: -5px;
  min-width: 18px; height: 18px; border-radius: var(--r-full);
  background: var(--primary); color: var(--white);
  font-size: .65rem; font-weight: 700; display: flex; align-items: center; justify-content: center;
  padding: 0 4px; line-height: 1; border: 2px solid var(--white);
}
.cart-count.hidden { display: none; }

/* Burger */
.burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; padding: 8px; color: var(--ink);
}
.burger span { display: block; width: 22px; height: 2px; background: currentColor; border-radius: 1px; transition: var(--t); }

/* ── HERO ───────────────────────────────────────────────────── */
.hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 65%, #0a1829 100%);
  color: var(--white); overflow: hidden; position: relative;
  padding: var(--sp-20) 0 var(--sp-24);
}
.hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 70% 60% at 70% 50%, rgba(74,72,153,.30) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 80px;
  background: linear-gradient(to top, var(--white) 0%, transparent 100%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; }
.hero-grid {
  display: grid; grid-template-columns: 1fr 420px;
  align-items: center; gap: var(--sp-16);
}
.hero-content .eyebrow { margin-bottom: var(--sp-5); }
.hero-headline {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5.5vw, 3.75rem);
  font-weight: 700; line-height: 1.0; letter-spacing: -.03em;
  margin-bottom: var(--sp-5); color: var(--white);
}
.hero-headline .accent { color: var(--accent-hi); }
.hero-lead {
  font-size: 1.0625rem; color: rgba(255,255,255,.75);
  max-width: 480px; margin-bottom: var(--sp-8); line-height: 1.65;
}
.hero-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-10); }
.hero-stats {
  display: flex; gap: var(--sp-8);
  border-top: 1px solid rgba(255,255,255,.12); padding-top: var(--sp-6);
}
.hero-stat-num {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--accent-hi); line-height: 1;
}
.hero-stat-label { font-size: .8125rem; color: rgba(255,255,255,.6); margin-top: 4px; }

/* Shield Card */
.shield-card {
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  backdrop-filter: blur(10px);
}
.shield-card-img {
  width: 100%; aspect-ratio: 1;
  background: rgba(255,255,255,.06);
  border-radius: var(--r-md); margin-bottom: var(--sp-5);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.shield-card-img img { max-height: 200px; object-fit: contain; padding: var(--sp-4); filter: drop-shadow(0 8px 20px rgba(0,0,0,.3)); }
.shield-card-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(196,154,63,.25); border: 1px solid rgba(196,154,63,.4);
  color: var(--accent-hi); font-size: .75rem; font-weight: 700;
  padding: 4px 10px; border-radius: var(--r-full); margin-bottom: var(--sp-3);
}
.shield-card h3 {
  color: var(--white); font-size: 1.125rem; margin-bottom: var(--sp-2);
}
.shield-card p { color: rgba(255,255,255,.65); font-size: .875rem; margin-bottom: var(--sp-4); }
.shield-card .security-meter { margin-bottom: var(--sp-4); }
.shield-card-specs { display: flex; flex-direction: column; gap: var(--sp-2); }
.shield-card-spec {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .8125rem; color: rgba(255,255,255,.75);
}
.shield-card-spec::before { content: '✓'; color: var(--accent-hi); font-weight: 700; flex-shrink: 0; }

/* ── TRUST STRIP ────────────────────────────────────────────── */
.trust-strip {
  background: var(--primary);
  padding: var(--sp-5) 0;
}
.trust-strip .wrap { display: flex; align-items: stretch; gap: 0; }
.trust-item {
  flex: 1; display: flex; align-items: center; gap: 12px;
  padding: var(--sp-3) var(--sp-6);
  color: var(--white); font-size: .9375rem; font-weight: 500; line-height: 1.35;
  border-right: 1px solid rgba(255,255,255,.18);
}
.trust-item:last-child { border-right: none; }
.trust-item svg {
  width: 24px; height: 24px; flex-shrink: 0;
  color: var(--accent-hi);
}
.trust-icon {
  width: 44px; height: 44px; flex-shrink: 0;
  background: rgba(255,255,255,.10);
  border-radius: var(--r); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.trust-text strong { display: block; color: var(--white); font-size: .9375rem; font-weight: 600; }
.trust-text span   { color: rgba(255,255,255,.75); font-size: .8125rem; }

/* ── CATEGORÍAS ─────────────────────────────────────────────── */
.cats-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-4);
}
.cat-card {
  position: relative; overflow: hidden;
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 140px; transition: var(--t); cursor: pointer;
}
.cat-card::after {
  content: ''; position: absolute; bottom: 0; left: 0;
  width: 0; height: 3px; background: var(--primary);
  border-radius: 0 0 var(--r-md) var(--r-md);
  transition: width var(--t);
}
.cat-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.cat-card:hover::after { width: 100%; }
.cat-icon {
  display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: var(--r-md);
  background: var(--primary-tint); color: var(--primary);
}
.cat-icon svg { width: 28px; height: 28px; }
.cat-name { font-family: var(--font-display); font-size: 1rem; font-weight: 700; color: var(--ink); }
.cat-count { font-size: .8rem; color: var(--muted); }

/* ── PRODUCT CARD ───────────────────────────────────────────── */
.prods-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.prod-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); overflow: hidden;
  transition: var(--t); display: flex; flex-direction: column;
}
.prod-card:hover { border-color: var(--primary); transform: translateY(-4px); box-shadow: var(--shadow-md); }
.prod-card-img {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
}
.prod-card-img img { object-fit: contain; padding: var(--sp-4); max-height: 180px; transition: transform .35s ease; }
.prod-card:hover .prod-card-img img { transform: scale(1.04); }
.prod-card-level {
  position: absolute; top: 10px; left: 10px;
  background: var(--primary); color: var(--white);
  font-size: .65rem; font-weight: 700; letter-spacing: .06em;
  padding: 3px 8px; border-radius: var(--r-full);
}
.prod-card-body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-2); }
.prod-card-cat { font-size: .75rem; color: var(--muted); }
.prod-card-name { font-weight: 700; font-size: .9375rem; color: var(--ink); line-height: 1.3; }
.prod-card-sub  { font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.prod-card-footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--steel); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.prod-card-price { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; color: var(--primary); }
.prod-card-price.consultar { font-size: .8125rem; font-weight: 500; font-family: var(--font-body); color: var(--muted); }

/* ── CATALOG GRID (catálogo.php) ────────────────────────────── */
.product-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4);
}
.catalog-list.product-grid { grid-template-columns: 1fr; }
.product-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); overflow: hidden;
  transition: var(--t); display: flex; flex-direction: column;
}
.product-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.product-card-img-wrap {
  position: relative; aspect-ratio: 1; overflow: hidden;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
}
.product-card-img-wrap img { object-fit: contain; padding: var(--sp-4); max-height: 190px; transition: transform .35s ease; }
.product-card:hover .product-card-img-wrap img { transform: scale(1.04); }
.product-card-placeholder {
  width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: var(--paper);
}
.product-card-placeholder svg { width: 48px; height: 48px; opacity: .2; }
.product-card-body { padding: var(--sp-4); display: flex; flex-direction: column; flex: 1; gap: var(--sp-2); }
.product-card-name { font-weight: 700; font-size: .9375rem; color: var(--ink); line-height: 1.3; }
.product-card-name a { color: inherit; }
.product-card-desc { font-size: .8125rem; color: var(--muted); line-height: 1.4; }
.product-card-footer { margin-top: auto; padding-top: var(--sp-3); border-top: 1px solid var(--steel); display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.product-price { font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; color: var(--primary); }
.product-price-consult { font-size: .8125rem; color: var(--muted); }

/* Nivel de seguridad dots */
.level-dots { display: flex; align-items: center; gap: 3px; }
.level-dots .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--steel); border: 1.5px solid var(--steel-mid, #c8d0dc); }
.level-dots .dot.on,
.level-dots .dot.filled { background: var(--primary); border-color: var(--primary); }
.level-label { font-size: .7rem; color: var(--muted); margin-left: 4px; }

/* ── PROFORMA SECTION (cómo funciona) ───────────────────────── */
.proforma-section { background: var(--paper); }
.proforma-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); align-items: center; }
.steps { display: flex; flex-direction: column; gap: var(--sp-6); }
.step { display: flex; gap: var(--sp-5); align-items: flex-start; }
.step-num {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--r-full);
  background: var(--primary); color: var(--white);
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
}
.step-body h4 { font-size: .9375rem; font-weight: 700; margin-bottom: 4px; }
.step-body p  { font-size: .875rem; color: var(--muted); line-height: 1.55; }
.proforma-visual {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-lg); padding: var(--sp-8);
  box-shadow: var(--shadow);
}
.pv-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--steel); }
.pv-logo-area h3 { font-size: 1.125rem; color: var(--primary); }
.pv-logo-area p  { font-size: .75rem; color: var(--muted); }
.pv-num { font-size: .75rem; font-weight: 700; color: var(--accent); background: var(--accent-tint); padding: 4px 10px; border-radius: var(--r-full); }
.pv-items { display: flex; flex-direction: column; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.pv-item { display: flex; justify-content: space-between; font-size: .875rem; color: var(--ink); }
.pv-item span { color: var(--muted); }
.pv-footer { display: flex; gap: var(--sp-3); }

/* ── ASESORES ───────────────────────────────────────────────── */
.asesores-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.adv-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-3); transition: var(--t);
}
.adv-card:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-3px); }
.adv-avatar {
  width: 72px; height: 72px; border-radius: var(--r-full); overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--white); font-weight: 700;
  flex-shrink: 0;
}
.adv-avatar img { width: 100%; height: 100%; object-fit: cover; }
.adv-name  { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.adv-cargo { font-size: .8125rem; color: var(--muted); }
.adv-card .btn-outline { font-size: .8125rem; padding: 7px 16px; width: 100%; }

/* ── WHY JIRSEG ─────────────────────────────────────────────── */
.why-section { background: var(--dark); }
.why-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-5); }
.why-card {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-md); padding: var(--sp-8);
  transition: var(--t);
}
.why-card:hover { background: rgba(255,255,255,.09); border-color: rgba(196,154,63,.35); transform: translateY(-3px); }
.why-icon {
  width: 56px; height: 56px; border-radius: var(--r);
  background: rgba(196,154,63,.15); border: 1px solid rgba(196,154,63,.25);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: var(--sp-5);
}
.why-card h4 { font-family: var(--font-display); color: var(--white); font-size: 1.0625rem; line-height: 1.3; margin-bottom: var(--sp-3); }
.why-card p  { color: var(--gray-light); font-size: .875rem; line-height: 1.7; margin: 0; }

/* ── FINAL CTA ──────────────────────────────────────────────── */
.final-cta {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  padding: var(--sp-20) 0; text-align: center; position: relative; overflow: hidden;
}
.final-cta::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse 80% 80% at 50% 0%, rgba(196,154,63,.12) 0%, transparent 60%);
}
.final-cta .wrap { position: relative; }
.final-cta h2 { color: var(--white); font-size: clamp(1.75rem, 4vw, 2.75rem); margin-bottom: var(--sp-4); }
.final-cta p  { color: rgba(255,255,255,.70); font-size: 1.0625rem; margin-bottom: var(--sp-8); max-width: 520px; margin-left: auto; margin-right: auto; }
.final-cta-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* ── FOOTER ─────────────────────────────────────────────────── */
.site-footer { background: var(--dark); color: rgba(255,255,255,.65); padding: var(--sp-16) 0 var(--sp-8); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: var(--sp-8); margin-bottom: var(--sp-10); }
.footer-brand .logo-footer { height: 34px; filter: brightness(0) invert(1); margin-bottom: var(--sp-4); }
.footer-brand p { font-size: .875rem; line-height: 1.65; max-width: 280px; }
.footer-socials { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer-social {
  width: 36px; height: 36px; border-radius: var(--r-full);
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  display: flex; align-items: center; justify-content: center;
  font-size: .875rem; transition: var(--t-sm);
}
.footer-social:hover { background: rgba(255,255,255,.16); color: var(--white); }
.footer-col h5 {
  font-family: var(--font-display); font-size: .875rem; font-weight: 700;
  color: var(--white); letter-spacing: .05em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--sp-2); }
.footer-col li a {
  font-size: .875rem; color: rgba(255,255,255,.6);
  transition: color var(--t-sm);
}
.footer-col li a:hover { color: var(--white); }
.footer-contact { display: flex; flex-direction: column; gap: var(--sp-3); }
.footer-contact-item { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: .875rem; }
.footer-contact-item svg { width: 16px; height: 16px; color: var(--accent); flex-shrink: 0; margin-top: 2px; }
.footer-bottom {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: var(--sp-6); border-top: 1px solid rgba(255,255,255,.08);
  font-size: .8125rem; gap: var(--sp-4); flex-wrap: wrap;
}
.footer-bottom a { color: rgba(255,255,255,.5); transition: color var(--t-sm); }
.footer-bottom a:hover { color: var(--white); }

/* ── FLOATING WA ────────────────────────────────────────────── */
.float-wa {
  position: fixed; bottom: 28px; right: 28px; z-index: 500;
  width: 56px; height: 56px; border-radius: var(--r-full);
  background: var(--wa); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 20px rgba(37,211,102,.5);
  transition: var(--t); text-decoration: none;
}
.float-wa:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.65); }
.float-wa svg { width: 28px; height: 28px; }
.float-wa::before {
  content: ''; position: absolute; width: 56px; height: 56px;
  border-radius: var(--r-full); background: var(--wa); opacity: .45;
  animation: wa-pulse 2.5s infinite;
}
@keyframes wa-pulse {
  0%   { transform: scale(1); opacity: .45; }
  70%  { transform: scale(1.55); opacity: 0; }
  100% { transform: scale(1.55); opacity: 0; }
}

/* ── PÁGINA CATÁLOGO ────────────────────────────────────────── */
.catalog-page { padding: var(--sp-10) 0 var(--sp-20); }
.catalog-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; }
.catalog-sidebar { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 16px); }
.catalog-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: var(--sp-2); }
.catalog-desc { color: var(--muted); margin-bottom: var(--sp-4); }
.catalog-header { margin-bottom: var(--sp-5); }
.sidebar-card, .sidebar-section {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-5); margin-bottom: var(--sp-4);
}
.sidebar-title { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--sp-4); }
.sidebar-cats { display: flex; flex-direction: column; gap: 2px; }
.sidebar-cat, .sidebar-cat-link {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 12px; border-radius: var(--r); font-size: .9rem;
  color: var(--ink); transition: var(--t-sm); cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  text-decoration: none;
}
.sidebar-cat:hover, .sidebar-cat-link:hover   { background: var(--primary-tint); color: var(--primary); }
.sidebar-cat.active, .sidebar-cat-link.active  { background: var(--primary); color: var(--white); font-weight: 600; }
.sidebar-cat .cat-count, .sidebar-cat-link .cat-count { margin-left: auto; font-size: .75rem; opacity: .7; }
.sort-options { display: flex; flex-direction: column; gap: 4px; }
.sort-btn {
  padding: 8px 12px; border-radius: var(--r); font-size: .875rem; text-align: left;
  background: none; border: 1.5px solid var(--steel); color: var(--ink); cursor: pointer; transition: var(--t-sm);
}
.sort-btn:hover  { border-color: var(--primary); color: var(--primary); }
.sort-btn.active { background: var(--primary); border-color: var(--primary); color: var(--white); font-weight: 600; }
.sidebar-cta { margin-top: var(--sp-2); }
.catalog-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5); gap: var(--sp-4);
}
.catalog-count { font-size: .875rem; color: var(--muted); }
.catalog-sort {
  padding: 8px 12px; border: 1.5px solid var(--steel); border-radius: var(--r);
  font-size: .875rem; background: var(--white); cursor: pointer; outline: none;
}
.no-results {
  text-align: center; padding: var(--sp-16) 0; color: var(--muted);
}
.no-results svg { width: 48px; height: 48px; margin: 0 auto var(--sp-4); opacity: .3; }

/* Estado vacío catálogo */
.catalog-empty {
  text-align: center; padding: var(--sp-16) var(--sp-8); color: var(--muted);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-4);
}
.catalog-empty svg { width: 56px; height: 56px; opacity: .25; }
.catalog-empty h3 { font-size: 1.25rem; color: var(--ink); margin: 0; }
.catalog-empty p { margin: 0; max-width: 320px; }

/* ── PÁGINA PRODUCTO ────────────────────────────────────────── */
.product-page { padding: var(--sp-8) 0 var(--sp-20); }
.product-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12); align-items: start; }
.product-gallery-main {
  aspect-ratio: 1; background: var(--paper); border-radius: var(--r-lg);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  border: 1.5px solid var(--steel); margin-bottom: var(--sp-3); cursor: zoom-in;
}
.product-gallery-main img { object-fit: contain; max-height: 400px; padding: var(--sp-6); transition: transform .35s; }
.product-gallery-main:hover img { transform: scale(1.05); }
.product-thumbs { display: flex; gap: var(--sp-2); }
.product-thumb {
  width: 72px; height: 72px; border-radius: var(--r); overflow: hidden;
  border: 2px solid var(--steel); cursor: pointer; background: var(--paper);
  display: flex; align-items: center; justify-content: center; transition: var(--t-sm);
}
.product-thumb.active,
.product-thumb:hover { border-color: var(--primary); }
.product-thumb img { object-fit: contain; padding: 6px; }
.product-info .badge { margin-bottom: var(--sp-4); }
.product-info h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: var(--sp-3); }
.product-info .sub { font-size: 1rem; color: var(--muted); margin-bottom: var(--sp-5); }
.product-price {
  font-family: var(--font-display); font-size: 2rem; font-weight: 700;
  color: var(--primary); margin-bottom: var(--sp-5);
}
.product-price.consultar { font-size: 1rem; font-family: var(--font-body); font-weight: 500; color: var(--muted); }
.product-specs { margin: var(--sp-5) 0; border-top: 1px solid var(--steel); padding-top: var(--sp-5); }
.spec-row { display: flex; justify-content: space-between; padding: 9px 0; border-bottom: 1px solid var(--steel); font-size: .9rem; }
.spec-row .spec-label { color: var(--muted); }
.spec-row .spec-value { font-weight: 600; }
.product-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-6); }
.product-desc { margin-top: var(--sp-8); }
.product-desc h3 { font-size: 1rem; font-weight: 700; margin-bottom: var(--sp-3); }
.product-desc p { color: var(--muted); font-size: .9375rem; line-height: 1.65; }
.product-features { margin-top: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); }
.product-feature {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: .9rem; color: var(--ink);
}
.product-feature::before { content: '✓'; color: var(--primary); font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.related { margin-top: var(--sp-16); }
.related h2 { margin-bottom: var(--sp-8); }

/* ── PROFORMA CART ──────────────────────────────────────────── */
.cart-page { padding: var(--sp-10) 0 var(--sp-20); }
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: var(--sp-8); align-items: start; }

/* Panel izquierdo / panel derecho */
.cart-products-panel { min-width: 0; }
.cart-form-panel     { min-width: 0; }

/* Encabezado del panel de productos */
.cart-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-5);
}
.cart-title {
  display: flex; align-items: center; gap: var(--sp-3);
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin: 0;
}
.cart-title svg { width: 28px; height: 28px; flex-shrink: 0; color: var(--primary); }
.cart-items-count {
  font-size: .875rem; color: var(--muted); font-weight: 500;
}

/* Tarjeta del formulario */
.cart-form-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6); margin-bottom: var(--sp-4);
}
.cart-form-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin-bottom: var(--sp-2);
}
.cart-form-subtitle { font-size: .9rem; color: var(--muted); margin-bottom: var(--sp-5); }
.cart-form-submit   { margin-top: var(--sp-5); }
.cart-form-legal {
  font-size: .75rem; color: var(--muted); text-align: center;
  margin-top: var(--sp-3); line-height: 1.5;
}

/* Cómo funciona (mini pasos) */
.cart-how-mini {
  background: var(--paper); border-radius: var(--r-md);
  padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3);
}
.cart-how-item {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  font-size: .875rem; color: var(--muted); line-height: 1.45;
}
.cart-how-num {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--white);
  font-size: .6875rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  margin-top: 1px;
}

/* Selector de asesor (nuevo marcado) */
.asesor-picker { display: flex; flex-direction: column; gap: var(--sp-2); margin-top: var(--sp-2); }
.asesor-picker .asesor-option.active {
  border-color: var(--primary); background: var(--primary-tint);
}
.asesor-avatar {
  width: 36px; height: 36px; border-radius: var(--r-full); flex-shrink: 0;
  overflow: hidden; background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: .75rem; font-weight: 700;
}
.asesor-avatar-photo { object-fit: cover; }
.asesor-avatar-generic { background: var(--accent); color: #2a1f00; }
.asesor-info { flex: 1; min-width: 0; }
.asesor-info strong { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); }
.asesor-info span   { font-size: .75rem; color: var(--muted); }
.asesor-check {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0;
  background: var(--primary); color: var(--white); font-size: .75rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--t-sm);
}
.asesor-option.active .asesor-check { opacity: 1; }

/* Resumen cart (sección de subtotal) */
.cart-summary-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--steel);
  font-size: .9375rem;
}
.cart-summary-note { font-size: .75rem; color: var(--muted); margin-top: var(--sp-3); line-height: 1.5; }
.cart-items-list { display: none; }
.cart-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.cart-item {
  display: flex; gap: var(--sp-4); align-items: flex-start;
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-4);
}
.cart-item-img {
  width: 80px; height: 80px; flex-shrink: 0; border-radius: var(--r);
  background: var(--paper); display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cart-item-img img { object-fit: contain; padding: 6px; }
.cart-item-body { flex: 1; }
.cart-item-name { font-weight: 700; font-size: .9375rem; margin-bottom: 4px; }
.cart-item-sub  { font-size: .8125rem; color: var(--muted); }
.cart-item-actions { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.qty-control {
  display: flex; align-items: center; border: 1.5px solid var(--steel);
  border-radius: var(--r-full); overflow: hidden;
}
.qty-btn {
  width: 32px; height: 32px; background: var(--paper); border: none;
  font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: var(--t-sm);
}
.qty-btn:hover { background: var(--primary-tint); color: var(--primary); }
.qty-val { padding: 0 var(--sp-3); font-size: .9rem; font-weight: 600; min-width: 32px; text-align: center; }
.cart-remove { border: none; background: none; color: var(--muted); cursor: pointer; font-size: .8125rem; transition: color var(--t-sm); }
.cart-remove:hover { color: var(--error); }
.cart-summary {
  display: none;
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
  position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 16px);
}
.cart-summary h3 { font-size: 1.1rem; margin-bottom: var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--steel); }
.cart-form-fields { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.asesor-select { display: flex; flex-direction: column; gap: var(--sp-2); }
.asesor-option {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 12px; border: 1.5px solid var(--steel);
  border-radius: var(--r); cursor: pointer; transition: var(--t-sm);
}
.asesor-option:hover { border-color: var(--primary); }
.asesor-option input[type=radio] { accent-color: var(--primary); }
.asesor-option-avatar {
  width: 32px; height: 32px; border-radius: var(--r-full); overflow: hidden;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  display: flex; align-items: center; justify-content: center;
  color: var(--white); font-size: .75rem; font-weight: 700; flex-shrink: 0;
}
.cart-empty {
  text-align: center; padding: var(--sp-16);
  color: var(--muted); grid-column: 1/-1;
}
.cart-empty svg { width: 64px; height: 64px; margin: 0 auto var(--sp-4); opacity: .25; }

/* ── BREADCRUMB ─────────────────────────────────────────────── */
.breadcrumb {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .8125rem; color: var(--muted); margin-bottom: var(--sp-6);
}
.breadcrumb a:hover { color: var(--primary); }
.breadcrumb .sep { opacity: .4; }

/* ── PÁGINA HERO SIMPLE ─────────────────────────────────────── */
.page-hero {
  background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%);
  color: var(--white); padding: var(--sp-16) 0;
}
.page-hero h1 { color: var(--white); margin-bottom: var(--sp-3); }
.page-hero p  { color: rgba(255,255,255,.70); font-size: 1.0625rem; }

/* ── MOBILE NAV DRAWER ──────────────────────────────────────── */
.mobile-nav {
  position: fixed; top: 0; left: 0; bottom: 0; width: 300px; z-index: 600;
  background: var(--white); box-shadow: var(--shadow-lg);
  transform: translateX(-100%); transition: transform var(--t-lg);
  overflow-y: auto; display: flex; flex-direction: column;
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--steel);
}
.mobile-nav-head img { height: 30px; }
.mobile-close { background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--muted); }
.mobile-nav-links { flex: 1; padding: var(--sp-4) 0; }
.mobile-nav-links a {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-5); font-size: .9375rem; font-weight: 500;
  color: var(--ink); border-bottom: 1px solid var(--steel);
  transition: color var(--t-sm), background var(--t-sm);
}
.mobile-nav-links a:hover  { color: var(--primary); background: var(--primary-tint); }
.mobile-nav-links a.active { color: var(--primary); font-weight: 700; }
.mobile-nav-footer { padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-3); }
.nav-overlay {
  display: none; position: fixed; inset: 0; z-index: 590;
  background: rgba(0,0,0,.4); backdrop-filter: blur(3px);
}
.nav-overlay.show { display: block; }

/* ── MODAL LIGHTBOX ─────────────────────────────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 800;
  background: rgba(0,0,0,.85); backdrop-filter: blur(6px);
  align-items: center; justify-content: center;
}
.modal-overlay.show { display: flex; }
.modal-box {
  background: var(--white); border-radius: var(--r-lg);
  width: 90vw; max-width: 580px; max-height: 90vh;
  overflow-y: auto; padding: var(--sp-6);
  position: relative; box-shadow: var(--shadow-lg);
}
.modal-close {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 32px; height: 32px; border-radius: var(--r-full);
  background: var(--paper); border: 1.5px solid var(--steel);
  font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: var(--t-sm); line-height: 1;
}
.modal-close:hover { background: var(--error); color: var(--white); border-color: var(--error); }

/* ── SEARCH RESULTS DROPDOWN ────────────────────────────────── */
.search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); box-shadow: var(--shadow-md);
  max-height: 320px; overflow-y: auto; z-index: 300; display: none;
}
.search-results.show { display: block; }
.search-result-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 10px 14px; transition: background var(--t-sm); cursor: pointer;
  border-bottom: 1px solid var(--steel); text-decoration: none; color: var(--ink);
}
.search-result-item:hover { background: var(--primary-tint); }
.search-result-img { width: 36px; height: 36px; border-radius: var(--r-sm); object-fit: contain; background: var(--paper); flex-shrink: 0; }
.search-result-name { font-size: .875rem; font-weight: 600; }
.search-result-cat  { font-size: .75rem; color: var(--muted); }

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .prods-grid     { grid-template-columns: repeat(3,1fr); }
  .product-grid   { grid-template-columns: repeat(3,1fr); }
  .asesores-grid  { grid-template-columns: repeat(3,1fr); }
  .footer-grid    { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
  .hero-grid      { grid-template-columns: 1fr; }
  .shield-card    { display: none; }
  .catalog-layout { grid-template-columns: 200px 1fr; }
}

@media (max-width: 820px) {
  .nav-links, .search-wrap { display: none; }
  .burger { display: flex; }
  .prods-grid    { grid-template-columns: repeat(2,1fr); }
  .product-grid  { grid-template-columns: repeat(2,1fr); }
  .cats-grid     { grid-template-columns: repeat(2,1fr); }
  .asesores-grid { grid-template-columns: repeat(2,1fr); }
  .why-grid      { grid-template-columns: repeat(2,1fr); }
  .proforma-grid { grid-template-columns: 1fr; }
  .proforma-visual { display: none; }
  .cart-layout   { grid-template-columns: 1fr; }
  .cart-summary  { position: static; }
  .product-layout{ grid-template-columns: 1fr; }
  .trust-strip .wrap { flex-direction: column; }
  .trust-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,.12); }
  .trust-item:last-child { border-bottom: none; }
  .catalog-layout { grid-template-columns: 1fr; }
  .catalog-sidebar { display: none; }
}

@media (max-width: 540px) {
  .prods-grid      { grid-template-columns: 1fr 1fr; }
  .product-grid    { grid-template-columns: 1fr 1fr; }
  .why-grid        { grid-template-columns: 1fr; }
  .cats-grid       { grid-template-columns: 1fr 1fr; }
  .asesores-grid   { grid-template-columns: 1fr 1fr; }
  .hero-ctas       { flex-direction: column; }
  .hero-stats      { flex-wrap: wrap; gap: var(--sp-5); }
  .footer-grid     { grid-template-columns: 1fr; }
  .topbar .loc     { display: none; }
  .final-cta-actions { flex-direction: column; align-items: center; }
}

/* ============================================================
   BADGES EXTRA
   ============================================================ */
.badge-featured { background: var(--accent-tint); color: #7a5a00; border: 1px solid rgba(196,154,63,.25); }
.badge-cat      { background: var(--primary-tint); color: var(--primary); }
.badge-success  { background: #d4f5e2; color: #065f3a; }
.badge-muted    { background: var(--steel); color: var(--muted); }

/* ============================================================
   SECTION HEADERS (shared por catálogo, nosotros, producto)
   ============================================================ */
.section-header { text-align: center; margin-bottom: var(--sp-10); }
.section-header .eyebrow { margin-bottom: var(--sp-3); }
.section-title {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.25rem);
  font-weight: 700; color: var(--ink); margin-bottom: var(--sp-3);
}
.section-sub { color: var(--muted); font-size: .9375rem; max-width: 520px; margin: 0 auto; }
.text-left { text-align: left; }
.section-tinted { background: var(--paper); }

/* ============================================================
   PAGE HERO SIMPLE (nosotros, contacto)
   ============================================================ */
.page-hero-sm { padding: var(--sp-12) 0; }
.page-hero-title {
  font-family: var(--font-display); font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 700; color: var(--white); margin-bottom: var(--sp-3);
}
.page-hero-sub { color: rgba(255,255,255,.75); font-size: 1.0625rem; }
.breadcrumb-light a, .breadcrumb-light span { color: rgba(255,255,255,.65); }
.breadcrumb-light a:hover { color: var(--white); }
.breadcrumb-light .sep { opacity: .4; }

/* ============================================================
   PÁGINA NOSOTROS
   ============================================================ */
/* ── Historia 2 columnas ── */
.nos-story-grid {
  display: grid; grid-template-columns: 1fr 400px; gap: var(--sp-14); align-items: start;
}
.nosotros-body {
  color: var(--muted); font-size: .9375rem; line-height: 1.8; margin: var(--sp-5) 0 var(--sp-6);
}
.nos-badges { display: flex; flex-direction: column; gap: var(--sp-3); }
.nos-badge {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: .875rem; color: var(--ink); font-weight: 500;
}
.nos-badge svg { color: var(--primary); flex-shrink: 0; }

/* Highlight card (aside) */
.nos-highlight-card {
  background: linear-gradient(150deg, var(--primary-dark) 0%, #0d2a4a 100%);
  border-radius: var(--r-lg); padding: var(--sp-8);
  position: sticky; top: 100px;
}
.nos-highlight-header {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: 1rem; font-weight: 700; color: var(--accent);
  margin-bottom: var(--sp-6); padding-bottom: var(--sp-5);
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nos-highlight-header svg { flex-shrink: 0; }
.nos-highlight-list { display: flex; flex-direction: column; gap: var(--sp-4); list-style: none; padding: 0; margin: 0; }
.nos-highlight-list li { display: flex; align-items: flex-start; gap: var(--sp-3); }
.nos-check {
  color: var(--accent); font-weight: 800; font-size: 1rem;
  flex-shrink: 0; margin-top: 1px;
}
.nos-highlight-list span:last-child { font-size: .875rem; color: rgba(255,255,255,.75); line-height: 1.5; }

/* ── Stats band oscuro ── */
.nos-stats-band {
  background: linear-gradient(135deg, var(--primary-dark) 0%, #0d2a4a 100%);
  padding: var(--sp-10) 0;
}
.nos-stats-grid {
  display: flex; align-items: center; justify-content: center;
}
.nos-stat-item { text-align: center; flex: 1; }
.nos-stat-num {
  font-family: var(--font-display); font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 800; color: var(--white); line-height: 1; display: block;
}
.nos-stat-label {
  font-size: .8125rem; color: rgba(255,255,255,.55);
  text-transform: uppercase; letter-spacing: .08em;
  margin-top: var(--sp-2); display: block;
}
.nos-stats-divider {
  width: 1px; height: 60px; background: rgba(255,255,255,.15); flex-shrink: 0;
}

/* ── Misión / Visión ── */
.mision-vision-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
}
.nos-mv-card {
  background: var(--white);
  border: 1.5px solid var(--steel);
  border-top: 4px solid var(--primary);
  border-radius: var(--r-md); padding: var(--sp-8);
  transition: box-shadow var(--t), transform var(--t);
}
.nos-mv-card:hover { box-shadow: 0 8px 32px -8px rgba(30,78,128,.16); transform: translateY(-3px); }
.nos-mv-icon {
  width: 56px; height: 56px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--sp-5);
}
.nos-mv-icon-mision { background: var(--primary); color: var(--white); }
.nos-mv-icon-vision { background: var(--accent); color: var(--white); }
.nos-mv-card h3 { font-size: 1.25rem; font-weight: 700; margin-bottom: var(--sp-3); color: var(--ink); }
.nos-mv-card p  { font-size: .9375rem; color: var(--muted); line-height: 1.75; }

/* Valores */
.valores-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5);
}
.valor-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6); text-align: center;
  transition: var(--t);
}
.valor-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.valor-icon {
  width: 56px; height: 56px; margin: 0 auto var(--sp-4);
  background: var(--primary-tint); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: var(--primary);
}
.valor-icon svg { width: 28px; height: 28px; }
.valor-card h4 { font-size: .9375rem; margin-bottom: var(--sp-2); color: var(--ink); }
.valor-card p  { font-size: .8125rem; color: var(--muted); line-height: 1.6; }

/* Asesores en nosotros */
.advisors-grid    { display: grid; grid-template-columns: repeat(4,1fr); gap: var(--sp-5); }
.advisors-grid-lg { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-6); }
.advisor-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--sp-2); transition: var(--t);
}
.advisor-card:hover { border-color: var(--primary); transform: translateY(-3px); box-shadow: var(--shadow); }
.advisor-photo {
  width: 80px; height: 80px; border-radius: var(--r-full);
  object-fit: cover; margin-bottom: var(--sp-2);
}
.advisor-avatar {
  width: 80px; height: 80px; border-radius: var(--r-full);
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.5rem; color: var(--white); font-weight: 700;
  margin-bottom: var(--sp-2);
}
.advisor-name  { font-weight: 700; font-size: .9375rem; color: var(--ink); }
.advisor-cargo { font-size: .8125rem; color: var(--muted); }

/* CTA section */
.cta-section { background: linear-gradient(135deg, var(--primary) 0%, var(--dark) 100%); }
.cta-box { text-align: center; padding: var(--sp-12) 0; }
.cta-box h2 { color: var(--white); font-size: clamp(1.5rem,3.5vw,2.25rem); margin-bottom: var(--sp-3); }
.cta-box p  { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: var(--sp-8); max-width: 500px; margin-left:auto; margin-right:auto; }
.cta-actions { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; }

/* ============================================================
   PÁGINA CONTACTO
   ============================================================ */
.contacto-grid {
  display: grid; grid-template-columns: 1fr 360px; gap: var(--sp-8); align-items: start;
}
/* Sección ubicación / mapa profesional */
.ubicacion-section { }
.ubicacion-grid {
  display: grid; grid-template-columns: 1fr 340px; gap: var(--sp-8); align-items: start;
}
.ubicacion-map {
  border-radius: var(--r-md); overflow: hidden;
  box-shadow: 0 4px 32px rgba(0,0,0,.1);
  border: 1.5px solid var(--steel);
}
.ubicacion-map iframe { display: block; width: 100%; }
.ubicacion-info-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
  box-shadow: 0 2px 16px rgba(0,0,0,.06);
}
.ubicacion-info-title {
  font-size: 1rem; font-weight: 700; color: var(--ink);
  margin-bottom: var(--sp-5);
  display: flex; align-items: center; gap: var(--sp-2);
}
.ubicacion-info-title svg { color: var(--primary); flex-shrink: 0; }
.ubicacion-detail {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-3) 0; border-bottom: 1px solid var(--paper);
}
.ubicacion-detail:last-of-type { border-bottom: none; }
.ubicacion-detail-icon {
  width: 38px; height: 38px; border-radius: var(--r); flex-shrink: 0;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.ubicacion-detail-icon-wa { background: #d4f5e2; color: #1A7F4B; }
.ubicacion-detail strong { display: block; font-size: .8125rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.ubicacion-detail span,
.ubicacion-detail a { font-size: .875rem; color: var(--muted); }
.ubicacion-detail a:hover { color: var(--primary); }
.ubicacion-cta {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  width: 100%; margin-top: var(--sp-5);
}

@media (max-width: 860px) {
  .ubicacion-grid { grid-template-columns: 1fr; }
  .ubicacion-map iframe { height: 320px; }
}
.contacto-form-panel { min-width: 0; }
.contacto-form-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.contacto-form-title {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 700;
  color: var(--ink); margin-bottom: var(--sp-5);
}
.contacto-info-panel { min-width: 0; }
.contacto-info-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6); margin-bottom: var(--sp-4);
}
.contacto-info-title {
  font-size: 1.1rem; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-5);
}
.contacto-items { display: flex; flex-direction: column; gap: var(--sp-4); }
.contacto-item {
  display: flex; align-items: flex-start; gap: var(--sp-4);
}
.contacto-item-icon {
  width: 42px; height: 42px; border-radius: var(--r); flex-shrink: 0;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.contacto-item-icon svg { width: 20px; height: 20px; flex-shrink: 0; }
.contacto-item-icon-wa { background: #d4f5e2; color: #1A7F4B; }
.contacto-item strong { display: block; font-size: .875rem; font-weight: 600; color: var(--ink); margin-bottom: 2px; }
.contacto-item a,
.contacto-item span  { font-size: .875rem; color: var(--muted); }
.contacto-item a:hover { color: var(--primary); }

.contacto-socials {
  display: flex; gap: var(--sp-3); margin-top: var(--sp-5);
  padding-top: var(--sp-5); border-top: 1px solid var(--steel);
}
.contacto-social {
  width: 38px; height: 38px; border-radius: var(--r-full);
  background: var(--paper); border: 1.5px solid var(--steel);
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); transition: var(--t-sm);
}
.contacto-social:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }

.contacto-wa-cta {
  display: flex; align-items: center; gap: var(--sp-4);
  background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
  border-radius: var(--r-md); padding: var(--sp-4) var(--sp-5);
  color: white; text-decoration: none; transition: var(--t-sm);
}
.contacto-wa-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(37,211,102,.45); }
.contacto-wa-cta strong { display: block; font-size: .875rem; font-weight: 700; }
.contacto-wa-cta span  { font-size: .75rem; opacity: .85; }
.contacto-wa-cta > div { flex: 1; }

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

/* ============================================================
   PÁGINA CATÁLOGO — cabecera y controles faltantes
   ============================================================ */
.catalog-header {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-4); margin-bottom: var(--sp-5); flex-wrap: wrap;
}
.catalog-header-right { display: flex; align-items: center; gap: var(--sp-3); flex-shrink: 0; }
.catalog-search-form  { display: flex; }
.catalog-search-wrap  { display: flex; align-items: center; border: 1.5px solid var(--steel); border-radius: var(--r-full); overflow: hidden; }
.catalog-search-input {
  padding: 8px 14px; font-size: .875rem; border: none; outline: none;
  background: var(--white); min-width: 160px;
}
.catalog-search-btn {
  padding: 8px 12px; background: var(--primary); border: none; color: var(--white);
  cursor: pointer; display: flex; align-items: center; transition: var(--t-sm);
}
.catalog-search-btn:hover { background: var(--primary-dark); }
.catalog-search-btn svg { width: 16px; height: 16px; }
.view-toggle { display: flex; border: 1.5px solid var(--steel); border-radius: var(--r); overflow: hidden; }
.view-btn {
  width: 36px; height: 36px; background: var(--white); border: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted); cursor: pointer; transition: var(--t-sm);
}
.view-btn:hover { background: var(--primary-tint); color: var(--primary); }
.view-btn.active { background: var(--primary); color: var(--white); }
.view-btn svg { width: 16px; height: 16px; }
.search-tag-row { margin-bottom: var(--sp-4); }
.search-tag {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--primary-tint); color: var(--primary);
  padding: 6px 12px; border-radius: var(--r-full); font-size: .8125rem; font-weight: 600;
}
.search-tag-clear {
  font-size: 1rem; opacity: .6; cursor: pointer; transition: opacity var(--t-sm); text-decoration: none; color: inherit;
}
.search-tag-clear:hover { opacity: 1; }

/* ============================================================
   PÁGINA DETALLE PRODUCTO
   ============================================================ */
.product-detail { padding: var(--sp-8) 0 var(--sp-20); }
.product-detail-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-12);
  align-items: start; margin-bottom: var(--sp-12);
}

/* Galería */
.product-gallery { position: sticky; top: calc(var(--header-h) + var(--topbar-h) + 16px); }
.gallery-main {
  aspect-ratio: 1; background: var(--paper); border-radius: var(--r-lg);
  border: 1.5px solid var(--steel); overflow: hidden; position: relative;
  display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3);
}
.gallery-main img {
  object-fit: contain; max-height: 420px; padding: var(--sp-6);
  transition: transform .35s ease; cursor: zoom-in;
}
.gallery-main:hover img { transform: scale(1.04); }
.gallery-placeholder {
  width: 100%; height: 100%; min-height: 300px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
}
.gallery-placeholder svg { width: 64px; height: 64px; opacity: .2; }
.gallery-badge { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.gallery-thumbs { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.gallery-thumb {
  width: 72px; height: 72px; border-radius: var(--r); overflow: hidden;
  border: 2px solid var(--steel); background: var(--paper);
  cursor: pointer; transition: var(--t-sm); display: flex; align-items: center; justify-content: center;
  padding: 0;
}
.gallery-thumb img { object-fit: contain; padding: 6px; width: 100%; height: 100%; }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--primary); }

/* Información */
.product-info { display: flex; flex-direction: column; gap: var(--sp-4); }
.product-detail-name {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700; color: var(--ink); line-height: 1.15;
}
.product-level-row { display: flex; align-items: center; gap: var(--sp-3); }
.level-dots-lg .dot { width: 12px; height: 12px; }
.level-text { font-size: .875rem; color: var(--muted); }
.product-desc { color: var(--muted); font-size: .9375rem; line-height: 1.75; }

/* Sección de specs dentro de info */
.product-section { padding-top: var(--sp-4); border-top: 1px solid var(--steel); }
.product-section-title { font-size: .875rem; font-weight: 700; color: var(--ink); margin-bottom: var(--sp-3); }
.acabados-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.acabado-badge {
  display: inline-flex; align-items: center;
  padding: 5px 12px; border-radius: var(--r-full);
  background: var(--paper); border: 1.5px solid var(--steel);
  font-size: .8125rem; font-weight: 500; color: var(--ink);
}

/* Bloque precio */
.product-price-block { padding: var(--sp-5) 0; border-top: 1px solid var(--steel); border-bottom: 1px solid var(--steel); }
.product-price-display { display: flex; flex-direction: column; gap: 4px; }
.price-label { font-size: .75rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.price-value {
  font-family: var(--font-display); font-size: 2.25rem; font-weight: 700;
  color: var(--primary); line-height: 1;
}
.price-note { font-size: .75rem; color: var(--muted); }
.product-price-consult-block {
  display: flex; align-items: center; gap: var(--sp-4);
  background: var(--paper); border-radius: var(--r); padding: var(--sp-4);
}
.price-consult-icon { font-size: 1.75rem; flex-shrink: 0; }
.product-price-consult-block strong { display: block; color: var(--ink); margin-bottom: 4px; }
.product-price-consult-block p { font-size: .875rem; color: var(--muted); }

/* CTAs */
.product-ctas { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.product-ctas .btn { flex: 1; min-width: 160px; justify-content: center; }

/* Trust items */
.product-trust { display: flex; flex-direction: column; gap: var(--sp-2); padding-top: var(--sp-2); }
.product-trust-item {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: .875rem; color: var(--muted);
}
.product-trust-item svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

/* Specs section debajo del grid */
.product-specs-section { padding-top: var(--sp-12); border-top: 1px solid var(--steel); }
.product-specs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6); }
.specs-card {
  background: var(--white); border: 1.5px solid var(--steel);
  border-radius: var(--r-md); padding: var(--sp-6);
}
.specs-card-title {
  font-family: var(--font-display); font-size: 1rem; font-weight: 700;
  color: var(--ink); margin-bottom: var(--sp-4); padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--steel);
}
.specs-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.specs-list li {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  font-size: .875rem; color: var(--muted); line-height: 1.5;
}
.specs-list li svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; margin-top: 2px; }
.blindaje-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.blindaje-item {
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: .875rem; color: var(--muted); padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--steel);
}
.blindaje-item:last-child { border-bottom: none; }
.blindaje-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--primary); flex-shrink: 0;
}
.related-section { padding-top: var(--sp-12); border-top: 1px solid var(--steel); }
.related-section .product-grid { margin-top: var(--sp-6); }

/* Responsive: nosotros */
@media (max-width: 960px) {
  .nos-story-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
  .nos-highlight-card { position: static; }
}
@media (max-width: 900px) {
  .mision-vision-grid { grid-template-columns: 1fr; }
  .valores-grid { grid-template-columns: repeat(2, 1fr); }
  .advisors-grid-lg { grid-template-columns: repeat(2, 1fr); }
  .nos-stats-divider { height: 40px; }
}
@media (max-width: 560px) {
  .nos-stats-grid { flex-wrap: wrap; gap: var(--sp-6); }
  .nos-stat-item { flex: 0 0 45%; }
  .nos-stats-divider { display: none; }
}
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .product-specs-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .nosotros-stats { flex-wrap: wrap; gap: var(--sp-5); }
  .nosotros-cards { flex-direction: column; }
  .valores-grid { grid-template-columns: 1fr 1fr; }
  .advisors-grid { grid-template-columns: 1fr 1fr; }
  .advisors-grid-lg { grid-template-columns: 1fr; }
  .catalog-header { flex-direction: column; }
  .product-ctas { flex-direction: column; }
}

/* ============================================================
   CLASES DE APOYO — reemplazan estilos inline de las vistas
   ============================================================ */

/* Brand fallback (cuando no hay logo en el header) */
.brand-name-text {
  font-family: var(--font-display); font-size: 1.4rem;
  font-weight: 700; color: var(--primary);
}

/* Logo en nav móvil */
.mobile-nav-logo { height: 28px; width: auto; display: block; }

/* Enlace de sub-categoría en nav móvil */
.mobile-nav-sub { padding-left: 32px; font-size: .875rem; }

/* Texto secundario en el footer brand */
.footer-sub { margin-top: var(--sp-2); font-size: .8125rem; }

/* Acento claro (brass hi) en texto inline */
.text-accent-hi { color: var(--accent-hi); }

/* Placeholder icono en hero cuando no hay imagen */
.hero-placeholder-icon { font-size: 5rem; opacity: .3; }

/* Placeholder icono en tarjeta de producto */
.prod-placeholder-icon { font-size: 3rem; opacity: .2; }

/* Sección con fondo papel (alternativa a section-tinted con padding section-sm) */
.section-paper { background: var(--paper); }

/* Pie del bloque de productos destacados — "Ver catálogo completo" */
.featured-foot { text-align: center; margin-top: var(--sp-8); }

/* Título y lead de la sección proforma en home */
.proforma-title { margin: var(--sp-3) 0 var(--sp-2); }
.proforma-lead  { color: var(--muted); margin-bottom: var(--sp-8); }

/* CTA de la sección proforma */
.proforma-cta { margin-top: 28px; }

/* Cabecera "Por qué JIRSEG" necesita margin-bottom extra */
.why-head { margin-bottom: var(--sp-10); }

/* Breadcrumb con padding superior (página producto) */
.breadcrumb-wrap { padding-top: var(--sp-6); }

/* Nivel dots con separación superior en tarjetas */
.level-dots-card { margin-top: var(--sp-1); }

/* Título de sección a la izquierda con margen inferior */
.section-title-left { text-align: left; margin-bottom: var(--sp-6); }

/* ════════════════════════════════════════════════════════════
   CLASES PÚBLICAS QUE FALTABAN (estaban sin definir en ningún CSS)
   ════════════════════════════════════════════════════════════ */

/* ── Catálogo: evitar overflow de la columna de productos ───── */
.catalog-main { min-width: 0; }
.catalog-header-left { min-width: 0; }

/* ── CABECERA DE CATEGORÍA (categoria.php) ──────────────────── */
.cat-page-header {
  display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6);
}
.cat-page-icon {
  width: 60px; height: 60px; border-radius: var(--r-md); flex-shrink: 0;
  background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.cat-page-icon svg { width: 32px; height: 32px; }
.cat-page-title { font-family: var(--font-display); font-size: clamp(1.5rem,3vw,2rem); font-weight: 700; color: var(--ink); line-height: 1.1; }
.cat-page-desc  { color: var(--muted); font-size: .9375rem; margin-top: 2px; }

/* ════════════════════════════════════════════════════════════
   TARJETA DIGITAL DE ASESOR  (/asesor/{slug})
   ════════════════════════════════════════════════════════════ */
.tarjeta-body {
  background: linear-gradient(150deg, var(--primary) 0%, var(--dark) 100%);
  min-height: 100vh; padding: var(--sp-8) var(--sp-4);
  display: flex; align-items: flex-start; justify-content: center;
}
.tarjeta-page { width: 100%; max-width: 420px; margin: auto; }
.tarjeta-card {
  background: var(--white); border-radius: var(--r-xl);
  box-shadow: 0 30px 70px -20px rgba(0,0,0,.5);
  padding: var(--sp-8) var(--sp-6) var(--sp-6); text-align: center;
}
.tarjeta-brand {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding-bottom: var(--sp-5); border-bottom: 1px solid var(--steel); margin-bottom: var(--sp-6);
}
.tarjeta-logo { height: 32px; width: auto; }
.tarjeta-logo-multlock { height: 19px; width: auto; opacity: .85; }
.tarjeta-sep { width: 1px; height: 22px; background: var(--steel); }
.tarjeta-brand-name { font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--primary); }
.tarjeta-avatar-wrap { width: 108px; height: 108px; margin: 0 auto var(--sp-4); }
.tarjeta-avatar-photo, .tarjeta-avatar-initials {
  width: 108px; height: 108px; border-radius: var(--r-full);
  border: 4px solid var(--white); box-shadow: 0 0 0 2px var(--primary-tint), var(--shadow);
}
.tarjeta-avatar-photo { object-fit: cover; }
.tarjeta-avatar-initials {
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--primary-soft), var(--primary));
  color: var(--white); font-family: var(--font-display); font-weight: 700; font-size: 2.4rem;
}
.tarjeta-info { margin-bottom: var(--sp-6); }
.tarjeta-nombre  { font-family: var(--font-display); font-size: 1.45rem; font-weight: 700; color: var(--ink); line-height: 1.15; }
.tarjeta-cargo   { color: var(--primary); font-weight: 600; font-size: .9375rem; margin-top: 3px; }
.tarjeta-empresa { color: var(--muted); font-size: .8125rem; margin-top: var(--sp-2); line-height: 1.5; }
.tarjeta-actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.tarjeta-action {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  padding: 13px 20px; border-radius: var(--r-full); font-weight: 600; font-size: .9375rem;
  border: 1.5px solid var(--steel); background: var(--paper); color: var(--ink); transition: var(--t);
}
.tarjeta-action svg { width: 20px; height: 20px; flex-shrink: 0; }
.tarjeta-action:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.tarjeta-action-wa { background: var(--wa); border-color: var(--wa); color: var(--white); }
.tarjeta-action-wa:hover { background: #20bc5a; }
.tarjeta-action-tel:hover, .tarjeta-action-email:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-tint); }
.tarjeta-catalog-section, .tarjeta-proforma-section {
  margin-top: var(--sp-6); padding-top: var(--sp-6); border-top: 1px solid var(--steel);
}
.tarjeta-catalog-label { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: var(--sp-3); }
.tarjeta-catalog-btn, .tarjeta-proforma-btn {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: 13px 20px; border-radius: var(--r-full); font-weight: 700; font-size: .9375rem; transition: var(--t);
}
.tarjeta-catalog-btn svg, .tarjeta-proforma-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.tarjeta-catalog-btn  { background: linear-gradient(135deg, var(--accent-hi), var(--accent)); color: #2a1f00; }
.tarjeta-proforma-btn { background: var(--primary); color: var(--white); }
.tarjeta-catalog-btn:hover, .tarjeta-proforma-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.tarjeta-catalog-wa { display: inline-block; margin-top: var(--sp-3); font-size: .8125rem; font-weight: 600; color: var(--wa-dark); }
.tarjeta-catalog-wa:hover { text-decoration: underline; }
.tarjeta-footer { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--steel); }
.tarjeta-site-link  { font-size: .8125rem; font-weight: 600; color: var(--primary); }
.tarjeta-footer-tag { font-size: .7rem; color: var(--muted); margin-top: var(--sp-2); line-height: 1.5; }

/* ════════════════════════════════════════════════════════════
   PÁGINAS ERROR (404) Y MANTENIMIENTO
   ════════════════════════════════════════════════════════════ */
.error-page {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--primary) 0%, var(--dark) 100%);
  padding: var(--sp-6); text-align: center;
}
.error-page-inner {
  background: var(--white); border-radius: var(--r-xl);
  padding: var(--sp-10) var(--sp-8); max-width: 460px; width: 100%;
  box-shadow: var(--shadow-lg);
}
.error-code { font-family: var(--font-display); font-size: 4rem; font-weight: 700; color: var(--primary); line-height: 1; }
.error-icon, .maint-icon {
  width: 64px; height: 64px; margin: var(--sp-4) auto;
  border-radius: var(--r-full); background: var(--primary-tint); color: var(--primary);
  display: flex; align-items: center; justify-content: center;
}
.error-icon svg, .maint-icon svg { width: 32px; height: 32px; }
.error-page-maint .maint-icon { background: var(--accent-tint); color: var(--accent); }
.error-page-inner h1 { font-size: 1.5rem; margin-bottom: var(--sp-3); color: var(--ink); }
.error-page-inner p  { color: var(--muted); font-size: .9375rem; margin-bottom: var(--sp-6); }
.error-actions { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.error-brand { display: inline-block; margin-top: var(--sp-4); font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: .9375rem; }
.maint-contact { font-size: .875rem; color: var(--muted); margin-bottom: var(--sp-4); }

/* ════════════════════════════════════════════════════════════
   MODAL DE ÉXITO (proforma-cart)
   ════════════════════════════════════════════════════════════ */
.modal-box-success { text-align: center; max-width: 440px; }
.modal-success-icon {
  width: 64px; height: 64px; margin: 0 auto var(--sp-4);
  border-radius: var(--r-full); background: #d4f5e2; color: var(--success);
  display: flex; align-items: center; justify-content: center;
}
.modal-success-icon svg { width: 34px; height: 34px; }
.modal-success-num { font-family: var(--font-display); font-weight: 700; color: var(--primary); font-size: 1.2rem; margin-bottom: var(--sp-2); }
.modal-box-success .btn { width: 100%; margin-top: var(--sp-3); }