/* ============================================================
   COSMÉTICOS AL POR MAYOR — sistema v2 "La bodega que te hace ganar"
   Referencia: Faire (marketplace mayorista) · Dieux (dirección de arte)
   Marca: fucsia propio + Poppins; serif de display para jerarquía
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,600&family=Poppins:wght@200;300;400;500;600;700&display=swap');

:root{
  /* ---------- superficies ---------- */
  --paper:#FFFFFF;
  --canvas:#FAFAFB;
  --tint:#FDF3F7;
  --tint-2:#F8E2ED;
  --plum:#1E0C16;
  --plum-2:#301526;
  --plum-3:#4A2038;

  /* ---------- tinta ---------- */
  --ink:#12151A;
  --ink-2:#5A6470;
  --mute:#8B95A1;
  --on-dark:#F6E9F0;
  --on-dark-2:rgba(246,233,240,.66);

  /* ---------- marca ---------- */
  --fucsia:#CD4381;
  --fucsia-dark:#A82F65;
  --fucsia-light:#E884AF;
  --fucsia-soft:#F4C7DC;

  /* ---------- estado ---------- */
  --ok:#10715A;
  --ok-soft:#E2F3EE;
  --warn:#A8560B;
  --line:#E7E9EC;
  --line-2:#CDD2D8;
  --line-dark:rgba(246,233,240,.18);

  /* ---------- tipografía ---------- */
  --display:'Fraunces',serif;
  --ui:'Poppins',sans-serif;
  --fs-micro:10.5px;
  --fs-xs:12px;
  --fs-sm:13.5px;
  --fs-base:15px;
  --fs-md:16.5px;
  --fs-lg:21px;
  --fs-xl:28px;
  --fs-2xl:38px;
  --fs-3xl:52px;
  --fs-4xl:72px;
  --fs-5xl:96px;

  /* ---------- espacio ---------- */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:44px; --s8:64px; --s9:88px; --s10:120px;

  /* ---------- forma y profundidad ---------- */
  --r-sm:8px; --r-md:12px; --r-lg:18px; --r-xl:26px; --r-pill:999px;
  --sh-1:0 1px 2px rgba(18,21,26,.05);
  --sh-2:0 10px 30px rgba(18,21,26,.09);
  --sh-3:0 24px 60px rgba(18,21,26,.14);
  --sh-fx:0 14px 40px rgba(205,67,129,.24);

  /* ---------- movimiento ---------- */
  --ease:cubic-bezier(.2,.7,.3,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-fast:160ms; --d:230ms; --d-slow:600ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--ui);font-size:var(--fs-base);
  line-height:1.65;font-weight:400;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
:focus-visible{outline:2px solid var(--fucsia);outline-offset:2px}

/* ---------- layout ---------- */
.wrap{max-width:1340px;margin:0 auto;padding:0 36px}
.wrap-tight{max-width:1060px;margin:0 auto;padding:0 36px}
.stack{padding:var(--s9) 0}
.stack-sm{padding:var(--s7) 0}
.dark{background:var(--plum);color:var(--on-dark)}
.dark .lede,.dark .small{color:var(--on-dark-2)}
.dark .eyebrow{color:var(--fucsia-soft)}

/* ---------- tipografía ---------- */
.display{font-family:var(--display);font-weight:500;letter-spacing:-.03em;line-height:1.06}
h1.display{font-size:clamp(40px,6vw,var(--fs-5xl))}
h2.display{font-size:clamp(28px,3.6vw,var(--fs-3xl));letter-spacing:-.025em}
h3.display{font-size:var(--fs-lg);letter-spacing:-.018em;font-weight:600}
.display i{font-style:italic;color:var(--fucsia);font-weight:400}
.eyebrow{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.lede{color:var(--ink-2);font-size:var(--fs-md);font-weight:300;line-height:1.8;max-width:52ch}
.small{font-size:var(--fs-sm);color:var(--ink-2)}
.micro{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.fx{color:var(--fucsia)}
.num,.tabular{font-variant-numeric:tabular-nums}
.num{font-family:var(--display);font-weight:600}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;
  padding:13px 28px;border-radius:var(--r-pill);font-size:var(--fs-sm);font-weight:600;
  transition:background var(--d) var(--ease),color var(--d),border-color var(--d),box-shadow var(--d),transform var(--d)}
.btn-primary{background:var(--fucsia);color:#fff}
.btn-primary:hover{background:var(--fucsia-dark);box-shadow:var(--sh-fx)}
.btn-ink{background:var(--ink);color:#fff}
.btn-ink:hover{background:var(--fucsia)}
.btn-outline{border:1.5px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-light{border:1.5px solid rgba(246,233,240,.5);color:var(--on-dark)}
.btn-light:hover{background:var(--on-dark);color:var(--plum)}
.btn-ghost{border:1px solid var(--line-2);color:var(--ink)}
.btn-ghost:hover{border-color:var(--fucsia);color:var(--fucsia)}
.btn-block{width:100%}
.btn-lg{min-height:56px;font-size:var(--fs-md);padding:16px 34px}
.btn-sq{border-radius:var(--r-sm)}
.ghost{font-size:var(--fs-sm);font-weight:500;cursor:pointer;padding-bottom:2px;
  border-bottom:1.5px solid transparent;transition:border-color var(--d)}
.ghost:hover{border-color:var(--fucsia)}

/* ---------- barra de confianza ---------- */
.trustbar{background:var(--plum);color:var(--on-dark);font-size:var(--fs-xs);padding:11px 0}
.trustbar .wrap{display:flex;justify-content:center;gap:28px;align-items:center;flex-wrap:wrap}
.trustbar b{color:#fff;font-weight:600}
.tdot{width:3px;height:3px;border-radius:50%;background:var(--fucsia);display:inline-block}

/* ---------- cabecera ---------- */
.header{border-bottom:1px solid var(--line);position:sticky;top:0;background:rgba(255,255,255,.92);
  backdrop-filter:blur(12px);z-index:40}
.hrow{display:flex;align-items:center;gap:22px;padding:15px 0}
.logo img{height:26px;width:auto}
.search{flex:1;min-width:0;display:flex;align-items:center;gap:11px;border:1.5px solid var(--ink);
  border-radius:var(--r-pill);padding:11px 20px;cursor:text;transition:box-shadow var(--d)}
.search:hover{box-shadow:0 0 0 3px rgba(205,67,129,.16)}
.search span{color:var(--ink-2);font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hactions{display:flex;align-items:center;gap:18px;white-space:nowrap}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.cart-btn{position:relative;display:flex;align-items:center;gap:8px;font-size:var(--fs-sm);font-weight:500}
.cart-count{background:var(--fucsia);color:#fff;font-size:11px;min-width:19px;height:19px;border-radius:var(--r-pill);
  display:flex;align-items:center;justify-content:center;font-weight:600;padding:0 5px}
.chips{display:flex;gap:8px;padding:0 0 12px;overflow:hidden}
.chip{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 16px;font-size:var(--fs-sm);
  white-space:nowrap;transition:all var(--d) var(--ease)}
.chip:hover{border-color:var(--fucsia);color:var(--fucsia)}
.chip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.chip.brand{border-color:var(--fucsia);color:var(--fucsia);font-weight:500}

/* ---------- migas ---------- */
.crumbs{display:flex;gap:8px;align-items:center;font-size:var(--fs-sm);color:var(--mute);padding:var(--s5) 0}
.crumbs a:hover{color:var(--ink)}

/* ══════════ EL MOTOR DE MARGEN — elemento propio ══════════ */
.motor{display:flex;align-items:stretch;border-radius:var(--r-sm);overflow:hidden;background:var(--tint)}
.motor .pk{flex:1;padding:11px 14px}
.motor .pk span{display:block;font-size:var(--fs-micro);color:var(--ink-2);letter-spacing:.05em}
.motor .pk b{font-family:var(--display);font-size:var(--fs-lg);font-weight:600;line-height:1.15}
.motor .un{background:var(--fucsia);color:#fff;padding:11px 16px;display:flex;flex-direction:column;
  justify-content:center;text-align:right;min-width:112px}
.motor .un span{display:block;font-size:var(--fs-micro);opacity:.86;letter-spacing:.05em}
.motor .un b{font-family:var(--display);font-size:var(--fs-md);font-weight:600;line-height:1.15}
.motor.grande .pk b{font-size:var(--fs-2xl)}
.motor.grande .un b{font-size:var(--fs-xl)}
.motor.grande .un{min-width:150px}

/* ---------- tarjeta de producto ---------- */
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5)}
.grid-3{grid-template-columns:repeat(3,1fr)}
.pc{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;
  background:var(--paper);transition:border-color var(--d),box-shadow var(--d),transform var(--d)}
.pc:hover{border-color:var(--fucsia);box-shadow:var(--sh-2)}
.pc .im{height:216px;display:flex;align-items:center;justify-content:center;padding:16px;position:relative;overflow:hidden}
.pc .im img{max-height:100%;object-fit:contain;transition:transform 600ms var(--ease-out)}
.pc:hover .im img{transform:scale(1.05)}
.badge{position:absolute;top:12px;left:12px;background:var(--ink);color:#fff;font-size:var(--fs-micro);
  letter-spacing:.1em;text-transform:uppercase;padding:5px 10px;border-radius:5px;font-weight:600;z-index:2}
.badge.f{background:var(--fucsia)}
.badge.g{background:var(--ok)}
.pc .bd{padding:14px 16px 16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;flex:1}
.brandline{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.pc h3{font-size:var(--fs-sm);font-weight:500;line-height:1.45;flex:1}
.addrow{display:flex;gap:8px}
.add{flex:1;background:var(--ink);color:#fff;border-radius:var(--r-sm);padding:11px;font-size:var(--fs-sm);
  font-weight:600;transition:background var(--d)}
.add:hover{background:var(--fucsia)}
.calc{border:1px solid var(--line-2);border-radius:var(--r-sm);width:44px;display:flex;align-items:center;
  justify-content:center;transition:all var(--d)}
.calc:hover{border-color:var(--fucsia);color:var(--fucsia)}
.calc svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6}
.stockline{display:flex;align-items:center;gap:7px;font-size:var(--fs-xs);color:var(--ok);font-weight:500}
.stockline i{width:6px;height:6px;border-radius:50%;background:var(--ok);display:block}

/* ---------- imagen y tiles ---------- */
.fig{position:relative;overflow:hidden}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.fig:hover img{transform:scale(1.05)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,21,26,0) 42%,rgba(18,21,26,.82) 100%)}
.tile{position:relative;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-md);display:block}
.tile img{width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-out)}
.tile:hover img{transform:scale(1.06)}
.tile .c{position:absolute;left:0;right:0;bottom:0;padding:var(--s5);color:#fff;z-index:2}
.tile h3{font-family:var(--display);font-size:var(--fs-lg);font-weight:600;color:#fff}
.tile span{font-size:var(--fs-xs);opacity:.85}

/* ---------- cajón de carrito ---------- */
.veil{position:fixed;inset:0;background:rgba(18,21,26,.5);backdrop-filter:blur(3px);z-index:60;
  opacity:0;pointer-events:none;transition:opacity var(--d)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:452px;background:var(--paper);z-index:61;
  transform:translateX(100%);transition:transform 380ms var(--ease-out);display:flex;flex-direction:column;box-shadow:var(--sh-3)}
body.cart-open .veil{opacity:1;pointer-events:auto}
body.cart-open .drawer{transform:translateX(0)}
body.cart-open{overflow:hidden}
.drawer-head{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--display);font-size:var(--fs-lg);font-weight:600}
.drawer-body{flex:1;overflow-y:auto;padding:4px 24px}
.drawer-foot{border-top:1px solid var(--line);padding:20px 24px;background:var(--canvas)}
.line{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:18px 0;border-bottom:1px solid var(--line);align-items:start}
.line .th{border:1px solid var(--line);border-radius:var(--r-sm);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;padding:6px}
.line .th img{max-height:100%;object-fit:contain}
.line h5{font-size:var(--fs-sm);font-weight:500;line-height:1.4}
.line .v{font-size:var(--fs-xs);color:var(--ink-2);margin-top:3px}
.line .price{text-align:right;white-space:nowrap}
.line .price b{font-family:var(--display);font-size:var(--fs-md);font-weight:600;display:block}
.line .price span{font-size:var(--fs-xs);color:var(--fucsia);font-weight:600}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);margin-top:9px}
.qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;color:var(--ink-2);transition:color var(--d)}
.qty button:hover{color:var(--fucsia)}
.qty span{width:34px;text-align:center;font-size:var(--fs-sm);font-weight:500}
.remove{font-size:var(--fs-xs);color:var(--mute);border-bottom:1px solid var(--line-2);margin-top:9px;display:inline-block}
.sum{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:5px 0;color:var(--ink-2)}
.sum b{color:var(--ink)}
.sum.total{color:var(--ink);font-size:var(--fs-md);border-top:1px solid var(--line);margin-top:9px;padding-top:13px}
.sum.total b{font-family:var(--display);font-size:var(--fs-xl);font-weight:600}
.unitbox{background:var(--ok-soft);border-radius:var(--r-sm);padding:13px 15px;margin:14px 0;
  display:flex;justify-content:space-between;align-items:center}
.unitbox span{font-size:var(--fs-xs);color:var(--ok);font-weight:500}
.unitbox b{font-family:var(--display);font-size:var(--fs-lg);font-weight:600;color:var(--ok)}

/* ---------- formularios ---------- */
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-xs);font-weight:600;color:var(--ink-2);margin-bottom:6px}
.input{width:100%;border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:13px 15px;
  font-family:var(--ui);font-size:var(--fs-base);color:var(--ink);background:var(--paper);transition:border-color var(--d)}
.input:hover{border-color:var(--mute)}
.input::placeholder{color:var(--mute)}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s4)}
.radio{display:flex;align-items:center;gap:13px;border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:15px 17px;margin-bottom:10px;cursor:pointer;transition:border-color var(--d)}
.radio:hover{border-color:var(--line-2)}
.radio.is-on{border-color:var(--fucsia);background:var(--tint)}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--line-2);flex:none;position:relative;background:#fff}
.radio.is-on .dot{border-color:var(--fucsia)}
.radio.is-on .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--fucsia)}
.radio .body{flex:1}
.radio .body b{font-weight:600;font-size:var(--fs-base)}
.radio .body span{display:block;font-size:var(--fs-xs);color:var(--ink-2)}
.chk{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:var(--fs-sm);color:var(--ink-2);cursor:pointer}
.chk .box{width:16px;height:16px;border:1.5px solid var(--line-2);border-radius:4px;flex:none;position:relative;transition:all var(--d)}
.chk.on .box{border-color:var(--fucsia);background:var(--fucsia)}
.chk.on .box::after{content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)}

/* ---------- acordeón ---------- */
.acc{border-top:1px solid var(--line)}
.acc-item{border-bottom:1px solid var(--line)}
.acc-head{display:flex;justify-content:space-between;align-items:center;padding:17px 0;width:100%;
  font-size:var(--fs-sm);font-weight:600;transition:color var(--d)}
.acc-head:hover{color:var(--fucsia)}
.acc-body{padding-bottom:18px;color:var(--ink-2);font-size:var(--fs-sm);line-height:1.8;max-width:62ch}

/* ---------- scroller ---------- */
.scroller{display:flex;gap:var(--s4);overflow-x:auto;padding-bottom:var(--s4);
  scroll-snap-type:x mandatory;scrollbar-width:none}
.scroller::-webkit-scrollbar{display:none}
.scroller > *{flex:0 0 auto;scroll-snap-align:start}

/* ---------- marquesina ---------- */
.marquee{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:var(--s6) 0}
.marquee .pista{display:flex;gap:var(--s8);align-items:center;white-space:nowrap;animation:desliza 34s linear infinite}
.marquee span{font-family:var(--display);font-size:var(--fs-lg);font-weight:400;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}
@keyframes desliza{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- pie ---------- */
.footer{background:var(--plum);color:var(--on-dark);margin-top:var(--s10);padding:var(--s9) 0 var(--s5)}
.footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1fr;gap:var(--s6)}
.footer h5{font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;color:var(--fucsia-soft);
  margin-bottom:var(--s3);font-weight:600}
.footer a,.footer p{color:var(--on-dark-2);font-size:var(--fs-sm);display:block;padding:4px 0;transition:color var(--d)}
.footer a:hover{color:#fff}
.footer .logo img{height:26px;margin-bottom:var(--s4)}
.footer .bottom{border-top:1px solid var(--line-dark);margin-top:var(--s7);padding-top:var(--s5);
  display:flex;justify-content:space-between;font-size:var(--fs-xs);color:rgba(246,233,240,.45)}
.paychips{display:flex;gap:7px;flex-wrap:wrap}
.paychips span{border:1px solid rgba(246,233,240,.25);border-radius:5px;padding:4px 9px;font-size:var(--fs-micro);
  letter-spacing:.07em;text-transform:uppercase;color:rgba(246,233,240,.75)}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(24px);transition:opacity var(--d-slow) var(--ease-out),transform var(--d-slow) var(--ease-out)}
[data-reveal].seen{opacity:1;transform:none}
[data-reveal="fade"]{transform:none}
[data-reveal="right"]{transform:translateX(-30px)}

/* ---------- utilidades ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-pill);padding:7px 15px;font-size:var(--fs-xs);font-weight:500}
.pulse{width:7px;height:7px;border-radius:50%;background:var(--fucsia)}
.center{text-align:center}
.stars{color:var(--fucsia);letter-spacing:1.5px;font-size:13px}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition-duration:1ms!important}
  [data-reveal]{opacity:1;transform:none}
  html{scroll-behavior:auto}
}