/* =========================================================
   RESET GLOBAL
   ========================================================= */
*{margin:0;padding:0;box-sizing:border-box;font-family:Arial,sans-serif}
:root{
  --header-h:64px;
  --maxw:1200px;
  --pad:clamp(16px,4vw,56px);
}

/* Contenido “normal” centrado */
.container{max-width:var(--maxw);margin:0 auto;padding:0 16px}

/* Secciones full-bleed que deben ocupar de borde a borde */
.fullbleed{
  width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
}

/* Si tu navbar es fijo, déjalo por encima sin empujar nada */
header.nav-global{z-index:2147483000;position:sticky;top:0}
header.nav-global .brand-logo {
  height: 38px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: none !important;       /* evita que se invierta en el navbar */
  mix-blend-mode: normal;
  margin-top: 3px;               /* lo baja visualmente un poco */
}

/* =========================================================
   HERO (CARRUSEL) – estable, full screen
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  height:100svh; min-height:500px; background:#000; color:#fff;
}
.hero .slide{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .55s ease}
.hero .slide.active{opacity:1;pointer-events:auto}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero .overlay{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.25) 40%,rgba(0,0,0,.6) 100%);
}
.hero .content{
  position:absolute;left:0;right:0;bottom:var(--pad);padding:0 var(--pad);
  max-width:var(--maxw);margin-inline:auto;text-align:right;z-index:2;
  opacity:0;transform:translateY(6px);transition:opacity .45s ease,transform .45s ease;
}
.hero .slide.active .content{opacity:1;transform:none}
.hero .title{margin:0 0 10px;line-height:.92;font-weight:900;font-size:clamp(28px,7vw,76px);text-transform:uppercase;text-shadow:0 2px 10px rgba(0,0,0,.45)}
.hero .sub{margin:0 0 16px;font-size:clamp(14px,2.2vw,22px);color:#e8e8e8}
.hero .cta{display:inline-grid;place-items:center;height:46px;padding:0 20px;border-radius:999px;background:#fff;color:#111;font-weight:800;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.25);transition:transform .18s ease,opacity .18s ease}
.hero .cta:hover{transform:translateY(-1px);opacity:.92}

/* Flechas + dots */
.hero .arrow{
  position:absolute;top:50%;translate:0 -50%;width:44px;height:44px;border:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;background:rgba(255,255,255,.9);color:#000;box-shadow:0 8px 26px rgba(0,0,0,.25);z-index:3
}
.hero .arrow.prev{left:var(--pad)} .hero .arrow.next{right:var(--pad)}
.hero .dots{position:absolute;left:50%;bottom:clamp(10px,2.5vw,22px);translate:-50% 0;display:flex;gap:8px;z-index:3}
.hero .dots button{width:10px;height:10px;border:0;border-radius:50%;background:rgba(255,255,255,.55);transition:transform .2s,background .2s}
.hero .dots button[aria-selected="true"]{background:#fff;transform:scale(1.2)}
.hero .progress{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.18)}
.hero .progress span{display:block;height:100%;width:0%;background:#fff}

/* Mobile: texto centrado (evita solapes) */
@media (max-width: 768px){
  .hero .content{text-align:center;padding:0 24px}
  .hero .title{font-size:clamp(24px,8vw,42px)}
  .hero .sub{font-size:clamp(13px,3vw,18px)}
  .hero .cta{height:42px;padding:0 18px}
}

/* =========================================================
   APARTADO PRODUCTOS
   ========================================================= */
.productos-section{padding:60px 16px;background:#111;color:#fff;text-align:center}
.productos-section .productos-container{display:flex;gap:24px;align-items:center;justify-content:space-between;max-width:var(--maxw);margin:0 auto;flex-wrap:wrap}
.productos-text{flex:1;min-width:280px;padding:0 8px}
.productos-text h2{font-size:clamp(26px,4vw,40px);font-weight:800;margin-bottom:8px}
.productos-text p{font-size:clamp(14px,2.2vw,20px);opacity:.9;margin-bottom:18px}
.productos-buttons{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.btn-producto{padding:12px 24px;background:#fff;color:#000;border-radius:999px;font-weight:800;text-decoration:none;transition:.25s}
.btn-producto:hover{background:#000;color:#fff}
.productos-img{flex:1;min-width:280px;text-align:center}
.productos-img img{max-width:100%;height:auto;border-radius:14px}

/* =========================================================
   COLLAGE (3 piezas) – sin desbordes ni saltos
   ========================================================= */
.collage-band{padding:16px}
.collage-3{
  max-width:var(--maxw);margin:0 auto;display:grid;gap:16px;
  grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;
}
.collage-item{position:relative;display:block;border-radius:8px;overflow:hidden;background:#eee}
.collage-item img{width:100%;height:100%;object-fit:cover;display:block}
.item-a{grid-column:1;grid-row:1 / span 2;aspect-ratio:1/1}
.item-b{grid-column:2;grid-row:1;aspect-ratio:1/1}
.item-c{grid-column:2;grid-row:2;aspect-ratio:1/1}

/* Tablet: grande arriba, dos abajo */
@media (max-width: 900px){
  .collage-3{grid-template-columns:1fr 1fr;grid-template-rows:auto}
  .item-a{grid-column:1 / -1;grid-row:1;aspect-ratio:16/9}
  .item-b{grid-column:1;grid-row:2}
  .item-c{grid-column:2;grid-row:2}
}
/* Móvil: una columna */
@media (max-width: 560px){
  .collage-3{grid-template-columns:1fr}
  .item-a,.item-b,.item-c{grid-column:1;aspect-ratio:16/9}
}

/* =========================================================
   GALERÍA
   ========================================================= */
.galeria-fotos{padding:40px 16px;background:#fff;text-align:center;margin-bottom:20px}
.galeria-container{display:flex;gap:20px;flex-wrap:wrap;max-width:var(--maxw);margin:0 auto;justify-content:space-between}
.galeria-item{flex:1;min-width:260px;max-width:33%}
.galeria-item img{width:100%;height:auto;border-radius:14px}
@media (max-width:768px){.galeria-item{max-width:100%}}

/* =========================================================
   VIDEO ENTRE CATEGORÍAS Y FOOTER – fullbleed estable
   ========================================================= */
.video-container{
  width:100%;max-width:100vw;overflow:hidden;display:flex;justify-content:center;align-items:center;
  height: clamp(280px, 56vw, 520px); /* altura fluida */
  margin: 0; padding: 0;
}
.video-container video{
  width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;
}

/* =========================================================
   CATEGORÍAS
   ========================================================= */
.categorias{
  min-height:calc(100vh - var(--header-h));
  display:flex;justify-content:center;align-items:center;flex-wrap:wrap;
  gap:clamp(16px,4vw,40px);padding:clamp(16px,5vw,40px);background:#f9f9f9
}
.categoria-card .card{
  width:clamp(240px,42vw,320px);background:#fff;border-radius:15px;overflow:hidden;text-align:center;
  box-shadow:0 2px 10px rgba(0,0,0,.1);transition:transform .3s,box-shadow .3s
}
.categoria-card .card:hover{transform:translateY(-8px);box-shadow:0 8px 22px rgba(0,0,0,.15)}
.categoria-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.categoria-card h3{padding:clamp(12px,3.5vw,20px);font-size:clamp(16px,2.8vw,20px);font-weight:800;letter-spacing:2px;color:#000}

/* =========================================================
   MARCAS
   ========================================================= */
.brands{background:#111;color:#000;padding:clamp(32px,6vw,72px) 16px}
.brands-title{font-size:clamp(1.5rem,3vw,2.5rem);color:#fff;text-align:center;margin-bottom:24px;font-weight:700;letter-spacing:2px}
.brands-wrap{max-width:var(--maxw);margin:0 auto;display:grid;gap:clamp(16px,3vw,28px);grid-template-columns:repeat(3,minmax(220px,1fr))}
.brand-card{background:#fff;border-radius:16px;padding:clamp(18px,3.5vw,28px);display:grid;place-items:center;transition:transform .25s,box-shadow .25s}
.brand-card:hover{transform:translateY(-4px);box-shadow:0 10px 20px rgba(0,0,0,.15)}
.brand-logo{width:clamp(90px,18vw,160px);height:auto;filter:invert(1);opacity:.95;margin-bottom:10px}
.brand-card h3{margin:8px 0 2px;font-weight:800}
.brand-tag{color:#000;font-size:clamp(.95rem,1.8vw,1.1rem)}
@media (max-width:820px){.brands-wrap{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.brands-wrap{grid-template-columns:1fr}}

/* =========================================================
   PEQUEÑOS FIXES
   ========================================================= */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
html,body{overflow-x:hidden}