@media (max-width: 768px) {
  .fondo-imagen-header {
    background-attachment: scroll; /* Evita bugs en móviles */
  }
}

/* Reseteo b¨¢sico y Body (para eliminar el espacio en blanco superior) */
body {
    margin: 0;
    padding: 0;
}

/* El Contenedor Principal */
.fondo-imagen-header {
    position: relative; /* CLAVE: Define el punto de referencia para los elementos absolutos */
    width: 100vw;
    height: auto; /* Permite que el contenedor tome la altura de la imagen */
}

/* La Imagen */
.imagen-header {
    width: 100%;
    height: auto;
    display: block; /* Elimina el espacio extra que a veces aparece debajo de las im¨¢genes */
}

/* Barra de Navegaci¨®n (Contiene Logo y Enlaces) */
.navbar {
    position: absolute; 
    top: 30.0%; /* Posici¨®n: Aproximadamente 2/3 de la altura de la imagen */
    width: 100%;
    z-index: 10;
    
    /* Fondo semi-transparente y fuente blanca (ajusta a al gusto) */
    background-color: rgba(0, 0, 0, 0.6); 
    color: white; 
    padding: 1rem 0; /* Espacio vertical dentro del NAV */
}
@media (max-width: 768px) {
    .navbar {
        background-color: transparent; /* Elimina el fondo */
        /* Si quieres asegurar que no haya sombras u otros fondos: */
        background: none; 
    }
}

/* Alineaci¨®n del men¨² de enlaces (centro) */
.navbar .navbar-nav {
    width: 100%;
    justify-content: center;
}

/* Estilo de los enlaces (el texto principal) */
.navbar .nav-link {
    color: rgb(127, 189, 66) !important; /* Asegura que el texto sea blanco sobre el fondo oscuro */
    padding: 0 1.5rem; /* Espacio horizontal entre los enlaces */
    text-transform: uppercase;
    /*font-weight: bold;*/
}

/* Cambia el color del texto cuando el enlace está activo */
.navbar .nav-link.active {
    color: #7FBD42 !important; /* Usa el color que prefieras (ejemplo: amarillo dorado) */
    font-weight: bold;         /* Opcional: para que resalte más */
}

/* Opcional: Si quieres que al pasar el mouse también cambie o se mantenga */
.navbar .nav-link:hover {
    color: #7FBD42 !important; 
}

/* Contenedor de Iconos de Redes Sociales (Arriba del Men¨²) */
.iconos-redes-sociales {
    position: absolute;
    top: 25%; /* Posiciona un poco arriba del NAV (60% < 66.66%) */
    right: 17rem; /* Separaci¨®n desde el borde derecho */
    z-index: 15; /* Asegura que est¨¦ por encima del NAV */
    
    /* Usamos Flexbox para alinear los ¨ªconos horizontalmente */
    display: flex;
    gap: 0.8rem;
}

.iconos-redes-sociales a {
    color: white; /* Color de los ¨ªconos */
    font-size: 1.2rem;
    text-decoration: none;
}

.logo-quiero-donar {
    /* CLAVE 1: Para poder anclarlo al contenedor principal */
    position: absolute; 
    
    /* CLAVE 2: Ancla el elemento al borde INFERIOR (bottom: 0) */
    bottom: 2rem; 
    
    /* CLAVE 3: Ancla el elemento al borde DERECHO (right: 0) */
    right: 17rem; 
    
    /* Opcional: Asegura que est¨¦ por encima de todo lo dem¨¢s */
    z-index: 25; 
}
@media (max-width: 768px) {
    .logo-quiero-donar {
        /* Reducimos la distancia desde la derecha para que no se salga */
        right: 0.5rem; 
        
        /* Opcional: Ajustamos la distancia desde abajo si es necesario */
        bottom: 1rem; 

        /* Opcional: Si el logo es muy grande, podrías redimensionarlo aquí */
         width: 125px; 
    }
}

/* Estilos para la imagen dentro del enlace (si aplica) */
.logo-quiero-donar img {
    width: 150px; /* Ajusta el tamaño segen sea necesario */
    height: auto;
}




.texto-marco-normativo{
  color: rgb(127, 189, 66);
}

.corazon {
    width: 500px;
    animation: latido 1s infinite;
    padding-top: 50px;
    padding-left: 150px;
    
}

@keyframes latido {
    0% { transform: scale(1); }
    25% { transform: scale(1.1); }
    50% { transform: scale(1); }
    75% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}


.nav-custom {
/*    background-color: transparent !important;*/
}

/* NAV oscuro a partir de pantallas grandes (¡Ý 992px) */
/*
@media (min-width: 992px) {
    .nav-custom {
        background-color: rgba(0, 0, 0, 0.6) !important;
    }
}
*/
@media (max-width: 768px) {
    .img-fluid_organos {
        width: 35% !important; 
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* Selecciona el contenedor del menú lateral */
.offcanvas {
    /* Si quieres que sea blanco semitransparente: rgba(255, 255, 255, 0.7) */
    /* Si quieres que sea negro semitransparente: rgba(0, 0, 0, 0.7) */
    background-color: rgba(255, 255, 255, 0.3) !important; /* Blanco muy transparente */
    backdrop-filter: blur(10px); /* Esto desenfoca el fondo */
    -webkit-backdrop-filter: blur(10px); /* Soporte para Safari */
    
}

/* Opcional: Cambiar el color del texto si el fondo es oscuro */
.offcanvas .offcanvas-title, 
.offcanvas .nav-link {
    color: white !important;
}