/* ==============================================================
   A central da ImpulsIA por dentro.
   Menu escuro a esquerda, palco claro a direita.

   As cores sao as da marca, sem uma unica cor nova: ink #050505,
   cream #F6F3EE, pink pulse #FF0069, orange glow #FF5900, e o
   lime #CBFF00 so onde tem de haver uma surpresa. O que mudou
   foi a materia: o pink e o orange passaram a viver juntos num
   degrade, o menu foi para preto, e o fundo ganhou aurora,
   grelha e grao, para a pagina deixar de ser lisa.

   Usa as variaveis do estilo.css, que entra antes deste.
   ============================================================== */

:root{
  --lado-larg:286px;
  --fundo:#F2EEE8;

  /* o degrade da casa: pink pulse a derreter no orange glow.
     Conta como uma cor so, e e por isso que o lime continua a ser
     a segunda e unica outra cor de cada composicao. */
  --gradiente:linear-gradient(118deg,#FF0069 0%,#FF2A44 46%,#FF5900 100%);

  --escuro:#080808;
  --clara-3:rgba(246,243,238,.4);
  --carta:rgba(255,255,255,.74);
  --carta-risco:rgba(5,5,5,.09);
  --raio-carta:26px;
  --raio-ctl:14px;

  --mono:"DM Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

body{background:var(--fundo)}

/* ------------------------------------------------------- o fundo

   Tres camadas fixas por tras de tudo, sem apanhar o rato:
   a aurora (o degrade da marca esborratado), uma grelha fina que
   se desvanece, e o grao. E o grao que tira o ar de modelo. */

.ac-fundo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ac-fundo span{position:absolute;inset:0;display:block}

.ac-aurora{
  background:
    radial-gradient(48vw 48vw at 88% -14%,rgba(255,0,105,.24),transparent 62%),
    radial-gradient(42vw 42vw at 102% 16%,rgba(255,89,0,.2),transparent 64%),
    radial-gradient(38vw 38vw at 64% -20%,rgba(255,0,105,.12),transparent 66%);
}
.ac-grelha-fundo{
  background-image:
    linear-gradient(to right,rgba(5,5,5,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(5,5,5,.05) 1px,transparent 1px);
  background-size:76px 76px;
  -webkit-mask-image:radial-gradient(120% 88% at 76% -6%,#000 0%,transparent 70%);
  mask-image:radial-gradient(120% 88% at 76% -6%,#000 0%,transparent 70%);
}
.ac-grao{
  opacity:.055;mix-blend-mode:multiply;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}

.ac{display:flex;min-height:100vh;position:relative;z-index:1}

/* ---------------------------------------------------- menu lateral */

.ac-lado{
  position:sticky;top:0;align-self:flex-start;z-index:2;
  width:var(--lado-larg);flex-shrink:0;height:100vh;
  background:
    radial-gradient(130% 34% at 50% 0%,rgba(255,0,105,.18),transparent 72%),
    var(--escuro);
  border-right:1px solid rgba(246,243,238,.09);
  color:var(--cream);
  display:flex;flex-direction:column;gap:16px;
  padding:26px 16px 14px;overflow-y:auto;
  scrollbar-width:thin;scrollbar-color:rgba(246,243,238,.18) transparent;
}
.ac-lado::-webkit-scrollbar{width:6px}
.ac-lado::-webkit-scrollbar-thumb{background:rgba(246,243,238,.16);border-radius:3px}
.ac-lado::-webkit-scrollbar-track{background:transparent}

.ac-marca{
  display:flex;align-items:baseline;gap:4px;padding:2px 10px 0;
  font-family:var(--display);font-size:23px;font-weight:700;
  letter-spacing:-.045em;color:var(--cream);
}
/* o ponto da marca e um disco aceso, nao uma letra */
.ac-marca span{
  width:7px;height:7px;border-radius:50%;background:var(--gradiente);
  display:inline-block;text-indent:-999px;overflow:hidden;flex-shrink:0;
  box-shadow:0 0 16px rgba(255,0,105,.9);
}
.ac-marca-sub{
  /* cancela o gap do menu, para a legenda ficar colada a marca */
  display:block;margin-top:-16px;padding:7px 10px 4px;
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--clara-3);
}

.ac-grupo{display:flex;flex-direction:column;gap:2px}
.ac-grupo-nome{
  font-family:var(--mono);font-size:10px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--clara-3);
  padding:10px 12px 6px;
}

/* cada entrada do menu */
.ac-item{
  position:relative;
  display:flex;align-items:center;gap:12px;width:100%;
  padding:10px 12px;border-radius:12px;border:1px solid transparent;background:none;
  font-family:var(--corpo);font-size:14.5px;font-weight:500;
  color:rgba(246,243,238,.64);
  cursor:pointer;text-align:left;min-height:42px;
  transition:background .18s,color .18s,border-color .18s;
}
.ac-item svg{width:18px;height:18px;flex-shrink:0;stroke-width:1.8;opacity:.7;transition:opacity .18s,color .18s}
.ac-item:hover{background:rgba(246,243,238,.06);color:var(--cream)}
.ac-item:hover svg{opacity:1}
.ac-item.aberto{
  background:rgba(246,243,238,.09);border-color:rgba(246,243,238,.13);
  color:#fff;font-weight:600;
}
.ac-item.aberto svg{color:var(--lime);opacity:1}
/* a barra acesa encostada ao rebordo do menu */
.ac-item.aberto::before{
  content:"";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
  width:3px;height:20px;border-radius:0 3px 3px 0;background:var(--gradiente);
}

/* o botao grande do BrandIA */
.ac-brandia{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:12px;width:100%;
  margin-top:6px;padding:19px 16px;border-radius:18px;border:none;
  background:var(--gradiente);color:#fff;cursor:pointer;text-align:left;
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.02em;line-height:1.38;
  box-shadow:0 12px 30px -14px rgba(255,0,105,.9),inset 0 1px 0 rgba(255,255,255,.26);
  transition:transform .2s cubic-bezier(.2,.8,.3,1),box-shadow .2s;
}
.ac-brandia:hover{transform:translateY(-2px);box-shadow:0 18px 40px -16px rgba(255,0,105,.95),inset 0 1px 0 rgba(255,255,255,.3)}
/* Sem isto herdava o anel de 3px em pink pulse colado ao botao, que parecia
   um aviso de erro. Fica igual ao do botao de ajuda e ao do nome dela, que
   sao os vizinhos deste no mesmo menu. */
.ac-brandia:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
.ac-brandia .ac-seta{margin-left:auto;transition:transform .25s ease}
.ac-brandia[aria-expanded="true"] .ac-seta{transform:rotate(90deg)}
.ac-brandia svg{width:18px;height:18px;flex-shrink:0}

/* ---------------- o submenu do BrandIA, que e um percurso

   Oito linhas todas iguais e na mesma cor apagada nao diziam por onde
   comecar nem onde ela ia. Agora sao paragens de um caminho, ligadas por
   um fio, e cada uma diz em que estado esta.

   As paragens nao sao todas do mesmo genero, e e por isso que ha dois
   tipos de marca:
   - numeradas de 1 a 5: sao as que ela escreve. Ganham um visto lime
     quando estiverem escritas, e e essas que a conta de cima conta.
   - com uma faisca: o caminho, a marca e o mapa de conteudo nao se
     escrevem, fazem-se a partir das outras. Numera-las dava a entender
     que lhe faltava fazer trabalho que nao existe.  */

.ac-sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.3,1)}
.ac-sub.aberto{grid-template-rows:1fr}
.ac-sub-dentro{overflow:hidden;display:flex;flex-direction:column;padding:2px 0 4px}

.ac-passo-conta{
  font-family:var(--mono);font-size:9.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--clara-3);
  padding:6px 12px 8px 41px;
}
.ac-passo-conta:empty{display:none}

.ac-sub .ac-passo{
  position:relative;
  gap:12px;padding:8px 10px 8px 6px;min-height:38px;
  font-size:13.5px;border-radius:11px;
}

/* o fio que liga as paragens. Passa por tras dos pontos, e para a meio
   na primeira e na ultima para o caminho nao parecer cortado. */
.ac-sub .ac-passo::after{
  content:"";position:absolute;left:19px;top:-1px;bottom:-1px;width:1px;
  background:rgba(246,243,238,.13);
}
.ac-sub .ac-passo:first-of-type::after{top:50%}
.ac-sub .ac-passo:last-of-type::after{bottom:50%}

.ac-passo-n{
  position:relative;z-index:1;flex-shrink:0;
  width:21px;height:21px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--escuro);border:1.5px solid rgba(246,243,238,.22);
  font-family:var(--mono);font-size:10px;line-height:1;
  color:rgba(246,243,238,.45);
  transition:background .18s,border-color .18s,color .18s;
}
/* O seletor tem de ser mais forte do que o `.ac-item svg` do menu, que poe
   tudo a 18px e a 70% de opacidade. A 18px estes saiam de dentro do ponto,
   que tem 21px de fora a fora. */
.ac-sub .ac-passo .ac-passo-visto{width:12px;height:12px;display:none;opacity:1;stroke-width:3.4}
.ac-sub .ac-passo .ac-passo-faisca{width:12px;height:12px;opacity:.7}

/* escrita: o numero da lugar ao visto, e o ponto acende a lime */
.ac-sub .ac-passo.feita{color:rgba(246,243,238,.78)}
.ac-sub .ac-passo.feita .ac-passo-n{
  background:var(--lime);border-color:var(--lime);
  color:var(--escuro);font-size:0;
}
.ac-sub .ac-passo.feita .ac-passo-visto{display:block}

/* a paragem onde ela esta agora */
.ac-sub .ac-passo.aberto{
  background:rgba(246,243,238,.09);border-color:rgba(246,243,238,.13);
  color:#fff;font-weight:600;
}
.ac-sub .ac-passo.aberto .ac-passo-n{
  background:var(--gradiente);border-color:transparent;color:#fff;
  box-shadow:0 0 0 4px rgba(255,0,105,.13);
}
/* a barra acesa do menu de cima nao entra aqui: o ponto ja diz onde ela esta,
   e as duas coisas juntas eram duas marcas para a mesma informacao */
.ac-sub .ac-passo.aberto::before{display:none}

/* quem esta a usar, la em baixo */
.ac-eu{
  margin-top:auto;display:flex;align-items:center;gap:11px;
  padding:14px 8px 4px;border-top:1px solid rgba(246,243,238,.1);
}
.ac-bolinha{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;border-radius:12px;background:var(--gradiente);color:#fff;
  font-family:var(--display);font-size:15px;font-weight:700;flex-shrink:0;
  box-shadow:0 8px 20px -10px rgba(255,0,105,.9);
}
.ac-eu b{display:block;font-size:14.5px;font-weight:600;color:var(--cream)}
.ac-sair{margin-left:auto;background:none;border:none;cursor:pointer;color:var(--clara-3);padding:6px;transition:color .18s}
.ac-sair:hover{color:var(--cream)}
.ac-sair svg{width:17px;height:17px}

/* ---------------------------------------------------- lado direito */

.ac-palco{
  position:relative;z-index:1;flex-grow:1;min-width:0;max-width:1160px;
  padding:clamp(30px,3.2vw,48px) clamp(20px,3.4vw,52px) 104px;
}
.ac-area{display:none}
.ac-area.aberta{display:block;animation:ac-entrar .4s cubic-bezier(.2,.8,.3,1)}
@keyframes ac-entrar{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ---------- o cabecalho de cada area ---------- */

.ac-topo{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;
  margin-bottom:clamp(24px,3vw,36px);padding-bottom:24px;
  border-bottom:1px solid var(--carta-risco);
}
.ac-topo h1{
  margin-top:14px;
  font-size:clamp(2.1rem,4.6vw,3.5rem);letter-spacing:-.05em;line-height:.97;
}
.ac-topo p{margin-top:15px;max-width:46em;font-size:16.5px;line-height:1.62;color:var(--tinta-2)}

/* o numero fantasma no canto, em monoespaco.
   Vem do data-area da seccao, por isso o html nao precisa de saber dele. */
.ac-topo::before{
  position:absolute;right:2px;top:-8px;pointer-events:none;
  font-family:var(--mono);font-weight:500;
  font-size:clamp(48px,6.4vw,78px);line-height:1;letter-spacing:-.05em;
  color:rgba(5,5,5,.055);
}
.ac-area[data-area="novidades"]    .ac-topo::before{content:"01"}
.ac-area[data-area="comofunciona"] .ac-topo::before{content:"02"}
.ac-area[data-area="aulas"]        .ac-topo::before{content:"03"}
.ac-area[data-area="ferramentas"]  .ac-topo::before{content:"04"}
.ac-area[data-area="prompts"]      .ac-topo::before{content:"05"}
.ac-area[data-area="comunidade"]   .ac-topo::before{content:"06"}
.ac-area[data-area="subscricao"]   .ac-topo::before{content:"07"}
.ac-area[data-area="diagnostico"]  .ac-topo::before{content:"B1"}
.ac-area[data-area="caminho"]      .ac-topo::before{content:"B2"}
.ac-area[data-area="porque"]       .ac-topo::before{content:"B3"}
.ac-area[data-area="cliente"]      .ac-topo::before{content:"B4"}
.ac-area[data-area="empatia"]      .ac-topo::before{content:"B5"}
.ac-area[data-area="objetivos"]    .ac-topo::before{content:"B6"}
.ac-area[data-area="marca"]        .ac-topo::before{content:"B7"}
.ac-area[data-area="mapa"]         .ac-topo::before{content:"B8"}

/* a etiqueta por cima do titulo passa a monoespaco, com um traco aceso */
.ac-palco .ia-etiq{
  gap:10px;font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-palco .ia-etiq::before{width:18px;height:2px;border-radius:2px;background:var(--gradiente)}
.ac-palco .ia-etiq b{font-weight:500;color:var(--ink)}

/* ---------- o painel escuro dos atalhos ----------
   E o unico bloco preto do palco, e e de proposito: da peso ao
   cimo da pagina e separa o "faz isto agora" do "o que ha de novo".
   O grao por cima impede o degrade de fazer riscas. */

.ac-atalhos{
  position:relative;overflow:hidden;
  margin-bottom:clamp(28px,3vw,38px);
  padding:clamp(24px,2.6vw,30px);border-radius:var(--raio-carta);
  color:var(--cream);
  background:
    radial-gradient(70% 150% at 100% 0%,rgba(255,0,105,.44),transparent 58%),
    radial-gradient(54% 130% at 80% 8%,rgba(255,89,0,.32),transparent 60%),
    var(--escuro);
  box-shadow:0 26px 56px -34px rgba(5,5,5,.8);
}
.ac-atalhos::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  opacity:.5;mix-blend-mode:overlay;background-size:170px 170px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
}
.ac-atalhos-nome{
  position:relative;z-index:1;display:flex;align-items:center;gap:10px;margin-bottom:16px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(246,243,238,.58);
}
.ac-atalhos-nome::before{content:"";width:16px;height:2px;border-radius:2px;background:var(--lime)}
.ac-atalhos-lista{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(214px,1fr));gap:12px;
}
/* uns sao ligacoes para fora, outros sao botoes que trocam de area:
   tem de ficar iguais, por isso o botao larga o que o navegador lhe poe */
.ac-atalho{
  display:flex;flex-direction:column;gap:7px;width:100%;padding:18px 18px 17px;
  border:1px solid rgba(246,243,238,.14);border-radius:16px;
  background:rgba(246,243,238,.05);color:inherit;
  font-family:var(--corpo);text-align:left;cursor:pointer;
  transition:background .22s,border-color .22s,transform .22s cubic-bezier(.2,.8,.3,1);
}
.ac-atalho:hover{background:rgba(246,243,238,.11);border-color:rgba(246,243,238,.3);transform:translateY(-2px)}
.ac-atalho-n{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:rgba(246,243,238,.44);
}
.ac-atalho-n svg{width:14px;height:14px;transition:transform .22s}
.ac-atalho:hover .ac-atalho-n svg{transform:translate(2px,-2px);color:var(--lime)}
.ac-atalho b{font-family:var(--display);font-size:1.05rem;font-weight:600;letter-spacing:-.03em}
.ac-atalho span{font-size:13.5px;line-height:1.46;color:rgba(246,243,238,.62)}

/* titulo pequeno com um risco a seguir, para separar blocos dentro da area */
.ac-subtitulo{
  display:flex;align-items:center;gap:14px;margin:0 0 16px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-subtitulo::after{content:"";flex:1 1 auto;height:1px;background:var(--carta-risco)}

/* ---------- cartoes ----------
   Vidro por cima da aurora, em vez de branco chapado. */

.ac-caixa{
  position:relative;overflow:hidden;
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);border-radius:var(--raio-carta);
  padding:clamp(24px,2.6vw,32px);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 44px -38px rgba(5,5,5,.6);
}
.ac-grelha{display:grid;gap:18px}
/* o min(100%,...) e o que impede a grelha de meter tres colunas onde
   so cabem duas, e de espremer os cartoes dos grupos ate partir o texto */
.ac-grelha--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,412px),1fr))}
.ac-grelha--3{grid-template-columns:repeat(auto-fit,minmax(min(100%,262px),1fr))}

/* so os cartoes de grelha reagem: nos blocos de escrita seria ruido */
.ac-grelha .ac-caixa{transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s,border-color .26s}
.ac-grelha .ac-caixa::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:var(--gradiente);opacity:0;transition:opacity .28s;
}
.ac-grelha .ac-caixa:hover{transform:translateY(-3px);border-color:rgba(5,5,5,.14);box-shadow:0 1px 2px rgba(5,5,5,.03),0 30px 60px -40px rgba(5,5,5,.7)}
.ac-grelha .ac-caixa:hover::before{opacity:1}

.ac-caixa h2{font-size:1.55rem;letter-spacing:-.035em;margin-bottom:10px}
.ac-caixa h3{font-size:1.2rem;letter-spacing:-.03em;margin-bottom:9px}
.ac-caixa p{font-size:15px;line-height:1.62;color:var(--tinta-2)}

/* ---------- as novidades ---------- */

.ac-palco .ia-grelha-3{gap:18px}
.ac-palco .ia-cartao{
  gap:13px;padding:26px 26px 30px;
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);border-radius:var(--raio-carta);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 44px -38px rgba(5,5,5,.6);
}
.ac-palco .ia-cartao:hover{transform:translateY(-3px);border-color:rgba(5,5,5,.14);box-shadow:0 1px 2px rgba(5,5,5,.03),0 30px 60px -40px rgba(5,5,5,.7)}
/* o traco aceso mudou de baixo para cima, e ficou fino */
.ac-palco .ia-cartao::after{top:0;bottom:auto;height:1.5px;background:var(--gradiente)}

/* a bola deixou de ser uma bola pousada no cartao: agora sangra do canto */
.ac-palco .ia-cartao .ia-bola{
  position:absolute;top:-58px;right:-58px;width:148px;height:148px;
  filter:blur(11px);opacity:.34;
  transition:opacity .32s ease,transform .5s cubic-bezier(.2,.8,.3,1);
}
.ac-palco .ia-cartao:hover .ia-bola{opacity:.52;transform:scale(1.1)}
.ac-palco .ia-cartao-topo{position:relative;z-index:1}
.ac-palco .ia-cartao h3{position:relative;z-index:1;font-size:1.32rem;letter-spacing:-.035em}
.ac-palco .ia-cartao p{position:relative;z-index:1}
.ac-palco .ia-cartao-tipo,
.ac-palco .ia-cartao-data{
  font-family:var(--mono);font-size:10.5px;font-weight:400;letter-spacing:.16em;
}
.ac-palco .ia-cartao-tipo{color:var(--pink-bt)}

/* ---------- os grupos da comunidade ---------- */

.ac-grupo-cartao{
  position:relative;overflow:hidden;
  display:flex;align-items:center;gap:18px;
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);border-radius:var(--raio-carta);
  padding:22px 24px;
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 44px -38px rgba(5,5,5,.6);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s;
}
.ac-grupo-cartao::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
  background:var(--gradiente);opacity:0;transition:opacity .28s;
}
.ac-grupo-cartao:hover{transform:translateY(-3px);border-color:rgba(5,5,5,.14);box-shadow:0 1px 2px rgba(5,5,5,.03),0 30px 60px -40px rgba(5,5,5,.7)}
.ac-grupo-cartao:hover::before{opacity:1}
.ac-grupo-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:48px;height:48px;border-radius:var(--raio-ctl);flex-shrink:0;
  background:rgba(5,5,5,.05);color:var(--ink);
  transition:background .24s,color .24s;
}
.ac-grupo-cartao:hover .ac-grupo-icone{background:var(--gradiente);color:#fff}
/* o lime e a surpresa desta area, por isso nao se mexe */
.ac-grupo-icone--lime,
.ac-grupo-cartao:hover .ac-grupo-icone--lime{background:var(--lime);color:var(--ink)}
.ac-grupo-icone svg{width:22px;height:22px}
.ac-grupo-texto{flex-grow:1;min-width:0}
.ac-grupo-texto b{display:block;font-family:var(--display);font-size:1.1rem;font-weight:600;letter-spacing:-.025em;margin-bottom:5px}
.ac-grupo-texto span{display:block;font-size:14.5px;line-height:1.5;color:var(--tinta-2)}
.ac-grupo-entrar{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
  transition:color .24s;
}
.ac-grupo-cartao:hover .ac-grupo-entrar{color:var(--pink-bt)}
.ac-grupo-entrar svg{width:14px;height:14px}

@media(max-width:560px){
  .ac-grupo-cartao{flex-wrap:wrap;gap:14px}
  .ac-grupo-texto{flex:1 1 100%;order:3}
  .ac-grupo-entrar{margin-left:auto}
}

/* ---------- linha de dados, para a subscricao ---------- */

.ac-linha{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 0;border-bottom:1px solid var(--carta-risco)}
.ac-linha:last-child{border-bottom:none}
.ac-linha b{font-size:14.5px;font-weight:600;letter-spacing:.005em}
.ac-linha span{font-family:var(--mono);font-size:13.5px;color:var(--tinta-2)}
.ac-selo{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--lime);border-radius:999px;padding:5px 13px;
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
}

/* ---------- lista de aulas ---------- */

.ac-aulas{display:flex;flex-direction:column;gap:2px}
.ac-aula{
  display:flex;align-items:center;gap:16px;padding:14px 12px;
  border-radius:var(--raio-ctl);transition:background .2s;
}
.ac-aula + .ac-aula{box-shadow:inset 0 1px 0 var(--carta-risco)}
.ac-aula:hover{background:rgba(5,5,5,.035)}
.ac-aula-n{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;border:none;flex-shrink:0;
  background:rgba(5,5,5,.055);color:var(--tinta-3);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  font-variant-numeric:tabular-nums;
  transition:background .2s,color .2s;
}
.ac-aula:hover .ac-aula-n{background:var(--gradiente);color:#fff}
/* o titulo e o resumo empilhados, para a data e o "ver no MemberKit"
   continuarem encostados a direita como estavam */
.ac-aula-meio{flex-grow:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.ac-aula-t{font-size:15.5px;font-weight:500;line-height:1.35}
.ac-aula-r{font-size:13.5px;line-height:1.5;color:var(--tinta-2)}
.ac-aula-fora{
  display:inline-flex;align-items:center;gap:7px;flex-shrink:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--tinta-3);transition:color .2s;
}
.ac-aula:hover .ac-aula-fora{color:var(--pink-bt)}
.ac-aula-fora svg{width:14px;height:14px}

/* Num ecra estreito nao ha largura para tudo: o "VER NO MEMBERKIT" sozinho
   leva 145px e esmagava o titulo e o resumo ate desaparecerem. Fica so a
   setinha, que ja diz que a aula abre noutro lado, e o texto todo cabe. */
@media(max-width:640px){
  .ac-aula{flex-wrap:wrap;gap:8px 12px;padding:14px 10px}
  .ac-aula-meio{flex:1 1 0;min-width:0}
  .ac-aula-fora{font-size:0;letter-spacing:0;gap:0}
  .ac-aula-fora svg{width:16px;height:16px}
  /* a data desce para uma linha so dela, alinhada por baixo do titulo */
  .ac-aula-quando{order:3;flex-basis:100%;padding-left:42px}
}

/* ---------- as fichas das ferramentas ---------- */

.ac-palco .ia-fichas{gap:9px}
.ac-palco .ia-ficha{
  border:1px solid var(--carta-risco);border-radius:11px;
  background:rgba(255,255,255,.6);
  padding:10px 16px;
  font-family:var(--mono);font-size:12.5px;font-weight:400;letter-spacing:.02em;
  transition:background .2s,color .2s,border-color .2s;
}
.ac-palco .ia-ficha:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

/* ---------- o que ainda nao esta feito ----------
   Riscas na diagonal, como uma zona de obras. Diz ao olho que
   aquilo nao e uma area falhada, e uma area por acabar. */

.ac-porfazer{
  position:relative;
  border:1px dashed rgba(5,5,5,.2);border-radius:var(--raio-carta);
  padding:clamp(24px,2.6vw,32px);
  background:
    repeating-linear-gradient(45deg,rgba(255,89,0,.035) 0 9px,transparent 9px 18px),
    rgba(255,255,255,.42);
}
.ac-porfazer .ac-etiqueta{
  display:inline-flex;align-items:center;gap:9px;margin-bottom:13px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--orange);
}
.ac-porfazer .ac-etiqueta::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 3px rgba(255,89,0,.18);
}
.ac-porfazer h3{font-size:1.25rem;letter-spacing:-.03em;margin-bottom:9px}
.ac-porfazer p{font-size:15px;line-height:1.62;color:var(--tinta-2);max-width:48em}
.ac-porfazer ul{margin-top:14px;display:flex;flex-direction:column;gap:9px}
.ac-porfazer li{position:relative;padding-left:22px;font-size:15px;line-height:1.5;color:var(--tinta-2)}
.ac-porfazer li::before{
  content:"";position:absolute;left:0;top:8px;
  width:8px;height:8px;border-radius:2px;background:var(--gradiente);
}

/* ---------- campos de escrita ---------- */

.ac-campo{display:flex;flex-direction:column;gap:9px;margin-bottom:20px}
.ac-campo label{
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.18em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-campo textarea,.ac-campo input{
  width:100%;box-sizing:border-box;background:rgba(255,255,255,.8);
  border:1px solid var(--carta-risco);border-radius:16px;padding:15px 17px;
  font-family:var(--corpo);font-size:15.5px;line-height:1.58;color:var(--ink);resize:vertical;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.ac-campo textarea::placeholder,.ac-campo input::placeholder{color:rgba(5,5,5,.34)}
.ac-campo textarea:focus,.ac-campo input:focus{
  border-color:var(--pink);background:#fff;outline:none;
  box-shadow:0 0 0 4px rgba(255,0,105,.12);
}
.ac-campo small{font-size:13px;color:var(--tinta-3)}

/* ---------- botoes dentro da central ---------- */

.ac-palco .ia-bt--pink{
  background:var(--gradiente);
  box-shadow:0 12px 30px -14px rgba(255,0,105,.85),inset 0 1px 0 rgba(255,255,255,.22);
}
.ac-palco .ia-bt--pink:hover{box-shadow:0 18px 40px -16px rgba(255,0,105,.95),inset 0 1px 0 rgba(255,255,255,.28)}
.ac-palco .ia-bt--linha{border-color:var(--carta-risco);background:rgba(255,255,255,.55)}
.ac-palco .ia-bt--linha:hover{border-color:var(--ink);background:rgba(255,255,255,.9)}

/* estado de "guardado" ao lado do botao */
.ac-guardar-fila{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.ac-estado{font-family:var(--mono);font-size:12.5px;color:var(--tinta-3)}
.ac-estado--bom{color:#2F7A2F}
.ac-estado--mau{color:#A33200}

/* ---------------------------------------------------- no telemovel */

.ac-abrir{
  display:none;position:fixed;top:14px;left:14px;z-index:60;
  width:46px;height:46px;border-radius:var(--raio-ctl);border:1px solid rgba(246,243,238,.14);
  background:var(--escuro);color:var(--cream);cursor:pointer;align-items:center;justify-content:center;
  box-shadow:0 12px 30px -16px rgba(5,5,5,.9);
}
.ac-abrir svg{width:20px;height:20px}
.ac-veu{display:none;position:fixed;inset:0;z-index:55;background:rgba(5,5,5,.5);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.ac-veu.aberto{display:block}

@media(max-width:900px){
  .ac-abrir{display:inline-flex}
  .ac-lado{
    position:fixed;left:0;top:0;z-index:58;padding-top:76px;
    transform:translateX(-100%);transition:transform .3s cubic-bezier(.2,.8,.3,1);
    box-shadow:0 0 70px -10px rgba(5,5,5,.6);
  }
  .ac-lado.aberto{transform:none}
  .ac-palco{padding-top:74px}
}

@media(max-width:620px){
  .ac-topo::before{display:none}
  .ac-topo{padding-bottom:20px}
}

@media(prefers-reduced-motion:reduce){
  .ac-area.aberta{animation:none}
  .ac-lado,.ac-sub,.ac-brandia .ac-seta,
  .ac-grelha .ac-caixa,.ac-grupo-cartao,.ac-palco .ia-cartao .ia-bola{transition:none}
}

/* ---------- nota por baixo de um bloco de escrita ----------
   Diz como e que aquilo funciona, sem roubar o lugar ao campo. */

.ac-nota-campo{
  margin-top:14px;max-width:62em;
  font-size:13.5px;line-height:1.6;color:var(--tinta-3);
}

/* um campo que veio da IA e ainda nao foi confirmado por ela.
   A risca do lado e o sinal de que aquilo e um rascunho, nao uma
   resposta dela. Desaparece quando ela guarda. */
.ac-campo textarea.ac-campo--rascunho{
  border-color:rgba(255,89,0,.42);
  background:rgba(255,89,0,.045);
  box-shadow:inset 3px 0 0 var(--orange);
}

/* ==============================================================
   A minha marca: a memoria da BrandIA.

   Nao e uma area de escrever, e uma area de ler. Por isso nao ha
   cartoes de vidro a competir uns com os outros, ha uma coluna de
   texto com uma risca a esquerda, como um caderno. O que falta
   aparece a cinzento, com o caminho para o ir escrever.
   ============================================================== */

.ac-mem{display:flex;flex-direction:column;gap:8px}

.ac-mem-barra{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;
  background:var(--escuro);color:var(--cream);
  border-radius:var(--raio-carta);
  padding:clamp(18px,2vw,22px) clamp(20px,2.2vw,26px);
}
.ac-mem-conta{display:flex;align-items:center;gap:13px;flex-wrap:wrap;min-width:0}
.ac-mem-quantas{
  font-family:var(--mono);font-size:13px;font-weight:500;
  letter-spacing:.02em;color:var(--lime);
}
.ac-mem-dito{font-size:14px;color:var(--clara-3)}
.ac-mem-trilho{
  width:clamp(90px,14vw,150px);height:4px;border-radius:99px;
  background:rgba(246,243,238,.16);overflow:hidden;flex-shrink:0;
}
.ac-mem-cheio{
  display:block;height:100%;width:0;border-radius:99px;
  background:var(--gradiente);transition:width .5s cubic-bezier(.2,.8,.3,1);
}
.ac-mem-barra .ia-bts{flex-wrap:wrap}
.ac-mem-barra .ia-bt--linha{
  border-color:rgba(246,243,238,.26);background:transparent;color:var(--cream);
}
.ac-mem-barra .ia-bt--linha:hover{
  border-color:var(--cream);background:rgba(246,243,238,.1);color:var(--cream);
}

.ac-mem-estado{min-height:18px;padding-left:2px}

.ac-mem-corpo{display:flex;flex-direction:column;gap:14px;margin-top:6px}

.ac-mem-peca{
  position:relative;
  border-left:2px solid transparent;
  border-image:var(--gradiente) 1;
  border-top:0;border-right:0;border-bottom:0;
  padding:4px 0 4px clamp(20px,2.4vw,28px);
}
.ac-mem-peca h2{
  font-size:clamp(1.15rem,1.7vw,1.4rem);letter-spacing:-.03em;
  margin-bottom:16px;
}

.ac-mem-par{margin-bottom:17px;max-width:64em}
.ac-mem-par:last-child{margin-bottom:0}
.ac-mem-par b{
  display:block;margin-bottom:5px;
  font-family:var(--mono);font-size:11px;font-weight:400;
  letter-spacing:.14em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-mem-par p{font-size:16px;line-height:1.68;color:var(--ink)}

/* o que ainda nao esta escrito: fica a cinzento e sem a risca de cor,
   para se ver de relance o que falta sem parecer um erro */
.ac-mem-peca--falta{border-image:none;border-left:2px solid rgba(5,5,5,.1)}
.ac-mem-peca--falta h2{color:var(--tinta-3)}
.ac-mem-falta{font-size:15px;line-height:1.6;color:var(--tinta-3)}
.ac-mem-ir{
  font:inherit;color:var(--pink-bt);background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
}
.ac-mem-ir:hover{color:var(--ink)}

@media(max-width:620px){
  .ac-mem-barra{flex-direction:column;align-items:flex-start;gap:16px}
  .ac-mem-barra .ia-bts,.ac-mem-barra .ia-bt{width:100%}
  .ac-mem-barra .ia-bt{justify-content:center}
}

@media(prefers-reduced-motion:reduce){
  .ac-mem-cheio{transition:none}
}

/* ==============================================================
   O diretorio das alunas, dentro da Comunidade.

   Cartoes de gente, nao de conteudo: a cara manda, e o resto
   arruma-se por baixo. As fichas do que ela faz bem ficam na
   cor da casa, e as do que anda a procurar em lime, para se ver
   de relance quem precisa do que.
   ============================================================== */

/* um topo de acabar uma coisa e comecar outra dentro da mesma area */
.ac-topo--meio{margin-top:clamp(40px,5vw,64px)}
.ac-topo--meio h2{
  margin-top:14px;
  font-size:clamp(1.6rem,3vw,2.3rem);letter-spacing:-.045em;line-height:1.02;
}

.ac-dir-estado{display:block;min-height:18px;margin-bottom:14px;padding-left:2px}

.ac-dir-cartao{display:flex;flex-direction:column;gap:13px}

.ac-dir-topo{display:flex;align-items:center;gap:14px;min-width:0}
.ac-dir-cara{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;
  object-fit:cover;background:rgba(5,5,5,.06);
  border:1px solid var(--carta-risco);
}
.ac-dir-cara--letra{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--gradiente);color:#fff;border-color:transparent;
  font-family:var(--mono);font-size:20px;font-weight:500;
}
.ac-dir-quem{display:flex;flex-direction:column;gap:2px;min-width:0}
.ac-dir-quem b{font-size:17px;letter-spacing:-.02em;line-height:1.25}
.ac-dir-quem small{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);
}

.ac-dir-bio{font-size:14.5px;line-height:1.6;color:var(--tinta-2)}

.ac-dir-rotulo{
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
  margin-bottom:-4px;
}
.ac-dir-fichas{display:flex;flex-wrap:wrap;gap:7px}
.ac-palco .ac-dir-fichas .ia-ficha{padding:7px 13px;font-size:12px;border-radius:10px}
.ac-palco .ac-dir-fichas .ia-ficha:hover{background:rgba(255,255,255,.6);color:var(--ink);border-color:var(--carta-risco)}
.ac-palco .ia-ficha--lime{
  border-color:rgba(5,5,5,.14);
  background:var(--lime);
}

.ac-dir-ig{
  display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:4px;
  font-family:var(--mono);font-size:12.5px;color:var(--pink-bt);
  text-decoration:none;
}
.ac-dir-ig:hover{color:var(--ink)}
.ac-dir-ig svg{width:13px;height:13px}

/* ==============================================================
   As quatro aulas mais recentes, no topo das Novidades.

   Os quatro cartoes usam o degrade da casa, e nao quatro cores
   diferentes: o que muda de um para o outro e o peso do pink
   para o orange, da esquerda para a direita. Lidos em fila
   parecem uma familia e nao um arco-iris, e a regra das duas
   cores por composicao continua de pe, com o lime a ser a
   segunda, so na data e na seta.
   ============================================================== */

.ac-ultimas{margin-bottom:clamp(20px,2.4vw,28px)}

.ac-ultimas-nome{
  display:flex;align-items:center;gap:10px;margin-bottom:14px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-ultimas-nome::before{
  content:"";width:16px;height:2px;border-radius:2px;background:var(--gradiente);
}

.ac-ultimas-lista{
  display:grid;gap:14px;
  /* 232px deixa os quatro na mesma fila num portatil normal, e continua
     a dar cartoes deitados. Acima disto o quarto cai para a linha de baixo. */
  grid-template-columns:repeat(auto-fit,minmax(min(100%,232px),1fr));
}

.ac-ultima{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;gap:8px;
  /* deitados, nao quadrados: o cartao e mais largo do que alto */
  min-height:132px;padding:16px 18px 14px;
  border-radius:var(--raio-carta);
  color:var(--cream);text-decoration:none;
  background:var(--g,var(--gradiente));
  box-shadow:0 1px 2px rgba(5,5,5,.06),0 18px 34px -26px rgba(120,30,60,.42);
  transition:transform .26s cubic-bezier(.2,.8,.3,1),box-shadow .26s;
}

/* O mesmo degrade da casa, a meia haste: os matizes sao exactamente os do
   pink pulse e do orange glow, com a saturacao baixada a 60%. Em quatro
   blocos grandes lado a lado, as cores a 100% batem com demasiada forca e
   cansam a vista.

   A luz de cada tom nao e a mesma: foi escolhida matiz a matiz para que o
   creme por cima de qualquer ponto do degrade de sempre 4,9:1. E por isso
   que o laranja e mais fundo do que o pink, apesar de parecerem irmaos. */
.ac-ultima:nth-child(1){--g:linear-gradient(118deg,#BE2F6B 0%,#C23057 58%,#C43142 100%)}
.ac-ultima:nth-child(2){--g:linear-gradient(118deg,#BE2F6B 0%,#C43142 46%,#A35429 100%)}
.ac-ultima:nth-child(3){--g:linear-gradient(118deg,#C43142 0%,#B6442D 52%,#A35429 100%)}
.ac-ultima:nth-child(4){--g:linear-gradient(118deg,#A35429 0%,#C03730 54%,#BE2F6B 100%)}

/* um brilho por cima, para o degrade nao ficar chapado */
.ac-ultima::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 82% -18%,rgba(255,255,255,.15),transparent 62%);
}

.ac-ultima:hover{
  transform:translateY(-4px);
  box-shadow:0 1px 2px rgba(5,5,5,.06),0 26px 46px -26px rgba(120,30,60,.55);
}
.ac-ultima:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

.ac-ultima-topo{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ac-ultima-data{
  display:inline-flex;align-items:center;
  padding:4px 9px;border-radius:999px;
  background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.ac-ultima-seccao{
  font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(246,243,238,.95);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;
}

.ac-ultima-titulo{
  font-family:var(--titulo,"Bricolage Grotesque",sans-serif);
  font-weight:700;font-size:16.5px;line-height:1.24;letter-spacing:-.025em;
  /* duas linhas, agora que o cartao e deitado e mais largo */
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}

.ac-ultima-ir{
  margin-top:auto;display:inline-flex;align-items:center;gap:6px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:rgba(246,243,238,.95);
}
.ac-ultima-ir svg{width:13px;height:13px;transition:transform .26s cubic-bezier(.2,.8,.3,1)}
.ac-ultima:hover .ac-ultima-ir{color:var(--lime)}
.ac-ultima:hover .ac-ultima-ir svg{transform:translate(2px,-2px)}

@media(prefers-reduced-motion:reduce){
  .ac-ultima,.ac-ultima-ir svg{transition:none}
  .ac-ultima:hover{transform:none}
}


/* ==============================================================
   A lista das aulas: caixa de procura e seccoes.
   ============================================================== */

/* o display:flex de cima ganha ao hidden, e sem isto as aulas
   filtradas continuavam a ver-se */
.ac-aula[hidden]{display:none}
.ac-seccao[hidden]{display:none}

.ac-procura{
  position:relative;display:flex;align-items:center;gap:11px;
  margin-bottom:clamp(20px,2.4vw,28px);
  padding:0 18px;
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);border-radius:999px;
  transition:border-color .2s,box-shadow .2s;
}
.ac-procura:focus-within{
  border-color:rgba(5,5,5,.3);
  box-shadow:0 0 0 4px rgba(255,0,105,.09);
}
.ac-procura svg{width:17px;height:17px;flex-shrink:0;color:var(--tinta-3)}
.ac-procura input{
  flex:1 1 auto;min-width:0;
  border:0;background:none;outline:none;
  padding:15px 0;font:inherit;font-size:15px;color:var(--ink);
}
.ac-procura input::placeholder{color:rgba(5,5,5,.34)}
/* o x que o navegador poe nos campos de procura fica torto aqui dentro */
.ac-procura input::-webkit-search-decoration,
.ac-procura input::-webkit-search-cancel-button{-webkit-appearance:none}
.ac-procura-conta{
  flex-shrink:0;font-family:var(--mono);font-size:11.5px;
  letter-spacing:.04em;color:var(--tinta-3);white-space:nowrap;
}

.ac-aulas-estado{display:block;min-height:18px;margin-bottom:12px;padding-left:2px}

.ac-seccao + .ac-seccao{margin-top:clamp(22px,2.6vw,30px)}
.ac-seccao-nome{
  display:flex;align-items:center;gap:11px;margin-bottom:12px;padding-left:2px;
  font-family:var(--mono);font-size:10.5px;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-seccao-nome::before{
  content:"";width:16px;height:2px;border-radius:2px;background:var(--gradiente);flex-shrink:0;
}
.ac-seccao-nome span{
  margin-left:auto;padding:3px 9px;border-radius:999px;
  border:1px solid var(--carta-risco);background:rgba(255,255,255,.55);
  font-size:10.5px;letter-spacing:.06em;color:var(--tinta-3);
}


/* ==============================================================
   Os botoes das ultimas aulas, revistos.

   Ficaram mais baixos, para serem rectangulos deitados e nao
   quadrados, e os tons desceram: o mesmo rosa e o mesmo laranja
   da casa, mas assentes, do lado da framboesa e do caramelo
   queimado em vez do neon. Saiu tambem o brilho branco por cima
   e o halo cor-de-rosa a volta, que era o que fazia aquilo
   latejar. O lime da data fica, e e ele que da o contraste.
   ============================================================== */

.ac-ultima{
  min-height:0;
  padding:15px 16px 13px;
  gap:8px;
  box-shadow:0 1px 2px rgba(5,5,5,.05),0 14px 28px -22px rgba(5,5,5,.55);
}
.ac-ultima:nth-child(1){--g:linear-gradient(118deg,#C4004F 0%,#BC1545 60%,#B42638 100%)}
.ac-ultima:nth-child(2){--g:linear-gradient(118deg,#C4004F 0%,#B42638 48%,#B04200 100%)}
.ac-ultima:nth-child(3){--g:linear-gradient(118deg,#B42638 0%,#AE3620 52%,#B04200 100%)}
.ac-ultima:nth-child(4){--g:linear-gradient(118deg,#B04200 0%,#B02F24 54%,#C4004F 100%)}

/* o brilho passou de um clarao a uma insinuacao */
.ac-ultima::before{
  background:radial-gradient(120% 90% at 84% -20%,rgba(255,255,255,.12),transparent 60%);
}
.ac-ultima:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(5,5,5,.05),0 22px 40px -22px rgba(5,5,5,.65);
}

.ac-ultima-titulo{font-size:15.5px;-webkit-line-clamp:2}
.ac-ultima-ir{font-size:11px}

/* ==============================================================
   As ferramentas da PlataformIA.
   ============================================================== */

.ac-fer-filtros{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:clamp(18px,2.2vw,24px);
}
.ac-fer-filtro{
  font:inherit;cursor:pointer;
  padding:9px 15px;border-radius:999px;
  border:1px solid var(--carta-risco);background:rgba(255,255,255,.6);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--tinta-2);
  transition:background .2s,color .2s,border-color .2s;
}
.ac-fer-filtro:hover{border-color:rgba(5,5,5,.24);background:rgba(255,255,255,.92)}
.ac-fer-filtro.escolhido{
  background:var(--ink);border-color:var(--ink);color:var(--cream);
}

.ac-fer-estado{display:block;min-height:18px;margin-bottom:12px;padding-left:2px}

.ac-fer-grelha{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,254px),1fr));
}

.ac-fer[hidden]{display:none}
.ac-fer{
  display:flex;flex-direction:column;gap:9px;
  padding:16px;border-radius:var(--raio-carta);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);
  text-decoration:none;color:var(--ink);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s,box-shadow .24s;
}
.ac-fer:hover{
  transform:translateY(-3px);border-color:rgba(5,5,5,.16);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 40px -32px rgba(5,5,5,.7);
}

.ac-fer-topo{display:flex;align-items:center;gap:11px;min-width:0}
.ac-fer-logo{
  width:34px;height:34px;flex-shrink:0;border-radius:9px;
  object-fit:contain;background:#fff;
  border:1px solid var(--carta-risco);padding:3px;
}
.ac-fer-logo--letra{
  display:inline-flex;align-items:center;justify-content:center;padding:0;
  background:var(--gradiente);color:#fff;border-color:transparent;
  font-family:var(--mono);font-size:15px;font-weight:500;
}
.ac-fer-nome{
  font-weight:700;font-size:15px;letter-spacing:-.02em;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1 1 auto;
}
.ac-fer-estrela{flex-shrink:0;font-size:13px;color:var(--orange);line-height:1}

.ac-fer-diz{
  font-size:13.5px;line-height:1.5;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.ac-fer-baixo{
  margin-top:auto;padding-top:3px;
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;
}
.ac-fer-preco,.ac-fer-nivel{
  padding:4px 9px;border-radius:8px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;
  text-transform:uppercase;white-space:nowrap;
}
.ac-fer-preco{background:var(--lime);color:var(--ink)}
.ac-fer-nivel{border:1px solid var(--carta-risco);color:var(--tinta-3)}

@media(prefers-reduced-motion:reduce){
  .ac-fer{transition:none}
  .ac-fer:hover{transform:none}
}

/* Quatro numa linha, e nao "as que couberem": com auto-fit o navegador
   escolhia tres e a quarta caia sozinha para baixo, o que ficava torto.
   Assim sao sempre quatro em ecra largo, dois em ecra medio e um no
   telemovel, e os cartoes encolhem em vez de mudar de fila. */
.ac-ultimas-lista{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.ac-ultima{padding:13px 14px 11px;gap:7px}
.ac-ultima-titulo{font-size:14.5px;line-height:1.26}
.ac-ultima-data{padding:3px 8px;font-size:10px}
.ac-ultima-seccao{font-size:9.5px;letter-spacing:.14em}
.ac-ultima-ir{font-size:10.5px}

@media(max-width:1080px){
  .ac-ultimas-lista{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .ac-ultimas-lista{grid-template-columns:1fr}
}

/* ==============================================================
   Links rapidos no painel inicial: o Zoom e as proximas aulas.

   O botao do Zoom e o unico bloco de cor cheia desta zona, porque
   e a coisa que uma aluna vem aqui fazer a quarta-feira as 15h.
   O calendario ao lado fica em vidro, para nao competir.
   ============================================================== */

.ac-rapidos{
  display:grid;gap:12px;
  grid-template-columns:minmax(0,270px) minmax(0,1fr);
  margin-bottom:clamp(20px,2.4vw,28px);
}

.ac-zoom{
  display:flex;align-items:center;gap:13px;
  padding:18px;border-radius:var(--raio-carta);
  background:linear-gradient(118deg,#C4004F 0%,#B42638 55%,#B04200 100%);
  color:var(--cream);text-decoration:none;
  box-shadow:0 1px 2px rgba(5,5,5,.05),0 16px 30px -22px rgba(5,5,5,.6);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s;
}
.ac-zoom:hover{
  transform:translateY(-3px);
  box-shadow:0 1px 2px rgba(5,5,5,.05),0 24px 42px -22px rgba(5,5,5,.7);
}
.ac-zoom[hidden]{display:none}
.ac-zoom-icone{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:40px;height:40px;border-radius:12px;
  background:rgba(246,243,238,.16);
}
.ac-zoom-icone svg{width:21px;height:21px}
.ac-zoom-texto{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.ac-zoom-texto b{font-size:16.5px;letter-spacing:-.025em;line-height:1.2}
.ac-zoom-texto span{
  font-family:var(--mono);font-size:11px;letter-spacing:.02em;
  color:rgba(246,243,238,.78);
}
.ac-zoom-seta{flex-shrink:0;opacity:.8;transition:transform .24s}
.ac-zoom-seta svg{width:17px;height:17px}
.ac-zoom:hover .ac-zoom-seta{transform:translateX(3px)}

.ac-proximas{
  padding:16px 18px;border-radius:var(--raio-carta);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);
}
.ac-proximas-nome{
  display:flex;align-items:center;gap:9px;margin-bottom:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-proximas-nome::before{
  content:"";width:14px;height:2px;border-radius:2px;background:var(--gradiente);flex-shrink:0;
}
.ac-proximas-lista{display:flex;flex-direction:column}
.ac-proximas-vazio{font-size:14px;line-height:1.55;color:var(--tinta-3)}

.ac-proxima{
  display:flex;align-items:center;gap:14px;
  padding:9px 8px;border-radius:var(--raio-ctl);
  text-decoration:none;color:var(--ink);
  transition:background .2s;
}
.ac-proxima + .ac-proxima{box-shadow:inset 0 1px 0 var(--carta-risco)}
.ac-proxima:hover{background:rgba(5,5,5,.035)}
.ac-proxima-quando{
  display:flex;flex-direction:column;align-items:center;gap:1px;flex-shrink:0;
  width:52px;
}
.ac-proxima-quando b{
  font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;
  text-transform:uppercase;
}
.ac-proxima-quando small{font-family:var(--mono);font-size:10px;color:var(--tinta-3)}
/* O nome da aula pode dar duas linhas.
   Os titulos da turma avancada sao duas palavras ("Vibe Coding") e cabiam
   sempre numa linha. Os da turma de iniciantes sao frases ("As melhores
   ferramentas de IA da atualidade.") e com nowrap apareciam cortados a meio,
   e a aluna nao ficava a saber qual era a aula. Deixa-se quebrar, e corta-se
   so a partir da terceira linha. */
.ac-proxima-nome{
  flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.35;
  overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;
}
/* o alinhamento ao centro so fica bem com uma linha; com duas, encosta ao topo */
.ac-proxima{align-items:flex-start}
.ac-proxima-quando,.ac-proxima-guardar{margin-top:1px}
.ac-proxima-n{
  display:inline-block;margin-right:7px;padding:2px 7px;border-radius:7px;
  background:var(--lime);color:var(--ink);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:1px;
}
.ac-proxima-guardar{
  display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-proxima-guardar svg{width:13px;height:13px}
.ac-proxima:hover .ac-proxima-guardar{color:var(--pink-bt)}

@media(max-width:880px){
  /* minmax(0,1fr) e nao 1fr: o 1fr sozinho nao encolhe abaixo do conteudo,
     e no telemovel o bloco saia 34px para fora da margem. */
  .ac-rapidos{grid-template-columns:minmax(0,1fr)}
  /* e os proprios cartoes tambem tem de poder encolher: um item de grelha
     nasce com min-width:auto e nao desce abaixo do conteudo dele. Sem
     isto, o titulo mais comprido de uma aula empurrava o bloco todo para
     fora da margem direita. */
  .ac-zoom,.ac-proximas{min-width:0}
  .ac-proxima-guardar span,.ac-proxima-guardar{font-size:0;gap:0}
  .ac-proxima-guardar svg{width:15px;height:15px}
}
@media(prefers-reduced-motion:reduce){
  .ac-zoom,.ac-zoom-seta{transition:none}
  .ac-zoom:hover{transform:none}
}

/* ==============================================================
   Os guias do mulheresemia.pt, na area dos prompts.
   O numero de cada um fica na cor que ele tem no site dela.
   ============================================================== */

.ac-gui-estado{display:block;min-height:18px;margin-bottom:12px;padding-left:2px}
.ac-gui-estado a{color:var(--pink-bt)}

.ac-gui-grelha{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,330px),1fr));
}

.ac-gui[hidden]{display:none}
.ac-gui{
  display:flex;align-items:flex-start;gap:14px;
  padding:16px;border-radius:var(--raio-carta);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);
  text-decoration:none;color:var(--ink);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s,box-shadow .24s;
}
.ac-gui:hover{
  transform:translateY(-3px);border-color:rgba(5,5,5,.16);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 40px -32px rgba(5,5,5,.7);
}

.ac-gui-n{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:36px;height:36px;border-radius:50%;
  background:var(--ink);color:var(--cream);
  font-family:var(--mono);font-size:14px;font-weight:500;
}

.ac-gui-corpo{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1 1 auto}
.ac-gui-titulo{font-weight:700;font-size:15.5px;letter-spacing:-.02em;line-height:1.25}
.ac-gui-diz{
  font-size:13.5px;line-height:1.5;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

.ac-gui-abrir{
  display:inline-flex;align-items:center;gap:5px;flex-shrink:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-gui-abrir svg{width:12px;height:12px}
.ac-gui:hover .ac-gui-abrir{color:var(--pink-bt)}

@media(prefers-reduced-motion:reduce){
  .ac-gui{transition:none}
  .ac-gui:hover{transform:none}
}

/* ==============================================================
   O nome dela, la em baixo no menu, passou a ser o botao que abre
   a subscricao. Por isso deixou de ser um bloco morto e ganhou os
   modos de um botao, sem virar um item de menu como os de cima.
   ============================================================== */

.ac-eu{padding:14px 6px 4px}

.ac-eu-quem{
  flex:1 1 auto;min-width:0;
  display:flex;align-items:center;gap:11px;
  font:inherit;text-align:left;cursor:pointer;
  border:0;background:none;
  padding:6px;border-radius:14px;
  transition:background .2s;
}
.ac-eu-quem:hover{background:rgba(246,243,238,.07)}
.ac-eu-quem.aberto{background:rgba(246,243,238,.11)}
.ac-eu-quem:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.ac-eu-texto{display:flex;flex-direction:column;gap:1px;min-width:0}
.ac-eu-texto b{
  font-size:14px;color:var(--cream);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ac-eu-texto small{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(246,243,238,.45);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.ac-eu-quem:hover .ac-eu-texto small,
.ac-eu-quem.aberto .ac-eu-texto small{color:var(--lime)}

/* quando a aluna escreveu uma frase em vez de etiquetas, mostra-se como
   frase. uma frase inteira dentro de uma ficha redonda fica ilegivel */
.ac-dir-frase{
  font-size:13.5px;line-height:1.55;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ==============================================================
   A linha da estrela, por baixo do Zoom e do calendario, que
   leva as Aulas. E um convite e nao um cartao: fica discreta,
   com o preto so na estrela, para nao competir com o botao do
   Zoom que esta logo acima.
   ============================================================== */

.ac-vertodas{
  display:flex;align-items:center;gap:12px;width:100%;
  font:inherit;text-align:left;cursor:pointer;
  margin-bottom:clamp(20px,2.4vw,28px);
  padding:13px 18px;border-radius:999px;
  border:1px solid var(--carta-risco);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  color:var(--ink);
  transition:border-color .22s,background .22s,transform .22s cubic-bezier(.2,.8,.3,1);
}
.ac-vertodas:hover{
  border-color:rgba(5,5,5,.22);background:rgba(255,255,255,.92);
  transform:translateY(-2px);
}
.ac-vertodas:focus-visible{outline:3px solid var(--pink);outline-offset:3px}

.ac-vertodas-estrela{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--cream);
}
.ac-vertodas-estrela svg{width:15px;height:15px}

.ac-vertodas span:not(.ac-vertodas-estrela){
  flex:1 1 auto;min-width:0;
  font-size:14.5px;letter-spacing:-.01em;
}
.ac-vertodas-seta{width:16px;height:16px;flex-shrink:0;color:var(--tinta-3);transition:transform .22s}
.ac-vertodas:hover .ac-vertodas-seta{transform:translateX(3px);color:var(--ink)}

@media(prefers-reduced-motion:reduce){
  .ac-vertodas,.ac-vertodas-seta{transition:none}
  .ac-vertodas:hover{transform:none}
}

/* ==============================================================
   O botao do BrandIA, assente.

   Estava no degrade cheio com um halo cor-de-rosa a volta, e num
   menu preto isso latejava. Passou aos mesmos tons fundos dos
   cartoes das aulas, e a sombra deixou de ser cor-de-rosa para
   ser so sombra. Continua a ser o unico bloco de cor do menu, e
   e por isso que se ve na mesma.
   ============================================================== */

.ac-brandia{
  background:linear-gradient(118deg,#C4004F 0%,#B42638 52%,#B04200 100%);
  box-shadow:0 10px 26px -16px rgba(5,5,5,.9),inset 0 1px 0 rgba(255,255,255,.14);
}
.ac-brandia:hover{
  box-shadow:0 16px 34px -18px rgba(5,5,5,.95),inset 0 1px 0 rgba(255,255,255,.18);
}

/* ---------- o convite para se apresentar, e o formulario ---------- */

.ac-dir-convite{
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;flex-wrap:wrap;
  margin-bottom:16px;padding:16px 20px;
  border:1px dashed rgba(5,5,5,.18);border-radius:var(--raio-carta);
  background:rgba(255,255,255,.42);
}
.ac-dir-convite div{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-dir-convite b{font-size:15.5px;letter-spacing:-.02em}
.ac-dir-convite span{font-size:14px;line-height:1.5;color:var(--tinta-2)}

.ac-dir-forma[hidden]{display:none}
.ac-dir-forma{max-width:760px;margin-bottom:22px}
.ac-dir-forma h3{font-size:1.2rem;letter-spacing:-.03em}
.ac-dir-forma .ac-grelha{margin-bottom:0}
.ac-obrig{color:var(--pink-bt)}
.ac-dir-recado{min-height:18px}

.ac-sub-estado{font-size:15px;line-height:1.6;color:var(--tinta-2)}
.ac-selo--mau{background:rgba(163,50,0,.12);color:#A33200}

/* ---------- os quatro grupos, quatro numa linha ----------
   Ficam mais apertados do que os cartoes normais: o icone
   encolhe, o texto passa para baixo dele, e o "Entrar" vai
   para o fim em vez de ficar ao lado. */

.ac-grelha--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}

.ac-grelha--4 .ac-grupo-cartao{
  flex-direction:column;align-items:flex-start;gap:11px;padding:16px;
}
.ac-grelha--4 .ac-grupo-icone{width:34px;height:34px;border-radius:10px}
.ac-grelha--4 .ac-grupo-icone svg{width:17px;height:17px}
.ac-grelha--4 .ac-grupo-texto b{font-size:15px;line-height:1.2}
.ac-grelha--4 .ac-grupo-texto span{font-size:13px;line-height:1.5}
.ac-grelha--4 .ac-grupo-entrar{margin-top:auto;padding-top:2px;font-size:10px}

@media(max-width:1080px){
  .ac-grelha--4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:560px){
  .ac-grelha--4{grid-template-columns:1fr}
}

/* ==============================================================
   A parede de conquistas das alunas.

   Sao citacoes, nao cartoes de produto: a frase manda, e o nome
   vem por baixo em pequeno. A aspa grande atras e o unico
   ornamento, e fica esbatida para nao roubar a leitura.
   ============================================================== */

.ac-conquistas{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr));
}

.ac-conquista{
  position:relative;overflow:hidden;margin:0;
  display:flex;flex-direction:column;gap:14px;
  padding:20px;border-radius:var(--raio-carta);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);
}
.ac-conquista::before{
  content:"\201C";
  position:absolute;right:14px;top:-14px;
  font-family:var(--titulo,"Bricolage Grotesque",serif);
  font-size:96px;line-height:1;color:rgba(5,5,5,.05);
  pointer-events:none;
}
.ac-conquista blockquote{
  margin:0;position:relative;z-index:1;
  font-size:15.5px;line-height:1.62;color:var(--ink);
}
.ac-conquista figcaption{
  display:flex;align-items:center;gap:11px;margin-top:auto;
}
.ac-conquista figcaption span{display:flex;flex-direction:column;gap:1px;min-width:0}
.ac-conquista figcaption b{font-size:14px;letter-spacing:-.01em}
.ac-conquista figcaption small{
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-conquista-bola{
  display:inline-flex !important;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--gradiente);color:#fff;
  font-family:var(--mono);font-size:14px;font-weight:500;
}

/* os cartoes dos grupos, mais pequenos ainda: o titulo desceu
   para o tamanho do corpo e o cartao perdeu o ar de bloco */
.ac-grelha--4 .ac-grupo-cartao{gap:9px;padding:14px}
.ac-grelha--4 .ac-grupo-icone{width:30px;height:30px;border-radius:9px}
.ac-grelha--4 .ac-grupo-icone svg{width:15px;height:15px}
.ac-grelha--4 .ac-grupo-texto{gap:3px}
.ac-grelha--4 .ac-grupo-texto b{font-size:14px}
.ac-grelha--4 .ac-grupo-texto span{font-size:12.5px;line-height:1.45}
.ac-grelha--4 .ac-grupo-entrar{font-size:9.5px}

/* o aviso de parede vazia ocupa a fila toda, senao fica espremido
   numa coluna a fingir que e uma conquista */
.ac-conquistas .ac-porfazer{grid-column:1/-1}

/* ==============================================================
   O botao de ajuda, no fundo do menu.

   Saiu da lista de areas de cima de proposito: o "como funciona"
   nao e um sitio onde se vai todos os dias, e a ocupar o segundo
   lugar empurrava para baixo o que interessa. Aqui fica a mao de
   quem precisa e fora do caminho de quem nao precisa.
   ============================================================== */

.ac-ajuda{
  display:flex;align-items:center;gap:11px;width:100%;
  margin-top:auto;
  font:inherit;text-align:left;cursor:pointer;
  padding:11px 10px;border-radius:13px;border:0;
  background:none;color:rgba(246,243,238,.62);
  font-size:13.5px;letter-spacing:-.01em;
  transition:background .2s,color .2s;
}
.ac-ajuda:hover{background:rgba(246,243,238,.07);color:var(--cream)}
.ac-ajuda.aberto{background:rgba(246,243,238,.11);color:var(--cream)}
.ac-ajuda:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.ac-ajuda-icone{display:inline-flex;flex-shrink:0}
.ac-ajuda-icone svg{width:17px;height:17px}
.ac-ajuda:hover .ac-ajuda-icone,
.ac-ajuda.aberto .ac-ajuda-icone{color:var(--lime)}

/* o nome dela deixou de ser o ultimo a empurrar para baixo, porque
   agora e o botao de ajuda que leva o margin-top:auto */
.ac-eu{margin-top:0}

/* ==============================================================
   As etiquetas por baixo da procura das aulas.

   Sao um atalho e nao uma arrumacao: o MemberKit nao tem
   categorias, so seccoes, e as seccoes dela sao por altura e nao
   por assunto. Cada etiqueta procura um punhado de palavras.
   ============================================================== */

.ac-etiquetas{
  display:flex;flex-wrap:wrap;gap:8px;
  margin-bottom:clamp(18px,2.2vw,24px);
}
.ac-etiquetas:empty{display:none}

.ac-etiqueta-bt{
  font:inherit;cursor:pointer;
  padding:8px 15px;border-radius:999px;
  border:1px solid var(--carta-risco);background:rgba(255,255,255,.6);
  font-family:var(--mono);font-size:12px;letter-spacing:.02em;color:var(--tinta-2);
  transition:background .2s,color .2s,border-color .2s;
}
.ac-etiqueta-bt:hover{border-color:rgba(5,5,5,.24);background:rgba(255,255,255,.92)}
.ac-etiqueta-bt.escolhida{
  background:var(--ink);border-color:var(--ink);color:var(--cream);
}

/* ---------- a data de cada aula, e o aviso da ordem ---------- */

.ac-aula-quando{
  flex-shrink:0;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);white-space:nowrap;
}

/* Diz porque e que a ordem mudou. Sem isto, quem conhece a lista do
   MemberKit ficava a achar que a central a tinha baralhado. */
.ac-aviso-ordem{
  display:flex;align-items:flex-start;gap:10px;
  margin-bottom:14px;padding:12px 16px;
  border-radius:var(--raio-ctl);
  background:rgba(203,255,0,.14);
  border:1px solid rgba(5,5,5,.07);
  font-size:13.5px;line-height:1.5;color:var(--tinta-2);
}
.ac-aviso-ordem::before{
  content:"";flex-shrink:0;width:6px;height:6px;margin-top:7px;
  border-radius:50%;background:var(--ink);
}


/* ==============================================================
   O MEU CAMINHO
   As aulas escolhidas para ela, por ordem. Nao e uma lista de
   aulas como a da area das Aulas: aqui cada linha tem de dizer
   porque e que aquela aula e para ela, e por isso o texto pesa
   mais do que o titulo.
   ============================================================== */

/* a abertura, que e a parte que fala com ela */
.ac-cam-abertura{
  margin-bottom:18px;padding:22px 26px;
  border-radius:var(--raio-carta);
  background:rgba(203,255,0,.16);
  border:1px solid rgba(5,5,5,.07);
}
.ac-cam-abertura p{margin:0;font-size:16px;line-height:1.6;letter-spacing:-.01em}

.ac-cam-barra{
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  margin-bottom:14px;padding:0 4px;
}
.ac-cam-conta{
  display:flex;align-items:baseline;gap:6px;flex-shrink:0;
  font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums;
}
.ac-cam-dito{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta-3);
}
.ac-cam-barra .ac-mem-trilho{flex:1 1 120px;min-width:100px}

.ac-cam-aulas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}

.ac-cam-aula{
  position:relative;display:flex;align-items:flex-start;gap:14px;
  padding:16px 18px;border-radius:var(--raio-ctl);
  background:var(--carta);border:1px solid var(--carta-risco);
  transition:background .2s,border-color .2s;
}
.ac-cam-aula:hover{border-color:rgba(5,5,5,.16)}

.ac-cam-n{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:9px;
  background:var(--gradiente);color:#fff;
  font-family:var(--mono);font-size:11.5px;font-variant-numeric:tabular-nums;
}

.ac-cam-texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px}
.ac-cam-titulo{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15.5px;font-weight:600;letter-spacing:-.02em;line-height:1.3;
  color:var(--ink);text-decoration:none;
}
.ac-cam-titulo svg{width:13px;height:13px;flex-shrink:0;opacity:.45;transition:opacity .18s}
.ac-cam-titulo:hover{color:var(--pink-bt)}
.ac-cam-titulo:hover svg{opacity:1}
.ac-cam-porque{margin:0;font-size:14px;line-height:1.5;color:var(--tinta-2)}

/* o visto de "ja vi esta" */
.ac-cam-visto{
  flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  background:none;border:1.5px solid rgba(5,5,5,.18);color:transparent;
  transition:background .18s,border-color .18s,color .18s;
}
.ac-cam-visto svg{width:14px;height:14px}
.ac-cam-visto:hover{border-color:rgba(5,5,5,.42);color:rgba(5,5,5,.3)}
.ac-cam-visto:focus-visible{outline:2px solid var(--pink);outline-offset:2px}

/* Uma aula vista nao se esconde nem se risca: ela pode querer voltar la.
   Perde e cor, que ja chega para a vista saltar por cima dela. */
.ac-cam-aula.vista{background:rgba(255,255,255,.34);border-color:rgba(5,5,5,.05)}
.ac-cam-aula.vista .ac-cam-n{background:none;color:var(--tinta-3);box-shadow:inset 0 0 0 1.5px var(--carta-risco)}
.ac-cam-aula.vista .ac-cam-titulo{color:var(--tinta-2)}
.ac-cam-aula.vista .ac-cam-porque{color:var(--tinta-3)}
.ac-cam-aula.vista .ac-cam-visto{
  background:var(--lime);border-color:var(--lime);color:var(--ink);
}

.ac-cam-convite{text-align:left}
.ac-cam-convite h2{margin:10px 0 6px;font-size:1.5rem;letter-spacing:-.03em}
.ac-cam-convite p{max-width:52em;margin-bottom:18px}

.ac-cam-depois{margin-top:16px}
.ac-cam-depois p{margin:8px 0 0}

@media(max-width:640px){
  .ac-cam-aula{padding:14px;gap:11px}
  .ac-cam-abertura{padding:18px 20px}
  .ac-cam-abertura p{font-size:15px}
}


/* ==============================================================
   AS VERSOES ANTERIORES DE CADA PECA
   So aparecem quando ha alguma. Uma peca escrita de uma vez so
   nunca mostra este botao, e esta certo: nao ha nada para ver.
   ============================================================== */

.ac-versoes-bt[hidden]{display:none}
.ac-versoes[hidden]{display:none}

.ac-versoes{
  margin-top:16px;padding:18px 20px;
  border-radius:var(--raio-ctl);
  background:rgba(5,5,5,.035);
  border:1px solid var(--carta-risco);
}
.ac-versoes-vazio{margin:0;font-size:14px;line-height:1.5;color:var(--tinta-2)}

.ac-versoes-lista{
  list-style:none;margin:10px 0 0;padding:0;
  display:flex;flex-direction:column;gap:2px;
}
.ac-versao{
  display:flex;align-items:center;gap:14px;
  padding:11px 0;
}
.ac-versao + .ac-versao{box-shadow:inset 0 1px 0 var(--carta-risco)}
.ac-versao-texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ac-versao-quando{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-versao-espreita{
  font-size:14px;line-height:1.45;color:var(--tinta-2);
  overflow:hidden;text-overflow:ellipsis;
}
.ac-versao .ia-bt{flex-shrink:0}

@media(max-width:640px){
  .ac-versao{flex-wrap:wrap;gap:8px}
  .ac-versao .ia-bt{margin-left:auto}
}


/* ==============================================================
   O MEU MAPA DE CONTEUDO
   Pilares, e dentro de cada um as ideias. O que pesa aqui e o
   titulo da ideia: e isso que ela le e decide se grava ou nao.
   ============================================================== */

.ac-pilar{margin-bottom:26px}
.ac-pilar-topo{margin-bottom:12px;padding-left:2px}
.ac-pilar-topo h2{
  display:flex;align-items:center;gap:11px;
  margin:0;font-size:1.32rem;letter-spacing:-.035em;line-height:1.2;
}
/* o numero da categoria no metodo dela. Sao sempre as mesmas sete, pela
   mesma ordem, e o numero e o que faz isso saltar a vista */
.ac-pilar-n{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:25px;height:25px;border-radius:8px;
  background:rgba(5,5,5,.06);color:var(--tinta-2);
  font-family:var(--mono);font-size:11.5px;font-weight:500;
  font-variant-numeric:tabular-nums;letter-spacing:0;
}
.ac-pilar-vazio{
  margin:0;padding:14px 17px;
  border:1px dashed rgba(5,5,5,.16);border-radius:var(--raio-ctl);
  font-size:14px;line-height:1.5;color:var(--tinta-3);
}
.ac-pilar-topo p{
  margin:5px 0 0;max-width:56em;
  font-size:14.5px;line-height:1.5;color:var(--tinta-2);
}

.ac-ideias{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}

.ac-ideia{
  display:flex;align-items:flex-start;gap:14px;
  padding:15px 17px;border-radius:var(--raio-ctl);
  background:var(--carta);border:1px solid var(--carta-risco);
  transition:background .2s,border-color .2s;
}
.ac-ideia:hover{border-color:rgba(5,5,5,.16)}

.ac-ideia-texto{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px}
.ac-ideia-titulo{
  margin:0;font-size:15.5px;font-weight:600;
  letter-spacing:-.02em;line-height:1.32;
}
.ac-ideia-angulo{margin:0;font-size:14px;line-height:1.5;color:var(--tinta-2)}

.ac-ideia-bts{display:flex;align-items:center;gap:6px;flex-shrink:0}

.ac-ideia-copiar,.ac-ideia-usada{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;cursor:pointer;
  background:none;border:1.5px solid rgba(5,5,5,.18);
  transition:background .18s,border-color .18s,color .18s;
}
.ac-ideia-copiar{border-color:transparent;color:var(--tinta-3)}
.ac-ideia-copiar svg{width:15px;height:15px}
.ac-ideia-copiar:hover{background:rgba(5,5,5,.06);color:var(--ink)}

.ac-ideia-usada{color:transparent}
.ac-ideia-usada svg{width:14px;height:14px}
.ac-ideia-usada:hover{border-color:rgba(5,5,5,.42);color:rgba(5,5,5,.3)}
.ac-ideia-copiar:focus-visible,.ac-ideia-usada:focus-visible{
  outline:2px solid var(--pink);outline-offset:2px;
}

/* Uma ideia usada nao desaparece: ela pode querer voltar ao mesmo angulo
   noutro formato. Perde e cor, para a vista saltar por cima dela. */
.ac-ideia.usada{background:rgba(255,255,255,.34);border-color:rgba(5,5,5,.05)}
.ac-ideia.usada .ac-ideia-titulo{color:var(--tinta-2);font-weight:500}
.ac-ideia.usada .ac-ideia-angulo{color:var(--tinta-3)}
.ac-ideia.usada .ac-ideia-usada{background:var(--lime);border-color:var(--lime);color:var(--ink)}

.ac-map-convite{text-align:left}
.ac-map-convite h2{margin:10px 0 6px;font-size:1.5rem;letter-spacing:-.03em}
.ac-map-convite p{max-width:52em;margin-bottom:18px}

@media(max-width:640px){
  .ac-ideia{padding:13px 14px;gap:10px}
  .ac-pilar-topo h2{font-size:1.18rem}
}


/* ==============================================================
   A AULA QUE ENSINA CADA PECA DO BRANDIA
   Uma faixa por cima dos campos. Escrever o proprio porque a
   frio e dificil, e ha aula sobre isso: nao fazia sentido ela
   estar ali sem saber que a aula existe.
   ============================================================== */

.ac-aula-peca[hidden]{display:none}
.ac-aula-peca{max-width:760px;margin-bottom:18px}

.ac-aula-peca-link{
  display:flex;align-items:center;gap:15px;
  padding:15px 18px;border-radius:var(--raio-ctl);
  background:rgba(203,255,0,.16);
  border:1px solid rgba(5,5,5,.07);
  text-decoration:none;color:var(--ink);
  transition:background .2s,border-color .2s;
}
.ac-aula-peca-link:hover{background:rgba(203,255,0,.26);border-color:rgba(5,5,5,.14)}

.ac-aula-peca-icone{width:22px;height:22px;flex-shrink:0;opacity:.62}

.ac-aula-peca-texto{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.ac-aula-peca-dito{
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-aula-peca-titulo{font-size:15px;font-weight:600;letter-spacing:-.02em;line-height:1.3}
.ac-aula-peca-resumo{font-size:13.5px;line-height:1.45;color:var(--tinta-2)}

.ac-aula-peca-seta{flex-shrink:0;display:inline-flex;color:var(--tinta-3);transition:color .2s}
.ac-aula-peca-seta svg{width:15px;height:15px}
.ac-aula-peca-link:hover .ac-aula-peca-seta{color:var(--ink)}
.ac-aula-peca-link:focus-visible{outline:3px solid var(--ink);outline-offset:3px}

@media(max-width:640px){
  /* no telemovel o texto passa a quatro linhas e o icone, centrado, ficava
     a flutuar a meio. Encosta-se ao topo, ao lado da etiqueta. */
  .ac-aula-peca-link{padding:13px 14px;gap:12px;align-items:flex-start}
  .ac-aula-peca-icone{width:19px;height:19px;margin-top:1px}
  .ac-aula-peca-seta{margin-top:2px}
}

/* ---------------------------------------------- os estados do percurso

   O bloco do inicio deixou de ser quatro atalhos e passou a ser o percurso
   dela: diagnostico, as aulas que saem dai, escrever a marca, e as coisas
   feitas para ela. Como e um percurso, tem de se ver onde ela vai: o passo
   feito leva um visto, e o que ainda espera pelo anterior fica mais apagado.

   Apagado, e nao trancado. Uma aluna pode querer espreitar o fim antes de
   comecar, e trancar-lhe a porta so a irrita. */

.ac-atalho-visto{width:14px;height:14px;display:none;color:var(--lime)}
.ac-atalho--feito .ac-atalho-visto{display:block}
.ac-atalho--feito .ac-atalho-n > svg:last-of-type{display:none}
.ac-atalho--feito{border-color:rgba(203,255,0,.38);background:rgba(203,255,0,.07)}
.ac-atalho--feito .ac-atalho-n{color:rgba(203,255,0,.8)}

.ac-atalho--espera{opacity:.58}
.ac-atalho--espera:hover{opacity:1}

.ac-atalho-estado{
  margin-top:2px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(246,243,238,.5);
}
.ac-atalho-estado:empty{display:none}
.ac-atalho--feito .ac-atalho-estado{color:rgba(203,255,0,.82)}

/* ---------- Sobre ti: o retrato dela ----------

   Refeito a 2/out/2026. A primeira versao era uma coluna de cartoes todos do
   mesmo tamanho, e a Mariana disse o que era: "muito basiquinha, um bloco de
   texto chapado". A pagina mais pessoal da central era a mais lisa de todas.

   O desenho agora tem tres pesos em vez de um:
   a CAPA escura abre, a citacao grande e o unico destaque de leitura, e as
   oportunidades levam numeros em DM Mono e cartao com levantamento.

   Nenhuma cor nova: cream, ink, o gradiente pink-orange da casa, e o lime uma
   unica vez, nas forcas. Continua a valer a regra de duas cores por composicao.

   Largura travada nos 820px: linhas mais longas perdem-se a voltar ao inicio,
   e aqui o texto e todo sobre ela. */

.ac-ret{display:flex;flex-direction:column;gap:20px;max-width:820px}

/* ---------- a capa ---------- */

.ac-ret-capa{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:20px 22px;
  padding:clamp(22px,2.8vw,30px);
  border-radius:var(--raio);
  background:var(--escuro);color:var(--cream);
  box-shadow:0 1px 2px rgba(5,5,5,.06),0 30px 60px -44px rgba(5,5,5,.9);
}

/* o gradiente da casa, esborratado num canto. E o que tira o preto chapado
   sem acrescentar uma cor nova. */
.ac-ret-aura{
  position:absolute;z-index:-1;pointer-events:none;
  width:420px;height:420px;right:-170px;top:-220px;
  background:var(--gradiente);
  filter:blur(80px);opacity:.42;border-radius:50%;
}

/* a cara dela num anel com o gradiente. O anel e um pseudo-elemento por baixo,
   e nao uma borda, para o degrade poder dar a volta toda. */
.ac-ret-anel{
  position:relative;flex:0 0 auto;
  display:grid;place-items:center;
  width:92px;height:92px;border-radius:50%;
  background:var(--gradiente);
  box-shadow:0 10px 30px -12px rgba(255,0,105,.75);
}
.ac-ret-cara{
  width:84px;height:84px;border-radius:50%;
  object-fit:cover;display:block;
  border:2px solid var(--escuro);
}
.ac-ret-cara--letra{
  display:grid;place-items:center;
  background:var(--escuro);color:#fff;
  font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;
  border:none;
}

.ac-ret-quem{display:flex;flex-direction:column;gap:3px;min-width:0}
.ac-ret-quem b{
  font-family:var(--display);font-weight:700;
  font-size:clamp(1.5rem,3.2vw,2.15rem);letter-spacing:-.045em;line-height:1.04;
}
.ac-ret-quem small{font-size:14px;color:rgba(246,243,238,.62)}

.ac-ret-pistas{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:9px}
.ac-ret-pista{
  display:inline-flex;align-items:center;gap:5px;
  font-size:12.5px;color:rgba(246,243,238,.58);
}
.ac-ret-pista svg{width:14px;height:14px;flex:0 0 auto;opacity:.7}
.ac-ret-pista--liga{text-decoration:none;transition:color .2s}
.ac-ret-pista--liga:hover{color:var(--lime)}
.ac-ret-pista--liga:hover svg{opacity:1}

/* o cartao a direita: desde quando e com que plano, etiquetado */
.ac-ret-cartao{
  display:flex;flex-direction:column;gap:12px;
  padding-left:22px;border-left:1px solid rgba(246,243,238,.14);
  text-align:right;
}
.ac-ret-campo{display:flex;flex-direction:column;gap:2px}
.ac-ret-campo small{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(246,243,238,.36);
}
.ac-ret-campo b{
  font-family:var(--display);font-weight:600;
  font-size:14.5px;letter-spacing:-.02em;color:var(--cream);white-space:nowrap;
}
.ac-ret-campo:first-child b{color:var(--lime)}


/* ---------- a citacao ---------- */

.ac-ret-resumo{
  position:relative;margin:4px 0;padding:0 0 0 clamp(26px,4vw,44px);
  font-family:var(--display);font-weight:400;
  font-size:clamp(1.22rem,2.5vw,1.62rem);line-height:1.38;letter-spacing:-.025em;
  color:var(--ink);
}
.ac-ret-aspas{
  position:absolute;left:0;top:-.1em;
  font-family:var(--display);font-weight:800;
  font-size:clamp(3rem,7vw,4.6rem);line-height:1;
  color:var(--lime);
  -webkit-text-stroke:0;
}

/* ---------- o par: negocio largo, forcas estreito ---------- */

.ac-ret-par{display:grid;gap:18px;grid-template-columns:1.45fr 1fr;align-items:start}
.ac-ret-par--so-um{grid-template-columns:1fr}

.ac-ret-bloco{
  position:relative;overflow:hidden;
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);border-radius:var(--raio-carta);
  padding:clamp(22px,2.4vw,28px);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 22px 44px -38px rgba(5,5,5,.6);
}

/* o bloco das forcas e o unico sitio da pagina com lime */
.ac-ret-bloco--forcas{background:linear-gradient(170deg,rgba(203,255,0,.14),rgba(255,255,255,.74) 58%)}

.ac-ret-rotulo{
  display:block;
  font-family:var(--mono);font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:12px;
}
.ac-ret-rotulo--grande{font-size:12px;color:var(--pink-bt);margin-bottom:6px}

.ac-ret-frase{
  font-family:var(--display);font-weight:600;
  font-size:clamp(1.02rem,1.9vw,1.18rem);line-height:1.38;letter-spacing:-.025em;
  margin:0 0 4px;color:var(--ink);
}
.ac-ret-nota{font-size:13.5px;line-height:1.5;color:var(--tinta-3);margin:0 0 14px}

.ac-ret-linhas{
  display:grid;grid-template-columns:auto 1fr;gap:9px 18px;
  margin:18px 0 0;font-size:14.5px;
}
.ac-ret-linhas dt{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);padding-top:3px;white-space:nowrap;
}
.ac-ret-linhas dd{margin:0;color:var(--ink);line-height:1.45}

.ac-ret-sub{
  display:block;margin:20px 0 10px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinta-3);
}

.ac-ret-fichas{display:flex;flex-wrap:wrap;gap:7px}
.ac-ret-ficha{
  display:inline-flex;align-items:center;
  padding:6px 13px;border-radius:999px;
  border:1px solid var(--risco);background:rgba(255,255,255,.6);
  font-size:13px;line-height:1.3;color:var(--ink);
}
.ac-ret-ficha--lime{background:var(--lime);border-color:transparent;font-weight:500}

/* ---------- as oportunidades, que e o bloco que mais importa ---------- */

.ac-ret-opos-bloco{margin-top:4px}
.ac-ret-opos{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:12px}

.ac-ret-opo{
  display:flex;align-items:flex-start;gap:16px;
  padding:18px 22px;border-radius:var(--raio-carta);
  background:var(--carta);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border:1px solid var(--carta-risco);
  transition:transform .24s cubic-bezier(.2,.8,.3,1),border-color .24s,box-shadow .24s;
}
.ac-ret-opo:hover{
  transform:translateY(-3px);border-color:rgba(255,0,105,.28);
  box-shadow:0 1px 2px rgba(5,5,5,.03),0 24px 44px -34px rgba(255,0,105,.55);
}
.ac-ret-opo p{margin:0;font-size:15px;line-height:1.55;color:var(--tinta-2);padding-top:3px}

.ac-ret-opo-n{
  flex:0 0 auto;
  font-family:var(--mono);font-weight:500;
  font-size:1.5rem;line-height:1;letter-spacing:-.02em;
  background:var(--gradiente);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* ---------- a faixa do caminho, que fecha a pagina ---------- */

.ac-ret-caminho{
  position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  flex-wrap:wrap;
  padding:clamp(24px,3vw,32px);
  border-radius:var(--raio);
  background:var(--escuro);color:var(--cream);
  margin-top:4px;
}
.ac-ret-caminho .ac-ret-aura{
  width:360px;height:360px;left:-150px;bottom:-200px;right:auto;top:auto;opacity:.34;
}
.ac-ret-caminho h3{
  font-family:var(--display);font-weight:700;
  font-size:1.26rem;letter-spacing:-.03em;margin:0 0 7px;color:var(--cream);
}
.ac-ret-caminho p{
  margin:0;font-size:14.5px;line-height:1.55;
  color:rgba(246,243,238,.68);max-width:46ch;
}
.ac-ret-caminho .ia-bt{flex:0 0 auto}

/* ---------- o rodape ---------- */

.ac-ret-rodape{
  font-size:13px;line-height:1.6;color:var(--tinta-3);
  margin:6px 0 0;
}
.ac-ret-rodape a{color:var(--tinta-2)}
.ac-ret-rodape a:hover{color:var(--pink)}
.ac-ret-rodape span{display:block;margin-top:3px;opacity:.75;font-family:var(--mono);font-size:11px}

/* ---------- a entrada ----------
   Os blocos sobem um a um, com um atraso pequeno entre eles. Quem pediu menos
   movimento no sistema nao ve nada disto. */
@media (prefers-reduced-motion:no-preference){
  .ac-ret > *{animation:ac-ret-sobe .5s cubic-bezier(.2,.8,.3,1) both}
  .ac-ret > *:nth-child(2){animation-delay:.06s}
  .ac-ret > *:nth-child(3){animation-delay:.12s}
  .ac-ret > *:nth-child(4){animation-delay:.18s}
  .ac-ret > *:nth-child(5){animation-delay:.24s}
  .ac-ret > *:nth-child(6){animation-delay:.3s}
}
@keyframes ac-ret-sobe{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (max-width:820px){
  .ac-ret-par{grid-template-columns:1fr}
}
@media (max-width:560px){
  .ac-ret-capa{grid-template-columns:auto 1fr;gap:14px 16px}
  .ac-ret-anel{width:62px;height:62px}
  .ac-ret-cara{width:56px;height:56px}
  .ac-ret-cara--letra{font-size:1.5rem}
  /* o cartao passa para baixo, a toda a largura e alinhado a esquerda */
  .ac-ret-cartao{
    grid-column:1/-1;flex-direction:row;gap:26px;
    padding:14px 0 0;border-left:0;border-top:1px solid rgba(246,243,238,.14);
    text-align:left;
  }
  .ac-ret-linhas{grid-template-columns:1fr;gap:2px 0}
  .ac-ret-linhas dd{margin-bottom:12px}
  .ac-ret-opo{padding:16px 18px;gap:13px}
  .ac-ret-caminho{flex-direction:column;align-items:flex-start}
}

/* ===================================================== reposto do Git, 14:10

   O que vem a seguir foi escrito hoje para a pagina inicial e para o botao de
   entrar na aula, e desapareceu quando a outra sessao reescreveu a parte do
   retrato deste mesmo ficheiro. Estava no Git e voltou de la.

   Volta sem o prefixo [data-turma-activa="avancada"] que tinha antes: esse
   atributo deixou de existir quando a escolha de turma saiu, e o desenho
   premium passa a valer para todas. */
/* o botao de entrar na aula fica preto, e quem faz o trabalho todo e o
   amarelo acido em quatro tons: #FBFFE0 quase branco, #E7FF7A claro,
   #CBFF00 que e o lime da paleta, e #9BC400 no fundo.

   Sao os mesmos quatro tons que a bola e o orbe lime ja usam no site, por isso
   isto nao e cor nova nenhuma: e a mesma cor vista com profundidade. E a razao
   de nao haver aqui dourado nem framboesa continua a mesma: essas sao do site
   pessoal dela, e os dois sistemas nunca se misturam. */
.ac-zoom{
  background:
    /* a luz a entrar pelo canto de cima, como se batesse de lado */
    radial-gradient(135% 115% at 0% 0%,rgba(203,255,0,.22),transparent 58%),
    radial-gradient(120% 120% at 50% -20%,rgba(246,243,238,.07),transparent 62%),
    #050505;
  box-shadow:
    0 22px 50px -32px rgba(5,5,5,.9),
    inset 0 0 0 1px rgba(203,255,0,.16);
  position:relative;overflow:hidden;
}
/* ao passar por cima, a luz sobe e o contorno acende. Nada muda de cor, so de
   intensidade, e e isso que faz parecer caro em vez de garrido. */
.ac-zoom:hover{
  background:
    radial-gradient(135% 115% at 0% 0%,rgba(203,255,0,.3),transparent 60%),
    radial-gradient(120% 120% at 50% -20%,rgba(246,243,238,.09),transparent 62%),
    #050505;
  box-shadow:
    0 26px 56px -30px rgba(5,5,5,.95),
    inset 0 0 0 1px rgba(203,255,0,.3);
}
/* o fio no topo, do tom mais claro para o mais fundo */
.ac-zoom::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,#FBFFE0 14%,var(--lime) 38%,#9BC400 62%,transparent 88%);
  opacity:.9;
}
/* o quadrado do icone deixa de ser cinzento e passa a ser vidro amarelo */
.ac-zoom-icone{
  background:linear-gradient(150deg,rgba(203,255,0,.22),rgba(155,196,0,.08));
  box-shadow:inset 0 0 0 1px rgba(203,255,0,.26);
  color:#E7FF7A;
}
.ac-zoom-texto b{font-weight:500;letter-spacing:-.02em}
/* a hora da proxima aula, no tom claro em vez do creme apagado */
.ac-zoom-texto span{color:rgba(231,255,122,.84)}
/* e a seta, que e onde o olho acaba */
.ac-zoom-seta{color:var(--lime);opacity:1}

/* e o calendario ao lado acompanha, mais limpo e com mais ar */
.ac-proximas{
  padding:20px 20px 18px;
  background:rgba(255,255,255,.52);
  border-color:rgba(5,5,5,.12);
}
.ac-proximas-nome{letter-spacing:.3em}

/* ===================================================== a página inicial, 2026

   Três blocos novos, a 2/out/2026, porque a inicial era um botão solto, o
   percurso e três avisos escritos à mão. Agora abre com as novidades, mostra
   o que a central já sabe sobre a aluna, e fecha com os links que ela
   realmente usa. */

/* ------------------------------------------------------------- as novidades
   Quatro, em dois por dois. Não três numa linha: quatro quadrados dão a
   sensação de parede cheia, e é isso que faz a página parecer viva. */
.ac-novidades{
  display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));
  margin-bottom:clamp(26px,3vw,36px);
}
/* Quadrados, e pequenos. Eram rectângulos a ocupar meia página para dizerem
   quatro frases. O aspect-ratio é que os mantém quadrados seja qual for o
   texto, e o que não couber corta-se em vez de esticar o cartão. */
.ac-novidade{
  position:relative;display:flex;flex-direction:column;gap:6px;
  aspect-ratio:1/1;
  padding:16px 16px 15px;border-radius:18px;
  border:1px solid var(--carta-risco);background:#fff;
  color:inherit;text-decoration:none;overflow:hidden;
  transition:transform .24s cubic-bezier(.2,.8,.3,1),box-shadow .24s,border-color .24s;
}
.ac-novidade--vazia{background:rgba(5,5,5,.02);border-style:dashed}
.ac-novidade--liga:hover{
  transform:translateY(-3px);border-color:rgba(5,5,5,.18);
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 20px 38px -26px rgba(5,5,5,.5);
}
.ac-novidade-topo{
  display:flex;align-items:center;gap:7px;
  font-family:var(--mono);font-size:8.5px;letter-spacing:.16em;text-transform:uppercase;
}
.ac-novidade-tipo{color:var(--pink)}
.ac-novidade-data{color:var(--tinta-3)}
.ac-novidade-data::before{content:"\00b7";margin-right:7px;color:var(--tinta-3)}
/* a bola é o único gesto de cor, e vive no canto para não disputar com o texto */
.ac-novidade .ia-bola{
  position:absolute;top:-20px;right:-20px;width:62px;height:62px;
  opacity:.45;pointer-events:none;
}
/* o título fica em três linhas no máximo, e o texto em quatro: num quadrado
   pequeno, o que passa disto deixa de caber e empurrava o resto para fora */
/* O titulo nunca encolhe.
   Num cartao de altura fixa, o flex aperta o que puder, e o titulo com
   overflow:hidden deixava-se apertar ate desaparecer: nos dois cartoes de texto
   mais comprido ficava so o corpo, sem se perceber do que falavam. Quem cede
   espaco e o texto, que e o que se pode cortar sem perder o assunto. */
.ac-novidade b{
  flex:0 0 auto;
  font-family:var(--display);font-size:.98rem;font-weight:700;
  letter-spacing:-.03em;line-height:1.16;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ac-novidade-texto{
  flex:0 1 auto;min-height:0;
  font-size:12.5px;line-height:1.45;color:var(--tinta-2);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
}
.ac-novidade-seta{
  display:inline-flex;margin-top:auto;padding-top:2px;color:var(--tinta-3);
  transition:transform .24s,color .24s;
}
.ac-novidade-seta svg{width:14px;height:14px}
.ac-novidade--liga:hover .ac-novidade-seta{transform:translate(2px,-2px);color:var(--pink)}

/* -------------------------------------------- o que a central já sabe sobre ti
   Escuro, porque é o único bloco da página que fala directamente com ela e
   tem de se destacar do resto sem gritar. */
.ac-sabe{
  position:relative;overflow:hidden;isolation:isolate;
  display:grid;grid-template-columns:minmax(0,1fr) auto;
  align-items:center;gap:clamp(20px,3vw,44px);
  padding:clamp(26px,3vw,38px);border-radius:var(--raio-carta);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(203,255,0,.12),transparent 58%),
    #050505;
  color:var(--cream);
  margin-bottom:clamp(26px,3vw,36px);
}
.ac-sabe[hidden]{display:none}
.ac-sabe-dentro{position:relative;z-index:1;display:flex;flex-direction:column;gap:14px;max-width:38em}
.ac-sabe h2{
  margin:0;font-family:var(--display);font-size:clamp(1.5rem,2.6vw,2rem);
  font-weight:700;letter-spacing:-.04em;line-height:1.08;
}
.ac-sabe p{margin:0;font-size:16px;line-height:1.6;color:rgba(246,243,238,.76)}
.ac-sabe-pecas{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}

/* Um extracto do que ela escreveu: a etiqueta por cima, o texto por baixo.
   Vive numa coluna estreita de propósito, para três caberem lado a lado sem
   nenhum virar um parágrafo. */
.ac-sabe-bocado{
  display:flex;flex-direction:column;gap:5px;
  flex:1 1 190px;min-width:0;max-width:280px;
  padding:14px 16px;border-radius:16px;
  background:rgba(246,243,238,.07);
  border:1px solid rgba(246,243,238,.1);
}
.ac-sabe-bocado b{
  font-family:var(--mono);font-size:9px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--lime);
}
/* o corte a quatro linhas era de quando isto eram etiquetas de duas palavras:
   agora cada cartao e uma frase, e cortar a meio da frase e pior do que descer
   mais um bocado a caixa */
.ac-sabe-bocado > span{
  font-size:13px;line-height:1.5;color:rgba(246,243,238,.8);
  display:-webkit-box;-webkit-line-clamp:7;-webkit-box-orient:vertical;overflow:hidden;
}
.ac-sabe-peca{
  padding:6px 12px;border-radius:999px;
  border:1px solid rgba(246,243,238,.18);
  font-size:12.5px;color:rgba(246,243,238,.55);
}
/* o lime marca o que já está escrito, e conta-se com os olhos */
.ac-sabe-peca.feita{
  border-color:transparent;background:var(--lime);color:var(--ink);font-weight:500;
}
/* A cara dela, do lado direito.
   O anel com o gradiente e o mesmo da capa do retrato de proposito: e a mesma
   pessoa e o mesmo produto, e nao se inventa um segundo desenho para a mesma
   coisa. O halo por tras e o que lhe da o ar de estar acesa, e respira devagar
   para o bloco nao ficar uma fotografia parada. */
.ac-sabe-cara{
  position:relative;justify-self:end;
  display:grid;place-items:center;
  width:clamp(124px,13vw,170px);aspect-ratio:1;border-radius:50%;
  background:var(--gradiente);
}
.ac-sabe-cara[hidden]{display:none}

/* O halo vive num ::after com z-index negativo, preso pelo isolation do bloco,
   para poder transbordar por fora do anel sem fugir para tras do cartao. */
.ac-sabe-cara::after{
  content:"";position:absolute;inset:-24%;z-index:-1;
  border-radius:50%;background:var(--gradiente);
  filter:blur(30px);opacity:.5;
  animation:ac-sabe-respira 7s ease-in-out infinite;
}
@keyframes ac-sabe-respira{
  0%,100%{transform:scale(1);opacity:.45}
  50%{transform:scale(1.09);opacity:.62}
}

.ac-sabe-cara img,
.ac-sabe-inicial{
  width:calc(100% - 11px);height:calc(100% - 11px);
  border-radius:50%;object-fit:cover;display:block;
  border:3px solid #050505;
}
.ac-sabe-inicial{
  display:grid;place-items:center;
  background:#050505;color:var(--cream);
  font-family:var(--display);font-weight:800;
  font-size:clamp(2.4rem,4vw,3.2rem);line-height:1;
}

.ac-sabe-orbe{
  position:absolute;right:-110px;bottom:-140px;width:330px;height:330px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FFEAF2 0%,#FFA8C8 28%,#FF0069 66%,#FF5900 100%);
  filter:blur(10px);opacity:.3;pointer-events:none;
}

/* ------------------------------------------------------------ os links úteis */
/* Os quatro atalhos numa linha. Com auto-fill caiam 3 + 1, e a segunda fila
   ficava com dois buracos ao lado do que sobrava. */
.ac-uteis{
  display:grid;gap:10px;grid-template-columns:repeat(4,minmax(0,1fr));
}
.ac-util{
  display:flex;flex-direction:column;gap:5px;width:100%;
  padding:18px 20px 19px;border-radius:var(--raio-carta);
  border:1px solid var(--carta-risco);background:#fff;color:inherit;
  font-family:var(--corpo);text-align:left;text-decoration:none;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.8,.3,1),border-color .22s,box-shadow .22s;
}
.ac-util[hidden]{display:none}
.ac-util:hover{
  transform:translateY(-2px);border-color:rgba(5,5,5,.18);
  box-shadow:0 1px 2px rgba(5,5,5,.04),0 16px 30px -24px rgba(5,5,5,.5);
}
.ac-util-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:36px;height:36px;margin-bottom:7px;border-radius:11px;
  background:rgba(5,5,5,.05);color:var(--ink);
}
.ac-util-icone svg{width:18px;height:18px}
.ac-util b{font-family:var(--display);font-size:1.02rem;font-weight:600;letter-spacing:-.03em}
.ac-util span:last-child{font-size:13.5px;line-height:1.5;color:var(--tinta-3)}
/* o de entrar na aula é o único que leva cor: é o que ela procura à pressa */
.ac-util--zoom .ac-util-icone{background:var(--pink);color:#fff}
.ac-util--zoom:hover{border-color:rgba(255,0,105,.4)}

/* quatro em linha deixam de caber muito antes do telemóvel */
@media(max-width:980px){
  .ac-novidades,.ac-uteis{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:720px){
  .ac-novidade{aspect-ratio:auto;min-height:150px}
  .ac-sabe-orbe{display:none}
  /* a duas colunas a cara espremia o texto a meia largura */
  .ac-sabe{grid-template-columns:minmax(0,1fr)}
  .ac-sabe-cara{grid-row:1;justify-self:start;width:96px;margin-bottom:2px}
}
@media(prefers-reduced-motion:reduce){
  .ac-novidade,.ac-util,.ac-novidade-seta{transition:none}
  .ac-novidade--liga:hover,.ac-util:hover{transform:none}
  .ac-sabe-cara::after{animation:none}
}

/* ------------------------------------------- os dois separadores das turmas

   Carrega-se para ver uma ou outra, e vê-se uma de cada vez. Mostrar as duas
   ao mesmo tempo foi tentado e saiu: oito aulas misturadas, metade das quais
   não lhe dizem respeito, é uma lista que ninguém lê.

   Não se chamam "a tua turma" de propósito. Isto é uma vista e não uma
   declaração de quem ela é, e qualquer aluna carrega nos dois. */
.ac-vistas{
  display:flex;gap:8px;flex-wrap:wrap;
  margin:0 0 14px;
}
.ac-vistas[hidden]{display:none}
.ac-vista{
  display:flex;flex-direction:column;gap:2px;
  padding:10px 16px 11px;border-radius:14px;
  border:1.5px solid var(--carta-risco);background:transparent;
  color:var(--tinta-3);font-family:var(--corpo);text-align:left;cursor:pointer;
  transition:border-color .2s,background .2s,color .2s;
}
.ac-vista b{
  font-family:var(--display);font-size:14.5px;font-weight:600;letter-spacing:-.02em;
}
.ac-vista span{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
}
.ac-vista:hover{border-color:rgba(5,5,5,.22);color:var(--ink)}
/* a que está a ser vista fica em tinta cheia: é o único sinal de que é essa,
   e chega. Duas cores diferentes diriam que uma delas é a dela. */
.ac-vista.escolhida{
  border-color:var(--ink);background:var(--ink);color:rgba(246,243,238,.68);
}
.ac-vista.escolhida b{color:var(--cream)}

@media(prefers-reduced-motion:reduce){
  .ac-vista{transition:none}
}

/* ----------------------------- o botão da BrandIA quando está aberto

   Fechado, ele convida: o degradé de rosa a derreter em laranja é o que puxa
   o olho para a única coisa da barra que ela ainda não fez. Isso fica.

   Aberto é outra conversa. Continuar a gritar por cima de uma lista de oito
   passos calados faz a barra parecer desarrumada, e foi isso que ela viu.
   Quem já carregou não precisa de ser convidado outra vez.

   Então ao abrir ele cala-se: perde o degradé e a sombra, fica a tinta da
   barra, e passa a ter um fio de lime do lado esquerdo a dizer "é aqui que
   estás". A estrela acompanha. Mesma lógica do botão de entrar na aula. */
.ac-brandia[aria-expanded="true"]{
  background:rgba(246,243,238,.06);
  box-shadow:inset 0 0 0 1px rgba(246,243,238,.1);
  color:var(--cream);
}
.ac-brandia[aria-expanded="true"]:hover{
  background:rgba(246,243,238,.1);
  box-shadow:inset 0 0 0 1px rgba(246,243,238,.16);
  transform:none;
}
/* o fio de lime encostado à esquerda, que é o que marca onde ela está */
.ac-brandia[aria-expanded="true"]::before{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--lime);
}
/* a estrela fica lime, e é o único gesto de cor do botão aberto */
.ac-brandia[aria-expanded="true"] > svg:first-of-type{color:var(--lime)}
.ac-brandia[aria-expanded="true"] .ac-seta{color:rgba(246,243,238,.5)}

/* ------------------------------------------- a fila das ferramentas, nas aulas

   Quadrados com a logo de cada uma, por baixo das bolhas das categorias. São
   coisas diferentes e por isso têm formas diferentes: as categorias são
   assuntos e são redondas, as ferramentas são objectos e são quadradas. */
.ac-ferramentas{
  display:flex;flex-wrap:wrap;gap:8px;
  margin:0 0 18px;
}
.ac-ferramentas[hidden]{display:none}
.ac-fer-bt{
  position:relative;
  display:flex;align-items:center;gap:9px;
  padding:8px 14px 8px 9px;border-radius:14px;
  border:1.5px solid var(--carta-risco);background:#fff;
  color:var(--tinta-2);font-family:var(--corpo);font-size:13.5px;cursor:pointer;
  transition:border-color .2s,color .2s,transform .2s cubic-bezier(.2,.8,.3,1);
}
.ac-fer-bt img{
  width:26px;height:26px;border-radius:7px;object-fit:contain;
  background:rgba(5,5,5,.04);
}
.ac-fer-nome{font-weight:500;letter-spacing:-.01em}
/* quantas aulas tem cada uma, em miúdo: evita o clique que desilude */
.ac-fer-conta{
  font-family:var(--mono);font-size:10px;color:var(--tinta-3);
  padding-left:2px;
}
.ac-fer-bt:hover{border-color:rgba(5,5,5,.24);color:var(--ink);transform:translateY(-1px)}
.ac-fer-bt.escolhida{
  border-color:var(--ink);background:var(--ink);color:var(--cream);
}
.ac-fer-bt.escolhida .ac-fer-conta{color:rgba(246,243,238,.5)}
.ac-fer-bt:focus-visible{outline:2px solid var(--lime);outline-offset:3px}

@media(prefers-reduced-motion:reduce){
  .ac-fer-bt{transition:none}
  .ac-fer-bt:hover{transform:none}
}

/* a nota das aulas que sairam do diagnostico */
.ac-diag-nota{font-size:14px;color:var(--tinta-3);margin-top:6px}

/* ---------- o que se ve nas publicacoes ----------
   Tres coisas tiradas das publicacoes dela, e nenhuma e um numero. A legenda
   que mais tocou vai em citacao, com um filete do gradiente ao lado, para se
   perceber que sao palavras dela e nao minhas. */

.ac-ret-bloco--publicacoes{display:flex;flex-direction:column}

.ac-ret-tocou{margin-top:16px}
.ac-ret-tocou p{
  margin:0;padding:14px 0 14px 18px;
  border-left:3px solid transparent;
  border-image:var(--gradiente) 1;
  font-size:15px;line-height:1.6;color:var(--ink);font-style:italic;
}
.ac-ret-ir{
  display:inline-flex;align-items:center;gap:5px;margin-top:4px;
  font-family:var(--mono);font-size:11px;letter-spacing:.05em;text-transform:uppercase;
  color:var(--tinta-3);text-decoration:none;transition:color .2s;
}
.ac-ret-ir svg{width:12px;height:12px}
.ac-ret-ir:hover{color:var(--pink-bt)}

.ac-ret-temas{margin-top:22px;padding-top:20px;border-top:1px solid var(--risco)}
.ac-ret-temas .ac-ret-sub{margin-top:0}

/* ---------- as colegas ----------
   Faixa fina em lima, sem cartao. Nao e informacao sobre o negocio dela: e um
   aceno. Por isso nao pesa como os outros blocos. */
.ac-ret-colegas{
  display:flex;align-items:center;gap:13px;
  padding:16px 22px;border-radius:var(--raio-carta);
  background:rgba(203,255,0,.2);border:1px solid rgba(203,255,0,.45);
}
.ac-ret-colegas svg{width:20px;height:20px;flex:0 0 auto;color:var(--ink);opacity:.5}
.ac-ret-colegas p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ac-ret-colegas b{font-weight:600}

/* ---------- como tu falas ----------
   O bloco mais pessoal da pagina, e por isso o unico com o filete do gradiente
   em cima. O tom vai em tamanho de leitura, os habitos em lista com marca
   propria, e o "nunca fazes" fechado numa caixa com fundo, porque e a frase
   que costuma apanhar quem se le. */

.ac-ret-bloco--voz{border-top:3px solid transparent;border-image:var(--gradiente) 1}

.ac-ret-tom{
  font-family:var(--display);font-weight:500;
  font-size:clamp(1.06rem,2vw,1.24rem);line-height:1.42;letter-spacing:-.025em;
  color:var(--ink);margin:14px 0 0;
}

.ac-ret-habitos{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:8px}
.ac-ret-habitos li{
  position:relative;padding-left:22px;
  font-size:14.5px;line-height:1.55;color:var(--tinta-2);
}
.ac-ret-habitos li::before{
  content:"";position:absolute;left:3px;top:.62em;
  width:7px;height:7px;border-radius:2px;transform:rotate(45deg);
  background:var(--pink-bt);
}

.ac-ret-nunca{
  margin:22px 0 0;padding:16px 18px;border-radius:var(--raio-p);
  background:rgba(5,5,5,.045);
  font-size:14.5px;line-height:1.55;color:var(--tinta-2);
}
.ac-ret-nunca b{color:var(--ink);font-weight:600}

/* ------------------------------------- as sugestões de objetivos

   Vivem por baixo das duas caixas e são propostas, não respostas. Por isso são
   mais leves do que tudo o resto da página: traço fino, fundo nenhum, e os dois
   botões só acendem quando o rato lá vai. Se parecessem cartões cheios, davam
   a ideia de que já estavam escolhidas. */
.ac-sugestoes{
  margin-top:18px;padding:18px 20px 16px;
  border:1px dashed rgba(5,5,5,.18);border-radius:var(--raio-carta);
  background:rgba(255,255,255,.4);
}
.ac-sugestoes[hidden]{display:none}
.ac-sugestoes-topo{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:12px;
}
.ac-sugestoes-nome{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-sugestoes-dito{font-size:13px;color:var(--tinta-3)}
.ac-sugestoes-lista{display:flex;flex-direction:column;gap:7px}

.ac-sugestao{
  display:flex;align-items:center;gap:14px;
  padding:11px 14px;border-radius:14px;
  border:1px solid var(--carta-risco);background:#fff;
  cursor:grab;transition:border-color .18s,opacity .18s,transform .18s;
}
.ac-sugestao:hover{border-color:rgba(5,5,5,.2)}
.ac-sugestao.a-arrastar{opacity:.5;cursor:grabbing}
/* a que ja foi para uma caixa apaga-se, mas fica: ela pode querer a mesma nas
   duas, ou mudar de ideias e voltar a ler o que nao escolheu */
.ac-sugestao.usada{opacity:.45;border-style:dashed}
.ac-sugestao-texto{flex:1 1 auto;min-width:0;font-size:14.5px;line-height:1.45}
.ac-sugestao-bts{display:flex;gap:6px;flex-shrink:0}
.ac-sugestao-bts button{
  padding:6px 11px;border-radius:999px;
  border:1px solid var(--carta-risco);background:transparent;
  font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  color:var(--tinta-3);cursor:pointer;
  transition:border-color .18s,background .18s,color .18s;
}
.ac-sugestao-bts button:hover{
  border-color:var(--ink);background:var(--ink);color:var(--cream);
}
.ac-sugestao-bts button:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

/* a caixa que está a receber um objetivo arrastado */
.ac-campo textarea.a-receber{
  border-color:var(--pink);background:rgba(255,0,105,.04);
}

@media(max-width:620px){
  .ac-sugestao{flex-direction:column;align-items:stretch;gap:9px}
  .ac-sugestao-bts button{flex:1 1 auto}
}
@media(prefers-reduced-motion:reduce){
  .ac-sugestao,.ac-sugestao-bts button{transition:none}
}

/* ============================================ a marca dela, versão de revista

   Terceira forma desta página num dia. A primeira era uma coluna de cartões
   iguais, a segunda já tinha uma capa, e ela disse o que faltava às duas:
   blocos de texto a mais e tudo do mesmo peso.

   O que muda aqui são três coisas, e nenhuma é cor nova:

   1. A CITAÇÃO tem agora um ponto de entrada. A primeira frase é enorme, o
      resto é pequeno. Quem chega lê uma frase, não uma parede.
   2. A GRELHA deixa de ser cartões iguais. O negócio ocupa dois terços e as
      forças um terço, e as oportunidades passam a ter peso de capítulo.
   3. A COR entra nos cartões em vez de viver só na capa: o degradé da casa
      atrás do negócio, o lime nas forças, e o rosa a numerar as oportunidades.

   Continua a valer a regra de duas cores por composição: cream e ink fazem o
   trabalho, o rosa e o lime aparecem uma vez cada um. */

/* ------------------------------------------------------------- a citação */
.ac-ret-resumo{
  position:relative;
  display:flex;flex-direction:column;gap:14px;
  margin:clamp(26px,3vw,38px) 0;padding:0 0 0 clamp(26px,3vw,44px);
  border:none;
}
/* as aspas deixam de ser um sinal e passam a ser uma marca de água */
.ac-ret-aspas{
  position:absolute;left:-6px;top:-18px;
  font-family:var(--display);font-size:clamp(5rem,9vw,8rem);font-weight:700;
  line-height:1;color:var(--pink);opacity:.14;pointer-events:none;
}
.ac-ret-abre{
  font-family:var(--display);
  font-size:clamp(1.5rem,3.1vw,2.35rem);font-weight:700;
  letter-spacing:-.042em;line-height:1.12;color:var(--ink);
  max-width:19em;
}
.ac-ret-resto{
  font-size:clamp(15px,1.3vw,16.5px);line-height:1.62;color:var(--tinta-2);
  max-width:40em;
}

/* --------------------------------------------- o negócio e as forças, a par
   Dois terços contra um. Dois cartões do mesmo tamanho lado a lado dizem que
   as duas coisas pesam o mesmo, e não pesam: o negócio é o assunto, as forças
   são o remate. */
.ac-ret-par{
  display:grid;gap:14px;
  grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);
  align-items:start;
}

.ac-ret-bloco{
  position:relative;overflow:hidden;
  padding:clamp(22px,2.4vw,30px);border-radius:var(--raio-carta);
  border:1px solid var(--carta-risco);background:#fff;
}
/* o degradé da casa, muito ao de leve, atrás do bloco do negócio */
/* a bola do degrade vive no canto e nao por tras do texto: a dez por cento
   ainda se via atraves das letras e sujava a leitura */
.ac-ret-par > .ac-ret-bloco:first-child::after{
  content:"";position:absolute;right:-110px;top:-110px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FFEAF2 0%,#FFA8C8 34%,#FF0069 76%,#FF5900 100%);
  opacity:.16;filter:blur(3px);pointer-events:none;
}
.ac-ret-bloco > *{position:relative;z-index:1}

.ac-ret-rotulo{
  display:block;margin-bottom:12px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta-3);
}
.ac-ret-frase{
  font-family:var(--display);font-size:clamp(1.12rem,1.7vw,1.4rem);
  font-weight:600;letter-spacing:-.03em;line-height:1.26;margin-bottom:20px;
}

/* As linhas de dados: etiqueta à esquerda, valor à direita.
   É uma dl, e nao divs: o dt e o dd sao filhos directos, por isso a grelha vive
   na propria lista. A primeira versao disto apontava a divs que nao existem, e
   as linhas sairam empilhadas uma debaixo da outra. */
.ac-ret-linhas{
  display:grid;grid-template-columns:8.5em 1fr;gap:0 16px;margin:0;
}
.ac-ret-linhas dt{
  padding:11px 0;border-top:1px solid rgba(5,5,5,.06);
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);align-self:center;
}
.ac-ret-linhas dd{
  margin:0;padding:11px 0;border-top:1px solid rgba(5,5,5,.06);
  font-size:14.5px;line-height:1.45;
}
.ac-ret-linhas dt:first-of-type,
.ac-ret-linhas dd:first-of-type{border-top:none}
.ac-ret-sub{
  display:block;margin-top:18px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tinta-3);
}

.ac-ret-fichas{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.ac-ret-ficha{
  padding:7px 13px;border-radius:999px;
  border:1px solid var(--carta-risco);background:rgba(5,5,5,.02);
  font-size:13px;color:var(--tinta-2);
}

/* as forças: o único sítio onde o lime aparece nesta página */
.ac-ret-par > .ac-ret-bloco:last-child{
  background:linear-gradient(170deg,rgba(203,255,0,.16),rgba(203,255,0,.04));
  border-color:rgba(155,196,0,.3);
}
.ac-ret-par > .ac-ret-bloco:last-child .ac-ret-ficha{
  background:var(--lime);border-color:transparent;color:var(--ink);font-weight:500;
}
.ac-ret-nota{font-size:14px;line-height:1.55;color:var(--tinta-2)}

/* ------------------------------------------------------ as oportunidades
   Peso de capítulo: o número grande à esquerda, em rosa, e a linha a seguir.
   Eram três caixas iguais e passavam despercebidas entre o resto. */
.ac-ret-opos-bloco{margin-top:clamp(26px,3vw,36px)}
.ac-ret-opos{display:flex;flex-direction:column;gap:0;margin-top:14px}
.ac-ret-opo{
  display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;
  padding:18px 4px;border-top:1px solid var(--carta-risco);
  font-size:clamp(15px,1.4vw,17px);line-height:1.4;
  transition:padding-left .2s;
}
.ac-ret-opo:last-child{border-bottom:1px solid var(--carta-risco)}
.ac-ret-opo:hover{padding-left:10px}
.ac-ret-opo-n{
  font-family:var(--mono);font-size:clamp(1.5rem,2.4vw,2rem);font-weight:400;
  letter-spacing:-.04em;color:var(--pink);opacity:.5;line-height:1;
}

@media(max-width:860px){
  .ac-ret-par{grid-template-columns:1fr}
  .ac-ret-linhas{grid-template-columns:1fr;gap:0}
  .ac-ret-linhas dt{padding-bottom:0;border-top:1px solid rgba(5,5,5,.06)}
  .ac-ret-linhas dd{padding-top:3px;border-top:none}
  .ac-ret-opo{grid-template-columns:auto 1fr;gap:14px}
}
@media(prefers-reduced-motion:reduce){
  .ac-ret-opo{transition:none}
  .ac-ret-opo:hover{padding-left:4px}
}

/* ================================================ a Gaia, a conversa da história

   Não é um formulário, é uma conversa, e tem de se ver isso antes de se ler
   uma palavra. Por isso o bloco dela é escuro, como a SIA, e a caixa onde ela
   escreve é clara: a pergunta vem de fora, a resposta é dela. */

.ac-gaia-convite{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  padding:clamp(24px,2.8vw,34px);border-radius:var(--raio-carta);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(203,255,0,.1),transparent 58%),
    #050505;
  color:var(--cream);
}
.ac-gaia-convite[hidden]{display:none}
.ac-gaia-convite p{margin:0;font-size:16px;line-height:1.6;max-width:40em;color:rgba(246,243,238,.8)}
.ac-gaia-convite .ac-gaia-dica{font-size:14.5px;color:rgba(246,243,238,.52)}

.ac-gaia-quem{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--lime);
}
.ac-gaia-bola{
  width:9px;height:9px;border-radius:50%;background:var(--lime);
  box-shadow:0 0 0 4px rgba(203,255,0,.16);
}

.ac-gaia{
  padding:clamp(24px,2.8vw,34px);border-radius:var(--raio-carta);
  background:
    radial-gradient(120% 130% at 100% 0%,rgba(203,255,0,.1),transparent 58%),
    #050505;
  color:var(--cream);
}
.ac-gaia[hidden]{display:none}
.ac-gaia-topo{
  display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;margin-bottom:18px;
}
.ac-gaia-passo{
  display:flex;align-items:baseline;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}
.ac-gaia-passo b{color:rgba(246,243,238,.82);font-weight:400}
.ac-gaia-passo span{color:rgba(246,243,238,.4)}

/* a pergunta é a única coisa grande do bloco: é o que ela tem de ler */
/* o seletor tem de ser mais forte do que o `.ac-caixa p` la de cima, senao a
   pergunta sai a 15px e com a tinta escura, que aqui e a cor do fundo */
.ac-gaia .ac-gaia-pergunta{
  margin:0 0 20px;color:var(--cream);
  font-family:var(--display);font-size:clamp(1.2rem,2.1vw,1.6rem);
  font-weight:600;letter-spacing:-.034em;line-height:1.22;max-width:22em;
}

/* a caixa dela, clara dentro do escuro: a resposta é a parte que é sua */
.ac-gaia .ac-campo textarea{
  background:rgba(246,243,238,.07);border-color:rgba(246,243,238,.14);
  color:var(--cream);
}
.ac-gaia .ac-campo textarea::placeholder{color:rgba(246,243,238,.34)}
.ac-gaia .ac-campo textarea:focus{border-color:var(--lime);background:rgba(246,243,238,.1)}

.ac-gaia-fundo{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:16px}
.ac-gaia-estado{color:rgba(246,243,238,.6)}
.ac-gaia-estado.ac-estado--mau{color:#FFC2D8}

/* ------------------------------------------------------ a história escrita */
.ac-gaia-feita{display:flex;flex-direction:column;gap:12px}
.ac-gaia-feita[hidden]{display:none}
.ac-gaia-rotulo{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;
  text-transform:uppercase;color:var(--tinta-3);
}
/* a história lê-se como um texto, não como um campo de formulário */
.ac-gaia-feita textarea{
  font-size:16px;line-height:1.72;padding:24px 26px;
  background:#fff;
}
.ac-gaia-feita .ac-gaia-dica{font-size:13.5px;color:var(--tinta-3)}

@media(prefers-reduced-motion:reduce){
  .ac-gaia-bola{box-shadow:none}
}

/* ==============================================================
   O QUE FALTA ANTES
   Ha paginas que nao sao dela para encher: sao resultado de outra.
   O mapa de empatia e uma, e sai da cliente ideal. Quem chega sem
   ter escrito a cliente via seis caixas vazias e um botao, que e o
   contrario do que isto e. Isto diz-lhe o que falta e leva-a la.
   ============================================================== */

.ac-falta{
  display:flex;flex-direction:column;align-items:flex-start;gap:14px;
  margin-bottom:20px;padding:22px 26px;
  border-radius:var(--raio-carta);
  background:rgba(203,255,0,.16);
  border:1px solid rgba(5,5,5,.07);
}
.ac-falta[hidden]{display:none}
.ac-falta p{margin:0;font-size:15.5px;line-height:1.6;max-width:44em}
.ac-falta a{text-decoration:none}

/* O recado antes de comecar (ficaste a meio, ou o nao da semana) nao pode
   ler-se como mais uma linha das instrucoes: e o unico sitio onde a Gaia
   responde a quem acabou de carregar no botao. */
.ac-gaia-convite [data-gaia-retomar]{color:var(--lime);font-size:14.5px}

/* ==============================================================
   OS COMANDOS DE UMA PECA
   Ha pecas que se fazem com a IA, por comandos que ja existem
   escritos. A aula explica o exercicio; isto e o atalho para
   quem ja percebeu e so quer faze-lo. Vive por cima da caixa,
   porque e a decisao que se toma antes de escrever a primeira
   linha.
   ============================================================== */

.ac-prompts{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  max-width:760px;margin-bottom:18px;padding:18px 22px;
  border-radius:var(--raio-carta);
  background:rgba(203,255,0,.16);
  border:1px solid rgba(5,5,5,.07);
}
.ac-prompts p{margin:0;flex:1 1 320px;font-size:14.5px;line-height:1.55}
.ac-prompts a{text-decoration:none;flex-shrink:0}



/* ==============================================================
   A GAVETA DOS COMANDOS
   Abre do lado direito quando ela carrega em "Abrir os prompts".
   Fica por cima do que la estiver, mas o trabalho dela vive na
   coluna da esquerda, por isso continua a ver os campos enquanto
   le o comando. Fundo escuro como a SIA: e a parte da pagina
   onde fala a maquina.
   ============================================================== */

.ac-gaveta{
  position:fixed;top:0;right:0;z-index:90;
  display:flex;flex-direction:column;
  width:min(520px,94vw);height:100vh;
  background:#080808;color:var(--cream);
  border-left:1px solid rgba(246,243,238,.1);
  box-shadow:-40px 0 90px -40px rgba(5,5,5,.75);
  animation:ac-gaveta-entra .24s cubic-bezier(.2,.8,.3,1);
}
.ac-gaveta[hidden]{display:none}
@keyframes ac-gaveta-entra{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ac-gaveta{animation:none}}

.ac-gaveta-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-shrink:0;padding:20px 22px;
  background:radial-gradient(120% 200% at 100% 0%,rgba(255,0,105,.34),transparent 62%),#080808;
  border-bottom:1px solid rgba(246,243,238,.08);
}
.ac-gaveta-quem b{
  display:block;font-family:var(--display);font-size:17px;
  font-weight:700;letter-spacing:-.03em;
}
.ac-gaveta-quem small{
  display:block;margin-top:3px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(246,243,238,.5);
}
.ac-gaveta-fechar{
  background:none;border:none;cursor:pointer;padding:6px;
  display:inline-flex;color:rgba(246,243,238,.65);
}
.ac-gaveta-fechar:hover{color:var(--cream)}
.ac-gaveta-fechar svg{width:19px;height:19px}

.ac-gaveta-fio{
  flex-grow:1;overflow-y:auto;padding:20px 22px 40px;
  display:flex;flex-direction:column;gap:20px;
}
.ac-gaveta-nota{
  margin:0;font-size:14px;line-height:1.55;color:rgba(246,243,238,.62);
}
.ac-gaveta-fora{
  font-size:13.5px;color:var(--lime);text-decoration:none;
  border-bottom:1px solid rgba(203,255,0,.4);align-self:flex-start;
}

/* cada comando: o nome e o botao em cima, o texto por baixo */
.ac-cmd{display:flex;flex-direction:column;gap:10px}
.ac-cmd-topo{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:-20px;z-index:1;
  padding:10px 0;background:#080808;
}
.ac-cmd-topo b{
  font-family:var(--mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--lime);font-weight:400;
}
/* o comando le-se, nao se edita: texto corrido, com as quebras dele */
.ac-cmd-texto{
  margin:0;padding:16px 18px;border-radius:var(--raio-ctl);
  background:rgba(246,243,238,.05);border:1px solid rgba(246,243,238,.1);
  font:13.5px/1.65 var(--corpo,system-ui);color:rgba(246,243,238,.86);
  white-space:pre-wrap;word-break:break-word;
}

/* no telemovel a gaveta toma a largura toda, que a outra coluna nao cabe */
@media(max-width:720px){
  .ac-gaveta{width:100vw;border-left:none}
}

/* ==============================================================
   A PORTA DA ENTRADA
   A unica coisa grande da pagina inicial. Escura, larga, com um
   botao so: a seguir a ela vem tudo o resto, e e por isso que
   ela tem de ganhar o olhar sem precisar de piscar.
   ============================================================== */

.ac-porta{
  position:relative;overflow:hidden;
  margin-bottom:34px;padding:clamp(28px,3.4vw,44px);
  border-radius:var(--raio-carta);
  background:
    radial-gradient(130% 150% at 100% 0%,rgba(255,0,105,.3),transparent 60%),
    radial-gradient(90% 120% at 0% 100%,rgba(203,255,0,.14),transparent 62%),
    #080808;
  color:var(--cream);
}
.ac-porta[hidden]{display:none}
.ac-porta > *{position:relative;z-index:1}

.ac-porta h2{
  margin:14px 0 0;max-width:17em;
  font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.5rem);
  font-weight:700;letter-spacing:-.04em;line-height:1.08;
}
.ac-porta p{
  margin:14px 0 0;max-width:46em;
  font-size:clamp(15px,1.5vw,16.5px);line-height:1.62;
  color:rgba(246,243,238,.76);
}
.ac-porta .ia-bts{margin-top:26px}
.ac-porta-pe{
  display:block;margin-top:16px;
  font-size:13.5px;color:rgba(246,243,238,.45);
}
.ac-porta-pe[hidden]{display:none}

/* a bola fica no canto e nao por tras das letras */
.ac-porta-orbe{
  position:absolute;right:-90px;top:-120px;
  width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#FFEAF2 0%,#FFA8C8 30%,#FF0069 70%,#FF5900 100%);
  opacity:.22;filter:blur(2px);pointer-events:none;
}
@media(max-width:720px){.ac-porta-orbe{display:none}}

/* O resto da inicial enquanto a porta for a do diagnostico. Nao se esconde
   nada: quem ja sabe o que quer continua a clicar na mesma. So baixa o tom,
   para a pagina ter uma coisa grande e o resto a seguir. */
.ac-segundo-plano{opacity:.58;transition:opacity .2s}
.ac-segundo-plano:hover,
.ac-segundo-plano:focus-within{opacity:1}
@media(prefers-reduced-motion:reduce){.ac-segundo-plano{transition:none}}

/* A etiqueta dentro dos cartoes escuros. O `.ac-palco .ia-etiq` la de cima
   pinta todas as etiquetas de tinta escura, e ganha a .ia-etiq--clara por ser
   um seletor mais forte: nos dois cartoes escuros da inicial a etiqueta ficava
   preta sobre preto, e via-se so o traco. */
.ac-palco .ac-porta .ia-etiq,
.ac-palco .ac-sabe .ia-etiq{color:var(--lime)}
.ac-palco .ac-porta .ia-etiq::before,
.ac-palco .ac-sabe .ia-etiq::before{background:var(--lime)}

/* a frase que diz ao que isto vem, logo na abertura da inicial */
/* o seletor leva o .ac-topo porque o `.ac-topo p` la de cima poe os paragrafos
   a 16px, e sem isto o lema saia do tamanho de uma legenda */
.ac-topo .ac-lema{
  max-width:20em;margin-top:18px;
  font-family:var(--display);font-size:clamp(1.25rem,2.4vw,1.85rem);
  font-weight:600;letter-spacing:-.035em;line-height:1.18;color:var(--ink);
}

/* o numero da seccao dentro da etiqueta dos dois cartoes da entrada */
.ac-palco .ac-porta .ia-etiq b,
.ac-palco .ac-sabe .ia-etiq b{
  color:var(--cream);font-weight:500;letter-spacing:.1em;
}

/* o IA no fim de experiencIA e o trocadilho dela, e so se ve se tiver cor:
   em tinta igual ao resto lia-se como uma gralha */
.ac-topo .ac-lema b{color:var(--pink);font-weight:inherit}

/* O ponto a pulsar ao lado das esperas longas. Montar o caminho leva uns vinte
   segundos, e sem nada a mexer no ecra isso le-se como uma pagina encravada. */
.ac-cam-estado:not(:empty)::before,
.ac-gaia-estado:not(:empty)::before{
  content:"";display:inline-block;vertical-align:middle;
  width:7px;height:7px;margin-right:9px;border-radius:50%;
  background:var(--pink);animation:ac-pulsa 1.1s ease-in-out infinite;
}
.ac-gaia-estado:not(:empty)::before{background:var(--lime)}
.ac-estado--mau::before{animation:none !important;opacity:.6}
@keyframes ac-pulsa{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){
  .ac-cam-estado::before,.ac-gaia-estado::before{animation:none}
}

/* ==============================================================
   O AVISO DE BETA
   Pequeno, no canto de cima do lado direito, ao lado do titulo.
   Lime porque e a cor com que a central chama a atencao, e nao
   vermelho: isto nao e um erro, e um estado.
   ============================================================== */

/* o titulo encolhe o suficiente para o aviso caber ao lado dele, em cima e a
   direita. Em ecras estreitos a linha parte-se e o aviso passa a ocupar a
   largura toda, por baixo, que e melhor do que ficar com duas letras por linha */
.ac-topo--beta > div:first-child{flex:1 1 380px;min-width:0}
.ac-topo--beta{align-items:flex-start}
.ac-beta{
  margin-left:auto;align-self:flex-start;flex:0 1 310px;max-width:330px;
  padding:10px 14px;border-radius:14px;
  background:rgba(203,255,0,.2);
  border:1px solid rgba(5,5,5,.08);
  font-size:12px;line-height:1.45;color:var(--tinta-2);
}
.ac-beta b{
  display:block;margin-bottom:2px;
  font-family:var(--mono);font-size:9.5px;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ink);
}
@media(max-width:860px){
  .ac-beta{flex:1 1 100%;max-width:none;order:3}
}