/* =========================================================
   HERO GLOBAL - FUNDACIÓN NIÁGARA
   Home · Fundación · Tratamientos · Proyectos · Donaciones
   ========================================================= */

/* MISMO FONDO Y ALTURA */
.hero,
.about-hero,
.t-hero,
.projects-hero,
.donation-hero{
    position:relative !important;
    overflow:hidden !important;

    min-height:500px !important;

    display:flex !important;
    align-items:center !important;

    background:
    linear-gradient(
        90deg,
        rgba(248,246,240,.94) 0%,
        rgba(248,246,240,.88) 38%,
        rgba(248,246,240,.62) 60%,
        rgba(248,246,240,.28) 78%,
        rgba(248,246,240,.12) 100%
    ),
    url("../images/hero-niagara.webp") center center / cover no-repeat !important;
    
    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
}


/* ---------------------------------------------------------
   MISMA ALINEACIÓN HORIZONTAL
   --------------------------------------------------------- */

.hero > .container,
.about-hero > .t-container,
.t-hero > .t-container,
.projects-hero > .container,
.donation-hero > .container{
    width:100% !important;
    max-width:1160px !important;

    margin-left:auto !important;
    margin-right:auto !important;

    padding-left:24px !important;
    padding-right:24px !important;

    box-sizing:border-box !important;
}


/* ---------------------------------------------------------
   CONTENIDO
   --------------------------------------------------------- */

.hero-copy,
.about-hero-content,
.t-hero-content,
.projects-hero-copy,
.donation-hero-content{
    position:relative !important;
    z-index:2 !important;

    max-width:720px !important;

    padding-top:58px !important;
    padding-bottom:58px !important;
}


/* ---------------------------------------------------------
   EYEBROW / TEXTO SUPERIOR
   --------------------------------------------------------- */

.hero .eyebrow,
.about-hero .t-eyebrow,
.t-hero .t-eyebrow,
.projects-hero .projects-eyebrow,
.donation-hero .donation-eyebrow{
    display:block;

    margin-bottom:20px !important;

    font-family:"Montserrat",sans-serif !important;
    font-size:13px !important;
    font-weight:800 !important;

    letter-spacing:2px !important;

    color:#006b63 !important;
}


/* ---------------------------------------------------------
   TÍTULOS PRINCIPALES
   --------------------------------------------------------- */

.hero h1,
.about-hero h1,
.t-hero h1,
.projects-hero h1,
.donation-hero h1{
    max-width:720px !important;

    margin-top:0 !important;
    margin-bottom:22px !important;

    font-family:"Montserrat",sans-serif !important;

    font-size:50px !important;
    line-height:1.08 !important;

    font-weight:700 !important;

    color:#143b32 !important;
}


/* ---------------------------------------------------------
   PÁRRAFOS
   --------------------------------------------------------- */

.hero p,
.about-hero p,
.t-hero p,
.projects-hero p,
.donation-hero p{
    max-width:650px;

    line-height:1.6;
}


/* ---------------------------------------------------------
   HOME: LA FOTO YA ES FONDO
   --------------------------------------------------------- */

.hero-visual{
    display:none !important;
}



/* =========================================================
   MENU - PAGINA ACTIVA
   ========================================================= */

/* Desactivar cualquier subrayado antiguo */
.main-nav > a:not(.btn)::after{
    display:none !important;
    content:none !important;
}

/* Estado normal */
.main-nav > a:not(.btn){
    position:relative;
    text-decoration:none !important;

    border-bottom:2px solid transparent !important;
    padding-bottom:6px;

    transition:
        color .2s ease,
        border-color .2s ease;
}

/* SOLO la página actual */
.main-nav > a:not(.btn).active{
    color:#123a2d !important;
    font-weight:600 !important;
    border-bottom-color:#d3aa55 !important;
}

/* Hover sin segundo subrayado */
.main-nav > a:not(.btn):hover{
    color:#0f5b50 !important;
}

/* DONAR activo */
.main-nav .donation-active{
    box-shadow:0 0 0 2px rgba(18,58,45,.20) !important;
}
/* =====================================================
   HERO GLOBAL MÓVIL
   Una sola configuración para todas las páginas
   ===================================================== */

@media (max-width:768px){

    .hero,
    .about-hero,
    .t-hero,
    .projects-hero,
    .donation-hero{
        min-height:520px !important;
        height:auto !important;

        display:flex !important;
        align-items:center !important;

        background:
            linear-gradient(
                180deg,
                rgba(248,246,240,.90) 0%,
                rgba(248,246,240,.82) 32%,
                rgba(248,246,240,.58) 62%,
                rgba(248,246,240,.25) 82%,
                rgba(248,246,240,.10) 100%
            ),
            url("../images/hero-niagara-mobile.webp")
            center center / cover no-repeat !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;

        overflow:hidden !important;
    }

    .hero > .container,
    .about-hero > .t-container,
    .t-hero > .t-container,
    .projects-hero > .container,
    .donation-hero > .container{
        width:100% !important;
        padding-left:22px !important;
        padding-right:22px !important;
        box-sizing:border-box !important;
    }

    .hero-copy,
    .about-hero-content,
    .t-hero-content,
    .projects-hero-copy,
    .donation-hero-content{
        max-width:100% !important;
        padding-top:48px !important;
        padding-bottom:48px !important;
    }

    .hero h1,
    .about-hero h1,
    .t-hero h1,
    .projects-hero h1,
    .donation-hero h1{
        font-size:clamp(32px, 9vw, 42px) !important;
        line-height:1.06 !important;
    }

    .hero-actions,
    .t-hero-actions,
    .projects-actions,
    .donation-hero-actions{
        display:flex !important;
        flex-direction:column !important;
        gap:14px !important;
    }

    .hero-actions .btn,
    .t-hero-actions .t-btn,
    .projects-actions .btn,
    .projects-actions .projects-outline,
    .donation-hero-actions .btn{
        width:100% !important;
        justify-content:center !important;
        text-align:center !important;
        box-sizing:border-box !important;
    }
}
@media (max-width:398px){

    .hero,
    .about-hero,
    .t-hero,
    .projects-hero,
    .donation-hero{
        min-height:500px !important;
    }
}
/* =====================================================
   BOTONES SECUNDARIOS HERO - TRANSPARENTES
   ===================================================== */

.hero .btn-outline,
.t-hero .t-btn-outline,
.projects-hero .projects-outline,
.donation-hero .btn-outline{
    background:transparent !important;
    color:#0f6f66 !important;

    border:2px solid #0f6f66 !important;

    box-shadow:none !important;
}

.hero .btn-outline:hover,
.t-hero .t-btn-outline:hover,
.projects-hero .projects-outline:hover,
.donation-hero .btn-outline:hover{
    background:rgba(255,255,255,.18) !important;
    color:#0b4f48 !important;

    border-color:#0b4f48 !important;
}