/* =====================================================================
   Melhorias progressivas — impressão, acessibilidade, micro-interações
   e polimento de componentes (aplicadas sobre styles.css / app.css)
   ===================================================================== */

/* ----------------------------------------------------------------
   A. Refinamento tipográfico de leitura
   ---------------------------------------------------------------- */
.section__intro, .sobre__text p, .acc__panel p { text-wrap: pretty; }
.hero__title, .section__title, .cta__title { text-wrap: balance; }
p a:not(.btn):not(.nav__link) {
  color: var(--caramel-400); text-decoration: underline;
  text-decoration-color: var(--gold-300); text-underline-offset: 3px;
  transition: text-decoration-color var(--t-fast) var(--ease), color var(--t-fast);
}
p a:not(.btn):not(.nav__link):hover { color: var(--espresso-800); text-decoration-color: var(--caramel-500); }

/* ----------------------------------------------------------------
   B. Polimento de cartões — brilho diagonal sutil no hover
   ---------------------------------------------------------------- */
.card, .postcard, .mcard, .stat { isolation: isolate; }
.card::after, .mcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: radial-gradient(60% 60% at 50% 0%, rgba(184,137,63,0.10), transparent 70%);
  opacity: 0; transition: opacity var(--t-med) var(--ease);
}
.card:hover::after, .mcard:hover::after { opacity: 1; }

/* Realce do número dos passos quando a seção está visível */
.step.reveal[data-visible="true"] .step__num { animation: popIn 520ms var(--ease) backwards; }
@keyframes popIn { 0% { transform: scale(0.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* ----------------------------------------------------------------
   C. Variações de reveal (entrada por direção)
   ---------------------------------------------------------------- */
[data-reveal][data-reveal-dir="left"]  { transform: translateX(-34px); }
[data-reveal][data-reveal-dir="right"] { transform: translateX(34px); }
[data-reveal][data-reveal-dir="scale"] { transform: scale(0.94); }
[data-reveal][data-reveal-dir][data-visible="true"] { transform: none; }

/* ----------------------------------------------------------------
   D. Estados de foco mais visíveis por componente (acessibilidade)
   ---------------------------------------------------------------- */
.btn:focus-visible, .nav__cta:focus-visible { outline: 3px solid var(--espresso-800); outline-offset: 3px; }
.btn--primary:focus-visible { outline-color: var(--espresso-900); }
.acc__head:focus-visible { outline: 2px solid var(--gold-500); outline-offset: -2px; }
.side__link:focus-visible { outline: 2px solid var(--gold-400); outline-offset: -2px; }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: none; }
.fab-wpp:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Área de toque mínima em telas sensíveis ao toque */
@media (pointer: coarse) {
  .nav__link { padding-block: var(--fib-3); }
  .footer__col a { padding-block: var(--fib-2); }
  .icon-btn { min-width: 2.6rem; min-height: 2.6rem; }
}

/* ----------------------------------------------------------------
   E. Botão "voltar ao topo" — anel de leitura
   ---------------------------------------------------------------- */
.to-top { overflow: hidden; }
.to-top::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  background: conic-gradient(var(--gold-400) calc(var(--read, 0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 0);
  opacity: 0.9;
}

/* ----------------------------------------------------------------
   F. Skeleton de carregamento para imagens do blog
   ---------------------------------------------------------------- */
.postcard__cover { position: relative; }
.postcard__cover img { background: linear-gradient(90deg, var(--linen-100) 25%, var(--linen-200) 37%, var(--linen-100) 63%); background-size: 400% 100%; }
.postcard__cover img[src] { animation: none; }

/* ----------------------------------------------------------------
   G. Suporte a modo de alto contraste / forced-colors (Windows)
   ---------------------------------------------------------------- */
@media (forced-colors: active) {
  .btn, .nav__cta, .card, .panel, .stat, .acc__item, .litem, .input, .modal { border: 1px solid CanvasText; }
  .btn--primary, .step__num, .reset__letter { forced-color-adjust: none; }
  .hero__orb, .hero__grain, .marquee { display: none; }
}

/* Respeita preferência por menos dados — esconde texturas pesadas */
@media (prefers-reduced-data: reduce) {
  .hero__grain, .mentoria__bg, .cta__bg { display: none; }
}

/* ----------------------------------------------------------------
   H. Seleção de texto contextual (claro x escuro)
   ---------------------------------------------------------------- */
.mentoria ::selection, .cta ::selection, .footer ::selection, .auth__aside ::selection, .side ::selection {
  background: var(--gold-400); color: var(--espresso-900);
}

/* ----------------------------------------------------------------
   I. Animação de abertura do menu mobile (itens em cascata)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {
  .nav[data-open="true"] .nav__link, .nav[data-open="true"] .nav__cta {
    animation: navItemIn 420ms var(--ease) backwards;
  }
  .nav[data-open="true"] .nav__link:nth-child(2) { animation-delay: 60ms; }
  .nav[data-open="true"] .nav__link:nth-child(3) { animation-delay: 110ms; }
  .nav[data-open="true"] .nav__link:nth-child(4) { animation-delay: 160ms; }
  .nav[data-open="true"] .nav__link:nth-child(5) { animation-delay: 210ms; }
  .nav[data-open="true"] .nav__link:nth-child(6) { animation-delay: 260ms; }
  .nav[data-open="true"] .nav__cta { animation-delay: 320ms; }
}
@keyframes navItemIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------
   J. Detalhes de marca — divisores e citação
   ---------------------------------------------------------------- */
.divider-mono { display: flex; align-items: center; gap: var(--fib-5); color: var(--gold-300); }
.divider-mono::before, .divider-mono::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); }

/* Realce de campo inválido após tentativa de envio */
.input:user-invalid, .textarea:user-invalid { border-color: #d4654b; box-shadow: 0 0 0 4px rgba(212,101,75,0.14); }

/* Cartão do hero com profundidade ao passar o mouse no wrapper */
.hero__visual { perspective: 1000px; }
.hero__card { transform-style: preserve-3d; }

/* ----------------------------------------------------------------
   K. Impressão (currículo/uso offline da página)
   ---------------------------------------------------------------- */
@media print {
  .header, .fab-wpp, .to-top, .scroll-progress, .hero__scroll, .marquee, .nav, .hamburger, .cta__actions, .hero__actions { display: none !important; }
  body { color: #000; background: #fff; }
  .hero, .section, .mentoria, .cta { padding-block: 1rem !important; min-height: auto !important; }
  .mentoria, .cta { background: #fff !important; color: #000 !important; }
  .section__title, .hero__title, .cta__title, h1, h2, h3 { color: #000 !important; }
  .card, .postcard, .pillar, .reset__step { box-shadow: none !important; border: 1px solid #ccc !important; break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
}