: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 ======== */
.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 ======== */
.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;
}


/* ======== SECCIONES ======== */
.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);
}


/* ======== SERVICIOS ======== */
.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;
}


/* ======== IMPACTO ======== */
.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 ======== */
.cta{
    background:linear-gradient(135deg,#3fa84b,#075467);
    color:#fff;
    border-radius:28px;
    overflow:hidden;
}


/* ======== FOOTER ======== */
footer{
    background:#063f4e;
    color:#cde0e5;
}

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


/* =========================================================
   MODALES
   ========================================================= */

/*
 * Estas reglas NO modifican el fondo general de la página.
 * Solamente controlan el comportamiento visual del modal.
 *
 * Importante:
 * No se crea ni se manipula aquí ninguna instancia de Bootstrap.
 * Eso debe hacerlo Bootstrap mediante data-bs-* o JavaScript.
 */

.modal {
    z-index:1060;
}

.modal-backdrop {
    z-index:1050;
}


/*
 * El contenido del modal permanece completamente opaco.
 * Esto evita que el contenido del modal se vea "tenue".
 */
.modal-content {
    background-color:#ffffff;
    opacity:1;
}


/*
 * El backdrop oscurece solamente la página que queda
 * detrás del modal.
 */
.modal-backdrop.show {
    opacity:.5;
}


/*
 * Evita que alguna regla de la página haga transparente
 * accidentalmente el contenido del modal.
 */
.modal-dialog,
.modal-content {
    opacity:1;
}


/*
 * Modal centrado verticalmente.
 */
.modal-dialog-centered {
    display:flex;
    align-items:center;
    min-height:calc(100% - 1rem);
}


/*
 * En pantallas grandes conservamos el margen estándar
 * de Bootstrap.
 */
@media (min-width:576px) {

    .modal-dialog-centered {
        min-height:calc(100% - 3.5rem);
    }

}


/* =========================================================
   OFFCANVAS
   ========================================================= */

/*
 * Bootstrap controla la instancia del offcanvas.
 * Estas reglas solamente manejan su apariencia.
 */

.offcanvas {
    z-index:1045;
}

.offcanvas-backdrop {
    z-index:1040;
}

.offcanvas-backdrop.show {
    opacity:.5;
}


/* =========================================================
   NAVBAR RESPONSIVE
   ========================================================= */

@media (max-width:991.98px) {

    .navbar-collapse {
        background:#063f4e;
        padding:1rem;
        border-radius:0 0 12px 12px;
    }

    .navbar-nav .nav-link {
        color:#ffffff;
    }

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

}


/* =========================================================
   MODO OSCURO DEL SISTEMA
   ========================================================= */

@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 {
        background:#063f4e;
        border:none;
        padding:6px;
        border-radius:4px;
    }

    .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='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }


    /* Botón hamburguesa en móviles */
    .navbar-toggler {
        border:none;
    }

    .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='white' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
    }

}