/* Ana Paula — BIO PRIME
   Toda cor sai de duas tintas e do papel da peça: rosa × azul sobre o papel = sobreimpressão.
   Assinatura: as chapas do lámen entram em registro na abertura. */

:root {
  /* cor */
  --papel: #ECE3D7;        /* fundo: medido no papel do lámen */
  --papel-alto: #F7F2E9;   /* superfície: campo de texto e prévia */
  --rosa: #FF31A0;         /* a tinta do ラーメン, reservada à ação */
  --rosa-press: #EB2190;
  --azul: #1E4FC8;         /* a tinta da tigela: linhas e links (5.5:1 no papel) */
  --azul-claro: #BBCDF6;   /* apoio sobre a sobreimpressão (9.5:1) */
  --sobre: #1C0E6A;        /* rosa × azul sobre o papel: texto e seções escuras (12.6:1) */

  /* tipo */
  --f-titulo: "Dela Gothic One", "Hiragino Kaku Gothic Pro", "Arial Black", sans-serif;
  --f-texto: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* motion */
  --motion-instant: 80ms;
  --motion-fast: 140ms;
  --motion-standard: 220ms;
  --motion-emphasis: 320ms;
  --motion-scene: 460ms;
  --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);

  /* fora de registro: o quanto cada chapa começa deslocada */
  --fora-az: translate(-13px, -8px) rotate(-0.9deg);
  --fora-ro: translate(15px, 9px) rotate(1deg);
  --registro: 0.028em;     /* o rosa que sobra para fora do nome, como numa impressão de verdade */

  --g: 16px;
  --raio: 3px;
  --foco: var(--azul);

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

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--papel);
}

body {
  margin: 0;
  font-family: var(--f-texto);
  font-size: 16px;
  line-height: 1.55;
  color: var(--sobre);
  background: var(--papel);
  overflow-wrap: break-word;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, p, ul, figure, fieldset { margin: 0; padding: 0; }
ul { list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
fieldset { border: 0; min-width: 0; }

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

.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.coluna {
  width: min(100%, 560px);
  margin-inline: auto;
  padding-inline: var(--g);
}

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

.titulo {
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(32px, 10.4vw, 46px);
  line-height: 1.1;
  outline: none;
}

.titulo-papel {
  text-shadow: var(--registro) 0.022em 0 var(--rosa);
}

.intro {
  margin-top: 12px;
  max-width: 34em;
  font-size: 17px;
}

/* ---------- botão principal: o bloco rosa fora de registro; o toque registra ---------- */

.btn-principal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 10px 20px;
  border: 0;
  border-radius: var(--raio);
  background: var(--rosa);
  color: var(--sobre);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--azul);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform var(--motion-instant) var(--ease-standard),
    box-shadow var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

.btn-principal:active {
  transform: translate(4px, 4px);
  box-shadow: 0 0 0 var(--azul);
  background: var(--rosa-press);
}

/* ---------- Hero ---------- */

.capa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;     /* clip não vira contêiner de rolagem, e o scrub das tintas depende disso */
  padding-top: calc(10px + var(--safe-top));
  background: var(--papel) url("images/papel.webp") 0 0 / 280px 160px;
}

.capa-in {
  width: min(100%, 560px);
  margin-inline: auto;
}

.capa-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-inline: var(--g);
}

.perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.perfil-foto {
  width: 44px;
  height: 44px;
  border-radius: 50%;
}

.perfil-texto { display: grid; line-height: 1.25; }
.perfil-arroba { font-weight: 700; font-size: 15px; }
.perfil-local { font-size: 14px; }

.kana {
  font-family: var(--f-titulo);
  font-size: 30px;
  line-height: 1;
  color: var(--rosa);
}

.nome {
  position: relative;
  margin-top: 8px;
  padding-inline: var(--g);
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: clamp(46px, 15vw, 84px);
  line-height: 1.04;
  letter-spacing: -0.005em;
  color: var(--sobre);
  text-shadow: var(--registro) 0.022em 0 var(--rosa);
}

.proposta {
  margin-top: 8px;
  padding-inline: var(--g);
  max-width: 28em;
  font-size: 17px;
  line-height: 1.4;
}

.chapas {
  position: relative;
  aspect-ratio: 3 / 4;
  margin-top: 2px;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.chapa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* a azul é fundo branco multiplicado pelo papel; a rosa é tinta com alfa, por cima, como na peça */
.chapa-azul { mix-blend-mode: multiply; }

.marca {
  position: absolute;
  width: 22px;
  height: 22px;
  mix-blend-mode: multiply;
}
.marca-az { color: var(--azul); }
.marca-ro { color: var(--rosa); }
.marca-1 { top: 2.4%; left: var(--g); }
.marca-2 { right: var(--g); bottom: 2%; }

.capa-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
  padding: 2px var(--g) 14px;
}

.ancora {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--azul);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.ancora:active { color: var(--sobre); }

/* ---------- Abertura: registro das chapas ---------- */

@keyframes seguro { to { transform: none; clip-path: inset(0); opacity: 1; } }

@keyframes passa-rosa {
  from { clip-path: inset(0 0 100% 0); }
  to { clip-path: inset(0); }
}
@keyframes registra-az {
  from { transform: var(--fora-az); }
  74% { transform: translate(1.5px, 1px) rotate(0.08deg); }
  to { transform: none; }
}
@keyframes registra-ro {
  from { transform: var(--fora-ro); }
  74% { transform: translate(-1.5px, -1px) rotate(-0.08deg); }
  to { transform: none; }
}
@keyframes nome-ro {
  from { transform: translate(0.1em, 0.055em); }
  74% { transform: translate(0, 0); }
  to { transform: translate(var(--registro), 0.022em); }
}
@keyframes nome-az {
  from { transform: translate(-0.085em, -0.05em); }
  74% { transform: translate(0.012em, 0.008em); }
  to { transform: none; }
}
@keyframes entra {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

/* Estado inicial só com JS. Se o script falhar, "seguro" leva tudo ao estado final em 2,6s. */
@media (prefers-reduced-motion: no-preference) {
  .js .chapa-azul,
  .js .chapa-branca,
  .js .marca-az {
    transform: var(--fora-az);
    animation: seguro 0s 2.6s forwards;
  }
  .js .chapa-rosa {
    transform: var(--fora-ro);
    clip-path: inset(0 0 100% 0);
    animation: seguro 0s 2.6s forwards;
  }
  .js .marca-ro {
    transform: var(--fora-ro);
    animation: seguro 0s 2.6s forwards;
  }
  .js .kana {
    clip-path: inset(0 0 100% 0);
    animation: seguro 0s 2.6s forwards;
  }

  .js .nome {
    color: transparent;
    text-shadow: none;
  }
  .js .nome::before,
  .js .nome::after {
    content: attr(data-nome);
    position: absolute;
    top: 0;
    left: var(--g);
    mix-blend-mode: multiply;
    pointer-events: none;
    animation: seguro 0s 2.6s forwards;
  }
  .js .nome::before { color: var(--rosa); transform: translate(0.1em, 0.055em); }
  .js .nome::after { color: var(--azul); transform: translate(-0.085em, -0.05em); }

  .js [data-entra] {
    opacity: 0;
    animation: seguro 0s 2.6s forwards;
  }

  /* completa: a rosa passa de cima para baixo, depois as duas encaixam juntas */
  .abertura .chapa-rosa {
    animation:
      passa-rosa 560ms var(--ease-standard) both,
      registra-ro 480ms var(--ease-emphasis) 540ms both;
  }
  .abertura .chapa-azul,
  .abertura .chapa-branca,
  .abertura .marca-az { animation: registra-az 480ms var(--ease-emphasis) 540ms both; }
  .abertura .marca-ro { animation: registra-ro 480ms var(--ease-emphasis) 540ms both; }
  .abertura .kana { animation: passa-rosa 300ms var(--ease-standard) 120ms both; }
  .abertura .nome::before { animation: nome-ro 480ms var(--ease-emphasis) 540ms both; }
  .abertura .nome::after { animation: nome-az 480ms var(--ease-emphasis) 540ms both; }
  .abertura [data-entra] { animation: entra var(--motion-emphasis) var(--ease-enter) calc(900ms + var(--d, 0) * 90ms) both; }

  /* foto lenta: só a parte tipográfica */
  .sem-abertura .chapa { transform: none; clip-path: none; animation: none; }
  .sem-abertura .marca { transform: none; animation: none; }
  .sem-abertura .kana { clip-path: none; animation: none; }
  .sem-abertura .nome::before { animation: nome-ro 420ms var(--ease-emphasis) both; }
  .sem-abertura .nome::after { animation: nome-az 420ms var(--ease-emphasis) both; }
  .sem-abertura [data-entra] { animation: entra var(--motion-standard) var(--ease-enter) calc(200ms + var(--d, 0) * 60ms) both; }

  /* estado final: igual à página sem JS */
  .js.abertura-fim .chapa,
  .js.abertura-fim .marca { transform: none; clip-path: none; animation: none; }
  .js.abertura-fim .kana { clip-path: none; animation: none; }
  .js.abertura-fim .nome {
    color: var(--sobre);
    text-shadow: var(--registro) 0.022em 0 var(--rosa);
  }
  .js.abertura-fim .nome::before,
  .js.abertura-fim .nome::after { content: none; }
  .js.abertura-fim [data-entra] { opacity: 1; animation: none; }
}

/* reduced motion: já em registro; a rosa entra em fade de 200ms */
@media (prefers-reduced-motion: reduce) {
  .js .chapa-rosa { opacity: 0; }
  .js.abertura-fim .chapa-rosa {
    opacity: 1;
    transition: opacity 200ms linear;
  }
}

/* ao rolar para fora da Hero, as tintas saem um pouco de registro */
@keyframes deriva-az { to { translate: -1.6% 0; } }
@keyframes deriva-ro { to { translate: 2% 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .js.abertura-fim .chapa-azul,
    .js.abertura-fim .chapa-branca {
      animation: deriva-az linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
    .js.abertura-fim .chapa-rosa {
      animation: deriva-ro linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}

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

.canais { padding-block: 26px 40px; }

.lista-canais { display: grid; }

.canal {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 10px 4px;
  border-top: 1.5px solid var(--azul);
  color: var(--sobre);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--motion-fast) var(--ease-standard);
}
.canal:active { background: rgb(30 79 200 / 0.1); }
li:last-child > .canal { border-bottom: 1.5px solid var(--azul); }

.canal > i {
  flex: none;
  width: 26px;
  font-size: 22px;
  text-align: center;
  color: var(--azul);
}

.canal-texto { display: grid; line-height: 1.3; font-size: 14px; }
.canal-texto strong { font-size: 17px; font-weight: 700; }

.canal-direct {
  justify-content: flex-start;
  margin-bottom: 18px;
  padding: 10px 16px;
  border: 0;
  font-weight: 400;
}
.canal-direct > i { color: var(--sobre); }
.canal-direct:active { background: var(--rosa-press); }
.lista-canais li:first-child + li > .canal { border-top: 1.5px solid var(--azul); }

/* ---------- Junção: as duas tintas se encontram e viram a seção escura ---------- */

.juncao {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 52px;
  background: var(--papel);
}

.jz {
  position: absolute;
  inset: 0;
  mix-blend-mode: multiply;
}
.jz-azul { background: var(--azul); }
.jz-rosa { background: var(--rosa); }

@keyframes jz-az { from { transform: translateX(-44%); } to { transform: none; } }
@keyframes jz-ro { from { transform: translateX(44%); } to { transform: none; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .jz-azul { animation: jz-az linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
    .jz-rosa { animation: jz-ro linear both; animation-timeline: view(); animation-range: entry 0% cover 60%; }
  }
}

/* ---------- Caderno ---------- */

.caderno,
.fim,
.rodape,
.perto {
  --foco: #FFFFFF;
  background: var(--sobre);
  color: var(--papel);
}

.caderno { padding-block: 26px 44px; }

.filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.chip {
  min-height: 48px;
  padding: 8px 16px;
  border: 1.5px solid var(--azul-claro);
  border-radius: var(--raio);
  background: transparent;
  color: var(--papel);
  font-weight: 500;
  font-size: 15px;
  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.97); }
.chip[aria-pressed="true"] {
  border-color: var(--rosa);
  background: var(--rosa);
  color: var(--sobre);
  font-weight: 700;
}

.grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: dense;
  gap: 18px 10px;
  margin-top: 22px;
}

.peca[hidden] { display: none; }
.peca-grande { grid-column: 1 / -1; }

.peca-abrir {
  display: block;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.peca img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: var(--raio);
  background: rgb(187 205 246 / 0.12);
  transition: transform var(--motion-fast) var(--ease-standard);
}
.peca img.alto { aspect-ratio: 3 / 4; }
.peca-grande img { aspect-ratio: 1; }
.peca-grande img.alto { aspect-ratio: 3 / 4; }
.peca-abrir:active img { transform: scale(0.985); }

.peca-nome {
  display: block;
  margin-top: 8px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1.3;
}
.peca-meta {
  display: block;
  font-size: 14px;
  line-height: 1.35;
  color: var(--azul-claro);
}

/* ---------- De perto ---------- */

.perto { padding-bottom: 22px; }

.perto-foto {
  overflow: hidden;
  width: min(100%, 560px);
  margin-inline: auto;
  aspect-ratio: 1;
}
.perto-foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 48% 38%;
}

@keyframes aproxima { from { transform: scale(1); } to { transform: scale(1.14); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .perto-foto img {
      animation: aproxima linear both;
      animation-timeline: view();
      animation-range: entry 20% exit 40%;
    }
  }
}

.perto figcaption {
  margin-top: 14px;
  font-size: 17px;
}

/* ---------- Quem desenha ---------- */

.quem { padding-block: 44px 36px; }

.quem-fotos {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  margin-top: 26px;
  padding-inline: 8px;
}
.quem-fotos img { border-radius: var(--raio); }

/* a foto dela leva as duas tintas fora de registro */
.q1 {
  grid-column: 1 / 11;
  box-shadow: 8px 8px 0 var(--rosa), -6px -6px 0 var(--azul);
}
.q2 { grid-column: 1 / 7; margin-top: 22px; margin-right: 5px; }
.q3 { grid-column: 7 / 13; margin-top: 22px; margin-left: 5px; }

/* ---------- O que encomendar ---------- */

.servicos { padding-block: 22px 52px; }
.servicos .titulo { margin-bottom: 20px; }

.servico { border-top: 1.5px solid var(--azul); }
.servico:last-of-type { border-bottom: 1.5px solid var(--azul); }

.servico summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
  padding-block: 12px;
  font-family: var(--f-titulo);
  font-size: 24px;
  line-height: 1.15;
  list-style: none;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.servico summary::-webkit-details-marker { display: none; }
.servico summary i {
  font-size: 18px;
  color: var(--azul);
  transition: transform var(--motion-standard) var(--ease-standard);
}
.servico[open] summary i { transform: rotate(45deg); }

.servico-corpo { padding-bottom: 20px; }
.servico[open] .servico-corpo { animation: entra var(--motion-standard) var(--ease-enter); }

.projetos {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  margin-top: 4px;
}
.projetos a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  color: var(--azul);
  font-weight: 500;
  text-underline-offset: 3px;
}

.link-acao {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  margin-top: 4px;
  color: var(--azul);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  -webkit-tap-highlight-color: transparent;
}
.link-acao:active { color: var(--sobre); }

/* ---------- CTA final ---------- */

.fim { padding-block: 26px 40px; scroll-margin-top: 8px; }

html:not(.js) .monte { display: none; }

.monte { margin-top: 20px; }

.grupo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}
.grupo legend,
.campo {
  display: block;
  margin-bottom: 8px;
  padding: 0;
  font-weight: 700;
  font-size: 16px;
}

.opcao {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.opcao input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.opcao span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 8px 16px;
  border: 1.5px solid var(--azul-claro);
  border-radius: var(--raio);
  font-weight: 500;
  font-size: 15px;
  transition:
    background-color var(--motion-fast) var(--ease-standard),
    color var(--motion-fast) var(--ease-standard);
}
.opcao input:checked + span {
  border-color: var(--rosa);
  background: var(--rosa);
  color: var(--sobre);
  font-weight: 700;
}
.opcao input:focus-visible + span {
  outline: 3px solid var(--foco);
  outline-offset: 3px;
}

.referencia {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
  padding: 2px 2px 2px 14px;
  border: 1.5px dashed var(--azul-claro);
  border-radius: var(--raio);
  font-size: 15px;
}
.referencia[hidden] { display: none; }
.referencia-tira {
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  background: transparent;
  color: var(--papel);
  cursor: pointer;
}

.ideia {
  display: block;
  width: 100%;
  min-height: 92px;
  margin-bottom: 20px;
  padding: 12px 14px;
  border: 0;
  border-radius: var(--raio);
  background: var(--papel-alto);
  color: var(--sobre);
  font-size: 16px;
  line-height: 1.45;
  resize: vertical;
}
.ideia::placeholder { color: #57508F; opacity: 1; }

.previa {
  display: block;
  padding: 14px;
  border-radius: var(--raio);
  background: var(--papel);
  color: var(--sobre);
  font-size: 15px;
  line-height: 1.5;
  white-space: pre-line;
}

.btn-final {
  display: flex;
  width: calc(100% - 4px);
  min-height: 58px;
  margin-top: 22px;
}

.aviso {
  min-height: 24px;
  margin-top: 12px;
  font-size: 15px;
  color: var(--azul-claro);
}

/* ---------- Rodapé e selo ---------- */

.rodape {
  padding: 18px var(--g) calc(26px + var(--safe-bottom));
  border-top: 1px solid rgb(187 205 246 / 0.3);
  text-align: center;
}

.rodape-direitos { font-size: 14px; }

.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: 700;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.selo-b2 {
  --seal-ink: currentColor;
  --seal-accent: var(--rosa);
  --seal-ring: 0.4 1.4;       /* pontilhado: o retícula da tigela */
  --seal-font: var(--f-texto);
  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: 700;
  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; }
}
@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; }
}
@media (prefers-reduced-motion: reduce) {
  .credito:active .selo-b2 { rotate: none; }
}

/* ---------- CTA flutuante ---------- */

.cta-flutuante {
  position: fixed;
  left: 50%;
  bottom: calc(16px + var(--safe-bottom));
  z-index: 20;
  width: max-content;
  max-width: calc(100% - 28px);
  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-instant) var(--ease-standard),
    box-shadow var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}
.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-instant) var(--ease-standard),
    box-shadow var(--motion-instant) var(--ease-standard),
    background-color var(--motion-fast) var(--ease-standard);
}

/* ---------- Folha: a peça aberta ---------- */

.folha {
  --foco: var(--azul);
  width: 100%;
  max-width: 560px;
  max-height: 94vh;
  max-height: 94dvh;
  margin: auto auto 0;
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 0;
  border-radius: 6px 6px 0 0;
  background: var(--papel);
  color: var(--sobre);
}
.folha::backdrop { background: rgb(12 6 48 / 0.72); }

@keyframes folha-sobe { from { transform: translateY(100%); } }
@keyframes folha-fade { from { opacity: 0; } }
.folha[open] { animation: folha-sobe var(--motion-emphasis) var(--ease-enter); }
.folha.via-vt[open] { animation: none; }
html:has(.folha[open]) { overflow: hidden; }

::view-transition-group(peca-foto) {
  animation-duration: var(--motion-emphasis);
  animation-timing-function: var(--ease-emphasis);
}

.folha-fechar {
  position: sticky;
  top: 8px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 8px 8px -56px auto;
  border: 0;
  border-radius: 50%;
  background: var(--papel);
  color: var(--sobre);
  font-size: 20px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.folha-fotos {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--sobre);
}
.folha-fotos::-webkit-scrollbar { display: none; }
.folha-fotos img {
  flex: 0 0 100%;
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  scroll-snap-align: start;
}

.folha-corpo { padding: 10px var(--g) calc(20px + var(--safe-bottom)); }
.folha-conta { min-height: 22px; font-size: 14px; }
.folha-titulo {
  margin-top: 2px;
  font-family: var(--f-titulo);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.15;
}
.folha-meta { margin-top: 4px; font-size: 15px; }
.folha-fala { margin-top: 8px; font-size: 15px; }
.folha-fala[hidden] { display: none; }

.btn-folha {
  display: flex;
  width: calc(100% - 4px);
  margin-top: 16px;
}
.folha-post { margin-top: 12px; }

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  .btn-principal:active { transform: none; box-shadow: 4px 4px 0 var(--azul); }
  .chip:active,
  .peca-abrir:active img { transform: none; }
  .servico summary i { transition: none; }
  .servico[open] .servico-corpo { animation: folha-fade 160ms linear; }
  .folha[open] { animation: folha-fade 160ms linear; }
  .cta-flutuante,
  .cta-flutuante.is-visivel { translate: -50% 0; }
}

@media (hover: hover) and (pointer: fine) {
  .canal:hover { background: rgb(30 79 200 / 0.08); }
  .canal-direct:hover { background: var(--rosa-press); }
  .chip:hover { border-color: var(--rosa); }
  .opcao:hover span { border-color: var(--rosa); }
}