@import url(../Style/transition.css);

/*Header*/

/*Primeira Seção*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
    background-color: #f6f6f6;
    z-index: 1;
    cursor: none;

    ::-webkit-scrollbar {
        display: none;
    }
}

.cursor {
    position: fixed;
    height: 20px;
    width: 20px;
    border-radius: 100%;
    background-color: whitesmoke;
    z-index: 10000;
    margin-left: -8px;
    margin-top: -8px;
    backdrop-filter: grayscale(1);
    mix-blend-mode:exclusion;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.32, 0, 0.67, 0);
    
}

.cursor.active {
    transform: scale(25);
}


body.custom-cursor-active .cursor {
    display: none;
}

.custom-cursor {
    position: absolute;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #669bbc9c;
    color: white;
    display: none;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    transform: translate(-50%, -50%);
    z-index: 1000;
    font-size: 14px;
    transition: transform 1s ease;
}

.img-container:hover ~ .custom-cursor {
    display: flex;
    transform: translate(-50%, -50%) scale(1.5);
}

@keyframes gradientAnimation {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
  

/* Estilos da Primeira Seção (CONFORME SEU CÓDIGO FORNECIDO PARA DESKTOP) */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    height: 80vh;
    width: 100vw; /* Mantido conforme seu original. Considere 100% se houver overflow. */
    padding: 0 2%;
    box-sizing: border-box; /* Adicionado para o padding não somar à largura/altura */
}

/* .hero-section não é usado no HTML desta seção, mantido como no seu CSS */
.hero-section{
    min-height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.main-heading {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 40px;
    /* ATENÇÃO: Se o fundo da .hero for claro (ex: #f6f6f6), este texto
       color: #f6f6f6; ficará invisível. Ajuste se necessário. */
    color: #f6f6f6;
    text-align: center;
    margin: 2vh 0;
    width: 55%; /* Largura original do desktop */
}

.main-heading .unica-one {
    font-family: 'Unica One', cursive;
    font-size: 50px; /* Tamanho original do desktop */
}

.main-heading .inter {
    font-family: 'Inter', sans-serif;
    opacity: 0.70;
}

.highlight {
    color: #669bbc;
}

.central-image {
    max-width: 950px;
    max-height: 600px;
    object-fit: contain;
    display: block; /* Adicionado para centralização com margin:auto funcionar melhor */
    margin: 0 auto; /* Adicionado para tentar centralizar a imagem */
}

/* Estilos da Timeline (não estão no HTML desta seção, mas mantidos no seu CSS) */
.timeline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 70%;
    max-width: 1200px;
    margin: 3vh auto 0;
    padding: 0 20px;
    box-sizing: border-box;
}

.timeline-line {
    height: 2px;
    background-color: #457B9D;
    flex-grow: 1;
    margin: 0 10px;
}

.timeline-start, .timeline-end {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(12px, 2vh, 18px); /* Seu clamp original */
    color: #457B9D;
    white-space: nowrap;
    flex-shrink: 0;
}

/* --- SUGESTÕES DE RESPONSIVIDADE (APENAS DENTRO DAS MEDIA QUERIES) --- */

@media screen and (max-width: 768px) {
    /* Seus estilos originais para header, logo, menu-button nesta media query */
    header {
        height: auto;
        padding: 10px 5%;
    }
    .logo {
        padding-top: 10px;
    }
    .menu-button {
        margin-top: 10px;
        font-size: clamp(16px, 2.7vh, 22px);
    }

    /* Ajustes para a seção .hero */
    .hero {
        height: auto; /* Altura original da media query */
        min-height: 80vh; /* Altura original da media query */
        padding-top: 20px; /* Adiciona algum respiro no topo */
        padding-bottom: 20px; /* Adiciona algum respiro embaixo */
        justify-content: space-around; /* Melhora distribuição vertical */
    }

    /* Ajustes para .main-heading */
    .main-heading {
        width: 100%; /* SUGESTÃO: Tornar a largura mais flexível */
    }

    /* SUGESTÃO: Ajustar o tamanho da fonte do span .unica-one */
    span .unica-one {
        font-size: 80px;
    }
    /* SUGESTÃO: Ajustar o tamanho da fonte do span .inter (opcional) */
    span .inter {
        font-size: 70px;
    }


    /* Ajustes para .central-image */
    .central-image {
        max-height: 50vh; /* Sua regra original */
        width: 80%;       /* SUGESTÃO: Controlar a largura */
        height: auto;     /* SUGESTÃO: Manter proporção */
    }

    /* Seus estilos originais para .timeline nesta media query */
    .timeline {
        flex-wrap: nowrap;
    }
    .timeline-start, .timeline-end {
        font-size: clamp(12px, 1.7vh, 16px);
    }
    .timeline-line {
        flex-grow: 1;
        margin: 0 5px;
    }

    .cursor{
        display: none;
    }
}

@media screen and (max-width: 480px) {
    /* Ajustes para .main-heading */
    .main-heading {
        /* CORRIGIDO e SUGESTÃO: Fonte responsiva e menor que no breakpoint de 768px */
        font-size: clamp(22px, 6vw, 30px);
        width: 90%; /* SUGESTÃO: Tornar a largura ainda mais flexível */
    }

    /* SUGESTÃO: Ajustar o tamanho da fonte do span .unica-one */
    .main-heading .unica-one {
        font-size: clamp(28px, 7.5vw, 36px);
    }
    /* SUGESTÃO: Ajustar o tamanho da fonte do span .inter (opcional) */
    .main-heading .inter {
        font-size: clamp(14px, 4vw, 18px);
    }

    /* SUGESTÃO: Regras específicas para a imagem em telas pequenas */
    .central-image {
        width: 85%;
        max-height: 35vh; /* Ajusta altura máxima */
        /* height: auto; já definido em 768px e é herdado */
    }

    /* Seus estilos originais para .menu-button e .timeline nesta media query */
    .menu-button {
        font-size: clamp(18px, 3vh, 24px);
    }
    .timeline-start, .timeline-end {
        font-size: clamp(10px, 1.4vh, 14px);
    }
    .timeline-line {
        margin: 0 3px;
    }

    .cursor{
    display: none;
    }
}

/*Segunda Seção*/

.full-height-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 10;
}

.new-section {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f6f6f6;
    padding: 20px 0;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.flex-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}

.main-title-container {
    flex: 0 0 30%; /* Ajuste este valor conforme necessário */
}

.new-section .container {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}


.four-columns-section {
    padding: 40px;
    margin-top: 50px;
}

.four-columns-section .container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.four-columns-section .column {
    flex-basis: 20%;
    margin-bottom: 5px;
}

.columns-container {
    flex: 0 0 70%; /* Ajuste este valor conforme necessário */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.column2 {
    flex: 0 0 calc(33.33% - 20px);
    margin-bottom: 20px;
}

@media screen and (max-width: 768px) {
    .container2 {
        flex-direction: column;
        gap: 20px;
    }

    .column2 {
        padding: 0;
    }

    .column-title {
        font-size: 20px;
    }

    .column-text {
        font-size: 14px;
    }
}



.four-columns-section .column:first-child {
    flex-basis: 28%;
}

.main-title {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.main-title .unica-one {
    font-family: 'Unica One', sans-serif;
    font-size: 28px; /* Ajuste conforme necessário */
    font-weight: 400;
    color: #4A7A9B;
    display: block;
}

.main-title .inter {
    font-family: 'Inter', sans-serif;
    font-size: 24px; /* Ajuste conforme necessário */
    font-weight: 900;
    display: block;
}

.column-title {
    font-family: 'Unica One', sans-serif;
    font-weight: 600;
    font-size: 1.2em;
    color: #333;
    margin-bottom: 10px;
    line-height: 1.2;
}

.column-text {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1em;
    color: #666;
    line-height: 1.5;
}

/* Responsividade */
@media (max-width: 768px) {
    .flex-container {
        flex-direction: column;
    }

    .main-title-container,
    .columns-container {
        flex: 0 0 100%;
    }

    .column2 {
        flex: 0 0 100%;
    }
}



@media screen and (max-width: 1024px) {
    .four-columns-section .column {
        flex-basis: 48%;
    }

    .four-columns-section .column:first-child {
        flex-basis: 100%;
    }
}

@media screen and (max-width: 768px) {
    .new-section {
        padding: 40px 0;
    }

    .four-columns-section .container {
        flex-direction: column;
    }

    .four-columns-section .column {
        flex-basis: 100%;
        margin-bottom: 30px;
        text-align: center;
        padding: 0 15px;
    }

    .main-title {
        font-size: 24px;
    }

    .column-title {
        font-size: 18px;
    }

    .column-text {
        font-size: 14px;
    }
}

@media screen and (max-width: 480px) {
    .four-columns-section .column {
        flex-basis: 100%;
        text-align: center;
        padding: 0 20px;
    }

    .main-title {
        font-size: 24px;
    }

    .column-title {
        font-size: 18px;
    }

    .column-text {
        font-size: 14px;
    }

    .four-columns-section .container {
        margin: 0 10px;
    }
}

/* Terceira Seção - Base (Desktop) - Restaurado ao original */
.folder-section {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh; /* Mantido como original - ajustes de responsividade abaixo */
    background-color: #f6f6f6;
    margin-top: 8%; /* Mantido como original */
    padding: 20px; /* Adicionado um padding base para evitar que o card cole nas bordas extremas */
    box-sizing: border-box;
}

.nossos-produtos-card {
    background: linear-gradient(135deg, #060916 0%, #1D3557 100%);
    padding: 30px;
    border-radius: 30px;
    width: 75%; /* Mantido como original */
    max-width: 1200px; /* Adicionado um max-width para controle em telas muito largas */
    height: fit-content;
    /* clip-path: path ("M Z"); Comentado pois o path original estava incompleto */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1); /* Sombra sutil */
}

.card-title {
    font-family: 'unica one', sans-serif;
    font-weight: 900;
    font-size: 60px; /* Mantido como original para desktop */
    color: #fff;
    margin-bottom: 30px;
    text-align: center; /* Adicionado para melhor alinhamento do título */
}

a {
    text-decoration: none;
}
.card-title:hover {
    color: #669BBC;
    text-decoration: underline;
    transition: color 0.3s ease-in-out;
}

.produtos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Mantido como original para desktop */
    grid-gap: 50px; /* Mantido como original para desktop */
}

.produto-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.produto-card {
    width: 100%;
    height: 150px; /* Mantido como original para desktop - ajustes de responsividade abaixo */
    border: 2px solid #669BBC;
    border-radius: 30px;
    background-color: transparent;
    display: flex;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.produto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 15px rgba(102, 155, 188, 0.2);
}


.produto-card-left {
    width: 40%; /* Mantido como original */
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Essencial para o posicionamento absoluto dos filhos */
    padding: 10px;
    box-sizing: border-box;
}

.produto-card-right {
    width: 60%; /* Mantido como original */
    padding: 15px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
}

.imagem-circulo {
    width: 60px; /* Mantido como original para desktop */
    height: 60px; /* Mantido como original para desktop */
    border-radius: 50%;
    background-color: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 5px; /* Mantido */
}


/* O segundo círculo (ícone do produto) */
.produto-card-left .imagem-circulo:not(.botao-circulo) { /* Seleciona o img e não o botão */
    position: absolute; /* Mantido como no seu CSS original para o ícone do produto */
    left: 55%; /* Mantido */
    z-index: 1; /* Mantido */
    /* O botão (.botao-circulo) ficaria à esquerda deste por padrão no flex,
       ou antes no DOM e este o sobreporia se centralizado e z-index maior.
       Ajuste o left: 55% ou a estrutura do flex/HTML se o layout não for o esperado.
       Com left:55%, o ícone do produto se desloca para a direita, deixando espaço para o botão à esquerda.
    */
}


.imagem-circulo2 { /* Botão play do vídeo */
    position: absolute;
    left: 50%; /* Ajustado para centralizar horizontalmente com transform */
    top: 50%;  /* Ajustado para centralizar verticalmente com transform */
    transform: translate(-50%, -50%); /* Centraliza o botão */
    z-index: 1;
    width: 60px; /* Mantido original */
    height: 60px; /* Mantido original */
    border-radius: 50%;
    /* background-color: transparent; Removido para usar o do .botao-circulo2 */
    display: flex;
    justify-content: center;
    align-items: center;
    /* margin: 5px; Removido pois o posicionamento absoluto cuida disso */
}

.imagem-circulo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Para garantir que a imagem caiba sem distorcer */
}

.produto-titulo {
    font-family: 'unica one', sans-serif;
    font-weight: 500;
    font-size: 18px; /* Mantido como original para desktop */
    color: #669BBC;
    margin-bottom: 5px;
    line-height: 1.3;
}

.produto-texto {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 14px; /* Mantido como original para desktop */
    color: #fff;
    line-height: 1.4;
}

.botao-circulo {
    background-color: transparent;
    border: 1px solid #f6f6f6;
    cursor: pointer;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.botao-circulo:hover {
    background-color: #669BBC;
    border-color: #669BBC;
}

.botao-circulo2 { /* Estilo para o botão play do vídeo */
    background-color: rgba(102, 155, 188, 0.7); /* Cor original com leve transparência */
    border: 1px solid #f6f6f6; /* Adicionada borda para consistência */
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.botao-circulo2:hover {
    background-color: #457B9D;
    transform: translate(-50%, -50%) scale(1.1); /* Mantém centralização ao escalar */
}


.botao-seta {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
}

.botao-seta svg {
    width: 24px; /* Mantido original */
    height: 24px; /* Mantido original */
}

.botao-seta path {
    stroke: #fff;
}

.botao-circulo:hover .botao-seta {
    transform: translate(3px, -3px); /* Suavizado */
}

.video-circulo {
    width: 150px; /* Mantido original para desktop */
    height: 150px; /* Mantido original para desktop */
    border-radius: 50%; /* Corrigido para círculo perfeito */
    overflow: hidden;
    position: relative; /* Para o botão play ser absoluto a ele */
    margin: 0 auto; /* Centraliza o vídeo se o .produto-card-left for maior */
}

.video-circulo video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fullscreen-video-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    z-index: 10000; /* Aumentado z-index */
    justify-content: center; /* Adicionado para centralizar */
    align-items: center;   /* Adicionado para centralizar */
}
/* Para controle via JS */
.fullscreen-video-container.active {
    display: flex;
}

.fullscreen-video-container video {
    max-width: 90vw;  /* Limita a largura em relação à viewport */
    max-height: 90vh; /* Limita a altura em relação à viewport */
    object-fit: contain;
}

.close-fullscreen {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 30px; /* Mantido original */
    color: #f6f6f6;
    background: none;
    border: none;
    cursor: pointer;
    padding: 5px;
}

.botao-play {
    background: none;
    border: none;
    cursor: pointer;
    /* transition: transform 0.3s ease;  A transição está no pai .botao-circulo2 */
    color: #f6f6f6;
    display: flex; /* Para centralizar o SVG dentro */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

/* .botao-play:hover { transform: scale(1.2); }  Hover no pai .botao-circulo2 */

.botao-play svg {
    filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.3));
    width: 24px; /* Tamanho do ícone play */
    height: 24px;
}

.botao-play svg path {
    fill: currentColor;
}

/* --- Media Queries Consolidadas e com Foco em Responsividade --- */

@media screen and (max-width: 1024px) {
    .folder-section {
        height: auto; /* Altura automática */
        min-height: auto; /* Remove altura mínima para se ajustar ao conteúdo */
        padding: 40px 15px; /* Padding ajustado */
        margin-top: 5vh; /* Margem superior responsiva */
    }

    .nossos-produtos-card {
        width: 90%; /* Card um pouco mais largo */
        padding: 25px;
    }
    
    .card-title {
        font-size: clamp(36px, 5vw, 48px); /* Título responsivo */
        margin-bottom: 25px;
    }

    .produtos-grid {
        grid-gap: 30px; /* Gap reduzido */
    }

    .produto-card {
        height: auto; /* Altura automática para o card */
        min-height: 140px; /* Altura mínima para manter algum tamanho */
    }

    .produto-card-left {
        padding: 8px;
    }
    .produto-card-right {
        padding: 12px;
    }

    .imagem-circulo {
        width: 55px;
        height: 55px;
    }
    .produto-titulo{
        font-size: 17px;
    }
    .produto-texto{
        font-size: 13px;
    }
    .video-circulo{
        width: 130px;
        height: 130px;
    }
    .imagem-circulo2 { /* Botão play */
        width: 55px;
        height: 55px;
    }
    .botao-play svg {
        width: 22px;
        height: 22px;
    }

}

@media screen and (max-width: 768px) {
    .folder-section {
        padding: 30px 10px;
        margin-top: 3vh;
    }
    .nossos-produtos-card {
        width: 95%;
        padding: 20px;
    }

    .card-title {
        font-size: clamp(28px, 7vw, 36px); /* Título menor e responsivo */
        margin-bottom: 20px;
    }

    .produtos-grid {
        grid-template-columns: 1fr; /* Uma coluna */
        grid-gap: 25px;
    }

    .produto-card {
        min-height: auto; /* Remove altura mínima, deixa o conteúdo ditar */
        /* height: auto; já é auto de 1024px */
    }

    .imagem-circulo {
        width: 50px;
        height: 50px;
    }
    .produto-titulo{
        font-size: 16px;
    }
    .produto-texto{
        font-size: 12px;
    }
    .video-circulo{
        width: 120px;
        height: 120px;
    }
    .imagem-circulo2 { /* Botão play */
        width: 50px;
        height: 50px;
    }
    .botao-play svg {
        width: 20px;
        height: 20px;
    }
}

@media screen and (max-width: 480px) {
    .folder-section {
        padding: 20px 10px;
        margin-top: 0;
    }
    .nossos-produtos-card {
        width: 100%; /* Ocupa toda a largura disponível (considerando o padding da section) */
        padding: 15px;
        border-radius: 20px;
    }
    .card-title {
        font-size: clamp(24px, 8vw, 28px);
    }
    .produtos-grid {
        grid-gap: 20px;
    }

    .produto-card {
        flex-direction: column; /* Empilha os elementos do card */
        height: auto; /* Totalmente automático */
        padding: 15px; /* Padding interno para o card empilhado */
    }

    .produto-card-left,
    .produto-card-right {
        width: 100%; /* Ocupam toda a largura */
    }

    .produto-card-left {
        padding: 10px 0;
        flex-direction: row; /* Ícones lado a lado */
        justify-content: space-evenly; /* Espaça os ícones um pouco */
        align-items: center;
        margin-bottom: 10px; /* Espaço antes da parte direita */
    }
    /* No mobile, os ícones ficam lado a lado e estáticos */
    .produto-card-left .imagem-circulo.botao-circulo,
    .produto-card-left .imagem-circulo:not(.botao-circulo) {
        position: static; /* Remove posicionamento absoluto */
        left: auto;
        transform: none; /* Remove transformações de posicionamento */
    }

    .produto-card-right {
        padding: 0; /* Remove padding extra se o card já tem */
        text-align: center;
    }

    .produto-titulo {
        font-size: clamp(15px, 5vw, 17px);
    }

    .produto-texto {
        font-size: clamp(11px, 3.5vw, 13px);
    }
    
    /* Ajustes para o item de vídeo em telas pequenas */
    .produto-item:last-child .produto-card-left {
        /* O item do vídeo já não tem .produto-card, então o estilo é direto no .produto-card-left */
        padding: 15px 0; /* Mantém um padding */
        justify-content: center; /* Centraliza o vídeo e o botão */
    }

    .video-circulo {
        width: clamp(100px, 25vw, 120px);
        height: clamp(100px, 25vw, 120px);
    }
    .imagem-circulo2 { /* Botão play */
        width: clamp(45px, 12vw, 50px);
        height: clamp(45px, 12vw, 50px);
    }
    .botao-play svg {
        width: clamp(18px, 5vw, 20px);
        height: clamp(18px, 5vw, 20px);
    }

    .close-fullscreen {
        top: 10px;
        right: 10px;
        font-size: 24px;
    }
}
/*Quarta Seção*/

img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.custom-shape-divider-bottom-1736434674 {
    position: relative;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1736434674 svg {
    position: relative;
    display: block;
    width: calc(197% + 1.3px);
    height: 110px;
    transform: rotateY(180deg);
}

.custom-shape-divider-bottom-1736434674 .shape-fill {
    fill: #060916;
}

.content-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 2rem;
}



.left-content {
    flex: 1;
    padding-right: 40px;
    margin-left: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
}


.status-info-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 4vh;
}

.ver-mais-servicos {
    background-color: #669BBC;
    color: #f6f6f6;
    font-family: 'unica one', sans-serif;
    font-weight: 400;
    font-size: 1.2vw;
    padding: 1vh 2vw;
    border: none;
    border-radius: 50px;
    cursor: pointer;
    transition: background-color 0.5s ease, transform 0.5s ease;
    text-decoration: none;
    display: inline-block;
}

.ver-mais-servicos:hover {
    background-color: transparent;
    border: 1px solid #f6f6f6;
    transform: scale(1.05);
}



.status-info {
    display: flex;
    align-items: center;
}

.status-icon {
    margin-right: 1vw;
}

.status-icon img {
    width: 3vw;
    height: auto;
}

.status-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.status-percentage {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: 2vw;
    color:#f6f6f6;
}

.status-description {
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    font-size: 1vw;
    color: #f6f6f6;
}

.vertical-divider {
    width: 1px;
    height: 6vh;
    background-color: #f6f6f6;
    margin: 0 2vw;
}

.right-content {
    flex: 0 0 40%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.image-card {
    background-color: #060916;
    border-radius: 30px 30px 30px 220px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    height: 456px;
    width: 500px;
}

.image-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.navigation-buttons {
    display: flex;
    justify-content: center;
    gap: 2vw;
    margin-top: 2vh;
}

.nav-button {
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    background-color: transparent;
    border: 1px solid #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.nav-button svg {
    width: 2vw;
    height: 2vw;
}

@media screen and (max-width: 1024px) {

    .status-icon img {
        width: 4vw;
    }

    .status-percentage {
        font-size: 2.5vw;
    }

    .status-description {
        font-size: 1.5vw;
    }

    .ver-mais-servicos {
        font-size: 1.8vw;
    }
}

@media screen and (max-width: 768px) {

    .status-icon img {
        width: 6vw;
    }

    .status-percentage {
        font-size: 3.5vw;
    }

    .status-description {
        font-size: 2vw;
    }

    .ver-mais-servicos {
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 480px) {

    .status-icon img {
        width: 8vw;
    }

    .status-percentage {
        font-size: 5vw;
    }

    .status-description {
        font-size: 3vw;
    }

    .ver-mais-servicos {
        font-size: 3.5vw;
    }
}



/*Sexta Seção*/
.sexta-secao {
    position: relative; /* Necessário para o posicionamento absoluto do .background */
    background-color: #060619;
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza o grid-container verticalmente se houver espaço */
    align-items: center;    /* Centraliza o grid-container horizontalmente */
    padding: 8vh 20px;     /* Padding responsivo e horizontal fixo para evitar que o conteúdo cole nas bordas */
    box-sizing: border-box;
    /* padding-top: 10%;
    padding-bottom: 10%; */ /* Substituído por vh e px para mais controle */
    overflow: hidden; /* Alterado de visible para hidden para conter o blur do .background se ele for muito grande */
    z-index: 1; /* Mantido */
}

.background {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(400px, 100vw, 1200px); /* Largura responsiva, máx de 1200px */
    height: clamp(400px, 100vh, 1000px);/* Altura responsiva, máx de 1000px */
    transform: translate(-50%, -50%); /* Centraliza o elemento */
    background: radial-gradient(circle, rgba(46, 97, 129, 0.6) 0%, rgba(6, 6, 25, 0) 70%); /* Ajustada opacidade no gradiente */
    filter: blur(100px); /* Levemente reduzido, ajuste conforme o visual desejado */
    z-index: 0; /* Atrás do conteúdo da seção */
    pointer-events: none;
}

.grid-container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto; /* Já centralizado pelo flex da .sexta-secao, mas bom manter */
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, auto); /* Linhas com altura automática baseada no conteúdo */
    gap: 20px;
    position: relative; /* Mantido z-index: 1; implícito ou explícito */
    z-index: 1; /* Garante que o grid fique sobre o .background */
}

.logo-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* Centraliza a imagem, a legenda será absoluta */
    height: 100%;
    width: 100%;
    padding-bottom: 30px; /* Espaço para a legenda não sobrepor a imagem no hover */
}

.logo-caption {
    color: #f6f6f6;
    font-family: "inter", sans-serif;
    font-size: clamp(10px, 1.5vw, 12px); /* Tamanho de fonte responsivo */
    text-align: center;
    opacity: 0;
    transform: translateY(10px); /* Posição inicial da legenda */
    transition: opacity 0.4s ease, transform 0.4s ease; /* Transição mais suave */
    max-width: 90%; /* Aumentado um pouco para legendas mais longas */
    line-height: 1.3; /* Melhorado o espaçamento entre linhas */
    position: absolute;
    bottom: -10px; /* Posição inicial abaixo do wrapper, ajuste conforme necessário */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Centraliza e posiciona */
    padding: 5px;
    box-sizing: border-box;
    width: calc(100% + 20px); /* Para compensar o padding e permitir que o texto respire, pode precisar de ajuste */
}

.logo-wrapper:hover .logo-caption {
    opacity: 1;
    transform: translateX(-50%) translateY(-15px); /* Legenda sobe um pouco mais */
}

.logo-wrapper:hover img {
    opacity: 1;
    transform: translateY(-10px); /* Imagem sobe um pouco no hover */
}

.grid-item,
.grid-item-brasil {
    aspect-ratio: 1 / 1;
    overflow: hidden; /* Mantido */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.03); /* Fundo sutil para os itens do grid */
    border-radius: 8px; /* Bordas arredondadas */
    padding: 10px; /* Espaçamento interno */
    box-sizing: border-box;
}

.grid-item img,
.grid-item-brasil img {
    max-width: 75%; /* Reduzido um pouco para mais respiro */
    max-height: 75%;/* Reduzido um pouco para mais respiro */
    object-fit: contain;
    opacity: 0.6; /* Opacidade base um pouco maior */
    transition: opacity 0.3s ease, transform 0.3s ease; /* Adicionada transição de transform aqui */
}

.grid-item-brasil img {
    opacity: 1; /* Imagem do Brasil sempre com opacidade total */
}

/* .grid-item img:hover foi movido para .logo-wrapper:hover img para melhor controle com a legenda */


/* Estilos para .casos-sucesso-titulo e .casos-sucesso-logo (mantidos caso você os adicione ao HTML) */
/*
.casos-sucesso-titulo {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    font-size: clamp(24px, 4vh, 36px);
    color: #f6f6f6;
    text-align: center;
    margin: 2vh 0;
}

.casos-sucesso-logo {
    width: auto;
    height: 10vh;
    max-height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
*/

@media screen and (max-width: 1024px) {
    .grid-container {
        grid-template-columns: repeat(3, 1fr); /* 3 colunas */
        grid-template-rows: repeat(3, auto);    /* Ajusta para 3 linhas se necessário (7 logos + 1 brasil = 8) */
        gap: 15px;
    }
    .logo-caption {
        bottom: -5px;
    }
}

@media screen and (max-width: 768px) {
    .sexta-secao {
        padding: 6vh 15px;
    }
    .background {
        filter: blur(80px); /* Reduz o blur */
        width: clamp(300px, 120vw, 1000px); /* Ajusta o tamanho para telas médias */
        height: clamp(300px, 120vh, 800px);
    }

    .grid-container {
        grid-template-columns: repeat(2, 1fr); /* 2 colunas */
        grid-template-rows: repeat(4, auto);    /* 4 linhas */
        /* aspect-ratio: 1 / 2; */ /* Removido conforme sugestão */
        gap: 15px;
    }

    .logo-wrapper {
        padding-bottom: 20px; /* Menos espaço para a legenda */
    }
    .logo-caption {
        font-size: clamp(9px, 1.8vw, 11px);
        transform: translateX(-50%) translateY(5px);
    }
    .logo-wrapper:hover .logo-caption {
        transform: translateX(-50%) translateY(-10px);
    }
    .logo-wrapper:hover img {
        transform: translateY(-8px);
    }

    /* Estilos para .casos-sucesso-titulo e .casos-sucesso-logo (se usados) */
    /*
    .casos-sucesso-titulo {
        font-size: clamp(22px, 3.5vh, 32px);
        margin-top: 60px; // Ajustado
    }

    .casos-sucesso-logo {
        height: 7vh;
        max-height: 50px; // Ajustado
    }
    */
}

@media screen and (max-width: 480px) {
    .sexta-secao {
        padding: 4vh 10px; /* Padding ainda menor */
        min-height: auto; /* Permite que a altura seja determinada pelo conteúdo */
    }
    .background {
        filter: blur(60px); /* Blur ainda menor */
        width: 150vw; /* Pode precisar ser maior para cobrir mesmo com menos blur */
        height: 150vh;
    }

    .grid-container {
        width: 100%; /* Ocupa toda a largura menos o padding da .sexta-secao */
        grid-template-columns: repeat(2, 1fr); /* Mantém 2 colunas ou muda para 1 se preferir */
        grid-template-rows: repeat(4, auto);    /* Ajusta conforme o número de itens e colunas */
        gap: 10px; /* Gap menor */
    }

    .grid-item img,
    .grid-item-brasil img {
        max-width: 80%; /* Reafirma ou ajusta se necessário */
        max-height: 80%;
    }
    .logo-wrapper {
        padding-bottom: 15px;
    }
    .logo-caption {
        font-size: clamp(8px, 2vw, 10px); /* Legenda bem pequena */
        max-width: 95%;
        transform: translateX(-50%) translateY(2px);
        line-height: 1.2;
    }
    .logo-wrapper:hover .logo-caption {
        transform: translateX(-50%) translateY(-5px); /* Movimento sutil */
    }
    .logo-wrapper:hover img {
        transform: translateY(-5px); /* Movimento sutil */
    }

    /* Estilos para .casos-sucesso-titulo e .casos-sucesso-logo (se usados) */
    /*
    .casos-sucesso-titulo {
        font-size: clamp(20px, 3vh, 28px);
        margin-top: 40px;
    }

    .casos-sucesso-logo {
        height: 5vh;
        max-height: 40px;
    }
    */
}


/*Sétima Seção*/

.setima-secao {
    background-color: #060916;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 40px 0;
    box-sizing: border-box;
    padding-top: 10%;
    padding-bottom: 10%;
    display: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.card-container {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.casos-sucesso-titulo {
    font-family: 'unica one', sans-serif;
    font-weight: 900;
    font-size: 3rem;
    color: #f6f6f6;
    text-align: center;
    margin-bottom: 20px;
}

.casos-sucesso-logo {
    width: auto;
    height: 10vh;
    max-height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto 30px;
}


.caso-sucesso-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
}

.card-setima-secao {
    background-color: #f6f6f6;
    border-radius: 50px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 30px;
    max-width: 900px;
    height: 650px;
    width: 100%;
    margin: 0 auto;
}

@media screen and (max-width: 768px) {
    .setima-secao {
        padding: 4vh 0;
    }

    .casos-sucesso-titulo {
        font-size: clamp(20px, 3.5vh, 30px);
    }

    .casos-sucesso-logo {
        height: 8vh;
        max-height: 60px;
    }

    .card-setima-secao {
        width: 90%;
        height: 50vh;
    }
}

@media screen and (max-width: 480px) {
    .setima-secao {
        padding: 3vh 0;
    }

    .casos-sucesso-titulo {
        font-size: clamp(18px, 3vh, 24px);
    }

    .casos-sucesso-logo {
        height: 6vh;
        max-height: 50px;
    }

    .card-setima-secao {
        width: 95%;
        height: 40vh;
        border-radius: 30px 150px 10px 150px;
    }
}

.card-header {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    padding: 15px;
    justify-content: space-between;
}

.empresa-info {
    display: flex;
    align-items: center;
}

.navigation-buttons2 {
    display: flex;
    flex-direction: row; /* Alterado de column para row */
    gap: 10px;
    justify-content: flex-end; /* Alinha os botões à direita */
}

.nav-button2 {
    background-color: #f0f0f0;
    border: none;
    border-radius: 50%;
    width: 60px; /* Reduzido para melhor se adequar ao layout horizontal */
    height: 60px; /* Reduzido para melhor se adequar ao layout horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.3s;
}


.nav-button2:hover {
    background-color: #e0e0e0;
}

.nav-button2 svg {
    width: 24px;
    height: 24px;
}


.empresa-logo-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    justify-content: center;
    align-items: center;
    background-color: transparent; /* Ajuste a cor de fundo conforme necessário */
    border: 2px solid #1D3557;
    margin-right: 15px;
    padding: 5px;
    flex-shrink: 0; /* Impede que o logo encolha */
}

.empresa-logo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.empresa-titulo {
    font-family: 'unica one', sans-serif;
    font-weight: 700;
    font-size: 2.5em;
    flex-grow: 1;
    color: #000000;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .card-header {
        flex-wrap: wrap;
    }

    .empresa-titulo {
        order: 2;
        width: 100%;
        text-align: center;
        margin: 10px 0;
    }

    .navigation-buttons {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 10px;
    }
}

.card-body {
    display: flex;
    justify-content: space-between;
}

.card-content {
    width: 60%;
    padding-right: 20px; /* Espaço entre o conteúdo e a imagem */
}

.progress-bar-container {
    width: 100%;
    height: 4px;
    background-color: #666;
    position: relative;
    margin-bottom: 10px;
}

.card-image-container {
    width: 40%;
    display: flex;
    flex-direction: column;
}

.progress-bars {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.progress-bar-background {
    width: 100%;
    height: 4px;
    background-color: #b1b1b1;
    margin: 0 5px;
}

.progress-bar {
    width: 100%;
    height: 4px;
    background-color: #060916;
    margin: 0 5px;
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.1s linear;
}

.progress-bar.active {
    background-color: #060916;
    margin: 0;
    padding:0 ;
}


.card-image {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
}

.card-image img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 15px;
}

.card-image img.active {
    opacity: 1;
}

.card-paragraph {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.2em; /* Reduzido um pouco para melhor ajuste */
    line-height: 1.6;
    color: #333;
    margin-bottom: 15px;
}

.card-subtitle {
    font-family: "unica one", sans-serif;
    font-size: 1.8em; /* Reduzido um pouco para melhor ajuste */
    font-weight: bold;
    color: #2c3e50;
    margin: 20px 0 10px;
}


/* Responsividade */
@media (max-width: 768px) {
    .card-body {
        flex-direction: column;
        max-height: none;
    }

    .card-paragraph {
        font-size: 0.9em;
    }

    .card-subtitle {
        font-size: 1em;
    }

    .card-content, .card-image {
        flex: none;
        width: 100%;
        max-width: 100%;
    }

    .card-image {
        height: 200px; /* Altura fixa para telas menores */
        margin-top: 20px;
    }

    .card-image img {
        max-height: 200px;
    }
}


.custom-shape-divider-top-1736530237 {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg); /* Adicione esta linha para inverter o SVG */
}

.custom-shape-divider-top-1736530237 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 150px;
}

.custom-shape-divider-top-1736530237 .shape-fill {
    fill: #060916;
}


/*Oitava Seção*/
.oitava-secao {
    background-color: #f6f6f6;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.oitava-secao .container {
    max-width: 800px;
    width: 100%;
    text-align: center;
    z-index: 2000;
}

.oitava-secao-titulo {
    font-family: 'unica one', sans-serif;
    color: #1D3557;
    font-weight: 900;
    font-size: 5em;
    margin-bottom: 30px;
    z-index: 2000;
}

.oitava-secao-texto {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 1.2em;
    line-height: 1.6;
    margin-bottom: 40px;
    z-index: 2000;
}

.botao-contato {
    display: inline-flex;
    align-items: center;
    padding: 15px 30px;
    background-color: #457B9D;
    color: #f6f6f6;
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    font-size: 1.2em;
    border-radius: 30px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.botao-contato:hover {
    background-color: #1D3557;
    transform: translateY(-2px);
}

.seta-saida {
    margin-left: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.seta-saida svg {
    width: 28px;
    height: 28px;
}

.botao-contato:hover .seta-saida {
    transform: translate(3px, -3px);
}

@media (max-width: 768px) {
    .oitava-secao-titulo {
        font-size: 2.5em;
    }

    .oitava-secao-texto {
        font-size: 1.1em;
    }

    .botao-contato {
        padding: 12px 24px;
        font-size: 1.1em;
    }
}

@media (max-width: 480px) {
    .oitava-secao-titulo {
        font-size: 2em;
    }

    .oitava-secao-texto {
        font-size: 1em;
    }

    .botao-contato {
        padding: 10px 20px;
        font-size: 1em;
    }

    .seta-saida svg {
        width: 24px;
        height: 24px;
    }
}

@media (max-height: 600px) {
    .oitava-secao {
        padding: 10px;
    }

    .oitava-secao-titulo {
        font-size: 2em;
        margin-bottom: 20px;
    }

    .oitava-secao-texto {
        font-size: 0.9em;
        margin-bottom: 30px;
    }

    .botao-contato {
        padding: 10px 20px;
        font-size: 0.9em;
    }
}

section.full-height-section .container {
    padding: 4rem;
    text-align: center;

}

.svg-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 80vh;
    }

     /* Somente o SVG com a classe .animado é animado */
    svg.animado path {
      fill: transparent;
      stroke: #000;
      stroke-width: 1;
      stroke-dasharray: 1000;
      stroke-dashoffset: 1000;
      transition: stroke-dashoffset 5s ease-in;
    }

    svg.animado.ativo path {
      stroke-dashoffset: 0;
    }

    #meu-svg-container {
        width: 70%;
        height: auto;
    }



/* Quarta Seção - CSS Base (Desktop) - MÁXIMA FIDELIDADE AO SEU ORIGINAL */
:root {
    --color-bg: #060619;
    --color-text: #ffffff;
}

.image-reveal {
    width: 100%;
    height: 670vh; /* Seu valor original para desktop */
    background: var(--color-bg);
    font-family: 'unica one', sans-serif;
    overflow-x: hidden; /* Mantido por segurança, geralmente não afeta layout se contido */
}

.image-reveal-header {
    width: 100%;
    height: 300px; /* Seu valor original */
    padding: 1em; /* Seu valor original */
    display: flex; /* Seu valor original */
    justify-content: center; /* Seu valor original */
    align-items: center; /* Seu valor original */
}

.image-reveal-header a {
    text-decoration: none; /* Seu valor original (extraído do aninhamento) */
}

.image-reveal-header p {
    font-size: 100px; /* Seu valor original */
    font-weight: 900; /* Seu valor original */
    color: white; /* Seu valor original */
    opacity: 0.5; /* Seu valor original */
    transition: opacity 0.6s ease; /* Seu valor original */
}

.image-reveal-header p:hover {
    opacity: 1; /* Seu valor original */
}

/* Texto normal abaixo/próximo da imagem. Corrigido typo .imge-reveal */
.image-reveal .row .img-container p {
    margin: 30px; /* Seu valor original */
    padding-left: 30px; /* Seu valor original */
    font-size: 14px; /* Seu valor original */
    font-weight: 400; /* Seu valor original */
    text-transform: uppercase; /* Seu valor original */
    color: var(--color-text); /* Usando sua variável */
    /* position: relative; do seu .img-container p - pode ser importante para GSAP */
    /* opacity: 1; (GSAP controla) */
    /* transition: opacity 0.3s, transform 0.3s; (GSAP controla) */
}

/* Texto principal/destacado */
.image-reveal .row .img-container p.principal {
    font-size: 35px; /* Seu valor original */
    color: #669BBC; /* Seu valor original */
    padding-left: 30px; /* Seu valor original */
    /* Outros estilos como margin podem ser herdados ou ajustados sutilmente se necessário */
    margin-top: 0; /* Resetando a margem do p normal se essa for mais específica */
    margin-bottom: 30px; /* Mantendo a margem inferior do p normal */
}

.image-reveal img {
    width: 100%; /* Seu valor original */
    height: 100%; /* Seu valor original */
    object-fit: cover; /* Seu valor original */
    display: block; /* Boa prática para imagens */
}

.image-reveal img:hover {
    filter: saturate(0); /* Seu valor original */
    transition: filter 0.5s ease; /* Seu valor original */
}

/* Container geral da seção .image-reveal */
.image-reveal .container {
    width: 100%; /* Seu CSS para .image-reveal.container tinha width e height 100% */
    /* height: 100%; */ /* A altura aqui é menos crítica, será definida pelo conteúdo e pelas rows */
    max-width: 1200px; /* Limita a largura em telas muito grandes */
    margin: 0 auto;    /* Centraliza */
    padding: 0 15px;   /* Espaçamento lateral seguro */
    box-sizing: border-box;
}

.row {
    width: 100%; /* Seu valor original */
    display: flex; /* Seu valor original */
    /* As alturas fixas por ID são mantidas para desktop */
}

.col {
    height: 100%; /* Seu valor original */
    /* Não vou adicionar display: flex aqui no base para evitar mudanças indesejadas */
}

.col:nth-child(1) {
    flex: 3; /* Seu valor original */
    display: flex; /* Você tinha display:flex aqui */
    justify-content: flex-end; /* Seu valor original */
}

.col:nth-child(2) {
    flex: 5; /* Seu valor original */
    /* Não vou adicionar display: flex aqui no base se não estava no seu original */
}

.img-container {
    width: fit-content; /* Seu valor original - MUITO IMPORTANTE */
    height: 100%; /* Seu valor original */
    position: relative; /* Para o texto ou outros elementos posicionados e para GSAP */
    /* Removi meus acréscimos de display:flex, flex-direction, align-items, justify-content e margin:0 auto
       para restaurar o comportamento original do desktop.
       O alinhamento da imagem e do texto dentro do img-container
       será mais dependente da estrutura interna e do `text-align` no texto.
    */
}

/* Alinhamento do texto dentro do img-container, baseado nas classes .left/.right do .img-container */
.img-container.left p, .img-container.left p.principal {
    text-align: left;
}

.img-container.right p, .img-container.right p.principal {
    text-align: right;
}


/* Alturas fixas para cada linha - Mantidas para desktop */
#row-1 { height: 250px; }
#row-2 { height: 500px; }
#row-3 { height: 150px; }
#row-4 { height: 400px; }
#row-5 { height: 700px; }
#row-6 { height: 400px; }
#row-7 { height: 200px; }
#row-8 { height: 600px; }
#row-9 { height: 300px; }
#row-10 { height: 400px; }

/* Clip-paths iniciais para a animação GSAP - Mantidos como no seu CSS */
.img-container.right img {
    clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0);
}

.img-container.left img {
    clip-path: polygon(0 0, 0 0, 0 0, 0 0);
}

.whitespace {
    width: 100%;
    height: 300px; /* Seu valor original */
}

/* --- Media Queries para Responsividade (Mantendo as lógicas que você gostou) --- */

@media screen and (max-width: 1024px) {
    .image-reveal {
        height: auto;
    }
    .image-reveal-header {
        height: auto;
        padding: 30px 1em;
    }
    .image-reveal-header p {
        font-size: 70px; /* Reduzido do original de 100px */
    }

    .row,
    #row-1, #row-2, #row-3, #row-4, #row-5,
    #row-6, #row-7, #row-8, #row-9, #row-10 {
        height: auto;
        min-height: 180px; /* Reduzido o min-height para mais flexibilidade */
        margin-bottom: 40px;
    }
    .row:last-of-type {
        margin-bottom: 0;
    }

    .image-reveal .row .img-container p {
        font-size: 13px;
        margin: 15px 0 0 0;
        padding-left: 0; /* Texto se alinha ao container */
    }
    .image-reveal .row .img-container p.principal {
        font-size: 28px;
        padding-left: 0;
    }

    .whitespace {
        height: 150px;
    }
}

@media screen and (max-width: 768px) {
    .image-reveal-header {
        padding: 20px 1em;
    }
    .image-reveal-header p {
        font-size: 45px;
    }

    .row {
        flex-direction: column;
        align-items: center; /* Centraliza a .col com conteúdo */
        margin-bottom: 30px; /* Espaçamento entre os itens empilhados */
    }

    .col {
        width: 100%;
        flex-basis: auto !important; /* Garante que o flex original não interfira */
        justify-content: center !important; /* Centraliza o .img-container */
        display: flex; /* Necessário para justify-content */
        margin-bottom: 10px; /* Pequeno espaço se houver texto abaixo da imagem e outra col. */
    }
     .col:last-child { /* Se a coluna for a última visível na "row" empilhada */
        margin-bottom: 0;
    }


    .row .col:empty {
        display: none;
    }

    .img-container {
        width: 80%; /* Imagem ocupa mais da tela */
        margin: 0 auto; /* Centraliza */
        height: auto; /* Altura determinada pela imagem e texto */
    }
    .img-container img {
        height: auto; /* MUITO IMPORTANTE para manter proporção quando a row tem height:auto */
    }

    .img-container.left p,
    .img-container.right p {
        text-align: center; /* Centraliza o texto abaixo da imagem */
        padding-left: 0;
        margin: 10px 0 0 0;
    }

    .image-reveal .row .img-container p.principal {
        font-size: 22px;
    }
    .image-reveal .row .img-container p {
        font-size: 12px;
    }

    .whitespace {
        height: 80px;
    }
}

@media screen and (max-width: 480px) {
    .image-reveal .container {
        padding: 0 10px;
    }
    .image-reveal-header p {
        font-size: 30px;
    }

    .row {
        margin-bottom: 25px;
    }
     .col {
        margin-bottom: 0; /* A margem agora é na .row */
    }

    .img-container {
        width: 90%;
    }
    .img-container p.principal {
        font-size: 18px;
    }
    .image-reveal .row .img-container p {
        font-size: 11px;
        margin-top: 8px;
    }
    .whitespace {
        height: 50px;
    }
}

@media (max-width: 768px) {

    .cursor {
        display: none;
    }
}

@media (max-width: 920px) {

    .cursor {
        display: none;
    }
}