.app-shell{max-width:1050px;margin:160px auto 50px;padding:24px}.dashboard nav{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.dashboard nav form{margin:0}.activity-card.activity-card{padding:20px;border:1px solid var(--wc-border);border-radius:18px;background:white}.activity-list{display:grid;gap:16px}.activity-card{display:flex;align-items:center;justify-content:space-between;gap:20px}/* O mapa termina em ilustração e a seção seguinte começava colada nele: as
   conquistas pareciam parte da arte. */
/* Tela da conquista: o badge é o assunto, então ele ocupa o centro e o resto
   é legenda. */
#badge-dialog.modal--badge{max-width:380px;width:min(380px,92vw);text-align:center;padding:32px 28px}
.badge-dialog__art{width:150px;margin:8px auto 14px;display:block;
  animation:badgePop .5s cubic-bezier(.2,1.2,.3,1)}
.badge-dialog__note{font-size:.86rem;color:var(--wc-text-dim);margin:0 0 20px}
@keyframes badgePop{from{transform:scale(.5) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@media(prefers-reduced-motion:reduce){.badge-dialog__art{animation:none}}
#badges-title{margin-top:56px}
.badges-row{margin-bottom:8px}
.badges-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}.badges-row figure{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center}.badges-row img{width:80px;margin:0 auto 8px}.badges-row figcaption{text-wrap:balance;hyphens:auto}dialog{width:min(720px,94vw);max-height:90vh;overflow:auto;border:1px solid var(--wc-border);border-radius:24px;padding:28px;color:var(--wc-text);box-shadow:var(--shadow-card)}dialog::backdrop{background:#34081da8}dialog p{white-space:pre-wrap}dialog fieldset{border:1px solid var(--wc-border);border-radius:12px;padding:16px;margin:16px 0}dialog legend{font-weight:600}dialog label{display:block;margin:10px 0}textarea,.auth-card input{width:100%;font:inherit;border:1px solid var(--wc-border);border-radius:10px;padding:12px}textarea{min-height:110px}input[type=radio],input[type=checkbox]{accent-color:#fe0071;margin-right:8px}iframe{width:100%;aspect-ratio:16/9;min-height:230px;border:0;margin:15px 0;display:block}.errorlist,.form-error{color:#a00035}.auth-card{max-width:500px;background:#fff;margin:8vh auto;padding:36px;border-radius:24px;box-shadow:var(--shadow-card)}.brand-logo{width:170px;margin:0 0 28px}.auth-card .helptext{font-size:.8rem}.auth-card label{display:block}.auth-card input[type=hidden]{display:none}.auth-card .btn{margin:12px 0}.celebration{text-align:center;padding:30px;background:white;border-radius:24px;margin-top:24px}.celebration img{width:140px;margin:auto}#avatar-options{display:flex;gap:10px;flex-wrap:wrap}#avatar-options img{width:65px}#notice:not(:empty){padding:12px;background:#fff;border-radius:10px;margin-bottom:16px}.map-node__info{white-space:normal;width:140px}.map-node__btn{min-height:32px}.resource-link{display:inline-block;margin:12px 0}.activity-complete{color:#08764f;font-weight:bold}button:disabled{opacity:.65;cursor:wait}:focus-visible{outline:3px solid #a00054;outline-offset:4px}@media(max-width:650px){.app-shell{margin-top:220px;padding:14px}.dashboard{gap:8px;padding:12px}.dashboard__progress{min-width:120px}.dashboard nav{font-size:.8rem}.activity-card{align-items:stretch;flex-direction:column}.auth-card{margin:20px 12px;padding:24px}.map-node__info{display:none}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}
/* O cabeçalho participa do fluxo; o conteúdo fica logo abaixo dele. */
.app-shell{margin:24px auto 50px}.dashboard__player p{font-size:.8rem;margin:0}.dashboard__progress p{font-size:.8rem;margin:0}
@media(max-width:900px){.dashboard nav{grid-area:actions;max-width:220px;justify-content:flex-end}.dashboard__stats{justify-content:center}}
@media(max-width:650px){.app-shell{margin-top:16px}.dashboard{position:relative}.dashboard nav{gap:6px;max-width:170px}}
.confetti-layer{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.confetti-layer i{position:absolute;top:-20px;width:9px;height:16px;animation:celebrate-fall 1.9s ease-in forwards}@keyframes celebrate-fall{to{transform:translateY(110vh) rotate(600deg)}}
@media print{body{background:#fff}body>*:not(main){display:none!important}main.app-shell{margin:0;padding:0;max-width:none}main>*:not(#celebration){display:none!important}#celebration{padding:0;margin:0}#celebration>*:not(#certificate){display:none!important}dialog,.confetti-layer{display:none!important}}

/* Subtítulo da missão no cartão da fase, e os controles de conta que o
   protótipo não tinha (senha e sair) alinhados aos ícones do cabeçalho. */
.dashboard__actions form{margin:0;display:flex}
.dashboard__actions .icon-btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}

/* Ilha inteira clicável, com zoom no hover.
   As ilhas são imagens sobre um fundo só de céu; o contorno vem do clip-path do
   botão, para o clique seguir o formato e caixas vizinhas não roubarem o toque. */
.map-islands{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:1}
.map-islands li{position:absolute}
.map-island{position:absolute;inset:0;padding:0;border:0;background:transparent;cursor:pointer}
.map-island[disabled]{cursor:default}
.map-island:focus-visible{outline:none}
.map-island__art{
  position:absolute;inset:0;width:100%;height:100%;display:block;
  pointer-events:none;                    /* o clique atravessa até o botão */
  transform:scale(1);transform-origin:center;
  transition:transform .28s cubic-bezier(.2,.7,.3,1),filter .28s ease;
}
.map-island:hover ~ .map-island__art,
.map-island:focus-visible ~ .map-island__art{transform:scale(1.07)}
/* Bloqueada fica cinza; volta ao normal quando a fase abre. */
.map-island[disabled] ~ .map-island__art{filter:grayscale(1) brightness(1.04) contrast(.92)}
.map-island[disabled]:hover ~ .map-island__art{transform:scale(1.02)}
.map-island:focus-visible ~ .map-island__art{filter:drop-shadow(0 0 7px var(--wc-accent-1))}
/* Os selos e rótulos viram desenho: quem recebe o clique é a ilha. */
.map-path{pointer-events:none}
/* Sem o anel: a ilha inteira já é o alvo, e o estado fica no selo. */
.map-node--current .map-node__btn,
.map-node--done .map-node__btn{border-color:transparent;animation:none}
@media(prefers-reduced-motion:reduce){.map-island__art{transition:none}}

/* Painel do avatar: prévia grande à esquerda, opções à direita. */
.avatar-dialog{width:min(760px,94vw)}
.avatar-editor{display:flex;gap:24px;align-items:flex-start;flex-wrap:wrap}
.avatar-preview{flex:0 0 auto;background:#ffeef5;border-radius:18px;padding:14px 22px;display:flex;justify-content:center}
.avatar-groups{flex:1 1 320px;min-width:0}
.avatar-groups fieldset{margin:0 0 14px}
.avatar-choices{display:flex;flex-wrap:wrap;gap:10px}
.avatar-choice{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 8px;background:#fff;
  border:2px solid var(--wc-border);border-radius:14px;cursor:pointer;font:inherit;font-size:.72rem;color:inherit;
  transition:border-color .15s ease,transform .15s ease}
.avatar-choice:hover{transform:translateY(-2px)}
.avatar-choice[aria-pressed=true]{border-color:var(--wc-accent-1);box-shadow:0 0 0 3px #fe007122}
.avatar-choice--color{width:38px;height:38px;border-radius:50%;padding:0}
.avatar-choice__name{white-space:nowrap}
.avatar-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:18px}
.avatar-actions .btn{margin:0}
@media(max-width:650px){.avatar-editor{gap:14px}.avatar-preview{margin:auto}}

/* ==========================================================================
   Navbar em notch: painéis escuros pendurados no topo, com as transições
   côncavas feitas por máscara radial (sem SVG). No desktop são três painéis;
   abaixo de 1100px eles viram uma ilha única centralizada.
   ========================================================================== */
/* Paleta do notch. Era um painel escuro; agora e claro, e por isso todos os
   tons "sobre escuro" viram tokens - trocar o fundo nao deve exigir cacar
   rgba(255,255,255,...) espalhados pelas regras. */
/* O rodape e escuro de proposito (a aurora, o wordmark gigante e as
   pilulas de vidro so existem sobre fundo escuro). Ele usava o token da
   navbar e ficou branco com texto branco quando ela clareou: por isso
   tem tom proprio, que nao acompanha mais o painel de cima. */
:root{--footer-bg:#34081d}
:root{--notch-bg:#ffffff;--notch-fill:#3d0f24;--notch-muted:#946a7c;
  --notch-accent:#e6006e;--notch-soft:rgba(61,15,36,.07);
  --notch-soft-hover:rgba(61,15,36,.14);--notch-line:rgba(61,15,36,.14);
  --notch-wing:20px}
/* Barra única, de ponta a ponta. Eram três painéis soltos pendurados no topo
   (esquerda, centro e direita), com asas côncavas ligando cada um à borda da
   página; agora é um só, então as asas não têm mais o que ligar e somem.
   Os três grupos viram seções de uma mesma linha, e o progresso ganha a linha
   de baixo, na largura inteira. */
.notch-shell{position:fixed;top:0;left:0;right:0;z-index:60;pointer-events:auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;
  padding:9px clamp(14px,3vw,30px) 10px;
  background:var(--notch-bg);color:var(--notch-fill);
  box-shadow:0 6px 20px rgba(102,20,60,.16)}
.notch{position:static;transform:none;display:flex;align-items:center;gap:12px;
  height:auto;padding:0;background:transparent;box-shadow:none;border-radius:0}
.notch--left{flex:0 1 auto;min-width:0}
.notch--center{flex:1 1 auto;justify-content:center}
.notch--right{flex:0 1 auto;margin-left:auto}

/* As asas côncavas ligavam cada painel à borda da página. Com uma barra só,
   não sobrou borda para ligar. */
.notch__wing,.shell-wing{display:none}

.notch__logo{height:19px;width:auto;display:block}
.notch__rule{width:1px;height:22px;background:var(--notch-line);flex:none}
/* O avatar e o alvo mais obvio para "mudar minha cara": vira botao, com
   anel no hover para anunciar que responde ao clique. */
.notch__avatar-btn{display:flex;padding:0;border:0;background:none;cursor:pointer;
  border-radius:50%;flex:none;line-height:0;
  transition:transform .18s ease,box-shadow .18s ease}
.notch__avatar-btn:hover{transform:scale(1.08);
  box-shadow:0 0 0 2px var(--notch-accent)}
.notch__avatar-btn:focus-visible{outline:3px solid var(--notch-accent);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.notch__avatar-btn{transition:none}}
.notch__avatar{width:30px;height:30px;border-radius:50%;background:var(--notch-soft);padding:1px;flex:none}
.notch__who{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.notch__name{font-weight:700;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:150px}
.notch__level{font-size:.7rem;color:var(--notch-accent);font-weight:600;white-space:nowrap}
.notch__scores,.notch__actions{display:flex;align-items:center;gap:7px}
.notch__actions form{margin:0;display:flex}

/* Abas com a pílula deslizante */
.notch-tabs{position:relative;display:flex;align-items:center;gap:2px}
.notch-tabs__pill{position:absolute;top:0;left:0;height:100%;border-radius:999px;background:var(--wc-gradient);
  transition:transform .32s cubic-bezier(.2,.7,.3,1),width .32s cubic-bezier(.2,.7,.3,1);z-index:0}
.notch-tab{position:relative;z-index:1;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:.84rem;font-weight:600;color:var(--notch-muted);padding:7px 15px;border-radius:999px;line-height:1;
  transition:color .2s ease}
.notch-tab:hover{color:var(--notch-fill)}
.notch-tab[aria-selected=true]{color:#fff;font-weight:700}
.notch-trigger{display:none;align-items:center;gap:6px;border:0;background:transparent;cursor:pointer;font:inherit;
  font-size:.82rem;font-weight:700;color:var(--notch-fill);padding:6px 10px;border-radius:999px}
.notch-trigger__caret{font-size:.7rem;color:var(--notch-accent);transition:transform .2s ease}
.notch-trigger[aria-expanded=true] .notch-trigger__caret{transform:rotate(180deg)}

/* Progresso da jornada: continua visível, agora dentro do notch central */
.notch-progress{width:100%;min-width:260px}
.notch-progress__track{height:5px;border-radius:999px;background:var(--notch-soft);overflow:hidden}
.notch-progress__fill{height:100%;width:0;border-radius:999px;background:var(--wc-gradient);transition:width .4s ease}
.notch-progress__label{margin:5px 0 0;font-size:.68rem;color:var(--notch-muted)}
.notch-progress__next{margin:1px 0 0;font-size:.74rem;font-weight:600;color:var(--notch-fill)}

.notch-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:5px 11px;font-size:.75rem;
  font-weight:700;background:var(--notch-soft);color:var(--notch-fill);white-space:nowrap;border:0}
.notch-pill--button{cursor:pointer;font:inherit;font-size:.75rem;font-weight:700;transition:background .2s ease}
.notch-pill--button:hover{background:var(--notch-soft-hover)}
.notch .icon-btn{width:31px;height:31px;border-radius:50%;border:0;background:var(--notch-soft);color:var(--notch-fill);
  display:inline-flex;align-items:center;justify-content:center;font-size:.85rem;cursor:pointer;text-decoration:none;
  transition:background .2s ease}
.notch .icon-btn:hover{background:var(--notch-soft-hover)}

/* O conteúdo começa abaixo dos painéis fixos. A altura é medida no navegador:
   a ilha do mobile muda de altura conforme o conteúdo quebra linha. */
.app-shell{margin-top:calc(var(--notch-height, 108px) + 18px)}

/* Estreito: a barra continua única; o que muda é a navegação, que vira gaveta
   para caber. */
@media(max-width:1099px){
  .notch-shell{gap:8px 12px;padding:9px 14px 10px}
  .notch{gap:9px}
  .notch--left{flex:1 1 auto;min-width:0}
  .notch--center{flex:1 1 100%;order:3;align-items:stretch;justify-content:flex-start}
  /* Nada some no mobile: nome, nível, XP, moedas e badges continuam, quebrando
     linha quando faltar largura. */
  .notch__rule{display:none}
  .notch__scores{flex-wrap:wrap}
  .notch__name{font-size:.78rem;max-width:40vw}
  .notch-trigger{display:inline-flex;align-self:flex-start}
  /* Fechada precisa sumir de verdade: só altura zero deixaria as abas no
     caminho do teclado e do leitor de tela. */
  .notch-tabs{flex-direction:column;align-items:stretch;gap:2px;overflow:hidden;
    max-height:0;opacity:0;visibility:hidden;
    transition:max-height .22s ease,opacity .22s ease,visibility 0s linear .22s}
  .notch-tabs[data-open=true]{max-height:170px;opacity:1;visibility:visible;margin-top:4px;
    transition:max-height .22s ease,opacity .22s ease,visibility 0s}
  .notch-tabs__pill{display:none}
  .notch-tab{text-align:left;padding:9px 12px;border-radius:12px}
  .notch-tab[aria-selected=true]{background:var(--wc-gradient)}
}
@media(max-width:520px){
  .notch--left{flex:1 1 100%}
  .notch__name{max-width:60vw}
  .notch__logo{height:16px}
}
@media(prefers-reduced-motion:reduce){.notch-tabs__pill{transition:none}}

/* As pedrinhas são rastro, não alvo: não podem roubar o clique das ilhas. */
.map-stone{pointer-events:none}
@media(prefers-reduced-motion:reduce){.map-stone{animation:none}}

/* Contagem regressiva na próxima ilha — só nela, e só enquanto falta data. */
.map-node__countdown{position:absolute;top:-14px;left:50%;transform:translateX(-50%);
  background:var(--wc-gradient);color:#fff;font-size:.62rem;font-weight:700;line-height:1;
  padding:5px 9px;border-radius:999px;white-space:nowrap;box-shadow:0 4px 10px rgba(255,0,70,.35);
  border:2px solid #fff;z-index:4;animation:countdownIn .45s ease both}
@keyframes countdownIn{from{opacity:0;transform:translate(-50%,6px) scale(.85)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
.map-node--next .map-node__btn{box-shadow:0 0 0 3px rgba(255,0,70,.35)}
@media(prefers-reduced-motion:reduce){.map-node__countdown{animation:none}}

/* Login e troca de senha centralizados na tela, não só na horizontal.
   margin:auto em contexto flex centraliza nos dois eixos e, diferente de
   align-items:center, não corta o topo quando o cartão passa da altura da tela. */
.auth-page{min-height:100vh;min-height:100dvh;display:flex;padding:24px}
.auth-page .auth-card{margin:auto;width:100%}
@media(max-width:650px){.auth-page{padding:14px}}

/* ==========================================================================
   Rodapé em cortina. O envelope tem clip-path, o que o torna o bloco de
   contenção do painel fixo lá dentro: o painel só aparece dentro da caixa do
   envelope, e a página o revela de baixo para cima ao rolar.
   ========================================================================== */
.footer-curtain{position:relative;height:min(70vh,620px);min-height:460px;
  clip-path:inset(0);margin-top:40px}
.site-footer{position:fixed;bottom:0;left:0;width:100%;height:min(70vh,620px);min-height:460px;
  display:flex;flex-direction:column;justify-content:space-between;overflow:hidden;
  background:var(--footer-bg);color:#fff;padding:0 clamp(16px,4vw,48px)}
.site-footer__aurora{position:absolute;left:50%;top:52%;width:80vw;height:60%;
  transform:translate(-50%,-50%);border-radius:50%;filter:blur(80px);pointer-events:none;
  background:radial-gradient(circle at 50% 50%,rgba(255,0,70,.42) 0%,rgba(254,0,113,.22) 42%,transparent 70%);
  animation:footerBreathe 8s ease-in-out infinite alternate}
@keyframes footerBreathe{from{transform:translate(-50%,-50%) scale(1);opacity:.65}
  to{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
.site-footer__grid{position:absolute;inset:0;pointer-events:none;background-size:60px 60px;
  background-image:linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 30%,#000 70%,transparent)}
.site-footer__giant{position:absolute;left:50%;bottom:-6%;transform:translateX(-50%);margin:0;
  font-size:26vw;line-height:.75;font-weight:900;letter-spacing:-.05em;white-space:nowrap;
  pointer-events:none;user-select:none;color:transparent;-webkit-text-stroke:1px rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.12) 0%,transparent 62%);
  -webkit-background-clip:text;background-clip:text}

/* Faixa diagonal com as palavras da jornada */
.site-footer__marquee{position:absolute;top:44px;left:-4%;width:108%;overflow:hidden;
  transform:rotate(-2deg);border-top:1px solid rgba(255,255,255,.14);
  border-bottom:1px solid rgba(255,255,255,.14);background:rgba(20,3,11,.5);
  backdrop-filter:blur(6px);padding:11px 0;z-index:1;box-shadow:0 14px 34px rgba(20,3,11,.35)}
.site-footer__track{display:flex;width:max-content;animation:footerMarquee 42s linear infinite}
.site-footer__run{display:flex;align-items:center;gap:34px;padding:0 17px;
  font-size:.68rem;font-weight:800;letter-spacing:.28em;text-transform:uppercase;color:#f3c7d8}
.site-footer__run i{font-style:normal;color:var(--wc-accent-1)}
@keyframes footerMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.site-footer__center{position:relative;z-index:2;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;text-align:center;padding:88px 0 8px}
.site-footer__title{margin:0;font-size:clamp(2rem,6vw,4.2rem);font-weight:900;letter-spacing:-.03em;
  background:linear-gradient(180deg,#fff 0%,rgba(255,255,255,.45) 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 22px rgba(255,255,255,.16))}
.site-footer__lead{margin:0 0 8px;color:#e7b9cb;font-size:.9rem}
.site-footer__pills{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.site-footer__pills--quiet{margin-top:2px}

.footer-pill{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:11px 22px;font:inherit;font-size:.84rem;font-weight:700;color:#fff;text-decoration:none;
  cursor:pointer;border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.02));
  box-shadow:0 10px 30px -10px rgba(20,3,11,.6),inset 0 1px 1px rgba(255,255,255,.12);
  backdrop-filter:blur(16px);
  transition:transform .4s cubic-bezier(.16,1,.3,1),background .3s ease,border-color .3s ease}
.footer-pill--primary{padding:15px 30px;font-size:.92rem}
.footer-pill:hover{background:linear-gradient(145deg,rgba(255,255,255,.18),rgba(255,255,255,.05));
  border-color:rgba(255,255,255,.28)}
.footer-pill--badge{cursor:default;margin:0;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:#e7b9cb;padding:11px 18px}
.footer-pill--badge strong{color:#fff;letter-spacing:normal;font-size:.8rem}
.footer-pill--top{width:46px;height:46px;padding:0;justify-content:center;font-size:1.1rem}
.site-footer__heart{color:var(--wc-accent-1);font-size:.95rem;
  animation:footerHeart 2s cubic-bezier(.25,1,.5,1) infinite}
@keyframes footerHeart{0%,100%{transform:scale(1)}15%,45%{transform:scale(1.22)}30%{transform:scale(1)}}

.site-footer__bar{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap;gap:14px;padding:0 0 26px}
.site-footer__copy{margin:0;font-size:.66rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#c9899f}

@media(max-width:760px){
  .footer-curtain,.site-footer{height:auto;min-height:0}
  /* Sem cortina no celular: painel fixo de tela cheia atrapalha a rolagem. */
  .footer-curtain{clip-path:none;margin-top:28px}
  .site-footer{position:static;padding-bottom:0}
  .site-footer__center{padding:74px 0 8px}
  .site-footer__giant{font-size:34vw}
  .site-footer__bar{justify-content:center;text-align:center}
}
@media(prefers-reduced-motion:reduce){
  .site-footer__aurora,.site-footer__track,.site-footer__heart{animation:none}
  .footer-pill{transition:none}
}

/* O popup usa a anatomia do protótipo (.modal); o <dialog> nativo mantém
   teclado e fundo. Estes ajustes tiram o que a regra genérica de dialog impunha. */
#activity-dialog.modal{padding:32px;max-width:520px;width:min(520px,94vw);border:1px solid var(--wc-border)}
#activity-dialog .modal__close{position:absolute;top:14px;right:14px;width:34px;height:34px;
  border-radius:50%;border:1px solid var(--wc-border);background:#fff;color:var(--wc-text);
  font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1}
#activity-dialog .modal__body{white-space:normal}
#activity-dialog .modal__body>p{white-space:pre-wrap}
.modal-quote{font-style:italic;color:var(--wc-accent-2);font-weight:600}

/* Poppins hospedada no próprio projeto: o CSS já declarava a fonte da marca,
   mas nenhum template a carregava — tudo caía no fallback Arial/Segoe UI.
   Local em vez de CDN: sem chamada a terceiros e sem depender do Google. */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/poppins-400-latin.9212f6f9860f.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;
  src:url("../assets/fonts/poppins-400-latin-ext.90926c36b712.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/poppins-500-latin.a09f2fccfee3.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;
  src:url("../assets/fonts/poppins-500-latin-ext.1f24684cbd72.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/poppins-600-latin.72993dddf88a.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url("../assets/fonts/poppins-600-latin-ext.a575b6d9df98.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/poppins-700-latin.25b0e113ca7c.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url("../assets/fonts/poppins-700-latin-ext.367d2aa05bf0.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url("../assets/fonts/poppins-800-latin.af4d371a1027.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;
  src:url("../assets/fonts/poppins-800-latin-ext.6b2835047d68.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Título da jornada: hierarquia em três níveis (olho, título, apoio) e o nome
   da marca no gradiente Wicomm, em vez de uma frase corrida sem peso. */
.section-header{max-width:46rem}
.section-header__eyebrow{margin:0 0 6px;font-size:.72rem;font-weight:800;letter-spacing:.24em;
  text-transform:uppercase;color:var(--wc-accent-2);display:flex;align-items:center;gap:10px}
.section-header__eyebrow::after{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--wc-accent-1),transparent)}
.section-header__title{margin:0;font-size:clamp(2.1rem,5.4vw,3.6rem);font-weight:800;
  letter-spacing:-.035em;line-height:1.04;color:var(--wc-text)}
.section-header__brand{background:var(--wc-gradient-vivid);-webkit-background-clip:text;
  background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 6px 18px rgba(255,0,70,.28))}
.section-header__lead{margin:12px 0 0;font-size:1.02rem;line-height:1.55;color:var(--wc-text-dim);
  max-width:34rem}
@media(max-width:650px){.section-header__eyebrow{font-size:.66rem;letter-spacing:.18em}}

/* Bloco do título centralizado. O traço do olho ganha par do outro lado:
   com um só, centralizado, o conjunto fica torto. */
.section-header{margin-inline:auto;text-align:center}
.section-header__eyebrow{justify-content:center}
.section-header__eyebrow::before{content:"";flex:1;height:2px;border-radius:2px;
  background:linear-gradient(270deg,var(--wc-accent-1),transparent)}
.section-header__lead{margin-inline:auto}

/* Refino do painel central: o bloco era chapado e a barra de progresso ia de
   ponta a ponta logo abaixo das abas, sem hierarquia. Agora há um gradiente
   sutil com luz na aresta superior, um fio separando navegação de progresso,
   trilho fino com brilho no preenchimento, e a linha da missão contida. */
/* Era um painel com fundo e sombra próprios; agora é só o grupo de abas
   dentro da barra. */
.notch--center{padding:0;gap:0;background:none;box-shadow:none}
.notch-tab{font-size:.82rem;padding:6px 15px}
.notch-tabs__pill{background:linear-gradient(160deg,#ff2f6d,#e0003f);
  box-shadow:0 3px 12px rgba(255,0,70,.45),inset 0 1px 0 rgba(255,255,255,.25)}

.notch-progress{flex:1 1 100%;order:9;min-width:0;display:grid;
  grid-template-columns:auto minmax(90px,1fr) auto;align-items:center;gap:12px;
  padding-top:9px;border-top:1px solid var(--notch-line)}
.notch-progress__track{order:2;width:100%;height:5px;background:var(--notch-soft);
  box-shadow:inset 0 0 0 1px rgba(61,15,36,.05)}
.notch-progress__fill{box-shadow:0 0 8px rgba(255,0,70,.35)}
.notch-progress__label{order:1;margin:0;font-size:.66rem;font-weight:700;letter-spacing:.04em;
  color:var(--notch-muted);white-space:nowrap}
.notch-progress__next{order:3;margin:0;font-size:.75rem;font-weight:600;color:var(--notch-fill);
  max-width:min(46vw,520px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:right}

.notch-progress__next{font-size:.73rem}

/* Estreito: rótulo, trilho e missão não cabem lado a lado — empilham. Precisa
   vir depois da grade acima, senão a cascata devolve o trilho de 90px. */
@media(max-width:760px){
  .notch-progress{grid-template-columns:1fr;gap:5px;justify-items:center}
  .notch-progress__label,.notch-progress__next{text-align:center}
  .notch-progress__next{max-width:100%}
}

/* Organograma do colaborador: fluxograma de verdade, com os cargos em caixas
   ligadas por linhas. Antes era uma lista indentada por padding, que dizia a
   profundidade mas nao mostrava quem se liga a quem. As ligacoes sao feitas
   com bordas em ::before/::after de cada <li>, sem SVG: um par de cotovelos
   por irmao, mais o tronco que desce de cada pai (ul::before).
   Um organograma largo rola na horizontal em vez de esticar o modal. */
.org-flow-wrap{overflow-x:auto;padding:4px 2px 8px}
.org-flow{display:inline-block;min-width:100%}
.org-flow ul{list-style:none;margin:0;padding:22px 0 0;display:flex;justify-content:center;
  position:relative}
.org-flow > ul{padding-top:0}
.org-flow li{position:relative;list-style:none;padding:22px 10px 0;text-align:center}
/* Cotovelos que ligam cada irmao ao tronco do pai. */
.org-flow li::before,.org-flow li::after{content:"";position:absolute;top:0;height:22px;width:50%;
  border-top:2px solid var(--wc-border)}
.org-flow li::before{right:50%}
.org-flow li::after{left:50%;border-left:2px solid var(--wc-border)}
/* Filho unico nao precisa de barra horizontal: so o tronco do pai. */
.org-flow li:only-child::before,.org-flow li:only-child::after{display:none}
.org-flow li:first-child::before,.org-flow li:last-child::after{border-top-color:transparent}
.org-flow li:last-child::before{border-right:2px solid var(--wc-border);border-radius:0 8px 0 0}
.org-flow li:first-child::after{border-radius:8px 0 0 0}
/* Tronco que desce de um pai para a linha dos filhos. */
.org-flow ul ul::before{content:"";position:absolute;top:0;left:50%;height:22px;
  border-left:2px solid var(--wc-border)}
.org-flow > ul > li{padding-top:0}
.org-flow > ul > li::before,.org-flow > ul > li::after{display:none}
.org-node{display:inline-flex;flex-direction:column;align-items:center;gap:2px;
  min-width:150px;max-width:230px;text-align:center;
  margin:0;padding:10px 14px;border-radius:12px;cursor:pointer;font:inherit;
  border:2px solid var(--wc-border);background:#fff;color:var(--wc-text);
  transition:border-color .15s ease,background .15s ease}
.org-node:hover:not(:disabled){border-color:var(--wc-accent-1)}
.org-node--on{border-color:var(--wc-accent-1);background:var(--wc-surface-2);
  box-shadow:0 0 0 3px #fe007122}
.org-node__name{font-weight:700}
.org-node__role{font-size:.78rem;color:var(--wc-accent-2);font-weight:600}
.org-node__holder{font-size:.78rem;color:var(--wc-text-dim)}

/* Os quatro checkpoints: disco com a prancheta no lugar do círculo tracejado.
   Disponível e ainda não respondida pisca em luzes — é a única delas que pede
   ação agora. */
.map-cp .map-node__btn{border:3px solid rgba(255,255,255,.92);border-radius:50%;
  background:radial-gradient(circle at 32% 26%,#ff8ec1 0%,#fe0071 55%,#b2004f 100%);
  box-shadow:0 8px 18px rgba(52,8,29,.3),inset 0 -6px 14px rgba(120,0,50,.35)}
.map-cp__art{position:absolute;left:24%;top:24%;width:52%;height:52%;color:#fe0071;
  filter:drop-shadow(0 2px 3px rgba(80,0,35,.35))}
.map-cp--locked .map-node__btn{background:radial-gradient(circle at 32% 26%,#cdb3c1 0%,#9b8090 60%,#6d5768 100%);
  border-style:dashed;box-shadow:0 5px 12px rgba(52,8,29,.22)}
.map-cp--locked .map-cp__art{color:#7b6474;opacity:.85}
.map-cp--confirmed .map-node__btn{background:radial-gradient(circle at 32% 26%,#6be0ae 0%,#0f9d63 60%,#07734a 100%)}
.map-cp--confirmed .map-cp__art{color:#0f9d63}
/* O anel de luz gira atrás do disco e o brilho respira: duas camadas, porque
   uma sombra sozinha não lê como "é a sua vez". */
.map-cp--available .map-node__btn{animation:cp-brilho 2.2s ease-in-out infinite}
.map-cp--available .map-node__btn::before{content:'';position:absolute;inset:-22%;border-radius:50%;
  background:conic-gradient(from 0deg,transparent 0deg,rgba(255,255,255,.95) 40deg,transparent 90deg,
    transparent 180deg,rgba(255,214,0,.9) 220deg,transparent 270deg);
  animation:cp-giro 3.4s linear infinite;z-index:-1}
.map-cp--available .map-node__btn::after{content:'';position:absolute;inset:-8%;border-radius:50%;
  border:2px solid rgba(255,255,255,.75);animation:cp-onda 2.2s ease-out infinite}
@keyframes cp-giro{to{transform:rotate(360deg)}}
@keyframes cp-brilho{0%,100%{box-shadow:0 8px 18px rgba(52,8,29,.3),0 0 0 0 rgba(255,214,0,.55)}
  50%{box-shadow:0 8px 22px rgba(52,8,29,.34),0 0 26px 8px rgba(255,214,0,.55)}}
@keyframes cp-onda{0%{transform:scale(.92);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@media(prefers-reduced-motion:reduce){
  .map-cp--available .map-node__btn,
  .map-cp--available .map-node__btn::before,
  .map-cp--available .map-node__btn::after{animation:none}
}
/* Cada pergunta é um fieldset, e a <legend> nativa é desenhada *sobre* a
   borda: no bloco condicional, com fundo próprio, a primeira linha do enunciado
   ficava para fora da caixa. Flutuar a legenda devolve ela ao fluxo. */
fieldset[data-question]{border:0;margin:0 0 22px;padding:0;min-width:0}
fieldset[data-question]>legend{float:left;width:100%;padding:0;margin:0 0 10px;
  font-weight:700;line-height:1.35}
fieldset[data-question]>legend+*{clear:both}
.survey-question--nested{padding:14px 16px 12px}
/* Quadro do vídeo: 16:9 do conteúdo + a barra de controles do Drive, que tem
   altura fixa e ficava cortada quando o iframe era só 16:9. */
.video-embed{position:relative;width:100%;padding-bottom:calc(56.25% + 56px);
  border-radius:14px;overflow:hidden;background:#000;margin:15px 0}
.video-embed iframe{position:absolute;inset:0;width:100%;height:100%;
  min-height:0;aspect-ratio:auto;margin:0;border:0}
.map-sky{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:1;pointer-events:none}
.map-sky li{position:absolute}
.map-sky img{width:100%;height:100%;display:block}
.map-sky--espelho{transform:scaleX(-1)}
/* Checkpoints de acompanhamento: a camada cobre o mapa todo e fica acima das
   ilhas, então só o botão de cada um recebe ponteiro — senão ela engolia o
   clique de todas as ilhas. */
.map-clouds{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;
  pointer-events:none}
.map-clouds li{pointer-events:none}
.map-clouds .map-node__btn{pointer-events:auto}
.map-clouds .map-node__btn:disabled{cursor:not-allowed}
.survey-frame{width:100%;height:min(62vh,520px);aspect-ratio:auto;border:1px solid var(--wc-border);
  border-radius:12px;margin:12px 0}
.survey-note{font-size:.78rem;color:var(--wc-text-dim)}
#survey-dialog.modal{max-width:720px;width:min(720px,94vw);padding:28px}

/* Conteúdo rico dentro das atividades: blocos do brandbook e materiais. */
.content-sections{display:grid;gap:10px;margin:14px 0}
.content-section{padding:12px 14px;border:1px solid var(--wc-border);border-radius:12px;
  background:var(--wc-surface-2)}
.content-section__title{margin:0 0 4px;font-weight:700;font-size:.9rem}
.content-section p{margin:0;font-size:.86rem;color:var(--wc-text-dim)}
.content-section--todo{border-style:dashed;background:transparent}
.content-resources{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.content-resources li{padding:12px 14px;border:1px solid var(--wc-border);border-radius:12px}
.resource--soon{border-style:dashed;opacity:.9}
.resource-soon__name{margin:0;font-weight:700;color:var(--wc-text-dim);display:inline}
.resource-soon__tag{margin-left:8px;font-size:.66rem;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:#fff;background:#b26a00;border-radius:999px;padding:3px 9px}
.content-resources__desc{margin:4px 0 0;font-size:.82rem;color:var(--wc-text-dim)}

/* Enunciado longo colidia com a borda do quadro: o <legend> sobre a linha
   quebrava em duas e cruzava a moldura. Vira bloco dentro da caixa. */
#activity-content fieldset{border:0;padding:0;margin:18px 0}
/* Enunciado e alternativas partem da mesma margem do texto acima: a moldura e
   o recuo do fieldset desalinhavam o bloco inteiro. */
#activity-content fieldset label{margin:8px 0}
#activity-content legend{float:left;width:100%;margin:0 0 10px;padding:0;
  font-weight:600;line-height:1.35}
#activity-content fieldset::after{content:"";display:table;clear:both}

/* A alternativa escolhida em atividade concluída precisa se ver. */
#activity-content .option--chosen{display:flex;align-items:center;gap:8px;
  background:var(--wc-surface-2);border:1px solid var(--wc-border);border-radius:10px;
  padding:6px 10px;margin:6px 0;font-weight:700}
#activity-content .option-tag{margin-left:auto;font-size:.66rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fff;background:var(--wc-success);
  border-radius:999px;padding:3px 9px}

/* Camadas do mapa, de baixo para cima: céu (fundo) → ilhas (1) → nuvens (2) →
   rastro (3) → selos e rótulos (4) → boneco (5). O rastro tinha o mesmo
   z-index das ilhas e vinha antes no DOM, então elas o cobriam. */
.map-stone{z-index:3}
.map-path{z-index:4}


/* ==========================================================================
   Escala de 1 a 5 na horizontal (pesquisa de satisfacao)
   O prototipo usava <button aria-pressed>; aqui sao radios de verdade, para
   o teclado, o leitor de tela e a validacao nativa funcionarem. O input fica
   invisivel mas focavel, e o <span> irmao e que recebe a forma.
   ========================================================================== */
.question--scale,.question--yesno{border:0;padding:0;margin:0 0 22px}
/* O enunciado do quiz e um float de largura total (#activity-content legend).
   Aqui ele nao pode ser: a linha de circulos ficaria prensada ao lado do float,
   com largura zero, e cada nota cairia numa linha. O seletor precisa do mesmo
   id para vencer a especificidade daquela regra. */
#activity-content .question--scale legend,
#activity-content .question--yesno legend{display:block;float:none;width:auto;
  font-weight:700;margin:0 0 10px;padding:0;color:var(--wc-text);line-height:1.35}
.question--scale legend,.question--yesno legend{display:block;float:none;
  font-weight:700;margin:0 0 10px;padding:0;color:var(--wc-text)}
.question--scale .rating,.question--yesno .yesno{display:flex;flex-wrap:wrap;gap:8px;
  width:100%;clear:both}
.question--scale .rating__opt,.question--yesno .yesno__opt{position:relative;margin:0;padding:0;
  display:inline-flex;cursor:pointer}
/* Invisivel, mas ainda alvo de foco: sr-only em vez de display:none. */
.question--scale .rating__opt input,.question--yesno .yesno__opt input{position:absolute;
  width:1px;height:1px;opacity:0;margin:0;pointer-events:none}
.question--scale .rating__opt span{width:42px;height:42px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wc-bg-alt);border:1px solid var(--wc-border);color:var(--wc-text);
  font-weight:700;transition:background .15s ease,color .15s ease,border-color .15s ease}
.question--yesno .yesno__opt span{padding:9px 22px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--wc-bg-alt);border:1px solid var(--wc-border);color:var(--wc-text);
  font-weight:700;transition:background .15s ease,color .15s ease,border-color .15s ease}
.question--scale .rating__opt:hover span,.question--yesno .yesno__opt:hover span{
  border-color:var(--wc-accent)}
/* A escolha continua legivel depois de enviada: o preenchimento vem do
   :checked, nao do :enabled, senao a resposta salva desaparece. */
.question--scale .rating__opt input:checked+span,
.question--yesno .yesno__opt input:checked+span{background:var(--wc-gradient);
  border-color:transparent;color:#fff}
.question--scale .rating__opt input:focus-visible+span,
.question--yesno .yesno__opt input:focus-visible+span{outline:2px solid var(--wc-accent);
  outline-offset:2px}
.question--scale .rating__opt input:disabled+span,
.question--yesno .yesno__opt input:disabled+span{cursor:default}
.question--scale .rating__opt:has(input:disabled),
.question--yesno .yesno__opt:has(input:disabled){cursor:default}
.question--scale .rating__scale-labels{display:flex;justify-content:space-between;gap:12px;
  margin-top:6px;font-size:.72rem;color:var(--wc-text-dim)}
/* Escala e legenda dentro do modal, onde a largura e menor. */
@media(max-width:460px){
  .question--scale .rating__opt span{width:38px;height:38px}
  .question--scale .rating__scale-labels{font-size:.68rem}
}

/* O aviso de destaque da missao (💡) dentro do modal nao centraliza nem
   estica: o modal ja limita a largura. */
.modal .phase-note,#activity-content .phase-note{max-width:none;margin:0 0 14px}


/* ==========================================================================
   Pontos de contato e cartao do cliente (fase 4)
   Os dois saem do admin, nao do texto da missao: nome, e-mail, logo, site,
   resumo e a reuniao marcada.
   ========================================================================== */
.contact-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.contact-card{margin:0;padding:12px 14px;border:1px solid var(--wc-border);border-radius:12px;
  background:var(--wc-surface-2)}
.contact-card p{margin:0;white-space:normal}
.contact-card__area{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--wc-accent-2)}
.contact-card__name{font-weight:700;margin-top:2px!important}
.contact-card__mail{display:inline-block;margin-top:4px;font-size:.82rem;word-break:break-all}
.contact-card__subject{margin-top:6px!important;font-size:.8rem;color:var(--wc-text-dim)}

.client-card{margin:16px 0 0;padding:18px;border:1px solid var(--wc-border);border-radius:16px;
  background:var(--wc-surface-2);text-align:center}
.client-card p{margin:0;white-space:normal}
/* Logo de cliente vem de qualquer lugar: teto de altura para uma imagem
   enorme nao empurrar o modal. */
.client-card__logo{max-height:64px;max-width:220px;width:auto;margin:0 auto 10px;display:block;
  object-fit:contain}
.client-card__name{font-size:1.1rem;font-weight:800}
.client-card__site{display:inline-block;margin-top:4px;font-size:.85rem;font-weight:600}
.client-card__summary{margin-top:10px!important;font-size:.9rem;color:var(--wc-text-dim)}
.client-card__meeting{margin-top:12px!important;font-weight:700;font-size:.88rem;
  color:var(--wc-accent-2)}


/* ==========================================================================
   Certificado de conclusão

   Era um quadro de texto com borda: tudo encostado no topo, sem marca e, no
   papel, uma moldura esticada até o rodapé com meia página vazia. Agora é uma
   peça só — moldura dupla com cantos marcados, logo, nome em destaque, selo do
   badge final e linha de assinatura —, com proporção fixa para o vazio virar
   respiro em vez de sobra. A mesma marcação vale para a tela e para o papel.
   ========================================================================== */
.certificate{--cert-tinta:#3d0f24;--cert-rosa:#e6006e;--cert-linha:#f3c3d9;
  margin:26px auto 8px;max-width:860px;padding:0;background:none;border:0}
.certificate__frame{position:relative;isolation:isolate;
  /* Proporção de folha deitada: o certificado tem forma, não só conteúdo. */
  aspect-ratio:1.414/1;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;text-align:center;
  padding:clamp(26px,4.5vw,54px);
  color:var(--cert-tinta);
  background:
    radial-gradient(120% 90% at 50% -10%,#fff2f8 0%,transparent 55%),
    radial-gradient(90% 70% at 50% 115%,#fff6fa 0%,transparent 60%),
    #ffffff;
  border:2px solid var(--cert-rosa);border-radius:10px;
  box-shadow:0 18px 46px -24px rgba(102,20,60,.45)}
/* Moldura interna: fio fino paralelo à borda. */
.certificate__frame::before{content:"";position:absolute;inset:9px;
  border:1px solid var(--cert-linha);border-radius:6px;pointer-events:none}
/* Marca-d'água: o W da Wicomm, bem apagado, atrás de tudo. */
.certificate__frame::after{content:"W";position:absolute;inset:0;z-index:-1;
  display:flex;align-items:center;justify-content:center;
  font-size:min(46vw,380px);font-weight:900;line-height:1;
  color:rgba(230,0,110,.035);pointer-events:none;user-select:none}

/* Cantos: dois traços em ângulo, no lugar do tracejado que dava ar de recibo. */
.certificate__corner{position:absolute;width:26px;height:26px;pointer-events:none}
.certificate__corner--tl{top:17px;left:17px;border-top:2px solid var(--cert-rosa);
  border-left:2px solid var(--cert-rosa);border-top-left-radius:4px}
.certificate__corner--tr{top:17px;right:17px;border-top:2px solid var(--cert-rosa);
  border-right:2px solid var(--cert-rosa);border-top-right-radius:4px}
.certificate__corner--bl{bottom:17px;left:17px;border-bottom:2px solid var(--cert-rosa);
  border-left:2px solid var(--cert-rosa);border-bottom-left-radius:4px}
.certificate__corner--br{bottom:17px;right:17px;border-bottom:2px solid var(--cert-rosa);
  border-right:2px solid var(--cert-rosa);border-bottom-right-radius:4px}

.certificate .certificate__logo{width:clamp(104px,13%,150px);height:auto;
  margin:0 0 clamp(14px,2.4vh,26px)}
.certificate__eyebrow{margin:0;font-size:clamp(.62rem,1.05vw,.76rem);font-weight:800;
  letter-spacing:.34em;text-transform:uppercase;color:var(--cert-rosa)}
.certificate__intro{margin:clamp(14px,2.6vh,26px) 0 0;font-size:clamp(.8rem,1.15vw,.95rem);
  color:#8a6478}
.certificate__name{margin:clamp(4px,1vh,10px) 0 0;
  font-size:clamp(1.7rem,4.6vw,3.1rem);font-weight:800;line-height:1.12;
  letter-spacing:-.015em;color:var(--cert-tinta);max-width:100%;overflow-wrap:break-word}
.certificate__body{margin:clamp(10px,2vh,18px) auto 0;max-width:52ch;
  font-size:clamp(.82rem,1.2vw,1rem);line-height:1.6;color:#6d4557}

/* Fio com losango: separa a declaração do selo sem virar outra borda. */
.certificate__rule{position:relative;width:min(230px,52%);height:1px;
  margin:clamp(16px,3vh,30px) 0;
  background:linear-gradient(90deg,transparent,var(--cert-linha) 20%,
    var(--cert-linha) 80%,transparent)}
.certificate__diamond{position:absolute;top:50%;left:50%;width:7px;height:7px;
  transform:translate(-50%,-50%) rotate(45deg);background:var(--cert-rosa);
  border-radius:1px}

.certificate__badge{display:flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:clamp(.82rem,1.15vw,.98rem);color:var(--cert-tinta)}
.certificate .certificate__badge-img{width:clamp(34px,4.4vw,46px);height:auto;margin:0}

/* Sem margin-top:auto: empurrar o rodapé para a base anula o
   justify-content:center da moldura e joga todo o resto para o terço de cima,
   o que aparecia como um vão enorme no papel. O bloco inteiro fica centrado e
   o respiro vem do padding. */
.certificate__footer{margin-top:0;padding-top:clamp(24px,5vh,52px);
  display:flex;flex-direction:column;align-items:center;gap:7px}
.certificate__date{margin:0;font-size:clamp(.74rem,1vw,.86rem);color:#8a6478}
/* Linha de assinatura: o traço acima faz o papel do risco a caneta. */
.certificate__sign{margin:0;padding-top:9px;font-size:clamp(.7rem,.95vw,.8rem);
  font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--cert-tinta);
  border-top:1px solid var(--cert-linha);min-width:min(250px,62%)}

@media(max-width:620px){
  /* Em tela estreita a folha deitada espremeria o nome: solta a proporção. */
  .certificate__frame{aspect-ratio:auto;padding:30px 20px 26px}
  .certificate__footer{margin-top:26px}
}

@media print{
  /* Uma folha deitada, sem margem — é a margem zero que faz o navegador
     omitir o cabeçalho e o rodapé dele (data, título, URL). */
  @page{size:A4 landscape;margin:0}
  .certificate{margin:0;max-width:none}
  .certificate__frame{aspect-ratio:auto;width:100%;height:100vh;
    border-radius:0;border-width:2px;box-shadow:none;padding:7vh 8vw}
  .certificate__frame::before{inset:12px;border-radius:0}
  .print-certificate{display:none!important}
}


/* Frase sob o título da fase, explicando o que fazer ali. Era texto fixo no
   template só para a planta baixa; virou campo da fase, editável pelo RH. */
/* pre-line: a quebra de linha que o RH digita no admin vira quebra na tela,
   o que deixa o endereço da Academia numa linha só dele. */
.phase-banner__desc{max-width:68ch;margin:10px 0 0;font-size:.95rem;line-height:1.55;
  color:var(--wc-text);white-space:pre-line}
.phase-banner__link{color:var(--wc-accent-2);font-weight:700;text-decoration:underline;
  text-underline-offset:3px;overflow-wrap:anywhere}
.phase-banner__link:hover{color:var(--wc-accent-1)}
/* A linha de datas é registro, não texto de leitura: recua um tom e ganha
   respiro, senão emenda na descrição e as duas viram um parágrafo só. */
#phase-meta{margin-top:12px;font-size:.84rem;color:var(--wc-text-dim)}


/* "Revisar": o contorno precisa reagir ao ponteiro, senão um botão claro sobre
   cartão branco não parece clicável. */
.btn--ghost{background:var(--wc-surface)}
.btn--ghost:hover{border-color:var(--wc-accent-1);color:var(--wc-accent-2)}


/* ==========================================================================
   Atividade em pagina (a pesquisa de satisfacao)
   Os blocos sao os mesmos do modal -- eles mudam de pai --, entao o estilo de
   pagina vem pelo contexto, sobrescrevendo as medidas apertadas do dialogo.
   ========================================================================== */
#activity-page{margin-top:18px}
#activity-page .activity-page__card{max-width:720px;margin:14px auto 0;
  background:#fff;border:1px solid var(--wc-border);border-radius:24px;
  padding:clamp(22px,3.5vw,38px);box-shadow:var(--shadow-card)}
#activity-page .modal__icon{font-size:2rem;margin-bottom:6px}
#activity-page .modal__title{font-size:clamp(1.3rem,2.6vw,1.8rem);line-height:1.2}
#activity-page .modal__body p{white-space:pre-wrap}
/* No modal o quadro de cada pergunta encosta nas bordas; aqui ha largura de
   sobra, entao a escala respira. */
#activity-page .question--scale,#activity-page .question--yesno{margin-bottom:26px}
#activity-page .question--scale legend,#activity-page .question--yesno legend{
  float:none;width:auto;display:block;font-weight:700;margin:0 0 10px;
  line-height:1.35}
#activity-page fieldset{padding:0;margin:18px 0}
/* A pergunta dependente tem fundo próprio, mas o texto dela precisa nascer na
   mesma margem das outras: a caixa avança para fora, o conteúdo fica alinhado. */
#activity-page .survey-question--nested{margin:18px -18px 0;padding:16px 18px;border-left:0;
  border-radius:var(--radius-sm);display:flow-root}
/* A <legend> nativa é desenhada por cima da borda do fieldset: numa caixa com
   fundo próprio, a primeira linha do enunciado ficava fora do rosa e só a
   sobra ("contato?") caía dentro. Flutuar a legenda devolve ela ao fluxo —
   aqui isso precisa vencer a regra das escalas, que a tira do float. */
#activity-page .survey-question--nested > legend{float:left;width:100%;display:block;
  margin:0 0 12px;padding:0;line-height:1.35}
#activity-page .survey-question--nested > legend + *{clear:both}
@media(max-width:620px){
  #activity-page .activity-page__card{padding:18px 14px;border-radius:18px}
}


/* ==========================================================================
   Grade de cartoes das missoes (fases com fala em toda missao)
   O CSS base veio do prototipo, onde os textos eram <p>. Aqui o cartao inteiro
   e um <button> -- <p> dentro de <button> nao e marcacao valida --, entao os
   <span> precisam virar bloco e o botao precisa perder a cara de botao.
   ========================================================================== */
.character-card{display:flex;flex-direction:column;gap:0;width:100%;
  font:inherit;text-align:center;cursor:pointer;color:var(--wc-text)}
.character-card__head{flex-direction:column;gap:8px;align-items:center}
.character-card__avatar{font-size:1.3rem}
.character-card__who{display:flex;flex-direction:column;gap:2px}
.character-card__name,.character-card__role,.character-card__quote,
.character-card .status-tag{display:block}
.character-card__quote{margin:0 0 12px;color:var(--wc-text-dim)}
.character-card .status-tag{margin-top:auto}
.character-card:focus-visible{outline:3px solid var(--wc-accent-1);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.character-card{transition:none}}


/* O fluxograma do organograma e mais largo que um formulario: a pagina abre
   espaco para ele em vez de empurrar tudo para a rolagem horizontal. */
#activity-page[data-kind="orgchart"] .activity-page__card{max-width:1000px}
#activity-page[data-kind="orgchart"] .org-flow-wrap{padding-bottom:10px}


/* O OKR e um formulario longo: mesma largura confortavel da pesquisa. O
   fechamento e uma arena centrada, entao o cartao acompanha a medida dela. */
#activity-page[data-kind="alignment"] .activity-page__card{max-width:760px;text-align:center}
#activity-page[data-kind="alignment"] .modal__body p{white-space:pre-wrap}
#activity-page[data-kind="alignment"] .boss-arena{padding-top:6px}
#activity-page[data-kind="alignment"] .boss-recap p{white-space:pre-wrap}
#activity-page[data-kind="alignment"] form{max-width:520px;margin:0 auto}
#activity-page[data-kind="alignment"] .btn{width:100%}
@media(prefers-reduced-motion:reduce){.boss-shield{animation:none}}


/* Voltar ao topo: flutuante, sobre o conteudo, a partir da segunda dobra.
   Vive fora da cortina do rodape porque clip-path prenderia um position:fixed
   ao proprio rodape. Cores proprias: ele agora aparece sobre a pagina clara,
   nao mais sobre o painel escuro do rodape. */
/* Chamada de saída da fase: fica acima do botão de voltar ao topo, no mesmo
   canto, porque é para lá que o olho vai depois de concluir a última missão. */
.next-phase{position:fixed;right:clamp(14px,3vw,28px);
  bottom:calc(clamp(14px,3vw,28px) + 58px);z-index:71;
  border:0;border-radius:999px;padding:14px 26px;font:inherit;font-size:.9rem;font-weight:800;
  color:#fff;cursor:pointer;background:var(--wc-gradient);
  box-shadow:0 12px 28px rgba(230,0,110,.38);animation:subirBotao .22s ease}
.next-phase:hover{filter:brightness(1.06)}
@media(max-width:650px){.next-phase{left:clamp(14px,3vw,28px);right:clamp(74px,12vw,88px);
  text-align:center;padding:13px 18px}}
@media print{.next-phase{display:none!important}}
#footer-top{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);
  z-index:70;width:46px;height:46px;padding:0;justify-content:center;font-size:1.1rem;
  background:var(--notch-bg);color:var(--notch-fill);border:1px solid var(--notch-line);
  box-shadow:0 8px 22px rgba(102,20,60,.22);backdrop-filter:none;
  animation:subirBotao .22s ease}
#footer-top:hover{background:var(--wc-gradient);color:#fff;border-color:transparent}
@keyframes subirBotao{from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#footer-top{animation:none}}
@media print{#footer-top{display:none!important}}