/* Imersão Comunicação Conjugal: cores e tipos tirados dos slides de Marcia e Darrell. */

@font-face { font-family: 'Baloo 2'; src: url('../fonts/baloo2-latin.woff2') format('woff2'); font-weight: 400 800; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
@font-face { font-family: 'Caveat Brush'; src: url('../fonts/caveatbrush-latin.woff2') format('woff2'); font-weight: 400; font-display: swap; }

:root {
  color-scheme: light;
  --cor: #1b2559;
  --cor-claro: #fbf4ea;
  --tinta: #1b2559;
  --tinta-2: #2c3a7e;
  --carmim: #d3173f;
  --girassol: #f7c548;
  --girassol-claro: #fff1c7;
  --azul: #2563eb;
  --azul-claro: #e2ebff;
  --rosa: #cc2f6b;
  --rosa-claro: #ffe3ee;
  --papel: #fffcf8;
  --creme: #fbf4ea;
  --linha: #ece3d5;
  --suave: #565e80;
  --verde: #1d7f54;
  --roxo: #6d35d6;
  --laranja: #c75a10;
  --oliva: #7a6a12;
  --vermelho: #c41d3a;

  --f-display: 'Baloo 2', 'Nunito', system-ui, sans-serif;
  --f-texto: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mao: 'Caveat Brush', 'Comic Sans MS', cursive;

  --r-grande: 28px;
  --r-medio: 18px;
  --r-pequeno: 12px;
  --sombra: 0 1px 0 rgba(27, 37, 89, .06), 0 10px 30px -12px rgba(27, 37, 89, .22);
  --nav-h: 68px;
  --rail: 236px;
  --seguro-baixo: env(safe-area-inset-bottom, 0px);
}

[data-cor="carmim"] { --cor: var(--carmim); --cor-claro: #ffe1e7; }
[data-cor="vermelho"] { --cor: var(--vermelho); --cor-claro: #ffe1e5; }
[data-cor="azul"] { --cor: var(--azul); --cor-claro: var(--azul-claro); }
[data-cor="roxo"] { --cor: var(--roxo); --cor-claro: #ece4ff; }
[data-cor="verde"] { --cor: var(--verde); --cor-claro: #dcf3e7; }
[data-cor="laranja"] { --cor: var(--laranja); --cor-claro: #ffe8d6; }
[data-cor="amarelo"] { --cor: #a86f00; --cor-claro: var(--girassol-claro); }
[data-cor="oliva"] { --cor: var(--oliva); --cor-claro: #f3eecd; }
[data-cor="rosa"] { --cor: var(--rosa); --cor-claro: var(--rosa-claro); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0;
  min-height: 100dvh;
  background: var(--papel);
  color: var(--tinta);
  font: 400 1.0625rem/1.55 var(--f-texto);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body.com-camada { overflow: hidden; }
img { max-width: 100%; display: block; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--azul); }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 800; line-height: 1.08; margin: 0; letter-spacing: -.01em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
:focus-visible { outline: 3px solid var(--girassol); outline-offset: 2px; border-radius: 6px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* As manchas pastel dos cantos, como nos slides */
.fundo { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.fundo i { position: absolute; border-radius: 50%; filter: blur(2px); }
.fundo i:nth-child(1) { width: 52vmax; height: 52vmax; left: -26vmax; top: -30vmax; background: #e4ecff; }
.fundo i:nth-child(2) { width: 40vmax; height: 40vmax; right: -22vmax; top: 30vh; background: #ffe6d3; opacity: .7; }
.fundo i:nth-child(3) { width: 46vmax; height: 46vmax; left: 10vw; bottom: -38vmax; background: #ffe0ea; opacity: .8; }

.pular { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--tinta); color: #fff; padding: 10px 14px; border-radius: 10px; }
.pular:focus { top: 12px; }

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

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: .7em 1.25em;
  border: 0; border-radius: 999px;
  font: 700 1rem/1.1 var(--f-texto);
  text-decoration: none; white-space: nowrap;
  transition: transform .15s ease, background-color .15s ease, box-shadow .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn .ic { width: 1.15em; height: 1.15em; flex: none; }
.btn-primario { background: var(--tinta); color: #fff; box-shadow: 0 6px 16px -8px rgba(27, 37, 89, .7); }
.btn-primario:hover { background: var(--tinta-2); }
.btn-sutil { background: #fff; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--linha); }
.btn-sutil:hover { box-shadow: inset 0 0 0 2px #d8ccb8; }
.btn-claro { background: #fff; color: var(--tinta); }
.btn-perigo { background: #fff; color: var(--vermelho); box-shadow: inset 0 0 0 2px #f3c4cd; }
.btn-pequeno { min-height: 38px; padding: .45em .9em; font-size: .9rem; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.btn-icone {
  display: inline-grid; place-items: center; flex: none;
  width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: transparent; color: inherit; text-decoration: none;
}
.btn-icone:hover { background: rgba(27, 37, 89, .07); }
.btn-icone .ic { width: 22px; height: 22px; }
.btn-icone[disabled] { opacity: .3; pointer-events: none; }
.acoes-linha { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 40px; padding: .45em .95em;
  border: 0; border-radius: 999px;
  background: #fff; color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--linha);
  font-size: .95rem; font-weight: 600; line-height: 1.2; text-align: left;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px #cfc2ad; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.chip-check:has(input:checked) { background: var(--tinta); color: #fff; box-shadow: none; }
.chip-check:has(input:focus-visible) { outline: 3px solid var(--girassol); outline-offset: 2px; }

.segmentos { display: inline-flex; padding: 4px; gap: 4px; border: 0; margin: 0; border-radius: 999px; background: var(--creme); box-shadow: inset 0 0 0 1.5px var(--linha); }
.segmentos legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.segmentos label { position: relative; }
.segmentos input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segmentos span, .segmentos button { display: block; min-height: 40px; padding: .55em 1.1em; border: 0; border-radius: 999px; background: transparent; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.segmentos input:checked + span, .segmentos [aria-selected="true"] { background: #fff; box-shadow: var(--sombra); }
.segmentos input:focus-visible + span { outline: 3px solid var(--girassol); }

.campo { display: grid; gap: 6px; font-weight: 700; font-size: .95rem; }
.campo input, .campo textarea, .formula-campo textarea, .tapete-form input {
  width: 100%; padding: .75em .9em;
  border: 2px solid var(--linha); border-radius: var(--r-pequeno);
  background: #fff; font-weight: 500; font-size: 1rem; line-height: 1.4;
  resize: vertical;
}
::placeholder { color: #9d968a; opacity: 1; }
.campo input:focus, .campo textarea:focus, .formula-campo textarea:focus, .tapete-form input:focus { outline: none; border-color: var(--tinta); }
.campo-a input, .campo-a textarea { border-color: #bcd0ff; }
.campo-b input, .campo-b textarea { border-color: #f6bfd3; }

/* ---------- Bolhas da marca ---------- */

.bolha { width: 34px; height: 30px; flex: none; }
.bolha path { stroke-width: 3.2; stroke-linejoin: round; }
.bolha-a path { fill: #fff; stroke: var(--azul); }
.bolha-a circle { fill: var(--azul); }
.bolha-b path { fill: #fff; stroke: var(--rosa); }
.bolha-b .coracao { fill: none; stroke: var(--rosa); stroke-width: 3; }

/* ---------- Navegação ---------- */

.nav {
  position: fixed; z-index: 20; left: 0; right: 0; bottom: 0;
  display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--nav-h) + var(--seguro-baixo)); padding-bottom: var(--seguro-baixo);
  background: rgba(255, 252, 248, .94); backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--linha);
}
.nav-marca { display: none; }
.nav a[data-nav] {
  display: grid; place-items: center; align-content: center; gap: 3px;
  color: var(--suave); text-decoration: none; font-size: .78rem; font-weight: 700;
  -webkit-tap-highlight-color: transparent;
}
.nav a[data-nav] .ic { width: 25px; height: 25px; }
.nav a[aria-current="page"] { color: var(--tinta); }
.nav a[aria-current="page"] .ic { color: var(--carmim); }
.nav a[data-nav="respire"] .ic { color: var(--verde); }

main { display: block; padding-bottom: calc(var(--nav-h) + var(--seguro-baixo) + 24px); outline: none; }
body[data-tela="estacao"] main { padding-bottom: 0; }
body[data-tela="estacao"] .nav { display: none; }

/* ---------- Início ---------- */

.inicio { max-width: 1180px; margin: 0 auto; }
.capa { display: grid; }
.capa-arte { position: relative; overflow: hidden; border-radius: 0 0 var(--r-grande) var(--r-grande); max-height: 52vh; }
.capa-arte img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 22%; aspect-ratio: 1.08; }
.capa-texto { padding: 22px 20px 4px; text-align: center; }
.capa-imersao {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  font-family: var(--f-texto); font-weight: 600; font-size: .92rem; letter-spacing: .42em; text-transform: uppercase; color: var(--tinta);
}
.capa-imersao::before, .capa-imersao::after { content: ""; width: 42px; height: 2px; background: currentColor; opacity: .6; }
.marca { margin-top: 6px; font-size: clamp(2.7rem, 12.4vw, 5rem); line-height: .9; letter-spacing: -.02em; }
.marca span { display: block; }
.marca-1 { color: var(--tinta); }
.marca-2 { color: var(--carmim); }
.marca-script { margin: 12px auto 0; }
.marca-script span {
  display: inline-block; padding: .14em .9em .1em;
  font: 400 clamp(1.7rem, 7vw, 2.5rem)/1 var(--f-mao); color: var(--tinta);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 60' preserveAspectRatio='none'%3E%3Cpath d='M6 18c40-12 120-10 190-12 40-1 70 1 98 6 4 1 4 6 0 7-6 1-6 4 0 5 4 1 3 6-1 7-30 6-80 9-140 11-55 2-100 4-142 2-6 0-8-6-2-8 5-1 5-4-1-5-6-2-5-9-2-13z' fill='%23f7c548'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  transform: rotate(-2deg);
}
.capa-por { margin: 16px auto 0; max-width: 32ch; color: var(--suave); }

.seguir {
  display: flex; align-items: center; gap: 18px;
  margin: 26px 16px 0; padding: 18px;
  background: #fff; border-radius: var(--r-grande); box-shadow: var(--sombra);
}
.anel {
  --pct: 0;
  flex: none; display: grid; place-items: center;
  width: 84px; height: 84px; border-radius: 50%;
  background: conic-gradient(var(--carmim) calc(var(--pct) * 1%), var(--creme) 0);
}
.anel span { display: grid; place-items: center; width: 66px; height: 66px; border-radius: 50%; background: #fff; font: 800 1.6rem/1 var(--f-display); }
.anel small { display: block; font: 600 .7rem/1 var(--f-texto); color: var(--suave); margin-top: -4px; }
.seguir-txt { display: grid; gap: 4px; min-width: 0; }
.seguir-rotulo { font-size: .88rem; color: var(--suave); font-weight: 600; }
.seguir-nome { font: 800 1.35rem/1.1 var(--f-display); margin-bottom: 8px; }
.seguir .btn { justify-self: start; }

.casal-chip-area { display: flex; justify-content: center; margin: 18px 16px 0; }
.casal-chip {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  min-height: 48px; padding: 8px 16px; border: 0; border-radius: 999px;
  background: var(--creme); box-shadow: inset 0 0 0 1.5px var(--linha);
  font-weight: 700; font-size: .98rem;
}
.casal-chip .bolha { width: 30px; height: 26px; }
.casal-chip .e { color: var(--suave); font-weight: 500; }
.casal-editar { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #fff; }
.casal-editar .ic { width: 16px; height: 16px; }
.casal-vazio { font-weight: 600; color: var(--tinta); }

.trilha { position: relative; margin: 28px 16px 0; padding-bottom: 12px; }
.trilha-linha { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.trilha-linha path { fill: none; stroke-linecap: round; }
.caminho { stroke: #dccfb9; stroke-width: 4; stroke-dasharray: 2 12; }
.caminho-feito { stroke: var(--carmim); stroke-width: 5; }
.parte { position: relative; }
.parte + .parte { margin-top: 26px; }
.parte-placa {
  position: relative; z-index: 1;
  display: grid; gap: 2px; justify-items: start;
  width: fit-content; max-width: 100%; margin: 0 0 14px;
  padding: 12px 18px; border-radius: var(--r-medio);
  background: var(--tinta); color: #fff;
}
.parte-n { font: 400 1.25rem/1 var(--f-mao); color: var(--girassol); }
.parte-placa h2 { font-size: 1.3rem; }
.paradas { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.parada { --amp: 16px; position: relative; z-index: 1; }
.parada a {
  display: grid; grid-template-columns: calc(64px + var(--amp) * 2) 1fr; align-items: center; gap: 10px;
  padding: 6px 0; color: inherit; text-decoration: none; border-radius: var(--r-medio);
  -webkit-tap-highlight-color: transparent;
}
.parada-no {
  position: relative; display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: 50%;
  margin-left: calc(var(--amp) + var(--onda) * var(--amp) * .62);
  background: #fff; font-size: 1.7rem;
  box-shadow: inset 0 0 0 3px var(--cor), 0 6px 0 -1px var(--cor-claro, var(--creme)), 0 10px 18px -10px rgba(27, 37, 89, .45);
  transition: transform .2s ease;
}
.parada a:hover .parada-no { transform: translateY(-2px) rotate(-4deg); }
.parada[data-estado="feita"] .parada-no { background: var(--cor-claro); }
.parada[data-estado="atual"] .parada-no { background: var(--cor); box-shadow: 0 0 0 6px var(--cor-claro), 0 12px 24px -10px var(--cor); }
.parada-check {
  position: absolute; right: -4px; bottom: -2px;
  display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: var(--verde); color: #fff; box-shadow: 0 0 0 3px var(--papel);
}
.parada-check .ic { width: 14px; height: 14px; stroke-width: 3; }
.parada-txt { display: grid; gap: 1px; min-width: 0; padding-right: 6px; }
.parada-txt strong { font: 800 1.12rem/1.15 var(--f-display); }
.parada-txt small { font-size: .9rem; color: var(--suave); line-height: 1.3; }
.parada-agora { justify-self: start; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--girassol); font-size: .78rem; font-weight: 800; }
.parada-exercicio .parada-no { width: 52px; height: 52px; margin-top: 6px; margin-bottom: 6px; font-size: 1.35rem; border-radius: 50% 50% 50% 14px; transform: rotate(-8deg); }
.parada-exercicio .parada-no > span[aria-hidden] { transform: rotate(8deg); }
.parada-exercicio a { grid-template-columns: calc(64px + var(--amp) * 2) 1fr; }
.parada-exercicio .parada-no { margin-left: calc(var(--amp) + 6px + var(--onda) * var(--amp) * .62); }

.breve, .instalar {
  display: flex; align-items: flex-start; gap: 12px;
  margin: 28px 16px 0; padding: 16px 18px;
  border-radius: var(--r-medio); background: var(--azul-claro); color: var(--tinta);
}
.breve .ic { width: 26px; height: 26px; flex: none; color: var(--azul); }
a.breve { text-decoration: none; box-shadow: inset 0 0 0 2px #c9d8ff; transition: box-shadow .15s ease; }
a.breve:hover { box-shadow: inset 0 0 0 2px var(--azul); }
.instalar { flex-wrap: wrap; align-items: center; background: var(--girassol-claro); }
.instalar p { flex: 1 1 220px; }

/* ---------- Telas simples (slides, caderno, respire) ---------- */

.tela { max-width: 1080px; margin: 0 auto; padding: 22px 16px 0; }
.tela-cab { display: grid; gap: 10px; justify-items: start; margin-bottom: 22px; }
.tela-cab h1 { font-size: clamp(2rem, 8vw, 3rem); }
.tela-cab p { color: var(--suave); max-width: 60ch; }

.slides-grade { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.slides-grade button {
  display: grid; width: 100%; padding: 0; border: 0; border-radius: var(--r-pequeno); overflow: hidden;
  background: #fff; box-shadow: var(--sombra); text-align: left; position: relative;
}
.slides-grade img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; background: var(--creme); }
.slide-n { position: absolute; left: 8px; top: 8px; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: rgba(27, 37, 89, .82); color: #fff; font-size: .78rem; font-weight: 800; text-align: center; }
.slide-t { padding: 8px 10px 10px; font-size: .86rem; font-weight: 700; line-height: 1.25; }

/* ---------- Parada ---------- */

.estacao { min-height: 100dvh; display: flex; flex-direction: column; }
.est-topo {
  position: sticky; top: 0; z-index: 10;
  display: grid; grid-template-columns: 44px 1fr 44px; align-items: center; gap: 6px;
  padding: 8px 8px 6px; padding-top: max(8px, env(safe-area-inset-top));
  background: rgba(255, 252, 248, .94); backdrop-filter: blur(14px);
}
.est-nome { display: grid; text-align: center; min-width: 0; }
.est-nome span { font-size: .78rem; color: var(--suave); font-weight: 600; }
.est-nome strong { font: 800 1.08rem/1.15 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.est-prog { list-style: none; display: flex; gap: 5px; margin: 0; padding: 0 16px 8px; position: sticky; top: 58px; z-index: 9; background: rgba(255, 252, 248, .94); }
.est-prog li { flex: 1; }
.est-prog a { display: block; height: 6px; border-radius: 6px; background: var(--linha); position: relative; }
.est-prog a::before { content: ""; position: absolute; inset: -10px 0; }
.est-prog .feito a { background: var(--cor); opacity: .45; }
.est-prog .agora a { background: var(--cor); }
.est-corpo { flex: 1; width: 100%; max-width: 760px; margin: 0 auto; padding: 14px 16px 28px; }
.est-lado { display: none; }
.passo { outline: none; }
.est-rodape {
  position: sticky; bottom: 0; z-index: 10;
  display: flex; justify-content: space-between; gap: 10px;
  padding: 10px 16px calc(10px + var(--seguro-baixo));
  background: linear-gradient(to top, var(--papel) 70%, rgba(255, 252, 248, 0));
}
.est-rodape .btn { flex: 0 1 auto; }
.est-rodape .btn-primario { flex: 1 1 auto; max-width: 320px; }

.p-titulo { font-size: clamp(1.5rem, 5.4vw, 2.05rem); margin-bottom: 10px; }
.p-lead { color: var(--suave); font-size: 1.04rem; max-width: 62ch; }
.p-lead + * { margin-top: 16px; }
.p-fonte { margin-top: 12px; font-size: .85rem; color: var(--suave); }

.slide-cartao {
  position: relative; display: block; width: 100%; padding: 0; border: 0;
  border-radius: var(--r-medio); overflow: hidden; background: var(--creme);
  box-shadow: var(--sombra); cursor: zoom-in;
}
.slide-cartao img { width: 100%; height: auto; }
.slide-zoom { position: absolute; right: 10px; bottom: 10px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .92); color: var(--tinta); box-shadow: var(--sombra); }
.slide-zoom .ic { width: 22px; height: 22px; }
.p-slide .p-lead { margin-top: 18px; font-size: 1.12rem; color: var(--tinta); }

/* revelar */
.r-conta { margin: -2px 0 14px; font-size: .88rem; font-weight: 700; color: var(--suave); }
.r-grade { display: grid; gap: 10px; }
.r-grupo { margin: 8px 0 -2px; font-size: 1.2rem; color: var(--suave); }
.r-card { border-radius: var(--r-medio); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); overflow: hidden; transition: box-shadow .2s ease; }
.r-card.visto { box-shadow: inset 0 0 0 2px var(--cor-claro); }
.r-card.aberto { box-shadow: inset 0 0 0 2.5px var(--cor), var(--sombra); }
.r-frente {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; background: transparent; text-align: left;
}
.r-icone { display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--cor-claro); font-size: 1.45rem; }
.r-num { display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--cor, var(--tinta)); color: #fff; font: 800 .95rem/1 var(--f-display); }
.r-nome { display: grid; font: 800 1.12rem/1.2 var(--f-display); flex: 1; }
.r-nome small { font: 600 .85rem/1.3 var(--f-texto); color: var(--cor); }
.r-frente::after { content: "+"; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--creme); font: 700 1.2rem/1 var(--f-texto); color: var(--tinta); transition: transform .2s ease; }
.r-card.aberto .r-frente::after { transform: rotate(45deg); }
.r-verso { padding: 0 16px 16px; animation: abrir .25s ease; }
.r-verso > p { font-size: 1.02rem; }
.r-img { flex: none; width: 64px; height: 64px; border-radius: 14px; object-fit: cover; object-position: top; }
.r-imagens .r-grade { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.r-imagens .r-frente { flex-direction: column; align-items: stretch; padding: 0; gap: 0; }
.r-imagens .r-img { width: 100%; height: auto; aspect-ratio: 4 / 3.4; border-radius: 0; }
.r-imagens .r-nome { padding: 10px 12px 12px; font-size: 1.02rem; }
.r-imagens .r-num { position: absolute; margin: 8px; }
.r-imagens .r-card { position: relative; }
.r-imagens .r-frente::after { position: absolute; right: 8px; top: 8px; background: rgba(255, 255, 255, .92); }
.r-imagens .r-verso { padding: 0 12px 14px; font-size: .95rem; }
.r-animais .r-grade { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.r-animais .r-frente { flex-direction: column; align-items: stretch; padding: 0; gap: 0; position: relative; }
.r-animais .r-img { width: 100%; height: 150px; border-radius: 0; object-position: center; }
.r-animais .r-nome { padding: 12px 16px; font-size: 1.4rem; }
.r-animais .r-frente::after { position: absolute; right: 12px; top: 12px; background: rgba(255, 255, 255, .92); }
.r-listas { display: grid; gap: 12px; margin-top: 12px; }
.r-listas h4 { font: 800 .95rem/1.2 var(--f-texto); margin-bottom: 4px; color: var(--cor); }
.r-listas ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.r-atencao h4 { color: var(--vermelho); }
.r-virar .r-nome { font-size: 1.2rem; color: var(--vermelho); }
.r-virar .aberto .r-nome { opacity: .6; text-decoration: line-through; text-decoration-thickness: 2px; text-decoration-color: rgba(196, 29, 58, .45); }
.r-dica { display: none; }
.r-rotulo-depois { font: 400 1.25rem/1 var(--f-mao); color: var(--verde); margin-bottom: 6px; }

/* quiz */
.q-area { display: grid; gap: 12px; }
.q-passo { font-size: .85rem; font-weight: 700; color: var(--suave); }
.q-enunciado { font: 800 1.3rem/1.25 var(--f-display); outline: none; }
.q-opcoes { display: grid; gap: 10px; }
.q-opcao {
  min-height: 56px; padding: 12px 16px; border: 0; border-radius: var(--r-medio);
  background: #fff; box-shadow: inset 0 0 0 2px var(--linha);
  font-weight: 700; font-size: 1.02rem; line-height: 1.3; text-align: left;
  transition: box-shadow .15s ease, background-color .15s ease, transform .15s ease;
}
.q-opcao:hover:not(:disabled) { box-shadow: inset 0 0 0 2px var(--tinta); }
.q-opcao:active:not(:disabled) { transform: scale(.98); }
.q-opcao:disabled { cursor: default; color: var(--suave); }
.q-opcao.certa { background: #dcf3e7; color: var(--verde); box-shadow: inset 0 0 0 2.5px var(--verde); }
.q-opcao.errada { background: #ffe4e8; color: var(--vermelho); box-shadow: inset 0 0 0 2.5px var(--vermelho); }
.q-retorno { display: grid; gap: 12px; justify-items: start; padding: 14px 16px; border-radius: var(--r-medio); background: var(--creme); animation: abrir .25s ease; }
.q-fim, .s-fim { display: grid; gap: 10px; justify-items: start; }
.q-placar { font: 800 1.2rem/1 var(--f-display); outline: none; }
.q-placar strong { font-size: 3.4rem; color: var(--carmim); }

/* separar */
.s-mesa { display: grid; place-items: center; min-height: 210px; margin-top: 8px; }
.s-pilha { width: 100%; max-width: 420px; display: grid; }
.s-carta {
  position: relative; display: grid; gap: 10px; align-content: center;
  min-height: 190px; padding: 22px; border-radius: var(--r-grande);
  background: #fff; box-shadow: inset 0 0 0 2px var(--linha), var(--sombra);
  font: 800 1.3rem/1.25 var(--f-display); text-align: center;
  touch-action: pan-y; user-select: none; cursor: grab;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease, box-shadow .2s ease;
  animation: chegar .3s ease;
}
.s-carta.arrastando { transition: none; cursor: grabbing; }
.s-carta[data-tendencia="esq"] { box-shadow: inset 0 0 0 3px var(--azul), var(--sombra); }
.s-carta[data-tendencia="dir"] { box-shadow: inset 0 0 0 3px var(--rosa), var(--sombra); }
.s-carta.certa { box-shadow: inset 0 0 0 3px var(--verde), var(--sombra); }
.s-carta.errada { box-shadow: inset 0 0 0 3px var(--vermelho), var(--sombra); }
.s-carta.vai-esq { transform: translateX(-12%) rotate(-4deg); }
.s-carta.vai-dir { transform: translateX(12%) rotate(4deg); }
.s-indice { font: 700 .82rem/1 var(--f-texto); color: var(--suave); }
.s-retorno { font: 500 1rem/1.35 var(--f-texto); color: var(--tinta); }
.s-botoes { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.s-lado { white-space: normal; text-align: center; }
.s-esq { background: var(--azul-claro); color: #1b47b3; }
.s-dir { background: var(--rosa-claro); color: #a3205a; }

/* leve para casa */
.p-levar { display: grid; gap: 18px; }
.levar-rotulo { font: 400 1.6rem/1 var(--f-mao); color: var(--carmim); }
.levar-frase { margin: 0; padding: 26px 22px; border-radius: var(--r-grande); background: var(--tinta); color: #fff; }
.levar-frase p { font: 800 clamp(1.5rem, 6vw, 2.2rem)/1.15 var(--f-display); }
.levar-frase cite { display: block; margin-top: 10px; font: 400 1.3rem/1 var(--f-mao); color: var(--girassol); font-style: normal; }
.levar-conversa { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border-radius: var(--r-grande); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); }
.levar-conversa strong { display: block; font-family: var(--f-display); font-size: 1.08rem; margin-bottom: 2px; }
.levar-bolhas { position: relative; flex: none; width: 46px; height: 40px; }
.levar-bolhas .pt { position: absolute; width: 30px; height: 24px; border-radius: 10px; }
.levar-bolhas .pt-a { left: 0; top: 0; background: var(--azul); }
.levar-bolhas .pt-b { right: 0; bottom: 0; background: var(--rosa); box-shadow: 0 0 0 3px #fff; }

/* conversa em balões */
.chat { display: grid; gap: 10px; margin: 6px 0 16px; }
.msg { display: grid; gap: 4px; max-width: 88%; }
.msg-a { justify-self: start; }
.msg-b { justify-self: end; text-align: left; }
.msg-nome { font-size: .8rem; font-weight: 800; padding: 0 10px; }
.msg-a .msg-nome { color: var(--azul); }
.msg-b .msg-nome { color: var(--rosa); justify-self: end; }
.msg-balao { padding: 12px 15px; border-radius: 20px; animation: chegar .35s ease both; }
.msg-a .msg-balao { background: var(--azul-claro); border-bottom-left-radius: 6px; }
.msg-b .msg-balao { background: var(--rosa-claro); border-bottom-right-radius: 6px; }
.msg:nth-child(2) .msg-balao { animation-delay: .25s; }
.msg:nth-child(3) .msg-balao { animation-delay: .5s; }
.msg-balao p + * { margin-top: 8px; }

/* ---------- Vez de… ---------- */

.vez {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center; padding: 24px;
  color: #fff; text-align: center;
  clip-path: circle(0% at 50% 100%);
  transition: clip-path .55s cubic-bezier(.7, 0, .2, 1);
}
.vez[data-quem="a"] { background: radial-gradient(120% 90% at 50% 10%, #3b7bff, #1d3fb8 70%); }
.vez[data-quem="b"] { background: radial-gradient(120% 90% at 50% 10%, #ee5a92, #a3205a 70%); }
.vez.aberta { clip-path: circle(150% at 50% 100%); }
.vez.saindo { clip-path: circle(0% at 50% 0%); transition-duration: .32s; }
.vez-miolo { display: grid; justify-items: center; gap: 10px; max-width: 420px; }
.vez-bolha { width: 132px; height: 116px; margin-bottom: 8px; animation: flutuar 3s ease-in-out infinite; }
.vez-bolha path { fill: #fff; stroke: none; }
.vez[data-quem="a"] .vez-bolha circle { fill: #2563eb; }
.vez-bolha .coracao { fill: #cc2f6b; stroke: none; }
.vez-rotulo { font: 400 1.6rem/1 var(--f-mao); opacity: .9; }
.vez-nome { font-size: clamp(3rem, 15vw, 5.5rem); line-height: .95; word-break: break-word; }
.vez-texto { opacity: .92; margin-bottom: 14px; }

/* ---------- Modal de nomes ---------- */

.modal { position: fixed; inset: 0; z-index: 55; display: grid; place-items: end center; background: rgba(27, 37, 89, .45); padding: 0; }
.modal-caixa {
  width: 100%; max-width: 480px; display: grid; gap: 14px;
  padding: 26px 22px calc(22px + var(--seguro-baixo));
  border-radius: var(--r-grande) var(--r-grande) 0 0; background: var(--papel);
  animation: subir .3s cubic-bezier(.2, .8, .2, 1);
}
.modal-bolhas { display: flex; gap: 6px; }
.modal-bolhas .bolha { width: 44px; height: 38px; }
.modal-caixa h2 { font-size: 1.7rem; }
.modal-caixa > p { color: var(--suave); }
.modal-caixa > .campo-erro { color: var(--vermelho); font-weight: 700; font-size: .92rem; }
.modal-acoes { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 4px; }

/* ---------- Visor de slides ---------- */

.visor { position: fixed; inset: 0; z-index: 50; display: grid; grid-template-rows: auto 1fr auto; background: #0f1533; color: #fff; }
.visor-topo, .visor-base { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; padding-top: max(10px, env(safe-area-inset-top)); }
.visor-base { padding-bottom: calc(12px + var(--seguro-baixo)); }
.visor-legenda { font-weight: 700; font-size: .95rem; white-space: pre; overflow: hidden; text-overflow: ellipsis; }
.visor-botoes { display: flex; gap: 4px; }
.visor .btn-icone:hover { background: rgba(255, 255, 255, .12); }
.visor-palco { display: grid; place-items: center; min-height: 0; padding: 0 8px; touch-action: pan-y; }
.visor-palco img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 10px; user-select: none; }
.visor:fullscreen .visor-topo, .visor:fullscreen .visor-base { opacity: 0; transition: opacity .3s; }
.visor:fullscreen:hover .visor-topo, .visor:fullscreen:hover .visor-base { opacity: 1; }
.visor:fullscreen .visor-palco { padding: 0; }
.visor:fullscreen .visor-palco img { border-radius: 0; }

/* ---------- Aviso ---------- */

.aviso {
  position: fixed; z-index: 70; left: 50%; bottom: calc(var(--nav-h) + var(--seguro-baixo) + 14px);
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 18px; border-radius: 999px;
  background: var(--tinta); color: #fff; font-weight: 700; font-size: .95rem; text-align: center;
  transition: opacity .2s ease, transform .2s ease;
}
.aviso.mostrar { opacity: 1; transform: translate(-50%, 0); }
body[data-tela="estacao"] .aviso { bottom: calc(84px + var(--seguro-baixo)); }

/* ---------- Atividades ---------- */

/* assinatura */
.acordo-papel {
  position: relative; padding: 26px 22px 22px; border-radius: 6px;
  background: #fbf1dc; box-shadow: 0 1px 0 #e6d3ae, 0 18px 30px -18px rgba(90, 60, 20, .5);
  background-image: linear-gradient(transparent 31px, rgba(160, 120, 60, .12) 32px); background-size: 100% 32px;
}
.acordo-texto { font: 400 1.5rem/1.33 var(--f-mao); color: #3b2618; }
.acordo-linhas { display: grid; gap: 12px; margin-top: 22px; }
.segurar {
  position: relative; overflow: hidden; display: grid; gap: 2px; justify-items: center;
  min-height: 70px; padding: 12px; border: 2px dashed #c9ad7c; border-radius: var(--r-medio);
  background: rgba(255, 255, 255, .7); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
}
.segurar strong { font: 800 1.2rem/1 var(--f-display); position: relative; }
.segurar-txt { font-size: .85rem; font-weight: 700; color: var(--suave); position: relative; }
.segurar-barra { position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.segurar[data-quem="a"] .segurar-barra { background: var(--azul-claro); }
.segurar[data-quem="b"] .segurar-barra { background: var(--rosa-claro); }
.segurar.segurando { border-style: solid; }
.assinada { display: grid; padding: 4px 6px 8px; border-bottom: 2px solid #3b2618; }
.assinatura-nome { font: 400 2.2rem/1 var(--f-mao); }
.assinada[data-quem="a"] .assinatura-nome { color: var(--azul); }
.assinada[data-quem="b"] .assinatura-nome { color: var(--rosa); }
.assinada small { color: #7b6046; font-weight: 600; }
.acordo-selo {
  position: absolute; right: 14px; bottom: 54px; padding: 10px 14px;
  border: 3px solid var(--carmim); border-radius: 12px; color: var(--carmim);
  font: 800 1rem/1 var(--f-display); text-transform: none; background: #fbf1dc;
  transform: rotate(8deg); animation: carimbo .4s cubic-bezier(.2, 1.6, .4, 1);
}
.acordo-msg { margin-top: 14px; color: var(--suave); font-weight: 600; }

/* missão */
.mapa { margin: 16px 0 0; padding: 10px; border-radius: var(--r-medio); background: #fff; box-shadow: var(--sombra); }
.mapa svg { width: 100%; height: auto; display: block; }
.shopping { fill: #f7f1e7; stroke: #2a3155; stroke-width: 4; }
.entrada { fill: #f7f1e7; }
.rotulo-mapa { font: 700 11px var(--f-texto); fill: var(--suave); }
.loja { fill: #efe3cf; stroke: #d7c5a6; stroke-width: 1.5; }
.fonte { fill: #bfe0f4; stroke: #8ec6e6; stroke-width: 2; }
.vaso { fill: #8fc59a; }
.loja-alvo { fill: var(--tinta); }
.rotulo-alvo { font: 800 11px var(--f-texto); fill: #fff; }
.rota { fill: none; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.rota-homem { stroke: var(--azul); stroke-width: 4.5; }
.rota-mulher { stroke: var(--carmim); }
.paradas-mulher circle { fill: #fff; stroke: var(--carmim); stroke-width: 1.6; opacity: 0; transition: opacity .3s; }
.w-missao[data-mulher] .paradas-mulher circle { opacity: 1; }
.missao-placar { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.placar { display: grid; gap: 4px; padding: 14px; border: 0; border-radius: var(--r-medio); text-align: left; }
.placar-homem { background: var(--azul-claro); }
.placar-mulher { background: #ffe1e7; }
.placar-quem { font: 800 1.02rem/1.15 var(--f-display); margin-bottom: 4px; }
.placar-homem .placar-quem { color: #1b47b3; }
.placar-mulher .placar-quem { color: var(--carmim); }
.placar-linha { display: flex; justify-content: space-between; gap: 6px; font-size: .9rem; flex-wrap: wrap; }
.placar-linha strong { font-variant-numeric: tabular-nums; }
.placar[aria-pressed="false"] { box-shadow: inset 0 0 0 2px rgba(27, 37, 89, .12); }
.placar-acao { display: inline-flex; align-items: center; gap: 4px; margin: -2px 0 4px; font-size: .8rem; font-weight: 800; color: var(--suave); }
.placar-acao .ic { width: 14px; height: 14px; }
.missao-moral { margin-top: 16px; padding: 16px; border-radius: var(--r-medio); background: var(--girassol-claro); font-weight: 600; animation: abrir .3s ease; }

/* mosquito */
.palpites { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.palpite { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 12px; border: 0; border-radius: var(--r-pequeno); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font-weight: 700; text-align: left; }
.palpite span { font-size: 1.5rem; }
.palpite.escolhido { box-shadow: inset 0 0 0 2.5px var(--tinta); }
.palpite:disabled { cursor: default; }
.barras { display: grid; gap: 8px; margin-top: 18px; }
.barra-linha { display: grid; grid-template-columns: 8.4em 1fr auto; align-items: center; gap: 10px; font-size: .92rem; }
.barra-nome { font-weight: 700; white-space: nowrap; }
.barra-trilho { height: 14px; border-radius: 8px; background: var(--creme); overflow: hidden; }
.barra { display: block; height: 100%; width: 0; border-radius: 8px; background: #b9a582; }
.maior .barra { background: var(--vermelho); }
.barra-num { font-weight: 800; font-variant-numeric: tabular-nums; min-width: 4.4em; text-align: right; }
.maior .barra-num { color: var(--vermelho); }
.troca { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 700; font-size: .92rem; }
.troca input { width: 20px; height: 20px; accent-color: var(--tinta); }
.mosquito-grito { margin-top: 14px; font: 400 clamp(2rem, 8vw, 2.8rem)/1 var(--f-mao); color: var(--vermelho); transform: rotate(-2deg); animation: carimbo .45s cubic-bezier(.2, 1.6, .4, 1); }

/* tapete */
.tapete-svg { width: 100%; height: auto; margin: 6px 0 0; overflow: visible; }
.chao { stroke: #d9ccb6; stroke-width: 2; }
.tapete-corpo { fill: var(--carmim); transition: d .4s cubic-bezier(.2, 1.4, .4, 1); }
.tapete-listras { fill: none; stroke: var(--girassol); stroke-width: 2.5; stroke-dasharray: 10 6; }
.franjas line { stroke: #b48a3c; stroke-width: 1.6; stroke-linecap: round; }
.tapete-g { transform-origin: 160px 124px; transition: transform .4s ease; }
.torto .tapete-g { transform: rotate(-3deg) translateY(-2px); animation: balanca 2.2s ease-in-out infinite; }
.tapete-alerta { min-height: 1.5em; margin-top: 4px; font-weight: 800; color: var(--vermelho); }
.tapete-form { display: flex; gap: 8px; margin-top: 10px; }
.tapete-form input { flex: 1; min-width: 0; }
.sugestoes { margin-top: 10px; }
.sugestoes .chip { font-size: .88rem; min-height: 36px; }
.tapete-lista { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.tapete-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 4px 4px 14px; border-radius: var(--r-pequeno); background: #ffe1e7; font-weight: 600; animation: chegar .25s ease; }
.tapete-guardar { margin-top: 14px; }

/* cronômetro de conversa */
.conversa-pergunta { margin: 0 0 12px; font: 800 clamp(1.5rem, 6vw, 2.1rem)/1.15 var(--f-display); }
.w-conversa .segmentos { margin-top: 18px; }
.relogio { position: relative; width: min(240px, 70vw); margin: 22px auto 0; }
.relogio svg { width: 100%; height: auto; transform: rotate(-90deg); }
.relogio-fundo { fill: none; stroke: var(--creme); stroke-width: 10; }
.relogio-anel { fill: none; stroke: var(--tinta); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .25s linear, stroke .3s; }
.w-conversa[data-quem="a"] .relogio-anel { stroke: var(--azul); }
.w-conversa[data-quem="b"] .relogio-anel { stroke: var(--rosa); }
.relogio-meio { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.relogio-quem { font: 400 1.5rem/1 var(--f-mao); }
.w-conversa[data-quem="a"] .relogio-quem { color: var(--azul); }
.w-conversa[data-quem="b"] .relogio-quem { color: var(--rosa); }
.relogio-tempo { font: 800 3rem/1 var(--f-display); font-variant-numeric: tabular-nums; }
.conversa-status { min-height: 1.5em; margin-top: 14px; text-align: center; font-weight: 700; }
.conversa-botoes { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 14px; }

/* elementos */
.el-mapa { display: grid; gap: 14px; margin-top: 4px; padding: 16px 12px; border-radius: var(--r-grande); background: #fff; box-shadow: var(--sombra); }
.el-cima, .el-baixo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.el-meio { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 6px; }
.el-pessoa { display: grid; justify-items: center; gap: 6px; }
.el-pessoa .bolha { width: 54px; height: 47px; }
.el-seta { width: 34px; height: 2px; border-top: 3px dashed #f0a35b; }
.el-no { min-height: 46px; padding: 8px 10px; border: 0; border-radius: var(--r-pequeno); color: #fff; font: 800 1rem/1.1 var(--f-display); box-shadow: 0 4px 0 -1px rgba(0, 0, 0, .18); transition: transform .15s ease; }
.el-no:active { transform: translateY(2px); }
.el-no[aria-pressed="true"] { outline: 3px solid var(--girassol); outline-offset: 2px; }
.el-contexto { background: #22346e; }
.el-mensagem { background: #1f5fae; }
.el-canal { background: #4b2d91; }
.el-codigo { background: #1d7f3e; }
.el-emissor { background: #f2b53c; color: var(--tinta); width: 100%; }
.el-receptor { background: #f7a8c4; color: var(--tinta); width: 100%; }
.el-detalhe { margin-top: 14px; padding: 16px; border-radius: var(--r-medio); background: var(--creme); min-height: 96px; animation: abrir .25s ease; }
.el-detalhe h3 { font-size: 1.35rem; margin-bottom: 4px; }
.el-exemplo { margin-top: 8px; color: var(--suave); }
.w-elementos .r-conta { margin-top: 10px; }

/* ruído */
.w-ruido .campo { margin-top: 6px; }
.ruido-grupos { display: grid; gap: 12px; margin-top: 14px; }
.ruido-grupos fieldset { border: 0; margin: 0; padding: 0; }
.ruido-grupos legend { font-weight: 800; font-size: .92rem; margin-bottom: 8px; color: var(--suave); }
.cadeia { list-style: none; margin: 18px 0 14px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; counter-reset: c; }
.cadeia li { position: relative; display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: var(--r-pequeno); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font-size: .66rem; font-weight: 800; text-align: center; line-height: 1.1; word-break: break-word; transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease; }
.cadeia li span { font-size: 1.35rem; }
.cadeia li.ativa { transform: translateY(-4px); background: var(--azul-claro); box-shadow: inset 0 0 0 2px var(--azul); }
.cadeia li.ruidosa { background: #ffe1e5; box-shadow: inset 0 0 0 2px var(--vermelho); animation: tremer .3s linear 2; }
.ruido-saida { margin-top: 16px; display: grid; gap: 10px; justify-items: start; }
.ruido-saida .chat { width: 100%; }

/* assertividade */
.formula { display: grid; gap: 14px; }
.formula-campo { display: grid; gap: 4px; }
.formula-rotulo { display: flex; align-items: center; gap: 8px; font: 800 1.1rem/1.2 var(--f-display); }
.formula-campo[data-n="1"] { --cor: #1f5fae; }
.formula-campo[data-n="2"] { --cor: #c98a00; }
.formula-campo[data-n="3"] { --cor: var(--carmim); }
.formula-campo[data-n="4"] { --cor: var(--roxo); }
.formula-dica { font-size: .9rem; color: var(--suave); }
.formula-alerta { font-size: .9rem; font-weight: 700; color: var(--vermelho); }
.formula-alerta:empty { display: none; }
.sentimentos { margin-top: -6px; }
.sentimentos .chip { min-height: 34px; font-size: .88rem; }
.formula-previa { margin-top: 18px; padding: 18px; border-radius: var(--r-grande); background: var(--azul-claro); }
.formula-previa-rotulo { font: 400 1.35rem/1 var(--f-mao); color: var(--azul); margin-bottom: 6px; }
.formula-frase { font: 700 1.15rem/1.4 var(--f-texto); }
.vazia .formula-frase { color: var(--suave); font-weight: 500; }

/* chapéu */
.palco-magica { display: grid; justify-items: center; gap: 10px; margin-top: 10px; padding: 18px 12px 22px; border-radius: var(--r-grande); background: radial-gradient(80% 70% at 50% 80%, #fff4cf, #fffcf8 70%); }
.magicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; justify-items: center; min-height: 168px; align-content: end; }
.magica { padding: 8px 20px; border-radius: 14px; font: 800 clamp(1.5rem, 7vw, 2.1rem)/1.1 var(--f-display); animation: sair-cartola .6s cubic-bezier(.2, 1.4, .4, 1) both; }
.magica-0 { background: #fde8a8; }
.magica-1 { background: #d9e6ff; }
.magica-2 { background: #ffd9e6; }
.cartola { width: 150px; padding: 0; border: 0; background: none; border-radius: 50%; }
.cartola svg { width: 100%; height: auto; overflow: visible; }
.aba { fill: #1d1d2b; }
.copa { fill: #2a2a3d; }
.fita { fill: var(--carmim); }
.boca { fill: #12121c; }
.cartola.pulo svg { animation: pulo .45s cubic-bezier(.2, 1.6, .4, 1); }

/* dupla (testes a dois) */
.dupla-area { display: grid; gap: 12px; }
.dupla-quem { justify-self: start; padding: 4px 14px; border-radius: 999px; font: 800 1rem/1.5 var(--f-display); color: #fff; }
.dupla-quem[data-quem="a"] { background: var(--azul); }
.dupla-quem[data-quem="b"] { background: var(--rosa); }
.dupla-progresso { height: 6px; border-radius: 6px; background: var(--linha); overflow: hidden; }
.dupla-progresso span { display: block; height: 100%; background: var(--tinta); transition: width .3s ease; }
.dupla-area > .btn { justify-self: start; }
.mini-barras { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 5px; font-size: .84rem; }
.mini-barras li { display: grid; grid-template-columns: 1fr 70px 14px; align-items: center; gap: 8px; }
.mini-trilho { height: 8px; border-radius: 6px; background: rgba(255, 255, 255, .8); overflow: hidden; }
.mini-trilho span { display: block; height: 100%; border-radius: 6px; background: var(--tinta); }
.msg-a .mini-trilho span { background: var(--azul); }
.msg-b .mini-trilho span { background: var(--rosa); }
.dicas { display: grid; gap: 12px; }
.dica-card { display: flex; gap: 14px; padding: 14px; border-radius: var(--r-medio); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); }
.dica-card img { width: 84px; height: 84px; border-radius: 14px; object-fit: cover; object-position: top; flex: none; }
.dica-card h3 { font-size: 1.2rem; }
.dica-sub { font-weight: 700; color: var(--carmim); font-size: .9rem; margin: 2px 0 6px; }
.dica-card ul { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.animal-res { display: grid; gap: 10px; }
.animal-fotos { display: flex; }
.animal-fotos img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff; }
.animal-fotos img + img { margin-left: -18px; }
.dicas-lista { margin: 0; padding-left: 1.1em; display: grid; gap: 8px; }

/* caixas e fios */
.w-cerebros .abas { margin-bottom: 16px; }
.cerebro-topo { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.cerebro-topo img { width: 96px; height: 120px; border-radius: var(--r-medio); object-fit: cover; object-position: 50% 30%; }
.cerebro-topo .p-lead + * { margin-top: 0; }
.caixas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.caixa {
  display: grid; justify-items: center; gap: 2px; min-height: 76px; padding: 8px 4px;
  border: 0; border-radius: 10px; background: #2b3b74; color: #fff;
  font-size: .8rem; font-weight: 700; line-height: 1.15;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .22), 0 3px 0 #18224a;
  transition: transform .2s ease, opacity .2s ease, filter .2s ease;
}
.caixa span { font-size: 1.6rem; }
.caixa:nth-child(3n + 1) { background: #335c3a; }
.caixa:nth-child(3n + 2) { background: #6a2d5c; }
.caixa-nada { background: #222 !important; }
.uma-aberta .caixa { opacity: .35; filter: grayscale(.6); transform: scale(.94); }
.uma-aberta .caixa[aria-pressed="true"] { opacity: 1; filter: none; transform: scale(1.06); background: var(--girassol) !important; color: var(--tinta); box-shadow: 0 0 0 4px #fff3c4, 0 10px 20px -8px rgba(0, 0, 0, .4); }
.cerebro-msg { min-height: 3em; margin-top: 14px; font-weight: 700; }
.fios { position: relative; width: min(100%, 380px); aspect-ratio: 1; margin: 0 auto; }
.fios svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.fios-linhas line { stroke: #e8a6c4; stroke-width: .8; opacity: .45; transition: opacity .25s, stroke .25s, stroke-width .25s; }
.fios-linhas line.acesa { stroke: var(--rosa); stroke-width: 2; opacity: 1; }
.fio-no {
  position: absolute; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 50%; background: #fff; font-size: 1.3rem;
  box-shadow: 0 0 0 2px #f3c0d6, 0 4px 10px -4px rgba(204, 47, 107, .5);
  transition: transform .2s ease, box-shadow .2s ease;
}
.fio-no.ativo { transform: translate(-50%, -50%) scale(1.18); box-shadow: 0 0 0 3px var(--rosa), 0 0 0 9px rgba(204, 47, 107, .15); }

/* tribuna */
.quem-pede { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.pessoa-btn { display: grid; justify-items: center; gap: 8px; padding: 18px 10px; border: 0; border-radius: var(--r-grande); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font: 800 1.15rem/1.1 var(--f-display); }
.pessoa-btn .bolha { width: 56px; height: 49px; }
.pessoa-btn:hover { box-shadow: inset 0 0 0 2px var(--tinta); }
.w-tribuna .campo { margin-top: 8px; }
.pergaminho { padding: 20px; border-radius: 6px; background: #fbf1dc; box-shadow: 0 1px 0 #e6d3ae, 0 14px 26px -16px rgba(90, 60, 20, .5); }
.pergaminho-de { font-weight: 700; color: #7b6046; font-size: .9rem; }
.pergaminho-txt { font: 400 1.6rem/1.25 var(--f-mao); color: #3b2618; margin-top: 4px; }
.vereditos { display: grid; gap: 10px; }
.veredito { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px 16px; border: 0; border-radius: var(--r-medio); color: #fff; font: 800 1.15rem/1.15 var(--f-display); text-align: left; box-shadow: inset 0 -5px 0 rgba(0, 0, 0, .18); }
.veredito > span[aria-hidden] { font-size: 1.5rem; }
.veredito .r-num { background: rgba(255, 255, 255, .25); }
.veredito-quero { background: #b8243c; }
.veredito-nao { background: #23407e; }
.veredito-acordo { background: #1e6b3d; }
.veredito.escolhido { outline: 3px solid var(--girassol); outline-offset: 2px; }
.acordo-termos { display: grid; gap: 10px; justify-items: start; }
.acordo-termos .campo { width: 100%; }

/* quem falou */
.fala-inimiga { margin: 4px 0 12px; padding: 18px; border-radius: var(--r-medio); background: #2a1c2e; color: #fff; font: 800 1.25rem/1.3 var(--f-display); }
.rostos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rosto { display: grid; gap: 0; padding: 0; border: 0; border-radius: var(--r-pequeno); overflow: hidden; background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font-size: .76rem; font-weight: 800; line-height: 1.15; text-align: center; }
.rosto img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: top; }
.rosto span { padding: 6px 4px 8px; min-height: 3.2em; display: grid; place-items: center; }
.rosto.certa { box-shadow: inset 0 0 0 3px var(--verde); background: #dcf3e7; }
.rosto.errada { box-shadow: inset 0 0 0 3px var(--vermelho); background: #ffe4e8; }
.rosto:disabled { cursor: default; }
.rosto:disabled:not(.certa):not(.errada) { opacity: .5; }
.w-quem .q-retorno { margin-top: 12px; }

/* encontro */
.encontro-form { display: grid; gap: 16px; }
.etapa-encontro { display: grid; gap: 12px; margin: 0; padding: 16px; border: 0; border-radius: var(--r-grande); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); }
.etapa-encontro legend { display: flex; align-items: center; gap: 8px; float: left; width: 100%; margin-bottom: 4px; font: 800 1.05rem/1.25 var(--f-display); }
.etapa-encontro legend .r-num { background: var(--laranja); }
.etapa-encontro legend + * { clear: both; }
.tipos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tipo { position: relative; }
.tipo input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.tipo > span { display: grid; justify-items: center; gap: 2px; padding: 10px 4px 12px; border-radius: 6px; background: #fff; box-shadow: 0 0 0 1.5px var(--linha), 0 8px 14px -10px rgba(0, 0, 0, .4); font-size: .82rem; font-weight: 700; text-align: center; transform: rotate(-1.5deg); transition: transform .2s ease; }
.tipo:nth-child(even) > span { transform: rotate(1.5deg); }
.tipo-e { font-size: 1.7rem; }
.tipo input:checked + span { box-shadow: 0 0 0 3px var(--laranja), 0 10px 18px -10px rgba(0, 0, 0, .5); transform: rotate(0) scale(1.04); }
.tipo input:focus-visible + span { outline: 3px solid var(--girassol); outline-offset: 3px; }
.campos-lado { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.campos-lado .campo, .campos-lado input { min-width: 0; }
.encontro-form > .btn { justify-self: start; }
.encontro-pronto { margin-top: 22px; display: grid; gap: 12px; }
.polaroide { justify-self: center; width: min(300px, 100%); padding: 18px 18px 22px; background: #fff; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .45); transform: rotate(-2deg); text-align: center; animation: carimbo .45s cubic-bezier(.2, 1.4, .4, 1); }
.polaroide-e { display: grid; place-items: center; height: 120px; margin-bottom: 12px; border-radius: 4px; background: linear-gradient(160deg, #f9b46b, #d9546b 60%, #6d2f56); font-size: 3.2rem; }
.polaroide-titulo { font: 400 2rem/1 var(--f-mao); }
.polaroide-ideia { margin-top: 6px; color: var(--suave); }

/* respiração */
.respiro { display: grid; place-items: center; margin: 26px 0 8px; min-height: 260px; }
.respiro-circulo {
  display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #bff0d6, #4cb68a 70%); color: #0b3d27;
  box-shadow: 0 0 0 14px rgba(76, 182, 138, .15), 0 0 0 30px rgba(76, 182, 138, .07);
  transition: transform 4s cubic-bezier(.4, 0, .4, 1);
}
.respiro-circulo[data-fase="inspira"] { transform: scale(1.55); transition-duration: 4s; }
.respiro-circulo[data-fase="solta"] { transform: scale(1); transition-duration: 6s; }
.respiro-txt { font: 800 1.15rem/1.1 var(--f-display); text-align: center; padding: 0 10px; }
.respiro-conta { min-height: 1.5em; text-align: center; font-weight: 700; color: var(--suave); }
.w-respiracao > .btn { display: flex; margin: 12px auto 0; }

/* placa */
.placa-pergunta { font-weight: 800; font-size: .95rem; margin-bottom: 8px; }
.w-placa .campo { margin-top: 16px; }
.placa-previa { margin-top: 18px; padding: 34px 16px 22px; border-radius: var(--r-grande); background: linear-gradient(170deg, #f6c08a, #e88a6a 60%, #7a3b4f); }
.placa-madeira { position: relative; max-width: 360px; margin: 0 auto; padding: 22px 20px 18px; border-radius: 14px; background: #f5e7cc; box-shadow: inset 0 0 0 6px #f5e7cc, inset 0 0 0 8px #d8bf93, 0 14px 24px -12px rgba(60, 30, 20, .6); text-align: center; color: #3b2618; }
.placa-madeira::before { content: ""; position: absolute; left: 22%; right: 22%; top: -30px; height: 34px; border: 3px solid #efe2c8; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.placa-titulo { font: 400 2rem/1.05 var(--f-mao); }
.placa-texto { margin-top: 10px; font-weight: 600; color: #6b4a2f; }
.placa-assina { margin-top: 12px; font: 400 1.25rem/1.1 var(--f-mao); color: #c0254a; }

/* encerramento */
.w-encerramento { display: grid; gap: 16px; }
.encerra-frase { font: 400 clamp(1.7rem, 7vw, 2.4rem)/1.15 var(--f-mao); color: var(--carmim); }
.redes { display: flex; flex-wrap: wrap; gap: 10px; }
.rede { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 16px; border-radius: 999px; background: linear-gradient(120deg, #feda75, #fa7e1e 30%, #d62976 60%, #962fbf); color: #fff; font-weight: 800; text-decoration: none; }

.voluntarios { display: grid; gap: 16px; align-items: center; padding: 20px; border-radius: var(--r-grande); background: #fff; box-shadow: var(--sombra); }
.voluntarios .p-lead + * { margin-top: 14px; }
.voluntarios-qr { width: min(240px, 70%); height: auto; justify-self: center; image-rendering: pixelated; }
.btn-whats { background: #157a40; color: #fff; }
.btn-whats:hover { background: #11683a; }
@media (min-width: 640px) { .voluntarios { grid-template-columns: 1fr auto; } .voluntarios-qr { width: 220px; } }

/* caderno */
.caderno-acoes { margin: 18px 0 14px; }
.tela-caderno .casal-chip-area { justify-content: flex-start; margin: 0; }
.notas { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.nota { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; padding: 16px; border-radius: var(--r-medio); background: #fff; box-shadow: var(--sombra); }
.nota-icone { font-size: 1.7rem; line-height: 1; }
.nota h2 { font-size: 1.2rem; }
.nota-data { font-size: .82rem; color: var(--suave); margin-top: 2px; }
.nota-texto { margin-top: 8px; white-space: pre-line; }
.nota-acoes { grid-column: 2; display: flex; gap: 4px; margin-left: -10px; }
.btn-icone.confirmar { background: #ffe4e8; color: var(--vermelho); }
.vazio { display: grid; gap: 10px; justify-items: start; margin-top: 18px; padding: 22px; border-radius: var(--r-grande); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); }
.vazio-titulo { font: 800 1.35rem/1.1 var(--f-display); }
.zona-apagar { display: grid; gap: 8px; justify-items: start; margin-top: 40px; padding-top: 20px; border-top: 2px dashed var(--linha); }
.zona-apagar h2 { font-size: 1.15rem; }
.zona-apagar p { color: var(--suave); }

/* respire */
.respire-widget { padding: 8px 16px 20px; border-radius: var(--r-grande); background: #effaf4; }
.sos-bloco { margin-top: 24px; display: grid; gap: 10px; justify-items: start; }
.sos-bloco h2 { font-size: 1.35rem; }
.sos-magicas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.sos-magicas li { padding: 8px 16px; border-radius: 14px; font: 800 1.25rem/1.1 var(--f-display); }
.sos-magicas li:nth-child(1) { background: #fde8a8; }
.sos-magicas li:nth-child(2) { background: #d9e6ff; }
.sos-magicas li:nth-child(3) { background: #ffd9e6; }
.sos-passos { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-weight: 600; }

/* ---------- Áudio ---------- */

.tocador {
  --tocador-h: 72px;
  position: fixed; z-index: 30; left: 0; right: 0;
  bottom: calc(var(--nav-h) + var(--seguro-baixo));
  background: var(--tinta); color: #fff;
  box-shadow: 0 -10px 24px -14px rgba(27, 37, 89, .6);
}
body[data-tela="estacao"] .tocador { bottom: calc(68px + var(--seguro-baixo)); }
.tocador-busca {
  --p: 0%;
  position: absolute; left: 0; right: 0; top: -9px; width: 100%; height: 18px; margin: 0;
  background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer;
}
.tocador-busca::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(90deg, var(--girassol) var(--p), rgba(255, 255, 255, .25) var(--p)); }
.tocador-busca::-moz-range-track { height: 4px; background: linear-gradient(90deg, var(--girassol) var(--p), rgba(255, 255, 255, .25) var(--p)); }
.tocador-busca::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border-radius: 50%; background: var(--girassol); border: 0; }
.tocador-busca::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--girassol); border: 0; }
.tocador-corpo { display: flex; align-items: center; gap: 2px; height: var(--tocador-h); padding: 6px 8px 6px 10px; }
.tocador .btn-icone:hover { background: rgba(255, 255, 255, .12); }
.tocador-play { width: 48px; height: 48px; background: #fff !important; color: var(--tinta); }
.tocador-play .ic { width: 22px; height: 22px; }
.tocador-info { display: grid; min-width: 0; flex: 1; padding: 0 8px; }
.tocador-titulo { font: 800 1rem/1.2 var(--f-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tocador-tempo { font-size: .8rem; opacity: .8; font-variant-numeric: tabular-nums; }
.tocador-pulo, .tocador-vel { font: 800 .82rem/1 var(--f-texto); width: 40px; }
body.com-audio main { padding-bottom: calc(var(--nav-h) + var(--seguro-baixo) + 96px); }
body.com-audio[data-tela="estacao"] main { padding-bottom: 76px; }
body.com-audio .aviso { bottom: calc(var(--nav-h) + var(--seguro-baixo) + 86px); }

.est-ouvir { width: 100%; max-width: 760px; margin: 0 auto; padding: 4px 16px 0; }
.ouvir-trecho {
  display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 10px;
  border: 0; border-radius: 999px; background: var(--azul-claro); color: #1b47b3; font-weight: 800; font-size: .92rem;
}
.ouvir-trecho .ic { width: 20px; height: 20px; }
.ouvir-trecho small { font-weight: 600; color: var(--suave); }

.busca-falas { margin-bottom: 8px; }
.busca-falas input { font-size: 1.05rem; }
.busca-conta { font-weight: 700; color: var(--suave); margin: 6px 0; }
.busca-resultado:not(:empty) { margin-bottom: 26px; }
.audio-parte { margin-top: 22px; padding: 18px; border-radius: var(--r-grande); background: #fff; box-shadow: var(--sombra); }
.audio-cab { display: grid; gap: 4px; justify-items: start; }
.audio-cab h2 { font-size: 1.45rem; }
.audio-cab p { color: var(--suave); font-size: .92rem; margin-bottom: 8px; }
.capitulos { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 6px; }
.capitulos button {
  display: grid; grid-template-columns: 40px 1fr 22px; align-items: center; gap: 10px; width: 100%;
  padding: 8px 12px 8px 8px; border: 0; border-radius: var(--r-pequeno); background: var(--creme); text-align: left;
}
.capitulos button:hover { background: #f4e9d7; }
.cap-icone { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; font-size: 1.2rem; }
.cap-txt { display: grid; }
.cap-txt strong { font: 800 1rem/1.2 var(--f-display); }
.cap-txt small { color: var(--suave); font-size: .82rem; font-variant-numeric: tabular-nums; }
.capitulos .ic { width: 18px; height: 18px; color: var(--tinta); }
.transcricao { margin-top: 14px; }
.transcricao summary { cursor: pointer; font-weight: 800; padding: 8px 0; }
.falas { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 2px; }
.falas button { display: grid; grid-template-columns: 4.6em 1fr; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 10px; background: transparent; text-align: left; line-height: 1.45; }
.falas button:hover { background: var(--creme); }
.falas time { font-size: .8rem; font-weight: 800; color: var(--azul); font-variant-numeric: tabular-nums; padding-top: 2px; }
.falas button.agora { background: var(--girassol-claro); box-shadow: inset 3px 0 0 var(--girassol); }
.busca-resultado .falas button { grid-template-columns: 1fr; gap: 2px; }
.falas mark { background: var(--girassol); color: inherit; border-radius: 3px; padding: 0 2px; }
.levar-falas summary { cursor: pointer; font-weight: 800; }
.levar-falas .falas { max-height: 50vh; overflow: auto; margin-top: 8px; padding: 4px; border-radius: var(--r-medio); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); }

/* pontos do que foi dito */
.pontos { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 12px; counter-reset: ponto; }
.pontos li { position: relative; padding: 16px 16px 14px 52px; border-radius: var(--r-medio); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); counter-increment: ponto; }
.pontos li::before { content: counter(ponto); position: absolute; left: 14px; top: 14px; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cor); color: #fff; font: 800 .9rem/1 var(--f-display); }
.pontos p { font-size: 1.04rem; }
.ponto-ref { margin-top: 6px; font: 400 1.15rem/1.2 var(--f-mao); color: var(--carmim); }
.ponto-ouvir { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; min-height: 36px; padding: 4px 12px 4px 8px; border: 0; border-radius: 999px; background: var(--azul-claro); color: #1b47b3; font-weight: 800; font-size: .86rem; }
.ponto-ouvir .ic { width: 16px; height: 16px; }
.ponto-ouvir small { font-weight: 700; color: var(--suave); font-variant-numeric: tabular-nums; }

/* olhar */
.olhar-regras { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.olhar-regras li { display: grid; justify-items: center; gap: 4px; padding: 14px 6px; border-radius: var(--r-medio); background: #fff; box-shadow: inset 0 0 0 2px var(--linha); font-weight: 800; font-size: .92rem; text-align: center; }
.olhar-regras span { font-size: 1.8rem; }
.olhar-msg { min-height: 1.5em; margin-top: 16px; text-align: center; font-weight: 700; font-size: 1.1rem; }
.w-olhar .olhar-acoes { justify-content: center; }
.w-olhar.olhando .olhar-regras { opacity: .4; }

/* ---------- Animações ---------- */

@keyframes abrir { from { opacity: 0; transform: translateY(-4px); } }
@keyframes chegar { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes subir { from { transform: translateY(40px); opacity: 0; } }
@keyframes carimbo { from { transform: scale(1.6) rotate(-10deg); opacity: 0; } }
@keyframes flutuar { 50% { transform: translateY(-8px) rotate(-3deg); } }
@keyframes pulo { 40% { transform: translateY(-10px) scale(1.05, .95); } 70% { transform: translateY(2px) scale(.97, 1.03); } }
@keyframes sair-cartola { from { opacity: 0; transform: translateY(60px) scale(.4) rotate(-8deg); } }
@keyframes balanca { 50% { transform: rotate(2deg) translateY(-2px); } }
@keyframes tremer { 25% { transform: translate(-2px, -4px); } 75% { transform: translate(2px, -4px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .vez { clip-path: none; opacity: 0; transition: opacity .2s !important; }
  .vez.aberta { opacity: 1; clip-path: none; }
  .respiro-circulo[data-fase="inspira"] { transform: scale(1.25); }
}

/* ---------- Tablet e computador ---------- */

@media (min-width: 640px) {
  .parada { --amp: 30px; }
  .missao-placar { gap: 14px; }
  .r-grade { grid-template-columns: repeat(2, 1fr); }
  .r-imagens .r-grade, .r-animais .r-grade { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
  .r-animais .r-grade { grid-template-columns: repeat(2, 1fr); }
  .cadeia li { font-size: .78rem; padding: 10px 4px; }
  .caixas { grid-template-columns: repeat(4, 1fr); }
  .modal { place-items: center; padding: 20px; }
  .modal-caixa { border-radius: var(--r-grande); padding-bottom: 22px; }
  .rostos { grid-template-columns: repeat(6, 1fr); }
  .ruido-grupos { grid-template-columns: 1fr 1fr; }
  .dicas { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .capa { grid-template-columns: 1.05fr 1fr; align-items: center; gap: 24px; padding: 24px 24px 0; }
  .capa-arte { max-height: none; border-radius: var(--r-grande); }
  .capa-texto { text-align: left; padding: 0; }
  .capa-imersao { justify-content: flex-start; }
  .capa-imersao::before { display: none; }
  .marca-script { margin-left: -6px; }
  .capa-por { margin-left: 0; }
  .inicio-corpo { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; grid-template-rows: auto 1fr; gap: 0 48px; padding: 0 24px; align-items: start; }
  .inicio-lado { grid-column: 1; grid-row: 1; }
  .inicio-extras { grid-column: 1; grid-row: 2; position: sticky; top: 24px; }
  .trilha { grid-column: 2; grid-row: 1 / span 2; margin: 34px 0 0; }
  .seguir { margin: 34px 0 0; }
  .casal-chip-area { justify-content: flex-start; margin: 16px 0 0; }
  .parada { --amp: 46px; }
  .breve, .instalar { margin: 20px 0 0; }
}

@media (min-width: 1024px) {
  body { font-size: 1.1rem; }
  .nav {
    top: 0; bottom: 0; right: auto; width: var(--rail); height: auto;
    display: flex; flex-direction: column; gap: 4px; padding: 22px 14px;
    box-shadow: 1px 0 0 var(--linha);
  }
  .nav-marca { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; padding: 6px 8px; color: var(--tinta); text-decoration: none; }
  .nav-marca .bolhas { display: flex; }
  .nav-marca .bolha { width: 30px; height: 26px; }
  .nav-marca .bolha + .bolha { margin-left: -6px; margin-top: 10px; }
  .nav-marca span { font: 800 1.12rem/1 var(--f-display); }
  .nav-marca span em { display: block; font-style: normal; color: var(--carmim); }
  .nav a[data-nav] { display: flex; justify-content: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; font-size: 1rem; }
  .nav a[data-nav]:hover { background: rgba(27, 37, 89, .05); }
  .nav a[aria-current="page"] { background: #fff; box-shadow: var(--sombra); }
  main { margin-left: var(--rail); padding-bottom: 40px; }
  .tocador, body[data-tela="estacao"] .tocador { left: 12px; right: auto; bottom: 14px; width: calc(var(--rail) - 24px); border-radius: var(--r-medio); }
  .tocador-corpo { flex-wrap: wrap; height: auto; padding: 14px 10px 10px; row-gap: 8px; }
  .tocador-info { flex-basis: calc(100% - 56px); }
  .tocador-busca { position: static; height: 18px; margin: 10px 0 -4px; }
  body.com-audio main, body.com-audio[data-tela="estacao"] main { padding-bottom: 40px; }
  body.com-audio .aviso { bottom: 24px; }
  .est-ouvir { max-width: 1180px; padding: 6px 28px 0; }
  body[data-tela="estacao"] .nav { display: flex; }
  .aviso, body[data-tela="estacao"] .aviso { bottom: 24px; left: calc(50% + var(--rail) / 2); }

  .estacao { min-height: 100vh; }
  .est-topo { padding: 14px 20px 8px; grid-template-columns: 44px 1fr 44px; }
  .est-prog { top: 66px; max-width: 1180px; width: 100%; margin: 0 auto; padding: 0 28px 10px; }
  .est-corpo { max-width: 1180px; padding: 20px 28px 40px; }
  .est-corpo.com-lado { display: grid; grid-template-columns: minmax(300px, 38%) 1fr; gap: 36px; align-items: start; }
  .est-lado { display: block; position: sticky; top: 100px; }
  .est-lado-leg { margin-top: 8px; font-size: .85rem; color: var(--suave); }
  .est-corpo:not(.com-lado) .passo { max-width: 980px; margin: 0 auto; }
  .est-rodape { max-width: 1180px; width: 100%; margin: 0 auto; padding: 14px 28px 22px; }
  .tela { padding: 36px 32px 0; }
  .r-animais .r-grade { grid-template-columns: repeat(2, 1fr); }
  .com-lado .r-imagens .r-grade { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
  .slides-grade { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 18px; }
  .modal { padding: 20px; }
}

@media (min-width: 1400px) {
  .est-corpo.com-lado { grid-template-columns: 44% 1fr; }
}

/* ---------- Impressão do caderno ---------- */

@media print {
  .nav, .fundo, .caderno-acoes, .zona-apagar, .nota-acoes, .casal-chip-area, .aviso { display: none !important; }
  main { margin: 0; padding: 0; }
  body { background: #fff; font-size: 12pt; }
  .nota { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
}