/* Zetta Performance — estilos do site Cores e fontes seguem 12 Marketing/Identidade Visual.md. Gill Sans licenciada para a Zetta (inclusive web): arquivos em assets/fontes/, recortados para o alfabeto latino. O nome "Gill Sans Zetta" evita que o navegador troque pela Gill Sans instalada no computador do visitante. */ @font-face { font-family: "Gill Sans Zetta"; src: url("fontes/gillsans-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Gill Sans Zetta"; src: url("fontes/gillsans-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Gill Sans Zetta"; src: url("fontes/gillsans-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Gill Sans Zetta"; src: url("fontes/gillsans-bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; } @font-face { font-family: "Gill Sans Zetta"; src: url("fontes/gillsans-bold-italic.woff2") format("woff2"); font-weight: 600 700; font-style: italic; font-display: swap; } :root { --azul: #4254FB; --azul-escuro: #2E3DD1; --grafite: #1E2021; --fundo: #161819; --superficie: #222526; --superficie-2: #2A2D2E; --linha: rgba(246, 246, 246, .10); --cinza-medio: #9FA2A5; --cinza-claro: #D6D8D9; --off-white: #F6F6F6; --texto: var(--off-white); --texto-suave: #B9BCBF; --fonte: "Gill Sans Zetta", "Gill Sans", "Gill Sans MT", system-ui, sans-serif; --fonte-tec: "Play", "Gill Sans Zetta", system-ui, sans-serif; --largura: 1180px; --raio: 6px; --gutter: clamp(16px, 4vw, 32px); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--fundo); color: var(--texto); font-family: var(--fonte); font-size: 18px; /* Gill Sans tem x-height baixa: 18px lê como 17px de outras fontes */ line-height: 1.6; -webkit-font-smoothing: antialiased; } img, svg { max-width: 100%; display: block; } a { color: inherit; } h1, h2, h3, h4 { font-family: var(--fonte); line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em; } h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 700; } h2 { font-size: clamp(1.9rem, 4vw, 3rem); font-weight: 700; } h3 { font-size: 1.35rem; font-weight: 600; } p { margin: 0 0 1em; } .suave { color: var(--texto-suave); } .destaque { color: var(--azul); } .container { width: 100%; max-width: var(--largura); margin: 0 auto; padding: 0 var(--gutter); } .secao { padding: clamp(64px, 10vw, 120px) 0; position: relative; } .secao--clara { background: var(--off-white); color: var(--grafite); } .secao--clara .suave { color: #55595C; } .secao--superficie { background: var(--grafite); } /* Rótulo técnico (fonte Play, como "performance" no logo) */ .kicker { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; color: var(--azul); margin: 0 0 1.2em; display: flex; align-items: center; gap: .7em; } .kicker::before { content: ""; width: 28px; height: 3px; background: var(--azul); transform: skewX(-35deg); } .intro { max-width: 720px; margin-bottom: 3rem; } .intro p { font-size: 1.15rem; } /* ---------- Botões ---------- */ .btn { display: inline-flex; align-items: center; gap: .6em; font-family: var(--fonte); font-weight: 600; font-size: 1rem; padding: .95em 1.6em; border-radius: var(--raio); text-decoration: none; border: 2px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s, transform .2s; } .btn:hover { transform: translateY(-1px); } .btn--azul { background: var(--azul); color: #fff; } .btn--azul:hover { background: var(--azul-escuro); } .btn--contorno { border-color: rgba(246,246,246,.35); color: var(--off-white); } .btn--contorno:hover { border-color: var(--off-white); } .secao--clara .btn--contorno { border-color: rgba(30,32,33,.35); color: var(--grafite); } .btn--grande { font-size: 1.1rem; padding: 1.1em 2em; } .btn .seta { width: 0; height: 0; border-left: 7px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } .botoes { display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Cabeçalho ---------- */ .topo { position: sticky; top: 0; z-index: 50; background: rgba(22, 24, 25, .88); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linha); } .topo .container { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 24px; } .topo .logo img { height: 34px; width: auto; } .menu { display: flex; align-items: center; gap: 30px; } .menu a { text-decoration: none; font-size: 1.02rem; color: var(--texto-suave); transition: color .2s; } .menu a:hover, .menu a[aria-current="page"] { color: var(--off-white); } .menu a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--azul); padding-bottom: 4px; } .menu .btn { color: #fff; padding: .65em 1.2em; } .menu-botao { display: none; background: none; border: 0; color: var(--off-white); padding: 8px; cursor: pointer; } .menu-botao span { display: block; width: 24px; height: 2px; background: currentColor; margin: 5px 0; transition: transform .2s, opacity .2s; } @media (max-width: 860px) { .menu-botao { display: block; } .menu { position: absolute; top: 72px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--fundo); border-bottom: 1px solid var(--linha); padding: 8px var(--gutter) 20px; display: none; } .menu.aberto { display: flex; } .menu a { padding: 14px 0; border-bottom: 1px solid var(--linha); font-size: 1.05rem; } .menu a[aria-current="page"] { box-shadow: none; color: var(--azul); } .menu .btn { margin-top: 16px; justify-content: center; border-bottom: 0; } } /* ---------- Hero ---------- */ .hero { position: relative; overflow: hidden; padding: clamp(80px, 14vw, 170px) 0 clamp(70px, 10vw, 130px); } .hero h1 { max-width: 14ch; } .hero .lead { font-size: clamp(1.1rem, 1.8vw, 1.35rem); max-width: 600px; color: var(--texto-suave); margin-bottom: 2.2rem; } .hero--foto { min-height: 88vh; display: flex; align-items: center; } .hero__fundo { position: absolute; inset: 0; z-index: -1; } .hero__fundo img { width: 100%; height: 100%; object-fit: cover; } .hero__fundo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22,24,25,.96) 0%, rgba(22,24,25,.75) 50%, rgba(22,24,25,.35) 100%); } /* Faixas diagonais da marca (como a faixa da camisa) */ .faixas { position: absolute; right: -8%; top: 0; bottom: 0; width: 46%; pointer-events: none; z-index: -1; } .faixas i { position: absolute; top: -10%; bottom: -10%; transform: skewX(-35deg); } .faixas i:nth-child(1) { left: 20%; width: 18%; background: var(--azul); } .faixas i:nth-child(2) { left: 44%; width: 7%; background: rgba(66,84,251,.35); } .faixas i:nth-child(3) { left: 56%; width: 3%; background: rgba(246,246,246,.08); } @media (max-width: 860px) { .faixas { width: 70%; right: -40%; opacity: .55; } } /* ---------- Faixa de números ---------- */ .numeros { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--linha); border-bottom: 1px solid var(--linha); } .numeros > div { padding: 34px 24px; border-left: 1px solid var(--linha); } .numeros > div:first-child { border-left: 0; } .numeros strong { display: block; font-family: var(--fonte-tec); font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; color: var(--off-white); margin-bottom: 8px; } .numeros span { color: var(--texto-suave); font-size: .95rem; } @media (max-width: 760px) { .numeros { grid-template-columns: 1fr 1fr; } .numeros > div:nth-child(3) { border-left: 0; } .numeros > div:nth-child(n+3) { border-top: 1px solid var(--linha); } } /* ---------- Grids e cartões ---------- */ .grid { display: grid; gap: 24px; } .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid > * { min-width: 0; } .cartao h3 { overflow-wrap: break-word; hyphens: auto; } @media (max-width: 1180px) { .grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } } @media (max-width: 640px) { .grid-5 { grid-template-columns: 1fr; } } .cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 30px; position: relative; } .secao--clara .cartao { background: #fff; border-color: #E3E4E5; } .cartao h3 { margin-bottom: .4em; } .cartao p:last-child { margin-bottom: 0; } .cartao .num { font-family: var(--fonte-tec); color: var(--azul); font-size: .85rem; letter-spacing: .15em; display: block; margin-bottom: 18px; } .duas-colunas { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 80px); align-items: center; } @media (max-width: 860px) { .duas-colunas { grid-template-columns: 1fr; } } /* ---------- Foto (com espaço reservado até as fotos reais chegarem) ---------- */ .foto { position: relative; border-radius: var(--raio); overflow: hidden; background: var(--superficie-2); aspect-ratio: 4 / 3; } .foto img { width: 100%; height: 100%; object-fit: cover; } .foto--alta { aspect-ratio: 4 / 5; } .foto--larga { aspect-ratio: 16 / 9; } .foto--vazia { display: flex; align-items: flex-end; padding: 18px; background: repeating-linear-gradient(-55deg, transparent 0 22px, rgba(246,246,246,.04) 22px 23px), linear-gradient(160deg, #2C3031, #1B1D1E); } .foto--vazia::before { content: ""; position: absolute; right: 18px; top: 18px; width: 46px; height: 46px; opacity: .25; background: url("simbolo-branco.svg") center / contain no-repeat; } .foto--vazia span { font-family: var(--fonte-tec); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza-medio); } .legenda { margin-top: 14px; } .legenda strong { display: block; } .legenda span { color: var(--texto-suave); font-size: .95rem; } /* ---------- Linha do tempo (Caminho do Atleta) ---------- */ .trilha { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; counter-reset: etapa; } .trilha li { list-style: none; padding: 28px 22px 0 0; border-top: 3px solid var(--linha); position: relative; } .trilha li::before { content: ""; position: absolute; top: -9px; left: 0; width: 22px; height: 15px; background: var(--azul); transform: skewX(-35deg); } .trilha .quando { font-family: var(--fonte-tec); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--azul); } .trilha h3 { margin: .4em 0; font-size: 1.2rem; } .trilha p { color: var(--texto-suave); font-size: .97rem; } .secao--clara .trilha li { border-top-color: #D6D8D9; } .secao--clara .trilha p { color: #55595C; } @media (max-width: 900px) { .trilha { grid-template-columns: 1fr; padding: 0; } .trilha li { border-top: 0; border-left: 3px solid var(--linha); padding: 0 0 28px 26px; } .trilha li::before { top: 4px; left: -9px; width: 15px; height: 15px; transform: none; } .secao--clara .trilha li { border-left-color: #D6D8D9; } } /* ---------- Lista com marcador da marca ---------- */ .lista { list-style: none; padding: 0; margin: 0; } .lista li { position: relative; padding: 0 0 .75em 1.7em; } .lista li::before { content: ""; position: absolute; left: 0; top: .55em; width: 12px; height: 8px; background: var(--azul); transform: skewX(-35deg); } /* ---------- YouTube ---------- */ .video { position: relative; aspect-ratio: 16 / 9; border-radius: var(--raio); overflow: hidden; background: #000; } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .video--vazio { display: flex; align-items: center; justify-content: center; text-align: center; padding: 24px; background: linear-gradient(160deg, #2C3031, #111213); } .video--vazio .play { width: 74px; height: 52px; border-radius: 12px; background: var(--azul); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; } .video--vazio .play::after { content: ""; border-left: 18px solid #fff; border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 4px; } /* ---------- Equipe ---------- */ .pessoa { display: grid; grid-template-columns: 340px 1fr; gap: clamp(28px, 5vw, 60px); align-items: start; padding: 48px 0; border-top: 1px solid var(--linha); } .pessoa:first-of-type { border-top: 0; } .pessoa .papel { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--azul); margin-bottom: .6em; } .pessoa h3 { font-size: clamp(1.7rem, 3vw, 2.3rem); } .selos { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.2em 0 0; padding: 0; list-style: none; } .selos li { font-size: .85rem; padding: 6px 12px; border: 1px solid var(--linha); border-radius: 100px; color: var(--texto-suave); } @media (max-width: 760px) { .pessoa { grid-template-columns: 1fr; } .pessoa .foto { max-width: 340px; } } /* ---------- Planos ---------- */ .planos { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; max-width: 980px; margin: 0 auto; } @media (max-width: 860px) { .planos { grid-template-columns: 1fr; } } .plano { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 38px 34px; display: flex; flex-direction: column; position: relative; overflow: hidden; } .plano--destaque { border: 2px solid var(--azul); background: linear-gradient(180deg, rgba(66,84,251,.12), var(--superficie) 40%); } .plano .selo-plano { position: absolute; top: 22px; right: -38px; transform: rotate(35deg); background: var(--azul); color: #fff; font-family: var(--fonte-tec); font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; padding: 6px 44px; } .plano h3 { font-size: 1.9rem; margin-bottom: .2em; } .plano .para-quem { color: var(--texto-suave); min-height: 3.2em; } .preco { margin: 24px 0 6px; font-family: var(--fonte-tec); } .preco small { font-size: 1rem; color: var(--texto-suave); } .preco strong { font-size: clamp(2.6rem, 5vw, 3.4rem); line-height: 1; } .preco-obs { color: var(--texto-suave); font-size: .92rem; margin-bottom: 26px; } .plano .lista { margin-bottom: 30px; flex: 1; } .plano .btn { justify-content: center; } .tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--linha); border-radius: var(--raio); } .tabela { width: 100%; border-collapse: collapse; min-width: 560px; font-size: .97rem; } .tabela th, .tabela td { padding: 14px 18px; text-align: left; border-bottom: 1px solid var(--linha); } .tabela thead th { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .1em; font-size: .8rem; color: var(--texto-suave); background: var(--grafite); } .tabela td:not(:first-child), .tabela th:not(:first-child) { text-align: center; width: 22%; } .tabela tr:last-child td { border-bottom: 0; } .tabela .sim { color: var(--azul); font-weight: 700; } .tabela .nao { color: #5E6265; } /* ---------- Garantia ---------- */ .garantia { display: grid; grid-template-columns: 200px 1fr; gap: 40px; align-items: center; background: var(--azul); color: #fff; border-radius: 10px; padding: clamp(32px, 5vw, 56px); position: relative; overflow: hidden; } .garantia .selo-4 { font-family: var(--fonte-tec); text-align: center; border: 3px solid #fff; border-radius: 50%; aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; } .garantia .selo-4 strong { font-size: 4rem; line-height: .9; } .garantia .selo-4 span { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; } .garantia blockquote { margin: 0 0 1em; font-size: clamp(1.15rem, 2vw, 1.4rem); line-height: 1.45; } .garantia small { opacity: .85; } @media (max-width: 700px) { .garantia { grid-template-columns: 1fr; } .garantia .selo-4 { width: 150px; } } /* ---------- FAQ ---------- */ .faq { max-width: 820px; } .faq details { border-bottom: 1px solid var(--linha); } .secao--clara .faq details { border-bottom-color: #D6D8D9; } .faq summary { cursor: pointer; list-style: none; padding: 22px 40px 22px 0; font-weight: 600; font-size: 1.1rem; position: relative; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; position: absolute; right: 4px; top: 16px; font-size: 1.6rem; color: var(--azul); font-weight: 400; transition: transform .2s; } .faq details[open] summary::after { transform: rotate(45deg); } .faq details p { padding-bottom: 20px; margin: 0; } /* ---------- CTA final ---------- */ .cta-final { text-align: center; position: relative; overflow: hidden; } .cta-final h2 { max-width: 18ch; margin-left: auto; margin-right: auto; } .cta-final p { max-width: 560px; margin: 0 auto 2rem; } .cta-final .botoes { justify-content: center; } /* ---------- Rodapé ---------- */ .rodape { border-top: 1px solid var(--linha); padding: 56px 0 32px; color: var(--texto-suave); font-size: .95rem; } .rodape .container { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; } .rodape img { height: 34px; width: auto; margin-bottom: 16px; } .rodape h4 { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .14em; font-size: .78rem; color: var(--off-white); margin-bottom: 1em; } .rodape ul { list-style: none; padding: 0; margin: 0; } .rodape li { margin-bottom: .5em; } .rodape a { text-decoration: none; } .rodape a:hover { color: var(--off-white); } .rodape .final { grid-column: 1 / -1; border-top: 1px solid var(--linha); padding-top: 24px; margin-top: 16px; font-size: .85rem; } @media (max-width: 760px) { .rodape .container { grid-template-columns: 1fr; } } /* ---------- Calculadoras ---------- */ .calc-abas { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; } .calc-abas button { font-family: var(--fonte); font-size: .97rem; font-weight: 600; background: var(--superficie); color: var(--texto-suave); border: 1px solid var(--linha); border-radius: 100px; padding: .65em 1.2em; cursor: pointer; } .calc-abas button[aria-selected="true"] { background: var(--azul); color: #fff; border-color: var(--azul); } .calc { display: grid; grid-template-columns: 380px 1fr; gap: 24px; align-items: start; } .calc[hidden] { display: none; } .calc > * { min-width: 0; } @media (max-width: 900px) { .calc { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 480px) { .calc-form, .calc-saida { padding: 20px; } .zonas td { padding: 10px 6px; } } .calc-form, .calc-saida { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 28px; } .calc-form h3 { margin-bottom: .3em; } .calc-form > p { color: var(--texto-suave); font-size: .95rem; } .campo { margin-bottom: 18px; } .campo label { display: block; font-size: .9rem; color: var(--texto-suave); margin-bottom: 6px; } .campo input, .campo select { width: 100%; font: inherit; font-family: var(--fonte-tec); font-size: 1.1rem; background: var(--fundo); color: var(--off-white); border: 1px solid rgba(246,246,246,.18); border-radius: var(--raio); padding: 12px 14px; } .campo input:focus, .campo select:focus { outline: 2px solid var(--azul); outline-offset: 1px; border-color: transparent; } .campo-par { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; } .calc-saida h4 { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; color: var(--texto-suave); margin-bottom: 1.2em; } .resultado-grande { font-family: var(--fonte-tec); font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; margin-bottom: .2em; } .resultado-grande small { font-size: .4em; color: var(--texto-suave); margin-left: .2em; } .mini-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 20px 0; } .mini { background: var(--fundo); border-radius: var(--raio); padding: 16px; } .mini span { display: block; font-size: .85rem; color: var(--texto-suave); } .mini strong { font-family: var(--fonte-tec); font-size: 1.5rem; } .zonas { width: 100%; border-collapse: collapse; } .zonas td { padding: 11px 10px; border-bottom: 1px solid var(--linha); font-size: .97rem; } .zonas td:first-child { width: 56px; } .zonas td:last-child { text-align: right; font-family: var(--fonte-tec); font-size: 1.05rem; white-space: nowrap; } .zonas .z { display: inline-block; font-family: var(--fonte-tec); font-size: .85rem; padding: 3px 0; width: 40px; text-align: center; border-radius: 4px; color: #fff; } .zonas .desc { color: var(--texto-suave); font-size: .85rem; display: block; } .barra-zonas { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin: 6px 0 18px; } .nota { font-size: .88rem; color: var(--cinza-medio); margin-top: 18px; border-left: 3px solid var(--azul); padding-left: 12px; } .calc-cta { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; } .calc-cta p { margin: 0; max-width: 420px; font-size: .97rem; } /* ---------- Landing ---------- */ .lp-topo .container { height: 76px; } .dor { font-size: clamp(1.4rem, 3vw, 2.1rem); line-height: 1.35; max-width: 26ch; } .passos { counter-reset: passo; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .passos li { list-style: none; counter-increment: passo; } .passos li::before { content: "0" counter(passo); display: block; font-family: var(--fonte-tec); font-size: 3rem; line-height: 1; color: var(--azul); margin-bottom: 14px; } @media (max-width: 860px) { .passos { grid-template-columns: 1fr; padding: 0; } } .grafico-durab { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 28px; } .grafico-durab .barra { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .grafico-durab .barra > span:first-child { width: 120px; flex: none; font-size: .9rem; color: var(--texto-suave); } .grafico-durab .barra > div { height: 34px; background: var(--azul); border-radius: 4px; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; font-family: var(--fonte-tec); font-size: .95rem; color: #fff; } .grafico-durab .barra--depois > div { background: #5E6265; } .cta-fixo { display: none; } @media (max-width: 760px) { .cta-fixo { display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; } .cta-fixo .btn { width: 100%; justify-content: center; box-shadow: 0 10px 30px rgba(0,0,0,.45); } .lp body, body.lp { padding-bottom: 80px; } } /* Revelar ao rolar */ .revelar { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; } .revelar.visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .revelar { opacity: 1; transform: none; transition: none; } } /* ---------- Aceite LGPD antes do WhatsApp ---------- */ .aceite { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; padding: 16px; } .aceite__caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; padding: 28px; max-width: 520px; width: 100%; max-height: calc(100vh - 32px); overflow-y: auto; } .aceite__caixa p { color: var(--texto-suave); } .aceite__check { display: flex; gap: 12px; align-items: flex-start; margin: 1.2em 0; cursor: pointer; } .aceite__check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--azul); } .aceite__botoes { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; } .aceite [aria-disabled="true"] { opacity: .45; cursor: not-allowed; } /* ---------- Política de privacidade ---------- */ .politica .container { max-width: 820px; } .politica h3 { margin-top: 2em; } .politica ul { padding-left: 1.2em; } .politica li { margin-bottom: .5em; } /* ---------- Resultados (atleta por atleta) ---------- */ .calc-abas button[aria-pressed="true"] { background: var(--azul); color: #fff; border-color: var(--azul); } .atleta { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: start; padding: 64px 0; border-top: 1px solid var(--linha); scroll-margin-top: 80px; } .atleta[hidden] { display: none; } #r-lista .atleta:not([hidden]) ~ .atleta:not([hidden]) { border-top: 1px solid var(--linha); } #r-lista > .atleta:first-child { border-top: 0; padding-top: 24px; } .atleta__foto { position: sticky; top: 96px; } .atleta .papel { font-family: var(--fonte-tec); text-transform: uppercase; letter-spacing: .14em; font-size: .82rem; color: var(--azul); margin-bottom: .6em; } .atleta h2 { font-size: clamp(2rem, 4vw, 2.8rem); } .atleta blockquote { margin: 0 0 1.6em; padding-left: 18px; border-left: 3px solid var(--azul); font-size: 1.15rem; color: var(--texto-suave); font-style: italic; } .evolucao { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 28px; } .evolucao .mini { background: var(--superficie); border: 1px solid var(--linha); } .evolucao strong { font-size: 1.25rem; display: block; margin: 4px 0; } .evolucao em { font-style: normal; font-family: var(--fonte-tec); font-size: .95rem; color: var(--cinza-medio); } .evolucao em.subiu { color: #5CD6A0; } .provas { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--linha); } .provas li { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--linha); } .pos { font-family: var(--fonte-tec); font-size: 1.05rem; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--superficie-2); color: var(--texto-suave); } .pos--ouro { background: #D4A72C; color: #1E2021; } .pos--prata { background: #C3C7CB; color: #1E2021; } .pos--bronze { background: #B4703F; color: #fff; } .prova-nome strong { display: block; font-weight: 600; } .prova-nome small { color: var(--texto-suave); font-size: .9rem; } .prova-ano { font-family: var(--fonte-tec); color: var(--cinza-medio); } .atleta__proximo { display: inline-block; margin-top: 24px; color: var(--texto-suave); text-decoration: none; font-size: .95rem; } .atleta__proximo:hover { color: var(--off-white); } @media (max-width: 860px) { .atleta { grid-template-columns: minmax(0, 1fr); } .atleta__foto { position: static; max-width: 340px; } } @media (max-width: 480px) { .zonas td:last-child { white-space: normal; font-size: .95rem; } .zonas td:first-child { width: 46px; } .zonas .z { width: 36px; } } /* ---------- Pacer de Prova ---------- */ .selo-beta { font-size: .7rem; letter-spacing: .1em; background: rgba(66,84,251,.18); color: var(--off-white); border: 1px solid var(--azul); border-radius: 100px; padding: 2px 9px; margin-left: 4px; } .pacer-entradas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } @media (max-width: 1000px) { .pacer-entradas { grid-template-columns: minmax(0, 1fr); } } .passo-n { display: inline-flex; width: 26px; height: 26px; border-radius: 50%; background: var(--azul); color: #fff; font-family: var(--fonte-tec); font-size: .9rem; align-items: center; justify-content: center; margin-right: 6px; vertical-align: 2px; } .campo input[type=file] { font-family: var(--fonte); font-size: .95rem; padding: 10px; } .btn--peq { font-size: .9rem; padding: .55em 1em; } .pc-msg { font-size: .92rem; color: var(--texto-suave); margin: 12px 0 0; } .pc-msg.erro { color: #F08A8F; } .pacer-avancado { margin-top: 20px; display: grid; gap: 12px; } .pacer-avancado details { background: var(--superficie); border: 1px solid var(--linha); border-radius: 10px; padding: 0 24px; } .pacer-avancado summary { cursor: pointer; padding: 18px 0; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 10px; } .pacer-avancado summary::-webkit-details-marker { display: none; } .pacer-avancado summary::before { content: "+"; color: var(--azul); font-size: 1.4rem; line-height: 1; width: 14px; } .pacer-avancado details[open] summary::before { content: "−"; } .pacer-avancado details[open] { padding-bottom: 22px; } .pc-tag { font-family: var(--fonte-tec); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; padding: 3px 9px; border-radius: 100px; background: var(--superficie-2); color: var(--texto-suave); font-weight: 400; } .pc-tag--alerta { background: rgba(232,178,58,.16); color: #E8B23A; } .pc-piso-linha { display: grid; grid-template-columns: 150px minmax(0, 1fr) 40px; gap: 12px; align-items: end; } .pc-piso-x { background: none; border: 1px solid var(--linha); color: var(--texto-suave); border-radius: var(--raio); height: 46px; margin-bottom: 18px; cursor: pointer; } span.pc-piso-x { border: 0; } @media (max-width: 560px) { .pc-piso-linha { grid-template-columns: 90px minmax(0, 1fr) 36px; gap: 8px; } } .pc-curva { min-width: 520px; } .pc-curva th small { display: block; font-family: var(--fonte); text-transform: none; letter-spacing: 0; color: var(--cinza-medio); font-size: .78rem; margin-top: 2px; } .pc-curva td input { width: 84px; font-family: var(--fonte-tec); font-size: 1rem; background: var(--fundo); color: var(--off-white); border: 1px solid rgba(246,246,246,.18); border-radius: 4px; padding: 7px 8px; text-align: center; } .pacer-param { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; } @media (max-width: 760px) { .pacer-param { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .pc-check { display: flex; gap: 10px; align-items: center; margin-top: 10px; cursor: pointer; } .pc-check input { width: 18px; height: 18px; accent-color: var(--azul); } .pc-vazio { margin-top: 28px; border: 1px dashed rgba(246,246,246,.2); border-radius: 10px; padding: 48px 24px; text-align: center; color: var(--texto-suave); } .pc-vazio p { margin: 0; } #pc-resultado { margin-top: 28px; transition: opacity .2s; } #pc-resultado.calculando { opacity: .55; } .pc-aviso { background: rgba(232,178,58,.10); border: 1px solid rgba(232,178,58,.35); border-radius: 10px; padding: 14px 18px; margin-bottom: 20px; font-size: .95rem; } .pc-aviso p { margin: 0 0 .4em; } .pc-aviso p:last-child { margin: 0; } .pc-aviso[hidden] { display: none; } .pc-resumo { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; } @media (max-width: 1100px) { .pc-resumo { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 560px) { .pc-resumo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .pc-resumo .mini { background: var(--superficie); border: 1px solid var(--linha); } .pc-resumo strong { display: block; font-size: 1.45rem; margin: 2px 0; } .pc-resumo small { color: var(--cinza-medio); font-size: .85rem; } .pc-grafico-topo { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; margin-bottom: 14px; } .pc-grafico-topo h4 { margin: 0; } .pc-alfa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: .9rem; color: var(--texto-suave); } .pc-alfa input { accent-color: var(--azul); width: 160px; } .pc-alfa span { font-family: var(--fonte-tec); min-width: 110px; } .pc-grafico { position: relative; width: 100%; } .pc-grafico svg { display: block; width: 100%; height: auto; } .pc-eixo { fill: var(--cinza-medio); font-family: var(--fonte-tec); font-size: 10px; } .pc-grade { stroke: rgba(246,246,246,.07); } .pc-fundo-banda { fill: rgba(246,246,246,.025); } .pc-linha-pot { fill: none; stroke: var(--off-white); stroke-width: 1.6; } .pc-linha-ftp { stroke: var(--azul); stroke-dasharray: 5 4; stroke-width: 1.2; } .pc-linha-lim { stroke: #E8B23A; stroke-dasharray: 3 3; stroke-width: 1.4; fill: none; } .pc-linha-w { fill: none; stroke: #5CD6A0; stroke-width: 1.6; } .pc-cursor { stroke: rgba(246,246,246,.6); stroke-width: 1; } .pc-dica { position: absolute; z-index: 5; pointer-events: none; background: #0E0F10; border: 1px solid var(--linha); border-radius: 8px; padding: 10px 12px; font-size: .85rem; line-height: 1.45; max-width: 260px; box-shadow: 0 8px 24px rgba(0,0,0,.4); } .pc-legenda { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; font-size: .85rem; color: var(--texto-suave); } .pc-legenda span { display: inline-flex; align-items: center; gap: 6px; } .pc-legenda i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; } .pc-legenda .pc-i-tracejado { width: 18px; height: 0; border-top: 2px dashed #E8B23A; border-radius: 0; } .pc-leg-sep { width: 1px; height: 14px; background: var(--linha); } .pc-cartao { min-width: 980px; font-size: .92rem; } .pc-cartao td, .pc-cartao th { padding: 10px 10px; white-space: nowrap; } .pc-cartao td:not(:first-child), .pc-cartao th:not(:first-child) { width: auto; } .pc-cartao .pc-alvo { font-family: var(--fonte-tec); font-size: 1.05rem; color: var(--off-white); } .pc-zona { font-family: var(--fonte-tec); font-size: .8rem; color: #fff; padding: 2px 7px; border-radius: 4px; } .btn--contorno { background: transparent; } /*