/* ══════════════════════════════════════════════
   SNACKIVA™ — GLOBAL STYLESHEET
   Palette: Green #3D7A1F · Gold #E8A800 · Red #C0221A
   ══════════════════════════════════════════════ */

:root {
  --green:     #3D7A1F;
  --green-dk:  #2A5610;
  --green-md:  #4E9A28;
  --green-lt:  #7DC44A;
  --gold:      #E8A800;
  --gold-lt:   #F5C842;
  --gold-pale: #FFF3B0;
  --red:       #C0221A;
  --cream:     #FFFBF0;
  --warm:      #FFF5DC;
  --dark:      #1A2410;
  --text:      #242D14;
  --soft:      #5a6648;
  --fdisp:   'Playfair Display', Georgia, serif;
  --fscript: 'Dancing Script', cursive;
  --fbody:   'Lato', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--fbody); background:var(--cream); color:var(--text); overflow-x:hidden; line-height:1.7; }
img  { max-width:100%; display:block; }
a    { text-decoration:none; color:inherit; }

/* grain overlay */
body::after {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:9000; opacity:.022;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── NAV ── */
#nav { position:fixed; top:0; left:0; right:0; z-index:500; transition:background .4s, box-shadow .4s; }
#nav.scrolled { background:rgba(255,251,240,.96); backdrop-filter:blur(20px); box-shadow:0 2px 40px rgba(42,86,16,.10); }
.nav-inner { max-width:1180px; margin:0 auto; padding:0 2rem; height:130px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { margin-top:10px; flex-shrink:0; }
.nav-logo img { height:120px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.25)); transition:transform .3s; }
.nav-logo:hover img { transform:scale(1.04); }
.nav-links { display:flex; align-items:center; gap:1.2rem; }
.nav-links a { font-family:var(--fbody); font-weight:700; font-size:.82rem; letter-spacing:.07em; text-transform:uppercase; color:white; opacity:.88; transition:opacity .2s,color .2s; position:relative; }
#nav.scrolled .nav-links a { color:var(--text); }
.nav-links a::after { content:''; position:absolute; bottom:-3px; left:0; right:0; height:2px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.nav-links a:hover::after, .nav-links a.active::after { transform:scaleX(1); }
.nav-links a:hover { opacity:1; }
.nav-cta { background:var(--green) !important; color:white !important; padding:9px 20px !important; border-radius:999px !important; opacity:1 !important; box-shadow:0 4px 16px rgba(42,86,16,.35) !important; }
.nav-cta::after { display:none !important; }
.nav-cta:hover { transform:translateY(-2px); }
.nav-cta-ghost { background:transparent !important; color:rgba(255,255,255,.7) !important; border:1.5px solid rgba(255,255,255,.3) !important; padding:7px 16px !important; border-radius:999px !important; opacity:1 !important; font-size:.78rem !important; }
.nav-cta-ghost:hover { color:white !important; border-color:rgba(255,255,255,.6) !important; transform:none; }
#nav.scrolled .nav-cta-ghost { color:var(--text) !important; border-color:rgba(42,86,16,.35) !important; }
#nav.scrolled .nav-cta-ghost:hover { color:var(--green-dk) !important; border-color:var(--green) !important; }
.burger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.burger span { display:block; width:24px; height:2px; background:white; border-radius:2px; transition:all .3s; }
#nav.scrolled .burger span { background:var(--dark); }

/* ── LAYOUT ── */
.wrap    { max-width:1180px; margin:0 auto; padding:0 2rem; }
.wrap-sm { max-width:820px;  margin:0 auto; padding:0 2rem; }
.sect    { padding:100px 0; position:relative; overflow:hidden; }
.sect-light { background:var(--cream); }
.sect-warm  { background:var(--warm); }
.dark-sect  { background:var(--dark); color:white; }
.split   { display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.dot-grid { position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1px); background-size:28px 28px; pointer-events:none; }
.blob    { position:absolute; border-radius:50%; filter:blur(80px); opacity:.2; pointer-events:none; }

/* ── TYPOGRAPHY ── */
.kicker       { font-family:var(--fscript); font-size:1.35rem; color:var(--green-md); display:block; margin-bottom:.4rem; }
.kicker-gold  { color:var(--gold); }
.h1 { font-family:var(--fdisp); font-weight:900; font-size:clamp(2.8rem,6vw,5rem); letter-spacing:-.03em; line-height:1.05; }
.h2 { font-family:var(--fdisp); font-weight:900; font-size:clamp(1.9rem,4vw,3.2rem); letter-spacing:-.025em; line-height:1.1; }
.h3 { font-family:var(--fdisp); font-weight:700; font-size:clamp(1.2rem,2vw,1.7rem); line-height:1.15; }
.em      { color:var(--green); font-style:italic; }
.em-gold { color:var(--gold-lt); font-style:italic; }
.lead    { font-size:1.05rem; line-height:1.85; color:var(--soft); max-width:600px; }
.lead-w  { color:rgba(255,255,255,.65); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:8px; font-family:var(--fbody); font-weight:900; font-size:.95rem; letter-spacing:.04em; padding:14px 32px; border-radius:999px; border:none; cursor:pointer; transition:transform .25s,box-shadow .25s; text-decoration:none; }
.btn-green  { background:linear-gradient(135deg,var(--green-md),var(--green-dk)); color:white; box-shadow:0 6px 28px rgba(42,86,16,.35); }
.btn-green:hover { transform:translateY(-3px); box-shadow:0 12px 36px rgba(42,86,16,.45); }
.btn-gold   { background:linear-gradient(135deg,var(--gold-lt),var(--gold)); color:var(--dark); box-shadow:0 6px 28px rgba(232,168,0,.35); }
.btn-gold:hover  { transform:translateY(-3px); box-shadow:0 12px 36px rgba(232,168,0,.45); }
.btn-ghost  { background:transparent; color:white; border:2px solid rgba(255,255,255,.4); }
.btn-ghost:hover { border-color:white; background:rgba(255,255,255,.1); transform:translateY(-2px); }
.btn-lg { padding:17px 42px; font-size:1rem; }
.btn-full { width:100%; justify-content:center; }

/* ── REVEAL ANIMATIONS ── */
.rv  { opacity:0; transform:translateY(32px); transition:opacity .75s ease,transform .75s ease; }
.rvl { opacity:0; transform:translateX(-40px); transition:opacity .8s ease,transform .8s ease; }
.rvr { opacity:0; transform:translateX(40px);  transition:opacity .8s ease,transform .8s ease; }
.rv.on,.rvl.on,.rvr.on { opacity:1; transform:none; }
.d1{transition-delay:.1s} .d2{transition-delay:.2s} .d3{transition-delay:.3s} .d4{transition-delay:.4s} .d5{transition-delay:.5s}

/* ── 3D CHIPS ── */
.chip3 { border-radius:50% 44% 52% 46% / 46% 52% 48% 50%; position:relative; box-shadow:inset -5px -5px 10px rgba(0,0,0,.25),inset 3px 3px 8px rgba(255,255,255,.35),0 10px 30px rgba(0,0,0,.25); }
.chip3::after { content:''; position:absolute; inset:18%; border-radius:inherit; background:radial-gradient(ellipse at 30% 30%,rgba(255,255,255,.55) 0%,transparent 60%); }
.c-banana   { background:linear-gradient(145deg,#f5e45a,#e8c200,#c49000); }
.c-paprika  { background:linear-gradient(145deg,#e05540,#c02020,#8a1010); }
.c-pineapple{ background:linear-gradient(145deg,#f0d060,#e0a800,#b08000); }
.c-potato   { background:linear-gradient(145deg,#e8a050,#c87030,#a05020); }
.chip3-sm { width:40px; height:40px; }
.chip3-md { width:58px; height:58px; }
.chip3-lg { width:80px; height:80px; }
@keyframes floatY { 0%{transform:translateY(0) rotate(var(--rot,0deg))} 100%{transform:translateY(-18px) rotate(var(--rot2,5deg))} }
.float-anim { animation:floatY ease-in-out infinite alternate; }

/* ── FLOATING CTA (subscribe — bottom right) ── */
#floatCta { position:fixed; bottom:28px; right:28px; z-index:450; background:linear-gradient(135deg,var(--green-md),var(--green-dk)); color:white; font-family:var(--fbody); font-weight:900; font-size:.88rem; padding:13px 22px; border-radius:999px; border:none; cursor:pointer; box-shadow:0 8px 32px rgba(42,86,16,.45); display:flex; align-items:center; gap:8px; text-decoration:none; transform:translateY(80px); opacity:0; transition:transform .4s,opacity .4s; animation:fpulse 2.5s ease-in-out infinite; }
#floatCta.on { transform:translateY(0); opacity:1; }
#floatCta:hover { box-shadow:0 14px 40px rgba(42,86,16,.6); animation:none; transform:translateY(-3px); }
@keyframes fpulse { 0%,100%{box-shadow:0 8px 32px rgba(42,86,16,.45)} 50%{box-shadow:0 8px 42px rgba(42,86,16,.7)} }

/* ── WHATSAPP FAB (fixed to VIEWPORT bottom-left — always visible while scrolling) ── */
a#waFab, #waFab {
  position: fixed !important;
  bottom: 28px !important;
  left: 28px !important;
  z-index: 490 !important;
  background: #25D366 !important;
  color: white !important;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex !important;
  align-items: center;
  justify-content: center;
  font-size: 1.7rem;
  text-decoration: none;
  box-shadow: 0 6px 28px rgba(37,211,102,.5);
  transition: transform .25s, box-shadow .25s;
  animation: waPulse 3s ease-in-out infinite;
}
a#waFab:hover, #waFab:hover { transform: scale(1.1) translateY(-3px) !important; box-shadow: 0 12px 36px rgba(37,211,102,.65); animation: none; }
@keyframes waPulse { 0%,100%{box-shadow:0 6px 28px rgba(37,211,102,.5)} 50%{box-shadow:0 6px 38px rgba(37,211,102,.75),0 0 0 10px rgba(37,211,102,.1)} }

/* ── PAGE HERO (inner pages) ── */
.page-hero { min-height:52vh; display:flex; align-items:flex-end; padding-top:130px; background:linear-gradient(150deg,#1e4a0e,#2d6418 50%,#1a3a0a); position:relative; overflow:hidden; }
.ph-inner  { position:relative; z-index:2; max-width:1180px; margin:0 auto; padding:80px 2rem 65px; width:100%; }

/* ── FOOTER ── */
footer { background:var(--dark); color:rgba(255,255,255,.65); padding:80px 0 0; }
.foot-inner { max-width:1180px; margin:0 auto; padding:0 2rem 60px; display:grid; grid-template-columns:1.3fr 2fr; gap:60px; border-bottom:1px solid rgba(255,255,255,.07); }
.foot-logo  { font-family:var(--fdisp); font-size:2rem; font-weight:900; color:var(--gold-lt); margin-bottom:.6rem; }
.foot-tag   { font-family:var(--fscript); font-size:1.05rem; color:rgba(255,255,255,.45); margin-bottom:1.2rem; line-height:1.5; }
.foot-bdgs  { display:flex; flex-wrap:wrap; gap:7px; }
.foot-bdgs span { font-size:.72rem; font-weight:700; padding:4px 11px; border-radius:999px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); }
.foot-cols  { display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; }
.foot-cols h4 { font-size:.72rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:1rem; }
.foot-cols a, .foot-cols p { display:block; font-size:.88rem; color:rgba(255,255,255,.55); margin-bottom:6px; transition:color .2s; }
.foot-cols a:hover { color:var(--gold-lt); }
.foot-order { display:inline-block; margin-top:1rem; background:var(--gold); color:var(--dark); font-weight:900; font-size:.82rem; padding:8px 18px; border-radius:999px; transition:transform .2s; }
.foot-order:hover { transform:translateY(-2px); }
.foot-bottom { max-width:1180px; margin:0 auto; padding:18px 2rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; font-size:.78rem; opacity:.35; }

/* ── FORMS ── */
.form-field { margin-bottom:1.2rem; }
.form-field label { display:block; font-size:.82rem; font-weight:700; color:var(--text); margin-bottom:.4rem; }
.form-field input,
.form-field textarea,
.form-field select { width:100%; padding:13px 16px; border:1.5px solid #e0e0d4; border-radius:12px; font-family:var(--fbody); font-size:.92rem; color:var(--dark); outline:none; transition:border-color .2s,box-shadow .2s; background:white; }
.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus { border-color:var(--green); box-shadow:0 0 0 4px rgba(61,122,31,.08); }
.form-field textarea { resize:vertical; min-height:120px; }
.field-err { color:var(--red); font-size:.78rem; margin-top:.3rem; display:none; }
.success-box { display:none; background:linear-gradient(135deg,#f0fdf4,#dcfce7); border:2px solid #86efac; border-radius:20px; padding:2.5rem; text-align:center; margin-top:1.5rem; }
.success-box.show { display:block; animation:fadeUp .5s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(16px)} to{opacity:1;transform:none} }

/* ── RESPONSIVE ── */
@media(max-width:900px) {
  .split { grid-template-columns:1fr; gap:3rem; }
  .foot-inner { grid-template-columns:1fr; gap:2.5rem; }
  .foot-cols  { grid-template-columns:1fr 1fr; }
}
@media(max-width:780px) {
  /* ── Shrink nav on mobile ── */
  .nav-inner { height:70px; padding:0 1rem; }
  .nav-logo { margin-top:0; }
  .nav-logo img { height:54px; }
  .page-hero { padding-top:70px; }
  .ph-inner { padding-top:44px; padding-bottom:36px; }

  .burger { display:flex; }
  .burger span { transition: transform .3s, opacity .3s; }
  .burger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
  .burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .burger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }

  /* Mobile menu starts right below the 70px nav */
  .nav-links { display:none; position:fixed; inset:70px 0 0 0; background:var(--cream); flex-direction:column; align-items:flex-start; padding:1.5rem 1.25rem; gap:0; overflow-y:auto; z-index:499; box-shadow:0 8px 40px rgba(0,0,0,.15); }
  .nav-links.open { display:flex; }
  .nav-links a { color:var(--dark) !important; font-size:1.05rem; padding:.75rem 0; border-bottom:1px solid rgba(61,122,31,.08); width:100%; }
  .nav-links a:last-child { border:none; }
  .nav-links .nav-cta { margin-top:1rem; background:linear-gradient(135deg,var(--green-md),var(--green-dk)) !important; color:white !important; padding:12px 24px !important; border-radius:999px !important; text-align:center; justify-content:center; border:none !important; }
  .nav-links .nav-cta-ghost { margin-top:.5rem; border:1.5px solid rgba(61,122,31,.3) !important; color:var(--soft) !important; padding:10px 24px !important; border-radius:999px !important; text-align:center; justify-content:center; }

  /* Nav always shows cream bg on mobile */
  #nav, #nav.nav-light, #nav.scrolled { background:rgba(255,251,240,.98) !important; backdrop-filter:blur(12px); box-shadow:0 2px 24px rgba(42,86,16,.10); }
  #nav .nav-links a, #nav.nav-light .nav-links a { color:var(--dark) !important; }
  .burger span, #nav.nav-light .burger span, #nav.scrolled .burger span { background:var(--dark) !important; }
  #nav.nav-light .nav-cta-ghost { color:var(--soft) !important; border-color:rgba(42,86,16,.35) !important; }
}
@media(max-width:780px) {
  /* Override inline padding-top on pages that hardcode 130-150px for the old nav height */
  .account-section { padding-top:90px !important; }
}
@media(max-width:680px) {
  .foot-cols  { grid-template-columns:1fr; }
  .foot-bottom { flex-direction:column; }
  .sect { padding:72px 0; }
  .account-section { padding-top:80px !important; }
}
/* Nav-light applies on pages without a dark hero */
#nav.nav-light { background:rgba(255,251,240,.98); backdrop-filter:blur(20px); box-shadow:0 2px 40px rgba(42,86,16,.10); }
#nav.nav-light .nav-links a { color:var(--text); }
#nav.nav-light .burger span { background:var(--dark); }
#nav.nav-light .nav-cta-ghost { color:var(--green-dk) !important; border-color:rgba(42,86,16,.45) !important; }
#nav.nav-light .nav-cta-ghost:hover { color:var(--green-dk) !important; border-color:var(--green) !important; }
#nav.nav-light .lang-btn { color:var(--green-dk); border-color:rgba(42,86,16,.35); }

/* ── LANGUAGE SWITCHER ── */
.lang-switch { position:relative; display:flex; align-items:center; }
.lang-btn { background:transparent; border:1.5px solid rgba(255,255,255,.3); color:white; font-family:var(--fbody); font-weight:700; font-size:.75rem; padding:6px 12px; border-radius:999px; cursor:pointer; display:flex; align-items:center; gap:4px; transition:border-color .2s,color .2s; white-space:nowrap; letter-spacing:.04em; }
.lang-btn:hover { border-color:rgba(255,255,255,.65); }
#nav.scrolled .lang-btn { color:var(--text); border-color:rgba(42,86,16,.35); }
#nav.scrolled .lang-btn:hover { border-color:var(--green); }
.lang-drop { display:none; position:absolute; top:calc(100% + 10px); right:0; background:white; border-radius:14px; box-shadow:0 12px 40px rgba(0,0,0,.15); padding:.5rem; min-width:165px; z-index:600; }
.lang-drop.open { display:block; }
.lang-drop a { display:flex; align-items:center; gap:.6rem; padding:.55rem .9rem; border-radius:8px; color:var(--text); font-size:.88rem; font-weight:700; transition:background .15s; text-decoration:none; }
.lang-drop a:hover { background:rgba(61,122,31,.08); color:var(--green-dk); }
.lang-drop a.lang-active { background:rgba(61,122,31,.1); color:var(--green-dk); font-weight:900; }
@media(max-width:780px) {
  .lang-switch { width:100%; flex-direction:column; align-items:stretch; margin-top:.5rem; border-top:1px solid rgba(61,122,31,.08); padding-top:.5rem; }
  .lang-btn { display:none; }
  .lang-drop { display:block !important; position:static; box-shadow:none; background:rgba(61,122,61,.04); border:1px solid rgba(61,122,31,.1); border-radius:10px; }
  .lang-drop a { border-bottom:1px solid rgba(61,122,31,.07); border-radius:0; }
  .lang-drop a:last-child { border-bottom:none; }
}