/* =====================================================
   HERO INSTITUCIONAL V2
   Diócesis de Punta Arenas
===================================================== */

.mag-hero{

    /* Imagen específica de cada sección */
    --hero-image:none;

    position:relative;
    display:flex;
    align-items:center;

    min-height:540px;

    overflow:hidden;

    background:linear-gradient(
        135deg,
        #07244f 0%,
        #0b3a82 45%,
        #195eb2 100%
    );

}


/* ==========================================
   IMAGEN DE FONDO
========================================== */

.mag-hero__bg{

    position:absolute;
    inset:0;

    z-index:0;

    background-image:var(--hero-image);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    opacity:.68;

    transform:scale(1.05);

}


/* ==========================================
   CAPA DE COLOR
========================================== */

.mag-hero__overlay{

    position:absolute;
    inset:0;

    z-index:1;

    background:linear-gradient(
        90deg,
        rgba(7,36,79,.92) 0%,
        rgba(11,58,130,.78) 45%,
        rgba(11,58,130,.38) 100%
    );

}


/* ==========================================
   TEXTURA + LUCES
========================================== */

.mag-hero::before{

    content:"";

    position:absolute;
    inset:0;

    background:

        radial-gradient(
            circle at 85% 20%,
            rgba(255,255,255,.10),
            transparent 32%
        ),

        radial-gradient(
            circle at 15% 90%,
            rgba(255,255,255,.05),
            transparent 40%
        ),

        radial-gradient(
            circle at 55% 10%,
            rgba(255,255,255,.04),
            transparent 25%
        );

    z-index:1;

    pointer-events:none;

}


/* ==========================================
   CONTENIDO
========================================== */

.mag-hero__content{

    position:relative;

    z-index:5;

}


.mag-hero__content .eyebrow{

    color:#f4b400;

    letter-spacing:.12em;

    text-transform:uppercase;

    font-size:15px;

    font-weight:800;

    margin-bottom:18px;

}


.mag-hero__content h1{

    color:#fff;

    font-family:"Playfair Display",serif;

    font-size:clamp(52px,6vw,88px);

    line-height:.96;

    margin:0 0 24px;

    max-width:760px;

}


.mag-hero__content p:not(.eyebrow){

    max-width:650px;

    font-size:22px;

    line-height:1.65;

    color:rgba(255,255,255,.92);

    margin-bottom:32px;

}


.mag-hero__content .btn{

    margin-top:10px;

}


/* ==========================================
   IMAGEN LATERAL (si existe)
========================================== */

.mag-hero__image{

    position:relative;

    z-index:5;

}


.mag-hero__image img{

    display:block;

    width:100%;

    border-radius:28px;

    box-shadow:0 35px 80px rgba(0,0,0,.28);

}


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

@media(max-width:900px){

    .mag-hero{

        min-height:470px;

    }

    .mag-hero__content{

        padding:80px 0;

    }

    .mag-hero__content h1{

        font-size:clamp(42px,10vw,62px);

    }

    .mag-hero__content p:not(.eyebrow){

        font-size:19px;

    }

}


@media(max-width:640px){

    .mag-hero{

        min-height:420px;

    }

    .mag-hero__content{

        padding:65px 0;

    }

    .mag-hero__content h1{

        font-size:42px;

        line-height:1;

    }

    .mag-hero__content p:not(.eyebrow){

        font-size:18px;

    }

}