/* ============================================
   PESTARIA — Tema Agroecológico
   Molhos e Conservas · Campo à Mesa
   ============================================ */

:root {
  /* Palette — Verdes Sálvia + Argila */
  --sage-deep:   #2E4A3E;
  --sage:        #4A6B5E;
  --sage-mid:    #7A9B8C;
  --sage-light:  #B6CEC2;
  --clay:        #A67C52;
  --clay-light:  #C9A07A;
  --mustard:     #B88A20;

  /* Mapeamento para nomes compartilhados do base.css */
  --forest:      #2E4A3E;
  --forest-deep: #1B2E26;
  --leaf:        #4A6B5E;
  --leaf-light:  #B6CEC2;
  --mango:       #B88A20;
  --mango-glow:  #D4A83C;
  --accent:      #A67C52;

  /* Neutros */
  --sand:      #F6F3ED;
  --sand-warm: #EDE8DC;
  --earth:     #1E1A15;
  --earth-mid: #5A5248;
  --bark:      #1B2E26;
  --cream:     #FDFCF9;
  --bege:      #C8C0B4;
  --white:     #ffffff;

  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Inter', sans-serif;

  --space-xs:  0.5rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  --radius-sharp:   4px;
  --radius-organic: 24px;
  --radius-pill:    999px;

  --shadow-card:       0 8px 24px rgba(46, 74, 62, 0.07);
  --shadow-card-hover: 0 18px 42px rgba(46, 74, 62, 0.14);

  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth:     cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration-fast:   0.22s;
  --duration-normal: 0.42s;
  --duration-slow:   0.75s;
}

/* --- Blur Blobs --- */
.blur-blob        { opacity: 0.07; filter: blur(90px); }
.blur-blob--1     { background: var(--sage); width: 38vw; height: 38vw; top: -8%; left: -8%; }
.blur-blob--2     { background: var(--clay-light); width: 28vw; height: 28vw; bottom: 12%; right: -4%; }
.blur-blob--3     { background: var(--mustard); width: 22vw; height: 22vw; top: 42%; left: 52%; transform: translateX(-50%); }

/* --- Back to Hub --- */
.back-to-hub:hover { color: var(--sage-deep); border-color: var(--sage); }

/* --- em styling — sage-deep (#2E4A3E) sobre fundos claros → ratio ~9:1 ✓ --- */
h2 em, h3 em, p em {
  font-style: normal;
  color: var(--sage-deep);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  background: linear-gradient(155deg, #1B2F26 0%, #12211A 100%);
  color: var(--sand);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 65% at 5% 90%, rgba(182, 206, 194, 0.08) 0%, transparent 55%),
    radial-gradient(ellipse 45% 45% at 88% 8%, rgba(201, 160, 122, 0.08) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* Título: Montserrat 800 — #1E1A15 sobre cream → ratio ~17:1 ✓ */
.hero__title {
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--white);
}

.hero__title em {
  font-style: normal;
  color: var(--clay-light);
}

/* Lead: #5A5248 sobre #F6F3ED → ratio ~5.5:1 ✓ */
.hero__lead { color: rgba(255, 255, 255, 0.85); font-weight: 400; }

/* ============================================
   SECTION LABELS, TITLES, TEXTS
   ============================================ */

/* Label: sage-deep sobre fundos claros → ratio ~9:1 ✓ */
.section__label { color: var(--sage); font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; font-size: 0.78rem; }

/* Título: earth (#1E1A15) sobre sand/cream → ratio ~17:1 ✓ */
.section__title { color: var(--earth); font-weight: 700; }

/* Texto: earth-mid (#5A5248) sobre fundos claros → ratio ~5.5:1 ✓ */
.section__text  { color: var(--earth-mid); }

/* ============================================
   IMPACT BAR
   ============================================ */
.impact-bar { background: var(--sage-deep); }
.impact-stat__number { color: var(--sand); }
.impact-stat__label  { color: var(--sage-light); }

/* ============================================
   BUTTONS
   ============================================ */

/* Primário: sage-deep (#2E4A3E) / branco → ratio ~9:1 ✓ */
.btn--primary {
  background: var(--sage-deep);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(46, 74, 62, 0.28);
}
.btn--primary:hover {
  background: var(--forest-deep);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(46, 74, 62, 0.36);
}
.btn--primary:active { transform: translateY(0) scale(0.98); }

/* Outline: borda clara, texto branco para contraste no hero → ✓ */
.btn--outline {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--sage-light);
}
.btn--outline:hover {
  border-color: var(--sage);
  background: rgba(46, 74, 62, 0.06);
  transform: translateY(-2px);
}

/* Accent: clay (#A67C52) / branco → apenas em contexto escuro */
.btn--accent {
  background: var(--clay);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(166, 124, 82, 0.35);
}
.btn--accent:hover {
  background: var(--clay-light);
  transform: translateY(-2px) scale(1.02);
}

/* Dark: bark escuro / areia clara */
.btn--dark {
  background: var(--forest-deep);
  color: var(--sand);
}
.btn--dark:hover {
  background: var(--earth);
  transform: translateY(-2px);
}

/* Light: branco / sage-deep — para seções escuras → ratio ~9:1 ✓ */
.btn--light {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.8rem 1.5rem;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  border-radius: var(--radius-pill);
  transition: all var(--duration-fast) var(--ease-spring);
  background: var(--white);
  color: var(--sage-deep);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.btn--light:hover {
  background: var(--sand);
  transform: translateY(-2px) scale(1.02);
}

/* ============================================
   SECTIONS
   ============================================ */
.section--sand  { background: linear-gradient(180deg, var(--sand) 0%, #e8f2ec 100%); }
.section--cream { background: linear-gradient(180deg, var(--cream) 0%, #f2f7f4 100%); }
.section--warm  { background: linear-gradient(135deg, #fdfbf8, var(--sand-warm)); }

/* CTA dark: forest profundo — fundo escuro para feature--dark */
.section--cta {
  background: linear-gradient(-45deg, var(--forest-deep), #0e1f18, #152b22, #0e1f18, var(--forest-deep));
  background-size: 400% 400%;
  animation: gradient-move 12s ease infinite;
}
.section--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 88% 40%, rgba(74, 107, 94, 0.12) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 5% 60%, rgba(166, 124, 82, 0.07) 0%, transparent 50%);
  pointer-events: none;
}
/* Em seções escuras: clay-light sobre forest-deep → ratio ~5.5:1 ✓ */
.section--cta em            { color: var(--clay-light); }
.section--cta .section__label { color: var(--clay-light); }

/* ============================================
   ABOUT CARD (section--sand)
   card background cream / texto earth → ✓
   ============================================ */
.about-card {
  background: var(--cream);
  border: 1px solid rgba(46, 74, 62, 0.1);
  border-left: 4px solid var(--sage);
}
.about-card__icon  { background: var(--sage-deep); color: var(--white); }
.about-card__title { color: var(--earth); font-weight: 700; }
.about-card__text  { color: var(--earth-mid); }

/* ============================================
   FEATURES — cards claros (section--sand, section--cream)
   ============================================ */
.feature {
  background: var(--cream);
  border: 1px solid rgba(46, 74, 62, 0.08);
  transition: all var(--duration-normal) var(--ease-smooth);
}
.feature:hover {
  transform: translateY(-8px);
  border-color: var(--sage-mid);
  box-shadow: var(--shadow-card-hover);
}
.section--cream .feature { background: var(--white); }
.section--sand  .feature { background: var(--cream); }

/* Linha de destaque: sage → mustard */
.feature::before { background: linear-gradient(90deg, var(--sage), var(--mustard)); }

/* Ícone: sage (#4A6B5E) sobre cream → ratio ~5.5:1 ✓ */
.feature__icon  { color: var(--sage); }

/* Título: earth (#1E1A15) sobre cream → ratio ~17:1 ✓ */
.feature__title { color: var(--earth); font-weight: 700; }

/* Texto: earth-mid (#5A5248) sobre cream → ratio ~5.5:1 ✓ */
.feature__text  { color: var(--earth-mid); }

/* ============================================
   FEATURE--DARK — para section--cta
   fundo translúcido sobre gradient escuro
   ============================================ */
.feature--dark {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(182, 206, 194, 0.18);
}
.feature--dark:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(182, 206, 194, 0.3);
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25);
}
/* Linha de destaque: sage-light → clay-light */
.feature--dark::before { background: linear-gradient(90deg, var(--sage-mid), var(--clay-light)); }

/* Ícone: sage-light (#B6CEC2) sobre dark → ratio ~6:1 ✓ */
.feature--dark .feature__icon  { color: var(--sage-light); }

/* Título: white sobre dark → ratio ~16:1 ✓ */
.feature--dark .feature__title { color: var(--white); font-weight: 700; }

/* Texto: sage-light (#B6CEC2) sobre dark → ratio ~6:1 ✓ */
.feature--dark .feature__text  { color: rgba(214, 228, 222, 0.9); }

/* ============================================
   CTA BLOCK
   ============================================ */
.cta-block__image {
  transition: transform 0.5s var(--ease-spring);
  border: 6px solid var(--white);
}
.cta-block__image:hover { transform: scale(1.02) rotate(0.8deg); }

/* Numa seção clara */
.cta-block__title { color: var(--earth); font-weight: 800; }
.cta-block__text  { color: var(--earth-mid); line-height: 1.8; margin: var(--space-sm) 0 var(--space-md); }

/* Numa seção escura */
.section--cta .cta-block__title { color: var(--white); font-weight: 800; }
.section--cta .cta-block__text  { color: rgba(214, 228, 222, 0.88); }

/* ============================================
   QUOTE SECTION
   ============================================ */
.quote-section  { background: var(--forest-deep); }
.quote-block__mark    { color: var(--clay-light); }
.quote-block__text    { color: var(--sand); font-style: normal; font-weight: 600; }
.quote-block__caption { color: var(--sage-light); }

/* ============================================
   CONTACT CARD (section--warm → fundo claro)
   ============================================ */
.contact-card {
  background: var(--cream);
  border: 1px solid rgba(166, 124, 82, 0.15);
  border-top: 4px solid var(--clay);
  box-shadow: 0 10px 32px rgba(166, 124, 82, 0.06);
}
.contact-card__title { color: var(--earth); font-weight: 700; }
.contact-card__item       { color: var(--earth); }
.contact-card__item:hover { color: var(--sage-deep); padding-left: 0.35rem; }

/* ============================================
   FOOTER (bark = #1B2E26)
   bege (#C8C0B4) sobre bark → ratio ~6.5:1 ✓
   ============================================ */
.footer       { background: var(--bark); color: var(--bege); }
.footer a       { color: var(--clay-light); }
.footer a:hover { color: var(--white); }
.footer__hub-link { color: var(--clay-light); }
.footer__logo     { filter: brightness(0) invert(1) opacity(0.75); }
.footer__copy     { border-top: 1px solid rgba(255, 255, 255, 0.06); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .hero__title { letter-spacing: -0.02em; }
}
@media (max-width: 600px) {
  .hero__title { letter-spacing: -0.01em; }
}