/* Exclusiva Churros: a fachada turquesa, o rosa da logo e o dourado do churro */
:root {
  --turquesa: #2FB4BF;
  --turquesa-clara: #D9F3F4;
  --rosa: #C2277A;
  --rosa-viva: #F06BB0;
  --lilas: #BBA6E0;
  --ouro: #D98E32;
  --ouro-escuro: #A9651C;
  --choco: #33190F;
  --nata: #FFF9F1;
  --f-nome: "Chango", "Arial Black", sans-serif;
  --f-txt: "Nunito", system-ui, sans-serif;
  --ease-enter: cubic-bezier(.2, .8, .25, 1);
  --ease-mola: cubic-bezier(.3, 1.5, .55, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; color: var(--choco); background: var(--nata); font: 500 17px/1.5 var(--f-txt); }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--rosa); outline-offset: 3px; }
.skip { position: absolute; left: 8px; top: -60px; z-index: 30; padding: 10px 14px; color: #fff; background: var(--choco); }
.skip:focus { top: 8px; }
.marco { position: absolute; top: 170px; left: 0; width: 1px; height: 1px; }
.page { max-width: 560px; margin: 0 auto; overflow-x: clip; padding-bottom: calc(26px + env(safe-area-inset-bottom)); }
main { padding: 0 20px; }
h2 { font: 400 clamp(29px, 8.4vw, 36px)/1.1 var(--f-nome); margin: 0 0 14px; }
h3 { font: 800 18px/1.2 var(--f-txt); margin: 0 0 2px; }
p { margin: 0; }
section { margin-top: 56px; }

/* Cena 1 */
.hero { padding: calc(14px + env(safe-area-inset-top)) 20px 26px; background: var(--turquesa); border-radius: 0 0 28px 28px; }
.hero__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.hero__bar img { width: 62px; height: 62px; border-radius: 50%; background: #fff; }
.hero__bar a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; font-weight: 800; font-size: 15.5px; text-decoration: none; }
.nome { font: 400 clamp(42px, 13.2vw, 62px)/1 var(--f-nome); margin: 14px 0 0; color: #fff; text-shadow: 0 3px 0 var(--choco); }
.nome span { display: block; color: #FFE8F4; }
.linha { position: relative; height: 34px; margin: 14px 0 18px; }
.churro {
  position: absolute; inset: 4px 0 0; border-radius: 15px;
  background: repeating-linear-gradient(180deg, #F0B35E 0 3px, var(--ouro) 3px 7px, var(--ouro-escuro) 7px 8px);
  box-shadow: inset 0 -3px 0 rgba(90, 45, 10, .25);
}
.bico { position: absolute; left: 0; top: -6px; width: 34px; height: 46px; opacity: 0; transform: rotate(90deg); }
.granulado { position: absolute; inset: 0; }
.granulado i { position: absolute; top: var(--y); left: var(--x); width: 12px; height: 4px; border-radius: 3px; background: var(--c); transform: rotate(var(--r)); }
.hero__foto { margin: 0; aspect-ratio: 4 / 4.5; border-radius: 22px; overflow: hidden; border: 4px solid #fff; }
.hero__foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.hero__lead { margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.32; }
.ancora { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; font-weight: 800; }

/* Abertura: a massa sai da churreira, o nome sobe e o granulado cai */
.js .hero:not(.pronto) .churro { clip-path: inset(0 100% 0 0); animation: seguro-churro 0s 2.6s forwards; }
.js .hero:not(.pronto) .nome { opacity: 0; animation: seguro-nome 0s 2.6s forwards; }
.js .hero:not(.pronto) .granulado i { opacity: 0; animation: seguro-nome 0s 2.6s forwards; }
@keyframes seguro-churro { to { clip-path: inset(0); } }
@keyframes seguro-nome { to { opacity: 1; } }
.js .hero.abertura:not(.pronto) .churro { animation: sai-massa 760ms 80ms cubic-bezier(.45, .05, .4, 1) both; }
.hero.abertura .bico { animation: bico-corre 760ms 80ms cubic-bezier(.45, .05, .4, 1) both, bico-some 200ms 840ms both; opacity: 1; }
.js .hero.abertura:not(.pronto) .nome { animation: nome-sobe 480ms 440ms var(--ease-mola) both; }
.js .hero.abertura:not(.pronto) .granulado i { animation: cai 360ms calc(820ms + var(--d)) var(--ease-mola) both; }
@keyframes sai-massa { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes bico-corre { from { left: -6px; } to { left: calc(100% - 28px); } }
@keyframes bico-some { to { opacity: 0; transform: rotate(90deg) translateY(-30px); } }
@keyframes nome-sobe { from { opacity: 0; transform: translateY(18px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes cai { from { opacity: 0; transform: translateY(-44px) rotate(calc(var(--r) + 120deg)); } to { opacity: 1; transform: rotate(var(--r)); } }
.js .hero.sem-abertura:not(.pronto) .nome { opacity: 1; animation: fade 240ms both; }
.js .hero.sem-abertura:not(.pronto) .churro { clip-path: none; animation: none; }
.js .hero.sem-abertura:not(.pronto) .granulado i { opacity: 1; animation: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.linha.is-mexe i { animation: pula 420ms var(--ease-mola); }
@keyframes pula { 40% { transform: translateY(-12px) rotate(var(--r)); } }

/* Botões */
.links { display: grid; gap: 10px; margin-top: 26px; }
.btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 16px; font: 800 17px var(--f-txt); color: var(--choco); text-decoration: none; background: #fff; border: 2.5px solid var(--choco); border-radius: 16px; box-shadow: 0 4px 0 var(--choco); transition: transform 120ms var(--ease-enter), box-shadow 120ms var(--ease-enter); -webkit-tap-highlight-color: transparent; }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--choco); }
.btn--acao { color: #fff; background: var(--rosa); }

/* Abas */
.abas { display: flex; gap: 6px; margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.abas button { flex: 1 0 auto; min-height: 48px; padding: 0 14px; font: 800 16px var(--f-txt); color: var(--choco); background: var(--turquesa-clara); border: 0; border-radius: 24px; cursor: pointer; transition: background 160ms; }
.abas button[aria-selected="true"] { color: #fff; background: var(--choco); }
.painel { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.painel[hidden] { display: none; }
.painel.is-entra { animation: entra 240ms var(--ease-enter); }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }
.prato img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; margin-bottom: 8px; }
.prato p { font-size: 15px; line-height: 1.3; }
.prato--grande { grid-column: 1 / -1; display: grid; grid-template-columns: 56% 1fr; gap: 14px; align-items: center; }
.prato--grande img { margin: 0; aspect-ratio: 1 / 1.05; }
.tambem { grid-column: 1 / -1; padding: 12px 14px; font-weight: 700; background: var(--turquesa-clara); border-radius: 14px; }
.link-acao { display: inline-flex; align-items: center; min-height: 48px; margin-top: 8px; color: var(--rosa); font-weight: 800; text-underline-offset: 4px; }

.loja { margin-inline: -20px; padding: 28px 20px; background: var(--lilas); }
.loja img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; object-position: 50% 30%; border-radius: 20px; margin-bottom: 16px; }
.loja p { margin-bottom: 16px; }
.final { text-align: center; }
.final p { margin-bottom: 16px; }
.flutuante { position: fixed; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); z-index: 20; display: inline-flex; align-items: center; gap: 10px; min-height: 54px; padding: 0 24px; color: #fff; background: var(--rosa); border: 2.5px solid var(--choco); border-radius: 28px; font-weight: 800; text-decoration: none; white-space: nowrap; visibility: hidden; opacity: 0; transform: translate(-50%, 16px); transition: opacity 240ms var(--ease-enter), transform 240ms var(--ease-enter), visibility 0s 240ms; }
.flutuante.is-visivel { visibility: visible; opacity: 1; transform: translate(-50%, 0); transition-delay: 0s; }

.rodape { margin-top: 44px; padding: 0 20px; text-align: center; font-size: 14px; }
.credito { display: flex; width: fit-content; align-items: center; gap: 14px; min-height: 44px; margin: 18px auto 0; text-align: left; font-size: 13px; line-height: 1.35; text-decoration: none; -webkit-tap-highlight-color: transparent; }
.credito-txt strong { display: block; font-size: 15px; font-weight: 800; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.selo-b2 { --seal-ink: currentColor; --seal-accent: var(--rosa); --seal-ring: 0; --seal-font: var(--f-txt); flex: none; width: 72px; height: 72px; overflow: visible; transition: rotate 320ms cubic-bezier(.22, 1, .36, 1); }
.selo-borda, .selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: .7; stroke-dasharray: var(--seal-ring); opacity: .75; }
.selo-texto { fill: var(--seal-ink); font-family: var(--seal-font); font-size: 6.3px; font-weight: 800; letter-spacing: .8px; }
.selo-b { fill: var(--seal-ink); }
.selo-acento { fill: var(--seal-accent); }
.credito:active .selo-b2 { rotate: -10deg; }
.selo-giro { transform-box: view-box; transform-origin: 50px 50px; }
@keyframes selo-gira { to { transform: rotate(360deg); } }
@keyframes selo-flutua { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@media (prefers-reduced-motion: no-preference) {
  .selo-giro { animation: selo-gira 24s linear infinite; }
  .selo-b2 { animation: selo-flutua 4.8s ease-in-out infinite; }
  .selo-b2.is-still, .selo-b2.is-still .selo-giro, .is-page-hidden .selo-b2, .is-page-hidden .selo-giro { animation-play-state: paused; }
}
/* Reduced motion: churro pronto e granulado no lugar, nome com fade curto */
@media (prefers-reduced-motion: reduce) {
  .js .hero:not(.pronto) .churro, .js .hero:not(.pronto) .granulado i { clip-path: none; opacity: 1; animation: none; }
  .js .hero:not(.pronto) .nome, .hero .nome { opacity: 1; animation: fade 200ms both; }
  .painel.is-entra, .linha.is-mexe i { animation: none; }
  .flutuante { transform: translate(-50%, 0); transition: opacity 200ms, visibility 0s 200ms; }
  .btn { transition: none; }
  .credito:active .selo-b2 { rotate: none; }
}