*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    overflow-x:hidden;

}

/* ==========================
   NAVBAR
========================== */

.navbar-custom{
    background-color:#4A4646;
    min-height:58px;
    padding:0 2rem;
}

.logo-navbar{
    width:97px;
    max-width:100%;
    height:auto;
}

.navbar-nav{
    gap:4rem;
}

.nav-link{
    font-family:'Montserrat',sans-serif;
    font-size:26px;
    font-weight:400;
    color:#ffffff !important;
    transition:0.3s;
}

.nav-link:hover{
    color:#d1d1d1 !important;
}

.navbar-toggler{
    border:none;
}

.navbar-toggler:focus{
    box-shadow:none;
}

.navbar-toggler-icon{
    filter:invert(1);
}


html,
body{
    min-height:100vh;
}

body{
    display:flex;
    flex-direction:column;
}

main{
    flex:1;
}



body{
    animation:fadeIn .5s ease-in-out;
}

@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(15px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/*==========================
    DROPDOWN NAVBAR
==========================*/

.dropdown-menu{

    background:linear-gradient(
        135deg,
        #4A4646 0%,
        #4A4646 100%
    );

    border:none;

    border-radius:18px;

    padding:12px 0;

    min-width:230px;

    box-shadow:
        0 15px 40px rgba(0,0,0,.18);

    overflow:hidden;
}


/* OPCIONES */

.dropdown-item{

    color:white;

    font-family:'Montserrat',sans-serif;

    font-size:16px;

    font-weight:500;

    padding:14px 24px;

    transition:all .3s ease;

    background:transparent;
}


/* HOVER */

.dropdown-item:hover{

    background:linear-gradient(
        90deg,
        #a610c8,
        #4A4646
    );

    color:white;

    transform:translateX(8px);
}


/* ITEM ACTIVO */

.dropdown-item:active{

    background:#4A4646;

    color:white;
}
@media (min-width:992px){

    .dropdown:hover .dropdown-menu{

        display:block;

        margin-top:0;
    }

}
/* ===================================
   HERO SECTION
=================================== */

.hero-section{
    background:#DFFEFF;
}

.hero-left{
    background:#DFFEFF;
    display:flex;
    justify-content:center;
    align-items:center;
    min-height:358px;
    padding:10px;
}

.hero-logo{
    width:100%;
    max-width:552px;
    height:auto;
}



@media (max-width:991px){

    .hero-left{
        min-height:auto;
        padding:40px 20px;
    }

    .hero-logo{
        max-width:500px;
    }

    .hero-image{
        height:auto;
    }
}

@media (max-width:576px){

    .hero-logo{
        max-width:320px;
    }

}

.hero-image-container {
  background: #DFFEFF;   /* cuadro celeste */
  position: relative;    /* necesario para controlar la posición interna */
  overflow: visible;     /* permite que la imagen se salga */
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 358px;
  padding: 0;            /* quita padding para que no limite la salida */
}

.hero-image {
  max-width: none;       /* evita que se reduzca automáticamente */
  width: 765px;          /* ajusta el tamaño según lo que quieras */
  height: auto;
  object-fit: contain;
  position: absolute;
  right: -30px;          /* mueve la imagen hacia afuera del cuadro */
  top: -100px; 
  
    pointer-events: none; /* /* opcional: que sobresalga también por arriba */
}




.hero-content{
    width:100%;
    max-width:452px;
}


.hero-text{
    margin-top:10px;

    font-family:'Montserrat',sans-serif;
    font-size:28px;
    font-weight:700;
    line-height:1.2;

    color:#132C4C;

    text-align:left;
}



/* ===================================
   EXPERIENCIA
=================================== */

.experience-section{
    padding:250px 0;
    /*background:#f6f6f6; FONDO GRIS ATRAS DEL VIDEO*/
}

.experience-image{
    width:100%;
    max-width:650px;
    height:500px;
    object-fit:cover;
    display:block;
}


.experience-title{
    font-family:'Montserrat',sans-serif;
    font-size:64px;
    font-weight:700;
    color:#000;
    line-height:78px;
    margin-bottom:25px;
   
}



.experience-divider{
    width:100%;
    max-width:700px;
    height:5px;
    background:linear-gradient(
        to right,
        #D314FF 0%,
        #B824E0 60%,
        #7A3EB1 80%,
        #4D4A93 100%
    );

    margin-bottom:40px;
}

.experience-text{
    font-family:'Montserrat',sans-serif;
    text-align:justify ;
    font-size:30px;
    font-weight:500;
    line-height:50px;
    color:#030303;
     max-width:850px; 
}


/* TABLET */

@media(max-width:991px){

    .experience-title{
        font-size:48px;
        line-height:58px;
    }

    .experience-text{
        font-size:26px;
        line-height:38px;
    }

    .banner-message h2{
        font-size:24px;
    }
}

/* CELULAR */

@media(max-width:576px){

    .experience-section{
        padding:50px 0;
    }

    .experience-title{
        font-size:36px;
        line-height:44px;
    }

    .experience-text{
        font-size:18px;
        line-height:30px;
    }

    .banner-message h2{
        font-size:18px;
        padding:0 15px;
    }
}

/* ===================================
  titulo con flechas degradadas 
=================================== */


.slogan-section{

    position: relative;

    display: flex;
    justify-content: center;
    align-items: flex-start;

    /* Espacio reservado para las flechas */
    padding: 30px 280px;

    overflow: hidden;
}

/* FLECHAS IZQUIERDA */

.slogan-section::before{

    content: ">>>>>>>>>";

    position: absolute;

    left: 20px;
    top: 22px;

    font-size: clamp(24px, 2vw, 48px);
    font-weight: 700;

    letter-spacing: 8px;

    background: linear-gradient(
        90deg,
        #4E1B89 0%,
        #7B1FA2 40%,
        #A900D6 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    white-space: nowrap;
}


/* FLECHAS DERECHA */

.slogan-section::after{

    content: "<<<<<<<<<";

    position: absolute;

    right: 20px;
    top: 22px;

    font-size: clamp(24px, 2vw, 48px);
    font-weight: 700;

    letter-spacing: 8px;

    background: linear-gradient(
        90deg,
        #A900D6 0%,
        #7B1FA2 60%,
        #4E1B89 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    white-space: nowrap;
}

/* Laptop pequeña */

@media (max-width: 1400px){

    .slogan-section{
        padding: 30px 220px;
    }

}


/* Tablet */

/* Ocultar antes para evitar que se monten */

@media (max-width: 1400px){

    .slogan-section{

        padding: 30px 40px;
    }

    .slogan-section::before,
    .slogan-section::after{

        display: none;
    }

}

/* TÍTULO  con flechas con degradado*/

.slogan-title{

    max-width: 1156px;

    text-align: center;

    font-family: 'Alexandria', sans-serif;
    font-size: 36px;
    font-weight: 700;
    line-height: 44px;

    color: #182339;

    margin: 0;

    position: relative;
    z-index: 2;
}


@media (max-width: 1200px){

    .slogan-section{

        padding: 30px 40px;
    }

    .slogan-section::before,
    .slogan-section::after{

        font-size: 32px;
        letter-spacing: 8px;
    }

    .slogan-title{

        font-size: 30px;
        line-height: 38px;
    }

}


@media (max-width: 768px){

    .slogan-section{

        padding: 20px;
    }

    /* Ocultamos las flechas en móvil para que no estorben */

    .slogan-section::before,
    .slogan-section::after{

        display: none;
    }

    .slogan-title{

        font-size: 22px;
        line-height: 30px;
    }

}


/*==================================
  imagenes decorativas del fondo de pantalla 
==================================*/
.slogan-side-image{

    position:absolute;

    width:674px;

    height:auto;

    opacity:.37;

    object-fit:contain;

    z-index:1;

    transition:transform .4s ease;
}


/* IZQUIERDA (MÁS ABAJO) */

.slogan-left{

     position:absolute;
    left:50px;

    top:80%;

    transform:translateY(-50%);
}


/* DERECHA (MÁS ARRIBA) */

.slogan-right{

    position:absolute;
    right:3px; 
    top:20%; 
    transform:translateY(-50%);
}


/* tarjetas de servicios de la empresa*/

services-section{
    background:#eef0f7;
    padding:80px 0;
}

.service-card{
    text-align:center;
    margin-bottom:80px;
}

.service-card img{
    width:334px;
    max-width:100%;
    height:auto;
}

.service-card h3{
    font-family:'Montserrat',sans-serif;
    font-size:36px;
    font-weight:700;
    color:#182339;
    margin-top:40px;
    margin-bottom:20px;
}

.service-card p{
    font-family:'Montserrat',sans-serif;
    font-size:26px;
    line-height:32px;
    color:#182339;
    max-width:500px;
    margin:0 auto;
}


.services-row{
    margin-bottom:120px;
}

.service-card{
    text-align:center;
    padding:0 20px;
}

.service-card img{
    width:100%;
    max-width:280px;

    height:120px;

    object-fit:contain;

    display:block;

    margin:0 auto 30px;
}

.service-card h3{
    margin-top:35px;
    margin-bottom:20px;
}
.services-section .row{
    margin-bottom:100px;
}


@media(max-width:991px){

    .services-row{
        margin-bottom:80px;
    }

}

@media(max-width:576px){

    .service-card img{
        width:220px;
    }

}


@media (max-width: 991px){

    .services-row{
        row-gap:80px;
    }

    .service-card h3{
        font-size:30px;
    }

    .service-card p{
        font-size:20px;
        line-height:28px;
    }

}

@media (max-width: 576px){

    .service-card img{
        width:220px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:18px;
        line-height:26px;
    }

}


/*===================================
  VERTEX POS
===================================*/

.vertex-pos-section{
    padding:10px 0 80px;
   
    position:relative;
}


/* LOGO */

.vertex-pos-logo{

    width:100%;

    max-width:700px;

    margin-bottom:-100px;

    transition:
        transform .4s ease,
        filter .4s ease;
}


/* EFECTO HOVER */
.vertex-pos-logo:hover{

    transform:
        scale(1.15)
        translateY(-5px);

    filter:drop-shadow(
        0 20px 40px rgba(0,0,0,.18)
    );

}
/* TITULO */

.vertex-pos-title,
.vertex-pos-subtitle{

    font-family:'Alexandria',sans-serif;
    font-size:36px;
    font-weight:700;
    line-height:44px;

    color:#182339;

    text-align:center;
}


.vertex-pos-subtitle{
    margin-bottom:35px;
}


/* TEXTO */

.vertex-pos-text{

    max-width:900px;

    font-family:'Alexandria',sans-serif;

    font-size:26px;
    font-weight:400;
    line-height:32px;

    color:#182339;

    text-align:left;
}


/* IMAGEN SISTEMA */

.vertex-pos-system{

    width:100%;
    max-width:565px;

    height:auto;

    object-fit:contain;
}



/*==================================
    CAROUSEL BRANDS SECTION
==================================*/

.brands-section{
    background:#ffffff;
    padding:20px 0;
    overflow:hidden;
}


.brands-header{

    position:relative;

    display:flex;

    justify-content:center;

    align-items:center;

    min-height:180px;

    margin-bottom:30px;
}


.brands-title{

    text-align:center;

    font-size:36px;

    font-weight:700;

    color:#182339;

    margin:0;

    z-index:2;
}



.brands-line{
    width:100%;
    height:14px;

    background:linear-gradient(
        to right,
        #D314FF 0%,
        #B824E0 40%,
        #7A3EB1 80%,
        #4D4A93 120%
    );
}


/*==================================
    SLIDER
==================================*/

.brands-slider{

    position:relative;

    overflow:hidden;

    width:100%;

    padding:50px 0;

    mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );

    -webkit-mask-image:linear-gradient(
        to right,
        transparent,
        black 10%,
        black 90%,
        transparent
    );
}


.brands-track{

    display:flex;
    align-items:center;

    gap:80px;

    width:max-content;

    will-change:transform;
}


.brands-track img{

    width:180px;
    height:180px;

    object-fit:contain;

    flex-shrink:0;

    transition:transform .1s ease;
}


.brands-track img:hover{

    transform:scale(1.25);
}


@media(max-width:768px){

    .brands-track{

        gap:40px;
    }

    .brands-track img{

        width:120px;
        height:120px;
    }

}

/*===================================
  VERTEX FAMILY
===================================*/

.vertex-family-container{

    margin-top: 100px;

    text-align: center;
}


.vertex-family-title{

    font-family:'Alexandria',sans-serif;

    font-size:44px;
    font-weight:700;
    line-height:54px;

    color:#182339;

    margin-bottom:25px;
}


/* LINEA DEGRADADA */

.vertex-family-line{

    width:700px;
    max-width:90%;

    height:6px;

    margin:auto;

    background:linear-gradient(
        to right,
        #D314FF 0%,
        #B824E0 60%,
        #7A3EB1 80%,
        #4D4A93 100%
    );

    border-radius:10px;
}


/* TABLET */

@media(max-width:991px){

    .vertex-pos-logo{
        max-width:500px;
        display:block;
        margin:0 auto 40px;
    }

    .vertex-pos-title,
    .vertex-pos-subtitle{

        font-size:28px;
        line-height:36px;
    }

    .vertex-pos-text{

        font-size:20px;
        line-height:28px;

        text-align:center;

        margin-bottom:50px;
    }

    .vertex-family-title{

        font-size:34px;
        line-height:42px;
    }

}


/* CELULAR */

@media(max-width:576px){

    .vertex-pos-section{

        padding:70px 0;
    }

    .vertex-pos-title,
    .vertex-pos-subtitle{

        font-size:22px;
        line-height:30px;
    }

    .vertex-pos-text{

        font-size:16px;
        line-height:24px;
    }

    .vertex-family-title{

        font-size:26px;
        line-height:34px;
    }

}





/* tarjetas de servicios de la empresa */

services-section{
    /*background:#eef0f7;   --> ES PARA EL FONDO GRIS ATRAS DE LAS TARJETAS*/
    padding:80px 0;
}

.service-card{
    text-align:center;
    margin-bottom:80px;
}

.service-card img{
    width:334px;
    max-width:100%;
    height:auto;
}

.service-card h3{
    font-family:'Montserrat',sans-serif;
    font-size:36px;
    font-weight:700;
    color:#182339;
    margin-top:40px;
    margin-bottom:20px;
}

.custom-list {
  list-style-type: none; /* quitamos viñetas por defecto */
  padding-left: 0;
}

.custom-list li::before {
  content: "- ";          /* agrega el guion */
  color: #000;  
            /* color del guion */
}
.custom-list li {
 font-family:'Montserrat',sans-serif;
    font-size:26px;
    line-height:32px;
    color:#182339;
    max-width:500px;
    margin:0 auto;
}



.services-row{
    margin-bottom:120px;
}

.service-card{
    text-align:center;
    padding:0 20px;
}

.service-card img{
    width:334px;
    max-width:100%;
    height:auto;
}

.service-card h3{
    margin-top:35px;
    margin-bottom:20px;
}
.services-section .row{
    margin-bottom:100px;
}
@media(max-width:991px){

    .services-row{
        margin-bottom:80px;
    }

}

@media(max-width:576px){

    .service-card img{
        width:220px;
    }

}


@media (max-width: 991px){

    .services-row{
        row-gap:80px;
    }

    .service-card h3{
        font-size:30px;
    }

    .service-card p{
        font-size:20px;
        line-height:28px;
    }

}

@media (max-width: 576px){

    .service-card img{
        width:220px;
    }

    .service-card h3{
        font-size:24px;
    }

    .service-card p{
        font-size:18px;
        line-height:26px;
    }

}

/* ==========================
   BLOQUE CORPORATIVO
========================== */

.section-corporarte{
    background:#DFFEFF;
    padding:70px 0;
}

.section-corporarte .container{
    max-width:1400px;
}

.logo-corporarte{
    display:block;
    width:180px;
    margin:0 0 40px 600px; 
}



.text-corporarte{
    max-width:900px;   /* antes 700px */

    margin:0 auto;

    text-align:center;

    font-family:'Montserrat',sans-serif;
    font-size:28px;
    font-weight:400;
    line-height:1.4;

    color:#101010;
}




/* TABLET */

@media(max-width:991px){

    .section-corporarte{
        padding:60px 30px;
    }

    .logo-corporarte{
        width:150px;
        margin:0 auto 30px auto;
    }

    .text-corporarte{
        margin:0 auto;
        max-width:90%;

        text-align:center;

        font-size:28px;
        line-height:1.5;
    }

}

/* CELULAR */

@media(max-width:576px){

    .section-corporarte{
        padding:50px 20px;
    }

    .logo-corporarte{
        width:100px;
        margin-bottom:25px;
    }

    .text-corporarte{
        font-size:20px;
        line-height:1.6;
        max-width:100%;
    }

}



@media(max-width:576px){

    .corporate-logo{
        width:90px;
    }

    .corporate-text{
        font-size:18px;
        line-height:30px;
    }

   
}


/*=================================
  FOOTER
=================================*/

.footer-serprosa{
    background:#4A4646;
    min-height:148px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:30px 60px;
}

.footer-left h4{
    color:#ffffff;
    font-size:26px;
    margin-bottom:10px;
}

.footer-left p{
    color:#ffffff;
    font-size:26px;
    margin:0;
}

.footer-right{
    display:flex;
    align-items:center;
    gap:50px;
}

.footer-right a{
    color:#ffffff;
    font-size:42px;
    transition:.3s;
}

.footer-right a:hover{
    transform:translateY(-5px);
    color:#d9d9d9;
}

/*=================================
  RESPONSIVE
=================================*/

@media(max-width:991px){

    .corporate-section{
        padding:60px 30px;
        text-align:center;
    }

    .corporate-text{
        font-size:24px;
        line-height:36px;
        margin:0 auto 50px;
    }

    .footer-serprosa{
        flex-direction:column;
        gap:25px;
        text-align:center;
    }

}

@media(max-width:576px){

    .corporate-text{
        font-size:20px;
        line-height:30px;
    }

    .footer-right{
        gap:25px;
    }

    .footer-right a{
        font-size:32px;
    }

}


/* ==========================
 IMÁGENES DECORATIVAS DEL FONDO ABAJO DE LAS FLECHAS
========================== */

.bg-decoration-container{

    position:relative;
}

.bg-decoration-image{

    position:absolute;

    width:420px;

    height:auto;

    opacity:.37;

    object-fit:contain;
}



/* IZQUIERDA */

.bg-left{

    position:absolute;
    left:-40px;

    top:5%;

    transform:translateY(-50%);
}


/* RESPONSIVE */


@media (max-width:991px){

    .bg-decoration-image{

        display:none;
    }

}
@media (max-width:1200px){

    .bg-decoration-image{

        width:250px;
    }

    .bg-left{

        left:-20px;

        top:10px;
    }

}

@media (max-width:991px){

    .bg-decoration-image{

        display:none;
    }

}

/* ==========================
 IMÁGENES DECORATIVAS DEL FONDO 

 tituto y al lado de la imagen de reunion 
========================== */

.corner-decoration-container{

    position:relative;
}


.corner-decoration{

    position:absolute;

    width:420px;

    height:auto;

    opacity:.37;

    object-fit:contain;

    pointer-events:none;
}


/* ESQUINA INFERIOR IZQUIERDA */

.corner-bottom-left{
    
    position:absolute;

    left:-110px;

    top:130%;

    transform:translateY(-50%);
}


/* ESQUINA SUPERIOR DERECHA */

.corner-top-right{
    
    position:absolute;

    right:80px;

    top:110%;

    transform:translateY(-50%);
}



.corner-symbol-5{
    
    position:absolute;

    right:-120px;

    top:130%;

    transform:translateY(-50%);
}
/* RESPONSIVE */

@media (max-width:991px){

    .corner-decoration{

        display:none;
    }

}


/* ==========================
 IMÁGENES DECORATIVAS DEL FONDO 

en la linea de servicios de vertex
========================== */
.corner-decoration-container{

    position:relative;
}


.corner-decoration{

    position:absolute;

    width:420px;

    height:auto;

    opacity:.37;

    object-fit:contain;

    pointer-events:none;
}


/* SÍMBOLO 1 (IZQUIERDA) */

.corner-symbol-1{
    position:absolute;

    left:-410px;

    top:50%;

    transform:translateY(-50%);
}




/* RESPONSIVE */

@media (max-width:991px){

    .corner-decoration{

        display:none;
    }

}



/* ==========================
 IMÁGENES DECORATIVAS DEL FONDO 

EN EL CAROUSEL
========================== */


.brands-side-image{

    position:absolute;

    width:424px;

    height:424px;

    object-fit:contain;

    opacity:.37;

    transition:
        transform .4s ease,
      
}


/* IZQUIERDA */

.left-image{
 position:absolute;
    left:-40px;

    top:20%;

    transform:translateY(-50%);
}


/* DERECHA */ 
.right-image{ 

    position:absolute;
    right:3px; 
    top:80%; 
    transform:translateY(-50%);


}



@media (max-width:1200px){

    .brands-title{

        padding:0 200px;
    }

    .brands-side-image{

        width:140px;
        height:140px;
    }

}


@media (max-width:768px){

    .brands-side-image{

        display:none;
    }

    .brands-title{

        padding:0 20px;

        font-size:28px;
    }

}

/* ==========================
 IMÁGENES DECORATIVAS DEL FONDO 

ENTRE LAS TARJETAS DE SERVICIOS DE LA EMPRESA
========================== */

.section-decoration-container{

    position:relative;
}


.section-decoration{

    position:absolute;

    width:500px;

    height:auto;

    opacity:.37;

    object-fit:contain;

    pointer-events:none;
}


/* SÍMBOLO 2 (IZQUIERDA) */

.section-symbol-2{

    left:310px;

    top:1%;

    transform:translateY(-50%);
}


/* SÍMBOLO (DERECHA) */

.section-symbol-1r{

    right:310px;

    top:10%;

    transform:translateY(-50%);
}


/* RESPONSIVE */

@media (max-width:991px){

    .section-decoration{

        display:none;
    }

}


/* LAPTOPS PEQUEÑAS Y ZOOM */

@media (max-width:1200px){

    .section-decoration{

        width:300px;
    }

    .section-symbol-2{

        left:150px;

        top:2%;
    }

    .section-symbol-1r{

        right:150px;

        top:8%;
    }

}
/* ==========================
 IMÁGENES DECORATIVAS DE FONDO
  entre los servicios de la empresa
========================== */

.checktex-container{

    position:relative;
}


.checktex-side-image{

    position:absolute;

    width:720px;

    height:auto;

    opacity:.37;

    object-fit:contain;
}



/* IZQUIERDA */

.left-checktex{

    position:absolute;
    left:-210px;

    top:50%;

    transform:translateY(-50%);
}


/* DERECHA */

.right-checktex{

    position:absolute;
    right:-210px; 
    top:50%; 
    transform:translateY(-50%);
}

@media (max-width:991px){

    .checktex-side-image{

        display:none;
    }

}



/* ==========================
RESPONSIVE GENERAL
========================== */

/* Laptop pequeña */

@media (max-width:1200px){

    /* Decoraciones del bloque de reunión */

    .corner-decoration{

        width:280px;
    }

    .corner-bottom-left{

        left:-60px;
    }

    .corner-top-right{

        right:20px;
    }

    .corner-symbol-5{

        right:-60px;
    }


    /* Decoraciones entre servicios */

    .section-decoration{

        width:320px;
    }

    .section-symbol-2{

        left:100px;
    }

    .section-symbol-1r{

        right:100px;
    }


    /* Decoraciones grandes del fondo */

    .checktex-side-image{

        width:450px;
    }

    .left-checktex{

        left:-120px;
    }

    .right-checktex{

        right:-120px;
    }

}