/* =====================================================================
   MACETALAND — sistema visual "botánico premium" (refinado, tipo Apple)
   Mucho aire · tipografía cuidada · neutros cálidos · acento arcilla
   ===================================================================== */

:root{
  --paper:#FBFAF6; --paper-2:#F3EFE6; --card:#FFFFFF; --ink:#1B231C;
  --forest:#1C3A28; --forest-2:#2A4E37; --sage:#7E9270; --sage-soft:#E7ECDF;
  --clay:#BC5C39; --clay-2:#9E4A2C; --clay-soft:#F6E7DD;
  --line:#E8E1D2; --line-2:#DDD3BF; --muted:#6E6E5E; --muted-2:#8C8A78;
  --gold:#C39A4E;
  --shadow-s:0 1px 2px rgba(27,35,28,.04);
  --shadow-m:0 12px 30px -18px rgba(27,35,28,.30);
  --shadow-l:0 30px 60px -32px rgba(27,35,28,.40);
  --r:16px; --r-lg:24px; --r-xl:30px;
  --fx:cubic-bezier(.22,.7,.3,1);
  --wrap:1240px;
  --ff-disp:"Schibsted Grotesk", system-ui, sans-serif;
  --ff-body:"Hanken Grotesk", system-ui, sans-serif;
  --ff-mono:"Spline Sans Mono", ui-monospace, monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{margin:0; font-family:var(--ff-body); color:var(--ink); background:var(--paper);
  font-size:17px; line-height:1.6; -webkit-font-smoothing:antialiased; letter-spacing:.004em}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; color:inherit}
h1,h2,h3,h4{font-family:var(--ff-disp); font-weight:700; line-height:1.04;
  letter-spacing:-.03em; margin:0}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 26px}
.mono{font-family:var(--ff-mono); font-variant-numeric:tabular-nums}

/* ---------- emblema / logo (badge moderno) ---------- */
.emblem{border-radius:13px}
.emblem .em-bg{fill:var(--forest)}
.emblem .em-seed{fill:var(--clay)}
.emblem .em-stem{stroke:#F4EEDF; stroke-width:2.6; stroke-linecap:round}
.emblem .em-leaf{fill:#F4EEDF}
.emblem .em-leaf2{fill:var(--sage)}
.brand{display:inline-flex; align-items:center; gap:12px}
.brand .emblem{box-shadow:0 6px 16px -8px rgba(28,58,40,.6)}
.brand .wordmark{font-family:var(--ff-disp); font-weight:700; font-size:24px; letter-spacing:-.04em; color:var(--forest); line-height:1}
.brand .wordmark b{font-weight:800}
.brand .wordmark span{font-weight:600; opacity:.62}
.brand.on-dark .wordmark{color:#F4EEDF}
.brand.on-dark .wordmark span{opacity:.7}
.brand-link{display:inline-flex}

/* ---------- topbar ---------- */
.topbar{background:var(--forest); color:#E9E2CE; font-size:13px}
.topbar .wrap{display:flex; gap:22px; justify-content:center; align-items:center; padding:8px 26px; letter-spacing:.02em}
.topbar b{color:#fff; font-weight:600}
.topbar .dot{width:3px;height:3px;border-radius:50%;background:var(--sage)}
.topbar .t-extra{display:none}
@media(min-width:820px){.topbar .t-extra{display:inline-flex; gap:22px; align-items:center}}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:50; background:rgba(251,250,246,.82);
  backdrop-filter:saturate(1.3) blur(14px); border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s}
.site-head.scrolled{border-bottom-color:var(--line); box-shadow:var(--shadow-s)}
.site-head .wrap{display:flex; align-items:center; gap:22px; padding:14px 26px}
.nav{display:none; align-items:center; gap:26px; margin-left:10px; font-size:15.5px; font-weight:500}
.nav>a{position:relative; padding:6px 0; opacity:.82; transition:opacity .2s}
.nav>a:hover{opacity:1}
.nav>a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1.5px; background:var(--clay); transition:right .3s var(--fx)}
.nav>a:hover::after{right:0}
.nav a.hot{color:var(--clay-2); font-weight:600; opacity:1}
@media(min-width:1000px){.nav{display:flex}}

/* mega menú */
.nav-drop{position:relative}
.nav-trigger{display:inline-flex; align-items:center; gap:6px; border:0; background:none; font-size:15.5px; font-weight:500; opacity:.82; padding:6px 0}
.nav-trigger .ic{transition:transform .3s var(--fx)}
.nav-drop:hover .nav-trigger, .nav-drop.open .nav-trigger{opacity:1}
.nav-drop:hover .nav-trigger .ic, .nav-drop.open .nav-trigger .ic{transform:rotate(180deg)}
.mega{position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(8px);
  width:min(920px,90vw); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-l); padding:26px; opacity:0; visibility:hidden; transition:.28s var(--fx); z-index:60}
.nav-drop:hover .mega, .nav-drop.open .mega{opacity:1; visibility:visible; transform:translateX(-50%)}
.mega-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px 26px}
.mega-col{display:flex; flex-direction:column; gap:3px}
.mega-h{display:flex; align-items:center; gap:9px; font-weight:700; font-size:14.5px; color:var(--forest); margin-bottom:7px}
.mega-ic{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;background:var(--sage-soft); color:var(--forest-2)}
.mega-s{font-size:13.5px; color:var(--muted); padding:3px 0; transition:color .18s}
.mega-s:hover{color:var(--clay)}

.searchbar{display:none; flex:1; max-width:330px; margin-left:auto}
.searchbar form{display:flex; align-items:center; gap:9px; width:100%; background:var(--card);
  border:1px solid var(--line); border-radius:30px; padding:9px 16px; color:var(--muted); transition:border-color .2s, box-shadow .2s}
.searchbar form:focus-within{border-color:var(--sage); box-shadow:0 0 0 4px var(--sage-soft)}
.searchbar input{border:0; background:transparent; flex:1; font:inherit; font-size:14.5px; outline:none; color:var(--ink)}
@media(min-width:1140px){.searchbar{display:block}}
.head-actions{margin-left:auto; display:flex; align-items:center; gap:9px}
@media(min-width:1140px){.head-actions{margin-left:14px}}
.icon-btn{display:grid;place-items:center; width:42px;height:42px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--forest); transition:.22s var(--fx)}
.icon-btn:hover{background:var(--forest); color:#fff; border-color:var(--forest)}
.cart-btn{position:relative}
.cart-count{position:absolute; top:-4px; right:-4px; min-width:19px; height:19px; padding:0 5px; border-radius:10px;
  background:var(--clay); color:#fff; font-family:var(--ff-mono); font-size:11px; display:grid; place-items:center; font-weight:600}
.search-m{display:grid}
@media(min-width:1140px){.search-m{display:none}}
.burger{display:grid}
@media(min-width:1000px){.burger{display:none}}
.ic{display:block}

/* ---------- buttons ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-weight:600; font-size:15.5px;
  padding:14px 26px; border-radius:40px; border:1px solid transparent; transition:.25s var(--fx); white-space:nowrap}
.btn .ic{transition:transform .25s var(--fx)}
.btn:hover .ic{transform:translateX(3px)}
.btn-primary{background:var(--clay); color:#fff; box-shadow:0 10px 22px -12px rgba(188,92,57,.7)}
.btn-primary:hover{background:var(--clay-2); transform:translateY(-1px)}
.btn-dark{background:var(--forest); color:#F2ECD9}
.btn-dark:hover{background:var(--ink)}
.btn-ghost{background:var(--card); border-color:var(--line-2); color:var(--forest)}
.btn-ghost:hover{background:var(--forest); color:#fff; border-color:var(--forest)}
.btn-block{width:100%}
.btn-sm{padding:10px 17px; font-size:14px}

/* ---------- hero ---------- */
.hero{padding:74px 0 34px; overflow:hidden}
.hero .wrap{display:grid; gap:42px; grid-template-columns:1fr; align-items:center}
@media(min-width:920px){.hero .wrap{grid-template-columns:1.08fr .92fr; gap:60px}}
.hero-kicker{display:inline-flex; align-items:center; gap:10px; font-size:12.5px; text-transform:uppercase;
  letter-spacing:.2em; color:var(--clay-2); font-weight:700; margin-bottom:24px}
.hero-kicker .line{width:40px;height:1px;background:var(--clay)}
.hero h1{font-size:clamp(48px,8.5vw,96px); letter-spacing:-.035em; color:var(--forest); font-weight:700}
.hero h1 em{font-style:italic; color:var(--clay)}
.hero p.lead{font-size:20px; max-width:32ch; color:var(--ink); opacity:.78; margin:26px 0 32px; line-height:1.55}
.hero-cta{display:flex; flex-wrap:wrap; gap:14px; align-items:center}
.hero-figure{position:relative; aspect-ratio:1/1.05; border-radius:var(--r-xl);
  background:radial-gradient(120% 120% at 80% 10%, #2E5639 0%, #1C3A28 60%); box-shadow:var(--shadow-l); overflow:hidden; isolation:isolate}
.hero-figure svg.bot{position:absolute; inset:-8% -12% auto auto; width:80%; opacity:.14; color:#cfe0b6}
.hero-figure .stat{position:absolute; left:30px; bottom:30px; right:30px; color:#F2ECD9}
.hero-figure .stat .big{font-family:var(--ff-disp); font-size:clamp(36px,5.6vw,58px); line-height:1.02; letter-spacing:-.02em}
.hero-figure .stat .sub{font-size:14.5px; opacity:.8; margin-top:12px; max-width:26ch}
.hero-figure .price-chip{position:absolute; top:26px; left:26px; background:rgba(255,255,255,.14); backdrop-filter:blur(6px);
  color:#fff; font-family:var(--ff-mono); font-size:13px; padding:8px 14px; border-radius:30px; display:flex; align-items:center; gap:7px; font-weight:600; border:1px solid rgba(255,255,255,.2)}

/* ---------- trust ---------- */
.trust{border-top:1px solid var(--line); border-bottom:1px solid var(--line); margin-top:54px}
.trust .wrap{display:grid; grid-template-columns:repeat(2,1fr)}
@media(min-width:760px){.trust .wrap{grid-template-columns:repeat(4,1fr)}}
.trust .t{display:flex; gap:13px; align-items:center; padding:22px 24px; border-right:1px solid var(--line)}
.trust .t:nth-child(2n){border-right:0}
@media(min-width:760px){.trust .t{border-right:1px solid var(--line)} .trust .t:last-child{border-right:0}}
.trust .t .ic{color:var(--clay)}
.trust .t b{display:block; font-size:14.5px; font-weight:650}
.trust .t span{font-size:12.5px; color:var(--muted)}

/* ---------- sections ---------- */
.sec{padding:80px 0}
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px}
.sec-head .eyebrow{display:inline-flex; align-items:center; gap:7px; font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--clay-2); font-weight:700; margin-bottom:14px}
.sec-head h2{font-size:clamp(31px,4.6vw,48px); color:var(--forest); max-width:20ch; font-weight:700}
.sec-head .link{font-weight:600; color:var(--forest); display:inline-flex; gap:7px; align-items:center; white-space:nowrap}
.sec-head .link:hover{color:var(--clay)}

/* ---------- category index ---------- */
.cat-index{border-top:1px solid var(--line-2)}
.cat-row{display:grid; grid-template-columns:auto 1fr auto auto; align-items:center; gap:22px; padding:24px 8px; border-bottom:1px solid var(--line); transition:.32s var(--fx)}
.cat-row .num{font-family:var(--ff-mono); font-size:13px; color:var(--muted-2); width:32px}
.cat-row .cn{display:flex; align-items:center; gap:18px}
.cat-row .cn .ci{width:48px;height:48px;border-radius:13px;display:grid;place-items:center; background:var(--card); color:var(--forest-2); border:1px solid var(--line); transition:.32s var(--fx)}
.cat-row .cn h3{font-size:25px; color:var(--ink); transition:.32s var(--fx); font-weight:700}
.cat-row .cn p{font-size:14px; color:var(--muted); margin:4px 0 0; max-width:54ch}
.cat-row .cc{font-family:var(--ff-mono); font-size:13px; color:var(--muted-2)}
.cat-row .go{color:var(--clay); opacity:0; transform:translateX(-8px); transition:.32s var(--fx)}
.cat-row:hover{background:var(--card); padding-left:20px; padding-right:20px; border-radius:16px; box-shadow:var(--shadow-m); border-color:transparent}
.cat-row:hover .cn h3{color:var(--clay-2)}
.cat-row:hover .cn .ci{background:var(--forest); color:#fff; border-color:var(--forest); transform:rotate(-4deg)}
.cat-row:hover .go{opacity:1; transform:none}
@media(max-width:680px){.cat-row{grid-template-columns:auto 1fr auto; gap:14px} .cat-row .cn p{display:none} .cat-row .go{display:none} .cat-row .cn h3{font-size:20px}}

/* ---------- product grid / cards ---------- */
.grid{display:grid; gap:22px; grid-template-columns:repeat(2,1fr)}
@media(min-width:680px){.grid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.grid{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:.3s var(--fx); position:relative}
.card:hover{transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:transparent}
.card .ph{aspect-ratio:1; background:#fff; overflow:hidden; display:grid; place-items:center; padding:16px}
.card .ph img{width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; transition:transform .55s var(--fx)}
.card:hover .ph img{transform:scale(1.07)}
.card .body{padding:15px 16px 17px; display:flex; flex-direction:column; gap:9px; flex:1}
.card .cat-tag{font-size:11px; text-transform:uppercase; letter-spacing:.12em; color:var(--sage); font-weight:700}
.card h3.pn{font-family:var(--ff-body); font-weight:600; font-size:15px; line-height:1.34; letter-spacing:0;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.6em}
.card .foot{margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:10px; padding-top:6px}
.card .price{font-family:var(--ff-mono); font-size:18px; font-weight:600; color:var(--forest)}
.card .price small{font-family:var(--ff-body); font-size:11px; color:var(--muted); font-weight:500}
.card .add{width:42px;height:42px;border-radius:12px; background:var(--forest); color:#fff; display:grid;place-items:center; border:0; transition:.22s var(--fx)}
.card .add:hover{background:var(--clay); transform:rotate(90deg)}
.card a.add:hover{transform:translateX(2px)}
.badge{position:absolute; top:12px; left:12px; z-index:2; background:var(--clay); color:#fff; font-family:var(--ff-mono); font-size:11px; font-weight:600; padding:5px 9px; border-radius:8px}
.badge.green{background:var(--forest); left:auto; right:12px}

/* ---------- packs ---------- */
.packs-hero{padding:60px 0 18px; background:linear-gradient(180deg,var(--paper-2),transparent)}
.packs-hero .ph-kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:var(--clay-2); font-weight:700; margin:8px 0 16px}
.packs-hero h1{font-size:clamp(38px,6vw,68px); color:var(--forest); font-weight:700}
.packs-hero p{font-size:18px; color:var(--muted); max-width:58ch; margin:16px 0 0}
.packs-hero p strong{color:var(--clay-2)}
.ph-stats{display:flex; gap:40px; margin-top:30px; flex-wrap:wrap}
.ph-stats b{font-family:var(--ff-disp); font-size:34px; color:var(--forest); display:block; line-height:1}
.ph-stats span{font-size:13px; color:var(--muted)}
.packs-grid{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:680px){.packs-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1040px){.packs-grid{grid-template-columns:repeat(3,1fr)}}
.feat-grid{grid-template-columns:1fr}
@media(min-width:760px){.feat-grid{grid-template-columns:repeat(3,1fr)}}
.pack-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column; transition:.32s var(--fx)}
.pack-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:transparent}
.pack-card.feat{border-color:var(--clay-soft); box-shadow:0 0 0 1px var(--clay-soft), var(--shadow-m)}
.pc-collage{position:relative; display:block; background:linear-gradient(160deg,#fff,#FAF7EF); border-bottom:1px solid var(--line); padding:18px}
.pc-imgs{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.pc-i{aspect-ratio:1; background:#fff; border:1px solid var(--line); border-radius:12px; display:grid; place-items:center; padding:10px}
.pc-i img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply}
.pc-save{position:absolute; top:14px; left:14px; z-index:2; background:var(--clay); color:#fff; font-family:var(--ff-mono); font-weight:600; font-size:12px; padding:6px 11px; border-radius:20px; display:flex; gap:5px; align-items:center; box-shadow:var(--shadow-m)}
.pc-hot{position:absolute; top:14px; right:14px; z-index:2; background:var(--forest); color:#fff; font-size:11px; font-weight:600; padding:6px 10px; border-radius:20px; display:flex; gap:5px; align-items:center}
.pc-count{position:absolute; bottom:14px; right:14px; background:rgba(27,35,28,.78); color:#fff; font-family:var(--ff-mono); font-size:11px; padding:4px 9px; border-radius:14px}
.pc-body{padding:22px; display:flex; flex-direction:column; gap:10px; flex:1}
.pc-tema{font-size:11.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--sage); font-weight:700}
.pc-body h3{font-size:23px; color:var(--forest); font-weight:700}
.pc-body p{font-size:14px; color:var(--muted); margin:0; flex:1; line-height:1.55}
.pc-meta{margin-top:4px}
.pc-price{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap}
.pc-price .was{font-family:var(--ff-mono); font-size:14px; color:var(--muted-2); text-decoration:line-through}
.pc-price .now{font-family:var(--ff-mono); font-size:26px; font-weight:600; color:var(--clay-2)}
.pc-price .save-eur{font-size:12px; font-weight:700; color:var(--forest); background:var(--sage-soft); padding:3px 9px; border-radius:20px}
.pc-actions{display:flex; gap:10px; margin-top:6px}

/* ---------- product page ---------- */
.pp{display:grid; gap:46px; grid-template-columns:1fr; padding:40px 0 20px}
@media(min-width:880px){.pp{grid-template-columns:1.02fr 1fr; gap:62px}}
.pp-media{position:sticky; top:100px; align-self:start; display:flex; flex-direction:column; gap:14px}
.pp-media .frame{background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); aspect-ratio:1; display:grid; place-items:center; padding:38px; box-shadow:var(--shadow-m)}
.pp-media .frame img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply; transition:opacity .25s var(--fx)}
.thumbs{display:flex; gap:10px; flex-wrap:wrap}
.thumb-b{width:64px;height:64px;border:1px solid var(--line); border-radius:12px; background:#fff; padding:6px; transition:.2s var(--fx)}
.thumb-b img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply}
.thumb-b.on, .thumb-b:hover{border-color:var(--forest); box-shadow:0 0 0 3px var(--sage-soft)}
.crumbs{font-size:13px; color:var(--muted); display:flex; gap:8px; flex-wrap:wrap}
.crumbs a:hover{color:var(--clay)}
.pp-info h1{font-size:clamp(30px,4vw,46px); color:var(--forest); margin:8px 0 0; font-weight:700}
.pp-sub{color:var(--sage); font-weight:700; text-transform:uppercase; letter-spacing:.13em; font-size:12px}
.pp-price{display:flex; align-items:baseline; gap:12px; margin:24px 0 4px; flex-wrap:wrap}
.pp-price .now{font-family:var(--ff-mono); font-size:38px; font-weight:600; color:var(--ink)}
.pp-price .tax{font-size:13px; color:var(--muted)}
.pp-desc{color:var(--ink); opacity:.8; margin:18px 0 6px; font-size:16px}
/* variantes */
.variants{margin:24px 0 4px}
.var-h{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--forest); margin-bottom:12px; display:flex; gap:8px; align-items:center}
.var-list{display:flex; flex-wrap:wrap; gap:10px}
.var{display:flex; flex-direction:column; gap:3px; align-items:flex-start; border:1px solid var(--line-2); background:var(--card); border-radius:13px; padding:10px 15px; transition:.2s var(--fx); min-width:96px}
.var:hover{border-color:var(--sage)}
.var.on{border-color:var(--forest); background:var(--forest); color:#fff; box-shadow:var(--shadow-m)}
.var .var-l{font-size:13.5px; font-weight:600}
.var .var-p{font-family:var(--ff-mono); font-size:13px; opacity:.8}
.qty-tiers{border:1px solid var(--line); border-radius:var(--r); background:var(--paper-2); padding:16px 18px; margin:22px 0}
.qty-tiers .qt-h{font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--clay-2); margin-bottom:12px; display:flex; gap:8px; align-items:center}
.qty-tiers .tier{display:flex; justify-content:space-between; font-size:14.5px; padding:6px 0; border-bottom:1px dashed var(--line-2)}
.qty-tiers .tier:last-child{border-bottom:0}
.qty-tiers .tier b{font-family:var(--ff-mono); color:var(--forest)}
.buy-row{display:flex; gap:14px; align-items:stretch; margin:24px 0 14px; flex-wrap:wrap}
.stepper{display:flex; align-items:center; border:1px solid var(--line-2); border-radius:40px; background:var(--card); overflow:hidden}
.stepper button{width:46px;height:54px; border:0; background:transparent; color:var(--forest); display:grid; place-items:center}
.stepper button:hover{background:var(--paper-2)}
.stepper input{width:44px; text-align:center; border:0; background:transparent; font-family:var(--ff-mono); font-size:17px; font-weight:600; outline:none}
.pp-meta{display:flex; flex-direction:column; gap:11px; margin-top:24px; border-top:1px solid var(--line); padding-top:20px; font-size:14.5px; color:var(--muted)}
.pp-meta div{display:flex; gap:10px; align-items:center}
.pp-meta .ic{color:var(--sage)}
.pc-collage-detail{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line)}
.pc-collage-detail .ci{background:#fff; display:grid; place-items:center; padding:16px}
.pc-collage-detail .ci img{width:100%;height:100%;object-fit:contain; mix-blend-mode:multiply}

/* tip banner en ficha */
.tip-banner{display:flex; align-items:center; gap:24px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; transition:.3s var(--fx); flex-wrap:wrap}
.tip-banner:hover{box-shadow:var(--shadow-m); transform:translateY(-3px)}
.tip-banner .tb-ic{width:62px;height:62px; background:var(--sage-soft); border-radius:16px; display:grid; place-items:center; color:var(--forest)}
.tip-banner>div{flex:1; min-width:240px}
.tip-banner .tag{color:var(--clay-2); font-weight:700; text-transform:uppercase; letter-spacing:.13em; font-size:11.5px}
.tip-banner h3{font-size:24px; color:var(--forest); margin:6px 0 4px; font-weight:700}
.tip-banner p{color:var(--muted); margin:0; font-size:14.5px}

/* ---------- category toolbar ---------- */
.cat-hero{padding:48px 0 12px}
.cat-hero h1{font-size:clamp(34px,5vw,58px); color:var(--forest); font-weight:700}
.cat-hero p{color:var(--muted); max-width:62ch; margin:14px 0 0; font-size:16.5px}
.toolbar{position:sticky; top:71px; z-index:20; background:rgba(251,250,246,.92); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:18px 0}
.chips{display:flex; gap:9px; flex-wrap:wrap; flex:1}
.chip{font-size:13.5px; font-weight:600; padding:8px 15px; border-radius:30px; border:1px solid var(--line-2); background:var(--card); color:var(--ink); transition:.2s var(--fx)}
.chip:hover{border-color:var(--forest)}
.chip.on{background:var(--forest); color:#fff; border-color:var(--forest)}
.chip .c{opacity:.6; font-family:var(--ff-mono); font-size:12px; margin-left:5px}
.select{border:1px solid var(--line-2); background:var(--card); border-radius:30px; padding:9px 15px; font:inherit; font-size:14px; font-weight:600; color:var(--ink)}

/* ---------- cart ---------- */
.cart-grid{display:grid; gap:34px; grid-template-columns:1fr; padding:34px 0}
@media(min-width:900px){.cart-grid{grid-template-columns:1.6fr .9fr; gap:46px; align-items:start}}
.cart-line{display:grid; grid-template-columns:90px 1fr auto; gap:18px; padding:18px 0; border-bottom:1px solid var(--line); align-items:center}
.cart-line .thumb{width:90px;height:90px; background:#fff; border:1px solid var(--line); border-radius:13px; display:grid; place-items:center; padding:9px}
.cart-line .thumb img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.cart-line h4{font-family:var(--ff-body); font-weight:650; font-size:16px}
.cart-line .meta{font-size:13px; color:var(--muted); margin-top:4px}
.cart-line .ln-price{font-family:var(--ff-mono); font-weight:600; font-size:17px; color:var(--forest); text-align:right}
.cart-line .save{color:var(--clay-2); font-size:12px; font-family:var(--ff-mono)}
.cart-mini-stepper{display:inline-flex; border:1px solid var(--line-2); border-radius:30px; overflow:hidden; margin-top:8px}
.cart-mini-stepper span{min-width:34px; display:grid; place-items:center; font-family:var(--ff-mono); font-weight:600}
.summary{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:26px; position:sticky; top:100px; box-shadow:var(--shadow-s)}
.summary h3{font-size:22px; color:var(--forest); margin-bottom:18px; font-weight:700}
.summary .row{display:flex; justify-content:space-between; padding:9px 0; font-size:15.5px}
.summary .row.muted{color:var(--muted); font-size:14px}
.summary .row.total{border-top:1px solid var(--line); margin-top:8px; padding-top:16px; font-size:21px; font-weight:700}
.ship-bar{margin:14px 0 6px; background:var(--paper-2); border-radius:12px; padding:13px 15px; font-size:13.5px; color:var(--forest)}
.ship-bar .track{height:7px; border-radius:5px; background:var(--line-2); margin-top:9px; overflow:hidden}
.ship-bar .fill{height:100%; background:linear-gradient(90deg,var(--sage),var(--forest)); border-radius:5px; transition:width .6s var(--fx)}
.empty{text-align:center; padding:88px 20px}
.empty .ic{color:var(--sage); margin-bottom:12px}
.empty h2{font-size:32px; color:var(--forest); font-weight:700}
.empty p{color:var(--muted); margin:12px 0 24px}
.notice{display:flex; gap:13px; background:var(--clay-soft); border:1px solid #EAD2C2; border-radius:12px; padding:14px 16px; font-size:14px; color:#7a4a30; margin-top:16px}
.notice .ic{color:var(--clay); flex-shrink:0}

/* ---------- consejos grid ---------- */
.tips-grid{display:grid; gap:24px; grid-template-columns:1fr}
@media(min-width:760px){.tips-grid{grid-template-columns:repeat(3,1fr)}}
.tip-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; transition:.32s var(--fx); display:flex; flex-direction:column}
.tip-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-l); border-color:transparent}
.tc-illus{background:linear-gradient(160deg,var(--sage-soft),#fff); display:grid; place-items:center; padding:20px; border-bottom:1px solid var(--line)}
.tc-illus .tip-illus{width:130px; height:130px}
.tip-card .tag{font-size:11.5px; text-transform:uppercase; letter-spacing:.13em; color:var(--clay-2); font-weight:700; display:flex; gap:6px; align-items:center; padding:22px 24px 0}
.tip-card h3{font-size:22px; color:var(--forest); padding:8px 24px 0; font-weight:700}
.tip-card p{font-size:14.5px; color:var(--muted); margin:10px 0; padding:0 24px; flex:1}
.tip-card .more{font-weight:600; color:var(--forest); display:inline-flex; gap:7px; align-items:center; padding:0 24px 24px}

/* ---------- article (consejo) ---------- */
.article-hero{background:linear-gradient(180deg,var(--paper-2),transparent); padding:30px 0 50px; margin-top:8px}
.ah-grid{display:grid; gap:30px; grid-template-columns:1fr; align-items:center}
@media(min-width:820px){.ah-grid{grid-template-columns:1.2fr .8fr}}
.article-hero h1{font-size:clamp(32px,5vw,54px); color:var(--forest); margin:10px 0 0; font-weight:700; letter-spacing:-.025em}
.article-hero .lead{font-size:20px; color:var(--muted); margin:18px 0 0; line-height:1.5; max-width:36ch}
.ah-illus{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); display:grid; place-items:center; padding:30px; box-shadow:var(--shadow-m)}
.ah-illus .tip-illus{width:min(260px,80%); height:auto}
.tip-illus .il-leaf{stroke:var(--forest); fill:none}
.tip-illus .il-leaf2{stroke:var(--sage); fill:none}
.tip-illus .il-clay{stroke:var(--clay); fill:none}
.tip-illus .il-line{stroke:var(--forest); fill:none}
.tip-illus .il-line2{stroke:var(--sage); fill:none; opacity:.7}
.tip-illus .il-drop{stroke:var(--sage); fill:none}
.tip-illus .il-arrow{stroke:var(--clay); fill:none}
.tip-illus .il-stem{stroke:var(--forest); fill:none}
.tip-illus .il-veino{stroke:#fff; fill:none; opacity:.55}
.tip-illus .il-fleaf{fill:var(--forest); stroke:none}
.tip-illus .il-fsage{fill:var(--sage); stroke:none}
.tip-illus .il-fclay{fill:var(--clay); stroke:none}
.tip-illus .il-fclay2{fill:var(--clay); stroke:none; opacity:.8}
.tip-illus .il-fdrop{fill:#bcd3da; stroke:none}
.tip-illus .il-scale{fill:none; stroke:var(--clay); stroke-width:2.4}
.tip-illus .il-txt{font-family:var(--ff-mono); font-size:13px; fill:var(--muted); stroke:none}
.article-body{display:grid; gap:46px; grid-template-columns:1fr; padding:50px 0 10px}
@media(min-width:960px){.article-body{grid-template-columns:1fr 320px; gap:54px; align-items:start}}
.article-main{max-width:720px}
.article-main>p{font-size:17.5px; line-height:1.75; margin:0 0 22px; color:#34372C}
.article-main h2{font-size:clamp(25px,3.2vw,34px); color:var(--forest); margin:42px 0 18px; font-weight:700}
.a-bullets{list-style:none; padding:0; margin:0 0 26px; display:flex; flex-direction:column; gap:14px}
.a-bullets li{display:flex; gap:13px; font-size:16.5px; line-height:1.6}
.a-bullets .b-ic{flex-shrink:0; width:26px;height:26px;border-radius:50%; background:var(--sage-soft); color:var(--forest); display:grid; place-items:center; margin-top:2px}
.a-table-wrap{overflow-x:auto; margin:0 0 28px; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-s)}
.a-table{width:100%; border-collapse:collapse; font-size:15px; min-width:420px}
.a-table th{background:var(--forest); color:#F2ECD9; text-align:left; padding:13px 16px; font-family:var(--ff-body); font-weight:600; font-size:14px}
.a-table td{padding:12px 16px; border-bottom:1px solid var(--line); color:var(--ink)}
.a-table tr:last-child td{border-bottom:0}
.a-table tbody tr:nth-child(2n){background:var(--paper-2)}
.a-table td:first-child{font-weight:600; color:var(--forest)}
.a-quote{margin:0 0 30px; padding:24px 28px; background:var(--sage-soft); border-left:4px solid var(--forest); border-radius:0 var(--r) var(--r) 0}
.a-quote p{font-family:var(--ff-disp); font-style:italic; font-size:21px; line-height:1.45; color:var(--forest); margin:0}
.a-quote cite{display:block; margin-top:12px; font-style:normal; font-size:13.5px; color:var(--muted); font-family:var(--ff-body); font-weight:600}
.a-callout{display:flex; gap:16px; margin:0 0 30px; padding:22px 24px; background:var(--clay-soft); border:1px solid #EAD2C2; border-radius:var(--r)}
.a-callout .ac-ic{flex-shrink:0; width:44px;height:44px;border-radius:12px; background:var(--clay); color:#fff; display:grid; place-items:center}
.a-callout strong{display:block; color:var(--clay-2); font-size:16px; margin-bottom:5px}
.a-callout p{margin:0; font-size:15px; color:#5e4636; line-height:1.55}
.a-cta{margin-top:36px}
.article-aside{position:sticky; top:100px}
.aside-card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:22px; box-shadow:var(--shadow-s)}
.aside-card h4{font-family:var(--ff-body); font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--muted); margin-bottom:14px}
.mini-prod{display:flex; gap:12px; align-items:center; padding:9px 0; border-bottom:1px solid var(--line)}
.mini-prod:last-child{border-bottom:0}
.mini-prod .mp-img{width:50px;height:50px;background:#fff;border:1px solid var(--line);border-radius:10px; display:grid; place-items:center; padding:5px; flex-shrink:0}
.mini-prod .mp-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.mini-prod .mp-n{font-size:13.5px; font-weight:600; line-height:1.3; display:block}
.mini-prod .mp-p{font-family:var(--ff-mono); font-size:13px; color:var(--clay-2); font-weight:600}
.mini-prod:hover .mp-n{color:var(--clay)}

/* ---------- footer ---------- */
.site-foot{background:var(--forest); color:#E4DCC6; margin-top:80px; padding:68px 0 30px}
.site-foot .cols{display:grid; gap:42px; grid-template-columns:1fr}
@media(min-width:760px){.site-foot .cols{grid-template-columns:1.7fr 1fr 1fr 1.3fr}}
.site-foot h4{font-family:var(--ff-body); font-weight:700; font-size:12.5px; text-transform:uppercase; letter-spacing:.12em; color:var(--sage); margin-bottom:16px}
.site-foot a{display:block; padding:5px 0; opacity:.82; font-size:15px; transition:opacity .2s}
.site-foot a:hover{opacity:1; color:#fff}
.foot-brand .about{font-size:14.5px; opacity:.78; max-width:36ch; margin:16px 0 18px}
.foot-badges{display:flex; gap:16px; flex-wrap:wrap}
.foot-badges span{display:inline-flex; gap:7px; align-items:center; font-size:13px; opacity:.85}
.foot-bottom{border-top:1px solid rgba(255,255,255,.13); margin-top:48px; padding-top:22px; display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; font-size:13px; opacity:.7}

/* ---------- mobile nav ---------- */
.mnav{position:fixed; inset:0; z-index:70; background:var(--paper); transform:translateX(100%); transition:transform .4s var(--fx); display:flex; flex-direction:column; padding:22px}
.mnav.open{transform:none}
.mnav .top{display:flex; justify-content:space-between; align-items:center; margin-bottom:24px}
.mnav-scroll{overflow-y:auto}
.mnav a{display:flex; align-items:center; gap:14px; font-family:var(--ff-disp); font-size:26px; color:var(--forest); padding:14px 0; border-bottom:1px solid var(--line); font-weight:700}
.mnav a .ic{color:var(--sage)}
.mnav a.hot{color:var(--clay-2)}

/* ---------- back to top ---------- */
.to-top{position:fixed; right:22px; bottom:22px; z-index:45; width:50px; height:50px; border-radius:50%; border:1px solid var(--line-2);
  background:var(--forest); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-l);
  opacity:0; visibility:hidden; transform:translateY(14px) scale(.9); transition:.3s var(--fx)}
.to-top.show{opacity:1; visibility:visible; transform:none}
.to-top:hover{background:var(--clay)}

/* ---------- reveal ---------- */
.rv{opacity:0; transform:translateY(22px)}
.rv.in{opacity:1; transform:none; transition:opacity .7s var(--fx), transform .7s var(--fx)}
@media(prefers-reduced-motion:reduce){.rv{opacity:1; transform:none} *{scroll-behavior:auto}}

/* ---------- utils ---------- */
.center{text-align:center}
.count-pill{font-family:var(--ff-mono); font-size:13px; color:var(--muted-2)}

/* ============== v3: ofertas, puntos, autocompletar, club ============== */

/* precio de oferta en tarjeta */
.card .price-of{color:var(--clay-2)}
.card .price-was{font-family:var(--ff-body); font-size:12px; color:var(--muted-2); text-decoration:line-through; font-weight:500; margin-left:4px}

/* ficha: oferta + puntos */
.frame-flag{position:absolute; top:18px; left:18px; z-index:2; background:var(--clay); color:#fff; font-family:var(--ff-mono); font-weight:600; font-size:12px; padding:6px 11px; border-radius:20px; box-shadow:var(--shadow-m)}
.pp-media .frame{position:relative}
.now-was{font-family:var(--ff-mono); font-size:18px; color:var(--muted-2); text-decoration:line-through}
.now-flag{font-size:12.5px; font-weight:700; color:#fff; background:var(--clay); padding:4px 10px; border-radius:20px}
.ptos-line{display:flex; align-items:center; gap:8px; font-size:14px; color:var(--forest); background:var(--sage-soft); border-radius:30px; padding:9px 15px; margin:18px 0 4px; width:fit-content}
.ptos-line .ic{color:var(--gold)}
.ptos-line a{color:var(--clay-2); font-weight:600; text-decoration:underline}
.notice.supl{background:var(--sage-soft); border-color:#cdd9bf; color:#3c4a31}
.notice.supl .ic{color:var(--forest)}
.ptos-pill{display:flex; align-items:center; gap:8px; justify-content:center; font-size:13.5px; color:var(--forest); background:var(--sage-soft); border-radius:30px; padding:10px 14px; margin-top:14px}
.ptos-pill .ic{color:var(--gold)}

/* autocompletar */
.suggest{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-l); padding:7px; opacity:0; visibility:hidden; transform:translateY(6px); transition:.2s var(--fx); z-index:60; max-height:70vh; overflow:auto}
.suggest.open{opacity:1; visibility:visible; transform:none}
.sg-item{display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px; transition:background .15s}
.sg-item:hover{background:var(--paper-2)}
.sg-img{width:40px;height:40px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;padding:4px}
.sg-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.sg-n{flex:1; font-size:14px; font-weight:500; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sg-p{font-family:var(--ff-mono); font-size:13px; font-weight:600; color:var(--forest); white-space:nowrap}
.sg-p .sg-of, .sg-item .sg-of{color:var(--clay-2)}
.sg-all{display:block; text-align:center; padding:11px; font-size:13.5px; font-weight:600; color:var(--clay-2); border-top:1px solid var(--line); margin-top:5px}
.sg-empty{padding:18px; text-align:center; color:var(--muted); font-size:14px}

/* club banner (home) */
.club-banner{position:relative; display:grid; grid-template-columns:1fr; gap:30px; background:radial-gradient(130% 130% at 85% 10%, #2E5639, #1C3A28 65%); color:#EDE7D5; border-radius:var(--r-xl); padding:42px; overflow:hidden; transition:.3s var(--fx)}
@media(min-width:820px){.club-banner{grid-template-columns:1.3fr 1fr; align-items:center; padding:52px}}
.club-banner:hover{transform:translateY(-4px); box-shadow:var(--shadow-l)}
.cb-deco{position:absolute; right:-30px; top:-40px; color:rgba(207,224,182,.10)}
.cb-content{position:relative; z-index:1}
.cb-kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:#cfe0bf; font-weight:700; margin-bottom:14px}
.club-banner h2{font-size:clamp(30px,4vw,44px); color:#fff; margin-bottom:14px}
.club-banner p{font-size:16.5px; opacity:.85; max-width:42ch; margin-bottom:24px}
.club-banner p b{color:#fff}
.cb-tiers{position:relative; z-index:1; display:flex; flex-direction:column; gap:12px}
.cb-tier{display:flex; gap:14px; align-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); border-radius:14px; padding:14px 16px}
.cbt-n{font-family:var(--ff-mono); font-size:14px; color:#cfe0bf}
.cb-tier b{display:block; font-size:16px; color:#fff}
.cb-tier span{font-size:13px; opacity:.8}

/* club page */
.club-hero{background:radial-gradient(120% 120% at 80% 0%, #2E5639, #15301F 70%); color:#EDE7D5; padding:54px 0 64px}
.club-hero .crumbs{color:#bcd0a8} .club-hero .crumbs a:hover{color:#fff}
.ch-kicker{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; text-transform:uppercase; letter-spacing:.16em; color:#cfe0bf; font-weight:700; margin:10px 0 14px}
.club-hero h1{font-size:clamp(40px,6vw,72px); color:#fff}
.club-hero p{font-size:19px; opacity:.85; max-width:54ch; margin:16px 0 28px}
.club-steps{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:760px){.club-steps{grid-template-columns:repeat(3,1fr)}}
.cs{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:28px; box-shadow:var(--shadow-s)}
.cs-n{width:56px;height:56px;border-radius:15px;display:grid;place-items:center;background:var(--sage-soft);color:var(--forest);margin-bottom:16px}
.cs h3{font-size:20px; color:var(--forest); margin-bottom:8px}
.cs p{color:var(--muted); font-size:15px; margin:0}
.club-levels{display:grid; gap:22px; grid-template-columns:1fr}
@media(min-width:760px){.club-levels{grid-template-columns:repeat(3,1fr)}}
.cl{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:30px; text-align:center; position:relative; transition:.3s var(--fx)}
.cl.top{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold), var(--shadow-m)}
.cl:hover{transform:translateY(-4px); box-shadow:var(--shadow-m)}
.cl-badge{width:60px;height:60px;border-radius:50%;display:grid;place-items:center;background:var(--forest);color:#fff;margin:0 auto 16px}
.cl.top .cl-badge{background:var(--gold)}
.cl h3{font-size:24px; color:var(--forest)}
.cl-min{font-family:var(--ff-mono); font-size:12.5px; color:var(--muted); display:block; margin:6px 0 12px}
.cl p{color:var(--ink); font-size:15px; margin:0}
.club-note{display:flex; gap:10px; align-items:center; justify-content:center; margin-top:34px; color:var(--muted); font-size:14px}
.club-note .ic{color:var(--sage)}

/* ============== v4: tipos de producto, filtros, móvil ============== */

/* etiquetas de tipo en tarjeta */
.badge.tg-var{background:var(--forest); left:auto; right:12px; display:inline-flex; align-items:center; gap:4px}
.badge.tg-pack{background:var(--gold); left:auto; right:12px; display:inline-flex; align-items:center; gap:4px}
.cat-tag .ut{color:var(--muted-2); font-weight:600}

/* chip de tipo en ficha */
.type-chip{display:inline-flex; align-items:center; gap:8px; font-size:13.5px; font-weight:600; padding:8px 14px; border-radius:30px; margin-top:14px}
.type-chip.tc-var{background:var(--sage-soft); color:var(--forest)}
.type-chip.tc-pack{background:#F7EFD8; color:#8a6d22}
.type-chip.tc-ind{background:var(--paper-2); color:var(--muted)}
.type-chip b{font-weight:700}

/* variantes: contador y marca de pack */
.var-count{display:inline-grid; place-items:center; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:var(--forest); color:#fff; font-family:var(--ff-mono); font-size:12px; margin-left:4px}
.var-pk{display:inline-flex; align-items:center; gap:2px; font-family:var(--ff-mono); font-size:10.5px; background:var(--gold); color:#3a2e07; padding:1px 5px; border-radius:8px; margin-left:5px; vertical-align:middle}
.var.on .var-pk{background:#EAD79B}

/* ---------- filtros ---------- */
.toolbar-inner{display:flex; align-items:center; gap:14px; width:100%; flex-wrap:wrap}
.filtros-btn{display:none; align-items:center; gap:8px; font-weight:600; font-size:14.5px; padding:10px 16px; border-radius:30px; border:1px solid var(--line-2); background:var(--card); color:var(--forest)}
.filtros-btn .fb-n{display:grid; place-items:center; min-width:20px; height:20px; border-radius:10px; background:var(--clay); color:#fff; font-family:var(--ff-mono); font-size:11px}
.tb-count{margin-left:auto}
.filters-panel{display:flex; flex-direction:column; gap:14px; width:100%}
.fp-head, .fp-close{display:none}
.fgroup{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.fg-label{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted-2); font-weight:700; min-width:88px}
.fp-clear{display:inline-flex; align-items:center; gap:6px; font-size:13.5px; color:var(--clay-2); font-weight:600; width:fit-content}
.fp-backdrop{display:none}

@media(min-width:900px){
  .toolbar-inner{align-items:flex-start}
  .filters-panel{order:3}
}
@media(max-width:899px){
  .toolbar{padding:12px 0}
  .filtros-btn{display:inline-flex}
  .filters-panel{position:fixed; left:0; right:0; bottom:0; z-index:75; background:var(--paper);
    border-radius:22px 22px 0 0; box-shadow:0 -20px 50px -20px rgba(27,35,28,.5); padding:8px 20px 26px;
    transform:translateY(102%); opacity:0; visibility:hidden;
    transition:transform .35s var(--fx), opacity .25s, visibility .35s; max-height:84vh; overflow:auto; gap:20px}
  .filters-panel.open{transform:none; opacity:1; visibility:visible}
  .fp-head{display:flex; justify-content:space-between; align-items:center; position:sticky; top:0; background:var(--paper); padding:14px 0 10px; font-family:var(--ff-disp); font-size:20px; font-weight:700; color:var(--forest)}
  .fp-close{display:grid; place-items:center; width:38px; height:38px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--forest)}
  .fgroup{flex-direction:column; align-items:stretch; gap:10px}
  .fg-label{min-width:0}
  .fp-backdrop{display:block; position:fixed; inset:0; z-index:74; background:rgba(20,26,20,.4); opacity:0; visibility:hidden; transition:.3s}
  .fp-backdrop.on{opacity:1; visibility:visible}
}

/* ---------- ajustes móvil generales ---------- */
@media(max-width:880px){
  /* selector de variantes: scroll horizontal cómodo, sin amontonar */
  .var-list{flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity}
  .var{flex:0 0 auto; scroll-snap-align:start; min-width:104px}
  .var-list::-webkit-scrollbar{height:5px}
  .var-list::-webkit-scrollbar-thumb{background:var(--line-2); border-radius:5px}
  /* imagen de producto: marco más compacto y miniaturas con scroll */
  .pp{padding-top:20px}
  .pp-media{position:static}
  .pp-media .frame{padding:24px; border-radius:18px}
  .thumbs{flex-wrap:nowrap; overflow-x:auto; padding-bottom:4px}
  .thumb-b{flex:0 0 auto; width:56px; height:56px}
  .pp-info h1{font-size:26px}
  .pp-price .now{font-size:32px}
  .hero{padding:40px 0 24px}
  .sec{padding:54px 0}
  .cat-hero{padding:34px 0 6px}
}
@media(max-width:520px){
  .grid{gap:14px}
  .card .body{padding:12px 13px 14px}
  .card h3.pn{font-size:14px}
  .card .price{font-size:16px}
  .wrap{padding:0 18px}
}

/* ============== v5: cuentas, legal, stock, aviso pack ============== */

/* stock agotado */
.card.agotado .ph img{opacity:.5; filter:grayscale(.4)}
.badge.tg-out{background:#7c7c70}
.tc-out{background:#F3E0DC; color:#9E4A2C}
.pack-warn{display:flex; gap:12px; align-items:flex-start; background:#FBF1D8; border:1px solid #E9D49A; border-radius:14px; padding:14px 16px; margin-top:14px}
.pack-warn .ic{color:#B8860B; flex-shrink:0}
.pack-warn b{color:#8a6310}
.pack-warn div{font-size:14px; color:#6b5418; line-height:1.5}

/* badge multipack más visible */
.badge.tg-pack{background:var(--gold); color:#3a2c06; font-weight:700}

/* auth */
.auth-wrap{display:flex; justify-content:center; padding:54px 20px 30px}
.auth-card{width:100%; max-width:460px; background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:36px; box-shadow:var(--shadow-m)}
.auth-head{margin-bottom:18px}
.auth-kicker{display:inline-flex; align-items:center; gap:7px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; color:var(--clay-2); font-weight:700; margin-bottom:10px}
.auth-card h1{font-size:32px; color:var(--forest)}
.auth-head p{color:var(--muted); margin-top:8px; font-size:15px}
.welcome-strip{display:flex; align-items:center; gap:9px; background:var(--sage-soft); color:var(--forest); border-radius:12px; padding:12px 15px; font-size:14px; margin-bottom:18px}
.auth-error{display:flex; align-items:center; gap:8px; background:#F8E0DC; color:#9E2C1C; border-radius:12px; padding:11px 15px; font-size:14px; margin-bottom:16px}
.auth-form{display:flex; flex-direction:column; gap:14px}
.auth-form label{display:flex; flex-direction:column; gap:6px; font-size:13.5px; font-weight:600; color:var(--ink)}
.auth-form input[type=text],.auth-form input[type=email],.auth-form input[type=password]{border:1px solid var(--line-2); border-radius:12px; padding:13px 15px; font:inherit; font-size:15px; outline:none; transition:.2s}
.auth-form input:focus{border-color:var(--sage); box-shadow:0 0 0 4px var(--sage-soft)}
.auth-form .check{flex-direction:row; align-items:flex-start; gap:10px; font-weight:400; font-size:13.5px; color:var(--muted); line-height:1.5}
.auth-form .check input{margin-top:3px; width:18px; height:18px; accent-color:var(--forest)}
.auth-form .check a{color:var(--clay-2); font-weight:600; text-decoration:underline}
.auth-alt{text-align:center; margin-top:18px; font-size:14.5px; color:var(--muted)}
.auth-alt a{color:var(--clay-2); font-weight:600}
.gracias-ic{width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--sage-soft);color:var(--forest);margin:0 auto 18px}
.gracias-pts{display:inline-flex; align-items:center; gap:8px; background:var(--sage-soft); color:var(--forest); border-radius:30px; padding:10px 18px; font-size:15px; margin:8px 0 22px}
.gracias-cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}

/* welcome mini (carrito/checkout) */
.welcome-mini{display:flex; align-items:center; gap:10px; background:var(--clay-soft); border:1px solid #EAD2C2; color:#7a4a30; border-radius:12px; padding:12px 14px; font-size:13.5px; margin-top:14px; transition:.2s}
.welcome-mini:hover{background:#F2DECF}
.welcome-mini span{flex:1}
.welcome-mini .ic{color:var(--clay)}

/* cuenta */
.account-grid{display:grid; gap:26px; grid-template-columns:1fr}
@media(min-width:820px){.account-grid{grid-template-columns:.9fr 1.4fr; align-items:start}}
.acc-points{background:radial-gradient(130% 130% at 85% 10%, #2E5639, #1C3A28 65%); color:#EDE7D5; border-radius:var(--r-xl); padding:30px}
.ap-kicker{display:inline-flex; align-items:center; gap:7px; font-size:12px; text-transform:uppercase; letter-spacing:.13em; color:#cfe0bf; font-weight:700}
.ap-num{font-family:var(--ff-disp); font-size:60px; font-weight:800; line-height:1; margin:14px 0 4px}
.ap-val{opacity:.85; font-size:15px}
.ap-val b{color:#fff}
.ap-welcome{display:flex; align-items:center; gap:9px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); border-radius:12px; padding:11px 14px; font-size:13.5px; margin-top:18px}
.acc-orders{background:var(--card); border:1px solid var(--line); border-radius:var(--r-xl); padding:30px}
.acc-orders h3{font-size:22px; color:var(--forest); margin-bottom:18px}
.acc-empty{text-align:center; padding:30px 10px; color:var(--muted)}
.acc-empty .ic{color:var(--sage); margin-bottom:12px}
.acc-empty p{margin-bottom:18px; font-size:14.5px}
.acc-order{display:flex; align-items:center; gap:16px; padding:14px 0; border-bottom:1px solid var(--line)}
.acc-order>div:first-child b{display:block; color:var(--forest)} .acc-order>div:first-child span{font-size:13px; color:var(--muted)}
.ao-total{margin-left:auto; font-weight:600; color:var(--forest)}
.ao-pts{font-size:13px; color:var(--clay-2); display:flex; align-items:center; gap:5px}

/* legal */
.legal-body{max-width:760px; margin:0 auto; padding:40px 0}
.legal-body h2{font-size:22px; color:var(--forest); margin:30px 0 10px}
.legal-body p{color:#3a3d32; line-height:1.7; font-size:16px}
.legal-note{margin-top:30px; padding:14px 16px; background:var(--paper-2); border-radius:12px; font-size:13.5px; color:var(--muted)}

/* footer legal row */
.foot-legal{display:flex; flex-wrap:wrap; gap:18px; margin-top:42px; padding-top:22px; border-top:1px solid rgba(255,255,255,.13)}
.foot-legal a{font-size:13.5px; opacity:.8} .foot-legal a:hover{opacity:1; color:#fff}
.foot-bottom{margin-top:18px; border-top:0; padding-top:0}