/* Combined content from src/index.css and src/App.css */
/* Ensure @tailwind directives are processed or paste compiled CSS */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* src/index.css content */
@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 240 10% 3.9%;
    --card: 0 0% 100%;
    --card-foreground: 240 10% 3.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 240 10% 3.9%;
    --primary: 142 76% 36%;
    --primary-foreground: 355.7 100% 97.3%;
    --secondary: 240 4.8% 95.9%;
    --secondary-foreground: 240 5.9% 10%;
    --muted: 240 4.8% 95.9%;
    --muted-foreground: 240 3.8% 46.1%;
    --accent: 240 4.8% 95.9%;
    --accent-foreground: 240 5.9% 10%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 98%;
    --border: 240 5.9% 90%;
    --input: 240 5.9% 90%;
    --ring: 142 76% 36%;
    --radius: 0.75rem;
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 20 14.3% 4.1%;
    --foreground: 0 0% 95%;
    --card: 24 9.8% 10%;
    --card-foreground: 0 0% 95%;
    --popover: 0 0% 9%;
    --popover-foreground: 0 0% 95%;
    --primary: 142 70% 45%;
    --primary-foreground: 144.9 80.4% 10%;
    --secondary: 240 3.7% 15.9%;
    --secondary-foreground: 0 0% 98%;
    --muted: 0 0% 15%;
    --muted-foreground: 240 5% 64.9%;
    --accent: 12 6.5% 15.1%;
    --accent-foreground: 0 0% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 85.7% 97.3%;
    --border: 240 3.7% 15.9%;
    --input: 240 3.7% 15.9%;
    --ring: 142 70% 45%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;

  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
    font-feature-settings: "rlig" 1, "calt" 1;
  }
}

@layer utilities {
  .text-balance {
    text-wrap: balance;
  }
}

/* src/App.css content */
#root { /* In WordPress, this might be body or a specific wrapper like #page */
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem; /* This might conflict with full-width sections. Adjust as needed. */
  text-align: center;
  color: var(--accent);
}

.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.react:hover {
  filter: drop-shadow(0 0 2em #61dafbaa);
}

@keyframes logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: no-preference) {
  a:nth-of-type(2) .logo { /* This selector might need adjustment in WP context */
    animation: logo-spin infinite 20s linear;
  }
}

.card { /* This is a generic class, ensure it doesn't conflict with Tailwind card components if used */
  padding: 2em;
}

.read-the-docs {
  color: #888;
}

/* Add any custom animation keyframes used in your React components if not handled by Tailwind */
@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in { animation: fade-in 0.8s ease-out forwards; opacity: 0; }


@keyframes scale-in {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
.animate-scale-in { animation: scale-in 0.6s ease-out forwards; opacity: 0; }

/*
==================================================================
  GENERATED UTILITY CLASSES FOR CUSTOM COLORS
  - Based on your tailwind.config.js
  - Replaces the need for a build step when using the CDN
==================================================================
*/

/* --- PUSCH-GREEN PALETTE --- */

/* Text Colors: text-pusch-green-... */
.text-pusch-green-50   { color: #f0fdf4; }
.text-pusch-green-100  { color: #dcfce7; }
.text-pusch-green-200  { color: #bbf7d0; }
.text-pusch-green-300  { color: #86efac; }
.text-pusch-green-400  { color: #4ade80; }
.text-pusch-green-500  { color: #22c55e; }
.text-pusch-green-600  { color: #16a34a; }
.text-pusch-green-700  { color: #15803d; }
.text-pusch-green-800  { color: #166534; }
.text-pusch-green-900  { color: #14532d; }

/* Background Colors: bg-pusch-green-... */
.bg-pusch-green-50   { background-color: #f0fdf4; }
.bg-pusch-green-100  { background-color: #dcfce7; }
.bg-pusch-green-200  { background-color: #bbf7d0; }
.bg-pusch-green-300  { background-color: #86efac; }
.bg-pusch-green-400  { background-color: #4ade80; }
.bg-pusch-green-500  { background-color: #22c55e; }
.bg-pusch-green-600  { background-color: #16a34a; }
.bg-pusch-green-700  { background-color: #15803d; }
.bg-pusch-green-800  { background-color: #166534; }
.bg-pusch-green-900  { background-color: #14532d; }

/* Border Colors: border-pusch-green-... */
.border-pusch-green-50   { border-color: #f0fdf4; }
.border-pusch-green-100  { border-color: #dcfce7; }
.border-pusch-green-200  { border-color: #bbf7d0; }
.border-pusch-green-300  { border-color: #86efac; }
.border-pusch-green-400  { border-color: #4ade80; }
.border-pusch-green-500  { border-color: #22c55e; }
.border-pusch-green-600  { border-color: #16a34a; }
.border-pusch-green-700  { border-color: #15803d; }
.border-pusch-green-800  { border-color: #166534; }
.border-pusch-green-900  { border-color: #14532d; }

/* Gradient From: from-pusch-green-... */
.from-pusch-green-50   { --tw-gradient-from: #f0fdf4 var(--tw-gradient-from-position); --tw-gradient-to: rgb(240 253 244 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-100  { --tw-gradient-from: #dcfce7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(220 252 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-200  { --tw-gradient-from: #bbf7d0 var(--tw-gradient-from-position); --tw-gradient-to: rgb(187 247 208 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-300  { --tw-gradient-from: #86efac var(--tw-gradient-from-position); --tw-gradient-to: rgb(134 239 172 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-400  { --tw-gradient-from: #4ade80 var(--tw-gradient-from-position); --tw-gradient-to: rgb(74 222 128 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-500  { --tw-gradient-from: #22c55e var(--tw-gradient-from-position); --tw-gradient-to: rgb(34 197 94 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-600  { --tw-gradient-from: #16a34a var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 163 74 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-700  { --tw-gradient-from: #15803d var(--tw-gradient-from-position); --tw-gradient-to: rgb(21 128 61 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-800  { --tw-gradient-from: #166534 var(--tw-gradient-from-position); --tw-gradient-to: rgb(22 101 52 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-pusch-green-900  { --tw-gradient-from: #14532d var(--tw-gradient-from-position); --tw-gradient-to: rgb(20 83 45 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* Gradient To: to-pusch-green-... */
.to-pusch-green-50   { --tw-gradient-to: #f0fdf4 var(--tw-gradient-to-position); }
.to-pusch-green-100  { --tw-gradient-to: #dcfce7 var(--tw-gradient-to-position); }
.to-pusch-green-200  { --tw-gradient-to: #bbf7d0 var(--tw-gradient-to-position); }
.to-pusch-green-300  { --tw-gradient-to: #86efac var(--tw-gradient-to-position); }
.to-pusch-green-400  { --tw-gradient-to: #4ade80 var(--tw-gradient-to-position); }
.to-pusch-green-500  { --tw-gradient-to: #22c55e var(--tw-gradient-to-position); }
.to-pusch-green-600  { --tw-gradient-to: #16a34a var(--tw-gradient-to-position); }
.to-pusch-green-700  { --tw-gradient-to: #15803d var(--tw-gradient-to-position); }
.to-pusch-green-800  { --tw-gradient-to: #166534 var(--tw-gradient-to-position); }
.to-pusch-green-900  { --tw-gradient-to: #14532d var(--tw-gradient-to-position); }

/* --- NATURE PALETTE --- */

/* Text Colors: text-nature-... */
.text-nature-50   { color: #f7fee7; }
.text-nature-100  { color: #ecfccb; }
.text-nature-200  { color: #d9f99d; }
.text-nature-300  { color: #bef264; }
.text-nature-400  { color: #a3e635; }
.text-nature-500  { color: #84cc16; }
.text-nature-600  { color: #65a30d; }
.text-nature-700  { color: #4d7c0f; }
.text-nature-800  { color: #3f6212; }
.text-nature-900  { color: #365314; }

/* Background Colors: bg-nature-... */
.bg-nature-50   { background-color: #f7fee7; }
.bg-nature-100  { background-color: #ecfccb; }
.bg-nature-200  { background-color: #d9f99d; }
.bg-nature-300  { background-color: #bef264; }
.bg-nature-400  { background-color: #a3e635; }
.bg-nature-500  { background-color: #84cc16; }
.bg-nature-600  { background-color: #65a30d; }
.bg-nature-700  { background-color: #4d7c0f; }
.bg-nature-800  { background-color: #3f6212; }
.bg-nature-900  { background-color: #365314; }

/* Border Colors: border-nature-... */
.border-nature-50   { border-color: #f7fee7; }
.border-nature-100  { border-color: #ecfccb; }
.border-nature-200  { border-color: #d9f99d; }
.border-nature-300  { border-color: #bef264; }
.border-nature-400  { border-color: #a3e635; }
.border-nature-500  { border-color: #84cc16; }
.border-nature-600  { border-color: #65a30d; }
.border-nature-700  { border-color: #4d7c0f; }
.border-nature-800  { border-color: #3f6212; }
.border-nature-900  { border-color: #365314; }

/* Gradient From: from-nature-... */
.from-nature-50   { --tw-gradient-from: #f7fee7 var(--tw-gradient-from-position); --tw-gradient-to: rgb(247 254 231 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-100  { --tw-gradient-from: #ecfccb var(--tw-gradient-from-position); --tw-gradient-to: rgb(236 252 203 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-200  { --tw-gradient-from: #d9f99d var(--tw-gradient-from-position); --tw-gradient-to: rgb(217 249 157 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-300  { --tw-gradient-from: #bef264 var(--tw-gradient-from-position); --tw-gradient-to: rgb(190 242 100 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-400  { --tw-gradient-from: #a3e635 var(--tw-gradient-from-position); --tw-gradient-to: rgb(163 230 53 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-500  { --tw-gradient-from: #84cc16 var(--tw-gradient-from-position); --tw-gradient-to: rgb(132 204 22 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-600  { --tw-gradient-from: #65a30d var(--tw-gradient-from-position); --tw-gradient-to: rgb(101 163 13 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-700  { --tw-gradient-from: #4d7c0f var(--tw-gradient-from-position); --tw-gradient-to: rgb(77 124 15 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-800  { --tw-gradient-from: #3f6212 var(--tw-gradient-from-position); --tw-gradient-to: rgb(63 98 18 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.from-nature-900  { --tw-gradient-from: #365314 var(--tw-gradient-from-position); --tw-gradient-to: rgb(54 83 20 / 0) var(--tw-gradient-to-position); --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }

/* Gradient To: to-nature-... */
.to-nature-50   { --tw-gradient-to: #f7fee7 var(--tw-gradient-to-position); }
.to-nature-100  { --tw-gradient-to: #ecfccb var(--tw-gradient-to-position); }
.to-nature-200  { --tw-gradient-to: #d9f99d var(--tw-gradient-to-position); }
.to-nature-300  { --tw-gradient-to: #bef264 var(--tw-gradient-to-position); }
.to-nature-400  { --tw-gradient-to: #a3e635 var(--tw-gradient-to-position); }
.to-nature-500  { --tw-gradient-to: #84cc16 var(--tw-gradient-to-position); }
.to-nature-600  { --tw-gradient-to: #65a30d var(--tw-gradient-to-position); }
.to-nature-700  { --tw-gradient-to: #4d7c0f var(--tw-gradient-to-position); }
.to-nature-800  { --tw-gradient-to: #3f6212 var(--tw-gradient-to-position); }
.to-nature-900  { --tw-gradient-to: #365314 var(--tw-gradient-to-position); }

/* Styles for AppNavbar fixed behavior, mobile menu etc. should be here */
/* The cn() utility in React uses Tailwind, so these classes should largely work if Tailwind is set up right. */
/* You may need to manually define color variables if not using Tailwind's color palette directly, */
/* or ensure your Tailwind config matches the one used in the React project. */

.hero-slide-item,
.hero-slide-content {
    display: none; /* Ocultos por defecto */
    opacity: 0;
    transition: opacity 0.8s ease-in-out;
}

.hero-slide-item.is-active,
.hero-slide-content.is-active {
    display: block; /* Visibles cuando están activos */
    opacity: 1;
}

.hero-slider-indicator {
    background-color: rgba(255, 255, 255, 0.5);
    transition: background-color 0.3s ease;
}

.hero-slider-indicator.is-active {
    background-color: white;
}