/* ======================================== */
/* ===          CSS/DONA.CSS            === */
/* ======================================== */

/* --- Reset de Padding para el Body --- */
body.page-dona {
    background-color: #f8f9fa;
}

.page-header-image {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('../imagenes/cabecera-dona.jpg');
    background-size: cover;
    background-position: center center;
    min-height: 350px;
    display: flex;
    align-items: center;
    justify-content: center;    
    position: relative;
}

.page-header-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.45);
    z-index: 1;
}

.page-header-image .header-content {
    position: relative;
    z-index: 2;
    text-align: center;
}

/* Título principal de la cabecera */
.page-header-image .page-title {
    text-shadow: 2px 2px 6px rgba(0, 0, 0, 0.7);
    font-size: 3.5rem;
    margin-bottom: 0;
}

#main-dona-content {
}

#dona-intro.section-dona {
}/*
.img-crop-container {
    width: 500px;   
    height: 250px;  
    overflow: hidden;
    position: relative;
  }
  
  .img-crop-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
*/
/* --- Estilos Secciones Generales en Dona --- */
.section-dona {
}
.section-title-dona {
    color: var(--minga-dark);
    font-weight: 400;
    margin-bottom: 3rem;
    text-align: center;
}
.feature-icon-dona { 
    font-size: 2.8rem;
    margin-bottom: 1rem;
}
h4.section-title-dona {
    color: var(--minga-dark);
    font-weight: 400;
    font-size: 1.2rem!important;
    text-align: center;
}

/* --- Estilos Tarjetas Opciones de Donación --- */
.donation-option-card { border: 1px solid #e0e0e0; transition: all 0.3s ease-in-out; background-color: #ffffff; }
.donation-option-card:hover { transform: translateY(-7px); box-shadow: 0 0.8rem 1.8rem rgba(0,0,0,0.08) !important; }
.donation-icon { font-size: 2.8rem; /* color: var(--minga); en HTML */ }
.donation-option-card .donation-title { color: var(--minga-dark); font-size: 1.4rem; font-weight: 600; margin-bottom: 0.75rem; }
.donation-description { font-size: 0.9rem; color: #555; line-height: 1.6; margin-bottom: 1rem; }
.donation-btn { padding: 0.7rem 1.8rem; font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; border-radius: 4px; }
.donation-option-card .btn-primary.donation-btn { background-color: var(--minga); border-color: var(--minga); }
.donation-option-card .btn-primary.donation-btn:hover { background-color: var(--minga-dark); border-color: var(--minga-dark); }
.donation-option-card .btn-success.donation-btn { background-color: var(--minga-yellow); border-color: var(--minga-yellow); color: var(--minga-yellow-text); }
.donation-option-card .btn-success.donation-btn:hover { background-color: var(--minga-yellow-dark); border-color: var(--minga-yellow-dark); color: var(--minga-yellow-text); }

/* --- Estilos "Otras Formas de Ayudar" --- */
.other-ways-to-help-dona { border-top: 3px solid var(--minga-light); padding: 1.5rem; /* Añadir padding interno */ }
.other-ways-to-help-dona .btn-outline-secondary { border-color: #bbb; color: #555; font-size: 0.9rem; margin: 0.25rem; /* Espacio entre botones */ }
.other-ways-to-help-dona .btn-outline-secondary:hover { background-color: var(--minga-gray); color: white; }
.other-ways-to-help-dona .text-minga { font-weight: 500; }

/* --- Estilos Lista "Cómo se utiliza tu donación" --- */
.check-list-dona li { padding-left: 0.5rem; margin-bottom: 0.6rem; font-size: 1rem; color: #333; display: flex; align-items: flex-start; }
.check-list-dona li i.fa-check { color: var(--bs-success); font-size: 0.9em; margin-right: 0.5rem; margin-top: 0.25em; }

/* --- Responsive --- */
@media (max-width: 767.98px) {
    .page-header-image.header-dona {
        min-height: 55vh;
        padding-top: calc(60px + 4rem);
        padding-bottom: 3rem;
    }
    .header-dona .page-title { font-size: 2.3rem; }
    .header-dona .page-subtitle { font-size: 1.1rem; }
    .section-title-dona { font-size: 1.7rem; margin-bottom: 2rem; }
}






.info-alert-bootstrap-section {
    background-color: transparent; 
}

.alert.alert-info {
    border-width: 1px;
    border-radius: 0.375rem;
}

.alert.alert-info .alert-heading {
}

.alert.alert-info hr {
    border-top-color: currentColor;
    opacity: 0.25;
}

.alert.alert-info .alert-link {
    font-weight: bold;
}


#main-dona-content > section#dona-intro {
}



/* --- Responsive --- */
@media (max-width: 767.98px) {
    /* ... (Estilos responsive anteriores) ... */

    .info-alert-bootstrap-section .alert {
        font-size: 0.9rem; /* Texto un poco más pequeño en el alert en móvil */
    }
    .info-alert-bootstrap-section .alert .alert-heading {
        font-size: 1.05rem;
    }
}





/* --- MODIFICADO: Estilos Sección Dos Columnas (4+6) --- */
#two-col-4-6-centered {
    /* ... */
}

.two-col-content {
    /* Quitar padding si la imagen ocupa todo */
    /* padding: 1.5rem; */
}


/* NUEVO: Contenedor para la imagen que se recortará */


/*
.img-crop-container {
    width: 500px;   
    height: 250px;  
    overflow: hidden;
    position: relative;
  }
  
  .img-crop-container img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
*/


.image-cropper-container {
    max-height: 250px; /* Altura máxima deseada */
    overflow: hidden;  /* ¡La clave para recortar! */
    position: relative; /* Para posible contenido superpuesto si se quisiera */
    width: 100%; /* Ocupa el ancho de la columna col-lg-4 */
    /* border-radius: 0.375rem; /* Redondeo aplicado al contenedor */
}

/* NUEVO: Estilos para la imagen dentro del contenedor */
.image-to-crop {
    display: block; /* Quitar espacio extra debajo */
    width: 100%;    /* Que intente ocupar todo el ancho del contenedor */
    height: 100%;   /* Que intente ocupar toda la altura del contenedor */
    object-fit: cover; /* Escala manteniendo proporción y RECORTA para llenar */
    object-position: center center; /* Centra la imagen antes de recortar (puedes cambiar a 'top center', etc.) */
    transition: transform 0.4s ease; /* Efecto zoom opcional */
}
/* Efecto zoom opcional al pasar el ratón sobre el contenedor */
 .image-cropper-container:hover .image-to-crop {
    transform: scale(1.05);
} 


#two-col-4-6-centered h3 { /* (sin cambios) */
    color: var(--minga-dark); font-weight: 600;
}
#two-col-4-6-centered h4 { /* (sin cambios) */
     color: var(--minga); font-size: 1.25rem;
}
#two-col-4-6-centered .check-list-dona li { /* (sin cambios) */
     font-size: 0.9rem; margin-bottom: 0.4rem;
}

/* Responsive */
@media (max-width: 991.98px) {
    #two-col-4-6-centered .col-lg-4 { margin-bottom: 2rem; text-align: center !important; }
    #two-col-4-6-centered .col-lg-6 { text-align: center; }
    .two-col-content { padding: 1rem; } /* Devolver padding si es necesario */
    .image-cropper-container {
         max-height: 350px; /* Altura máxima diferente en tabletas/móviles */
         margin-left: auto; /* Centrar el contenedor si la columna es más ancha */
         margin-right: auto;
         max-width: 90%; /* Limitar ancho en pantallas pequeñas si se desea */
    }
}

/*******************************************************************************************/

/* --- Estilos Opcionales para Sección Simple CTA --- */
#simple-cta-donate {
    /* background-color: #f1f1f1; */ /* Ejemplo: un fondo muy sutil si quieres diferenciarla */
}

#simple-cta-donate .section-title-dona {
    /* Ajustes específicos para este título si son necesarios */
    font-size: 1.8rem;
    font-weight: 400;
}

#simple-cta-donate p.fw-dona {
    font-size: 1.5rem; /* Hacer el texto un poco más grande */
    line-height: 1.7;
    font-weight: 400;
}
#simple-cta-donate p.fw-dona2 {
    font-size: 1.2rem; /* Hacer el texto un poco más grande */
    line-height: 1.7;
    font-weight: 300;
}

#simple-cta-donate .btn-minga-red {
    /* Ajustes específicos para este botón si son necesarios */
    /* padding: 1rem 2.5rem; */ /* Más grande */
    /* font-size: 1.1rem; */
}

/*******************************************************************************************/
/* --- NUEVO: Estilos Sección 3 Imágenes Ancho Completo --- */
.section-dona-fullwidth {
    /* Puedes darle un fondo si quieres que el espacio entre imágenes (si usas gutters) tenga color */
     /* background-color: #e9ecef; */
     padding-top: 4rem; /* Ajustar padding si es necesario */
     padding-bottom: 4rem;
}

.image-zoom-row {
    /* Si usaste g-0 en HTML, no habrá espacio. Si quieres espacio usa g-1, g-2, etc. */
}

.image-zoom-col {
    /* Estilos para la columna si son necesarios */
}

/* Contenedor que controla el overflow y el efecto */
.image-zoom-wrapper {
    position: relative; /* Para posicionar el caption */
    overflow: hidden;   /* ¡Clave! Oculta lo que se salga por el zoom */
    width: 100%;
    height: 0;
    /* Padding-bottom crea un aspect ratio. Ej: 75% = 4:3, 56.25% = 16:9, 100% = 1:1 */
    /* Ajusta este porcentaje a la proporción deseada para las imágenes */
    padding-bottom: 75%; /* Ejemplo para ratio 4:3 */
    background-color: #333; /* Color de fondo mientras carga imagen */
}

/* La imagen dentro del contenedor */
.image-zoom-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cubre el contenedor manteniendo proporción */
    object-position: center center; /* Centra la imagen */
    transition: transform 0.5s ease-in-out; /* Transición suave para el zoom */
}

/* Efecto Zoom al pasar el ratón sobre el WRAPPER */
.image-zoom-wrapper:hover .image-zoom-content {
    transform: scale(1.1); /* Aumenta la escala de la imagen */
}

/* Opcional: Caption superpuesto */
.image-zoom-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); /* Gradiente oscuro abajo */
    color: white;
    text-align: center;
    padding: 1.5rem 1rem 1rem; /* Padding del caption */
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.5s ease-in-out;
    z-index: 2; /* Sobre la imagen */
    pointer-events: none; /* No bloquear hover de la imagen */
}

/* Mostrar caption al pasar el ratón sobre el WRAPPER */
.image-zoom-wrapper:hover .image-zoom-caption {
    opacity: 1;
}


/* Responsive para las 3 columnas */
@media (max-width: 767.98px) {
    /* Las columnas col-md-4 se apilarán y g-3 añadirá espacio vertical */
    /* Ya no se necesita el margin-bottom aquí */
    /*
    .image-zoom-col:not(:last-child) {
         margin-bottom: 1rem;
    }
    */

    .image-zoom-wrapper {
        /* Ajustar ratio si se quiere diferente en móvil, ej. más alto */
        /* padding-bottom: 100%; */ /* Ejemplo para ratio 1:1 en móvil */
    }
     .image-zoom-caption {
        font-size: 1rem;
        padding: 1rem 0.75rem 0.75rem;
    }
}



/*******************************************************************************************/

/* --- NUEVO: Estilos Sección Beneficios/Impacto Donación --- */
.benefits-section {
    /* Fondo con gradiente suave o imagen de fondo sutil */
    background: linear-gradient(135deg, var(--minga-light, #e84a5f) 0%, var(--minga, #FB1700) 100%);
    /* Alternativa con imagen: */
    /* background-image: linear-gradient(rgba(var(--minga-red-rgb), 0.7), rgba(var(--minga-red-rgb), 0.85)), url('../imagenes/dona/fondo-beneficios.jpg'); */
    /* background-size: cover; */
    /* background-position: center center; */
    /* background-attachment: fixed; */ /* Opcional: efecto parallax */
    color: #ffffff; /* Color de texto principal claro */
    position: relative; /* Para posibles pseudo-elementos */
    overflow: hidden; /* Evitar desbordes de pseudo-elementos */
}

/* Opcional: Pseudo-elemento para patrón sutil */
/* .benefits-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: url('../imagenes/patterns/subtle-pattern.png');
    background-repeat: repeat;
    opacity: 0.05;
    z-index: 1;
} */
/* Asegurar que el contenido esté por encima del pseudo-elemento */
.benefits-section .container {
    position: relative;
    z-index: 2;
}

/* Icono central */
.benefits-icon {
    width: 100px;
    height: 100px;
    background-color: rgba(255, 255, 255, 0.15); /* Fondo semi-transparente */
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 3px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.benefits-icon i {
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Título */
.benefits-title {
    font-weight: 400;
    font-size: 2.2rem; /* Tamaño título */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Subtítulo/Descripción */
.benefits-subtitle {
    color: rgba(255, 255, 255, 0.85); /* Blanco un poco transparente */
    font-weight: 300;
}

/* Lista de Beneficios */
.benefits-list {
    /* max-width: 450px; ya en HTML */
}
.benefits-list li {
    background-color: rgba(255, 255, 255, 0.08); /* Fondo muy sutil para cada item */
    padding: 0.6rem 1rem;
    border-radius: 4px;
    margin-bottom: 0.75rem !important; /* Sobrescribir mb-2 si es necesario */
    font-size: 0.95rem;
    color: #f0f0f0; /* Texto ligeramente menos blanco */
    transition: background-color 0.2s ease;
}
.benefits-list li:hover {
     background-color: rgba(255, 255, 255, 0.15);
}
.benefits-list li i {
    color: #90ee90; /* Verde claro para el check */
    margin-top: 0.1em; /* Alinear mejor icono */
}
.benefits-list li span {
    flex-grow: 1; /* Para que el texto ocupe espacio */
}
.benefits-list li .highlight-benefit {
    font-weight: 600;
    color: #ffffff; /* Resaltar texto clave en blanco */
}

/* Botón CTA de esta sección */
.donate-benefits-btn {
    background-color: var(--minga-yellow);
    border-color: var(--minga-yellow);
    color: var(--minga-yellow-text);
    font-weight: 700;
    padding: 0.8rem 2.5rem;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.donate-benefits-btn:hover {
    background-color: var(--minga-yellow-dark);
    border-color: var(--minga-yellow-dark);
    color: var(--minga-yellow-text);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Responsive */
@media (max-width: 767.98px) {
    .benefits-title { font-size: 1.8rem; }
    .benefits-subtitle { font-size: 1rem; }
    .benefits-list { max-width: 90%; }
    .benefits-list li { font-size: 0.9rem; padding: 0.5rem 0.8rem; }
    .donate-benefits-btn { padding: 0.7rem 2rem; font-size: 0.9rem;}
}
/* ... (Estilos anteriores: body, cabecera, franja roja, opciones donación, etc.) ... */

/* --- Estilos Sección "Amigo de Minga" (reutiliza .benefits-section para el fondo) --- */
/* .benefits-section { ... (definido anteriormente con gradiente o imagen) ... } */
/* .benefits-icon { ... (definido anteriormente) ... } */
/* .benefits-title { ... (definido anteriormente) ... } */
/* .benefits-subtitle { ... (definido anteriormente) ... } */
/* .highlight-benefit { ... (definido anteriormente) ... } */
/* .donate-benefits-btn { ... (definido anteriormente) ... } */


/* --- NUEVO: Estilos para Tarjetas de Niveles de Compromiso --- */
.commitment-levels {
    /* Espacio entre las tarjetas ya manejado por g-4 en HTML */
}

.commitment-card {
    background-color: rgba(255, 255, 255, 0.1); /* Fondo blanco muy sutil y transparente */
    border: 1px solid rgba(255, 255, 255, 0.2); /* Borde sutil */
    border-radius: 0.5rem; /* Bordes redondeados */
    /* d-flex y flex-fill en HTML ayudan a igualar altura */
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column; /* Para que el contenido interno se apile */
}
.commitment-card:hover {
    background-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.commitment-amount {
    /* text-warning ya está en HTML */
}
.commitment-amount .fs-6 { /* Para "anuales" */
    opacity: 0.8;
}

.commitment-duration {
    /* text-white-50 ya está en HTML */
}

.commitment-divider {
    border-color: rgba(255, 255, 255, 0.2); /* Línea divisoria sutil */
    margin-top: 0.75rem;
    margin-bottom: 0.75rem;
}

.commitment-impact {
    color: #f0f0f0; /* Texto del impacto */
    font-size: 0.85rem !important; /* Asegurar tamaño pequeño */
    line-height: 1.5;
    text-align: left; /* Alinear texto de impacto a la izquierda */
    flex-grow: 1; /* Para empujar este contenido hacia abajo si hay espacio */
}
.commitment-impact .highlight-benefit { /* Ya definido, asegura que se vea bien aquí */
    font-weight: 600;
    color: #ffffff;
}

/* Ajuste responsivo para las tarjetas de compromiso */
@media (max-width: 991.98px) and (min-width: 768px) {
    /* En tablets, si quieres que las 3 tarjetas ocupen más espacio en una fila */
    /* #amigo-de-minga .col-lg-4 {
        flex: 0 0 auto;
        width: calc(100% / 3 - var(--bs-gutter-x));
    } */
    /* O simplemente dejar que Bootstrap las maneje (se apilarían si no caben) */
}

@media (max-width: 767.98px) {
    .commitment-card:not(:last-child) {
        /* margin-bottom: 1.5rem; ya manejado por g-4 */
    }
    .commitment-amount { font-size: 1.5rem; } /* Monto un poco más pequeño */
    .commitment-impact { text-align: center; } /* Centrar impacto en móvil */
}

/* ... (Resto de tus estilos para otras secciones) ... */


/*******************************************************************************************/

/* --- NUEVO/MODIFICADO: Estilos Mejorados Sección Donación por País --- */
#dona-por-pais {
    background-color: #ffffff; /* Fondo blanco para esta sección */
    border-top: 1px solid #eee; /* Separador sutil de la sección anterior */
    border-bottom: 1px solid #eee;
}

.country-donation-card {
    border: none; /* Quitar borde por defecto */
    border-radius: 0.75rem; /* Bordes más redondeados */
    box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.07); /* Sombra suave */
    transition: all 0.3s ease-in-out;
    /* Eliminar d-flex y align-items-stretch de la COLUMNA en HTML si se usa esto */
    margin-bottom: 1.5rem; /* Asegurar espacio si se apilan */
}
/* .country-donation-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.1);
} */ /* Hover opcional */

/* Cabecera de la tarjeta */
.country-donation-card .card-header {
    border-top-left-radius: 0.75rem; /* Redondear esquinas superiores */
    border-top-right-radius: 0.75rem;
    border-bottom: none;
    padding: 1rem 1.5rem;
    /* Colores ya definidos en HTML (bg-primary, bg-danger) */
}
.country-donation-card .card-header h4 {
    font-size: 1.2rem; /* Ligeramente más grande */
    font-weight: 500;
    letter-spacing: 0.5px;
}
.country-donation-card .card-header i {
    font-size: 1.1em; /* Icono un poco más grande */
    opacity: 0.9;
    margin-right: 0.75rem !important; /* Más espacio para icono */
    vertical-align: -0.1em; /* Alinear mejor */
}

/* Cuerpo de la tarjeta */
.country-donation-card .card-body {
    padding: 2rem 1.75rem; /* Más padding */
}

/* Párrafo introductorio */
.country-donation-card .card-body > p.small {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #555;
}
.country-donation-card .card-body > p.small strong {
    color: #333;
    font-weight: 600;
}

/* Subtítulos dentro de la tarjeta */
.country-donation-card h5.fw-semibold {
    color: var(--minga); /* Color Minga para subtítulos */
    font-size: 1.1rem;
    margin-top: 1.5rem; /* Espacio antes del subtítulo */
    margin-bottom: 0.75rem !important; /* Forzar espacio debajo */
    padding-bottom: 0.3rem;
    border-bottom: 2px solid var(--minga-light); /* Línea sutil debajo */
    display: inline-block; /* Para que el borde no ocupe todo */
}

/* Detalles bancarios */
.bank-details {
    background-color: #f8f9fa; /* Fondo ligero para resaltar */
    border: 1px solid #eee;
    border-radius: 0.375rem;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem !important; /* Asegurar espacio debajo */
}
.bank-details strong.d-block {
    color: var(--minga-dark);
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 0.5rem !important; /* Espacio después del título (USD/PEN) */
}
.bank-details p.small {
    color: #333;
    line-height: 1.5;
    margin-bottom: 0.25rem !important; /* Menos espacio entre líneas de cuenta/cci */
    font-size: 0.85rem; /* Ligeramente más pequeño */
}
.bank-details .text-monospace span.fw-bold {
    color: #000; /* Números en negro */
    letter-spacing: 0.5px; /* Espaciar números */
}

/* Detalles de contacto */
.contact-details p {
    line-height: 1.7;
    font-size: 0.9rem;
}
.contact-details i.fa-fw {
    color: var(--minga); /* Iconos de contacto en color Minga */
    opacity: 1;
}
.contact-details a.text-muted {
    color: #444 !important; /* Enlaces de contacto un poco más oscuros */
    text-decoration: underline;
    text-decoration-color: var(--minga-light);
    text-underline-offset: 2px;
}
.contact-details a.text-muted:hover {
    color: var(--minga) !important;
    text-decoration-color: var(--minga);
}


/* Botón Donar Online (EEUU) - Ajuste */
.country-donation-card .btn-info.donation-btn {
    /* Hereda .donation-btn si existe, si no definir aquí */
    padding: 0.7rem 1.8rem; font-weight: 600; font-size: 0.9rem;
    /* ... (colores como antes o ajustar) ... */
    background-color: var(--bs-primary); /* Usar color primario de Bootstrap */
    border-color: var(--bs-primary);
    color: white;
}
.country-donation-card .btn-info.donation-btn:hover {
     background-color: #0b5ed7; /* Primario oscuro de Bootstrap */
     border-color: #0a58ca;
}


/* Botón Descargar Formulario - Ajuste */
.country-donation-card .btn-outline-secondary {
    font-size: 0.85rem;
    padding: 0.4rem 1rem;
    border-color: var(--minga); /* Borde color Minga */
    color: var(--minga);
}
.country-donation-card .btn-outline-secondary:hover {
    background-color: var(--minga-light);
    border-color: var(--minga);
    color: white;
}

/* --- Responsive (Ajustes adicionales si son necesarios) --- */
@media (max-width: 991.98px) {
     .country-donation-card { margin-bottom: 2rem; } /* Más espacio al apilarse */
}
@media (max-width: 767.98px) {
    .country-donation-card .card-body { padding: 1.5rem 1.25rem; }
    .country-donation-card .card-header h4 { font-size: 1.1rem; }
    .country-donation-card h5.fw-semibold { font-size: 1rem; }
}

/* ... (Resto de estilos) ... */



/*******************************************************************************************/





/*******************************************************************************************/





/*******************************************************************************************/





/*******************************************************************************************/





/*******************************************************************************************/





/*******************************************************************************************/