/* ==========================================================================
   Dr. Ronan de Oliveira — Camada de design premium
   Tipografia editorial + motion system + micro-detalhes.
   Carregado DEPOIS do <style> inline de cada página — herda os tokens de cor
   já definidos (--ink, --slate, --blue, --blue-deep, --gold-light, --amber,
   --gold-mid, --bronze, --bg, --bg-alt, --white, --border, --radius) e não
   define nenhuma cor nova.
   ========================================================================== */

:root{
  --font-display:'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:'Plus Jakarta Sans', 'Segoe UI', Arial, Helvetica, sans-serif;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-expo: cubic-bezier(0.87, 0, 0.13, 1);

  --dur-fast: 220ms;
  --dur-normal: 480ms;
  --dur-slow: 800ms;
}

/* ---- tipografia base ---- */
body{font-family:var(--font-body);}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  text-wrap:balance;
}
.voice{font-family:var(--font-display);font-style:italic;font-weight:400;letter-spacing:0;}

/* ---- logo encolhe ao rolar a página ---- */
.brand img{
  transition:width var(--dur-normal) var(--ease-out-expo),
             height var(--dur-normal) var(--ease-out-expo);
}
header.scrolled .brand img{
  width:42px !important;
  height:42px !important;
}

/* ---- escala fluida nos títulos principais ---- */
.hero h1{
  font-size:clamp(1.9rem, 1.5rem + 2.4vw, 3.5rem);
  line-height:1.1;
  letter-spacing:-0.03em;
  font-weight:600;
}
.hero h1 em{font-style:italic;font-weight:500;}
.curso-hero h1{
  font-size:clamp(2.25rem, 1.6rem + 3.2vw, 4rem);
  line-height:1.04;
  letter-spacing:-0.03em;
}
.sobre-copy h1{
  font-size:clamp(2.25rem, 1.6rem + 3vw, 3.75rem);
  line-height:1.04;
  letter-spacing:-0.03em;
}
.section-head h1{
  font-size:clamp(2.25rem, 1.7rem + 2.6vw, 3.5rem);
  letter-spacing:-0.03em;
}
.section-head h2{
  font-size:clamp(1.85rem, 1.5rem + 1.8vw, 2.75rem);
  letter-spacing:-0.025em;
}
.cta-final h2{font-size:clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);}
.curso-card h3{font-family:var(--font-display);font-weight:600;letter-spacing:-0.015em;}
.blog-card h4{font-family:var(--font-display);font-weight:600;letter-spacing:-0.01em;}
.dif-card h4{font-family:var(--font-display);font-weight:600;}
.info-card h3{font-family:var(--font-display);font-weight:600;}
.sobre-copy h2{font-family:var(--font-display);}

/* números grandes (stat-strip, stat-card) ganham peso editorial */
.stat-strip .num,
.stat-card .num{
  font-family:var(--font-display);
  font-weight:600;
  letter-spacing:-0.02em;
  font-variant-numeric:tabular-nums;
}

/* ---- micro-detalhes ---- */
::selection{background:var(--gold-light);color:var(--blue-deep);}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;}

a, .btn, .curso-card, .depo-card, .dif-card, .blog-card, .stat-card, .curso-thumb, .nav-cta{
  transition:transform var(--dur-fast) var(--ease-out-expo),
             box-shadow var(--dur-fast) var(--ease-out-expo),
             background var(--dur-fast) var(--ease-out-expo),
             color var(--dur-fast) var(--ease-out-expo),
             border-color var(--dur-fast) var(--ease-out-expo);
}

.btn-primary:hover{transform:translateY(-2px);}
.btn-ghost:hover{transform:translateY(-2px);}
.nav-cta:hover{transform:translateY(-1px);}

.curso-card:hover{
  transform:translateY(-6px);
  box-shadow:0 18px 36px rgba(13,33,56,.16);
}
.depo-card:hover, .dif-card:hover, .blog-card:hover, .stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(13,33,56,.10);
}

/* sublinhado animado nos links de texto */
.curso-card .link, .sobre-copy .link{
  position:relative;
  display:inline-block;
}
.curso-card .link::after, .sobre-copy .link::after{
  content:"";
  position:absolute;left:0;bottom:-2px;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:right;
  transition:transform var(--dur-normal) var(--ease-out-expo);
}
.curso-card:hover .link::after, .sobre-copy .link:hover::after{
  transform:scaleX(1);
  transform-origin:left;
}

/* ---- coreografia de entrada do hero (acima da dobra, sem JS) ---- */
.hero-inner > *,
.curso-hero-inner > *,
.sobre-hero .sobre-copy > *,
.page-hero .section-head > *{
  opacity:0;
  transform:translateY(28px);
  animation:heroReveal var(--dur-slow) var(--ease-out-expo) forwards;
}
.hero-inner > *:nth-child(1), .curso-hero-inner > *:nth-child(1), .sobre-hero .sobre-copy > *:nth-child(1), .page-hero .section-head > *:nth-child(1){animation-delay:.05s;}
.hero-inner > *:nth-child(2), .curso-hero-inner > *:nth-child(2), .sobre-hero .sobre-copy > *:nth-child(2), .page-hero .section-head > *:nth-child(2){animation-delay:.16s;}
.hero-inner > *:nth-child(3), .curso-hero-inner > *:nth-child(3), .sobre-hero .sobre-copy > *:nth-child(3), .page-hero .section-head > *:nth-child(3){animation-delay:.27s;}
.hero-inner > *:nth-child(4), .curso-hero-inner > *:nth-child(4), .sobre-hero .sobre-copy > *:nth-child(4){animation-delay:.38s;}
.hero-inner > *:nth-child(5), .curso-hero-inner > *:nth-child(5), .sobre-hero .sobre-copy > *:nth-child(5){animation-delay:.49s;}
.hero-inner > *:nth-child(6), .curso-hero-inner > *:nth-child(6), .sobre-hero .sobre-copy > *:nth-child(6){animation-delay:.60s;}
.hero > img{
  opacity:0;
  transform:translateY(20px) scale(1.02);
  animation:heroReveal var(--dur-slower, 1000ms) var(--ease-out-expo) forwards;
  animation-delay:.2s;
}
.hero .wrap > img{
  opacity:0;
  transform:scale(1.03);
  animation:heroImageReveal 1.1s var(--ease-out-expo) forwards;
  animation-delay:.15s;
}
.sobre-hero .sobre-grid > img{
  opacity:0;
  transform:scale(1.03);
  animation:heroImageReveal 1.1s var(--ease-out-expo) forwards;
  animation-delay:.1s;
}
@keyframes heroReveal{to{opacity:1;transform:translateY(0);}}
@keyframes heroImageReveal{to{opacity:1;transform:scale(1);}}

.hero .stat-strip{
  opacity:0;
  transform:translateY(24px);
  animation:heroReveal var(--dur-slow) var(--ease-out-expo) forwards;
  animation-delay:.62s;
}

/* ---- scroll reveal genérico (ativado via JS: .reveal-ready -> .is-visible) ---- */
.reveal-ready{
  opacity:0;
  transform:translateY(36px);
  transition:opacity var(--dur-slow) var(--ease-out-expo),
             transform var(--dur-slow) var(--ease-out-expo);
}
.reveal-ready.is-visible{opacity:1;transform:translateY(0);}

/* linha do tempo (Sobre) — a linha "cresce" junto da revelação */
.timeline::before{
  transform-origin:top;
  transform:scaleY(0);
  transition:transform 1.1s var(--ease-in-out-expo);
}
.timeline.is-visible::before{transform:scaleY(1);}
.timeline li{
  opacity:0;
  transform:translateX(-14px);
  transition:opacity var(--dur-normal) var(--ease-out-expo),
             transform var(--dur-normal) var(--ease-out-expo);
}
.timeline.is-visible li{opacity:1;transform:translateX(0);}

@media(prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
  .hero-inner > *, .curso-hero-inner > *, .sobre-hero .sobre-copy > *,
  .hero > img, .hero .wrap > img, .reveal-ready, .timeline li{opacity:1;transform:none;}
  .timeline::before{transform:scaleY(1);}
}