/* ========================================================================= CorpoPleno — Design System (site público) Modo claro, paleta arco-íris equilibrada, cantos arredondados, sombras suaves, bastante espaço visual, responsivo. ========================================================================= */ :root { /* Paleta conceitual (uso funcional, não decorativo aleatório) */ --cp-pink: #ec4899; /* ofertas */ --cp-pink-light: #fdf2f8; /* fundos */ --cp-orange: #f97316; /* promoções */ --cp-yellow: #eab308; /* atenção */ --cp-green: #22c55e; /* saúde */ --cp-turquoise: #14b8a6; /* tecnologia / IA */ --cp-blue: #3b82f6; /* confiança / cursos */ --cp-purple: #8b5cf6; /* master */ /* Neutros — modo claro */ --cp-bg: #fffdfb; --cp-surface: #ffffff; --cp-surface-soft: #faf7f5; --cp-text: #241c2c; --cp-text-soft: #5c5468; --cp-border: #ece6f0; --cp-radius-sm: 10px; --cp-radius-md: 16px; --cp-radius-lg: 24px; --cp-radius-xl: 32px; --cp-shadow-sm: 0 2px 8px rgba(60, 30, 80, 0.06); --cp-shadow-md: 0 8px 24px rgba(60, 30, 80, 0.10); --cp-shadow-lg: 0 16px 40px rgba(60, 30, 80, 0.14); --cp-shadow-glow: 0 24px 60px rgba(139, 92, 246, 0.16), 0 10px 28px rgba(236, 72, 153, 0.12); /* Gradiente-assinatura CorpoPleno (usado com moderação em CTA principal e realces — não no corpo do texto) */ --cp-gradient-cta: linear-gradient(135deg, var(--cp-pink), var(--cp-purple)); --cp-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --cp-container: 1180px; } @media (prefers-reduced-motion: no-preference) { .cp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .cp-reveal.is-visible { opacity: 1; transform: translateY(0); } } * { box-sizing: border-box; } /* Garante que o atributo HTML `hidden` sempre esconda o elemento, mesmo quando a classe do elemento já define `display` (ex.: .notice, .filter-bar usam display:flex, que teria especificidade maior que o estilo nativo do `hidden` e o deixaria visível por engano). */ [hidden] { display: none !important; } html { scroll-behavior: smooth; /* CP-WEB-001 (2026-09-25): quem realmente controla a rolagem da viewport é o , não o — o overflow-x:hidden isolado no body (only) não bastou para conter a gaveta off-canvas do menu mobile, comprovado por teste real (scrollWidth > clientWidth mesmo com o body já restrito). */ overflow-x: hidden; } body { margin: 0; font-family: var(--cp-font); background: var(--cp-bg); color: var(--cp-text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* CP-WEB-001 (2026-09-25): o menu off-canvas mobile (.main-nav, fora da tela via translateX(100%)) fica fora da largura visível, mas ainda ocupa espaço real no documento — sem isto, o navegador permite rolar horizontalmente até revelar o menu "fechado". Nunca corta conteúdo visível, só impede esse scroll horizontal indevido. */ overflow-x: hidden; } img, svg { max-width: 100%; display: block; } a { color: var(--cp-blue); text-decoration: none; } a:hover { text-decoration: underline; } /* Foco visível para acessibilidade */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 3px solid var(--cp-turquoise); outline-offset: 2px; } .container { max-width: var(--cp-container); margin: 0 auto; padding: 0 20px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--cp-purple); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 1000; } .skip-link:focus { left: 0; } /* ========================================================================= Header / navegação ========================================================================= */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 253, 251, 0.86); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--cp-border); box-shadow: 0 1px 0 rgba(60, 30, 80, 0.02), 0 6px 20px rgba(60, 30, 80, 0.04); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; } .brand { display: flex; align-items: center; gap: 12px; color: var(--cp-text); } /* IMPLEMENTAÇÃO CP-WEB-001 (2026-09-25) — logo oficial recortado (símbolo + "CorpoPleno"), sem o slogan cravado em pixel: o slogan agora é o .brand__tagline ao lado, texto real traduzível pelos 5 idiomas — nunca preso em português dentro da imagem. */ .brand__logo { height: 34px; width: auto; display: block; } .brand__tagline { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cp-text-soft); white-space: nowrap; } @media (max-width: 640px) { .brand__tagline { display: none; } } .main-nav { display: flex; align-items: center; gap: 22px; } .main-nav a { color: var(--cp-text-soft); font-weight: 600; font-size: 0.95rem; } .main-nav a[aria-current="page"] { color: var(--cp-purple); } .main-nav a:hover { color: var(--cp-purple); text-decoration: none; } .header-actions { display: flex; align-items: center; gap: 12px; } .nav-toggle { display: none; background: none; border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); padding: 8px 10px; font-size: 1.2rem; cursor: pointer; } /* Seletor de idioma */ .lang-select-wrap { position: relative; } .lang-select { appearance: none; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: var(--cp-radius-sm); padding: 8px 30px 8px 12px; font-weight: 600; font-size: 0.88rem; cursor: pointer; color: var(--cp-text); } .lang-select-wrap::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cp-text-soft); font-size: 0.75rem; } /* ========================================================================= Botões ========================================================================= */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 0.95rem; border: 2px solid transparent; cursor: pointer; transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease; } .btn:hover { transform: translateY(-3px); text-decoration: none; } .btn:active { transform: translateY(-1px); } .btn-primary { background: var(--cp-gradient-cta); color: #fff; box-shadow: var(--cp-shadow-md); } .btn-primary:hover { box-shadow: var(--cp-shadow-glow); color: #fff; } .btn-secondary { background: var(--cp-surface); color: var(--cp-text); border-color: var(--cp-border); } .btn-secondary:hover { border-color: var(--cp-purple); color: var(--cp-purple); background: var(--cp-pink-light); } .btn-disabled, .btn[aria-disabled="true"] { background: var(--cp-surface-soft); color: var(--cp-text-soft); border-color: var(--cp-border); cursor: not-allowed; box-shadow: none; } .btn-disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; } .btn-block { width: 100%; } /* ========================================================================= Hero ========================================================================= */ .hero { padding: 72px 0 64px; position: relative; overflow: hidden; background: radial-gradient( circle at 15% 20%, rgba(236, 72, 153, 0.14), transparent 42% ), radial-gradient(circle at 85% 0%, rgba(20, 184, 166, 0.16), transparent 48%), radial-gradient(circle at 50% 100%, rgba(139, 92, 246, 0.12), transparent 52%), radial-gradient(circle at 100% 60%, rgba(234, 179, 8, 0.10), transparent 40%), var(--cp-pink-light); } .hero__inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; } /* Variante sem foto (Home, 2026-09-25) — quando o Hero não tem .hero__art, o texto ocupa a largura toda e fica centralizado, em vez de sobrar um espaço vazio à direita. Não afeta .hero__inner em outras páginas (ex.: Sobre, que ainda usa foto ao lado do texto). */ .hero__inner--centered { grid-template-columns: 1fr; justify-items: center; text-align: center; } .hero__inner--centered .hero__text { max-width: 640px; } .hero__inner--centered .hero__cta { justify-content: center; } .hero__inner--centered p.lead { margin-left: auto; margin-right: auto; } .hero__eyebrow { display: inline-block; background: var(--cp-surface); border: 1px solid var(--cp-border); border-radius: 999px; padding: 6px 14px; font-size: 0.8rem; font-weight: 700; color: var(--cp-purple); margin-bottom: 16px; } .hero h1 { font-size: clamp(2.1rem, 4.2vw, 3.2rem); line-height: 1.12; margin: 0 0 10px; } /* Destaque colorido inspirado no logo, só no trecho estratégico do título — nunca no texto inteiro, para preservar hierarquia e leitura. */ .hero__highlight { background: linear-gradient(90deg, var(--cp-pink), var(--cp-orange), var(--cp-turquoise), var(--cp-blue)); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero__slogan { font-weight: 800; font-size: clamp(1.1rem, 2vw, 1.4rem); background: linear-gradient( 90deg, var(--cp-pink), var(--cp-orange), var(--cp-turquoise), var(--cp-blue), var(--cp-purple) ); -webkit-background-clip: text; background-clip: text; color: transparent; margin: 0 0 18px; } .hero p.lead { font-size: 1.08rem; color: var(--cp-text-soft); max-width: 52ch; margin: 0 0 28px; } .hero__cta { display: flex; gap: 14px; flex-wrap: wrap; } .hero__art { position: relative; z-index: 1; } /* CP-WEB-001 (refinamento) —