header.header {
    position: fixed;
    z-index: 100;
}
img.img-fluid.diverge-logo {
    height: 65px;
}
.combine-section-content img {
    width: 100%;
    height: auto;
}



/* 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: 17px;
}

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;
    width: 200px;
}
.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: 750px;
}

.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;
}
.ficha-team {
    justify-content: center;
}





@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: 0;
}


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

/* =====================================================================
   SAYTEC — FORMULARIO DE CONTACTO (Contact Form 7)
   =====================================================================
   El formulario antiguo estaba escrito a mano y usaba <button>. Contact
   Form 7 genera <input type="submit">, así que las reglas del diseño
   original no lo alcanzaban. Acá se replica el mismo aspecto y se dan
   estilo a la casilla de consentimiento y a los mensajes de validación.
   ===================================================================== */

/* --- Botón de envío: mismo aspecto que el <button> del diseño --------- */

.contact-us-form .contact-us-wrapper .form-btn input[type="submit"],
.contact-us-form .contact-us-wrapper .form-btn button {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 42px;
    transition: background 0.25s ease, border-color 0.25s ease;
}

.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:hover,
.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:focus-visible {
    background: #0b5ed7;
    border-color: #0b5ed7;
}

/*
   Contact Form 7 mantiene el botón bloqueado hasta que se marca la casilla
   de consentimiento: es su forma de exigir el consentimiento. Tiene que
   NOTARSE, si no parece que el botón está roto.
*/
.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:disabled,
.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:disabled:hover {
    background: #adb5bd;
    border-color: #adb5bd;
    cursor: not-allowed;
    opacity: 1;
}

/* Mientras el envío está en curso. */
.contact-us-form .wpcf7-form.submitting .contact-us-wrapper .form-btn input[type="submit"] {
    cursor: progress;
    opacity: 0.7;
}

/* --- Separación entre campos ------------------------------------------ */

.contact-us-form .contact-us-wrapper .wpcf7-form-control-wrap {
    display: block;
    margin-bottom: 18px;
}

/* --- Casilla de consentimiento ---------------------------------------- */

.contact-us-form .saytec-consentimiento {
    margin: 6px 0 22px;
    text-align: left;
}

.contact-us-form .saytec-consentimiento .wpcf7-list-item {
    margin: 0;
}

.contact-us-form .saytec-consentimiento label {
    align-items: flex-start;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 400;
    gap: 10px;
    line-height: 1.5;
    margin: 0;
}

.contact-us-form .saytec-consentimiento input[type="checkbox"] {
    flex: 0 0 auto;
    height: 18px;
    margin-top: 2px;
    width: 18px;
}

.contact-us-form .saytec-consentimiento a {
    text-decoration: underline;
}

/* --- Mensajes de validación y de resultado ---------------------------- */

.contact-us-form .wpcf7-not-valid-tip {
    display: block;
    font-size: 13px;
    margin-top: 6px;
    text-align: left;
}

.contact-us-form .wpcf7-form-control.wpcf7-not-valid {
    border: 1px solid #dc3545;
}

.contact-us-form .wpcf7-response-output {
    border-radius: 6px;
    border-width: 1px;
    font-size: 15px;
    margin: 24px 0 0;
    padding: 14px 18px;
    text-align: left;
}

/* Enviado con éxito. */
.contact-us-form .wpcf7-form.sent .wpcf7-response-output {
    background: #e8f6ee;
    border-color: #198754;
    color: #0f5132;
}

/* Error de validación, de envío o spam. */
.contact-us-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-us-form .wpcf7-form.unaccepted .wpcf7-response-output,
.contact-us-form .wpcf7-form.failed .wpcf7-response-output,
.contact-us-form .wpcf7-form.aborted .wpcf7-response-output,
.contact-us-form .wpcf7-form.spam .wpcf7-response-output {
    background: #fdeceb;
    border-color: #dc3545;
    color: #842029;
}

/* --- Accesibilidad: foco visible en todos los campos ------------------ */

.contact-us-form .wpcf7-form-control:focus-visible,
.contact-us-form .saytec-consentimiento input[type="checkbox"]:focus-visible {
    outline: 2px solid #0d6efd;
    outline-offset: 2px;
}


/* =====================================================================
   SAYTEC — BLOG: LISTADO, ARCHIVOS Y BUSCADOR
   =====================================================================
   La página del blog era una maqueta estática. Ahora lee las entradas
   reales, tiene filtro por línea de negocio y paginación de verdad.
   Estos estilos visten los elementos nuevos con el lenguaje del sitio.
   ===================================================================== */

/* El H1 del listado toma el mismo aspecto que tenían los H2 de sección,
   para no cambiar el diseño al corregir la jerarquía de encabezados. */
.blog-posts h1.saytec-titulo-listado {
    color: var(--e-global-color-secondary);
    font-size: 40px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 24px;
}

.blog-posts .saytec-bajada-listado {
    margin: 0 auto 24px;
    max-width: 760px;
}

.blog-posts .saytec-bajada-listado p {
    margin-bottom: 0;
}

/* --- Filtro por línea de negocio -------------------------------------- */

.saytec-filtros-blog {
    margin: 0 0 42px;
    text-align: center;
}

.saytec-filtros-blog ul {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-filtros-blog a {
    border: 1px solid rgba(13, 110, 253, 0.35);
    border-radius: 999px;
    display: inline-block;
    font-size: 14px;
    line-height: 1.2;
    padding: 9px 20px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.saytec-filtros-blog a:hover,
.saytec-filtros-blog a:focus-visible,
.saytec-filtros-blog a.activo {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
}

/* --- Paginación -------------------------------------------------------- */

.saytec-paginacion {
    margin-top: 26px;
    text-align: center;
}

.saytec-paginacion ul.page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-paginacion .page-numbers {
    /* border: 1px solid rgba(13, 110, 253, 0.35); */
    border-radius: 6px;
    display: inline-block;
    line-height: 1.2;
    min-width: 42px;
    padding: 11px 14px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.saytec-paginacion a.page-numbers:hover,
.saytec-paginacion a.page-numbers:focus-visible {
    background: rgba(13, 110, 253, 0.12);
}

.saytec-paginacion .page-numbers.current {
    background: #0d6efd;
    border-color: #0d6efd;
    color: #fff;
    font-weight: 600;
}

.saytec-paginacion .page-numbers.dots {
    border-color: transparent;
}

/* --- Sin resultados ---------------------------------------------------- */

.saytec-sin-entradas {
    padding: 50px 20px 20px;
}

.saytec-sin-entradas p {
    font-size: 18px;
    margin-bottom: 18px;
}

/* --- Buscador ---------------------------------------------------------- */

.saytec-buscador {
    display: flex;
    gap: 10px;
    margin: 0 0 42px;
}

.saytec-buscador .form-control {
    flex: 1 1 auto;
}

.saytec-buscador .btn {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    border-radius: 6px;
    color: #fff;
    flex: 0 0 auto;
    font-weight: 600;
    padding: 12px 26px;
}

/* --- Tarjetas: alto parejo aunque los títulos midan distinto ----------- */

.blog-posts #blog .post-item {
    display: flex;
    height: 100%;
}

.blog-posts #blog .post-item-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.blog-posts #blog .post-item-description {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.blog-posts #blog .post-item-description .item-link {
    margin-top: auto;
}

.blog-posts #blog .post-image img {
    aspect-ratio: 380 / 250;
    height: auto;
    object-fit: cover;
    width: 100%;
}

@media (max-width: 991px) {
    .blog-posts h1.saytec-titulo-listado {
        font-size: 30px;
    }

    .saytec-buscador {
        flex-direction: column;
    }
}


/* =====================================================================
   SAYTEC — FICHA DE ARTÍCULO
   =====================================================================
   Migas de pan, puente hacia la línea de negocio, artículos
   relacionados y navegación entre entradas.
   ===================================================================== */

/* --- Migas de pan ------------------------------------------------------ */

.saytec-migas {
    margin-bottom: 22px;
}

.saytec-migas ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-migas li {
    align-items: center;
    display: flex;
    font-size: 14px;
    gap: 10px;
}

.saytec-migas li + li::before {
    content: "›";
    opacity: 0.5;
}

.saytec-migas a {
    text-decoration: none;
}

.saytec-migas a:hover,
.saytec-migas a:focus-visible {
    text-decoration: underline;
}

.saytec-migas [aria-current="page"] {
    opacity: 0.7;
}

/* --- Puente hacia la línea de negocio ---------------------------------- */

.saytec-cta-linea {
    border: 1px solid rgba(13, 110, 253, 0.25);
    border-left: 4px solid #0d6efd;
    border-radius: 8px;
    margin: 46px 0;
    padding: 30px 32px;
}

.saytec-cta-linea__antetitulo {
    font-size: 13px;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    opacity: 0.75;
    text-transform: uppercase;
}

.saytec-cta-linea__titulo {
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px;
}

.saytec-cta-linea__texto {
    margin-bottom: 22px;
}

.saytec-cta-linea__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.saytec-boton {
    border-radius: 6px;
    display: inline-block;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 13px 26px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}

.saytec-boton--principal {
    background: #0d6efd;
    border: 1px solid #0d6efd;
    color: #fff;
}

.saytec-boton--principal:hover,
.saytec-boton--principal:focus-visible {
    background: #0b5ed7;
    border-color: #0b5ed7;
    color: #fff;
}

.saytec-boton--secundario {
    background: transparent;
    border: 1px solid #0d6efd;
}

.saytec-boton--secundario:hover,
.saytec-boton--secundario:focus-visible {
    background: rgba(13, 110, 253, 0.12);
}

/* --- Artículos relacionados -------------------------------------------- */

.saytec-relacionadas {
    margin: 46px 0;
}

.saytec-relacionadas__titulo {
    font-size: 24px;
    margin-bottom: 18px;
}

.saytec-relacionadas__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-relacionadas__lista li + li {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.saytec-relacionadas__lista a {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    justify-content: space-between;
    padding: 15px 0;
    text-decoration: none;
}

.saytec-relacionadas__lista a:hover .saytec-relacionadas__nombre,
.saytec-relacionadas__lista a:focus-visible .saytec-relacionadas__nombre {
    text-decoration: underline;
}

.saytec-relacionadas__nombre {
    flex: 1 1 260px;
    font-weight: 600;
}

.saytec-relacionadas__fecha {
    font-size: 14px;
    opacity: 0.7;
}

/* --- Navegación entre artículos ---------------------------------------- */

.saytec-nav-entradas {
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 40px;
    padding-top: 26px;
}

.saytec-nav-entradas .nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
}

.saytec-nav-entradas .nav-previous,
.saytec-nav-entradas .nav-next {
    flex: 1 1 250px;
}

.saytec-nav-entradas .nav-next {
    text-align: right;
}

.saytec-nav-entradas a {
    text-decoration: none;
}

.saytec-nav-etiqueta {
    display: block;
    font-size: 13px;
    letter-spacing: 0.06em;
    margin-bottom: 4px;
    opacity: 0.7;
    text-transform: uppercase;
}

.saytec-nav-titulo {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.saytec-nav-entradas a:hover .saytec-nav-titulo,
.saytec-nav-entradas a:focus-visible .saytec-nav-titulo {
    text-decoration: underline;
}

/* --- Tiempo de lectura -------------------------------------------------- */

.single-post01 .post-meta-lectura {
    opacity: 0.8;
}

@media (max-width: 767px) {
    .saytec-cta-linea {
        padding: 24px 20px;
    }

    .saytec-cta-linea__titulo {
        font-size: 22px;
    }

    .saytec-nav-entradas .nav-next {
        text-align: left;
    }
}


/* =====================================================================
   SAYTEC — ESTABILIDAD VISUAL DE LOS CARRUSELES
   =====================================================================
   Owl Carousel trae en su propio CSS la regla `.owl-carousel{display:none}`
   y solo la levanta cuando termina de inicializarse, ya con el JavaScript
   cargado. Hasta ese instante el bloque OCUPA CERO y de pronto aparece
   entero, empujando hacia abajo todo lo que viene después. Ese salto era
   el CLS 1,018 de la portada (lo aceptable es menos de 0,1).

   Acá se hace visible el bloque desde el primer momento, mostrando
   exactamente los elementos que van a quedar cuando Owl arranque. La
   altura es la misma antes y después, así que no hay salto. No hace falta
   nada de JavaScript: Owl agrega la clase .owl-loaded al inicializarse y
   estas reglas dejan de aplicar solas.
   ===================================================================== */

/* --- Banner principal: una diapositiva a la vez ------------------------ */

.top-banner-slider:not(.owl-loaded) {
    display: block;
}

.top-banner-slider:not(.owl-loaded) > .top-banner-item:nth-child(n + 2) {
    display: none;
}

/* --- Líneas de negocio ------------------------------------------------- */
/* Desde 767px base.css ya lo convierte en grilla de 3 y Owl no arranca.  */

@media (max-width: 575.98px) {
    .our-services-section .owl-carousel:not(.owl-loaded) {
        display: block;
    }

    .our-services-section .owl-carousel:not(.owl-loaded) > .item:nth-child(n + 2) {
        display: none;
    }
}

@media (min-width: 576px) and (max-width: 766.98px) {
    .our-services-section .owl-carousel:not(.owl-loaded) {
        display: flex;
        gap: 30px;
    }

    .our-services-section .owl-carousel:not(.owl-loaded) > .item {
        flex: 0 0 calc((100% - 30px) / 2);
    }

    .our-services-section .owl-carousel:not(.owl-loaded) > .item:nth-child(n + 3) {
        display: none;
    }
}

/* --- Logos de clientes: 3, 4 o 6 según el ancho ------------------------ */

.partners-section .owl-carousel:not(.owl-loaded) {
    display: flex;
    gap: 30px;
    overflow: hidden;
}

.partners-section .owl-carousel:not(.owl-loaded) > * {
    flex: 0 0 calc((100% - 60px) / 3);
}

.partners-section .owl-carousel:not(.owl-loaded) > *:nth-child(n + 4) {
    display: none;
}

@media (min-width: 576px) {
    .partners-section .owl-carousel:not(.owl-loaded) > * {
        flex: 0 0 calc((100% - 90px) / 4);
    }

    .partners-section .owl-carousel:not(.owl-loaded) > *:nth-child(n + 5) {
        display: none;
    }
}

@media (min-width: 992px) {
    .partners-section .owl-carousel:not(.owl-loaded) > * {
        flex: 0 0 calc((100% - 150px) / 6);
    }

    .partners-section .owl-carousel:not(.owl-loaded) > *:nth-child(n + 7) {
        display: none;
    }
}

/* --- Flechas y puntos del carrusel: reservar su espacio ---------------- */

/*
   Los controles los crea Owl al arrancar. Reservando su alto desde el
   principio, aparecer no empuja nada.
*/
.top-banner-slider .owl-nav,
.our-services-section .owl-carousel .owl-nav,
.partners-section .owl-carousel .owl-nav {
    min-height: 0;
}


/* =====================================================================
   SAYTEC — ÍCONOS
   =====================================================================
   Los íconos del sitio son SVG dibujados dentro del HTML, del set Lucide.
   Antes convivían tres familias distintas: PNG 3D subidos a la mediateca
   para las tarjetas, Font Awesome para las viñetas y Dashicons para las
   redes sociales. Peor todavía: los 30 íconos de tarjeta eran en realidad
   tres archivos repetidos, y las tres líneas de negocio mostraban el mismo
   sobre con signo de exclamación.
   ===================================================================== */

/* Todos los íconos heredan el color del texto que los rodea. */
.saytec-icono {
    display: inline-block;
    flex: 0 0 auto;
    vertical-align: middle;
}

/* --- Ícono de tarjeta: anillo + disco ---------------------------------- */

.saytec-disco {
    align-items: center;
    flex: 0 0 auto;
    background: radial-gradient(circle at 50% 50%, rgba(74, 165, 240, 0.10), transparent 70%);
    border: 1px solid rgba(74, 165, 240, 0.22);
    border-radius: 50%;
    display: inline-flex;
    height: 96px;
    justify-content: center;
    width: 96px;
}

.saytec-disco__interior {
    align-items: center;
    background: linear-gradient(160deg, #2b6fb0 0%, #14283f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    box-shadow: 0 10px 22px -10px rgba(74, 165, 240, 0.6);
    color: #fff;
    display: flex;
    height: 70px;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    width: 70px;
}

.saytec-disco .saytec-icono {
    height: 32px;
    width: 32px;
}

/* Al pasar el cursor, el disco se eleva apenas y el halo crece un poco. */
.services-content:hover .saytec-disco__interior,
.offer-section-box:hover .saytec-disco__interior,
.icons-rounded-box:hover .saytec-disco__interior {
    box-shadow: 0 14px 28px -10px rgba(74, 165, 240, 0.78);
    transform: translateY(-3px);
}

/*
   Quien haya pedido menos animaciones en su sistema operativo no ve ningún
   movimiento. Es un ajuste de accesibilidad, no un capricho: para algunas
   personas el movimiento en pantalla provoca mareo.
*/
@media (prefers-reduced-motion: reduce) {
    .saytec-disco__interior {
        transition: none;
    }

    .services-content:hover .saytec-disco__interior,
    .offer-section-box:hover .saytec-disco__interior,
    .icons-rounded-box:hover .saytec-disco__interior {
        transform: none;
    }
}

/* El contenedor heredado centraba una <figure>; ahora centra el disco. */
.icons-rounded-box {
    display: flex;
    justify-content: center;
}

.our-services-section .icons-rounded-box,
.whychooseus-section .icons-rounded-box {
    margin-bottom: 18px;
}

/* --- Íconos en línea --------------------------------------------------- */

/* Viñetas de las listas de puntos. */
.saytec-icono--check.saytec-vineta {
    margin-right: 8px;
    color: #3dbaeb;
    height: 25px;
    width: 25px;
}

/* Íconos del pie: teléfono, correo y dirección. */
.footer-section .saytec-icono {
    margin-right: 6px;
}

/* Redes sociales. */
.saytec-rrss .marginLeft + .marginLeft {
    margin-left: 14px;
}

.saytec-rrss a,
.social-icons a {
    align-items: center;
    display: inline-flex;
    justify-content: center;
}

/* Flechas del carrusel. */
.owl-nav .saytec-icono {
    height: 20px;
    width: 20px;
}

/* Estrellas de los testimonios: van rellenas, no de contorno. */
.saytec-icono--star {
    height: 16px;
    width: 16px;
}

@media (max-width: 767px) {
    .saytec-disco {
        height: 84px;
        width: 84px;
    }

    .saytec-disco__interior {
        height: 62px;
        width: 62px;
    }

    .saytec-disco .saytec-icono {
        height: 28px;
        width: 28px;
    }
}


/* =====================================================================
   SAYTEC — JERARQUÍA DE ENCABEZADOS
   =====================================================================
   Diez de las once páginas del sitio no tenían ningún H1, y la portada
   tenía dos. El H1 es el título principal de una página: sin él, ni quien
   usa un lector de pantalla ni el buscador saben de qué trata lo que
   están viendo.

   Al corregirlo, varios títulos que eran H2 pasaron a ser H1, y la segunda
   diapositiva del banner pasó de H1 a H2. El diseño NO debe cambiar por
   eso, así que acá se les devuelve el tamaño exacto que tenían.

   Los valores salen de super-classes.css (h1 60px, h2 46/55), que es el
   archivo que manda en este sitio: se carga después de mobile.css y no
   usa consultas de ancho, así que sus tamaños se aplican en todas las
   pantallas. Por eso este bloque tampoco lleva consultas de ancho: si las
   llevara, estos títulos se comportarían distinto al resto del sitio.
   ===================================================================== */

/* --- Títulos de página que antes eran H2: conservan el tamaño del H2 --- */

h1.saytec-titulo-pagina,
.our-services-section h1 {
    font-size: 46px;
    font-weight: 700;
    line-height: 55px;
}

/* --- Segunda diapositiva del banner, ahora H2: conserva el del H1 ------ */

h2.saytec-titulo-hero {
    font-size: 60px;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.05;
    word-spacing: 0;
}

/* --- Márgenes: los mismos que tenía el H2 en cada sección -------------- */

.about-us-section h1.saytec-titulo-pagina,
.about-us-page-section h1.saytec-titulo-pagina {
    color: var(--e-global-color-secondary);
    margin-bottom: 33px;
}

.our-services-section h1 {
    color: var(--e-global-color-secondary);
    margin-bottom: 46px;
}

.faq-section h1.saytec-titulo-pagina {
    color: var(--e-global-color-secondary);
    margin-bottom: 35px;
}

.contact-page-section h1.saytec-titulo-pagina {
    color: var(--e-global-color-secondary);
    margin-bottom: 12px;
}

.contact-page-section .saytec-bajada-pagina {
    margin: 0 auto 46px;
    max-width: 640px;
}

@media only screen and (max-width: 991px) {
    h1.saytec-titulo-pagina,
    .our-services-section h1 {
        font-size: 34px;
        line-height: 40px;
    }

    h2.saytec-titulo-hero {
        font-size: 42px;
    }

    .about-us-section h1.saytec-titulo-pagina,
    .about-us-page-section h1.saytec-titulo-pagina {
        margin-bottom: 16px;
    }
}

@media screen and (max-width: 575px) {
    h1.saytec-titulo-pagina,
    .our-services-section h1 {
        font-size: 28px;
        line-height: 34px;
    }

    h2.saytec-titulo-hero {
        font-size: 34px;
    }
}


/* =====================================================================
   SAYTEC — CONTRASTE: TEXTO OSCURO SOBRE FONDO OSCURO
   =====================================================================
   El tema define en super-classes.css que TODOS los encabezados van en
   #242b44, un azul muy oscuro. Pero el fondo del sitio también es azul
   muy oscuro (#1b2137). El resultado es texto prácticamente invisible:
   el contraste medido daba 1,14 sobre 1, cuando el mínimo legible es 4,5.

   El tema tapaba el problema declarando el color blanco sección por
   sección. Cada elemento nuevo que no estuviera en esa lista nacía
   invisible. Acá se corrige de raíz: sobre fondo oscuro, el texto es
   claro, y punto.

   Todos los valores de este bloque están medidos: ninguno baja de 4,5
   para texto normal ni de 3 para texto grande.
   ===================================================================== */

/* --- Ficha del artículo ------------------------------------------------ */

.single-post-blog .post-item-description h1 {
    color: #fff;                                   /* contraste 15,3 : 1 */
}

.single-post-blog .post-meta,
.single-post-blog .post-meta .color01,
.single-post-blog .post-meta-date,
.single-post-blog .post-meta-lectura,
.single-post-blog .post-meta time {
    color: #c3cbe4;                                /* contraste 9,7 : 1  */
}

.single-post-blog .post-meta-category a {
    color: #7cc0f7;                                /* contraste 7,4 : 1  */
}

.single-post-blog .post-meta-category a:hover,
.single-post-blog .post-meta-category a:focus-visible {
    color: #fff;
}

/* Texto del artículo: más grande, para lectura larga. */
.single-post-blog .entry-content {
    color: #d6dcee;
    font-size: 19px;
    line-height: 32px;
}

.single-post-blog .entry-content p,
.single-post-blog .entry-content li {
    color: #d6dcee;
    font-size: 19px;
    line-height: 32px;
    margin-bottom: 22px;
}

.single-post-blog .entry-content h2,
.single-post-blog .entry-content h3,
.single-post-blog .entry-content h4,
.single-post-blog .entry-content h5,
.single-post-blog .entry-content h6 {
    color: #fff;
}

.single-post-blog .entry-content h2 {
    font-size: 30px;
    line-height: 38px;
    margin: 38px 0 16px;
}

.single-post-blog .entry-content h3 {
    font-size: 24px;
    line-height: 32px;
    margin: 30px 0 14px;
}

.single-post-blog .entry-content a {
    color: #7cc0f7;
    text-decoration: underline;
}

.single-post-blog .entry-content a:hover,
.single-post-blog .entry-content a:focus-visible {
    color: #fff;
}

.single-post-blog .entry-content strong {
    color: #fff;
}

/* --- Caja "¿Necesitas ayuda con…?" ------------------------------------ */

.saytec-cta-linea__antetitulo {
    color: #7cc0f7;                                /* contraste 7,4 : 1  */
    opacity: 1;
}

.saytec-cta-linea__titulo {
    color: #fff;
}

.saytec-cta-linea__texto {
    color: #d6dcee;                                /* contraste 11,4 : 1 */
}

/* --- Segunda diapositiva del banner ----------------------------------- */

/*
   Al corregir la jerarquía de encabezados, el titular de la segunda
   diapositiva pasó de H1 a H2 y perdió el color blanco que traía la regla
   del H1. Quedaba invisible.
*/
h2.saytec-titulo-hero {
    color: #fff;
}

/* --- Navegación entre artículos --------------------------------------- */

.saytec-nav-entradas .saytec-nav-etiqueta {
    color: #7cc0f7;
    opacity: 1;
}

.saytec-nav-entradas .saytec-nav-titulo {
    color: #fff;
}

.saytec-nav-entradas {
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* --- Barra lateral ----------------------------------------------------- */

.single-post-blog .sidebar .widget-title {
    color: #fff;
}

.single-post-blog .sidebar a {
    color: #d6dcee;
}

.single-post-blog .sidebar a:hover,
.single-post-blog .sidebar a:focus-visible {
    color: #fff;
}


/* =====================================================================
   SAYTEC — BOTONES Y ETIQUETAS SOBRE AZUL
   =====================================================================
   El azul de la paleta es #4AA5F0. Es un azul claro: con texto blanco
   encima el contraste medido es 2,65 sobre 1, muy por debajo del mínimo
   de 4,5 que hace falta para que un texto se lea con comodidad.

   Por eso el relleno de los botones usa #2B6FB0 —el mismo azul oscuro
   que ya está en el degradado de los discos de los íconos, o sea que no
   es un color nuevo— y el #4AA5F0 queda para el borde, el estado
   señalado y el foco. Así el azul de la paleta sigue presente y el texto
   se lee: 5,2 sobre 1.
   ===================================================================== */

/* --- Buscador de la barra lateral -------------------------------------- */

.saytec-buscador {
    align-items: stretch;
    display: flex;
    gap: 10px;
    margin: 0 0 34px;
}

.saytec-buscador .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(74, 165, 240, 0.45);
    border-radius: 8px;
    color: #fff;
    flex: 1 1 auto;
    font-size: 15px;
    height: 48px;
    line-height: 1.2;
    min-width: 0;
    padding: 0 16px;
}

.saytec-buscador .form-control::placeholder {
    color: #9aa6c4;
    opacity: 1;
}

.saytec-buscador .form-control:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: #4aa5f0;
    box-shadow: 0 0 0 3px rgba(74, 165, 240, 0.25);
    color: #fff;
    outline: none;
}

.saytec-buscador .btn,
.saytec-buscador button[type="submit"] {
    background: #2b6fb0;
    border: 1px solid #2b6fb0;
    border-radius: 8px;
    color: #fff;
    cursor: pointer;
    flex: 0 0 auto;
    font-size: 15px;
    font-weight: 600;
    height: 48px;
    line-height: 1;
    padding: 0 22px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.saytec-buscador .btn:hover,
.saytec-buscador .btn:focus-visible,
.saytec-buscador button[type="submit"]:hover,
.saytec-buscador button[type="submit"]:focus-visible {
    background: #4aa5f0;
    border-color: #4aa5f0;
    color: #0f1c2e;                                /* navy sobre azul claro: 6,5 : 1 */
}

/* --- Etiquetas de categoría de las tarjetas del listado ---------------- */

/*
   Solo la pastilla que va sobre la imagen de la tarjeta. En la ficha del
   artículo la categoría es texto suelto, no una pastilla: si le aplicáramos
   este fondo, el texto celeste quedaría sobre azul (1,98 sobre 1).
*/
#blog .post-item .post-image .post-meta-category a {
    color: #fff;
}

/* La categoría de la ficha del artículo: texto suelto, sin fondo. */
.single-post-blog .post-item-description .post-meta .post-meta-category,
.single-post-blog .post-item-description .post-meta .post-meta-category a {
    background: none;
    color: #7cc0f7;
}

.single-post-blog .post-item-description .post-meta .post-meta-category a:hover,
.single-post-blog .post-item-description .post-meta .post-meta-category a:focus-visible {
    color: #fff;
}

/* --- Filtros por línea de negocio -------------------------------------- */

.saytec-filtros-blog a {
    border-color: rgba(74, 165, 240, 0.45);
    color: #d6dcee;
}

.saytec-filtros-blog a:hover,
.saytec-filtros-blog a:focus-visible,
.saytec-filtros-blog a.activo {
    background: #2b6fb0;
    border-color: #2b6fb0;
    color: #fff;
}

/* --- Paginación --------------------------------------------------------- */

.saytec-paginacion .page-numbers {
    /* border-color: rgba(74, 165, 240, 0.45); */
    color: #d6dcee;
}

.saytec-paginacion a.page-numbers:hover,
.saytec-paginacion a.page-numbers:focus-visible {
    background: rgba(74, 165, 240, 0.18);
    color: #fff;
}

.saytec-paginacion .page-numbers.current {
    background: #2b6fb0;
    border-color: #2b6fb0;
    color: #fff;
}

/* --- Botones de la caja de ayuda --------------------------------------- */

.saytec-boton--principal {
    background: #2b6fb0;
    border-color: #2b6fb0;
    color: #fff;
}

.saytec-boton--principal:hover,
.saytec-boton--principal:focus-visible {
    background: #4aa5f0;
    border-color: #4aa5f0;
    color: #0f1c2e;
}

/* Botón de WhatsApp: verde propio de la marca, con texto blanco. */
.saytec-boton--whatsapp {
    align-items: center;
    background: #1f8f4e;
    border: 1px solid #1f8f4e;
    color: #fff;
    display: inline-flex;
    gap: 10px;
}

.saytec-boton--whatsapp:hover,
.saytec-boton--whatsapp:focus-visible {
    background: #187a41;
    border-color: #187a41;
    color: #fff;
}

.saytec-boton--whatsapp .saytec-icono {
    height: 20px;
    width: 20px;
}

/* --- Botón de envío del formulario de contacto ------------------------- */

.contact-us-form .contact-us-wrapper .form-btn input[type="submit"],
.contact-us-form .contact-us-wrapper .form-btn button {
    background: #2b6fb0;
    border-color: #2b6fb0;
}

.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:hover,
.contact-us-form .contact-us-wrapper .form-btn input[type="submit"]:focus-visible {
    background: #4aa5f0;
    border-color: #4aa5f0;
    color: #0f1c2e;
}


/* =====================================================================
   SAYTEC — LISTADO DEL BLOG: AIRE
   =====================================================================
   Las tarjetas quedaban muy apretadas, tanto entre filas como por dentro.
   ===================================================================== */

.blog-posts #blog .row {
    row-gap: 34px;
}

.blog-posts #blog .post-item {
    border-color: rgba(255, 255, 255, 0.10) !important;
    border-radius: 12px;
    margin-bottom: 0 !important;
    overflow: hidden;
}

/* La regla original de custom-style.css es más específica: hay que igualarla. */
.blog-posts #blog .post-item.border > .post-item-wrap > .post-item-description,
.blog-posts #blog .post-item-description {
    padding: 28px 26px 32px;
}

.blog-posts #blog .post-item-description .post-meta-date {
    display: block;
    margin-bottom: 12px;
}

.blog-posts #blog .post-item-description > h2 {
    margin-bottom: 14px;
}

.blog-posts #blog .post-item-description p {
    margin-bottom: 22px;
}

.blog-posts #blog .post-item .post-image {
    margin-bottom: 0;
}

/* Un poco más de aire entre el encabezado del listado y las tarjetas. */
.blog-posts #blog {
    margin-top: 8px;
}

@media (max-width: 767px) {
    .blog-posts #blog .post-item-description {
        padding: 22px 20px 26px;
    }
}


/* =====================================================================
   SAYTEC — BARRA LATERAL: ARTÍCULOS RECIENTES
   =====================================================================
   Imagen arriba, título debajo, sin fecha.
   ===================================================================== */

.single-post-blog .sidebar .post-thumbnail-list {
    display: grid;
    gap: 22px;
}

.single-post-blog .sidebar .post-thumbnail-entry {
    display: block;
    margin: 0;
}

.single-post-blog .sidebar .post-thumbnail-enlace {
    display: block;
    text-decoration: none;
}

.single-post-blog .sidebar .post-thumbnail-enlace img {
    border-radius: 4px;
    display: block;
    height: auto;
    margin-bottom: 10px;
    object-fit: cover;
    width: 25%;
}

.single-post-blog .sidebar .post-thumbnail-titulo {
    color: #fff;
    display: block;
    font-size: 14px;
    font-weight: 100;
    line-height: 22px;
}

.single-post-blog .sidebar .post-thumbnail-enlace:hover .post-thumbnail-titulo,
.single-post-blog .sidebar .post-thumbnail-enlace:focus-visible .post-thumbnail-titulo {
    color: #7cc0f7;
}

.single-post-blog .sidebar .widget {
    margin-bottom: 8px;
}

.single-post-blog .sidebar .widget-title {
    font-size: 20px;
    margin-bottom: 18px;
}


/* =====================================================================
   SAYTEC — CONTRASTE: ÚLTIMOS AJUSTES
   =====================================================================
   Después de quitar el !important de custom-style.css, base.css ya puede
   ajustar cada caso. Acá van los que necesitan un color propio, con la
   especificidad suficiente para ganarle a la regla general .blog-posts p.
   ===================================================================== */

/* La caja de ayuda: título y párrafo en blanco, antetítulo en azul claro. */

.blog-posts .saytec-cta-linea .saytec-cta-linea__antetitulo {
    color: #7cc0f7;                                /* contraste 7,4 : 1 */
    opacity: 1;
}

.blog-posts .saytec-cta-linea .saytec-cta-linea__texto {
    color: #fff;                                   /* contraste 15,3 : 1 */
}

/* Cuerpo del artículo: un punto más claro, para lectura larga. */

.single-post-blog .entry-content p,
.single-post-blog .entry-content li,
.blog-posts .single-post01 .entry-content p {
    color: #d6dcee;                                /* contraste 11,4 : 1 */
    font-size: 19px;
    line-height: 32px;
}

/* Botón de WhatsApp: verde más profundo para que el blanco se lea. */

.saytec-boton--whatsapp {
    background: #157a3f;                           /* contraste 5,4 : 1 */
    border-color: #157a3f;
}

.saytec-boton--whatsapp:hover,
.saytec-boton--whatsapp:focus-visible {
    background: #0f6634;
    border-color: #0f6634;
}

/*
   Botón "Contáctanos" del encabezado: estaba en blanco sobre el celeste
   de marca (#3dbaeb), que da 2,23 sobre 1. En vez de cambiar el color de
   marca, se invierte el texto a azul muy oscuro: el celeste se mantiene
   igual y el contraste sube a 7,4 sobre 1.
*/
.home-header-section .main-header .navbar-collapse .btn-talk a.nav-link.contact,
.home-header-section .btn-talk a.nav-link.contact,
.header .btn-talk a.nav-link.contact {
    color: #fff;
    font-weight: 700;
}

.home-header-section .main-header .navbar-collapse .btn-talk a.nav-link.contact:hover,
.home-header-section .main-header .navbar-collapse .btn-talk a.nav-link.contact:focus-visible {
    color: #0f1c2e;
}


/* =====================================================================
   SAYTEC — BOTONES SOBRE EL AZUL DE MARCA
   =====================================================================
   Varios botones del sitio usan el azul de marca #4AA5F0 con texto
   blanco encima. Medido, ese par da 2,65 sobre 1: por debajo del 4,5
   que hace falta para leer con comodidad, y bastante por debajo.

   En vez de cambiar el azul de marca —que es parte de la identidad—, se
   invierte el texto a azul muy oscuro. El botón se ve igual de azul y el
   texto pasa a 6,5 sobre 1.
   ===================================================================== */

.home-banner-section .banner-container-box .banner-btn a,
.about-us-section .about-us-content .banner-btn a,
.our-teams-section .about-us-content .banner-btn a,
.our-services-section .services-content a:hover,
.our-services-section .owl-carousel .item .services-content .services-box a:hover,
.banner-btn.discover-btn-banner a {
    color: #0f1c2e;
    font-weight: 700;
}

/* Y su estado normal, cuando el fondo todavía es transparente. */
.our-services-section .services-content .services-box a {
    font-weight: 600;
}


/* =====================================================================
   SAYTEC — CONTRASTE EN LA PÁGINA DE CONTACTO
   ===================================================================== */

/*
   El antetítulo "Contacto": las demás secciones del sitio declaran su
   color, pero .contact-page-section no lo hacía y el h6 heredaba el azul
   oscuro por defecto. Quedaba invisible (1,08 sobre 1).
*/
.contact-page-section .autorix-text {
    color: var(--e-global-color-accent);           /* contraste 5,3 : 1 */
}

/*
   Texto de la casilla de consentimiento. Es el texto que la Ley 21.719
   exige mostrar antes de recoger datos: no puede quedar ilegible.
*/
.contact-us-form .saytec-consentimiento,
.contact-us-form .saytec-consentimiento label,
.contact-us-form .wpcf7-list-item-label {
    color: #d6dcee;                                /* contraste 11,4 : 1 */
}

.contact-us-form .saytec-consentimiento a {
    color: #7cc0f7;
}

.contact-us-form .saytec-consentimiento a:hover,
.contact-us-form .saytec-consentimiento a:focus-visible {
    color: #fff;
}

/* Campos del formulario: texto legible y borde visible. */
.contact-us-form .form-control {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(74, 165, 240, 0.35);
    color: #fff;
}

.contact-us-form .form-control::placeholder {
    color: #9aa6c4;
    opacity: 1;
}

.contact-us-form .form-control:focus {
    background: rgba(255, 255, 255, 0.10);
    border-color: #4aa5f0;
    color: #fff;
}

/* El campo trampa no debe entrar en ningún cálculo visual. */
.saytec-trampa,
.saytec-trampa * {
    color: transparent;
}


/* =====================================================================
   SAYTEC — ENLACES SOBRE FONDO CLARO
   =====================================================================
   En las páginas legales el bloque de contacto va sobre fondo blanco,
   pero los enlaces usaban el celeste claro de marca (#3dbaeb): 2,23
   sobre 1 contra el blanco, ilegible. Se usa el azul oscuro de la misma
   familia, que sobre blanco da 5,2 sobre 1.
   ===================================================================== */

.privacy-contact-list a,
.faq-section .privacy-contact-list a {
    color: #2b6fb0;
}

.privacy-contact-list a:hover,
.privacy-contact-list a:focus-visible {
    color: #14283f;
    text-decoration: underline;
}


/* --- Llamado a WhatsApp del encabezado de cada línea de negocio -------- */

.banner-btn.discover-btn-banner a.saytec-cta-whatsapp {
    align-items: center;
    display: inline-flex;
    gap: 10px;
}

.banner-btn.discover-btn-banner a.saytec-cta-whatsapp .saytec-icono {
    height: 20px;
    width: 20px;
}


/* --- Controles del carrusel: tamaño mínimo para el dedo ---------------- */

/*
   Las flechas y los puntos medían menos de lo que se puede tocar con
   comodidad en un teléfono. El mínimo recomendado es 44x44 píxeles.
*/
.owl-nav button.owl-prev,
.owl-nav button.owl-next {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
}

.owl-dots .owl-dot {
    min-height: 30px;
    min-width: 30px;
    padding: 8px;
}

.owl-nav button.owl-prev:focus-visible,
.owl-nav button.owl-next:focus-visible,
.owl-dots .owl-dot:focus-visible {
    outline: 2px solid #4aa5f0;
    outline-offset: 2px;
}


/* =====================================================================
   SAYTEC — HALOS DECORATIVOS EN CSS, NO EN IMÁGENES
   =====================================================================
   El diseño tenía manchas de color difusas en las esquinas de varias
   secciones. Estaban hechas con PNG reales de entre 300 KB y 950 KB
   cada uno, que el navegador descargaba en cada visita: unos 3,7 MB por
   página para dibujar unos degradados.

   Uno de ellos, why-choose-left-img.png, pesaba 774 KB, se descargaba en
   cuatro páginas y su contenedor medía 0x0: nunca lo vio nadie.

   Ahora los mismos halos se dibujan con degradados de CSS. Pesan cero,
   escalan perfecto en cualquier pantalla y no bloquean nada.
   ===================================================================== */

/*
   Halo del encabezado, arriba a la derecha. Reemplaza a
   header-right-img.png (880 KB, se descargaba en las 11 páginas).
*/
.home-header-section {
    position: relative;
}

.home-header-section::before {
    background: radial-gradient(circle at 82% 8%, rgba(74, 165, 240, 0.20) 0%, rgba(74, 165, 240, 0) 55%),
        radial-gradient(circle at 96% 2%, rgba(61, 186, 235, 0.16) 0%, rgba(61, 186, 235, 0) 42%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    width: 100%;
    height: 100%;
    transform: rotateZ(180deg);
}

.home-header-section > * {
    position: relative;
    z-index: 1;
}

/*
 * EXCEPCIÓN: el botón flotante de WhatsApp.
 *
 * La regla de arriba existe para levantar el contenido por encima del halo
 * decorativo del fondo, y le pone `position: relative` a TODO hijo directo. En
 * las plantillas donde el botón del plugin cuelga de este contenedor —las
 * entradas del blog, por ejemplo— eso le pisaba el `position: fixed` propio: en
 * vez de flotar siempre abajo a la derecha, quedaba plantado al final del pie y
 * solo se veía al llegar hasta ahí.
 *
 * Se le devuelven su posición fija y su capa. El halo no le afecta: flota muy
 * por encima de todo.
 */
.home-header-section > .joinchat {
    position: fixed;
    z-index: 9000;
}

/*
   Halo izquierdo de las secciones "Sobre nosotros" y del formulario.
   Reemplaza a about-left-background.png y contact-before-img.png.
*/
.about-us-section,
.about-us-page-section,
.contact-us-form,
.whychooseus-section {
    position: relative;
}

.about-us-section::before,
.about-us-page-section::before,
.contact-us-form::before,
.whychooseus-section::before {
    background: radial-gradient(circle at 8% 42%, rgba(74, 165, 240, 0.14) 0%, rgba(74, 165, 240, 0) 48%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
}

.about-us-section > .container,
.about-us-page-section > .container,
.contact-us-form > .container,
.whychooseus-section > .container {
    position: relative;
    z-index: 1;
}

/*
   Halo derecho de la sección "Quiénes somos".
   Reemplaza a who-we-right.png (925 KB, en 4 páginas).
*/
.who-we-are-section {
    position: relative;
}

.who-we-are-section::before {
    background: radial-gradient(circle at 92% 30%, rgba(74, 165, 240, 0.14) 0%, rgba(74, 165, 240, 0) 46%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    right: 0 !important;
}

.who-we-are-section > .container {
    position: relative;
    z-index: 1;
}

/*
   Fondos decorativos que el tema cargaba por CSS. Los cinco primeros
   estaban en contenedores ocultos o de tamaño cero: se descargaban sin
   que nadie los viera nunca.
*/
.who-we-are-section .section-2::after,
.contact-us-form::after,
.whychooseus-section::after,
.about-us-section::after,
.about-us-page-section::after,
.teams-combine-section::after,
.carousel-section:before,
.carousel-section::after,
.home-header-section .sub-banner-section .sub-banner-outer:before {
    background: none !important;
    content: none !important;
}


/* =====================================================================
   SAYTEC — CLÁUSULAS DE LAS PÁGINAS LEGALES
   =====================================================================
   Cada cláusula numerada era un H4 colgando directo del H1, saltándose
   dos niveles. Ahora es H2, que es lo que corresponde. Para que el
   diseño no cambie, conserva el tamaño que tenía como H4.
   ===================================================================== */

.faq-section h2.saytec-clausula,
.saytec-clausula {
    font-size: 24px;
    font-weight: 600;
    line-height: 32px;
    margin-bottom: 14px;
    margin-top: 34px;
}

@media (max-width: 767px) {
    .faq-section h2.saytec-clausula,
    .saytec-clausula {
        font-size: 20px;
        line-height: 28px;
    }
}


/* =====================================================================
   SAYTEC — PREGUNTAS FRECUENTES
   =====================================================================
   Cada pregunta pasó a estar dentro de un H3. El botón sigue adentro,
   así que el acordeón funciona igual; lo que cambia es que ahora la
   pregunta forma parte del índice de la página. Ese H3 no debe agregar
   ningún espacio ni cambiar la tipografía: hereda todo del botón.
   ===================================================================== */

.faq-section .accordion-card .card-header h2.faq-pregunta,
.faq-section .accordion-card .card-header h3.faq-pregunta {
    font-size: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin: 0;
    padding: 0;
}


/* =====================================================================
   SAYTEC — ENLACES ENTRE LÍNEAS DE NEGOCIO
   =====================================================================
   Cada página de línea era un callejón sin salida: desde Ciberseguridad
   no se llegaba a TI ni a Telecomunicaciones salvo volviendo al menú.
   ===================================================================== */

.saytec-otras-lineas {
    padding: 70px 0 70px;
}

.saytec-otras-lineas__antetitulo {
    text-align: center;
}

.saytec-otras-lineas__titulo {
    margin-bottom: 38px;
    text-align: center;
}

.saytec-otras-lineas__grilla {
    display: grid;
    gap: 22px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.saytec-otras-lineas__tarjeta {
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(74, 165, 240, 0.22);
    border-radius: 12px;
    display: flex;
    gap: 18px;
    padding: 24px 26px;
    text-decoration: none;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.saytec-otras-lineas__tarjeta:hover,
.saytec-otras-lineas__tarjeta:focus-visible {
    background: rgba(74, 165, 240, 0.10);
    border-color: rgba(74, 165, 240, 0.5);
    transform: translateY(-2px);
}

.saytec-otras-lineas__icono {
    align-items: center;
    background: linear-gradient(160deg, #2b6fb0 0%, #14283f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: #fff;
    display: flex;
    flex: 0 0 auto;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.saytec-otras-lineas__texto {
    flex: 1 1 auto;
    min-width: 0;
}

.saytec-otras-lineas__nombre {
    color: #fff;
    display: block;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 6px;
}

.saytec-otras-lineas__bajada {
    color: #c3cbe4;
    display: block;
    font-size: 14px;
    line-height: 21px;
}

.saytec-otras-lineas__flecha {
    color: #7cc0f7;
    flex: 0 0 auto;
}

@media (prefers-reduced-motion: reduce) {
    .saytec-otras-lineas__tarjeta {
        transition: none;
    }

    .saytec-otras-lineas__tarjeta:hover {
        transform: none;
    }
}

@media (max-width: 767px) {
    .saytec-otras-lineas__grilla {
        grid-template-columns: 1fr;
    }

    .saytec-otras-lineas {
        padding: 46px 0 20px;
    }
}


/* =====================================================================
   SAYTEC — BARRA DE COOKIES
   =====================================================================
   Aparece una sola vez, hasta que la persona decide. Mientras no haya
   decisión, ninguna cookie de medición se activa: eso lo gobierna
   Google Consent Mode, declarado antes que cualquier otra etiqueta.
   ===================================================================== */

.saytec-cookies {
    bottom: 0;
    left: 0;
    padding: 16px;
    position: fixed;
    right: 0;
    z-index: 9500;
}

.saytec-cookies[hidden] {
    display: none;
}

.saytec-cookies__caja {
    background: #141a2e;
    border: 1px solid rgba(74, 165, 240, 0.35);
    border-radius: 14px;
    box-shadow: 0 18px 48px -18px rgba(0, 0, 0, 0.75);
    margin: 0 auto;
    max-width: 940px;
    padding: 24px 26px;
}

.saytec-cookies__titulo {
    color: #fff;
    font-size: 20px;
    line-height: 1.3;
    margin: 0 0 8px;
}

.saytec-cookies__texto {
    color: #d6dcee;
    font-size: 15px;
    line-height: 23px;
    margin: 0 0 18px;
}

.saytec-cookies__texto a {
    color: #7cc0f7;
    text-decoration: underline;
}

.saytec-cookies__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.saytec-cookies__btn {
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 22px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.saytec-cookies__btn--principal {
    background: #2b6fb0;
    border: 1px solid #2b6fb0;
    color: #fff;
}

.saytec-cookies__btn--principal:hover,
.saytec-cookies__btn--principal:focus-visible {
    background: #4aa5f0;
    border-color: #4aa5f0;
    color: #0f1c2e;
}

.saytec-cookies__btn--secundario {
    background: transparent;
    border: 1px solid rgba(74, 165, 240, 0.5);
    color: #d6dcee;
}

.saytec-cookies__btn--secundario:hover,
.saytec-cookies__btn--secundario:focus-visible {
    background: rgba(74, 165, 240, 0.14);
    color: #fff;
}

.saytec-cookies__btn--texto {
    background: transparent;
    border: 1px solid transparent;
    color: #7cc0f7;
    text-decoration: underline;
}

.saytec-cookies__btn--texto:hover,
.saytec-cookies__btn--texto:focus-visible {
    color: #fff;
}

.saytec-cookies__btn:focus-visible {
    outline: 2px solid #4aa5f0;
    outline-offset: 2px;
}

/* --- Panel de categorías ---------------------------------------------- */

.saytec-cookies__panel {
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin-top: 20px;
    padding-top: 20px;
}

.saytec-cookies__panel[hidden] {
    display: none;
}

.saytec-cookies__categoria + .saytec-cookies__categoria {
    margin-top: 14px;
}

.saytec-cookies__fila {
    align-items: flex-start;
    color: #c3cbe4;
    cursor: pointer;
    display: flex;
    font-size: 14px;
    gap: 12px;
    line-height: 21px;
    margin: 0;
}

.saytec-cookies__fila input[type="checkbox"] {
    flex: 0 0 auto;
    height: 18px;
    margin-top: 2px;
    width: 18px;
}

.saytec-cookies__fila input[type="checkbox"]:disabled {
    opacity: 0.6;
}

.saytec-cookies__fila strong {
    color: #fff;
    display: block;
    margin-bottom: 2px;
}

.saytec-cookies__panel .saytec-cookies__botones {
    margin-top: 20px;
}
figure.mb-0.about-section-f1 img {
    width: 255px;
    height: auto;
}

figure.mb-0.about-section-f2 img {
    width: 150px;
    height: auto;
}
figure.mb-0.about-section-f3 img {
    width: 100%;
    height: auto;
}
.home-banner-section.overflow-hidden.position-relative {
    padding-top: 80px;
}

.owl-carousel .owl-item img {
    display: block;
    width: 100%;
    border-radius: 10px;
    height: 650px;
    box-shadow: 5px 7px 14px 2px #3dbaeb8c;
}





/* --- Botón para volver a abrir la configuración ------------------------ */

/*
   El botón vive dentro de .footer-section, como su último elemento, y se
   posiciona respecto de ese contenedor. Para eso el pie necesita ser el
   ancestro posicionado: sin la línea de abajo, position:absolute lo
   anclaría al documento entero y quedaría en cualquier parte.
*/
.footer-section {
    position: relative;
}

.saytec-cookies__reabrir {
    background: #141a2e;
    border: 1px solid rgba(74, 165, 240, 0.35);
    border-radius: 8px;
    bottom: 14px;
    color: #d6dcee;
    cursor: pointer;
    font-size: 13px;
    left: 14px;
    padding: 9px 14px;
    position: absolute;
    z-index: 9400;
}

.saytec-cookies__reabrir[hidden] {
    display: none;
}

.saytec-cookies__reabrir:hover,
.saytec-cookies__reabrir:focus-visible {
    border-color: #4aa5f0;
    color: #fff;
}

@media (max-width: 575px) {
    .saytec-cookies {
        padding: 10px;
    }

    .saytec-cookies__caja {
        padding: 20px 18px;
    }

    .saytec-cookies__botones .saytec-cookies__btn {
        flex: 1 1 100%;
        text-align: center;
    }
}


/* =====================================================================
   SAYTEC — PREGUNTAS Y RESPUESTAS DE CADA LÍNEA
   =====================================================================
   La respuesta directa va destacada y en su propio párrafo: es la que
   se lee de una pasada y la que un asistente de IA puede citar entera.
   El desarrollo va debajo, más discreto.
   ===================================================================== */

.saytec-preguntas-linea {
    padding: 70px 0 20px;
}

.saytec-preguntas-linea__antetitulo {
    text-align: center;
}

.saytec-preguntas-linea__titulo {
    margin-bottom: 42px;
    text-align: center;
}

/*
   Dos columnas. Se usa grid-template-columns y no column-count: esta última
   pertenece a la maquetación en columnas tipo diario, que es otro sistema y
   que un contenedor display:grid ignora por completo. Además repartiría el
   contenido en flujo continuo (todo lo de la izquierda primero y después lo
   de la derecha), no de a pares por fila, que es lo que hace falta acá.

   Con esta regla las preguntas se acomodan solas de dos en dos a medida que
   se agreguen. Si el total es impar, la última queda sola en la columna
   izquierda, con el mismo ancho que las demás.

   minmax(0, 1fr) en vez de 1fr: sin eso, un texto largo sin espacios puede
   ensanchar su columna y descuadrar la fila.
*/
.saytec-preguntas-linea__lista {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
}

.saytec-qa {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(74, 165, 240, 0.18);
    border-left: 3px solid #2b6fb0;
    border-radius: 10px;
    padding: 26px 28px;
}

.saytec-qa__pregunta {
    color: #fff;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 12px;
}

.saytec-qa__respuesta {
    color: #fff;
    font-size: 17px;
    font-weight: 500;
    line-height: 27px;
    margin: 0 0 12px;
}

.saytec-qa__detalle {
    color: #c3cbe4;
    font-size: 15px;
    line-height: 25px;
    margin: 0;
}
.about-us-page-section .col-xl-6.col-lg-5.col-md-12.col-sm-12.order-lg-1.order-2 img {
    width: 100%;
}
.ficha-team {
    justify-content: center;
    padding: 50px 0 20px;
}
h2.saytec-clausula {
    color: #171d34;
}
.saytec-avanzados {
    padding: 40px 0 0;
}








@media (max-width: 991px) {
    /* Bajo 992px no entran dos columnas legibles: se apilan. */
    .saytec-preguntas-linea__lista {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {
    .saytec-preguntas-linea {
        padding: 46px 0 10px;
    }

    .saytec-qa {
        padding: 22px 20px;
    }

    .saytec-qa__pregunta {
        font-size: 18px;
    }

    .saytec-qa__respuesta {
        font-size: 16px;
        line-height: 25px;
    }
}


/* --- Títulos de las secciones nuevas: color explícito ------------------ */

/*
   Los encabezados del tema heredan un azul casi negro por defecto y cada
   sección lo corrige por su cuenta. Las secciones nuevas no estaban en esa
   lista, así que sus títulos nacían invisibles sobre el fondo oscuro. Se
   declara el color acá, para que no dependa de en qué sección caigan.
*/
.saytec-preguntas-linea__titulo,
.saytec-otras-lineas__titulo,
.saytec-preguntas-linea h2,
.saytec-otras-lineas h2 {
    color: #fff;
}

.saytec-preguntas-linea__antetitulo,
.saytec-otras-lineas__antetitulo {
    color: var(--e-global-color-accent);
}

/* ---------------------------------------------------------------------------
 * PREGUNTAS DENTRO DE UN ARTÍCULO DEL BLOG
 *
 * El mismo bloque que en las páginas de línea, pero dentro de la columna del
 * artículo. Se alinea con el texto de la entrada, que lleva 26 px de relleno
 * lateral: sin esto el bloque sobresale y las preguntas quedan corridas
 * respecto de los párrafos de arriba.
 * ------------------------------------------------------------------------ */

.saytec-preguntas-linea--en-columna {
    padding-bottom: 0;
    padding-top: 10px;
}

.saytec-preguntas-linea__caja {
    padding-left: 26px;
    padding-right: 26px;
}

@media (max-width: 767px) {
    .saytec-preguntas-linea__caja {
        padding-left: 20px;
        padding-right: 20px;
    }
	.footer-section .footer-section-text {
		max-width: 100%;
	    padding: 10px 20px;
    }
}

/* ---------------------------------------------------------------------------
 * BARRA LATERAL DEL ARTÍCULO QUE ACOMPAÑA EL SCROLL
 *
 * El artículo es mucho más largo que la barra lateral, así que al bajar
 * quedaba media pantalla vacía a la derecha. Ahora la barra baja con la
 * lectura y se detiene al llegar al final de su columna, justo antes del pie.
 *
 * La barra (unos 1.380 px) es más alta que la pantalla, así que el tope de
 * pegado es NEGATIVO: se calcula en barra-lateral.js como
 * (alto de pantalla - respiro) - alto de la barra. Con eso queda visible su
 * parte de abajo y lo que sale de cuadro es el comienzo, que ya se leyó.
 *
 * Ojo: `bottom` NO sirve para esto. El anclaje por abajo actúa al subir, no al
 * bajar, así que con `bottom` la barra simplemente se va de pantalla.
 *
 * DOS DETALLES QUE HAY QUE RESPETAR
 *
 * 1. `align-self: flex-start`. Las filas de Bootstrap estiran sus columnas al
 *    alto de la más alta. Una columna estirada no tiene por dónde moverse, así
 *    que sin esto el pegado no ocurre aunque esté declarado.
 *
 * 2. `overflow-x: clip` en vez de `overflow: hidden`. Dos contenedores de esta
 *    página traían overflow oculto, y eso convierte al ancestro en un contexto
 *    de scroll propio que anula el pegado. Se reemplaza por `clip`, que sigue
 *    recortando a los lados —lo que evitaba la barra horizontal durante las
 *    animaciones— pero deja el eje vertical libre.
 * ------------------------------------------------------------------------ */

/*
 * El recorte lateral va en todos los anchos, porque la clase utilitaria que lo
 * hacía se quitó de la plantilla. Sin esto, en celular podría aparecer barra
 * horizontal durante las animaciones de entrada.
 */
.single-post .single-post-blog {
    overflow-x: clip;
    overflow-y: visible;
}

@media (min-width: 992px) {

    .single-post .home-header-section {
        overflow-x: clip;
        overflow-y: visible;
    }

    .single-post .single-post-blog > .container > .row {
        align-items: flex-start;
    }

    .single-post aside.sidebar {
        align-self: flex-start;
        position: sticky;
        top: var(--saytec-tope-barra, 110px);
    }
}

/* ---------------------------------------------------------------------------
 * PIE: TEXTO LEGAL Y FRANJA PARA LOS BOTONES FLOTANTES
 *
 * 1. La fila del pie traía la canaleta negativa de Bootstrap (margin: 0 -15px)
 *    pero su único hijo no es una columna, así que nadie la compensaba: el
 *    bloque terminaba midiendo 30 px más que la pantalla. En un celular eso
 *    dejaba el texto de copyright centrado dentro de una caja más ancha que la
 *    ventana, con las puntas cortadas —se leía «ytec copyright © 2026…»—.
 *    Sin la canaleta el texto queda centrado de verdad y parte en dos líneas
 *    cuando hace falta.
 *
 * 2. Los dos botones flotantes —Cookies abajo a la izquierda y WhatsApp abajo
 *    a la derecha— quedaban encima del texto legal al llegar al final. Como
 *    ambos flotan, la única forma de que no tapen nada es reservarles una
 *    franja propia: el texto termina antes y ellos ocupan ese espacio vacío.
 * ------------------------------------------------------------------------ */

.footer-section .footer-bar .row {
    margin-left: 0;
    margin-right: 0;
}

.footer-section .footer-bar-content {
    padding-left: 15px;
    padding-right: 15px;
}

/*
 * Alto de la franja: el botón de WhatsApp mide 60 px y se separa 14 del borde,
 * así que con 88 px ninguno de los dos llega a pisar una letra.
 */
.footer-section {
    padding-bottom: 96px;
}

@media (max-width: 575px) {

    /*
     * En pantallas angostas el texto legal necesita las dos líneas completas,
     * así que se le da algo más de aire respecto del botón de Cookies.
     */
    .footer-section {
        padding-bottom: 96px;
    }
}

/* ---------------------------------------------------------------------------
 * BOTÓN DE WHATSAPP EN CELULAR
 *
 * El plugin lo deja a 6 px del borde inferior. En un teléfono esa franja es
 * justo donde el navegador dibuja su propia barra de herramientas, que solo se
 * esconde al desplazarse: por eso el botón parece «aparecer» recién cuando uno
 * baja, aunque en el código esté visible desde el primer momento.
 *
 * Se sube un poco y se suma el área segura del dispositivo, que es la franja
 * que reservan los teléfonos con muesca o barra de gestos.
 * ------------------------------------------------------------------------ */

@media (max-width: 767px) {

    .joinchat {
        --bottom: calc(18px + env(safe-area-inset-bottom, 0px));
    }
}

/* ---------------------------------------------------------------------------
 * ETIQUETAS DEL ARTÍCULO: QUE NO SE PARTAN
 *
 * Venían como cajas en línea (`display: inline`), y una caja en línea sí se
 * puede cortar entre dos renglones: una etiqueta de dos palabras quedaba
 * partida en dos pastillas, una al final de una fila y otra al principio de la
 * siguiente, cada una con su propio borde redondeado.
 *
 * Con `inline-block` la pastilla es indivisible: si no entra en la fila, baja
 * entera. Es exactamente lo que ya hacían las etiquetas de la barra lateral,
 * que se ven bien.
 *
 * No se usa `white-space: nowrap` a propósito: si alguna vez hay una etiqueta
 * muy larga en una pantalla angosta, conviene que su texto se acomode en dos
 * renglones DENTRO de la pastilla antes que desbordar la pantalla.
 * ------------------------------------------------------------------------ */

.single-post01 .post-tags a {
    display: inline-block;
}

/* ===========================================================================
   BANNER PRINCIPAL A PANTALLA COMPLETA
   ===========================================================================

   Antes el hero era 50/50: texto a la izquierda y una foto con esquinas
   redondeadas a la derecha. Ahora la foto es el FONDO de la diapositiva, con
   un velo negro encima (el ::after que pediste) y el texto leyéndose por
   arriba.

   TRES DECISIONES QUE CONVIENE CONOCER

   1. La foto arranca en 0,0. El bloque ya empezaba pegado al borde superior
      de la página; lo que lo bajaba era un relleno de 80 px. Ese relleno se
      movió al CONTENIDO, así que la foto ahora cubre desde arriba del todo,
      por debajo del encabezado fijo, y se ancla en su esquina superior
      izquierda (`background-position: 0 0`). En celular se centra, para que
      se vea el medio de la foto y no una esquina.

   2. Va a lo ancho completo. El contenedor traía 15 px de aire a cada lado;
      con una foto de fondo eso dejaba dos franjas del color de la página a
      los costados y parecía un error. El texto sí queda dentro de un ancho
      máximo, para que no se pegue al borde.

   3. El alto se mantiene: 830 px, los mismos que ocupaba antes entre el
      relleno superior y la altura de la diapositiva.
   ======================================================================== */

.home-banner-section.overflow-hidden.position-relative {
    padding-bottom: 0;
    padding-top: 0;
}

.home-banner-section .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

.top-banner-slider .owl-item {
    align-items: stretch;
    height: 830px;
}

.top-banner-slider .owl-stage {
    align-items: stretch;
}

.top-banner-item {
    align-items: center;
    /* Color de respaldo mientras la foto carga y por si una fila no tiene. */
    background-color: #14203a;
    background-position: 0 0;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    height: 100%;
    min-height: 830px;
    position: relative;
    width: 100%;
}

/* El velo. Sin él, el texto blanco no se lee sobre las zonas claras. */
.top-banner-item::after {
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.55) 55%, rgba(0, 0, 0, 0.42) 100%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
}

.top-banner-item__caja {
    margin: 0 auto;
    max-width: 1170px;
    /* El relleno superior deja libre el alto del encabezado fijo. */
    padding: 94px 30px 0;
    position: relative;
    width: 100%;
    z-index: 2;
}

/*
 * La maqueta original empujaba este bloque con rellenos laterales enormes
 * (hasta 278 px en mobile.css) para esquivar la foto que estaba al lado. Ya no
 * hay foto al lado: se anulan.
 */
.home-banner-section .banner-container-box .home-banner-text {
    max-width: 640px;
    padding: 0;
}

.home-banner-section .banner-container-box .home-banner-text .banner-paragraph {
    margin-bottom: 28px;
    max-width: 520px;
}

.banner-btn-hero {
    margin-top: 4px;
}


/* --- Celular y tablet -------------------------------------------------- */

@media (max-width: 991px) {

    /* Centrada: se ve el medio de la foto, que es donde está el motivo. */
    .top-banner-item {
        background-position: center center;
    }

    /*
     * Velo parejo. El degradado del escritorio oscurece más la izquierda,
     * que es donde va el texto allá; acá el texto está centrado, así que
     * corresponde un negro uniforme.
     */
    .top-banner-item::after {
        background: rgba(0, 0, 0, 0.6);
    }

    .top-banner-item__caja {
        padding-left: 24px;
        padding-right: 24px;
        padding-top: 80px;
        text-align: center;
    }

    .home-banner-section .banner-container-box .home-banner-text {
        margin: 0 auto;
        max-width: 560px;
    }

    .home-banner-section .banner-container-box .home-banner-text .banner-paragraph {
        margin-left: auto;
        margin-right: auto;
    }
}


/* ===========================================================================
   ENTRADA DEL CONTENIDO DEL BANNER

   La foto se desvanece (lo resuelve Owl con las clases de más abajo) y encima
   entra el texto escalonado: primero el titular, que BAJA mientras aparece;
   después la bajada, que solo aparece; y por último el botón, que baja igual
   que el titular.

   Las animaciones cuelgan de `.owl-item.active`, así que se repiten cada vez
   que la diapositiva vuelve a entrar, no solo la primera vez.
   ======================================================================== */

@keyframes saytec-hero-baja {
    from {
        opacity: 0;
        transform: translateY(-28px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes saytec-hero-aparece {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes saytec-hero-foto-entra {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes saytec-hero-foto-sale {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.top-banner-slider .owl-item.active .saytec-titulo-hero {
    animation: saytec-hero-baja 0.8s 0.15s both;
}

.top-banner-slider .owl-item.active .banner-paragraph {
    animation: saytec-hero-aparece 0.9s 0.5s both;
}

.top-banner-slider .owl-item.active .banner-btn-hero {
    animation: saytec-hero-baja 0.8s 0.75s both;
}

/* Clases que Owl aplica al cambiar de diapositiva (ver assets/js/main.js). */
.top-banner-slider .saytec-foto-entra {
    animation: saytec-hero-foto-entra 0.9s both;
}

.top-banner-slider .saytec-foto-sale {
    animation: saytec-hero-foto-sale 0.9s both;
    z-index: 0;
}

/*
 * Quien pidió menos movimiento en su sistema operativo ve el mismo contenido,
 * ya colocado, sin desplazamientos ni desvanecidos.
 */
@media (prefers-reduced-motion: reduce) {

    .top-banner-slider .owl-item.active .saytec-titulo-hero,
    .top-banner-slider .owl-item.active .banner-paragraph,
    .top-banner-slider .owl-item.active .banner-btn-hero,
    .top-banner-slider .saytec-foto-entra,
    .top-banner-slider .saytec-foto-sale {
        animation: none;
    }
}

/* ---------------------------------------------------------------------------
 * FLECHAS DEL BANNER EN CELULAR
 *
 * Estaban centradas verticalmente a los costados, que era el lugar correcto
 * cuando el texto ocupaba solo media pantalla. Ahora el texto va centrado y a
 * lo ancho, así que un titular de tres líneas quedaba con una flecha encima de
 * cada extremo. Se bajan al pie de la diapositiva, juntas y centradas.
 * ------------------------------------------------------------------------ */

@media (max-width: 991px) {

    .top-banner-slider .owl-nav {
        bottom: 34px;
        display: flex;
        gap: 14px;
        justify-content: center;
        left: 0;
        position: absolute;
        right: 0;
        z-index: 3;
    }

    .top-banner-slider .owl-nav button.owl-prev,
    .top-banner-slider .owl-nav button.owl-next {
        left: auto;
        position: static;
        right: auto;
        top: auto;
        transform: none;
    }
}

/* ===========================================================================
   PÁGINA NORMATIVAS LEGALES
   ===========================================================================

   Todo lo de esta sección cuelga de `.saytec-norm`, una clase que no existe en
   ninguna otra plantilla. Es a propósito: la página se agregó cuando el resto
   del sitio ya estaba aprobado, así que ninguna regla de acá puede alcanzar a
   otra página aunque se equivoque un selector.

   Los colores salen de las variables del tema, no de la landing original: la
   página tiene que verse parte de este sitio, no pegada encima.
   ======================================================================== */

.saytec-norm {
    overflow-x: clip;
    padding: 90px 0;
}

.saytec-norm--planes,
.saytec-norm--pasos {
    background: var(--e-global-color-dark-blue);
}

.saytec-norm__encabezado {
    margin-bottom: 54px;
    max-width: 820px;
}

.saytec-norm__antetitulo {
    margin-bottom: 14px;
    text-align: left;
}

.saytec-norm__titulo {
    color: var(--e-global-color-secondary);
    margin-bottom: 18px;
}

.saytec-norm__bajada {
    color: var(--e-global-color-text);
    font-size: 18px;
    line-height: 31px;
    margin-bottom: 0;
}


/* --- Hero --------------------------------------------------------------- */

.saytec-norm-hero {
    padding: 150px 0 70px;
    text-align: center;
}

.saytec-norm-hero__antetitulo {
    margin-bottom: 16px;
}

.saytec-norm-hero__titulo {
    color: var(--e-global-color-secondary);
    margin: 0 auto 22px;
    max-width: 900px;
}

.saytec-norm-hero__texto {
    color: var(--e-global-color-text);
    font-size: 18px;
    line-height: 31px;
    margin: 0 auto 26px;
    max-width: 720px;
}

/*
 * La línea de la cuenta regresiva. Se distingue del resto porque es el dato
 * que cambia solo, pero sin gritar: el número en el color de acento alcanza.
 */
.saytec-norm-hero__cuenta {
    color: var(--e-global-color-text);
    font-size: 17px;
    margin-bottom: 30px;
}

/*
 * El número de la cuenta regresiva. Vive en este bloque por cercanía, pero se
 * usa TAMBIÉN en el titular del banner de la portada: es el único selector de
 * acá que sale de esta página. No lo renombres sin mirar page-home.php.
 */
.saytec-cuenta {
    color: var(--e-global-color-accent);
    font-weight: 700;
}


/* --- 1. Las tres leyes -------------------------------------------------- */

.saytec-norm-leyes {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 60px;
}

.saytec-norm-ley {
    background: var(--e-global-color-dark-blue3);
    /* La barra roja de la izquierda es lo que marca que esto es una alerta. */
    border-left: 3px solid #d9534f;
    border-radius: 10px;
    padding: 30px 28px;
}

.saytec-norm-ley__etiqueta {
    color: #e8736f;
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 12px;
    text-transform: uppercase;
}

.saytec-norm-ley__nombre {
    color: var(--e-global-color-secondary);
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 14px;
}

.saytec-norm-ley__texto {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 20px;
}

.saytec-norm-ley__aviso {
    align-items: flex-start;
    background: rgba(216, 135, 48, 0.12);
    border: 1px solid rgba(216, 135, 48, 0.45);
    border-radius: 6px;
    color: #e9a95c;
    display: flex;
    font-size: 14px;
    gap: 9px;
    line-height: 22px;
    margin-bottom: 0;
    padding: 12px 14px;
}

.saytec-norm-ley__aviso .saytec-icono {
    flex: 0 0 auto;
    margin-top: 3px;
}


/* --- 1b. Obligaciones ---------------------------------------------------- */

.saytec-norm-obligaciones {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.saytec-norm-obligacion {
    align-items: flex-start;
    display: flex;
    gap: 16px;
}

.saytec-norm-obligacion__icono,
.saytec-norm-capacidad__icono,
.saytec-norm-razon__icono {
    align-items: center;
    background: linear-gradient(160deg, #2b6fb0 0%, #14283f 100%);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 50%;
    color: var(--e-global-color-secondary);
    display: flex;
    flex: 0 0 auto;
    height: 54px;
    justify-content: center;
    width: 54px;
}

.saytec-norm-obligacion__titulo {
    color: var(--e-global-color-secondary);
    font-size: 19px;
    line-height: 27px;
    margin-bottom: 8px;
}

.saytec-norm-obligacion__texto {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
}


/* --- 2. Planes ----------------------------------------------------------- */

.saytec-norm-planes {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 60px;
}

.saytec-norm-plan {
    background: var(--e-global-color-dark-blue3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 34px 32px;
    position: relative;
}

.saytec-norm-plan--destacado {
    border-color: var(--e-global-color-accent);
}

.saytec-norm-plan__cinta {
    background: var(--e-global-color-accent);
    border-radius: 0 12px 0 8px;
    color: #0f1c2e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin: 0;
    padding: 7px 16px;
    position: absolute;
    right: -1px;
    text-transform: uppercase;
    top: -1px;
}

.saytec-norm-plan__tier {
    color: var(--e-global-color-accent);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.saytec-norm-plan__nombre {
    color: var(--e-global-color-secondary);
    font-size: 26px;
    line-height: 34px;
    margin-bottom: 14px;
}

.saytec-norm-plan__texto {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 22px;
}

.saytec-norm-plan__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-norm-plan__lista li {
    align-items: flex-start;
    color: var(--e-global-color-text);
    display: flex;
    font-size: 16px;
    gap: 11px;
    line-height: 26px;
    margin-bottom: 12px;
}

.saytec-norm-plan__lista li:last-child {
    margin-bottom: 0;
}

.saytec-norm-plan__lista .saytec-icono {
    color: var(--e-global-color-accent);
    flex: 0 0 auto;
    margin-top: 4px;
}


/* --- 2b. Capacidades ----------------------------------------------------- */

.saytec-norm-capacidades {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    text-align: center;
}

.saytec-norm-capacidad__icono {
    height: 48px;
    margin: 0 auto 14px;
    width: 48px;
}

.saytec-norm-capacidad__titulo {
    color: var(--e-global-color-secondary);
    font-size: 18px;
    line-height: 26px;
    margin-bottom: 6px;
}

.saytec-norm-capacidad__texto {
    color: var(--e-global-color-text);
    font-size: 15px;
    line-height: 24px;
    margin-bottom: 0;
}


/* --- 3. Stack tecnológico ------------------------------------------------ */

.saytec-norm-stack__marco {
    overflow-x: auto;
}

.saytec-norm-stack {
    border-collapse: collapse;
    color: var(--e-global-color-text);
    min-width: 780px;
    width: 100%;
}

.saytec-norm-stack th,
.saytec-norm-stack td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    padding: 22px 18px;
    text-align: left;
    vertical-align: top;
}

.saytec-norm-stack thead th {
    color: var(--e-global-color-accent);
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 2px;
    padding-bottom: 14px;
    padding-top: 0;
    text-transform: uppercase;
}

.saytec-norm-stack tbody th {
    color: var(--e-global-color-accent);
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    white-space: nowrap;
}

.saytec-norm-stack td {
    font-size: 16px;
    line-height: 26px;
}

.saytec-norm-stack__herramientas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-norm-stack__herramientas li {
    background: var(--e-global-color-blue-f);
    border-radius: 5px;
    color: var(--e-global-color-secondary);
    font-size: 14px;
    padding: 6px 12px;
    white-space: nowrap;
}


/* --- 4. Pasos ------------------------------------------------------------ */

.saytec-norm-pasos {
    border-left: 2px solid rgba(74, 165, 240, 0.35);
    list-style: none;
    margin: 0;
    padding: 0 0 0 34px;
}

.saytec-norm-paso {
    padding-bottom: 44px;
    position: relative;
}

.saytec-norm-paso:last-child {
    padding-bottom: 0;
}

/* El punto sobre la línea vertical. */
.saytec-norm-paso:before {
    background: var(--e-global-color-dark-blue);
    border: 3px solid var(--e-global-color-accent);
    border-radius: 50%;
    content: "";
    height: 15px;
    left: -43px;
    position: absolute;
    top: 4px;
    width: 15px;
}

.saytec-norm-paso__numero {
    color: var(--e-global-color-accent);
    font-size: 13px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.saytec-norm-paso__titulo {
    color: var(--e-global-color-secondary);
    font-size: 22px;
    line-height: 30px;
    margin-bottom: 10px;
}

.saytec-norm-paso__texto {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 27px;
    margin-bottom: 14px;
    max-width: 720px;
}

.saytec-norm-paso__plazo {
    align-items: center;
    background: rgba(31, 143, 78, 0.14);
    border: 1px solid rgba(31, 143, 78, 0.5);
    border-radius: 6px;
    color: #5fd18f;
    display: inline-flex;
    font-size: 14px;
    gap: 8px;
    margin-bottom: 0;
    padding: 8px 14px;
}


/* --- 5. Cumplimiento ----------------------------------------------------- */

.saytec-norm-cifras {
    border: 1px solid rgba(74, 165, 240, 0.28);
    border-radius: 12px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 48px;
    overflow: hidden;
}

.saytec-norm-cifra {
    border-right: 1px solid rgba(74, 165, 240, 0.28);
    padding: 32px 22px;
    text-align: center;
}

.saytec-norm-cifra:last-child {
    border-right: 0;
}

.saytec-norm-cifra__valor {
    color: var(--e-global-color-accent);
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
}

.saytec-norm-cifra__detalle {
    color: var(--e-global-color-text);
    font-size: 15px;
    line-height: 23px;
    margin-bottom: 0;
}

.saytec-norm-coberturas {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saytec-norm-cobertura {
    background: var(--e-global-color-dark-blue3);
    border-radius: 10px;
    padding: 28px 26px;
}

.saytec-norm-cobertura__ley {
    color: var(--e-global-color-accent);
    font-size: 14px;
    letter-spacing: 1.5px;
    line-height: 22px;
    margin-bottom: 18px;
    text-transform: uppercase;
}

.saytec-norm-cobertura__lista {
    list-style: none;
    margin: 0;
    padding: 0;
}

.saytec-norm-cobertura__lista li {
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 13px 0;
}

.saytec-norm-cobertura__lista li:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}

.saytec-norm-cobertura__obligacion {
    color: var(--e-global-color-text);
    font-size: 15px;
    line-height: 23px;
}

.saytec-norm-estado {
    border-radius: 5px;
    flex: 0 0 auto;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 5px 10px;
    text-transform: uppercase;
    white-space: nowrap;
}

.saytec-norm-estado--cubierto {
    background: rgba(31, 143, 78, 0.16);
    border: 1px solid rgba(31, 143, 78, 0.55);
    color: #5fd18f;
}

.saytec-norm-estado--asistido,
.saytec-norm-estado--managed,
.saytec-norm-estado--peticion {
    background: rgba(216, 135, 48, 0.14);
    border: 1px solid rgba(216, 135, 48, 0.5);
    color: #e9a95c;
}


/* --- 6. Por qué Saytec --------------------------------------------------- */

.saytec-norm-razones {
    display: grid;
    gap: 26px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.saytec-norm-razon {
    background: var(--e-global-color-dark-blue3);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 30px 28px;
}

.saytec-norm-razon__icono {
    margin-bottom: 16px;
}

.saytec-norm-razon__titulo {
    color: var(--e-global-color-secondary);
    font-size: 20px;
    line-height: 28px;
    margin-bottom: 10px;
}

.saytec-norm-razon__texto {
    color: var(--e-global-color-text);
    font-size: 16px;
    line-height: 26px;
    margin-bottom: 0;
}


/* --- Tablet -------------------------------------------------------------- */

@media (max-width: 991px) {

    .saytec-norm {
        padding: 66px 0;
    }

    .saytec-norm-hero {
        padding: 130px 0 56px;
    }

    .saytec-norm-leyes,
    .saytec-norm-planes,
    .saytec-norm-coberturas,
    .saytec-norm-razones {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saytec-norm-cifras {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .saytec-norm-cifra:nth-child(2) {
        border-right: 0;
    }

    .saytec-norm-cifra:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(74, 165, 240, 0.28);
    }
}


/* --- Celular ------------------------------------------------------------- */

@media (max-width: 767px) {

    .saytec-norm {
        padding: 52px 0;
    }

    .saytec-norm-hero {
        padding: 120px 0 44px;
    }

    .saytec-norm__encabezado {
        margin-bottom: 38px;
    }

    .saytec-norm-leyes,
    .saytec-norm-planes,
    .saytec-norm-coberturas,
    .saytec-norm-razones,
    .saytec-norm-cifras {
        grid-template-columns: 1fr;
    }

    .saytec-norm-cifra {
        border-bottom: 1px solid rgba(74, 165, 240, 0.28);
        border-right: 0;
    }

    .saytec-norm-cifra:last-child {
        border-bottom: 0;
    }

    /*
     * La tabla del stack deja de ser tabla y pasa a tarjetas apiladas. Cada
     * celda muestra su encabezado con el atributo data-titulo, así no hay que
     * desplazarse a lo ancho ni adivinar qué columna se está leyendo.
     */
    .saytec-norm-stack {
        min-width: 0;
    }

    .saytec-norm-stack thead {
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    }

    .saytec-norm-stack tr {
        background: var(--e-global-color-dark-blue3);
        border-radius: 10px;
        display: block;
        margin-bottom: 18px;
        padding: 22px 20px;
    }

    .saytec-norm-stack th,
    .saytec-norm-stack td {
        border-bottom: 0;
        display: block;
        padding: 0 0 16px;
    }

    .saytec-norm-stack tr > *:last-child {
        padding-bottom: 0;
    }

    /*
     * El rótulo va en TODAS las celdas, no solo en las <td>: la primera de
     * cada fila es un <th scope="row"> y se quedaba sin su «Nodo / función».
     */
    .saytec-norm-stack tbody th[data-titulo]:before,
    .saytec-norm-stack td[data-titulo]:before {
        color: var(--e-global-color-accent);
        content: attr(data-titulo);
        display: block;
        font-size: 12px;
        letter-spacing: 1.5px;
        margin-bottom: 8px;
        text-transform: uppercase;
    }

    .saytec-norm-stack__herramientas li {
        white-space: normal;
    }

    .saytec-norm-cobertura__lista li {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }
}