/* =====================================================================
   components.css · Agência 24por7 · Sistema visual v3
   ---------------------------------------------------------------------
   Vidro sobre luz. Tudo aqui usa SÓ tokens.css (zero px, hex, ms).
   Prefixo "s-" em toda classe, para conviver com o CSS antigo na migração.

   Inventário: .s-atmosfera .s-container .s-secao(--veu) .s-cabecalho
               .s-h1/h2/h3 .s-p .s-legenda .s-mono .s-link
               .s-btn (primario, secundario, link, icone)
               .s-painel (o vidro) .s-painel--forte .s-painel--link .s-foto .s-foto-card .s-selo .s-atalhos .s-marca .s-atmosfera__forma .s-secao--respiro
               .s-tag (exemplo, acento) .s-status .s-campo .s-grade .s-pilha
               .s-divisor .s-oculto-visual
   Se o wireframe pedir algo que não está aqui: PARE e pergunte.
   ===================================================================== */

/* ---------------------------------------------------------------------
   ATMOSFERA · a luz atrás de tudo. Um por página, primeiro filho do body.
   --------------------------------------------------------------------- */
.s-atmosfera {
  position: fixed;
  inset: 0;
  z-index: var(--z-atmosfera);
  pointer-events: none;
  background: var(--atmosfera);
  overflow: hidden;
}
/* luzes + névoas brancas entre os tons (o "ar" da página) */
.s-atmosfera::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 34% at 14% 18%, var(--nevoa-1), transparent 70%),
    radial-gradient(42% 38% at 18% 22%, var(--luz-1), transparent 70%),
    radial-gradient(30% 28% at 86% 26%, var(--nevoa-2), transparent 70%),
    radial-gradient(36% 32% at 82% 18%, var(--luz-2), transparent 70%),
    radial-gradient(34% 30% at 50% 60%, var(--nevoa-3), transparent 70%),
    radial-gradient(60% 50% at 55% 92%, var(--luz-3), transparent 72%),
    radial-gradient(40% 36% at 72% 70%, var(--nevoa-quente), transparent 70%);
  animation: s-deriva var(--dur-deriva) var(--suave) infinite alternate;
  will-change: transform;
}
/* grão fino */
.s-atmosfera::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: var(--grao);
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
@keyframes s-deriva {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to   { transform: translate3d(2%, 2%, 0) scale(1.06); }
}
/* formas orgânicas de vidro: três por página, filhas de .s-atmosfera */
.s-atmosfera__forma {
  position: absolute;
  display: block;
  pointer-events: none;
  opacity: .9;
  background: linear-gradient(135deg, var(--forma-a), transparent 50%, var(--forma-b));
  border: var(--borda) solid var(--forma-borda);
  box-shadow: inset var(--borda) var(--borda) 0 var(--forma-luz), var(--forma-sombra);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(130%) brightness(1.09);
  backdrop-filter: blur(var(--vidro-blur)) saturate(130%) brightness(1.09);
  animation: s-forma var(--dur-forma) linear infinite;
}
.s-atmosfera__forma--1 { width: 62vmax; height: 46vmax; left: -18vmax; top: -14vmax; border-radius: 58% 42% 55% 45% / 52% 60% 40% 48%; }
.s-atmosfera__forma--2 { width: 52vmax; height: 40vmax; right: -16vmax; top: 22vh; border-radius: 45% 55% 40% 60% / 60% 40% 60% 40%; animation-direction: reverse; animation-duration: calc(var(--dur-forma) * 1.33); }
.s-atmosfera__forma--3 { width: 40vmax; height: 34vmax; left: 20vw; bottom: -18vmax; border-radius: 55% 45% 60% 40% / 45% 55% 45% 55%; animation-duration: calc(var(--dur-forma) * 1.66); }
@keyframes s-forma { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------------
   LAYOUT
   --------------------------------------------------------------------- */
.s-container {
  width: min(100% - 2 * var(--margem), var(--largura-max));
  margin-inline: auto;
}

.s-secao {
  position: relative;
  z-index: var(--z-conteudo);
  padding-block: calc(var(--secao-y) / 2);   /* duas seções vizinhas somam exatamente --secao-y */
  color: var(--texto);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  -webkit-font-smoothing: antialiased;
}
/* Véu escuro: UMA seção por página, com bordas suaves para não virar faixa. */
.s-secao--veu { background: linear-gradient(to bottom, transparent, var(--veu) calc(var(--secao-y) / 2), var(--veu) calc(100% - var(--secao-y) / 2), transparent); }
/* Faixa de respiro: névoa clara e quente, UMA seção por página. */
.s-secao--respiro { background: linear-gradient(to bottom, transparent, var(--respiro-a) calc(var(--secao-y) / 2), var(--respiro-b) calc(100% - var(--secao-y) / 2), transparent); }

.s-cabecalho {
  margin-bottom: var(--esp-48);
}
.s-cabecalho > .s-h1 { max-width: 20ch; }
.s-cabecalho > .s-h2 { max-width: 28ch; }
.s-cabecalho > .s-p  { max-width: 33ch; }

.s-grade {
  display: grid;
  gap: var(--grade-gap);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .s-grade--2, .s-grade--3, .s-grade--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .s-grade--3 { grid-template-columns: repeat(3, 1fr); }
  .s-grade--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------------------------------------------------------------------
   TIPOGRAFIA
   --------------------------------------------------------------------- */
.s-h1, .s-h2, .s-h3 {
  margin: 0;
  color: var(--texto);
  font-family: var(--fonte-texto);
  text-wrap: balance;
}
.s-h1 {
  font-size: var(--t-display);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
}
.s-h2 {
  font-size: var(--t-titulo);
  font-weight: var(--peso-titulo);
  line-height: var(--lh-titulo);
  letter-spacing: var(--tracking-titulo);
}
.s-h3 {
  font-size: var(--t-sub);
  font-weight: var(--peso-forte);
  line-height: var(--lh-sub);
}
.s-p {
  margin: 0;
  max-width: var(--medida);
  font-family: var(--fonte-texto);
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  color: var(--texto-2);
  text-wrap: pretty;
}
.s-p--pequeno { font-size: var(--t-pequeno); }
.s-p--forte   { color: var(--texto); }
.s-legenda {
  margin: 0;
  font-family: var(--fonte-texto);
  font-size: var(--t-legenda);
  line-height: var(--lh-corpo);
  color: var(--texto-3);
}
/* Monoespaçada: SÓ logotipo e feed "operação de hoje" */
.s-mono {
  font-family: var(--fonte-mono);
  font-size: var(--t-legenda);
  line-height: var(--lh-corpo);
}
.s-link {
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--texto-3);
  text-underline-offset: .2em;
  transition: color var(--dur-curta) var(--suave), text-decoration-color var(--dur-curta) var(--suave);
}
.s-link:hover { color: var(--acento); text-decoration-color: var(--acento); }
.s-link:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-offset); border-radius: var(--raio-s); }

/* ---------------------------------------------------------------------
   BOTÕES · primário (um por tela), secundário (vidro), link, ícone
   --------------------------------------------------------------------- */
.s-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--esp-8);
  min-height: var(--alvo-toque);
  padding: 0 var(--esp-24);
  border: var(--borda) solid transparent;
  border-radius: var(--raio-pilula);
  font-family: var(--fonte-texto);
  font-size: var(--t-pequeno);
  font-weight: var(--peso-forte);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-curta) var(--suave),
              background-color var(--dur-curta) var(--suave),
              border-color var(--dur-curta) var(--suave),
              color var(--dur-curta) var(--suave),
              box-shadow var(--dur-curta) var(--suave),
              filter var(--dur-curta) var(--suave);
}
.s-btn:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-offset); }
.s-btn:active { transform: translateY(var(--borda)); }
.s-btn[disabled], .s-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.s-btn > svg { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; }

.s-btn--primario {
  background: var(--cta-fundo);
  color: var(--cta-texto);
  box-shadow: var(--cta-sombra);
}
.s-btn--primario:hover { transform: translateY(calc(-1 * var(--borda))); filter: brightness(1.04); }

/* Secundário é vidro: a mesma receita dos painéis, em pílula */
.s-btn--secundario {
  background: var(--vidro);
  color: var(--texto);
  border-color: var(--vidro-borda);
  box-shadow: inset 0 var(--borda) 0 var(--vidro-luz);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
  backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
}
.s-btn--secundario:hover { background: var(--vidro-forte); border-color: var(--texto-3); }

.s-btn--link {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--texto-3);
  text-underline-offset: .2em;
}
.s-btn--link:hover { color: var(--acento); text-decoration-color: var(--acento); filter: none; transform: none; }
/* link em texto também tem 48px de alvo de toque; quebra linha quando longo */
.s-btn--link { min-height: var(--alvo-toque); padding-block: var(--esp-8); white-space: normal; text-align: center; }

.s-btn--icone { width: var(--alvo-toque); padding: 0; }

/* ---------------------------------------------------------------------
   PAINEL · o vidro. UMA receita: blur + saturação, borda hairline,
   linha de luz no topo, reflexo no canto, sombra longa.
   --------------------------------------------------------------------- */
.s-painel {
  position: relative;
  isolation: isolate;
  padding: var(--esp-24);
  border: var(--borda) solid var(--vidro-borda);
  border-radius: var(--raio-m);
  background: var(--vidro);
  color: var(--texto);
  box-shadow: var(--sombra-card);
  -webkit-backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
  backdrop-filter: blur(var(--vidro-blur)) saturate(var(--vidro-sat));
  overflow: hidden;
}
@media (min-width: 768px) { .s-painel { padding: var(--esp-32); } }
/* linha de luz no topo: o detalhe que separa vidro de "div cinza" */
.s-painel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: var(--borda);
  background: linear-gradient(90deg, transparent, var(--vidro-luz), transparent);
  pointer-events: none;
}
/* reflexo no canto superior esquerdo */
.s-painel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 70% at 0% 0%, var(--vidro-reflexo), transparent 60%);
  pointer-events: none;
  z-index: -1;
}
.s-painel--forte { background: var(--vidro-forte); }

/* Painel inteiro clicável: borda acende, nada mais */
a.s-painel, .s-painel--link {
  display: block;
  text-decoration: none;
  transition: border-color var(--dur-curta) var(--suave), transform var(--dur-curta) var(--suave);
}
a.s-painel:hover, .s-painel--link:hover { border-color: var(--texto-3); transform: translateY(calc(-1 * var(--esp-4) / 2)); }
a.s-painel:focus-visible, .s-painel--link:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-offset); }

.s-divisor {
  border: 0;
  border-top: var(--borda) solid var(--linha);
  margin-block: var(--esp-16);
}

/* ---------------------------------------------------------------------
   FOTO · pessoa de verdade, AO LADO do conteúdo, nunca atrás dele.
   Canto arredondado, borda de vidro, véu na base, legenda em painel.
   Máximo de uma por seção. Tratamento verde-petróleo obrigatório.
   --------------------------------------------------------------------- */
.s-foto {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border: var(--borda) solid var(--vidro-borda);
  border-radius: var(--raio-m);
  box-shadow: var(--sombra-card);
  background: var(--vidro-forte);
}
.s-foto--paisagem { aspect-ratio: 4 / 3; }
/* quando o rosto está na metade de baixo da foto original */
.s-foto--baixo > img { object-position: 50% 72%; }
.s-foto > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* véu na base: o texto da legenda sempre lê */
.s-foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--vidro-forte), transparent 45%);
  pointer-events: none;
}
.s-foto__legenda {
  position: absolute;
  z-index: var(--z-conteudo);
  left: var(--esp-16);
  right: var(--esp-16);
  bottom: var(--esp-16);
  padding: var(--esp-16);
}

/* ---------------------------------------------------------------------
   SELO · ícone de linha num tile de vidro fosco com placa deslocada.
   Desenhado no Figma ("Selos de vidro"); o ícone vem de assets/brand/selos/*.svg
   inline, com stroke currentColor. Sem cor no ícone: branco sobre vidro.
   --------------------------------------------------------------------- */
.s-selo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--alvo-toque);
  height: var(--alvo-toque);
  border-radius: var(--raio-s);
  color: var(--texto);
  background: color-mix(in srgb, var(--texto) 14%, transparent);
  border: var(--borda) solid color-mix(in srgb, var(--texto) 38%, transparent);
  box-shadow: inset 0 var(--borda) 0 var(--vidro-luz), var(--sombra-card);
  -webkit-backdrop-filter: blur(var(--vidro-blur));
  backdrop-filter: blur(var(--vidro-blur));
}
.s-selo::before {
  content: "";
  position: absolute;
  inset: var(--esp-8) calc(-1 * var(--esp-8)) calc(-1 * var(--esp-8)) var(--esp-8);
  border-radius: var(--raio-s);
  background: color-mix(in srgb, var(--texto) 7%, transparent);
  z-index: -1;
}
.s-selo > svg { width: 1.5rem; height: 1.5rem; }

/* Foto em card: 16:10, rosto no terço superior, selo sobrepondo o canto FORA do recorte */
.s-foto-card { position: relative; }
.s-foto-card__img { position: relative; overflow: hidden; border-radius: var(--raio-s); aspect-ratio: 16 / 10; }
.s-foto-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.s-foto-card__img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--vidro-forte), transparent 55%); pointer-events: none; }
.s-foto-card > .s-selo { position: absolute; right: var(--esp-12); bottom: calc(-1 * var(--esp-24)); z-index: var(--z-conteudo); }

/* Atalhos de produto: só quando a nav esconde os links (abaixo de 1024) */
.s-atalhos { display: none; flex-wrap: wrap; gap: var(--esp-8); justify-content: center; }
.s-atalhos .s-btn { min-height: var(--alvo-toque); padding-inline: var(--esp-16); font-size: var(--t-legenda); }
@media (max-width: 1023px) { .s-atalhos { display: flex; } }

/* Marca */
.s-marca { display: inline-flex; align-items: center; }
.s-marca__img { display: block; height: var(--marca-altura); width: auto; }
@media (max-width: 1023px) { .s-marca__img { height: var(--marca-altura-mobile); } }

/* ---------------------------------------------------------------------
   TAG · pílula pequena. "exemplo" em todo número fictício.
   --------------------------------------------------------------------- */
.s-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-4);
  padding: var(--esp-4) var(--esp-12);
  border-radius: var(--raio-pilula);
  background: color-mix(in srgb, var(--texto) 9%, transparent);
  color: var(--texto-2);
  font-family: var(--fonte-texto);
  font-size: var(--t-legenda);
  font-weight: var(--peso-forte);
  line-height: var(--lh-corpo);
  white-space: nowrap;
}
.s-tag--exemplo { background: var(--exemplo-suave); color: var(--exemplo-texto); }
.s-tag--acento  { background: color-mix(in srgb, var(--acento) 16%, transparent); color: var(--acento); }

/* Status vivo: ponto que respira (feed, "agente online") */
.s-status {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-8);
  font-family: var(--fonte-mono);
  font-size: var(--t-legenda);
  color: var(--texto-2);
}
.s-status::before {
  content: "";
  width: var(--esp-8);
  height: var(--esp-8);
  border-radius: var(--raio-pilula);
  background: var(--acento);
  box-shadow: var(--acento-brilho);
  animation: s-respira calc(var(--dur-media) * 6) var(--suave) infinite alternate;
}
@keyframes s-respira { from { opacity: .55; } to { opacity: 1; } }

/* ---------------------------------------------------------------------
   FORMULÁRIO · rótulo em caixa normal, campo em vidro forte
   --------------------------------------------------------------------- */
.s-campo { display: grid; gap: var(--esp-8); font-family: var(--fonte-texto); }
.s-campo__rotulo { font-size: var(--t-pequeno); font-weight: var(--peso-forte); color: var(--texto-2); }
.s-campo__input {
  width: 100%;
  min-height: var(--alvo-toque);
  padding: 0 var(--esp-16);
  border: var(--borda) solid var(--vidro-borda);
  border-radius: var(--raio-s);
  background: var(--vidro-forte);
  color: var(--texto);
  font: inherit;
  font-size: var(--t-corpo);
  line-height: var(--lh-corpo);
  transition: border-color var(--dur-curta) var(--suave);
}
textarea.s-campo__input { min-height: calc(var(--alvo-toque) * 2.5); padding-block: var(--esp-12); resize: vertical; }
.s-campo__input::placeholder { color: var(--texto-3); }
.s-campo__input:hover { border-color: var(--texto-3); }
.s-campo__input:focus-visible { outline: var(--foco-largura) solid var(--foco); outline-offset: var(--foco-offset); border-color: transparent; }
.s-campo__ajuda { font-size: var(--t-legenda); color: var(--texto-3); }
.s-campo__erro  { font-size: var(--t-legenda); color: var(--erro); }
.s-campo--erro .s-campo__input { border-color: var(--erro); }

/* ---------------------------------------------------------------------
   RITMO · por último de propósito: vence o "margin: 0" dos textos.
   --------------------------------------------------------------------- */
.s-cabecalho > * + * { margin-top: var(--esp-16); }
.s-painel > * + *    { margin-top: var(--esp-12); }
.s-pilha > * + *     { margin-top: var(--pilha, var(--esp-16)); }
.s-pilha--apertada   { --pilha: var(--esp-8); }
.s-pilha--larga      { --pilha: var(--esp-32); }

/* ---------------------------------------------------------------------
   UTILITÁRIOS
   --------------------------------------------------------------------- */
.s-oculto-visual {
  position: absolute;
  width: var(--borda);
  height: var(--borda);
  padding: 0;
  margin: calc(-1 * var(--borda));
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}