/* Estilos complementares ao Tailwind. A maior parte do visual está nas classes do HTML. */

html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3 { text-wrap: balance; }

.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-fill { fill: currentColor; stroke: none; }

:focus-visible { outline: 3px solid #2A6F75; outline-offset: 3px; border-radius: 6px; }

/* Filtro de cursos */
.tab[aria-selected="true"] { background: #2A6F75; color: #fff; border-color: #2A6F75; }
.course-card[hidden] { display: none; }

/* Animação de entrada (desativada para quem prefere menos movimento) */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .5s ease-out, transform .5s ease-out; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* FAQ */
details > summary { list-style: none; cursor: pointer; }
details > summary::-webkit-details-marker { display: none; }
details[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease-out; }

/* Menu mobile */
#mobile-menu[hidden] { display: none; }