/* =========================================================
   RESET + VARIABLES (responsive unificado)
   ========================================================= */
*{ margin:0; padding:0; box-sizing:border-box; font-family: Arial, sans-serif; }
:root{
  /* layout */
  --container-max:1200px;
  --pad: clamp(16px, 4vw, 56px);
  --gap: clamp(12px, 2.5vw, 24px);

  /* tipografía */
  --title: clamp(2rem, 5vw, 5rem);
  --sub: clamp(1rem, 1.6vw, 1.25rem);

  /* hero */
  --hero-h: min(92vh, 760px);
  --cta-h: 46px;
  --fade-initial: 1.2s;
  --fade-slide: .55s;
  --font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bg:#fafafa;
  --fg:#111;
}

html,body{
  margin:0; padding:0;
  font-family:var(--font);
  color:var(--fg);
  background:var(--bg);
}
main{ margin-top:0; } /* ← no empujar; el navbar global ya es sticky */

/* =========================================================
   UTILIDADES
   ========================================================= */
.container{ max-width:var(--container-max); margin-inline:auto; padding-inline:var(--pad); }
.muted{ color:#666; }

/* =========================================================
   HERO (carrusel con crossfade)
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  height:var(--hero-h); background:#000; color:#fff;
  animation: heroIntro var(--fade-initial) ease both;
  margin-top:0 !important; /* por si algún estilo externo intenta empujar */
}
@keyframes heroIntro{ from{opacity:0} to{opacity:1} }

.hero .slide{
  position:absolute; inset:0; opacity:0; transition:opacity var(--fade-slide) ease;
  pointer-events:none;
}
.hero .slide.active{ opacity:1; pointer-events:auto; }
.hero .slide:first-of-type{ opacity:1; pointer-events:auto; }

.hero .bg{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; display:block; z-index:0;
}
.hero .overlay{
  position:absolute; inset:0; z-index:1;
  background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.35) 40%, rgba(0,0,0,.65) 100%);
  pointer-events:none;
}

.hero .content{
  position:absolute; inset:auto 0 var(--pad) 0; padding:0 var(--pad);
  max-width:var(--container-max); margin-inline:auto; text-align:center; z-index:2;
  opacity:0; transform:translateY(8px);
  transition: opacity .45s ease, transform .45s ease;
}
.hero .slide.active .content{ opacity:1; transform:none; }

.hero .title{
  margin:0 0 12px; font-weight:900; line-height:.95; font-size:var(--title);
  text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.5);
}
.hero .sub{ margin:0 auto 18px; max-width:820px; font-size:var(--sub); color:#d6d6d6; }
.hero .cta{
  display:inline-grid; place-items:center; height:var(--cta-h); padding:0 18px;
  background:#fff; color:#111; border-radius:999px; font-weight:700; text-decoration:none;
  box-shadow:0 8px 30px rgba(0,0,0,.25); transition:transform .2s ease, opacity .2s ease;
}
.hero .cta:hover{ transform:translateY(-1px); opacity:.92; }

/* Flechas + bullets */
.hero .arrow{
  position:absolute; top:50%; translate:0 -50%; z-index:3;
  width:44px; height:44px; display:grid; place-items:center; border-radius:50%;
  border:0; background:rgba(255,255,255,.85); color:#000; cursor:pointer;
  box-shadow:0 8px 30px rgba(0,0,0,.25);
}
.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-radius:50%; border:0; cursor:pointer;
  background:rgba(255,255,255,.55); transition:transform .2s ease, background .2s ease;
}
.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; }

@media (min-width: 880px){
  .hero .content{ text-align:left; inset:auto auto var(--pad) var(--pad); }
}
.hero .arrow:focus-visible, .hero .dots button:focus-visible, .hero .cta:focus-visible{
  outline:3px solid #fff; outline-offset:2px;
}

/* =========================================================
   HERO MIN (encabezado mínimo)
   ========================================================= */
.hero-min{ padding: 24px 16px 8px; text-align: center; }
.hero-min h1{ margin:0 0 6px; font-size: 1.6rem; font-weight: 800; }

/* =========================================================
   BANNERS PROMOCIONALES (full-bleed)
   ========================================================= */
.promo-banner{ width:100%; overflow:hidden; background:#000; }
.promo-banner img{
  display:block; width:100%; height:auto; max-height: 420px;
  object-fit: cover; object-position: center; filter: contrast(1.02) saturate(1.02);
}
.promo-banner.reveal { opacity: 0; transform: translateY(14px); transition: .4s ease; }
.promo-banner.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   SECCIONES DE PROMOCIÓN
   ========================================================= */
.promo-section{ padding: 0 var(--pad) 32px; }
.promo-header{ max-width:var(--container-max); margin: 0 auto 8px; }
.promo-title{ font-size: 1.4rem; font-weight: 800; margin: 0 0 2px; }
.promo-desc{ color:#555; margin:0 0 10px; }

/* =========================================================
   GRID DE PRODUCTOS
   ========================================================= */
.productos{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 42vw, 320px), 1fr));
  gap: var(--gap);
  max-width: var(--container-max);
  width: 100%;
  margin: 0 auto 8px;
  padding-inline: var(--pad);
}

.productos .producto.flat{
  position: relative;
  background:#fff; border:1px solid #e5e5e5; border-radius:6px;
  overflow:hidden; display:flex; flex-direction:column;
  transition: transform .3s ease, box-shadow .3s ease;
  cursor: pointer;
}
.productos .producto.flat:hover{ transform: scale(1.03); z-index: 5; }

.productos .producto.flat .thumb{ display:block; width:100%; aspect-ratio:16/9; background:#f4f4f4; }
.productos .producto.flat .thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

.productos .producto.flat .meta{ padding:12px 16px 16px; display:flex; flex-direction:column; gap:6px; }

.price-single{ font-weight:700; font-size:1rem; }
.price-stack{ display:flex; flex-direction:column; gap:2px; }
.price-old{ color:#888; text-decoration: line-through; font-weight:600; font-size:.95rem; }
.price-new{ color:#111; font-weight:700; font-size:1rem; }

.name{ margin:2px 0 0; font-size:1rem; line-height:1.25; }
.desc{
  margin:0; color:#444; font-size:.95rem; line-height:1.35;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}

.badge-off{
  position:absolute; top:8px; left:8px; padding:4px 8px; font-size:.8rem;
  background:#111; color:#fff; border-radius:6px; z-index:2; pointer-events:none;
}

.empty-grid{
  grid-column: 1 / -1;
  width:100%; min-height:160px; display:flex; align-items:center; justify-content:center;
  background:#fff; border:1px dashed #e5e5e5; color:#666;
}

/* =========================================================
   SECCIÓN PRODUCTOS (texto + CTA)
   ========================================================= */
.productos-section{
  padding: 60px 16px; background:#111; color:#fff; text-align:center;
}
.productos-container{
  display:flex; justify-content:space-between; align-items:center;
  max-width:var(--container-max); margin:0 auto; flex-wrap:wrap; gap:var(--gap);
  padding-inline: var(--pad);
}
.productos-text{ flex:1; min-width:280px; }
.productos-text h2{ font-size: 2.5rem; font-weight:700; margin-bottom:10px; }
.productos-text p{ font-size:1.25rem; font-weight:400; margin-bottom:20px; }
.productos-buttons{ display:flex; gap:15px; justify-content:center; flex-wrap:wrap; }
.btn-producto{
  padding: 12px 30px; background:#fff; color:#000; font-weight:700; text-decoration:none;
  border-radius:25px; font-size:1.1rem; transition: background-color .3s ease, color .3s ease;
}
.btn-producto:hover{ background:#000; color:#fff; }
.productos-img{ flex:1; text-align:center; min-width:280px; }
.productos-img img{ max-width:100%; height:auto; border-radius:14px; }

/* =========================================================
   GALERÍA
   ========================================================= */
.galeria-fotos{ padding: 40px 16px; background:#111; color:#fff; text-align:center; margin-bottom:20px; }
.galeria-container{
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  max-width:var(--container-max); margin:0 auto; padding-inline:var(--pad);
}
.galeria-item{ flex:1; min-width:300px; max-width:33%; text-align:center; }
.galeria-item img{ width:100%; height:auto; border-radius:14px; }
.galeria-item p{ margin-top:10px; font-size:1rem; font-weight:400; color:#ddd; }

/* =========================================================
   CATEGORÍAS
   ========================================================= */
.categorias{
  min-height: 100vh;
  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;
  box-shadow:0 2px 10px rgba(0,0,0,0.1);
  overflow:hidden; display:flex; flex-direction:column; justify-content:space-between;
  transition: transform .3s ease, box-shadow .3s ease; text-align:center;
}
.categoria-card .card:hover{ transform:translateY(-10px); box-shadow:0 6px 20px rgba(0,0,0,0.15); }
.categoria-card img{ width:100%; height:auto; display:block; 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:bold; color:#000; letter-spacing:2px;
}

/* =========================================================
   VIDEO ENTRE SECCIONES
   ========================================================= */
.video-container{
  width:100%; height:500px; overflow:hidden; display:flex; justify-content:center; align-items:center;
}
.video-container video{
  width:80%; height:auto; object-fit:cover; pointer-events:none;
}

/* =========================================================
   COLLAGE 3 IMÁGENES
   ========================================================= */
.collage-band{ padding: 16px; }
.collage-3{
  max-width:var(--container-max); margin:0 auto; padding-inline:var(--pad);
  display:grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap:16px;
}
.collage-item{
  position:relative; display:block; border-radius:8px; overflow:hidden; background:#eee;
  transition: transform .25s ease;
}
.collage-item:hover{ transform: scale(1.02); }
.collage-item img{ width:100%; height:100%; display:block; object-fit:cover; }
.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; }

/* =========================================================
   MEDIA QUERIES
   ========================================================= */
@media (max-width: 980px){
  .productos{ grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}
@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; }
}
@media (max-width: 768px){
  .productos-container{ flex-direction:column; align-items:center; }
  .productos-text{ text-align:center; }
  .productos-buttons{ flex-direction:column; align-items:center; }
  .productos-img{ margin-top:20px; }
  .galeria-container{ flex-direction:column; align-items:center; }
  .galeria-item{ max-width:100%; }
}
@media (max-width: 560px){
  .productos{ grid-template-columns: 1fr; }
  .collage-3{ grid-template-columns: 1fr; gap:12px; }
  .item-a, .item-b, .item-c{ grid-column:1; aspect-ratio:16 / 9; }
}

/* Accesibilidad (reduce motion) */
@media (prefers-reduced-motion: reduce){
  .hero .slide{ transition:none; }
  .hero .content{ transition:none; }
  .productos .producto.flat{ transition:none; }
  .collage-item{ transition:none; }
}

/* Hardenings suaves */
html, body{ max-width:100%; overflow-x:hidden; }