.hero-bg {
    background-image: url('https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=1470&q=80');
    background-size: cover;
    background-position: center;
    position: absolute;
    inset: 0;
    z-index: -2;
  }
  
  /* Overlay degradado */
  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom right, rgba(20,60,20,0.7), rgba(50,100,50,0.5));
    z-index: -1;
  }
  
  /* Partículas pequeñas animadas */
  .particle {
    position: absolute;
    border-radius: 50%;
    opacity: 0.7;
     background-color: #dc2626; /* rojo */
    animation: floatUp linear infinite;
  }
  
  @keyframes floatUp {
    0% { transform: translateY(100vh) scale(0.5); opacity: 0; }
    10% { opacity: 0.6; }
    100% { transform: translateY(-50px) scale(1); opacity: 0; }
  }
  
  /* Hojas verdes que caen suavemente */
  .leaf {
    position: absolute;
    width: 40px;
    height: 40px;
    background-image: url('https://img.icons8.com/fluency/48/leaf.png');
    background-size: contain;
    background-repeat: no-repeat;
    animation: leafFall linear infinite;
  }
  
  @keyframes leafFall {
    0% { transform: translateY(-50px) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    100% { transform: translateY(110vh) rotate(360deg); opacity: 0; }
  }
  
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;600;800&display=swap');
body { font-family: 'Manrope', sans-serif; }

/* Animaciones */
@keyframes fadeInUp { 0%{opacity:0; transform:translateY(20px);} 100%{opacity:1; transform:translateY(0);} }
.fadeInUp { animation: fadeInUp 1s ease-out forwards; }

/* Parallax hero */
.hero-bg { background-attachment: fixed; background-size: cover; background-position: center; }

/* Hover cards */
.card-hover:hover { transform: translateY(-10px) scale(1.05); box-shadow: 0 20px 30px rgba(0,0,0,0.2); }


@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.float {
  animation: float 3s ease-in-out infinite;
}

/* Offset de anclas para header fijo */
:root { --header-offset: 76px; }
@media (min-width: 768px) { :root { --header-offset: 92px; } }
/* Aplicar offset a cualquier elemento anclable */
[id] { scroll-margin-top: var(--header-offset); }

/* Ocultar header al hacer scroll */
.hide-header { transform: translateY(-100%); }*** End Patch