/* ================================
   HARDASF — style.css
   Elixir-inspired editorial design
   ================================ */

:root {
  --ink:    #0d0d0d;
  --ink2:   #1a1a1a;
  --smoke:  #f2f2f0;
  --mist:   #e8e8e6;
  --dust:   #999999;
  --line:   #e0e0de;
  --red:    #C8000A;
  --white:  #ffffff;

  --ff-head: 'Bebas Neue', sans-serif;
  --ff-cond: 'Barlow Condensed', sans-serif;
  --ff-body: 'Barlow', sans-serif;

  --nav-h: 58px;
  --ease: 0.22s cubic-bezier(.4,0,.2,1);
}

/* RESET */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{background:var(--white);color:var(--ink);font-family:var(--ff-body);font-weight:300;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased;}
img{display:block;max-width:100%;}
a{text-decoration:none;color:inherit;}
button{cursor:pointer;border:none;background:none;font-family:inherit;color:inherit;}

/* BUTTONS */
.cta-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--ink);color:var(--white);
  font-family:var(--ff-cond);font-weight:700;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:13px 28px;
  transition:background var(--ease),transform var(--ease);
}
.cta-btn:hover{background:var(--ink2);transform:translateY(-1px);}
.cta-btn--inv{background:var(--white);color:var(--ink);}
.cta-btn--inv:hover{background:var(--smoke);}

/* NAV */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  height:var(--nav-h);
  background:rgba(255,255,255,.97);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(12px);
  transition:box-shadow var(--ease);
}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.07);}
.nav__inner{
  max-width:1440px;margin:0 auto;padding:0 20px;
  height:100%;display:grid;grid-template-columns:1fr auto 1fr;
  align-items:center;
}
.nav__burger{
  justify-self:start;display:flex;flex-direction:column;gap:6px;padding:4px;
}
.nav__burger span{
  display:block;width:22px;height:1.5px;background:var(--ink);
  transition:transform var(--ease),opacity var(--ease);transform-origin:center;
}
.nav__burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.nav__burger.open span:nth-child(2){transform:translateY(-7.5px) rotate(-45deg);}
.nav__logo{
  justify-self:center;display:flex;align-items:center;gap:8px;
  font-family:var(--ff-head);font-size:20px;letter-spacing:.06em;
  color:var(--ink);
}
.nav__actions{justify-self:end;display:flex;align-items:center;gap:16px;}
.lang-wrap{position:relative;}
.lang-toggle{
  display:flex;align-items:center;gap:4px;
  font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.14em;color:var(--dust);
  transition:color var(--ease);padding:4px 0;
}
.lang-toggle:hover{color:var(--ink);}
.lang-drop{
  position:absolute;top:calc(100% + 10px);right:0;
  background:var(--white);border:1px solid var(--line);
  min-width:130px;max-height:260px;overflow-y:auto;
  display:none;flex-direction:column;
  box-shadow:0 8px 24px rgba(0,0,0,.1);
  z-index:200;
}
.lang-drop.open{display:flex;}
.lo{
  padding:9px 14px;font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.1em;color:var(--dust);text-align:left;
  transition:background var(--ease),color var(--ease);
}
.lo:hover{background:var(--smoke);color:var(--ink);}
.nav__cart{position:relative;color:var(--ink);padding:4px;transition:opacity var(--ease);}
.nav__cart:hover{opacity:.5;}
.cart-dot{
  display:none;position:absolute;top:2px;right:2px;
  width:6px;height:6px;border-radius:50%;background:var(--red);
}

/* MOBILE MENU */
.mob-menu{
  display:none;position:fixed;
  top:var(--nav-h);left:0;right:0;bottom:0;
  background:var(--white);z-index:99;
  flex-direction:column;
  padding:32px 24px 48px;gap:40px;
  overflow-y:auto;
}
.mob-menu.open{display:flex;}
/* Combos section override — always white bg */
.section#combos{background:var(--white);max-width:100%;padding-left:0;padding-right:0;}
.section#combos .section__head{max-width:1440px;margin:0 auto;padding:0 20px;}
.mob-nav{display:flex;flex-direction:column;}
.mob-link{
  font-family:var(--ff-head);font-size:clamp(40px,10vw,64px);
  letter-spacing:.02em;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--line);
  transition:color var(--ease);
}
.mob-link:hover{color:var(--red);}
.mob-lang-label{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--dust);margin-bottom:12px;
}
.mob-lang-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;}
.lo-m{
  padding:9px 6px;border:1px solid var(--line);
  font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.08em;color:var(--dust);text-align:center;
  transition:all var(--ease);
}
.lo-m:hover{background:var(--ink);color:var(--white);border-color:var(--ink);}
.mob-socials{display:flex;flex-direction:column;gap:8px;}
.mob-socials a{
  font-family:var(--ff-cond);font-weight:300;font-size:12px;
  letter-spacing:.12em;color:var(--dust);transition:color var(--ease);
}
.mob-socials a:hover{color:var(--ink);}

/* HERO */
.hero{
  position:relative;height:100svh;min-height:560px;
  display:flex;align-items:center;overflow:hidden;
  background:var(--ink);
  padding-top:var(--nav-h);
}
.hero__bg{position:absolute;inset:0;overflow:hidden;}
.hero__placeholder{
  width:100%;height:100%;
  background:#0d0d0d;
  /* Reemplaza con: <img src="tu-lifestyle.jpg" style="width:100%;height:100%;object-fit:cover"> */
}
/* Texto decorativo de fondo */
.hero__bg-word{
  position:absolute;
  font-family:var(--ff-head);
  font-size:clamp(180px,28vw,380px);
  letter-spacing:-.02em;
  text-transform:uppercase;
  color:rgba(255,255,255,.03);
  white-space:nowrap;
  user-select:none;
  pointer-events:none;
  right:-2%;
  top:50%;
  transform:translateY(-50%);
  line-height:1;
}
/* Línea vertical decorativa */
.hero__line{
  position:absolute;
  left:48px;top:0;bottom:0;
  width:1px;
  background:linear-gradient(to bottom,transparent,rgba(255,255,255,.1) 30%,rgba(255,255,255,.1) 70%,transparent);
}
.hero__bg img{width:100%;height:100%;object-fit:cover;}
.hero__overlay{
  position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.5) 60%,rgba(0,0,0,.2) 100%);
}
.hero__content{
  position:relative;z-index:2;
  padding:0 24px 0 64px;
  max-width:1440px;margin:0 auto;width:100%;
  display:flex;flex-direction:column;
  gap:clamp(12px,2vh,24px);
}
.hero__eyebrow{
  display:flex;align-items:center;gap:10px;
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.4em;text-transform:uppercase;color:rgba(255,255,255,.4);
}
.hero__eyebrow::before{
  content:'';display:block;width:20px;height:1px;background:var(--red);flex-shrink:0;
}
.hero__title{
  font-family:var(--ff-head);
  font-size:clamp(32px,5.5vw,76px);
  line-height:.88;letter-spacing:.01em;text-transform:uppercase;
  color:var(--white);
}
.hero__title span{color:rgba(255,255,255,.25);}
.hero__ctas{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.hero__scroll{
  position:absolute;right:32px;bottom:40px;z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:10px;
}
.hero__scroll span{
  font-family:var(--ff-cond);font-weight:300;font-size:9px;
  letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.25);
  writing-mode:vertical-rl;
}
.hero__scroll-line{
  width:1px;height:48px;
  background:linear-gradient(to bottom,rgba(255,255,255,.25),transparent);
}
.hero__stats{
  display:flex;gap:28px;padding-top:clamp(6px,1vh,12px);
  border-top:1px solid rgba(255,255,255,.08);
}
.hero__stat-item{display:flex;flex-direction:column;gap:1px;}
.hero__stat-num{
  font-family:var(--ff-head);font-size:clamp(18px,2.5vw,26px);color:var(--white);line-height:1;
}
.hero__stat-label{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.3);
}

/* STATEMENT BANNER */
.statement{
  background:var(--ink);
  padding:72px 20px;
  overflow:hidden;
  position:relative;
}
.statement__inner{
  max-width:1440px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:40px;
}
.statement__text{
  font-family:var(--ff-head);
  font-size:clamp(36px,6vw,80px);
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;
  color:rgba(255,255,255,.15);
}
.statement__text em{
  font-style:normal;color:var(--white);display:block;
}
.statement__cross{flex-shrink:0;}

/* TICKER */
.ticker{
  overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:11px 0;background:var(--smoke);
}
.ticker__track{
  display:flex;gap:20px;width:max-content;
  animation:tick 28s linear infinite;
}
.ticker__track span{
  font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.28em;text-transform:uppercase;color:var(--dust);white-space:nowrap;
}
@keyframes tick{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* SECTIONS */
.section{max-width:1440px;margin:0 auto;padding:72px 20px 80px;}
.section--alt{background:var(--smoke);max-width:100%;padding:72px 0 80px;}
.section--alt .section__head,.section--alt .cat-label,.section--alt .grid{
  max-width:1440px;margin-left:auto;margin-right:auto;padding-left:20px;padding-right:20px;
}
.section__head{
  display:flex;align-items:baseline;justify-content:space-between;
  margin-bottom:48px;padding-bottom:18px;border-bottom:1.5px solid var(--ink);
}
.section__title{
  font-family:var(--ff-head);
  font-size:clamp(44px,7vw,88px);
  letter-spacing:.02em;text-transform:uppercase;color:var(--ink);line-height:1;
}
.section__count{
  font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--dust);
}

/* CATEGORY LABEL */
.cat-label{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.35em;text-transform:uppercase;color:var(--dust);
  margin-bottom:20px;margin-top:40px;
}
.cat-label:first-of-type{margin-top:0;}

/* GRID — Elixir style: products FREE no boxes */
.grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:0;
  margin-bottom:0;
}

.pcard{cursor:pointer;position:relative;}
.pcard__img{
  position:relative;overflow:hidden;
  aspect-ratio:1;
  display:flex;align-items:center;justify-content:center;
  background:var(--white);
  padding:20px;
}
.section--alt .pcard__img{background:var(--smoke);}
.pcard__img img{
  width:100%;height:100%;object-fit:contain;
  transition:transform .4s cubic-bezier(.4,0,.2,1);
  /* Elixir drop shadow */
  filter:drop-shadow(0 16px 32px rgba(0,0,0,.14)) drop-shadow(0 2px 8px rgba(0,0,0,.08));
}
.pcard:hover .pcard__img img{transform:scale(1.06);}
.pcard__add{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--ink);color:var(--white);
  font-family:var(--ff-cond);font-weight:700;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;
  padding:11px;
  transform:translateY(100%);opacity:0;
  transition:transform var(--ease),opacity var(--ease);
}
.pcard:hover .pcard__add{transform:translateY(0);opacity:1;}
.pcard__name{
  font-family:var(--ff-cond);font-weight:400;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink);line-height:1.3;
  padding:12px 4px 4px;
}
.pcard__price{
  font-family:var(--ff-head);font-size:20px;
  color:var(--ink);padding:0 4px 14px;
}

/* COMBOS */
.combos{display:flex;flex-direction:column;gap:2px;}
.combo{
  display:flex;flex-direction:column;gap:24px;
  background:var(--smoke);padding:32px 20px;
}
.combo--dark{background:var(--ink);}
.combo--dark .combo__name,.combo--dark .combo__desc,.combo--dark .combo__orig,.combo--dark .combo__final{color:var(--white);}
.combo--dark .combo__orig{color:rgba(255,255,255,.4);}
.combo__imgs{
  display:flex;align-items:center;gap:16px;
}
.combo__imgs img{
  width:72px;height:72px;object-fit:contain;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.15));
  flex-shrink:0;
}
.combo__imgs--triple img{width:56px;height:56px;}
.combo__imgs span{
  font-family:var(--ff-head);font-size:20px;color:var(--red);flex-shrink:0;
}
.combo__info{display:flex;flex-direction:column;gap:10px;}
.combo__tag{
  display:inline-block;font-family:var(--ff-cond);font-weight:700;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:3px 10px;background:var(--mist);color:var(--dust);width:fit-content;
}
.combo__tag--core{background:var(--ink);color:var(--white);}
.combo__tag--triple{background:var(--red);color:var(--white);}
.combo__tag--best{background:var(--red);color:var(--white);}
.combo__name{
  font-family:var(--ff-head);font-size:clamp(26px,5vw,44px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);
}
.combo__desc{font-size:12px;color:var(--dust);letter-spacing:.03em;}
.combo__price-row{display:flex;align-items:center;gap:14px;}
.combo__orig{
  font-family:var(--ff-cond);font-weight:300;font-size:14px;
  color:var(--dust);text-decoration:line-through;
}
.combo__final{font-family:var(--ff-head);font-size:28px;color:var(--ink);}
.combo__save{
  font-family:var(--ff-cond);font-weight:700;font-size:10px;
  letter-spacing:.1em;color:var(--red);
  background:rgba(200,0,10,.08);padding:3px 8px;
}
.combo__buy{width:100%;max-width:300px;}

/* FOOTER */
.footer{border-top:1px solid var(--line);}
.footer__top{
  max-width:1440px;margin:0 auto;
  padding:56px 20px 40px;
  display:flex;flex-direction:column;gap:40px;
}
.footer__logo{
  display:flex;align-items:center;gap:8px;margin-bottom:12px;
  font-family:var(--ff-head);font-size:16px;letter-spacing:.06em;
}
.footer__tag{font-size:12px;color:var(--dust);line-height:1.7;margin-bottom:20px;}
.footer__ig{display:flex;flex-direction:column;gap:8px;}
.ig-link{
  display:flex;align-items:center;gap:7px;
  font-family:var(--ff-cond);font-weight:300;font-size:11px;
  letter-spacing:.12em;color:var(--dust);transition:color var(--ease);
}
.ig-link:hover{color:var(--ink);}
.footer__links{display:flex;gap:40px;}
.footer__col-title{
  font-family:var(--ff-cond);font-weight:700;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;color:var(--ink);margin-bottom:12px;
}
.footer__links a{
  display:block;font-size:12px;color:var(--dust);
  margin-bottom:8px;transition:color var(--ease);
}
.footer__links a:hover{color:var(--ink);}
.footer__bottom{
  max-width:1440px;margin:0 auto;
  padding:16px 20px;border-top:1px solid var(--line);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;
}
.footer__bottom p{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.1em;color:var(--dust);
}

/* MODAL */
.modal-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.55);
  z-index:200;display:none;align-items:center;justify-content:center;
  padding:20px;backdrop-filter:blur(6px);
}
.modal-bg.open{display:flex;}
.modal{
  background:var(--white);width:100%;max-width:720px;
  max-height:90vh;overflow-y:auto;position:relative;
  display:grid;grid-template-columns:1fr;
}
.modal__x{
  position:absolute;top:14px;right:14px;color:var(--dust);
  transition:color var(--ease);z-index:2;padding:4px;
}
.modal__x:hover{color:var(--ink);}
.modal__img-side{
  background:var(--smoke);display:flex;align-items:center;
  justify-content:center;padding:40px;min-height:260px;
}
.modal__img-side img{
  max-height:280px;width:auto;max-width:100%;object-fit:contain;
  filter:drop-shadow(0 20px 36px rgba(0,0,0,.15)) drop-shadow(0 4px 10px rgba(0,0,0,.08));
}
.modal__info-side{padding:28px;display:flex;flex-direction:column;gap:14px;}
.modal__cat{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.3em;text-transform:uppercase;color:var(--red);
}
.modal__name{
  font-family:var(--ff-head);font-size:clamp(20px,4vw,32px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--ink);line-height:1.1;
}
.modal__price{font-family:var(--ff-head);font-size:28px;color:var(--ink);}
.modal__sizes{display:flex;flex-direction:column;gap:8px;}
.sz-label{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.25em;text-transform:uppercase;color:var(--dust);
}
.modal__sizes{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.sz-btn{
  padding:7px 12px;border:1px solid var(--line);
  font-family:var(--ff-cond);font-weight:400;font-size:11px;
  letter-spacing:.05em;color:var(--dust);transition:all var(--ease);
}
.sz-btn:hover,.sz-btn.on{border-color:var(--ink);color:var(--ink);background:var(--smoke);}
.modal__add{width:100%;}
.modal__ship{
  font-family:var(--ff-cond);font-weight:300;font-size:10px;
  letter-spacing:.1em;color:var(--dust);text-align:center;
}

/* CART */
.cart-bg{
  position:fixed;inset:0;background:rgba(0,0,0,.3);
  z-index:150;display:none;backdrop-filter:blur(3px);
}
.cart-bg.open{display:block;}
.cart{
  position:fixed;top:0;right:-100%;width:100%;max-width:360px;
  height:100%;background:var(--white);z-index:160;
  display:flex;flex-direction:column;
  border-left:1px solid var(--line);
  transition:right var(--ease);
}
.cart.open{right:0;}
.cart__head{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--line);
  font-family:var(--ff-cond);font-weight:700;font-size:12px;
  letter-spacing:.2em;text-transform:uppercase;
}
.cart__head button{color:var(--dust);transition:color var(--ease);}
.cart__head button:hover{color:var(--ink);}
.cart__items{flex:1;overflow-y:auto;padding:18px 20px;display:flex;flex-direction:column;gap:14px;}
.cart__empty{font-size:12px;color:var(--dust);text-align:center;margin-top:40px;}
.cart__item{display:flex;gap:10px;align-items:flex-start;}
.ci__img{
  width:60px;height:60px;object-fit:contain;flex-shrink:0;
  background:var(--smoke);padding:4px;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.1));
}
.ci__info{flex:1;display:flex;flex-direction:column;gap:2px;}
.ci__name{font-family:var(--ff-cond);font-weight:400;font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);line-height:1.3;}
.ci__size{font-size:10px;color:var(--dust);}
.ci__price{font-family:var(--ff-cond);font-weight:700;font-size:13px;color:var(--ink);margin-top:3px;}
.ci__rm{color:var(--dust);transition:color var(--ease);flex-shrink:0;padding:2px;}
.ci__rm:hover{color:var(--red);}
.cart__foot{padding:18px 20px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:12px;}
.cart__total-row{display:flex;justify-content:space-between;align-items:center;}
.cart__total-row span:first-child{font-family:var(--ff-cond);font-weight:300;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--dust);}
.cart__total-row span:last-child{font-family:var(--ff-head);font-size:22px;color:var(--ink);}
.cart__secure{font-size:10px;color:var(--dust);text-align:center;letter-spacing:.04em;}

/* RESPONSIVE */
@media(min-width:640px){
  .grid{grid-template-columns:repeat(2,1fr);}
  .combos{display:grid;grid-template-columns:1fr 1fr;}
  .combo{padding:40px 32px;}
  .footer__top{flex-direction:row;justify-content:space-between;}
  .modal{grid-template-columns:1fr 1fr;}
  .modal__img-side{min-height:auto;}
}

@media(min-width:1024px){
  .grid{grid-template-columns:repeat(4,1fr);}
  .combos{grid-template-columns:repeat(2,1fr);}
  .section{padding:88px 40px 96px;}
  .section--alt .section__head,.section--alt .cat-label,.section--alt .grid{padding-left:40px;padding-right:40px;}
  .hero__content{padding:0 40px 80px;}
  .hero__scroll{right:40px;}
}

@media(min-width:1280px){
  .combos{grid-template-columns:repeat(4,1fr);}
}