/* Reset básico y configuración de fuente general */
* {
    margin: 0; /* Elimina el margen por defecto */
    padding: 0; /* Elimina el padding por defecto */
    box-sizing: border-box; /* Asegura que el padding y border se incluyan en el ancho/alto de los elementos */
    font-family: 'Open Sans', sans-serif; /* Configura la fuente predeterminada */
}

html, body {
    height: 100%; /* Asegura que el html y body ocupen el 100% de la altura de la ventana */
}

body {
    display: flex; /* Utiliza flexbox para organizar el layout */
    flex-direction: column; /* Coloca los elementos de forma vertical, desde arriba hacia abajo */
    background-color: #d4e9d2; /*verde claro*/
    height: 100%; /* Asegura que el body ocupe el 100% de la altura de la ventana */
    margin: 0; /* Elimina cualquier margen por defecto */    
}

#principal-container {
    flex: 1; /* Toma todo el espacio restante disponible */
    margin-top: 0.1vh; /* Añade un margen superior igual al 0.1% de la altura de la ventana */
    margin-bottom: 2vh; /* Añade un margen inferior igual al 2% de la altura de la ventana */   
}

/* Configuración de fuentes para títulos */
h1, h2, h3 {
    font-family: 'Fjalla One', sans-serif; /* Asigna una fuente específica para los títulos */
}
    
/* Estilos del header */
header {
    width: 100%; /* El header ocupa todo el ancho de la página */
    height: 10vh; /* La altura es el 10% de la altura de la ventana del navegador */
    background-image: url('https://static.vecteezy.com/system/resources/previews/000/151/911/non_2x/perspective-matrix-background-free-vector.jpg'); /* Imagen de fondo */
    background-size: cover; /* Ajusta la imagen de fondo para que cubra todo el área */
    background-position: center; /* Centra la imagen de fondo */
    position: relative; /* Permite la colocación de elementos en relación con el header */
    float: left; /* Coloca el header en la parte izquierda */
}

/* Contenedor para los elementos del header */
.header-content {
    position: relative; /* Permite la colocación de elementos dentro de este contenedor */
    height: 100%; /* El contenedor ocupa toda la altura del header */
    display: flex; /* Usa Flexbox para organizar los elementos de manera flexible */
    justify-content: space-between; /* Coloca los elementos a los extremos */
    align-items: center; /* Centra los elementos verticalmente */
    padding: 0 20px; /* Añade un padding de 20px en los lados */
}

/* Estilos para las imágenes laterales del header */
.side-image {
    width: 50px; /* Establece el ancho de las imágenes laterales */
    height: 50px; /* Establece la altura de las imágenes laterales */
    cursor: pointer; /* Cambia el cursor a mano cuando se pasa por encima */
    position: relative; /* Permite el posicionamiento de los elementos dentro de la imagen */
}

/* Tooltip para las imágenes laterales */
.side-image:hover::after {
    content: "Pulsa"; /* El contenido del tooltip que aparece al pasar el mouse */
    position: absolute; /* Posiciona el tooltip de manera absoluta respecto a la imagen */
    bottom: -25px; /* Coloca el tooltip 25px debajo de la imagen */
    left: 50%; /* Centra el tooltip horizontalmente */
    transform: translateX(-50%); /* Ajusta el tooltip para que esté completamente centrado */
    background: #333; /* Fondo oscuro para el tooltip */
    color: white; /* Color del texto del tooltip */
    padding: 5px; /* Padding alrededor del texto */
    border-radius: 3px; /* Bordes redondeados */
    white-space: nowrap; /* Evita que el texto se divida en varias líneas */
}

/* Estilos para el título central */
.header-title {
    text-align: center; /* Centra el título */
}

/* Título principal con efecto hover */
.header-title h1 {
    color: white; /* Color blanco para el título */
    font-size: 2.8rem; /* Tamaño de fuente grande */
    transition: text-shadow 0.3s ease; /* Transición suave para el efecto de sombra */
}

/* Efecto brillo al pasar el ratón */
.header-title h1:hover {
    text-shadow: 0 0 10px #fff, /* Crea una sombra suave */
                    0 0 20px #fff, /* Aumenta el tamaño de la sombra */
                    0 0 30px #fff; /* Aumenta aún más la sombra */
}

/* Subtítulo del header */
.header-title h5 {
    color: #adc4a4; /* Color verde suave para el subtítulo */
    font-size: 1.3rem; /* Tamaño de fuente más pequeño para el subtítulo */
}

/* Estilos de navegación */
nav {
    width: 100%; /* La barra de navegación ocupa todo el ancho */
    float: left; /* Posiciona la barra de navegación en la izquierda */
    background-color: #333; /* Color de fondo oscuro */
    /*border-radius: 5px;*/ /* Bordes redondeados */
}

/* Lista de navegación principal */
.nav-menu {
    list-style: none; /* Elimina los puntos de la lista */
    display: flex; /* Organiza los elementos en fila */
    justify-content: center; /* Centra los elementos de la lista */
}

/* Elementos de la navegación */
.nav-menu > li {
    position: relative; /* Posiciona los elementos de la lista de manera relativa */
}

/* Enlaces del menú principal */
.nav-menu > li > a {
    display: block; /* Hace que los enlaces sean bloques completos */
    color: white; /* Color blanco para los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    padding: 15px; /* Padding alrededor de los enlaces */
    transition: all 0.3s; /* Transición suave para los efectos hover */
    border-radius: 5px; /* Bordes redondeados en los enlaces */
    font-size: 0.7rem; /* Hace que el texto sea más pequeño respecto al tamaño del texto base - primer nivel del menu*/     
}

/* Efectos hover del menú */
.nav-menu > li > a:hover,
.nav-menu > li:hover > a {
    background-color: #555; /* Cambia el fondo a un gris más oscuro cuando se pasa el ratón */
}

/* Página activa en el menú */
.nav-menu > li.active > a {
    border-bottom: 2px solid white; /* Añade una línea blanca debajo de la página activa */
}

/* Estilos especiales para INICIO y VPN */
.nav-menu > li.inicio > a,
.nav-menu > li.vpn > a {
    background-color: #4a772f; /* Fondo verde para estos enlaces */
    font-weight: bold; /* Hace el texto más grueso */
}

/* Submenús */
.submenu {
    list-style: none; /* Esto eliminará los puntos de la lista */
    display: none;
    position: absolute;
    background-color: #444;
    min-width: 230px;
    z-index: 1;
    border-radius: 5px;
    font-size: 0.7rem;
}

/* Estilo para los submenús que se muestran a la derecha */
.submenu-right {
    list-style: none; /* Elimina los puntos de la lista */
    display: none;
    position: absolute;
    background-color: #444; /* Mismo color de fondo que otros submenús */
    min-width: 300px; /* Aumenta el ancho mínimo del submenú */
    z-index: 1;
    border-radius: 5px;
    font-size: 0.7rem;
    top: -1px; /* Ajuste para que se alinee con la parte superior del elemento li padre */
    left: 100%; /* Posiciona el submenú a la derecha del elemento padre */
}

.submenu a {
    padding: 6px 20px 6px 10px; /* Aumenta el padding derecho */
}


.submenu li:has(.submenu-right) > a::after {
    content: ' >'; /* Utiliza un carácter de texto como flecha */
    float: right;
    margin-left: auto;
    color: white;
}

/* Regla para mostrar el submenú a la derecha al pasar el ratón */
.submenu li:hover > .submenu-right {
    display: block; /* Muestra el submenú cuando se pasa el ratón por encima */
}

/* Mostrar submenú al hover */
.nav-menu li:hover .submenu {
    display: block; /* Muestra el submenú cuando se pasa el ratón por encima */
}

/* Enlaces del submenú */
.submenu a {
    color: white; /* Color blanco para los enlaces del submenú */
    padding: 6px 10px; /* Padding alrededor de los enlaces */
    text-decoration: none; /* Elimina el subrayado de los enlaces */
    display: block; /* Hace que los enlaces del submenú sean bloques completos */
}

/* Hover en enlaces del submenú */
.submenu a:hover {
    background-color: #555; /* Cambia el fondo a gris más oscuro cuando se pasa el ratón */
    border-radius: 5px; /* Bordes redondeados en los enlaces */
}

/* Estilos del contenido principal */
main {
    width: 80%; /* Ancho del contenido principal */
    margin: 20px auto 0; /* Añade margen superior de 20px y centra el contenido horizontalmente */
    padding: 20px; /* Padding alrededor del contenido */
    background: #d1d1d1; /* Fondo blanco para el contenido */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Sombra suave alrededor del contenido */
    float: none; /* No usa float, para evitar problemas con el layout */
    clear: both; /* Asegura que el contenido no se solape con elementos flotantes */
}

/* Sección píldora de la semana */
.pill-section {
    background-color: #e5e0d3; /* Fondo de color beige suave */
    padding: 20px; /* Padding alrededor de la sección */
    margin-bottom: 20px; /* Margen inferior para separar de otros elementos */
}

.pill-section h2 {
    text-align: center; /* Centra el título */
    color: #4a772f; /* Color verde para el título */
    margin-bottom: 20px; /* Espacio debajo del título */
}

/* Tabla para contenido de la píldora */
.pill-content {
    display: table; /* Usa la propiedad table para organizar las celdas */
    width: 100%; /* Ancho del 100% */
    font-size: 0.8em; /* Hace que el texto sea más pequeño respecto al tamaño del texto base - pildora de la semana*/         
}

.pill-text {
    display: table-cell; /* Organiza los elementos en formato de celdas de tabla */
    padding: 10px; /* Padding dentro de las celdas */
    vertical-align: top; /* Alinea los elementos al tope de la celda */
}

.pill-video {
    position: relative; /* Establece el contenedor del video como relativo para que los elementos posicionados dentro de él (como el iframe) se ubiquen en relación a él */
    width: 100%; /* El video ocupará el 100% del ancho disponible de su contenedor */
    max-width: 800px; /* Limita el ancho máximo del video a 800px, para que no se haga demasiado grande en pantallas grandes */
    margin: 0 auto; /* Centra el video horizontalmente dentro de su contenedor */
    padding-bottom: 56.25%; /* Esto mantiene la relación de aspecto 16:9 del video (altura / ancho = 9 / 16 = 0.5625, que se convierte en 56.25%) */
    margin: 35px auto 0; /* Establece un margen superior de 35px para mover el video hacia abajo, centrado horizontalmente */
    height: 0; /* La altura se establece en 0 porque el tamaño de la altura se controla mediante el padding-bottom (esto es una técnica para mantener la relación de aspecto) */
    overflow: hidden; /* Oculta cualquier contenido que sobresalga del contenedor */
    background: #000; /* Establece un fondo negro en el contenedor para que el área alrededor del video se vea negra (especialmente útil si el video no carga inmediatamente) */
}
  
.pill-video iframe {
    position: absolute; /* Posiciona el iframe de manera absoluta dentro de su contenedor (para cubrir completamente el contenedor) */
    top: 0; /* Alinea el iframe en la parte superior del contenedor */
    left: 0; /* Alinea el iframe en el lado izquierdo del contenedor */
    width: 100%; /* Hace que el iframe ocupe el 100% del ancho del contenedor */
    height: 100%; /* Hace que el iframe ocupe el 100% de la altura del contenedor */
}

.pill-text {
    color: #4a772f; /* Color verde para el texto */
    padding-right: 20px; /* Padding adicional en la derecha */
    width: 50%; /* Ancho de 50% para las celdas de texto */
}

/* Sección de portales */
.portal-container {
    width: 48%; /* Ancho del 48% */
    float: left; /* Posiciona los portales en la izquierda */
    margin-right: 2%; /* Espacio entre los portales */
    background-color: #f5f5f5; /* Fondo gris claro para los portales */
    padding: 20px; /* Padding dentro de cada portal */
    border-radius: 5px; /* Bordes redondeados */
}

/* Títulos de los portales */
.portal-container h3 {
    color: #4a772f; /* Color verde para los títulos */
    position: relative; /* Permite el posicionamiento relativo */
    display: inline-block; /* Hace que el título sea un bloque en línea */
}

/* Efecto subrayado en títulos de portales */
.portal-container h3::after {
    content: ''; /* Crea un pseudo-elemento después del título */
    position: absolute; /* Posiciona el subrayado de manera absoluta */
    width: 0; /* El subrayado no tiene ancho por defecto */
    height: 4px; /* Altura del subrayado */
    bottom: -5px; /* Posiciona el subrayado debajo del título */
    left: 0; /* Coloca el subrayado a la izquierda */
    background-color: #8bb174; /* Color verde para el subrayado */
    transition: width 0.3s ease-out; /* Transición suave para el ancho del subrayado */
}

.portal-container:hover h3::after {
    width: 100%; /* Hace que el subrayado ocupe todo el ancho */
}

/* Sección de actividades */
.activity-item {
    width: 25%; /* Cada actividad ocupa el 25% del ancho */
    float: left; /* Coloca las actividades a la izquierda */
    padding: 10px; /* Padding alrededor de cada actividad */
    cursor: pointer; /* Cambia el cursor a mano cuando se pasa por encima */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transiciones suaves */
}

.activity-item:hover {
    transform: scale(1.05); /* Aumenta ligeramente el tamaño al pasar el ratón */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Añade una sombra cuando se pasa el ratón */
}

.activity-item img {
    width: 100%; /* Hace que la imagen ocupe todo el ancho de la celda */
    height: 150px; /* Establece una altura fija para las imágenes */
    object-fit: cover; /* Asegura que la imagen cubra todo el área sin deformarse */
    border-radius: 5px; /* Bordes redondeados en las imágenes */
}

.activity-item p {
    color: #4a772f; /* Color verde para el texto debajo de la imagen */
    font-weight: bold; /* Hace el texto más grueso */
    margin-top: 5px; /* Espacio superior entre la imagen y el texto */
}

footer {
    width: 100%; /* El footer ocupa todo el ancho de la página */
    height: 8vh; /* La altura del footer es del 8% de la altura de la ventana */
    background-color: #333; /* Fondo de color oscuro */
    color: white; /* Texto de color blanco */
    text-align: center; /* Centra el texto en el footer */
    padding: 10px; /* Espaciado interno dentro del footer */
    /* No necesitas `clear: both;` porque ya estás utilizando flexbox */
}

footer p {
    margin: 5px 0; /* Margen arriba y abajo del texto */
    line-height: 1.5; /* Espaciado entre líneas del texto */
}

/* Media queries para pantallas más pequeñas */
@media (max-width: 768px) {
    .box {
            width: 100%; /* En pantallas pequeñas, los elementos ocupan todo el ancho */
    }
}

/* Media queries para pantallas muy pequeñas (como móviles) */
@media (max-width: 480px) {
    header, footer {
        font-size: 14px; /* Reducir el tamaño de la fuente en pantallas pequeñas */
    }

    .box {
        padding: 10px; /* Menos padding en pantallas pequeñas */
    }
}

/* Media queries para pantallas más grandes */
@media (min-width: 1024px) {
    .box {
        width: 30%; /* En pantallas grandes, los elementos ocupan un 30% del contenedor */
    }
}
/* Línea de separación */
ul.submenu li.separator {
    border-top: 1px solid #ddd; /* Puedes cambiar el color según prefieras */
    margin: 4px 0; /* Reduce el espacio alrededor de la línea */
}

.submenu li {
    position: relative; 
}

/* ----------------------------------------------------------------------------- MAIN ---------------------------------------------------------------*/

/* Estilo del contenedor de la sección */
.pill-section2 {
    padding: 20px; /* Agrega un espacio interno de 20px en todos los lados del contenedor */
}

/* Estilo de la galería de imágenes */
.action-images2 {
    display: grid; /* Establece que los elementos se distribuyan en una rejilla */
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Crea columnas con un tamaño mínimo de 200px, ajustándose automáticamente */
    gap: 20px; /* Establece un espacio de 20px entre los elementos dentro de la rejilla */
}

/* Estilo de cada imagen y su contenedor */
.image-item2 {
    display: flex; /* Establece que los elementos dentro de .image-item sean flexibles */
    flex-direction: column; /* Organiza los elementos (imagen y botón) en una columna */
    align-items: center; /* Centra los elementos horizontalmente */
    justify-content: center; /* Centra los elementos verticalmente */
    text-align: center; /* Centra el texto del botón */
    overflow: visible; /* Permite que la imagen sobresalga del contenedor */
    position: relative; /* Establece la posición relativa para el uso de z-index */
}

/* Estilo de las imágenes */
.image-item2 img {
    width: 100%; /* La imagen ocupa todo el ancho disponible dentro del contenedor */
    height: 200px; /* La imagen tiene una altura fija de 200px */
    object-fit: cover; /* La imagen cubre todo el espacio disponible sin distorsionarse */
    border-radius: 8px; /* Redondea las esquinas de la imagen con un radio de 8px */
    transition: transform 0.3s ease; /* Aplica una transición suave al efecto de aumento de tamaño */
}

/* Efecto hover en la imagen */
.image-item2 img:hover {
    transform: scale(1.05); /* Aumenta la imagen un 5% cuando el ratón pasa por encima */
    z-index: 2; /* Asegura que la imagen aumentada se apile por encima de otros elementos */
}

/* Estilo del botón */
.image-item2 button {
    display: block; /* Hace que el botón se comporte como un bloque, ocupando todo el ancho disponible */
    margin-top: 10px; /* Añade un margen superior de 10px para separar el botón de la imagen */
    padding: 10px; /* Añade un relleno de 10px dentro del botón */
    background-color: #8b7c6d; /* Establece un fondo azul para el botón */
    color: white; /* Establece el color del texto del botón como blanco */
    border: none; /* Elimina el borde predeterminado del botón */
    border-radius: 5px; /* Redondea las esquinas del botón con un radio de 5px */
    cursor: pointer; /* Cambia el cursor a mano cuando pasa sobre el botón */
    width: auto; /* El ancho del botón se ajusta automáticamente al contenido */
}

/* Efecto hover en el botón */
.image-item2 button:hover {
    background-color: #0056b3; /* Cambia el color de fondo del botón a un azul más oscuro cuando el ratón pasa sobre él */
}