/* Sallys Rocha — BIO PRIME
   A parede verde do estúdio com os cartões de flash pendurados.
   Ultra (letreiro pintado) no nome e nos títulos; Bricolage Grotesque no texto. */

:root {
  /* cor: tirada da parede do estúdio, do selo e da cartela de flash */
  --parede: #142618;       /* fundo: o verde-garrafa da parede das fotos */
  --parede-alta: #1D3522;  /* superfície */
  --papel: #F1EAD8;        /* texto sobre a parede e fundo das seções de papel */
  --papel-2: #D3CCB8;      /* texto de apoio sobre a parede */
  --papel-fundo: #E6DCC4;  /* papel mais escuro: prévia da mensagem */
  --tinta: #000000;        /* contorno do old school */
  --tinta-2: #45413A;      /* texto de apoio sobre o papel */
  --amarelo: #F2C230;      /* ação: só os botões de WhatsApp */
  --amarelo-press: #DDAE1F;
  --vermelho: #D22715;     /* a rosa do selo: faixa e sombra do nome */
  --vermelho-dobra: #7A140C;
  --menta: #BFDFBA;        /* o aro do selo: apoio e foco sobre a parede */

  --f-titulo: 'Ultra', 'Rockwell Extra Bold', Georgia, serif;
  --f-texto: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* motion */
  --motion-instant: 90ms;
  --motion-fast: 150ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 450ms;
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-standard: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-voo: cubic-bezier(0.33, 0.02, 0.24, 1);
  --carimbo: 4px;          /* profundidade da sombra dura dos botões */

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 16px;
}

body {
  margin: 0;
  min-width: 320px;
  background: var(--parede);
  color: var(--papel);
  font-family: var(--f-texto);
  font-size: 17px;
  line-height: 1.55;
  font-optical-sizing: auto;
  overflow-x: clip;
}

img { max-width: 100%; }

a { color: inherit; }

.visualmente-oculto {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.coluna {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  padding-inline: calc(16px + var(--safe-left)) calc(16px + var(--safe-right));
}

:focus-visible {
  outline: 3px solid var(--menta);
  outline-offset: 3px;
}

.titulo {
  margin: 0 0 10px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(30px, 8.6vw, 38px);
  line-height: 1.05;
}

.intro {
  margin: 0;
  max-width: 36em;
}

.marco-scroll {
  position: absolute;
  top: 160px;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

/* ---------- Botões ---------- */

/* carimbo: sombra dura de letreiro; no toque o botão afunda e a sombra some */
.btn-carimbo {
  box-shadow: var(--carimbo) var(--carimbo) 0 var(--tinta);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.btn-carimbo:active {
  transform: translate(var(--carimbo), var(--carimbo));
  box-shadow: 0 0 0 var(--tinta);
  background-color: var(--amarelo-press);
}

.btn-principal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 20px;
  border: 2px solid var(--tinta);
  border-radius: 12px;
  background: var(--amarelo);
  color: var(--tinta);
  font-weight: 700;
  font-size: 17px;
  text-align: center;
  text-decoration: none;
}
.btn-principal i { font-size: 22px; }

.btn-linha {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 18px;
  border: 2px solid var(--tinta);
  border-radius: 12px;
  color: var(--tinta);
  font-weight: 600;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.btn-linha:active { background-color: rgb(0 0 0 / 0.08); transform: scale(0.98); }

/* ---------- Capa ---------- */

.capa {
  max-width: 560px;
  margin-inline: auto;
  padding: calc(18px + var(--safe-top)) calc(16px + var(--safe-right)) 8px calc(16px + var(--safe-left));
}

.perfil {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.perfil:active .perfil-foto { transform: scale(0.95); }
.perfil-foto {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid var(--menta);
  object-fit: cover;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.perfil-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.perfil-arroba { font-weight: 650; }
.perfil-local {
  color: var(--menta);
  font-size: 15px;
}

/* cartão de flash pendurado na parede */
.cartao {
  margin: 0;
  padding: 8px;
  border: 3px solid var(--tinta);
  border-radius: 6px;
  background: var(--papel);
  box-shadow: 6px 6px 0 #0A150C;
}

.capa-cartao {
  position: relative;
  margin-top: 16px;
  margin-bottom: 58px;
}

.capa-foto {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  background: #C9B9A4;
}

/* faixa: a fita do flash com o nome, cruzando a base da foto */
.faixa {
  position: absolute;
  left: 50%;
  bottom: -46px;
  width: calc(100% + 26px);
  max-width: 540px;
  aspect-ratio: 360 / 96;
  translate: -50% 0;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}
.faixa-pontas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.ponta { transform-box: fill-box; }
.ponta-fita {
  fill: var(--vermelho);
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linejoin: round;
}
.ponta-dobra {
  fill: var(--vermelho-dobra);
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linejoin: round;
}
.faixa-corpo {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 12.2222%;   /* 44 / 360 */
  width: 75.5556%;  /* 272 / 360 */
}
.faixa-fita {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.faixa-fita path {
  fill: var(--papel);
  stroke: var(--tinta);
  stroke-width: 3;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.nome {
  position: absolute;
  left: 0;
  right: 0;
  top: 11%;
  height: 54%;
  display: grid;
  place-items: center;
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(21px, 6.9vw, 34px);
  line-height: 1;
  white-space: nowrap;
}
.nome > span { grid-area: 1 / 1; position: relative; }
.nome-tinta { z-index: 1; color: var(--tinta); }
.nome-sombra {
  color: var(--vermelho);
  translate: 0.09em 0.09em;
}

/* andorinhas: seguram as pontas da fita, de frente para fora */
.andorinha {
  position: absolute;
  top: -44%;
  width: 26%;
  aspect-ratio: 120 / 72;
  pointer-events: none;
}
.andorinha svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.andorinha-esq { left: -1.5%; }
.andorinha-esq svg { transform: scaleX(-1); }
.andorinha-dir { right: -1.5%; }

/* borda de papel: a ave recortada da cartela, legível sobre a parede e sobre a foto */
.ave-borda path {
  fill: var(--papel);
  stroke: var(--papel);
  stroke-width: 5;
  stroke-linejoin: round;
}
.ave-corpo,
.ave-asa,
.ave-cauda,
.ave-bico {
  fill: var(--tinta);
  stroke: var(--tinta);
  stroke-width: 1.4;
  stroke-linejoin: round;
}
.ave-barriga { fill: var(--papel); stroke: var(--tinta); stroke-width: 1.4; }
.ave-garganta { fill: var(--vermelho); stroke: var(--tinta); stroke-width: 1.4; }
.ave-olho { fill: var(--papel); }
.ave-pena { fill: none; stroke: var(--menta); stroke-width: 1.6; stroke-linecap: round; }
.ave-asa-cima { transform-box: view-box; transform-origin: 68px 31px; }
.ave-asa-baixo { transform-box: view-box; transform-origin: 72px 43px; }

.capa-texto { padding-top: 6px; }

.oficio {
  margin: 0;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.25;
}
.proposta {
  margin: 6px 0 0;
  color: var(--papel-2);
  max-width: 30em;
}
.capa-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: 22px;
  margin-top: 6px;
}
.ancora {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--menta);
  font-weight: 600;
  font-size: 16px;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* ---------- Canais ---------- */

.canais { padding-top: 22px; padding-bottom: 44px; }

.lista-canais {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 12px 16px;
  border: 2px solid rgb(241 234 216 / 0.5);
  border-radius: 12px;
  color: var(--papel);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard), transform var(--motion-fast) var(--ease-standard);
}
.canal:not(.btn-carimbo):active {
  background-color: rgb(241 234 216 / 0.08);
  transform: scale(0.985);
}
.canal i {
  flex: none;
  width: 28px;
  color: var(--menta);
  font-size: 22px;
  text-align: center;
}
.canal-texto {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.canal-texto strong { font-size: 17px; font-weight: 650; }
.canal-texto span { color: var(--papel-2); font-size: 14px; }

.canal-whats {
  border-color: var(--tinta);
  background: var(--amarelo);
  color: var(--tinta);
}
.canal-whats i,
.canal-whats .canal-texto span { color: var(--tinta); }

/* ---------- Cartela (vitrine) ---------- */

.cartela {
  padding: 48px 0 52px;
  background: var(--papel);
  color: var(--tinta);
}
.cartela :focus-visible,
.fim :focus-visible,
.folha :focus-visible { outline-color: var(--vermelho); }
.cartela .intro { color: var(--tinta-2); }

/* sem JS os filtros não funcionam: ficam fora e a grade mostra tudo */
.filtros { display: none; }
.js .filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 22px;
}
.chip {
  min-height: 48px;
  padding: 0 18px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] {
  background: var(--tinta);
  color: var(--papel);
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.peca[hidden] { display: none; }

.peca-abrir {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.peca-moldura {
  position: relative;
  display: block;
  overflow: hidden;
  border: 3px solid var(--tinta);
  border-radius: 6px;
  background: #2A2A26;
  transition: transform var(--motion-fast) var(--ease-standard);
}
.peca-abrir:active .peca-moldura { transform: scale(0.97); }
.peca-moldura img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}
.selo-premio {
  position: absolute;
  left: 6px;
  bottom: 6px;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--tinta);
  color: var(--papel);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
}
.peca-nome {
  display: block;
  margin-top: 10px;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.peca-meta {
  display: block;
  color: var(--tinta-2);
  font-size: 14px;
  line-height: 1.35;
}

/* ---------- Manifesto ---------- */

.manifesto { padding-top: 60px; padding-bottom: 44px; }
.manifesto figure { margin: 0; }
.frase { margin: 0; }
.frase p {
  margin: 0;
  font-family: var(--f-titulo);
  font-size: clamp(25px, 7.2vw, 34px);
  line-height: 1.18;
}
.frase p::before {
  content: '“';
  display: block;
  height: 0.62em;
  color: var(--vermelho);
  font-size: 2.3em;
  line-height: 1;
}
.frase-autor {
  margin-top: 16px;
  color: var(--menta);
  font-weight: 650;
}
.manifesto-texto {
  margin: 22px 0 0;
  color: var(--papel-2);
  max-width: 32em;
}

/* ---------- Prêmio ---------- */

.premio { padding-top: 16px; padding-bottom: 60px; }
.premio-cartao { margin-bottom: 26px; }
.premio-cartao img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 2px solid var(--tinta);
  border-radius: 3px;
  background: #22301F;
}
.premio-texto { margin: 0; color: var(--papel-2); }

.marcos {
  margin: 26px 0 0;
  padding: 0 0 0 2px;
  list-style: none;
}
.marco {
  position: relative;
  padding: 0 0 20px 24px;
  border-left: 2px solid rgb(191 223 186 / 0.45);
}
.marco:last-child { padding-bottom: 0; border-left-color: transparent; }
.marco::before {
  content: '';
  position: absolute;
  top: 7px;
  left: -7px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--menta);
}
.marco-ano {
  display: block;
  color: var(--menta);
  font-family: var(--f-titulo);
  font-size: 21px;
  line-height: 1.2;
}
.marco p { margin: 4px 0 0; color: var(--papel-2); }
.marco a {
  color: var(--papel);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* ---------- Orçamento (CTA final) ---------- */

.fim {
  padding: 52px 0 48px;
  background: var(--papel);
  color: var(--tinta);
}
.fim .intro { color: var(--tinta-2); }

.monte {
  display: grid;
  gap: 20px;
  margin: 24px 0 0;
}
.escolha {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.escolha legend {
  margin-bottom: 10px;
  padding: 0;
  font-weight: 700;
  font-size: 16px;
}
.opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.opcao {
  position: relative;
  display: inline-flex;
}
.opcao input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opcao span {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  font-size: 15px;
  font-weight: 550;
  line-height: 1.2;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard),
    transform var(--motion-instant) var(--ease-standard);
}
.opcao input:active + span { transform: scale(0.96); }
.opcao input:checked + span {
  background: var(--tinta);
  color: var(--papel);
}
.opcao input:focus-visible + span {
  outline: 3px solid var(--vermelho);
  outline-offset: 3px;
}

.previa-bloco {
  padding: 14px 16px;
  border: 2px dashed var(--tinta);
  border-radius: 12px;
  background: var(--papel-fundo);
}
.previa-rotulo {
  margin: 0 0 4px;
  color: var(--tinta-2);
  font-size: 14px;
  font-weight: 700;
}
.previa {
  margin: 0;
  font-size: 16px;
  white-space: pre-line;
}
.previa.troca { animation: previa-troca var(--motion-emphasis) var(--ease-enter); }
@keyframes previa-troca {
  from { background-color: rgb(242 194 48 / 0.55); }
  to { background-color: transparent; }
}

.fim .btn-principal { margin-top: 22px; }

.copiar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: 48px;
  margin-top: 10px;
  border: 0;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ---------- Rodapé ---------- */

.rodape {
  padding: 30px calc(16px + var(--safe-right)) calc(26px + var(--safe-bottom)) calc(16px + var(--safe-left));
  color: var(--papel-2);
  font-size: 14px;
  text-align: center;
}
.rodape p { margin: 0; }

.credito {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  margin: 18px auto 0;
  color: var(--papel);
  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: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: #D90000;
  --seal-ring: 0;
  --seal-font: inherit;
  flex: none;
  width: 72px;
  height: 72px;
  overflow: visible;
  transition: rotate 320ms cubic-bezier(0.22, 1, 0.36, 1);
}
.selo-borda,
.selo-anel { fill: none; stroke: var(--seal-ink); }
.selo-borda { stroke-width: 1; }
.selo-anel { stroke-width: 0.7; stroke-dasharray: var(--seal-ring); opacity: 0.75; }
.selo-texto {
  fill: var(--seal-ink);
  font-family: var(--seal-font);
  font-size: 6.3px;
  font-weight: 600;
  letter-spacing: 0.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; }
}

/* o aro pontilhado repete os rebites do selo da Sallys Rocha Tattoo */
.rodape .selo-b2 {
  --seal-accent: var(--amarelo);
  --seal-ring: 0.4 1.4;
  --seal-font: var(--f-texto);
}

/* ---------- CTA flutuante (Regra do CTA) ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 20;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border: 2px solid var(--tinta);
  border-radius: 999px;
  background: var(--amarelo);
  color: var(--tinta);
  font-weight: 700;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
  translate: -50% 16px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--motion-standard) var(--ease-exit),
    translate var(--motion-standard) var(--ease-exit),
    visibility 0s linear var(--motion-standard),
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.cta-flutuante i { font-size: 21px; }
.cta-flutuante.is-visivel {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  transition:
    opacity var(--motion-emphasis) var(--ease-enter),
    translate var(--motion-emphasis) var(--ease-enter),
    visibility 0s,
    transform var(--motion-fast) var(--ease-standard),
    box-shadow var(--motion-fast) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

/* ---------- Folha da peça ---------- */

.folha {
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  max-height: 94svh;
  margin: auto auto 0;
  padding: 0;
  border: 0;
  border-radius: 18px 18px 0 0;
  background: var(--papel);
  color: var(--tinta);
  overscroll-behavior: contain;
}
.folha::backdrop { background: rgb(8 16 10 / 0.66); }
.folha[open] { animation: folha-sobe var(--motion-emphasis) var(--ease-enter); }
.folha.via-vt[open] { animation: none; }
@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-aparece { from { opacity: 0; } }

.folha-corpo {
  position: relative;
  display: grid;
  gap: 10px;
  padding: 14px 16px calc(22px + var(--safe-bottom));
}
.folha-fechar {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 2px solid var(--papel);
  border-radius: 50%;
  background: var(--tinta);
  color: var(--papel);
  font-size: 20px;
  cursor: pointer;
}
.folha-fechar:focus-visible { outline-color: var(--amarelo); }

.folha-fotos {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  border-radius: 8px;
}
.folha-fotos::-webkit-scrollbar { display: none; }
.folha-fotos img {
  flex: 0 0 100%;
  width: 100%;
  height: auto;
  max-height: 60vh;
  max-height: 60svh;
  object-fit: cover;
  border: 3px solid var(--tinta);
  border-radius: 8px;
  background: #2A2A26;
  scroll-snap-align: center;
}
.folha-conta {
  margin: 0;
  color: var(--tinta-2);
  font-size: 14px;
  text-align: center;
}
.folha-titulo {
  margin: 4px 0 0;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.1;
}
.folha-meta { margin: 0; color: var(--tinta-2); font-size: 15px; }
.folha-fala { margin: 0; font-size: 18px; line-height: 1.45; }
.folha-nota { margin: 0; font-size: 15px; font-weight: 600; }
.folha-nota:empty { display: none; }
.folha .btn-principal { margin-top: 8px; }

/* View Transitions: a capa vira a foto da folha; o filtro reorganiza a grade */
::view-transition-group(*) {
  animation-duration: var(--motion-emphasis);
  animation-timing-function: var(--ease-emphasis);
}

/* ---------- Abertura: as andorinhas abrem a faixa ---------- */

/* Só com JS: as camadas da abertura esperam o sinal. Se o script falhar,
   revela-seguro mostra tudo aos 2,6s. Sem JS, nada fica escondido. */
.js [data-ab] { animation: revela-seguro 0s linear 2.6s both; }
@keyframes revela-seguro {
  from { opacity: 0; }
  to { opacity: 1; }
}
.abertura-fim [data-ab] { animation: none; }

/* completa: foto pronta */
.abertura .andorinha-esq { animation: voo-esq 960ms var(--ease-voo) 60ms both; }
.abertura .andorinha-dir { animation: voo-dir 960ms var(--ease-voo) 60ms both; }
.abertura .ave-asa-cima { animation: asa-cima 300ms ease-in-out 120ms 3; }
.abertura .ave-asa-baixo { animation: asa-baixo 300ms ease-in-out 120ms 3; }
/* a fita e as pontas seguem o voo: abrem atrás das andorinhas, como se fossem puxadas */
.abertura .faixa-corpo { animation: fita-abre 840ms linear 60ms both; }
.abertura .ponta-esq { animation: ponta-esq 840ms linear 60ms both; }
.abertura .ponta-dir { animation: ponta-dir 840ms linear 60ms both; }
.abertura .nome-sombra { animation: sombra-bloco 280ms var(--ease-enter) 920ms both; }
.abertura .capa-texto [data-ab] { animation: sobe 420ms var(--ease-enter) calc(1020ms + var(--d, 0) * 90ms) both; }

@keyframes voo-esq {
  0%   { opacity: 0; transform: translate(185%, 42%) scale(0.42) rotate(-8deg); }
  14%  { opacity: 1; }
  52%  { transform: translate(70%, -62%) scale(0.82) rotate(18deg); }
  82%  { transform: translate(-7%, 9%) scale(1.05) rotate(-5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes voo-dir {
  0%   { opacity: 0; transform: translate(-185%, 42%) scale(0.42) rotate(8deg); }
  14%  { opacity: 1; }
  52%  { transform: translate(-70%, -62%) scale(0.82) rotate(-18deg); }
  82%  { transform: translate(7%, 9%) scale(1.05) rotate(5deg); }
  100% { opacity: 1; transform: none; }
}
@keyframes asa-cima { 50% { transform: scaleY(-0.55); } }
@keyframes asa-baixo { 50% { transform: scaleY(-0.6); } }
@keyframes fita-abre {
  0%   { clip-path: inset(-20% 50% -20% 50%); }
  23%  { clip-path: inset(-20% 37% -20% 37%); }
  40%  { clip-path: inset(-20% 25% -20% 25%); }
  58%  { clip-path: inset(-20% 20% -20% 20%); }
  76%  { clip-path: inset(-20% 7% -20% 7%); }
  94%, 100% { clip-path: inset(-20% 0 -20% 0); }
}
@keyframes ponta-esq {
  0%   { opacity: 0; transform: translateX(136px); }
  23%  { opacity: 1; transform: translateX(102px); }
  40%  { transform: translateX(68px); }
  58%  { transform: translateX(54px); }
  76%  { transform: translateX(20px); }
  94%, 100% { opacity: 1; transform: none; }
}
@keyframes ponta-dir {
  0%   { opacity: 0; transform: translateX(-136px); }
  23%  { opacity: 1; transform: translateX(-102px); }
  40%  { transform: translateX(-68px); }
  58%  { transform: translateX(-54px); }
  76%  { transform: translateX(-20px); }
  94%, 100% { opacity: 1; transform: none; }
}
@keyframes sombra-bloco {
  from { opacity: 0; translate: 0 0; }
  to { opacity: 1; translate: 0.09em 0.09em; }
}
@keyframes sobe {
  from { opacity: 0; transform: translateY(10px); }
}

/* curta: a foto demorou; só a parte tipográfica */
.sem-abertura [data-ab] { animation: aparece 320ms var(--ease-standard) both; }
.sem-abertura .capa-texto [data-ab] { animation-delay: calc(120ms + var(--d, 0) * 70ms); }
@keyframes aparece { from { opacity: 0; } }

/* eco: tocar na faixa faz as andorinhas baterem asa */
.faixa.bate .ave-asa-cima { animation: asa-cima 260ms ease-in-out 2; }
.faixa.bate .ave-asa-baixo { animation: asa-baixo 260ms ease-in-out 2; }

/* ---------- Selo: movimento só sem reduced motion ---------- */

@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 ---------- */

@media (prefers-reduced-motion: reduce) {
  :root { --motion-scene: 200ms; }
  /* abertura: faixa e andorinhas já no lugar, só um fade curto */
  .js [data-ab],
  .abertura [data-ab],
  .abertura .capa-texto [data-ab],
  .sem-abertura [data-ab] { animation: aparece 200ms linear both; }
  .abertura .ave-asa-cima,
  .abertura .ave-asa-baixo,
  .faixa.bate .ave-asa-cima,
  .faixa.bate .ave-asa-baixo { animation: none; }
  .abertura-fim [data-ab] { animation: none; }

  /* o carimbo vira troca de cor, sem deslocamento */
  .btn-carimbo:active { transform: none; box-shadow: var(--carimbo) var(--carimbo) 0 var(--tinta); }
  .btn-linha:active,
  .canal:not(.btn-carimbo):active,
  .chip:active,
  .opcao input:active + span,
  .peca-abrir:active .peca-moldura,
  .perfil:active .perfil-foto { transform: none; }

  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
  .folha[open] { animation-name: folha-aparece; animation-duration: 200ms; }
  .previa.troca { animation: none; }
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- Telas largas (adaptação, não o alvo) ---------- */

@media (min-width: 600px) {
  body { font-size: 18px; }
  .capa { padding-top: calc(32px + var(--safe-top)); }
  .faixa { width: calc(100% + 40px); }
}