:root{
    /* Paleta verde más oscura */
    --green-1:#b1f1c3f2; /* fondo suave, un poco más oscuro */
    --green-2:#8ddfa9; /* acento intermedio más profundo */
    --green-3:#2f7a3a; /* verde principal oscuro */
    --green-4:#113d22; /* verde muy oscuro para encabezados y acentos */
    --accent:#072817; /* texto principal muy oscuro */
    --muted:#465246; /* texto secundario más oscuro */
    --radius:12px;
    --max-width:1100px;
    --glass: rgba(255,255,255,0.06);
}
    *{box-sizing:border-box}
    body{font-family:Inter, system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial; margin:0; color:var(--accent); background:linear-gradient(180deg,var(--green-1),#ffffff); -webkit-font-smoothing:antialiased}
    .container{max-width:var(--max-width); margin:0 auto; padding:2rem}
    .nav-toggle{display:none; background:transparent; border:0; font-size:1.4rem; margin-left:auto; cursor:pointer}
    .site-header{backdrop-filter: blur(6px); background:linear-gradient(180deg, rgba(17,61,34,0.06), transparent); position:sticky; top:0; z-index:30; border-bottom:1px solid rgba(17,61,34,0.07)}
    .site-header .container{display:flex; align-items:center; gap:1rem}
    .logo{font-weight:700; color:var(--green-4); text-decoration:none; font-size:1.2rem}
    .logo-img{height:120px; width:auto; display:block; border-radius:25px; background:rgba(255,255,255,0.6); padding:4px}

    @media (max-width:480px){
        .logo-img{height:100px} 
    }
    .nav{margin-left:auto; display:flex; gap:1rem}
    .nav a{color:var(--accent); text-decoration:none; padding:0.5rem 0.6rem; border-radius:8px}
    .nav a:hover{background:var(--green-2)}
    /* Minimal footer variant (Option 1) */
    .minimal-footer{
        background: linear-gradient(180deg, rgba(15,81,50,0.06), rgba(15,81,50,0.02));
        color: var(--green-4);
        padding: 34px 0 18px;
    }
    .minimal-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
    .footer-logo{width:110px;border-radius:6px}
    .brand-note{max-width:520px;margin-top:8px;color:rgba(5,35,20,0.8)}
    .footer-nav{display:flex;gap:18px;align-items:center}
    .footer-nav a{color:var(--green-4);text-decoration:none}
    .minimal-footer .copyright{padding-top:14px;border-top:1px solid rgba(17,61,34,0.04)}

    @media (max-width:760px){
        .minimal-grid{flex-direction:column;align-items:flex-start}
        .footer-logo{width:90px}
        .footer-nav{flex-wrap:wrap;gap:12px}
    }

    /* Elegant footer (Option 3) */
    .elegant-footer{background:linear-gradient(180deg, rgba(4,45,29,0.06), rgba(4,45,29,0.02));padding:28px 0;color:var(--green-4)}
    .elegant-top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-bottom:12px}
    .elegant-left h3{margin:0}
    .muted{color:rgba(5,35,20,0.72)}
    .elegant-right{display:flex;flex-direction:row;gap:12px;align-items:center}
    .btn-ghost{padding:8px 14px;border-radius:8px;border:1px solid rgba(5,35,20,0.08);background:transparent;color:var(--green-4);text-decoration:none}
    .elegant-mail{color:rgba(5,35,20,0.8);font-size:14px;text-decoration:underline}
    .elegant-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(5,35,20,0.04);padding-top:12px}
    .elegant-links{display:flex;gap:16px}
    .elegant-links a{color:var(--green-4);text-decoration:none}
    .elegant-legal{color:rgba(5,35,20,0.65)}

    @media (max-width:760px){
        .elegant-top{flex-direction:column;align-items:flex-start}
        .elegant-bottom{flex-direction:column;gap:8px;align-items:flex-start}
        .elegant-right{align-self:stretch;display:flex;justify-content:space-between;width:100%}
    }

    /* Nav flag */
    .nav-flag{width:32px;height:auto;margin-left:12px;align-self:center;border-radius:50%;overflow:hidden;display:inline-block;cursor:pointer}
    .nav .nav-flag{vertical-align:middle}




    .hero{padding:6rem 0; background: radial-gradient(800px 300px at 10% 20%, rgba(17,61,34,0.06), transparent);}
    .hero h1{font-size:clamp(1.25rem, 3.2vw, 2rem); margin:0 0 0.5rem}
    /* hero layout */
    .hero-grid{display:flex; align-items:center; gap:1.5rem}
    .hero-art img{max-width:320px; width:40vw; height:auto; display:block}
    .hero-copy{flex:1}
    .hero-art{flex:1}
    .lede{color:var(--muted); margin-bottom:1.2rem}
    .hero-actions{display:flex; gap:1rem}
    .btn{border-radius:10px; padding:0.7rem 1rem; border:0; cursor:pointer}
    .btn-primary{background:linear-gradient(180deg,var(--green-3),var(--green-4)); color:white; box-shadow:0 6px 18px rgba(17,61,34,0.18); transform:translateY(0); transition:transform .18s ease, box-shadow .18s ease}
    .btn-primary:hover{transform:translateY(-3px); box-shadow:0 12px 30px rgba(17,61,34,0.18)}
    .btn-ghost{background:transparent; border:1px solid var(--green-3); color:var(--green-4); padding:0.65rem 0.95rem}

    .info h2, .alcance h2, .beneficios h2{color:var(--green-4)}
    .cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1rem; margin-top:1rem}
    .card{background:linear-gradient(180deg, rgba(255,255,255,0.6), rgba(255,255,255,0.2)); padding:1.2rem; border-radius:var(--radius); box-shadow:0 6px 20px rgba(17,61,34,0.04); transition:transform .18s ease}
    .card:hover{transform:translateY(-6px)}
    .card-icon{width:56px; height:56px; display:block; margin-bottom:0.6rem}

    .alcance .list{list-style:none; padding:0; margin:0.8rem 0}
    .alcance .list li{padding:0.6rem 0; border-bottom:1px dashed rgba(17,61,34,0.06)}
    .note{margin-top:0.8rem; color:var(--muted)}

    .beneficios{
        width:100%;
        background:var(--green-1);
        padding:2.5rem 0; /* vertical padding only, inner handles horizontal spacing */
        margin:2rem 0;
        display:flex;
        justify-content:center; /* center the inner panel horizontally in the page */
    }
    .beneficios-inner{
        width:100%;
        max-width:1000px; /* constrain the green panel */
        margin:0 1rem; /* small horizontal margin for breathing room */
        padding:1.4rem 1.6rem;
        background:var(--green-1);
        border-radius:12px;
        text-align: center;
    }
    .benefit-list{
        display:flex;
        gap:0.9rem;
        justify-content:center;
        align-items:stretch;
        flex-wrap:wrap;
        list-style:none;
        padding:0;
        margin:1rem 0 0 0;
    }
    .benefit-list li{
        background:linear-gradient(90deg, rgba(17,61,34,0.04), transparent);
        padding:0.9rem 1rem;
        border-radius:8px;
        flex:0 1 220px; /* fixed-ish width but flexible */
        min-width:180px;
        text-align:left; /* keep content left-aligned inside each card */
        display:flex; align-items:center; gap:0.6rem;
    }
    .icon-small{width:36px;height:36px;display:inline-block}

    /* contact form styles removed intentionally */

    .site-footer{background:linear-gradient(180deg,var(--green-2),transparent); padding:2rem 0; margin-top:3rem}
    .footer-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:1rem}
    .footer-grid h4{margin:0 0 0.6rem}
    .site-footer a{color:var(--accent); text-decoration:none}

    .copyright{border-top:1px solid rgba(17,61,34,0.06); margin-top:1rem; padding-top:1rem; text-align:center}

    /* Responsive */
    @media (max-width:760px){
        /* keep nav in the layout but hidden via opacity/transform to allow transition */
        .nav{
            display:flex;
            flex-direction:column;
            position:absolute;
            left:0;
            right:0;
            top:64px;
            background:var(--green-1);
            gap:0;
            padding:0.75rem 1rem;
            opacity:0;
            transform:translateY(-6px);
            pointer-events:none;
            visibility:hidden;
            transition:opacity .18s ease, transform .18s ease, visibility .18s;
        }
        .nav-toggle{display:block}
        .hero{padding:2.5rem 0}
        .hero h1{font-size:1.25rem}
        .footer-grid{grid-template-columns:1fr}
        .btn, .cta{width:100%; display:block}
        .beneficios-inner{padding:1rem}

        .nav.open{
                opacity:1;
                transform:translateY(0);
                pointer-events:auto;
                visibility:visible;
            }
        .nav.open a{padding:0.65rem 0}
    }

    /* images responsive */
    img{max-width:100%;height:auto;display:block}

    /* Small animations */
    @keyframes floaty{
            0%{transform:translateY(0)}
            50%{transform:translateY(-6px)}
            100%{transform:translateY(0)}
        }
    .card{animation:floaty 6s ease-in-out infinite}

    /* Accessibility focus */
    a:focus, button:focus, input:focus, textarea:focus{
        outline:3px solid rgba(17,61,34,0.15);
        outline-offset:3px;
    }
    /* Radical footer styles */
    .radical-footer{
        background: linear-gradient(180deg,#072f21 0%, #0b3f2b 100%);
        color: #e6fff0;
        padding: 40px 0 20px;
    }
    .radical-top{
        display:flex;
        align-items:center;
        justify-content:space-between;
        gap:24px;
        padding:24px 0;
    }
    .radical-left h2{margin:0 0 6px;color:#dff9ea}
    .radical-cta{display:flex;flex-direction:column;gap:8px;align-items:flex-end}
    .radical-cta .large{padding:14px 22px;border-radius:10px;font-weight:700}
    .radical-bottom{display:flex;justify-content:space-between;align-items:flex-start;padding-top:18px;border-top:1px solid rgba(255,255,255,0.06)}
    .radical-links ul{list-style:disc;padding-left:20px;margin:8px 0}
    .radical-links a,.radical-legal a{color:#d6ffdf;text-decoration:none}
    .radical-legal{opacity:0.9;text-align:right}
    .muted-link{color:rgba(255,255,255,0.85);font-size:13px;text-decoration:underline}
    .small{font-size:12px;opacity:0.75}

    @media (max-width:820px){
        .radical-top{flex-direction:column;align-items:flex-start}
        .radical-cta{align-items:flex-start}
        .radical-bottom{flex-direction:column;gap:12px}
        .radical-legal{text-align:left}
    }