/* --------------------------- */
/* 1. ESTILOS BASE Y VARIABLES CORPORATIVAS (A&L Ingenieros) */
/* --------------------------- */
:root {
    /* Colores Base */
    --color-principal-bg: #F3F3F7;          /* ?? Fondo Suave para reducir el "blanco" */
    --color-principal-text: #333333;        /* Texto principal (Gris oscuro) */
    --color-secundario-bg: #E8E8EC;         /* Fondo Secundario (Gris ligeramente mas oscuro) */
    
    /* ?? AZUL CORPORATIVO (Basado en el texto A&L) */
    --color-primario-corporativo: #333777;  
    --color-primario-oscuro: #1A2252;       
    
    /* ?? NARANJA QUEMADO (Basado en el cubo y el bloque de resalte) */
    --color-resalte:#E1AD01;               
    --color-resalte-claro: #F2C12E;         
    
    --padding-seccion: 80px 20px;
}
/* Anade esto a tu CSS base */
/*html {
    overflow-x: hidden; 
}*/
/* ------------------------------------- */
/* **CAMBIO:** Aplicar scroll-behavior a html y body para asegurar el smooth scroll. */
html, body { 
    scroll-behavior: smooth; 
}

body { 
    font-family: 'Inter', sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    background-color: var(--color-principal-bg);
    color: var(--color-principal-text);
    
    /* ?? REGLAS CRITICAS A AGREGAR: */
    overflow-x: hidden; /* Evita el scroll horizontal en el cuerpo */
    width: 100%; /* Asegura que el cuerpo no se estire mas alla del 100% */
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    z-index: 1000;
    background-color: white;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px 0;
    transition: all 0.3s ease;
}

/* ESTILOS ESPECIFICOS DEL LOGO IMAGEN */
/* ------------------------------------- */
.logo-img {
    height: 35px; 
    width: auto; /* Mantiene la proporcion */
    vertical-align: middle; 
}

/* Fuentes */
h1, h2, h3 { font-family: 'Montserrat', sans-serif; font-weight: 700; }
h1 { font-weight: 900; }

/* Estilo General de Secciones */
section { padding: var(--padding-seccion); min-height: auto; max-width: 1200px; margin: 0 auto; }
.section-title {
    text-align: center; 
    font-size: 2.5em; 
    color: var(--color-primario-corporativo); 
    margin-bottom: 40px; 
    border-bottom: 3px solid var(--color-resalte); 
    padding-bottom: 10px; 
    display: table; margin-left: auto; margin-right: auto; 
}

/* ------------------------------------- */
/* 2. ESTILOS DE HEADER Y NAVEGACION */
/* ------------------------------------- */

/* -------------------------------------- */
/* 3. ESTILOS DEL HERO BANNER (CON ANIMACION) */
/* -------------------------------------- */
/* ... Keyframes ... */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        /* Empieza 50px a la derecha */
        transform: translateX(50px); 
    }
    to {
        opacity: 1;
        /* Termina en su lugar */
        transform: translateX(0);
    }
}
/* ------------------------------------- */
/* 3. ESTILOS DEL HERO BANNER (CON ANIMACION) */
/* -------------------------------------- */

/* Keyframes pulse actualizado para usar VERDE NEÓN */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
    
    50% {
        transform: scale(1.02);
        /* 💥 SOLUCIÓN: Usamos la variable de resalte claro (Verde Neón) */
        box-shadow: 
            0 8px 15px rgba(0, 0, 0, 0.4), /* Sombra principal más oscura */
            0 0 0 0 var(--color-resalte-claro), /* Inicia el glow */
            0 0 0 10px rgba(107, 255, 77, 0.2); /* Usa el RGB del color-resalte-claro para el halo sutil */
    }
    
    100% {
        transform: scale(1);
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    }
}

.hero-parallax {
/* ... (resto sin cambios) ... */
}
/* ... */
.hero-parallax {
    position: relative; height: 70vh; overflow: hidden; display: flex; align-items: center; justify-content: center;
    text-align: center; color: #ffffff; 
}
.parallax-layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.base-layer {
    background-image: url('https://res.cloudinary.com/dknm8qct5/image/upload/v1763773517/banertecno_gri6hm.png');
    background-size: cover; 
    /* **MEJORA:** Centrar la imagen en general, no solo al 30% */
    background-position: center; 
    z-index: 1;
}
.content-layer { 
    z-index: 2; 
    /* **MEJORA:** Aumentar oscuridad del overlay para mejor contraste del texto HTML blanco */
    background: rgba(0, 0, 0, 0.7); 
    pointer-events: auto; 
}
/* ... resto de .hero-content, .cta-button, etc. (sin cambios) ... */

.hero-content { 
    max-width: 900px; 
    padding: 20px; 
    z-index: 3; 
}
/* ... animaciones y estilos de h1, p, y cta-button sin cambios ... */
.hero-content h1 { 
    font-size: 3.5em; 
    margin-bottom: 0.2em; 
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); 
    color: white; 
    opacity: 0; 
    animation: fadeInLeft 0.8s ease-out 0.2s forwards;
}
.hero-content p { 
    font-size: 1.5em; 
    margin-bottom: 1.5em; 
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7); 
    opacity: 0; 
    animation: fadeInLeft 0.8s ease-out 0.5s forwards;
}
.cta-button {
    display: inline-block; background-color: var(--color-resalte); 
    color: white; padding: 15px 30px; border-radius: 4px; text-decoration: none;
    font-weight: bold; font-size: 1.1em; transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
    opacity: 0; 
    animation: 
        fadeInLeft 0.8s ease-out 0.8s forwards, 
        pulse 2.5s infinite 2s ease-in-out;
}
.cta-button:hover {
    background-color: var(--color-resalte-claro); 
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
    animation-play-state: paused; 
}



/* -------------------------------------- */
/* 3.2. ESTILO DE BANNER SERVICIO TECNICO Y MAS */
/* -------------------------------------- */
.hero-infraestructura-banner {
    /* **ACCION:** Reemplaza 'ruta/a/imagen-servidores.jpg' con la ruta real de tu imagen. */
    background-image: url('https://res.cloudinary.com/dknm8qct5/image/upload/v1764347577/serv_ineeaj.png'); 
    
    /* Asegura que herede las propiedades correctas de background-position y size */
    background-size: cover; 
    background-position: center; 
}



/* -------------------------------------- */
/* 3.4. ESTILO DE BANNER ESPECIFICO: LICENCIAMIENTO MICROSOFT */
/* -------------------------------------- */
.hero-licenciamiento-banner {
    /* **ACCION:** Reemplaza la ruta con la imagen de Licenciamiento/M365 */
    background-image: url('https://res.cloudinary.com/dknm8qct5/image/upload/v1763775258/licen_ilepol.png'); 
    background-size: cover; 
    background-position: center; 
}



/* ------------------------------------------- */
/* 4. ESTILOS CARRUSEL DE LOGOS (CON ANIMACION) */
/* ------------------------------------------- */
/* ... Seccion sin cambios ... */
.cinta-carrusel {
    height: 100px; width: 100%; overflow: hidden;
    background-color: var(--color-secundario-bg); 
    position: relative; padding: 10px 0; box-sizing: border-box;
}
.carrusel-pista {
    display: flex; 
    white-space: nowrap;
    will-change: transform;
    animation: marquee 10s linear infinite; 
}
.carrusel-pista:hover { animation-play-state: paused; } 
.carrusel-imagen {
    height: 70px; width: auto; 
    margin: 0 15px; 
    vertical-align: middle;
    opacity: 0.7;
    filter: grayscale(100%); 
    transition: all 0.5s ease;
    flex-shrink: 0; 
}
.carrusel-imagen:hover { opacity: 1; filter: grayscale(0%); }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); } 
}


//* ------------------------------------- */
/* 5. SECCION QUIENES SOMOS (FINAL) */
/* ------------------------------------- */

/* 1. Estructura y Flexbox */

/* 1. Estructura y Flexbox */
#Quienes-somos { 
    background-color: var(--color-principal-bg); 
    
    /* ?? REDUCE ESTE VALOR: 
       El primer 20px es el padding superior, 
       el 40px es el padding inferior. */
    padding: 5px 20px 5px 20px; /* Ejemplo: 20px arriba, 40px abajo. */
}

#Quienes-somos { 
    background-color: var(--color-principal-bg); 
}

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

.text-content { 
    flex: 2; 
    min-width: 300px; 
    /* Centra el subtitulo, el bloque de parrafos y el boton CTA */
    text-align: center; 
}

.image-content { 
    flex: 1; 
    min-width: 250px; 
    background-color: var(--color-secundario-bg);
    padding: 20px; 
    border-radius: 8px;
}

/* 2. Centrado y Alineacion del Bloque de Parrafos */
.content-wrapper .text-content .parrafo-contenido {
    /* Define el ancho maximo del bloque para mejorar la lectura en escritorio */
    max-width: 700px; 
    /* Centra el BLOQUE DIV completo dentro de la columna */
    margin-left: auto;   
    margin-right: auto; 
    /* Alinea el TEXTO dentro del bloque a la izquierda para mejor lectura */
    text-align: center; 
}

/* 3. Estilos de Contenido y Lista */
.subtitle { 
    color: var(--color-resalte); 
    font-size: 1.8em; 
    margin-top: 0; 
}

.values-list { 
    list-style: none; 
    padding: 0; 
    margin-top: 30px; 
    font-size: 1.1em; 
}

.values-list li { 
    margin-bottom: 15px; 
    padding-left: 25px; 
    position: relative; 
}

.values-list li::before { 
    content: "?"; 
    position: absolute; 
    left: 0; 
    color: var(--color-resalte); 
    font-weight: bold; 
}

.cta-button-secondary {
    display: inline-block; 
    margin-top: 20px; 
    padding: 12px 25px; 
    background-color: var(--color-primario-corporativo); 
    color: white; 
    text-decoration: none; 
    border-radius: 4px; 
    transition: background-color 0.3s;
}

.cta-button-secondary:hover { 
    background-color: #333; 
}

/* 4. Media Query (Responsivo) */
@media (max-width: 768px) {
    /* Desactiva el limite de ancho para los parrafos en moviles 
       para que ocupen el 100% y sean faciles de leer */
    .content-wrapper .text-content .parrafo-contenido {
        max-width: 100%; 
        margin-left: 0;  
        margin-right: 0; 
    }
    
}
/* ------------------------------------------- */
/* 6. WIDGET CONTADORES (Existente) */
/* ------------------------------------------- */
/* ... Seccion sin cambios ... */
/*#Contador {
    margin-top: 0; /* Elimina cualquier espacio EN CIMA del contador */
    /* Opcional: anade padding-top si necesitas espacio DENTRO del contador 
    padding-top: 0px; 
}
#stats-contador {
    padding: 5px 20px 10px 20px;
    background-color: var(--color-secundario-bg);
    border-top: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
}
.stats-grid {
    display: flex;
    justify-content: space-around;
    gap: 30px;
    max-width: 1000px;
    margin: 0 auto;
    text-align: center;
}
.stat-item {
    flex: 1;
    padding: 20px;
    border-radius: 8px;
    background-color: var(--color-principal-bg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    border-bottom: 4px solid var(--color-resalte);
    transition: transform 0.3s;
}
.stat-item:hover {
    transform: translateY(-5px);
}
.stat-item i {
    font-size: 3.5em;
    color: var(--color-resalte); 
    margin-bottom: 10px;
}
.stat-item h2 {
    font-size: 3.5em;
    color: var(--color-primario-corporativo); 
    margin: 0;
    font-weight: 900;
}
.stat-item p {
    font-size: 1.1em;
    color: #555;
    margin-top: 5px;
    font-weight: 600;
}*/


 /* ==============================================
 * ESTILOS MODULARES PARA SECCION CABLEADO ESTRUCTURADO (CE)*/

 /* ----------------------------------------------------- */
/*               EFECTO MÁQUINA DE ESCRIBIR (CSS)             */
/* ----------------------------------------------------- */



/* ------------------------------------- */
/* 7. SECCION SERVICIOS (GRID) */
/* ------------------------------------- */
/* ... Seccion sin cambios ... */
#servicios { background-color: var(--color-principal-bg); padding-top: var(--padding-seccion); }
.section-subtitle { color: #666; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
.service-grid-card { 
    background: var(--color-secundario-bg); border-radius: 8px; padding: 30px; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; 
    display: flex; flex-direction: column; text-align: left; min-height: 280px; 
    border-top: 5px solid var(--color-resalte); 
    
}
.service-grid-card h3 { color: var(--color-primario-corporativo); } 
.service-grid-card:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); }
.card-action-link {
    color: var(--color-resalte); font-weight: bold; text-decoration: none; margin-top: auto; align-self: flex-start;
}
.tarjeta-principal {
    grid-column: 1 / 4; 
    background: var(--color-primario-corporativo); 
    color: white; border-radius: 8px; padding: 40px; text-align: center; margin: 20px 0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    
}
.tarjeta-principal h3 { color: white; margin-top: 0; font-size: 2em; }
.boton-accion {
    display: inline-block; background-color: var(--color-resalte); 
    color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none;
    font-weight: bold; transition: background-color 0.3s; margin-top: 20px;
}
.boton-accion:hover { background-color: var(--color-resalte-claro); }

/* -------------------------------------- */
/* ESTILOS ESPECIFICOS DEL CARRUSEL HIBRIDO */
/* -------------------------------------- */

/* -------------------------------------- */
/* 1. LAYOUT PRINCIPAL (3 columnas, 1000px de ancho) */
/* -------------------------------------- */
.carrusel-hibrido {
    /* Regla clave para colocar las tarjetas una al lado de la otra */
    display: flex; 
    gap: 20px; /* Espacio entre las tarjetas (ajustar si es necesario) */
    
    /* Restriccion de ancho total (segun tu solicitud) */
    max-width: 1000px; 
    margin: 0 auto; /* Centra el contenedor de 1000px */
}

/* -------------------------------------- */
/* 2. TAMANO DE LA TARJETA Y OCULTAR BORDE */
/* -------------------------------------- */
.carrusel-hibrido .diapositiva {
    /* Hace que cada tarjeta ocupe exactamente 1/3 del espacio */
    flex: 1 1 0; 
    /* El valor 0 asegura que el ancho se calcule en funcion del flex-grow (1) */
    max-width: 33.33%; 
    
    /* CLAVE: Oculta el desbordamiento de la imagen al hacer zoom (1.1) */
    overflow: hidden; 
    
    /* El resto de estilos de la tarjeta (padding, box-shadow) se mantienen */
}

/* -------------------------------------- */
/* 3. CONTENEDOR DE IMAGEN (Establece la altura de 400px) */
/* -------------------------------------- */
.carrusel-hibrido .imagen-contenedor {
    height: 400px; /* Altura fija para la imagen (segun tu solicitud) */
    overflow: hidden; /* Asegura que la figura no muestre la imagen saliente */
}

/* -------------------------------------- */
/* 4. ESTILO DE LA IMAGEN (Ajuste y Zoom) */
/* -------------------------------------- */

.encabezado-servicios {
    /* Agrega esta linea si no la tiene para centrar el H1 y P en PC */
    text-align: center; 
    /* ... El resto de tus estilos para el encabezado (padding, margin, etc.) */
}

/* Esto aplica a los textos dentro de cada tarjeta (subtitulos) */
.carrusel-hibrido .texto-slide {
    /* Agrega esta linea para centrar todos los textos dentro de las tarjetas en PC */
    text-align: center; 
}

.carrusel-hibrido .imagen-contenedor img {
    /* Ocupa el 100% del ancho y la altura del contenedor (400px) */
    width: 100%; 
    height: 100%; 
    
    /* CLAVE: Ajusta la imagen para cubrir todo el espacio sin distorsionarse. 
       Recorta los bordes si la proporcion no coincide. */
    object-fit: cover; 
    
    /* Transicion suave para el zoom (ya estaba en tu codigo) */
    transition: transform 0.5s ease-in-out; 
    display: block; 
}

/* El efecto de aumento (Zoom 10%) al hacer hover sobre la tarjeta */
.carrusel-hibrido .diapositiva:hover .imagen-contenedor img {
    transform: scale(1.1); /* Aumenta la imagen en un 10% */
}

@media (max-width: 768px) {
    /* ... Tus otras reglas ... */
    /* Regla para centrar el texto dentro de las tarjetas (.texto-slide) */
    .carrusel-hibrido .texto-slide {
        text-align: center;
    }

    /* SOLUCION AL CENTRADO DEL TITULO */
    .encabezado-servicios {
        text-align: center; 
    }

    /* SOLUCION AL LAYOUT DE LAS TARJETAS */
    .carrusel-hibrido {
        display: block; 
        max-width: 100%; 
    }
    .carrusel-hibrido .diapositiva {
        max-width: 100%; 
        margin-bottom: 20px; 
    }
    .carrusel-hibrido .imagen-contenedor {
        height: 250px; 
    }
}


/* ------------------------------------- */
/* 8. ESTILOS DE CONTACTO Y FORMULARIO */
/* ------------------------------------- */
/* ... Formulario sin cambios ... */
#contacto { background-color: #fcfcfc; }
.formulario-empresarial {
    max-width: 500px; margin: 0 auto 50px auto; padding: 30px;
    background-color: var(--color-principal-bg); border: 1px solid #eee;
    border-radius: 12px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); 
}
.formulario-empresarial label {
    display: block; margin-bottom: 8px; font-weight: 600;
    color: var(--color-principal-text); font-size: 1em;
}
.formulario-empresarial input[type="text"], .formulario-empresarial input[type="email"], 
.formulario-empresarial select, .formulario-empresarial textarea {
    width: 100%; padding: 14px 15px; border: 1px solid #ccc; border-radius: 6px;
    background-color: white; color: var(--color-principal-text); 
    font-size: 1em; box-sizing: border-box; 
}
.formulario-empresarial input:focus, .formulario-empresarial select:focus, 
.formulario-empresarial textarea:focus {
    border-color: var(--color-resalte); 
    outline: none; box-shadow: 0 0 0 3px rgba(201, 95, 43, 0.3); 
}
.formulario-empresarial ::placeholder { color: #999; }
.boton-empresarial {
    display: block; width: 100%; padding: 16px; margin-top: 30px;
    background-color: var(--color-resalte); 
    color: white; border: none; border-radius: 6px; font-size: 1.1em; font-weight: bold;
    cursor: pointer; transition: background-color 0.3s, transform 0.3s;
}
.boton-empresarial:hover {
    background-color: var(--color-resalte-claro); 
    transform: translateY(-2px); 
}

/* Mapa */
.map-responsive-wrapper {
    width: 90%; max-width: 900px; margin: 0 auto;
}
.map-responsive-wrapper iframe {
    width: 100%; height: 400px; display: block;
    border: 3px solid var(--color-resalte); 
    border-radius: 8px;
}




/* ------------------------------------- */
/* 9. ESTILOS DEL FOOTER */
/* ------------------------------------- */
/* ... Seccion sin cambios ... */
#main-footer {
    background-color: var(--color-primario-corporativo); 
    color: white; 
    padding-top: 60px;
    font-size: 0.95em;
    /* REGLAS ANADIDAS PARA SEGURIDAD GLOBAL */
    width: 100%;
    max-width: 100vw;
}
.footer-container {
    display: flex; flex-wrap: wrap; justify-content: space-between;
    max-width: 1200px; margin: 0 auto; padding: 0 20px 50px 20px;
}
.footer-column { flex: 1; min-width: 200px; margin-bottom: 30px; }
#main-footer h4 { color: var(--color-resalte); font-size: 1.2em; margin-bottom: 20px; } 
#main-footer ul { list-style: none; padding: 0; }
#main-footer a { color: #b0b0b0; text-decoration: none; transition: color 0.3s; }
#main-footer a:hover { color: var(--color-resalte); } 
.social-links a { font-size: 1.8em; margin-right: 20px; color: white; transition: color 0.3s; }
.social-links a:hover { color: var(--color-resalte); }
.footer-bottom {
    text-align: center; padding: 25px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
    background-color: var(--color-primario-oscuro); 
    color: #ccc;
}


/* ------------------------------------- */
/* 10. RESPONSIVIDAD */
/* ------------------------------------- */
/* **MEJORA:** Anadir estilo para el texto del FAB en escritorio (si lo tienes) */
@media (min-width: 768px) {
    .fab-text {
        display: inline-block; 
        color: white;
        font-weight: 600;
        margin-left: 10px;
        font-size: 1em;
        white-space: nowrap; 
    }
}
@media (min-width: 992px) {
    .header-cta-text { display: block; }
    .menu-toggle { display: none; }
    .main-nav { display: flex; position: static; background: none; box-shadow: none; width: auto; }
    .main-nav a { padding: 10px 15px; border: none; color: var(--color-principal-text); transition: color 0.3s; }
    .main-nav a:hover { color: var(--color-resalte); background: none; }
    .services-grid { grid-template-columns: repeat(3, 1fr); }
    .tarjeta-principal { grid-column: 1 / 4; }
}
@media (max-width: 1024px) {
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .tarjeta-principal { grid-column: 1 / 3; }
}

@media (max-width: 768px) {
    .hero-parallax { height: 60vh; }
    .hero-content h1 { font-size: 2.5em; }
    .hero-content p { font-size: 1.2em; }
    .services-grid { grid-template-columns: 1fr; }
    .tarjeta-principal { grid-column: 1 / 2; }
    .map-responsive-wrapper iframe { height: 300px; }
    .stats-grid { flex-direction: column; }
    .stat-item { flex: none; width: 100%; margin-bottom: 20px; }
    
}   /* Asegurar que el FAB solo muestre el icono en movil */
    
@media (max-width: 576px) {
    .footer-column { flex: 1 1 100%; text-align: center; }
    .social-links { justify-content: center; display: flex; }
    .hero-content h1 { font-size: 2em; }
}
/* ------------------------------------- */
/* REGLAS DE CENTRADO PARA MOVILES */
/* ------------------------------------- */
@media (max-width: 768px) {
    
    /* 1. Centrar el contenedor principal */
    #Quienes-somos {
        /* Centra el texto y los elementos inline-block (como el boton) */
        text-align: center; 
        /* Anade padding lateral para que el contenido no toque los bordes del movil */
        padding-left: 15px; 
        padding-right: 15px;
    }

    /* 2. Modificar el Flexbox interno: ESTO ES LO QUE HACE EL CENTRADO */
    .content-wrapper {
        /* Sobrescribe el codigo de escritorio: APILA y CENTRA los bloques */
        flex-direction: column;
        align-items: center;    /* Centra los bloques apilados horizontalmente */
        justify-content: center; 
        gap: 20px; 
    }

    /* 3. Asegurar el centrado del texto en la columna de contenido */
    .text-content {
        text-align: center;
        min-width: 100%; 
    }

    /* 4. Corregir la lista de valores para que los puntos sigan a la izquierda */
    .values-list {
        /* Fuerza la alineacion del texto a la izquierda para que los items se lean bien */
        text-align: left;
    }
}