:root{
  --bg:#f6f8f7;
  --ink:#0f172a;
  --muted:#475569;
  --grass:#1b5e20;
  --grass-2:#2e7d32;
  --ring:#e5e7eb;
  --card:#ffffff;
  --accent:#12b981;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
}
a{color:var(--grass-2);text-decoration:none}
a:hover{text-decoration:underline}
.container{max-width:1100px;margin:0 auto;padding:0 20px}
/* Header */
.header{
  background:
    linear-gradient(0deg, rgba(6,24,12,.88), rgba(6,24,12,.88)),
    url('../img/hero-grass.svg') center/cover no-repeat;
  background:linear-gradient(180deg,#0b3d18, #115e2c);
  color:#fff;
  position:sticky;top:0;z-index:50
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.3px}
.logo__mark{
  width:36px;height:36px;border-radius:10px;
  background:linear-gradient(135deg,#0b3d18 0%,#1a8f3a 100%);
  display:grid;place-items:center;color:#fff;font-weight:900;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.nav{display:flex;gap:22px;align-items:center}
.nav a{color:#e6fff2;font-weight:600}
.nav a:hover{opacity:.85}
/* Mobile nav */
.menu-btn{display:none;background:#fff;color:#0b3d18;border:0;padding:8px 12px;border-radius:10px}
@media (max-width: 800px){
  .nav{display:none}
  .menu-btn{display:block}
  .nav.mobile{display:flex;flex-direction:column;gap:14px;padding:14px 0}
  .header-inner{flex-wrap:wrap}
}
/* Hero */
.hero{
  /* Parallax: image fixed, overlay scrolls */
  background-attachment: scroll, fixed;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  position:relative;
  background:
    linear-gradient(0deg, rgba(6,24,12,.75), rgba(6,24,12,.75)),
    url('../img/hero-grass-dew.png') center/cover no-repeat;
  color:#fff;
  padding:40px 0 60px;
  overflow:hidden;
}
.hero h1{font-size:clamp(28px,4vw,40px);margin:0 0 10px}
.hero p{max-width:720px;margin:0 0 22px;color:#dcfce7}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;border:1px solid transparent;
  font-weight:700;cursor:pointer;text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:#22c55e;color:#052e16;box-shadow:0 10px 24px rgba(34,197,94,.25)}
.btn-outline{background:transparent;color:#fff;border-color:#9ef7c1}
.btn-whatsapp{background:#25D366;color:#052e16;box-shadow:0 10px 24px rgba(37,211,102,.25)}
/* Cards */
.section{padding:48px 0}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width: 900px){.grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){.grid{grid-template-columns:1fr}}
.card{
  background:var(--card);border:1px solid var(--ring);border-radius:18px;overflow:hidden;
  box-shadow:0 10px 20px rgba(2,6,23,.05);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{transform:translateY(-4px);box-shadow:0 16px 30px rgba(2,6,23,.10)}
.card__media{aspect-ratio:16/9;background:linear-gradient(135deg,#176b37,#209f53);}
.card__body{padding:16px 16px 18px}
.card__title{margin:0 0 6px;font-weight:800}
.card__desc{margin:0;color:var(--muted)}
/* Footer */
.footer{
  /* Parallax: image fixed, overlay scrolls */
  background-attachment: scroll, fixed;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  padding:26px 0;
  color:#eafff1;
  background:
    linear-gradient(0deg, rgba(6,24,12,.9), rgba(6,24,12,.9)),
    url('../img/hero-grass-dew.png') center/cover no-repeat;
  border-top:1px solid rgba(203,234,216,.35);
}
.footer a{ color:#b6ffcf; }
.footer a:hover{ color:#dcffe9; }
.page-hero{
  /* Parallax: image fixed, overlay scrolls */
  background-attachment: scroll, fixed;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
  background-size: auto, cover;
  background:
    linear-gradient(0deg, rgba(6,24,12,.82), rgba(6,24,12,.82)),
    url('../img/hero-grass-dew.png') center/cover no-repeat;
  color:#e8ffe8;
  padding:40px 0;
}
.form{
  background:var(--card);border:1px solid var(--ring);border-radius:18px;padding:18px;
  box-shadow:0 12px 26px rgba(2,6,23,.06);
}
.input{
  width:100%;padding:12px 14px;border-radius:12px;border:1px solid #c6d7c8;background:#fff;
}
.input:focus{outline:none;border-color:#22c55e;box-shadow:0 0 0 4px rgba(34,197,94,.2)}
.label{font-weight:700;margin-bottom:6px;display:block}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:800px){.row{grid-template-columns:1fr}}
textarea.input{min-height:120px;resize:vertical}
.small{color:#64748b;font-size:.9rem}
.success{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 14px;border-radius:12px;margin-top:10px;display:none}


@media (max-width: 900px) {
  .hero, .page-hero, .footer{
    background-attachment: scroll, scroll;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero, .page-hero, .footer{
    background-attachment: scroll, scroll;
  }
}

/* ------------------------------------------- */
/* Botón Flotante de WhatsApp */
/* ------------------------------------------- */

.whatsapp-float {
    /* 1. Posicionamiento Fijo para seguir el scroll */
    position: fixed;
    bottom: 40px; /* Distancia desde la parte inferior */
    right: 40px; /* Distancia desde el borde derecho */
    z-index: 1000; /* Asegura que esté por encima de todos los demás elementos */
    
    /* 2. Sombra y transición para estética */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 50%; /* Asegura que la imagen sea redonda */
    transition: transform 0.3s ease-in-out;
    
    /* 3. Aplicación del efecto de subir y bajar */
    animation: float 2.5s ease-in-out infinite;
}

.whatsapp-float img {
    /* Asegura que la imagen ocupe todo el espacio del contenedor */
    display: block;
    border-radius: 50%;
    /* Pequeña mejora visual al pasar el mouse */
    transition: transform 0.2s;
}

.whatsapp-float:hover {
    transform: scale(1.05); /* Ligeramente más grande al pasar el mouse */
}

/* Definición de la animación de Subir y Bajar */
@keyframes float {
    0% {
        transform: translateY(0); /* Posición inicial */
    }
    50% {
        transform: translateY(-10px); /* El botón sube 10px */
    }
    100% {
        transform: translateY(0); /* Vuelve a la posición inicial */
    }
}

/* Adaptación para Dispositivos Móviles */
@media (max-width: 768px) {
    .whatsapp-float {
        bottom: 20px;
        right: 20px;
    }
    .whatsapp-float img {
        width: 50px;
        height: 50px;
    }
}
/* 1. LAYOUT GENERAL DEL MENÚ (Flexbox) */
.nav {
  display: flex; /* Activa Flexbox para los elementos del menú */
  gap: 20px; /* Agrega espacio uniforme entre los enlaces */
  align-items: center;
  /* (Asegúrate de que el contenedor header-inner ya tenga justify-content: space-between;
     o similar para separar el logo y el menú) */
}

.nav a {
  white-space: nowrap; /* Evita que el texto de los enlaces se rompa en varias líneas */
  text-decoration: none;
  padding: 8px 0;
  /* Otros estilos de color/fuente que ya tengas */
}


/* 2. ESTILOS DEL MENÚ DESPLEGABLE (Dropdown) */
.nav-dropdown {
  position: relative; /* Es crucial para posicionar el submenú */
  display: inline-block;
}

.nav-dropdown-trigger {
  /* Estilo del enlace principal, igual que los otros <a> */
  padding-right: 20px; /* Deja espacio para un posible icono de flecha */
  position: relative;
}

.nav-dropdown-content {
  display: none; /* Por defecto, oculto */
  position: absolute;
  background-color: #387042; /* Color de fondo del submenú, similar al header */
  min-width: 180px;
  z-index: 10; /* Asegura que el submenú quede encima de otros elementos */
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  top: 100%; /* Lo posiciona justo debajo del enlace principal */
  left: 0;
  padding: 8px 0;
}

/* Estilos de los enlaces dentro del submenú */
.nav-dropdown-content a {
  color: white;
  padding: 10px 16px;
  text-decoration: none;
  display: block; /* Hace que cada enlace ocupe todo el ancho */
  text-align: left;
}

/* Efecto al pasar el mouse por encima del enlace principal */
.nav-dropdown:hover .nav-dropdown-content {
  display: block; /* Muestra el submenú al hacer hover sobre el contenedor */
}