/* --- Variáveis --- */
:root {
    --color-bg-dark: #100b2b;
    --color-text-white: #ffffff;
    --color-cta-label: #ffef67;
    --color-menu-active: #10b981;
    --color-menu-hover: #ff914d;
    --color-primary-purple: #a855f7;
    --color-primary-blue: #3b82f6;
    --theme-color-primary: #3b82f6; 
    --theme-color-secondary: #a855f7;
    --theme-gradient: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%);
    --color-pscicologo-primary: #2dd4bf; /* Verde Menta Tecnológico */
    
    --container-width: 1400px;
    
    /* Fontes */
    --font-primary: 'Montserrat', sans-serif;
    --font-condensed: 'Roboto Condensed', sans-serif;
    --font-roboto: 'Roboto', sans-serif;
    --font-poppins: 'Poppins', sans-serif;
    
    --container-width: 1400px !important;
}

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

body {
    font-family: var(--font-primary);
    color: var(--color-text-white);
    overflow-x: hidden !important; 
    width: 100%;
    min-height: 100vh;
    display: flex; flex-direction: column;
    background-color: var(--color-bg-dark);
}
/* --- 3. CONTEÚDO (TOPO SUPREMO) --- */

.site-header {
    position: absolute;
    z-index: 100; /* Menu sempre soberano */
}

/* Garante que o botão flutuante também fique acima */
.secondary-cta-wrapper {
    z-index: 20; 
}


@keyframes oscillate { 0% { transform: translate(-50%, -50%) rotate(-5deg); } 50% { transform: translate(-50%, -50%) rotate(5deg); } 100% { transform: translate(-50%, -50%) rotate(-5deg); } }

/* --- HEADER (RESTAURADO) --- */
.site-header { padding: 20px 0; width: 100%; z-index: 100; position: absolute; top: 0; left: 0; }
.container { width: 90%; max-width: var(--container-width); margin: 0 auto; }
.header-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; }
.header-left-menu ul { display: flex; list-style: none; gap: 15px; }
/* =========================================================================
   HEADER & MENU (CORRIGIDO PARA NÃO QUEBRAR O SUBMENU)
   ========================================================================= */

/* 1. ESTILO APENAS DOS ITENS PRINCIPAIS (Topo) */
/* O sinal > garante que isso NÃO afete o submenu */
.header-left-menu > ul > li > a { 
    font-family: var(--font-condensed) !important; 
    font-size: 12px; 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    color: var(--color-cta-label); 
    display: flex; 
    gap: 8px; 
    align-items: center; 
    text-decoration: none; 
    transition: 0.3s; 
    position: relative; 
    padding-bottom: 5px; 
}

/* Ícones APENAS do Menu Principal */
.header-left-menu > ul > li > a i { 
    color: white !important; 
    font-size: 14px; 
}

/* Linha Animada APENAS no Menu Principal */
.header-left-menu > ul > li > a::after { 
    content: ''; position: absolute; bottom: 0; left: 0; width: 0%; 
    height: 2px; background-color: var(--color-menu-hover); 
    transition: width 0.3s ease; 
}

.header-left-menu > ul > li > a:hover::after,
.header-left-menu > ul > li > a.active-item::after { 
    width: 100%; 
}

.header-left-menu > ul > li > a.active-item::after {
    background-color: var(--color-menu-active);
}

/* Último item (Contato) todo branco */
.header-left-menu > ul > li:last-child > a { color: white !important; }
.header-left-menu > ul > li:last-child > a i { color: white !important; }


/* =========================================================================
   2. ESTILO DO NOVO SUBMENU (Branco, Limpo e Vertical)
   ========================================================================= */

/* Garante que o item "Pai" (Perfis) seja a referência de posição */
.header-left-menu ul li.has-submenu {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}

/* A setinha pequena ao lado de PERFIS */
.arrow-tiny {
    font-size: 10px !important;
    margin-left: 6px;
    opacity: 0.7;
    transition: transform 0.3s ease;
    color: white !important; /* Força cor branca na seta */
}

/* A Caixa Flutuante do Submenu */
.submenu-vertical {
    position: absolute;
    top: 35px; /* Distância do topo */
    left: 50%;
    transform: translateX(-50%) translateY(10px); /* Centraliza e desce um pouco */
    
    min-width: 160px; /* Largura mínima */
    background: #ffffff; /* Fundo Branco */
    padding: 8px 0;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* Sombra suave */
    border: 1px solid rgba(0,0,0,0.05);
    
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease-in-out;
    z-index: 9999;
    
    list-style: none !important;
    display: block !important; /* Garante bloco vertical */
}

/* Triângulo charmoso no topo do menu */
.submenu-vertical::before {
    content: ''; position: absolute; top: -6px; left: 50%;
    transform: translateX(-50%);
    border-left: 6px solid transparent; border-right: 6px solid transparent;
    border-bottom: 6px solid #fff;
}

/* Reset dos itens de lista para vertical */
.submenu-vertical li {
    display: block !important;
    margin: 0 !important;
    width: 100%;
}

/* ESTILO DOS LINKS DO SUBMENU (Reset total do estilo antigo) */
.submenu-vertical li a {
    display: block !important;
    padding: 10px 20px;
    font-family: 'Roboto', sans-serif !important; /* Fonte normal, sem ser condensed */
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #475569 !important; /* Cinza escuro */
    text-transform: none !important; /* Tira o Caps Lock */
    text-decoration: none;
    text-align: left;
    transition: all 0.2s;
    background: transparent;
    
    /* Remove a linha e ícones herdados */
    border-bottom: none !important;
}

/* Remove a linha animada do submenu */
.submenu-vertical li a::after { display: none !important; }

/* Remove ícones dentro do submenu se houver */
.submenu-vertical li a i { display: none !important; }

/* HOVER no Submenu */
.submenu-vertical li a:hover {
    background-color: #f1f5f9;
    color: var(--theme-color-primary, #3b82f6) !important;
    padding-left: 25px; /* Efeitozinho de slide */
}

/* --- AÇÃO DE MOSTRAR --- */
.header-left-menu ul li.has-submenu:hover .submenu-vertical {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.header-left-menu ul li.has-submenu:hover .arrow-tiny {
    transform: rotate(180deg);
}

.header-center-logo img { height: 45px; }
.header-right-actions { display: flex; justify-content: flex-end; gap: 25px; align-items: center; }
.social-icons { display: flex; gap: 12px; }
.social-icons a { opacity: 0.8; font-size: 16px; color: white; border: 1px solid rgba(255,255,255,0.3); border-radius: 50%; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; transition: 0.3s; text-decoration: none; } 
.social-icons a:hover { opacity: 1; background: white; color: var(--color-bg-dark); }
.btn-login { border: 1px solid rgba(255,255,255,0.5); padding: 8px 25px; border-radius: 50px; font-size: 12px; font-weight: 700; display: flex; gap: 8px; align-items: center; letter-spacing: 1px; text-decoration: none; color: white; transition: 0.3s; }
.btn-login:hover { background: white; color: var(--color-bg-dark); }

/* --- HERO GRID (CÓDIGO ORIGINAL DO BACKUP - LIMPO) --- */
.hero-grid { 
    flex-grow: 1; 
    display: grid; 
    /* As colunas laterais de 320px garantem o "ar" que você quer */
    grid-template-columns: 320px 1fr 320px; 
    gap: 20px; 
    align-items: center; 
    justify-content: center; 
    width: 100%; 
    position: relative; 
    z-index: 10;
    /* Removemos alturas forçadas que estouram a tela */
}

/* Colunas Laterais */
.avatar-column { 
    display: flex; flex-direction: column; gap: 0px; 
    pointer-events: none; align-items: center; 
}
.avatar-column > * { pointer-events: auto; }

/* Card do Avatar */
.avatar-card { 
    position: relative; text-align: center; width: 100%; 
    transition: opacity 0.4s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
    cursor: pointer; 
}

/* Imagem do Ícone (Tamanho Original Equilibrado) */
.image-wrapper { 
    position: relative; width: 100%; 
    height: 240px; /* Altura original do backup */
    display: flex; align-items: center; justify-content: center; 
}

.image-wrapper img { 
    max-height: 100%; max-width: 100%; 
    object-fit: contain; 
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.8)); 
}

.image-wrapper a {
    display: flex;
    width: 100%;
    height: 100%; /* Força o link a respeitar os 240px da caixa pai */
    align-items: center;
    justify-content: center;
}

/* Efeitos de Brilho */
.glow-blue { --card-glow-color: #3b82f6; } 
.glow-purple { --card-glow-color: #a855f7; } 
.glow-green { --card-glow-color: #10b981; }

/* Texto Central */
.hero-content-center { text-align: center; z-index: 10; padding: 0 20px; pointer-events: none; }
.hero-content-center * { pointer-events: auto; }

/* Tipografia Original (Fina e Azul) */
.hero-content-center h1 { 
    font-family: var(--font-condensed); 
    font-weight: 300; 
    font-size: 56px; 
    line-height: 1.1; 
    margin-bottom: 25px; 
}

.highlight-text { font-weight: 500; }

.subtitle { 
    font-family: var(--font-condensed); 
    color: #9cdcff; 
    font-size: 22px; 
    max-width: 650px; 
    margin: 0 auto 35px; 
    font-weight: 300; 
    line-height: 1.4; 
}


.cta-label { 
    font-family: var(--font-roboto); 
    color: #ffef67; font-weight: 400; margin-bottom: 15px; 
    font-size: 16px; text-transform: uppercase; 
}

/* Botão Transparente */
.btn-hero-glass { 
    display: inline-flex; align-items: center; justify-content: center; gap: 12px; 
    padding: 18px 50px; border-radius: 50px; 
    font-family: var(--font-primary); font-weight: 700; font-size: 15px; 
    letter-spacing: 1px; text-transform: uppercase; text-decoration: none; color: white; 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 100%); 
    backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.2); 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); margin-bottom: 40px; transition: all 0.4s; 
}
.btn-hero-glass:hover { 
    transform: translateY(-4px) scale(1.02); 
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25) 0%, rgba(255, 255, 255, 0.1) 100%); 
}


/* --- BOTÃO FLUTUANTE (CRIANÇA + PLAY) --- */
/* VERSÃO: ALINHAMENTO ORIGINAL + EFEITO TURBO */

/* --- BOTÃO FLUTUANTE (AJUSTE FINAL: FÍSICA DOS AVATARES) --- */

.secondary-cta-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    cursor: pointer;
    
    /* TAMANHO MENOR: Começa no tamanho natural (1.0) em vez de já começar grande */
    transform: scale(1.0); 
    z-index: 5;
    
    /* SUAVIZAÇÃO IDÊNTICA AOS AVATARES */
    /* Essa curva (0.2, 0.8, 0.2, 1) dá aquele efeito "macio" que freia no final */
    will-change: transform, filter;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* --- AÇÃO HOVER --- */
.secondary-cta-wrapper:hover {
    /* CRESCIMENTO MÍNIMO (De 1.0 para 1.08) */
    /* É apenas um leve destaque, super elegante */
    transform: scale(1.08) !important; 
    
    /* Brilho suave */
    filter: drop-shadow(0 0 25px rgba(200, 230, 255, 0.6));
}

/* Imagem da Criança (MANTIDO O ALINHAMENTO ESQUERDA) */
.cta-avatar-shifted {
    display: block;
    height: 90px;
    width: auto;
    margin-bottom: -20px;
    position: relative;
    z-index: 2;
    
    /* Sombra base (antes do hover) */
    filter: drop-shadow(0 5px 8px rgba(0,0,0,0.4));
    
    /* O SEGREDO DO ALINHAMENTO: Desloca para esquerda */
    transform: translateX(-45px); 
    
    transition: 0.3s;
}

/* Grupo Play + Texto */
.btn-play-presentation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    text-align: left;
    margin-top: 5px;
    position: relative;
    z-index: 1;
}

/* Círculo do Play */
.play-icon-circle {
    width: 55px;
    height: 55px;
    border: 2px solid rgba(255,255,255,0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    background: rgba(255,255,255,0.05);
    transition: 0.3s;
}

/* Ao passar mouse no conjunto, o círculo fica branco sólido */
.secondary-cta-wrapper:hover .play-icon-circle {
    border-color: white;
    background: white;
    color: var(--color-bg-dark); /* Ícone roxo */
    box-shadow: 0 0 15px rgba(255,255,255,0.8); /* Brilho extra só no play */
}

/* Textos */
.play-text {
    font-family: var(--font-poppins);
    line-height: 1.1;
}

.text-assista {
    color: #dfadff;
    font-size: 16px;
    font-weight: 400;
}

.text-apresentacao {
    color: white;
    font-size: 20px;
    font-weight: 700;
    text-transform: uppercase;
}

/* --- FOOTER GLASS BOX --- */
.partners-glass-box {
    width: 60%;
    margin: 0 auto; 
    margin-bottom: 80px; 
    position: relative;
    z-index: 10;
    border-radius: 30px;
    background: rgba(96, 89, 160, 0.24);
    backdrop-filter: blur(50px);
    -webkit-backdrop-filter: blur(50px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-top: 1px solid rgba(255, 255, 255, 0.165);
    overflow: visible; 
}
.partners-glass-box::before {
    content: ''; position: absolute;
    top: auto; bottom: -50px; 
    width: 100%; height: 60px;
    background: rgba(0, 10, 60, 0.323); 
    mix-blend-mode:color-dodge;
    filter: blur(15px);
    z-index: -10; border-radius: 0%; pointer-events: none;
}
.partners-mask-container {
    width: 100%; height: 100%; border-radius: 30px; overflow: hidden; padding: 20px 0;
    mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 15%, black 85%, transparent 100%);
}
.partners-track { display: flex; width: max-content; animation: scroll 40s linear infinite; }
.partners-track:hover { animation-play-state: paused; }
.partners-group { display: flex; align-items: center; gap: 80px; padding-right: 80px; }
.partners-group img { height: 35px; filter: brightness(0) invert(1) opacity(0.7); transition: 0.3s; }
.partners-group img:hover { filter: brightness(0) invert(1) opacity(1); transform: scale(1.1); }
@keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* =========================================================================
   NOVA GALERIA (CLEAN TECH) - APROVADA
   ========================================================================= */

.stories-section {
    position: relative; z-index: 20; 
    background-color: #fdfbf7; padding: 0px 0; width: 100%;
    background-image: 
        radial-gradient(circle at 10% 20%, rgba(168, 85, 247, 0.05) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 40%);
}

.stories-header { text-align: center; margin-bottom: 60px; }
.section-tag { 
    font-family: var(--font-condensed); font-weight: 700; color: var(--color-primary-purple); 
    font-size: 14px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; display: inline-block; 
}
.stories-header h2 {
    font-family: 'Poppins', sans-serif; font-weight: 900; color: #1a1a1a; font-size: 48px; margin-bottom: 15px;
}
.stories-header h2 span {
    background: linear-gradient(90deg, #8e44ad, #3b82f6);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    color: #8e44ad; display: inline-block; 
}
.stories-header .section-description {
    font-family: 'Poppins', sans-serif; font-weight: 400; font-size: 18px; line-height: 1.6; color: #555; max-width: 800px; margin: 0 auto;
}
.text-blue { color: #3b82f6; font-weight: 700; }
.text-purple { color: #a855f7; font-weight: 600; }
.text-pink { color: #ec4899; font-weight: 600; }
.text-green { color: #10b981; font-weight: 600; }
.text-gray { color: #64748b; font-weight: 600; }

/* Modais */
.modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(16, 11, 43, 0.95); z-index: 99999; justify-content: center; align-items: center; backdrop-filter: blur(10px); }
.modal-content-slideshow { width: 100%; max-width: 1200px; height: 90vh; display: flex; align-items: center; justify-content: center; gap: 20px; padding: 20px; }
.modal-image-wrapper { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; }
#modal-img-display { max-height: 80vh; max-width: 100%; object-fit: contain; border-radius: 10px; box-shadow: 0 0 40px rgba(0,0,0,0.5); }
.modal-info-bar { margin-top: 15px; color: white; text-align: center; }
.modal-arrow { background: rgba(255,255,255,0.1); border: none; color: white; font-size: 30px; cursor: pointer; padding: 20px; border-radius: 50%; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.modal-arrow:hover { background: rgba(255,255,255,0.3); color: #ffef67; }
.close-modal { position: absolute; top: 30px; right: 30px; font-size: 40px; color: white; cursor: pointer; border: none; background: transparent; }
.modal-content-video { width: 90%; max-width: 1000px; background: black; border-radius: 15px; overflow: hidden; box-shadow: 0 0 50px rgba(0,0,0,0.8); }
.modal-content-video video { width: 100%; height: auto; display: block; }

/* Responsivo */
@media (max-width: 1100px) {
    #particles-container, .ambient-light-layer { display: none; }
    .partners-glass-box { width: 95%; margin-bottom: 20px; }
}

/* =========================================================================
   SEÇÃO DE DEPOIMENTOS (CORREÇÃO FINAL - SEM CORTE DE MÁSCARA)
   ========================================================================= */

.testimonials-section {
    position: relative; z-index: 20;
    background-color: #fdfbf7; 
    padding: 80px 0 80px 0; 
    width: 100%;
    background-image: 
        radial-gradient(circle at 80% 10%, rgba(168, 85, 247, 0.03) 0%, transparent 30%),
        radial-gradient(circle at 20% 90%, rgba(59, 130, 246, 0.03) 0%, transparent 30%);
    overflow: hidden; 
}

.testimonials-header { text-align: center; margin-bottom: 50px; }
.testimonials-header h2 { font-family: 'Poppins', sans-serif; font-weight: 900; color: #1a1a1a; font-size: 42px; }
.testimonials-header h2 span {
    background: linear-gradient(90deg, #a855f7, #3b82f6);
    background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    color: #a855f7; display: inline-block;
}

/* Container 3D - Espaço vertical generoso */
.carousel-3d-container {
    position: relative; width: 100%; max-width: 1400px; margin: 0 auto;
    perspective: 2000px; 
    height: 550px; 
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    /* overflow: visible é essencial para deixar o avatar vazar se necessário */
    overflow: visible; 
}

.carousel-track {
    position: relative; width: 100%; height: 100%;
    display: flex; justify-content: center; align-items: center;
    transform-style: preserve-3d;
}

/* BASE DO CARD */
.testimonial-card {
    position: absolute;
    width: 400px; height: 340px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 1);
    border-radius: 35px;
    padding: 60px 30px 30px 30px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    cursor: pointer;
    
    /* Transição ajustada */
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.6s ease;
    
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
    box-shadow: 0 15px 40px rgba(0,0,0,0.08);
    
    opacity: 0; z-index: 0; 
    transform: translateX(0) scale(0.5) translateZ(-200px);
}

.testimonial-card:not(.active):hover {
    border-color: var(--color-primary-purple);
    box-shadow: 0 0 20px rgba(168, 85, 247, 0.2);
    opacity: 1 !important; /* Fica totalmente visível no hover */
    z-index: 25;
}

/* --- ESTADOS 3D (POSIÇÕES CORRIGIDAS) --- */

/* 1. ATIVO (Centro) */
.testimonial-card.active {
    opacity: 1; z-index: 30;
    transform: translateX(0) scale(1) translateZ(0);
    box-shadow: 0 30px 70px rgba(168, 85, 247, 0.25);
    cursor: default;
}

/* 2. NÍVEL 1 (Imediato) - Baixados levemente */
.testimonial-card.prev-1 {
    opacity: 0.7; z-index: 20;
    transform: translateX(-280px) translateY(20px) scale(0.85) translateZ(-50px) rotateY(10deg);
}
.testimonial-card.next-1 {
    opacity: 0.7; z-index: 20;
    transform: translateX(280px) translateY(20px) scale(0.85) translateZ(-50px) rotateY(-10deg);
}

/* 3. NÍVEL 2 (Extremos) - SEM MÁSCARA, SÓ OPACIDADE */
.testimonial-card.prev-2 {
    /* Segredo aqui: Opacidade baixa em vez de máscara */
    opacity: 0.15; 
    z-index: 10;
    /* Mais afastado e mais baixo */
    transform: translateX(-520px) translateY(40px) scale(0.75) translateZ(-100px) rotateY(20deg);
}
.testimonial-card.next-2 {
    opacity: 0.15; 
    z-index: 10;
    transform: translateX(520px) translateY(40px) scale(0.75) translateZ(-100px) rotateY(-20deg);
}


/* --- ELEMENTOS INTERNOS --- */
.testimonial-video-wrapper {
    width: 100%; height: 180px; border-radius: 20px; overflow: hidden;
    position: relative; margin-bottom: 15px; border: 2px solid white;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); cursor: pointer;
    background: #000; z-index: 10;
}
.testimonial-video-wrapper img { width: 100%; height: 100%; object-fit: cover; transition: 0.3s; opacity: 0.9; }
.testimonial-video-wrapper:hover img { transform: scale(1.05); opacity: 0.7; }
.testimonial-video-wrapper .play-overlay i { width: 50px; height: 50px; font-size: 16px; }

.testimonial-avatar-wrapper {
    position: absolute; top: -50px; left: 50%; transform: translateX(-50%);
    width: 100px; height: 100px; border-radius: 50%; padding: 4px; 
    background: linear-gradient(135deg, var(--color-primary-purple), var(--color-primary-blue));
    box-shadow: 0 10px 20px rgba(168, 85, 247, 0.3); z-index: 5;
}
.testimonial-avatar-wrapper img {
    width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
    border: 3px solid white; background: white;
}

.testimonial-name { font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 20px; color: #1e293b; margin-bottom: 5px; margin-top: 5px;}
.testimonial-role { font-family: var(--font-roboto); font-size: 14px; color: #64748b; margin-bottom: 15px; }

.testimonial-tag {
    display: inline-block; padding: 6px 18px; border-radius: 20px;
    font-family: var(--font-condensed); font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 1px; color: white;
    margin-bottom: 15px; box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.tag-familia { background: linear-gradient(135deg, #3b82f6, #60a5fa); }
.tag-professor { background: linear-gradient(135deg, #10b981, #34d399); }
.tag-gestor { background: linear-gradient(135deg, #a855f7, #c084fc); }
.tag-video { background: linear-gradient(135deg, #0d0e70, #3577db); }

.testimonial-text {
    font-family: var(--font-roboto); font-size: 14px; line-height: 1.5; color: #334155; font-style: italic;
    display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
}

/* Navegação */
.carousel-navigation { display: flex; gap: 20px; margin-top: 20px; z-index: 50; }

@media (max-width: 1200px) {
    .testimonial-card.prev-2, .testimonial-card.next-2 { opacity: 0; pointer-events: none; } 
}

@media (max-width: 768px) {
    .carousel-3d-container { height: 450px; }
    .testimonial-card { width: 90%; height: auto; padding: 30px; padding-top: 50px; }
    .testimonial-card.prev-1, .testimonial-card.next-1, .testimonial-card.prev-2, .testimonial-card.next-2 { opacity: 0; transform: translateX(0) scale(0.9); pointer-events: none; }
    .testimonial-card.active { transform: translateX(0) scale(1); width: 90%; }
}

/* =========================================================================
   SEÇÃO DE CONTATO E SOCIAL (RAÍZES & ANTENAS)
   ========================================================================= */

.contact-social-section {
    position: relative; z-index: 20;
    background-color: #fdfbf7; padding: 80px 0 120px;
    background-image: linear-gradient(to top, rgba(255,255,255,1) 0%, rgba(240,240,255,0.5) 100%);
}

.contact-grid-layout {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Duas colunas iguais */
    padding-bottom: 70px !important;
    gap: 60px;
    align-items: start;
}

/* --- COLUNA ESQUERDA: CARD DE VIDRO (MAPA) --- */
.roots-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 40px;
    padding: 40px;
    box-shadow: 0 20px 50px rgba(168, 85, 247, 0.08);
    display: flex; flex-direction: column; gap: 25px;
    transition: transform 0.3s ease;
}
.roots-card:hover { transform: translateY(-5px); }

.roots-header .tag-location {
    font-family: var(--font-condensed); font-weight: 700; font-size: 12px; 
    color: var(--color-primary-blue); background: rgba(59, 130, 246, 0.1);
    padding: 5px 12px; border-radius: 20px; display: inline-block; margin-bottom: 15px;
}
.roots-header h3 {
    font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 32px; color: #1e293b; margin-bottom: 10px;
}
.roots-header h3 span { color: var(--color-primary-blue); }
.roots-header p {
    font-family: var(--font-roboto); color: #64748b; font-size: 15px; line-height: 1.5;
}

/* Mapa Estilizado */
.map-frame {
    width: 100%; height: 250px;
    border-radius: 20px; overflow: hidden;
    border: 4px solid white;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    /* Filtro para deixar o mapa mais suave e combinar com o bege */
    filter: sepia(0.2) saturate(0.8); transition: 0.3s;
}
.map-frame:hover { filter: none; } /* Mapa fica cor normal ao passar mouse */

/* Info de Contato Direto */
.contact-direct { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.contact-item { display: flex; align-items: center; gap: 15px; }
.contact-item .icon-box {
    width: 40px; height: 40px; border-radius: 50%; background: white;
    color: var(--color-primary-purple); display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05); flex-shrink: 0;
}
.contact-item .info-text { display: flex; flex-direction: column; }
.contact-item .info-text strong { font-family: var(--font-primary); font-size: 14px; color: #1e293b; }
.contact-item .info-text span { font-family: var(--font-roboto); font-size: 13px; color: #64748b; }


/* =========================================================================
   SEÇÃO: ENTRE NO NOSSO UNIVERSO (CORREÇÃO TÍTULO E ALTURA)
   ========================================================================= */

.universe-section {
    padding: 60px 0;
    background-color: #ffffff; /* Fundo leve para destacar */
    border-radius: 30px;
}

/* --- 1. TÍTULO (QUE ESTAVA FALTANDO) --- */
.section-header-left {
    margin-bottom: 30px;
}

.section-header-left h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600; /* Extra bold */
    font-size: 36px;
    color: #1e293b; /* Cor escura base */
    margin-bottom: 10px;
    letter-spacing: -1px;
}

/* O texto "Universo" com degradê Roxo/Rosa */
.section-header-left .highlight-text {
    /* 1. Define o Degradê */
    background: linear-gradient(90deg, #833ab4, #fd1d1d);
    
    /* 2. Aplica o recorte (Versão Padrão + Versão Chrome/Safari) */
    background-clip: text;
    -webkit-background-clip: text;
    
    /* 3. Torna a letra transparente para o fundo aparecer */
    -webkit-text-fill-color: transparent;
    color: transparent;
    
    display: inline-block;
}

.section-header-left p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    color: #64748b;
}

/* --- 2. CARDS "SLIM" (MAIS SUTIS) --- */
.universe-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    /* PADDING REDUZIDO: De 30px para 18px -> Fica mais fino/sutil */
    padding: 18px 30px; 
    
    border-radius: 15px; /* Bordas um pouco menos arredondadas */
    text-decoration: none;
    margin-bottom: 15px; /* Menos espaço entre eles */
    
    border: none !important;
    background-color: transparent;
    
    box-shadow: 0 5px 20px rgba(0,0,0,0.05); /* Sombra mais leve */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    
    color: white !important;
}

/* Hover mais delicado */
.universe-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.universe-card h3, .universe-card p, .universe-card i {
    color: white !important;
}

/* --- CORES DOS CARDS (DEGRADÊS SOLICITADOS) --- */
.card-insta {
    background: linear-gradient(45deg, #833ab4, #fd1d1d, #fcb045);
}

.card-youtube {
    /* Vermelho YouTube mais fechado e elegante */
    background: linear-gradient(90deg, #d90429 0%, #ef233c 100%);
}

.card-career {
    /* Degradê "Empresa": Preto/Azul/Verde, mas mais suave */
    background: linear-gradient(90deg, #0f172a 0%, #1e40af 60%, #10b981 100%);
}

/* --- ÍCONE CIRCULAR (REDUZIDO) --- */
.uni-icon-circle {
    /* Reduzi de 60px para 45px para acompanhar a altura menor do card */
    width: 45px; height: 45px;
    
    background: rgba(255, 255, 255, 0.2); 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; /* Ícone menor */
    margin-right: 20px;
    flex-shrink: 0;
}

/* Texto */
.uni-text { flex-grow: 1; }

.uni-text h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 18px; /* Fonte levemente menor */
    margin-bottom: 2px;
    line-height: 1.2;
}

.uni-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    opacity: 0.9;
    margin: 0;
    font-weight: 400;
}

/* Seta */
.uni-arrow { font-size: 16px; opacity: 0.8; }

/* Esconde ícones pequenos antigos */
.social-mini-row { display: none !important; }

/* Responsivo */
@media (max-width: 900px) {
    .contact-grid-layout { grid-template-columns: 1fr; gap: 50px;}
    .insta-mosaic { grid-template-rows: 140px 140px; }
    .map-frame { height: 200px; }
}

/* Container da pilha de cards */
.action-stack {
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaço entre os cartões */
    margin-top: 20px;
}

/* Estilo Base dos Cards */
.feature-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 25px;
    border-radius: 20px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    background: white; /* Fundo padrão */
    position: relative;
    overflow: hidden;
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
}

/* Ícone Esquerdo (Círculo) */
.feature-card .card-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
    transition: 0.3s;
}

/* Texto Central */
.feature-card .card-info {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.feature-card .card-info strong {
    font-family: 'Poppins', sans-serif; /* Sua fonte principal */
    font-weight: 700;
    font-size: 16px;
    line-height: 1.2;
    margin-bottom: 4px;
}

.feature-card .card-info span {
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    opacity: 0.8;
}

/* Seta direita */
.feature-card .card-arrow {
    font-size: 14px;
    opacity: 0.5;
    transition: 0.3s;
}

.feature-card:hover .card-arrow {
    transform: translateX(5px);
    opacity: 1;
}

/* --- VARIAÇÕES ESPECÍFICAS --- */

/* 1. Instagram (Destaque com Gradiente da Marca) */
.instagram-card {
    background: linear-gradient(135deg, #833ab4, #fd1d1d, #fcb045); /* Gradiente Insta Clean */
    /* OU use as cores da sua marca: background: linear-gradient(135deg, #a855f7, #3b82f6); */
    border: none;
    color: white;
}
.instagram-card .card-icon {
    background: rgba(255, 255, 255, 0.2);
    color: white;
    backdrop-filter: blur(5px);
}
.instagram-card .card-info strong, 
.instagram-card .card-info span,
.instagram-card .card-arrow {
    color: white; /* Garante texto branco no fundo colorido */
}

/* 2. YouTube (Clean com destaque vermelho) */
.youtube-card .card-icon {
    background: rgba(255, 0, 0, 0.1);
    color: #FF0000;
}
.youtube-card .card-info strong { color: #1e293b; }
.youtube-card .card-info span { color: #64748b; }
.youtube-card .card-arrow { color: #FF0000; }

/* 3. Career / Trabalhe Conosco (Profissional Azul/Roxo) */
.career-card {
    border-left: 4px solid #3b82f6; /* Detalhe lateral elegante */
}
.career-card .card-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3b82f6;
}
.career-card:hover .card-icon {
    background: #3b82f6;
    color: white;
}
.career-card .card-info strong { color: #1e293b; }
.career-card .card-info span { color: #64748b; }
.career-card .card-arrow { color: #3b82f6; }

/* =========================================================================
   ANIMAÇÕES GERAIS (ELEGANCE MOTION)
   ========================================================================= */

/* Classe base para elementos que serão animados */
.reveal-hidden {
    opacity: 0;
    transform: translateY(40px); /* Começa 40px abaixo */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1); /* Curva suave "Apple Style" */
    will-change: opacity, transform;
}

/* Quando o JS disser que está visível */
.reveal-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Variação: Zoom In (Para imagens e cards) */
.reveal-zoom {
    opacity: 0;
    transform: scale(0.92) translateY(20px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-zoom.reveal-visible {
    opacity: 1;
    transform: scale(1) translateY(0);
}

/* Variação: Slide Lateral (Para textos laterais) */
.reveal-left {
    opacity: 0;
    transform: translateX(-40px);
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.reveal-left.reveal-visible {
    opacity: 1;
    transform: translateX(0);
}

/* --- DELAYS (Para efeito cascata) --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }

/* --- HERO SPECIFIC ANIMATION (Load inicial) --- */
/* O Hero não depende de scroll, ele anima ao carregar a página */

/* --- HERO SPECIFIC ANIMATION --- */
/* Mantemos apenas o Fade Up do texto/botões que funcionou bem */
.hero-animate-up {
    opacity: 0;
    transform: translateY(30px);
    animation: heroFadeUp 1s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes heroFadeUp {
    to { opacity: 1; transform: translateY(0); }
}

/* Remova as classes .hero-animate-pop e @keyframes heroPopIn daqui */

/* FOOTER FLUTUANTE ENTRADA */
.footer-pop-up {
    opacity: 0;
    transform: translateX(-50%) translateY(50px) scale(0.9); /* Centralizado horizontalmente */
    transition: all 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.footer-pop-up.reveal-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1); /* Mantém o translate X do CSS original */
}


/* =========================================================================
   PÁGINAS INTERNAS (QUEM SOMOS - FINE TUNING)
   ========================================================================= */

.internal-page {
    background-color: #f3f3ea;
    min-height: 100vh;
}

.internal-page.pg-quem-somos {
    background-image: url('assets/bg-top-interna.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* HEADER INTERNO */
.header-internal {
    position: fixed;
    top: 0; left: 0; width: 100%;
    height: 90px;
    z-index: 100;
    background: transparent; 
    transition: background 0.4s ease;
}

.header-internal.scrolled-bg {
    background: #5544d5; 
    backdrop-filter: blur(10px);
}

/* HERO CONTAINER */
.internal-hero {
    padding-top: 130px;
    padding-bottom: 20px;
    position: relative;
    /* Permite que a imagem saia da section para cima */
    overflow: visible; 
}

.hero-card-container {
    /* Mantém o background e configurações anteriores */
    background-image: url('assets/bg-caixa-transparent-interna.webp');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    
    /* AJUSTE NO PADDING: Remove o padding de baixo para o menu colar no fundo */
    padding: 20px 60px 0 60px; /* Era 50px embaixo, agora é 0 */
    
    display: flex;
    flex-direction: column;
    /* gap: 30px; -> REMOVA ou diminua esse gap para controlar a distância da imagem */
    gap: 0; 
    
    position: relative;
    z-index: 10;
}

/* --- 1. LINHA DE CIMA (Texto + Imagem) --- */
.hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    /* Altura mínima para garantir espaço */
    min-height: 200px; 
}

/* TEXTO (Lado Esquerdo) */
.hero-text-area {
    width: 60%; /* Espaço do texto */
    position: relative;
    z-index: 5;
}

/* BREADCRUMBS (Navegação) */
.breadcrumbs {
    font-family: var(--font-roboto); /* Ou Condensed se preferir */
    font-size: 12px; 
    font-weight: 500;
    letter-spacing: 1px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.home-link {
    color: white;
    text-decoration: none;
    opacity: 0.8;
    transition: 0.3s;
}
.home-link:hover { opacity: 1; text-decoration: underline; }

.separator { color: rgba(255,255,255,0.5); margin: 0 8px; }

/* O "Verdinho" para mostrar que está ON na página */
.current-page { 
    color: #381fd9; /* Verde neon suave */
    font-weight: 700; 
}

/* TÍTULO: QUEM SOMOS (Poppins Black, Branco, ~21pt) */
.hero-text-area h1 {
    font-family: 'Poppins', sans-serif;
    font-weight: 900; /* Black */
    font-size: 28px; /* Aprox 21pt */
    color: white; 
    margin-bottom: 15px;
    line-height: 1.2;
}

/* INTRODUÇÃO (Roboto, Preto, ~13pt) */
.hero-lead {
    font-family: 'Roboto', sans-serif;
    font-size: 21px; /* Aprox 13pt */
    font-weight: 500; /* Levemente mais grosso para ler no vidro */
    color: #000000; /* Preto pedido */
    line-height: 1.5;
    max-width: 70%;
}

/* IMAGEM DAS PESSOAS (Vazando para o Menu) */
.hero-image-area {
    position: absolute;
    right: 100px; /* Alinhado à direita da caixa */
    width: auto; 
    max-width: 300px; 
    display: flex;
    align-items: flex-start;
    justify-content: center;
    pointer-events: none;
    z-index: 20;
}

/* --- 2. LINHA DE BAIXO (Pilares em Cards Iguais) --- */
.pillars-row {
    display: grid;
    /* 3 Colunas de tamanho igual */
    grid-template-columns: 1fr 1fr 1fr; 
    gap: 25px; /* Espaço entre os cards */
    
    /* "Mais para dentro": Margem lateral para afunilar em relação ao texto de cima */
    margin-left: 20px;
    margin-right: 20px;
    margin-top: 0px;
    margin-bottom: 30px;
    
    position: relative;
    z-index: 5;
}

/* ESTILO DO CARD (A CAIXA BRANCA TRANSPARENTE) */
.pilar-box {
    /* Fundo branco sutil e transparente */
    background: rgba(255, 255, 255, 0.267); 
    /* Bordinha bem fina e delicada */
    border: 1px solid rgba(255, 255, 255, 0.6); 
    /* Sombra projetada clarinha */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); 
    
    border-radius: 20px;
    padding: 30px;
    
    /* Garante que todos tenham a MESMA ALTURA visualmente */
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito leve ao passar o mouse (Opcional, dá vida) */
.pilar-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
}

/* TÍTULOS DOS PILARES (Mantis as cores que você definiu) */
.pilar-box h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 900; 
    font-size: 20px;
    margin-bottom: 12px;
}

.pilar-missao h3 { color: #061082; }
.pilar-visao h3  { color: #459967; }
.pilar-valores h3 { color: #e99715; }

/* CORPO DOS PILARES */
.pilar-box p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px; /* Ajustei levemente para caber melhor no card */
    font-weight: 400;
    color: #333333; /* Cinza escuro para contraste no fundo branco */
    line-height: 1.5;
    margin: 0;
}

/* =========================================================================
   CONTEÚDO BRANCO MELHORADO (LAYOUT EDITORIAL)
   ========================================================================= */

/* Ajuste do Container Principal */
.white-content-section {
    padding-bottom: 0px;
    position: relative;
    z-index: 5;
    /* Puxa levemente para cima para colar visualmente na hero, se desejar */
    margin-top: 0px; 
}

.content-card-white {
    background: #ffffff; /* Branco Sólido para leitura melhor, ou mantenha rgba se preferir vidro */
    border-radius: 30px;
    padding: 80px; /* Mais respiro interno */
    box-shadow: 0 5px 40px rgba(0,0,0,0.05); 
    margin-bottom: 150px; /* Espaço antes do footer */
    width: 100%;
    overflow: hidden;
}

/* --- 1. HISTÓRIA (GRID 2 COLUNAS) --- */
.history-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr; /* Texto um pouco maior que a imagem */
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.section-tag {
    display: inline-block;
    font-family: var(--font-condensed);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    color: #e99715; /* Laranja da marca */
    margin-bottom: 15px;
    text-transform: uppercase;
    background: rgba(233, 151, 21, 0.1);
    padding: 5px 12px;
    border-radius: 20px;
}

.history-text h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 36px;
    color: #061082;
    line-height: 1.2;
    margin-bottom: 25px;
}

.history-text p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    color: #555;
    margin-bottom: 20px;
}

.quote-box {
    border-left: 4px solid #459967; /* Verde da marca */
    padding-left: 20px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #061082;
    font-style: italic;
    margin-top: 30px;
}

/* Visual da História (Imagem Direita) */
.history-visual {
    position: relative;
    height: 400px;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 20px 20px 0px rgba(233, 151, 21, 0.15); /* Sombra sólida decorativa */
}

.image-placeholder-styled {
    width: 100%;
    height: 100%;
    background-color: #f0f0f0;
    position: relative;
}

.image-placeholder-styled img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --- 2. IMPACTO (RÉGUA DE NÚMEROS) --- */
.impact-bar {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: linear-gradient(90deg, #f8f9fa 0%, #fff 50%, #f8f9fa 100%);
    border-radius: 20px;
    padding: 40px;
    margin-bottom: 80px;
    border: 1px solid rgba(0,0,0,0.03);
}

.impact-item {
    text-align: center;
}

.impact-number {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 42px;
    color: #2b53e2; /* Azul vibrante */
}

.impact-label {
    font-family: var(--font-roboto);
    font-size: 14px;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.impact-divider {
    width: 1px;
    height: 50px;
    background-color: #ddd;
}

/* --- 3. ECOSSISTEMA (CARDS DE SERVIÇO) --- */
.section-header-center {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.section-header-center h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 32px;
    color: #061082;
    margin-bottom: 10px;
}

.section-header-center p {
    color: #666;
    font-size: 16px;
}

.ecosystem-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
}

.eco-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    padding: 40px 30px;
    text-align: center;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.eco-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    border-color: transparent;
}

/* Ícone */
.eco-icon {
    width: 70px;
    height: 70px;
    background: #eff6ff;
    color: #2b53e2;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 25px auto;
    transition: 0.3s;
}

.eco-card:hover .eco-icon {
    background: #2b53e2;
    color: white;
}

/* Card do Meio (Destaque) */
.highlight-card {
    border-color: #2b53e2;
    background: #fbfdff;
}

.eco-card h3 {
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    font-size: 20px;
    color: #1e293b;
    margin-bottom: 15px;
}

.eco-card p {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* --- RESPONSIVO --- */
@media (max-width: 1100px) {
    .content-card-white { padding: 40px; }
    
    .history-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .history-visual { height: 300px; }
    
    .impact-bar {
        flex-direction: column;
        gap: 30px;
    }
    .impact-divider { width: 50px; height: 1px; }
    
    .ecosystem-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   NOVO DIAGRAMAÇÃO: ORIGIN STORY CARD
   ========================================================================= */

.origin-story-card {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Divide ao meio */
    gap: 60px;
    align-items: center;
    
    /* Um fundo sutil para diferenciar do resto da caixa branca */
    background: linear-gradient(to right, #f8faff, #fff);
    border-radius: 30px;
    padding: 50px;
    border: 1px solid rgba(43, 83, 226, 0.08); /* Borda azul muito sutil */
    
    margin-bottom: 80px; /* Espaço para a régua de impacto */
    position: relative;
    overflow: hidden;
}

/* --- Coluna de Texto --- */
.origin-content {
    position: relative;
    z-index: 2;
}

.origin-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-condensed);
    font-size: 13px; font-weight: 700; letter-spacing: 1px;
    color: #2b53e2; /* Azul da marca */
    text-transform: uppercase;
    background: rgba(43, 83, 226, 0.1);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 25px;
}

.origin-content h2 {
    font-family: 'Poppins', sans-serif;
    font-weight: 900;
    font-size: 34px;
    color: #061082;
    line-height: 1.2;
    margin-bottom: 25px;
}

.lead-paragraph {
    font-size: 18px;
    font-weight: 500;
    color: #1e293b;
    margin-bottom: 20px;
}

.origin-content p {
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    line-height: 1.7;
    color: #555;
    margin-bottom: 20px;
}

/* Destaque com ícone */
.origin-highlight {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    color: #061082;
    background: white;
    padding: 15px 20px;
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(43, 83, 226, 0.08);
    width: fit-content;
}

.highlight-icon {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #2b53e2, #6871ed);
    color: white;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px;
}

/* --- Coluna da Ilustração --- */
.origin-illustration-container {
    position: relative;
    height: 450px; /* Altura fixa para o container */
    display: flex;
    align-items: center;
    justify-content: center;
}

.illustration-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Garante que a ilustração inteira apareça */
    position: relative;
    z-index: 2;
    /* Uma leve animação de flutuação */
    animation: floatIllustration 6s ease-in-out infinite;
    filter: drop-shadow(0 20px 30px rgba(43, 83, 226, 0.15));
}

/* Brilho atrás da ilustração */
.illustration-glow {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 80%; height: 80%;
    background: radial-gradient(circle, rgba(43, 83, 226, 0.2) 0%, transparent 70%);
    filter: blur(40px);
    z-index: 1;
}

@keyframes floatIllustration {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

/* --- Responsivo --- */
@media (max-width: 1100px) {
    .origin-story-card {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 40px 30px;
        text-align: center;
    }
    .origin-badge, .origin-highlight { margin-left: auto; margin-right: auto; }
    
    /* No mobile, a imagem fica menor ou vai para baixo */
    .origin-illustration-container {
        height: 300px;
        order: -1; /* Se quiser que a imagem fique em cima do texto no mobile, use isso. Se não, remova. */
    }
}

/* =========================================================================
   ANIMAÇÕES (REUTILIZÁVEIS)
   ========================================================================= */

/* --- Estado Inicial (Escondido) --- */
.reveal-hidden {
    opacity: 0;
    transform: translateY(30px); /* Levemente descido */
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.reveal-zoom {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.8s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* --- Estado Final (Visível) --- */
.reveal-visible {
    opacity: 1;
    transform: translate(0) scale(1);
}

/* --- Delays (Efeito Cascata) --- */
.delay-100 { transition-delay: 0.1s; }
.delay-200 { transition-delay: 0.2s; }
.delay-300 { transition-delay: 0.3s; }
.delay-400 { transition-delay: 0.4s; }
.delay-500 { transition-delay: 0.5s; }


/* =========================================================================
   PÁGINAS DE AVATARES / FAMÍLIA (CÓDIGO ÚNICO, FINAL E CORRIGIDO)
   ========================================================================= */

/* --- 1. CONFIGURAÇÃO (CORES E FUNDO) --- */
body.pg-familia {
    --theme-color-primary: #3b82f6; /* Azul Principal */
    --theme-color-secondary: #a855f7; /* Roxo Secundário */
    --theme-bg-image: url('assets/bg-top-familia.jpg'); 
    --theme-gradient: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%);
    
    display: block !important; /* Desativa o flex global */
    overflow-x: hidden; 
    background-color: #fdfbf7;
}

.internal-page.pg-familia {
    background-image: var(--theme-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #f3f2ea;
}

/* =========================================================================
   CONFIGURAÇÃO DO TEMAS BG
   ========================================================================= */

body.pg-crianca {
    /* Cores do Tema Criança (Laranja Vibrante e Amarelo Quente) */
    --theme-color-primary: #f97316; /* Laranja Principal */
    --theme-color-secondary: #f59e0b; /* Amarelo/Âmbar Secundário */
    
    /* Imagem de Fundo do Topo (Crie este arquivo ou use um placeholder) */
    --theme-bg-image: url('assets/bg-top-crianca.jpg'); 
    
    /* Gradiente dos detalhes */
    --theme-gradient: linear-gradient(90deg, #f97316 0%, #f59e0b 100%);
    
    /* Configurações Estruturais (Mantém igual ao família) */
    display: block !important;
    overflow-x: hidden; 
    background-color: #fdfbf7;
}

/* Aplica o background específico */
.internal-page.pg-crianca {
    background-image: var(--theme-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #fdfbf7; /* Cor de fundo caso a img acabe */
}


/* --- 2. HERO SECTION (TOPO) --- */
.internal-hero.avatar-hero {
    padding-top: 130px !important;
    padding-bottom: 40px !important; /* Ajuste fino para a caixa de baixo subir */
    display: block; 
    position: relative;
    z-index: 1; 
}

.avatar-hero .container {
    padding-top: 0; 
}

/* --- 3. MENU DE ÍCONES (AVATARES) --- */
.avatar-switcher {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
    margin-top: 20px;
    border-bottom: none !important;
    position: relative;
    z-index: 10;
    align-items: center;
}

.avatar-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none !important;
    opacity: 1 !important;
    filter: none !important;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.avatar-tab img { height: 26px; width: auto; display: block; }

.avatar-tab span {
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: 13px;
    color: #1e293b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 0;
    transition: all 0.3s ease;
}

/* Estado Ativo (Caixinha Branca) */
.avatar-tab.active span {
    background: #ffffff;
    color: var(--theme-color-primary);
    padding: 5px 12px;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    margin-left: 2px;
}
.avatar-tab:hover { transform: translateY(-2px); }


/* --- 4. CONTEÚDO HERO (TEXTO + IMAGEM) --- */
.hero-top-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 10px; /* Pequeno espaço antes do menu glass */
}

/* Coluna de Texto */
.hero-text-area {
    width: 55%;
    padding-bottom: 25px;
    padding-right: 20px;
}

.theme-bar {
    width: 120px;
    height: 4px;
    background: var(--theme-gradient);
    border-radius: 2px;
    margin-bottom: 15px;
    margin-top: 15px;
}

.hero-title {
    font-size: 2.8rem;
    line-height: 1.1;
    margin-bottom: 15px;
    margin-top: 0;
    color: white;
}

/* Fontes do Título */
.font-poppins { font-family: 'Poppins', sans-serif; font-weight: 700; color: #ffffff; }
.font-roboto-bold { font-family: 'Roboto', sans-serif; font-weight: 700; color: #253687; }
.font-roboto-light { font-family: 'Roboto', sans-serif; font-weight: 300; color: #0257c5; }

.hero-lead { 
    font-family: 'Roboto', sans-serif;
    color: #334155; 
    font-size: 16px; 
    line-height: 1.3;
    margin-bottom: 20px; 
    max-width: 95%; 
}

.hero-subtext {
    font-family: 'Poppins', sans-serif;
    color: var(--theme-color-primary);
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 5px;
}

/* --- 5. MENU DE NAVEGAÇÃO (GLASS + ALINHADO) --- */
/* AQUI ESTÁ A CORREÇÃO PRINCIPAL */
.avatar-bottom-nav {
    position: relative;
    z-index: 20 !important;
    
    /* Largura Total para alinhar com o fundo transparente */
    width: 100%; 
    margin: 0; /* Remove margens laterais */
    margin-top: 0px; /* Cola no conteúdo de cima */
    
    /* EFEITO GLASS (VIDRO) */
    background: rgba(255, 255, 255, 0.25); /* Translúcido */
    backdrop-filter: blur(12px);           /* Desfoque */
    -webkit-backdrop-filter: blur(12px);
    
    /* Bordas para acabamento de vidro */
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 16px;
    
    padding: 15px 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.05);
}

.avatar-bottom-nav ul {
    display: flex; justify-content: space-around; align-items: center;
    list-style: none; flex-wrap: wrap; gap: 15px;
}

.avatar-bottom-nav a {
    text-decoration: none; font-family: 'Roboto', sans-serif; font-size: 14px;
    color: #475569; font-weight: 600; transition: 0.3s;
    
    /* Sombra no texto para ler melhor no vidro */
    text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}

.avatar-bottom-nav a:hover { color: var(--theme-color-primary); }

.highlight-link {
    color: #7e22ce !important; font-weight: 700 !important;
    /* Fundo branco um pouco mais forte para destaque */
    background: rgba(255, 255, 255, 0.5); 
    padding: 5px 15px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.6);
}

.separator { color: rgba(51, 65, 85, 0.3); font-size: 12px; } /* Separador mais suave */


/* =========================================================================
   ESTILO DO CORPO DA PÁGINA (FOLHA BRANCA CENTRALIZADA)
   ========================================================================= */

/* 1. O ENVELOPE (PAPEL BRANCO) */
.main-paper {
    background-color: #ffffff;
    border-radius: 30px; 
    
    /* Mesma largura máxima que o hero container costuma ter */
    width: 95%; 
    max-width: 1200px; 
    margin: 0 auto; /* Centraliza */
    
    /* Puxa levemente para cima para criar conexão visual */
    margin-top: 30px; 
    padding: 60px 50px;
    
    position: relative;
    z-index: 10;
    box-shadow: 0 0 40px rgba(0,0,0,0.03);
}

/* 2. CONTEÚDO INTERNO */
.inner-section { padding: 50px 0; }

.inner-block-rounded {
    border-radius: 20px;
    padding: 50px;
    margin: 40px 0;
}
.bg-soft-blue { background-color: #f8faff; }
.bg-light-gray { background-color: #f1f5f9; }

/* Tipografia */
.text-center { text-align: center; }
.section-tag {
    display: inline-block; background: #e0e7ff; color: var(--theme-color-primary);
    padding: 5px 15px; border-radius: 20px; font-size: 0.85rem;
    font-weight: 700; text-transform: uppercase; margin-bottom: 20px;
}
.section-title {
    font-family: 'Poppins', sans-serif; font-size: 2.2rem;
    color: #1e293b; margin-bottom: 20px; line-height: 1.2;
}
.lead-text { font-size: 1.15rem; color: #475569; line-height: 1.6; }
.body-text { font-size: 1rem; color: #64748b; line-height: 1.6; }
.divider-icon { font-size: 1.5rem; color: #cbd5e1; margin-top: 30px; }


/* 3. GRIDS */
.grid-2-col { display: flex; align-items: center; gap: 50px; }
.grid-2-col.reversed { flex-direction: row-reverse; }
.col-text { flex: 1; }
.col-visual { flex: 1; display: flex; justify-content: center; }

/* Cards & Listas */
.card-title {
    font-family: 'Poppins', sans-serif; font-size: 1.8rem;
    color: #1e293b; margin-bottom: 15px; display: flex; align-items: center; gap: 15px;
}
.icon-title { color: var(--theme-color-primary); }
.icon-title.purple { color: var(--theme-color-secondary); }
.styled-list { list-style: none; padding: 0; margin: 30px 0; }
.styled-list li {
    margin-bottom: 15px; display: flex; align-items: center;
    gap: 10px; color: #475569; font-weight: 500;
}
.styled-list i { color: #10b981; }

/* Ilustrações */
.illustration-box {
    background: #eef2ff; border-radius: 20px; width: 100%; height: 300px;
    display: flex; align-items: center; justify-content: center;
}
.illustration-box.white-bg { background: #ffffff; }
.illustration-box.purple-theme { background: #f3e8ff; }
.big-icon-placeholder { font-size: 4rem; color: rgba(0,0,0,0.1); }

/* Botões */
.btn-pill {
    display: inline-block; padding: 12px 30px; border-radius: 50px;
    text-decoration: none; font-weight: 700; transition: 0.3s; margin-top: 10px;
}
.btn-pill.primary { background: var(--theme-color-primary); color: white; box-shadow: 0 5px 15px rgba(59, 130, 246, 0.3); }
.btn-pill.secondary { background: white; color: var(--theme-color-secondary); border: 2px solid var(--theme-color-secondary); }
.btn-pill:hover { transform: translateY(-3px); }

/* Banner Laudos */
.info-banner-content { display: flex; gap: 30px; align-items: flex-start; }
.banner-icon {
    font-size: 2.5rem; color: #94a3b8; background: #ffffff;
    padding: 20px; border-radius: 50%; flex-shrink: 0;
}
.highlight-strip {
    background: #ffffff; color: #b45309; padding: 10px 15px;
    border-radius: 8px; display: inline-block; margin-top: 15px;
    font-size: 0.9rem; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}

/* Materiais Grid */
.materials-grid-display {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 40px;
}
.material-card {
    background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 15px;
    padding: 25px 15px; text-decoration: none; transition: 0.3s;
    display: flex; flex-direction: column; align-items: center;
}
.icon-circle {
    width: 50px; height: 50px; background: #fff; color: #15803d;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; margin-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.material-card h4 { color: #1e293b; margin-bottom: 8px; font-weight: 700; font-size: 1rem; }
.material-card span { color: var(--theme-color-primary); font-size: 0.85rem; font-weight: 600; }
.material-card:hover { transform: translateY(-5px); border-color: var(--theme-color-primary); background: #fff; }

/* Final CTA */
.final-cta-clean { margin-top: 40px; border-top: 1px solid #f1f5f9; padding-top: 60px; }
.btn-big {
    background: linear-gradient(90deg, #3b82f6 0%, #a855f7 100%); color: white;
    padding: 15px 40px; border-radius: 50px; font-weight: 800; font-size: 1.1rem;
    text-decoration: none; box-shadow: 0 10px 25px rgba(168, 85, 247, 0.3); display: inline-block;
}
.cross-link { margin-top: 30px; font-size: 0.9rem; color: #64748b; }
.cross-link a { color: var(--theme-color-secondary); font-weight: 700; text-decoration: none; }


/* --- RESPONSIVO --- */
@media (max-width: 992px) {
    .internal-hero.avatar-hero { padding-top: 90px !important; }
    
    .hero-top-row { flex-direction: column; align-items: center; text-align: center; }
    .hero-text-area { width: 100%; padding-right: 0; padding-bottom: 20px; }
    .avatar-switcher { justify-content: center; flex-wrap: wrap; }
    .separator { display: none; }
    
    .avatar-bottom-nav {
        /* No mobile o glass fica menos largo para não colar nas bordas */
        width: 100%; 
        overflow-x: auto; /* Permite rolar lateralmente */
        padding: 15px;
    }
    .avatar-bottom-nav ul {
        flex-direction: row; /* Mantém em linha com scroll */
        justify-content: flex-start;
        gap: 20px;
        min-width: 600px; /* Força scroll */
    }

    .main-paper { 
        padding: 40px 20px; margin-top: 20px; 
        width: 100%; border-radius: 20px; 
    }
    .grid-2-col, .grid-2-col.reversed, .info-banner-content {
        flex-direction: column; text-align: center; gap: 30px;
    }
    .col-visual { display: none; } 
    .materials-grid-display { grid-template-columns: 1fr 1fr; }
    .inner-block-rounded { padding: 30px 20px; }
}

/* =========================================================================
   AJUSTE DE COMPATIBILIDADE (TRANSFORMA O CARD EM PAPEL)
   ========================================================================= */

/* Transforma a sua section padrão em um container de conteúdo bonito */
.white-content-section {
    padding-top: 0; /* Cola no topo */
    position: relative;
    z-index: 5;
}

/* O Papel Branco (Antigo main-paper) */
.content-card-white {
    background-color: #ffffff;
    
    /* Arredondamento e Sombra */
    border-radius: 30px; 
    box-shadow: 0 0 40px rgba(0,0,0,0.03);
    
    /* Dimensões */
    width: 100%; 
    padding: 60px 50px;
    
    /* A MÁGICA DE ALINHAMENTO */
    /* Remove a margem negativa se quisermos colar no menu glass */
    /* Ou adicionamos um margin-top pequeno para dar respiro */
    margin-top: 30px; 
}

/* Responsivo para o Card */
@media (max-width: 992px) {
    .content-card-white {
        padding: 40px 20px;
        border-radius: 20px;
    }
}

/* =========================================================================
   BACKGROUND DE ACOLHIMENTO (CORRIGIDO E EXPANDIDO)
   ========================================================================= */

.bg-acolhimento {
    /* 1. FURANDO O PADDING DA CAIXA PAI */
    /* Margens negativas iguais ao padding do pai para encostar nas bordas */
    margin-top: -60px; 
    margin-left: -50px;
    margin-right: -50px;
    
    /* 2. RECUPERANDO O ESPAÇO INTERNO */
    /* Adicionamos padding de volta para o texto não colar na borda */
    padding: 80px 50px 60px 50px; 
    
    /* 3. A IMAGEM E O GRADIENTE */
    background-image: 

        /* Camada 2: A Imagem */
        url('assets/bg_acolhimento-familia.jpg');
    
    background-size: cover;      
    background-position: center top; 
    background-repeat: no-repeat;
    
    /* 4. GARANTIR QUE SEJA CORTADO */
    /* Força a borda redonda no topo para casar com a caixa pai, caso o overflow falhe */
    border-radius: 30px 30px 0 0; 
    
    margin-bottom: 40px;
}

/* Ajuste Mobile */
@media (max-width: 992px) {
    .content-card-white {
        padding: 40px 20px; /* Padding menor no mobile */
    }
    
    .bg-acolhimento {
        /* Ajusta as margens negativas para o novo padding do mobile */
        margin-top: -40px;
        margin-left: -20px;
        margin-right: -20px;
        padding: 60px 20px;
    }
}

/* =========================================================================
   OVERRIDE: TROCAR FUNDO "ACOLHIMENTO" NA PÁGINA PROFESSOR
   ========================================================================= */

.pg-professor .bg-acolhimento {
    /* Troca a imagem da família pela do professor */
    background-image: url('assets/bg_professor_area.jpg') !important;
    
    /* Garante o enquadramento correto */
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.pg-crianca .bg-acolhimento {
    /* Troca a imagem da família pela do professor */
    background-image: url('assets/bg_crianca_area.jpg') !important;
    
    /* Garante o enquadramento correto */
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

.pg-gestor .bg-acolhimento {
    /* Troca a imagem da família pela do professor */
    background-image: url('assets/bg_gestor_area.jpg') !important;
    
    /* Garante o enquadramento correto */
    background-position: top;
    background-size: cover;
    background-repeat: no-repeat;
}

/* =========================================================================
   GRID DUPLO DE SERVIÇOS (INTERATIVO)
   ========================================================================= */

.services-dual-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
    margin-bottom: 60px;
}

/* O CARD UNIFICADO */
.service-card-vertical {
    border-radius: 25px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
    
    /* --- ESTADO PADRÃO (Igual Teleatendimento) --- */
    background-color: #f8faff; /* Fundo Cinza/Azuladinho Suave */
    border: 2px solid transparent; /* Borda invisível (reserva espaço para não pular) */
    box-shadow: none; /* Sem sombra inicialmente */
    
    /* A Mágica da Transição */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.service-card-vertical .card-header .icon-badge {
    flex-shrink: 0 !important; /* A ORDEM: "Nunca encolha este ícone" */
    width: 50px !important;    /* Força a largura */
    height: 50px !important;   /* Força a altura */
    min-width: 50px !important; /* Trava de segurança extra */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- ESTADO HOVER (Igual Grupos + Movimento) --- */
.service-card-vertical:hover {
    transform: translateY(-8px); /* Sobe mais visivelmente */
    
    background-color: #ffffff; /* Fica Branco */
    border-color: #e2e8f0;     /* Ganha Borda Cinza */
    
    /* Sombra suave para dar profundidade quando "levanta" */
    box-shadow: 0 15px 30px rgba(0,0,0,0.06); 
}

/* Ajuste nos Ícones e Botões para manter consistência */
.card-header {
    display: flex; align-items: center; gap: 15px; margin-bottom: 20px;
}
.card-header h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.5rem;
    color: #1e293b; margin: 0; font-weight: 700;
}

.icon-badge {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
    transition: 0.3s;
}
/* Cores dos Ícones */
.icon-badge.blue { background: #e0f2fe; color: #3b82f6; }
.icon-badge.purple { background: #f3e8ff; color: #a855f7; }

/* Ao passar o mouse no card, o ícone fica mais forte (opcional, fica lindo) */
.service-card-vertical:hover .icon-badge.blue { background: #3b82f6; color: white; }
.service-card-vertical:hover .icon-badge.purple { background: #a855f7; color: white; }

.styled-list.compact { margin: 20px 0; }
.styled-list.compact li { margin-bottom: 10px; font-size: 0.95rem; }
.purple-check { color: #a855f7 !important; }

/* Botões */
.full-width { width: 100%; text-align: center; display: block; }
.card-footer-action { margin-top: auto; }

/* RESPONSIVO */
@media (max-width: 768px) {
    .services-dual-grid { grid-template-columns: 1fr; }
}

/* =========================================================================
   NOVO DESIGN: BANNER LAUDOS E DIAGNÓSTICOS (MODERNO & ACOLHEDOR)
   ========================================================================= */

/* A Caixa Principal do Banner */
.banner-laudos-modern {
    /* Gradiente suave e acolhedor (Bege claro para Roxo claro) */
    background: linear-gradient(135deg, #fffaf4 0%, #f5f0ff 100%);
    
    /* Borda sutil para definição */
    border: 1px solid rgba(168, 85, 247, 0.15); /* Roxo bem clarinho */
    
    /* Sombra suave para "flutuar" */
    box-shadow: 0 15px 40px rgba(168, 85, 247, 0.08);
    
    /* Garante o arredondamento e espaçamento */
    border-radius: 30px;
    padding: 50px 40px;
    margin: 50px 0;
}

/* Layout Flex para Ícone e Texto */
.info-banner-content {
    display: flex;
    gap: 35px;
    align-items: flex-start;
}

/* O Ícone Grande com Brilho */
.banner-icon-glow {
    flex-shrink: 0; /* Não deixa amassar */
    width: 80px;
    height: 80px;
    background: #ffffff; /* Fundo branco para o ícone brilhar */
    border-radius: 50%; /* Círculo perfeito */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Cor do ícone (Roxo da marca) */
    color: var(--theme-color-secondary); 
    font-size: 2.5rem;
    
    /* Sombra colorida pulsante */
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.25);
    border: 2px solid rgba(255,255,255,0.8);
}

/* Tipografia do Banner */
.banner-text h3 {
    font-family: 'Poppins', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    color: #1e293b; /* COR ESCURA PARA LEITURA PERFEITA */
    margin-top: 0;
    margin-bottom: 15px;
}

.banner-text .body-text {
    font-size: 1.05rem;
    color: #475569; /* Cinza escuro para o texto de apoio */
    line-height: 1.6;
}

/* O Destaque da Carteirinha (Integrado) */
.highlight-strip-modern {
    background: #ffffff; /* Fundo branco para destacar do banner */
    padding: 18px 25px;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 18px;
    
    /* Barra lateral de destaque (Roxa) */
    border-left: 5px solid var(--theme-color-secondary);
    
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
}

/* Ícone e Texto da Carteirinha */
/* Ícone da Carteirinha (Transformado em Badge para contraste) */
.highlight-icon {
    /* 1. Cores Invertidas */
    color: #ffffff; /* Ícone BRANCO */
    background-color: var(--theme-color-secondary); /* Fundo ROXO do tema */
    
    /* 2. Forma de Círculo */
    width: 45px;
    height: 45px;
    border-radius: 50%; /* Faz o círculo perfeito */
    
    /* 3. Centralização */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 4. Ajustes Finais */
    font-size: 1.3rem; /* Tamanho do ícone dentro do círculo */
    flex-shrink: 0; /* Garante que o círculo não amasse em telas pequenas */
    box-shadow: 0 4px 10px rgba(168, 85, 247, 0.3); /* Sombra suave roxa */
}

.highlight-strip-modern span {
    font-size: 1rem;
    color: #334155;
}
.highlight-strip-modern strong {
    color: #1e293b;
    font-weight: 700;
}

/* Responsivo */
@media (max-width: 768px) {
    .info-banner-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 25px;
    }
    .banner-laudos-modern { padding: 35px 25px; }
    .highlight-strip-modern {
        flex-direction: column;
        text-align: center;
        padding: 20px;
        border-left: none;
        border-top: 4px solid var(--theme-color-secondary);
    }
}

/* =========================================================================
   CARROSSEL DE MATERIAIS (ESTILO NETFLIX)
   ========================================================================= */

.materials-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
}

/* A TRILHA DE ROLAGEM */
/* A TRILHA DE ROLAGEM (Ajustada para não cortar sombra) */
.materials-track {
    display: flex;
    gap: 25px;
    overflow-x: auto;
    scroll-behavior: smooth;
    
    /* AQUI ESTÁ O SEGREDO: Aumentei o padding vertical para 40px */
    /* Isso dá espaço para o card "flutuar" sem bater no teto da caixa */
    padding: 40px 20px; 
    
    width: 100%;
    
    /* Esconde barra de rolagem */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}

/* O CARTAZ (POSTER) */
.material-poster {
    flex: 0 0 240px; /* Largura fixa do card */
    height: 340px;   /* Altura do card */
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    background-color: #e2e8f0; /* Cor de fundo padrão */
    transition: transform 0.3s ease;
}

.material-poster:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25);
    z-index: 5;
}

/* OVERLAY ESCURO (Para ler o texto) */
.poster-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.8) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 25px; color: white; text-align: left;
}

/* Ícone Flutuante */
.poster-icon {
    position: absolute; top: 15px; right: 15px;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.4);
}

.poster-content h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.2rem; font-weight: 700;
    margin-bottom: 5px; line-height: 1.2;
}
.poster-content p {
    font-family: 'Roboto', sans-serif; font-size: 0.85rem; opacity: 0.9; margin-bottom: 15px;
}
.btn-link {
    font-size: 0.8rem; font-weight: 700; text-transform: uppercase;
    color: #93c5fd; display: flex; align-items: center; gap: 5px;
}
.material-poster:hover .btn-link { color: white; gap: 10px; }

/* SETAS */
.nav-arrow {
    width: 45px; height: 45px; border-radius: 50%; border: none;
    background: white; color: var(--theme-color-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s;
}
.nav-arrow:hover { background: var(--theme-color-primary); color: white; }

/* Responsivo */
@media (max-width: 768px) {
    .nav-arrow { display: none; } /* Esconde setas no mobile */
    .material-poster { flex: 0 0 85%; height: 380px; } /* Card maior no mobile */
}

/* =========================================================================
   FIX: CARROSSEL DE MATERIAIS (CONTIDO)
   ========================================================================= */

/* Container Pai: Garante que nada vaze da largura da caixa branca */
.carousel-container-safe {
    position: relative;
    width: 100%; /* Ocupa 100% da caixa branca */
    max-width: 100%; /* Não deixa passar disso */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 30px;
}

/* A Trilha: Onde o scroll acontece */
.materials-track-safe {
    display: flex;
    gap: 20px;
    
    /* SCROLL HORIZONTAL APENAS AQUI */
    overflow-x: auto; 
    scroll-behavior: smooth;
    
    /* Espaço para sombra não cortar */
    padding: 30px 10px; 
    
    /* Limita a largura para caber entre as setas */
    width: 100%;
    
    /* Esconde barra de rolagem */
    scrollbar-width: none; 
    -ms-overflow-style: none;
}
.materials-track-safe::-webkit-scrollbar { display: none; }

/* O Card (Poster) */
.material-poster {
    /* Tamanho Fixo: Importante para não quebrar */
    flex: 0 0 220px; 
    height: 320px;
    
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    background-color: #e2e8f0;
    transition: transform 0.3s ease;
}

.material-poster:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(59, 130, 246, 0.25);
    z-index: 5;
}

/* Backgrounds (Mantive os mesmos) */
.bg-guias { background: url('assets/img-guias.jpg') center/cover no-repeat, #a855f7; }
.bg-videos { background: url('assets/img-videos.jpg') center/cover no-repeat, #3b82f6; }
.bg-pdfs { background: url('assets/img-materiais.jpg') center/cover no-repeat, #10b981; }
.bg-indicacoes { background: url('assets/img-leituras.jpg') center/cover no-repeat, #f59e0b; }
.bg-extra { background: url('assets/img-dicas.jpg') center/cover no-repeat, linear-gradient(135deg, #64748b, #475569); }

/* Overlay e Texto */
.poster-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 20%, rgba(0,0,0,0.9) 100%);
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 20px; color: white; text-align: left;
}

.poster-icon {
    position: absolute; top: 15px; right: 15px;
    width: 35px; height: 35px; border-radius: 50%;
    background: rgba(255,255,255,0.2); backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255,255,255,0.4);
}

.poster-content h3 {
    font-family: 'Poppins', sans-serif; font-size: 1.1rem; font-weight: 700;
    margin-bottom: 5px; line-height: 1.2;
}

.btn-link {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    color: #93c5fd; display: flex; align-items: center; gap: 5px;
}

/* Setas */
.nav-arrow {
    width: 40px; height: 40px; border-radius: 50%; border: none;
    background: white; color: var(--theme-color-primary);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: 0.3s; flex-shrink: 0; /* Não deixa a seta amassar */
}
.nav-arrow:hover { background: var(--theme-color-primary); color: white; }

/* Responsivo */
@media (max-width: 768px) {
    .nav-arrow { display: none; } /* No celular usa dedo, sem seta */
    .material-poster { flex: 0 0 180px; height: 280px; } /* Cards menores */
}


/* =========================================================================
   PATCH DE CORREÇÃO FINAL (SIMETRIA E POSICIONAMENTO)
   Cole isto no FINAL do seu style.css
   ========================================================================= */

/* 1. TRAVAR A LARGURA (Para Família, Criança e Quem Somos ficarem iguais) */
.internal-page .container {
    max-width: 1400px !important; /* Largura padrão travada */
    width: 90% !important;
    margin: 0 auto;
}

/* 2. AJUSTE DA CAIXA HERO (Tira o espaço vazio embaixo) */
.hero-card-container {
    /* Remove o espaço que separa o menu da imagem */
    padding-bottom: 0 !important; 
    gap: 0 !important; 
    display: flex;
    flex-direction: column;
}

/* 3. O MENU GLASS (Colar na imagem e alinhar largura) */
.avatar-bottom-nav {
    /* Largura calculada para bater nas bordas (100% + padding esq/dir do pai) */
    width: calc(100% + 120px) !important; 
    margin-left: -60px !important;
    margin-right: -60px !important;
    
    /* Puxa para cima para encostar na imagem */
    margin-top: -4px !important; 
    
    /* Arredonda só embaixo */
    border-radius: 0 0 30px 30px !important;
    z-index: 50;
}

/* 4. POSICIONAMENTO DAS IMAGENS (UM POR UM) */


/* Ajuste do Texto do Quem Somos para não bater na imagem */
.pg-quem-somos .hero-text-area {
    max-width: 55% !important; /* Garante que o texto não invada a foto */
}

/* 5. CORREÇÃO RESPONSIVA (CELULAR) */
@media (max-width: 992px) {
    .hero-card-container {
        padding: 40px 20px 0 20px !important;
    }
    
    .avatar-bottom-nav {
        width: calc(100% + 40px) !important; /* Ajuste largura mobile */
        margin-left: -20px !important;
        margin-top: 0 !important;
    }
    
    .pg-quem-somos .hero-text-area {
        max-width: 100% !important;
    }
}


/* =========================================================================
   TEMA: PROFESSOR (VERDE) - CÓDIGO NOVO
   ========================================================================= */

body.pg-professor {
    /* Cores Verdes do Tema */
    --theme-color-primary: #229533; /* Verde Esmeralda */
    --theme-color-secondary: #253687; /* Verde Escuro */
    --theme-gradient: linear-gradient(90deg, #10b981 0%, #059669 100%);
    
    /* Imagem de Fundo (Você precisa criar esta imagem ou usar a padrão) */
    --theme-bg-image: url('assets/bg-top-professor.jpg'); 
}

/* Aplica o background na página */
.internal-page.pg-professor {
    background-image: var(--theme-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #f2f1eb;
}



/* =========================================================================
   TEMA: GESTOR (AZUL ROYAL + CINZA MÉDIO)
   ========================================================================= */

body.pg-gestor {
    /* Cores Personalizadas */
    --theme-color-primary: #2563eb; /* Azul Royal Vibrante */
    --theme-color-secondary: #64748b; /* Cinza Médio (Slate Gray) - Elegante e Profissional */
    
    /* Gradiente: Mistura do Azul Royal para o Cinza */
    --theme-gradient: linear-gradient(90deg, #2563eb 0%, #64748b 100%);
    
    /* Imagem de Fundo */
    --theme-bg-image: url('assets/bg-top-gestor.jpg'); 
}

/* Aplica o background */
.internal-page.pg-gestor {
    background-image: var(--theme-bg-image);
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #fdfbf7;
}



/* =========================================================================
   CORES DOS TÍTULOS DA HERO (POR AVATAR)
   ========================================================================= */

/* A regra geral mantém a primeira palavra (font-poppins) BRANCA */
.hero-title .font-poppins {
    color: #ffffff !important;
}

/* --- 1. CRIANÇA (Roxo: #7e30a2) --- */
.pg-crianca .hero-title .font-roboto-light,
.pg-crianca .hero-title .font-roboto-bold {
    color: #7e30a2 !important;
}

/* --- 2. PROFESSOR (Verde: #229533) --- */
.pg-professor .hero-title .font-roboto-light,
.pg-professor .hero-title .font-roboto-bold {
    color: #229533 !important;
}

/* --- 3. GESTOR (Cinza: #636363) --- */
.pg-gestor .hero-title .font-roboto-light,
.pg-gestor .hero-title .font-roboto-bold {
    color: #636363 !important;
    /* Dica: Como esse cinza é escuro, adicionei uma leve sombra branca 
       para garantir leitura caso o fundo seja escuro */
    text-shadow: 0 0 1px rgba(255,255,255,0.3); 
}

/* --- 4. FAMÍLIA (Azul Padrão: #3b82f6) --- */
/* Garantindo que família continue azul */
.pg-familia .hero-title .font-roboto-light,
.pg-familia .hero-title .font-roboto-bold {
    color: #253687 !important;
}

/* =========================================================================
   MENU ÂNCORA INTELIGENTE (CORREÇÃO DE CAMADAS E POSIÇÃO)
   ========================================================================= */

/* Comportamento suave ao clicar */
html { scroll-behavior: smooth; }

/* Compensação para o título não ficar escondido atrás do menu */
.scroll-target { scroll-margin-top: 180px; }

/* ESTADO NORMAL (Antes de rolar) */
#stickyMenu {
    transition: all 0.3s ease;
    /* Garante que o menu respeite a largura do container pai inicialmente */
    width: calc(100% + 120px) !important; 
    margin-left: -60px !important;
}

/* =========================================================================
   MENU STICKY: ALINHAMENTO "CASINHA COM CASINHA" & RETO
   ========================================================================= */

.avatar-bottom-nav.sticky-clone {
    position: fixed !important;
    top: -100px !important; 
    left: 0 !important;
    
    /* BARRA PONTA A PONTA (FULL WIDTH) */
    width: 100% !important;
    margin: 0 !important;
    
    /* VISUAL RETO E LIMPO */
    background: #ffffff !important; 
    border-radius: 0 !important; /* Removemos a curva */
    border: none !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.06) !important;
    
    /* CAMADA */
    z-index: 999999 !important;
    
    /* LAYOUT EXTERNO */
    display: flex !important;
    justify-content: center !important; /* Centraliza o container interno */
    padding: 0 !important;
    
    transition: top 0.3s ease-in-out, opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

/* CONTAINER INTERNO (O Segredo do Alinhamento) */
/* Aqui forçamos a lista a ter o mesmo tamanho e margem do container principal do site */
.avatar-bottom-nav.sticky-clone ul {
    width: 100% !important;
    max-width: 1400px !important; /* Largura padrão do seu site */
    
    /* Ajuste de Padding para alinhar EXATAMENTE com o header de cima */
    /* Se o header usa padding: 0 20px, aqui usamos igual */
    padding-left: 20px !important; 
    padding-right: 20px !important;
    margin: 0 auto !important; /* Centraliza a caixa invisível na tela */
    
    display: flex;
    align-items: center;
    justify-content: flex-start !important; /* Alinha os itens à esquerda */
    height: 60px;
}

/* Quando visível */
.avatar-bottom-nav.sticky-clone.visible {
    top: 90px !important;
    opacity: 1;
    pointer-events: all;
}

/* --- ESTILOS DOS LINKS --- */
.avatar-bottom-nav.sticky-clone ul li a {
    color: #64748b; /* Cinza neutro */
    font-weight: 500;
    font-size: 14px;
    padding: 5px 0; /* Espaço para a borda aparecer embaixo */
    position: relative;
    transition: color 0.3s;
}

/* ITEM ATIVO (SCROLLSPY) */
/* Quando a classe é adicionada pelo JS */
.avatar-bottom-nav.sticky-clone ul li a.active-item-menu {
    color: var(--theme-color-primary) !important; /* Cor do Avatar (Azul/Roxo/Verde) */
    font-weight: 700 !important;
}

/* Linha colorida embaixo do item ativo */
.avatar-bottom-nav.sticky-clone ul li a.active-item-menu::after {
    content: '';
    position: absolute;
    bottom: -19px; /* Cola na linha da barra branca */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: var(--theme-color-primary);
    border-radius: 3px 3px 0 0;
}

/* =========================================================================
   PÁGINA PROFESSOR: SEÇÃO PAP (Layout Tech/Inovação)
   ========================================================================= */

.pap-section {
    background: linear-gradient(135deg, #1e1e2f 0%, #2d2d44 100%);
    border-radius: 30px;
    padding: 60px;
    margin-top: 80px;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2);
}

.pap-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* Badge de Inovação */
.pap-badge {
    display: inline-block;
    background: rgba(168, 85, 247, 0.2);
    color: #d8b4fe;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 15px;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.pap-content h2 {
    font-family: var(--font-poppins);
    font-size: 32px;
    line-height: 1.2;
    margin-bottom: 15px;
    color: #ffffff;
}

.pap-content .lead-pap {
    color: #ccc;
    font-size: 16px;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Grid dos 4 Pilares */
.pap-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 30px;
}

.pap-feature-item {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 15px;
    border: 1px solid rgba(255,255,255,0.1);
    transition: transform 0.3s, background 0.3s;
}

.pap-feature-item:hover {
    transform: translateY(-5px);
    background: rgba(255,255,255,0.1);
    border-color: rgba(168, 85, 247, 0.4);
}

.pap-feature-item h4 {
    font-size: 16px;
    margin-bottom: 8px;
    color: #a855f7; /* Roxo Tech */
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 600;
}

.pap-feature-item p {
    font-size: 13px;
    color: #bbb;
    line-height: 1.4;
    margin: 0;
}

/* =========================================================================
   IMAGEM PAP (ESTILO LIVRE / SEM BORDA)
   ========================================================================= */

/* Remove a caixa do container */
.pap-image-container {
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
}

/* Remove a borda e sombra da imagem */
.pap-image-container img {
    width: 100%;
    border-radius: 0 !important;
    box-shadow: none !important;     /* Tira a sombra */
    border: none !important;         /* Tira a linha de borda */
    background: transparent !important;
    
    /* Efeito de escala para a ilustração ficar imponente */
    transform: scale(1.1); 
    transition: transform 0.5s ease;
}

/* Mantém o efeito de movimento suave ao passar o mouse */
.pap-image-container:hover img {
    transform: scale(1.15);
}

/* Elemento Decorativo (Fundo) */
.pap-glow-bg {
    position: absolute;
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(168,85,247,0.15) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
}

/* Responsividade */
@media (max-width: 992px) {
    .pap-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .pap-section {
        padding: 30px;
        margin-top: 50px;
    }
    /* No celular, a imagem fica melhor abaixo ou acima? 
       Geralmente abaixo em cards explicativos */
    .pap-image-container {
        order: 1; 
        margin-top: 20px;
    }
}

@media (max-width: 576px) {
    .pap-features-grid {
        grid-template-columns: 1fr; /* Pilares um embaixo do outro no celular */
    }
    .pap-content h2 {
        font-size: 24px;
    }
}

/* Pílulas de Benefícios (Página Professor) */
.benefit-pill {
    background: #fff;
    border: 1px solid #e2e8f0;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #4b5563;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    display: inline-block;
}
.benefit-pill:hover {
    border-color: var(--theme-color-primary);
    color: var(--theme-color-primary);
    transform: translateY(-2px);
    transition: all 0.3s;
}

/* =========================================================================
   CORREÇÕES E NOVO LAYOUT FINAL (PROFESSOR)
   ========================================================================= */

/* 1. CORREÇÃO DO ÍCONE ACHATADO */
/* Isso impede que o flexbox esmague a bolinha azul/roxa */
.styled-list li i, 
.styled-list.compact li i {
    flex-shrink: 0 !important; /* O segredo para não achatar */
    margin-top: 4px; /* Ajuste fino para alinhar com o topo do texto */
}

/* 2. NOVO LAYOUT: BLOCO FINAL "Professor Amparado" */
.closing-summary-card {
    background: #f8fafc; /* Fundo cinza/azul bem suave */
    border: 1px solid #e2e8f0;
    border-radius: 24px;
    padding: 50px;
    margin-top: 80px;
    
    /* Grid de 2 Colunas */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px;
    align-items: center;
}

.closing-text h2 {
    font-family: var(--font-poppins);
    font-size: 32px;
    color: var(--color-bg-dark);
    margin-bottom: 20px;
    line-height: 1.2;
}

.closing-text p {
    color: #4b5563;
    font-size: 16px;
    line-height: 1.6;
}

.closing-list-box {
    background: #ffffff;
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    border-left: 5px solid var(--theme-color-secondary); /* Detalhe roxo */
}

.closing-list-box h4 {
    color: var(--color-bg-dark);
    margin-bottom: 15px;
    font-size: 18px;
    font-weight: 700;
}

/* Ajuste Mobile */
@media (max-width: 992px) {
    .closing-summary-card {
        grid-template-columns: 1fr; /* Um embaixo do outro */
        padding: 30px;
        gap: 30px;
    }
}

/* --- CORREÇÃO DE ÍCONES (PROFESSOR) --- */
.styled-list li, .styled-list.compact li {
    display: flex;
    align-items: flex-start; /* Alinha no topo caso o texto quebre linha */
}

.styled-list li i, 
.styled-list.compact li i {
    flex-shrink: 0 !important;  /* Impede o ícone de encolher */
    min-width: 24px;            /* Garante o tamanho mínimo */
    width: 24px;
    text-align: center;
    margin-top: 4px;            /* Ajuste fino vertical */
    margin-right: 10px;
}

/* =========================================================================
   CORREÇÃO DEFINITIVA: CORES E ALINHAMENTO (PAP)
   ========================================================================= */

/* 1. ITENS DO GRID (Perfil, Neurodiversidade...) */
.pap-feature-item {
    display: flex !important;
    align-items: center !important; /* Centraliza verticalmente o texto com o ícone */
    justify-content: flex-start !important;
    padding: 20px !important;
    min-height: 80px; /* Garante altura igual para todos */
}

/* Texto Branco */
.pap-feature-item h4 {
    color: #ffffff !important;
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
    display: flex;
    align-items: center;
    width: 100%;
}

/* Ícone Branco e sem amassar */
.pap-feature-item h4 i {
    color: #ffffff !important; /* Força cor branca */
    margin-right: 15px !important;
    font-size: 20px !important;
    flex-shrink: 0 !important; /* Impede que o ícone diminua */
    min-width: 24px;
    text-align: center;
}

/* 2. BOTÃO "EXPLORAR O PAP" */
.btn-pill.purple-mode {
    color: #ffffff !important; /* Texto branco */
    border: 1px solid rgba(255, 255, 255, 0.5) !important; /* Borda branca suave */
    transition: all 0.3s ease;
}

.btn-pill.purple-mode:hover {
    background: #ffffff !important; /* Fundo branco ao passar o mouse */
    color: var(--theme-color-secondary) !important; /* Texto roxo ao passar o mouse */
    transform: translateY(-3px);
}

/* =========================================================================
   ESTILOS EXCLUSIVOS: PÁGINA ESTUDANTE (MODERNA)
   ========================================================================= */

/* --- INTRODUÇÃO --- */
.intro-statement {
    padding: 80px 20px;
    background: #fff;
}
.big-statement {
    font-size: 36px;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.2;
    margin-bottom: 20px;
}
.highlight-text {
    color: var(--theme-color-primary);
    background: linear-gradient(120deg, rgba(59,130,246,0.1) 0%, rgba(59,130,246,0) 100%);
    padding: 0 10px;
    border-radius: 5px;
}
.intro-lead {
    font-size: 18px; color: #64748b; max-width: 700px; margin: 0 auto;
}

/* --- SEÇÃO POTENCIALIDADES (ZIG ZAG) --- */
.section-potencialidades {
    padding: 80px 0;
    background: #f8fafc;
    overflow: hidden;
}
.potencial-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.floating-tag {
    display: inline-block;
    background: #fff;
    color: #d97706;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 700;
    font-size: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    margin-bottom: 20px;
}
/* Correção do Gradiente de Texto */
.text-gradient {
    background: linear-gradient(90deg, #d97706, #f59e0b);
    -webkit-background-clip: text; /* Essencial para Chrome/Safari */
    background-clip: text;         /* Padrão moderno */
    -webkit-text-fill-color: transparent;
    color: transparent;            /* Fallback */
    display: inline-block;         /* Ajuda a renderizar o recorte corretamente */
}
.check-list-modern {
    margin-top: 30px;
    display: flex; flex-direction: column; gap: 20px;
}
.check-item {
    display: flex; align-items: center; gap: 15px;
    background: #fff; padding: 15px 20px; border-radius: 12px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.03);
    transition: transform 0.3s;
}
.check-item:hover { transform: translateX(10px); }
.check-item .icon-box {
    width: 40px; height: 40px; border-radius: 50%;
    background: #fef3c7; color: #d97706;
    display: flex; align-items: center; justify-content: center;
}
.visual-img {
    width: 100%; border-radius: 20px;
    box-shadow: 20px 20px 0px rgba(217, 119, 6, 0.1); /* Efeito sombra sólida */
}

/* --- SEÇÃO PAPÉIS (GLASSMORPHISM) --- */
.section-papeis {
    padding: 100px 0;
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
    color: #fff;
}
.glass-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
}
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 40px; border-radius: 24px;
    position: relative;
    transition: transform 0.3s;
}
.glass-card:hover { transform: translateY(-10px); background: rgba(255, 255, 255, 0.15); }
.card-icon-float {
    width: 60px; height: 60px; background: #fff; color: #3b82f6;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 24px; margin-bottom: 20px;
}
.card-icon-float.purple { color: #a855f7; }
.glass-card h3 { font-size: 24px; margin-bottom: 15px; }
.glass-card p { opacity: 0.9; line-height: 1.6; }
.mini-list {
    margin-top: 20px; display: flex; gap: 15px; font-size: 14px; font-weight: 600;
}
.gestao-box {
    margin-top: 20px; padding: 15px; background: rgba(0,0,0,0.2);
    border-radius: 10px; font-size: 14px;
}

/* --- TIMELINE VERTICAL --- */
.section-timeline { padding: 80px 0; background: #fff; }
.timeline-modern {
    position: relative; max-width: 800px; margin: 60px auto 0;
}
.timeline-line {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: #e2e8f0; transform: translateX(-50%);
}
.timeline-item {
    display: flex; justify-content: flex-end; padding-right: 50px;
    position: relative; margin-bottom: 50px; width: 50%;
}
.timeline-item.right {
    align-self: flex-end; margin-left: auto; justify-content: flex-start;
    padding-right: 0; padding-left: 50px;
}
.timeline-dot {
    position: absolute; right: -8px; top: 0; width: 16px; height: 16px;
    background: #94a3b8; border-radius: 50%; border: 3px solid #fff;
    box-shadow: 0 0 0 2px #94a3b8;
}
.timeline-item.right .timeline-dot { right: auto; left: -8px; }
.timeline-content {
    background: #f8fafc; padding: 20px; border-radius: 15px;
    border-left: 4px solid #94a3b8; width: 100%;
}
.timeline-content.highlight-box {
    background: #eff6ff; border-left-color: #3b82f6;
}

/* =========================================================================
   AJUSTES GESTOR (CONFIRMAÇÃO)
   ========================================================================= */

/* Garante que o ícone do gráfico na intro fique com a cor certa */
.pg-gestor .divider-icon i {
    color: var(--theme-color-primary) !important;
}

/* =========================================================================
   LAYOUT GESTOR: SEÇÃO COMMAND CENTER (MODERNO/TECH)
   ========================================================================= */

.command-center-section {
    position: relative;
    padding: 80px 0;
    margin-bottom: 60px;
    overflow: hidden;
    background: #f8fafc; /* Fundo base claro */
    border-radius: 30px;
    border: 1px solid rgba(255,255,255,0.5);
}

/* O Grid Principal */
.command-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr; /* Mais espaço para o visual */
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
    padding: 0 40px;
}

/* --- COLUNA DE TEXTO --- */
.tech-badge-glow {
    display: inline-flex; align-items: center; gap: 10px;
    background: rgba(37, 99, 235, 0.1); color: #2563eb;
    padding: 8px 16px; border-radius: 20px; font-weight: 700; font-size: 12px;
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.2); /* Brilho sutil */
    margin-bottom: 25px;
}
/* =========================================================================
   CORREÇÃO: TEXTO DEGRADÊ (Garante que não fique invisível)
   ========================================================================= */

.highlight-tech {
    /* 1. Cor de segurança (se o degradê falhar, fica azul) */
    color: #2563eb; 
    
    /* 2. O Degradê */
    background: linear-gradient(120deg, #2563eb, #a855f7);
    
    /* 3. A mágica do recorte (com suporte para todos os navegadores) */
    -webkit-background-clip: text;
    background-clip: text;
    
    /* 4. Deixa transparente SÓ se o navegador suportar o recorte */
    -webkit-text-fill-color: transparent;
    
    /* 5. Garante que o bloco se comporte corretamente */
    display: inline-block;
    font-weight: 800;
}
.lead-command { font-size: 20px; color: #1e293b; margin-bottom: 25px; line-height: 1.4; }

/* Lista Moderna Tech */
.tech-list-modern { list-style: none; padding: 0; margin-top: 30px; display: flex; flex-direction: column; gap: 20px; }
.tech-list-modern li {
    display: flex; align-items: flex-start; gap: 15px;
    background: #fff; padding: 15px; border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.03);
    border-left: 3px solid var(--theme-color-primary);
}
.tech-list-modern li i { color: var(--theme-color-primary); font-size: 20px; margin-top: 3px; }

/* --- COLUNA VISUAL (GLASSMORPHISM) --- */
.command-visual { position: relative; height: 450px; }

/* O Card Principal de Fundo */
.glass-dashboard-main {
    position: absolute; top: 0; left: 40px; right: 0; bottom: 40px;
    background: rgba(255, 255, 255, 0.7); /* Vidro semi-transparente */
    backdrop-filter: blur(15px) saturate(180%); /* O efeito de desfoque */
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 24px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    overflow: hidden; z-index: 1;
    display: flex; flex-direction: column;
}
.glass-header {
    padding: 15px 20px; border-bottom: 1px solid rgba(0,0,0,0.05);
    display: flex; align-items: center; gap: 8px; font-size: 12px; color: #64748b;
}
.dot { width: 10px; height: 10px; border-radius: 50%; }
.dot.red { background: #ef4444; } .dot.yellow { background: #f59e0b; } .dot.green { background: #10b981; }

/* Fake Graph Area */
.fake-graph-area { flex: 1; position: relative; background: linear-gradient(to bottom, #fff, #f8fafc); }
.wave-svg { position: absolute; bottom: 0; left: 0; width: 100%; height: 60%; opacity: 0.6; }
.wave-svg.delay { opacity: 0.4; transform: translateX(-20px); }
.glass-footer-stats {
    padding: 15px 20px; border-top: 1px solid rgba(0,0,0,0.05); font-size: 12px; color: #64748b; display: flex; gap: 20px;
}

/* Cards Flutuantes */
.floating-metric {
    position: absolute;
    background: #fff;
    padding: 20px; border-radius: 16px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.1);
    display: flex; align-items: center; gap: 15px;
    z-index: 3;
    border: 1px solid rgba(255,255,255,0.5);
}
/* Posições dos cards */
.card-aluno { top: 30px; left: 0; }
.card-pdi { bottom: 0; left: 20px; }

.icon-wrap {
    width: 50px; height: 50px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 24px;
}
.icon-wrap.blue { background: rgba(37, 99, 235, 0.1); color: #2563eb; }
.icon-wrap.purple { background: rgba(168, 85, 247, 0.1); color: #a855f7; }
.big-number { display: block; font-size: 28px; font-weight: 800; color: #1e293b; line-height: 1; }
.label { font-size: 13px; color: #64748b; }
.progress-bar-mini {
    height: 6px; background: #e2e8f0; border-radius: 3px; margin-top: 8px; overflow: hidden;
}
.progress-bar-mini div { height: 100%; background: #10b981; border-radius: 3px; }

/* Background Pattern Sutil */
.tech-bg-pattern {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0.05; z-index: 1;
    background-image: radial-gradient(#2563eb 1px, transparent 1px);
    background-size: 20px 20px;
}

/* Animação de entrada simples */
.pop-in { animation: popIn 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; opacity: 0; transform: scale(0.8); }
.delay-1 { animation-delay: 0.2s; }
@keyframes popIn { to { opacity: 1; transform: scale(1); } }

/* MOBILE */
@media (max-width: 992px) {
    .command-grid { grid-template-columns: 1fr; padding: 30px 20px; gap: 40px; }
    .command-visual { height: auto; min-height: 400px; margin-top: 30px; }
    .glass-dashboard-main { left: 0; right: 0; bottom: 80px; }
    .floating-metric { position: relative; top: auto !important; left: auto !important; bottom: auto !important; margin-top: -40px; margin-left: auto; margin-right: auto; max-width: 280px; }
    .card-pdi { margin-top: 20px; }
}

/* =========================================================================
   CORREÇÃO DE LEITURA - PAINEL INDICADORES
   ========================================================================= */

/* Texto principal do painel (Parágrafos) */
.command-text p {
    color: #334155 !important; /* Cinza escuro para contraste no fundo claro */
    font-size: 16px;
    line-height: 1.6;
}

/* Lista Tech (Itens) */
.tech-list-modern li {
    color: #1e293b !important; /* Quase preto */
    font-weight: 500;
}

/* Negritos dentro da lista */
.tech-list-modern li strong {
    color: #0f172a !important; /* Preto total */
}

/* Ícones da lista */
.tech-list-modern li i {
    color: var(--theme-color-primary) !important; /* Azul destaque */
}

/* =========================================================================
   NOVO LAYOUT: MONITORAMENTO (DARK TECH WIDGETS)
   ========================================================================= */

.monitor-section {
    background-color: #0f172a; /* Fundo Dark Profundo */
    border-radius: 30px;
    padding: 80px 40px;
    margin-top: 80px;
    position: relative;
    overflow: hidden;
    color: #fff;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
}

/* Efeito de Luz de Fundo */
.monitor-glow-effect {
    position: absolute;
    top: -50%; left: -50%;
    width: 200%; height: 200%;
    background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.15), transparent 60%);
    pointer-events: none;
    z-index: 0;
}

.monitor-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

/* Cabeçalho */
.monitor-header-block {
    text-align: center;
    margin-bottom: 60px;
}

.status-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(16, 185, 129, 0.1); color: #10b981;
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 6px 16px; border-radius: 20px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    margin-bottom: 20px;
}

.pulse-dot {
    width: 8px; height: 8px; background: #10b981; border-radius: 50%;
    box-shadow: 0 0 10px #10b981;
    animation: pulse 2s infinite;
}
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

.monitor-header-block h2 {
    font-family: 'Poppins', sans-serif;
    font-size: 36px; margin-bottom: 15px; color: #fff;
}

.monitor-header-block p {
    color: #94a3b8; font-size: 18px; max-width: 700px; margin: 0 auto;
}

/* GRID DE WIDGETS */
.monitor-widgets-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Colunas */
    gap: 30px;
}

/* O CARD WIDGET */
.tech-widget {
    background: rgba(255, 255, 255, 0.03); /* Vidro muito sutil */
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 35px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Hover Effect: Borda brilha e sobe */
.tech-widget:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

/* Topo do Widget (Ícone + Título) */
.widget-top {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

/* Ícone Quadrado Arredondado (Estilo App) */
.widget-icon {
    width: 55px; height: 55px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.icon-cyan { background: rgba(6, 182, 212, 0.15); color: #22d3ee; }
.icon-purple { background: rgba(168, 85, 247, 0.15); color: #c084fc; }
.icon-green { background: rgba(16, 185, 129, 0.15); color: #34d399; }
.icon-orange { background: rgba(249, 115, 22, 0.15); color: #fb923c; }

.widget-title h4 {
    font-family: 'Poppins', sans-serif;
    font-size: 20px; font-weight: 600; color: #fff;
    margin: 0;
}

/* Linha decorativa abaixo do título */
.widget-line {
    display: block; width: 40px; height: 2px;
    background: rgba(255,255,255,0.1); margin-top: 5px;
    transition: width 0.3s;
}
.tech-widget:hover .widget-line { width: 100%; background: rgba(255,255,255,0.3); }

/* Descrição (Agora tem largura total!) */
.widget-desc {
    color: #cbd5e1; /* Cinza claro */
    font-size: 15px;
    line-height: 1.6;
    margin: 0;
}

/* MOBILE */
@media (max-width: 768px) {
    .monitor-section { padding: 50px 20px; }
    .monitor-widgets-grid { grid-template-columns: 1fr; } /* 1 coluna no celular */
    .tech-widget { padding: 25px; }
}

/* =========================================================================
   CORREÇÃO: LEITURA DOS CARDS (PÁGINA PROFESSOR)
   ========================================================================= */

/* Garante que o texto de rodapé dos cards seja escuro */
.service-card-vertical .card-footer-text p,
.service-card-vertical .card-footer-text em {
    color: #334155 !important; /* Cinza escuro para leitura */
    font-weight: 600;          /* Um pouco mais de peso para destacar */
}

/* =========================================================================
   PÁGINA QUEM SOMOS - LAYOUT FINAL CORRIGIDO
   ========================================================================= */

/* Utilitários de Fundo */
.story-section { padding: 80px 0; }
.bg-white { background-color: #ffffff; }
.bg-light { background-color: #f8fafc; }
.bg-dark-brand { background-color: #1e293b; color: #fff; } /* Fundo Escuro para o Propósito */

/* Tipografia Editorial */
.container-narrow { max-width: 900px; margin: 0 auto; }
.story-text-flow p {
    font-size: 18px; line-height: 1.9; color: #334155; margin-bottom: 30px;
    font-family: 'Roboto', sans-serif; font-weight: 300;
}
.story-text-flow strong { font-weight: 700; color: #0f172a; }

.section-title-center {
    font-size: 36px; text-align: center; color: #1e293b; margin-bottom: 50px;
    font-weight: 700; letter-spacing: -1px;
}
.subsection-title {
    font-size: 28px; color: #1e293b; margin-bottom: 30px; font-weight: 600;
}
.text-white { color: #ffffff !important; } /* Força branco no fundo escuro */
.text-white-soft { color: rgba(255,255,255,0.85) !important; font-size: 18px; line-height: 1.8; }

/* Capitular */
.drop-cap-modern {
    float: left; font-size: 60px; line-height: 50px; font-weight: 800;
    color: var(--theme-color-primary); margin-right: 15px; margin-top: 5px;
}

/* Destaque Numérico */
.highlight-number-box {
    display: flex; align-items: center; gap: 30px;
    background: #f1f5f9; padding: 40px; border-radius: 20px;
    margin: 40px 0; border-left: 5px solid var(--theme-color-primary);
}
.number-item { text-align: center; min-width: 150px; }
.big-num { display: block; font-size: 48px; font-weight: 800; color: var(--theme-color-primary); line-height: 1; }
.text-item p { margin: 0; font-size: 18px; font-style: italic; color: #475569; }

/* Layout Dividido (Imagem/Ícone + Texto) */
.split-content-row {
    display: grid; grid-template-columns: 0.5fr 1.5fr; gap: 60px; align-items: flex-start;
}
.icon-giant {
    font-size: 120px; color: rgba(0,0,0,0.05); display: block; margin: 0 auto;
}
.split-text-content p {
    font-size: 18px; line-height: 1.8; color: #475569; margin-bottom: 25px; text-align: justify;
}

/* Manifesto Card (Agora transparente pois o fundo da seção é escuro) */
.manifesto-card.dark-mode {
    background: transparent; border: 1px solid rgba(255,255,255,0.1); padding: 40px;
    border-radius: 20px; max-width: 900px; margin: 0 auto;
}
.mini-divider {
    width: 50px; height: 3px; background: var(--theme-color-secondary);
    margin: 40px auto; border: 0;
}
.final-statement {
    font-size: 24px; font-weight: 300; line-height: 1.4;
}

/* --- EXECUTIVE TEAM CARDS (CORRIGIDO) --- */
.team-section-executive { 
    padding: 100px 0;
    padding-bottom: 200px; /* Margem Extra para não bater no rodapé flutuante */
}
.executive-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Sempre 2 colunas */
    gap: 40px;
    margin-top: 60px;
}

.executive-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    display: flex; /* Layout Lado a Lado */
    align-items: stretch;
    transition: transform 0.3s;
    height: 100%; /* Garante altura igual */
}
.executive-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.1); }

/* Área da Foto */
.exec-photo {
    flex: 0 0 40%; /* 40% largura */
    min-height: 300px;
    position: relative;
    background: #cbd5e1;
}
.exec-photo img {
    width: 100%; height: 100%; object-fit: cover;
    position: absolute; top: 0; left: 0;
}

/* Área do Conteúdo */
.exec-info {
    flex: 1; padding: 30px; display: flex; flex-direction: column; justify-content: flex-start;
}
.exec-info h3 {
    font-size: 22px; color: #1e293b; margin: 0; font-weight: 700;
}
.exec-role {
    display: block; font-size: 13px; font-weight: 700; color: var(--theme-color-primary);
    text-transform: uppercase; margin-bottom: 20px; letter-spacing: 0.5px;
}
.exec-bio p {
    font-size: 14px; line-height: 1.6; color: #64748b; margin: 0;
}

/* MOBILE */
@media (max-width: 992px) {
    .highlight-number-box { flex-direction: column; text-align: center; }
    .split-content-row { grid-template-columns: 1fr; }
    .icon-giant { display: none; }
    
    .executive-grid { grid-template-columns: 1fr; } /* 1 Coluna no celular */
    .executive-card { flex-direction: column; } /* Foto em cima, texto embaixo */
    .exec-photo { height: 350px; flex: auto; width: 100%; }
}

/* =========================================================================
   SEÇÃO MANIFESTO (POR QUE EXISTIMOS) - REDESIGN
   ========================================================================= */

.manifesto-section {
    position: relative;
    padding: 100px 0;
    background-color: #0f172a; /* Base escura */
    overflow: hidden;
    color: #fff;
}

/* Fundo Gradiente Rico */
.manifesto-bg-layer {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at 50% 0%, #1e293b 0%, #0f172a 70%);
    opacity: 0.8;
    z-index: 0;
}

.manifesto-section .container {
    position: relative; z-index: 1;
}

/* Cabeçalho */
.manifesto-header {
    text-align: center; margin-bottom: 60px;
}
.manifesto-tag {
    display: inline-block;
    color: var(--theme-color-secondary); /* Ciano/Verde neon */
    font-size: 12px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
    margin-bottom: 10px;
}
.manifesto-header h2 {
    font-size: 42px; color: #fff; margin: 0; font-weight: 700;
}
.title-line {
    width: 60px; height: 3px; background: linear-gradient(to right, var(--theme-color-primary), var(--theme-color-secondary));
    margin: 20px auto 0;
}

/* Grid de 3 Colunas */
.manifesto-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-bottom: 60px;
}

.manifesto-col {
    background: rgba(255, 255, 255, 0.03); /* Vidro muito sutil */
    border: 1px solid rgba(255, 255, 255, 0.05);
    padding: 30px;
    border-radius: 16px;
    transition: transform 0.3s, background 0.3s;
}
.manifesto-col:hover {
    background: rgba(255, 255, 255, 0.06);
    transform: translateY(-5px);
}

/* Ícones de Destaque */
.col-icon {
    width: 50px; height: 50px;
    background: rgba(168, 85, 247, 0.2); /* Roxo translúcido */
    color: #d8b4fe;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 20px;
    margin-bottom: 20px;
}
/* Cores diferentes para cada ícone se quiser variar */
.manifesto-col:nth-child(2) .col-icon { background: rgba(56, 189, 248, 0.2); color: #7dd3fc; }
.manifesto-col:nth-child(3) .col-icon { background: rgba(16, 185, 129, 0.2); color: #6ee7b7; }

.manifesto-col h4 {
    font-size: 20px; color: #fff; margin-bottom: 15px; font-weight: 600;
}
.manifesto-col p {
    font-size: 15px; line-height: 1.7; color: #cbd5e1; /* Cinza claro para leitura */
    text-align: left; margin: 0;
}

/* Frase Final de Impacto */
.manifesto-footer-quote {
    max-width: 800px; margin: 0 auto; text-align: center;
    position: relative; padding: 0 20px;
}
.quote-mark {
    font-size: 30px; color: var(--theme-color-primary); opacity: 0.5; margin-bottom: 20px; display: block;
}
.manifesto-footer-quote p {
    font-size: 22px; font-weight: 300; line-height: 1.5; color: #fff; font-style: italic;
    font-family: 'Poppins', sans-serif;
}

/* MOBILE */
@media (max-width: 992px) {
    .manifesto-grid { grid-template-columns: 1fr; gap: 30px; }
    .manifesto-col { text-align: center; }
    .col-icon { margin: 0 auto 20px; }
    .manifesto-col p { text-align: center; }
    .manifesto-footer-quote p { font-size: 18px; }
}

/* =========================================================================
   FOOTER FINAL CORRIGIDO (CAMADAS E INTERAÇÃO)
   ========================================================================= */

/* 1. ESTRUTURA GERAL */
.footer-compact-final {
    position: relative;
    width: 100%;
    background: url('assets/footer-bg.webp') no-repeat top center;
    background-size: cover;
    margin-top: 0;
    padding-top: 160px; 
    padding-bottom: 30px;
    font-family: 'Montserrat', sans-serif;
    color: white;
    z-index: 20 !important; 
    overflow: visible !important; 
}

/* 2. PARTÍCULAS (NO FUNDO E INTOCÁVEIS) */
#particles-footer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* Fica no fundo */
    pointer-events: none !important; /* O SEGREDO: Permite clicar através delas */
}

/* 3. CAIXA FLUTUANTE (NO MEIO) */
.floating-box-tight {
    position: absolute;
    top: -110px; 
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    max-width: 1200px;
    height: 220px; 
    z-index: 50; /* Acima das partículas, mas ABAIXO do menu */
}

/* ESTILO DA CAIXA (DUAL TONE) */
.blur-card-tight {
    width: 100%; height: 100%;
    background: transparent; 
    border-radius: 40px; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex; flex-direction: column;
    border: 1px solid rgba(255,255,255,0.15);
}
.box-half-top {
    height: 50%; width: 100%;
    background-color: #ffffff; 
    display: flex; align-items: center; justify-content: center;
    padding: 0 30px;
    position: relative; z-index: 2;
}
.box-half-bottom {
    height: 50%; width: 100%;
    background: rgba(255, 255, 255, 0.05); 
    backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
    display: flex; align-items: center; justify-content: center;
    padding: 0 30px;
    border-top: 1px solid rgba(255,255,255,0.1); 
}

/* TEXTOS E BOTÕES */
.header-tight h2 { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 30px; color: #2e2a5b; margin-bottom: 5px; line-height: 1; }
.header-tight p { font-family: 'Roboto', sans-serif; font-size: 15px; color: #4b5563; margin: 0 auto; line-height: 1; font-weight: 400; }
.actions-tight { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; }

.btn-gradient-tight {     
    display: inline-block;
    padding: 14px 30px;
    background: #3b82f6; /* Azul Cognvox */
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
    transition: all 0.4s ease;
    cursor: pointer;
}

.btn-gradient-tight:hover {
    background: #a855f7; /* Roxo Cognvox no hover */
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(168, 85, 247, 0.35);
    color: #ffef67 !important; /* Texto amarelo no hover */}


.purple-mode { background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 100%); }
.green-mode { background: linear-gradient(90deg, #10B981 0%, #059669 100%); }

/* 4. CAMADA DE CONTEÚDO (MENU) - AQUI ESTAVA O ERRO */
.footer-content-layer {
    position: relative;
    /* Mudei de 1 para 100. Isso coloca o menu NA FRENTE da caixa flutuante */
    z-index: 100 !important; 
}

/* MENU DO RODAPÉ */
.grid-footer-main { display: flex; justify-content: space-between; align-items: center; padding-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,0.1); flex-wrap: wrap; gap: 25px; }
.brand-column { display: flex; align-items: center; gap: 25px; }
.logo-footer-small { height: 28px; width: auto; }
.nav-footer-compact ul { display: flex; list-style: none; gap: 20px; margin: 0; padding: 0; }
.nav-footer-compact li.has-dropup { position: relative; display: flex; align-items: center; height: 100%; }

/* LINKS */
.nav-footer-compact a {
    font-family: 'Roboto Condensed', sans-serif; font-size: 13px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none;
    display: flex; align-items: center; gap: 8px; position: relative;
    padding-bottom: 5px; transition: 0.3s;
    color: rgba(255,255,255,0.7);
}
.nav-footer-compact a:hover { color: #FFFFFF; }
.nav-footer-compact a.active-item { color: #ffffff !important; opacity: 1; }
.nav-footer-compact a.active-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: #ff914d; }
.nav-footer-compact a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0%; height: 2px; background-color: #ff914d; transition: width 0.3s ease; }
.nav-footer-compact a:hover::after { width: 100%; }

/* 5. SUBMENU (DROPUP) CORRIGIDO */
.submenu-dropup {
    position: absolute;
    bottom: 100%; left: 50%; transform: translateX(-50%);
    min-width: 160px; background: #ffffff; padding: 0;
    border-radius: 8px; 
    overflow: hidden !important; /* Resolve o problema de ficar quadrado */
    box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden; transition: all 0.2s ease-in-out;
    z-index: 99999; margin-bottom: 15px; 
}
.submenu-dropup::after { content: ''; position: absolute; top: 100%; left: 0; width: 100%; height: 20px; background: transparent; }
.submenu-dropup::before { content: ''; position: absolute; bottom: -6px; left: 50%; transform: translateX(-50%); border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid #fff; }

.submenu-dropup li a {
    color: #475569 !important; padding: 12px 20px;
    font-size: 13px !important; font-family: 'Roboto', sans-serif !important;
    text-transform: none !important; font-weight: 500 !important;
    display: block; width: 100%; text-align: left; transition: 0.3s;
}
.submenu-dropup li a:hover { background: #f1f5f9; color: var(--theme-color-primary) !important; padding-left: 25px; }
.submenu-dropup li a::after { display: none !important; }

/* AÇÃO DE MOSTRAR */
.nav-footer-compact li.has-dropup:hover .submenu-dropup { opacity: 1; visibility: visible; }

/* SOCIAL E MOBILE */
.social-column { display: flex; align-items: center; gap: 20px; }
.social-list-compact { display: flex; gap: 10px; }
.social-list-compact a { color: rgba(255,255,255,0.6); width: 30px; height: 30px; border: 1px solid rgba(255,255,255,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; transition: 0.3s; }
.social-list-compact a:hover { background: white; color: #2e2a5b; transform: translateY(-2px); }
/* =========================================
   BOTÃO DE ACESSO (Premium Glass)
   ========================================= */

.btn-access-compact {
    padding: 8px 24px; 
    border-radius: 50px;
    
    font-family: var(--font-poppins), sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1px;
    color: #ffffff; /* Letra branca fica mais elegante no topo escuro */
    text-decoration: none;
    
    display: flex;
    align-items: center;
    gap: 10px;
    
    /* Vidro mais presente que o das redes sociais */
    background: rgba(255, 255, 255, 0.08); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Borda sutil para dar o formato, mas bem definida */
    border: 1px solid rgba(255, 255, 255, 0.2);
    
    /* Sombrinha tátil para parecer um botão flutuante */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

/* O Ícone de Usuário (Mantém um destaque de cor sutil) */
.btn-access-compact i {
    font-size: 1.1rem;
    color: var(--color-cta-label); /* Puxando aquele amarelinho da sua variável */
    transition: transform 0.3s ease;
}

/* Interação de Hover (Passar o mouse) */
.btn-access-compact:hover {
    /* O vidro fica mais leitoso/claro */
    background: rgba(255, 255, 255, 0.15); 
    border-color: rgba(255, 255, 255, 0.4);
    
    /* Pula um pouquinho e aumenta a sombra */
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

.btn-access-compact:hover i {
    transform: scale(1.1); /* Ícone dá uma respirada */
}
.legal-line-compact { padding-top: 15px; display: flex; justify-content: space-between; font-size: 10px; color: rgba(255,255,255,0.4); }
.legal-urls-compact a { color: rgba(255,255,255,0.4); text-decoration: none; transition: 0.3s; }
.legal-urls-compact a:hover { color: white; } .divisor { margin: 0 10px; }

@media (max-width: 990px) {
    .floating-box-tight { position: relative; top: -30px; left: auto; transform: none; margin: 0 auto 30px auto; height: auto; max-width: 90%; border-radius: 30px; z-index: 50; }
    .box-half-top, .box-half-bottom { height: auto; padding: 25px 20px; }
    .footer-compact-final { padding-top: 40px; }
    .grid-footer-main { flex-direction: column; gap: 20px; text-align: center; }
    .brand-column { flex-direction: column; gap: 15px; }
    .nav-footer-compact ul { flex-wrap: wrap; justify-content: center; }
    .social-column { flex-direction: column; gap: 15px; }
    .legal-line-compact { flex-direction: column; align-items: center; gap: 10px; }
    .submenu-dropup { display: none !important; }
}

/* =========================================================================
   HERO V3: ALINHAMENTO ESQUERDA + GRID SEGURO
   ========================================================================= */

/* 1. HEADER REORGANIZADO (LOGO ESQUERDA) */
.header-flex-left {
    display: flex;
    align-items: center;
    gap: 40px; /* Espaço entre logo e menu */
    width: 100%;
}
.header-logo-left img {
    height: 42px; /* Altura elegante para a logo */
    width: auto;
    display: block;
}
/* Remove margens antigas do menu para ele colar na logo */
.header-left-menu { margin: 0 !important; }


/* 2. HERO SECTION (CONTAINER NOVO) */
.hero-v3-section {
    position: relative;
    min-height: 100vh;
    width: 100%;
    
    /* SEU BACKGROUND NOVO */
    background: url('assets/background_Novo.webp') no-repeat center center;
    background-size: cover;
    background-color: var(--color-bg-dark); /* Cor de segurança */
    
    display: flex;
    align-items: center;
    padding-top: 90px; /* Espaço do header */
    overflow: hidden;
}

/* 3. GRID PRINCIPAL (TEXTO | AVATARES) */
.hero-v3-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* Texto um pouco maior */
    gap: 20px;
    width: 100%;
    max-width: 1400px; /* Largura máxima do site */
    margin: 0 auto;
    padding: 0 40px;
    height: 100%;
    align-items: center; /* Centraliza verticalmente o conteúdo */
}

/* 4. LADO ESQUERDO: TEXTO */
.hero-v3-text {
    z-index: 10;
    text-align: left; /* Garante alinhamento à esquerda */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.title-v3 {
    font-family: var(--font-poppins, sans-serif);
    font-size: 3.5rem; /* Grande mas não gigante */
    font-weight: 700;
    line-height: 1.15;
    color: white;
    margin-bottom: 20px;
}

.subtitle-v3 {
    font-family: var(--font-roboto, sans-serif);
    font-size: 1.15rem;
    color: #cbd5e1;
    font-weight: 300;
    line-height: 1.6;
    max-width: 90%;
    margin-bottom: 35px;
}

/* Botões alinhados à esquerda */
.actions-v3 {
    display: flex;
    align-items: center;
    gap: 20px;
}
.btn-v3-primary {
    background: linear-gradient(90deg, #3b82f6 0%, #2563eb 100%);
    color: white; padding: 14px 32px; border-radius: 50px;
    font-weight: 700; text-transform: uppercase; text-decoration: none;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.4);
    transition: 0.3s;
}
.btn-v3-primary:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(59, 130, 246, 0.6); }

.btn-v3-video {
    display: flex; align-items: center; gap: 12px;
    color: white; text-decoration: none; opacity: 0.9; transition: 0.3s;
}
.btn-v3-video:hover { opacity: 1; transform: translateX(5px); }
.icon-play-v3 {
    width: 45px; height: 45px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.4); background: rgba(255,255,255,0.1);
    display: flex; align-items: center; justify-content: center;
}


/* 5. LADO DIREITO: CLUSTER DE AVATARES (SAFE ZONE) */
.hero-v3-visual {
    position: relative;
    width: 100%;
    height: 500px; /* Altura fixa para conter os avatares */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Onde os avatares ficam posicionados */
.avatar-v3 {
    position: absolute;
    width: 100px; height: 100px; /* TODOS IGUAIS */
    
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 15px 35px rgba(0,0,0,0.3);
    
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s ease;
    animation: float-v3 5s ease-in-out infinite;
    z-index: 5;
    cursor: pointer;
}

.avatar-v3:hover {
    transform: scale(1.15) !important;
    z-index: 50;
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255,255,255,0.5);
}

.avatar-v3 img {
    width: 70px; height: 70px; object-fit: contain;
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3));
    transition: 0.3s;
}
.avatar-v3:hover img { transform: scale(1.1); }

/* POSICIONAMENTO MANUAL SEGURO (Baseado no centro do container visual) */
/* Usamos % para ser responsivo, mas contido no .hero-v3-visual */

/* Topo Esquerda (Familia) */
.pos-top-l { top: 5%; left: 10%; animation-delay: 0s; }
.pos-top-l:hover { box-shadow: 0 0 30px #3b82f6; }

/* Topo Direita (Professor) */
.pos-top-r { top: 10%; right: 10%; animation-delay: 1s; }
.pos-top-r:hover { box-shadow: 0 0 30px #10b981; }

/* Centro (Estudante) */
.pos-cen { top: 40%; left: 50%; transform: translate(-50%, -50%); animation-delay: 0.5s; z-index: 8; }
.pos-cen:hover { box-shadow: 0 0 30px #a855f7; }

/* Baixo Esquerda (Gestor) */
.pos-bot-l { bottom: 10%; left: 15%; animation-delay: 1.5s; }
.pos-bot-l:hover { box-shadow: 0 0 30px #64748b; }

/* Baixo Direita (Saúde) */
.pos-bot-r { bottom: 5%; right: 5%; animation-delay: 2s; border-color: rgba(45, 212, 191, 0.4); }
.pos-bot-r:hover { box-shadow: 0 0 30px #2dd4bf; border-color: #2dd4bf; }


/* BARRA INFERIOR (CORRIGIDA) */
.hero-v3-footer {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 20px 40px;
    display: flex; justify-content: space-between; align-items: flex-end;
    z-index: 20;
}
.partners-v3 img { height: 25px; filter: brightness(0) invert(1); opacity: 0.5; margin: 0 15px; }
.social-v3 a { color: rgba(255,255,255,0.6); font-size: 18px; margin-left: 15px; }
.social-v3 a:hover { color: white; }

/* ANIMAÇÃO */
@keyframes float-v3 { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

/* RESPONSIVO MOBILE */
@media (max-width: 990px) {
    .header-flex-left { justify-content: center; flex-direction: column; gap: 15px; }
    .hero-v3-grid { grid-template-columns: 1fr; text-align: center; padding-top: 20px; }
    .hero-v3-text { align-items: center; text-align: center; }
    .actions-v3 { justify-content: center; }
    .hero-v3-visual { height: 350px; margin-top: 30px; }
    .avatar-v3 { width: 80px; height: 80px; }
    .avatar-v3 img { width: 50px; height: 50px; }
    
    /* Posições Mobile (Para não encavalar) */
    .pos-top-l { left: 5%; top: 0; }
    .pos-top-r { right: 5%; top: 10%; }
    .pos-bot-l { left: 10%; bottom: 10%; }
    .pos-bot-r { right: 0; bottom: 0; }
    
    .hero-v3-footer { position: relative; flex-direction: column-reverse; gap: 20px; align-items: center; }
}



/* =========================================================================
   HERO: MODO DE SEGURANÇA (SEM EFEITOS)
   ========================================================================= */

.hero-final-section {
    position: relative;
    width: 100%;
    min-height: 100vh;
    
    /* Muda de center para flex-start para o conteúdo grudar em cima */
    display: flex; 
    flex-direction: column;
    justify-content: flex-start; 
    
    /* O respiro exato abaixo do menu (Ajuste se quiser mais perto ou longe) */
    padding-top: 150px; 
    
    overflow: hidden; 
    background-color: var(--color-bg-dark) !important; 
}

/* =========================================================================
   ANIMAÇÃO DE FLUTUAÇÃO (O TOQUE DE VIDA)
   ========================================================================= */

/* Cria o movimento de "respiração" lento */
@keyframes bg-breathe {
    0% {
        transform: scale(1) translateY(0);
    }
    50% {
        /* Aumenta 5% e sobe 10px - movimento imperceptível mas sente-se a vida */
        transform: scale(1.09) translateY(-15px); 
    }
    100% {
        transform: scale(1) translateY(0);
    }
}

/* APLICANDO NA SUA CAMADA DE FUNDO */
.layer-bg-clean {
    position: absolute; inset: 0; z-index: 1;
    
    /* Mantenha sua imagem que funcionou */
    background-image: url('assets/bg_3.webp'); 
    background-size: cover; 
    background-position: top center;
    
    /* Mantenha o modo normal para não ter nata */
    opacity: 1;
    mix-blend-mode: screen; 
    
    /* AQUI ESTÁ A MÁGICA: 20 segundos para ir e voltar */
    animation: bg-breathe 15s ease-in-out infinite;
    
    /* Garante que o movimento seja suave na placa de vídeo */
    will-change: transform;
}

.layer-gradient {
    position: absolute; inset: 0; z-index: 3;
    pointer-events: none; /* Deixa clicar no que está embaixo */
    background: linear-gradient(
        to bottom,
        transparent 0%,
        rgba(16, 11, 43, 0.4) 60%, 
        #190968 100% /* Use a cor predominante do rodapé da sua imagem */
    );
    mix-blend-mode: multiply;
}


/* 3. CONTEÚDO (CAMADA 10) */
.final-container {
    position: relative; 
    z-index: 10;
    
    /* TRAVA NA MESMA LARGURA DO SEU HEADER (1400px / 90%) */
    width: 90%; 
    max-width: var(--container-width, 1400px);
    margin: 0 auto; 
    padding: 0; /* Tira as sobras que empurravam o texto */
    
    display: grid; 
    grid-template-columns: 0.8fr 1.2fr;
    gap: 40px;
    
    /* ALINHAMENTO PELO TOPO: Isso nos dá controle para o Arco passar o texto */
    align-items: flex-start; 
}

/* Desativa partículas para não atrapalhar */
/* --- PARTICULAS --- */
#particles-js {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    
    /* Z-INDEX: 2 */
    /* Fica junto com as linhas, atrás do degradê roxo. */
    /* Assim elas somem suavemente no fundo. */
    z-index: 4; 
    opacity: 0.6;
    pointer-events: none; /* Garante que não bloqueie cliques */
}

/* ESQUERDA */
.final-left {
    text-align: left; 
    display: flex; 
    flex-direction: column; 
    align-items: flex-start; 
    z-index: 20;
    
    /* EMPURRÃO PARA BAIXO: Assim a palavra "Desenvolvendo" 
       fica na linha exata da caixa "Família" e "Saúde" passa lá pro alto */
    margin-top: -20px; 
}

.final-right {
    display: flex;
    justify-content: flex-end; /* Empurra o bloco inteiro para o limite direito */
    width: 100%;
}

/* TÍTULO COMPACTO */
.final-title {
    font-family: 'Poppins', sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    
    /* Linhas mais próximas (Compactação vertical) */
    line-height: 1.0; 
    
    color: #ffffff;
    margin-bottom: 25px;
    letter-spacing: 1.0px;
    text-shadow: none;
}

/* CAIXA AZUL (Com Multiply) */
.neon-blue {
    display: inline-block;
    font-weight: 700;
    color: #ffffff;
    
    padding: 2px 10px;
    margin: 0 4px;
    border-radius: 0px;
    
    /* Clareei um pouco para o Multiply não matar a cor */
    background-color: #1e70eb; 
    
    /* A MÁGICA: O fundo interage com a imagem atrás */
    mix-blend-mode: multiply; 
    
    /* Reset de texto */
    backdrop-filter: none;
    box-shadow: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
}

/* CAIXA ROXA (Com Multiply) */
.neon-purple {
    display: inline-block;
    font-weight: 700;
    color: #ffffff;
    
    padding: 2px 10px;
    margin: 0 4px;
    border-radius: 0px;
    
    /* Clareei um pouco também */
    background-color: #a560c4;
    
    /* A MÁGICA */
    mix-blend-mode: multiply;
    
    backdrop-filter: none;
    box-shadow: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: initial;
}

/* SUBTÍTULO (Com Linha Azul + Sombra Discreta) */
.final-subtitle {
    font-family: 'Roboto', sans-serif;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #ffffff; 
    
    /* SOMBRA SUTIL: Menor e mais suave, só para garantir leitura */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
    
    max-width: 500px;
    margin-bottom: 45px;
    font-weight: 400;
    
    /* A LINHA AZUL DE VOLTA */
    border-left: 3px solid #3b82f6; 
    padding-left: 20px; /* Afasta o texto da linha */
}

/* =========================================================================
   BOTÃO MENINO & MENINA (COMPACTOS, ALINHADOS E COM DESLIZE DE HOVER)
   ========================================================================= */

/* --- CONTAINERS PRINCIPAIS --- */
.cta-boy-wrapper, .cta-girl-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    width: max-content; /* A caixa termina exatamente onde o texto acaba */
    text-decoration: none; 
    color: inherit; 
    transition: transform 0.4s ease;
}

/* O Encaixe Inicial: Menina alinhada abaixo e à direita do menino */
.cta-boy-wrapper { margin-top: -10px; }
.cta-girl-wrapper { margin-top: -25px; margin-left: 140px; } /* De 15px para -5px (sobe e junta) */

/* --- AS IMAGENS (AVATARES) --- */
.boy-avatar, .girl-avatar {
    position: relative;
    z-index: 10; /* Sempre POR CIMA do vidro */
    width: 140px; /* AGORA OS DOIS TÊM EXATAMENTE O MESMO TAMANHO */
    pointer-events: none; 
}

.boy-avatar img, .girl-avatar img {
    width: 100%; 
    display: block;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.3s ease;
    transform-origin: bottom center; 
}

/* A MÁGICA DO ALINHAMENTO: Ambos entram 40px no vidro, e descem 20px */
.boy-avatar { 
    margin-right: -40px; 
    margin-bottom: -20px; 
    filter: drop-shadow(5px 10px 20px rgba(0,0,0,0.4));
}

.girl-avatar { 
    margin-left: -40px; 
    margin-bottom: -20px; 
    filter: drop-shadow(-3px 5px 10px rgba(0,0,0,0.25)); 
}

/* Hover: Gira suavemente para trás/frente */
.cta-boy-wrapper:hover .boy-avatar img {
    transform: scale(1.08) rotate(-3deg); 
    filter: drop-shadow(8px 15px 30px rgba(0,0,0,0.6));
}

.cta-girl-wrapper:hover .girl-avatar img {
    transform: scale(1.05) rotate(3deg); 
    filter: drop-shadow(-5px 10px 20px rgba(0,0,0,0.4));
}


/* --- AS CAIXAS DE VIDRO --- */
.btn-glass-content, .glass-girl {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 60px; 
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    z-index: 1; /* Fica ATRÁS das imagens */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
}

/* Paddings Base: Espaço maior no lado em que a imagem está apoiada */
.btn-glass-content { padding: 12px 30px 12px 50px; } /* Menino na esquerda */
.glass-girl { padding: 12px 50px 12px 30px; } /* Menina na direita */


/* --- HOVER NAS CAIXAS DE VIDRO (AÇÃO E DESLIZE) --- */
/* Menino (Azul) */
.cta-boy-wrapper:hover .btn-glass-content {
    background: rgba(59, 130, 246, 0.2); 
    border-color: rgba(59, 130, 246, 0.5);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3); 
    /* O Deslize para a Direita */
    padding-left: 65px; 
    padding-right: 15px;
}

/* Menina (Verde) */
.cta-girl-wrapper:hover .glass-girl {
    background: rgba(34, 197, 94, 0.2); 
    border-color: rgba(34, 197, 94, 0.5);
    box-shadow: 0 0 20px rgba(34, 197, 94, 0.3); 
    /* O Deslize para a Esquerda */
    padding-right: 65px; 
    padding-left: 15px; 
}


/* --- TEXTOS E ÍCONES (IDÊNTICO AO SEU ORIGINAL) --- */
.btn-texts { display: flex; flex-direction: column; line-height: 1.2; }
.txt-small { font-size: 0.7rem; letter-spacing: 1px; opacity: 0.8; text-transform: uppercase; color: #fff;}
.txt-bold { font-size: 1rem; font-weight: 700; color: #fff; }
.icon-play-white { font-size: 1rem; color: #fff; display: flex; align-items: center; justify-content: center; width: 35px; height: 35px;}


/* =========================================
   NOVA ESTRUTURA BASE: ARCO, FLUIDEZ E BLUR
   ========================================= */

.hero-arch-container {
    display: flex;
    gap: 0 !important; /* Força zero gap */
    align-items: flex-end;
    justify-content: center;
    width: 100%;
    /* Aumentamos a largura para elas terem espaço para se encostar */
    max-width: 1200px; 
    height: 60vh;
    margin: 0 auto;
    padding: 0; /* Garante que o container não tenha padding interno */
}

.arch-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 !important; 
    padding: 0 !important;
    position: relative;
    /* Remove qualquer limite de largura que possa estar a encolher a coluna */
    min-width: 0; 
}

/* --- A CAIXA DA MÁSCARA (Fade Suave da Base) --- */
.arch-mask-container {
    width: 100%;
    aspect-ratio: 1 / 3.2; 
    position: relative;
    margin: 0;
    /* Mantém a imagem sólida por mais tempo e estica o sumiço até o final (100%) */
    -webkit-mask-image: linear-gradient(to bottom, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, rgba(0,0,0,0.7) 80%, transparent 100%);
}

/* --- O CARTÃO E A SOMBRA --- */
.arch-card {
    position: absolute;
    width: 100%;
    height: 100%; 
    border-radius: 0; /* Obrigatório para colar 100% */
    overflow: hidden; 
    /* Removemos a sombra externa que criava um "vão" visual entre as fotos */
    box-shadow: none; 
}

/* --- A MÁGICA: O BLUR NA BASE DA IMAGEM --- */
/* Cria um vidro sobre a imagem, mas que só desfoca a parte de baixo! */
.arch-card::after {
    content: '';
    position: absolute;
    inset: 0;
    
    /* O SEGREDO: Leve escurecimento na base para dar contraste ao desfoque */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 40%);
    
    /* Aumentamos o desfoque para ficar bem visível */
    backdrop-filter: blur(15px); 
    -webkit-backdrop-filter: blur(15px);
    
    /* A máscara do blur: Sólida na base e vai subindo */
    -webkit-mask-image: linear-gradient(to top, black 0%, black 15%, transparent 50%);
    mask-image: linear-gradient(to top, black 0%, black 15%, transparent 50%);
    
    pointer-events: none;
    z-index: 5;
}

.arch-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top; 
}

/* --- O ARCO (Posicionamento Vertical em Porcentagem para ser Fluido) --- */
.pos-3 { top: 0%; }         /* Centro */
.pos-2, .pos-4 { top: 3%; } /* Descem um pouco */
.pos-1, .pos-5 { top: 7%;} /* Descem mais */

/* --- LÓGICA DA AURA (PARA NÃO FICAR QUADRADA) --- */

/* 1. Preparamos a imagem de trás para crescer do centro */
.arch-card img.img-base {
    transform-origin: center center !important;
    transition: all 0.6s ease-in-out !important;
}

/* 2. Quando passamos o mouse, ela vira um círculo antes de borrar */
.arch-col:hover .img-base {
    border-radius: 50% !important; /* Aqui vira bola */
    transform: scale(1.4) !important; /* Aqui ela cresce para espalhar a luz */
    filter: blur(30px) brightness(1.3) !important; /* Aqui ela vira fumaça */
    opacity: 0.8 !important;
}

/* 3. Liberamos as "paredes" para o brilho não ser cortado em linha reta */
.arch-col:hover .arch-mask-container,
.arch-col:hover .arch-card {
    overflow: visible !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* --- OS NOMES (Integrados, Finos e com Degradê Sutil) --- */
.arch-title {
    position: absolute;
    bottom: 5%; 
    
    font-family: var(--font-poppins), sans-serif;
    font-weight: 400; 
    font-size: clamp(0.7rem, 1.1vw, 1.1rem); 
    text-transform: uppercase;
    letter-spacing: 2px;
    z-index: 10;
    
    /* A Magia do Degradê no Texto (Obrigatório estas 4 linhas juntas) */
    background-image: var(--text-gradient, linear-gradient(to bottom, #ffffff, #aaaaaa));
    color: transparent; 
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent; /* Força o navegador a mostrar o degradê */
    
    /* Sombra usando drop-shadow para não bugar o degradê */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6)); 
}

/* --- AS CORES DE CADA ÁREA (Do Branco para a Cor da Sessão) --- */

.title-familia {
    /* Azul Celeste */
    --text-gradient: linear-gradient(to bottom, #ffffff 40%, #38bdf8 100%);
}

.title-estudante {
    /* Rosinha / Vinho vivo */
    --text-gradient: linear-gradient(to bottom, #ffffff 40%, #fb7185 100%); 
}

.title-pscicologo {
    /* Verdinho Menta */
    --text-gradient: linear-gradient(to bottom, #ffffff 40%, #2dd4bf 100%);
}

.title-gestor {
    /* Cinza Azulado */
    --text-gradient: linear-gradient(to bottom, #ffffff 40%, #94a3b8 100%);
}

.title-professor {
    /* Verde Quadro/Musgo Brilhante */
    --text-gradient: linear-gradient(to bottom, #ffffff 40%, #4ade80 100%);
}

/* =========================================
   RODAPÉ DA HERO (2 Camadas Alinhadas à Esquerda)
   ========================================= */

/* A CAIXINHA DE VIDRO (POSIÇÃO E CAMADA CORRETAS) */
.hero-footer-bar {
    /* 1. ALINHAMENTO NO CENTRO INFERIOR */
    position: absolute;
    bottom: 40px; /* Distância do fundo da primeira tela */
    left: 50%;
    transform: translateX(-50%);
    width: 90%; /* Largura segura para não encostar nas bordas */
    max-width: 1000px;
    
    /* 2. FORÇA PARA FICAR NA FRENTE E CLICÁVEL */
    z-index: 100; /* Fica acima das partículas, overlay e fundo */
    pointer-events: auto; /* Garante que o mouse consiga tocar nela para pausar a animação */

    /* 3. ESTÉTICA DO VIDRO */
    background: rgba(255, 255, 255, 0.03); 
    backdrop-filter: blur(12px); 
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08); 
    border-radius: 50px; 
    padding: 10px 30px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

/* Estado de entrada (Escondido e um pouco abaixo) */
.hero-footer-bar.reveal-bottom {
    /* Mantém o -50% para não fugir do centro enquanto sobe */
    transform: translateX(-50%) translateY(20px);
    opacity: 0;
}

/* Estado ativo (Visível e no lugar certo) */
.hero-footer-bar.active-reveal {
    /* O !important garante que ele vença o estado reveal-bottom */
    transform: translateX(-50%) translateY(0) !important;
    opacity: 1 !important;
}

/* =========================================================================
   CARROSSEL DE APOIADORES (MARQUEE INFINITO DA HOME)
   ========================================================================= */

.sponsors-footer {
    display: flex;
    align-items: center;
    width: 100%;
    overflow: hidden;
}

/* A PALAVRA "APOIO" (Pequena, fina e chique) */
.sponsors-label {
    flex-shrink: 0;
    font-weight: 500; /* Mais fina */
    color: rgba(255, 255, 255, 0.5); /* Semi-transparente, como uma marca d'água */
    font-size: 0.75rem; /* Bem pequena */
    text-transform: uppercase;
    letter-spacing: 3px; /* Letras espaçadas dão o ar sofisticado */
    padding-right: 25px;
    border-right: 1px solid rgba(255, 255, 255, 0.1); /* Traço muito sutil separando das logos */
}

/* O container que faz a fumaça nas pontas */
.sponsors-marquee-wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
    margin-left: 25px; /* Distância do traço separador */
    -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);
}

/* A "fita" */
.sponsors-logos-track {
    display: flex;
    align-items: center;
    gap: 60px; /* Respiro bem grande entre as marcas para não poluir */
    animation: scrollSponsors 35s linear infinite; 
}

.sponsors-marquee-wrapper:hover .sponsors-logos-track {
    animation-play-state: paused;
}

/* AS LOGOS (Menores e apagadinhas) */
.sponsors-logos-track img {
    height: 22px; /* Super delicadas (antes era 35px) */
    object-fit: contain;
    opacity: 0.35; /* Ficam bem fraquinhas no fundo */
    filter: grayscale(100%);
    transition: all 0.3s ease;
    flex-shrink: 0;
}

/* O brilho ao passar o mouse */
.sponsors-logos-track img:hover {
    opacity: 1;
    filter: grayscale(0%);
    transform: scale(1.1); 
}

@keyframes scrollSponsors {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 30px)); } /* -30px compensa metade do gap */
}

/* --- CAMADA 2: Copy e Links --- */
.footer-left-links {
    display: flex;
    gap: 25px; 
    font-family: var(--font-poppins), sans-serif;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4); /* Deixei levemente mais escuro para ficar sutil */
    letter-spacing: 1px;
}

.footer-left-links a {
    color: rgba(255, 255, 255, 0.4);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-left-links a:hover {
    color: #ffffff;
}

/* =========================================
   REDES SOCIAIS (Cápsula Horizontal no Topo)
   ========================================= */

.header-social-glass {
    display: inline-flex;
    flex-direction: row; /* Garante que fiquem lado a lado */
    align-items: center;
    gap: 15px; /* Um pouco mais juntinhos para o cabeçalho */
    
    /* Pílula na horizontal (padding maior nas laterais, menor em cima/baixo) */
    padding: 8px 20px; 
    border-radius: 50px;
    
    /* A mesma textura de vidro elegante */
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    
    /* Um pequeno respiro para não grudar no botão de Acesso */
    margin-right: 15px; 
}

.header-social-glass a {
    color: rgba(255, 255, 255, 0.6); 
    font-size: 1rem; /* Tamanho delicado para o topo */
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-social-glass a:hover {
    color: #ffffff; 
    /* Efeito tátil: Pula levemente para cima */
    transform: scale(1.15) translateY(-2px); 
}

.hero-section {
    position: relative;
    min-height: 100vh; /* Ocupa sempre a altura da tela */
    display: flex;
    flex-direction: column; /* Organiza em Topo, Meio e Base */
    justify-content: space-between; /* Empurra o topo pra cima e a base pra baixo */
    overflow: hidden;
    padding: 20px 0; /* Um respiro mínimo */
}

.hero-container {
    flex-grow: 1; /* Faz o conteúdo do meio (texto e arcos) ocupar todo o espaço sobrando */
    display: flex;
    align-items: center; /* Centraliza verticalmente o que sobrar de espaço */
    justify-content: space-between;
    width: 100%;
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 40px;
    z-index: 10;
}

.hero-content-left {
    max-width: 550px;
    /* Removemos margens fixas grandes e deixamos o flex trabalhar */
    padding-bottom: 50px; 
}

/* Reduzir um pouco o tamanho dos arcos em telas menores automaticamente */
.hero-arch-container {
    display: flex;
    gap: 15px;
    align-items: flex-end;
    height: 60vh; /* O arco agora se baseia na altura da tela, não em pixels fixos */
    max-height: 550px; 
}

/* =========================================
   A MÁGICA DA INTERAÇÃO ("O VRUM") - SEGURO
   ========================================= */

/* 1. O Fundo Dinâmico (Animação de Cor) */
.hero-dynamic-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: transparent; 
    
    /* Transição suave e demorada para parecer natural */
    transition: background-color 1.2s cubic-bezier(0.4, 0, 0.2, 1); 
    
    pointer-events: none;
    
    /* Faz a cor brilhar e interagir com o fundo escuro */
    mix-blend-mode: hard-light; 
    opacity: 0.5; /* Ajuste aqui a intensidade da "nuvem" de cor */
    
    /* Gradiente para a cor não ser um bloco sólido, mas uma névoa */
    mask-image: radial-gradient(circle at 70% 50%, black 20%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 70% 50%, black 20%, transparent 80%);
}

/* 2. O Efeito de Foco e Escurecimento (Quase Preto e Borrado) */
/* 1. Efeito de Foco e Escurecimento nos outros Avatares */
.hero-arch-container:hover .arch-col {
    opacity: 0.4; 
    filter: blur(6px) brightness(0.3); 
    transform: scale(0.95);
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hero-arch-container .arch-col:hover {
    opacity: 1;
    filter: blur(0) brightness(1); 
    transform: scale(1.05) translateY(-5px); 
    z-index: 100;
}

/* 2. A Aura de Luz (Imagem de Trás Desfocada) */
.arch-col:hover .img-base { 
    opacity: 0.9; 
    transform: scale(1.2); 
    filter: blur(15px); /* Cria o brilho/aura */
}

/* 3. A Imagem Full (O que estava sumindo) */
/* Este bloco é essencial para ela APARECER no hover */
.arch-col:hover .img-fill {
    opacity: 1 !important;
    /* Ela escala de 0.8 para 1.15 para dar o efeito de pulo */
    transform: translateX(-50%) translateY(0) scale(1.15) !important;
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* 4. Limpeza da "Caixa Estranha" */
.arch-col:hover .arch-card {
    box-shadow: none !important;
}

.arch-col:hover .arch-card::after {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 5. A Imagem Full (O Avatar Saltando com Sombra Preta) */
.img-fill {
    position: absolute;
    bottom: 22%; /* Altura para mostrar os ombros */
    left: 50%;
    width: 180%; 
    height: auto;
    transform: translateX(-50%) translateY(20px) scale(0.8);
    opacity: 0;
    z-index: 50;
    pointer-events: none;
    
    /* A Sombra Preta recortada no corpo do PNG */
    filter: drop-shadow(0 25px 35px rgba(0,0,0,0.85));
    
    transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.arch-col:hover .img-fill {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1.15); 
}

.arch-col[data-avatar="estudante"]:hover .img-fill {
    /* O padrão era translateY(0) scale(1.15). 
       Reduzimos a escala e empurramos um pouco para baixo (10px) */
    transform: translateX(-50%) translateY(10px) scale(0.95); 
}

/* 6. O Nome Flutuando com Brilho */
@keyframes titleFloat {
    0% { transform: scale(1.6) translateY(-15px); }
    50% { transform: scale(1.6) translateY(-22px); }
    100% { transform: scale(1.6) translateY(-15px); }
}

.arch-col:hover .arch-title {
    animation: titleFloat 3s ease-in-out infinite;
    font-weight: 800; 
    z-index: 150;
}

/* 7. Proteção das Fontes do Título da Esquerda */
.final-title, .final-subtitle {
    font-family: var(--font-primary), sans-serif !important; 
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.text-changing {
    opacity: 0 !important;
    transform: translateY(15px); 
}

/* =========================================
   ANIMAÇÃO DE ENTRADA (REVEAL)
   ========================================= */

/* Estado inicial de tudo que vai animar */
.reveal {
    opacity: 0;
    pointer-events: none;
    transition: all 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Animações específicas */
.reveal-top { transform: translateY(-30px); }
.reveal-left { transform: translateX(-40px); }
.reveal-bottom { transform: translateY(30px); }
.reveal-scale { transform: scale(0.9); }

/* Classe que o JS vai adicionar para "ligar" o site */
.active-reveal {
    opacity: 1 !important;
    transform: translate(0) scale(1) !important;
    pointer-events: all !important;
}

/* Delay Sequencial (O segredo da harmonia) */
.d-1 { transition-delay: 0.2s; }
.d-2 { transition-delay: 0.4s; }
.d-3 { transition-delay: 0.6s; }
.d-4 { transition-delay: 0.7s; }
.d-5 { transition-delay: 0.8s; }
.d-6 { transition-delay: 0.9s; }
.d-7 { transition-delay: 1.0s; }

/* Container para dar espaço entre o texto e as setas */
.story-action-wrapper {
    margin: 25px 0;
}

/* O Botão para fundo claro */
.btn-story-launch {
    display: inline-block;
    padding: 14px 30px;
    background: #3b82f6; /* Azul Cognvox */
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.25);
    transition: all 0.4s ease;
    cursor: pointer;
}

.btn-story-launch:hover {
    background: #a855f7; /* Roxo Cognvox no hover */
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(168, 85, 247, 0.35);
    color: #ffef67 !important; /* Texto amarelo no hover */
}

/* Container do Player Central */
.gallery-main-player {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.video-wrapper {
    position: relative;
    width: 100%;
    background: #000;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    aspect-ratio: 16 / 9;
}

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

/* Setas de Navegação Abaixo do Vídeo */
.story-nav-arrows-bottom {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.story-nav-arrows-bottom .nav-arrow {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 10px 25px;
    border-radius: 50px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.8rem;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-nav-arrows-bottom .nav-arrow:hover {
    background: #3b82f6;
    border-color: #3b82f6;
    transform: translateY(-2px);
}

/* Overlay de Play nas Miniaturas */
.thumb-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: 0.3s;
}

.thumb-item:hover .thumb-overlay,
.thumb-item.active .thumb-overlay {
    opacity: 1;
}

.thumb-overlay i {
    color: #ffef67;
    font-size: 1.2rem;
}

/* Estilos para o novo Player Inline */
.video-inline-container {
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 20px;
}

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

.story-nav-arrows-inline {
    display: flex;
    justify-content: center;
    gap: 30px;
}

/* Setas em Azul para contraste */
.story-nav-arrows-inline .nav-arrow {
    background: #3b82f6 !important;
    color: white !important;
    border: none !important;
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(59, 130, 246, 0.4);
}

.story-nav-arrows-inline .nav-arrow:hover {
    background: #2563eb;
    transform: scale(1.1);
}

/* Container do Carrossel */
.carousel-3d-container {
    perspective: 1200px;
    height: 450px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.testimonial-card {
    position: absolute;
    width: 400px;
    transition: all 0.6s cubic-bezier(0.2, 0.8, 0.2, 1);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}

/* Posicionamento em Arco (3D) */
.testimonial-card.active {
    opacity: 1;
    z-index: 100;
    transform: translate3d(0, 0, 100px);
    pointer-events: all;
}

.testimonial-card.prev-1 {
    opacity: 0.7;
    z-index: 50;
    transform: translate3d(-250px, 0, -50px) rotateY(25deg);
}

.testimonial-card.next-1 {
    opacity: 0.7;
    z-index: 50;
    transform: translate3d(250px, 0, -50px) rotateY(-25deg);
}

.testimonial-card.prev-2 {
    opacity: 0.3;
    z-index: 20;
    transform: translate3d(-450px, 0, -150px) rotateY(45deg);
}

.testimonial-card.next-2 {
    opacity: 0.3;
    z-index: 20;
    transform: translate3d(450px, 0, -150px) rotateY(-45deg);
}

.testimonial-card.hidden { display: none; }

/* =========================================================================
   GALERIA DE VÍDEO (DESIGN PREMIUM - 100% BLINDADO)
   ========================================================================= */

.gallery-grid-modern {
    display: grid;
    /* A Mágica: "minmax(0, 1fr)" impede que o vídeo expanda infinitamente e quebre a grelha */
    grid-template-columns: 110px minmax(0, 1fr) 300px;
    gap: 35px;
    width: 100%;
    align-items: stretch; /* Faz as 3 colunas terem a mesma altura base */
    margin-top: 20px;
}

/* --- 1. Miniaturas (Esquerda) --- */
.gallery-thumbs-modern {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.thumb-item-modern {
    width: 100%;
    aspect-ratio: 16 / 9; /* Formato de vídeo exato */
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    border: 3px solid transparent;
    opacity: 0.6;
    transition: all 0.3s ease;
}

.thumb-item-modern img { width: 100%; height: 100%; object-fit: cover; }

.play-overlay-mini {
    position: absolute; inset: 0; background: rgba(0,0,0,0.3);
    display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px; opacity: 0; transition: 0.3s;
}

.thumb-item-modern:hover { opacity: 1; transform: scale(1.05); }
.thumb-item-modern:hover .play-overlay-mini { opacity: 1; }

.thumb-item-modern.active {
    opacity: 1;
    border-color: #3b82f6; /* Azul Cognvox */
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
    transform: scale(1.08); 
}
.thumb-item-modern.active .play-overlay-mini { opacity: 0; }

/* --- 2. Player Central --- */
.gallery-player-modern {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.player-wrapper-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #0f172a;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.6);
}

#videoPlayerInline {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* Controles (Setinhas) - Fixos no fundo da coluna central */
/* AJUSTE DO PLAYER DE VÍDEO - SETAS E DOTS */
.player-controls-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    padding: 30px 0; /* Aumenta o respiro em cima e embaixo para não colar */
    overflow: visible !important; /* IMPEDE O CORTE DA SOMBRA */
    position: relative;
}

.control-arrow {
    background: #ffffff; /* Fundo branco sólido para contraste */
    border: 2px solid #e2e8f0; /* Bordinha leve */
    color: var(--theme-color-primary); /* Seta na cor azul principal */
    width: 50px; /* Um pouco maior para facilitar o clique */
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); /* Sombra completa */
    z-index: 10;
}

.control-arrow:hover {
    background: var(--theme-color-primary); /* Inverte no hover: fundo azul */
    color: #ffffff; /* Seta branca no hover */
    transform: translateY(-3px); /* Sobe de leve */
    box-shadow: 0 8px 20px rgba(59, 130, 246, 0.3); /* Sombra azulada no brilho */
    border-color: var(--theme-color-primary);
}

.control-arrow i {
    font-size: 1.4rem; /* Seta maior e mais legível */
}

/* GARANTE A VISIBILIDADE DE TODOS OS DOTS */
.control-dots {
    display: flex;
    gap: 12px;
    align-items: center;
    justify-content: center;
}

.control-dots .dot {
    width: 10px;
    height: 10px;
    background: #cbd5e1; /* Cinza médio para dar leitura em fundo branco */
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 1px solid rgba(0,0,0,0.05); /* Bordinha quase invisível para definição */
}

/* O Dot Ativo (Onde o vídeo está) */
.control-dots .dot.active {
    background: var(--theme-color-primary); /* Azul Cognvox */
    transform: scale(1.4); /* Fica maior para destacar */
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.4);
    border: none;
}

/* Efeito ao passar o mouse nas inativas */
.control-dots .dot:hover:not(.active) {
    background: #94a3b8; /* Escurece um pouco no hover */
    transform: scale(1.1);
}
/* --- 3. Sidebar: Vídeos Fixos (Direita) --- */
/* --- 3. Sidebar: Vídeos Fixos (Direita) --- */
.gallery-fixed-modern {
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* Traz os vídeos para cima e fecha o buraco */
    gap: 30px; /* Mantém um espaçamento elegante entre eles */
}

.fixed-video-card {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 20px;
    overflow: hidden; position: relative; cursor: pointer;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

.fixed-video-card img { width: 100%; height: 100%; object-fit: cover; transition: 0.6s; }
.fixed-video-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); }
.fixed-video-card:hover img { transform: scale(1.05); }

.play-button-glass {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 50px; height: 50px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.5); color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; transition: 0.3s;
}

.fixed-video-card:hover .play-button-glass {
    background: #3b82f6; border-color: #3b82f6; transform: translate(-50%, -50%) scale(1.1);
}

/* --- Responsivo --- */
@media (max-width: 992px) {
    .gallery-grid-modern { grid-template-columns: 1fr; gap: 25px; }
    .gallery-thumbs-modern { flex-direction: row; justify-content: center; order: 2; gap: 10px; }
    .thumb-item-modern { width: 80px; }
    .gallery-player-modern { order: 1; }
    .gallery-fixed-modern { order: 3; flex-direction: row; padding-bottom: 0; }
}
@media (max-width: 576px) {
    .gallery-fixed-modern { flex-direction: column; }
}

/* =========================================================================
   PÁGINA: TECNOLOGIA (RESOLUÇÃO DO MENU SCROLL + OVERLAY DE COR + MIOLO)
   ========================================================================= */

/* Força que o fundo principal da página seja BRANCO, matando a cor creme, e mantém a onda */
body.pg-tecnologia {
    background-color: #ffffff !important; 
    background-image: url('assets/bg-top-interna.webp');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* 1. O OVERLAY NO TOPO: Um subtil filtro azul/roxo que fica SÓ na área da onda */
.tech-overlay-global {
    position: absolute;
    top: 0; left: 0; width: 100%;
    height: 400px; /* Cobre a parte do título */
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.50) 0%, rgba(59, 130, 246, 0.15) 100%);
    backdrop-filter: blur(2px); /* Efeito vidro suave */
    z-index: 1; /* Fica abaixo do menu e do título */
}

/* 2. O MIOLO BRANCO LIMPO E APROVADO */
.pg-tecnologia .tech-miolo-branco {
    background-color: #ffffff;
    padding: 60px 0 250px 0; /* 250px: Este é o escudo que impede o rodapé de cortar o texto! */
    position: relative;
    z-index: 3;
}

/* Layout Texto x Imagem */
.tech-grid-dupla {
    display: flex;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}

.tech-texto { flex: 1; min-width: 300px; }
.tech-texto h2 { font-size: 2rem; color: #100b2b; margin-bottom: 20px; font-weight: 700; }
.tech-texto p { font-size: 1.15rem; line-height: 1.8; color: #475569; text-align: justify; }

.tech-imagem { flex: 1; min-width: 300px; text-align: center; }

/* Imagem PNG limpa, apenas com um recorte visual sutil */
.tech-imagem img {
    width: 100%;
    max-width: 500px;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;}

/* 3. BLOCOS INFERIORES */
.tech-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
    border-top: 2px dashed #e2e8f0;
    padding-top: 60px;
}

.tech-card-item {
    background: #f8fafc;
    padding: 40px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.03);
    transition: transform 0.3s ease;
}

.tech-card-item:hover { transform: translateY(-5px); }
.tech-card-item i { font-size: 2.2rem; margin-bottom: 20px; display: block; }
.tech-card-item h3 { font-size: 1.3rem; color: #1e293b; margin-bottom: 15px; }
.tech-card-item p { font-size: 1.05rem; line-height: 1.7; color: #475569; text-align: justify; margin: 0; }

.tech-card-item.blue { border-top: 4px solid #3b82f6; }
.tech-card-item.blue i { color: #3b82f6; }

.tech-card-item.purple { border-top: 4px solid #a855f7; }
.tech-card-item.purple i { color: #a855f7; }

.tech-card-item.green { border-top: 4px solid #10b981; }
.tech-card-item.green i { color: #10b981; }

@media (max-width: 992px) {
    .tech-grid-dupla { flex-direction: column; }
}

/* =========================================================================
   4. CAIXA DE DOWNLOAD DO PDF (TECNOLOGIA)
   ========================================================================= */
.tech-download-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-left: 5px solid #3b82f6; /* Detalhe azul na lateral */
    border-radius: 12px;
    padding: 35px 40px;
    margin-top: 80px; /* Distância dos cards de cima */
    box-shadow: 0 10px 25px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.tech-download-box:hover {
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-left: 5px solid #a855f7; /* Muda para roxo ao passar o mouse */
}

.tech-download-content {
    display: flex;
    align-items: center;
    gap: 25px;
}

.tech-download-content i.fa-file-pdf {
    font-size: 3.5rem;
    color: #ef4444; /* Vermelho característico de PDF */
}

.tech-download-texts h4 {
    font-size: 1.4rem;
    color: #1e293b;
    margin-bottom: 5px;
    font-weight: 700;
}

.tech-download-texts p {
    font-size: 1.05rem;
    color: #475569;
    margin: 0;
}

.tech-download-btn {
    background: #3b82f6;
    color: #ffffff;
    padding: 14px 28px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
    white-space: nowrap; /* Impede o botão de quebrar em duas linhas */
}

.tech-download-btn:hover {
    background: #a855f7; /* Muda para o roxo Cognvox no hover */
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(168, 85, 247, 0.3);
    color: #ffffff;
}

/* Responsividade para Celulares */
@media (max-width: 992px) {
    .tech-download-box {
        flex-direction: column;
        text-align: center;
        gap: 25px;
        padding: 30px 20px;
    }
    
    .tech-download-content {
        flex-direction: column;
        gap: 15px;
    }
    
    .tech-download-btn {
        width: 100%;
        justify-content: center;
    }
}


/* =========================================================================
   PÁGINA: PRESS RELEASE (LAYOUT EDITORIAL / MAGAZINE)
   ========================================================================= */

.pr-hero-spacing {
    position: relative;
    z-index: 10; /* A MÁGICA: Era 2, agora é 10! Obriga tudo o que está no topo a ficar por cima da caixa branca (que é 3) */
    padding-top: 160px;
    padding-bottom: 40px;
}

.pr-h1-title {
    font-size: 3.5rem;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 0;
}

/* Base do Artigo */
.pr-article-wrapper {
    max-width: 1200px;
    margin: 0 auto;
}

.pr-header-article {
    margin-bottom: 50px;
}

.pr-header-article h2 {
    font-size: 2.8rem;
    color: #100b2b;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 30px;
}

.pr-lead {
    font-size: 1.35rem;
    line-height: 1.8;
    color: #334155;
    font-weight: 500;
    text-align: justify;
    border-left: 4px solid var(--theme-color-primary);
    padding-left: 25px;
}

/* O Grid que quebra o "Blocão" (Texto na Esquerda 60%, Sidebar na Direita 40%) */
.pr-content-grid {
    display: grid;
    grid-template-columns: 1.8fr 1.2fr;
    gap: 70px;
    align-items: start;
}

/* Coluna de Texto Principal */
.pr-main-text p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 25px;
    text-align: justify;
}

.pr-main-text h3 {
    font-size: 1.8rem;
    color: #1e293b;
    margin-top: 50px;
    margin-bottom: 25px;
    font-weight: 700;
}

.pr-list {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #475569;
    margin-bottom: 30px;
    padding-left: 20px;
    list-style-type: none;
}

.pr-list li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 25px;
}

.pr-list li::before {
    content: "•";
    color: var(--theme-color-primary);
    font-weight: bold;
    font-size: 1.5rem;
    position: absolute;
    left: 0;
    top: -2px;
}

/* Coluna Lateral (Sidebar com destaques) */
.pr-sidebar {
    position: sticky;
    top: 130px; /* Acompanha o scroll a uma distância segura do menu */
    display: flex;
    flex-direction: column;
    gap: 20px; /* Reduzido de 30px para 20px para as caixas ficarem mais compactas */
    align-self: start; /* Garante que o bloco flutue sem esticar */
    padding-bottom: 60px; /* Cria um "chão invisível" para o bloco não bater no fundo */
}

.pr-quote {
    font-size: 1.35rem;
    line-height: 1.6;
    color: #ef4444; /* Vermelho alerta/destaque */
    font-style: italic;
    font-weight: 600;
    margin: 0;
    padding: 30px;
    background: #fef2f2;
    border-radius: 15px;
    border-left: 5px solid #ef4444;
}

.pr-quote i {
    display: block;
    font-size: 2rem;
    color: #fca5a5;
    margin-bottom: 15px;
}

.pr-highlight-card {
    background: #f8fafc;
    border-top: 5px solid var(--theme-color-primary);
    padding: 35px 30px;
    border-radius: 15px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.03);
}

.pr-highlight-card h4 {
    font-size: 1.3rem;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 700;
    margin-bottom: 15px;
}

.pr-highlight-card p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #475569;
    margin: 0;
}

.pr-conclusion-box {
    background: linear-gradient(135deg, #100b2b 0%, #3b82f6 100%);
    padding: 30px 25px; /* Levemente reduzido para ganhar espaço de tela */
    border-radius: 15px;
    color: #ffffff;
    text-align: center;
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.2);
    margin-bottom: 60px; /* O GRANDE TRUQUE: essa margem obriga o navegador a dar um respiro embaixo dela! */
}

.pr-conclusion-box p {
    font-size: 1.25rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsividade (Celular junta tudo numa coluna só) */
@media (max-width: 992px) {
    .pr-content-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .pr-sidebar {
        position: static;
    }
}

/* --- ESTILOS CORRIGIDOS PARA IMAGEM FLUTUANTE NO TOPO --- */

/* Transforma o container na "âncora" para a imagem absoluta */
.hero-flex-container {
    position: relative;
    display: flex;
    align-items: center; 
}

/* O texto agora tem um limite de largura para não entrar debaixo da imagem */
.hero-text-content {
    max-width: 60%;
}

/* A MÁGICA DA POSIÇÃO: Mais para cima */
.hero-image-content {
    position: absolute;
    right: 100px;
    top: -50px; /* Puxamos bem mais para cima (antes era 50%) */
    transform: translateY(-10%); 
    z-index: 20; 
}

/* A IMAGEM EM SI: Menor e respeitando a transparência do WebP */
.hero-flying-img {
    max-width: 450px; /* Mantemos o tamanho menor e mais elegante */
    height: auto;
    border-radius: 0; /* Removido para respeitar o recorte do WebP transparente */
    
    /* A MÁGICA: Duas camadas de sombra */
    /* 1ª camada (branca): Centralizada (0 0), bem difusa (15px), criando o halo de luz branca. */
    /* 2ª camada (escura): Mantém a profundidade original para a imagem não ficar "chapada". */
    filter: drop-shadow(0 0 30px rgba(255, 255, 255, 5)) drop-shadow(0 15px 30px rgba(0,0,0,0.2));
    
    transform: rotate(3deg); /* Mantemos o balanço */
    transition: all 0.3s ease;
}

.hero-flying-img:hover {
    transform: rotate(0deg) scale(1.05); 
    /* No hover, mantemos o halo branco original e adicionamos um leve brilho azul Cognvox */
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.6)) drop-shadow(0 20px 40px rgba(59, 130, 246, 0.4)); 
}

/* Responsividade (No celular, desligamos o absoluto para ela não ficar por cima do texto) */
@media (max-width: 992px) {
    .hero-flex-container {
        flex-direction: column;
        text-align: center;
    }
    
    .hero-text-content {
        max-width: 100%;
    }

    .hero-image-content {
        position: relative;
        top: 0;
        transform: none;
        margin-top: 40px; /* Dá um espacinho do texto */
    }
    
    .hero-flying-img {
        max-width: 300px;
        transform: rotate(0deg); 
    }
    
    .tech-theme-bar {
        margin: 20px auto; 
    }
}

/* =========================================================================
   PÁGINA: NA MÍDIA (GRELHA DE CARTÕES)
   ========================================================================= */

.media-intro {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 60px auto;
}

.media-intro h2 {
    font-size: 2.5rem;
    color: #100b2b;
    font-weight: 800;
    margin-bottom: 20px;
}

.media-intro p {
    font-size: 1.15rem;
    line-height: 1.8;
    color: #475569;
}

/* O Grid que organiza os cartões lado a lado */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 30px;
}

/* O Cartão Individual */
.media-card {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden; /* Mantém os cantos arredondados limpos */
    text-decoration: none; /* Tira o sublinhado feio do link */
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
}

.media-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(59, 130, 246, 0.15); /* Sombra azulada Cognvox */
    border-color: #cbd5e1;
}

/* A área de topo do cartão, onde fica o Logo do veículo */
.media-brand {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
}

/* Cores específicas para diferenciar os veículos (Exemplos) */
.brand-exame { background: #000000; }
.brand-pegn { background: #ED1A3B; }
.brand-sebrae { background: #005A9C; }
.brand-unimed { background: #00995D; }
.brand-startupi { background: #FF4A00; }
.brand-kpmg { background: #00338D; }
.brand-default { background: #334155; color: #f8fafc; font-size: 1.2rem; }

/* O Conteúdo do texto do cartão */
.media-content {
    padding: 30px 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    flex: 1; /* Preenche o resto do cartão */
}

.media-content h3 {
    font-size: 1.2rem;
    line-height: 1.5;
    color: #1e293b;
    font-weight: 600;
    margin-bottom: 25px;
}

.media-card:hover .media-content h3 {
    color: var(--theme-color-primary); /* Fica azul ao passar o rato */
}

.media-link {
    font-size: 0.95rem;
    color: var(--theme-color-primary);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    text-transform: uppercase;
}

.media-card:hover .media-link i {
    transform: translateX(5px); /* Setinha anda para a direita */
    transition: transform 0.3s ease;
}

/* =========================================================================
   MODAL DE GALERIA (INDICAÇÕES DE LEITURA)
   ========================================================================= */

.modal-content-gallery {
    position: relative;
    max-width: 700px;
    width: 90%;
    background: #ffffff;
    border-radius: 15px;
    padding: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    z-index: 65;
}

.gallery-image-wrapper {
    width: 100%;
    text-align: center;
    position: relative;
}

.gallery-image-wrapper img {
    max-width: 100%;
    max-height: 70vh; /* Não deixa a imagem ficar maior que a tela */
    border-radius: 8px;
    object-fit: contain;
    transition: opacity 0.3s ease;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
}

/* Setas de Navegação */
.gallery-nav {
    background: var(--theme-color-primary); /* Azul Cognvox */
    color: white;
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 1.5rem;
    cursor: pointer;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(59, 130, 246, 0.4);
}

.gallery-nav:hover {
    background: var(--theme-color-secondary); /* Roxo no Hover */
    transform: translateY(-50%) scale(1.1);
}

.gallery-nav.prev { left: -25px; } /* Metade para fora na esquerda */
.gallery-nav.next { right: -25px; } /* Metade para fora na direita */

.gallery-counter {
    margin-top: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    color: #475569;
}

/* Responsividade pro Celular (Setas entram na caixa) */
@media (max-width: 768px) {
    .gallery-nav.prev { left: 10px; }
    .gallery-nav.next { right: 10px; }
}

/* =========================================================================
   GRID DE VÍDEOS (PÁGINA DE CASES)
   ========================================================================= */
.case-video-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Responsividade: no telemóvel/celular, empilha os vídeos */
@media (max-width: 768px) {
    .case-video-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================================================
   CAPAS INDIVIDUAIS DOS VÍDEOS DE CORURIPE
   ========================================================================= */

.bg-coruripe-1 { background-image: url('assets/coruripevideo1.pjg'); }
.bg-coruripe-2 { background-image: url('assets/coruripevideo2.pjg'); }
.bg-coruripe-3 { background-image: url('assets/coruripevideo3.pjg'); }

/* Garante que a classe base trate a imagem corretamente se já não o fizer */
.material-poster {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}


/* =========================================================================
   COMPACTAÇÃO DO HERO PARA TELAS MENORES (Laptops e Tablets)
   ========================================================================= */

/* 1. Para notebooks comuns (ex: 1366x768) ou monitores com pouca altura */
@media (max-width: 1400px), (max-height: 850px) {
    
    /* Sobe o bloco inteiro para afastar da barra de apoio */
    .final-left { margin-top: -30px; }
    
    /* Textos mais compactos e próximos */
    .final-title { 
        font-size: 2.8rem; /* Reduzido de 3.5rem */
        margin-bottom: 15px; 
        line-height: 1.1; 
    }
    .final-subtitle { 
        font-size: 1rem; 
        margin-bottom: 25px; 
        max-width: 450px; 
    }

    /* Redução das crianças (Avatares) */
    .boy-avatar, .girl-avatar { width: 110px; } /* Reduzido de 140px */
    
    /* Ajuste de encaixe na caixa (invadem menos) */
    .boy-avatar { margin-right: -30px; margin-bottom: -15px; }
    .girl-avatar { margin-left: -30px; margin-bottom: -15px; }

    /* Caixa da Menina sobe e aproxima-se mais do menino */
    .cta-girl-wrapper { margin-top: 0px; margin-left: 80px; }

    /* Caixas de vidro e textos menores */
    .btn-glass-content { padding: 10px 20px 10px 40px; } 
    .glass-girl { padding: 10px 40px 10px 20px; }
    
    .icon-play-white { width: 30px; height: 30px; font-size: 0.8rem; }
    .txt-small { font-size: 0.65rem; }
    .txt-bold { font-size: 0.85rem; }

    /* Recalibração do deslize no hover para a nova largura */
    .cta-boy-wrapper:hover .btn-glass-content { padding-left: 50px; padding-right: 10px; }
    .cta-girl-wrapper:hover .glass-girl { padding-right: 50px; padding-left: 10px; }
}

/* 2. Para telas de Tablets e monitores muito pequenos */
@media (max-width: 1024px) {
    .final-title { font-size: 2.2rem; }
    .final-subtitle { font-size: 0.95rem; margin-bottom: 20px; max-width: 400px; }
    
    .boy-avatar, .girl-avatar { width: 90px; }
    .boy-avatar { margin-right: -25px; margin-bottom: -10px; }
    .girl-avatar { margin-left: -25px; margin-bottom: -10px; }
    
    .cta-girl-wrapper { margin-left: 50px; }
    
    .btn-glass-content { padding: 8px 15px 8px 30px; gap: 10px; }
    .glass-girl { padding: 8px 30px 8px 15px; gap: 10px; }
    
    .cta-boy-wrapper:hover .btn-glass-content { padding-left: 35px; padding-right: 10px; }
    .cta-girl-wrapper:hover .glass-girl { padding-right: 35px; padding-left: 10px; }
}

/* =========================================================================
   SESSÃO ÚLTIMAS NOTÍCIAS (DESIGN CLEAN E CLARO)
   ========================================================================= */

.news-section {
    /* Reduzi o padding do topo de 80px para 40px para encostar mais na Hero */
    padding: 80px 0 80px 0; 
    background-color: #f8fafc; /* Cinza super clarinho e elegante (Slate 50) */
    position: relative;
    z-index: 10;
    width: 100%;
}

.news-grid-4x2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px; 
}

/* CAIXAS BRANCAS E LIMPAS */
.news-card {
    background-color: #ffffff; /* Fundo branco puro */
    border: 1px solid #e2e8f0; /* Bordinha cinza super discreta */
    border-radius: 15px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: var(--color-bg-dark); /* O texto agora é o seu Azul Escuro */
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.03); /* Sombra quase invisível, só pra soltar do fundo */
}

/* Efeito ao passar o mouse */
.news-card:hover {
    transform: translateY(-5px);
    border-color: #cbd5e1;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08); /* Sombra cresce suavemente */
}

/* O Cartão 1 (Oficial) ganha um fundinho azul gelo para se destacar levemente */
.highlight-card {
    background: linear-gradient(135deg, #f0f9ff 0%, #ffffff 100%);
    border-color: #bae6fd;
}

.news-thumb {
    height: 160px;
    background-size: cover;
    background-position: center;
    background-color: #e2e8f0; /* Cinza claro enquanto a imagem não carrega */
    position: relative;
}

.news-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    padding: 5px 15px;
    border-radius: 30px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #fff;
    backdrop-filter: blur(5px);
}

.news-badge.official { background: rgba(59, 130, 246, 0.9); }
.news-badge.insta { background: rgba(225, 48, 108, 0.9); }

.news-body {
    padding: 25px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* TEXTOS INTERNOS DOS CARTÕES */
.news-date {
    font-size: 0.75rem;
    color: #64748b; /* Cinza médio elegante */
    margin-bottom: 10px;
    font-family: var(--font-poppins);
    font-weight: 600;
}

.news-body h3 {
    font-size: 1.05rem;
    line-height: 1.4;
    margin-bottom: 20px;
    color: var(--color-bg-dark); /* Títulos em azul escuro */
    flex: 1;
    font-weight: 700;
}

.news-action {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--theme-color-primary); /* Link em azul vibrante */
    display: flex;
    align-items: center;
    gap: 10px;
    transition: color 0.3s;
}

.news-card:hover .news-action { color: var(--theme-color-secondary); } /* Fica roxinho no hover */

/* DESIGN INTERNO DO MODAL DE TEXTO */
.modal-content-news-text {
    background: #ffffff;
    color: #334155;
    max-width: 800px;
    width: 90%;
    max-height: 85vh;
    border-radius: 15px;
    padding: 40px;
    position: relative;
    overflow-y: auto;
    box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    text-align: left;
}

.modal-content-news-text h2 {
    color: #1e293b;
    font-size: 1.8rem;
    line-height: 1.3;
    margin-bottom: 30px;
    border-bottom: 3px solid var(--theme-color-primary);
    padding-bottom: 15px;
}

.modal-content-news-text p {
    font-family: var(--font-roboto);
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 20px;
}

.modal-content-news-text blockquote {
    font-style: italic;
    font-size: 1.2rem;
    border-left: 4px solid var(--theme-color-primary);
    padding-left: 20px;
    margin: 30px 0;
    color: #475569;
}

/* RESPONSIVIDADE (Tablets e Celulares) - Mude isso lá no final do CSS */
@media (max-width: 1200px) {
    /* Em notebooks/telas menores que Full HD, cai para 3 colunas */
    .news-grid-4x2 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    /* Em tablets, cai para 2 colunas */
    .news-grid-4x2 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    /* No celular, fica 1 coluna só (empilhado) */
    .news-grid-4x2 { grid-template-columns: 1fr; }
}


/* =========================================================================
   TEMA: PSICÓLOGO (VERDE MENTA) - AZUL GELO NO FUNDO E CORREÇÕES FINAIS
   ========================================================================= */

/* O Fundo da Página e o Topo */
.internal-page.pg-psicologo {
    background-image: url('assets/bg-top-psicologo.jpg'); 
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
    background-color: #e1f3ff !important; 
}

.pg-psicologo {
    --theme-color-primary: #2dd4bf;
    --theme-color-secondary: #0f766e; /* Verde Escuro */
}

/* FORÇA A COR DOS TEXTOS PARA LEITURA NO MIOLO */
.pg-psicologo .content-card-white,
.pg-psicologo .service-desc,
.pg-psicologo .lead-text,
.pg-psicologo .body-text,
.pg-psicologo h2.section-title,
.pg-psicologo .card-header h3,
.pg-psicologo .styled-list li {
    color: #1e293b !important; 
}

/* Título Branco da Hero */
.pg-psicologo .hero-title .font-roboto-light,
.pg-psicologo .hero-title .font-roboto-bold {
    color: #ffffff !important; 
}

/* PONTO 2: SUBTÍTULO EM VERDE ESCURO (Para dar leitura perfeita sobre o fundo claro) */
.pg-psicologo .hero-subtext {
    color: var(--theme-color-secondary) !important;
    font-weight: 600;
    font-size: 1.1rem;
}

/* Cores das abinhas de Avatares (Para não sumirem) */
.pg-psicologo .avatar-switcher .avatar-tab span {
    color: #ffffff !important;
}
.pg-psicologo .avatar-switcher .avatar-tab.active span {
    color: var(--theme-color-primary) !important;
    background-color: #ffffff !important;
}

/* PONTO 1: O BG "ESTRATÉGIA INTEGRADA" (SOMENTE A IMAGEM DE FUNDO) */
.pg-psicologo .bg-pscicologo {
    background-image: url('assets/bg_pscicologo_area.jpg') !important;
    background-size: cover;
    background-position: center;
    
    /* A MÁGICA DO SANGRAMENTO: Margens negativas anulam a borda da caixa branca */
    margin: -60px -50px 40px -50px !important;
    padding: 60px 50px !important;
    border-radius: 20px 20px 0 0 !important; /* Arredonda só os cantos superiores */
    position: relative;
    z-index: 1;
}

/* DIAGRAMAÇÃO PREMIUM DO TEXTO DA ESTRATÉGIA INTEGRADA (Sem texto branco feio) */
.pg-psicologo .bg-pscicologo h2.section-title {
    color: #100b2b !important; /* Azul escuro corporativo */
    text-shadow: none !important;
    margin-bottom: 25px;
}
.pg-psicologo .bg-pscicologo h2.section-title span {
    color: var(--theme-color-secondary) !important; /* Verde escuro para destaque */
    font-weight: 800 !important;
    text-shadow: none !important;
}
.pg-psicologo .bg-pscicologo .lead-text {
    color: #334155 !important; /* Cinza Chumbo profundo para leitura */
    text-shadow: none !important;
    font-weight: 500;
    /* Uma "nuvem" branca bem suave só por trás do texto, assim as linhas do cérebro não dificultam a leitura */
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.85) 0%, rgba(255,255,255,0.4) 60%, rgba(255,255,255,0) 100%);
    padding: 30px;
    border-radius: 20px;
}

/* Etiqueta Estratégia Integrada e Ícones Verdes */
.pg-psicologo .section-tag,
.pg-psicologo .icon-badge.blue {
    background: var(--theme-color-primary) !important;
    color: #ffffff !important;
}
.pg-psicologo .section-tag { font-weight: 800 !important; }

/* A CAIXA AZUL ESCURA NO FINAL (Atuar com Sentido) */
.bg-atuar-sentido {
    background: linear-gradient(135deg, #100b2b 0%, #0f172a 100%) !important;
    padding: 40px !important;
    border-radius: 15px;
    display: flex;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
}
.bg-atuar-sentido h2 {
    font-size: 2rem;
    margin-bottom: 15px;
    font-family: var(--font-primary);
    font-weight: 800;
    color: #ffffff !important;
}
.bg-atuar-sentido .lead-atuar {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cbd5e1 !important;
    margin-bottom: 20px;
}
.bg-atuar-sentido .atuar-list,
.bg-atuar-sentido .atuar-list li {
    color: #cbd5e1 !important;
    font-size: 0.95rem;
    line-height: 1.7;
}
.bg-atuar-sentido .atuar-icon {
    font-size: 7rem;
    color: rgba(45, 212, 191, 0.2) !important;
}

/* Responsividade Celular */
@media (max-width: 768px) {
    .bg-atuar-sentido { flex-direction: column-reverse; text-align: center; }
    .bg-atuar-sentido .atuar-list { text-align: left; margin-left: 0; }

    /* Ajuste do sangramento no celular */
    .pg-psicologo .bg-pscicologo {
        margin: -30px -30px 30px -30px !important; 
        padding: 40px 20px !important;
        border-radius: 15px 15px 0 0 !important;
    }
}


/* =========================================================================
   PADRONIZAÇÃO UNIVERSAL DE TODOS OS AVATARES (IMAGENS HERO)
   ========================================================================= */

/* Colocamos todas as classes aqui (inclusive pg-crianca que é a do estudante) */
.pg-familia .hero-image-area img,
.pg-crianca .hero-image-area img,
.pg-professor .hero-image-area img,
.pg-gestor .hero-image-area img,
.pg-psicologo .hero-image-area img {
    
    /* 1. MATA O ZOOM: Remove qualquer scale antigo que deixava tudo gigante */
    transform: none !important; 
    
    /* 2. TRAVA A ALTURA: Todos os avatares ficam contidos na mesma altura! */
    max-height: 350px !important; 
    width: auto !important; 
    
    /* 3. ALINHAMENTO À DIREITA: Empurra a professora e os outros para a direita da caixa */
    margin: 0 0 0 auto !important; 
    
    display: block !important;
    object-fit: contain !important;

}

/* Responsividade: Telas menores e Celulares */
@media (max-width: 1200px) {
    .pg-familia .hero-image-area img,
    .pg-crianca .hero-image-area img,
    .pg-professor .hero-image-area img,
    .pg-gestor .hero-image-area img {
        max-height: 300px !important; 
    }
}
@media (max-width: 992px) {
    .pg-familia .hero-image-area img,
    .pg-crianca .hero-image-area img,
    .pg-professor .hero-image-area img,
    .pg-gestor .hero-image-area img,
    .pg-psicologo .hero-image-area img {
        max-height: 260px !important;
    }
}

/* =========================================================================
   PÁGINA DE CONTATO (ESTILO INSTITUCIONAL COM CAIXAS AZUIS)
   ========================================================================= */

/* 1. Devolve a imagem de fundo (azul escuro) para o Topo da página */
.internal-page.pg-contato {
    background-color: #f2f3ea !important; 
    background-image: url('assets/bg-top-interna.webp'); /* Imagem do topo institucional */
    background-repeat: no-repeat;
    background-position: top center;
    background-size: 100% auto;
}

/* 2. Ajusta as cores do Topo */
.pg-contato .hero-text-content .breadcrumbs,
.pg-contato .hero-text-content .breadcrumbs a { color: #cbd5e1 !important; }
.pg-contato .pr-h1-title { color: #ffffff !important; }

/* 3. A Caixa Branca que abraça o conteúdo */
.pg-contato .white-content-section {
    position: relative;
    z-index: 5;
    background: transparent;
}
.pg-contato .content-card-white {
    background: #ffffff;
    border-radius: 20px;
    padding: 60px 50px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.05);
}

/* 4. A IMAGEM SANGRANDO (O TOPO DO CARTÃO DE CONTATO) */
.pg-contato .bg-contato-topo {
    background-image: url('assets/bg_contato_area.jpg') !important;
    background-size: cover;
    background-position: center -90px !important;
    
    /* Mágica do Sangramento */
    margin: -60px -50px 50px -50px !important;
    padding: 80px 50px !important;
    border-radius: 20px 20px 0 0 !important;
    position: relative;
    z-index: 1;
}
.pg-contato .bg-contato-topo h2.section-title {
    color: #100b2b !important;
    margin-top: 15px;
    font-size: 2.6rem;
}
.pg-contato .bg-contato-topo h2.section-title span {
    color: var(--theme-color-primary) !important;
    font-weight: 800 !important;
}

/* 5. CORES E LINKS VIBRANTES (Acaba com a Palidez!) */
.pg-contato .contact-details p {
    font-size: 1.1rem;
    color: #475569; 
    margin-bottom: 15px;
}
.pg-contato .contact-details i {
    font-size: 1.3rem;
    margin-right: 5px;
    min-width: 25px; /* Alinha os ícones perfeitamente na vertical */
    text-align: center;
}
.pg-contato .contact-details strong {
    color: #1e293b;
}
.pg-contato .action-link {
    color: #0f766e; /* Verde Escuro Cognvox */
    text-decoration: none;
    font-weight: 700;
    margin-left: 35px; /* Alinha o texto do link com o título acima dele */
    display: block;
    margin-top: 5px;
    font-size: 1.15rem;
    transition: color 0.3s ease;
}
.pg-contato .action-link:hover {
    color: var(--theme-color-primary);
    text-decoration: underline;
}

/* Responsividade Celular */
@media (max-width: 768px) {
    .pg-contato .content-card-white { padding: 40px 20px; }
    .pg-contato .bg-contato-topo {
        margin: -40px -20px 30px -20px !important; 
        padding: 50px 20px !important;
        border-radius: 15px 15px 0 0 !important;
    }
}

/* =========================================================================
   PADRONIZAÇÃO DA IMAGEM HERO: QUEM SOMOS
   ========================================================================= */
.pg-quem-somos .hero-image-area img {
    /* 1. Remove qualquer zoom indesejado */
    transform: none !important; 
    
    /* 2. Trava na mesma altura máxima dos outros avatares */
    max-height: 300px !important; 
    width: auto !important; 
    
    /* 3. Empurra a imagem para o canto direito */
    margin: 0 0 0 auto !important; 
    
    display: block !important;
    object-fit: contain !important;
}

/* Ajustes de responsividade (Telas menores e celulares) */
@media (max-width: 1200px) {
    .pg-quem-somos .hero-image-area img {
        max-height: 300px !important; 
    }
}
@media (max-width: 992px) {
    .pg-quem-somos .hero-image-area img {
        max-height: 260px !important; 
        margin: 0 auto !important; /* No celular a imagem vai para o centro */
    }
}

/* Estilo Base do Hambúrguer (Escondido por padrão) */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    z-index: 1100;
    margin-left: auto; /* Joga para a direita no mobile */
}

@media (max-width: 992px) {
    .mobile-menu-toggle {
        display: block !important; /* Aparece no mobile */
    }
}

/* 1. REGRA DE SEGURANÇA: Esconde o grid mobile totalmente no Desktop */
.mobile-profile-grid {
    display: none !important;
}

/* 2. REPARO DOS AVATARES ORIGINAIS (Desktop) */
/* Garante que o switcher original não seja afetado pelo novo grid */
.avatar-switcher, .avatar-tabs-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: auto !important;
}

/* =============================================================
   FORÇA TAREFA MOBILE - INDEX (SUBSTITUA O SEU BLOCO @MEDIA)
   ============================================================= */
@media (max-width: 992px) {
    /* 1. Header: Logo na esquerda, Menu na Direita */
    header.site-header .container.header-flex-left {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 10px 15px !important;
        max-width: 100% !important;
    }

    .header-logo-left {
        margin: 0 !important;
        flex: 0 1 auto !important;
    }

    .header-logo-left img {
        height: 35px !important; /* Logo um pouco menor no mobile */
        width: auto !important;
    }

    .mobile-menu-toggle {
        display: block !important;
        margin: 0 !important;
        order: 2 !important; /* Garante que fica na ponta direita */
    }

    /* Esconde as redes sociais e o menu antigo do topo */
    .header-right-area, 
    .header-left-menu:not(.active) { 
        display: none !important; 
    }

    /* 2. Menu Lateral (Hambúrguer Aberto) */
    .header-left-menu.active {
        display: block !important;
        position: fixed !important;
        top: 0;
        right: 0;
        width: 280px !important;
        height: 100vh !important;
        background: #100b2b !important;
        z-index: 9999 !important;
        padding: 80px 20px !important;
        box-shadow: -5px 0 15px rgba(0,0,0,0.5);
    }

    /* 3. Hero e os Novos Botões (Avatares) */
    .hero-final-section {
        padding-top: 120px !important; /* Espaço para o header fixo */
        text-align: center !important;
    }

    .hero-arch-container h1 {
        font-size: 2rem !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
    }

    /* Grid dos 5 Avatares */
    .mobile-profile-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* 3 em cima, 2 embaixo */
        gap: 10px !important;
        margin: 25px auto !important;
        max-width: 320px;
    }

    .profile-btn {
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        border-radius: 12px !important;
        padding: 15px 5px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-decoration: none !important;
    }

    .profile-btn i { font-size: 1.2rem !important; color: #fff !important; margin-bottom: 5px; }
    .profile-btn span { font-size: 0.7rem !important; color: #fff !important; font-weight: 600; }
}