/* --------------------------------------- */
/* Bloque A: Paleta de colores */
/* Definimos los colores globales que usamos en el proyecto */
/* --------------------------------------- */
:root {
    --color-primary: #05B085;   /* Verde claro */
    --color-secondary: #C5992E; /* Dorado */
    --color-dark-bg: #084127;   /* Verde oscuro */
    --color-light-bg: #FFFFFF;  /* Blanco */
}

/* --------------------------------------- */
/* Bloque B: Tipografías personalizadas */
/* Poppins para el texto normal, Playfair Display para títulos */
/* --------------------------------------- */
body, p {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
}

.navbar-brand {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
}

/* --------------------------------------- */
/* Bloque C: Barra de navegación con degradado y efecto hover en el logo */
/* --------------------------------------- */
.navbar {
    position: sticky;
    top: 0;
    width: 100%;
    background: linear-gradient(180deg, var(--color-primary), var(--color-secondary)); /* Degradado de arriba a abajo */
    backdrop-filter: blur(5px);
    z-index: 1000;
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    transition: background 0.3s ease;
}

/* Contenedor dentro de la barra para centrar el contenido */
.navbar-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Efecto hover en el logo */
.navbar-brand img {
    height: 50px;
    max-width: 150px;
    transition: transform 0.3s ease-in-out;
}

.navbar-brand img:hover {
    transform: scale(1.1); /* Crece un 10% al hacer hover */
}

/* --------------------------------------- */
/* Bloque D: Menú de letras en pantallas grandes */
/* --------------------------------------- */
.navbar-nav {
    display: flex;
    justify-content: flex-end;
    list-style: none;
    margin: 0;
    padding: 0;
}

.navbar-nav .nav-item {
    margin-left: 20px;
}

.navbar-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.navbar-nav .nav-link {
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    padding: 10px 15px;
    transition: color 0.3s ease, transform 0.3s ease;
}

.navbar-nav .nav-link:hover {
    color: var(--color-secondary);
    transform: translateY(-2px);
}

/* --------------------------------------- */
/* Bloque E: Botón hamburguesa para móviles */
/* Ajustado para que se oculte en pantallas grandes */
/* --------------------------------------- */
.navbar-toggler {
    display: none; /* Se oculta por defecto */
    background-color: var(--color-dark-bg); /* Fondo verde oscuro */
    border: 2px solid #fff; /* Borde blanco */
    border-radius: 50%;
    padding: 10px;
    transition: transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

/* Líneas del menú hamburguesa en blanco */
.navbar-toggler i {
    color: #fff;
    font-size: 1.5rem;
}

.navbar-toggler:hover {
    background-color: var(--color-primary);
    border-color: var(--color-secondary);
    transform: rotate(360deg);
}

/* Estado activo del botón hamburguesa */
.navbar-toggler.active {
    background-color: var(--color-secondary);
    border-color: #fff;
    transform: scale(1.1);
}

/* Mostrar el menú de forma horizontal en pantallas grandes */
@media (min-width: 1061px) {
    .navbar-nav {
        flex-direction: row; /* Asegura la disposición en fila para pantallas grandes */
    }
}

/* Mostrar el botón hamburguesa solo en pantallas pequeñas */
@media (max-width: 1060px) {
    .navbar-toggler {
        display: block; /* Visible solo en pantallas pequeñas */
    }

    .navbar-nav {
        display: none;
        flex-direction: column;
        background: linear-gradient(180deg, var(--color-primary), var(--color-secondary)); /* Degradado de arriba a abajo */
        position: absolute;
        top: 70px;
        width: 100%;
        left: 0;
        padding: 0;
        box-sizing: border-box;
        transition: opacity 0.5s ease, transform 0.5s ease;
    }

    /* Mostrar el menú cuando se añada la clase "open" */
    .navbar-nav.open {
        display: flex;
        opacity: 1; /* Transición suave para hacerlo visible */
        transform: translateY(0);
    }

    .navbar-nav .nav-item {
        margin: 10px 0;
        text-align: center;
    }

    .navbar-nav .nav-link {
        color: var(--color-light-bg); /* Color blanco para las opciones del menú */
        font-weight: 500;
        padding: 15px;
        transition: color 0.3s ease;
    }

    .navbar-nav .nav-link:hover {
        color: var(--color-secondary); /* Cambia a dorado al hacer hover */
    }
}


/* --------------------------------------- */
/* Bloque F Ajustado: Estructura general y footer anclado */
/* Mantiene el footer en su lugar y agrega degradado */
/* --------------------------------------- */
footer {
    background: linear-gradient(180deg, var(--color-dark-bg), var(--color-secondary)); /* Degradado de arriba hacia abajo */
    color: var(--color-light-bg);
    padding: 20px;
    text-align: center;
    width: 100%; /* Footer ocupa todo el ancho de la página */
    position: relative;
    bottom: 0;
    margin: 0; /* Aseguramos que no haya margen alrededor del footer */
    box-sizing: border-box;
}

/* Centrar el contenido dentro del footer */
.footer-container {
    max-width: 1200px; /* Ancho máximo del contenido del footer */
    margin: 0 auto; /* Centra el contenido */
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

/* Estilos para los enlaces del footer */
.footer-nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer-nav li {
    margin: 0 10px;
}

.footer-nav a {
    color: var(--color-light-bg); /* Color blanco para los enlaces */
    text-decoration: none;
    transition: color 0.3s ease, transform 0.3s ease;
}

.footer-nav a:hover {
    color: var(--color-secondary); /* Cambiar a dorado al pasar el cursor */
    transform: scale(1.05); /* Efecto de agrandamiento al hacer hover */
}

/* Asegura que el footer esté siempre al final y elimine cualquier espacio adicional */
html, body {
    height: 100%;
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}


/* --------------------------------------- */
/* Bloque G: Interactividad de tarjetas */
/* --------------------------------------- */
.service-card {
    background-color: var(--color-light-bg);
    border: 1px solid var(--color-dark-bg);
    padding: 20px;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
}

.service-card i {
    font-size: 3rem;
    color: var(--color-primary);
    transition: color 0.3s ease;
}

.service-card:hover i {
    color: var(--color-secondary);
}

/* --------------------------------------- */
/* Bloque H: Botones interactivos */
/* --------------------------------------- */
.btn {
    padding: 15px 30px;
    font-weight: 600;
    border-radius: 5px;
    background-color: var(--color-secondary);
    color: var(--color-light-bg);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.btn:hover {
    background-color: var(--color-dark-bg);
    transform: scale(1.05);
}

/* --------------------------------------- */
/* Bloque I: Estilos del Carrusel */
/* Aseguramos que el carrusel y las imágenes sean responsivas */
.carousel-item {
    height: 600px; /* Ajusta el tamaño del carrusel */
}

.carousel-item img {
    object-fit: cover; /* Las imágenes se ajustarán sin distorsionarse */
    width: 100%;
    height: 100%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /* Fondo oscuro para los íconos de navegación */
    border-radius: 50%;
}

/* --------------------------------------- */
/* Bloque J Mejorado: Estilo de la sección ¿Quiénes Somos? */
/* --------------------------------------- */

/* Contenedor de la sección "Quiénes Somos" */
#about {
    padding: 0 15%; /* Añade relleno a los lados (15% a la izquierda y derecha) */
    text-align: justify; /* Alinea el texto para mejorar la distribución */
    margin-bottom: 20px; /* Espacio debajo de la sección */
}

/* Asegúrate de que el título también esté bien centrado */
.title-container {
    text-align: center;
    margin-bottom: 20px;
}

/* Estilo de la imagen, incluyendo el hover */
.section-title-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    margin: 0 auto;
    max-width: 400px; /* Ajusta el tamaño máximo de la imagen */
    transition: transform 0.4s ease, box-shadow 0.4s ease; /* Efecto de suavizado */
    cursor: pointer; /* Cambia el cursor al pasar el ratón */
}

/* Efecto de hover en la imagen */
.section-title-img:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño de la imagen */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3); /* Sombra suave al pasar el ratón */
}

/* -------------------------------------- */

/* --------------------------------------- */
/* Bloque K: Estilo de la sección Servicios */
/* --------------------------------------- */

/* Contenedor de la imagen de título */
.title-container {
    text-align: center;
    margin-bottom: 30px;
}

/* Imagen del título */
.section-title-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    max-width: 400px;
}

/* Grid para mostrar las tarjetas */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas grandes */
    gap: 20px;
    padding: 0 10%; /* Margen lateral */
}

/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
}

/* Estilo de las tarjetas */
.service-card {
    background-color: var(--color-light-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Estilo para los iconos dentro de las tarjetas */
.service-card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

/* Efecto hover en los iconos */
.service-card:hover i {
    color: var(--color-secondary);
}

/* Títulos dentro de las tarjetas */
.service-card h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Descripciones dentro de las tarjetas */
.service-card p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
}

/* -------------------------------------- */

/* --------------------------------------- */
/* Bloque L: Estilo de la sección Noticias */
/* --------------------------------------- */

/* Contenedor de la imagen del título */
.title-container {
    text-align: center;
    margin-bottom: 30px;
}

/* Imagen del título */
.section-title-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    max-width: 400px;
}

/* Grid para mostrar las noticias */
.news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas para noticias */
    gap: 20px;
    padding: 0 10%; /* Margen lateral */
}

/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .news-grid {
        grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
}

/* Estilo de las tarjetas de noticias */
.news-item {
    background-color: var(--color-light-bg);
    border: 2px solid var(--color-primary);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover */
.news-item:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

/* Títulos de las noticias */
.news-item h3 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Descripciones de las noticias */
.news-item p {
    font-size: 1rem;
    color: #555;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* Estilo del botón "Leer más" */
.news-item .btn {
    padding: 10px 20px;
    background-color: var(--color-secondary);
    color: var(--color-light-bg);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Efecto hover en el botón */
.news-item .btn:hover {
    background-color: var(--color-dark-bg);
    transform: scale(1.05);
}

/* -------------------------------------- */

/* --------------------------------------- */
/* Bloque M: Estilos de las secciones Comercial y PQRs */
/* --------------------------------------- */

/* Contenedor para las secciones, centrado */
.section-link {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 0;
    text-align: center;
    background: linear-gradient(135deg, var(--color-primary), var(--color-secondary)); /* Degradado de fondo */
    margin: 20px 0;
}

/* Botones grandes y estilosos */
.btn-large {
    display: inline-block;
    background-color: var(--color-dark-bg);
    color: var(--color-light-bg);
    font-size: 1.5rem;
    padding: 20px 40px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

/* Iconos dentro de los botones */
.btn-large i {
    margin-right: 10px;
}

/* Efecto hover: más grande y oscuro */
.btn-large:hover {
    background-color: var(--color-secondary);
    transform: scale(1.05);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.3);
}

/* Estilo responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .btn-large {
        font-size: 1.2rem;
        padding: 15px 30px;
    }
}

/* --------------------------------------- */
/* Bloque L: Estilo de Noticias del Planeta */
/* --------------------------------------- */
#news .title-container {
    text-align: center;
    margin-bottom: 30px;
}

#news .news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 10%;
}

.news-item {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.news-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
}

.news-item p {
    font-size: 1rem;
    color: #666;
}

/* --------------------------------------- */
/* Bloque M: Estilo de Comercial y PQRs */
/* --------------------------------------- */
.section-link {
    text-align: center;
    margin: 30px 0;
}

.btn-large {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.2rem;
    font-weight: 600;
    border-radius: 8px;
    background-color: var(--color-secondary);
    color: var(--color-light-bg);
    transition: background-color 0.3s ease, transform 0.3s ease;
    text-decoration: none;
}

.btn-large:hover {
    background-color: var(--color-dark-bg);
    transform: scale(1.05);
}

.btn-large i {
    margin-right: 10px;
    font-size: 1.5rem;
}

/* --------------------------------------- */
/* Bloque L: Estilo de la página de Servicios */
/* --------------------------------------- */

/* Contenedor de la imagen de título */
.title-container {
    text-align: center;
    margin-bottom: 30px;
}

/* Imagen del título */
.section-title-img {
    max-width: 100%;
    height: auto;
    display: inline-block;
    max-width: 400px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto hover en la imagen del título */
.section-title-img.hover-effect:hover {
    transform: scale(1.05); /* Aumenta el tamaño al hacer hover */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Añadir una sombra suave */
}

/* Grid para mostrar las tarjetas de servicios */
.services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas en pantallas grandes */
    gap: 20px;
    padding: 0 10%; /* Margen lateral */
}

/* Estilos de las tarjetas de servicio */
.service-card {
    background-color: var(--color-light-bg);
    border: 2px solid var(--color-dark-bg);
    padding: 30px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1); /* Sombra inicial */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card i {
    font-size: 4rem;
    color: var(--color-primary);
    margin-bottom: 15px;
    transition: color 0.3s ease;
}

/* Animación de las tarjetas al pasar el mouse */
.service-card:hover {
    transform: translateY(-10px); /* Desplaza ligeramente hacia arriba */
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.15); /* Aumenta la sombra */
}

.service-card h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    margin-bottom: 15px;
}

.service-card p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #333;
}

/* Efecto de icono de servicio */
.service-card:hover i {
    color: var(--color-secondary); /* Cambiar color del icono al hacer hover */
}

/* Ajuste para pantallas más pequeñas */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr; /* Cambiar a una columna en pantallas pequeñas */
    }

    .service-card {
        padding: 20px;
    }
}

/* --------------------------------------- */
/* Bloque de estilos para la página "Quiénes Somos" */
/* --------------------------------------- */

/* Contenedor general de la sección */
#about {
    padding: 0 10%;
    margin-bottom: 40px;
  }
  
  /* Estilo para los títulos de la sección */
  .title-container {
    text-align: center;
    margin-bottom: 30px;
  }
  
  /* Imagen del título */
  .section-title-img {
    max-width: 100%;
    height: auto;
    max-width: 450px;
    transition: transform 0.3s ease;
  }
  
  /* Efecto hover en la imagen del título */
  .section-title-img:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  /* Estilos para los bloques de contenido */
  .content-box {
    margin-bottom: 40px;
    text-align: justify;
  }
  
  .description {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #333;
  }
  
  /* --------------------------------------- */
  /* Bloque de valores corporativos */
  /* --------------------------------------- */
  
  /* Grid para los valores corporativos */
  .values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  
  /* Tarjetas para cada valor */
  .value-card {
    background-color: var(--color-light-bg);
    border: 2px solid var(--color-dark-bg);
    padding: 20px;
    text-align: center;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  /* Iconos grandes para las tarjetas */
  .value-card i {
    font-size: 3rem;
    color: var(--color-primary);
    margin-bottom: 10px;
    transition: color 0.3s ease;
  }
  
  /* Estilo de hover para las tarjetas */
  .value-card:hover {
    transform: translateY(-10px);
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Cambiar color del icono en hover */
  .value-card:hover i {
    color: var(--color-secondary);
  }
  
  .value-card h3 {
    font-size: 1.5rem;
    color: #333;
  }
  
  /* Ajuste para pantallas pequeñas */
  @media (max-width: 768px) {
    .values-grid {
      grid-template-columns: 1fr 1fr;
    }
  }
  
  /* Ajuste para pantallas extra pequeñas */
  @media (max-width: 480px) {
    .values-grid {
      grid-template-columns: 1fr;
    }
  }

  /* --------------------------------------- */
/* Bloque de estilo para la página comercial */
/* --------------------------------------- */

/* Contenedor general */
#comercial {
    padding: 0 10%;
    text-align: center;
    margin-bottom: 40px;
  }
  
  /* Imagen del título */
  .title-container {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .section-title-img {
    max-width: 100%;
    height: auto;
    max-width: 450px;
    transition: transform 0.3s ease;
  }
  
  /* Efecto hover para la imagen del título */
  .section-title-img:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  /* --------------------------------------- */
  /* Lista de documentos comerciales */
  /* --------------------------------------- */
  .documents-container {
    margin-top: 40px;
  }
  
  .document-list {
    list-style: none;
    padding: 0;
  }
  
  .document-list li {
    margin-bottom: 20px;
  }
  
  /* Estilo de los botones de descarga */
  .btn-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-primary);
    color: var(--color-light-bg);
    padding: 15px 30px;
    border-radius: 5px;
    font-size: 1.2rem;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  }
  
  /* Ícono de descarga */
  .btn-download i {
    margin-right: 10px;
    font-size: 1.5rem;
    color: var(--color-light-bg);
  }
  
  /* Efecto hover para los botones de descarga */
  .btn-download:hover {
    background-color: var(--color-secondary);
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  /* Ajuste de texto responsivo para pantallas pequeñas */
  @media (max-width: 768px) {
    .btn-download {
      font-size: 1rem;
      padding: 10px 20px;
    }
  
    .btn-download i {
      font-size: 1.2rem;
    }
  }

  /* --------------------------------------- */
/* Bloque de estilo para la página de noticias */
/* --------------------------------------- */

/* Contenedor de la sección */
#news {
    padding: 0 10%;
    text-align: center;
    margin-bottom: 40px;
  }
  
  /* Imagen del título */
  .title-container {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .section-title-img {
    max-width: 100%;
    height: auto;
    max-width: 500px;
    transition: transform 0.3s ease;
  }
  
  /* Efecto hover para la imagen del título */
  .section-title-img:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  /* --------------------------------------- */
  /* Grid de noticias */
  /* --------------------------------------- */
  .news-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Dos columnas */
    gap: 20px;
    margin-top: 40px;
  }
  
  /* Tarjetas de noticias */
  .news-item {
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
  }
  
  /* Efecto hover en las tarjetas */
  .news-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
  }
  
  .news-item h3 {
    font-size: 1.5rem;
    margin-bottom: 10px;
    color: var(--color-dark-bg);
  }
  
  .news-item p {
    font-size: 1rem;
    color: #333;
    margin-bottom: 10px;
  }
  
  /* Estilo para el enlace de leer más */
  .news-item a {
    text-decoration: none;
    color: var(--color-primary);
    font-weight: bold;
    transition: color 0.3s ease;
  }
  
  .news-item a:hover {
    color: var(--color-secondary);
  }
  
  /* Icono en el enlace de leer más */
  .news-item a i {
    margin-left: 5px;
  }
  
  /* --------------------------------------- */
  /* Estilo para la paginación */
  /* --------------------------------------- */
  .pagination {
    margin-top: 40px;
  }
  
  .pagination a {
    display: inline-block;
    padding: 10px 20px;
    background-color: var(--color-primary);
    color: var(--color-light-bg);
    text-decoration: none;
    margin: 0 10px;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  /* Efecto hover para la paginación */
  .pagination a:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
  }
  
  /* Ajuste para pantallas pequeñas */
  @media (max-width: 768px) {
    .news-grid {
      grid-template-columns: 1fr; /* Una columna en pantallas pequeñas */
    }
  
    .pagination a {
      font-size: 0.9rem;
    }
  }

  /* --------------------------------------- */
/* Estilos para la sección de PQRS */
/* --------------------------------------- */
#pqrs {
    padding: 0 10%;
    text-align: center;
    margin-bottom: 40px;
  }
  
  /* Imagen del título */
  .title-container {
    text-align: center;
    margin-bottom: 30px;
  }
  
  .section-title-img {
    max-width: 100%;
    height: auto;
    max-width: 400px;
    transition: transform 0.3s ease;
  }
  
  /* Efecto hover en la imagen */
  .section-title-img:hover {
    transform: scale(1.05);
    cursor: pointer;
  }
  
  /* --------------------------------------- */
  /* Estilos del formulario de PQRs */
  /* --------------------------------------- */
  .pqrs-form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
  }
  
  /* Estilo de los grupos de formulario */
  .form-group {
    margin-bottom: 20px;
    text-align: left;
  }
  
  .form-group label {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--color-dark-bg);
    display: block;
    margin-bottom: 8px;
  }
  
  .form-group input,
  .form-group textarea {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 5px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
  }
  
  .form-group input:focus,
  .form-group textarea:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 10px rgba(5, 176, 133, 0.3);
    outline: none;
  }
  
  /* Estilo del botón de envío */
  .btn-large {
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-light-bg);
    background-color: var(--color-primary);
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    transition: background-color 0.3s ease, transform 0.3s ease;
  }
  
  .btn-large i {
    margin-left: 10px;
    font-size: 1.2rem;
  }
  
  .btn-large:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
  }
  
  /* --------------------------------------- */
  /* Estilo de los contactos adicionales */
  /* --------------------------------------- */
  .additional-contacts {
    margin-top: 40px;
  }
  
  .additional-contacts h3 {
    font-size: 1.5rem;
    color: var(--color-dark-bg);
  }
  
  .additional-contacts p {
    font-size: 1.1rem;
    color: #333;
    margin: 10px 0;
  }
  
  .additional-contacts p i {
    margin-right: 10px;
    color: var(--color-primary);
  }
  
  /* --------------------------------------- */
  /* Estilos responsivos */
  /* --------------------------------------- */
  @media (max-width: 768px) {
    .pqrs-form-container {
      padding: 20px;
    }
  
    .btn-large {
      font-size: 1rem;
      padding: 12px 24px;
    }
  }
  

/* Nota final:
Este archivo está organizado en bloques lógicos. Asegúrate de que los estilos se carguen correctamente, sobre todo al agregar nuevas secciones como el carrusel.
Modularizar el CSS previene conflictos entre estilos.
*/

/* --------------------------------------- */
/* Nota: Comunicación y estructura */
/* Este CSS está organizado en bloques claros, con comentarios */
/* para que al agregar nuevas secciones podamos hacerlo de manera organizada */
/* Cuando volvamos a trabajar en el CSS, agregaremos nuevas secciones con nuevos bloques: */
/* Ejemplo: Bloque I: Nueva Sección */
/* Mantendremos esta estructura de comunicación organizada */
/* --------------------------------------- */