/* ==========================================================================
   Mentropy — A LANDING. Uma página por idioma (/pt/, /es/, /en/), esta
   folha para as três. Estrutura decidida em 2026-09-24, em
   08_web/output/ciclo-01/estrutura.md; a referência primária é o Stoic.

   As cores vêm de `cores.css`, gerado dos tokens do app — nenhum hex aqui.
   As fontes são as do app, servidas daqui. O conteúdo mora no HTML; o
   JavaScript, quando entrar, só acrescenta comportamento.

   EXISTEM A ABERTURA E A SEÇÃO 2 (Pilares, só em /pt/ por ora). As outras
   seções entram uma a uma, com o Arthur vendo cada uma, no padrão dos
   blocos alternados da seção 2.
   ========================================================================== */

:root {
  --e4: 4px; --e8: 8px; --e12: 12px; --e16: 16px;
  --e20: 20px; --e24: 24px; --e32: 32px; --e48: 48px;
  --raio-pilula: 999px;
  --borda: 0.5px;
  --largura-max: 1440px; /* as margens laterais menores (Arthur, 2026-09-24) */
}

@font-face {
  font-family: 'Fraunces';
  src: url('/ativos/fontes/fraunces-light.ttf') format('truetype');
  font-weight: 300;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/ativos/fontes/work-sans-regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Work Sans';
  src: url('/ativos/fontes/work-sans-medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Whois Mono';
  src: url('/ativos/fontes/whois-mono.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

/* Sem o clarão cinza do toque no iOS sobre os controles. */
label, a, button { -webkit-tap-highlight-color: transparent; }

html { -webkit-text-size-adjust: 100%; }

/* O FUNDO ATRAVESSA A PÁGINA INTEIRA, e é nele que fica o degradê: do fundo
   do app até o acento, de cima para baixo, nos dois modos — o cartão da
   abertura, que é a superfície, fica entre os dois extremos e flutua sobre
   ele (Arthur, 2026-09-24, no modelo do Stoic). Valores em cores.css. */
html {
  min-height: 100%;
  /* A "BORRACHA" DA ROLAGEM - a área além do topo e do fim da página - é
     pintada pelo fundo da raiz, e ele é um só. Para o SALTO DE CIMA sair na
     cor da página e o SALTO DE BAIXO na cor do rodapé (Arthur, 2026-09-24),
     a raiz tem a cor do rodapé como cor de fundo, e o degradê da página como
     imagem começando UMA TELA ACIMA do topo: o que aparece acima da página é
     o começo chapado do degradê, e o que aparece abaixo é a cor de fundo,
     escura. Só com o degradê, sem cor, a borracha saía branca. */
  background-color: var(--escuro);
  /* O DEGRADE DO FUNDO SAIU (Arthur, 2026-10-02): a pagina e CHAPADA, na cor
     Fundo do modo, do topo ao rodape. A imagem continua existindo, so que de
     uma cor so, porque e ela que faz o truque da borracha de rolagem: acima
     do topo sai o Fundo, abaixo do rodape sai a cor escura de `background-color`.
     (De 2026-09-25 a 2026-10-02 ela era um degrade para o acento no ultimo
     quinto da pagina.) */
  background-image: linear-gradient(180deg, var(--fundo) 0, var(--fundo) 100%);
  background-repeat: no-repeat;
  background-position: 0 -100vh;
  background-size: 100% calc(100% + 100vh);
}

body {
  margin: 0;
  background: transparent;
  color: var(--tinta);
  font-family: 'Work Sans', system-ui, sans-serif;
  font-size: 20px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* O MARCADOR de texto que ainda não existe: entre colchetes, em tinta
   apagada e Whois Mono, para se distinguir de texto de verdade sem gritar
   (a convenção da landing de agosto). */
.marcador {
  font-family: 'Whois Mono', monospace;
  color: var(--tinta-apagada);
  font-weight: 400;
}

/* --- O cabeçalho ---------------------------------------------------------- */

/* O menu mora no fundo, acima do cartão da abertura. */
.cabecalho {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--e24) var(--e24) 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cabecalho__direita { display: flex; align-items: center; gap: var(--e24); }

/* A CHAVE DO MODO DO SITE: claro ou grafite, o site inteiro. É um checkbox
   (`#modo-grafite`, o contrato com cores.css) e o ícone é o rótulo dele: o
   sol no claro, a lua no grafite. CSS puro; o JavaScript da página só
   lembra a escolha e alinha o tema dos mockups. */
.modo__caixa {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.modo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px; /* menor, a pedido do Arthur (2026-09-24) */
  border-radius: var(--raio-pilula);
  /* O círculo na cor do cartão do modo: o claro no claro, o grafite no
     grafite. Flat, sem contorno, como o cartão. */
  background: var(--cartao);
  color: var(--tinta);
  cursor: pointer;
}
.modo:hover { background: color-mix(in srgb, var(--cartao) 85%, var(--tinta)); }
.modo__caixa:focus-visible + .modo { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }
.modo .icone { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.modo .icone--lua { display: none; }
:root:has(#modo-grafite:checked) .modo .icone--sol { display: none; }
:root:has(#modo-grafite:checked) .modo .icone--lua { display: block; }
/* O logo do site é o do LIGHT do app (o antigo New Light): sem placa, símbolo vivo, palavra
   em tinta (Arthur, 2026-09-24). Os mesmos traçados do logo dos mockups,
   com as cores fixas do site — não trocam com o seletor de temas. */
.cabecalho__logo { display: block; line-height: 0; }
.logo-site {
  display: block;
  width: 149px;
  height: 36px;
  --app-placaDoLogo: var(--logo-placa);
  --app-simboloDoLogo: var(--logo-simbolo);
  --app-palavraDoLogo: var(--logo-palavra);
}

/* A chave de idioma: as siglas em Whois Mono, a atual em tinta, as outras
   em tinta apagada — a gramática de "ligado" do app, sem cor de estado. */
.idiomas {
  display: flex;
  gap: var(--e16);
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  letter-spacing: 0.12em;
}
.idiomas a, .idiomas span { color: var(--tinta-apagada); text-decoration: none; }
/* No toque e no mouse, só a cor da letra muda, de leve - nunca um fundo
   (o iOS pintava um quadrado cinza atrás da sigla; ver o tap-highlight). */
.idiomas a:hover, .idiomas a:active { color: var(--tinta); }
.idiomas a { transition: color 120ms ease; }
.idiomas .atual { color: var(--tinta); }

/* --- A abertura ----------------------------------------------------------- */

.abertura__miolo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: var(--e32) var(--e24) var(--e48);
}
/* O CARTÃO DA ABERTURA, no modelo do Stoic: o texto e as telas dentro dele.
   O estilo visual novo do Mentropy — flat, sem contorno, na cor do cartão
   do modo (a superfície do Light no claro, a do Grafite no escuro). */
.abertura__cartao {
  background: var(--cartao);
  border-radius: 32px;
  padding: var(--e48);
  overflow: hidden;
}

/* Duas colunas: as telas à esquerda, o texto à direita (Arthur, 2026-09-24;
   nasceu ao contrário). A ordem do HTML segue texto primeiro — é o que o
   leitor de tela e o celular leem —, e a troca é só visual, pelo grid. */
.abertura__colunas {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: 96px; /* dois passos de 48: os mockups e o texto estavam grudados */
  align-items: center;
}
.abertura__texto { order: 2; }
.abertura__telas { order: 1; }

.abertura__frase {
  /* A fonte do CORPO de texto do app — Work Sans —, e não a de título
     (Fraunces), no peso MEDIUM (500), o dos botões do app, com o
     espaçamento entre letras fechado em -0.03em. Decisão do Arthur,
     2026-09-24 (passou por semibold no mesmo dia e voltou). */
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  max-width: 20ch;
  margin: 0;
}
.abertura__apoio {
  color: var(--tinta-suave);
  font-size: 20px;
  margin: var(--e24) 0 0;
}
/* OS BOTÕES DE LOJA (Arthur, 2026-09-24): a maçã e o ícone do Google Play,
   arte oficial, lado a lado. A maçã acompanha a tinta do modo; o Play mantém
   as cores dele. O resto — fundo, raio, tipografia — segue o modo do site.
   Ainda sem link. */
.lojas { display: flex; flex-wrap: wrap; gap: var(--e12); margin-top: var(--e32); }
/* O SLOGAN ACIMA DOS MOCKUPS (Arthur, 2026-10-02; nasceu sob os botões de
   loja e mudou de lugar no mesmo dia): centrado no eixo do leque, na
   família dos títulos, em tinta, com o respiro de um passo até as telas. */
.abertura__slogan {
  margin: 0; text-align: center; /* o respiro ate as telas e o vao da coluna */
  font-family: 'Fraunces', Georgia, serif; font-weight: 300;
  font-size: 22px; line-height: 1.3; color: var(--tinta);
}
.loja {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: var(--e12) var(--e24);
  border-radius: var(--raio-pilula);
  background: var(--botao);
  color: var(--sobre-botao);
  font-weight: 500;
  font-size: 16px;
  line-height: 24px;
  text-decoration: none;
  white-space: nowrap;
}
.loja__apple { width: 20px; height: 20px; fill: currentColor; }
.loja__play { width: 20px; height: 22px; }

/* --- O seletor de temas, abaixo das telas ------------------------------- */

.abertura__telas {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e24);
}
/* O seletor vai ABAIXO do leque (Arthur, 2026-09-25; nasceu acima). A ordem
   do HTML fica: o leitor de tela ouve o seletor antes das telas que ele
   troca; a troca de lugar e so visual. */
.abertura__telas .temas { order: 2; }
.abertura__telas .leque { order: 1; }
.temas {
  border: 0;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e12);
}
/* A legenda saiu da vista (Arthur, 2026-09-24: só os chips). Fica na página
   para o leitor de tela, que sem ela não sabe do que os três radios tratam. */
.temas__rotulo {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* O radio some da vista, não da página: o teclado e o leitor de tela o
   acham, e `:checked` continua valendo. Ele fica DENTRO do próprio bloco
   (`position: relative` no bloco): tocar no rótulo dá foco ao radio, e o
   navegador rola até onde ele está — no topo da página, a página pulava. */
.temas { position: relative; }
.temas input {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.temas label {
  cursor: pointer;
  padding: var(--e8) var(--e16);
  border-radius: var(--raio-pilula);
  border: var(--borda) solid var(--tinta-apagada);
  font-size: 16px;
  line-height: 24px;
  color: var(--tinta-suave);
}
.temas input:checked + label {
  background: var(--botao);
  border-color: var(--botao);
  color: var(--sobre-botao);
}
.temas input:focus-visible + label { outline: 2px solid var(--acento-vivo); outline-offset: 2px; }

/* --- O leque de telas ------------------------------------------------------ */

/* A HOME SEMPRE NO CENTRO, as outras duas atrás formando um leque, mais
   escondidas do que o carrossel que existiu até 2026-09-25 (Arthur): só o
   suficiente para se perceber que existem. Parado: não há setas, radios nem
   deslize. As de trás encolhem, afastam-se um pouco, descem e inclinam. */
.leque {
  --frente: 0.6;   /* a escala da Home */
  --tras: 0.5;     /* a da prática, atrás à direita */
  --tras-comunidade: calc(0.6 * 0.9); /* a comunidade, atrás à esquerda, a 90% da Home (Arthur, 2026-09-25) */
  --afasta: 170px; /* quanto saem para os lados: nasceu em 110, abriu a 200, voltou a 160 e assentou em 170 (Arthur, 2026-09-25) para o anel que queima aparecer na abertura */
  --desce: 10px;   /* nasceram 40 abaixo, subiram a 0 e desceram a 10 no portao (Arthur, 2026-09-25) */
  --inclina: 6deg; /* a abertura do leque */
  position: relative;
  width: 100%;
  height: calc(1000px * var(--frente));
}
.leque .moldura {
  position: absolute;
  top: 0;
  left: 50%;
  --escala: var(--frente);
  transform-origin: bottom center;
}
.leque .moldura--home { transform: translateX(-50%); z-index: 3; }
/* A comunidade a ESQUERDA e a pratica a DIREITA (Arthur, 2026-09-25;
   nasceram ao contrario). */
.leque .moldura--comunidade {
  transform: translateX(calc(-50% - var(--afasta))) translateY(var(--desce)) scale(calc(var(--tras-comunidade) / var(--frente))) rotate(calc(-1 * var(--inclina)));
  z-index: 1;
}
.leque .moldura--pratica {
  transform: translateX(calc(-50% + var(--afasta))) translateY(var(--desce)) scale(calc(var(--tras) / var(--frente))) rotate(var(--inclina));
  z-index: 1;
}

/* No celular as duas colunas viram uma: o texto em cima, o leque
   embaixo, encolhido até a Home caber com folga — as de trás espiam
   pelas bordas. */
@media (max-width: 899px) {
  .abertura__cartao { padding: var(--e24); border-radius: 24px; }
  /* Os dois botões de loja na MESMA linha (Arthur, 2026-09-24): dividem a
     largura, sem quebrar, com respiro e letra um passo menores. */
  .lojas { flex-wrap: nowrap; gap: var(--e8); }
  .loja { flex: 1 1 0; justify-content: center; padding: var(--e12) var(--e8); font-size: 15px; gap: 8px; min-width: 0; }
  .abertura__colunas { grid-template-columns: 1fr; gap: var(--e48); }
  .abertura__texto { order: 1; }
  .abertura__telas { order: 2; }
  .abertura__frase { max-width: none; }
  .abertura__telas { align-items: stretch; }
  /* NO CELULAR AS TRES TELAS ENCOLHEM ATE CABEREM NA LARGURA (Arthur,
     2026-09-25): a Home e as de tras seguem as mesmas razoes do desktop (83%
     e 90%), e o conjunto inteiro - a Home mais o que as de tras saem para
     os lados - e medido para caber no miolo do cartao em cada faixa de
     largura. Os numeros: a largura util e a tela menos 96 (24 do miolo e 24
     do cartao, dos dois lados), e o leque mede a tela de tras mais duas
     vezes o afastamento. */
  /* NO CELULAR O LEQUE VIRA FAIXA (Arthur, 2026-10-02; substitui o leque
     encolhido de 2026-09-25): as tres telas no mesmo tamanho, lado a lado,
     numa faixa que ROLA DE LADO COM O DEDO - rolagem nativa, que acompanha
     o toque e encaixa por tela (`scroll-snap`). A faixa sangra ate as
     bordas da janela (o truque do 100vw com a margem negativa), e a Home
     comeca no centro (o script `leque` a centra na carga). Comunidade a
     esquerda, pratica a direita, como no leque. Nada de posicao absoluta
     nem de transform aqui: a moldura ja escala pelo tamanho da caixa. */
  .leque {
    --frente: 0.6;
    position: static; height: auto;
    /* DENTRO DO CARTAO, na largura da coluna (o cartao corta o que sai dele,
       e uma faixa de 100vw empurrava a coluna - visto no celular do Arthur).
       O respiro lateral poe a Home no centro quando ela esta no meio da
       faixa, e as de tras espiam pelas bordas. */
    width: 100%; max-width: 100%; box-sizing: border-box;
    display: flex; gap: var(--e16); align-items: flex-start;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0 calc(50% - 488px * var(--frente) / 2);
  }
  .abertura__telas { min-width: 0; }
  .leque::-webkit-scrollbar { display: none; }
  /* A MOLDURA SEGUE `relative` (e nao `static`): a tela do celular e
     absoluta DENTRO dela, e sem a referencia ela se ancorava num ancestral
     acima e escapava - so o pe da tela aparecia, cortado (captura do
     Arthur, 2026-10-02). Sai so o deslocamento do leque. */
  .leque .moldura {
    position: relative; left: auto; top: auto; transform: none;
    --escala: var(--frente);
    scroll-snap-align: center; z-index: auto;
  }
  .leque .moldura--comunidade { order: 1; }
  .leque .moldura--home { order: 2; }
  .leque .moldura--pratica { order: 3; }
}
@media (max-width: 400px) {
  /* 375 de tela: 279 uteis dentro do cartao; a 0.52 a Home mede 254. */
  .leque { --frente: 0.52; }
}

/* --- Seção 2: Pilares do Mentropy ----------------------------------------- */

/* SEM CARTÃO: o texto direto sobre o fundo (Arthur, 2026-09-25, no modelo da
   seção "How journaling makes your life better" do Stoic). O miolo alinha
   pela esquerda com o conteúdo do cartão da abertura: as mesmas margens de
   24 mais os 48 do padding dele. O ritmo do Stoic — rótulo pequeno,
   título, e o conteúdo abaixo — e muito vazio antes e depois. */
.pilares__miolo {
  max-width: var(--largura-max);
  margin: 0 auto;
  /* 48 em cima: com os 48 de baixo do miolo da abertura, 96 entre as
     seções (Arthur, 2026-09-25: os 120 de antes eram vazio demais). */
  padding: var(--e48) calc(var(--e24) + var(--e48)) var(--e48);
}
/* O título de seção: A MESMA FONTE, PESO E TAMANHO DO H1 DA ABERTURA
   (Arthur, 2026-09-25) — Work Sans medium, -0.03em, o mesmo clamp —,
   CENTRALIZADO. Nasceu em Fraunces e mudou no portão. */
.secao__titulo {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: clamp(28px, 3.1vw, 38px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  text-align: center;
  white-space: nowrap; /* numa linha só (Arthur, 2026-09-25); no celular quebra */
  margin: 0;
}
/* OS BLOCOS ALTERNADOS, no padrão do Stoic (Arthur, 2026-09-25; anotado em
   estrutura.md para as seções seguintes): texto de um lado, a tela do
   outro, invertendo a cada bloco. Os cartões que a seção teve saíram. A
   tela vai a meia escala; o texto alinha à esquerda, como no Stoic. */
/* AS BORDAS SE ALINHAM (Arthur, 2026-09-25, no portao com a captura): o
   bloco ocupa o miolo inteiro, a coluna da tela mede so a tela e fica na
   BORDA EXTERNA - a direita no bloco normal, a esquerda no invertido -, e
   o texto encosta na borda oposta. Assim a tela de um bloco alinha com o
   texto do outro: a mesma linha vertical dos dois lados. O texto tem
   largura maxima de leitura, maior que a de antes. */
.bloco {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 96px;
  align-items: center;
  /* O par de blocos e mais estreito que o miolo e fica CENTRADO (Arthur,
     2026-09-25, segunda rodada): no miolo inteiro, texto e tela ficavam
     longe demais. As bordas externas dos dois blocos seguem na mesma
     linha, so que mais para dentro. */
  max-width: 1040px;
  margin: 96px auto 0;
}
.bloco__texto { order: 1; max-width: 680px; }
.bloco__tela { order: 2; display: flex; }
.bloco--invertido { grid-template-columns: auto minmax(0, 1fr); }
.bloco--invertido .bloco__texto { order: 2; justify-self: end; }
.bloco--invertido .bloco__tela { order: 1; }
.bloco__tela .moldura { --escala: 0.5; }
/* O LEQUE DA SEÇÃO 2 (Arthur, 2026-09-25, terceira forma): o Histórico
   atrás da prática NO MESMO ESTILO DO LEQUE DA ABERTURA - a 90% da
   central, inclinado 6 graus, COMEÇANDO NA MESMA ALTURA que as telas de
   trás da abertura (10 abaixo do topo) - e saindo pela ESQUERDA (nasceu à
   direita e sem inclinação). A caixa mede a prática mais o afastamento; a
   prática fica encostada à direita da caixa, e é a borda dela que alinha
   com o texto do bloco de baixo. */
.leque-2 {
  --afasta: 160px;
  --desce: 10px;
  --inclina: 6deg;
  --tras: 0.9;
  position: relative;
  width: calc(244px + var(--afasta));
  height: 490px;
}
.leque-2 .moldura { position: absolute; top: 0; left: var(--afasta); }
.leque-2 .moldura--pratica { z-index: 2; }
.leque-2 .moldura--historico {
  z-index: 1;
  transform-origin: bottom center;
  transform: translateX(calc(-1 * var(--afasta))) translateY(var(--desce)) scale(var(--tras)) rotate(calc(-1 * var(--inclina)));
}
/* O RÓTULO EM CHIP acima do título (Arthur, 2026-09-25): o desenho do
   "ESPAÇO DE PRÁTICA" da Home do app - contorno fino em tinta apagada,
   pílula, 4 por 12 - com o texto no nível Label, em tinta suave. */
.bloco__chip {
  display: inline-block;
  border: var(--borda) solid var(--tinta-apagada);
  border-radius: var(--raio-pilula);
  padding: var(--e4) var(--e12);
  font-family: 'Whois Mono', monospace;
  font-size: 16px;
  line-height: 16px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta-suave);
  margin: 0 0 var(--e16);
}
.bloco__nome {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0 0 var(--e16);
}
.bloco__texto p {
  font-size: 20px;
  line-height: 1.5;
  color: var(--tinta-suave);
  text-wrap: pretty;
  margin: 0;
}
.bloco__texto p + p { margin-top: var(--e16); }

/* O SELETOR DE CATEGORIA da seção 2 (Arthur, 2026-10-02): o controle da
   tela de escrever do app, na escala da página - a caixa na cor do cartão,
   sem contorno (flat é o único estilo), o círculo do ícone no acento, o
   chevron à direita; a lista abre por baixo, na mesma caixa, e NASCE
   FECHADA (o `hidden` precisa vencer o `display` da lista - a primeira
   forma esquecia isso e a lista aparecia aberta, visto pelo Arthur); a
   frase-convite em tinta suave logo abaixo. Medidas pelo desenho dele: a
   caixa cabe em ~360, não em 520 - "gigantesco" foi a palavra. */
.seletor { position: relative; margin-top: var(--e24); max-width: 320px; }
.seletor__caixa { position: relative; }
/* A SETA (Arthur, 2026-10-02): sai da altura do "+" de escrever post, que
   fica no pé do mockup à esquerda, sobe em curva e termina apontando para
   o dropdown. A caixa do desenho começa à esquerda do seletor e DESCE
   abaixo dele, porque o "+" está mais baixo que a caixa. Só em tela larga. */
.seletor__seta {
  position: absolute; left: -150px; top: -4px; width: 150px; height: 150px;
  fill: none; stroke: var(--tinta-apagada); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}
.seletor__botao {
  display: flex; align-items: center; gap: var(--e12); width: 100%;
  padding: 6px var(--e12); border: 0; border-radius: 14px;
  background: var(--cartao); color: var(--tinta); cursor: pointer;
  font: inherit; text-align: left;
}
.seletor__circulo {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%; background: var(--acento);
}
.seletor__icone { width: 14px; height: 14px; stroke: var(--tinta); }
.seletor__nome { flex: 1; font-size: 16px; line-height: 1.3; color: var(--tinta); }
.seletor__chevron { width: 16px; height: 16px; stroke: var(--tinta-suave); flex: none; }
/* A LISTA FLUTUA (Arthur, 2026-10-02): camada propria por cima do que vem
   abaixo, sem empurrar a frase-convite nem o resto da pagina - um dropdown
   de verdade. Nasce invisivel e entra com uma transicao curta de opacidade
   e de um leve deslocamento para baixo; `visibility` segura o foco e o
   clique enquanto esta fechada. */
.seletor__lista {
  position: absolute; left: 0; right: 0; top: calc(100% + var(--e8)); z-index: 5;
  list-style: none; margin: 0; padding: var(--e8);
  border-radius: 16px; background: var(--cartao);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex; flex-direction: column; gap: var(--e4);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s linear 160ms;
}
.seletor__lista--aberta {
  opacity: 1; visibility: visible; transform: translateY(0);
  transition: opacity 160ms ease, transform 160ms ease, visibility 0s;
}
.seletor__opcao {
  display: flex; align-items: center; gap: var(--e12);
  padding: 6px var(--e8); border-radius: 10px; cursor: pointer;
  font-size: 15px; line-height: 1.3; color: var(--tinta);
}
.seletor__opcao:hover, .seletor__opcao[aria-selected="true"] { background: var(--acento); }
/* A FRASE-CONVITE RESERVA DUAS LINHAS (Arthur, 2026-10-02): o bloco e
   centrado na vertical, e uma frase de uma linha trocada por uma de duas
   mudava a altura da coluna - o chip, o titulo e a seta subiam meia linha.
   Com a altura de duas linhas sempre reservada, a frase cresce PARA BAIXO
   dentro do espaco e nada acima se move. */
.seletor__convite {
  margin: var(--e12) 0 0 !important; font-size: 15px !important;
  line-height: 1.5 !important; min-height: calc(2 * 1.5em);
  color: var(--tinta-suave);
}
.seletor__seta--estreita { display: none; }
@media (max-width: 899px) {
  /* O SELETOR ABAIXO DO MOCKUP (Arthur, 2026-10-02): o script o move para o
     fim do bloco; aqui ele ocupa a largura toda e abre um respiro acima,
     por onde a seta desce do "+" do celular ate a caixa. */
  .seletor { max-width: none; margin-top: 56px; }
  /* O bloco invertido ordena texto (1) e tela (2) no celular; sem ordem o
     seletor caia ANTES dos dois, colado ao mockup da pratica do bloco de
     cima (visto pelo Arthur). Ele e o terceiro. */
  .bloco--invertido > .seletor { order: 3; }
  .seletor__seta--larga { display: none; }
  .seletor__seta--estreita { display: block; }
  .seletor__seta {
    left: calc(50% - 20px); top: -150px; width: 150px; height: 150px; z-index: 2;
  }
}

@media (max-width: 899px) {
  .pilares__miolo { padding: var(--e24) var(--e24) var(--e24); }
  /* No celular os blocos empilham: texto em cima, tela embaixo, sempre. */
  .bloco, .bloco--invertido { grid-template-columns: 1fr; gap: var(--e32); margin-top: 64px; }
  .bloco__texto { max-width: none; }
  .bloco__tela { justify-content: center; }
  /* No celular o Histórico sai menos. */
  .leque-2 { --afasta: 100px; }
  .bloco--invertido .bloco__texto { order: 1; justify-self: stretch; }
  .bloco--invertido .bloco__tela { order: 2; }
  .secao__titulo { white-space: normal; }
}

/* --- A grade: "Tudo o que o Mentropy tem" ---------------------------------- */

/* OS OITO PRINCÍPIOS DO LIVRO VIVO EM CARTÕES ESCUROS (Arthur, 2026-10-02;
   de 2026-09-25 a aqui eram os recursos do app, em cartão claro com uma
   frase). Título centrado e quatro colunas; cada cartão é só o círculo do
   ícone e o título, um sobre o outro. O escuro é o GRAFITE do rodapé, nos
   dois modos do site - no modo escuro o cartão usa a cor de cartão da
   paleta, porque o grafite seria o próprio fundo. Quatro colunas no
   desktop, duas no meio e no celular. */
.grade__miolo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 120px calc(var(--e24) + var(--e48)) var(--e48);
}
.grade__itens {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--e16);
  max-width: 1160px;
  margin: 64px auto 0;
}
/* CARTÕES E ÍCONES (Arthur, 2026-09-25; nasceu sem os dois): o cartão flat
   da abertura, menor; o ícone do Lucide no traço do app, em tinta, na
   frente do título. */
.grade__item {
  background: var(--escuro);
  color: var(--sobre-escuro);
  border-radius: 24px;
  padding: var(--e32);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e16);
}
:root:has(#modo-grafite:checked) .grade__item { background: var(--cartao); }
/* O círculo do ícone é o das categorias do app (Arthur, 2026-09-25): 26
   de altura, o ícone em 60%. No cartão escuro ele fica no acento claro com
   o ícone em tinta - no modo escuro do site as duas cores viram as da
   paleta grafite, e o círculo segue um tom acima do cartão. */
.grade__circulo {
  width: 26px; height: 26px;
  border-radius: var(--raio-pilula);
  background: var(--acento);
  color: var(--tinta);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.grade__icone { width: 16px; height: 16px; } /* 60% do círculo (Arthur, 2026-09-25); os 85% duraram minutos */
.grade__nome {
  font-family: 'Work Sans', system-ui, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
  color: inherit;
}
@media (max-width: 1099px) {
  .grade__itens { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* NO CELULAR, DUAS COLUNAS EM TESTE (Arthur, 2026-09-25; era uma). */
@media (max-width: 899px) {
  .grade__miolo { padding: 96px var(--e24) var(--e24); }
  .grade__itens { gap: var(--e12); margin-top: var(--e48); }
  .grade__item { padding: var(--e20); border-radius: 20px; }
  .grade__nome { font-size: 18px; }
}

.respiro-final { height: 20vh; }

/* --- O rodapé ------------------------------------------------------------- */

/* No estilo do Stoic: uma faixa de largura inteira, o logo e os direitos à
   esquerda, as colunas à direita. ESCURO NOS DOIS MODOS (Arthur, 2026-09-24):
   é o GRAFITE — o fundo e a tinta dele —, mesmo com o site no claro: a cor
   escura que contrasta com o modo. O logo vai como no Grafite: símbolo
   vivo, palavra clara. */
.rodape {
  background: var(--escuro);
  color: var(--sobre-escuro);
  padding: var(--e48) 0;
}
.rodape .logo-site {
  --app-placaDoLogo: transparent;
  --app-simboloDoLogo: var(--acento-vivo);
  --app-palavraDoLogo: var(--sobre-escuro);
}
.rodape__miolo {
  max-width: var(--largura-max);
  margin: 0 auto;
  padding: 0 96px; /* mais respiro lateral que o cartão (Arthur, 2026-09-24) */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--e48);
  align-items: start;
}
.rodape__direitos {
  margin: var(--e16) 0 0;
  font-size: 16px;
  color: var(--sobre-escuro-suave);
}
.rodape__colunas {
  display: flex;
  gap: 96px;
}
.rodape__coluna {
  display: flex;
  flex-direction: column;
  gap: var(--e12);
}
.rodape__titulo {
  margin: 0 0 var(--e4);
  font-size: 16px;
  font-weight: 500;
  color: var(--sobre-escuro);
}
.rodape__coluna a {
  font-size: 16px;
  color: var(--sobre-escuro-suave);
  text-decoration: none;
}
.rodape__coluna a:hover { color: var(--sobre-escuro); }

@media (max-width: 899px) {
  .rodape__miolo { grid-template-columns: 1fr; gap: var(--e32); padding: 0 var(--e32); }
  .rodape__colunas { gap: var(--e48); }
}


@media (prefers-reduced-motion: no-preference) {
  .temas label { transition: background-color 160ms ease, color 160ms ease; }
}