/* Linea Clinic — Dra. Marina Albuquerque */
/* base de compatibilidade: webview do Instagram, iOS e Android */
[hidden]{display:none!important}
img,video{max-width:100%}
/* rede de seguranca do antes e depois: o quadro nunca colapsa,
   mesmo que o navegador ignore aspect-ratio por qualquer motivo */
.comparador{min-height:320px}
@supports not (aspect-ratio:1/1){.comparador{height:clamp(440px,64vh,620px)}}

/* ── pagina de Full Face ─────────────────────────────────────────────── */
/* o video ocupa a coluna do site, nao a tela inteira: na largura do grid
   o arquivo 1280x720 aparece perto do tamanho real, sem borrar. A caixa
   segue a proporcao do video, entao nao ha recorte nem sobra. */
.ff-filme{position:relative;background:var(--noite);line-height:0;
  border-radius:var(--raio);overflow:hidden;
  width:calc(100% - var(--marg) * 2);
  max-width:calc(1520px - var(--marg) * 2);
  margin:clamp(3rem,8vh,6rem) auto;
  box-shadow:0 24px 60px rgba(30,36,30,.14)}
.ff-filme video{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block}

.ff-abre{padding-top:clamp(7rem,13vh,10rem);padding-bottom:clamp(4rem,9vh,7rem)}
.ff-abre__grade{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);
  gap:clamp(2.2rem,5vw,4.5rem);align-items:center}
/* o video da abertura e vertical, 9x16: altura limitada pela largura,
   entao a proporcao nunca se perde */
.ff-video{position:relative;border-radius:var(--raio);overflow:hidden;background:var(--noite);
  box-shadow:0 22px 60px rgba(30,36,30,.16);line-height:0;
  width:100%;max-width:calc(78vh * 9 / 16);max-width:calc(78svh * 9 / 16);margin-inline:auto}
.ff-video video{width:100%;height:auto;display:block}
.ff-abre__txt{display:flex;flex-direction:column;gap:1.3rem}
.ff-abre__txt .bx-migalha,.ff-abre__txt .selo{margin-bottom:0}
.ff-abre__txt h1{max-width:15ch;margin-block:.2rem .4rem}
.ff-cta{margin-top:.6rem}

.ff-pedidos{display:flex;flex-direction:column;border-top:1px solid var(--fio);margin-top:.4rem}
.ff-pedidos li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);column-gap:1rem;
  align-items:center;padding-block:1.15rem;border-bottom:1px solid var(--fio)}
.ff-pedidos .ico{width:1.6rem;height:1.6rem;color:var(--ouro-fundo)}
.ff-pedidos b{font-weight:500;font-size:1.05rem;letter-spacing:-.01em}
.ff-pedidos span{display:block;font-size:.95rem;color:var(--tinta-sub);margin-top:.15em}
.ff-brado{font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,2.1vw,1.75rem);line-height:1.24;letter-spacing:-.01em;
  color:var(--tinta);margin-top:.4rem;white-space:nowrap}
.ff-brado em{font-style:normal;color:var(--ouro-fundo)}

/* missao: o metodo em tres movimentos */
.ff-missao{background:var(--noite);color:var(--papel);padding-block:clamp(4.5rem,10vh,8rem)}
.ff-missao .selo{color:var(--ouro)}
.ff-missao h2{color:var(--papel);max-width:19ch;margin-block:1.2rem 1.3rem}
.ff-missao__corpo{color:rgba(253,251,247,.74);max-width:52ch}
.ff-missao__grade{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(1.4rem,3vw,2.6rem);margin-top:clamp(2.5rem,5vh,4rem)}
.ff-missao__item{display:flex;flex-direction:column;gap:.9rem;padding-top:1.3rem;
  border-top:1px solid var(--fio-claro)}
.ff-missao__item .ico{width:1.7rem;height:1.7rem;color:var(--ouro)}
.ff-missao__item b{font-weight:400;font-size:1.12rem;letter-spacing:-.01em}
.ff-missao__item span{font-size:.96rem;line-height:1.5;color:rgba(253,251,247,.7)}
.ff-segredo{margin-top:clamp(2.5rem,5vh,3.5rem);padding-top:1.6rem;
  border-top:1px solid var(--fio-claro);font-family:var(--serif);font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.3;color:var(--papel);max-width:34ch}
@media (max-width:900px){.ff-abre__grade,.ff-missao__grade{grid-template-columns:1fr}
  .ff-abre__grade{gap:2rem}
  .ff-video{max-width:min(100%,30rem)}}

/* o planejamento aqui vem logo depois de uma sessao escura:
   claro, para os dois blocos nao virarem um so */
/* sem cartao escuro por baixo, o bloco nao precisa do recuo interno:
   o texto encosta na mesma linha do resto do site */
.diag--claro{background:var(--areia);color:var(--tinta)}
.diag--claro .diag__grade{padding-inline:0}
.diag--claro .selo{color:var(--ouro-fundo)}
.diag--claro h2{color:var(--tinta)}
.diag--claro .diag__txt .corpo{color:var(--tinta-sub)}
.diag--claro .pontos li{border-top-color:var(--fio)}
.diag--claro .pontos li:last-child{border-bottom-color:var(--fio)}
.diag--claro .pontos .ico{color:var(--ouro-fundo)}
.diag--claro .ff-legenda{color:var(--ouro-fundo)}
.diag--claro .ff-resultado{color:var(--tinta);border-bottom-color:var(--fio)}
/* o fecho do raciocinio vem depois da lista, nao antes do antes e depois:
   por isso perde a linha de baixo e ganha respiro em cima */
.diag__txt .ff-resultado{margin-top:clamp(1.6rem,3vh,2.4rem);margin-bottom:0;
  padding-bottom:0;border-bottom:0}

/* fecho */
.ff-fecho{background:var(--noite);color:var(--papel);
  padding:clamp(4rem,9vh,7rem) var(--marg);text-align:center}
.ff-fecho .selo{color:var(--linho)}
.ff-fecho h2{color:var(--papel);max-width:18ch;margin:1.1rem auto 1.2rem}
.ff-fecho p{color:rgba(253,251,247,.86);max-width:38ch;margin-inline:auto}
.ff-fecho__acoes{margin-top:2rem;display:flex;justify-content:center}