@font-face {
  font-family: "Edenred";
  src: url("../css/fonts/edenred_light.otf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Edenred";
  src: url("../css/fonts/edenred.otf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Edenred";
  src: url("../css/fonts/edenred_medium.otf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Edenred";
  src: url("../css/fonts/edenred_bold.otf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
    font-family: "Edenred";
    src: url("../css/fonts/edenred_black.otf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../css/fonts/Ubuntu-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../css/fonts/Ubuntu-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../css/fonts/Ubuntu-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Ubuntu";
  src: url("../css/fonts/Ubuntu-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html{
    scroll-behavior: smooth;
}

body {
  margin: 0;
}

nav{
    background: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0;
    max-width: 1150px;
    margin: 0 auto;
    ul{
        list-style: none;
        padding-left: 0;
        display: flex;
        gap: 28px;
    }
    li{
        a{
            font-size: 16px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            color: #020F25;
            font-family: "Ubuntu";
            text-decoration: none;
        }
    }
}

.main{
    background-image: url(../img/main-svg.jpg);
    min-height: 737px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

.main-form{
    max-width: 402px;
    float: right;
    display: flex;
    flex-direction: column;
    position: relative;
    top: 10px;
    right: 200px;
}

.badge-form{
    padding: 8px;
    border-radius: 8px 8px 0 0;
    background: #1B1C1D;
    font-family: "Ubuntu";
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: white;
    width: fit-content;
}

.lead-form{
    background: white;
    display: flex;
    flex-direction: column;
    padding: 32px;
    align-items: center;
    border-radius: 0 12px 12px 12px;
    p{
        margin: 0;
        font-family: "Edenred";
        font-size: 21px;
        font-style: normal;
        font-weight: 600;
        line-height: 28px;
        color: #020F25;
        text-align: center;
        margin-bottom: 2rem;
        span{
            font-size: 20px;
            font-weight: 300;
        }
    }
}

.checkbox{
    font-family: "Ubuntu";
    font-size: 11px;
    font-style: normal;
    font-weight: 400;
    line-height: 15px; /* 136.364% */
    letter-spacing: 0.45px;
    color: #020F25;
    display: flex;
    align-items: start;
    margin-top: 11px;
    gap: 0.5rem;
    margin-bottom: 2rem;
    input{
        margin: 0;
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
        border: 1px solid #CAD5E0;
    }
}

.field{
    margin-bottom: 0.5rem;
    width: 100%;
    input{
        background: white;
        border-radius: 8px;
        padding: 16px 18px;
        width: -webkit-fill-available;
        border: 1.841px solid #CAD5E0;
        color: #020F25;
        font-family: "Ubuntu";
        font-size: 14px;
        font-style: normal;
        font-weight: 400;
        &::placeholder{
            color: #99A3AC;
            font-family: "Ubuntu";
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            letter-spacing: 0.552px;
        }
    }
}

.field-duo{
    display: flex;
    gap: 1rem;
    input{
        flex: 1;
        min-width: 0;
    }
}

.form-btn-ctn{
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 100%;
    button{
        width: 100%;
        padding: 18px 0;
        border-radius: 12px;
        border: 1px solid #000;
    }
}

.btn-download{
    background: white;
    font-family: "Ubuntu";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    color: #020F25;
}

.btn-call{
    background: #000;
    color: white;
    font-family: "Ubuntu";
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
}

.main-content{
    max-width: 592px;
    bottom: 87px;
    left: 145px;
    position: absolute;
    h1{
        margin: 0;
        color: white;
        font-family: "Edenred";
        font-size: 50px;
        font-style: normal;
        font-weight: 700;
        line-height: 108%;
        span{
            font-weight: 300;
            font-size: 48px;
        }
    }
}

.main-badges-ctn{
    display: flex;
    gap: 8px;
    margin-bottom: 7px;
    div{
        padding: 5.5px;
        border-radius: 8px;
        font-family: "Ubuntu";
        font-size: 16px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: #020F25;
    }
}

.main-bullets{
    margin-top: 45px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    div{
        display: flex;
        align-items: center;
        gap: 10px;
        font-family: "Ubuntu";
        font-size: 23px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        color: white;
    }
}

.banner-cta{
    padding: 64px 0;
    font-size: 34px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 0.525px;
    font-family: "Edenred";
    text-align: center;
    max-width: 867px;
    margin: 0 auto;
    color: #020F25;
}

.guia-bullets-sec{
    background: #F1F7FF;
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 48px;
    h2{
        margin: 0;
        font-size: 32px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%; /* 39.68px */
        letter-spacing: 0.525px;
        color: #000;
        font-family: "Edenred";
    }
    a{
        padding: 19px 0;
        background: black;
        color: white;
        text-decoration: none;
        border-radius: 12px;
        min-width: 342px;
        text-align: center;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Ubuntu";
    }
}

.guia-bullets{
    display: flex;
    gap: 2rem;
}

.img-guia-desk{
    max-width: 365px;
}

.guia-bullets-ctn{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: space-between;
    div{
        padding: 18px 24px 24px 24px;
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        background: white;
        align-items: center;
        max-width: 244px;
        border-radius: 8px;
        img{
            max-width: 38px;
            padding: 7.5px;
        }
        p{
            font-size: 17px;
            font-style: normal;
            font-weight: 500;
            line-height: normal;
            font-family: "Ubuntu";
            color: #28282A;
            max-width: 75%;
            margin: 0 auto;
            text-align: center;
        }
    }
}

.belt-logos-sec{
    padding: 64px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 48px;
    h3{
        font-size: 21px;
        font-style: normal;
        font-weight: 600;
        line-height: normal;
        letter-spacing: 0.525px;
        color: #020F25;
        max-width: 425px;
        text-align: center;
        font-family: "Edenred";
        margin: 0 auto;
    }
}

.belt-logos-ctn{
    max-width: 1036px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.solutions-sec{
    padding: 64px 0;
    background: #F1F7FF;
    h2{
        font-size: 34px;
        font-style: normal;
        font-weight: 700;
        line-height: 124%; /* 42.16px */
        letter-spacing: 0.525px;
        color: #020F25;
        max-width: 952px;
        margin: 0 auto;
        margin-bottom: 64px;
        font-family: "Edenred";
    }
}

.solutions-tab-ctn{
    max-width: 952px;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
}

.tabs-content{
    max-width: 643px;
}

.tabs-ctn{
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.tab{
    padding: 10px;
    border: 2px solid #020F25;
    border-radius: 100px;
    font-size: 17px;
    font-style: normal;
    font-weight: 400;
    line-height: 156%;
    color: #020F25;
    font-family: "Ubuntu";
    cursor: pointer;
    text-align: center;
    min-width: 175px;
}

.tab.active{
    background: #F82027;
    color: white;
    border-color: #F82027;
    font-weight: 500;
}

.tab-content{
    display: flex;
    flex-direction: column;
    gap: 18px;
    p{
        margin: 0;
        font-size: 24px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        font-family: "Ubuntu";
        color: #020F25;
    }
    span{
        font-family: "Ubuntu";
        font-size: 17px;
        font-style: normal;
        font-weight: 400;
        line-height: 156%;
        color: #020F25;
    }
    .ventajas-ctn{
        margin-top: 0.5rem;
        display: flex;
        flex-direction: column;
        gap: 12px;
        font-size: 17px;
        font-style: normal;
        font-weight: 700;
        line-height: 156%;
        font-family: "Ubuntu";
        color: #020F25;
        div{
            display: flex;
            gap: 12px;
            font-size: 17px;
            font-style: normal;
            font-weight: 400;
            line-height: 156%;
            color: #020F25;
            margin-bottom: 6px;
        }
        .img-tab{
            margin: 18px 0;
        }
        a{
            margin-top: 23px;
            padding: 19px 0;
            background: black;
            color: white;
            text-decoration: none;
            border-radius: 12px;
            max-width: 342px;
            text-align: center;
            font-size: 18px;
            font-style: normal;
            font-weight: 700;
            line-height: normal;
            font-family: "Ubuntu";
        }
    }
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: flex;
}

.benefits-sec{
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    h2{
        font-family: "Edenred";
        font-size: 34px;
        font-style: normal;
        font-weight: 700;
        line-height: normal;
        color: #000;
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }
}

.benefits-ctn-desk{
    width: 100%;
    display: flex;
    gap: 12px;
}

.benefits-ctn-desk > div {
    flex: 1;
    min-height: 345px;
    position: relative;           /* ← important for positioning overlay & text */
    overflow: hidden;             /* keeps everything inside on hover effects */
    border-radius: 8px;           /* optional – looks nicer */
    cursor: pointer;              /* optional – indicates it's interactive */
}

.benefits-ctn-desk img {
    width: 100%;
    height: 100%;
    object-fit: cover;            /* ← makes image fill nicely without distortion */
    display: block;
    transition: transform 0.3s ease;   /* optional: slight zoom on hover */
}

/* Overlay + Text container */
.benefits-ctn-desk > div::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.60);
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;         /* lets clicks pass through when not hovered */
}

/* The actual text – we use a pseudo-element or a real <span> inside */
.benefits-ctn-desk > div .overlay-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: end;
    justify-content: center;
    color: white;
    font-family: "Ubuntu";
    font-size: 21px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 2;                   /* above the overlay */
    pointer-events: none;
    text-align: center;
    padding-bottom: 75px;
}

footer{
    background: #020F25;
    padding: 43px 64px;
    ul{
        display: flex;
        list-style: none;
        gap: 0.5rem;
        margin: 0;
        padding: 0;
        li{
            a{
                font-family: Ubuntu;
                font-size: 16px;
                font-style: normal;
                font-weight: 400;
                line-height: 102%; /* 16.32px */
                letter-spacing: 0.39px;
                text-decoration: none;
                color:white;
            }
        }
    }
}

@media (hover: hover) and (pointer: fine){
    .benefits-ctn-desk > div:hover::after {
        opacity: 1;
    }

    .benefits-ctn-desk > div:hover .overlay-text {
        opacity: 1;
    }
}

.text-mobile {
    display: none;
}

.banner-mob{
    display: none;
}

/* Very small phones — very narrow viewport */
@media (max-width: 480px) {

  nav ul {
    display:none;
  }

  .guia-bullets {
    flex-direction: column-reverse;
    align-items: center;
    gap: 32px;
    width: -webkit-fill-available;
  }

  .img-guia-desk {
    max-width: -webkit-fill-available !important;
    order: -1;
  }

  .guia-bullets-ctn {
    width: 100%;
    flex-direction: row;
  }


}

/* Phones + small tablets (up to ~ tablet portrait) */
@media (max-width: 768px) {
    .main-thanks{
        min-height: auto;
    }

    nav {
        padding: 7px 0;
        padding-left: 1.5rem;
        img{
            max-height: 41px;
        }
    }

    h1{
        font-size: 35px !important;
    }

    h2{
        font-size: 28px !important;
    }

    .main-content h1 span{
        font-size: 35px !important;
    }

    .main-bullets{
        margin-top: 1.5rem;
    }

  .guia-bullets-sec{
    padding: 3rem 1rem;
    gap: 2rem;
    h2{
        text-align: center;
    }
    div{
        p{
            max-width: 100%;
        }
    }
  }

  .belt-logos-ctn {
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
  }

  .belt-logos-sec{
    gap: 1.5rem;
    padding: 64px 1rem;
  }

  .guia-bullets-ctn{
    gap: 1rem;
  }

  .img-guia-desk{
    padding: 1rem;
  }

  .solutions-sec{
    padding: 3rem 1rem;
    h2{
        margin-bottom: 2rem;
        font-size: 28px;
    }
  }

  .tabs-ctn{
    flex-direction: row;
    gap: 10px;
    overflow: auto;
    overflow-y: scroll;
  }

  .ventajas-ctn a{
    margin-top: 0 !important;
    max-width: none !important;
  }

  .solutions-tab-ctn{
    flex-direction: column;
    gap: 28px;
  }

  .guia-bullets-sec a{
    width: 100%;
  }

  .benefits-sec{
    padding: 3rem 1rem;
    gap: 28px;
  }

  .benefits-ctn-desk{
    flex-wrap: wrap;
    gap: 1rem;
  }

  .benefits-ctn-desk > div {
        flex: 0 0 calc(50% - 8px);   /* 2 per row: 50% minus half the gap */
        /* flex-grow: 0 + flex-shrink: 0 + flex-basis: ... */
        min-height: 265px;
    }

    .benefits-ctn-desk > div .overlay-text{
        display: none;
    }

    .benefit1{
        display: none !important;
    }

    .text-mobile{
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
        background: #FD086B;
        font-family: "Ubuntu";
        font-size: 18px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        color: white;
        min-height: 45px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .banner-cta{
        padding: 52px 1rem;
        font-size: 24px;
    }

    .main{
        display: flex;
        flex-direction: column-reverse;
        padding: 1rem;
        background-image: none;
        background: linear-gradient(138deg, #F62619 -27.18%, #FF017D 73.95%);
        border-radius: 0 33px 0 0;
        padding-bottom: 2rem;
    }

    .main-form{
        float: none;
        top: unset;
        right: unset;
        width: -webkit-fill-available;
        margin-top: 55px;
    }

    .main-content{
        position: relative;
        bottom: unset;
        left: unset;
    }

    .banner-mob{
        display: block;
        min-height: 250px;
        
        background-image: url(../img/main-mob.jpg);
        margin-bottom: -66px;
    }

    .last-badge{
        display: none;
    }

    .main-badges-ctn div{
        font-size: 12.475px;
    }

    .lead-form p{
        font-size: 34px;
        line-height: 38px;
        span{
            font-size: 34px;
        }
    }

    footer{
        padding: 1.5rem 0;
        ul{
            justify-content: center;
            li{
                a{
                    font-size: 12px;
                }
            }
        }
    }
}