/* polish.css — toques finais, prose, focus, utilitários */
@layer polish {
  /* ============ FOCUS VISIBLE GLOBAL ============ */
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 4px;
  }
  .btn:focus-visible {
    outline-offset: 4px;
  }

  /* ============ SKIP LINK ============ */
  .skip-link {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--sp-4);
    padding: var(--sp-2) var(--sp-4);
    background: var(--brand);
    color: #fff;
    font-weight: 600;
    font-size: var(--fs-sm);
    border-radius: var(--r-md);
    text-decoration: none;
    z-index: 1000;
    transition: inset-block-start var(--dur-fast) var(--ease-out);
  }
  .skip-link:focus {
    inset-block-start: var(--sp-3);
  }

  /* ============ STACK ROWS / UTILITÁRIOS LAYOUT ============ */
  .stack-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    align-items: center;
  }
  .stack-row--center { justify-content: center; }

  .pad-y-tight { padding-block: clamp(2rem, 5vw, 3rem); }

  /* ============ PROSE (artigos longos, política) ============ */
  .prose {
    max-inline-size: 65ch;
    margin-inline: auto;
  }
  .prose > * + * { margin-block-start: var(--sp-4); }
  .prose h1 {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    line-height: 1.15;
    color: var(--fg);
    margin-block-end: var(--sp-5);
    max-inline-size: 24ch;
  }
  .prose h2 {
    font-family: var(--font-display);
    font-size: var(--fs-xl);
    line-height: 1.25;
    color: var(--fg);
    margin-block-start: var(--sp-7);
    margin-block-end: var(--sp-3);
    max-inline-size: 28ch;
  }
  .prose h3 {
    font-family: var(--font-display);
    font-size: var(--fs-lg);
    line-height: 1.3;
    color: var(--fg);
    margin-block-start: var(--sp-6);
    margin-block-end: var(--sp-2);
    max-inline-size: 36ch;
  }
  .prose p {
    color: var(--fg-muted);
    line-height: 1.7;
  }
  .prose ul {
    padding-inline-start: var(--sp-5);
    list-style: disc;
    color: var(--fg-muted);
  }
  .prose li {
    margin-block-end: var(--sp-2);
    line-height: 1.6;
  }
  .prose strong { color: var(--fg); font-weight: 600; }
  .prose a {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color var(--dur-fast) var(--ease-out);
  }
  .prose a:hover { color: var(--brand-hot); }
}

@layer utilities {
  .text-center { text-align: center; }
  .mt-0 { margin-block-start: 0 !important; }
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px !important;
    block-size: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  @media (max-width: 640px) {
    .hide-mobile { display: none !important; }
  }
}

/* ============================================================
 * POLIMENTO PREMIUM v23 (bloco aditivo)
 * Correções objetivas do audit de UI/UX — nada de redesign cego.
 * ============================================================ */
@layer polish {
  /* Tipografia fina: headings multi-linha equilibrados, parágrafos
   * sem órfãs. Progressive enhancement puro (ignorado se não suportado). */
  h1, h2, h3 {
    text-wrap: balance;
  }
  p {
    text-wrap: pretty;
  }

  /* Contadores animados do hero: algarismos tabulares — a largura não
   * "dança" durante a contagem (jitter era perceptível no mobile). */
  .stat__num,
  [data-counter] {
    font-variant-numeric: tabular-nums;
  }

  /* Mobile tátil: mata o flash cinza/azulado nativo de toque (iOS/
   * Android) — o feedback é o :active próprio de cada componente —
   * e elimina o delay/zoom acidental de double-tap nos interativos. */
  a, button {
    -webkit-tap-highlight-color: transparent;
  }
  .btn,
  .nav__link,
  .faq__btn,
  [data-menu-trigger],
  .devcode-credits__link {
    touch-action: manipulation;
  }

  /* Nota de localidade no footer (antes era style inline no HTML) */
  .footer__note {
    color: var(--fg-dim);
    font-size: var(--fs-sm);
  }
}

/* Drawer do menu em LANDSCAPE baixo (ex.: 740×360): a coluna de links
 * não cabia e era cortada sem scroll. Compacta a tipografia e libera
 * scroll interno — só nesta condição; retrato segue intacto. */
@layer polish {
  @media (max-width: 860px) and (max-height: 480px) and (orientation: landscape) {
    .nav__list {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    .nav__link {
      font-size: clamp(1.05rem, 4.2vh, 1.4rem);
      padding-block: 0.55rem;
    }
    .nav__heading {
      display: none;
    }
  }
}

/* ============================================================
 * REFINO VISUAL v25 — a partir de screenshots reais (mobile).
 * Bloco aditivo em @layer polish: sobrepõe sem tocar no CSS-base.
 * Foco: presença dos ícones, toque do FAQ, respiro dos cards.
 * ============================================================ */
@layer polish {

  /* — SERVIÇOS (planos): o ícone parecia subdimensionado dentro do
   *   quadro de 52px. Ganha corpo (58px), leve profundidade e um
   *   gradiente sutil de marca — vira selo, não placeholder. — */
  .servico__icon {
    inline-size: 58px;
    block-size: 58px;
    background:
      linear-gradient(135deg,
        color-mix(in oklab, var(--brand) 22%, transparent),
        color-mix(in oklab, var(--brand) 8%, transparent));
    border: 1px solid color-mix(in oklab, var(--brand) 28%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--fg) 6%, transparent),
      0 8px 24px -14px var(--brand-glow);
  }
  .servico__icon svg {
    inline-size: 29px;
    block-size: 29px;
    stroke-width: 2;
  }
  /* Hover do card intensifica o selo — feedback coeso com o tilt */
  .servico:hover .servico__icon {
    border-color: color-mix(in oklab, var(--brand) 45%, transparent);
    box-shadow:
      inset 0 1px 0 color-mix(in oklab, var(--fg) 8%, transparent),
      0 10px 30px -12px var(--brand-glow);
  }

  /* — FAQ: o "+" era pequeno (24px/glyph 12px) e de baixo contraste.
   *   Alvo maior (36px), glyph nítido, borda visível. Toda a área do
   *   botão já é clicável; aqui só reforçamos o affordance visual. — */
  .faq__icon {
    inline-size: 36px;
    block-size: 36px;
    border-color: color-mix(in oklab, var(--brand) 30%, var(--bg-line));
    background: color-mix(in oklab, var(--brand) 6%, transparent);
    color: var(--brand);
  }
  .faq__icon svg {
    inline-size: 15px;
    block-size: 15px;
    stroke-width: 2.5;
  }
  .faq__btn {
    /* respiro vertical maior entre perguntas — a lista estava apertada */
    padding-block: var(--sp-5);
    gap: var(--sp-5);
  }
  .faq__btn:hover .faq__icon {
    border-color: var(--brand);
    background: color-mix(in oklab, var(--brand) 12%, transparent);
  }

  /* — FLOAT do WhatsApp x CTA: nas telas onde um CTA vermelho grande
   *   fica no rodapé da seção, o float verde encostava nele. Uma sombra
   *   de contorno cria separação clara sem mover o botão nem cobrir nada. — */
  .wa-float {
    box-shadow:
      0 0 0 4px var(--bg),
      0 10px 30px -8px rgba(0, 0, 0, 0.5),
      0 0 22px -4px color-mix(in oklab, #25d366 60%, transparent);
  }
}

/* ============================================================
 * FIX v26 — clique no crédito indo p/ "Privacidade" no mobile/tablet
 *
 * CAUSA RAIZ: em .footer__bar (flex-wrap: wrap), o layout em coluna
 * só entra em ≤640px e o crédito só vira 100% em ≤640px. Entre ~641px
 * e a largura onde o conteúdo quebra (ex.: aparelho de ~745px da print),
 * o pill de crédito (justify-content: center) e o bloco .footer__legal
 * ("Privacidade" · "Contato" · "Gerenciar cookies") caíam na MESMA
 * faixa visual do wrap. A área clicável do link "Privacidade" invadia
 * o espaço central em branco do pill → o toque no crédito acertava a
 * Privacidade. O href do crédito sempre esteve correto; o bug era de
 * empilhamento/hit-area no flex-wrap, não de destino do link.
 *
 * FIX: o crédito passa a ocupar a PRÓPRIA linha em toda faixa onde a
 * barra quebra (≤900px), com os vizinhos forçados a linhas separadas.
 * Zero ambiguidade de hit-area — cada alvo na sua faixa. Nada de
 * position/z-index frágil; é layout puro. Rollback: remover este bloco.
 * ============================================================ */
@layer polish {
  /* Rede de segurança: a linha decorativa do topo do footer tinha
   * z-index:1 mas faltou pointer-events:none (o ::before irmão tem).
   * Impede que qualquer faixa de 1px capture toque. */
  .site-footer::after {
    pointer-events: none;
  }

  @media (max-width: 900px) {
    /* Cada filho do bar em sua própria linha — fim da sobreposição */
    .footer__bar {
      flex-direction: column;
      align-items: center;
      text-align: center;
      row-gap: var(--sp-5);
    }
    .footer__legal-left {
      justify-content: center;
    }
    /* Crédito isolado na própria faixa, largura total, alvo previsível */
    .devcode-credits {
      inline-size: 100%;
      justify-content: center;
    }
    .devcode-credits__link {
      /* isola o stacking do pill: nada vizinho compartilha sua camada */
      position: relative;
      z-index: 1;
    }
    .devcode-credits__divider {
      display: none;
    }
    /* Legal em faixa própria, centralizada, sem encostar no crédito */
    .footer__legal {
      inline-size: 100%;
      justify-content: center;
    }
  }
}

/* ============================================================
 * ASSISTENTE VIRTUAL — decisão B (Passo 0): o assistente assume
 * o canto inferior como único ponto de contato flutuante.
 * O .wa-float original é ocultado (não removido do HTML → rollback
 * trivial: basta tirar o include do assistente e este bloco).
 * O handoff do assistente cobre o que o float fazia (WhatsApp
 * com mensagem pré-preenchida).
 * ============================================================ */
.wa-float { display: none !important; }

/* ============================================================
 * REFINO PREMIUM v3 — seções Resultados, Planos e FAQ (desktop→mobile)
 * A partir de screenshots reais. Bloco aditivo; sobrepõe sem
 * reescrever o CSS-base das seções.
 * ============================================================ */
@layer polish {

  /* — BOTÕES SECUNDÁRIOS DOS PLANOS ("Ver investimento", "Quero ser
   *   elite"): texto em --brand dava só 3.53:1 sobre o fundo tingido
   *   (abaixo de AA). Sobe pra um vermelho mais claro → 5.2:1 (AA
   *   folgado), e ganha peso visual mais próximo do botão primário. — */
  .btn--secondary {
    color: #ff4d5e;
  }
  .btn--secondary:hover,
  .btn--secondary:focus-visible {
    color: #ff6470;
  }

  /* — RESULTADOS: respiro superior extra na seção. No desktop, ao
   *   ancorar em #resultados o topo do bloco ficava colado no header.
   *   Uma folga a mais dá ar e evita qualquer sobreposição de leitura. — */
  @media (min-width: 861px) {
    .resultados { scroll-margin-block-start: calc(var(--header-h) + 2.5rem); }
    .planos     { scroll-margin-block-start: calc(var(--header-h) + 2rem); }
    .faq        { scroll-margin-block-start: calc(var(--header-h) + 2rem); }
  }

  /* — CARDS DE ALUNO (antes/depois): profundidade um pouco mais rica
   *   no hover, coesa com o tilt já existente. Borda ganha vida em
   *   brand sutil. Só transform/box-shadow → zero reflow. — */
  .aluno {
    transition: box-shadow 320ms var(--ease-out), border-color 320ms var(--ease-out);
  }
  .aluno:hover {
    border-color: color-mix(in oklab, var(--brand) 30%, var(--bg-line));
    box-shadow: 0 20px 48px -20px rgba(0, 0, 0, 0.6),
                0 0 40px -24px var(--brand-glow);
  }

  /* — FAQ: linhas mais definidas e hover mais claro na pergunta
   *   inteira (não só no "+"). Feedback de que a linha toda é clicável. — */
  .faq__btn {
    transition: background-color 200ms var(--ease-out), padding-inline 200ms var(--ease-out);
    border-radius: var(--r-md);
  }
  .faq__btn:hover {
    background: color-mix(in oklab, var(--brand) 5%, transparent);
    padding-inline-start: var(--sp-4);
  }
  .faq__item.is-open .faq__btn {
    color: var(--brand-hot);
  }

  /* — BADGE "MAIS ESCOLHIDO": leve elevação pra descolar do card e
   *   não parecer grudado na borda superior. — */
  .plano__ribbon {
    box-shadow: 0 6px 16px -6px var(--brand-glow);
    letter-spacing: 0.08em;
  }
}

/* ============================================================
 * REFINO v4 — CTA "Falar com o Rafael" na seção Sobre (mobile)
 * ------------------------------------------------------------
 * O botão é inline-flex → encostava à esquerda sob o card de
 * fechamento (largura total), criando desalinhamento visual no
 * mobile. Correção: no mobile, o CTA acompanha a largura do card
 * acima (full-width, centralizado) para um bloco coeso; no
 * desktop segue com largura natural alinhado ao texto. Aditivo. */
@layer polish {
  @media (max-width: 860px) {
    .sobre__closing + .btn,
    .sobre__text > .btn {
      display: flex;
      inline-size: 100%;
      margin-block-start: var(--sp-5);
    }
  }
  /* Telas bem estreitas: garante respiro lateral consistente */
  @media (max-width: 480px) {
    .sobre__text > .btn { margin-inline: auto; }
  }
}

/* ============================================================
 * REFINO v5 — legibilidade da seção "Sobre" no mobile
 * ------------------------------------------------------------
 * Os parágrafos do corpo formavam uma parede de texto densa no
 * mobile: pouco respiro entre blocos, line-height apertado para
 * leitura longa e destaques (<strong>) sem peso suficiente.
 * Correção só de ritmo/leitura — o conteúdo aprovado não muda.
 * Aditivo em @layer polish. */
@layer polish {
  @media (max-width: 860px) {
    /* Mais ar entre parágrafos + entrelinha confortável p/ leitura longa */
    .sobre__text p {
      line-height: 1.72;
      margin-block-end: var(--sp-5);
    }
    /* Destaques ganham presença: os números (5 anos, 50 alunos) e as
     * frases-âncora deixam de se perder no corpo cinza */
    .sobre__text strong {
      color: var(--fg);
      font-weight: 700;
    }
    /* Lead com mais respiro do bloco seguinte */
    .sobre__lead { margin-block-end: var(--sp-5); }
  }

  /* Telas bem estreitas: garante que o texto não cole nas bordas */
  @media (max-width: 480px) {
    .sobre__text { padding-inline: 0; }
    .sobre__text p { text-wrap: pretty; }
  }
}