/* ============================================================================
   COMPONENTE.CSS — ANALIST.COM
   Sistema de Componentes Brutalista
   
   DEPENDÊNCIAS (nessa ordem):
   base.css → design-tones.css → layout.css → animate.css → este arquivo
   
   FILOSOFIA:
   Componentes não têm border-radius (brutalismo).
   Cada componente é um container query — responde ao seu contexto.
   Animações usam os tokens de animate.css — nenhuma duplicação.
   Um único sistema de botão (.btn) — zero .cta-button paralelo.
   
   @layer components já declarado nos arquivos anteriores.
   Este arquivo popula essa layer.
   ============================================================================ */

@layer reset, tokens, base, brand, themes, atmosphere,
       layout, navigation, hero, patterns, components,
       motion-tokens, keyframes, scroll-driven, entrance,
       microinteraction, motion-components, states, utilities,
       overrides, reduced-motion;


/* ─────────────────────────────────────────────────
   COMPONENTES: índice
   
   1.  Botões          (.btn e variantes)
   2.  Service Cards   (.service-card)
   3.  Feature Card    (.feature-card)
   4.  Stat Card       (.stat-card)
   5.  Testimonial     (.testimonial)
   6.  Formulários     (.form__*)
   7.  Social Links    (.social-link)
   8.  Badge / Tag     (.badge)
   9.  Tooltip         (.tooltip)
   10. Accordion       (.accordion)
   11. Tabs            (.tabs)
   12. Avatar          (.avatar)
   13. Alert           (.alert)
   14. Divider         (.divider)
───────────────────────────────────────────────── */


/* ─────────────────────────────────────────────────
   1. BOTÕES
   
   Sistema único — .btn no layout.css é a base.
   Aqui: variantes semânticas, ícones e estados.
   Zero duplicação com .cta-button.
───────────────────────────────────────────────── */
@layer components {

  /* O .btn base já está em layout.css.
     Aqui apenas ESTENDEMOS com variantes específicas
     da analist.com que não existiam. */

  /* ── CTA DESTAQUE ────────────────────────────── */
  /* O substituto direto do .cta-button original.
     Não é um componente novo — é o .btn--primary
     com contexto visual adicional. */
  .btn--cta {
    font-size: var(--text-sm);
    padding: var(--space-4) var(--space-10);
    min-block-size: 56px;
    box-shadow: var(--shadow-brand-lg);
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    position: relative;
  }

  /* Linha de acento no hover — via clip-path, não left slide */
  .btn--cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--brand-accent);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--transition-snap);
    pointer-events: none;
  }

  .btn--cta:hover::before {
    clip-path: inset(0 0% 0 0);
  }

  .btn--cta:hover {
    color: var(--paper);
    transform: translate(6px, 6px);
    box-shadow: none;
  }

  /* ── BTN COM ÍCONE ───────────────────────────── */
  .btn .btn__icon {
    flex-shrink: 0;
    transition: translate var(--transition-snap);
  }

  .btn:hover .btn__icon--arrow {
    translate: 4px 0;
  }

  .btn:hover .btn__icon--external {
    translate: 3px -3px;
  }

  /* ── BTN LOADING ─────────────────────────────── */
  .btn[aria-busy="true"] {
    pointer-events: none;
    opacity: 0.7;
    cursor: wait;
  }

  .btn[aria-busy="true"]::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    border: var(--border-width-base) solid currentColor;
    border-block-start-color: transparent;
    border-radius: var(--radius-full);
    animation: spin var(--duration-crawl) var(--ease-linear) infinite;
    margin-inline-start: var(--space-2);
  }

  /* ── BTN GROUP ───────────────────────────────── */
  .btn-group {
    display: inline-flex;
    /* Botões adjacentes compartilham borda */
  }

  .btn-group .btn {
    border-inline-end-width: 0;
  }

  .btn-group .btn:last-child {
    border-inline-end-width: var(--border-width-brutal);
  }

  .btn-group .btn:hover {
    /* No grupo, sem deslocamento — apenas cor */
    transform: none;
    box-shadow: none;
    background: var(--mark);
  }


  /* ─────────────────────────────────────────────────
     2. SERVICE CARDS
     
     Container query: responde ao grid que o contém,
     não à viewport. Funciona em sidebar ou full-width.
  ───────────────────────────────────────────────── */

  .service-card {
    background: var(--surface-secondary);
    border: var(--border-width-brutal) solid var(--border-default);
    padding: var(--space-8);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: grid;
    grid-template-rows: auto auto 1fr auto;  /* número, título, desc, rodapé */
    gap: var(--space-4);
    container-type: inline-size;
    container-name: service-card;

    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap),
      border-color var(--transition-snap),
      background-color var(--transition-snap);
  }

  .service-card:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-brand-lg);
    border-color: var(--ink);
    background-color: var(--surface-bg);
  }

  /* Linha de acento no topo — wipe de clip-path */
  .service-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--border-width-brutal);
    background: var(--brand-accent);
    clip-path: inset(0 100% 0 0);
    transition: clip-path var(--transition-snap);
  }

  .service-card:hover::before {
    clip-path: inset(0 0% 0 0);
  }

  /* Número de ordem */
  .service-card__number {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    color: color-mix(in srgb, var(--ink) 12%, var(--paper));
    letter-spacing: var(--tracking-tightest);
    transition: color var(--transition-snap);
  }

  .service-card:hover .service-card__number {
    color: color-mix(in srgb, var(--brand-accent) 20%, var(--paper));
  }

  /* Ícone */
  .service-card__icon {
    font-size: var(--text-2xl);
    color: var(--text-muted);
    display: inline-block;
    line-height: 1;
    transition: color var(--transition-snap);
  }

  .service-card:hover .service-card__icon {
    color: var(--brand-accent);
  }

  /* Título */
  .service-card__title {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin: 0;
    position: relative;
    padding-block-end: var(--space-4);
  }

  /* Linha abaixo do título — cresce no hover */
  .service-card__title::after {
    content: '';
    display: block;
    position: absolute;
    inset-block-end: 0;
    inset-inline-start: 0;
    block-size: var(--border-width-brutal);
    inline-size: var(--space-8);
    background: var(--border-default);
    transition: inline-size var(--transition-snap), background-color var(--transition-snap);
  }

  .service-card:hover .service-card__title::after {
    inline-size: 100%;
    background: var(--brand-accent);
  }

  /* Preço — dados com fonte tabular */
  .service-card__price {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  /* Destaque de preço — sem gradiente genérico */
  .service-card__price strong {
    color: var(--brand-accent);
  }

  /* Descrição */
  .service-card__description {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    margin: 0;
    max-width: 100%;
  }

  /* Lista de features */
  .service-card__features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
  }

  .service-card__features li {
    font-size: var(--text-sm);
    color: var(--text-muted);
    padding-inline-start: var(--space-5);
    position: relative;
    line-height: var(--leading-snug);
    transition: color var(--transition-snap);
  }

  /* Marcador: → ao invés de ✓ — mais brutalista */
  .service-card__features li::before {
    content: '→';
    position: absolute;
    inset-inline-start: 0;
    color: var(--brand-accent);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    line-height: 1;
    top: 0.1em;
    transition: translate var(--transition-snap);
  }

  .service-card:hover .service-card__features li {
    color: var(--text-primary);
  }

  .service-card:hover .service-card__features li::before {
    translate: 3px 0;
  }

  /* Rodapé do card */
  .service-card__footer {
    padding-block-start: var(--space-6);
    border-block-start: var(--border-width-thin) solid var(--border-default);
    margin-block-start: auto;
    transition: border-color var(--transition-snap);
  }

  .service-card:hover .service-card__footer {
    border-block-start-color: var(--brand-accent);
  }

  /* Variante em destaque */
  .service-card--featured {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--paper);
  }

  .service-card--featured::before {
    clip-path: inset(0 0% 0 0); /* linha sempre visível */
    background: var(--brand-accent);
  }

  .service-card--featured .service-card__number { color: color-mix(in srgb, var(--paper) 15%, var(--ink)); }
  .service-card--featured .service-card__title  { color: var(--paper); }
  .service-card--featured .service-card__price  { color: var(--paper); }
  .service-card--featured .service-card__price strong { color: var(--signal); }
  .service-card--featured .service-card__description { color: color-mix(in srgb, var(--paper) 65%, var(--ink)); }
  .service-card--featured .service-card__features li { color: color-mix(in srgb, var(--paper) 65%, var(--ink)); }
  .service-card--featured .service-card__footer { border-block-start-color: color-mix(in srgb, var(--paper) 20%, var(--ink)); }

  .service-card--featured:hover {
    transform: translate(-3px, -3px);
    box-shadow: var(--shadow-brand-lg);
    background: var(--ink); /* mantém fundo escuro */
  }

  /* Container query — ajustes quando o card é estreito */
  @container service-card (max-width: 280px) {
    .service-card__title { font-size: var(--text-xl); }
    .service-card { padding: var(--space-6); }
  }


  /* ─────────────────────────────────────────────────
     3. FEATURE CARD
     
     Card editorial: texto à esquerda, dado à direita.
  ───────────────────────────────────────────────── */

  .feature-card {
    border: var(--border-width-brutal) solid var(--border-default);
    display: grid;
    grid-template-columns: 1fr;
    container-type: inline-size;
    container-name: feature-card;
    transition:
      border-color var(--transition-snap),
      box-shadow var(--transition-snap);
  }

  .feature-card:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
  }

  .feature-card__visual {
    background: var(--void);
    aspect-ratio: 16 / 9;
    overflow: hidden;
    position: relative;
    border-block-end: var(--border-width-brutal) solid var(--border-default);
  }

  .feature-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: contrast(1.1) saturate(0.9);
    transition: transform var(--duration-slow) var(--ease-heavy);
  }

  .feature-card:hover .feature-card__visual img {
    transform: scale(1.04);
  }

  .feature-card__body {
    padding: var(--space-8);
  }

  .feature-card__tag {
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--brand-accent);
    margin-block-end: var(--space-4);
    display: block;
  }

  .feature-card__title {
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tighter);
    color: var(--ink);
    margin-block-end: var(--space-4);
  }

  .feature-card__excerpt {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    max-width: 60ch;
  }

  /* Layout horizontal quando tem espaço */
  @container feature-card (min-width: 600px) {
    .feature-card {
      grid-template-columns: 1fr 1fr;
    }

    .feature-card__visual {
      border-block-end: none;
      border-inline-end: var(--border-width-brutal) solid var(--border-default);
      aspect-ratio: auto;
    }
  }


  /* ─────────────────────────────────────────────────
     4. STAT CARD
     
     Número grande. Dado como protagonista.
  ───────────────────────────────────────────────── */

  .stat-card {
    border: var(--border-width-brutal) solid var(--border-default);
    padding: var(--space-8);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    container-type: inline-size;
    container-name: stat-card;
    background: var(--surface-secondary);
    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap),
      border-color var(--transition-snap);
  }

  .stat-card:hover {
    transform: translate(-2px, -2px);
    box-shadow: var(--shadow-brand);
    border-color: var(--ink);
  }

  /* Linha de cor no topo — indica tipo de dado */
  .stat-card::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: var(--border-width-brutal);
    background: var(--stat-color, var(--brand-accent));
  }

  .stat-card--positive { --stat-color: var(--status-positive); }
  .stat-card--negative { --stat-color: var(--status-negative); }
  .stat-card--neutral  { --stat-color: var(--border-default); }
  .stat-card--warning  { --stat-color: var(--status-warning); }

  .stat-card__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    order: -1;
  }

  .stat-card__value {
    font-family: var(--font-display);
    font-size: var(--text-kpi);
    line-height: var(--leading-none);
    letter-spacing: var(--tracking-tightest);
    color: var(--ink);
    font-variant-numeric: tabular-nums;
  }

  .stat-card__delta {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: var(--border-width-thin) solid currentColor;
  }

  .stat-card__delta--up {
    color: var(--status-positive);
    background: var(--status-positive-bg);
  }

  .stat-card__delta--down {
    color: var(--status-negative);
    background: var(--status-negative-bg);
  }

  .stat-card__context {
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: var(--leading-snug);
  }

  /* Container query — vertical quando estreito */
  @container stat-card (min-width: 300px) {
    .stat-card {
      flex-direction: row;
      align-items: center;
      flex-wrap: wrap;
      gap: var(--space-4);
    }

    .stat-card__value { flex: 1; }
    .stat-card__label { order: 0; width: 100%; }
  }


  /* ─────────────────────────────────────────────────
     5. TESTIMONIAL
     
     Citação editorial com autoridade.
  ───────────────────────────────────────────────── */

  .testimonial {
    border: var(--border-width-brutal) solid var(--border-default);
    padding: var(--space-10) var(--space-10) var(--space-8);
    position: relative;
    container-type: inline-size;
    container-name: testimonial;
    background: var(--surface-secondary);
    transition:
      border-color var(--transition-snap),
      box-shadow var(--transition-snap);
  }

  .testimonial:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
  }

  /* Aspas decorativas */
  .testimonial::before {
    content: '\201C';
    position: absolute;
    inset-block-start: -0.15em;
    inset-inline-start: var(--space-6);
    font-family: var(--font-display);
    font-size: var(--text-6xl);
    line-height: 1;
    color: var(--brand-accent);
    pointer-events: none;
  }

  .testimonial__quote {
    font-family: var(--font-editorial);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    font-style: italic;
    color: var(--ink);
    margin: 0 0 var(--space-8) 0;
    max-width: 100%;
  }

  .testimonial__footer {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block-start: var(--space-6);
    border-block-start: var(--border-width-thin) solid var(--border-default);
  }

  .testimonial__avatar {
    width: var(--space-12);
    height: var(--space-12);
    flex-shrink: 0;
    border: var(--border-width-brutal) solid var(--border-default);
    overflow: hidden;
    /* Sem border-radius — brutalismo */
  }

  .testimonial__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8);
    transition: filter var(--transition-snap);
  }

  .testimonial:hover .testimonial__avatar img {
    filter: saturate(1);
  }

  .testimonial__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    line-height: var(--leading-none);
    margin-block-end: var(--space-1);
  }

  .testimonial__role {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    color: var(--text-muted);
  }


  /* ─────────────────────────────────────────────────
     6. FORMULÁRIOS
     
     Campos brutalistas: bordas fortes, sem radius,
     feedback visual explícito.
  ───────────────────────────────────────────────── */

  .form {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
  }

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

  .form__label {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    color: var(--text-primary);
    cursor: pointer;
  }

  /* Indicador de obrigatório */
  .form__label--required::after {
    content: ' *';
    color: var(--brand-accent);
    font-weight: var(--weight-bold);
  }

  .form__input,
  .form__textarea,
  .form__select {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    border: var(--border-width-brutal) solid var(--scar);
    border-radius: var(--radius-none);
    background: var(--paper);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-wide);
    line-height: var(--leading-normal);
    transition:
      border-color var(--transition-snap),
      box-shadow var(--transition-snap),
      background-color var(--transition-snap);
    appearance: none;
    -webkit-appearance: none;
  }

  .form__input::placeholder,
  .form__textarea::placeholder {
    color: var(--text-muted);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
    font-size: var(--text-xs);
    opacity: 1;
  }

  /* Focus: borda sólida + sombra deslocada */
  .form__input:focus,
  .form__textarea:focus,
  .form__select:focus {
    outline: none;
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
    background: var(--surface-bg);
  }

  /* Estado de erro */
  .form__input[aria-invalid="true"],
  .form__textarea[aria-invalid="true"] {
    border-color: var(--brand-accent);
    box-shadow: var(--shadow-brand);
  }

  /* Estado válido */
  .form__input[data-valid="true"],
  .form__textarea[data-valid="true"] {
    border-color: var(--status-positive);
    box-shadow: var(--shadow-data);
  }

  .form__textarea {
    resize: vertical;
    min-block-size: 140px;
    line-height: var(--leading-relaxed);
  }

  /* Select customizado */
  .form__select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%230a0a0a' stroke-width='2'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--space-4) center;
    padding-inline-end: var(--space-10);
    cursor: pointer;
  }

  [data-theme="dark"] .form__select {
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 7L11 1' stroke='%23f0ebe0' stroke-width='2'/%3E%3C/svg%3E");
  }

  /* Mensagem de erro */
  .form__error {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    color: var(--brand-accent);
    display: flex;
    align-items: center;
    gap: var(--space-2);
  }

  .form__error::before {
    content: '!';
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-4);
    height: var(--space-4);
    background: var(--brand-accent);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    flex-shrink: 0;
  }

  .form__hint {
    font-size: var(--text-xs);
    color: var(--text-muted);
    letter-spacing: var(--tracking-wide);
  }

  /* Checkbox / Radio brutalistas */
  .form__check {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    cursor: pointer;
  }

  .form__check-input {
    width: var(--space-5);
    height: var(--space-5);
    min-width: var(--space-5);
    border: var(--border-width-brutal) solid var(--scar);
    border-radius: var(--radius-none);
    background: var(--paper);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    position: relative;
    transition:
      border-color var(--transition-snap),
      background-color var(--transition-snap),
      box-shadow var(--transition-snap);
    margin: 0;
  }

  .form__check-input:checked {
    background: var(--ink);
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
  }

  .form__check-input:checked::after {
    content: '';
    position: absolute;
    inset: 3px;
    background: var(--brand-accent);
  }

  .form__check-input[type="radio"] {
    border-radius: var(--radius-full);
  }

  .form__check-input[type="radio"]:checked::after {
    border-radius: var(--radius-full);
  }

  .form__check-label {
    font-size: var(--text-sm);
    color: var(--text-primary);
    line-height: var(--leading-snug);
    cursor: pointer;
  }

  /* @starting-style para form__error — aparece sem flash */
  .form__error {
    transition:
      opacity var(--transition-snap),
      translate var(--transition-snap);
  }

  @starting-style {
    .form__error {
      opacity: 0;
      translate: 0 -4px;
    }
  }


  /* ─────────────────────────────────────────────────
     7. SOCIAL LINKS
     
     Sem círculo. Sem border-radius.
     Quadrados com sombra deslocada — brutalismo.
  ───────────────────────────────────────────────── */

  .social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--space-10);
    height: var(--space-10);
    border: var(--border-width-brutal) solid var(--scar);
    background: var(--paper);
    color: var(--text-muted);
    text-decoration: none;
    background-image: none;
    font-size: var(--text-sm);
    flex-shrink: 0;
    box-shadow: var(--shadow-sm);
    transition:
      transform var(--transition-snap),
      box-shadow var(--transition-snap),
      border-color var(--transition-snap),
      color var(--transition-snap),
      background-color var(--transition-snap);
  }

  .social-link:hover {
    transform: translate(3px, 3px);
    box-shadow: none;
    border-color: var(--ink);
    color: var(--paper);
    background-color: var(--ink);
    background-image: none;
  }

  .social-link:hover svg,
  .social-link:hover i {
    color: var(--paper);
  }

  /* Variante com nome da plataforma */
  .social-link--labeled {
    width: auto;
    padding-inline: var(--space-4);
    gap: var(--space-2);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    text-transform: uppercase;
  }

  /* Grupos de social links */
  .social-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    align-items: center;
  }


  /* ─────────────────────────────────────────────────
     8. BADGE / TAG
     
     Marcadores de categoria, status e label.
     Já tem .data-badge no design-tones.css para dados.
     Aqui: badges de UI genéricos.
  ───────────────────────────────────────────────── */

  .badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-family: var(--font-body);
    font-size: var(--text-2xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    font-weight: var(--weight-bold);
    padding: var(--space-1) var(--space-3);
    border: var(--border-width-base) solid currentColor;
    border-radius: var(--radius-none);
    white-space: nowrap;
  }

  .badge--default  { color: var(--text-muted); border-color: var(--border-default); }
  .badge--primary  { color: var(--ink); border-color: var(--ink); background: var(--mark); }
  .badge--accent   { color: var(--paper); background: var(--brand-accent); border-color: var(--brand-accent); }
  .badge--success  { color: var(--status-positive); background: var(--status-positive-bg); }
  .badge--warning  { color: var(--status-warning); background: var(--status-warning-bg); }
  .badge--error    { color: var(--status-negative); background: var(--status-negative-bg); }
  .badge--new      {
    color: var(--paper);
    background: var(--brand-accent);
    border-color: var(--brand-accent);
    animation: pulse-border var(--duration-dramatic) var(--ease-heavy) infinite;
  }


  /* ─────────────────────────────────────────────────
     9. TOOLTIP
     
     Usa o Popover API nativo onde possível.
     Fallback com :hover + :focus-within.
  ───────────────────────────────────────────────── */

  .tooltip-wrapper {
    position: relative;
    display: inline-flex;
  }

  .tooltip {
    position: absolute;
    inset-block-end: calc(100% + var(--space-2));
    inset-inline-start: 50%;
    translate: -50% 0;
    z-index: var(--z-overlay);

    background: var(--ink);
    color: var(--paper);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-wider);
    white-space: nowrap;
    padding: var(--space-2) var(--space-4);
    border: var(--border-width-brutal) solid var(--scar);

    opacity: 0;
    pointer-events: none;
    transition:
      opacity var(--transition-snap),
      translate var(--transition-snap);
    translate: -50% 4px;
  }

  .tooltip-wrapper:hover .tooltip,
  .tooltip-wrapper:focus-within .tooltip {
    opacity: 1;
    translate: -50% 0;
  }

  /* Seta do tooltip */
  .tooltip::after {
    content: '';
    position: absolute;
    inset-block-start: 100%;
    inset-inline-start: 50%;
    translate: -50% 0;
    border: 5px solid transparent;
    border-block-start-color: var(--ink);
  }

  /* @starting-style — tooltip sem flash */
  @starting-style {
    .tooltip-wrapper:hover .tooltip {
      opacity: 0;
      translate: -50% 8px;
    }
  }


  /* ─────────────────────────────────────────────────
     10. ACCORDION
     
     Usa <details>/<summary> nativos com @starting-style.
     Já tem estilos no base.css.
     Aqui: variante de componente para FAQ.
  ───────────────────────────────────────────────── */

  .accordion {
    border: var(--border-width-brutal) solid var(--ink);
  }

  .accordion details {
    border: none;
    border-block-end: var(--border-width-thin) solid var(--border-default);
    margin-bottom: 0;
  }

  .accordion details:last-child {
    border-block-end: none;
  }

  .accordion details summary {
    font-size: var(--text-base);
    padding: var(--space-5) var(--space-6);
    letter-spacing: var(--tracking-tight);
    border: none;
  }

  .accordion details > :not(summary) {
    padding: 0 var(--space-6) var(--space-6);
    border-block-start: var(--border-width-thin) solid var(--border-default);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
    color: var(--text-muted);
    animation: rise var(--duration-base) var(--ease-reveal) both;
  }

  @starting-style {
    .accordion details[open] > :not(summary) {
      opacity: 0;
      translate: 0 -8px;
    }
  }


  /* ─────────────────────────────────────────────────
     11. TABS
     
     Sem JS para tab básico via :has().
     Container query para layout vertical em mobile.
  ───────────────────────────────────────────────── */

  .tabs {
    container-type: inline-size;
    container-name: tabs;
  }

  .tabs__list {
    display: flex;
    list-style: none;
    border-block-end: var(--border-width-brutal) solid var(--ink);
    gap: 0;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tabs__list::-webkit-scrollbar { display: none; }

  .tabs__btn {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
    color: var(--text-muted);
    padding: var(--space-4) var(--space-6);
    border: none;
    border-block-end: var(--border-width-brutal) solid transparent;
    background: none;
    cursor: pointer;
    white-space: nowrap;
    margin-block-end: calc(-1 * var(--border-width-brutal));
    transition:
      color var(--transition-snap),
      border-color var(--transition-snap),
      background-color var(--transition-snap);
  }

  .tabs__btn:hover {
    color: var(--ink);
    background: var(--mark);
  }

  .tabs__btn[aria-selected="true"] {
    color: var(--ink);
    border-block-end-color: var(--brand-accent);
    background: var(--surface-bg);
  }

  .tabs__panel {
    padding: var(--space-8) 0;
    animation: rise var(--duration-base) var(--ease-reveal) both;
  }

  .tabs__panel[hidden] { display: none; }

  @starting-style {
    .tabs__panel:not([hidden]) {
      opacity: 0;
      translate: 0 8px;
    }
  }


  /* ─────────────────────────────────────────────────
     12. AVATAR
  ───────────────────────────────────────────────── */

  .avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--avatar-size, var(--space-12));
    height: var(--avatar-size, var(--space-12));
    border: var(--border-width-brutal) solid var(--border-default);
    overflow: hidden;
    flex-shrink: 0;
    background: var(--void);
    color: var(--paper);
    font-family: var(--font-display);
    font-size: calc(var(--avatar-size, var(--space-12)) * 0.4);
    letter-spacing: 0;
    position: relative;
    transition:
      border-color var(--transition-snap),
      box-shadow var(--transition-snap);
  }

  .avatar:hover {
    border-color: var(--ink);
    box-shadow: var(--shadow-brutal);
  }

  .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(0.8);
    transition: filter var(--transition-snap);
  }

  .avatar:hover img { filter: saturate(1); }

  .avatar--sm { --avatar-size: var(--space-8); }
  .avatar--lg { --avatar-size: var(--space-16); }
  .avatar--xl { --avatar-size: var(--space-24); }

  /* Grupo de avatars sobrepostos */
  .avatar-group {
    display: flex;
  }

  .avatar-group .avatar {
    margin-inline-start: calc(-1 * var(--space-3));
    border-color: var(--surface-bg);
    transition:
      margin-inline-start var(--transition-snap),
      border-color var(--transition-snap),
      z-index var(--transition-snap);
  }

  .avatar-group .avatar:first-child {
    margin-inline-start: 0;
  }

  .avatar-group:hover .avatar {
    margin-inline-start: var(--space-1);
    border-color: var(--border-default);
  }


  /* ─────────────────────────────────────────────────
     13. ALERT
     
     Usa @starting-style para animação de entrada.
  ───────────────────────────────────────────────── */

  .alert {
    border: var(--border-width-brutal) solid var(--border-default);
    border-inline-start: var(--border-width-slab) solid var(--alert-accent, var(--border-default));
    padding: var(--space-4) var(--space-6);
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    background: var(--alert-bg, var(--surface-secondary));
    animation: slide-right var(--duration-base) var(--ease-snap) both;
  }

  @starting-style {
    .alert {
      opacity: 0;
      translate: -20px 0;
    }
  }

  .alert--info    { --alert-accent: var(--status-info); --alert-bg: var(--status-info-bg); }
  .alert--success { --alert-accent: var(--status-positive); --alert-bg: var(--status-positive-bg); }
  .alert--warning { --alert-accent: var(--status-warning); --alert-bg: var(--status-warning-bg); }
  .alert--error   { --alert-accent: var(--status-negative); --alert-bg: var(--status-negative-bg); }

  .alert__icon {
    color: var(--alert-accent, var(--text-muted));
    flex-shrink: 0;
    font-size: var(--text-base);
    line-height: 1.4;
  }

  .alert__content {
    flex: 1;
  }

  .alert__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    letter-spacing: var(--tracking-tight);
    color: var(--ink);
    margin-block-end: var(--space-1);
  }

  .alert__message {
    font-size: var(--text-sm);
    color: var(--text-muted);
    line-height: var(--leading-snug);
    margin: 0;
  }

  .alert__close {
    color: var(--text-muted);
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    font-size: var(--text-lg);
    flex-shrink: 0;
    transition: color var(--transition-snap);
  }

  .alert__close:hover { color: var(--ink); }


  /* ─────────────────────────────────────────────────
     14. DIVIDER
     
     Mais interessante que um <hr> comum.
  ───────────────────────────────────────────────── */

  .divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--text-muted);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    letter-spacing: var(--tracking-widest);
    text-transform: uppercase;
  }

  .divider::before,
  .divider::after {
    content: '';
    flex: 1;
    height: var(--border-width-thin);
    background: var(--border-default);
  }

  /* Divider com texto à esquerda */
  .divider--left::before { display: none; }
  .divider--left::after  { flex: 1; }

  /* Divider vertical */
  .divider--vertical {
    flex-direction: column;
    height: 100%;
    width: fit-content;
  }

  .divider--vertical::before,
  .divider--vertical::after {
    width: var(--border-width-thin);
    height: auto;
    flex: 1;
  }

  /* Divider com acento */
  .divider--accent::before,
  .divider--accent::after {
    background: linear-gradient(
      90deg,
      var(--brand-accent),
      var(--border-default)
    );
  }
}


/* ─────────────────────────────────────────────────
   REDUCED-MOTION — override de componentes
───────────────────────────────────────────────── */
@layer reduced-motion {

  @media (prefers-reduced-motion: reduce) {

    .service-card:hover,
    .feature-card:hover,
    .stat-card:hover,
    .testimonial:hover,
    .social-link:hover,
    .btn:hover,
    .btn--cta:hover {
      transform: none;
      box-shadow: var(--shadow-sm);
      transition: none;
    }

    .service-card::before,
    .btn--cta::before {
      transition: none;
      clip-path: inset(0 0% 0 0);
    }

    .service-card__title::after {
      transition: none;
      inline-size: var(--space-8);
    }

    .alert {
      animation: none;
      opacity: 1;
      translate: none;
    }

    .accordion details > :not(summary) {
      animation: none;
    }

    .tabs__panel {
      animation: none;
    }

    @starting-style {
      dialog[open],
      [popover]:popover-open,
      .form__error,
      .tooltip,
      .alert {
        opacity: 1;
        translate: none;
        scale: 1;
      }
    }
  }
}