/* =========================================================================
   VERSÃO 1 · COLAGEM (Linho)
   A pesquisa vestida como a página da oferta: papel linho, o Victor saindo
   do bloco Argila, ramos recortados cruzando a borda, a pergunta numa folha
   de papel rasgado colada com fita.
   ========================================================================= */
:root {
  --bg: #F0EBE3;
  --fg: var(--cacau);
  --fg-suave: rgba(46, 35, 32, .74);
  --kicker: var(--argila-escura);
  --trilho: rgba(46, 35, 32, .14);
  --cartela: #FFFCF5;
  --opcao-bg: #FFFDF8;
  --opcao-borda: rgba(46, 35, 32, .2);
  --opcao-sombra: 0 2px 0 rgba(46, 35, 32, .07);
  --campo-bg: #FFFDF8;
  --brinde-bg: rgba(201, 100, 66, .08);
  --foco: var(--salvia);
  --erro: #A5402E;
}
body { background: #F0EBE3 url(assets/papel-linho.webp) 0 0 / 562px auto repeat; }

/* canto Argila rasgado, sangrando no topo esquerdo */
body::before {
  content: ""; position: absolute; z-index: 0; top: -10px; left: -14px; width: 104px; aspect-ratio: 1;
  background: url(assets/canto-argila.webp) 0 0 / 100% 100% no-repeat; filter: drop-shadow(0 3px 5px rgba(46,35,32,.2));
  pointer-events: none;
}
@media (min-width: 900px) { body::before { width: 150px; } }

/* ---------- lateral: a colagem ---------- */
.lateral { display: grid; grid-template-columns: 1fr 176px; align-items: center; gap: var(--e2); }
.lateral .mote { font-size: 1.08rem; }
.colagem { position: relative; width: 100%; aspect-ratio: 1 / 1.12; }
.colagem > img { position: absolute; pointer-events: none; }
.c-bloco   { right: -4%; top: 9%; width: 88%; rotate: 4deg; filter: drop-shadow(0 6px 10px rgba(46,35,32,.18)); }
.c-victor  { right: 4%; top: 0; width: 70%; z-index: 2;
  filter: drop-shadow(1.5px 0 0 #F7F0E3) drop-shadow(-1.5px 0 0 #F7F0E3) drop-shadow(0 1.5px 0 #F7F0E3) drop-shadow(0 -1.5px 0 #F7F0E3) drop-shadow(0 5px 7px rgba(46,35,32,.26)); }
.c-laranja { left: -6%; top: -2%; width: 50%; rotate: -24deg; z-index: 3; filter: drop-shadow(0 3px 5px rgba(46,35,32,.2)); }
.c-gota    { right: -4%; top: 14%; width: 13%; rotate: 14deg; z-index: 3; filter: drop-shadow(0 3px 5px rgba(46,35,32,.2)); }
.c-pitanga { right: -3%; bottom: -3%; width: 30%; rotate: 8deg; z-index: 4; filter: drop-shadow(0 3px 5px rgba(46,35,32,.2)); }
.c-plaquinha {
  position: absolute; z-index: 3; left: 2%; bottom: -3%; width: 86%; margin: 0; padding: .95rem 0 .8rem 1.1rem;
  background: url(assets/selo-cacau.webp) 0 0 / 100% 100% no-repeat; color: var(--creme);
  filter: drop-shadow(0 4px 6px rgba(46,35,32,.3)); rotate: -2deg;
}
.c-plaquinha b { display: block; font: 600 1.05rem/1 var(--serif); letter-spacing: -.01em; }
.c-plaquinha i { display: none; margin-top: 5px; font: 500 .56rem/1.2 var(--sans); font-style: normal; letter-spacing: .1em; text-transform: uppercase; }

@media (min-width: 900px) {
  .lateral { display: flex; flex-direction: column; }
  .colagem { max-width: 390px; margin: 0 auto 0 -4px; }
  .lateral .mote { order: 2; margin-top: 2rem; font-size: 1.4rem; max-width: 24ch; }
  .c-plaquinha { width: 74%; left: 4%; padding: 1.9rem 0 1.7rem 2.6rem; }
  .c-plaquinha b { font-size: 1.85rem; }
  .c-plaquinha i { display: block; font-size: .68rem; }
}
@media (max-width: 899px) { .colagem { grid-column: 2; grid-row: 1; } .lateral .mote { grid-column: 1; grid-row: 1; } }

/* ---------- folha: papel rasgado colado com fita ---------- */
.folha { padding: 60px clamp(22px, 5vw, 56px) 62px; margin-top: 8px; }
.folha::before {
  content: ""; position: absolute; z-index: -1; inset: 0;
  border-style: solid; border-width: 56px 18px; border-image: url(assets/folha-linho.webp) 96 28 fill / 56px 18px stretch;
  filter: drop-shadow(0 12px 16px rgba(46,35,32,.2));
}
.folha::after {
  content: ""; position: absolute; z-index: 2; top: -4px; left: clamp(20px, 6vw, 60px); width: 112px; height: 34px;
  background: url(assets/fita.webp) 0 0 / 100% 100% no-repeat; rotate: -5deg; filter: drop-shadow(0 2px 3px rgba(46,35,32,.2)); pointer-events: none;
}
.folha__topo { margin-top: 4px; }
@media (min-width: 900px) { .folha { min-height: 660px; } }