/* //clemencia/style.css*/
/*
Theme Name: Tema Institucional
Theme URI: https://example.com
Author: Ronald Aranda
Description: Tema basado en los colores verde, blanco y gris.
Version: 1.1
*/

/* ============================
   General Styles
============================ */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;700;800&display=swap');


* {
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el tamaño total del elemento */
}
body, h1, h2, h3, h4, h5, h6, p, a, li {
    font-family: 'Montserrat', sans-serif;
}

body {
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6;
    background-color: #F9F9F9;
}

a {
    text-decoration: none;
    color: inherit;
}

a:hover {
    text-decoration: underline;
}

/* Elimina viñetas y márgenes de todas las listas globalmente */
ul, ol {
    list-style: none;
    padding: 0;
    margin: 0;
}
h1, h2 {
    font-weight: 800; /* Extra Bold */
}

h3, h4 {
    font-weight: 700; /* Bold Italic (si es cursiva, añade font-style: italic) */
}

p, a, li {
    font-weight: 500; /* Medium */
}


/* ============================
   Top Bar
============================ */
.top-bar {
    background-color: #3366cc;
    color: white;
    padding: 10px;
    text-align: center;
    font-size: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: fixed;         /* Fijar el top-bar en la parte superior */
    top: 0;                  /* Asegura que esté en la parte superior */
    width: 100%;             /* Asegura que ocupe todo el ancho */
    z-index: 9999;           /* Establece un z-index alto para garantizar que quede encima de otros elementos */
}

.top-bar a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

.top-bar a:hover {
    text-decoration: underline;
}

.top-bar img {
    max-width: 100px;  /* Controla el tamaño del logo */
    height: auto;
    margin-right: 10px;
}


/* Media Queries para Responsividad */

/* Para pantallas más pequeñas, como teléfonos móviles (max-width: 480px) */
@media screen and (max-width: 480px) {
    .top-bar {
        padding: 8px;
        font-size: 12px; /* Reducir el tamaño de la fuente */
        flex-direction: column; /* Organizar los elementos de manera vertical */
        text-align: center; /* Alineación centrada en móviles */
    }

    .top-bar img {
        max-width: 80px; /* Reducir el tamaño del logo en dispositivos móviles */
        margin-right: 0; /* Eliminar margen derecho del logo */
        margin-bottom: 5px; /* Añadir un poco de espacio debajo del logo */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .top-bar {
        padding: 8px;
        font-size: 13px; /* Ajustar el tamaño de la fuente para tabletas */
        flex-direction: column; /* Organizar los elementos de manera vertical */
        text-align: center; /* Alineación centrada */
    }

    .top-bar img {
        max-width: 90px; /* Ajustar el tamaño del logo para tabletas */
        margin-right: 0;
        margin-bottom: 5px; /* Añadir un poco de espacio debajo del logo */
    }
}

/* Para pantallas grandes de escritorio (más de 1024px) */
@media screen and (min-width: 1024px) {
    .top-bar {
        padding: 10px;
        font-size: 14px; /* Tamaño de fuente predeterminado para escritorio */
        flex-direction: row; /* Mantener los elementos en fila */
    }

    .top-bar img {
        max-width: 100px; /* Tamaño original del logo */
        margin-right: 10px; /* Espacio entre el logo y los enlaces */
    }
}


/* ============================
   Header Styles
============================ */
header {
    background-color: white;  
    color: white;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center; /* Alinea verticalmente el contenido */
    min-height: 120px;
    left: 0; 
}

header .logo {
    display: inline-block;
    font-size: 24px;
    font-weight: bold;
    color: white;
    text-decoration: none;  
}

header .logo img {
    max-width: 250px; /* Cambia el valor según el tamaño deseado */
    height: auto;     /* Mantiene la proporción de la imagen */
    max-height: 80px;
    position: relative;
    top: 35px;
}

header nav {
    display: flex;
    justify-content: flex-end;  /* Asegura que el menú se alinee a la derecha */
    align-items: center;
    flex-wrap: wrap;
    margin-left: 0;  /* Elimina cualquier margen izquierdo */
    margin-right: 0; /* Elimina cualquier margen derecho */
    width: 100%;  /* Asegura que ocupe todo el ancho disponible */
    padding-top: 90px; 
}

header nav a {
    color: #3B945E;
    text-decoration: none;
    margin: 0 10px;
    transition: color 0.3s ease;
    font-size: 14px;
    font-family: 'Roboto', sans-serif;    
    font-weight: bold;
}

header nav a:hover {
    color: #C1E1C1;
}

header nav li {
    margin: 0 10px;
}

/* ============================
   Dropdown Menus
============================ */
/* Menú Transparencia */
.menu-transparencia ul {
    display: none;
    list-style: none;
    position: absolute;
    background-color: #3B945E;
    padding: 10px;
    border-radius: 5px;
}

.menu-transparencia:hover ul {
    display: block;
}
.menu-transparencia ul li a {
    color: white; /* Color blanco para los submenús */
    font-weight: normal; /* Submenú en estilo normal */
}

.menu-transparencia ul li a:hover {
    color: #C1E1C1; /* Color claro cuando el enlace del submenú es hover */
}

.menu-transparencia a {
    color: #3B945E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.menu-transparencia a:hover {
    color: #C1E1C1;
}

/* Menú Atención y Servicios a la Ciudadanía */
.menu-atencion ul {
    display: none;
    list-style: none;
    position: absolute;
    background-color: #3B945E;
    padding: 10px;
    border-radius: 5px;
}

.menu-atencion:hover ul {
    display: block;
}
.menu-atencion ul li a {
    color: white; /* Color blanco para los submenús */
    font-weight: normal; /* Submenú en estilo normal */
}

.menu-atencion ul li a:hover {
    color: #C1E1C1; /* Color claro cuando el enlace del submenú es hover */
}

.menu-atencion a {
    color: #3B945E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.menu-atencion a:hover {
    color: #C1E1C1;
}

/* Menú Notificaciones */
.menu-notificaciones ul {
    display: none;
    list-style: none;
    position: absolute;
    background-color: #3B945E;
    padding: 10px;
    border-radius: 5px;
}

.menu-notificaciones:hover ul {
    display: block;
}
.menu-notificaciones ul li a {
    color: white; /* Color blanco para los submenús */
    font-weight: normal; /* Submenú en estilo normal */
}

.menu-notificaciones ul li a:hover {
    color: #C1E1C1; /* Color claro cuando el enlace del submenú es hover */
}

.menu-notificaciones a {
    color: #3B945E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.menu-notificaciones a:hover {
    color: #C1E1C1;
}


/* Menú Audiencias */
.menu-audiencias ul {
    display: none;
    list-style: none;
    position: absolute;
    background-color: #3B945E;
    padding: 10px;
    border-radius: 5px;
    padding-left: 0;
}

.menu-audiencias:hover ul {
    display: block;
}
.menu-audiencias ul li a {
    color: white; /* Color blanco para los submenús */
    font-weight: normal; /* Submenú en estilo normal */
}

.menu-audiencias ul li a:hover {
    color: #C1E1C1; /* Color claro cuando el enlace del submenú es hover */
}

.menu-audiencias a {
    color: #3B945E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.menu-audiencias a:hover {
    color: #C1E1C1;
}

/* Menú Participa */
.menu-participa ul {
    display: none;
    list-style: none;
    position: absolute;
    background-color: #3B945E;
    padding: 10px;
    border-radius: 5px;
}

.menu-participa:hover ul {
    display: block;
}
.menu-participa ul li a {
    color: white; /* Color blanco para los submenús */
    font-weight: normal; /* Submenú en estilo normal */
}

.menu-participa ul li a:hover {
    color: #C1E1C1; /* Color claro cuando el enlace del submenú es hover */
}

.menu-participa a {
    color: #3B945E;
    text-decoration: none;
    font-size: 14px;
    font-weight: bold;
}

.menu-participa a:hover {
    color: #C1E1C1;
}

/* Media Queries para Responsividad */

/* Para pantallas más pequeñas, como teléfonos móviles (max-width: 480px) */
@media screen and (max-width: 480px) {
    header {
        padding: 10px 15px; /* Reducir el padding */
        min-height: 100px;  /* Reducir la altura mínima */
    }

    header .logo {
        font-size: 20px; /* Reducir el tamaño del texto */
    }

    header .logo img {
        max-width: 180px; /* Reducir el tamaño del logo */
        max-height: 60px; /* Reducir la altura máxima */
        top: 25px; /* Ajustar la posición del logo */
    }

    header nav {
        padding-top: 60px; /* Reducir el espacio superior */
        justify-content: center;  /* Centrar los elementos de navegación */
    }

    header nav a {
        font-size: 12px; /* Reducir el tamaño de la fuente en móvil */
        margin: 0 8px;  /* Reducir el margen entre los enlaces */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    header {
        padding: 10px 20px;
        min-height: 110px; /* Ajustar la altura para tabletas */
    }

    header .logo {
        font-size: 22px; /* Ajustar el tamaño del texto para tabletas */
    }

    header .logo img {
        max-width: 220px; /* Ajustar el tamaño del logo */
        max-height: 70px; /* Ajustar la altura del logo */
        top: 30px; /* Ajustar la posición del logo */
    }

    header nav {
        padding-top: 80px; /* Ajustar el espacio superior */
        justify-content: center;  /* Centrar los elementos de navegación */
    }

    header nav a {
        font-size: 13px; /* Ajustar el tamaño de la fuente */
        margin: 0 10px;  /* Ajustar el margen entre los enlaces */
    }
}

/* Para pantallas grandes de escritorio (más de 1024px) */
@media screen and (min-width: 1024px) {
    header {
        padding: 10px 20px;
        min-height: 120px; /* Altura predeterminada para escritorio */
    }

    header .logo {
        font-size: 24px; /* Tamaño predeterminado para escritorio */
    }

    header .logo img {
        max-width: 250px; /* Tamaño predeterminado para el logo */
        max-height: 80px; /* Altura predeterminada */
        top: 35px; /* Posición original del logo */
    }

    header nav {
        padding-top: 90px; /* Espacio superior predeterminado */
        justify-content: flex-end; /* Alinear a la derecha en escritorio */
    }

    header nav a {
        font-size: 14px; /* Tamaño predeterminado para los enlaces */
        margin: 0 10px;  /* Espaciado entre los enlaces */
    }
}



/* ============================
   Slider Section
============================ */
.slider {
    position: relative;
    width: 100%;
    height: 100vh; /* El slider ocupa toda la altura de la ventana */
    overflow: hidden;
    background-color: #000; /* Fondo negro para el slider */
    transform: translateY(-100px); /* Mueve el slider hacia arriba 50px */
}
 
  /* Estilos generales para las diapositivas */
  .slide {
    display: none; /* Oculta todas las diapositivas por defecto */
    width: 100%;
    height: 100%; /* Las diapositivas ocupan toda la altura */
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    font-size: 2rem;
    text-align: center;
    background-color: #333; /* Fondo gris para las diapositivas */
    transition: opacity 0.5s ease-in-out;
    position: absolute; /* Para apilar todas las diapositivas */
    opacity: 0; /* Inicia con opacidad 0 */
  }
  
  /* Solo la diapositiva activa es visible */
  .slide.active {
    display: flex; /* Muestra solo la diapositiva activa */
    opacity: 1; /* Establece opacidad completa cuando está activa */
  }
  
  /* Estilo del texto dentro de las diapositivas */
  h2 {
    font-size: 2.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin: 0;
  }
  
  /* Contenedor de los puntos de navegación (dots) */
  .slider-nav {
    position: absolute;
    bottom: 20px; /* Espacio desde el borde inferior */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10; /* Asegura que los puntos estén encima de las diapositivas */
  }
  
  /* Puntos de navegación */
  .slider-dot {
    width: 15px;
    height: 15px;
    margin: 0 10px;
    background-color: rgba(255, 255, 255, 0.6); /* Puntos de color blanco con opacidad */
    border-radius: 50%; /* Forma redonda */
    cursor: pointer;
    transition: background-color 0.3s ease; /* Efecto de cambio de color al pasar el mouse */
  }
  
  /* Puntos activos */
  .slider-dot.active {
    background-color: white; /* Puntos activos en color blanco */
  }
  
  /* Efecto hover para los puntos de navegación */
  .slider-dot:hover {
    background-color: rgba(255, 255, 255, 1); /* Cambia al color blanco completo */
  }


/* Media Queries para Responsividad */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .slider {
        height: 70vh; /* Ajustar la altura del slider en móviles */
        transform: translateY(0); /* Ajustar la posición del slider */
    }

    .slide h2 {
        font-size: 1.5rem; /* Reducir el tamaño de la fuente en los dispositivos móviles */
        letter-spacing: 1px; /* Ajustar el espaciado de las letras */
    }

    .slider-nav {
        bottom: 15px; /* Mover los puntos de navegación más cerca del borde inferior */
    }

    .slider-dot {
        width: 10px;
        height: 10px; /* Reducir el tamaño de los puntos en dispositivos pequeños */
        margin: 0 5px; /* Reducir el margen entre los puntos */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .slider {
        height: 80vh; /* Ajustar la altura del slider en tabletas */
    }

    .slide h2 {
        font-size: 2rem; /* Ajustar el tamaño de la fuente en tabletas */
        letter-spacing: 1.5px; /* Reducir el espaciado de las letras */
    }

    .slider-nav {
        bottom: 20px; /* Ajustar la posición de los puntos de navegación */
    }

    .slider-dot {
        width: 12px;
        height: 12px; /* Ajustar el tamaño de los puntos */
        margin: 0 8px; /* Ajustar el margen entre los puntos */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .slider {
        height: 100vh; /* El slider ocupa toda la altura de la ventana en escritorio */
    }

    .slide h2 {
        font-size: 2.5rem; /* Tamaño de fuente predeterminado en escritorio */
        letter-spacing: 2px; /* Espaciado de letras predeterminado */
    }

    .slider-nav {
        bottom: 20px; /* Mantener los puntos de navegación en la misma posición */
    }

    .slider-dot {
        width: 15px;
        height: 15px; /* Tamaño de los puntos en escritorio */
        margin: 0 10px; /* Márgenes predeterminados */
    }
}
    



/* ============================
   Contenedor de las tarjetas 
============================ */
  .card-container {
    display: grid;
    grid-template-columns: repeat(4, minmax(200px, 1fr)); /* 4 columnas de igual tamaño */
    grid-template-rows: auto; /* Filas automáticas */
    gap: 0px;  /* Espacio reducido entre las tarjetas */
    justify-items: start; /* Centra las tarjetas horizontalmente */
    align-items: center; /* Alinea las tarjetas verticalmente */
    padding: 0; /* Elimina padding del contenedor */
    margin: 0; /* Elimina márgenes del contenedor */
    width: 100%; /* Ocupa todo el espacio disponible */
    max-width: 1200px; /* Limita el tamaño máximo del contenedor */
    margin: auto; /* Centra el contenedor */
  } 
  /* Estilos de cada tarjeta */
 .card {
    position: relative;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    width: 100%; /* Ocupa todo el espacio disponible en la columna */
    max-width: 250px; /* Limita el tamaño máximo */
    height: 300px; /* Altura más grande */
    overflow: visible; /* Permite que los elementos fuera de la tarjeta sean visibles */
    margin: 0; /* Elimina márgenes de las tarjetas */
    padding: 0; /* Elimina padding de las tarjetas */
  }
 
  .icon-outside .circle {
    
        width: 120px; /* Tamaño del círculo */
        height: 120px; /* Mismo valor para mantener la forma circular */
        border: 4px solid #3B945E; /* Borde visible */
        border-radius: 50%; /* Forma circular */
        overflow: hidden; /* Para que la imagen no se salga del círculo */
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff; /* Fondo blanco del círculo */
        position: absolute; /* Posiciona el círculo respecto al contenedor .card */
        top: 20%; /* Ajusta la distancia desde la parte superior */
        left: 50%; /* Centra horizontalmente */
        transform: translateX(-50%); /* Compensa el ancho del círculo para centrarlo */
      

        
    /* Posicionamiento ajustado */
    position: absolute; /* Posiciona el círculo respecto al contenedor .card */
    top: -20%; /* Ajusta la distancia desde la parte superior */
    left: 50%; /* Centra horizontalmente */
    transform: translateX(-50%); /* Compensa el ancho del círculo para centrarlo */

}

.icon-outside .circle img {
    width: 100%; /* La imagen ocupa el ancho del círculo */
    height: 100%; /* La imagen ocupa el alto del círculo */
    object-fit: cover; /* Ajusta la imagen para que encaje en el círculo */
    display: block; /* Elimina márgenes o espacios no deseados */
    visibility: visible; /* Asegura que sea visible */
    position: relative; /* Posición relativa para encajar en el círculo */
    object-fit: none; /* Solo para pruebas */
}

  
  /* Título de la tarjeta */
 .card h3 {
    margin: 70px 0;
    font-size: 1.2rem;
    color: #333; /* Color del texto */
  }
  /* Estilo para las descripciones */
  /* Estilo para las descripciones */
.card .description {
    margin-top: -60px; /* Espacio entre el título y la descripción */
    font-size: 1rem; /* Cambiado: Tamaño de la fuente para la descripción */
    color: #666; /* Color gris para la descripción */
    text-align: justify; /* Justifica el texto */
    padding: 0 10px; /* Espaciado en los laterales */
    font-family: 'Montserrat', sans-serif; /* Cambiado: Tipo de letra */
}
  /* Estilo para el botón "Solicitar Ahora" */
.btn-solicitar {
    position: absolute; /* Posiciona el botón de manera precisa */
    bottom: 20px; /* A 20px de la parte inferior (300px de altura total - 280px posición deseada) */
    left: 50%; /* Centra el botón horizontalmente */
    transform: translateX(-50%); /* Ajusta el centrado horizontal */
    background-color: #008000; /* Color verde */
    color: white; /* Texto blanco */
    width: 170px;
    padding: 10px 20px; /* Espaciado alrededor del texto */
    font-size: 1rem; /* Tamaño de la fuente */
    text-decoration: none; /* Elimina subrayado */
    border-radius: 5px; /* Bordes redondeados */
    text-align: center; /* Centra el texto dentro del botón */
    transition: background-color 0.3s ease; /* Animación suave para el color */
  }
  
  .btn-solicitar:hover {
    background-color: #006400; /* Cambia a un verde más oscuro al pasar el cursor */
    text-decoration: none; /* Asegura que no aparezca subrayado al pasar el puntero */
  }
  
  .card:hover {
    transform: scale(1.1); /* Aumenta el tamaño de la tarjeta */
    background-color: #d4edda; /* Cambia el color de fondo */
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2); /* Mejora la sombra */
  }

  /* ============================
   Media Queries para Responsividad
============================ */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .slider {
        height: 70vh; /* Ajustar la altura del slider en móviles */
        transform: translateY(0); /* Ajustar la posición del slider */
    }

    .slide h2 {
        font-size: 1.5rem; /* Reducir el tamaño de la fuente en los dispositivos móviles */
        letter-spacing: 1px; /* Ajustar el espaciado de las letras */
    }

    .slider-nav {
        bottom: 15px; /* Mover los puntos de navegación más cerca del borde inferior */
    }

    .slider-dot {
        width: 10px;
        height: 10px; /* Reducir el tamaño de los puntos en dispositivos pequeños */
        margin: 0 5px; /* Reducir el margen entre los puntos */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .slider {
        height: 80vh; /* Ajustar la altura del slider en tabletas */
    }

    .slide h2 {
        font-size: 2rem; /* Ajustar el tamaño de la fuente en tabletas */
        letter-spacing: 1.5px; /* Reducir el espaciado de las letras */
    }

    .slider-nav {
        bottom: 20px; /* Ajustar la posición de los puntos de navegación */
    }

    .slider-dot {
        width: 12px;
        height: 12px; /* Ajustar el tamaño de los puntos */
        margin: 0 8px; /* Ajustar el margen entre los puntos */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .slider {
        height: 100vh; /* El slider ocupa toda la altura de la ventana en escritorio */
    }

    .slide h2 {
        font-size: 2.5rem; /* Tamaño de fuente predeterminado en escritorio */
        letter-spacing: 2px; /* Espaciado de letras predeterminado */
    }

    .slider-nav {
        bottom: 20px; /* Mantener los puntos de navegación en la misma posición */
    }

    .slider-dot {
        width: 15px;
        height: 15px; /* Tamaño de los puntos en escritorio */
        margin: 0 10px; /* Márgenes predeterminados */
    }
}



/* ============================
   Action Bar
============================ */
.action-bar {
    background-color: #3B945E;
    text-align: center;
    padding: 20px;
    margin-top: 20px; /* Ajusta el valor según lo que necesites */
}
.action-bar h2 {
    font-size: 24px;
    color: #fff;
    text-align: center;
    padding-top: 10px;
}

.action-bar button {
    background-color: white;
    color: #3B945E;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    margin: 0 10px;
    font-size: 16px;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.action-bar button:hover {
    background-color: #2A6B45;
    color: white;
}

/* ============================
   Media Queries para Responsividad
============================ */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .action-bar {
        padding: 15px; /* Reducir el padding en móviles */
        margin-top: 10px; /* Ajustar el margen superior */
    }

    .action-bar h2 {
        font-size: 18px; /* Reducir el tamaño de la fuente en móviles */
    }

    .action-bar button {
        font-size: 14px; /* Reducir el tamaño de la fuente en los botones */
        padding: 8px 16px; /* Reducir el padding en los botones */
        margin: 5px; /* Reducir el margen entre botones */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .action-bar {
        padding: 18px; /* Ajustar el padding en tabletas */
        margin-top: 15px; /* Ajustar el margen superior */
    }

    .action-bar h2 {
        font-size: 20px; /* Ajustar el tamaño de la fuente en tabletas */
    }

    .action-bar button {
        font-size: 15px; /* Ajustar el tamaño de la fuente en los botones */
        padding: 9px 18px; /* Ajustar el padding en los botones */
        margin: 5px 8px; /* Ajustar el margen entre los botones */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .action-bar {
        padding: 20px; /* Mantener el padding en escritorios */
        margin-top: 20px; /* Mantener el margen superior */
    }

    .action-bar h2 {
        font-size: 24px; /* Tamaño de fuente predeterminado en escritorios */
    }

    .action-bar button {
        font-size: 16px; /* Tamaño de fuente predeterminado en los botones */
        padding: 10px 20px; /* Padding predeterminado en los botones */
        margin: 0 10px; /* Márgenes predeterminados entre botones */
    }
}

/* ============================
  Noticias
============================ */
.noticias-container {
    padding: 20px;
    background-color: #f4f4f4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.noticias-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.noticia {
    width: 30%;
    margin: 10px;
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px; /* Mantén una altura fija para la noticia */
    text-align: center;
}

.noticia:hover {
    transform: translateY(-10px);
}

.noticia img {
    width: 100%;
    height: 140px;
    border-radius: 5px;
    object-fit: cover; /* Mantiene la proporción de la imagen sin deformarla */
}

.noticia h4 {
    font-size: 18px;
    margin-top: 15px;
    color: #333;
    text-align: left; /* Justificar el texto a la izquierda */
}

.noticia p {
    font-size: 14px;
    color: #666;
    

}

.btn-leer {
    display: inline-block;
    margin-top: auto;
    padding: 10px 15px;
    background-color: #3B945E;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.btn-leer:hover {
    background-color: #2e7d5c;
}

/* ============================
   Media Queries para Responsividad
============================ */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .noticias-container {
        padding: 10px; /* Reducir el padding en móviles */
    }

    .noticias-row {
        flex-direction: column; /* Mostrar las noticias en columna en móviles */
        margin-bottom: 10px; /* Reducir el margen en móviles */
    }

    .noticia {
        width: 100%; /* Las noticias ocuparán el 100% del ancho en móviles */
        margin: 10px 0; /* Margen ajustado para evitar superposiciones */
        height: auto; /* Ajustar la altura de las noticias */
    }

    .noticia img {
        height: 120px; /* Reducir la altura de las imágenes en móviles */
    }

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

    .noticia p {
        font-size: 12px; /* Reducir el tamaño de la fuente del párrafo */
    }

    .btn-leer {
        font-size: 14px; /* Reducir el tamaño de la fuente del botón */
        padding: 8px 12px; /* Reducir el padding del botón */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .noticias-container {
        padding: 15px; /* Ajustar el padding en tabletas */
    }

    .noticias-row {
        flex-direction: row; /* Mantener las noticias en una fila en tabletas */
        margin-bottom: 15px; /* Ajustar el margen */
    }

    .noticia {
        width: 45%; /* Las noticias ocuparán el 45% del ancho en tabletas */
        height: auto; /* Ajustar la altura de las noticias */
    }

    .noticia img {
        height: 130px; /* Ajustar la altura de las imágenes en tabletas */
    }

    .noticia h4 {
        font-size: 17px; /* Ajustar el tamaño del título en tabletas */
    }

    .noticia p {
        font-size: 13px; /* Ajustar el tamaño del párrafo en tabletas */
    }

    .btn-leer {
        font-size: 15px; /* Ajustar el tamaño de la fuente del botón */
        padding: 9px 14px; /* Ajustar el padding del botón */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .noticias-container {
        padding: 20px; /* Mantener el padding en escritorios */
    }

    .noticias-row {
        flex-direction: row; /* Mantener las noticias en una fila */
        margin-bottom: 20px; /* Margen estándar */
    }

    .noticia {
        width: 30%; /* Mantener el ancho de las noticias en escritorios */
        height: 400px; /* Mantener la altura fija de las noticias */
    }

    .noticia img {
        height: 140px; /* Mantener la altura de las imágenes en escritorios */
    }

    .noticia h4 {
        font-size: 18px; /* Mantener el tamaño del título en escritorios */
    }

    .noticia p {
        font-size: 14px; /* Mantener el tamaño del párrafo en escritorios */
    }

    .btn-leer {
        font-size: 16px; /* Mantener el tamaño de la fuente del botón */
        padding: 10px 15px; /* Padding estándar */
    }
}

/* ============================
   Contact Section
============================= */
.contact-section {
    padding: 40px 0;
    background-color: #f9f9f9;
    font-family: Arial, sans-serif;
}

.contact-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alineación superior */
    gap: 10px;
    flex-wrap: wrap;
}

.contact-form,
.contact-hours {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    flex: 1;
    max-width: 300px; /* Tamaño máximo uniforme */
    width: 60%; /* Proporción del contenedor */
    height: 300px; /* Altura uniforme */
    margin: 0 auto; /* Centrado horizontal */
    border-radius: 10px;
    font-size: 14px;
    display: flex;
    flex-direction: column; /* Organización vertical del contenido */
    justify-content: center; /* Centrado vertical */
    align-items: center; /* Centrado horizontal */
}

.contact-map {
    background-color: transparent; /* Quitar fondo blanco */
    padding: 0; /* Eliminar relleno */
    box-shadow: none; /* Quitar sombra */
    border-radius: 0; /* Quitar bordes redondeados */
    flex: 1;
    max-width: 300px; /* Tamaño máximo uniforme */
    width: 60%; /* Proporción del contenedor */
    height: 300px; /* Altura uniforme */
    margin: 0 auto; /* Centrado horizontal */
    display: flex;
}

.contact-map iframe {
    width: 100%;
    height: 100%;
    border: none; /* Quitar marcos */
    border-radius: 0; /* Eliminar bordes redondeados */
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    margin: 10px 0;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 12px;
}

.contact-form button {
    padding: 12px 20px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    width: 100%;
}

.contact-form button:hover {
    background-color: #45a049;
}

.contact-hours {
    overflow-y: auto; /* Permite desplazamiento si el contenido excede */
}

.contact-hours h3 {
    margin-bottom: 14px;
    font-size: 18px;
    color: #333;
}

/* Estilos específicos para los días */
.contact-hours p {
    font-weight: bold;
    font-size: 14px;
    margin: 5px 0;
    color: #333;
}

.schedule-list {
    list-style-type: disc; /* Agrega viñetas */
    padding-left: 20px; /* Tabulación hacia la derecha */
    font-size: 14px; /* Tamaño de texto consistente */
    color: #555;
}

.schedule-list li {
    margin-bottom: 5px;
    font-size: 12px;
    color: #555;
}

.schedule-list li span {
    font-weight: bold;
}


/* ============================
   Media Queries para Responsividad
============================= */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .contact-section {
        padding: 20px 0; /* Reducir el padding en móviles */
    }

    .contact-container {
        flex-direction: column; /* Mostrar los elementos en columna */
        align-items: center; /* Centrar los elementos en móviles */
    }

    .contact-form,
    .contact-hours,
    .contact-map {
        width: 80%; /* Reducir el ancho de los elementos */
        max-width: none; /* Eliminar el tamaño máximo para mejor ajuste */
        height: auto; /* Dejar que la altura se ajuste según el contenido */
        margin: 10px 0; /* Separar los elementos */
    }

    .contact-form input,
    .contact-form textarea {
        font-size: 14px; /* Aumentar el tamaño de la fuente para mejorar la legibilidad */
    }

    .contact-form button {
        font-size: 14px; /* Aumentar el tamaño de la fuente en el botón */
    }

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

    .contact-hours p {
        font-size: 12px; /* Reducir el tamaño de la fuente de los días */
    }

    .schedule-list {
        font-size: 12px; /* Reducir el tamaño de las viñetas */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .contact-section {
        padding: 30px 0; /* Ajustar padding en tabletas */
    }

    .contact-container {
        flex-direction: column; /* Colocar los elementos en columna */
        align-items: center; /* Centrar los elementos */
    }

    .contact-form,
    .contact-hours,
    .contact-map {
        width: 70%; /* Aumentar el ancho de los elementos */
        height: auto; /* Ajustar la altura de los elementos */
    }

    .contact-form button {
        font-size: 15px; /* Aumentar el tamaño del botón */
    }

    .contact-hours h3 {
        font-size: 17px; /* Ajustar el tamaño del título */
    }

    .contact-hours p {
        font-size: 13px; /* Ajustar el tamaño de la fuente de los días */
    }

    .schedule-list {
        font-size: 13px; /* Aumentar el tamaño de las viñetas */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .contact-section {
        padding: 40px 0; /* Mantener padding en escritorios */
    }

    .contact-container {
        flex-direction: row; /* Mostrar los elementos en fila */
        align-items: flex-start; /* Alineación superior */
    }

    .contact-form,
    .contact-hours,
    .contact-map {
        width: 30%; /* Mantener un ancho adecuado para los elementos */
        height: 300px; /* Mantener una altura uniforme */
    }

    .contact-form button {
        font-size: 16px; /* Mantener tamaño de fuente adecuado */
    }

    .contact-hours h3 {
        font-size: 18px; /* Mantener tamaño de fuente del título */
    }

    .contact-hours p {
        font-size: 14px; /* Mantener tamaño de fuente de los días */
    }

    .schedule-list {
        font-size: 14px; /* Mantener tamaño de las viñetas */
    }
}

/* ============================
   footer 
============================ */
footer {
    background-color: #333333; /* Fondo oscuro */
    color: white; /* Texto blanco */
    padding: 30px 20px; /* Espaciado interno */
    text-align: left; /* Alineación por defecto del texto */
    font-size: 14px; /* Tamaño de fuente */
    margin-top: 20px; /* Separación con el contenido superior */
    line-height: 1; /* Espaciado reducido entre líneas */
}

/* Contenedor principal con flexbox */
.container {
    display: flex;
    flex-wrap: wrap; /* Permite que los elementos se acomoden en varias líneas si es necesario */
    justify-content: space-between; /* Distribuye los elementos a lo largo del contenedor */
    gap: 20px; /* Espaciado entre los elementos */
}

/* Información de contacto alineada a la izquierda */
.footer-info {
    flex: 0 1 40%; /* Al menos 30% del ancho, puede crecer si hay espacio */
    text-align: left;
}

/* Redes sociales centradas */
.social-links {
    flex: 0 1 20%; /* Alineación central, ocupa el 40% del ancho */
    text-align: center;
    padding: 10px; /* Un poco de relleno para separar el texto del borde */
    margin: 0 auto; /* Centrado horizontal si es necesario */
}

/* Enlaces adicionales debajo de las redes sociales */
.footer-links {
    flex: 1 1 100%; /* Ocupa todo el ancho disponible */
    text-align: center;
    margin-top: 10px;
}

/* Logos alineados a la derecha */
.footer-logos {
    flex: 0 1 30%; /* Al menos 30% del ancho, puede crecer si hay espacio */
    text-align: right;
    padding: 10px; /* Un poco de relleno para separar las imágenes del borde */
    margin: 0 auto; /* Centrado horizontal si es necesario */
}

/* Estilo de los logos */
.footer-logos img {
    width: 80px; /* Tamaño uniforme de los logos */
    height: auto;
    margin: 5px;
}

/* Estilos para el grid de los logos en el footer */
.footer-logos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columnas */
    gap: 15px;
    justify-items: center;
    margin-top: 15px;
}

/* Estilos para los enlaces */
footer a {
    color: #C1E1C1; /* Color de los enlaces */
    text-decoration: none; /* Sin subrayado */
}

footer a:hover {
    text-decoration: underline; /* Subrayado al pasar el cursor */
}



/* ============================
   footer bar 
============================ */
.footer-bar {
    background-color: #3366cc; /* Fondo oscuro para la barra */
    padding: 10px 20px; /* Espaciado interno */
    text-align: left; /* Alineación del contenido */
    margin-top: 20px; /* Separación con el footer */
    display: flex; /* Flexbox para organizar los elementos */
    justify-content: flex-start; /* Alinear contenido a la izquierda */
    align-items: center; /* Centrar contenido verticalmente */
    gap: 10px; /* Espaciado entre elementos */
}

/* Barra blanca entre imágenes */
.separator {
    width: 3px; /* Ancho de la barra */
    height: 30px; /* Altura similar a las imágenes */
    background-color: white; /* Color de la barra */
    margin: 0 10px; /* Espaciado horizontal */
    transform: translateY(-5px); /* Mueve el separador hacia arriba */
}

/* Estilos para las imágenes en la barra con clases específicas */

/* Logo de CO Colombia */
.footer-bar .co-colombia-logo {
    width: 48px; /* Tamaño específico para el logo de CO Colombia */
    height: auto; /* Mantener la proporción */
}

/* Logo del Portal Único del Estado Colombiano */
.footer-bar .portal-logo {
    width: 120px; /* Tamaño específico para el logo del Portal Único */
    height: auto; /* Mantener la proporción */
}

/* Enlaces en la barra */
.footer-bar a {
    display: inline-block; /* Hace clic en el área de la imagen */
    padding: 0; /* Sin relleno adicional */
}


/* ============================
   Media Queries para Responsividad
============================= */

/* Para pantallas más pequeñas (móviles: max-width: 480px) */
@media screen and (max-width: 480px) {
    .footer-bar {
        padding: 8px 10px; /* Reducir el padding */
        flex-direction: column; /* Colocar los elementos en columna */
        align-items: center; /* Centrar los elementos verticalmente */
        text-align: center; /* Centrar el texto */
    }

    .separator {
        height: 20px; /* Reducir la altura del separador */
        margin: 5px 0; /* Reducir el espaciado horizontal */
    }

    .footer-bar .co-colombia-logo,
    .footer-bar .portal-logo {
        width: 40px; /* Reducir el tamaño de los logos */
    }
}

/* Para pantallas de tabletas (max-width: 768px) */
@media screen and (max-width: 768px) {
    .footer-bar {
        padding: 10px 15px; /* Ajustar el padding */
        flex-direction: column; /* Colocar los elementos en columna */
        align-items: center; /* Centrar los elementos verticalmente */
        text-align: center; /* Centrar el texto */
    }

    .separator {
        height: 25px; /* Reducir la altura del separador */
        margin: 5px 0; /* Reducir el espaciado horizontal */
    }

    .footer-bar .co-colombia-logo,
    .footer-bar .portal-logo {
        width: 60px; /* Reducir el tamaño de los logos */
    }
}

/* Para pantallas de escritorio (min-width: 1024px) */
@media screen and (min-width: 1024px) {
    .footer-bar {
        padding: 10px 20px; /* Mantener el padding */
        flex-direction: row; /* Colocar los elementos en fila */
        justify-content: flex-start; /* Alinear contenido a la izquierda */
        align-items: center; /* Centrar el contenido verticalmente */
    }

    .separator {
        height: 30px; /* Mantener la altura del separador */
        margin: 0 10px; /* Mantener el espaciado horizontal */
    }

    .footer-bar .co-colombia-logo {
        width: 48px; /* Mantener el tamaño original del logo de CO Colombia */
    }

    .footer-bar .portal-logo {
        width: 120px; /* Mantener el tamaño original del logo del Portal Único */
    }
}











/* Responsive Design */
@media (min-width: 1200px) {
    header {
        padding: 20px 40px; /* Aumenta el espacio interno */
    }

    header .logo img {
        max-width: 200px; /* Tamaño más grande para el logo */
    }

    header nav a {
        font-size: 16px; /* Texto más grande */
        margin: 0 20px; /* Espaciado amplio entre enlaces */
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    header {
        padding: 15px 30px; /* Ajusta el padding */
    }

    header .logo img {
        max-width: 180px; /* Reduce ligeramente el tamaño del logo */
    }

    header nav a {
        font-size: 14px; /* Texto ajustado */
        margin: 0 15px; /* Espaciado moderado */
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    header {
        flex-direction: column; /* Cambia a diseño vertical */
        align-items: flex-start; /* Alinea elementos al inicio */
        padding: 10px 20px; /* Reduce el padding */
    }

    header .logo img {
        max-width: 150px; /* Reduce el tamaño del logo */
    }

    header nav {
        justify-content: flex-start; /* Menú alineado al inicio */
        flex-wrap: wrap; /* Permite que el contenido se ajuste */
    }

    header nav a {
        font-size: 14px; /* Ajusta el tamaño del texto */
        margin: 5px 10px; /* Reduce los márgenes */
    }
}

@media (max-width: 767px) {
    header {
        flex-direction: column; /* Diseño vertical */
        align-items: center; /* Centra los elementos */
        padding: 10px; /* Reduce aún más el padding */
    }

    header .logo img {
        max-width: 120px; /* Logo más pequeño */
    }

    header nav {
        flex-direction: column; /* Coloca los enlaces en columnas */
        align-items: center; /* Centra los enlaces */
    }

    header nav a {
        font-size: 12px; /* Texto más pequeño */
        margin: 5px 0; /* Espaciado vertical entre enlaces */
    }
}


/* Estilo para el botón de scroll hacia arriba */
.scroll-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color:  #008000;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    font-size: 24px;
    display: none; /* Inicialmente oculto */
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scroll-to-top:hover {
    background-color: #006400; /* Color más oscuro al pasar el ratón */
    transform: scale(1.1);  /* Efecto de agrandamiento */

}