:root{
    --bg:#346D4D;         /* verde de fondo */
    --text:#F1F6EA;       /* titular */
    --muted:#E0E9D7;      /* texto secundario */
    --chip:#EDEFE6;       /* chips/nav */
    --orange:#FF8C1A;     /* CTA */
    --orange-600:#E67A0B; /* hover */
    --ink:#0F140F;        /* nav text */
    --nav-bg:#274E38;     /* fondo navbar */
    --maxw:1100px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0; font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
    background:var(--bg); color:var(--text);
    -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
    display:flex; flex-direction:column; min-height:100%;
}
a{color:inherit; text-decoration:none}
main{flex:1;}
.container{max-width:var(--maxw); margin-inline:auto; padding:16px clamp(16px, 3vw, 24px)}

/* NAVBAR */
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px;}
.brand{display:flex; align-items:center; gap:10px;}
.brand__logo{display:grid; place-items:center; inline-size:40px; block-size:40px; border-radius:12px; background:var(--chip); color:#2F5D43; font-weight:800}
.brand__mark{display:block; height:44px; width:auto;}

.nav__links{
    display:flex;
    gap:28px;
    align-items:center;
    background:var(--nav-bg);
    border-radius:18px;
    padding:10px 20px;
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 12px 24px rgba(0,0,0,.18);
    color:var(--text);
}
.nav__link{opacity:.9; font-weight:600; color:var(--text);}
.nav__link:hover{color:#fff;}
.nav__cta{background:var(--orange); color:#212121; padding:10px 16px; border-radius:999px; font-weight:800; box-shadow:0 6px 0 rgba(0,0,0,.2) inset, 0 10px 20px rgba(0,0,0,.15)}
.nav__cta:hover{background:var(--orange-600)}

/* MOBILE MENU */
.hamb{display:none; inline-size:44px; block-size:44px; border-radius:10px; border:1px solid rgba(255,255,255,.15)}
.hamb span{display:block; width:22px; height:2px; background:#fff; margin:6px auto}
@media (max-width:860px){
    .nav__links{display:none}
    .hamb{display:grid; place-items:center}
    .drawer{position:fixed; inset:0 0 0 40%; background:#274E38; transform:translateX(100%); transition:transform .25s ease; padding:18px}
    .drawer.open{transform:none}
    .drawer a{display:block; padding:14px 10px; border-radius:10px; margin-bottom:4px; color:#F0F6EC}
    .drawer .nav__cta{display:inline-block; margin-top:8px}
}

/* HERO */
.hero{display:grid; grid-template-columns: 1.05fr .95fr; gap:32px; align-items:center; padding-block:clamp(16px, 3.5vw, 28px) 40px}
@media (max-width:980px){.hero{grid-template-columns:1fr}}

.headline{font-size:clamp(2rem, 6vw, 5rem); line-height:.95; font-weight:900; letter-spacing:-1.4px}
.tagline{color:var(--muted); font-weight:600; margin-top:18px; max-width:60ch}
.ctas{margin-top:26px}
.cta{display:inline-block; background:var(--orange); color:#1D1D1D; font-weight:900; padding:18px 24px; border-radius:999px; box-shadow:0 12px 24px rgba(0,0,0,.2), 0 0 0 6px rgba(0,0,0,.05) inset}
.cta:hover{background:var(--orange-600)}

/* ILLUSTRATION SIDE */
.art{
    position:relative; min-height:380px; display:grid; place-items:center;
}
.blob{position:absolute; inset:auto; width:min(520px, 95%); aspect-ratio:1/1; filter:blur(40px); opacity:.25; border-radius:50%; background:radial-gradient(circle at 40% 40%, #ffffff 0 20%, #c6ffdd 35%, #93e9be 52%, transparent 60%)}
.frame{position:relative; width:min(520px, 95%); aspect-ratio:1/1; display:grid; place-items:center; overflow:visible; cursor:pointer}
.frame::after{
    content:"";
    position:absolute;
    inset:auto 0 4% 0;
    margin-inline:auto;
    width:65%;
    height:14%;
    border-radius:50%;
    background:rgba(0,0,0,.35);
    filter:blur(22px);
    z-index:-1;
    opacity:0;
    transform:translateY(40%) scale(.6);
    transition:opacity .4s ease, transform .4s ease;
    pointer-events:none;
}
.frame img{
    width:100%; height:100%; object-fit:contain;
    filter:drop-shadow(0 20px 28px rgba(0,0,0,.3));
    transform:translateY(0) scale(1);
    transform-origin:center 75%;
    transition:transform .4s ease, filter .4s ease;
}
.frame:hover img,
.frame img:hover{
    transform:translateY(-26px) scale(1.03);
    filter:drop-shadow(0 38px 52px rgba(0,0,0,.5));
}
.frame:hover::after{
    opacity:1;
    transform:translateY(0) scale(.95);
}
.badge{position:absolute; right:6%; top:6%; background:#274E38; border:1px solid rgba(255,255,255,.15); color:#E9F3EA; padding:8px 12px; border-radius:999px; font-size:.85rem; font-weight:700}

/* FOOTER */
footer{
    width:100%;
    background:linear-gradient(145deg, #3A2110 0%, #1F1008 100%);
    color:#F5E6C8;
    border-top:1px solid rgba(0,0,0,.4);
    box-shadow:0 -12px 28px rgba(0,0,0,.35);
}
.footer__inner{
    display:flex;
    justify-content:center;
    align-items:center;
    padding:36px min(5vw, 40px);
    font-size:1rem;
    font-weight:800;
    text-align:center;
}