/* ============================================================
   TOTEMICA BEAUTY — sistema de diseño v2 "Templo contemporáneo"
   Referencia: Susanne Kaufmann (estructura) · Dieux (dirección de arte)
   Paleta y tipografías: las de su propio tema Shopify
   ============================================================ */

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

:root{
  /* ---------- superficies ---------- */
  --bone:#F2EEE7;
  --bone-2:#E9E3D9;
  --bone-3:#DFD7C9;
  --paper:#FFFFFF;
  --shade:#F7F5F1;
  --temple:#17130E;        /* capítulos oscuros a sangre */
  --temple-2:#241D16;

  /* ---------- tinta ---------- */
  --ink:#14110E;
  --ink-2:#4A443C;
  --taupe:#686257;
  --mute:#8B8477;
  --on-dark:#EDE7DC;
  --on-dark-2:rgba(237,231,220,.62);

  /* ---------- marca ---------- */
  --gold:#BA8E2C;
  --gold-2:#9A7422;
  --gold-3:#D9B45F;
  --gold-soft:#EFE3C6;
  --lilac:#CBBDDA;
  --lilac-soft:#EDE7F3;
  --lilac-deep:#8E7BA6;

  /* ---------- estado ---------- */
  --ok:#2D7A2F;
  --out:#9E9E9E;
  --line:rgba(20,17,14,.13);
  --line-2:rgba(20,17,14,.26);
  --line-dark:rgba(237,231,220,.18);

  /* ---------- tipografía ---------- */
  --display:'Trirong',serif;
  --ui:'Poppins',sans-serif;
  --fs-micro:10px;
  --fs-xs:11.5px;
  --fs-sm:13px;
  --fs-base:14.5px;
  --fs-md:16px;
  --fs-lg:20px;
  --fs-xl:27px;
  --fs-2xl:38px;
  --fs-3xl:54px;
  --fs-4xl:76px;
  --fs-5xl:104px;
  --fs-6xl:132px;

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

  /* ---------- forma y profundidad ---------- */
  --r-none:0; --r-xs:2px; --r-pill:999px;
  --sh-warm:0 24px 60px rgba(66,49,86,.14);
  --sh-deep:0 40px 90px rgba(23,19,14,.28);
  --sh-gold:0 18px 44px rgba(186,142,44,.20);

  /* ---------- movimiento ---------- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --d-fast:180ms; --d:260ms; --d-slow:620ms;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;scroll-behavior:smooth}
body{background:var(--bone);color:var(--ink);font-family:var(--ui);font-size:var(--fs-base);
  line-height:1.65;font-weight:300;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(--gold);outline-offset:3px}

/* grano de papel sobre las superficies hueso */
.grain::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.32;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}

/* ---------- layout ---------- */
.wrap{max-width:1360px;margin:0 auto;padding:0 44px}
.wrap-tight{max-width:1080px;margin:0 auto;padding:0 44px}
.wrap-text{max-width:760px;margin:0 auto;padding:0 44px}
.bleed{position:relative;width:100%}
.stack{padding:var(--s10) 0}
.stack-sm{padding:var(--s8) 0}
.dark{background:var(--temple);color:var(--on-dark)}
.dark .lede,.dark .small,.dark p{color:var(--on-dark-2)}
.dark .eyebrow{color:var(--gold-3)}

/* ---------- tipografía ---------- */
.display{font-family:var(--display);font-weight:200;line-height:1.04;letter-spacing:-.022em}
h1.display{font-size:clamp(48px,7vw,var(--fs-5xl))}
h2.display{font-size:clamp(32px,4.2vw,var(--fs-3xl));letter-spacing:-.018em}
h3.display{font-size:var(--fs-lg);font-weight:300;letter-spacing:-.005em;line-height:1.28}
.mega{font-family:var(--display);font-weight:100;font-size:clamp(60px,11vw,var(--fs-6xl));
  line-height:.92;letter-spacing:-.035em}
.eyebrow{font-size:var(--fs-xs);letter-spacing:.3em;text-transform:uppercase;color:var(--taupe);font-weight:500}
.lede{color:var(--taupe);font-size:var(--fs-md);line-height:1.9;max-width:50ch;font-weight:300}
.small{font-size:var(--fs-sm);color:var(--taupe)}
.micro{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.gold{color:var(--gold)}
em.serif{font-style:italic;font-family:var(--display);font-weight:200}

/* ---------- el tótem: las tres barras de la E ---------- */
.totem{display:flex;flex-direction:column;gap:5px;width:30px}
.totem i{display:block;height:2px;background:var(--gold)}
.totem i:nth-child(2){width:78%}
.totem i:nth-child(3){width:56%}
.totem-rail{position:fixed;left:18px;top:50%;transform:translateY(-50%);z-index:35;
  display:flex;flex-direction:column;align-items:center;gap:16px;mix-blend-mode:difference;pointer-events:none}
.totem-rail span{writing-mode:vertical-rl;font-size:9.5px;letter-spacing:.42em;text-transform:uppercase;
  color:#fff;opacity:.55}
.totem-rail i{width:1px;height:64px;background:rgba(255,255,255,.4)}
.divider{display:flex;justify-content:center;padding:var(--s8) 0}
.divider .totem{align-items:center}
.divider .totem i{margin:0 auto}

/* ---------- botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:52px;
  padding:15px 38px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  position:relative;overflow:hidden;transition:color var(--d) var(--ease),background var(--d) var(--ease),border-color var(--d)}
.btn-primary{background:var(--ink);color:var(--bone)}
.btn-primary:hover{background:var(--gold)}
.btn-outline{border:1px solid var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:var(--bone)}
.btn-light{border:1px solid rgba(237,231,220,.45);color:var(--on-dark)}
.btn-light:hover{background:var(--on-dark);color:var(--temple)}
.btn-gold{background:var(--gold);color:#fff}
.btn-gold:hover{background:var(--gold-2)}
.btn-block{width:100%}
.btn-lg{min-height:60px;font-size:var(--fs-sm);padding:18px 44px}

/* enlace con subrayado que se dibuja */
.link-u{font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;position:relative;
  padding-bottom:6px;display:inline-block}
.link-u::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(1);transform-origin:right;transition:transform var(--d) var(--ease)}
.link-u:hover::after{transform:scaleX(0)}
.rule{width:64px;height:1px;background:var(--gold);margin:var(--s5) 0}

/* ---------- cabecera ---------- */
.announce{background:var(--temple);color:var(--on-dark);text-align:center;font-size:var(--fs-xs);
  letter-spacing:.2em;text-transform:uppercase;padding:12px 0;font-weight:300}
.header{position:sticky;top:0;z-index:40;background:rgba(242,238,231,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);transition:background var(--d)}
.header-row{display:flex;align-items:center;justify-content:space-between;padding:20px 0}
.logo img{height:32px;width:auto}
.nav{display:flex;gap:38px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;font-weight:400}
.nav a{position:relative;padding-bottom:5px}
.nav a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform var(--d) var(--ease)}
.nav a:hover::after,.nav a.is-active::after{transform:scaleX(1)}
.tools{display:flex;gap:22px;align-items:center}
.ico{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.cart-btn{position:relative}
.cart-count{position:absolute;top:-7px;right:-10px;background:var(--gold);color:#fff;font-size:9.5px;
  width:18px;height:18px;border-radius:var(--r-pill);display:flex;align-items:center;justify-content:center;font-weight:500}

/* ---------- migas ---------- */
.crumbs{display:flex;gap:10px;align-items:center;font-size:var(--fs-xs);color:var(--mute);padding:var(--s5) 0;
  letter-spacing:.06em}
.crumbs a:hover{color:var(--ink)}

/* ---------- imagen ---------- */
.fig{position:relative;overflow:hidden;background:var(--bone-2)}
.fig img{width:100%;height:100%;object-fit:cover;transition:transform 1200ms var(--ease-out)}
.fig-zoom:hover img{transform:scale(1.045)}
.scrim{position:absolute;inset:0;background:linear-gradient(90deg,rgba(23,19,14,.62) 0%,rgba(23,19,14,.28) 46%,rgba(23,19,14,0) 74%)}
.scrim-b{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,19,14,0) 40%,rgba(23,19,14,.72) 100%)}

/* ---------- tarjeta de producto ---------- */
.pgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s7) var(--s5)}
.pgrid-3{grid-template-columns:repeat(3,1fr)}
.pcard{position:relative;display:block}
.shot-wrap{position:relative;overflow:hidden;background:var(--paper)}
.pcard .shot{aspect-ratio:4/5;display:flex;align-items:center;justify-content:center;
  transition:background var(--d) var(--ease)}
.pcard:hover .shot{background:var(--shade)}
.pcard .shot img{width:68%;transition:transform 700ms var(--ease-out)}
.pcard:hover .shot img{transform:scale(1.05) translateY(-6px)}
.pcard .tag{position:absolute;top:14px;left:14px;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  background:var(--bone);color:var(--ink);padding:6px 11px;z-index:2}
.pcard .tag.gold{background:var(--gold);color:#fff}
.pcard .tag.out{background:var(--out);color:#fff}
.quick{position:absolute;left:0;right:0;bottom:0;background:rgba(20,17,14,.92);color:var(--bone);
  text-align:center;padding:15px;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  opacity:0;transform:translateY(100%);transition:all var(--d) var(--ease);z-index:2}
.pcard:hover .quick{opacity:1;transform:translateY(0)}
.pcard h4{font-family:var(--display);font-size:var(--fs-md);font-weight:300;margin:var(--s4) 0 var(--s1);line-height:1.34}
.pcard .prow{display:flex;justify-content:space-between;align-items:baseline}
.pcard .prow .cat{font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;color:var(--taupe)}
.pcard .prow .price{font-family:var(--display);font-size:var(--fs-md);font-weight:300}
.pcard .desc{font-size:var(--fs-sm);color:var(--taupe);margin-top:7px;line-height:1.62}

/* ---------- cajón de carrito ---------- */
.veil{position:fixed;inset:0;background:rgba(23,19,14,.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:450px;background:var(--bone);z-index:61;
  transform:translateX(100%);transition:transform 420ms var(--ease-out);display:flex;flex-direction:column;
  box-shadow:var(--sh-deep)}
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:26px 30px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-family:var(--display);font-size:var(--fs-lg);font-weight:300}
.drawer-body{flex:1;overflow-y:auto;padding:6px 30px}
.drawer-foot{border-top:1px solid var(--line);padding:24px 30px;background:var(--shade)}
.ship-bar .track{height:2px;background:var(--bone-3);position:relative;margin-top:10px}
.ship-bar .fill{position:absolute;left:0;top:0;bottom:0;background:var(--gold);width:78%}
.line{display:grid;grid-template-columns:84px 1fr auto;gap:18px;padding:22px 0;border-bottom:1px solid var(--line);align-items:start}
.line .th{background:var(--paper);aspect-ratio:1/1;display:flex;align-items:center;justify-content:center}
.line .th img{width:74%}
.line h5{font-family:var(--display);font-size:var(--fs-base);font-weight:300;line-height:1.36}
.line .v{font-size:var(--fs-xs);color:var(--taupe);margin-top:4px}
.line .price{font-family:var(--display);font-size:var(--fs-md);font-weight:300;text-align:right;white-space:nowrap}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-2);margin-top:12px}
.qty button{width:32px;height:32px;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--taupe);transition:color var(--d)}
.qty button:hover{color:var(--gold)}
.qty span{width:32px;text-align:center;font-size:var(--fs-sm)}
.remove{font-size:var(--fs-xs);color:var(--mute);border-bottom:1px solid var(--line-2);margin-top:11px;display:inline-block}
.sum{display:flex;justify-content:space-between;font-size:var(--fs-sm);padding:6px 0;color:var(--taupe)}
.sum.total{color:var(--ink);font-size:var(--fs-md);border-top:1px solid var(--line);margin-top:12px;padding-top:16px}
.sum.total b{font-family:var(--display);font-size:var(--fs-xl);font-weight:300}

/* ---------- formularios ---------- */
.field{margin-bottom:var(--s4)}
.field label{display:block;font-size:var(--fs-xs);letter-spacing:.18em;text-transform:uppercase;
  color:var(--taupe);margin-bottom:8px}
.input{width:100%;background:var(--paper);border:1px solid var(--line-2);padding:15px 17px;
  font-family:var(--ui);font-size:var(--fs-base);font-weight:300;color:var(--ink);transition:border-color var(--d)}
.input:hover{border-color:var(--taupe)}
.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:15px;border:1px solid var(--line-2);padding:17px 19px;
  margin-bottom:10px;cursor:pointer;background:var(--paper);transition:border-color var(--d)}
.radio:hover{border-color:var(--taupe)}
.radio.is-on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.dot{width:17px;height:17px;border-radius:50%;border:1px solid var(--line-2);flex:none;position:relative}
.radio.is-on .dot{border-color:var(--ink)}
.radio.is-on .dot::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--ink)}
.radio .body{flex:1}
.radio .body b{font-weight:500;font-size:var(--fs-base)}
.radio .body span{display:block;font-size:var(--fs-xs);color:var(--taupe)}
.chk{display:flex;align-items:center;gap:12px;padding:7px 0;font-size:var(--fs-base);color:var(--ink-2);cursor:pointer}
.chk .box{width:15px;height:15px;border:1px solid var(--line-2);flex:none;position:relative;transition:all var(--d)}
.chk.on .box{border-color:var(--ink);background:var(--ink)}
.chk.on .box::after{content:"";position:absolute;left:4px;top:1px;width:5px;height:9px;
  border:solid var(--bone);border-width:0 1.5px 1.5px 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:20px 0;width:100%;
  font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;font-weight:400;transition:color var(--d)}
.acc-head:hover{color:var(--gold)}
.acc-body{padding-bottom:22px;color:var(--taupe);font-size:var(--fs-sm);line-height:1.9;max-width:58ch}

/* ---------- scroller horizontal ---------- */
.scroller{display:flex;gap:var(--s5);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}

/* ---------- pie ---------- */
.footer{background:var(--temple);color:var(--on-dark);padding:var(--s10) 0 var(--s6)}
.footer .cols{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr;gap:var(--s7)}
.footer h5{font-size:var(--fs-xs);letter-spacing:.28em;text-transform:uppercase;color:var(--gold-3);
  margin-bottom:var(--s4);font-weight:500}
.footer a,.footer p{color:var(--on-dark-2);font-size:var(--fs-sm);display:block;padding:6px 0;transition:color var(--d)}
.footer a:hover{color:var(--on-dark)}
.footer .logo img{height:30px;margin-bottom:var(--s4)}
.footer .bottom{border-top:1px solid var(--line-dark);margin-top:var(--s8);padding-top:var(--s5);
  display:flex;justify-content:space-between;font-size:var(--fs-xs);color:rgba(237,231,220,.42)}

/* ---------- reveals ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);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(-32px)}

/* ---------- utilidades ---------- */
.badge-soft{display:inline-block;font-size:var(--fs-micro);letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--gold);padding:5px 11px}
.center{text-align:center}
.stars{color:var(--gold);letter-spacing:2px;font-size:13px}
.tabular{font-variant-numeric:tabular-nums}

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