/* ========================================================= DIREÇÃO "IMERSIVA" — proposta de redesign da home Este arquivo NÃO substitui o style.css: ele entra depois dele e só ajusta o que muda nesta proposta. Assim o site atual continua intacto, e esta página é só uma amostra para mostrar ao chefe. Se vocês aprovarem, a gente leva para o site todo. Tudo aqui vale apenas em páginas com data-tema="imersivo" no — por isso os seletores começam com isso. ========================================================= */ body[data-tema="imersivo"] { background: var(--navy-deep); } /* --------------------------------------------------------- CABEÇALHO — mais escuro, fixo no topo, some ao rolar pra baixo e volta ao rolar pra cima --------------------------------------------------------- */ body[data-tema="imersivo"] .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(6, 21, 43, 0.92); backdrop-filter: blur(8px); border-bottom: 1px solid rgba(183, 149, 83, 0.18); transition: transform 0.35s ease; } body[data-tema="imersivo"] .site-header.is-hidden { transform: translateY(-100%); } /* --------------------------------------------------------- HERO — tela cheia, foto ao fundo, texto centralizado --------------------------------------------------------- */ body[data-tema="imersivo"] .hero-carousel { height: 100vh; min-height: 560px; } body[data-tema="imersivo"] .carousel-slide { /* Escurece a foto para o texto branco ficar legível e para dar o clima do site original. O style.css já põe um degradê escuro por cima do hero — as duas camadas se somam. */ box-shadow: inset 0 0 0 100vmax rgba(6, 21, 43, 0.55); } .hero-conteudo { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; } .hero-selo { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold-light); margin: 0 0 26px; } .hero-titulo { font-family: var(--font-display); font-weight: 500; font-size: clamp(2.4rem, 5.5vw, 4.2rem); line-height: 1.12; color: var(--white); margin: 0; max-width: 15ch; } .hero-risco { width: 64px; height: 1px; background: var(--gold); margin: 34px 0; } .hero-frase { font-size: 1rem; line-height: 1.7; color: rgba(255, 255, 255, 0.82); margin: 0 0 40px; max-width: 52ch; } .hero-botoes { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; } .hero-botao { display: inline-block; padding: 18px 40px; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--gold); color: var(--gold-light); transition: background 0.25s ease, color 0.25s ease; } .hero-botao:hover { background: var(--gold); color: var(--navy-deep); } .hero-botao--solido { background: var(--gold); color: var(--navy-deep); } .hero-botao--solido:hover { background: transparent; color: var(--gold-light); } /* Setinha discreta indicando que há mais conteúdo abaixo */ .hero-seta { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.5); animation: hero-pulo 2.4s ease-in-out infinite; } .hero-seta svg { width: 22px; height: 22px; } @keyframes hero-pulo { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 8px); } } @media (prefers-reduced-motion: reduce) { .hero-seta { animation: none; } } /* --------------------------------------------------------- QUEM SOMOS — agora sobre fundo escuro --------------------------------------------------------- */ body[data-tema="imersivo"] .about-section { background: var(--navy-deep); padding: 110px 32px; } body[data-tema="imersivo"] .about-container { grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; } /* Só os títulos das seções ESCURAS ficam brancos. Antes essa regra pegava todos os títulos, e o "Áreas de Atuação" — que fica sobre fundo claro — saía branco no bege, quase ilegível. */ body[data-tema="imersivo"] .about-section .section-title { color: var(--white); } body[data-tema="imersivo"] .about-text p { color: rgba(255, 255, 255, 0.75); } body[data-tema="imersivo"] .about-text strong { color: var(--gold-light); font-weight: 500; } body[data-tema="imersivo"] .about-image { aspect-ratio: 4 / 3; border: none; outline: 1px solid rgba(183, 149, 83, 0.4); outline-offset: 14px; } /* --------------------------------------------------------- ÁREAS DE ATUAÇÃO — faixa clara, cards com foto e legenda sobreposta (a foto escurece e o dourado aparece no hover) --------------------------------------------------------- */ body[data-tema="imersivo"] .services-section { background: var(--ivory); padding: 110px 32px; } body[data-tema="imersivo"] .services-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; } body[data-tema="imersivo"] .service-card { position: relative; border: none; background: var(--navy-deep); overflow: hidden; } body[data-tema="imersivo"] .service-card-image { aspect-ratio: 3 / 4; transition: transform 0.5s ease, opacity 0.3s ease; opacity: 0.55; } body[data-tema="imersivo"] .service-card:hover .service-card-image { transform: scale(1.06); opacity: 0.42; } body[data-tema="imersivo"] .service-card-title { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 26px 22px; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--white); background: linear-gradient(transparent, rgba(6, 21, 43, 0.9)); } body[data-tema="imersivo"] .service-card:hover .service-card-title { color: var(--gold-light); } /* --------------------------------------------------------- FAIXA DA BALANÇA — fecha a página antes do rodapé --------------------------------------------------------- */ /* A faixa ocupa a tela inteira. Como a foto fica presa à tela (background-attachment: fixed) e é dimensionada por ela, uma faixa de 100vh mostra a imagem inteira, sem cortar as laterais nem o teto da sala — era isso que estava "fechado". */ body[data-tema="imersivo"] .parallax-band { height: 100vh; min-height: 620px; } /* Camada escura por cima, para aproximar do tom do site original, que é bem mais fechado que a foto crua */ body[data-tema="imersivo"] .parallax-band-bg::after { content: ""; position: absolute; inset: 0; background: rgba(4, 14, 30, 0.42); } /* --------------------------------------------------------- RODAPÉ — claro, como no site atual. Já tentamos o rodapé escuro, mas ele encostava na faixa da balança (que também é navy) e as duas viravam um bloco escuro só. O rodapé claro corta essa sequência e deixa o logo com o "A" dourado aparecer, que é o certo para essa área. --------------------------------------------------------- */ body[data-tema="imersivo"] .site-footer { border-top: 1px solid rgba(183, 149, 83, 0.35); } /* --- Ícones nos fundos claros ------------------------------ Símbolo em navy (o dourado ficava claro demais parado) e, no hover, o círculo inteiro se preenche de dourado. No cabeçalho seguem claros, porque lá o fundo é navy. ----------------------------------------------------------- */ body[data-tema="imersivo"] .footer-social .social-icon, body[data-tema="imersivo"] .contact-social .social-icon, body[data-tema="imersivo"] .team-member-mail, body[data-tema="imersivo"] .team-partner-social .social-icon { color: var(--navy); border-color: rgba(11, 30, 61, 0.3); } body[data-tema="imersivo"] .footer-social .social-icon:hover, body[data-tema="imersivo"] .contact-social .social-icon:hover, body[data-tema="imersivo"] .team-member-mail:hover, body[data-tema="imersivo"] .team-partner-social .social-icon:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); } /* --- Botão de voltar ao topo ------------------------------- Nasce escondido e aparece quando a pessoa já desceu um pouco. ----------------------------------------------------------- */ .voltar-topo { position: fixed; right: 28px; bottom: 28px; z-index: 150; width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid rgba(183, 149, 83, 0.6); border-radius: 50%; background: rgba(6, 21, 43, 0.85); color: var(--gold-light); cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s, background 0.25s ease, color 0.25s ease; } .voltar-topo.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .voltar-topo:hover { background: var(--gold); color: var(--navy-deep); } .voltar-topo svg { width: 20px; height: 20px; } @media (max-width: 700px) { .voltar-topo { right: 16px; bottom: 16px; } } /* ========================================================= PÁGINAS INTERNAS Mesma lógica da home: seções escuras e claras se alternando. Escuras: banner, texto de apresentação da área, CTA final e a faixa da balança. Claras: grades de cards, equipe, contato, publicações, currículo e rodapé. ========================================================= */ /* --- Banner do topo (áreas e páginas simples) --------------- */ /* O menu fica por cima do banner e some ao rolar, revelando o resto da foto — por isso o título desce um pouco. */ /* Banner cobrindo a tela toda, como o hero da home */ body[data-tema="imersivo"] .service-hero, body[data-tema="imersivo"] .page-hero, body[data-tema="imersivo"] .cv-hero { height: 100vh; min-height: 620px; } /* Setinha indicando que há mais conteúdo abaixo do banner. O script.js coloca uma em cada banner de topo. */ .hero-seta-banner { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); z-index: 2; color: rgba(255, 255, 255, 0.65); animation: hero-pulo 2.4s ease-in-out infinite; } .hero-seta-banner svg { width: 26px; height: 26px; } /* Camada escura mais forte sobre a foto do banner: o degradê do style.css sozinho deixava a imagem clara demais perto do resto */ body[data-tema="imersivo"] .service-hero::after, body[data-tema="imersivo"] .page-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.45) 0%, rgba(6, 21, 43, 0.82) 100%); } /* Título centralizado e branco (o dourado ficou lavado sobre a foto) */ body[data-tema="imersivo"] .service-hero, body[data-tema="imersivo"] .page-hero { align-items: center; justify-content: center; } body[data-tema="imersivo"] .service-hero-title, body[data-tema="imersivo"] .page-hero-title { color: var(--white); text-align: center; font-size: 2.4rem; letter-spacing: 0.12em; padding: 0 32px; text-shadow: 0 2px 24px rgba(4, 14, 30, 0.7); } /* --- Texto de apresentação da área (escuro) ----------------- */ body[data-tema="imersivo"] .service-intro-section { background: var(--navy-deep); padding: 110px 32px; } body[data-tema="imersivo"] .service-intro-section .section-title { color: var(--white); } body[data-tema="imersivo"] .service-intro-text p { color: rgba(255, 255, 255, 0.75); } body[data-tema="imersivo"] .service-intro-text strong { color: var(--gold-light); font-weight: 500; } /* Mesma moldura dourada usada no "Quem Somos" da home */ body[data-tema="imersivo"] .service-intro-image { outline: 1px solid rgba(183, 149, 83, 0.4); outline-offset: 14px; } /* --- Grade de cards da área (clara) ------------------------- */ body[data-tema="imersivo"] .service-cards-section { background: var(--ivory); padding: 96px 32px; } /* Cards de serviço: fundo claro de novo, sem a grade de linhas. Do teste ficou só o hover dourado no ícone, que agradou. */ body[data-tema="imersivo"] .service-card-full { background: var(--white); border: 1px solid #e7e3d9; transition: transform 0.25s ease, border-color 0.25s ease; } body[data-tema="imersivo"] .service-card-full:hover { transform: translateY(-6px); border-color: var(--gold); } body[data-tema="imersivo"] .service-card-full:hover .service-card-icon { background: var(--gold); color: var(--navy-deep); } /* --- Equipe, contato, publicações e currículo (claros) ------ */ /* O currículo fica de fora: ele continua navy (bloco mais abaixo) */ body[data-tema="imersivo"] .team-section, body[data-tema="imersivo"] .contact-section, body[data-tema="imersivo"] .publications-section { background: var(--ivory); } /* --- Contato ----------------------------------------------- Sem nenhum ajuste de tema: a página usa o visual original do style.css (campos com fundo claro, botão navy). As tentativas de bloco navy e de molduras douradas foram descartadas. O único ajuste é o link do telefone herdar a cor do texto. ----------------------------------------------------------- */ body[data-tema="imersivo"] .contact-phone a { color: inherit; } /* ========================================================= TESTE: CURRÍCULO DO WALTER EM NAVY Para voltar ao claro, apague este bloco inteiro. ========================================================= */ body[data-tema="imersivo"] .cv-section { background: var(--navy-deep); } body[data-tema="imersivo"] .cv-name { color: var(--white); } body[data-tema="imersivo"] .cv-role { color: var(--gold-light); } body[data-tema="imersivo"] .cv-line, body[data-tema="imersivo"] .cv-list li { color: rgba(255, 255, 255, 0.75); } body[data-tema="imersivo"] .cv-heading { color: var(--gold-light); border-bottom: 1px solid rgba(183, 149, 83, 0.28); padding-bottom: 10px; } body[data-tema="imersivo"] .cv-list li::before { color: var(--gold); } /* --- Equipe: cards soltos, como nas áreas de atuação -------- Nem tudo branco liso, nem tudo navy: cada pessoa vira um card claro com moldura, separado dos vizinhos por um vão — sem a grade de linhas coladas que fechava o visual. ----------------------------------------------------------- */ body[data-tema="imersivo"] .team-grid { gap: 22px; } body[data-tema="imersivo"] .team-member { background: var(--white); border: 1px solid #e7e3d9; padding: 34px 20px 30px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; transition: transform 0.25s ease, border-color 0.25s ease; } body[data-tema="imersivo"] .team-member:hover { transform: translateY(-6px); border-color: var(--gold); } /* Fio dourado curto separando o nome do cargo */ body[data-tema="imersivo"] .team-member-role::before { content: ""; display: block; width: 26px; height: 1px; background: rgba(183, 149, 83, 0.55); margin: 0 auto 14px; } body[data-tema="imersivo"] .team-member-mail { margin-top: auto; } /* O sócio recebe a mesma moldura, em bloco largo */ body[data-tema="imersivo"] .team-partner { background: var(--white); border: 1px solid #e7e3d9; padding: 52px 32px 44px; margin-bottom: 56px; transition: transform 0.25s ease, border-color 0.25s ease; } body[data-tema="imersivo"] .team-partner:hover { transform: translateY(-6px); border-color: var(--gold); } /* Publicações ainda não tem conteúdo; sem uma altura mínima a página ficaria só banner + rodapé colados */ body[data-tema="imersivo"] .publications-section { min-height: 320px; } /* --- Tela de senha do Trabalhista --------------------------- */ /* O menu é fixo por cima, então a caixa desce para não ficar escondida atrás dele */ body[data-tema="imersivo"] .password-gate { background: var(--navy-deep); padding-top: 104px; } body[data-tema="imersivo"] .password-box { background: rgba(255, 255, 255, 0.04); border-color: rgba(183, 149, 83, 0.4); } body[data-tema="imersivo"] .password-title { color: var(--white); } body[data-tema="imersivo"] .password-field input { background: rgba(255, 255, 255, 0.08); border-bottom-color: rgba(183, 149, 83, 0.5); color: var(--white); } body[data-tema="imersivo"] .password-submit { background: var(--gold); color: var(--navy-deep); } body[data-tema="imersivo"] .password-submit:hover { background: var(--gold-light); } @media (max-width: 860px) { body[data-tema="imersivo"] .about-container { grid-template-columns: 1fr; gap: 44px; } } /* ========================================================= TEMA ESCURO Ligado pelo atributo data-modo="escuro" no . Quem põe esse atributo é o script curto no de cada página (na abertura) e o botão de tema no cabeçalho (quando a pessoa troca). A escolha fica guardada no navegador. A ideia é simples: as seções que são claras no tema normal (marfim e branco) viram navy, e os textos que eram navy ou grafite viram claros. As seções que já são escuras — banners, Quem Somos, faixa da balança — não mudam. Este bloco fica no FIM do arquivo de propósito: como as regras têm o mesmo peso das do tema claro, vence a última. ========================================================= */ html[data-modo="escuro"] body { background: var(--navy-deep); } /* --- Seções que eram claras ------------------------------- */ html[data-modo="escuro"] .services-section, html[data-modo="escuro"] .service-cards-section, html[data-modo="escuro"] .team-section, html[data-modo="escuro"] .contact-section, html[data-modo="escuro"] .publications-section { background: var(--navy-deep); } html[data-modo="escuro"] .site-footer, html[data-modo="escuro"] .cv-footer { background: #06152b; border-top-color: rgba(183, 149, 83, 0.3); } /* --- Cards (eram brancos) --------------------------------- */ html[data-modo="escuro"] .service-card-full, html[data-modo="escuro"] .team-member, html[data-modo="escuro"] .team-partner { background: #0e2140; border-color: rgba(183, 149, 83, 0.25); } html[data-modo="escuro"] .service-card { border-color: rgba(183, 149, 83, 0.25); } /* --- Textos que eram navy ou grafite ---------------------- */ html[data-modo="escuro"] .section-title, html[data-modo="escuro"] .service-card-full h3, html[data-modo="escuro"] .team-member-name, html[data-modo="escuro"] .team-partner-name, html[data-modo="escuro"] .cv-name { color: var(--white); } html[data-modo="escuro"] .team-partner-name { border-bottom-color: rgba(255, 255, 255, 0.45); } html[data-modo="escuro"] .service-card-full p, html[data-modo="escuro"] .team-member-role, html[data-modo="escuro"] .team-partner-role, html[data-modo="escuro"] .contact-intro, html[data-modo="escuro"] .contact-address, html[data-modo="escuro"] .service-cards-subtitle, html[data-modo="escuro"] .footer-line, html[data-modo="escuro"] .footer-copyright, html[data-modo="escuro"] .cv-footer-col p, html[data-modo="escuro"] .cv-footer-copyright { color: rgba(255, 255, 255, 0.72); } html[data-modo="escuro"] .service-card-full p { border-top-color: rgba(255, 255, 255, 0.14); } html[data-modo="escuro"] .contact-phone, html[data-modo="escuro"] .cv-footer-col a { color: var(--gold-light); } /* --- Ícones e botões -------------------------------------- */ html[data-modo="escuro"] .footer-social .social-icon, html[data-modo="escuro"] .contact-social .social-icon, html[data-modo="escuro"] .team-member-mail, html[data-modo="escuro"] .team-partner-social .social-icon { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.3); } html[data-modo="escuro"] .service-card-icon { background: rgba(183, 149, 83, 0.16); color: var(--gold-light); } /* O botão navy sumiria no card escuro; vira contorno dourado */ html[data-modo="escuro"] .service-card-button, html[data-modo="escuro"] .contact-submit { background: transparent; border: 1px solid var(--gold); color: var(--gold-light); } html[data-modo="escuro"] .service-card-button:hover, html[data-modo="escuro"] .contact-submit:hover { background: var(--gold); color: var(--navy-deep); } /* --- Formulário de contato -------------------------------- */ html[data-modo="escuro"] .form-group label { color: rgba(255, 255, 255, 0.72); } html[data-modo="escuro"] .form-group input, html[data-modo="escuro"] .form-group textarea { background: rgba(255, 255, 255, 0.07); border-bottom-color: rgba(255, 255, 255, 0.25); color: var(--white); } html[data-modo="escuro"] .contact-map { background: linear-gradient(160deg, #16294a 0%, #0e1d36 100%); } /* --- Busca ------------------------------------------------- */ html[data-modo="escuro"] .search-overlay { background: rgba(6, 21, 43, 0.97); } html[data-modo="escuro"] .search-close { background: transparent; border-color: rgba(255, 255, 255, 0.3); color: var(--white); } html[data-modo="escuro"] .search-field { border-bottom-color: rgba(255, 255, 255, 0.5); } html[data-modo="escuro"] .search-input, html[data-modo="escuro"] .search-field-icon, html[data-modo="escuro"] .search-clear { color: var(--white); } html[data-modo="escuro"] .search-input::placeholder { color: rgba(255, 255, 255, 0.55); } html[data-modo="escuro"] .search-count, html[data-modo="escuro"] .search-result-origem { color: rgba(255, 255, 255, 0.7); } html[data-modo="escuro"] .search-result-title { color: var(--white); } html[data-modo="escuro"] .search-result-badge { background: var(--gold); color: var(--navy-deep); } /* --- Logomarca do rodapé ---------------------------------- A do rodapé é navy com dourado e sumiria no fundo escuro, então usamos a versão clara do cabeçalho. ----------------------------------------------------------- */ html[data-modo="escuro"] .footer-logo img { content: url("assets/img/logo-header.png"); } /* --- Separadores claros que ficariam invisíveis ------------ */ html[data-modo="escuro"] .team-partner, html[data-modo="escuro"] .about-container { border-bottom-color: rgba(183, 149, 83, 0.25); } /* ========================================================= TEMA CLARO O contrário do escuro: as seções que são navy no tema normal (Quem Somos, apresentação das áreas, currículo, tela de senha) ficam claras. As fotos continuam sendo fotos — o que muda nelas é a força da camada escura por cima, mais abaixo. ========================================================= */ html[data-modo="claro"] body, html[data-modo="claro"] body[data-tema="imersivo"] { background: var(--ivory); } html[data-modo="claro"] .about-section, html[data-modo="claro"] .service-intro-section, html[data-modo="claro"] .cv-section { background: var(--ivory); } html[data-modo="claro"] .about-section .section-title, html[data-modo="claro"] .service-intro-section .section-title, html[data-modo="claro"] .cv-name { color: var(--navy); } html[data-modo="claro"] .about-text p, html[data-modo="claro"] .service-intro-text p, html[data-modo="claro"] .cv-line, html[data-modo="claro"] .cv-list li { color: var(--graphite-soft); } /* No tema normal esses negritos são dourados (leem bem no navy); no claro voltam ao navy, senão sumiriam no fundo bege */ html[data-modo="claro"] .about-text strong, html[data-modo="claro"] .service-intro-text strong { color: var(--navy); font-weight: 600; } html[data-modo="claro"] .cv-heading { color: var(--navy); border-bottom-color: rgba(183, 149, 83, 0.4); } html[data-modo="claro"] .cv-role { color: var(--gold); } /* Tela de senha do Trabalhista */ html[data-modo="claro"] .password-gate { background: var(--white); } html[data-modo="claro"] .password-box { background: transparent; border-color: #d8d5cc; } html[data-modo="claro"] .password-title { color: var(--navy); } html[data-modo="claro"] .password-field input { background: #f0eee8; border-bottom-color: #c9c5ba; color: var(--navy); } html[data-modo="claro"] .password-submit { background: var(--navy); color: var(--white); } html[data-modo="claro"] .password-submit:hover { background: var(--gold); color: var(--navy-deep); } /* ========================================================= FORÇA DA CAMADA ESCURA SOBRE AS FOTOS As fotos são as mesmas nos três modos, então sem isto a página parecia não mudar ao trocar de tema. Agora o filtro acompanha: mais leve no claro, mais fechado no escuro. ========================================================= */ /* --- Tema claro: fotos mais abertas ----------------------- */ html[data-modo="claro"] body[data-tema="imersivo"] .carousel-slide { box-shadow: inset 0 0 0 100vmax rgba(6, 21, 43, 0.34); } html[data-modo="claro"] body[data-tema="imersivo"] .service-hero::after, html[data-modo="claro"] body[data-tema="imersivo"] .page-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.26) 0%, rgba(6, 21, 43, 0.62) 100%); } html[data-modo="claro"] body[data-tema="imersivo"] .parallax-band-bg::after { background: rgba(4, 14, 30, 0.2); } html[data-modo="claro"] .cv-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.26) 0%, rgba(6, 21, 43, 0.6) 100%); } /* O CTA não tem mais foto (virou bloco navy liso), então aqui só sobra um navy um pouco menos fechado no tema claro */ html[data-modo="claro"] .consult-cta-bg { background: #0d2141; } /* --- Tema escuro: fotos mais fechadas --------------------- */ html[data-modo="escuro"] body[data-tema="imersivo"] .carousel-slide { box-shadow: inset 0 0 0 100vmax rgba(6, 21, 43, 0.7); } html[data-modo="escuro"] body[data-tema="imersivo"] .service-hero::after, html[data-modo="escuro"] body[data-tema="imersivo"] .page-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.6) 0%, rgba(6, 21, 43, 0.92) 100%); } html[data-modo="escuro"] body[data-tema="imersivo"] .parallax-band-bg::after { background: rgba(4, 14, 30, 0.58); } html[data-modo="escuro"] .cv-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.6) 0%, rgba(6, 21, 43, 0.9) 100%); } html[data-modo="escuro"] .consult-cta-bg { background: #060f1f; } /* ========================================================= SEPARAÇÕES QUE SOMEM NO TEMA ESCURO No escuro tudo vira navy, e seções vizinhas se fundem numa mancha só. Estes fios e molduras dourados devolvem o limite entre elas — e só existem no tema escuro, para não mexer no visual dos outros dois. ========================================================= */ /* Fio marcando onde uma seção termina e a outra começa */ html[data-modo="escuro"] .services-section, html[data-modo="escuro"] .service-cards-section, html[data-modo="escuro"] .team-section, html[data-modo="escuro"] .contact-section { border-top: 1px solid rgba(183, 149, 83, 0.22); } /* Moldura dourada nos cards de área da home, que no escuro encostavam no fundo (já têm filtro navy por cima da foto) */ html[data-modo="escuro"] body[data-tema="imersivo"] .service-card { border: 1px solid rgba(183, 149, 83, 0.3); } html[data-modo="escuro"] body[data-tema="imersivo"] .service-card:hover { border-color: var(--gold); } /* ========================================================= SEPARAÇÕES NO TEMA CLARO Mesmo problema do escuro, espelhado: no claro tudo vira claro e as seções vizinhas se fundem. Aqui o fio é navy bem fraco, no lugar do dourado. O tema normal não precisa disso: nele as seções já se separam sozinhas, porque alternam navy e claro. ========================================================= */ html[data-modo="claro"] .services-section, html[data-modo="claro"] .service-cards-section, html[data-modo="claro"] .team-section, html[data-modo="claro"] .contact-section, html[data-modo="claro"] .about-section, html[data-modo="claro"] .service-intro-section { border-top: 1px solid rgba(11, 30, 61, 0.12); } /* ========================================================= TESTE: TONS DE CLARO DIFERENTES ENTRE NORMAL E CLARO Nos dois modos as áreas claras usavam exatamente o mesmo bege, então quem estivesse numa dessas áreas trocava de tema e não via diferença nenhuma. Agora o normal usa um bege um pouco mais fechado e o claro um tom quase branco. A diferença aparece em qualquer parte da página, sem depender das fotos. Para voltar atrás, apague este bloco inteiro. ========================================================= */ html[data-modo="normal"] .services-section, html[data-modo="normal"] .service-cards-section, html[data-modo="normal"] .team-section, html[data-modo="normal"] .contact-section, html[data-modo="normal"] .publications-section, html[data-modo="normal"] .site-footer, html[data-modo="normal"] .cv-footer { background: #efece4; } html[data-modo="claro"] .services-section, html[data-modo="claro"] .service-cards-section, html[data-modo="claro"] .team-section, html[data-modo="claro"] .contact-section, html[data-modo="claro"] .publications-section, html[data-modo="claro"] .about-section, html[data-modo="claro"] .service-intro-section, html[data-modo="claro"] .cv-section, html[data-modo="claro"] .site-footer, html[data-modo="claro"] .cv-footer { background: #fdfcfa; } /* Com a seção quase branca, os cards precisam de uma moldura um pouco mais firme para não sumirem dentro dela */ html[data-modo="claro"] .service-card-full, html[data-modo="claro"] .team-member, html[data-modo="claro"] .team-partner { background: var(--white); border-color: #e2ded4; } /* ========================================================= FILTRO DAS FOTOS DOS CARDS DE ÁREA (HOME) Faltava variar junto com o tema: as fotos dos cards têm um véu navy por cima, e ele era igual nos três modos. ========================================================= */ html[data-modo="claro"] body[data-tema="imersivo"] .service-card-image { opacity: 0.74; } html[data-modo="claro"] body[data-tema="imersivo"] .service-card:hover .service-card-image { opacity: 0.6; } html[data-modo="escuro"] body[data-tema="imersivo"] .service-card-image { opacity: 0.4; } html[data-modo="escuro"] body[data-tema="imersivo"] .service-card:hover .service-card-image { opacity: 0.3; } /* A foto ao lado do texto das áreas também acompanha */ html[data-modo="escuro"] .service-intro-image, html[data-modo="escuro"] .about-image { filter: brightness(0.78); } html[data-modo="claro"] .service-intro-image, html[data-modo="claro"] .about-image { filter: brightness(1.08); } /* ========================================================= BUSCA NO TEMA CLARO Faltava: o fundo da busca era o mesmo bege nos temas normal e claro, então quem abrisse a busca não via diferença entre os dois. Agora acompanha o tom quase branco do tema claro. ========================================================= */ html[data-modo="claro"] .search-overlay { background: rgba(253, 252, 250, 0.97); } /* ========================================================= TEXTO JUSTIFICADO O doutor gosta de texto justificado. Vale só nos blocos de texto corrido — em legenda de card, que tem duas linhas, justificar abriria buracos entre as palavras. hyphens ajuda a quebrar palavras longas ("responsabilidade") e evita os vãos grandes que a justificação costuma criar. ========================================================= */ body[data-tema="imersivo"] .about-text p, body[data-tema="imersivo"] .service-intro-text p, body[data-tema="imersivo"] .consult-cta-content p { text-align: justify; hyphens: auto; } /* ========================================================= ALTERNÂNCIA DE CORES NO MODO NORMAL Com a faixa da balança removida, a home terminava com duas áreas claras coladas: "Áreas de Atuação" e o rodapé. O rodapé passa a ser navy, e a sequência volta a alternar: home -> Quem Somos (navy) · Áreas (claro) · rodapé (navy) equipe -> banner (foto) · equipe (claro) · rodapé (navy) contato -> banner (foto) · contato (claro) · rodapé (navy) currículo -> currículo (navy) · rodapé próprio (claro) Nas páginas de área, o bloco "Agende sua Consulta" já é navy e fica encostado no rodapé navy — nesse ponto quem separa os dois é o fio dourado do topo do rodapé. No tema escuro o rodapé já era navy; no claro ele segue claro. ========================================================= */ html[data-modo="normal"] .site-footer { background: #06152b; border-top-color: rgba(183, 149, 83, 0.35); } html[data-modo="normal"] .site-footer .footer-line, html[data-modo="normal"] .site-footer .footer-copyright { color: rgba(255, 255, 255, 0.72); } html[data-modo="normal"] .site-footer .social-icon { color: rgba(255, 255, 255, 0.85); border-color: rgba(255, 255, 255, 0.3); } html[data-modo="normal"] .site-footer .social-icon:hover { background: var(--gold); border-color: var(--gold); color: var(--navy-deep); } /* O currículo é navy, então o rodapé próprio dele fica claro para manter a alternância */ html[data-modo="normal"] .cv-footer { background: var(--ivory); } /* ========================================================= CAMPOS DO FORMULÁRIO NO MODO NORMAL A linha de baixo dos campos era cinza clarinho sobre um fundo quase da mesma cor, então praticamente não aparecia — dava a impressão de que não havia onde escrever. Agora é navy. ========================================================= */ html[data-modo="normal"] .form-group input, html[data-modo="normal"] .form-group textarea { background: rgba(255, 255, 255, 0.7); border-bottom: 2px solid rgba(11, 30, 61, 0.45); } html[data-modo="normal"] .form-group input:focus, html[data-modo="normal"] .form-group textarea:focus { border-bottom-color: var(--gold); background: var(--white); } /* ========================================================= LOGO E ÍCONES DO RODAPÉ Duas versões, uma para cada tipo de fundo: - rodapé escuro (temas normal e escuro) -> logo claro, com o "20 anos", que é o que se lê bem no navy - rodapé claro (tema claro) -> logo com o CBA dourado O do rodapé claro é um pouco maior que o do escuro, e os ícones cresceram junto. ========================================================= */ body[data-tema="imersivo"] .footer-logo { width: 215px; } /* Nos dois temas de rodapé escuro entra o logo claro com 20 anos */ html[data-modo="normal"] .site-footer .footer-logo img, html[data-modo="escuro"] .site-footer .footer-logo img { content: url("assets/img/logo-header.png"); } body[data-tema="imersivo"] .footer-social .social-icon { width: 48px; height: 48px; } body[data-tema="imersivo"] .footer-social .social-icon svg { width: 21px; height: 21px; } /* ========================================================= FILTRO DA FOTO DO QUEM SOMOS Antes usava outra técnica e o tom não batia com o dos cards logo abaixo. Agora é a mesma lógica deles: uma camada navy por cima da foto, na mesma intensidade que os cards usam. Nos cards a foto fica com opacidade 0,55 sobre o navy, o que equivale a um véu navy de 0,45 — e é esse número que está aqui. O mesmo vale para os outros dois temas. ========================================================= */ body[data-tema="imersivo"] .about-image { background-blend-mode: normal; background-color: var(--navy-deep); } body[data-tema="imersivo"] .about-image::after { content: ""; position: absolute; inset: 0; background: rgba(8, 20, 40, 0.45); } html[data-modo="claro"] body[data-tema="imersivo"] .about-image::after { background: rgba(8, 20, 40, 0.26); } html[data-modo="escuro"] body[data-tema="imersivo"] .about-image::after { background: rgba(8, 20, 40, 0.6); } /* ========================================================= "AGENDE SUA CONSULTA" (fim das páginas de área) Duas correções: 1. O bloco era navy nos três temas, então no tema claro ele destoava e o fio dourado acima dele não aparecia. Agora acompanha o tema, como as outras seções. 2. As listas douradas estavam centralizadas no meio da caixa enquanto o texto ao redor era justificado, o que ficava desalinhado. Agora começam na margem esquerda, junto com o texto. ========================================================= */ /* No tema claro o bloco fica claro, como o resto da página */ html[data-modo="claro"] .consult-cta-bg { background: #fdfcfa; border-top: 1px solid rgba(11, 30, 61, 0.12); } html[data-modo="claro"] .consult-cta-content, html[data-modo="claro"] .consult-cta-content p { color: var(--graphite-soft); } html[data-modo="claro"] .consult-cta-content h2 { color: var(--navy); } html[data-modo="claro"] .consult-cta-content strong { color: var(--gold); } html[data-modo="claro"] .consult-cta-list { color: var(--gold); } /* As listas passam a ocupar a linha inteira, começando na esquerda, em vez de flutuarem centralizadas */ body[data-tema="imersivo"] .consult-cta-list { display: flex; align-items: flex-start; margin-left: 0; margin-right: 0; } /* Negrito em dourado, como nas outras seções escuras do site */ body[data-tema="imersivo"] .consult-cta-content strong { color: var(--gold-light); font-weight: 500; } /* O título fica alinhado à esquerda junto com o texto */ body[data-tema="imersivo"] .consult-cta-content { text-align: left; } body[data-tema="imersivo"] .consult-cta-tagline { text-align: left; } /* ========================================================= VERSÃO PARA CELULAR E TABLET Até aqui o site só tinha sido pensado para tela de computador: no celular o menu ficava espremido, a equipe aparecia em 4 colunas e as áreas em 3. Este bloco resolve. Três larguras: 980px -> tablet: as grades caem para 2 colunas 820px -> o menu vira hambúrguer 620px -> celular: tudo em 1 coluna, textos menores Fica no fim do arquivo de propósito, porque precisa vencer as regras de tela grande escritas acima. ========================================================= */ /* ---------- TABLET ---------- */ @media (max-width: 980px) { body[data-tema="imersivo"] .services-grid, body[data-tema="imersivo"] .service-cards-grid, body[data-tema="imersivo"] .team-grid { grid-template-columns: repeat(2, 1fr); } body[data-tema="imersivo"] .about-container, body[data-tema="imersivo"] .service-intro-container { grid-template-columns: 1fr; gap: 44px; } /* A moldura dourada do Quem Somos sai: com a foto ocupando a largura toda, ela encostaria nas bordas da tela */ body[data-tema="imersivo"] .about-image { outline: none; aspect-ratio: 16 / 9; } body[data-tema="imersivo"] .footer-container { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 28px; } body[data-tema="imersivo"] .footer-social { justify-self: center; } } /* ---------- MENU HAMBÚRGUER ---------- */ @media (max-width: 820px) { body[data-tema="imersivo"] .header-container { height: 76px; padding: 0 20px; gap: 12px; } body[data-tema="imersivo"] .brand-link { height: 50px; } body[data-tema="imersivo"] .logo-cba { height: 53px; } body[data-tema="imersivo"] .logo-20anos { height: 80px; } /* O botão hambúrguer aparece */ body[data-tema="imersivo"] .mobile-menu-toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 0 8px; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 50%; background: transparent; cursor: pointer; order: 3; } body[data-tema="imersivo"] .mobile-menu-toggle span { display: block; height: 2px; background: var(--white); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; } /* Aberto, as três barrinhas viram um X */ body[data-tema="imersivo"] .site-header.menu-aberto .mobile-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body[data-tema="imersivo"] .site-header.menu-aberto .mobile-menu-toggle span:nth-child(2) { opacity: 0; } body[data-tema="imersivo"] .site-header.menu-aberto .mobile-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* A lista de links vira um painel que desce do cabeçalho */ body[data-tema="imersivo"] .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; background: rgba(6, 21, 43, 0.98); border-bottom: 1px solid rgba(183, 149, 83, 0.25); padding: 12px 20px 22px; } body[data-tema="imersivo"] .site-header.menu-aberto .main-nav { display: block; } body[data-tema="imersivo"] .nav-list { flex-direction: column; gap: 2px; } body[data-tema="imersivo"] .nav-item a { padding: 14px 8px; font-size: 1.05rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body[data-tema="imersivo"] .nav-item--active a { display: inline-block; padding: 10px 16px; border-bottom: none; } /* No cabeçalho ficam só busca e tema. LinkedIn, Instagram e telefone saem daqui porque já estão no rodapé de toda página */ body[data-tema="imersivo"] .header-extras .social-icon, body[data-tema="imersivo"] .header-extras .header-phone { display: none; } body[data-tema="imersivo"] .header-extras { gap: 10px; order: 2; } } /* ---------- CELULAR ---------- */ @media (max-width: 620px) { body[data-tema="imersivo"] .services-grid, body[data-tema="imersivo"] .service-cards-grid, body[data-tema="imersivo"] .team-grid { grid-template-columns: 1fr; } body[data-tema="imersivo"] .form-row, body[data-tema="imersivo"] .cv-footer-container { grid-template-columns: 1fr; gap: 0; } /* Banners um pouco menores que a tela cheia, para o começo da próxima seção já aparecer e convidar a descer */ body[data-tema="imersivo"] .hero-carousel, body[data-tema="imersivo"] .service-hero, body[data-tema="imersivo"] .page-hero, body[data-tema="imersivo"] .cv-hero { height: 86vh; min-height: 460px; } /* Espaçamento das seções: 110px de folga sobrava numa tela pequena e obrigava a rolar demais */ body[data-tema="imersivo"] .about-section, body[data-tema="imersivo"] .services-section, body[data-tema="imersivo"] .service-intro-section, body[data-tema="imersivo"] .service-cards-section, body[data-tema="imersivo"] .team-section, body[data-tema="imersivo"] .contact-section, body[data-tema="imersivo"] .publications-section, body[data-tema="imersivo"] .cv-section { padding: 64px 20px; } body[data-tema="imersivo"] .consult-cta { padding: 64px 20px; } body[data-tema="imersivo"] .site-footer { padding: 40px 20px; } /* Títulos proporcionais à tela */ body[data-tema="imersivo"] .section-title { font-size: 1.75rem; margin-bottom: 30px; } body[data-tema="imersivo"] .service-hero-title, body[data-tema="imersivo"] .page-hero-title { font-size: 1.5rem; letter-spacing: 0.08em; } body[data-tema="imersivo"] .consult-cta-content h2 { font-size: 1.3rem; } /* Texto justificado abre buracos feios em linha curta */ body[data-tema="imersivo"] .about-text p, body[data-tema="imersivo"] .service-intro-text p, body[data-tema="imersivo"] .consult-cta-content p { text-align: left; } /* Os botões do hero ocupam a largura, ficando fáceis de tocar */ body[data-tema="imersivo"] .hero-botoes { flex-direction: column; width: 100%; max-width: 300px; } body[data-tema="imersivo"] .hero-botao { text-align: center; padding: 16px 24px; } body[data-tema="imersivo"] .team-partner, body[data-tema="imersivo"] .password-box { padding: 36px 22px; } body[data-tema="imersivo"] .password-box { width: 100%; max-width: 400px; } body[data-tema="imersivo"] .footer-logo { width: 180px; } } /* ========================================================= FOTOS FIXAS NO CELULAR O efeito de foto presa à tela (background-attachment: fixed) não funciona no celular: o iPhone simplesmente ignora, e vários navegadores Android mostram a imagem gigante ou cortada. Em telas de toque a foto passa a rolar junto com a página. ========================================================= */ @media (hover: none), (max-width: 820px) { body[data-tema="imersivo"] .service-hero-bg, body[data-tema="imersivo"] .page-hero-bg, body[data-tema="imersivo"] .cv-hero-bg, body[data-tema="imersivo"] .consult-cta-bg, body[data-tema="imersivo"] .parallax-band-bg { background-attachment: scroll; } } /* ========================================================= QUEM SOMOS — POSIÇÃO DO TÍTULO O título saiu de dentro do bloco de texto e virou um item solto da grade. Com isso dá para colocá-lo em lugares diferentes conforme o tamanho da tela: computador -> foto à esquerda, título e texto à direita celular -> título, depois a foto, depois o texto Antes, no celular, a foto aparecia antes de qualquer título e a pessoa via uma imagem solta sem saber do que se tratava. ========================================================= */ body[data-tema="imersivo"] .about-container { grid-template-areas: "foto titulo" "foto texto"; align-items: start; } body[data-tema="imersivo"] .about-image { grid-area: foto; align-self: center; } body[data-tema="imersivo"] .about-container > .section-title { grid-area: titulo; } body[data-tema="imersivo"] .about-text { grid-area: texto; } @media (max-width: 980px) { body[data-tema="imersivo"] .about-container { grid-template-areas: "titulo" "foto" "texto"; gap: 28px; } /* O título encosta na foto logo abaixo; a margem grande era pensada para a coluna do computador */ body[data-tema="imersivo"] .about-container > .section-title { margin-bottom: 0; } } /* ========================================================= TÍTULO DA HOME — "ADVOCACIA EMPRESARIAL" Pedido do doutor: uma linha só, centralizada, com a letra mais encorpada e na mesma família da logomarca (sem serifa). O fio dourado era a borda de baixo do próprio título: saía do tamanho do texto inteiro, ficava grosso e encostava nos botões. Virou um risco curto e centralizado logo abaixo do nome, como era antes, com espaço até os botões. ========================================================= */ body[data-tema="imersivo"] .hero-titulo { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.9rem, 4.6vw, 3.4rem); letter-spacing: 0.04em; text-transform: uppercase; max-width: none; padding-bottom: 0; border-bottom: none; margin-bottom: 42px; } body[data-tema="imersivo"] .hero-titulo::after { content: ""; display: block; width: 64px; height: 1px; background: var(--gold); margin: 30px auto 0; } /* ========================================================= EQUILÍBRIO DOS TRÊS TEMAS NAS FOTOS Na rodada passada eu aliviei tanto o tema escuro que ele ficou MAIS CLARO que o normal — a ordem se inverteu. Aqui os valores voltam a ficar em escada: claro -> véu leve normal -> véu médio (o do desenho original) escuro -> véu mais fechado, mas sem apagar a foto Estas regras vêm depois das antigas de propósito: em CSS, quando duas regras têm a mesma força, vence a que está por último no arquivo. ========================================================= */ html[data-modo="escuro"] body[data-tema="imersivo"] .carousel-slide { box-shadow: inset 0 0 0 100vmax rgba(6, 21, 43, 0.62); } html[data-modo="escuro"] body[data-tema="imersivo"] .service-hero::after, html[data-modo="escuro"] body[data-tema="imersivo"] .page-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.52) 0%, rgba(6, 21, 43, 0.86) 100%); } html[data-modo="escuro"] .cv-hero::after { background: linear-gradient(180deg, rgba(6, 21, 43, 0.52) 0%, rgba(6, 21, 43, 0.85) 100%); } html[data-modo="escuro"] body[data-tema="imersivo"] .about-image::after { background: rgba(8, 20, 40, 0.53); } /* Aqui é o contrário do que parece: a foto fica sobre o navy, então MENOS opacidade = foto mais escura. */ html[data-modo="escuro"] body[data-tema="imersivo"] .service-card-image { opacity: 0.46; } html[data-modo="escuro"] body[data-tema="imersivo"] .service-card:hover .service-card-image { opacity: 0.36; } html[data-modo="escuro"] .service-intro-image, html[data-modo="escuro"] .about-image { filter: brightness(0.88); } /* ========================================================= EQUIPE SEPARADA EM BLOCOS Pedido do doutor: Advogados, Assistentes Jurídicos, Auditoria, Tecnologia da Informação e Consultores. Cada bloco tem um rótulo pequeno em dourado e um fio, e as pessoas continuam na mesma grade de antes — assim os cartões têm o mesmo tamanho em todos os blocos, mesmo nos que têm uma pessoa só. ========================================================= */ body[data-tema="imersivo"] .team-bloco + .team-bloco { margin-top: 64px; } body[data-tema="imersivo"] .team-bloco-titulo { font-family: var(--font-body); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); margin: 0 0 24px; padding-bottom: 12px; border-bottom: 1px solid rgba(183, 149, 83, 0.3); } /* ========================================================= FOTO LATERAL DAS PÁGINAS DE ÁREA — FILTRO AZUL QUE FALTAVA A foto ao lado do texto de cada área (.service-intro-image) nunca recebeu o véu navy: só tinha um ajuste de brilho, então aparecia cinza puro nos três temas, destoando do resto. Agora ela usa o mesmo véu da foto de "O Escritório" na home, com os mesmos valores por tema — as duas ficam iguais. ========================================================= */ body[data-tema="imersivo"] .service-intro-image { position: relative; background-color: var(--navy-deep); } body[data-tema="imersivo"] .service-intro-image::after { content: ""; position: absolute; inset: 0; background: rgba(8, 20, 40, 0.45); } html[data-modo="claro"] body[data-tema="imersivo"] .service-intro-image::after { background: rgba(8, 20, 40, 0.26); } html[data-modo="escuro"] body[data-tema="imersivo"] .service-intro-image::after { background: rgba(8, 20, 40, 0.53); } /* ========================================================= "FALE COM O ESCRITÓRIO" CLARO NO TEMA NORMAL Quando o "Como atuamos" saiu, as páginas de área ficaram só com seções navy em sequência (texto, chamada final, rodapé), e o tema normal quase não se distinguia do escuro. A chamada final vira a faixa clara do meio, e a alternância volta: texto navy -> chamada clara -> rodapé navy. O tom é o mesmo bege das outras faixas claras do tema normal. ========================================================= */ html[data-modo="normal"] .consult-cta-bg { background: #efece4; border-top: none; } html[data-modo="normal"] .consult-cta-content, html[data-modo="normal"] .consult-cta-content p { color: var(--graphite-soft); } html[data-modo="normal"] .consult-cta-content h2 { color: var(--navy); } /* ========================================================= CARTÃO DA EQUIPE SEM BOTÃO DE E-MAIL Os cartões espalhavam o conteúdo de cima a baixo. Sem o botão de e-mail (caso da Rogéria), o cargo ia parar lá no pé do cartão, longe do nome. Agora o conteúdo fica junto no topo, e o botão de e-mail, quando existe, continua empurrado para baixo — então os botões seguem alinhados entre os cartões. ========================================================= */ body[data-tema="imersivo"] .team-member { justify-content: flex-start; }