/* 

1. Add your custom Css styles below
2. Place the this code in your template: 

 <link href="css/custom.css" rel="stylesheet">

*/

/* 
Cambios de color en styles.css 

h1 color - linea 459
header-inner background - Linea 449
header-inner a color - Linea 575 
Header- fondo mfóvil blanco - línea 926
color globo idioma - linea 948
color letras idioma globo - Linea 2822
dropdown nav background - linea 587
dropdown nav color - linea 589
dropdown idioma background - linea 2830
Posición de las flechas de las noticias - Linea 5430 y 5434
Boton index - linea 5410 .flickity-button:hover { background-color: # }
Fondo de las palabras que estan enseñando el portfolio - linea 1216
Fondo de las palabras que estan enseñando el portfolio en pagina de exito - linea 1216

*/

/* REGLAS GENERICAS */
/* ----------------------------------------------------------------------------------------------------------------------- */

.fuente-icono {
    font-size: 18px;
}

.header-extras {
    display: block;
}

/* Ajustes para la versión móvil del desplegable de idiomas */
@media (max-width: 768px) {
    .header-extras .p-dropdown-content {
        left: 0;   
        width: 100%;          
        top: 50px;            
    }
}


.padbot {
    padding-bottom: 70px !important;
    background-color: #0030B8;
}

@media(width < 767px) {
    .padbot {
        padding-bottom: 25px !important;
    }
}

@media (min-width: 768px) and (max-width: 1024px) {

    #header .header-inner #logo a>img,
    #header #header-wrap #logo a>img {
        width: 100px;
        margin-top: -13.0px;
    }
}

p {
    font-family: 'Source Code Pro', sans-serif !important;
}

/* From Uiverse.io by namecho */
.boton-cyberpunk,
.boton-cyberpunk::after {
    padding: 16px 20px;
    font-size: 18px;
    background: linear-gradient(45deg, transparent 5%, #D00418 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1;
    font-family: 'Source Code Pro', sans-serif !important;
    box-shadow: 6px 0px 0px #1A1A1A;
    outline: transparent;
    position: relative;
    display: inline-block;
    
}

.boton-cyberpunk {
    padding: 12px 16px;
    letter-spacing: 0px;
    font-size: 17px; 
}

#formulario-contacto {
    scroll-margin-top: 420px;
}

.boton-cyberpunk::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: "LYNX DEVS";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
    text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
    clip-path: var(--slice-0);
}

.boton-cyberpunk:hover::after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}

.boton-cyberpunk.glitch-active::after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}

@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }

    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }

    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }

    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }

    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }

    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }

    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }

    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

.boton-cyberpunk a {
    color: #fff;
}

.boton-cyberpunk a:hover {
    color: #00e6f6 !important;
}


/* BOTONES */
/* ----------------------------------------------------------------------------------------------------------------------- */
.inicio-equipo-boton {
    height: 60px;
    width: 130%;
    max-width: 350px;
}

.btn-informa {
    background-color: #FF3B30 !important;
    border: 0 !important;

}

.link-rojo {
    color: #F96B6B;
    font-weight: 600;
}

/* HEADER */
/* ----------------------------------------------------------------------------------------------------------------------- */

#header .header-inner #logo a>img,
#header #header-wrap #logo a>img {
    width: 150px;
    margin-top: -40px;
    height: auto;
}

#header .header-inner,
#header #header-wrap {
    background-color: white;
}

.menu-header-desplegable a>i,
.menu-header-desplegable a>span {
    color: #d0021b !important;
}

/* MÓVIL */
@media (max-width: 767px) {

    #header .header-inner #logo a>img,
    #header #header-wrap #logo a>img {
        width: 200px;
        margin-top: 0;
        height: auto;
    }

    /* =========================================================
       ICONO MENÚ MÓVIL:
       - Fondo blanco => NEGRO
       - Encima de imagen/fondo oscuro => BLANCO
       - Cerrado => HAMBURGUESA
       - Abierto (.mainMenu-open) => X
       ========================================================= */


    /*Con el fondo blanco en responsive el menú se convierte en negro*/
    /* .background-white #mainMenu-trigger { 
		color: #000 !important; 
	} */

    /* 1) Color por defecto (cuando el header es blanco) */
    #mainMenu-trigger,
    .mainMenu-trigger {
        color: #000 !important;
        /* <- controla el color del icono */
    }

    /* Las líneas usan el color del botón */
    #mainMenu-trigger .lines,
    #mainMenu-trigger .lines:before,
    #mainMenu-trigger .lines:after,
    .mainMenu-trigger .lines,
    .mainMenu-trigger .lines:before,
    .mainMenu-trigger .lines:after {
        background-color: currentColor !important;
    }

    /* Por si el tema usa i/svg */
    #mainMenu-trigger i,
    .mainMenu-trigger i,
    #mainMenu-trigger svg,
    .mainMenu-trigger svg {
        color: currentColor !important;
        fill: currentColor !important;
    }

    /* 2) Cuando estás encima de imagen / header oscuro => BLANCO
       (incluyo varios selectores típicos del theme; con que uno coincida, vale) */
    #header.dark #mainMenu-trigger,
    #header.header-dark #mainMenu-trigger,
    #header.header-transparent #mainMenu-trigger,
    .dark #mainMenu-trigger,
    #header.dark .mainMenu-trigger,
    #header.header-dark .mainMenu-trigger,
    #header.header-transparent .mainMenu-trigger,
    .dark .mainMenu-trigger {
        color: #fff !important;
    }

    /* 3) Si el menú está ABIERTO, el panel suele ser blanco => icono NEGRO */
    .mainMenu-open #mainMenu-trigger,
    .mainMenu-open .mainMenu-trigger {
        color: #000 !important;
    }

    /* =========================
       FORMA: CERRADO = HAMBURGUESA
       ========================= */
    #mainMenu-trigger .lines,
    .mainMenu-trigger .lines {
        background-color: currentColor !important;
        /* línea central visible */
    }

    #mainMenu-trigger .lines:before,
    .mainMenu-trigger .lines:before {
        transform: none !important;
        top: -6px !important;
    }

    #mainMenu-trigger .lines:after,
    .mainMenu-trigger .lines:after {
        transform: none !important;
        top: 6px !important;
    }

    /* =========================
       FORMA: ABIERTO = X
       ========================= */
    .mainMenu-open #mainMenu-trigger .lines,
    .mainMenu-open .mainMenu-trigger .lines {
        background: transparent !important;
        /* quita la línea central */
    }

    .mainMenu-open #mainMenu-trigger .lines:before,
    .mainMenu-open .mainMenu-trigger .lines:before {
        top: 0 !important;
        transform: rotate(45deg) !important;
    }

    .mainMenu-open #mainMenu-trigger .lines:after,
    .mainMenu-open .mainMenu-trigger .lines:after {
        top: 0 !important;
        transform: rotate(-45deg) !important;
    }
}



/* ===========================
   BLOQUE BANDERAS (dropdown idioma)
   =========================== */

.menu-header-desplegable .p-dropdown-content {
    position: absolute;
}

.menu-header-desplegable .p-dropdown-content>li>a {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
}

.menu-header-desplegable .p-dropdown-content>li>a>.lang-code {
    position: static !important;
    float: none !important;
    right: auto !important;
    left: auto !important;
    top: auto !important;
    bottom: auto !important;
    margin: 0 !important;

    display: inline-block !important;
    width: 22px !important;
    height: 16px !important;
    flex: 0 0 22px !important;

    /* ocultar ES/GB */
    font-size: 0 !important;
    line-height: 0 !important;
    text-indent: -9999px !important;
    overflow: hidden !important;
    color: transparent !important;

    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;

    border-radius: 2px !important;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) !important;
}

.menu-header-desplegable .p-dropdown-content>li>a>.lang-code::before,
.menu-header-desplegable .p-dropdown-content>li>a>.lang-code::after {
    content: none !important;
}

.menu-header-desplegable .p-dropdown-content>li>a>.lang-code.lang-code--es {
    background-image: url("/images/flag-es.svg") !important;
}

.menu-header-desplegable .p-dropdown-content>li>a>.lang-code.lang-code--en {
    background-image: url("/images/flag-united-kingdom.svg") !important;
}


/* ===========================
   FIN BLOQUE BANDERAS
   =========================== */


.menu-header-desplegable a {
    color: #000 !important;
}

.menu-header-desplegable a>i,
.menu-header-desplegable a>span {
    color: #d0021b !important;
}

.zoom-out {
    font-size: 95px !important;
    font-weight: 600 !important;
    -webkit-text-stroke: 2px white;
    color: #ffffff00 !important;


}

.main_sub {
    font-size: 35px !important;
    font-weight: 600 !important;
}

.dark #mainMenu nav>ul>li>a {
    color: black;
}

.dark #mainMenu nav>ul>li>a:hover {
    color: red;
}

.menu-principal li>a {
    color: #000 !important;
    font-family: 'Source Code Pro', sans-serif !important;
    font-size: 16px !important;
    line-height: 30px !important;

}

.menu-desplegable {
    background-color: white !important;
}

#mainMenu nav>ul>li .dropdown-menu>li>a {
    color: black;

}

#mainMenu nav>ul>li .dropdown-menu>li>a:hover {
    color: red !important;

}

#header .header-inner #logo a>img {
    display: block !important;
}

.form-container-newsletter input {
    border: none;
    font-family: 'Source Code Pro', sans-serif !important;
}


@media(width < 767px) {

    .flickity-button.next,
    .flickity-button.previous {
        z-index: 0;
    }

    .main_sub {
        font-size: 24px !important;
    }
}

/* Soporte para submenús anidados */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -1px;
    display: none;
    position: absolute;
    z-index: 1000;
}

.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}


/* SECCIÓN : IMAGEN PRINCIPAL */
/* ----------------------------------------------------------------------------------------------------------------------- */

.texto-imagen-inicio {
    margin-top: 76px;
}

.texto-imagen-inicio h2 {
    font-family: 'Orbitron', sans-serif;
}

.texto-imagen-inicio h4 {
    font-family: 'Source Code Pro', sans-serif;
    font-weight: 700;
}

.titulo_principal {
    color: #ffffff00 !important;

}

@media(width < 767px) {

    .home-titulo h1 {
        line-height: 90px !important;
    }

}

.texto-imagen-inicio .text-proyectos {
    color: #fff !important;
}

/* SECCIÓN : SOLUCIONES DIGITALES */
/* ----------------------------------------------------------------------------------------------------------------------- */

#welcome {
    background-color: #1e2022;
    padding-bottom: 80px !important;
}

.h2_potencia {
    color: #fff;
    font-weight: 700;
    font-size: 48px;
}

.h2_potencia span {
    color: #fc6666;
}

.titulo_potencia {
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1;
    color: #A1B8F9 !important;
}


.texto_soluciones {
    color: #fff;
    font-size: 22px;
}

.SD-titulo {
    font-size: 26px !important;
    font-weight: 600 !important;
    line-height: 1.2em !important;
    color: #fff !important;
}



.celda2,
.celda3,
.celda4,
.celda5,
.celda6,
.celda7,
.celda8,
.celda9 {
    transition: 0.5s ease;
    border-color: #A1B8F9;
}

.celda2:hover,
.celda3:hover,
.celda4:hover,
.celda5:hover,
.celda6:hover,
.celda7:hover,
.celda8:hover,
.celda9:hover {
    background-color: #2052E2;
}

.celda2 i,
.celda3 i,
.celda4 i,
.celda5 i,
.celda6 i,
.celda7 i,
.celda8 i,
.celda9 i {
    color: #fff;
    font-size: 70px !important;
    font-weight: 600;
    margin: -10px 0 0 -12px;
}



.celda1,
.celda4 {
    align-items: center;
    border-left: none;
}

.celda7 {
    border-left: none;
    border-bottom: none;
}

.celda8 {
    border-bottom: none;
}

.celda9 {
    border-right: none;
    border-bottom: none;
}


.boxIcono {
    background-color: rgb(249, 107, 107);
    width: 50px;
    height: 50px;
    border-radius: 50px;
}

.boxIcono1 {
    margin: 0 0 20px 110px;
}

.boxIcono2 {
    margin: 0 0 20px 100px;
}

.boxIcono3 {
    margin: 0 0 20px 80px;
}

.boxIcono4,
.boxIcono5 {
    margin: 0 0 20px 115px;
}

.boxIcono6 {
    margin: 0 0 20px 115px;
}

.boxIcono7 {
    margin: 0 0 20px 40px;
}

.boxIcono8 {
    margin: 0 0 20px 115px;
}

@media(width < 767px) {

    .celda1 {
        border: 0;
        padding: 20px;
    }

    .celda2,
    .celda3,
    .celda4,
    .celda5,
    .celda6,
    .celda7,
    .celda8,
    .celda9 {
        border: 1px solid #e4e6ef;
    }


}

/* SECCIÓN : OLIVERCG */
/* ----------------------------------------------------------------------------------------------------------------------- */

.h2_potencia_bl {
    color: #000;
    font-weight: 700;
    font-size: 48px;
}

.sobre-olivercg {
    margin-bottom: 50px;
}

.texto_oliverCG {
    color: #000;
}

.acordeon-olivercg {
    padding-top: 50px;
}


.cliente {
    width: 165px !important;
}



/* PORTFOLIO */
/* ----------------------------------------------------------------------------------------------------------------------- */

.contenedor-filtro-clientes,
.filtro-clientes,
.proyectos {
    border: none !important;
}

.filtro-clientes a {
    color: #fff !important;
}

.filtro-clientes {
    display: flex;
    padding-top: 40px;

}

li.active {
    pointer-events: all !important;
    text-align: start;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
}

.lista {
    list-style: none;
    margin: 0;
    display: flex;
    position: relative;
    font-family: 'Source Code Pro', sans-serif !important;
}

.text-proyectos {
    font-size: 95px !important;
    font-weight: 600 !important;
    -webkit-text-stroke: 2px white;
    color: #ffffff00 !important;
    line-height: 85px !important;


}


/* botón padre y submenú */
.submenu-padre {
    position: relative;
    text-align: center;
    font-family: 'Source Code Pro', sans-serif !important;

}

.submenu {
    visibility: hidden;
    opacity: 0;
    margin-top: 5px;
    padding-left: 15px;
    list-style: none;
    height: auto;
    /* mantiene el espacio siempre */
}

.submenu-padre.open .submenu {
    visibility: visible;
    opacity: 1;
}

/* estilos internos */
.sublista {
    padding: 8px 12px;
    font-family: 'Source Code Pro', sans-serif !important;

}

.sublista button {
    display: block;
    width: 100%;
    padding: 8px 12px !important;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
    background-color: white;
}

#sublista-ciber {
    padding: 7px !important;
}

.heading-text.heading-section h2::before {
    background-color: #D00418;
}

.lista.submenu-padre.open.active:hover {
    background: inherit;
    border-left: solid #1A1A1A 3px;
}

.sublista::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    height: 2px;
    width: 10%;
    background-color: #1A1A1A;
    z-index: -1;
}


@media (max-width: 1200px) {
    .filtro-clientes {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin: 0;
        text-align: center;
    }


}

@media (max-width: 992px) {
    #portfolio-direccion {
        display: flex !important;
        flex-direction: column-reverse !important;
        padding-top: 0px;
    }
}


@media (max-width: 500px) {
    .filtro-clientes {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 20px;
        margin: 0;
        text-align: center;
    }
}



/* From Uiverse.io by andrew-demchenk0 - renamed classes */
/* CSS mejorado para evitar superposición */

.grid-filter.filtro-clientes {
    margin-bottom: 160px !important;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 2.5vmin;
    padding: 20px;
}

@media (max-width: 993px) {
    .grid-filter.filtro-clientes button {
        font-size: 2.5vmin !important;

    }
}

@media (max-width: 768px) {
    .grid-filter.filtro-clientes {
        flex-direction: column;
        margin-bottom: 0px !important;
    }

}

.grid-filter.filtro-clientes>ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lista {
    background: black;
    position: relative;
}

/* Efecto hover para todos los botones */
.lista:hover>button:not(:active),
.sublista:hover>button:not(:active) {
    --distance: -10px;
}

.grid-filter.filtro-clientes button {
    appearance: none;
    outline: none;
    font-size: 2vmin;
    border: 3px solid black;
    background: white;
    cursor: pointer;
    padding: 10px 20px;
    --distance: 0;
    transform: translateX(var(--distance)) translateY(var(--distance));
    white-space: nowrap;
}

@media (prefers-reduced-motion: no-preference) {
    .grid-filter.filtro-clientes button {
        will-change: transform;
        transition: transform .2s ease;
        clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    }
}

.grid-filter.filtro-clientes button::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 8.5px 9.5px;
    border-color: black transparent black;
}

/* Estilos para el submenú */
.submenu {
    display: none;
    position: relative;
    left: 0;
    top: 100%;
    margin-top: 5px;
    flex-direction: column;
    gap: 2.5vmin;
    min-width: 100%;
    list-style: none;
    padding: 0;
    z-index: 100;
}

/* Mostrar submenú al hacer hover en el contenedor padre */
.submenu-padre:hover .submenu {
    display: flex !important;
}

/* Estilos para las sublistas */
.sublista {
    background: inherit;
    width: 100%;
}

.submenu button {
    font-size: 2vmin;
    width: 100%;
    text-align: left;
}

/* Para el botón padre */
.btn-padre {
    pointer-events: none;
    position: relative;
    padding-right: 30px;
}



/* Asegurar que el hover funcione correctamente */
.submenu-padre {
    position: relative;
}

.submenu-padre:hover {
    z-index: 101;
}

/* NOTICIAS */
/* ----------------------------------------------------------------------------------------------------------------------- */

.seccion-noticias {
    background-color: #4168D3;
}

.seccion-noticias .heading-text.heading-section h2:before {
    background-color: #fff;
}

.subtitulo-noticias {
    color: #fff;
}

.seccion-noticias .inspiro-slider:hover .flickity-button.next,
.carousel:hover .flickity-button.next {
    right: -40px !important;
}

.seccion-noticias .inspiro-slider:hover .flickity-button.previous,
.carousel:hover .flickity-button.previous {
    left: -40px !important;
}

@media(width < 767px) {

    .flickity-button.previous,
    .flickity-button.next {
        display: none;
    }

}

/* RESEÑAS - igualar alturas cards */
/* ----------------------------------------------------------------------------------------------------------------------- */

/* Asegura que cada item del carrusel pueda estirarse */
#reviews-carousel-en .post-item,
#reviews-carousel-es .post-item,
#reviews-carousel .post-item {
    height: 100%;
}

/* La tarjeta completa como columna y ocupando toda la altura */
#reviews-carousel-en .post-item-wrap,
#reviews-carousel-es .post-item-wrap,
#reviews-carousel .post-item-wrap {
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* El bloque de texto se estira para igualar */
#reviews-carousel-en .post-item-description,
#reviews-carousel-es .post-item-description,
#reviews-carousel .post-item-description {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Altura mínima uniforme para todas las cards (ajusta el número) */
#reviews-carousel-en .item-carrusel-reviews .post-item-wrap,
#reviews-carousel-es .item-carrusel-reviews .post-item-wrap,
#reviews-carousel .item-carrusel-reviews .post-item-wrap {
    min-height: 330px;
    /* prueba 300-380 */
}

/* Recorta el texto a X líneas para que no haga crecer la card */
#reviews-carousel-en .post-item-description p,
#reviews-carousel-es .post-item-description p,
#reviews-carousel .post-item-description p {
    margin-top: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    line-clamp: 4;
    overflow: hidden;
}


/* FORMULARIO */
/* ----------------------------------------------------------------------------------------------------------------------- */

.form-check-label.aceptacion a {
    color: #D00418;
}

.seccion-formulario {
    overflow: visible;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0px;
}

.mensaje-formulario {
    margin-top: 1em;
    padding: 0.75em;
    border-radius: 5px;
    font-weight: bold;
}

.mensaje-exito {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.mensaje-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.form-over {
    margin-top: -175px !important;
}

.contact-container {
    border-radius: 40px;
    background-color: #a2a8b6;
    padding: 30px;
    position: relative;
}

.titulo-form {
    color: #414141;
}

.sub-form {
    font-size: 22px;
}

.icon-text {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    transition: transform 0.3s ease;
}

.icon-text:hover {
    transform: scale(1.1);
    /* agranda un 10% */
}

.icon-text i {
    text-align: center;
    min-width: 36px;
    font-size: 24px;
    margin-right: 10px;
    color: #fff;
    background-color: #D00418;
    border-radius: 30px;
    padding: 7px;
}

.icon-text span {
    font-size: 22px;
    font-weight: 600;
    color: #414141;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.icon-text span:hover {
    color: #fff;
}

.form-control,
.btn {
    border-radius: 5px;
}

.aceptacion {
    font-size: 18px;
}

.btn-form {
    background-color: #F96B6B !important;
    color: white;
    font-size: 20px !important;
    border: 0 !important;
    text-transform: capitalize !important;
}

.btn-form:hover {
    background-color: red !important;
    border: 0 !important;
}

@media(width < 767px) {
    .contact-container {
        padding: 10px;
    }
}

.inputs-formulario {
    border: none;
    border-bottom: 2px solid #ccc;
    border-radius: 0;
    padding: 10px;
    width: 100%;
    background-color: transparent;
    box-shadow: none;
    outline: none;
    transition: border-color 0.3s ease;
    margin-bottom: 15px;
}

/* From Uiverse.io by Smit-Prajapati */
.orange {
    color: #D00418;
}

.form {
    display: flex;
    gap: 30px;
}

.form-container {
    max-width: 700px;
    margin: 30px;
    background-color: white;
    padding: 30px;
    border-left: 5px solid #D00418;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%);
}

.heading {
    color: black;
    font-size: 1.5rem;
    font-weight: 800;
    margin-bottom: 20px;
}

.form-container .form .input {
    color: #87a4b6;
    width: 100%;
    border: none;
    outline: none;
    padding: 10px;
    margin-bottom: 20px;
    font-weight: bold;
    transition: all 0.2s ease-in-out;
    border-left: 1px solid transparent;
    margin-top: 10px;
    border-bottom: black solid 1px;
}

.form-container .form .input:focus {
    border-left: 5px solid #D00418;
}

.form-container .form .textarea {
    width: 100%;
    padding: 10px;
    border: none;
    outline: none;
    color: #D00418;
    font-weight: bold;
    resize: none;
    max-height: 150px;
    margin-bottom: 20px;
    border-left: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    border-bottom: black solid 1px;
}

.form-container .form .textarea:focus {
    border-left: 5px solid #D00418;
}

.form-container .form .button-container {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.form-container .form .button-container .send-button {
    flex-basis: 70%;
    background: #D00418;
    padding: 10px;
    color: #fff;
    text-align: center;
    font-weight: bold;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
}

.send-button {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);

}

.send-button-contorno {
    filter: drop-shadow(1px 1px 0px #D00418);


}

.form-container .form .button-container .send-button:hover {
    background: transparent;
    border: 1px solid #D00418;
    color: #D00418;
}

.form-container .form .button-container .reset-button-container {
    filter: drop-shadow(1px 1px 0px #D00418);
    flex-basis: 30%;
}

.form-container .form .button-container .reset-button-container .reset-button {
    position: relative;
    text-align: center;
    padding: 10px;
    color: #fff;
    font-weight: bold;
    background: #D00418;
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
    transition: all 0.2s ease-in-out;
    width: 250px;
}

.form-container .form .button-container .reset-button-container .reset-button:hover {
    background: #001925;
    color: white;
}

.iconos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* SERVICIOS INDIVIDUALES */
/* ----------------------------------------------------------------------------------------------------------------------- */

.art-unico,
.art-unico section:not(:last-of-type) {
    background-color: #3c4043;
}

.enlace-hover {
    color: #F96B6B;
    font-weight: bold;
    transition: color 0.5s;
}

.enlace-hover:hover {
    color: #A1B8F9;
}

.texto-destacado {
    font-weight: bold;
}

.servicio {
    overflow: hidden;
}


@media(width < 767px) {
    .lead {
        font-size: 16px;
    }

    .servicio h2 {
        font-size: 30px !important;
    }

}


.lista-servicios {
    font-size: 22px;
    color: #ffffff;
}

.lista-servicios li {
    padding: 10px 0;
}





/* CABECERA */
/* ----------------------------------------------------------------------------------------------------------------------- */

.banner-oscuro {
    position: relative;
    /* Necesario para el posicionamiento de la capa */
}

.banner-oscuro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    /* Ajusta la opacidad (0.5 = 50%) para oscurecer */
    z-index: 1;
    /* Asegura que esté debajo del contenido */
}

.banner-oscuro .container-title-servicio {
    position: relative;
    z-index: 2;
    /* Para asegurarse de que el contenido esté por encima de la capa oscura */
}

.bloque-1 h2,
.bloque-1 span,
.bloque-2 h2,
.bloque-2 span,
.bloque-3 h2,
.bloque-3 span,
.bloque-4 h2,
.bloque-4 span,
.bloque-5 h2,
.bloque-5 span,
.bloque-6 h2,
.bloque-6 span,
.bloque-7 h2,
.bloque-7 span,
.bloque-8 h2,
.bloque-8 span,
.bloque-9 h2,
.bloque-9 span,
.entry-text {
    color: #fff !important;
    
}

.block3-container .lead2 {
    text-align: justify;
    text-align-last: left; /* Para que la última línea quede a la izquierda */
    hyphens: auto; /* Opcional: para partir palabras si es necesario */
}

.cita {
    border-left: 3px solid #C8102E !important;
}

.cita p {
    color: #ffffff !important;
    font-size: 26px !important;
    font-weight: 800 !important;
}

.trust-title {
    font-size: 42px;
}

.container-title-servicio .breadcrumb li a {
    font-size: 16px;
}

.titulo-indv h1 {
    font-size: 45px !important;
}

.titulo-indv span {
    font-size: 26px !important;
}

.img-bloque-1 {
    height: 840px;
}
.img-bloque-2 {
    height: 720px;
}

.img-desarrolloprestashop-bloque-1 {
    height: 740px;
}

.img-desarrolloprestashop-bloque-2 {
    height: 1080px;
}

.img-desarrolloprestashopEN-bloque-1 {
    height: 600px;
}

.img-desarrolloprestashopEN-bloque-2 {
    height: 880px;
}

.img-auditoria-bloque-1 {
    height: 780px;
}

.img-auditoria-bloque-2 {
    height: 1020px;
}

.img-audit-bloque-1 {
    height: 710px;
}

.img-audit-bloque-2 {
    height: 880px;
}

.img-mantenimiento-bloque-1 {
    height: 800px;
}

.img-mantenimiento-bloque-2 {
    height: 840px;
}

.img-maintenance-bloque-1 {
    height: 750px;
}

.img-maintenance-bloque-2 {
    height: 480px;
}

.img-mantenimientoW-bloque-1 {
    height: 970px;
}

.img-mantenimientoW-bloque-2 {
    height: 540px;
}

.img-consultoria-bloque-1 {
    height: 680px;
}

.img-consultoria-bloque-2 {
    height: 1090px;
}

.img-consulting-bloque-1 {
    height: 620px;
}

.img-consulting-bloque-2 {
    height: 1020px;
}

.img-shopify-bloque-1 {
    height: 780px;
}

.img-shopify-bloque-2 {
    height: 920px;
}

.img-shopifyEN-bloque-1 {
    height: 780px;
}

.img-shopifyEN-bloque-2 {
    height: 860px;
}

.img-odooerp-bloque-1 {
    height: 940px;
}

.img-odooerp-bloque-2 {
    height: 740px;
}

.img-odooerp-bloque-3 {
    height: 800px;
}

.img-odooerpEN-bloque-1 {
    height: 940px;
}

.img-odooerpEN-bloque-2 {
    height: 740px;
}

.img-odooerpEN-bloque-3 {
    height: 860px;
}

.img-mciberseguridad-bloque-1 {
    height: 720px;
}

.img-mciberseguridad-bloque-2 {
    height: 880px;
}

.img-mciberseguridadEN-bloque-1 {
    height: 700px;
}

.img-mciberseguridadEN-bloque-2 {
    height: 840px;
}

.img-cempresarial-bloque-1 {
    height: 800px;
}

.img-cempresarial-bloque-2 {
    height: 880px;
}

.img-cempresarialEN-bloque-1 {
    height: 800px;
}

.img-cempresarialEN-bloque-2 {
    height: 720px;
}

.img-ipericiales-bloque-1 {
    height: 1500px;
}

.img-ipericiales-bloque-2 {
    height: 970px;
}

.img-ipericialesEN-bloque-1 {
    height: 1360px;
}

.img-ipericialesEN-bloque-2 {
    height: 960px;
}

.img-oseolocal-bloque-2 {
    height: 760px;
}

.img-oseolocalEN-bloque-1 {
    height: 740px;
}

.img-oseolocalEN-bloque-2 {
    height: 780px;
}

.img-posicionamientoseo-bloque-1 {
    height: 600px;
}

.img-posicionamientoseo-bloque-2 {
    height: 800px;
}

.img-posicionamientoseoEN-bloque-1 {
    height: 620px;
}

.img-posicionamientoseoEN-bloque-2 {
    height: 680px;
}

.img-cgoogleads-bloque-1 {
    height: 830px;
}

.img-cgoogleads-bloque-2 {
    height: 980px;
}

.img-cgoogleadsEN-bloque-1 {
    height: 770px;
}

.img-cgoogleadsEN-bloque-2 {
    height: 840px;
}

.img-diseñodesarrollo-bloque-1 {
    height: 1100px;
}

.img-diseñodesarrollo-bloque-2 {
    height: 640px;
}

.img-diseñodesarrolloEN-bloque-1 {
    height: 1000px;
}

.img-diseñodesarrolloEN-bloque-2 {
    height: 600px;
}

.img-identidadmarca-bloque-1 {
    height: 650px;
}

.img-identidadmarcaEN-bloque-1 {
    height: 650px;
}

.img-diseñoeditorial-bloque-1 {
    height: 720px;
}

.img-diseñoeditorial-bloque-2 {
    height: 660px;
}

.img-diseñoeditorialEN-bloque-1 {
    height: 710px;
}

.img-diseñoeditorialEN-bloque-2 {
    height: 650px;
}

@media(width > 767px) {
    .pad-lf {
        padding-left: 50px;
    }

    .pad-rg {
        padding-right: 50px;
    }

}

@media(width < 767px) {

    #page-title {
        margin-bottom: 0 !important;
    }

    .page-title.titulo-indv {
        padding-top: 30px !important;
    }

    .page-title.titulo-indv h1 {
        font-size: 30px !important;
    }

    .page-title.titulo-indv span {
        font-size: 18px !important;
    }

    .img-bloque-1,
    .img-bloque-2 {
        height: 320px;
    }

    .trust-title {
        padding: 0 16px;
    }

}

.heading-text.heading-section h2:before,
.heading-text.heading-section .h2:before {
    background-color: #ff013c !important;
}

/* PAGINA: MANTENIMIENTO PRESTASHOP */
/* ----------------------------------------------------------------------------------------------------------------------- */

.titulo-incluye {
    font-size: 40px !important;
    padding-top: 30px;
    color: #fff;
    line-height: 40px !important;
}

.mantenimiento-list li {
    color: #fff;
    font-size: 18px;
}

.mantenimiento-list i {
    color: #A1B8F9;
    font-size: 24px;
}

.dark-important{
	color: black !important;
}



/* PAGINA: PORTFOLIO */
/* ----------------------------------------------------------------------------------------------------------------------- */


/* PAGINA: SINGLE PORTFOLIO */
/* ----------------------------------------------------------------------------------------------------------------------- */

/* PAGINA: MAPA-WEB */
/* ----------------------------------------------------------------------------------------------------------------------- */


/* Por defecto en esas páginas: mostrar el negro y ocultar el blanco */
.force-logo-black #logo .logo-default {
    display: inline-block !important;
}

.force-logo-black #logo .logo-dark {
    display: none !important;
}

/* Por si el theme hace trucos con opacity/visibility */
.force-logo-black #logo .logo-default {
    opacity: 1 !important;
    visibility: visible !important;
}

.force-logo-black #logo .logo-dark {
    opacity: 0 !important;
    visibility: hidden !important;
}


/* PAGINA: MAPA-WEB END */



.migas-portfolio li:not(:first-child)::before {
    content: "|" !important;
}

.bread-titulo-portfolio {
    font-size: 18px;
}

.titulo-portfolio {
    font-family: "Sora", sans-serif !important;
    font-size: 55px !important;
    font-weight: 700 !important;
    line-height: 1;
    color: #A1B8F9 !important;
}

.h2-portfolio {
    font-family: "Sora", sans-serif !important;
    font-size: 40px !important;
    font-weight: 700 !important;
    line-height: 1;
    color: #fff !important;
}

.descripciones-portfolio {
    color: #fff !important;
}

@media(width < 767px) {
    .titulo-portfolio {
        font-size: 40px !important;
        line-height: 1;
    }

    .row.bloque-portfolio.mb-8 {
        margin-top: 40px;
    }
}

/* PAGINA: BLOG */
/* ----------------------------------------------------------------------------------------------------------------------- */

.post-thumbnail-content a {
    color: #fff;
}

.tags a {
    color: #fff;
}

.blog-title {
    color: #fff;
}

.widget-subscribe-form small {
    color: #fff;
}

/* FOOTER */
/* ----------------------------------------------------------------------------------------------------------------------- */


#footer {
    background-color: #C8102E !important;
    font-family: 'Source Code Pro', sans-serif !important;
}

#footer li {
    font-family: 'Source Code Pro', sans-serif !important;

}

#footer a,
#footer .widget-title,
#footer p {
    color: #fff !important;
}

#footer a:not(.h2_potencia_bl):hover {
    color: #4168D3;
}

#footer .copyright-content {
    padding: 15px 0;
    min-height: 0;
}

.copyright-footer {
    color: white;
}

.contenedor-logo-footer {
    display: flex;
    justify-content: center;
    text-align: center;
}

.imagen-footer {
    width: 50%;
    margin-bottom: 30px;
    height: auto;
}

#footer p {
    text-align: center;

}

@media (max-width: 992px) {

    .enlaces-footer {
        text-align: center;
    }
}


/* Tarjeta */
/* ----------------------------------------------------------------------------------------------------------------------- */
.grid-container {
    background-color: #1e2022;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.titulo-tarjeta {
    margin-top: 20%;
}

.card {
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    position: relative;
}

.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*background-image: url('https://source.unsplash.com/random/1600x900/?business');*/
    /* Reemplaza con tu imagen */
    background-size: cover;
    background-position: center;
    filter: blur(5px);
    z-index: -1;
    opacity: 0.8;
}

.card-header {
    padding: 10px 15px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #fff;
}

.tag {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 12px;
    text-transform: uppercase;
    font-weight: bold;
}

.consulting {
    background-color: #007bff;
}

.marketing {
    background-color: #ffc107;
}

.legal {
    background-color: #dc3545;
}

.finance {
    background-color: #28a745;
}

.design {
    background-color: #e83e8c;
}

.card-body {
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.9);
}

.card-body h2,
.card-body .h2 {
    margin-bottom: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    color: #333;
}

.card-body p {
    margin-bottom: 20px;
}

.read-more {
    display: inline-block;
    color: #007bff;
    text-decoration: none;
    font-weight: bold;
}

.arrow {
    font-style: normal;
}



/* Acordeon index */
/* ----------------------------------------------------------------------------------------------------------------------- */
.ac-item {
    background-color: white;
}


/* Division en tarjetas para mantenimiento en prestashop */
/* ----------------------------------------------------------------------------------------------------------------------- */

/* Estilos Generales para la Sección */
.porfolio-index {
    background-color: #1e2022;
}

.porfolio-index h2,
.porfolio-index .h2 {
    color: white;
    padding: 20px;
}

.porfolio-index .heading-text.heading-section h2:before,
.porfolio-index .heading-text.heading-section .h2:before {
    background-color: red;
}

#modular-cards-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

/* Tarjetas Modulares */
#modular-cards-section .modular-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    margin-bottom: 20px;
}

/* Imagen de Fondo de la Tarjeta */
#modular-cards-section .modular-card-image {
    height: 200px;
    /* Ajusta según necesites */
    background-position: center;
    background-size: cover;
}

/* Contenido de la Tarjeta */
#modular-cards-section .modular-card-content {
    padding: 20px;
}

/* Título de la Tarjeta */
#modular-cards-section .modular-card-title {
    margin-top: 0;
    font-size: 24px;
    color: #333;
}

/* Texto Descriptivo de la Tarjeta */
#modular-cards-section .modular-card-text {
    font-size: 18px;
    color: #666;
    margin-bottom: 20px;
    display: block;
}

/* Subtítulo dentro de la Tarjeta (para la lista) */
#modular-cards-section .modular-card-subtitle {
    font-size: 20px;
    color: #444;
    margin-bottom: 15px;
}

/* Lista dentro de la Tarjeta */
#modular-cards-section .modular-card-list {
    padding-left: 20px;
    list-style-type: none;
}

#modular-cards-section .modular-card-list li {
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
}

/* Espaciador entre Tarjetas */
#modular-cards-section .modular-spacer {
    height: 40px;
    /* Ajusta según necesites */
}





/* Animacion en diseno-desarrollo-tienda */
/* ----------------------------------------------------------------------------------------------------------------------- */

:root {
    --animation-duration: 0.5s;
    /* Duración de las animaciones */
    --fade-opacity-initial: 0;
    /* Opacidad inicial para fade-in */
    --slide-offset: 30px;
    /* Desplazamiento inicial para slide-up */
}

/* Animación Fade-In (para imágenes) */
.animate-fade-in {
    opacity: var(--fade-opacity-initial);
    /* Inicia con opacidad 0 */
    transition: opacity var(--animation-duration) ease-in-out;
}

.animate-fade-in.in-view {
    opacity: 1;
    /* Se vuelve visible */
}

/* Animación Slide-Up (para textos) */
.animate-slide-up {
    transform: translateY(var(--slide-offset));
    /* Inicia desplazado hacia abajo */
    opacity: var(--fade-opacity-initial);
    /* Inicia con opacidad 0 */
    transition: transform var(--animation-duration) ease-in-out, opacity var(--animation-duration) ease-in-out;
}

.animate-slide-up.in-view {
    transform: translateY(0);
    /* Regresa a su posición original */
    opacity: 1;
    /* Se vuelve visible */
}

.lynxweb-benefits-section {
    background-color: #C8102E;
    /* Fondo rojo para toda la sección */
}

.lynxweb-benefit-icon {
    width: 90px;
    height: 90px;
    background-color: #fff;
    /* Icono blanco dentro del círculo */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lynxweb-benefit-icon i {
    color: #C8102E !important;
    font-size: 40px;
}


.feature-circle {
    width: 220px;
    height: 220px;
    background-color: #dc3545;
    /* rojo LynxWeb */
    border-radius: 50%;
    margin: 0 auto;
    padding: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #ffffff;
    transition: all 0.3s ease;
}

.feature-circle i {
    font-size: 52px;
    margin-bottom: 12px;
}

.feature-circle p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
}

/* Hover */
.feature-circle:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 20px 40px rgba(220, 53, 69, 0.45);
}

.ciudades a {
    text-decoration: underline;
    color: inherit;
}

.ciudades a:visited,
.ciudades a:hover,
.ciudades a:active {
    color: inherit;
}

@media (min-width: 768px) and (max-width: 991px) {
    .feature-circle {
        width: 165px;
        height: 165px;
        padding: 20px;
    }

    .feature-circle p {
        font-size: 13px;
    }
}

@media (max-width: 767px) {
    .feature-circle {
        width: 180px;
        height: 180px;
        padding: 20px;
    }

    .feature-circle p {
        font-size: 14px;
    }

    .resultados-para-negocio {
        font-size: 8px !important;
    }
}



/* Animacion en el index tarjetas*/
/* ----------------------------------------------------------------------------------------------------------------------- */

/* Animación Fade-In (Específica para el grid-container) */
.grid-container {
    --animation-duration: 0.6s;
    /* Duración de la animación */
    --fade-opacity-initial: 0;
    /* Opacidad inicial */
}

.grid-container .animate-fade-in {
    opacity: var(--fade-opacity-initial);
    /* Inicia con opacidad 0 */
    transform: translateY(20px);
    /* Desplazamiento inicial hacia abajo */
    transition: opacity var(--animation-duration) ease-in-out, transform var(--animation-duration) ease-in-out;
}

.grid-container .animate-fade-in.in-view {
    opacity: 1;
    /* Se vuelve visible */
    transform: translateY(0);
    /* Regresa a su posición original */
}

/* Conseguir objetivos index*/
/* ----------------------------------------------------------------------------------------------------------------------- */
.conseguir-objetivos h2,
.conseguir-objetivos .h2 {
    margin-top: 0px;
    max-width: 60%;

}

.conseguir-objetivos p {
    font-family: 'Open Sans', sans-serif;

    padding-top: 30px;
    margin-bottom: 20px;
    max-width: 70%;

}

.conseguir-objetivos.container {
    display: flex;
    /* Usamos Flexbox para organizar los elementos */
    justify-content: space-between;
    /* Distribuye los elementos con espacio entre ellos */
    align-items: center;
    /* Alinea los elementos verticalmente al centro */
}

.textoo {
    display: flex;
    flex-direction: column;
    /* Organiza los elementos (p, h2, button) en una columna */
    align-items: flex-start;
    /* Alinea los elementos al principio de la fila (izquierda) */
}

#conseguir {
    max-width: 40%;
    /* Ajusta el tamaño de la imagen para que sea más pequeña */
    height: auto;
    margin-left: 0;
    /* Elimina el margen izquierdo si es necesario */
}




/* From Uiverse.io by namecho */
.conseguir-objetivos button,
.conseguir-objetivos button::after {
    padding: 16px 20px;
    font-size: 18px;
    background: linear-gradient(45deg, transparent 5%, #ff013c 5%);
    border: 0;
    color: #fff;
    letter-spacing: 3px;
    line-height: 1;
    box-shadow: 6px 0px 0px #00e6f6;
    outline: transparent;
    position: relative;
}

.conseguir-objetivos button::after {
    --slice-0: inset(50% 50% 50% 50%);
    --slice-1: inset(80% -6px 0 0);
    --slice-2: inset(50% -6px 30% 0);
    --slice-3: inset(10% -6px 85% 0);
    --slice-4: inset(40% -6px 43% 0);
    --slice-5: inset(80% -6px 5% 0);
    content: "Empieza ya";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(45deg, transparent 3%, #00e6f6 3%, #00e6f6 5%, #ff013c 5%);
    text-shadow: -3px -3px 0px #f8f005, 3px 3px 0px #00e6f6;
    clip-path: var(--slice-0);
}

.conseguir-objetivos button:hover::after {
    animation: 1s glitch;
    animation-timing-function: steps(2, end);
}

@keyframes glitch {
    0% {
        clip-path: var(--slice-1);
        transform: translate(-20px, -10px);
    }

    10% {
        clip-path: var(--slice-3);
        transform: translate(10px, 10px);
    }

    20% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 10px);
    }

    30% {
        clip-path: var(--slice-3);
        transform: translate(0px, 5px);
    }

    40% {
        clip-path: var(--slice-2);
        transform: translate(-5px, 0px);
    }

    50% {
        clip-path: var(--slice-3);
        transform: translate(5px, 0px);
    }

    60% {
        clip-path: var(--slice-4);
        transform: translate(5px, 10px);
    }

    70% {
        clip-path: var(--slice-2);
        transform: translate(-10px, 10px);
    }

    80% {
        clip-path: var(--slice-5);
        transform: translate(20px, -10px);
    }

    90% {
        clip-path: var(--slice-1);
        transform: translate(-10px, 0px);
    }

    100% {
        clip-path: var(--slice-1);
        transform: translate(0);
    }
}

.conseguir-objetivos button {
    margin-bottom: 40px;
}

/*Prueba fuentes*/
/* ----------------------------------------------------------------------------------------------------------------------- */

h1,
h2,
h3,
.h1,
.h2,
.h3 {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700;
    /* Bold */
}

/* Texto principal con Open Sans */
p,
span,
li {
    font-family: 'Source Code Pro', sans-serif !important;

}

/*Pagina de lo que hacemos*/
/* ----------------------------------------------------------------------------------------------------------------------- */



/* Título Principal */
#professional-web-design-section h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    text-align: center;
}

/* Contenedor de Servicios */
#professional-web-design-section .services-container {
    display: flex;
    justify-content: space-between;
}

/* Columnas de Servicios */
#professional-web-design-section .service-column-left,
#professional-web-design-section .service-column-right {
    width: 48%;
}

/* Elementos de Servicio */
#professional-web-design-section .service-item {
    margin-bottom: 20px;
}

/* Títulos de Servicio */
#professional-web-design-section .service-item h2,
#professional-web-design-section .service-item .h2 {
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 10px;
}

/* Descripciones de Servicio */
#professional-web-design-section .service-item p {
    font-size: 1.2rem;
    margin-bottom: 20px;
}

/* Separadores Horizontales */
#professional-web-design-section .service-item hr {
    border: none;
    border-top: 1px solid #ddd;
    margin: 10px 0;
}


.soluciones {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    /* Espacio entre los elementos */
    max-width: 800px;
    /* Ajusta el ancho máximo */
    margin: 0 auto;
    /* Centra la sección */
    padding: 20px;
}

.soluciones img {
    width: 240px;
    /* Tamaño de la imagen */
    height: 600px;
    /* Altura fija */
    object-fit: cover;
    /* Ajuste para mantener proporción */
    margin-bottom: 10px;
    /* Espacio entre imagen y texto */
    border-radius: 30px;
    transition: transform 0.3s ease-in-out;
    /* Transición suave */

}

.soluciones div {
    overflow: hidden;
    text-align: center;

}

.soluciones div .img-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-in-out;
}

.soluciones div:hover .img-container img {
    transform: scale(1.2);
    /* Zoom interno sin cambiar el tamaño del contenedor */
}


/*IMAGEN DE FONDO INICIO*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.lynx-imagen-central {
    height: auto !important;
    background-color: white;
}

.imagen-fondo-principal h2,
.imagen-fondo-principal .h2 {
    color: red !important;
    width: 200px;
}

.imagen-fondo-principal h4 {
    color: black !important;
    width: 200px;
}

@media (max-width: 500px) {

    .imagen-fondo-principal h2:not(.text-proyectos),
    .imagen-fondo-principal .h2:not(.text-proyectos) {
        font-size: 25px !important;
        width: 100px !important;
    }

    .imagen-fondo-principal h4,
    .imagen-fondo-principal .h4 {
        font-size: 16px !important;
        width: 100px !important;
    }

}


@media(width < 767px) {
    .text-proyectos {
        font-size: 50px !important;
        line-height: 60px !important;
    }
}

/*BARRA DELIMITADORA*/
/* ----------------------------------------------------------------------------------------------------------------------- */


.warning-ticker {
    overflow: hidden;
    background-color: #d0021b;
    color: white;
    font-weight: bold;
    font-size: 1.2rem;
    white-space: nowrap;
    width: 100%;
    padding: 10px 0;
    position: relative;
}

.warning-track,
.warning-track-en {
    display: flex;
    width: max-content;
    /* Esto asegura que el contenido crezca dinámicamente */
    animation: scroll-warning 15s linear infinite;
}

.warning-track span,
.warning-track-en span {
    margin-right: 40px;
    display: inline-block;
    font-family: 'Orbitron', sans-serif !important;

}

@keyframes scroll-warning {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}


/*Datos no mienten*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.datos-no-mienten {
    background-color: #C8102E !important;
    display: flex;
    align-items: center;


    justify-content: space-between;
    padding: 60px 40px;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

.datos-no {
    display: flex;
}

.stats-title {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    width: 395px;
    line-height: 50px;
}

.contenedor-datos {
    display: flex;
    flex-wrap: wrap;
}

.stats-container {
    display: flex;
    gap: 40px;
    justify-content: center;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
}

.stat .number {
    font-size: 48px;
    font-weight: bold;
}

.stat .description {
    font-size: 16px;
    margin-top: 8px;
}

@media (max-width: 976px) {
    .datos-no {
        flex-direction: column;
        align-items: center;
    }

    .stats-section {
        flex-direction: column;
        padding: 40px 20px;
    }

    .stats-title {
        width: 100%;
        text-align: center;
    }

    .stats-container {
        justify-content: center;
    }

    .stats-title {
        margin-bottom: 30px;
    }
}

@media (max-width: 470px) {
    .stats-title {
        font-size: 30px;
    }
}


/*PROPUESTAS DE VALOR*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.propuestas-de-valor {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 50px;
}

.propuesta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    width: 200px;
    margin: 20px 0;
    /*ÉSTE MARGIN GENERA CONFLICTO EN LA HOME: margin-left: 13%;*/
}

.propuesta i {
    font-size: 50px;
}

.propuesta span {
    font-size: 16px;
    font-family: 'Source Code Pro', sans-serif;
}

.propuesta h3 {
    font-size: 20px;
}


@media (max-width: 500px) {
    .propuestas-de-valor {
        flex-direction: column;
    }
}

/*CASOS DE EXITO*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.casos-de-exito {
    width: 100%;
}

.casos-de-exito .seccion-noticias .inspiro-slider:hover .flickity-button.next,
.casos-de-exito .carousel:hover .flickity-button.next {
    right: 0px !important;
}

.casos-de-exito .flickity-viewport {
    height: 450px !important;
}

.casos-de-exito__contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
}

.casos-de-exito__titulo {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
}

.casos-de-exito__subtitulo {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 10px;
}

.casos-de-exito__descripcion {
    font-size: 14px;
    color: #333;
    line-height: 1.6;
}

.casos-de-exito__imagen {
    flex: 1;
    min-width: 300px;
    max-width: 500px;
}

.casos-de-exito__imagen img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 5px;
    object-position: top;
}

.casos-de-exito__texto {
    position: relative;
    /* Necesario para posicionar la cita dentro */
    z-index: 2;
    flex: 1;
    min-width: 300px;
    max-width: 600px;
}

.casos-de-exito__cita {
    background-color: #d0021b;
    color: #fff;
    padding: 20px;
    text-align: center;
    font-size: 18px;
    font-style: italic;
    width: 300px;
    position: absolute;
    /* Posicionamiento clave */
    right: -100px;
    /* Lo empuja hacia la imagen */
    border-radius: 4px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 3;
    font-family: 'Source Code Pro', sans-serif;

}

@media (max-width: 768px) {

    .casos-de-exito__contenedor {
        flex-direction: column-reverse;
        align-items: center;
    }

    .casos-de-exito__slide,
    .casos-de-exito__titulo {
        padding: 16px;
    }

    .casos-de-exito .flickity-viewport {
        height: 500px !important;
    }

    .casos-de-exito__cita {
        position: static;
        margin-top: 20px;
        right: auto;
        bottom: auto;
        width: 100%;
        margin-bottom: 20px;
    }

    .movilhiden {
        display: none;
    }

    .casos-de-exito-imagen-y-texto {
        display: flex;
        flex-direction: column-reverse;
    }
}

@media (max-width: 500px) {

    .casos-de-exito {
        padding: 0;
    }
}

/*RESEÑAS*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.resenias-lynx {
    padding: 40px;
    background-color: #fff;
    text-align: center;
}

.resenias-lynx__contenedor {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
}

.resenias-lynx__tarjeta {
    position: relative;
    max-width: 250px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    background-color: #f9f9f9;
}



.resenias-lynx__iconos {
    font-size: 100px;
    color: #d0021b;
    margin-bottom: 20px;
}

.resenias-lynx__iconos img {
    width: 50px;
}

.resenias-lynx__texto {
    font-size: 16px;
    margin-bottom: 15px;
    line-height: normal;
}

.resenias-lynx__estrellas {
    color: black;
    font-size: 15px;
    margin-bottom: 10px;
}

.resenias-lynx__nombre {
    font-weight: 600;
    font-size: 14px;
}

.resenias-lynx__localizacion {
    font-size: 12px;
    color: #666;
}

/*ULTIMAS NOTICIAS*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.ultimas-noticias h2,
.ultimas-noticias .h2 {
    font-family: 'Orbitron', sans-serif;
    margin-bottom: 40px;
}

.noticias {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.noticia {
    max-width: 300px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
}

.noticia img {
    width: 300px;
    height: 200px;
    object-fit: cover;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

.noticia h3 {
    font-size: 16px;
    font-weight: bold;
    margin-bottom: 10px;
}

.noticia p {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 27px;
}


#slider.no-flickity.flickity-enabled .flickity-slider {
    transform: none !important;
    left: 0 !important;
    display: block !important;
    width: 100% !important;
}

/*ULTIMAS NOTICIAS*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.lo-que-nos-diferencia {
    background-color: #C8102E;
    display: flex;
    align-items: center;

    justify-content: space-between;
    padding: 60px 40px;
    color: white;
    font-family: 'Orbitron', sans-serif;
}

.diferencia-title {
    font-size: 45px;
    font-weight: 700;
    text-transform: uppercase;
    line-height: 50px;
}

.lo-que-nos-diferencia .slide img {
    width: auto;
    height: 60px;
    animation: scroll 60s linear infinite;
    max-width: none !important;
    object-fit: contain;

}

.slide img.logo_main_banner {
    animation: none;
}

.slide-track {
    width: 100%;
    display: flex;
    gap: 3em;
    overflow: hidden;
}

@media (max-width: 767px) {
    .inspiro-slider.slider-fullscreen {
        height: 56vh;
    }
}

@keyframes scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translatex(-1000%)
    }
}

@media (max-width: 467px) {
    .diferencia-title {
        font-size: 30px;
        line-height: 30px;
        margin-bottom: 15px;
    }
}

/*UNETE A NUESTRA NEWSLETTER*/
/* ----------------------------------------------------------------------------------------------------------------------- */

#unete-newsletter {
    max-width: 800px;
    margin: 0 auto;
}

#unete-newsletter h2,
#unete-newsletter .h2 {
    font-weight: bold;
    font-size: 24px;
    margin-bottom: 10px;
}

.form-container-newsletter {
    display: flex;
    justify-content: end;
    border-top: 1px solid #000000;
    border-bottom: 1px solid #000000;
    width: 100%;
    box-sizing: border-box;
    align-items: center;
}




.boton-newsletter {
    position: relative;
}

/* Línea vertical derecha */
.boton-newsletter::after {
    content: "";
    position: absolute;
    top: -77px;
    bottom: -87px;
    right: 0;
    width: 1px;
    background-color: #000000;
}


.form-container-newsletter button {
    color: white;
    border: none;
    padding: 10px 20px;
    font-family: monospace;
    cursor: pointer;
    margin-left: 3px;
}

#unete-newsletter .description {
    margin-top: 10px;
    font-size: 14px;
}

.form-container-newsletter input {
    width: 200px;
    padding: 10px;
}

@media (max-width: 991px) {

    #unete-newsletter h2,
    #unete-newsletter .h2 {
        padding-top: 40px;
        padding-left: 10%;
        font-size: 18px;
    }

    .description {
        padding-top: 20px;
        padding-bottom: 40px;
        padding-left: 3%;
        line-height: 15px;
    }
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.linea-vertical,
.linea-vertical-derecha {
    position: absolute;
    width: 1px;
    background-color: #000;
    top: -77px;
    bottom: -130px;
}

.linea-vertical {
    left: 0;
}

.linea-vertical-derecha {
    right: 0;
}

@media (width < 629px) {
    .form-container-newsletter {
        flex-direction: column;
        gap: 28px;
        padding: 10px;
    }

    .linea-vertical {
        display: none;
    }

    .linea-vertical-derecha {
        display: none;
    }

    #unete-newsletter h1 {
        text-align: center;
        padding-left: 0;
    }

    #unete-newsletter .description {
        text-align: center;

    }
}




/*NUESTROS APARTADOS*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.nuestros-apartados {
    padding: 0;
    display: flex;
    flex-direction: column;
}

.recortado {
    width: 1000px;
    height: 200px;

    display: flex;
}


.web {
    display: flex;
    gap: 10%;
    justify-content: end;
}

.web-texto {
    padding: 20px 0 50px 50px;
    width: 650px;
}

@media (width < 767px) {
    .web-texto {
        padding: 20px 16px;
        width: 100%;
    }

    .nuestros-apartados .menu-contenido a {
        font-size: 18px;
    }
}

.menu-titulo {
    font-family: 'Source Code Pro', sans-serif;
    font-weight: 700;
    margin-bottom: 20px;
}

.menu-lateral {
    border-left: 2px solid black;
    padding-left: 15px;
}

.menu-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}

.menu-item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.menu-texto {
    font-family: 'Source Code Pro', sans-serif;
    font-weight: 400;
    margin-right: 8px;
}

.menu-flecha {
    font-weight: bold;
    margin-right: 10px;
}

.menu-contenido-titulo {
    font-family: 'Source Code Pro', sans-serif;
    font-weight: 900;
    font-size: 14px;
    color: #333;
    max-width: 400px;
}

.menu-contenido {
    font-family: 'Source Code Pro', sans-serif;

}

.menu-item.activo .menu-contenido {
    font-weight: bold;
}

.menu-contenido:hover {
    font-weight: bold;
}

.menu-contenido span,
.menu-contenido a {
    color: #D00418 !important;
}

.recortado-derecha {

    width: 1000px;
    height: 200px;
    display: flex;
    justify-content: end;

}

.esquina-recorte {
    width: 100%;
    height: 100%;
    margin-left: auto;
    background: url("/images/borde_recorte_lynxweb_azul2.svg") no-repeat right center;
}

.esquina-recorte-ciber {
    width: 100%;
    height: 100%;
    margin-left: auto;
    background: url("/images/borde_recorte_lynxweb_verde2.svg") no-repeat left center;
}

.esquina-recorte-diseno {
    width: 100%;
    height: 100%;
    margin-left: auto;
    background: url("/images/borde_recorte_lynxweb_morado2.svg") no-repeat left center;
}

.esquina-recorte-seo {
    width: 100%;
    height: 100%;
    margin-right: auto;
    background: url("/images/borde_recorte_lynxweb_rojo2.svg") no-repeat right center;
}

.texto-recorte {
    display: flex;
    align-items: start;
    text-align: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: #1A1A1A;
    align-items: center;
}

#ciberseguridad-posicion {
    text-align: start;
}

#seosem-posicion h3 {
    padding-left: 4% !important;
    font-size: 42px !important;
}

.ciberseguridad {
    display: flex;
    width: 100%;
    padding-top: 4%;

}

.recorte-izquierda-union {
    margin-right: -2px;
    z-index: 1;
}

.recorte-derecha-union {
    margin-left: -2px;
    z-index: 1;
}

@media (min-width: 900px) and (max-width: 1004px) {
    .recortado {
        width: 600px;
        height: 168px;
    }

    .esquina-recorte-ciber {
        width: 200px;
        height: 169px;
    }
}

.seosem {
    display: flex;
    justify-content: end;
    padding-top: 4%;
}

.diseno {
    display: flex;
    padding-top: 4%;

}



.recortado-seosem {
    font-size: 70px;
    font-weight: bold;
    color: white !important;
    width: 600px;
    height: 200px;
    text-align: center;
    display: flex;
    align-items: center;
    background-color: black;
    clip-path: polygon(0 0, 100% 0%, 75% 100%, 0% 100%);
    position: relative;
    overflow: hidden;
}

.recortado-seosem::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 30px;
    height: 300px;
    background-color: red;
    transform: rotate(36deg);
    transform-origin: right top;
    /* Asegura que el giro sea desde el borde derecho superior */
}


.recortado-derecha-diseno {
    font-size: 50px;
    font-weight: bold;
    color: white !important;
    width: 600px;
    height: 200px;
    text-align: center;
    display: flex;
    justify-content: end;
    align-items: center;
    background-color: black;
    clip-path: polygon(100% 100%, 100% 0, 0 0, 36% 100%);
    position: relative;
    overflow: hidden;
}

.recortado-derecha-diseno::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 30px;
    height: 350px;
    background-color: rgb(213, 47, 228);
    transform: rotate(-47deg);
    transform-origin: left top;
}

.recortado h3,
.recortado-derecha h3,
.recortado-derecha-diseno h3,
.recortado-seosem h3 {
    font-size: 50px;
    color: white !important;
    line-height: normal;
    padding: 0px 0px 0px 27px;
}

.recortado-derecha h3 {
    padding-right: 20px;
    padding-left: 10%;
}

.recortado-derecha-diseno h3 {
    padding-right: 20%;
}



.recortado-seosem h3 {
    padding-left: 20%;

}


@media(width < 900px) {

    .recortado,
    .recortado-seosem,
    .recortado-derecha,
    .recortado-derecha-diseno {
        width: auto;
        height: 115px;
    }

    .web,
    .seosem {
        flex-direction: column-reverse;

    }



    .ciberseguridad,
    .diseno {
        flex-direction: column;

    }

    .recortado-derecha-diseno {
        justify-content: start;

    }


    .recortado-derecha-diseno {
        padding-left: 37%;
        font-size: 24px;
    }

    .recortado-seosem {
        width: auto;

    }

    .recortado-seosem h3 {
        font-size: 37px;
        padding-left: 13%;
    }

    .recortado h3 {
        font-size: 37px;

    }

    .web .menu-titulo,
    .seosem .menu-titulo {
        text-align: right;
    }

    .web .menu-titulo,
    .ciberseguridad .menu-titulo,
    .seosem .menu-titulo,
    .diseno .menu-titulo {
        font-size: 18px;
        line-height: 1em;
    }

    .web .menu-lateral,
    .seosem .menu-lateral {
        text-align: right;
        border-right: solid 2px black;
        border-left: none;
    }

    .web .menu-lista,
    .seosem .menu-lista {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    /* El texto ocupa el espacio disponible y va primero visualmente */
    .web .menu-contenido,
    .seosem .menu-contenido {
        order: 1;
        flex: 1;
    }

    /* La flecha va a la derecha */
    .web .menu-flecha,
    .seosem .menu-flecha {
        order: 2;
        margin-left: .5rem;
        /* separador opcional */
    }

    .deskhiden {
        display: none;
    }
}

.movilg {
    display: none;
}

@media(width < 400px) {

    .recortado::after,
    .recortado-seosem::after {
        transform: rotate(39deg);
    }

    .movilg {
        display: block;
    }
}

/*EQUIPO*/
/* ----------------------------------------------------------------------------------------------------------------------- */

.equipo-texto-con-trabajos {
    display: flex !important;
    gap: 30px;
    margin-top: 50px;
}


@media(width < 768px) {
    .titulo-equipo {
        margin-top: 0px;
        font-size: 20px !important;
        line-height: 20px;
    }

    .text-light.m-b-10.fadeInUp.titulo-equipo {
        font-size: 40px !important;
    }

    .equipo-texto-con-trabajos {
        flex-direction: column;
        align-items: center;
        margin-top: 0px
    }

    .inicio-equipo-boton {
        display: flex;
        justify-content: center;
        height: 39px;
        align-items: center;
        font-size: 16px;
        width: 90%;
    }
}

.etiqueta-cyberpunk {
    display: inline-block;
    background: #d6001c;
    color: white;
    padding: 6px 20px;
    font-size: 14px;
    font-weight: bold;
    font-family: 'Orbitron', sans-serif;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 1px;
    clip-path: polygon(7% 0, 100% 0, 100% 64%, 93% 100%, 0 100%, 0 35%);
    box-sizing: border-box;
    border: #000 solid;
}

.etiqueta-cyberpunk::before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    left: 0;
    border-width: 12.5px 9.5px 1px 0px;
    border-color: black transparent transparent black;
}

.etiqueta-cyberpunk::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0px 0px 12.5px 9.5px;
    border-color: black transparent black;
}

.perfil-izquierda {
    display: flex;
    gap: 30px;
}

.imagen-perfil img {
    width: 300px;
    height: 500px;
    object-fit: cover;
}

.contenido-perfil {
    display: flex;
    gap: 30px;
    width: 200px;
    flex-direction: column;
    text-align: center;
}

.boton-cyberpunk-mi-pagina {
    font-size: 12px;
}

.contenedor-perfiles {
    position: relative;
    display: flex;
    justify-content: space-around;
    margin-top: 100px;
}

.contenedor-perfiles::before {
    content: "";
    position: absolute;
    top: -30px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
}

.contenedor-perfiles::after {
    content: "";
    position: absolute;
    bottom: -30px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: black;
}

.perfil-derecha {
    display: flex;
    flex-direction: row-reverse;
    gap: 30px;
}

.quienes-somos {
    text-align: center
}

.sobre-nosotros {
    text-align: center
}

@media(width < 1174px) {
    .contenedor-perfiles {
        flex-direction: column;
        gap: 100px;
        align-items: center;
    }

    .perfil-derecha {
        position: relative;
        padding-top: 20px;
        /* espacio para la línea y el contenido */
    }

    .perfil-derecha::before {
        content: "";
        position: absolute;
        top: -15px;
        left: 0;
        width: 100vw;
        height: 1px;
        background-color: #000;
    }

    .linea-perfil-izquierda::after {
        bottom: -85px !important;
    }

    .contenido-sobre-nosotros {
        flex-direction: column;
        gap: 100px !important;
    }

}

.titulo-equipo {
    font-size: 18px;
    font-weight: 600;
}



@media(width < 551px) {
    .perfil-izquierda {
        flex-direction: column;
        align-items: center;

    }

    .perfil-derecha {
        flex-direction: column;
        align-items: center;
    }

    .linea-perfil-izquierda::after {
        bottom: -530px !important;
    }

    .linea-perfil-derecha::after {
        bottom: -475px !important;
    }

}

.etiquetas {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    min-height: 77px;
}

.etiquetas .etiqueta-cyberpunk:not(:first-child) {
    margin-top: -2px;
    margin-right: 7%;
}

.una-etiqueta {
    align-items: center;
}

.contenedor-perfiles h3 {
    min-height: 76px;
}

.imagen-perfil {
    position: relative;
    display: inline-block;
}

.linea-perfil-izquierda::after {
    content: "";
    position: absolute;
    top: -30px;
    right: -10px;
    width: 1px;
    bottom: -30px;
    background-color: black;
}

.linea-perfil-derecha::after {
    content: "";
    position: absolute;
    top: -34px;
    left: -10px;
    width: 1px;
    bottom: -30px;
    background-color: black;
}

.nombre-etiqueta {
    position: absolute;
    /* Para que funcione debes agregar*/
    top: 0;
    right: 8px;
    transform: translateY(-50%);
    background-color: white;
    color: black;
    padding: 4px 8px;
    font-size: 14px;
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px);
    z-index: 1;
    border: red solid;
    font-family: 'Source Code Pro', sans-serif !important;
}

.nombre-etiqueta::before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    left: 0;
    border-width: 9px 9px 2px 1px;
    border-color: red transparent transparent red;
}

.nombre-etiqueta-izquierda {
    position: absolute;
    /* Para que funcione debes agregar*/
    top: 0;
    left: 8px;
    transform: translateY(-50%);
    background-color: white;
    color: black;
    padding: 4px 8px;
    font-size: 14px;
    clip-path: polygon(10px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 10px);
    z-index: 1;
    border: red solid;
    font-family: 'Source Code Pro', sans-serif !important;

}

.nombre-etiqueta-izquierda::before {
    content: '';
    position: absolute;
    top: 0;
    width: 0;
    height: 0;
    border-style: solid;
    left: 0;
    border-width: 9px 9px 2px 1px;
    border-color: red transparent transparent red;
}

.contenido-sobre-nosotros {
    display: flex;
    gap: 50px;
    margin: 0px 40px;
}

.contenido-sobre-nosotros img {
    width: 400px;
}

.imagen-sobre-nosotros {
    position: relative;
    display: inline-block;
}

.imagen-sobre-nosotros img {
    display: block;
    width: 100%;
    height: auto;
}

.logo-imagen-sobre-nosotros {
    position: absolute;
    left: 50%;
    top: 98%;
    transform: translate(-50%, -50%);
    background-color: black;
    padding: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.logo-imagen-sobre-nosotros img {
    max-width: 100px;
    height: auto;
    width: 100px;
    margin-bottom: 50px;
}


.texto-sobre-nosotros {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.texto-sobre-nosotros p {
    font-size: 18px;
}

.carrusel-galeria {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: auto;
    margin-top: 100px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.galeria-contenido {
    display: flex;
    transition: transform 0.4s ease-in-out;
    gap: 40px;
    /* Espaciado entre imágenes */
}

.imagen-item {
    flex: 0 0 30%;
    transition: transform 0.4s, opacity 0.4s, filter 0.4s;
    transform: scale(0.85);
    opacity: 0.6;
    filter: grayscale(50%);
}

.imagen-item img {
    width: 100%;
    border-radius: 10px;
    height: 100%;
    object-fit: cover;
}

.imagen-item.centro {
    transform: scale(1.2);
    opacity: 1;
    filter: grayscale(0%);
    z-index: 1;
}

.imagen-item.lado {
    transform: scale(0.7);
    opacity: 0.8;
    filter: grayscale(20%);
}

.galeria-btn {
    position: absolute;
    background-color: white;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    top: 50%;
    transform: translateY(-50%);
    padding: 10px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

.galeria-btn.izquierda {
    left: 10px;
}

.galeria-btn.derecha {
    right: 10px;
}


.equal-post-wrap-resenias {
    border-radius: 15px;
    max-height: 70vh;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
}

.polo-carousel-item {
    display: flex;
    justify-content: center;
}

#reviews-carousel {
    flex-wrap: wrap;
    gap: 20px;
}

#reviews-carousel .post-item {
    min-height: 477px;
}

@media (min-width: 768px) and (max-width: 992px) {
    .todo-resenas {
        display: block;
        flex-direction: column;
    }



}

@media (max-width: 768px) {

    #reviews-carousel .post-item {
        min-height: 501px;
    }
}

@media (min-width: 992px) {
    .equal-post-wrap-resenias {
        max-height: 500px;

    }
}

@media (max-width: 992px) {
    .equal-post-wrap-resenias {
        height: 75vh;
        max-height: 550px;


    }

    .h2_potencia .titulo-noticias {
        text-align: center;
    }
}

@media (max-width: 576px) {
    .equal-post-wrap-resenias {
        height: 60vh;

    }

    .post-item-description p {
        display: -webkit-box;
        line-clamp: 6;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: normal;
    }



}

.post-item-description p {
    display: -webkit-box;
    line-clamp: 12;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}

.numero-resenas {
    background: white;
    border-radius: 30px;
    padding: 10px;

}

.reviews-carousel-wrapper {
    margin-top: 20px;
    font-family: sans-serif;
}

.reviews-carousel-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
}

.reviews-carousel-container {
    display: flex;
    overflow-x: auto;
    gap: 20px;
    scroll-snap-type: x mandatory;
    padding-bottom: 10px;
}

.reviews-carousel-card {
    flex: 0 0 300px;
    background: white;
    border-radius: 10px;
    padding: 20px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    scroll-snap-align: start;
}

.reviews-carousel-author {
    font-weight: bold;
    margin-bottom: 10px;
}

.reviews-carousel-text {
    font-size: 0.95rem;
    line-height: 1.4;
    color: #333;
}

.post-meta-category {
    background-color: white !important;
}

.post-item .post-item-wrap {
    background-color: none !important;
}

.logo-google-resena {
    width: 20px !important;
    height: auto !important;
    display: block;
    margin: 10px auto 0;
    padding-bottom: 5px;
}

.estrella-resenia {
    background-color: #1A1A1A;
    border-radius: 30px;
    padding: 2px 10px;
}




/*LOGO GLITCH*/



.glitch-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 480px;
    z-index: 1;
}

.glitch-logo-bg img {
    width: 100%;
    height: auto;
    display: block;
    position: relative;
    z-index: 2;
    opacity: 0;

}

.glitch-logo-bg::before,
.glitch-logo-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('/images/logo-lynx-verde.svg') no-repeat center/contain;
    opacity: 0;
    z-index: 3;
    mix-blend-mode: screen;
    pointer-events: none;
}

.glitch-logo-bg::before {
    animation: glitchSplitTop 3.5s infinite;
    clip-path: inset(0 0 48% 0);
    filter: hue-rotate(90deg);
}

.glitch-logo-bg::after {
    animation: glitchSplitBottom 3.5s infinite;
    clip-path: inset(52% 0 0 0);
    filter: hue-rotate(-90deg);
}

@keyframes glitchSplitTop {

    0%,
    85.71%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    86% {
        opacity: 1;
        transform: translate(-10px, -1px);
    }

    88% {
        transform: translate(10px, 2px);
    }

    90% {
        transform: translate(-6px, 1px);
    }

    92% {
        transform: translate(6px, -1px);
    }

    94% {
        transform: translate(-2px, 1px);
    }

    96% {
        transform: translate(2px, -1px);
    }

    98% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}

@keyframes glitchSplitBottom {

    0%,
    85.71%,
    100% {
        opacity: 0;
        transform: translate(0, 0);
    }

    86% {
        opacity: 1;
        transform: translate(10px, 1px);
    }

    88% {
        transform: translate(-10px, -2px);
    }

    90% {
        transform: translate(6px, -1px);
    }

    92% {
        transform: translate(-6px, 1px);
    }

    94% {
        transform: translate(2px, -1px);
    }

    96% {
        transform: translate(-2px, 1px);
    }

    98% {
        opacity: 1;
        transform: translate(0, 0);
    }

    100% {
        opacity: 0;
    }
}


@media (max-width: 576px) {
    .glitch-logo-bg {
        transform: translate(-25%, -50%);
    }

    .glitch-logo-bg img {
        width: 50%;
    }

    .glitch-logo-bg::before,
    .glitch-logo-bg::after {
        left: -120px;
    }

}


/* PÁGINA PROMOCIÓN */

/* PROMO GENERAL */
.texto-introduccion .lead {
    color: #fff;
    font-weight: 600 !important;
}

.texto-introduccion h2,
.texto-introduccion .h2 {
    margin-bottom: 60px !important;
}

.promo-destacada {
    background-color: #2b2e33;
    color: white;
    padding: 60px 20px;
    text-align: center;
}

.promo-destacada h2,
.promo-destacada .h2 {
    font-size: 2rem;
    color: white;
}

.promo-destacada p {
    color: #ffffff;
    font-size: 1.4rem;
    /* antes 1.2rem */
    margin-bottom: 30px;
}

/* BLOQUES DE PRECIO POR SERVICIO */
.bloque-servicio-precio {
    text-align: center;
    margin-top: 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bloque-servicio-precio .info-mantenimiento {
    font-size: 20px;
    font-weight: 500;
    color: #ccc;
    margin-bottom: 8px;
}

.bloque-servicio-precio .cuadro-precio {
    border-radius: 6px;
    padding: 10px 20px;
    color: #000000;
    font-weight: bold;
    font-size: 1.5rem;
    margin-bottom: 10px;
    display: inline-block;
}

.cuadro-precio .precio-antiguo {
    text-decoration: line-through;
    color: #fff;
    font-size: 1.2rem;
    margin-right: 12px;
}

.cuadro-precio .precio-nuevo {
    color: #28a745;
    font-weight: 800;
    font-size: 1.9rem;
    text-shadow: 0 0 2px rgba(40, 167, 69, 0.5);
}

.bloque-servicio-precio .btn-mas-info {
    display: inline-block;
    padding: 8px 16px;
    font-size: 20px;
    font-weight: 600;
    background-color: transparent;
    border: 2px solid #FF3B30;
    color: #FF3B30;
    border-radius: 4px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.bloque-servicio-precio .btn-mas-info:hover {
    background-color: #FF3B30;
    color: white !important;
    text-decoration: none;
}

.seccion-reviews-clientes {
    background-color: #2b2e33;
    padding: 60px 20px;
}

.seccion-reviews-clientes .titulo-resena {
    font-size: 3rem !important;
    color: #fff;
    font-weight: bold;
}

.titulo-clientes-confian {
    color: #000;
    margin-bottom: 50px !important;
}

.logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    /* o ajusta según necesidad */
    padding: 10px 20px;
}

.logo-item img {
    max-height: 60px;
    /* o menor si quieres más uniformidad */
    max-width: 100%;
    height: auto;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.8;
    transition: all 0.3s ease;
}

.logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
}




/* RESPONSIVE */
@media (width < 767px) {
    .bloque-servicio-precio {
        margin-bottom: 60px;
    }

    .seccion-reviews-clientes .titulo-resena,
    .titulo-clientes-confian {
        font-size: 2rem !important;

    }
}


.seccion-certificaciones {
    background-color: #2b2e33;
    padding: 60px 0;
}

.titulo-certificaciones {
    color: white;
    margin-bottom: 40px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
}

.logos-certificaciones .cert-item {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    padding: 20px 10px;
    height: 220px;
    box-sizing: border-box;
}

.logos-certificaciones .cert-item img {
    max-height: 100px;
    max-width: 100%;
    object-fit: contain;
    margin-bottom: 10px;
    transition: transform 0.2s ease;
    width: 100%;
    /* Evita que SVG colapse por falta de ancho */
}


.logos-certificaciones .cert-item img:hover {
    transform: scale(1.05);
}

.titulo-certificacion {
    color: #ccc;
    font-size: 0.95rem;
    line-height: 1.3;
    text-align: center;
    margin-top: auto;
}




/*------HEADER ESPECIAL---------*/

#logo .logo-default img {
    width: 120px;
    margin-top: -20px;
    height: auto;
}

#logo .logo-dark img {
    width: 120px;
    margin-top: -8px;
    height: auto;
}

#mainMenu nav>ul>li .dropdown-menu {
    min-width: 300px;
}

@media (width < 767px) {
    #header .container {
        position: relative;
        padding: 0px;
    }

    #logo .logo-default img {
        width: 130px;
        margin-top: -22px;
    }

    #logo .logo-dark img {
        width: 120px;
        margin-top: 2px;
    }

    #mainMenu {
        background-color: #fff;
        padding-left: 20px;
    }

    #mainMenu-trigger {
        margin-right: 25px;
    }

    .mainMenu-open #header .header-inner,
    .mainMenu-open #header #header-wrap {
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
        background-color: #fff !important;
    }

    #header #logo>a img {
        max-height: 125px;
    }

    #mainMenu nav>ul>li.dropdown::before {
        color: black;
    }

    #mainMenu:not(.menu-overlay) nav>ul>li.dropdown::before {
        right: 35px;
    }

    .logo-default img {
        margin-top: -20px;
    }
}

.testimonial.testimonial-single .testimonial-item {
    padding: inherit;
}

.casos-de-exito__slide {
    display: flex;
}

.testimonial.testimonial-single .testimonial-item p {
    font-size: 16px !important;
}

.casos-de-exito__descripcion {
    line-height: 1.3;
    padding-right: 30px;
    height: 300px;
}

/*------HEADER ---------*/
#mainMenu nav>ul>li>a {
    color: #d0021b !important;
    font-weight: 700;
}

/* ===== FILTRO PORTFOLIO — Estilo chips + acordeón (POLO compatible) ===== */

/* Paleta */
:root {
    --pf-accent: #C8102E;
    /* rojo corporativo */
    --pf-text-dark: #e6e9f2;
    /* texto en modo oscuro */
    --pf-text-light: #0b1020;
    /* texto en modo claro */
    --pf-border-dark: rgba(255, 255, 255, .08);
    --pf-border-light: rgba(10, 20, 40, .12);
    --pf-bg-dark: rgba(255, 255, 255, .02);
    --pf-bg-light: #fff;
}

/* Contenedor en tarjeta */
.sidebar .portfolio-filter {
    display: flex;
    flex-direction: column;
    /* vertical en sidebar */
    gap: 10px;
    padding: 16px;
    margin: 0;
    list-style: none;
    border: 1px solid var(--pf-border-dark);
    border-radius: 14px;
    background: var(--pf-bg-dark);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .1);
    position: sticky;
    top: 24px;
}

/* Items / enlaces estilo chip */
.sidebar .portfolio-filter li {
    margin: 0;
}

.sidebar .portfolio-filter a {
    display: inline-block;
    width: 100%;
    padding: 10px 14px;
    border: 1px solid rgba(255, 255, 255, .12);
    background: linear-gradient(180deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .02));
    color: var(--pf-accent);
    text-decoration: none;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .2px;
    transition: transform .08s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease;
    cursor: pointer;
}

.sidebar .portfolio-filter a:hover {
    transform: translateY(-1px);
    border-color: rgba(200, 16, 46, .45);
    /* var(--pf-accent) con alpha */
    box-shadow: 0 3px 10px rgba(200, 16, 46, .15);
}

/* Activo (POLO añade .active al <li>) */
.sidebar .portfolio-filter li.active>a {
    background: var(--pf-accent);
    border-color: var(--pf-accent);
    color: #fff;
    box-shadow: 0 4px 14px rgba(200, 16, 46, .35);
}

/* Foco accesible */
.sidebar .portfolio-filter a:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .35);
}

/* ------- Acordeón por grupos ------- */
.portfolio-filter--accordion .group {
    border: 1px solid var(--pf-border-dark);
    border-radius: 12px;
    background: var(--pf-bg-dark);
    overflow: hidden;
}

.portfolio-filter--accordion .group+.group {
    margin-top: 2px;
}

.portfolio-filter--accordion .group-toggle {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-weight: 700;
    color: var(--pf-accent);
    background: transparent;
    border: 0;
    cursor: pointer;
}

.portfolio-filter--accordion .group-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .35);
    border-radius: 10px;
}

/* Usa currentColor para el chevron en el SVG (en el HTML el path ya va con stroke="currentColor") */
.portfolio-filter--accordion .chev {
    width: 18px;
    height: 18px;
    transition: transform .2s;
    opacity: .85;
    color: var(--pf-accent);
}

.portfolio-filter--accordion .group.is-open .chev {
    transform: rotate(180deg);
}

.portfolio-filter--accordion .subfilters {
    margin: 0;
    padding: 10px;
    list-style: none;
    display: grid;
    gap: 8px;
    border-top: 1px solid var(--pf-border-dark);
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.portfolio-filter--accordion .group.is-open .subfilters {
    max-height: 600px;
}

/* lo bastante alto */

/* ----- (Opcional) separadores tipo heading
.sidebar .portfolio-filter li.heading {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px dashed var(--pf-border-dark);
  opacity: .9;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--pf-accent);
  cursor: default;
}
.sidebar .portfolio-filter li.heading a {
  pointer-events: none;
  background: transparent;
  border: none;
  padding: 0;
  box-shadow: none;
}
----- */

/* Light mode */
@media (prefers-color-scheme: light) {
    .sidebar .portfolio-filter {
        border-color: rgba(10, 20, 40, .08);
        background: var(--pf-bg-light);
        box-shadow: 0 8px 24px rgba(20, 30, 50, .08);
    }

    .sidebar .portfolio-filter a {
        color: var(--pf-accent);
        border-color: var(--pf-border-light);
        background: linear-gradient(180deg, rgba(0, 0, 0, .02), rgba(0, 0, 0, 0));
    }

    .portfolio-filter--accordion .group {
        border-color: rgba(10, 20, 40, .08);
        background: #fff;
    }

    .portfolio-filter--accordion .subfilters {
        border-top-color: rgba(10, 20, 40, .08);
    }
}

/* Responsive */
@media (max-width: 991px) {
    .sidebar .portfolio-filter {
        flex-direction: column;
        overflow: visible;
        position: static;
        gap: 8px;
        padding: 10px;
    }

    .portfolio-filter--accordion .subfilters {
        grid-auto-flow: column;
        overflow-x: auto;
    }
}

/* Ajuste sticky en pantallas altas */
@media (min-height: 900px) {
    .sidebar .portfolio-filter {
        top: 32px;
    }
}

/* Enlaces del menú en cualquier estado */
.sidebar .portfolio-filter a,
.sidebar .portfolio-filter a:visited,
.sidebar .portfolio-filter a:focus,
.sidebar .portfolio-filter a:active {
    color: var(--pf-accent) !important;
    text-decoration: none !important;
    outline: none;
    box-shadow: none;
}

/* El activo mantiene el blanco sobre fondo rojo */
.sidebar .portfolio-filter li.active>a {
    color: #fff !important;
}

.lista-mejoras p {
    color: #fff;
}

#page-title {
    z-index: 2;
}


/*------------------------------ PROYECTOS RELACIONADOS EN PRESTASHOP-------------------------------------------*/

#relacionados-prestashop,
.titulo-d-presta {
    background-color: #3c4043 !important;
}

#relacionados-prestashop h4,
#relacionados-prestashop .h4 {
    font-size: 30px;
}

.titulo-d-presta h2,
.titulo-d-presta .h2,
.titulo-d-presta span {
    color: #fff !important;
}

.caja-mejores .text-box:hover,
.caja-mejores .text-box.hover-mobile {
    background-color: #C8102E;
}

.titulo-confianza,
.texto-confianza {
    color: #fff;
}


.titulo-d-presta h2 {
    font-size: 4rem;
}

/*------------------------------ BANNER ODOO -------------------------------------------*/

.banner-odoo {
    height: 320px;
    background-color: #ffffff;
}

.banner-odoo img {
    height: 200px;
}

.banner-odoo .row {
    height: 320px;
}

@media (max-width: 767px) {
    .banner-odoo {
        height: 480px;
    }

    .banner-odoo .row {
        height: 480px;
    }
}


/*------------------------------ CARRUSEL DE RESENAS -------------------------------------------*/

/* Cada item del carousel */
.post-item {
    flex: 0 0 350px;
    /* ancho fijo por item en escritorio */
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    padding: 15px;
    transition: transform 0.3s ease;
    display: flex;
    flex-direction: column;
    /* para que en móvil se apile */
}

/* Hover efecto */
.post-item:hover {
    transform: translateY(-5px);
}

/* Wrap del contenido: avatar a la izquierda, texto a la derecha */
.post-item-wrap {
    display: flex;
    flex-direction: column;
    height: 420px;
}

.post-item-description {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
}

.post-item-description p {
    margin: 10px 0 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    /* scroll vertical */
    padding-right: 6px;
    /* para que no tape la barra */
    max-height: 150px;
    /* <-- ajusta según tu diseño */
}

/* Imagen avatar */
.img-carrusel-index img.imagen-avatar {
    width: 20%;
    /* tu estilo original */
    height: auto;
    border-radius: 50%;
    object-fit: cover;
}

.item-carrusel-reviews {
    margin-top: 10px;
}

/* Contenedor de estrellas debajo de la imagen */
.post-meta-category {
    background-color: #d0021b !important;
    font-weight: bold;
    color: #fff;
    /* texto de estrellas blanco */
    font-size: 0.9rem;
    text-align: center;
    margin-top: 5px;
    border-radius: 5px;
    padding: 2px 5px;
}

/* Texto de la reseña */
.post-item-description {
    text-align: left;
    flex: 1;
}

/* Fecha */
.post-meta-date {
    font-size: 0.85rem;
    color: #777;
    display: block;
    margin-bottom: 5px;
}

/* Título de autor */
.post-item-description h2 {
    font-size: 1rem;
    margin: 0 0 5px 0;
}

/* Párrafo de la reseña */
.post-item-description p {
    font-size: 0.9rem;
    color: #555;
}

/* Link del autor */
.post-item-description a {
    color: inherit;
    text-decoration: underline;
}

/* Tablet: <992px */
@media (max-width: 1200px) {
    .post-item {
        flex: 1 0 48%;
        /* dos items por fila */
        margin-bottom: 15px;
    }


}

/* Móvil: <768px */
@media (max-width: 768px) {
    .post-item {
        flex: 0 0 100%;
    }

    .post-item-wrap {
        flex-direction: column;
        height: 380px;
        align-items: center;
    }

    .post-item-description {
        text-align: center;
    }

    .post-item-description p {
        max-height: 150px;
    }

    .img-carrusel-index img.imagen-avatar {
        width: 80px;
        /* más grande en móvil para que se vea bien */
        height: 80px;
    }

    .img-carrusel-index {
        position: static !important;
    }
}

.overflow-visible {
    overflow: visible;
}

.resenasGoogle {
    background-color: #3c4043;
    padding: 0;

}

.resenasGooogle-index {
    background-color: #3c4043;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 27px;
}

.resenasGooogle-index h2 {
    color: white;
}

/*------------------------------ DESARROLLO PRESTASHOP -------------------------------------------*/

.bloque-2-desarrollo-prestashop {
    padding-top: 50px;
    padding-bottom: 50px;
    background: white;
}

.bloque-2-desarrollo-prestashop h2 {
    color: black !important;
}

.bloque-2-desarrollo-prestashop span {
    color: black !important;
}

.porque-somos-los-mejores {
    text-align: center;
}

.boton-cyberpunk-porque-somos-mejores {
    font-size: 17px !important;
}

@media (max-width: 767px) {
    .boton-cyberpunk-porque-somos-mejores {
        font-size: 18px !important;

    }

    .banner-rojo p {
        font-size: 1rem !important;

    }
}

.banner-rojo {
    background-color: #C8102E !important;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    margin-top: 98px;
    justify-content: space-between;
    padding: 21px 40px;
    color: white;
    text-align: center;
}

.banner-rojo p {
    color: White;
    font-weight: 800;
    font-size: 1.8rem;
    font-family: 'Orbitron', sans-serif !important;
    letter-spacing: 3px;
    padding: 15px;
}

.ecommerce-exito {
    text-align: center;
    padding: 30px;
    margin-bottom: 98px;
}

.ecommerce-exito h4 {
    color: white;
}

.ecommerce-exito p {
    color: white;
}

/*------------------------------ CONECTOR ODOO-PRESTASHOP -------------------------------------------*/
/* SECTION */
.hero-odoo-presta {
    background: transparent;
}

.hero-image-section {
    background: transparent !important;
    margin: 0;
    padding: 0;

}

.hero-image-section img {
    max-width: 20%;
    height: auto;
}

.text-primary-conector {
    color: #C8102E !important;
}

/* BACKGROUND CIRCLES */
.hero-bg-circle {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}

.hero-bg-circle-1 {
    width: 380px;
    height: 380px;
    top: 80px;
    left: 25%;
    background: rgba(220, 53, 69, 0.08);
}

.hero-bg-circle-2 {
    width: 260px;
    height: 260px;
    bottom: 0;
    right: 25%;
    background: rgba(220, 53, 69, 0.15);
}

/* BADGE */
.hero-badge {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 999px;
}

.hero-badge-symbol {
    font-family: monospace;
    font-size: 12px;
    color: #dc3545;
}

.hero-badge-text {
    font-size: 14px;
    color: #6c757d;
}

/* TEXT */
.hero-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 800;
    line-height: 1.1;
}

.hero-subtitle {
    font-size: 1.25rem;
}

.hero-description {
    font-size: 16px;
}

/* CARD */
.hero-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* APPS */
.hero-app {
    width: 96px;
    height: 96px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 700;
    font-size: 1.5rem;
}

.hero-app-odoo {
    background: #714B67;
}

.hero-app-presta {
    background: #DF0067;
    font-size: 1.2rem;
}

.hero-app-label {
    font-size: 0.85rem;
    color: #6c757d;
}

/* CONNECTION */
.hero-line-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.hero-line {
    width: 80px;
    height: 2px;
    background: linear-gradient(to right, #714B67, #dc3545);
}

.hero-line.reverse {
    background: linear-gradient(to left, #714B67, #dc3545);
}

.hero-dot {
    width: 12px;
    height: 12px;
    background: #dc3545;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.hero-sync-text {
    font-size: 16px;
    color: #dc3545;
    font-family: monospace;
    margin: 6px 0;
}

/* STATS */
.hero-stats {
    border-top: 1px solid #dee2e6;
}

.hero-stat-title {
    font-size: 1.4rem;
    font-weight: 700;
}

.hero-stat-text {
    font-size: 16px;
    color: #6c757d;
}

/* SCROLL */
.hero-scroll {
    color: #6c757d;
    text-decoration: none;
    transition: color 0.3s;
}

.hero-scroll:hover {
    color: #dc3545 !important;
}

.hero-scroll-arrow {
    width: 18px;
    height: 18px;
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
    margin: 6px auto 0;
    animation: bounce 1.5s infinite;
}

/* ANIMATIONS */
@keyframes pulse {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.4);
        opacity: 0.6;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes bounce {

    0%,
    100% {
        transform: translateY(0) rotate(45deg);
    }

    50% {
        transform: translateY(6px) rotate(45deg);
    }
}

.underline-simple {
    text-decoration: underline;
}

/* EYEBROW */
.problem-eyebrow {
    display: block;
    font-family: monospace;
    font-size: 0.85rem;
    color: #dc3545;
    margin-bottom: 12px;
}

/* TITLES */
.problem-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;
}

.problem-subtitle {
    font-size: 16px;
    max-width: 720px;
    margin: 0 auto;
    color: white;

}

/* CARD */
.problem-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 24px;
    height: 100%;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.problem-card:hover {
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* CARD INNER */
.problem-card-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

/* ICON */
.problem-icon {
    width: 48px;
    height: 48px;
    background: rgba(220, 53, 69, 0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #dc3545;
    font-size: 1.3rem;
}

/* TEXT */
.problem-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.problem-card-text {
    font-size: 16px;
    line-height: 1.6;
}

/* FOOTER */
.problem-footer {
    font-size: 1.25rem;
    color: white;
}

@media (max-width: 767px) {
    .apartado-odoo-prestashop {
        align-items: center;
        display: flex;
        flex-direction: column;
    }
}

.features-eyebrow {
    display: block;
    font-family: monospace;
    font-size: 0.85rem;
    color: #dc3545;
    margin-bottom: 12px;
}

.features-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;
}

.features-subtitle {
    font-size: 16px;
    color: white;
    max-width: 720px;
    margin: 0 auto;

}

/* Card */
.feature-card {
    background: #fff;
    border: 1px solid #dee2e6;
    border-radius: 16px;
    padding: 24px;
    transition: border-color 0.3s, box-shadow 0.3s;
    height: 100%;
}

.feature-card:hover {
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
}

/* Icon */
.feature-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #dc3545;
    font-size: 1.4rem;
    transition: background 0.3s;
}

.feature-card:hover .feature-icon {
    background: rgba(220, 53, 69, 0.2);
}

/* Text */
.feature-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.feature-card-text {
    font-size: 16px;
    line-height: 1.6;
}

.howitworks-eyebrow {
    display: block;
    font-family: monospace;
    font-size: 0.85rem;
    color: #dc3545;
    margin-bottom: 12px;
}

.howitworks-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.2;
    color: white;

}

.howitworks-subtitle {
    font-size: 16px;
    color: white;
    max-width: 720px;
    margin: 0 auto;
}

/* Step card */
.howitworks-card {
    border: 1px solid #dee2e6;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.howitworks-card p {
    font-size: 16px;
}

.howitworks-card:hover {
    border: 2px solid #dc3545;
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.5), 0 12px 25px rgba(220, 53, 69, 0.4);
    transform: translateY(-3px);
}


/* Step number */
.howitworks-step-number {
    font-size: 4.5rem;
    font-weight: 700;
    color: #dc3545;
    min-width: 80px;
    text-align: center;
    display: flex;
    align-items: center;

}

/* Step details badges */
.howitworks-step-details .badge {
    font-size: 0.8rem;
    padding: 0.25rem 0.75rem;
    color: #dc3545 !important;
}

/* Connector line */
.howitworks-connector {
    width: 2px;
    height: 30px;
    background-color: #dee2e6;
    left: 40px !important;
}

.whyneedit-eyebrow {
    display: block;
    font-family: monospace;
    font-size: 0.85rem;
    color: #dc3545;
    margin-bottom: 12px;
}

/* Title */
.whyneedit-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    text-align: center;
    color: white;
}

/* Subtitle */
.whyneedit-subtitle {
    font-size: 16px;
    color: white;
    max-width: 720px;
    margin: 0 auto 40px auto;
    text-align: center;
}

/* Lista */
.whyneedit-list {
    padding-left: 0;
}

/* Item */
.whyneedit-list-item {
    gap: 15px;
}

/* Bullet */
.whyneedit-bullet {
    min-width: 40px;
    min-height: 40px;
    border-radius: 50%;
    background-color: #dc3545;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex-shrink: 0;
    transition: transform 0.2s, background-color 0.3s;
}

.whyneedit-list-item:hover .whyneedit-bullet {
    background-color: #a71d2a;
    transform: scale(1.2);
}

/* Item title */
.whyneedit-list-title {
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 0.25rem;
    color: #dc3545;
}

/* Item text */
.whyneedit-list-text {
    color: white;
    line-height: 1.5;
    font-size: 16px;
}

/* Eyebrow */
.techspecs-eyebrow {
    display: block;
    font-family: monospace;
    font-size: 0.85rem;
    color: #dc3545;
    margin-bottom: 12px;
}

/* Title */
.techspecs-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    margin-bottom: 20px;
    color: white;
}

/* Subtitle */
.techspecs-subtitle {
    font-size: 16px;
    color: white;
    max-width: 720px;
    margin: 0 auto 40px auto;
}

/* Cards */
.techspecs-card {
    transition: transform 0.3s, box-shadow 0.3s, border-color 0.3s;
}

.techspecs-card:hover {
    border-color: #dc3545;
    box-shadow: 0 10px 25px rgba(220, 53, 69, 0.2);
    transform: translateY(-4px);
}

/* Card title */
.techspecs-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #212529;
}

/* List items */
.techspecs-list li {
    font-size: 16px;
    color: #6c757d;
}

/* Check icon */
.techspecs-list li i {
    font-size: 1.2rem;
}

/* Footer */
.techspecs-section>.mt-4 {
    background-color: #fff;
    border-color: #dc3545;
}

/* Contenedor de los links */
.hero-sections-links {
    gap: 0.5rem;
    /* espacio entre links */
}

/* Links */
.hero-section-link {
    display: inline-block;
    padding: 0.5rem 1rem;
    font-weight: 600;
    font-size: 16px;
    color: #dc3545;
    /* rojo principal */
    border: 2px solid transparent;
    border-radius: 25px;
    background-color: #f8f9fa;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* Hover */
.hero-section-link:hover {
    color: #fff !important;
    background-color: #dc3545;
    border-color: #dc3545;
}

/* Flecha animada hacia abajo */
.hero-scroll-arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 15px solid #dc3545;
    /* color de la flecha */
    margin-top: 1rem;
    animation: bounce-down 1.2s infinite;
}

.footer-detalles-tecnicos p {
    font-size: 16px;
}

/* Animación solo hacia abajo */
@keyframes bounce-down {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(6px);
    }

    60% {
        transform: translateY(3px);
    }
}

/*------------------------------ MANTENIMIENTO PRESTASHOP -------------------------------------------*/
.benefit-card {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.benefit-card:hover {
    border-color: #dc3545;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
}

.benefit-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: rgba(220, 53, 69, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.benefit-icon i {
    font-size: 22px;
    color: #dc3545;
}

.benefit-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
}

.benefit-text {
    color: #6c757d;
    margin-bottom: 0;
    font-size: 0.95rem;
}

.proceso-pm-card {
    background-color: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.proceso-pm-card:hover {
    border-color: rgba(220, 53, 69, 0.5);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
}

.proceso-pm-number {
    margin-top: 20px;
    font-size: 2.5rem;
    font-weight: 700;
    color: #C8102E;
}

.proceso-pm-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 8px;
    color: black;
}

.proceso-pm-card-text {
    font-size: 0.95rem;
    color: black;
}

.proceso-pm-header .proceso-pm-title {
    font-size: 2rem;
    color: white;
}

.proceso-pm-header .proceso-pm-subtitle {
    font-size: 1rem;
    color: white !important;
}

/* ------------------------------ BANNERS HOME ------------------------------ */

/* 1) BLOQUES HERO (estructura común) */
:is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) {
  display: flex;
  align-items: center;
  height: 70vh;
}

/* 2) OVERLAYS (color por bloque) */
.hero-home .bg-overlay {
  background: rgba(0, 48, 184, 1);
}

.hero-home-2 .bg-overlay {
  background: rgba(8, 196, 61, 1);
}

.hero-home-3 .bg-overlay {
  background: rgba(208, 4, 24, 1);
}

.hero-home-4 .bg-overlay {
  background: rgba(201, 74, 216, 1);
}

/* 3) SHAPE DIVIDERS */
.shape-divider.reverse svg {
  transform: scaleX(-1);
}

/* Si quieres forzar el color del triángulo SOLO en hero-home */
.hero-home .shape-divider svg path {
  fill: #fff;
}

/* 4) TIPOGRAFÍA */
.titulo-hero-home {
  font-size: 40px !important;
  font-weight: 800;
}

/* 5) BOTONES (contenedores) */
:is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .button-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

:is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .reset-button-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  filter: drop-shadow(1px 1px 0px #D00418);
}

/* 6) BOTONES (enlaces) */
:is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .reset-button {
  position: relative;
  display: inline-block;
  min-width: 150px;

  padding: 10px 20px;
  text-align: center;
  text-decoration: none;

  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-weight: 700;

  color: #fff;
  background: #D00418;

  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%);
  transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
}

:is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .reset-button:hover {
  background: #001925;
  color: #fff;
}

/* SOLO hero-home-3: color base */
.hero-home-3 .heading-text a.reset-button,
.hero-home-3 .heading-text a.reset-button:visited{
  color: #fff !important;
  border: 2px solid #fff;
  box-sizing: border-box;
}

/* SOLO hero-home-3: hover/focus -> fondo blanco, texto rojo */
.hero-home-3 .heading-text a.reset-button:hover,
.hero-home-3 .heading-text a.reset-button:focus,
.hero-home-3 .heading-text a.reset-button:active{
  background: #fff !important;
  color: #D00418 !important;
  border-color: #fff !important;
}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 767px) {
  :is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) {
    height: auto;
    /* padding: 28px 0; da aire al bloque al perder el 70vh */
	
  }

  .contenedor-titulo {
    margin-top: 28px; 
  }

  .titulo-hero-home-resposive {
    font-size: 30px;
  }

  /* margen real sobre el contenedor correcto (no sobre <a>) */
  :is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .button-container {
    margin-top: 17px;
  }

  :is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .reset-button {
    min-width: 0;
    width: 100%;
    max-width: 360px; /* para que no se hagan gigantes */
	margin: 6px;
  }

  :is(.hero-home, .hero-home-2, .hero-home-3, .hero-home-4) .reset-button-container {
    margin-bottom: 35px;
  }
}



/*------------------------------ ASESORAMIENTO EN CIBERSEGURIDAD -------------------------------------------*/


/* Sección completa */
.actividades-ciberseguridad-basico-section {
    background-color: #f8f9fa;
}

/* Icono de la tarjeta */
.actividades-ciberseguridad-basico-icono {
    width: 107px;
    height: 50px;
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

/* Card de actividad */
.actividades-ciberseguridad-basico-card {
    transition: all 0.3s ease;
}

.actividades-ciberseguridad-basico-card:hover {
    border-color: #dc3545 !important;
    /* rojo Bootstrap */
}

/* Título de sección */
.actividades-ciberseguridad-basico-title {
    font-size: 2.5rem;
    color: white !important;
}

/* Subtítulo */
.actividades-ciberseguridad-basico-subtitle {
    font-size: 1.125rem;
    color: white;
}

/* Check dentro del título de tarjeta */
.actividades-ciberseguridad-basico-check {
    font-size: 1rem;
}

.actividades-ciberseguridad-basico-highlight {
    font-family: 'Orbitron', sans-serif !important;

}


.precio-servicio-section {
    background-color: #f8f9fa;
    /* bg-light */
}

.precio-servicio-title {
    font-weight: 700;
    color: white;
}

.precio-servicio-subtitle {
    max-width: 600px;
    color: white;
}

.precio-servicio-card {
    transition: all 0.3s ease;
}

.precio-servicio-card:hover {
    border-color: #0d6efd;
    /* Bootstrap primary color */
}

.precio-servicio-icono {
    font-size: 2rem;
    width: 82px;
    height: 82px;
    background-color: #dc3545 !important;
}

.precio-servicio-label {
    font-size: 0.9rem;
}

.precio-servicio-employees {
    font-size: 1.1rem;
}

.precio-servicio-amount {
    font-size: 2rem;
}

.precio-servicio-note {
    font-size: 0.9rem;
    color: red;
}


.cta-servicio-section {
    background-color: #fff;
    /* fondo blanco limpio */
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.cta-servicio-title {
    font-weight: 700;
    color: white;
}

.cta-servicio-highlight {
    color: #dc2626;
    /* rojo para resaltar */
}

.cta-servicio-subtitle {
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    font-size: 1.1rem;
    color: white;
}

.cta-servicio-btn {
    background-color: #dc2626;
    color: #fff;
    border: none;
    transition: background-color 0.3s;
    padding: 20px;
    border-radius: 30px;
}

.cta-servicio-btn:hover,
.cta-servicio-btn:focus,
.cta-servicio-btn:active {
    background-color: #b91c1c !important;
    color: #fff !important;
    text-decoration: none !important;
}

.cta-servicio-btn:hover {
    background-color: #b91c1c;
}

.cta-servicio-btn-outline {
    border: 2px solid #dc2626;
    color: #dc2626;
    background-color: transparent;
    transition: all 0.3s;
}

.cta-servicio-btn-outline:hover {
    background-color: #dc2626;
    color: #fff;
    border-color: #b91c1c;
}

.cta-servicio-contact i {
    font-size: 0.95rem;
}

@media (max-width: 576px) {
    .cta-servicio-section {
        padding: 3rem 1.5rem;
    }
}


/* Estilos personalizados */
.asesoramiento-avanz-hero {
    background: #0a2e49;
    color: #fff;
    padding: 60px 0;
    text-align: center;
}

.asesoramiento-avanz-servicio {
    padding: 50px 0;
}

.asesoramiento-avanz-servicio h2 {
    margin-bottom: 30px;
}

.asesoramiento-avanz-beneficio {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid #0a2e49;
    margin-bottom: 20px;
}

.asesoramiento-avanz-precio {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
    padding: 30px;
    text-align: center;
}

.asesoramiento-avanz-precio h3 {
    margin-bottom: 15px;
}

.asesoramiento-avanz-cta {
    text-align: center;
    padding: 50px 0;
}

.icon-asesoramiento-avanzado {
    font-size: 2em !important;
}

.titulo-precios-avanzado {
    color: white;
}


.ventas-digitales-seccion {
    background-color: #0d1424;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Contenido */
.ventas-digitales-contenido {
    max-width: 900px;
}

/* Título */
.ventas-digitales-titulo {
    font-weight: 700;
    font-size: 2.2rem;
    color: white;
}

/* Línea decorativa */
.ventas-digitales-linea-gradient {
    width: 80px;
    height: 4px;
    border-radius: 999px;
    background: linear-gradient(90deg, #ee6922, #eb3c25);
}

/* Texto */
.ventas-digitales-descripcion {
    font-size: 1.1rem;
    line-height: 1.7;
    color: white;
}

.ventas-digitales-destacado {
    font-weight: 600;
    color: #d0021b;
}

/* Cards */
.ventas-digitales-card {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
    text-align: left;
}

.ventas-digitales-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(34, 211, 238, 0.3);
}

/* Iconos */
.ventas-digitales-icono {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, #ee5522, #dc3545);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.4rem;
}

/* Texto card */
.ventas-digitales-card-titulo {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #d0021b;
}

.ventas-digitales-card-texto {
    font-size: 0.9rem;
    color: white;
    margin: 0;
}

.ventas-digitales-actividades {
    background-color: #0d1424;
    color: #ffffff;
}

/* Título y descripción */
.ventas-digitales-titulo {
    font-weight: 700;
    font-size: 2rem;
}

.ventas-digitales-descripcion {
    font-size: 1rem;
    color: #cbd5e1;
}

/* Actividades */
.ventas-digitales-actividad {
    background-color: rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

.ventas-digitales-actividad:hover {
    border-color: rgba(34, 211, 238, 0.3);
    background-color: rgba(255, 255, 255, 0.1);
}

/* Iconos de la izquierda */
.ventas-digitales-actividad-icono {
    width: 48px;
    height: 38px;
    font-size: 1.25rem;
    background: #d0021b;
    color: white;
    transition: all 0.3s ease;
}


@media (max-width: 992px) {
    .ventas-digitales-actividad-icono {
        width: 71px;

    }
}

@media (max-width: 768px) {
    .ventas-digitales-actividad-icono {
        width: 120px;

    }
}

/* Check icono */
.ventas-digitales-actividad .fa-check-circle.text-cyan {
    color: #d0021b;
    font-size: 1rem;
}


/* Sección */
.ventas-digitales-precios {
    background-color: #0d1424;
    /* fondo oscuro */
    color: #ffffff;
}

/* Título y descripción */
.ventas-digitales-titulo {
    font-weight: 700;
    font-size: 2rem;
}

.ventas-digitales-descripcion {
    font-size: 1rem;
    color: #cbd5e1;
}

/* Tarjetas de planes */
.ventas-digitales-card {
    transition: all 0.3s ease;
}

.ventas-digitales-card:hover {
    border-color: rgba(200, 16, 46, 0.3);
    /* rojo semitransparente */
    background-color: rgba(255, 255, 255, 0.1);
}

/* Iconos dentro de la tarjeta */
.ventas-digitales-card-icono {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.2), rgba(180, 0, 30, 0.2));
    color: #C8102E;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.ventas-digitales-card:hover .ventas-digitales-card-icono {
    background: linear-gradient(135deg, #C8102E, #9B0A24);
    color: #ffffff;
}

/* Featured */
.ring-featured {
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.5);
}

.ventas-digitales-card-badge {
    background: linear-gradient(90deg, #C8102E, #9B0A24);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Precio */
.ventas-digitales-card-precio {
    font-weight: 700;
    color: #C8102E;
}

/* Check icon */
.ventas-digitales-card i.fas.fa-check-circle {
    color: #C8102E;
}

/* Sección */
.ventas-digitales-precios {
    background-color: #0d1424;
    /* fondo oscuro */
    color: #ffffff;
}

/* Título y descripción */
.ventas-digitales-titulo {
    font-weight: 700;
    font-size: 2rem;
}

.ventas-digitales-descripcion {
    font-size: 1rem;
    color: #cbd5e1;
}

/* Tarjetas de planes */
.ventas-digitales-card {
    transition: all 0.3s ease;
}

.ventas-digitales-card:hover {
    border-color: rgba(200, 16, 46, 0.3);
    /* rojo semitransparente */
    background-color: rgba(255, 255, 255, 0.1);
}

/* Iconos dentro de la tarjeta */
.ventas-digitales-card-icono {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, rgba(200, 16, 46, 0.2), rgba(180, 0, 30, 0.2));
    color: #C8102E;
    font-size: 2rem;
    transition: all 0.3s ease;
}

.ventas-digitales-card:hover .ventas-digitales-card-icono {
    background: linear-gradient(135deg, #C8102E, #9B0A24);
    color: #ffffff;
}

/* Featured */
.ring-featured {
    box-shadow: 0 0 0 2px rgba(200, 16, 46, 0.5);
}

.ventas-digitales-card-badge {
    background: linear-gradient(90deg, #C8102E, #9B0A24);
    font-size: 0.75rem;
    font-weight: 600;
}

/* Precio */
.ventas-digitales-card-precio {
    font-weight: 700;
    color: #C8102E;
}

/* Check icon */
.ventas-digitales-card i.fas.fa-check-circle {
    color: #C8102E;
}


/* ==============================
   PERITAJE INFORMATICO (SERVICIOS + CREDENCIALES)
   ============================== */

/* ---------- Servicios ---------- */
#peri-info-servicios.peri-info-services-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

/* Título principal (h2) y subtítulo (h3) */
#peri-info-servicios .peri-info-services-header h2 {
    color: #d0021b;
}

#peri-info-servicios .peri-info-services-title {
    font-weight: 700;
    margin-top: .5rem;
    margin-bottom: 1rem;
    color: #fff;
}

#peri-info-servicios .peri-info-services-lead {
    max-width: 600px;
    margin: 0 auto 2rem auto;
    color: #fff;
}

/* Cards servicios */
#peri-info-servicios .peri-info-service-card {
    border: 1px solid #dee2e6;
    border-radius: .75rem;
    padding: 1.5rem;
    transition: all .3s ease;
    background-color: #fff;
    height: 100%;
}

#peri-info-servicios .peri-info-service-card:hover {
    border-color: #dc3545;
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(220, 53, 69, .2);
}

/* Iconos servicios */
#peri-info-servicios .peri-info-service-icon {
    font-size: 2.5rem;
    color: #dc3545;
    margin-bottom: .75rem;
    transition: transform .3s ease;
}

#peri-info-servicios .peri-info-service-card:hover .peri-info-service-icon {
    transform: scale(1.2);
}

/* Textos servicios */
#peri-info-servicios .peri-info-service-card h5 {
    font-weight: 600;
    margin-bottom: .5rem;
    color: #111;
}

#peri-info-servicios .peri-info-service-card p {
    font-size: .9rem;
    color: #6c757d;
    line-height: 1.5;
    margin-bottom: 0;
}

/* ---------- Credenciales ---------- */
#peri-info-credenciales.peri-info-cred-section {
    padding-top: 4rem;
    padding-bottom: 4rem;
    background-color: rgba(248, 249, 250, 0.3);
}

#peri-info-credenciales .peri-info-cred-header h2 {
    text-transform: uppercase;
    color: #dc3545;
    letter-spacing: 1px;
}

#peri-info-credenciales .peri-info-cred-header h3 {
    font-weight: 700;
    font-size: 2rem;
    margin-top: .5rem;
    margin-bottom: 1rem;
    color: #fff;
}

#peri-info-credenciales .peri-info-cred-header p {
    color: #fff;
    max-width: 700px;
    margin: 0 auto;
}

/* Cards credenciales */
#peri-info-credenciales .peri-info-cred-card {
    padding: 2rem;
    border-radius: 1.25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
}

/* ====== CORRECCIÓN ERRORES 404 - Imágenes faltantes ====== */

.portfolio-item .new-badge { background-image: none; }

.background-pattern { background-image: none; }
.background-pattern-1 { background-image: none; }
.background-pattern-2 { background-image: none; }
.background-pattern-3 { background-image: none; }

.triangle-divider-bottom { background-image: none; }
.triangle-divider-top { background-image: none; }