/* ========================================================================== Atleta Moderno ยท am-theme.css Sistema visual compartilhado, extraido da pagina de referencia /comeceagora (PH 2026-08-23: o site inteiro passa a usar a identidade do Comece Agora). Carregar SEMPRE antes do CSS especifico da pagina: Fonte da verdade do design: /comeceagora/index.html Reversivel: remover o link do devolve a pagina ao estado anterior. ========================================================================== */ :root { --am-blue: #0e4f9a; --am-dark: #0a1628; --am-darker: #060e1a; --am-light-blue: #1a6fd4; --am-white: #ffffff; --am-gold: #e8b339; /* Texto secundario e BRANCO PURO, nunca cinza (regra do PH, msg 15476). --am-gray fica como alias branco para nao quebrar CSS legado que o usa. */ --am-text2: #ffffff; --am-textsoft: #ffffff; --am-gray: #ffffff; --am-surface: rgba(14, 79, 154, 0.10); --am-border: rgba(14, 79, 154, 0.30); --wa-green: #25d366; /* Pagina escura: avisa o navegador para nao auto-inverter as cores. */ color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } /* Guarda de overflow horizontal: nada de oscilacao lateral no mobile. */ html { width: 100%; max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; } body { width: 100%; max-width: 100%; overflow-x: hidden; overscroll-behavior: none; background: var(--am-darker); color: var(--am-white); font-family: 'Barlow', sans-serif; position: relative; } /* Fundo em duas camadas: brilho azul + textura diagonal fina. */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(14, 79, 154, 0.40) 0%, transparent 70%), radial-gradient(ellipse 60% 40% at 80% 100%, rgba(14, 79, 154, 0.20) 0%, transparent 60%), linear-gradient(180deg, #060e1a 0%, #0a1628 50%, #060e1a 100%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: 0; background-image: repeating-linear-gradient( -55deg, transparent, transparent 40px, rgba(14, 79, 154, 0.04) 40px, rgba(14, 79, 154, 0.04) 41px ); pointer-events: none; z-index: 0; } /* --------------------------------------------------------------- tipografia */ .am-kicker { font-family: 'Barlow Condensed', sans-serif; font-size: 0.78rem; font-weight: 700; letter-spacing: 5px; text-transform: uppercase; color: var(--am-light-blue); margin-bottom: 14px; } .am-blue { color: var(--am-light-blue); } .am-gold { color: var(--am-gold); } /* ------------------------------------------------------------------ botoes */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 1.5px; font-size: 1.05rem; text-decoration: none; cursor: pointer; border: none; border-radius: 8px; padding: 16px 34px; transition: transform 0.2s, box-shadow 0.2s, background 0.2s; -webkit-tap-highlight-color: transparent; } .btn-primary { background: linear-gradient(135deg, var(--am-light-blue), var(--am-blue)); color: #fff; box-shadow: 0 10px 30px rgba(14, 79, 154, 0.45); } .btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(14, 79, 154, 0.6); } .btn-ghost { background: rgba(14, 79, 154, 0.16); color: #ffffff; border: 1.5px solid var(--am-light-blue); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); } .btn-ghost:hover { background: var(--am-surface); border-color: var(--am-gold); transform: translateY(-3px); } .btn-gold { background: linear-gradient(135deg, #f3c75a, var(--am-gold)); color: #2a1d00; box-shadow: 0 10px 30px rgba(232, 179, 57, 0.35); } .btn-gold:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(232, 179, 57, 0.5); } /* ------------------------------------------- etiqueta online / presencial */ .mode-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'Barlow Condensed', sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 2px; font-size: 0.82rem; padding: 7px 16px; border-radius: 999px; margin-bottom: 14px; } .mode-badge.online { color: var(--am-light-blue); background: rgba(26, 111, 212, 0.14); border: 1px solid rgba(26, 111, 212, 0.55); } .mode-badge.presencial { color: var(--am-gold); background: rgba(232, 179, 57, 0.14); border: 1px solid rgba(232, 179, 57, 0.55); } .mode-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; } /* -------------------------------------------------- imagem de fundo da secao Uso:
A camada escura por cima garante leitura do texto em qualquer foto. */ .am-bg { position: relative; overflow: hidden; } .am-bg::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6, 14, 26, 0.90) 0%, rgba(6, 14, 26, 0.78) 50%, rgba(6, 14, 26, 0.94) 100%), var(--am-bg-img) center center / cover no-repeat, #060e1a; } .am-bg > * { position: relative; z-index: 1; } /* ------------------------------------------- hero das paginas SEO locais Envolve o

e o

e recebe a foto do CT como fundo, no mesmo clima do hero do /comeceagora. A foto entra por variavel:

*/ .seo-hero { position: relative; overflow: hidden; border-radius: 14px; border: 1px solid var(--am-border); padding: 40px 30px 34px; margin: 0 0 32px; box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45); } .seo-hero::before { content: ''; position: absolute; inset: 0; z-index: 0; /* scrim calibrado para a foto aparecer com a mesma presenca do hero do /comeceagora, sem tirar a legibilidade do titulo e do texto de apoio */ background: linear-gradient(105deg, rgba(6, 14, 26, 0.92) 0%, rgba(6, 14, 26, 0.80) 46%, rgba(6, 14, 26, 0.52) 78%, rgba(6, 14, 26, 0.66) 100%), linear-gradient(180deg, rgba(6, 14, 26, 0.40) 0%, rgba(6, 14, 26, 0.22) 50%, rgba(6, 14, 26, 0.72) 100%), var(--am-bg-img) center center / cover no-repeat, #060e1a; } /* faixa azul de assinatura, igual a barra do h2 do restante do site */ .seo-hero::after { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; z-index: 1; background: linear-gradient(180deg, var(--am-light-blue), var(--am-blue)); } .seo-hero > * { position: relative; z-index: 2; } .seo-hero h1 { margin-bottom: 14px; text-shadow: 0 2px 26px rgba(0, 0, 0, 0.65); } .seo-hero .lead { margin-bottom: 0; color: var(--am-white); text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6); } @media (max-width: 540px) { .seo-hero { padding: 28px 20px 26px; border-radius: 12px; margin-bottom: 26px; } /* no celular a coluna e estreita: escurece de forma uniforme, senao o titulo cai justo em cima da parte clara da foto */ .seo-hero::before { background: linear-gradient(180deg, rgba(6, 14, 26, 0.88) 0%, rgba(6, 14, 26, 0.74) 50%, rgba(6, 14, 26, 0.90) 100%), var(--am-bg-img) center center / cover no-repeat, #060e1a; } } /* ------------------------------------------------------------------ rodape */ .am-footer-logo { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: 2px; color: var(--am-white); } /* ------------------------------------------------ botao flutuante WhatsApp */ .wa-float { position: fixed; right: 18px; bottom: 18px; z-index: 9999; display: flex; align-items: center; gap: 10px; background: var(--wa-green); color: #fff; text-decoration: none; padding: 14px 18px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 15px; line-height: 1; box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45); transition: transform 0.2s ease, box-shadow 0.2s ease; } .wa-float:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(37, 211, 102, 0.55); } .wa-float svg { width: 24px; height: 24px; flex: none; } .wa-float .wa-label { white-space: nowrap; } @media (max-width: 600px) { .wa-float { padding: 14px; bottom: 16px; right: 16px; } .wa-float .wa-label { display: none; } }