/* theme.css — Rediseño de octubre 2026: cabecera negra, tarjetas con etiquetas
   de oferta, franja de confianza y pie de página. Se carga DESPUÉS de style.css.
   Para cambiar el color de acento (etiquetas, insignia del carrito) edita --accent. */
:root{--accent:#b5652f;--card-bg:#f7f7f7;}
body{font-family:'Montserrat','Inter',sans-serif;color:#111;background:#fff;}

/* ── Barra superior ─────────────────────────────────────────────────────── */
.topbar{background:#000;color:#fff;font-size:11px;letter-spacing:.2px;border-bottom:1px solid rgba(255,255,255,.55);}
.topbar-inner{max-width:1240px;margin:0 auto;padding:7px 24px;display:flex;justify-content:space-between;gap:16px;}
.topbar .sep{opacity:.5;margin:0 9px;}
.topbar-right span.js-open-account{cursor:pointer;}
.topbar-right span.js-open-account:hover{text-decoration:underline;}

/* ── Cabecera ───────────────────────────────────────────────────────────── */
nav{background:#000;color:#fff;border-bottom:none;padding:12px 24px;display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:none;}
nav .logo{cursor:pointer;display:flex;align-items:center;flex:0 0 auto;}
nav .logo img{width:64px;height:64px;display:block;transition:width .2s,height .2s;}
.nav-links{display:flex;align-items:center;justify-content:center;gap:4px;flex:1;color:#fff;font-size:13px;font-weight:500;letter-spacing:.3px;}
.nav-links .nav-cat,.nav-dd-label{padding:10px 14px;cursor:pointer;color:#fff;text-transform:uppercase;white-space:nowrap;}
.nav-links .nav-cat:hover,.nav-dd-label:hover{color:#fff;opacity:.75;}
.nav-links .nav-cat.active{color:#fff;text-decoration:none;box-shadow:inset 0 -2px 0 var(--accent);}
.nav-dd{position:relative;}
.nav-dd-label small{font-size:9px;margin-left:3px;}
.dd-panel{display:none;position:absolute;top:100%;left:50%;transform:translateX(-50%);background:#fff;color:#111;min-width:420px;max-width:92vw;padding:18px 22px;box-shadow:0 14px 30px rgba(0,0,0,.28);z-index:700;columns:2;column-gap:28px;text-transform:none;}
.nav-dd:hover .dd-panel,.nav-dd.open .dd-panel{display:block;}
.dd-panel a{display:block;padding:8px 0;font-size:13px;font-weight:500;cursor:pointer;color:#111;break-inside:avoid;border-bottom:1px solid #f0f0f0;}
.dd-panel a:hover{color:var(--accent);}
.dd-panel a small{color:#999;font-weight:400;margin-left:6px;}

.nav-icons{display:flex;align-items:center;gap:16px;flex:0 0 auto;}
.search-pill{display:flex;align-items:center;gap:8px;background:#fff;color:#777;border-radius:20px;padding:7px 16px 7px 12px;font-size:12px;min-width:150px;cursor:pointer;}
.search-pill svg{width:14px;height:14px;stroke:#111;cursor:pointer;}
.nav-icons svg{stroke:#fff;}
.nav-icons .search-pill svg{stroke:#111;}
.nav-account{display:none;cursor:pointer;}
.nav-account svg,.nav-cart svg{width:22px;height:22px;cursor:pointer;}
.nav-cart{position:relative;cursor:pointer;display:flex;flex-direction:column;align-items:center;font-size:11px;line-height:1.2;}
.cart-badge{position:absolute;top:-7px;right:-8px;background:#fff;color:#000;font-size:10px;font-weight:700;min-width:16px;height:16px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}
.cart-total{margin-top:2px;font-weight:500;color:#fff;}

/* ── Banner de portada ──────────────────────────────────────────────────── */
.hero{padding:22px 24px 8px;}
.banner{max-width:1000px;margin:0 auto;background:linear-gradient(135deg,#f3ece3 0%,#e9d9cb 55%,#dcc2ad 100%);padding:14px;}
.banner-frame{border:2px solid #b89a6a;outline:1px solid #b89a6a;outline-offset:-8px;padding:64px 40px 60px;text-align:center;}
.banner .eyebrow{color:var(--accent);font-size:12px;letter-spacing:3px;margin-bottom:18px;font-weight:600;}
.banner h1{font-family:'Montserrat',sans-serif;font-weight:700;font-size:40px;line-height:1.15;letter-spacing:.5px;text-transform:uppercase;margin-bottom:20px;}
.banner h1 em{font-style:normal;color:#7a1f3d;display:block;font-size:30px;margin-top:6px;}
.banner p{margin:0 auto 28px;max-width:560px;font-size:14px;line-height:1.7;color:#4a4034;}
.banner .btn{background:#000;color:#fff;border:none;padding:15px 36px;font-weight:600;letter-spacing:1.5px;}

/* ── Franja de confianza ────────────────────────────────────────────────── */
.trust-strip{max-width:1000px;margin:18px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 24px;}
.trust-item{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#f7f7f7;}
.trust-item svg{width:34px;height:34px;stroke:#000;flex:0 0 34px;}
.trust-item strong{display:block;font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;}
.trust-item span{font-size:12px;color:#666;}

/* ── Marcas destacadas ──────────────────────────────────────────────────── */
.trending-brands{padding:44px 24px 6px;}
.trending-head h2{font-family:'Montserrat',sans-serif;font-style:normal;font-weight:700;font-size:20px;letter-spacing:2px;text-transform:uppercase;}
.trending-head{margin-bottom:22px;}
.trending-strip{gap:10px;justify-content:center;flex-wrap:wrap;overflow:visible;}
.trend-card{flex:0 0 auto;}
.brand-logo-box{height:auto;width:auto;min-width:130px;padding:14px 22px;margin:0;background:#000;border-radius:2px;}
.brand-logo-box .logo-text{font-family:'Montserrat',sans-serif;color:#fff;font-size:12px;font-weight:700;letter-spacing:1.5px;}
.trend-card:hover .brand-logo-box{background:#222;}
.trend-card.active .brand-logo-box{background:var(--accent);}
.trend-card .tag{display:none;}

/* ── Catálogo ───────────────────────────────────────────────────────────── */
.section{padding:20px 24px 70px;}
.filter-bar{display:none;max-width:1240px;margin:18px auto 0;padding:0 24px;}
.filter-bar.show{display:block;}
.filter-bar span{font-size:12px;font-weight:600;letter-spacing:.5px;cursor:pointer;text-transform:uppercase;border-bottom:1px solid #000;padding-bottom:2px;}
.cat-label{display:block;text-align:center;max-width:1240px;margin:54px auto 26px;font-family:'Montserrat',sans-serif;font-style:normal;}
.cat-label>span:first-child{display:block;font-size:26px;font-weight:700;letter-spacing:3px;text-transform:uppercase;color:#111;}
.cat-label .ver-todo{display:inline-block;margin-top:8px;font-family:'Montserrat',sans-serif;font-size:12px;color:#444;text-decoration:underline;text-transform:none;letter-spacing:0;}
.grid,.subgrid{max-width:1240px;grid-template-columns:repeat(4,1fr);gap:20px;}
.card{position:relative;background:var(--card-bg);box-shadow:0 1px 5px rgba(0,0,0,.14);text-align:center;padding-bottom:16px;transition:box-shadow .2s,translate .2s;}
.card:hover{box-shadow:0 6px 18px rgba(0,0,0,.18);translate:0 -2px;}
.card img{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;margin:0;background:#ede6d6;clip-path:polygon(0 0,100% 0,100% 94%,0 100%);}
.card h3{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:1.2px;text-transform:uppercase;margin:14px 12px 4px;line-height:1.35;}
.card .brand{font-size:11px;color:#777;margin:0 14px 8px;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;}
.price-row-card{justify-content:center;flex-wrap:wrap;gap:4px 8px;margin-top:auto;padding:0 12px;}
.card .price{font-family:'Montserrat',sans-serif;font-weight:600;font-size:17px;letter-spacing:1px;}
.price-old{font-size:12px;color:#777;text-decoration:line-through;}
.price-off{font-size:12px;font-weight:600;color:var(--accent);}
.badge-oferta{position:absolute;top:10px;left:10px;z-index:2;width:48px;height:48px;border-radius:50%;background:var(--accent);color:#fff;font-size:9px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;display:flex;align-items:center;justify-content:center;}
.add-cart-btn{margin:12px 14px 0;width:auto;background:#000;font-weight:600;letter-spacing:1.2px;}
.add-cart-btn:hover{background:var(--accent);}

/* ── Franja Instagram y pie de página ───────────────────────────────────── */
.ig-band{background:#f7f7f7;padding:46px 24px 40px;text-align:center;margin-top:30px;}
.ig-inner{max-width:900px;margin:0 auto;}
.band-title{font-family:'Montserrat',sans-serif;font-style:normal;font-weight:700;font-size:15px;letter-spacing:2px;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;justify-content:center;gap:8px;}
.btn-grey{display:inline-block;background:#8f8f8f;color:#fff;padding:10px 26px;font-size:11px;letter-spacing:2px;text-transform:uppercase;text-decoration:none;box-shadow:0 2px 0 #6f6f6f;}
.ig-band .social-icons{gap:12px;}
.ig-band .social-icon{background:#000;text-decoration:none;}
.ig-band .social-icon:first-child{background:var(--accent);}
.ig-band .social-icon svg{stroke:#fff;}
.site-footer{background:#fff;border-top:1px solid #ddd;padding:34px 24px 14px;}
.site-footer-inner{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:repeat(3,1fr);gap:40px;}
.site-footer h4{font-size:12px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;margin-bottom:14px;}
.site-footer ul{list-style:none;padding:0;margin:0;}
.site-footer li{font-size:12px;margin-bottom:8px;text-transform:uppercase;letter-spacing:.3px;}
.site-footer ul.contact li{text-transform:none;letter-spacing:0;}
.site-footer a{color:#111;text-decoration:none;}
.site-footer a:hover{text-decoration:underline;}
.ship-chips{display:flex;gap:8px;flex-wrap:wrap;}
.ship-chips span{font-size:11px;font-weight:600;border:1px solid #ccc;padding:6px 10px;border-radius:3px;}
.copyright{max-width:1100px;margin:28px auto 0;padding-top:14px;border-top:1px solid #eee;font-size:11px;color:#777;text-align:center;}

/* ── Aviso "Agregado al carrito" y cookies ──────────────────────────────── */
.cart-toast{position:fixed;top:92px;right:20px;width:290px;background:#fff;color:#111;box-shadow:0 10px 30px rgba(0,0,0,.28);padding:18px 20px;z-index:900;transform:translateY(-12px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
.cart-toast.show{opacity:1;transform:none;pointer-events:auto;}
.toast-close{position:absolute;top:6px;right:10px;border:none;background:none;font-size:20px;cursor:pointer;color:#777;}
.toast-title{font-weight:700;font-size:13px;letter-spacing:1px;text-transform:uppercase;margin-bottom:8px;}
.toast-item{font-size:12px;color:#555;margin-bottom:8px;}
.toast-total{font-size:12px;font-weight:600;margin-bottom:12px;}
.toast-btn{background:#000;color:#fff;text-align:center;padding:11px;font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;}
.cookie-bar{position:fixed;left:0;right:0;bottom:0;background:#f5f5f5;color:#555;font-size:12px;text-align:center;padding:12px 16px;z-index:950;display:none;box-shadow:0 -2px 8px rgba(0,0,0,.08);}
.cookie-bar.show{display:block;}
.cookie-bar span{display:inline-block;margin-left:14px;padding:6px 16px;background:#e8e8e8;color:var(--accent);font-weight:700;letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;font-size:11px;}

/* ── Adaptación a pantallas pequeñas ────────────────────────────────────── */
@media (max-width:980px){
  .grid,.subgrid{grid-template-columns:repeat(3,1fr);}
  .search-pill{min-width:0;}
}
@media (max-width:760px){
  .topbar{display:none;}
  nav{flex-wrap:wrap;padding:10px 14px;gap:8px 12px;}
  nav .logo img{width:46px;height:46px;}
  .nav-links{order:3;flex:0 0 100%;justify-content:flex-start;overflow-x:auto;overflow-y:visible;font-size:12px;}
  .nav-links .nav-cat,.nav-dd-label{padding:8px 10px;}
  .nav-dd{position:static;}
  .dd-panel{position:fixed;left:8px;right:8px;top:118px;transform:none;min-width:0;columns:1;max-height:60vh;overflow-y:auto;}
  .nav-icons{margin-left:auto;gap:12px;}
  .search-pill span{display:none;}
  .search-pill{padding:8px;border-radius:50%;}
  .nav-account{display:block;}
  .banner-frame{padding:40px 18px;}
  .banner h1{font-size:26px;}.banner h1 em{font-size:20px;}
  .trust-strip{grid-template-columns:1fr;}
  .grid,.subgrid{grid-template-columns:repeat(2,1fr);gap:12px;}
  .card h3{font-size:11.5px;letter-spacing:.6px;}
  .card .price{font-size:14px;}
  .site-footer-inner{grid-template-columns:1fr;gap:26px;}
  .cart-toast{top:80px;right:10px;left:10px;width:auto;}
  .cat-label>span:first-child{font-size:20px;}
}

.pay-card.pay-wide{width:100px;}
@media (max-width:760px){.dd-long{display:none;}}

/* ── Carrusel de portada (fotos de Instagram) ───────────────────────────── */
.hero-carousel{position:relative;max-width:1000px;margin:0 auto;height:min(72vh,600px);background:#111;overflow:hidden;}
.hc-slide{position:absolute;inset:0;opacity:0;transition:opacity .7s ease;pointer-events:none;}
.hc-slide.active{opacity:1;pointer-events:auto;}
.hc-bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(22px) brightness(.75);}
.hc-slide img{position:relative;width:100%;height:100%;object-fit:contain;display:block;}
.hc-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:44px;height:64px;border:none;background:rgba(0,0,0,.35);color:#fff;font-size:38px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0 0 4px;}
.hc-arrow:hover{background:rgba(0,0,0,.65);}
.hc-prev{left:0;}.hc-next{right:0;}
.hc-dots{position:absolute;bottom:64px;left:0;right:0;display:flex;justify-content:center;gap:8px;z-index:3;}
.hc-dot{width:9px;height:9px;border-radius:50%;border:1px solid #fff;background:transparent;padding:0;cursor:pointer;}
.hc-dot.active{background:#fff;}
.hc-cta{position:absolute;left:0;right:0;bottom:14px;text-align:center;z-index:3;}
.hc-cta .btn{background:#000;color:#fff;border:none;padding:11px 28px;font-size:11px;font-weight:600;letter-spacing:1.5px;cursor:pointer;}
.hc-cta .btn:hover{background:var(--accent);}
@media (max-width:760px){.hero{padding:12px 0 6px;}.hero-carousel{height:min(62vh,460px);}.hc-arrow{width:34px;height:50px;font-size:30px;}}

/* ── Aparición gradual al desplazarse (bajar y subir) ───────────────────── */
.reveal{opacity:0;transform:translateY(34px);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
.reveal.rv-instant{transition:none !important;}
.card.reveal{transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1),box-shadow .2s,translate .2s;}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none;}}