/* ══════════════════════════════════════════════════════
   GEBLER LIGHTING — DESIGN SYSTEM
   Dark HUD aesthetic · Red #e30022 · Purple #7c3aed
   Fonts: Bebas Neue · Rajdhani · Outfit
   ══════════════════════════════════════════════════════ */

/* ── VARIABLES ─────────────────────────────────────── */
:root {
  --red:      #e30022;
  --red-glow: rgba(227,0,34,0.35);
  --red-dim:  rgba(227,0,34,0.12);
  --purple:   #7c3aed;
  --pur-glow: rgba(124,58,237,0.35);
  --pur-dim:  rgba(124,58,237,0.12);
  --dark:     #080808;
  --dark2:    #0f0f0f;
  --dark3:    #141414;
  --dark4:    #1c1c1c;
  --dark5:    #232323;
  --border:   rgba(255,255,255,0.07);
  --border2:  rgba(255,255,255,0.12);
  --white:    #f5f0eb;
  --grey:     rgba(245,240,235,0.5);
  --grey2:    rgba(245,240,235,0.25);
  --font-head:'Bebas Neue', 'Impact', sans-serif;
  --font-ui:  'Rajdhani', 'Outfit', sans-serif;
  --font-body:'Outfit', 'Segoe UI', sans-serif;
  --radius:   10px;
  --radius-lg:18px;
  --trans:    0.25s ease;
  --trans-md: 0.35s cubic-bezier(0.23,1,0.32,1);
  --shadow:   0 4px 24px rgba(0,0,0,0.5);
  --shadow-lg:0 12px 48px rgba(0,0,0,0.7);
  --glow-red: 0 0 28px rgba(227,0,34,0.4);
  --glow-pur: 0 0 28px rgba(124,58,237,0.4);
}

/* ── RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;font-size:16px;}
body{
  font-family:var(--font-body);
  background:rgb(24, 24, 24);
  color:var(--white);
  overflow-x:hidden;
  min-height:100vh;
}
a{text-decoration:none;color:inherit;}
img{max-width:100%;display:block;}
button{cursor:pointer;border:none;background:none;font-family:inherit;}

/* ── SCROLLBAR ──────────────────────────────────────── */
::-webkit-scrollbar{width:5px;}
::-webkit-scrollbar-track{background:var(--dark2);}
::-webkit-scrollbar-thumb{background:linear-gradient(var(--red),var(--purple));border-radius:3px;}

.container{max-width:1280px;margin:0 auto;padding:0 28px;}

/* ══════════════════════════════════════════════════════
   CURSOR PERSONALIZADO
   ══════════════════════════════════════════════════════ */
.cursor-dot{
  width:8px;height:8px;
  background:var(--red);border-radius:50%;
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  transition:transform .1s,background .25s;
  box-shadow:var(--glow-red);
}
.cursor-ring{
  width:32px;height:32px;
  border:1.5px solid rgba(124,58,237,.5);
  border-radius:50%;
  position:fixed;top:0;left:0;
  pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  transition:all .18s ease;
}
a:hover~.cursor-dot,button:hover~.cursor-dot{transform:translate(-50%,-50%) scale(2.2);background:var(--purple);}

/* ══════════════════════════════════════════════════════
   PARTICLES BACKGROUND
   ══════════════════════════════════════════════════════ */
.bg-particles{
  position:fixed;inset:0;
  pointer-events:none;z-index:0;overflow:hidden;
}
.particle{
  position:absolute;border-radius:50%;
  animation:floatUp linear infinite;opacity:.12;
}
@keyframes floatUp{
  0%{transform:translateY(100vh) rotate(0deg);opacity:0;}
  10%{opacity:.12;}
  90%{opacity:.06;}
  100%{transform:translateY(-80px) rotate(720deg);opacity:0;}
}

/* ══════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════ */
.header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  background:rgba(8,8,8,.95);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(124,58,237,.18);
  transition:box-shadow var(--trans),background var(--trans);
}
.header.scrolled{
  background:rgba(8,8,8,.99);
  box-shadow:0 4px 32px rgba(124,58,237,.12);
}

.header__inner{
  display:flex;align-items:center;height:70px;gap:28px;
}

/* Logo */
.header__logo{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.logo-g{
  font-family:var(--font-head);font-size:36px;color:var(--red);line-height:1;
  text-shadow:var(--glow-red);transition:text-shadow var(--trans);
}
.header__logo:hover .logo-g{text-shadow:0 0 20px var(--red),0 0 40px var(--red);}
.logo-lines{display:flex;flex-direction:column;gap:4px;padding-left:2px;}
.logo-lines span{
  display:block;height:2px;
  background:linear-gradient(90deg,var(--purple),transparent);
  border-radius:1px;transition:width var(--trans);
}
.logo-lines span:nth-child(1){width:20px;}
.logo-lines span:nth-child(2){width:14px;}
.logo-lines span:nth-child(3){width:8px;}
.header__logo:hover .logo-lines span:nth-child(1){width:24px;}
.header__logo:hover .logo-lines span:nth-child(2){width:18px;}
.header__logo:hover .logo-lines span:nth-child(3){width:12px;}
.logo-text{display:flex;flex-direction:column;line-height:1;}
.logo-brand{font-family:var(--font-head);font-size:1.5rem;letter-spacing:.08em;color:var(--white);}
.logo-sub{font-family:var(--font-ui);font-size:.55rem;letter-spacing:.3em;color:rgba(124,58,237,.8);text-transform:uppercase;}

/* Nav links */
.header__nav{display:flex;align-items:center;gap:2px;flex:1;}
.nav-link{
  position:relative;
  font-family:var(--font-ui);font-size:.92rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;
  padding:7px 13px;color:var(--grey);
  border-radius:6px;white-space:nowrap;
  transition:color var(--trans);
  display:flex;align-items:center;gap:4px;
}
.nav-link::after{
  content:'';position:absolute;bottom:3px;left:50%;
  width:0;height:2px;
  background:linear-gradient(90deg,var(--red),var(--purple));
  transform:translateX(-50%);border-radius:1px;
  transition:width var(--trans);
}
.nav-link:hover,
.nav-link.active{color:var(--white);}
.nav-link:hover::after,
.nav-link.active::after{width:70%;}
.nav-link.active{color:var(--red);}

/* Dropdown marcas */
.nav-dropdown{position:relative;}
.dropdown-menu{
  display:none;position:absolute;
  top:calc(100% + 8px);left:0;
  background:var(--dark2);
  border:1px solid rgba(124,58,237,.2);
  border-radius:var(--radius);min-width:230px;
  overflow:hidden;box-shadow:var(--shadow-lg);
  animation:fadeDown .18s ease;
}
.nav-dropdown:hover .dropdown-menu{display:block;}
@keyframes fadeDown{
  from{opacity:0;transform:translateY(-8px);}
  to  {opacity:1;transform:translateY(0);}
}
.dropdown-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 18px;
  color:var(--grey);font-size:.85rem;font-weight:600;
  font-family:var(--font-ui);letter-spacing:.03em;
  border-bottom:1px solid var(--border);
  transition:background var(--trans),color var(--trans),padding var(--trans);
}
.dropdown-item:last-child{border-bottom:none;}
.dropdown-item:hover{background:rgba(255,255,255,.04);color:var(--white);padding-left:22px;}
.di-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.di-name{font-family:var(--font-ui);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.di-sub{font-size:.68rem;color:var(--grey2);margin-top:1px;}

/* CTA Header */
.btn-header-cta{
  font-family:var(--font-ui);font-size:.8rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 20px;border-radius:6px;
  background:linear-gradient(135deg,var(--red),#c00018);
  color:#fff;
  box-shadow:0 0 0 rgba(227,0,34,0);
  transition:box-shadow var(--trans),transform var(--trans);
  white-space:nowrap;
}
.btn-header-cta:hover{box-shadow:var(--glow-red);transform:translateY(-1px);}

/* Hamburger */
.hamburger{
  display:none;flex-direction:column;gap:5px;
  padding:8px;margin-left:auto;
}
.hamburger span{
  display:block;width:22px;height:2px;
  background:var(--white);border-radius:1px;
  transition:transform .25s,opacity .25s;
}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);background:var(--red);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);background:var(--red);}

/* Mobile nav */
.mobile-nav{
  display:none;flex-direction:column;gap:0;
  border-top:1px solid var(--border);
  background:var(--dark);
  animation:fadeDown .2s ease;
}
.mobile-nav.open{display:flex;}
.mnav-section{
  font-family:var(--font-ui);font-size:.65rem;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--grey2);padding:12px 20px 4px;
}
.mnav-link{
  padding:13px 20px;color:var(--grey);
  font-size:.9rem;font-weight:600;
  border-bottom:1px solid var(--border);
  font-family:var(--font-ui);letter-spacing:.04em;
  transition:color var(--trans),padding var(--trans);
}
.mnav-link:hover{color:var(--white);padding-left:26px;}
.mnav-link--brand{padding-left:24px;}

.page-wrap{margin-top:70px;}

/* ══════════════════════════════════════════════════════
   ANIMATE ON SCROLL
   ══════════════════════════════════════════════════════ */
.animate-up{
  opacity:0;transform:translateY(28px);
  transition:opacity .55s cubic-bezier(.23,1,.32,1),transform .55s cubic-bezier(.23,1,.32,1);
}
.animate-up.visible{opacity:1;transform:none;}

/* ══════════════════════════════════════════════════════
   HERO
   ══════════════════════════════════════════════════════ */
.hero{
  position:relative;height:calc(100vh - 70px);
  overflow:hidden;min-height:520px;
}
.hero__slide{
  position:absolute;inset:0;
  display:flex;align-items:center;
  opacity:0;transition:opacity .9s cubic-bezier(.4,0,.2,1);
}
.hero__slide.active{opacity:1;}
.hero__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;filter:brightness(.75) saturate(.8);
}
.hero__overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(8, 8, 8, 0.703) 0%, transparent 90%);
}

.hero__content{position:relative;z-index:2;}
.hero__text{max-width:660px;}
.hero__tag{
  display:inline-block;
  font-family:var(--font-ui);font-size:.75rem;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--red);border-left:3px solid var(--red);padding-left:10px;
  margin-bottom:18px;
}
.hero__title{
  font-family:var(--font-head);
  font-size:clamp(3.2rem,9vw,7rem);
  line-height:1;letter-spacing:.02em;
  margin-bottom:20px;
}
.hero__desc{
  font-size:clamp(1rem,1.8vw,1.15rem);
  color:rgb(255, 255, 255);line-height:1.6;margin-bottom:36px;
  max-width:480px;
}
.btn-hero{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-ui);font-size:1rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:14px 32px;border-radius:8px;
  border:1.5px solid var(--accent,var(--red));
  color:var(--white);
  background:linear-gradient(135deg,rgba(var(--accent-r,227),var(--accent-g,0),var(--accent-b,34),.12),transparent);
  transition:background var(--trans),box-shadow var(--trans),transform var(--trans);
}
.btn-hero:hover{
  background:linear-gradient(135deg,rgba(var(--accent-r,227),var(--accent-g,0),var(--accent-b,34),.25),transparent);
  box-shadow:0 0 24px rgba(var(--accent-r,227),var(--accent-g,0),var(--accent-b,34),.3);
  transform:translateY(-2px);
}
.hero__arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.06);border:1px solid var(--border2);
  color:var(--white);font-size:1.4rem;line-height:1;
  transition:background var(--trans),box-shadow var(--trans);z-index:3;
}
.hero__arrow:hover{background:rgba(227,0,34,.2);box-shadow:var(--glow-red);}
.hero__arrow--prev{left:24px;}
.hero__arrow--next{right:24px;}
.hero__dots{
  position:absolute;bottom:28px;left:50%;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3;
}
.hero__dot{
  width:8px;height:8px;border-radius:4px;
  background:rgba(255,255,255,.25);
  transition:width .3s,background .3s;
}
.hero__dot.active{width:24px;background:var(--red);}

/* ══════════════════════════════════════════════════════
   SECTION UTILITIES
   ══════════════════════════════════════════════════════ */
.section{padding:72px 0;}
.section-tag{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--red);
  margin-bottom:12px;
}
.section-tag::before{content:'';width:18px;height:2px;background:var(--red);}
.section-header{margin-bottom:48px;}
.section-header h2{
  font-family:var(--font-head);
  font-size:clamp(2rem,5vw,3rem);
  letter-spacing:.03em;line-height:1.1;
}
.text-red{color:var(--red);}
.text-gradient{
  background:linear-gradient(120deg,var(--red),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

/* ══════════════════════════════════════════════════════
   BRAND CARDS (Home)
   ══════════════════════════════════════════════════════ */
.brands-section{padding:72px 0;background:var(--dark2);}
.brands-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
.brand-card{
  position:relative;overflow:hidden;
  padding:40px 32px;border-radius:var(--radius-lg);
  border:1px solid var(--border);
  background:var(--dark3);
  transition:border-color var(--trans),transform var(--trans-md),box-shadow var(--trans-md);
}
.brand-card:hover{transform:translateY(-6px);}
.brand-card__glow{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--trans-md);border-radius:var(--radius-lg);
}
.brand-card:hover .brand-card__glow{opacity:1;}
.brand-card--gebler:hover{border-color:rgba(227,0,34,.4);box-shadow:0 12px 40px rgba(227,0,34,.15);}
.brand-card--gebler .brand-card__glow{background:radial-gradient(ellipse at top left,rgba(227,0,34,.06),transparent);}
.brand-card--pro:hover{border-color:rgba(124,58,237,.4);box-shadow:0 12px 40px rgba(124,58,237,.15);}
.brand-card--pro .brand-card__glow{background:radial-gradient(ellipse at top left,rgba(124,58,237,.06),transparent);}
.brand-card--avant:hover{border-color:rgba(220,38,38,.4);box-shadow:0 12px 40px rgba(220,38,38,.15);}
.brand-card--avant .brand-card__glow{background:radial-gradient(ellipse at top left,rgba(220,38,38,.06),transparent);}

.brand-card--premiur:hover{border-color:rgba(114, 114, 114, 0.4);box-shadow:0 12px 40px rgba(120, 120, 120, 0.15);}
.brand-card--premiur .brand-card__glow{background:radial-gradient(ellipse at top left,rgba(220,38,38,.06),transparent);}

.brand-card__icon{font-size:2.4rem;margin-bottom:16px;}
.brand-card h3{font-family:var(--font-head);font-size:1.8rem;letter-spacing:.05em;margin-bottom:10px;}
.brand-card p{font-size:.88rem;color:var(--grey);line-height:1.5;margin-bottom:24px;}
.brand-card__cta{
  font-family:var(--font-ui);font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--grey);
  transition:color var(--trans);
}
.brand-card:hover .brand-card__cta{color:var(--white);}

/* ══════════════════════════════════════════════════════
   STATS
   ══════════════════════════════════════════════════════ */
.stats-section{
  padding:56px 0;
  background:linear-gradient(135deg,rgba(227,0,34,.06),rgba(124,58,237,.06));
  border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;text-align:center;}
.stat-item{padding:20px;}
.stat-num{
  display:block;font-family:var(--font-head);
  font-size:clamp(2.4rem,5vw,3.5rem);letter-spacing:.02em;
  background:linear-gradient(135deg,var(--red),var(--purple));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.stat-label{
  display:block;font-family:var(--font-ui);font-size:.75rem;
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey);margin-top:4px;
}

/* ══════════════════════════════════════════════════════
   BRAND BANNER
   ══════════════════════════════════════════════════════ */
.brand-banner{
  padding:40px 0 44px;
  background:linear-gradient(180deg,rgba(8,8,8,0) 0%,var(--dark) 100%);
  position:relative;overflow:hidden;
}
.brand-banner::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(ellipse at 60% 0,var(--color-dim,rgba(227,0,34,.08)),transparent 70%);
}
.brand-banner__inner{position:relative;z-index:1;}
.brand-banner__tag{
  font-family:var(--font-ui);font-size:.7rem;font-weight:700;
  letter-spacing:.25em;text-transform:uppercase;
  color:var(--color,var(--red));
  border-left:3px solid var(--color,var(--red));padding-left:10px;
  margin-bottom:12px;
}
.brand-banner h1{
  font-family:var(--font-head);
  font-size:clamp(2.8rem,7vw,5rem);
  letter-spacing:.03em;margin-bottom:8px;
}
.brand-banner p{font-size:1rem;color:var(--grey);}

/* ══════════════════════════════════════════════════════
   SIDEBAR + PRODUCTS LAYOUT
   ══════════════════════════════════════════════════════ */
.products-layout{display:flex;gap:28px;align-items:flex-start;}

.sidebar{
  width:220px;flex-shrink:0;
  background:var(--dark2);border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  position:sticky;top:88px;
}
.sidebar__header{
  font-family:var(--font-ui);font-size:.7rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:rgb(255, 255, 255);
  padding:16px 18px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;gap:8px;
  background: #5308e5;
}
.sidebar__item{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;color:var(--grey);font-size:.85rem;
  font-family:var(--font-ui);font-weight:600;letter-spacing:.03em;
  border-bottom:1px solid var(--border);
  transition:color var(--trans),background var(--trans),border-left var(--trans);
  border-left:3px solid transparent;
}
.sidebar__item:last-child{border-bottom:none;}
.sidebar__item:hover{color:var(--white);background:rgba(255,255,255,.03);}
.sidebar__item.active{
  color:var(--white);
  border-left-color:var(--brand-color,var(--red));
  background:rgba(255,255,255,.04);
}
.sidebar__count{
  font-size:.7rem;background:rgb(83, 83, 83);
  padding:2px 8px;border-radius:10px;color:rgba(245, 240, 235, 0.744);
}

.products-area
/* Search bar */
.searchbar{
  display:flex;gap:12px;margin-bottom:24px;
}
.searchbar__input{
  flex:1;padding:11px 16px;
  background:var(--dark2);border:1px solid var(--border);
  border-radius:8px;color:var(--white);font-size:.9rem;
  font-family:var(--font-body);
  transition:border-color var(--trans);
}
.searchbar__input:focus{outline:none;border-color:rgba(124,58,237,.4);}
.searchbar__input::placeholder{color:var(--grey2);}
.searchbar__btn{
  padding:11px 22px;
  background:linear-gradient(135deg,var(--red),#b8001b);
  color:#fff;border-radius:8px;
  font-family:var(--font-ui);font-size:.82rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  transition:box-shadow var(--trans),transform var(--trans);
}
.searchbar__btn:hover{box-shadow:var(--glow-red);transform:translateY(-1px);}

.results-count{
  font-size:.82rem;color:var(--grey);margin-bottom:20px;
  font-family:var(--font-ui);letter-spacing:.03em;
}
.results-count strong{color:var(--white);}

/* Product grid */
.prod-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:20px;
}

/* Empty state */
.empty-state{
  text-align:center;padding:64px 24px;
  color:var(--grey);
}
.empty-state span{font-size:3rem;display:block;margin-bottom:12px;}

/* ══════════════════════════════════════════════════════
   PRODUCT CARD
   ══════════════════════════════════════════════════════ */
.prod-card{
  background:var(--dark2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);overflow:hidden;
  position:relative;
  transition:border-color var(--trans),box-shadow var(--trans),transform var(--trans-md);
  display:flex;flex-direction:column;
}
.prod-card:hover{
  border-color:rgba(124,58,237,.3);
  box-shadow:0 8px 40px rgba(0,0,0,.5),0 0 0 1px rgba(124,58,237,.1);
  transform:translateY(-4px);
}

/* Tags */
.prod-card__tags{
  position:absolute;top:12px;left:12px;
  display:flex;gap:6px;flex-wrap:wrap;z-index:2;
}
.tag{
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:3px 9px;border-radius:4px;
}
.tag--nuevo{background:var(--red);color:#fff;}
.tag--destacado{background:rgba(124,58,237,.85);color:#fff;}
.tag--oferta{background:#d97706;color:#fff;}

/* Image wrap */
.prod-card__img-wrap{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;background:var(--dark3);flex-shrink:0;
}
.prod-card__img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.23,1,.32,1),filter .3s;
}
.prod-card:hover .prod-card__img{transform:scale(1.06);filter:brightness(.7);}

/* QR overlay on hover */
.prod-card__qr-overlay{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  background:rgba(8,8,8,.88);
  opacity:0;transition:opacity var(--trans);
}
.prod-card:hover .prod-card__qr-overlay{opacity:1;}
.prod-card__qr{width:80px;height:80px;border-radius:6px;border:2px solid var(--red);}
.prod-card__qr-overlay span{
  font-family:var(--font-ui);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--grey);
}
.btn-dl-qr{
  font-family:var(--font-ui);font-size:.65rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 14px;border-radius:5px;
  background:var(--red);color:#fff;
  transition:box-shadow var(--trans);
}
.btn-dl-qr:hover{box-shadow:var(--glow-red);}

/* Familia badge */
.prod-card__familia{
  position:absolute;bottom:10px;right:10px;
  font-family:var(--font-ui);font-size:.6rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  background:rgba(8,8,8,.8);backdrop-filter:blur(6px);
  border:1px solid var(--border2);padding:3px 10px;border-radius:4px;
  color:var(--grey);
}

/* Card body */
.prod-card__body{padding:18px;flex:1;display:flex;flex-direction:column;}
.prod-card__id{
  font-family:var(--font-ui);font-size:.65rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;
  color:var(--grey2);margin-bottom:4px;
}
.prod-card__name{
  font-family:var(--font-head);font-size:1.35rem;letter-spacing:.02em;
  margin-bottom:8px;line-height:1.15;
}
.prod-card__desc{
  font-size:.82rem;color:var(--grey);line-height:1.5;
  flex:1;margin-bottom:16px;
}

.prod-card__actions{display:flex;gap:8px;align-items:center;}

/* Buttons */
.btn{
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 16px;border-radius:7px;
  transition:box-shadow var(--trans),transform var(--trans),background var(--trans);
  display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-1px);}
.btn--ver{
  flex:1;justify-content:center;
  background:linear-gradient(135deg,rgba(124, 58, 237, 0.667),rgba(124,58,237,.08));
  border:1px solid rgba(124,58,237,.35);color:var(--white);
}
.btn--ver:hover{background:linear-gradient(135deg,rgba(124,58,237,.35),rgba(124,58,237,.15));box-shadow:var(--glow-pur);}
.btn--cat{
  flex:1;justify-content:center;
  background:linear-gradient(135deg,rgba(227, 0, 34, 0.812),rgba(227,0,34,.06));
  border:1px solid rgba(227,0,34,.3);color:var(--white);
}
.btn--cat:hover{background:linear-gradient(135deg,rgba(227,0,34,.28),rgba(227,0,34,.12));box-shadow:var(--glow-red);}
.btn--qr{
  width:38px;height:38px;padding:0;justify-content:center;
  border:1px solid var(--border2);border-radius:7px;color:var(--grey);
  flex-shrink:0;
}
.btn--qr:hover{border-color:rgba(227,0,34,.4);color:var(--red);box-shadow:var(--glow-red);}

/* ══════════════════════════════════════════════════════
   PÁGINA PRODUCTO
   ══════════════════════════════════════════════════════ */
.breadcrumb{
  padding:16px 0;
  border-bottom:1px solid var(--border);
  background:var(--dark2);
}
.breadcrumb .container{
  font-family:var(--font-ui);font-size:.75rem;
  font-weight:600;letter-spacing:.04em;
  display:flex;align-items:center;gap:8px;color:var(--grey2);
}
.breadcrumb a{color:var(--grey);transition:color var(--trans);}
.breadcrumb a:hover{color:var(--red);}
.breadcrumb span:last-child{color:var(--white);}

.producto-page{padding:52px 0 80px;}
.producto-layout{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;align-items:flex-start;
}

/* ── Galería ──────────────────────────────── */
.producto-gallery{}
.gallery-main-wrap{
  position:relative;
  border-radius:var(--radius-lg);overflow:hidden;
  background:var(--dark2);border:1px solid var(--border);
  aspect-ratio:4/3;margin-bottom:14px;
}
.gallery-main__img{
  width:100%;height:100%;object-fit:cover;
  transition:opacity .25s;
}
.gallery-zoom-hint{
  position:absolute;bottom:14px;right:14px;
  font-family:var(--font-ui);font-size:.68rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 12px;border-radius:5px;
  background:rgba(8,8,8,.8);backdrop-filter:blur(6px);
  border:1px solid var(--border2);color:var(--grey);
  pointer-events:none;
}
.gallery-thumbs{
  display:flex;gap:10px;flex-wrap:wrap;
}
.gallery-thumb{
  width:72px;height:72px;border-radius:8px;overflow:hidden;cursor:pointer;
  border:2px solid var(--border);
  transition:border-color var(--trans),transform var(--trans);
  flex-shrink:0;padding:0;
}
.gallery-thumb img{width:100%;height:100%;object-fit:cover;}
.gallery-thumb:hover{border-color:rgba(227,0,34,.4);transform:scale(1.05);}
.gallery-thumb.active{border-color:var(--red);box-shadow:0 0 12px rgba(227,0,34,.3);}

/* ── Info derecha ─────────────────────────── */
.detail-brand-badge{
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;
  margin-bottom:8px;
}
.producto-sku{
  font-family:var(--font-ui);font-size:.75rem;font-weight:700;
  letter-spacing:.15em;color:rgba(249, 249, 249, 0.93);margin-bottom:8px;
}
.producto-name{
  font-family:var(--font-head);
  font-size:clamp(2.2rem,4.5vw,3.5rem);
  letter-spacing:.03em;line-height:1.05;margin-bottom:16px;
}
.producto-desc{
  font-size:.95rem;color:var(--grey);line-height:1.65;margin-bottom:24px;
}
.detail-price{
  font-family:var(--font-head);font-size:2.8rem;
  letter-spacing:.03em;
  color:var(--red);margin-bottom:28px;
  text-shadow:0 0 30px rgba(227,0,34,.35);
}

/* ── Specs grid ───────────────────────────── */
.detail-specs-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:1px;margin-bottom:28px;
  border:1px solid var(--border2);border-radius:var(--radius);
  overflow:hidden;background:var(--border2);
}
.spec-row{
  background:var(--dark2);padding:16px 18px;
  display:flex;flex-direction:column;gap:4px;
}
.spec-key{
  font-family:var(--font-ui);font-size:.65rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--grey2);
}
.spec-val{
  font-family:var(--font-ui);font-size:1.05rem;font-weight:700;
  color:var(--white);letter-spacing:.02em;
}

/* ── QR ficha técnica ─────────────────────── */
.detail-qr-section{
  display:flex;align-items:center;gap:20px;
  background:var(--dark2);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);padding:20px 24px;
  margin-bottom:28px;
}
.detail-qr-section p{
  font-size:.85rem;color:var(--grey);line-height:1.5;
  font-family:var(--font-ui);
}
.detail-qr-section p strong{color:var(--white);}
.detail-qr-section .qr-label{
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--red);margin-bottom:4px;
}
.detail-qr-img{
  width:100px;height:100px;border-radius:8px;
  border:2px solid rgba(227,0,34,.4);flex-shrink:0;
}
.qr-dl-btn{
  display:inline-flex;align-items:center;gap:6px;margin-top:8px;
  font-family:var(--font-ui);font-size:.65rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:5px 13px;border-radius:5px;
  background:rgba(227,0,34,.15);border:1px solid rgba(227,0,34,.3);color:var(--white);
  transition:background var(--trans),box-shadow var(--trans);
}
.qr-dl-btn:hover{background:rgba(227,0,34,.28);box-shadow:var(--glow-red);}

/* ── Acciones ─────────────────────────────── */
.detail-actions{display:flex;gap:12px;flex-wrap:wrap;}
.btn-wa{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-ui);font-size:.82rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:14px 24px;border-radius:8px;
  background:linear-gradient(135deg,#e44d26,#e30022);
  color:#fff;
  transition:box-shadow var(--trans),transform var(--trans);
}
.btn-wa:hover{box-shadow:0 0 28px rgba(227,0,34,.4);transform:translateY(-2px);}
.btn-cotiza{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--font-ui);font-size:.82rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:14px 24px;border-radius:8px;
  background:#8648c83b;
  border:1.5px solid rgb(83, 3, 163);color:var(--white);
  transition:border-color var(--trans),box-shadow var(--trans),transform var(--trans);
}
.btn-cotiza:hover{border-color:rgba(124,58,237,.5);box-shadow:var(--glow-pur);transform:translateY(-2px);}

/* Doc links (catálogo + ficha técnica) */
.detail-docs{
  display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;
}
.btn-doc{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-ui);font-size:.72rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;
  padding:9px 18px;border-radius:7px;
  border:1px solid var(--border2);color:var(--grey);
  transition:color var(--trans),border-color var(--trans),box-shadow var(--trans);
}
.btn-doc:hover{color:var(--white);border-color:rgba(227,0,34,.35);box-shadow:var(--glow-red);}

/* Related section */
.related-section{margin-top:72px;}
.related-section h3{
  font-family:var(--font-head);font-size:2rem;letter-spacing:.03em;
  margin-bottom:28px;
}

/* ══════════════════════════════════════════════════════
   QR MODAL
   ══════════════════════════════════════════════════════ */
.qr-modal{
  position:fixed;inset:0;z-index:9000;
  background:rgba(0,0,0,.85);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;
}
.qr-modal.open{display:flex;}
.qr-modal__box{
  background:var(--dark2);border:1px solid rgba(124,58,237,.25);
  border-radius:var(--radius-lg);padding:36px;
  text-align:center;max-width:360px;width:90%;
  box-shadow:0 24px 80px rgba(0,0,0,.8);
  animation:modalIn .25s cubic-bezier(.23,1,.32,1);
}
@keyframes modalIn{from{opacity:0;transform:scale(.9);}to{opacity:1;transform:scale(1);}}
.qr-modal__close{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.06);color:var(--white);font-size:1rem;
}
.qr-modal__close:hover{background:rgba(227,0,34,.2);color:var(--red);}
.qr-modal__box h3{
  font-family:var(--font-head);font-size:1.6rem;letter-spacing:.05em;
  margin-bottom:20px;
}
.qr-modal__label{
  font-family:var(--font-ui);font-size:.62rem;font-weight:700;
  letter-spacing:.18em;text-transform:uppercase;color:var(--red);
  margin-bottom:12px;
}
.qr-modal__img{
  width:180px;height:180px;border-radius:10px;
  border:2px solid rgba(227,0,34,.3);margin:0 auto 16px;
}
.qr-modal__hint{font-size:.82rem;color:var(--grey);margin-bottom:16px;}

/* ══════════════════════════════════════════════════════
   FOOTER
   ══════════════════════════════════════════════════════ */
/* ===== FOOTER ===== */
.footer {
  position: relative;
  background: #09000d;
  color: #ffffff;
  padding: 4rem 0 0;
  overflow: hidden;
  font-size: 14px;
}

/* Partículas canvas */
#footerParticles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Glow superior */
.footer__glow {
  position: absolute;
  top: -80px;
  left: 50%;
  transform: translateX(-50%);
  width: 600px;
  height: 200px;
  background: radial-gradient(ellipse, rgba(254, 14, 210, 0.12) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.footer .container {
  position: relative;
  z-index: 1;
}

/* Grid principal */
.footer__grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr 1.3fr;
  gap: 2rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

/* Brand */
.footer__brand p {
  margin: 1rem 0 1.5rem;
  line-height: 1.7;
  color: #ffffff;
  font-size: 13.5px;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.footer__logo .logo-g   { color: #ff0019; }
.footer__logo .logo-rest { color: #fff; }

/* Social */
.footer__social {
  display: flex;
  gap: 10px;
}

.fsoc {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.904);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff0000;
  text-decoration: none;
  transition: border-color 0.3s, color 0.3s, background 0.3s;
}

.fsoc:hover {
  border-color: #ff0808;
  color: #00e6b4;
  background: rgba(230, 0, 176, 0.08);
}

/* Columnas */
.footer__col h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer__col-line {
  display: inline-block;
  width: 22px;
  height: 2px;
  background: #e60000;
  border-radius: 2px;
  flex-shrink: 0;
}

.footer__col a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #7a8fa0;
  text-decoration: none;
  padding: 5px 0;
  font-size: 13.5px;
  transition: color 0.25s, gap 0.25s;
}

.footer__col a span {
  color: #ffffff;
  font-size: 16px;
  transition: transform 0.25s;
}

.footer__col a:hover {
  color: #fff;
  gap: 12px;
}

.footer__col a:hover span {
  transform: translateX(3px);
}

/* Contacto items */
.footer__contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7a8fa0;
  margin: 0 0 10px;
  font-size: 13.5px;
}

.footer__contact-item svg {
  color: #ffffff;
  flex-shrink: 0;
}

/* Bottom bar */
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 0;
  font-size: 12.5px;
  color: #3d5060;
}

/* WhatsApp btn */
.whatsapp-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #25d366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
  z-index: 999;
  transition: transform 0.2s, box-shadow 0.2s;
}

.whatsapp-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 22px rgba(37, 211, 102, 0.55);
}

/* Responsive */
@media (max-width: 900px) {
  .footer__grid {
    grid-template-columns: 1fr 1fr;
  }
  .footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .footer__grid {
    grid-template-columns: 1fr;
  }
  .footer__bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
  }
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media(max-width:1024px){
  .brands-grid{grid-template-columns:1fr 1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .products-layout{flex-direction:column;}
  .sidebar{width:100%;position:static;}
  .sidebar{display:flex;flex-wrap:wrap;gap:0;border-radius:var(--radius);}
  .sidebar__item{flex:1;min-width:100px;text-align:center;justify-content:center;}
  .sidebar__header{width:100%;}
  .footer__grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:768px){
  .header__nav,.btn-header-cta{display:none;}
  .hamburger{display:flex;}
  .brands-grid{grid-template-columns:1fr;}
  .stats-grid{grid-template-columns:repeat(2,1fr);}
  .producto-layout{grid-template-columns:1fr;gap:32px;}
  .detail-specs-grid{grid-template-columns:1fr 1fr;}
  .footer__grid{grid-template-columns:1fr;}
  .footer__bottom{flex-direction:column;text-align:center;}
}
@media(max-width:480px){
  .prod-grid{grid-template-columns:1fr;}
  .detail-actions{flex-direction:column;}
  .btn-wa,.btn-cotiza{flex:none;width:100%;}
}


/* ===== CERTIFICADOS ===== */

.cert-hero{
  position:relative;
  overflow:hidden;
  padding:120px 0 90px;
  background:#0d0d0d;
}

.cert-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right,#7c3aed55,transparent 40%),
    radial-gradient(circle at bottom left,#e3002255,transparent 40%);
  opacity:.9;
}

.cert-hero__content{
  position:relative;
  z-index:2;
  text-align:center;
}

.cert-hero h1{
  font-size:clamp(3rem,7vw,6rem);
  color:#fff;
  margin-bottom:20px;
  font-weight:700;
}

.cert-hero p{
  max-width:760px;
  margin:auto;
  color:#cfcfcf;
  font-size:1.1rem;
  line-height:1.7;
}

.text-gradient{
  background:linear-gradient(90deg,#7c3aed,#e30022);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}

.cert-section{
  padding:90px 0;
  background:#080808;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  gap:28px;
}

.cert-modern-card{
  position:relative;
  overflow:hidden;
  padding:32px;
  border-radius:28px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
  transition:.35s ease;
}

.cert-modern-card:hover{
  transform:translateY(-8px);
  border-color:#7c3aed;
  box-shadow:0 20px 50px rgba(124,58,237,.25);
}

.cert-modern-card__glow{
  position:absolute;
  width:180px;
  height:180px;
  background:#7c3aed22;
  border-radius:50%;
  top:-80px;
  right:-80px;
  filter:blur(40px);
}

.cert-modern-card__top{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}

.cert-modern-card__icon{
  font-size:3rem;
}

.cert-badge{
  background:#ffffff10;
  border:1px solid #ffffff20;
  padding:8px 14px;
  border-radius:999px;
  color:#fff;
  font-size:.85rem;
}

.cert-modern-card h3{
  color:#fff;
  font-size:1.5rem;
  margin-bottom:14px;
}

.cert-modern-card p{
  color:#bdbdbd;
  line-height:1.7;
  margin-bottom:24px;
}

.cert-line{
  width:100%;
  height:1px;
  background:linear-gradient(to right,#7c3aed,transparent);
  margin-bottom:18px;
}

.cert-status{
  color:#8bffb0;
  font-size:.95rem;
  font-weight:600;
}

/* ===== CONTACTO ===== */

.contact-hero{
  position:relative;
  overflow:hidden;
  padding:120px 0 90px;
  background:#080808;
}

.contact-hero__bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at top right,#e3002244,transparent 40%),
    radial-gradient(circle at bottom left,#7c3aed44,transparent 40%);
}

.contact-hero__content{
  position:relative;
  z-index:2;
  text-align:center;
}

.contact-hero h1{
  font-size:clamp(3rem,7vw,6rem);
  color:#fff;
  margin-bottom:20px;
}

.contact-hero p{
  color:#cfcfcf;
  max-width:760px;
  margin:auto;
  line-height:1.8;
}

.contact-team-section{
  padding:90px 0;
  background:#0b0b0b;
}

.contact-team-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;
}

.contact-card{
  position:relative;
  overflow:hidden;
  padding:32px;
  border-radius:28px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
  text-align:center;
  transition:.35s ease;
}

.contact-card:hover{
  transform:translateY(-10px);
  border-color:#e30022;
  box-shadow:0 20px 40px rgba(227,0,34,.2);
}

.contact-card__glow{
  position:absolute;
  width:180px;
  height:180px;
  background:#e3002222;
  border-radius:50%;
  top:-70px;
  right:-70px;
  filter:blur(40px);
}

.contact-group-title{
  color:#fff;
  font-size:2rem;
  margin:50px 0 30px;
  font-weight:700;
}


.contact-avatar{
  width:88px;
  height:88px;
  margin:auto;
  margin-bottom:18px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid rgba(255,255,255,.12);
  background:#111;
}

.contact-zone{
  color:#ff6b81;
  font-size:.9rem;
  letter-spacing:1px;
}

.contact-card h3{
  color:#fff;
  margin:10px 0;
}

.contact-phone{
  color:#bdbdbd;
}

.contact-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:22px;
}

.contact-btn{
  width:48px;
  height:48px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#ffffff10;
  border:1px solid #ffffff15;
  text-decoration:none;
  transition:.3s;
  font-size:1.1rem;
}

.contact-btn:hover{
  transform:translateY(-4px);
  background:#e30022;
}

.contact-btn--wa:hover{
  background:#25d366;
}

.contact-form-section{
  padding:90px 0;
  background:#070707;
}

.contact-form-card{
  max-width:950px;
  margin:auto;
  padding:48px;
  border-radius:32px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.08);
}

.modern-contact-form{
  margin-top:40px;
}

.form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.form-group{
  margin-bottom:24px;
}

.form-group label{
  display:block;
  margin-bottom:10px;
  color:#ffffff;
  font-weight:600;
}

.form-group input,
.form-group select,
.form-group textarea{
  width:100%;
  padding:16px 18px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.1);
  background:#ffffff08;
  color:#3a3a3a;
  outline:none;
  transition:.3s;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
  border-color:#e30022;
  box-shadow:0 0 0 4px rgba(227,0,34,.15);
}

.modern-submit-btn{
  padding:18px 34px;
  border:none;
  border-radius:18px;
  background:linear-gradient(135deg,#e30022,#7c3aed);
  color:#fff;
  font-weight:700;
  cursor:pointer;
  transition:.3s;
}

.modern-submit-btn:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 30px rgba(227,0,34,.3);
}

.contact-alert{
  padding:18px 24px;
  border-radius:16px;
  margin-top:20px;
  margin-bottom:24px;
}

.contact-alert.success{
  background:#0f5132;
  color:#d1ffe5;
}

.contact-alert.error{
  background:#5b1111;
  color:#ffd4d4;
}
@media(max-width:768px){
  .form-grid{
    grid-template-columns:1fr;
  }
  .contact-form-card{
    padding:28px;
  }
}
.header__logo-img {
  height: 60px;        /* ajusta a tu gusto */
  width: auto;
  display: block;
  object-fit: contain;
}

.hero__brand-logo {
    display: block;        /* saca del flujo inline */
    margin: 0;             /* quita cualquier margin: auto que lo centre */
    max-height: 200px;      /* ajusta el tamaño a tu gusto */
    width: auto;
    object-fit: contain;
}

.contact-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* ══ Nosotros ══════════════════════════════════════════════ */
.nosotros-section {
    background: #0a0a0a;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}

/* luz ambiental decorativa */
.nosotros-section::before {
    content: '';
    position: absolute;
    top: -120px;
    left: -120px;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(220,30,30,.12) 0%, transparent 70%);
    pointer-events: none;
}

.nosotros-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* ── Izquierda ── */
.nosotros-desc {
    color: #bbb;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 2.5rem;
}

.nosotros-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.nosotros-stat {
    background: #141414;
    border: 1px solid #2a2a2a;
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    transition: border-color .3s;
}

.nosotros-stat:hover {
    border-color: #dc1e1e;
}

.nosotros-stat__num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: #dc1e1e;
    line-height: 1;
    margin-bottom: .35rem;
}

.nosotros-stat__label {
    font-size: .8rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: .06em;
}

/* ── Derecha (certs) ── */
.nosotros-certs-title {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: #555;
    margin-bottom: 1.25rem;
}

.nosotros-certs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.nosotros-cert {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    transition: border-color .3s, transform .3s;
}

.nosotros-cert:hover {
    border-color: #dc1e1e44;
    transform: translateX(4px);
}

.nosotros-cert__icon {
    font-size: 1.6rem;
    line-height: 1;
    flex-shrink: 0;
    margin-top: 2px;
}

.nosotros-cert__body {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.nosotros-cert__body strong {
    color: #e8e8e8;
    font-size: .95rem;
}

.nosotros-cert__body p {
    color: #777;
    font-size: .82rem;
    line-height: 1.5;
    margin: 0;
}

.nosotros-cert__year {
    font-size: .72rem;
    color: #dc1e1e;
    font-weight: 600;
    letter-spacing: .05em;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .nosotros-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 480px) {
    .nosotros-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
}

/* ══ Nosotros ══════════════════════════════════════════════ */
.nosotros-section {
    background: #0a0a0a;
    padding: 100px 0;
}

.nosotros-desc {
    color: #aaa;
    font-size: 1.05rem;
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto 3.5rem;
    text-align: center;
}

.nosotros-valores {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.nosotros-valor {
    background: #111;
    border: 1px solid #1e1e1e;
    border-radius: 14px;
    padding: 2rem 1.5rem;
    text-align: center;
    transition: border-color .3s, transform .3s;
}

.nosotros-valor:hover {
    border-color: #dc1e1e55;
    transform: translateY(-4px);
}

.nosotros-valor__icon {
    font-size: 2.2rem;
    display: block;
    margin-bottom: 1rem;
}

.nosotros-valor h4 {
    color: #f0f0f0;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: .6rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.nosotros-valor p {
    color: #777;
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 900px) {
    .nosotros-valores { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .nosotros-valores { grid-template-columns: 1fr; }
}
/* ══ Scenes ════════════════════════════════════════════════ */
.scenes-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

.scenes-bg {
    position: absolute;
    inset: 0;
}

.scenes-bg__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity .7s ease;
}

.scenes-bg__img.active {
    opacity: 1;
}

/* miniaturas */
.scenes-thumbs {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 1rem;
    z-index: 10;
}

.scenes-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
}

.scenes-thumb img {
    width: 120px;
    height: 80px;
    object-fit: cover;
    border-radius: 8px;
    border: 3px solid transparent;
    transition: border-color .3s, transform .3s;
}

.scenes-thumb span {
    color: #fff;
    font-size: .85rem;
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(0,0,0,.6);
    transition: color .3s;
}

.scenes-thumb.active img,
.scenes-thumb:hover img {
    border-color: #dc1e1e;
    transform: translateY(-4px);
}

.scenes-thumb.active span {
    color: #dc1e1e;
}

@media (max-width: 600px) {
    .scenes-thumb img { width: 80px; height: 55px; }
}

.brand-card__logo {
    display: block;
    max-height: 100px;
    width: auto;
    object-fit: contain;
    margin: 0 0 .75rem 0;
}

/* ══ SearchBar ═════════════════════════════════════════════ */
.search-bar-wrap {
    width: 100%;
    max-width: 680px;
    margin: 0 auto 2.5rem;
}

.search-bar__inner {
    display: flex;
    align-items: center;
    gap: 0;
    background: #111;
    border: 1px solid #2a2a2a;
    border-radius: 14px;
    padding: 6px 6px 6px 18px;
    transition: border-color .25s, box-shadow .25s;
}

.search-bar__inner:focus-within {
    border-color: #dc1e1e;
    box-shadow: 0 0 0 3px rgba(220, 30, 30, .12);
}

.search-bar__icon {
    color: #555;
    flex-shrink: 0;
    transition: color .25s;
}

.search-bar__inner:focus-within .search-bar__icon {
    color: #dc1e1e;
}

.search-bar__input {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: #f0f0f0;
    font-size: .95rem;
    padding: .6rem .75rem;
    min-width: 0;
}

.search-bar__input::placeholder {
    color: #444;
}

.search-bar__clear {
    color: #555;
    font-size: .85rem;
    padding: 0 .5rem;
    text-decoration: none;
    transition: color .2s;
    flex-shrink: 0;
}

.search-bar__clear:hover {
    color: #dc1e1e;
}

.search-bar__btn {
    background: #dc1e1e;
    color: #fff;
    border: none;
    border-radius: 10px;
    padding: .6rem 1.4rem;
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .04em;
    cursor: pointer;
    flex-shrink: 0;
    transition: background .2s, transform .15s;
}

.search-bar__btn:hover {
    background: #b81818;
    transform: scale(1.03);
}

@media (max-width: 480px) {
    .search-bar__btn { padding: .6rem 1rem; }
}

/* === Catalog Section === */
.catalog-section {
  padding: 5rem 0;
}

.catalog-layout {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2.5rem;
}

/* Panel izquierdo */
.catalog-panel {
  flex: 0 0 320px;
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid #e0e0e0;
}

.catalog-panel__header {
  font-size: 13px;
  letter-spacing: 1px;
  color: #555;
  margin-bottom: 1.2rem;
}

.catalog-panel__cover {
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}

.catalog-panel__cover img {
  width: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.btn-download {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #1a56db;
  color: #fff;
  padding: 0.85rem 1.5rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: background 0.2s;
}

.btn-download:hover {
  background: #1341b0;
}

/* Divisor central */
.catalog-divider {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding-top: 2rem;
}

.divider-line {
  width: 1px;
  height: 80px;
  background: #ccc;
}

.divider-star {
  color: #f5a623;
  font-size: 20px;
}

/* Grid de marcas aliadas */
.catalog-brands {
  flex: 1;
}

.catalog-brands__header {
  font-size: 13px;
  letter-spacing: 1px;
  color: #555;
  margin-bottom: 1.2rem;
}

.brands-allied-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.brand-allied-card {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 90px;
  transition: box-shadow 0.2s;
}

.brand-allied-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.brand-allied-card img {
  max-width: 100%;
  max-height: 60px;
  object-fit: contain;
}

/* Dot indicador */
.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1a56db;
  margin-right: 6px;
}

.dot--gold {
  background: #f5a623;
}

/* Responsive */
@media (max-width: 900px) {
  .catalog-layout {
    flex-direction: column;
  }
  .catalog-panel {
    flex: none;
    width: 100%;
  }
  .catalog-divider {
    flex-direction: row;
    padding-top: 0;
  }
  .divider-line {
    width: 80px;
    height: 1px;
  }
  .brands-allied-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Familia scroll */
.familias-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 1.25rem;
  scrollbar-width: thin;
}
.familia-pill {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid #ccc;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  transition: opacity .2s;
  white-space: nowrap;
}
.familia-pill:hover { opacity: .8; }

/* Paginación */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2rem;
  flex-wrap: wrap;
}
.pagination__btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: 1.5px solid #ccc;
  font-size: 13px;
  text-decoration: none;
  color: inherit;
  background: transparent;
  transition: opacity .2s;
}
.pagination__btn:hover { opacity: .7; }
.pagination__btn--disabled {
  opacity: .35;
  cursor: default;
  pointer-events: none;
}

}


/* Familia scroll */
.familias-scroll {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  margin-bottom: 1.25rem;
  scrollbar-width: thin;
}
.familia-pill {
  flex-shrink: 0;
  padding: 6px 16px;
  border-radius: 999px;
  border: 1.5px solid rgba(255,255,255,.15);
  font-size: 13px;
  text-decoration: none;
  color: var(--grey);
  transition: opacity .2s;
  white-space: nowrap;
  font-family: var(--font-ui);
  font-weight: 600;
  letter-spacing: .04em;
}
.familia-pill:hover { opacity: .8; }

/* Paginación */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-top: 2.5rem;
  flex-wrap: wrap;
}
.pagination__btn {
  padding: 8px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.12);
  font-size: .78rem;
  font-family: var(--font-ui);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grey);
  background: var(--dark2);
  transition: color var(--trans), border-color var(--trans), box-shadow var(--trans);
}
.pagination__btn:hover {
  color: var(--white);
  border-color: rgba(124,58,237,.4);
  box-shadow: var(--glow-pur);
}
.pagination__btn--disabled {
  opacity: .3;
  cursor: default;
  pointer-events: none;
}