
:root{
  --bg:#eff7ea;
  --primary:#1b4d3e; /* verde oscuro */
  --accent:#f5c518; /* amarillo sol */
  --muted:#2f6f57;
  --card:#ffffff;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif;background:var(--bg);color:#10352a}
img{max-width:100%;display:block}
.container{width:min(1120px,92%);margin:auto}

.nav{position:sticky;top:0;background:#fff;box-shadow:0 4px 14px rgba(0,0,0,.06);z-index:50}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:.6rem 0}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--primary);font-weight:700}
.brand img{width:40px;height:40px;border-radius:8px;object-fit:cover}
.nav nav{display:flex;gap:1rem;align-items:center}
.nav nav a{color:var(--primary);text-decoration:none;font-weight:600}
.nav nav a:hover{color:var(--muted)}
.btn{background:var(--primary);color:#fff;padding:.8rem 1.1rem;border-radius:999px;text-decoration:none;display:inline-block;font-weight:700;box-shadow:0 10px 20px rgba(27,77,62,.2)}
.btn:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;color:var(--primary);border:2px solid var(--primary)}
.btn-outline{background:transparent;border:1px solid var(--primary);color:var(--primary)}

.hero{padding:4.5rem 0 3rem;background:linear-gradient(180deg,#e6f5df,transparent)}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero-copy h1{font-size:clamp(2rem,4vw,3rem);margin:.2rem 0}
.hero-copy .accent{font-family:Pacifico,cursive;color:var(--accent)}
.hero-copy p{font-size:1.05rem;line-height:1.7}
.cta{display:flex;gap:.8rem;margin:1rem 0 1.2rem}
.badges{display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0;list-style:none}
.badges li{background:#fff;border:1px dashed #cfe5d6;padding:.45rem .7rem;border-radius:999px;color:var(--muted);font-weight:600}
.hero-media{border-radius:22px;overflow:hidden;box-shadow:0 20px 40px rgba(0,0,0,.12)}

.features{padding:3rem 0}
.features h2,.gallery h2,.video-wrap h2,.contact h2{font-size:2rem;margin:0 0 1.2rem}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.card{background:var(--card);padding:1.1rem;border-radius:18px;box-shadow:0 16px 28px rgba(0,0,0,.08);border:1px solid #e8f1eb}
.card h3{margin:.2rem 0;color:var(--primary)}
.card p{margin:0;color:#234}

.gallery{padding:2rem 0 3rem}
.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.7rem}
.grid img{border-radius:16px;object-fit:cover;aspect-ratio:1/1;box-shadow:0 10px 20px rgba(0,0,0,.08)}

.video-wrap{padding:2rem 0 3rem}
.video-frame{border-radius:18px;overflow:hidden;box-shadow:0 16px 30px rgba(0,0,0,.1)}

.contact{padding:2.5rem 0 4rem;background:linear-gradient(180deg,transparent,#eaf7e8)}
.contact-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:start}
.contact-list{list-style:none;padding:0;margin:0 0 1rem 0}
.contact-list li{margin:.4rem 0}
.form{background:#fff;padding:1rem;border-radius:16px;box-shadow:0 14px 26px rgba(0,0,0,.08);border:1px solid #e6efe8}
.form label{display:block;font-weight:600;margin:.6rem 0 .2rem}
.form input,.form textarea{width:100%;padding:.75rem;border:1px solid #d6e6dc;border-radius:12px;font:inherit}
.form button{margin-top:.8rem}

.footer{background:#0f2f25;color:#d7f0e6}
.footer-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 0}
.footer a{color:#bfead6}

@media (max-width: 980px){
  .hero-grid,.contact-grid{grid-template-columns:1fr}
  .cards{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width: 640px){
  .nav nav{display:none}
  .cards{grid-template-columns:1fr}
  .grid{grid-template-columns:repeat(2,1fr)}
}
