/* ==================================================
   DONACIONES - SELAH
   Diseño exclusivo de la sección Donaciones
================================================== */





/* ==================================================
   1. CONFIGURACIÓN GENERAL
================================================== */


.pagina-donaciones {

    background:#f5f2ec;

    color:#262626;

}


.pagina-donaciones main {

    overflow:hidden;

}


.pagina-donaciones .donaciones-contenedor {

    width:100%;

    max-width:1180px;

    margin:0 auto;

    padding-left:40px;

    padding-right:40px;

}





/* ==================================================
   2. PORTADA
================================================== */


.pagina-donaciones .donaciones-hero {

    position:relative;

    min-height:620px;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    text-align:center;

    isolation:isolate;

}


.pagina-donaciones .donaciones-hero-fondo {

    position:absolute;

    inset:0;

    z-index:-2;

    background-image:

        linear-gradient(
            rgba(18,18,18,.50),
            rgba(18,18,18,.72)
        ),

        url("../img/donaciones/portada.jpg");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    transform:scale(1.02);

}


.pagina-donaciones .donaciones-hero::after {

    content:"";

    position:absolute;

    inset:0;

    z-index:-1;

    background:

        linear-gradient(
            to bottom,
            rgba(0,0,0,.05) 0%,
            rgba(0,0,0,.10) 55%,
            rgba(0,0,0,.30) 100%
        );

    pointer-events:none;

}


.pagina-donaciones .donaciones-hero-contenido {

    width:100%;

    max-width:850px;

    padding:100px 40px;

    color:#ffffff;

}


.pagina-donaciones .donaciones-etiqueta {

    display:inline-block;

    margin-bottom:22px;

    font-size:12px;

    font-weight:600;

    letter-spacing:4px;

    text-transform:uppercase;

    opacity:.85;

}


.pagina-donaciones .donaciones-hero h1 {

    margin-bottom:24px;

    font-size:64px;

    font-weight:500;

    line-height:1.12;

    letter-spacing:-1.8px;

}


.pagina-donaciones .donaciones-hero p {

    max-width:650px;

    margin:0 auto;

    font-size:18px;

    font-weight:300;

    line-height:1.9;

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

}





/* ==================================================
   3. ELEMENTOS EDITORIALES GENERALES
================================================== */


.pagina-donaciones .donaciones-subtitulo {

    display:block;

    margin-bottom:18px;

    color:#9a7b4f;

    font-size:11px;

    font-weight:600;

    letter-spacing:3.2px;

    text-transform:uppercase;

}


.pagina-donaciones .donaciones-seccion-encabezado {

    max-width:720px;

    margin-bottom:70px;

}


.pagina-donaciones .donaciones-seccion-encabezado h2 {

    margin-bottom:22px;

    color:#242424;

    font-size:43px;

    font-weight:500;

    line-height:1.25;

    letter-spacing:-1px;

}


.pagina-donaciones .donaciones-seccion-encabezado > p {

    max-width:650px;

    color:#6b6862;

    font-size:16px;

    line-height:1.9;

}





/* ==================================================
   4. INTRODUCCIÓN
================================================== */


.pagina-donaciones .donaciones-introduccion {

    position:relative;

    padding:135px 0 145px;

    background:#f5f2ec;

}


.pagina-donaciones .donaciones-introduccion-contenido {

    position:relative;

    max-width:940px;

}


.pagina-donaciones .donaciones-numero-decorativo {

    position:absolute;

    top:-65px;

    right:35px;

    color:rgba(38,38,38,.045);

    font-size:190px;

    font-weight:600;

    line-height:1;

    letter-spacing:-12px;

    user-select:none;

    pointer-events:none;

}


.pagina-donaciones .donaciones-introduccion h2 {

    position:relative;

    max-width:680px;

    margin-bottom:42px;

    color:#242424;

    font-size:50px;

    font-weight:500;

    line-height:1.22;

    letter-spacing:-1.5px;

}


.pagina-donaciones .donaciones-texto {

    position:relative;

    max-width:730px;

    padding-left:38px;

    border-left:1px solid rgba(154,123,79,.50);

}


.pagina-donaciones .donaciones-texto p {

    margin-bottom:22px;

    color:#595650;

    font-size:16px;

    line-height:1.95;

}


.pagina-donaciones .donaciones-texto p:last-child {

    margin-bottom:0;

}





/* ==================================================
   5. LO QUE TU APORTE HACE POSIBLE
================================================== */


.pagina-donaciones .donaciones-aporte {

    padding:130px 0 140px;

    background:#ffffff;

}


.pagina-donaciones .donaciones-aporte-grid {

    display:grid;

    grid-template-columns:repeat(2, 1fr);

    border-top:1px solid #dedbd4;

    border-left:1px solid #dedbd4;

}


.pagina-donaciones .donaciones-aporte-item {

    min-height:310px;

    padding:48px 50px;

    border-right:1px solid #dedbd4;

    border-bottom:1px solid #dedbd4;

    background:#ffffff;

    transition:

        background .35s ease,

        transform .35s ease;

}


.pagina-donaciones .donaciones-aporte-item:hover {

    background:#faf8f4;

}


.pagina-donaciones .donaciones-aporte-numero {

    display:block;

    margin-bottom:24px;

    color:#a4865c;

    font-size:12px;

    font-weight:600;

    letter-spacing:2px;

}


.pagina-donaciones .donaciones-aporte-linea {

    width:38px;

    height:1px;

    margin-bottom:28px;

    background:#a4865c;

}


.pagina-donaciones .donaciones-aporte-item h3 {

    max-width:330px;

    margin-bottom:17px;

    color:#292929;

    font-size:22px;

    font-weight:600;

    line-height:1.4;

}


.pagina-donaciones .donaciones-aporte-item p {

    max-width:430px;

    color:#706d67;

    font-size:15px;

    line-height:1.85;

}





/* ==================================================
   6. MÉTODOS DE DONACIÓN
================================================== */


.pagina-donaciones .donaciones-metodos {

    padding:140px 0 150px;

    background:#ede9e1;

}


.pagina-donaciones .donaciones-metodos-encabezado {

    margin-left:auto;

    margin-right:auto;

    text-align:center;

}


.pagina-donaciones .donaciones-metodos-encabezado > p {

    margin-left:auto;

    margin-right:auto;

}


.pagina-donaciones .donaciones-metodos-grid {

    display:grid;

    grid-template-columns:repeat(2, minmax(0, 1fr));

    max-width:1050px;

    margin:0 auto;

    background:#ffffff;

    border:1px solid #d9d4ca;

}





/* ==================================================
   7. TARJETAS DE MÉTODOS
================================================== */


.pagina-donaciones .donacion-metodo {

    position:relative;

    min-width:0;

    background:#ffffff;

}


.pagina-donaciones .donacion-metodo:first-child {

    border-right:1px solid #d9d4ca;

}


.pagina-donaciones .donacion-metodo-cabecera {

    min-height:74px;

    padding:0 38px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border-bottom:1px solid #e2ded6;

}


.pagina-donaciones .donacion-metodo-numero {

    color:#a4865c;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

}


.pagina-donaciones .donacion-metodo-region {

    color:#77736c;

    font-size:11px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}


.pagina-donaciones .donacion-metodo-contenido {

    padding:55px 48px 52px;

}


.pagina-donaciones .donacion-metodo-icono {

    width:62px;

    height:62px;

    margin-bottom:30px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#8e7048;

    border:1px solid #d9d2c7;

    border-radius:50%;

}


.pagina-donaciones .donacion-metodo h3 {

    margin-bottom:18px;

    color:#292929;

    font-size:27px;

    font-weight:500;

    line-height:1.35;

}


.pagina-donaciones .donacion-metodo-descripcion {

    min-height:90px;

    margin-bottom:35px;

    color:#6b6862;

    font-size:15px;

    line-height:1.85;

}





/* ==================================================
   8. DATOS BANCARIOS
================================================== */


.pagina-donaciones .datos-bancarios {

    margin-top:10px;

    border-top:1px solid #e5e1da;

}


.pagina-donaciones .dato-bancario {

    padding:17px 0;

    display:flex;

    align-items:flex-start;

    justify-content:space-between;

    gap:25px;

    border-bottom:1px solid #e5e1da;

}


.pagina-donaciones .dato-bancario span {

    flex:0 0 auto;

    color:#88847c;

    font-size:12px;

    font-weight:500;

}


.pagina-donaciones .dato-bancario strong {

    min-width:0;

    color:#33312e;

    font-size:13px;

    font-weight:600;

    text-align:right;

    overflow-wrap:anywhere;

}





/* ==================================================
   9. PAYPAL
================================================== */


.pagina-donaciones .paypal-bloque {

    margin-top:10px;

    padding:31px;

    background:#f7f4ef;

    border:1px solid #e2ddd4;

}


.pagina-donaciones .paypal-etiqueta {

    display:block;

    margin-bottom:13px;

    color:#8d704a;

    font-size:10px;

    font-weight:600;

    letter-spacing:2px;

    text-transform:uppercase;

}


.pagina-donaciones .paypal-bloque p {

    margin-bottom:25px;

    color:#66625c;

    font-size:14px;

    line-height:1.8;

}


.pagina-donaciones .boton-paypal {

    width:100%;

    min-height:52px;

    padding:14px 22px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    background:#292929;

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    letter-spacing:.4px;

    transition:

        background .30s ease,

        transform .30s ease;

}


.pagina-donaciones .boton-paypal:hover {

    background:#44413d;

    transform:translateY(-2px);

}


.pagina-donaciones .boton-paypal svg {

    flex:0 0 auto;

    transition:transform .30s ease;

}


.pagina-donaciones .boton-paypal:hover svg {

    transform:translateX(4px);

}





/* ==================================================
   10. NOTAS DE LOS MÉTODOS
================================================== */


.pagina-donaciones .donacion-metodo-nota {

    margin-top:27px;

    padding-top:22px;

    color:#8a867f;

    font-size:12px;

    line-height:1.75;

    border-top:1px solid #e5e1da;

}





/* ==================================================
   11. DECLARACIÓN DE GRATUIDAD
================================================== */


.pagina-donaciones .donaciones-gratuito {

    position:relative;

    padding:150px 40px;

    overflow:hidden;

    background:#242424;

    color:#ffffff;

}


.pagina-donaciones .donaciones-gratuito-contenido {

    position:relative;

    z-index:2;

    max-width:850px;

    margin:0 auto;

    text-align:center;

}


.pagina-donaciones .donaciones-gratuito-numero {

    position:absolute;

    top:50%;

    left:50%;

    z-index:-1;

    transform:translate(-50%, -50%);

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

    font-size:180px;

    font-weight:700;

    line-height:1;

    letter-spacing:14px;

    white-space:nowrap;

    user-select:none;

    pointer-events:none;

}


.pagina-donaciones .donaciones-gratuito-subtitulo {

    display:block;

    margin-bottom:25px;

    color:#c5a87c;

    font-size:11px;

    font-weight:600;

    letter-spacing:3px;

    text-transform:uppercase;

}


.pagina-donaciones .donaciones-gratuito h2 {

    max-width:780px;

    margin:0 auto 30px;

    font-size:48px;

    font-weight:400;

    line-height:1.28;

    letter-spacing:-1px;

}


.pagina-donaciones .donaciones-gratuito-linea {

    width:55px;

    height:1px;

    margin:0 auto 31px;

    background:#b8996c;

}


.pagina-donaciones .donaciones-gratuito p {

    max-width:720px;

    margin:0 auto;

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

    font-size:16px;

    font-weight:300;

    line-height:1.95;

}





/* ==================================================
   12. CIERRE Y AGRADECIMIENTO
================================================== */


.pagina-donaciones .donaciones-cierre {

    padding:145px 0;

    background:#f5f2ec;

}


.pagina-donaciones .donaciones-cierre-contenido {

    max-width:820px;

    margin:0 auto;

    text-align:center;

}


.pagina-donaciones .donaciones-cierre h2 {

    max-width:680px;

    margin:0 auto 30px;

    color:#262626;

    font-size:44px;

    font-weight:500;

    line-height:1.3;

    letter-spacing:-1px;

}


.pagina-donaciones .donaciones-cierre-contenido > p:not(.donaciones-cierre-versiculo) {

    max-width:720px;

    margin:0 auto;

    color:#625f59;

    font-size:16px;

    line-height:1.95;

}


.pagina-donaciones .donaciones-cierre-versiculo {

    max-width:650px;

    margin:55px auto 0;

    padding-top:40px;

    border-top:1px solid #d7d1c7;

}


.pagina-donaciones .donaciones-cierre-versiculo em {

    display:block;

    margin-bottom:17px;

    color:#4d4a45;

    font-size:16px;

    font-weight:400;

    line-height:1.9;

}


.pagina-donaciones .donaciones-cierre-versiculo strong {

    display:block;

    color:#9a7b4f;

    font-size:11px;

    font-weight:600;

    font-style:normal;

    letter-spacing:2px;

    text-transform:uppercase;

}





/* ==================================================
   13. ACCESIBILIDAD Y ESTADOS
================================================== */


.pagina-donaciones .menu-devocional .menu ul li a[aria-current="page"] {

    opacity:.65;

}


.pagina-donaciones .boton-paypal:focus-visible {

    outline:2px solid #9a7b4f;

    outline-offset:4px;

}





/* ==================================================
   14. TABLETS
================================================== */


@media (max-width:900px) {


    .pagina-donaciones .donaciones-contenedor {

        padding-left:30px;

        padding-right:30px;

    }



    .pagina-donaciones .donaciones-hero {

        min-height:540px;

    }



    .pagina-donaciones .donaciones-hero h1 {

        font-size:52px;

    }



    .pagina-donaciones .donaciones-introduccion {

        padding:110px 0 120px;

    }



    .pagina-donaciones .donaciones-introduccion h2 {

        font-size:44px;

    }



    .pagina-donaciones .donaciones-numero-decorativo {

        font-size:145px;

    }



    .pagina-donaciones .donaciones-aporte {

        padding:110px 0 120px;

    }



    .pagina-donaciones .donaciones-aporte-item {

        padding:40px 35px;

    }



    .pagina-donaciones .donaciones-metodos {

        padding:115px 0 125px;

    }



    .pagina-donaciones .donaciones-metodos-grid {

        grid-template-columns:1fr;

        max-width:650px;

    }



    .pagina-donaciones .donacion-metodo:first-child {

        border-right:0;

        border-bottom:1px solid #d9d4ca;

    }



    .pagina-donaciones .donacion-metodo-descripcion {

        min-height:auto;

    }



    .pagina-donaciones .donaciones-gratuito {

        padding:125px 30px;

    }



    .pagina-donaciones .donaciones-gratuito h2 {

        font-size:42px;

    }



    .pagina-donaciones .donaciones-gratuito-numero {

        font-size:130px;

    }



    .pagina-donaciones .donaciones-cierre {

        padding:120px 0;

    }


}





/* ==================================================
   15. MÓVILES
================================================== */


@media (max-width:600px) {


    .pagina-donaciones .donaciones-contenedor {

        padding-left:22px;

        padding-right:22px;

    }



    /* PORTADA */


    .pagina-donaciones .donaciones-hero {

        min-height:500px;

    }



    .pagina-donaciones .donaciones-hero-contenido {

        padding:80px 24px;

    }



    .pagina-donaciones .donaciones-etiqueta {

        margin-bottom:18px;

        font-size:10px;

        letter-spacing:3px;

    }



    .pagina-donaciones .donaciones-hero h1 {

        margin-bottom:20px;

        font-size:39px;

        line-height:1.18;

        letter-spacing:-1px;

    }



    .pagina-donaciones .donaciones-hero p {

        font-size:15px;

        line-height:1.8;

    }





    /* ENCABEZADOS */


    .pagina-donaciones .donaciones-seccion-encabezado {

        margin-bottom:50px;

    }



    .pagina-donaciones .donaciones-seccion-encabezado h2 {

        font-size:34px;

        line-height:1.3;

    }



    .pagina-donaciones .donaciones-seccion-encabezado > p {

        font-size:15px;

    }





    /* INTRODUCCIÓN */


    .pagina-donaciones .donaciones-introduccion {

        padding:90px 0 95px;

    }



    .pagina-donaciones .donaciones-numero-decorativo {

        top:-35px;

        right:15px;

        font-size:100px;

        letter-spacing:-7px;

    }



    .pagina-donaciones .donaciones-introduccion h2 {

        max-width:90%;

        margin-bottom:32px;

        font-size:36px;

        line-height:1.28;

        letter-spacing:-1px;

    }



    .pagina-donaciones .donaciones-texto {

        padding-left:22px;

    }



    .pagina-donaciones .donaciones-texto p {

        font-size:15px;

        line-height:1.9;

    }





    /* APORTE */


    .pagina-donaciones .donaciones-aporte {

        padding:90px 0 100px;

    }



    .pagina-donaciones .donaciones-aporte-grid {

        grid-template-columns:1fr;

    }



    .pagina-donaciones .donaciones-aporte-item {

        min-height:auto;

        padding:38px 30px;

    }



    .pagina-donaciones .donaciones-aporte-item h3 {

        font-size:20px;

    }





    /* MÉTODOS */


    .pagina-donaciones .donaciones-metodos {

        padding:90px 0 100px;

    }



    .pagina-donaciones .donacion-metodo-cabecera {

        min-height:66px;

        padding:0 25px;

    }



    .pagina-donaciones .donacion-metodo-contenido {

        padding:40px 27px;

    }



    .pagina-donaciones .donacion-metodo h3 {

        font-size:24px;

    }



    .pagina-donaciones .dato-bancario {

        flex-direction:column;

        gap:5px;

    }



    .pagina-donaciones .dato-bancario strong {

        text-align:left;

    }



    .pagina-donaciones .paypal-bloque {

        padding:25px 22px;

    }





    /* GRATUIDAD */


    .pagina-donaciones .donaciones-gratuito {

        padding:105px 23px;

    }



    .pagina-donaciones .donaciones-gratuito h2 {

        font-size:35px;

        line-height:1.35;

    }



    .pagina-donaciones .donaciones-gratuito p {

        font-size:15px;

        line-height:1.9;

    }



    .pagina-donaciones .donaciones-gratuito-numero {

        font-size:76px;

        letter-spacing:7px;

    }





    /* CIERRE */


    .pagina-donaciones .donaciones-cierre {

        padding:95px 0;

    }



    .pagina-donaciones .donaciones-cierre h2 {

        font-size:35px;

        line-height:1.35;

    }



    .pagina-donaciones .donaciones-cierre-contenido > p:not(.donaciones-cierre-versiculo) {

        font-size:15px;

        line-height:1.9;

    }



    .pagina-donaciones .donaciones-cierre-versiculo {

        margin-top:45px;

        padding-top:32px;

    }



    .pagina-donaciones .donaciones-cierre-versiculo em {

        font-size:15px;

    }


}





/* ==================================================
   16. MÓVILES PEQUEÑOS
================================================== */


@media (max-width:380px) {


    .pagina-donaciones .donaciones-hero h1 {

        font-size:34px;

    }



    .pagina-donaciones .donaciones-introduccion h2,

    .pagina-donaciones .donaciones-seccion-encabezado h2,

    .pagina-donaciones .donaciones-gratuito h2,

    .pagina-donaciones .donaciones-cierre h2 {

        font-size:31px;

    }



    .pagina-donaciones .donacion-metodo-contenido {

        padding-left:22px;

        padding-right:22px;

    }


}





/* ==================================================
   17. REDUCCIÓN DE MOVIMIENTO
================================================== */


@media (prefers-reduced-motion:reduce) {


    .pagina-donaciones .donaciones-aporte-item,

    .pagina-donaciones .boton-paypal,

    .pagina-donaciones .boton-paypal svg {

        transition:none;

    }


}