/* --- 1. Variáveis de Cores (A Paleta que você enviou) --- */
:root {
    --bg-light: #f1ebdc;
    /* Fundo principal claro */
    --bg-darker: #ddd6c7;
    /* Fundo secundário / Destaques suaves */

    --detail-1: #d7c7b7;
    /* Detalhe 1 */
    --detail-2: #ebe0d4;
    /* Detalhe 2 */
    --detail-3: #e5dbce;
    /* Detalhe 3 */

    --text-highlight: #765946;
    /* Marrom claro para botões/destaques */
    --text-dark: #7a4900;
    /* Marrom mais escuro para o texto lido */

    --font-title: 'Kulachat', serif;
    /* Fonte com serifa (elegante) */
    --font-text: 'Lato', sans-serif;
    /* Fonte sem serifa (leitura fácil) */
}

/* --- 2. Estilos Globais --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    max-width: 100vw;
    /* Garante que o tamanho dos elementos seja calculado corretamente */
}

body {
    font-family: var(--font-text);
    background-color: var(--bg-light);
    /* Aplicando o seu fundo */
    color: var(--text-dark);
    /* Aplicando a cor da fonte */
    line-height: 1.6;
}

/* --- 3. Cabeçalho (Header) e Menu --- */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 5%;
    background-color: transparent;
    position: fixed;
    /* Deixa o menu preso no topo */
    width: 100%;
    top: 0;
    z-index: 100;
    transition: background-color 0.3s ease;
    /* Animação suave para a cor */
}

/* Essa classe será adicionada pelo JavaScript quando rolarmos a tela */
header.scrolled {
    background-color: var(--bg-darker);
    box-shadow: 0 2px 10px rgba(122, 73, 0, 0.1);
    /* Uma sombrinha marrom bem fraca */
}

.logo {
    font-family: var(--font-title);
    font-size: 28px;
    font-weight: 600;
    color: var(--text-highlight);
}

nav ul {
    list-style: none;
    display: flex;
    gap: 20px;
    align-items: center;
}

nav a {
    text-decoration: none;
    color: var(--text-dark);
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: color 0.3s;
}

nav a:hover {
    color: var(--text-highlight);
}

/* --- 4. Seção Home (Hero) --- */
.hero {
    min-height: 100vh;
    /* Ocupa 100% da altura da tela */
    padding: 0;
    /* O espaço extra no topo é para não ficar atrás do menu fixo */
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--detail-2) 100%);
}

.home-div {
    display: flex;
    justify-content: space-between;
}

.text-home {
    font-family: var(--font-title);
    font-size: 2rem;
    line-height: 1.1;
    margin-bottom: 25px;
    color: var(--text-highlight);
}

.subtitle {
    font-size: 1.1rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.supporting-text {
    margin-bottom: 30px;
    font-size: 1.05rem;
}

.cta-note {
    font-size: 0.9rem;
    font-style: italic;
    margin-bottom: 15px;
    color: var(--text-highlight);
}

/*BOTÃO PRIMÁRIO (GHOST COM ONDA LÍQUIDA)
   ============================================================ */
.btn-primary {
    display: inline-block;
    padding: 15px 35px;
    /* Tamanho confortável para clique */
    font-family: var(--font-text);
    font-size: 1.1rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    /* border-radius: 50px; */
    cursor: pointer;

    /* Visual "Clean": Sem fundo, borda fina e texto escuro */
    background-color: transparent;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);

    /* Preparação para a animação da onda */
    position: relative;
    overflow: hidden;
    /* Corta a onda para ela não vazar do botão */
    z-index: 1;
    /* Garante que o texto fique sempre na frente */
    transition: color 0.3s ease-out;
    /* Transição rápida para a cor do texto */
}

/* O elemento da "Onda" escondido */
.btn-primary::before {
    content: "";
    position: absolute;
    top: 100%;
    /* Começa exatamente abaixo do botão */
    left: 50%;
    width: 300%;
    /* Maior que o botão para cobrir os cantos ao subir */
    height: 300%;
    background-color: var(--text-dark);
    /* Cor da onda */
    border-radius: 50%;
    /* Formato redondo para simular o líquido */
    transform: translate(-50%, 0);
    z-index: -1;
    /* Fica atrás do texto */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    /* Animação rápida e fluida */
}

/* O que acontece ao passar o mouse (Hover) */
.btn-primary:hover {
    color: var(--bg-light);
    /* O texto fica claro para dar contraste em cima da onda escura */
    border-color: var(--text-dark);
}

/* A onda subindo */
.btn-primary:hover::before {
    transform: translate(-50%, -50%);
    /* A onda sobe até o meio do botão, preenchendo tudo */
}

/* --- 5. O Desenho da Imagem (Baseado nas suas referências) --- */
.hero-image-placeholder {
    width: 45%;
    display: flex;
    justify-content: center;
}

/* Criei um formato de arco, igual ao site de referência da Spark! */
.image-arch {
    width: 350px;
    height: 500px;
    background-color: var(--detail-1);
    /* Um dos seus tons para testarmos */
    border-top-left-radius: 175px;
    /* Metade da largura para criar o arco perfeito */
    border-top-right-radius: 175px;
    box-shadow: 0 15px 30px rgba(122, 73, 0, 0.15);
}

/* --- 6. Seção de Serviços --- */
.services-section {
    padding: 100px 5%;
    background-color: var(--bg-light);
    /* Fundo claro da paleta */
}

/* Centraliza o texto de introdução */
.section-header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px;
    /* Centraliza a div e dá um espaço embaixo */
}

.section-header h2 {
    font-family: var(--font-title);
    font-size: 2.8rem;
    color: var(--text-highlight);
    margin-bottom: 20px;
}

/* O Segredo do Grid: Auto-ajustável! */
.services-grid {
    display: grid;
    /* Isso cria colunas flexíveis. Mínimo de 300px, máximo de 1 fração (igualmente divididas) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    /* Espaço entre os cartões */
}

/* O visual de cada cartão */
.service-card {
    background-color: var(--bg-darker);
    /* Fundo um tom acima para destacar */
    padding: 40px 30px;
    border-radius: 15px;
    /* Cantos arredondados */
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    /* Animação suave */
    cursor: pointer;
}

/* Efeito ao passar o mouse por cima do cartão */
.service-card:hover {
    transform: translateY(-10px);
    /* Sobe um pouquinho */
    box-shadow: 0 15px 30px rgba(122, 73, 0, 0.1);
    /* Cria uma sombra elegante */
}

.service-image {
    width: 100%;
    height: 200px;
    background-color: var(--detail-1);
    /* Fundo caso a imagem demore a carregar */
    border-radius: 15px;
    margin-bottom: 25px;
    position: relative;
    /* Transforma a caixa num 'palco' para as imagens absolutas */
    overflow: hidden;
    /* Corta qualquer ponta da imagem que saia da caixa */
}

/* O visual de cada foto dentro do cartão */
.service-slide {
    position: absolute;
    /* Coloca uma foto exatamente em cima da outra */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Garante que a foto preencha o espaço sem amassar */
    opacity: 0;
    /* Começam invisíveis */
    transition: opacity 1s ease-in-out;
    /* O segredo do crossfade: transição suave de 1 segundo */
}

/* Apenas a foto que tiver essa classe aparecerá */
.service-slide.active {
    opacity: 1;
}

.service-card h3 {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--text-highlight);
    margin-bottom: 15px;
}

.service-card p {
    font-size: 0.95rem;
}

/* --- 7. Classes Auxiliares de Fundo --- */
.section-light {
    padding: 100px 5%;
    background-color: var(--bg-light);
}

.section-dark {
    padding: 100px 5%;
    background-color: var(--bg-darker);
}

/* Nossa nova classe com a imagem de fundo */
.section-custom {
    padding: 100px 5%;
    background-image: url('images/fundo.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

/* --- 8. Seção Why Us (Cartões de Vidro) --- */
.why-us-creative-grid {
    display: grid;
    /* Cria colunas automáticas. No PC ficam 3 por linha, no celular 1 por linha */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    max-width: 1100px;
    margin: 0 auto;
}

/* O Cartão Translúcido (Glassmorphism) */
.why-card {
    background: rgba(250, 250, 250, 0.85);
    /* Fundo branco quase transparente */
    backdrop-filter: blur(8px);
    /* Desfoca a imagem de fundo que passa por trás */
    -webkit-backdrop-filter: blur(8px);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* Bordinha de vidro reflexivo */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Efeito ao passar o mouse */
.why-card:hover {
    transform: translateY(-8px);
    /* O cartão levanta */
    background: rgba(250, 250, 250, 1);
    /* Fica totalmente sólido */
}

/* A Numeração Editorial (01, 02...) */
.why-number {
    font-family: var(--font-title);
    font-size: 2.5rem;
    line-height: 1;
    font-weight: bold;
    color: var(--text-highlight);
    opacity: 0.4;
    /* Fica como uma marca d'água charmosa */
}

.why-card p {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    padding-top: 5px;
    /* Alinha o texto com o meio do número */
}

/* --- 9. Seção Results --- */
.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 40px;
    align-items: stretch;
    /* Garante que todos os cartões estiquem para ter a mesma altura da linha */
}

.result-card {
    background-color: var(--detail-2);
    display: flex;
    flex-direction: column;
    /* Removemos o max-height para o cartão poder crescer naturalmente */
    height: 100%;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    /* Sombreado leve extra para ficar elegante */
}

/* O segredo do alinhamento das imagens */
.result-card img {
    width: 100%;
    height: 150px;
    /* Altura exata e igual para todas as imagens */
    object-fit: contain;
    /* Encaixa o logo sem amassar ou cortar */
    object-position: left center;
    /* Mantém os logos alinhados à esquerda (mude para 'center' se preferir no meio) */
    margin-bottom: 30px;
    /* Empurra o H1 sempre a partir do mesmo ponto */
}

.result-card h1 {
    font-family: var(--font-title);
    text-transform: uppercase;
    color: var(--text-highlight);
    font-size: 2.8rem;
    line-height: 1;
    margin-top: 0;
    margin-bottom: 15px;
}

.result-card ul {
    /* Mudamos de 'inside' para 'outside' */
    list-style-position: outside;

    color: var(--text-dark);
    margin: 0;

    /* Trocamos o padding: 0 por um padding à esquerda para caber os pontinhos */
    padding-left: 18px;

    flex-grow: 1;
}

.result-card ul li {
    margin-bottom: 8px;
    line-height: 1.4;
    /* Adicionamos um pequeno espaçamento entre o pontinho e o texto */
    padding-left: 5px;
}

/* --- 10. Seção Portfolio --- */
.portfolio-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 40px;
}

/* --- 11. Seção Contact --- */
.contact-content {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    background-color: var(--detail-3);
    padding: 60px 40px;
    border-radius: 20px;
}

.contact-content h2 {
    font-family: var(--font-title);
    font-size: 2.5rem;
    color: var(--text-highlight);
    margin-bottom: 20px;
}

/* --- 12. Janela Flutuante de Agendamento (Modal) --- */
.modal {
    display: none;
    /* Começa escondida */
    position: fixed;
    /* Fica travada na tela */
    z-index: 1000;
    /* Fica por cima de absolutamente tudo */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    /* Fundo preto meio transparente */
    backdrop-filter: blur(5px);
    /* Dá aquele efeito de desfoque moderno no fundo */

    /* Centraliza o conteúdo */
    align-items: center;
    justify-content: center;
}

/* A caixa branca dentro da modal */
.modal-content {
    background-color: #fafafa;
    width: 90%;
    max-width: 1000px;
    /* Largura máxima para não ficar gigante em monitores grandes */
    height: 95vh;
    border-radius: 15px;
    position: relative;
    /* Para o botão de fechar se alinhar por essa caixa */
    padding: 60px 40px 40px;
    box-shadow: 0 25px 50px rgba(122, 73, 0, 0.2);
}

/* O botão de fechar (Aquele X no canto) */
.close-btn {
    position: absolute;
    top: 10px;
    right: 20px;
    color: var(--text-dark);
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s;
}

.close-btn:hover {
    color: var(--text-highlight);
}

/* --- Carrossel Estilo Instagram --- */
/* Wrapper Principal da Seção - Base Mobile (Coluna) */
.portfolio-section-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* Centraliza tudo horizontalmente */
    width: 100%;
    padding: 100px 5% 50px;
}

/* --- Título/Logo (Dudat.) --- */
.about-title {
    /* Diminui automaticamente no celular */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    color: var(--text-dark);
    font-family: var(--font-title);

    /* Posicionamento Normal (não absoluto) */
    text-align: center;
    margin-bottom: 40px;
    /* Espaço fixo entre o logo e o carrossel/conteúdo */
    z-index: 10;
    white-space: nowrap;
    pointer-events: none;

    /* Efeito de Transparência que você gosta */
    /* -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 90%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 40%, rgba(0, 0, 0, 0) 90%); */
}

/* --- O Grid de Conteúdo (Carrossel + Texto) --- */
.portfolio-content-grid {
    display: flex;
    flex-direction: column;
    /* Padrão Mobile: Um embaixo do outro */
    align-items: center;
    width: 100%;
    gap: 30px;
    /* Espaço entre carrossel e texto no mobile */
}

/* --- O Container do Carrossel (Estilo Instagram Mantido) --- */
.carousel-container {
    width: 100%;
    max-width: 450px;
    /* Largura máxima controlada */
    aspect-ratio: 4 / 5;
    /* Proporção Insta Vertical */
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    background-color: #fff;
    /* Fundo interno caso a imagem demore a carregar */
}

/* Mantenha o restante do CSS do carrossel que criamos anteriormente:
   .carousel-track, .card, .card img, .nav-arrow, .dots, .dot, etc. 
   Eles já estão funcionando perfeitamente dentro do container. */

/* --- Área de Texto Dinâmico --- */
.image-info {
    text-align: center;
    width: 100%;
    max-width: 450px;
    /* Mesma largura do carrossel no mobile */
}

.image-name {
    color: var(--text-dark);
    font-size: 2.2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.image-desc {
    color: var(--text-highlight);
    font-size: 1.1rem;
    line-height: 1.5;
}

/* ============================================================
   MEDIA QUERY: DESKTOP (Telas maiores que 1024px)
   ============================================================ */
@media (min-width: 1024px) {

    .services-section {
        padding: 100px 16%;
    }

    /* O Segredo do Grid: Auto-ajustável! */
    .services-grid {
        display: grid;
        /* Isso cria colunas flexíveis. Mínimo de 300px, máximo de 1 fração (igualmente divididas) */
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 40px;
        /* Espaço entre os cartões */
    }

    /* O visual de cada cartão */
    .service-card {
        background-color: var(--bg-darker);
        /* Fundo um tom acima para destacar */
        padding: 40px 30px;
        border-radius: 15px;
        /* Cantos arredondados */
        text-align: center;
        transition: transform 0.3s, box-shadow 0.3s;
        /* Animação suave */
        cursor: pointer;
    }

    /* O wrapper muda para usar Grid e alinhar a logo ao centro */
    .portfolio-section-wrapper {
        display: grid;
        grid-template-columns: 1fr;
        /* Uma coluna principal para o Grid de Conteúdo */
        justify-items: center;
        padding-top: 60px;
    }

    /* A Logo continua no topo, centralizada no Grid principal */
    .about-title {
        margin-bottom: 60px;
        /* Mais espaço no desktop */
    }

    /* O container de conteúdo vira um GRID de 2 colunas lado-a-lado */
    .portfolio-content-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* Duas colunas iguais */
        gap: 320px;
        /* Espaço maior entre carrossel e texto */
        max-width: 1200px;
        /* Largura máxima da seção no desktop */
        width: 100%;
        align-items: start;
        /* Alinha o topo do carrossel com o topo do texto */
    }

    /* Carrossel na Esquerda */
    .carousel-container {
        grid-column: 1;
        /* Coluna 1 */
        justify-self: end;
        /* Gruda na direita da sua coluna (encostando no centro) */
    }

    /* Texto na Direita */
    .image-info {
        grid-column: 2;
        /* Coluna 2 */
        text-align: left;
        /* No desktop, alinhamos o texto à esquerda para elegância */
        justify-self: start;
        /* Gruda na esquerda da sua coluna (encostando no centro) */
        padding-top: 20px;
        /* Ajuste fino para alinhar com o topo da primeira imagem */
    }
}

/* O "Trilho" flexível onde as fotos correm */
.carousel-track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease-out;
}

/* Cada cartão garante que vai ocupar 100% da caixa */
.card {
    flex: 0 0 100%;
    height: 100%;
}

.card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}

/* --- Setas (Arrows) --- */
.nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 255, 255, 0.85);
    color: #333;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    z-index: 10;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    transition: background-color 0.2s, opacity 0.2s;
}

.nav-arrow:hover {
    background-color: rgba(255, 255, 255, 1);
}

.nav-arrow.left {
    left: 10px;
}

.nav-arrow.right {
    right: 10px;
}

.nav-arrow.hidden {
    display: none;
}

/* --- Pontinhos (Dots) --- */
.dots {
    position: absolute;
    bottom: 15px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 6px;
    z-index: 10;
    pointer-events: none;
}

.dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4);
    transition: background-color 0.3s ease;
}

.dot.active {
    background-color: rgba(255, 255, 255, 1);
}

/* ============================================================
   MENU MOBILE (HAMBÚRGUER)
   ============================================================ */

/* 1. Estilo do Botão (Escondido por padrão no Desktop) */
.menu-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 101;
    /* Garante que fique acima de tudo, inclusive do próprio menu aberto */
}

/* 2. As três barrinhas do botão */
.bar {
    width: 30px;
    height: 3px;
    background-color: var(--text-dark);
    border-radius: 3px;
    transition: all 0.3s ease-in-out;
    /* Animação suave para quando virar um X */
}

/* ============================================================
   MEDIA QUERY: TELAS PEQUENAS (Celulares e Tablets menores que 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* Mostra o botão hambúrguer */
    .menu-toggle {
        display: flex;
    }

    /* Esconde e estiliza a lista de links para o formato gaveta */
    #nav-list {
        position: absolute;
        top: 100%;
        /* Posiciona exatamente abaixo da barra do header */
        left: 0;
        width: 100%;
        background-color: var(--bg-darker);
        flex-direction: column;
        /* Coloca um link embaixo do outro */
        padding: 20px 0;
        box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);

        /* Truque para esconder com animação */
        clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
        /* Gaveta fechada */
        transition: clip-path 0.4s ease-in-out;
    }

    /* Classe que o JavaScript vai adicionar para abrir a gaveta */
    #nav-list.active {
        clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
        /* Gaveta aberta */
    }

    /* Ajusta os links para ficarem maiores e mais fáceis de tocar no celular */
    #nav-list li {
        margin: 15px 0;
    }

    /* --- ANIMAÇÃO DO BOTÃO VIRANDO "X" --- */
    /* Quando o botão ganha a classe 'active', giramos a primeira e a última barra, e apagamos a do meio */
    .menu-toggle.active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }

    .menu-toggle.active .bar:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }
}

/* ============================================================
   AÇÕES LEGAIS (INTERAÇÕES E ANIMAÇÕES)
   ============================================================ */

/* --- 1. Texto Dinâmico Rotativo --- */
.rotating-text {
    display: inline-block;
    color: var(--text-dark);
    /* Usa a cor mais escura para dar destaque à palavra */
    border-bottom: 3px solid var(--text-dark);
    /* Um sublinhado elegante */
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Classe que o JS vai colocar para esconder a palavra antes de trocar */
.rotating-text.hide {
    opacity: 0;
    transform: translateY(10px);
    /* Desce um pouquinho enquanto some */
}

/* --- 2. Aparecimento Suave ao Rolar (Fade-up) --- */
.fade-up {
    opacity: 0;
    transform: translateY(40px);
    /* Começa 40px mais para baixo */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    will-change: opacity, transform;
    /* Avisa o navegador para otimizar essa animação */
}

/* Classe que o JS vai colocar quando o elemento entrar na tela */
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
    /* Volta para a posição original */
}

/* Alinha o menu, ícone e hambúrguer na mesma linha */
.header-right {
    display: flex;
    align-items: center;
    gap: 30px;
}

/* O visual do botão do Instagram */
.nav-social-icon {
    color: var(--text-dark);
    /* Fica com a cor padrão do seu texto */
    display: flex;
    align-items: center;
    transition: color 0.3s ease, transform 0.2s ease;
}

/* Efeito ao passar o mouse */
.nav-social-icon:hover {
    color: var(--text-highlight);
    transform: scale(1.15);
    /* Dá um zoom elegante no ícone */
}

/* ============================================================
   AJUSTE DE RESPONSIVIDADE (MEDIA QUERY EXTRA)
   ============================================================ */
@media (max-width: 768px) {
    .h1-dudat {
        font-size: small;
        font-weight: 700;
    }

    /* No celular, reduzimos o espaço entre o Instagram e o botão hambúrguer */
    .header-right {
        gap: 20px;
    }
}

.about-content {
    max-width: 900px;
    margin: 0 auto;
    /* Fundo claro com 95% de opacidade */
    padding: 60px;
    border-radius: 20px;
    /* box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); */
}

.about-content h2 {
    font-family: var(--font-title);
    font-size: 3rem;
    color: var(--text-highlight);
    margin-bottom: 30px;
    text-align: center;
}

.about-content p {
    margin-bottom: 20px;
    font-size: 1.1rem;
    line-height: 1.8;
    color: var(--text-dark);
}

/* Título menor antes da lista */
.about-subtitle {
    font-family: var(--font-title);
    font-size: 1.8rem;
    color: var(--text-highlight);
    margin: 40px 0 20px;
    text-align: center;
}

/* Lista de serviços organizada em duas colunas (Grid) */
.about-services-list {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
    margin-bottom: 40px;
}

/* Estilo de cada item da lista com o pontinho customizado */
.about-services-list li {
    position: relative;
    padding-left: 25px;
    font-weight: 700;
    color: var(--text-dark);
}

.about-services-list li::before {
    content: '•';
    color: var(--text-highlight);
    position: absolute;
    left: 0;
    top: 0;
    font-size: 1.5rem;
    line-height: 1.2;
}

/* A frase final de impacto */
.about-content .about-conclusion {
    font-family: var(--font-title);
    font-size: 1.5rem;
    color: var(--text-highlight);
    text-align: center;
    margin-top: 30px;
    margin-bottom: 0;
}

/* Ajuste de responsividade para celulares */
@media (max-width: 768px) {
    .about-content {
        padding: 40px 20px;
    }

    .about-content h2 {
        font-size: 2.5rem;
    }
}

/* Container que organiza as Tags de forma flexível */
.about-services-tags {
    display: flex;
    flex-wrap: wrap;
    /* Permite que as tags pulem para a linha de baixo se não couberem */
    justify-content: center;
    /* Centraliza tudo de forma elegante */
    gap: 15px;
    /* O espaço certinho entre cada pílula */
    margin-bottom: 40px;
}

/* O visual de cada Tag (Pílula) */
.tag {
    background-color: transparent;
    border: 2px solid var(--text-highlight);
    /* Borda com a cor de destaque */
    color: var(--text-highlight);
    padding: 10px 25px;
    /* Espaço interno para não grudar no texto */
    border-radius: 50px;
    /* É aqui que a mágica da "pílula" acontece */
    font-size: 0.95rem;
    font-weight: bold;
    cursor: default;
    /* Cursor normal, pois não são botões clicáveis */
    transition: all 0.3s ease;
    /* Prepara para a animação suave */
}

/* Efeito interativo ao passar o mouse por cima */
.tag:hover {
    background-color: var(--text-highlight);
    color: var(--bg-light);
    /* O texto fica claro */
    transform: translateY(-4px);
    /* A pílula levanta um pouquinho */
    box-shadow: 0 8px 20px rgba(122, 73, 0, 0.15);
    /* Cria uma sombra charmosa */
}

/* ============================================================
   TELA DE CARREGAMENTO (SPLASH SCREEN) - MAIS RÁPIDA E COM IMAGEM
   ============================================================ */

.splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--text-dark);
    /* Fundo agora usa a cor escura */
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.4s ease-in-out, visibility 0.4s ease-in-out;
}

.splash-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

/* O estilo da nova Imagem */
.splash-logo-img {
    max-width: 250px;
    /* Define um tamanho base legal para a tela do PC */
    width: 60vw;
    /* E garante que não fique gigante no celular */
    height: auto;
    opacity: 0;
    animation: splashFadeIn 0.5s ease forwards;
    /* Entra em meio segundo */
}

/* O estilo e animação do Contador */
.splash-progress {
    font-family: var(--font-text);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--bg-darker);
    opacity: 0;
    /* O contador surge bem rápido, logo em seguida da logo */
    animation: splashFadeIn 0.4s ease 0.2s forwards;
}

/* A classe que o JavaScript vai adicionar para esconder a tela */
.splash-screen.hidden {
    opacity: 0;
    visibility: hidden;
}

/* A regra da animação de entrada */
@keyframes splashFadeIn {
    0% {
        opacity: 0;
        transform: translateY(15px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   IMAGENS SOBREPOSTAS (HOME)
   ============================================================ */
.hero-images-home-slider {
    position: relative;
    width: 100%;
    max-width: 450px;
    aspect-ratio: 4 / 5;
    /* Mantém a proporção chique */
    margin: 0 auto;
    border-radius: 15px;
    overflow: hidden;
    /* Garante que as fotos não vazem do arredondado */
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
}

/* Estilo base de cada slide (escondido por padrão) */
.home-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    /* Transição suave de 1.2 segundos */
}

/* O slide que estiver com a classe 'active' fica visível */
.home-slide.active {
    opacity: 1;
}

/* .img-overlay {
    width: 55%;
    Imagem um pouco menor 
    height: 70%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.2);
    position: absolute;
    bottom: 0;
    left: 0;
    Fixa embaixo e na esquerda, sobrepondo a outra
    border: 6px solid var(--bg-light); Bordinha na cor do fundo para separar perfeitamente as duas fotos
} */

/* ============================================================
   ANIMAÇÃO DESLIZANDO DA DIREITA
   ============================================================ */
.slide-in-right {
    opacity: 0;
    transform: translateX(150px);
    /* Vem de mais longe (era 100px) */
    /* Aumentamos para 1.5 segundos e usamos uma curva de aceleração bem elegante */
    transition: opacity 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: opacity, transform;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* main */
.title-page {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 80vw;
    padding: 48px;
}

@media (max-width: 768px) {
    .title-page {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100vw;
        padding: 8px;
    }
}

.h1-dudat {
    text-transform: uppercase;
}

.s-and-m {
    display: flex;
    align-items: center;
    gap: 14px;
    text-transform: uppercase;
}

/* ============================================================
   SEÇÃO WHY US (CARROSSEL INFINITO)
   ============================================================ */

.why-us-carousel-container {
    width: 100%;
    overflow: hidden;
    padding: 20px 0;
    position: relative;
    /* Efeito premium: Esfumaça as bordas direita e esquerda */
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

/* 1. O Trilho */
.why-us-carousel-track {
    display: flex;
    /* REMOVEMOS O GAP DAQUI */
    width: max-content;
    animation: infiniteScroll 40s linear infinite;
    /* Pode ajustar a velocidade aqui */
}

/* Interatividade: Pausa a animação quando o mouse passa por cima */
.why-us-carousel-track:hover {
    animation-play-state: paused;
}

/* 2. Os Cartões de Vidro */
.why-card {
    width: 320px;
    flex-shrink: 0;

    /* COLOCAMOS O ESPAÇO AQUI COMO MARGEM */
    margin-right: 25px;

    background: rgba(250, 250, 250, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 30px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.5);
    transition: transform 0.3s ease, background 0.3s ease;
}

.why-card:hover {
    transform: translateY(-8px);
    background: rgba(250, 250, 250, 1);
}

.why-card p {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-dark);
    margin: 0;
    width: 100%;
}

/* 3. A Animação Corrigida */
@keyframes infiniteScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        /* Como usamos margin-right, o cálculo agora é EXATAMENTE 50% sem quebrar */
        transform: translateX(-220%);
    }
}

@media (max-width: 768px) {
    @keyframes infiniteScroll {
        0% {
            transform: translateX(0);
        }

        100% {
            /* Como usamos margin-right, o cálculo agora é EXATAMENTE 50% sem quebrar */
            transform: translateX(-850%);
        }
    }

}