@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

    * {
        padding: 0;
        margin: 0;
        font-family: "Lato", sans-serif;
    }

    body {
        overflow-x: hidden;  /* Oculta o overflow horizontal */
        overflow-y: auto !important;    /* Permite rolagem vertical */
    }
    figure {
        padding: 0;
        margin: 0;
    }

    p {
        margin: 0;
    }

    .container {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 50px 0;
        position: relative;
    }

    #main-banner {
        position: relative;
    }

    #main-banner .box-logo {
        position: absolute;
        left: 10%;
        width: 100%;
        max-width: 500px
    }

    #main-banner .box-logo img {
        max-width: 250px;
        height: auto;
    }

    .banner-main {
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    .banner-upgrade {
        height: auto !important
    }

    #main-banner h1 {
        font-weight: bold;
        font-size: 126px;
        margin-bottom: 20px;
    }

    #main-banner p {
        font-size: 23px;
    }

    #main-banner .main-banner-text {
        position: absolute;
        color: #fff;
        left: 10%;
        top:13%;
        width: 50%
    }
    #main-banner .main-banner-updagrade-text {
        top: 26% !important
    }

    .main-banner-links {
        display: flex;
        margin-top: 30px;
        flex-wrap: wrap;
        gap: 20px;
    }

    .main-banner-links a {
        text-decoration: none;
        color: #000;
        background: #FFB82C;
        border-radius: 30px;
        padding: 10px 30px;
        text-align: center;
        width: 128px;
        font-weight: bold;
    }

    .main-banner-links a:hover {
        background: #e4a323;
    }

    .banner-mobile {
        display: none;
    }

    #visao-section .box-cards-visao-geral {
        display: flex;
        flex-direction: column;
        gap: 30px
    }

    #visao-section .visao-geral-iphone {
        max-width: 217px;
        margin-left: 43px
    }

    #visao-section .box-visao {
        display: flex;
        justify-content: space-between;
        gap: 140px;
    }

    .main-title {
        font-size: 3.9rem;
        color: #cc2328;
        text-align: center;
        font-weight: 700 !important;
        line-height: 0.8
    }

    #visao-section .main-title {
        margin-bottom: -16px;
    }

    .visao-card .box-visao-text {
        border: 1px solid #cc2328;
        border-radius: 25px;
        padding: 49px 34px;
        color: #000;
        opacity: 1;
        transition: opacity 0.5s ease;
    }


    .visao-card img {
        height: auto;
    }

    #visao-section .card-image-wrapper {
        position: relative;
        display: flex;
        margin-left: 25px;
        cursor: pointer;
    }

    .card-image-wrapper {
        cursor: pointer;
    }

  

    #visao-section .card-title {
        margin: 0 auto;
        color: #242222;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 10px 15px;
        border-radius: 5px;
        margin-left: 30px
    }

    /* Estilos base já existentes */
    .container {
        width: 100%;
        max-width: 1300px;
        margin: 0 auto;
        padding: 50px 0;
    }

    #visao-section .box-cards-visao-geral {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    #visao-section .visao-geral-iphone {
        max-width: 217px;
        margin-left: 43px;
        height: auto;
    }

    #visao-section .box-visao {
        display: flex;
        justify-content: space-between;
        gap: 140px;
    }

    .main-title {
        font-size: 3.9rem;
        color: #cc2328;
        text-align: center;
        font-weight: 700 !important;
        line-height: 0.8;
    }

    #visao-section .main-title {
        margin-bottom: -16px;
    }

    .visao-card .box-visao-text {
        border: 1px solid #cc2328;
        border-radius: 25px;
        padding: 30px;
        color: #000;
    }

    #visao-section .card-image-wrapper {
        position: relative;
        display: flex;
        margin-left: 25px;
    }

    #visao-section .card-title {
        margin: 0 auto;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 10px 15px;
        border-radius: 5px;
        margin-left: 20px;
    }

    #visao-section .card-title.title-1 {
        background: url(../images/forma-1.svg) no-repeat;
        width: 34%;
        background-size: 320px;
        height: 25px;      
        
    } 
    
    #visao-section .card-title.title-2 {
        background: url(../images/forma-2.svg) no-repeat;
        width: 34%;
        background-size: 320px;
        height: 25px;      
        
    }    
    
    #visao-section .card-title.title-3 {
        background: url(../images/forma-3.svg) no-repeat;
        width: 34%;
        background-size: 320px;
        height: 25px;      
        
    }    

    /* Responsivo para tablets (768px a 1024px) */
    @media (max-width: 1024px) {
        .container {
            padding: 40px 20px;
        }

        #visao-section .box-visao {
            flex-direction: column;
            gap: 40px;
        }

        #visao-section figure {
            display: flex;
            justify-content: center;
            flex-direction: row-reverse;
            gap: 34px;
            align-items: center;
        }

        #visao-section .visao-geral-iphone {
            margin-left: 0;
            margin-bottom: 20px;
            max-width: 180px;
        }

        #visao-section .card-image-wrapper {}

        #visao-section .card-title {
            font-size: 16px;
            margin-left: 0;
        }

        .main-title {
            
        }
    }

    /* Responsivo para mobile (até 767px) */
    @media (max-width: 767px) {
        .container {
            padding: 30px 15px;
        }

        #visao-section .box-visao {
            flex-direction: column;
            gap: 30px;
        }

        #visao-section .visao-geral-iphone {
            margin-left: 0;
            margin-bottom: 15px;
            max-width: 103px;
        }

        #visao-section .card-image-wrapper img {
            width: 89%;
            padding: 0;
            height: auto;
        }

        #visao-section .card-title {
            font-size: 14px;
            margin-left: 0;
            padding: 8px 10px;
        }

        .main-title {
            font-size: 2.2rem;
        }

        .visao-card .box-visao-text {
            padding: 20px;
        }
    }

    /* JORNADA DO VENDEDOR */
    .jornada-vendedor {
        border-top: 3px solid #cc2328;
        border-bottom: 3px solid #cc2328;
        height: 250px;
        position: relative;
        margin-top: 80px;
    }

    .jornada-vendedor .container {
        padding: 0;
        height: 100%;
    }

    .jornada-vendedor .container figure {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 100%;

    }

    .jornada-vendedor .container figure img {
        width: 50%;
        height: auto;
    }

    .badge-step-right {
        background: #cc2328;
        color: #fff;
        border-radius: 26px 0 0 26px;
        width: 60%;

        max-width: 100%;
        display: inline;
        position: absolute;
        right: 0;
        text-align: right;
        font-weight: bold;
        font-size: 2.5rem;
        display: flex;
        justify-content: center;
        padding: 0 110px;
    }

    .badge-step-left {
        background: #cc2328;
        color: #fff;
        border-radius: 0 26px 26px 0;
        width: 60%;

        max-width: 100%;
        display: inline;
        position: absolute;
        left: 0;
        text-align: right;
        font-weight: bold;
        font-size: 2.5rem;
        display: flex;
        justify-content: end;
        padding: 0 110px;
    }

    .badge-step-left.badge-2,
    .badge-step-4 {
width: 204% !important;
    left: -846px !important;
    }

    
    .badge-1 {
        right: -129px !important      
    }

    .badge-step-right.badge-1 {
       width: 46% !important;      
    }

	.badge-step-right.badge-step-3 {
			right: -245px !important;
	}

    .badge-step-right.badge-step-3 {
        width: 78% !important;      
    }  
    
    
    .badge-1 {
        width: 40%;
    }


    /* Responsivo para tablets (768px a 1024px) */
    @media (max-width: 1024px) {
        .jornada-vendedor {
            height: 475px;
            margin-top: 60px;
        }

        .jornada-vendedor .container figure {
            flex-direction: column-reverse;
            justify-content: center;
            gap: 0;
            height: auto;
        }

        .jornada-vendedor .container figure figcaption {
            margin-top: 30px;
        }

        .jornada-vendedor .container figure img {
            width: 70%;
        }
    }

    /* Responsivo para mobile (até 767px) */
    @media (max-width: 767px) {
        .jornada-vendedor {
            height: 364px;
            margin-top: 40px;
            padding: 20px 0;
        }

        .jornada-vendedor .container figure {
            flex-direction: column-reverse;
            justify-content: center;
            height: auto;
        }

        .jornada-vendedor .container figure img {
            width: 90%;
        }
    }


    /* ETAPAS*/

    .elementor-element {
        margin: 0;
        padding: 0
    }

    #cards-step .container {
        background: url(https://celulardaclaro.com.br/wp-content/uploads/2025/09/border-traced.svg) no-repeat;
        background-size: contain;

        margin-top: 244px;
        padding-bottom: 0 !important;
    }

    .warning-inicial {
        position: relative;
        top: -160px;
        left: 16px;
        quotes: d;
        width: 31%; 
    }

    #cards-step .card-step-1-two img,
    #cards-step .card-step-1-three img,
    #cards-step .card-step-2-three img,
    #cards-step .card-step-2-two img {
        filter: invert(1);
    }

    #cards-step .card-step-1-two,
    #cards-step .card-step-1-three,
    #cards-step .card-step-2-three,
    #cards-step .card-step-2-two,
    #cards-step .card-step-2 {
        opacity: 1;
    }
 

    #cards-red-step-1 {
        padding-top: 99px
    }

    #cards-red-step-1 .container {
        display: flex;
    }

    .card-step {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 366px;
        position: relative;
        cursor: pointer;
    }

    .card-step figure {
        border-radius: 26px 26px 0 0;
        background: linear-gradient(to top, #990d12, #cc2328);
        width: 100%;
        max-width: 244px;
        height: 190px;

        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }

    .card-step figure:hover {
        background: linear-gradient(to top, #5c0d10, #cc2328);    
    }

    .card-step figure img {
        width: 150px;
        max-width: 85px
    }

    .card-step figcaption {
        font-weight: bold;
        text-align: center;
        font-size: 17px;
    }

    .card-step-text {
        background: #fff;
        color: #000;
        border-radius: 12px;
        width: 286px;
        height: 88px;
        text-align: center;
        padding: 10px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
		display: flex;
		align-items: center
    }

    .border-traced {
        position: absolute;
        width: 55%;
        top: 244px;
        right: 462px;
        z-index: -1;

    }

    .card-step-1 {
        top: -151px;
        left: -52px;
    }

    .card-step-1-two {
        right: -407px;
        top: 63px;
        top: -417px;

    }

    .card-step-1-three {
        right: -874px;
        top: -641px;
    }


    #cards-step .badge-step-left {
        margin-top: -565px
    }


    .card-step-2 {
        bottom: 216px;
        left: 48px;
    }

    .card-step-2-three {
        right: -931px;

        bottom: 1109px;
    }

    .card-step-2-two {
        top: -614px;
        right: -519px;
    }

    .badge-step-3 {
        margin-top: -739px
    }

    .man-step {
        width: 418px;
        height: auto;
        margin-top: -715px;
        position: relative;
        left: 54px;
    }



    .border-traced-2 {
        position: relative;
        top: -321px;
        left: -62px;
        z-index: -1;
        width: 37%;
    }

    .box-step-4 {
        display: flex;
        align-items: start;
        position: relative;
    }

    .card-step-start {
        position: absolute;
        top: -779px;
        right: 19px;
        margin-top: 0 !important;
    }

    .start-here {
        width: 250px;
        height: auto;
        transform: rotate(-24deg);
        margin-left: -337px;
        position: relative;
        top: 80px;
        z-index: 2;
    }

    .card-start-box {
        border-radius: 53px;
        border: 2px solid #CC2328;

        width: 306px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        /* text-align: center; */
        height: 277px;
        background: #fff;
        position: relative;
        left: -212px;
        top: 6px;

    }

    .title-box {
        color: #CC2328;
        margin: 0;
        padding: 0;
        font-size: 25px;
        margin-bottom: 13px;
    }

    .card-start-box ul {
        margin: 0;
        margin-bottom: 26px;
        font-size: 19px;
    }

    .text-box {
        font-size: 19px;
        text-align: center;
    }

    .card-start-box .line {
        height: 2px;
        width: 100%;
        background: #cc2328;
        left: 0;
        margin-top: 5px;


    }

    .border-traced-3 {
        width: 14%;
        margin-top: -367px;
        /* margin-right: -331px; */
        position: relative;
        right: -125px;
        z-index: -2;
    }

    .badge-step-4 {
        margin-top: -201px !important;
        width: 34%;
        font-size: 2.0rem;
    }

    .man-4g {
        width: 100%;
        max-width: 616px;
        margin-top: -326px;
        position: relative;
        right: -678px;
    }

    .box-fixed {
        width: 34%;
        border-radius: 0 0px 41px 41px;
        border: 1px solid #cc2328;
        height: 136px;
        display: flex;
        flex-direction: column;
        align-content: cebter;
        justify-content: center;
        padding: 10px 20px;
    }

    .box-fixed p {
        text-align: left !important;
    }

    .box-fixed-one {
        margin-top: -164px;
        margin-left: 113px;
    }



    #section-rocktseat .container {
        padding: 0 !important;
    }

    .cards-number {
        display: flex;
        justify-content: center;
        /* align-items: center; */
    }

    .card-number span {
        width: 20% !important;
        color: #fff;
        border-radius: 10px;
        display: block;
        /* width: 50%; */
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 69px;
        font-weight: bold;
        transform: width 0.5s ease;
        cursor: pointer;
    }


     .card-number p {
        align-items: center;
        font-size: 17px;
        width: 80%;
        display: flex;
    }


    .card-number {
        display: flex;
        gap: 0;
        border-radius: 10px;
        width: 39%;
        height: 109px;
        gap: 33px;
        background: white;
    }
    .red_color {
        gap: 20px !important
    }

    .cards-number.red_color .card-number {
        border: 1px solid #CC2328;
    }
    .cards-number.red_color .card-number span:hover {
        background: #811418;
    }

    .cards-number.red_color .card-number span {
        background: #CC2328;
    }

    .cards-number.yellow_color .card-number {
        border: 1px solid #FFB82C;
        margin-top: 30px
    }

    .cards-number.yellow_color .card-number span {
        background: #FFB82C;
		width: 80%;
    }

    .cards-number.yellow_color .card-number span:hover {
        background: #eba61c;
        width: 100%
    }    

    .badge-step-5 {
        margin-top: 64px;
        width: 42%;
    }

    .box-fixed-two {
        margin-top: 110px;
        position: relative;
        right: -700px;
    }

    .rocktseat {
        width: 100%;
        max-width: 558px;
        position: absolute;
        /* top: 153px; */
        bottom: -233px;
        z-index: 1;
        left:-171px;
    }

    .badge-step-6 {
        margin-top: 93px;
        width: 46%
    }

    .arcoiris {
        width: 100%;
        max-width: 430px;
        position: relative;
        right: -687px;
        margin-top: -110px;
    }

    .card-number-box-1,
    .card-number-box-3 {
        right: 0;
        position: relative;
    }

    .card-number-box-3 {
        margin-top: -566px;
        left: 67px;
		    width: 83%;
    }

    .card-number-box-1 {
        margin-top: -101px;
        left: 128px;
    	width: 92%;		
		left: 72px;
    }

    .yellow_color {
        display: flex;
        flex-direction: column;
        position: relative;
        z-index: 99999999999999999999999999999999999999999999999999999;        
    }

    .note-cel {
        width: 100%;
        max-width: 491px;
        margin-top: -15px;
        position: relative;
        left: -96px;

    }

    .card-number-box-2,
    .card-number-box-4 {
        position: relative;
    }

    .card-number-box-4 {
        margin-top: -320px;
    }

    .card-number-box-4 .card-number,
    .card-number-box-2 .card-number {
        width: 90%
    }

    .card-number-box-2 {
        margin-top: -660px;
        left: -8px;
    }

    .card-number-box-2 .yellow_color,

    .card-number-box-4 .yellow_color {
        align-items: end;
        width: 38%;
        right: -607px;      
    }

    .iphone-traced {
        width: 100%;
        position: relative;
        right: -315px;
        margin-top: -637px;
        max-width: 982px;
        z-index: -1;
    }


    .last-card-seven {
        position: relative;
        left: -44px;
        top: 26px;
    }

    .iphone-mobile,
    .rock-mobile,
    .bau-mobile {
        display: none;
    }

    .last-card-eight {
        position: absolute;
        bottom: 0;
        bottom: -214px;
        left: -188px;
    }

    .text-main {
        color: #cc2328;
        font-size: 45px;
        display: flex;
        justify-content: start;
        padding: 20px 60px;
        margin-top: 50px;
    }

    .descount {
        position: absolute;
        /* left: 0; */
        right: 0;
        margin-top: -137px;
    }

    .badge-step-8 {
        width: 45%
    }


    .box-cards-final .card-image-wrapper {
		position: relative;
		bottom: -6px;
		width: 92%;
    }

    .box-cards-final img {

        width: 30%;
        margin-left: 30px;

    }

    .box-cards-final .card-title {
        margin: 0 auto;
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        text-align: center;
        padding: 10px 15px;
        border-radius: 5px;
        margin-left: 20px;
    }

   .box-cards-final .card-title.title-1 {
        background: url(../images/forma-1.svg) no-repeat;
        width: 34%;
        background-size: cover;
        height: 25px;      
        
    } 
    
    .box-cards-final .card-title.title-2 {
        background: url(../images/forma-2.svg) no-repeat;
        width: 45%;
        background-size: cover;
        height: 25px;      
        
    }    
    
    .box-cards-final .card-title.title-3 {
        background: url(../images/forma-3.svg) no-repeat;
        width: 34%;
        background-size: 320px;
        height: 25px;      
        
    }     

    .box-cards-final .box-visao-text {
          width: 34%;
    }

    .box-cards-visao-geral ul,
    .box-cards-final ul {
        display: flex;
        flex-direction: column;
        gap: 24px;

    }

    .card-one {
        margin-top: 60px;
    }

    .bau-traced {
        width: 100% !important;
        max-width: 717px !important;
        margin-top: -778px;
        margin-left: 132px !important;
    }

    .card-three {
        margin-top: -62px;
        position: relative;
        left: 219px;
        z-index: 0;
		width: 78%;

    }

    .card-two {
        position: relative;
        right: -603px;
        top: 67px;
        width: 48%;

    }

    .card-two img {
        width: 48% !important;
        margin-left: 30px;
    }


    .box-visao-text {
        background-color: #fff;
    }

    .card-two .box-visao-text {
        width: 60% !important
    }

    .badge-step-7 {
        margin-top: 56px;
    }


    .badge-step-8,
    .badge-step-7 {
        z-index: 3;
    }

    .calculadora {
        width: 100%;
        max-width: 340px;
        position: absolute;
        right: 359px;
        margin-top: -381px;
    }

    .card-one {
        position: relative;
		right: -145px;
    	width: 89%;
    }

    .cards-mobile {
        display: none;
    }

    footer {
        background: linear-gradient(to left, #770a0e, #cc2328);
    }

    footer .container {
        display: flex;
        justify-content: center;
        padding: 80px 0;

    }

    .go-to-home {
        position: fixed;
        right: 34px;
        bottom: 30px;
        background: none;
        border: none;
        cursor: pointer;     
        background: url(../images/arrow-top.svg) no-repeat;
        z-index: 48;
        background-size: cover;
        height: 50px;
        width: 50px;   
    }

    .go-to-home:hover {
       background: url(../images/arrow-top-hover.svg) no-repeat; 
        z-index: 48;
        background-size: cover;
        height: 50px;
        width: 50px;          
    }

    @media (min-width: 1318px) and (max-width: 1436px) {
        #main-banner h1 {
            font-size: 105px;
        }
    }

    @media (min-width: 1124px) and (max-width: 1317px) {
       
        #main-banner h1 {
            font-size: 90px;
        }

        .card-step {
            max-width: 219px;
        }

        .card-step figure {
            max-width: 219px;
            height: 150px;
        }
        .card-step-1 {
            top: -151px;
            left: 65px;
        }

        .card-step-text {
            height: 60px;
        }

        .card-step-1-two {
            right: -441px;

            top: -320px;
        }

        .card-step-1-three {
            right: -855px;
            top: -376px;

        }

        .badge-step-left,
        .badge-step-right {
            width: 40%;
            font-size: 1.9rem
        }

        #cards-step .badge-step-left {
            margin-top: -420px;
        }

        .card-step-2-three {
            right: -864px;
            bottom: 698px;
        }

        .card-step-2-two {
            top: -391px;
            right: -415px;

        }

        .card-step-2 {
            bottom: 67px;
            left: 69px;
        }

        .man-step {
            width: 418px;
            height: auto;
            margin-top: -514px;
            position: relative;
            left: 54px;
        }

        .badge-step-3 {
            margin-top: -560px;
            font-size: 1.7rem
        }

        .card-step-start {
            position: absolute;
            top: -573px;
            right: 36px;
        }

        .border-traced-2 {
            position: relative;
            top: -198px;
            left: -62px;
            z-index: -1;
            width: 37%;
        }

        .start-here {
            width: 204px;
            height: auto;
            transform: rotate(-24deg);
            margin-left: -337px;
            position: relative;
            top: 31px;
            z-index: 2;
            left: 175px;
        }

        .start-here {
            width: 204px;
            height: auto;
            transform: rotate(-24deg);
            margin-left: -337px;
            position: relative;
            top: 31px;
            z-index: 2;
            left: 175px;
        }

        .card-start-box {
            height: 277px;
            background: #fff;
            position: relative;
            left: -88px;
            top: -23px;

        }

        .border-traced-3 {
            width: 20%;
            margin-top: -226px;
            /* margin-right: -331px; */
            position: relative;
            right: -17px;
            z-index: -2;
        }

        .man-4g {
            max-width: 463px;
        }

        .badge-step-4 {
            margin-top: -226px !important;
        }

        .card-number-box-1,
        .card-number-box-3 {
            left: 0;
        }

        .box-fixed-one {
            margin-top: -195px;
        }

        .box-fixed-two {
            margin-top: 93px;
            z-index: -1;
        }

        .iphone-traced {
            right: -243px;
            margin-top: -637px;
            max-width: 950px;
        }

        .arcoiris {
            right: -620px;
        }

        .card-one {
            width: 69%
        }

        .card-one img {
            width: 41% !important
        }

        .card-two {
            width: 43%;

        }

        .card-two img {
            width: 48% !important;
            margin-left: 30px;
        }

        .card-three {
            width: 77% !important;
        }

        .calculadora {
            max-width: 282px;
            margin-top: -308px;
            right: 233px;
        }

        .box-cards-final {
            width: auto !important;
        }

        .card-number-box-2 {
            left: -61px !important;
        }

         .card-title {
            font-size: 13px !important
        }

        .card-title.title-3 {
            background-size: cover !important;
        }

        .box-cards-final .card-title.title-2 {
            width: 57% !important
        }

        #visao-section .card-title.title-2,
        #visao-section .card-title.title-1 {
            background-size: cover !important;
        }

    }

    @media (min-width: 1025px) and (max-width: 1123px) {
        
        #main-banner .box-logo img {
            max-width: 163px;
        }

        #main-banner h1 {
            font-size: 93px;
        }

        #main-banner p {
            font-size: 19px;
        }

        #main-banner .box-logo {
            width: 60%;
            top: 19px
        }

        .card-step {
            max-width: 219px;
        }

        .card-step figure {
            max-width: 219px;
            height: 150px;
        }

        .card-step-1 {
            top: -151px;
            left: 65px;
        }

        .card-step-text {
            height: 60px;
        }

        .card-step-1-two {
            right: -441px;

            top: -320px;
        }

        .card-step-1-three {
            right: -756px;
            top: -376px;

        }

        .badge-step-left,
        .badge-step-right {
            width: 40%;
            font-size: 1.9rem
        }

        #cards-step .badge-step-left {
            margin-top: -420px;
        }

        .card-step-2-three {
            right: -750px;
            bottom: 776px;
        }

        .card-step-2-two {
            top: -391px;
            right: -415px;

        }

        .card-step-2 {
            bottom: 67px;
            left: 69px;
        }

        .man-step {
            width: 418px;
            height: auto;
            margin-top: -514px;
            position: relative;
            left: 54px;
        }

        .badge-step-3 {
            margin-top: -560px;
            font-size: 1.7rem
        }

        .card-step-start {
            position: absolute;
            top: -573px;
            right: 36px;
        }

        .border-traced-2 {
            position: relative;
            top: -198px;
            left: -62px;
            z-index: -1;
            width: 37%;
        }

        .start-here {
            width: 204px;
            height: auto;
            transform: rotate(-24deg);
            margin-left: -337px;
            position: relative;
            top: 31px;
            z-index: 2;
            left: 175px;
        }

        .start-here {
            width: 204px;
            height: auto;
            transform: rotate(-24deg);
            margin-left: -337px;
            position: relative;
            top: 31px;
            z-index: 2;
            left: 175px;
        }

        .card-start-box {
            height: 277px;
            background: #fff;
            position: relative;
            left: -88px;
            top: -23px;

        }

        .border-traced-3 {
            width: 20%;
            margin-top: -226px;
            /* margin-right: -331px; */
            position: relative;
            right: -17px;
            z-index: -2;
        }

        .man-4g {
            width: 100%;
            max-width: 453px;
            margin-top: -251px;
            right: -567px;
        }

        .box-fixed-two {
            margin-top: 96px;
            position: relative;
            right: -561px;
            z-index: -2;
        }

        .arcoiris {
            right: -554px;
        }

        .iphone-traced {
            right: -106px;
        }

        .card-one {
            width: 69%
        }

        .card-one img {
            width: 44% !important
        }

        .card-two {
            width: 43%;

        }

        .yellow_color {
            width: 97%
        }

        .card-number-box-1 {
            width: 80%
        }

        .card-number-box-3 {
            width: 73%
        }

        .card-two img {
            width: 48% !important;
            margin-left: 30px;
        }

        .card-three {
            width: 77% !important;
        }

        .calculadora {
            max-width: 282px;
            margin-top: -308px;
            right: 233px;
        }

        .card-number span {
            font-size: 43px;
        }

        .card-two {
            right: -559px;
        }

        .bau-traced {
            margin-left: 60px !important;
        }

        .card-two h3 {
            top: 9px !important;
        }

        .box-cards-final .card-title {
            top: 12px;
        }
    }

    @media (max-width: 1024px) {
        .container {
            padding: 0;
        }
        .cards-mobile {
            display: block;
        }
        
        #main-banner .box-logo img {
            max-width: 163px;
        }

        #main-banner h1 {
            font-size: 59px;
        }

        #main-banner p {
            font-size: 22px;
        }

        #main-banner .box-logo {
            width: 60%;
            top: 19px
        }

        #cards-step .container {
            background: none;
            margin-top: 445px;
        }

        .border-traced-3,
        .border-traced-2 {
            display: none;
        }

        .badge-step-right,
        .badge-step-left {
            max-width: 40%;
        }

        #cards-step .container,
        #cards-red-step-1 .container,
        .box-step-4 {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 20px;
        }

        .card-step,
        .card-step-start,
        .man-step,
        .start-here,
        .card-start-box,
        .border-traced,
        .border-traced-2,
        .border-traced-3 {
            position: static;
           
            right: auto !important;
            left: auto !important;
            bottom: auto !important;
            margin: 0 auto 20px auto;
        }

        .card-step {
            max-width: 280px;
            width: 90%;
        }

        .card-step figure {
            max-width: 220px;
            width: 100%;
            height: 150px;
        }

        .card-step figure img {
            max-width: 70px;
        }

        .card-step figcaption {
            font-size: 15px;
        }

        .card-step-text {
            width: 90%;
            height: auto;
            font-size: 14px;
            padding: 10px;
        }

        .badge-step-left,
        .badge-step-right {
            font-size: 1.3rem;
            text-align: center;
        }


        .badge-step-left {
            margin-top: 0 !important;
        }

        .badge-step-right {
            margin-top: 22px !important;
        }

        .badge-step-3 {
            margin-top: -74px !important;
        }

        .badge-step-4 {

            margin-top: -40px !important;
            width: 100%;
            max-width: 577px;
        }

        .box-step-4 {
            flex-direction: column-reverse !important;
        }

        .start-here {
            position: relative !important;
            top: 104px !important;
            left: -37px !important;
        }

        .box-fixed-one {
            margin-top: -20px !important;
            margin-right: 100px !important;
        }

        .man-4g {
            right: 0;
            top: 222px;
        }

        .red_color {
            margin-top: 184px !important;
        }

        .badge-step-5 {
            margin-top: 40px !important;
        }

        .rocktseat {
            width: 100%;
            max-width: 327px;
            position: absolute;
            /* top: 153px; */
            bottom: -242px;
            z-index: 1;
            left: -27px;
        }

        .box-fixed-two {
            position: initial;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .badge-step-6 {
            margin-top: 29px !important;
        }

        .box-fixed-two {
            right: -470px
        }

        .arcoiris {
            max-width: 339px;
            right: -549px;
        }

        .card-number-box-1 {
            margin-top: -106px;
            left: 0;
        }

        .card-number-box-3 {
            left: 0;
        }
        .cards-desktop {
            display: none;
        }

        .cards-mobikle {
            display: block;
        }
        .iphone-traced {
            max-width: 919px;
            right: -114px;
            margin-top: -594px;
        }

        .note-cel {
            max-width: 448px;
            left: -13px;
        }


        .box-cards-visao-geral {
            justify-content: center;
            align-items: center;
        }

        .box-cards-visao-geral h3 {
            left: 33px !important;
            top: 6px !important;            
        }

        .box-cards-final .box-visao-text {
            width: 80%
        }

        .box-visao-text {
            width: 75%
        }

        .badge-1 {
            position: relative;
            right: -107px;
            top: -17px;
            margin-top: 0 !important
        }

        .box-cards-final {
            width: auto !important;
            margin-top: 126px !important;
        }

        .card-one,
        .card-two,
        .card-three {

            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .card-one .card-title {
            left: 8px
        }

        .card-one .card-image-wrapper img,
        .card-two .card-image-wrapper img,
        .card-three .card-image-wrapper img {
            width: 100% !important;
            margin-left: -4px !important;
        }

        .card-one,
        .card-two,
        .card-three,
        .calculadora,
        .bau-traced {
            position: initial;
            margin: 0;
            width: 100vw;
        }

        .bau-traced {
            max-width: 300px !important;
        }

        .text-main {
            margin-top: 0 !important;
        }

        .descount {
            max-width: 273px;
        }
        .card-number {
            margin-top: 20px !important;
        }

        .box-cards-final {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        .bau-desktop {
            display: none;
        }

        .bau-mobile {
            display: block;
        }

        .badge-step-right,
        .badge-step-left {
            display: flex;
            justify-content: center;
            align-items: end;
            align-content: end;
            align-self: end;
            margin: 0 auto;
            border-radius: 26px;
            position: initial;
        }
        .badge-step-3 {
            margin-top: 22px !important;
        }

        .visao-card {
            margin: 0 auto;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .calculadora {
            width: 70% !important;
            margin-bottom: 47px !important;
            margin-left: 0 !important;
        }
        .warning-inicial {
            position: initial;
            width: 99%;
            text-align: center;
            margin-top: 30px
        }  
        
        .card-step-2-three {
            position: initial !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: initial !important;
            top: 480px !important;            
        }
         .card-title {
            font-size: 13px !important
        }

        .card-title.title-3 {
            background-size: cover !important;
        }

        .box-cards-final .card-title.title-2 {
            width: 57% !important
        }

        #visao-section .card-title.title-2,
        #visao-section .card-title.title-1,
        #visao-section .card-title.title-3  {
            background-size: cover !important;
            width: 100%;
            height: 21px;
            padding: 0;
        }  


        .box-cards-final .card-title.title-3,
        .box-cards-final .card-title.title-1,
        .box-cards-final .card-title.title-2 {
            background-size: cover !important;
            width: 100%;
            height: 21px;
            padding: 0;
        }         
        
        .card-image-wrapper {
            max-width: 300px;
            width: 100%;
            height: 50px !important;
        }

        .card-image-wrapper h3{
            height: auto !important;
            display: flex ;
            justify-content: center;
            align-items: center;                
        }

         .box-cards-final .card-image-wrapper h3 {
            height: 100% !important;
            display: flex ;
            justify-content: center;
            align-items: center;                
        }        

        .box-cards-final .card-title.title-2 {
                    width: 115% !important;
        }

        .box-cards-final .box-visao-text {
            margin-top: 5px;
        }

        .card-step-start {
            margin-top: -90px !important;
        }       
    }

    /* ESTILOS PARA MOBILE */
    @media (max-width: 980px) {
        #cards-step .container {
            margin-top: 369px;
        }

        .badge-step-4 {
            max-width: 303px !important;
        }

        /* escondendo bordas decorativas no mobile */
        .border-traced,
        .border-traced-2,
        .border-traced-3 {
            display: none;
        }

        .card-number-box-1 {
            position: initial;
            width: 100%;
        }

        .card-number-box-2 .yellow_color,
        .card-number-box-4 .yellow_color {
            position: initial;
            width: 100%;            
        }

        .yellow_color {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }

        .cards-number {
            flex-direction: column;
            align-items: center;
        }

        .card-number-box-2,
        .card-number-box-1,
        .card-number-box-3,
        .card-number-box-4 {
            position: initial;
            margin: 0;
            width: 100%
        }

        .card-number-box-1 {
            margin-top: 135px;
        }

        .card-number-box-2 .yellow_color,
        .card-number-box-4 .yellow_color {
            align-items: center !important;
        }

        .card-number-box-4 .card-number, .card-number-box-2 .card-number {
            width: 78%;
            margin-top: 0            
        }

        .last-card-seven,
        .last-card-eight {
            left: 0;
            right: 0;
            position: initial;
        }

        .iphone-traced {
            max-width: 407px;
            right: -216px;
            margin-top: 26px;
        }

        .iphone-desktop,
        .rock-desktop,
        .bau-desktop {
            display: none;
        }

        .iphone-mobile,
        .rock-mobile,
        .bau-mobile {
            display: block;
        }

        .note-cel,
        .iphone-mobile {
            position: initial;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: auto;
        }

        .card-number {
            width: 78%
        }

        .arcoiris {
            margin-top: -81px;
            right: -430px;
        }

        .card-number p {
            font-size: 14px;
        }

        .box-fixed {
            height: 95px;
            width: 35%;
        }

        .box-fixed-two {
            margin-top: 0px;
            right: -313px;
        }

        .arcoiris {
            display: none;
        }

        .card-one,
        .card-two,
        .card-three {

            justify-content: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        .card-one .card-title {
            left: 8px
        }

        .card-one .card-image-wrapper img,
        .card-two .card-image-wrapper img,
        .card-three .card-image-wrapper img {
            width: 86%!important;
            margin-left: 27px !important;
        }

        .box-cards-final .card-title {
            top: 34px;
            left: 77px !important;
            font-size: 13px;
        }

        .card-one,
        .card-two,
        .card-three,
        .calculadora,
        .bau-traced {
            position: initial;
            margin: 0;
            width: 100vw;
        }

        .bau-traced {
            max-width: 300px !important;
        }

        .descount {
            max-width: 273px;
        }

        .box-cards-final {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 50px;
        }

        .box-visao figure {
            padding-top: 50px;
        }

        .logo-celular-da-clarpo {
            width: 50%;
            height: auto;
        }
        .card-step-2-three {
            position: relative !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: relative !important;
            top: 480px !important;            
        }  
        .banner-desktop {
            display: none;
        }
        .banner-mobile {
            display: block;
            height: 100vh;
            object-fit: cover;            
        }
        .main-banner-text {
            width: 78% !important
        }
        #main-banner h1 {
            font-size: 108px;
        }

        #main-banner .main-banner-updagrade-text h1.title-upgrade {
            font-size: 56px !important
        }
        .main-banner-links {
            flex-direction: column;
        }

        .main-banner-links a {
            width: 66%;
            height: 47px;
            display: flex
        ;
            justify-content: center;
            align-items: center;            
        }
    }

    @media (max-width: 767px) {
        #cards-step .container {
            margin-top: 469px !important;
        }

        .warning {
            text-align: center;
            margin-bottom: 20px;
            margin-top: 212px;            
        }

        .arcoiris {
            margin-top: -38px !important;
            right: -135px !important;
            max-width: 175px;
        }

        .box-fixed-two {
            position: initial;
            display: flex;
            justify-content: center;
            align-items: center;
            margin: 0 auto;
        }

        .box-fixed-two {
            right: -181px;
        }

        .rocktseat {
            max-width: 210px;
            left: -48px;
            display: none;
        }

        .text-main {
            font-size: 26px;
        }

       
        .card-step-2-three {
            position: relative !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: relative !important;
            top: 480px !important;            
        }   
        #main-banner h1 {
            font-size: 82px;
        }       
        #main-banner p {
            font-size: 20px !important;
        }   
    }



    @media (max-width: 595px) {
        #cards-step .badge-2 {
            left: -52px !important
        }

        .warning-inicial {
            position: initial;
            width: 99%;
            text-align: center
        }
        #main-banner .main-banner-updagrade-text {
            top: 38% !important;
        }        
        #main-banner h1 {
            font-size: 51px;
        }
        #main-banner .main-banner-updagrade-text h1.title-upgrade {
            font-size: 34px !important;
        }        
        #main-banner p {
            font-size: 16px !important;
        }     
        .main-banner-links a {
            font-weight: bold;
        }
        #cards-step .container {
            margin-top: 213px !important
        }

        .box-fixed {
            width: 58%;
            height: 114px;
        }

        .box-cards-final .card-title {
            top: 20px;
            left: 99px;            
        }

        .arcoiris {
            display: none;
        }

        .badge-step-4 {
            max-width: 47% !important;
        }

        .card-number-box-1 {
            margin-top: 23px;
        }
        #main-banner .main-banner-text {
            width: 75% !important
        }

        .main-banner-updagrade-text {
            top: 30% !important
        }
        #main-banner p {
            font-size: 12px;
        }   
          
        .logo-celular-da-clarpo {
            width: 70%;
            height: auto;
        }   
        .bau-traced {
            margin-left: 0 !important
        } 
        .box-visao-text {
            width: 85% !important
        } 
        .descount {
            display: none;
        }  
        .card-number {
            width: 95% !important
        }
        .card-number span {
            font-size: 35px !important;
        }
        .start-here {
            left: -5px !important;
            width: 194px !important
        }
        .badge-step-4   {
            max-width: 37% !important;
        }
        .man-step {
            width: 100%;
            max-width: 350px
        }
        .title-box {
            font-size: 20px;
        }
        .text-box {
            font-size: 14px;
        }
        .text-main {
            text-align: center;
        }
        .box-cards-final  {
            margin-top: 54px !important;
        }
        footer .container img {
            width: 50%;
            height: auto;

        }
        .card-start-box {
            width: 244px
        }
        li {
            font-size: 14px;
        }

        .card-two .box-visao-text {
            width: 85% !important;
        }
        .card-step-2-three {
            position: relative !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: relative !important;
            top: 480px !important;            
        } 
        
        .badge-1{
            font-size: 18px !important
        }
        .badge-2,
        .badge-step-4,
        .badge-step-5,
        .badge-step-6,
        .badge-step-7,
        .badge-step-8  {
            font-size: 18px !important
        }
        .badge-step-3 {
            font-size: 18px !important
        }
        .box-cards-final .card-title.title-3, .box-cards-final .card-title.title-1, .box-cards-final .card-title.title-2 {
            margin-left: -24px !important
        }
    }

    @media (max-width: 385px) {

        .badge-step-right,
        .badge-step-left {
            max-width: 31% !important;
            font-size: 14px; 
        }
        #cards-step .container {
            margin-top: 182px !important;
        }        
        
        .man-step {
            padding: 0;
            margin: 0;
            max-width: 288px;
        }
        .badge-step-4 {
            margin-top: -24px !important;
        }
        .man-4g {
            top: 258px;
            max-width: 356px;
        }
        #cards-step .container {
            margin-top: 151px !important;
        }   
        #main-banner p {
            font-size: 8px;
        }         
          
        footer .container img {
            width: 50%;
            height: auto;

        }
        .card-start-box {
            width: 100%;
        }
        .card-step-2-three {
            position: relative !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: relative !important;
            top: 480px !important;            
        }
        #main-banner h1 {
            font-size: 35px;
        }

        .main-banner-links a {
            width: 49%;
            height: 35px;
            font-size: 14px;            
        }
            
    }

    @media (max-width: 310px) {
        .badge-step-right, .badge-step-left {
            width: 11% !important
        }
       footer .container img{
            width: 50%;
            height: auto;
        }
        .card-step-2-three {
            position: relative !important;
            top: -488px !important;
        }
        .card-step-2 {
            position: relative !important;
            top: 480px !important;            
        }        
    }