/* ==========================================================
   ABERTURA (#inicio)
   A fotografia ocupa a abertura inteira; o texto fica num painel
   de vidro fosco no canto inferior esquerdo (a foto, desfocada,
   aparece atrás dele), longe do centro da imagem.
   ========================================================== */
.intro { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: flex-end; overflow: hidden; background: var(--quase-branco);
  --fundo: var(--quase-branco); --texto: var(--tinta); --texto-suave: var(--cinza-texto); --botao-fundo: var(--tinta); --botao-texto: var(--quase-branco); color: var(--texto); }
.intro-foto { position: absolute; inset: 0; }
.intro-imagem { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; animation: aproximar 2.4s cubic-bezier(.2, .7, .2, 1) both; }
.intro-conteudo { position: relative; z-index: 1; width: 100%; padding-top: calc(var(--altura-cabecalho) + 32px); padding-bottom: clamp(28px, 6vh, 64px); }

/* O vidro: quase branco translúcido sobre a foto desfocada. Sem suporte a backdrop-filter, o fundo fica quase opaco. */
.intro-vidro { max-width: 660px; padding: clamp(24px, 2.4vw, 34px); background: color-mix(in srgb, var(--quase-branco) 62%, transparent);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px);
  border: 1px solid color-mix(in srgb, var(--branco) 50%, transparent); animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .intro-vidro { background: var(--veu-cabecalho); } }
.intro-vidro > * { animation: entrar .9s cubic-bezier(.2, .7, .2, 1) both; }
.intro-vidro > :nth-child(2) { animation-delay: .1s; } .intro-vidro > :nth-child(3) { animation-delay: .2s; }
.intro-vidro > :nth-child(4) { animation-delay: .3s; } .intro-vidro > :nth-child(5) { animation-delay: .4s; }
.intro .rotulo { margin-bottom: var(--espaco-3); color: var(--grafite); }
.intro h1 { max-width: none; font-size: clamp(28px, 2.4vw, 35px); line-height: 1.12; letter-spacing: -.015em; text-wrap: balance; }
.intro .filete { margin: var(--espaco-4) 0 var(--espaco-3); }
.intro-texto { max-width: 44ch; font-size: 18px; line-height: 1.5; color: var(--grafite); }
.intro .botao { margin-top: var(--espaco-4); }
@keyframes aproximar { from { transform: scale(1.05); } to { transform: none; } }
@keyframes entrar { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .intro-imagem { object-position: 30% 40%; }
  .intro-conteudo { padding-bottom: 20px; }
  .intro-vidro { padding: 20px 20px 22px; }
  .intro .rotulo { font-size: 11px; letter-spacing: .2em; margin-bottom: var(--espaco-2); }
  .intro h1 { font-size: clamp(24px, 6.6vw, 32px); }
  .intro .filete { margin: var(--espaco-3) 0 12px; }
  .intro-texto { font-size: 16px; }
  .intro .botao { margin-top: var(--espaco-3); }
}
/* Telas baixas (notebook de 640 a 720 px de altura): painel mais compacto, para não cobrir o centro da foto. */
@media (min-width: 901px) and (max-height: 720px) {
  .intro-conteudo { padding-bottom: 24px; }
  .intro-vidro { padding: 22px 28px 24px; }
  .intro .rotulo { margin-bottom: 12px; }
  .intro .filete { margin: var(--espaco-3) 0 12px; }
  .intro .botao { margin-top: var(--espaco-3); }
}