/* Identidade da Lauren — a fonte única.
 *
 * Antes destas linhas, as cores da marca estavam escritas por extenso em quatro
 * arquivos: site.css, index.html, entrar.html e admin.html. Batiam por
 * disciplina, não por construção — e a primeira mudança que alguém esquecesse
 * de replicar quebraria isso em silêncio. Agora só existe aqui.
 */

/* Figtree, variável: um arquivo cobre de 300 a 900, então normal e negrito
   saem do mesmo download. Auto-hospedada porque a pilha do sistema fazia a
   Lauren falar em Segoe UI no Windows, SF Pro no iPhone e Roboto no Android —
   a marca tinha tipografia diferente em cada aparelho. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url(/marca/Figtree-latin.woff2) format("woff2");
}

@font-face {
  font-family: "Titan One";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/marca/TitanOne-latin.woff2) format("woff2");
}

:root {
  /* A PALETA: preto, branco e ouro. Só isso.
     O turquesa saiu em 02/09/2026 e o magenta em 08/09/2026 — os dois eram
     usados como destaque, e destaque nesta marca é PESO, não cor: no fim
     disputavam atenção com o texto em vez de guiar o olho. Onde estavam,
     agora é branco em negrito.
     O ouro é a exceção, e é uma só: ele não destaca texto, ele veste
     superfície — o campo do fecho, os tiles, as barras do microfone. */
  --branco:     #FFFFFF;
  /* O DOURADO DA MARCA. Único, e documentado aqui para não nascer uma segunda
     versão dele em cada página. Veste o campo do fecho da inicial, os tiles dos
     cinco lugares, o fio e os ícones do "O que muda" e as barras do microfone
     no aplicativo. Passou por #E4C680, #D9B96A e #FFBC37; fechou no #FFBF49
     em 22/09/2026 — mais saturado e mais quente que os dourados antigos, que
     sumiam contra a fotografia e nas pastilhas pequenas. */
  --ouro:        #FFBF49;
  --preto:      #000000;

  /* -------------------------------------------------- superfícies neutras
     Os tiles são cinza neutro: contra o fundo antigo, cinza recortava por
     MATIZ, sem depender de vencer o fundo em luminância —
     o degradê varia de claridade de cima a baixo, então um tile escolhido para
     separar no topo pode sumir na base. O #333333 mantém 1,39 contra o topo e
     1,32 contra a base, e fica mais claro que o fundo nas duas — o tile lê como
     elevado, não como recorte. O valor subiu junto com o fundo: no degradê
     anterior, mais escuro, o #282828 dava a mesma separação.
     Os valores são o resultado já composto, para não depender de empilhamento
     de transparência dentro de cartão dentro de cartão. */
  --poco:        #242424;   /* preto 30%  — campo dentro do tile */
  --elevado:     #454545;   /* branco 9%  — hover, aba ativa */
  --linha:       #565656;   /* branco 17% — borda comum */
  --linha-forte: #686868;   /* branco 26% — borda em destaque */

  /* A risca fina, a mesma nos dois lugares onde a tela separa áreas: sob o
     cartão e entre os dois painéis. Vira token para que continuem iguais —
     duas riscas com opacidade diferente lê como descuido, não como sistema. */
  --risca:      rgb(255 255 255 / .16);

  /* -------------------------------------------------------------- texto */
  --texto:  var(--branco);
  /* Branco a 70%. Era 66% e o texto secundário chegava apagado demais no
     celular, onde a tela costuma estar mais clara que a do escritório. */
  --fraco:  rgb(255 255 255 / .7);

  /* ------------------------------------------------------------ estados
     Fora da paleta da marca de propósito. O produto precisa dizer "deu errado"
     e "deu certo", e nenhuma das duas pode ser confundida com o acento — por
     isso o vermelho fica em matiz distante do âmbar. */
  --erro:   #FF5F7E;
  --verde:  #3DDC84;

  /* ---------------------------------------------------------- degradês */

  /* -------------------------------------------------------- tipografia
     Titan One tem UM peso. Nunca pedir bold: o navegador engorda o desenho por
     conta própria e o resultado fica sujo. Mais presença se faz com corpo.
     Ela é assinatura, não leitura — texto corrido segue no sans do sistema. */
  --sans: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ---------------------------------------------------------- movimento
     Os números da ENTRADA "PROFUNDIDADE" (documentada logo abaixo). Ficam
     aqui, e não dentro do @keyframes, para que uma página não possa ter um
     tempo próprio: se um dia a entrada tiver de ficar mais rápida, muda aqui e
     muda em todas. */
  --entrada-tempo: 1.1s;
  --entrada-passo: .12s;                        /* atraso de um item ao outro */
  --entrada-curva: cubic-bezier(.16,.84,.24,1); /* sai rápido, chega devagar */
  --entrada-fundo: 700px;                       /* quão atrás da tela ele nasce */
}

/* ==========================================================================
   A ENTRADA "PROFUNDIDADE"
   --------------------------------------------------------------------------
   É a nossa entrada, a única. Os blocos nascem atrás do plano da tela,
   desfocados, e chegam nítidos um a cada 120ms. A viagem é longa e a chegada é
   lenta — é isso que faz parecer que o conteúdo veio de algum lugar, em vez de
   só ligar a opacidade.

   Está no ar em: a primeira tela da inicial, os quatro planos (inicial e
   /planos), os tiles de plataforma do /app.

   COMO USAR, em três passos:

   1. No HTML, marque o recipiente e cada item, numerando a ordem de chegada:

        <div class="vitrine" data-entra>
          <div class="oferta" data-entra-item style="--passo:0"> ... </div>
          <div class="oferta" data-entra-item style="--passo:1"> ... </div>
        </div>

      O --passo é escrito à mão de propósito: nth-child quebra quando os itens
      não são irmãos (no herói, o título e a janela da demo estão em galhos
      diferentes) e some sem avisar quando alguém insere um elemento no meio.

   2. No <head>, ANTES da primeira pintura:

        <script>document.documentElement.classList.add('anima')</script>

      É essa classe que esconde os itens. No fim do corpo ela chegaria tarde: a
      tela apareceria montada e piscaria de volta para o começo da animação.
      Sem JavaScript a classe não entra e NADA some — a página vira a estática
      de sempre, que é o pior caso aceitável.

   3. No fim do corpo, o gatilho — a classe .entra no recipiente. Para o que
      está abaixo da dobra, quando ele aparece:

        document.querySelectorAll('[data-entra]').forEach(function (g) {
          if (!('IntersectionObserver' in window)) { g.classList.add('entra'); return }
          const olho = new IntersectionObserver(function (es) {
            es.forEach(function (e) {
              if (!e.isIntersecting) return
              e.target.classList.add('entra'); olho.unobserve(e.target)
            })
          }, { threshold: 0 })   // zero: no celular a coluna é mais alta que a
          olho.observe(g)        // tela, e uma porcentagem nunca seria atingida
        })

      Para o que já está na tela ao abrir (o herói), é só pôr .entra na hora.

   DUAS ARMADILHAS, ambas já custaram caro aqui:

   • fill-mode é 'backwards', nunca 'both'. O both segura o quadro final para
     sempre, e transform congelado por animação VENCE o :hover — o zoom dos
     cartões apontados morre depois que a entrada roda.
   • o estado .entra liga opacity:1 por conta própria. Se a animação não rodar
     — extensão, navegador velho, preferência do sistema — o conteúdo aparece
     do mesmo jeito. Nada pode depender de uma animação para ser visto.
   ========================================================================== */
/* Sem filter:blur. Ele era o terceiro motivo de a entrada promover uma camada
   de GPU (os outros dois são o translateZ e o preserve-3d do recipiente), e o
   mais caro: um elemento com filtro é rasterizado numa textura à parte, e sobre
   uma fotografia — o herói da home, o papel de parede do Entrar — essa textura
   aparece como um retângulo mais claro enquanto a animação corre.

   Não deu para reproduzir aqui: o navegador sem cabeça não tem GPU, e é
   exatamente ali que o defeito nasce. A profundidade continua vindo do
   translateZ, do translateY e da opacidade, que é de onde ela sempre veio — o
   desfoque era tempero. */
@keyframes lauren-profundidade{
  from{opacity:0; transform:translateZ(calc(-1 * var(--entrada-fundo))) translateY(40px)}
  to  {opacity:1; transform:none}
}
[data-entra]{perspective:1200px}
html.anima [data-entra] [data-entra-item]{opacity:0}
html.anima [data-entra].entra [data-entra-item]{
  opacity:1;
  animation:lauren-profundidade var(--entrada-tempo) backwards var(--entrada-curva);
  animation-delay:calc(var(--passo, 0) * var(--entrada-passo));
}
/* Quem pede menos movimento recebe a tela montada, sem viagem nenhuma. */
@media (prefers-reduced-motion:reduce){
  html.anima [data-entra] [data-entra-item]{opacity:1}
  html.anima [data-entra].entra [data-entra-item]{animation:none}
}

/* ==========================================================================
   COMPONENTES
   --------------------------------------------------------------------------
   O que a tela de Entrar inventou e as outras herdam: a coluna, o cartão, o
   campo, o olho da senha, o botão, o recado e o rodapé de assinatura.

   Tudo vive sob o escopo .lauren, e isso é deliberado. Os nomes cartao, campo
   e botao JÁ EXISTEM no site.css e no index.html com a identidade antiga —
   sem escopo, importar este arquivo numa página que também carrega o site.css
   quebraria as duas folhas de uma vez. Com ele, a página escolhe: quem põe
   class="lauren" no body recebe o sistema novo, quem não põe fica como está.
   E .lauren .cartao (0-2-0) vence .cartao (0-1-0) sem !important.

   Regra de convivência: componente que mais de uma tela usa mora AQUI. Se
   uma tela precisar de exceção, ela declara localmente — mas exceção que
   aparece na terceira tela deixou de ser exceção e sobe.
   ========================================================================== */

/* ===================== a borda da casa =====================
   Uma linha que nasce forte na base, corre pelas laterais e some antes do
   topo — o mesmo desenho da caixa de escrever do aplicativo, agora em tudo
   que é superfície, aqui e lá.

   Não é uma cor de borda: border-color não aceita degradê. É uma camada do
   tamanho do elemento, pintada de degradê e recortada pela máscara para
   sobrar só a espessura da borda. Por ser camada, funciona sobre qualquer
   fundo, inclusive transparente.

   As duas declarações de máscara são obrigatórias JUNTAS: a antiga do WebKit
   sozinha não pinta a base — medido, zero pixels embaixo.

   border-radius:inherit copia o raio de quem a recebe, então uma regra só
   serve do tile de 14px ao cartão de 18px.

   Fora daqui de propósito: botões, chips e campos de formulário. Abaixo de
   uns 50px de altura o degradê some antes de desenhar a lateral e lê como
   borda quebrada, não como estilo — e um campo precisa de contorno inteiro
   para ser reconhecido como campo. */
.lauren :is(.cartao, .janela, .codigo, .oferta){
  position:relative; border-color:transparent;
}
.lauren :is(.cartao, .janela, .codigo, .oferta)::before{
  content:""; position:absolute; inset:0; z-index:0;
  border-radius:inherit; padding:1px; box-sizing:border-box;
  background:linear-gradient(0deg, var(--linha), transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite:exclude;
  pointer-events:none;
}



/* -------------------------------------------------------------- lado A */
  /* scrollbar-gutter reserva o espaço da barra de rolagem SEMPRE, apareça ela
     ou não. Sem isso, abrir a aba "Criar conta" acrescenta o campo de nome, a
     coluna passa da altura da janela, a barra surge e come ~15px de largura —
     e tudo que é centralizado aqui dentro pula para o lado.
     "both-edges" é obrigatório aqui: sozinho, "stable" reserva só à direita e
     deixa a área assimétrica, jogando todo o conteúdo centralizado meia barra
     para a esquerda. A declaração vem duas vezes de propósito — navegador que
     não conhece "both-edges" descarta a segunda linha e fica com a primeira,
     em vez de perder as duas. */
  /* Centralização vertical por margem automática, NÃO por justify-content.
     Com justify-content:center e overflow, o excesso é empurrado metade para
     cima do início da área rolável — e essa parte não tem como ser alcançada.
     A marca é o primeiro elemento, então era ela que sumia.
     Margem automática distribui a folga quando ela existe e não cria espaço
     negativo quando não existe: centraliza igual, e o topo continua alcançável. */
  /* Respiro atado à ALTURA da janela. A tela precisa caber INTEIRA, sem rolar,
     inclusive na aba Criar conta, que tem um campo a mais.
     As contas são afins, não proporcionais: clamp por vh puro passa pela
     origem e não consegue valer 36px em 1080 E 14px em 768 ao mesmo tempo.
     Cada valor é uma reta entre os dois pontos — no alto entrega o que foi
     aprovado, e chega ao mínimo em 740px de altura. */
  .lauren .porta{
    display:flex; flex-direction:column; align-items:center;
    padding:clamp(14px,calc(6.47vh - 33.9px),36px) 28px; overflow-y:auto;
    scrollbar-gutter:stable;
    scrollbar-gutter:stable both-edges;
  }
  /* A coluna alargou para o slogan caber numa linha só: em 392px ele só
     entraria a 30px de corpo. O cartão NÃO acompanhou — formulário largo é
     mais difícil de ler, e o tile menor era o pedido. */
  .lauren .conteudo{width:100%; max-width:480px; text-align:center; margin-block:auto}

  /* O wordmark agora é a arte da marca, não texto pintado por CSS. Altura fixa
     e largura automática: o arquivo pode ser trocado sem mexer no estilo. */
  /* Dimensionada por ALTURA agora: é a altura que decide se a coluna cabe. A
     largura acompanha, limitada pela coluna. */
  .lauren .marca{display:block; height:clamp(34px,calc(10.59vh - 44.4px),70px); width:auto; max-width:100%; margin:0 auto clamp(12px,calc(5.88vh - 31.5px),32px)}

  /* Véu de branco a 5% em vez de cinza chapado: o degradê atravessa o cartão,
     então ele pertence ao fundo em vez de pousar sobre ele. */
  .lauren .cartao{
    background:rgb(255 255 255 / .05); border:1px solid var(--linha); border-radius:18px;
    /* Largura fixa, não "até 340". Assim ela não depende do que o conteúdo
       de dentro faz em cada aba. O max-width só protege telas estreitas. */
    padding:clamp(12px,calc(1.76vh - 1.1px),18px); width:340px; max-width:100%; margin:0 auto; text-align:left;
  }

  .lauren .google{
    display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
    padding:11px; border-radius:11px; border:1px solid var(--linha); font-size:14.5px; font-weight:550;
    transition:border-color .15s, background .15s;
  }
  .lauren .google:hover{background:var(--elevado); border-color:var(--linha-forte)}
  .lauren .google svg{width:17px; height:17px}

  .lauren .ou{display:flex; align-items:center; gap:12px; margin:clamp(9px,calc(2.06vh - 6.2px),16px) 0; color:var(--texto); font-weight:700; font-size:11.5px; letter-spacing:.12em; text-transform:uppercase}
  .lauren .ou::before,
  .lauren .ou::after{content:""; flex:1; height:1px; background:var(--linha)}

  /* Regra base, e não um seletor por campo: "Seu nome" aparece na aba Criar
     conta e tem que sair igual aos outros dois. */
  .lauren label{display:block; font-size:12.5px; font-weight:700; color:var(--texto); margin:0 0 clamp(4px,calc(0.59vh - 0.4px),6px)}
  .lauren .campo{
    width:100%; padding:clamp(9px,calc(0.59vh + 4.6px),11px) 13px; border-radius:11px; font:inherit; font-size:14.5px;
    background:rgb(0 0 0 / .25); border:1px solid var(--linha); color:var(--texto); margin-bottom:clamp(8px,calc(1.76vh - 5.1px),14px);
  }
  .lauren .campo:focus{outline:none; border-color:var(--branco); box-shadow:0 0 0 1px var(--branco)}

  /* O olho mora dentro da moldura do campo. A margem de baixo migra do input
     para o invólucro: com ela no input, o botão centralizado por 50% cairia
     abaixo do meio real da caixa. */
  .lauren .campo-senha{position:relative; margin-bottom:14px}
  .lauren .campo-senha .campo{margin-bottom:0; padding-right:46px}
  .lauren .olho{
    position:absolute; right:4px; top:0; height:100%; width:40px;
    display:grid; place-items:center; border-radius:9px; color:var(--fraco);
    transition:color .14s;
  }
  .lauren .olho:hover{color:var(--texto)}
  .lauren .olho svg{width:18px; height:18px}
  /* Um SVG só, com os dois desenhos dentro: o estado decide qual aparece.
     Trocar o caminho por JavaScript deixaria o ícone piscando a cada clique. */
  .lauren .olho .olho-fechado{display:none}
  .lauren .olho[aria-pressed="true"] .olho-aberto{display:none}
  .lauren .olho[aria-pressed="true"] .olho-fechado{display:inline}

  /* Destaque é preenchimento branco com texto preto: 21:1, o par de maior
     contraste que existe. Contra o degradê escuro e o cinza do tile, branco
     chapado já é o valor mais alto da tela e não precisa de brilho. */
  .lauren .principal{
    width:100%; padding:12px; border-radius:11px; font-weight:800; font-size:15px;
    /* 800 e não 700: a Figtree é variável até 900, e o 700 dela pesa menos que
       o 700 da fonte do sistema que estava aqui antes. O botão perdeu presença
       na troca de fonte sem ninguém mexer nele. */
    background:var(--branco); color:var(--preto);
    box-shadow:0 0 26px -12px rgb(255 255 255 / .5);
  }
  .lauren .principal:hover{background:#F0F0F0}
  .lauren .principal:disabled{opacity:.55; box-shadow:none; cursor:default}

  .lauren .recado{color:var(--erro); font-size:13.5px; margin:0 0 10px; min-height:clamp(0px,calc(5.59vh - 41.4px),19px)}

  /* Discreto: quem entra todo dia não pode ter isto competindo com o botão. */
  .lauren .esqueci{
    display:block; width:100%; margin-top:clamp(8px,calc(1.76vh - 5.1px),14px); padding:0; border:0; background:none;
    color:var(--texto); font:700 14px var(--sans); cursor:pointer; text-align:center;
    transition:opacity .14s;
  }
  .lauren .esqueci:hover{opacity:.72}
  .lauren .esqueci:disabled{opacity:.5; cursor:default}
  /* O "esqueci minha senha" continua guardando o lugar dele: some na aba
     Criar conta, e sem a reserva o botão saltaria sob o dedo.
     O campo de nome NÃO guarda mais: ele é alto (rótulo + campo + margem) e
     deixava um vão morto justamente na aba Entrar, que é a que quase todo
     mundo vê. O cartão muda de altura na troca de aba — é o preço, e é menor
     que o buraco. */
  .lauren .esqueci[hidden]{display:block; visibility:hidden}

  /* A assinatura fecha o bloco. É a arte exibida como ela é — branca, fundo
     transparente —, não uma máscara tingida. */

  /* ===================================================== CARTÃO CLARO
     Véu de branco a 80%: o tile fica em #CCD1D6 no topo da tela e #D5CEDA na
     base. Com isso, TUDO que estava branco dentro dele cai para 1,54:1 e
     some — inclusive o botão.
     Este bloco inverte o interior do cartão: escuro sobre claro, 13,7:1. Ele
     desfaz, só aqui dentro, as decisões de "texto branco" tomadas antes — não
     por discordar delas, mas porque branco sobre branco não existe.
     Está isolado de propósito: para voltar ao cartão translúcido escuro,
     basta apagar este bloco inteiro. */
  /* Branco cheio e sem borda, como os tiles das telas de papel: o véu a 80%
     deixava a fotografia subir por dentro do formulário, e a risca em volta
     era a única moldura que sobrou no site. */
  .lauren .cartao{background:var(--papel-tela); border:0}
  .lauren .cartao label{color:#14121A}
  .lauren .cartao .campo{background:rgb(255 255 255 / .72); border-color:rgb(0 0 0 / .18); color:#14121A}
  .lauren .cartao .campo::placeholder{color:#5A5560}
  .lauren .cartao .campo:focus{border-color:#14121A; box-shadow:0 0 0 1px #14121A}
  .lauren .cartao .abas{background:rgb(0 0 0 / .07)}
  .lauren .cartao .abas button{color:#14121A}
  .lauren .cartao .abas button[aria-pressed="true"]{background:rgb(255 255 255 / .92); color:#000}
  .lauren .cartao .ou{color:#14121A}
  .lauren .cartao .ou::before,
  .lauren .cartao .ou::after{background:rgb(0 0 0 / .16)}
  .lauren .cartao .google{color:#14121A; border-color:rgb(0 0 0 / .18)}
  .lauren .cartao .google:hover{background:rgb(0 0 0 / .05); border-color:rgb(0 0 0 / .3)}
  /* O botão inverte junto: branco sobre branco sumiria. Escuro sólido sobre o
     cartão claro é o par de maior contraste que sobra. */
  .lauren .cartao .principal{background:#14121A; color:var(--branco); box-shadow:none}
  .lauren .cartao .principal:hover{background:#000000}
  .lauren .cartao .esqueci{color:#14121A}
  .lauren .cartao .rodape-fino,
  .lauren .cartao .rodape-fino a{color:#14121A}
  /* Todo recado desta tela em preto, por decisão do dono — erro e acerto.
     13,7:1 sobre o cartão claro; o #FF5F7E e o #3DDC84 de origem foram feitos
     para o cartão escuro e davam 1,90:1 e 1,60:1 aqui.
     A regra do .bom vem depois e com a mesma especificidade, então ela vence
     a cor verde da base — sem ela, "deu certo" voltaria a ser verde.
     Fica no bloco do cartão claro: se o cartão voltar a ser escuro, as cores
     originais voltam sozinhas. */
  .lauren .cartao .recado,
  .lauren .cartao .recado.bom{color:#000000}

  .lauren .cartao .olho{color:#5A5560}
  .lauren .cartao .olho:hover{color:#14121A}

  /* Fecho da coluna: risca, símbolo, assinatura. Fica FORA do cartão, então a
     risca não usa a borda do tile — sobre o degradê, branco a 16% é o que dá
     uma linha visível sem virar um traço duro. */
  .lauren .rodape-marca{max-width:340px; margin:clamp(10px,calc(4.71vh - 24.8px),26px) auto 0}
  .lauren .rodape-marca hr{
    border:0; height:1px; background:var(--risca); margin:0 0 clamp(8px,calc(2.94vh - 13.8px),18px);
  }
  /* O L1 vem com recorte justo: 97,3% do arquivo é desenho, e a moldura
     transparente é simétrica na vertical — 5,2% em cima, 5,1% embaixo. Por
     isso as margens aqui são as de verdade, sem compensação: a arte da
     primeira leva desperdiçava 63% da largura e obrigava a margem negativa. */
  .lauren .rodape-marca img{display:block; width:clamp(28px,calc(4.71vh - 6.8px),44px); height:auto; margin:2px auto 10px}
  .lauren .rodape-marca p{
    margin:0; font-size:11.5px; line-height:1.5; color:var(--texto); text-align:center;
  }

  .lauren .rodape-fino{margin-top:clamp(8px,calc(1.76vh - 5.1px),14px); font-size:12.5px; color:var(--texto); text-align:center}
  .lauren .rodape-fino a{color:var(--texto); font-weight:700; text-decoration:none; transition:opacity .14s}
  .lauren .rodape-fino a:hover{opacity:.72}

  .lauren .recado.bom{color:var(--verde)}

  /* Reset do botão. Estava local na Entrar e faltou na primeira tela que
     herdou o sistema — o olho da senha apareceu com a borda padrão do
     navegador. Botão sem estilo próprio é botão com a cara do sistema
     operacional, e isso não é escolha de ninguém. */
  .lauren button{font:inherit; color:inherit; background:none; border:0; cursor:pointer}

  /* Foco de teclado, branco como o resto. Também estava local. */
  .lauren :focus-visible{outline:2px solid var(--branco); outline-offset:2px; border-radius:8px}

  /* A pintura da página. Fica no próprio .lauren para que qualquer tela que
     peça o sistema já nasça com o degradê, a cor de texto e a tipografia —
     sem repetir três declarações em cada arquivo. */
  /* Preto liso, sem degradê. O papel de parede das telas que têm um continua
     por cima — o preto é o chão, não a pintura. */
  .lauren{
    background:#0a0a0a; background-attachment:fixed;
    color:var(--texto); font:16px/1.6 var(--sans);
    -webkit-font-smoothing:antialiased;
  }

  /* Destaque dentro de título é PESO, não cor — a regra vale para o sistema
     inteiro, não só para o slogan da Login. */
  .lauren h1 i{font-style:normal; font-weight:800; color:var(--texto)}

  /* NENHUM link cai no azul sublinhado do navegador. Esta regra é a rede: cada
     página estiliza os links que conhece, e o dia em que alguém escrever um
     link novo num lugar que não tinha regra — foi o que aconteceu na resposta
     "E os meus dados?", nos Planos — ele nasce branco em negrito, que é o
     destaque desta marca, e não azul.
     O :where() zera a especificidade desta regra — e é o ponto todo. Escrita
     como ".lauren a" ela vale 0-1-1 e VENCE qualquer classe sozinha: foi assim
     que o botão "Baixar para Windows" ficou com texto branco sobre fundo
     branco, invisível, no /app. Dentro de :where() ela vale ZERO e perde para
     qualquer regra de botão, de menu ou de prosa — só pega o link que ninguém
     estilizou, que é o serviço dela. */
  :where(.lauren a){color:var(--texto); font-weight:700; text-decoration:none}
  :where(.lauren a:hover){opacity:.8}

  /* A barra de rolagem do sistema é branca e grossa, e no meio de um tema
     escuro vira a coisa mais chamativa da tela. */
  .lauren *{scrollbar-width:thin; scrollbar-color:transparent transparent}
  .lauren *:hover{scrollbar-color:var(--linha) transparent}
  .lauren ::-webkit-scrollbar{width:9px; height:9px}
  .lauren ::-webkit-scrollbar-track{background:transparent}
  .lauren ::-webkit-scrollbar-thumb{background:transparent; border-radius:6px; border:2px solid transparent; background-clip:content-box}
  .lauren *:hover::-webkit-scrollbar-thumb{background:var(--linha); background-clip:content-box}
  .lauren ::-webkit-scrollbar-thumb:hover{background:var(--elevado); background-clip:content-box}

  /* ==========================================================================
     CABEÇALHO E RODAPÉ DE SITE
     --------------------------------------------------------------------------
     As telas de autenticação não têm menu nem rodapé de site — nasceram na home.
     Vivem sob .lauren como o resto, e servem as dez páginas públicas.
     ========================================================================== */

  /* Mesmo vidro de antes — translúcido, com desfoque, o conteúdo passando por
     baixo. Só a matiz mudou: era um azul quase preto, agora é preto mesmo,
     igual ao chão da página. */
  /* A barra volta a atravessar a tela de ponta a ponta: a cápsula flutuante
     saiu a pedido, e com ela a margem negativa e o respiro que a primeira tela
     de cada página precisava para não ficar por baixo. O que ficou da dupla é
     a LOGO NO CENTRO. */
  .lauren .topo{
    position:sticky; top:0; z-index:40;
    background:rgb(0 0 0 / .86);
    -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
    /* Sem fio embaixo: o preto a 86% mais o desfoque já separam o cabeçalho do
       que passa por baixo, e a risca virava uma segunda linha competindo com o
       conteúdo da página. */
  }
  .lauren .topo .dentro{display:flex; align-items:center; gap:28px; height:90px; position:relative}

  /* O CONJUNTO DE ABERTURA — rótulo, título e descrição — tem ALTURA FIXA, a
     da tela de Planos, que é a mais alta das quatro. Sem ela, cada página
     começava o conteúdo seguinte numa altura diferente: 419px em Planos, 405
     no Baixar, 386 no Contato e 349 na Ajuda. O tamanho da primeira tela não
     muda — ela continua com os três quartos de janela de sempre.
     Só no computador: no compacto o texto quebra em mais linhas e uma altura
     reservada viraria buraco. */
  @media (min-width:900px){
    .lauren .abertura{min-height:193px}
    /* O vão depois dele também é o de Planos. Sem isto o conjunto terminava
       na mesma linha nas quatro, mas o que vinha embaixo ainda começava em
       alturas diferentes — cada página trazia a sua própria margem. */
    .lauren .abertura + *{margin-top:44px}
  }

  /* A LOGO NO CENTRO EXATO, e não centrada entre os vizinhos: com margem
     automática ela ficaria no meio do que sobra, e o meio do que sobra muda
     de página para página conforme o menu e as ações. Fora do fluxo ela cai
     sempre no eixo da barra.
     Só no computador: no compacto ficam a logo à esquerda e o botão de abrir
     à direita, como sempre foi. */
  @media (min-width:861px){
    .lauren .topo .dentro > a:first-child{
      position:absolute; left:50%; transform:translateX(-50%);
    }
    .lauren .menu{margin-left:0}
  }
  /* AO PAIRAR, A LOGO SÓ CRESCE. A rede de segurança dos links apaga todo
     link a 80% ao pairar, e numa marca isso lê como defeito — parece que a
     imagem falhou. O zoom diz a mesma coisa sem mexer na cor.
     O translateX(-50%) precisa ser repetido junto do zoom: ele é a
     centralização da logo, não um efeito, e um transform novo apaga o
     anterior inteiro. */
  .lauren .topo .dentro > a:first-child{
    transition:transform .18s cubic-bezier(.2, .7, .2, 1);
  }
  .lauren .topo .dentro > a:first-child:hover{opacity:1}
  .lauren .topo .dentro > a:first-child:active{transform:scale(.98)}
  @media (min-width:861px){
    .lauren .topo .dentro > a:first-child:hover{transform:translateX(-50%) scale(1.06)}
    .lauren .topo .dentro > a:first-child:active{transform:translateX(-50%) scale(.99)}
  }
  @media (max-width:860px){
    .lauren .topo .dentro > a:first-child:hover{transform:scale(1.06)}
  }
  @media (prefers-reduced-motion:reduce){
    .lauren .topo .dentro > a:first-child{transition:none}
  }
  .lauren .topo .marca-topo{display:block; height:46px; width:auto}
  /* 16,5px e não 14,5: ao lado de uma logo de 46px o menu antigo tinha 14px de
     tinta contra os 23px da palavra "lauren", e a diferença lia como descuido,
     não como hierarquia. O alinhamento vertical sempre esteve certo — os
     centros da tinta ficam a meio pixel um do outro; o que faltava era porte. */
  /* Os 2px de descida não são capricho: a palavra "lauren" é toda minúscula e
     assenta na linha de base em y=55; os links, com maiúscula e sem perna,
     assentam em y=50. As caixas estavam centradas — o que o olho lia era a
     diferença das duas linhas de base. Descer 2px encosta o menu no bloco
     pesado da logo sem jogá-lo para baixo do centro. */
  .lauren .menu{display:flex; gap:26px; margin-left:6px; transform:translateY(2px)}
  /* Os itens do menu são negrito sempre. O que separa a página atual das
     outras é a COR — branco cheio contra o branco a 70% —, e não o peso.
     Houve aqui uma reserva de largura, com uma cópia invisível do nome em peso
     800, para o menu não tremer quando o peso mudava ao pairar; com o peso
     fixo ela deixou de ter função e saiu, junto com os data-nome da marcação. */
  /* 18,5px: com a logo no centro, o menu ficou sozinho de um lado e pedia
     porte para não ler como rodapé no alto da página. */
  .lauren .menu a{
    color:var(--fraco); font-size:18.5px; font-weight:800; text-decoration:none;
    transition:color .15s;
  }
  /* opacity:1 é obrigatório aqui. A rede de segurança dos links, lá em cima,
     apaga TODO link do site a 80% ao pairar — e era ela que impedia o branco de
     chegar a branco: 255 vezes 0,8 dá 204. Como ela mora num :where(), que vale
     zero, qualquer regra com classe a vence; mas ela só é vencida no que
     declara, e a opacidade precisava ser dita de volta. */
  .lauren .menu a:hover{color:var(--branco); opacity:1}

  /* A página em que a pessoa está fica branca e em negrito. Destaque na marca é
     PESO, não cor — e sem marcação nenhuma o menu não dizia onde ela estava. */
  .lauren .menu a[aria-current="page"]{color:var(--branco)}
  .lauren .menu-celular a[aria-current="page"]{color:var(--branco); font-weight:800}
  .lauren .topo .direita{margin-left:auto; display:flex; align-items:center; gap:14px}
  /* 800, o mesmo peso dos links do menu: o Entrar fica ao lado deles e em 600
     lia como texto de apoio. Na casa, destaque é PESO. */
  .lauren .topo .entrar{color:var(--texto); font-size:18px; font-weight:800; text-decoration:none; transform:translateY(2px)}

  /* Botão do cabeçalho: menor que o .principal do cartão, mas o mesmo branco. */
  /* O botão casa a altura com a logo (40px): mesma âncora visual dos dois
     lados do cabeçalho. */
  .lauren .botao-topo{
    display:inline-flex; align-items:center; height:46px; padding:0 20px; border-radius:12px;
    background:var(--branco); color:var(--preto); font-weight:800; font-size:15.5px;
    text-decoration:none; transition:transform .16s ease, opacity .14s;
  }
  /* Mesmo gesto do botão grande da home: criar conta cresce um fio ao pairar.
     A opacidade sozinha fazia o botão parecer que estava saindo de cena. */
  .lauren .botao-topo:hover, .lauren .botao-topo:focus-visible{transform:scale(1.05)}
  .lauren .botao-topo:active{transform:scale(.98)}
  @media (prefers-reduced-motion:reduce){
    .lauren .botao-topo:hover, .lauren .botao-topo:active{transform:none; opacity:.9}
  }

  /* Menu de celular: o horizontal não cabe abaixo de 860px. */
  /* Sem caixa: três riscas soltas, como era. O alvo continua com 44px para o
     dedo, mas nada é desenhado em volta. */
  .lauren .abrir-menu{display:none; margin-left:auto; width:44px; height:44px; padding:12px 11px;
    flex-direction:column; justify-content:space-between; cursor:pointer;
    background:none; border:0}
  /* Largura e cor EXPLÍCITAS, e não herdadas de token: as riscas nasciam de um
     span vazio com background:var(--texto) e largura automática — se a variável
     não chega ou a largura resolve para zero, o botão fica sendo uma caixa
     vazia. Foi o que apareceu no celular. */
  .lauren .abrir-menu span{display:block; width:22px; height:3px; background:#FFFFFF; border-radius:2px; transition:transform .2s, opacity .2s}
  .lauren .abrir-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .lauren .abrir-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
  .lauren .abrir-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
  /* Preto sólido, e não o vidro do cabeçalho: ele cobre a página inteira, e um
     menu translúcido deixaria o texto de baixo aparecendo por trás dos links.
     Sólido aqui, translúcido lá em cima — a diferença é o que cada um faz. */
  /* A gaveta existe sempre e fica INVISÍVEL, em vez de não existir: display
     não anima, e sem isso a folha não teria como desdobrar (gesto 36). Sendo
     fixa e com visibility:hidden, ela não ocupa lugar nem recebe toque. */
  /* A gaveta desce só o que o conteúdo pede, e não até o pé da tela: com
     inset até embaixo sobravam duas telas de preto vazio debaixo dos links.
     Agora ela é uma folha que cai e para. */
  .lauren .menu-celular{display:flex; visibility:hidden; opacity:0;
    position:fixed; inset:90px 0 auto; z-index:39;
    background:#0a0a0a; padding:20px 24px 24px; flex-direction:column; gap:2px;
    max-height:calc(100dvh - 90px); overflow-y:auto}
  .lauren .menu-celular.aberta{visibility:visible; opacity:1}
  .lauren .menu-celular a{font:500 20px var(--sans); color:var(--texto); text-decoration:none;
    padding:12px 0; border-bottom:1px solid var(--linha)}
  .lauren .menu-celular .acoes{display:grid; gap:9px; margin-top:18px}
  /* Os botões da gaveta: menores e proporcionais à lista de links, não o botão
     branco sólido da página inteira, que dentro do menu escuro grita. */
  /* Precisa repetir a fonte do botão aqui: .menu-celular a (500/22px) tem
     especificidade maior que .menu-botao, então sem isto os botões saíam
     grandes e leves, fora do padrão. */
  .lauren .menu-celular .acoes a{border-bottom:0; padding:13px; text-align:center; font:800 15px var(--sans)}
  .lauren .menu-botao{display:inline-flex; align-items:center; justify-content:center;
    border-radius:11px; font-weight:700; font-size:15px; text-decoration:none}
  .lauren .menu-celular .acoes a.forte{background:var(--branco); color:var(--preto)}
  .lauren .menu-celular .acoes a.fantasma{border:1px solid var(--linha-forte); color:var(--texto)}

  @media (max-width:860px){
    .lauren .menu, .lauren .topo .direita{display:none}
    .lauren .abrir-menu{display:flex}
  }

  /* Estrutura de página larga: a faixa de conteúdo centralizada. */
  .lauren .dentro{width:min(1120px, 100% - 48px); margin:0 auto}
  @media (max-width:900px){ .lauren .dentro{width:calc(100% - 32px)} }

  /* Rodapé de site. */
  /* O rodapé é preto cheio contra a página #0a0a0a — e nada mais. O degrau de
     tom já o separa, do mesmo jeito que separa os tiles e a caixa de escrever,
     e é assim que o produto inteiro desenha bloco hoje.
     Passou por uma risca cinza de 1px e por um fio de 4px no ouro antes de
     chegar aqui; os dois eram uma segunda maneira de dizer o que o preto já
     dizia. */
  .lauren footer{
    position:relative; background:var(--preto); border-top:0;
    padding:48px 0 60px; color:var(--fraco); font-size:14px;
  }
  .lauren footer .dentro{display:flex; flex-wrap:wrap; gap:40px; align-items:flex-start}
  /* O bloco da marca reserva largura própria, senão o flex o esmaga e a
     assinatura corta — no compacto e no desktop. */
  .lauren footer .dentro > div:first-child{flex:1 1 230px; min-width:200px}
  /* O slogan do rodapé vivia no <style> de cada página do site; a tela de
     entrar, que ganhou o rodapé depois, não tinha a regra e ele saía no corpo
     do texto, com o <i> em itálico. Aqui ele passa a ser da CASA. */
  .lauren footer .lema{color:var(--fraco); font-size:13px; max-width:34ch; line-height:1.6}
  .lauren footer .lema i{font-style:normal; font-weight:800; color:var(--texto)}
  .lauren footer .marca-rodape{height:40px; width:auto; display:block; margin-bottom:8px}
  .lauren footer nav{display:flex; flex-direction:column; gap:9px}
  .lauren footer nav b{color:var(--texto); font-size:12.5px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px}
  .lauren footer nav a{color:var(--fraco); text-decoration:none; transition:color .14s}
  .lauren footer nav a:hover{color:var(--texto)}
  /* Branco cheio: a linha do rodapé estava com 80% de opacidade em cima do
     preto e lia como rascunho. É a assinatura da casa — não é texto de apoio. */
  .lauren footer .fim{margin-left:auto; text-align:right; font-size:13px; color:var(--texto)}
  /* No compacto: a marca ocupa a linha inteira, os três blocos de links ficam
     lado a lado dividindo a linha (senão "Produto" fica lá longe do resto), e o
     copyright centraliza embaixo. */
  @media (max-width:700px){
    .lauren footer .dentro{gap:22px}
    /* Marca na linha inteira e centralizada: logo e slogan no meio. */
    .lauren footer .dentro > div:first-child{flex-basis:100%; text-align:center}
    .lauren footer .marca-rodape{margin-left:auto; margin-right:auto}
    .lauren footer .dentro > div:first-child > div{margin-left:auto; margin-right:auto}
    /* Os três blocos lado a lado, cada um centralizado. */
    .lauren footer nav{flex:1 1 0; min-width:0; text-align:center}
    .lauren footer .fim{margin-left:0; text-align:center; width:100%; margin-top:4px}
  }


/* ======================================================= TELA DE PAPEL
   As seções SEM fotografia deixam de ser pretas e passam a ter a cor e a
   identidade do cartão de Entrar/Criar conta — a única superfície clara que a
   casa já tinha. Os valores foram medidos na tela de entrar, com a fotografia
   por baixo: o cartão fecha em #CECECE e os campos dentro dele em #F1F1F1.
   Vira token para que os dois lugares continuem iguais.

   O que NÃO muda: as telas com fotografia, o cabeçalho e o rodapé. O degrau
   entre cena (foto, preto) e leitura (papel) passa a cair no fio dourado.

   O dourado da marca não vem junto: o #D9B96A dá 1,9:1 sobre o papel. Aqui
   vale o mesmo dourado fechado que o tema claro do aplicativo já usa. */
.lauren{
  /* A TELA é branca; o #CECECE continua valendo para as superfícies que vêm
     do cartão de entrar (o tile do Fale conosco), que precisam de um degrau
     contra o papel. */
  --papel-tela:   #FFFFFF;
  --papel:        #CECECE;
  --papel-dentro: #F1F1F1;
  --papel-tinta:  #14121A;
  --papel-fraca:  #5A5560;
  --papel-risca:  rgb(0 0 0 / .18);
  --papel-ouro:   #8F7420;
  /* A ESCALA DO AMARELO: cinco passos iguais do tom da marca até o mais
     lavado. Nasceu nos cinco tiles de "Onde você estiver" e saiu de lá a
     pedido; fica guardada aqui, pronta, para a próxima fileira de cinco que
     precisar de ordem — e para não ser recalculada de outro jeito. */
  --escala-ouro-1: #FFBF49;
  --escala-ouro-2: #FFCC6A;
  --escala-ouro-3: #FFD88A;
  --escala-ouro-4: #FFE5AB;
  --escala-ouro-5: #FFF1CB;
}
/* Sem risca embaixo: entre duas telas de papel a linha virava costura de
   página, e o que separa as seções é o próprio espaço. */
.lauren .tela-clara{background:var(--papel-tela); color:var(--papel-tinta); border-bottom:0}
.lauren .tela-clara h1,
.lauren .tela-clara h2,
.lauren .tela-clara h3,
.lauren .tela-clara p,
.lauren .tela-clara li,
.lauren .tela-clara summary,
.lauren .tela-clara .rotulo,
.lauren .tela-clara h1 i,
.lauren .tela-clara h2 i{color:var(--papel-tinta)}
.lauren .tela-clara .rotulo{opacity:.6}
.lauren .tela-clara .linha-fina,
.lauren .tela-clara .lema{color:var(--papel-fraca)}
.lauren .tela-clara .linha-fina b,
.lauren .tela-clara p a{color:var(--papel-tinta)}
/* Os tiles viram a caixa de dentro do cartão — a mesma dos campos do login.
   O cartão de PLANO fica FORA: ele é o mesmo objeto da página de Planos, e ali
   é preto cheio. Dois pretos iguais em duas telas valem mais que um cartão que
   muda de cor conforme a página em que aparece. */
.lauren .tela-clara :is(.cartao-home, .lugar, .motivo, .conjunto, .painel, .codigo){
  background:var(--papel-dentro); border-color:var(--papel-risca); color:var(--papel-tinta);
}
/* A SOMBRA DURA da casa: um deslocamento sólido de 5px, sem borrão, como se
   houvesse uma segunda carta embaixo. Nasceu nos tiles de "Onde você estiver",
   para dizer no celular que a carta vira, e vale para todos os tiles claros —
   é o que dá espessura ao papel sem desenhar borda em volta. */
.lauren .tela-clara :is(.cartao-home, .lugar, .motivo, .conjunto, .formatos span){
  box-shadow:5px 5px 0 -1px rgb(20 18 26 / .16);
}
/* Os BOTÕES não levam a sombra dura: ela é dos tiles, que são superfície. Num
   botão cheio, o deslocamento sólido lia como se ele estivesse descolado da
   página — e "Começar de graça" e "Criar conta grátis" são a ação principal,
   não uma carta. */
.lauren .tela-clara :is(.cartao-home, .lugar, .motivo, .conjunto, .painel) :is(h3, b, strong, .nome, .preco, .beneficios li){color:var(--papel-tinta)}
.lauren .tela-clara :is(.cartao-home p, .lugar > span, .motivo p, .conjunto p, .conjunto li){color:var(--papel-fraca)}
/* O botão principal é escuro cheio e o outro só contornado, como no cartão. */
.lauren .tela-clara :is(.botao-grande, .baixar).forte,
.lauren .tela-clara .baixar{background:var(--papel-tinta); color:#fff; border-color:var(--papel-tinta)}
.lauren .tela-clara .botao-grande.fantasma{background:transparent; color:var(--papel-tinta); border-color:var(--papel-risca)}
.lauren .tela-clara :is(.selo-status.pronto){background:var(--papel-tinta); color:#fff}
.lauren .tela-clara :is(.selo-aba, .selo-status.breve){border-color:var(--papel-risca); color:var(--papel-fraca)}
.lauren .tela-clara :is(.marca-item, .mais){color:var(--papel-ouro)}
/* O cartão de plano numa tela de papel continua sendo o cartão preto: é a
   mesma peça de Planos, e o interior dela é claro sobre escuro. Sem isto, as
   regras de tinta desta tela apagariam o texto dentro do preto. */
.lauren .tela-clara .oferta,
.lauren .tela-clara .oferta :is(h1, h2, h3, p, li, b, strong, .nome, .preco, .beneficios li){color:var(--branco)}
.lauren .tela-clara .oferta .preco span{color:var(--branco)}
.lauren .tela-clara .oferta .beneficios li::before{background:var(--branco)}
.lauren .tela-clara .oferta .botao-plano.forte{background:var(--branco); color:var(--preto); border-color:var(--branco)}
.lauren .tela-clara .oferta .botao-plano.fantasma{background:transparent; color:var(--texto); border-color:var(--linha-forte)}
/* E o pairar junto. Sem estas linhas o botão contornado ficava preso no
   transparente na home: a regra de cima, mais específica que o :hover da
   página, vencia justo no momento em que a mão chegava no cartão. */
.lauren .tela-clara .oferta:hover .botao-plano.fantasma,
.lauren .tela-clara .oferta:focus-within .botao-plano.fantasma,
.lauren .tela-clara .oferta .botao-plano.fantasma:hover,
.lauren .tela-clara .oferta .botao-plano.fantasma:focus-visible{background:var(--branco); color:var(--preto); border-color:var(--branco)}
.lauren .tela-clara .selo{background:var(--escala-ouro-1); color:var(--preto)}
/* TEXTO NÃO FICA EM CIMA DE TEXTURA. Cada bloco de texto das telas de papel
   carrega um véu justo do próprio branco — o fundo dele mais um halo de 10px
   que dissolve —, então os pontos somem só onde há leitura e continuam
   aparecendo a um dedo de distância. Antes era uma elipse grande por seção,
   que limpava meia tela.
   A lista é das seções COM textura, e não de toda tela clara: no fecho, que é
   campo de ouro, o véu branco aparecia como um borrão atrás do título. */
.lauren .tela-clara:is(#como, #alem, #alcance, #comecar, #planos, #porque, #dados) > .dentro > :is(.rotulo, h1, h2, h3,
  p, .linha-fina, .intro, .nota-ajuda, .ir-baixar, .nota-conta),
/* O "Sobre os seus dados" embrulha o texto num .texto, e o véu passava batido. */
.lauren .tela-clara:is(#como, #alem, #alcance, #comecar, #planos, #porque, #dados) > .dentro > .texto > :is(.rotulo, h1, h2, p, .linha-fina),
.lauren .tela-clara:is(#comecar, #porque) .passo > :is(h3, p){
  background:var(--papel-tela);
  box-shadow:0 0 9px 7px var(--papel-tela);
  /* O véu acompanha a LARGURA DO TEXTO, e não a da coluna: como bloco, ele
     limpava a faixa inteira até a margem direita, mesmo onde não havia letra
     nenhuma. */
  width:fit-content;
}
/* Nos passos o texto é centrado: com largura de conteúdo e sem margem
   automática, cada linha encostava à esquerda da própria coluna. Esta regra é
   separada de propósito — no bloco compartilhado ela centrava também o título
   e o rótulo das seções, que são alinhados à esquerda. */
.lauren .tela-clara:is(#comecar, #porque) .passo > :is(h3, p){margin-inline:auto}

/* O véu só alcança o texto SOLTO na tela — filho direto do miolo — e as frases
   dos três passos. Dentro de tile ele não entra: ali o fundo já é a caixa, e
   uma tentativa anterior de excluir por seletor perdia para o id da seção e
   pintava de branco a lista de benefícios dos planos.
   O ".tela-clara" colado no id também é obrigatório: "#planos" existe nas duas
   páginas — na home é papel, na de Planos é a tela da fotografia —, e sem ele
   o véu branco cobria o título daquela tela inteira. */

/* O acordeão não é tile: é lista de texto com risca. Sem fundo, só a risca. */
.lauren .tela-clara :is(.pergunta, .tema){background:transparent; border-color:var(--papel-risca)}
/* O + e o − do acordeão acompanham os ícones: tinta, e não ouro — sobre o
   papel o #D9B96A dá 1,9:1. */
.lauren .tela-clara :is(.pergunta, .tema) summary::after{color:var(--papel-tinta)}
/* O negrito dentro da resposta era branco — na tela de papel ele sumia, e
   justo nas palavras que a frase quis destacar. */
.lauren .tela-clara :is(.pergunta, .tema) :is(p, li){color:var(--papel-fraca)}
.lauren .tela-clara :is(.pergunta, .tema) :is(b, strong, a){color:var(--papel-tinta)}
/* O anel de 1px dos tiles nasceu para o fundo preto; na tela de papel ele
   entra na risca do cartão. */
.lauren .tela-clara :is(.cartao, .janela, .codigo, .oferta)::before{background:linear-gradient(0deg, var(--papel-risca), transparent 72%)}
/* O cabeçalho era preto a 86% com desfoque: sobre uma tela clara ele clareava
   junto e virava cinza. Com papel na página, ele passa a ser preto cheio. */
.lauren .topo{background:var(--preto); -webkit-backdrop-filter:none; backdrop-filter:none}

/* ==========================================================================
   OS GESTOS DA CASA
   --------------------------------------------------------------------------
   As assinaturas escolhidas das listas. Nenhuma inventa cor: todas
   saem do amarelo, do papel, da tinta e da sombra dura que já estavam no ar.
   O comportamento (quem entra na tela, quando) mora no casa.js — aqui está
   só o desenho, e tudo cai de pé se o JavaScript não rodar.
   ========================================================================== */

/* 2 — MARCA-TEXTO QUE CORRE ------------------------------------------------
   O amarelo é PASSADO por cima da palavra quando a seção entra, como caneta
   marca-texto. Só nas telas de papel: sobre a fotografia o destaque continua
   sendo o branco em negrito — texto branco sobre amarelo não se lê, e essa é
   a regra da casa desde o começo.
   O grifo mora no <i>, que já é o destaque dos títulos; a cor do texto não
   muda.
   O box-decoration-break:clone é o que faz a faixa valer no celular. Sem ele
   o navegador trata o inline quebrado como UMA caixa só e desenha um fundo que
   escorre pelas linhas; com ele cada linha ganha a sua própria faixa, do
   tamanho dela — que é como uma caneta marca-texto passa de verdade. */
.lauren .tela-clara :is(h1, h2) > i{
  background-image:linear-gradient(var(--escala-ouro-1), var(--escala-ouro-1));
  background-repeat:no-repeat;
  background-position:0 88%;
  background-size:0% 40%;
  padding:0 4px; margin:0 -4px;
  -webkit-box-decoration-break:clone; box-decoration-break:clone;
  transition:background-size .6s cubic-bezier(.65,.02,.2,1);
}
.lauren .tela-clara.grifada :is(h1, h2) > i{background-size:100% 40%}


/* 7 — A ETIQUETA TORTA -----------------------------------------------------
   O post-it da demo está torto em 1,2°. O ângulo vira regra: todo selo sai
   torto na mesma medida, com a sombra dura — adesivo colado, não caixinha do
   sistema. */
.lauren .selo{
  transform:rotate(-1.2deg);
  box-shadow:4px 4px 0 -1px rgb(20 18 26 / .22);
}
.lauren .selo-status{transform:rotate(-1.2deg)}

/* Quem pede menos movimento recebe tudo no estado final, de uma vez. */
@media (prefers-reduced-motion:reduce){
  .lauren .tela-clara :is(h1, h2) > i{transition:none}
}

/* ==========================================================================
   MAIS GESTOS DA CASA — segunda rodada
   --------------------------------------------------------------------------
   O desenho mora aqui; o comportamento, no casa.js. Cada um cai de pé sem
   JavaScript: a página perde o gesto, nunca o conteúdo.
   ========================================================================== */

/* 55 — O TOQUE QUE AFUNDA --------------------------------------------------
   Tudo que se clica encolhe 4,5% enquanto o dedo está em cima. No celular,
   onde não existe pairar, era a única confirmação que faltava.
   Fora da lista: os tiles que viram. Eles já usam transform para girar, e uma
   escala por cima entraria no meio do giro. */
.lauren :is(button, .botao-grande, .botao-topo, .menu-botao, .botao-plano, .baixar, .ir-baixar, .principal):active{
  transform:scale(.955);
}
.lauren :is(button, .botao-grande, .botao-topo, .menu-botao, .botao-plano, .baixar, .ir-baixar, .principal){
  transition:transform .09s;
}
/* O zoom dos botões que já cresciam ao pairar continua mandando: a regra de
   cima é só para o estado apertado. */
.lauren .botao-topo:active{transform:scale(.98)}


/* 18 — O RESPIRO DA FOTOGRAFIA ---------------------------------------------
   Nove por cento em dezoito segundos, indo e voltando. Ninguém percebe olhando;
   percebe-se que a tela está viva. A camada da foto é sempre um ::before com
   inset:0, então a escala não mexe em texto nenhum. */
@keyframes lauren-respiro{from{transform:scale(1)} to{transform:scale(1.09)}}
@media (prefers-reduced-motion:reduce){
  @keyframes lauren-respiro{from{transform:none} to{transform:none}}
}

/* 40 — O RECADO QUE COLA E DESCOLA -----------------------------------------
   Aviso de coisa acontecida: cola no canto como post-it, fica três segundos e
   descola girando. Mesma voz da demo. */
@keyframes lauren-colar{
  0%{transform:rotate(-8deg) translateY(120%); opacity:0}
  12%{transform:rotate(-1.2deg) translateY(0); opacity:1}
  80%{transform:rotate(-1.2deg) translateY(0); opacity:1}
  100%{transform:rotate(7deg) translateY(120%); opacity:0}
}
.lauren .recado-cola{
  position:fixed; right:18px; bottom:18px; z-index:60; max-width:min(320px, calc(100vw - 36px));
  padding:12px 15px; border-radius:4px; background:var(--escala-ouro-3); color:var(--papel-tinta);
  font:600 13.5px/1.45 var(--sans); box-shadow:5px 5px 0 -1px rgb(0 0 0 / .4);
  transform:rotate(-1.2deg) translateY(120%); opacity:0; pointer-events:none;
}
.lauren .recado-cola.cola{animation:lauren-colar 3.4s cubic-bezier(.2,1.3,.4,1) forwards}
/* 63 — O AVISO DE SEM INTERNET usa o mesmo papel, em branco e sem descolar:
   ele fica enquanto durar a falta de rede. */
.lauren .recado-cola.sem-rede{
  background:var(--papel-tela); border:1px solid var(--papel-risca);
  transform:rotate(-1.2deg); opacity:1; animation:none;
}
.lauren .recado-cola b{display:block; font-weight:800; margin-bottom:2px}

/* 65 — O ERRO COMO BILHETE -------------------------------------------------
   O aviso do formulário sai do texto vermelho e vira papel colado: branco, com
   a sombra dura e o ângulo da casa. Nunca em vermelho — a casa não usa. O que
   corrige o erro é a frase, não a cor. */
.lauren .recado:not(:empty){
  display:block; width:fit-content; max-width:100%; margin:0 auto 12px;
  padding:9px 13px; border-radius:4px; background:var(--papel-tela);
  color:var(--papel-tinta); font-size:13px; line-height:1.45; font-weight:600;
  box-shadow:4px 4px 0 -1px rgb(0 0 0 / .32); transform:rotate(-1.2deg);
}
/* Dentro do cartão claro o bilhete inverte: papel sobre papel não se vê. */
.lauren .cartao .recado:not(:empty){
  background:var(--papel-tinta); color:#fff; box-shadow:4px 4px 0 -1px rgb(0 0 0 / .28);
}
.lauren .cartao .recado.bom:not(:empty){background:var(--escala-ouro-1); color:var(--preto)}

/* 62 — O ESQUELETO DE PAPEL ------------------------------------------------
   Enquanto a tela espera, blocos cinza com um brilho varrendo: a pessoa vê a
   forma do que vem antes do conteúdo, e a espera passa a ter tamanho. */
@keyframes lauren-varrer{to{background-position:-240% 0}}
.lauren .osso{
  height:13px; border-radius:6px; background-size:240% 100%;
  background-image:linear-gradient(90deg, #2B2B2B 25%, #3C3C3C 50%, #2B2B2B 75%);
  animation:lauren-varrer 1.5s linear infinite;
}
.lauren .tela-clara .osso{background-image:linear-gradient(90deg, #E7E6EA 25%, #F5F4F7 50%, #E7E6EA 75%)}
.lauren .osso.titulo{height:22px; width:70%}
.lauren .osso.curto{width:52%}
.lauren .esqueleto{display:grid; gap:10px}

/* 34 — A VOLTA AO TOPO -----------------------------------------------------
   Sete telas para baixo, e o caminho de volta era rolar tudo de novo. Botão
   pequeno no canto, com a sombra dura da casa — nada de círculo flutuante com
   sombra difusa, que é de outro site. Só aparece depois da primeira dobra. */
/* No canto de baixo ele ficava na periferia da tela, pequeno e fácil de não
   ver. Centrado na altura, na beira direita, ele cai onde o olho já está — e
   deixa o canto de baixo livre para o recado colado. */
.lauren .ao-topo{
  position:fixed; right:20px; top:50%; z-index:50; width:58px; height:58px;
  border:0; border-radius:15px; background:var(--papel-tela); cursor:pointer;
  display:grid; place-items:center; box-shadow:5px 5px 0 -1px rgb(0 0 0 / .4);
  opacity:0; transform:translateY(calc(-50% + 10px)); pointer-events:none;
  transition:opacity .22s, transform .22s;
}
/* O translateY(-50%) entra em TODOS os estados: ele é a centralização, não um
   efeito. Esquecê-lo no apertado jogava o botão meia altura para baixo. */
.lauren .ao-topo.mostra{opacity:1; transform:translateY(-50%); pointer-events:auto}
/* Com a gaveta aberta ele some. O botão vive acima de tudo para não ficar por
   baixo do conteúdo da página, e isso o deixava flutuando por cima do menu —
   um atalho para o topo enquanto o menu está aberto não serve para nada. */
.lauren .menu-celular.aberta ~ .ao-topo{opacity:0; pointer-events:none}
.lauren .ao-topo.mostra:active{transform:translateY(-50%) scale(.955)}
.lauren .ao-topo svg{width:27px; height:27px; stroke:var(--papel-tinta); fill:none;
  stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* 36 — O MENU COMO FOLHA ---------------------------------------------------
   A gaveta do celular desdobra do alto, girando a partir da linha do
   cabeçalho, com a sombra dura por baixo: uma folha caindo sobre a página.
   Era um bloco que aparecia pronto. */
.lauren .menu-celular{
  transform-origin:top center; transform:perspective(900px) rotateX(-88deg);
  transition:transform .34s cubic-bezier(.2,.8,.25,1), opacity .2s, visibility .34s;
}
.lauren .menu-celular.aberta{transform:perspective(900px) rotateX(0)}
/* Saindo da página, a gaveta fecha SEM TEMPO. O navegador segura a última
   pintura da página velha enquanto a nova carrega, e com a transição de 0,34s
   essa pintura era a gaveta no meio do caminho — ela aparecia por cima da
   página nova até terminar de sumir. */
/* O :not(.aberta) é o que devolve a transição se a gaveta for aberta de novo
   na mesma página — sem ele, a marca de fechar sem tempo ficaria colada nela
   para sempre e a folha nunca mais desdobraria. */
.lauren .menu-celular.fecha-agora:not(.aberta){transition:none}
@media (prefers-reduced-motion:reduce){
  .lauren .menu-celular{transition:none; transform:none}
}

/* 31 — A TECLA COM RELEVO --------------------------------------------------
   A Ajuda fala de teclas o tempo todo. Com relevo e uma sombra de 3px que
   afunda ao toque, a tecla parece tecla — e a instrução deixa de precisar da
   palavra "aperte". */
.lauren kbd{
  display:inline-block; padding:4px 9px; border-radius:7px;
  background:var(--elevado); border:1px solid var(--linha-forte);
  box-shadow:0 3px 0 0 rgb(0 0 0 / .45);
  font:700 13px var(--sans); color:var(--texto);
  transform:translateY(-1px); transition:transform .07s, box-shadow .07s;
}
.lauren kbd:active{transform:translateY(2px); box-shadow:0 0 0 0 rgb(0 0 0 / .45)}
.lauren .tela-clara kbd{
  background:var(--papel-dentro); border-color:var(--papel-risca); color:var(--papel-tinta);
  box-shadow:0 3px 0 0 rgb(20 18 26 / .22);
}

/* 64 — O BOTÃO QUE VIRA ESTADO ---------------------------------------------
   Enviar, enviando, enviado — no mesmo botão, sem trocar de tela e sem caixa
   de aviso. Preto no repouso E enquanto trabalha; o amarelo aparece só no fim,
   como recompensa. */
/* O botão continua TRAVADO nos dois estados — ninguém deve poder clicar duas
   vezes —, e o travado da casa é 55% de opacidade. Nestes dois o travamento é
   proposital e dura menos de um segundo, então a opacidade volta a 1: sem isto
   o amarelo do "tudo certo" chegava lavado, como se estivesse desligado. */
.lauren .principal.indo, .lauren .principal.indo:disabled{opacity:1}
.lauren .principal.feito, .lauren .principal.feito:disabled{
  opacity:1; background:var(--escala-ouro-1); color:var(--preto);
}
.lauren .cartao .principal.feito, .lauren .cartao .principal.feito:disabled{
  opacity:1; background:var(--escala-ouro-1); color:var(--preto);
}
.lauren .principal .visto{width:16px; height:16px; stroke:currentColor; fill:none;
  stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; margin-right:7px; vertical-align:-3px}