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

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden; 
    background-color: #000;
    font-family: 'Inter', -apple-system, sans-serif;
}

/* NAVBAR */
:root {
    --nav-bg: rgba(22, 22, 23, 0.8);
    --nav-text: #f5f5f7;
    --blue-apple: #0071e3;
}


/*==================NavBar===========================*/

    .navbar {
        position: fixed;
        top: 0;
        width: 100%;
        height: 48px; /* Altura padrão Apple */
        background: var(--nav-bg);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        z-index: 1000;
        display: flex;
        align-items: center;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .nav-container {
        max-width: 1000px;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
    }

    .nav-logo {
        color: var(--nav-text);
        text-decoration: none;
        font-size: 14px;
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .nav-menu {
        display: flex;
        list-style: none;
        gap: 30px;
        align-items: center;
    }

    .nav-link {
        color: var(--nav-text);
        text-decoration: none;
        font-size: 12px;
        opacity: 0.8;
        transition: opacity 0.3s;
    }

    .nav-link:hover {
        opacity: 1;
    }

    /* Botões de Ação */
    .nav-btns {
        display: flex;
        gap: 12px;
    }

    .btn-explorar, .btn-comprar {
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 11px;
        text-decoration: none;
        transition: 0.3s;
    }

    .btn-explorar {
        color: var(--nav-text);
        border: 1px solid rgba(255, 255, 255, 0.3);
    }

    .btn-comprar {
        background: var(--blue-apple);
        color: #fff;
    }

    /* Responsividade (Mobile) */
    .hamburger {
        display: none;
        cursor: pointer;
    }

    .bar {
        display: block;
        width: 20px;
        height: 1px;
        margin: 4px 0;
        background-color: var(--nav-text);
    }

    
/*==================Sessão 01========================*/
    
    /* Parte da imagem */

    .hero-mit {
        position: relative;
        /* Usamos min-height para garantir que preencha a tela toda */
        min-height: 100vh; 
        width: 100%;
        display: flex;
        align-items: flex-end;
        overflow: hidden;
        
        /* A mágica para não ter bordas: */
        background-image: 
            linear-gradient(to bottom, rgba(0,0,0,0) 50%, #000 100%), 
            url('../img/img01.jpg'); 
        background-size: cover; 
        background-position: center center;
        background-repeat: no-repeat;
    }

    .hero-mit-overlay {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        /* Gradiente para garantir leitura do texto branco */
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 50%, rgba(0,0,0,0) 100%);
        display: flex;
        align-items: flex-end;
    }

    .hero-mit-container {
        max-width: 90%;
        margin: 0 auto;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding: 0 10px;
        gap: 20px;
    }

    .hero-mit-content {
        max-width: 500px;
        color: #fff;
        margin-bottom: 10px;
        font-family: 'Inter', -apple-system, sans-serif;
    }

    .hero-mit-content h1 {
        font-size: 40px;
        font-weight: 700;
        line-height: 1.05;
        margin-bottom: 24px;
        letter-spacing: -1.5px;
    }

    .hero-mit-content p {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.85);
        margin-bottom: 35px;
        line-height: 1.4;
    }

    

    /* Card de Ação */
    .hero-mit-card {
        background: #fff;
        padding: 20px;
        border-radius: 28px;
        width: 320px;
        box-shadow: 0 25px 50px rgba(0,0,0,0.3);
        margin-bottom: 40px;
    }

    .hero-mit-card h3 {
        color: #1d1d1f;
        font-size: 20px;
        font-weight: 700;
        margin-bottom: 12px;
    }

    .hero-mit-card p {
        color: #86868b;
        font-size: 12px;
        line-height: 1.4;
        margin-bottom: 28px;
    }

    .hero-mit-form input {
        width: 100%;
        padding: 18px;
        border-radius: 14px;
        border: 1px solid #d2d2d7;
        background: #f5f5f7;
        margin-bottom: 18px;
        font-size: 16px;
        outline-color: #0071e3;
    }

    .btn-mit-submit {
        width: 100%;
        background: #0071e3; /* Azul Apple */
        color: #fff;
        border: none;
        padding: 20px;
        border-radius: 40px;
        font-weight: 600;
        font-size: 17px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        cursor: pointer;
        transition: background 0.3s;
    }

    .btn-mit-submit:hover {
        background: #0077ed;
    }

/*==================Sessão 01 01========================*/
    /* Container Principal Dark */
    .solutions-section {
        background-color: #000000; /* Fundo totalmente preto */
        padding: 100px 20px;
        font-family: 'Inter', sans-serif;
    }

    /* Cabeçalho no Estilo Dark */
    .solutions-header {
        max-width: 1200px;
        margin: 0 auto 60px;
    }

    .solutions-header .eyebrow {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #0071e3; /* Azul vibrante mantido para destaque */
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    .solutions-header h2 {
        font-size: 48px;
        line-height: 1.1;
        font-weight: 700;
        color: #ffffff; /* Título em branco */
        letter-spacing: -1.5px;
    }

    .solutions-header h2 span {
        color: #86868b; /* Cinza Apple para o complemento */
    }

    /* Grid de Serviços */
    .solutions-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 30px;
    }

    /* Card em Tom Cinza Grafite */
    .solution-card {
        background: #1c1c1e; /* Cinza escuro profundo (Card do iOS/macOS) */
        padding: 40px;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.05); /* Borda quase invisível */
        transition: all 0.3s ease;
    }

    .solution-card:hover {
        transform: translateY(-8px);
        background: #2c2c2e; /* Clareia levemente no hover */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
        border-color: rgba(0, 113, 227, 0.3); /* Brilho azul sutil na borda */
    }

    .icon-box {
        font-size: 28px;
        color: #0071e3;
        margin-bottom: 25px;
    }

    .solution-card h3 {
        font-size: 22px;
        font-weight: 600;
        color: #ffffff;
        margin-bottom: 20px;
        letter-spacing: -0.5px;
    }

    /* Lista de Métodos Técnica */
    .method-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .method-list li {
        font-size: 15px;
        color: #a1a1a6; /* Cinza claro para leitura confortável */
        padding: 12px 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .method-list li:last-child {
        border-bottom: none;
    }

    /* Bullet azul para reforçar a marca */
    .method-list li::before {
        content: "•";
        color: #0071e3;
        font-weight: bold;
    } 
/*==================Sessão 02========================*/

    .navbar.scrolled {
        background: rgba(0, 0, 0, 0.95);
        padding: 12px 8%;
        transition: 0.3s ease;
    }

    /* CAROUSEL */

    .services-gallery {
        padding: 120px 8%;
        background: #000;
        position: relative;
        font-family: 'Inter', sans-serif;
    }

    .gallery-header .eyebrow {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #0071e3; /* Azul vibrante mantido para destaque */
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    .gallery-header h2 {
        font-size: 48px;
        line-height: 1.1;
        font-weight: 700;
        color: #ffffff; /* Título em branco */
        letter-spacing: -1.5px;
    }

    .gallery-header h2 span {
        color: #86868b; /* Cinza Apple para o complemento */
    }

    .gallery-wrapper {
        overflow: hidden;
        margin-right: -12%;
        margin-left: -12%;
    }

    .gallery-track {
        display: flex;
        gap: 20px;
        transition: transform 0.6s ease;
        
        padding-right: clamp(60px, 8vw, 120px);
        padding-left: clamp(60px, 8vw, 120px);

    }

    .gallery-item {
        flex-shrink: 0;
    }


    /* IMAGEM */
    .gallery-card {
        border-radius: 25px;
        overflow: hidden;
        height: 550px;
    }

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

    /* TAMANHOS VARIÁVEIS */


    /* TEXTO ABAIXO */
    .gallery-info {
        margin-top: 20px;
    }

    .gallery-info h3 {
        font-size: 20px;
        margin-bottom: 5px;
        font-family: 'Inter', -apple-system, sans-serif;
    }

    .gallery-info p {
        color: #aaa;
        font-size: 15px;
    }

    /* BOTÕES FORA */
    .gallery-controls {
        display: flex;
        gap: 15px;
        justify-content: flex-end;
        margin-top: 40px;
    }

    .gallery-btn {
        background: rgba(255,255,255,0.1);
        border: none;
        color: #fff;
        font-size: 22px;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        cursor: pointer;
        backdrop-filter: blur(10px);
        transition: 0.3s;
    }

    .gallery-btn:hover {
        background: #0071e3;
    }

    /* RESPONSIVO */
    /* --- CONFIGURAÇÃO DE TAMANHOS (DESKTOP) --- */
    .large  { width: 500px; }
    .medium { width: 380px; }
    .small  { width: 300px; }


    /* 1. Telas Médias / Laptops (até 1200px) */
    @media (max-width: 1200px) {
        .services-gallery { padding: 80px 5%; }
        .gallery-header h2 { font-size: 40px; }
        .gallery-card { height: 450px; }
        .large  { width: 400px; }
        .medium { width: 320px; }
        .small  { width: 280px; }
    }

    
/*==================Sessão 03========================*/

    /* Configurações Gerais */
    .hero-section {
        position: relative;
        height: 100vh;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        color: #fff;
        font-family: 'Inter', sans-serif; /* Sugestão de fonte moderna */
    }

    /* Container das Imagens */
    
    .background-images {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 1; /* Aumentamos para 1 */
    }

    /* Overlay Escuro */
    .hero-section::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); 
        z-index: 2; /* O overlay fica acima das imagens (2) */
    }

    .bg-slide {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        animation: fadeAnimation 20s infinite; /* 20 segundos para o ciclo total */
    }

    /* Overlay Escuro para dar leitura ao texto */
    

    /* Lógica do Fade (5 imagens = 20% do tempo cada) */
    .bg-slide:nth-child(1) { animation-delay: 0s; }
    .bg-slide:nth-child(2) { animation-delay: 4s; }
    .bg-slide:nth-child(3) { animation-delay: 8s; }
    .bg-slide:nth-child(4) { animation-delay: 12s; }
    .bg-slide:nth-child(5) { animation-delay: 16s; }

    @keyframes fadeAnimation {
        0% { opacity: 0; }
        5% { opacity: 1; }
        25% { opacity: 1; }
        30% { opacity: 0; }
        100% { opacity: 0; }
    }

    /* Estilo do Texto e Botões */
    .hero-content {
        position: relative;
        z-index: 3;
        text-align: center;
        max-width: 800px;
        padding: 20px;
    }

    .subtitle {
        display: block;
        font-size: 1.2rem;
        font-weight: 500;
        margin-bottom: 15px;
        text-transform: uppercase;
        letter-spacing: 2px;
    }

    h1 {
        font-size: 3.5rem;
        font-weight: 700;
        line-height: 1.1;
        margin-bottom: 30px;
    }

    .cta-container {
        display: flex;
        gap: 15px;
        justify-content: center;
        align-items: center;
    }

    .btn-primary {
        background: #0071e3; /* Azul estilo Apple */
        color: white;
        padding: 12px 25px;
        border-radius: 25px;
        text-decoration: none;
        font-weight: 500;
        transition: 0.3s;
    }

    .btn-compare {
        background: rgba(255, 255, 255, 0.1);
        border: none;
        color: white;
        padding: 10px 20px;
        border-radius: 25px;
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
        backdrop-filter: blur(10px);
    }

    .icon-plus {
        background: #0071e3;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
    }


/*==================Sessão 04========================*/

    /* Configurações da Seção */
    .info-section {
        background-color: #000; /* Fundo preto estilo Apple */
        color: #f5f5f7;
        padding: 100px 20px;
        font-family: 'Inter', -apple-system, sans-serif;
        overflow: hidden;
    }

    .container {
        max-width: 1100px;
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }

    /* Bloco de Texto */
    .text-content {
        max-width: 600px;
        margin-bottom: 60px;
    }

    .text-content h2 {
        font-size: 48px;
        line-height: 1.1;
        font-weight: 600;
        margin-bottom: 24px;
        letter-spacing: -0.003em;
    }

    .text-content p {
        font-size: 21px;
        line-height: 1.4;
        color: #86868b; /* Cinza suave para o corpo do texto */
        font-weight: 400;
    }

    .text-content strong {
        color: #fff;
    }

    /* Botão Estilizado */
    .cta-wrapper {
        margin-top: 32px;
    }

    .btn-detail {
        background: #1d1d1f;
        border: none;
        color: #fff;
        padding: 12px 24px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 17px;
        cursor: pointer;
        transition: transform 0.3s ease;
    }

    .btn-detail:hover {
        transform: scale(1.02);
    }

    .icon-plus {
        background: #0071e3;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: 14px;
    }

    /* Imagem Inferior */
    .image-wrapper {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-top: 40px;
    }

    .image-wrapper img {
        width: 100%;
        max-width: 900px;
        height: auto;
        border-radius: 20px 20px 0 0; /* Arredondado apenas em cima como no print */
        object-fit: cover;
    }

    /* --- RESPONSIVIDADE --- */

    @media (max-width: 768px) {
        .info-section {
            padding: 60px 20px;
        }

        .text-content h2 {
            font-size: 32px;
        }

        .text-content p {
            font-size: 18px;
        }

        .btn-detail {
            width: 100%;
            justify-content: space-between;
        }

        .image-wrapper img {
            max-width: 100%;
        }
    }
/*==================Sessão 05========================*/

    .stats-section {
        background-color: #000;
        color: #fff;
        padding: 120px 20px;
        font-family: 'Inter', -apple-system, sans-serif;
        text-align: left;
    }

    .stats-container {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 40px;
    }

    /* Estilo dos Cards */
    .stat-card {
        display: flex;
        flex-direction: column;
    }

    .stat-prefix {
        font-size: 17px;
        color: #86868b;
        margin-bottom: 8px;
        font-weight: 500;
    }

    .stat-title {
        font-size: 48px;
        font-weight: 700;
        color: #ff7b00; /* Laranja estilo o print enviado */
        margin: 0 0 16px 0;
        line-height: 1.1;
    }

    .stat-description {
        font-size: 17px;
        line-height: 1.47;
        color: #86868b;
        max-width: 280px;
    }

    /* Rodapé com Botão */
    .stats-footer {
        max-width: 1100px;
        margin: 80px auto 0;
        display: flex;
        justify-content: center;
    }

    .btn-compare-dark {
        background: #1d1d1f;
        border: none;
        color: #fff;
        padding: 14px 28px;
        border-radius: 30px;
        display: flex;
        align-items: center;
        gap: 12px;
        font-size: 17px;
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .btn-compare-dark:hover {
        background: #2d2d2f;
    }

    .icon-plus {
        background: #0071e3;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-style: normal;
        font-size: 16px;
    }

    /* --- RESPONSIVIDADE --- */

    @media (max-width: 900px) {
        .stats-container {
            grid-template-columns: 1fr; /* Empilha os itens no tablet/mobile */
            gap: 60px;
        }

        .stat-title {
            font-size: 40px;
        }

        .stat-description {
            max-width: 100%;
        }
        
        .stats-section {
            padding: 80px 40px;
        }
    }
/*==================Sessão 06========================*/

    :root {
        --bg-black: #000;
        --card-bg: #1c1c1e;
        --text-gray: #86868b;
        /* Variáveis de cores para facilitar manutenção */
        --accent-blue: #0071e3;
        --accent-orange: #ff7b00;
        --accent-green: #34c759;
        --accent-purple: #af52de;
    }

    .reasons-section {
        background: var(--bg-black);
        padding: 100px 20px;
        font-family: 'Inter', sans-serif;
        color: #fff;
    }

    .header-text h2 {
        max-width: 1100px;
        margin: 0 auto 50px;
        font-size: 40px;
        font-weight: 600;
        color: #86868b; 
    }

    .cards-grid {
        max-width: 1100px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }

    /* --- ESTILO DOS ÍCONES --- */
    /* Esta classe deve ser aplicada na tag <i> ou no elemento que envolve o emoji */
    .reason-icon {
        font-size: 48px; /* Aumentado para maior destaque */
        margin-bottom: 20px;
        display: block;
        transition: transform 0.3s ease;
    }

    /* Cores específicas para cada ícone baseado na ordem dos cards */
    .reason-card:nth-child(1) .reason-icon { color: var(--accent-blue); }
    .reason-card:nth-child(2) .reason-icon { color: var(--accent-orange); }
    .reason-card:nth-child(3) .reason-icon { color: var(--accent-green); }
    .reason-card:nth-child(4) .reason-icon { color: var(--accent-purple); }

    /* --- ESTILO DO CARD --- */
    .reason-card {
        background: var(--card-bg);
        padding: 35px; /* Aumentado levemente para acomodar ícones maiores */
        border-radius: 25px;
        cursor: pointer;
        position: relative;
        transition: all 0.3s ease;
        min-height: 280px; /* Ajustado para ícones maiores */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Alinha tudo ao topo */
    }

    .reason-card:hover {
        transform: translateY(-8px);
        background: #252528; /* Leve clareada no hover */
    }

    /* Garante que o ícone aumente um pouco no hover do card */
    .reason-card:hover .reason-icon {
        transform: scale(1.1);
    }

    .reason-card h3 {
        font-size: 24px;
        line-height: 1.2;
        margin-top: auto; /* Empurra o título para baixo, criando o visual do print */
    }

    .plus-btn {
        position: absolute;
        bottom: 20px;
        right: 20px;
        background: #fff;
        color: #000;
        border: none;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: background 0.3s ease;
    }

    .reason-card:hover .plus-btn {
        background: var(--accent-blue);
        color: #fff;
    }

    /* Cores de Destaque no Texto */
    .highlight-blue { color: var(--accent-blue); }
    .highlight-orange { color: var(--accent-orange); }
    .highlight-green { color: var(--accent-green); }
    .highlight-purple { color: var(--accent-purple); }

    /* --- MODAL E BLUR --- */
    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.6); /* Escurecido para destacar o blur */
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 1000;
    }

    .modal-content {
        background: #1c1c1e;
        width: 90%;
        max-width: 500px;
        padding: 40px;
        border-radius: 30px;
        position: relative;
        color: #fff;
        box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    }

    .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        background: #333;
        color: #fff;
        border: none;
        width: 35px;
        height: 35px;
        border-radius: 50%;
        font-size: 24px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Responsividade */
    @media (max-width: 900px) {
        .cards-grid { grid-template-columns: repeat(2, 1fr); }
        .header-text h2 { font-size: 32px; }
    }

    @media (max-width: 500px) {
        .cards-grid { grid-template-columns: repeat(2, 1fr); }
        .reason-card { min-height: 240px; }
    }
/*==================Sessão 07========================*/

    .cases-section {
        background-color: #000;
        color: #fff;
        padding: 100px 0;
        font-family: 'Inter', sans-serif;
        overflow: hidden;
    }

    .cases-header {
        max-width: 1100px;
        margin: 0 auto 40px;
        padding: 0 20px;
    }

    .cases-header h2 {
        font-size: 40px;
        line-height: 1.1;
        margin-bottom: 10px;
    }

    .link-more {
        color: #0071e3;
        text-decoration: none;
        font-size: 19px;
    }

    /* Carrossel */
    .carousel-wrapper {
        padding-left: calc((100vw - 1100px) / 2 + 20px); /* Alinha com o header */
    }

    
    .carousel-track {
        display: flex;
        gap: 25px;
        position: relative; /* Adicione isso se não tiver */
        transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .case-card {
        /* Removemos a largura fixa de 400px para que o card expanda com a imagem */
        width: fit-content; 
        display: inline-block; /* Ou use flex/grid no elemento pai */
    }

    .case-card img {
        /* 1. Fixamos a altura desejada */
        height: 500px; 
        
        /* 2. Definimos a largura como automática para manter a proporção */
        width: auto; 
        
        /* 3. Garantimos que a imagem não distorça */
        object-fit: contain; 
        
        border-radius: 30px;
        margin-bottom: 20px;
        display: block; /* Remove espaços vazios abaixo da imagem */
    }

    .case-info h3 {
        font-size: 21px;
        margin-bottom: 8px;
    }

    .case-info p {
        color: #86868b;
        font-size: 17px;
        line-height: 1.4;
    }

    .case-location {
        display: flex;
        align-items: center;
        gap: 8px; /* Espaço entre o ícone e o texto */
        color: #0071e3; /* Cor azul para destacar sutilmente (estilo Apple) */
        font-size: 14px;
        font-weight: 500;
        margin-top: 10px;
    }

    .case-location i {
        font-size: 14px; /* Ícone levemente maior que o texto */
    }

    /* Container para controlar a posição do crédito */
    .img-container {
        position: relative;
        overflow: hidden; /* Garante que o link não saia das bordas arredondadas */
        border-radius: 30px;
        margin-bottom: 20px;
    }

    .case-card img {
        height: 500px;
        width: auto;
        object-fit: contain;
        display: block;
        transition: transform 0.5s ease; /* Efeito opcional de zoom na imagem */
    }

    /* Estilo do link de crédito (Invisível por padrão) */
    .image-source {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.6); /* Fundo escuro semi-transparente */
        color: #fff;
        text-decoration: none;
        font-size: 12px;
        padding: 10px 20px;
        text-align: right;
        font-family: 'Inter', sans-serif;
        
        /* O "pulo do gato" para o efeito delicado */
        opacity: 0;
        transform: translateY(100%); /* Começa escondido abaixo da imagem */
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    /* Efeito ao passar o mouse (Hover) */
    .case-card:hover .image-source {
        opacity: 1;
        transform: translateY(0); /* Sobe suavemente */
    }

    .case-card:hover img {
        transform: scale(1.02); /* Leve zoom para dar vida ao card */
    }

    .last-card-text {
    /* Mantemos a largura para não quebrar o cálculo do JS */
    min-width: 400px; 
    width: 400px;
    }

    .last-card-content {
        height: 500px; /* Mesma altura das fotos */
        background: linear-gradient(135deg, #1d1d1f 0%, #000 100%);
        border: 1px solid #333;
        border-radius: 30px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        padding: 40px;
        box-sizing: border-box;
    }

    .last-card-content h3 {
        font-size: 32px;
        color: #fff;
        margin-bottom: 15px;
    }

    .last-card-content p {
        color: #86868b;
        font-size: 18px;
        margin-bottom: 30px;
    }

    /* Um botão opcional para levar o cliente direto ao contato */
    .btn-more-cases {
        color: #0071e3;
        text-decoration: none;
        font-weight: 600;
        font-size: 18px;
        border: 1px solid #0071e3;
        padding: 10px 25px;
        border-radius: 50px;
        transition: 0.3s;
    }

    .btn-more-cases:hover {
        background: #0071e3;
        color: #fff;
    }


    /* Botões */
    .carousel-nav {
        max-width: 1100px;
        margin: 40px auto 0;
        display: flex;
        justify-content: flex-end;
        gap: 15px;
        padding: 0 20px;
    }

    .nav-btn {
        background: #1d1d1f;
        color: #fff;
        border: none;
        width: 45px;
        height: 45px;
        border-radius: 50%;
        cursor: pointer;
        font-size: 18px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: 0.3s;
    }

    .nav-btn:hover {
        background: #333;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .case-card {
            min-width: 300px;
        }
        .carousel-wrapper {
            padding-left: 20px;
        }
    }
/*==================Sessão 08========================*/

    .about-section-centered {
        background-color: #000;
        color: #fff;
        padding: 120px 20px;
        font-family: 'Inter', -apple-system, sans-serif;
        text-align: center; /* Centraliza todo o conteúdo */
    }

    .container {
        max-width: 800px; /* Estreita o texto para ficar idêntico ao estilo Apple */
        margin: 0 auto;
        align-items: center;
    }

    .eyebrow {
        color: #86868b;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-weight: 600;
        font-size: 14px;
        display: block;
        margin-bottom: 15px;
    }

    .about-header h2 {
        font-size: 56px; /* Fonte grande e impactante */
        line-height: 1.07;
        font-weight: 700;
        letter-spacing: -0.005em;
        margin-bottom: 30px;
    }

    .about-description p {
        font-size: 21px;
        line-height: 1.38;
        color: #86868b;
        margin-bottom: 20px;
    }

    .about-description strong {
        color: #fff;
        font-weight: 600;
    }

    /* Destaque 27 Anos */
    .experience-showcase {
        margin-top: 60px;
        display: flex;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        align-items: center;
    }

    .years-number {
        font-size: 120px; /* Tamanho gigante para destaque */
        font-weight: 700;
        color: #ff7b00; /* Laranja MIT */
        line-height: 1;
    }

    .years-label {
        font-size: 24px;
        font-weight: 600;
        color: #ff7b00;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-top: 10px;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .about-header h2 {
            font-size: 38px;
        }
        .years-number {
            font-size: 80px;
        }
        .years-label {
            font-size: 18px;
        }
    }
/*==================Sessão 09========================*/

    .faq-section {
        background: #fff;
        padding: 100px 0;
        font-family: 'Inter', sans-serif;
    }

    .faq-header {
        max-width: 1200px;
        margin: 0 auto 60px;
        padding: 0 20px;
        text-align: left; /* Alinhado à esquerda como na foto que você gostou */
    }

    /* O texto pequeno acima do título */
    .faq-header .eyebrow {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #0071e3; /* Azul destaque */
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 12px;
    }

    /* O título principal */
    .faq-header h2 {
        font-size: 48px;
        line-height: 1.1;
        font-weight: 700;
        color: #1d1d1f;
        letter-spacing: -1.5px; /* O toque mestre: letras levemente juntas */
    }

    /* A segunda linha do título em cinza */
    .faq-header h2 span {
        color: #86868b; /* Cinza suave para contraste */
    }

    /* Ajuste para telas menores */
    @media (max-width: 768px) {
        .faq-header h2 {
            font-size: 36px;
        }
    }

        .faq-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1.2fr; /* Imagem à esquerda, texto à direita */
            gap: 80px;
            align-items: center;
            padding: 0 20px;
        }

        /* Lado da Imagem */
        .image-wrapper {
            position: relative;
            width: 100%;
            height: 550px;
            border-radius: 40px;
            overflow: hidden;
            box-shadow: 0 20px 40px rgba(0,0,0,0.08);
        }

        .image-wrapper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: opacity 0.5s ease-in-out, transform 0.5s ease;
        }

        /* Lado do Texto */
        .eyebrow {
            color: #0071e3;
            font-weight: 600;
            text-transform: uppercase;
            font-size: 14px;
            letter-spacing: 1px;
        }

        .faq-content-side h2 {
            font-size: 48px;
            margin: 10px 0 40px;
            letter-spacing: -1px;
        }

        /* Accordion */
        .faq-item {
            border-bottom: 1px solid #e5e5e7;
        }

        .faq-question {
            width: 100%;
            padding: 25px 0;
            background: none;
            border: none;
            text-align: left;
            font-size: 20px;
            font-weight: 600;
            color: #1d1d1f;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: color 0.3s;
        }

        .faq-icon {
            width: 20px;
            height: 20px;
            position: relative;
        }

        .faq-icon::before, .faq-icon::after {
            content: '';
            position: absolute;
            background: #1d1d1f;
            transition: transform 0.3s ease;
        }

        /* Sinal de + que vira - */
        .faq-icon::before { width: 100%; height: 2px; top: 9px; left: 0; }
        .faq-icon::after { width: 2px; height: 100%; left: 9px; top: 0; }

        .faq-item.active .faq-icon::after { transform: rotate(90deg); opacity: 0; }
        .faq-item.active .faq-question { color: #0071e3; }

        /* Resposta escondida */
        .faq-answer {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .faq-answer p {
            padding-bottom: 25px;
            color: #86868b;
            line-height: 1.6;
            font-size: 17px;
        }

        .faq-item.active .faq-answer {
            max-height: 200px; /* Ajuste conforme o tamanho do texto */
        }

        /* Responsividade */
        @media (max-width: 900px) {
            .faq-container { grid-template-columns: 1fr; }
            .faq-image-side { order: 2; }
            .image-wrapper { height: 350px; }
        }
/*==================Sessão 10========================*/

    /* Rodapé Geral */
    .main-footer {
        background-color: #000;
        color: #fff;
        padding: 100px 20px 40px;
        font-family: 'Inter', sans-serif;
        border-top: 1px solid #1c1c1e;
    }

    /* Seção de Chamada (CTA) */
    .footer-cta {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 100px;
    }

    .footer-cta .eyebrow {
        color: #0071e3;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 14px;
        letter-spacing: 2px;
    }

    .footer-cta h2 {
        font-size: clamp(32px, 5vw, 56px);
        font-weight: 700;
        letter-spacing: -2px;
        margin: 20px 0;
    }

    .footer-cta p {
        color: #86868b;
        font-size: 18px;
        margin-bottom: 40px;
    }

    .cta-buttons {
        display: flex;
        gap: 20px;
        justify-content: center;
        flex-wrap: wrap;
    }

    .btn-primary {
        background: #0071e3;
        color: white;
        padding: 16px 32px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: 0.3s;
    }

    .btn-primary:hover {
        background: #0077ed;
        transform: scale(1.05);
    }

    .btn-secondary {
        color: #0071e3;
        text-decoration: none;
        font-weight: 600;
        padding: 16px 32px;
        transition: 0.3s;
    }

    .btn-secondary:hover {
        text-decoration: underline;
    }

    /* Grid de Informações */
    .footer-grid {
        max-width: 1200px;
        margin: 0 auto;
        display: grid;
        grid-template-columns: 2fr 1fr;
        gap: 60px;
        padding-bottom: 60px;
        border-bottom: 1px solid #1c1c1e;
    }

    .footer-logo {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 20px;
    }

    .footer-logo span {
        font-weight: 300;
        color: #86868b;
    }

    .footer-brand p {
        color: #86868b;
        max-width: 300px;
        line-height: 1.6;
    }

    .footer-socials h4 {
        margin-bottom: 20px;
        font-size: 16px;
        font-weight: 600;
    }

    .social-icons {
        display: flex;
        gap: 25px;
    }

    .social-icons a {
        color: #f5f5f7;
        font-size: 24px;
        transition: 0.3s;
    }

    .social-icons a:hover {
        color: #0071e3;
        transform: translateY(-3px);
    }

    /* Rodapé Final */
    .footer-bottom {
        max-width: 1200px;
        margin: 40px auto 0;
        color: #424245;
        font-size: 12px;
    }

    .bottom-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* Responsividade */
    @media (max-width: 768px) {
        .footer-grid {
            grid-template-columns: 1fr;
            text-align: center;
        }
        .footer-brand p { margin: 0 auto; }
        .social-icons { justify-content: center; }
        .bottom-container { justify-content: center; text-align: center; }
    }
/*==================Sessão 11========================*/

    /* Container do Botão */
    .sticky-container {
        position: fixed;
        bottom: 30px;
        left: 50%;
        transform: translateX(-50%) translateY(100px); /* Começa escondido abaixo */
        z-index: 1000;
        opacity: 0;
        transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1); /* Transição suave de subida */
    }

    /* Classe ativada pelo JavaScript */
    .sticky-container.visible {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }

    /* O Botão Estilo Apple */
    .sticky-button {
        background: rgba(29, 29, 31, 0.8); /* Fundo escuro semi-transparente */
        backdrop-filter: blur(15px);
        -webkit-backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 40px;
        padding: 8px 8px 8px 24px;
        display: flex;
        align-items: center;
        gap: 16px;
        text-decoration: none;
        color: #f5f5f7;
        font-family: 'Inter', sans-serif;
        font-size: 14px;
        font-weight: 500;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    }

    .button-icon {
        background: #0071e3; /* Azul Apple */
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        color: white;
    }

    .sticky-button:hover {
        background: rgba(45, 45, 47, 0.9);
        transform: scale(1.02);
        transition: 0.3s;
    }








/*================Responsividade ==================================*/

    @media (max-width: 992px) {

        /*==================Sessão 01========================*/
            .hero-mit {
                height: 100svh; /* 'svh' garante 100% da tela real no celular, sem bordas */
                width: 100vw;
                margin: 0;
                padding: 0;
                background-image: 
                    linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%), 
                    url('../img/img37.jpg'); /* Sua imagem vertical */
                background-size: cover;
                background-position: center center;
                display: flex;
                align-items: flex-end; /* Texto no fundo */
                justify-content: flex-start; /* Texto na esquerda */
            }

            .hero-mit-overlay {
                background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0) 50%);
                padding: 20px; /* Respiro lateral para o texto não colar na borda */
                align-items: flex-end;
            }

            .hero-mit-container {
                flex-direction: column;
                align-items: flex-start; /* Alinha o texto à esquerda */
                text-align: left; /* Estilo Apple é geralmente à esquerda */
                padding-bottom: 40px; /* Distância do final da tela */
                max-width: 100%;
            }

            .hero-mit-content {
                max-width: 90%;
                margin-bottom: 0;
            }

            .hero-mit-content h1 {
                font-size: 28px; /* Título menor para dar destaque à foto */
                line-height: 1.1;
                margin-bottom: 12px;
                letter-spacing: -0.5px;
            }

            .hero-mit-content p {
                font-size: 14px; /* Texto discreto */
                color: rgba(255, 255, 255, 0.7);
                margin-bottom: 0;
                max-width: 280px; /* Evita que o texto ocupe a tela toda */
            }

            /* Esconde o card no mobile como você já fez */
            .hero-mit-card {
                display: none;
            }

        /*==================Sessão 01 01========================*/

        /*==================Sessão 02========================*/
            /* 1. Remove os espaços exagerados que estavam sobrando nas laterais */
            .services-gallery {
                padding: 60px 20px; /* Reduz o respiro da seção inteira */
            }

            .gallery-wrapper {
                margin-right: 0;
                margin-left: 0;
                overflow: hidden;
            }

            .gallery-track {
                gap: 12px; /* Fotos bem mais próximas uma da outra */
                padding-left: 0 !important; /* Tira o buraco do começo */
                display: flex;
            }

            /* 2. Redimensiona os cards para ocupar a tela quase toda no mobile */
            .gallery-item {
                width: 85vw; /* Card ocupa 85% da largura do celular */
                flex-shrink: 0;
            }

            .gallery-card {
                width: 100% !important; /* Força o card a seguir o tamanho do item */
                height: 380px; /* Altura ideal para mobile */
                border-radius: 20px;
            }

            /* 3. BOTÕES: Colados na margem direita */
            /* 3. BOTÕES: Forçados na margem direita no Mobile */
            .gallery-controls {
                display: flex !important; /* Garante que o flex seja aplicado */
                justify-content: flex-end !important; /* Força o alinhamento no final (direita) */
                width: 100% !important; /* Faz o container dos botões ocupar a largura toda */
                gap: 12px;
                margin-top: 30px;
                padding-right: 0px; /* Ajuste para encostar na borda ou deixar um pequeno respiro */
                margin-left: 0; /* Remove qualquer centralização automática */
                margin-right: 0;
            }

            .gallery-btn {
                width: 48px; /* Um pouco maior para facilitar o toque (padrão Apple) */
                height: 48px;
                background: rgba(255, 255, 255, 0.1);
                border: 1px solid rgba(255, 255, 255, 0.1);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 50%;
                cursor: pointer;
            }

            /* Ajuste do Título no Mobile */
            .gallery-header h2 {
                font-size: 28px;
                line-height: 1.2;
            }

            .gallery-card { 
                height: 400px; 
            }
            .gallery-wrapper { 
                margin-right: -5%; margin-left: -5%; 
            }
            
            /* Padronizamos mais os tamanhos no Tablet */
            .large, .medium, .small { width: 300px; }
            
            .gallery-track {
                padding-left: 5%;
                gap: 15px;
            }

        
    }


    @media (max-width: 768px) {
        /*==================NavBar===========================*/
            .hamburger { 
                display: block; 
            }
            
            .nav-menu {
                position: fixed;
                left: -100%;
                top: 48px;
                flex-direction: column;
                background: #000;
                width: 100%;
                height: 100vh;
                text-align: center;
                transition: 0.3s;
                padding-top: 40px;
            }

            .nav-menu.active { 
                left: 0; 
            }
            
            .nav-link { 
                font-size: 24px; 
            }
         
            .nav-menu {
                position: fixed;
                left: -100%;
                top: 48px;
                flex-direction: column;
                background: #000;
                width: 100%;
                height: 100vh;
                text-align: center;
                transition: 0.3s;
                padding-top: 40px;
            }

            .nav-menu.active { left: 0; }
            
            .nav-link { font-size: 24px; }

        /*==================Sessão 01========================*/
            .hero-mit {
                /* No mobile, o 100vh às vezes buga, usamos dvh (dynamic viewport height) */
                height: 100dvh; 
                background-position: center center;
            }

            .hero-mit-container {
                padding: 0 24px 40px; /* Respiro inferior e lateral */
                text-align: left;
                align-items: flex-start;
            }

            .hero-mit-content h1 {
                font-size: 28px;
                line-height: 1.1;
                max-width: 100%;
            }
            
            .hero-mit-content p {
                font-size: 14px;
                opacity: 0.8;
            }
        
        /*==================Sessão 01 01========================*/
            .solutions-section {
                padding: 0px 5px 40px 5px; /* Reduzi levemente o padding lateral para ganhar espaço */
            }
            
            .solutions-header h2 {
                font-size: 30px; /* Ajuste fino para não quebrar em telas menores */
            }

            /* A MÁGICA: Força 2 colunas no Mobile */
            .solutions-grid {
                grid-template-columns: repeat(2, 1fr); /* 2 colunas iguais */
                gap: 10px; /* Espaço reduzido entre os cards para caberem lado a lado */
            }

            .solution-card {
                padding: 20px 15px; /* Redução interna para os textos não ficarem apertados */
                border-radius: 20px;
            }

            .icon-box {
                font-size: 12px; /* Ícones menores para harmonizar com o card menor */
                margin-bottom: 15px;
            }

            .solution-card h3 {
                font-size: 15px; /* Título menor para evitar quebra de muitas linhas */
                line-height: 1.2;
                margin-bottom: 12px;
                min-height: 36px; /* Garante alinhamento se um título for maior que outro */
            }

            /* Ajuste da Lista no Mobile */
            .method-list li {
                font-size: 11px; /* Texto menor para caber nas colunas estreitas */
                padding: 8px 0;
                gap: 6px;
            }

            .method-list li::before {
                font-size: 10px;
            }

        /*==================Sessão 02========================*/

            .services-gallery { padding: 0px 20px; }
            .gallery-header h2 { font-size: 28px; }
            
            .gallery-card { 
                height: 350px; /* Altura ideal para segurar com uma mão */
                border-radius: 20px; 
            }

            /* No mobile, os cards ficam quase da mesma largura para facilitar o scroll */
            .large, .medium, .small { 
                width: 85vw; /* Ocupa 85% da largura da tela */
            }

            .gallery-info h3 { font-size: 18px; }
            .gallery-info p { font-size: 14px; }

            /* Ajuste dos botões no mobile */
            .gallery-controls {
                justify-content: center; /* Centraliza botões no celular */
                margin-top: 30px;
            }
            .gallery-btn {
                width: 44px;
                height: 44px;
                font-size: 18px;
            }

        /*==================Sessão 03========================*/

            .hero-section {
                height: 100vh; /* Mantém ocupando a tela toda */
            }

            .bg-slide {
                /* Garante que a imagem foque no centro e preencha a altura 9:16 do celular */
                background-position: center center;
                background-size: cover; 
                width: 100%;
                height: 100%;
            }

            .hero-content {
                padding: 0 30px;
            }

            h1 {
                font-size: 2.5rem; /* Diminui o título para não cobrir a foto toda */
                margin-bottom: 20px;
            }

            .subtitle {
                font-size: 1rem;
            }

            .cta-container {
                flex-direction: column; /* Botões um em cima do outro no tablet/celular */
                gap: 12px;
            }

            .btn-primary, .btn-compare {
                 /* Botões ocupam a largura disponível */
                justify-content: center;
                
                padding: 12px 25px;
            }
        

        /*==================Sessão 05========================*/
            .stats-section {
            background-color: #000;
            color: #fff;
            padding: 20px 20px;
            font-family: 'Inter', -apple-system, sans-serif;
            text-align: left;
        }

    }


    @media (max-width: 380px) {
        /*==================Sessão 01 01========================*/   
            .solutions-grid {
                gap: 8px;
            }
            .solution-card h3 {
                font-size: 13px;
            }
        /*==================Sessão 02========================*/
        .gallery-card { height: 300px; }
        .gallery-header h2 { font-size: 24px; }

        /*==================Sessão 03========================*/
        .hero-section {
            height: 100dvh; /* Usa dvh para evitar bug da barra de navegação do Chrome/Safari */
        }

        h1 {
            font-size: 2rem; /* Título ainda menor para telas pequenas */
            line-height: 1.2;
        }

        .subtitle {
            font-size: 0.9rem;
            letter-spacing: 1px;
        }

        .hero-content {
            padding: 0 20px;
        }

        .btn-primary {
            font-size: 1rem;
        }

        .btn-compare span {
            font-size: 0.9rem;
        }


    }