/* Hugo Decor · estilo da marca (site e guia de identidade) */
:root {
  --amarelo: #FFD23F; --verde: #1E8A4C; --laranja: #F2662B; --azul: #4FB0E6;
  --limao: #B9D531; --tinta: #15241B; --creme: #FFF6E5; --branco: #fff;
  --borda: 3px solid var(--tinta); --sombra: 6px 6px 0 var(--tinta); --raio: 22px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--creme); color: var(--tinta); font: 17px/1.6 Nunito, system-ui, sans-serif; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { font-family: 'Lilita One', Nunito, sans-serif; font-weight: 400; line-height: 1.02; margin: 0 0 14px; letter-spacing: .01em; }
h2 { font-size: clamp(36px, 6.5vw, 60px); }
h3 { font-size: 26px; }
.faixa { max-width: 1120px; margin: 0 auto; padding: 0 20px; }
section { padding: 80px 0; position: relative; }
.mao { font-family: Caveat, cursive; font-size: 26px; color: var(--laranja); display: block; margin-bottom: 2px; transform: rotate(-2deg); }
.sombra-texto { text-shadow: 4px 4px 0 var(--tinta); }
.c-laranja { color: var(--laranja); } .c-verde { color: var(--verde); }
.c-azul { color: var(--azul); } .c-amarelo { color: var(--amarelo); } .c-limao { color: var(--limao); }

/* fundo quadriculado */
.quadriculado { background-color: var(--amarelo);
  background-image: linear-gradient(rgba(21,36,27,.09) 2px, transparent 2px), linear-gradient(90deg, rgba(21,36,27,.09) 2px, transparent 2px);
  background-size: 38px 38px; }

/* blocos com borda grossa e sombra chapada */
.caixa { background: var(--branco); border: var(--borda); border-radius: var(--raio); box-shadow: var(--sombra); }
.botao { display: inline-flex; align-items: center; gap: 8px; font: 800 17px Nunito, sans-serif; text-decoration: none;
  padding: 13px 24px; border: var(--borda); border-radius: 999px; box-shadow: 4px 4px 0 var(--tinta);
  background: var(--verde); color: var(--branco); transition: transform .15s, box-shadow .15s; }
.botao:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--tinta); }
.botao.laranja { background: var(--laranja); } .botao.branco { background: var(--branco); color: var(--tinta); }
.botao.amarelo { background: var(--amarelo); color: var(--tinta); }

/* logo: "Hugo" com a coroa no "o" (como no logo antigo) e "decor" embaixo, à direita */
.logo { font-size: 34px; display: inline-grid; justify-items: end; text-decoration: none; line-height: .82; position: relative; padding-top: .18em; }
.logo b { font: 400 1em 'Lilita One', sans-serif; color: var(--verde); text-shadow: .07em .07em 0 var(--tinta); }
.logo i { font: 700 .56em Caveat, cursive; color: var(--laranja); font-style: normal; margin: -.08em .1em 0 0; transform: rotate(-4deg); }
.logo svg { position: absolute; right: -.26em; top: -.06em; width: .62em; height: .34em; transform: rotate(18deg); }
.logo.grande { font-size: clamp(72px, 16vw, 140px); }

/* ícones de traço da marca */
.ico { width: 1em; height: 1em; vertical-align: -.15em; }
.circulo-ico { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: var(--borda); box-shadow: 3px 3px 0 var(--tinta); margin-bottom: 12px; }
.circulo-ico svg { width: 34px; height: 34px; }

/* balão em CSS */
.balao { width: 44px; height: 54px; border: var(--borda); border-radius: 50% 50% 50% 50% / 44% 44% 56% 56%; position: absolute; background: var(--laranja); }
.balao::after { content: ''; position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); border: 6px solid transparent; border-bottom-color: var(--tinta); }
.balao::before { content: ''; position: absolute; left: 9px; top: 9px; width: 9px; height: 14px; border-radius: 50%; background: rgba(255,255,255,.6); }

/* faixa correndo */
.letreiro { background: var(--tinta); color: var(--amarelo); border-block: var(--borda); overflow: hidden; padding: 14px 0; }
.letreiro div { display: flex; gap: 34px; width: max-content; animation: correr 26s linear infinite;
  font: 400 30px 'Lilita One', sans-serif; text-transform: uppercase; white-space: nowrap; }
.letreiro span:nth-child(even) { color: var(--laranja); }
@keyframes correr { to { transform: translateX(-50%); } }

/* fita adesiva e polaroide */
.nota { position: relative; padding: 28px 24px 24px; transform: rotate(var(--r, 0deg)); }
.nota::before { content: ''; position: absolute; top: -14px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%) rotate(-4deg);
  background: rgba(255, 210, 63, .85); border: 2px solid rgba(21,36,27,.25); }
.polaroide { background: var(--branco); border: var(--borda); box-shadow: var(--sombra); padding: 12px 12px 0; border-radius: 6px; transform: rotate(var(--r, 0deg)); margin: 0; }
.polaroide .foto { aspect-ratio: 4/5; border: 2px solid var(--tinta); overflow: hidden; background: var(--cor, var(--laranja)); position: relative; }
.polaroide .foto img { width: 100%; height: 100%; object-fit: cover; }
.polaroide figcaption { font: 700 24px Caveat, cursive; text-align: center; padding: 8px 4px 10px; }

/* selo redondo girando */
.selo { width: 130px; height: 130px; animation: girar 16s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* balão de fala */
.fala { position: relative; background: var(--branco); border: var(--borda); border-radius: 26px; padding: 12px 18px; font: 400 22px 'Lilita One', sans-serif; box-shadow: 4px 4px 0 var(--tinta); }
.fala::after { content: ''; position: absolute; left: 26px; bottom: -16px; width: 22px; height: 22px; background: var(--branco);
  border-right: var(--borda); border-bottom: var(--borda); transform: rotate(45deg) skew(10deg, 10deg); clip-path: polygon(100% 0, 100% 100%, 0 100%); }

.etiqueta { display: inline-block; font: 800 13px Nunito, sans-serif; text-transform: uppercase; letter-spacing: .08em;
  border: 2px solid var(--tinta); border-radius: 999px; padding: 3px 12px; background: var(--branco); }
.estrela { position: absolute; width: 46px; }

@media (prefers-reduced-motion: reduce) { .letreiro div, .selo { animation: none; } html { scroll-behavior: auto; } }