/* ═══════════════════════════════════════════════════
   VIANZO CAFFÉ · Del origen a la cima
   Paleta tomada de las bolsas:
   crema #F4EFE3 · espresso #241C12 · oro #C9A24B
   salvia (Start) #7C7854 · oliva (Tempo) #55502A
   kraft (Restore) #96795A · petróleo (Momentum) #263F49
   terracota (Peak) #A0522F · negro (Summit) #1B1916
   ═══════════════════════════════════════════════════ */

@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:400 600; src:url("../assets/fonts/cormorant.woff2") format('woff2'); font-display:swap; }
@font-face { font-family:'Cormorant Garamond'; font-style:italic; font-weight:400 600; src:url("../assets/fonts/cormorant-italic.woff2") format('woff2'); font-display:swap; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:400 700; src:url("../assets/fonts/oswald.woff2") format('woff2'); font-display:swap; }
@font-face { font-family:'Work Sans'; font-style:normal; font-weight:300 700; src:url("../assets/fonts/worksans.woff2") format('woff2'); font-display:swap; }

:root {
  --crema:#F4EFE3; --espresso:#241C12; --oro:#C9A24B; --oro-claro:#DCB768;
  --siena:#A0522F; --tinta:#5B4B37; --verde:#4A5532;
  --salvia:#7C7854; --oliva:#55502A; --kraft:#96795A;
  --petroleo:#263F49; --terracota:#A0522F; --negro:#1B1916;
  --serif:'Cormorant Garamond',Georgia,serif;
  --sans:'Work Sans',-apple-system,sans-serif;
  --cond:'Oswald',Impact,sans-serif;
  --ease:cubic-bezier(0.23,1,0.32,1);

  /* Escala de micro-texto. El sitio tenía docenas de versalitas sueltas
     entre 7 y 11px (heredadas del original): ilegibles para el
     comprador de café gourmet, que suele ser un público mayor. Dos
     pasos cubren todo: 12px para insignias/etiquetas de una palabra,
     13px para metadatos algo más largos. */
  --fs-micro:0.75rem;
  --fs-meta:0.8125rem;

  /* El oro de marca (#C9A24B) sólo funciona sobre fondos oscuros: sobre
     crema/tan mide 2:1. Este bronce es el mismo oro llevado a un valor
     que sí contrasta en claro; los fondos oscuros (club, testimonio
     destacado) siguen usando el oro literal vía override. */
  --oro-oscuro:#7A5C1E;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--crema); color:var(--espresso); font-family:var(--sans); -webkit-font-smoothing:antialiased; font-kerning:normal; overflow-x:hidden; }
/* Los precios cambian de dígitos al tocar cantidad/tamaño; sin números
   tabulares el texto de al lado tiembla porque cada cifra pesa distinto. */
.price-preview, .size-opt strong, .kit-price strong, .kit-price s, .bulk-row strong,
.cart-item-price, .cart-total-row strong, .sum-row strong, .sum-item strong, .qty output {
  font-variant-numeric:tabular-nums;
}
img { max-width:100%; }
button { font-family:inherit; cursor:pointer; }

::selection { background:var(--oro); color:var(--espresso); }

/* ── Animaciones de entrada ── */
.enter { opacity:0; transform:translateY(16px); animation:enterUp 700ms var(--ease) forwards; animation-delay:var(--d,0ms); }
@keyframes enterUp { to { opacity:1; transform:translateY(0); } }

.reveal { opacity:0; transform:translateY(28px); transition:opacity 800ms var(--ease) var(--d,0ms), transform 800ms var(--ease) var(--d,0ms); }
.reveal.is-visible { opacity:1; transform:translateY(0); }

@keyframes marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes toastIn { from{opacity:0;transform:translate(-50%,14px)} to{opacity:1;transform:translate(-50%,0)} }
@keyframes badgePop { 0%{transform:scale(1)} 40%{transform:scale(1.45)} 100%{transform:scale(1)} }
@keyframes checkCircle { to{stroke-dashoffset:0} }
@keyframes checkMark { to{stroke-dashoffset:0} }
/* El precio cambia de cifra al tocar cantidad/tamaño sin ningún aviso;
   un pulso corto confirma que el número reaccionó a la elección. */
@keyframes priceFlash { 0%{transform:scale(1)} 40%{transform:scale(1.14)} 100%{transform:scale(1)} }
.price-flash { display:inline-block; animation:priceFlash 380ms cubic-bezier(0.16,1,0.3,1); }

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

/* ── Tipografía base ── */
.kicker { font-family:var(--sans); font-size:var(--fs-meta); font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:#6B4A2E; margin-bottom:18px; display:block; }
.h2 { font-family:var(--serif); font-weight:500; font-size:clamp(1.9rem,4vw,3rem); line-height:1.2; color:var(--espresso); text-wrap:balance; }
.h2.big { font-size:clamp(2rem,5vw,3.6rem); line-height:1.15; }
.h2 em { font-style:italic; color:#6B4A2E; }
.h2 em.gold { color:var(--oro-oscuro); }
.club .h2 em.gold { color:var(--oro); }
.h2 em.cream { color:var(--crema); }
.lead { font-family:var(--serif); font-size:1.28rem; color:var(--tinta); line-height:1.7; letter-spacing:0.01em; text-wrap:pretty; }

/* ── Botones ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:16px 36px; border:none; border-radius:2px; font-family:var(--sans); font-size:0.74rem; font-weight:600; letter-spacing:0.11em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background 200ms ease-out, color 200ms ease-out, border-color 200ms ease-out, transform 160ms var(--ease), box-shadow 200ms ease-out; }
.btn:active { transform:translateY(0) scale(0.97); }
.btn-gold { background:var(--oro); color:var(--espresso); box-shadow:0 1px 0 rgba(36,28,18,0.08); }
.btn-gold:hover { background:var(--oro-claro); transform:translateY(-2px); box-shadow:0 10px 20px rgba(80,60,20,0.22); }
.btn-ghost { background:transparent; color:var(--espresso); border:1px solid rgba(36,28,18,0.38); font-weight:500; }
.btn-ghost:hover { background:rgba(36,28,18,0.06); border-color:var(--espresso); }
.btn-dark { background:var(--espresso); color:var(--crema); }
.btn-dark:hover { background:#3A2E1E; transform:translateY(-1px); box-shadow:0 8px 18px rgba(36,28,18,0.3); }
.btn-whatsapp { background:#25D366; color:#0B3B1E; }
.btn-whatsapp:hover { background:#3EDC79; transform:translateY(-1px); }
.btn-outline-cream { background:rgba(20,26,12,0.28); color:var(--crema); border:1px solid rgba(244,239,227,0.7); font-weight:500; }
.btn-outline-cream:hover { background:var(--crema); color:var(--verde); }
.btn-ghost-sm { background:transparent; color:var(--tinta); border:none; padding:12px 18px; font-size:var(--fs-micro); font-weight:500; letter-spacing:0.08em; text-transform:uppercase; }
.btn-ghost-sm:hover { color:var(--espresso); }
.btn-block { width:100%; }
.btn-nav { padding:11px 24px; font-size:var(--fs-meta); }

.icon-btn { background:transparent; border:none; color:var(--espresso); opacity:0.6; padding:8px; border-radius:50%; display:inline-flex; transition:opacity 180ms ease-out, background 180ms ease-out, transform 180ms var(--ease); }
.icon-btn:hover { opacity:1; background:rgba(36,28,18,0.07); transform:rotate(90deg); }

/* ═══════════ ESCENA DE MONTAÑA (fondo global) ═══════════ */
.scene { position:fixed; inset:0; z-index:-1; overflow:hidden; background:linear-gradient(180deg,#F6F1E4 0%,#EFE6D0 100%); }
.scene-art { position:absolute; left:0; right:0; top:0; height:310vh; will-change:transform; }
.scene-overlay { position:absolute; inset:0; display:block; width:100%; height:100%; }
.scene-base { position:absolute; bottom:5vh; left:50%; transform:translateX(-50%); display:flex; flex-direction:column; align-items:center; gap:10px; opacity:0.6; }
.scene-base span { font-family:var(--cond); font-size:0.72rem; font-weight:500; letter-spacing:0.3em; color:#3D2817; white-space:nowrap; }
.scene-base img { opacity:0.6; }

/* La misma montaña Summit (grabado HD calado), más cerca conforme desciendes */
.peak { position:absolute; pointer-events:none; display:block; height:auto; }
.peak-far  { top:6vh;   left:50%; transform:translateX(-50%); width:min(780px,74vw); opacity:0.5; }
.peak-mid  { top:82vh;  left:-5vw;  width:min(1000px,90vw); opacity:0.38; transform:scaleX(-1); }
.peak-near { top:154vh; right:-9vw; width:114vw; opacity:0.3; }
.peak-base { top:222vh; left:-10vw; width:126vw; opacity:0.2; transform:scaleX(-1); }
.scene-clouds { position:absolute; inset:0; height:200vh; will-change:transform; pointer-events:none; }
.cloud { position:absolute; border-radius:50%; background:radial-gradient(ellipse, rgba(255,252,244,0.85) 0%, rgba(255,252,244,0) 70%); animation:cloudDrift 60s ease-in-out infinite alternate; }
.cloud.c1 { width:420px; height:120px; top:8%; left:6%; }
.cloud.c2 { width:520px; height:150px; top:16%; right:-4%; animation-duration:75s; animation-delay:-20s; }
.cloud.c3 { width:340px; height:100px; top:38%; left:32%; opacity:0.7; animation-duration:90s; animation-delay:-45s; }
@keyframes cloudDrift { from{transform:translateX(0)} to{transform:translateX(90px)} }

/* ═══════════ ALTÍMETRO ═══════════ */
.altimeter { position:fixed; right:26px; top:50%; transform:translateY(-50%); z-index:90; display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none; opacity:0; transition:opacity 500ms ease-out; }
.altimeter.visible { opacity:1; }
.alti-num { font-family:var(--cond); font-size:1.05rem; font-weight:500; color:var(--espresso); line-height:1; letter-spacing:0.04em; }
.alti-unit { font-size:var(--fs-micro); letter-spacing:0.22em; text-transform:uppercase; color:var(--tinta); margin-top:-4px; }
.alti-track { position:relative; width:2px; height:130px; background:linear-gradient(180deg,var(--oro) 0%,#96795A 40%,#55502A 70%,#1B1916 100%); border-radius:1px; }
/* Antes animaba `top` (recalcula layout en cada frame de scroll).
   Misma posición final, misma curva; solo cambia a `transform`
   (lo resuelve la GPU) para que no cueste reflow. */
.alti-dot { position:absolute; left:50%; top:0; width:11px; height:11px; border-radius:50%; background:var(--oro); border:2px solid var(--crema); box-shadow:0 2px 6px rgba(30,20,8,0.35); transform:translate(-50%,-50%) translateY(var(--y,0px)); transition:transform 150ms linear; }
.alti-phase { font-family:var(--serif); font-style:italic; font-size:0.78rem; color:var(--tinta); white-space:nowrap; }

/* ═══════════ NAV ═══════════ */
#nav { position:fixed; top:0; left:0; right:0; z-index:100; display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 6vw; background:rgba(244,239,227,0); border-bottom:1px solid transparent; transition:background 400ms var(--ease), padding 400ms var(--ease), border-color 400ms ease-out, backdrop-filter 400ms ease-out; }
#nav.scrolled { padding:13px 6vw; background:rgba(244,239,227,0.92); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid rgba(36,28,18,0.1); }
.nav-brand { display:flex; align-items:center; gap:12px; text-decoration:none; }
.nav-logo { width:42px; height:auto; display:block; transition:transform 400ms var(--ease); }
.nav-brand:hover .nav-logo { transform:translateY(-2px) rotate(-5deg); }
.nav-brand-text { display:flex; flex-direction:column; gap:3px; }
.nav-brand-name { font-family:var(--serif); font-size:1.22rem; font-weight:500; letter-spacing:0.22em; color:var(--espresso); line-height:1; }
.nav-brand-sub { font-size:var(--fs-micro); font-weight:600; letter-spacing:0.34em; text-transform:uppercase; color:var(--oro-oscuro); line-height:1; }
.nav-links { display:flex; gap:30px; list-style:none; }
.nav-links a { text-decoration:none; color:var(--espresso); font-size:0.72rem; font-weight:500; letter-spacing:0.14em; text-transform:uppercase; opacity:0.72; transition:opacity 200ms ease-out, border-color 200ms ease-out; padding-bottom:5px; border-bottom:1px solid transparent; display:inline-block; }
.nav-links a:hover { opacity:1; border-bottom-color:var(--oro); }
.nav-links a.is-current { opacity:1; border-bottom-color:var(--oro); }
.nav-actions { display:flex; align-items:center; gap:14px; }

.cart-btn { position:relative; background:transparent; border:1px solid rgba(36,28,18,0.3); border-radius:2px; color:var(--espresso); width:42px; height:40px; display:inline-flex; align-items:center; justify-content:center; transition:border-color 200ms ease-out, background 200ms ease-out, transform 160ms var(--ease); }
.cart-btn:hover { border-color:var(--espresso); background:rgba(36,28,18,0.05); transform:translateY(-1px); }
.cart-count { position:absolute; top:-7px; right:-7px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:var(--siena); color:var(--crema); font-size:var(--fs-micro); font-weight:700; display:flex; align-items:center; justify-content:center; transition:transform 300ms var(--ease); }
.cart-count.pop { animation:badgePop 400ms var(--ease); }
.cart-count.empty { display:none; }

/* ═══════════ HERO ═══════════ */
.hero { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding:150px 6vw 90px; overflow:hidden; background:linear-gradient(180deg,rgba(245,240,227,0.5) 0%,rgba(237,228,206,0.42) 58%,rgba(227,216,188,0.4) 100%); }
.hero-glow { position:absolute; top:12%; left:26%; width:380px; height:380px; border-radius:50%; background:radial-gradient(circle, rgba(201,162,75,0.24) 0%, rgba(201,162,75,0.06) 45%, transparent 72%); pointer-events:none; }
.hero-inner { max-width:1360px; margin:0 auto; width:100%; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(420px,100%),1fr)); gap:clamp(48px,6vw,90px); align-items:center; position:relative; z-index:2; }
.hero-copy { max-width:560px; }
.eyebrow { display:inline-flex; align-items:center; gap:12px; font-size:var(--fs-meta); font-weight:600; letter-spacing:0.28em; text-transform:uppercase; color:#8A5A34; margin-bottom:28px; }
.eyebrow-line { width:26px; height:1px; background:rgba(160,82,47,0.5); display:inline-block; }
/* Tracking ligeramente negativo: a este tamaño la serif se siente más
   tallada, menos "default". Muy por encima del piso de -0.04em. */
.hero-title { font-family:var(--serif); font-weight:500; font-size:clamp(2.7rem,6vw,5rem); line-height:1.05; color:var(--espresso); margin-bottom:22px; letter-spacing:-0.012em; text-wrap:balance; }
.hero-title em { font-style:italic; color:var(--siena); }
.hero-sub { font-family:var(--serif); font-size:clamp(1.05rem,2vw,1.35rem); color:var(--tinta); margin-bottom:16px; line-height:1.6; max-width:460px; text-wrap:pretty; }
.hero-cta { display:flex; gap:14px; flex-wrap:wrap; }

.hero-frame { margin:0; position:relative; }
.hero-frame img { display:block; width:100%; height:auto; filter:drop-shadow(0 24px 30px rgba(50,38,18,0.3)); transition:transform 500ms var(--ease); }
.hero-frame:hover img { transform:translateY(-5px); }

/* ═══════════ MARQUEE ═══════════ */
.marquee { background:var(--espresso); overflow:hidden; padding:13px 0; }
.marquee-track { display:flex; align-items:center; gap:34px; width:max-content; animation:marquee 28s linear infinite; }
.marquee-track span { font-family:var(--cond); font-size:var(--fs-meta); font-weight:500; letter-spacing:0.24em; text-transform:uppercase; color:rgba(244,239,227,0.75); white-space:nowrap; }
.marquee-track i { color:var(--oro); font-style:normal; font-size:var(--fs-micro); }
.marquee:hover .marquee-track { animation-play-state:paused; }

/* ═══════════ BARRA DE CONFIANZA ═══════════ */
.trust { background:rgba(244,239,227,0.78); border-bottom:1px solid rgba(36,28,18,0.08); padding:26px 6vw; }
.trust-inner { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:22px; }
.trust-item { display:flex; align-items:flex-start; gap:13px; }
.trust-item svg { color:var(--verde); flex-shrink:0; margin-top:2px; }
.trust-item strong { display:block; font-size:0.78rem; font-weight:600; letter-spacing:0.03em; color:var(--espresso); }
.trust-item span { font-size:var(--fs-micro); color:var(--tinta); }
.marquee-track span.promo { color:var(--oro); font-weight:600; }

/* ═══════════ HISTORIA ═══════════ */
.valle { background:rgba(228,217,190,0.72); padding:100px 6vw 110px; }
.valle-inner { max-width:760px; margin:0 auto; text-align:center; }
.valle .h2 { margin-bottom:26px; }

/* ═══════════ RUTA ═══════════ */
.ruta { background:rgba(225,214,185,0.72); padding:110px 6vw; position:relative; overflow:hidden; }
.ruta-inner { max-width:1080px; margin:0 auto; position:relative; z-index:2; }
.ruta-header { text-align:center; margin-bottom:80px; }
.ruta-path { position:relative; max-width:720px; margin:0 auto; }
.ruta-line { position:absolute; left:50%; top:12px; bottom:12px; width:2px; background:linear-gradient(180deg,var(--oro) 0%,#96795A 35%,#55502A 65%,#1B1916 100%); transform:translateX(-50%); }
.ruta-stop { position:relative; display:grid; grid-template-columns:1fr 56px 1fr; align-items:center; padding:24px 0; }
.stop-info.right { grid-column:1; text-align:right; padding-right:26px; }
.stop-info.left { grid-column:3; text-align:left; padding-left:26px; }
.stop-alt { font-family:var(--cond); font-size:1.6rem; font-weight:500; color:var(--espresso); line-height:1; }
.stop-alt span { font-size:var(--fs-meta); color:var(--tinta); font-family:var(--sans); letter-spacing:0.1em; }
.stop-name { font-family:var(--serif); font-size:1.15rem; font-weight:500; letter-spacing:0.1em; text-transform:uppercase; margin-top:2px; }
.stop-desc { font-size:0.8rem; color:var(--tinta); line-height:1.5; margin-top:4px; }
.stop-zone { font-size:var(--fs-micro); letter-spacing:0.18em; text-transform:uppercase; color:var(--verde); }
.stop-dot { grid-column:2; width:15px; height:15px; border-radius:50%; background:#E1D6B9; border:2px solid var(--c); margin:0 auto; position:relative; z-index:2; transition:transform 250ms var(--ease), background 250ms ease-out; }
.ruta-stop:hover .stop-dot { transform:scale(1.5); background:var(--c); }

/* ═══════════ ZONAS ═══════════ */
.zonas { background:rgba(175,166,132,0.82); padding:100px 6vw 110px; }
.zonas-inner { max-width:1280px; margin:0 auto; }
.zonas-header { text-align:left; margin-bottom:48px; max-width:640px; }
.zonas .h2 em { color:var(--tinta); }
/* Grid fijo (3×2 en escritorio). Antes era flex con `transition:flex-grow`,
   que anima el layout en cada fotograma: se siente lento y da tirones.
   El hover ahora usa solo transform/box-shadow (GPU), fluido y rápido. */
.zones-row { display:grid; grid-template-columns:repeat(3,1fr); gap:2px; align-items:stretch; }
/* Cada zona conserva el color de su café, pero profundizado hacia el negro
   de marca: así las seis son un solo sistema y el texto crema cumple AA.
   Antes tonos 1 y 2 eran tan claros que las etiquetas no contrastaban. */
.zone { background:var(--zbg); background:color-mix(in srgb, var(--zbg) 70%, #14110D); padding:30px 26px 28px; position:relative; overflow:hidden; display:flex; flex-direction:column; min-height:232px; transition:transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.zone:hover, .zone:focus-within { transform:translateY(-4px); box-shadow:0 18px 34px rgba(18,12,6,0.32); z-index:2; }
.zone-num { font-family:var(--cond); font-size:3.6rem; font-weight:500; line-height:1; opacity:0.22; position:absolute; right:16px; top:12px; color:var(--crema); }
.zone-cat { font-size:var(--fs-micro); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; margin-bottom:10px; display:block; color:rgba(244,239,227,0.9); }
.zone h4 { font-family:var(--serif); font-size:1.14rem; font-weight:500; margin-bottom:8px; line-height:1.25; color:var(--crema); }
/* Texto siempre visible: antes se ocultaba hasta el hover, escondiendo el
   contenido y dependiendo de una interacción para leerse. */
.zone p { font-size:0.82rem; line-height:1.55; color:rgba(244,239,227,0.9); margin-bottom:16px; }
.zone-ref { font-size:0.72rem; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; margin-top:auto; align-self:flex-start; color:var(--crema); text-decoration:none; border-bottom:1px solid rgba(244,239,227,0.42); padding-bottom:3px; transition:border-color 200ms ease-out, gap 200ms ease-out; }
.zone-ref:hover { border-bottom-color:var(--crema); }

/* ═══════════ COLECCIÓN ═══════════ */
.coleccion { background:rgba(217,199,168,0.8); padding:110px 6vw 120px; }

/* ═══════════ BRÚJULA (quiz) ═══════════ */
.brujula { background:rgba(230,220,192,0.75); padding:100px 6vw; }
.brujula-inner { max-width:860px; margin:0 auto; text-align:center; }
.brujula-sub { font-family:var(--serif); font-size:1.08rem; color:var(--tinta); margin-top:14px; text-wrap:pretty; }
.quiz { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:18px; margin-top:44px; text-align:left; }
.quiz-label { font-size:var(--fs-micro); font-weight:600; letter-spacing:0.16em; text-transform:uppercase; color:var(--tinta); display:block; margin-bottom:12px; }
.quiz-opts { display:flex; flex-direction:column; gap:7px; }
.quiz-opts button { background:rgba(244,239,227,0.8); border:1px solid rgba(36,28,18,0.2); border-radius:2px; padding:12px 16px; font-size:0.8rem; color:var(--espresso); text-align:left; transition:border-color 200ms ease-out, background 200ms ease-out, transform 180ms var(--ease), box-shadow 200ms ease-out; }
.quiz-opts button:hover { border-color:var(--oro); transform:translateX(3px); }
.quiz-opts button.is-active { background:var(--espresso); border-color:var(--espresso); color:var(--crema); box-shadow:0 8px 18px rgba(36,28,18,0.25); }
.quiz-result { margin-top:36px; }
.qr-card { display:flex; align-items:center; gap:26px; text-align:left; background:var(--qbg,#241C12); border-radius:3px; padding:28px 32px; max-width:640px; margin:0 auto; box-shadow:0 24px 50px rgba(30,20,8,0.3); animation:enterUp 500ms var(--ease); flex-wrap:wrap; }
.qr-card img { width:96px; height:auto; flex-shrink:0; filter:drop-shadow(0 10px 16px rgba(0,0,0,0.4)); }
.qr-body { flex:1; min-width:220px; }
.qr-kicker { font-size:var(--fs-micro); letter-spacing:0.24em; text-transform:uppercase; color:var(--qaccent,#C9A24B); display:block; margin-bottom:6px; }
.qr-card h3 { font-family:var(--cond); font-size:1.6rem; font-weight:600; text-transform:uppercase; color:var(--qtitle,#F4EFE3); line-height:1; margin-bottom:4px; text-wrap:balance; }
.qr-quote { font-family:var(--serif); font-style:italic; font-size:0.95rem; color:var(--qaccent,#C9A24B); margin-bottom:14px; }
.qr-actions { display:flex; gap:10px; flex-wrap:wrap; }
.qr-actions .btn { padding:11px 20px; font-size:var(--fs-meta); }
.qr-ghost { background:transparent; color:var(--qtitle,#F4EFE3); border:1px solid rgba(244,239,227,0.4); }
.qr-ghost:hover { background:rgba(244,239,227,0.12); border-color:var(--qtitle,#F4EFE3); }

/* Resaltado del producto recomendado */
@keyframes prodPulse { 0%,100%{box-shadow:0 0 0 0 rgba(201,162,75,0)} 30%{box-shadow:0 0 0 6px rgba(201,162,75,0.55)} 60%{box-shadow:0 0 0 3px rgba(201,162,75,0.3)} }
.product.highlight { animation:prodPulse 1.8s ease-out 2; }
.col-header { text-align:left; max-width:1280px; margin:0 auto 56px; padding-top:8px; border-top:2px solid rgba(36,28,18,0.55); }
.col-header .kicker { margin-top:18px; }
.col-sub { font-family:var(--serif); font-size:1.1rem; color:var(--tinta); margin-top:14px; max-width:52ch; text-wrap:pretty; }
.products { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(370px,100%),1fr)); gap:2px; max-width:1280px; margin:0 auto; }

/* scroll-margin: el nav es fijo; sin esto el ancla del enlace de zona
   aterriza tapada por la barra. */
.product { background:var(--pbg); border:1px solid var(--pborder); padding:36px 26px 30px 32px; position:relative; overflow:hidden; display:flex; flex-direction:column; scroll-margin-top:96px; transition:transform 320ms var(--ease), box-shadow 320ms var(--ease); }
.product:hover { transform:translateY(-5px); box-shadow:0 24px 44px rgba(40,30,15,0.22); }
.product-top { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
.alt-marker { position:relative; display:inline-block; width:8px; height:26px; }
.alt-marker::before { content:''; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--pline); transform:translateX(-50%); }
.alt-marker::after { content:''; position:absolute; left:50%; top:var(--dotpos,100%); width:6px; height:6px; border-radius:50%; background:var(--paccent); transform:translate(-50%,-50%); box-shadow:0 0 0 2px var(--pbg); }
.product-alt { font-family:var(--cond); font-size:0.78rem; font-weight:500; letter-spacing:0.05em; color:var(--ptitle); }
.product-zone { margin-left:auto; font-size:var(--fs-micro); letter-spacing:0.14em; text-transform:uppercase; color:var(--pmut); border:1px solid var(--pborder2); padding:4px 9px; border-radius:1px; }
.product-body { display:flex; gap:10px; flex:1; }
.product-info { flex:1.35; min-width:0; display:flex; flex-direction:column; }
.product h3 { font-family:var(--cond); font-weight:600; text-transform:uppercase; letter-spacing:0.01em; font-size:clamp(1.5rem,2vw,1.85rem); color:var(--ptitle); margin-bottom:5px; line-height:1; text-wrap:balance; }
.product-tag { font-size:var(--fs-micro); letter-spacing:0.16em; text-transform:uppercase; color:var(--paccent); margin-bottom:12px; display:block; }
.product-quote { font-family:var(--serif); font-size:1.12rem; font-style:italic; color:var(--pmut); margin-bottom:12px; line-height:1.4; }
.product-desc { font-size:0.92rem; line-height:1.6; color:var(--ptext); margin-bottom:16px; text-wrap:pretty; }
.product-notes { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
/* Método de preparación + variedades, tomados de la ficha oficial del café */
.product-spec { display:flex; flex-wrap:wrap; gap:10px 22px; margin-bottom:18px; padding-top:14px; border-top:1px solid var(--pborder2); }
.product-spec span { display:flex; flex-direction:column; gap:3px; font-size:0.82rem; color:var(--ptext); }
.product-spec i { font-style:normal; font-size:var(--fs-meta); letter-spacing:0.14em; text-transform:uppercase; color:var(--pmut); font-weight:600; }
.note-tag { font-size:var(--fs-micro); letter-spacing:0.06em; text-transform:uppercase; border:1px solid var(--pborder2); color:var(--ptext); padding:5px 10px; border-radius:1px; transition:background 200ms ease-out, color 200ms ease-out; }
.product:hover .note-tag { border-color:var(--paccent); }
.roast { display:flex; align-items:center; gap:8px; margin-bottom:20px; }
.roast-label { font-size:var(--fs-micro); letter-spacing:0.14em; text-transform:uppercase; color:var(--pmut); }
.roast-dots { display:flex; gap:4px; }
.roast-dot { width:7px; height:7px; border-radius:50%; border:1px solid var(--paccent); }
.roast-dot.on { background:var(--paccent); }
.product-visual { flex:1; position:relative; display:flex; align-items:flex-end; justify-content:center; min-width:120px; }
.product-bag { width:100%; max-width:178px; height:auto; display:block; filter:drop-shadow(0 16px 22px rgba(25,18,10,0.32)); transition:transform 400ms var(--ease); }
.product:hover .product-bag { transform:scale(1.03) translateY(-4px); }

/* Selector de compra */
.buy { border-top:1px solid var(--pborder2); padding-top:18px; margin-top:auto; }
.buy-label { font-size:var(--fs-micro); letter-spacing:0.22em; text-transform:uppercase; color:var(--pmut); margin-bottom:12px; display:block; }
.size-row { display:flex; gap:6px; margin-bottom:12px; }
.size-opt { flex:1; background:transparent; border:1px solid var(--pborder2); border-radius:1px; padding:9px 4px 7px; display:flex; flex-direction:column; gap:3px; align-items:center; color:var(--ptext); transition:border-color 200ms ease-out, background 200ms ease-out, transform 160ms var(--ease); }
.size-opt small { font-size:var(--fs-micro); letter-spacing:0.1em; text-transform:uppercase; opacity:0.75; }
.size-opt strong { font-family:var(--cond); font-size:1rem; font-weight:500; line-height:1; }
.size-opt:hover { border-color:var(--paccent); transform:translateY(-1px); }
.size-opt.is-active { background:var(--paccent); border-color:var(--paccent); color:var(--pbg); }
.grind-qty { display:flex; gap:6px; align-items:stretch; margin-bottom:14px; }
.grind { flex:1; display:flex; border:1px solid var(--pborder2); border-radius:1px; overflow:hidden; }
.grind-opt { flex:1; background:transparent; border:none; padding:8px 4px; font-size:var(--fs-micro); letter-spacing:0.08em; text-transform:uppercase; color:var(--ptext); transition:background 200ms ease-out, color 200ms ease-out; }
.grind-opt.is-active { background:var(--ptitle); color:var(--pbg); }
.qty { display:flex; align-items:center; border:1px solid var(--pborder2); border-radius:1px; }
.qty button { background:transparent; border:none; color:var(--ptext); width:30px; height:100%; font-size:0.95rem; transition:background 160ms ease-out, transform 120ms var(--ease); }
.qty button:hover { background:var(--pborder2); }
.qty button:active { transform:scale(0.88); }
.qty output { min-width:26px; text-align:center; font-family:var(--cond); font-size:0.9rem; color:var(--ptitle); }
.add-btn { width:100%; background:var(--ptitle); color:var(--pbg); border:none; border-radius:1px; padding:13px 10px; font-size:var(--fs-meta); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; display:inline-flex; align-items:center; justify-content:center; gap:9px; transition:background 200ms ease-out, transform 160ms var(--ease), box-shadow 200ms ease-out; }
.add-btn:hover { transform:translateY(-2px); box-shadow:0 8px 16px rgba(20,15,8,0.25); }
.add-btn:active { transform:scale(0.97); }
.add-btn .price-preview { font-family:var(--cond); font-weight:500; letter-spacing:0.04em; }
.add-btn.added { background:var(--verde); color:var(--crema); }
.bulk-row { display:flex; align-items:center; justify-content:space-between; margin-top:12px; padding-top:10px; border-top:1px solid var(--pborder2); }
.bulk-row span { font-size:var(--fs-micro); letter-spacing:0.14em; text-transform:uppercase; color:var(--paccent); }
.bulk-row strong { font-family:var(--cond); font-size:0.92rem; font-weight:500; color:var(--paccent); }

/* Badge de producto */
.prod-badge { position:absolute; top:0; left:0; z-index:3; background:var(--oro); color:var(--espresso); font-size:var(--fs-micro); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:6px 14px; border-radius:0 0 2px 0; }

/* ═══════════ KIT ASCENSO ═══════════ */
.kit { max-width:1280px; margin:2px auto 0; background:var(--espresso); border-radius:3px; padding:38px 40px; display:flex; align-items:center; gap:38px; flex-wrap:wrap; position:relative; overflow:hidden; }
.kit::before { content:''; position:absolute; inset:0; background:radial-gradient(circle at 85% 20%, rgba(201,162,75,0.15) 0%, transparent 55%); pointer-events:none; }
.kit-photo { margin:0; flex-shrink:0; width:min(340px,100%); }
.kit-photo img { display:block; width:100%; height:auto; filter:drop-shadow(0 14px 22px rgba(0,0,0,0.55)); transition:transform 400ms var(--ease); }
.kit:hover .kit-photo img { transform:translateY(-4px); }
.kit-info { flex:1; min-width:260px; position:relative; }
.kit-badge { display:inline-block; background:var(--oro); color:var(--espresso); font-size:var(--fs-micro); font-weight:700; letter-spacing:0.14em; text-transform:uppercase; padding:5px 12px; border-radius:2px; margin-bottom:12px; }
.kit-info h3 { font-family:var(--cond); font-size:1.6rem; font-weight:600; text-transform:uppercase; color:var(--crema); line-height:1.05; margin-bottom:8px; text-wrap:balance; }
.kit-info p { font-size:0.85rem; color:rgba(244,239,227,0.7); line-height:1.6; max-width:430px; margin-bottom:14px; text-wrap:pretty; }
.kit-price { display:flex; align-items:baseline; gap:12px; }
.kit-price s { font-family:var(--cond); font-size:1.05rem; color:rgba(244,239,227,0.62); }
.kit-price strong { font-family:var(--cond); font-size:2rem; font-weight:500; color:var(--oro); line-height:1; }
.kit-price span { font-size:var(--fs-meta); letter-spacing:0.12em; text-transform:uppercase; color:rgba(244,239,227,0.5); }
.kit-buy { display:flex; flex-direction:column; gap:12px; min-width:200px; position:relative; }
.kit-grind { border-color:rgba(244,239,227,0.3); }
.kit-grind .grind-opt { color:rgba(244,239,227,0.7); padding:10px 4px; }
.kit-grind .grind-opt.is-active { background:var(--crema); color:var(--espresso); }

/* ═══════════ TESTIMONIOS (asimétrico: 1 destacado + 2 apilados) ═══════════ */
.voces { background:rgba(217,199,168,0.78); padding:100px 6vw; }
.voces-inner { max-width:1100px; margin:0 auto; }
.voces-header { text-align:left; margin-bottom:40px; }
.voces-grid { display:grid; grid-template-columns:1.4fr 1fr; gap:18px; align-items:stretch; }
.voces-side { display:flex; flex-direction:column; gap:18px; }
.voces-side .voz { flex:1; }
.voz { background:var(--crema); border:1px solid rgba(36,28,18,0.12); border-radius:3px; padding:30px 28px; margin:0; transition:transform 280ms var(--ease), box-shadow 280ms ease-out; }
.voz:hover { transform:translateY(-4px); box-shadow:0 18px 36px rgba(50,38,18,0.16); }
.voz.voz-featured { display:flex; flex-direction:column; justify-content:center; padding:44px 42px; background:var(--espresso); border-color:transparent; }
.voz.voz-featured blockquote { font-size:1.45rem; color:var(--crema); }
.voz.voz-featured figcaption { color:rgba(217,199,168,0.7); }
.voz.voz-featured figcaption strong { color:var(--crema); }
.voz-stars { color:var(--oro-oscuro); font-size:0.85rem; letter-spacing:0.2em; display:block; margin-bottom:14px; }
.voz-featured .voz-stars { color:var(--oro); }
.voz blockquote { font-family:var(--serif); font-style:italic; font-size:1.02rem; color:var(--espresso); line-height:1.55; margin-bottom:16px; }
.voz figcaption { font-size:0.72rem; color:var(--tinta); letter-spacing:0.04em; }
.voz figcaption strong { color:var(--espresso); font-weight:600; }

/* ═══════════ CLUB DE LA CIMA ═══════════ */
.club { background:rgba(50,60,34,0.93); padding:70px 6vw; }
.club-inner { max-width:1100px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:32px; flex-wrap:wrap; }
.cream-h { color:var(--crema); }
.club-copy p { font-size:0.9rem; color:rgba(244,239,227,0.65); line-height:1.7; max-width:480px; margin-top:14px; }

/* ═══════════ WHATSAPP FLOTANTE ═══════════ */
.wa-fab { position:fixed; bottom:24px; right:24px; z-index:150; width:56px; height:56px; border-radius:50%; border:none; background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(11,59,30,0.4); transition:transform 220ms var(--ease), box-shadow 220ms ease-out; }
.wa-fab:hover { transform:translateY(-3px) scale(1.06); box-shadow:0 16px 34px rgba(11,59,30,0.5); }
.wa-fab:active { transform:scale(0.94); }

/* ═══════════ PROMO EN CARRITO ═══════════ */
.promo-box { margin-bottom:14px; }
.promo-form { display:flex; gap:8px; }
.promo-form input { flex:1; background:rgba(255,255,255,0.6); border:1px solid rgba(36,28,18,0.22); border-radius:2px; padding:10px 12px; font-family:var(--sans); font-size:0.78rem; letter-spacing:0.06em; text-transform:uppercase; color:var(--espresso); outline:none; transition:border-color 200ms ease-out; }
.promo-form input:focus { border-color:var(--oro); }
.promo-apply { background:var(--espresso); color:var(--crema); border:none; border-radius:2px; padding:10px 16px; font-size:var(--fs-meta); font-weight:600; letter-spacing:0.12em; text-transform:uppercase; transition:background 200ms ease-out; }
.promo-apply:hover { background:#3A2E1E; }
.promo-chip { display:flex; align-items:center; justify-content:space-between; background:rgba(74,85,50,0.12); border:1px dashed var(--verde); border-radius:2px; padding:9px 14px; }
.promo-chip span { font-size:0.72rem; font-weight:600; letter-spacing:0.08em; color:var(--verde); }
.promo-chip button { background:none; border:none; color:var(--tinta); font-size:var(--fs-meta); letter-spacing:0.08em; text-transform:uppercase; text-decoration:underline; text-underline-offset:3px; }
.promo-chip button:hover { color:var(--siena); }
.cart-total-row.discount { color:var(--verde); }
.cart-total-row.discount em { font-style:normal; font-size:var(--fs-meta); letter-spacing:0.08em; }

.mayoreo-note { max-width:1280px; margin:0 auto; padding:30px 0 0; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.mayoreo-left { font-size:var(--fs-micro); letter-spacing:0.18em; text-transform:uppercase; color:rgba(36,28,18,0.72); }
.mayoreo-right { font-size:0.8rem; color:rgba(36,28,18,0.78); }
.mayoreo-right strong { color:var(--verde); font-weight:600; }

/* ═══════════ PRESENTACIONES ═══════════ */
.pres { background:rgba(217,199,168,0.8); padding:20px 6vw 110px; }
.pres-header { max-width:1100px; margin:0 auto 56px; }
.pres-sub { font-size:0.95rem; color:var(--tinta); line-height:1.7; max-width:520px; margin-top:14px; text-wrap:pretty; }
.pres-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:rgba(74,54,35,0.14); max-width:1100px; margin:0 auto; }
.pres-card { background:#E4D8C0; padding:38px 30px; transition:background 260ms ease-out, transform 260ms var(--ease); }
.pres-card:hover { background:var(--crema); transform:translateY(-3px); }
.pres-card svg { margin-bottom:18px; display:block; }
.pres-card h4 { font-family:var(--serif); font-size:1.15rem; font-weight:500; margin-bottom:8px; }
.pres-card p { font-size:0.9rem; color:var(--tinta); line-height:1.65; text-wrap:pretty; }

/* ═══════════ PEDIDO ═══════════ */
.pedido { padding:120px 6vw; text-align:center; position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(217,199,168,0.8) 0%,rgba(169,155,110,0.82) 55%,rgba(74,85,50,0.9) 100%); }
.pedido-inner { position:relative; z-index:2; }
.pedido-sub { font-size:1rem; color:#4A3F2A; margin:0 auto 44px; max-width:500px; line-height:1.7; text-wrap:pretty; }
.pay-methods { background:rgba(244,239,227,0.88); backdrop-filter:blur(4px); border:1px solid rgba(74,85,50,0.3); padding:22px 30px 26px; max-width:560px; margin:0 auto 44px; border-radius:2px; }
.pay-title { font-size:var(--fs-micro); letter-spacing:0.24em; text-transform:uppercase; color:var(--verde); font-weight:600; display:block; margin-bottom:16px; }
.pay-row { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.pay-chip { display:inline-flex; align-items:center; gap:8px; font-size:0.72rem; font-weight:500; color:var(--espresso); border:1px solid rgba(36,28,18,0.25); padding:9px 16px; border-radius:2px; background:rgba(255,255,255,0.35); transition:border-color 200ms ease-out, transform 200ms var(--ease); }
.pay-chip:hover { border-color:var(--verde); transform:translateY(-2px); }
.pay-chip svg { color:var(--verde); }
.pedido-cards { display:flex; justify-content:center; gap:16px; flex-wrap:wrap; margin-bottom:44px; }
.ped-card { background:rgba(244,239,227,0.85); border:1px solid rgba(74,85,50,0.2); padding:26px 34px; min-width:170px; border-radius:2px; text-align:left; text-decoration:none; color:var(--verde); transition:border-color 220ms ease-out, transform 220ms var(--ease), box-shadow 220ms ease-out; }
.ped-card:hover { border-color:var(--verde); transform:translateY(-3px); box-shadow:0 12px 24px rgba(30,35,15,0.15); }
.ped-card svg { display:block; margin-bottom:10px; }
.ped-card h4 { font-family:var(--serif); font-size:1.05rem; font-weight:500; color:var(--espresso); margin-bottom:4px; }
.ped-card p { font-size:0.78rem; color:var(--tinta); }
.pedido-cta { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* ═══════════ FOOTER ═══════════ */
footer { background:var(--espresso); padding:56px 6vw 40px; }
.footer-top { max-width:1200px; margin:0 auto 36px; display:flex; justify-content:space-between; align-items:flex-start; flex-wrap:wrap; gap:32px; }
.footer-logo-row { display:flex; align-items:center; gap:12px; margin-bottom:12px; }
.footer-logo-row img { width:50px; }
.footer-logo-row span { font-family:var(--serif); font-size:1.3rem; font-weight:500; letter-spacing:0.2em; color:var(--crema); }
.footer-tag { font-family:var(--serif); font-size:0.95rem; font-style:italic; color:var(--kraft); }
.footer-cols { display:flex; gap:56px; flex-wrap:wrap; }
.footer-cols h5 { font-size:var(--fs-meta); letter-spacing:0.2em; text-transform:uppercase; color:var(--oro); margin-bottom:14px; }
.footer-cols a, .footer-cols span { display:block; font-size:0.82rem; color:rgba(217,199,168,0.72); text-decoration:none; margin-bottom:8px; transition:color 200ms ease-out, transform 200ms var(--ease); }
.footer-cols a:hover { color:var(--crema); transform:translateX(3px); }
.footer-bottom { max-width:1200px; margin:0 auto; padding-top:28px; border-top:1px solid rgba(217,199,168,0.1); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; }
.footer-bottom p { font-size:var(--fs-micro); color:rgba(217,199,168,0.62); letter-spacing:0.06em; }

/* ═══════════ OVERLAY / DRAWER ═══════════ */
.overlay { position:fixed; inset:0; background:rgba(24,18,10,0.45); backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity 320ms ease-out; z-index:200; }
.overlay.is-open { opacity:1; pointer-events:auto; }

.cart-drawer { position:fixed; top:0; right:0; bottom:0; width:min(430px,100vw); background:var(--crema); z-index:210; display:flex; flex-direction:column; transform:translateX(103%); transition:transform 420ms var(--ease); box-shadow:-18px 0 50px rgba(20,14,6,0.25); }
.cart-drawer.is-open { transform:translateX(0); }
.cart-head { display:flex; align-items:flex-start; justify-content:space-between; padding:26px 28px 20px; border-bottom:1px solid rgba(36,28,18,0.12); }
.cart-head h3 { font-family:var(--serif); font-size:1.5rem; font-weight:500; }
.cart-head-sub { font-size:var(--fs-meta); letter-spacing:0.16em; text-transform:uppercase; color:var(--verde); }
.cart-items { flex:1; overflow-y:auto; padding:10px 28px; }
.cart-item { display:flex; gap:14px; padding:18px 0; border-bottom:1px solid rgba(36,28,18,0.1); animation:enterUp 400ms var(--ease); }
.cart-item-img { width:56px; height:78px; flex-shrink:0; align-self:center; border-radius:3px; background:var(--ibg, #EFE8D8); padding:6px 8px; }
.cart-item-img img { width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 4px 6px rgba(20,15,8,0.3)); }
.cart-item-info { flex:1; min-width:0; }
.cart-item-name { font-family:var(--cond); font-size:0.95rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; }
.cart-item-meta { font-size:var(--fs-meta); color:var(--tinta); margin-top:2px; letter-spacing:0.04em; }
.cart-item-controls { display:flex; align-items:center; gap:10px; margin-top:10px; }
.cart-item-controls .qty { border-color:rgba(36,28,18,0.2); height:28px; }
.cart-item-controls .qty button { color:var(--espresso); width:26px; }
.cart-item-controls .qty output { color:var(--espresso); font-size:0.82rem; }
.remove-btn { background:none; border:none; font-size:var(--fs-micro); letter-spacing:0.1em; text-transform:uppercase; color:rgba(36,28,18,0.45); text-decoration:underline; text-underline-offset:3px; transition:color 180ms ease-out; }
.remove-btn:hover { color:var(--siena); }
.cart-item-price { font-family:var(--cond); font-size:1rem; align-self:center; white-space:nowrap; }
.cart-empty { flex:1; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; padding:40px; text-align:center; }
.cart-empty img { width:56px; opacity:0.5; }
.cart-empty p { font-family:var(--serif); font-size:1.15rem; color:var(--tinta); }
.cart-drawer.empty .cart-empty { display:flex; }
.cart-drawer.empty .cart-items, .cart-drawer.empty .cart-foot { display:none; }
.cart-foot { padding:20px 28px 26px; border-top:1px solid rgba(36,28,18,0.12); background:#EFE8D8; }
.cart-total-row { display:flex; justify-content:space-between; font-size:0.8rem; margin-bottom:8px; color:var(--espresso); }
.cart-total-row.muted { color:rgba(36,28,18,0.5); }
.cart-total-row.grand { font-size:1rem; font-weight:600; padding-top:10px; margin:4px 0 16px; border-top:1px solid rgba(36,28,18,0.15); }
.cart-total-row.grand strong { font-family:var(--cond); font-size:1.35rem; font-weight:500; }

/* ═══════════ CHECKOUT MODAL ═══════════ */
.modal { position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; padding:18px; background:rgba(24,18,10,0.55); backdrop-filter:blur(5px); opacity:0; pointer-events:none; transition:opacity 300ms ease-out; }
.modal.is-open { opacity:1; pointer-events:auto; }
.modal-card { background:var(--crema); width:min(600px,100%); max-height:92vh; overflow-y:auto; border-radius:3px; padding:26px 32px 30px; transform:translateY(24px) scale(0.98); transition:transform 380ms var(--ease); box-shadow:0 40px 90px rgba(15,10,4,0.4); }
.modal.is-open .modal-card { transform:translateY(0) scale(1); }
.modal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; }
.steps { display:flex; align-items:center; gap:10px; }
.step { display:inline-flex; align-items:center; gap:7px; font-size:var(--fs-meta); letter-spacing:0.1em; text-transform:uppercase; color:rgba(36,28,18,0.66); transition:color 250ms ease-out; }
.step i { font-style:normal; width:20px; height:20px; border-radius:50%; border:1px solid rgba(36,28,18,0.3); display:inline-flex; align-items:center; justify-content:center; font-size:var(--fs-micro); transition:background 250ms ease-out, color 250ms ease-out, border-color 250ms ease-out; }
.step.is-active { color:var(--espresso); }
.step.is-active i { background:var(--espresso); color:var(--crema); border-color:var(--espresso); }
.step.is-done i { background:var(--verde); color:var(--crema); border-color:var(--verde); }
.step-bar { width:22px; height:1px; background:rgba(36,28,18,0.25); }
.modal-title { font-family:var(--serif); font-size:1.55rem; font-weight:500; margin-bottom:20px; }
.modal-title.center { text-align:center; }

.step-panel { display:none; }
.step-panel.is-active { display:block; animation:enterUp 350ms var(--ease); }

.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.field { display:flex; flex-direction:column; gap:6px; }
.field.full { grid-column:1/-1; }
.field span { font-size:var(--fs-micro); letter-spacing:0.14em; text-transform:uppercase; color:var(--tinta); font-weight:600; }
.field input, .field textarea { background:rgba(255,255,255,0.55); border:1px solid rgba(36,28,18,0.22); border-radius:2px; padding:12px 14px; font-family:var(--sans); font-size:0.9rem; color:var(--espresso); outline:none; transition:border-color 200ms ease-out, box-shadow 200ms ease-out, background 200ms ease-out; resize:vertical; }
.field input:focus, .field textarea:focus { border-color:var(--oro); box-shadow:0 0 0 3px rgba(201,162,75,0.18); background:#fff; }
.field input.invalid { border-color:#B3401E; box-shadow:0 0 0 3px rgba(179,64,30,0.12); }

.seg { display:flex; border:1px solid rgba(36,28,18,0.22); border-radius:2px; overflow:hidden; }
.seg-opt { flex:1; background:transparent; border:none; padding:12px 10px; font-size:var(--fs-micro); letter-spacing:0.04em; color:var(--tinta); transition:background 220ms ease-out, color 220ms ease-out; }
.seg-opt.is-active { background:var(--espresso); color:var(--crema); }

.form-error { color:#B3401E; font-size:0.76rem; min-height:1.2em; margin-top:12px; }
.modal-actions { display:flex; align-items:center; justify-content:space-between; margin-top:18px; }

.pay-options { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:18px; }
.pay-opt { background:rgba(255,255,255,0.4); border:1px solid rgba(36,28,18,0.2); border-radius:2px; padding:14px 10px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--espresso); transition:border-color 220ms ease-out, background 220ms ease-out, transform 200ms var(--ease), box-shadow 220ms ease-out; }
.pay-opt svg { color:var(--tinta); margin-bottom:3px; transition:color 220ms ease-out; }
.pay-opt span { font-size:0.72rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; }
.pay-opt small { font-size:var(--fs-meta); color:var(--tinta); }
.pay-opt:hover { transform:translateY(-2px); border-color:var(--oro); }
.pay-opt.is-active { background:var(--espresso); border-color:var(--espresso); color:var(--crema); box-shadow:0 10px 22px rgba(36,28,18,0.28); }
.pay-opt.is-active svg, .pay-opt.is-active small { color:var(--oro); }

.pay-panel { display:none; }
.pay-panel.is-active { display:block; animation:enterUp 320ms var(--ease); }
.pay-note { font-size:0.74rem; color:var(--tinta); margin-top:12px; line-height:1.55; }
.spei-box { border:1px solid rgba(36,28,18,0.2); border-radius:2px; background:rgba(255,255,255,0.45); padding:6px 18px; }
.spei-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid rgba(36,28,18,0.1); }
.spei-row:last-child { border-bottom:none; }
.spei-row span { font-size:var(--fs-micro); letter-spacing:0.12em; text-transform:uppercase; color:var(--tinta); min-width:92px; }
.spei-row strong { font-size:0.9rem; font-weight:600; }
.spei-row .mono { font-family:var(--cond); letter-spacing:0.06em; font-weight:500; }
.copy-btn { margin-left:auto; background:var(--espresso); color:var(--crema); border:none; border-radius:2px; font-size:var(--fs-micro); letter-spacing:0.1em; text-transform:uppercase; padding:7px 12px; transition:background 200ms ease-out, transform 160ms var(--ease); }
.copy-btn:hover { background:#3A2E1E; }
.copy-btn:active { transform:scale(0.95); }
.copy-btn.copied { background:var(--verde); }

.summary { border:1px solid rgba(36,28,18,0.18); border-radius:2px; background:rgba(255,255,255,0.4); padding:18px 20px; }
.sum-item { display:flex; justify-content:space-between; gap:10px; font-size:0.84rem; padding:7px 0; }
.sum-item .sum-name { font-weight:600; }
.sum-item .sum-meta { color:var(--tinta); font-size:0.74rem; }
.sum-item strong { font-family:var(--cond); font-weight:500; }
.sum-div { border-top:1px solid rgba(36,28,18,0.14); margin:10px 0; }
.sum-row { display:flex; justify-content:space-between; font-size:0.8rem; padding:4px 0; color:var(--tinta); }
.sum-row.grand { color:var(--espresso); font-weight:600; font-size:0.95rem; }
.sum-row.grand strong { font-family:var(--cond); font-size:1.3rem; font-weight:500; }

.success { text-align:center; padding:10px 0 4px; }
.success-check { width:74px; margin:0 auto 18px; }
.success-check svg { width:74px; height:74px; }
.check-circle { stroke:var(--verde); stroke-width:2; stroke-dasharray:160; stroke-dashoffset:160; animation:checkCircle 700ms var(--ease) forwards; }
.check-mark { stroke:var(--verde); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:40; stroke-dashoffset:40; animation:checkMark 450ms var(--ease) 500ms forwards; }
.success-id { font-size:0.82rem; color:var(--tinta); margin-bottom:6px; }
.success-id strong { font-family:var(--cond); color:var(--espresso); letter-spacing:0.06em; }
.success-note { font-size:0.85rem; color:var(--tinta); max-width:340px; margin:0 auto 24px; line-height:1.6; }
.success-actions { display:flex; flex-direction:column; gap:10px; max-width:340px; margin:0 auto; }

/* ═══════════ TOAST ═══════════ */
.toast { position:fixed; bottom:26px; left:50%; transform:translate(-50%,14px); background:var(--espresso); color:var(--crema); font-size:0.78rem; letter-spacing:0.04em; padding:13px 22px; border-radius:2px; box-shadow:0 14px 34px rgba(15,10,4,0.35); opacity:0; pointer-events:none; z-index:400; display:flex; align-items:center; gap:10px; }
.toast.show { animation:toastIn 320ms var(--ease) forwards; }
.toast em { font-style:normal; color:var(--oro); }

/* ═══════════ RESPONSIVE ═══════════ */
@media (max-width: 880px) {
  .nav-links { display:none; }
  .hero { padding-top:120px; }
  .altimeter { display:none; }
  .kit { padding:30px 24px; }
  .kit-photo { width:100%; }
  .club-inner { flex-direction:column; align-items:flex-start; }
  .qr-card { padding:24px 22px; }
  .voces-grid { grid-template-columns:1fr; }
  .voz-featured { padding:32px 28px; }
  .voz-featured blockquote { font-size:1.15rem; }
  .peak-far { width:78vw; }
  .ruta-stop { grid-template-columns:1fr 40px 1fr; }
  .zones-row { grid-template-columns:repeat(2,1fr); }
  .pay-options { grid-template-columns:1fr; }
  .form-grid { grid-template-columns:1fr; }
  .modal-card { padding:22px 20px 24px; }
  .step span, .step { font-size:var(--fs-micro); }
  .footer-top { flex-direction:column; }
}
@media (max-width: 520px) {
  .zones-row { grid-template-columns:1fr; }
  .btn-nav { padding:9px 13px; font-size:var(--fs-micro); letter-spacing:0.06em; }
  .hero-cta .btn { width:100%; }
  .product { padding:28px 18px 24px 22px; }
  .product-visual { min-width:88px; }
  .pedido-cards .ped-card { width:100%; }
  .grind-qty { flex-direction:column; }
  .qty { justify-content:center; }
  .qty button { height:34px; }
  .qty output { padding:8px 0; }
}

/* Enlace de Aviso de Privacidad en el pie */
.footer-bottom a { color:inherit; text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(201,162,75,0.55); transition:color .2s ease; }
.footer-bottom a:hover { color:var(--oro); }

/* Badge de disponibilidad "Bajo pedido" (café que se prepara por encargo) */
.prod-badge--order { background:var(--espresso); color:var(--crema); font-weight:600; letter-spacing:0.12em; box-shadow:inset 0 0 0 1px rgba(201,162,75,0.45); }