/* ============================================================
   COMPONENTS · home sections · cards · categorías · inspiración
   ============================================================ */

/* ---------- SECTION HEADER ---------- */
.shead{display:flex;justify-content:space-between;align-items:flex-end;gap:clamp(24px,4vw,60px);margin-bottom:clamp(38px,5vw,64px);flex-wrap:wrap}
.shead__l{flex:1 1 440px;min-width:min(440px,100%)}
.shead h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(38px,6vw,86px);line-height:.9;letter-spacing:-.01em;margin-top:16px}
.shead h2 em{font-style:normal;color:var(--naranja-deep)}
.dark-zone .shead h2 em{color:var(--naranja)}
.shead p{margin-top:18px}
.shead .lead{flex:0 1 380px}
.shead .link-underline{flex:0 0 auto;margin-bottom:8px}

/* ---------- MARQUEE STATEMENT ---------- */
.statement{padding-block:clamp(46px,6vw,80px);overflow:hidden;background:var(--paper-2);border-block:1px solid var(--line)}
.marquee{display:flex;gap:0;white-space:nowrap;width:max-content;animation:marq 32s linear infinite}
.statement:hover .marquee{animation-play-state:paused}
@keyframes marq{to{transform:translateX(-50%)}}
.marquee span{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(34px,5vw,72px);line-height:1;letter-spacing:-.01em;color:var(--cafe);display:inline-flex;align-items:center}
.marquee span::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--naranja);margin:0 clamp(28px,4vw,56px);display:inline-block}
.marquee span.ghost{color:transparent;-webkit-text-stroke:1.5px var(--sand-2)}

/* ---------- CATEGORÍAS EDITORIAL (mosaic) ---------- */
.cats{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:clamp(12px,1.4vw,20px)}
.cat{position:relative;border-radius:var(--radius);overflow:hidden;cursor:pointer;background:var(--cafe);
  min-height:240px;box-shadow:var(--sh-sm);isolation:isolate}
.cat:nth-child(1){grid-column:span 4;grid-row:span 2}
.cat:nth-child(2){grid-column:span 2;grid-row:span 1}
.cat:nth-child(3){grid-column:span 2;grid-row:span 1}
.cat:nth-child(4){grid-column:span 2}
.cat:nth-child(5){grid-column:span 2}
.cat:nth-child(6){grid-column:span 2}
.cat__img{position:absolute;inset:0;z-index:-2}
.cat__img img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .8s}
.cat::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(35,22,12,.86) 4%,rgba(35,22,12,.28) 46%,rgba(35,22,12,.05) 100%);
  transition:opacity .6s}
.cat:hover .cat__img img{transform:scale(1.08)}
.cat__body{position:absolute;left:0;right:0;bottom:0;padding:clamp(20px,2vw,30px);color:#fff;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.cat__name{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.005em;
  font-size:clamp(24px,2.6vw,46px)}
.cat__meta{display:block;font-size:12px;letter-spacing:.04em;color:rgba(250,247,242,.78);margin-top:8px;font-weight:500;font-family:var(--font-sans);text-transform:none}
.cat__go{width:48px;height:48px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(250,247,242,.14);border:1px solid rgba(250,247,242,.3);backdrop-filter:blur(8px);
  transition:background .4s,transform .5s var(--ease-spring),color .4s}
.cat__go svg{width:18px;height:18px;transition:transform .5s var(--ease-spring)}
.cat:hover .cat__go{background:var(--naranja);color:var(--espresso);border-color:var(--naranja)}
.cat:hover .cat__go svg{transform:translate(3px,-3px)}
.cat__tab{position:absolute;top:clamp(18px,2vw,26px);left:clamp(18px,2vw,26px);z-index:1;
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;color:rgba(250,247,242,.85);
  background:rgba(35,22,12,.4);border:1px solid rgba(250,247,242,.2);backdrop-filter:blur(8px);padding:7px 13px;border-radius:100px}

/* ---------- CARRITO DE INTERÉS ---------- */
.cart-trigger{
  position:fixed;bottom:100px;right:24px;z-index:998;
  display:none;align-items:center;gap:10px;
  background:var(--cafe);color:var(--paper);
  border:none;border-radius:100px;cursor:pointer;
  padding:13px 20px 13px 16px;
  box-shadow:0 8px 28px rgba(35,22,12,.35);
  transition:transform .4s var(--ease-spring),box-shadow .3s,background .2s;
  font-family:var(--font-sans);font-size:14px;font-weight:600;
}
.cart-trigger.has-items{display:flex}
.cart-trigger:hover{background:var(--espresso);transform:translateY(-3px);box-shadow:0 14px 36px rgba(35,22,12,.45)}
.cart-trigger svg{width:20px;height:20px;flex-shrink:0}
.cart-trigger__label{white-space:nowrap}
.cart-badge{
  background:var(--naranja);color:var(--espresso);
  font-size:11px;font-weight:800;line-height:1;
  min-width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;padding:0 4px;
  margin-left:-4px;flex-shrink:0;
}
/* overlay */
.cart-overlay{
  position:fixed;inset:0;z-index:999;
  background:rgba(35,22,12,.45);backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;transition:opacity .35s;
}
.cart-overlay.open{opacity:1;pointer-events:all}
/* panel */
.cart-panel{
  position:fixed;top:0;right:0;bottom:0;z-index:1000;
  width:min(420px,100vw);
  background:var(--paper);
  box-shadow:-20px 0 60px rgba(35,22,12,.25);
  display:flex;flex-direction:column;
  transform:translateX(100%);
  transition:transform .42s var(--ease-out);
}
.cart-panel.open{transform:none}
.cart-panel__head{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:28px 24px 20px;border-bottom:1px solid var(--line);
  background:var(--paper);
}
.cart-panel__head h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:26px;line-height:1}
.cart-panel__head p{color:var(--muted);font-size:13px;margin-top:4px}
.cart-panel__close{
  width:38px;height:38px;border-radius:50%;border:1.5px solid var(--line);
  background:none;cursor:pointer;display:grid;place-items:center;flex-shrink:0;
  transition:background .2s,border-color .2s;
}
.cart-panel__close:hover{background:var(--cream);border-color:var(--line-strong)}
.cart-panel__close svg{width:16px;height:16px}
.cart-panel__body{flex:1;overflow-y:auto;padding:20px 24px}
.cart-empty{color:var(--muted);font-size:14.5px;line-height:1.7;text-align:center;padding:40px 0}
.cart-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.cart-item{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;border-radius:14px;background:#fff;
  border:1px solid var(--line);
  transition:background .2s;
}
.cart-item:hover{background:var(--cream)}
.cart-item__info{flex:1;min-width:0}
.cart-item__name{font-size:15px;font-weight:600;letter-spacing:-.01em;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cart-item__price{font-size:13px;color:var(--naranja-deep);font-weight:700;display:block;margin-top:2px}
.cart-item__del{
  width:30px;height:30px;flex-shrink:0;border-radius:50%;
  background:none;border:1.5px solid var(--line);cursor:pointer;
  display:grid;place-items:center;
  transition:background .2s,border-color .2s,color .2s;color:var(--muted);
}
.cart-item__del:hover{background:#fbe4df;border-color:#f5c1b8;color:#c0392b}
.cart-item__del svg{width:13px;height:13px}
.cart-panel__foot{
  padding:20px 24px 28px;border-top:1px solid var(--line);
  background:var(--paper);display:flex;flex-direction:column;gap:10px;
}
.btn--wa{background:#25d366;color:#fff;border-color:#25d366;justify-content:center;gap:10px}
.btn--wa:hover{background:#1db954;border-color:#1db954}
.btn--wa svg{width:20px;height:20px}
.cart-clear{background:none;border:none;cursor:pointer;color:var(--muted);font-size:13px;font-weight:600;text-align:center;padding:4px;transition:color .2s}
.cart-clear:hover{color:#c0392b}
/* toast */
.cart-toast{
  position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--cafe);color:var(--paper);
  padding:12px 22px;border-radius:100px;font-size:14px;font-weight:600;
  z-index:1100;opacity:0;transition:opacity .3s,transform .3s var(--ease-spring);
  white-space:nowrap;pointer-events:none;box-shadow:var(--sh-md);
}
.cart-toast.in{opacity:1;transform:translateX(-50%) translateY(0)}
/* botón "Me interesa" — chip esquina superior derecha, fuera del <a> */
.pcard__interest{
  position:absolute;top:14px;right:14px;z-index:4;
  background:rgba(250,247,242,.88);color:var(--cafe);
  border:none;cursor:pointer;font-family:var(--font-sans);
  transition:background .25s,color .25s,transform .3s var(--ease-spring);
}
.pcard__interest:hover{background:var(--paper);transform:scale(1.06)}
.pcard__interest.added{background:var(--naranja);color:var(--espresso)}

/* ---------- PRODUCT CARDS (premium, 3D tilt) ---------- */
.prods{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:clamp(16px,2vw,30px)}
.pcard{position:relative;cursor:pointer;border-radius:var(--radius);background:var(--paper);isolation:isolate;
  transform-style:preserve-3d;transition:transform .5s var(--ease-out),box-shadow .5s var(--ease-out);
  will-change:transform}
.pcard:hover{box-shadow:var(--sh-lg)}
.pcard__media{position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  background:var(--cream);transform:translateZ(0)}
.pcard__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out),filter .6s}
.pcard:hover .pcard__media img{transform:scale(1.09)}
.pcard__shade{position:absolute;inset:0;background:linear-gradient(to top,rgba(35,22,12,.6),transparent 50%);
  opacity:0;transition:opacity .5s}
.pcard:hover .pcard__shade{opacity:1}
.pcard__tags{position:absolute;top:14px;left:14px;display:flex;gap:7px;z-index:2}
.chip{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;padding:6px 11px;border-radius:100px;backdrop-filter:blur(8px)}
.chip--new{background:var(--naranja);color:var(--espresso)}
.chip--off{background:rgba(35,22,12,.62);color:#fff}
.chip--soft{background:rgba(250,247,242,.85);color:var(--cafe)}
.pcard__fav{position:absolute;top:12px;right:12px;z-index:2;width:38px;height:38px;border-radius:50%;
  background:rgba(250,247,242,.85);backdrop-filter:blur(8px);display:grid;place-items:center;
  opacity:0;transform:translateY(-6px) scale(.9);transition:opacity .45s,transform .5s var(--ease-spring),background .3s,color .3s}
.pcard:hover .pcard__fav{opacity:1;transform:none}
.pcard__fav:hover{background:var(--cafe);color:var(--paper)}
.pcard__fav svg{width:17px;height:17px}
.pcard__quick{position:absolute;left:14px;right:14px;bottom:14px;z-index:2;display:flex;gap:9px;
  transform:translateY(14px);opacity:0;transition:opacity .45s var(--ease-out),transform .55s var(--ease-out)}
.pcard:hover .pcard__quick{opacity:1;transform:none}
.pcard__quick .btn{flex:1;justify-content:center;padding:13px;font-size:13.5px;backdrop-filter:blur(10px)}
.pcard__quick .qb{width:46px;flex:0 0 auto;background:rgba(250,247,242,.9);color:var(--cafe);border-radius:100px;display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--ease-spring)}
.pcard__quick .qb:hover{background:var(--naranja);color:var(--espresso)}
.pcard__quick .qb svg{width:18px;height:18px}
.pcard__body{padding:18px 6px 4px;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.pcard__cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pcard__name{font-size:18px;font-weight:600;margin-top:5px;letter-spacing:.01em;line-height:1.2;text-transform:uppercase}
.pcard__price{text-align:right;flex-shrink:0}
.pcard__price b{font-size:18px;font-weight:700;letter-spacing:-.01em;display:block}
.pcard__price s{font-size:13px;color:var(--muted);font-weight:400}
.pcard__swatches{display:flex;gap:6px;margin-top:12px;padding:0 6px}
.sw{width:18px;height:18px;border-radius:50%;border:1.5px solid #fff;box-shadow:0 0 0 1px var(--line)}

/* ============================================================
   CÓMO FUNCIONA "MI LISTA" — demo animada CSS
   ============================================================ */
.howto__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.howto__step{position:relative;background:var(--paper-2);border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:clamp(24px,3vw,36px);overflow:hidden}
.howto__num{font-family:var(--font-display);font-size:clamp(40px,5vw,68px);line-height:1;
  color:var(--sand-2);display:block}
.howto__step h3{font-size:clamp(19px,2vw,23px);font-weight:600;letter-spacing:-.01em;margin-top:8px}
.howto__step p{color:var(--muted);font-size:14.5px;margin-top:8px;line-height:1.6}
.howto__step p b{color:var(--cafe);font-weight:600}
/* escenario de cada demo */
.howto__stage{position:relative;height:230px;display:grid;place-items:center;margin:18px 0 24px;
  background:var(--cream);border-radius:var(--radius);overflow:hidden}

/* ---- Paso 1: tarjeta + cursor + chip ---- */
.demo-card{position:relative;width:160px;border-radius:16px;overflow:hidden;background:#fff;
  box-shadow:var(--sh-sm)}
.demo-card__img{height:120px;background:linear-gradient(135deg,var(--sand) 0%,var(--sand-2) 100%)}
.demo-card__foot{padding:12px 14px;font-size:13px}
.demo-chip{position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding:6px 11px;border-radius:100px;backdrop-filter:blur(8px);
  background:rgba(250,247,242,.9);color:var(--cafe);overflow:hidden}
.demo-chip__a,.demo-chip__b{display:block}
.demo-chip__b{position:absolute;inset:0;display:grid;place-items:center;background:var(--naranja);
  color:var(--espresso);opacity:0}
.demo-cursor{position:absolute;width:22px;height:22px;z-index:3;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' stroke='%23372514' stroke-width='1.5' d='M5 3l15 9-6 1.5L18 20l-3 1-3.5-6.5L7 18z'/%3E%3C/svg%3E") center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3));
  top:50%;left:50%;animation:demoCursor 5s var(--ease-out) infinite}
@keyframes demoCursor{
  0%{transform:translate(40px,50px);opacity:0}
  15%{opacity:1}
  35%{transform:translate(34px,-58px)}      /* llega al chip */
  45%{transform:translate(31px,-55px) scale(.86)}  /* clic */
  55%{transform:translate(34px,-58px) scale(1)}
  80%,100%{transform:translate(34px,-58px);opacity:1}
}
/* el chip cambia a "Agregado" justo cuando el cursor hace clic */
.demo-chip__b{animation:demoChip 5s var(--ease-out) infinite}
@keyframes demoChip{0%,44%{opacity:0}50%,95%{opacity:1}100%{opacity:0}}

/* ---- Paso 2: botón flotante con badge que cuenta ---- */
.demo-float{display:inline-flex;align-items:center;gap:10px;background:var(--cafe);color:var(--paper);
  border-radius:100px;padding:14px 22px 14px 18px;font-weight:600;font-size:14px;
  box-shadow:0 10px 30px rgba(35,22,12,.3);animation:demoFloatPop 4s var(--ease-spring) infinite}
.demo-float svg{width:20px;height:20px}
.demo-float__badge{background:var(--naranja);color:var(--espresso);font-size:11px;font-weight:800;
  min-width:20px;height:20px;border-radius:50%;display:grid;place-items:center;padding:0 4px}
@keyframes demoFloatPop{0%,100%{transform:scale(1)}40%{transform:scale(1.07)}55%{transform:scale(1)}}

/* ---- Paso 3: burbuja de WhatsApp ---- */
.demo-wa{width:200px;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--sh-sm)}
.demo-wa__head{display:flex;align-items:center;gap:8px;background:#25d366;color:#fff;
  padding:10px 14px;font-size:13px;font-weight:600}
.demo-wa__head svg{width:18px;height:18px}
.demo-wa__bubble{padding:14px;display:flex;flex-direction:column;gap:5px}
.demo-wa__line{font-size:12px;color:var(--cafe);background:#eafbef;padding:7px 10px;border-radius:10px;
  opacity:0;transform:translateY(6px);animation:demoWaLine 5s var(--ease-out) infinite}
.demo-wa__line--1{animation-delay:.2s}
.demo-wa__line--2{animation-delay:.9s}
.demo-wa__line--3{animation-delay:1.4s}
.demo-wa__line--4{animation-delay:1.9s}
@keyframes demoWaLine{0%{opacity:0;transform:translateY(6px)}12%,90%{opacity:1;transform:none}100%{opacity:1}}

@media(prefers-reduced-motion:reduce){
  .demo-cursor,.demo-chip__b,.demo-float,.demo-wa__line{animation:none}
  .demo-chip__b{opacity:0}
  .demo-wa__line{opacity:1;transform:none}
}
@media(max-width:900px){.howto__grid{grid-template-columns:1fr;max-width:480px;margin-inline:auto}}

/* ---------- INSPIRACIÓN (magazine) ---------- */
.insp{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(16px,2vw,28px)}
.insp__big{position:relative;border-radius:var(--radius-lg);overflow:hidden;min-height:560px;color:#fff;isolation:isolate;cursor:pointer}
.insp__big img,.insp__small img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transition:transform 1.3s var(--ease-out)}
.insp__big:hover img,.insp__small:hover img{transform:scale(1.07)}
.insp__big::after,.insp__small::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(35,22,12,.82),rgba(35,22,12,.05) 60%);z-index:1}
.insp__col{display:grid;grid-template-rows:1fr 1fr;gap:clamp(16px,2vw,28px)}
.insp__small{position:relative;border-radius:var(--radius-lg);overflow:hidden;color:#fff;isolation:isolate;cursor:pointer;min-height:266px}
.insp__txt{position:absolute;left:0;bottom:0;padding:clamp(24px,3vw,40px);z-index:2}
.insp__txt .k{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:600;color:var(--naranja)}
.insp__txt h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;line-height:.92;letter-spacing:-.01em;
  font-size:clamp(26px,3.2vw,52px);margin-top:12px}
.insp__txt p{margin-top:12px;max-width:42ch;color:rgba(250,247,242,.8);font-size:14.5px}
.insp__txt .link-underline{margin-top:18px;color:#fff}
.insp__num{position:absolute;top:clamp(20px,2vw,32px);right:clamp(20px,2vw,32px);z-index:2;font-family:var(--font-display);
  font-size:clamp(40px,5vw,86px);color:rgba(250,247,242,.16);line-height:1}

/* ---------- MATERIALS / CRAFT (split parallax) ---------- */
.craft{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(30px,5vw,80px)}
.craft__media{position:relative;border-radius:var(--radius-lg);overflow:hidden;aspect-ratio:4/5;box-shadow:var(--sh-lg)}
.craft__media img{width:100%;height:115%;object-fit:cover;will-change:transform}
.craft__badge{position:absolute;right:-26px;bottom:34px;width:clamp(120px,13vw,168px);height:clamp(120px,13vw,168px);border-radius:50%;
  background:var(--naranja);color:var(--espresso);display:grid;place-items:center;text-align:center;box-shadow:var(--sh-lg);z-index:2;
  font-family:var(--font-display);text-transform:uppercase;line-height:.92;padding:14px;animation:spinBadge 24s linear infinite}
@keyframes spinBadge{to{transform:rotate(360deg)}}
.craft__badge b{font-size:clamp(30px,3.6vw,48px)}
.craft__badge small{font-size:11px;letter-spacing:.1em;font-family:var(--font-sans);font-weight:600;display:block;margin-top:4px}
.craft__list{margin-top:36px;display:grid;gap:2px}
.craft__item{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;padding:24px 0;border-top:1px solid var(--line);transition:padding-left .4s var(--ease-out)}
.craft__item:hover{padding-left:10px}
.craft__item .no{font-family:var(--font-display);color:var(--sand-2);font-size:24px;line-height:1}
.craft__item:hover .no{color:var(--naranja-deep)}
.craft__item h4{font-size:19px;font-weight:600;letter-spacing:-.01em}
.craft__item p{color:var(--muted);font-size:14.5px;margin-top:6px;max-width:46ch}

/* ---------- PROCESS / STRIP ---------- */
.strip{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,28px)}
.strip__c{padding:30px;border-radius:var(--radius);background:rgba(250,247,242,.04);border:1px solid rgba(250,247,242,.1);
  transition:background .4s,transform .5s var(--ease-out)}
.strip__c:hover{background:rgba(250,247,242,.07);transform:translateY(-6px)}
.strip__c .ic{width:52px;height:52px;border-radius:14px;background:rgba(255,164,58,.14);display:grid;place-items:center;color:var(--naranja);margin-bottom:20px}
.strip__c .ic svg{width:24px;height:24px}
.strip__c h4{font-size:18px;font-weight:600;letter-spacing:-.01em}
.strip__c p{color:var(--on-dark-muted);font-size:14px;margin-top:8px}