/* Case Grão Caramelo: a apresentação de marca em rolagem. Cada .cena = uma prancha. */
:root {
  --creme: #FAEBCC; --marrom: #6B1D06; --caramelo: #F7984A; --laranja: #E14B0C; --amarelo: #F3C383;
  --m: clamp(16px, 3.4vw, 64px); /* margem da prancha (64 em 1920) */
  --titulo: "Patrick Hand", "Comic Neue", cursive;
  --corpo: "Figtree", system-ui, sans-serif;
}
body { background: var(--marrom); color: var(--creme); font-family: var(--corpo); }
img { display: block; max-width: 100%; }
svg { display: block; }

/* ---------- cantos da prancha (fixos) ---------- */
/* cor por canto, como o metaCores das pranchas: body[data-c-tl|tr|bl|br] = claro/escuro */
.meta span, .meta-link { --cor: var(--creme); }
body[data-c-tl="escuro"] .meta .tl, body[data-c-tr="escuro"] .meta .tr,
body[data-c-bl="escuro"] .meta .bl, body[data-c-br="escuro"] .meta-link { --cor: var(--marrom); }
.meta { position: fixed; inset: 0; pointer-events: none; z-index: 40; transition: opacity .3s; }
body[data-meta="nenhum"] .meta, body[data-meta="nenhum"] .meta-link { opacity: 0; pointer-events: none; }
.meta span, .meta-link {
  position: fixed; font: 500 clamp(10px, .75vw, 14px)/1 var(--corpo); letter-spacing: .09em; text-transform: uppercase;
  color: var(--cor); transition: color .35s, opacity .3s;
}
.meta .tl { top: var(--m); left: var(--m); }
.meta .tr { top: var(--m); right: var(--m); }
.meta .bl { bottom: var(--m); left: var(--m); }
.meta b { font-weight: 500; font-variant-numeric: tabular-nums; }
.meta-link { bottom: var(--m); right: var(--m); z-index: 41; text-decoration: none; }
.meta-link::after { content: " ↗"; opacity: 0; transition: opacity .2s; }
.meta-link:hover::after, .meta-link:focus-visible::after { opacity: 1; }
.meta-link:focus-visible { outline: 2px solid var(--cor); outline-offset: 4px; }
/* no celular as cenas passam da altura da tela: só a linha de cima fica (nome + número), o link do F2 Café vai pro rodapé */
@media (max-width: 760px) {
  .meta .tr, .meta-link { display: none; }
  .meta .bl { bottom: auto; left: auto; top: var(--m); right: var(--m); }
  body[data-c-tr="escuro"] .meta .bl { --cor: var(--marrom); }
  body[data-c-tr="claro"] .meta .bl { --cor: var(--creme); }
}

/* ---------- base das cenas ---------- */
.cena { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; }
.fundo { position: absolute; inset: 0; }
.fundo img { width: 100%; height: 100%; object-fit: cover; }
[data-zoom] img { transform: scale(calc(1.08 + .06 * var(--p, 0))); will-change: transform; }

/* títulos: Patrick Hand em caixa-alta com negrito falso (contorno da própria cor), como nas pranchas */
.titulo {
  font: 400 clamp(42px, 5.6vw, 112px)/.98 var(--titulo); text-transform: uppercase; letter-spacing: .02em;
  -webkit-text-stroke: .026em currentColor; paint-order: stroke fill;
}
.titulo span { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .surge span { opacity: 0; transform: translateY(.35em) rotate(-1.5deg); transition: opacity .6s, transform .8s cubic-bezier(.2, 1.4, .4, 1); }
  .surge.visto span { opacity: 1; transform: none; }
  .surge.visto span:nth-child(2) { transition-delay: .12s; }
  .surge.visto span:nth-child(3) { transition-delay: .24s; }
}

/* ---------- 01 capa ---------- */
.capa { display: grid; place-items: center; }
.capa .fundo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .35); }
.letreiro { position: relative; width: min(72vw, 960px, 110svh); transform: translateY(var(--sobe, 0)) scale(var(--cresce, 1)); }
.letreiro img { width: 100%; height: auto; }
@media (prefers-reduced-motion: no-preference) {
  .letreiro { animation: chega 1.1s cubic-bezier(.2, 1.3, .4, 1) both; }
  @keyframes chega { from { opacity: 0; scale: .9; } }
}
.dica { position: absolute; bottom: calc(var(--m) + 2px); left: 50%; translate: -50% 0; font-size: 13px; letter-spacing: .02em; opacity: .85; white-space: nowrap; }
.dica::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--caramelo); margin-right: 10px; vertical-align: 1px; animation: pulsa 1.6s ease-in-out infinite; }
@keyframes pulsa { 50% { transform: scale(1.6); opacity: .5; } }
@media (max-width: 560px) { .dica { bottom: calc(var(--m) + 34px); font-size: 12px; } }

/* ---------- 02 conceito ---------- */
.conceito .titulo { position: absolute; left: var(--m); top: 20%; color: var(--creme); }
.conceito .fundo img { object-position: 55% 50%; }
.conceito .assina { position: absolute; right: var(--m); bottom: calc(var(--m) + 28px); width: clamp(96px, 11.2vw, 216px); height: auto; }
@media (max-width: 760px) {
  .conceito .fundo img { object-position: 38% 50%; }
  .conceito .titulo { top: calc(var(--m) + 44px); }
  .conceito .fundo::after { content: ""; position: absolute; inset: 0 0 50% 0; background: linear-gradient(rgba(0,0,0,.45), transparent); }
}

/* ---------- 03 logo ---------- */
.logo { background: var(--creme); display: grid; place-items: center; perspective: 1200px; }
.palco { width: min(800px, 74vw, 76svh); }
.palco svg, .palco img { width: 100%; height: auto; overflow: visible; }
[data-segue] svg { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transform-style: preserve-3d; }
#mascote, #letreiro { transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.coracao { transform-box: fill-box; transform-origin: 50% 60%; }
@media (prefers-reduced-motion: no-preference) {
  .coracao { animation: bate 1.8s ease-in-out infinite; }
  @keyframes bate { 0%, 40%, 100% { transform: scale(1); } 12% { transform: scale(1.22); } 24% { transform: scale(1.06); } 32% { transform: scale(1.16); } }
}

/* ---------- 04 versões e cores ---------- */
.versoes { background: var(--creme); display: grid; grid-template-rows: 1fr auto; }
.tres { display: grid; grid-template-columns: repeat(3, 1fr); min-height: 66svh; }
.painel { display: grid; place-items: center; padding: 12%; }
.painel img { width: 100%; max-width: 420px; height: auto; transition: transform .5s cubic-bezier(.2, 1.4, .4, 1); }
.painel:hover img { transform: scale(1.05) rotate(-2deg); }
.painel.marrom { background: var(--marrom); }
.painel.creme { background: var(--creme); }
.painel.caramelo { background: var(--caramelo); }
.paleta { display: flex; min-height: 34svh; }
.paleta button {
  all: unset; box-sizing: border-box; cursor: copy; flex: 1; background: var(--c); color: var(--marrom);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 6px; padding: clamp(18px, 3.4vw, 64px) var(--m);
  font: 500 clamp(13px, .95vw, 18px)/1.3 var(--corpo); transition: flex-grow .5s cubic-bezier(.2, 1, .3, 1);
}
.paleta button.cl { color: var(--creme); }
.paleta b { font-weight: 500; opacity: .75; }
.paleta button:hover, .paleta button:focus-visible { flex-grow: 1.7; }
.paleta button:focus-visible { outline: 3px solid var(--laranja); outline-offset: -6px; }
.paleta button.copiou b::after { content: " · copiado"; }
@media (max-width: 760px) {
  .tres { grid-template-columns: 1fr; min-height: 0; }
  .painel { height: 46svh; padding: 10% 22%; }
  .paleta { flex-direction: column; min-height: 0; }
  .paleta button { flex-direction: row; justify-content: space-between; padding: 22px var(--m); }
  .paleta button:hover { flex-grow: 1; }
}

/* ---------- 05 mosaico ---------- */
.mosaico { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; height: 100svh; min-height: 560px; }
.mosaico figure { margin: 0; position: relative; overflow: hidden; }
.mosaico figure > img { width: 100%; height: 100%; object-fit: cover; }
.m-cao { grid-row: 1 / 3; }
.m-cao img { object-position: 40% 50%; }
.m-cao .titulo { position: absolute; left: var(--m); bottom: calc(var(--m) + 44px); color: var(--creme); font-size: clamp(40px, 4.8vw, 92px); }
.m-mascote { background: var(--caramelo); display: grid; place-items: center; perspective: 900px; }
.m-mascote svg, .m-mascote img { width: min(28vw, 48svh, 520px); height: auto; overflow: visible; }
@media (max-width: 760px) {
  .mosaico { grid-template-columns: 1fr; grid-template-rows: 78svh 44svh 52svh; height: auto; }
  .m-cao { grid-row: auto; }
  .m-mascote svg, .m-mascote img { width: min(70vw, 40svh); }
}

/* ---------- 06 saquinho ---------- */
.saquinho .fundo img { object-position: 50% 50%; }

/* ---------- 07 caixa ---------- */
.caixa { display: grid; grid-template-columns: 1fr 1fr; background: var(--marrom); }
.c-foto { margin: 0; overflow: hidden; }
.c-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; transform: translateY(calc(var(--p, 0) * -3%)) scale(1.08); }
.c-texto { align-self: center; padding: var(--m) calc(var(--m) * 1.5); }
.c-texto .titulo { color: var(--creme); }
.c-texto p { margin-top: clamp(20px, 3vw, 56px); font-size: clamp(17px, 1.25vw, 24px); line-height: 1.42; opacity: .92; }
@media (max-width: 760px) {
  .caixa { grid-template-columns: 1fr; }
  .c-foto { height: 72svh; }
  .c-texto { padding: 64px var(--m) 96px; }
}

/* ---------- 08 aplicações ---------- */
.aplicacoes { background: var(--creme); color: var(--marrom); padding: calc(var(--m) * 2.2) var(--m) calc(var(--m) * 2.4); }
.a-topo { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(28px, 4vw, 72px); }
.a-topo p { font-size: clamp(15px, 1.1vw, 20px); line-height: 1.45; max-width: 30ch; }
.a-topo small { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; opacity: .6; }
.mural { columns: 3 260px; column-gap: clamp(12px, 1.4vw, 24px); }
.mk {
  all: unset; box-sizing: border-box; cursor: zoom-in; display: block; width: 100%; margin-bottom: clamp(12px, 1.4vw, 24px);
  break-inside: avoid; position: relative; border-radius: 4px; overflow: hidden; background: var(--amarelo);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) scale(var(--s, 1));
  transition: transform .5s cubic-bezier(.2, 1, .3, 1), box-shadow .5s;
  box-shadow: 0 1px 0 rgba(107, 29, 6, .08);
}
.mk img { width: 100%; height: auto; }
/* brilho que segue o mouse: a peça ganha volume */
.mk::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle at var(--bx, 50%) var(--by, 50%), rgba(255, 255, 255, .28), transparent 45%); }
.mk::before { content: attr(data-nome); position: absolute; left: 12px; bottom: 12px; z-index: 1; font: 400 20px/1 var(--titulo); text-transform: uppercase;
  -webkit-text-stroke: .02em currentColor; color: var(--marrom); background: var(--creme); padding: 7px 10px 5px; border-radius: 3px;
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.mk.ativo { --s: 1.025; transition: transform .12s linear, box-shadow .5s; box-shadow: 0 30px 50px -24px rgba(107, 29, 6, .55); z-index: 2; }
.mk.ativo::after { opacity: 1; }
.mk:hover::before, .mk:focus-visible::before { opacity: 1; transform: none; }
.mk:focus-visible { outline: 3px solid var(--laranja); outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .mural .mk { opacity: 0; translate: 0 30px; transition: transform .5s cubic-bezier(.2, 1, .3, 1), box-shadow .5s, opacity .7s, translate .9s cubic-bezier(.2, 1, .3, 1); }
  .mural .mk.visto { opacity: 1; translate: none; }
  .mural .mk.ativo { transition: transform .12s linear, box-shadow .5s, opacity .7s, translate .9s; }
}

/* ---------- 09 figurinhas ---------- */
.figurinhas { background: var(--caramelo); color: var(--marrom); display: grid; grid-template-columns: 1fr minmax(300px, 440px); gap: clamp(32px, 6vw, 120px);
  align-items: center; padding: calc(var(--m) * 2) calc(var(--m) * 1.5) calc(var(--m) * 2) var(--m); }
.f-texto p { margin-top: 24px; font-size: clamp(16px, 1.2vw, 22px); line-height: 1.45; max-width: 26ch; }
.conversa {
  background: var(--creme); border-radius: 18px; padding: 18px 14px 22px; display: flex; flex-direction: column; gap: 6px;
  box-shadow: 0 40px 70px -40px rgba(107, 29, 6, .7);
  background-image: radial-gradient(rgba(107, 29, 6, .07) 1.4px, transparent 1.6px); background-size: 18px 18px;
}
.hora { align-self: center; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; background: rgba(107, 29, 6, .08); padding: 4px 10px; border-radius: 6px; margin-bottom: 8px; }
.msg { max-width: 78%; font-size: 15px; line-height: 1.35; padding: 8px 10px 6px; border-radius: 10px; position: relative; }
.msg i { font-style: normal; font-size: 10.5px; opacity: .55; margin-left: 10px; float: right; margin-top: 6px; }
.msg.ele { align-self: flex-start; background: #fff; border-top-left-radius: 2px; }
.msg.eu { align-self: flex-end; background: var(--amarelo); border-top-right-radius: 2px; }
.msg.fig { background: none; padding: 0; width: 34%; }
.msg.fig img { width: 100%; height: auto; }
.msg.fig i { display: block; float: none; text-align: right; margin: 2px 4px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .conversa .msg { opacity: 0; transform: translateY(14px) scale(.96); transform-origin: left bottom; transition: opacity .35s, transform .45s cubic-bezier(.2, 1.5, .4, 1); }
  .conversa .msg.eu { transform-origin: right bottom; }
  .conversa .msg.fig { transform: scale(.4) rotate(-8deg); }
  .conversa .msg.mostra { opacity: 1; transform: none; }
}
@media (max-width: 760px) {
  .figurinhas { grid-template-columns: 1fr; padding: 96px var(--m) 110px; }
  .conversa { min-height: 0; }
}

/* ---------- 10 fechamento ---------- */
.fechamento { background: var(--creme); color: var(--marrom); display: grid; place-content: center; justify-items: center; gap: clamp(16px, 3vw, 48px); perspective: 1000px; padding: 96px var(--m); }
.f-mascote { width: min(540px, 66vw, 52svh); cursor: pointer; }
.f-mascote svg, .f-mascote img { width: 100%; height: auto; overflow: visible; }
.f-mascote:focus-visible { outline: 3px solid var(--laranja); outline-offset: 8px; border-radius: 12px; }
.fechamento .titulo { text-align: center; font-size: clamp(44px, 5.4vw, 104px); }
.fechamento .titulo span { display: inline; }
@media (max-width: 560px) { .fechamento .titulo span { display: block; } }

/* ---------- pipoca, aviso e lightbox ---------- */
.aviso {
  position: fixed; left: 50%; bottom: calc(var(--m) + 36px); z-index: 70; translate: -50% 20px; opacity: 0; pointer-events: none;
  font: 400 20px/1 var(--titulo); text-transform: uppercase; -webkit-text-stroke: .02em currentColor; letter-spacing: .02em;
  background: var(--marrom); color: var(--creme); padding: 12px 18px 10px; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .5); transition: opacity .25s, translate .35s cubic-bezier(.2, 1.5, .4, 1);
}
.aviso.on { opacity: 1; translate: -50% 0; }
@media (max-width: 560px) { .aviso { white-space: normal; text-align: center; width: max-content; max-width: calc(100vw - 32px); } }

.luz { position: fixed; inset: 0; z-index: 80; background: rgba(40, 12, 3, .94); display: grid; place-items: center; padding: 56px var(--m); cursor: zoom-out; }
.luz[hidden] { display: none; }
.luz img { max-width: 100%; max-height: calc(100svh - 140px); width: auto; height: auto; border-radius: 4px; box-shadow: 0 40px 80px -30px #000; }
.luz-nome { position: absolute; top: var(--m); left: var(--m); font: 400 24px/1 var(--titulo); text-transform: uppercase; -webkit-text-stroke: .02em currentColor; color: var(--creme); }
.luz-fecha { all: unset; cursor: pointer; position: absolute; top: calc(var(--m) - 6px); right: var(--m); font: 500 12px/1 var(--corpo); letter-spacing: .1em; text-transform: uppercase;
  color: var(--creme); border: 1px solid rgba(250, 235, 204, .5); padding: 8px 10px; border-radius: 4px; }
.luz-fecha:hover, .luz-fecha:focus-visible { background: var(--creme); color: var(--marrom); }
@media (prefers-reduced-motion: no-preference) { .luz:not([hidden]) img { animation: amplia .45s cubic-bezier(.2, 1.2, .4, 1); } @keyframes amplia { from { opacity: 0; scale: .94; } } }