/* Enhancements: carregar POR ULTIMO (depois de tokens/base/layout/components/home/article/pin/motion).
   Layer nova declarada aqui no fim da ordem; vence todas as layers anteriores sem !important. So tokens. */
@layer enhancements;

@layer enhancements {

  /* =========================================================
     1. FOCO ACESSIVEL (complementa base.css)
     ========================================================= */
  :where(a, button, summary, input, select, textarea, [tabindex], .btn):focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: var(--s-2);
    border-radius: var(--s-1);
  }
  :where(input, select, textarea):focus-visible { outline-offset: var(--s-1); }

  /* =========================================================
     2. RITMO VERTICAL ENTRE SECOES E CABECALHOS
     ========================================================= */
  .sec__cab { margin-block-end: clamp(var(--s-6), 5vw, var(--s-7)); row-gap: var(--s-5); }
  .sec__cab > * { margin-block: 0; }
  .sec__cab .lead { margin-block-start: 0; }
  .sec__rodape { margin-block-start: var(--s-6); }
  .sec > :last-child, .sec .narrow > :last-child:not(.actions) { margin-block-end: 0; }

  /* =========================================================
     3. TEXTO: ESPACAMENTO E MEDIDA DE LEITURA
     ========================================================= */
  .lead, .narrow p, .duo__txt p, .sec__rodape, .nota { max-inline-size: var(--measure); }
  .center .lead, .center .narrow > p { margin-inline: auto; }
  .narrow > * + p, .narrow > p + p { margin-block-start: var(--s-5); }
  .duo__txt > * + * { margin-block-start: var(--s-5); }
  .duo__txt > .eyebrow + h2 { margin-block-start: var(--s-4); }
  .duo__txt > .actions { margin-block-start: var(--s-6); }

  /* =========================================================
     4. GRIDS: GAPS CONSISTENTES
     ========================================================= */
  .feats--4 { column-gap: var(--s-7); }
  .grid-3 { row-gap: 0; }
  .locais { gap: var(--s-6) var(--s-7); margin-block-start: var(--s-7); }
  @media (min-width: 62rem) {
    .grid-3:has(.local) { column-gap: var(--s-7); }
  }
  .pagto { column-gap: var(--s-7); }
  .cidades, .links-linha { gap: var(--s-3) var(--s-5); }

  /* =========================================================
     5. ACTIONS: GAP E ALINHAMENTO
     ========================================================= */
  .actions { gap: var(--s-4) var(--s-5); align-items: center; margin-block-start: var(--s-6); }
  .center .actions, .sec--cta.center .actions { justify-content: flex-start; }
  .center:not(.sec--cta) .actions { justify-content: center; }

  /* =========================================================
     6. TRATAMENTOS: IMAGENS .duo SEM CORTE
     A figura ocupa a altura da linha do grid e a imagem mantem
     a proporcao natural (width/height do HTML), sem recorte.
     ========================================================= */
  .duo__fig { display: grid; align-items: center; }
  .duo__fig img {
    aspect-ratio: auto;
    block-size: auto;
    max-block-size: none;
    object-fit: contain;
    object-position: 50% 50%;
  }
  .duo__fig--sm { justify-items: center; }
  .duo__fig--sm img { max-inline-size: 34rem; border-radius: var(--r-lg); }
  @media (min-width: 62rem) {
    .duo { align-items: stretch; }
    .duo__fig { align-self: stretch; }
    .duo__fig img { aspect-ratio: auto; max-block-size: none; }
    .duo__fig--sm { margin-inline-end: 0; }
    .duo--inv .duo__fig--sm { margin-inline: 0; }
    .duo__txt { align-self: center; }
    .duo--mapa { align-items: stretch; }
  }

  /* =========================================================
     7. BLOG: RODAPE COMPACTO (trustband mini + trilha)
     ========================================================= */
  .trustband--mini {
    display: flex; flex-wrap: wrap; gap: var(--s-3);
    margin-block-start: var(--s-5);
    grid-template-columns: none;
  }
  .trustband--mini li {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    border: 1px solid var(--line); border-block-start: 1px solid var(--line);
    border-radius: var(--r);
    line-height: 1.2;
  }
  .trustband--mini .ico { margin: 0; inline-size: 1rem; block-size: 1rem; color: var(--gold); }
  .trustband--mini b { font-size: var(--t-sm); }
  .trustband--mini:has(li:nth-child(5)) li:last-child { grid-column: auto; }
  @media (max-width: 36rem) {
    .trustband--mini { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  }

  .post-trilha {
    display: grid; grid-template-columns: minmax(0, 1fr);
    gap: var(--s-3) var(--s-6);
    margin-block-start: var(--s-5);
  }
  .post-trilha a {
    display: inline-flex; align-items: center; gap: var(--s-3);
    padding-block: var(--s-2);
    text-decoration: none; line-height: 1.35;
  }
  .post-trilha a:hover span { text-decoration: underline; text-underline-offset: var(--s-2); }
  .post-trilha .ico { inline-size: 1rem; block-size: 1rem; color: var(--gold); flex: none; }
  @media (min-width: 36rem) {
    .post-trilha { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* =========================================================
     8. BLOG: CTA CENTRALIZADO
     ========================================================= */
  .ux-cta { justify-items: center; text-align: center; }
  .ux-cta > * { margin-inline: auto; }
  .ux-cta h3, .ux-cta p { text-align: center; margin-inline: auto; }
  .ux-cta .btn { justify-self: center; margin-inline: auto; }

  /* =========================================================
     9. BLOG: RITMO DOS BLOCOS FINAIS
     ========================================================= */
  .ux-share { margin-block: var(--s-6); }
  .post-faq, .refs, .author { margin-block-start: var(--s-7); }
  .note { margin-block-start: var(--s-5); }

  /* =========================================================
     10. BUSCA DE FAQ: icone DENTRO do input, alinhado
     (faltava posicionar o .ico e abrir padding no input)
     ========================================================= */
  .ux-search { display: block; }
  .ux-search .ico {
    position: absolute; inset-inline-start: var(--s-4); inset-block-start: 50%;
    transform: translateY(-50%);
    inline-size: 1.15rem; block-size: 1.15rem;
    color: var(--gray-3); pointer-events: none;
  }
  .ux-search input { padding-inline-start: calc(var(--s-4) + 1.15rem + var(--s-3)); }
  .ux-search:focus-within .ico { color: var(--gold); }

  /* =========================================================
     11. CABECALHO FIXO: overlay escuro JA no topo (nao so ao rolar)
     O degrade antigo ficava transparente atras do nome centralizado.
     Overlay mais firme no estado parado; o .is-scrolled (solido) segue
     valendo quando rola, pois esta regra so pega :not(.is-scrolled).
     ========================================================= */
  .top:not(.is-scrolled) {
    background: linear-gradient(180deg, rgb(0 0 0 / .72), rgb(0 0 0 / .42));
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
  }

  /* =========================================================
     12. CTA FINAL: variar fundo por pagina (foto no lugar do logo)
     Paginas internas definem --cta-img inline; a home NAO define,
     entao mantem a marca-d'agua do logotipo (.sec--cta::after original).
     Foto suave e escurecida, esmaecendo para o lado do texto.
     ========================================================= */
  .sec--cta[style*="--cta-img"]::after {
    inset: 0; inline-size: auto;
    background: var(--cta-img) center / cover no-repeat;
    opacity: .16;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 58%);
    mask-image: linear-gradient(90deg, transparent 0, #000 58%);
  }
  /* Home: o CTA final nao usa foto e repetia a marca-d'agua do logo que ja
     aparece no rodape logo abaixo (as duas se sobrepunham no canto direito).
     Remove a do CTA e mantem so a do rodape. */
  .sec--cta:not([style*="--cta-img"])::after { display: none; }

  /* =========================================================
     13. CONTRASTE: texto fino do rodape (AA 4.5:1)
     O par de linhas do rodape herdava cinza fraco (~4.1:1).
     ========================================================= */
  .foot__bottom span, .foot__bottom { color: var(--gray-2); }

  /* =========================================================
     14. ALVOS DE TOQUE >= 44px no mobile (WCAG 2.5.8 / Fitts)
     Acoes secundarias (links de cartao, botao do mapa, trilha,
     rodape) ficavam com 27-28px de altura no celular.
     ========================================================= */
  @media (max-width: 48rem) {
    .feat__link {
      display: inline-flex; align-items: center;
      min-block-size: 2.75rem; padding-block: var(--s-4);
    }
    .mapa__abrir { padding-block: var(--s-4); }
    .crumbs a { display: inline-block; padding-block: var(--s-2); }
    .foot__grid ul { display: grid; row-gap: var(--s-3); }
    .foot__grid a { display: inline-block; padding-block: var(--s-2); }
  }
  /* ancoras de citacao do artigo ([1][2][3]): area de toque maior */
  .article sup { padding-inline: var(--s-1); }
  .article sup a {
    display: inline-block; min-inline-size: 1.75rem; line-height: 1.75rem;
    text-align: center; border-radius: var(--r);
  }

  /* =========================================================
     15. BOTOES: rotulo um pouco maior (legibilidade do uppercase)
     ========================================================= */
  .btn { font-size: var(--t-sm); text-align: center; line-height: 1.2; }

  /* =========================================================
     16. HERO NO MOBILE: nao ocupar a tela inteira
     Deixa a proposta de valor e o CTA aparecerem acima da dobra.
     ========================================================= */
  @media (max-width: 48rem) {
    .hh, .phero, .ahero, .hero { min-block-size: 88svh; }
  }

  /* =========================================================
     17. LINKS INLINE DO ARTIGO: sublinhado no hover/foco
     (distincao que nao depende so da cor; WCAG 1.4.1)
     ========================================================= */
  .article p a:hover, .article p a:focus-visible,
  .article li a:hover, .article li a:focus-visible {
    text-decoration: underline; text-underline-offset: var(--s-2);
  }

  /* =========================================================
     18. BUSCA DO FAQ: estado "sem resultado"
     ========================================================= */
  .ux-faq-empty { display: none; color: var(--gray-1); padding-block: var(--s-6); font-size: var(--t-md); }
  .ux-faq-empty.is-on { display: block; }
  .ux-faq-empty a { color: var(--gold-hi); }
  .ux-faq-count { display: block; margin-block-start: var(--s-4); font: 400 var(--t-xs)/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--gray-2); }

  /* =========================================================
     19. MENU MOVEL: botao de fechar (X) acima do overlay aberto
     O menu aberto (.menu fixed, z-index 80) cobria o burger
     (z-index 3), entao o "X" de fechar ficava escondido e sem
     clique. Eleva o burger acima do overlay.
     ========================================================= */
  .burger { z-index: 100; }

  /* =========================================================
     20. MENU MOVEL: itens um pouco menores
     ========================================================= */
  @media (max-width: 62rem) {
    .menu a:not(.btn) { font-size: clamp(1.3rem, 5.2vw, 1.9rem); }
  }
}