/* ============================================================
   ZAMBEZE — o livro
   Paleta e tipografia definidas pela identidade da marca.
   ============================================================ */

:root {
  --marfim:   #F7F1E6;  /* fundo da página do livro */
  --carvao:   #262220;  /* texto principal */
  --indigo:   #2B3A67;  /* superfícies escuras, capa, cabeçalho */
  --terracota:#B75C2E;  /* ação primária */
  --ocre:     #D9A441;  /* selos e destaques pequenos (texto sempre carvão) */
  --vinho:    #7A2E2E;  /* ênfase secundária */
  --verde:    #55603C;  /* estados de apoio */
  --bege:     #E8DCC8;  /* superfícies secundárias */

  --papel-sombra: rgba(38, 34, 32, .16);

  --display: 'Ojuju', 'Trebuchet MS', system-ui, sans-serif;
  --corpo:   'Fraunces', Georgia, 'Times New Roman', serif;
  --ui:      'Work Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;

  --raio: 3px;
  --transicao-folha: 720ms;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

/* ------------------------------------------------------------
   CENÁRIO — pôr do sol de savana com geometria africana.
   Tudo desenhado em CSS/SVG aqui mesmo: nenhuma imagem externa,
   nenhum `filter` (que trava o Chrome nesta máquina).
   ------------------------------------------------------------ */

:root {
  --ceu-topo:  #2B120C;  /* alto do céu, quase noite */
  --ceu-meio:  #8C2F1A;  /* vermelho queimado */
  --ceu-baixo: #C4551F;  /* laranja do horizonte */
  --sol:       #E9A63C;
  --terra:     #170B07;  /* silhueta da savana */
}

body {
  font-family: var(--corpo);
  color: var(--carvao);
  /* Só o céu. Textura e cenário ficam na camada .cenario, que já é fixa —
     `background-attachment: fixed` aqui, com várias camadas, travava o Chrome. */
  background-color: var(--ceu-topo);
  background-image: linear-gradient(180deg,
      var(--ceu-topo) 0%,
      #5A1E12 22%,
      var(--ceu-meio) 44%,
      var(--ceu-baixo) 62%,
      #7C3218 82%,
      var(--ceu-topo) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 28px 16px 96px;
  position: relative;
}

/* camada decorativa: faixas geométricas e a silhueta da savana */
.cenario {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Nada de listras diagonais de 1px cobrindo a tela: são caríssimas de
     rasterizar e deixavam o Chrome sem fôlego. A geometria vem do friso,
     das colunas laterais e dos bichos. */
}

body > *:not(.cenario) { position: relative; z-index: 1; }

/* friso de triângulos no topo e na base, como borda de tecido */
.cenario__faixa {
  position: absolute;
  left: 0; right: 0;
  height: 14px;
  background-image:
    linear-gradient(135deg, var(--sol) 25%, transparent 25%),
    linear-gradient(225deg, var(--sol) 25%, transparent 25%),
    linear-gradient(45deg, #8C2F1A 25%, transparent 25%),
    linear-gradient(315deg, #8C2F1A 25%, transparent 25%);
  background-position: 0 0, 0 0, 14px 0, 14px 0;
  background-size: 28px 28px;
  background-repeat: repeat-x;
  opacity: .85;
}
.cenario__faixa--topo { top: 0; }
.cenario__faixa--base { bottom: 0; transform: scaleY(-1); }

/* colunas laterais de losangos, só quando há espaço de sobra */
.cenario__coluna {
  position: absolute;
  top: 0; bottom: 0;
  width: 46px;
  background-image:
    linear-gradient(45deg, rgba(233, 166, 60, .16) 25%, transparent 25%, transparent 75%, rgba(233, 166, 60, .16) 75%),
    linear-gradient(45deg, rgba(233, 166, 60, .16) 25%, transparent 25%, transparent 75%, rgba(233, 166, 60, .16) 75%);
  background-size: 34px 34px;
  background-position: 0 0, 17px 17px;
  opacity: .55;
}
.cenario__coluna--esq { left: 0; }
.cenario__coluna--dir { right: 0; }

@media (max-width: 1320px) { .cenario__coluna { display: none; } }

/* ---------- o sol ---------- */

.cenario__sol {
  position: absolute;
  /* fora do miolo, onde o livro não cobre — senão o sol some atrás dele */
  top: 14%;
  right: 4%;
  width: min(300px, 34vw);
  aspect-ratio: 1;
  border-radius: 50%;
  /* disco sólido no meio e brilho por gradiente — nada de filter:blur */
  background: radial-gradient(circle,
    #FFE0A0 0 20%,
    #FFC65C 27%,
    #F0A93E 34%,
    rgba(233, 166, 60, .5) 44%,
    rgba(233, 166, 60, .22) 58%,
    rgba(233, 166, 60, .08) 70%,
    transparent 78%);
}

/* BICHOS-INI — gerado por montar-bichos.mjs, não editar à mão */

/* Nuvens fofas: antes eram elipses achatadas, pareciam manchas. */
.cenario__nuvens {
  position: absolute;
  left: 0; right: 0;
  height: 150px;
  background-repeat: repeat-x;
  background-size: 900px 150px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='900' height='150' viewBox='0 0 900 150'%3E%3Cg fill='%23FFE7C4'%3E %3Cg transform='translate(10,26)'%3E%3Cpath d='M40 96 C28 96 20 87 20 76 C20 65 29 57 40 57 C44 42 58 32 74 34 C86 22 106 22 118 34 C136 30 152 42 154 60 C166 62 174 71 174 82 C174 90 168 96 158 96 Z'/%3E%3C/g%3E %3Cg transform='translate(250,64) scale(0.72)'%3E%3Cpath d='M40 96 C28 96 20 87 20 76 C20 65 29 57 40 57 C44 42 58 32 74 34 C86 22 106 22 118 34 C136 30 152 42 154 60 C166 62 174 71 174 82 C174 90 168 96 158 96 Z'/%3E%3C/g%3E %3Cg transform='translate(470,18) scale(1.18)'%3E%3Cpath d='M40 96 C28 96 20 87 20 76 C20 65 29 57 40 57 C44 42 58 32 74 34 C86 22 106 22 118 34 C136 30 152 42 154 60 C166 62 174 71 174 82 C174 90 168 96 158 96 Z'/%3E%3C/g%3E %3Cg transform='translate(700,58) scale(0.86)'%3E%3Cpath d='M40 96 C28 96 20 87 20 76 C20 65 29 57 40 57 C44 42 58 32 74 34 C86 22 106 22 118 34 C136 30 152 42 154 60 C166 62 174 71 174 82 C174 90 168 96 158 96 Z'/%3E%3C/g%3E %3C/g%3E%3C/svg%3E");
}
.cenario__nuvens--alta  { top: 7%;  opacity: .5; }
.cenario__nuvens--baixa { top: 25%; opacity: .32; background-position: -340px 0; }

/* Savana com acácias de alturas variadas, incluindo duas bem altas. */
.cenario__savana {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 250px;
  background-repeat: repeat-x;
  background-position: bottom center;
  background-size: auto 250px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='250' viewBox='0 0 760 250'%3E%3Cg fill='%23170B07'%3E %3Cpath d='M0 210 C110 200 184 217 284 209 C392 200 490 216 596 208 C672 202 722 210 760 206 L760 250 L0 250 Z'/%3E %3Cpath d='M92 211 L96 62 L104 62 L108 211 Z'/%3E %3Cpath d='M100 88 L58 68 L61 62 L102 80 Z'/%3E %3Cpath d='M102 82 L144 60 L147 66 L104 88 Z'/%3E %3Cellipse cx='100' cy='52' rx='48' ry='11'/%3E%3Cellipse cx='58' cy='63' rx='34' ry='9'/%3E %3Cellipse cx='144' cy='61' rx='31' ry='8'/%3E%3Cellipse cx='100' cy='40' rx='27' ry='8'/%3E %3Cpath d='M300 212 L303 104 L310 104 L313 212 Z'/%3E %3Cpath d='M306 126 L274 110 L277 105 L308 120 Z'/%3E %3Cellipse cx='306' cy='96' rx='38' ry='9'/%3E%3Cellipse cx='274' cy='106' rx='27' ry='7'/%3E %3Cellipse cx='338' cy='106' rx='24' ry='6'/%3E%3Cellipse cx='306' cy='86' rx='21' ry='6'/%3E %3Cpath d='M470 212 L473 148 L479 148 L482 212 Z'/%3E %3Cellipse cx='476' cy='140' rx='30' ry='8'/%3E%3Cellipse cx='452' cy='148' rx='21' ry='6'/%3E %3Cellipse cx='500' cy='148' rx='19' ry='5'/%3E %3Cpath d='M628 213 L630 170 L635 170 L637 213 Z'/%3E %3Cellipse cx='632' cy='164' rx='22' ry='6'/%3E%3Cellipse cx='614' cy='170' rx='16' ry='5'/%3E %3Cpath d='M196 213 L198 178 L202 178 L204 213 Z'/%3E %3Cellipse cx='200' cy='172' rx='18' ry='6'/%3E %3Cellipse cx='700' cy='202' rx='20' ry='10'/%3E%3Cellipse cx='390' cy='204' rx='15' ry='8'/%3E %3Cellipse cx='550' cy='205' rx='12' ry='7'/%3E%3Cellipse cx='240' cy='206' rx='11' ry='6'/%3E %3C/g%3E%3C/svg%3E");
}

/* Bichos: patas na base do viewBox, apoiados na linha do chão. */
.bicho {
  position: absolute;
  bottom: 44px;
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: contain;
}

.bicho--elefante {
  right: calc(50% + 436px);
  width: 124px; height: 134px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 409 443'%3E%3Cpath fill='%23140908' d='M320 0L326 3L331 9L322 17L319 26L319 38L322 49L329 61L352 91L362 114L364 131L359 164L368 165L372 160L383 143L389 128L387 141L381 155L382 164L390 164L401 149L408 133L409 137L399 161L382 181L361 193L347 197L331 198L331 206L346 216L348 220L334 224L323 233L304 239L303 247L311 256L310 260L301 265L287 267L285 272L276 286L270 310L270 320L274 321L279 346L287 409L286 421L290 431L298 438L298 442L261 443L262 419L251 388L243 388L240 405L236 415L236 429L242 436L243 442L207 443L206 434L210 425L211 416L211 362L208 353L200 353L186 360L166 366L140 369L124 393L124 412L126 422L131 432L136 436L138 443L97 442L98 414L94 389L85 389L76 401L69 415L68 432L73 439L73 443L37 442L37 432L53 395L57 379L58 323L49 323L38 348L25 365L23 372L17 378L8 379L1 382L0 380L4 370L4 365L8 362L13 360L25 360L28 356L37 339L49 303L59 280L73 259L100 235L115 227L130 223L177 224L194 220L209 212L216 212L228 201L239 197L247 180L259 169L276 163L321 154L323 151L326 151L331 146L331 143L334 141L334 138L337 136L337 132L339 130L340 113L335 99L310 59L306 42L308 23L320 1Z'/%3E%3C/svg%3E");
}

.bicho--girafa {
  right: calc(50% + 574px);
  width: 126px; height: 165px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 85.4 112.1'%3E%3Cpath fill='%23140908' d='M71.9,0c0.6-0.1,0.6,0,1.2,1.2s1.4,4.2,1.9,4.2S76,5.2,76.7,5c0.7-0.2,1.2-0.2,1.5,0.4s0.4,1.5,0.7,1.8s0.7,0.4,0.9,0.6 c0.2,0.2,0,0.6,0.4,0.9s0.6,1.2,1.2,1.7c0.6,0.5,1.2,1.1,1.8,1.6c0.6,0.6,1,0.7,1.2,1.2c0.2,0.5,0.1,1.1,0.2,1.3s0.6,0.6,0.7,0.9 c0.1,0.3-0.2,0.6-1.1,0.7c-0.8,0.2-2.1,0.3-2.7,0c-0.6-0.3-2.5-0.9-3-0.9s-2.7,0.4-3.2,0.2c-0.5-0.2-1.7-0.6-2.1-1.2s-1-0.7-1.7-0.1 c-0.7,0.6-1.5,1.7-2.5,4.4s-2.8,6.2-4.1,8.4c-1.3,2.2-4.7,8-6.7,10.4c-2,2.4-5.1,5.9-6.7,7.5c-1.6,1.7-4.8,5.2-5.4,5.6 c-0.5,0.4-0.7,0.6-0.7,0.8s-0.2,2,0,2.3s0.6,2.1,1.3,3c0.8,1,1.3,1.9,1,3.4s-1.7,4.3-2,5.5s-1.3,2.1-1,3.7c0.3,1.6,1.6,6.6,2.2,8.5 s2.4,7.7,2.8,8.3s1.3,1,1.4,1.5s-0.2,1.3,0,2.4s1.2,9.6,1.5,11.3s0.8,5,1.6,6.7s0.8,2,1.2,2.6s1.4,1.4,1.4,1.9h-4.1 c0,0,0.2-0.8,0-1.3c-0.2-0.4-1.3-1.1-1.5-1.3s-0.3-2.2-0.4-3.2s-1.4-8.3-2-10.5c-0.6-2.2-1.4-5-1.8-5.5s-1.1-0.6-1.1-0.9 s0.1-1.1,0-1.8S40.7,77,40.5,76.8S40,76.5,39.9,77s-1.9,6.4-2.2,8.1c-0.4,1.7-0.4,2.4-0.3,3.4s-0.4,2-0.8,2.7s-0.9,3.6-1.1,4.9 c-0.2,1.3-1.3,9.5-1.3,10.4s0,2.9,0.4,3.4s1.2,2.2,1.2,2.2h-3.2c0,0,0.1-1.3-0.6-1.5c-0.7-0.3-1.3-1-1-2.7s0.8-5,1.2-7.4 c0.4-2.5,0.5-9.3,0.4-10.3s-0.4-1.8,0-3.2s1.3-6.2,1.8-7.7S35,73.5,35,73s-1.1-0.8-2.1-0.8c-1.1-0.1-2.9,0.8-4.6,0.9s-6-0.1-7.4-0.8 c-1.4-0.6-2.5-1.5-2.7-1.4c-0.3,0.1,0.1,1.3-0.4,2.6c-0.5,1.3-2.1,5.5-2.7,7.1c-0.6,1.6-1.5,5.1-1.8,7.8s-0.7,9.7,0,14.2 c0.7,4.5,0.7,6.4,1.3,7s1.8,2.5,1.8,2.5H13c0,0-0.5-1.2-1-1.3c-0.4-0.1-1.1-0.6-1.1-1.1s-0.1-7.4-0.2-9s-1-9.6-1.3-10.5 S9,88.9,8.8,88.9s-1.8,2.7-2.2,5.5c-0.5,2.8-1.7,7.4-1.8,8.6s-0.5,4.6-0.5,5.2s0,1.8,0,2.1s1.3,1.8,1.3,1.8H2c0,0,0.2-1.3-0.4-1.6 s-1.4-0.7-0.5-3.3s2.3-9.7,2.5-12.1c0.2-2.5,0.2-7.3-0.1-8s-0.7-1.5-0.1-2.4s2.1-4.6,2.5-5.8c0.4-1.2,0.6-5.7,0.3-7.6 c-0.4-1.8-1.1-3.9-1.1-5.2s0.6-2.9,0.1-2.9S4,64.6,4,65.3s-0.5,2-0.5,2.9c0,0.8-0.1,4.6,0.1,6.9c0.2,2.3,0,6.3-1.1,8.1 c-1.1,1.8-1.8,1.7-1.8,1.7s0.7-2.5,0.5-4s-1.6-4-1.1-4.7s1.8-1.7,2-2.5S2,66.7,2.5,63.9s0.2-4.6,2.7-6.9c2.5-2.2,3.9-3.2,4.1-3.9 s1.1-1.9,1.8-2s4.6-1.6,7.1-2.6s4.7-1.8,6.5-3.3c1.8-1.5,4.5-5.7,5.5-6.3s1.7-1.3,1.7-1.3l-0.1-1.1l0.5-0.1l0.4-0.4H33l0.7-0.4 l0.5,0.1l0.6-0.4l0.6,0.1l0.6-0.4l0.3,0.2l0.4-0.2l0.7,0V35l0.6,0.2l0.2-0.3l0.5,0.1l0.2-0.5l0.6,0.1l0.3-0.3l0.5,0.1l0.2-0.5 l0.8,0.1l0-0.4l0.5,0l0-0.5l0.5,0l0-0.5l0.7,0l0.1-0.4l0.5,0l0.1-0.5l0.6,0l0.1-0.4h0.4l0-0.3l0.7-0.1v-0.4l0.6,0l0-0.5l0.6,0.1 v-0.5l0.6,0.1v-0.5H48l0-0.5l0.6-0.1l0-0.5l0.4,0v-0.5h0.7l0.1-0.5l0.7,0.1l0-0.6l0.4-0.1l0-0.4l0.4-0.1l0.1-0.4l0.5,0l0-0.5 l0.6-0.1l0-0.6l0.5,0.1v-0.5l0.5-0.1l0.1-0.6l0.4,0.1v-0.5h0.5l0-0.6h0.5l0.1-0.6l0.4,0l0.2-0.6l0.4,0.1l0-0.5l0.4,0.1v-0.6h0.5 l0-0.5l0.4-0.1v-0.3l0.5,0v-0.5l0.4-0.1v-0.6l0.6-0.3l0-0.5l0.4,0l0.1-0.6l0.5,0v-0.5l0.4,0l0.1-0.5h0.2v-0.5l0.4,0l0-0.5h0.4l0-0.5 l0.4-0.1l0-0.6l0.3,0l0-0.5H62v-0.5l0.5-0.1l0-0.5l0.2-0.3v-0.4l0.4-0.1l-0.1-0.6l0.6-0.1v-0.7l0.5,0l0.1-0.4l0.5-0.3V9.2l0.4-0.1 l0.1-0.5l0.4,0V8.2l0.5-0.1l0.1-0.5l0.3-0.1L66.9,7l0.5,0l0.1-0.4l0.5,0c0,0-0.1-1,0.1-1.8c0,0,0.5-0.1,1.2-0.1 c0.5,0,1.2,0.3,1.2,0.3c0.2,0.2,0.5,0,0.9,0S71.2,0.1,71.9,0z'/%3E%3C/svg%3E");
}

.bicho--suricato {
  right: calc(50% + 712px);
  width: 42px; height: 81px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 250'%3E%3Cg fill='%23140908'%3E %3Cpath d='M68 12 C53 12 42 24 42 42 C42 52 45 60 50 65 C54 68 54 72 52 76 C47 88 45 100 45 112 C45 144 50 178 58 204 C62 216 60 228 56 240 L84 240 C80 228 78 216 82 204 C90 178 95 144 95 112 C95 100 93 88 88 76 C86 72 86 68 90 65 C98 60 108 53 108 45 C108 38 100 36 92 41 C89 30 83 20 75 14 C73 12 70 12 68 12 Z'/%3E %3Cpath d='M44 26 C32 18 34 6 47 13 C51 18 49 24 44 26 Z'/%3E %3Cpath d='M78 18 C90 10 98 18 90 27 C85 31 79 26 78 18 Z'/%3E %3Cpath d='M52 88 C44 96 42 112 46 124 L54 120 C51 110 51 98 58 92 Z'/%3E %3Cpath d='M92 168 C116 186 128 216 120 250 L108 250 C115 218 106 194 84 178 Z'/%3E %3Cpath d='M52 240 C42 240 36 244 38 250 L62 250 C62 244 58 240 52 240 Z'/%3E %3Cpath d='M86 240 C96 240 102 244 100 250 L76 250 C76 244 80 240 86 240 Z'/%3E %3C/g%3E%3C/svg%3E");
}

.bicho--leao {
  left: calc(50% + 436px);
  width: 150px; height: 137px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 509 465'%3E%3Cpath fill='%23140908' d='M91 1L96 0L97 3L127 2L148 6L150 11L169 16L187 27L189 30L186 31L186 35L204 49L216 63L215 68L229 81L241 97L255 127L255 129L252 130L252 136L259 152L270 163L293 175L329 185L357 186L378 189L396 197L422 218L432 222L446 223L456 221L465 216L473 208L477 201L479 192L478 177L468 161L452 150L434 146L423 146L408 154L396 153L392 151L391 145L379 138L378 133L361 124L350 123L349 122L358 119L380 119L381 117L391 120L398 119L418 135L426 139L448 141L458 144L478 158L487 171L491 183L492 196L487 216L481 225L466 238L450 243L434 242L433 249L441 268L448 294L452 319L459 338L466 349L473 355L483 360L487 366L492 405L494 408L499 433L509 450L508 461L503 465L458 465L454 463L449 459L449 453L459 441L469 439L464 410L457 392L453 387L435 379L418 368L393 345L388 337L384 337L381 349L381 361L387 372L402 388L403 396L401 400L355 463L350 465L307 465L301 460L301 455L306 448L313 442L321 439L336 441L352 421L357 410L358 399L334 379L317 356L307 334L304 321L304 310L300 309L291 315L280 329L278 324L274 323L269 332L268 339L264 328L265 317L260 317L250 322L233 323L233 337L226 369L225 385L227 396L235 410L236 416L233 427L231 423L227 423L223 428L221 434L222 458L219 463L215 465L164 465L157 458L158 454L172 439L191 438L193 431L193 413L188 391L172 346L167 347L166 357L144 387L140 399L142 412L141 424L135 433L134 426L130 426L125 432L121 440L120 455L118 459L112 465L63 465L58 462L57 454L69 439L89 438L94 430L104 389L110 311L106 302L102 301L98 313L95 316L94 305L88 283L87 267L83 266L75 275L77 270L77 252L65 227L64 220L60 219L58 221L59 240L53 234L46 220L45 194L41 193L40 178L43 166L51 150L52 142L48 141L33 153L26 153L19 148L16 124L20 123L20 119L10 111L6 99L0 92L0 87L31 67L34 64L35 57L40 51L50 47L58 41L58 16L60 14L66 15L75 6L83 2L91 1Z'/%3E%3C/svg%3E");
}

.bicho--javali {
  left: calc(50% + 600px);
  width: 116px; height: 75px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='60 127 380 246'%3E%3Cg transform='matrix(0.6070236,0,0,0.60283352,-12.158338,-7.6158688)'%3E%3Cpath fill='%23140908' d='m 213.89723,272.33639 c -2.45295,-1.35476 -4.62037,-2.94458 -4.81649,-3.53293 -0.66364,-1.99094 9.34455,-6.17081 14.77527,-6.17081 7.5521,0 16.00113,4.09011 16.00113,7.74602 -2.39387,4.21366 -5.54972,10.73307 -10.38492,12.25398 -6.21597,-1.02246 -10.26982,-7.06442 -15.57499,-10.29626 z m 401.48699,356.3816 c -0.8576,-3.71191 2.71797,-6.42006 2.99857,-9.89302 -0.75033,-0.75034 -7.52565,5.89281 -7.52565,7.37885 0,1.3107 -5.66067,2.75658 -7.16125,1.82917 -1.35651,-0.83837 -0.0467,-5.98659 3.15493,-12.40034 2.37708,-5.0144 4.2663,-10.15039 7.17548,-14.8932 2.79099,-4.36811 2.93082,-5.09901 2.69891,-14.1068 -0.21091,-8.19247 0.1356,-10.58487 2.51762,-17.3822 7.35911,-17.37609 0.71923,-45.83935 -10.81829,-53.71053 -1.96207,-1.15765 -3.5674,-2.46041 -3.5674,-2.89502 0,-1.27614 -14.09073,-7.59749 -20.03532,-8.9882 -3.00557,-0.70314 -6.13968,-1.83931 -6.96468,-2.52482 -1.86062,-1.54602 -6.8595,-3.16353 -13.82964,-4.47493 -12.68099,-2.78942 -23.88495,-9.61539 -32.13488,-19.5243 -36.676,0.21805 -73.49451,0.0767 -110.03548,3.54194 l -23.91676,0.45806 -4.79162,4.61039 c -7.20539,7.85659 -20.41355,7.22426 -30.79162,8.97482 -12.86671,1.88241 -26.15436,1.29689 -37.2413,8.93932 -1.23272,0.96229 -3.93272,2.06043 -6,2.44031 -7.11148,1.30677 -16.07158,6.62222 -24.32101,14.42809 -7.88771,7.4636 -8.05792,7.72669 -9.02523,13.94947 -0.73744,6.85787 -5.16098,12.08693 -9.14475,17.38665 l -2.42433,-2.61453 c -3.08241,-3.32425 -4.15206,-3.29482 -4.92461,0.13548 -2.72468,12.09829 -4.64648,16.27771 -9.90109,21.53232 -9.69251,7.51122 -22.82434,10.69625 -30.51604,6.76781 2.69573,-6.31996 7.50293,-11.30278 10.80561,-17.30013 0.95462,-1.992 -3.20297,-0.30705 -9.25309,3.75 -6.41665,4.30283 -10.76327,5.5887 -12.01967,3.55581 8.34211,-25.22199 31.14188,-45.85491 50.96551,-62.34936 6.50836,-5.7027 18.36269,-14.52458 20.21295,-22.32684 -8.91657,-0.16895 -15.22436,7.7432 -23.44837,10.30798 -12.80513,3.34388 -19.61908,9.27733 -24.0396,20.93318 -3.14188,8.28435 -7.28218,11.96485 -12.23573,10.87687 -3.25005,-0.71383 -4.20356,0.5018 -6.53456,8.33093 -4.73536,13.37347 -17.12535,22.70227 -30.87458,24.84618 -5.91662,0.5525 -6.58011,0.43136 -6.58011,-1.2014 1.50639,-5.48151 6.44265,-9.46995 7.55397,-15.25271 -3.8202,1.90149 -6.68151,5.28275 -10.77928,6.77936 -1.60732,0 -1.77312,-0.51868 -1.19871,-3.75 2.38926,-10.9549 8.53822,-20.42344 15.71663,-28.87635 8.07173,-5.48192 12.7848,-19.67495 18.94196,-22.37365 11.14318,-4.21097 17.97559,-15.42494 24.82999,-24.59384 5.39844,-7.84636 8.95419,-9.75843 32.29212,-17.36476 8.55456,-2.78811 12.42567,-5.06689 15.72968,-9.25947 4.31397,-5.47416 5.11481,-7.63173 4.40099,-11.85679 -0.73304,-4.33887 -2.70872,-5.14478 -4.71942,-1.92514 -1.8554,2.97097 -3.01009,2.52218 -8.36192,-3.25 -6.24389,-6.73431 -13.00038,-10.49983 -20.24296,-11.28178 -20.37039,0.39379 -38.748,9.12463 -58.97767,11.13116 -8.81297,0.65978 -9.86317,0.51808 -19.5,-2.63108 -9.14373,-2.98801 -18.57246,-8.17073 -18.65446,-10.25384 -0.0598,-1.51855 9.16999,-4.70757 14.5619,-5.03135 7.83743,-0.47063 8.5257,-1.69525 3.87185,-6.88917 -5.52807,-6.16959 -9.7389,-9.75998 -11.46467,-9.7754 -6.7699,2.83834 -12.03517,7.19632 -19.65718,7.29443 -8.10304,-0.10521 -14.11428,-3.13854 -20.73241,-10.4618 -5.59235,-6.18817 -10.61916,-15.17946 -10.59509,-18.95108 0.0291,-4.55619 1.16934,-5.13454 9.61075,-4.87454 10.50337,0.3235 9.84619,0.49821 14.64627,-3.89376 5.81615,-5.32164 18.20033,-13.08236 22.04922,-13.81746 31.52639,-12.9652 56.75579,-50.46534 78.66199,-74.929 -0.0332,-3.80767 -4.48174,-9.85569 -9.10981,-12.38533 -11.68644,-6.38765 -13.75012,-9.86966 -7.89819,-13.32648 3.25654,-1.92369 21.59542,-2.46061 22.19898,-0.64994 0.18765,0.56296 1.92953,1.28133 3.87084,1.59636 3.39745,0.55133 3.6898,0.34449 7.80489,-5.52197 3.74747,-5.34239 6.67246,-8.09797 8.59582,-8.09797 0.4324,2.65351 -0.52404,5.44416 0.20259,8 0.49735,0 4.04236,-2.51114 7.8778,-5.5803 11.02921,-8.82572 13.1014,-9.28348 11.85095,-2.61798 l -0.68395,3.64575 c 8.76588,-5.4601 19.2704,-11.30307 29.30973,-11.94549 0.89272,4.24074 -4.56679,8.7968 -2.18554,12.49802 13.61007,-3.75994 27.45105,-10.51046 41.85345,-9.66222 -11.57975,13.68361 10.29533,4.75107 23.53905,4.87417 10.96596,0.34002 11.79702,1.46141 4.59433,6.19934 -14.68527,7.72187 0.60394,6.24828 8.94551,5.38905 26.24942,-0.004 36.61163,1.29575 38.96577,4.88862 2.73795,3.43914 -3.74978,6.64047 2.53423,7.31026 11.98035,0.66049 29.26107,4.75059 31.28215,7.57279 4.50676,0.84547 4.37721,1.92342 -0.53215,4.42799 -2.2,1.12236 -4,2.39583 -4,2.82994 0,0.43412 2.8125,1.33408 6.25,1.99992 10.48437,1.66161 20.96871,4.70174 29.75,10.87921 -2.16176,2.18749 -5.50272,2.90233 -7.71799,4.90628 49.16466,9.62606 91.99087,34.50627 134.71799,59.15622 10.78509,6.45195 20.45203,14.51983 23.15773,19.32708 5.7464,10.2097 16.25507,13.29395 28.47797,8.35814 9.42471,-3.80585 20.02949,-4.44131 26.59816,-1.59381 8.25885,4.29281 14.71599,11.59394 19.26614,19.63702 l 0.10133,22 c 0.10911,23.68851 0.4804,25.9296 5.75991,34.76599 4.32861,7.24487 2.0415,12.12293 -4.12481,8.7976 -0.95504,-0.51503 -5.0361,-2.17571 -9.06904,-3.6904 -10.52595,-3.56011 -16.85817,-12.70825 -18.17234,-23.61548 0.003,-1.79069 -1.03655,-3.67027 -2.99645,-5.41654 -7.11156,-7.558 -5.82978,-14.41952 -3.69543,-22.27381 2.11175,-5.82229 2.86413,-11.57168 0.2614,-15.771 -8.80603,2.11627 -16.9302,4.73257 -31.38877,2.70364 -5.77868,37.20445 -13.9303,77.60278 33.38016,84.58204 6.7406,0.47629 11.82619,2.53498 13.79527,5.58443 0.82873,1.28344 2.84992,5.70853 4.49153,9.83353 7.4352,18.68305 21.16049,47.62894 25.13103,53 3.05128,4.12754 4.47434,6.93813 6.51922,12.87573 2.47191,7.17748 2.09438,8.79279 -2.24301,9.59694 -4.35618,0.80764 -9.79912,3.90998 -10.62196,6.05425 1.2496,10.3353 6.25009,13.08394 3.93323,23.47453 -1.67765,8.38868 -8.97096,20.99855 -12.14516,20.99855 -0.74059,0 -2.92092,1.38235 -4.84519,3.07188 -3.26274,2.86472 -3.68657,2.98035 -6.2848,1.71472 -2.73709,-1.33328 -2.78054,-1.49292 -2.46905,-9.07188 0.25515,-6.2084 0.0348,-7.71472 -1.12868,-7.71472 -1.49684,0 -2.37976,1.82754 -5.19351,10.75 -1.6287,5.16467 -3.24699,6.34811 -6.13257,4.48469 -3.54851,-6.42549 -5.32733,-13.80872 -7.79025,-20.73469 -7.14013,-16.30955 1.37252,-29.1712 11.39166,-42.1889 -3.30217,-13.94483 -7.55079,-28.07045 -16.61688,-39.42054 -3.85486,-3.5334 -8.99094,-5.89056 -12.83507,-5.89056 -10.51347,-1.70724 -20.13149,-6.84498 -30.47997,-9.11967 4.10893,7.09375 6.08413,15.20905 9.0779,22.82656 4.99035,10.99735 2.6875,23.65099 6.95855,34.82643 2.95297,6.26733 1.67609,9.72477 -5.66284,15.33347 -4.0891,3.12506 -4.40537,3.69946 -4.40491,8 1.04466,8.01407 4.03711,15.11488 3.838,23.3157 -0.41699,9.22675 -1.6735,11.26554 -11.08709,17.9896 -6.07507,4.33939 -7.11054,4.72179 -14.54068,5.36993 -7.61327,0.66411 -8.03287,0.59373 -8.68365,-1.45668 z M 220.29204,382.6079 c -3.44922,-1.31139 -20.14182,-1.25848 -20.96067,0.0664 -0.72826,1.17836 5.46485,9.87979 7.06567,9.92739 4.74674,-0.32609 21.93258,-4.74503 13.895,-9.99383 z'/%3E%3C/g%3E%3C/svg%3E");
}

/* Cada bicho só aparece quando cabe inteiro ao lado do livro.
   Conta: 430 (meio livro) + distância + largura <= metade da tela. */
@media (max-width: 1507px) { .bicho--suricato { display: none; } }
@media (max-width: 1431px) { .bicho--javali   { display: none; } }
@media (max-width: 1399px) { .bicho--girafa   { display: none; } }
@media (max-width: 1171px) { .bicho--leao     { display: none; } }
@media (max-width: 1119px) { .bicho--elefante { display: none; } }

/* Abaixo de 1024 o livro vira coluna estreita e sobra borda de novo. */
@media (max-width: 1023px) {
  .bicho--elefante { display: block; right: auto; left: 4px;  width: 104px; height: 112px; }
  .bicho--leao     { display: block; left: auto;  right: 4px; width: 122px; height: 111px; }
  .cenario__sol { width: 190px; top: 6%; right: 2%; }
  .cenario__savana { height: 170px; background-size: auto 170px; }
}

/* No celular o livro ocupa a largura toda. */
@media (max-width: 700px) {
  .bicho { display: none; }
  .cenario__sol { width: 140px; }
  .cenario__savana { height: 120px; background-size: auto 120px; }
}
/* BICHOS-FIM */

/* ---------- utilitários ---------- */

.oculto { display: none !important; }

.so-leitor-de-tela {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--ocre);
  outline-offset: 3px;
  border-radius: var(--raio);
}

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

.marca {
  text-align: center;
  margin-bottom: 20px;
  color: var(--marfim);
}

.marca__nome {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 46px);
  letter-spacing: .16em;
  margin: 0;
  line-height: 1;
}

.marca__linha {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .22em;
  opacity: .72;
  margin: 8px 0 0;
}

/* ---------- o livro ---------- */

.livro {
  --largura-pagina: 430px;
  --altura-pagina: 573px; /* proporção 3:4 */
  position: relative;
  width: calc(var(--largura-pagina) * 2);
  height: var(--altura-pagina);
  perspective: 2400px;
  perspective-origin: 50% 40%;
  /* Sombra vai por box-shadow nas páginas, não por filter:drop-shadow no livro.
     drop-shadow sobre conteúdo com textura + 3D trava o compositor do Chrome. */
  box-shadow: 0 26px 46px rgba(0, 0, 0, .46);
}

.livro__miolo {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* ---------- página ---------- */

.pagina {
  position: relative;
  background: var(--marfim);
  background-image: radial-gradient(circle, rgba(43, 58, 103, .055) 1px, transparent 1.5px);
  background-size: 12px 12px;
  padding: 34px 34px 46px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pagina--esq { border-radius: var(--raio) 0 0 var(--raio); }
.pagina--dir { border-radius: 0 var(--raio) var(--raio) 0; }

/* vinco central: sombra da dobra */
.pagina--esq::after,
.pagina--dir::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 34px;
  pointer-events: none;
}
.pagina--esq::after {
  right: 0;
  background: linear-gradient(to right, transparent, var(--papel-sombra));
}
.pagina--dir::after {
  left: 0;
  background: linear-gradient(to left, transparent, var(--papel-sombra));
  border-left: 1px dashed rgba(38, 34, 32, .28);
}

.pagina__numero {
  position: absolute;
  bottom: 16px;
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(38, 34, 32, .5);
}
.pagina--esq .pagina__numero { left: 34px; }
.pagina--dir .pagina__numero { right: 34px; }

/* friso angular estilo geométrico, abstraído */
.friso {
  height: 9px;
  flex: none;
  background-image:
    linear-gradient(135deg, var(--ocre) 25%, transparent 25%),
    linear-gradient(225deg, var(--ocre) 25%, transparent 25%),
    linear-gradient(45deg, var(--indigo) 25%, transparent 25%),
    linear-gradient(315deg, var(--indigo) 25%, transparent 25%);
  background-position: 0 0, 0 0, 9px 0, 9px 0;
  background-size: 18px 18px;
  background-repeat: repeat-x;
  opacity: .85;
  margin-bottom: 18px;
}

/* ---------- página esquerda: retrato do prato ---------- */

.prato__pais {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--vinho);
  margin: 0 0 6px;
}

.prato__nome {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: .98;
  margin: 0 0 8px;
  color: var(--carvao);
}

.prato__pronuncia {
  font-family: var(--ui);
  font-size: 12px;
  letter-spacing: .06em;
  color: rgba(38, 34, 32, .66);
  margin: 0 0 16px;
}
.prato__pronuncia b {
  color: var(--terracota);
  font-weight: 600;
}

.foto {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--bege);
  margin-bottom: 16px;
}

.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* quando a foto ainda não existe, a moldura vira arte de brasa */
.foto--vazia {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
  background:
    radial-gradient(circle at 32% 30%, rgba(183, 92, 46, .55), transparent 62%),
    radial-gradient(circle at 72% 74%, rgba(122, 46, 46, .5), transparent 60%),
    repeating-linear-gradient(45deg, rgba(43, 58, 103, .1) 0 8px, transparent 8px 16px),
    var(--bege);
}

.foto--vazia span {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: rgba(38, 34, 32, .62);
  max-width: 22ch;
  line-height: 1.7;
}

/* crédito da foto — exigido pelas licenças CC e pela honestidade sobre IA */
.foto-credito {
  flex: none;
  font-family: var(--ui);
  font-size: 9.5px;
  line-height: 1.45;
  color: rgba(38, 34, 32, .52);
  margin: -10px 0 12px;
  overflow-wrap: anywhere;
}
.foto-credito a { color: inherit; text-decoration: underline; }

.prato__resumo {
  font-size: 16px;
  line-height: 1.55;
  font-style: italic;
  color: rgba(38, 34, 32, .84);
  margin: 0;
  flex: none;
}

/* ---------- seções ---------- */

.secao { margin-bottom: 18px; }
.secao:last-of-type { margin-bottom: 0; }

.secao__titulo {
  font-family: var(--ui);
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .19em;
  color: var(--indigo);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 9px;
}
.secao__titulo::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(43, 58, 103, .26);
}

.secao p {
  margin: 0 0 9px;
  font-size: 14.5px;
  line-height: 1.62;
}
.secao p:last-child { margin-bottom: 0; }

/* rolagem interna quando o conteúdo passa da página */
.pagina__corpo {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;   /* URL longa de fonte não pode empurrar a página de lado */
  overflow-wrap: anywhere;
  padding-right: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(43, 58, 103, .35) transparent;
}
.pagina__corpo::-webkit-scrollbar { width: 5px; }
.pagina__corpo::-webkit-scrollbar-thumb {
  background: rgba(43, 58, 103, .35);
  border-radius: 4px;
}

/* ---------- ficha técnica ---------- */

.ficha {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin: 0;
}

.ficha div {
  background: var(--bege);
  border-radius: var(--raio);
  padding: 9px 8px;
  text-align: center;
}

.ficha dt {
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(38, 34, 32, .6);
  margin-bottom: 3px;
}

.ficha dd {
  margin: 0;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--carvao);
  line-height: 1.25;
}

/* ---------- ingredientes ---------- */

.grupo-ing { margin-bottom: 12px; }

.grupo-ing__nome {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--vinho);
  margin: 0 0 5px;
}

.grupo-ing__nota {
  font-size: 12px;
  font-style: italic;
  color: rgba(38, 34, 32, .62);
  margin: 0 0 6px;
}

.lista-ing {
  list-style: none;
  margin: 0;
  padding: 0;
}

.lista-ing li {
  font-size: 13.5px;
  line-height: 1.5;
  padding: 3px 0 3px 15px;
  position: relative;
  border-bottom: 1px dotted rgba(38, 34, 32, .16);
}
.lista-ing li::before {
  content: '';
  position: absolute;
  left: 0; top: 11px;
  width: 5px; height: 5px;
  background: var(--ocre);
  transform: rotate(45deg);
}

.lista-ing b { font-weight: 600; }

.marca-dificil {
  display: inline-block;
  background: var(--ocre);
  color: var(--carvao);
  font-family: var(--ui);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  padding: 1px 5px;
  border-radius: 2px;
  margin-left: 4px;
  vertical-align: 1px;
}

.substituto {
  display: block;
  font-size: 12px;
  font-style: italic;
  color: var(--verde);
  margin-top: 2px;
  line-height: 1.45;
}

/* ---------- QR ---------- */

/* O bloco é uma coluna: em cima o QR ao lado do texto, embaixo o botão
   ocupando a largura inteira. Antes o botão dividia a linha com o texto e
   ficava espremido na lateral. */
.qr-bloco {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--bege);
  border-radius: var(--raio);
  padding: 14px;
  margin-top: 4px;
  position: relative;
}

.qr-bloco__topo {
  display: flex;
  gap: 14px;
  align-items: center;
}

/* mancha de brasa atrás do QR — gradiente puro, sem filter:blur */
.qr-bloco::before {
  content: '';
  position: absolute;
  inset: -6px;
  background: radial-gradient(ellipse at 22% 34%, rgba(183, 92, 46, .3), rgba(183, 92, 46, .12) 45%, transparent 72%);
  border-radius: 10px;
  z-index: -1;
}

.qr-bloco__codigo {
  flex: none;
  width: 120px;
  height: 120px;
  background: #fff;   /* o QR é sempre preto sobre branco, em qualquer tema */
  padding: 6px;
  border-radius: 2px;
  line-height: 0;
}
.qr-bloco__codigo svg,
.qr-bloco__codigo img {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-bloco__texto p {
  margin: 0 0 5px;
  font-size: 13px;
  line-height: 1.5;
}
.qr-bloco__texto strong {
  display: block;
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--terracota);
  margin-bottom: 5px;
}

.qr-botao {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 14px;
  background: var(--terracota);
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: var(--raio);
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 20px;
  transition: background 140ms ease, transform 140ms ease;
}
.qr-botao:hover { background: #a04e25; transform: translateY(-1px); }
.qr-botao:active { transform: translateY(0); }

.qr-aviso {
  font-family: var(--ui);
  font-size: 11px;
  line-height: 1.45;
  color: var(--vinho);
  background: rgba(217, 164, 65, .3);
  border-left: 3px solid var(--ocre);
  padding: 6px 8px;
  margin-top: 8px;
  border-radius: 0 2px 2px 0;
}

/* ---------- nota de honestidade ---------- */

.nota-fonte {
  font-size: 11.5px;
  line-height: 1.5;
  color: rgba(38, 34, 32, .6);
  border-left: 2px solid rgba(43, 58, 103, .3);
  padding-left: 9px;
  margin: 0 0 6px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.nota-fonte:last-child { margin-bottom: 0; }

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

.capa {
  position: relative;
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--marfim);
  background: var(--indigo);
  border-radius: var(--raio);
  overflow: hidden;
  padding: 48px;
}

.capa__fundo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .5;
}

.capa::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 45%, rgba(43, 58, 103, .55), rgba(20, 16, 14, .88) 72%);
}

.capa > *:not(.capa__fundo) { position: relative; z-index: 1; }

.capa__selo {
  font-family: var(--ui);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .3em;
  border: 1px solid rgba(247, 241, 230, .45);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 26px;
}

.capa__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(52px, 9vw, 104px);
  letter-spacing: .1em;
  line-height: .92;
  margin: 0;
  text-shadow: 0 4px 26px rgba(0, 0, 0, .6);
}

.capa__sub {
  font-family: var(--corpo);
  font-style: italic;
  font-size: clamp(16px, 2vw, 21px);
  margin: 16px 0 0;
  opacity: .9;
}

.capa__tagline {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  margin: 34px 0 0;
  color: var(--ocre);
}

/* ---------- sumário ---------- */

.sumario__titulo {
  font-family: var(--display);
  font-weight: 800;
  font-size: 38px;
  margin: 0 0 4px;
}

.sumario__intro {
  font-size: 14px;
  line-height: 1.6;
  color: rgba(38, 34, 32, .78);
  margin: 0 0 18px;
}

.sumario-lista {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sumario-lista li { margin-bottom: 3px; }

.sumario-lista button {
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 10px;
  background: none;
  border: 0;
  border-bottom: 1px dotted rgba(38, 34, 32, .3);
  padding: 9px 4px;
  cursor: pointer;
  text-align: left;
  font-family: var(--corpo);
  color: var(--carvao);
  transition: background 160ms ease, padding-left 160ms ease;
}

.sumario-lista button:hover {
  background: rgba(217, 164, 65, .22);
  padding-left: 9px;
}

.sumario-lista .n {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  color: var(--terracota);
  flex: none;
  width: 20px;
}

.sumario-lista .nome {
  font-size: 17px;
  font-weight: 600;
  flex: none;
}

.sumario-lista .pais {
  font-family: var(--ui);
  font-size: 11px;
  color: rgba(38, 34, 32, .55);
  margin-left: auto;
  flex: none;
  padding-left: 10px;
}

/* ---------- folha que vira ---------- */

.folha-virando {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  transform-style: preserve-3d;
  z-index: 40;
  pointer-events: none;
  transition: transform var(--transicao-folha) cubic-bezier(.42, 0, .28, 1);
}

.folha-virando--frente { left: 50%; transform-origin: left center; }
.folha-virando--tras   { left: 0;   transform-origin: right center; }

.folha-virando--frente.girando { transform: rotateY(-178deg); }
.folha-virando--tras.girando   { transform: rotateY(178deg); }

.folha-virando .face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

.folha-virando .face--verso { transform: rotateY(180deg); }

.folha-virando .sombra-virada {
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, .3), transparent 55%);
  opacity: 0;
  transition: opacity var(--transicao-folha) ease;
  pointer-events: none;
}
.folha-virando.girando .sombra-virada { opacity: 1; }

/* ---------- controles ---------- */

.controles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.btn {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  padding: 11px 20px;
  min-height: 44px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: var(--terracota);
  color: #fff;
  transition: transform 140ms ease, background 140ms ease, opacity 140ms ease;
}
.btn:hover:not(:disabled) { background: #a04e25; transform: translateY(-1px); }
.btn:active:not(:disabled) { transform: translateY(0); }
.btn:disabled { opacity: .35; cursor: not-allowed; }

.btn--fantasma {
  background: transparent;
  color: var(--marfim);
  border: 1px solid rgba(247, 241, 230, .4);
}
.btn--fantasma:hover:not(:disabled) {
  background: rgba(247, 241, 230, .12);
}

.indicador {
  font-family: var(--ui);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(247, 241, 230, .68);
  min-width: 92px;
  text-align: center;
}

.dica-teclado {
  font-family: var(--ui);
  font-size: 11px;
  color: rgba(247, 241, 230, .45);
  text-align: center;
  margin-top: 14px;
  letter-spacing: .04em;
}

/* zonas de clique nos cantos */
.canto {
  position: absolute;
  top: 0; bottom: 0;
  width: 13%;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 30;
}
.canto--ant { left: 0; }
.canto--prox { right: 0; }
.canto:hover { background: linear-gradient(to right, rgba(38, 34, 32, .07), transparent); }
.canto--prox:hover { background: linear-gradient(to left, rgba(38, 34, 32, .07), transparent); }

/* ============================================================
   TELAS MÉDIAS — sem 3D, só uma página por vez
   ============================================================ */

@media (max-width: 1023px) {
  /* Centralizar verticalmente corta o conteúdo alto: no celular a página
     começa no topo e rola normalmente. */
  body {
    justify-content: flex-start;
    padding: 16px 14px 24px;
  }

  .livro {
    --largura-pagina: min(470px, 100%);
    --altura-pagina: auto;
    width: var(--largura-pagina);
    height: auto;
    perspective: none;
    box-shadow: 0 14px 30px rgba(0, 0, 0, .45);
  }

  /* o miolo é absoluto no desktop; no celular precisa voltar ao fluxo,
     senão a segunda página fica fora da tela e some */
  .livro__miolo {
    position: static;
    grid-template-columns: 1fr;
  }

  .pagina {
    height: auto;
    padding: 24px 20px 30px;
    border-radius: 0;
  }
  .pagina--esq { border-radius: var(--raio) var(--raio) 0 0; }
  .pagina--dir { border-radius: 0 0 var(--raio) var(--raio); border-top: 1px dashed rgba(38, 34, 32, .25); }
  .pagina--esq::after, .pagina--dir::after { display: none; }

  /* nada de rolagem dentro da página: a receita inteira rola com o dedo */
  .pagina__corpo {
    overflow: visible;
    max-height: none;
    padding-right: 0;
  }

  .pagina__numero { position: static; display: block; margin-top: 14px; text-align: center; }

  .folha-virando { display: none !important; }

  /* as zonas de clique das bordas atrapalham o toque e a rolagem */
  .canto { display: none; }

  .foto { height: 250px; flex: none; }

  .capa { min-height: 58vh; padding: 44px 24px; }
  .capa__titulo { font-size: clamp(46px, 15vw, 82px); }

  /* controles sempre à mão, colados no rodapé.
     Precisa de `body >` para vencer a regra de empilhamento lá de cima,
     que é mais específica que `.controles` sozinho. */
  body > .controles {
    position: sticky;
    bottom: 0;
    z-index: 20;
    margin: 18px -14px 0;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(23, 11, 7, .93);
    border-top: 1px solid rgba(233, 166, 60, .3);
    gap: 8px;
  }
  .btn { padding: 12px 14px; font-size: 11px; letter-spacing: .08em; }
  .indicador { min-width: 62px; font-size: 10px; }

  .dica-teclado { display: none; }

  .cenario__savana { opacity: .8; }
}

/* ============================================================
   CELULAR ESTREITO
   ============================================================ */

@media (max-width: 639px) {
  .livro { --largura-pagina: 100%; }
  .pagina { padding: 20px 16px 26px; }
  .foto { height: 220px; }
  .prato__nome { font-size: clamp(30px, 9vw, 42px); }
  /* o QR aparece no celular também: serve para passar a receita
     para outro aparelho, ou para quem está lendo no computador de longe */
  .qr-bloco__topo { flex-direction: column; align-items: flex-start; gap: 10px; }
  .qr-bloco__codigo { width: 132px; height: 132px; align-self: center; }
  .ficha { grid-template-columns: repeat(2, 1fr); }
  .marca__nome { font-size: 26px; }
  .marca__linha { font-size: 9px; letter-spacing: .16em; }
}

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

.rodape {
  margin-top: 26px;
  text-align: center;
}

.rodape__assinatura {
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .26em;
  color: rgba(247, 241, 230, .72);
  text-shadow: 0 1px 6px rgba(0, 0, 0, .55);
}

/* ============================================================
   MOVIMENTO REDUZIDO
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .folha-virando { display: none !important; }
}

/* ============================================================
   IMPRESSÃO — a página do livro em papel, com o QR funcionando
   ============================================================ */

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  body {
    background: #fff !important;
    padding: 0;
    display: block;
  }

  .marca, .controles, .dica-teclado, .canto, .folha-virando, .cenario,
  .botao-cozinhar, .qr-aviso, .pagina__corpo::-webkit-scrollbar { display: none !important; }

  .livro {
    width: 100%;
    height: auto;
    filter: none;
    perspective: none;
  }

  .livro__miolo {
    display: block;
  }

  .pagina {
    width: 100%;
    height: auto;
    page-break-after: always;
    break-after: page;
    background: #fff !important;
    padding: 0 0 10mm;
    box-shadow: none;
    border-radius: 0;
  }
  .pagina:last-child { page-break-after: auto; break-after: auto; }
  .pagina::after { display: none !important; }
  .pagina__corpo { overflow: visible !important; }

  /* o QR impresso precisa ter no mínimo 25 mm para a câmera ler */
  .qr-bloco {
    background: #fff !important;
    border: 1px solid #ccc;
    break-inside: avoid;
  }
  .qr-bloco::before { display: none; }
  .qr-bloco__codigo {
    width: 28mm;
    height: 28mm;
    padding: 2mm;
  }

  /* no papel não se clica: o botão vira o endereço escrito */
  .qr-botao {
    background: none !important;
    color: #000 !important;
    padding: 0;
    min-height: 0;
    text-transform: none;
    letter-spacing: 0;
    font-size: 9px;
  }

  .foto { height: 70mm; flex: none; break-inside: avoid; }
  .foto--vazia { background: #eee !important; }

  .secao__titulo { color: #000; }
  .prato__nome { color: #000; }

  a[href^="http"]::after {
    content: ' (' attr(href) ')';
    font-size: 9px;
    color: #666;
    word-break: break-all;
  }
}