/* cs · #consulta — "Como é a consulta" (parede vinho, escura) */

.cs-grade { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(40px, 6vw, 104px); }

/* ---------- o retrato preso: mini estúdio à noite ---------- */
.cs-palco { position: relative; }
.cs-palco__fixo { position: sticky; top: 0; height: 100vh; min-height: 640px; display: flex; flex-direction: column; justify-content: flex-end; gap: 20px; padding-bottom: 5vh; }
.cs-estudio { margin: 0; height: min(84vh, 900px); display: flex; justify-content: center; align-items: flex-end; }
.cs-estudio img {
  position: relative; display: block; height: 100%; width: auto; max-width: none;
  /* o recorte termina reto na cintura e no braço direito: as duas bordas se dissolvem */
  -webkit-mask-image: linear-gradient(180deg, #000 74%, transparent 97%), linear-gradient(270deg, transparent 0%, #000 11%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(180deg, #000 74%, transparent 97%), linear-gradient(270deg, transparent 0%, #000 11%);
  mask-composite: intersect;
}
/* a cintura do recorte some na névoa do chão */
/* chão do ciclorama: a luz da softbox batendo onde ela "pisa" */
.cs-chao { position: absolute; z-index: -1; left: -34%; right: -34%; bottom: -6%; height: 26%; border-radius: 50%;
  background: radial-gradient(closest-side in oklab, color-mix(in oklab, var(--chiclete) 42%, transparent) 0%, color-mix(in oklab, var(--magenta) 22%, transparent) 55%, transparent 100%); }
/* softbox: o painel aceso do estúdio, fora de foco atrás dela */
.cs-softbox {
  position: absolute; z-index: -1; top: 0; right: -14%; width: 62%; aspect-ratio: 3 / 4; rotate: 8deg;
  border-radius: 18px; filter: blur(9px); opacity: .78;
  background: radial-gradient(70% 66% at 50% 44% in oklab, #fff3f7 0%, #ffc4da 30%, var(--chiclete) 70%, color-mix(in oklab, var(--magenta) 80%, transparent) 100%);
  box-shadow: 0 0 160px 50px color-mix(in oklab, var(--chiclete) 30%, transparent);
}
.cs-softbox__luz { position: absolute; inset: 7%; border-radius: 10px; border: 2px solid rgba(255, 246, 249, .5); }
.cs-contador { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: baseline; margin: 0; padding-top: 14px; border-top: 1px solid var(--linha); color: var(--tinta-suave); }
.cs-fita { display: flex; align-items: center; gap: 6px; flex: 1; margin: 0 22px; }
.cs-fita i { height: 3px; flex: 1; border-radius: 2px; background: color-mix(in oklab, #fdebee 22%, transparent); transition: flex-grow .8s var(--ease), background-color .8s ease; }
.cs-fita i.is-on { flex-grow: 3; background: var(--chiclete); }
.cs-fita i.is-feito { background: color-mix(in oklab, var(--chiclete) 55%, transparent); }
.cs-contador__num { font-size: 18px; letter-spacing: .14em; }
.cs-contador__num b { font-weight: 500; color: var(--acento); }

/* ---------- as frases como quadros do ensaio ---------- */
.cs-cabeco { padding-top: clamp(12px, 4vw, 60px); margin-bottom: clamp(24px, 4vw, 64px); }
.cs-titulo { font-size: clamp(56px, 1.6rem + 6.4vw, 128px); }
.cs-titulo .wf-fino { font-size: .5em; }
.cs-quadros { list-style: none; margin: 0; padding: 0; }
.cs-q { position: relative; min-height: 52vh; padding: 36px 0; display: flex; flex-direction: column; justify-content: center; }
.cs-q__n { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; font-size: 14px; font-weight: 500; letter-spacing: .3em; color: var(--acento); }
.cs-q__n::before { content: ""; width: 34px; height: 1px; background: currentColor; }
.cs-q__frase { margin: 0; font-family: var(--f-titulo); font-weight: 500; font-size: clamp(36px, 1rem + 3.4vw, 76px); line-height: 1.02; letter-spacing: -.012em; color: var(--tinta); text-wrap: balance; }
.cs-q__frase--longa { font-size: clamp(28px, 1rem + 1.9vw, 46px); line-height: 1.1; }
.cs-q__frase em, .cs-q__apoio em { font-style: normal; color: var(--acento); }
.cs-q__apoio { margin: 24px 0 0; max-width: 30em; font-style: italic; font-weight: 300; font-size: clamp(19px, 1rem + .5vw, 24px); line-height: 1.42; color: var(--tinta-suave); }
.cs-q__acao { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 34px; margin-top: 40px; }
.cs-assina { color: var(--acento); }

/* estado: a frase ativa grande, as outras recolhidas (só com JS, computador, sem movimento reduzido) */
.cs.cs-vivo .cs-q__frase, .cs.cs-vivo .cs-q__apoio, .cs.cs-vivo .cs-q__n, .cs.cs-vivo .cs-q__acao {
  transition: opacity .9s var(--ease), transform 1s var(--ease);
}
.cs.cs-vivo .cs-q__frase { transform-origin: 0 50%; }
.cs.cs-vivo .cs-q:not(.is-on) .cs-q__frase { opacity: .22; transform: scale(.62); }
.cs.cs-vivo .cs-q:not(.is-on) .cs-q__apoio, .cs.cs-vivo .cs-q:not(.is-on) .cs-q__acao { opacity: 0; transform: translateY(14px); }
.cs.cs-vivo .cs-q:not(.is-on) .cs-q__n { opacity: .35; }

/* ---------- tablet e celular: retrato em cima, frases em sequência ---------- */
@media (max-width: 1024px) {
  .cs-grade { grid-template-columns: minmax(0, 1fr); }
  .cs-palco { order: 2; }
  .cs-roteiro { display: contents; }
  .cs-cabeco { order: 1; padding-top: 0; margin-bottom: 32px; }
  .cs-quadros { order: 3; }
  .cs-palco__fixo { position: static; height: auto; min-height: 0; padding-bottom: 0; margin-bottom: 16px; }
  .cs-estudio { height: min(72vh, 680px); }
  .cs-softbox { right: 6%; width: 40%; }
  .cs-contador { display: none; }
  .cs-q { min-height: 0; padding: 40px 0; border-top: 1px solid var(--linha); }
  .cs-q:nth-child(even) { padding-left: 12%; }
  .cs-q--fecho { margin-top: 24px; padding: 36px 28px 32px; border: 0; border-radius: 6px; background: color-mix(in oklab, var(--magenta) 30%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--chiclete) 40%, transparent); }
}
@media (max-width: 760px) {
  .cs-estudio { height: min(66vh, 540px); }
  .cs-softbox { right: 0; top: 4%; width: 46%; rotate: 7deg; }
  .cs-q:nth-child(even) { padding-left: 9%; }
  .cs-q--fecho { margin-inline: -8px; padding: 32px 20px 26px; }
  .cs-q__acao { gap: 18px; }
}