/*
Theme Name: Ecológica Ambiental
Theme URI: https://www.ambientalecologica.com.br/
Author: Ecológica Ambiental
Author URI: https://www.ambientalecologica.com.br/
Description: Tema WordPress da Ecológica Ambiental — Gestão de Resíduos e Certificação CDR. Landing page completa, responsiva, com animações em cards, botões e seções. Convertido fielmente do site oficial.
Version: 1.0.0
Requires at least: 5.9
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ecologica
Tags: business, environment, landing-page, custom-colors, responsive-layout, translation-ready
*/

/* ==========================================================================
   DESIGN TOKENS  (extraídos do index.css / tailwind.config original)
   Todas as cores em HSL.
   ========================================================================== */
:root {
  --background: 0 0% 100%;
  --foreground: 158 78% 12%;

  --card: 0 0% 100%;
  --card-foreground: 158 78% 12%;

  --primary: 158 78% 12%;            /* verde escuro */
  --primary-foreground: 0 0% 100%;

  --secondary: 88 50% 60%;           /* verde limão */
  --secondary-foreground: 158 78% 12%;

  --muted: 120 10% 95%;
  --muted-foreground: 158 30% 40%;

  --accent: 88 50% 60%;
  --accent-foreground: 158 78% 12%;

  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 100%;

  --border: 120 15% 88%;
  --input: 120 15% 88%;
  --ring: 88 50% 60%;

  --radius: 0.75rem;

  --gradient-eco: linear-gradient(135deg, hsl(158 78% 12%) 0%, hsl(158 65% 25%) 100%);
  --gradient-light: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(120 30% 98%) 100%);
  --shadow-eco: 0 10px 40px -10px hsl(158 78% 12% / 0.2);
  --shadow-eco-lg: 0 20px 60px -15px hsl(158 78% 12% / 0.3);
  --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /* atalhos de cor resolvidos */
  --c-primary: hsl(var(--primary));
  --c-primary-fg: hsl(var(--primary-foreground));
  --c-secondary: hsl(var(--secondary));
  --c-secondary-fg: hsl(var(--secondary-foreground));
  --c-bg: hsl(var(--background));
  --c-fg: hsl(var(--foreground));
  --c-muted: hsl(var(--muted));
  --c-muted-fg: hsl(var(--muted-foreground));
  --c-card: hsl(var(--card));
  --c-border: hsl(var(--border));
}

/* ==========================================================================
   RESET / BASE
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

* { border-color: var(--c-border); }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--c-bg);
  color: var(--c-fg);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe, canvas, svg { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 { overflow-wrap: break-word; hyphens: auto; margin: 0; }
p, li, a, span { overflow-wrap: break-word; }
p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { text-decoration: none; color: inherit; }

/* ==========================================================================
   CONTAINER  (equivalente ao .container do Tailwind: centrado, max 1400px)
   ========================================================================== */
.container {
  width: 100%;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 640px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }
@media (min-width: 1024px) { .container { padding-left: 2rem; padding-right: 2rem; } }

.mx-auto { margin-left: auto; margin-right: auto; }

/* Helpers de largura máxima */
.max-w-2xl { max-width: 42rem; }
.max-w-3xl { max-width: 48rem; }
.max-w-4xl { max-width: 56rem; }
.max-w-5xl { max-width: 64rem; }
.max-w-6xl { max-width: 72rem; }

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  border: none;
  text-align: center;
  line-height: 1.35;
  border-radius: 9999px;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  transition: var(--transition-smooth);
  -webkit-tap-highlight-color: transparent;
}
@media (min-width: 640px) {
  .btn { padding: 1.15rem 2rem; font-size: 1.125rem; }
}

.btn svg { transition: transform 0.3s ease; flex-shrink: 0; }
.btn:hover svg.arrow { transform: translateX(4px); }

.btn-primary {
  background: var(--c-primary);
  color: var(--c-primary-fg);
  box-shadow: var(--shadow-eco);
}
.btn-primary:hover { background: hsl(var(--primary) / 0.9); transform: scale(1.05); }

.btn-secondary {
  background: var(--c-secondary);
  color: var(--c-primary);
  box-shadow: var(--shadow-eco-lg);
}
.btn-secondary:hover { background: hsl(var(--secondary) / 0.9); transform: scale(1.05); }

.btn-light {
  background: var(--c-primary-fg);
  color: var(--c-primary);
  box-shadow: var(--shadow-eco);
}
.btn-light:hover { color: var(--c-secondary); }

.btn-outline {
  width: 100%;
  background: transparent;
  color: var(--c-fg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius);
  padding: 0.65rem 1rem;
  font-size: 0.95rem;
  font-weight: 600;
}
.btn-outline:hover {
  background: var(--c-primary);
  color: var(--c-primary-fg);
  border-color: var(--c-primary);
}

.btn-block { width: 100%; }
@media (min-width: 640px) { .btn-auto { width: auto; } }

/* ==========================================================================
   SEÇÕES / FUNDOS
   ========================================================================== */
.section { padding-top: 3rem; padding-bottom: 3rem; }
.bg-primary { background: var(--c-primary); }
.bg-muted { background: hsl(var(--muted) / 0.3); }
.bg-white { background: var(--c-bg); }
.bg-grad-light { background: var(--gradient-light); }
.bg-grad-b-muted { background: linear-gradient(180deg, var(--c-bg), hsl(var(--muted) / 0.3)); }
.bg-grad-b-from-muted { background: linear-gradient(180deg, hsl(var(--muted) / 0.3), var(--c-bg)); }
.bg-grad-b-to-muted20 { background: linear-gradient(180deg, var(--c-bg), hsl(var(--muted) / 0.2)); }
.gradient-eco { background: var(--gradient-eco); }

/* Cabeçalho de seção */
.section-head { text-align: center; margin-bottom: 3rem; }
.section-head .eyebrow-line { width: 6rem; height: 4px; background: var(--c-secondary); margin: 0 auto 1.5rem; border-radius: 2px; }
.section-title {
  font-size: clamp(1.5rem, 4vw, 3rem);
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1rem;
  color: var(--c-fg);
}
.section-subtitle {
  font-size: 1.125rem;
  color: var(--c-muted-fg);
  max-width: 48rem;
  margin: 0 auto;
  line-height: 1.7;
}
.text-primary { color: var(--c-primary); }
.text-secondary { color: var(--c-secondary); }

/* ==========================================================================
   CARDS
   ========================================================================== */
.card {
  background: var(--c-card);
  border: 1px solid var(--c-border);
  border-radius: 1rem;
  transition: var(--transition-smooth);
}
.card-2 { border-width: 2px; box-shadow: var(--shadow-eco); }
.card-hover:hover {
  border-color: var(--c-secondary);
  box-shadow: var(--shadow-eco-lg);
  transform: translateY(-8px);
}
.card-lift:hover { box-shadow: var(--shadow-eco); transform: translateY(-4px); }

/* ==========================================================================
   ANIMAÇÕES  (keyframes do tailwind.config original)
   ========================================================================== */
@keyframes fade-in    { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes fade-in-up { 0% { opacity: 0; transform: translateY(30px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes scale-in   { 0% { opacity: 0; transform: scale(0.95); } 100% { opacity: 1; transform: scale(1); } }
@keyframes float      { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

.animate-fade-in    { animation: fade-in 0.5s ease-out; }
.animate-fade-in-up { animation: fade-in-up 0.6s ease-out; }
.animate-scale-in   { animation: scale-in 0.4s ease-out; }
.animate-float      { animation: float 3s ease-in-out infinite; }

/* Itens que animam ao entrar na viewport (via IntersectionObserver) */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* Cards com stagger (aparecem em sequência) */
.stagger { opacity: 0; }
.stagger.is-visible { animation: fade-in 0.6s ease-out forwards; }
.stagger-scale { opacity: 0; }
.stagger-scale.is-visible { animation: scale-in 0.5s ease-out forwards; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal, .stagger, .stagger-scale { opacity: 1 !important; transform: none !important; }
}