/* ============================================
   COLMÉIA DA VÁRZEA — Tema
   Coletivo Feminino Agroecológico · Meliponicultura
   ============================================ */

/* --- Design Tokens --- */
:root {
  /* Palette — Verde floresta + Mel âmbar */
  --verde:       #2C4A2E;
  --verde-mid:   #3B6837;
  --verde-light: #5C8C52;
  --mel:         #C8961E;
  --mel-light:   #E0B84A;
  --mel-warm:    #D4A832;

  /* Mapeamento para nomes compartilhados */
  --forest:      #2C4A2E;
  --forest-deep: #1A2E1A;
  --leaf:        #5C8C52;
  --leaf-light:  #7AAE6E;
  --mango:       #C8961E;
  --mango-glow:  #E0B84A;
  --accent:      #C8961E;

  /* Neutros */
  --sand:      #F0EDE4;
  --sand-warm: #E8E0CC;
  --earth:     #1A1208;
  --earth-mid: #4A3C28;
  --bark:      #1A2E1A;
  --cream:     #F8F4EA;
  --bege:      #D4C8A0;
  --white:     #ffffff;

  --font-display: 'Oswald', 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(26, 46, 26, 0.07);
  --shadow-card-hover: 0 16px 48px rgba(26, 46, 26, 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;
}

/* --- Global Texture --- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg width='42' height='73' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23C8961E' stroke-width='1' stroke-opacity='0.04' fill='none' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.5L.5 12 0 15zm0 26.5L.5 39l10.48-6.05V26.4L0 32.5zm27.5-6.5L15.02 41v15h2v-13.85L28 36.1v-1.1z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 42px 73px;
  pointer-events: none;
  z-index: 9999;
}

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

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

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

h1, h2, h3, h4, h5, h6,
.hero__title, .section__title, .about-card__title, .feature__title, .cta-block__title, .contact-card__title {
  font-weight: 400 !important;
  text-transform: uppercase !important;
}

/* ============================================
   HERO
   ============================================ */
.hero {
  background: linear-gradient(-45deg, var(--cream), rgba(92, 140, 82, 0.08), var(--sand), rgba(44, 74, 46, 0.05), var(--cream));
  color: var(--earth);
}
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 5% 90%, rgba(44, 74, 46, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 85% 10%, rgba(200, 150, 30, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
}

/* Hero title: Oswald condensed uppercase como a logo */
.hero__title {
  font-size: clamp(1.45rem, 3vw, 2.6rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0;
  line-height: 1.15;
  color: var(--forest-deep);
  max-width: 100%;
}

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

/* ============================================
   SECTION TITLES — Oswald uppercase
   ============================================ */
.section__title {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--forest-deep);
}
.section__label { color: var(--mel); }
.section__text  { color: var(--earth-mid); }

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

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

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

.btn--outline {
  background: transparent;
  color: var(--verde);
  border: 2px solid rgba(44, 74, 46, 0.25);
}
.btn--outline:hover {
  border-color: var(--verde);
  background: rgba(44, 74, 46, 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--sage  { background: linear-gradient(180deg, var(--sand), #dce5d8); }
.section--warm  { background: linear-gradient(135deg, var(--sand), var(--sand-warm)); }

.section--green-terral { background: var(--forest-deep); color: var(--sand); position: relative; }
.section--green-terral::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: 
    url("data:image/svg+xml,%3Csvg width='28' height='49' viewBox='0 0 28 49' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%23C8961E' stroke-width='1' stroke-opacity='0.08' fill='none' fill-rule='evenodd'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.5L.5 12 0 15zm0 26.5L.5 39l10.48-6.05V26.4L0 32.5zm27.5-6.5L15.02 41v15h2v-13.85L28 36.1v-1.1z'/%3E%3C/g%3E%3C/svg%3E"),
    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.05'/%3E%3C/svg%3E");
  background-size: 56px 98px, auto;
  pointer-events: none;
}
.section--green-terral .section__title { color: var(--sand); }
.section--green-terral .section__text { color: var(--sand-warm); }

.section--cta {
  background: linear-gradient(-45deg, var(--forest-deep), #0d1e0d, #1a2e1a, #0d1e0d, 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(200, 150, 30, 0.1) 0%, transparent 55%),
    radial-gradient(ellipse 40% 60% at 5% 60%, rgba(92, 140, 82, 0.08) 0%, transparent 50%);
  pointer-events: none;
}
.section--cta .section__label { color: var(--mel-light); }
.section--cta em { color: var(--mel-light); }

/* ============================================
   ABOUT (Quem Somos)
   ============================================ */
.about-card {
  background: var(--cream);
  border: 1px solid rgba(44, 74, 46, 0.08);
}
.about-card__icon     { background: var(--verde); }
.about-card__title    { color: var(--forest-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.about-card__text     { color: var(--earth-mid); }

/* ============================================
   FEATURES (light sections)
   ============================================ */
.feature {
  background: var(--cream);
  border: 1px solid rgba(44, 74, 46, 0.07);
}
.section--cream .feature { background: var(--sand); }
.section--sand  .feature { background: var(--cream); }
.feature::before         { background: linear-gradient(90deg, var(--verde-mid), var(--mel)); }
.feature__icon           { color: var(--verde); }
.feature__title          { color: var(--forest-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.05rem; }
.feature__text           { color: var(--earth-mid); }

/* --- Features (dark section — Nossos Produtos) --- */
.feature--dark {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(200, 150, 30, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: none;
}
.feature--dark:hover {
  border-color: var(--mel-light);
  box-shadow: 0 16px 48px rgba(200, 150, 30, 0.15);
}
.feature--dark::before           { background: linear-gradient(90deg, var(--verde-light), var(--mel)); }
.feature--dark .feature__icon    { color: var(--mel-light); }
.feature--dark .feature__title   { color: var(--white); font-size: 1.05rem; }
.feature--dark .feature__text    { color: rgba(240, 237, 228, 0.75); }

/* ============================================
   CTA BLOCK
   ============================================ */
.cta-block__title      { color: var(--sand); }
.cta-block--warm .cta-block__title { color: var(--forest-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.cta-block__text       { color: var(--bege); }
.cta-block--warm .cta-block__text { color: var(--earth-mid); }

/* ============================================
   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(--mel); }
.quote-block__text    { color: var(--sand); font-style: normal; }
.quote-block__caption { color: var(--mel-light); }

/* ============================================
   CONTACT
   ============================================ */
.contact-info dt { color: var(--mel); }
.contact-info dd { color: var(--earth); }
.contact-card {
  background: var(--cream);
  border: 1px solid rgba(44, 74, 46, 0.08);
}
.contact-card__title      { color: var(--forest-deep); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.contact-card__item       { color: var(--earth); }
.contact-card__item:hover { color: var(--verde); padding-left: 0.3rem; }

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

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 900px) {
  .hero__title { font-size: clamp(1.3rem, 3.8vw, 2.1rem); letter-spacing: 0; }
}
@media (max-width: 600px) {
  .hero__title { font-size: clamp(1.15rem, 5vw, 1.7rem); letter-spacing: 0; }
}