/* ==========================================================================
   BREATHE — Growshop & Tabaquería
   Sistema de marca: botánico premium + calidez del logo
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Paleta (brand book + calidez logo) */
  --ink:        #232a25;
  --green-900:  #2f3e34;
  --green-700:  #4f6755;   /* verde profundo */
  --green-500:  #7e9c86;   /* verde salvia   */
  --green-300:  #a9bfac;
  --green-100:  #e3eae0;
  --cream:      #f6f4ef;
  --sand:       #e8e2d6;
  --sand-deep:  #ded6c6;
  --clay:       #bf6b45;   /* acento cálido (logo) */
  --clay-soft:  #f0d9cb;
  --amber:      #d99a4e;
  --white:      #ffffff;
  --char:       #171c18;   /* carbón urbano (casi negro verdoso) */
  --gray-700:   #2d2d2d;
  --gray-500:   #6e6e6e;
  --gray-300:   #b9b6ae;

  --bg:         var(--cream);
  --surface:    var(--white);
  --text:       var(--green-900);
  --muted:      var(--gray-500);
  --line:       #e4ded2;

  /* Tipografía */
  --font-head: "Space Grotesk", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Espaciado (4/8/16/24/32/48) */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 72px; --s8: 112px;

  /* Radios */
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 34px; --r-pill: 999px;

  /* Sombras */
  --sh-1: 0 1px 2px rgba(35,42,37,.04), 0 2px 8px rgba(35,42,37,.05);
  --sh-2: 0 6px 18px rgba(35,42,37,.08);
  --sh-3: 0 18px 50px rgba(35,42,37,.16);

  --maxw: 1200px;
  --header-h: 72px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{ background:var(--green-300); color:var(--char); }
:focus-visible{ outline:3px solid var(--clay); outline-offset:3px; }
.skip-link{
  position:fixed; top:12px; left:12px; z-index:500; padding:10px 16px;
  background:var(--char); color:#fff; border-radius:var(--r-pill); font-weight:700;
  transform:translateY(-160%); transition:transform .2s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; border:none; background:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4{ font-family:var(--font-head); font-weight:600; line-height:1.08; color:var(--green-900); margin:0; letter-spacing:-.02em; }
h1{ font-size:clamp(2.4rem,6vw,4.4rem); font-weight:700; }
h2{ font-size:clamp(1.8rem,3.6vw,2.8rem); }
h3{ font-size:1.18rem; }
p{ margin:0 0 var(--s3); }
.muted{ color:var(--muted); }

/* ---------- Layout helpers ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s4); }
.section{ padding-block:var(--s8); }
.section--tight{ padding-block:var(--s6); }
.eyebrow{
  font-family:var(--font-head); font-weight:600; font-size:.78rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--green-500); margin:0 0 var(--s2);
  display:inline-flex; align-items:center; gap:var(--s2);
}
.eyebrow::before{ content:""; width:22px; height:2px; background:var(--clay); border-radius:2px; }
.lead{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:var(--green-700); max-width:60ch; }
.center{ text-align:center; }
.center .lead{ margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--green-700); --fg:#fff;
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s2);
  background:var(--bg); color:var(--fg); font-family:var(--font-head); font-weight:600;
  font-size:.98rem; padding:14px 26px; border-radius:var(--r-pill);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), background .2s;
  box-shadow:var(--sh-1); white-space:nowrap; border:1.5px solid transparent;
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); }
.btn:active{ transform:translateY(0); }
.btn--lg{ padding:17px 34px; font-size:1.05rem; }
.btn--ghost{ background:transparent; color:var(--green-700); border-color:var(--green-500); box-shadow:none; }
.btn--ghost:hover{ background:var(--green-100); }
.btn--clay{ --bg:var(--clay); }
.btn--wa{ --bg:#1faf54; }
.btn--block{ width:100%; }
.btn--sm{ padding:10px 18px; font-size:.9rem; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

/* ---------- Header ---------- */
.header{
  position:sticky; top:0; z-index:60; height:var(--header-h);
  display:flex; align-items:center;
  background:color-mix(in srgb, var(--cream) 80%, transparent);
  backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .3s, background .3s, box-shadow .3s;
}
.header.is-stuck{ border-color:var(--line); box-shadow:0 6px 24px rgba(35,42,37,.06); }
.header .wrap{ display:flex; align-items:center; gap:var(--s4); width:100%; }
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-head); font-weight:700; font-size:1.18rem; color:var(--green-900); }
.brand img{ width:40px; height:40px; border-radius:50%; box-shadow:var(--sh-1); }
.brand small{ display:block; font-size:.6rem; letter-spacing:.18em; font-weight:600; color:var(--green-500); text-transform:uppercase; margin-top:1px; }
.nav{ display:flex; align-items:center; gap:var(--s1); margin-left:auto; }
.nav a{ font-family:var(--font-head); font-weight:500; font-size:.96rem; color:var(--green-900); padding:9px 14px; border-radius:var(--r-pill); transition:background .2s,color .2s; }
.nav a:hover,.nav a.active{ background:var(--green-100); color:var(--green-700); }
.header-actions{ display:flex; align-items:center; gap:var(--s2); }
.icon-btn{
  position:relative; width:44px; height:44px; border-radius:50%;
  display:grid; place-items:center; color:var(--green-900);
  transition:background .2s, transform .2s;
}
.icon-btn:hover{ background:var(--green-100); }
.icon-btn svg{ width:22px; height:22px; }
.cart-count{
  position:absolute; top:2px; right:0; min-width:19px; height:19px; padding:0 5px;
  background:var(--clay); color:#fff; font-size:.7rem; font-weight:700; font-family:var(--font-head);
  border-radius:var(--r-pill); display:grid; place-items:center; transform:scale(0); transition:transform .25s var(--ease);
}
.cart-count.show{ transform:scale(1); }
.burger{ display:none; }

/* ---------- Hero ---------- */
.hero{ position:relative; padding-block:var(--s8) var(--s7); overflow:hidden; }
.hero::before{ /* manchas botánicas */
  content:""; position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(60% 55% at 78% 18%, rgba(126,156,134,.30), transparent 60%),
    radial-gradient(50% 45% at 8% 85%, rgba(191,107,69,.12), transparent 60%);
}
.hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:var(--s6); align-items:center; }
.hero-copy h1 span{ color:var(--clay); }
.hero-copy .lead{ margin-block:var(--s4) var(--s5); }
.hero-indoor{ max-width:62ch; margin:calc(var(--s5) * -1 + 12px) 0 var(--s5); color:var(--green-700); font-size:.94rem; }
.hero-cta{ display:flex; flex-wrap:wrap; gap:var(--s3); }
.hero-trust{ display:flex; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s6); }
.hero-trust li{ display:flex; align-items:center; gap:8px; font-size:.9rem; font-weight:500; color:var(--green-700); }
.hero-trust svg{ width:18px; height:18px; color:var(--green-500); flex:none; }

/* Foto editorial: la marca vive en el local, no en un recurso decorativo. */
.hero-visual{ position:relative; min-height:560px; padding:22px 28px 34px 0; }
.hero-visual::before{
  content:""; position:absolute; inset:0 0 12% 12%; border-radius:42% 42% 28px 28px;
  background:var(--green-100); transform:rotate(2deg);
}
.hero-photo{
  position:relative; z-index:1; height:520px; border-radius:180px 180px var(--r-lg) var(--r-lg);
  overflow:hidden; border:8px solid rgba(255,255,255,.55); box-shadow:var(--sh-3);
}
.hero-photo img{ width:100%; height:100%; object-fit:cover; object-position:center 54%; }

/* Orbe que respira */
.breath{ position:relative; aspect-ratio:1; max-width:460px; margin-inline:auto; display:grid; place-items:center; }
.breath-orb{
  position:absolute; inset:0; margin:auto; width:88%; aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 38% 32%, #fff 0%, var(--green-300) 42%, var(--green-700) 100%);
  box-shadow:var(--sh-3), inset 0 0 60px rgba(255,255,255,.35);
  animation:breathe 9s var(--ease) infinite;
}
.breath-ring{ position:absolute; inset:0; margin:auto; border-radius:50%; border:1.5px solid var(--green-500); opacity:.5; }
.breath-ring.r1{ width:96%; aspect-ratio:1; animation:ripple 9s var(--ease) infinite; }
.breath-ring.r2{ width:96%; aspect-ratio:1; animation:ripple 9s var(--ease) infinite; animation-delay:1.4s; }
.breath img{ position:relative; z-index:2; width:54%; border-radius:50%; box-shadow:var(--sh-2); }
.breath-word{
  position:absolute; bottom:-6px; left:50%; transform:translateX(-50%);
  font-family:var(--font-head); font-weight:600; letter-spacing:.3em; text-transform:uppercase;
  font-size:.72rem; color:var(--green-700); background:var(--cream); padding:6px 16px; border-radius:var(--r-pill);
  box-shadow:var(--sh-1); z-index:3;
}
@keyframes breathe{ 0%,100%{ transform:scale(.86); filter:saturate(.92);} 45%{ transform:scale(1.04); filter:saturate(1.05);} }
@keyframes ripple{ 0%{ transform:scale(.86); opacity:.55;} 55%{ transform:scale(1.18); opacity:0;} 100%{opacity:0;} }
@media (prefers-reduced-motion:reduce){ .breath-orb,.breath-ring{ animation:none; } }

/* ---------- Marquee ---------- */
.marquee{ background:var(--green-900); color:var(--green-100); overflow:hidden; }
.marquee-track{ display:flex; gap:var(--s6); width:max-content; padding-block:14px; animation:slide 32s linear infinite; }
.marquee span{ font-family:var(--font-head); font-weight:600; font-size:.92rem; letter-spacing:.04em; display:flex; align-items:center; gap:var(--s3); white-space:nowrap; }
.marquee span::after{ content:"❋"; color:var(--green-500); }
@keyframes slide{ to{ transform:translateX(-50%); } }

/* El proceso de compra se entiende de un vistazo. */
.quick-flow{ background:var(--sand); border-bottom:1px solid var(--line); }
.quick-flow .wrap{ display:grid; grid-template-columns:repeat(3,1fr); }
.quick-flow .wrap > div{ display:flex; align-items:center; gap:var(--s3); padding:20px var(--s4); border-right:1px solid var(--line); }
.quick-flow .wrap > div:first-child{ border-left:1px solid var(--line); }
.quick-flow span{ font-family:var(--font-mono); color:var(--clay); font-size:.7rem; }
.quick-flow p{ margin:0; color:var(--green-700); font-size:.82rem; line-height:1.35; }
.quick-flow strong{ display:block; color:var(--green-900); font-family:var(--font-head); font-size:.94rem; }

/* ---------- Section heads ---------- */
.sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s6); flex-wrap:wrap; }
.sec-head .lead{ margin:8px 0 0; }
.link-arrow{ font-family:var(--font-head); font-weight:600; color:var(--green-700); display:inline-flex; align-items:center; gap:6px; }
.link-arrow svg{ width:18px; height:18px; transition:transform .25s var(--ease); }
.link-arrow:hover svg{ transform:translateX(4px); }

/* ---------- Category tiles ---------- */
.cat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s3); }
.cat-tile{
  position:relative; border-radius:var(--r-lg); padding:var(--s4); min-height:170px;
  display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--sh-1);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.cat-tile:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.cat-tile .ic{ position:absolute; top:var(--s4); right:var(--s4); width:46px; height:46px; color:var(--green-500); opacity:.9; }
.cat-tile h3{ font-size:1.25rem; }
.cat-tile .n{ font-size:.85rem; color:var(--muted); }
.cat-tile::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%, rgba(126,156,134,.10)); pointer-events:none; }
.cat-tile.feat{ background:linear-gradient(150deg,var(--green-700),var(--green-900)); color:#fff; border:none; }
.cat-tile.feat h3, .cat-tile.feat .n{ color:#fff; }
.cat-tile.feat .ic{ color:rgba(255,255,255,.8); }

/* ---------- Product grid & card ---------- */
.grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4); }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  content-visibility:auto; contain-intrinsic-size:380px;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); border-color:var(--green-300); }
.card-media{ position:relative; aspect-ratio:1; background:
   radial-gradient(circle at 50% 35%, #fff, var(--cream)); overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:contain; padding:14%; transition:transform .5s var(--ease); }
.card:hover .card-media img{ transform:scale(1.07); }
.badges{ position:absolute; top:10px; left:10px; display:flex; flex-direction:column; gap:6px; z-index:2; }
.tag{ font-family:var(--font-head); font-weight:700; font-size:.66rem; letter-spacing:.05em; text-transform:uppercase; padding:5px 10px; border-radius:var(--r-pill); }
.tag--new{ background:var(--clay); color:#fff; }
.tag--combo{ background:var(--amber); color:#3a2a12; }
.tag--out{ background:var(--sand-deep); color:var(--green-900); }
.card-body{ padding:var(--s3) var(--s3) var(--s4); display:flex; flex-direction:column; flex:1; gap:6px; }
.card-cat{ font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--green-500); }
.card-name{ font-family:var(--font-head); font-weight:600; font-size:.98rem; line-height:1.25; color:var(--green-900); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.5em; }
.stock-note{ font-family:var(--font-mono); font-size:.65rem; color:var(--clay); }
.card-foot{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:var(--s2); padding-top:var(--s2); }
.price{ font-family:var(--font-head); font-weight:700; font-size:1.22rem; color:var(--green-900); }
.price small{ font-size:.72rem; font-weight:500; color:var(--muted); display:block; margin-top:-2px; }

/* add / stepper */
.add{
  width:42px; height:42px; border-radius:50%; background:var(--green-700); color:#fff;
  display:grid; place-items:center; transition:transform .2s var(--ease), background .2s; flex:none;
}
.add:hover{ background:var(--green-900); transform:scale(1.06); }
.add svg{ width:20px; height:20px; }
.stepper{ display:inline-flex; align-items:center; gap:2px; background:var(--green-100); border-radius:var(--r-pill); padding:3px; }
.stepper button{ width:34px; height:34px; border-radius:50%; display:grid; place-items:center; color:var(--green-900); font-weight:700; transition:background .15s; }
.stepper button:hover{ background:var(--white); }
.stepper button:disabled{ opacity:.35; cursor:not-allowed; }
.stepper .q{ min-width:24px; text-align:center; font-family:var(--font-head); font-weight:700; }
.card .consult{ font-size:.82rem; font-weight:600; color:var(--clay); display:inline-flex; align-items:center; gap:5px; }

/* ---------- Catalog toolbar ---------- */
.catalog-head{ padding-block:var(--s6) var(--s4); background:linear-gradient(180deg,var(--green-100),transparent); }
.toolbar{ position:sticky; top:var(--header-h); z-index:40; background:color-mix(in srgb,var(--cream) 86%, transparent); backdrop-filter:blur(12px); padding-block:var(--s3); margin-bottom:var(--s5); border-bottom:1px solid var(--line); }
.toolbar-row{ display:flex; gap:var(--s3); align-items:center; flex-wrap:wrap; }
.search{ position:relative; flex:1; min-width:220px; }
.search svg{ position:absolute; left:16px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--muted); }
.search input{
  width:100%; padding:13px 16px 13px 46px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); font-family:inherit; font-size:.96rem; color:var(--text); transition:border-color .2s, box-shadow .2s;
}
.search input:focus{ outline:none; border-color:var(--green-500); box-shadow:0 0 0 4px var(--green-100); }
.select{ position:relative; }
.select select{
  appearance:none; padding:13px 42px 13px 18px; border:1.5px solid var(--line); border-radius:var(--r-pill);
  background:var(--surface); font-family:var(--font-head); font-weight:500; font-size:.92rem; color:var(--green-900); cursor:pointer;
}
.select::after{ content:"▾"; position:absolute; right:16px; top:50%; transform:translateY(-50%); color:var(--green-500); pointer-events:none; }
.chips{ display:flex; gap:var(--s2); flex-wrap:wrap; }
.chip{
  font-family:var(--font-head); font-weight:600; font-size:.88rem; padding:9px 16px; border-radius:var(--r-pill);
  background:var(--surface); border:1.5px solid var(--line); color:var(--green-900); transition:all .2s;
}
.chip:hover{ border-color:var(--green-500); }
.chip.active{ background:var(--green-700); border-color:var(--green-700); color:#fff; }
.chip .c{ opacity:.6; font-weight:500; margin-left:4px; }
.chip.active .c{ opacity:.8; }
.result-info{ font-size:.88rem; color:var(--muted); margin-bottom:var(--s4); }
.empty{ text-align:center; padding:var(--s8) var(--s3); color:var(--muted); }
.empty svg{ width:54px; height:54px; color:var(--green-300); margin-bottom:var(--s3); }

/* ---------- Combos / story strips ---------- */
.combo-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.combo{ background:linear-gradient(160deg,var(--white),var(--cream)); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-1); display:flex; flex-direction:column; transition:transform .3s var(--ease),box-shadow .3s; }
.combo:hover{ transform:translateY(-5px); box-shadow:var(--sh-2); }
.combo .card-media{ aspect-ratio:4/3; }

.split{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s6); align-items:center; }
.split .ph{ border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--sh-2); aspect-ratio:4/5; background:var(--green-100); }
.split .ph img{ width:100%; height:100%; object-fit:cover; filter:saturate(1.02) contrast(1.02); }
.split.story{ background:var(--green-900); color:#fff; border-radius:var(--r-xl); padding:var(--s7); }
.split.story h2,.split.story h3{ color:#fff; }
.split.story .lead{ color:var(--green-100); }
.feat-list{ display:grid; gap:var(--s3); margin-top:var(--s4); }
.feat-list li{ display:flex; gap:var(--s3); align-items:flex-start; }
.feat-list .ic{ width:42px; height:42px; border-radius:14px; background:var(--green-100); color:var(--green-700); display:grid; place-items:center; flex:none; }
.split.story .feat-list .ic{ background:rgba(255,255,255,.12); color:#fff; }
.feat-list svg{ width:22px; height:22px; }
.feat-list b{ font-family:var(--font-head); display:block; }

/* gallery of store */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; gap:var(--s3); }
.gallery img{ width:100%; height:100%; object-fit:cover; border-radius:var(--r-md); box-shadow:var(--sh-1); }
.gallery .tall{ grid-row:span 2; }

/* ---------- Drawer (cart) ---------- */
.overlay{ position:fixed; inset:0; background:rgba(35,42,37,.45); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .3s, visibility .3s; z-index:90; }
.overlay.open{ opacity:1; visibility:visible; }
.drawer{
  position:fixed; top:0; right:0; height:100dvh; width:min(440px,100%); background:var(--cream);
  z-index:100; display:flex; flex-direction:column; transform:translateX(100%);
  transition:transform .38s var(--ease); box-shadow:var(--sh-3);
}
.drawer.open{ transform:translateX(0); }
.drawer:focus{ outline:none; }
.drawer-head{ display:flex; align-items:center; justify-content:space-between; padding:var(--s4); border-bottom:1px solid var(--line); }
.drawer-head h3{ font-size:1.3rem; }
.drawer-body{ flex:1; overflow-y:auto; padding:var(--s4); }
.drawer-foot{ padding:var(--s4); border-top:1px solid var(--line); background:var(--white); }

.ship-bar{ background:var(--green-100); border-radius:var(--r-md); padding:var(--s3); margin-bottom:var(--s4); font-size:.85rem; }
.ship-bar b{ color:var(--green-700); }
.ship-track{ height:7px; background:var(--white); border-radius:var(--r-pill); margin-top:8px; overflow:hidden; }
.ship-fill{ height:100%; background:linear-gradient(90deg,var(--green-500),var(--green-700)); border-radius:var(--r-pill); width:0; transition:width .5s var(--ease); }
.ship-bar.done{ background:var(--clay-soft); }
.ship-bar.done b{ color:var(--clay); }

.line-item{ display:flex; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); }
.line-item img{ width:66px; height:66px; object-fit:contain; background:var(--white); border-radius:var(--r-sm); border:1px solid var(--line); padding:6px; flex:none; }
.li-main{ flex:1; min-width:0; }
.li-name{ font-family:var(--font-head); font-weight:600; font-size:.9rem; line-height:1.25; }
.li-price{ color:var(--muted); font-size:.84rem; }
.li-bottom{ display:flex; align-items:center; justify-content:space-between; margin-top:8px; }
.li-remove{ color:var(--gray-300); width:30px; height:30px; display:grid; place-items:center; border-radius:50%; transition:color .2s,background .2s; }
.li-remove:hover{ color:var(--clay); background:var(--clay-soft); }
.li-remove svg{ width:17px; height:17px; }

.cart-empty{ text-align:center; padding:var(--s7) var(--s3); color:var(--muted); }
.cart-empty svg{ width:60px; height:60px; color:var(--green-300); margin-bottom:var(--s3); }

.totals{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:var(--s3); }
.totals .t{ font-family:var(--font-head); font-weight:700; font-size:1.5rem; color:var(--green-900); }
.totals .l{ color:var(--muted); }
.delivery{ display:flex; gap:var(--s2); margin-bottom:var(--s3); }
.delivery label{ flex:1; }
.delivery input{ position:absolute; opacity:0; }
.delivery span{ display:block; text-align:center; padding:11px; border:1.5px solid var(--line); border-radius:var(--r-md); font-family:var(--font-head); font-weight:600; font-size:.88rem; cursor:pointer; transition:all .2s; background:var(--cream); }
.delivery input:checked + span{ border-color:var(--green-700); background:var(--green-100); color:var(--green-700); }
.checkout-note{ font-size:.76rem; color:var(--muted); text-align:center; margin-top:var(--s3); }

/* cross-sell */
.xsell{ margin-top:var(--s4); }
.xsell h4{ font-family:var(--font-head); font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; color:var(--green-500); margin-bottom:var(--s2); }
.xsell-item{ display:flex; align-items:center; gap:var(--s2); padding:8px; border:1px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; background:var(--white); }
.xsell-item img{ width:40px; height:40px; object-fit:contain; }
.xsell-item .xn{ flex:1; font-size:.82rem; font-weight:500; min-width:0; }
.xsell-item .xp{ font-family:var(--font-head); font-weight:700; font-size:.85rem; }
.xsell-item button.xadd{ width:30px;height:30px;border-radius:50%;background:var(--green-100);color:var(--green-700);display:grid;place-items:center;flex:none; }

/* ---------- Mobile cart bar ---------- */
.mcart{ position:fixed; left:var(--s3); right:var(--s3); bottom:var(--s3); z-index:55; display:none;
  align-items:center; justify-content:space-between; gap:var(--s3);
  background:var(--green-900); color:#fff; padding:12px 14px 12px 20px; border-radius:var(--r-pill); box-shadow:var(--sh-3);
  transform:translateY(140%); transition:transform .35s var(--ease); }
.mcart.show{ transform:translateY(0); }
.mcart .mc-l{ font-family:var(--font-head); font-weight:600; }
.mcart .mc-l small{ display:block; opacity:.7; font-size:.72rem; font-weight:500; }
.mcart .btn{ box-shadow:none; }

/* ---------- Age gate ---------- */
.gate{ position:fixed; inset:0; z-index:200; display:grid; place-items:center; padding:var(--s4);
  background:linear-gradient(160deg,var(--green-900),#1a241d); }
.gate-card{ max-width:420px; text-align:center; background:var(--cream); border-radius:var(--r-xl); padding:var(--s7) var(--s5); box-shadow:var(--sh-3); }
.gate-card img{ width:84px; height:84px; border-radius:50%; margin:0 auto var(--s4); box-shadow:var(--sh-1); }
.gate-card h2{ margin-bottom:var(--s2); }
.gate-card .btn{ margin-top:var(--s4); }
.gate-exit{ display:block; margin-top:var(--s3); color:var(--muted); font-size:.85rem; }

/* ---------- Toast ---------- */
.toast-wrap{ position:fixed; bottom:var(--s4); left:50%; transform:translateX(-50%); z-index:150; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none; }
.toast{ background:var(--green-900); color:#fff; padding:12px 20px; border-radius:var(--r-pill); font-family:var(--font-head); font-weight:600; font-size:.9rem; box-shadow:var(--sh-2); display:flex; align-items:center; gap:10px;
  opacity:0; transform:translateY(16px); transition:opacity .3s, transform .3s; }
.toast.show{ opacity:1; transform:translateY(0); }
.toast svg{ width:18px; height:18px; color:var(--green-300); }

/* ---------- Footer ---------- */
.footer{ background:var(--green-900); color:var(--green-100); padding-block:var(--s7) var(--s5); margin-top:var(--s6); }
.footer-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:var(--s5); }
.footer h4{ color:#fff; font-size:1rem; margin-bottom:var(--s3); }
.footer a{ color:var(--green-100); opacity:.85; display:inline-block; padding:4px 0; transition:opacity .2s, color .2s; }
.footer a:hover{ opacity:1; color:#fff; }
.footer .brand{ color:#fff; margin-bottom:var(--s3); }
.footer .brand small{ color:var(--green-300); }
.footer p{ font-size:.9rem; opacity:.8; }
.foot-bottom{ border-top:1px solid rgba(255,255,255,.12); margin-top:var(--s6); padding-top:var(--s4); display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap; font-size:.82rem; opacity:.7; }
.soc{ display:flex; gap:var(--s2); }
.soc a{ width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.08); display:grid; place-items:center; }
.soc a:hover{ background:var(--clay); }
.soc svg{ width:20px; height:20px; }

/* ---------- Wave divider ---------- */
.wave{ display:block; width:100%; height:40px; }
.wave path{ fill:var(--green-900); }

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .cat-grid{ grid-template-columns:repeat(2,1fr); }
  .grid{ grid-template-columns:repeat(3,1fr); }
  .combo-grid{ grid-template-columns:1fr; }
  .footer-grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:860px){
  .nav{ position:fixed; inset:var(--header-h) 0 auto 0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--cream); padding:var(--s3); box-shadow:var(--sh-2); border-bottom:1px solid var(--line);
    transform:translateY(-120%); transition:transform .35s var(--ease); margin-left:0; }
  .nav.open{ transform:translateY(0); }
  .nav a{ padding:14px; border-radius:var(--r-md); }
  .burger{ display:grid; }
  .hero .wrap{ grid-template-columns:1fr; }
  .hero-visual{ grid-row:1; min-height:430px; max-width:520px; width:100%; margin-inline:auto; padding-right:22px; }
  .hero-photo{ height:410px; border-radius:140px 140px var(--r-lg) var(--r-lg); }
  .split, .split.story{ grid-template-columns:1fr; }
  .split.story{ padding:var(--s5); }
  .mcart{ display:flex; }
  .header-actions .desktop-only{ display:none; }
}
@media (max-width:560px){
  .grid{ grid-template-columns:repeat(2,1fr); gap:var(--s3); }
  .cat-grid{ grid-template-columns:1fr 1fr; }
  .section{ padding-block:var(--s7); }
  .card-media img{ padding:10%; }
  .footer-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr 1fr; grid-auto-rows:130px; }
  h1{ font-size:2.3rem; }
  .hero{ padding-block:var(--s5) var(--s7); }
  .hero .wrap{ gap:var(--s5); }
  .hero-visual{ min-height:345px; padding-right:14px; }
  .hero-photo{ height:330px; border-width:5px; border-radius:110px 110px var(--r-md) var(--r-md); }
  .hero-trust{ gap:var(--s3); margin-top:var(--s5); }
  .chips{ flex-wrap:nowrap; overflow-x:auto; padding:2px 2px 8px; margin-inline:-2px; scrollbar-width:none; }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:none; }
  .toolbar{ margin-bottom:var(--s4); }
  .quick-flow .wrap{ grid-template-columns:1fr; }
  .quick-flow .wrap > div,.quick-flow .wrap > div:first-child{ border-left:none; border-right:none; border-bottom:1px solid var(--line); padding:14px 4px; }
  .quick-flow .wrap > div:last-child{ border-bottom:none; }
}

/* =========================================================================
   URBAN LAYER — más calle, sin perder el botánico premium
   ========================================================================= */

/* Etiquetas técnicas en monospace (vibe utilitario/street) */
.eyebrow{ font-family:var(--font-mono); font-weight:400; font-size:.72rem; letter-spacing:.14em; color:var(--green-700); }
.eyebrow::before{ background:var(--clay); }
.card-cat{ font-family:var(--font-mono); font-weight:400; letter-spacing:.06em; color:var(--green-700); }
.result-info,.chip .c{ font-family:var(--font-mono); }
.price small{ font-family:var(--font-mono); }

/* Badges tipo sticker */
.tag{ font-family:var(--font-mono); font-weight:700; font-size:.62rem; letter-spacing:.02em; border-radius:6px; box-shadow:var(--sh-1); }
.tag--new{ transform:rotate(-3deg); }

/* Grano de textura */
.grain{ position:relative; }
.grain::after,.hero::after,.split.story::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:1; opacity:.42; mix-blend-mode:overlay;
  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='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.split.story{ overflow:hidden; }
.split.story > *{ position:relative; z-index:2; }

/* Marquee carbón, más contundente */
.marquee{ background:var(--char); color:#fff; border-block:2px solid var(--green-700); }
.marquee span{ font-family:var(--font-head); font-weight:700; text-transform:uppercase; letter-spacing:.03em; font-size:.95rem; }
.marquee span::after{ content:"/"; color:var(--clay); font-weight:700; }

/* Orbe que respira, con borde carbón + anillo punteado girando */
.breath-orb{ background:radial-gradient(circle at 36% 30%, #fff 0%, var(--green-300) 38%, var(--green-700) 74%, var(--char) 100%); }
.breath-ring.dash{ width:100%; aspect-ratio:1; border:1.5px dashed var(--green-700); opacity:.35; animation:spin 50s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.breath-word{ font-family:var(--font-mono); font-weight:700; letter-spacing:.2em; }
@media (prefers-reduced-motion:reduce){ .breath-ring.dash{ animation:none; } }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; }
}

/* Botón carbón + variante cuadrada */
.btn--dark{ --bg:var(--char); }
.btn--sq{ border-radius:12px; }

/* Panel CTA oscuro (ancla urbana al final) */
.cta-dark{ background:var(--char); color:#fff; border-radius:var(--r-xl); padding:var(--s8) var(--s5); overflow:hidden; }
.cta-dark h2{ color:#fff; }
.cta-dark .lead{ color:var(--green-100); margin-inline:auto; }
.cta-dark .eyebrow{ color:var(--green-300); }

/* Títulos un poco más tensos */
h1,h2{ letter-spacing:-.03em; }

/* =========================================================================
   REPROCANN — landing privada, serena y enfocada
   ========================================================================= */
.repro-page{ background:var(--cream); }
.repro-header{ padding-block:20px; border-bottom:1px solid var(--line); }
.repro-header .wrap,.repro-footer .wrap{ display:flex; align-items:center; justify-content:space-between; gap:var(--s4); }
.repro-back{ font-family:var(--font-head); font-weight:600; color:var(--green-700); }
.repro-hero{ position:relative; overflow:hidden; padding-block:clamp(70px,10vw,140px); }
.repro-hero::before{
  content:""; position:absolute; width:560px; height:560px; right:-180px; top:-210px;
  border-radius:50%; background:var(--green-100); opacity:.8;
}
.repro-grid{ position:relative; display:grid; grid-template-columns:1.2fr .8fr; gap:var(--s7); align-items:end; }
.repro-copy h1{ font-size:clamp(2.7rem,6.8vw,5.7rem); max-width:850px; }
.repro-copy h1 span{ color:var(--clay); }
.repro-copy .lead{ margin-block:var(--s4) var(--s5); max-width:650px; }
.repro-price{
  position:relative; padding:var(--s5); border-radius:var(--r-lg); background:var(--char); color:#fff;
  box-shadow:var(--sh-3); transform:rotate(1.5deg);
}
.repro-price::before{ content:""; position:absolute; inset:9px; border:1px solid rgba(255,255,255,.14); border-radius:calc(var(--r-lg) - 8px); pointer-events:none; }
.repro-kicker{ display:block; font-family:var(--font-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-300); }
.repro-price strong{ display:block; font-family:var(--font-head); font-size:clamp(2rem,4vw,3.2rem); line-height:1; margin-block:12px 16px; color:#fff; }
.repro-price p{ position:relative; margin:0; color:var(--green-100); font-size:.9rem; }
.repro-steps{ background:var(--green-100); }
.repro-step-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4); }
.repro-step-grid article{ padding:var(--s5); background:rgba(255,255,255,.68); border:1px solid rgba(79,103,85,.15); border-radius:var(--r-lg); }
.repro-step-grid article > span{ font-family:var(--font-mono); color:var(--clay); font-size:.76rem; letter-spacing:.1em; }
.repro-step-grid h3{ margin-block:var(--s5) 10px; font-size:1.35rem; }
.repro-step-grid p{ color:var(--green-700); margin:0; }
.repro-calm{ display:grid; grid-template-columns:.85fr 1.15fr; gap:var(--s7); padding:var(--s6); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.repro-calm p{ color:var(--green-700); }
.repro-final{ background:var(--sand); }
.repro-final .lead{ margin:var(--s3) auto var(--s5); }
.repro-footer{ padding-block:var(--s4); background:var(--green-900); color:var(--green-100); font-size:.85rem; }
.repro-footer a{ color:#fff; font-weight:600; }

@media (max-width:860px){
  .repro-grid,.repro-calm{ grid-template-columns:1fr; }
  .repro-grid{ gap:var(--s5); }
  .repro-price{ max-width:480px; }
  .repro-step-grid{ grid-template-columns:1fr; }
  .repro-calm{ gap:var(--s4); padding-inline:0; }
}
@media (max-width:560px){
  .repro-header .brand small{ display:none; }
  .repro-back{ font-size:.88rem; }
  .repro-hero{ padding-block:var(--s7); }
  .repro-copy h1{ font-size:2.55rem; }
  .repro-price{ transform:none; }
  .repro-step-grid article{ padding:var(--s4); }
  .repro-footer .wrap{ align-items:flex-start; flex-direction:column; gap:var(--s2); }
}