*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);background:var(--bg);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--fh);font-weight:600;line-height:1.02;letter-spacing:-.02em}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.wrap{max-width:1280px;margin:0 auto;padding:0 32px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;background:var(--brand);color:var(--brand-ink);font-family:var(--fh);font-weight:600;font-size:13px;letter-spacing:.12em;text-transform:uppercase;border:0;border-radius:2px;cursor:pointer;transition:opacity .2s,transform .2s}
.btn:hover{opacity:.88}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.full{width:100%}
.btn.big{padding:20px 32px;font-size:14px;border-radius:12px}
.link{display:inline-flex;align-items:center;gap:8px;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1.5px solid currentColor;padding-bottom:3px}
.kick{display:block;font-family:var(--fh);font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}

.topbar{background:#0D0D0D;color:#EDEDED;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase}
.topbar-in{display:flex;justify-content:space-between;align-items:center;height:36px}
.tb-links{display:flex;gap:18px}
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:76px}
.cats{display:flex;gap:28px;font-family:var(--fh);font-size:12.5px;font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.cats a{opacity:.75;transition:opacity .2s}
.cats a:hover{opacity:1}
.marca{font-family:var(--fh);font-size:30px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;text-align:center}
.marca img{height:38px;width:auto;margin:0 auto}
.acciones{display:flex;justify-content:flex-end;gap:22px}
.acc-l{display:inline-flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;font-family:var(--fh);font-size:12.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase}
.acc-l.pulse{animation:pulse .5s}
@keyframes pulse{50%{transform:scale(1.1)}}

.hero{position:relative;overflow:hidden;background:var(--bg2);min-height:min(86vh,760px);display:flex}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero.split .hero-bg{left:auto;width:52%;object-position:center}
/* Escritorio: la foto del hero entra entera por alto (cabezas y letras completas) y los lados se
   rellenan con la pared y el piso de la misma foto (tienda.js copia sus bordes), así se ve lo de abajo. */
@media (min-width:961px){
  .hero.full{min-height:min(86vh,760px,56.25vw);background-repeat:no-repeat;background-size:50.5% 100%;background-position:left top,right top}
  .hero.full .hero-bg{left:50%;right:auto;width:auto;max-width:none;transform:translateX(-50%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
}
.hero-word{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;font-family:var(--fh);font-weight:600;font-size:clamp(90px,19vw,300px);letter-spacing:-.04em;line-height:.8;text-transform:uppercase;opacity:.92;white-space:nowrap}
.hero-in{position:relative;flex:1;display:flex;flex-direction:column;justify-content:space-between;padding-top:56px;padding-bottom:56px;min-height:inherit}
.hero-frase{font-family:var(--fh);font-size:14px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;line-height:1.9;max-width:22em}
.hero-frase::after{content:"";display:block;width:56px;height:1.5px;background:currentColor;margin-top:14px}
.hero-cta{display:flex;align-items:center;gap:30px;flex-wrap:wrap}
.hero-esq{position:absolute;right:32px;bottom:60px;text-align:left;font-family:var(--fh);font-size:13px;font-weight:500;letter-spacing:.32em;text-transform:uppercase;line-height:1.9}
.hero-esq::after{content:"";display:block;width:46px;height:1.5px;background:currentColor;margin-top:10px}

.band{background:#0D0D0D;color:#F2F2F2}
.band-in{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;padding-top:36px;padding-bottom:36px}
.bcat{display:flex;gap:22px;align-items:center}
.bcat img{width:110px;height:136px;object-fit:cover;flex:none;transition:transform .5s}
.bcat:hover img{transform:scale(1.04)}
.bcat span{display:flex;flex-direction:column;gap:6px}
.bcat b{font-family:var(--fh);font-size:20px;font-weight:500;letter-spacing:.06em;text-transform:uppercase}
.bcat small{font-size:14px;opacity:.75;max-width:14em}
.bcat u{text-decoration:none;display:inline-flex;align-items:center;gap:6px;font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:2px;align-self:flex-start;margin-top:6px}

.promo{position:relative;background:var(--bg2);min-height:480px;overflow:hidden;display:flex;align-items:center}
.promo img{position:absolute;right:0;top:0;height:100%;width:100%;object-fit:cover;object-position:right center}
.promo-in{position:relative;width:100%;padding-top:64px;padding-bottom:64px}
.promo h2{font-size:clamp(48px,6vw,84px);text-transform:uppercase;letter-spacing:-.01em;line-height:.95;margin-bottom:18px}
.promo p{font-size:18px;max-width:16em;margin-bottom:28px;color:var(--ink)}

.bens{background:var(--bg2);border-top:1px solid var(--line)}
.bens-in{display:grid;grid-template-columns:repeat(4,1fr);gap:28px;padding-top:44px;padding-bottom:44px}
.ben{display:flex;gap:16px;align-items:center}
.ben b{display:block;font-family:var(--fh);font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.ben small{color:var(--muted);font-size:13.5px}

.sec{padding-top:72px;padding-bottom:72px}
.sec-h{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:30px}
.sec-h h2,.sec-h h1{font-size:clamp(26px,2.8vw,36px);text-transform:uppercase;letter-spacing:.02em;font-weight:600}
.sec-h span{color:var(--muted);font-size:14px}
.lead{color:var(--muted);font-size:17px;margin:-14px 0 28px;max-width:42em}
.volver{display:inline-block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}

.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.card{position:relative;display:flex;flex-direction:column}
.card-img{position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--bg2);border-radius:6px}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover .card-img img{transform:scale(1.04)}
.tag{position:absolute;top:12px;left:12px;max-width:calc(100% - 64px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--brand);color:var(--brand-ink);font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:5px 10px;border-radius:3px}
.heart{position:absolute;top:10px;right:10px;width:34px;height:34px;border-radius:50%;border:0;background:rgba(255,255,255,.92);display:grid;place-items:center;cursor:pointer;transition:transform .2s}
.heart:hover{transform:scale(1.08)}
.heart.on{color:#D1293D}
.heart.on svg{fill:currentColor}
.heart.sq{position:static;width:62px;height:62px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface);flex:none}
.quick{position:absolute;left:12px;right:12px;top:calc(100% - 46px - 64px);height:46px;display:flex;align-items:center;justify-content:center;background:var(--brand);color:var(--brand-ink);border:0;border-radius:4px;font-family:var(--fh);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .25s,transform .25s}
.card:hover .quick{opacity:1;transform:none}
.card-b{padding:14px 2px 0;display:flex;flex-direction:column;gap:3px}
.card h3{font-family:var(--fb);font-size:15px;font-weight:500;letter-spacing:0;line-height:1.35}
.precio{font-weight:600;font-size:15px}
.precio s{color:var(--muted);font-weight:400;margin-left:6px}
.precio em{font-style:normal;background:var(--brand);color:var(--brand-ink);font-size:13px;font-weight:600;padding:4px 10px;border-radius:5px;margin-left:10px;vertical-align:4px}
.precio.big{font-family:var(--fh);font-size:34px;font-weight:600;margin:14px 0 18px}
.precio.big s{font-size:20px}

.faq h2{font-size:clamp(26px,2.8vw,36px);text-transform:uppercase;margin-bottom:20px}
.faq details{border-bottom:1px solid var(--line);padding:20px 0}
.faq summary{cursor:pointer;font-weight:600;font-size:17px;list-style:none;display:flex;justify-content:space-between}
.faq summary::after{content:"+";font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{color:var(--muted);margin-top:10px;max-width:46em}

.contacto{display:grid;grid-template-columns:1fr 1.25fr;gap:48px;align-items:center;border-top:1px solid var(--line)}
.contacto h2{font-size:clamp(30px,3.2vw,42px);text-transform:uppercase;margin-bottom:10px}
.contacto p{color:var(--muted)}
.contacto form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.contacto input{padding:16px;border:1px solid var(--line);background:var(--surface);border-radius:4px}
.contacto input[name=message],.contacto .btn,.ok{grid-column:1/-1}
.ok{font-weight:600}

.ficha{display:grid;grid-template-columns:1.15fr 1fr;gap:56px;padding-top:40px;padding-bottom:40px;align-items:start}
.galeria{display:grid;grid-template-columns:96px 1fr;gap:16px}
.thumbs{display:flex;flex-direction:column;gap:12px}
.thumbs button{border:1.5px solid transparent;border-radius:12px;overflow:hidden;padding:0;background:var(--bg2);cursor:pointer;aspect-ratio:3/4}
.thumbs button.on{border-color:var(--ink)}
.thumbs img{width:100%;height:100%;object-fit:cover}
.main-img{border-radius:16px;overflow:hidden;background:var(--bg2);aspect-ratio:4/5}
.main-img img{width:100%;height:100%;object-fit:cover}
.pill{display:inline-block;background:var(--bg2);font-size:13px;font-weight:500;padding:5px 12px;border-radius:6px;margin-bottom:16px}
.ficha h1{font-size:clamp(34px,3.6vw,50px);letter-spacing:-.025em}
.desc{font-size:17px;color:var(--ink);opacity:.85;max-width:30em;padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:22px}
.op-g{margin-bottom:22px}
.op-t{font-size:15px;margin-bottom:12px}
.op-t b{font-weight:500;color:var(--muted)}
.swatches{display:flex;gap:14px}
.sw{width:42px;height:42px;border-radius:50%;background:var(--c);border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);cursor:pointer;outline:2px solid transparent;outline-offset:3px}
.sw.on{outline-color:var(--ink)}
.tallas{display:flex;gap:10px;flex-wrap:wrap}
.ta{min-width:58px;height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;font-weight:500}
.ta.on{background:var(--brand);color:var(--brand-ink);border-color:var(--brand)}
.comprar{display:flex;gap:12px;margin:26px 0 12px}
.comprar .btn{flex:1}
.qty{display:flex;align-items:center;border:1.5px solid var(--line);border-radius:12px;background:var(--surface)}
.qty button{width:42px;height:58px;border:0;background:none;font-size:20px;cursor:pointer}
.qty input{width:34px;text-align:center;border:0;background:none;font-weight:600}
.quedan{color:#B42318;font-weight:600;font-size:14px;margin-bottom:8px}
.wa{margin:6px 0 4px}
.trust{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:26px}
.trust div{display:flex;gap:10px;align-items:flex-start}
.trust b{display:block;font-size:12.5px;font-weight:600}
.trust small{display:block;font-size:12px;color:var(--muted)}

.detalle{display:grid;grid-template-columns:1fr 1fr;gap:56px;padding-top:40px;padding-bottom:40px;align-items:start}
.tabs{display:flex;gap:30px;border-bottom:1px solid var(--line);margin-bottom:22px}
.tabs button{background:none;border:0;padding:12px 0;font-size:15px;color:var(--muted);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs button.on{color:var(--ink);font-weight:600;border-color:var(--ink)}
.tab p{font-size:16px;max-width:32em;margin-bottom:18px}
.tab ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.tab li{display:flex;gap:12px;align-items:center;font-size:15px}
.detalle-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--bg2)}
.detalle-img img{width:100%;height:100%;object-fit:cover}

.check{display:grid;grid-template-columns:1.3fr 1fr;gap:56px;padding-top:44px;padding-bottom:88px;align-items:start}
.check h1{font-size:44px;text-transform:uppercase;margin-bottom:14px}
.check form{display:flex;flex-direction:column;gap:14px}
.check label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:500}
.check input,.check textarea{padding:15px 16px;border-radius:8px;border:1px solid var(--line);background:var(--surface)}
.check fieldset{border:0;display:flex;gap:10px;flex-wrap:wrap}
.check legend{font-size:14px;font-weight:500;margin-bottom:6px}
.op{flex-direction:row!important;align-items:center;gap:10px!important;padding:15px 16px;border:1px solid var(--line);border-radius:8px;background:var(--surface);cursor:pointer;flex:1}
.resumen{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:26px;position:sticky;top:100px}
.resumen h3{font-size:20px;text-transform:uppercase;letter-spacing:.04em;margin-bottom:12px}
.fila{display:flex;justify-content:space-between;padding:8px 0}
.fila.total{border-top:1px solid var(--line);margin-top:6px;padding-top:14px;font-size:19px}
.nota{font-size:13px;color:var(--muted);margin-top:12px}
.err{color:#B42318;font-weight:500}
.li{display:flex;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.li img{width:60px;height:74px;border-radius:6px;object-fit:cover}
.li div{flex:1;font-size:14px}
.li small{color:var(--muted)}
.li .q{display:flex;align-items:center;gap:10px;margin-top:6px}
.li .q button{width:26px;height:26px;border-radius:50%;border:1px solid var(--line);background:none;cursor:pointer}

.drawer{position:fixed;inset:0;z-index:50;pointer-events:none}
.drawer-bg{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity .3s}
.drawer-in{position:absolute;top:0;right:0;bottom:0;width:min(430px,92vw);background:var(--bg);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column}
.drawer.open{pointer-events:auto}
.drawer.open .drawer-bg{opacity:1}
.drawer.open .drawer-in{transform:none}
.drawer-h{display:flex;justify-content:space-between;align-items:center;padding:22px 26px;border-bottom:1px solid var(--line)}
.drawer-h h3{font-size:18px;text-transform:uppercase;letter-spacing:.06em}
.drawer-h button{border:0;background:none;font-size:30px;cursor:pointer;line-height:1}
.drawer-items{flex:1;overflow:auto;padding:6px 26px}
.drawer-f{padding:20px 26px;border-top:1px solid var(--line)}
.drawer-f .fila{margin-bottom:12px;font-size:17px}
.vacio{text-align:center;padding:110px 24px;display:flex;flex-direction:column;align-items:center;gap:18px}
.vacio h1{font-size:44px;text-transform:uppercase}
.gracias .check-ok{width:84px;height:84px;border-radius:50%;background:var(--brand);color:var(--brand-ink);display:grid;place-items:center}
.gracias p{color:var(--muted);font-size:18px;max-width:30em}

.pie{background:#0D0D0D;color:#BDBDBD;padding:64px 0 26px}
.pie-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.pie .marca{color:#fff;text-align:left;margin-bottom:12px;font-size:24px}
.pie p{max-width:26em}
.pie h4{color:#fff;font-family:var(--fh);font-size:12px;font-weight:600;margin-bottom:14px;text-transform:uppercase;letter-spacing:.16em}
.pie a,.pie span{display:block;font-size:14px;margin-bottom:9px}
.legal{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);font-size:12px;letter-spacing:.06em}

@media (max-width:960px){
  .sec{padding-top:64px;padding-bottom:64px}
  .sec-h{margin-bottom:24px}
  .hero-in{padding-top:40px;padding-bottom:44px}
  .band-in{gap:30px;padding-top:40px;padding-bottom:40px}
  .promo-in{padding-top:48px;padding-bottom:56px}
  .bens-in{gap:28px;padding-top:44px;padding-bottom:44px}
  .ficha{padding-top:28px;padding-bottom:40px}
  .detalle{padding-top:24px;padding-bottom:48px}
  .check{padding-top:32px;padding-bottom:64px}
  .faq details{padding:18px 0}
  .contacto{padding-top:56px;padding-bottom:64px}
  .pie{padding-top:56px}
  .pie-in{gap:32px}
  .wrap{padding-left:18px;padding-right:18px}
  .topbar .tb-links{display:none}
  .top-in{grid-template-columns:auto 1fr;height:64px}
  .cats{display:none}
  .marca{text-align:left;font-size:22px}
  .acc-l span{display:none}.acc-l[data-abrir-carrito] span{display:inline}
  .hero{min-height:620px}
  .hero.split .hero-bg{width:100%;opacity:.35}
  .hero-esq{display:none}
  .hero-cta{gap:18px}
  .hero-frase{font-size:12px}
  .band-in{grid-template-columns:1fr;gap:20px}
  .promo{min-height:560px;align-items:flex-end}
  .promo img{width:100%;height:62%}
  .promo-in{background:linear-gradient(transparent,var(--bg2) 30%)}
  .bens-in{grid-template-columns:1fr}
  .grid{grid-template-columns:1fr 1fr;gap:34px 14px}
  .quick{opacity:1;transform:none;height:38px;top:calc(100% - 38px - 70px);font-size:11px}
  .ficha,.detalle,.check,.contacto{grid-template-columns:1fr;gap:28px}
  .galeria{grid-template-columns:1fr}
  .thumbs{flex-direction:row;order:2}.thumbs button{width:72px}
  .trust{grid-template-columns:1fr}
  .resumen{position:static}
  .contacto form{grid-template-columns:1fr}
  .pie-in{grid-template-columns:1fr}
}