/* ============================================================
   ZEFA no site — a página /inventi/zefa/ e o bloco da home.
   As imagens são a ARTE ORIGINAL aprovada (poses com fundo claro próprio):
   sempre dentro de moldura arredondada, nunca recortadas no rosto.
   ============================================================ */
.zefa-hero { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.zefa-palco { position: relative; justify-self: center; width: min(22rem, 100%); }
.zefa-palco .zefa-principal { width: 100%; height: auto; display: block; border-radius: 28px;
  box-shadow: 0 30px 70px rgba(20, 8, 60, .35), 0 0 0 1px var(--line); background: #eee; }
.zefa-palco::before { content: ""; position: absolute; inset: -14px; border-radius: 36px; z-index: -1;
  background: conic-gradient(from 200deg, var(--brand-rosa), var(--brand-azul), var(--brand-roxo), var(--brand-rosa));
  filter: blur(22px); opacity: .45; }
/* 🔴 SITE-2 r2 (29/09) · GAP CRÍTICO do dono (print): o balão era `position:absolute; top:1rem` SOBRE a arte e
   cobria o cabelo/rosto da ZEFA em toda largura. Regra da skill `zefa-personagem-e-video`: nada se pinta por cima
   do rosto. O balão agora é FLUXO normal, ABAIXO da moldura, com a ponta apontando para ela — não há largura,
   tema ou pose em que ele alcance o rosto, porque ele não ocupa o mesmo espaço que a imagem. */
.zefa-balao { position: relative; margin: 1.05rem auto 0; width: fit-content; max-width: min(100%, 17rem); padding: .6rem .9rem;
  border-radius: 14px; background: var(--bg-soft); color: var(--fg); font-size: .86rem; line-height: 1.4; text-align: center;
  box-shadow: 0 10px 28px rgba(10, 6, 30, .25); border: 1px solid var(--line); }
.zefa-balao::before { content: ""; position: absolute; left: 50%; top: -7px; width: 12px; height: 12px;
  background: var(--bg-soft); border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  transform: translateX(-50%) rotate(45deg); }
.zefa-balao b { color: var(--rosa-texto); }

.zefa-sigla { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1.6rem; }
.zefa-sigla article { padding: 1.1rem 1.2rem; border-radius: 16px; background: var(--bg-soft); border: 1px solid var(--line); }
.zefa-sigla h3 { margin: .2rem 0 .7rem; font-size: 1.05rem; }
.zefa-sigla ol { list-style: none; margin: 0 0 .7rem; padding: 0; display: grid; gap: .3rem; }
.zefa-sigla li { font: 500 1rem/1.35 var(--display); color: var(--fg); }
.zefa-sigla li b { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; margin-right: .45rem; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-rosa), var(--brand-azul)); color: #fff; font-size: .95rem; }
.zefa-sigla p { margin: 0; font-size: .92rem; color: var(--fg-soft); }

.zefa-feitos { display: grid; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); gap: 1rem; margin-top: 1.6rem; }
.zefa-feitos article { position: relative; padding: 1.05rem 1.1rem 1rem; border-radius: 16px; background: var(--bg-soft);
  border: 1px solid var(--line); }
.zefa-feitos h3 { margin: .35rem 0 .45rem; font-size: 1rem; }
.zefa-feitos p { margin: 0; font-size: .9rem; color: var(--fg-soft); }
.zefa-estado { display: inline-block; font: 600 .66rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  padding: .3rem .45rem; border-radius: 6px; background: color-mix(in srgb, #1f9d63 16%, transparent); color: #0d5f38; }
.zefa-estado.parcial { background: var(--warn-bg); color: var(--warn-fg); }
:root[data-theme="dark"] .zefa-estado:not(.parcial) { color: #6fe0a8; }

.zefa-escada { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: .6rem; counter-reset: degrau; }
.zefa-escada li { counter-increment: degrau; display: grid; grid-template-columns: 3rem 1fr; gap: .9rem; align-items: center;
  padding: .85rem 1rem; border-radius: 14px; background: var(--bg-soft); border: 1px solid var(--line);
  margin-left: calc((var(--i, 0)) * clamp(0rem, 2.5vw, 2.2rem)); }
.zefa-escada li::before { content: counter(degrau); display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 12px;
  font: 700 1.25rem/1 var(--display); color: #fff;
  background: color-mix(in srgb, var(--brand-rosa) calc(var(--i, 0) * 30%), var(--brand-azul)); }
.zefa-escada b { display: block; color: var(--fg); }
.zefa-escada span { color: var(--fg-soft); font-size: .92rem; }

.zefa-galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr)); gap: 1rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.zefa-galeria figure { margin: 0; }
.zefa-galeria img { width: 100%; height: auto; aspect-ratio: 360 / 351; object-fit: cover; border-radius: 18px; display: block;
  background: #eee; box-shadow: 0 10px 26px rgba(10, 6, 30, .18); transition: transform .25s cubic-bezier(.2,.7,.3,1); }
.zefa-galeria figure:hover img { transform: translateY(-4px) rotate(-.6deg); }
.zefa-galeria figcaption { margin-top: .5rem; font-size: .86rem; color: var(--fg-soft); }
.zefa-galeria figcaption b { display: block; color: var(--fg); font-size: .92rem; }
.zefa-controle { margin-top: 1rem; }
.zefa-controle button { all: unset; cursor: pointer; padding: .45rem .8rem; border-radius: 8px; font: 500 .82rem/1 var(--mono);
  box-shadow: inset 0 0 0 1px var(--line); color: var(--fg-soft); }
.zefa-controle button:hover, .zefa-controle button:focus-visible { color: var(--fg); background: var(--bg-inset); }

.zefa-dedicatoria { display: grid; grid-template-columns: auto 1fr; gap: 1.4rem; align-items: center; margin-top: 1.4rem;
  padding: 1.3rem 1.4rem; border-radius: 18px; background: var(--bg-soft); border: 1px solid var(--line); }
.zefa-dedicatoria img { width: 7.5rem; height: auto; border-radius: 16px; background: #eee; }
.zefa-placa { display: inline-block; margin-top: .7rem; padding: .45rem .75rem; border-radius: 8px;
  font: 500 .8rem/1.3 var(--mono); letter-spacing: .04em; color: var(--fg); background: var(--bg-inset);
  border-left: 3px solid var(--rosa); }

/* bloco da home */
.zefa-home { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
.zefa-home .zefa-palco { width: min(19rem, 100%); }
.zefa-pontos { list-style: none; margin: 1.2rem 0 1.4rem; padding: 0; display: grid; gap: .55rem; }
.zefa-pontos li { padding-left: 1.6rem; position: relative; color: var(--fg-soft); }
.zefa-pontos li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--rosa-texto); font-weight: 700; }
.zefa-pontos b { color: var(--fg); }

/* manifesto (página «a empresa») */
.manifesto { position: relative; margin: 1.6rem 0 0; padding: clamp(1.3rem, 3vw, 2.2rem); border-radius: 22px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand-roxo) 14%, var(--bg-soft)), var(--bg-soft));
  border: 1px solid var(--line); }
.manifesto blockquote { margin: 0; font: 400 clamp(1.02rem, 1.6vw, 1.16rem)/1.75 var(--texto); color: var(--fg); }
.manifesto blockquote p { max-width: 70ch; }
.manifesto blockquote strong { color: var(--rosa-texto); }
.manifesto figcaption { margin-top: 1rem; font: 500 .82rem/1.4 var(--mono); color: var(--fg-faint); }
.manifesto-topo { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.manifesto-topo img { width: 4.5rem; height: 4.5rem; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: #eee; }

@media (max-width: 760px) {
  .zefa-hero, .zefa-home, .zefa-sigla, .zefa-dedicatoria { grid-template-columns: 1fr; }
  .zefa-escada li { margin-left: 0; }
}
@media (prefers-reduced-motion: reduce) { .zefa-galeria img { transition: none; } }

/* 27/09 · a ZEFA que RESPIRA (card da home). Movimento rígido da arte inteira dentro de uma moldura que corta:
   a borda arredondada fica parada e só a figura «vive». Escala sempre ≥ 1,03 para a borda da arte nunca aparecer. */
.zefa-moldura { display: block; border-radius: 28px; overflow: hidden; background: #eee;
  box-shadow: 0 30px 70px rgba(20, 8, 60, .35), 0 0 0 1px var(--line); }
.zefa-moldura .zefa-principal { border-radius: 0; box-shadow: none; transform-origin: 50% 100%; transform: scale(1.03); }
@media (prefers-reduced-motion: no-preference) {
  .zefa-moldura img[data-respira] { animation: zefa-respira 5.6s ease-in-out infinite; will-change: transform; }
}
@keyframes zefa-respira {
  0%, 100% { transform: scale(1.03) translateY(0) rotate(0deg); }
  42%      { transform: scale(1.042) translateY(-1.6px) rotate(.35deg); }
  68%      { transform: scale(1.037) translateY(-.9px) rotate(-.15deg); }
}
.a11y-sem-movimento .zefa-moldura img[data-respira] { animation: none; }