/* =====================================================================
   LANDING EM COLAGEM (28/10) — a mesma linguagem do login: papel recortado.
   Camada POR CIMA do site.css: não mexe em física, mordida, calculadora nem
   caminho. Peças geradas por arte-montador/landing-colagem/gera.py.
   ===================================================================== */
:root {
  --papel: url(/marca/papel-p1.webp);
  --papel-grosso: url(/marca/papel-p2.webp);
  --fibra: #fbf6ec;
}

/* ---------- 1. papel de verdade no fundo, grão de impressão no resto ---------- */
.mordida, .conta, .caminho, .caminho__topo, .passo--creme, .duvidas {
  background-color: #f6eddd;
  background-image: var(--papel);
  background-size: 384px 384px;
}
.gente, .passo--creme2 {
  background-color: #efe2cb;
  background-image: var(--papel-grosso);
  background-size: 320px 320px;
}
/* laranja e carvão impressos em papel: a fibra aparece por cima da tinta */
.hero, .preco, .painel, .vitrine, .fim { isolation: isolate; }
.hero::after, .preco::after, .painel::after, .fim::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--papel-grosso) 0 0 / 300px 300px;
  mix-blend-mode: multiply;
  opacity: .32;
  z-index: 50;
}
.painel::after, .fim::after { mix-blend-mode: screen; opacity: .07; }
.preco { position: relative; }

/* ---------- 2. rasgo entre seções ----------
   Cada seção desenha no próprio topo a beirada rasgada da seção DE CIMA (com a cor e
   o papel dela). Não dá pra "sair pra cima": várias seções cortam o que passa da borda
   (overflow hidden) e a mordida fica presa na rolagem. O efeito é o mesmo: folha
   colada por cima de folha, com a fibra clara do papel aparecendo no rasgo. */
.mordida, .painel, .caminho, .vitrine, .gente, .preco, .duvidas, .fim { position: relative; }
.mordida::before, .painel::before, .caminho::before, .vitrine::before,
.gente::before, .preco::before, .duvidas::before, .fim::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 34px;
  z-index: 60;
  pointer-events: none;
  background: var(--antes, #f6eddd);
  background-size: var(--antes-tam, 384px 384px);
  -webkit-mask: url(/site/img/papel/rasgo-a.svg) 0 0 / 1200px 100% repeat-x;
  mask: url(/site/img/papel/rasgo-a.svg) 0 0 / 1200px 100% repeat-x;
  transform: scaleY(-1);
  filter: drop-shadow(0 -3px 0 var(--fibra));
}
.mordida::before { --antes: var(--laranja-fundo); }
.painel::before  { --antes: #f6eddd var(--papel); }
.caminho::before { --antes: var(--carvao); -webkit-mask-image: url(/site/img/papel/rasgo-b.svg); mask-image: url(/site/img/papel/rasgo-b.svg); }
/* o último passo do caminho é o do Pix (papel kraft grosso): o rasgo tem que ser dele, senão
   fica uma faixa de outro papel com a beirada reta por cima do rasgo */
.vitrine::before { --antes: #efe2cb var(--papel-grosso); --antes-tam: 320px 320px; }
.gente::before   { --antes: #141311; -webkit-mask-image: url(/site/img/papel/rasgo-b.svg); mask-image: url(/site/img/papel/rasgo-b.svg); }
.preco::before   { --antes: #efe2cb var(--papel-grosso); --antes-tam: 320px 320px; }
.duvidas::before { --antes: var(--laranja-fundo); -webkit-mask-image: url(/site/img/papel/rasgo-b.svg); mask-image: url(/site/img/papel/rasgo-b.svg); }
.fim::before     { --antes: #f6eddd var(--papel); }

/* ---------- 3. títulos em tiras de papel (uma tira por linha) ---------- */
.tira {
  background: url(/site/img/papel/tira-kraft.svg) 0 0 / 100% 100% no-repeat;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  padding: .06em .26em .12em;
  color: var(--carvao);
}
.tira--creme { background-image: url(/site/img/papel/tira-creme.svg); }
.tira--laranja { background-image: url(/site/img/papel/tira-laranja.svg); color: #fffaf2; }
.titulo, .caminho__titulo, .fim__titulo { line-height: 1.16 !important; }
.titulo .tira, .caminho__titulo .tira, .fim__titulo .tira { filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .22)); }
.titulo { transform: rotate(-1deg); transform-origin: 0 50%; }
.titulo--claro .tira, .fim__titulo .tira { background-image: url(/site/img/papel/tira-creme.svg); }

/* o título do topo: tiras gigantes coladas no laranja */
.hero__titulo { line-height: 1.1 !important; transform: rotate(-1.6deg); transform-origin: 0 50%; }
.hero__titulo .tira {
  background-image: url(/site/img/papel/tira-creme.svg);
  color: var(--carvao);
  filter: drop-shadow(0 10px 14px rgba(80, 20, 0, .35));
}
.hero__titulo .destaque { color: var(--laranja); }

/* ---------- 4. comida recortada com margem de papel (adesivo cortado com sobra) ----------
   A comida da física (topo e sacola do fim) usa fotos com o contorno JÁ ASSADO
   (img/recorte/, gerado uma vez): em filtro, cada peça em movimento recalculava as
   5 sombras a cada quadro e o topo caía de ~5,6 ms pra ~22 ms por quadro. Filtro
   só nas peças paradas. */
.mordida img, .fim img:not([src*="/recorte/"]) {
  filter: drop-shadow(3px 0 0 var(--fibra)) drop-shadow(-3px 0 0 var(--fibra)) drop-shadow(0 3px 0 var(--fibra)) drop-shadow(0 -3px 0 var(--fibra)) drop-shadow(0 12px 14px rgba(0, 0, 0, .28));
}

/* ---------- 5. telas presas com fita crepe ---------- */
.janela::after, .celular::after {
  content: "";
  position: absolute;
  z-index: 8;
  width: clamp(80px, 9vw, 130px);
  height: clamp(24px, 2.4vw, 34px);
  background: rgba(236, 222, 190, .82) var(--papel-grosso) 0 0 / 160px 160px;
  background-blend-mode: multiply;
  -webkit-mask: url(/site/img/papel/tira-creme.svg) 0 0 / 100% 100%;
  mask: url(/site/img/papel/tira-creme.svg) 0 0 / 100% 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .18);
  pointer-events: none;
}
.janela::after { top: -14px; left: 7%; transform: rotate(-7deg); }
.celular::after { top: -16px; left: 50%; transform: translateX(-50%) rotate(4deg); }
.janela { overflow: visible !important; }

/* ---------- 6. o 0% em letras recortadas de papéis diferentes ---------- */
.preco__num { display: flex; align-items: flex-end; gap: .02em; }
.recorte {
  display: inline-block;
  padding: .02em .08em .04em;
  background: url(/site/img/papel/tira-creme.svg) 0 0 / 100% 100% no-repeat;
  color: var(--carvao);
  line-height: .86;
  filter: drop-shadow(0 12px 16px rgba(80, 20, 0, .35));
}
.recorte--1 { background-image: url(/site/img/papel/tira-carvao.svg); color: #fffaf2; transform: rotate(-4deg) translateY(-.04em); }
.recorte--2 { background-image: url(/site/img/papel/tira-creme.svg); transform: rotate(3deg); font-size: .82em; }
.recorte--3 { background-image: url(/site/img/papel/tira-kraft.svg); transform: rotate(-2deg) translateY(.03em); }

/* ---------- 7. dúvidas em tiras de papel rasgado ---------- */
.duvidas__lista details {
  background: url(/site/img/papel/tira-creme.svg) 0 0 / 100% 100% no-repeat;
  border: 0 !important;
  margin: 0 0 10px;
  padding: 2px 18px;
  filter: drop-shadow(0 6px 8px rgba(60, 40, 10, .14));
}
.duvidas__lista details:nth-child(odd) { transform: rotate(-.5deg); }
.duvidas__lista details:nth-child(even) { transform: rotate(.45deg); background-image: url(/site/img/papel/tira-kraft.svg); }

/* ---------- 8. botões de papel impresso: sombra seca, afundam ao apertar ---------- */
.botao { border-radius: 10px; }
.botao--escuro { box-shadow: 0 4px 0 #000; }
.botao--laranja { box-shadow: 0 4px 0 #b3300a; }
.botao:active { transform: translateY(3px); box-shadow: 0 1px 0 currentColor; }

@media (max-width: 760px) {
  .mordida::before, .painel::before, .caminho::before, .vitrine::before,
  .gente::before, .preco::before, .duvidas::before, .fim::before { height: 22px; }
  .titulo, .hero__titulo { transform: rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .botao:active { transform: none; }
}

/* ---------- 9. o "rendin" gigante do topo ----------
   Virou a logo pintada (imagem): estilo em site.css (.hero__nome), física em site.js. */

/* ---------- 10. o montador: três celulares colados no papel, gravados do cardápio real ---------- */
.monta {
  position: relative;
  background: #f6eddd var(--papel) 0 0 / 384px 384px;
  padding: clamp(80px, 8vw, 130px) var(--margem) clamp(70px, 7vw, 110px);
  overflow: hidden;
}
.monta::before { --antes: #141311; -webkit-mask-image: url(/site/img/papel/rasgo-b.svg); mask-image: url(/site/img/papel/rasgo-b.svg); }
.gente::before { --antes: #f6eddd var(--papel); -webkit-mask-image: url(/site/img/papel/rasgo-a.svg); mask-image: url(/site/img/papel/rasgo-a.svg); }
.monta__topo { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px 5vw; align-items: end; max-width: 1280px; margin: 0 auto; }
.monta__selo {
  display: inline-block;
  margin-bottom: 18px;
  padding: .3em .9em .38em;
  background: url(/site/img/papel/tira-laranja.svg) 0 0 / 100% 100% no-repeat;
  color: #fffaf2;
  font: 700 15px/1 var(--f-texto);
  letter-spacing: .06em;
  text-transform: uppercase;
  transform: rotate(-3deg);
}
.monta .titulo { font-size: clamp(38px, 4.8vw, 76px); }
.monta__texto p { font-size: 19px; line-height: 1.5; color: #4a4741; max-width: 520px; }
.monta__texto b { color: var(--carvao); }
.monta__nota { margin-top: 14px; font-size: 15px !important; color: #77716a !important; }
.monta__fila {
  list-style: none;
  margin: clamp(48px, 5vw, 80px) auto 0;
  padding: 0;
  max-width: 1180px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(20px, 4vw, 64px);
  align-items: start;
}
.monta__item { display: grid; justify-items: center; gap: 22px; }
.monta__item:nth-child(1) { transform: rotate(-2.4deg); }
.monta__item:nth-child(2) { transform: rotate(1.6deg) translateY(46px); }
.monta__item:nth-child(3) { transform: rotate(-1deg) translateY(12px); }
.monta__cel { height: auto; width: min(100%, calc(84svh * .4615), 380px); }
.monta__cel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #f3ece2; cursor: pointer; }
.monta__item:nth-child(2) .celular::after { left: 12%; transform: rotate(-6deg); }
.monta__item:nth-child(3) .celular::after { left: auto; right: 8%; transform: rotate(8deg); }
.monta__rotulo {
  display: grid;
  gap: 2px;
  max-width: 290px;
  padding: 10px 18px 12px;
  background: url(/site/img/papel/tira-kraft.svg) 0 0 / 100% 100% no-repeat;
  filter: drop-shadow(0 6px 8px rgba(60, 40, 10, .16));
  text-align: center;
}
.monta__item:nth-child(2) .monta__rotulo { background-image: url(/site/img/papel/tira-creme.svg); transform: rotate(-2deg); }
.monta__rotulo b { font: 800 26px/1 var(--f-titulo); font-stretch: 85%; letter-spacing: -.02em; color: var(--carvao); }
.monta__rotulo span { font-size: 14px; line-height: 1.35; color: #4a4741; }

@media (max-width: 899px) {
  .monta__topo { grid-template-columns: minmax(0, 1fr); }
  .monta .titulo { font-size: clamp(34px, 10vw, 48px); }
  .monta__texto p { font-size: 17px; }
  /* no celular, um aparelho por vez: arrasta pro lado */
  .monta__fila {
    display: flex;
    overflow-x: auto;
    gap: 22px;
    margin: 40px calc(var(--margem) * -1) 0;
    padding: 30px var(--margem) 20px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--margem);
    scrollbar-width: none;
  }
  .monta__fila::-webkit-scrollbar { display: none; }
  .monta__item { flex: none; width: min(72vw, 300px); scroll-snap-align: center; }
  .monta__item:nth-child(n) { transform: rotate(-1.2deg); }
  .monta__item:nth-child(2) { transform: rotate(1.2deg); }
  .monta__cel { width: 100%; }
}
@media (max-width: 899px) and (orientation: landscape) and (max-height: 560px) {
  .monta__item { width: min(38vw, 220px); }
}
.monta__texto p + p { margin-top: 12px; }
.monta__cta { margin-top: 22px; }
/* o plus do premium na lista do plano: tira de papel creme sobre o laranja */
.preco__lista li.preco__plus {
  margin-top: 6px;
  padding: 10px 14px 11px;
  background: url(/site/img/papel/tira-creme.svg) 0 0 / 100% 100% no-repeat;
  color: var(--carvao);
  transform: rotate(-.6deg);
}
.preco__plus a { color: var(--laranja-escuro, #c2410c); font-weight: 700; white-space: nowrap; }