/* ==========================================================
   LA FILOMENA — Design System & Styles
   Boutique de Café — Salta, Argentina
   ========================================================== */

/* ── 1. Design Tokens ───────────────────────────────────── */
:root {
  /* Brand Colors */
  --espresso:       #0d0d0d;
  --espresso-light: #1a1a1a;
  --espresso-mid:   #2a2a2a;
  --gold:           #C5A059;
  --gold-light:     #d4b06e;
  --gold-dark:      #a88940;
  --cream:          #F5F0E6;
  --cream-dark:     #E8DFCE;
  --terracotta:     #8E3A3A;
  --terracotta-lt:  #b04e4e;
  --whatsapp:       #25D366;
  --store-green:    #047857;

  /* Neutrals */
  --white:          #ffffff;
  --gray-50:        #f9fafb;
  --gray-100:       #f3f4f6;
  --gray-200:       #e5e7eb;
  --gray-300:       #d1d5db;
  --gray-400:       #9ca3af;
  --gray-500:       #6b7280;
  --gray-600:       #4b5563;
  --gray-700:       #374151;
  --gray-800:       #1f2937;
  --gray-900:       #111827;

  /* Typography */
  --font-display: 'Cinzel', serif;
  --font-serif:   'Playfair Display', serif;
  --font-sans:    'Montserrat', sans-serif;

  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;
  --space-4xl: 6rem;

  /* Layout */
  --container: 1280px;
  --section-py: clamp(4rem, 8vw, 7rem);

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 9999px;

  /* Shadows */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.12), 0 1px 2px rgba(0,0,0,.06);
  --shadow-md:  0 4px 6px rgba(0,0,0,.1), 0 2px 4px rgba(0,0,0,.06);
  --shadow-lg:  0 10px 25px rgba(0,0,0,.15), 0 4px 10px rgba(0,0,0,.05);
  --shadow-xl:  0 20px 40px rgba(0,0,0,.2);
  --shadow-gold: 0 4px 20px rgba(197,160,89,.25);

  /* Transitions */
  --ease-out: cubic-bezier(.25,.46,.45,.94);
  --ease-spring: cubic-bezier(.34,1.56,.64,1);
  --duration-fast: 200ms;
  --duration-med:  350ms;
  --duration-slow: 600ms;
}

/* ── 2. Reset ───────────────────────────────────────────── */
*,*::before,*::after { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; overflow-x: hidden; }
body {
  font-family: var(--font-sans);
  background: var(--espresso);
  color: var(--cream);
  line-height: 1.7;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { text-decoration:none; color:inherit; transition: color var(--duration-fast); }
ul,ol { list-style:none; }
img,video { max-width:100%; display:block; }
button { cursor:pointer; font-family:inherit; }
input,textarea,select { font-family:inherit; }

/* Focus visible for keyboard nav */
:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* Reduced motion */
@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; }
}

/* Custom scrollbar */
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-track { background:var(--espresso); }
::-webkit-scrollbar-thumb { background:var(--gold-dark); border-radius:var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background:var(--gold); }

/* ── 3. Utility Classes ─────────────────────────────────── */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--space-lg); }
.text-center { text-align:center; }
.text-gold { color:var(--gold); }
.text-terracotta { color:var(--terracotta); }
.text-white { color:var(--white); }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* ── 4. Typography ──────────────────────────────────────── */
h1,h2,h3,h4 { font-family:var(--font-display); line-height:1.15; text-transform:uppercase; letter-spacing:.04em; }

.section-label {
  display:inline-block;
  font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.2em;
  color:var(--gold);
  margin-bottom:var(--space-md);
}

.section-title {
  font-size:clamp(1.75rem,4vw,2.75rem);
  font-weight:700;
  margin-bottom:var(--space-md);
}

.section-subtitle {
  font-family:var(--font-serif);
  font-style:italic;
  font-size:clamp(1rem,2vw,1.25rem);
  color:var(--gray-400);
  max-width:38rem;
  margin:0 auto var(--space-2xl);
}

.divider {
  width:5rem; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto var(--space-lg);
  border:none;
}

/* ── 5. Buttons ─────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.85rem 2rem;
  font-weight:700; font-size:.75rem;
  text-transform:uppercase; letter-spacing:.08em;
  border:none; border-radius:var(--radius-sm);
  transition: all var(--duration-med) var(--ease-out);
  position:relative; overflow:hidden;
}
.btn::after {
  content:''; position:absolute; inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.15) 50%,transparent 70%);
  transform:translateX(-100%); transition:transform var(--duration-slow);
}
.btn:hover::after { transform:translateX(100%); }

.btn-cream { background:var(--cream); color:var(--espresso); }
.btn-cream:hover { background:var(--white); box-shadow:var(--shadow-md); }

.btn-gold { background:var(--gold); color:var(--espresso); }
.btn-gold:hover { background:var(--gold-light); box-shadow:var(--shadow-gold); }

.btn-green {
  background:var(--store-green); color:var(--white);
  border:1px solid rgba(74,222,128,.25);
}
.btn-green:hover { background:#059669; box-shadow:0 8px 20px rgba(4,120,87,.3); }

.btn-outline-gold {
  background:transparent; color:var(--gold);
  border:1.5px solid var(--gold);
}
.btn-outline-gold:hover { background:var(--gold); color:var(--espresso); }

.btn-whatsapp {
  background:var(--whatsapp); color:var(--white);
  border-radius:var(--radius-full);
  padding:.85rem 1.75rem;
}
.btn-whatsapp svg { width:1.25rem; height:1.25rem; flex-shrink:0; }
.btn-whatsapp:hover { opacity:.92; box-shadow:0 6px 20px rgba(37,211,102,.35); }

.btn-store-lg {
  background:var(--store-green); color:var(--white);
  padding:1rem 2.5rem; letter-spacing:.1em;
}
.btn-store-lg:hover { background:#046c4e; box-shadow:0 8px 20px rgba(4,120,87,.3); }

/* ── 6. WhatsApp Float ──────────────────────────────────── */
.whatsapp-float {
  position:fixed; bottom:28px; right:28px;
  width:60px; height:60px; border-radius:50%;
  background:var(--whatsapp); color:var(--white);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(37,211,102,.4);
  z-index:200;
  transition:transform var(--duration-med) var(--ease-spring);
  animation: wa-pulse 2s infinite;
}
.whatsapp-float:hover { transform:scale(1.12); }
.whatsapp-float svg { width:30px; height:30px; }

@keyframes wa-pulse {
  0%,100% { box-shadow:0 4px 14px rgba(37,211,102,.4); }
  50%     { box-shadow:0 4px 24px rgba(37,211,102,.6); }
}

/* ── 7. Navbar ──────────────────────────────────────────── */
.navbar {
  position:fixed; top:0; left:0; width:100%; z-index:100;
  background:rgba(13,13,13,.7);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(197,160,89,.1);
  transition:background var(--duration-med), border-color var(--duration-med), box-shadow var(--duration-med);
}
.navbar.scrolled {
  background:rgba(13,13,13,.95);
  border-bottom-color:rgba(197,160,89,.2);
  box-shadow:0 2px 20px rgba(0,0,0,.3);
}

.navbar-inner {
  display:flex; justify-content:space-between; align-items:center;
  height:72px; max-width:var(--container); margin:0 auto; padding:0 var(--space-lg);
}

.nav-brand { display:flex; align-items:center; gap:.75rem; }
.nav-brand img { height:2.25rem; width:auto; }
.nav-brand-name {
  font-family:var(--font-display);
  font-size:1rem; font-weight:700;
  color:var(--gold); text-transform:uppercase;
  letter-spacing:.12em;
}

.nav-menu { display:flex; align-items:center; gap:var(--space-xl); }
.nav-link {
  font-size:.8rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.06em;
  color:var(--gray-300);
  position:relative; padding:.25rem 0;
  transition:color var(--duration-fast);
}
.nav-link::after {
  content:''; position:absolute; bottom:-2px; left:0;
  width:0; height:2px; background:var(--gold);
  transition:width var(--duration-med) var(--ease-out);
}
.nav-link:hover,
.nav-link.active { color:var(--gold); }
.nav-link:hover::after,
.nav-link.active::after { width:100%; }

.nav-cta {
  font-size:.75rem; font-weight:700;
  background:var(--store-green); color:var(--white);
  padding:.55rem 1.25rem; border-radius:var(--radius-sm);
  text-transform:uppercase; letter-spacing:.06em;
  transition:all var(--duration-fast);
  border:none;
}
.nav-cta:hover { background:#059669; }

/* Mobile menu button */
.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px; cursor:pointer;
}
.nav-toggle span {
  display:block; width:24px; height:2px; background:var(--cream);
  border-radius:2px; transition:all var(--duration-med);
}
.nav-toggle.active span:nth-child(1) { transform:rotate(45deg) translate(5px,5px); }
.nav-toggle.active span:nth-child(2) { opacity:0; }
.nav-toggle.active span:nth-child(3) { transform:rotate(-45deg) translate(5px,-5px); }

@media(max-width:768px) {
  .nav-toggle { display:flex; }
  .nav-menu {
    position:fixed; top:72px; left:0; right:0;
    flex-direction:column; gap:0;
    background:rgba(13,13,13,.97);
    backdrop-filter:blur(20px);
    border-bottom:1px solid rgba(197,160,89,.15);
    padding:var(--space-lg) 0;
    transform:translateY(-120%); opacity:0;
    transition:transform var(--duration-med) var(--ease-out), opacity var(--duration-med);
    pointer-events:none;
  }
  .nav-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .nav-link { padding:var(--space-md) var(--space-lg); font-size:.9rem; width:100%; }
  .nav-cta { margin:var(--space-md) var(--space-lg); }
}

/* ── 8. Hero ────────────────────────────────────────────── */
.hero {
  position:relative; min-height:100vh; min-height:100dvh;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  overflow:hidden;
  padding-top:72px; /* Fix for absolute navbar overlap */
}
.hero-bg {
  position:absolute; inset:0;
  background-image:url('../imgs/cafe-especilidad-salta.webp');
  background-size:cover; background-position:center;
  background-attachment:fixed;
}
@media(max-width:768px) {
  .hero-bg { background-attachment:scroll; }
}
.hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(
    180deg,
    rgba(0,0,0,.65) 0%,
    rgba(0,0,0,.45) 40%,
    rgba(13,13,13,.85) 100%
  );
}
.hero-grain {
  position:absolute; inset:0;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.04'/%3E%3C/svg%3E");
  pointer-events:none;
}
.hero-content {
  position:relative; z-index:2;
  text-align:center; padding:0 var(--space-lg);
  max-width:900px;
  margin:auto;
  animation:hero-fade-in 1.2s var(--ease-out) both;
}
@keyframes hero-fade-in {
  from { opacity:0; transform:translateY(30px); }
  to { opacity:1; transform:translateY(0); }
}
.hero-logo {
  width:7rem; height:7rem;
  object-fit:contain;
  aspect-ratio:1/1;
  border-radius:50%;
  margin:0 auto var(--space-lg);
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
  animation:hero-fade-in 1s var(--ease-out) .2s both;
}
@media(min-width:768px) { .hero-logo { width:11rem; height:11rem; } }

.hero-badge {
  display:inline-block;
  font-size:.7rem; font-weight:700;
  letter-spacing:.25em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(197,160,89,.3);
  padding:.4rem 1.5rem; margin-bottom:var(--space-lg);
  border-radius:var(--radius-full);
  animation:hero-fade-in 1s var(--ease-out) .3s both;
  white-space: nowrap;
}

.hero h1 {
  font-size:clamp(2.25rem,7vw,5rem);
  font-weight:700; color:var(--white);
  line-height:1.05; margin-bottom:var(--space-lg);
  animation:hero-fade-in 1s var(--ease-out) .4s both;
}
.hero h1 .hero-accent {
  font-family:var(--font-serif);
  color:var(--gold); font-weight:400;
  font-style:italic; text-transform:none;
  font-size:.75em;
}

.hero-desc {
  font-size:clamp(.95rem,1.5vw,1.15rem);
  color:rgba(255,255,255,.7);
  max-width:32rem; margin:0 auto var(--space-xl);
  font-weight:300; line-height:1.8;
  animation:hero-fade-in 1s var(--ease-out) .5s both;
}

.hero-buttons {
  display:flex; flex-direction:column; align-items:center; gap:var(--space-md);
  animation:hero-fade-in 1s var(--ease-out) .6s both;
}
.hero-btn-row {
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-md);
}

.hero-scroll {
  position:relative; z-index:5;
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  color:rgba(255,255,255,.45); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.15em;
  margin-bottom:1.5rem;
  animation:hero-bounce 2s infinite;
}
.hero-scroll-line { width:1px; height:28px; background:rgba(197,160,89,.5); }
@keyframes hero-bounce {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(8px); }
}
@media(max-width:480px) {
  .hero-scroll { margin-bottom:1rem; }
}

/* ── 9. Sections ────────────────────────────────────────── */
.section-light {
  background:var(--cream); color:var(--espresso);
  padding:var(--section-py) 0; position:relative; overflow:hidden;
}
.section-white {
  background:var(--white); color:var(--espresso);
  padding:var(--section-py) 0; overflow:hidden;
}
.section-dark {
  background:var(--espresso); color:var(--white);
  padding:var(--section-py) 0; position:relative; overflow:hidden;
}
.section-dark-alt {
  background:var(--espresso-light); color:var(--white);
  padding:var(--section-py) 0; overflow:hidden;
}

.section-decoration {
  position:absolute; border-radius:50%; pointer-events:none;
}
.section-decoration--tl {
  top:-4rem; left:-4rem; width:12rem; height:12rem;
  background:radial-gradient(circle,rgba(197,160,89,.06),transparent 70%);
}
.section-decoration--br {
  bottom:-4rem; right:-4rem; width:16rem; height:16rem;
  background:radial-gradient(circle,rgba(197,160,89,.04),transparent 70%);
}

/* ── 10. Feature Cards (Cápsulas) ───────────────────────── */
.cards-grid {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-xl);
  margin-bottom:var(--space-2xl);
}
@media(min-width:768px) { .cards-grid { grid-template-columns:repeat(3,1fr); } }

.feature-card {
  background:var(--white);
  padding:var(--space-xl);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
  text-align:center;
  transition:transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med);
  position:relative; overflow:hidden;
}
.feature-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  transition:height var(--duration-med);
}
.feature-card--gold::before { background:linear-gradient(90deg,var(--gold-dark),var(--gold-light)); }
.feature-card--dark::before { background:var(--espresso); }
.feature-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.feature-card:hover::before { height:4px; }

.feature-card__icon {
  width:3.5rem; height:3.5rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto var(--space-lg);
  transition:transform var(--duration-med) var(--ease-spring);
}
.feature-card:hover .feature-card__icon { transform:scale(1.1) rotate(-3deg); }
.feature-card__icon--cream { background:var(--cream); color:var(--espresso); }
.feature-card__icon--dark { background:var(--espresso); color:var(--gold); }
.feature-card__icon svg { width:1.75rem; height:1.75rem; }

.feature-card h3 {
  font-size:1.1rem; margin-bottom:var(--space-sm);
  color:var(--espresso);
}
.feature-card--gold h3 { color:var(--gold-dark); }
.feature-card p { font-size:.875rem; color:var(--gray-600); line-height:1.7; }

.cta-container { text-align:center; margin-top:var(--space-xl); }

/* Section wordmark */
.section-wordmark {
  display:block; margin:0 auto var(--space-md);
  max-width:140px; height:auto; opacity:.85;
}
@media(min-width:768px) { .section-wordmark { max-width:200px; margin-bottom:var(--space-lg); } }

/* ── 11. Split Layout (Suscripción & Empresas) ──────────── */
.split-layout {
  display:grid;
  grid-template-columns:1fr;
  gap:var(--space-3xl);
  align-items:center;
}
@media(min-width:1024px) {
  .split-layout { grid-template-columns:1fr 1fr; }
  .content-order-1 { order:2; }
  .content-order-2 { order:1; }
}

.title-lg {
  font-size:clamp(1.75rem,4vw,3rem);
  font-weight:700; line-height:1.1;
  margin:var(--space-md) 0 var(--space-lg);
}

.text-desc {
  font-size:1.05rem; line-height:1.8;
  margin-bottom:var(--space-lg);
}
.section-light .text-desc,
.section-white .text-desc { color:var(--gray-600); }
.section-dark .text-desc { color:var(--gray-400); font-weight:300; }

/* Steps */
.steps-list {
  margin-bottom:var(--space-xl);
  padding-left:var(--space-lg);
  border-left:2px solid var(--cream-dark);
}
.step-item { display:flex; align-items:flex-start; margin-bottom:var(--space-md); }
.step-number {
  color:var(--gold); font-weight:700;
  font-size:1.1rem; margin-right:.75rem;
  min-width:2rem;
}
.step-item p { color:var(--gray-700); font-size:.95rem; }

/* Features list (Empresas) */
.features-list { margin-bottom:var(--space-xl); }
.features-list li {
  display:flex; align-items:center; gap:var(--space-md);
  padding:var(--space-md) var(--space-lg);
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
  border-radius:var(--radius-md);
  margin-bottom:var(--space-md);
  transition:border-color var(--duration-med), background var(--duration-med);
}
.features-list li:hover {
  border-color:rgba(197,160,89,.3);
  background:rgba(255,255,255,.06);
}
.checkmark {
  color:var(--gold); font-weight:700;
  font-size:1.15rem; flex-shrink:0;
}
.features-list strong { color:var(--white); display:block; font-size:.95rem; }
.features-list span { font-size:.8rem; color:var(--gray-400); }

/* ── 12. Forms ──────────────────────────────────────────── */
.form-card {
  padding:var(--space-2xl);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-xl);
}
.form-card.light-form {
  background:var(--white);
  border:1px solid var(--gray-200);
}
.form-card.dark-form {
  background:linear-gradient(135deg,var(--gray-900),var(--espresso));
  border:1px solid var(--gray-800);
}

.form-card h3 {
  font-size:1.35rem; text-align:center;
  margin-bottom:var(--space-sm);
}
.dark-form h3 { color:var(--white); }

.form-subtitle {
  text-align:center; font-size:.85rem;
  margin-bottom:var(--space-lg);
}
.light-form .form-subtitle { color:var(--gray-500); }
.dark-form .form-subtitle { color:var(--gray-400); }

.contact-form { display:flex; flex-direction:column; gap:var(--space-md); }
.form-row { display:grid; grid-template-columns:1fr; gap:var(--space-md); }
@media(min-width:768px) { .form-row { grid-template-columns:1fr 1fr; } }

.contact-form input,
.contact-form textarea {
  width:100%; padding:.8rem 1rem;
  border:1px solid var(--gray-200);
  border-radius:var(--radius-sm);
  outline:none; font-size:.9rem;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
  background:var(--white);
}
.contact-form input:focus,
.contact-form textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,160,89,.15);
}

.dark-form input,
.dark-form textarea {
  background:rgba(31,41,55,.5);
  border-color:var(--gray-700);
  color:var(--white);
}
.dark-form input:focus,
.dark-form textarea:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,160,89,.15);
}

.contact-form button {
  width:100%; padding:1rem;
  font-weight:700; text-transform:uppercase;
  letter-spacing:.08em; font-size:.85rem;
  border:none; border-radius:var(--radius-sm);
  transition:all var(--duration-med) var(--ease-out);
}
.light-form button {
  background:var(--espresso); color:var(--white);
}
.light-form button:hover {
  background:var(--gold); color:var(--espresso);
  box-shadow:var(--shadow-gold);
}
.dark-form button {
  background:var(--gold); color:var(--espresso);
}
.dark-form button:hover {
  background:var(--white); box-shadow:var(--shadow-md);
}

.form-message {
  text-align:center; font-weight:700;
  font-size:.85rem; margin-top:var(--space-sm);
  transition:opacity var(--duration-med);
}
.form-message.hidden { display:none; }
.form-message.success { color:var(--whatsapp); }
.form-message.error { color:#ef4444; }

/* ── 13. Map ────────────────────────────────────────────── */
.section-desc-lg {
  font-size:clamp(1rem,2vw,1.2rem);
  color:var(--gray-500); margin-bottom:var(--space-2xl);
  font-weight:300; max-width:38rem; margin-left:auto; margin-right:auto;
}
.map-container {
  width:100%; height:420px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--gray-200);
}

/* ── 14. Coffee Menu ────────────────────────────────────── */
.menu-tabs {
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:var(--space-sm);
  margin-bottom:var(--space-2xl);
}
.menu-tab {
  padding:.7rem 1.5rem;
  font-size:.75rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em;
  border:1.5px solid rgba(197,160,89,.25);
  border-radius:var(--radius-full);
  background:transparent; color:var(--gold);
  cursor:pointer;
  transition:all var(--duration-fast);
}
.menu-tab:hover { border-color:var(--gold); background:rgba(197,160,89,.08); }
.menu-tab.active {
  background:var(--gold); color:var(--espresso);
  border-color:var(--gold);
  box-shadow:var(--shadow-gold);
}
.menu-tab .tab-count {
  display:inline-block; margin-left:.35rem;
  font-size:.65rem; opacity:.7;
}

/* Search & Filter */
.menu-controls {
  max-width:700px; margin:0 auto var(--space-xl);
  display:flex; flex-direction:column; gap:var(--space-md);
}
.search-box {
  position:relative;
}
.search-box svg {
  position:absolute; left:1rem; top:50%; transform:translateY(-50%);
  width:18px; height:18px; color:var(--gray-400); pointer-events:none;
}
.search-input {
  width:100%; padding:.8rem 1rem .8rem 2.75rem;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(197,160,89,.2);
  border-radius:var(--radius-full);
  color:var(--cream); font-size:.9rem;
  outline:none;
  transition:border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.search-input::placeholder { color:var(--gray-500); }
.search-input:focus {
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(197,160,89,.12);
}

.filter-badges {
  display:flex; flex-wrap:wrap; justify-content:center; gap:var(--space-sm);
}
.filter-badge {
  padding:.4rem 1rem; font-size:.7rem; font-weight:600;
  border-radius:var(--radius-full);
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  color:var(--gray-300); cursor:pointer;
  transition:all var(--duration-fast);
  text-transform:uppercase; letter-spacing:.04em;
}
.filter-badge:hover { border-color:rgba(197,160,89,.4); color:var(--gold); }
.filter-badge.active {
  background:var(--gold); color:var(--espresso);
  border-color:var(--gold);
}

/* Products Grid */
.products-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:var(--space-xl);
}

/* Product Card */
.product-card {
  perspective:1200px;
  cursor:pointer;
  position:relative;
  height:420px;
}
.card-inner {
  position:absolute; inset:0;
  width:100%; height:100%;
  transition:transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  transform-style:preserve-3d;
}
.product-card:hover .card-inner {
  transform:rotateY(180deg);
}
@media(max-width:768px) {
  .product-card:hover .card-inner { transform:none; }
  .product-card.flipped .card-inner { transform:rotateY(180deg); }
}

.card-front, .card-back {
  position:absolute; inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.08);
}
.card-front {
  display:flex; flex-direction:column;
}
.card-back {
  background:linear-gradient(160deg, #1e1a14, #0f0d0a);
  transform:rotateY(180deg);
  padding:var(--space-xl) var(--space-lg);
  display:flex; flex-direction:column;
  border-color:rgba(197,160,89,.3);
  box-shadow:0 8px 30px rgba(0,0,0,.4);
}

.back-title {
  font-family:var(--font-display);
  font-size:1.1rem;
  font-weight:700;
  color:var(--white);
  margin-bottom:var(--space-sm);
}

.back-desc {
  font-size:.85rem;
  color:var(--gray-400);
  line-height:1.5;
  margin-bottom:var(--space-lg);
  flex-grow:1;
}

.back-details {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--space-sm);
  margin-bottom:var(--space-lg);
}

.back-detail-item {
  display:flex; flex-direction:column;
}

.back-detail-label {
  font-size:.6rem;
  color:var(--gray-500);
  text-transform:uppercase;
  letter-spacing:.1em;
}

.back-detail-value {
  font-size:.8rem;
  color:var(--gold);
}

.product-card:hover .card-front {
  border-color:rgba(197,160,89,.3);
  box-shadow:0 12px 30px rgba(0,0,0,.3);
}
.product-card:hover .product-card__img {
  transform:scale(1.05);
}

.product-card__img-wrap {
  height:240px; 
  flex-shrink:0; 
  width:100%;
  overflow:hidden;
  background:linear-gradient(135deg, #1a1510, #0f0d0a);
  position:relative;
}
.product-card__img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--duration-med) var(--ease-out);
  filter:drop-shadow(0 4px 8px rgba(0,0,0,.3));
}

.product-card__body {
  padding:var(--space-md) var(--space-lg) var(--space-lg);
  flex:1; min-height:0; overflow:hidden;
  display:flex; flex-direction:column;
}

.product-card__brand {
  font-size:.65rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.1em;
  color:var(--gold); margin-bottom:var(--space-xs);
}
.product-card__name {
  font-family:var(--font-display);
  font-size:1rem; font-weight:700; color:var(--white);
  margin-bottom:var(--space-sm);
  text-transform:uppercase; letter-spacing:.02em;
}
.product-card__origin {
  font-size:.75rem; color:var(--gray-400);
  margin-bottom:var(--space-md);
}

/* Intensity bar */
.intensity-bar {
  display:flex; align-items:center; gap:.5rem;
  margin-bottom:var(--space-md);
}
.intensity-bar__label {
  font-size:.65rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gray-400);
  min-width:55px;
}
.intensity-bar__track {
  flex:1; height:6px;
  background:rgba(255,255,255,.08);
  border-radius:var(--radius-full);
  overflow:hidden; position:relative;
}
.intensity-bar__fill {
  height:100%; border-radius:var(--radius-full);
  background:linear-gradient(90deg,var(--gold-dark),var(--gold));
  transition:width var(--duration-slow) var(--ease-out);
}
.intensity-bar__value {
  font-size:.7rem; font-weight:700;
  color:var(--gold); min-width:1.5rem; text-align:right;
}

/* Tasting notes */
.tasting-notes {
  display:flex; flex-wrap:wrap; gap:var(--space-xs);
  margin-bottom:var(--space-md);
  overflow:hidden;
  flex-shrink:1;
}
.tasting-note {
  font-size:.65rem; padding:.2rem .6rem;
  border-radius:var(--radius-full);
  background:rgba(197,160,89,.1);
  color:var(--gold-light);
  border:1px solid rgba(197,160,89,.15);
}

.product-card__footer {
  display:flex; justify-content:space-between; align-items:center;
  padding-top:var(--space-md);
  border-top:1px solid rgba(255,255,255,.06);
  flex-shrink:0; margin-top:auto;
}
.product-card__price {
  font-family:var(--font-display);
  font-size:1.1rem; font-weight:700; color:var(--white);
}
.product-card__detail-link {
  font-size:.7rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--gold);
  font-weight:600;
  transition:color var(--duration-fast);
}
.product-card:hover .product-card__detail-link { color:var(--gold-light); }

/* No results */
.no-results {
  text-align:center; padding:var(--space-3xl) var(--space-lg);
  color:var(--gray-400);
}
.no-results-icon { font-size:3rem; display:block; margin-bottom:var(--space-md); }

/* ── 15. Modal ──────────────────────────────────────────── */
.modal-overlay {
  position:fixed; inset:0; z-index:300;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-lg);
  opacity:0; pointer-events:none;
  transition:opacity var(--duration-med);
}
.modal-overlay.active { opacity:1; pointer-events:auto; }

.modal-card {
  background:var(--espresso-light);
  border:1px solid rgba(197,160,89,.2);
  border-radius:var(--radius-xl);
  max-width:560px; width:100%;
  max-height:90vh; overflow-y:auto;
  position:relative;
  transform:scale(.92) translateY(20px);
  transition:transform var(--duration-med) var(--ease-spring);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
}
.modal-overlay.active .modal-card {
  transform:scale(1) translateY(0);
}

.modal-close {
  position:absolute; top:var(--space-md); right:var(--space-md);
  width:36px; height:36px; border-radius:50%;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1);
  color:var(--gray-300); font-size:1rem;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:2;
  transition:all var(--duration-fast);
}
.modal-close:hover { background:rgba(255,255,255,.15); color:var(--white); }

.modal-img-section {
  display:flex; align-items:center; justify-content:center;
  padding:var(--space-2xl); min-height:200px;
  background:rgba(255,255,255,.02);
  position:relative;
}
.modal-img {
  max-height:180px; width:auto; object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
}
.modal-price-badge {
  position:absolute; top:var(--space-lg); left:var(--space-lg);
  background:var(--gold); color:var(--espresso);
  padding:.4rem 1rem; border-radius:var(--radius-full);
  font-weight:700; font-size:.85rem;
  font-family:var(--font-display);
}

.modal-info {
  padding:0 var(--space-2xl) var(--space-2xl);
}
.modal-brand {
  font-size:.7rem; text-transform:uppercase;
  letter-spacing:.12em; color:var(--gold);
  font-weight:700; display:block;
  margin-bottom:var(--space-xs);
}
.modal-title {
  font-size:1.3rem; margin-bottom:var(--space-md);
  color:var(--white);
}
.modal-divider {
  width:3rem; height:2px;
  background:var(--gold);
  margin-bottom:var(--space-lg);
}
.modal-details {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-md); margin-bottom:var(--space-lg);
}
.modal-detail-item {
  font-size:.8rem;
}
.modal-detail-label {
  color:var(--gray-400); font-size:.65rem;
  text-transform:uppercase; letter-spacing:.06em;
  margin-bottom:2px; display:block;
}
.modal-detail-value { color:var(--cream); font-weight:500; }

.modal-description {
  font-size:.9rem; color:var(--gray-300);
  line-height:1.7; margin-bottom:var(--space-lg);
}
.modal-tags { display:flex; flex-wrap:wrap; gap:var(--space-xs); }
.modal-tag {
  font-size:.7rem; padding:.3rem .75rem;
  border-radius:var(--radius-full);
  background:rgba(197,160,89,.12);
  color:var(--gold-light);
  border:1px solid rgba(197,160,89,.15);
}

/* ── 16. Footer ─────────────────────────────────────────── */
.site-footer {
  background:var(--espresso);
  border-top:1px solid rgba(197,160,89,.1);
  padding:var(--space-3xl) 0 var(--space-xl);
}
.footer-grid {
  display:grid; grid-template-columns:1fr;
  gap:var(--space-2xl);
  padding-bottom:var(--space-2xl);
  margin-bottom:var(--space-xl);
  border-bottom:1px solid rgba(255,255,255,.06);
}
@media(min-width:768px) { .footer-grid { grid-template-columns:2fr 1fr 1fr 1fr; } }

.footer-brand-text {
  font-family:var(--font-display);
  font-size:1.35rem; font-weight:700;
  color:var(--gold); text-transform:uppercase;
  letter-spacing:.1em; display:block;
  margin-bottom:var(--space-md);
}
.footer-col p { font-size:.85rem; color:var(--gray-400); line-height:1.7; }
.footer-col h5 {
  font-weight:700; font-size:.7rem;
  text-transform:uppercase; letter-spacing:.12em;
  color:var(--cream); margin-bottom:var(--space-lg);
}
.footer-col ul li {
  margin-bottom:.6rem; font-size:.85rem; color:var(--gray-400);
}
.footer-col ul li a { transition:color var(--duration-fast); }
.footer-col ul li a:hover { color:var(--gold); }
.link-green { color:var(--store-green); font-weight:600; }
.link-green:hover { color:#4ade80; }

.footer-bottom {
  display:flex; flex-direction:column; justify-content:space-between;
  align-items:center; gap:var(--space-md);
  font-size:.625rem; color:var(--gray-500);
  text-transform:uppercase; letter-spacing:.05em;
}
@media(min-width:768px) { .footer-bottom { flex-direction:row; } }
.footer-bottom .disclaimer { font-style:italic; opacity:.7; }

/* ── 17. Scroll Reveal ──────────────────────────────────── */
.reveal {
  opacity:0; transform:translateY(30px);
  transition:opacity var(--duration-slow) var(--ease-out),
             transform var(--duration-slow) var(--ease-out);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-delay-1 { transition-delay:.1s; }
.reveal-delay-2 { transition-delay:.2s; }
.reveal-delay-3 { transition-delay:.3s; }

/* ── 18. Print ──────────────────────────────────────────── */
@media print {
  .navbar,.whatsapp-float,.hero-scroll,.modal-overlay { display:none; }
  body { background:#fff; color:#000; }
  .hero { min-height:auto; page-break-after:always; }
  .section-dark { background:#fff; color:#000; }
  .product-card { border:1px solid #ccc; page-break-inside:avoid; }
}

/* ── 19. Modern Visual Enhancements ─────────────────────── */

/* Animated gradient text */
.text-gradient {
  background:linear-gradient(135deg, var(--gold), var(--gold-light), var(--terracotta-lt), var(--gold));
  background-size:300% 300%;
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  animation:gradient-shift 6s ease infinite;
}
@keyframes gradient-shift {
  0%   { background-position:0% 50%; }
  50%  { background-position:100% 50%; }
  100% { background-position:0% 50%; }
}

/* Animated divider with glow */
.divider-animated {
  width:5rem; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  margin:0 auto var(--space-lg);
  border:none;
  position:relative;
}
.divider-animated::after {
  content:''; position:absolute; inset:-2px;
  background:linear-gradient(90deg,transparent,rgba(197,160,89,.4),transparent);
  filter:blur(6px);
  border-radius:var(--radius-full);
}

/* Glow effect on feature cards */
.feature-card:hover {
  box-shadow: var(--shadow-lg), 0 0 30px rgba(197,160,89,.08);
}

/* Enhanced product card glow */
.product-card:hover {
  box-shadow: 0 12px 30px rgba(0,0,0,.3), 0 0 40px rgba(197,160,89,.06);
}

/* Stats / Numbers section */
.stats-strip {
  display:grid; grid-template-columns:repeat(2,1fr);
  gap:var(--space-lg);
  padding:var(--space-2xl) 0;
}
@media(min-width:768px) { .stats-strip { grid-template-columns:repeat(4,1fr); } }

.stat-item {
  text-align:center;
  padding:var(--space-lg);
  border-radius:var(--radius-lg);
  background:rgba(255,255,255,.03);
  border:1px solid rgba(197,160,89,.1);
  transition:all var(--duration-med) var(--ease-out);
}
.stat-item:hover {
  border-color:rgba(197,160,89,.3);
  background:rgba(255,255,255,.05);
  transform:translateY(-3px);
}
.stat-number {
  font-family:var(--font-display);
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--gold);
  line-height:1;
  margin-bottom:var(--space-xs);
}
.stat-label {
  font-size:.75rem; font-weight:600;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--gray-400);
}

/* Section transition shape */
.section-wave {
  position:relative;
}
.section-wave::before {
  content:'';
  position:absolute; top:-1px; left:0; right:0;
  height:40px;
  background:inherit;
  clip-path:ellipse(60% 100% at 50% 100%);
  z-index:2;
}

/* Floating glow orbs for dark sections */
.glow-orb {
  position:absolute; border-radius:50%; pointer-events:none;
  filter:blur(80px); opacity:.08;
}
.glow-orb--gold {
  background:var(--gold);
  width:300px; height:300px;
}
.glow-orb--terracotta {
  background:var(--terracotta);
  width:200px; height:200px;
}

/* Smooth image reveal */
.img-reveal {
  clip-path:inset(0 100% 0 0);
  transition:clip-path 0.8s var(--ease-out);
}
.img-reveal.visible {
  clip-path:inset(0 0 0 0);
}

/* Section separator line */
.section-sep {
  width:100%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(197,160,89,.2), transparent);
  border:none; margin:0;
}

/* Pill badge for "Nuevo" or "Popular" */
.badge-pill {
  display:inline-block;
  font-size:.55rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.08em;
  padding:.2rem .6rem;
  border-radius:var(--radius-full);
  position:absolute; top:var(--space-md); right:var(--space-md);
  z-index:2;
}
.badge-pill--gold {
  background:var(--gold); color:var(--espresso);
}
.badge-pill--new {
  background:var(--store-green); color:var(--white);
}

/* Better form card glow */
.form-card.light-form:hover {
  box-shadow:var(--shadow-xl), 0 0 40px rgba(197,160,89,.06);
}
.form-card.dark-form:hover {
  box-shadow:var(--shadow-xl), 0 0 40px rgba(197,160,89,.1);
  border-color:rgba(197,160,89,.2);
}

/* Smooth button press effect */
.btn:active {
  transform:scale(.97);
}

/* ── Custom Fit Block ───────────────────────────────────── */
.custom-fit-block {
  margin-top:var(--space-3xl);
}
.custom-fit-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-xl);
  padding:var(--space-2xl) var(--space-2xl);
  margin-top:var(--space-2xl);
  background:rgba(197,160,89,.06);
  border:1px solid rgba(197,160,89,.2);
  border-radius:var(--radius-xl);
}
.custom-fit-title {
  font-family:var(--font-serif);
  font-size:clamp(1.2rem, 2.5vw, 1.6rem);
  color:var(--cream);
  margin-bottom:var(--space-sm);
}
.custom-fit-desc {
  font-size:.9rem;
  color:var(--gray-400);
  max-width:480px;
}
@media(max-width:768px) {
  .custom-fit-inner {
    flex-direction:column;
    text-align:center;
    padding:var(--space-xl);
  }
  .custom-fit-desc { max-width:100%; }
}

/* ── Plan Corporativo Cards ─────────────────────────────── */
.plan-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:var(--space-xl);
  margin-top:var(--space-3xl);
  align-items:stretch;
}

.plan-card {
  background:var(--espresso-light);
  border:1px solid rgba(197,160,89,.15);
  border-radius:var(--radius-xl);
  padding:var(--space-2xl);
  position:relative;
  transition:transform var(--duration-med) var(--ease-out), box-shadow var(--duration-med) var(--ease-out), border-color var(--duration-med);
  display:flex;
  flex-direction:column;
  gap:var(--space-lg);
}
.plan-card:hover {
  transform:translateY(-6px);
  box-shadow:var(--shadow-xl), 0 0 40px rgba(197,160,89,.08);
  border-color:rgba(197,160,89,.3);
}

.plan-card--featured {
  border-color:rgba(197,160,89,.45);
  background:linear-gradient(160deg, #1e1a0f 0%, var(--espresso-mid) 100%);
  box-shadow:0 0 0 1px rgba(197,160,89,.3), var(--shadow-xl);
}
.plan-card--featured:hover {
  border-color:var(--gold);
  box-shadow:0 0 0 1px var(--gold), var(--shadow-xl), 0 0 50px rgba(197,160,89,.15);
}

.plan-badge {
  position:absolute;
  top:-12px; left:50%;
  transform:translateX(-50%);
  background:linear-gradient(90deg, var(--gold-dark), var(--gold-light));
  color:var(--espresso);
  font-family:var(--font-sans);
  font-size:.65rem; font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.3rem 1rem;
  border-radius:var(--radius-full);
  white-space:nowrap;
}

.plan-card__icon {
  width:3rem; height:3rem;
  border-radius:var(--radius-md);
  display:flex; align-items:center; justify-content:center;
  background:rgba(197,160,89,.1);
  color:var(--gold);
  flex-shrink:0;
}
.plan-card__icon svg { width:1.5rem; height:1.5rem; }

.plan-card__header {
  display:flex; flex-direction:column; gap:var(--space-xs);
}

.plan-card__tag {
  font-size:.7rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold);
}

.plan-card__title {
  font-family:var(--font-serif);
  font-size:1.35rem;
  font-weight:700;
  color:var(--cream);
  line-height:1.3;
}

.plan-card__subtitle {
  font-size:.85rem;
  color:var(--gray-400);
  font-style:italic;
  line-height:1.5;
}

.plan-card__contents {
  background:rgba(255,255,255,.03);
  border:1px solid rgba(197,160,89,.1);
  border-radius:var(--radius-md);
  padding:var(--space-md) var(--space-lg);
}
.plan-card__contents-title {
  font-size:.7rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:var(--space-sm);
}
.plan-card__item {
  display:flex; align-items:baseline; gap:.5rem;
  font-size:.875rem; color:var(--gray-300);
  padding:.25rem 0;
}
.plan-card__item strong { color:var(--cream); font-weight:600; }
.plan-card__item-dot {
  width:5px; height:5px; border-radius:50%;
  background:var(--gold); flex-shrink:0;
  margin-top:.3rem;
}

.plan-card__varieties {
  display:grid; grid-template-columns:1fr 1fr;
  gap:var(--space-sm) var(--space-md);
  font-size:.78rem; color:var(--gray-400);
}
.plan-card__varieties-col-title {
  font-size:.65rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--gold-dark); margin-bottom:.15rem;
}
.plan-card__varieties li {
  display:flex; align-items:baseline; gap:.35rem;
  padding:.1rem 0; line-height:1.4;
}
.plan-card__varieties li::before {
  content:''; width:4px; height:4px; border-radius:50%;
  background:rgba(197,160,89,.5); flex-shrink:0;
}
.plan-card__varieties li em {
  color:var(--gray-500); font-style:normal; font-size:.72rem;
}

.plan-card__price {
  text-align:center;
  padding:var(--space-md) 0;
  border-top:1px solid rgba(197,160,89,.12);
  border-bottom:1px solid rgba(197,160,89,.12);
}
.plan-card__price-label {
  font-size:.65rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--gray-500); margin-bottom:.25rem;
}
.plan-card__price-amount {
  font-family:var(--font-display);
  font-size:2.25rem; font-weight:700;
  color:var(--gold);
  line-height:1;
}
.plan-card__price-period {
  font-size:.75rem; color:var(--gray-500);
  margin-top:.2rem;
}

.plan-card__benefits {
  display:flex; flex-direction:column; gap:.5rem;
}
.plan-card__benefit {
  display:flex; align-items:flex-start; gap:.6rem;
  font-size:.82rem; color:var(--gray-300);
}
.plan-card__benefit-check {
  width:1.1rem; height:1.1rem;
  border-radius:50%;
  background:rgba(197,160,89,.15);
  color:var(--gold);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; margin-top:.05rem;
  font-size:.6rem; font-weight:700;
}

.plan-card__actions {
  display:flex; flex-direction:column; gap:var(--space-sm);
  margin-top:auto;
}

.btn-plan-primary {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:linear-gradient(135deg, var(--gold-dark) 0%, var(--gold-light) 100%);
  color:var(--espresso);
  font-weight:700; font-size:.85rem; letter-spacing:.04em;
  padding:.75rem var(--space-lg);
  border-radius:var(--radius-full);
  border:none;
  transition:all var(--duration-fast) var(--ease-out);
  text-decoration:none;
}
.btn-plan-primary:hover {
  filter:brightness(1.1);
  transform:translateY(-1px);
  box-shadow:var(--shadow-gold);
}

.btn-plan-secondary {
  display:flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent;
  color:var(--gray-400);
  font-size:.8rem; font-weight:500;
  padding:.6rem var(--space-lg);
  border-radius:var(--radius-full);
  border:1px solid rgba(197,160,89,.2);
  transition:all var(--duration-fast) var(--ease-out);
  text-decoration:none;
}
.btn-plan-secondary:hover {
  color:var(--gold);
  border-color:rgba(197,160,89,.5);
  background:rgba(197,160,89,.05);
}
.btn-plan-secondary svg { width:.85rem; height:.85rem; }

@media(max-width:768px) {
  .plan-cards {
    grid-template-columns:1fr;
    align-items:start;
  }
  .plan-card { height:auto; }
  .plan-card__varieties { grid-template-columns:1fr; }
  .plan-card__price-amount { font-size:2rem; }
}

/* Navbar logo fix for mobile */
@media(max-width:768px) {
  .nav-brand img {
    width:2rem; height:2rem;
    object-fit:contain; border-radius:50%;
  }
}