:root{
  --fundo:#FEF3EA;
  --cartao:#FFFBF7;
  --texto:#14100F;
  --terracota:#AD795B;
  --vinho:#5E1A1A;
  --borda:#E6D5C6;
  --cinza:#6B6560;
  --claro:#FFF8F1;
  --serif: Georgia, "EB Garamond", "Times New Roman", serif;
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:var(--serif);
  font-size:19px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* ---------- topo ---------- */
.topo{
  padding:calc(22px + env(safe-area-inset-top,0px)) 20px 18px;
  border-bottom:1px solid var(--borda);
  background:var(--fundo);
}
.voltar{
  display:block;
  font-family:var(--serif);
  font-size:18px;
  color:var(--terracota);
  background:none;
  border:0;
  padding:6px 4px;
  margin:0 0 14px -4px;
  min-height:44px;
  cursor:pointer;
}
.marca{display:flex;align-items:center;gap:14px;}
.simbolo{width:52px;height:52px;flex:0 0 52px;}
.marca-texto{flex:1 1 auto;min-width:0;}
.marca-texto h1{
  margin:0;
  font-size:26px;
  font-weight:400;
  line-height:1.15;
}
.etiqueta{
  margin:3px 0 0;
  font-size:12px;
  letter-spacing:2px;
  color:var(--terracota);
}
.papel{
  flex:0 0 auto;
  font-family:var(--serif);
  font-size:14px;
  color:var(--cinza);
  background:transparent;
  border:1px solid var(--borda);
  border-radius:999px;
  padding:7px 14px;
  min-height:38px;
  cursor:pointer;
  white-space:nowrap;
}

.folha{
  max-width:640px;
  margin:0 auto;
  padding:26px 20px calc(60px + env(safe-area-inset-bottom,0px));
}

/* ---------- perguntas ---------- */
.pergunta{
  margin:0 0 16px;
  font-size:26px;
  font-weight:400;
  line-height:1.3;
  text-wrap:balance;
}
.aviso{
  margin:0 0 26px;
  font-size:17px;
  color:var(--cinza);
  line-height:1.5;
}
.escolhas{display:flex;flex-direction:column;gap:14px;}
.escolha{
  font-family:var(--serif);
  font-size:22px;
  color:var(--texto);
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:22px 20px;
  min-height:68px;
  cursor:pointer;
  text-align:left;
}
.escolha:active{background:#FBF2E8;}

/* ---------- tela 1 ---------- */
.bloco{
  display:block;
  width:100%;
  text-align:left;
  font-family:var(--serif);
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:22px 20px;
  margin-bottom:14px;
  cursor:pointer;
  color:inherit;
}
.bloco:active{background:#FBF2E8;}
.bloco h3{margin:0;font-size:23px;font-weight:400;line-height:1.3;}
.bloco .marcas{margin:8px 0 0;font-size:16px;color:var(--terracota);}
.fecho{
  margin:34px 0 0;
  padding-top:22px;
  border-top:1px solid var(--borda);
  font-size:18px;
  font-style:italic;
  color:var(--vinho);
  line-height:1.5;
}

/* ---------- tela 2 ---------- */
.titulo-tela{
  margin:0 0 22px;
  font-size:27px;
  font-weight:400;
  line-height:1.3;
  text-wrap:balance;
}
.comando{
  display:block;
  width:100%;
  text-align:left;
  font-family:var(--serif);
  background:var(--cartao);
  border:1px solid var(--borda);
  border-radius:14px;
  padding:20px;
  margin-bottom:14px;
  cursor:pointer;
  color:inherit;
  font-size:21px;
  line-height:1.35;
}
.comando:active{background:#FBF2E8;}
.comando .onde{
  display:block;
  margin-top:7px;
  font-size:14px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--cinza);
}
.comando .marca-feito{
  display:block;
  margin-top:8px;
  font-size:15px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:var(--terracota);
}

/* ---------- tela 3 ---------- */
.local{
  margin:0 0 8px;
  font-size:14px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--cinza);
}
.passos{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:passo;
}
.passos li{
  counter-increment:passo;
  position:relative;
  padding:0 0 0 42px;
  margin:0 0 20px;
  font-size:23px;
  line-height:1.45;
  font-weight:700;
}
.passos li::before{
  content:counter(passo);
  position:absolute;
  left:0;
  top:3px;
  width:28px;
  text-align:right;
  font-size:17px;
  font-weight:400;
  color:var(--terracota);
  font-variant-numeric:tabular-nums;
}
.copiar{
  font-family:var(--serif);
  font-size:17px;
  color:var(--terracota);
  background:transparent;
  border:1px solid var(--borda);
  border-radius:10px;
  padding:11px 20px;
  min-height:48px;
  margin-top:6px;
  cursor:pointer;
}
.copiar.ok{background:#F3E6DA;border-color:var(--terracota);}

.feito{
  display:block;
  width:100%;
  font-family:var(--serif);
  font-size:19px;
  line-height:1.3;
  color:var(--vinho);
  background:transparent;
  border:1px solid var(--vinho);
  border-radius:12px;
  padding:17px 16px;
  min-height:60px;
  margin-top:40px;
  cursor:pointer;
}
.feito.on{background:var(--vinho);border-color:var(--vinho);color:var(--claro);}

button:focus-visible{outline:2px solid var(--terracota);outline-offset:2px;}

@media (max-width:360px){
  .marca-texto h1{font-size:23px;}
  .papel{font-size:13px;padding:6px 11px;}
}