/* micro.css: as micro-interações do site. Só transform, opacity, cor e sombra.
   Tudo aqui respeita prefers-reduced-motion (bloco no fim) e só liga com JS ativo (html.js) onde esconder algo seria arriscado. */

/* 1. barra de progresso de leitura sob o cabeçalho */
.progresso { position: fixed; top: 0; left: 0; z-index: 60; height: 3px; width: 100%; transform-origin: left; transform: scaleX(var(--progresso, 0)); background: var(--marca); pointer-events: none; transition: transform .08s linear; }
.cabecalho { top: 0; }

/* 3. cabeçalho compacta ao rolar */
.marca img { transition: width var(--d-normal) var(--ease-ui); }
.cabecalho.rolou .marca img { width: 92px; }
@media (min-width: 900px) { .cabecalho.rolou .marca img { width: 100px; } }

/* 4. link do menu: sublinhado que cresce da esquerda */
.menu__item > a { position: relative; }
.menu__item > a::after { content: ""; position: absolute; left: .6rem; right: .6rem; bottom: .35rem; height: 2px; background: var(--marca); transform: scaleX(0); transform-origin: left; transition: transform var(--d-normal) var(--ease-entrada); }
.menu__item > a:hover::after, .menu__item > a:focus-visible::after, .menu__item > a[aria-current="page"]::after { transform: scaleX(1); }
@media (max-width: 899px) { .menu__item > a::after { left: 0; right: auto; width: 2.5rem; bottom: .5rem; } }

/* 5. submenu desce com fade (desktop) */
@media (min-width: 900px) {
  .submenu { display: block; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity var(--d-rapido) var(--ease-ui), transform var(--d-normal) var(--ease-entrada), visibility 0s linear var(--d-normal); }
  .menu__item--sub:hover .submenu, .menu__item--sub:focus-within .submenu, .menu__item--sub.aberto .submenu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
}

/* 6. item do submenu desliza no hover */
.submenu a { transition: background var(--d-rapido) var(--ease-ui), padding-inline-start var(--d-rapido) var(--ease-ui), color var(--d-rapido) var(--ease-ui); }
@media (min-width: 900px) { .submenu a:hover, .submenu a:focus-visible { padding-inline-start: 1.1rem; } }

/* 7. botão Menu vira X */
.menu-botao__tracos, .menu-botao__tracos::before, .menu-botao__tracos::after { transition: transform var(--d-normal) var(--ease-ui), top var(--d-normal) var(--ease-ui), opacity var(--d-rapido) var(--ease-ui); }
.menu-botao[aria-expanded="true"] .menu-botao__tracos { background: transparent; }
.menu-botao[aria-expanded="true"] .menu-botao__tracos::before { top: 0; transform: rotate(45deg); }
.menu-botao[aria-expanded="true"] .menu-botao__tracos::after { top: 0; transform: rotate(-45deg); }

/* 8. painel do menu mobile desce */
@media (max-width: 899px) { .menu.aberto { animation: descer var(--d-normal) var(--ease-entrada); } }
@keyframes descer { from { opacity: 0; transform: translateY(-8px); } }

/* 9. ícone do WhatsApp balança no hover de qualquer botão verde */
.btn--zap .ico { transition: transform var(--d-rapido) var(--ease-ui); }
.btn--zap:hover .ico, .barra-topo__zap:hover .ico { animation: balanca .55s var(--ease-ui); }
@keyframes balanca { 20% { transform: rotate(-14deg); } 45% { transform: rotate(12deg); } 70% { transform: rotate(-6deg); } 100% { transform: rotate(0); } }

/* 10. botão sobe no hover, desce no clique */
.btn { transition: background var(--d-rapido) var(--ease-ui), color var(--d-rapido) var(--ease-ui), transform var(--d-rapido) var(--ease-ui), box-shadow var(--d-rapido) var(--ease-ui), background-size var(--d-normal) var(--ease-ui); }
.btn--zap:hover, .btn--marca:hover, .btn--claro:hover { transform: translateY(-1px); box-shadow: var(--sombra-3); }
.btn:active { transform: translateY(1px); box-shadow: none; }

/* 11. onda a partir do ponto do clique (botão verde) */
.btn--zap { position: relative; overflow: hidden; isolation: isolate; }
.btn--zap::after { content: ""; position: absolute; left: var(--x, 50%); top: var(--y, 50%); width: 12px; height: 12px; border-radius: 50%; background: oklch(1 0 0 / .45); transform: translate(-50%, -50%) scale(0); opacity: 0; pointer-events: none; }
.btn--zap.ondula::after { animation: onda .6s var(--ease-ui); }
@keyframes onda { 0% { transform: translate(-50%, -50%) scale(0); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(28); opacity: 0; } }

/* 12. botão de contorno preenche de baixo para cima */
.btn--contorno { background-image: linear-gradient(var(--marca-suave), var(--marca-suave)); background-size: 100% 0; background-position: bottom; background-repeat: no-repeat; }
.btn--contorno:hover, .btn--contorno:focus-visible { background-size: 100% 100%; }

/* 14. "Ver detalhes": sublinhado cresce */
.link-simples { text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 2px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size var(--d-normal) var(--ease-entrada), color var(--d-rapido); padding-block: .1rem; }
.link-simples:hover, .link-simples:focus-visible { background-size: 100% 2px; }

/* 15. anel de foco entra animado */
:focus-visible { animation: foco-entra .22s var(--ease-entrada); }
@keyframes foco-entra { from { outline-offset: 0; outline-color: transparent; } }

/* 16 e 17. "Adicionar à lista" vira "Na lista" */
[data-add] .ico { transition: transform var(--d-normal) var(--ease-entrada); }
[data-add].feito .ico { transform: rotate(90deg) scale(1.15); }
[data-add][data-na-lista="true"] { background-color: var(--marca); color: var(--texto-sobre-marca); border-color: var(--marca); background-size: 100% 0; }
[data-add][data-na-lista="true"]:hover { background-color: var(--marca-hover); border-color: var(--marca-hover); color: var(--texto-sobre-marca); }
[data-add][data-na-lista="true"] .ico { transform: rotate(45deg); }

/* 19. foto do hero com zoom lento (ambiente, uma vez) */
.hero__imagem { overflow: hidden; }
.hero__imagem img { transform-origin: 60% 50%; animation: zoom-lento 24s var(--ease-ui) forwards; }
@keyframes zoom-lento { from { transform: scale(1); } to { transform: scale(1.06); } }

/* 20. bolinhas das provas acendem em sequência */
.hero__provas li::before { transform: scale(.4); opacity: 0; animation: acende .4s var(--ease-entrada) forwards; }
.hero__provas li:nth-child(1)::before { animation-delay: .9s; } .hero__provas li:nth-child(2)::before { animation-delay: 1.02s; }
.hero__provas li:nth-child(3)::before { animation-delay: 1.14s; } .hero__provas li:nth-child(4)::before { animation-delay: 1.26s; }
@keyframes acende { to { transform: scale(1); opacity: 1; } }

/* 21. régua "desenha" os ticks ao entrar na tela */
html.js .regua svg { -webkit-mask-image: linear-gradient(90deg, #000 0 50%, transparent 50%); mask-image: linear-gradient(90deg, #000 0 50%, transparent 50%); -webkit-mask-size: 200% 100%; mask-size: 200% 100%; -webkit-mask-position: 100% 0; mask-position: 100% 0; transition: -webkit-mask-position 1.4s var(--ease-ui), mask-position 1.4s var(--ease-ui); }
html.js .regua.visivel svg { -webkit-mask-position: 0 0; mask-position: 0 0; }

/* 22. fachada: leve zoom out ao entrar na tela */
.fachada { overflow: hidden; }
html.js .fachada img { scale: 1.05; transition: scale 1.6s var(--ease-ui); }
html.js .fachada.visivel img { scale: 1; }

/* 26. card do guia: foto inclina e sobe */
.artigo-card .moldura { transition: transform var(--d-normal) var(--ease-entrada), box-shadow var(--d-normal) var(--ease-ui); }
.artigo-card:hover .moldura, .artigo-card:focus-within .moldura { transform: translateY(-3px) rotate(-.6deg); box-shadow: var(--sombra-3); }

/* 27. capa de catálogo levanta */
.catalogo .moldura { transition: transform var(--d-normal) var(--ease-entrada), box-shadow var(--d-normal) var(--ease-ui); }
.catalogo:hover .moldura, .catalogo:focus-within .moldura { transform: translateY(-6px) rotate(-1deg); box-shadow: 0 18px 30px oklch(0 0 0 / .18); }

/* 28. logo de marca ganha cor no hover */
.marcas-linha img, .marca-card__logo img { transition: filter var(--d-normal) var(--ease-ui), opacity var(--d-normal) var(--ease-ui), transform var(--d-normal) var(--ease-ui); }
@media (prefers-color-scheme: light) { :root:not([data-tema="escuro"]) .marcas-linha img, :root:not([data-tema="escuro"]) .marca-card__logo img { filter: grayscale(1); opacity: .72; } }
:root[data-tema="claro"] .marcas-linha img, :root[data-tema="claro"] .marca-card__logo img { filter: grayscale(1); opacity: .72; }
.marcas-linha li:hover img, .marca-card:hover .marca-card__logo img { filter: none !important; opacity: 1 !important; transform: scale(1.04); }
.marcas-linha li, .marca-card { transition: transform var(--d-normal) var(--ease-entrada), box-shadow var(--d-normal) var(--ease-ui), border-color var(--d-rapido); }
.marcas-linha li:hover, .marca-card:hover { transform: translateY(-2px); box-shadow: var(--sombra-2); border-color: var(--borda-controle); }

/* 29. "Para quem": barra engrossa e o título desliza */
.para-quem li { transition: border-inline-start-width var(--d-rapido) var(--ease-ui), padding-inline-start var(--d-rapido) var(--ease-ui); }
.para-quem li:hover { border-inline-start-width: 6px; padding-inline-start: calc(var(--e-2) - 3px); }
.para-quem h3 { transition: transform var(--d-normal) var(--ease-entrada), color var(--d-rapido); }
.para-quem li:hover h3 { transform: translateX(4px); color: var(--marca); }

/* 30 a 33. revelação por rolagem (só com JS; sem JS tudo aparece) */
html.js .secao__cabeca:not(.visivel), html.js .tile:not(.visivel), html.js .artigo-card:not(.visivel), html.js .passos > li:not(.visivel),
html.js .marcas-linha > li:not(.visivel), html.js .compromissos > li:not(.visivel), html.js .provas > li:not(.visivel), html.js .catalogo:not(.visivel),
html.js .marca-card:not(.visivel), html.js .para-quem > li:not(.visivel) { opacity: 0; translate: 0 18px; }
.secao__cabeca, .tile, .artigo-card, .passos > li, .marcas-linha > li, .compromissos > li, .provas > li, .catalogo, .marca-card, .para-quem > li {
  transition: opacity .55s var(--ease-ui), translate .55s var(--ease-entrada); transition-delay: calc(var(--i, 0) * 70ms); }
.provas li strong { position: relative; display: block; width: fit-content; }
.provas li strong::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--acao); transform: scaleX(0); transform-origin: left; transition: transform .7s var(--ease-entrada) .3s; }
.provas li.visivel strong::after { transform: scaleX(1); }

/* 35. contador da aba dá um pulo ao mudar */
.lista-aba__n { transition: transform var(--d-rapido) var(--ease-ui); }
.lista-aba__n.bump { animation: bump .45s var(--ease-entrada); }
@keyframes bump { 35% { transform: scale(1.4); } }

/* 36. fundo do painel escurece com fade */
.lista-fundo { animation: fade var(--d-normal) var(--ease-ui); }
@keyframes fade { from { opacity: 0; } }

/* 37 e 38. item da lista entra e sai */
.lista-item.novo { animation: entrar-item .35s var(--ease-entrada); }
@keyframes entrar-item { from { opacity: 0; transform: translateY(-8px) scale(.98); } }
.lista-item { transition: opacity .25s var(--ease-ui), transform .25s var(--ease-ui); }
.lista-item.saindo { opacity: 0; transform: translateX(24px); }

/* 40. brilho único no botão de enviar quando a lista ganha o primeiro item */
[data-lista-enviar] { position: relative; overflow: hidden; }
[data-lista-enviar].brilha::before { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, oklch(1 0 0 / .55) 50%, transparent 70%); transform: translateX(-100%); animation: brilho 1.1s var(--ease-ui) .3s forwards; pointer-events: none; }
@keyframes brilho { to { transform: translateX(100%); } }

/* 41 e 43. campos: halo no foco, rótulo acompanha */
.campo input, .campo textarea, .campo select, .lista-item__campos input { transition: border-color var(--d-rapido) var(--ease-ui), box-shadow var(--d-rapido) var(--ease-ui); }
.campo input:focus-visible, .campo textarea:focus-visible, .campo select:focus-visible, .lista-item__campos input:focus-visible { outline: none; border-color: var(--marca); box-shadow: 0 0 0 4px var(--marca-suave); }
.campo label { transition: color var(--d-rapido) var(--ease-ui); }
.campo:has(:focus-visible) label { color: var(--marca); }

/* 42. aba recolhe enquanto o painel está aberto */
.lista-aba { transition: transform var(--d-normal) var(--ease-entrada), opacity var(--d-normal) var(--ease-ui), background var(--d-rapido); }
.lista-aba.recolhida { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* 44. campo inválido treme */
.campo .invalido { border-color: var(--erro); animation: treme .4s var(--ease-ui); }
@keyframes treme { 20%, 60% { transform: translateX(-5px); } 40%, 80% { transform: translateX(5px); } }

/* 45. botão de envio em espera */
.btn.carregando { pointer-events: none; opacity: .85; }
.btn.carregando .ico { animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* 46. select com chevron que gira no foco */
.campo select { appearance: none; -webkit-appearance: none; padding-inline-end: 2.5rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231F1F1D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .8rem center; background-size: 18px; transition: background-image 0s, border-color var(--d-rapido), box-shadow var(--d-rapido); }
.campo select:focus-visible { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%239F2C2A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M18 15l-6-6-6 6'/%3E%3C/svg%3E"); }

/* 47 e 48. FAQ: resposta desce, "+" vira "×" girando */
.faq__item summary::after { content: "+"; transition: transform var(--d-normal) var(--ease-entrada), color var(--d-rapido); display: inline-block; }
.faq__item[open] summary::after { content: "+"; transform: rotate(45deg); }
.faq__item[open] > p { animation: faq-abre .32s var(--ease-entrada); }
@keyframes faq-abre { from { opacity: 0; transform: translateY(-6px); } }
.faq__item summary { transition: color var(--d-rapido) var(--ease-ui), padding-inline-start var(--d-rapido) var(--ease-ui); }
.faq__item summary:hover { color: var(--marca); }

/* 49. imagens lazy aparecem com fade */
html.js img[loading="lazy"]:not(.carregou) { opacity: 0; }
html.js img[loading="lazy"] { transition: opacity .45s var(--ease-ui); }
html.js img[loading="lazy"].carregou { opacity: 1; }

/* 50. botão "voltar ao topo" */
.topo-botao { position: fixed; left: var(--e-2); bottom: var(--e-2); z-index: 69; display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--superficie); color: var(--marca); border: 2px solid var(--borda); box-shadow: var(--sombra-2); opacity: 0; transform: translateY(16px) scale(.9); pointer-events: none; transition: opacity var(--d-normal) var(--ease-ui), transform var(--d-normal) var(--ease-entrada), background var(--d-rapido); }
.topo-botao.visivel { opacity: 1; transform: none; pointer-events: auto; }
.topo-botao:hover { background: var(--marca-suave); }
.topo-botao .ico { transform: rotate(-90deg); }

/* 51. links do rodapé deslizam */
.rodape__col li a { transition: transform var(--d-rapido) var(--ease-ui), color var(--d-rapido); }
.rodape__col li a:hover { transform: translateX(3px); }

/* 52. ícones de contato ganham escala */
.contato__bloco address .ico, .rodape__contato address .ico { transition: transform var(--d-rapido) var(--ease-entrada); }
.contato__bloco address a:hover .ico, .rodape__contato address a:hover .ico { transform: scale(1.2); }

/* 53. chips de marca sobem no hover */
.chips li { transition: transform var(--d-rapido) var(--ease-entrada), background var(--d-rapido); }
.chips li:hover { transform: translateY(-2px); background: var(--tijolo-200); }

/* 54. trilha (breadcrumb): item atual pulsa uma vez ao carregar */
.trilha li[aria-current="page"] { animation: marca-atual .8s var(--ease-entrada) .2s both; }
@keyframes marca-atual { from { color: var(--marca); transform: translateX(-4px); } }

/* freio: com preferência por menos movimento, nada se move nem some */
@media (prefers-reduced-motion: reduce) {
  .hero__imagem img, .fachada img, [data-add] .ico, .lista-aba, .topo-botao { animation: none !important; transform: none !important; }
  .secao__cabeca, .tile, .artigo-card, .passos > li, .marcas-linha > li, .compromissos > li, .provas > li, .catalogo, .marca-card, .para-quem > li,
  .regua svg, .fachada img, html.js img[loading="lazy"] { animation: none !important; opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; -webkit-mask-image: none !important; mask-image: none !important; }
  .provas li strong::after { transform: scaleX(1) !important; }
  .hero__provas li::before { opacity: 1 !important; transform: none !important; }
  .provas li strong::after { transform: scaleX(1) !important; }
  .topo-botao.visivel { opacity: 1 !important; }
}