/* Estilos encapsulados de la sección de donativos */
.donar-seccion {
    --donar-azul: #092b52;
    --donar-rojo: #e44343;
    --donar-texto: #273244;
    --donar-borde: #e4e9ef;
    --donar-fondo: #f5f7fa;
    font-family: Arial,Helvetica,sans-serif;
    color: var(--donar-texto);
    padding: 0px 20px;
    background: #fff;
    box-sizing: border-box
}

    .donar-seccion *, .donar-seccion *::before, .donar-seccion *::after {
        box-sizing: border-box
    }

    .donar-seccion h2, .donar-seccion h3, .donar-seccion h4, .donar-seccion h5, .donar-seccion p {
        margin: 0
    }

    .donar-seccion a {
        color: #1767b1;
        text-decoration: none;
        overflow-wrap: anywhere
    }

        .donar-seccion a:hover {
            text-decoration: underline
        }

.donar-contenedor {
    max-width: 1200px;
    margin: 0 auto
}

.donar-encabezado {
    margin-bottom: 28px
}

.donar-eyebrow {
    display: block;
    color: #8793a1;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    margin-bottom: 7px
}

.donar-encabezado h2 {
    font-size: 32px;
    line-height: 1.2;
    color: var(--donar-azul);
    font-weight: 800
}

.donar-introduccion {
    background: var(--donar-fondo);
    border-radius: 14px;
    padding: 28px;
    margin-bottom: 36px;
    line-height: 1.7
}

    .donar-introduccion h3 {
        font-size: 23px;
        color: var(--donar-azul);
        margin-bottom: 12px
    }

    .donar-introduccion > p {
        font-size: 15px;
        margin-bottom: 16px
    }

    .donar-introduccion .donar-aviso {
        background: #fff;
        border-left: 4px solid var(--donar-rojo);
        border-radius: 6px;
        padding: 14px 16px;
        margin-bottom: 0
    }

.donar-bloque {
    margin-bottom: 42px
}

.donar-titulo-bloque {
    text-align: center;
    margin-bottom: 28px
}

    .donar-titulo-bloque h3, .donar-otras-formas > h3 {
        color: var(--donar-azul);
        font-size: 26px;
        margin-bottom: 10px
    }

    .donar-titulo-bloque p, .donar-descripcion {
        font-size: 15px;
        color: #68778a;
        line-height: 1.6
    }

.donar-subtitulo {
    font-size: 21px;
    color: var(--donar-azul);
    margin-bottom: 16px !important
}

.donar-subtitulo-separado {
    margin-top: 34px !important;
    margin-bottom: 8px !important
}

.donar-descripcion {
    margin-bottom: 18px !important
}

.donar-grid {
    display: grid;
    grid-template-columns: repeat(4,minmax(0,1fr));
    gap: 18px
}

.donar-tarjeta {
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 11px;
    background: #fff;
    border: 1px solid var(--donar-borde);
    border-radius: 14px;
    padding: 25px 16px;
    box-shadow: 0 5px 20px rgba(9,43,82,.05)
}

.donar-icono {
    font-size: 33px;
    line-height: 1;
    color: #8b99a6
}

.donar-platino .donar-icono {
    color: #4A4A4A
}

.donar-diamante .donar-icono {
    color: #30a1c3
}

.donar-oro .donar-icono {
    color: #c89e38
}

.donar-plata .donar-icono {
    color: #a4abb4
}

.donar-tarjeta h5 {
    font-size: 17px;
    color: var(--donar-azul)
}

.donar-precio {
    font-size: 28px;
    font-weight: 800;
    color: var(--donar-azul);
    line-height: 1.2
}

.donar-periodo {
    font-size: 13px;
    color: #69788a;
    margin-bottom: 8px !important
}

.donar-boton {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-height: 42px;
    width: 100%;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--donar-azul);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    line-height: 1.3;
    margin-top: auto;
    transition: background .2s
}

    .donar-boton:hover {
        background: #174a7e;
        text-decoration: none !important
    }

.donar-boton-inactivo {
    background: #e8edf2 !important;
    color: #657587 !important;
    cursor: default
}

.donar-corazon {
    font-size: 32px;
    color: var(--donar-rojo);
    line-height: 1
}

.donar-tarjeta-aliado {
    background: #fafbfd
}

.donar-otra-cantidad {
    text-align: center;
    background: var(--donar-fondo);
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px
}

    .donar-otra-cantidad strong {
        font-size: 17px;
        color: var(--donar-azul)
    }

    .donar-otra-cantidad p {
        margin: 8px 0 !important;
        font-size: 14px
    }

.donar-otras-formas {
    border-top: 1px solid var(--donar-borde);
    padding-top: 34px
}

.donar-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--donar-borde)
}

    .donar-fila h4, .donar-transferencia h4, .donar-ayuda h4 {
        font-size: 18px;
        color: var(--donar-azul);
        margin-bottom: 7px
    }

    .donar-fila p, .donar-transferencia > p, .donar-ayuda p {
        font-size: 14px;
        line-height: 1.6
    }

    .donar-fila .donar-boton {
        width: auto;
        min-width: 150px;
        margin: 0
    }

.donar-transferencia {
    padding: 24px 0;
    border-bottom: 1px solid var(--donar-borde)
}

.donar-datos {
    margin-top: 18px;
    padding: 22px;
    background: var(--donar-fondo);
    border-radius: 12px;
    display: grid;
    gap: 15px
}

    .donar-datos > div {
        display: flex;
        align-items: center;
        gap: 14px;
        flex-wrap: wrap
    }

        .donar-datos > div > span:first-child {
            min-width: 165px;
            color: #68778a;
            font-size: 13px
        }

    .donar-datos strong {
        font-size: 14px;
        overflow-wrap: anywhere
    }

.donar-boton-copiar {
    border: 1px solid #b9c8d8;
    background: #fff;
    color: var(--donar-azul);
    border-radius: 7px;
    padding: 9px 12px;
    font-weight: 700;
    cursor: pointer
}

    .donar-boton-copiar:hover {
        background: #eaf0f7
    }

.donar-estado-copia {
    font-size: 13px;
    color: #267443
}

.donar-ayuda {
    padding: 22px 0;
    border-bottom: 1px solid var(--donar-borde)
}

.donar-enlace-pendiente {
    color: #7c8795;
    font-style: italic
}

.donar-pie {
    text-align: center;
    padding: 4px 0 12px
}

.donar-cemefi-reserva {
    display: inline-block;
    padding: 24px;
    border: 1px dashed #b7c2cd;
    border-radius: 10px;
    color: #68778a;
    font-size: 13px
}

.donar-seccion a:focus-visible, .donar-seccion button:focus-visible {
    outline: 3px solid #ed7a4c;
    outline-offset: 3px
}

@media (max-width:1400px) {
    .donar-contenedor {
        max-width: 1100px
    }

    .donar-grid {
        gap: 14px
    }

    .donar-tarjeta {
        padding: 22px 12px
    }

    .donar-precio {
        font-size: 26px
    }
}

@media (max-width:600px) {
    .donar-seccion {
        padding: 30px 15px
    }

    .donar-encabezado h2 {
        font-size: 27px
    }

    .donar-introduccion {
        padding: 20px;
        margin-bottom: 30px
    }

        .donar-introduccion h3 {
            font-size: 20px
        }

    .donar-titulo-bloque h3, .donar-otras-formas > h3 {
        font-size: 23px
    }

    .donar-grid {
        grid-template-columns: repeat(2,minmax(0,1fr));
        gap: 12px
    }

    .donar-tarjeta {
        padding: 20px 10px
    }

        .donar-tarjeta h5 {
            font-size: 15px
        }

    .donar-precio {
        font-size: 24px
    }

    .donar-boton {
        font-size: 12px;
        padding: 9px 7px
    }

    .donar-fila {
        align-items: flex-start;
        flex-direction: column
    }

    .donar-datos > div {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px
    }

    .donar-datos {
        padding: 16px
    }
}

@media (max-width:450px) {
    .donar-seccion {
        padding: 24px 12px
    }

    .donar-encabezado h2 {
        font-size: 24px
    }

    .donar-introduccion {
        padding: 17px
    }

        .donar-introduccion > p {
            font-size: 14px
        }

    .donar-grid {
        grid-template-columns: 1fr;
        gap: 12px
    }

    .donar-tarjeta {
        padding: 22px 18px
    }

    .donar-precio {
        font-size: 29px
    }

    .donar-boton {
        font-size: 14px
    }

    .donar-subtitulo {
        font-size: 19px
    }

    .donar-otra-cantidad {
        padding: 18px
    }

    .donar-dato-clabe strong {
        font-size: 13px
    }

    .donar-fila .donar-boton {
        width: 100%
    }
}