/* Variables CSS: Define colores y valores reutilizables para facilitar el mantenimiento y la consistencia del diseño. */
:root {
    --primary-blue: #007bff;
    --primary-green: #8FBC8F; /* O el verde específico de tu marca */
    --text-dark: #333333;
    --text-gray: #555555;
    --background-light-gray: #f7f7f7;
    --card-background: #ffffff;
    --border-color-light: #eeeeee;
    --border-color-dark: #cccccc;
    --active-bg-light: #e6f3ff;
    --special-item-bg: #01506b;
    --special-item-active-bg: #003a4d;
    --special-item-active-border: #00aaff;
    --highlight-shadow: rgba(0, 0, 0, 0.2);
    --dark-background: #f0f0f0;

    /* Nuevas variables para padding y márgenes responsivos */
    --color-principal: #006666;
    --color-secundario: #15dd58;
    --color-oscuro: #080808;
    --fuente-principal: 'Poppins', sans-serif;
    --breakpoint-mobile: 576px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 992px;
    --padding-mobile: 15px;
    --padding-tablet: 30px; /* Ancho máximo específico para el header en pantallas muy grandes */

    
}
:root {
    --hero-title-size: 3.2rem;
    --hero-subtitle-size: 2rem;
    --hero-paragraph-size: 1.1rem;
}
/* --- Estilos Base para el Encabezado (Mobile-First) --- */
.main-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--border-color-light); /* Esto estará visible en todos los tamaños */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding: var(--padding-mobile) 0;
    width: 100%;
}

.header-content-wrapper {
    display: flex;
    flex-direction: column; /* Apila las filas en móvil */
    align-items: center; /* Centra el contenido */
    width: 100%;
    padding: 0 var(--padding-mobile); /* Padding lateral para el contenido */
}

.header-top-row {
    display: flex;
    flex-direction: column; /* Apila los grupos (logo/contacto y utilidades/social) en móvil */
    width: 100%;
    align-items: center; /* Centra los grupos apilados */
    margin-bottom: 10px; /* Espacio antes de la nav principal */
}

.header-brand-contact {
    display: flex;
    flex-direction: column; /* Apila logo y contacto en móvil */
    align-items: center;
    gap: 5px;
    margin-bottom: 15px; /* Espacio antes del grupo de utilidades/social */
    width: 100%; /* Ocupa todo el ancho disponible */
}

.logo-container {
    padding: 5px;
}

.csdocs-logo {
    height: 35px; /* Tamaño adecuado para móviles */
    width: auto;
}

.contact-info {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: var(--text-gray);
    font-family: 'Montserrat Light', sans-serif;
    font-weight: 300;
}

.flag-icon {
    width: 20px;
    height: auto;
}

.header-utility-social {
    display: flex;
    flex-direction: column; /* Apila utility nav y social icons en móvil */
    align-items: center;
    width: 100%; /* Ocupa todo el ancho disponible */
    gap: 10px; /* Espacio entre nav de utilidad y redes sociales */
    order: -1; /* Mueve esta sección (utilidades y redes) arriba del todo en mobile */
    margin-bottom: 15px; /* Espacio antes del logo/contacto en mobile */
}

.top-utility-nav ul {
    display: flex;
    flex-wrap: wrap; /* Permite que los ítems se envuelvan */
    justify-content: center; /* Centra los ítems */
    list-style: none;
    padding: 0;
    margin: 0;
    gap: 15px; /* Espacio entre los enlaces */
}

.top-utility-nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 0.85em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600; /* Semibold para estos enlaces */
    white-space: nowrap; /* Evita que el texto se rompa */
}

.social-icons-top {
    display: flex;
    gap: 15px; /* Espacio entre iconos */
}

.social-icon img {
    width: 24px; /* Tamaño de icono */
    height: 24px;
    transition: transform 0.2s ease-in-out;
}

.social-icon img:hover {
    transform: scale(1.1);
}

.header-bottom-row {
    width: 100%;
    /* La línea divisoria horizontal para pantallas grandes se aplica aquí */
    border-top: 1px solid var(--border-color-light); /* En móvil, esta línea también se muestra */
    padding-top: 10px; /* Espacio encima de la línea en móvil */
}

.main-nav {
    display: flex; /* Para controlar el botón hamburguesa y la lista */
    justify-content: space-between; /* Espacio entre hamburguesa y nav-list si ambos están visibles */
    align-items: center;
    width: 100%;
}

.hamburger-menu {
    display: flex; /* Visible en móvil */
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 1001; /* Asegura que esté por encima del menú desplegable */
}

.hamburger-menu .bar {
    width: 100%;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

.nav-list {
    display: none; /* Oculto por defecto en móvil, se muestra con JS */
    flex-direction: column; /* Apila enlaces en el menú desplegable */
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /* Para menú desplegable */
    top: 100%; /* Debajo del encabezado */
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Fondo blanco para el menú desplegable */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    overflow-y: auto; /* Para scroll si hay muchos ítems */
}

/* Cuando el menú está activo (se añade con JS) */
.nav-list.active {
    display: flex;
}

.main-nav ul.nav-list li {
    width: 100%; /* Cada ítem ocupa todo el ancho */
    text-align: center;
    border-bottom: 1px solid var(--border-color-light); /* Separador entre ítems */
}

.main-nav ul.nav-list li:last-child {
    border-bottom: none;
}

.main-nav ul.nav-list a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 1em;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    padding: 15px 0; /* Mayor padding para items de menú desplegable */
    display: block; /* Para que el padding funcione en todo el área del link */
    transition: background-color 0.2s ease;
}

.main-nav ul.nav-list a:hover {
    background-color: var(--background-light-gray);
}


/* --- Media Queries --- */

/* Teléfonos (hasta 576px) - Ajustes específicos si el base no es suficiente */
@media (max-width: 576px) {
    .csdocs-logo {
        height: 30px; /* Ligeramente más pequeño en los dispositivos más pequeños */
    }
    .contact-info {
        font-size: 0.8em;
    }
    .top-utility-nav a {
        font-size: 0.75em;
    }
    .social-icon img {
        width: 20px;
        height: 20px;
    }
    /* main-nav ya está oculto por defecto para móviles, solo el botón visible */
}


/* Tablets y Laptops Pequeñas (min-width: 577px y max-width: 992px) */
@media (min-width: 577px) and (max-width: 992px) {
    .main-header {
        padding: var(--padding-tablet) 0;
    }

    .header-content-wrapper {
        padding: 0 var(--padding-tablet);
    }

    .header-top-row {
        flex-direction: row; /* Grupo de marca/contacto y utilidades/social lado a lado */
        justify-content: space-between;
        align-items: center; /* Alineación vertical */
        margin-bottom: 15px; /* Espacio antes de la nav principal */
    }

    .header-brand-contact {
        flex-direction: row; /* Logo y contacto lado a lado */
        margin-bottom: 0;
        gap: 15px;
    }

    .csdocs-logo {
        height: 40px;
    }

    .contact-info {
        font-size: 0.9em;
    }

    .header-utility-social {
        flex-direction: row; /* Utilidades y social icons lado a lado */
        order: unset; /* Vuelve a su orden normal */
        margin-bottom: 0;
        gap: 20px;
    }

    .top-utility-nav ul {
        gap: 20px;
    }

    .top-utility-nav a {
        font-size: 0.9em;
    }

    .social-icons-top {
        gap: 20px;
    }

    .social-icon img {
        width: 28px;
        height: 28px;
    }

    .header-bottom-row {
        padding-top: 15px; /* Más espacio encima de la línea */
    }

    .main-nav {
        /* Para tablets, puedes decidir si quieres el menú hamburguesa o el nav visible.
           Para un menú más "tablet-friendly" que ocupa ancho: */
        justify-content: center; /* Centra la nav principal */
    }

    .hamburger-menu {
        display: none; /* Oculta el botón de hamburguesa en tablets */
    }

    .nav-list {
        display: flex; /* Muestra la nav list en tablets */
        position: static; /* No es absoluta */
        flex-direction: row; /* Ítems de la nav lado a lado */
        justify-content: center; /* Centra los ítems */
        width: auto; /* Ancho automático */
        box-shadow: none; /* Sin sombra */
        border-bottom: none; /* Sin borde inferior */
        gap: 20px; /* Espacio entre los ítems */
    }

    .main-nav ul.nav-list li {
        width: auto; /* Ancho automático para cada ítem */
        border-bottom: none; /* Elimina borde inferior */
    }

    .main-nav ul.nav-list a {
        padding: 10px 15px; /* Ajusta padding para enlaces de nav principal */
    }
}


/* Laptops y Monitores Grandes (min-width: 993px) */
@media (min-width: 993px) {
    .main-header {
        padding: 20px 0; /* Padding vertical */
    }

    .header-content-wrapper {
        max-width: var(--header-width-large); /* Limita el ancho del header */
        margin: 0 auto; /* Centra el contenido */
        padding: 0; /* Elimina padding lateral si ya está limitado por max-width */
    }

    .header-top-row {
        flex-direction: row; /* Fila horizontal principal */
        justify-content: space-between; /* Distribuye espacio */
        align-items: center; /* Alinea verticalmente */
        width: 100%;
        margin-bottom: 10px; /* Espacio antes de la nav principal */
    }

    .header-brand-contact {
        flex-direction: row; /* Logo y contacto en línea */
        align-items: center;
        gap: 20px; /* Espacio entre logo y contacto */
        width: auto; /* Ancho según contenido */
        margin-bottom: 0;
    }

    .csdocs-logo {
        height: 50px; /* Tamaño grande para el logo */
    }

    .contact-info {
        font-size: 1em;
    }

    .header-utility-social {
        flex-direction: row; /* Utilidades y social icons en línea */
        align-items: center;
        order: unset;
        margin-bottom: 0;
        gap: 30px; /* Espacio entre grupo de utilidades y redes */
    }

    .top-utility-nav ul {
        gap: 25px; /* Más espacio entre utilidades */
    }

    .top-utility-nav a {
        font-size: 0.95em;
    }

    .social-icons-top {
        gap: 25px; /* Más espacio entre iconos */
    }

    .social-icon img {
        width: 30px; /* Iconos más grandes */
        height: 30px;
    }

    .header-bottom-row {
        width: 100%;
        border-top: 1px solid var(--border-color-light); /* La línea divisoria */
        padding-top: 10px; /* Espacio encima de la línea */
    }

    .main-nav {
        justify-content: flex-start; /* Alinea la nav principal a la izquierda */
    }

    .hamburger-menu {
        display: none; /* Oculta el botón de hamburguesa en desktop */
    }

    .nav-list {
        display: flex; /* Muestra la nav list en desktop */
        position: static; /* No es absoluta */
        flex-direction: row; /* Ítems de la nav lado a lado */
        justify-content: flex-start; /* Alinea los ítems a la izquierda */
        width: auto; /* Ancho automático */
        box-shadow: none; /* Sin sombra */
        border-bottom: none; /* Sin borde inferior */
        gap: 30px; /* Mayor espacio entre los ítems de la nav principal */
    }

    .main-nav ul.nav-list li {
        width: auto; /* Ancho automático */
        border-bottom: none; /* Elimina borde inferior */
    }

    .main-nav ul.nav-list a {
        padding: 10px 15px; /* Padding de links de nav principal */
    }
}

/* Media Query para pantallas Ultra-Grandes (Opcional, 1600px y más) */
@media (min-width: 1600px) {
    .main-header .header-content-wrapper {
        max-width: 1600px; /* Aumenta el ancho máximo si es necesario */
    }
    .csdocs-logo {
        height: 55px; /* Un poco más grande */
    }
    .social-icon img {
        width: 32px;
        height: 32px;
    }
    .main-nav ul.nav-list a {
        font-size: 1.05em;
    }
}

/* Estilos básicos para que la nueva estructura sea visible (puedes tenerlos en tu styles.css) */
        .header-left-section, .header-right-section {
            display: flex;
            align-items: center; /* Alinea verticalmente los elementos dentro */
        }

        .header-brand-contact {
            display: flex;
            align-items: center;
            gap: 15px; /* Espacio entre logo y contacto */
        }

        .top-utility-nav ul {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0 0 0 20px; /* Margen izquierdo para separarlo del logo/contacto */
            gap: 15px;
        }

        .social-icons-top {
            display: flex;
            gap: 15px;
        }

/* Estilos globales del cuerpo de la página */
body {
    margin: 0;
    font-family: 'Montserrat Light', sans-serif; /* Montserrat Light para el texto general */
    font-weight: 300; /* Asegura el peso 'light' */
    line-height: 1.6; /* Mejora la legibilidad del texto */
    color: #333; /* Color de texto predeterminado */
    overflow-x: hidden; /* Evita el scroll horizontal en caso de desbordamientos */
}

/* Para un modelo de caja más predecible */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- ESTILOS PARA TÍTULOS IMPORTANTES (aplicar Montserrat Bold) --- */
/* Identifica todos los elementos de título que quieras en Montserrat normal/bold */
h1, h2, h3, h4, h5, h6,
.dynamic-content-title,
.team-title,
.footer-column-title,
.modal-content h2,
.event-date-box,
.event-details h4,
.hero-text h1,
.hero-text h2,
.hero-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* Puedes ajustar a 600 (semibold) o 500 (medium) si lo prefieres */
}

/* Asegúrate de que los párrafos y textos generales usen Montserrat Light */
p, li, a, span, button, input, label, strong {
    font-family: 'Montserrat Light', sans-serif;
    font-weight: 300; /* Asegura que la mayoría del texto sea light */
}

/* Sobrescribir específicamente donde necesites un peso diferente para Montserrat */
.nav-list a, /* Links de navegación */
.hero-buttons button, /* Botones del hero */
.dynamic-menu-item, /* Items del menú lateral */
.dynamic-menu-item.active-dynamic-menu-item,
.dynamic-telecom-item .dynamic-telecom-highlight,
.dynamic-list-item-title,
.dynamic-question-text,
.view-all-button,
.member-name,
.member-title,
.subscribe-form button,
.event-register-btn {
    font-family: 'Montserrat', sans-serif; /* Usamos Montserrat normal */
    font-weight: 600; /* Semibold para elementos de acción o prominentes */
}

/* También puedes ajustar font-weight para texto en negrita, si necesitas más énfasis */
strong {
    font-family: 'Montserrat', sans-serif; /* Usamos Montserrat para bold */
    font-weight: 700; /* Bold */
}

/* --- SECCIÓN GLOBAL DE ENCABEZADO Y MENÚ SUPERIOR --- */
header {
    display: flex; /* Utiliza Flexbox para organizar los elementos en una fila */
    justify-content: space-between; /* Distribuye los elementos (logo, menú, iconos) con espacio entre ellos */
    align-items: center; /* Alinea los elementos verticalmente al centro */
    padding: 15px 40px; /* Relleno superior/inferior y lateral */
    background-color: #fff; /* Fondo blanco */
    border-bottom: 1px solid #ccc; /* Borde inferior para separación visual */
    position: relative; /* Establece un contexto de posicionamiento para elementos hijos si los hubiera */
}

.logo-section {
    display: flex; /* Flexbox para alinear el logo y el número de teléfono */
    align-items: center; /* Alinea verticalmente al centro */
    gap: 10px; /* Espacio entre el logo y el texto */
}

.logo-section img {
    height: 40px; /* Altura fija para el logo */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro de su contenedor sin recortarse */
}

.menu {
    display: flex; /* Flexbox para los enlaces del menú */
    gap: 25px; /* Espacio entre los enlaces */
    font-size: 15px; /* Tamaño de fuente para los elementos del menú */
}

.menu a {
    text-decoration: none; /* Elimina el subrayado predeterminado de los enlaces */
    color: #000; /* Color de texto negro para los enlaces del menú */
}

.social-icons {
    display: flex; /* Flexbox para los iconos sociales */
    gap: 20px; /* Espacio entre los iconos */
}

.social-icons img {
    width: 28px; /* Ancho de los iconos */
    height: 28px; /* Altura de los iconos */
    cursor: pointer; /* Cambia el cursor a una mano al pasar por encima, indicando que es interactivo */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro de su contenedor sin recortarse */
}

/* --- Estilos para el Header Principal --- */
.main-header {
    background-color: #fff;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky; /* Se mantiene en la parte superior al hacer scroll */
    top: 0;
    width: 100%;
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Espacia los elementos: logo, contacto/nav, social */
    max-width: 1400px; /* Ancho máximo para el header en pantallas grandes */
    margin: 0 auto; /* Centra el header */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.logo img {
    height: 40px; /* Ajusta el tamaño de tu logo */
    vertical-align: middle;
}

.contact-info {
    display: flex;
    align-items: center;
    font-size: 0.95rem;
    color: #555;
    white-space: nowrap; /* Evita que el número se rompa en varias líneas */
    margin: 5px 10px; /* Margen para evitar pegarse a otros elementos */
}

.contact-info .flag-icon {
    width: 24px; /* Tamaño de la bandera */
    height: auto;
    margin-right: 5px;
}

/* --- Navegación Principal --- */
.main-nav {
    flex-grow: 1; /* Permite que la navegación ocupe el espacio disponible */
    display: flex;
    justify-content: center; /* Centra el menú en pantallas grandes */
}

.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}

.nav-list li {
    margin: 0 15px; /* Espacio entre los elementos del menú */
}

.nav-list a {
    text-decoration: none;
    color: #333;
    font-weight: 600;
    font-size: 1rem;
    padding: 10px 0;
    display: block;
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: #c00; /* Color rojo de tu marca al pasar el ratón */
}

/* --- Botón de Hamburguesa (inicialmente oculto) --- */
.hamburger-menu {
    display: none; /* Oculto por defecto en escritorio */
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    position: relative; /* Para las barras */
    z-index: 1001; /* Asegura que esté encima del menú cuando se abre */
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 5px 0;
    transition: all 0.3s ease;
}

/* --- Iconos de Redes Sociales --- */
.social-links {
    display: flex;
    gap: 10px; /* Espacio entre los iconos */
    margin-left: 10px; /* Margen a la izquierda para separarlo del menú */
    flex-shrink: 0; /* Evita que los iconos se compriman */
}

.social-links img {
    width: 24px; /* Tamaño de los iconos */
    height: 24px;
    vertical-align: middle;
}

/* --- Media Queries para el Header --- */

/* Pantallas grandes (escritorio y laptops) */
@media (min-width: 992px) {
    .header-top {
        flex-wrap: nowrap; /* Asegura que no se envuelvan */
        gap: 20px; /* Espacio general entre secciones del header */
    }
    .main-nav {
        flex-grow: 1;
        justify-content: center; /* Centra el menú de navegación */
    }
    .nav-list {
        display: flex !important; /* Asegura que el menú sea visible */
        flex-direction: row;
    }
}


/* Pantallas medianas (tablets y algunos laptops pequeños) */
@media (max-width: 991px) {
    .contact-info {
        order: 2; /* Mueve la info de contacto al final en tablets/móviles */
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        font-size: 0.85rem;
    }
    .social-links {
        order: 3; /* Mueve los links sociales también */
        width: 100%;
        justify-content: center;
        margin-top: 10px;
        margin-left: 0;
    }
    .main-nav {
        order: 1; /* Asegura que la navegación esté en el orden correcto */
        flex-grow: 0; /* No crece para ocupar espacio */
    }

    .hamburger-menu {
        display: block; /* Muestra el botón de hamburguesa */
    }

    .nav-list {
        display: none; /* Oculta el menú por defecto en pantallas pequeñas */
        flex-direction: column; /* Apila los elementos del menú verticalmente */
        background-color: #fff;
        position: absolute;
        top: 100%; /* Debajo del header */
        left: 0;
        width: 100%;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
        padding: 10px 0;
        text-align: center;
    }

    .nav-list.active { /* Clase que JavaScript agregará para mostrar el menú */
        display: flex;
    }

    .nav-list li {
        margin: 0;
        border-bottom: 1px solid #eee; /* Separador entre elementos del menú */
    }

    .nav-list li:last-child {
        border-bottom: none;
    }

    .nav-list a {
        padding: 12px 20px;
        font-size: 1.1rem;
    }
}

/* Pantallas extra pequeñas (smartphones) */
@media (max-width: 575px) {
    .main-header {
        padding: 10px;
    }
    .contact-info {
        font-size: 0.8rem;
    }
    .contact-info .flag-icon {
        width: 20px;
    }
    .logo img {
        height: 35px;
    }
    .social-links img {
        width: 20px;
        height: 20px;
    }
    .hamburger-menu {
        padding: 8px;
    }
    .hamburger-menu .bar {
        width: 20px;
        height: 2px;
        margin: 4px 0;
    }
    .nav-list a {
        font-size: 1rem;
        padding: 10px 15px;
    }
}

/* --- Sección de Tarjetas con Imágenes --- */
.image-cards-section {
    background-color: #f8f8f8; /* Un fondo ligeramente gris para que no sea blanco puro */
    padding: 40px 20px; /* Espacio alrededor de la sección */
    text-align: center; /* Centra el contenido si hay algún título global aquí */
}

.cards-container {
    display: flex;
    flex-wrap: wrap; /* Permite que las tarjetas se envuelvan a la siguiente línea */
    gap: 20px; /* Espacio entre las tarjetas */
    justify-content: center; /* Centra las tarjetas si no llenan la línea */
    max-width: 1200px; /* Ancho máximo para el contenedor de tarjetas */
    margin: 0 auto; /* Centra el contenedor de tarjetas */
}

.image-card {
    position: relative; /* Crucial para posicionar el texto encima */
    flex: 1 1 300px; /* Permite que cada tarjeta crezca, se encoja y tenga una base de 300px */
    max-width: calc(33.33% - 20px); /* Para 3 columnas con gap en escritorio */
    height: 300px; /* Altura fija para las tarjetas, ajusta si es necesario */
    overflow: hidden; /* Recorta cualquier cosa que se salga de la tarjeta (como el texto si desborda) */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-card:hover {
    transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
    box-shadow: 0 8px 15px rgba(0,0,0,0.2);
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* La imagen cubre toda la tarjeta, recortando si es necesario */
    transition: transform 0.5s ease;
}

.image-card:hover img {
    transform: scale(1.05); /* Ligeramente más grande al pasar el ratón */
}

.card-text-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente para el texto */
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Alinea el texto en la parte inferior de la tarjeta */
    align-items: flex-start; /* Alinea el texto a la izquierda */
    padding: 20px;
    text-align: left; /* Alineación del texto */
    transition: background-color 0.3s ease;
}

.image-card:hover .card-text-overlay {
    background-color: rgba(0, 0, 0, 0.6); /* Más oscuro al pasar el ratón */
}

.card-text-overlay h3 {
    margin: 0; /* Elimina márgenes por defecto */
    font-size: 1.6rem; /* Tamaño de fuente para el título */
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5); /* Sombra para el texto para mayor legibilidad */
}

/* Media Queries para la Sección de Tarjetas */
@media (max-width: 991px) {
    .image-card {
        max-width: calc(50% - 15px); /* Dos columnas en tablets */
        height: 280px;
    }
    .card-text-overlay h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 767px) {
    .image-cards-section {
        padding: 30px 15px;
    }
    .image-card {
        max-width: 100%; /* Una columna en móviles */
        height: 250px;
    }
    .card-text-overlay h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 575px) {
    .image-card {
        height: 220px;
    }
    .card-text-overlay h3 {
        font-size: 1.1rem;
        padding-bottom: 5px; /* Ajuste si las líneas de texto son más compactas */
    }
    .card-text-overlay {
        padding: 15px;
    }
}

/* --- SECCIÓN HERO SLIDER (Carrusel principal con videos/imágenes) --- */

/* --- 1. Contenedor Principal del Slider --- */
.hero {
    position: relative;
    overflow: hidden;
    height: 70vh; /* Altura predeterminada para pantallas grandes */
    display: flex;
    align-items: center; /* Centra verticalmente el contenido */
    justify-content: center; /* Centra horizontalmente los slides */
    background-color: #000; /* Color de respaldo si el fondo no carga */
}

/* --- 2. Cada Slide Individual (.hero-slide) --- */
.hero-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.8s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
}

/* --- 3. Slide Activo (Visible) --- */
.hero-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* --- 4. Fondo del Slide (Video o Imagen) --- */
.hero-video,
.hero-image-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* --- 5. Capa Oscura para Mejor Contraste --- */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Oscurecimiento */
    z-index: 1;
}

/* --- 6. Contenedor de Contenido (Texto y Botones) --- */
.hero-content {
    position: relative;
    z-index: 2; /* Encima del overlay */
    display: flex;
    justify-content: space-between; /* Separa texto y botones */
    align-items: center;
    max-width: 1200px; /* Aumentado para dar más espacio al texto */
    width: 100%;
    margin: 0 auto;
    padding: 0 10px;
    box-sizing: border-box;
    gap: 40px; /* Espacio entre texto y botones */
    color: #fff;
}

/* --- 7. Contenedor del Texto --- */
.hero-text {
    flex: 2;
    text-align: left;
    max-width: 100%;
    transform: translateX(-80px); /* 🔹 Mueve el texto 40px a la izquierda (ajusta como gustes) */
}

/* --- 8. Estilos de Títulos y Párrafos --- */
.hero-text h1,
.hero-text h2,
.hero-text h3,
.hero-text p {
    margin: 0;
    margin-bottom: 0.8em;
    line-height: 1.0;
}

.hero-text h1 {
    font-size: 3.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
}

.hero-text h2 {
    font-size: 2.2rem;
    font-weight: 400;
    margin-bottom: 0.5em;
}

.hero-text h3 {
    font-size: 1.6rem;
    font-weight: 400;
    margin-bottom: 0.5em;
}

.hero-text p {
    font-size: 1.1rem;
    margin-bottom: 1.5em;
    max-width: 30%; /* Elimina el tope de 700px para mayor flexibilidad */
}

/* --- 9. Contenedor de Botones --- */
.hero-buttons {
    flex: 1; /* Menor ancho que el texto */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 15px;
    margin-top: 2rem;
    flex-wrap: wrap;
    transform: translateX(100px); /* 🔹 Mueve los botones 20px a la derecha (ajusta como gustes) */

}

/* --- 10. Estilo de los Botones --- */
.hero-buttons button {
    padding: 0.9rem 2.2rem;
    border: none;
    font-size: 1.1rem;
    color: white;
    border-radius: 5px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
    min-width: 180px;
    white-space: nowrap;
}

.btn-red {
    background-color: #c00;
}

.btn-red:hover {
    background-color: #e00;
    transform: translateY(-2px);
}

.btn-blue {
    background-color: #1b5dbf;
}

.btn-blue:hover {
    background-color: #2a72dd;
    transform: translateY(-2px);
}

/* --- 11. Indicadores de Navegación (Foquitos) --- */
.hero-dots-container {
    position: absolute;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 999;
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 20px;
}

.hero-dot {
    width: 14px;
    height: 14px;
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.9);
}

.hero-dot.active {
    background-color: #fff;
    transform: scale(1.4);
    border-color: #c00;
}

.hero-dot:hover {
    background-color: rgba(255, 255, 255, 1);
    transform: scale(1.2);
}

/* --- 12. MEDIA QUERIES PARA RESPONSIVIDAD --- */

/* Pantallas grandes (desde 1200px en adelante) */
@media (min-width: 1200px) {
    .hero {
        height: 80vh;
    }
    .hero-text h1 {
        font-size: 4.5rem;
    }
    .hero-text h2 {
        font-size: 2.8rem;
    }
    .hero-text p {
        font-size: 1.2rem;
    }
    .hero-buttons {
        flex-direction: row;
        gap: 25px;
    }
}

/* Escritorio mediano (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero {
        height: 75vh;
    }
    .hero-text h1 {
        font-size: 3.5rem;
    }
    .hero-text h2 {
        font-size: 2rem;
    }
    .hero-text p {
        font-size: 1.1rem;
    }
    .hero-buttons {
        flex-direction: row;
        gap: 20px;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .hero {
        height: 65vh;
    }
    .hero-content {
        flex-direction: column;
        gap: 20px;
    }
    .hero-text h1 {
        font-size: 2.8rem;
    }
    .hero-text h2 {
        font-size: 1.6rem;
    }
    .hero-text p {
        font-size: 1rem;
    }
    .hero-buttons {
        flex-direction: row;
        justify-content: center;
    }
}

/* Celulares (576px - 767px) */
@media (min-width: 576px) and (max-width: 767px) {
    .hero {
        height: 60vh;
    }
    .hero-content {
        flex-direction: column;
        padding: 15px;
        gap: 20px;
    }
    .hero-text h1 {
        font-size: 2.2rem;
    }
    .hero-text h2 {
        font-size: 1.3rem;
    }
    .hero-text p {
        font-size: 0.95rem;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    .hero-buttons button {
        width: 80%;
        max-width: 280px;
    }
}

/* Teléfonos pequeños (menos de 576px) */
@media (max-width: 575px) {
    .hero {
        height: 55vh;
    }
    .hero-content {
        flex-direction: column;
        padding: 15px;
        gap: 20px;
    }
    .hero-text h1 {
        font-size: 1.8rem;
    }
    .hero-text h2 {
        font-size: 1.1rem;
    }
    .hero-text h3 {
        font-size: 0.9rem;
    }
    .hero-text p {
        font-size: 0.9rem;
    }
    .hero-buttons {
        flex-direction: column;
        width: 100%;
    }
    .hero-buttons button {
        width: 90%;
        max-width: 250px;
        font-size: 1rem;
        padding: 0.8rem 1.8rem;
    }
    .hero-dots-container {
        bottom: 15px;
        gap: 8px;
    }
    .hero-dot {
        width: 10px;
        height: 10px;
    }
}

/* Ajustes para pantallas con poca altura */
@media (max-height: 600px) {
    .hero {
        height: 400px;
        min-height: 300px;
    }
    .hero-text h1 {
        font-size: 2.2rem;
    }
    .hero-text h2 {
        font-size: 1.4rem;
    }
    .hero-text p {
        font-size: 0.9rem;
    }
}


/* --- SECCIÓN DE CARACTERÍSTICAS (imágenes y texto flotante) --- */
.features {
    display: flex; /* Utiliza Flexbox para organizar las características en una fila */
    margin-top: 0; /* Elimina margen superior (ya que hero ocupa 100vh) */
}

.feature {
    flex: 1; /* Cada característica ocupa una parte igual del espacio disponible */
    position: relative; /* Necesario para posicionar el texto flotante */
    height: 550px; /* Altura fija para cada contenedor de característica */
    overflow: hidden; /* Oculta cualquier parte de la imagen que se desborde */
}

.feature img {
    width: 100%; /* La imagen ocupa todo el ancho de su contenedor */
    height: 120%; /* La imagen ocupa toda la altura de su contenedor */
    object-fit: contain; /* Ajusta la imagen dentro del contenedor sin recortarla, manteniendo su relación de aspecto. Puede dejar espacio vacío. */
    display: block; /* Elimina el espacio extra que los navegadores añaden debajo de las imágenes en línea */
    background-color: #f0f0f0; /* Fondo gris claro si la imagen no cubre todo (debido a 'contain') */
}

.feature-text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    font-size: 30px; /* Aumenta el tamaño de la letra */
    color: #000;
    padding: 15px 10% 15px 13%; /* Margen izquierdo y derecho del 10% */
    box-sizing: border-box;

    background: linear-gradient(
        to right,
        rgba(255, 255, 255, 1) 0%,
        rgba(255, 255, 255, 0) 50%,
        transparent 100%
    );

    border: none;
    outline: none;
    box-shadow: none;
    background-color: transparent;
}





.feature-text strong {
    font-family: monospace; /* Fuente monoespaciada para el texto en negrita (original de tu CSS) */
}

/* --- SECCIÓN: ¿CÓMO TRABAJAMOS? --- */
.how-we-work {
    background-color: #1a1a1a; /* Fondo oscuro */
    color: #ffffff; /* Texto blanco por defecto */
    padding: 60px 20px; /* Relleno superior/inferior y lateral */
    text-align: center; /* Centra el texto y los elementos inline */
}

.how-we-work h2 {
    font-size: 2.5em; /* Tamaño de fuente grande para el título */
    margin-bottom: 40px; /* Espacio debajo del título */
    color: #ffffff; /* Color de respaldo para el título */
}

.how-we-work h2 .color1 {
    color: #15dd58; /* Color verde específico para la primera parte del título */
}

.how-we-work h2 .color2 {
    color: #f7f9fa; /* Color blanco/gris claro para la segunda parte del título (original de tu CSS) */
}

.work-process {
    display: flex; /* Utiliza Flexbox para organizar los pasos del proceso */
    justify-content: center; /* Centra los pasos horizontalmente */
    gap: 30px; /* Espacio entre cada paso */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan a la siguiente línea en pantallas pequeñas */
    margin-bottom: 50px; /* Margen debajo del proceso */
}

.process-step {
    position: relative; /* Necesario para posicionar el overlay */
    width: 280px; /* Ancho fijo para cada paso */
    height: 280px; /* Alto fijo para cada paso */
    border-radius: 50%; /* Hace que el contenedor sea circular */
    overflow: hidden; /* Recorta cualquier parte de la imagen que se salga del círculo */
    display: flex; /* Flexbox para centrar la imagen */
    justify-content: center; /* Centra la imagen horizontalmente */
    align-items: center; /* Centra la imagen verticalmente */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Sombra sutil para dar profundidad */
}

.process-step img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Asegura que la imagen cubra todo el círculo, recortando si es necesario */
    filter: brightness(0.6); /* Oscurece la imagen ligeramente */
    transition: filter 0.3s ease; /* Suaviza el cambio de brillo al pasar el mouse */
}

.process-step:hover img {
    filter: brightness(0.8); /* Aclara la imagen al pasar el mouse */
}

.step-overlay {
    position: absolute; /* Posiciona el overlay sobre la imagen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex; /* Flexbox para centrar el texto dentro del overlay */
    justify-content: center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.4); /* Overlay oscuro semitransparente sobre la imagen */
    border-radius: 50%; /* Asegura que el overlay también sea circular */
}

.step-overlay p {
    color: #ffffff; /* Color de texto blanco */
    font-size: 1.8em; /* Tamaño de fuente del texto del paso */
    font-weight: bold; /* Texto en negrita */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra en el texto para mejor lectura */
}

.how-we-work-description {
    max-width: 900px; /* Ancho máximo para el párrafo descriptivo */
    margin: 0 auto; /* Centra el párrafo horizontalmente */
    font-size: 1.1em; /* Tamaño de fuente del párrafo */
    line-height: 1.6; /* Espaciado entre líneas para mejor legibilidad */
    color: #cccccc; /* Un gris más claro para el texto secundario */
}

/* --- SECCIÓN: ¿POR QUÉ SOMOS EL MEJOR SOCIO DE NEGOCIO? --- */
.why-partner {
    background-color: #49244e; /* Fondo púrpura oscuro */
    color: #ffffff; /* Texto blanco */
    padding: 60px 20px; /* Relleno superior/inferior y lateral */
    text-align: center; /* Centra el texto */
}

.why-partner h3 {
    font-size: 2.2em; /* Tamaño de fuente del título */
    margin-bottom: 50px; /* Espacio debajo del título */
    color: #ffffff; /* Color del título */
}

.why-partner h3 .highlight {
    color: #15dd58; /* Color de resaltado (verde) para la parte "mejor socio de negocio?" */
}

.partner-features {
    display: grid; /* Utiliza Grid para organizar las características en una cuadrícula */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Crea columnas que se ajustan automáticamente, mínimo 280px, y se extienden equitativamente */
    gap: 40px; /* Espacio entre los items de características */
    max-width: 1200px; /* Ancho máximo del contenedor de características */
    margin: 0 auto 60px auto; /* Centra el grid y añade un margen inferior */
}

.feature-item {
    background-color: rgba(250, 244, 244, 0.05); /* Fondo ligeramente transparente para cada item (muy sutil) */
    padding: 30px; /* Relleno interno */
    border-radius: 10px; /* Bordes redondeados */
    text-align: center; /* Centra el texto dentro del item */
    display: flex; /* Utiliza Flexbox para organizar el contenido (imagen, h4, p) */
    flex-direction: column; /* Apila el contenido verticalmente */
    align-items: center; /* Centra el contenido horizontalmente */
    transition: transform 0.3s ease, background-color 0.3s ease; /* Transiciones suaves al pasar el mouse */
}

.feature-item:hover {
    transform: translateY(-5px); /* Pequeño efecto de elevación al pasar el mouse */
    background-color: rgba(255, 255, 255, 0.1); /* Ligeramente más opaco al pasar el mouse */
}

.feature-item img {
    width: 60px; /* Tamaño de los iconos de característica */
    height: 60px;
    margin-bottom: 20px; /* Espacio debajo del icono */
}

.feature-item h4 {
    font-size: 1.4em; /* Tamaño de fuente para el título del item */
    margin-bottom: 10px; /* Espacio debajo del título */
    color: #ffffff; /* Color de texto blanco */
}

.feature-item p {
    font-size: 0.95em; /* Tamaño de fuente para la descripción */
    line-height: 1.5; /* Espaciado entre líneas */
    color: #e0e0e0; /* Un gris muy claro para el texto de la descripción */
}

.btn-read-more {
    background-color: #4a2a4f; /* El mismo púrpura oscuro del fondo de la sección */
    color: #ffffff; /* Texto blanco */
    border: 2px solid #15dd58; /* Borde del color de resaltado (verde) */
    padding: 12px 30px; /* Relleno interno */
    font-size: 1.1em; /* Tamaño de fuente */
    border-radius: 25px; /* Botón más redondeado */
    cursor: pointer; /* Cursor de puntero */
    transition: background-color 0.3s ease, border-color 0.3s ease; /* Transiciones suaves al pasar el mouse */
}

.btn-read-more:hover {
    background-color: #5d3a63; /* Ligeramente más claro al pasar el mouse */
    border-color: #e099ff; /* Borde más brillante al pasar el mouse */
}

/* --- MEDIA QUERIES GENERALES (para responsividad) --- */
@media (max-width: 768px) {
    /* Header */
    header {
        flex-direction: column; /* Apila los elementos del encabezado en columna */
        padding: 15px 20px;
    }
    .logo-section {
        margin-bottom: 10px; /* Espacio debajo del logo */
    }
    .menu {
        flex-wrap: wrap; /* Permite que los enlaces del menú se envuelvan */
        justify-content: center; /* Centra los enlaces del menú */
        margin-bottom: 10px;
    }
    .social-icons {
        margin-top: 10px; /* Margen superior para separar de los otros elementos */
    }

    /* Hero Slider */
    .hero {
        height: 450px; /* Reduce la altura del hero en móviles */
        padding: 0 20px;
        align-items: center;
    }
    .hero-slide {
        flex-direction: column; /* Apila el contenido del slide en columna */
        justify-content: center;
        text-align: center;
    }
    .hero-content {
        max-width: 100%; /* Ocupa todo el ancho disponible */
        padding: 0;
    }
    .hero-buttons {
        flex-direction: row; /* Muestra los botones en fila */
        justify-content: center;
        margin-top: 20px;
    }
    .hero-slider-arrow {
        right: 10px; /* Más cerca del borde en móviles */
        font-size: 1.2em; /* Flecha más pequeña */
        padding: 8px 12px;
    }

    /* Features */
    .features {
        flex-direction: column; /* Apila las características en columna */
    }

    /* How We Work */
    .work-process {
        flex-direction: column; /* Apila los pasos en pantallas pequeñas */
        align-items: center; /* Centra los pasos apilados */
    }
    .process-step {
        width: 250px; /* Reduce el tamaño de los círculos */
        height: 250px;
    }

    /* Why Partner */
    .partner-features {
        grid-template-columns: 1fr; /* Una columna en pantallas muy pequeñas */
    }
}

@media (max-width: 480px) {
    /* Ajustes adicionales para pantallas muy pequeñas */
    .how-we-work h2, .why-partner h3 {
        font-size: 2em; /* Reduce aún más el tamaño de los títulos */
    }
    .process-step {
        width: 200px; /* Tamaño aún más pequeño de los círculos */
        height: 200px;
    }
    .step-overlay p {
        font-size: 1.5em; /* Reduce el tamaño del texto dentro de los círculos */
    }
    .feature-item {
        padding: 20px; /* Reduce el padding de los items de característica */
    }
    .feature-item img {
        width: 50px; /* Reduce el tamaño de los iconos de característica */
        height: 50px;
    }
}


/* ************************************************************ */
/* --- ESTILOS PARA LA NUEVA SECCIÓN (MENÚ LATERAL + CONTENIDO DINÁMICO) --- */
/* ************************************************************ */

.dynamic-content-wrapper {
    max-width: 2500px; /* Ancho fijo para emular la proporción de la imagen */
    margin: 40px auto; /* Centrado horizontalmente y con margen superior/inferior */
    background-color: #ffffff; /* Fondo blanco */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Sombra suave para dar profundidad */
    border-radius: 6px; /* Bordes ligeramente redondeados */
    overflow: hidden; /* Asegura que la sombra interna no se vea cortada */
    display: flex; /* Utiliza Flexbox para organizar el encabezado y el contenido principal */
    flex-direction: column; /* Apila el encabezado y el contenido principal verticalmente */
    min-height: 700px; /* Altura mínima para que la sección sea visible y no se colapse */
}

/* Encabezado de la sección dinámica (  para TI.) */
.dynamic-header {
    padding: 25px 40px; /* Relleno interno */
    border-bottom: 1px solid #ededed; /* Borde inferior sutil */
}

.dynamic-header h1 {
    color: #333333; /* Color de texto oscuro */
    font-size: 2.1em; /* Tamaño de fuente */
    margin: 0 0 8px 0; /* Sin margen superior/inferior, pequeño margen inferior */
    font-weight: 400; /* Peso de fuente normal */
}

.dynamic-header h1 .dynamic-highlight {
    color: #008000; /* Verde exacto de la imagen para el texto resaltado "TI." */
    font-weight: 700; /* Más negrita para el texto resaltado */
}

.dynamic-header p {
    font-size: 0.95em; /* Tamaño de fuente ligeramente más pequeño */
    color: #555555; /* Color de texto gris */
    margin: 0; /* Sin márgenes */
    line-height: 1.5; /* Espaciado entre líneas */
}

/* Contenido Principal de la sección dinámica (Sidebar y Main Content) */
.dynamic-main-section {
    display: flex; /* Utiliza Flexbox para el menú lateral y el contenido principal */
    flex-grow: 1; /* Permite que esta sección ocupe todo el espacio vertical disponible */
}

/* Sidebar (Menú lateral de la sección dinámica) */
.dynamic-sidebar {
    width: 280px; /* Ancho fijo del menú lateral */
    padding: 20px 0; /* Relleno superior/inferior, sin relleno lateral */
    background-color: #ffffff; /* Fondo blanco */
    border-right: 1px solid #ededed; /* Borde derecho para separar del contenido */
    position: relative; /* Clave para posicionar el indicador verde flotante */
    flex-shrink: 0; /* Evita que el sidebar se encoja si el contenido principal es muy grande */
}

.dynamic-sidebar-menu {
    list-style: none; /* Elimina los marcadores de lista predeterminados */
    padding: 0; /* Elimina el padding predeterminado de la lista */
    margin: 0; /* Elimina el margen predeterminado de la lista */
}

.dynamic-menu-item {
    padding: 12px 20px 12px 40px; /* Relleno interno: superior, derecho, inferior, izquierdo (para espacio del indicador) */
    cursor: pointer; /* Cambia el cursor a una mano */
    font-size: 0.9em; /* Tamaño de fuente del texto del menú */
    color: #555555; /* Color de texto gris */
    transition: background-color 0.2s, color 0.2s; /* Transición suave al pasar el mouse y al activar */
    position: relative; /* Para que el texto esté sobre el indicador verde */
    z-index: 1; /* Asegura que el texto esté por encima del indicador */
    font-weight: 500; /* Peso de fuente medio */
    display: flex; /* Utiliza Flexbox para alinear el texto (especialmente útil para "Accesorios para telecom") */
    align-items: center; /* Alinea el texto verticalmente al centro */
    min-height: 44px; /* Asegura una altura mínima consistente para todos los ítems del menú, incluso si el texto es corto */
}

.dynamic-menu-item:hover:not(.active-dynamic-menu-item) {
    background-color: #fbfbfb; /* Fondo muy sutilmente gris al pasar el mouse (excepto el activo) */
    color: #222222; /* Color de texto un poco más oscuro al pasar el mouse */
}

.dynamic-menu-item.active-dynamic-menu-item {
    color: #ffffff; /* Texto blanco para el elemento de menú activo */
    font-weight: 700; /* Más negrita para el activo */
}

.dynamic-telecom-item .dynamic-telecom-highlight {
    color: #008000; /* Verde exacto para la palabra "telecom" dentro del ítem */
    font-weight: bold; /* Negrita para "telecom" */
    margin-left: 4px; /* Pequeño espacio a la izquierda de "telecom" */
}

.dynamic-active-indicator {
    position: absolute; /* Posicionamiento absoluto dentro del sidebar */
    left: 0; /* Alineado a la izquierda del sidebar */
    width: calc(100% - 8px); /* Ocupa casi todo el ancho del sidebar, dejando un pequeño margen a la derecha */
    background-color: #006666; /* Verde oscuro exacto del cuadro indicador */
    z-index: 0; /* Coloca el indicador detrás del texto del menú */
    border-top-right-radius: 6px; /* Bordes redondeados en la esquina superior derecha */
    border-bottom-right-radius: 6px; /* Bordes redondeados en la esquina inferior derecha */
    transition: top 0.3s ease-in-out, height 0.3s ease-in-out; /* Transición suave para el movimiento y cambio de tamaño */
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); /* Sombra sutil para el indicador */
}

/* Área de Contenido Principal de la sección dinámica */
.dynamic-main-content {
    flex-grow: 1; /* Permite que el contenido principal ocupe todo el espacio restante horizontalmente */
    padding: 25px 40px; /* Relleno interno */
    /* *** MODIFICACIÓN PARA HACER EL CONTENIDO MÁS VISTOSO *** */
    background-color: #fcfcfc; /* Un fondo ligeramente más oscuro para el contenido */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.05); /* Sombra interior sutil */
    border-radius: 6px; /* Mantener bordes redondeados */
}

/* Contenedor para los bloques de texto/listas dentro del contenido dinámico */
.dynamic-content-block-inner {
    background-color: var(--card-background); /* Usamos la variable para el fondo de tarjeta */
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Sombra ligera para el bloque */
    margin-bottom: 25px; /* Espacio entre bloques si hubiera más de uno */
    border: 1px solid var(--border-color-light); /* Borde suave */
}


.dynamic-content-title {
    color: #333333; /* Color de texto oscuro para los títulos de contenido */
    font-size: 1.8em; /* Tamaño de fuente ligeramente más grande */
    margin: 0 0 20px 0; /* Sin márgenes horizontales, margen inferior */
    font-weight: 700; /* Negrita para los títulos */
    letter-spacing: 0.5px; /* Pequeño espaciado entre letras */
}

.dynamic-content-paragraph {
    line-height: 1.7; /* Espaciado entre líneas para legibilidad */
    margin-bottom: 20px; /* Margen inferior */
    color: #444444; /* Color de texto gris oscuro */
    font-size: 1.05em; /* Ligeramente más grande */
}

.dynamic-main-list {
    list-style: none; /* Elimina los marcadores de lista predeterminados para la lista principal */
    padding-left: 0; /* Elimina el padding izquierdo predeterminado */
    margin-bottom: 25px; /* Margen inferior */
}

.dynamic-list-item {
    margin-bottom: 12px; /* Más espacio entre cada elemento de la lista principal */
    position: relative; /* Para posicionar el pseudo-elemento del punto */
    padding-left: 30px; /* Más espacio a la izquierda para el punto personalizado */
    color: #444444;
}

.dynamic-list-item::before {
    content: "●"; /* Inserta un carácter de círculo sólido como marcador */
    color: #008000; /* Color verde exacto para el punto */
    font-weight: bold; /* Punto en negrita */
    display: inline-block; /* Permite controlar el ancho y la posición */
    width: 1em; /* Ancho del punto */
    margin-left: -1em; /* Mueve el punto a la izquierda para que esté fuera del padding */
    position: absolute; /* Posicionamiento absoluto relativo al .dynamic-list-item */
    left: 0; /* Alineado a la izquierda */
    top: 2px; /* Alineado con la parte superior del texto */
    font-size: 1.2em; /* Punto un poco más grande */
}

.dynamic-list-item-title {
    font-weight: bold; /* Texto del título del elemento de lista en negrita */
    color: #333333; /* Más oscuro para el título */
    display: block; /* Para que el título ocupe su propia línea si es necesario */
    margin-bottom: 5px; /* Espacio entre el título y la descripción de la lista */
    font-size: 1.05em;
}

.dynamic-sub-list {
    list-style: disc; /* Vuelve a los puntos de disco predeterminados para las sublistas */
    padding-left: 25px; /* Sangría de la sublista */
    margin-top: 8px; /* Pequeño margen superior */
    margin-bottom: 8px; /* Pequeño margen inferior */
    color: #555555; /* Color para los ítems de sublista */
}

.dynamic-sub-list-item {
    margin-bottom: 5px; /* Menor espacio entre elementos de sublista */
}

/* El `::before` de `dynamic-list-item` puede interferir, asegúralo. */
.dynamic-sub-list-item::before {
    content: none; /* Asegura que no haya doble punto (si el padre también usara ::before) */
}

.dynamic-question-text {
    color: #008000; /* Verde exacto para el texto de la pregunta */
    font-weight: bold; /* Texto en negrita */
    margin-top: 30px; /* Espacio superior */
    font-size: 1.0em; /* Tamaño de fuente de la pregunta ligeramente más grande */
    text-align: center; /* Centrar la pregunta */
    padding: 10px 0;
    border-top: 1px dashed #ddd; /* Línea de separación */
    border-bottom: 1px dashed #ddd;
    margin-left: auto;
    margin-right: auto;
    max-width: 80%;
}

/* Ocultar elementos de contenido por defecto */
.dynamic-content-block {
    display: none; /* Oculta todos los bloques de contenido por defecto */
}

/* Mostrar el elemento de contenido activo */
.dynamic-content-block.active-dynamic-content {
    display: block; /* Muestra el bloque de contenido que tiene la clase 'active-dynamic-content' */
}

/* =============================== */
/* ESTILOS PARA EL MODAL */
/* =============================== */
.modal {
  display: none; /* Esto asegura que no aparezcan al cargar */
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

.modal-content {
  background-color: white;
  margin: 10% auto;
  padding: 30px;
  border-radius: 10px;
  max-width: 500px;
  position: relative;
}


.close-btn {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  font-weight: bold;
  color: #333;
  cursor: pointer;
}

.close-btn:hover {
  color: #000;
}

.modal-content form {
  display: flex;
  flex-direction: column;
}

.modal-content form input,
.modal-content form button {
  margin: 10px 0;
  padding: 10px;
  font-size: 1rem;
}


/* Media Query para la sección dinámica en pantallas pequeñas */
@media (max-width: 768px) {
    .dynamic-content-wrapper {
        margin: 20px auto; /* Reduce el margen en pantallas pequeñas */
        min-height: auto; /* Permite que la altura se ajuste al contenido */
    }
    .dynamic-main-section {
        flex-direction: column; /* Apila el menú lateral y el contenido principal verticalmente */
    }
    .dynamic-sidebar {
        width: 100%; /* El sidebar ocupa todo el ancho */
        border-right: none; /* Elimina el borde derecho */
        border-bottom: 1px solid #ededed; /* Añade un borde inferior */
        padding-bottom: 10px; /* Ajuste del padding inferior */
    }
    .dynamic-sidebar-menu {
        display: flex; /* Utiliza Flexbox para los elementos del menú */
        flex-wrap: wrap; /* Permite que los ítems del menú se envuelvan a la siguiente línea */
        justify-content: center; /* Centra los ítems del menú horizontalmente */
        gap: 5px; /* Pequeño espacio entre ítems */
    }
    .dynamic-menu-item {
        padding: 8px 15px; /* Reduce el padding para los ítems del menú en móviles */
        font-size: 0.85em; /* Reduce el tamaño de fuente */
        min-height: auto; /* Permite que la altura se ajuste al contenido */
        border-radius: 4px; /* Pequeño redondeado para los items del menú */
    }
    .dynamic-active-indicator {
        display: none; /* Oculta el indicador verde en móvil porque su posicionamiento se complica con 'flex-wrap' */
    }
    .dynamic-main-content {
        padding: 20px 25px; /* Ajusta el padding del contenido principal */
    }
    .dynamic-content-title {
        font-size: 1.5em; /* Reduce el tamaño del título de contenido */
    }
    .dynamic-content-paragraph,
    .dynamic-main-list,
    .dynamic-question-text {
        font-size: 0.9em; /* Reduce el tamaño de fuente para párrafos y listas */
    }
}
/* --- Estilos para el Contenido de Capacitación (Calendario) --- */
.calendar-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Columnas responsivas */
    gap: 20px; /* Espacio entre los eventos del calendario */
    margin-top: 20px;
}

.calendar-event-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.calendar-event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
}

.event-date-box {
    background-color: #006666; /* Verde oscuro */
    color: #fff;
    padding: 15px;
    text-align: center;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
}

.event-date-box .day {
    display: block;
    font-size: 2em; /* Día más grande */
}
.event-date-box .month-year {
    display: block;
    font-size: 0.7em;
    text-transform: uppercase;
}

.event-details {
    padding: 20px;
    flex-grow: 1; /* Permite que ocupe el espacio restante */
}

.event-details h4 {
    font-size: 1.3em;
    color: #333;
    margin-bottom: 10px;
    font-weight: 600;
}

.event-details p {
    font-size: 0.95em;
    color: #555;
    line-height: 1.5;
    margin-bottom: 15px;
}

.event-location, .event-time {
    font-size: 0.9em;
    color: #777;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.event-location::before {
    content: "📍"; /* Icono de ubicación */
    margin-right: 5px;
}
.event-time::before {
    content: "⏰"; /* Icono de reloj */
    margin-right: 5px;
}

.event-register-btn {
    display: block;
    width: calc(100% - 40px); /* Ajustar al padding */
    margin: 0 20px 20px; /* Centrar y darle margen inferior */
    padding: 10px 15px;
    background-color: #008000; /* Verde más brillante para el botón */
    color: #fff;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    font-weight: 600;
}

.event-register-btn:hover {
    background-color: #00a000;
}

/* Media Query para el calendario en móviles */
@media (max-width: 576px) {
    .calendar-event-card {
        width: 100%;
    }
    .event-date-box {
        font-size: 1.2em;
    }
    .event-date-box .day {
        font-size: 1.8em;
    }
}

/* --- ESTILOS ADICIONALES PARA IMÁGENES EN CONTENIDO DINÁMICO --- */
.image-wrapper {
    text-align: center; /* Centra la imagen dentro del contenedor */
    margin-bottom: 25px; /* Espacio debajo de la imagen */
}

.content-image {
    max-width: 100%; /* Asegura que la imagen no se desborde */
    height: auto; /* Mantiene la relación de aspecto */
    border-radius: 8px; /* Bordes redondeados para la imagen */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); /* Sombra sutil para la imagen */
    border: 1px solid var(--border-color-light); /* Borde suave */
}

/* Puedes añadir un estilo para el logo de Fujitsu si quieres algo especial */
.fujitsu-logo {
    color: #000000; /* Puedes definir un color específico para el logo si es diferente al texto */
    font-weight: 700; /* Asegura que la palabra "Fujitsu" sea más prominente */
    /* text-shadow: 1px 1px 2px rgba(0,0,0,0.1); */ /* Opcional: una pequeña sombra de texto */
}

/* Asegúrate de que el body y los elementos generales tengan la fuente correcta */
body {
    font-family: 'Montserrat Light', sans-serif;
    font-weight: 300;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6,
.dynamic-content-title,
.team-title,
.footer-column-title,
.modal-content h2,
.event-date-box,
.event-details h4,
.hero-text h1,
.hero-text h2,
.hero-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700; /* O el peso que desees para títulos importantes */
}

p, li, a, span, button, input, label {
    font-family: 'Montserrat Light', sans-serif;
    font-weight: 300;
}

/* Sobrescribir específicamente donde necesites un peso diferente para Montserrat (no light) */
.nav-list a, /* Links de navegación */
.hero-buttons button, /* Botones del hero */
.dynamic-menu-item, /* Items del menú lateral */
.dynamic-menu-item.active-dynamic-menu-item,
.dynamic-telecom-item .dynamic-telecom-highlight,
.dynamic-list-item-title, /* Títulos de ítems de lista */
.dynamic-question-text, /* Pregunta al final de la sección */
.view-all-button,
.member-name,
.member-title,
.subscribe-form button,
.event-register-btn,
strong { /* Para cualquier texto envuelto en <strong> */
    font-family: 'Montserrat', sans-serif; /* Usamos Montserrat normal */
    font-weight: 600; /* Semibold para elementos de acción o prominentes, o 700 para bold */
}


/* ********************************************** */
/* ESTILOS PARA LA SECCIÓN: El mejor equipo (MODIFICADO para layout en paralelo) */
/* ********************************************** */
.our-team-section {
    width: 100%;
    max-width: 1500px;
    margin: 60px auto;
    padding: 20px;
}

.team-content-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.team-header-left {
    flex: 0 0 auto;
    width: 250px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-top: 20px;
}

.team-title {
    font-size: 3em;
    font-weight: 700;
    color: var(--color-secundario);
    margin: 0 0 10px;
    line-height: 1.1;
}

.team-highlight {
    color: var(--color-oscuro);
}

.view-all-button {
    background-color: transparent;
    color: var(--color-principal);
    border: 2px solid var(--color-principal);
    padding: 10px 25px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: 0.3s ease;
    white-space: nowrap;
    display: inline-block;
}

.view-all-button:hover {
    background-color: var(--color-principal);
    color: #fff;
}

.team-members-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    justify-content: flex-start;
    width: 100%;
}

.team-member-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.team-member-card:hover {
    transform: translateY(-5px);
}

.member-photo {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 15px;
    border: 3px solid var(--color-principal);
}

.member-name {
    font-size: 1.3em;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.member-title {
    font-size: 0.9em;
    color: #666;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.member-contact,
.member-email {
    font-size: 0.85em;
    color: #444;
    margin-bottom: 5px;
}

.member-email {
    color: var(--color-principal);
    text-decoration: none;
    transition: color 0.3s ease;
}

.member-email:hover {
    text-decoration: underline;
}

/* Media Queries para responsividad */
@media (max-width: 992px) { /* Ajuste el breakpoint si es necesario */
    .team-content-wrapper {
        flex-direction: column; /* Apila las columnas verticalmente */
        align-items: center; /* Centra el contenido en pantallas más pequeñas */
    }

    .team-header-left {
        width: 100%; /* Ocupa todo el ancho disponible */
        align-items: center; /* Centra el título y el botón */
        margin-bottom: 30px; /* Espacio entre el texto/botón y la cuadrícula */
    }

    .team-title {
        font-size: 2.8em;
    }

    .view-all-button {
        width: 60%; /* Ajusta el ancho del botón */
        max-width: 250px;
        text-align: center;
    }

    .team-members-grid {
        width: 100%; /* La cuadrícula ocupa todo el ancho */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        justify-content: center; /* Centra las tarjetas si no llenan todo el ancho */
    }
}

@media (max-width: 576px) {
    .team-title {
        font-size: 2.2em;
    }

    .team-members-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Más pequeñas para móviles */
        gap: 15px;
    }

    .member-photo {
        width: 100px;
        height: 100px;
    }

    .view-all-button {
        width: 100%;
        max-width: none;
    }
}



/* ********************************************** */
/* ESTILOS PARA EL FOOTER */
/* ********************************************** */
.main-footer {
    background-color: #000; /* Fondo negro */
    color: #fff; /* Texto blanco */
    font-family: 'Poppins', sans-serif; /* Asegúrate de que esta fuente esté importada */
    padding: 40px 20px 20px; /* Espaciado interno */
    box-sizing: border-box;
    width: 100%;
}

.footer-content-wrapper {
    max-width: 1500px; /* Ancho máximo para el contenido del footer */
    margin: 0 auto; /* Centra el contenido */
    display: flex; /* Habilita Flexbox para las columnas */
    flex-wrap: wrap; /* Permite que las columnas se envuelvan en pantallas pequeñas */
    justify-content: space-between; /* Distribuye el espacio entre las columnas */
    gap: 30px; /* Espacio entre las columnas */
    padding-bottom: 40px; /* Espacio antes de la línea inferior */
    border-bottom: 1px solid #333; /* Línea divisoria sutil */
    margin-bottom: 20px; /* Espacio después de la línea divisoria */
}

.footer-column {
    flex: 1; /* Permite que las columnas crezcan y ocupen espacio */
    min-width: 180px; /* Ancho mínimo para cada columna antes de envolverse */
    padding-right: 20px; /* Espacio interno para el contenido de la columna */
    box-sizing: border-box;
}

.footer-column:last-child {
    padding-right: 0;
}

.footer-column-title {
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 15px;
    color: #fff;
    text-transform: uppercase;
}

.footer-column p,
.footer-column li {
    font-size: 0.9em;
    line-height: 1.6;
    margin-bottom: 5px;
    color: #ccc; /* Color de texto más claro para el contenido */
}

.footer-column ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0;
    margin: 0;
}

.footer-column li {
    padding-left: 15px; /* Espacio para simular la viñeta */
    position: relative;
}

.footer-column li::before {
    content: "•"; /* Viñeta de círculo */
    color: #006666; /* Color verde para las viñetas */
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

/* Estilos específicos para la columna de Suscripción */
.footer-subscribe {
    min-width: 250px; /* Un poco más ancha para el formulario */
    text-align: right; /* Alinea el contenido a la derecha */
}

.footer-logo img {
    max-width: 150px; /* Ajusta el tamaño del logo */
    height: auto;
    margin-bottom: 20px;
}

.footer-subscribe p {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: #fff;
}

.subscribe-form {
    display: flex;
    justify-content: flex-end; /* Alinea el formulario a la derecha */
    gap: 10px;
    flex-wrap: wrap; /* Permite que los elementos del formulario se envuelvan */
}

.subscribe-form input[type="email"] {
    flex-grow: 1; /* Permite que el input ocupe el espacio disponible */
    padding: 10px 15px;
    border: none;
    border-radius: 5px;
    background-color: #333; /* Fondo oscuro para el input */
    color: #fff;
    font-size: 0.9em;
    max-width: 200px; /* Ancho máximo para el input */
}

.subscribe-form input[type="email"]::placeholder {
    color: #aaa;
}

.subscribe-form button {
    background-color: #006666; /* Botón verde */
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.9em;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

.subscribe-form button:hover {
    background-color: #008888;
}

/* Estilos para los iconos sociales */
.social-icons {
    margin-top: 20px;
    display: flex; /* Para alinear los iconos */
    justify-content: flex-start; /* Alinea los iconos a la izquierda en su columna */
    gap: 15px; /* Espacio entre los iconos */
}

.social-icons a {
    color: #fff; /* Color blanco para los iconos */
    font-size: 1.3em;
    transition: color 0.3s ease;
}

.social-icons a:hover {
    color: #006666; /* Cambio a verde al pasar el ratón */
}

/* Sección inferior del footer */
.footer-bottom {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    font-size: 0.8em;
    color: #aaa;
    padding-top: 10px;
}

/* Media Queries para Responsividad */
@media (max-width: 992px) {
    .footer-content-wrapper {
        flex-direction: column; /* Apila las columnas en pantallas medianas */
        align-items: center; /* Centra las columnas */
        text-align: center; /* Centra el texto dentro de las columnas */
        gap: 40px; /* Aumenta el espacio entre columnas apiladas */
    }

    .footer-column {
        min-width: unset; /* Reinicia el min-width */
        width: 100%; /* Ocupa todo el ancho */
        padding-right: 0;
    }

    .footer-column ul {
        display: flex; /* Para centrar los ítems de la lista */
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px; /* Espacio entre ítems de lista cuando se envuelven */
    }

    .footer-column li {
        padding-left: 0; /* Elimina padding para centrado */
    }
    .footer-column li::before {
        display: none; /* Oculta las viñetas si no son deseables en el centrado */
    }

    .footer-subscribe {
        text-align: center; /* Centra la columna de suscripción */
    }

    .subscribe-form {
        justify-content: center; /* Centra el formulario */
    }

    .social-icons {
        justify-content: center; /* Centra los iconos sociales */
    }
}

@media (max-width: 576px) {
    .main-footer {
        padding: 30px 15px 15px;
    }

    .footer-column-title {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .footer-column p,
    .footer-column li {
        font-size: 0.85em;
    }

    .subscribe-form input[type="email"],
    .subscribe-form button {
        width: 100%; /* Botón e input a ancho completo en móviles pequeños */
        max-width: none;
    }

    .subscribe-form {
        flex-direction: column; /* Input y botón apilados */
    }
}

/* --- Estilos para el Modal de Registro --- */

/* Contenedor principal del modal */
.modal {
    display: none; /* Oculto por defecto */
    position: fixed; /* Posición fija en la pantalla */
    z-index: 1000; /* Asegura que esté por encima de otros elementos */
    left: 0;
    top: 0;
    width: 100%; /* Cubre todo el ancho */
    height: 100%; /* Cubre toda la altura */
    overflow: auto; /* Permite scroll si el contenido es muy largo */
    background-color: rgba(0,0,0,0.7); /* Fondo oscuro semitransparente */
    display: flex; /* Usar flexbox para centrar contenido */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
}

/* Contenido del modal (la caja blanca con el formulario) */
.modal-content {
    background-color: #fefefe;
    margin: auto; /* Para centrar el modal */
    padding: 30px;
    border: 1px solid #888;
    width: 90%; /* Ancho del contenido */
    max-width: 500px; /* Ancho máximo para que no sea demasiado grande en pantallas grandes */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0,0,0,0.3); /* Sombra para efecto de profundidad */
    position: relative; /* Para posicionar el botón de cerrar */
}

/* Botón de cerrar */
.close-button {
    color: #aaa;
    float: right; /* Flota a la derecha */
    font-size: 28px;
    font-weight: bold;
    position: absolute; /* Posición absoluta dentro del modal-content */
    top: 10px;
    right: 20px;
    cursor: pointer;
}

.close-button:hover,
.close-button:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

/* Estilos para el formulario dentro del modal */
.modal-content h2 {
    text-align: center;
    color: #333;
    margin-bottom: 25px;
    font-size: 2em;
}

.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group input[type="password"] {
    width: calc(100% - 20px); /* Ancho completo menos padding */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box; /* Incluye padding y borde en el ancho total */
    font-size: 1em;
}

.submit-button {
    background-color: #007bff; /* Color azul para el botón de enviar */
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    width: 100%;
    transition: background-color 0.3s ease;
}

.submit-button:hover {
    background-color: #0056b3; /* Tono más oscuro al pasar el mouse */
}

/* Ocultar el modal por defecto */
#registerModal {
    display: none; 
}

/* (Tu CSS existente para .modal, .modal-content, .close-button va aquí. Si no lo tienes del paso anterior, cópialo.) */

/* --- Estilos Adicionales para el Modal de Video --- */
.video-modal-content {
    background-color: #000; /* Fondo oscuro para el modal de video */
    padding: 0;
    max-width: 900px; /* Ancho máximo para el reproductor de video */
    width: 95%; /* Ajuste para pantallas más pequeñas */
}

.video-container {
    position: relative;
    padding-bottom: 56.25%; /* Relación de aspecto 16:9 (altura / ancho = 9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-close-button {
    color: white; /* Color blanco para la 'x' en el modal oscuro */
    right: 15px; /* Ajuste para que no se superponga */
    top: 5px;
    font-size: 35px;
    text-shadow: 0 0 5px rgba(0,0,0,0.5); /* Sombra para mejor visibilidad */
}

.video-close-button:hover,
.video-close-button:focus {
    color: lightgray;
}

/* --- Estilos Adicionales para el Modal de Ficha Técnica --- */
.datasheet-modal-content {
    max-width: 700px; /* Ancho deseado para las fichas técnicas */
    padding: 25px;
    text-align: left;
}

.datasheet-modal-content h3 {
    text-align: center;
    margin-bottom: 20px;
    color: #007bff; /* Un color que combine con tu branding */
    font-size: 2.2em;
}

.datasheet-modal-content p, .datasheet-modal-content ul {
    color: #444;
    line-height: 1.6;
    margin-bottom: 15px;
}

.datasheet-modal-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 15px auto;
    border-radius: 5px;
}

.datasheet-close-button {
    color: #aaa;
    right: 20px;
    top: 10px;
}

.datasheet-close-button:hover,
.datasheet-close-button:focus {
    color: #000;
}

/* Ocultar los nuevos modales por defecto */
#videoModal, #datasheetModal {
    display: none;
}

body {
    overflow-x: hidden; /* Previene el scroll horizontal no deseado */
    /* Asegúrate de que font-size base sea adecuado para móviles y luego ajusta en media queries */
    font-size: 16px; /* Tamaño de fuente base para mayor legibilidad en cualquier dispositivo */
}

/* Para un modelo de caja más predecible en todos los elementos */
*, *::before, *::after {
    box-sizing: border-box;
}

/* --- Media Queries para Teléfonos (Small devices - landscape phones, 576px and down) --- */
@media (max-width: 576px) {
    /* Header Principal */
    .main-header {
        padding: 15px var(--padding-mobile); /* Ajusta padding para móviles */
        flex-direction: column; /* Apila logo y nav */
        align-items: center; /* Centra los ítems apilados */
        gap: 15px; /* Espacio entre logo y nav */
    }

    .main-nav {
        display: none; /* Oculta el nav por defecto en móviles (se manejará con un menú hamburguesa si lo implementas) */
    }

    .header-buttons {
        flex-direction: column; /* Apila los botones */
        gap: 10px;
        width: 100%; /* Permite que los botones ocupen todo el ancho */
    }

    .header-buttons .btn {
        width: 100%; /* Botones de ancho completo */
        padding: 10px; /* Ajusta padding del botón */
        font-size: 0.9em;
    }

    /* Hero Section */
    .hero-section {
        padding: 60px var(--padding-mobile); /* Menos padding en móviles */
        background-position: center 20%; /* Ajusta la posición de la imagen de fondo */
        background-size: cover; /* Asegura que la imagen cubra bien */
        text-align: center; /* Centra el texto */
    }

    .hero-text h1 {
        font-size: 2em; /* Tamaño de fuente más pequeño para títulos */
        margin-bottom: 10px;
    }

    .hero-text p {
        font-size: 0.9em;
        margin-bottom: 20px;
    }

    .hero-buttons {
        flex-direction: column; /* Apila los botones del hero */
        gap: 10px;
    }

    .hero-buttons .btn {
        width: 90%; /* Ajusta el ancho de los botones del hero */
    }

    /* Icon Bar (si aplica, ajusta su visibilidad o tamaño) */
    .icon-bar {
        display: none; /* Podrías ocultarla en móviles o hacerla más pequeña */
    }

    /* Sección de Contenido Dinámico (ya lo tenías, pero lo consolido) */
    .dynamic-content-wrapper {
        margin: 20px var(--padding-mobile); /* Reduce el margen en pantallas pequeñas */
        min-height: auto; /* Permite que la altura se ajuste al contenido */
    }

    .dynamic-main-section {
        flex-direction: column; /* Apila el menú lateral y el contenido principal verticalmente */
    }

    .dynamic-sidebar {
        width: 100%; /* El sidebar ocupa todo el ancho */
        border-right: none; /* Elimina el borde derecho */
        border-bottom: 1px solid #ededed; /* Añade un borde inferior */
        padding-bottom: 10px; /* Ajuste del padding inferior */
    }

    .dynamic-sidebar-menu {
        display: flex; /* Utiliza Flexbox para los elementos del menú */
        flex-wrap: wrap; /* Permite que los ítems del menú se envuelvan a la siguiente línea */
        justify-content: center; /* Centra los ítems del menú horizontalmente */
        gap: 5px; /* Pequeño espacio entre ítems */
    }

    .dynamic-menu-item {
        padding: 8px 15px; /* Reduce el padding para los ítems del menú en móviles */
        font-size: 0.85em; /* Reduce el tamaño de fuente */
        min-height: auto; /* Permite que la altura se ajuste al contenido */
        border-radius: 4px; /* Pequeño redondeado para los items del menú */
    }

    .dynamic-active-indicator {
        display: none; /* Oculta el indicador verde en móvil porque su posicionamiento se complica con 'flex-wrap' */
    }

    .dynamic-main-content {
        padding: 20px var(--padding-mobile); /* Ajusta el padding del contenido principal */
    }

    .dynamic-content-title {
        font-size: 1.5em; /* Reduce el tamaño del título de contenido */
    }

    .dynamic-content-paragraph,
    .dynamic-main-list,
    .dynamic-question-text {
        font-size: 0.9em; /* Reduce el tamaño de fuente para párrafos y listas */
    }

    /* Team Section */
    .team-grid {
        grid-template-columns: 1fr; /* Una columna por miembro en móviles */
        gap: 20px;
    }

    .member-card {
        padding: 20px;
    }

    .member-photo {
        width: 100px;
        height: 100px;
    }

    /* Footer */
    .main-footer {
        padding: 30px var(--padding-mobile) 15px; /* Ajusta padding */
    }

    .footer-column-title {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .footer-column p,
    .footer-column li {
        font-size: 0.85em;
    }

    .subscribe-form input[type="email"],
    .subscribe-form button {
        width: 100%; /* Botón e input a ancho completo en móviles pequeños */
        max-width: none;
    }

    .subscribe-form {
        flex-direction: column; /* Input y botón apilados */
        gap: 10px; /* Espacio entre input y botón */
    }

    /* Modales (ya bastante responsivos, solo ligeros ajustes) */
    .modal-content {
        width: 95%; /* Un poco más de ancho en móviles */
        padding: 20px;
    }

    .close-button {
        font-size: 24px; /* Botón de cierre más pequeño */
        top: 8px;
        right: 15px;
    }

    .modal-content h2 {
        font-size: 1.5em;
        margin-bottom: 15px;
    }

    .form-group input {
        font-size: 0.95em;
        padding: 8px;
    }

    .submit-button {
        padding: 10px 15px;
        font-size: 1em;
    }

    /* Calendario de Capacitación (para móviles) */
    .calendar-event-card {
        flex-direction: column; /* Apila fecha y detalles */
    }

    .event-date-box {
        border-radius: 8px 8px 0 0; /* Ajusta bordes para columna */
        padding: 10px;
        font-size: 1.2em;
    }

    .event-date-box .day {
        font-size: 1.8em;
    }

    .event-details {
        padding: 15px;
    }

    .event-register-btn {
        width: calc(100% - 30px);
        margin: 0 15px 15px;
    }
}

/* --- Media Queries para Tablets (Medium devices - tablets, 768px and up, hasta 992px) --- */
@media (min-width: 577px) and (max-width: 992px) {
    /* Header Principal */
    .main-header {
        padding: 20px var(--padding-tablet);
    }

    .main-nav {
        display: flex; /* Asegura que el nav esté visible */
    }

    .nav-list {
        gap: 20px; /* Espacio entre los ítems del menú */
    }

    .nav-list a {
        font-size: 0.95em;
    }

    .header-buttons .btn {
        padding: 8px 15px;
        font-size: 0.9em;
    }

    /* Hero Section */
    .hero-section {
        padding: 80px var(--padding-tablet);
    }

    .hero-text h1 {
        font-size: 2.8em;
    }

    .hero-text p {
        font-size: 1em;
    }

    /* Sección de Contenido Dinámico (ya lo tenías, pero lo consolido) */
    .dynamic-content-wrapper {
        margin: 30px var(--padding-tablet);
    }

    .dynamic-main-section {
        flex-direction: column; /* Apila el menú lateral y el contenido principal verticalmente */
    }

    .dynamic-sidebar {
        width: 100%; /* El sidebar ocupa todo el ancho */
        border-right: none; /* Elimina el borde derecho */
        border-bottom: 1px solid #ededed; /* Añade un borde inferior */
    }

    .dynamic-sidebar-menu {
        justify-content: center; /* Centra los ítems del menú horizontalmente */
        gap: 15px;
    }

    .dynamic-menu-item {
        padding: 10px 20px;
        font-size: 0.9em;
    }

    .dynamic-active-indicator {
        display: none; /* Podrías probar a mostrarlo, pero la complejidad aumenta con el wrap */
    }

    .dynamic-main-content {
        padding: 25px var(--padding-tablet);
    }

    .dynamic-content-title {
        font-size: 1.8em;
    }

    /* Team Section */
    .team-grid {
        grid-template-columns: repeat(2, 1fr); /* Dos columnas en tablets */
        gap: 30px;
    }

    /* Footer (ya lo tenías, lo incluyo para que quede claro) */
    .footer-content-wrapper {
        flex-direction: column; /* Apila las columnas en pantallas medianas */
        align-items: center; /* Centra las columnas */
        text-align: center; /* Centra el texto dentro de las columnas */
        gap: 40px; /* Aumenta el espacio entre columnas apiladas */
    }

    .footer-column {
        min-width: unset; /* Reinicia el min-width */
        width: 100%; /* Ocupa todo el ancho */
        padding-right: 0;
    }

    .footer-column ul {
        display: flex; /* Para centrar los ítems de la lista */
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 20px; /* Espacio entre ítems de lista cuando se envuelven */
    }

    .footer-column li {
        padding-left: 0; /* Elimina padding para centrado */
    }

    .footer-column li::before {
        display: none; /* Oculta las viñetas si no son deseables en el centrado */
    }

    .footer-subscribe {
        text-align: center; /* Centra la columna de suscripción */
    }

    .subscribe-form {
        justify-content: center; /* Centra el formulario */
    }

    .social-icons {
        justify-content: center; /* Centra los iconos sociales */
    }

    /* Calendario de Capacitación */
    .calendar-container {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* 1 o 2 columnas */
    }
}