@media (max-width: 768px) {

    /* Importando a fonte Sofia Pro Soft */
    @font-face {
        font-family: 'Sofia Pro Soft Light';
        src: url('../fonts/Sofia-Pro-Soft-Light.otf') format('opentype');
    }

    @font-face {
        font-family: 'Sofia Pro Soft Regular';
        src: url('../fonts/Sofia-Pro-Soft-Regular.otf') format('opentype');
    }

    @font-face {
        font-family: 'Sofia Pro Soft Bold';
        src: url('../fonts/Sofia-Pro-Soft-Bold.otf') format('opentype');
    }

    /* =========================================
       GERAL & BLOCO 1
       ========================================= */
    .hero-cabotagem {
        overflow: visible;
        /* Permite que o texto vaze ou prolongue */
        display: flex;
        flex-direction: column;
        padding-bottom:0px;
    }

    .hero-bg-img {
        position: absolute;
        top: 0;
        left: -15vw;
        /* Puxa mais pra esquerda proporcionalmente */
        width: 150%;
        /* Aumentado para acompanhar o texto maior */
        height: auto;
        z-index: 1;
        /* Fica atrás do texto */
    }

    .hero-overlay-content {
        display: flex;
        flex-direction: column;
        padding-top: 0;
        /* Removido para usar o padding exato no título */
        position: relative;
        z-index: 2;
    }

    .bloco-livre {
        position: relative;
        top: auto !important;
        padding: 0 !important;
        justify-content: center !important;
        margin-bottom: 25px;
    }

    /* ENCAIXANDO TÍTULO NA IMAGEM (como no desktop) */
    .pos-titulo {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-left: 55vw !important;
        /* Joga pra direita compensando o aumento de 140% */
        padding-top: 38vw !important;
        /* Desce compensando o aumento de 140% */
        text-align: left;
        margin-bottom: 5px;
        margin-top: -7px;
        /* Sobe 7px para encaixar a palavra segurança perfeitamente */
    }

    .main-title {
        text-align: left;
        align-items: flex-start;
    }

    .main-title h1 {
        padding-top: 4px;
        font-family: 'Sofia Pro Soft Bold', sans-serif;
        font-size: 6.3vw;
        line-height: 1.1;
        text-align: left;
    }

    .pos-subtitulo {
        align-items: flex-start !important;
        justify-content: flex-start !important;
        padding-left: 55vw !important;
        text-align: left;
        margin-bottom: 15vw;
        /* Subido ainda mais as etiquetas e o texto */
    }

    .subtitle {
        font-family: 'Sofia Pro Soft Light', sans-serif;
        font-size: 4vw;
        text-align: left;
    }

    /* Etiquetas vermelhas centralizadas */
    .pos-etiquetas {
        margin-left: 0;
        align-items: center !important;
        width: 100%;
    }

    .highlight-boxes {
        align-items: center;
        gap: 8px;
        /* Menor gap nas etiquetas no mobile */
    }

    .highlight-box {
        font-size: 3.2vw;
        padding: 6px 12px;
        text-align: center;
    }

    /* Prolongando o texto */
    .pos-texto {
        margin-left: 0;
        padding: 0 5vw 40px 5vw !important;
        /* Espaço inferior retornado para abrigar os 2 novos parágrafos */
    }

    .text-content p {
        font-size: 4.5vw;
        text-align: justify;
        text-align-last: center;
        line-height: 1.3;
    }

    /* Garantia global contra scroll horizontal no mobile */
    html,
    body {
        overflow-x: hidden;
    }

    #cabotagem-page {
        overflow-x: hidden;
        width:101vw;
        margin-top:-20px;
    }
    .fundo-continuo {
     overflow:hidden;
     padding-bottom:120px;
    }


    /* =========================================
       BLOCO 2
       ========================================= */
    .bloco2-cabotagem {
        margin-top: 0;
    }

    .bloco2-container {
        background-color: #ffffff;
        /* Removido width: 100% porque junto com margin-left: ele causava o scroll horizontal! */
        padding: 80px 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #000000;
        font-family: 'Sofia Pro Soft Regular', sans-serif;
        margin-left: 1vw;
        margin-top: vw;
    }

    .bloco2-arrow-divider {
        display: flex;
        justify-content: center;
        margin-top: -30px;
        position: relative;
        z-index: 10;
        margin-bottom: 0;
    }

    /* Código exato da Seta */
    .bloco2-arrow-divider .arrow-btn {
        width: 87px;
        height: auto;
        cursor: pointer;
        transition: transform 0.3s;
        margin-bottom: -57px;
    }

    .blue-labels-wrapper {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        margin-top: 20px;
        gap: 6px;
        /* Etiquetas coladinhas */
    }

    .blue-label {
        font-size: 5vw;
        background-color: #1a4fba;
        /* Fundo azul estilo desktop */
        color: #ffffff;
        padding: 4px 12px;
        width: fit-content;
        display: inline-block;
    }

    .bloco2-intro-text {
        max-width: 95vw !important;
        /* Tira o limite de 60vw do desktop pra ele poder correr livre */
    }

    .bloco2-intro-text p {
        font-size: 4.2vw;
        text-align: center;
        /* Corrigido para centralizado exato como na imagem */
        padding: 0px;
        /* Definido como 0px baseado no "px" que você enviou */
        line-height: 1.4;
        margin-top: 20px;
    }

    /* Carrossel Completo no Mobile (Estilo Mockup) */
    .video-carousel {
        position: relative;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin-left: 0;
        /* overflow: hidden; -> REMOVIDO para as setas não serem cortadas */
        margin-top: 30px;
        margin-bottom: 40px;
    }

    .carousel-side-video {
        display: none !important;
    }

    .carousel-main-video {
        display: flex;
        width: 65vw;
        /* Reduzido para dar mais espaço e não cortar as setas */
        aspect-ratio: 16/9;
        flex-shrink: 0;
        position: relative;
        border-radius: 15px;
        box-shadow: none !important;
    }

    /* Setas nas laterais do vídeo (Apenas a imagem original) */
    .carousel-nav {
        z-index: 10;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: transparent;
    }

    .carousel-nav.prev {
        margin-right: 3vw;
    }

    /* Empurra o vídeo um pouco mais pra lá */
    .carousel-nav.next {
        margin-left: 3vw;
    }

    .btn-carousel-nav {
        width: 10vw;
        height: auto;
        opacity: 1;
    }

    .video-overlay h2 {
        font-size: 4.5vw;
    }

    /* Título levemente maior */
    .play-button-icon {
        width: 12vw;
        height: 12vw;
        border-width: 2px;
    }

    /* Play maior */
    .play-triangle {
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        border-left: 15px solid #ffffff;
        margin-left: 5px;
    }

    /* Botões Pílula Exatos */
    .bloco2-action-buttons {
        display: flex;
        flex-direction: column;
        width: 80%;
        gap: 15px;
        margin: 0 auto;
    }

    .bloco2-action-buttons a {
        font-size: 4.2vw;
        padding: 12px;
        width: 100%;
        /* Botão superior bem mais curto */
        margin: 0 auto;
        text-align: center;
        box-sizing: border-box;
    }

    /* =========================================
       BLOCO 3
       ========================================= */
    .bloco3-cabotagem {
        margin-top: 0;
        height: 270px;
    }

    .bloco3-bg-img {
        width: 232%;
        max-width: none;
        margin-left: -90%;
        margin-top: -0px;
    }

    .bloco3-overlay-content {
        justify-content: start;
        padding-left: 30px;
        align-items: center;

    }

    .overlay-bloco3-mobile {
        width: 100%;
        height: 1px;
    }

    .bloco3-text-wrapper {
        align-items: flex-start;
        /* Alinha tudo à esquerda */
        width: 47.8vw;
        /* Deixa um respiro para o piloto na direita */
    }

    .bloco3-title-normal {
        display: none;
    }

    .bloco3-title-normal-mobile {
        display: block;
        margin-top: -0px;
        font-size: 4.1vw;
        text-align: left;
        font-family: 'Sofia Pro Soft Light', sans-serif;
        width: 230px;
        font-weight: 100;
        line-height: 1.2;
        letter-spacing: 1px;
    }

    .bloco3-title-bold {
        display: none;
    }

    .bloco3-title-bold-mobile {
        font-size: 4.3vw;
        font-weight: 300;
        display: block;
        font-family: 'Sofia Pro Soft Bold', sans-serif;
        text-align: left;
        width: 300px;
        letter-spacing: 1.1px;

        line-height: 1.3;
        margin-bottom: 5px;
        margin-top: -13px;

    }

    /* Botão Manifesto (estilo Pílula) */
    .manifesto-btn {
        width: auto !important;
        margin: 10px 0 0 0 !important;
        font-size: 4vw !important;
        padding: 6px 12px !important;
        border-radius: 50px !important;
    }

    /* =========================================
       BLOCO 4
       ========================================= */
    .bloco4-cabotagem {
        display: flex;
        width:100%;
        gap: 0;
        height:310px;
        padding: 0;
    }

    .bloco4-col-left {
            width:35vw;
            height:110%;
    }

    .bloco4-col-left img {
        background:orange;
        object-fit: cover;
    }

    .bloco4-col-center {
width:60vw;
margin-top:25px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 0vw;
    }
.highlight-boxes{
        width:100%;
    font-size: 1vw;
}
    .bloco4-text-content {
        width:100%;
        padding: 0;
    }

    .bloco4-highlight-boxes{
        display:none;
    }

    .bloco4-highlight-boxes-mobile{
        display:block;
        width:100%;
        gap:10px;
    }

    
        .highlight-box4 {

                background-color: #9b0000;
    /* Vermelho escuro baseado na imagem */
    background: linear-gradient(90deg, #c30f14 0%, #b30c11 100%);
    color: white;
    padding: 0.2vw 0.5vw;
    /* Diminuição nas laterais */
    font-family: 'Sofia Pro Soft Bold', sans-serif;
    font-size: 1.2vw;
    /* Responsivo! Era 36px */
    text-transform: uppercase;
    display: inline-block;
    box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5);
        font-size:4.2vw;
        padding: 2px 6px;
        margin-top:5px;
        text-align: center;
    }
        .bloco4-text-content{
        display:none;

    }
    .bloco4-text-content-mobile {
        display:block;
        font-size: 4vw;

        width:50vw;

        
    }
    .bloco4-text-content-mobile p {
        width:100%;
        font-size: 4.2vw;
        text-align: center;
        font-family: 'Sofia Pro Soft Regular', sans-serif;

        margin-top: 5px;
    }

    .bloco4-col-right {
        display:none;
        width: 30vw;
        height: 100%;

    }

    .bloco4-col-right img {
        width:100%;
    }

    /* =========================================
       BLOCO 5
       ========================================= */
    .bloco5-cabotagem {
        display:flex;
        position:relative;
        margin: 50px 0;
        flex-direction:row;
    }

    .cards-carousel {
        width:15px;
        flex-direction: row;
        align-items: center;
        gap: 0px;
        width:100vw;
    }

    .bloco5-card.main-card{
            width:70vw;
        padding: 0px 20px 20px 25px;
        margin: 0;
            border-radius:20px;

    }
    .bloco5-card.side-card {
        position:absolute;
        width: 28vw;
        padding: 10px 5px 5px 5px;
        margin: 0;
        border-radius:15px;
    }
  .bloco5-card.side-card-left {
        left:-20vw;


  }

    .bloco5-card.side-card-right {

        right   :-21vw;
    
  }
    .bloco5-card.main-card .card-icon-badge,
    .bloco5-card.side-card .card-icon-badge {
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 35px;
        height: 35px;
    }

    .bloco5-card.main-card .card-title,
    .bloco5-card.side-card .card-title {
        font-size: 4.5vw;
        text-align: center;
    }
    .card-content{
        gap:5px
    }
.card-title {
    margin-top:35px;
}
.bloco5-card.side-card .card-title-sub {
    font-size:3.2vw;    
}
    .card-text {
        width:100%;
        font-size: 4.3vw;
        text-align: center;
    }

    /* =========================================
       BLOCO 6
       ========================================= */

    .bloco6-cabotagem {
        display: flex;
        flex-wrap: wrap;
        gap: 15px 5vw;
        overflow: visible;
        justify-content: start;
        overflow: hidden; 
        height: 1150px;
                margin: 40px 0 0 0;

 }
    .bloco6-container {
        display: contents;
    }

    .bloco6-col-left,
    .bloco6-col-right,
    .bloco6-top-row,
    .bloco6-content-wrapper {
        display: contents;
    }


    .bloco6-predio-wrapper {
        display: block !important;
        height:730px;  
        width: 30vw;
    }

    .bloco6-img-predio {
        width: 111%;
        margin-left:0%;
    }

    .bloco6-highlight-boxes {
         display: none;

    }
.bloco6-highlight-boxes-mobile{
    position:absolute;
    left:30vw;
        width: 55vw;
    top:0px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-end;  

}


.tag-bold {
        width:100%;

    font-family: 'Sofia Pro Soft Bold', sans-serif;
    font-weight: 700;
                font-size: 3.5vw;

}

    .bloco6-tag {
        width:100%;

                font-size: 3.5vw;
        padding: 4px 6px;
        text-align: left;
        margin-top: 5px;;
    }
    .bloco6-text p {
        width:69%;
        font-size:4.1vw;
        margin-top:5px;

    }

    .bloco6-text-1 {
        position:absolute;
        font-size: 4.2vw;
        left:30vw;
        top:90px;
        width:100%;
        line-height: 1.4;
        padding-right: 5vw;
        text-align: left;
    }
    .bloco6-col-right{
       margin-left:31vw;

        width:40vw; 
        display:block;
        overflow :hidden;
    }
    .bloco6-img-rio {
      position:absolute;
       top:-64;
       margin-left:-10vw;

        width:180%;
        object-fit: contain;
    }

    .bloco6-text-2 {
                position:absolute;

        left:11vw;
        top:318px;
        width:66vw;
        line-height: 1.4;
        text-align: left;
    }
    .bloco6-text-2 .p {
        font-size: 3.5vw;

            width:10px !important;

    }

    .bloco6-aviao-wrapper {
                position:absolute;
        top:850px;
        left:5vw;
        margin:0 auto;
        height:150px;
        width: 93vw;
        overflow: hidden;
        /* avião invade o bloco 7 */
        z-index: 30;
    }

    .bloco6-img-aviao {
        width:120%;
        margin-left:-55%;
        margin: 0 auto;
        display: block;
        object-fit: contain;

    }

    /* =========================================
       BLOCO 7
       ========================================= */
    .bloco7-cabotagem {
        margin: 0;
        z-index: 25;
        margin-top:-50px;
        display: flex;
        flex-direction: column;
        height:150px;
    }

    .bloco7-container {
        display: flex;
        flex-direction: column;
        gap: 0px;
        padding: 0;
    }

    .bloco7-col-right {
        order: 1;
        display: flex;

        flex-direction: column;
        width: 100%;
        padding: 0 5vw;
    }

    .bloco7-top-row {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start;
    }

    .bloco7-content-box {
        width: 60%;
        margin-top: 10px;
    }
.bloco7-content-box {
     display: none;

}


.bloco7-content-box-mobile {
   display: flex;
    flex-direction: column;
    align-items: flex-start;
position:absolute;

    width:250px;
    top:-80px;
    left:4.5vw;
}
    .bloco7-title-light,
    .bloco7-title-light-sub {
        font-size: 3.5vw;
        text-align: center;
        line-height: 1.3;
                width:85%;

        margin: 0;
    }

    .bloco7-title-bold,
    .bloco7-title-bold-sub {
        font-size: 3.5vw;
        width:85%;
        text-align: center;
        line-height: 1.2;
        letter-spacing: 1.4;
        margin: 0;
    }

    .bloco7-maos-wrapper {
        position:absolute;
        top:70px;
        right:14px;
        width: 29vw;
        overflow:hidden
    }

    .bloco7-img-maos {
        width: 100%;
        height: auto;
    }

    .bloco7-btn-wrapper {
        margin-top: -5px;
        margin-left: 5px;
        width: 90%;
        display: flex;
        justify-content: flex-start;
    }
 a.manifesto-btn{
        font-size: 3vw;

 }
    .bloco7-cabotagem a.manifesto-btn {
        width: 100%;
        font-size: 3vw;
        padding: 15px;
        text-align: center;
        color: #ffffff !important;
    }

    .bloco7-col-left {
        order: 2;
        position:absolute;
        left:20px;
        top:35px;
        display: flex;
        flex-direction: row;
        width: 50%;
    }

    .bloco7-vert-wrapper {
        width: 25%;
        height:500px;
        
    }

    .bloco7-img-vert {
        width:125%;
        height: 185px;
        margin-top: 35px;;

        border-radius: 0px;
    }

    .img-vert2 {
        margin-top: 35px;;
        height: 170px;
        margin-left:28px;
        border-radius: 0px;
    }
    .bloco7-bottom-row {
        position:absolute;
        order: 3;
        right:13px;
        top:-80px;
        width: 40%;
        
    }

    .bloco7-img-cabine {
        width: 100%;
        height: auto;
        display: block;
    }
}