/* ============================================================
   LA FUENTE MÍA — LIGHT THEME OVERRIDE
   Warm, Aesop-inspired light palette
   ============================================================ */

/* ---------- ROOT VARIABLES ---------- */
:root {
  --color-bg: #F5F0EA;
  --color-bg-elevated: #FFFFFF;
  --color-bg-subtle: #EDE7DF;
  --color-text: #2C2520;
  --color-text-muted: #4A4540;
  --color-text-subtle: #7A756E;
  --color-accent: #8B7355;
  --color-accent-light: #8B7355;
  --color-border: rgba(44,37,32,0.10);
  --color-border-accent: rgba(139,115,85,0.35);
}

/* ---------- BODY ---------- */
body {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
}

/* ---------- NAVIGATION ---------- */
.nav {
  background: rgba(245,240,234,0.7) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(44,37,32,0.08) !important;
}
.nav__link { color: var(--color-text-muted) !important; }
.nav__link:hover { color: var(--color-text) !important; }
.nav__link.active { color: var(--color-accent) !important; }
.nav__link::after { background: var(--color-accent) !important; }
.nav__search-btn { color: var(--color-text-muted) !important; }
.nav__search-btn:hover { color: var(--color-text) !important; }

/* Product sub-nav */
.nav__products {
  background: rgba(237,231,223,0.85) !important;
  border-top: none !important;
}
.nav__product-link { color: var(--color-text-muted) !important; }
.nav__product-link:hover { color: var(--color-text) !important; }

/* Hamburger */
.nav__hamburger span { background: var(--color-text) !important; }
.nav__hamburger.active span { background: var(--color-text) !important; }

/* Mobile menu */
.nav__mobile-menu {
  background: var(--color-bg) !important;
}
.nav__mobile-menu a {
  color: var(--color-text) !important;
  border-bottom-color: rgba(44,37,32,0.08) !important;
}

/* Help dropdown */
.nav__help-panel {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.1) !important;
  box-shadow: 0 8px 32px rgba(44,37,32,0.12) !important;
}
.nav__help-panel::before {
  background: var(--color-bg-elevated) !important;
  border-left: 1px solid rgba(44,37,32,0.1) !important;
  border-top: 1px solid rgba(44,37,32,0.1) !important;
}
.nav__help-link { color: var(--color-text-muted) !important; border-bottom-color: rgba(44,37,32,0.06) !important; }
.nav__help-link:hover { color: var(--color-accent) !important; }

/* ---------- HERO SECTION ---------- */
.hero {
  background: #3B3530 !important; /* Dark base so image + gradient work */
}
.hero__bg {
  filter: grayscale(15%) brightness(0.85) !important;
}
.hero__bg.revealed {
  opacity: 0.55 !important; /* Stronger image presence */
}
.hero__gradient {
  background: linear-gradient(
    180deg,
    rgba(59,53,48,0.35) 0%,
    rgba(59,53,48,0.20) 25%,
    rgba(59,53,48,0.30) 50%,
    rgba(245,240,234,0.75) 78%,
    rgba(245,240,234,0.95) 90%,
    rgba(245,240,234,1) 100%
  ) !important;
}
.hero__glow {
  background: radial-gradient(ellipse, rgba(166,139,107,0.08) 0%, transparent 70%) !important;
}

/* Hero text — light on the dark part of the image */
.hero__eyebrow { color: #B89A76 !important; }
.hero__eyebrow::before, .hero__eyebrow::after { background: #B89A76 !important; }
.hero__title { color: #F0EDE8 !important; }
.hero__title-line { color: #F0EDE8 !important; }
.hero__subtitle { color: #F0EDE8 !important; text-shadow: 0 1px 8px rgba(0,0,0,0.4); }
.hero__cta {
  color: #F0EDE8 !important;
  background: #2C2520 !important;
  border: none !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.4) !important;
}
.hero__cta:hover {
  background: #8B7355 !important;
  border-color: #8B7355 !important;
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(139,115,85,0.4) !important;
}
.hero__scroll { color: rgba(240,237,232,0.5) !important; }
.hero__scroll-line::after { background: linear-gradient(180deg, transparent, #C4A882, transparent) !important; }

/* Botanical SVG overlay */
.hero__botanical svg g { stroke: rgba(240,237,232,0.8) !important; }

/* ---------- PAGE HEADERS (subpages) ---------- */
.page-header {
  background: #3B3530 !important;
}
.page-header__bg {
  opacity: 0.25 !important;
  filter: grayscale(20%) brightness(0.85) !important;
}
.page-header::before {
  background: linear-gradient(
    180deg,
    rgba(59,53,48,0.4) 0%,
    rgba(59,53,48,0.55) 40%,
    rgba(245,240,234,0.7) 75%,
    rgba(245,240,234,1) 100%
  ) !important;
}
.page-header__eyebrow { color: #B89A76 !important; }
.page-header__eyebrow::before, .page-header__eyebrow::after { background: #B89A76 !important; }
.page-header__title { color: #F0EDE8 !important; }
.page-header__subtitle { color: rgba(240,237,232,0.7) !important; }

/* ---------- BREADCRUMB ---------- */
.breadcrumb {
  border-bottom: 1px solid rgba(44,37,32,0.08) !important;
  color: var(--color-text-subtle) !important;
}
.breadcrumb a { color: var(--color-text-muted) !important; }

/* ---------- TRUST BAR ---------- */
.trustbar, [class*="trust-bar"], [class*="trustbar"] {
  background: #2C2520 !important;
  color: #F0EDE8 !important;
}

/* ---------- EDITORIAL / CONTENT SECTIONS ---------- */
.editorial {
  background: linear-gradient(180deg, var(--color-bg) 0%, #EDE7DF 50%, var(--color-bg) 100%) !important;
}
.editorial__ghost {
  color: rgba(44,37,32,0.05) !important;
}
.editorial__botanical svg g {
  stroke: rgba(166,139,107,0.12) !important;
}
.editorial__label { color: #6B5D4D !important; font-weight: 500 !important; }
.editorial__text { color: var(--color-text) !important; font-size: 1.05rem !important; line-height: 1.85 !important; }
.editorial__link { color: #6B5D4D !important; font-weight: 500 !important; text-decoration: underline !important; text-decoration-color: rgba(107,93,77,0.3) !important; text-underline-offset: 3px !important; }

/* NO-list section */
.nolist, [class*="nolist"] {
  background: #2C2520 !important;
  color: #F0EDE8 !important;
}
.nolist__eyebrow, [class*="nolist"] .eyebrow { color: #B89A76 !important; }
.nolist__item, [class*="nolist"] p { color: rgba(240,237,232,0.8) !important; }

/* ---------- PRODUCT / INGREDIENT CARDS ---------- */
.products-grid__card, .product-card, .ingredient-card,
[class*="card"] {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.06) !important;
  box-shadow: 0 1px 3px rgba(44,37,32,0.04), 0 4px 16px rgba(44,37,32,0.06) !important;
}
.products-grid__card:hover, .product-card:hover, .ingredient-card:hover {
  box-shadow: 0 2px 8px rgba(44,37,32,0.06), 0 12px 32px rgba(44,37,32,0.1) !important;
  transform: translateY(-2px);
}

/* ---------- CONTENT SECTIONS ALTERNATING ---------- */
.section:nth-of-type(even) {
  /* background handled by inline style with aloe-vera image */
}
.section:nth-of-type(odd) {
  background: var(--color-bg) !important;
}

/* ---------- CTA SECTION ---------- */
.cta-section, [class*="cta-section"] {
  /* background handled by inline style with aloe-vera image */
  border-top: none !important;
}

/* ---------- NEWSLETTER ---------- */
[class*="newsletter"] input, .newsletter__input {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.12) !important;
  color: var(--color-text) !important;
}
[class*="newsletter"] input:focus {
  border-color: var(--color-accent) !important;
}

/* ---------- FAQ / ACCORDION ---------- */
.faq-tabs { border-bottom-color: rgba(44,37,32,0.1) !important; }
.faq-tabs__btn { color: var(--color-text-subtle) !important; }
.faq-tabs__btn:hover { color: var(--color-text-muted) !important; }
.faq-tabs__btn.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; }
.accordion-item { border-bottom-color: rgba(44,37,32,0.08) !important; }
.accordion-item__trigger { color: var(--color-text) !important; }
.accordion-item__trigger:hover { color: var(--color-accent) !important; }
.accordion-item__trigger svg { color: var(--color-accent) !important; }
.accordion-item__content p { color: var(--color-text-muted) !important; }

/* ---------- HELP CENTER ---------- */
.tracker {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.08) !important;
}
.tracker__input {
  background: var(--color-bg) !important;
  border: 1px solid rgba(44,37,32,0.12) !important;
  color: var(--color-text) !important;
}
.tracker__input:focus { border-color: var(--color-accent) !important; }
.tracker__btn {
  background: var(--color-text) !important;
  color: var(--color-bg) !important;
  border-color: var(--color-text) !important;
}
.tracker__btn:hover {
  background: var(--color-accent) !important;
  border-color: var(--color-accent) !important;
  font-weight: 500 !important;
}

.help-card {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.08) !important;
}
.help-card:hover { border-color: var(--color-accent) !important; }
.help-card__header { border-bottom-color: rgba(44,37,32,0.06) !important; }
.help-card__header svg { color: var(--color-accent) !important; }
.help-card__header h3 { color: var(--color-text) !important; }
.help-card__link { color: var(--color-text-muted) !important; border-bottom-color: rgba(44,37,32,0.04) !important; }
.help-card__link:hover { color: var(--color-accent) !important; }

.help-contact__card {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.08) !important;
}

/* ---------- INCI TABLE ---------- */
.inci-table { border-color: rgba(44,37,32,0.08) !important; }
.inci-table th {
  /* background handled by inline style with aloe-vera image */
  color: var(--color-text) !important;
  border-color: rgba(44,37,32,0.08) !important;
}
.inci-table td {
  border-color: rgba(44,37,32,0.06) !important;
  color: var(--color-text-muted) !important;
}

/* ---------- PRODUCT TABS ---------- */
.product-tabs__btn { color: var(--color-text-subtle) !important; border-color: transparent !important; }
.product-tabs__btn:hover { color: var(--color-text-muted) !important; }
.product-tabs__btn.active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; }

/* ---------- BUTTONS ---------- */
.btn, [class*="__btn"], button[class*="btn"] {
  transition: all 0.3s ease !important;
}

/* ---------- LINKS ---------- */
a { color: inherit; }
a:hover { color: var(--color-accent) !important; }
.content-narrow a { color: var(--color-accent) !important; text-decoration: underline !important; text-decoration-color: rgba(139,115,85,0.3) !important; text-underline-offset: 2px !important; }
.content-narrow a:hover { text-decoration-color: var(--color-accent) !important; }

/* ---------- FOOTER ---------- */
.footer {
  background: #2C2520 !important;
  color: #F0EDE8 !important;
  border-top: none !important;
  padding-top: 4rem !important;
}
.footer__top { border-bottom-color: rgba(240,237,232,0.1) !important; }
.footer__link { color: rgba(240,237,232,0.6) !important; }
.footer__link:hover { color: #F0EDE8 !important; }
.footer__link::after { background: #B89A76 !important; }
.footer__social { border-bottom-color: rgba(240,237,232,0.08) !important; }
.footer__social-link { color: rgba(240,237,232,0.5) !important; }
.footer__social-link:hover { color: #B89A76 !important; }
.footer__bottom { color: rgba(240,237,232,0.4) !important; }
.footer__legal a { color: rgba(240,237,232,0.4) !important; }

/* ---------- PRELOADER ---------- */
.preloader {
  background: var(--color-bg) !important;
}
.preloader__line { background: var(--color-accent) !important; }

/* ---------- SEARCH OVERLAY ---------- */
.search-overlay {
  background: rgba(245,240,234,0.98) !important;
}
.search-overlay__input {
  color: var(--color-text) !important;
  border-bottom-color: rgba(44,37,32,0.15) !important;
}
.search-overlay__input::placeholder { color: var(--color-text-subtle) !important; }
.search-overlay__item { border-bottom-color: rgba(44,37,32,0.08) !important; color: var(--color-text) !important; }
.search-overlay__item:hover { color: var(--color-accent) !important; }
.search-overlay__item-title { color: var(--color-text) !important; }
.search-overlay__item-desc { color: var(--color-text-subtle) !important; }
.search-overlay__close { color: var(--color-text-muted) !important; }
.search-overlay__none { color: var(--color-text-subtle) !important; }

/* ---------- CUSTOM CURSOR ---------- */
.cursor {
  border-color: rgba(44,37,32,0.25) !important;
  mix-blend-mode: normal !important;
}
.cursor__dot {
  background: var(--color-text) !important;
  mix-blend-mode: normal !important;
}
.cursor.hover {
  border-color: var(--color-accent) !important;
}

/* ---------- LANGUAGE SELECTOR ---------- */
[id="langSelect"], .lang-select {
  /* background handled by inline style with aloe-vera image */
}

/* ---------- HELPFUL LINKS BOX ---------- */
.helpful-links {
  background: var(--color-bg-elevated) !important;
  border: 1px solid rgba(44,37,32,0.08) !important;
}
.helpful-links__title { color: var(--color-accent) !important; }
.helpful-links__item {
  background: var(--color-bg) !important;
  border: 1px solid rgba(44,37,32,0.08) !important;
  color: var(--color-text-muted) !important;
}
.helpful-links__item:hover {
  border-color: var(--color-accent) !important;
  color: var(--color-text) !important;
}

/* ---------- FAQ INTRO ---------- */
.faq-intro {
  background: var(--color-bg-elevated) !important;
  border-left-color: var(--color-accent) !important;
}
.faq-intro p { color: var(--color-text) !important; }

/* ---------- SCROLL REVEAL ---------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ---------- GENERAL TEXT ---------- */
p { color: var(--color-text-muted); }
h1, h2, h3, h4 { color: var(--color-text); }
strong { color: var(--color-text); }

/* ---------- PRINT ---------- */
@media print {
  .nav, .footer, .cursor, .cursor__dot, .preloader { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* ---------- PHASE 4: INTERACTION & POLISH ---------- */

/* Better hover states for article cards */
.article-card {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.article-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(44,37,32,0.08) !important;
}

/* Better hover for product cards */
.product-card {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.product-card:hover {
  box-shadow: 0 12px 32px rgba(44,37,32,0.1) !important;
}

/* Help cards hover */
.help-card {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}
.help-card:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(44,37,32,0.06) !important;
}

/* Button hover improvements */
.btn, button[class*="btn"] {
  transition: all 0.35s cubic-bezier(0.16,1,0.3,1) !important;
}
.btn:hover, button[class*="btn"]:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(139,115,85,0.2) !important;
}

/* Ingredient row hover */
.ing-row {
  transition: background 0.3s ease !important;
  padding: 0.5rem 0.75rem !important;
  margin: 0 -0.75rem !important;
  border-radius: 4px !important;
}
.ing-row:hover {
  background: rgba(44,37,32,0.03) !important;
}

/* NO-list item hover */
.nolist-item {
  transition: all 0.3s ease !important;
}
.nolist-item:hover {
  border-color: rgba(139,115,85,0.3) !important;
}

/* Section padding increase */
.section {
  padding: clamp(5rem, 12vw, 8rem) 0 !important;
}

/* Typography hierarchy */
h2 {
  font-size: clamp(1.5rem, 3vw, 2rem) !important;
  margin-bottom: 1.5rem !important;
}

/* Info-box and tip-box styling */
.info-box, .tip-box {
  border-left: 2px solid var(--color-accent) !important;
  padding: 1.25rem 1.5rem !important;
  background: rgba(139,115,85,0.04) !important;
  margin: 2rem 0 !important;
}

/* FAQ accordion smoother */
.accordion-item__content {
  transition: all 0.4s cubic-bezier(0.16,1,0.3,1) !important;
}