/* ===================================
    Crafto - Marketing
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
/* variable */
:root {      
    --alt-font: 'Poppins', serif;
    --primary-font: 'Poppins', serif;
    --base-color: #B363A7;
    --dark-gray: #1f242e; 
    --yellow: #ffeb7d; 
    --medium-gray: #717580;
    --aluminium-grey: #6e727c;
}   
/* custom cursor */
@media (hover: hover) and (pointer: fine) {
    .custom-cursor .circle-cursor-outer {
        border: 1px solid transparent;
    }
    .custom-cursor .circle-cursor-inner {
        width: 10px;
        height: 10px;
        background: #1f242e;
    }
}
body{
    line-height: 30px;
    overflow-x: hidden;
}
.fontcolor-gris{
    color: #9B9B9B;
}
.fontcolor-magenta{
    color: #B363A7;
}
.fontcolor-aguamarina{
    color: #00D3CD;
}
.fontcolor-negro{
    color: #474747;
}

.color-magenta{
    color:#B363A7;
}

/* header */
.bg-white-clear{
    background-color:rgba(255, 255, 255, 0.32);
}
.navbar .navbar-nav .nav-link {
    font-size: 18px;
}
header .navbar-brand img {
    max-height: 85px;
}
.navbar .navbar-nav .simple-dropdown .dropdown-menu {
    width: 260px;
}
.navbar .navbar-nav .simple-dropdown .dropdown-menu li a {
    font-size: 14px;
    font-weight: 400;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon .dropdown-menu {
    width: 360px;
}
.header-icon .header-social-icon a {
    font-size: 17px;
    padding-left: 23px;
}
/* bg color */
.bg-light-red-grey {
    background-color: #fff1ee;
} 
.bg-base-color-transparent {
    background-color: rgba(255, 122, 86,.9);
}
/* bg gradient */
.bg-gradient-black-green { 
    background-image: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,242,239,1) 80%, rgba(255,242,239,1) 100%);
}
.bg-jungle-green {
    background-color: #2ebb79;
}
/* slider shadow */
.slider-shadow-left-right {
    mask-image:linear-gradient(to right, transparent 10%, #000000 25%, #000000 75%, transparent 90%);
    -webkit-mask-image:linear-gradient(to right, transparent 10%, #000000 25%, #000000 75%, transparent 90%); 
}
/* text color */
.text-jungle-green {
    color: #2ebb79;
}
/* btn */
.btn {
    text-transform: none;
    letter-spacing: 0px;
}
.btn.btn-very-small { 
    padding: 9px 18px;
}
.btn.btn-small { 
    padding: 11px 22px;
}
.btn.btn-medium { 
    padding: 12px 22px 13px;
}
.btn.btn-large { 
    padding: 13px 26px 15px;
}
.btn.btn-extra-large { 
    padding: 16px 32px 18px;
    word-break: normal;
}
.btn.btn-extra-large .btn-icon i {
    top: 0;
}
.btn-icon i {
    top: 1px;
}
.btn.btn-link {
    padding: 0 0 2px;
}
.btn.btn-hover-animation-switch .btn-icon {
    margin-left: 6px;
}
/* portfolio filter */
.portfolio-simple .portfolio-box:hover .portfolio-image img {
    opacity: 1;
}
/* footer */
footer .elements-social li {
    margin: 0 10px 0 0;
}
footer .footer-logo img {
    max-height: 27px;
}
footer {
    padding-bottom: 30px;
}
footer {
    font-size: 15px;
    line-height: 30px;
}
/* newsletter style 02  */
.newsletter-style-02 input {
    padding-right: 90px !important; 
    font-size: 14px;
}
/* tabs style 08 */
.tab-style-08 ul .nav-item .nav-link.active,
.tab-style-08 ul .nav-item .nav-link.show,
.tab-style-08 ul .nav-item .nav-link:hover {
    /* color: var(--dark-gray); */
    color: #000000;
}
/* team style 01 */
.team-style-01 figure figcaption .social-icon a {
    margin: 0 5px;
}
/* process step style 05 */
.process-step-style-05 .progress-step-separator {
    bottom: -10px;
    height: 100%;
    z-index: -1;
}
/* select */
.select:after {
    right: 25px;
}

.intro-internas{
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
    height: 40vh; display: flex; 
    align-items: center; 
    justify-content: center;
}

.primertexto-banner1{
    font-size: 72px;
    line-height: 1.2;
    margin-top: 8vh;
    margin-bottom: 20px;
    margin-left: 13vh;
    margin-right: 17vh;
}

.primertexto-banner1 p.negritas{
    font-weight: 800;
}

.segundotexto-banner1{
    font-size: 28px;
    line-height: 1.2;
    margin-bottom: 20px;
    margin-left: 15vh;
    margin-right: 20vh;
}

.btn-banner1{
    font-size: 32px;
    color: #ffffff;
    background: #B363A7;
}

.btn-banner1:hover{
    font-size: 32px;
    color: #ffffff;
    background: #00D3CD;
}

.btn-posicion {
    margin-left: 15vh;
}

.primertexto-banner2{
    font-size: 120px;
    font-weight: bold;
    color: #000000;
    line-height: 0.8;
}

.primertexto-banner2 span{
    font-size: 100px;
}

.segundotexto-banner2{
    font-size: 48px;
    color: #000000;
    line-height: 1;
}

.btn-banner2{
    font-size: 32px;
    color: #ffffff;
    background: #00D3CD;
}

.btn-banner2:hover{
    font-size: 32px;
    color: #ffffff;
    background: #B363A7;
}

.btn-posicion-banner2 {
    padding-left: 10vh;
    margin-top: -5vh;
}

.fotodoc_banner2{
    height: 100vh;
}

.fondo_banner2{
    height: 850px;
}

.primertexto-banner3{
    font-size: 90px;
    font-weight: bold;
    color: #9B9B9B;
    line-height: 1;
    margin-left: -10vh;
}

.primertexto-banner3 span.menor{
    font-size: 70px;
    font-weight: bold;
}

.video-banner3{
    margin-top: 5vh;
    margin-left: 20vh;
    width: 700px; 
    border-radius:30px;
}

.segundotexto-banner3{
    font-size: 30px;
    color: #9B9B9B;
    line-height: 1;
    margin-left: -10vh;
}

.btn-banner3{
    font-size: 32px;
    font-weight: bold;
    color: #B363A7;
    background: #ffffff;
    border-color: #B363A7;
    border-width: 5px;
    margin-left: -10vh;
    padding-left: 15vh;
    padding-right: 15vh;
    padding-top: 1vh;
    padding-bottom: 1vh;
}

.btn-banner3:hover{
    font-size: 32px;
    color: #ffffff;
    background: #B363A7;
}

.btn-posicion-banner3{
    padding-left: -10vh;
}

.primertexto-banner4{
    font-size: 48px;
    font-weight: bold;
    color: #000000;
    line-height: 1;
    padding-top: 4vh;
}

.primertexto-banner4 span{
    font-size: 60px;
    
    color: #B363A7;
    line-height: 1;
}

.segundotexto-banner4{
    font-size: 28px;
    color: #000000;
    line-height: 1.2;
}

.categorias-banner4{
    font-size: 20px;
    font-weight: 500;
    color: #000000;
}

.btn-banner4{
    font-size: 24px;
    color: #ffffff;
    background: #B363A7;
}

.btn-banner4:hover{
    font-size: 24px;
    color: #ffffff;
    background: #00D3CD;
}

.btn-planes{
    font-size: 24px;
    color: #ffffff;
    background: #B363A7;
}

.btn-planes:hover{
    font-size: 24px;
    color: #ffffff;
    background: #00D3CD;
}

.portfolio-caption{
    height: 7vh;
}

.primertexto-banner5{
    font-size: 44px;
    font-weight: bold;
    color: #9B9B9B;
    line-height: 1.2;
}

.primertexto-banner5 span.grande{
    font-size: 72px;
}

.primertexto-banner5 span.ligth{
    font-weight: lighter;
}

.btn-banner5{
    font-size: 32px;
    font-weight: bold;
    color: #B363A7;
    background: #ffffff;
    border-color: #B363A7;
    border-width: 5px;
    padding-left: 10px;
    padding-right: 10px;
}

.btn-banner5:hover{
    font-size: 32px;
    color: #ffffff;
    background: #B363A7;
}

.segundotexto-banner5{
    font-size: 28px;
    font-weight: 400;
    color: #9B9B9B;
    line-height: 1;
    padding-top: 15px;
}

.primertexto-banner52{
    font-size: 44px;
    font-weight: bold;
    color: #4143a8;
    line-height: 0.8;
}

.primertexto-grande-banner52{
    font-size: 68px;
    font-weight: bold;
    color: #4143a8;
}

.segundotexto-banner52{
    font-size: 32px;
    font-weight: bold;
    color: #9B9B9B;
    line-height: 0.5;
}

.tercertexto-banner52{
    margin-top: 7vh;
    font-size: 32px;
    font-weight: 400;
    color: #2b2c69;
    line-height: 1;
}

.cuartotexto-banner52{
    margin-top: 7vh;
    font-size: 32px;
    font-weight: bold;
    color: #2b2c69;
    line-height: 1;
}

.primertexto-banner6{
    font-size: 72px;
    font-weight: bold;
    color: #000000;
    line-height: 1.2;
}

.segundotexto-banner6{
    font-size: 40px;
    font-weight: 400;
    color: #000000;
    line-height: 1.2;
}

.segundotexto-banner6 span{
    font-weight: 800;
}

.btn-banner6{
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    background: #B363A7;
    padding: 1vh 10vh;
}

.btn-banner6:hover{
    font-size: 32px;
    color: #ffffff;
    background: #00D3CD;
    padding: 1vh 10vh;
}

.primertexto-banner7{
    font-size: 48px;
    font-weight: bold;
    color: #B363A7;
    line-height: 1.2;
}

.segundotexto-banner7{
    font-size: 42px;
    font-weight: 400;
    color: #000000;
    line-height: 1.2;
}

.team-member{
    color: #ffffff;
    background-color: #B363A7;
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.team-member:hover{
    color: #ffffff;
    background-color:#00D3CD;
    -webkit-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px -6px rgba(0,0,0,0.75);
}

.primertexto-banner8{
    font-size: 60px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
}

.primertexto-banner8 span{
    font-size: 68px;
    font-weight: 800;
}

.segundotexto-banner8{
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1;
}

.btn-banner8{
    font-size: 32px;
    font-weight: bold;
    color: #B363A7;
    background: #ffffff;
    padding: 1vh 10vh;
}

.btn-banner8:hover{
    font-size: 32px;
    color: #ffffff;
    background: #00D3CD;
}

.primertexto-banner9{
    font-size: 72px; 
    color:#B363A7;
    font-weight: 800;
    line-height: 1;
}

.segundotexto-banner9{
    font-size: 40px; 
    color:#000000;
}

.btn-banner9{
    font-size: 32px;
    font-weight: bold;
    color: #ffffff;
    background: #00D3CD;
    padding: 1vh 10vh;
}

.btn-banner9:hover{
    font-size: 32px;
    color: #ffffff;
    background: #B363A7;
}

.video-banner1{
    margin-top: 5vh;
    margin-right: 5vh;
    width: 800px; 
    border-radius:30px;
    -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
    box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
}


/* MODULO DE CONTACTO */

.titulo-pagina{
    font-size: 72px;
    font-weight: 700;
    color: #000000;
}

.subtitulo-pagina{
    font-size: 28px;
    font-weight: 500;
    color: #000000;
}


/* PAGINA CEO */

.foto-ceo{
    margin-left: 20vh;
}

.foto-ceo .alto{
    margin-top: 10vh;
    height: 90vh;
}

.cuadro-texto-ceo{
    padding-right: 10%; 
    margin-left: -20vh;
}

.nombre-ceo{
    font-size: 60px; 
    font-weight:300; 
    color: #000000; 
    line-height: 1;
}

.nombre-ceo .ligth{
    font-weight:600;
}

.nombre-ceo .bold{
    font-size: 80px;
    font-weight:900
}

.primertexto-banner1-ceo{
    padding-top: 2vh;
    font-size: 22px; 
    color:#000000;
    font-weight: 400;
    line-height: 1.4;
}

.primertexto-banner1-ceo-negritas{
    font-size: 26px; 
    font-weight: 800;
}

.primertexto-banner1-ceo-magenta{
    font-size: 26px; 
    font-weight: 800;
    color:#B363A7;
}

.foto-metodo{
    padding-left: 15vh;
    height: 70vh;
}

.alto-texto-producto{
    height: 17vh;
}

/* PAGINA CEO */


.video-banner-somos{
    width: 600px; 
    border-radius:30px;
}

.video-ceo{
    /* margin-left: 5vh; */
    width: 170px;
    border: 2px solid #000000;
    border-radius:50%;
    -webkit-box-shadow: 10px 9px 5px -10px rgba(0,0,0,0.75);
    -moz-box-shadow: 10px 9px 5px -10px rgba(0,0,0,0.75);
    box-shadow: 10px 9px 5px -10px rgba(0,0,0,0.75);
}


/* PAGINA DE SERVICIOS */

.titulo-web-servicios{
    font-size: 45px; 
    color:#000000;
    font-weight: 400;
    line-height: 1;
    text-align: center;
}

.titulo-web-servicios .bold{
    font-weight: 700;
}

.primertexto-web-servicios{
    font-size: 22px; 
    color:#000000;
    font-weight: 400;
    line-height: 1.2;
}

.primertexto-web-servicios-magenta{
    font-size: 26px; 
    font-weight: 800;
    color:#943886;
}

.primertexto-web-servicios-negrita{
    font-size: 26px; 
    font-weight: 800;
    color:#000000;
}

.titulo-servicio-web-servicios{
    font-size: 20px; 
    color:#000000;
    font-weight: 600;
    text-align: center;
    margin: 3vh 1vh;
}

.texto-servicio-web-servicios{
    font-size: 18px; 
    font-weight: 400;
    color:#000000;
    margin: 3vh 2vh;
}

.texto-servicio-web-servicios-magenta{
    font-size: 20px; 
    font-weight: 700;
    color:#B363A7;
}

.titulo-banner2-web-servicios{
    font-size: 52px; 
    color:#000000;
    font-weight: 400;
    line-height: 1.2;
}

.titulo-banner2-web-servicios .bold{
    font-size: 60px; 
    font-weight: 800;
}

.subtitulo-banner2-web-servicios{
    font-size: 22px; 
    color:#B363A7;
    font-weight: 500;
    line-height: 1.2;
    margin-top: 3vh;
}

.texto-banner2-web-servicios{
    font-size: 18px; 
    font-weight: 400;
    color:#000000;
    line-height: 1.4;
}

.texto-banner2-web-servicios .bold{
    font-size: 19px; 
    font-weight: 700;
}

.titulo-cta-web-servicios{
    font-size: 42px; 
    color:#000000;
    font-weight: 500;
    line-height: 1.2;
}

.texto-cta-web-servicios{
    font-size: 28px; 
    color:#000000;
    font-weight: 400;
    line-height: 1;
}

.titulo-pasos-web-servicios{
    font-size: 60px; 
    color:#000000;
    font-weight: 800;
    line-height: 1.2;
}

.texto-pasos-web-servicios{
    font-size: 18px; 
    color:#000000;
    font-weight: 400;
    line-height: 1.2;
}

.btn-banner-bgrosa{
    font-size: 32px;
    color: #ffffff;
    background: #00D3CD;
}

.btn-banner-bgrosa:hover{
    font-size: 32px;
    color: #ffffff;
    background: #5a2977;
}


.ocultar {
    display: none;
}

.mostrar {
display: block;
}

.cuadros-container {
    display: flex;
    flex-wrap: wrap; /* Permite que los cuadros se envuelvan en varias líneas */
    justify-content: space-around;
    align-items: center;
    width: 95%;
    margin: 20px auto;
}

.cuadro {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 22%;
    height: 220px;
    border-radius: 10px;
    padding: 40px 20px 30px;
    position: relative;
    margin-bottom: 20px; /* Añade margen inferior para separar los cuadros en móviles */
}

@media (max-width: 576px) {
    .cuadros-container {
        width: 100%; /* Asegura que el contenedor ocupe el 100% del ancho en dispositivos móviles */
        margin: 0; /* Elimina el margen para evitar desplazamiento horizontal */
    }
    .cuadro {
        width: 100%; /* Ocupa el 100% del ancho en dispositivos móviles */
        margin-bottom: 60px; /* Añade margen inferior para separar los cuadros en móviles */
    }
    .section {
        height: auto; /* Ajusta la altura de la sección para dispositivos móviles */
        padding: 20px 0; /* Añade padding para asegurar espacio suficiente */
    }
}

/* Colores de fondo para cada cuadro */
.cuadro:nth-child(1) {
    background-color: #B363A7; /* Morado */
}

.cuadro:nth-child(2) {
    background-color: #00D3CD; /* Turquesa */
}

.cuadro:nth-child(3) {
    background-color: #2c1594; /* Índigo */
}

.cuadro:nth-child(4) {
    background-color: #4B0082; /* Violeta */
}

.numero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: -70px;
    z-index: 1;
    border: 5px solid white;
}

/* Colores de círculo para cada cuadro */
.cuadro:nth-child(1) .numero-container {
    background-color: #B363A7; /* Morado más oscuro */
}

.cuadro:nth-child(2) .numero-container {
    background-color: #00D3CD; /* Turquesa más oscuro */
}

.cuadro:nth-child(3) .numero-container {
    background-color: #2c1594; /* Azul rey */
}

.cuadro:nth-child(4) .numero-container {
    background-color: #4B0082; /* Violeta más claro */
}

.numero {
    font-size: 28px;
    font-weight: bold;
    color: white;
}

.texto {
    text-align: center;
    color: white;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Asegúrate de que el contenedor tenga una altura definida */
}

.cuadro::after {
    content: "";
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid transparent; /* Azul por defecto */
}

/* Colores de flecha para cada cuadro */
.cuadro:nth-child(1)::after {
    border-top-color: #B363A7; /* Morado más oscuro */
}

.cuadro:nth-child(2)::after {
    border-top-color: #00D3CD; /* Turquesa más oscuro */
}

.cuadro:nth-child(3)::after {
    border-top-color: #2c1594; /* Azul rey */
}

.cuadro:nth-child(4)::after {
    border-top-color: #4B0082; /* Violeta más claro */
}

.input-group-text {
    cursor: pointer;
}

.fixed-size-image {
    /* width: 100%; */
    height: 22vh;
    object-fit: cover;
    align-items: center;
}

/* Media queries para diferentes tamaños de pantalla */

/* Pantallas grandes (desktops y laptops) */
@media (min-width: 1200px) {
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding: 10px 13px;
    }
    .newsletter-style-02 input {
        padding-left: 15px;
        padding-right: 100px;
    }
    .nav-link {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }
    .elements-social .large-icon li {
        margin: 0 5px;
    }
    .lg-overflow-hidden {
        overflow: hidden;
    }
    .lg-mt-45 {
        margin-top: 45% !important;
    }

    
    .titulo-web-servicios{
        margin-top: 10vh;
        font-size: 45px; 
        color:#000000;
        font-weight: 400;
        line-height: 1;
        text-align: center;
    }

    .primertexto-banner1{
        font-size: 48px;
        line-height: 1.2;
        margin-top: 8vh;
        margin-bottom: 20px;
        margin-left: 13vh;
        margin-right: 17vh;
    }
    
    .primertexto-banner1 p.negritas{
        font-weight: 800;
    }
    
    .segundotexto-banner1{
        font-size: 24px;
        line-height: 1.2;
        margin-bottom: 20px;
        margin-left: 13vh;
        margin-right: 20vh;
    }

    .video-banner1{
        margin-top: 5vh;
        margin-right: 5vh;
        width: 600px; 
        border-radius:30px;
        -webkit-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
        -moz-box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
        box-shadow: 10px 10px 5px -4px rgba(0,0,0,0.75);
    }

    .primertexto-banner2{
        padding-top: 20vh;
    }

    .btn-posicion-banner2 {
        padding-left: 10vh;
        margin-top: 10vh;
    }

    .video-banner3{
        margin-top: 10vh;
        margin-left: 20vh;
        width: 600px; 
        border-radius:30px;
    }

    .primertexto-banner3{
        font-size: 90px;
        font-weight: bold;
        color: #9B9B9B;
        line-height: 1;
        margin-left: -10vh;
    }

    .primertexto-banner3 span.menor{
        font-size: 30px;
        font-weight: bold;
    }

    .primertexto-banner5{
        font-size: 38px;
        font-weight: bold;
        color: #9B9B9B;
        line-height: 1.2;
    }
    
    .primertexto-banner5 span.grande{
        font-size: 52px;
    }
    
    .primertexto-banner5 span.ligth{
        font-weight: lighter;
    }
    
    .btn-banner5{
        font-size: 26px;
        color: #B363A7;
        background: #ffffff;
        border-color: #B363A7;
        border-width: 1px;
        padding-left: 10vh;
        padding-right: 10vh;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }
    
    .btn-banner5:hover{
        font-size: 26px;
        color: #ffffff;
        background: #B363A7;
    }
    
    .segundotexto-banner5{
        font-size: 28px;
        font-weight: 400;
        color: #9B9B9B;
        line-height: 1;
        padding-top: 15px;
    }

    .foto-ceo{
        margin-left: 20vh;
    }
    
    .foto-ceo .alto{
        margin-top: -5vh;
        height: 90vh;
    }

    .nombre-ceo{
        margin-top: 5vh;
        font-size: 50px; 
        font-weight:300; 
        color: #000000; 
        line-height: 1;
    }
    
    .nombre-ceo .ligth{
        font-weight:600;
    }
    
    .nombre-ceo .bold{
        font-size: 60px;
        font-weight:900
    }

    .foto-metodo{
        padding-left: 15vh;
        height: 70vh;
    }

    .alto-texto-producto{
        height: 17vh;
    }

    .primertexto-banner1-ceo{
        font-size: 18px; 
        color:#000000;
        font-weight: 400;
        line-height: 1.4;
    }
    
    .primertexto-banner1-ceo-negritas{
        font-size: 22px; 
        font-weight: 800;
    }
    
    .primertexto-banner1-ceo-magenta{
        font-size: 22px; 
        font-weight: 800;
        color:#B363A7;
    }
    
}

/* Pantallas medianas (tablets en orientación horizontal) */
@media (min-width: 992px) and (max-width: 1199px) {
    .header-icon .icon {
        top: -2px;
    }
    .elements-social.social-icon-style-04 .large-icon a {
        font-size: 21px;
        width: 50px;
        height: 50px;
    }
    .navbar .navbar-nav .nav-link {
        font-size: 18px;
    }
    .md-right-minus-250px{
        margin-right: -100px !important;
    }
    .tab-style-08 ul .nav-item .nav-link {
        padding: 25px 25px;
    }

}

/* Pantallas pequeñas (tablets en orientación vertical) */
@media (min-width: 768px) and (max-width: 991px) {
    
    
}

/* Pantallas extra pequeñas (smartphones) */
@media (max-width: 767px) {
    .elements-social ul li {
        margin-bottom: 0;
    }

    .intro-internas{
        background-size: cover; 
        background-position: center; 
        background-repeat: no-repeat; 
        height: 28vh; display: flex; 
        align-items: center; 
        justify-content: center;
    }

    .titulo-web-servicios{
        margin-top: 10vh;
        font-size: 25px; 
        color:#000000;
        font-weight: 400;
        line-height: 1;
        text-align: center;
    }

    .foto-ceo{
        margin-top: 2vh;
        margin-left: 10vh;
    }
    
    .foto-ceo .alto{
        margin-top: 0;
        height: 42vh;
    }

    .cuadro-texto-ceo{
        padding-right: 0; 
        margin-left: 0;
    }

    .espacio-video-ceo{
        display: none;
    }

    .nombre-ceo{
        font-size: 50px; 
        text-align: center;
        font-weight:300; 
        color: #000000; 
        line-height: 1;
    }
    
    .nombre-ceo .ligth{
        font-weight:600;
    }
    
    .nombre-ceo .bold{
        font-size: 70px;
        font-weight:900
    }

    .primertexto-banner1-ceo{
        font-size: 20px;
        text-align: initial;
        color:#000000;
        font-weight: 400;
        line-height: 1.4;
        word-wrap: break-word; /* Permite que las palabras largas se dividan y ajusten al ancho de la pantalla */
        white-space: normal; /* Asegura que el texto se ajuste al ancho del contenedor */
        padding-left: 5px; /* Ajusta el padding izquierdo para mejorar la visualización en móviles */
        padding-right: 5px; /* Ajusta el padding derecho para mejorar la visualización en móviles */
    }
    
    .primertexto-banner1-ceo-negritas{
        font-size: 24px; 
        font-weight: 800;
    }
    
    .primertexto-banner1-ceo-magenta{
        font-size: 24px; 
        font-weight: 800;
        color:#B363A7;
    }

    .primertexto-banner1{
        font-size:36px;
        color: #000000;
        text-align: center;
        line-height: 1.2;
        margin-top: 7vh;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .primertexto-banner1 p.negritas{
        font-weight: 800;
    }

    .segundotexto-banner1{
        font-size: 24px;
        color: #000000;
        text-align: center;
        line-height: 1.2;
        margin-top: 4vh;
        margin-bottom: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .video-banner1{
        display: none;
    }

    .btn-banner1{
        font-size: 20px;
        color: #ffffff;
        background: #B363A7;
    }
    
    .btn-banner1:hover{
        font-size: 20px;
        color: #ffffff;
        background: #00D3CD;
    }

    .btn-posicion {
        margin-left: 5vh;
        margin-top: 5vh;
    }

    .bordesdifuminados {
        mask-image: linear-gradient(
            black 88%,
            transparent
        );
        height: 450px;
    }

    .fondo_banner2{
        height: 50vh;
    }

    .fotodoc_banner2{
        height: 55vh;
    }

    .texto_banner2{
        display: none;
    }

    .primertexto-banner2{
        font-size: 60px;
        text-align: center;
        font-weight: bold;
        color: #000000;
        line-height: 0.8;
    }

    .primertexto-banner2 span{
        font-size: 50px;
    }

    .segundotexto-banner2{
        font-size: 24px;
        color: #000000;
        line-height: 0.9;
    }

    .centrar-segundotexto-banner2{
        text-align: center;
    }

    .btn-posicion-banner2 {
        padding-left: 10vh;
        padding-top: -20vh;
    }

    .btn-banner2{
        font-size: 20px;
        color: #ffffff;
        background: #00D3CD;
    }
    
    .btn-banner2:hover{
        font-size: 20px;
        color: #ffffff;
        background: #B363A7;
    }

    .primertexto-banner3{
        font-size: 38px;
        text-align: center;
        font-weight: bold;
        color: #9B9B9B;
        line-height: 1;
        margin-top: 2vh;
        margin-left: 5px;
    }
    .primertexto-banner3 span.menor{
        font-size: 24px;
        font-weight: bold;
    }

    .video-banner3{
        margin-left: 5vh;
        width: 330px; 
        border-radius:20px;
    }

    .segundotexto-banner3{
        font-size: 22px;
        color: #9B9B9B;
        line-height: 1;
        margin-left: 5px;
    }

    .centrar-segundotexto-banner3{
        text-align: center;
    }

    .btn-posicion-banner3{
        padding-left: 12.5vh;
    }
    
    .btn-banner3{
        font-size: 20px;
        text-transform: uppercase;
        color: #B363A7;
        background: #ffffff;
        border-color: #B363A7;
        border-width: 1px;
        padding-left: 10vh;
        padding-right: 10vh;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }
    

    .categorias-banner4{
        font-size: 24px;
        font-weight: 500;
        color: #000000;
    }
    
    .btn-banner4{
        display: none;
    }
    
    .bg-clear-banner5{
        background-color: #ffffff3d;
    }
    .primertexto-banner5{
        font-size: 28px;
        font-weight: bold;
        color: #000000;
        line-height: 1.2;
    }
    
    .primertexto-banner5 span.grande{
        font-size: 32px;
    }
    
    .primertexto-banner5 span.ligth{
        font-weight: lighter;
    }
    
    .btn-banner5{
        font-size: 20px;
        text-transform: uppercase;
        color: #B363A7;
        background: #ffffff;
        border-color: #B363A7;
        margin-left: -3vh;
        border-width: 1px;
        padding-left: 10vh;
        padding-right: 10vh;
        padding-top: 1vh;
        padding-bottom: 1vh;
    }
    
    .segundotexto-banner5{
        font-size: 22px;
        font-weight: 500;
        color: #000000;
        line-height: 1.2;
        padding-top: 30px;
    }

    .posicion-banner5{
        padding-left: 7vh;
    }

    .primertexto-banner52{
        font-size: 32px;
        font-weight: bold;
        color: #4143a8;
        line-height: 1;
    }
    
    .primertexto-grande-banner52{
        font-size: 48px;
        font-weight: bold;
        color: #4143a8;
        line-height: 1;
    }
    
    .segundotexto-banner52{
        font-size: 32px;
        font-weight: bold;
        color: #9B9B9B;
        line-height: 1;
    }
    
    .tercertexto-banner52{
        margin-top: 7vh;
        font-size: 32px;
        font-weight: 400;
        color: #2b2c69;
        line-height: 1;
    }
    
    .cuartotexto-banner52{
        margin-top: 7vh;
        font-size: 32px;
        font-weight: bold;
        color: #2b2c69;
        line-height: 1;
    }

    .primertexto-banner6{
        font-size: 46px;
        font-weight: bold;
        color: #000000;
        line-height: 1.2;
    }
    
    .segundotexto-banner6{
        font-size: 24px;
        font-weight: 400;
        color: #000000;
        line-height: 1.2;
    }
    
    .segundotexto-banner6 span{
        font-weight: 800;
    }
    
    .btn-banner6{
        font-size: 20px;
        color: #ffffff;
        background: #B363A7;
        border-radius: 5px;
    }
    
    .btn-banner6:hover{
        font-size: 20px;
        color: #ffffff;
        background: #00D3CD;
        border-radius: 5px;
    }

    .primertexto-banner8{
        font-size: 40px;
        font-weight: 400;
        color: #ffffff;
        line-height: 1;
    }
    
    .primertexto-banner8 span{
        font-size: 52px;
        font-weight: 800;
    }
    
    .segundotexto-banner8{
        font-size: 28px;
        font-weight: 400;
        color: #ffffff;
        line-height: 1;
    }
    
    .btn-banner8{
        margin-top: 5vh;
        font-size: 24px;
        color: #B363A7;
        background: #ffffff;
        border-radius: 5px;
    }
    
    .btn-banner8:hover{
        font-size: 24px;
        color: #ffffff;
        background: #00D3CD;
        border-radius: 5px;
    }

    .primertexto-banner9{
        font-size: 46px; 
        color:#B363A7;
        font-weight: 800;
        line-height: 1;
    }

    .segundotexto-banner9{
        font-size: 32px; 
        color:#000000;
    }

    .btn-banner9{
        /* margin-left: 3vh; */
        font-size: 24px;
        color: #ffffff;
        background: #00D3CD;
        border-radius: 5px;
    }
    
    .btn-banner9:hover{
        font-size: 24px;
        color: #ffffff;
        background: #B363A7;
        border-radius: 5px;
    }

    .primertexto-banner4{
        font-size: 24px;
        font-weight: bold;
        color: #000000;
        line-height: 1;
        padding-top: 4vh;
    }
    
    .primertexto-banner4 span{
        font-size: 32px;
        
        color: #B363A7;
        line-height: 1;
    }

    
}