/* Fotomontagem: papel, tesoura, fita e rabisco. Carrega depois de site.css. */
:root {
  --papel-claro: #fffdf8;
  --mostarda: #e3a72f;
  --fita: rgba(236, 222, 190, 0.78);
  --sombra-papel: 0 1px 1px rgba(43, 31, 25, 0.12), 0 8px 18px -8px rgba(43, 31, 25, 0.45);
  --sombra-recorte: drop-shadow(0 10px 14px rgba(43, 31, 25, 0.28));
}

/* Grão de papel por cima de tudo. Sem blend: barato de rolar. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background: url("../img/grao.svg"); opacity: 0.22;
}

/* ------------------------------------------------ papel rasgado entre seções */
.rasgado { position: relative; }
.rasgado::before, .rasgado::after {
  content: ""; position: absolute; left: 0; right: 0; height: 28px; z-index: 1;
  background: inherit; pointer-events: none;
  -webkit-mask: url("../img/rasgo.svg") 0 0 / 1200px 28px repeat-x;
  mask: url("../img/rasgo.svg") 0 0 / 1200px 28px repeat-x;
}
.rasgado::before { top: -27px; }
.rasgado::after { bottom: -27px; transform: scaleY(-1); -webkit-mask-position: 340px 0; mask-position: 340px 0; }
.rasgado--so-topo::after { display: none; }

/* ------------------------------------------------ tira de papel no título */
.tira {
  display: inline-block; position: relative;
  padding: 0.02em 0.22em 0.08em; margin: 0.04em 0;
  background: var(--fundo-tira, var(--rosa)); color: var(--tinta);
  transform: rotate(var(--giro, -1.5deg));
  box-shadow: var(--sombra-papel);
  font-style: normal;
  clip-path: polygon(0 4%, 3% 0, 22% 3%, 48% 0, 71% 4%, 100% 1%, 99% 46%, 100% 97%, 76% 100%, 51% 96%, 27% 100%, 2% 97%, 0 55%);
}
.tira--terracota { --fundo-tira: var(--terracota); color: var(--papel-claro); }
.tira--clara { --fundo-tira: var(--papel-claro); }
.tira--mostarda { --fundo-tira: var(--mostarda); }
h1 .tira, h2 .tira { color: var(--tinta); }
h1 .tira.tira--terracota, h2 .tira.tira--terracota { color: var(--papel-claro); }
h2 em.tira { font-style: italic; }

/* ------------------------------------------------ fita adesiva */
.fitado { position: relative; }
.fitado::before {
  content: ""; position: absolute; z-index: 3; left: 50%; top: -14px;
  width: 92px; height: 26px; margin-left: -46px;
  background: var(--fita);
  transform: rotate(var(--giro-fita, -4deg));
  clip-path: polygon(0 12%, 4% 0, 8% 14%, 12% 0, 88% 0, 92% 16%, 96% 2%, 100% 14%, 100% 88%, 96% 100%, 92% 86%, 88% 100%, 12% 100%, 8% 88%, 4% 100%, 0 86%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.fitado--canto::before { left: -18px; top: 10px; margin: 0; width: 70px; --giro-fita: -38deg; }

/* ------------------------------------------------ foto impressa */
.impressa {
  background: var(--papel-claro); padding: 8px 8px 10px;
  box-shadow: var(--sombra-papel);
  transform: rotate(var(--giro, 0deg));
  transition: transform var(--normal) var(--saida);
}
.impressa:hover { transform: rotate(0deg) scale(1.02); z-index: 4; }
.impressa img { width: 100%; height: 100%; object-fit: cover; }

/* retícula de jornal por cima de uma foto */
.reticula { position: relative; }
.reticula::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(rgba(43, 31, 25, 0.35) 0.9px, transparent 1.3px) 0 0 / 5px 5px;
  mix-blend-mode: multiply; opacity: 0.55;
}

/* recorte com borda de tesoura (a borda branca vem no PNG) */
.recortada { filter: var(--sombra-recorte); }

/* ------------------------------------------------ selo e etiqueta */
.selo {
  display: grid; place-items: center; text-align: center;
  width: 150px; aspect-ratio: 1; padding: 0.75rem; border-radius: 50%;
  background: var(--mostarda); color: var(--tinta);
  transform: rotate(var(--giro, 10deg));
  box-shadow: var(--sombra-papel);
  outline: 2px dashed rgba(43, 31, 25, 0.5); outline-offset: -9px;
}
.selo strong { display: block; font: 400 1.65rem/0.95 var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }
.selo strong + span { display: block; font: 800 0.62rem/1.2 var(--sans); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.3rem; max-width: 10ch; }

.etiqueta {
  display: inline-block; background: var(--tinta); color: var(--papel-claro);
  font: 800 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.5rem 0.7rem; transform: rotate(var(--giro, -2deg));
}
.etiqueta b { color: var(--mostarda); font-weight: 800; }

/* ------------------------------------------------ rabisco à mão */
.rabisco { position: absolute; pointer-events: none; overflow: visible; }
.rabisco path {
  fill: none; stroke: var(--cor-rabisco, var(--terracota)); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1100ms var(--saida) 250ms;
}
.visivel .rabisco path, .rabisco.visivel path { stroke-dashoffset: 0; }
.sem-js .rabisco path { stroke-dashoffset: 0; }
.palavra-circulada { position: relative; display: inline-block; white-space: nowrap; }
.palavra-circulada .rabisco { inset: -18% -9%; width: 118%; height: 136%; }

/* ------------------------------------------------ nota colada (fundo escuro) */
.nota-colada {
  background: var(--papel-claro); color: var(--tinta);
  padding: 1.75rem 1.5rem 1.5rem;
  box-shadow: 0 14px 28px -12px rgba(0, 0, 0, 0.6);
  transform: rotate(var(--giro, 0deg));
}

@media (prefers-reduced-motion: reduce) {
  .rabisco path { stroke-dashoffset: 0; }
}
main { overflow-x: clip; }
h2 em.tira, .secao--escura h2 em.tira { color: var(--tinta); }
h2 em.tira.tira--terracota { color: var(--papel-claro); }

/* ------------------------------------------------ amostras de tinta, trena, folha de contato */
.amostras { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; }
.amostra { width: 74px; background: var(--papel-claro); padding: 5px 5px 0; box-shadow: var(--sombra-papel); transform: rotate(var(--giro)); }
.amostra i { display: block; height: 70px; }
.amostra span { display: block; font: 800 0.55rem/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--tinta); padding: 0.45rem 0 0.5rem; }
.trena {
  height: 34px; max-width: 420px; transform: rotate(-2deg);
  background:
    repeating-linear-gradient(90deg, var(--tinta) 0 1.5px, transparent 1.5px 10px) 0 0 / 100% 9px no-repeat,
    repeating-linear-gradient(90deg, var(--tinta) 0 2px, transparent 2px 50px) 0 0 / 100% 16px no-repeat,
    var(--mostarda);
  box-shadow: var(--sombra-papel);
}

.contato__folha { background: var(--papel-claro); padding: clamp(2rem, 5vw, 4rem); box-shadow: var(--sombra-papel); transform: rotate(-0.6deg); max-width: 900px; }
.contato a.email { font: 300 clamp(1.05rem, 0.5rem + 2.7vw, 2.7rem)/1.15 var(--serif); text-decoration: none; white-space: nowrap; background: linear-gradient(var(--rosa), var(--rosa)) 0 88% / 100% 0.32em no-repeat; transition: background-size var(--normal) var(--saida); }
.contato a.email:hover { background-size: 100% 0.9em; }

/* ------------------------------------------------ logos das marcas */
.logo-marca { display: block; border-radius: 50%; background: var(--papel-claro); padding: 4px; box-shadow: var(--sombra-papel); transition: transform var(--normal) var(--saida); }
.logo-marca img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.logo-marca:hover { transform: rotate(-6deg) scale(1.06); }
.logo-marca--mini { width: 52px; height: 52px; flex: none; }
.logo-marca--adesivo { position: absolute; z-index: 5; width: 84px; height: 84px; right: -26px; bottom: 10%; transform: rotate(10deg); }
.logo-marca--adesivo:hover { transform: rotate(0deg) scale(1.06); }
.case__capas { position: relative; }
.case__cabeca { display: flex; align-items: center; gap: 0.9rem; }
.case__cabeca .case__marca { margin: 0; }
.marcas { gap: 1.75rem 2.5rem !important; }
.marca-colada { display: flex; align-items: center; gap: 0.85rem; transform: rotate(var(--giro)); }
.marca-colada .logo-marca { width: 72px; height: 72px; }
.marca-colada span { font: 400 var(--t-h3)/1.2 var(--serif); }
@media (max-width: 560px) { .logo-marca--adesivo { width: 68px; height: 68px; right: -6px; } }

/* ------------------------------------------------ audiência */
.graficos { display: grid; gap: 2.5rem 2rem; margin-top: 3.5rem; align-items: start; }
@media (min-width: 900px) { .graficos { grid-template-columns: 0.8fr 1.2fr 1fr; } }
.grafico { margin: 0; padding: 1.75rem 1.5rem 1.5rem; }
.grafico__titulo { font: 800 0.7rem/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--terracota); margin-bottom: 1.25rem; }
.grafico__nota { margin: 1.25rem 0 0; font: 400 1.05rem/1.3 var(--serif); font-style: italic; color: var(--tinta-2); }

.rosca { position: relative; width: min(220px, 100%); margin: 0 auto; }
.rosca svg { display: block; width: 100%; rotate: -90deg; }
.rosca circle { fill: none; stroke-width: 15; }
.rosca__fundo { stroke: var(--papel-2); }
.rosca__valor {
  stroke: var(--terracota); stroke-dasharray: 100; stroke-dashoffset: 100;
  transition: stroke-dashoffset 1400ms var(--saida) 200ms;
}
.visivel .rosca__valor { stroke-dashoffset: calc(100 - var(--v)); }
.rosca__miolo { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.rosca__miolo strong { font: 300 3rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.rosca__miolo span { font-size: 0.85rem; color: var(--tinta-2); }

.colunas { display: flex; align-items: flex-end; gap: 0.6rem; height: 220px; }
.coluna { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.coluna i {
  display: block; width: 100%; height: calc(var(--h) * 78%); min-height: 4px;
  background: var(--rosa); transform: scaleY(0); transform-origin: bottom;
  transition: transform 900ms var(--saida);
  clip-path: polygon(0 3%, 30% 0, 62% 4%, 100% 1%, 100% 100%, 0 100%);
}
.coluna--maior i { background: var(--terracota); }
.visivel .coluna i { transform: scaleY(1); }
.coluna b { font: 400 1rem/1 var(--serif); font-variant-numeric: tabular-nums; }
.coluna--maior b { color: var(--terracota); }
.coluna span { font-size: 0.75rem; color: var(--tinta-3); white-space: nowrap; }

.linhas { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.linhas li { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 0.75rem; align-items: center; }
.linhas span { font-size: 0.92rem; }
.linhas b { font: 400 1.05rem/1 var(--serif); font-variant-numeric: tabular-nums; grid-column: 2; grid-row: 1; }
.linhas i {
  grid-column: 1 / -1; display: block; height: 10px; width: calc(var(--w) * 100%);
  background: var(--mostarda); transform: scaleX(0); transform-origin: left;
  transition: transform 900ms var(--saida);
}
.linhas li:first-child i { background: var(--terracota); }
.visivel .linhas i { transform: scaleX(1); }

.fonte { margin: 2rem 0 0; font-size: 0.8rem; color: var(--tinta-3); }
.carimbo-exemplo { display: none; }
.audiencia--exemplo .carimbo-exemplo {
  display: inline-block; margin: 1.5rem 0 0; padding: 0.4rem 0.8rem; rotate: -3deg;
  border: 2px solid #b3261e; color: #b3261e; font: 800 0.75rem/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase;
}
.audiencia--exemplo .fonte { display: none; }
@media (prefers-reduced-motion: reduce) {
  .rosca__valor { stroke-dashoffset: calc(100 - var(--v)); }
  .coluna i, .linhas i { transform: none; }
}