/* ========================================================================== [01] RESET E VARIÁVEIS GERAIS ========================================================================== */ @font-face { font-family: 'Rostex'; src: url('Rostex-Regular.otf') format('opentype'); font-weight: normal; font-style: normal; font-display: swap; } * { margin: 0; padding: 0; box-sizing: border-box; } :root { --bg-site: #fcfcfc; --bg-card: #ffffff; --text-dark: #111111; --text-muted: #555555; --cyan-accent: #b59970; --transition-smooth: 0.2s ease; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--text-dark); background-color: var(--bg-site); line-height: 1.4; } h1, .section-title { font-family: 'Rostex', -apple-system, BlinkMacSystemFont, sans-serif; color: var(--cyan-accent); /* Injeta a cor #b59970 automaticamente */ } .site-logo { /* Define o tamanho máximo que a logo pode ter em telas grandes */ max-width: 300px; width: 100%; } .site-logo img { /* Faz a imagem ocupar o espaço disponível sem distorcer */ width: 100%; height: auto; display: block; /* Garante uma altura limite para não quebrar o menu */ max-height: 100px; object-fit: contain; } /* ========================================================================== [02] CABEÇALHO (HEADER & NAVEGAÇÃO) ========================================================================== */ .site-header { width: 100%; background-color: var(--bg-card); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); position: fixed; top: 0; left: 0; z-index: 1000; } .header-container { max-width: 1200px; margin: 0 auto; padding: 1.25rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* Logotipo */ .site-logo a { font-size: 1.5rem; font-weight: 700; color: var(--text-dark); text-decoration: none; letter-spacing: -0.5px; white-space: nowrap; } /* Lista Principal do Menu */ .main-nav > ul { display: flex; list-style: none; gap: 2rem; align-items: center; } /* Item Pai que contém o Submenu */ .menu-item-has-children { position: relative; padding: 0.5rem 0; /* Espaço para não perder o foco do mouse ao mover */ } /* Links Principais do Menu */ .main-nav a { text-decoration: none; color: var(--text-muted); font-weight: 500; font-size: 0.95rem; transition: color var(--transition-smooth); white-space: nowrap; } .main-nav a:hover { color: var(--text-dark); } /* Efeito de seta discreta para indicar que há um submenu */ .menu-item-has-children > a::after { content: ' ▾'; font-size: 0.8rem; vertical-align: middle; } /* Caixa do Submenu (Escondida por padrão) */ .sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(10px); background-color: var(--bg-card); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); border: 1px solid #f0f0f0; border-radius: 6px; list-style: none; padding: 0.75rem 0; min-width: 320px; /* Largura para caber os textos longos dos serviços */ display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: opacity var(--transition-smooth), transform var(--transition-smooth), visibility var(--transition-smooth); z-index: 1100; } /* Exibe o submenu ao passar o mouse (Hover) */ .menu-item-has-children:hover .sub-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Itens de dentro do Submenu */ .sub-menu li { width: 100%; } .sub-menu a { display: block; padding: 0.6rem 1.5rem; font-size: 0.9rem; color: var(--text-muted); white-space: normal; /* Permite que o texto quebre linha se a tela for pequena */ transition: background-color var(--transition-smooth), color var(--transition-smooth); } .sub-menu a:hover { background-color: #f8f9fa; color: var(--cyan-accent); /* Destaca o serviço em ciano ao passar o mouse */ } /* ========================================================================== [03] COMPONENTES REUTILIZÁVEIS (BOTÕES BASE) ========================================================================== */ .btn-action { display: inline-block; background-color: var(--text-dark); color: #ffffff; padding: 0.75rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background-color var(--transition-smooth); white-space: nowrap; } .btn-action:hover { background-color: #333333; } /* ========================================================================== [04] SEÇÃO HERO (DESTAQUE TOPO) ========================================================================== */ .hero-section { width: 100%; height: calc(100vh - 75px); min-height: 550px; position: relative; /* Obrigatório para fixar o canvas dentro dele */ overflow: hidden; /* Evita que o canvas transborde o limite da seção */ display: flex; align-items: center; justify-content: center; text-align: center; padding: 0 2rem; background-color: #000000; /* Fundo preto base caso o JS demore a carregar */ } /* Estilização específica do Canvas de fundo */ .hero-section { width: 100%; height: calc(100vh - 75px); min-height: 550px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: flex-start; /* MODIFICADO: Empurra o container de texto para o início (esquerda) */ text-align: left; /* MODIFICADO: Alinha todas as linhas de texto à esquerda */ padding: 0 20%; /* MODIFICADO: Cria uma margem confortável nas laterais para telas grandes */ background-color: #000000; } /* Estilização específica do Canvas de fundo */ #topografia { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; } .hero-container { color: #ffffff; max-width: 1200px; /* MODIFICADO: Reduzido levemente para quebrar as linhas do texto de forma mais elegante à esquerda */ position: relative; z-index: 2; animation: fadeIn 1s ease-out; } .hero-container h1 { font-size: 3.5rem; font-weight: 800; margin-bottom: 1.5rem; line-height: 1.2; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } .hero-container p { font-size: 1.7rem; margin-bottom: 2.5rem; opacity: 0.9; text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); } .btn-hero { display: block; width: fit-content; margin: 0 auto; background-color: #b59970; color: var(--text-dark); padding: 0.75rem 1.5rem; border-radius: 4px; text-decoration: none; font-weight: 600; font-size: 0.95rem; transition: background-color var(--transition-smooth); white-space: nowrap; } .btn-hero:hover { background-color: #e5e5e5; } /* ========================================================================== [05] SEÇÃO DE NOVIDADES (GRID DE QUADROS/CARDS) ========================================================================== */ .latest-section { max-width: 1200px; margin: 6rem auto; padding: 0 2rem; } .section-title { font-size: 2.25rem; font-weight: 500; color: var(--text-dark); margin-bottom: 2.5rem; letter-spacing: -0.5px; text-align: center; } .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } .news-card { background-color: var(--bg-card); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); } .news-card:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); } .card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #111111; } .card-image img { width: 100%; height: 100%; object-fit: cover; } .card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; } .card-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--cyan-accent); letter-spacing: 0.5px; } .card-title { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; } .card-description { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* ========================================================================== SEÇÃO DA PLATAFORMA (LAYOUT EM DUAS COLUNAS - SEM BORDAS) ========================================================================== */ .platform-section { max-width: 1200px; margin: 6rem auto; padding: 0 2rem; } .platform-loading-fallback { text-align: center; padding: 2rem; color: var(--text-muted); } .platform-main-title { font-size: 2.25rem; font-weight: 500; color: var(--text-dark); text-align: center; margin-top: 0; margin-bottom: 4rem; letter-spacing: -0.5px; } /* Alinhamento lado a lado */ .platform-container { display: flex; gap: 4rem; align-items: flex-start; } /* Coluna dos artigos */ .platform-features { flex: 1; display: flex; flex-direction: column; gap: 1.5rem; /* Controla o espaçamento uniforme entre os blocos de artigos */ } /* Itens limpos, sem bordas e sem delimitadores */ .feature-item { padding-left: 1.5rem; border-left: 4px solid transparent; /* Apenas o traço indicador esquerdo permanece */ cursor: pointer; transition: all 0.3s ease; opacity: 0.7; } .feature-item:hover { opacity: 0.9; } /* Estado ativo usando sua cor Cyan Accent */ .feature-item.active { opacity: 1; border-left-color: var(--cyan-accent); } /* Títulos colados com o subtítulo */ .feature-title { font-size: 1.15rem; font-weight: 600; color: var(--text-dark); margin-top: 0; margin-bottom: 0.15rem; /* Distância mínima entre título e descrição */ } .feature-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.35; margin: 0; } /* Coluna da Imagem */ .platform-display { flex: 1.2; } /* Mockup limpo e sem bordas ou fundos extras */ .display-mockup { width: 100%; aspect-ratio: 16 / 10; /* Força orientação horizontal */ overflow: hidden; border-radius: 6px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15); } .display-mockup img { width: 100%; height: 100%; object-fit: cover; display: block; } /* Responsividade */ @media (max-width: 992px) { .platform-container { flex-direction: column; gap: 2rem; } } /* ========================================================================== [07] RODAPÉ (FOOTER) ========================================================================== */ .site-footer { background-color: var(--text-dark); color: #ffffff; padding: 3rem 2rem; text-align: center; font-size: 0.95rem; } .footer-container { max-width: 1200px; margin: 0 auto; opacity: 0.7; } /* ========================================================================== [08] ANIMAÇÕES E RESPONSIVIDADE INTERNA ========================================================================== */ @keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 1024px) { .header-container { gap: 1rem; } .main-nav ul { gap: 1.25rem; } .platform-container { flex-direction: column; gap: 3rem; } .platform-display { width: 100%; } } @media (max-width: 768px) { .header-container { flex-direction: column; gap: 1.25rem; padding: 1rem; } .main-nav ul { flex-direction: column; gap: 0.75rem; text-align: center; } .hero-content h1 { font-size: 2.25rem; } .latest-section, .platform-section { margin: 4rem auto; padding: 0 1rem; } .cards-grid { grid-template-columns: 1fr; gap: 1.25rem; } } /* ========================================================================== [09] ESTILOS EXCLUSIVOS PARA PÁGINAS INTERNAS DE SERVIÇOS ========================================================================== */ /* Banner de Meia Tela (Foto com Opacidade e Título - Alinhado à Esquerda) */ .hero-internal { width: 100%; height: 55vh; min-height: 400px; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: flex-start; /* MODIFICADO: Alinha o bloco interno no início (esquerda) */ text-align: left; /* MODIFICADO: Alinha as linhas de texto para a esquerda */ padding: 0 20%; /* MODIFICADO: Cria uma margem confortável idêntica ao seu Hero principal */ margin-top: 0; } .hero-internal-content { color: #ffffff; width: 100%; max-width: 80%; transform: translateY(40px) !important; } .hero-internal-content h1 { font-size: 3.5rem; font-weight: 900; margin-bottom: 0.1rem; letter-spacing: -0.5px; } .hero-internal-content p { font-size: 1.7rem; opacity: 0.9; } /* Layout das Informações do Serviço (Duas Colunas) */ .service-details-section { max-width: 1200px; margin: 5rem auto 2rem auto; padding: 0 2rem; } .service-details-container { display: flex; gap: 4rem; } .service-overview { flex: 1.4; } .service-benefits { flex: 1; } .internal-section-title { font-size: 1.75rem; font-weight: 600; color: var(--text-dark); margin-bottom: 1.75rem; letter-spacing: -0.5px; } .service-paragraph { font-size: 1.05rem; color: var(--text-muted); line-height: 1.6; margin-bottom: 1.5rem; } /* Lista de Vantagens com o Marcador Ciano Reutilizado */ .benefits-list { display: flex; flex-direction: column; gap: 1.5rem; } .benefit-item { padding-left: 1.25rem; border-left: 3px solid var(--cyan-accent); } .benefit-title { font-size: 1.15rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.25rem; } .benefit-text { font-size: 0.9rem; color: var(--text-muted); line-height: 1.4; } /* Seção de Artigos Relacionados */ .related-articles-section { max-width: 1200px; margin: 5rem auto; padding: 4rem 2rem 0 2rem; border-top: 1px solid #eeeeee; } /* Seção de Perguntas Frequentes (FAQ) */ .faq-section { max-width: 1200px; margin: 5rem auto 7rem auto; padding: 4rem 2rem 0 2rem; border-top: 1px solid #eeeeee; } .faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2.5rem; } .faq-item { display: flex; flex-direction: column; gap: 0.5rem; } .faq-question { font-size: 1.15rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; } .faq-answer { font-size: 0.95rem; color: var(--text-muted); line-height: 1.5; } /* Responsividade Adaptada para as Novas Seções */ @media (max-width: 992px) { .service-details-container { flex-direction: column; gap: 3rem; } .hero-internal-content h1 { font-size: 2.25rem; } } /* Seção de Perguntas Frequentes (FAQ) */ .faq-section { max-width: 1200px; margin: 5rem auto 7rem auto; padding: 4rem 2rem 0 2rem; border-top: 1px solid #eeeeee; } .faq-accordion-group { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } /* O Quadro Individual (Card do FAQ) */ .faq-accordion-item { background-color: var(--bg-card); border: 1px solid var(--border-color, #f0f0f0); border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); overflow: hidden; transition: box-shadow var(--transition-smooth); } .faq-accordion-item:hover { box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); } /* Barra de Título / Pergunta Clicável */ .faq-question { padding: 1.25rem 1.5rem; font-size: 1.1rem; font-weight: 600; color: var(--text-dark); cursor: pointer; list-style: none; /* Remove a seta padrão do navegador */ display: flex; justify-content: space-between; align-items: center; user-select: none; } /* Remove a seta padrão específica para navegadores baseados em Webkit/Safari */ .faq-question::-webkit-details-marker { display: none; } /* Ícone de Mais (+) Dinâmico */ .faq-icon { position: relative; width: 12px; height: 12px; flex-shrink: 0; } .faq-icon::before, .faq-icon::after { content: ''; position: absolute; background-color: var(--text-muted); transition: transform var(--transition-smooth); } /* Linha Horizontal do + */ .faq-icon::before { top: 5px; left: 0; width: 12px; height: 2px; } /* Linha Vertical do + */ .faq-icon::after { top: 0; left: 5px; width: 2px; height: 12px; } /* Estilo do Quadro Quando Aberto */ .faq-accordion-item[open] { border-color: #e5e5e5; } /* Transforma o ícone de Mais (+) em Menos (−) ao abrir */ .faq-accordion-item[open] .faq-icon::after { transform: rotate(90deg); opacity: 0; /* Esconde a linha vertical para sobrar apenas a horizontal */ } .faq-accordion-item[open] .faq-icon::before { background-color: var(--cyan-accent); /* Muda a cor para ciano quando aberto */ } /* Caixa de Conteúdo da Resposta (Revelada) */ .faq-answer { padding: 0 1.5rem 1.5rem 1.5rem; font-size: 0.95rem; color: var(--text-muted); line-height: 1.6; animation: slideDown 0.25s ease-out; /* Efeito suave ao abrir */ } /* Animação de Surgimento da Resposta */ @keyframes slideDown { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================== [10] SEÇÃO DO FEED (GRID DE CARTÕES INDEPENDENTES) ========================================================================== */ .latest-section { max-width: 1200px; margin: 6rem auto; padding: 0 2rem; } .section-title { font-size: 2.25rem; font-weight: 500; color: var(--text-dark); margin-bottom: 2.5rem; letter-spacing: -0.5px; } /* Estrutura padrão em Grid (Usada na Home) */ .cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1.5rem; } /* Card padrão vertical (Usado na Home) */ .news-card { background-color: var(--bg-card); border-radius: 4px; overflow: hidden; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: transform var(--transition-smooth), box-shadow var(--transition-smooth); } .news-card:hover { transform: translateY(-2px); box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08); } .card-image { width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background-color: #111111; } .card-image img { width: 100%; height: 100%; object-fit: cover; } .card-content { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; flex-grow: 1; } .card-tag { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; color: var(--cyan-accent); letter-spacing: 0.5px; } .card-title { font-size: 1.25rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; } .card-description { font-size: 0.85rem; color: var(--text-muted); line-height: 1.5; } /* ========================================================================== ESTILOS EXCLUSIVOS PARA A PÁGINA DE CONTEÚDO (LAYOUT HORIZONTAL) ========================================================================== */ /* Transforma o grid em uma lista vertical de largura total */ .page-conteudo .cards-grid { display: flex; flex-direction: column; gap: 2rem; } /* Alinha a imagem na esquerda e o bloco de texto na direita */ .page-conteudo .news-card { flex-direction: row; align-items: center; width: 100%; min-height: 200px; } /* Trava a imagem na lateral esquerda de forma proporcional */ .page-conteudo .card-image { width: 35%; max-width: 320px; height: 100%; aspect-ratio: 16 / 10; flex-shrink: 0; } /* Dá mais espaçamento para o bloco de texto na lateral direita */ .page-conteudo .card-content { padding: 2rem; gap: 0.5rem; } /* Aumenta o tamanho do título para se adequar ao formato de linha */ .page-conteudo .card-title { font-size: 1.5rem; line-height: 1.2; } /* Melhora a leitura da descrição em linhas mais longas */ .page-conteudo .card-description { font-size: 0.95rem; line-height: 1.6; } /* Ajuste de responsividade para celulares */ @media (max-width: 768px) { .page-conteudo .news-card { flex-direction: column; /* Desfaz a linha e empilha o card verticalmente */ } .page-conteudo .card-image { width: 100%; max-width: 100%; } .page-conteudo .card-content { padding: 1.5rem; } } /* ========================================================================== 11 FORMATAÇÃO DE CONTEÚDO DOS ARTIGOS INTERNOS (.MD) ========================================================================== */ .article-body-wrapper { max-width: 800px; margin: 0 auto 0 0; font-size: 1.1rem; line-height: 1.7; color: #333333; } /* Espaçamento de parágrafos normais */ .article-body-wrapper p { margin-bottom: 1.5rem; } /* Títulos secundários adicionados dentro do artigo usando ## ou ### */ .article-body-wrapper h2, .article-body-wrapper h3 { color: var(--text-dark); margin: 2.5rem 0 1rem 0; font-weight: 700; letter-spacing: -0.5px; line-height: 1.3; } .article-body-wrapper h2 { font-size: 1.75rem; } .article-body-wrapper h3 { font-size: 1.4rem; } /* Listas de marcadores dentro do texto */ .article-body-wrapper ul, .article-body-wrapper ol { margin-bottom: 1.5rem; padding-left: 2rem; } .article-body-wrapper li { margin-bottom: 0.5rem; } /* Ênfases e links internos do texto */ .article-body-wrapper strong { color: var(--text-dark); } .article-body-wrapper a { color: var(--cyan-accent); text-decoration: underline; text-underline-offset: 3px; } .article-body-wrapper a:hover { color: var(--text-dark); } /* ========================================================================== ESTILOS EXCLUSIVOS DA PÁGINA QUEM SOMOS ========================================================================== */ /* Área do Manifesto logo abaixo do Banner */ .about-manifesto-container { width: 100%; background-color: var(--bg-site); display: flex; justify-content: center; align-items: center; padding: 3rem 0rem; } .about-manifesto-content { max-width: 850px; width: 100%; } .text-center { text-align: center; } .about-manifesto-content h2 { font-size: 1.75rem; margin-bottom: 0.5rem; /* Defina aqui a distância exata que você quer */ } .about-manifesto-text { text-align: center; font-size: 1.15rem; color: var(--text-muted); line-height: 1.6; margin-top: 0rem;; } /* Wrapper Estrutural do Conteúdo Interno Centralizado */ .about-content-wrapper { max-width: 1200px; margin: 0 auto; padding: 0 2rem; } .about-content-wrapper .section-title { font-size: 1.75rem !important; margin-bottom: 0.5rem; } /* Seção 2: Divisão ao meio (Profissionais e Normas) */ .credentials-section { margin: 6rem 0; } .credentials-container { display: flex; gap: 4rem; } .credentials-block { flex: 1; min-width: 0; } /* Linha vertical divisória amarela exata */ .divider-line { border-right: 2px solid #b59970; padding-right: 4rem; } /* Grid de 3 colunas para logomarcas */ .logo-grid-three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .logo-item { aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; padding: 1rem; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02); } .logo-item img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Seção 3 e 4: Bloco com Fundo Amarelo Sólido #b59970 */ .bg-alt-yellow { background-color: #b59970; width: 100%; padding: 6rem 0; margin-bottom: 4rem; } .bg-alt-yellow .section-title { color: #111111 !important; } .bg-alt-yellow .cve-description { color: #222222; } .bg-alt-yellow .cve-badge-item { background-color: #ffffff; border-right: 4px solid #111111; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); } .bg-alt-yellow .cve-code { color: #b59970; } .partners-cve-container { display: flex; flex-direction: column; gap: 4rem; } .clients-block { width: 100%; } .clients-logos-flex { display: flex; gap: 2rem; flex-wrap: wrap; } .client-logo-wrapper { height: 50px; display: flex; align-items: center; } .client-logo-wrapper img { height: 100%; width: auto; object-fit: contain; } /* Alinhamento forçado do Bloco CVE para a Extrema Direita */ .cve-block-right { align-self: flex-end; width: 50%; text-align: right; } .cve-badge-item { background-color: var(--bg-card); border-right: 3px solid var(--cyan-accent); padding: 1.25rem; margin-bottom: 1rem; display: inline-block; text-align: right; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03); border-radius: 4px 0 0 4px; max-width: 450px; } .cve-code { font-weight: 700; color: var(--cyan-accent); font-size: 1.05rem; display: block; margin-bottom: 0.25rem; } .cve-description { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } /* Seção 5: Grid de 4 colunas */ .xot-services-section { margin-top: 0rem; padding-top: 0rem !important; padding: 3rem 0; } .xot-services-header { text-align: center; max-width: 900px; margin: 0 auto 3rem auto; } .xot-services-header .section-title { font-size: 2.25rem !important; margin-bottom: 2rem; } .xot-subtitle { font-size: 1.05rem; color: var(--text-muted); line-height: 1.5; } .xot-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .xot-card { display: flex; flex-direction: column; } .xot-image-wrapper { width: 100%; aspect-ratio: 16 / 10; overflow: hidden; margin-bottom: 1.25rem; background-color: #e0e0e0; } .xot-card img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(100%); transition: filter var(--transition-smooth); } .xot-card:hover img { filter: grayscale(0%); } .xot-card h3 { font-size: 1.3rem; font-weight: 600; color: var(--text-dark); margin-bottom: 0.5rem; } .xot-card p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; } /* Responsividade móvel */ @media (max-width: 992px) { .about-hero-section { height: auto; } .xot-services-grid { grid-template-columns: repeat(2, 1fr); } .credentials-container { flex-direction: column; gap: 3rem; } .divider-line { border-right: none; padding-right: 0; border-bottom: 2px solid #b59970; padding-bottom: 3rem; } } @media (max-width: 576px) { .xot-services-grid { grid-template-columns: 1fr; } .cve-block-right { width: 100%; text-align: left; } .cve-badge-item { text-align: left; border-right: none; border-left: 3px solid var(--cyan-accent); border-radius: 0 4px 4px 0; } .logo-grid-three { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================== Index sessão 2 artigos ========================================================================== */ .platform-grid-container { display: grid; grid-template-columns: 1fr 1.2fr; gap: 4rem; align-items: center; max-width: 1200px; margin: 0 auto; padding: 4rem 2rem; } .feature-item-link { text-decoration: none; display: block; margin-bottom: 0; /* Zerado para a linha colar perfeitamente */ padding-bottom: 0.4rem; /* Espaço interno entre o texto e a linha */ padding-top: 0.4rem; /* Espaço interno superior para equilibrar */ border-bottom: 1px solid var(--border-color, #e5e7eb); /* Linha delimitadora cinza clara */ } /* Remove a linha delimitadora do último item da lista automaticamente */ .feature-item-link:last-of-type { border-bottom: none; padding-bottom: 0; } /* Mantém o topo do primeiro item limpo */ .feature-item-link:first-of-type { padding-top: 0; } .feature-title-block { display: flex; align-items: center; gap: 6px; } .feature-indicator { width: 4px; height: 1.5rem; background-color: transparent; display: inline-block; transition: background-color 0.2s ease; } .feature-title { font-size: 1.1rem; font-weight: 500; color: var(--text-dark, #111827); margin: 0; transition: color 0.2s ease; white-space: nowrap; /* Força o texto a ficar em uma única linha */ overflow: hidden; /* Esconde o texto que passar do limite */ text-overflow: ellipsis; } .feature-description { font-size: 0.9rem; line-height: 1.6; color: var(--text-muted, #4b5563); margin-top: 0.15rem; padding-left: 16px; } /* Estado Ativo: Ativado via JavaScript no Hover do mouse */ .feature-item-link.active .feature-indicator { background-color: #b59970; } .feature-item-link.active .feature-title { color: #b59970; } .dashboard-preview-wrapper { width: 100%; border-radius: 4px; overflow: hidden; } .dashboard-screenshot { width: 100%; height: auto; display: block; transition: opacity 0.2s ease-in-out; } .load-more-text-btn { background: none; border: none; color: #b59970; font-weight: 500; font-size: 1rem; cursor: pointer; padding: 0.5rem 0; margin-left: 16px; text-decoration: underline; } @media (max-width: 992px) { .platform-grid-container { grid-template-columns: 1fr; gap: 3rem; } } /* ========================================================================== suporte a .md ========================================================================== */ /* Estilo para os Quadros de Código (```) */ .quadro-codigo { background-color: #0f141c; /* Fundo escuro */ border-left: 4px solid var(--cyan-accent, #00ffff); /* Detalhe lateral */ padding: 1rem; margin: 1.5rem 0; border-radius: 4px; overflow-x: auto; /* Cria barra de rolagem horizontal se o código for muito longo */ } .quadro-codigo code { font-family: 'Courier New', Courier, monospace; color: #e0e0e0; font-size: 0.95rem; white-space: pre-wrap; /* Mantém as quebras de linha corretas */ } /* Container responsivo para a tabela não quebrar no celular */ .article-body-wrapper { overflow-x: auto; } /* Estilização Geral da Tabela */ .markdown-table { width: 100%; border-collapse: collapse; margin: 2rem 0; font-size: 1rem; background-color: rgba(255, 255, 255, 0.02); border-radius: 4px; overflow: hidden; } /* Linha do Cabeçalho */ .markdown-table th { background-color: #111622; /* Fundo ligeiramente mais escuro que o quadro */ color: var(--cyan-accent, #00ffff); /* Cor de destaque para os títulos */ font-weight: 600; padding: 12px 16px; text-align: left; border-bottom: 2px solid #222d3f; } /* Células de Dados */ .markdown-table td { padding: 12px 16px; color: #e0e0e0; border-bottom: 1px solid #1a2333; } /* Efeito Zebrado (Linhas alternadas com fundo diferente) */ .markdown-table tbody tr:nth-child(even) { background-color: rgba(255, 255, 255, 0.04); } /* Efeito de destaque ao passar o mouse na linha */ .markdown-table tbody tr:hover { background-color: rgba(0, 255, 255, 0.03); } /* ========================================================================== responsividade ========================================================================== */ /* Esconde o botão injetado por padrão no computador */ .header-container::before { display: none; } @media screen and (max-width: 768px) { /* 1. TRAVA MÁXIMA CONTRA CORTES NA TELA (Zera o vazamento do site inteiro) */ html, body { width: 100% !important; max-width: 100% !important; overflow-x: hidden !important; /* Passa a tesoura em qualquer coisa que tente vazar na direita */ margin: 0 !important; padding: 0 !important; } /* Força todas as caixas a calcularem o tamanho de forma interna */ *, *::before, *::after { box-sizing: border-box !important; } /* 2. LIMITADOR DO CABEÇALHO */ .site-header { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; max-width: 100% !important; right: 0 !important; z-index: 1000 !important; } /* 3. ALINHAMENTO DO CONTAINER (Espelhamento perfeito: Colunas das pontas iguais centralizam o meio) */ .header-container { display: grid !important; grid-template-columns: minmax(75px, 105px) 1fr minmax(75px, 105px) !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0.6rem 0.75rem !important; /* Padding seguro para não esmagar as bordas */ gap: 0.25rem !important; } /* 4. ESQUERDA: O ÍCONE DO MENU (Criado via CSS) */ .header-container::before { display: flex !important; content: "☰" !important; font-size: 1.6rem !important; color: var(--text-dark, #333) !important; cursor: pointer !important; grid-column: 1 !important; justify-self: start !important; z-index: 1200 !important; } /* 5. CENTRO: A LOGO PERFEITAMENTE CENTRALIZADA */ .site-logo { grid-column: 2 !important; justify-self: center !important; /* Força o alinhamento no centro absoluto da tela */ text-align: center !important; margin: 0 !important; padding: 0 0.25rem !important; max-width: 100% !important; } .site-logo a { font-size: clamp(0.95rem, 3.5vw, 1.15rem) !important; /* Letra diminui automaticamente se faltar espaço */ white-space: nowrap !important; display: inline-block !important; } /* 6. DIREITA: O CONTATO RESPONSIVO (Ajustado para tamanho ideal, sem sumir ou quebrar) */ .header-container > *:last-child, .header-container > *:nth-child(3), .header-container > *:nth-child(3) a, .header-container [class*="contato"] { grid-column: 3 !important; justify-self: end !important; width: auto !important; /* Deixa o botão respirar no espaço delimitado */ max-width: 100% !important; text-align: center !important; white-space: nowrap !important; /* Valores calculados para o botão ficar elegante (nem gigante, nem minúsculo) */ font-size: clamp(0.8rem, 3vw, 0.95rem) !important; padding: 0.45rem 0.75rem !important; /* Tamanho da caixa preta proporcional à tela */ } .header-container.aberto .main-nav { transform: translateX(0) !important; } /* 7. MENU EM TELA CHEIA */ .main-nav { position: fixed; /* Ajuste o 'top' com a altura exata do seu header (ex: 60px, 80px ou var) */ top: 70px; left: 0; width: 100%; /* Ocupa o restante da tela descontando a altura do header */ height: calc(100vh - 70px); background-color: var(--bg-card, #ffffff); z-index: 1100; display: flex; justify-content: center; align-items: center; /* Estado escondido: começa recolhido para cima */ transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform 0.4s ease-in-out, opacity 0.3s ease-in-out; } /* Classe ativada pelo JavaScript para abrir o menu */ .header-container.aberto .main-nav { transform: translateY(0); opacity: 1; pointer-events: auto; } /* Organização interna dos links */ .main-nav > ul { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; padding: 2rem 1rem; margin: 0; width: 100%; max-height: 85vh; overflow-y: auto; } .main-nav a { font-size: 1.3rem; color: var(--text-dark, #333); display: block; } /* Submenu de serviços vertical */ .sub-menu { position: static; transform: none; opacity: 1; visibility: visible; box-shadow: none; border: none; background: transparent; min-width: auto; padding: 0.5rem 0 0 0; display: flex; flex-direction: column; gap: 0.6rem; } .sub-menu a { font-size: 0.95rem; color: var(--text-muted, #666); white-space: normal; } .menu-item-has-children > a::after { content: ''; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO HERO (MOBILE - LIBERAÇÃO DO CONTAINER EMBRULHADOR) ========================================================================== */ /* 1. Removemos a trava do container que está esmagando o Hero por fora */ .about-content-wrapper { height: auto !important; min-height: calc(100vh - 65px) !important; display: block !important; } /* 2. O Hero agora tem espaço livre e ganha as travas absolutas de tela cheia */ .hero-section { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; text-align: left !important; position: relative !important; width: 100% !important; /* Ocupa a primeira tela cheia física cravado no visor */ height: calc(100vh - 65px) !important; min-height: calc(100vh - 65px) !important; max-height: calc(100vh - 65px) !important; padding: 1.5rem !important; margin: 0 0 2rem 0 !important; /* Adiciona uma margem na base para separar da seção branca */ box-sizing: border-box !important; background-color: #000000 !important; overflow: hidden !important; } /* 3. Obriga o Canvas a ignorar os cálculos em pixels antigos e preencher o novo espaço */ #topografia { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; z-index: 1 !important; pointer-events: none !important; } .hero-container { width: 100% !important; max-width: 100% !important; position: relative !important; z-index: 2 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: center !important; margin: auto 0 !important; } .hero-container h1 { font-size: clamp(1.4rem, 6.5vw, 1.95rem) !important; /* Tamanho seguro para caber em 3 linhas sem empurrar a tela */ line-height: 1.2 !important; margin-top: 0 !important; margin-bottom: 0.75rem !important; } .hero-container p { font-size: clamp(0.9rem, 3.8vw, 1.05rem) !important; line-height: 1.4 !important; margin-bottom: 1.5rem !important; } .btn-hero { margin: 0 !important; width: 100% !important; max-width: 250px !important; padding: 0.8rem 1.5rem !important; text-align: center !important; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO DE NOVIDADES (MOBILE - 2 POR LINHA) ========================================================================== */ .latest-section { margin: 2rem auto !important; /* Reduz o espaçamento gigante de 6rem para 3rem */ padding: 0 1.5rem !important; /* Respiro lateral ligeiramente menor para dar mais espaço aos cards */ } .section-title { font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important; margin-bottom: 1rem !important; line-height: 1.3 !important; } .cards-grid { grid-template-columns: repeat(2, 1fr) !important; /* A MÁGICA: Força exatamente 2 colunas por linha */ gap: 0.75rem !important; /* Reduz o espaço entre os cards para que eles não fiquem espremidos */ } .card-content { padding: 0.85rem !important; /* Reduz bem o padding interno para sobrar mais espaço para as letras */ gap: 0.4rem !important; /* Aproxima os textos dentro do card */ } .card-tag { font-size: 0.6rem !important; /* Tag menorzinha */ } .card-title { font-size: 0.95rem !important; /* Diminui o título do card para caber em colunas menores */ line-height: 1.2 !important; } .card-description { font-size: 0.75rem !important; /* Reduz a descrição para o texto fluir melhor no espaço compacto */ line-height: 1.3 !important; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO DA PLATAFORMA (MOBILE - IMAGEM NO TOPO) ========================================================================== */ .platform-section { margin: 3rem auto !important; /* Aproxima a seção da anterior */ padding: 0 1rem !important; /* Mantém as margens laterais padrão */ } .platform-grid-container { display: grid !important; grid-template-columns: 1fr !important; /* Coluna única */ gap: 1.5rem !important; /* Espaçamento menor e controlado entre imagem e títulos */ padding: 1.5rem 0 !important; /* Respiro interno compacto */ } /* A MÁGICA DA INVERSÃO: Força a imagem a subir para o topo */ .platform-visual-column { grid-row: 1 !important; /* Fica na primeira posição */ width: 100% !important; } /* Move a coluna de textos para baixo da imagem */ .platform-text-column { grid-row: 2 !important; /* Fica na segunda posição */ width: 100% !important; } /* Ajustes finos nos itens da lista para caber em telas menores */ .feature-item-link { padding-top: 0.6rem !important; padding-bottom: 0.6rem !important; } .feature-title { font-size: 1rem !important; /* Letra ligeiramente menor para não cortar palavras fundamentais */ white-space: normal !important; /* MODIFICADO: Permite quebra de linha se o título for longo no celular */ overflow: visible !important; text-overflow: clip !important; } .feature-description { font-size: 0.825rem !important; /* Texto de apoio mais compacto */ line-height: 1.4 !important; padding-left: 10px !important; /* Recuo menor para ganhar área útil */ } .load-more-text-btn { margin-left: 10px !important; font-size: 0.95rem !important; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO DE SERVIÇOS (MOBILE - ZERO BORDAS NAS LATERAIS) ========================================================================= */ .xot-services-section { margin-top: 0rem !important; padding: 1.5rem 0rem !important; /* MUDANÇA: Zerado totalmente o padding lateral da seção */ } .xot-services-header { margin-bottom: 1.5rem !important; padding: 0 0.5rem !important; /* Mantém apenas um triz de espaço para o texto de apoio não raspar na borda física */ } .xot-services-header .section-title { font-size: clamp(1.4rem, 5.5vw, 1.85rem) !important; margin-top: 0 !important; margin-bottom: 0.5rem !important; } .xot-subtitle { font-size: 0.9rem !important; line-height: 1.45 !important; margin-bottom: 0 !important; } .xot-services-grid { grid-template-columns: 1fr !important; gap: 1.75rem !important; } .xot-card { padding: 0 0.5rem !important; /* Aplica um微espaçamento só no conteúdo de texto do card */ } .xot-image-wrapper { margin-bottom: 0.75rem !important; border-radius: 0px !important; /* MUDANÇA: Remove o arredondamento para a imagem casar com a quina da tela */ } .xot-card h3 { font-size: 1.15rem !important; margin-top: 0 !important; margin-bottom: 0.4rem !important; } .xot-card p { font-size: 0.875rem !important; line-height: 1.45 !important; margin-bottom: 0 !important; } /* ========================================================================== FORÇAR ENCOLHIMENTO DE TODOS OS TÍTULOS (DIRETO NO MOBILE) ========================================================================== */ h1, .hero-container h1 { font-size: clamp(1.8rem, 7vw, 2.5rem) !important; /* Força o H1 a encolher no celular */ line-height: 1.2 !important; } .section-title, .xot-services-header .section-title, .platform-main-title { font-size: clamp(1.35rem, 5.5vw, 1.75rem) !important; /* Força todos os títulos de seção a encolherem */ line-height: 1.3 !important; } h3, .xot-card h3, .card-title { font-size: clamp(1rem, 4vw, 1.2rem) !important; /* Força os títulos menores dos cards a encolherem */ } /* ========================================================================== ADAPTAÇÃO DA PÁGINA QUEM SOMOS (MOBILE) ========================================================================== */ /* ========================================================================== [QUEM SOMOS] ADAPTAÇÃO EXCLUSIVA CONTRA COLISÕES E VAZAMENTOS ========================================================================== */ /* 1. CORREÇÃO DO BANNER DA TORRE: Libera a altura para o texto respirar e empurrar o layout */ .hero-internal { height: auto !important; min-height: 320px !important; padding: 4rem 1rem 3rem 1rem !important; display: flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; } .hero-internal-content { width: 100% !important; max-width: 100% !important; text-align: center !important; } .hero-internal-content h1 { font-size: clamp(1.8rem, 6vw, 2.2rem) !important; line-height: 1.2 !important; margin-bottom: 0.75rem !important; margin-top: 0 !important; } .hero-internal-content p { font-size: clamp(0.95rem, 4vw, 1.1rem) !important; line-height: 1.4 !important; margin-bottom: 0 !important; } /* 2. ÁREA DO TEXTO DO MANIFESTO */ .about-manifesto-container { padding: 2rem 0.5rem !important; width: 100% !important; box-sizing: border-box !important; } .about-manifesto-content { padding: 0 0.5rem !important; width: 100% !important; box-sizing: border-box !important; } .about-manifesto-text { font-size: 0.95rem !important; line-height: 1.5 !important; text-align: center !important; margin: 0 !important; } /* 3. WRAPPER ESTRUTURAL (Destrava e impede rolagem lateral) */ .about-content-wrapper { height: auto !important; min-height: auto !important; display: block !important; width: 100% !important; padding: 0 0.75rem !important; box-sizing: border-box !important; overflow-x: hidden !important; } .about-content-wrapper .section-title { font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important; line-height: 1.3 !important; margin-bottom: 1rem !important; } /* 4. SEÇÃO 2: TIME ESPECIALIZADO E NORMAS (FIM DO VAZAMENTO DO GRID) */ .credentials-section { margin: 2.5rem 0 !important; width: 100% !important; box-sizing: border-box !important; } .credentials-container { display: flex !important; flex-direction: column !important; /* Empilha os blocos na vertical */ gap: 2.5rem !important; width: 100% !important; box-sizing: border-box !important; } .credentials-block { width: 100% !important; box-sizing: border-box !important; } /* Remove a linha vertical que quebrava o grid e joga para baixo */ .divider-line { border-right: none !important; padding-right: 0 !important; border-bottom: 2px solid #b59970 !important; padding-bottom: 2.5rem !important; } /* ========================================================================== AJUSTE FINO: LOGOS REDUZIDAS E ELEGANTES (MOBILE) ========================================================================== */ .logo-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 0.5rem !important; /* Mantém os cartões próximos */ width: 100% !important; } .logo-item { padding: 0.6rem !important; /* Espaço interno para o logo respirar */ aspect-ratio: auto !important; /* Desfaz o quadrado bruto do desktop */ height: 60px !important; /* Define uma altura máxima compacta fixa para todas */ max-width: 130px !important; /* Impede a logo de esticar demais nas laterais */ justify-self: center !important; /* Centraliza a logo dentro da sua respectiva coluna */ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.02) !important; } .logo-item img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; /* Garante que a imagem diminua sem distorcer */ } /* 5. SEÇÕES 3 & 4: CONTAINER AMARELO E REORGANIZAÇÃO DAS CVEs */ .bg-alt-yellow { padding: 2.5rem 0.5rem !important; margin-bottom: 2rem !important; width: 100% !important; box-sizing: border-box !important; } .partners-cve-container { gap: 2rem !important; width: 100% !important; box-sizing: border-box !important; } .clients-logos-flex { gap: 1rem !important; justify-content: center !important; } /* Centraliza e expande o bloco CVE na largura correta da tela */ .cve-block-right { align-self: center !important; width: 100% !important; text-align: center !important; box-sizing: border-box !important; } .cve-badge-item { display: block !important; width: 100% !important; max-width: 100% !important; text-align: left !important; padding: 1rem !important; margin-bottom: 0.75rem !important; box-sizing: border-box !important; /* Ajuste do indicador de cor para a esquerda no mobile */ border-right: none !important; border-left: 3px solid var(--cyan-accent, #b59970) !important; border-radius: 0 4px 4px 0 !important; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO DE DETALHES DO SERVIÇO (MOBILE) ========================================================================== */ .service-details-section { margin: 3rem auto 1.5rem auto !important; /* Reduz a margem superior de 5rem */ padding: 0 1rem !important; /* Espaçamento seguro contra as quinas da tela */ width: 100% !important; box-sizing: border-box !important; } .service-details-container { flex-direction: column !important; /* Empilha as colunas verticalmente */ gap: 2rem !important; /* Reduz o espaço bruto entre os blocos */ width: 100% !important; } .service-overview, .service-benefits { width: 100% !important; text-align: left !important; /* Centraliza o texto para combinar com o manifesto */ } .internal-section-title { font-size: clamp(1.35rem, 5.5vw, 1.65rem) !important; /* Escala fluida para o título interno */ margin-bottom: 1.25rem !important; line-height: 1.3 !important; } .service-paragraph { font-size: 0.95rem !important; /* Fonte confortável no mobile */ line-height: 1.5 !important; margin-bottom: 1.25rem !important; } /* CORREÇÃO DO BOTÃO: Remove o alinhamento à direita e centraliza na tela */ .service-overview div[style*="display: flex"] { display: flex !important; justify-content: center !important; /* Força o botão a ir para o centro absoluto */ width: 100% !important; margin-top: 1.5rem !important; } .service-overview .btn-hero { margin: 0 auto !important; width: 100% !important; max-width: 260px !important; /* Garante que o botão fique discreto e no tamanho certo */ text-align: center !important; } /* ========================================================================== ADAPTAÇÃO DA SEÇÃO DE PERGUNTAS FREQUENTES (FAQ MOBILE) ========================================================================== */ .faq-section { margin: 2.5rem auto 3.5rem auto !important; /* Reduz os recuos brutos superiores e inferiores */ padding: 2rem 0.5rem 0 0.5rem !important; /* Bordas enxutas coladas nos cantos da tela */ width: 100% !important; box-sizing: border-box !important; } .faq-accordion-group { width: 100% !important; gap: 0.75rem !important; /* Deixa os blocos ligeiramente mais próximos */ } .faq-accordion-item { width: 100% !important; border-radius: 4px !important; /* Arredondamento suave para combinar com o layout */ } /* Ajuste da barra clicável da pergunta */ .faq-question { padding: 1rem 0.85rem !important; /* Padding menor dá mais área útil para o texto da pergunta */ font-size: 0.95rem !important; /* Encolhe sutilmente a letra de 1.1rem para caber na tela */ line-height: 1.4 !important; gap: 0.75rem !important; /* Evita que o fim da frase cole ou passe por cima do ícone + */ } .faq-question span:first-of-type { text-align: left !important; /* Garante que perguntas longas fiquem alinhadas à esquerda corretamente */ } /* Caixa de texto revelada da resposta */ .faq-answer { padding: 0 0.85rem 1rem 0.85rem !important; /* Acompanha o padding menor da pergunta */ font-size: 0.85rem !important; /* Resposta levemente menor para manter hierarquia visual */ line-height: 1.5 !important; } /* Ajuste fino no ícone de mais/menos para não quebrar alinhamento */ .faq-icon { margin-top: 2px !important; /* Centraliza milimetricamente com a primeira linha de texto */ } /* ========================================================================== ADAPTAÇÃO DO BANNER INTERNO (TÍTULO GRANDE SEM QUEBRA DE PALAVRA) ========================================================================== */ .hero-internal { height: auto !important; min-height: 360px !important; padding: 5.5rem 0.5rem 2.5rem 0.5rem !important; /* Ganha cada pixel das bordas laterais */ justify-content: flex-start !important; text-align: left !important; box-sizing: border-box !important; } .hero-internal-content { width: 100% !important; max-width: 100% !important; transform: translateY(0) !important; } .hero-internal-content h1 { /* EQUILÍBRIO PERFEITO: Fonte grande (até 2.1rem), mas controlada */ font-size: clamp(1.5rem, 6.8vw, 2.1rem) !important; line-height: 1.15 !important; margin-top: 0 !important; margin-bottom: 1rem !important; font-weight: 900 !important; /* A MÁGICA: Aproxima as letras para a palavra caber inteira mesmo sendo grande */ letter-spacing: -1.5px !important; /* TRAVA DE SEGURANÇA: Proíbe terminantemente cortar a palavra ao meio */ white-space: normal !important; word-wrap: normal !important; overflow-wrap: normal !important; word-break: normal !important; } .hero-internal-content p { font-size: clamp(0.9rem, 3.8vw, 1.05rem) !important; line-height: 1.4 !important; margin-bottom: 0 !important; letter-spacing: normal !important; /* Mantém o texto de apoio normal */ } }