/* ==========================================================================
   MEDIA.CSS - RESPONSIVIDADE PROFISSIONAL (MOBILE FIRST ADAPTADO)
   Abrange: 320px, 375px, 390px, 402px, 414px, 420px, 430px, 440px+
   ========================================================================== */

/* --- 1. TABLETS E NOTEBOOKS PEQUENOS (Abaixo de 1024px) --- */
@media (max-width: 1024px) {
    .container {
        padding: 0 30px; /* Mais margem lateral para não colar */
    }

    .hero h1 {
        font-size: 3rem; /* Reduz um pouco o título gigante */
    }

    .blob-wrapper {
        width: 400px;
        height: 400px;
    }
}

/* --- 2. MENU MOBILE E LAYOUT GERAL (Abaixo de 991px) --- */
@media (max-width: 991px) {
    
    /* --- NAVBAR & MENU HAMBURGUER --- */
    .navbar {
        padding: 0 20px;
        height: 70px;
        background: rgba(255, 255, 255, 0.98);
        backdrop-filter: blur(15px);
        box-shadow: 0 2px 15px rgba(0,0,0,0.05);
    }
    
    .nav-content {
        justify-content: space-between;
    }

    .logo-img {
        height: 120px !important; /* Aumentado de 45px para 60px */
        width: auto;  /* Garante a proporção */
        object-fit: contain; /* Garante que a imagem não distorça */
    }

    /* Esconde os links normais e ativa o ícone */
    .mobile-menu-icon {
        display: block;
        z-index: 1001;
    }

    /* Menu Gaveta (Drawer) */
    .nav-links {
        position: fixed; /* Força ficar preso na tela, ignorando cortes */
        top: 70px; /* Altura exata da navbar */
        right: 0;
        height: calc(100vh - 70px); /* Ocupa toda a altura restante */
        width: 100%; /* Ocupa a largura toda */
        background: #ffffff; /* Fundo branco sólido */
        
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        
        /* Começa fora da tela (na direita) */
        transform: translateX(100%);
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        
        /* Z-INDEX SUPREMO: Garante que fique acima de tudo */
        z-index: 9999; 
        
        /* Sombras para destacar do fundo */
        box-shadow: -5px 0 15px rgba(0,0,0,0.05);
        
        /* Garante que o menu role se a tela for pequena na vertical */
        overflow-y: auto; 
    }

    .nav-links.active {
        transform: translateX(0); /* Traz para dentro da tela */
    }

    .nav-links a {
        font-size: 1.4rem;
        color: var(--color-blue);
        font-weight: 400;
    }

    /* --- AJUSTES GERAIS DE SEÇÃO --- */
    section {
        padding: 60px 0; /* Padroniza padding vertical */
    }

    .hero-content, 
    .management-grid, 
    .laudos-grid-wrapper, 
    .footer-grid {
        grid-template-columns: 1fr; /* Tudo vira uma coluna só */
        gap: 40px;
        text-align: center;
    }

    /* Centraliza textos descritivos */
    .text-box p, 
    .section-desc, 
    .laudos-header p {
        margin-left: auto;
        margin-right: auto;
    }
}

/* --- 3. CELULARES (Abaixo de 768px - Cobre 390, 414, 430, 440px) --- */
@media (max-width: 768px) {


    .logo-img {
        height: 70px;
    }

    /* --- HERO SECTION --- */
    .hero {
        padding-top: 110px;
        padding-bottom: 60px;
        border-bottom-left-radius: 30px;
        border-bottom-right-radius: 30px;
        min-height: auto;
    }

    .text-box {
        order: 1; /* Texto em cima */
    }

    .text-box h1 {
        font-size: 1.8rem; /* Fonte ajustada para mobile */
    }

    .text-box .badge {
        font-size: 0.6rem; /* Fonte ajustada para mobile */
    }

    .text-box p {
        font-size: 0.9rem; /* Fonte ajustada para mobile */
    }

    .hero-visual {
        order: 2; /* Imagem embaixo */
        margin-top: 20px;
    }

    .blob-wrapper {
        width: 100%;
        max-width: 320px;
        height: 320px;
    }

    .float-card {
        left: 50%;
        transform: translateX(-50%);
        bottom: -10px;
        width: 90%;
        justify-content: center;
        animation: none; /* Desativa animação flutuante para performance */
    }

    .cta-buttons {
        flex-direction: column;
        width: 100%;
        gap: 15px;
    }

    .btn-primary, .btn-text {
        width: 100%;
        justify-content: center;
    }

    /* --- MEDICINA OCUPACIONAL (Bloco 2) --- */
    .services-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .title-wrapper h2 {
        font-size: 2rem;
    }

    /* Grid de exames vira 1 por linha para leitura fácil */
    .exams-grid {
        grid-template-columns: 1fr; 
        gap: 20px;
    }

    /* --- GESTÃO E SOCIAL (Bloco 3) --- */
    .management-content {
        order: 1; /* Texto primeiro */
    }

    .management-visual {
        order: 2; /* Imagem depois */
    }

    .esocial-card {
        right: 50%; /* Centraliza o card flutuante */
        transform: translateX(50%);
        bottom: -25px;
        width: 90%;
        min-width: auto;
    }
    
    /* Remove a animação flutuante no mobile para não cobrir texto */
    .floating-anim { animation: none; }

    /* --- LAUDOS (Bloco 4) --- */
    .laudos-section {
        margin-top: 0;
        clip-path: none; /* Remove recorte diagonal complexo */
        border-top-left-radius: 30px;
        border-top-right-radius: 30px;
        padding-top: 60px;
    }

    .scanner-visual {
        height: 250px; /* Scanner menor */
        order: -1; /* Imagem acima da lista */
    }
    
    .documents-grid {
        grid-template-columns: 1fr; /* Cards ocupam largura total */
    }

    /* --- TREINAMENTOS (Bloco 5) --- */
    .training-grid {
        grid-template-columns: 1fr; /* Cards grandes para toque fácil */
    }
    
    .training-section {
        background-attachment: scroll; /* Corrige bug de parallax no iPhone */
    }

    /* --- FOOTER --- */
    .footer-cta-wrapper {
        position: relative;
        top: 0;
        margin-bottom: 40px;
        padding: 0;
    }
    
    .footer-cta {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
    }
    
    .site-footer {
        padding-top: 60px;
        margin-top: 0;
    }

    .footer-grid {
        gap: 40px;
        text-align: center; /* Centraliza tudo no rodapé */
    }

    .tech-id-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
        border-left: none;
        border-top: 4px solid var(--color-green);
    }
    
    .social-magnetic-area {
        align-items: center; /* Centraliza botões sociais */
    }
    
    .footer-bottom {
        flex-direction: column;
        text-align: center;
        gap: 15px;
    }
}

/* --- 4. TELAS PEQUENAS (320px e 375px) --- */
@media (max-width: 380px) {
    
    /* Ajuste fino de fontes para não quebrar linha */
    .hero h1 {
        font-size: 1.8rem; 
    }

    .text-box p {
        font-size: 0.9rem;
    }

    /* Ajuste do botão do modal para telas apertadas */
    .spec-btn {
        width: 35px;
        height: 35px;
    }
    
    .spec-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Reduz tamanho dos ícones do grid */
    .card-icon {
        width: 50px;
        height: 50px;
    }
    
    .badge {
        font-size: 0.7rem;
        padding: 4px 10px;
    }

    /* Ajuste do Modal de Contato */
    .modal-container {
        padding: 20px;
        width: 95%;
    }
}


/* =========================================================
   BLOCO 02: MEDICINA OCUPACIONAL (Serviços)
   Foco: Layout de Dashboard e Interatividade Tátil
   ========================================================= */

   @media (max-width: 991px) {
    .services-section {
        padding: 60px 0;
        text-align: center;
        background: #fff; /* Garante fundo limpo */
    }

    /* Cabeçalho da Seção */
    .services-header {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        margin-bottom: 40px;
    }

    .title-wrapper {
        max-width: 100%;
        padding: 0 10px;
    }

    .title-wrapper h2 {
        font-size: 1.5rem; /* Título equilibrado */
        line-height: 1.2;
    }

    /* Badge "Clínica Credenciada" centralizada */
    .pulse-badge {
        justify-content: center;
        margin-bottom: 15px;
        font-size: 0.75rem; /* Levemente menor */
    }

    /* O Elemento Visual (Cruz Giratória) */
    .medical-icon-visual {
        /* No mobile, colocamos ele de fundo ou menorzinho para decorar */
        transform: scale(0.8);
        opacity: 0.5; /* Mais suave para não brigar com o texto */
        margin-top: -10px;
    }

    /* --- GRID DE CARDS (O Pulo do Gato) --- */
    .exams-grid {
        /* Por padrão (maioria dos celulares), usa 2 colunas! 
           Isso economiza scroll e dá cara de App */
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; /* Espaço mais apertado e moderno */
        padding: 0 5px; /* Margem de respiro */
    }

    /* O Card Mobile */
    .exam-card {
        padding: 20px 15px; /* Menos padding interno */
        text-align: center; /* Centraliza tudo */
        display: flex;
        flex-direction: column;
        align-items: center;
        min-height: 180px; /* Garante altura uniforme */
        
        /* Removemos o efeito de blur do desktop para performance no mobile */
        opacity: 1 !important; 
        filter: none !important;
        transform: scale(1) !important;
        
        /* Sombra suave */
        box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        border: 1px solid #f0f0f0;
    }
    
    .card-icon {
        width: 50px;
        height: 50px;
        margin-bottom: 10px;
        background: #F4F6F8; /* Mantém fundo cinza */
    }

    .exam-card h3 {
        font-size: 0.95rem; /* Fonte ajustada para caber em 2 colunas */
        line-height: 1.3;
        margin-bottom: 8px;
        min-height: 2.6em; /* Reserva espaço para 2 linhas de título */
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .exam-card p {
        font-size: 0.8rem;
        line-height: 1.4;
        display: -webkit-box;
        -webkit-line-clamp: 3; /* Limita a 3 linhas para não esticar demais */
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* --- INTERATIVIDADE TÁTIL (Touch Feedback) --- */
    /* Quando o usuário toca na tela (:active) */
    .exam-card:active {
        transform: scale(0.96) !important; /* "Afunda" o botão */
        border-color: var(--color-green); /* Acende a borda */
        background-color: #fcfdfc; /* Fundo levemente esverdeado */
        box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Sombra diminui */
        transition: 0.1s; /* Resposta rápida */
    }
    
    .exam-card:active .card-icon {
        background-color: var(--color-green);
        color: white;
    }
    
    .exam-card:active .card-icon svg {
        fill: white;
    }
}

/* =========================================================
   AJUSTE FINO: CELULARES MUITO PEQUENOS (320px - 360px)
   Aqui 2 colunas ficam apertadas demais, então voltamos para 1.
   ========================================================= */
@media (max-width: 370px) {
    .exams-grid {
        grid-template-columns: 1fr; /* Volta para 1 coluna */
    }
    
    .exam-card {
        min-height: auto; /* Altura automática */
        flex-direction: row; /* Ícone na esquerda, Texto na direita (Lista) */
        text-align: left;
        align-items: flex-start;
        padding: 15px;
        gap: 15px;
    }
    
    .card-icon {
        margin-bottom: 0;
        flex-shrink: 0; /* Ícone não esmaga */
    }
    
    .exam-card h3 {
        justify-content: flex-start;
        min-height: auto;
        margin-bottom: 4px;
        font-size: 1rem;
    }
    
    .exam-card p {
        -webkit-line-clamp: 2;
    }
}

/* =========================================================
   AJUSTE FINO: CELULARES PEQUENOS (360px para baixo)
   Transforma o grid de 2 colunas em uma lista horizontal (estilo app).
   ========================================================= */
   @media (max-width: 380px) {
    /* 1. Força 1 coluna só */
    .exams-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 0;
    }

    /* 2. Muda o layout do card de Vertical para Horizontal */
    .exam-card {
        /* Usa Grid interno para posicionar ícone na esquerda e texto na direita */
        display: grid !important;
        grid-template-columns: auto 1fr; /* Coluna 1: Ícone | Coluna 2: Texto */
        grid-template-rows: auto auto; /* Duas linhas para título e descrição */
        column-gap: 15px; /* Espaço entre ícone e texto */
        row-gap: 2px; /* Espaço entre título e descrição */
        
        padding: 12px 15px; /* Card mais compacto */
        text-align: left; /* Alinha texto à esquerda */
        align-items: center;
        min-height: auto; /* Remove altura mínima forçada */
    }

    /* Ajuste do Ícone */
    .card-icon {
        grid-row: 1 / span 2; /* O ícone ocupa a altura das duas linhas de texto */
        margin-bottom: 0; /* Remove margem de baixo */
        width: 48px; /* Tamanho fixo para não amassar */
        height: 48px;
        flex-shrink: 0;
    }
    
    .card-icon svg {
        width: 22px;
        height: 22px;
    }

    /* Ajuste do Título (H3) */
    .exam-card h3 {
        grid-column: 2; /* Fica na segunda coluna */
        grid-row: 1; /* Primeira linha */
        margin: 0;
        font-size: 0.95rem;
        min-height: auto;
        justify-content: flex-start; /* Garante alinhamento a esquerda */
        font-weight: 700;
    }

    /* Ajuste da Descrição (P) */
    .exam-card p {
        grid-column: 2; /* Fica na segunda coluna */
        grid-row: 2; /* Segunda linha */
        margin: 0;
        font-size: 0.8rem;
        color: #8898AA;
        /* Limita a 2 linhas para ficar limpo como no print */
        -webkit-line-clamp: 2; 
        line-clamp: 2;
    }
}

/* =========================================================
   BLOCO 03: GESTÃO E SOCIAL
   Foco: Lista estilo "Menu de App" e ajuste do Card Flutuante
   ========================================================= */

   @media (max-width: 991px) {
    /* Transforma em 1 Coluna */
    .management-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    /* Ordem: Texto primeiro, Visual depois */
    .management-content { order: 1; }
    .management-visual { order: 2; }

    /* Remove a borda deslocada (shadow sólida) para economizar espaço lateral */
    .image-frame {
        box-shadow: none; 
        border: 4px solid white; /* Moldura simples */
        box-shadow: 0 10px 20px rgba(0,0,0,0.1); /* Sombra suave */
    }
}

/* --- CELULARES (< 768px) --- */
@media (max-width: 768px) {

    .management-content h2{
        font-size: 1.8rem;
    }
    
    /* Ajuste da Lista (Feature List) */
    .feature-list {
        gap: 15px; /* Menos espaço entre os itens */
    }

    .feature-item {
        padding: 15px; /* Card mais compacto */
        border: 1px solid #eee; /* Borda sutil para definir a área */
        align-items: flex-start; /* Alinha ícone e texto no topo caso quebre linha */
    }

    /* FEEDBACK TÁTIL (Touch) */
    .feature-item:active {
        background-color: #F0F9F4; /* Fundo verde bem clarinho ao tocar */
        border-color: var(--color-green);
        transform: scale(0.98); /* Leve afundamento */
        transition: 0.1s;
    }

    /* Ajuste do Card Flutuante (eSocial) */
    .esocial-card {
        /* Centraliza no mobile */
        right: 50%;
        transform: translateX(50%);
        bottom: -30px; /* Fica metade dentro, metade fora da imagem */
        width: 90%; /* Ocupa largura quase total */
        max-width: 350px;
        
        /* Remove animação de flutuar para não irritar no mobile */
        animation: none; 
        box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    }
    
    /* Garante espaço embaixo da imagem para o card não cobrir o próximo bloco */
    .management-visual {
        margin-bottom: 50px; 
    }
}

/* --- AJUSTE FINO: CELULARES PEQUENOS (360px ou menos) --- */
@media (max-width: 380px) {
    
    /* Compacta ainda mais a lista */
    .feature-item {
        padding: 12px;
        gap: 12px;
    }

    .feature-icon svg {
        width: 24px;
        height: 24px;
    }

    .feature-text h3 {
        font-size: 0.9rem;
        margin-bottom: 2px;
    }

    .feature-text p {
        font-size: 0.75rem;
        line-height: 1.3;
    }

    /* TRUQUE PARA O CARD FLUTUANTE NÃO CORTAR */
    /* Em telas muito pequenas, o card deixa de ser absoluto (flutuante) 
       e vira um bloco normal embaixo da imagem */
    .esocial-card {
        position: relative; /* Deixa de flutuar */
        right: auto;
        bottom: auto;
        transform: none;
        margin-top: -20px; /* Puxa um pouquinho pra cima pra ficar bonito */
        width: 100%;
        max-width: 100%;
        border-radius: 0 0 12px 12px; /* Arredonda só embaixo */
        border: 1px solid #eee;
        border-top: none;
    }
    
    .image-frame {
        /* Remove borda arredondada de baixo para conectar com o card */
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .management-visual {
        margin-bottom: 20px; /* Menos margem pois o card agora ocupa espaço físico */
    }
}


/* =========================================================
   BLOCO 04: LAUDOS TÉCNICOS (Dark Mode)
   Foco: Lista Técnica Horizontal e Scanner Compacto
   ========================================================= */

   @media (max-width: 991px) {
    /* 1. Ajuste do Layout Geral */
    .laudos-grid-wrapper {
        grid-template-columns: 1fr; /* Coluna única */
        gap: 30px;
    }

    /* 2. O Scanner vira um Banner no topo */
    .scanner-visual {
        order: -1; /* Joga pra cima */
        height: 200px; /* Bem mais baixo que no desktop (era 500px) */
        border-radius: 12px;
        margin-bottom: 10px;
    }
    
    /* Ajusta a animação do scanner para a nova altura */
    .scan-line { box-shadow: 0 0 10px var(--color-green); }
    
    /* Esconde os dados flutuantes (dB Level) no mobile para não poluir */
    .data-box { display: none; }
}

/* --- CELULARES (< 768px) --- */
@media (max-width: 768px) {

    .laudos-header  h2{
        font-size: 1.9rem;
    }
    
    .laudos-section {
        padding-top: 50px;
        /* Removemos o recorte diagonal agressivo que pode gerar bugs no mobile */
        clip-path: none; 
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        margin-top: -20px; /* Sobe um pouco para cobrir a seção anterior */
    }

    /* 3. TRANSFORMAÇÃO DOS CARDS (Grid -> Lista) */
    .documents-grid {
        grid-template-columns: 1fr; /* 1 card por linha (Lista) */
        gap: 12px;
    }

    .doc-card {
        /* Layout Horizontal: Ícone | Texto */
        flex-direction: row; 
        align-items: center; /* Centraliza verticalmente */
        padding: 15px;
        background: rgba(255, 255, 255, 0.03); /* Fundo mais leve */
        border: 1px solid rgba(255, 255, 255, 0.08);
    }

    /* Ícone menor e fixo */
    .doc-icon {
        width: 42px;
        height: 42px;
        margin-right: 5px; /* Espaço extra se precisar */
    }

    .doc-icon svg {
        width: 20px;
        height: 20px;
    }

    /* Tipografia ajustada */
    .doc-info h4 {
        font-size: 1rem;
        margin-bottom: 3px;
    }

    .doc-info span {
        font-size: 0.8rem;
        line-height: 1.3;
        color: #8898AA;
    }

    /* --- INTERATIVIDADE NEON (Touch) --- */
    .doc-card:active {
        background: rgba(39, 171, 131, 0.15); /* Fundo verde neon fraco */
        border-color: var(--color-green); /* Borda acende */
        transform: scale(0.98); /* Clique físico */
        transition: 0.1s;
    }
    
    .doc-card:active .doc-icon {
        background: var(--color-green); /* Ícone acende */
    }
    
    .doc-card:active .doc-icon svg {
        fill: #102A43; /* Ícone fica escuro */
    }
}

/* --- AJUSTE FINO: CELULARES PEQUENOS (360px ou menos) --- */
@media (max-width: 380px) {
    
    /* Compacta ainda mais para não quebrar linha feio */
    .doc-card {
        padding: 12px;
        gap: 12px;
    }

    .doc-icon {
        width: 38px;
        height: 38px;
        border-radius: 8px;
    }

    .doc-info h4 {
        font-size: 0.9rem; /* Reduz título */
    }

    .doc-info span {
        font-size: 0.75rem; /* Reduz descrição */
    }

    /* Ajuste do Scanner para telas minúsculas */
    .scanner-visual {
        height: 160px; /* Ainda mais compacto */
    }
}


/* =========================================================
   BLOCO 05: TREINAMENTOS (NRs)
   Foco: "Safety Tickets" - Lista Horizontal para Títulos Longos
   ========================================================= */

   @media (max-width: 991px) {
    .training-section {
        padding: 60px 0;
        /* Desativa parallax no mobile para evitar 'jitter' (tremedeira) */
        background-attachment: scroll; 
        background-position: center top;
    }

    .training-header h2 {
        font-size: 2rem;
        padding: 0 10px;
    }
}

/* --- CELULARES (< 768px) - Transformação em Lista --- */
@media (max-width: 768px) {
    
    .training-grid {
        /* Força 1 coluna para garantir leitura dos textos longos das NRs */
        grid-template-columns: 1fr; 
        gap: 15px;
    }

    .train-card {
        /* Muda de Vertical para Horizontal (Ícone | Conteúdo) */
        flex-direction: row;
        align-items: flex-start; /* Alinha no topo caso o texto seja grande */
        text-align: left;
        padding: 15px;
        min-height: auto;
        gap: 20px;
        
        /* Vidro mais forte para contraste sobre a foto de fundo */
        background: rgba(16, 42, 67, 0.85); /* Fundo escuro azulado */
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
        
        /* Prepara a animação da borda lateral */
        overflow: hidden; 
    }

    /* O Ícone fica fixo na esquerda */
    .train-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 0; /* Remove margem de baixo */
        flex-shrink: 0; /* Impede que o ícone amasse */
        margin-top: 5px; /* Alinha visualmente com o título */
    }
    
    .train-icon svg {
        fill: rgba(255,255,255,0.8);
    }

    .train-content {
        flex: 1; /* Ocupa o resto do espaço */
    }

    /* A Badge da NR (NR-10, NR-35) */
    .nr-code {
        font-size: 0.75rem;
        padding: 2px 8px;
        margin-bottom: 6px;
        background: rgba(39, 171, 131, 0.2); /* Verde translúcido */
    }

    .train-content h3 {
        font-size: 1rem;
        line-height: 1.3;
        margin-bottom: 4px;
        color: white;
    }

    .train-content p {
        font-size: 0.85rem;
        color: #B0BEC5; /* Cinza claro para leitura sobre fundo escuro */
        line-height: 1.4;
    }

    /* --- BORDA DE SEGURANÇA (Safety Stripe Interativo) --- */
    /* No desktop a borda era embaixo. No mobile, vamos colocar na lateral esquerda */
    .card-border {
        left: 0;
        bottom: 0;
        width: 4px; /* Faixa lateral */
        height: 100%; /* Altura total */
        transform: scaleY(0); /* Começa escondido verticalmente */
        transform-origin: bottom;
        background: var(--color-green);
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    }

    /* --- FEEDBACK TÁTIL (Touch) --- */
    .train-card:active {
        transform: scale(0.98); /* Afunda */
        background: rgba(255, 255, 255, 0.1); /* Flash de luz */
    }

    /* Ao tocar, a faixa lateral sobe preenchendo a lateral */
    .train-card:active .card-border {
        transform: scaleY(1);
    }
    
    .train-card:active .train-icon svg {
        fill: var(--color-green);
    }
}

/* --- AJUSTE FINO: CELULARES PEQUENOS (320px - 360px) --- */
@media (max-width: 380px) {
    .train-card {
        padding: 12px;
        gap: 12px;
    }
    
    .train-icon {
        width: 32px;
        height: 32px;
    }
    
    .train-content h3 {
        font-size: 0.9rem;
    }
    
    .train-content p {
        font-size: 0.75rem;
    }
}


/* =========================================================
   BLOCO 06: PARCEIROS (Carrossel Infinito Mobile)
   Foco: Logos Grandes, Legibilidade e Loop Suave
   ========================================================= */

   @media (max-width: 991px) {

    .partners-header h4 {
        font-size: 0.8rem; /* Texto menor, mas legível */
        opacity: 0.7;
    }


    .partners-section {
        padding: 40px 0;
    }

    /* Ajuste do Container para focar no centro */
    .slider-container {
        height: 140px; /* Mais alto no mobile para logos grandes */
        padding: 10px 0;

        /* Máscara um pouco menor no mobile para aproveitar espaço */
        -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
        mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
    }

    /* Reduz a largura do Fade lateral para não cobrir as logos */
    .fade-overlay {
        width: 40px; /* Degradê mais curto nas bordas */
    }

    /* O TRILHO (Track) */
    .slider-track {
        gap: 40px; /* Menos espaço entre logos no mobile */
        animation-duration: 20s; /* Um pouco mais rápido no mobile */
    }

    /* AS LOGOS (O ajuste principal) */
    .partner-logo {
        height: 70px; /* Logos GRANDES como você pediu */
        filter: grayscale(0%) opacity(0.9); /* Colorido no mobile */
    }
    
    /* Ao tocar na logo, ela fica 100% visível */
    .partner-logo:active {
        opacity: 1;
        transform: scale(1.1);
    }
}

/* --- AJUSTE PARA TELAS MENORES (320px - 360px) --- */
@media (max-width: 380px) {
    .slider-track {
        gap: 35px; /* Um pouco menos de espaço */
        animation-duration: 40s; /* Ajuste de tempo */
    }

    .partner-logo {
        height: 60px; /* Levemente menor, mas ainda grande para a tela */
    }
    
    .slider-container {
        height: 140px; /* Mais alto no mobile para logos grandes */
        padding: 10px 0;
    }
}


/* =========================================================
   BLOCO 07: RODAPÉ PREMIUM (Mobile Experience)
   Foco: Ergonomia, ID Cards Estilo App e CTA de Impacto
   ========================================================= */

   @media (max-width: 991px) {
    
    /* 1. Ajuste da Estrutura Geral */
    .site-footer {
        padding-top: 60px; /* Reduz espaço topo */
        padding-bottom: 40px;
        margin-top: 0; /* Remove margem negativa do desktop */
        text-align: center; /* Centraliza tudo */
    }

    .footer-content {
        padding-top: 0;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        gap: 50px; /* Espaço generoso entre blocos */
        margin-bottom: 40px;
    }

    /* --- 2. CTA DE IMPACTO (Sua empresa está segura?) --- */
    .footer-cta-wrapper {
        position: relative;
        top: 0;
        transform: translateY(-50px); /* Puxa levemente pra cima pra conectar com a seção anterior */
        margin-bottom: -20px; /* Compensa o puxão */
        padding: 0 15px;
    }

    .footer-cta {
        flex-direction: column;
        text-align: center;
        padding: 30px 20px;
        background: linear-gradient(135deg, #4EA868 0%, #102A43 100%); /* Gradiente exclusivo mobile */
        border: 1px solid rgba(255,255,255,0.2);
        box-shadow: 0 15px 35px rgba(0,0,0,0.25);
    }

    .cta-text h3 {
        font-size: 1.5rem;
    }

    .btn-cta-glow {
        width: 100%; /* Botão ocupa largura total */
        justify-content: center;
        display: flex;
        margin-top: 15px;
    }

    /* --- 3. MARCA E SOCIAL --- */
    .footer-brand {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        margin-bottom: 20px;
        position: relative;
        z-index: 5;
    }

    .footer-logo {
        /* AJUSTE 1: Empurra a logo para baixo para não cortar */
        margin-top: 60px; 
        height: 80px; 
        width: auto;
        object-fit: contain;
        margin-bottom: 25px;
    }

    .brand-desc {
        /* Se tiver texto descritivo, centraliza e dá margem */
        text-align: center;
        margin-bottom: 30px;
        padding: 0 10px;
    }

    .social-magnetic-area {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        align-items: center;
    }

    .social-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        max-width: 340px;
        background: rgba(255,255,255,0.08);
        border: 1px solid rgba(255,255,255,0.15);
        padding: 12px 15px;
        border-radius: 50px;
        color: white;
        text-decoration: none;
        
        /* AQUI ESTÁ A MUDANÇA: */
        /* Animamos APENAS a cor de fundo e a borda. Removemos qualquer 'transform' */
        transition: background 0.3s ease, border-color 0.3s ease;
    }
    
    .social-btn svg {
        width: 20px;
        height: 20px;
        margin-right: 10px;
        fill: white;
        flex-shrink: 0;
    }
    
    .social-btn span {
        font-size: clamp(0.75rem, 4vw, 0.95rem);
        font-weight: 500;
        white-space: nowrap;
        letter-spacing: 0.3px;
    }
    
    .social-btn:hover {
        background: var(--color-green);
        border-color: var(--color-green);
        
        /* Garante que não haja movimento nem sombra que altere o layout */
        transform: none;
        box-shadow: none; 
    }
    
    .social-btn:hover {
        background: var(--color-green);
        border-color: var(--color-green);
        transform: translateX(10px);
    }

    /* --- 4. ID CARDS (Marcelo e Reginaldo) - O GRANDE DESTAQUE --- */
    .footer-team {
        align-items: center;
    }

    .footer-title::after {
        left: 50%;
        transform: translateX(-50%); /* Centraliza o sublinhado do título */
    }

    .tech-id-card {
        width: 100%;
        flex-direction: row; /* Mantém ícone na esquerda, texto na direita */
        align-items: center;
        text-align: left; /* Texto alinhado a esquerda para leitura fácil */
        
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-left: none; /* Remove borda lateral desktop */
        border-bottom: 4px solid var(--color-green); /* Borda colorida embaixo */
        
        padding: 20px;
        border-radius: 16px; /* Mais arredondado estilo iOS */
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
        margin-bottom: 20px;
    }

    .id-icon {
        width: 50px;
        height: 50px;
        font-size: 1.8rem;
        flex-shrink: 0; /* Ícone não amassa */
        margin-right: 15px;
        background: rgba(78, 168, 104, 0.2); /* Fundo verde translúcido */
    }

    .id-info strong {
        font-size: 1.1rem;
        margin-bottom: 2px;
        display: block;
    }
    
    .phone-link {
        display: block;
        margin-top: 8px;
        padding: 8px 12px;
        background: rgba(255,255,255,0.1);
        border-radius: 6px;
        text-align: center;
        font-size: 0.85rem;
    }

    /* Interatividade Tátil */
    .tech-id-card:active {
        transform: scale(0.97);
        background: rgba(255,255,255,0.1);
        border-bottom-color: white;
    }

    /* --- 5. LINKS E COPYRIGHT --- */
    .footer-links ul li a {
        padding: 10px; /* Aumenta área de toque */
        display: block;
    }

    .footer-links ul li a::before {
        display: none; /* Remove seta no mobile para limpar visual */
    }

    .footer-bottom {
        flex-direction: column;
        gap: 20px;
        border-top: 1px solid rgba(255,255,255,0.05);
    }
    
    .developer-credit span {
        font-size: 0.8rem;
        opacity: 0.6;
    }
}

/* Ajuste para celulares muito pequenos (320px) */
@media (max-width: 360px) {
    .tech-id-card {
        flex-direction: column; /* Vira coluna se a tela for minúscula */
        text-align: center;
    }
    .id-icon { margin-right: 0; margin-bottom: 10px; }
}