/* =========================
   RESET Y GENERAL
========================= */
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:'Arial',sans-serif;background:#000;color:#fff}

/* =========================
   HERO KOLOO
========================= */
.hero{height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.logo{font-size:clamp(3.5rem,10vw,8rem);letter-spacing:.2em;margin-bottom:20px;position:relative;text-transform:uppercase}
.glitch::before,.glitch::after{content:attr(data-text);position:absolute;left:0;width:100%;overflow:hidden;color:white;background:black}
.glitch::before{top:-2px;text-shadow:-2px 0 white;animation:glitchTop 2s infinite linear alternate-reverse}
.glitch::after{top:2px;text-shadow:-2px 0 white;animation:glitchBottom 1.5s infinite linear alternate-reverse}
@keyframes glitchTop{0%{clip-path:inset(0 0 85% 0)}100%{clip-path:inset(10% 0 0 0)}}
@keyframes glitchBottom{0%{clip-path:inset(85% 0 0 0)}100%{clip-path:inset(0 0 10% 0)}}
.tagline{font-size:1rem;letter-spacing:.3em;margin-bottom:40px;opacity:.7;text-transform:uppercase}
.cta{padding:15px 40px;border:1px solid #fff;color:#fff;text-decoration:none;letter-spacing:.2em;text-transform:uppercase;transition:all .15s ease}
.cta:hover{background:#fff;color:#000;transform:translateY(-2px)}

/* =========================
   COLECCIÓN / PRODUCTOS
========================= */
.coleccion{padding:100px 5vw}
.section-title{text-align:center;font-size:2rem;letter-spacing:.3em;margin-bottom:80px;text-transform:uppercase}
.productos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:40px}
.card{border:1px solid #222;padding:20px;text-align:center;transition:transform .2s ease,border .2s ease}
.card:hover{transform:translateY(-5px);border:1px solid #fff}
.card img{width:100%;height:320px;object-fit:cover;margin-bottom:20px;background:#111}
.card h3{text-transform:uppercase;letter-spacing:.15em;font-size:.9rem;margin-bottom:10px}
.precio{font-size:1rem;margin-bottom:20px;opacity:.8}
.btn-cart{background:transparent;color:#fff;border:1px solid #fff;padding:12px 25px;cursor:pointer;text-transform:uppercase;letter-spacing:.15em;transition:all .15s ease}
.btn-cart:hover{background:#fff;color:#000}

/* =========================
   ANIMACIONES SCROLL (AGRESIVO)
========================= */
.reveal{opacity:0;transform:translateY(80px) scale(.95);transition:all .6s cubic-bezier(.25,1,.5,1)}
.reveal.active{opacity:1;transform:translateY(0) scale(1)}
.card.reveal{transition-delay:var(--delay)}

/* =========================
   CARRITO FLOTANTE
========================= */
.carrito-flotante{
  position: fixed;
  top: 20px;
  right: 20px;
  background:#fff;
  color:#000;
  padding:12px 18px;
  border-radius:50%;
  font-size:1.2rem;
  cursor:pointer;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .2s ease;
}
.carrito-flotante:hover{transform:scale(1.2)}
#carrito-count{
  position:absolute;
  top:-8px;
  right:-8px;
  background:red;
  color:#fff;
  width:18px;
  height:18px;
  border-radius:50%;
  font-size:.75rem;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:bold;
}

/* =========================
   CARRITO SECCIÓN
========================= */
.carrito{padding:60px 5vw;background:#111;color:#fff;text-align:center;border-top:1px solid #222}
.carrito-items{margin:30px 0}
.carrito-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-bottom:1px solid #222}
.carrito-item p{margin:0}
.carrito-item button{background:#fff;color:#000;border:none;padding:5px 10px;cursor:pointer;text-transform:uppercase;transition:.15s ease}
.carrito-item button:hover{background:#000;color:#fff}
.carrito-total{font-size:1.2rem;margin:20px 0}
.vaciar-carrito{padding:10px 25px;border:1px solid #fff;background:transparent;color:#fff;cursor:pointer;text-transform:uppercase;transition:.15s ease}
.vaciar-carrito:hover{background:#fff;color:#000}

/* =========================
   FOOTER / REDES Y PAGOS
========================= */
.footer{padding:40px 5vw;text-align:center;background:#000;color:#fff;border-top:1px solid #222}
.footer .socials{margin-bottom:15px}
.footer .socials a{display:inline-block;margin:0 10px;transition:transform .2s ease}
.footer .socials a:hover{transform:scale(1.2)}
.footer .socials img{width:32px;height:32px}
.footer .pagos{margin-top:15px}
.footer .pagos img{width:50px;height:auto;margin:0 8px;vertical-align:middle;filter:brightness(0) invert(1)}

/* =========================
   MOBILE-FIRST
========================= */
@media(max-width:768px){.hero{padding:5vh 5vw}.logo{font-size:clamp(2.5rem,12vw,5rem)}.tagline{font-size:.8rem;margin-bottom:30px}.cta{padding:12px 30px;font-size:.85rem}.productos{grid-template-columns:1fr;gap:20px}.card img{height:250px}.card h3,.precio{font-size:.85rem}.btn-cart{padding:10px 20px;font-size:.8rem}}
@media(max-width:480px){.tagline{letter-spacing:.15em}.logo{letter-spacing:.1em}.cta{width:80%;text-align:center}}