:root{
    --eco-green:#4CAF50;
    --eco-green-dark:#23863d;
    --eco-lime:#8bcf35;
    --eco-teal:#075467;
    --eco-navy:#063f4e;
    --eco-soft:#f1f8f3;
    --eco-text:#244653;
}

html {
    scroll-behavior:smooth;
    background:#075467;
}

body{
    font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
    color:var(--eco-text);
    background:#fff;
}


/* ======== NAVBAR ECOABURRÁ ======== */
.navbar {
    background:#063f4e;
}

.navbar-brand img {
    height: 48px;
}

.navbar-nav .nav-link {
    color: #ffffff;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: #c8ffb0;
}

/* ======== DROPDOWN ======== */
.dropdown-menu {
    background: linear-gradient(180deg, #00a86b 0%, #006b3c 100%);
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0;
}

.dropdown-header {
    color: #e0ffe0;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
}

.dropdown-item {
    color: #ffffff;
    font-weight: 500;
    padding: 0.5rem 1.2rem;
    transition: background 0.3s ease, color 0.3s ease;
}

.dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.15);
    color: #c8ffb0;
}

/* ======== BOTÓN PRINCIPAL ======== */
.btn-eco {
    background-color: #00a86b;
    color: #ffffff;
    font-weight: 600;
    border-radius: 6px;
    padding: 0.5rem 1rem;
    transition: background 0.3s ease;
}

.btn-eco:hover {
    background-color: #006b3c;
    color: #c8ffb0;
}

.brand-logo{
    height:58px;
    width:auto;
    object-fit:contain;
}

.btn-eco{
    background:var(--eco-green);
    border-color:var(--eco-green);
    color:#fff;
    font-weight:700;
    border-radius:50px;
    padding:.75rem 1.35rem;
}

.btn-eco:hover{
    background:var(--eco-green-dark);
    border-color:var(--eco-green-dark);
    color:#fff;
}

.btn-outline-light{
    border-width:2px;
    border-radius:50px;
    padding:.7rem 1.3rem;
}

.hero{
    min-height:650px;
    display:flex;
    align-items:center;
    position:relative;
    overflow:hidden;
    background: url('/img/banner-ecoaburra.png') center/cover no-repeat;
}

/* Sustituible por una fotografía real del Valle de Aburrá */
.hero::after{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(145deg, transparent 48%, rgba(76,175,80,.18) 49%, transparent 58%),
        linear-gradient(20deg, transparent 50%, rgba(139,207,53,.13) 51%, transparent 62%);
    pointer-events:none;
}

.hero-content{
    position:relative;
    z-index:2;
}

.eyebrow{
    letter-spacing:.16em;
    text-transform:uppercase;
    font-size:.82rem;
    font-weight:800;
    color:var(--eco-teal);
}

.hero h1{
    color:#fff;
    font-size:clamp(2.7rem,6vw,5rem);
    line-height:1.02;
    font-weight:800;
    max-width:760px;
}

.hero h1 span{
    color:var(--eco-lime);
}

.hero p{
    color:rgba(255,255,255,.92);
    font-size:1.15rem;
    max-width:650px;
}

.feature-strip{
    margin-top:-1px;
    background:#fff;
    box-shadow:0 8px 30px rgba(0,0,0,.06);
    position:relative;
    z-index:4;
}

.feature{
    padding:2.1rem 1rem;
    border-right:1px solid #dce8e4;
    height:100%;
}

.feature:last-child{
    border-right:0;
}

.feature i{
    font-size:2.1rem;
    color:var(--eco-green);
}

.feature h6{
    color:var(--eco-teal);
    font-weight:800;
    margin-top:.8rem;
}

.section{
    padding:90px 0;
}

.section-soft{
    background:var(--eco-soft);
}

.section-label{
    color:var(--eco-green-dark);
    letter-spacing:.14em;
    text-transform:uppercase;
    font-size:.78rem;
    font-weight:800;
}

.section-title{
    color:var(--eco-teal);
    font-weight:800;
    font-size:clamp(2rem,4vw,3.25rem);
    line-height:1.08;
}

.section-title span{
    color:var(--eco-green);
}

.service-card{
    height:100%;
    border:0;
    border-radius:22px;
    padding:2rem;
    box-shadow:0 10px 35px rgba(6,63,78,.08);
    transition:.25s ease;
}

.service-card:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 40px rgba(6,63,78,.13);
}

.service-icon{
    width:58px;
    height:58px;
    border-radius:16px;
    display:grid;
    place-items:center;
    background:#e8f6e9;
    color:var(--eco-green-dark);
    font-size:1.7rem;
}

.impact{
    background:linear-gradient(135deg,var(--eco-teal),#063f4e);
    color:#fff;
}

.impact .section-title{
    color:#fff;
}

.impact-number{
    font-size:2.6rem;
    font-weight:800;
    color:var(--eco-lime);
}

.cta{
    background:linear-gradient(135deg,#3fa84b,#075467);
    color:#fff;
    border-radius:28px;
    overflow:hidden;
}

footer{
    background:#063f4e;
    color:#cde0e5;
}

footer a{
    color:#fff;
    text-decoration:none;
}

/* ======== MODO OSCURO ======== */
@media (prefers-color-scheme: dark) {
    .navbar {
            background:#063f4e;
    }

    .dropdown-menu {
        background: linear-gradient(180deg, #007a4d 0%, #004d2a 100%);
    }

    .dropdown-item {
        color: #e0ffe0;
    }

    .dropdown-item:hover {
        background-color: rgba(255, 255, 255, 0.1);
    }

    .navbar .nav-link:hover,
    .navbar .nav-link.active{
        color:#8BCF35;
    }

    /* Botón hamburguesa */
    .navbar .navbar-toggler{
        border:1px solid rgba(255,255,255,.6);
    }

    .navbar .navbar-toggler-icon{
        background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,255,255,1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

}