/* RESET */
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body.dark{background:#0b0b0b;color:#fff;font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;line-height:1.45}
a{text-decoration:none;color:inherit}

/* COLORES */
:root{
  --bg:#0b0b0b; --panel:#111; --panel2:#1a1a1a;
  --text:#fff; --muted:#cfcfcf; --line:#161616;
  --accent:#e60023; --accentH:#c3001f;
}

/* COOKIE */
.cookie-banner{
  position:fixed;left:16px;right:16px;bottom:16px;z-index:1000;
  background:#111;border:1px solid #1f1f1f;border-radius:10px;
  padding:12px 14px;display:flex;gap:12px;justify-content:space-between;align-items:center
}
.cookie-banner p{color:#ddd}
.cookie-banner button{background:var(--accent);color:#fff;border:0;border-radius:6px;padding:8px 12px;cursor:pointer}
.cookie-banner button.ghost{background:transparent;border:1px solid #333}
.cookie-banner a{color:#9ed0ff}
.cookie-banner.hidden{display:none}

/* TOPBAR */
.topbar{background:#121212;color:#ddd;text-align:center;font-size:.92rem;padding:8px 10px;border-bottom:1px solid #1f1f1f}

/* HEADER */
.site-header{
  position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);padding:12px 18px;border-bottom:1px solid var(--line)
}
.site-header .brand img{height:40px}
.main-nav{display:flex;gap:18px}
.main-nav a{opacity:.9}
.main-nav a:hover{opacity:1}
.header-actions{display:flex;align-items:center;gap:14px}
.cart-link{background:#1a1a1a;padding:6px 10px;border-radius:20px;font-weight:600}
.hamburger{display:none;background:none;color:#fff;font-size:1.4rem;border:0;cursor:pointer}

/* HERO SLIDER */
.hero-slider{position:relative;height:72vh;min-height:460px;overflow:hidden}
.hero-slide{
  position:absolute;inset:0;background:#000 var(--bg) center/cover no-repeat;
  opacity:1;transform:scale(1.02);
  transition:opacity .6s ease, transform .8s ease;
  display:flex;align-items:center;justify-content:center
}
.hero-slide::before{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.hero-slide .hero-content{position:relative;text-align:center;padding:22px;max-width:720px}
.hero-slide h1{font-size:clamp(2rem,4vw,3.2rem);margin-bottom:10px}
.hero-slide p{color:#ddd;margin-bottom:18px}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  background:rgba(255,255,255,.08);color:#fff;border:0;width:44px;height:44px;border-radius:50%;
  font-size:1.6rem;cursor:pointer
}
.hero-arrow:hover{background:rgba(255,255,255,.18)}
.hero-arrow.left{left:14px}.hero-arrow.right{right:14px}
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:8px;z-index:6}
.dots .dot{width:9px;height:9px;border-radius:50%;background:#777;border:0}
.dots .dot.active{background:var(--accent)}
.cta{background:var(--accent);color:#fff;padding:12px 22px;border-radius:6px;display:inline-block;font-weight:650}
.cta:hover{background:var(--accentH)}
.cta.outline{background:transparent;border:1px solid #fff}

/* CATEGORY TILES */
.category-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:28px 16px;max-width:1100px;margin: 0 auto}
.tile{position:relative;aspect-ratio:3/2;background:var(--img) center/cover;border-radius:10px;overflow:hidden}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.55),transparent)}
.tile span{position:absolute;left:12px;bottom:12px;color:#fff;font-weight:800;letter-spacing:.3px}

/* PRODUCT GRID */
.product-grid{max-width:1100px;margin:6px auto 36px;padding:0 16px}
.product-grid h2{margin:18px 0;font-size:1.6rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center;position:relative}
.card .img-wrap{display:block}
.card img{width:100%;border-radius:8px;transition:opacity .25s}
.card h3{margin:8px 0}
.card .price{color:#fff;font-weight:700}
.card .price .old{color:#888;text-decoration:line-through;margin-right:6px;font-weight:400}
.card .price.muted{color:#666}
.mini-btn{display:inline-block;margin-top:8px;background:var(--accent);color:#fff;padding:8px 14px;border-radius:6px}
.mini-btn:hover{background:var(--accentH)}
.mini-btn.ghost{background:transparent;border:1px solid #444}
.badge{position:absolute;top:10px;left:10px;background:var(--accent);color:#fff;padding:4px 8px;border-radius:12px;font-size:.8rem}
.badge.alt{background:#1f85ff}

/* BENEFITS */
.benefits{max-width:1000px;margin:0 auto 36px;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:0 16px}
.benefit{background:#101010;border:1px solid #1a1a1a;padding:14px;border-radius:10px;text-align:center;color:#ddd}

/* NEWSLETTER */
.newsletter{text-align:center;padding:40px 16px;background:#0e0e0e;border-top:1px solid #161616;border-bottom:1px solid #161616}
.newsletter h3{font-size:1.6rem;margin-bottom:8px}
.newsletter p{color:#cfcfcf}
.newsletter form{margin-top:12px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.newsletter input{padding:10px 12px;min-width:260px;border-radius:6px;border:1px solid #2a2a2a;background:#1a1a1a;color:#fff}
.newsletter button{padding:10px 16px;background:var(--accent);color:#fff;border:0;border-radius:6px}
.newsletter .tiny{margin-top:8px;color:#9a9a9a;font-size:.9rem}

/* FOOTER */
.site-footer{padding:28px 16px;background:var(--bg);border-top:1px solid #161616}
.site-footer .cols{max-width:1100px;margin:0 auto;display:grid;gap:18px;grid-template-columns:repeat(4,1fr)}
.site-footer h4,.site-footer h5{margin-bottom:10px}
.site-footer a{color:#cfcfcf;margin:4px 0;display:block}
.site-footer .social a{margin-right:10px}
.site-footer .copy{text-align:center;color:#8a8a8a;margin-top:10px}

/* HOVER cambio imagen en cards */
.card .img-wrap:hover img{
  opacity:.0
}
.card .img-wrap:hover img::after{opacity:1}

/* RESPONSIVE */
@media (max-width: 900px){
  .main-nav{
    position:fixed;left:0;right:0;top:60px;background:var(--bg);transform:translateY(-120%);
    transition:.3s;padding:16px;display:flex;flex-direction:column;gap:14px;border-bottom:1px solid var(--line)
  }
  .main-nav.open{transform:translateY(0)}
  .hamburger{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .category-tiles{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr}
}
@media (max-width: 560px){
  .grid{grid-template-columns:1fr}
  .category-tiles{grid-template-columns:1fr}
}
/* --- FILTROS TIENDA --- */
.filters{background:#0e0e0e;border-top:1px solid #161616;border-bottom:1px solid #161616;padding:10px 16px}
.filters-row{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.filter{display:flex;flex-direction:column;gap:6px}
.filter label{font-size:.9rem;color:#cfcfcf}
.filter select,.filter input{
  background:#1a1a1a;color:#fff;border:1px solid #2a2a2a;border-radius:6px;padding:10px
}
.filter.search input{width:100%}

/* Quick add en tarjetas */
.quick-add{display:flex;gap:8px;justify-content:center;margin-top:8px}
.quick-add .size{
  background:#1a1a1a;color:#fff;border:1px solid #2a2a2a;border-radius:6px;padding:8px 10px
}

/* Paginación */
.pagination{display:flex;gap:8px;justify-content:center;margin:24px 0}
.pg{background:#1a1a1a;border:1px solid #2a2a2a;color:#fff;padding:8px 12px;border-radius:6px;cursor:pointer}
.pg.active{background:#e60023;border-color:#e60023}
.pg.disabled{opacity:.4;pointer-events:none}

/* Responsive filtros */
@media (max-width: 900px){
  .filters-row{grid-template-columns:1fr 1fr}
}
@media (max-width: 560px){
  .filters-row{grid-template-columns:1fr}
}
/* --- PRODUCTO --- */
.product-wrap{
  max-width:1100px; margin:28px auto 48px; padding:0 16px;
  display:grid; grid-template-columns: 1fr 1fr; gap:34px;
}
.product-gallery{ position:relative; background:#101010; border:1px solid #1a1a1a; border-radius:12px; padding:14px; }
.product-gallery img{ width:100%; border-radius:8px; }
.p-arrow{
  position:absolute; top:45%; transform:translateY(-50%); z-index:2;
  background:rgba(255,255,255,.08); color:#fff; border:0; width:42px; height:42px; border-radius:50%;
  font-size:1.4rem; cursor:pointer;
}
.p-arrow.left{ left:10px } .p-arrow.right{ right:10px }
.p-arrow:hover{ background:rgba(255,255,255,.18) }

.p-thumbs{ display:flex; gap:10px; margin-top:10px; justify-content:center; }
.p-thumbs .thumb{ background:#1a1a1a; border:1px solid #2a2a2a; border-radius:8px; padding:4px; cursor:pointer }
.p-thumbs .thumb img{ width:64px; height:64px; object-fit:cover; border-radius:6px; display:block }
.p-thumbs .thumb.active{ border-color:#e60023 }

.product-info h1{ font-size:2rem; margin-bottom:6px }
.p-price{ font-size:1.6rem; color:#e60023; margin-bottom:10px }
.p-desc{ color:#cfcfcf; margin-bottom:14px }

.p-sizes{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:12px 0 16px }
.p-sizes select{
  background:#1a1a1a; color:#fff; border:1px solid #2a2a2a; border-radius:8px; padding:10px 12px
}
.size-link{ color:#9ed0ff; font-size:.95rem }

.p-actions{ display:flex; gap:10px; flex-wrap:wrap; margin:8px 0 16px }
.p-actions .cta{ padding:12px 18px; border-radius:8px; font-weight:650 }
.p-actions .cta.outline{ background:transparent; border:1px solid #444 }

.p-promo{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:10px 0 6px }
.p-promo input{
  background:#1a1a1a; color:#fff; border:1px solid #2a2a2a; border-radius:8px; padding:10px 12px; min-width:220px
}
.promo-msg{ font-size:.95rem; color:#cfcfcf }

.p-meta{ list-style:none; margin-top:12px; color:#cfcfcf }
.p-meta li{ margin:4px 0 }

/* Relacionados */
.product-related{ max-width:1100px; margin:0 auto 40px; padding:0 16px }
.product-related h2{ margin:10px 0 16px }

/* Responsive */
@media (max-width: 900px){
  .product-wrap{ grid-template-columns:1fr; }
}
/* --- CARRITO --- */
.cart-container{max-width:900px;margin:28px auto 48px;padding:0 16px}
.cart-items{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.cart-item{display:flex;justify-content:space-between;gap:12px;background:#101010;border:1px solid #1a1a1a;border-radius:10px;padding:14px}
.ci-title{margin-bottom:6px}
.ci-price{color:#cfcfcf;font-size:.95rem}
.ci-right{display:flex;align-items:center;gap:10px}
.qty{display:flex;align-items:center;gap:8px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:8px;padding:6px 8px}
.qty button{background:transparent;border:0;color:#fff;font-size:1.1rem;cursor:pointer}
.remove{background:transparent;border:1px solid #2a2a2a;color:#fff;border-radius:8px;padding:8px 10px;cursor:pointer}
.remove:hover{border-color:#e60023}

.cart-tools{margin-top:16px}
.coupon .row{display:flex;gap:8px}
.coupon input{background:#1a1a1a;color:#fff;border:1px solid #2a2a2a;border-radius:8px;padding:10px 12px;min-width:240px}
.tiny{color:#9a9a9a;font-size:.9rem;margin-top:6px}

.cart-summary{margin-top:16px;background:#0e0e0e;border:1px solid #1a1a1a;border-radius:10px;padding:14px}
.cart-summary .row{display:flex;justify-content:space-between;margin:6px 0}
.cart-summary .total strong{font-size:1.3rem;color:#fff}
.cta-row{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
/* --- CONFIRMACIÓN --- */
.confirm-wrap{max-width:900px;margin:28px auto 48px;padding:0 16px}
.confirm-card{
  background:#101010;border:1px solid #1a1a1a;border-radius:12px;padding:18px
}
.confirm-card h1{font-size:2rem;margin-bottom:6px}
.confirm-card h2{margin:14px 0 8px}
.confirm-meta{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 6px
}
.confirm-meta span{color:#cfcfcf;font-size:.95rem;display:block}
.confirm-meta strong{font-size:1.05rem}
.checkout-list{margin-left:18px;margin-bottom:6px}
@media (max-width: 700px){
  .confirm-meta{grid-template-columns:1fr}
}
/* ============== CONFIRMACIÓN & UPSELL ============== */

/* Topbar “confirmado” un pelín más vivo */
.topbar {
  background: #121212;
}
.topbar:has(+ .site-header) {
  border-bottom: 1px solid #1f1f1f;
}

/* Wrapper y tarjeta */
.confirm-wrap {
  max-width: 900px;
  margin: 28px auto 48px;
  padding: 0 16px;
}
.confirm-card {
  background: #101010;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 6px 24px rgba(0,0,0,.25);
}
.confirm-card h1 {
  font-size: 2rem;
  margin-bottom: 6px;
}
.confirm-card h2 {
  margin: 14px 0 8px;
}

/* Meta del pedido */
.confirm-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 10px 0 6px;
}
.confirm-meta span {
  color: #cfcfcf;
  font-size: .95rem;
  display: block;
}
.confirm-meta strong {
  font-size: 1.05rem;
}

/* Lista resumen (reutiliza estilos checkout-list si existen) */
.checkout-list {
  margin: 6px 0 8px 18px;
  line-height: 1.55;
}
.checkout-list li {
  margin: 2px 0;
}

/* Resumen precios dentro de la confirmación */
.confirm-card .cart-summary {
  margin-top: 12px;
  background: #0e0e0e;
  border: 1px solid #1a1a1a;
  border-radius: 10px;
  padding: 14px;
}
.confirm-card .cart-summary .row {
  display: flex;
  justify-content: space-between;
  margin: 6px 0;
}
.confirm-card .cart-summary .total strong {
  font-size: 1.25rem;
}

/* CTA row y botones secundarios */
.confirm-card .cta-row .mini-btn,
.confirm-card .cta-row .cta {
  border-radius: 8px;
}
.confirm-card .mini-btn.ghost {
  background: transparent;
  border: 1px solid #2a2a2a;
}
.confirm-card .mini-btn.ghost:hover {
  border-color: #e60023;
}

/* Upsell / Recomendado */
.product-related {
  max-width: 1100px;
  margin: 0 auto 40px;
  padding: 0 16px;
}
.product-related h2 {
  margin: 10px 0 16px;
}
.product-related .grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.product-related .card {
  background: #111;
  border: 1px solid #1a1a1a;
  border-radius: 12px;
  padding: 14px;
  text-align: center;
}
.product-related .card img {
  width: 100%;
  border-radius: 8px;
}

/* WhatsApp / Instagram links coherentes */
.confirm-card .mini-btn[href*="wa.me"] {
  background: #25d366;
  border-color: #25d366;
  color: #fff;
}
.confirm-card .mini-btn[href*="wa.me"]:hover {
  filter: brightness(1.05);
}

/* PRINT: recibo limpio */
@media print {
  body.dark { background: #fff; color: #000; }
  .topbar, .site-header, .site-footer, .product-related, .cta-row, .hamburger { display: none !important; }
  .confirm-card { box-shadow: none; border: 1px solid #ccc; }
  .confirm-card .cart-summary { background: #fff; border-color: #ddd; }
  a { color: #000; text-decoration: none; }
}

/* Responsive */
@media (max-width: 900px) {
  .confirm-meta { grid-template-columns: 1fr; }
  .product-related .grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .product-related .grid { grid-template-columns: 1fr; }
}
.hero-slide {
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
}
/* === HERO SLIDER – FIX PACK === */

/* El contenedor necesita altura para que se vea */
.hero-slider{
  position: relative;
  height: 90vh;          /* puedes subirlo a 100vh si quieres */
  min-height: 520px;     /* asegura visibilidad en pantallas pequeñas */
  overflow: hidden;
}

/* Cada slide usa la variable --bg para pintar el fondo */
.hero-slide{
  position: absolute;
  inset: 0; /* top/right/bottom/left = 0 */
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0;            /* por defecto oculto */
  transition: opacity .6s ease;
}

/* Overlay para contraste del texto */
.hero-slide::after{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
}

/* Contenido centrado sobre el overlay */
.hero-slide .hero-content{
  position: relative;
  z-index: 1;
  height: 100%;
  display: grid;
  place-content: center;
  text-align: center;
  padding: 0 16px;
}

/* El slide activo se ve */
.hero-slide.active{ opacity: 1; }

/* Flechas y dots (opcional) */
.hero-arrow{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 2;
  background: rgba(0,0,0,.5);
  border: 1px solid #1a1a1a; color:#fff;
  width: 42px; height: 42px; border-radius: 50%; cursor:pointer;
}
.hero-arrow.left{ left: 12px; }
.hero-arrow.right{ right: 12px; }

.dots{
  position: absolute; bottom: 12px; left: 50%;
  transform: translateX(-50%); z-index: 2;
  display: flex; gap: 8px;
}
.dots button{
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(255,255,255,.4);
  border: 0; cursor: pointer;
}
.dots button.active{ background:#fff; }

/* Debug opcional si aún no lo ves */
/*
.hero-slider{ outline: 2px solid magenta; }
.hero-slide{ outline: 2px dashed cyan; }
*/
.auth-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 20px;
}

.auth-card {
  background: #111;
  border: 1px solid #222;
  border-radius: 8px;
  padding: 24px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 4px 12px rgba(0,0,0,.5);
}

.auth-card h1 {
  margin-bottom: 16px;
  font-size: 1.6rem;
  text-align: center;
}

.auth-card label {
  display: block;
  margin: 8px 0 4px;
  font-size: .9rem;
  color: #aaa;
}

.auth-card .input {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #333;
  background: #1a1a1a;
  color: #fff;
}

.auth-card .input:focus {
  outline: none;
  border-color: #f5c518;
}