/* A frente do site do Bizu: a inicial da casa e a página do Bizu: Matemática.
 *
 * É o MESMO sistema visual da página do Bizu: Cálculo, que mora no repositório
 * dele: mesma tipografia, mesmo livro que vira as folhas, mesmas medidas. O que
 * muda é a paleta, e ela vem por classe no corpo da página, como em estilo.css:
 * `familia` na inicial e `produto-matematica` na página do produto. A distinção
 * entre os dois aplicativos é visual antes de ser textual.
 *
 * estilo.css continua vestindo as páginas legais (/privacidade, /termos,
 * /suporte) e os cartões de produto antigos. Os dois convivem: este arquivo só
 * é carregado por quem o pede.
 *
 * AS FONTES SÃO SERVIDAS DAQUI, nunca do Google. As três são de licença aberta
 * (SIL Open Font License 1.1): Archivo (Omnibus-Type), Newsreader (Production
 * Type) e STIX Two Text (SIL). Buscá-las fora poria um terceiro entre o
 * visitante e o site, e a política de conteúdo do Caddyfile não permite.
 *
 * O livro que vira as folhas é a StPageFlip, servida de /lib. Ver
 * public/lib/NOTICE.md.
 */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fontes/archivo-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(/fontes/archivo-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/stix-italico-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/stix-italico-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/stix-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'STIX Two Text';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/stix-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/newsreader-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/fontes/newsreader-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

  :root{
    color-scheme:light;
    /* a paleta neutra da casa, da página inicial. Aqui o cromo é quieto e a
       cor vem dos dois cartões de produto: é assim que se vê que são dois
       aplicativos, e não duas seções do mesmo. */
    --papel:#f4f5f8; --veu:rgba(244,245,248,.86); --folha:#ffffff; --folha-alta:#ffffff;
    --tinta:#12151f; --tinta2:#4a5063; --tinta3:#767d92;
    --borda:#dfe2ea; --borda2:#eceef4;
    --marinho:#26305c; --marinho-fundo:#131829;
    --ambar:#8f5c00; --ambar-fundo:#fff3d1;
    --erro:#c3283c; --erro-fundo:#fbe5e6;
    --m1:#0f6b72; --m2:#2b4bc8; --m4:#6a3fa8;
    --serif:'Newsreader',Georgia,'Times New Roman',serif;
    --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
    --mat:'STIX Two Text','Times New Roman',serif;
  }
  /* o azul do Bizu: Matemática, o mesmo de estilo.css */
  .produto-matematica{
    --papel:#f6f7fb; --veu:rgba(246,247,251,.88); --folha:#ffffff; --folha-alta:#ffffff;
    --tinta:#141b2d; --tinta2:#4e5871; --tinta3:#7a849c;
    --borda:#d7dce9; --borda2:#e7ebf3;
    --marinho:#2b4bc8; --marinho-fundo:#131a2e;
    --ambar:#8f5c00; --ambar-fundo:#fff3d1;
    --m2:#2b4bc8;
  }
  /* o marinho do Bizu: Cálculo, para o cartão dele dentro de uma página de
     outra paleta. Variável de CSS herda, então basta pôr a classe no cartão. */
  .produto-calculo{
    --folha:#fffdf8; --marinho:#1b3b6f; --borda:#d8d3c5; --borda2:#e8e4d9;
    --m2:#1b4fa8;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--papel);color:var(--tinta);
    font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
  .wrap{width:min(1180px,100%);margin-inline:auto;padding-inline:20px}

  /* ---------- o fundo matemático ---------- */
  #fundo{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
  #fundo svg{position:absolute;overflow:visible}
  .eq{position:absolute;font-family:var(--mat);color:var(--marinho);opacity:0;
    white-space:nowrap;font-size:clamp(18px,2.4vw,34px);will-change:transform,opacity}
  .eq{transform:rotate(var(--giro,0deg))}
  /* onde cada cena do fundo mora. Vai aqui, e não num atributo de estilo no
     HTML, porque `style-src 'self'` bloqueia estilo escrito no documento. */
  .eq.cena-1{left:6%;top:18%;--giro:-4deg}
  .desenho.cena-1{left:6%;top:calc(18% + 58px);--giro:0deg}
  .eq.cena-2{left:64%;top:26%;--giro:3deg}
  .desenho.cena-2{left:64%;top:calc(26% + 58px);--giro:0deg}
  .eq.cena-3{left:8%;top:62%;--giro:2deg}
  .desenho.cena-3{left:8%;top:calc(62% + 58px);--giro:0deg}
  .eq.cena-4{left:70%;top:64%;--giro:-3deg}
  .desenho.cena-4{left:70%;top:calc(64% + 58px);--giro:0deg}
  .eq.cena-5{left:12%;top:34%;--giro:-2deg}
  .desenho.cena-5{left:12%;top:calc(34% + 58px);--giro:0deg}
  .eq.cena-6{left:66%;top:44%;--giro:4deg}
  .desenho.cena-6{left:66%;top:calc(44% + 58px);--giro:0deg}
  .eq sub{font-size:.6em;vertical-align:-.25em}
  .eq sup{font-size:.62em;vertical-align:.45em}
  .eq .frac{display:inline-flex;flex-direction:column;vertical-align:-.45em;
    text-align:center;margin-inline:.14em}
  .eq .frac b{font-weight:400;border-bottom:1px solid currentColor;padding:0 .2em .05em}
  .eq .frac i,.eq .italico{font-style:italic}
  .eq .frac i{padding-top:.05em}
  .desenho{position:absolute;opacity:0;will-change:transform,opacity}
  .desenho path,.desenho line,.desenho circle{fill:none;stroke:var(--marinho);
    stroke-width:1.4;vector-effect:non-scaling-stroke}
  .desenho .eixo{stroke:var(--tinta3);stroke-width:1}
  .desenho .curva{stroke:var(--m2)}
  .desenho .apoio{stroke:var(--m1);stroke-dasharray:4 5}
  .grao{position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.035;
    background-image:radial-gradient(circle at 1px 1px, var(--tinta) 1px, transparent 0);
    background-size:3px 3px;mix-blend-mode:multiply}
  .conteudo{position:relative;z-index:1}

  /* ---------- cabeçalho ---------- */
  .barra{position:sticky;top:0;z-index:50;background:var(--veu);
    backdrop-filter:saturate(1.1) blur(9px);border-bottom:1px solid var(--borda2)}
  .barra-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
    min-height:64px;padding-block:8px}
  .marca{display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit}
  .marca img{width:38px;height:38px;border-radius:9px;display:block;
    box-shadow:0 2px 8px -2px rgba(1,16,52,.4)}
  .marca-nome{display:block;font-family:var(--serif);font-size:18px;line-height:1.1;letter-spacing:-.01em}
  .marca-sub{display:block;font-size:11.5px;color:var(--tinta3);letter-spacing:.02em}
  .barra-acoes{display:flex;align-items:center;gap:10px}

  /* ---------- botões e selos de loja ---------- */
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
    min-height:52px;padding:0 24px;border-radius:10px;font-weight:600;font-size:16px;
    text-decoration:none;border:1.5px solid transparent;
    transition:transform .16s ease,box-shadow .16s ease}
  .btn:hover{transform:translateY(-1px)}
  .btn:focus-visible{outline:3px solid var(--m2);outline-offset:2px}
  .btn-1{background:var(--marinho);color:#fff;box-shadow:0 2px 0 rgba(1,16,52,.22)}
  .btn-2{background:var(--folha-alta);color:var(--marinho);border-color:var(--marinho)}
  .btn-peq{min-height:44px;padding:0 16px;font-size:15px}
  .botoes{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  /* as duas portas, uma por sistema. O selo de cada loja tem a MESMA altura de arte:
     o arquivo do Google foi recortado, porque o oficial vem com margem transparente. */
  .portas{display:flex;flex-wrap:wrap;gap:14px;margin:0}
  .porta{display:flex;flex-direction:column;gap:10px;padding:16px 18px 15px;
    border-radius:14px;border:1px solid var(--borda);background:var(--folha);
    min-width:min(310px,100%)}
  .porta-android{border-color:#c9d3e6;background:linear-gradient(180deg,#fdfdff,var(--folha))}
  .porta-topo{display:flex;align-items:center;gap:8px}
  .porta-sis{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
    color:var(--marinho)}
  .porta-passo{font-size:11px;color:var(--tinta3);letter-spacing:.02em}
  .porta-linha{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
  .porta p{margin:0;font-size:13px;line-height:1.5;color:var(--tinta2);max-width:38ch}
  .porta p.porta-nota{font-size:12px;color:var(--ambar);background:var(--ambar-fundo);
    border-radius:7px;padding:7px 10px;max-width:none}
  .selo-loja{display:inline-flex;align-items:center;text-decoration:none;
    transition:transform .16s ease}
  .selo-loja:hover{transform:translateY(-1px)}
  .selo-loja:focus-visible{outline:3px solid var(--m2);outline-offset:3px;border-radius:8px}
  .selo-loja img{display:block;height:46px;width:auto}
  .mais{font-size:20px;color:var(--tinta3);font-weight:300;line-height:1}

  /* ---------- a entrada ---------- */
  .topo{padding-block:56px 44px}
  .olho{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tinta3);
    font-weight:600;margin:0 0 18px}
  h1{font-family:var(--serif);font-weight:400;font-size:clamp(38px,6vw,68px);
    line-height:1.06;letter-spacing:-.015em;margin:0 0 20px;text-wrap:balance;max-width:16ch}
  .coluna{max-width:56ch}
  .lede{font-size:clamp(17px,2vw,20px);color:var(--tinta2);margin:0 0 26px}
  .aviso{font-size:12.5px;line-height:1.55;color:var(--tinta3);margin:0}
  .preco-linha{font-size:15px;color:var(--tinta2);margin:0 0 8px}
  .rodape-topo{display:flex;flex-direction:column;gap:8px;margin-top:22px;max-width:72ch}
  .preco-linha b{color:var(--tinta);font-weight:600}

  /* ---------- o livro ----------
     A virada é da StPageFlip 2.0.7 (MIT, sem dependência). Ela desenha a folha mole
     com um polígono de recorte e uma cópia da parte dobrada, que é o vinco que o
     rotateY à mão não tinha. Aqui embaixo só existe o que é NOSSO: a caixa que dá a
     largura, o cartão de papel dentro de cada página e a sombra da lombada. */
  .capitulo{position:relative;--folhas:6;--passo:64}
  .palco{display:flex;flex-direction:column;align-items:center;gap:16px;
    padding-block:30px}
  /* com o livro de pé o capítulo vira trilho de rolagem e o palco gruda nele */
  .js-livro .capitulo{height:calc((var(--folhas) * var(--passo) + 100) * 1svh)}
  .js-livro .palco{position:sticky;top:0;height:100svh;justify-content:center;
    overflow:hidden;padding-block:0}
  .palco-cabeca{text-align:center;padding-inline:20px}
  .palco-cabeca h2{font-family:var(--serif);font-weight:400;font-size:clamp(23px,3.2vw,34px);
    margin:0 0 6px;letter-spacing:-.01em}
  .palco-cabeca p{margin:0;color:var(--tinta2);font-size:15px}

  /* a caixa dá a largura E a altura, e a biblioteca encaixa o livro dentro dela:
     ela corta a folha pela altura do bloco quando a largura sobra. É por isso que
     autoSize fica desligado, e é o que faz o mesmo livro caber no computador (que
     sobra largura e falta altura) e no celular (que é o contrário). */
  .livro-caixa{position:relative;width:min(560px,100%)}
  .livro-flip{width:100%;display:grid;gap:20px}
  .js-livro .livro-caixa{width:min(1000px,94vw);
    filter:drop-shadow(0 24px 40px rgba(17,28,46,.26))}
  .js-livro .livro-flip{display:block;height:min(62svh,620px)}
  /* a ancoragem de rolagem do navegador PRECISA ser desligada aqui dentro: a
     biblioteca insere e remove uma cópia da folha a cada virada, e o Chrome
     compensa isso empurrando a rolagem da página, o que faz o livro andar
     sozinho enquanto o papel vira. Medido, não suposto. */
  .livro-flip, .livro-flip *{overflow-anchor:none}
  .livro-flip{min-width:0 !important;margin:0 auto}

  /* ---------- o CSS da StPageFlip ----------
     Copiado do page-flip.browser.js 2.0.7, palavra por palavra. A biblioteca
     injetava estas regras num <style> em tempo de execução, e `style-src
     'self'` bloqueia isso; então a injeção foi removida do arquivo dela (a
     única mudança nossa, anotada em lib/NOTICE.md) e as regras vieram para cá.

     `.sft__wrapper` está escrito assim no original, com o erro de digitação, e
     fica. Sem ele a regra pegaria, `.stf__wrapper` ganharia `position:relative`
     e `.stf__block` passaria a medir 100% de uma caixa de altura zero em vez
     dos 100% do `.livro-flip`, que é quem dá a altura do livro aqui. Consertar
     a grafia quebra o dimensionamento. */
  .stf__parent {
    position: relative;
    display: block;
    box-sizing: border-box;
    transform: translateZ(0);

    -ms-touch-action: pan-y;
    touch-action: pan-y;
  }

  .sft__wrapper {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  .stf__parent canvas {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
  }

  .stf__block {
    position: absolute;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    perspective: 2000px;
  }

  .stf__item {
    display: none;
    position: absolute;
    transform-style: preserve-3d;
  }

  .stf__outerShadow {
    position: absolute;
    left: 0;
    top: 0;
  }

  .stf__innerShadow {
    position: absolute;
    left: 0;
    top: 0;
  }

  .stf__hardShadow {
    position: absolute;
    left: 0;
    top: 0;
  }

  .stf__hardInnerShadow {
    position: absolute;
    left: 0;
    top: 0;
  }

  .stf__parent{-webkit-tap-highlight-color:transparent}
  /* o cartão de papel: a página que a biblioteca move é só geometria, e tudo o que
     se vê mora aqui dentro, senão o clip-path do vinco levaria a borda junto */
  .cartao{position:static;min-height:360px;border-radius:9px;overflow:hidden;
    background:var(--folha);border:1px solid var(--borda2);
    display:flex;flex-direction:column}
  .js-livro .cartao{position:absolute;inset:0;min-height:0;border-radius:0}
  .stf__item.--left .cartao{border-radius:7px 0 0 7px;
    box-shadow:inset -26px 0 32px -28px rgba(17,28,46,.55)}
  .stf__item.--right .cartao{border-radius:0 7px 7px 0;
    box-shadow:inset 26px 0 32px -28px rgba(17,28,46,.55)}
  .livro-flip.retrato .stf__item .cartao{border-radius:9px;box-shadow:none}
  .stf__item{cursor:default}

  .tela{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
    padding:18px 16px 10px;background:linear-gradient(180deg, rgba(27,59,111,.05), rgba(27,59,111,0) 38%)}
  .tela img{height:100%;width:auto;max-width:100%;object-fit:contain;border-radius:12px;
    box-shadow:0 14px 34px -18px rgba(1,16,52,.55), 0 2px 6px rgba(1,16,52,.12)}
  .rodape-folha{flex:0 0 auto;padding:9px 18px 13px;display:flex;align-items:center;
    justify-content:space-between;gap:10px;border-top:1px solid var(--borda2)}
  .num{font-family:var(--serif);font-size:13px;color:var(--tinta3);font-variant-numeric:tabular-nums}
  .modo{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta3)}

  .texto{flex:1;min-height:0;padding:clamp(20px,3.2vw,42px);display:flex;flex-direction:column;
    justify-content:center;gap:13px}
  .texto .selo{align-self:flex-start;font-size:11px;font-weight:700;letter-spacing:.12em;
    text-transform:uppercase;padding:5px 10px;border-radius:5px;background:var(--marinho);color:#fff}
  .texto h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.9vw,33px);
    line-height:1.14;margin:0;letter-spacing:-.01em;text-wrap:balance}
  .texto p{margin:0;color:var(--tinta2);font-size:clamp(14px,1.5vw,16px);max-width:40ch}
  .erro-caixa{background:var(--erro-fundo);border-left:3px solid var(--erro);
    border-radius:0 8px 8px 0;padding:12px 14px}
  .erro-caixa b{display:block;color:var(--erro);font-size:15px;margin-bottom:4px}
  .erro-caixa span{display:block;color:var(--tinta2);font-size:13.5px;line-height:1.5}
  .ambar-caixa{background:var(--ambar-fundo);border-left:3px solid var(--ambar);
    border-radius:0 8px 8px 0;padding:12px 14px;color:var(--tinta2);font-size:13.5px}
  .botoes-fim{margin-top:6px}
  .botoes-fim .btn{min-height:46px;padding:0 18px;font-size:15px}

  .regua{display:none;align-items:center;gap:10px;font-size:12px;color:var(--tinta3);
    flex-wrap:wrap;justify-content:center;padding-inline:20px}
  .js-livro .regua{display:flex}
  .regua-trilho{position:relative;width:min(300px,50vw);height:3px;border-radius:2px;background:var(--borda)}
  .regua-barra{position:absolute;left:0;top:0;bottom:0;width:0%;border-radius:2px;background:var(--marinho);
    transition:width .25s ease}
  .regua-num{font-variant-numeric:tabular-nums;min-width:52px}
  /* os dois botões só existem no arranjo B, em que a folha se vira com a mão */
  .setas{display:none;gap:8px}
  .arranjo-b .setas{display:flex}
  .seta{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--borda);
    background:var(--folha-alta);color:var(--marinho);font-size:17px;line-height:1;cursor:pointer;
    display:flex;align-items:center;justify-content:center;transition:transform .16s ease}
  .seta:hover{transform:translateY(-1px)}
  .seta:focus-visible{outline:3px solid var(--m2);outline-offset:2px}
  .seta[disabled]{opacity:.35;cursor:default;transform:none}


  /* ---------- a vitrine da inicial ----------
     Dois cartões, um por aplicativo, cada um com a paleta dele. São a peça
     principal da página: quem chega aqui está escolhendo entre dois, e a
     escolha tem de caber numa olhada. */
  .vitrine{list-style:none;margin:0;padding:0;display:grid;gap:20px;
    grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
  .produto-cartao{height:100%;display:flex;flex-direction:column;gap:14px;
    padding:clamp(20px,2.6vw,30px);border-radius:16px;border:1px solid var(--borda);
    background:var(--folha);box-shadow:0 18px 40px -30px rgba(17,28,46,.5)}
  .produto-cartao .cabeca{display:flex;align-items:center;gap:13px}
  .produto-cartao .cabeca img{width:54px;height:54px;border-radius:12px;display:block;
    box-shadow:0 3px 10px -3px rgba(1,16,52,.45)}
  .produto-cartao h3{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.5vw,27px);
    margin:0;letter-spacing:-.01em}
  .produto-cartao .tagline{margin:2px 0 0;font-size:12.5px;color:var(--tinta3)}
  .produto-cartao .resumo{margin:0;color:var(--tinta2);font-size:15px;line-height:1.55}
  .produto-cartao .abre{margin:0;font-size:13.5px;line-height:1.55;color:var(--tinta2);
    background:var(--papel);border-radius:10px;padding:13px 15px}
  .produto-cartao .abre strong{display:block;font-size:11px;letter-spacing:.12em;
    text-transform:uppercase;color:var(--marinho);margin-bottom:5px}
  .produto-cartao .loja-aviso{margin:0;font-size:12px;line-height:1.5;color:var(--tinta3)}
  /* dois por dois: com auto-fit os quatro números caem 3 e 1, e o quarto
     fica sozinho na linha de baixo parecendo sobra. */
  .produto-cartao .numeros{margin:0;grid-template-columns:repeat(2,1fr);gap:9px}
  .produto-cartao .numeros li{padding:11px 13px;background:var(--papel);border-color:var(--borda2)}
  .produto-cartao .numeros b{font-size:23px;margin-bottom:3px}
  .produto-cartao .numeros span{font-size:12px}
  .cartao-acoes{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto;padding-top:4px}

  /* ---------- o que os dois têm em comum ---------- */
  .pilares{list-style:none;margin:0;padding:0;display:grid;gap:14px;
    grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
  .pilares li{background:var(--folha);border:1px solid var(--borda2);border-radius:12px;
    padding:17px 19px;font-size:14px;line-height:1.55;color:var(--tinta2)}
  .pilares b{display:block;font-family:var(--serif);font-weight:400;font-size:18px;
    color:var(--tinta);margin-bottom:6px;letter-spacing:-.005em}

  /* ---------- o fecho ---------- */
  .fecho{background:var(--folha);border:1px solid var(--borda2);border-radius:16px;
    padding:clamp(22px,3vw,36px);margin-top:clamp(30px,4vw,48px)}
  .fecho h2{margin-top:0}
  .fecho p{max-width:62ch}


  /* ---------- as páginas de texto: privacidade, termos e suporte ----------
     Elas são prosa longa e não carregam uma linha de script: o livro e o fundo
     não têm o que fazer aqui. O que elas pegam da frente é a tipografia, a
     barra e o rodapé, para a pessoa que sai da página de produto e cai na
     política não achar que trocou de site. */
  .prosa{padding-block:clamp(34px,5vw,60px) clamp(40px,6vw,80px)}
  .prosa h1{font-size:clamp(30px,4.4vw,46px);max-width:24ch;margin-bottom:10px}
  .prosa .updated{font-size:13px;color:var(--tinta3);margin:0 0 30px}
  .prosa h2{font-family:var(--serif);font-weight:400;font-size:clamp(21px,2.8vw,30px);
    line-height:1.2;letter-spacing:-.01em;margin:38px 0 12px;max-width:28ch;text-wrap:balance}
  .prosa h3{font-family:var(--serif);font-weight:400;font-size:clamp(18px,2.2vw,22px);
    margin:26px 0 8px;letter-spacing:-.005em}
  .prosa p{margin:0 0 14px;max-width:68ch;color:var(--tinta2);font-size:16px;line-height:1.65}
  .prosa ul,.prosa ol{margin:0 0 18px;padding-left:22px;max-width:68ch;color:var(--tinta2)}
  .prosa li{margin-bottom:8px;line-height:1.62}
  .prosa strong{color:var(--tinta);font-weight:600}
  .prosa a{color:var(--marinho);text-decoration:underline;text-underline-offset:2px;
    text-decoration-thickness:1px}
  .prosa a:hover{text-decoration-thickness:2px}
  .prosa a:focus-visible{outline:3px solid var(--m2);outline-offset:2px;border-radius:3px}
  /* o FAQ do suporte é lista de definição: a pergunta é o termo e a resposta
     é a definição. Sem isto o navegador só indenta a resposta, e as duas ficam
     com a mesma cara e sem medida de leitura. */
  .prosa dl.faq{margin:0 0 18px;max-width:72ch}
  .prosa dl.faq dt{font-family:var(--serif);font-size:clamp(17px,2vw,20px);
    line-height:1.3;color:var(--tinta);margin:24px 0 6px;letter-spacing:-.005em}
  .prosa dl.faq dt:first-child{margin-top:0}
  .prosa dl.faq dd{margin:0;padding-left:16px;border-left:2px solid var(--borda);
    color:var(--tinta2);font-size:15.5px;line-height:1.62;max-width:68ch}
  .prosa code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
    background:var(--folha);border:1px solid var(--borda2);border-radius:5px;padding:1px 5px}
  .prosa .card{background:var(--folha);border:1px solid var(--borda2);border-radius:12px;
    padding:18px 20px;margin:0 0 18px;max-width:68ch}
  .prosa .card h3{margin-top:0}
  .prosa .card p:last-child{margin-bottom:0}

  /* ---------- a saída ---------- */
  .saida{padding-block:clamp(60px,9vw,110px)}
  .saida h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,4vw,44px);
    margin:0 0 14px;letter-spacing:-.012em;text-wrap:balance;max-width:20ch}
  .saida p{color:var(--tinta2);max-width:54ch;margin:0 0 26px}
  .numeros{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
    margin:0 0 30px;padding:0;list-style:none}
  .numeros li{background:var(--folha);border:1px solid var(--borda2);border-radius:10px;padding:16px 18px}
  .numeros b{display:block;font-family:var(--serif);font-size:30px;font-weight:400;line-height:1;
    margin-bottom:6px;font-variant-numeric:tabular-nums}
  .numeros span{font-size:13px;color:var(--tinta3)}

  /* ---------- rodapé: fundo escuro, tipografia miúda, colunas com respiro ---------- */
  .rodape{background:var(--marinho-fundo);color:#cdd6e8;margin-top:clamp(50px,7vw,90px);
    padding-block:clamp(44px,5.5vw,68px) 0;font-size:13px;line-height:1.6}
  .rodape-marca{display:flex;align-items:center;gap:10px;margin-bottom:26px}
  .rodape-marca img{width:30px;height:30px;border-radius:7px;display:block}
  .rodape-marca span{font-family:var(--serif);font-size:15px;color:#fff;letter-spacing:-.005em}
  .rodape-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));
    gap:30px 26px;padding-bottom:34px}
  .rodape h4{font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
    color:#7d8db0;margin:0 0 13px}
  .rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
  .rodape a{color:#cdd6e8;text-decoration:none;font-size:13px;
    border-bottom:1px solid transparent;padding-bottom:1px;transition:color .15s ease}
  .rodape a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.45)}
  .rodape a:focus-visible{outline:2px solid #8faee8;outline-offset:3px;border-radius:2px}
  .rodape-fim{border-top:1px solid rgba(255,255,255,.10);padding-block:18px 22px;
    display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:space-between;align-items:center;
    font-size:11.5px;color:#7d8db0}
  .rodape-fim p{margin:0;max-width:62ch}
  .rodape-legais{display:flex;flex-wrap:wrap;gap:16px}
  .rodape-legais a{font-size:11.5px;color:#7d8db0}
  .rodape-legais a:hover{color:#cdd6e8}


  @media (max-width:880px){
    .js-livro .livro-caixa{width:min(430px,92vw)}
    .js-livro .livro-flip{height:min(66svh,620px)}
    .barra-acoes .btn{display:none}
    .selo-loja img{height:46px}
    .texto{justify-content:flex-start;padding-top:24px}
    .regua-trilho{width:min(220px,44vw)}
  }
  /* o fundo matemático só se mexe com script. Com movimento reduzido ele
     nasce aceso e fica parado, que é o que foi pedido. */
  @media (prefers-reduced-motion:reduce){
    .eq,.desenho{opacity:.12}
  }