:root {
        --color-dark: #000000;
        --color-white: #fff;
        --color-bg-dark: #222529;
        --color-primary: #385083;
        --color-secondary: #3788C1;
        --color-accent: #3197D4;
        --color-light: #8DD0DD;
        --color-hover: #3197D4; /* Azul más claro */
        --color-danger: #FF0000;
    }
    /* Fondo*/
    .main-bg {
        position: relative;
        background: url("/img/logo.png") no-repeat left center;
        /*background-repeat: repeat;*/
        background-size: 200px;
        min-height: 400px;
        z-index: 1;
    }

    /* Overlay semitransparente encima del fondo */
    .main-bg::before {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 255, 255, 0.6); /* blanco translúcido, ajusta opacidad/color */
        z-index: -1; /* se queda detrás del contenido */
        border-radius: inherit; /* respeta bordes redondeados si los hubiera */
    }

    /* 🔹 Por defecto (desktop grande) */
    body {
        padding-top: 100px; /* altura navbar + margen extra */
    }

    /* 🔹 Tablets (pantallas medianas) */
    @media (max-width: 992px) {
        body {
            padding-top: 100px;
        }
    }

    /* 🔹 Móviles */
    @media (max-width: 576px) {
        body {
            padding-top: 80px;
        }
    }


    section {
        background-color: transparent !important;
    }
    #servicios {
        background: transparent !important;
    }
    /* Fondo fijo en negro */
    .bg-custom {
        background-color: var(--color-white) !important;
    }


    /* Nav links */
    .navbar {
        min-height: 90px; /* altura aproximada del logo */
    }
    .navbar .nav-link {
        display: flex;
        align-items: end;
        color: var(--color-primary) !important;
        font-weight: bold;
        transition: color 0.3s ease;
    }

    /* Hover y active */
    .navbar .nav-link:hover,
    .navbar .nav-link:focus,
    .navbar .nav-link.active {
        color: var(--color-accent) !important;
    }

    /* Logo hover */
    .navbar-brand img {
        transition: transform 0.3s ease, filter 0.3s ease;
    }

    .navbar-brand:hover img {
        transform: scale(1.1);
        filter: drop-shadow(0 0 5px var(--color-accent));
    }

    /* === Hamburguesa personalizada === */
    .navbar-toggler {
        border-color: var(--color-primary) !important; /* borde */
    }

    .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(49,151,212,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
    }

    /* Hover hamburguesa */
    .navbar-toggler:hover .navbar-toggler-icon {
        filter: drop-shadow(0 0 5px var(--color-light));
    }
    /* Aumentar tamaño de las letras del menú */
    .navbar .nav-link {
        font-size: 1.4rem;   /* prueba con 1.3rem o 18px si lo quieres más grande */
    }

    /* Si también quieres que se vea más separado */
    .navbar .nav-link {
        padding: 1rem 1.6rem;
    }




    /* Estilo de los botones de servicios */
    /* Estilo de los botones de servicios */
    .service-btn {
        background-color: var(--color-secondary);
        color: #fff;
        border-radius: 12px;
        text-decoration: none;
        transition: all 0.3s ease;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        min-height: 200px;         /* Todos con misma altura */
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .service-btn:hover {
        background-color: var(--color-light);
        transform: scale(1.05);
        box-shadow: 0 6px 12px rgba(0,0,0,0.3);
        color: #fff;
    }

    .service-btn h4 {
        margin-bottom: 10px;
        font-weight: bold;
    }


    /* Titulares globales */
    /* Estilos de títulos personalizados */
    .titulo1 {
        color: var(--color-primary);
        font-size: 2.5rem;
        font-weight: bold;
        transition: color 0.3s ease;
        text-align: center;

    }
    .titulo1:hover {
        color: var(--color-secondary);
    }

    .titulo2 {
        color: var(--color-bg-dark) !important;
        font-size: 1.5rem;
        font-weight: bold;
        transition: color 0.3s ease;
        text-align: left;

    }
    .titulo2:hover {
        color: var(--color-hover) !important;

    }

    .titulo3 {
        color: var(--color-primary);
        font-size: 1.2rem;
        font-weight: bold;
        transition: color 0.3s ease;
        text-align: left;

    }
    .titulo3:hover {
        color: var(--color-accent);
    }

    .titulo4 {
        color: var(--color-accent);
        font-size: 1.5rem;
        font-weight: bold;
        transition: color 0.3s ease;
        text-align: center;

    }
    .titulo4:hover {
        color: var(--color-primary);
    }

    .titulo5 {
        color: gray;
        font-size: 0.7rem;
        font-weight: bold;
        transition: color 0.3s ease;
        text-align: center;

    }
    .titulo5:hover {
        color: var(--color-primary);
    }


    /* Base de botones */
    .btn-custom {
        display: inline-block;
        padding: 12px 24px;
        border-radius: 8px;
        font-size: 1rem;
        font-weight: bold;
        text-decoration: none;
        color: #fff;
        transition: all 0.3s ease;
        border: none;
        cursor: pointer;
        text-align: center;
    }

    /* Botón Primary → Secondary */
    .btn-primary-custom {
        background-color: var(--color-primary);
    }
    .btn-primary-custom:hover {
        background-color: var(--color-secondary);
    }

    /* Botón Secondary → Hover */
    .btn-secondary-custom {
        background-color: var(--color-secondary);
    }
    .btn-secondary-custom:hover {
        background-color: var(--color-hover);
    }

    /* Botón Hover → Accent */
    .btn-hover-custom {
        background-color: var(--color-hover);
    }
    .btn-hover-custom:hover {
        background-color: var(--color-accent);
    }

    /* Botón Accent → Primary */
    .btn-accent-custom {
        background-color: var(--color-accent);
        color: #000; /* mejor contraste */
    }
    .btn-accent-custom:hover {
        background-color: var(--color-primary);
        color: #fff;
    }


    /* Texto 1: grande + color primario */
    .texto-1 {
        color: var(--color-primary) !important;
        font-weight: 600;
        font-size: 2rem;   /* ~32px */
        font-family: 'Oswald', sans-serif;
        transition: color 0.3s ease;
    }

    .texto-1:hover {
        color: var(--color-secondary) !important;
    }

/* Texto 1: grande + color primario */
    .texto_2 {
        color: var(--color-secondary) !important;
        font-weight: 600;
        font-size: 0.8rem;   /* ~32px */
        font-family: 'Roboto', sans-serif;
        transition: color 0.3s ease;
        text-align: justify;
    }

    .texto_2:hover {
        color: var(--color-primary) !important;
    }

    /* Texto 2: mediano + color secundario */
    /*.texto-2 {*/
    /*    color: var(--color-secondary) !important;*/
    /*    font-weight: 600;*/
    /*    font-size: 0.8rem;*/
    /*    font-family: 'Roboto', sans-serif;*/
    /*    transition: color 0.3s ease;*/
    /*    text-align: justify;*/

    /*    !* Soluciones para justificar textos largos *!*/
    /*    hyphens: auto;         !* Habilita los cortes automáticos de palabras *!*/
    /*    word-break: break-word; !* Ajusta las palabras largas que no caben *!*/
    /*    overflow-wrap: break-word; !* Permite ajustar también cuando sea necesario *!*/
    /*}*/

    .texto-2 {
        color: var(--color-secondary) !important;
        font-weight: 600;
        font-size: 0.8rem;
        font-family: 'Roboto', sans-serif;
        transition: color 0.3s ease;
        text-align: justify; /* Justificación del texto */
        line-height: 1.6; /* Separación entre líneas para mejor lectura */
        hyphens: auto; /* Habilita separación automática de palabras */
        word-break: break-word; /* Ajusta palabras largas */
        overflow-wrap: break-word; /* Ajusta también en casos extremos */
        margin-left: 30px; /* Espacio para acomodar la viñeta */
        text-indent: -30px; /* Ajuste para que las líneas adicionales respeten la viñeta */
    }



    .texto-2:hover {
        color: var(--color-primary) !important;
    }

    /* Texto 3: pequeño + color de acento */
    .texto-3 {
        color: var(--color-accent) !important;
        font-weight: 500;
        font-size: 1.2rem; /* ~19px */
        font-family: 'Poppins', sans-serif;
        text-transform: uppercase;
        transition: color 0.3s ease;
    }

    .texto-3:hover {
        color: var(--color-hover) !important;
    }

    /* Botón flotante de WhatsApp */

    /*.viñeta1 {*/
    /*    display: inline-block;*/
    /*    width: 20px; !* Tamaño de la viñeta *!*/
    /*    height: 20px;*/
    /*    background: url("/img/logo.png") no-repeat center center; !* Logo como viñeta *!*/
    /*    background-size: contain; !* Asegura que el logo se ajuste bien *!*/
    /*    margin-right: 10px; !* Espacio entre la viñeta y el texto *!*/
    /*    vertical-align: top; !* Centra verticalmente *!*/
    /*}*/

.viñeta1 {
    display: inline-block;
    width: 5px; /* Tamaño del punto */
    height: 5px;
    background-color: var(--color-accent); /* Color del punto, reemplázalo si necesitas otro */
    border-radius: 50%; /* Hace que sea un círculo */
    margin-right: 10px; /* Espacio entre la viñeta y el texto */
    vertical-align: middle; /* Alineación vertical */
}


    .viñeta {
        display: inline-block;
        width: 20px; /* Ajusta el tamaño */
        height: 20px;
        margin-right: 10px; /* Espacio entre el logo y el texto */
        vertical-align: middle; /* Centra el logo */
    }

    .viñeta img {
        width: 100%;
        height: 100%;
    }

    /* Botón flotante de WhatsApp */

    /* Estilo general para íconos flotantes */
    /*.floating-icons {*/
    /*    position: fixed;*/
    /*    top: 50%;              !* centrado vertical *!*/
    /*    right: 20px;           !* pegado a la derecha *!*/
    /*    transform: translateY(-50%);*/
    /*    display: flex;*/
    /*    flex-direction: column;*/
    /*    gap: 15px;             !* espacio entre íconos *!*/
    /*    z-index: 2000;         !* siempre arriba *!*/
    /*}*/

    /*.floating-icons a {*/
    /*    font-size: 50px;       !* tamaño del ícono *!*/
    /*    color: #fff;           !* color del ícono *!*/
    /*    text-decoration: none;*/
    /*    transition: transform 0.2s ease-in-out, color 0.2s;*/
    /*}*/
    /*.floating-icons a {*/
    /*    width: 24px; !* Tamaño del contenedor de los íconos *!*/
    /*    height: 24px;*/
    /*    display: flex;*/
    /*    justify-content: center; !* Centrado horizontal del ícono SVG *!*/
    /*    align-items: center; !* Centrado vertical del ícono SVG *!*/
    /*    background-color: transparent; !* Fondo blanco para un mejor contraste *!*/
    /*    border-radius: 100%; !* Hacemos los botones circulares *!*/
    /*    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); !* Sombra ligera *!*/
    /*    transition: transform 0.3s ease, box-shadow 0.3s ease; !* Efecto de hover *!*/
    /*}*/

/*    .floating-icons {*/
/*        position: fixed;*/
/*        top: 50%; !* Centramos verticalmente *!*/
/*        right: 20px; !* Pegamos los íconos al lado derecho *!*/
/*        transform: translateY(-50%); !* Centrado vertical ajustado *!*/
/*        display: flex;*/
/*        flex-direction: column; !* Colocamos los elementos en columna *!*/
/*        gap: 10px; !* Espaciado uniforme entre los íconos *!*/
/*        z-index: 2000; !* Aseguramos que los íconos estén encima *!*/
/*    }*/
/*    .floating-icons a {*/
/*        display: flex;*/
/*        justify-content: center; !* Centrado horizontal del ícono *!*/
/*        align-items: center; !* Centrado vertical del ícono *!*/
/*        transition: transform 0.3s ease; !* Efecto de hover *!*/
/*    }*/


/*.floating-icons a:hover {*/
/*        transform: scale(1.1); !* Agrandamos ligeramente al hacer hover *!*/
/*        box-shadow: 0 6px 12px rgba(0, 0, 0, 0); !* Sombra más pronunciada *!*/

/*    }*/
/*    .floating-icons svg {*/
/*        width: 30px; !* Tamaño uniforme para todos los íconos SVG *!*/
/*        height: 30px;*/
/*    }*/
.floating-icons {
    position: fixed;
    top: 50%; /* Centramos verticalmente */
    right: 20px; /* Pegamos los íconos al lado derecho */
    transform: translateY(-50%); /* Centrado vertical ajustado */
    display: flex;
    flex-direction: column; /* Colocamos los elementos en columna */
    gap: 10px; /* Espaciado uniforme entre los íconos */
    z-index: 2000; /* Aseguramos que los íconos estén encima */
}

.floating-icons a {
    position: relative; /* Necesario para que el pseudo-elemento ::before funcione */
    display: flex;
    justify-content: center; /* Centrado horizontal del ícono */
    align-items: center; /* Centrado vertical del ícono */
    width: 40px; /* Tamaño del ícono */
    height: 40px;
}

.floating-icons a::before {
    content: ""; /* Elemento de la onda */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background-color: currentColor; /* Usa el color del ícono SVG */
    border-radius: 50%; /* Hace la forma circular */
    opacity: 0.2; /* Onda inicial con transparencia */
    transform: translate(-50%, -50%); /* Centra la onda */
    z-index: -1; /* Se asegura de que la onda esté detrás del ícono */
    animation: ripple 2s infinite; /* Animación infinita */
}

/* Se define la animación de la onda */
@keyframes ripple {
    0% {
        width: 0;
        height: 0;
        opacity: 0.3; /* Suave al comienzo */
    }
    70% {
        width: 100px;
        height: 100px;
        opacity: 0.1; /* Se va desvaneciendo */
    }
    100% {
        width: 120px;
        height: 120px;
        opacity: 0; /* La onda desaparece al final */
    }
}

.floating-icons svg {
    width: 24px; /* Tamaño uniforme del ícono SVG */
    height: 24px;
    color: inherit; /* Hereda el color definido en el atributo style */
}

/* Colores específicos */
    .floating-icons .whatsapp {
        color: #25D366; /* Verde WhatsApp */
    }

    .floating-icons .linkedin {
        color: #0077b5; /* Azul LinkedIn */
    }

.nav-link svg {
    fill: #9e9e9e; /* Color gris inicial */
    transition: fill 0.3s ease; /* Transición suave al cambiar de color */
}

.nav-link:hover svg {
    fill: #007bff; /* Color principal (primario) al pasar el cursor */
}




/* === Galería de Clientes === */

/* Galería de Clientes */

/* Estructura de la grilla responsive */
.clients-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Ajusta dinámicamente el número de columnas */
    gap: 16px; /* Espaciado entre los elementos */
    justify-content: center;
    align-items: start;
    margin: 0 auto;
    padding: 16px; /* Añade espacio alrededor de la grilla */
}

/* Tarjetas base */
.client-card {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.client-card:hover {
    transform: translateY(-5px); /* Animación de hover */
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Sombra en hover */
}

/* Estilo de las imágenes */
.client-card img {
    width: 100%; /* Cubre todo el ancho del contenedor */
    height: auto; /* Mantiene las proporciones */
    object-fit: cover; /* Asegura que las imágenes llenen el contenedor sin deformarse */
    max-height: 200px; /* Altura máxima para las imágenes */
    transition: transform 0.3s ease; /* Zoom sutil al pasar el mouse */
}

.client-card img:hover {
    transform: scale(1.05); /* Efecto de zoom en hover */
}

/* Estilo del texto del cliente */
.client-name {
    margin: 12px 0;
    font-size: 1.2rem;
    font-weight: bold;
    color: var(--color-primary);
    transition: color 0.3s ease;

    /* Para mantener el texto en una sola línea */
    white-space: nowrap;       /* Evita saltos de línea */
    overflow: hidden;          /* Oculta el texto que se desborda */
    text-overflow: ellipsis;   /* Añade "..." al final si el texto es demasiado largo */
}


.client-name:hover {
    color: var(--color-accent);
}

/* Adaptaciones adicionales para pantallas pequeñas */
@media (max-width: 576px) {
    .clients-grid {
        gap: 12px; /* Reduce el espaciado en pantallas pequeñas */
    }

    .client-card {
        padding: 8px; /* Añade espacio interior en las tarjetas */
    }
}

    .clients-section {
        padding: 20px;
        background: #f8f9fb;
    }

    /* Grid adaptable */
    .clients-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* Exactamente tres columnas */
        gap: 24px; /* Espaciado entre las tarjetas */
        justify-content: center; /* Centraliza las columnas si hay menos de 3 */
        align-items: start; /* Alinea las tarjetas arriba */
        margin: 0 auto; /* Centra todo el grid */
    }


    /* Card */
    .client-card {
        background: #fff;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
        text-align: center;
        display: flex;
        flex-direction: column;
        max-width: 100%; /* Asegura que no exceda la columna */
    }


    .client-card img {
        width: 100%; /* Cubre el ancho del contenedor */
        height: auto; /* Mantiene proporciones */
        object-fit: cover; /* Asegura que no se deformen */
        transition: transform 0.3s ease; /* Animación sutil en hover */
    }

    /* REDIRECCION */
    html {
        scroll-behavior: smooth;
    }
    /* LOGO MODAL*/
    .modal-logo {
        width: 80px; /* Cambia el ancho del logo */
        height: auto; /* Mantiene la proporción del logo */
    }
    /* Carusell*/
    /*!* 🔹 Ajuste de imágenes en el carrusel *!*/
    /*.carousel-img {*/
    /*    height: 400px;         !* Puedes cambiar el tamaño según tu diseño *!*/
    /*    !*object-fit: contain;   !* Muestra toda la imagen completa *!*!*/
    /*    object-fit: cover;   !* Muestra toda la imagen completa *!*/
    /*    background: white;      !* Fondo para rellenar los espacios vacíos *!*/
    /*}*/
    /* ✅ Imagen completa con bordes */
    .carousel-img-cover {
    /* Configuración responsiva general */
    width: 100%;
    height: auto;              /* Altura automática para mantener proporción */
    object-fit: cover;         /* Asegura que cubra todo el espacio visible */
    max-height: 500px;         /* Altura máxima para pantallas grandes */
}

/* Para pantallas medianas (tablets) */
@media (max-width: 768px) {
    .carousel-img-cover {
        max-height: 350px;     /* Ajuste de altura para tablets */
        object-fit: cover;     /* Mantiene la cobertura ajustada */
    }
}

/* Para pantallas pequeñas (móviles) */
@media (max-width: 576px) {
    .carousel-img-cover {
        max-height: 200px;     /* Reduce más la altura para móviles */
    }
}

/* Ajuste de los controles del carrusel en pantallas pequeñas */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 50%;      /* Reduce el tamaño de los íconos */
}

.carousel-control-prev,
.carousel-control-next {
    width: 5%;                 /* Reduce el área visible de los controles */
}
/* Modal en pantallas pequeñas */
@media (max-width: 576px) {
    .modal-dialog {
        margin: 0; /* Centra el modal */
        max-width: 100%; /* Asegura que el ancho del modal sea el 100% */
        height: 100%; /* Asegura que el modal tenga el mismo alto que la pantalla */
    }

    .modal-content {
        width: 100%; /* Ancho completo del modal */
        height: 100%; /* Alto completo del modal */
        border-radius: 0; /* Eliminar bordes redondeados */
        margin: 0; /* Eliminar márgenes */
    }

    .modal-header, .modal-body, .modal-footer {
        padding: 1rem; /* Ajusta el padding interno */
    }

    .modal-body {
        overflow-y: auto; /* Habilita scroll si el contenido del modal es grande */
    }
}

.contact-row {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.contact-icon {
    margin-right: 5px; /* Separación mínima entre el ícono y el texto */
    stroke: var(--color-secondary); /* Color azul */
}

.contact-text p {
    color: var(--color-secondary); /* Color del texto */
    font-size: 14px; /* Tamaño de fuente más pequeño */
    font: bold;
    margin: 0; /* Elimina márgenes */
    padding: 0; /* Elimina rellenos */
}