:root{
  --forest:#10261d;--forest2:#17382a;--leaf:#527c45;--lime:#b7cf58;
  --sand:#e9dfc9;--cream:#f5f1e7;--ink:#17201b;--muted:#68736b;--white:#fff;
  --line:rgba(23,32,27,.12);--max:1240px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Arial,Helvetica,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6}
a{text-decoration:none;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
.container{width:min(calc(100% - 48px),var(--max));margin:auto}
.nav{position:absolute;z-index:10;top:0;left:0;width:100%;color:#fff;border-bottom:1px solid rgba(255,255,255,.2)}
.nav-inner{height:86px;display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:13px;font-weight:700;letter-spacing:.08em;font-size:14px}
.brand-mark{width:38px;height:38px;border:1px solid rgba(255,255,255,.65);border-radius:50%;display:grid;place-items:center;font-size:17px}
.menu{display:flex;gap:30px;font-size:13px;font-weight:600;letter-spacing:.04em}
.menu a{opacity:.9}.menu a:hover{opacity:1;color:var(--lime)}
.nav-cta{border:1px solid rgba(255,255,255,.65);padding:11px 18px;border-radius:2px;font-size:12px;font-weight:700}
.hero{min-height:780px;background:linear-gradient(90deg,rgba(6,20,14,.82),rgba(6,20,14,.34) 58%,rgba(6,20,14,.18)),url("../img/hero-fondo.webp") center/cover;display:flex;align-items:flex-end;color:#fff;padding:150px 0 92px}
.hero-content{max-width:850px}
.kicker{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:var(--lime);font-weight:700;margin-bottom:22px}
h1{font-size:clamp(48px,7vw,92px);line-height:.94;letter-spacing:-.045em;font-weight:500;max-width:900px}
.hero p{font-size:19px;max-width:690px;margin:28px 0 35px;color:rgba(255,255,255,.88)}
.buttons{display:flex;gap:12px;flex-wrap:wrap}
.btn{padding:14px 22px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.55)}
.btn.primary{background:var(--lime);color:var(--forest);border-color:var(--lime)}
.scroll{margin-top:65px;display:flex;align-items:center;gap:13px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;opacity:.7}
.scroll:before{content:"";width:55px;height:1px;background:#fff}
.intro{padding:115px 0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}
.eyebrow{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--leaf);font-weight:800;margin-bottom:18px}
h2{font-size:clamp(38px,5vw,64px);line-height:1.02;letter-spacing:-.035em;font-weight:500}
.lead{font-size:19px;color:#4d5851;margin:25px 0;max-width:620px}
.body{color:#68736b;max-width:650px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:35px;padding-top:25px;gap:20px}
.stat strong{font-size:28px;font-weight:500;display:block}.stat span{font-size:10px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted)}
.photo-card{height:600px;position:relative}
.photo-card img{border-radius:2px}
.photo-caption{position:absolute;bottom:22px;left:22px;background:rgba(16,38,29,.88);color:#fff;padding:14px 18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.dark{background:var(--forest);color:#fff;padding:115px 0}
.dark .eyebrow{color:var(--lime)}.dark .body{color:rgba(255,255,255,.68)}
.ecosystems{margin-top:65px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.eco{min-height:370px;position:relative;overflow:hidden}
.eco img{transition:transform .6s}.eco:hover img{transform:scale(1.04)}
.eco:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 35%,rgba(0,0,0,.78))}
.eco-text{position:absolute;z-index:2;left:28px;right:28px;bottom:28px}.eco-text small{color:var(--lime);font-weight:700;letter-spacing:.16em}.eco-text h3{font-size:29px;font-weight:500;margin-top:5px}
.bio{padding:115px 0}
.bio-head{display:flex;justify-content:space-between;gap:50px;align-items:end;margin-bottom:55px}
.bio-head .body{max-width:480px}
.species{display:grid;grid-template-columns:1.2fr .8fr .8fr;grid-template-rows:300px 300px;gap:14px}
.species-card{position:relative;overflow:hidden}
.species-card:first-child{grid-row:span 2}
.species-card:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 40%,rgba(0,0,0,.72))}
.species-card div{position:absolute;z-index:2;left:25px;bottom:22px;color:#fff}.species-card h3{font-size:26px;font-weight:500}.species-card span{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#d6e89a}
.night{min-height:650px;background:linear-gradient(90deg,rgba(4,16,12,.92),rgba(4,16,12,.35)),url("../img/laguna.webp") center/cover;color:#fff;display:flex;align-items:center}
.night .content{max-width:680px}.night h2{font-size:clamp(42px,6vw,74px)}.night p{font-size:19px;color:rgba(255,255,255,.8);margin:25px 0 35px}
.visit{padding:115px 0}
.visit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:55px}
.info-card{background:#fff;padding:34px;min-height:250px;border:1px solid var(--line)}
.number{font-size:12px;color:var(--leaf);font-weight:800;letter-spacing:.15em}.info-card h3{font-size:25px;font-weight:500;margin:45px 0 10px}.info-card p{font-size:14px;color:var(--muted)}
.conserve{background:var(--sand);padding:105px 0}
.conserve-inner{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px;align-items:start}
.principles{display:grid;grid-template-columns:1fr 1fr;gap:30px;border-top:1px solid rgba(23,32,27,.2);padding-top:25px}
.principle h3{font-size:17px;margin-bottom:7px}.principle p{font-size:13px;color:#68736b}
.explore{padding:115px 0;background:#fff}
.explore-box{background:var(--forest);color:#fff;padding:70px;display:flex;align-items:center;justify-content:space-between;gap:50px}
.explore-box h2{max-width:650px}.explore-box p{color:rgba(255,255,255,.7);max-width:600px;margin-top:18px}
.footer{background:#0a1711;color:#fff;padding:70px 0 28px}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:50px;padding-bottom:60px}
.footer h4{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);margin-bottom:18px}.footer a,.footer p{font-size:13px;color:rgba(255,255,255,.62);display:block;margin:8px 0}.footer-brand{font-size:20px;font-weight:500;max-width:310px}.bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:22px;font-size:11px;color:rgba(255,255,255,.4);display:flex;justify-content:space-between}
@media(max-width:850px){
 .menu{display:none}.nav-cta{margin-left:auto}.container{width:min(calc(100% - 32px),var(--max))}
 .hero{min-height:720px;padding-bottom:65px}.hero p{font-size:16px}.grid2,.conserve-inner{grid-template-columns:1fr;gap:45px}.photo-card{height:430px}
 .stats{grid-template-columns:1fr 1fr}.ecosystems,.visit-grid{grid-template-columns:1fr}.eco{min-height:320px}
 .bio-head{display:block}.species{grid-template-columns:1fr 1fr;grid-template-rows:260px 260px}.species-card:first-child{grid-column:span 2;grid-row:auto}
 .explore-box{padding:45px 30px;display:block}.explore-box .btn{display:inline-block;margin-top:30px}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
 h1{font-size:50px}.intro,.dark,.bio,.visit,.explore{padding:80px 0}.hero{min-height:680px}
 .stats{grid-template-columns:1fr}.species{display:block}.species-card{height:280px;margin-bottom:12px}.principles{grid-template-columns:1fr}
 .footer-grid{grid-template-columns:1fr}.bottom{display:block}.bottom span{display:block;margin-top:8px}
}
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.brand img {
    display: block;
    width: 240px;
    height: auto;
}