/* ==========================================================================
   Instituto Mozart Ferreira — layout da landing page
   Camadas: tokens.css → components.css (design system) → main.css (esta página)
   Origem: pagina.css do wireframe v2 aprovado no Claude Design.
   ========================================================================== */

/* Ícones: Material Symbols Sharp, peso 200 — subset auto-hospedado com os ícones usados.
   Para adicionar um ícone: baixar de novo o subset com a lista completa (ver CLAUDE.md). */
@font-face {
  font-family: "Material Symbols Sharp";
  src: url("../fonts/material-symbols-sharp-subset.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: block;
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
img { max-width: 100%; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Link de acessibilidade: só aparece com foco de teclado */
.pular { position: absolute; left: var(--espaco-4); top: -100px; z-index: 100; padding: var(--espaco-3) var(--espaco-5); border-radius: var(--raio-arco); background: var(--cinza-claro); color: var(--preto); font-family: var(--font-display); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; }
.pular:focus { top: var(--espaco-4); }

/* Faixa em verde fechado (Instituto, Dr. Mozart) */
.secao--verde { background: var(--verde-fechado); }
.secao--verde .cartao:hover { background: var(--verde-noite); }

/* Grades */
.pg-grid { display: grid; gap: var(--espaco-7); align-items: center; }
@media (min-width: 960px) {
  .pg-grid { gap: var(--espaco-9); }
  .pg-grid--5-7 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .pg-grid--7-5 { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .pg-grid--6-6 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pg-grid--topo { align-items: start; }
  .pg-grid--fim { align-items: end; }
  .pg-grid--base { align-items: baseline; }
}
.pg-pilha { display: grid; gap: var(--espaco-5); align-content: start; min-width: 0; }
.pg-pilha--larga { gap: var(--espaco-6); }
.pg-bloco { margin-top: clamp(4rem, 3rem + 4vw, 7rem); }
.pg-bloco--curto { margin-top: var(--espaco-8); }
.pg-relativo { position: relative; z-index: 1; }

/* Texto */
.pg-h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-titulo-m); line-height: 1.25; font-weight: 300; letter-spacing: -0.01em; text-wrap: balance; color: var(--tinta); }
.pg-h3 em { font-style: italic; }
.pg-h3--centro { text-align: center; margin-bottom: var(--espaco-8); }
.pg-h3--antes { margin-bottom: var(--espaco-7); }
.pg-texto { display: grid; gap: var(--espaco-4); max-width: var(--largura-texto); }
.pg-texto p { margin: 0; font-size: 1rem; line-height: 1.75; color: var(--tinta-suave); text-wrap: pretty; }
.pg-texto strong { font-weight: 500; color: var(--tinta); }
.pg-lead { margin: 0; max-width: 40em; font-size: 1.125rem; line-height: 1.7; color: var(--tinta-suave); }
.pg-lead strong { font-weight: 500; color: var(--tinta); }
.pg-afirmacao { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--espaco-4); margin: var(--espaco-4) 0 0; padding-top: var(--espaco-5); border-top: 1px solid var(--linha); font-family: var(--font-display); font-size: 1.25rem; line-height: 1.45; font-weight: 300; font-style: italic; color: var(--tinta); }
.pg-nota { margin: 0; font-size: 0.8125rem; line-height: 1.6; color: var(--tinta-suave); }

/* Ações */
.pg-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-5); margin-top: var(--espaco-8); }
.pg-acoes--centro { justify-content: center; }
.pg-acoes--fim { justify-content: flex-start; margin-top: 0; }
@media (min-width: 960px) { .pg-acoes--fim { justify-content: flex-end; } }

/* Destaque (frase) com arco */
.pg-destaque { padding-top: 0; }

/* Instituto */
.pg-marca-dagua { right: -80px; top: 60px; }
.pg-foto-larga { aspect-ratio: 21 / 9; }
@media (max-width: 719px) { .pg-foto-larga { aspect-ratio: 4 / 3; } }

/* Calvície: foto grande enquadrada no gesto da avaliação */
.pg-foto-avaliacao img { object-position: 40% 50%; }

/* Transplante: BHT em cartão horizontal imagem + texto */
.pg-bht { display: grid; border: 1px solid var(--linha); border-radius: var(--raio-2); overflow: hidden; }
@media (min-width: 900px) { .pg-bht { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.pg-bht .foto { border-radius: 0; min-height: 280px; }
.pg-bht__texto { display: grid; gap: var(--espaco-4); align-content: center; padding: var(--espaco-7) var(--espaco-6); }
@media (min-width: 900px) { .pg-bht__texto { padding: var(--espaco-8); } }

/* Dr. Mozart */
.pg-retrato { width: min(100%, 460px); justify-self: center; margin-top: var(--espaco-4); }
@media (min-width: 960px) { .pg-retrato { justify-self: start; } }
.pg-retrato .arco { background: linear-gradient(180deg, var(--verde-claro) 0%, var(--verde-noite) 100%); }
@media (min-width: 960px) { .pg-bio { padding-top: var(--espaco-7); } }
.pg-formacao { display: grid; gap: var(--espaco-7); }
@media (min-width: 960px) { .pg-formacao { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--espaco-9); align-items: start; } }

/* Resultados: no site a galeria rola por toque (scroll-snap); as setas rolam um item */
.galeria__janela { overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.galeria__janela::-webkit-scrollbar { display: none; }
.galeria__trilho { transition: none; padding-right: var(--espaco-7); }
.galeria__item { scroll-snap-align: start; }
.btn-seta[disabled] { opacity: 0.35; cursor: default; }
.pg-resultados-rodape { margin-top: var(--espaco-7); }

/* Localização: mapa */
.local__mapa { min-height: 420px; }
.local__mapa iframe { filter: grayscale(1) contrast(0.95) brightness(0.8); }

/* FAQ */
.faq__pergunta:focus-visible { outline-offset: 2px; }

/* Menu mobile */
.menu-painel[hidden] { display: none; }
.menu-painel .btn { justify-self: start; }
body.menu-aberto { overflow: hidden; }

/* ==========================================================================
   Tricologia — recorte do Dr. Mozart pousado sobre o contêiner de cards
   ========================================================================== */
.pg-tricologia-topo { align-items: end; gap: 0 var(--espaco-9); }
.pg-tricologia-topo .section-head { padding-bottom: var(--espaco-8); }
.pg-recorte { position: relative; z-index: 2; margin: 0; justify-self: center; width: min(80%, 500px); }
@media (min-width: 960px) { .pg-recorte { justify-self: end; margin-right: var(--espaco-6); } }
.pg-recorte img { display: block; width: 100%; height: auto; }
/* a base reta do recorte encosta no filete superior dos cards */
.pg-cartoes-recorte { position: relative; z-index: 1; margin-top: -1px; }
@media (max-width: 959px) { .pg-tricologia-topo .section-head { padding-bottom: var(--espaco-7); } }

/* ==========================================================================
   Parallax (desktop, sem prefers-reduced-motion) — deslocamento calculado em main.js
   ========================================================================== */
[data-parallax] { transform: translate3d(0, var(--py, 0px), 0) scale(var(--ps, 1)); will-change: transform; }
/* fotos dentro de molduras: leve ampliação para o movimento não revelar bordas */
.foto > img[data-parallax] { --ps: 1.16; }
/* hero: a foto ganha folga acima para descer mais devagar que a página */
@media (min-width: 960px) {
  .hero__foto-fundo[data-parallax] { top: -20%; height: 120%; object-position: 60% 42%; }
}
@media (max-width: 959px), (prefers-reduced-motion: reduce) {
  [data-parallax] { --py: 0px !important; will-change: auto; }
}
.pg-arco-destaque { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.pg-arco-destaque .grafismo-arco { left: 0; top: 0; transform: translate(-50%, -18%); width: clamp(420px, 70vw, 1100px); opacity: 0.25; }

/* ==========================================================================
   Sticky (desktop): a coluna fica presa enquanto o conteúdo ao lado rola
   ========================================================================== */
@media (min-width: 960px) {
  .pg-fixo { position: sticky; top: calc(var(--altura-header) + var(--espaco-7)); align-self: start; }
}