/* ============================================
   ENCANTAMENTOS DA VÁRZEA — Tema
   Coletivo Cultural · Arte e Território
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Palette — Verde oliva + Dourado */
  --oliva:         #3A4820;
  --oliva-mid:     #4F6228;
  --oliva-light:   #6C8438;
  --dourado:       #B8921E;
  --dourado-light: #D4AE3C;
  --dourado-warm:  #C8A028;

  /* Mapeamento para nomes compartilhados */
  --forest:      #3A4820;
  --forest-deep: #252E14;
  --leaf:        #6C8438;
  --leaf-light:  #8AAA52;
  --mango:       #B8921E;
  --mango-glow:  #D4AE3C;
  --accent:      #B8921E;

  /* Neutros */
  --sand:      #F2EFE6;
  --sand-warm: #EDE8D8;
  --earth:     #1A1508;
  --earth-mid: #3D3620;
  --bark:      #252E14;
  --cream:     #F8F5EB;
  --bege:      #D4C8A0;
  --white:     #ffffff;

  --font-display: 'Century Gothic', 'Avant Garde', 'Apple Gothic', 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:   0px;
  --radius-organic: 24px;
  --radius-pill:    999px;

  --shadow-card:       0 4px 24px rgba(37, 46, 20, 0.07);
  --shadow-card-hover: 0 16px 48px rgba(37, 46, 20, 0.15);

  --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.2s;
  --duration-normal: 0.4s;
  --duration-slow:   0.7s;
}

/* --- Blur Blobs --- */
.blur-blob        { opacity: 0.06; }
.blur-blob--1     { background: var(--oliva); }
.blur-blob--2     { background: var(--dourado); }
.blur-blob--3     { background: var(--oliva-light); }

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

/* --- em styling (dourado) --- */
.hero__title em, h2 em, h3 em, p em {
  font-style: normal;
  color: var(--dourado);
}

/* ============================================
   HERO
   ============================================ */
.hero {
  background: linear-gradient(-45deg, var(--cream), var(--sand), #f5f2e8, var(--sand), var(--cream));
  color: var(--earth);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 90%, rgba(58, 72, 32, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(184, 146, 30, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* Hero title: tracking largo, uppercase elegante */
.hero__title {
  font-size: clamp(1.6rem, 3.5vw, 2.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 1.2;
  color: var(--forest-deep);
  max-width: 25ch;
}

.hero__lead { color: var(--earth-mid); }

/* ============================================
   SECTION TITLES — uppercase
   ============================================ */
.section__title {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--forest-deep);
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.section__label { color: var(--dourado); }
.section__text  { color: var(--earth-mid); }

.section-header--center { color: var(--white); }
.section-header--center em { color: var(--dourado-light); }

/* ============================================
   BUTTONS
   ============================================ */
.btn--primary {
  background: var(--oliva);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(58, 72, 32, 0.28);
}
.btn--primary:hover {
  background: var(--forest-deep);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 8px 28px rgba(58, 72, 32, 0.35);
}
.btn--primary:active { transform: translateY(0) scale(0.98); }

.btn--accent {
  background: var(--dourado);
  color: var(--white);
  box-shadow: 0 4px 16px rgba(184, 146, 30, 0.28);
}
.btn--accent:hover {
  background: var(--dourado-warm);
  transform: translateY(-2px) scale(1.02);
}

.btn--outline {
  background: transparent;
  color: var(--oliva);
  border: 2px solid rgba(58, 72, 32, 0.25);
}
.btn--outline:hover {
  border-color: var(--oliva);
  background: rgba(58, 72, 32, 0.06);
  transform: translateY(-2px);
}

.btn--dark {
  background: var(--forest-deep);
  color: var(--sand);
}
.btn--dark:hover {
  background: var(--earth);
  transform: translateY(-2px);
}

/* ============================================
   SECTIONS
   ============================================ */
.section--sand  { background: var(--sand); }
.section--cream { background: var(--cream); }
.section--warm  { background: linear-gradient(135deg, var(--sand), var(--sand-warm)); }
.section--white-gold { background: linear-gradient(135deg, var(--white), rgba(184, 146, 30, 0.06)); }

.section--cta {
  background: linear-gradient(-45deg, var(--forest-deep), #161e0c, #252e14, #161e0c, var(--forest-deep));
  background-size: 400% 400%;
  animation: gradient-move 10s ease infinite;
}
.section--cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 70% at 90% 40%, rgba(184, 146, 30, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 5% 60%, rgba(108, 132, 56, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.section--cta .section__label { color: var(--dourado-light); }
.section--cta em { color: var(--dourado-light); }

/* ============================================
   ABOUT CARD
   ============================================ */
.about-card {
  background: var(--cream);
  border: 1px solid rgba(58, 72, 32, 0.08);
}
.about-card__icon  { background: var(--oliva); }
.about-card__title { color: var(--forest-deep); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.95rem; }
.about-card__text  { color: var(--earth-mid); }

/* ============================================
   FEATURES
   ============================================ */
.feature {
  background: var(--cream);
  border: 1px solid rgba(58, 72, 32, 0.07);
}
.section--cream .feature { background: var(--sand); }
.section--sand  .feature { background: var(--cream); }
.feature::before         { background: linear-gradient(90deg, var(--oliva-mid), var(--dourado)); }
.feature__icon           { color: var(--oliva); }
.feature__title          { color: var(--forest-deep); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 0.95rem; }
.feature__text           { color: var(--earth-mid); }

/* --- Features dark (Nossos Produtos) --- */
.feature--dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(184, 146, 30, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.feature--dark:hover {
  border-color: var(--dourado-light);
  box-shadow: 0 16px 48px rgba(184, 146, 30, 0.15);
}
.feature--dark::before           { background: linear-gradient(90deg, var(--oliva-light), var(--dourado)); }
.feature--dark .feature__icon    { color: var(--dourado-light); }
.feature--dark .feature__title   { color: var(--white); font-size: 0.95rem; font-weight: 400; letter-spacing: 0.01em; }
.feature--dark .feature__text    { color: rgba(242, 239, 230, 0.75); }

/* ============================================
   CTA BLOCK
   ============================================ */
.cta-block__title { color: var(--sand); }
.cta-block__text  { color: var(--bege); }

/* ============================================
   QUOTE
   ============================================ */
.quote-section { background: var(--forest-deep); }
.quote-section::before {
  content: '';
  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='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: 0.5;
  pointer-events: none;
}
.quote-block__mark    { color: var(--dourado); }
.quote-block__text    { color: var(--sand); font-style: normal; }
.quote-block__caption { color: var(--dourado-light); }

/* ============================================
   CONTACT
   ============================================ */
.contact-card {
  background: var(--cream);
  border: 1px solid rgba(58, 72, 32, 0.08);
}
.contact-card__title      { color: var(--forest-deep); font-weight: 400; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem; }
.contact-card__item       { color: var(--earth); }
.contact-card__item:hover { color: var(--oliva); padding-left: 0.3rem; }

/* ============================================
   FOOTER
   ============================================ */
.footer       { background: var(--bark); color: var(--bege); }
.footer a     { color: var(--dourado-light); }
.footer a:hover { color: var(--white); }
.footer__hub-link { color: var(--dourado-light); }
.footer__copy     { border-top: 1px solid rgba(212, 200, 160, 0.1); }

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .hero__title { font-size: clamp(1.4rem, 4.5vw, 2.2rem); }
}
@media (max-width: 600px) {
  .hero__title { font-size: clamp(1.3rem, 6vw, 1.8rem); letter-spacing: 0.01em; }
}