/* =====================================================================
   Componentes reaproveitados pelas páginas: kickers, formulários, quadros
   de ícone e mensagens de erro.
   ===================================================================== */

/* --- kicker de seção --------------------------------------------------- */

.smn-kicker {
  font: 500 12px var(--smn-fonte-mono);
  letter-spacing: var(--smn-trilha-kicker);
  color: var(--smn-verde);
  margin-bottom: 18px;
}

/* --- formulários -------------------------------------------------------- */

.smn-rotulo {
  display: block;
  font: 500 12px var(--smn-fonte-mono);
  letter-spacing: .08em;
  color: rgba(var(--smn-texto-rgb), .6);
  margin-bottom: 8px;
}

.smn-campo {
  width: 100%;
  padding: 14px 16px;
  background: var(--smn-campo-fundo);
  border: 1px solid var(--smn-linha-forte);
  border-radius: var(--smn-raio-botao);
  color: var(--smn-branco);
  font-size: 15px;
  outline: none;
}

.smn-campo--area {
  resize: vertical;
  font-family: inherit;
}

/* A cor vem do estado (muda ao encostar no limite), então segue inline. */
.smn-contador {
  margin-top: 6px;
  text-align: right;
  font: 500 11px var(--smn-fonte-mono);
  letter-spacing: .04em;
}

/* --- quadros de ícone ----------------------------------------------------- */

.smn-icone-contato {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--smn-verde-veu);
  border: 1px solid rgba(var(--smn-verde-rgb), .28);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smn-verde);
}

/* --- mensagens de erro ------------------------------------------------------ */

.smn-erro-msg {
  margin-top: 14px;
  font: 500 13px var(--smn-fonte-texto);
  color: var(--smn-erro);
}

/* Relógio regressivo do limite de envios. */
.smn-erro-msg--relogio {
  font-variant-numeric: tabular-nums;
}

/* --- faixa de conteúdo ----------------------------------------------------- */

.smn-container {
  max-width: var(--smn-container);
  margin: 0 auto;
}

/* --- títulos ---------------------------------------------------------------- */

.smn-titulo {
  margin: 0;
  font-family: var(--smn-fonte-titulo);
  font-weight: 600;
  line-height: 1.15;
  color: var(--smn-branco);
}

.smn-titulo--hero {
  margin: 0 auto;
  max-width: 840px;
  font-size: var(--smn-h1-home);
  letter-spacing: var(--smn-trilha-titulo);
}

.smn-titulo--pagina {
  font-size: var(--smn-h1-pagina);
  letter-spacing: var(--smn-trilha-titulo);
}

.smn-titulo--secao {
  font-size: var(--smn-h2);
  letter-spacing: var(--smn-trilha-h2);
}

/* Chamada final e bloco de carreiras: mesma família, escalas próprias. */
.smn-titulo--cta {
  margin: 0 auto;
  max-width: 640px;
  font-size: var(--smn-h2-cta);
  letter-spacing: var(--smn-trilha-h2);
}

.smn-titulo--carreiras {
  font-size: clamp(28px, 5vw, 40px);
  letter-spacing: var(--smn-trilha-h2);
}

.smn-titulo--painel {
  font-size: 30px;
}

/* --- botões ------------------------------------------------------------------ */

.smn-btn {
  border: none;
  cursor: pointer;
}

.smn-btn--solido {
  color: var(--smn-sobre-verde);
  background: var(--smn-verde);
}

.smn-btn--fantasma {
  color: var(--smn-verde);
  background: transparent;
  border: 1px solid var(--smn-verde-borda-forte);
}

/* --- cards --------------------------------------------------------------------- */

.smn-card {
  background: var(--smn-superficie-veu);
  border: 1px solid var(--smn-linha);
}

.smn-card--fraco {
  background: var(--smn-superficie-veu-fraco);
  border: 1px solid var(--smn-linha-fraca);
}

/* --- brilhos de fundo ------------------------------------------------------------ */
/* Tamanho, força, desfoque e ritmo entram por variável em cada ocorrência. */

.smn-brilho {
  width: var(--brilho-larg);
  height: var(--brilho-alt);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--smn-verde-rgb), var(--brilho-forca)), transparent var(--brilho-parada, 66%));
  filter: blur(var(--brilho-desfoque));
  animation: smnGlow var(--brilho-tempo) ease-in-out infinite;
}

/* --- centralização ------------------------------------------------------------ */

.smn-centro {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- quadro de ícone de recurso -------------------------------------------------- */
/* Tamanho e raio variam por contexto e seguem inline. */

.smn-icone {
  background: var(--smn-verde-veu-forte);
  border: 1px solid var(--smn-verde-borda);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--smn-verde);
}

/* --- confirmação de envio --------------------------------------------------------- */

.smn-sucesso-marca {
  width: 60px;
  height: 60px;
  margin: 0 auto;
  border-radius: 50%;
  background: rgba(var(--smn-verde-rgb), .16);
  border: 1px solid var(--smn-verde-borda-forte);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  color: var(--smn-verde);
}

.smn-girador {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(12, 36, 24, .35);
  border-top-color: var(--smn-sobre-verde);
  border-radius: 50%;
  animation: smnSpinGlow .7s linear infinite;
}

/* --- seletor de idioma -------------------------------------------------------------- */

.smn-idioma {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px;
  border-radius: var(--smn-raio-botao);
  background: var(--smn-campo-fundo);
  border: 1px solid var(--smn-linha-fraca);
}

.smn-idioma__abrir {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: rgba(var(--smn-texto-rgb), .85);
}

/* --- canal de contato ----------------------------------------------------------------- */

.smn-canal {
  display: flex;
  align-items: center;
  gap: 11px;
  color: var(--smn-branco);
}

/* --- textos corridos ------------------------------------------------------------ */
/* A margem varia por contexto e segue inline. */

.smn-paragrafo {
  font-size: 16px;
  line-height: 1.75;
  color: var(--smn-txt-medio);
}

.smn-lead {
  font-size: 16px;
  line-height: 1.7;
  color: var(--smn-txt-medio);
}

.smn-lead--pagina {
  font-size: 17px;
  color: rgba(var(--smn-texto-rgb), .75);
}

.smn-cartao__titulo {
  font: 600 16px var(--smn-fonte-texto);
  color: var(--smn-branco);
}

.smn-cartao__desc {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--smn-txt-fraco);
}

/* --- botão de contorno claro ------------------------------------------------------- */

.smn-btn--vidro {
  font: 600 15px var(--smn-fonte-texto);
  color: var(--smn-txt);
  padding: 16px 28px;
  border-radius: var(--smn-raio-botao-g);
  border: 1px solid rgba(var(--smn-branco-rgb), .16);
}

/* --- carrossel ---------------------------------------------------------------------- */
/* A proporção do quadro varia entre a instituição e o fundador. */

.smn-moldura {
  position: relative;
  border-radius: var(--smn-raio-painel);
  overflow: hidden;
  border: 1px solid rgba(var(--smn-branco-rgb), .1);
  background: var(--smn-superficie);
}

.smn-pontos {
  position: absolute;
  bottom: 14px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 8px;
  z-index: 3;
}

.smn-seta {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--smn-branco-rgb), .18);
  background: var(--smn-seta);
  backdrop-filter: blur(6px);
  color: var(--smn-branco);
  cursor: pointer;
  z-index: 3;
}

/* --- selo flutuante sobre o carrossel -------------------------------------------------- */

.smn-flutuante {
  position: absolute;
  bottom: -22px;
  padding: 16px 20px;
  background: var(--smn-selo);
  border: 1px solid rgba(var(--smn-verde-rgb), .35);
  border-radius: 14px;
  backdrop-filter: blur(8px);
  box-shadow: var(--smn-sombra-selo);
  z-index: 4;
}

.smn-flutuante__rotulo {
  font: 500 10px var(--smn-fonte-mono);
  letter-spacing: var(--smn-trilha-rotulo);
  color: var(--smn-verde);
}

.smn-flutuante__texto {
  margin-top: 3px;
  font: 600 13px var(--smn-fonte-texto);
  color: var(--smn-branco);
}

/* --- massa de brilho que flutua ao fundo ------------------------------------------------- */

.smn-flutua {
  position: absolute;
  pointer-events: none;
  animation: smnFloat var(--flutua-tempo) ease-in-out infinite;
}

/* --- topo das páginas internas ---------------------------------------------- */

.smn-pagina-topo {
  position: relative;
  overflow: hidden;
  padding: 96px var(--gutter, 24px) 60px;
}

.smn-pagina-topo--contato {
  padding-bottom: 50px;
}

.smn-cartao__titulo--g {
  font-size: 20px;
  font-family: var(--smn-fonte-titulo);
}

.smn-cartao__desc--g {
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(var(--smn-texto-rgb), .66);
}

/* --- confirmação de envio ------------------------------------------------------ */

.smn-sucesso {
  text-align: center;
  padding: 40px 10px;
}

.smn-sucesso__titulo {
  margin-top: 20px;
  font: 600 22px var(--smn-fonte-titulo);
  color: var(--smn-branco);
}

.smn-sucesso__texto {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(var(--smn-texto-rgb), .7);
}

/* Campo isca: fora da vista, preenchido só por robô. */
.smn-isca {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.smn-btn--enviando {
  margin-top: 22px;
  width: 100%;
  font: 600 15px var(--smn-fonte-texto);
  color: var(--smn-sobre-verde);
  background: rgba(var(--smn-verde-rgb), .55);
  padding: 16px;
  border-radius: var(--smn-raio-chip);
  border: none;
  cursor: progress;
  gap: 10px;
}

/* --- pílulas de idioma ------------------------------------------------------------- */
/* Só a imagem da bandeira segue inline: é a única parte que muda por idioma. */

.smn-lang {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--smn-fonte-mono);
  letter-spacing: .05em;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid rgba(var(--smn-branco-rgb), .1);
  background: transparent;
  color: rgba(var(--smn-texto-rgb), .7);
  transition: all .18s ease;
}

.smn-lang--ativa {
  border-color: transparent;
  background: var(--smn-verde);
  color: var(--smn-sobre-verde);
}

.smn-bandeira {
  flex: none;
  width: 18px;
  height: 13px;
  border-radius: 2px;
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(var(--smn-preto-rgb), .15);
}

/* --- slides e pontos do carrossel ------------------------------------------------- */
/* A imagem, o recorte e qual slide está à frente vêm do estado, em app.js. */

.smn-slide {
  position: absolute;
  inset: 0;
  background-color: var(--smn-superficie);
  background-size: cover;
  background-repeat: no-repeat;
  transition: opacity .7s ease;
}

.smn-ponto {
  height: 8px;
  border-radius: 99px;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all var(--smn-t-hover) ease;
}

/* --- imagem de topo do card de case ------------------------------------------------- */

.smn-case__imagem {
  height: 180px;
  background-color: var(--smn-superficie);
  background-size: cover;
  background-position: top center;
  background-repeat: no-repeat;
  border-bottom: 1px solid var(--smn-linha-fraca);
}

/* --- foto da unidade ------------------------------------------------------------------ */

.smn-unidade__foto {
  position: relative;
  height: 132px;
  overflow: hidden;
  background-size: cover;
  background-position: center;
}

/* --- logo de cliente na esteira --------------------------------------------------------- */

.smn-cliente {
  flex: none;
  width: 360px;
  height: 156px;
  margin-right: 36px;
  box-sizing: border-box;
  padding: 30px 46px;
  border-radius: var(--smn-raio-card);
  overflow: hidden;
  border: 1px solid rgba(var(--smn-branco-rgb), .14);
  background-color: var(--smn-branco);
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
}

/* Logo que já vem sobre fundo escuro dispensa a placa branca. */
.smn-cliente--escuro {
  border-color: var(--smn-linha);
  background-color: var(--smn-superficie-veu);
}

/* Arte que sangra até a borda, sem respiro interno. */
.smn-cliente--sangra {
  padding: 0;
}