body {
            margin: 0;
            font-family: 'Arial', sans-serif;
            background: #f0f4f8;
            color: #333;
        }
/* Estilos para la barra superior */
.top-bar {
    background: #002855;
    color: white;
    font-size: 14px;
    padding: 10px 10px; /* Reduce el padding general para acercar los elementos a los bordes */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}

.top-bar .left, .top-bar .right {
    display: flex;
    align-items: center;
}

.top-bar .left i, .top-bar .right i {
    margin-right: 8px;
}

.top-bar .right a {
    color: white;
    margin-left: 15px;
    text-decoration: none;
    font-size: 18px;
}

.top-bar .right a:hover {
    color: #ffcc00;
}

/* Responsividad para dispositivos móviles */
@media (max-width: 768px) {
    .top-bar {
        padding: 10px 5px; /* Reduce aún más el padding en pantallas pequeñas */
    }

    /* Ocultar el .right en pantallas pequeñas */
    .top-bar .right {
        display: none;
    }
}

/* Barra de navegación fija en la parte superior */
header {
  background: #ffffff;
  padding: 0px 8%;
  height: 72px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
  transition: background 0.3s, color 0.3s;
}
/* Estilo general para la barra de navegación */
.navbar {
  display: flex;
  justify-content: space-between; /* Alinea los menús a los extremos */
  align-items: center; 
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;

}

/* Contenedor del logo */
.logo-container {
    margin-top: 50px;
  width: 80px;
  height: 80px;
  background: #ffffff;
  border-radius: 50%;
  overflow: hidden;
  border: 3px solid #002855;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.logo-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Estilo del menú de la izquierda */
.left-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.left-menu li {
  margin: 0 15px;
}

.left-menu li a {
  color: #000000;
  text-decoration: none;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Estilo para el enlace activo o cuando se pasa el ratón */
.left-menu li a:hover,
.left-menu li a.active {
  color: #f39c12;
  background-color: #444;
  border-radius: 5px;
  
}

/* Estilo para el menú derecho */
.right-menu {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.right-menu li {
  margin: 0 15px;
}

.right-menu li a {
  color: #000000;
  text-decoration: none;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  transition: color 0.3s ease, background-color 0.3s ease;
}

/* Estilo para el enlace activo o cuando se pasa el ratón */
.right-menu li a:hover,
.right-menu li a.active {
  color: #f39c12;
  background-color: #444;
  border-radius: 5px;
}

.submenu li a:hover,
.submenu li a.active {
  color: #f39c12; /* Color del texto al pasar el ratón o cuando está activo */
  background-color: #444; /* Fondo oscuro para el enlace */
  border-radius: 5px; /* Bordes redondeados */
  border-left: 4px solid #f4d03f; /* Borde izquierdo dorado */
}

/* Menú Hamburguesa (para pantallas pequeñas) */
.menu-hamburger {
  display: none;
}

/* Estilos responsivos */
@media screen and (max-width: 1024px) {
  .navbar {
    flex-direction: column; /* Cambia la dirección del flujo a vertical */
    align-items: center; /* Centra los menús */
  }

  .left-menu, .right-menu {
    flex-direction: column; /* Organiza los elementos en columna */
    align-items: center; /* Centra los elementos */
    margin-top: 20px;
  }

  .left-menu li, .right-menu li {
    margin: 10px 0; /* Añade espacio entre los elementos */
  }

  .left-menu li a, .right-menu li a {
    font-size: 14px; /* Ajusta el tamaño de la fuente */
    padding: 8px 12px; /* Reduce el padding */
  }

  /* Mostrar el menú hamburguesa en pantallas pequeñas */
  .menu-hamburger {
    display: block;
    font-size: 30px;
    color: #fff;
  }
}

/* Estilo al hacer scroll en el header */
header.scrolled {
  background: #002855; /* Fondo oscuro para el header */
  color: #ffffff; /* Color del texto */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); /* Sombra del header */
}

/* Cambiar color de los enlaces dentro del header al hacer scroll */
header.scrolled a {
  color: #ffffff; /* Cambiar color de los enlaces */
}

/* Estilo del submenú y sus enlaces al hacer scroll */
header.scrolled .submenu {
  background: #1e3a8a; /* Fondo del submenú cambia a un tono más oscuro */
  color: #ffffff; /* El color del texto será blanco */
}

/* Cambiar color de los enlaces dentro del submenú al hacer scroll */
header.scrolled .submenu a {
  color: #ffffff; /* Color blanco para los enlaces del submenú */
  transition: color 0.3s ease; /* Transición suave */
}

/* Efecto hover en los enlaces del submenú */
header.scrolled .submenu a:hover {
  color: #FFD700; /* Color dorado al pasar el mouse */
}

/* Estilo del submenú */
.submenu {
  display: none;
  position: absolute;
  top: 100%; /* Justo debajo del li */
  background-color: #444; /* Fondo oscuro más simple */
  color: white; /* Texto blanco */
  padding: 8px 12px; /* Espaciado más ajustado */
  font-size: 14px; /* Fuente pequeña */
  width: max-content; /* Ajuste al contenido */
  border: none; /* Sin bordes */
  transition: visibility 0.2s ease, opacity 0.2s ease; /* Transición rápida */
  visibility: hidden; /* Inicia oculto */
  opacity: 0; /* Inicia invisible */
}

/* Estilo general del submenú */
.submenu {
  display: none;
  position: absolute;
  top: 100%; /* Justo debajo del li */
  left: 0;
  background:white; /* Gradiente moderno */
  color: #fff;
  padding: 12px 20px; /* Espaciado más grande */
  font-size: 14px;
  border-radius: 8px; /* Bordes más redondeados */
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
  width: 200px; /* Ancho fijo para los elementos del submenú */
  opacity: 0; /* Inicia invisible */
  visibility: hidden; /* Inicia oculto */
  transition: all 0.4s ease-in-out; /* Transición suave para todos los cambios */
  transform: translateY(20px); /* Inicia desfasado desde abajo */
}

/* Submenú visible al hacer hover o cuando está abierto */
.left-menu li:hover .submenu,
.left-menu li.open .submenu,
.right-menu li:hover .submenu,
.right-menu li.open .submenu {
  display: block;
  visibility: visible;
  opacity: 1;
  transform: translateY(0); /* El submenú aparece con un efecto de deslizamiento */
}

/* Efecto hover en los elementos del submenú */
.submenu li {
  margin: 8px 0; /* Espaciado entre elementos */
  transition: background-color 0.3s ease, padding-left 0.3s ease; /* Transición suave al hover */
}

.submenu li:hover {
  background-color: rgba(255, 255, 255, 0.1); /* Fondo sutil al hacer hover */
  padding-left: 10px; /* Desplazamiento a la izquierda al hacer hover */
}

/* Submenú alineado a la derecha */
.right-menu li:hover .submenu,
.right-menu li.open .submenu {
  left: auto; /* Desactiva el alineado a la izquierda */
  right: 0;
  box-shadow: -4px 6px 20px rgba(0, 0, 0, 0.2); /* Sombra invertida para un diseño equilibrado */
}

/* Submenú alineado a la izquierda */
.left-menu li:hover .submenu,
.left-menu li.open .submenu {
  left: 0;
  right: auto;
  box-shadow: 4px 6px 20px rgba(0, 0, 0, 0.2); /* Sombra suave */
}

/* Menú de la izquierda y derecha */
.left-menu, .right-menu {
  position: relative;
}

.left-menu li, .right-menu li {
  position: relative;
  list-style: none;
}

/* Estilo de los enlaces dentro del submenú */
.submenu a {
  color: #fff; /* Texto blanco */
  text-decoration: none;
  font-weight: 500; /* Fuente más pesada */
  display: block; /* Asegurarse que el enlace ocupe toda la fila */
  padding: 8px 0;
  transition: color 0.3s ease;
}

/* Efecto hover en los enlaces */
.submenu a:hover {
  color: #FFD700; /* Cambio de color al pasar el mouse */
}





/* Menú en pantallas pequeñas */
@media (max-width: 768px) {
  /* Ocultar los menús en pantallas pequeñas por defecto */
  .left-menu, .right-menu {
    display: none;
    flex-direction: column;
    width: 50%; /* O puedes ajustar el ancho para que se ajusten mejor */
    background-color: #f39c12;
    position: absolute;
    top: 72px; /* Ajusta la altura del menú a la parte inferior del header */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    z-index: 999;
  }
  
  .logo-container {
        position: absolute;
        top: -34px;
        left: 50%;
        transform: translateX(-50%);
        width: 106px;
        height: 106px;
        background: #ffffff;
        overflow: hidden;
        border-radius: 50%;
        border: 5px solid #478503;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
        transition: transform 0.3s ease;
  }


  /* Mostrar menús cuando tienen la clase 'open' */
  .left-menu.open, .right-menu.open {
    display: none;
  }

  .left-menu {
    left: 0; /* Menú izquierdo a la izquierda */
  }

  .right-menu {
    right: 0; /* Menú derecho a la derecha */
  }

  .menu-hamburger {
    display: block; /* Mostrar el menú hamburguesa */
  }

  /* Estilo para los enlaces en el menú móvil */
  .left-menu li a, .right-menu li a {
    color: #fff;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 18px;
    text-align: center;
    display: block;
    transition: background-color 0.3s ease;
  }

  .left-menu li a:hover, .right-menu li a:hover {
    background-color: #333;
  }
}



.desktop-menu {
  display: flex;
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.desktop-menu li {
  margin: 0 15px;
}

.desktop-menu a {
  color: white;
  text-decoration: none;
  font-size: 16px;
}

.desktop-menu .submenu {
  display: none;
  list-style-type: none;
}

.desktop-menu li:hover .submenu {
  display: block;
  position: absolute;
  background-color: #2c3e50;
  border-radius: 5px;
  padding: 10px;
  top: 100%;
}

.desktop-menu .submenu li {
  padding: 8px 20px;
}


.mobile-nav {
  display: none; /* Por defecto oculto en escritorio */
  position: absolute;
  top: 0;
  right: 0;
  background-color: #34495e;
  width: 100%;
  height: 100vh;
  padding-top: 60px;
  list-style-type: none;
  margin: 0;
}

.mobile-nav li {
  padding: 15px 30px;
}

.mobile-nav a {
  color: white;
  text-decoration: none;
  font-size: 18px;
}

.mobile-nav .submenu {
  display: none;
  list-style-type: none;
  padding-left: 20px;
}

.mobile-nav li:hover .submenu {
  display: block;
}

.menu-hamburger {
  font-size: 30px;
  color: #000000;
  cursor: pointer;
}

.menu-hamburger:hover {
  color: #16a085;
}
/* Estilo para el botón de cierre (X) */
.close-menu {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
  display: none; /* Ocultarlo por defecto */
}

.close-menu:hover {
  color: #e74c3c;
}

/* Estilo para el menú móvil cuando está abierto */
.mobile-nav.open {
  display: block;
}

/* Cuando el menú está cerrado */
.mobile-nav {
  display: none;
}

/* Mostrar el botón de cerrar solo cuando el menú esté abierto */
.mobile-nav.open + .close-menu {
  display: block;
}

/* Estilos para dispositivos móviles */
@media (max-width: 768px) {
  .desktop-menu {
    display: none; /* Esconde el menú de escritorio */
  }

  .mobile-nav {
    display: block; /* Muestra el menú móvil */
  }

  .mobile-nav li {
    padding: 20px 30px;
  }
  
  /* Ocultar el menú por defecto */
  .mobile-nav {
    display: none;
  }

  .mobile-nav.open {
    display: block;
  }
}


    /* Contenedor principal */
.hero {
    text-align: center;
    padding: 0;  /* Elimina el padding para ajustar el tamaño del contenedor */
    color: white;
    background: linear-gradient(
        rgba(0, 0, 0, 0.5), 
        rgba(0, 0, 0, 0.5)
    ), 
    url('https://ugelchanchamayo.gob.pe/portal/admin/controller/slider/img/SLIDER43202413379.PNG') no-repeat center center;
    background-size: cover; /* La imagen cubre el área del contenedor */
    background-attachment: fixed; /* Fija la imagen de fondo al hacer scroll */
    height: 800px; /* La altura total del contenedor y la imagen será 100px */
    display: flex;
    justify-content: center; /* Centra el contenido horizontalmente */
    align-items: center; /* Centra el contenido verticalmente */
    overflow: hidden; /* Evita que el contenido desborde */
}

.hero h1 {
    margin: 0;  /* Elimina márgenes por defecto */
    font-size: 16px;  /* Ajusta el tamaño de la fuente si es necesario */
}

        .hero h1 {
            font-size: 3rem;
            color: white;
            margin-bottom: 15px;
            text-transform: uppercase;
            font-weight: bold;
        }
        .hero p {
            font-size: 1.4rem;
            color: #e0e0e0;
            margin-bottom: 30px;
        }
        .hero button {
            background: #0056b3;
            color: white;
            padding: 16px 35px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-size: 1.2rem;
            transition: background 0.3s, transform 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        }
        .hero button:hover {
            background: #003366;
            transform: translateY(-5px);
        }
        .section {
            padding: 70px 10%;
            text-align: center;
            background: #ffffff;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.1);
            border-radius: 15px;
            margin-top: 30px;
        }
        .section:nth-child(even) {
            background: #f4f4f4;
        }
        .section h2 {
            font-size: 2.5rem;
            color: #003366;
            margin-bottom: 15px;
            text-transform: uppercase;
        }
        .section p {
            font-size: 1.2rem;
            color: #666;
            margin-bottom: 25px;
        }

/* nuevon */
/* Contenedor de la sección */
.services-section {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columnas en PC */
    gap: 30px;
    padding: 50px;
    background-color: #f8f8f8;
}

/* Estilos para cada tarjeta de servicio */
.service-card {
    background-color: #ffffff;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Efecto de hover para las tarjetas */
.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
}

/* Estilo para el contenedor del ícono */
.icon-container {
    background-color: #e6f0ff;
    border-radius: 50%;
    padding: 20px;
    margin-bottom: 20px;
    display: inline-block;
}

/* Tamaño del ícono */
.icon-container img {
    width: 50px;
    height: 50px;
}

/* Estilo del título */
.service-card h3 {
    font-size: 1.25rem;
    font-weight: bold;
    color: #002855;
    margin-bottom: 10px;
}

/* Estilo para el texto */
.service-card p {
    font-size: 0.875rem;
    color: #6c757d;
    margin-bottom: 20px;
}

/* Estilo para el botón */
.service-btn {
    background-color: #007bff;
    color: #ffffff;
    border: none;
    border-radius: 50%;
    padding: 12px;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Efecto hover en el botón */
.service-btn:hover {
    background-color: #0056b3;
    transform: scale(1.1);
}

/* Media Query para pantallas pequeñas (móviles) */
@media screen and (max-width: 768px) {
    .services-section {
        padding: 20px;
        grid-template-columns: repeat(2, 1fr); /* 2 columnas en móviles */
    }
}

/* Media Query para pantallas grandes (escritorios) */
@media screen and (min-width: 1024px) {
    .services-section {
        grid-template-columns: repeat(6, 1fr); /* 6 columnas en pantallas grandes */
    }
}

/* Sección de Portafolio */
.portfolio-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #f9fbff;
}

/* Encabezado */
.portfolio-header {
    margin-bottom: 40px;
}

.portfolio-subtitle {
    font-size: 1rem;
    color: #6c757d;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 10px;
}

.portfolio-title {
    font-size: 2.5rem;
    color: #212529;
    font-weight: bold;
    margin: 0;
}

/* Tarjetas */
.portfolio-cards {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.portfolio-card {
    background-color: #ffffff;
    border-radius: 15px;
    width: 150px;
    padding: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-left: 4px solid #f4d03f;
    transition: all 0.3s ease;
    text-align: center;
}

.portfolio-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 15px rgba(0, 0, 0, 0.15);
}

.portfolio-card.active {
    background-color: #007bff;
    color: #ffffff;
}

.portfolio-icon {
    background: #f0f4ff;
    border-radius: 50%;
    padding: 15px;
    margin-bottom: 15px;
    display: inline-block;
    transition: transform 0.5s ease;  /* Añadir transición para la rotación */
}

.portfolio-icon img {
    width: 50px;
    height: 50px;
    transition: transform 0.5s ease; /* Añadir transición para la rotación de la imagen */
}

.portfolio-card:hover .portfolio-icon img {
    transform: rotateY(180deg);  /* Rotar la imagen de derecha a izquierda */
}


.portfolio-text {
    font-size: 0.875rem;
    font-weight: bold;
    margin: 0;
}

/* Responsividad */
@media screen and (max-width: 768px) {
    .portfolio-cards {
        gap: 10px;
    }

    .portfolio-card {
        width: 120px;
    }

    .portfolio-title {
        font-size: 2rem;
    }
}

/* Estilos generales para el footer */
.footer-horizontal {
    background-color: #0f2747; /* Color base */
    color: white;
    padding: 20px 15px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    text-align: left;
    align-items: center;
}

/* Sección del logo */
.footer-logo-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    max-width: 300px;
    margin-right: 20px;
    flex: 1;
}

.footer-logo {
    max-width: 150px;
    margin-bottom: 10px;
}

.footer-title {
    font-size: 24px;
    font-weight: bold;
    margin: 5px 0;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #FFD700; /* Color dorado */
}

/* Sección de la Directora */
.footer-director {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    margin-left: 20px;
    max-width: 350px;
}

.director-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.director-photo {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    object-fit: cover;
    margin-top: 10px;
}

h3 {
    font-size: 18px;
    margin-top: 10px;
    font-weight: bold;
    color: #FFD700; /* Color dorado */
}

p {
    font-size: 14px;
    font-weight: lighter;
    color: #ccc;
}

/* Enlaces rápidos */
.footer-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    flex: 2;
    max-width: 600px;
    margin: 20px 0;
}

.footer-column {
    flex: 1;
    min-width: 200px;
    margin: 10px;
}

.footer-column h3 {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: bold;
    color: #FFD700;
}

.footer-column ul {
    list-style: none;
    padding: 0;
}

.footer-column ul li {
    margin: 5px 0;
}

.footer-column ul li a {
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: color 0.3s;
}

.footer-column ul li a:hover {
    color: #FFD700;
}

/* Información de contacto */
.footer-contact {
    flex: 1;
    min-width: 180px;
    margin-left: 20px;
}

.contact-info {
    list-style: none;
    padding: 0;
    font-size: 14px;
}

.contact-info li {
    margin: 5px 0;
}

.contact-info i {
    margin-right: 10px;
}

/* Copyright */
.footer-bottom {
    font-size: 14px;
    border-top: 1px solid #444;
    padding-top: 10px;
    margin-top: 20px;
    text-align: center;
    width: 100%;
    color: #bbb;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .footer-horizontal {
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
    }

    .footer-logo-container {
        margin-bottom: 20px;
        max-width: none;
        flex: none;
    }

    .footer-nav {
        justify-content: center;
        margin-bottom: 20px;
        width: 100%;
    }

    .footer-contact {
        text-align: center;
        margin-top: 20px;
    }

    .footer-column {
        min-width: 150px;
    }

    .footer-bottom {
        text-align: center;
        margin-top: 20px;
    }

    .footer-director {
        margin-left: 0;
        text-align: center;
    }

    .director-photo {
        margin-top: 10px;
    }
}


/* Contenedor para el título */
.section-title-container {
    text-align: center;
    margin-bottom: 20px;
}

/* Título Principal */
.section-title {
    font-size: 2rem;
    font-weight: bold;
    color: #002855; /* Color de texto para el título */
}
/* Sección de los iconos */
.icon-section {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px 10px;
    border-radius: 10px;
}


/* Estilo para cada caja */
.icon-box {
    background: #333333; /* Fondo oscuro para cada caja */
    border-radius: 10px;
    padding: 20px 15px;
    text-align: center;
    width: 160px;
    height: 150px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
      border-left: 10px solid #ffffff; /* Franja blanca a la derecha */
}

/* Estilo para los iconos */
.icon-box i {
    font-size: 40px;
    color: #ffffff; /* Iconos en blanco */
    margin-bottom: 10px;
    transition: transform 0.3s ease;
}
/* Animación mejorada para los iconos */
.icon-box:hover .icon-container i {
    transform: scale(1.2) rotateZ(15deg) rotateX(10deg) translateY(-5px); /* Añadido: rotación en 3D y movimiento hacia arriba */
    color: #002855; /* Cambia el color del icono (puedes usar cualquier color que prefieras) */
    transition: transform 0.3s ease-in-out, color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Transición suave */
}


/* Estilo para los títulos */
.icon-box h3 {
    font-size: 18px;
    font-weight: bold;
    color: #ffffff; /* Títulos en blanco */
    margin-bottom: 8px;
}

/* Estilo para las descripciones */
.icon-box p {
    font-size: 14px;
    color: #ffffff; /* Texto en blanco */
    line-height: 1.4;
    margin-bottom: 5px;
}

/* Efecto hover */
.icon-box:hover {
    transform: translateY(-10px);
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.2);
    background: #444444; /* Fondo más claro al pasar el ratón */
}

.icon-box:hover i {
    color: #f0f0f0; /* Cambio de color del icono */
}

.icon-box:hover h3 {
    color: #f0f0f0; /* Cambio de color del título */
}

.icon-box:hover p {
    color: #f0f0f0; /* Cambio de color del texto */
}

/* Colores de fondo para cada icono */
.icon-box.configuracion {
    background: #FF5733; /* Fondo fuerte: Naranja intenso */
}

.icon-box.usuarios {
    background: #33A1FF; /* Fondo fuerte: Azul intenso */
}

.icon-box.estadisticas {
    background: #FFCC00; /* Fondo fuerte: Amarillo */
}

.icon-box.servicios {
    background: #28A745; /* Fondo fuerte: Verde */
}

.icon-box.seguridad {
    background: #DC3545; /* Fondo fuerte: Rojo */
}

.icon-box.notificaciones {
    background: #6F42C1; /* Fondo fuerte: Púrpura */
}

/* Responsividad */
@media (max-width: 768px) {
    .icon-box {
        width: 140px;
        height: 97px;
    }
    .icon-box i {
        font-size: 36px;
    }
    .icon-box h3 {
        font-size: 16px;
    }
    .icon-box p {
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .icon-box {
        width: 120px;
        height: 97px;
    }
    .icon-box i {
        font-size: 30px;
    }
    .icon-box h3 {
        font-size: 14px;
    }
    .icon-box p {
        font-size: 12px;
    }
}

/* Contenedor principal */
.slider {
    width: 90%;
    max-width: 1200px;
    height: auto;
    margin: 50px auto;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px;
}

/* Estilo del título */
.slider-title {
    font-size: 2.2em;
    color: #002855;
    font-family: 'Helvetica Neue', sans-serif;
    text-align: center;
    font-weight: 600;
    margin-bottom: 25px;
    letter-spacing: 1px;
    border-right: 5px solid #002855;
    border-left: 5px solid #002855;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3), -2px -2px 4px rgba(255, 255, 255, 0.1);
    background: WHITE;
    padding: 10px 20px;
    border-radius: 5px;
    box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.2);
}

/* Estilo de la pista del slider */
.slide-track {
    display: flex;
    gap: 20px; /* Espacio entre elementos */
    animation: scroll 6s cubic-bezier(0.25, 0.8, 0.25, 1) infinite; /* Animación rápida con aceleración */
    white-space: nowrap;
}

/* Elementos del carrusel */
.slider .slide {
    flex: 0 0 auto;
    width: 160px;
    height: 116px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 6px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
}

/* Efecto hover para los elementos del slider */
.slider .slide:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

/* Imágenes dentro de cada slide */
.slider .slide img {
    width: 100px;
    height: 60px;
    object-fit: contain;
}

/* Estilo del título debajo de cada imagen */
.slide-title {
    font-size: 1rem;
    color: #333;
    margin-top: 8px;
    font-weight: bold;
    text-transform: uppercase;
}
/* Animación del carrusel */
@keyframes scroll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(calc(-150px * 7)); /* Mitad del carrusel */
    }
}

/* Pausar animación al pasar el mouse */
.slider:hover .slide-track {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
}

/* Responsividad */
@media (max-width: 768px) {
    .slider .slide {
        width: 150px;
        height: 100px;
    }

    .slider .slide img {
        width: 80px;
    }

    /* Redefinimos la animación para las pantallas pequeñas */
    @keyframes scroll {
        0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
        }
        100% {
            -webkit-transform: translateX(calc(-150px * 7));
            transform: translateX(calc(-150px * 7));
        }
    }
}

/* Estructura del carrusel */
.slider {
    overflow: hidden;
    position: relative;
}

.slide-track {
    display: flex;
    animation: scroll 20s linear infinite; /* Bucle infinito */
}

.slide {
    flex: 0 0 auto;
    width: 150px;
    height: 100px;
    margin-right: 20px;
}

.slide img {
    width: 100%;
    height: auto;
}

/* Duplicamos el contenido para que el bucle se vea sin interrupciones */
.slider .slide-track {
    display: flex;
}

.slider .slide-track .slide {
    flex: 0 0 auto;
}

.slider .slide-track .slide:nth-child(7n+1) {
    margin-left: 0; /* No dejar espacio al final del carrusel */
}


/* Aplicar animación al contenedor */
.slider .slide-track {
    display: flex;
    animation: scroll 10s linear infinite; /* Ajusta la duración según sea necesario */
}


.bienvenida {
    background-image: url('../imagenes_optimizadas/SLIDER43202413379.PNG'),
                      url('../imagenes_optimizadas/SLIDER73202410152.PNG'),
                      url('../imagenes_optimizadas/SLIDER35202417415.PNG'),
                      url('../imagenes_optimizadas/SLIDER288202414871.PNG');
    background-size: cover; /* Asegura que las imágenes cubran todo el contenedor sin distorsionarse */
    background-position: center center; /* Centra las imágenes dentro del contenedor */
    background-repeat: no-repeat;
    color: white;
    padding: 50px 20px;
    text-align: center;
    height: 50vh; /* Esto es relativo al tamaño de la ventana (50% de la altura de la ventana) */
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: fondoAnimado 16s infinite;
    overflow: hidden;
      border-bottom: 10px solid #002855; /* Franja blanca a la derecha */
}

/* Estilos para la animación de las imágenes */
@keyframes fondoAnimado {
    0% {
        background-image: url('../imagenes_optimizadas/SLIDER43202413379.PNG');
    }
    25% {
        background-image: url('../imagenes_optimizadas/SLIDER73202410152.PNG');
    }
    50% {
        background-image: url('../imagenes_optimizadas/SLIDER35202417415.PNG');
    }
    75% {
        background-image: url('../imagenes_optimizadas/SLIDER288202414871.PNG');
    }
    100% {
        background-image: url('../imagenes_optimizadas/SLIDER35202417109.PNG');
    }
}

/* Asegurar que en pantallas pequeñas (móviles) la imagen de fondo también sea responsiva */
@media (max-width: 768px) {
    .bienvenida {
       
        height: 10vh; /* Ajusta la altura al 100% de la pantalla en móviles */
        
    }
}

/* Cambiar el grosor de la barra de desplazamiento */
::-webkit-scrollbar {
    width: 12px;  /* Ancho de la barra de desplazamiento */
}

/* Cambiar el fondo de la barra de desplazamiento */
::-webkit-scrollbar-track {
    background: #f1f1f1; /* Color claro para el fondo de la barra */
}

/* Cambiar el color del pulgar (la parte que se mueve) a azul oscuro */
::-webkit-scrollbar-thumb {
    background: #002855; /* Azul oscuro para el pulgar */
    border-radius: 10px;  /* Redondear las esquinas del pulgar */
}

/* Cambiar el color cuando el pulgar es hover (cuando el usuario lo pasa por encima) */
::-webkit-scrollbar-thumb:hover {
    background: #006400;  /* Verde oscuro cuando el pulgar está en hover */
}





.navidad {
    position: relative;
}

.floating-image {
    position: fixed;
    left: 0;
    bottom: 0; /* Pegado al fondo */
    width: 150px; /* Ajusta el tamaño de la imagen */
    z-index: 10;
}



    /* Estilo para la sección de noticias */.
.noticias-section {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px; /* Máximo ancho */
}

.noticias-section h3 {
    font-size: 24px;
    color: #002855; /* Color azul principal */
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 4px solid #f9d205; /* Línea amarilla */
    padding-bottom: 8px;
}

.categorias {
    margin-bottom: 20px;
    display: flex;
    justify-content: center;
    gap: 15px;  /* Espacio entre botones */
}

.categoria-btn {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;  /* Hacemos los botones circulares */
    transition: transform 0.3s ease, color 0.3s ease;  /* Agregar transición para el color */
    text-align: center;  /* Alinea el texto y la imagen al centro */
    color: #002855;  /* Color de texto inicial */
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos de la imagen dentro del contenedor */
.categoria-btn img {
    width: 60px; /* Tamaño de la imagen */
    height: 60px;
    object-fit: cover;
    border-radius: 50%;  /* Hacemos las imágenes circulares */
    transition: transform 0.3s ease; /* Transición suave para el volteo */
}

/* Efecto de voltear la imagen cuando el ratón pasa por el contenedor del botón */
.categoria-btn:hover img {
    transform: scaleX(-1); /* Voltea la imagen horizontalmente */
}


.categoria-btn:hover,
.categoria-btn:active { /* Cambio de color al pasar el ratón o al presionar el botón */
    transform: scale(1.1);  /* Efecto de aumento al pasar el ratón o presionar */
    color: yellow;  /* Cambia el color del texto a amarillo */
}

.categoria-btn:active img {
    transform: scale(1.1);  /* Aumentamos la imagen también cuando se presiona */
}

.categoria-titulo {
    margin-top: 8px;  /* Espacio entre la imagen y el texto */
    font-size: 12px;  /* Tamaño pequeño del texto */
    color: #002855;  /* Color de texto inicial */
    text-transform: capitalize;  /* Pone la primera letra en mayúscula */
    font-weight: bold;  /* Establece el texto como negrita */
    transition: color 0.3s ease;  /* Agrega transición para el color */
}

.categoria-btn:hover .categoria-titulo,
.categoria-btn:active .categoria-titulo {
    color: #ffcc00;  /* Cambia el color del título a amarillo al pasar el ratón o presionar el botón */
}




.categoria-btn:hover span {
    color: #0056b3;
}

/* Cuando el botón está activo */
.categoria-btn.activo span {
    color: #ffcc00; /* Color amarillo */
}

.categoria-btn:focus span {
    outline: none; /* Elimina el borde azul cuando el botón está enfocado */
}

/* Contenedor de las noticias en formato grid */
.noticias-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajuste automático según el ancho */
    gap: 20px; /* Espacio entre las tarjetas */
}

/* Tarjetas individuales */
.noticia {
    background-color: #ffffff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.noticia:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.noticia img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

/* Asegurar que la imagen no se distorsione y se adapte correctamente */
.noticia-contenido {
    padding: 15px;
}

.noticia {
    position: relative; /* Necesario para que el botón se posicione relativo a este contenedor */
    padding-bottom: 40px; /* Añadir espacio en la parte inferior para que el botón no quede sobre el contenido */
}

.noticia h4 {
    font-size: 18px;
    font-weight: bold;
    color: #002855; /* Título en azul */
    margin-bottom: 10px;
}

.noticia p {
    font-size: 14px;
    color: #555555;
    line-height: 1.4;
    margin-bottom: 10px;
}

.noticia .noticia-meta {
    font-size: 12px;
    color: #888888;
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
}

/* Botón para leer más */
.noticia .ver-btn {
    position: absolute; /* Fija el botón en una posición específica */
    bottom: 10px; /* Coloca el botón 10px por encima del borde inferior */
    right: 10px; /* Coloca el botón 10px hacia la derecha */
    padding: 8px 12px;
    font-size: 12px;
    color: #ffffff;
    background-color: #002855; /* Azul principal */
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
}

.noticia .ver-btn:hover {
    background-color: #0056b3;
}


/* Responsivo: Ajustar en pantallas medianas */
@media (max-width: 1024px) {
    .noticias-grid {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Columnas ajustadas a 300px */
    }

    .noticia img {
        height: 200px; /* Ajustar altura de la imagen */
    }

    .noticia h4 {
        font-size: 16px; /* Reducir el tamaño del título */
    }

    .noticia p {
        font-size: 13px; /* Reducir el tamaño del texto */
    }
}

/* Responsivo: Mejoras en pantallas pequeñas */
@media (max-width: 768px) {
    .noticias-section h3 {
        font-size: 22px; /* Ajuste del tamaño del título */
        margin-bottom: 15px;
    }

    .noticias-grid {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Asegurar que las columnas sean responsivas */
    }

    .noticia img {
        height: 160px; /* Ajuste de la imagen para pantallas pequeñas */
    }

    .categoria-btn {
        padding: 6px 10px; /* Ajustar el tamaño de los botones */
        font-size: 14px; /* Reducir tamaño de texto de botones */
    }

    .noticia .ver-btn {
        font-size: 14px; /* Aumentar el tamaño del botón */
        padding: 10px 14px;
    }
}

/* Estilos del Footer */
.footer {
    background-color: #12163d;
    color: #fff;
    padding: 50px 20px;
    font-family: Arial, sans-serif;
}

.footer-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.footer-about h2 {
    font-size: 24px;
    color: #4c6ef5;
    margin-bottom: 15px;
}

.footer-about p {
    font-size: 14px;
    line-height: 1.8;
}

.footer-socials a {
    margin-right: 10px;
    color: #fff;
    font-size: 18px;
    text-decoration: none;
}

.footer-links h3,
.footer-posts h3,
.footer-contact h3 {
    font-size: 18px;
    margin-bottom: 20px;
}

.footer-links ul {
    list-style: none;
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 10px;
}

.footer-links ul li a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer-posts .post {
    margin-bottom: 20px;
}

.footer-posts .post span {
    font-size: 12px;
    color: #aaa;
}

.footer-posts .post a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

.footer-contact p {
    margin: 10px 0;
    font-size: 14px;
}

.footer-contact form {
    display: flex;
    flex-direction: column;
}

.footer-contact input[type="email"] {
    padding: 10px;
    border: none;
    border-radius: 5px;
    margin-bottom: 10px;
}

.footer-contact button {
    background-color: #4c6ef5;
    color: #fff;
    border: none;
    padding: 10px;
    border-radius: 5px;
    cursor: pointer;
}

.footer-contact button i {
    font-size: 16px;
}

.footer-contact div {
    font-size: 12px;
}

.footer-contact div a {
    color: #4c6ef5;
    text-decoration: none;
}

.footer-bottom {
    margin-top: 30px;
    text-align: center;
    font-size: 12px;
    border-top: 1px solid #333;
    padding-top: 10px;
}

.footer-bottom a {
    color: #4c6ef5;
    text-decoration: none;
}


/* Ocultar las noticias que no pertenecen a la categoría seleccionada */
.noticia.oculta {
    display: none;
}
/* Estilo para la sección de fotos */
/* Estilo para la sección de fotos */
.fotos-section , .noticias-section {
    width: 100%;
    margin: 0 auto;
    padding: 20px;
    max-width: 1200px;
}

.fotos-section h3 {
    font-size: 24px;
    color: #002855;
    font-weight: bold;
    margin-bottom: 20px;
    border-bottom: 4px solid #f9d205;
    padding-bottom: 8px;
}

/* Contenedor de las fotos en formato grid */
.fotos-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

/* Estilo para las fotos */
.foto img {
    width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.foto img:hover {
    transform: scale(1.05);
}

/* Estilo para el iframe de Facebook */
.foto-facebook iframe {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Responsivo: Ajustar en pantallas medianas */
@media (max-width: 1024px) {
    .fotos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Responsivo: Ajustar en pantallas pequeñas */
@media (max-width: 768px) {
    .fotos-grid {
        grid-template-columns: 1fr;
    }

    .fotos-section h3 {
        font-size: 22px;
    }
    .fotos-section, .noticias-section {
        width: 90%;
    }
}