/* Página da avaliação online: o caminho até o laudo como uma amarelinha, guiado pela Lumi (Eduardo, 04/11/2026).
   Celular: casas de cima para baixo (4 e 5 lado a lado, como na amarelinha). Computador: da esquerda para a direita. */
.amarelinha-section{background-color:transparent}
.amarelinha-intro{max-width:640px;margin:10px auto 0;color:var(--muted-foreground,#65777b)}
.amarelinha-palco{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:26px}
.amarelinha{list-style:none;margin:0;padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:0;width:100%;max-width:420px;
  background:#fff;border:1px solid #dce9e5;border-radius:22px;box-shadow:0 18px 40px rgba(0,97,95,.08)}
.casa{position:relative;display:flex;flex-direction:column;justify-content:center;gap:4px;min-height:118px;padding:14px 16px 14px 62px;
  border:3px solid #fff;margin:-1.5px;background:var(--casa,#d7f3ec);color:#20343b;text-align:left}
.casa strong{font:800 17px/1.15 var(--font-display,Outfit,sans-serif)}
.casa span:not(.casa-n){font-size:14px;line-height:1.35;color:#3d5257}
.casa-n{position:absolute;left:14px;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:#fff;color:var(--casa-forte,#00615f);font:800 20px/1 var(--font-display,Outfit,sans-serif);box-shadow:0 2px 0 rgba(0,0,0,.06)}
.casa-1{--casa:#e3f4ef;--casa-forte:#00615f;grid-column:1/-1;border-radius:14px 14px 0 0}
.casa-2{--casa:#e5f1f8;--casa-forte:#1f6aa5;grid-column:1/-1}
.casa-3{--casa:#fbf3dc;--casa-forte:#9a6b00;grid-column:1/-1}
.casa-4{--casa:#fbe9e5;--casa-forte:#b4483c}
.casa-5{--casa:#eeeaf8;--casa-forte:#5b47a8}
.casa-4,.casa-5{padding:58px 12px 14px;text-align:center;align-items:center}
.casa-4 .casa-n,.casa-5 .casa-n{left:50%;top:12px;transform:translateX(-50%)}
.casa-6{--casa:#e3f4ef;--casa-forte:#00615f;grid-column:1/-1}
.casa-ceu{--casa:#fbefcc;--casa-forte:#8a5a00;grid-column:1/-1;min-height:150px;border-radius:0 0 50% 50%/0 0 42% 42%;
  padding:16px 30px 34px 70px;background:radial-gradient(circle at 50% 0,#fffaf0,#fbefcc 75%)}
.amarelinha-lumi{margin:0;display:flex;align-items:center;gap:10px;width:100%;max-width:420px}
.amarelinha-lumi img{width:84px;height:84px;flex:0 0 auto;object-fit:contain}
.amarelinha-balao{position:relative;background:#fff;border:2px solid #cfe5e1;border-radius:16px;padding:10px 14px;font:700 15px/1.3 var(--font-display,Outfit,sans-serif);color:#20343b;box-shadow:0 6px 16px rgba(32,52,59,.06)}
.amarelinha-balao::before{content:"";position:absolute;left:-9px;top:50%;width:14px;height:14px;background:#fff;border-left:2px solid #cfe5e1;border-bottom:2px solid #cfe5e1;transform:translateY(-50%) rotate(45deg)}
.amarelinha-lumi-meio{display:none}
.amarelinha-lumi-fim{flex-direction:row-reverse;justify-content:flex-start}
.amarelinha-lumi-fim .amarelinha-balao::before{left:auto;right:-9px;transform:translateY(-50%) rotate(225deg)}
.amarelinha-nota{max-width:640px;margin:18px auto 0;text-align:center;font-size:14px;color:var(--muted-foreground,#65777b)}
.amarelinha-acao{display:flex;justify-content:center;margin-top:16px}
/* Computador: casas da esquerda para a direita, 4 e 5 uma sobre a outra, o céu no fim. */
@media(min-width:900px){
  .amarelinha-palco{display:grid;grid-template-columns:130px minmax(0,1fr) 150px;align-items:end;gap:14px;padding-top:86px}
  .amarelinha{max-width:none;grid-template-columns:repeat(5,minmax(0,1fr)) minmax(0,1.2fr);grid-template-rows:auto auto;padding:16px}
  .casa{grid-column:auto;min-height:150px;padding:58px 14px 16px;text-align:center;align-items:center;border-radius:0}
  .casa .casa-n{left:50%;top:12px;transform:translateX(-50%)}
  .casa-1{grid-column:1;grid-row:1/3;border-radius:14px 0 0 14px}
  .casa-2{grid-column:2;grid-row:1/3}
  .casa-3{grid-column:3;grid-row:1/3}
  .casa-4{grid-column:4;grid-row:1}
  .casa-5{grid-column:4;grid-row:2}
  .casa-6{grid-column:5;grid-row:1/3}
  .casa-ceu{grid-column:6;grid-row:1/3;min-height:0;border-radius:0 50% 50% 0/0 46% 46% 0;padding:58px 34px 16px 18px}
  .amarelinha-lumi{flex-direction:column;align-items:center;gap:6px;max-width:none}
  .amarelinha-lumi img{width:120px;height:120px}
  .amarelinha-lumi .amarelinha-balao{text-align:center;font-size:14px}
  .amarelinha-lumi .amarelinha-balao::before{left:50%;top:auto;bottom:-9px;transform:translateX(-50%) rotate(-45deg)}
  .amarelinha-lumi-inicio{grid-column:1;grid-row:1;flex-direction:column-reverse}
  .amarelinha-lumi-fim{grid-column:3;grid-row:1;flex-direction:column-reverse}
  .amarelinha-lumi-fim .amarelinha-balao::before{left:50%;right:auto;bottom:-9px;transform:translateX(-50%) rotate(-45deg)}
  .amarelinha{grid-column:2;grid-row:1}
  .amarelinha-lumi-meio{display:flex;position:absolute;top:0;left:calc(130px + 14px + (100% - 130px - 150px - 28px) * .62);transform:translateX(-50%);flex-direction:row;width:auto}
  .amarelinha-lumi-meio img{width:76px;height:76px}
  .amarelinha-lumi-meio .amarelinha-balao::before{left:-9px;top:50%;bottom:auto;transform:translateY(-50%) rotate(45deg)}
}
/* Pulinho de casa em casa quando a seção aparece (só onde o navegador suporta; respeita quem reduz animações). */
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:view()){
    .casa{animation:amarelinha-pulo linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
    .amarelinha-lumi img{animation:amarelinha-lumi linear both;animation-timeline:view();animation-range:entry 10% cover 40%}
  }
}
@keyframes amarelinha-pulo{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes amarelinha-lumi{from{transform:translateY(16px) rotate(-6deg)}to{transform:none}}
/* Lumi do meio dentro do caminho no celular (entre a casa 3 e a 4); no computador ela fica em cima das casas. */
.casa-lumi{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:10px 4px;margin:0;background:#fff}
.casa-lumi img{width:72px;height:72px;object-fit:contain;flex:0 0 auto}
@media(min-width:900px){.casa-lumi{display:none}}
/* Um símbolo por dobra, numa cor só (verde-azulado da marca), grande e quase transparente (Eduardo, 04/11/2026). */
.simbolo{position:relative;overflow:hidden}
.simbolo>.container{position:relative;z-index:1}
.simbolo::before{content:"";position:absolute;z-index:0;width:min(46vw,320px);aspect-ratio:1;background:no-repeat center/contain;opacity:.07;pointer-events:none}
.simbolo-peca::before{background-image:url(/assets/img/neuropsicologia/simbolo-quebra-cabeca.svg?v=1)}
.simbolo-fita::before{background-image:url(/assets/img/neuropsicologia/simbolo-fita.svg?v=1)}
.simbolo-lampada::before{background-image:url(/assets/img/neuropsicologia/simbolo-lampada.svg?v=1)}
.simbolo-infinito::before{background-image:url(/assets/img/neuropsicologia/simbolo-infinito.svg?v=1)}
.simbolo-dir::before{right:-4%;top:6%;transform:rotate(12deg)}
.simbolo-esq::before{left:-4%;bottom:6%;transform:rotate(-14deg)}
/* Página online: "Depois do laudo" só com texto (sem foto), com largura confortável de leitura. */
.online-tratamento{max-width:820px}
