/* ===========================
   SIN DESGASTE · styles.css
   Mobile-first, compacto
   =========================== */
:root{
  --bg:#fff; --fg:#111; --muted:#666; --line:#e9e9e9; --accent:#000;
  --px:clamp(12px,4vw,24px);
  --radius:14px; --shadow:0 10px 24px rgba(0,0,0,.06);
  color-scheme:light;
}

/* Base */
*{box-sizing:border-box}
html,body{height:100%}
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit}
.container{max-width:1120px;margin-inline:auto;padding-inline:var(--px)}
:focus-visible{outline:2px solid #000;outline-offset:2px}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{position:fixed;left:16px;top:16px;padding:.5rem .75rem;background:#000;color:#fff;border-radius:8px;z-index:1000}

/* Header (negro) */
.header{position:sticky;top:0;z-index:10;background:rgba(0,0,0,.95);backdrop-filter:blur(6px);border-bottom:1px solid #1a1a1a}
.header__inner{height:64px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand__logo{height:clamp(28px,4vw,40px);width:auto;display:block}
.header__menu-btn{
  display:grid;place-items:center;width:42px;height:42px;background:transparent;border:1px solid #333;color:#fff;border-radius:10px;cursor:pointer;font-size:20px
}
@media (min-width:768px){.header__menu-btn{display:none}}

/* Nav */
.nav[hidden]{display:none!important}
.nav{position:absolute;inset-inline:0;top:64px;padding:12px var(--px);background:rgba(0,0,0,.98);border-bottom:1px solid #1a1a1a;box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.nav__link{display:block;padding:12px 14px;text-decoration:none;border-radius:999px;color:#ddd}
.nav__link:hover,.nav__link.active{background:#fff;color:#000}
@media (min-width:768px){
  .nav{position:static;background:transparent;border:0;box-shadow:none;padding:0;display:flex!important}
  .nav__list{display:flex;gap:12px;align-items:center}
  .nav__link{padding:8px 10px}
}

/* Cart badge */
.cart-btn{background:#fff;color:#000;border:0;padding:10px 14px;border-radius:999px;cursor:pointer;font-weight:700;min-height:44px}
.cart-count{background:#000;color:#fff;border:1px solid #444;border-radius:999px;padding:2px 8px;margin-left:6px}
body.nav-open,body.cart-open{overflow:hidden}

/* Botones */
.btn{border:0;padding:12px 16px;border-radius:10px;font-weight:800;cursor:pointer;min-height:44px}
.btn--light{background:#000;color:#fff}
.btn--full{width:100%}
.btn--ghost{background:transparent;color:#000;border:1px solid #000}
.icon-btn{background:transparent;border:0;color:#111;font-size:22px;cursor:pointer;min-height:44px;min-width:44px}

/* ================= HERO SLIDER ================= */
.hero--slider{padding:0;border:0;border-radius:0;box-shadow:none}
.hero--full{width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}
/* Si el hero está dentro de .container, compensa el padding */
.container .hero--full{
  width:calc(100vw + (var(--px)*2));
  margin-left:calc(50% - 50vw - var(--px));
  margin-right:calc(50% - 50vw - var(--px));
}
.hero__viewport{position:relative;height:clamp(360px,70vh,720px);overflow:hidden}
.hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .6s ease}
.hero__slide.is-active{opacity:1}
.hero__slide img{width:100%;height:100%;object-fit:cover;display:block}
.hero__overlay{
  position:absolute;inset:0;display:grid;align-content:center;pointer-events:none;
  padding:clamp(16px,6vw,80px) clamp(16px,4vw,40px);color:#fff
}
.hero__overlay::after{
  content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.55),rgba(0,0,0,.15) 60%,transparent 85%)
}
.hero__copy{position:relative;z-index:1;max-width:min(680px,92vw)}
.hero__copy h1{margin:0 0 .25em;font-size:clamp(26px,5vw,48px);line-height:1.05;font-weight:900}
.hero__copy p{margin:0 0 .9em;color:#f0f0f0}
.btn--hero{background:#fff;color:#000;border:0;padding:12px 18px;border-radius:10px;font-weight:800;pointer-events:auto}
.hero__nav{
  position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:999px;border:0;cursor:pointer;
  background:rgba(255,255,255,.95);color:#000;font-size:24px;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.2)
}
.hero__nav.prev{left:12px}.hero__nav.next{right:12px}
.hero__dots{position:absolute;left:50%;transform:translateX(-50%);bottom:14px;display:flex;gap:8px}
.hero__dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.6);cursor:pointer}
.hero__dots button.is-active{background:#fff}
@media (max-width:520px){.hero__nav{width:38px;height:38px;font-size:20px}}

/* ================= PRODUCTOS ================= */
.section-title{margin:24px 0}
.section-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.products{padding-block:16px 32px}
.chip{background:#f5f5f5;color:#111;border:1px solid #e6e6e6;border-radius:999px;padding:8px 12px;cursor:pointer;min-height:36px}
.chip.is-active{background:#000;color:#fff;border-color:#000}
.grid{display:grid;gap:16px}
.products__grid{grid-template-columns:repeat(4,1fr)}
@media (max-width:1200px){.products__grid{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){.products__grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.products__grid{grid-template-columns:1fr}}
.card{
  background:#fff;color:#111;border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 6px 16px rgba(0,0,0,.04)
}
.card__img{width:100%;aspect-ratio:4/5;object-fit:cover;background:#f3f3f3}
.card__body{padding:12px;display:grid;gap:8px}
.card__title{margin:0;font-weight:800;font-size:1rem}
.card__title a{text-decoration:none}
.card__title a:hover{text-decoration:underline}
.card__meta{display:flex;justify-content:space-between;color:#555;font-size:14px;margin-bottom:6px}
.card__actions{display:flex;gap:8px;margin-top:auto}

/* Inputs (página) */
.input{width:100%;padding:12px;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111}
.input::placeholder{color:#9a9a9a}

/* ================= CART PANEL ================= */
/* Dark por defecto; al abrir cambia a claro con transición */
.cart{
  --panel-bg:#0a0a0a;--panel-fg:#fff;--panel-line:#1a1a1a;--panel-muted:#a0a0a0;
  position:fixed;inset-block:0;right:-420px;width:400px;max-width:90vw;height:100dvh;
  background:var(--panel-bg);color:var(--panel-fg);border-left:1px solid var(--panel-line);
  display:flex;flex-direction:column;transition:right .25s ease,background .25s ease,color .25s ease,border-color .25s ease;z-index:20
}
.cart.open{right:0;--panel-bg:#fff;--panel-fg:#111;--panel-line:#e9e9e9;--panel-muted:#666}
.cart__header,.cart__footer{padding:16px;border-bottom:1px solid var(--panel-line)}
.cart__footer{border-bottom:0;border-top:1px solid var(--panel-line);display:grid;gap:10px}
.cart__title{margin:0}
.cart__items{padding:12px;flex:1;overflow:auto;scroll-padding:16px}
.cart-item{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;border-bottom:1px solid var(--panel-line);padding:10px 0}
.cart-item img{width:56px;height:56px;object-fit:cover;border-radius:8px;border:1px solid var(--panel-line)}
.cart-item .title{font-weight:700}
.qty{display:flex;align-items:center;gap:6px}
.qty button{width:28px;height:28px;border-radius:6px;border:1px solid var(--panel-line);background:transparent;color:var(--panel-fg);cursor:pointer}
.cart .muted{color:var(--panel-muted)}
.cart .icon-btn{color:var(--panel-fg)}
.cart .btn--full{background:#000;color:#fff} /* CTA consistente */
.cart .btn--ghost{background:transparent;color:var(--panel-fg);border:1px solid var(--panel-line)}
.cart .input{background:var(--panel-bg);color:var(--panel-fg);border:1px solid var(--panel-line)}
.cart.open .input{background:#fff;color:#111;border-color:#ddd}

/* Backdrop */
.backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);opacity:0;pointer-events:none;transition:opacity .2s;z-index:15;backdrop-filter:blur(2px)}
.backdrop.show{opacity:1;pointer-events:auto}

/* Footer */
.footer{border-top:1px solid var(--line);background:#f7f7f7;color:#333;padding-block:24px}
.footer__inner{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.footer__nav{display:flex;gap:12px;flex-wrap:wrap}
.footer__link{color:#333;text-decoration:none;padding:6px 8px;border-radius:8px}
.footer__link:hover{background:#ececec}

/* ================= PDP ================= */
.pdp{display:grid;gap:1rem;padding-block:clamp(12px,4vw,24px)}
.gallery{display:grid;gap:.75rem}
.pdp-hero{margin:0;border:1px solid var(--line);border-radius:.75rem;overflow:hidden;background:#f5f5f5}
.pdp-hero img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block}
.thumbs{display:grid;grid-auto-flow:column;gap:.5rem;overflow:auto;padding-bottom:.25rem;scroll-snap-type:x mandatory}
.thumbs button{scroll-snap-align:center;border:1px solid var(--line);background:#fff;border-radius:.5rem;padding:0;width:72px;height:72px;overflow:hidden;cursor:pointer}
.thumbs img{width:100%;height:100%;object-fit:cover;display:block}
.pdp-info{display:grid;gap:.75rem}
.pdp-desc{margin:.5rem 0 0;color:#555}
.opt{display:grid;gap:.75rem;margin-top:.5rem}
.color-wrap,.size-wrap{display:flex;flex-wrap:wrap;gap:.5rem}
.color-btn,.size-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem .7rem;border:1px solid #ddd;border-radius:.5rem;background:#fff;color:#111;cursor:pointer;min-height:36px}
.color-btn[aria-pressed="true"],.size-btn[aria-pressed="true"]{outline:2px solid #000;outline-offset:2px}
.color-dot{width:20px;height:20px;border-radius:999px;border:1px solid #ddd}
.actions{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:.5rem}
.qty-label{display:flex;align-items:center;gap:.5rem}
.pdp input[type="number"]{width:76px;padding:.5rem;border-radius:10px;border:1px solid #ddd;background:#fff;color:#111}
@media (min-width:900px){
  .pdp{grid-template-columns:1.1fr 1fr;align-items:start}
  .thumbs{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible;padding:0}
  .thumbs button{width:auto;height:auto;aspect-ratio:1/1}
}

/* Layout tweaks */
@media (min-width:1280px){.container{max-width:1200px}}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
/* ===== Fix: hero centrado + controles responsivos ===== */

/* Centrar contenido y CTA */
.hero__overlay{
  place-items:center;          /* centra vertical y horizontal */
  text-align:center;
}
.hero__copy{ max-width:min(900px,92vw) }
.btn--hero{ margin-inline:auto } /* centra el botón */

/* Degradado más neutro para centrar texto sin oscurecer solo a la izquierda */
.hero__overlay::after{
  background:linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.15));
}

/* Dots y flechas fluidos (se ven bien en móvil y desktop) */
.hero__dots{
  bottom: clamp(10px, 2.5vw, 24px);
  gap: clamp(6px, 1.2vw, 12px);
}
.hero__dots button{
  width: clamp(8px, 1.2vw, 14px);
  height: clamp(8px, 1.2vw, 14px);
  border-radius: 50%;
}

.hero__nav{
  width: clamp(36px, 4.5vw, 54px);
  height: clamp(36px, 4.5vw, 54px);
  font-size: clamp(18px, 3.5vw, 26px);
}

/* Si quisieras volver a alinear a la izquierda en desktop:
@media (min-width: 1024px){
  .hero__overlay{ justify-items:start; text-align:left }
  .btn--hero{ margin-inline:0 }
}
*/
/* Redes en header */
.social{ display:flex; gap:10px; align-items:center }
.social a{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:999px;
  color:#fff; text-decoration:none;
  border:1px solid #333; background:transparent;
  transition:background .2s, color .2s, border-color .2s, transform .15s;
}
.social a:hover{ background:#fff; color:#000; border-color:#fff; transform:translateY(-1px) }
.social svg{ width:18px; height:18px; display:block }

/* En el drawer móvil (fondo negro) */
.nav .social{ margin-top:8px }
.nav .social a{ border-color:#444 }
.nav .social a:hover{ background:#fff; color:#000; border-color:#fff }

/* Visibilidad: desktop vs móvil */
.social--desk{ display:none }
@media (min-width:768px){
  .social--desk{ display:flex }
  .social--mobile{ display:none }
}
/* Botón de carrito como ícono redondo */
.cart-btn--icon{
  position: relative;
  width: 44px; height: 44px; padding: 0;
  display: grid; place-items: center;
  border-radius: 999px; background:#fff; color:#000; border:0;
}
.cart-btn__icon{ width: 22px; height: 22px; display:block }

/* Burbuja del contador en la esquina */
.cart-btn--icon .cart-count{
  position: absolute; top: -6px; right: -6px;
  min-width: 20px; height: 20px; padding: 0 4px;
  display: grid; place-items: center;
  border-radius: 999px; font-size: 12px; line-height: 1;
  background:#000; color:#fff; border:2px solid #fff;
  margin-left: 0; /* anula regla anterior del badge */
}
/* Tarjeta: contenedor relativo para poder ubicar el badge */
.card__imgwrap{ position:relative; display:block; border-radius:var(--radius); overflow:hidden }

/* Badge de stock */
.badge{
  position:absolute; top:8px; left:8px;
  padding:6px 10px; border-radius:999px; font-weight:700; font-size:12px;
  background:#000; color:#fff; border:1px solid rgba(255,255,255,.2);
  box-shadow:0 6px 14px rgba(0,0,0,.18);
}
.badge--stock.is-out{
  background:#9b1c1c; /* rojito suave para agotado */
}
/* PDP: estado de stock (opcional) */
#stockStatus{ font-weight:600 }
#stockStatus::before{ content:""; display:inline-block; width:.6em; height:.6em; border-radius:50%; margin-right:.4em; vertical-align:middle; background:#16a34a }
.add-to-cart[disabled], .buy-now[disabled]{ opacity:.5; cursor:not-allowed }

/* cuando está agotado, lo sobreescribe JS via texto; si quieres color:
   añade una clase con JS; por simplicidad dejamos el círculo verde base */
/* Select con el mismo look de .input */
select.input {
  appearance: none;
  background: #fff;
  color: #111;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 12px;
}
.cart.open select.input { background:#fff; color:#111; border-color:#ddd }
/* ===== Carrito en 2 pasos ===== */
.cart__step{ display:none }
.cart__step.is-active{ display:block }
.cart__actions{ display:flex; gap:8px; margin-top:8px }
#cartTitle{ transition:color .2s }
/* Swatches en cards del index */
.swatches{ display:flex; gap:8px; margin-top:6px; align-items:center }
.swatch{
  --sz:24px;
  display:grid; place-items:center;
  min-width:32px; min-height:32px; padding:2px;
  background:#fff; border:1px solid #ddd; border-radius:999px;
  cursor:pointer; transition:transform .12s ease;
}
.swatch:hover{ transform:translateY(-1px) }
.swatch__dot{
  width:var(--sz); height:var(--sz); border-radius:999px;
  border:1px solid rgba(0,0,0,.12); display:block;
}
.swatch.is-active{ outline:2px solid #000; outline-offset:2px }
.swatch:focus-visible{ outline:2px solid #000; outline-offset:2px }


/* Botones deshabilitados */
.btn[disabled]{ opacity:.5; cursor:not-allowed }

/* Hovercito sutil */
.cart-btn--icon:hover{ transform: translateY(-1px) }
.cart-btn--icon{ transition: transform .15s ease }