/* ===================================================================
   Café Arú — sistema visual
   Paleta tomada del empaque real: negro café, rojo cinta, kraft, crema
=================================================================== */

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

:root{
  --c-black: #17110c;
  --c-black-soft: #241a12;
  --c-red: #b32027;
  --c-red-dark: #841319;
  --c-kraft: #c9a467;
  --c-kraft-dark: #a9824c;
  --c-kraft-light: #e7d5ac;
  --c-cream: #f8f2e4;
  --c-cream-2: #f1e6cd;
  --c-white: #fffdf9;
  --c-text: #241b12;
  --c-text-soft: #5a4c3c;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;

  --max: 1180px;
  --pad: clamp(1.25rem, 4vw, 3rem);

  --ease: cubic-bezier(.16,.84,.44,1);
  --ease-soft: cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; overflow-x:hidden; }
body{
  margin:0;
  font-family:var(--font-body);
  background:var(--c-cream);
  color:var(--c-text);
  -webkit-font-smoothing:antialiased;
  /* clip (no hidden): con html también en hidden, hidden aquí convierte al
     body en contenedor de scroll y rompe position:sticky (galería de producto). */
  overflow-x:hidden;
  overflow-x:clip;
  width:100%;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ font-family:var(--font-display); margin:0; font-weight:600; line-height:1.05; letter-spacing:-.01em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }

.container{ max-width:var(--max); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }

section{ position:relative; }

/* ---------- utility type ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font-body); font-weight:600; font-size:.72rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--c-red);
}
.eyebrow::before{
  content:''; width:1.5em; height:1px; background:var(--c-red);
}
.lead{ font-size:clamp(1rem,1.4vw,1.15rem); color:var(--c-text-soft); line-height:1.7; }

/* ---------- buttons ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6em;
  padding:1em 2em; border-radius:100px; font-weight:600; font-size:.92rem;
  border:1px solid transparent; overflow:hidden; isolation:isolate;
  transition:color .45s var(--ease), border-color .45s var(--ease), transform .3s var(--ease);
  white-space:nowrap;
}
.btn::before{
  content:''; position:absolute; inset:0; z-index:-1;
  transform:translateY(101%); transition:transform .45s var(--ease);
}
.btn:hover::before{ transform:translateY(0); }
.btn:active{ transform:scale(.97); }

.btn-primary{ background:var(--c-red); color:var(--c-white); }
.btn-primary::before{ background:var(--c-black); }

.btn-dark{ background:var(--c-black); color:var(--c-cream); }
.btn-dark::before{ background:var(--c-red); }

.btn-ghost{ background:transparent; color:var(--c-black); border-color:currentColor; }
.btn-ghost::before{ background:var(--c-black); }
.btn-ghost:hover{ color:var(--c-cream); }

.btn-ghost-light{ background:transparent; color:var(--c-cream); border-color:rgba(248,242,228,.5); }
.btn-ghost-light::before{ background:var(--c-cream); }
.btn-ghost-light:hover{ color:var(--c-black); }

.btn svg{ width:1.1em; height:1.1em; flex:none; transition:transform .4s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }

.btn-sm{ padding:.8em 1.5em; font-size:.82rem; }

/* ===================================================================
   Header
=================================================================== */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:1.3rem 0;
  transition:padding .4s var(--ease), background .4s var(--ease), box-shadow .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.site-header.is-scrolled{
  padding:.7rem 0;
  background:rgba(248,242,228,.86);
  backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 1px 0 rgba(23,17,12,.08);
}
.brand{ position:relative; height:60px; aspect-ratio:800/670; transition:height .4s var(--ease); }
.brand img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:contain;
  transition:opacity .4s var(--ease);
}
.brand .logo-dark{ opacity:0; }
.brand .logo-light{ opacity:1; }
.site-header.is-scrolled .brand{ height:48px; }
.site-header.is-scrolled .brand .logo-dark{ opacity:1; }
.site-header.is-scrolled .brand .logo-light{ opacity:0; }

.main-nav{ display:flex; align-items:center; gap:2.4rem; }
.main-nav a{
  position:relative; font-size:.9rem; font-weight:500; color:var(--c-cream);
  padding:.3em 0; transition:color .4s var(--ease);
}
.site-header.is-scrolled .main-nav a{ color:var(--c-text); }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:-2px; width:100%; height:1.5px;
  background:var(--c-red); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease);
}
.main-nav a:hover::after,
.main-nav a.active::after{ transform:scaleX(1); transform-origin:left; }
.main-nav a.active{ color:var(--c-red); }

.header-actions{ display:flex; align-items:center; gap:1rem; }

.cart-link{
  position:relative; display:inline-flex; color:var(--c-cream);
  transition:color .4s var(--ease);
}
.site-header.is-scrolled .cart-link{ color:var(--c-text); }
.cart-link svg{ width:22px; height:22px; }
.cart-badge{
  position:absolute; top:-6px; right:-9px; background:var(--c-red); color:var(--c-white);
  font-size:.65rem; font-weight:700; line-height:1; min-width:17px; height:17px; padding:0 3px;
  border-radius:100px; display:flex; align-items:center; justify-content:center;
}

.burger{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:42px; height:42px; border:none; background:transparent; z-index:200;
}
.burger span{ height:2px; width:22px; background:var(--c-cream); margin:0 auto; transition:transform .35s var(--ease), opacity .35s var(--ease), background .4s var(--ease); }
.site-header.is-scrolled .burger span{ background:var(--c-black); }
.burger.is-open span{ background:var(--c-cream) !important; }
.burger.is-open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger.is-open span:nth-child(2){ opacity:0; }
.burger.is-open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

.mobile-nav{
  position:fixed; inset:0; z-index:150; background:var(--c-black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.6rem;
  clip-path:circle(0% at calc(100% - 2.6rem) 2.6rem);
  transition:clip-path .6s var(--ease);
  pointer-events:none;
}
.mobile-nav.is-open{ clip-path:circle(150% at calc(100% - 2.6rem) 2.6rem); pointer-events:auto; }
.mobile-nav a{
  font-family:var(--font-display); font-size:2.1rem; color:var(--c-cream);
  opacity:0; transform:translateY(18px); transition:opacity .5s var(--ease), transform .5s var(--ease);
}
.mobile-nav.is-open a{ opacity:1; transform:translateY(0); }
.mobile-nav a:nth-child(1){ transition-delay:.1s; }
.mobile-nav a:nth-child(2){ transition-delay:.17s; }
.mobile-nav a:nth-child(3){ transition-delay:.24s; }
.mobile-nav a:nth-child(4){ transition-delay:.31s; }
.mobile-nav a:nth-child(5){ transition-delay:.38s; }

@media (max-width:860px){
  .main-nav{ display:none; }
  .header-actions .btn-sm{ display:none; }
  .burger{ display:flex; }
}

/* ===================================================================
   Reveal / scroll animations
=================================================================== */
[data-reveal]{
  opacity:0; transform:translateY(28px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
[data-reveal].is-visible{ opacity:1; transform:translateY(0); }
[data-reveal="scale"]{ transform:translateY(0) scale(.92); }
[data-reveal="scale"].is-visible{ transform:scale(1); }
[data-reveal="left"]{ transform:translateX(-40px); }
[data-reveal="left"].is-visible{ transform:translateX(0); }
[data-reveal="right"]{ transform:translateX(40px); }
[data-reveal="right"].is-visible{ transform:translateX(0); }

/* stagger for [data-reveal-group] children is applied via inline style in js/main.js,
   not transition-delay, so it doesn't linger and delay hover transitions afterwards */

.split-lines .line{ overflow:hidden; display:block; }
.split-lines .line > span{
  display:block; transform:translateY(110%); transition:transform 1s var(--ease);
}
.split-lines.is-visible .line > span{ transform:translateY(0); }

/* ===================================================================
   Hero
=================================================================== */
.hero{
  min-height:100vh; display:flex; align-items:center;
  padding-top:7rem; padding-bottom:4rem;
  background:
    radial-gradient(ellipse 60% 50% at 85% 15%, rgba(179,32,39,.18), transparent 60%),
    linear-gradient(180deg, var(--c-black) 0%, var(--c-black-soft) 100%);
  color:var(--c-cream);
  overflow:hidden;
}
.hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:3rem; align-items:center; position:relative; z-index:2; }
.hero-tag{ color:var(--c-kraft-light); }
.hero-tag::before{ background:var(--c-kraft-light); }
.hero h1{
  font-size:clamp(2.6rem, 5.4vw, 4.6rem); color:var(--c-white); margin-top:1rem;
}
.hero h1 em{ color:var(--c-red); font-style:normal; }
.hero .lead{ color:rgba(248,242,228,.72); max-width:34em; margin-top:1.4rem; }
.hero-actions{ display:flex; gap:1rem; margin-top:2.4rem; flex-wrap:wrap; }

.hero-stats{ display:flex; flex-wrap:wrap; gap:1.6rem 2.4rem; margin-top:3.2rem; }
.hero-stats div{ display:flex; flex-direction:column; gap:.2rem; }
.hero-stats strong{ font-family:var(--font-display); font-size:1.9rem; color:var(--c-white); }
.hero-stats div > span{ font-size:.78rem; color:rgba(248,242,228,.55); text-transform:uppercase; letter-spacing:.08em; }

.hero-visual{ position:relative; display:flex; align-items:center; justify-content:center; height:100%; }
.hero-visual .ring{
  position:absolute; width:120%; padding-top:120%; border-radius:50%;
  border:1px dashed rgba(248,242,228,.18);
  animation:spin 60s linear infinite;
}
.hero-visual .ring.r2{ width:88%; padding-top:88%; border-color:rgba(201,164,103,.28); animation-duration:44s; animation-direction:reverse; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes float{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-18px);} }

/* ---------- rotating 3D product ---------- */
.product-3d-viewer{
  position:relative; z-index:2; width:100%; height:100%; max-width:520px; max-height:520px; aspect-ratio:1/1;
  animation:float 6s ease-in-out infinite;
  --poster-color: transparent;
  background:transparent;
}
@media (max-width:860px){ .product-3d-viewer{ max-width:300px; max-height:300px; } }
@media (max-width:900px){
  .hero{ min-height:auto; padding-top:8rem; padding-bottom:3rem; }
  .hero .container{ grid-template-columns:1fr; gap:2.5rem; }
  .hero-visual{ min-height:340px; }
}
@media (max-width:600px){
  .hero-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem .8rem; margin-top:2.4rem; }
  .hero-stats strong{ font-size:1.4rem; }
  .hero-stats div > span{ font-size:.62rem; letter-spacing:.02em; }
}

.scroll-cue{
  position:absolute; left:50%; bottom:2.2rem; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
  color:rgba(248,242,228,.55); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  z-index:2;
}
.scroll-cue .line{ width:1px; height:34px; background:linear-gradient(rgba(248,242,228,.7), transparent); overflow:hidden; position:relative; }
.scroll-cue .line::after{
  content:''; position:absolute; top:-34px; left:0; width:100%; height:34px; background:var(--c-red);
  animation:scrollLine 2.2s ease-in-out infinite;
}
@keyframes scrollLine{ 0%{ top:-34px; } 60%,100%{ top:34px; } }

/* ===================================================================
   Marquee
=================================================================== */
.marquee{
  background:var(--c-red); color:var(--c-cream); padding:.85rem 0;
  overflow:hidden; white-space:nowrap; position:relative;
}
.marquee .track{ display:inline-flex; animation:marquee 26s linear infinite; }
.marquee:hover .track{ animation-play-state:paused; }
.marquee span{
  display:inline-flex; align-items:center; gap:.9rem;
  font-family:var(--font-display); font-size:1.05rem; font-weight:500;
  padding:0 1.6rem; text-transform:uppercase; letter-spacing:.04em;
}
.marquee span::after{ content:'☕'; font-size:.85rem; opacity:.8; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ===================================================================
   Section basics
=================================================================== */
.section{ padding:clamp(4rem,9vw,8rem) 0; }
.section-dark{ background:var(--c-black); color:var(--c-cream); }
.section-kraft{ background:var(--c-kraft-light); }
.section-head{ max-width:640px; margin-bottom:3.2rem; }
.section-head h2{ font-size:clamp(2rem,3.6vw,3rem); margin-top:.9rem; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

/* ---------- proceso ---------- */
.process-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; counter-reset:step; }
.process-card{
  position:relative; background:var(--c-white); border-radius:20px; padding:2.2rem 1.6rem;
  border:1px solid rgba(36,27,18,.08);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.process-card:hover{ transform:translateY(-10px); box-shadow:0 30px 50px -20px rgba(23,17,12,.25); border-color:transparent; }
.process-card .num{
  font-family:var(--font-display); font-size:2.6rem; color:var(--c-kraft-dark);
  opacity:.5; margin-bottom:1rem;
}
.process-card h3{ font-size:1.15rem; margin-bottom:.6rem; }
.process-card p{ color:var(--c-text-soft); font-size:.92rem; line-height:1.6; }

@media (max-width:980px){ .process-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .process-grid{ grid-template-columns:1fr; } }

/* ---------- story split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; }
.split.reverse{ direction:rtl; }
.split.reverse > *{ direction:ltr; }
.split-media{ position:relative; border-radius:24px; overflow:hidden; aspect-ratio:4/5; }
.split-media img{ width:100%; height:100%; object-fit:cover; transition:transform 1.2s var(--ease); }
.split-media:hover img{ transform:scale(1.06); }
.split-media .tag{
  position:absolute; left:1.4rem; bottom:1.4rem; background:rgba(23,17,12,.75); backdrop-filter:blur(6px);
  color:var(--c-cream); padding:.6em 1.1em; border-radius:100px; font-size:.78rem; letter-spacing:.04em;
}
.split-body p + p{ margin-top:1rem; }
.split-body .lead{ margin-top:1.2rem; }
.quote{
  font-family:var(--font-display); font-style:italic; font-size:1.3rem; line-height:1.5;
  margin:1.6rem 0; padding-left:1.4rem; border-left:3px solid var(--c-red); color:var(--c-black);
}

@media (max-width:900px){
  .split, .split.reverse{ grid-template-columns:1fr; direction:ltr; }
}

/* ---------- values ---------- */
.value-band{ display:flex; flex-wrap:wrap; gap:.9rem; }
.value-pill{
  display:flex; align-items:center; gap:.6rem; padding:.9em 1.5em; border-radius:100px;
  background:var(--c-white); border:1px solid rgba(36,27,18,.1); font-weight:600; font-size:.9rem;
  transition:transform .4s var(--ease), background .4s var(--ease), color .4s var(--ease);
}
.value-pill:hover{ background:var(--c-black); color:var(--c-cream); transform:translateY(-4px); }
.value-pill .dot{ width:8px; height:8px; border-radius:50%; background:var(--c-red); flex:none; }

/* ---------- product teaser ---------- */
.product-teaser{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:3rem; align-items:center;
  background:var(--c-black); border-radius:32px; padding:clamp(2rem,5vw,4.5rem); color:var(--c-cream);
  position:relative; overflow:hidden;
}
.product-teaser::before{
  content:''; position:absolute; width:480px; height:480px; border-radius:50%;
  background:radial-gradient(circle, rgba(179,32,39,.35), transparent 70%);
  top:-140px; right:-140px; pointer-events:none;
}
.product-teaser-media{ position:relative; display:flex; justify-content:center; }
.product-teaser-media img{ max-width:88%; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5)); transition:transform .6s var(--ease); }
.product-teaser-media:hover img{ transform:translateY(-10px) rotate(-2deg); }
.price-badge{
  position:absolute; top:6%; right:6%; background:var(--c-red); color:var(--c-white);
  border-radius:50%; width:92px; height:92px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:var(--font-display); line-height:1.05; text-align:center; box-shadow:0 12px 24px rgba(179,32,39,.4);
  animation:pulse 3.2s ease-in-out infinite;
}
.price-badge small{ font-family:var(--font-body); font-size:.55rem; letter-spacing:.06em; text-transform:uppercase; opacity:.85; }
.price-badge strong{ font-size:1.05rem; }
@keyframes pulse{ 0%,100%{ transform:scale(1);} 50%{ transform:scale(1.06);} }

.product-teaser-body .lead{ color:rgba(248,242,228,.7); margin-top:1rem; }
.feature-list{ display:flex; flex-direction:column; gap:.8rem; margin:1.8rem 0 2.2rem; }
.feature-list li{ display:flex; align-items:center; gap:.7rem; font-size:.94rem; }
.feature-list svg{ width:1.2em; height:1.2em; color:var(--c-red); flex:none; }

@media (max-width:900px){ .product-teaser{ grid-template-columns:1fr; } .product-teaser-media img{ max-width:60%; } }

/* ---------- gallery grid (teaser + full) ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:190px; gap:1rem;
}
.gallery-grid figure{
  position:relative; margin:0; border-radius:18px; overflow:hidden; cursor:pointer;
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gallery-grid figure:hover img{ transform:scale(1.1); }
.gallery-grid figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.2rem;
  background:linear-gradient(0deg, rgba(23,17,12,.85), transparent);
  color:var(--c-cream); font-size:.82rem; font-weight:500;
  transform:translateY(20px); opacity:0; transition:transform .4s var(--ease), opacity .4s var(--ease);
}
.gallery-grid figure:hover figcaption{ transform:translateY(0); opacity:1; }
.gallery-grid figure.big{ grid-column:span 2; grid-row:span 2; }

@media (max-width:900px){
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:170px; }
  .gallery-grid figure.big{ grid-column:span 2; grid-row:span 1; }
}

/* ---------- catálogo de productos (tienda.html) ---------- */
.product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.8rem; }
@media (max-width:1100px){ .product-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:760px){ .product-grid{ grid-template-columns:repeat(2,1fr); gap:1.2rem; } }
@media (max-width:480px){ .product-grid{ grid-template-columns:1fr; } }

.product-card{
  position:relative; display:flex; flex-direction:column; background:var(--c-white);
  border-radius:24px; overflow:hidden; border:1px solid rgba(36,27,18,.08);
  box-shadow:0 1px 0 rgba(23,17,12,.03);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease);
}
.product-card:hover{
  transform:translateY(-10px) rotate(-.4deg);
  box-shadow:0 34px 60px -20px rgba(23,17,12,.3);
  border-color:transparent;
}

.product-card-link{ display:block; color:inherit; }

.product-card-media{
  position:relative; aspect-ratio:4/5; overflow:hidden;
  background:linear-gradient(160deg, var(--c-kraft-light), var(--c-cream-2));
}
.product-card-media img{
  width:100%; height:100%; object-fit:cover;
  transition:transform .7s var(--ease), filter .5s var(--ease);
}
.product-card:hover .product-card-media img{ transform:scale(1.1) rotate(1deg); }
.product-card-media::after{
  content:''; position:absolute; inset:auto 0 0 0; height:45%; pointer-events:none;
  background:linear-gradient(0deg, rgba(23,17,12,.42), transparent);
}

.product-card-eyebrow{
  position:absolute; top:1rem; left:1rem; z-index:2; background:var(--c-red); color:var(--c-white);
  font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
  padding:.4em .8em; border-radius:100px; box-shadow:0 8px 18px rgba(179,32,39,.35);
}

.product-card-ribbon{
  position:absolute; z-index:3; top:1.1rem; left:-2.6rem; width:11rem; text-align:center;
  background:var(--c-black); color:var(--c-cream); font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; padding:.4em 0; transform:rotate(-40deg); box-shadow:0 6px 14px rgba(0,0,0,.3);
}

.product-card-name{
  position:absolute; inset:auto 0 0 0; z-index:2; padding:1rem 1.1rem .9rem;
  color:var(--c-white); font-size:1.05rem; line-height:1.25;
}

.product-card-body{ padding:.95rem 1.2rem 1.3rem; display:flex; flex-direction:column; gap:.7rem; flex:1; }

.product-card-tags{ display:flex; flex-wrap:wrap; gap:.4rem; }
.product-card-tags span{
  font-size:.68rem; font-weight:600; color:var(--c-kraft-dark); background:var(--c-kraft-light);
  padding:.3em .65em; border-radius:100px;
}

.product-card-footer{ margin-top:auto; }
.product-card-price-row{ display:flex; align-items:baseline; gap:.55rem; flex-wrap:wrap; }
.product-card-price-text{ font-family:var(--font-display); font-size:1.3rem; color:var(--c-red); }
.product-card-price-text small{ font-family:var(--font-body); font-size:.7rem; font-weight:600; color:var(--c-text-soft); margin-left:.3em; }
.price-compare{ font-size:.85rem; color:var(--c-text-soft); text-decoration:line-through; text-decoration-color:rgba(36,27,18,.4); }
.product-card-stock{ display:block; font-size:.72rem; color:var(--c-text-soft); margin-top:.15rem; }

.product-card-actions{ display:flex; flex-direction:column; gap:.5rem; margin:0 1.2rem 1.2rem; }
.product-card-actions .btn{
  width:100%; display:inline-flex; align-items:center; justify-content:center; gap:.5em;
}

.product-card.is-sold-out .product-card-media img{ filter:grayscale(.6) brightness(.85); }

/* ---------- carrito (carrito.html) ---------- */
.cart-layout{ display:grid; grid-template-columns:2fr 1fr; gap:2rem; align-items:start; }
.cart-lines{ min-width:0; }
@media (max-width:900px){ .cart-layout{ grid-template-columns:1fr; } }

.cart-empty{
  background:var(--c-white); border-radius:16px; padding:3rem 1.5rem; text-align:center; color:var(--c-text-soft);
}
.cart-empty a{ color:var(--c-red); font-weight:600; }

.cart-line{
  display:flex; gap:1rem; align-items:center; background:var(--c-white); border-radius:16px;
  padding:1rem 1.2rem; margin-bottom:1rem; border:1px solid rgba(36,27,18,.08);
}
.cart-line img{ width:64px; height:64px; border-radius:10px; object-fit:cover; flex-shrink:0; }
.cart-line-body{ flex:1; min-width:0; }
.cart-line-body h4{ font-size:.98rem; margin-bottom:.2rem; }
.cart-line-body span{ color:var(--c-text-soft); font-size:.85rem; }
.cart-line-body .cart-line-variant{
  display:inline-block; background:var(--c-kraft-light); color:var(--c-kraft-dark);
  font-size:.7rem; font-weight:600; padding:.15em .6em; border-radius:100px; margin-bottom:.3rem;
}
.cart-line-qty{ display:flex; align-items:center; gap:.5rem; }
.cart-line-qty button{
  width:28px; height:28px; border-radius:50%; border:1px solid rgba(36,27,18,.18); background:transparent;
  font-size:1rem; cursor:pointer; line-height:1;
}
.cart-line-total{ font-weight:600; min-width:90px; text-align:right; }
.cart-line-remove{ border:none; background:transparent; color:var(--c-text-soft); cursor:pointer; font-size:.8rem; }
.cart-line-remove:hover{ color:var(--c-red); }

@media (max-width:560px){
  .cart-line{ flex-wrap:wrap; }
  .cart-line img{ width:52px; height:52px; }
  .cart-line-body{ flex:1 1 55%; }
  .cart-line-total{ margin-left:auto; }
}

.cart-summary{
  background:var(--c-white); border-radius:16px; padding:1.6rem; border:1px solid rgba(36,27,18,.08);
  position:sticky; top:6.5rem;
}
.cart-summary h3{ font-size:1.05rem; margin-bottom:1rem; }
.cart-summary-row{ display:flex; justify-content:space-between; padding:.5rem 0; font-size:.92rem; }
.cart-summary-total{ border-top:1px solid rgba(36,27,18,.1); margin-top:.4rem; padding-top:.8rem; font-size:1.1rem; }
.cart-summary-total strong{ font-family:var(--font-display); color:var(--c-red); }

.cart-shipping{ margin:.8rem 0; display:flex; flex-direction:column; gap:.5rem; }
.cart-shipping-option{
  display:flex; align-items:center; gap:.6rem; font-size:.88rem; padding:.5rem .6rem;
  border:1px solid rgba(36,27,18,.12); border-radius:10px; cursor:pointer;
}
.cart-shipping-option span{ flex:1; }

.cart-coupon-row{ display:flex; gap:.5rem; margin:.6rem 0; }
.cart-coupon-row input{
  flex:1; padding:.6em .8em; border-radius:8px; border:1px solid rgba(36,27,18,.18); font-family:inherit;
}
.cart-form-error{ color:var(--c-red); font-size:.8rem; min-height:1.1em; margin-bottom:.4rem; }

.cart-shipping-form{ margin:1rem 0; display:flex; flex-direction:column; gap:.5rem; }
.cart-shipping-form h4{ margin:0 0 .1rem; font-family:var(--font-display); font-size:1rem; font-weight:600; color:var(--c-text); }
.cart-shipping-form input{
  padding:.65em .8em; border-radius:8px; border:1px solid rgba(36,27,18,.18); font-family:inherit; font-size:.92rem;
}
.cart-shipping-form input:invalid{ box-shadow:none; }
/* Campo con "?" de ayuda: el texto aparece al pasar el mouse, enfocar o tocar. */
.cart-input-help{ position:relative; display:flex; flex-direction:column; }
.cart-input-help input{ padding-right:2.6em; }
.cart-help-btn{
  position:absolute; right:.55em; top:50%; transform:translateY(-50%);
  width:1.4rem; height:1.4rem; border-radius:50%; border:1px solid rgba(36,27,18,.25);
  background:transparent; color:var(--c-text-soft); font-family:inherit; font-size:.75rem; font-weight:700;
  line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;
}
.cart-help-btn:hover, .cart-help-btn:focus-visible, .cart-input-help.is-open .cart-help-btn{
  background:var(--c-kraft-light); color:var(--c-black); border-color:var(--c-kraft-dark);
}
.cart-help-tip{
  position:absolute; right:0; bottom:calc(100% + .5rem); z-index:5; width:min(260px, 100%);
  padding:.6em .8em; border-radius:8px; background:var(--c-black); color:var(--c-cream);
  font-size:.78rem; line-height:1.45; box-shadow:0 6px 18px rgba(23,17,12,.18);
  opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s, transform .15s, visibility .15s;
  pointer-events:none;
}
.cart-help-tip::after{
  content:""; position:absolute; right:.85rem; top:100%;
  border:6px solid transparent; border-top-color:var(--c-black);
}
.cart-help-btn:hover + .cart-help-tip,
.cart-help-btn:focus-visible + .cart-help-tip,
.cart-input-help.is-open .cart-help-tip{ opacity:1; visibility:visible; transform:none; }

.cart-shipping-strike{ text-decoration:line-through; color:var(--c-text-soft); font-weight:400; margin-right:.4em; }

.free-shipping-bar{ margin-bottom:1.6rem; padding-top:.2rem; }
.free-shipping-bar-text{
  font-size:.82rem; color:var(--c-text-soft); margin:0 0 .9rem;
  transition:color .35s ease;
}
.free-shipping-bar-text strong{ color:var(--c-red); transition:color .35s ease; }
.free-shipping-bar.is-complete .free-shipping-bar-text strong{ color:var(--c-red-dark); }

.free-shipping-bar-track{
  position:relative; height:8px; border-radius:999px;
  background:rgba(36,27,18,.1); margin:0 6px;
}
.free-shipping-bar-fill{
  position:absolute; top:0; left:0; height:100%; width:0%; border-radius:999px;
  overflow:hidden;
  background:linear-gradient(90deg, var(--c-red) 0%, var(--c-red-dark) 100%);
  transition:width .7s cubic-bezier(.22,.61,.36,1);
}
.free-shipping-bar-fill::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  background-size:60px 100%; background-repeat:no-repeat;
  animation:free-shipping-shimmer 1.8s ease-in-out infinite;
}
.free-shipping-bar.is-complete .free-shipping-bar-fill::after{ animation:none; opacity:0; }

.free-shipping-bar-cart{
  position:absolute; top:50%; left:0%; transform:translate(-50%,-50%);
  width:26px; height:26px; border-radius:50%; z-index:1;
  display:flex; align-items:center; justify-content:center;
  background:var(--c-white); border:2px solid var(--c-red);
  color:var(--c-red); box-shadow:0 1px 4px rgba(23,17,12,.18);
  transition:left .7s cubic-bezier(.22,.61,.36,1), background .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.free-shipping-bar-cart svg{ width:13px; height:13px; flex-shrink:0; }
.free-shipping-bar.is-complete .free-shipping-bar-cart{
  background:var(--c-red); border-color:var(--c-red-dark); color:var(--c-white);
  box-shadow:0 0 0 4px rgba(179,32,39,.16);
  animation:free-shipping-pop .45s cubic-bezier(.34,1.56,.64,1);
}

@keyframes free-shipping-shimmer{
  0%{ background-position:-60px 0; }
  100%{ background-position:calc(100% + 60px) 0; }
}
@keyframes free-shipping-pop{
  0%{ transform:translate(-50%,-50%) scale(1); }
  45%{ transform:translate(-50%,-50%) scale(1.28); }
  100%{ transform:translate(-50%,-50%) scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .free-shipping-bar-fill, .free-shipping-bar-cart{ transition-duration:.01ms !important; }
  .free-shipping-bar-fill::after{ animation:none !important; }
  .free-shipping-bar.is-complete .free-shipping-bar-cart{ animation:none !important; }
}

.cart-summary .btn{ width:100%; margin-top:.7rem; }

/* ---------- awards / stats ---------- */
.stat-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; text-align:center; }
.stat-item strong{
  font-family:var(--font-display); font-size:clamp(2.2rem,4vw,3.2rem); display:block; color:var(--c-red);
}
.stat-item > span{ font-size:.82rem; color:var(--c-text-soft); text-transform:uppercase; letter-spacing:.06em; }
@media (max-width:760px){ .stat-band{ grid-template-columns:repeat(2,1fr); row-gap:2.4rem; } }

/* ---------- CTA banner ---------- */
.cta-banner{
  background:linear-gradient(120deg, var(--c-red), var(--c-red-dark));
  border-radius:32px; padding:clamp(2.4rem,6vw,4.5rem); text-align:center; color:var(--c-white);
  position:relative; overflow:hidden;
}
.cta-banner h2{ font-size:clamp(1.9rem,4vw,2.8rem); }
.cta-banner .lead{ color:rgba(255,255,255,.85); margin:1rem auto 2rem; max-width:34em; }
.cta-banner .btn-dark{ background:var(--c-black); }
.cta-banner .btn-dark::before{ background:var(--c-white); }
.cta-banner .btn-dark:hover{ color:var(--c-black); }

/* ===================================================================
   Footer
=================================================================== */
.site-footer{ background:var(--c-black); color:rgba(248,242,228,.75); padding:4.5rem 0 2rem; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.2fr; gap:2.5rem; padding-bottom:3rem; border-bottom:1px solid rgba(248,242,228,.12); }
.footer-brand img{ height:72px; margin-bottom:1rem; }
.footer-brand p{ font-size:.9rem; line-height:1.7; max-width:26em; color:rgba(248,242,228,.6); }
.footer-col h4{ color:var(--c-cream); font-family:var(--font-body); font-size:.82rem; text-transform:uppercase; letter-spacing:.1em; margin-bottom:1.1rem; }
.footer-col ul{ display:flex; flex-direction:column; gap:.7rem; }
.footer-col a{ font-size:.92rem; transition:color .3s, padding-left .3s; }
.footer-col a:hover{ color:var(--c-cream); padding-left:4px; }
.footer-social{ display:flex; gap:.7rem; margin-top:1.2rem; }
.footer-social a{
  width:38px; height:38px; border-radius:50%; border:1px solid rgba(248,242,228,.25);
  display:flex; align-items:center; justify-content:center; transition:background .3s, border-color .3s, transform .3s;
}
.footer-social a:hover{ background:var(--c-red); border-color:var(--c-red); transform:translateY(-3px); }
.footer-social svg{ width:16px; height:16px; }
.footer-bottom{ display:flex; justify-content:space-between; align-items:center; padding-top:1.6rem; font-size:.8rem; flex-wrap:wrap; gap:.6rem; color:rgba(248,242,228,.45); }

@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; } }

/* ===================================================================
   Aviso "Añadido al carrito" (cart.js → Cart.showAddedToast)
=================================================================== */
.cart-toast{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:120;
  display:flex; align-items:center; gap:1rem;
  max-width:calc(100vw - 2.4rem); padding:.9rem 1rem .9rem 1.2rem; border-radius:16px;
  background:var(--c-black); color:var(--c-cream);
  box-shadow:0 18px 40px rgba(23,17,12,.28);
  opacity:0; visibility:hidden; transform:translateY(20px);
  transition:opacity .35s var(--ease), transform .35s var(--ease), visibility .35s, bottom .35s var(--ease);
}
.cart-toast.is-visible{ opacity:1; visibility:visible; transform:translateY(0); }
/* En la ficha de producto, no tapar la barra fija de compra */
body:has(.sticky-buy.is-visible) .cart-toast{ bottom:5.6rem; }
.cart-toast-text{ display:flex; flex-direction:column; min-width:0; }
.cart-toast-text strong{ font-size:.92rem; }
.cart-toast-text span{ font-size:.78rem; color:rgba(248,242,228,.6); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cart-toast .btn-primary::before{ background:var(--c-kraft-dark); }
.cart-toast-close{
  background:none; border:none; color:rgba(248,242,228,.6); font-size:1.4rem; line-height:1;
  cursor:pointer; padding:.2rem .3rem;
}
.cart-toast-close:hover{ color:var(--c-cream); }
@media (max-width:560px){
  .cart-toast{ left:1rem; right:1rem; bottom:1rem; max-width:none; }
}

/* ===================================================================
   Botón flotante "¿Dudas? Escríbenos" (main.js lo inyecta)
=================================================================== */
.help-fab{
  position:fixed; right:1.2rem; bottom:calc(1.2rem + env(safe-area-inset-bottom)); z-index:85;
  display:flex; align-items:center; gap:.7rem;
  padding:.45rem 1.15rem .45rem .45rem; border-radius:999px;
  background:var(--c-black); color:var(--c-cream); text-decoration:none;
  border:1px solid rgba(201,164,103,.35);
  box-shadow:0 14px 34px rgba(23,17,12,.32), 0 2px 6px rgba(23,17,12,.2);
  opacity:0; visibility:hidden; transform:translateY(24px) scale(.94);
  transition:opacity .45s var(--ease), transform .45s var(--ease), visibility .45s,
             bottom .35s var(--ease), background .3s, border-color .3s;
}
.help-fab.is-in{ opacity:1; visibility:visible; transform:none; }
.help-fab.is-away{ opacity:0; visibility:hidden; transform:translateY(24px) scale(.94); pointer-events:none; }
.help-fab:hover{ background:var(--c-black-soft); border-color:var(--c-kraft); transform:translateY(-3px); }
.help-fab:focus-visible{ outline:2px solid var(--c-kraft); outline-offset:3px; }

.help-fab-icon{
  position:relative; flex:none; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:var(--c-red); color:var(--c-white);
  transition:background .3s, transform .45s var(--ease);
}
.help-fab-icon svg{ width:22px; height:22px; }
/* Pulso suave para llamar la atención sin ser invasivo */
.help-fab-icon::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  border:2px solid var(--c-red); opacity:0;
  animation:help-pulse 2.8s var(--ease-soft) infinite 2s;
}
.help-fab:hover .help-fab-icon{ background:var(--c-red-dark); transform:rotate(-10deg); }
@keyframes help-pulse{
  0%{ transform:scale(1); opacity:.7; }
  70%,100%{ transform:scale(1.7); opacity:0; }
}

.help-fab-text{ display:flex; flex-direction:column; line-height:1.15; }
.help-fab-text small{ font-size:.72rem; letter-spacing:.04em; color:var(--c-kraft-light); }
.help-fab-text strong{ font-family:var(--font-display); font-weight:500; font-size:1.02rem; }

/* No tapar la barra fija de compra ni el aviso de "añadido al carrito" */
body:has(.sticky-buy.is-visible) .help-fab{ bottom:calc(5.6rem + env(safe-area-inset-bottom)); }
body:has(.cart-toast.is-visible) .help-fab{ opacity:0; visibility:hidden; pointer-events:none; }

@media (max-width:560px){
  .help-fab{ right:1rem; bottom:calc(1rem + env(safe-area-inset-bottom)); padding:.35rem .95rem .35rem .35rem; gap:.55rem; }
  .help-fab-icon{ width:38px; height:38px; }
  .help-fab-icon svg{ width:19px; height:19px; }
  .help-fab-text small{ font-size:.66rem; }
  .help-fab-text strong{ font-size:.92rem; }
}
@media (prefers-reduced-motion: reduce){
  .help-fab, .help-fab-icon{ transition-duration:.01ms; }
  .help-fab-icon::after{ animation:none; }
}

/* ===================================================================
   Sticky buy bar (product page)
=================================================================== */
.sticky-buy{
  position:fixed; left:0; right:0; bottom:0; z-index:90;
  background:rgba(23,17,12,.92); backdrop-filter:blur(10px);
  color:var(--c-cream); padding:.9rem 0 calc(.9rem + env(safe-area-inset-bottom));
  transform:translateY(110%); transition:transform .5s var(--ease);
}
.sticky-buy.is-visible{ transform:translateY(0); }
.sticky-buy .container{ display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.sticky-buy-info{ display:flex; align-items:center; gap:.8rem; }
.sticky-buy-info img{ height:40px; }
.sticky-buy-info strong{ font-family:var(--font-display); font-size:1.1rem; display:block; }
.sticky-buy-info span{ font-size:.78rem; color:rgba(248,242,228,.55); }

/* ===================================================================
   Page hero (inner pages)
=================================================================== */
.page-hero{
  padding:9.5rem 0 4rem; background:var(--c-black); color:var(--c-cream); position:relative; overflow:hidden;
}
.page-hero::after{
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 80% 0%, rgba(179,32,39,.25), transparent 65%);
}
.page-hero .container{ position:relative; z-index:1; }
.breadcrumb{ display:flex; gap:.5rem; align-items:center; font-size:.82rem; color:rgba(248,242,228,.5); margin-bottom:1rem; }
.page-hero h1{ font-size:clamp(2.4rem,5vw,3.8rem); }
.page-hero .lead{ color:rgba(248,242,228,.65); max-width:38em; margin-top:1rem; }

/* ===================================================================
   Product page
=================================================================== */
/* producto.html no tiene .page-hero (el header se fuerza a su versión
   compacta ahí, ver main.js), así que solo necesita el espacio justo para
   no quedar tapado por el header fijo -- mucho menos que el hero alto de
   otras páginas, y todavía menos en móvil donde el header es más chico. */
.product-hero-gap{ padding-top:6.5rem; }
@media (max-width:640px){ .product-hero-gap{ padding-top:5rem; } }

.product-main{ display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:start; }
.product-gallery{ position:sticky; top:7rem; }
.product-gallery-main{
  border-radius:28px; background:linear-gradient(160deg, var(--c-kraft-light), var(--c-cream-2));
  aspect-ratio:1/1; display:flex; align-items:center; justify-content:center; overflow:hidden; position:relative;
}
.product-gallery-main img{ width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity .25s ease, transform .8s var(--ease); }
/* producto.js agrega .is-loaded solo cuando la imagen ya está decodificada. */
.product-gallery-main img.is-loaded{ opacity:1; }
.product-gallery-main:hover img{ transform:scale(1.05) rotate(-1deg); }
.product-thumbs{ display:flex; gap:.8rem; margin-top:1rem; }
.product-thumbs button{
  flex:1 1 0; aspect-ratio:1/1; width:auto; height:auto; border-radius:14px; border:2px solid transparent; padding:0; overflow:hidden;
  background:var(--c-white); cursor:pointer; transition:border-color .3s, opacity .3s; opacity:.7;
}
.product-thumbs button:hover{ opacity:1; }
.product-thumbs button.active{ border-color:var(--c-red); opacity:1; }
.product-thumbs img{ width:100%; height:100%; object-fit:cover; display:block; }

.product-info .eyebrow{ margin-bottom:.8rem; }
.product-info h1{ font-size:clamp(2.1rem,3.6vw,2.9rem); }
.stars{ display:flex; align-items:center; gap:.4rem; margin:.9rem 0; color:var(--c-kraft-dark); }
.stars svg{ width:16px; height:16px; }
.stars span{ color:var(--c-text-soft); font-size:.85rem; margin-left:.3rem; }

.launch-badge{
  display:inline-block; background:var(--c-red); color:var(--c-white); font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; padding:.4em .9em; border-radius:100px; margin-top:.6rem;
}

.price-row{ display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem .8rem; margin:1.4rem 0; }
.price-row .price{ font-family:var(--font-display); font-size:2.4rem; color:var(--c-red); }
.price-row .price-compare{ font-size:1.15rem; }
.price-row .unit{ color:var(--c-text-soft); font-size:.9rem; }

.product-desc{ color:var(--c-text-soft); line-height:1.75; margin-bottom:1.6rem; }

.flavor-tags{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2rem; }
.flavor-tags span{
  padding:.5em 1em; border-radius:100px; background:var(--c-kraft-light); font-size:.8rem; font-weight:600; color:var(--c-text);
}

.buy-box{
  border:1px solid rgba(36,27,18,.12); border-radius:20px; padding:1.6rem; background:var(--c-white);
}
.variant-row{ margin-bottom:1.2rem; }
.variant-row > span{ display:block; font-size:.85rem; font-weight:600; color:var(--c-text-soft); margin-bottom:.5rem; }
.variant-options{ display:flex; flex-wrap:wrap; gap:.6rem; }
.variant-options button{
  padding:.6em 1.2em; border-radius:100px; border:1.5px solid rgba(36,27,18,.18); background:transparent;
  font-family:inherit; font-size:.85rem; font-weight:600; color:var(--c-text); cursor:pointer;
  transition:border-color .25s var(--ease), background .25s var(--ease), color .25s var(--ease);
}
.variant-options button:hover{ border-color:var(--c-red); }
.variant-options button.active{ border-color:var(--c-red); background:var(--c-red); color:var(--c-white); }

.qty-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.2rem; }
.qty-stepper{ display:flex; align-items:center; border:1px solid rgba(36,27,18,.15); border-radius:100px; overflow:hidden; }
.qty-stepper button{ width:40px; height:40px; background:transparent; border:none; font-size:1.1rem; }
.qty-stepper button:hover{ background:var(--c-kraft-light); }
.qty-stepper span{ width:36px; text-align:center; font-weight:600; }
.total-row{ font-size:.9rem; color:var(--c-text-soft); }
.total-row strong{ color:var(--c-text); font-family:var(--font-display); font-size:1.15rem; }
.buy-box .btn{ width:100%; margin-top:1.2rem; }

.trust-row{
  display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem;
  margin-top:1.8rem; padding-top:1.6rem; border-top:1px solid rgba(36,27,18,.1);
}
.trust-row div{
  display:flex; flex-direction:column; align-items:center; text-align:center; gap:.5rem;
  font-size:.78rem; font-weight:600; color:var(--c-text-soft); line-height:1.3;
}
.trust-row svg{ width:1.7em; height:1.7em; color:var(--c-red); }
.trust-row div[hidden]{ display:none; }
/* con el beneficio de envío gratis activo son 4: cuadrícula de 2 × 2 */
.trust-row:has(> div:nth-child(4):not([hidden])){ grid-template-columns:repeat(2, 1fr); row-gap:1.3rem; }
@media (max-width:480px){
  .trust-row{ gap:.6rem; }
  .trust-row div{ font-size:.7rem; gap:.4rem; }
  .trust-row:has(> div:nth-child(4):not([hidden])){ row-gap:1rem; }
}

/* barra de envío gratis dentro de la caja de compra (componente del carrito) */
.buy-box .free-shipping-bar{ margin:.2rem 0 0; padding-top:0; }
.buy-box .free-shipping-bar-text{ margin-bottom:.75rem; }

/* ---------- medios de pago (debajo de los botones) ---------- */
.pay-methods{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.45rem .5rem;
  margin-top:1rem;
}
.pay-methods-label{ font-size:.78rem; font-weight:600; color:var(--c-text-soft); }
.pay-methods ul{ display:contents; }
.pay-methods li{
  display:inline-flex; align-items:center; gap:.4em; height:22px; padding:0 .85em; border-radius:100px;
  background:var(--c-kraft-light); font-size:.72rem; font-weight:600; color:var(--c-text); white-space:nowrap;
}
.pay-methods li svg{ width:1.25em; height:1.25em; flex:none; }

/* ---------- sello Negocios Verdes (CAM) ---------- */
.green-seal{
  display:flex; width:fit-content; align-items:center; gap:.9rem; margin:1.6rem auto 0;
  padding:.6rem 1.3rem .6rem .6rem; background:var(--c-white); border-radius:100px;
  border:1px solid rgba(36,27,18,.1); box-shadow:0 14px 28px -16px rgba(23,17,12,.25);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.green-seal:hover{ transform:translateY(-3px); box-shadow:0 20px 36px -16px rgba(23,17,12,.3); }
.green-seal img{ width:54px; height:auto; flex:none; }
.green-seal-text strong{
  display:block; color:#3f8f2f; font-size:.7rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; margin-bottom:.2rem;
}
.green-seal-text span{ display:block; font-size:.82rem; font-weight:600; color:var(--c-text); line-height:1.3; }

/* ---------- mini-resumen de estrellas (arriba del título) ---------- */
.reviews-mini{
  display:flex; width:fit-content; align-items:center; gap:.5rem; margin:.6rem 0 .2rem; color:var(--c-text-soft);
  font-size:.82rem; font-weight:600; cursor:pointer;
}
.reviews-mini-stars{ color:var(--c-kraft-dark); font-size:.95rem; letter-spacing:.04em; }
.reviews-mini:hover{ color:var(--c-text); }

/* ---------- reseñas (producto.html) ---------- */
.reviews-summary{
  display:flex; align-items:center; gap:2.2rem; margin-bottom:2.4rem; flex-wrap:wrap;
}
.reviews-score{
  flex:none; display:flex; flex-direction:column; align-items:center; text-align:center;
  padding:1.4rem 2rem; background:var(--c-white); border:1px solid rgba(36,27,18,.1); border-radius:20px;
}
@media (max-width:480px){ .reviews-score{ padding:1.1rem 1.5rem; width:100%; } }
.reviews-score strong{ font-family:var(--font-display); font-size:2.6rem; color:var(--c-red); line-height:1; }
.reviews-stars{ color:var(--c-kraft-dark); font-size:1.2rem; letter-spacing:.1em; margin:.4rem 0 .3rem; }
.reviews-score span{ font-size:.78rem; color:var(--c-text-soft); font-weight:600; white-space:nowrap; }
.reviews-summary-body h2{ margin-top:.3rem; margin-bottom:.6rem; }
.reviews-summary-body .btn{ margin-top:.6rem; }

/* carrusel */
.reviews-carousel{ position:relative; margin-bottom:1.4rem; }
.reviews-list{
  display:flex; gap:1.2rem; overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:.3rem .2rem 1rem; scrollbar-width:none;
}
.reviews-list::-webkit-scrollbar{ display:none; }

.review-card{
  background:var(--c-white); border:1px solid rgba(36,27,18,.1); border-radius:18px; padding:1.4rem;
  display:flex; flex-direction:column; gap:.7rem; flex:0 0 300px; scroll-snap-align:start;
}
@media (max-width:640px){ .review-card{ flex-basis:82vw; } }
.review-card-head{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; }
.review-card-head strong{ font-size:.92rem; }
.review-stars{ color:var(--c-kraft-dark); font-size:.9rem; letter-spacing:.06em; flex:none; }
.review-card p{ font-size:.88rem; color:var(--c-text-soft); line-height:1.6; flex:1; }
.review-date{ font-size:.72rem; color:var(--c-text-soft); opacity:.75; }

.reviews-carousel-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:42px; height:42px; border-radius:50%;
  background:var(--c-white); border:1px solid rgba(36,27,18,.12); box-shadow:0 10px 24px -12px rgba(23,17,12,.3);
  display:flex; align-items:center; justify-content:center; cursor:pointer; color:var(--c-text);
  transition:transform .25s var(--ease), background .25s var(--ease);
}
.reviews-carousel-nav:hover{ background:var(--c-red); color:var(--c-white); }
.reviews-carousel-nav svg{ width:1.1em; height:1.1em; }
.reviews-carousel-nav.prev{ left:-14px; }
.reviews-carousel-nav.next{ right:-14px; }
@media (max-width:640px){ .reviews-carousel-nav{ display:none; } }

.reviews-empty{
  background:var(--c-white); border-radius:16px; padding:2.4rem 1.5rem; text-align:center;
  color:var(--c-text-soft); margin-bottom:2.4rem;
}

/* popup para dejar reseña */
.review-modal{
  position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center;
  padding:1.5rem; opacity:0; pointer-events:none; transition:opacity .3s var(--ease);
}
.review-modal.is-open{ opacity:1; pointer-events:auto; }
.review-modal-backdrop{ position:absolute; inset:0; background:rgba(23,17,12,.6); }
.review-modal-card{
  position:relative; width:100%; max-width:520px; max-height:88vh; overflow-y:auto;
  background:var(--c-cream-2); border-radius:20px; padding:2rem;
  transform:translateY(24px); transition:transform .35s var(--ease);
}
@media (max-width:480px){ .review-modal-card{ padding:1.5rem; } }
.review-modal.is-open .review-modal-card{ transform:translateY(0); }
.review-modal-close{
  position:absolute; top:1.1rem; right:1.1rem; background:none; border:none; cursor:pointer; color:var(--c-text-soft);
}
.review-modal-close svg{ width:1.4em; height:1.4em; }
.review-modal-card h3{ font-size:1.15rem; margin-bottom:1.2rem; padding-right:2rem; }

.review-form-row{ margin-bottom:1.1rem; }
.review-form-row label{ display:block; font-size:.85rem; font-weight:600; color:var(--c-text-soft); margin-bottom:.5rem; }
.review-form-row input, .review-form-row textarea{
  width:100%; padding:.7em .9em; border-radius:10px; border:1px solid rgba(36,27,18,.18);
  font-family:inherit; font-size:.9rem; background:var(--c-white);
}
.review-form-row textarea{ min-height:6rem; resize:vertical; }

.star-picker{ display:flex; gap:.3rem; }
.star-picker button{
  background:none; border:none; font-size:1.8rem; line-height:1; color:rgba(36,27,18,.22); cursor:pointer;
  transition:color .2s var(--ease);
}
.star-picker button.active{ color:var(--c-kraft-dark); }

.review-form-error{ color:var(--c-red); font-size:.82rem; min-height:1.2em; margin-bottom:.6rem; }
.review-form-note{ font-size:.76rem; color:var(--c-text-soft); margin-top:.7rem; }
.review-success{
  background:rgba(0,176,144,.12); color:#00875f; border-radius:14px; padding:1.2rem 1.4rem; font-size:.9rem; font-weight:600;
}

@media (max-width:900px){
  .product-main{ grid-template-columns:1fr; }
  .product-gallery{ position:static; }
}

/* Ficha de producto en móvil: espacios más compactos. La barra de compra fija
   aparece cuando los botones principales salen de pantalla (producto.js). */
@media (max-width:760px){
  .product-hero-gap{ padding-top:4.9rem; padding-bottom:2.8rem; }
  .product-main{ gap:1.4rem; }
  .product-gallery[data-reveal], .product-info[data-reveal]{ transform:translateY(16px); }
  .product-gallery[data-reveal].is-visible, .product-info[data-reveal].is-visible{ transform:none; }
  .product-gallery-main{ border-radius:20px; }
  .product-gallery-main:hover img{ transform:none; }
  .product-thumbs{ gap:.5rem; margin-top:.6rem; }
  .product-thumbs button{ border-radius:10px; }

  .product-info .eyebrow{ margin-bottom:.4rem; font-size:.66rem; letter-spacing:.18em; }
  .reviews-mini{ margin:.3rem 0 .35rem; }
  .product-info h1{ font-size:1.85rem; line-height:1.1; }
  .launch-badge{ margin-top:.55rem; font-size:.66rem; }
  .price-row{ margin:.8rem 0 1rem; gap:.3rem .6rem; }
  .price-row .price{ font-size:2rem; }
  .price-row .price-compare{ font-size:1rem; }
  .product-desc{ font-size:.93rem; line-height:1.65; margin-bottom:1.1rem; }
  .flavor-tags{ gap:.4rem; margin-bottom:1.3rem; }
  .flavor-tags span{ font-size:.74rem; padding:.45em .9em; }

  .buy-box{ padding:1.1rem 1.1rem 1.2rem; border-radius:16px; }
  .variant-row{ margin-bottom:.9rem; }
  .qty-row{ margin-bottom:.7rem; }
  .qty-stepper button{ width:38px; height:38px; }
  .buy-box .btn{ margin-top:.8rem; }
  .pay-methods{ margin-top:.85rem; }
  .trust-row{ margin-top:1.3rem; padding-top:1.1rem; }
  .green-seal{ margin-top:1.2rem; }

  .tabs-nav{ gap:1.6rem; margin-bottom:1.3rem; }
  .tabs-nav button{ padding:.8rem 0; }
  .tab-panel ul{ grid-template-columns:1fr; gap:0; }
  .prep-method{ padding:1.2rem 1.3rem; border-radius:16px; }

  .sticky-buy{ padding:.65rem 0 calc(.65rem + env(safe-area-inset-bottom)); }
  .sticky-buy-info{ min-width:0; gap:.6rem; }
  .sticky-buy-info img{ height:36px; }
  .sticky-buy-info > div{ min-width:0; }
  .sticky-buy-info strong{ font-size:.95rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sticky-buy .btn{ flex:none; }
  /* que la barra fija no tape el final del footer */
  body:has(.sticky-buy) .site-footer{ padding-bottom:calc(2rem + 4.2rem + env(safe-area-inset-bottom)); }
}

/* tabs on product page */
.tabs-nav{ display:flex; gap:2rem; border-bottom:1px solid rgba(36,27,18,.12); margin-bottom:2rem; }
.tabs-nav button{
  background:none; border:none; padding:1rem 0; font-weight:600; color:var(--c-text-soft); position:relative; font-size:.95rem;
}
.tabs-nav button.active{ color:var(--c-text); }
.tabs-nav button.active::after{ content:''; position:absolute; left:0; bottom:-1px; width:100%; height:2px; background:var(--c-red); }
.tab-panel{ display:none; }
.tab-panel.active{ display:block; animation:fadeIn .5s var(--ease); }
@keyframes fadeIn{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:translateY(0);} }
.tab-panel ul{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem 2rem; }
.tab-panel li{ display:flex; justify-content:space-between; padding:.6rem 0; border-bottom:1px dashed rgba(36,27,18,.12); font-size:.9rem; }
.tab-panel li strong{ color:var(--c-text-soft); font-weight:500; }

.prep-methods{ display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; }
.prep-method{ background:var(--c-cream-2); border-radius:20px; padding:1.6rem 1.8rem; }
.prep-method h3{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 .8rem; }
.prep-method ul{ display:block; }
.prep-method li:last-child{ border-bottom:none; }
@media (max-width:640px){ .prep-methods{ grid-template-columns:1fr; } }

/* ===================================================================
   Team / founders
=================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.6rem; }
.team-card{ text-align:center; }
.team-card .avatar{ border-radius:24px; overflow:hidden; aspect-ratio:4/5; margin-bottom:1.1rem; }
.team-card .avatar img{ width:100%; height:100%; object-fit:cover; transition:transform .6s var(--ease); }
.team-card:hover .avatar img{ transform:scale(1.07); }
.team-card h3{ font-size:1.1rem; }
.team-card span{ color:var(--c-red); font-size:.82rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
@media (max-width:760px){ .team-grid{ grid-template-columns:1fr; max-width:340px; margin:0 auto; } }

/* ===================================================================
   Lightbox
=================================================================== */
.lightbox{
  position:fixed; inset:0; background:rgba(15,11,7,.94); z-index:300;
  display:flex; align-items:center; justify-content:center; padding:4vh 4vw;
  opacity:0; pointer-events:none; transition:opacity .4s var(--ease);
}
.lightbox.is-open{ opacity:1; pointer-events:auto; }
.lightbox img{ max-width:100%; max-height:88vh; border-radius:14px; box-shadow:0 30px 80px rgba(0,0,0,.5); transform:scale(.92); transition:transform .4s var(--ease); }
.lightbox.is-open img{ transform:scale(1); }
.lightbox-close, .lightbox-prev, .lightbox-next{
  position:absolute; background:rgba(248,242,228,.1); border:1px solid rgba(248,242,228,.25); color:var(--c-cream);
  width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .3s;
}
.lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover{ background:var(--c-red); border-color:var(--c-red); }
.lightbox-close{ top:2rem; right:2rem; }
.lightbox-prev{ left:2rem; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:2rem; top:50%; transform:translateY(-50%); }
.lightbox-caption{ position:absolute; bottom:2rem; left:50%; transform:translateX(-50%); color:rgba(248,242,228,.7); font-size:.85rem; }

/* ===================================================================
   Gallery page filters
=================================================================== */
.filter-row{ display:flex; gap:.7rem; flex-wrap:wrap; margin-bottom:2.4rem; }
.filter-row button{
  padding:.6em 1.3em; border-radius:100px; border:1px solid rgba(36,27,18,.15); background:var(--c-white);
  font-size:.85rem; font-weight:600; color:var(--c-text-soft); transition:all .3s var(--ease);
}
.filter-row button.active, .filter-row button:hover{ background:var(--c-black); color:var(--c-cream); border-color:var(--c-black); }

/* ===================================================================
   Misc
=================================================================== */
.divider-wave{ height:80px; margin-top:-1px; }
.text-red{ color:var(--c-red); }
.mt-lg{ margin-top:3rem; }
.center-btn{ display:flex; justify-content:center; margin-top:3rem; }

::selection{ background:var(--c-red); color:var(--c-white); }

.reveal-cursor{
  position:fixed; top:0; left:0; width:14px; height:14px; border-radius:50%;
  background:var(--c-red); pointer-events:none; z-index:400; mix-blend-mode:difference;
  transform:translate(-50%,-50%); transition:width .3s var(--ease), height .3s var(--ease);
  display:none;
}
@media (hover:hover) and (pointer:fine){ .reveal-cursor{ display:block; } }
.reveal-cursor.is-hover{ width:44px; height:44px; }

.page-loader{
  position:fixed; inset:0; background:var(--c-black); z-index:500;
  display:flex; align-items:center; justify-content:center;
  transition:opacity .6s var(--ease), visibility .6s var(--ease);
}
.page-loader.is-done{ opacity:0; visibility:hidden; }
.page-loader img{ height:88px; animation:pulse 1.4s ease-in-out infinite; }