/* =========================================================================
   COMPONENTES
   =========================================================================
   Cada componente aqui consome APENAS tokens semânticos (--color-*,
   --space-*, --text-*...). Não existe valor cru neste arquivo — se você
   precisou de um, o lugar dele é em tokens.css.

   Índice:
     1. Botão
     2. Link com seta
     3. Eyebrow e badge
     4. Card (base, serviço, métrica, perfil)
     5. Processo numerado
     6. Citação
     7. Navegação
     8. Formulário
     9. Accordion (FAQ)
    10. Rodapé
    11. Logo
    12. Marcador de conteúdo pendente
   ========================================================================= */


/* =========================================================================
   1. BOTÃO
   ========================================================================= */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);

  height: var(--button-height-md);
  padding: var(--button-padding-md);

  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: var(--tracking-normal);
  text-decoration: none;
  white-space: nowrap;

  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;

  transition: background-color var(--duration-fast) var(--ease-out),
              border-color   var(--duration-fast) var(--ease-out),
              color          var(--duration-fast) var(--ease-out);
}

.btn:disabled,
.btn[aria-disabled="true"] {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Primário — a ação principal. Uma por tela, no máximo duas. */
.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}

.btn--primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--color-on-primary);
}

.btn--primary:active {
  background-color: var(--color-primary-active);
  border-color: var(--color-primary-active);
}

/* Secundário — a alternativa legítima ao lado da primária. */
.btn--secondary {
  background-color: transparent;
  color: var(--color-text);
  border-color: var(--color-border-control);
}

.btn--secondary:hover {
  background-color: var(--color-bg-subtle);
  border-color: var(--color-text);
  color: var(--color-text);
}

/* Fantasma — ações de menor peso, dentro de card ou barra. */
.btn--ghost {
  background-color: transparent;
  color: var(--color-text);
  border-color: transparent;
  padding-inline: var(--space-4);
}

.btn--ghost:hover {
  background-color: var(--color-bg-muted);
  color: var(--color-text);
}

/* Acento — reservado ao CTA de conversão final. Usar com parcimônia. */
.btn--accent {
  background-color: var(--color-accent);
  color: var(--color-on-primary);
  border-color: var(--color-accent);
}

.btn--accent:hover {
  background-color: var(--color-accent-text);
  border-color: var(--color-accent-text);
  color: var(--color-on-primary);
}

/* Variantes para uso sobre fundo escuro. */
.btn--inverse {
  background-color: var(--color-bg);
  color: var(--color-primary);
  border-color: var(--color-bg);
}

.btn--inverse:hover {
  background-color: var(--color-surface-inverse-hover);
  border-color: var(--color-surface-inverse-hover);
  color: var(--color-primary);
}

.btn--outline-inverse {
  background-color: transparent;
  color: var(--color-text-inverse);
  border-color: var(--color-border-inverse);
}

.btn--outline-inverse:hover {
  background-color: var(--color-overlay-inverse-hover);
  border-color: var(--color-text-inverse);
  color: var(--color-text-inverse);
}

/* Tamanhos */
.btn--lg {
  height: var(--button-height-lg);
  padding: var(--button-padding-lg);
  font-size: var(--text-base);
}

.btn--block {
  display: flex;
  width: 100%;
}


/* =========================================================================
   2. LINK COM SETA — o "saiba mais" institucional
   ========================================================================= */

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-accent-text);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--duration-base) var(--ease-out);
}

.link-arrow:hover {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

.link-arrow:hover::after {
  transform: translateX(var(--space-1));
}

.section--inverse .link-arrow {
  color: var(--color-accent-on-dark);
}

.section--inverse .link-arrow:hover {
  color: var(--color-text-inverse);
}


/* =========================================================================
   3. EYEBROW E BADGE
   ========================================================================= */

/* Eyebrow — o rótulo em caixa alta que abre cada seção. */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);

  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-text);
}

/* O traço curto antes do rótulo. */
.eyebrow::before {
  content: "";
  width: var(--space-6);
  height: var(--border-width-thick);
  background-color: var(--color-accent);
  flex-shrink: 0;
}

.section-header--center .eyebrow {
  justify-content: center;
}

.section--inverse .eyebrow {
  color: var(--color-accent-on-dark);
}

.section--inverse .eyebrow::before {
  background-color: var(--color-accent-on-dark);
}

/* Badge — rótulo compacto dentro de card ou lista. */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);

  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);

  background-color: var(--color-bg-muted);
  color: var(--color-text-muted);
  border-radius: var(--radius-full);
}

.badge--accent {
  background-color: var(--color-accent-subtle);
  color: var(--color-accent-text); /* bronze-700: 6.31:1 sobre bronze-100 */
}

.badge--success { background-color: var(--color-success-bg); color: var(--color-success); }
.badge--warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.badge--danger  { background-color: var(--color-danger-bg);  color: var(--color-danger);  }


/* =========================================================================
   4. CARD
   ========================================================================= */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);

  background-color: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);

  transition: border-color var(--duration-base) var(--ease-out),
              box-shadow   var(--duration-base) var(--ease-out);
}

.card > * + * {
  margin-top: var(--space-4);
}

/* Só cards clicáveis reagem ao mouse. Card estático que muda no hover
   promete uma interação que não existe. */
.card--interactive:hover {
  border-color: var(--color-border-strong);
  box-shadow: var(--shadow-md);
}

.card--subtle {
  background-color: var(--color-bg-subtle);
  border-color: transparent;
}

.card--inverse {
  background-color: var(--color-bg-inverse);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}

.card__title {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.card__text {
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* Empurra o rodapé do card para a base — alinha os CTAs de cards
   de alturas diferentes na mesma linha do grid. */
.card__footer {
  margin-top: auto;
  padding-top: var(--space-6);
}

/* Marcador numérico no topo do card de serviço. */
.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-subtle);
}

/* Lista de entregáveis dentro do card. */
.card__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.card__list li {
  position: relative;
  padding-left: var(--space-6);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
  margin-top: 0;
}

.card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: var(--space-3);
  height: var(--border-width);
  background-color: var(--color-accent);
}

/* ---- Card de métrica --------------------------------------------------- */

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.metric__value {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  font-weight: var(--weight-semibold);
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--color-text);
}

.metric__label {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-normal);
}

.section--inverse .metric__value { color: var(--color-text-inverse); }
.section--inverse .metric__label { color: var(--color-text-inverse-muted); }

/* ---- Card de perfil (para quem) ---------------------------------------- */

.profile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6) 0;
  border-top: var(--border-width) solid var(--color-border);
}

.profile__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
}

.profile__text {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}


/* =========================================================================
   5. PROCESSO NUMERADO
   ========================================================================= */

.process {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-10);
  counter-reset: etapa;
}

@media (min-width: 768px) {
  .process {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gutter);
  }
}

.process__step {
  position: relative;
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border-inverse);
  margin-top: 0;
  counter-increment: etapa;
}

/* Fora de seção escura, a régua usa a borda clara. */
.section:not(.section--inverse) .process__step {
  border-top-color: var(--color-border);
}

.process__step::before {
  content: counter(etapa, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-4);

  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  color: var(--color-accent-on-dark);
}

.section:not(.section--inverse) .process__step::before {
  color: var(--color-accent-text);
}

.process__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--space-3);
}

.process__text {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

.section:not(.section--inverse) .process__text {
  color: var(--color-text-muted);
}


/* =========================================================================
   6. CITAÇÃO
   ========================================================================= */

.quote {
  border-left: var(--border-width-thick) solid var(--color-accent);
  padding-left: var(--space-6);
}

.quote__text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-style: italic;
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.quote__author {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* =========================================================================
   7. NAVEGAÇÃO
   ========================================================================= */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;

  height: var(--nav-height);
  background-color: var(--nav-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: var(--border-width) solid transparent;

  transition: background-color var(--duration-base) var(--ease-out),
              border-color     var(--duration-base) var(--ease-out);
}

/* Estado após a rolagem: a barra se destaca do conteúdo. */
.nav.is-scrolled {
  background-color: var(--nav-bg-scrolled);
  border-bottom-color: var(--color-border);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-8);
  height: 100%;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__links li {
  margin-top: 0;
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
  text-decoration: none;
  padding-block: var(--space-2);
  transition: color var(--duration-fast) var(--ease-out);
}

.nav__link:hover {
  color: var(--color-text);
}

/* Compensa a nav fixa: o conteúdo começa abaixo dela. */
.page-body {
  padding-top: var(--nav-height);
}

/* No mobile os links viram uma faixa rolável de âncoras, logo abaixo da
   barra — resolve a navegação sem JavaScript nem menu hambúrguer. */
@media (max-width: 899px) {
  .nav__links {
    display: none;
  }

  .nav-anchors {
    position: sticky;
    top: var(--nav-height);
    z-index: 90;

    display: flex;
    gap: var(--space-5);
    overflow-x: auto;
    scrollbar-width: none;

    padding: var(--space-3) var(--gutter);
    background-color: var(--color-bg);
    border-bottom: var(--border-width) solid var(--color-border);
  }

  .nav-anchors::-webkit-scrollbar {
    display: none;
  }

  .nav-anchors a {
    flex-shrink: 0;
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--color-text-muted);
    text-decoration: none;
    white-space: nowrap;
  }
}

@media (min-width: 900px) {
  .nav-anchors {
    display: none;
  }
}


/* =========================================================================
   8. FORMULÁRIO
   ========================================================================= */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.field__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--color-text);
}

/* Marca o campo obrigatório sem depender só da cor. */
.section--inverse .field__label {
  color: var(--color-text-inverse);
}

.section--inverse .field__label[data-required]::after {
  color: var(--color-accent-on-dark);
}

.field__label[data-required]::after {
  content: " *";
  color: var(--color-accent-text);
}

.field__control {
  width: 100%;
  min-height: var(--input-height);
  padding: var(--space-3) var(--space-4);

  font-size: var(--text-base);
  color: var(--color-text);
  background-color: var(--color-surface);

  /* Borda de controle: >= 3:1 sobre branco, exigência do WCAG 1.4.11 */
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);

  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow   var(--duration-fast) var(--ease-out);
}

.field__control::placeholder {
  color: var(--color-text-subtle);
}

.field__control:hover {
  border-color: var(--color-text-muted);
}

.field__control:focus {
  outline: none;
  border-color: var(--color-focus);
  box-shadow: var(--focus-ring);
}

.field__control:disabled {
  background-color: var(--color-bg-muted);
  color: var(--color-text-subtle);
  cursor: not-allowed;
}

textarea.field__control {
  min-height: calc(var(--input-height) * 2.5);
  line-height: var(--leading-normal);
}

select.field__control {
  appearance: none;
  /* Seta desenhada com gradiente para não depender de imagem externa. */
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    calc(100% - var(--space-5)) calc(50% + 2px),
    calc(100% - var(--space-4)) calc(50% + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: var(--space-10);
}

.field__help {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.section--inverse .field__help {
  color: var(--color-text-inverse-muted);
}

.field__error {
  font-size: var(--text-sm);
  color: var(--color-danger);
}

/* O erro é sinalizado por borda + texto, nunca só por cor. */
.field__control[aria-invalid="true"] {
  border-color: var(--color-danger);
  border-width: var(--border-width-thick);
}

.form-note {
  margin-top: var(--space-4);
}

/* Mensagem de falha do envio. Fica ao lado da nota, abaixo do botão. */
.form-error {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
}

.form-error a {
  color: var(--color-danger);
}

/* Substitui o formulário depois do envio bem-sucedido. */
.form-success {
  padding: var(--space-10) var(--space-8);
  border: var(--border-width) solid var(--color-accent-on-dark);
  border-radius: var(--radius-md);
}

.form-success:focus-visible {
  outline-offset: var(--space-2);
}

.form-success__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text-inverse);
  margin-bottom: var(--space-4);
}

.form-success__text {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

/* Fora da tela por posição, e não por display:none — um iframe com
   display:none não é destino de envio confiável em todo navegador. */
.form-target {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
}

/* Campo-armadilha de spam: some da tela e da ordem de leitura.
   Mesma técnica de ocultação do .sr-only em base.css. */
.honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.form-grid {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 640px) {
  .form-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-grid__full {
    grid-column: 1 / -1;
  }
}


/* =========================================================================
   9. ACCORDION (FAQ) — <details> nativo, zero JavaScript
   ========================================================================= */

.faq {
  border-top: var(--border-width) solid var(--color-border);
}

.faq__item {
  border-bottom: var(--border-width) solid var(--color-border);
}

.faq__question {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-6);

  padding-block: var(--space-6);
  cursor: pointer;
  list-style: none;

  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  color: var(--color-text);

  transition: color var(--duration-fast) var(--ease-out);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__question:hover {
  color: var(--color-accent-text);
}

/* Sinal de + que vira − quando aberto. */
.faq__question::after {
  content: "+";
  flex-shrink: 0;
  font-family: var(--font-body);
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  line-height: 1;
  color: var(--color-accent);
  transition: transform var(--duration-base) var(--ease-out);
}

.faq__item[open] .faq__question::after {
  content: "−";
}

.faq__answer {
  padding-bottom: var(--space-6);
  max-width: var(--container-text);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

.faq__answer > p + p {
  margin-top: var(--space-4);
}


/* =========================================================================
   10. RODAPÉ
   ========================================================================= */

.footer {
  background-color: var(--color-bg-inverse-2);
  color: var(--color-text-inverse);
  padding-block: var(--space-20) var(--space-10);
}

.footer a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
}

.footer a:hover {
  color: var(--color-text-inverse);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.footer__grid {
  display: grid;
  gap: var(--space-10);
}

@media (min-width: 768px) {
  .footer__grid {
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--gutter);
  }
}

.footer__heading {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-accent-on-dark);
  margin-bottom: var(--space-5);
}

.footer__list {
  list-style: none;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.footer__list li {
  margin-top: 0;
  font-size: var(--text-sm);
}

.footer__bottom {
  margin-top: var(--space-16);
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--color-border-inverse);
}

/* Aviso legal — obrigatório neste setor, e por isso um componente,
   não um parágrafo solto que alguém apaga por engano. */
.disclaimer {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  color: var(--color-text-inverse-muted);
}

/* O bloco legal do rodapé corre na largura inteira da página. Em telas
   largas isso passaria de 180 caracteres por linha, então o texto se
   divide em colunas: ocupa toda a extensão e continua legível.
   Sem justificar e sem hifenizar — o Chrome não tem padrão de separação
   silábica confiável para português e quebrava "mobiliári-os". */
.footer__bottom .disclaimer {
  column-gap: var(--space-12);
}

@media (min-width: 768px) {
  .footer__bottom .disclaimer { column-count: 2; }
}

@media (min-width: 1100px) {
  .footer__bottom .disclaimer { column-count: 3; }
}

.footer__legal {
  margin-top: var(--space-8);
  font-size: var(--text-xs);
  color: var(--color-text-inverse-muted);
}


/* =========================================================================
   11. LOGO
   ========================================================================= */

.logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  color: var(--color-text);
}

.logo__mark {
  flex-shrink: 0;
}

.logo__text {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
}

.logo__text em {
  font-style: normal;
  font-weight: var(--weight-regular);
}

.logo--inverse,
.footer .logo {
  color: var(--color-text-inverse);
}


/* =========================================================================
   12. MARCADOR DE CONTEÚDO PENDENTE
   =========================================================================
   Todo dado que a Opes ainda precisa fornecer entra com esta marcação.
   É visível de propósito: número de captação inventado em site de
   mercado de capitais é informação enganosa, não "placeholder".
   Some da página no dia em que o dado real substituir o marcador.
   ========================================================================= */

.pendente {
  display: inline-block;
  padding: var(--space-1) var(--space-2);

  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-style: normal;
  letter-spacing: var(--tracking-normal);
  text-transform: none;

  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  border: var(--border-width) dashed var(--color-warning);
  border-radius: var(--radius-sm);
}