/* ==========================================================
   COMPONENTES: peças usadas em mais de uma seção
   ========================================================== */
/* Botão em pílula, cheio. A variante clara (.botao-claro) é para foto ou fundo escuro (hoje sem uso). */
.botao { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--altura-controle); padding: 0 28px; font: 500 var(--texto-apoio)/1 var(--font-texto); letter-spacing: .01em; text-decoration: none; border: 1px solid var(--botao-fundo); border-radius: var(--raio-botao); cursor: pointer; background: var(--botao-fundo); color: var(--botao-texto); transition: background-color .25s, color .25s, border-color .25s; }
.botao:hover { background: transparent; color: var(--texto); }
.botao-claro { --botao-fundo: var(--quase-branco); --botao-texto: var(--tinta); }
.botao-claro:hover { color: var(--quase-branco); border-color: var(--quase-branco); }
/* O botão de contorno fino (o Contato do menu; sobre a foto, em branco) */
.botao-contorno { background: transparent; color: var(--texto); border-color: currentColor; }
.botao-contorno:hover { background: var(--texto); color: var(--fundo); border-color: var(--texto); }

/* O número em destaque ("7 fatores", "3 etapas"): o algarismo grande, na fonte dos títulos, e a palavra ao lado;
   embaixo, uma linha de apoio opcional (.destaque-numero-apoio). O sócio gosta: "eles gostam dessas coisas". */
.destaque-numero { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin: var(--espaco-5) 0 0; line-height: 1; }
.destaque-numero-n { font: 400 clamp(76px, 8vw, 112px)/.85 var(--font-titulo); letter-spacing: -.02em; color: var(--texto); }
.destaque-numero-palavra { font: 400 clamp(28px, 2.8vw, 38px)/1 var(--font-titulo); color: var(--texto); }
.destaque-numero-apoio { margin-top: 10px; font-size: var(--texto-apoio); color: var(--texto-suave); text-align: center; }

/* Marca de prévia ("A validar", "Texto provisório"): só aparece com o MODO_PREVIA ligado */
.previa { display: inline-block; font-size: 12px; font-style: normal; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 3px 8px; border: 1px dashed var(--borda-controle); color: var(--texto-suave); }

/* Seta: o desenho único de seta do site (larga, encorpada e levemente curva), na cor do texto.
   Uso: <span class="seta" aria-hidden="true"></span>. Aponta para a direita; o comprimento vem de
   --seta-largura e a direção, de transform (rotate(90deg) aponta para baixo). */
.seta { display: inline-block; flex: none; width: var(--seta-largura, 48px); aspect-ratio: 2 / 1; background: currentColor;
  -webkit-mask: var(--seta-forma) center / contain no-repeat; mask: var(--seta-forma) center / contain no-repeat; }

/* Foto que anda devagar com a rolagem (paralaxe leve, js/fotos.js). A imagem é um pouco mais alta que
   a moldura e o JavaScript a desloca por --desloca. Sem JavaScript ou com menos movimento, ela fica parada. */
.foto-movel { overflow: hidden; }
.foto-movel img { width: 100%; height: 100%; object-fit: cover; }
.js .foto-movel.em-movimento img { height: 116%; transform: translate3d(0, var(--desloca, -7%), 0); will-change: transform; }

/* Faixa de foto grande entre as seções */
.faixa-foto { position: relative; height: 85vh; height: 85svh; min-height: 420px; max-height: 980px; background: var(--fundo-foto); }
.faixa-foto picture { display: block; height: 100%; }