/* Componentes de página: botões, link de texto, ícones, cartão, selo de exemplo. */

.ic {
  flex: none;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Contêiner padrão do ícone de conteúdo (mesma receita do .svc-icon do site institucional) */
.icone-box {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  color: var(--blue);
  background: var(--icon-bg);
  border: 1px solid var(--icon-line);
  border-radius: var(--r-icon);
}

/* ---------- Botões ---------- */
/* Pílula. A elevação do hover é transform + box-shadow (a sombra do próprio botão não é cortada pelo overflow: hidden dele,
   que existe só para a varredura de brilho). */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding-inline: 26px;
  overflow: hidden;
  isolation: isolate;
  border-radius: var(--r-pill);
  font-size: var(--fs-btn);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color 0.28s var(--ease), border-color 0.28s var(--ease), color 0.28s var(--ease), box-shadow 0.28s var(--ease), transform 0.28s var(--ease);
}

.btn .ic {
  width: 20px;
  height: 20px;
}

/* Rótulo à esquerda quando quebra em duas linhas: com o ícone ao lado o par fica coeso (centralizado, o texto boiava
   no meio do botão e o ícone parecia solto). Numa linha só o grupo ícone + rótulo continua centralizado pelo botão. */
.btn > span {
  text-align: left;
  text-wrap: balance;
}

.btn:active {
  transform: scale(0.98);
}

.btn--l {
  min-height: 56px;
  padding-inline: 28px;
  font-size: 1.0625rem;
}

.btn--s {
  min-height: 44px;
  padding-inline: 16px;
  font-size: 0.9375rem;
}

/* Cor sólida + véu claro no topo (constante, para o hover só trocar a cor de fundo). O ponto mais escuro continua sendo o
   próprio --blue, então o contraste do texto escuro (5,2:1) não muda. O brilho azul embaixo é o "glow" do CTA. */
.btn--primary {
  background-color: var(--blue);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0) 72%);
  color: var(--ink);
  box-shadow: var(--glow-cta);
}

/* Varredura diagonal de brilho: transform apenas, uma passada por hover/foco */
.btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(105deg, transparent 32%, rgba(255, 255, 255, 0.42) 50%, transparent 68%);
  transform: translateX(-110%);
}

.btn--primary:focus-visible::after {
  transform: translateX(110%);
  transition: transform 0.55s var(--ease);
}

.btn--varre::after {
  animation: varredura 0.55s var(--ease) 1.2s 1 both;
}

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid var(--field);
}

.btn--ghost .ic {
  transition: transform 0.2s var(--ease);
}

@media (hover: hover) {
  .btn--primary:hover {
    background-color: var(--blue-hi);
    box-shadow: var(--glow-cta-hover);
    transform: translateY(-2px);
  }

  .btn--primary:hover::after {
    transform: translateX(110%);
    transition: transform 0.55s var(--ease);
  }

  .btn--primary:hover:active {
    transform: scale(0.98);
  }

  .btn--ghost:hover {
    background-color: rgba(47, 123, 255, 0.1);
    border-color: var(--blue-hi);
    color: var(--blue-hi);
    transform: translateY(-2px);
  }

  .btn--ghost:hover .ic-baixo {
    transform: translateY(3px);
  }
}

/* Alto contraste do sistema descarta o fundo azul: o botão primário mantém uma borda visível */
@media (forced-colors: active) {
  .btn--primary {
    border: 1px solid ButtonText;
  }
}

/* ---------- Link de texto ---------- */
.link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  padding-block: 12px;
  color: var(--blue-hi);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 0.2s;
}

.link .ic {
  width: 18px;
  height: 18px;
}

@media (hover: hover) {
  .link:hover {
    color: var(--white);
    text-decoration-thickness: 2px;
  }
}

/* ---------- Cartão ---------- */
.card {
  padding: var(--sp-5);
  background: var(--s1);
  border: 1px solid var(--line);
  border-radius: var(--r-page);
  box-shadow: var(--sombra-card);
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), transform 0.3s var(--ease);
}

@media (hover: hover) {
  .card:hover {
    border-color: var(--line-2);
    box-shadow: var(--sombra-card-hover);
    transform: translateY(-3px);
  }
}

/* ---------- Selo de honestidade: sempre visível, nunca tooltip ---------- */
.tag-exemplo {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 4px 10px;
  border: 1px solid rgba(106, 160, 255, 0.45);
  border-radius: var(--r-pill);
  color: var(--blue-hi);
  font-size: var(--fs-tag);
  font-weight: 600;
  letter-spacing: 0.08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.tag-exemplo .ic {
  width: 12px;
  height: 12px;
}

/* O selo dos depoimentos é o rótulo de honestidade da seção inteira: 14 px em vez de 12. Os selos do hero (sobre foto)
   e da demonstração (mini) ficam como estão. */
.tag-exemplo--lg {
  padding: 5px 12px;
  font-size: 0.875rem;
  letter-spacing: 0.06em;
}

.tag-exemplo--lg .ic {
  width: 14px;
  height: 14px;
}

/* Receita "noturno azul": um único tratamento para as fotos de ambiente (nichos, dores, capas da demonstração). As duas
   camadas de cor ficam DENTRO do <picture>, que por ter filter forma o próprio contexto de empilhamento e o bloco de
   contenção dos pseudo-elementos: nenhuma regra de z-index do tile ou do texto muda. Botões por foto (variáveis):
   --tom-b brilho · --tom-s saturação · --hue matiz (graus) · --luz luz azul do canto superior direito ·
   --lift quanto o preto sobe para azul-marinho · --grao 0 desliga o grão. */
.foto-azul picture {
  display: block;
  filter: brightness(var(--tom-b, 1)) saturate(var(--tom-s, 0.92)) contrast(1.06) hue-rotate(var(--hue, 0deg));
}

/* Seguro contra falha: sem mix-blend-mode a camada azul-marinho em mistura normal cobriria a foto inteira */
@supports (mix-blend-mode: screen) {
  .foto-azul picture::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
      radial-gradient(80% 55% at 100% 0%, rgba(47, 123, 255, var(--luz, 0.28)), transparent 70%),
      rgba(5, 11, 30, var(--lift, 1));
    mix-blend-mode: screen;
  }

  /* Grão fino: tile de 160 px repetido, sem canvas e sem JS */
  .foto-azul picture::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: var(--grao, 1);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g' color-interpolation-filters='sRGB' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .62 0 0 0 0 .75 0 0 0 0 1 .24 0 0 0 -.07'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 160px 160px;
    mix-blend-mode: screen;
  }

  /* Foto que falhou (imagens.js marca .is-missing): sem imagem, o azul-marinho e o grão cobririam o fallback gráfico */
  .foto-azul.is-missing picture::before,
  .foto-azul.is-missing picture::after {
    display: none;
  }
}

/* Fallback gráfico por slot de imagem (imagens.js marca .is-missing): brilho azul e grade de pontos, sem ícone quebrado */
[data-slot].is-missing img {
  visibility: hidden;
}

.nicho-tile.is-missing,
.capa.is-missing,
.dores__foto.is-missing {
  background:
    radial-gradient(circle at 80% 12%, rgba(47, 123, 255, 0.35), transparent 55%),
    radial-gradient(circle, rgba(106, 160, 255, 0.35) 0 1px, transparent 1.5px) 0 0 / 22px 22px,
    linear-gradient(160deg, var(--s2), var(--bg));
}

/* .cantos: antes eram marcas de canto retas (hud-corners), duras demais para o visual macio. Agora marca só os 3 painéis
   de destaque (aviso da demonstração, citação grande e CTA final), que viram cartões arredondados com um véu azul no
   canto superior direito. O acabamento de cada um está no CSS da própria seção. */
.cantos {
  position: relative;
  border-radius: var(--r-page);
  box-shadow: var(--sombra-card);
}