/* Faculdade ITA Educacional — animações e conforto visual (Veduc) */

.btn--ghost { background: transparent; color: var(--roxo); border: 2px solid var(--lilas-borda); }
.btn--ghost:hover { border-color: var(--roxo); background: var(--lilas-claro); color: var(--roxo); }

/* Seletor centralizado na seção de cursos */
.picker--center { margin: 0 auto 40px; max-width: 780px; text-align: center; box-shadow: none; background: var(--lilas-claro); border-color: transparent; }
.picker--center .picker__chips { justify-content: center; }

/* ---------- Conforto visual ---------- */
body { line-height: 1.7; }
.section { padding: 88px 0; }
@media (max-width: 700px) { .section { padding: 64px 0; } }
.section__head { margin-bottom: 48px; }
.topbar { transition: box-shadow .3s ease, background-color .3s ease; }
.topbar.is-scrolled { box-shadow: 0 8px 24px -16px rgba(59, 32, 80, .35); }

/* Botões: brilho suave no hover */
.btn { position: relative; overflow: hidden; }
.btn--wa::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent);
  transform: skewX(-20deg); transition: left .7s ease;
}
.btn--wa:hover::after { left: 130%; }

/* Cards */
.feat { transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
.feat:hover { transform: translateY(-4px); box-shadow: var(--sombra); border-color: transparent; }
.feat__ico, .persona__ico { transition: transform .35s ease; }
.feat:hover .feat__ico, .persona:hover .persona__ico { transform: scale(1.08) rotate(-4deg); }
.persona { transition: transform .35s ease; }
.persona:hover { transform: translateY(-4px); }
.turma { transition: transform .35s ease, box-shadow .35s ease; }
.turma:hover { transform: translateY(-3px); }

/* Imagens */
.gallery img, .unit img { transition: transform .8s cubic-bezier(.2, .7, .2, 1), filter .5s ease; }
.gallery img:hover { transform: scale(1.025); }
.unit { overflow: hidden; }
.unit:hover img { transform: scale(1.04); }

/* FAQ */
.faq details { transition: box-shadow .3s ease, border-color .3s ease; }
.faq details[open] { box-shadow: 0 10px 30px -18px rgba(59, 32, 80, .35); border-color: transparent; }
.faq details[open] p { animation: faqIn .45s ease both; }
.faq summary::after { transition: transform .3s ease; }

/* WhatsApp flutuante: anel pulsante */
.wa-float::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid var(--wa); animation: ring 2.6s ease-out infinite;
}

/* ---------- Entrada do hero ---------- */
html.js .hero__in { opacity: 0; transform: translateY(18px); animation: heroIn .9s cubic-bezier(.2, .7, .2, 1) forwards; animation-delay: calc(var(--d, 0) * .12s + .1s); }

/* ---------- Revelar ao rolar ---------- */
/* usa translate/scale (e não transform) para não anular os efeitos de hover dos cards */
html.js [data-reveal] {
  opacity: 0; translate: 0 26px;
  transition:
    opacity .9s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s),
    translate .9s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s),
    scale .9s cubic-bezier(.2, .7, .2, 1) var(--delay, 0s),
    transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
html.js [data-reveal="zoom"] { translate: none; scale: .95; }
html.js [data-reveal="left"] { translate: -28px 0; }
html.js [data-reveal="right"] { translate: 28px 0; }
html.js [data-reveal].is-in { opacity: 1; translate: none; scale: none; }

@keyframes heroIn { to { opacity: 1; transform: none; } }
@keyframes dotPulse { 0% { box-shadow: 0 0 0 0 rgba(31, 175, 84, .55); } 80%, 100% { box-shadow: 0 0 0 10px rgba(31, 175, 84, 0); } }
@keyframes ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.js .hero__in, html.js [data-reveal] { opacity: 1 !important; transform: none !important; translate: none !important; scale: none !important; animation: none !important; transition: none !important; }
  .dot, .wa-float::before { animation: none !important; }
}

/* Números animados herdam o tamanho do destaque */
.stats strong span { font-size: inherit; opacity: 1; font-variant-numeric: tabular-nums; }