@font-face { font-family: 'Rye'; src: url('/fonts/rye.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/fonts/merriweather-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Merriweather'; src: url('/fonts/merriweather-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
/* Versão condensada (eixo wdth 87%) para cabeçalhos e fitas */
@font-face { font-family: 'Merriweather Cond'; src: url('/fonts/merriweather-cond.woff2') format('woff2'); font-weight: 700 900; font-stretch: 87%; font-display: swap; }

:root {
  --vermelho: #B3121B;
  --vermelho-escuro: #8E0E14;
  --verde: #1F5130;
  --ouro: #C9973A;
  --creme: #F7EBD0;
  --creme-claro: #FCF5E3;
  --tinta: #3A2A1E;
  --serif: 'Merriweather', 'Roboto Slab', Georgia, serif;
  --cond: 'Merriweather Cond', 'Merriweather', Georgia, serif;
  --lado: 34px; /* largura das tiras laterais */
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100dvh;
  font: 400 1rem/1.55 var(--serif);
  color: var(--tinta);
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%27260%27%20height%3D%27260%27%3E%3Cpath%20transform%3D%22translate(22%2030)%20scale(0.9)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.45%22%2F%3E%3Cpath%20transform%3D%22translate(95%2070)%20scale(0.6)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20transform%3D%22translate(170%2020)%20scale(0.8)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.4%22%2F%3E%3Cpath%20transform%3D%22translate(230%20120)%20scale(1.1)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.45%22%2F%3E%3Cpath%20transform%3D%22translate(60%20150)%20scale(0.7)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.3%22%2F%3E%3Cpath%20transform%3D%22translate(140%20190)%20scale(1)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.4%22%2F%3E%3Cpath%20transform%3D%22translate(20%20230)%20scale(0.6)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.35%22%2F%3E%3Cpath%20transform%3D%22translate(210%20235)%20scale(0.8)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.4%22%2F%3E%3Cpath%20transform%3D%22translate(110%20125)%20scale(0.5)%22%20d%3D%22M0-6L1.4-1.4%206%200%201.4%201.4%200%206-1.4%201.4-6%200-1.4-1.4Z%22%20fill%3D%22%23C9973A%22%20opacity%3D%220.3%22%2F%3E%3C%2Fsvg%3E") 0 0 / 260px 260px, var(--creme);
}
/* Linha vermelha fina, por dentro do enfeite */

.pagina { position: relative; min-height: 100dvh; overflow: hidden; }
.pagina::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1.5px solid var(--vermelho);
  pointer-events: none;
  z-index: 1;
}

/* ---------- Moldura ---------- */
.moldura { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.moldura svg { position: absolute; display: block; overflow: visible; }
.lado { top: 0; width: 32px; height: 100%; }
.lado.esq { left: 4px; }
.lado.dir { right: 4px; }
.topo { top: 4px; left: 0; width: 100%; height: 32px; }
.bola { top: 28px; width: calc(28px * var(--s, 1)); height: calc(56px * var(--s, 1)); transform-origin: 50% 0; animation: baloiça 5s ease-in-out infinite alternate; }
.bola:nth-of-type(even) { animation-delay: -2s; }
@keyframes baloiça { from { rotate: -3deg; } to { rotate: 3deg; } }
.so-largo { display: none; }
.laco { top: -2px; left: 50%; width: 120px; height: 78px; translate: -50% 0; filter: drop-shadow(0 2px 2px #0003); }
.bengala { bottom: 14px; width: 40px; height: 88px; }
.bengala.esq { left: 6px; rotate: -8deg; }
.bengala.dir { right: 6px; scale: -1 1; rotate: -8deg; }

/* ---------- Conteúdo ---------- */
main {
  position: relative;
  z-index: 1;
  max-width: 30rem;
  margin: 0 auto;
  padding: 5.4rem calc(var(--lado) + 1.1rem) 7rem;
}
header { text-align: center; }

.titulo {
  text-wrap: balance;
  position: relative;
  display: inline-block;
  margin: 0 0 .3rem;
  font: 400 clamp(2.6rem, 13vw, 5.2rem)/1.02 'Rye', Georgia, serif;
  color: var(--vermelho);
  -webkit-text-stroke: 2.5px var(--ouro);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 var(--vermelho-escuro), 0 6px 7px #0003;
}
.brilho { position: absolute; font-style: normal; font-size: 1.1rem; color: var(--ouro); -webkit-text-stroke: 0; text-shadow: 0 0 6px #fff8; animation: brilha 2.4s ease-in-out infinite; }
.b1 { top: 4%; left: -2%; }
.b2 { top: 18%; right: -4%; font-size: .85rem; animation-delay: -.8s; }
.b3 { bottom: 14%; left: 38%; font-size: .7rem; animation-delay: -1.6s; }
@keyframes brilha { 0%, 100% { opacity: .15; scale: .6; } 50% { opacity: 1; scale: 1.15; } }

/* Fita de pergaminho com pontas em cauda de andorinha */
.fita {
  position: relative;
  isolation: isolate;
  width: calc(100% - 2.2rem);
  max-width: 24rem;
  margin: .6rem auto;
  text-align: center;
  font: 900 clamp(1.05rem, 5.2vw, 1.45rem)/1.1 var(--cond);
  font-stretch: 87%;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.fita span { display: block; padding: .5rem 1.3rem .45rem; background: var(--creme-claro); border-block: 2px solid var(--ouro); box-shadow: 0 2px 3px #0002; }
.fita::before, .fita::after {
  content: '';
  position: absolute;
  z-index: -1;
  top: 7px;
  bottom: -7px;
  width: 2rem;
  background: #E7D3A2;
  border-block: 2px solid var(--ouro);
}
.fita::before { left: -1rem; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, .75rem 50%); }
.fita::after { right: -1rem; clip-path: polygon(0 0, 100% 0, calc(100% - .75rem) 50%, 100% 100%, 0 100%); }
.fita.vermelha { color: var(--vermelho); }
.fita.verde { color: var(--verde); }

/* ---------- Linhas tipo programa ---------- */
.linhas { margin-top: 1.1rem; border-top: 1px solid var(--ouro); }
.linha {
  display: grid;
  grid-template-columns: 4.1rem 1.9rem 1fr;
  align-items: center;
  gap: .7rem;
  padding: .85rem 0;
  border-bottom: 1px solid var(--ouro);
}
.linha h2 { margin: 0; font: 900 1.15rem/1.1 var(--cond); font-stretch: 87%; letter-spacing: .08em; text-transform: uppercase; color: var(--vermelho); }
.linha a { color: inherit; text-decoration-color: var(--ouro); text-underline-offset: .2em; }
.linha p { margin: .15rem 0 0; font-size: .95rem; line-height: 1.35; }
.icone { width: 1.9rem; height: 1.9rem; color: var(--vermelho); }
.linha.sim .icone { color: var(--verde); }

/* Bilhete: caixa vermelha de cantos redondos, borda dupla dourada */
.bilhete {
  display: grid;
  place-items: center;
  padding: .4rem .2rem;
  min-height: 3.5rem;
  border-radius: .7rem;
  border: 2px solid var(--ouro);
  box-shadow: inset 0 0 0 2px var(--vermelho), inset 0 0 0 3.5px var(--ouro);
  background: var(--vermelho);
  color: var(--creme);
  text-align: center;
  font: 700 .95rem/1.1 var(--serif);
}
.bilhete.verde { background: var(--verde); box-shadow: inset 0 0 0 2px var(--verde), inset 0 0 0 3.5px var(--ouro); }

/* ---------- Cartão do formulário ---------- */
.cartao {
  margin-top: 1.6rem;
  padding: 1.1rem 1rem 1.2rem;
  background: var(--creme-claro);
  border: 1.5px solid var(--vermelho);
  box-shadow: inset 0 0 0 4px var(--creme-claro), inset 0 0 0 5.5px var(--ouro), 0 6px 14px #3a2a1e22;
  border-radius: .3rem;
}
.cartao .linha { border-top: 1px solid var(--ouro); margin-top: .8rem; }

.ticket, .caixa-titulo {
  --furo: .6rem;
  -webkit-mask: radial-gradient(circle var(--furo) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--furo) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle var(--furo) at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle var(--furo) at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  border: 2px solid var(--ouro);
  border-radius: .55rem;
  box-shadow: inset 0 0 0 2px var(--vermelho), inset 0 0 0 3.5px var(--ouro);
  background: var(--vermelho);
  color: #fff;
}
.caixa-titulo { margin: 0 0 .9rem; padding: .7rem .5rem .6rem; text-align: center; font: 900 clamp(1.05rem, 5.4vw, 1.5rem)/1 var(--cond); font-stretch: 87%; letter-spacing: .07em; text-transform: uppercase; color: var(--creme); }
.pergunta { margin: 0 0 1rem; text-align: center; font-style: italic; }

label { display: block; margin-bottom: .85rem; font-weight: 700; font-size: .9rem; }
input {
  display: block;
  width: 100%;
  margin-top: .3rem;
  padding: .75rem .8rem;
  font: 400 1rem var(--serif);
  color: var(--tinta);
  background: var(--creme);
  border: 1.5px solid var(--vermelho);
  box-shadow: inset 0 0 0 2px var(--creme), inset 0 0 0 3px var(--ouro);
  border-radius: .4rem;
}
input:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.botoes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; margin-top: 1.1rem; }
button.ticket {
  font: 900 clamp(1.05rem, 5vw, 1.25rem)/1 var(--cond);
  font-stretch: 87%;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 1rem .5rem .9rem;
  cursor: pointer;
}
button.verde { background: var(--verde); box-shadow: inset 0 0 0 2px var(--verde), inset 0 0 0 3.5px var(--ouro); }
button.ticket:active { filter: brightness(.9); }
button:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
button:disabled { opacity: .6; cursor: wait; }

/* ---------- Estado "já respondeste" ---------- */
.ola { margin-top: .3rem; font-size: 1.2rem; text-transform: none; letter-spacing: .03em; }
.ola span { overflow-wrap: anywhere; }
.resposta { margin-bottom: 1rem; }
#mudar { display: block; width: 100%; font-size: clamp(.9rem, 4vw, 1.15rem); }
.obrigado { margin: 0 0 1rem; text-align: center; font-style: italic; color: var(--verde); font-weight: 700; }
.link { display: block; margin: .9rem auto 0; padding: .4rem; border: 0; background: none; font: 400 .9rem var(--serif); color: var(--tinta); text-decoration: underline; cursor: pointer; }

.erro { margin: .3rem 0 0; text-align: center; font-weight: 700; font-size: .9rem; color: var(--vermelho); }
.rodape { margin: 1.6rem 0 0; text-align: center; font-size: .8rem; font-style: italic; opacity: .8; }

@media (min-width: 720px) {
  :root { --lado: 40px; }
  .so-largo { display: block; }
  .laco { width: 170px; height: 110px; }
  .bengala { width: 60px; height: 132px; }
  .bengala.esq { left: 12px; }
  .bengala.dir { right: 12px; }
  main { max-width: 36rem; padding-top: 7rem; }
  .linha { grid-template-columns: 4.6rem 2.2rem 1fr; }
  .linha p { font-size: 1.02rem; }
}

@media (prefers-reduced-motion: reduce) { .bola, .brilho { animation: none; } .brilho { opacity: .8; } }