/* =======================================================================
   Laphóss — camada cinematográfica
   Carregar depois de laphoss.css.

   Princípio: o site funciona inteiro sem este arquivo e sem JavaScript.
   Por padrão o hero é um bloco normal, com os três textos empilhados e
   todos visíveis. O JavaScript marca <html class="cine-on"> e só então o
   palco grudado e a coreografia entram. Quem desligou animações, ou está
   sem JavaScript, vê a versão empilhada, que é completa.
   ===================================================================== */

:root {
  --cine-fundo: #04302E;
  --cine-altura: 300vh;
  --grao: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.42'/%3E%3C/svg%3E");
}

/* ======================= BASE (sem JavaScript) ======================= */

.cine { position: relative; background: var(--cine-fundo); }
.cine__palco {
  position: relative;
  overflow: hidden;
  background: var(--cine-fundo);
  padding-block: clamp(64px, 9vw, 104px);
}

.cine__quadro { position: absolute; inset: 0; overflow: hidden; }
.cine__foto { position: absolute; inset: 0; }
.cine__foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 72% 28%;
  background: #CBB79A url("fotos/aline-lqip.webp") center/cover no-repeat;
}

.cine__veu {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg,
      rgba(4,48,46,.96) 0%,
      rgba(4,48,46,.90) 26%,
      rgba(4,48,46,.66) 46%,
      rgba(4,48,46,.20) 66%,
      rgba(4,48,46,0) 82%),
    linear-gradient(to top, rgba(4,48,46,.74) 0%, rgba(4,48,46,0) 38%);
}
.cine__grao {
  position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grao);
  opacity: .16; mix-blend-mode: overlay;
}
.cine__particulas { display: none; }

.cine__textos {
  position: relative; z-index: 3;
  max-width: 1180px; width: 100%; margin-inline: auto;
  padding-left: var(--gutter); padding-right: var(--gutter-d);
}
.cine__tempo { max-width: 42ch; }
.cine__tempo + .cine__tempo { margin-top: clamp(26px, 4vw, 42px); }

.cine__olho {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  /* Blush em vez de rosa carinho: sobre a foto do hero o rosa dava 4,24:1 e
     reprovava AA para texto pequeno. O blush é cor oficial do guia e sobe
     para 5,58:1 no trecho mais claro da imagem. */
  color: var(--blush); font-weight: 600;
  display: flex; align-items: center; gap: 12px;
}
.cine__olho::before {
  content: ""; display: block; width: 34px; height: 1px;
  background: var(--bronze-claro); opacity: .7; flex: 0 0 34px;
}
.cine h1, .cine__titulo {
  font-family: var(--display);
  font-size: clamp(36px, 6.2vw, 78px);
  line-height: 1.03; font-weight: 500;
  color: var(--creme); margin: 18px 0 0;
  letter-spacing: -0.015em;
}
.cine__titulo--menor { font-size: clamp(29px, 4.3vw, 52px); }
.cine__titulo em { font-style: italic; color: var(--bronze-claro); }
.cine__apoio {
  margin-top: 20px; font-size: clamp(15px, 1.7vw, 18px);
  line-height: 1.6; color: #D3E3DD; max-width: 44ch;
}
.cine__assina { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.cine__assina span { font-size: 13px; color: #D3E3DD; display: inline-flex; align-items: center; gap: 9px; }
.cine__assina b { color: var(--creme); font-weight: 600; }
.cine__ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--bronze-claro); flex: 0 0 7px; }
.cine .botoes { margin-top: 28px; }

.cine__dica, .cine__traco { display: none; }

/* ================= COM JAVASCRIPT: o palco cinematográfico ============ */

html.cine-on .cine { height: var(--cine-altura); }
html.cine-on .cine__palco {
  position: sticky; top: 0;
  height: 100svh; min-height: 560px;
  padding-block: 0;
  display: grid; place-items: stretch;
}
html.cine-on .cine__foto {
  /* 1.08 em vez de 1.14: quanto menos a foto é ampliada, mais nítida
     ela fica. O movimento continua perceptível. */
  transform: scale(var(--z, 1.08)) translate3d(0, var(--py, 0px), 0);
  transform-origin: 72% 42%;
  will-change: transform;
}
html.cine-on .cine__veu { opacity: var(--veu, .55); }
html.cine-on .cine__particulas {
  display: block;
  position: absolute; inset: 0; pointer-events: none;
  width: 100%; height: 100%; opacity: .7;
}
html.cine-on .cine__textos {
  height: 100%; display: grid; align-content: center;
}
html.cine-on .cine__tempo {
  grid-area: 1 / 1;
  max-width: 34ch;
  opacity: var(--o, 0);
  transform: translate3d(0, var(--ty, 0px), 0);
  will-change: opacity, transform;
}
html.cine-on .cine__tempo + .cine__tempo { margin-top: 0; }

html.cine-on .cine__traco {
  display: block;
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; z-index: 4;
  background: linear-gradient(90deg, var(--bronze-claro), var(--dourado));
  transform: scaleX(var(--p, 0)); transform-origin: left center;
  opacity: .85;
}
html.cine-on .cine__dica {
  display: flex;
  position: absolute; left: 50%; bottom: 26px; z-index: 4;
  transform: translateX(-50%);
  font-size: 10px; letter-spacing: .2em; text-transform: uppercase;
  color: rgba(254,247,237,.6);
  flex-direction: column; align-items: center; gap: 8px;
  opacity: var(--dica, 1); transition: opacity .4s ease;
}
.cine__dica i {
  display: block; width: 1px; height: 34px;
  background: linear-gradient(to bottom, rgba(254,247,237,.7), transparent);
  animation: desce 2.1s ease-in-out infinite;
}
@keyframes desce {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .3; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: .9; }
}

/* ---------------------------- Celular -------------------------------- */
@media (max-width: 860px) {
  :root { --cine-altura: 250vh; }
  .cine__foto img { object-position: 58% 2%; }
  /* O rosto dela não fica atrás de texto: os textos vivem só na metade de
     baixo. Mas a foto atravessa o palco inteiro por trás deles, e o véu
     dissolve a imagem no verde ao cruzar a divisa. Assim não existe emenda
     reta entre foto e fundo — é uma coisa só. */
  /* No celular o véu precisa fechar 100% no pé, porque o texto fica por
     cima da foto. A transparência vive no próprio degradê, e não no
     opacity que o JS anima no desktop. */
  html.cine-on .cine__veu { opacity: 1; }
  .cine__veu {
    background: linear-gradient(to bottom,
      rgba(4,48,46,.32) 0%,
      rgba(4,48,46,.08) 24%,
      rgba(4,48,46,.24) 36%,
      rgba(4,48,46,.64) 46%,
      rgba(4,48,46,.92) 52%,
      var(--cine-fundo) 57%,
      var(--cine-fundo) 100%);
  }
  .cine__quadro { position: relative; aspect-ratio: 4 / 3.4; }
  .cine__textos { padding-top: 26px; }

  html.cine-on .cine__palco {
    display: grid; grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46% 54%; place-items: stretch;
  }
  /* a foto cobre as duas faixas; o texto fica por cima, só na de baixo */
  html.cine-on .cine__quadro {
    grid-column: 1; grid-row: 1 / -1;
    position: relative; inset: auto; aspect-ratio: auto; z-index: 0;
  }
  html.cine-on .cine__foto { transform-origin: 58% 24%; }
  html.cine-on .cine__textos {
    grid-column: 1; grid-row: 2; z-index: 2; align-content: center;
    padding-top: 24px; padding-bottom: 92px;
  }
  /* Os três tempos ficam empilhados na mesma célula, então a caixa estica
     até a altura do mais longo. Centrar o conteúdo dentro de cada tempo
     evita que o tempo mais curto deixe um vazio no pé da tela. */
  html.cine-on .cine__tempo { max-width: none; display: grid; align-content: center; }
  html.cine-on .cine__dica { display: none; }
  /* texto sobre o verde chapado: title um pouco menor para caber */
  html.cine-on .cine__titulo { font-size: clamp(30px, 8.2vw, 44px); }
  html.cine-on .cine__titulo--menor { font-size: clamp(25px, 6.8vw, 36px); }
  html.cine-on .cine__apoio { font-size: 14.5px; margin-top: 14px; }
  html.cine-on .cine .botoes { margin-top: 18px; gap: 9px; }
  html.cine-on .cine__assina { margin-top: 16px; gap: 7px 18px; }
  html.cine-on .cine__assina span { font-size: 12px; }
}

/* ================= Revelações ao rolar (resto do site) ================ */
/* Sem a classe .anim, tudo já está visível: nada depende de JavaScript. */
html.anim .rev {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.anim .rev.dentro { opacity: 1; transform: none; }
html.anim .rev-2 { transition-delay: .09s; }
html.anim .rev-3 { transition-delay: .18s; }
html.anim .rev-4 { transition-delay: .27s; }

.filete { position: relative; }
.filete::after {
  content: ""; position: absolute; left: 0; bottom: -14px;
  width: 64px; height: 2px; background: var(--bronze);
  transform: scaleX(1); transform-origin: left;
}
html.anim .filete::after { transform: scaleX(0); transition: transform .8s cubic-bezier(.22,.61,.36,1) .15s; }
html.anim .filete.dentro::after,
html.anim .dentro .filete::after { transform: scaleX(1); }
.faixa--verde .filete::after { background: var(--bronze-claro); }

/* Brilho discreto ao passar o mouse nos cartões de procedimento */
.proc { position: relative; overflow: hidden; }
.proc::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 0%),
              rgba(184,137,27,.10), transparent 62%);
  opacity: 0; transition: opacity .35s ease; pointer-events: none;
}
.proc:hover::before { opacity: 1; }
.proc--destaque::before { background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(232,201,160,.14), transparent 62%); }

/* ===================== Movimento reduzido ============================ */
/* O JavaScript nem liga o palco nesse caso; isto só tranca o resto. */
@media (prefers-reduced-motion: reduce) {
  html.anim .rev { opacity: 1; transform: none; transition: none; }
  html.anim .filete::after { transform: scaleX(1); transition: none; }
  .cine__dica i { animation: none; }
}

/* ============ Cabeçalho transparente sobre o hero escuro ============= */
/* Enquanto a página está no topo, o menu flutua sobre a foto. Assim que
   rola, ele vira a barra creme de sempre. */
html.cine-on:not(.rolou) .topo {
  background: transparent; backdrop-filter: none; border-bottom-color: transparent;
}
html.cine-on:not(.rolou) body::before { background: transparent; }
/* Enquanto o menu flutua sobre a foto, o contraste do texto depende do que
   estiver atras dele. Medido em 09/11/2026: sobre a parede clara o item
   "A clinica" caia para 3,67:1, abaixo do minimo AA. Este veu no topo
   garante pelo menos 5,4:1 em qualquer trecho da imagem, e some junto com o
   menu transparente assim que a pagina rola. */
html.cine-on:not(.rolou) .topo::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 132px;
  background: linear-gradient(to bottom, rgba(4,48,46,.48), rgba(4,48,46,0));
  pointer-events: none;
}
html.cine-on:not(.rolou) .topo > * { position: relative; }

html.cine-on:not(.rolou) .topo .marca__logo { opacity: 0; }
html.cine-on:not(.rolou) .topo .marca__logo--claro { opacity: 1; }
html.cine-on:not(.rolou) .topo .nav a:not(.btn) { color: var(--creme); }
html.cine-on:not(.rolou) .topo .nav a:not(.btn):hover { color: var(--bronze-claro); }
html.cine-on:not(.rolou) .topo .menu-btn span { background: var(--creme); }
html.cine-on:not(.rolou) .topo .nav a.btn--primario { background: var(--creme); color: var(--verde); }
html.cine-on:not(.rolou) .topo .nav a.btn--primario:hover { background: var(--bronze-claro); }
.topo { transition: background-color .35s ease, border-color .35s ease; }
.topo .marca__nome, .topo .nav a, .topo .menu-btn span { transition: color .35s ease, background-color .35s ease; }
/* Com o menu de celular aberto o fundo verde já cuida do contraste */
@media (max-width: 920px) {
  html.cine-on:not(.rolou) .nav:not([hidden]) { background: var(--verde); }
}

/* Na home o hero ocupa a tela inteira e o menu flutua POR CIMA dele.
   Fixo em vez de grudado, para a foto encostar no topo da janela. */
html.cine-on .topo { position: fixed; left: 0; right: 0; }
/* Âncoras não param escondidas atrás do menu */
[id] { scroll-margin-top: 92px; }

/* O tempo final carrega os dois botões lado a lado, então pede mais largura */
@media (min-width: 861px) {
  html.cine-on .cine__tempo:last-of-type { max-width: 47ch; }
}

/* Peças que trocam entre tela larga e estreita */
.so-estreito { display: none; }
.cine__link {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--creme); text-decoration: none;
  font-size: 12px; letter-spacing: .13em; text-transform: uppercase; font-weight: 500;
  border-bottom: 1px solid rgba(254,247,237,.45);
}
.cine__link:hover { color: var(--bronze-claro); border-bottom-color: var(--bronze-claro); }

@media (max-width: 860px) {
  .so-amplo { display: none; }
  .so-estreito { display: inline-flex; }
  /* Na tela do celular o tempo final precisa caber inteiro sem corte:
     a foto cede altura e o parágrafo de apoio sai, porque a mesma
     informação reaparece logo abaixo, na seção do formulário. */
  html.cine-on .cine__palco { grid-template-rows: 46% 54%; }
  html.cine-on .cine__textos { padding-top: 16px; padding-bottom: 80px; }
  html.cine-on .cine__tempo:last-of-type .cine__apoio { display: none; }
  html.cine-on .cine__tempo:last-of-type .botoes { margin-top: 16px; }
}
@media (max-width: 860px) and (max-height: 700px) {
  html.cine-on .cine__palco { grid-template-rows: 42% 58%; }
  html.cine-on .cine__titulo--menor { font-size: clamp(23px, 6.2vw, 30px); }
  html.cine-on .cine__assina span { font-size: 11.5px; }
}