﻿@font-face {
    font-family: 'plusjakartasans-bold';
    src: url('../../fonts/custom/PlusJakartaSans/PlusJakartaSans-bold.ttf') format('opentype');
}
@font-face {
    font-family: 'plusjakartasans-light';
    src: url('../../fonts/custom/PlusJakartaSans/PlusJakartaSans-Light.ttf') format('opentype');
}
@font-face {
    font-family: 'plusjakartasans-regular';
    src: url('../../fonts/custom/PlusJakartaSans/PlusJakartaSans-Regular.ttf') format('opentype');
}

@font-face {
    font-family: 'effra-bold';
    src: url('../../fonts/custom/Effra/Effra-Bold.ttf') format('opentype');
}

@font-face {
    font-family: 'effra-light';
    src: url('../../fonts/custom/Effra/Effra-Light.ttf') format('opentype');
}

@font-face {
    font-family: 'effra';
    src: url('../../fonts/custom/Effra/Effra.ttf') format('opentype');
}

:root {
    --bg_purple_vway_primary: #5f2594;
}


body {
    font-family: effra, effra-light, effra-bold, Arial, Verdana, Tahoma !important;
    font-size: medium !important;
}

b, strong, h6, .h6, h5, .h5, h4, .h4, h3, .h3, h2, .h2, h1, .h1 {
    font-family: effra !important;
    color: var(--main-primary-color-01) !important;
}

.lift {
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    transform: translateY(0);
    transition: all 0.3s ease;
}

    .lift:hover {
        transform: translateY(-0.4rem);
        /*box-shadow: 0rem 0.25rem 1.25rem rgba(52, 63, 82, 0.1);*/
        box-shadow: 0rem 0.25rem 1.25rem var(--main-primary-color-01);
        /*box-shadow: 0rem 0.25rem 1.25rem var(--main-secondary-color-01);*/
    }

.logo {
    height: 40px;
    width: auto;
}

.logo_play_store {
    height: 65px;
    width: auto;
}

.top-comercio {
    max-height: 175px;
    width: auto;
}

.top-comercioBlock {
    height: 200px !important;
}

.bodySection {
    padding-top: 50px !important;
}

.div-map {
    width: 100%;
    min-height: 450px;
    display: inline-block;
    overflow: hidden;
    border-top: solid;
    border-width: 5px;
}

.frame-map {
    width: 100%;
    min-height: 750px;
    position: relative;
    top: -75px;
    border: solid;
    border-width: 5px;
}

.border-primary {
    /*border-top-color: var(--main-primary-color-01);*/
    border-color: var(--main-primary-color-01);
}

.border-secondary {
    /*border-top-color: var(--main-secondary-color-01);*/
    border-color: var(--main-secondary-color-01) !important;
}

.curve {
    background-color: var(--main-color);
    min-height: 100vh;
    width: 100%;
    -moz-border-radius-bottomright: 25px 50px;
    border-bottom-right-radius: 50px 200px;
}

.gradienteP {
    background: linear-gradient(to right, var(--main-secondary-color-02), var(--main-secondary-color-01) 75%);
}

.figura-rara {
    clip-path: polygon(0% 100%, 100% 0%, 100% 100%, 0% 100%);
}

.bg-main-secondary-01 {
    background-color: var(--main-secondary-color-01) !important;
}

.iconoCuik {
    width: 120px;
}

.btn-whatsapp {
    position: fixed;
    right: 2.00rem;
    bottom: 2.25rem;
    width: 2.80rem;
    height: 2.80rem;
    cursor: pointer;
    display: block;
    border-radius: 100%;
    background-color: var(--color-whatsapp);
}

::-webkit-scrollbar {
    width: 14px;
}

::-webkit-scrollbar-thumb {
    border: 4px solid rgba(0, 0, 0, 0);
    background-clip: padding-box;
    border-radius: 9999px;
    background-color: #AAAAAA;
}

.dataTables_paginate, .dataTables_filter {
    text-align: end;
}

.fixed-header{
    position : sticky !important;
}

#zero_config_paginate, #zero_config_filter {
    padding-top: 25px !important;
}

.custom_table_bg {
    --bs-table-striped-bg: #f6f6f6;
}

.fc-secondary-01 {
    color: var(--main-secondary-color-01) !important;
}

.list-group-numbered-2 {
    list-style-type: none;
    counter-reset: section;
    min-width: 50px;
}

.list-group-numbered-2 > .list-group-item-2::before {
    content: counters(section, ".") ". ";
    /*content: counters(section, ".") " ";*/
    counter-increment: section;
}

.fc-normal {
    color: var(--main-color-normal);
}

.fc-bold-color{

}

.fc-black{
    color : #000000 !important;
}

.mega-menu-border {
    border: solid;
    border-color: var(--main-primary-color-01);
    border-width: 2px;
}

.navbar-expand-md .mega-menu-content {
    padding: 0.6rem 0.25rem 0.2rem;
}

.navbar-expand-sm .navbar-nav,
.navbar-expand-sm .dropdown-mega {
    position: static !important;
}

.navbar-expand-md .navbar-nav,
.navbar-expand-md .dropdown-mega {
    position: static !important;
}

.navbar-expand-lg .navbar-nav,
.navbar-expand-lg .dropdown-mega {
    position: static !important;
}

.navbar-expand-xl .navbar-nav,
.navbar-expand-xl .dropdown-mega {
    position: static !important;
}

.navbar-expand-xxl .navbar-nav,
.navbar-expand-xxl .dropdown-mega {
    position: static !important;
}

.navbar-expand .navbar-nav,
.navbar-expand .dropdown-mega {
    position: static !important;
}

.dropdown-mega .dropdown-menu {
    margin: 15px auto !important;
    left  : 0 !important;
    right : 0 !important;
    width : calc(100% - 200px) !important;
    max-width: none !important;
}

.navbar-expand-sm .mega-menu-content > .row > [class*=col-] + [class*=col-],
.navbar-expand-sm .dropdown-lg-content > div + div {
    border-left: 1px solid rgba(164, 174, 198, 0.2);
}

.navbar-expand-sm .mega-menu-content {
    padding: 0.6rem 0.25rem 0.2rem;
}

.navbar-expand-sm .mega-menu-content > .row > [class*=col-] + [class*=col-],
.navbar-expand-sm .dropdown-lg-content > div + div {
    border-left: 1px solid rgba(164, 174, 198, 0.2);
}

.navbar-expand-sm .mega-menu-content {
    padding: 0.6rem 0.25rem 0.2rem;
}

.navbar-expand-sm .mega-menu-img .mega-menu-content {
    padding: 0.2rem 2rem !important;
    margin: 1.8rem 0 !important;
}

.navbar-expand-md .mega-menu-content > .row > [class*=col-] + [class*=col-],
.navbar-expand-md .dropdown-lg-content > div + div {
    border-left: 1px solid rgba(164, 174, 198, 0.2);
}

.imgMegaMenu {
    max-height: 50px;
    width: auto;
}

.margin-fix{
    margin-top: 15px !important;
}

.mega-menu-show {
}

ul li.li-parent:hover .mega-menu-show {
    display: block !important;
}


.text-transfer-align {
    text-align: justify !important;
}


.container_purple {
    min-height: 100vh !important;
    max-height: 100vh !important;
    height: 100vh !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    background-color: #5f2596 !important;
    color : #ffffffff !important;
}

.container_card {
    border-radius: 40px !important;
    width:  500px !important;
    height: 600px !important;
}

.card_vway_left{
    background-color : #ffffff !important;
}

.card_vway_right {
    background-color: #7442a4 !important;
    border: 1px solid #926bb7;
}


/* CARDS */

/* Contenedor general para ambos cards */
/*.container_section {
    min-height: calc(100vh - 80px) !important;
    height: calc(100vh - 80px) !important;
    min-width: 100% !important;
    width: 100% !important;
    background-color: #5f2596 !important;
}
*/
/*.card-container {
    color: #ffffffff !important;
    display: flex;
    justify-content: center;*/ /* Centrar horizontalmente */
    /*align-items: center;*/ /* Alinear verticalmente */
    /*gap: 20px;*/ /* Espacio entre los cards */
    /*padding: 20px;
}*/


.title_card{
    font-size : 2.5rem !important;
}

.summary_card {
    font-size: 1.3rem !important;
}

.text-white {
    color: #ffffff !important;
}

.black-text {
    color: #000000 !important;
}

.purple-text {
    color: #62239d !important;
}

.text-dark-purple {
    color: #581c9e !important;
    font-weight: bolder !important;
}

.text-dark-purple_2 {
    color: #6d30a9 !important;
}

.text-dark-gray {
    color: #756e6f !important;
}

.text-dark-gray_2 {
    color: #7b8187 !important;
}

.text-dark-gray_3 {
    color: #616a79 !important;
}

.highlight {
    border-radius: 5px !important;
    background-color: #ffd323 !important;
}

/* CARDS */

.container_section {
    min-height: 100vh !important;
    min-width: 100% !important;
/*    background-color: #5f2596 !important;*/
    display: flex;
    justify-content: center;
    align-items: center;
}

.cards-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

.cards__container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80vh; /* Ocupa el 80% de la altura de la pantalla */
    width: 65vw; /* Ocupa el 75% del ancho de la pantalla */
}

.box {
    width            : 75%; /* Cada tarjeta ocupa el 75% del ancho del contenedor */
    min-height           : 80%; /* Cada tarjeta ocupa el 80% del alto del contenedor */
    border-radius    : 25px !important;
    background-color : white;
    position         : relative;
    margin           : 10px;
    padding-left     : 75px !important;
    padding-top      : 70px !important;
    padding-right    : 20px !important;
}

.box:nth-child(1) {
    background-color: #7442a4 !important;
    border: 1px solid #926cb8;
    left: 44%;
}

.box:nth-child(2) {
    background-color: white;
    left: -50%;
}

.borders {
    padding: 0px !important;
    margin: 0px !important;
}

.phone_logo {
    width: 50%;
    height: 50vh;
}

.custom_phone_logo {
    width  : 700px !important;
    height : 800px !important;
    clip-path : inset(5px);
}

.bg_white{
    background-color : #ffffff !important;
}

.container_section_list {
    padding-top: 100px !important;
    min-height: 100vh !important;
    min-width: 100% !important;
    display     : flex;
    align-items : center;
}

.margin_auto{
    margin  : 0 !important;
}

.subrayado {
    text-decoration: underline; /* Aplica el subrayado */
    text-decoration-color: #FF5733; /* Cambia el color del subrayado */
    text-decoration-style: solid; /* Puedes usar solid, dashed, dotted, etc. */
}

.border_buttom{
    display : block !important;
    border-bottom : 1px solid red !important;
}


.contenedor_border {
    display: inline-block !important;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding-bottom: 10px; /* Espacio para el subrayado */
}

.contenedor_border::after {
    content: ""; /* Necesario para mostrar el pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento en la parte inferior */
    left: 0;
    bottom: 0; /* Coloca el pseudo-elemento en la parte inferior del contenedor */
    width: 100%; /* El subrayado cubre todo el ancho del contenedor */
    height: 2px; /* Grosor del subrayado */
    background-color: #926cb8; /* Color del subrayado */
}

.contenedor_border_icon{
    display: inline-block !important;
    position: relative; /* Necesario para posicionar el pseudo-elemento */
    padding-bottom: 10px; /* Espacio para el subrayado */
}

.contenedor_border_icon::after {
    content: ""; /* Necesario para mostrar el pseudo-elemento */
    position: absolute; /* Posiciona el pseudo-elemento en la parte inferior */
    left: 0;
    bottom: 0; /* Coloca el pseudo-elemento en la parte inferior del contenedor */
    width: 100%; /* El subrayado cubre todo el ancho del contenedor */
    height: 2px; /* Grosor del subrayado */
    background-color: #000000; /* Color del subrayado */
}


.iconoVwayHF {
    width: 100px;
}

.iconoVwayFooter {
    width: 150px;
}


.size_icono_banderas {
    width: 200px;
}

.pos_relative{
    position : relative !important;
}

.pos_absolute {
    display : inline-block !important;
    position: absolute !important;
    right: 0 !important;
    left: 80% !important;
    top : -60% !important;
}



.iconVwayHeigth {
    width: 50px;
}

.number_list {
    display: block !important;
    text-align: center !important;
    background-color: #ffcd00 !important;
    width: 25px !important;
    height: 25px !important;
    color: #6f356f !important;
    font-size: 1.2rem !important;
    font-weight : bolder !important;
}

.bg_purple_vway_color {
    margin : 0px !important;
    margin-top : -4px !important;
    padding : !important;
    background-color : #5f2596 !important;
    background       : url("../../img/vway/logos/vway_franja_2.svg") !important;
    background-size : cover !important;
    background-repeat : no-repeat !important;
}


.curve_vway {
    background: url("../../img/vway/logos/vway_franja_1.svg") !important;
    background-size : cover !important;
    background-position : center !important;
    min-height: 90vh;
    width: 100%;
}

.curve_vway_2 {
    background: url("../../img/vway/logos/vway_franja_2.svg") !important;
    background-size: cover !important;
    background-position: center !important;
    height: 90vh;
    width: 100%;
}

.last_container {
    background-color: white;
    padding: 20px;
    clip-path: polygon(0 100%, 100% 100%, 100% 0, 10% 0); /* Triángulo curvado de abajo hacia arriba en el lado izquierdo */
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    width: 100% !important;
    min-height: 85vh !important;
}

.font_size_last_section {
    font-family: 'effra-bold';
    font-size: 6rem !important;
    font-weight: bolder !important;
}

.font_size_summary_last{
    color : #000000 !important;
    font-size : 2.5rem !important;
}

/* Media query para pantallas de hasta 1200px */
@media (max-width: 1300px) {
    .cards__container {
        width: 95vw; /* Ocupa el 95% del ancho para pantallas más pequeñas */
    }

    .icon_banderas{
        display : none !important;
    }

    .curve_vway_2, .curve_vway, .bg_purple_vway_color {
        background: none !important;
    }

    .bg_purple_vway_color, .container_section {
        background: none !important;
        background-color: #ffffff !important;
    }

    .custom_phone_logo {
        width  : 375px !important;
        height : 400px !important;
    }

    .title_icon_responsive{
        font-size : 1.2rem !important;
    }

    .summary_card {
        font-size: 1rem !important;
    }

    .iconVwayHeigth {
        width: 35px;
    }

    .iconoVwayHF {
        width: 75px;
    }

    .font_size_last_section {
        font-size: 4rem !important;
    }

    .font_size_summary_last {
        font-size: 2rem !important;
    }


    .curve_vway_2, .curve_vway {
        height: 100vh !important;
    }

    .curve_vway_2 {
       padding-top : 100px !important;
    }

    .row_margins{
        margin-top : 0px !important;
        padding-top : 0px !important;
    }

    .iconoVwayFooter {
        width: 100px;
    }


/*    .padding-top-last {
        margin-top: 120px !important;
    }*/

}

/* Media query para pantallas de 992px o menores */
@media (max-width: 992px) {
    .cards__container {
        flex-direction: column; /* Cambia la dirección de las tarjetas a columna */
        width: 100vw; /* Ocupa todo el ancho de la pantalla */
        height: auto; /* Ajusta la altura automáticamente */
    }

    .box {
        position: static; /* Elimina position: relative */
        width: 90%; /* Ajusta las tarjetas para que ocupen el 90% del ancho */
        height: auto; /* Ajusta la altura automáticamente */
        left: 0; /* Resetea el valor left */
        margin: 10px 0; /* Añade un margen entre las tarjetas */
    }

    .last_container {
        clip-path: none;
    }

    .curve_vway_2, .curve_vway, .bg_purple_vway_color {
        background: none !important;
    }


    .bg_purple_vway_color, .container_section {
        background: none !important;
        background-color: #ffffff !important;
    }

    .zero_margin_start{
        margin-left  : 10px !important;
        padding-left : 10px !important;
    }

    .curve_vway {
        padding: 0px !important;
    }

    .container_first_img{
        height : auto !important;
    }

}

/* Media query para pantallas de 992px o menores */
@media (max-width: 768px) {

    .font_size_summary_last {
        font-size: 1.5rem !important;
    }

    .contenedor_border::after, .contenedor_border_icon::after {
        content: none;
    }

    .number_list{
        display : none !important;
    }


}

@media (max-width: 576px) {

    .contenedor_border_icon {
        display: flex !important;
        justify-content: center !important;
    }

    .title_icon_responsive{
        text-align : center !important;
    }

    .curve_vway_2, .curve_vway, .bg_purple_vway_color {
        background: none !important;
    }

    .container_first_img{
        height : auto !important;
    }

}

.img_first_section {
    width: 100% !important;
}

.img_top {
    border-bottom-left-radius:  35px !important;
    border-bottom-right-radius: 35px !important;
}

.bg_menu_vway {
    background-color: var(--bg_purple_vway_primary) !important;
}

.header{
    box-shadow : none !important;
}


.option_menu_vway {
    color       : #ffffff !important;
    font-size   : 1.7rem !important; 
    /*font-weight : bolder !important;*/
}

a.active {
    color: #fed60a !important;
    border-bottom: 2px solid #fed60a; /* Resaltar la opción activa */
}

.seccion {
    height: calc(100vh - 80px);
}

.underline_last_pharagh {
    border-bottom: 2px solid #fcce11; /* Resaltar la opción activa */
}

.font_terms{
    font-size : 1.3rem !important;
}

.full_zero{
    margin : 0px !important;
    padding : 0px !important;
    box-sizing : border-box !important;
}