/* MarryCast Studio
   Segue o manual da marca MarryCast (versão 2.0): prata e branco organizam as peças,
   o dourado marca o que importa e as fotos trazem a cor. Preto só em textos e na logo, nunca como fundo.
   Família MarryCast (derivada da Jost): títulos em Medium, destaque em Medium Italic, texto em Regular.
   O layout e as animações seguem o site da GFTeam Colônia que o Fabio aprovou. */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --bg-2: #f4f4f4;
  --sup: #ffffff;
  --sup-2: #e6e6e6;
  --linha: rgba(17, 17, 17, 0.1);
  --linha-2: rgba(17, 17, 17, 0.18);
  --fg: #111111;
  --fg-2: #3a3a3a;
  --mudo: #5f5f5f;
  --ouro: #e3b341;
  --ouro-2: #e3b341;
  --ouro-txt: #525252;
  --tinta: #525252;
  --tinta-2: #5c5c5c;
  --tinta-fg: #ffffff;
  --tinta-mudo: #ececec;
  --tinta-linha: rgba(255, 255, 255, 0.2);
  --f-display: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --f-corpo: "Jost", "Futura", "Century Gothic", "Helvetica Neue", Arial, sans-serif;
  --raio: 18px;
  --raio-sm: 12px;
  --wrap: 1280px;
  --gl: max(16px, env(safe-area-inset-left, 0px));
  --gr: max(16px, env(safe-area-inset-right, 0px));
  --t-h2: clamp(2.15rem, 1.3rem + 3vw, 4.05rem);
  --sombra: 0 30px 60px -32px rgba(17, 17, 17, 0.3);
}

* { box-sizing: border-box; }
html { scroll-padding-top: 90px; touch-action: manipulation; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--f-corpo);
  font-size: 1.04rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 70; background: var(--bg); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-weight: 500; }
h1 em, h2 em, h3 em { font-weight: 500; }
p { margin: 0; }
em { font-style: italic; }
.selecionavel { user-select: all; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gl); padding-right: var(--gr); }
.sec { padding-block: clamp(80px, 10vw, 150px); position: relative; }

.rotulo { display: inline-flex; align-items: center; gap: 10px; font-family: var(--f-corpo); font-weight: 500; font-size: 0.74rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mudo); }
.rotulo::before { content: ""; width: 18px; height: 1px; background: var(--ouro); }
.sec-cab { display: grid; gap: 16px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 760px; }
.sec-cab--centro { margin-inline: auto; text-align: center; justify-items: center; }
.sec-cab h2, .sobre-cab h2, .hist-cab h2, .porque-t, .final h2 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.015em; }
h1 em, h2 em { color: var(--ouro-txt); }
.sec-lede { color: var(--mudo); font-size: 1.12rem; max-width: 56ch; }

/* botões */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 12px 26px; border-radius: 999px;
  font-family: var(--f-corpo); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.01em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: translate 0.35s cubic-bezier(.2, .8, .2, 1), transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.btn-cta { background: var(--tinta); color: #fff; box-shadow: 0 12px 28px -14px rgba(17, 17, 17, 0.5); }
.btn-cta:hover { transform: translateY(-2px); background: #474747; box-shadow: 0 18px 36px -14px rgba(17, 17, 17, 0.6); }
.btn-vidro { background: rgba(255, 255, 255, 0.6); border-color: var(--linha-2); color: var(--fg); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.btn-vidro:hover { background: #fff; border-color: var(--ouro-2); }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.86rem; box-shadow: none; }
.btn-lg { min-height: 58px; padding: 16px 34px; font-size: 1.05rem; }
.btn-seta { transition: transform 0.2s ease; }
.btn:hover .btn-seta { transform: translateX(4px); }

/* topo */
.topo { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: rgba(255, 255, 255, 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--linha); }
.topo-in { max-width: var(--wrap); margin-inline: auto; padding: 12px var(--gr) 12px var(--gl); display: flex; align-items: center; gap: 22px; }
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.marca img { display: block; height: 40px; width: auto; }
.nav { display: flex; gap: 2px; margin-left: auto; }
.nav a { font-size: 0.92rem; text-decoration: none; padding: 8px 12px; color: var(--fg-2); border-radius: 999px; transition: color 0.2s ease, background-color 0.2s ease; }
.nav a:hover { color: var(--fg); background: rgba(17, 17, 17, 0.05); }
.idiomas { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--linha); border-radius: 999px; }
.idiomas a { font-size: 0.74rem; font-weight: 600; letter-spacing: 0.08em; text-decoration: none; padding: 4px 8px; border-radius: 999px; color: var(--mudo); }
.idiomas a[aria-current="true"] { background: var(--tinta); color: #fff; }
.idiomas a:not([aria-current="true"]):hover { color: var(--fg); }
.progresso { position: fixed; left: 0; right: 0; top: env(safe-area-inset-top, 0px); height: 2px; z-index: 60; pointer-events: none; }
.progresso span { display: block; height: 100%; width: 100%; transform-origin: 0 50%; transform: scaleX(var(--p, 0)); background: linear-gradient(90deg, var(--ouro), var(--ouro-2)); }
@media (max-width: 1080px) {
  .topo-in { flex-wrap: wrap; row-gap: 6px; }
  .idiomas { margin-left: auto; }
  .nav { order: 3; width: 100%; overflow-x: auto; scrollbar-width: none; margin-left: 0; -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); padding-right: 24px; }
  .nav::-webkit-scrollbar { display: none; }
  .nav a { white-space: nowrap; padding: 6px 10px; font-size: 0.86rem; }
}
@media (max-width: 520px) {
  .topo-in { column-gap: 10px; padding-top: 8px; padding-bottom: 6px; }
  .marca img { height: 36px; }
  .topo-in .btn { padding: 7px 14px; font-size: 0.8rem; min-height: 36px; }
  .idiomas a { padding: 3px 6px; font-size: 0.68rem; }
}
@media (max-width: 340px) { .topo-in .btn { display: none; } .menu-btn { margin-left: auto; } }

/* hero */
.hero { position: relative; isolation: isolate; overflow: hidden; }
.hero-luz { position: absolute; top: -25%; right: -12%; width: 70vw; height: 70vw; max-width: 1000px; max-height: 1000px; z-index: -1; background: radial-gradient(closest-side, rgba(227, 179, 65, 0.28), rgba(227, 179, 65, 0.06) 55%, transparent 75%); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: center; padding-block: clamp(48px, 7vw, 100px) clamp(56px, 6vw, 88px); }
.hero-txt { position: relative; z-index: 3; display: grid; gap: 26px; justify-items: start; }
.hero-h1 { display: block; font-family: var(--f-display); font-weight: 500; font-size: clamp(2.46rem, 0.98rem + 3.77vw, 5.25rem); line-height: 0.95; letter-spacing: -0.025em; }
.hero-h1 em { position: relative; display: block; width: fit-content; }
.h1-seo { display: block; font-family: var(--f-corpo); font-style: normal; font-size: 0.78rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mudo); margin-bottom: 22px; line-height: 1.4; }
.risco { position: absolute; left: 0.04em; bottom: -0.04em; width: 96%; height: 0.2em; overflow: visible; pointer-events: none; }
.risco path { fill: none; stroke: var(--ouro); stroke-width: 4.5; stroke-linecap: round; stroke-dasharray: 420; stroke-dashoffset: 0; }
.js .risco path { animation: risca 1.1s cubic-bezier(.6, 0, .2, 1) 1s both; }
@keyframes risca { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
.hero-lede { font-size: 1.12rem; color: var(--fg-2); max-width: 48ch; line-height: 1.7; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-prova { list-style: none; width: 100%; max-width: 560px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 6px 0 0; padding: 0; border-radius: 16px; background: rgba(255, 255, 255, 0.7); box-shadow: inset 0 0 0 1px var(--linha); }
.hero-prova li { display: grid; align-content: start; gap: 6px; padding: 18px 20px; min-width: 0; }
.hero-prova li + li { box-shadow: inset 1px 0 0 var(--linha); }
.hp-valor { display: flex; align-items: flex-start; gap: 2px; font-family: var(--f-display); font-weight: 500; font-size: 2.46rem; line-height: 1; color: var(--fg); }
.hp-valor small { font-family: var(--f-display); font-style: italic; font-size: 0.55em; color: var(--ouro-txt); margin-top: 0.06em; }
.num { font-variant-numeric: tabular-nums; }
.hp-rot { font-size: 0.82rem; line-height: 1.35; color: var(--mudo); }
@media (max-width: 480px) { .hero-prova li { padding: 14px 12px; } .hp-valor { font-size: 2.1rem; } .hp-rot { font-size: 0.74rem; } }

.hero-fotos { position: relative; z-index: 1; height: clamp(440px, 46vw, 640px); }
.hf { position: absolute; margin: 0; overflow: hidden; border-radius: var(--raio); background: var(--sup-2); box-shadow: 0 40px 70px -34px rgba(17, 17, 17, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.6); transform: translate3d(0, var(--par, 0px), 0); z-index: 1; }
.hf img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; transition: transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.hf:hover img { transform: scale(1.04); }
.hf::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(17, 17, 17, 0.72)); pointer-events: none; }
.hf figcaption { position: absolute; left: 16px; right: 12px; bottom: 14px; z-index: 1; display: grid; gap: 2px; color: #fff; }
.hf figcaption b { font-family: var(--f-display); font-weight: 500; font-size: 1.31rem; line-height: 1; }
.hf figcaption span { font-size: 0.78rem; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.82); }
.hf-1 { left: 0; top: 18%; width: 31%; height: 68%; }
.hf-2 { left: 32%; top: 0; width: 36%; height: 84%; z-index: 2; }
.hf-3 { right: 0; top: 24%; width: 31%; height: 68%; }
.hf-2 figcaption b { font-style: italic; }
/* abertura: as três fotos saem empilhadas e abrem em leque */
.js .hero .hf-1 { animation: leque-e 1.4s cubic-bezier(.2, .85, .2, 1) 0.25s both; }
.js .hero .hf-2 { animation: leque-c 1.1s cubic-bezier(.2, .85, .2, 1) 0.05s both; }
.js .hero .hf-3 { animation: leque-d 1.4s cubic-bezier(.2, .85, .2, 1) 0.32s both; }
@keyframes leque-e { from { translate: 70% 6%; rotate: -6deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes leque-d { from { translate: -70% 3%; rotate: 6deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes leque-c { from { scale: 0.92; } to { scale: 1; } }
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); padding-top: 36px; }
  .hero-fotos { height: clamp(340px, 92vw, 520px); }
}
@media (max-width: 480px) { .hf figcaption b { font-size: 1.1rem; } .hf figcaption span { display: none; } }
@media (hover: none) and (pointer: coarse) { .hero .hf { transition: transform 0.55s cubic-bezier(.2, .8, .2, 1); will-change: transform; } }

/* faixa corrida: uma tira de filme escura */
.faixa { --skew: 0deg; position: relative; overflow: hidden; background: var(--tinta); color: var(--tinta-fg); }
.faixa::before, .faixa::after { content: ""; position: absolute; left: 0; right: 0; height: 8px; z-index: 1; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(255, 255, 255, 0.16) 10px 18px, transparent 18px 28px); }
.faixa::before { top: 7px; }
.faixa::after { bottom: 7px; }
.faixa-trilho { display: flex; align-items: center; width: max-content; gap: 30px; padding: 30px 0; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.15rem, 0.74rem + 1.07vw, 1.8rem); white-space: nowrap; line-height: 1; animation: corre 60s linear infinite; transform-origin: center; skew: var(--skew) 0; transition: skew 0.5s cubic-bezier(.2, .8, .2, 1); }
.faixa-trilho span:nth-of-type(even) { font-style: italic; color: var(--ouro-2); }
.faixa-trilho i { width: 6px; height: 6px; border-radius: 50%; background: var(--ouro); flex-shrink: 0; }
@keyframes corre { to { transform: translateX(-50%); } }

/* lema e quem somos: o lema congela embaixo do cabeçalho e o "Quem somos" sobe passando por cima */
.lema { padding-block: clamp(90px, 13vw, 200px); background: var(--bg-2); }
.lema-txt { font-family: var(--f-display); font-weight: 500; font-size: clamp(2.46rem, 0.98rem + 5.08vw, 6.23rem); line-height: 1; letter-spacing: -0.025em; max-width: 15ch; }
.lema-txt span { color: #d8d1c5; transition: color 0.5s ease; }
.lema-txt span.lit { color: var(--fg); }
.lema-txt span.lit:nth-last-child(-n + 2) { color: var(--ouro); font-style: italic; }
.lema-assina { margin-top: 30px; font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mudo); }
.lema-pilha > .lema { position: sticky; top: var(--lema-topo, 64px); z-index: 0; }
.lema-pilha > .sobre { z-index: 1; background: var(--bg); box-shadow: 0 -28px 56px -24px rgba(17, 17, 17, 0.25); }
.sobre-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.sobre-cab { position: sticky; top: 120px; display: grid; gap: 18px; }
.sobre-foto { margin: 12px 0 0; aspect-ratio: 3 / 2; border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.sobre-foto img { width: 100%; height: 100%; object-fit: cover; }
.sobre-txt { display: grid; gap: 22px; color: var(--fg-2); font-size: 1.1rem; line-height: 1.75; max-width: 62ch; }
.sobre-txt p:first-child { font-family: var(--f-display); font-weight: 400; font-size: clamp(1.31rem, 0.98rem + 0.82vw, 1.72rem); line-height: 1.25; color: var(--fg); letter-spacing: -0.01em; }
@media (max-width: 860px) { .sobre-grid { grid-template-columns: 1fr; } .sobre-cab { position: static; } }

/* direção */
.profs { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 28px); align-items: stretch; }
.prof { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); overflow: hidden; min-width: 0; box-shadow: var(--sombra); }
.prof-foto { margin: 0; aspect-ratio: 4 / 3.4; overflow: hidden; background: var(--sup-2); }
.prof-foto img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; scale: var(--z, 1); transition: transform 0.8s cubic-bezier(.2, .8, .2, 1); }
.prof:hover .prof-foto img { transform: scale(1.03); }
.prof-info { display: grid; gap: 12px; padding: clamp(22px, 3vw, 34px); align-content: start; }
.prof-papel { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ouro-txt); }
.prof h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.56rem, 1.15rem + 0.98vw, 2.13rem); line-height: 1.02; letter-spacing: -0.01em; }
.prof-txt { color: var(--fg-2); }
.prof-lista { list-style: none; margin: 6px 0 0; padding: 0; border-top: 1px solid var(--linha); }
.prof-lista li { position: relative; padding: 11px 0 11px 22px; border-bottom: 1px solid var(--linha); font-size: 0.96rem; }
.prof-lista li::before { content: ""; position: absolute; left: 2px; top: 1.15em; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ouro); }
.nota-dir { margin-top: 26px; color: var(--mudo); font-size: 0.9rem; max-width: 72ch; }
@media (max-width: 820px) { .profs { grid-template-columns: 1fr; } }

/* créditos: a sala escura */
.historia { background: var(--tinta); color: var(--tinta-fg); }
.historia .rotulo { color: var(--tinta-mudo); }
.historia h2 em { color: var(--ouro-2); }
.direcao h2 em, .jornada h2 em, .turmas h2 em, .faq h2 em, .porque h2 em, .sobre h2 em, .assinatura .ass-fantasma em, .hero-h1 em { color: var(--ouro); }
.hist-grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.hist-cab { position: sticky; top: 110px; display: grid; gap: 22px; }
.hist-abre { color: var(--tinta-mudo); font-size: 1.1rem; max-width: 46ch; }
.hist-foto { margin: 8px 0 0; aspect-ratio: 3 / 2; border-radius: var(--raio); overflow: hidden; box-shadow: 0 0 0 1px var(--tinta-linha); }
.hist-foto img { width: 100%; height: 100%; object-fit: cover; }
.hist-caps { position: relative; display: grid; gap: 56px; padding-left: 56px; }
.hist-caps::before { content: ""; position: absolute; left: 17px; top: 14px; bottom: 14px; width: 1px; background: linear-gradient(180deg, var(--ouro-2), rgba(227, 179, 65, 0.15)); }
.cap { position: relative; display: grid; gap: 18px; }
.cap-n { position: absolute; left: -56px; top: 6px; width: 35px; height: 35px; border-radius: 50%; background: var(--tinta); border: 1px solid var(--ouro); display: grid; place-items: center; }
.cap-n::after { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--ouro-2); }
.cap h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.64rem, 1.23rem + 1.07vw, 2.21rem); line-height: 1; }
.cap-lista { margin: 0; display: grid; }
.cap-lista div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--tinta-linha); align-items: baseline; }
.cap-lista dt { font-family: var(--f-display); font-weight: 500; font-size: 1.11rem; line-height: 1.15; }
.cap-lista dd { margin: 0; color: var(--tinta-mudo); font-size: 0.94rem; }
@media (max-width: 900px) { .hist-grid { grid-template-columns: 1fr; } .hist-cab { position: static; } }
@media (max-width: 560px) { .cap-lista div { grid-template-columns: 1fr; } .hist-caps { padding-left: 44px; } .cap-n { left: -44px; width: 29px; height: 29px; } .hist-caps::before { left: 14px; } }

/* o que o cinema muda: números desenhados e uma linha de luz que corre pelas bordas de cima */
.porque { background: var(--bg-2); }
.porque-t { margin-bottom: clamp(36px, 5vw, 64px); max-width: 16ch; }
.porque-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
.pq { position: relative; display: grid; gap: 10px; align-content: start; padding-top: 18px; border-top: 1px solid var(--linha-2); }
.pq-n { display: block; height: clamp(4.2rem, 1.6rem + 4.6vw, 6.2rem); margin: 2px 0 0; }
.pq-n svg { display: block; height: 100%; width: auto; overflow: visible; }
.pq-n text { font-family: var(--f-display); font-style: italic; font-size: 82px; fill: var(--ouro); stroke: var(--ouro); stroke-width: 1.1; stroke-linejoin: round; }
.pq-n-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pq h3 { font-family: var(--f-display); font-weight: 500; font-size: 1.64rem; line-height: 1.02; letter-spacing: -0.01em; }
.pq p { color: var(--fg-2); }
.pq-anima .pq-n text { stroke-dasharray: 700; stroke-dashoffset: calc(700 * (1 - var(--pn, 1))); fill-opacity: var(--pf, 1); }
.pq-anima .pq::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: linear-gradient(90deg, var(--ouro), var(--ouro-2)); transform-origin: 0 50%; transform: scaleX(var(--pl, 1)); box-shadow: 0 0 12px rgba(227, 179, 65, 0.6); pointer-events: none; }
.pq-anima .pq::after { content: ""; position: absolute; top: -6px; left: calc(var(--pl, 1) * 100% - 6px); width: 12px; height: 12px; border-radius: 50%; background: #fff8e1; box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.35), 0 0 22px 6px rgba(227, 179, 65, 0.7); opacity: var(--pd, 0); pointer-events: none; }
.pq-anima .pq h3, .pq-anima .pq p { opacity: calc(0.18 + 0.82 * var(--pt, 1)); transform: translateY(calc((1 - var(--pt, 1)) * 16px)); }
@media (max-width: 900px) { .porque-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .porque-grid { grid-template-columns: 1fr; } }

/* como funciona: cards ligados por uma linha */
.jornada { position: relative; isolation: isolate; overflow: hidden; overflow: clip; }
.trilha { position: relative; }
.trilha-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.trilha-svg--ponto { z-index: 3; }
.trilha-svg--ponto * { pointer-events: none; }
.trilha-base { fill: none; stroke: rgba(17, 17, 17, 0.12); stroke-width: 1.5; stroke-dasharray: 4 6; }
.trilha-linha { fill: none; stroke: var(--ouro); stroke-width: 2.5; stroke-linecap: round; }
.trilha-ponto { filter: drop-shadow(0 8px 16px rgba(17, 17, 17, 0.35)); }
.tp-brilho { fill: rgba(227, 179, 65, 0.28); filter: blur(6px); }
.tp-disco { fill: var(--tinta); }
@media (max-width: 700px) { .tp-brilho { r: 24px; } }
.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(56px, 8vw, 110px); position: relative; z-index: 1; }
.passo { position: relative; display: grid; width: min(100%, 640px); }
.passo--esq { justify-self: start; margin-left: clamp(0px, 5vw, 70px); }
.passo--dir { justify-self: end; margin-right: clamp(0px, 5vw, 70px); }
.passo-foto { margin: 0; width: 54%; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--raio); background: var(--sup-2); box-shadow: var(--sombra), 0 0 0 1px var(--linha); }
.passo--dir .passo-foto { justify-self: end; }
.passo-foto img { width: 100%; height: 100%; object-fit: cover; }
.passo-txt { position: relative; width: 62%; margin-top: -40%; padding: 26px 26px 28px; display: grid; gap: 8px; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.passo--esq .passo-txt { justify-self: end; }
.passo--dir .passo-txt { justify-self: start; }
.passo-n { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-txt); }
.passo-txt h3 { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.56rem, 1.15rem + 1.07vw, 2.13rem); line-height: 1.02; letter-spacing: -0.01em; }
.passo-txt p:last-child { color: var(--fg-2); }
.jornada-cta { display: flex; justify-content: center; margin-top: clamp(48px, 6vw, 80px); position: relative; z-index: 1; }
@media (max-width: 700px) {
  .passo, .passo--esq, .passo--dir { justify-self: stretch; margin: 0; padding-left: 34px; width: 100%; }
  .passo-foto, .passo--dir .passo-foto { width: 76%; justify-self: start; }
  .passo-txt, .passo--esq .passo-txt, .passo--dir .passo-txt { width: 90%; justify-self: end; margin-top: -26%; }
}
/* a cor só chega depois que a bolinha passa */
.jornada-cinza { display: none; }
.js .jornada-cinza { display: block; position: absolute; left: 0; right: 0; top: 0; height: 0; z-index: 4; will-change: top, height; -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 70px, #000 220px); mask-image: linear-gradient(to bottom, transparent 0, rgba(0, 0, 0, 0.35) 70px, #000 220px); pointer-events: none; -webkit-backdrop-filter: grayscale(1); backdrop-filter: grayscale(1); }
.js .jornada-cinza.livre { display: none; }
.jornada-cta .btn.aceso { animation: cta-acende 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 1; }
@keyframes cta-acende { 0% { box-shadow: 0 0 0 0 rgba(227, 179, 65, 0.75); transform: scale(0.97); } 35% { transform: scale(1.04); } 100% { box-shadow: 0 0 0 26px rgba(227, 179, 65, 0); transform: none; } }

/* passo 1: celular com a conversa */
.passo--cel { --cel-w: min(284px, calc((100vh - 170px) / 2.06)); --cel-h: calc(var(--cel-w) * 2.06); width: min(100%, 820px); display: block; }
.cel-palco { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(32px, 5vw, 72px); }
.passo--cel.rolagem { height: calc(var(--cel-h) + 115vh); }
.passo--cel.rolagem .cel-palco { position: sticky; top: max(86px, calc(50vh - var(--cel-h) / 2 + 30px)); }
.passo--cel .passo-txt { margin-top: 0; width: auto; max-width: 400px; justify-self: start; }
.passo-foto--cel { position: relative; isolation: isolate; width: auto; aspect-ratio: auto; overflow: visible; border-radius: 0; background: none; box-shadow: none; }
.passo-foto--cel::before { content: ""; position: absolute; inset: 8% -28%; z-index: -1; background: radial-gradient(closest-side, rgba(227, 179, 65, 0.3), transparent 75%); filter: blur(20px); pointer-events: none; }
.cel { position: relative; width: var(--cel-w); height: calc(var(--cel-w) * 2.06); padding: 9px; border-radius: 46px; background: linear-gradient(145deg, #3d3d3d, #1a1a1a 40%, #2b2b2b); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.16), inset 0 0 0 4px #0a0908, 0 50px 90px -34px rgba(17, 17, 17, 0.6), 0 20px 40px -24px rgba(17, 17, 17, 0.5); transform: perspective(1400px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.9s ease; will-change: transform; }
.cel::before, .cel::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2b2b2b; }
.cel::before { right: -3px; top: 150px; height: 64px; }
.cel::after { left: -3px; top: 120px; height: 90px; }
.cel.guiado { transition: transform 0.25s ease-out, opacity 0.25s ease-out; opacity: calc(0.35 + 0.65 * var(--ent, 1)); transform: perspective(1400px) translateY(calc((1 - var(--ent, 1)) * 40px)) rotateX(calc((1 - var(--ent, 1)) * 12deg + var(--mx, 0deg))) rotateY(calc((1 - var(--ent, 1)) * 24deg + var(--my, 0deg))) rotateZ(calc((1 - var(--ent, 1)) * -3deg)); }
.cel-tela { position: relative; height: 100%; overflow: hidden; border-radius: 38px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; font-family: var(--f-corpo); color: #111b21; background: radial-gradient(circle at 20% 30%, rgba(17, 17, 17, 0.06) 0 1px, transparent 1.5px) 0 0 / 22px 22px, #efeae2; }
.cel-tela::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(118deg, rgba(255, 255, 255, 0.35), transparent 32%); }
.cel-status { position: relative; display: flex; align-items: center; justify-content: space-between; padding: 12px 22px 4px 26px; font-size: 0.72rem; font-weight: 600; background: #f4f4f4; }
.cel-camera { position: absolute; left: 50%; top: 10px; width: 11px; height: 11px; margin-left: -5.5px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a3640, #050505 60%); }
.cel-ico { display: flex; align-items: center; gap: 4px; }
.cel-ico svg { height: 10px; width: auto; fill: currentColor; }
.cel-topo { display: flex; align-items: center; gap: 8px; padding: 8px 12px 10px 6px; background: #f4f4f4; border-bottom: 1px solid rgba(0, 0, 0, 0.06); }
.cel-voltar svg { display: block; width: 20px; height: 20px; }
.cel-av { flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--tinta); }
.cel-av img { width: 22px; height: 22px; display: block; }
.cel-nome { display: grid; line-height: 1.15; min-width: 0; flex: 1; }
.cel-nome b { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cel-nome small { font-size: 0.68rem; color: #667781; transition: color 0.3s; }
.cel-nome small.digitando { color: #1fa855; }
.cel-acoes { display: flex; gap: 12px; padding-right: 2px; }
.cel-acoes svg { width: 18px; height: 18px; color: #54656f; }
.cel-chat { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; padding: 8px 10px 6px; }
.cel-dia { align-self: center; margin: 0 0 6px; }
.cel-dia span { display: inline-block; padding: 3px 9px; border-radius: 7px; font-size: 0.64rem; font-weight: 500; color: #54656f; background: rgba(255, 255, 255, 0.92); }
.msg { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.42s cubic-bezier(0.2, 0.8, 0.2, 1); }
.msg.on { grid-template-rows: 1fr; }
.msg-in { min-height: 0; overflow: hidden; display: grid; padding-top: 5px; }
.msg--eu .msg-in { justify-items: end; }
.msg--ela .msg-in { justify-items: start; }
.bal { position: relative; margin: 0; max-width: 84%; padding: 6px 9px 7px; border-radius: 10px; font-size: 0.8rem; line-height: 1.32; color: #111b21; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); opacity: 0; transform: translateY(10px) scale(0.92); transition: opacity 0.3s ease 0.08s, transform 0.42s cubic-bezier(0.25, 1.4, 0.5, 1) 0.06s; }
.msg.on .bal { opacity: 1; transform: none; }
.msg--eu .bal { background: #d9fdd3; border-top-right-radius: 3px; transform-origin: 100% 100%; }
.msg--ela .bal { background: #fff; border-top-left-radius: 3px; transform-origin: 0 100%; }
.bal-meta { float: right; display: inline-flex; align-items: center; gap: 3px; margin: 7px 0 -4px 10px; font-size: 0.6rem; color: #667781; }
.vistos { width: 15px; height: 10px; fill: none; stroke: #8696a0; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
.vistos .v2 { opacity: 0; transition: opacity 0.25s; }
.msg.ent .vistos .v2 { opacity: 1; }
.msg.lida .vistos { stroke: #53bdeb; }
.bal--digit { display: flex; gap: 4px; padding: 11px 12px; }
.bal--digit i { width: 6px; height: 6px; border-radius: 50%; background: #8696a0; animation: digit 1.1s ease-in-out infinite; }
.bal--digit i:nth-child(2) { animation-delay: 0.15s; }
.bal--digit i:nth-child(3) { animation-delay: 0.3s; }
@keyframes digit { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.cel-barra { display: flex; align-items: center; gap: 6px; padding: 6px 8px 14px; }
.cel-campo { position: relative; flex: 1; display: flex; align-items: center; min-width: 0; height: 38px; padding: 0 12px 0 14px; border-radius: 20px; background: #fff; font-size: 0.8rem; }
.cel-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; }
.cel-txt:empty { flex: 0; }
.cel-barra.ativa .cel-txt::after { content: ""; display: inline-block; width: 1.5px; height: 1em; margin-left: 1px; vertical-align: -2px; background: #1fa855; animation: cursor 0.9s steps(1) infinite; }
@keyframes cursor { 50% { opacity: 0; } }
.cel-ph { flex: 1; color: #8696a0; }
.cel-barra.ativa .cel-ph { display: none; }
.cel-clipe svg { display: block; width: 18px; height: 18px; color: #8696a0; }
.cel-env { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #1fa855; display: grid; place-items: center; transition: transform 0.18s cubic-bezier(0.3, 1.6, 0.5, 1); }
.cel-env.toque { transform: scale(0.84); }
.cel-env svg { grid-area: 1 / 1; width: 19px; height: 19px; fill: #fff; transition: opacity 0.2s, transform 0.25s; }
.cel-env .i-env { opacity: 0; transform: scale(0.5) rotate(-30deg); }
.cel-barra.ativa .i-mic { opacity: 0; transform: scale(0.5); }
.cel-barra.ativa .i-env { opacity: 1; transform: none; }
@media (max-width: 700px) {
  .passo--cel { --cel-w: min(250px, calc((100svh - 200px) / 2.06)); }
  .cel-palco { display: flex; flex-direction: column; }
  .passo--cel .passo-txt { order: -1; width: 100%; max-width: none; margin: 0 0 26px; justify-self: stretch; }
  .passo--cel .passo-foto--cel { width: auto; align-self: center; }
  .passo--cel.rolagem { height: calc(var(--cel-h) + 230vh); }
  .passo--cel.rolagem .cel-palco { position: static; height: 100%; display: flex; flex-direction: column; }
  .passo--cel.rolagem .passo-foto--cel { position: sticky; top: max(150px, calc(50svh - var(--cel-h) / 2 + 50px)); display: flex; justify-content: center; }
  .cel-chat { justify-content: flex-start; }
}

/* coberturas */
.turmas { background: var(--bg-2); }
.turmas-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.turma { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 18px; padding: clamp(24px, 3vw, 34px); background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; }
.turma:hover { transform: translateY(-4px); box-shadow: var(--sombra); }
.turma--destaque { border-color: var(--ouro); box-shadow: 0 0 0 1px var(--ouro), var(--sombra); }
.turma-selo { position: absolute; top: -12px; left: 24px; padding: 4px 12px; border-radius: 999px; background: var(--tinta); color: #fff; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.turma-cab { display: grid; gap: 6px; }
.turma-pub { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ouro-txt); }
.turma h3 { font-family: var(--f-display); font-weight: 500; font-size: 2.13rem; line-height: 1; letter-spacing: -0.01em; }
.turma-itens { list-style: none; margin: 0; padding: 0; display: grid; align-content: start; }
.turma-itens li { position: relative; padding: 10px 0 10px 22px; border-top: 1px solid var(--linha); color: var(--fg-2); }
.turma-itens li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 12px; height: 1px; background: var(--ouro); }
.turma-link { font-weight: 500; text-decoration: none; color: var(--fg); justify-self: start; border-bottom: 1px solid var(--ouro-2); padding-bottom: 2px; }
.turma-link:hover { color: var(--ouro-txt); }
.extras { margin-top: 26px; color: var(--mudo); }
@media (max-width: 900px) { .turmas-grid { grid-template-columns: 1fr; max-width: 560px; } }

/* depoimentos */
.depos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 16px; }
.depo { margin: 0; padding: 28px 26px 24px; background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); display: flex; flex-direction: column; gap: 16px; }
.depo p { font-family: var(--f-display); font-weight: 400; font-size: 1.19rem; line-height: 1.3; }
.depo footer { margin-top: auto; display: grid; gap: 2px; padding-top: 12px; border-top: 1px solid var(--linha); }
.depo cite { font-style: normal; font-weight: 600; }
.depo footer span { font-size: 0.82rem; color: var(--mudo); }

/* dúvidas */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq-grid > .sec-cab { position: sticky; top: 110px; }
.faq-lista { display: grid; gap: 10px; }
.faq-item { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio-sm); }
.faq-item summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 22px; font-family: var(--f-display); font-weight: 500; font-size: 1.27rem; line-height: 1.1; letter-spacing: -0.01em; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-2); color: var(--ouro-txt); font-family: var(--f-corpo); font-size: 1.3rem; transition: transform 0.25s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item p { padding: 0 22px 22px; color: var(--fg-2); max-width: 62ch; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } .faq-grid > .sec-cab { position: static; } }

/* contato: a última cena, escura */
.final { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(90px, 12vw, 170px); background: var(--tinta); color: var(--tinta-fg); }
.final-foto { position: absolute; inset: 0; z-index: -1; }
.final-foto img { width: 100%; height: 100%; object-fit: cover; opacity: 0.4; translate: 0 var(--fpar, 0px); scale: 1.12; }
.final-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(82, 82, 82, 0.94) 30%, rgba(82, 82, 82, 0.55)); }
.final-in { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.final-txt-col { display: grid; gap: 22px; }
.final .rotulo { color: var(--tinta-mudo); }
.final h2 em { color: var(--ouro-2); }
.final-txt { max-width: 46ch; color: var(--tinta-mudo); font-size: 1.12rem; }
.local-dl { margin: 6px 0 0; display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--tinta-linha); }
.local-dl div { display: grid; gap: 2px; min-width: 0; }
.local-dl dt { font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--tinta-mudo); }
.local-dl dd { margin: 0; overflow-wrap: anywhere; }
.form-contato { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: clamp(20px, 3vw, 32px); background: rgba(255, 255, 255, 0.06); border: 1px solid var(--tinta-linha); border-radius: var(--raio); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.form-contato label { display: grid; gap: 6px; font-size: 0.84rem; color: var(--tinta-mudo); min-width: 0; }
.form-contato .cheio { grid-column: 1 / -1; }
.form-contato input, .form-contato select, .form-contato textarea { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); color: var(--tinta-fg); font: 400 1rem var(--f-corpo); color-scheme: dark; }
.form-contato select option { color: #111111; }
/* a lista de opções fica com a mesma altura e o mesmo desenho dos outros campos (o Safari encolhe o select nativo) */
.form-contato input, .form-contato select { min-height: 50px; }
.form-contato select { -webkit-appearance: none; appearance: none; padding-right: 44px; line-height: 1.3; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; background-size: 12px 8px; }
.form-contato textarea { resize: vertical; min-height: 110px; }
.form-contato input:focus, .form-contato select:focus, .form-contato textarea:focus { border-color: var(--ouro-2); outline: none; box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.25); }
.form-contato .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 4px; }
.final .btn-cta { background: var(--ouro); color: var(--fg); }
.final .btn-cta:hover { background: #eabf57; }
.form-msg { font-size: 0.95rem; color: var(--ouro-2); }
.form-msg.erro { color: #f2a99b; }
@media (max-width: 900px) { .final-in { grid-template-columns: 1fr; } }
@media (max-width: 520px) { .form-contato { grid-template-columns: 1fr; } }

/* rodapé */
.rodape { padding-block: 60px 28px; background: var(--bg-2); border-top: 1px solid var(--linha); }
.rodape-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; }
.rodape-marca { display: grid; gap: 14px; align-content: start; }
.rodape-marca img { display: block; height: 58px; width: auto; }
.rodape-marca p { color: var(--mudo); font-size: 0.95rem; max-width: 40ch; }
.rodape h3 { font-family: var(--f-corpo); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mudo); margin-bottom: 10px; }
.rodape p { font-size: 0.98rem; color: var(--fg-2); }
.rodape a { text-decoration: none; }
.rodape a:hover { color: var(--ouro-txt); }
.rodape-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linha); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; font-size: 0.82rem; color: var(--mudo); }
@media (max-width: 820px) { .rodape-grid { grid-template-columns: 1fr 1fr; } .rodape-marca { grid-column: 1 / -1; } }
@media (max-width: 520px) { .rodape-grid { grid-template-columns: 1fr; } }

.zap { position: fixed; right: calc(22px + env(safe-area-inset-right, 0px)); bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 55; display: flex; align-items: center; gap: 8px; padding: 12px 18px 12px 14px; background: #1fa855; color: #fff; text-decoration: none; font-weight: 600; font-size: 0.86rem; border-radius: 999px; box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.5); }
.zap svg { width: 24px; height: 24px; fill: currentColor; }
@media (max-width: 560px) { .zap span { display: none; } .zap { padding: 14px; } }

/* entrada ao rolar (parte de um estado visível) */
.js .rev { transition: transform 0.9s cubic-bezier(.2, .8, .2, 1); }
.js .rev.antes { transform: translateY(36px); }

/* barra de rolagem (computador) */
@media (hover: hover) and (pointer: fine) {
  html::-webkit-scrollbar { width: 12px; }
  html::-webkit-scrollbar-track { background: var(--bg-2); }
  html::-webkit-scrollbar-thumb { background: #cbb894; border-radius: 999px; border: 3px solid var(--bg-2); }
  html::-webkit-scrollbar-thumb:hover { background: var(--ouro); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .hf { transform: none !important; }
  .cel, .cel.guiado { transform: none; opacity: 1; }
  .js .jornada-cinza { display: none; }
}

/* =====================================================================
   VERSÃO PARA CELULAR
   ===================================================================== */
.menu-btn, .menu-cel, .barra-cta, .ver-todos { display: none; }

@media (max-width: 860px) {
  /* topo em uma linha: marca, botão de consultar data e botão de menu (os idiomas ficam dentro do menu) */
  .topo-in { flex-wrap: nowrap; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
  .topo .nav, .topo .idiomas { display: none; }
  .topo .topo-cta { margin-left: auto; }
  .menu-btn { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 12px; border: 1px solid var(--linha-2); border-radius: 999px; background: var(--sup); color: var(--fg); font: 500 0.86rem var(--f-corpo); cursor: pointer; }
  .menu-ico { position: relative; width: 16px; height: 10px; }
  .menu-ico i { position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 2px; transition: transform 0.3s ease, top 0.3s ease; }
  .menu-ico i:first-child { top: 1px; }
  .menu-ico i:last-child { top: 7.5px; }
  .menu-aberto .menu-ico i:first-child { top: 4.25px; transform: rotate(45deg); }
  .menu-aberto .menu-ico i:last-child { top: 4.25px; transform: rotate(-45deg); }

  /* menu em tela cheia */
  .menu-cel { position: fixed; inset: 0; z-index: 45; display: grid; align-content: space-between; gap: 32px; padding: calc(84px + env(safe-area-inset-top, 0px)) max(22px, env(safe-area-inset-right, 0px)) calc(28px + env(safe-area-inset-bottom, 0px)) max(22px, env(safe-area-inset-left, 0px)); background: var(--bg); overflow-y: auto; }
  .menu-cel[hidden] { display: none; }
  .menu-cel nav { display: grid; }
  .menu-cel nav a { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.8rem, 7.38vw, 2.46rem); line-height: 1.1; padding: 12px 0; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--fg); }
  .menu-cel nav a:active { color: var(--ouro-txt); }
  .menu-cel-pe { display: grid; gap: 16px; justify-items: start; }
  .menu-cel-pe .btn { width: 100%; }
  .js .menu-cel:not([hidden]) nav a { animation: menu-entra 0.5s cubic-bezier(.2, .8, .2, 1) both; }
  .js .menu-cel nav a:nth-child(2) { animation-delay: 0.04s; }
  .js .menu-cel nav a:nth-child(3) { animation-delay: 0.08s; }
  .js .menu-cel nav a:nth-child(4) { animation-delay: 0.12s; }
  .js .menu-cel nav a:nth-child(5) { animation-delay: 0.16s; }
  @keyframes menu-entra { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
  html.menu-aberto, html.menu-aberto body { overflow: hidden; }

  /* botão fixo embaixo, depois da abertura e antes do contato */
  .barra-cta { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding: 12px max(16px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px)); background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.92) 40%); transform: translateY(110%); transition: transform 0.45s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
  .barra-cta .btn { width: 100%; min-height: 52px; }
  .barra-cta.on { transform: none; pointer-events: auto; }
  .zap { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }

  /* menos espaço entre as seções */
  .sec { padding-block: 72px; }
  .lema { padding-block: 76px; }
  .final { padding-block: 72px 96px; }
  .sec-cab { margin-bottom: 32px; }
}

@media (max-width: 700px) {
  /* abertura: título, fotos em leque, texto, botões lado a lado e números */
  .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; padding-block: 28px 44px; }
  .hero-h1, .hero-lede, .hero-prova { align-self: stretch; }
  .hero-h1 em { width: auto; }
  .hero-txt { display: contents; }
  .hero-h1 { order: 1; font-size: clamp(2.7rem, 11vw, 3.6rem); }
  .h1-seo { font-size: 0.7rem; margin-bottom: 16px; }
  .hero-fotos { order: 2; height: min(118vw, 470px); margin: 4px -4px 6px; }
  .hero-lede { order: 3; font-size: 1.04rem; }
  .hero-ctas { order: 4; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
  .hero-ctas .btn { padding-inline: 12px; font-size: 0.9rem; }
  .hero-prova { order: 5; }
  .hf-1 { left: 0; top: 12%; width: 38%; height: 74%; }
  .hf-2 { left: 27%; top: 0; width: 46%; height: 92%; }
  .hf-3 { right: 0; top: 18%; width: 38%; height: 74%; }
  .hf figcaption { left: 10px; right: 8px; bottom: 10px; }
  .hf figcaption b { font-size: 1.05rem; }
  .hf-2 figcaption b { font-size: 1.35rem; }
  .hf-1 figcaption, .hf-3 figcaption { opacity: 0.9; }

  /* direção: um cartão embaixo do outro; coberturas: cartões que passam para o lado */
  .profs { grid-template-columns: 1fr; gap: 16px; }
  .turmas-grid { display: flex; grid-template-columns: none; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: calc(-1 * var(--gl)) calc(-1 * var(--gr)); padding: 14px var(--gr) 18px var(--gl); scroll-padding-inline: var(--gl); max-width: none; }
  .turmas-grid::-webkit-scrollbar { display: none; }
  .turma { flex: 0 0 84%; scroll-snap-align: start; }
  .turma:hover { transform: none; }
  .prof-foto { aspect-ratio: 4 / 3; }
  .prof-lista li:nth-child(n + 4) { display: none; }
  .prof-lista.aberta li { display: block; }
  .ver-todos { display: inline-flex; justify-self: start; margin-top: 4px; padding: 6px 0; border: 0; background: none; color: var(--ouro-txt); font: 600 0.9rem var(--f-corpo); border-bottom: 1px solid var(--ouro-2); cursor: pointer; }
  .nota-dir { margin-top: 10px; }

  /* créditos */
  .hist-foto { aspect-ratio: 16 / 9; }
  .hist-caps { gap: 44px; }
  .cap-lista dt { font-size: 1.22rem; }

  /* o que o cinema muda */
  .porque-grid { gap: 30px; }
  .pq-n { height: 3.8rem; }
  .pq h3 { font-size: 1.75rem; }

  /* como funciona: a linha e o sinal ficam inteiros dentro da tela */
  .passo, .passo--esq, .passo--dir { padding-left: 46px; }
  .tp-disco { r: 15px; }
  .tp-brilho { r: 21px; }
  .tp-sinal { transform: scale(0.68); }

  /* dúvidas e contato */
  .faq-item summary { font-size: 1.28rem; padding: 18px; }
  .faq-item p { padding: 0 18px 18px; }
  .final h2 { font-size: clamp(2.4rem, 10vw, 3.2rem); }
  .form-contato { padding: 18px; gap: 12px; }
  .rodape-grid { grid-template-columns: 1fr 1fr; gap: 26px 20px; }
  .rodape-marca { grid-column: 1 / -1; }
  .rodape { padding-block: 44px calc(100px + env(safe-area-inset-bottom, 0px)); }
}

/* celular: pontos embaixo dos cartões que passam para o lado */
.pontos-car { display: none; }
@media (max-width: 700px) {
  .pontos-car { display: flex; justify-content: center; gap: 8px; margin-top: 4px; }
  .pontos-car button { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px; background: var(--linha-2); cursor: pointer; transition: width 0.3s ease, background-color 0.3s ease; }
  .pontos-car button.on { width: 24px; background: var(--ouro); }
  .pontos-car button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; }
}

/* Seta do mouse em forma de claquete (só com mouse; o script cria os elementos).
   A mira com o ponto dourado marca o lugar exato do clique; a claquete fica no canto da mira. */
html.com-claquete, html.com-claquete * { cursor: none !important; }
html.com-claquete input, html.com-claquete textarea { cursor: text !important; }
.claquete, .ponto-clique { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; transform: translate3d(-200px, -200px, 0); transition: opacity .15s ease; }
.claquete { width: 33px; height: 30px; filter: drop-shadow(0 1px 1.5px rgba(17, 17, 17, .35)); }
.ponto-clique { width: 16px; height: 16px; }
.claquete svg, .ponto-clique svg { display: block; overflow: visible; }
.claquete.oculta, .claquete.fora, .ponto-clique.oculta, .ponto-clique.fora { opacity: 0; }
.cl-braco { transform-origin: 3px 13px; transform: rotate(-24deg); transition: transform .32s cubic-bezier(.2, .9, .3, 1.35); }
.claquete.pronta .cl-braco { transform: rotate(-36deg); }
.claquete.bate .cl-braco { transform: rotate(0deg); transition: transform .07s cubic-bezier(.6, 0, 1, 1); }
.cl-estalo { opacity: 0; }
.claquete.estala .cl-estalo { animation: cl-estalo .34s .06s ease-out both; }
.claquete.estala .cl-tudo { animation: cl-tranco .2s .06s ease-out; }
.pc-ponto { transform-origin: 12px 12px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.ponto-clique.bate .pc-ponto { transform: scale(.55); transition-duration: .07s; }
.pc-cantos { transform-origin: 12px 12px; transition: transform .25s cubic-bezier(.2, .9, .3, 1.4); }
.ponto-clique.pronta .pc-cantos { transform: scale(1.2); }
.ponto-clique.bate .pc-cantos { transform: scale(.8); transition-duration: .07s; }
@keyframes cl-estalo { 0% { opacity: 0; transform: translateX(-2px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateX(3px); } }
@keyframes cl-tranco { 0% { transform: translate(0, 0); } 40% { transform: translate(0.6px, 1.6px); } 100% { transform: translate(0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .cl-braco, .pc-ponto, .pc-cantos { transition-duration: .01s !important; }
  .claquete.estala .cl-estalo, .claquete.estala .cl-tudo { animation: none; }
}


/* Seção editorial de alto padrão: fundo creme, fotos em preto e branco com cantos arredondados,
   logo branca do Studio sobre a foto grande e linhas finas. Títulos no mesmo padrão das outras seções. */
.assinatura { background: var(--bg-2); padding-block: clamp(72px, 10vw, 150px); overflow: hidden; }
.ass-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 7vw, 120px); }
.ass-esq { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 22px; padding-top: clamp(16px, 6vw, 110px); }
.ass-lugar { font-size: 1.04rem; color: var(--fg-2); }
.ass-fantasma { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.015em; color: var(--fg); max-width: 11ch; }
.ass-fantasma em { color: var(--ouro-txt); }
.ass-filme { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; width: 100%; margin-top: clamp(18px, 4vw, 56px); }
.ass-linha { position: relative; z-index: 1; display: block; width: 1px; height: clamp(110px, 14vw, 210px); background: var(--fg); opacity: 0.6; transform-origin: top; }
/* a linha cresce e leva a foto menor até o pé da seção, alinhada com a assinatura */
.ass-filme .ass-linha { flex: 1 1 auto; height: auto; min-height: clamp(110px, 14vw, 210px); margin-bottom: -48px; }
.ass-foto { margin: 0; overflow: hidden; border-radius: var(--raio); background: var(--sup-2); }
.ass-foto img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.ass-foto--peq { width: 86%; aspect-ratio: 3 / 2; }
.ass-dir { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(40px, 6vw, 90px); }
.ass-foto--grande { position: relative; aspect-ratio: 1 / 1.06; }
.ass-mono { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.ass-mono img { width: clamp(150px, 34%, 250px); height: auto; filter: drop-shadow(0 2px 30px rgba(0, 0, 0, 0.12)); }
.ass-pe { display: flex; flex-direction: column; align-items: flex-end; gap: 22px; }
.ass-assina { text-align: right; font-family: var(--f-display); font-weight: 500; font-size: clamp(1.31rem, 0.98rem + 0.82vw, 1.72rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--fg); }
.ass-assina em { color: var(--ouro); }
.ass-linha--curta { height: 64px; margin-right: 30%; }
/* entrada: as linhas descem, a foto grande assenta e o monograma aparece */
.ass-anima .ass-linha { transform: scaleY(0); transition: transform 1.5s cubic-bezier(.6, 0, .2, 1) 0.2s; }
.ass-anima.visto .ass-linha { transform: scaleY(1); }
.ass-anima .ass-foto--grande img { transform: scale(1.08); transition: transform 2.4s cubic-bezier(.2, .8, .2, 1); }
.ass-anima.visto .ass-foto--grande img { transform: scale(1); }
.ass-anima .ass-mono { opacity: 0; transition: opacity 1.6s ease 0.6s; }
.ass-anima.visto .ass-mono { opacity: 1; }
@media (max-width: 860px) {
  .ass-grid { grid-template-columns: minmax(0, 1fr); }
  .ass-esq { padding-top: 0; }
  .ass-foto--grande { aspect-ratio: 4 / 5; }
}

/* =====================================================================
   PÁGINAS CURTAS: ERRO 404 E OBRIGADO DO FORMULÁRIO
   ===================================================================== */
.simples { min-height: calc(100svh - 72px); display: flex; align-items: center; }
.simples-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.simples-txt { display: grid; gap: 22px; justify-items: start; }
.simples h1 { font-family: var(--f-display); font-weight: 500; font-size: var(--t-h2); line-height: 1; letter-spacing: -0.015em; max-width: 15ch; }
.simples h1 em { display: block; }
.simples-lede { color: var(--fg-2); font-size: 1.12rem; line-height: 1.7; max-width: 46ch; }
.simples-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 6px; }
.simples-card { display: grid; gap: 14px; padding: clamp(24px, 3.4vw, 40px); background: var(--bg-2); border: 1px solid var(--linha); border-radius: 22px; }
.simples-links, .simples-passos { list-style: none; margin: 0; padding: 0; }
.simples-links li + li, .simples-passos li + li { border-top: 1px solid var(--linha); }
.simples-links a { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; color: var(--fg); font-size: 1.05rem; font-weight: 500; text-decoration: none; }
.simples-links a span { color: var(--ouro-txt); transition: transform 0.2s ease; }
.simples-links a:hover span { transform: translateX(4px); }
.simples-passos { counter-reset: passo; }
.simples-passos li { counter-increment: passo; display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; padding: 16px 0; color: var(--fg-2); line-height: 1.55; }
.simples-passos li::before { content: counter(passo); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tinta); color: #fff; font-size: 0.84rem; font-weight: 600; }
.simples-nota { font-size: 0.88rem; color: var(--mudo); }
@media (max-width: 860px) { .simples { min-height: 0; } .simples-grid { grid-template-columns: minmax(0, 1fr); } }

/* celular estreito: o botão de menu fica só com o ícone (o texto continua para leitores de tela) */
@media (max-width: 400px) {
  .menu-btn { padding: 0 11px; }
  .menu-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}