/* Mentoria Bem-Estar · animações e micro-interações sutis
   Tudo que é movimento fica dentro de (prefers-reduced-motion: no-preference). */

/* ---------- Cabeçalho fixo com sombra suave ao rolar ---------- */
.site-header{position:sticky;top:0;z-index:20;background:var(--linho);transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 24px -16px rgba(59,42,34,.55)}

/* ---------- Links do menu: sublinhado que cresce ---------- */
a.link{position:relative;transition:color .25s ease}
a.link::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1.5px;background:var(--abobora);transition:right .3s ease}
a.link:hover::after{right:0}

/* ---------- Botões: elevam de leve e a seta anda ---------- */
.btn-acao,.btn-linha{transition:background .25s ease,transform .2s ease,box-shadow .25s ease}
.btn-acao svg,.cta svg{transition:transform .25s ease}
.btn-acao:active,.btn-linha:active{transform:translateY(0)}
a.cta{transition:color .2s ease}

@media (prefers-reduced-motion: no-preference){
  .btn-acao:hover{transform:translateY(-2px);box-shadow:var(--sombra-suave)}
  .btn-acao:hover svg,.cta:hover svg{transform:translateX(4px)}
}

/* ---------- Cartões de caminho: leve elevação no hover ---------- */
.escada article{transition:transform .3s ease,box-shadow .3s ease}
@media (prefers-reduced-motion: no-preference){
  .escada article:hover{transform:translateY(-6px);box-shadow:var(--sombra-suave)}
}

/* ---------- Retratos e hero: leve zoom dentro do recorte ---------- */
.media{overflow:hidden;border-radius:32px}
.media img{display:block;width:100%;height:auto;transition:transform .6s cubic-bezier(.22,.61,.36,1)}
@media (prefers-reduced-motion: no-preference){
  .media:hover img{transform:scale(1.045)}
}

/* ---------- Linhas de "Outras Jornadas": deslizam de leve ---------- */
.jornada-row{transition:transform .25s ease,background .25s ease}
@media (prefers-reduced-motion: no-preference){
  .jornada-row:hover{transform:translateX(5px)}
}

/* ---------- Frases (Isso é você?): leve destaque ao passar o mouse ---------- */
.frases > li{transition:transform .3s ease}
@media (prefers-reduced-motion: no-preference){
  .frases > li:hover{transform:translateY(-3px)}
  .frases > li:nth-child(even):hover{transform:translateY(53px)}
}

/* ---------- Botão flutuante do WhatsApp ---------- */
.wa-float{transition:transform .25s ease,box-shadow .25s ease}
@media (prefers-reduced-motion: no-preference){
  .wa-float:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 16px 36px -14px rgba(59,42,34,.5)}
}

/* ---------- Revelar ao rolar ---------- */
@media (prefers-reduced-motion: no-preference){
  [data-reveal]{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
  [data-reveal].in{opacity:1;transform:none}

  [data-stagger] > *{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.22,.61,.36,1),transform .6s cubic-bezier(.22,.61,.36,1)}
  [data-stagger].in > *{opacity:1;transform:none}
  [data-stagger].in > *:nth-child(1){transition-delay:0ms}
  [data-stagger].in > *:nth-child(2){transition-delay:90ms}
  [data-stagger].in > *:nth-child(3){transition-delay:180ms}
  [data-stagger].in > *:nth-child(4){transition-delay:270ms}
  [data-stagger].in > *:nth-child(5){transition-delay:360ms}
  [data-stagger].in > *:nth-child(6){transition-delay:450ms}

  /* o "translateY(56px)" das frases pares precisa ser preservado ao revelar */
  [data-stagger].in > .frases{}
  .frases > li:nth-child(even).rev-even{transform:translateY(56px)}

  /* Traço desenhando (rabiscos sob palavras em destaque) */
  [data-draw] path{stroke-dasharray:260;stroke-dashoffset:260;transition:stroke-dashoffset 1.1s ease .25s}
  [data-draw].in path{stroke-dashoffset:0}
}

/* ---------- Menu mobile ---------- */
.mobile-nav{display:none;flex-direction:column;background:var(--linho);border-bottom:1px solid var(--linha);overflow:hidden}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:14px 0;color:var(--cacau);text-decoration:none;font-size:18px;font-weight:500;border-bottom:1px solid var(--linha)}
.mobile-nav a:last-child{border-bottom:0}
@media (prefers-reduced-motion: no-preference){
  .mobile-nav a{transition:color .2s ease,padding-left .2s ease}
  .mobile-nav a:hover{color:var(--abobora-texto);padding-left:6px}
}
@container site (min-width: 961px){.mobile-nav{display:none !important}}

/* ---------- Banner de cookies (LGPD) ---------- */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:40;max-width:720px;margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:16px 20px;background:var(--papel);color:var(--cacau);border:1px solid var(--linha);border-radius:16px;box-shadow:var(--sombra-suave);font-size:14px;line-height:1.5}
.cookie-banner[hidden]{display:none}
.cookie-banner p{margin:0;flex:1 1 260px}
.cookie-banner a{color:var(--abobora-texto);font-weight:600}
.cookie-acoes{display:flex;gap:10px;flex-wrap:wrap}
.cookie-btn,.cookie-btn-linha{min-height:42px;padding:0 18px;border-radius:999px;font:600 14px/1 var(--font-texto);cursor:pointer;transition:background .2s ease,transform .2s ease}
.cookie-btn{border:0;background:var(--acao);color:var(--on-acao)}
.cookie-btn-linha{background:transparent;border:1.5px solid var(--linha-forte);color:var(--cacau)}
@media (prefers-reduced-motion: no-preference){
  .cookie-btn:hover{background:var(--acao-hover)}
  .cookie-banner:not([hidden]){animation:cookie-sobe .4s ease}
}
@keyframes cookie-sobe{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}