/*****INICIO CSS CUERPO COMUNICACIONES*****/

    /* SECCIÓN 1 */

.content-section {
    margin-bottom: 5px;                     
}

/* Eliminar el borde de la última sección */
.content-section:last-child {
    border-bottom: none;
}

/* Color de fondo del ROW1 */
#row1 {
    background-color: rgba(0, 128, 0, 0.1);                  /* Puedes ajustar este color */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 8px; 
    padding: 10px 0;
}

/* Color de fondo del ROW2 */
#row2 {
    background-color: rgba(0, 128, 0, 0.1);                  /* Puedes ajustar este color */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 8px; 
    padding: 20px 0;
}

/* Color de fondo del ROW3 */
#row3 {
    background-color: rgba(0, 128, 0, 0.1);              /* Un color lila claro para distinguirlo */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 8px;
    padding: 20px 0;
}

/* Color de fondo del cctv */
#cctv {
    background-color: rgba(50, 255, 0, 0.2);             /* Un color celeste claro para distinguirlo */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 8px;
    padding: 10px 0;
}

/* Color de fondo del control de acceso */
#acceso {
    background-color: rgba(50, 255, 0, 0.2);                   /* Un color verde para distinguirlo */
    border-radius: 24px;
    width: 95%;
    margin: 0 auto;
    padding: 20px 0;
}


/* Estilo básico para el contenido dentro de las secciones para una mejor visibilidad */
.content-section h2 {
    font-family: 'Nunito Sans', sans-serif;                 /* Fuente del slider */
    color: #004e89;                                         /* Color del encabezado */
    margin-bottom: 5px;
    text-align: center;
}

.content-section p {
    font-family: 'IBM Plex Sans', sans-serif;                /* Fuente del texto */
    color: #333;                                             /* Color del texto */
    line-height: 1.6;
    max-width: 95%;
    margin: 0 auto;
    text-align: left;                                        /* lleva el texto descriptor con alineación izquierda */
}

/* Nuevos estilos para la sección de SOLUCIONES DE VOZ */
.section-content-wrapper {
    max-width: 95%;                                       /* Ajusta el ancho máximo del contenido para centrarlo */
    margin: 0 auto;
    padding: 5px 0;
}

/* texto descriptivo 1 */
.voice-solution-item .voice-solution-description {
    font-family: 'IBM Plex Sans', sans-serif;
    color: rgba(2, 2, 2, 1);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 10px 20px 10px;
    text-align: center;
    font-weight: 600;
}

/* texto descriptivo 2 */
.voice-solution-item .voice-solution-description-row2 {
    font-family: 'IBM Plex Sans', sans-serif;
    color: rgba(2, 2, 2, 1);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 10px 20px 10px;
    text-align: center;
    font-weight: 600;
}

/* texto descriptivo 3 */
.voice-solution-item .voice-solution-description-row3 {
    font-family: 'IBM Plex Sans', sans-serif;
    color: rgba(2, 2, 2, 1);
    line-height: 1.6;
    max-width: 1200px;
    margin: 0 10px 20px 10px;
    text-align: center;
    font-weight: 600;
}

/* texto cctv */
.solution-cctv {
    font-family: 'Nunito Sans', sans-serif;                 /* Fuente del slider */
    color: #004e89;                                         /* Color del encabezado */
    margin-bottom: 5px;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    padding: 5px 5px;
}

.solution-description-cctv {
    font-family: 'IBM Plex Sans', sans-serif;
    color: #333;             /* rgba(0, 10, 100, 1); */
    line-height: 1.6;
    margin: 0 auto;
    text-align: center;
    font-weight: 600;
    width: 95%;
    justify-content: center;
    align-items: center;
}

.solution-description-acceso {
    font-family: 'IBM Plex Sans', sans-serif;
    color: rgba(77, 77, 77, 1);
    line-height: 1.6;
    max-width: 1100px;
    margin: 0 auto 20px;
    text-align: center;
    font-weight: 700;   
}

.voice-solution-item h3 {
    font-family: 'Nunito Sans', sans-serif;
    color: rgba(0, 78, 137, 1);                                         /* Azul más oscuro para los títulos de sub-sección */
    text-align: center;
    margin-bottom: 25px;
    font-size: 1.5rem;
    position: relative;
    padding-bottom: 10px;
    font-weight: 600;
    font-weight: bold;
}

.voice-solution-item:last-of-type {
    border-bottom: none;                                   /* Eliminar el borde de la última solución */
}

/* Línea amarilla */
.voice-solution-item h3::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: rgba(255, 215, 0, 1);                              /* Un color de acento, puedes cambiarlo */
    border-radius: 2px;
}

.text-and-image {
    display: flex;
    flex-wrap: wrap;                                       /* Permite que los elementos se envuelvan en pantallas pequeñas */
    align-items: center;                                   /* Alinea verticalmente los ítems */
    gap: 30px;                                             /* Espacio entre el texto y la imagen */
}

/* Nuevo estilo para invertir el orden en row2*/
.text-and-image .reverse-order {
    flex-direction: row-reverse;
}

.text-and-image ul {
    flex: 1;                                               /* Permite que la lista ocupe el espacio restante */
    min-width: 300px;                                      /* Ancho mínimo para la lista antes de envolver */
    list-style: none;                                      /* Elimina los puntos de la lista por defecto */
    padding-left: 0;
    margin: 0;
}

.text-and-image ul li {
  position: relative;
  padding-left: 30px;                                      /* Espacio para el icono de lista personalizado */
  font-family: 'IBM Plex Sans', sans-serif;
  color: #555;
  line-height: 1.8;
  margin-bottom: 10px;
}


/* Color azul para el texto "ROW1 DESCRIPTORES" */
.solution-list li strong {
    color: #004e89;                                         /* Color azul del header */
}

/* Nuevos estilos para la descripción con sangría */
.indented-description {
    font-family: 'IBM Plex Sans', sans-serif;
    font-size: 0.9em;                                       /* Un poco más pequeño */
    color: #666;                                            /* Gris más oscuro */
    line-height: 1.5;
    margin-top: 5px;
    padding-left: 35px;                                     /* Alineado con el padding de li */
    padding-right: 35px;
   }

.text-and-image .image-slider-container {
    flex: 1;                                                  /* Permite que el contenedor de la imagen ocupe el espacio restante */
    min-width: 200px;                                         /* Ancho mínimo para la imagen antes de envolver */
    min-height: 200px;                                        /* Altura mínima para la imagen */
    max-width: 300px;                                         /* Ancho máximo para la imagen */
    max-height: 300px;                                        /* Altura máxima para la imagen */
    margin: 0 auto;                                           /* Centrar la imagen si hay espacio */
    border: 1px solid #ddd;                                   /* Borde sutil alrededor de la imagen */
    border-radius: 8px;                                       /* Bordes redondeados */
    overflow: hidden;                                         /* Asegura que la imagen no se salga de los bordes redondeados */
    position: relative;
    box-shadow: 0 4px 8px rgba(0,0,0,0.8);                     /* Sombra sutil */
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
}


.image-slider-container:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.4);
}

.image-slider {
    display: flex;
    width: 500%;                                                /* 5 imágenes * 100% */
    transition: transform 0.5s ease-in-out;
    border-radius: 8px;
    overflow: hidden;
}

.image-wrapper {
    width: 20%;                                                 /* Cada imagen toma el 20% del ancho total del slider 100/5=20*/
    flex-shrink: 0;                                             /* Evita que las imágenes se encojan */
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;                                              /* Altura fija para todas las imágenes del slider */
    overflow: hidden;
    border-radius: 8px;
}

.image-wrapper img {
    width: 100%;
    height: 100%;                                               /* Asegura que la imagen ocupe el alto de su wrapper */
    object-fit: cover;                                          /* Asegura que la imagen se vea completa sin recortarse dentro del wrapper */
    display: block;                                             /* Elimina cualquier espacio extra que puedan añadir los navegadores */
    border-radius: 8px;
    overflow: hidden;
}

/* Controles para el slider ROW1 */
.slider-controls {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 5px;
}

.slide-btn {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 215, 0, 1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.9);
    border: none;
    cursor: pointer;
    opacity: 0.7;                                                  /* Botones más transparentes por defecto */
    transition: opacity 0.3s ease;
}

.slide-btn:hover {
    opacity: 0.5;                                                  /* Hover un poco más visible */
}

.btn-row1 {
  background-color: rgba(255, 215, 0, 1);                          /* amarillo */
}
.btn-row1.active {
  background-color: rgba(0, 78, 200, 1);                            /* azul */
}

/* Botones slider row2 */
.btn-row2 {
  background-color: #FF4500;                                         /* naranja del footer */
}
.btn-row2.active {
  background-color: rgba(100, 255, 255, 1);                          /* verde lima */
}

/* Botones slider row3 */
.btn-row3 {
  background-color: rgba(0, 78, 200, 1);                             /* azul */
}
.btn-row3.active {
  background-color: rgba(255, 215, 0, 1);                            /* amarillo */
}

/* box verticales */

.image-gallery-l {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 35px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 900px;
}

.image-box-l {
    background-color: rgba(240, 240, 240, 0.5); /* #FFFFFF; /* (255, 243, 25, 0.3) */
    border: 2px solid #e0e0e0;
    border-top: 6px solid rgba(0, 78, 200, 1);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    transition: transform 0.3s ease-in-out;
}

.image-box-l:hover {
    transform: translateY(-5px);
}

.image-box-l img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6); /* Sombra más tenue para las imágenes */
    margin-bottom: 10px; /* Ajustado: Margen inferior para separar de la nueva estructura de texto */
}

.image-box-t {
    background-color: rgba(240, 240, 240, 0.5); /* #FFFFFF; /* (255, 243, 25, 0.3) */
    border: 2px solid #e0e0e0;
    border-top: 6px solid rgba(255, 69, 0, 1);
    border-radius: 10px;
    padding: 25px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 280px;
    max-width: 400px;
    transition: transform 0.3s ease-in-out;
}

.image-box-t:hover {
    transform: translateY(-5px);
}

.image-box-t img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.6); /* Sombra más tenue para las imágenes */
    margin-bottom: 10px; /* Ajustado: Margen inferior para separar de la nueva estructura de texto */
}

.image-gallery-l.four-columns-l {
    gap: 20px;                                                            /* Reduce el espacio entre las cajas para que quepan 4 */
    max-width: 95%;                                                    /* Permite un ancho mayor para 4 columnas */
}

.image-gallery-l.four-columns-l .image-box-l {
    min-width: 200px;                                                     /* Reduce el ancho mínimo para que quepan 4 */
    max-width: 280px;                                                     /* Reduce el ancho máximo para 4 columnas */
    flex: 1 1 23%;                                                        /* Permite que las cajas se ajusten en 4 columnas (aprox 25% - gap) */
}

.image-gallery-l.tree-columns-l {
    gap: 35px;                                                            /* Reduce el espacio entre las cajas para que quepan 4 */
    max-width: 1200px;                                                    /* Permite un ancho mayor para 4 columnas */
}

.image-gallery-l.tree-columns-l .image-box-t {
    min-width: 250px;                                                     /* Reduce el ancho mínimo para que quepan 4 */
    max-width: 350px;                                                     /* Reduce el ancho máximo para 4 columnas */
    flex: 1 1 33%;                                                        /* Permite que las cajas se ajusten en 4 columnas (aprox 25% - gap) */
}

.comu-title {
    font-family: 'Nunito Sans', sans-serif;
    font-size: 1.1rem; /* Tamaño de título pequeño */
    color: #004e89; /* Color de letra */
    font-weight: bold; /* En negrita */
    margin-bottom: 5px; /* Pequeño espacio debajo del título */
    line-height: 1.4;
}

/* comunicaciones adaptativo-responsivo */
@media (min-width: 767px) and (max-width: 1024px) and (orientation: landscape) {
    .content-section { padding: 30px 15px; margin-bottom: 15px; }
    .text-and-image, .text-and-image .reverse-order { flex-direction: column; } /* Apilar en columnas en móviles */
    .text-and-image .image-slider-container, .text-and-image { max-width: 100%; margin-top: 20px; }
    .voice-solution-item h3 { font-size: 1.5em; }
    .image-wrapper { width: 20%; display: flex; justify-content: center; align-items: center; height: 75%; overflow: hidden; border-radius: 8px; }
}

@media (max-width: 768px) {
    #section1 h2, #section2 h2 { font-size: 1.8rem; }
    .image-gallery-l { flex-direction: column; align-items: center; gap: 20px; }
    .image-box-l { width: 90%; max-width: 400px; margin-bottom: 0; }
    .image-gallery-l.four-columns-l .image-box-l { width: 90%; max-width: 400px; }
}

/* Ajustes responsivos */
@media (max-width: 1024px) {
    .image-gallery-l.four-columns-l { flex-direction: row; justify-content: center; gap: 30px; }
    .image-gallery-l.four-columns-l .image-box-l { min-width: 250px; max-width: 350px; flex: 1 1 45%; }
}