/* ═══════════════════════════════════════
   VARIABLES & BASE
═══════════════════════════════════════ */
:root {
  --blue:       #1d70ba;
  --blue-mid:   #1E4D8C;
  --blue-light: #EAF1FB;
  --blue-pale:  #F4F7FC;
  --yellow:     #F5C400;
  --yellow-dk:  #C99D00;
  --green:      #3A7D44;
  --green-lt:   #EAF5EC;
  --gray-900:   #1A1A1A;
  --gray-700:   #444;
  --gray-500:   #777;
  --gray-200:   #E2E6ED;
  --gray-100:   #F1F4F8;
  --white:      #fff;
  --font:       'M PLUS Rounded 1c', sans-serif;
  --ease:       cubic-bezier(.4,0,.2,1);
  --shadow-sm:  0 2px 8px rgba(27,58,107,.08);
  --shadow-md:  0 8px 32px rgba(27,58,107,.14);
  --shadow-lg:  0 20px 60px rgba(27,58,107,.18);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { font-family: var(--font); color: var(--gray-900); background: var(--white); }
img { display: block; max-width: 100%; }

/* ═══════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════ */
@keyframes fadeUp    { from { opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } }
@keyframes pulse     { 0%,100% { transform:scale(1) } 50% { transform:scale(1.04) } }
@keyframes marquee   { from { transform:translateX(0) } to { transform:translateX(-50%) } }
@keyframes borderGrow{ from { width:0 } to { width:48px } }
@keyframes shimmer   { 0% { background-position:-200% 0 } 100% { background-position:200% 0 } }

.reveal {
  opacity: 0;
  transform: translateY(36px) scale(.98);
  filter: blur(4px);
  transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease);
}
.reveal.visible { opacity:1; transform:none; filter:blur(0); }

.reveal-left  { opacity:0; transform:translateX(-50px); filter:blur(4px); transition:all .8s var(--ease); }
.reveal-right { opacity:0; transform:translateX(50px);  filter:blur(4px); transition:all .8s var(--ease); }
.reveal-left.visible, .reveal-right.visible { opacity:1; transform:none; filter:blur(0); }

.reveal-scale { opacity:0; transform:scale(.9); filter:blur(4px); transition:all .7s var(--ease); }
.reveal-scale.visible { opacity:1; transform:scale(1); filter:blur(0); }

/* stagger delays */
.d-1 { transition-delay:.08s } .d-2 { transition-delay:.16s }
.d-3 { transition-delay:.24s } .d-4 { transition-delay:.32s }
.d-5 { transition-delay:.42s } .d-6 { transition-delay:.54s }

/* ═══════════════════════════════════════
   NAVBAR
═══════════════════════════════════════ */
.mj-navbar {
  position: fixed; top:0; left:0; right:0; z-index:1050;
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(226,230,237,.7);
  height: 66px;
  transition: box-shadow .3s var(--ease), background .3s var(--ease);
}
.mj-navbar.scrolled { box-shadow: var(--shadow-md); background: rgba(255,255,255,.98); }
.mj-navbar .navbar-brand { display:flex; align-items:center; gap:10px; text-decoration:none; }
.mj-navbar .logo-icon { transition: transform .35s var(--ease); flex-shrink:0; }
.mj-navbar .navbar-brand:hover .logo-icon { transform: rotate(-8deg) scale(1.08); }
.nav-logo-text { font-weight:800; font-size:14px; color:var(--blue); line-height:1.15; }
.nav-logo-text small { display:block; font-weight:400; font-size:10px; color:var(--gray-500); letter-spacing:.04em; }

.mj-navbar .nav-link {
  font-family: var(--font); font-size:14px; font-weight:500;
  color: var(--gray-700) !important; padding: 4px 0 !important;
  position: relative;
}
.mj-navbar .nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0; width:0; height:2px;
  background:var(--yellow); border-radius:2px; transition:width .3s var(--ease);
}
.mj-navbar .nav-link:hover { color:var(--blue) !important; }
.mj-navbar .nav-link:hover::after { width:100%; }

.btn-nav-outline {
  font-family:var(--font); font-size:13px; font-weight:500; color:var(--blue);
  padding:8px 18px; border-radius:8px; border:1.5px solid var(--blue);
  background:transparent; cursor:pointer;
  transition: background .25s, color .25s, transform .2s, box-shadow .25s;
}
.btn-nav-outline:hover { background:var(--blue); color:var(--white); transform:translateY(-1px); box-shadow:var(--shadow-sm); }

.btn-nav-yellow {
  font-family:var(--font); font-size:13px; font-weight:700; color:var(--blue);
  padding:8px 20px; border-radius:8px; border:none; background:var(--yellow);
  cursor:pointer; transition: background .25s, transform .2s, box-shadow .25s;
}
.btn-nav-yellow:hover { background:#FFD020; transform:translateY(-2px); box-shadow:0 6px 20px rgba(245,196,0,.4); }

/* Mega menu */
.mega-wrap { position:relative; }
.mega-menu {
  position:absolute; top:calc(100% + 14px); left:0;
  width: 680px; display:grid; grid-template-columns:1fr 1fr 1fr 180px;
  gap:20px; padding:24px; background:white; border-radius:16px;
  box-shadow:0 20px 60px rgba(0,0,0,.12);
  opacity:0; transform:translateY(10px); pointer-events:none;
  transition:all .25s var(--ease); z-index:1000;
}
.mega-wrap:hover .mega-menu,
.mega-wrap.open .mega-menu { opacity:1; transform:translateY(0); pointer-events:auto; }
.mega-col h4 { font-size:12px; font-weight:700; color:var(--blue); margin-bottom:10px; }
.mega-col a { display:block; font-size:13px; color:var(--gray-700); margin-bottom:7px; text-decoration:none; transition:color .2s, transform .2s; }
.mega-col a:hover { color:var(--blue); transform:translateX(4px); }
.mega-preview { border-radius:10px; overflow:hidden; height:160px; }
.mega-preview img { width:100%; height:100%; object-fit:cover; transition:opacity .3s; }

/* Hamburger */
.navbar-toggler { border:none; padding:4px 8px; }
.navbar-toggler:focus { box-shadow:none; }
.navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%231B3A6B' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
    height: 2.5rem !important;
    width: 2.5rem !important;
}

/* Mobile nav collapse */
.mj-collapse {
  background: white;
  border-top: 1px solid var(--gray-200);
  padding: 16px 20px;
}
.mj-collapse .nav-link { padding: 10px 0 !important; border-bottom: 1px solid var(--gray-100); }
.mj-collapse .nav-link:last-child { border-bottom: none; }
.mj-collapse .nav-btns { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.mj-collapse .nav-btns button { width:100%; padding:12px; }

/* ═══════════════════════════════════════
   HERO CAROUSEL
═══════════════════════════════════════ */
.hero-carousel {
  position:relative; width:100%;
  height: 100vh; min-height:520px;
  overflow:hidden; margin-top:66px;
}
@media (max-width:768px) { .hero-carousel { height:85vh; min-height:480px; } }

.carousel-track { display:flex; height:100%; transition:transform .85s cubic-bezier(.77,0,.175,1); }
.carousel-slide { min-width:100%; height:100%; position:relative; flex-shrink:0; }
.slide-bg {
  position:absolute; inset:0; background-size:cover; background-position:center;
  transform:scale(1.06); transition:transform 7s linear;
}
.carousel-slide.active .slide-bg { transform:scale(1); }
.slide-overlay {
  position:absolute; inset:0;
  background:linear-gradient(110deg,rgba(10,25,55,.85) 0%,rgba(10,25,55,.55) 45%,rgba(10,25,55,.15) 100%);
}
.slide-content {
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:center;
  padding:0 80px; max-width:720px;
}
@media (max-width:768px) { .slide-content { padding:0 24px; max-width:100%; } }

.slide-eyebrow {
  font-size:11px; font-weight:500; color:var(--yellow); letter-spacing:.14em; text-transform:uppercase; margin-bottom:16px;
  opacity:0; transform:translateY(16px); transition:opacity .6s .2s var(--ease), transform .6s .2s var(--ease);
}
.slide-h1 {
  font-size:clamp(32px,5vw,58px); font-weight:800; color:var(--white);
  line-height:1.08; letter-spacing:-.03em; margin-bottom:16px;
  opacity:0; transform:translateY(22px); transition:opacity .65s .35s var(--ease), transform .65s .35s var(--ease);
}
.slide-h1 em { color:var(--yellow); font-style:normal; }
.slide-sub {
  font-size:clamp(14px,1.8vw,17px); font-weight:300; color:rgba(255,255,255,.8);
  line-height:1.65; margin-bottom:32px; max-width:480px;
  opacity:0; transform:translateY(18px); transition:opacity .6s .5s var(--ease), transform .6s .5s var(--ease);
}
.slide-btns {
  display:flex; gap:14px; flex-wrap:wrap;
  opacity:0; transform:translateY(16px); transition:opacity .6s .65s var(--ease), transform .6s .65s var(--ease);
}
.carousel-slide.active .slide-eyebrow,
.carousel-slide.active .slide-h1,
.carousel-slide.active .slide-sub,
.carousel-slide.active .slide-btns { opacity:1; transform:none; }

.btn-hero-primary {
  font-family:var(--font); font-size:15px; font-weight:700; color:var(--blue);
  background:var(--yellow); padding:13px 28px; border-radius:10px; border:none; cursor:pointer;
  transition:background .25s, transform .22s, box-shadow .25s;
}
.btn-hero-primary:hover { background:#FFD020; transform:translateY(-3px); box-shadow:0 8px 24px rgba(245,196,0,.45); }
.btn-hero-sec {
  font-family:var(--font); font-size:15px; font-weight:500; color:var(--white);
  background:rgba(255,255,255,.12); padding:13px 26px; border-radius:10px;
  border:1.5px solid rgba(255,255,255,.35); cursor:pointer; backdrop-filter:blur(4px);
  transition:background .25s, transform .22s;
}
.btn-hero-sec:hover { background:rgba(255,255,255,.22); transform:translateY(-2px); }

.carousel-prev, .carousel-next {
  position:absolute; top:50%; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(255,255,255,.15); color:var(--white); font-size:20px;
  backdrop-filter:blur(6px); z-index:10;
  display:flex; align-items:center; justify-content:center;
  transition:background .25s, transform .25s, box-shadow .25s;
}
@media (max-width:576px) { .carousel-prev, .carousel-next { display:none; } }
.carousel-prev { left:24px; }
.carousel-next { right:24px; }
.carousel-prev:hover, .carousel-next:hover { background:rgba(255,255,255,.28); transform:translateY(-50%) scale(1.1); }

.carousel-dots {
  position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
  display:flex; gap:10px; z-index:10;
}
.dot {
  width:8px; height:8px; border-radius:4px; background:rgba(255,255,255,.4);
  cursor:pointer; border:none; transition:width .35s var(--ease), background .3s;
}
.dot.active { width:28px; background:var(--yellow); }
.carousel-progress {
  position:absolute; bottom:0; left:0; height:3px; background:var(--yellow);
  width:0%; z-index:10; transition:none;
}
.carousel-progress.running { transition:width 5s linear; width:100%; }

/* ═══════════════════════════════════════
   STATS BAR
═══════════════════════════════════════ */
.stats-bar { background:var(--white); border-bottom:1px solid var(--gray-200); box-shadow:var(--shadow-sm); }
.stat-item {
  display:flex; align-items:center; gap:14px; padding:20px 24px;
  border-right:1px solid var(--gray-200); transition:background .25s;
}
.stat-item:last-child { border-right:none; }
.stat-item:hover { background:var(--blue-pale); }
@media (max-width:767px) {
  .stat-item { border-right:none; border-bottom:1px solid var(--gray-200); }
  .stat-item:last-child { border-bottom:none; }
}
.stat-icon-wrap {
  width:42px; height:42px; border-radius:12px; background:var(--blue-light); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:20px;
  transition:transform .3s var(--ease), background .25s;
}
.stat-item:hover .stat-icon-wrap { transform:scale(1.1) rotate(-6deg); background:var(--blue); color:var(--white)!important;}
.stat-num { font-size:20px; font-weight:800; color:var(--blue); }
.stat-lbl { font-size:13px; font-weight:500; color:var(--gray-700); }
.stat-sub { font-size:11px; color:var(--gray-500); }

/* ═══════════════════════════════════════
   SHARED SECTION STYLES
═══════════════════════════════════════ */
.section-eyebrow { font-size:11px; font-weight:700; color:var(--blue-mid); letter-spacing:.12em; text-transform:uppercase; margin-bottom:10px; }
.section-h2 { font-size:clamp(24px,3.5vw,32px); font-weight:800; color:var(--gray-900); line-height:1.2; letter-spacing:-.02em; }
.section-h2 strong { color:var(--blue); }
.section-h2::after { content:''; display:block; width:0; height:3px; background:var(--yellow); border-radius:2px; margin-top:10px; animation:borderGrow .6s .3s var(--ease) forwards; }
.section-desc { font-size:15px; color:var(--gray-500); line-height:1.7; margin-top:12px; }
.section-more { font-size:13px; color:var(--blue); font-weight:600; text-decoration:none; transition:gap .25s, color .25s; }
.section-more:hover { color:var(--yellow-dk); }

/* ═══════════════════════════════════════
   CATEGORÍAS
═══════════════════════════════════════ */
.categorias { padding:72px 0; background:var(--white); }
.cat-card {
  border:1px solid var(--gray-200); border-radius:16px; overflow:hidden;
  background:var(--white); display:flex; flex-direction:column; height:100%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
  cursor:pointer;
}
.cat-card:hover { transform:translateY(-8px) scale(1.01); box-shadow:var(--shadow-lg); border-color:var(--blue-mid); }
.cat-img { height:190px; overflow:hidden; position:relative; background:var(--blue-light); }
.cat-img img { width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.cat-card:hover .cat-img img { transform:scale(1.08); }
.cat-badge {
  position:absolute; top:12px; right:12px;
  background:var(--yellow); color:var(--blue); font-size:10px; font-weight:700;
  padding:3px 10px; border-radius:99px;
  opacity:0; transform:translateY(-4px); transition:transform .3s var(--ease), opacity .3s;
}
.cat-card:hover .cat-badge { opacity:1; transform:none; }
.cat-body { padding:18px; flex:1; display:flex; flex-direction:column; }
.cat-name { font-size:17px; font-weight:800; color:var(--gray-900); margin-bottom:4px; line-height:1.2; }
.cat-code { font-size:12px; color:var(--gray-500); margin-bottom:10px; }
.age-pill { background:var(--blue-light); color:var(--blue-mid); font-size:11px; font-weight:600; padding:3px 10px; border-radius:99px; display:inline-block; margin-bottom:16px; }
.btn-ver {
  font-family:var(--font); font-size:13px; font-weight:700; color:var(--white);
  background:var(--blue); padding:11px 16px; border-radius:9px; border:none; cursor:pointer;
  width:100%; margin-top:auto; display:flex; align-items:center; justify-content:center; gap:6px;
  transition:background .25s, transform .2s, box-shadow .25s;
}
    .btn-ver:hover {
        background: var(--blue-mid);
        transform: translateY(-2px);
        box-shadow: 0 6px 18px rgba(27,58,107,.25);
        color: var(--yellow)
    }

/* ═══════════════════════════════════════
   NOSOTROS
═══════════════════════════════════════ */
.about { padding:80px 0; background:var(--blue-pale); }
.about-img-main {
  width:100%; border-radius:20px; overflow:hidden; box-shadow:var(--shadow-lg);
  aspect-ratio:4/3; background:linear-gradient(135deg,#c8ddf5,#87b5e8);
  display:flex; align-items:center; justify-content:center; font-size:80px;
}
.about-img-main img { width:100%; height:100%; object-fit:cover; }
.about-badge {
  position:absolute; bottom:-20px; right:-10px;
  background:var(--yellow); border-radius:16px; padding:16px 20px;
  box-shadow:var(--shadow-md); display:flex; flex-direction:column; align-items:center;
  animation:pulse 3s ease-in-out infinite;
}
.about-badge-num { font-size:28px; font-weight:800; color:var(--blue); line-height:1; }
.about-badge-lbl { font-size:11px; font-weight:500; color:var(--blue); margin-top:2px; text-align:center; }
.about-feature {
  display:flex; align-items:flex-start; gap:14px; padding:14px; border-radius:12px;
  transition:background .25s;
}
.about-feature:hover { background:white; }
.feature-icon {
  width:42px; height:42px; border-radius:10px; flex-shrink:0;
  background:var(--blue); display:flex; align-items:center; justify-content:center; font-size:18px;
  transition:transform .3s var(--ease);
}
.about-feature:hover .feature-icon { transform:rotate(-8deg) scale(1.1); }
.feature-title { font-size:14px; font-weight:700; color:var(--gray-900); margin-bottom:3px; }
.feature-desc { font-size:13px; color:var(--gray-500); line-height:1.55; }

/* ═══════════════════════════════════════
   MÉTRICAS
═══════════════════════════════════════ */
.metricas { padding: 72px 0;background: var(--blue-mid);}
.metrica {
  padding:32px 20px; text-align:center; background:rgba(255,255,255,.05);
  border-radius:16px; position:relative; overflow:hidden;
  transition:background .3s;
}
.metrica:hover { background:rgba(255,255,255,.1); }
.metrica-icon { font-size:30px; margin-bottom:10px; }
.metrica-num { font-size:clamp(32px,4vw,44px); font-weight:800; color:var(--white); letter-spacing:-.03em; line-height:1; transition:color .25s; }
.metrica:hover .metrica-num { color:var(--yellow); }
.metrica-lbl { font-size:13px; color:rgba(255,255,255,.55); margin-top:6px; }

/* ═══════════════════════════════════════
   MUNDO ECO
═══════════════════════════════════════ */
.eco { padding:80px 0; background:var(--white); }
.eco-visual {
  border-radius:24px; overflow:hidden;
  background:linear-gradient(135deg,#a8d5a2,#3a9e3a);
  min-height:360px; display:flex; align-items:center; justify-content:center;
  box-shadow:var(--shadow-lg); position:relative;
}
.eco-bg-pattern {
    position: absolute;
    inset: 0;
    opacity: .4;
    background-image: url(../img/slider/mundo_eco_sustentables.jpg);
    background-size: cover;
}
.eco-circle {
  position:relative; width:140px; height:140px; border-radius:50%;
  background:rgba(255,255,255,.15); border:3px solid rgba(255,255,255,.4);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  color:white; font-weight:800; font-size:26px; line-height:1.15; text-align:center;
  animation:pulse 3.5s ease-in-out infinite;
}
.eco-circle small { font-size:12px; font-weight:500; }
.eco-tag { background:rgba(255,255,255,.2); color:white; font-size:12px; font-weight:500; padding:4px 12px; border-radius:99px; }
.eco-item {
  display:flex; align-items:flex-start; gap:14px;
  padding:14px; border-radius:12px; border:1px solid var(--gray-200);
  transition:border-color .25s, transform .25s, box-shadow .25s;
}
.eco-item:hover { border-color:var(--green); transform:translateX(6px); box-shadow:var(--shadow-sm); }
.eco-item-icon {
  width:38px; height:38px; border-radius:10px; flex-shrink:0;
  background:var(--green-lt); display:flex; align-items:center; justify-content:center; font-size:17px;
  transition:transform .3s var(--ease), background .25s;
}
.eco-item:hover .eco-item-icon { background:var(--green); transform:scale(1.1); }
.eco-item-title { font-size:14px; font-weight:700; color:var(--gray-900); margin-bottom:3px; }
.eco-item-desc { font-size:13px; color:var(--gray-500); line-height:1.5; }
.btn-eco {
  font-family:var(--font); font-size:14px; font-weight:700; color:var(--white); background:var(--green);
  padding:13px 26px; border-radius:10px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .25s, transform .22s, box-shadow .25s;
}
.btn-eco:hover { background:#2d6236; transform:translateY(-3px); box-shadow:0 8px 24px rgba(58,125,68,.35); }

/* ═══════════════════════════════════════
   CLIENTES MARQUEE
═══════════════════════════════════════ */
.clientes { padding:64px 0; background:var(--gray-100); overflow:hidden; }
.clientes-marquee { position:relative; margin-top:36px; }
.clientes-marquee::before, .clientes-marquee::after {
  content:''; position:absolute; top:0; bottom:0; width:80px; z-index:2;
}
.clientes-marquee::before { left:0; background:linear-gradient(to right,var(--gray-100),transparent); }
.clientes-marquee::after  { right:0; background:linear-gradient(to left,var(--gray-100),transparent); }
.marquee-track { display:flex; gap:12px; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track:hover { animation-play-state:paused; }
.client-chip {
  padding:8px 18px; white-space:nowrap; font-size:13px; color:var(--gray-700); font-weight:500;
  flex-shrink:0; transition:border-color .15s, color .15s, box-shadow .15s, transform .15s;
}
.client-chip img {
    max-height: 75px;
}
.client-chip:hover { border-color:var(--blue); color:var(--blue); transform:translateY(-2px); box-shadow:var(--shadow-sm); }

/* ═══════════════════════════════════════
   TESTIMONIOS
═══════════════════════════════════════ */
.testimonios { padding:80px 0; background:var(--white); }
.testi-card {
  background:var(--white); border-radius:18px; padding:26px;
  border:1px solid var(--gray-200); height:100%;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .25s;
}
.testi-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-md); border-color:var(--blue-mid); }
.testi-stars { color:var(--yellow); font-size:15px; letter-spacing:2px; margin-bottom:10px; }
.testi-quote { font-size:32px; color:var(--blue-light); font-weight:800; line-height:1; margin-bottom:8px; }
.testi-text { font-size:14px; color:var(--gray-700); line-height:1.72; font-style:italic; }
.testi-author { display:flex; align-items:center; gap:12px; border-top:1px solid var(--gray-200); padding-top:14px; margin-top:14px; }
.testi-avatar {
  width:40px; height:40px; border-radius:50%; background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  font-size:14px; color:var(--white); font-weight:700; flex-shrink:0;
}
.testi-name { font-size:13px; font-weight:700; color:var(--gray-900); }
.testi-role { font-size:12px; color:var(--gray-500); }

/* ═══════════════════════════════════════
   CONTACTO
═══════════════════════════════════════ */
.contacto { padding:80px 0; background:var(--blue); }
.contacto-eyebrow { font-size:11px; font-weight:700; color:var(--yellow); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; }
.contacto-h2 { font-size:clamp(26px,3.5vw,36px); font-weight:800; color:var(--white); line-height:1.15; margin-bottom:18px; }
.contacto-h2 span { color:var(--yellow); }
.contacto-desc { font-size:15px; color:rgba(255,255,255,.55); line-height:1.7; margin-bottom:32px; }
.cinfo-item { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
.cinfo-icon {
  width:38px; height:38px; border-radius:10px; background:rgba(245,196,0,.15);
  flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:16px;
  transition:background .25s, transform .25s;
}
.cinfo-icon>i{
color: #fff!important;
}
.cinfo-item:hover .cinfo-icon { background:rgba(245,196,0,.3); transform:scale(1.1); }
.cinfo-text { font-size:14px; color:rgba(255,255,255,.7); }
.btn-wa {
  font-family:var(--font); font-size:14px; font-weight:700; color:var(--white);
  background:#25D366; padding:12px 22px; border-radius:99px; border:none; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px;
  transition:background .25s, transform .22s, box-shadow .25s;
}
.btn-wa:hover { background:#1da851; transform:translateY(-3px); box-shadow:0 8px 24px rgba(37,211,102,.4); }
.cbadge {  padding:4px 12px; font-size:11px; color:rgba(255,255,255,.5); }
.cbadge img{  max-height:40px }

.contact-form-card { background:var(--white); border-radius:22px; padding:36px; box-shadow:var(--shadow-lg); }
@media (max-width:576px) { .contact-form-card { padding:24px; } }
.form-title { font-size:20px; font-weight:800; color:var(--gray-900); margin-bottom:4px; }
.form-sub { font-size:13px; color:var(--gray-500); margin-bottom:20px; }
.flabel { font-size:12px; font-weight:600; color:var(--gray-700); margin-bottom:4px; display:block; }
.finput, .fselect, .ftextarea {
  width:100%; border:1.5px solid var(--gray-200); border-radius:9px;
  padding:11px 14px; font-family:var(--font); font-size:14px; color:var(--gray-900);
  outline:none; background:var(--white);
  transition:border-color .25s, box-shadow .25s;
}
.finput:focus, .fselect:focus, .ftextarea:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(27,58,107,.1); outline:none; }
.finput::placeholder, .ftextarea::placeholder { color:var(--gray-500); }
.ftextarea { resize:none; height:90px; }
.fselect { appearance:none; }
.btn-submit {
  width:100%; font-family:var(--font); font-size:15px; font-weight:700; color:var(--white);
  background:var(--blue); padding:14px; border-radius:10px; border:none; cursor:pointer;
  position:relative; overflow:hidden;
  transition:background .25s, transform .22s, box-shadow .25s;
}
.btn-submit::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.2) 50%,rgba(255,255,255,0) 70%);
  transform:translateX(-100%); transition:transform .6s var(--ease);
}
.btn-submit:hover { background:var(--blue-mid); transform:translateY(-2px); box-shadow:0 8px 24px rgba(27,58,107,.35); }
.btn-submit:hover::after { transform:translateX(100%); }

/* ═══════════════════════════════════════
   FOOTER
═══════════════════════════════════════ */
footer { background:#06112A; padding:56px 0 28px; }
.footer-logo-icon {
  width:42px; height:42px; border-radius:10px; background:var(--blue);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.footer-logo-name { font-size:14px; font-weight:800; color:var(--white); line-height:1.15; }
.footer-logo-name small { display:block; font-size:10px; font-weight:400; color:rgba(255,255,255,.4); }
.footer-tagline { font-size:12px; color:rgba(255,255,255,.35); line-height:1.7; margin-bottom:20px; }
.soc {
  width:32px; height:32px; border-radius:8px; background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.6); display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; border:none; transition:background .25s, transform .22s;
}
.soc:hover { background:var(--blue-mid); transform:translateY(-2px); }
.footer-col-title { font-size:11px; font-weight:700; color:rgba(255,255,255,.35); letter-spacing:.1em; text-transform:uppercase; margin-bottom:16px; }
.footer-col a { display:block; font-size:13px; color:rgba(255,255,255,.55); text-decoration:none; margin-bottom:9px; transition:color .22s, transform .22s; }
.footer-col a:hover { color:var(--yellow); transform:translateX(4px); }
.footer-divider { border-color:rgba(255,255,255,.07); margin:32px 0 20px; }
.footer-copy { font-size:12px; color:rgba(255,255,255,.25); }
.footer-links a { font-size:12px; color:rgba(255,255,255,.3); text-decoration:none; margin-left:20px; transition:color .22s; }
.footer-links a:hover { color:rgba(255,255,255,.6); }

/* ═══════════════════════════════════════
   FLOATERS
═══════════════════════════════════════ */
.wa-float {
  position:fixed; bottom:88px; right:24px; z-index:900;
  width:50px; height:50px; border-radius:50%; background:#25D366; color:white;
  border:none; cursor:pointer; font-size:22px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(37,211,102,.4);
  animation:pulse 2.5s ease-in-out infinite;
  transition:transform .25s, box-shadow .25s;
}
.wa-float:hover { transform:scale(1.12); box-shadow:0 8px 28px rgba(37,211,102,.55); animation:none; }
.scroll-top {
  position:fixed; bottom:28px; right:24px; z-index:900;
  width:46px; height:46px; border-radius:50%; background:var(--yellow); color:var(--blue);
  border:none; cursor:pointer; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(245,196,0,.4);
  opacity:0; transform:translateY(16px);
  transition:opacity .35s, transform .35s, box-shadow .25s;
}
.scroll-top.show { opacity:1; transform:none; }
.scroll-top:hover { box-shadow:0 8px 28px rgba(245,196,0,.55); transform:translateY(-3px); }

/* ═══════════════════════════════════════
   RESPONSIVE EXTRAS
═══════════════════════════════════════ */
@media (max-width:991px) {
  .mega-menu { display:none !important; }
  .about-badge { bottom:-10px; right:0; }
}
@media (max-width:767px) {
  .contact-form-card { margin-top:40px; }
  .contacto-h2 { font-size:28px; }
}
/* ═══════════════════════════════════════
   CATÁLOGO CAROUSEL (cat-slider)
═══════════════════════════════════════ */
.cat-slider-wrapper {
  position: relative;
}

/* fade edges */
.cat-slider-wrapper::before,
.cat-slider-wrapper::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 60px;
  z-index: 2;
  pointer-events: none;
}
.cat-slider-wrapper::before { left:0;  background: linear-gradient(to right, var(--white), transparent); }
.cat-slider-wrapper::after  { right:0; background: linear-gradient(to left,  var(--white), transparent); }

.cat-slider-viewport {
  overflow: hidden;          /* clips the track — NO overflow-hidden de Bootstrap */
  width: 100%;
}

.cat-slider-track {
  display: flex;
  gap: 22px;
  width: max-content;        /* se expande todo lo necesario */
  transition: transform .55s cubic-bezier(.4,0,.2,1);
  will-change: transform;
}

/* cada card ocupa ancho fijo responsive */
.cat-slider-item {
  flex: 0 0 280px;
  width: 280px;
}
@media (min-width: 576px)  { .cat-slider-item { flex: 0 0 260px; width: 260px; } }
@media (min-width: 992px)  { .cat-slider-item { flex: 0 0 calc(15% - 17px); width: calc(20% - 17px); } }

/* botones nav */
.cat-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 44px; height: 44px; border-radius: 50%;
  border: none; cursor: pointer;
  background: var(--white);
  color: var(--blue);
  font-size: 18px;
  box-shadow: 0 4px 18px rgba(27,58,107,.18);
  display: flex; align-items: center; justify-content: center;
  transition: background .25s, transform .25s, box-shadow .25s;
}
.cat-btn:hover { background: var(--blue); color: var(--white); transform: translateY(-50%) scale(1.1); box-shadow: var(--shadow-md); }
.cat-btn:disabled { opacity: .35; cursor: default; transform: translateY(-50%); }
.cat-btn.prev { left: -22px; }
.cat-btn.next { right: -22px; }
@media (max-width: 575px) {
  .cat-btn.prev { left: 0; }
  .cat-btn.next { right: 0; }
}

/* dots del slider catálogo */
.cat-dots {
  display: flex; gap: 8px; justify-content: center; margin-top: 28px;
}
.cat-dot {
  width: 8px; height: 8px; border-radius: 4px;
  background: var(--gray-200); border: none; cursor: pointer;
  transition: width .35s var(--ease), background .3s;
}
.cat-dot.active { width: 24px; background: var(--blue); }

.carousel-btn.prev { left: -10px; }
.carousel-btn.next { right: -10px; }

.page-hero{
  margin-top:66px;
  background: linear-gradient(135deg, var(--blue) 0%, var(--blue-mid) 100%);
  padding:56px 0 48px;
  position:relative;
  overflow:hidden;
  background:url(../img/slider/mundo_juegos_6.jpg) center/cover;
}
.page-hero::before{
  content:'';position:absolute;inset:0;opacity:.05;
  background-image:radial-gradient(circle,#fff 1.5px,transparent 1.5px);
  background-size:28px 28px;
}
.page-hero-eyebrow{font-size:11px;font-weight:600;color:var(--yellow);letter-spacing:.12em;text-transform:uppercase;margin-bottom:12px;}
.page-hero h1{font-size:clamp(28px,4vw,44px);font-weight:800;color:var(--white);letter-spacing:-.02em;line-height:1.15;margin-bottom:14px;}
.page-hero h1 em{color:var(--yellow);font-style:normal;}
.page-hero p{font-size:15px;color:rgba(255,255,255,.65);line-height:1.7;max-width:520px;}
.page-hero-img{
  position:absolute;right:0;top:0;bottom:0;width:42%;
  background:url('https://images.unsplash.com/photo-1575783970733-1aaadab7a19c?w=900&q=80') center/cover;
  opacity:.25;
}

/* ── BREADCRUMB ── */
.breadcrumb-bar{background:var(--blue-pale);border-bottom:1px solid var(--gray-200);padding:12px 0;}
.breadcrumb{margin:0;font-size:13px;}
.breadcrumb-item a{color:var(--blue);text-decoration:none;font-weight:500;}
.breadcrumb-item a:hover{color:var(--yellow-dk);}
.breadcrumb-item.active{color:var(--gray-500);}
.breadcrumb-item+.breadcrumb-item::before{color:var(--gray-500);}

/* ── FILTER BAR ── */
.filter-bar{padding:28px 0;border-bottom:1px solid var(--gray-200);background:var(--white);position:sticky;top:66px;z-index:100;box-shadow:0 2px 8px rgba(0,0,0,.04);}
.filter-pill{
  font-family:var(--font);font-size:13px;font-weight:500;
  padding:7px 18px;border-radius:99px;
  border:1.5px solid var(--gray-200);background:var(--white);color:var(--gray-700);
  cursor:pointer;transition:all .22s var(--ease);white-space:nowrap;
}
.filter-pill:hover{border-color:var(--blue);color:var(--blue);}
.filter-pill.active{background:var(--blue);color:var(--white);border-color:var(--blue);}
.filter-search{
  display:flex;align-items:center;gap:8px;
  border:1.5px solid var(--gray-200);border-radius:99px;
  padding:6px 16px;background:var(--white);min-width:220px;
  transition:border-color .25s,box-shadow .25s;
}
.filter-search:focus-within{border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,58,107,.1);}
.filter-search input{border:none;outline:none;font-family:var(--font);font-size:13px;color:var(--gray-900);width:100%;background:transparent;}
.filter-search input::placeholder{color:var(--gray-500);}
.results-count{font-size:13px;color:var(--gray-500);white-space:nowrap;}

/* ── PRODUCT GRID ── */
.products-section{padding:48px 0 80px;}
.prod-card{
  border:1px solid var(--gray-200);border-radius:16px;overflow:hidden;
  background:var(--white);display:flex;flex-direction:column;height:100%;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;
  cursor:pointer;text-decoration:none;color:inherit;
}
.prod-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:var(--shadow-lg);border-color:var(--blue-mid);}
.prod-img{
  height:220px;overflow:hidden;position:relative;
  background:var(--blue-light);flex-shrink:0;
}
.prod-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.prod-card:hover .prod-img img{transform:scale(1.08);}
.prod-img-placeholder{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;font-size:56px;
  background:linear-gradient(135deg,var(--blue-light) 0%,#d0e4f7 100%);
  transition:transform .6s var(--ease);
}
.prod-card:hover .prod-img-placeholder{transform:scale(1.05);}
.prod-badge{
  position:absolute;top:12px;left:12px;
  background:var(--yellow);color:var(--blue);font-size:10px;font-weight:700;
  padding:3px 10px;border-radius:99px;
}
.prod-overlay{
  position:absolute;inset:0;background:rgba(27,58,107,.5);
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;
}
.prod-card:hover .prod-overlay{opacity:1;}
.prod-overlay-btn{
  font-family:var(--font);font-size:14px;font-weight:700;color:var(--blue);
  background:var(--yellow);padding:11px 24px;border-radius:9px;border:none;cursor:pointer;
}
.prod-body{padding:18px;flex:1;display:flex;flex-direction:column;}
.prod-code{font-size:11px;color:var(--gray-500);font-weight:500;margin-bottom:4px;letter-spacing:.04em;}
.prod-name{font-size:16px;font-weight:800;color:var(--gray-900);margin-bottom:10px;line-height:1.25;}
.prod-dims{font-size:12px;color:var(--gray-500);display:flex;align-items:center;gap:5px;margin-bottom:12px;}
.btn-prod{
  font-family:var(--font);font-size:13px;font-weight:700;color:var(--white);
  background:var(--blue);padding:10px 16px;border-radius:9px;border:none;cursor:pointer;
  width:100%;margin-top:auto;display:flex;align-items:center;justify-content:center;gap:6px;
  transition:background .25s,transform .2s,box-shadow .25s;
}
.btn-prod:hover{background:var(--blue-mid);transform:translateY(-2px);box-shadow:0 6px 18px rgba(27,58,107,.25);}

/* ── LOAD MORE ── */
.btn-load{
  font-family:var(--font);font-size:14px;font-weight:700;color:var(--blue);
  background:transparent;border:2px solid var(--blue);padding:13px 40px;border-radius:99px;
  cursor:pointer;transition:all .25s var(--ease);
}
.btn-load:hover{background:var(--blue);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md);}

/* ── SIDEBAR ── */
.sidebar-card{background:var(--blue-pale);border-radius:16px;padding:24px;margin-bottom:20px;border:1px solid var(--blue-light);}
.sidebar-title{font-size:14px;font-weight:700;color:var(--blue);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.sidebar-link{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--gray-700);text-decoration:none;padding:8px 10px;border-radius:8px;transition:background .2s,color .2s,transform .2s;margin-bottom:2px;}
.sidebar-link:hover{background:white;color:var(--blue);transform:translateX(4px);}
.sidebar-link.active{background:var(--blue);color:white;}
.sidebar-link span{font-size:11px;background:var(--gray-200);color:var(--gray-700);padding:2px 8px;border-radius:99px;}
.sidebar-link.active span{background:rgba(255,255,255,.2);color:white;}
.cta-card{background:var(--blue);border-radius:16px;padding:24px;color:white;}
.cta-card h4{font-size:16px;font-weight:800;margin-bottom:8px;}
.cta-card p{font-size:13px;color:rgba(255,255,255,.7);line-height:1.6;margin-bottom:16px;}
.btn-cta-card{width:100%;font-family:var(--font);font-size:13px;font-weight:700;color:var(--blue);background:var(--yellow);padding:11px;border-radius:9px;border:none;cursor:pointer;transition:background .25s,transform .22s;}
.btn-cta-card:hover{background:#FFD020;transform:translateY(-2px);}

/* ── FOOTER ── */
footer{background:#06112A;padding:56px 0 28px;}
.footer-logo-icon{width:42px;height:42px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-logo-name{font-size:14px;font-weight:800;color:var(--white);line-height:1.15;}
.footer-logo-name small{display:block;font-size:10px;font-weight:400;color:rgba(255,255,255,.4);}
.footer-tagline{font-size:12px;color:rgba(255,255,255,.35);line-height:1.7;margin-bottom:20px;}
.soc{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;border:none;transition:background .25s,transform .22s;}
.soc:hover{background:var(--blue-mid);transform:translateY(-2px);}
.footer-col-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:9px;transition:color .22s,transform .22s;}
.footer-col a:hover{color:var(--yellow);transform:translateX(4px);}
.footer-divider{border-color:rgba(255,255,255,.07);margin:32px 0 20px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,.25);}
.footer-links a{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;margin-left:20px;transition:color .22s;}
.footer-links a:hover{color:rgba(255,255,255,.6);}

/* ── FLOATERS ── */
.wa-float{position:fixed;bottom:88px;right:24px;z-index:900;width:50px;height:50px;border-radius:50%;background:#25D366;color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);animation:pulse 2.5s ease-in-out infinite;transition:transform .25s,box-shadow .25s;}
.wa-float:hover{transform:scale(1.12);box-shadow:0 8px 28px rgba(37,211,102,.55);animation:none;}
.scroll-top{position:fixed;bottom:28px;right:24px;z-index:900;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--blue);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(245,196,0,.4);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s,box-shadow .25s;}
.scroll-top.show{opacity:1;transform:none;}
.scroll-top:hover{box-shadow:0 8px 28px rgba(245,196,0,.55);transform:translateY(-3px);}

@media(max-width:991px){.mega-menu{display:none!important;}.sidebar-col{margin-top:32px;}}

/* BREADCRUMB */
.breadcrumb-bar{background:var(--blue-pale);border-bottom:1px solid var(--gray-200);padding:12px 0;margin-top:66px;}
.breadcrumb{margin:0;font-size:13px;}
.breadcrumb-item a{color:var(--blue);text-decoration:none;font-weight:500;}
.breadcrumb-item a:hover{color:var(--yellow-dk);}
.breadcrumb-item.active{color:var(--gray-500);}
.breadcrumb-item+.breadcrumb-item::before{color:var(--gray-500);}

/* PRODUCT DETAIL */
.product-detail{padding:56px 0 72px;}

/* GALLERY */
.gallery-main{
  border-radius:20px;overflow:hidden;background:var(--blue-light);
  aspect-ratio:4/3;position:relative;cursor:zoom-in;
}
.gallery-main img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease);}
.gallery-main:hover img{transform:scale(1.04);}
.gallery-zoom{
  position:absolute;top:14px;right:14px;
  width:36px;height:36px;border-radius:8px;
  background:rgba(255,255,255,.9);border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--blue);
  transition:background .2s,transform .2s;
}
.gallery-zoom:hover{background:white;transform:scale(1.1);}
.gallery-note{font-size:11px;color:var(--gray-500);text-align:center;margin-top:8px;font-style:italic;}
.gallery-thumbs{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap;}
.gallery-thumb{
  width:80px;height:60px;border-radius:10px;overflow:hidden;
  border:2px solid var(--gray-200);cursor:pointer;flex-shrink:0;
  transition:border-color .2s,transform .2s;
}
.gallery-thumb:hover,.gallery-thumb.active{border-color:var(--blue);transform:translateY(-2px);}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}

/* PRODUCT INFO */
.prod-eyebrow{font-size:11px;font-weight:700;color:var(--blue-mid);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.prod-code-badge{display:inline-block;background:var(--yellow);color:var(--blue);font-size:12px;font-weight:700;padding:4px 12px;border-radius:99px;margin-bottom:14px;}
.prod-title{font-size:clamp(24px,3.5vw,38px);font-weight:800;color:var(--gray-900);line-height:1.15;letter-spacing:-.02em;margin-bottom:18px;}
.prod-desc{font-size:15px;color:var(--gray-700);line-height:1.75;margin-bottom:28px;}

/* SPECS TABLE */
.specs-table{border-radius:14px;overflow:hidden;border:1px solid var(--gray-200);margin-bottom:28px;}
.spec-row{display:flex;border-bottom:1px solid var(--gray-200);}
.spec-row:last-child{border-bottom:none;}
.spec-label{width:140px;flex-shrink:0;padding:13px 16px;background:var(--blue-pale);font-size:13px;font-weight:700;color:var(--blue);display:flex;align-items:center;gap:8px;}
.spec-value{padding:13px 16px;font-size:14px;color:var(--gray-700);display:flex;align-items:center;}

/* FEATURES */
.feat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;}
.feat-item{display:flex;align-items:flex-start;gap:10px;padding:12px;border-radius:10px;background:var(--blue-pale);border:1px solid var(--blue-light);}
.feat-icon{width:32px;height:32px;border-radius:8px;background:var(--blue);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;}
.feat-label{font-size:12px;font-weight:700;color:var(--blue);margin-bottom:2px;}
.feat-val{font-size:12px;color:var(--gray-500);}

/* CTA BUTTONS */
.btn-adquirir{
  width:100%;font-family:var(--font);font-size:16px;font-weight:700;color:var(--blue);
  background:var(--yellow);padding:16px;border-radius:12px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s,transform .22s,box-shadow .25s;
  position:relative;overflow:hidden;
}
.btn-adquirir::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.25) 50%,rgba(255,255,255,0) 70%);transform:translateX(-100%);transition:transform .6s var(--ease);}
.btn-adquirir:hover{background:#FFD020;transform:translateY(-2px);box-shadow:0 8px 28px rgba(245,196,0,.45);}
.btn-adquirir:hover::after{transform:translateX(100%);}
.btn-cotizar{
  width:100%;font-family:var(--font);font-size:15px;font-weight:600;color:var(--blue);
  background:transparent;padding:14px;border-radius:12px;border:2px solid var(--blue);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s,transform .22s;
}
.btn-cotizar:hover{background:var(--blue);color:white;transform:translateY(-2px);}
.btn-download{
  width:100%;font-family:var(--font);font-size:13px;font-weight:500;color:var(--gray-700);
  background:var(--gray-100);padding:12px;border-radius:10px;border:1px solid var(--gray-200);cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s,color .25s;
}
.btn-download:hover{background:var(--blue-pale);color:var(--blue);}
.btn-wa-prod{
  width:100%;font-family:var(--font);font-size:13px;font-weight:600;color:white;
  background:#25D366;padding:12px;border-radius:10px;border:none;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:8px;
  transition:background .25s,transform .22s;
}
.btn-wa-prod:hover{background:#1da851;transform:translateY(-1px);}

/* TRUST PILLS */
.trust-pills{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;}
.trust-pill{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--gray-700);background:var(--gray-100);border:1px solid var(--gray-200);padding:5px 12px;border-radius:99px;}

/* STICKY CTA sidebar on mobile */
.sticky-cta{
  position:sticky;top:86px;
}
@media(max-width:991px){.sticky-cta{position:static;margin-top:32px;}}

/* PRODUCT TABS */
.prod-tabs{border-bottom:2px solid var(--gray-200);margin-bottom:32px;display:flex;gap:0;overflow-x:auto;}
.prod-tab{
  font-family:var(--font);font-size:14px;font-weight:600;color:var(--gray-500);
  padding:14px 24px;border:none;background:transparent;cursor:pointer;white-space:nowrap;
  border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .2s,border-color .2s;
}
.prod-tab.active{color:var(--blue);border-bottom-color:var(--yellow);}
.prod-tab:hover{color:var(--blue);}
.tab-pane{display:none;}
.tab-pane.active{display:block;animation:fadeUp .4s var(--ease) both;}

/* RELATED */
.related-section{padding:72px 0;background:var(--blue-pale);}
.section-eyebrow{font-size:11px;font-weight:700;color:var(--blue-mid);letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;}
.section-h2{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--gray-900);letter-spacing:-.02em;}
.section-h2 strong{color:var(--blue);}
.section-h2::after{content:'';display:block;width:0;height:3px;background:var(--yellow);border-radius:2px;margin-top:10px;animation:borderGrow .6s .3s var(--ease) forwards;}
@keyframes borderGrow{from{width:0}to{width:48px}}
.rel-card{border:1px solid var(--gray-200);border-radius:16px;overflow:hidden;background:var(--white);display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .25s;}
.rel-card:hover{transform:translateY(-8px) scale(1.01);box-shadow:var(--shadow-lg);border-color:var(--blue-mid);}
.rel-img{height:180px;overflow:hidden;background:var(--blue-light);}
.rel-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.rel-card:hover .rel-img img{transform:scale(1.08);}
.rel-body{padding:16px;flex:1;display:flex;flex-direction:column;}
.rel-code{font-size:11px;color:var(--gray-500);margin-bottom:4px;}
.rel-name{font-size:15px;font-weight:800;color:var(--gray-900);margin-bottom:auto;}
.btn-rel{font-family:var(--font);font-size:13px;font-weight:700;color:var(--white);background:var(--blue);padding:10px;border-radius:8px;border:none;cursor:pointer;width:100%;margin-top:14px;transition:background .25s,transform .2s;}
.btn-rel:hover{background:var(--blue-mid);transform:translateY(-2px);}

/* LIGHTBOX */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:2000;display:none;align-items:center;justify-content:center;}
.lightbox.open{display:flex;}
.lightbox-img{max-width:90vw;max-height:90vh;border-radius:12px;object-fit:contain;}
.lightbox-close{position:absolute;top:20px;right:20px;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.15);color:white;border:none;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s;}
.lightbox-close:hover{background:rgba(255,255,255,.3);}

/* FOOTER */
footer{background:#06112A;padding:56px 0 28px;}
.footer-logo-icon{width:42px;height:42px;border-radius:10px;background:var(--blue);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.footer-logo-name{font-size:14px;font-weight:800;color:var(--white);line-height:1.15;}
.footer-logo-name small{display:block;font-size:10px;font-weight:400;color:rgba(255,255,255,.4);}
.footer-tagline{font-size:12px;color:rgba(255,255,255,.35);line-height:1.7;margin-bottom:20px;}
.soc{width:32px;height:32px;border-radius:8px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;border:none;transition:background .25s,transform .22s;}
.soc:hover{background:var(--blue-mid);transform:translateY(-2px);}
.footer-col-title{font-size:11px;font-weight:700;color:rgba(255,255,255,.35);letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px;}
.footer-col a{display:block;font-size:13px;color:rgba(255,255,255,.55);text-decoration:none;margin-bottom:9px;transition:color .22s,transform .22s;}
.footer-col a:hover{color:var(--yellow);transform:translateX(4px);}
.footer-divider{border-color:rgba(255,255,255,.07);margin:32px 0 20px;}
.footer-copy{font-size:12px;color:rgba(255,255,255,.25);}
.footer-links a{font-size:12px;color:rgba(255,255,255,.3);text-decoration:none;margin-left:20px;transition:color .22s;}
.footer-links a:hover{color:rgba(255,255,255,.6);}
.wa-float{position:fixed;bottom:88px;right:24px;z-index:900;width:50px;height:50px;border-radius:50%;background:#25D366;color:white;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(37,211,102,.4);animation:pulse 2.5s ease-in-out infinite;transition:transform .25s;}
.wa-float:hover{transform:scale(1.12);animation:none;}
.scroll-top{position:fixed;bottom:28px;right:24px;z-index:900;width:46px;height:46px;border-radius:50%;background:var(--yellow);color:var(--blue);border:none;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(245,196,0,.4);opacity:0;transform:translateY(16px);transition:opacity .35s,transform .35s;}
.scroll-top.show{opacity:1;transform:none;}
.scroll-top:hover{transform:translateY(-3px);}

@media(max-width:991px){.mega-menu{display:none!important;}}

/* Solo se aplica en mobile (<768px), en desktop no existe */
@media (max-width: 767.98px) {

  /* wrapper recorta el track */
  .testi-mobile-carousel {
    position: relative;
    overflow: hidden;
  }

  /* track se extiende horizontalmente sin romper */
  .testi-mobile-track {
    display: flex;
    flex-wrap: nowrap;
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    will-change: transform;
  }

  /* cada slide = exactamente el ancho del wrapper */
  .testi-mobile-slide {
    flex: 0 0 100%;
    min-width: 100%;
    width: 100%;
    box-sizing: border-box;
    padding: 0 2px;
  }

  /* la card no hereda height:100% del flex */
  .testi-mobile-slide .testi-card {
    height: auto;
  }

  /* dots */
  .testi-mobile-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }

  .testi-mobile-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--gray-200, #E2E6ED);
    border: none;
    cursor: pointer;
    padding: 0;
    transition: width .35s cubic-bezier(.4,0,.2,1), background .3s;
  }

  .testi-mobile-dot.active {
    width: 24px;
    background: var(--blue, #1B3A6B);
  }

}