/* Hero aprovado (F): Estúdio rosa do D com o texto e as fontes do B — Dra. Mallu Cerutti (v2). Não editar nas seções. */

@font-face { font-family: "Melodrama"; src: url("../fontes/melodrama-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Melodrama"; src: url("../fontes/melodrama-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Melodrama"; src: url("../fontes/melodrama-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Melodrama"; src: url("../fontes/melodrama-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Melodrama"; src: url("../fontes/melodrama-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fontes/ranade-300.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fontes/ranade-300i.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fontes/ranade-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Ranade"; src: url("../fontes/ranade-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }

:root {
  /* paleta: rosas vizinhos amostrados da pele (#c7a28f, #c18770) e do terno (#e82832, #da1e27, sombra #b91311) */
  --petala: #fdebee;
  --cha-claro: #f7d2d9;
  --cha: #efb7c3;
  --rosa-medio: #e48fa6;
  --chiclete: #f0709a;
  --framboesa: #ab3156;
  --magenta: #c11957;
  --vinho: #5a0f27;
  --vinho-texto: #4a0a20;
  --vermelho-terno: #e02a2c;
  --ouro: #c9a25a;

  --f-titulo: "Melodrama", "Didot", "Bodoni 72", serif;
  --f-texto: "Ranade", system-ui, sans-serif;
  --f-assinatura: "Corinthia", cursive;

  --margem: clamp(20px, 5vw, 80px);
  --faixa-h: 44px;
  --hero-h: max(680px, 100svh);

  --ease-suave: cubic-bezier(.22, .7, .2, 1);
  --ease-flash: cubic-bezier(.2, .9, .3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  font-family: var(--f-texto);
  color: var(--vinho-texto);
  background: var(--cha);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
a { color: inherit; }

/* ---------- topo ---------- */
.topo {
  position: absolute; z-index: 30; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px var(--margem);
}
.marca { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.marca__mono {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid color-mix(in oklab, var(--vinho) 55%, transparent);
  font-family: var(--f-titulo); font-size: 21px; line-height: 1; padding-top: 3px;
}
.marca__nome { font-family: var(--f-texto); font-weight: 500; font-size: 13px; letter-spacing: .32em; text-transform: uppercase; }
.topo__nav { display: flex; gap: clamp(18px, 2.4vw, 36px); font-size: 14px; letter-spacing: .04em; }
.topo__nav a { text-decoration: none; padding: 6px 0; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .5s var(--ease-suave); }
.topo__nav a:hover, .topo__nav a:focus-visible { background-size: 100% 1px; }
.topo__ig { font-weight: 500; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: var(--hero-h);
  overflow: clip;
  isolation: isolate;
}

/* ---------- o estúdio ---------- */
.estudio { position: absolute; inset: 0; z-index: 0; transform-origin: 68% 74%; transition: transform 1.6s var(--ease-suave); transform: scale(var(--zoom, 1)); }

/* parede infinita: malha rosa-chá → rosa-chiclete, com cantos mais fundos */
.estudio__parede {
  position: absolute; inset: 0;
  background:
    radial-gradient(60% 55% at 100% 0% in oklab, color-mix(in oklab, var(--chiclete) 85%, var(--framboesa)) 0%, transparent 72%),
    radial-gradient(55% 60% at 0% 0% in oklab, var(--rosa-medio) 0%, transparent 70%),
    radial-gradient(70% 70% at 22% 62% in oklab, var(--cha-claro) 0%, transparent 70%),
    radial-gradient(60% 50% at 0% 100% in oklab, var(--rosa-medio) 0%, transparent 75%),
    radial-gradient(50% 45% at 100% 100% in oklab, color-mix(in oklab, var(--chiclete) 70%, var(--rosa-medio)) 0%, transparent 75%),
    linear-gradient(180deg in oklab, var(--cha) 0%, var(--cha-claro) 70%, var(--cha) 100%);
}
/* manchas que respiram (ciclo de 34 s) */
.estudio__malha {
  position: absolute; inset: -10%;
  background:
    radial-gradient(28% 34% at 30% 30% in oklab, color-mix(in oklab, var(--petala) 70%, transparent) 0%, transparent 100%),
    radial-gradient(30% 30% at 82% 22% in oklab, color-mix(in oklab, var(--chiclete) 38%, transparent) 0%, transparent 100%),
    radial-gradient(26% 30% at 12% 80% in oklab, color-mix(in oklab, var(--chiclete) 22%, transparent) 0%, transparent 100%);
  animation: respira 34s ease-in-out infinite alternate;
}
@keyframes respira {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2.5%, -1.5%, 0) scale(1.05); }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.02); }
}

/* luz de softbox atrás dela: foco mais claro que acompanha a pose */
.estudio__softbox {
  position: absolute;
  left: var(--luz-x, 68%); top: var(--luz-y, 44%);
  width: var(--luz-w, 62vh); height: var(--luz-w, 62vh);
  translate: calc(-50% + var(--px, 0) * 26px) calc(-50% + var(--py, 0) * 16px);
  border-radius: 50%;
  background: radial-gradient(closest-side in oklab, #fff6f7 0%, color-mix(in oklab, var(--petala) 85%, transparent) 30%, color-mix(in oklab, var(--cha-claro) 45%, transparent) 62%, transparent 100%);
  opacity: .92;
  transition: left 1.4s var(--ease-suave), top 1.4s var(--ease-suave), width 1.4s var(--ease-suave), height 1.4s var(--ease-suave);
}

/* chão e curva do ciclorama */
.estudio__chao {
  position: absolute; left: -5%; right: -5%; bottom: 0; top: var(--horizonte, 70%);
  background:
    radial-gradient(42% 60% at var(--luz-x, 68%) 38% in oklab, color-mix(in oklab, #fff4f6 calc(var(--poca, 1) * 70%), transparent) 0%, transparent 100%),
    linear-gradient(180deg in oklab, color-mix(in oklab, var(--cha-claro) 0%, transparent) 0%, color-mix(in oklab, var(--cha-claro) 90%, var(--petala)) 22%, var(--cha) 70%, color-mix(in oklab, var(--rosa-medio) 70%, var(--cha)) 100%);
  transition: top 1.6s var(--ease-suave);
}
/* a dobra entre parede e chão: uma faixa de sombra macia e uma de luz logo abaixo */
.estudio__curva {
  position: absolute; left: -5%; right: -5%;
  top: calc(var(--horizonte, 70%) - 7%); height: 16%;
  background: linear-gradient(180deg in oklab,
    transparent 0%,
    color-mix(in oklab, var(--rosa-medio) 22%, transparent) 38%,
    color-mix(in oklab, var(--framboesa) 9%, transparent) 50%,
    color-mix(in oklab, #fff3f5 calc(var(--poca, 1) * 30%), transparent) 70%,
    transparent 100%);
  transition: top 1.6s var(--ease-suave);
}

/* o nome na parede, como cabeço de capa (ela passa à frente) */
.estudio__nome {
  position: absolute; left: var(--nome-x, 68%); top: var(--nome-y, 3%);
  translate: calc(-50% + var(--px, 0) * -12px) calc(var(--py, 0) * -6px);
  font-family: var(--f-titulo);
  font-size: clamp(120px, 26vw, 420px);
  line-height: .9; letter-spacing: -.01em;
  color: color-mix(in oklab, var(--chiclete) 30%, transparent);
  mix-blend-mode: multiply;
  white-space: nowrap;
  user-select: none;
}

/* ---------- palco e poses ---------- */
.palco {
  position: absolute; inset: 0 0 var(--faixa-h) 0; z-index: 2;
  container-type: size;
}
.palco__clique {
  position: absolute; z-index: 5;
  left: 50%; right: 0; top: 12%; bottom: 0;
  background: none; border: 0; padding: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.palco__clique:focus-visible { outline: 1px dashed color-mix(in oklab, var(--vinho) 60%, transparent); outline-offset: -12px; }

.pose {
  position: absolute; margin: 0;
  left: var(--x); bottom: var(--b);
  height: var(--h);
  aspect-ratio: var(--ar);
  translate: -50% 0;
  opacity: 0; visibility: hidden;
  transition: opacity .1s ease, visibility 0s linear .1s, transform .9s var(--ease-suave);
  transform: translateY(1.2%) scale(.985);
  transform-origin: 50% 100%;
}
.pose.is-on { opacity: 1; visibility: visible; transform: none; transition: opacity .22s ease .04s, visibility 0s, transform 1.1s var(--ease-suave); }
.pose__foto { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.pose__foto { z-index: 2; filter: saturate(1.02) drop-shadow(0 0 1px color-mix(in oklab, var(--framboesa) 35%, transparent)); }
/* sombra projetada na parede (luz principal vindo da frente-esquerda), em framboesa */
.pose__projecao {
  position: absolute; inset: 0; z-index: 0;
  filter: blur(18px);
  opacity: .2;
  mix-blend-mode: multiply;
  transform-origin: 50% 100%;
  transform: translate(var(--proj-x, 9%), -1%) skewX(-8deg) scale(1.01, .99);
  pointer-events: none;
}
.pose__projecao > span {
  position: absolute; inset: 0;
  background: var(--framboesa);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
/* sombra de contato no chão */
.pose__contato {
  position: absolute; z-index: 1;
  left: -25%; right: -25%; top: 0; bottom: -8%;
  background: var(--contato, none);
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* conjunto do computador */
.pose[data-conj="estreito"] { display: none; }
.pose[data-pose="poltrona"] {
  --x: 69%; --b: 4.5cqh; --h: 88cqh; --ar: 1193 / 2307;
  --contato:
    radial-gradient(33% 2.6% at 50.5% 80% in oklab, rgba(74, 10, 32, .58) 0%, rgba(74, 10, 32, .22) 50%, transparent 100%),
    radial-gradient(46% 7.5% at 50% 81% in oklab, rgba(120, 22, 56, .24) 0%, transparent 100%),
    radial-gradient(4.2% .75% at 30.5% 92.2% in oklab, rgba(74, 10, 32, .45) 0%, transparent 100%),
    radial-gradient(4.6% .75% at 73.5% 89.9% in oklab, rgba(74, 10, 32, .45) 0%, transparent 100%),
    radial-gradient(30% 3.4% at 51% 91.6% in oklab, rgba(120, 22, 56, .13) 0%, transparent 100%);
}
.pose[data-pose="em-pe"] {
  --x: 68.5%; --b: -2cqh; --h: 98cqh; --ar: 1163 / 2227; --proj-x: 11%;
  --contato: radial-gradient(48% 9% at 50% 96% in oklab, rgba(120, 22, 56, .2) 0%, transparent 100%);
}
.pose[data-pose="close"] {
  --x: 63%; --b: -8cqh; --h: 102cqh; --ar: 1440 / 2359; --proj-x: 7%;
  --contato: radial-gradient(50% 8% at 46% 97% in oklab, rgba(120, 22, 56, .22) 0%, transparent 100%);
}

/* a foto de perto foi cortada nas laterais pelo fotógrafo: a borda se dissolve no estúdio */
.pose[data-pose="close"] .pose__foto,
.pose[data-pose="m-sentada"] .pose__foto,
.pose[data-pose="m-meio"] .pose__foto {
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94.5%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 94.5%, transparent 100%);
}

/* cena por pose: luz, horizonte e "lente" */
.hero[data-pose="poltrona"]  { --luz-x: 69%; --luz-y: 40%; --luz-w: 74vh; --horizonte: 71%; --zoom: 1; }
.hero[data-pose="close"]     { --luz-x: 64%; --luz-y: 36%; --luz-w: 92vh; --horizonte: 92%; --zoom: 1.1; --poca: .25; }
.hero[data-pose="em-pe"]     { --luz-x: 66%; --luz-y: 34%; --luz-w: 86vh; --horizonte: 88%; --zoom: 1.06; --poca: .35; }

/* ---------- flash de estúdio ---------- */
.flash {
  position: absolute; inset: 0; z-index: 6; pointer-events: none;
  background: radial-gradient(70% 80% at var(--luz-x, 68%) 40% in oklab, #fffafb 0%, #fde9ee 60%, #f9d8e0 100%);
  opacity: 0;
}
.flash.dispara { animation: flash .78s var(--ease-flash) both; }
@keyframes flash {
  0% { opacity: 0; }
  10% { opacity: .82; }
  100% { opacity: 0; }
}

/* ---------- texto ---------- */
.texto {
  position: absolute; z-index: 8;
  left: var(--margem);
  top: 50%; translate: 0 -54%;
  width: min(50vw, 720px);
}
.cabeco {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 26px;
  font-family: var(--f-texto); font-weight: 500;
  font-size: 12.5px; letter-spacing: .42em; text-transform: uppercase;
  color: var(--framboesa);
}
.cabeco__fio { width: 46px; height: 1px; background: currentColor; }

.titulo {
  margin: 0;
  font-family: var(--f-titulo); font-weight: 400;
  font-size: clamp(46px, min(5.6vw, 9.6svh), 98px);
  line-height: .98;
  letter-spacing: -.012em;
  color: var(--vinho);
  text-wrap: balance;
}
.titulo .linha { display: block; overflow: clip; overflow-clip-margin: .2em; padding-bottom: .04em; }
.titulo .linha > span { display: inline-block; }
.titulo .t-fino { font-weight: 300; font-size: .66em; line-height: 1.06; letter-spacing: -.004em; }
.titulo .t-forte { font-weight: 600; line-height: .98; }
.titulo .t-fino + .t-forte { margin-top: .06em; }
.sua {
  font-style: normal;
  position: relative;
  color: var(--magenta);
}
/* traço de batom sob "sua." (desenha na entrada) */
.sua__traco {
  position: absolute; left: -.06em; right: .02em; bottom: -.16em; width: calc(100% + .04em); height: .26em;
  overflow: visible;
}
.sua__traco path {
  fill: none; stroke: var(--magenta); stroke-width: 6; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: var(--traco-off, 0);
  opacity: .9;
}
.cabeco__tulipa { width: 15px; height: 20px; margin-left: 2px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* a frase da bio com a assinatura (do hero B) */
.voz { margin: clamp(16px, 2.6vh, 28px) 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 18px; }
.voz blockquote { margin: 0; font-family: var(--f-texto); font-style: italic; font-weight: 300; font-size: clamp(19px, 1.6vw, 25px); line-height: 1.3; color: var(--vinho); }
.voz figcaption { margin: 0; }
.assinatura { font-family: var(--f-assinatura); font-weight: 700; font-size: clamp(34px, 2.9vw, 44px); line-height: .6; color: var(--framboesa); display: inline-block; transform: translateY(.12em) rotate(-4deg); }

/* a voz dela, como legenda de editorial */
.fala {
  position: absolute; z-index: 8;
  left: var(--margem); bottom: calc(var(--faixa-h) + 26px);
  margin: 0; max-width: 30em;
  display: grid; gap: 6px;
}
.fala blockquote { margin: 0; }
.fala p { margin: 0; font-family: var(--f-titulo); font-size: clamp(19px, 1.45vw, 24px); line-height: 1.2; color: var(--framboesa); }
.fala figcaption { font-size: 11px; letter-spacing: .24em; text-transform: uppercase; font-weight: 500; color: color-mix(in oklab, var(--vinho-texto) 75%, transparent); }
@media (max-height: 819px), (max-width: 1180px) { .fala { display: none; } }

.apoio {
  margin: clamp(12px, 2vh, 20px) 0 0;
  max-width: 34em;
  font-size: clamp(16px, 1.22vw, 19px);
  line-height: 1.55;
  font-weight: 400;
  color: color-mix(in oklab, var(--vinho-texto) 90%, var(--framboesa));
}
.apoio strong { font-weight: 500; color: var(--vinho); }

.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 34px; }
.botao {
  display: inline-grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 18px; align-items: center;
  padding: 14px 18px 14px 28px;
  border-radius: 999px;
  background: var(--framboesa);
  color: #fff3f6;
  text-decoration: none;
  box-shadow: 0 14px 34px -14px rgba(90, 15, 39, .65), inset 0 1px 0 rgba(255, 255, 255, .18);
  transition: background-color .4s ease, transform .4s var(--ease-suave), box-shadow .4s ease;
}
.botao:hover, .botao:focus-visible { background: var(--magenta); transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(90, 15, 39, .7), inset 0 1px 0 rgba(255, 255, 255, .2); }
.botao:focus-visible { outline: 2px solid var(--vinho); outline-offset: 3px; }
.botao__pergunta { grid-column: 1; font-family: var(--f-titulo); font-weight: 500; font-size: 22px; line-height: 1.05; }
.botao__acao { grid-column: 1; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; opacity: .86; }
.botao__seta {
  grid-column: 2; grid-row: 1 / span 2;
  width: 44px; height: 44px; padding: 11px;
  border-radius: 50%; background: #fff3f6;
  fill: none; stroke: var(--framboesa); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .4s var(--ease-suave);
}
.botao:hover .botao__seta { transform: translateX(3px); }
.secundaria { font-size: 15px; text-decoration: none; color: var(--vinho-texto); }
.secundaria span { font-weight: 500; border-bottom: 1px solid color-mix(in oklab, var(--framboesa) 60%, transparent); padding-bottom: 2px; }

/* ---------- folha de contato ---------- */
.folha {
  position: absolute; z-index: 9;
  right: var(--margem); bottom: calc(var(--faixa-h) + 26px);
  display: grid; gap: 10px; justify-items: end;
}
.folha__legenda {
  margin: 0; display: flex; align-items: center; gap: 10px;
  font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; font-weight: 500;
  color: var(--vinho-texto);
}
.folha__rec { width: 7px; height: 7px; border-radius: 50%; background: var(--vermelho-terno); box-shadow: 0 0 0 3px color-mix(in oklab, var(--vermelho-terno) 22%, transparent); }
.folha__num { font-variant-numeric: tabular-nums; letter-spacing: .12em; }
.folha__num b { font-weight: 500; color: var(--magenta); }
.folha__quadros { display: flex; gap: 8px; }
.quadro {
  position: relative;
  width: 58px; height: 78px; padding: 0;
  border: 1px solid color-mix(in oklab, var(--vinho) 22%, transparent);
  border-radius: 3px;
  background: radial-gradient(80% 70% at 50% 40% in oklab, var(--petala), var(--cha));
  overflow: hidden; cursor: pointer;
  transition: border-color .4s ease, transform .5s var(--ease-suave), box-shadow .4s ease;
}
.quadro img { position: absolute; left: 50%; bottom: 0; height: 92%; width: auto; translate: -50% 0; }
.quadro::after { content: attr(data-n); position: absolute; left: 5px; top: 3px; font-size: 9px; letter-spacing: .1em; color: color-mix(in oklab, var(--vinho) 70%, transparent); }
.quadro:hover { transform: translateY(-2px); }
.quadro[aria-current="true"] { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta), 0 10px 20px -12px rgba(90, 15, 39, .6); }
.quadro:focus-visible { outline: 2px solid var(--vinho); outline-offset: 2px; }
.quadro__barra { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--magenta); transform-origin: 0 50%; transform: scaleX(0); }
.quadro[aria-current="true"] .quadro__barra { animation: barra var(--intervalo, 5200ms) linear both; }
.folha.parada .quadro__barra { animation: none !important; transform: scaleX(0); }
@keyframes barra { to { transform: scaleX(1); } }

/* ---------- faixa dos registros ---------- */
.faixa {
  position: absolute; z-index: 10; left: 0; right: 0; bottom: 0;
  height: var(--faixa-h);
  display: flex; align-items: center;
  padding: 0 var(--margem);
  background: var(--vinho);
  color: #f9dbe3;
}
.faixa__linha {
  margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; font-weight: 400;
}
.faixa__linha span { font-weight: 500; }
.faixa__linha .faixa__extra, .faixa__linha .faixa__extra2 { font-weight: 300; letter-spacing: .14em; }
.faixa__linha i { font-style: normal; margin: 0 .9em; color: var(--chiclete); }

/* ---------- granulado ---------- */
.grao {
  position: absolute; inset: 0; z-index: 7; pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .05 0 0 0 0 .15 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------- entrada (só com JS) ---------- */
.js .titulo .linha > span { transform: translateY(105%); }
.js .cabeco, .js .voz, .js .apoio, .js .acoes, .js .folha, .js .fala, .js .estudio__nome { opacity: 0; }
.js .sua { --traco-off: 1; }
.js:not(.pronto) .pose { opacity: 0; }
.js .estudio__parede, .js .estudio__malha { filter: brightness(1.06) saturate(.85); }

.pronto .titulo .linha > span { transform: none; transition: transform 1.15s var(--ease-suave); }
.pronto .titulo .linha:nth-child(1) > span { transition-delay: .25s; }
.pronto .titulo .linha:nth-child(2) > span { transition-delay: .37s; }
.pronto .titulo .linha:nth-child(3) > span { transition-delay: .49s; }
.pronto .sua__traco path { transition: stroke-dashoffset 1s cubic-bezier(.6,.05,.3,1) 1.2s; }
.pronto .sua { --traco-off: 0; }
.pronto .cabeco { opacity: 1; transition: opacity .9s ease .1s; }
.pronto .voz { opacity: 1; transition: opacity 1s ease .75s; }
.pronto .apoio { opacity: 1; transition: opacity 1s ease .95s; }
.pronto .acoes { opacity: 1; transition: opacity 1s ease 1.05s; }
.pronto .folha { opacity: 1; transition: opacity 1s ease 1.4s; }
.pronto .fala { opacity: 1; transition: opacity 1.2s ease 1.7s; }
.pronto .estudio__nome { opacity: 1; transition: opacity 2.2s ease .5s; }
.pronto .estudio__parede, .pronto .estudio__malha { filter: none; transition: filter 1.6s ease; }

/* ---------- telas médias ---------- */
@media (max-width: 1366px) {
  .pose[data-pose="poltrona"] { --x: 66.5%; }
  .faixa__extra2, i.faixa__extra2 { display: none; }
}
@media (max-width: 1180px) {
  .folha__texto { display: none; }
  .quadro { width: 44px; height: 60px; }
  .faixa__extra, i.faixa__extra { display: none; }
  .texto { width: 46vw; }
  .titulo { font-size: clamp(42px, 5.4vw, 64px); }
  .pose[data-pose="poltrona"] { --x: 66%; --h: 82cqh; }
  .pose[data-pose="close"] { --x: 72%; --h: 98cqh; }
  .pose[data-pose="em-pe"] { --x: 72%; --h: 92cqh; }
  .faixa__extra2 { display: none; }
  .topo__nav a:not(.topo__ig) { display: none; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .titulo { font-size: clamp(42px, min(5vw, 8.2svh), 80px); }
  .voz { margin-top: 12px; }
  .voz blockquote { font-size: 18px; }
  .assinatura { font-size: 30px; }
  .texto { translate: 0 -50%; }
  .apoio { margin-top: 20px; }
  .acoes { margin-top: 24px; }
  .cabeco { margin-bottom: 18px; }
}

/* ---------- celular (e tablet em pé) ---------- */
@media (max-width: 760px), (max-width: 1024px) and (orientation: portrait) {
  :root { --faixa-h: 36px; --hero-h: max(640px, 100svh); }
  .topo { padding: 16px 20px; }
  .marca__mono { width: 32px; height: 32px; font-size: 18px; }
  .marca__nome { font-size: 11px; letter-spacing: .26em; }
  .topo__nav a:not(.topo__ig) { display: none; }
  .topo__ig { font-size: 13px; }

  .hero { display: flex; flex-direction: column; }
  .texto {
    position: static; left: auto; top: auto; translate: none;
    width: auto; padding: 84px 20px 0;
    order: -1;
  }
  .cabeco { margin-bottom: 14px; font-size: 11px; letter-spacing: .34em; }
  .cabeco__fio { width: 28px; }
  .titulo { font-size: clamp(34px, 10.4vw, 64px); line-height: 1; }
  .apoio { margin-top: 12px; font-size: 15.5px; line-height: 1.45; max-width: 28em; }
  .apoio__areas { display: none; }
  .cabeco { font-size: 10px; letter-spacing: .16em; white-space: nowrap; gap: 9px; }
  .voz { margin-top: 12px; gap: 0 12px; }
  .voz blockquote { font-size: 17px; }
  .assinatura { font-size: 30px; }

  .texto > .cabeco, .texto > .titulo, .texto > .apoio { position: relative; z-index: 8; }
  .texto > .acoes {
    position: absolute; z-index: 9; left: 16px; right: 16px; bottom: calc(var(--faixa-h) + 14px);
    margin: 0; justify-content: center;
  }
  .botao { width: 100%; max-width: 380px; justify-content: space-between; grid-template-columns: 1fr auto; padding: 10px 10px 10px 24px; }
  .botao__pergunta { font-size: 20px; }
  .botao__acao { font-size: 11px; }
  .secundaria { display: none; }

  .palco { position: relative; inset: auto; flex: 1 1 auto; min-height: 0; margin-bottom: var(--faixa-h); }
  .palco__clique { left: 0; top: 0; bottom: 90px; }
  .pose[data-conj="largo"] { display: none; }
  .pose[data-conj="estreito"] { display: block; }
  .pose { bottom: auto; top: var(--t); }
  .pose[data-pose="m-em-pe"] { --x: 50%; --t: 3cqh; --h: 170cqh; --ar: 1163 / 2227; --proj-x: 8%; }
  .pose[data-pose="m-sentada"] { --x: 54%; --t: 3cqh; --h: 118cqh; --ar: 1440 / 2359; --proj-x: 6%; }
  .pose[data-pose="m-meio"] { --x: 50%; --t: 5cqh; --h: 112cqh; --ar: 1440 / 2317; --proj-x: 6%; }
  .pose__contato { display: none; }

  .estudio__nome { font-size: 44vw; --nome-x: 50%; top: calc(var(--palco-top, 45%) - 9vw); }
  .hero[data-pose] { --horizonte: 92%; --zoom: 1; }
  .hero[data-pose="m-em-pe"] { --luz-x: 50%; --luz-y: 58%; --luz-w: 120vw; }
  .hero[data-pose="m-sentada"] { --luz-x: 46%; --luz-y: 60%; --luz-w: 120vw; }
  .hero[data-pose="m-meio"] { --luz-x: 54%; --luz-y: 58%; --luz-w: 120vw; }

  .folha { right: 16px; bottom: auto; top: calc(var(--palco-top, 45%) + 14px); justify-items: end; }
  .folha__quadros { display: none; }
  .folha__legenda { font-size: 10px; letter-spacing: .14em; gap: 7px; }
  .folha__texto { display: none; }

  .faixa { padding: 0 16px; justify-content: center; }
  .faixa__linha { font-size: 10.5px; letter-spacing: .12em; }
  .faixa__linha i { margin: 0 .55em; }
  .faixa__extra, .faixa__extra2 { display: none; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .apoio { display: none; }
}

/* ---------- movimento reduzido ---------- */
@media (prefers-reduced-motion: reduce) {
  .estudio__malha { animation: none; }
  .estudio, .estudio__softbox, .estudio__chao, .estudio__curva { transition: none; }
  .pose, .pose.is-on { transition: opacity .3s ease, visibility 0s; transform: none; }
  .flash.dispara { animation: none; }
  .js .titulo .linha > span { transform: none; }
  .js .cabeco, .js .voz, .js .apoio, .js .acoes, .js .folha, .js .estudio__nome { opacity: 1; }
  .js .sua { --traco-off: 0; }
  .js:not(.pronto) .pose { opacity: 1; }
  .js .fala { opacity: 1; }
  .js .estudio__parede, .js .estudio__malha { filter: none; }
  .quadro[aria-current="true"] .quadro__barra { animation: none; }
}
@media (max-width: 420px) {
  .cabeco__fio, .cabeco__tulipa { display: none; }
}