/* Importar la fuente Montserrat desde Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');

/* Establecer Montserrat como fuente predeterminada */
body {
  font-family: 'Montserrat', sans-serif;
  margin: 0;
  padding: 0;
  color: black;
}

/* Estilos para el cintillo de inicio */
.cintillo {
  background-image: url('img/barra_head.png'); /* Ruta de la imagen */
  background-size: cover; /* La imagen cubre toda la sección */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  color: white;
  height: 70px;
  display: flex;
  position: relative; /* Necesario para posicionar la imagen */
  padding-right: 100px; /* Espacio para la imagen */
}

.menu {
  color: white;
  color: #900045;
  height: 70px;
  display: flex;
  position: relative; /* Necesario para posicionar la imagen */
  padding-right: 100px; /* Espacio para la imagen */

}

.titulo_centrado {
    color: #900045; /* Color del texto para que contraste con la imagen */
    font-size: 2rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
  }
/* Estilos para el slide */
  .slide {
    background-image: url('img/fondo_carrusel.png'); /* Ruta de la imagen */
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
    height: 500px;
  /*display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 600;*/
}


/* Estilos para la sección "¿Qué debo hacer?" */
.que-debo-hacer {
    background-image: url('img/quedebohacer.png'); /* Ruta de la imagen */
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */  
  height: 500px;
  padding: 2rem;
  text-align: center;
}

.que-debo-hacer h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Estilos para la sección "¿Qué es el RNPDNO?" */
.que-es-rnpdno {
/* Fondo */
    background-image: url('img/foto_estadistica.jpg'); /* Ruta de la imagen */
    background-size: cover; /* ¡Esta es la clave para la adaptabilidad! */
    background-position: center center; /* Centra la imagen tanto horizontal como verticalmente */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: scroll; /* La imagen se desplaza con el contenido. Considera 'fixed' si quieres un efecto parallax. */

    /* Color de respaldo */
    background-color: #f0e5d3; /* Color de fondo si la imagen no carga o para un efecto de superposición */

    /* Dimensiones y espaciado */
    height: 500px; /* Define una altura mínima. Puedes considerar 'min-height' para mayor flexibilidad. */
    padding: 2rem; /* Espaciado interno */
    text-align: center; /* Alineación del texto dentro del div */

    /* Propiedades adicionales para un mejor control en responsive */
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
    box-sizing: border-box; /* Incluye padding y border en el ancho/alto total */
}

.que-es-rnpdno h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Estilos para la sección "Personas localizadas" */
.personas-localizadas {
   /* background-image: url('img/fondo_localizadas.png'); /* Ruta de la imagen */
    background-image: url('img/localizadas.png'); /* Ruta de la imagen */
    background-size: cover; /* La imagen cubre toda la sección */
    background-position: center; /* Centra la imagen */
    background-repeat: no-repeat; /* Evita que la imagen se repita */ 
  height: 780px;
  padding: 2rem;
  text-align: center;
}

.personas-localizadas h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

/* Estilos para la sección "Alianzas" */
.alianzas {
  background-color: #f0e5d3;
  height: 600px;
  padding: 2rem;
  text-align: center;
}

.alianzas h2 {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
}
.logo_alianzas{
    height: 150px;
    width: auto;
    object-fit: contain;
}

/* Estilos para el pie de página */
        footer {
            color:#900045;
            padding: 10px 0;
            font-size: 14px;
        }
        .footer_titulo{
          font-weight: bolder;
        }
        .footer_texticon{
          color: #a88d51;
        }
        .footer-logo img {
            max-width: 180px;
            height: auto;
        }
        .footer-contact a, .footer-address a {
          color:#900045;
            text-decoration: none;
            transition: color 0.3s;
        }
        .footer-contact a:hover, .footer-address a:hover {
            color: #3498db;
        }
        .social-logos img {
            max-width: 100px;
            margin-right: 15px;
            filter: brightness(0) invert(1);
        }
        .social-logos img:hover {
            filter: none;
        }
        /* Eliminar márgenes laterales */
        .full-width-footer {
            width: 100%;
            margin-left: 0;
            margin-right: 0;
            padding-left: 0;
            padding-right: 0;
        }
        /* Ajustar contenido interno */
        .footer-content {
            padding-left: 15px;
            padding-right: 15px;
        }
        @media (max-width: 768px) {
            .footer-section {
                margin-bottom: 30px;
                text-align: center;
            }
            .social-logos {
                justify-content: center !important;
            }
        }
    .cintillo_footer {
       background-color:#a88d51;
      }

      .card-header {
            background-color: #a51d49;
        }
        .card-header img {
            border-radius: 50%;
        }
        .card-footer {
            background-color: #f5e6d3;
        }
        .text-custom {
            color: #a51d49;
        }
    

    .whatsapp-float {
    position: fixed; /* Hace que el botón flote y se quede en su posición al hacer scroll */
    width: 60px; /* Ancho del botón */
    height: 60px; /* Alto del botón */
    bottom: 40px; /* Distancia desde la parte inferior de la pantalla */
    right: 40px; /* Distancia desde el lado derecho de la pantalla */
    background-color: #25d366; /* Color de fondo de WhatsApp */
    color: #FFF; /* Color del ícono */
    border-radius: 50px; /* Hace que el botón sea circular */
    text-align: center; /* Centra el ícono */
    font-size: 30px; /* Tamaño del ícono */
    box-shadow: 2px 2px 3px #999; /* Sombra sutil */
    z-index: 100; /* Asegura que el botón esté sobre otros elementos */
    display: flex; /* Para centrar vertical y horizontalmente el ícono si es necesario */
    justify-content: center;
    align-items: center;
    text-decoration: none; /* Quita el subrayado del enlace */
    transition: background-color 0.3s ease; /* Transición suave para el hover */
}

.whatsapp-float:hover {
    background-color: #128C7E; /* Color más oscuro al pasar el mouse */
}

/* Estilo para el ícono de Font Awesome si lo usas */
.whatsapp-icon {
    margin-top: 2px; /* Ajuste fino si el ícono no está perfectamente centrado */
}

/* Si usas una imagen en lugar de Font Awesome */
.whatsapp-icon-img {
    width: 100%; /* Asegura que la imagen ocupe todo el botón */
    height: 100%;
    object-fit: contain; /* Ajusta la imagen dentro del botón */
}

/* Opcional: Para dispositivos móviles */
@media (max-width: 768px) {
    .whatsapp-float {
        width: 50px;
        height: 50px;
        bottom: 20px;
        right: 20px;
        font-size: 25px;
    }
}

.fondo_guinda{
  background-color: #9d2449;
  color: white;
}

.fondo_verde{
  background-color: #285c4d;
  color: white;
}

.fondo_dorado{
  background-color: #b38e5d;
  color: white;
}

.fondo_1{
  background-color: #f44c63;
  color: white;
}

.fondo_2{
  background-color: #00b0a6;
  color: white;
}

.fondo_3{
  background-color: #0098d4;
  color: white;
}