header.header {
    position: fixed;
    z-index: 100;
}
img.img-fluid.diverge-logo {
    height: 65px;
}


/* SAYTEC - Header fixed transparente + estado con scroll */
header.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: transparent;
    transition: background-color 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

header.header .main-header {
    transition: padding 0.3s ease;
}

header.header.is-scrolled {
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}

header.header.is-scrolled .main-header {
    padding-top: 14px;
    padding-bottom: 14px;
}

header.header.is-scrolled .navbar-collapse .navbar-nav li a,
header.header.is-scrolled .navbar-collapse .navbar-nav .dropdown-toggle {
    color: #0f172a !important;
    font-size: 18px;
}

header.header.is-scrolled .navbar-collapse .navbar-nav .active > a,
header.header.is-scrolled .navbar-collapse .navbar-nav a:hover {
    color: var(--e-global-color-accent) !important;
}

header.header.is-scrolled .navbar-toggler-icon {
    background-color: #0f172a;
}

img.img-fluid.diverge-logo {
    height: 45px;
    width: auto;
    transition: height 0.3s ease;
}

header.header.is-scrolled img.img-fluid.diverge-logo {
    height: 45px;
}
.footer-section .row {
    justify-content: space-between;
}
img.logo-footer {
    height: 60px;
    margin-bottom: 20px;
}
.about-content-img img,
.about-us-section img,
.combine-section-content img{
    border-radius: 15px;
}
.top-banner-slider {
    position: relative;
}

.top-banner-slider .owl-stage {
    display: flex;
    align-items: center;
}

.top-banner-slider .owl-item {
    display: flex;
    align-items: center;
    height: 700px;
}

.top-banner-slider .top-banner-item {
    width: 100%;
}

/* Navegación por flechas. Los dots quedan desactivados en main.js; se ocultan
   también por CSS para que no reaparezcan si owl los reinyecta al redimensionar. */
.top-banner-slider .owl-dots {
    display: none !important;
}

.top-banner-slider .owl-nav {
    margin: 0;
}

.top-banner-slider .owl-nav button.owl-prev,
.top-banner-slider .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    width: 48px;
    height: 48px;
    margin: 0;
    padding: 0 !important;
    border-radius: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--e-global-color-secondary);
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.top-banner-slider .owl-nav button.owl-prev:hover,
.top-banner-slider .owl-nav button.owl-next:hover {
    background: var(--e-global-color-accent);
    border-color: var(--e-global-color-accent);
    color: var(--e-global-color-secondary);
}

.top-banner-slider .owl-nav button.owl-prev:focus,
.top-banner-slider .owl-nav button.owl-next:focus {
    outline: 2px solid var(--e-global-color-accent);
    outline-offset: 3px;
}

.top-banner-slider .owl-nav button.owl-prev {
    left: 10px;
}

.top-banner-slider .owl-nav button.owl-next {
    right: 10px;
}

.top-banner-slider .owl-nav button i {
    font-size: 18px;
    line-height: 1;
}

@media (min-width: 1401px) {

    .top-banner-slider .owl-nav button.owl-prev {
        left: 20px;
    }

    .top-banner-slider .owl-nav button.owl-next {
        right: 20px;
    }
}

@media (max-width: 991px) {

    .top-banner-slider .top-banner-item .row {
        text-align: center;
    }

    .top-banner-slider .banner-img-content {
        margin-bottom: 35px;
    }
}



























/* ==========================================
   SAYTEC - Fotos de servicio: radio uniforme
   ==========================================
   Las fotos de .about-content-img ya tenían 15px y las de .who-we-img-content
   no, así que dentro de una misma página unas salían redondeadas y otras no. */

.who-we-img-content img,
.our-services-section .icons-rounded-box img,
.whychooseus-section .icons-rounded-box img {
    border-radius: 15px;
}


/* ==========================================
   SAYTEC - FAQ en grilla de 2 por fila
   ==========================================
   Cada pregunta va sola dentro de su columna, así que todas las .accordion-card
   son :last-child y pierden el margin-bottom que las separaba. El espaciado
   vertical se traslada a la columna. */

.faq-section .faq-col {
    margin-bottom: 36px;
}

@media (max-width: 991px) {
    .faq-section .faq-col {
        margin-bottom: 30px;
    }
}

/* Las respuestas vienen de un WYSIWYG: el último párrafo no debe dejar hueco. */
.faq-section .accordian-inner .card-body > *:last-child {
    margin-bottom: 0;
}

/* ==========================================
   SAYTEC - Política de Privacidad
   ========================================== */

.privacy-page-intro {
    max-width: 680px;
    margin: 0 auto 1rem;
    color: #afb6d2;
}

.privacy-page-date {
    display: block;
    color: #aaa;
    font-size: .9rem;
    margin-bottom: 2rem;
}

.privacy-block {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    border-left: 4px solid #3dbaeb;
}

.privacy-block h4 {
    color: #1F3864;
    margin-bottom: 1rem;
}

/* Ambas cajas van sobre fondo blanco, así que comparten el color de texto.
   La de contacto quedaba fuera y su párrafo heredaba --e-global-color-text
   (#afb6d2), pensado para el fondo oscuro del sitio: se veía lavado. */
.privacy-block p,
.privacy-block .privacy-list li,
.privacy-block li,
.privacy-contact-box p,
.privacy-contact-box li {
    color: #555555;
}

.privacy-block a {
    color: #3dbaeb;
    text-decoration: none;
}

.privacy-block a:hover {
    text-decoration: underline;
}

.privacy-list {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.privacy-list li {
    padding: .4rem 0 .4rem 1.5rem;
    position: relative;
}

.privacy-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: .75rem;
    width: 7px;
    height: 7px;
    background: #3dbaeb;
    border-radius: 50%;
}

.privacy-contact-box {
    background: #ffffff;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 3rem;
    border-left: 4px solid #3dbaeb;
}

.privacy-contact-box h4 {
    color: #1F3864;
    margin-bottom: 1rem;
}

.privacy-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.privacy-contact-list li {
    padding: .5rem 0 .5rem 1.8rem;
    position: relative;
    color: #555555;
}

.privacy-contact-list .privacy-icon {
    position: absolute;
    left: 0;
    top: .7rem;
    color: #3dbaeb;
    font-size: .9rem;
}

.privacy-contact-list a {
    color: #3dbaeb;
    text-decoration: none;
}

.privacy-contact-list a:hover {
    text-decoration: underline;
}

.post-image img {
    border-radius: 10px;
}

/* El menú de la ubicación "Móvil" no debe asomar en la barra de escritorio. */
@media (min-width: 992px) {

    .navbar-collapse .navbar-nav-movil {
        display: none;
    }
}


/* ==========================================================================
   SAYTEC - AJUSTES SOLO MÓVIL  (nada aquí afecta al escritorio)
   ==========================================================================
   El menú de Bootstrap colapsa bajo 992px, así que ese es el corte de "móvil".
   ========================================================================== */

@media (max-width: 991px) {

    /* --- Cabecera: estado sólido, sombra y menú desplegable --------------- */

    /* La sombra debe verse POR ENCIMA del menú que baja. El header ya tiene
       z-index 1000 y el desplegable 5; se refuerza para que no dependa del
       orden del DOM. */
    header.header {
        z-index: 1200;
    }

    header.header.is-scrolled {
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.18);
    }

    /* El desplegable cuelga bajo la barra. Va en position:fixed con width:100%,
       así que los márgenes laterales NO pueden hacerse con margin (lo empujarían
       fuera de la pantalla por la derecha): se fijan con left/right y width:auto. */
    /* mobile.css declara width:100% !important en dos breakpoints, de ahí que
       el ancho automático también deba ir con !important. */
    header.header .navbar-collapse {
        left: 20px;
        right: 20px;
        width: auto !important;
        margin: 0;
        border-radius: 0 0 10px 10px;
        overflow: hidden;
        z-index: 1100;
        box-shadow: inset 0px 3px 10px 1px rgba(0, 0, 0, 0.3);
    }

    /* Enlaces oscuros sobre el fondo blanco del desplegable. */
    header.header .navbar-collapse .navbar-nav li a,
    header.header.is-scrolled .navbar-collapse .navbar-nav li a {
        color: #0f172a !important;
        display: block;
        padding: 14px 20px;
        transition: background-color 0.2s ease, color 0.2s ease;
        -webkit-tap-highlight-color: transparent;
    }

    /* Separación entre TODOS los enlaces: todos pesan igual. */
    header.header .navbar-collapse .navbar-nav li + li {
        border-top: 1px solid rgba(15, 23, 42, 0.10);
        padding: 5px 0;
    }

    /* :active explícito para anular el resaltado propio del navegador (algunos
       Android pintan un ámbar por defecto al mantener pulsado).

       Va duplicado con y sin .is-scrolled a propósito: más arriba existe la regla
       `header.header.is-scrolled .navbar-collapse .navbar-nav a:hover` que pinta
       el texto con --e-global-color-accent, o sea el MISMO azul que aquí se usa
       de fondo. Al tener 5 clases le ganaba a la versión sin .is-scrolled y el
       texto quedaba azul sobre azul, invisible. */
    header.header .navbar-collapse .navbar-nav li:hover > a,
    header.header .navbar-collapse .navbar-nav li:focus-within > a,
    header.header .navbar-collapse .navbar-nav li > a:active,
    header.header .navbar-collapse .navbar-nav li.current-menu-item > a,
    header.header.is-scrolled .navbar-collapse .navbar-nav li:hover > a,
    header.header.is-scrolled .navbar-collapse .navbar-nav li:focus-within > a,
    header.header.is-scrolled .navbar-collapse .navbar-nav li > a:active,
    header.header.is-scrolled .navbar-collapse .navbar-nav li.current-menu-item > a {
        background-color: #4aa5f0 !important;
        color: #ffffff !important;
    }

    /* En el desplegable manda el menú "Móvil"; el principal queda para la barra
       de escritorio. Solo se intercambian si hay un menú asignado a esa
       ubicación, para no dejar el sitio sin navegación. */
    .navbar-collapse.tiene-menu-movil .navbar-nav-principal {
        display: none;
    }

    /* Botón Contáctanos: separado del listado y sin ocupar todo el ancho. */
    header.header .navbar-collapse .btn-talk {
        margin: 0;
        padding: 18px 20px 22px;
        text-align: center;
        border-top: 1px solid rgba(15, 23, 42, 0.10);
    }

    /* mobile.css fuerza background: transparent !important en este botón, de ahí
       que haga falta !important para devolverle el fondo destacado. */
    header.header .navbar-collapse .btn-talk .nav-link.contact {
        display: inline-block;
        min-width: 190px;
        background-color: #4aa5f0 !important;
        color: #ffffff !important;
        text-align: center;
        border-radius: 999px;
        padding: 13px 34px;
        font-weight: 600;
        box-shadow: 0 6px 16px rgba(74, 165, 240, 0.35);
        -webkit-tap-highlight-color: transparent;
    }

    header.header .navbar-collapse .btn-talk .nav-link.contact:hover,
    header.header .navbar-collapse .btn-talk .nav-link.contact:active {
        background-color: #2f8fdc !important;
        color: #ffffff !important;
    }

    /* Velo borroso bajo el menú. Se inserta por JS y al tocarlo se cierra. */
    .saytec-velo {
        position: fixed;
        inset: 0;
        z-index: 1050;
        background: rgba(15, 23, 42, 0.35);
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
    }


    /* --- Páginas interiores: separarlas de la cabecera fija --------------- */

    /* El header es fixed, o sea que no ocupa espacio en el flujo: sin este
       respiro el contenido arranca debajo de él. En el home no aplica porque
       el banner está diseñado para quedar bajo la cabecera transparente. */
    body:not(.home) .home-header-section {
        padding-top: 100px;
    }


    /* --- Somos: las 3 fotos replican la composición del home -------------- */

    /* El markup difiere del home (una figura suelta más un row de dos columnas),
       así que la composición escalonada se arma con selectores estructurales.
       Ojo: hay DOS .row anidados —el de la sección y el de las dos fotos—, por
       eso cada selector baja explícitamente por .container > .row > div:first-child
       hasta la columna de las imágenes. */
    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child {
        position: relative;
        margin-bottom: -40px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .about-section-f1 {
        position: relative;
        left: -86px;
        top: 9px;
        text-align: center;
        margin-bottom: 0;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row {
        display: block;
        margin: 0;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div {
        position: relative;
        max-width: none;
        flex: none;
        width: auto;
        padding: 0;
        text-align: center;
    }

    /* Segunda foto: pequeña, desplazada a la derecha y subida. */
    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:first-child {
        left: 190px;
        top: -125px;
    }

    /* Tercera foto: la grande, centrada y solapando a las anteriores. */
    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:last-child {
        left: 59px;
        top: -100px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child img {
        width: auto;
        max-width: none;
    }


    /* --- Interiores: el texto se montaba sobre las fotos ------------------- */

    /* .about-content-img lleva margin-bottom negativo (-40px / -66px) para armar
       la composición solapada del home. En las páginas interiores ese contenedor
       aloja una sola foto, así que el margen negativo arrastraba el bloque de
       texto por encima de la imagen. */
    body:not(.home) .about-content-img {
        margin-bottom: 0 !important;
    }

    /* style.css usa .who-we-are-section .who-we-img-content con margin-left, así
       que hay que igualar esa especificidad para neutralizarlo y centrar. */
    .who-we-img-content,
    .who-we-are-section .who-we-img-content,
    .about-us-section .who-we-img-content {
        margin-left: auto;
        margin-right: auto;
        max-width: 100%;
    }

    .who-we-img-content img,
    .about-content-img img {
        max-width: 100%;
        height: auto;
        margin-bottom: 30px;
    }

    /* Las fotos de detalle quedan centradas en su columna. */
    .who-we-img-content,
    body:not(.home) .about-content-img {
        text-align: center;
    }


    /* --- Pie de página: todo centrado y sin iconos ------------------------- */

    .footer-section .footer-content1,
    .footer-section .contact-list,
    .footer-section .contact-us-ul,
    .footer-section .footer-legal-links {
        text-align: center;
    }

    .footer-section .contact-us-ul {
        padding-left: 0;
        margin-bottom: 40px;
    }

    /* Los iconos descuadraban las líneas al quedar sueltos tras el texto. */
    .footer-section .contact-us-ul .fa-icon,
    .footer-section .contact-us-ul .footer-location2 {
        display: none;
    }

    .footer-section .footer-content1 ul.list-unstyled {
        padding-left: 0;
    }

    .footer-section .footer-next-list-contact {
        text-align: center;
        margin: 20px 0 10px 0 !important;
    }

    /* Enlaces legales: presentes pero discretos. */
    .footer-section .footer-legal-links {
        margin-top: 18px;
        padding-left: 0;
    }

    .footer-section .footer-legal-links li {
        display: inline-block;
        margin: 0 8px;
    }

    .footer-section .footer-legal-links a {
        font-size: 13px;
        opacity: 0.7;
    }
}


@media (max-width: 767px) {

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child {
        margin-bottom: -66px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .about-section-f1 img {
        width: 278px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:first-child {
        left: 151px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:last-child img {
        width: 340px;
    }
}


@media (max-width: 575px) {

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .about-section-f1 {
        left: -56px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .about-section-f1 img {
        width: 214px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:first-child {
        left: 110px;
        top: -86px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:first-child img {
        width: 100px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:last-child {
        left: 0;
        top: -66px;
    }

    .page-template-page-nosotros .about-us-page-section .container > .row > div:first-child > .row > div:last-child img {
        width: 315px;
    }
}


/* ==========================================
   SAYTEC - Servicios: desktop fijo / mobile carrusel */
@media (min-width: 767px) {
    .our-services-section .owl-carousel {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 30px;
        width: 100%;
    }

    .our-services-section .owl-carousel .item {
        width: 100%;
    }

    .our-services-section .owl-carousel .owl-nav,
    .our-services-section .owl-carousel .owl-dots {
        display: none !important;
    }
}
.footer-section .footer-list .icon-list-box1 .footer-link-auto:hover {
    color: #3dbaeb;
}
.about-us-content.aos-init.aos-animate {
    padding: 100px 0 100px;
}


.carousel-indicators li img {
    display: none;
}