/* Tribuna · camada INTERATIVA (opcional, por site: site.json "interativo": {...}).
   Pedido do Mateus em 29/09 para o site da Dra. Cinthya: no celular o texto longo ficava denso e parado.
   Esta camada só MOSTRA de forma progressiva — nenhum texto é cortado do HTML.

   Regra de ouro: tudo aqui depende de classes que o interativo.js coloca no <html>:
     html.ia       -> recursos de leitura (ler mais, acordeão, carrossel, barra do WhatsApp)
     html.ia-anim  -> animações ao rolar (só sem prefers-reduced-motion e com IntersectionObserver)
   Sem JS (ou se o JS falhar antes de pôr a classe) o site fica exatamente como o molde: tudo aberto e visível.
   No computador (> 768px) a leitura continua toda aberta; só as animações valem nos dois. */

/* ---------- elementos criados pelo JS: escondidos no computador ---------- */
/* os parágrafos do "sobre" mudam de pai (corpo do "continuar lendo" / acordeão): mesmo visual do .bio>p */
.bio .ia-lm__corpo>p,.bio .ia-acc p{color:#D2CBBE;margin-top:18px}
[data-fundo^="claro"] .bio .ia-lm__corpo>p,[data-fundo^="claro"] .bio .ia-acc p{color:#3D4760}
html[data-fundo="claro-bordo"] .bio .ia-lm__corpo>p,html[data-fundo="claro-bordo"] .bio .ia-acc p{color:#3F3639}
.ia-lm__btn,.ia-acc__h,.ia-dots,.ia-barra{display:none}
/* a margem do 1º parágrafo foi para a caixa .ia-lm (JS); aqui dentro ela viraria vão */
html.ia .ia-lm__corpo>p:first-child,html.ia .ia-lm__corpo>:first-child{margin-top:0}

@media (max-width:768px){
  /* ritmo vertical mais curto no celular: menos rolagem entre seções */
  html.ia .sec{padding:64px 0}
  html.ia .destaques{padding-bottom:8px}

  /* ---------- 1. "Continuar lendo" ---------- */
  html.ia .ia-lm__corpo{position:relative;overflow:hidden;max-height:var(--ia-lm-min,5.6em);transition:max-height .5s var(--ease);-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}
  html.ia .ia-lm.is-aberto .ia-lm__corpo{-webkit-mask-image:none;mask-image:none}
  html.ia .ia-lm__btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:6px;padding:0;border:0;background:none;cursor:pointer;font:800 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}
  html.ia .ia-lm__btn svg{width:16px;height:16px;transition:transform .35s var(--ease)}
  html.ia .ia-lm.is-aberto .ia-lm__btn svg{transform:rotate(180deg)}

  /* ---------- 3. Acordeão (os "porquês" do sobre) ---------- */
  html.ia .ia-acc{margin-top:18px;border-top:1px solid color-mix(in srgb,var(--ouro) 28%,transparent)}
  html.ia .ia-acc__item{border-bottom:1px solid color-mix(in srgb,var(--ouro) 28%,transparent)}
  html.ia .ia-acc__h{display:block;margin:0;font:inherit}
  html.ia .ia-acc__btn{display:flex;width:100%;align-items:center;justify-content:space-between;gap:12px;min-height:52px;padding:10px 2px;border:0;background:none;cursor:pointer;text-align:left;font:600 19px/1.3 var(--serif);color:var(--txt)}
  html.ia .ia-acc__btn::after{content:"";flex:none;width:10px;height:10px;margin-right:6px;border-right:2px solid var(--ouro);border-bottom:2px solid var(--ouro);transform:translateY(-3px) rotate(45deg);transition:transform .35s var(--ease)}
  html.ia .ia-acc__item.is-aberto .ia-acc__btn::after{transform:translateY(2px) rotate(-135deg)}
  html.ia .ia-acc__corpo{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s var(--ease)}
  html.ia .ia-acc__item.is-aberto .ia-acc__corpo{grid-template-rows:1fr}
  html.ia .ia-acc__corpo>div{overflow:hidden;min-height:0}
  html.ia .ia-acc__corpo p{margin:0 0 16px!important}
  html.ia .bio .ia-acc + p{margin-top:18px}

  /* ---------- 2. Carrossel de arrastar ---------- */
  html.ia .ia-car{display:flex!important;align-items:stretch;gap:14px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(50% - 50vw);padding:6px calc(50vw - 50%) 16px;scroll-padding-inline:var(--ia-car-pad,16px);scrollbar-width:none;columns:auto!important;column-gap:normal}
  html.ia .ia-car::-webkit-scrollbar{display:none}
  /* "Como atua": o card aberto no "continuar lendo" não estica os vizinhos em branco */
  html.ia .mani__grid.ia-car{align-items:flex-start}
  html.ia .ia-car>*{flex:0 0 min(84%,340px);scroll-snap-align:start;margin:0!important;grid-column:auto!important}
  html.ia .ia-car>.rv{opacity:1;transform:none;transition:none}
  html.ia .ia-car>.card:hover{transform:none}
  html.ia .aval .ia-car .rev--extra,html.ia .aval .ia-car .rev--extra-m{display:block!important}
  html.ia .aval .aval__mais{display:none}
  html.ia .ia-dots{display:flex;align-items:center;justify-content:center;gap:2px;margin-top:4px}
  html.ia .ia-dots button{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;background:none;cursor:pointer}
  html.ia .ia-dots button::before{content:"";width:8px;height:8px;border-radius:99px;background:color-mix(in srgb,var(--ouro) 30%,transparent);transition:width .3s var(--ease),background-color .3s}
  html.ia .ia-dots button[aria-current="true"]::before{width:22px;background:var(--ouro)}
  html.ia .ia-dots__cont{min-width:64px;text-align:center;font:700 13px/1 var(--sans);letter-spacing:.08em;color:var(--muted)}
  html.ia .ia-dots__barra{position:relative;width:120px;height:3px;border-radius:3px;margin-right:10px;background:color-mix(in srgb,var(--ouro) 22%,transparent);overflow:hidden}
  html.ia .ia-dots__barra i{position:absolute;inset:0 auto 0 0;width:var(--ia-prog,10%);border-radius:3px;background:var(--ouro);transition:width .25s var(--ease)}

  /* ---------- 5. Barra fixa do WhatsApp (substitui o botão redondo no celular) ---------- */
  html.ia .wa{display:none!important}
  html.ia .ia-barra{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;align-items:center;justify-content:center;gap:10px;min-height:56px;
    padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--wa,var(--escuro,#16213A));color:#fff;text-decoration:none;
    font:700 15px/1.25 var(--sans);box-shadow:0 -12px 30px -14px rgba(0,0,0,.45);transform:translateY(110%);transition:transform .35s var(--ease)}
  html.ia .ia-barra .i{width:22px;height:22px;flex:none}
  html.ia .ia-barra:focus-visible{outline:3px solid #fff;outline-offset:-6px}
  html.ia.ia-barra-on .ia-barra{transform:none}
  html.ia.ia-barra-on body{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
}
.ia-lm__btn:focus-visible,.ia-acc__btn:focus-visible,.ia-dots button:focus-visible{outline:2px solid var(--ouro);outline-offset:3px;border-radius:6px}

/* ---------- 4. Animações ao rolar (só com html.ia-anim) ---------- */
/* títulos palavra por palavra */
html.ia-anim .ia-split.rv,html.ia-anim .ia-split{opacity:1;transform:none}
html.ia-anim .ia-split .ia-w{display:inline-block;opacity:0;transform:translateY(.45em);transition:opacity .45s var(--ease) calc(var(--i) * 45ms),transform .5s var(--ease) calc(var(--i) * 45ms)}
html.ia-anim .ia-split.ia-vis .ia-w{opacity:1;transform:none}
/* parágrafos sobem com leve desfoque (uma vez) */
html.ia-anim .ia-sobe{opacity:0;transform:translateY(14px);filter:blur(5px);transition:opacity .5s var(--ease),transform .5s var(--ease),filter .5s var(--ease)}
html.ia-anim .ia-sobe.ia-vis{opacity:1;transform:none;filter:none}
/* fotos: revelação por máscara */
html.ia-anim .ia-mascara{clip-path:inset(0 0 100% 0 round 22px);transition:clip-path .9s cubic-bezier(.65,0,.2,1)}
html.ia-anim .ia-mascara.ia-vis{clip-path:inset(0 0 0 0 round 22px)}
/* frase de destaque: o marcador se preenche com a rolagem (sem JS / sem animação: preenchido) */
.ia-marca{display:inline;color:inherit;font:inherit;background-color:transparent;background-image:linear-gradient(color-mix(in srgb,var(--ouro) 24%,transparent),color-mix(in srgb,var(--ouro) 24%,transparent));background-repeat:no-repeat;background-position:0 88%;background-size:calc(var(--p,1) * 100%) .34em;-webkit-box-decoration-break:clone;box-decoration-break:clone}