/* =====================================================
   STYLE.CSS — Catálogo QR  |  Azul Marino + Verde
   ===================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800;900&family=Barlow+Condensed:wght@600;700;800&display=swap');

:root {
  --primary:      #0a4275;
  --primary-lt:   #1565c0;
  --primary-glow: #1e88e5;
  --green:        #00897b;
  --green-lt:     #00bfa5;
  --green-glow:   #26c6a2;
  --dark:         #020d1a;
  --dark2:        #071628;
  --dark3:        #0c2240;
  --light:        #f0f4f8;
  --text:         #1a2a3a;
  --muted:        #6b8caa;

  --grad-main: linear-gradient(135deg, #0a4275 0%, #00897b 100%);
  --grad-dark: linear-gradient(160deg, #020d1a 0%, #071628 50%, #0c2240 100%);
  --grad-card: linear-gradient(135deg, #071628, #0c2240);
  --grad-green: linear-gradient(135deg, #00897b 0%, #00bfa5 100%);
  --grad-blue: linear-gradient(135deg, #0a4275 0%, #1565c0 100%);
  --grad-glow: linear-gradient(135deg, #1565c0 0%, #00bfa5 100%);

  --shadow:  0 12px 40px rgba(0, 137, 123, .18);
  --shadow2: 0 8px 32px rgba(10, 66, 117, .25);
  --radius:  14px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Barlow', sans-serif;
  background: var(--light);
  color: var(--text);
  overflow-x: hidden;
}

::-webkit-scrollbar { width: 7px; }
::-webkit-scrollbar-track { background: var(--dark2); }
::-webkit-scrollbar-thumb { background: var(--green); border-radius: 99px; }

/* NAVBAR */
/* #mainNav {
  background: rgba(2, 13, 26, .96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 137, 123, .25);
  transition: all .3s; z-index: 1050; padding: 10px 0;
} */

/* #mainNav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 137, 123, .25);
  transition: all .3s; z-index: 1050; padding: 10px 0;
  color: var(--dark);
}
#mainNav.scrolled { background: rgba(2, 13, 26, 1); box-shadow: 0 4px 30px rgba(0,0,0,.5); border-bottom-color: rgba(0, 191, 165, .4); } */


#mainNav {
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0, 137, 123, .25);
  transition: all .3s;
  z-index: 1050;
  padding: 10px 0;
}

/* Links en estado inicial (fondo blanco) */
#mainNav .nav-link {
  color: #050565 !important;
  transition: color .3s;
}

#mainNav .navbar-toggler {
  border-color: rgba(0,0,0,0.3);
}

/* Estado scrolled (fondo oscuro) */
#mainNav.scrolled {
  background: rgba(2, 13, 26, 1);
  box-shadow: 0 4px 30px rgba(0,0,0,.5);
  border-bottom-color: rgba(0, 191, 165, .4);
}

#mainNav.scrolled .nav-link {
  color: rgb(255, 255, 255) !important;
}

#mainNav.scrolled .navbar-toggler {
  border-color: rgba(255,255,255,0.3);
}
#mainNav .logo-scrolled { display: none !important; }
#mainNav .logo-default  { display: block !important; }

#mainNav.scrolled .logo-scrolled { display: block !important; }
#mainNav.scrolled .logo-default  { display: none !important; }

.navbar-brand { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 800; color: #fff !important; letter-spacing: -.3px; }
.navbar-brand span { color: var(--green-lt); }
.nav-link { color: rgba(255,255,255,.75) !important; font-weight: 600; font-size: .86rem; padding: 6px 13px !important; border-radius: 8px; transition: all .25s; }
.nav-link:hover, .nav-link.active { color: #fff !important; background: rgb(4 221 119 / 74%); }
.btn-wa { background: linear-gradient(135deg, #00897b, #00bfa5) !important; color: #fff !important; border-radius: 25px !important; padding: 6px 18px !important; font-weight: 700; }
.btn-wa:hover { opacity: .88; transform: translateY(-1px); }

/* HERO */
.hero-slide { height: 100vh; min-height: 600px; background-size: cover; background-position: center; position: relative; display: flex; align-items: center; }
.hero-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(2, 13, 26, 0.504) 0%, rgba(15, 15, 15, 0.55) 100%); }
.hero-content { position: relative; z-index: 2; max-width: 660px; }
.hero-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 800; line-height: 1.1; text-shadow: 0 2px 24px rgba(0,0,0,.4); margin-bottom: 1rem; color: #fff; }
.hero-title em { font-style: normal; background: var(--grad-green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.hero-sub { font-size: clamp(.95rem, 2vw, 1.2rem); opacity: .9; margin-bottom: 2rem; color: rgba(255,255,255,.9); }
.btn-hero-cta { display: inline-flex; align-items: center; gap: 10px; background: var(--grad-green); color: #fff; padding: 14px 34px; border-radius: 50px; font-weight: 700; text-decoration: none; font-size: 1rem; box-shadow: 0 8px 28px rgba(0, 137, 123, .45); transition: all .3s; }
.btn-hero-cta:hover { color: #fff; transform: translateY(-3px); box-shadow: 0 14px 36px rgba(0,137,123,.6); }

/* PAGE MINI HEADER */
.page-mini-header { margin-top: 66px; background: var(--grad-dark); min-height: 220px; position: relative; display: flex; align-items: center; }
.page-mini-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(10,66,117,.5), rgba(0,137,123,.35)); }

/* SECCIONES */
section { padding: 80px 0; }
.section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; letter-spacing: -.3px; background: var(--grad-main); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-divider { width: 70px; height: 4px; margin: 12px auto; background: var(--grad-green); border-radius: 99px; }

/* NOSOTROS */
.nosotros-section { background: #cccdd0; }
.nosotros-card { background: linear-gradient(0deg, #a9cafb, #fff); border: 1px solid rgba(6, 20, 215, 0.864); border-radius: var(--radius); padding: 30px; transition: all .3s; height: 100%; }
.nosotros-card:hover { transform: translateY(-6px); box-shadow: var(--shadow2); }
.nosotros-icon { width: 60px; height: 60px; border-radius: 16px; background: var(--grad-main); display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #fff; margin-bottom: 16px; }
.empresa-badge { display: inline-flex; align-items: center; gap: 10px; background: #fff; border-radius: 50px; padding: 10px 20px; margin: 6px; box-shadow: 0 4px 20px rgba(0,0,0,.08); font-weight: 700; transition: all .3s; border: 2px solid transparent; }
.empresa-badge:hover { transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 137, 123, .2); border-color: var(--green); }

/* TRAYECTORIA */
.trayectoria-section { background: var(--grad-dark); }
.counter-card { text-align: center; padding: 30px 20px; background: rgba(255,255,255,.04); border: 1px solid rgba(0, 191, 165, .18); border-radius: var(--radius); transition: .3s; }
.counter-card:hover { background: rgba(0,137,123,.15); transform: translateY(-5px); border-color: var(--green); }
.counter-number { font-family: 'Barlow Condensed', sans-serif; font-size: 3.2rem; font-weight: 900; background: var(--grad-green); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.counter-label { color: rgba(255,255,255,.7); font-size: .9rem; margin-top: 6px; }
.counter-icon { font-size: 2rem; margin-bottom: 10px; background: var(--grad-glow); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }

/* PRODUCTOS */
.products-section { background: var(--light); }
.search-wrap { position: relative; max-width: 500px; margin: 0 auto 30px; }
.search-wrap input { width: 100%; padding: 14px 50px 14px 20px; border-radius: 50px; border: 2px solid rgba(10, 66, 117, .18); font-family: inherit; font-size: .95rem; outline: none; transition: .3s; box-shadow: 0 4px 20px rgba(0,0,0,.06); background: #fff; }
.search-wrap input:focus { border-color: var(--primary-lt); box-shadow: 0 0 0 4px rgba(21, 101, 192, .12); }
.search-wrap .search-icon { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--primary); font-size: 1.1rem; }
.filter-btn { background: #fff; border: 2px solid rgba(10, 66, 117, .18); border-radius: 50px; padding: 8px 20px; font-weight: 600; cursor: pointer; transition: .3s; font-family: inherit; font-size: .85rem; }
.filter-btn:hover, .filter-btn.active { background: var(--primary); color: #fff; border-color: var(--primary); box-shadow: 0 4px 16px rgba(10, 66, 117, .35); }

.product-card { background: #fff; border-radius: var(--radius); overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: all .35s; box-shadow: 0 4px 18px rgba(0,0,0,.07); border: 1px solid rgba(10, 66, 117, .08); }
.product-card:hover { transform: translateY(-8px); box-shadow: 0 22px 50px rgba(10,66,117,.2); }
.product-img-wrap { position: relative; overflow: hidden; aspect-ratio: 1/1; }
.product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: .5s; }
.product-card:hover .product-img-wrap img { transform: scale(1.08); }
.product-qr-overlay { position: absolute; inset: 0; background: rgba(2, 13, 26, .92); display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: .35s; gap: 12px; }
.product-card:hover .product-qr-overlay { opacity: 1; }
.product-qr-overlay img { width: 130px; height: 130px; border-radius: 12px; border: 3px solid var(--green-lt); box-shadow: 0 4px 20px rgba(0,137,123,.3); }
.product-qr-overlay p { color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 600; margin: 0; }
.product-badge { position: absolute; top: 12px; left: 12px; color: #fff; font-size: .72rem; font-weight: 700; padding: 4px 12px; border-radius: 50px; text-transform: uppercase; letter-spacing: .5px; box-shadow: 0 2px 10px rgba(0,0,0,.25); }
.product-body { padding: 16px 18px; flex: 1; }
.product-category { font-size: .72rem; font-weight: 700; color: var(--green); text-transform: uppercase; letter-spacing: .6px; }
.product-name { font-size: 1rem; font-weight: 700; margin: 4px 0 6px; color: var(--dark2); }
.product-desc { font-size: .82rem; color: #5a7a96; line-height: 1.55; margin: 0; }
.product-footer { padding: 14px 18px; border-top: 1px solid #edf2f7; display: flex; gap: 8px; }
.btn-ver-mas { flex: 1; background: var(--grad-blue); color: #fff; text-align: center; padding: 9px 0; border-radius: 10px; font-weight: 700; font-size: .82rem; text-decoration: none; border: none; cursor: pointer; transition: .3s; }
.btn-ver-mas:hover { opacity: .85; transform: translateY(-1px); color: #fff; }
.btn-catalogo { flex: 1; background: var(--grad-green); color: #fff; text-align: center; padding: 9px 0; border-radius: 10px; font-weight: 700; font-size: .82rem; text-decoration: none; transition: .3s; }
.btn-catalogo:hover { opacity: .85; transform: translateY(-1px); color: #fff; }
.btn-qr-dl { width: 40px; background: var(--dark3); color: #fff; display: flex; align-items: center; justify-content: center; border-radius: 10px; text-decoration: none; transition: .3s; font-size: .9rem; }
.btn-qr-dl:hover { background: var(--green); color: #fff; }

/* DETALLE PRODUCTO - PÁGINA COMPLETA */
.detalle-page-wrap { background: var(--light); min-height: 100vh; padding-top: 80px; }
.detalle-breadcrumb { background: var(--dark2); padding: 12px 0; border-bottom: 1px solid rgba(0,191,165,.2); }
.detalle-breadcrumb a { color: var(--green-lt); text-decoration: none; font-size: .85rem; font-weight: 600; }
.detalle-breadcrumb span { color: rgba(255,255,255,.5); font-size: .85rem; }
.detalle-breadcrumb .sep { margin: 0 8px; color: rgba(255,255,255,.3); }
.detalle-hero { background: var(--grad-dark); padding: 50px 0 60px; position: relative; overflow: hidden; }
.detalle-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 80% 50%, rgba(0,137,123,.18) 0%, transparent 60%), radial-gradient(ellipse at 20% 50%, rgba(10,66,117,.25) 0%, transparent 60%); }
.detalle-hero-inner { position: relative; z-index: 2; }
.detalle-img-box { background: rgba(255, 255, 255, 0); border: 1px solid rgb(3, 238, 207); border-radius: 20px; overflow: hidden; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center; }
.detalle-img-box img { width: 100%; height: 100%; object-fit: contain; padding: 20px; }
.detalle-product-name { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2rem, 4vw, 3rem); font-weight: 800; color: #fff; line-height: 1.15; margin-bottom: 12px; }
.detalle-product-desc { color: rgba(255,255,255,.78); font-size: 1.05rem; line-height: 1.65; margin-bottom: 24px; }
.detalle-tag { display: inline-flex; align-items: center; gap: 6px; border-radius: 50px; padding: 5px 14px; font-size: .78rem; font-weight: 700; letter-spacing: .4px; margin: 4px 4px 4px 0; }
.detalle-tag.blue { background: rgba(21,101,192,.25); color: #90caf9; border: 1px solid rgba(21,101,192,.4); }
.detalle-tag.green { background: rgba(0,137,123,.25); color: #80cbc4; border: 1px solid rgba(0,137,123,.4); }
.btn-detalle-cat { display: inline-flex; align-items: center; gap: 10px; background: var(--grad-green); color: #fff; padding: 13px 28px; border-radius: 50px; font-weight: 700; text-decoration: none; font-size: .95rem; box-shadow: 0 8px 24px rgba(0,137,123,.4); transition: .3s; margin-top: 10px; }
.btn-detalle-cat:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 12px 32px rgba(0,137,123,.55); }
.btn-detalle-back { display: inline-flex; align-items: center; gap: 8px; color: rgba(255,255,255,.7); padding: 10px 22px; border-radius: 50px; font-weight: 600; text-decoration: none; font-size: .88rem; border: 1px solid rgba(255,255,255,.2); transition: .3s; margin-top: 10px; margin-right: 10px; }
.btn-detalle-back:hover { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }
.detalle-qr-box { background: rgba(255,255,255,.05); border: 1px solid rgba(0,191,165,.25); border-radius: 16px; padding: 24px; text-align: center; }
.detalle-qr-box img { width: 140px; height: 140px; border-radius: 12px; border: 3px solid var(--green-lt); }
.detalle-qr-box p { color: rgba(255,255,255,.6); font-size: .8rem; margin-top: 10px; }
.detalle-qr-box .btn-detalle-cat { margin-top: 14px; }
.detalle-tabs-section { background: #fff; padding: 50px 0; }
.detalle-nav-tabs { border-bottom: 2px solid #e2ecf5; display: flex; gap: 4px; margin-bottom: 32px; flex-wrap: wrap; }
.detalle-tab-btn { background: none; border: none; padding: 12px 24px; font-family: inherit; font-size: .9rem; font-weight: 700; color: var(--muted); cursor: pointer; border-radius: 10px 10px 0 0; transition: .2s; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.detalle-tab-btn:hover { color: var(--primary); }
.detalle-tab-btn.active { color: var(--primary); border-bottom-color: var(--primary); background: rgba(10,66,117,.05); }
.tab-pane { display: none; }
.tab-pane.active { display: block; }
.spec-table { width: 100%; border-collapse: collapse; }
.spec-table tr:nth-child(even) td { background: #f5f9ff; }
.spec-table td { padding: 11px 16px; border-bottom: 1px solid #e6eef6; font-size: .9rem; }
.spec-table td:first-child { font-weight: 700; color: var(--primary); width: 40%; }
.feature-chip { display: inline-flex; align-items: center; gap: 6px; background: linear-gradient(135deg, rgba(0,137,123,.08), rgba(0,191,165,.08)); border: 1px solid rgb(6, 255, 230); border-radius: 50px; padding: 6px 14px; font-size: .82rem; font-weight: 600; color: #05ffe6; margin: 4px; }

/* detalle vieja */
.detalle-section { background: #fff; }
.qr-print-box { background: var(--grad-dark); border-radius: var(--radius); padding: 30px; text-align: center; color: #fff; border: 1px solid rgba(0,191,165,.2); }
.qr-print-box img { width: 200px; height: 200px; border-radius: 12px; border: 4px solid var(--green-lt); box-shadow: 0 8px 30px rgba(0,0,0,.3); }

/* PÁGINAS INTERNAS */
.page-section { background: #ffffff; }
.icon-big { width: 80px; height: 80px; border-radius: 24px; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #fff; margin: 0 auto 16px; }
.info-card { background: linear-gradient(135deg, #aac8f5, #fff); border: 1px solid rgba(6, 91, 170, 0.626); border-radius: var(--radius); padding: 28px; height: 100%; transition: .3s; }
.info-card:hover { transform: translateY(-5px); box-shadow: var(--shadow2); }

/* FORMULARIO */
.form-section { background: var(--light); }
.form-card { background: #fff; border-radius: var(--radius); padding: 40px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.form-control, .form-select { border: 2px solid rgba(10, 66, 117, .15); border-radius: 10px; padding: 12px 16px; font-family: inherit; transition: .3s; }
.form-control:focus, .form-select:focus { border-color: var(--primary-lt); box-shadow: 0 0 0 4px rgba(21, 101, 192, .1); }
.btn-enviar { background: var(--grad-main); color: #fff; border: none; padding: 14px 40px; border-radius: 50px; font-weight: 700; font-family: inherit; font-size: 1rem; cursor: pointer; transition: .3s; width: 100%; }
.btn-enviar:hover { opacity: .88; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(10,66,117,.4); }

/* CONTACTO */
.contact-card { background: #fff; border-radius: var(--radius); padding: 30px; box-shadow: 0 4px 20px rgba(0,0,0,.06); text-align: center; transition: .3s; border-top: 4px solid var(--primary); }
.contact-card:hover { transform: translateY(-6px); box-shadow: 0 12px 40px rgba(10,66,117,.2); }
.contact-icon { font-size: 2.5rem; margin-bottom: 12px; }

/* FOOTER */
.site-footer { background: var(--dark); position: relative; overflow: hidden; }
.footer-body { padding: 60px 0 30px; position: relative; z-index: 2; }
.footer-heading { color: #fff; font-weight: 700; margin-bottom: 16px; font-size: 1rem; }
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 8px; }
.footer-links a { color: rgba(255,255,255,.55); text-decoration: none; font-size: .88rem; transition: .2s; display: inline-flex; align-items: center; gap: 6px; }
.footer-links a::before { content: '›'; color: var(--green-lt); font-weight: 700; }
.footer-links a:hover { color: #fff; padding-left: 4px; }
.footer-contact-list { list-style: none; padding: 0; }
.footer-contact-list li { display: flex; align-items: center; gap: 10px; color: rgba(255,255,255,.6); font-size: .88rem; margin-bottom: 10px; }
.footer-contact-list i { color: var(--green-lt); width: 18px; }
.footer-contact-list a { color: rgba(255,255,255,.6); text-decoration: none; }
.footer-contact-list a:hover { color: #fff; }
.social-icon { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1rem; text-decoration: none; color: #fff; transition: .3s; }
.social-icon.wa { background: #25D366; }
.social-icon.fb { background: #1877f2; }
.social-icon.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }
.social-icon.yt { background: #ff0000; }
.social-icon.tiktok { background: #000000; }
.social-icon:hover { transform: translateY(-3px) scale(1.1); }
.footer-bottom { background: rgba(0,0,0,.4); padding: 16px 0; border-top: 1px solid rgba(0,191,165,.12); }

/* ADMIN */
.admin-section { padding: 100px 0 60px; }
.admin-table { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.07); }
.admin-table table { margin: 0; }
.admin-table thead th { background: var(--dark2); color: #fff; border: none; padding: 14px; }
.admin-table td { vertical-align: middle; padding: 12px 14px; }
.badge-active { background: rgba(0,137,123,.12); color: #005a52; border: 1px solid rgba(0,137,123,.35); border-radius: 50px; padding: 3px 10px; font-size: .75rem; font-weight: 600; }
.badge-inactive { background: rgba(200,50,50,.1); color: #8b0000; border: 1px solid rgba(200,50,50,.3); border-radius: 50px; padding: 3px 10px; font-size: .75rem; font-weight: 600; }
.admin-qr-thumb { width: 60px; height: 60px; border-radius: 8px; }

/* SCROLL TOP */
#scrollTop { position: fixed; bottom: 24px; right: 24px; width: 46px; height: 46px; border-radius: 50%; background: var(--grad-main); color: #fff; border: none; font-size: 1.1rem; cursor: pointer; opacity: 0; visibility: hidden; transition: .3s; z-index: 999; box-shadow: 0 4px 20px rgba(0,137,123,.4); }
#scrollTop.visible { opacity: 1; visibility: visible; }
#scrollTop:hover { transform: translateY(-3px); }

/* BRAND CARDS */
.brand-card { background: #fff; border-radius: var(--radius); padding: 32px 28px; text-align: center; box-shadow: 0 4px 20px rgba(0,0,0,.07); transition: all .35s; height: 100%; display: flex; flex-direction: column; }
.brand-card:hover { transform: translateY(-8px); box-shadow: 0 20px 50px rgba(10,66,117,.18); }
.brand-icon { width: 72px; height: 72px; border-radius: 20px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; margin: 0 auto; }
.brand-stats { display: flex; justify-content: center; gap: 16px; margin: 16px 0; font-size: .82rem; color: #7a9cb5; font-weight: 600; }
.btn-marca { display: block; color: #fff; text-decoration: none; padding: 12px 24px; border-radius: 50px; font-weight: 700; font-size: .9rem; margin-top: auto; transition: .3s; opacity: .92; }
.btn-marca:hover { color: #fff; opacity: 1; transform: translateY(-2px); box-shadow: 0 8px 25px rgba(0,0,0,.2); }

/* SIDEBAR FAMILIAS */
.family-sidebar { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,.07); position: sticky; top: 80px; border: 1px solid rgba(10,66,117,.08); }
.family-sidebar-title { background: var(--grad-dark); color: #fff; padding: 14px 16px; font-weight: 700; font-size: .88rem; letter-spacing: .3px; border-bottom: 1px solid rgba(0,191,165,.2); }
.family-list { list-style: none; padding: 8px 0; margin: 0; }
.family-list li { margin: 2px 6px; }
.family-btn { width: 100%; text-align: left; background: transparent; border: none; padding: 9px 12px; border-radius: 10px; font-family: inherit; font-size: .83rem; font-weight: 600; color: #4a6a8a; cursor: pointer; transition: all .2s; display: flex; align-items: center; justify-content: space-between; }
.family-btn:hover { background: rgba(10, 66, 117, .07); color: var(--primary); }
.family-btn.active { background: var(--primary); color: #fff; font-weight: 700; }
.family-btn.active .family-count { background: rgba(255,255,255,.2); color: #fff; }
.family-count { background: rgba(10, 66, 117, .1); color: var(--primary); border-radius: 50px; padding: 1px 8px; font-size: .72rem; font-weight: 700; min-width: 22px; text-align: center; }

/* EXTRAS */
.card-featured { border: 2px solid rgba(0, 137, 123, .25) !important; }
.product-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; }
.family-tag { position: absolute; bottom: 10px; right: 10px; background: rgba(2, 13, 26, .65); color: #fff; font-size: .68rem; font-weight: 700; padding: 3px 10px; border-radius: 50px; backdrop-filter: blur(4px); }
.modal-content { border: none !important; }

/* RESPONSIVE */
@media (max-width: 767px) { .family-sidebar { position: static; display: flex; overflow-x: auto; } .family-sidebar-title { display: none; } .family-list { display: flex; flex-direction: row; padding: 8px; gap: 4px; white-space: nowrap; } .family-list li { margin: 0; } .family-btn { white-space: nowrap; } }
@media (max-width: 991px) { .hero-slide { height: 85vh; } .hero-title { font-size: 2.2rem; } }
@media (max-width: 767px) { section { padding: 55px 0; } .hero-slide { height: 75vh; } .product-footer { flex-wrap: wrap; } .btn-catalogo, .btn-ver-mas { flex: auto; width: 100%; } }
@media (max-width: 480px) { .hero-slide { height: 90vh; } .counter-number { font-size: 2.5rem; } }

/* ANIMACIONES */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.fade-in-up { animation: fadeInUp .6s ease both; }
[data-delay="1"] { animation-delay: .1s; }
[data-delay="2"] { animation-delay: .2s; }
[data-delay="3"] { animation-delay: .3s; }
[data-delay="4"] { animation-delay: .4s; }

/* =====================================================
   TABLA DE VARIANTES / CÓDIGOS (producto.php)
   ===================================================== */

.tabla-variantes-wrap {
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid #d8e8f5;
  box-shadow: 0 4px 20px rgba(10,66,117,.08);
}

.tabla-variantes {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
  min-width: 600px;
}

.tabla-variantes thead tr {
  background: var(--dark2);
}

.tabla-variantes thead th {
  color: #fff;
  font-weight: 700;
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 14px 16px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}

/* Borde izquierdo verde en primera columna del thead */
.tabla-variantes thead th:first-child {
  border-left: 4px solid var(--green-lt);
  text-align: left;
}

.tabla-variantes tbody tr {
  transition: background .15s;
  border-bottom: 1px solid #e8f0f8;
}

.tabla-variantes tbody tr:nth-child(even) {
  background: #f5f9ff;
}

.tabla-variantes tbody tr:hover {
  background: rgba(0, 137, 123, .07);
}

.tabla-variantes tbody td {
  padding: 12px 16px;
  color: var(--text);
  text-align: center;
  border-right: 1px solid #e8f0f8;
  vertical-align: middle;
}

/* Primera columna (código) destacada */
.tabla-variantes tbody td:first-child {
  font-weight: 700;
  color: var(--primary);
  text-align: left;
  border-left: 4px solid var(--green-lt);
  white-space: nowrap;
}

/* Sub-etiquetas dentro de encabezado (ej: IEC 60947 / IEC 60898) */
.col-sub {
  display: inline-block;
  background: rgba(0,191,165,.2);
  color: var(--green-lt);
  font-size: .7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  margin: 2px;
  letter-spacing: .3px;
}

/* ── Tabla resumen en hero (imagen 3) ── */
.detalle-resumen-hero {
  margin-top: 16px;
  margin-bottom: 4px;
}
.resumen-table-hero {
  width: 100%;
  border-collapse: collapse;
  border-radius: 10px;
  overflow: hidden;
}
.resumen-table-hero tr:nth-child(odd) {
  background: rgba(255,255,255,.06);
}
.resumen-table-hero tr:nth-child(even) {
  background: rgba(255,255,255,.03);
}
.resumen-table-hero tr {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.resumen-table-hero .resumen-key {
  padding: 9px 14px;
  font-weight: 700;
  font-size: .82rem;
  color: var(--green-lt);
  text-transform: uppercase;
  letter-spacing: .4px;
  width: 45%;
}
.resumen-table-hero .resumen-val {
  padding: 9px 14px;
  font-size: .88rem;
  color: rgba(255,255,255,.85);
  font-weight: 500;
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: var(--bs-navbar-color);
    background-color: gray;
    border: var(--bs-border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    transition: var(--bs-navbar-toggler-transition);
}
.contact-labele {
  display: block;
  font-size: 0.70rem;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 8px;
}

.catalogo-marcas-section { background:#cccdd0; position:relative; overflow:hidden; font-family:'DM Sans',sans-serif; }
.cm-top-accent { height:4px; background:linear-gradient(90deg,#1a56db,#c9992a,#1a56db); background-size:200% 100%; animation:cmShimmer 3s linear infinite; }
@keyframes cmShimmer { to { background-position:200% center; } }
.cm-header { padding:56px 0 40px; }
.cm-eyebrow { display:inline-block; font-size:.75rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:#1a56db; background:rgba(26,86,219,.08); padding:5px 14px; border-radius:50px; margin-bottom:14px; }
.cm-title { font-family:'Playfair Display',serif; font-size:clamp(1.8rem,4vw,2.8rem); font-weight:900; color:#0d1117; margin:0 0 16px; letter-spacing:-.02em; }
.cm-title-line { width:60px; height:4px; background:linear-gradient(90deg,#1a56db,#c9992a); border-radius:2px; margin:0 auto; }

.cm-grid { display:grid; grid-template-columns:1fr 32px 1.6fr; gap:0 32px; align-items:start; padding-bottom:32px; }

.cm-catalog-inner { background:#fff; border-radius:16px; padding:32px 28px; box-shadow:0 4px 24px rgba(0,0,0,.08); border:1px solid #e5e7eb; position:relative; overflow:hidden; }
.cm-catalog-inner::before { content:''; position:absolute; top:0;left:0;right:0; height:3px; background:linear-gradient(90deg,#1a56db,#60a5fa); border-radius:16px 16px 0 0; }
.cm-section-label { display:flex; align-items:center; gap:8px; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em; color:#6b7280; margin-bottom:24px; font-weight:500; }
.cm-section-dot { width:8px;height:8px;border-radius:50%;background:#1a56db;flex-shrink:0; }
.cm-dot-gold { background:#c9992a; }

.cm-book-wrap { display:flex; justify-content:center; margin:8px 0 32px; perspective:900px; }
.cm-book { position:relative; width:160px; animation:cmFloat 4s ease-in-out infinite; }
@keyframes cmFloat { 0%,100%{transform:rotateY(-18deg) translateY(0)} 50%{transform:rotateY(-18deg) translateY(-10px)} }
.cm-book-cover { display:flex; border-radius:4px 10px 10px 4px; overflow:hidden; box-shadow:0 16px 48px rgba(0,0,0,.14); }
.cm-book-spine { width:22px; background:linear-gradient(180deg,#0a2e6e,#1a56db 50%,#0a2e6e); flex-shrink:0; }
.cm-book-face { flex:1; background:linear-gradient(145deg,#1a56db,#0a2e6e); padding:20px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:210px; gap:10px; position:relative; }
.cm-book-face::after { content:''; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,255,255,.12),transparent 60%); }
.cm-book-logo { max-width:110px; filter:brightness(0) invert(1); position:relative;z-index:1; }
.cm-book-sub { color:rgba(255,255,255,.75); font-size:.65rem; text-align:center; letter-spacing:.08em; text-transform:uppercase; position:relative;z-index:1; margin:0; line-height:1.5; }
.cm-book-year { color:rgba(255,255,255,.5); font-size:.7rem; font-weight:600; letter-spacing:.12em; position:relative;z-index:1; }
.cm-book-shadow { position:absolute; bottom:-16px; left:10%;right:10%; height:20px; background:rgba(0,0,0,.25); filter:blur(12px); border-radius:50%; }

.cm-catalog-actions { display:flex; flex-direction:column; gap:12px; }
.cm-btn-download { display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 20px; background:linear-gradient(135deg,#1a56db,#1e40af); color:#fff; text-decoration:none; border-radius:10px; font-weight:600; font-size:.9rem; transition:transform .2s,box-shadow .2s; box-shadow:0 4px 16px rgba(26,86,219,.35); }
.cm-btn-download:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(26,86,219,.45); color:#fff; }
.cm-btn-arrow { margin-left:auto; transition:transform .2s; }
.cm-btn-download:hover .cm-btn-arrow { transform:translateX(4px); }
.cm-btn-wa { display:flex; align-items:center; justify-content:center; gap:10px; padding:12px 20px; background:#fff; color:#25d366; text-decoration:none; border-radius:10px; font-weight:600; font-size:.9rem; border:2px solid #25d366; transition:all .2s; }
.cm-btn-wa:hover { background:#25d366; color:#fff; transform:translateY(-2px); }

.cm-divider-col { display:flex; flex-direction:column; align-items:center; padding-top:80px; padding-bottom:40px; }
.cm-vert-line { flex:1; width:1px; background:linear-gradient(to bottom,transparent,#e5e7eb,transparent); min-height:60px; }
.cm-vert-circle { width:36px;height:36px; border-radius:50%; background:#fff; border:2px solid #e5e7eb; display:flex;align-items:center;justify-content:center; color:#c9992a; font-size:.65rem; flex-shrink:0; }

.cm-brands-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.cm-brand-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; display:flex; align-items:center; justify-content:center; padding:14px 10px; text-decoration:none; transition:all .25s cubic-bezier(.34,1.56,.64,1); aspect-ratio:4/3; }
.cm-brand-card:hover { transform:translateY(-4px) scale(1.03); border-color:#1a56db; box-shadow:0 8px 24px rgba(26,86,219,.15); }
.cm-brand-img-wrap { width:100%; display:flex; align-items:center; justify-content:center; }
.cm-brand-img-wrap img { max-width:100%; max-height:50px; object-fit:contain; filter:grayscale(40%); transition:filter .25s; }
.cm-brand-card:hover img { filter:grayscale(0%); }
.cm-brand-fallback { font-size:.7rem; font-weight:700; color:#374151; text-align:center; letter-spacing:.05em; text-transform:uppercase; display:flex; align-items:center; justify-content:center; }

.cm-contact-bar { background:#0d1117; border-radius:16px; margin-bottom:40px; padding:16px 28px; }
.cm-contact-items { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px 24px; }
.cm-contact-item { display:flex; align-items:center; gap:8px; color:rgba(255,255,255,.7); font-size:.85rem; }
.cm-contact-item i { color:#c9992a; }
.cm-contact-item a { color:rgba(255,255,255,.85); text-decoration:none; }
.cm-contact-item a:hover { color:#fff; }
.cm-contact-sep { color:rgba(255,255,255,.2); font-size:1.2rem; }

@media(max-width:1024px){ .cm-brands-grid{grid-template-columns:repeat(3,1fr)} }
@media(max-width:768px){
  .cm-grid{grid-template-columns:1fr;gap:0}
  .cm-divider-col{flex-direction:row;padding:0 0 20px;height:32px}
  .cm-vert-line{min-height:unset;width:auto;height:1px;flex:1}
  .cm-brands-grid{grid-template-columns:repeat(3,1fr)}
  .cm-contact-items{flex-direction:column;gap:10px;text-align:center}
  .cm-contact-sep{display:none}
}
@media(max-width:480px){ .cm-brands-grid{grid-template-columns:repeat(2,1fr)} }

.vendedor-section-title { display: flex; align-items: center; gap: 14px; margin-bottom: 32px;
}
.vendedor-section-title .vst-line {flex: 1; height: 2px;  background: linear-gradient(90deg, var(--primary), transparent); border-radius: 2px;
}
.vendedor-section-title h3 {  font-family: 'Barlow Condensed', sans-serif;  font-size: 1.6rem;  font-weight: 800;  color: var(--primary);  white-space: nowrap;  margin: 0;
}
.vendedor-section-title .vst-badge {
  background: var(--grad-green);
  color: #fff;
  font-size: .75rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 50px;
  white-space: nowrap;
}

/* ── Card ── */
.vendedor-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid #e0eef8;
  padding: 28px 20px 22px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.363);
  transition: transform .25s, box-shadow .25s;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.vendedor-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 36px rgba(0,137,123,.15);
}
.vendedor-foto-wrap {
  position: relative;
  width: 100px;
  height: 100px;
  margin-bottom: 16px;
}
.vendedor-foto-wrap img {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--green-lt, #b2dfdb);
}
.vendedor-foto-wrap .online-dot {
  position: absolute;
  bottom: 5px;
  right: 5px;
  width: 14px;
  height: 14px;
  background: #25D366;
  border: 2px solid #fff;
  border-radius: 50%;
}
.vendedor-nombre {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 4px;
}
.vendedor-zona {
  font-size: .8rem;
  color: var(--muted, #6c757d);
  margin-bottom: 18px;
  line-height: 1.4;
  flex: 1;
}
.vendedor-btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}
.btn-vwa {  display: inline-flex;  align-items: center;  gap: 6px;  background: #25D366;  color: #fff;  font-size: .82rem;  font-weight: 700;  padding: 9px 16px;  border-radius: 50px;  text-decoration: none;  transition: background .2s, transform .2s;  white-space: nowrap;
}
.btn-vwa:hover { background: #1ebe5d; color: #fff; transform: scale(1.04); }
.btn-vmail {  display: inline-flex;  align-items: center;  gap: 6px;  background: var(--light, #f0f7ff);  color: var(--primary);  font-size: .82rem;  font-weight: 700;  padding: 9px 16px;  border-radius: 50px;  text-decoration: none;  border: 1.5px solid var(--primary);  transition: background .2s, transform .2s;  white-space: nowrap;}
.btn-vmail:hover { background: var(--primary); color: #fff; transform: scale(1.04); }
/* ── Botones de tab ── */
.cert-tab-btn {
  padding: 12px 28px;
  border: 2px solid var(--primary, #2e7d32);
  background: transparent;
  color: var(--primary, #2e7d32);
  border-radius: 50px;
  font-weight: 700;
  font-size: .95rem;
  cursor: pointer;
  transition: all .25s ease;
}
.cert-tab-btn:hover,
.cert-tab-btn.active {
  background: var(--primary, #2e7d32);
  color: #fff;
  box-shadow: 0 4px 16px rgba(46,125,50,.25);
  transform: translateY(-2px);
}

/* ── Tarjeta de certificado ── */
.cert-card {
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.461);
  transition: transform .3s ease, box-shadow .3s ease;
  background: #fff;
}
.cert-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 30px rgba(0,0,0,.14);
}

/* ── Imagen con overlay ── */
.cert-img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;        /* proporción vertical tipo documento */
  background: #f5f5f5;
}
.cert-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.cert-card:hover .cert-img-wrap img {
  transform: scale(1.04);
}
.cert-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .3s;
}
.cert-card:hover .cert-overlay { opacity: 1; }
.cert-zoom-btn {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary, #2e7d32);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  text-decoration: none;
  transition: transform .2s;
}
.cert-zoom-btn:hover { transform: scale(1.15); }

/* ── Info debajo de la imagen ── */
.cert-info {
  padding: 14px 16px;
  border-top: 3px solid var(--primary, #2e7d32);
}
.cert-titulo {
  font-size: .88rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 6px;
  line-height: 1.4;
}
.cert-numero {
  font-size: .78rem;
  color: var(--primary, #2e7d32);
  font-weight: 700;
  letter-spacing: .5px;
}

/* ── Transición de panel ── */
.cert-panel { animation: fadeInUp .4s ease; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.btn-vendedores {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  background: linear-gradient(135deg, #25D366, #1ebe5d);
  color: #fff !important;
  border-radius: 50px;
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  transition: all .25s ease;
  box-shadow: 0 4px 14px rgba(37,211,102,.35);
  border: none;
}
.btn-vendedores:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(37,211,102,.5);
  color: #fff !important;
}
/* =====================================================================
   PEGA esto dentro de tu archivo: assets/css/style.css
   (al final del archivo, en la sección del footer)
   ===================================================================== */

/* El footer necesita position relative para que el canvas se posicione dentro */
.site-footer {
  position: relative;
  overflow: hidden;
}

/* Línea decorativa + punto brillante bajo los headings del footer */
.footer-heading-lined {
  position: relative;
  padding-bottom: 12px;
  margin-bottom: 18px;
}

/* Línea teal que se desvanece hacia la derecha */
.footer-heading-lined::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #00e5c8, transparent);
  border-radius: 2px;
}

/* Punto brillante al inicio de la línea */
.footer-heading-lined::before {
  content: '';
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 8px;
  height: 8px;
  background: #00e5c8;
  border-radius: 50%;
  box-shadow: 0 0 8px #00e5c8, 0 0 16px rgba(0, 229, 200, 0.4);
}