/* ============================================================
   ZAMBEZE — modo de preparo (destino do QR Code)
   Feito para ser usado COZINHANDO: tela pequena, mão suja,
   olhada de longe. Corpo grande, alvo de toque generoso.
   ============================================================ */

:root {
  --marfim:   #F7F1E6;
  --carvao:   #262220;
  --indigo:   #2B3A67;
  --terracota:#B75C2E;
  --ocre:     #D9A441;
  --vinho:    #7A2E2E;
  --verde:    #55603C;
  --bege:     #E8DCC8;

  /* Texto sobre superfície escura (cabeçalho índigo). NÃO inverte no modo
     escuro — se inverter, título escuro cai sobre fundo escuro. */
  --sobre-escuro: #F7F1E6;

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

  --alvo: 48px; /* área mínima de toque */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: rgba(217, 164, 65, .3); }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--corpo);
  font-size: 20px;
  line-height: 1.55;
  color: var(--carvao);
  background: var(--marfim);
  padding-bottom: 96px;
  -webkit-text-size-adjust: 100%;
}

.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;
}

:where(a, button, input, [tabindex]):focus-visible {
  outline: 3px solid var(--terracota);
  outline-offset: 2px;
}

/* ---------- topo ---------- */

.topo {
  /* mesmo pôr do sol do livro, com a savana desenhada no rodapé do cabeçalho */
  background-color: #2B120C;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='620' height='120' viewBox='0 0 620 120'%3E%3Cg fill='%23140908'%3E%3Cpath d='M0 92 C 90 84 150 99 232 92 C 320 84 400 98 486 91 C 548 86 590 93 620 90 L620 120 L0 120 Z'/%3E%3Cpath d='M126 93 L129 52 L134 52 L137 93 Z'/%3E%3Cpath d='M131 66 L106 55 L108 52 L132 62 Z'/%3E%3Cpath d='M132 63 L157 51 L159 54 L134 66 Z'/%3E%3Cellipse cx='131' cy='46' rx='27' ry='7'/%3E%3Cellipse cx='106' cy='52' rx='21' ry='6'/%3E%3Cellipse cx='157' cy='52' rx='19' ry='5'/%3E%3Cellipse cx='131' cy='39' rx='16' ry='5'/%3E%3Cpath d='M436 94 L438 68 L442 68 L444 94 Z'/%3E%3Cellipse cx='440' cy='63' rx='19' ry='5'/%3E%3Cellipse cx='424' cy='67' rx='14' ry='4'/%3E%3Cellipse cx='456' cy='67' rx='13' ry='4'/%3E%3Cellipse cx='560' cy='87' rx='15' ry='8'/%3E%3Cellipse cx='240' cy='89' rx='12' ry='6'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(circle at 78% 118%, #FFC65C 0 4%, #F0A93E 8%, rgba(233, 166, 60, .35) 16%, transparent 30%),
    linear-gradient(180deg, #2B120C 0%, #6A2415 34%, #9C3A1E 62%, #C4551F 100%);
  background-repeat: repeat-x, no-repeat, no-repeat;
  background-position: bottom center, center, center;
  background-size: 620px 120px, auto, auto;
  color: var(--sobre-escuro);
  padding: 18px 20px 46px;
  position: relative;
  overflow: hidden;
}

.topo::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 7px;
  background-image:
    linear-gradient(135deg, var(--ocre) 25%, transparent 25%),
    linear-gradient(225deg, var(--ocre) 25%, transparent 25%),
    linear-gradient(45deg, var(--terracota) 25%, transparent 25%),
    linear-gradient(315deg, var(--terracota) 25%, transparent 25%);
  background-position: 0 0, 0 0, 7px 0, 7px 0;
  background-size: 14px 14px;
  background-repeat: repeat-x;
}

.topo__voltar {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: rgba(247, 241, 230, .78);
  text-decoration: none;
  min-height: 40px;
}

.topo__nome { color: var(--sobre-escuro); }

.topo__pais {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: var(--ocre);
  margin: 10px 0 4px;
}

.topo__nome {
  font-family: var(--display);
  font-weight: 800;
  font-size: 40px;
  line-height: 1;
  margin: 0;
}

.topo__pronuncia {
  font-family: var(--ui);
  font-size: 13px;
  margin: 8px 0 0;
  color: rgba(247, 241, 230, .72);
}
.topo__pronuncia b { color: var(--ocre); font-weight: 600; }

/* ---------- ficha ---------- */

.resumo-ficha {
  display: flex;
  gap: 10px;
  padding: 14px 20px;
  background: var(--bege);
  font-family: var(--ui);
  font-size: 13px;
  overflow-x: auto;
}

.resumo-ficha span {
  white-space: nowrap;
  font-weight: 600;
}
.resumo-ficha span::before {
  content: attr(data-rotulo);
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(38, 34, 32, .55);
}

/* ---------- abas ---------- */

.abas {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--marfim);
  border-bottom: 2px solid rgba(38, 34, 32, .12);
}

.aba {
  flex: 1;
  min-height: var(--alvo);
  border: 0;
  background: none;
  font-family: var(--ui);
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(38, 34, 32, .5);
  cursor: pointer;
  padding: 14px 8px;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 160ms ease, border-color 160ms ease;
}

.aba[aria-selected="true"] {
  color: var(--terracota);
  border-bottom-color: var(--terracota);
}

.painel { padding: 20px; }
.painel[hidden] { display: none; }

/* ---------- porções ---------- */

.porcoes {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--bege);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 22px;
}

.porcoes__rotulo {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(38, 34, 32, .68);
  flex: 1;
  line-height: 1.35;
}

.porcoes__ctrl {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--marfim);
  border-radius: 999px;
  padding: 4px;
}

.porcoes__btn {
  width: var(--alvo);
  height: var(--alvo);
  border: 0;
  border-radius: 50%;
  background: var(--terracota);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  font-family: var(--ui);
}
.porcoes__btn:disabled { opacity: .3; cursor: not-allowed; }
.porcoes__btn:active:not(:disabled) { background: #94471f; }

.porcoes__valor {
  font-family: var(--ui);
  font-size: 22px;
  font-weight: 600;
  min-width: 46px;
  text-align: center;
}

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

.grupo h2 {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vinho);
  margin: 26px 0 4px;
}
.grupo:first-child h2 { margin-top: 0; }

.grupo__nota {
  font-size: 15px;
  font-style: italic;
  color: rgba(38, 34, 32, .65);
  margin: 0 0 10px;
}

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

.ingredientes li {
  border-bottom: 1px solid rgba(38, 34, 32, .12);
}

.ingredientes label {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 2px;
  min-height: var(--alvo);
  cursor: pointer;
}

.ingredientes input { position: absolute; opacity: 0; width: 0; height: 0; }

.caixa {
  flex: none;
  width: 26px;
  height: 26px;
  margin-top: 3px;
  border: 2px solid rgba(38, 34, 32, .4);
  border-radius: 5px;
  display: grid;
  place-items: center;
  transition: background 130ms ease, border-color 130ms ease;
}
.caixa::after {
  content: '';
  width: 12px;
  height: 7px;
  border-left: 3px solid #fff;
  border-bottom: 3px solid #fff;
  transform: rotate(-45deg) scale(0);
  transition: transform 130ms ease;
  margin-top: -3px;
}
input:checked + .caixa {
  background: var(--verde);
  border-color: var(--verde);
}
input:checked + .caixa::after { transform: rotate(-45deg) scale(1); }
input:focus-visible + .caixa { outline: 3px solid var(--terracota); outline-offset: 2px; }

.ing-texto { flex: 1; }
input:checked ~ .ing-texto {
  opacity: .45;
  text-decoration: line-through;
}

.ing-qtd { font-weight: 600; color: var(--vinho); }

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

.sub {
  display: block;
  font-size: 15px;
  font-style: italic;
  color: var(--verde);
  margin-top: 5px;
  line-height: 1.45;
}

/* ---------- progresso ---------- */

.progresso {
  position: sticky;
  top: 52px;
  z-index: 15;
  background: var(--marfim);
  padding: 10px 0 14px;
}

.progresso__barra {
  height: 8px;
  background: rgba(38, 34, 32, .13);
  border-radius: 999px;
  overflow: hidden;
}

.progresso__preenchido {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--terracota), var(--ocre));
  border-radius: 999px;
  transition: width 280ms cubic-bezier(.4, 0, .2, 1);
}

.progresso__texto {
  font-family: var(--ui);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(38, 34, 32, .6);
  margin-top: 7px;
}

/* ---------- passos ---------- */

.passos {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: passo;
}

.passo {
  display: flex;
  gap: 14px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(38, 34, 32, .12);
  transition: opacity 200ms ease;
}

.passo__marcar {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--terracota);
  background: none;
  color: var(--terracota);
  font-family: var(--ui);
  font-size: 18px;
  font-weight: 600;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 160ms ease, color 160ms ease, transform 160ms ease;
}
.passo__marcar:active { transform: scale(.93); }

.passo--feito .passo__marcar {
  background: var(--verde);
  border-color: var(--verde);
  color: #fff;
}
.passo--feito .passo__texto { opacity: .42; }

.passo__conteudo { flex: 1; min-width: 0; }

.passo__texto {
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  transition: opacity 200ms ease;
}

/* ---------- cronômetro ---------- */

.timer {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 14px;
  min-height: var(--alvo);
  padding: 10px 18px;
  border: 2px solid var(--indigo);
  border-radius: 999px;
  background: none;
  color: var(--indigo);
  font-family: var(--ui);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
  transition: background 160ms ease, color 160ms ease;
}
.timer:active { transform: scale(.97); }

.timer--rodando {
  background: var(--indigo);
  color: var(--marfim);
}

.timer--acabou {
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff;
  animation: pulsar 1s ease-in-out infinite;
}

@keyframes pulsar {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.045); }
}

/* ---------- rodapé de dicas ---------- */

.dicas {
  background: var(--bege);
  border-radius: 6px;
  padding: 18px 20px;
  margin-top: 30px;
}

.dicas h2 {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vinho);
  margin: 0 0 12px;
}

.dicas p {
  margin: 0 0 14px;
  font-size: 17px;
  line-height: 1.55;
}
.dicas p:last-child { margin-bottom: 0; }

.servir {
  border-left: 4px solid var(--ocre);
  padding-left: 16px;
  margin-top: 26px;
}
.servir h2 {
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--vinho);
  margin: 0 0 8px;
}
.servir p { margin: 0; font-size: 17px; line-height: 1.55; }

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

.rodape {
  margin-top: 34px;
  padding-top: 20px;
  border-top: 1px solid rgba(38, 34, 32, .16);
  text-align: center;
}

.rodape__assinatura {
  margin: 0;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .24em;
  color: rgba(38, 34, 32, .5);
}

:root[data-tema="escuro"] .rodape { border-top-color: rgba(240, 232, 218, .16); }
:root[data-tema="escuro"] .rodape__assinatura { color: rgba(240, 232, 218, .5); }

/* ---------- barra fixa ---------- */

.barra-fixa {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 30;
  display: flex;
  gap: 10px;
  padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
  background: var(--marfim);
  border-top: 1px solid rgba(38, 34, 32, .16);
  box-shadow: 0 -4px 14px rgba(38, 34, 32, .12);
}

.barra-fixa button {
  flex: 1;
  min-height: var(--alvo);
  border: 0;
  border-radius: 8px;
  font-family: var(--ui);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  cursor: pointer;
  background: var(--bege);
  color: var(--carvao);
  transition: background 160ms ease;
  padding: 8px 6px;
}

/* O botão de tema não fica "aceso": ele só troca de rótulo.
   Pintar de verde daria a entender que ligou alguma coisa. */
.barra-fixa button:active { background: var(--ocre); color: #262220; }

.barra-fixa .principal {
  background: var(--terracota);
  color: #fff;
  flex: 1.3;
}

/* ---------- modo escuro ---------- */

/* O tema é escolhido pelo botão "Tela clara / Tela escura" e fica gravado
   no atributo data-tema do <html>. Um script no <head> define o valor
   inicial (o que estiver salvo, senão o tema do celular), então a página
   já abre certa, sem piscar. */
:root[data-tema="escuro"] {
  --marfim: #17140F;
  --carvao: #F0E8DA;
  --bege:   #241F19;

  /* Vinho e verde da marca são escuros demais para fundo escuro.
     Aqui entram as versões claras equivalentes, mantendo a mesma família. */
  --vinho: #E9A08E;
  --verde: #9BBF7A;
}

:root[data-tema="escuro"] body { background: var(--marfim); color: var(--carvao); }
:root[data-tema="escuro"] .abas,
:root[data-tema="escuro"] .progresso { background: var(--marfim); }
:root[data-tema="escuro"] .caixa { border-color: rgba(240, 232, 218, .45); }

:root[data-tema="escuro"] .aba { color: rgba(240, 232, 218, .52); }
:root[data-tema="escuro"] .aba[aria-selected="true"] { color: #E9835A; border-bottom-color: #E9835A; }

:root[data-tema="escuro"] .timer { color: #9DB2E8; border-color: #9DB2E8; }
:root[data-tema="escuro"] .timer--rodando { background: #9DB2E8; color: #17140F; }

:root[data-tema="escuro"] .barra-fixa { background: var(--marfim); box-shadow: 0 -4px 14px rgba(0, 0, 0, .5); }

:root[data-tema="escuro"] .resumo-ficha span::before,
:root[data-tema="escuro"] .progresso__texto,
:root[data-tema="escuro"] .porcoes__rotulo { color: rgba(240, 232, 218, .65); }
:root[data-tema="escuro"] .grupo__nota { color: rgba(240, 232, 218, .6); }

:root[data-tema="escuro"] .ingredientes li { border-bottom-color: rgba(240, 232, 218, .14); }
:root[data-tema="escuro"] .passo { border-bottom-color: rgba(240, 232, 218, .14); }

/* a troca de tema não pode dar solavanco */
body, .abas, .progresso, .barra-fixa, .aba, .timer {
  transition: background-color 220ms ease, color 220ms ease, border-color 220ms ease;
}

/* O selo ocre é sempre texto escuro sobre amarelo, nos dois temas —
   texto claro sobre ocre reprova no contraste (2,25:1). */
.selo-dificil { color: #262220; }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- impressão ---------- */

@media print {
  .abas, .barra-fixa, .timer, .progresso, .topo__voltar, .porcoes { display: none !important; }
  .painel[hidden] { display: block !important; }
  body { font-size: 12pt; background: #fff; color: #000; padding: 0; }
  .topo { background: #fff; color: #000; }
  .topo__nome { color: #000; }
}