/* ==========================================================
   Sand — Warm Ivory & Terracotta
   Personality: Mediterranean artisan, craft warmth, organic flow
   Typography: Lora (display) + Barlow (UI)
   Palette: Parchment white, warm terracotta, burnt sienna
   ========================================================== */
:root {
  --color-primary:        #2e1a0e;
  --color-primary-deep:   #fdf8f2;
  --color-primary-light:  #4a2c18;
  --color-on-primary:     #2e1a0e;
  --color-surface:        #fdf8f2;
  --color-border:         #e8d8c4;
  --color-accent:         #c4622a;
  --color-accent-light:   #de7a45;
  --color-accent-dim:     #8c3e18;
  --color-muted:          #9a8070;
  --color-brand-surface:  #fdf8f2;
  --color-brand-border:   #e8d8c4;
  --color-brand-fog:      #6a5040;
  --color-brand-fog-dim:  #9a8070;
  --color-brand-white:    #2e1a0e;

  /* Lora — warm humanist serif, old-world craftsmanship */
  --font-display: 'Lora', 'Georgia', serif;
  --font-sans:    'Barlow', ui-sans-serif, system-ui, sans-serif;
  --font-body:    'Barlow', ui-sans-serif, system-ui, sans-serif;

  /* Navbar — warm parchment */
  .navbar {
    background-color: #fdf8f2;
    border-bottom: 1px solid #e8d8c4;
    box-shadow: 0 1px 10px rgba(46, 26, 14, 0.06);

    &::before {
      background: linear-gradient(to right, transparent, #c4622a 25%, #de7a45 50%, #c4622a 75%, transparent);
    }
  }

  .navbar-logo-wordmark {
    color: #2e1a0e;
    span { color: #c4622a; }
  }

  .nav-link {
    color: #6a5040;
    letter-spacing: 0.06em;
    &::after { background: #c4622a; }
    &:hover { color: #2e1a0e; }
  }

  .nav-link-active { color: #c4622a; }

  .lang-btn {
    border-color: rgba(196, 98, 42, 0.3);
    color: #7a6858;
    border-radius: 20px;
    &:hover { background: rgba(196, 98, 42, 0.07); border-color: #c4622a; color: #c4622a; }
  }

  .lang-btn-active { background: #c4622a; border-color: #c4622a; color: #fdf8f2; border-radius: 20px; }

  .theme-btn {
    border-color: rgba(46, 26, 14, 0.14);
    color: #9a8070;
    border-radius: 20px;
    &:hover { border-color: rgba(196, 98, 42, 0.38); color: #6a5040; }
  }

  .theme-btn-active { background: rgba(196, 98, 42, 0.09); border-color: rgba(196, 98, 42, 0.42); color: #c4622a; border-radius: 20px; }

  .nav-mobile-btn { border-color: rgba(46, 26, 14, 0.15); color: #6a5040; border-radius: 20px; }
  .nav-mobile-panel { background-color: #fdf8f2; border-top-color: #e8d8c4; }
  .nav-mobile-link { color: #6a5040; &:hover { color: #2e1a0e; border-left-color: #c4622a; background: rgba(196, 98, 42, 0.05); } }

  /* Hero — warm parchment with layered organic texture */
  .hero {
    background-color: #f5ece0;
    background-image:
      radial-gradient(ellipse 80% 55% at 70% 55%, rgba(196, 98, 42, 0.09) 0%, transparent 65%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4622a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  .hero-heading {
    color: #2e1a0e;
    font-style: italic;
    letter-spacing: -0.01em;
    font-weight: 400;
  }

  .hero-sub { color: #6a5040; }

  .hero-badge {
    color: #c4622a;
    border-color: rgba(196, 98, 42, 0.38);
    background: rgba(196, 98, 42, 0.07);
    border-radius: 20px;
  }

  .hero-rail {
    background: linear-gradient(to bottom, transparent, rgba(196, 98, 42, 0.35) 20%, rgba(196, 98, 42, 0.35) 80%, transparent);
  }

  .btn-primary {
    background-color: #c4622a;
    color: #fdf8f2;
    border-radius: 20px;
    box-shadow: 0 2px 12px rgba(196, 98, 42, 0.22);
    &:hover { background-color: #de7a45; box-shadow: 0 4px 18px rgba(196, 98, 42, 0.3); }
  }

  .btn-outline-light {
    border-color: rgba(46, 26, 14, 0.38);
    color: #2e1a0e;
    border-radius: 20px;
    &:hover { background: rgba(196, 98, 42, 0.06); border-color: #c4622a; }
  }

  .btn-outline { border-color: #c4622a; color: #c4622a; border-radius: 20px; &:hover { background: rgba(196, 98, 42, 0.05); } }
  .btn-whatsapp { border-radius: 20px; }

  .section-white { background-color: #ffffff; }
  .section-light { background-color: #fdf8f2; }
  .section-ruled {
    background-color: #fdf8f2;
    background-image: linear-gradient(#e8d8c4 1px, transparent 1px), linear-gradient(90deg, #e8d8c4 1px, transparent 1px);
  }

  .section-heading::before { background: linear-gradient(to bottom, #c4622a, #8c3e18); }
  .section-heading-center::after { background: linear-gradient(to right, #c4622a, #8c3e18); }

  .feature-card { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; &::after { background: #c4622a; border-radius: 0 0 8px 8px; } }
  .feature-card-icon { background: #fdf8f2; border-color: #e8d8c4; color: #c4622a; border-radius: 8px; .feature-card:hover & { background: #c4622a; border-color: #c4622a; color: #fff; border-radius: 8px; } }

  .why-card { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; &:hover { border-color: rgba(196, 98, 42, 0.35); } }
  .product-card { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; }
  .product-card-body { border-top-color: #c4622a; }
  .product-card-thumb { background-color: #2e1a0e; }

  .pillar-card { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; }
  .pillar-icon { background: #fdf8f2; border-color: #e8d8c4; color: #c4622a; border-radius: 8px; }

  .info-card { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; &:hover { border-color: #c4622a; } }
  .info-card-icon { background: #fdf8f2; border-color: #e8d8c4; color: #c4622a; border-radius: 8px; }

  .stats-strip { background-color: #2e1a0e; border-top-color: rgba(196, 98, 42, 0.25); border-bottom-color: rgba(196, 98, 42, 0.25); }
  .stat-item + .stat-item::before { background: rgba(196, 98, 42, 0.3); }
  .stat-number { color: #f0a878; }

  .cta-section { background-color: #2e1a0e; }
  .cta-section::before { background: radial-gradient(ellipse 60% 80% at 50% 0%, rgba(196, 98, 42, 0.1) 0%, transparent 70%); }

  .form-card { background: #ffffff; border-color: #e8d8c4; border-top-color: #c4622a; border-radius: 8px; }
  .form-input { background: #fdf8f2; border-color: #e8d8c4; border-radius: 6px; &:focus { border-color: #c4622a; box-shadow: 0 0 0 3px rgba(196, 98, 42, 0.1); } }

  .legal-block { background: #ffffff; border-color: #e8d8c4; border-radius: 8px; }

.site-footer { background-color: #e8d8c4; border-top-color: rgba(196, 98, 42, 0.25); }
.footer-brand-name { color: #2e1a0e; }
.footer-tagline { color: #6a5040; }
.footer-section-title { color: #c4622a; border-bottom-color: rgba(196, 98, 42, 0.25); }
.footer-link { color: #6a5040; &:hover { color: #2e1a0e; } }
.footer-bottom { border-top-color: rgba(196, 98, 42, 0.2); color: #7a6a5a; }
.whatsapp-float svg { fill: #ffffff; }
.call-float { background-color: #2e1a0e; &:hover { background-color: #4a2c18; } }
.call-float svg { color: #fdf8f2; }
.whatsapp-float { border-radius: 12px; }
.call-float { border-radius: 12px; }

.page-header {
    background-color: #f5ece0;
    background-image:
      radial-gradient(ellipse 80% 55% at 70% 55%, rgba(196, 98, 42, 0.09) 0%, transparent 65%),
      url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23c4622a' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  }

  .heading-display { color: #2e1a0e; }
  .heading-display-light { color: #2e1a0e; }
  .eyebrow { color: #c4622a; }
  .eyebrow-light { color: #c4622a; }
}

  .heading-display { color: #2e1a0e; }
  .heading-display-light { color: #fdf8f2; }
  .eyebrow { color: #c4622a; }
  .eyebrow-light { color: #f0a878; }

  .whatsapp-float { border-radius: 12px; }
}