/* ===========================================================================
   Capas e páginas do ebook.

   A CAPA segue um padrão só: CARTAZ. Foto sangrando no topo, degradê
   dissolvendo a foto na faixa de baixo, selo de brinde no canto e o título em
   caixa alta pesada com os conectivos numa manuscrita menor — o efeito
   "SAÚDE *no* PRATO".

   Antes eram nove modelos sem parentesco entre si (bloco, editorial, arco,
   listra, moldura, diagonal…). Variedade não faltava; unidade, sim — pareciam
   nove produtos de nove empresas. Agora a variação mora em três eixos, e todos
   dentro da mesma linguagem: quanto a foto ocupa, se a faixa é clara ou
   escura, e qual das três famílias tipográficas o grupo usa.

   Tudo em `em` sobre uma caixa 1:1,5, para a capa escalar mudando só o
   `font-size` do contêiner — a mesma marcação serve de miniatura e de capa
   grande, sem código duplicado.
   =========================================================================== */

.capa{
  position:relative; width:100%; aspect-ratio:1/1.5; overflow:hidden;
  background:var(--cp-faixa); color:var(--cp-tinta);
  font-size:calc(var(--cp-escala, 1) * 16px);
  display:block;
}

/* As três famílias. O grupo do nicho escolhe — finanças e tecnologia pedem
   grotesca; beleza e vida, serifa; casa e esporte, condensada. */
.capa.f-grotesca   { --cp-display:"Archivo","Inter",system-ui,sans-serif; --cp-peso:800 }
.capa.f-serifa     { --cp-display:"Playfair Display",Georgia,serif;       --cp-peso:900 }
.capa.f-condensada { --cp-display:"Bebas Neue","Archivo",sans-serif;      --cp-peso:400 }

/* ------------------------------------------------------------------- foto */
.capa .foto{position:absolute; z-index:0; left:0; right:0; top:0; height:58%; overflow:hidden}
.capa .foto img{width:100%; height:100%; object-fit:cover; display:block}
/* O degradê é o que costura foto e faixa. Sem ele fica um corte reto e a capa
   vira duas imagens empilhadas. Vai até 92% para o encontro sumir de vez. */
.capa .foto::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%;
  background:linear-gradient(to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb, var(--cp-faixa) 55%, transparent) 55%,
    var(--cp-faixa) 92%);
}
/* Um véu do acento amarra a foto à paleta do livro — a mesma imagem num ebook
   de finanças e num de culinária não sai idêntica.

   Começou em 45% e lavava a foto: numa paleta clara o cachorro sumia atrás de
   uma névoa bege. `soft-light` já clareia o que é claro, então acento claro
   sobre foto clara soma duas vezes. 18% mantém o vínculo de cor sem apagar a
   imagem, e o véu entra pelo canto — não cobre o meio, que é onde o assunto
   costuma estar. */
.capa .foto::before{
  content:""; position:absolute; inset:0; z-index:1; mix-blend-mode:soft-light;
  background:linear-gradient(160deg,
    color-mix(in srgb, var(--cp-acento) 18%, transparent), transparent 45%);
}

/* ------------------------------------------------------------------- selo */
.capa .selo{
  position:absolute; z-index:3; top:1.15em; left:1.15em; width:9.6em;
  padding:.85em 1em .95em; border-radius:.3em .3em 1.9em .3em;
  background:linear-gradient(155deg, var(--cp-acento),
    color-mix(in srgb, var(--cp-acento) 68%, #000));
  color:var(--cp-selo-tinta,#fff);
  font-family:"Inter",system-ui,sans-serif; font-size:.6em; font-weight:500;
  line-height:1.28; text-align:left;
  box-shadow:0 .5em 1.2em -.6em rgba(0,0,0,.45);
}
.capa .selo b{font-weight:800}

/* ------------------------------------------------------------ faixa e texto */
.capa .baixo{
  position:absolute; z-index:2; left:0; right:0; bottom:0; top:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:1.4em 1.4em 1.6em;
}
.capa .etiqueta{
  display:block; font-family:"Inter",system-ui,sans-serif;
  font-size:.52em; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cp-tinta) 52%, transparent); margin-bottom:1em;
}
.capa .tit{display:block}
/* Palavra de conteúdo: display pesado, caixa alta, entrelinha muito fechada.
   O .82 de entrelinha é medida da referência, não estimativa — as linhas quase
   se tocam, e é isso que faz o bloco ler como UM objeto em vez de três frases
   empilhadas. */
.capa .tit .p{
  display:block; font-family:var(--cp-display); font-weight:var(--cp-peso);
  text-transform:uppercase; color:var(--cp-titulo);
  font-size:2.98em; line-height:.82; letter-spacing:-.042em;
}
/* Conectivo em manuscrita — o "no" de SAÚDE no PRATO.

   A COR É A TINTA, NÃO O ACENTO. Foi o que eu tinha errado: pintei tudo de
   acento e o bloco virou um monolito vermelho. Na referência as duas palavras
   grandes são acento e a do meio é quase preta — são DUAS cores, e o contraste
   entre elas é metade do efeito.

   As margens negativas encaixam a manuscrita no vão entre as duas linhas, em
   vez de empurrá-las para longe. */
.capa .tit .c{
  display:block; font-family:"Caveat","Segoe Script",cursive; font-weight:700;
  color:var(--cp-tinta); font-size:1.7em; line-height:.78;
  margin:-.1em 0 -.06em; letter-spacing:.005em;
}
.capa.f-condensada .tit .p{letter-spacing:.012em; line-height:.86}
.capa.f-serifa .tit .p{letter-spacing:-.018em}

/* DUAS LINHAS, E A TERCEIRA VIRA RETICÊNCIA.

   O bloco de baixo é centrado numa faixa de altura fixa e a capa recorta o que
   sobra: subtítulo de três linhas saía com a última cortada ao meio, letras
   pela metade encostando na borda — parecia defeito de impressão, e no modelo
   `noite`, que tem a faixa mais estreita, acontecia com frequência. O corte
   agora é escolhido: termina a frase com reticência, no lugar certo. */
.capa .sub{
  /* Só a forma prefixada: com a `line-clamp` sem prefixo na mesma regra, o
     Chrome resolve o `display` para `flow-root` e o parágrafo desaba a zero de
     altura — o subtítulo some da capa inteiro. Medido, não suposto. */
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;
  /* `overflow:hidden` zera o `min-height` automático deste item de flex, e sem
     `flex:none` o bloco de baixo — que é apertado por natureza — esmaga o
     subtítulo até zero de altura: ele some da capa em vez de ser cortado.
     Medido também. */
  overflow:hidden; flex:none;
  margin-top:1.15em; font-family:"Inter",system-ui,sans-serif;
  font-size:.75em; line-height:1.38; max-width:17em;
  color:color-mix(in srgb, var(--cp-tinta) 76%, transparent);
}
.capa .autor{
  display:block; margin-top:1.5em; font-family:"Inter",system-ui,sans-serif;
  font-size:.55em; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cp-tinta) 55%, transparent);
}

/* ---------------------------------------------------------------- modelos */
/* São três, e cada um mexe num eixo DIFERENTE. Nove variações da mesma capa
   não é repertório, é ruído — e foi o que os nove modelos antigos produziam.

     cheia   muda a PROPORÇÃO — foto pouco acima da metade, faixa clara larga
     noite   muda o TOM        — faixa escura, título claro, foto mais alta
     janela  muda o ENQUADRAMENTO — foto recuada com moldura de respiro

   Quem não tem foto cai em `pleno`, que não é escolha: é plano B. */

/* cheia — a proporção da referência.

   O `top` da faixa acompanha o fim da foto, não um valor solto. Estavam
   dessincronizados — foto até 57%, faixa começando em 50% — e a diferença não
   aparecia enquanto o título era pequeno. Ao crescer para o corpo da
   referência, o bloco centralizado passou a subir por cima da imagem. */
.capa.cheia .foto{height:57%}
.capa.cheia .baixo{top:57%}

/* noite — faixa escura. A foto sobe para 66% porque sobre fundo escuro o
   título precisa de menos área para pesar o mesmo. */
.capa.noite .foto{height:66%}
.capa.noite .baixo{top:66%}
.capa.noite .tit .p{font-size:2.64em}
.capa.noite .etiqueta{margin-bottom:.7em}
.capa.noite .foto::after{
  background:linear-gradient(to bottom, rgba(0,0,0,0), var(--cp-faixa) 92%);
}

/* janela — a foto recuada, com cantos arredondados. O recuo é o desenho: sem
   ele vira a `cheia` com outro nome. */
.capa.janela .foto{top:1.3em; left:1.3em; right:1.3em; height:46%; border-radius:.6em}
.capa.janela .foto::after{height:26%; border-radius:0 0 .6em .6em}
.capa.janela .baixo{top:50%}
.capa.janela .selo{top:2.3em; left:2.3em}

/* pleno — sem foto. O degradê ocupa o lugar dela, então a capa não fica um
   retângulo chapado quando o nicho não tem acervo. */
.capa.pleno{
  background:
    radial-gradient(120% 70% at 80% 0%, color-mix(in srgb, var(--cp-acento) 34%, transparent), transparent 62%),
    linear-gradient(165deg, color-mix(in srgb, var(--cp-acento) 14%, var(--cp-faixa)), var(--cp-faixa) 58%);
}
.capa.pleno .baixo{top:0; justify-content:center; padding-bottom:2.4em}
.capa.pleno .selo{top:1.4em; left:1.4em}

/* Os corpos abaixo, e o 2.98em lá em cima, são o desenho original menos 15%:
   com três palavras empilhadas o título vinha grande demais e comia a capa.
   Encolheram todos na mesma proporção, palavra de display e conectivo, para a
   composição continuar sendo a mesma — só menor. */

/* ------------------------------------------------- tamanho pelo título
   Vem depois dos modelos de propósito: mesma especificidade, e a última
   declaração é a que vale. Título de 9 e de 52 caracteres não podem sair no
   mesmo corpo. */
.capa.t-medio  .tit .p{font-size:2.51em}
.capa.t-longo  .tit .p{font-size:2em}
.capa.t-enorme .tit .p{font-size:1.57em}
.capa.t-medio  .tit .c{font-size:1.49em}
.capa.t-longo  .tit .c{font-size:1.23em}
.capa.t-enorme .tit .c{font-size:1.02em}
.capa.t-enorme .sub{font-size:.7em}

.pagina{position:relative;width:100%;aspect-ratio:1/1.41;background:#fff;color:#1b1f20;
  font-size:calc(var(--pg-escala, 1) * 16px);
  padding:2.4em 2.2em 2.9em;display:flex;flex-direction:column;overflow:hidden;
  font-family:"Inter",system-ui,sans-serif}

.pagina .cab{display:flex;align-items:baseline;justify-content:space-between;gap:1em;
  flex-wrap:nowrap;font-size:.58em;letter-spacing:.14em;text-transform:uppercase;color:#8b9698;
  padding-bottom:.9em;border-bottom:1px solid #e6ebeb;margin-bottom:1.5em}
.pagina .cab>span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pagina .cab>span:last-child{flex:none;white-space:nowrap}
.pagina.fim .marca{display:block}
.pagina .num{position:absolute;left:0;right:0;bottom:1.3em;text-align:center;
  font-size:.62em;color:#9aa4a5;font-variant-numeric:tabular-nums}
.pagina h2{font-family:"Jost",sans-serif;font-size:1.34em;font-weight:500;letter-spacing:-.02em;
  line-height:1.22;margin:0 0 .75em}
.pagina h3{font-size:.75em;font-weight:700;letter-spacing:.04em;margin:1.5em 0 .45em;color:#0c1416}

.pagina p{font-size:.66em;line-height:1.74;color:#2f3a3c;margin:0 0 .78em;text-align:left;hyphens:auto}
.pagina .citacao{margin:1.2em 0;padding-left:1em;border-left:2px solid #2f6b78;
  font-size:.85em;font-style:italic;line-height:1.55;color:#2f6b78}

.pagina .nota{margin-top:.6em;padding:.8em 1em;background:#f4f8f8;border-radius:.4em;
  font-size:.72em;line-height:1.6;color:#46565a}
.pagina ol.passos{margin:.4em 0 0;padding:0;list-style:none;counter-reset:pp}
.pagina ol.passos li{counter-increment:pp;position:relative;padding:0 0 .9em 2.1em;font-size:.78em;line-height:1.6}
.pagina ol.passos li::before{content:counter(pp);position:absolute;left:0;top:.05em;
  width:1.5em;height:1.5em;display:grid;place-items:center;border-radius:50%;
  background:#0c1416;color:#fff;font-size:.72em;font-weight:700}
.pagina ol.passos b{display:block;color:#0c1416;font-weight:600;margin-bottom:.15em}
.pagina ul.erros{margin:.4em 0 0;padding:0;list-style:none}
.pagina ul.erros li{position:relative;padding:0 0 .9em 1.5em;font-size:.78em;line-height:1.6}
.pagina ul.erros li::before{content:"✕";position:absolute;left:0;top:0;color:#b4342a;font-weight:700;font-size:.9em}
.pagina ul.erros b{display:block;color:#0c1416;font-weight:600;margin-bottom:.15em}

.pagina .foto-bloco{position:relative;width:100%;aspect-ratio:3/2;margin:.2em 0 .5em;
  overflow:hidden;border-radius:.3em;background:#e9eeef;isolation:isolate}
.pagina .foto-bloco img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(.92) contrast(1.04)}
.pagina .foto-bloco.duo::before{content:"";position:absolute;inset:0;z-index:1;
  background:var(--fg-fundo,#0c1416);mix-blend-mode:lighten;opacity:.5}
.pagina .foto-bloco.duo::after{content:"";position:absolute;inset:0;z-index:2;
  background:var(--fg-acento,#8fb3ba);mix-blend-mode:darken;opacity:.32}
.pagina.abertura .foto-bloco{aspect-ratio:16/9;margin:0 0 1.3em;border-radius:.25em}
.pagina.abertura .foto-bloco::before{content:"";position:absolute;inset:0;z-index:1;
  background:#0c1416;mix-blend-mode:lighten;opacity:.55}
.pagina.abertura .foto-bloco::after{content:"";position:absolute;inset:0;z-index:2;
  background:linear-gradient(transparent 35%,#0c1416);opacity:.8}

.fig{position:relative;width:100%;aspect-ratio:3/2;margin:.2em 0 1em;overflow:hidden;
  border-radius:.35em;background:var(--fg-fundo,#eef3f4);display:grid;place-items:center}
.fig svg.ico{position:relative;z-index:2;width:34%;height:auto;fill:none;
  stroke:var(--fg-tinta,#0c1416);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.fig .forma{position:absolute;z-index:1;background:var(--fg-acento,#8fb3ba)}

.fig.circulo .forma{width:58%;aspect-ratio:1;border-radius:50%}
.fig.arco .forma{width:104%;aspect-ratio:1;border-radius:50%;top:38%;left:-2%;position:absolute}
.fig.faixa .forma{left:0;right:0;top:38%;height:24%}
.fig.grade{background-image:radial-gradient(var(--fg-acento,#8fb3ba) 1px,transparent 1px);
  background-size:9px 9px}
.fig.grade .forma{display:none}
.fig.canto .forma{width:52%;height:100%;left:0;top:0;
  clip-path:polygon(0 0,100% 0,58% 100%,0 100%)}
.fig.moldurada .forma{inset:12%;position:absolute;background:none;border:1.5px solid var(--fg-acento,#8fb3ba)}
.fig.listras{background-image:repeating-linear-gradient(45deg,var(--fg-acento,#8fb3ba) 0 2px,transparent 2px 10px)}
.fig.listras .forma{width:52%;aspect-ratio:1;border-radius:50%;background:var(--fg-fundo,#eef3f4)}

.pagina.abertura .fig{aspect-ratio:1/1;width:44%;margin:0 0 1.4em;background:transparent}
.pagina.abertura .fig svg.ico{width:52%;stroke:var(--fg-tinta,#eef4f5)}

.pagina.abertura{justify-content:center;align-items:flex-start;background:#0c1416;color:#eef4f5}
.pagina.abertura .cap{font-size:.6em;letter-spacing:.24em;text-transform:uppercase;color:#8fb3ba;margin-bottom:1.4em}
.pagina.abertura h2{font-size:2em;font-weight:400;color:#fff;max-width:11em}
.pagina.abertura p{font-size:.82em;color:#a9c4c9;max-width:15em;text-align:left}
.pagina.abertura .fio{width:2.4em;height:2px;background:#8fb3ba;margin:1.4em 0}
.pagina.abertura .num{color:#5d7679}

.pagina .ex{padding:.7em .8em;border:1px solid #dde5e6;border-radius:.5em;background:#fafcfc;margin-bottom:.7em}
.pagina .ex .k{font-size:.56em;letter-spacing:.16em;text-transform:uppercase;color:#2f6b78;margin-bottom:.4em}
.pagina .ex b{display:block;font-size:.8em;font-weight:600;margin-bottom:.25em}
.pagina .ex p{font-size:.63em;line-height:1.52;margin:0;text-align:left}
.pagina .check{margin:0;padding:0;list-style:none}
.pagina .check li{display:flex;gap:.6em;align-items:flex-start;padding:.32em 0;font-size:.68em;
  line-height:1.45;border-bottom:1px solid #f0f4f4}
.pagina .check li:last-child{border-bottom:0}
.pagina .check+.check{margin-top:0}
.pagina .check .caixa{width:1em;height:1em;flex:none;margin-top:.15em;border:1.5px solid #b6c3c5;border-radius:.18em}

.pagina.rosto{justify-content:center;align-items:center;text-align:center}
.pagina.rosto h2{font-size:1.75em;font-weight:400;max-width:12em}
.pagina.rosto .sub{font-size:.82em;color:#5a6c71;max-width:14em;margin-top:.6em}
.pagina.rosto .autor{margin-top:2.4em;font-size:.62em;letter-spacing:.16em;text-transform:uppercase;color:#8b9698}
.pagina.sumario ol{margin:0;padding:0;list-style:none;counter-reset:su}
.pagina.sumario h2{margin-bottom:.55em}
.pagina .sumlinha{display:flex;align-items:baseline;gap:.6em;padding:.34em 0;font-size:.74em;
  line-height:1.4;border-bottom:1px dotted #dfe7e8}
.pagina .sumlinha .n{width:1.6em;flex:none;color:#2f6b78;font-weight:700;font-variant-numeric:tabular-nums}
.pagina .sumlinha .t{flex:1;color:#2f3a3c}
.pagina .legenda{margin:-.5em 0 1em;font-size:.66em;line-height:1.5;color:#8b9698;text-align:left}
.pagina .check{margin:0}
.pagina .check+.check li{border-top:0}
.pagina.fim{justify-content:center;align-items:center;text-align:center;background:#f4f8f8}
.pagina.fim .marca{font-family:"Jost",sans-serif;font-size:1.3em;font-weight:300;color:#0c1416}
.pagina.fim .marca i{font-style:normal;color:#2f6b78}
.pagina.fim p{text-align:center;font-size:.76em;color:#5a6c71;max-width:16em;margin-top:.8em}