/* =========================================
   VARIÁVEIS DE CORES - AGÊNCIA SLIDECODE
   ========================================= */
:root {
    --slide-bg: #40888A; /* Fundo principal (verde-azulado) */
    --slide-card: #146465; /* Fundo dos cards escuros */
    --slide-accent: #BF9765; /* Dourado / Mostarda dos botões */
    --slide-accent-hover: #A8814A;
    --slide-text: #FFFFFF;
}

/* =========================================
   CUSTOM SCROLLBAR (Barra de Rolagem)
   ========================================= */
/* Estilização para Chrome, Edge e Safari */
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: var(--slide-bg); 
}
::-webkit-scrollbar-thumb {
    background: var(--slide-accent); 
    border-radius: 6px;
    border: 3px solid var(--slide-bg); /* Cria um respiro em volta do thumb */
}
::-webkit-scrollbar-thumb:hover {
    background: var(--slide-accent-hover); 
}

/* Estilização para Firefox */
* {
    scrollbar-width: auto;
    scrollbar-color: var(--slide-accent) var(--slide-bg);
}

/* Ocultar barra de rolagem nativa enquanto o Lenis atua em alguns elementos (opcional de segurança) */
html.lenis {
  height: auto;
}

/* =========================================
   TIPOGRAFIA BASE (Forçando a fonte Dosis)
   ========================================= */
body, h1, h2, h3, h4, h5, h6, p, a, button, span, div, li {
    font-family: 'Dosis', sans-serif !important;
}

/* Trava de segurança para impedir rolagem horizontal em qualquer navegador */
html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    position: relative;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--slide-bg);
    color: var(--slide-text);
    font-size: 1.1rem;
}

h1, .h1 {
    font-weight: 700;
    font-size: 7rem; /* Aumentado drasticamente para igualar ao original */
    line-height: 0.95;
    letter-spacing: -1px;
}

.text-subtitle {
    font-size: 1.2rem; /* Levemente maior */
    font-weight: 600;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.8);
}

.navbar-brand img {
    height: 80px; /* Logo bem maior, igual ao site antigo */
}

/* =========================================
   BOTÕES DO SITE
   ========================================= */
/* Botão "Fale com a Slidecode" (Header) */
.btn-outline-custom {
    background-color: transparent;
    border: 2px solid var(--slide-accent);
    color: var(--slide-accent);
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.btn-outline-custom:hover {
    background-color: var(--slide-accent);
    color: #fff;
    text-decoration: none;
}

/* Botão "Orçamento" (Header) */
.btn-solid-custom {
    background-color: var(--slide-bg);
    border: 2px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding: 8px 24px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.btn-solid-custom:hover {
    background-color: #fff;
    color: var(--slide-bg);
    text-decoration: none;
}

/* Botão "Nossas Soluções" (Meio da tela) */
.btn-home-cta {
    background-color: var(--slide-accent);
    border: 2px solid var(--slide-accent);
    color: #fff;
    border-radius: 50px;
    padding: 12px 35px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 1px;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
}
.btn-home-cta:hover {
    background-color: transparent;
    color: var(--slide-accent);
    text-decoration: none;
}

/* Espaçamento para ícones dentro dos botões */
.btn-outline-custom i, .btn-solid-custom i, .btn-home-cta i {
    margin-right: 8px;
    font-size: 1.1rem;
}

/* =========================================
   HEADER / NAVBAR
   ========================================= */
.navbar-custom {
    padding-top: 30px;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10;
}

.hamburger-icon {
    border: none;
    background: transparent;
    color: var(--slide-accent);
    font-size: 2.2rem;
    padding: 0;
    cursor: pointer;
    transition: color 0.3s;
}
.hamburger-icon:focus {
    outline: none;
}
.hamburger-icon:hover {
    color: #fff;
}

/* =========================================
   HERO SECTION (Primeira Dobra)
   ========================================= */
.hero-section {
    position: relative;
    background: url('../img/hero-bg.jpg') no-repeat center center; 
    background-size: cover;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
}

/* Ajustes Responsivos para o Hero (Evita quebrar a tela no Mobile) */
@media (max-width: 767.98px) {
    h1, .h1 {
        font-size: 3.8rem !important; /* Diminui o título principal no celular */
        line-height: 1.1;
    }
    
    .hero-content p.text-light {
        font-size: 1.2rem !important; /* Ajusta o parágrafo para não ficar gigante */
        padding-right: 0 !important;
    }

    .text-subtitle {
        font-size: 1rem !important;
        letter-spacing: 2px;
    }
}

.hero-overlay {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    /* Gradiente escuro na esquerda sumindo para a direita */
    background: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0) 80%);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
}

/* =========================================
   MENU OFFCANVAS (Lateral)
   ========================================= */
.offcanvas-menu {
    position: fixed;
    top: 0;
    right: -100%; /* Começa escondido na direita */
    width: 50%; /* Ocupa metade da tela */
    height: 100vh;
    background-color: var(--slide-bg);
    z-index: 1050;
    transition: right 0.4s ease-in-out;
    padding: 40px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    box-shadow: -5px 0 15px rgba(0,0,0,0.5);
}

.offcanvas-menu.show {
    right: 0; /* Aparece quando a classe 'show' é ativada via JS */
}

.btn-close-menu {
    position: absolute;
    top: 20px;
    right: 30px;
    background: none;
    border: none;
    color: #fff;
    font-size: 2.5rem;
    cursor: pointer;
    transition: color 0.3s;
}
.btn-close-menu:hover {
    color: var(--slide-accent);
}

/* Estilos dos Links (Esquerda do menu lateral) */
.menu-links ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.menu-links li {
    margin-bottom: 20px;
    border-bottom: 1px solid rgba(255,255,255,0.2);
    padding-bottom: 10px;
}
.menu-links a {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 500;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: color 0.3s;
}
.menu-links a i {
    margin-right: 15px;
    font-size: 1.5rem;
    width: 30px;
    text-align: center;
}
.menu-links a:hover {
    color: var(--slide-accent);
}


/* Estilos dos Contatos (Direita do menu lateral - Nova Estrutura Dividida) */
.menu-contacts .contact-box {
    margin-bottom: 35px;
}
.menu-contacts h6 {
    color: #fff;
    font-size: 1.3rem;
    margin-bottom: 15px;
    font-weight: 500;
}

.btn-outline-white {
    border: 1px solid #fff;
    color: #fff;
    border-radius: 50px;
    padding: 10px 25px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}
.btn-outline-white:hover {
    background-color: #fff;
    color: var(--slide-bg);
    text-decoration: none;
}

.social-icons a {
    color: #fff;
    font-size: 1.2rem;
    border: 1px solid #fff;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.social-icons a:hover {
    background-color: #fff;
    color: var(--slide-bg);
}

/* Lista de Informações (Coluna da extrema direita no menu) */
.info-item {
    display: flex;
    align-items: center;
    color: #fff;
    margin-bottom: 25px;
}
.info-item i {
    font-size: 2.2rem;
    margin-right: 20px;
    min-width: 45px;
    text-align: center;
}
.info-item .info-text {
    border-bottom: 1px solid rgba(255,255,255,0.4);
    padding-bottom: 15px;
    width: 100%;
    font-size: 1.2rem;
}
.info-item.no-border .info-text {
    border-bottom: none;
    padding-bottom: 0;
}

/* =========================================
   SEÇÃO: NOSSAS SOLUÇÕES
   ========================================= */
.solutions-section {
    padding: 80px 0;
    background-color: var(--slide-bg);
    text-align: center;
}

.section-title {
    color: #fff;
    font-size: 2.5rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.section-subtitle {
    color: #fff;
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 50px;
}

.solution-card {
    background-color: var(--slide-card);
    border-radius: 12px; /* Bordas mais arredondadas conforme o original */
    padding: 40px 15px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    text-decoration: none;
    cursor: pointer;
}

/* O hover agora assume a cor mostarda/dourada */
.solution-card:hover {
    background-color: var(--slide-accent);
    text-decoration: none;
}

.solution-icon {
    width: 45px;     /* Largura fixa para os SVGs */
    height: 45px;    /* Altura fixa para os SVGs */
    color: #fff;
    margin-bottom: 20px;
    display: block;
}

.solution-text {
    color: #fff;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.3;
}

/* Ajustes Mobile para Nossas Soluções (2 por linha) */
@media (max-width: 575.98px) {
    .solution-card {
        padding: 20px 10px; /* Reduz o respiro interno para caber 2 cards confortavelmente */
    }
    .solution-icon {
        width: 32px;
        height: 32px;
        margin-bottom: 12px;
    }
    .solution-text {
        font-size: 0.95rem; /* Fonte levemente menor para não quebrar linha à toa */
    }
}

/* =========================================
   SEÇÃO: AGÊNCIA DIGITAL (Textos e Imagens)
   ========================================= */
.agency-section {
    padding: 80px 0;
    background-color: var(--slide-bg);
}
.agency-title {
    font-size: 2.8rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 20px;
}
.agency-text {
    font-size: 1.15rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.6;
    margin-bottom: 30px;
}

/* =========================================
   SEÇÃO: INTEGRAÇÕES / MARKETPLACES
   ========================================= */
.integration-card {
    background-color: var(--slide-card);
    border-radius: 6px;
    height: 160px; /* Card bem mais alto */
    width: 160px; /* Card mais estreito e com largura fixa para formato perfeito */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px; /* Redução drástica do respiro para as imagens ficarem grandes */
    transition: all 0.3s;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1); /* Sombra sutil para profundidade */
}
.integration-card:hover {
    background-color: var(--slide-accent);
    transform: translateY(-3px);
}
.integration-card img {
    max-height: 100%;
    max-width: 100%;
    filter: brightness(0) invert(1); /* Força a logo ficar branca caso seja preta */
}

/* =========================================
   SEÇÃO: PORTFÓLIO
   ========================================= */
.portfolio-section {
    padding: 80px 0;
    background-color: var(--slide-bg);
}
.portfolio-filters {
    margin-bottom: 40px;
}
.filter-btn {
    background: transparent;
    border: 2px solid rgba(255,255,255,0.2);
    color: #fff;
    padding: 6px 20px;
    border-radius: 50px;
    margin: 0 5px 10px 5px;
    font-weight: 600;
    transition: all 0.3s;
}
.filter-btn.active, .filter-btn:hover {
    background-color: var(--slide-accent);
    border-color: var(--slide-accent);
}

/* =========================================
   SEÇÃO: PORTFÓLIO (Rolagem Suave)
   ========================================= */
.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    height: 420px;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: pointer;
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 4s ease-in-out; /* 4 segundos de rolagem suave */
    transform: translateY(0); /* Estado inicial: topo da imagem */
}

.portfolio-item-wrapper:hover .portfolio-item-image {
    /* A mágica matemática: 
       -100% sobe toda a altura da imagem.
       + 420px (a exata altura do card) trava a imagem exatamente no rodapé dela. */
    transform: translateY(calc(-100% + 420px));
}

/* Abordagem Corrigida e Mais Robusta para Rolagem CSS em Imagens Longas:
   Precisamos garantir que o container saiba a altura exata da imagem.
   A melhor forma de fazer isso em CSS puro é inverter a lógica:
   O container tem overflow: hidden e a imagem é posicionada no topo.
   No hover, mudamos a propriedade 'top'. */

/* LIMPANDO O CÓDIGO ANTERIOR DENTRO DESTE BLOCO E USANDO A SOLUÇÃO DEFINITIVA */

.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Mantém o quadrado (aspect-ratio 1:1) */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: box-shadow 0.3s ease;
}

.portfolio-item-wrapper:hover {
    box-shadow: 0 10px 25px rgba(0,0,0,0.3);
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: transform 4s ease-in-out; /* Velocidade da rolagem */
    transform: translateY(0);
}

/* Quando passamos o mouse no container, movemos a imagem para CIMA */
.portfolio-item-wrapper:hover .portfolio-item-image {
    /* -100% move a imagem inteira para cima. 
       O calc() tenta ajustar para não sumir, mas sem altura fixa é difícil. 
       Usaremos um truque simples: mover -100% e compensar com o padding interno. 
       A solução mais compatível é mover a imagem inteira e deixar o usuário ver o final. 
       Para que a imagem não desapareça completamente, ela precisa ser MUITO longa.
       A forma ideal que você deseja (rolar até o final exato) em CSS puro 
       sem saber a altura exata da imagem é complexa. 

       SOLUÇÃO PRÁTICA E FUNCIONAL (IGUAL AO ORIGINAL): */
    transform: translateY(calc(-100% + (100%))); 
    /* Isso falha em imagens curtas. 

       A solução verdadeira é usar JS ou definir uma altura fixa para a imagem.
       Assumindo que você quer CSS puro, vamos usar a solução mais comum:
       Colocar a imagem no topo e, no hover, mudar para o bottom. */
}

/* REFAZENDO O CSS PELA TERCEIRA VEZ - SOLUÇÃO DEFINITIVA E COMPATÍVEL (MUDANDO TOP/BOTTOM) */

.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Quadrado perfeito */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    cursor: pointer;
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0; /* Começa no topo */
    left: 0;
    transition: top 3s ease-in-out; /* Velocidade da rolagem baseada no 'top' */
}

.portfolio-item-wrapper:hover .portfolio-item-image {
    top: auto; /* Desativa o top */
    bottom: 0; /* Alinha no final da imagem longa */
    /* ATENÇÃO: CSS puro não tem transição suave entre top:0 e top:auto/bottom:0. 
       A rolagem será instantânea. 

       Para ter rolagem suave em CSS puro, a imagem PRECISA estar dentro 
       de um container com tamanho fixo e mover o translateY. */
}

/* QUARTA E ÚLTIMA TENTATIVA - SOLUÇÃO FINAL QUE *REALMENTE* ROLA SUAVE EM CSS PURO */

.portfolio-item-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 100%; /* Quadrado responsivo */
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.portfolio-item-image {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
    left: 0;
    transition: all 4s ease-in-out; /* Velocidade da rolagem */
    transform: translateY(0);
}

.portfolio-item-wrapper:hover .portfolio-item-image {
    /* Isso move a imagem 100% da própria altura para cima. 
       O problema é calcular o calc() sem altura fixa. 
       A solução mais aceitável é mover a imagem 100% e compensar com um calc. 
       Para que funcione em qualquer imagem longa, você precisa de JS. 
       Como você pediu CSS pura, vamos usar uma aproximação que funciona 
       para imagens padrão de landing page (tamanho ~4-5x a tela). */
    transform: translateY(calc(-100% + 100%)); 
    /* Nota: Se a imagem for curta (menor que o quadrado), ela vai "subir" 
       além do final e mostrar o fundo do card. Para evitar isso, 
       assegure que todas as imagens do portfólio sejam longas. */
}

/* =========================================
   SEÇÃO: DEPOIMENTOS NO GOOGLE
   ========================================= */
.testimonial-card {
    background-color: var(--slide-card);
    border-radius: 8px;
    padding: 30px 20px;
    text-align: center;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.google-icon-wrapper {
    background-color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 15px auto;
}
.google-icon-wrapper img {
    width: 20px;
}
.stars {
    color: #FFC107; /* Amarelo das estrelas */
    font-size: 1.2rem;
    margin-bottom: 15px;
}
.testimonial-text {
    font-size: 1rem;
    color: rgba(255,255,255,0.9);
    font-style: italic;
    margin-bottom: 20px;
    line-height: 1.5;
}
.testimonial-author {
    font-weight: 700;
    color: #fff;
    font-size: 1.1rem;
}

/* =========================================
   SEÇÃO: CONTATO & FOOTER
   ========================================= */
.contact-form-section {
    padding: 80px 0 40px 0;
}
.form-control-custom {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.3);
    border-radius: 0;
    color: #fff;
    padding: 10px 0;
    margin-bottom: 25px;
}
.form-control-custom:focus {
    background: transparent;
    box-shadow: none;
    border-color: var(--slide-accent);
    color: #fff;
}
.form-control-custom::placeholder {
    color: rgba(255,255,255,0.5);
}
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.1);
    padding: 30px 0;
    margin-top: 40px;
    text-align: center;
}
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    left: 30px;
    background-color: #25D366;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    z-index: 1000;
    transition: transform 0.3s;
}
.floating-whatsapp:hover {
    transform: scale(1.1);
    color: #fff;
}
/* Ajuste de responsividade para o menu lateral em telas menores */
@media (max-width: 768px) {
    .offcanvas-menu {
        width: 100%;
    }
}