/*****INICIO CSS CUERPO ESPECIALIDADES*****/

/* Estilos para las secciones principales del cuerpo del documento */
.page-section {
    padding: 10px 10px;                     /* Espaciado interno superior/inferior para el contenido */
    margin: 0 auto;                         /* Centra la sección en la página */
    max-width: 1200px;                      /* Ancho máximo para el contenido, ajusta si es necesario */
    min-height: 200px;                      /* Altura mínima para que las secciones sean visibles */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Colores de fondo específicos para cada sección/fila */
#section1 {
    background-color: rgba(0, 255, 0, 0.2); border-radius: 10px; /* verde tenue */
}

#section2 {
    background-color: rgba(0, 255, 0, 0.2); border-radius: 10px; /* Naranja tenue */
}

#section3 {
    background-color: rgba(0, 255, 0, 0.2); border-radius: 10px; /* Celeste tenue */
}

/* Estilos para la Sección 1 - Soluciones de Hospital */
#section1 h2 {
    color: #004e89;                                  /* Color de letra */
    font-size: 2rem;                                 /* Tamaño de letra */
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);     /* Sombra de letra */
    margin-bottom: 20px;
}

/* Estilos para la Sección 2 - Soluciones Inálambricas */
#section2 h2 {
    color: #004e89; /* Color de letra */
    font-size: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Estilos para la Sección 3 - Soluciones de Respaldo de Energía */
#section3 h2 {
    color: #004e89; /* Color de letra */
    font-size: 2rem;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.section-description {
    font-size: 1.25rem; /* Ampliado: de 1.1rem a 1.25rem (aprox. 2 puntos más grande) */
    color: #333;
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'Nunito Sans', sans-serif; /* NUEVO: Fuente Nunito Sans */
}

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

.image-box {
    background-color: rgba(240, 240, 240, 0.5); /* #FFFFFF; /* (255, 243, 25, 0.3) */
    #border: 2px solid #e0e0e0;
    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:hover {
    transform: translateY(-5px);
}

.image-box 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 */
}

/* NUEVOS ESTILOS para el texto de Llamado de Enfermera dentro del cuadro */
.nurse-call-details {
    width: 100%; /* Ocupa el ancho completo del image-box */
    text-align: left; /* Alinea el contenido a la izquierda */
    margin-top: 15px; /* Espacio superior para separarlo de la imagen */
    font-family: 'IBM Plex Sans', sans-serif; /* NUEVO: Fuente IBM Plex Sans para todo el contenido del cuadro */
}

.nurse-call-title-in-box {
    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;
}

.nurse-call-title-in-box-orange {
    font-size: 1.05rem; /* Tamaño de título pequeño */
    color: #FF4500; /* Color de letra */
    font-weight: bold; /* En negrita */
    margin-bottom: 5px; /* Pequeño espacio debajo del título */
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

.nurse-call-title-in-box-green {
    font-size: 1.05rem; /* Tamaño de título pequeño */
    color: #32cd32; /* Color de letra */
    font-weight: bold; /* En negrita */
    margin-bottom: 5px; /* Pequeño espacio debajo del título */
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(100, 100, 100, 0.6);
}

.nurse-call-title-in-box-lila {
    font-size: 1.05rem; /* Tamaño de título pequeño */
    color: #9370DB; /* Color de letra */
    font-weight: bold; /* En negrita */
    margin-bottom: 5px; /* Pequeño espacio debajo del título */
    line-height: 1.4;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}
.nurse-call-desc-in-box {
    font-size: 0.95rem; /* Tamaño de texto de descripción */
    color: #333;
    text-align: justify; /* Justificado */
    line-height: 1.5;
    margin-top: 0; /* Asegura que esté justo debajo del título */
}

.nurse-call-desc-in-box .blue-text {
    color: #004e89;                          /* Color de letra */
}

.nurse-call-desc-in-box .red-text {
    color: #FF0000;                          /* Color de letra */
}

.nurse-call-desc-in-box .orange-text {
    color: #FF4500;                          /* Color de letra */
}

.nurse-call-desc-in-box .lila-text {
    color: #9370DB;                          /* Color de letra */
}

/* Estilos específicos para la galería de 4 columnas en la Sección 2 y Sección 3 y comunicaciones_tkv*/
.image-gallery.four-columns {
    gap: 20px;                                                            /* Reduce el espacio entre las cajas para que quepan 4 */
    max-width: 1200px;                                                    /* Permite un ancho mayor para 4 columnas */
}

.image-gallery.four-columns .image-box {
    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) */
}

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

.image-gallery.tree-columns .image-box {
    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) */
}

/* especialidades adaptativo-responsivo */

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

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

/* FIN CSS CUERPO HO-IN */