/* ==========================================================================
   Importación de Fuentes
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
/* ==========================================================================
   Variables y Reset Básico
   ========================================================================== */
:root {
    --color-blanco: #FFFFFF;
    --color-texto-menu: #363333;
    --color-azul-utumek: #6588C8; /* Ajusta a tu azul exacto */
    --color-azul-truncado: #3665BB;
    --color-dark: #363333;
    --color-azul-oscuro: #0B2658; /* Ajusta al código HEX exacto de la maqueta */
    --color-amarillo: #FFC800; /* Ajusta al amarillo de tu logo/maqueta */
    --color-gris-claro: #C3C5D2; /* Ajusta a tu gris/celeste exacto */
    --ancho-menu: 260px;
    --ancho-col-central: 400px;

    /* Variable para la alineación vertical (Margen superior menú + Alto del logo)
       Ajusta este valor según el alto real en píxeles de tu archivo utumek_logo.png */
    --alineacion-titulos: 120px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    /* La fuente base para párrafos y contenidos generales será Open Sans */
    font-family: 'Open Sans', sans-serif;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    display: flex;
    background-color: var(--color-blanco);
}

/* Tipografía para Encabezados */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Montserrat', sans-serif;
}

/* ==========================================================================
   Columna Izquierda: Menú
   ========================================================================== */
.menu-col {
    flex: 0 0 var(--ancho-menu);
    height: 100%;
    background-color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    /* Cambiamos space-between por flex-start para controlar los márgenes exactos */
    justify-content: flex-start;
    padding: 40px 30px; /* 40px es la distancia desde el techo hasta el logo */
    z-index: 10;
}

.menu-top .logo img.logo-desktop {
    max-width: 200px;
    height: auto;
    display: block;
}

.menu-top .logo img.logo-mobile {
    display: none; /* Oculto en versión escritorio */
}

.menu-middle {
    flex-grow: 1; /* Esto empuja los iconos sociales hacia abajo */
}

.nav-menu {
    list-style: none;
    margin-top: 38px; /* Separación exacta de 38px que pediste desde el logo */
}

.nav-menu li { margin-bottom: 15px; }

.nav-menu a {
    /* Aplicamos Montserrat al menú */
    font-family: 'Montserrat', sans-serif;
    text-decoration: none;
    color: var(--color-texto-menu);
    font-size: 18px;
    font-weight: 700; /* Negrita */
    letter-spacing: 0.5px;
    transition: color 0.3s ease;
}

.nav-menu a:hover  {
    color: var(--color-amarillo);
}

.nav-menu a.active {
    color: var(--color-azul-truncado);
}

.menu-bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    padding-bottom: 20px;
}

.social-icons a {
    margin: 0 10px 10px 0;
    display: inline-block;
    color: var(--color-dark); /* Color base de los iconos */
    font-size: 20px; /* Tamaño de los iconos */
    transition: color 0.3s ease, transform 0.3s ease;
}

/* Efecto hover opcional para que se pinten de azul y suban un poquito al pasar el mouse */
.social-icons a:hover {
    color: var(--color-azul-utumek);
    transform: translateY(-2px);
}
/* ==========================================================================
   Pie del Menú (Copyright, SEO y Legales)
   ========================================================================== */
.copyright {
    font-size: 12px;
    color: var(--color-dark);
    line-height: 1.4;
    text-align: center;
    border-top: 1px solid var(--color-dark);
    padding-top: 15px;
    width: 100%;
}

.copyright p {
    margin-bottom: 8px;
}

/* El texto de palabras clave, más sutil */
.copyright .seo-text {
    font-size: 10px;
    color: #666666; /* Un gris un poco más claro */
    font-style: italic;
    margin-bottom: 12px;
}

/* Los enlaces inferiores */
.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    font-size: 10px;
}

.footer-links a {
    color: var(--color-texto-menu);
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--color-amarillo);
}

.footer-links .separador {
    color: #cccccc;
}
/* ==========================================================================
   Contenedor Principal
   ========================================================================== */
.main-content {
    flex: 1;
    display: flex;
    height: 100%;
    position: relative;
}

/* ==========================================================================
   Columna Central: Contenido
   ========================================================================== */
.content-col {
    flex: 0 0 var(--ancho-col-central);
    height: 100%;
    display: flex;
    flex-direction: column;

    /* Cambiamos center por flex-start para que el contenido empiece arriba */
    justify-content: flex-start;

    /* Usamos la variable para asegurar la coincidencia exacta con el logo */
    padding-top: var(--alineacion-titulos);
    padding-bottom: 40px;
    position: relative;
    z-index: 5;
}

.home-page .home-content {
    background-color: var(--color-azul-utumek);
    color: var(--color-blanco);
    padding-left: 5rem;
    overflow: visible;
}

/* ==========================================================================
   El Slogan en SVG y Texto
   ========================================================================== */
.slogan-container {
    width: 100%;
    position: relative;
    margin: 10em 0 2em 0;
}

.slogan-img {
    display: block;
    width: 214%;
    max-width: none;
    position: relative;
    left: 5rem;
    top: 0;
}

.texto-bajada {
    padding: 0 40px 0 0;
}

.texto-bajada p {
    text-align: right;
    font-size: 22px;
    line-height: 1.6;
    font-weight: 300; /* Open Sans light */
}

/* ==========================================================================
   Columna Derecha: Imagen de Portada
   ========================================================================== */
.image-col {
    flex: 1;
    height: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.image-col img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   Página: Sobre Nosotros
   ========================================================================== */

/* La home usa el valor por defecto del :root (400px) */

/* Redefinimos la variable para la página Nosotros */
.nosotros-page {
    --ancho-col-central: 600px;
}

.nosotros-page .nosotros-content {
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    padding-left: 30px;
    padding-right: 30px;
    overflow-y: auto; /* Activamos el scroll vertical si el contenido es muy largo */
    overflow-x: hidden;
}

/* Título y texto introductorio */
.nosotros-content h1 {
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

.nosotros-content .intro-texto {
    font-size: 22px;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 50px;
    max-width: 90%;
}

/* Grilla de 4 puntos (CSS Grid) */
.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas del mismo ancho */
    gap: 40px 30px; /* Separación vertical y horizontal */
    padding-bottom: 40px;
}

.feature-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.feature-icon {
    font-size: 28px; /* Controla el tamaño del icono */
    color: var(--color-blanco); /* Toma el color de tu variable */
    margin-bottom: 15px;
    display: inline-block;
}

.feature-item h3 {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 10px;
    line-height: 1.3;
}

.feature-item p {
    font-size: 14px;
    line-height: 1.5;
    font-weight: 300;
    color: var(--color-blanco);
}

/* ==========================================================================
   Página: Segmentos por consumo (ANCHO COMPLETO)
   ========================================================================== */

/* 1. Modificamos el comportamiento de la columna para que ocupe todo */
.segmentos-page .content-col {
    background-color: var(--color-azul-oscuro);
    color: var(--color-blanco);
    flex: 1; /* Ocupa todo el espacio restante */
    max-width: none; /* Anula los 400px de la variable base */
    padding-left: 5rem;
    padding-right: 5rem; /* Margen derecho simétrico al izquierdo */
    overflow-y: auto;
    overflow-x: hidden;
}

/* ¡FALTABA EL ESTILO DEL TÍTULO PRINCIPAL H1! */
.segmentos-content h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* 2. La Grilla de Tarjetas */
.segmentos-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 columnas */
    gap: 40px 50px; /* Separación vertical y horizontal */
    padding-bottom: 60px;
}

.segmento-item {
    display: flex;
    flex-direction: column;
}

/* 3. La Caja con Foto y Filtro Azul */
.segmento-foto {
    position: relative;
    width: 100%;
    min-height: 280px; /* Alto mínimo de la foto */
    background-size: cover;
    background-position: center;
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 15px;
}

.overlay-azul {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    /* Comentado porque ya traes las fotos filtradas */
    /* background-color: rgba(11, 38, 88, 0.75);
    z-index: 1; */
}

.foto-contenido {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 2;
    padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Arriba el título, abajo la lista */
}

/* 4. Textos dentro de la Foto */
.foto-top h2 {
    /* APLICAMOS BEBAS NEUE COMO EN TU DISEÑO */
    font-family: "Bebas Neue", sans-serif;
    font-size: clamp(60px, 5vw, 80px);
    font-weight: 400;
    line-height: 75%;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.foto-top .rango {
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    font-weight: 700;
}

.foto-bottom {
    align-self: flex-end; /* Empuja la lista a la derecha */
    text-align: right;
    max-width: 80%; /* Para que no toque el borde izquierdo si el texto es largo */
}

.foto-bottom ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.foto-bottom li {
    font-size: 14px;
    font-weight: 400;
    line-height: 130%;
    margin-bottom: 3px;
}

.foto-bottom li strong {
    font-weight: 800;
    font-size: 14px;
    line-height: 140%;
}

/* 5. El enlace Amarillo debajo de la Foto */
.link-portafolio {
    color: var(--color-amarillo);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.link-portafolio:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Página: Sistemas
   ========================================================================== */

/* Ajustamos el ancho de la columna central solo para esta página */
.sistemas-page {
    --ancho-col-central: 840px;
}

.sistemas-page .sistemas-content {
    background-color: var(--color-gris-claro);
    color: var(--color-texto-menu);
    padding-left: 4rem; /* Un poco menos de padding que otras para dar espacio a la tarjeta */
    padding-right: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Título de la sección */
.sistemas-content h1 {
    font-size: 38px;
    font-weight: 700;
    color: var(--color-azul-oscuro);
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

/* Contenedor de tarjetas */
.sistemas-list {
    display: flex;
    flex-direction: column;
    gap: 30px; /* Separación entre tarjetas */
    padding-bottom: 40px;
}

/* Estilos de la Tarjeta */
.sistema-card {
    background-color: var(--color-blanco);
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); /* Sombra sutil para despegarla del fondo */
}

/* Parte superior blanca de la tarjeta */
.sistema-card .card-body {
    padding: 40px 30px;
    text-align: center;
}

.sistema-card .card-body h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: -5px; /* Acerca el subtítulo al título principal */
}

/* Título grande dentro de la tarjeta (AUTÓNOMAS / HÍBRIDAS) */
.sistema-card .card-body h2 {
    /* Mínimo 24px, ideal 4vw, Máximo 36px */
    font-family: "Bebas Neue", sans-serif;
    font-size: 48px;
    font-weight: 400;
    color: var(--color-azul-oscuro);
    margin-bottom: 20px;
    letter-spacing: 0.48px;
}

.sistema-card .card-body p {
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-dark);
    font-weight: 400;
}

/* Parte inferior azul de la tarjeta */
.sistema-card .card-footer {
    background-color: var(--color-azul-oscuro);
    padding: 20px 30px;
}

/* Enlace amarillo reutilizado de "Segmentos" */
.sistema-card .card-footer .link-portafolio {
    color: var(--color-amarillo);
    text-decoration: none;
    font-size: 14px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.sistema-card .card-footer .link-portafolio:hover {
    opacity: 0.8;
}

/* ==========================================================================
   Página: Monitoreo
   ========================================================================== */

/* Ajustamos el ancho de la columna central (similar a Sistemas, pero un poco más angosta) */
.monitoreo-page {
    --ancho-col-central: 450px;
}

.monitoreo-page .monitoreo-content {
    background-color: var(--color-gris-claro); /* Reutilizamos el gris/celeste */
    color: var(--color-dark);
    padding-left: 4rem;
    padding-right: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Título */
.monitoreo-content h1 {
    font-size: 42px;
    font-weight: 700;
    color: var(--color-azul-oscuro);
    margin-bottom: 40px;
    line-height: 1.1;
    letter-spacing: -0.5px;
}

/* Párrafos de contenido */
.monitoreo-content .texto-destacado {
    font-size: 22px;
    line-height: 1.6;
    font-weight: 300;
    margin-bottom: 30px;
}

.monitoreo-content .texto-normal {
    font-size: 22px;
    line-height: 1.6;
    font-weight: 300;
}

.monitoreo-content strong {
    font-weight: 700;
}

/* ==========================================================================
   Variación Columna Derecha: Imagen Flotante (MONITOREO)
   ========================================================================== */

/* Clase de apoyo para la columna derecha */
.monitoreo-page .image-col.flex-center {
    display: flex;
    justify-content: flex-start; /* Ya no centramos, anclamos a la izquierda */
    align-items: center;
    background-color: var(--color-blanco);
    padding-left: 40px; /* Margen solo contra la columna gris */
    padding-right: 0; /* Sin límite a la derecha */
    overflow: hidden; /* Si la imagen no cabe entera, se recorta elegantemente al borde de la pantalla */
}

/* Estilo para la imagen de la app */
.monitoreo-page .img-flotante {
    min-width: 750px; /* TAMAÑO MÍNIMO: Evita que se vea microscópica en tablets/notebooks */
    max-width: 900px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Excepción para Móviles (para que en el celular sí se achique y centre) */
@media (max-width: 900px) {
    .monitoreo-page .image-col.flex-center {
        padding: 40px 0;
        justify-content: center;
    }

    .monitoreo-page .img-flotante {
        min-width: 0; /* Anulamos el tamaño mínimo */
        width: 90%; /* Ocupa casi todo el ancho del celular */
        max-width: 500px;
    }
}

/* ==========================================================================
   Variación Columna Derecha: Imagen Flotante/Centrada
   ========================================================================== */

/* Clase de apoyo para centrar contenido en la columna derecha */
.monitoreo-page .image-col.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-blanco); /* Fondo claro en lugar de imagen full */
    padding: 50px; /* Margen interno para que la imagen respire */
}

/* Estilo para la imagen de la app (por si no trae la sombra incorporada en el PNG/JPG) */
.monitoreo-page .img-flotante {
    width: 100%;
    max-width: 800px; /* Limita el tamaño en monitores muy grandes */
    height: auto;
    object-fit: contain; /* Evita que se recorte */

    /* Descomenta la siguiente línea si tu imagen (ej. app_monitoreo.png)
       viene sin la sombra y quieres que CSS la genere automáticamente */
    /* box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border-radius: 8px; */
}

/* ==========================================================================
   Página: Contacto
   ========================================================================== */

.contacto-page {
    --ancho-col-central: 460px; /* Un poco más de aire para el formulario */
}

.contacto-page .contacto-content {
    background-color: var(--color-azul-utumek); /* El azul medio de la portada */
    color: var(--color-blanco);
    padding-left: 4rem;
    padding-right: 4rem;
    overflow-y: auto;
    overflow-x: hidden;
}

.contacto-content h1 {
    font-size: 38px;
    font-weight: 700;
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.contacto-content .intro-contacto {
    font-size: 18px;
    font-weight: 300;
    margin-bottom: 30px;
}

/* --- Estilos del Formulario --- */
.utumek-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.8); /* Blanco ligeramente transparente */
    margin-bottom: 5px;
    font-weight: 400;
}

.input-group .label-hint {
    font-size: 12px;
    font-style: italic;
    display: inline-block;
    margin-top: 2px;
}

.utumek-form input,
.utumek-form select,
.utumek-form textarea {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 3px;
    font-family: 'Open Sans', sans-serif;
    font-size: 14px;
    background-color: var(--color-blanco);
    color: var(--color-dark);
    outline: none;
}

.utumek-form select {
    cursor: pointer;
    appearance: none; /* Quita la flecha nativa para un look más limpio, opcional */
}

.utumek-form textarea {
    resize: vertical; /* Permite agrandar solo hacia abajo */
}

/* Botón de Enviar */
.btn-submit {
    background-color: var(--color-amarillo);
    color: var(--color-dark);
    border: none;
    padding: 15px 30px;
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    font-size: 18px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 10px;
    transition: opacity 0.3s ease;
}

.btn-submit:hover {
    opacity: 0.9;
}

/* Honeypot */
.ninja-field {
    position: absolute;
    left: -9999px;
    opacity: 0;
}

/* Alertas */
.alert {
    padding: 12px 15px;
    margin-bottom: 20px;
    border-radius: 3px;
    display: none;
    font-weight: 600;
    font-size: 13px;
}
.alert-success { background-color: #d4edda; color: #155724; border: 1px solid #c3e6cb; }
.alert-error { background-color: #f8d7da; color: #721c24; border: 1px solid #f5c6cb; }


/* --- Columna Derecha de Contacto --- */
.bg-contacto {
    background-image: url('../img/contacto_paneles.jpg'); /* Reemplaza con tu foto */
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-azul-fuerte {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(11, 38, 88, 0.85); /* Un azul más oscuro y opaco */
    z-index: 1;
}

.contacto-branding {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.contacto-branding .logo-overlay {
    width: 200px; /* Ajusta el tamaño del logo */
    height: auto;
}

.contacto-branding .slogan-overlay {
    width: 300px; /* Ajusta el tamaño del slogan */
    height: auto;
}

/* ==========================================================================
   Botón Hamburguesa (Oculto en Desktop)
   ========================================================================== */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    font-size: 28px;
    color: var(--color-dark);
    cursor: pointer;
}

/* ==========================================================================
   Página: Términos y Condiciones
   ========================================================================== */

/* Columna a ancho completo con fondo gris claro */
.terminos-page .content-col {
    background-color: var(--color-gris-claro);
    color: var(--color-dark);
    flex: 1;
    max-width: none;
    padding: 60px 5rem;
    overflow-y: auto;
    overflow-x: hidden;
    align-items: center; /* Centramos el contenedor de texto */
}

/* Contenedor limitador para lectura óptima (70-80 caracteres por línea) */
.legal-container {
    max-width: 800px;
    width: 100%;
    background-color: var(--color-blanco);
    padding: 50px;
    border-radius: 4px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
}

.legal-container h1 {
    font-size: 32px;
    font-weight: 800;
    color: var(--color-azul-oscuro);
    margin-bottom: 5px;
    letter-spacing: -0.5px;
}

.legal-container .fecha-actualizacion {
    font-size: 13px;
    color: #888;
    margin-bottom: 40px;
    font-style: italic;
}

.legal-container h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-azul-utumek);
    margin-top: 35px;
    margin-bottom: 15px;
}

.legal-container p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
    font-weight: 400;
}

.legal-container ul {
    margin-bottom: 20px;
    padding-left: 20px;
}

.legal-container li {
    font-size: 15px;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Ajustes para Móvil */
@media (max-width: 900px) {
    .terminos-page .content-col {
        padding: 40px 20px !important;
    }
    .legal-container {
        padding: 30px 20px;
    }
    .legal-container h1 {
        font-size: 26px;
    }
}

/* ==========================================================================
   ADAPTACIÓN MOBILE (Pantallas hasta 900px)
   ========================================================================== */
@media (max-width: 900px) {

    /* 1. Cambio estructural del Body */
    body {
        flex-direction: column;
        overflow-y: auto; /* Permitimos scroll general */
        height: auto;
        min-height: 100vh;
    }

    /* 2. Transformamos la columna izquierda en una Barra Superior Fija */
    .menu-col {
        flex: none;
        width: 100%;
        height: 70px; /* Alto de la barra colapsada */
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        position: fixed; /* Se queda pegada arriba */
        top: 0;
        left: 0;
        z-index: 1000;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        transition: height 0.3s ease;
    }

    .menu-top {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .menu-top .logo img {
        max-width: 120px; /* Logo más pequeño */
        margin-bottom: 0;
    }

    .hamburger-btn {
        display: block; /* Mostramos la hamburguesa */
    }

    /* Ocultamos navegación y redes en estado normal (colapsado) */
    .menu-middle, .menu-bottom {
        display: none;
        width: 100%;
        text-align: center;
    }

    /* 3. Estado: MENÚ ABIERTO (Overlay) */
    .menu-col.menu-abierto {
        height: 100vh; /* Se despliega ocupando toda la pantalla */
        flex-direction: column;
        justify-content: flex-start;
    }

    .menu-col.menu-abierto .menu-middle,
    .menu-col.menu-abierto .menu-bottom {
        display: flex; /* Revelamos los links */
        animation: fadeIn 0.4s ease forwards;
    }

    .menu-col.menu-abierto .nav-menu {
        margin-top: 40px;
    }

    .menu-col.menu-abierto .nav-menu a {
        font-size: 22px; /* Links más grandes para tocar con el dedo */
        display: block;
        padding: 10px 0;
    }

    /* 4. Ajustes del Contenido Principal para Mobile */
    .main-content {
        flex-direction: column; /* Apilamos contenido e imagen */
        margin-top: 70px; /* Evitamos que el contenido quede bajo la barra fija */
    }

    /* La columna central ahora ocupa el 100% */
    .content-col {
        width: 100% !important;
        flex: none !important;
        padding: 40px 25px !important; /* Reducimos márgenes laterales */
        min-height: auto;
    }

    /* Ajustes específicos de elementos rebeldes */
    .slogan-img {
        width: 100%; /* El slogan ya no se sale de la caja */
        left: 0;
        margin-top: 20px;
    }

    .texto-bajada {
        padding-right: 0;
    }

    .texto-bajada p {
        text-align: left; /* Alineado a la izquierda es mejor para leer en celular */
        font-size: 18px;
    }

    /* Convertimos las grillas de 2 columnas en 1 sola columna */
    .features-grid, .segmentos-grid {
        grid-template-columns: 1fr;
    }

    /* La imagen derecha pasa a estar debajo del contenido */
    .image-col {
        width: 100%;
        min-height: 350px; /* Le damos una altura fija para que se vea bien */
        flex: none;
    }

    @keyframes fadeIn {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }

    /* Intercambio de logos en móvil */
    .menu-top .logo img.logo-desktop {
        display: none !important; /* Escondemos el normal */
    }

    .menu-top .logo img.logo-mobile {
        display: block !important; /* Mostramos el horizontal */
        max-width: 140px; /* Ajusta este valor al tamaño ideal de tu logo horizontal */
    }

    /* Estilo del botón (Hamburguesa/Cerrar) para que combine con el logo */
    .hamburger-btn {
        display: block;
        color: var(--color-azul-utumek); /* Lo dejamos azul como en tu diseño */
    }

    /* Centrado absoluto de los enlaces en el menú abierto */
    .menu-col.menu-abierto .menu-middle {
        display: flex;
        flex-direction: column;
        justify-content: center; /* Centra verticalmente */
        align-items: center; /* Centra horizontalmente */
        flex-grow: 1; /* Empuja el footer hacia abajo */
    }

    .menu-col.menu-abierto .nav-menu {
        margin-top: 0;
        text-align: center; /* Asegura el centrado del texto */
        width: 100%;
        padding: 0;
    }

    .menu-col.menu-abierto .nav-menu li {
        margin-bottom: 25px; /* Más espacio entre opciones para el dedo */
    }

    .menu-col.menu-abierto .nav-menu a {
        font-size: 22px;
        display: block;
        padding: 10px 0;
    }

    /* Centrado de la sección inferior (Redes y Copyright) */
    .menu-col.menu-abierto .menu-bottom {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 40px;
    }
}