/* components.css — botões, badges, cards, FAQ, devcode-credits */
@layer components {
  /* ============ BOTÕES ============ */
  .btn {
    --_pad-y: 0.875rem;
    --_pad-x: 1.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: var(--_pad-y) var(--_pad-x);
    font-family: var(--font-body);
    font-size: var(--fs-sm);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    border-radius: var(--r-pill);
    border: 1px solid transparent;
    cursor: pointer;
    text-align: center;
    transition: transform var(--dur-base) var(--ease-out),
                box-shadow var(--dur-base) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out),
                border-color var(--dur-fast) var(--ease-out);
    white-space: nowrap;
  }
  .btn:active { transform: translateY(1px); }

  .btn--primary {
    background: linear-gradient(180deg, var(--brand-hot) 0%, var(--brand) 100%);
    color: #fff;
    border-color: color-mix(in oklab, var(--brand-hot) 50%, transparent);
    box-shadow: var(--shadow-brand), var(--shadow-inset);
  }
  .btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 18px 56px -14px var(--brand-glow), var(--shadow-inset);
    background: linear-gradient(180deg, var(--brand-hot) 0%, var(--brand-hot) 100%);
  }
  .btn--primary .btn__arrow { transition: transform var(--dur-base) var(--ease-out); }
  .btn--primary:hover .btn__arrow { transform: translateX(4px); }

  .btn--ghost {
    background: transparent;
    color: var(--fg);
    border-color: var(--bg-line);
  }
  .btn--ghost:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-2px);
  }

  .btn--lg {
    --_pad-y: 1.125rem;
    --_pad-x: 2rem;
    font-size: var(--fs-base);
  }

  .btn--sm {
    --_pad-y: 0.5rem;
    --_pad-x: 1rem;
    font-size: var(--fs-xs);
  }

  .btn--block { inline-size: 100%; }

  /* Ícone WhatsApp dentro de botão */
  .btn .icon { inline-size: 18px; block-size: 18px; }

  /* ============ TAG / EYEBROW ============ */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    background: color-mix(in oklab, var(--brand) 14%, transparent);
    color: var(--brand);
    font-family: var(--font-body);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-radius: var(--r-pill);
    border: 1px solid color-mix(in oklab, var(--brand) 32%, transparent);
  }
  .eyebrow::before {
    content: "";
    inline-size: 6px;
    block-size: 6px;
    background: var(--brand);
    border-radius: 50%;
    box-shadow: 0 0 8px var(--brand-glow);
  }

  /* ============ CARD GENÉRICO ============ */
  .card {
    background: var(--bg-card);
    border: 1px solid var(--bg-line);
    border-radius: var(--r-lg);
    padding: var(--sp-6);
    transition: border-color var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
  }
  .card:hover {
    border-color: color-mix(in oklab, var(--brand) 35%, var(--bg-line));
    transform: translateY(-3px);
  }

  /* ============ FAQ ============ */
  .faq__item {
    border-block-end: 1px solid var(--bg-line);
  }
  .faq__item:first-child { border-block-start: 1px solid var(--bg-line); }

  .faq__btn {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    padding: var(--sp-5) var(--sp-2);
    font-family: var(--font-body);
    font-size: var(--fs-md);
    font-weight: 600;
    color: var(--fg);
    text-align: start;
    line-height: 1.35;
    cursor: pointer;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .faq__btn:hover { color: var(--brand); }

  .faq__icon {
    flex-shrink: 0;
    inline-size: 24px;
    block-size: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--bg-line);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
    color: var(--fg-muted);
  }
  .faq__icon svg {
    inline-size: 12px;
    block-size: 12px;
    transition: transform var(--dur-base) var(--ease-out);
  }
  .faq__item.is-open .faq__icon {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
  }
  .faq__item.is-open .faq__icon svg {
    transform: rotate(45deg);
  }
  .faq__item.is-open .faq__btn { color: var(--brand); }

  .faq__panel {
    max-block-size: 0;
    overflow: hidden;
    transition: max-block-size var(--dur-slow) var(--ease-in-out);
  }
  .faq__item.is-open .faq__panel { max-block-size: 32rem; }
  .faq__answer {
    padding: 0 var(--sp-2) var(--sp-5);
    color: var(--fg-muted);
    max-inline-size: 65ch;
  }

  /* ============ WHATSAPP FLOAT ============ */
  .wa-float {
    position: fixed;
    inset-inline-end: clamp(1rem, 3vw, 1.5rem);
    inset-block-end: calc(clamp(1rem, 3vw, 1.5rem) + env(safe-area-inset-bottom));
    z-index: 90;
    inline-size: 60px;
    block-size: 60px;
    background: #25d366;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.5);
    opacity: 0;
    transform: translateY(20px) scale(0.85);
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-spring);
    pointer-events: none;
  }
  .wa-float.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
    animation: wa-pulse 2.4s var(--ease-in-out) infinite;
  }
  .wa-float:hover { transform: translateY(-3px) scale(1.05); animation-play-state: paused; }
  .wa-float svg { inline-size: 28px; block-size: 28px; }

  @keyframes wa-pulse {
    0%, 100% { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.5); }
    50% { box-shadow: 0 10px 30px -8px rgba(37, 211, 102, 0.5), 0 0 0 14px rgba(37, 211, 102, 0); }
  }


  /* ============ TEMA TOGGLE ============ */
  .theme-toggle {
    inline-size: 38px;
    block-size: 38px;
    border-radius: var(--r-md);
    color: var(--fg-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
  }
  .theme-toggle:hover { background: var(--bg-card); color: var(--fg); }
  .theme-toggle svg { inline-size: 18px; block-size: 18px; }
  .theme-toggle__sun { display: none; }
  [data-theme="light"] .theme-toggle__sun { display: block; }
  [data-theme="light"] .theme-toggle__moon { display: none; }

  /* ============ TOAST / FEEDBACK ============ */
  .toast {
    position: fixed;
    inset-block-end: calc(var(--sp-6) + env(safe-area-inset-bottom));
    inset-inline-start: 50%;
    transform: translateX(-50%) translateY(20px);
    padding: var(--sp-3) var(--sp-5);
    background: var(--bg-elev);
    border: 1px solid var(--bg-line);
    border-radius: var(--r-pill);
    font-size: var(--fs-sm);
    color: var(--fg);
    box-shadow: var(--shadow-md);
    opacity: 0;
    z-index: 200;
    transition: opacity var(--dur-base) var(--ease-out),
                transform var(--dur-base) var(--ease-out);
    pointer-events: none;
    max-inline-size: 90vw;
    text-align: center;
  }
  .toast.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .toast--success { border-color: var(--brand); }

  /* ============ LGPD BANNER ============ */
  .lgpd-banner {
    position: fixed;
    inset-inline: clamp(0.75rem, 2vw, 1.5rem);
    inset-block-end: calc(clamp(0.75rem, 2vw, 1.5rem) + env(safe-area-inset-bottom));
    z-index: 95;
    max-inline-size: 720px;
    margin-inline: auto;
    padding: var(--sp-4) var(--sp-5);
    background: color-mix(in oklab, var(--bg-elev) 96%, transparent);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border: 1px solid var(--bg-line);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-lg);
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--sp-4);
    opacity: 0;
    transform: translateY(20px);
    /* Estado de repouso NÃO captura toque. Sem isto, o banner (position:
     * fixed, z-index 95, ancorado no rodapé da viewport) fica como um
     * overlay invisível SOBRE o footer no mobile — e seu link interno
     * "Saiba mais" (→ politica-de-privacidade.html) intercepta o toque
     * destinado ao crédito DevCode. Causa raiz do bug de redirecionamento.
     * pointer-events só é reativado quando o banner está de fato visível. */
    pointer-events: none;
    transition: opacity var(--dur-slow) var(--ease-out),
                transform var(--dur-slow) var(--ease-out);
  }
  .lgpd-banner.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .lgpd-banner.is-leaving { opacity: 0; transform: translateY(12px); pointer-events: none; }

  .lgpd-banner__text {
    font-size: var(--fs-sm);
    color: var(--fg-muted);
    line-height: 1.5;
    margin: 0;
  }
  .lgpd-banner__text a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lgpd-banner__text a:hover { color: var(--brand-hot); }

  .lgpd-banner__actions {
    display: inline-flex;
    gap: var(--sp-2);
    flex-shrink: 0;
  }

  @media (max-width: 640px) {
    .lgpd-banner {
      grid-template-columns: 1fr;
      padding: var(--sp-4);
    }
    .lgpd-banner__actions { justify-content: flex-end; }
  }

  /* ============ STANDALONE PAGES (404, obrigado) ============ */
  .standalone {
    min-block-size: calc(100dvh - var(--header-h));
    display: flex;
    align-items: center;
    padding-block: clamp(4rem, 12vw, 8rem);
  }

  .error-page {
    text-align: center;
    max-inline-size: 640px;
    margin-inline: auto;
  }
  .error-page__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.1;
    margin: var(--sp-5) 0 var(--sp-4);
    color: var(--fg);
  }
  .error-page__text {
    color: var(--fg-muted);
    font-size: var(--fs-md);
    line-height: 1.6;
    margin-block-end: var(--sp-7);
  }
  .error-page__actions {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    justify-content: center;
  }
  .error-page__actions .btn { flex-grow: 0; }
  @media (max-width: 480px) {
    .error-page__actions { flex-direction: column; align-items: stretch; }
    .error-page__actions .btn { inline-size: 100%; }
  }

  /* ============ PROSE (política de privacidade) ============ */
  .prose__actions {
    margin-block-start: var(--sp-7);
    padding-block-start: var(--sp-6);
    border-block-start: 1px solid var(--bg-line);
    display: flex;
    gap: var(--sp-3);
  }
}

/* ============================================================
 * FASE 4 — DEVCODE CREDITS (micro CTA de créditos, v22)
 * Substitui o antigo .devsig. 100% escopado; visível sem JS
 * (falha benigna: o link é a base, microinteração é enfeite).
 * ============================================================ */
@layer components {
  .devcode-credits {
    display: inline-flex;
  }
  .devcode-credits__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem 0.55rem;
    min-height: 44px;
    padding: 0.55rem 1.05rem 0.55rem 0.85rem;
    font-family: var(--font-body, Inter, system-ui, sans-serif);
    font-size: var(--fs-xs, 0.8rem);
    line-height: 1.25;
    text-decoration: none;
    color: var(--fg-muted, rgba(244, 245, 247, 0.68));
    background: rgba(244, 245, 247, 0.03);
    border: 1px solid rgba(244, 245, 247, 0.09);
    border-radius: var(--r-pill, 999px);
    transition: border-color 240ms ease, background-color 240ms ease,
                box-shadow 240ms ease, transform 240ms ease;
  }
  .devcode-credits__mark {
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: var(--brand, #e3122f);
  }
  .devcode-credits__label {
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--fg-dim, rgba(244, 245, 247, 0.46));
    transition: color 240ms ease;
  }
  .devcode-credits__name {
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--fg, #f4f5f7);
  }
  .devcode-credits__brand {
    font-weight: 800;
    color: var(--brand-hot, #ff2740);
  }
  .devcode-credits__divider {
    inline-size: 1px;
    block-size: 12px;
    border-radius: 1px;
    background: rgba(244, 245, 247, 0.15);
  }
  .devcode-credits__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 600;
    color: var(--brand-hot, #ff2740);
  }
  .devcode-credits__arrow {
    transition: transform 240ms ease;
  }
  .devcode-credits__link:hover,
  .devcode-credits__link:focus-visible {
    transform: translateY(-1px);
    border-color: var(--brand, #e3122f);
    background: rgba(227, 18, 47, 0.07);
    box-shadow: 0 6px 18px rgba(227, 18, 47, 0.16);
  }
  .devcode-credits__link:hover .devcode-credits__label,
  .devcode-credits__link:focus-visible .devcode-credits__label {
    color: var(--fg, #f4f5f7);
  }
  .devcode-credits__link:hover .devcode-credits__arrow,
  .devcode-credits__link:focus-visible .devcode-credits__arrow {
    transform: translateX(3px);
  }
  .devcode-credits__link:active {
    transform: translateY(0);
  }
  .devcode-credits__link:focus-visible {
    outline: 2px solid var(--brand-hot, #ff2740);
    outline-offset: 3px;
  }
  @media (max-width: 640px) {
    .devcode-credits {
      inline-size: 100%;
      justify-content: center;
    }
    .devcode-credits__divider {
      display: none;
    }
    .devcode-credits__link {
      text-align: center;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .devcode-credits__link,
    .devcode-credits__label,
    .devcode-credits__arrow {
      transition: none;
    }
    .devcode-credits__link:hover,
    .devcode-credits__link:focus-visible,
    .devcode-credits__link:active {
      transform: none;
    }
    .devcode-credits__link:hover .devcode-credits__arrow,
    .devcode-credits__link:focus-visible .devcode-credits__arrow {
      transform: none;
    }
  }
}