/* ==========================================================================
   components.css — componentes reutilizáveis

   Apenas o que é usado por mais de uma seção (ou é infraestrutura global).
   Estilos de uma seção só ficam em sections.css.
   Convenção de nomes: .bloco, .bloco__elemento, .bloco--modificador
   Media queries ESPECÍFICAS de um componente ficam junto dele; só regras
   responsivas globais vão para responsive.css.
   ========================================================================== */

/* --------------------------------------------------------------------
   .container
   Limita a largura do conteúdo e aplica as margens laterais.
   Dois eixos: 1200px (conteúdo) e --wide 1320px (painel largo de #competencias).
   -------------------------------------------------------------------- */
.container {
  width: min(100% - (var(--container-gutter) * 2), var(--container-max));
  margin-inline: auto;
}

.container--wide {
  width: min(100% - (var(--container-gutter) * 2), var(--container-wide));
  margin-inline: auto;
}

/* --------------------------------------------------------------------
   .section
   Base estrutural de toda seção. É um "container" de consulta (largura): os
   descendentes medem a largura REAL da seção com cqw, sem a barra de rolagem
   (100vw inclui a barra e desalinha o conteúdo em Windows/Linux).

   --container-inset: distância da borda da seção até a borda do .container.
   Use-a nos descendentes (nunca no próprio .section) para elementos que
   precisam alinhar ao eixo do container ou sangrar até a borda da tela.
   -------------------------------------------------------------------- */
.section {
  --container-inset: max(var(--container-gutter), calc((100cqw - var(--container-max)) / 2));

  container-type: inline-size;
}

/* --------------------------------------------------------------------
   Sistema de seções: LIGHT e DARK
   .section--light / .section--dark controlam seis valores (--section-bg, -text, -muted, -border, -surface, -accent);
   os papéis --color-* (usados por todos os componentes) os seguem. Não redefina --color-* seção a seção.
   .theme-light / .theme-dark fazem o mesmo SEM pintar o fundo (header, painéis, ilhas claras dentro de uma seção
   escura). .section--gradient aplica o degradê escuro padrão (ink → ink-2).
   -------------------------------------------------------------------- */
.section--light,
.theme-light,
.card--light {
  --section-bg: var(--brand-rose-50);
  --section-text: var(--brand-ink-2);
  --section-muted: var(--brand-ink-muted);
  --section-border: var(--hairline-light);
  --section-surface: var(--brand-white);
  --section-accent: var(--brand-magenta);
}

.section--dark,
.theme-dark,
.card--dark,
.card--accent {
  --section-bg: var(--brand-ink);
  --section-text: var(--brand-white);
  --section-muted: var(--color-on-dark-muted);
  --section-border: var(--hairline-dark);
  --section-surface: var(--brand-ink-2);
  --section-accent: var(--brand-magenta);
}

.section--light,
.theme-light,
.card--light,
.section--dark,
.theme-dark,
.card--dark,
.card--accent {
  --color-bg: var(--section-bg);
  --color-text: var(--section-text);
  --color-text-muted: var(--section-muted);
  --color-border: var(--section-border);
  --color-surface: var(--section-surface);
  --color-accent: var(--section-accent);

  color: var(--color-text);
}

.section--light,
.theme-light,
.card--light {
  --color-bg-alt: var(--brand-rose-100);
  --color-focus: var(--brand-magenta);
}

.section--dark,
.theme-dark,
.card--dark,
.card--accent {
  --color-bg-alt: var(--brand-ink-2);
  --color-focus: var(--color-on-dark-focus);
}

.section--light,
.section--dark {
  background-color: var(--section-bg);
}

.section--gradient {
  background-image: var(--gradient-dark);
}

/* --------------------------------------------------------------------
   Cards: três famílias. Layout (padding, grid, tamanho) fica na seção; superfície, borda, raio e sombra vêm daqui.
   .card--light   fundo branco, borda hairline, sombra mínima (--shadow-sm)
   .card--dark    fundo #1A171B, borda branca de baixa opacidade, sem sombra
   .card--accent  só quando indispensável: dark com tinta e borda de acento (hoje: a tese de #como-funciona)
   Modificadores: .card--tab (aba de acento no topo-esquerdo) e --card-radius (lg por padrão; xl em grandes painéis).
   Variáveis: --card-bg, --card-border, --card-shadow, --card-radius.
   -------------------------------------------------------------------- */
.card {
  --card-radius: var(--radius-lg);

  position: relative;
  border: var(--border-width) solid var(--card-border);
  border-radius: var(--card-radius);
  background-color: var(--card-bg);
  box-shadow: var(--card-shadow, none);
}

.card--light {
  --card-bg: var(--brand-white);
  --card-border: var(--hairline-light);
  --card-shadow: var(--shadow-sm);
}

.card--dark {
  --card-bg: var(--brand-ink-2);
  --card-border: var(--hairline-dark);
  --card-shadow: none;
}

.card--accent {
  --card-bg: rgb(var(--brand-magenta-rgb) / 0.1);
  --card-border: rgb(var(--brand-magenta-rgb) / 0.5);
  --card-shadow: none;
}

.card--tab::before {
  content: "";
  position: absolute;
  top: calc(var(--border-width) * -1);
  left: var(--space-5);
  z-index: 2;
  width: 3.5rem;
  height: 0.25rem;
  border-radius: 0 0 var(--radius-xs) var(--radius-xs);
  background-color: var(--brand-magenta);
}

/* --------------------------------------------------------------------
   .skip-link
   Primeiro elemento focável da página. Invisível até receber foco.
   -------------------------------------------------------------------- */
.skip-link {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-modal);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-decoration: none;
  color: var(--color-accent-contrast);
  background-color: var(--color-accent);
  transform: translateY(calc(-100% - var(--space-4)));
}

.skip-link:focus {
  transform: none;
}

/* --------------------------------------------------------------------
   .tag (= eyebrow)
   UMA anatomia: Inter Tight 600, 11–12 px, caixa alta, tracking moderado (0,06em), altura compacta (32 px), raio 10,
   marcador de acento (anel) à esquerda. A cor, a borda e o fundo seguem o tema da seção (--color-*): não há variantes
   por seção. Em contexto claro: fundo branco + hairline; em escuro: #1A171B + hairline branca.
   -------------------------------------------------------------------- */
.tag,
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding: 0.3rem 0.75rem;
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
  color: var(--color-text);
  background-color: var(--color-surface);
}

.tag__icon {
  width: 1em;
  height: auto;
  aspect-ratio: 1;
  flex-shrink: 0;
  color: var(--color-accent);
}

/* --------------------------------------------------------------------
   .ph — área reservada para imagem que ainda não existe
   Mantém proporção, tamanho e posição esperados. É sempre decorativa
   (aria-hidden); ao receber a foto real, trocar por <img> com alt.
   O rótulo segue a anatomia do eyebrow.
   -------------------------------------------------------------------- */
.ph {
  display: grid;
  place-items: center;
  padding: var(--space-3);
  border: var(--border-width) dashed var(--color-border);
  border-radius: inherit;
  font-size: var(--text-micro);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  line-height: 1.25;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
}

/* --------------------------------------------------------------------
   .reveal — entrada editorial ao rolar (UX motion)
   Variantes: .reveal-up (fade + 20 px), .reveal-fade (só fade), .reveal-scale-subtle (fade + escala 0,985).
   Anima só opacity e as propriedades individuais translate/scale/rotate (não mexem em layout nem colidem com o transform
   do elemento). O estado inicial só existe com <html class="js"> (marcado no <head> só onde há IntersectionObserver) e
   sem prefers-reduced-motion; sem JS, sem suporte ou com movimento reduzido o conteúdo já aparece pronto.
   O JS (initReveal, main.js) adiciona .is-visible uma única vez; não esconde de novo ao sair da tela.
   Atraso em sequência: --reveal-delay (o JS define por grupo, ver [data-reveal-group]).
   -------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transition:
      opacity var(--motion-enter) var(--ease-out) var(--reveal-delay, 0ms),
      translate var(--motion-enter) var(--ease-out) var(--reveal-delay, 0ms),
      scale var(--motion-enter) var(--ease-out) var(--reveal-delay, 0ms),
      rotate var(--motion-enter) var(--ease-out) var(--reveal-delay, 0ms);
  }

  .js .reveal-up {
    translate: 0 var(--reveal-distance);
  }

  .js .reveal-scale-subtle {
    scale: 0.985;
  }

  .js .reveal.is-visible {
    opacity: 1;
    translate: none;
    scale: none;
    rotate: none;
  }
}

/* --------------------------------------------------------------------
   .button
   Uso: <a class="button button--primary button--cta" href="...">
   UMA anatomia para todos os CTAs: fundo magenta, texto branco, Inter Tight 600, altura 52 px (celular) / 56 px
   (desktop), raio 16, rótulo à esquerda e seta em círculo branco à direita (sempre do mesmo tamanho e no mesmo
   lugar). O contexto dá o destaque (a Oferta), não um botão diferente. Compacto: .button--sm (44 px, header).
   Altura e corpo vêm de --cta-height / --cta-font (tokens).
   -------------------------------------------------------------------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--tap-target-min);
  padding: var(--space-3) var(--space-6);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: var(--font-weight-semibold);
  line-height: var(--line-height-snug);
  text-align: center;
  text-decoration: none;
  color: inherit;
  background-color: transparent;
  cursor: pointer;
  transition:
    color var(--motion-fast) var(--ease-soft),
    background-color var(--motion-fast) var(--ease-soft),
    border-color var(--motion-fast) var(--ease-soft),
    box-shadow var(--motion-fast) var(--ease-soft),
    transform var(--motion-fast) var(--ease-out);
}

.button:disabled,
.button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--primary {
  color: var(--color-accent-contrast);
  background-color: var(--brand-magenta);
  border-color: var(--brand-magenta);
}

.button--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
}

/* Microinteração dos botões: sobe 1 px com sombra discreta no hover (só mouse); o clique volta e assenta (.99). A seta já
   anda 3 px (.button__circle). Sem bounce, sem glow, sem escala grande. */
@media (prefers-reduced-motion: no-preference) {
  @media (hover: hover) and (pointer: fine) {
    .button--primary:hover {
      transform: translateY(-1px);
      box-shadow: 0 10px 20px -12px rgb(var(--brand-magenta-rgb) / 0.6);
    }
  }

  .button--primary:active {
    transform: translateY(0) scale(0.99);
    box-shadow: none;
  }
}

/* CTA: rótulo à esquerda e seta em círculo à direita */
.button--cta {
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--cta-height);
  padding: 0.25rem 0.375rem 0.25rem var(--space-5);
  border-radius: var(--radius-md);
  font-size: var(--cta-font);
  letter-spacing: var(--letter-spacing-normal);
}

.button--sm {
  --cta-height: var(--cta-height-sm);
  --cta-font: var(--text-small);
}

.button__circle {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: calc(var(--cta-height) * 0.7);
  aspect-ratio: 1;
  border-radius: 50%;
  color: var(--brand-ink-2);
  background-color: var(--brand-white);
}

.button__circle svg {
  width: 46%;
  height: auto;
  aspect-ratio: 1;
  transition: transform var(--motion-fast) var(--ease-out);
}

.button:hover .button__circle svg {
  transform: translateX(3px);
}

/* --------------------------------------------------------------------
   .visually-hidden
   Oculta visualmente, mas mantém o conteúdo acessível a leitores de tela.
   -------------------------------------------------------------------- */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}