/* ============================================================
   HERO «EMERGIR» — revelação lenta ao carregar + parallax discreto ao scroll.
   O estado final é a composição V15 (navy + foto + dourado); apenas a ENTRADA
   e a profundidade são novas. Progressive enhancement: sem esta folha/JS, o
   conteúdo aparece normalmente. Respeita "reduzir movimento".
   ============================================================ */

.hero{position:relative;overflow:hidden}

/* 1 · Atmosfera — luz difusa, muito lenta */
.hero-atmos{position:absolute;inset:0;z-index:0;background:var(--navy-deep)}
.hero-atmos::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(58% 60% at 24% 32%, rgba(77,126,216,.18), transparent 62%),
    radial-gradient(46% 48% at 84% 82%, rgba(184,148,90,.10), transparent 60%);
  animation:heroAtmos 18s ease-in-out infinite}

/* 2 · Imagem — emerge da luz/névoa (blur→foco, brilho a assentar) */
.hero-media{position:absolute;top:0;right:0;bottom:0;width:68%;z-index:1;overflow:hidden;will-change:transform}
.hero-photo{width:100%;height:100%;object-fit:cover;object-position:58% 30%;display:block;
  animation:heroPhotoIn 3.6s cubic-bezier(.22,.61,.36,1) .2s both;will-change:opacity,filter,transform}

/* 2b · «Chão» da foto — desfoca+navy a zona inferior da mesa (materiais de trabalho),
   com transição suave por máscara (sem aresta). Preserva a atmosfera, oculta o concreto.
   Afinável: --floor-h (altura da zona), o blur e as paragens da máscara. */
.hero-media-floor{position:absolute;left:0;right:0;bottom:0;height:58%;z-index:2;pointer-events:none;
  -webkit-backdrop-filter:blur(16px) saturate(.9);backdrop-filter:blur(16px) saturate(.9);
  background:linear-gradient(180deg,rgba(8,31,90,0) 0%,rgba(8,31,90,.30) 42%,rgba(8,31,90,.62) 78%,rgba(8,31,90,.80) 100%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 46%,#000 100%)}
/* Navegadores sem backdrop-filter: reforça o navy para na mesma ocultar os materiais. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .hero-media-floor{background:linear-gradient(180deg,rgba(8,31,90,0) 0%,rgba(8,31,90,.55) 42%,rgba(8,31,90,.86) 78%,rgba(8,31,90,.95) 100%)}
}

/* 3 · Véu — legibilidade do texto sobre a foto (fade navy, como na V15) */
.hero-veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(90deg,var(--navy-deep) 0%,var(--navy-deep) 28%,rgba(12,42,115,.9) 44%,rgba(12,42,115,.6) 60%,rgba(12,42,115,.32) 80%,rgba(12,42,115,.12) 100%)}

/* 4 · Conteúdo — em camadas, depois da imagem */
.hero-content{position:relative;z-index:3}
.hero-eyebrow{animation:heroRise .9s ease 1.3s both}
.hero h1{animation:heroRise 1.1s ease 1.6s both}
.hero-sub{animation:heroRise 1s ease 2.3s both}
.hero-stats{animation:heroRise 1s ease 2.9s both}
.hero-cue{animation:heroRise 1s ease 6.5s both}

/* 4b · Assinatura manuscrita (voz das crianças e jovens) — é a ÚLTIMA entrada do Hero.
   A frase é "escrita à mão" (revelação da esquerda para a direita, com uma pena fluor a
   acompanhar) e só depois o sublinhado verde fluor se desenha. Fica no topo do Hero,
   encostada à esquerda no mesmo eixo do sobretítulo (left = mesmo padding do .hero-content). */
/* SEGURANÇA DE LAYOUT — por omissão o slogan vive NO FLUXO: reserva o seu próprio espaço,
   por isso é impossível sobrepor-se ao sobretítulo/título, em qualquer resolução ou nível de
   zoom (zoom do browser ≡ viewport com menos píxeis CSS). A folga cresce com a altura. */
.hero-sign{position:static;margin:0 0 clamp(.55rem,2.2vh,2.6rem);line-height:1;z-index:4}
/* Só com altura comprovada (medido: ≥1250px, que cobre também os 32px da barra de admin) é
   que o slogan sobe para o vão junto ao menu, como na versão aprovada no monitor externo. */
@media (min-width:721px) and (min-height:1250px){
  .hero-sign{position:absolute;top:clamp(1.25rem,4.75vh,3.25rem);left:clamp(1.75rem,5vw,4.5rem);margin:0}
}
.hero-sign-txt{position:relative;display:inline-block;white-space:nowrap;
  font-family:'Caveat',cursive;font-weight:700;font-size:clamp(1.7rem,2.5vw,2.25rem);line-height:1.05;color:#fff;
  transform:rotate(-1.5deg);transform-origin:left center;
  clip-path:inset(-.32em 100% -.85em -.12em);
  animation:heroWrite 1.7s ease-out 3.9s both}
/* «Futuros Seguros e Brilhantes» leva marcador V2 «Duplo traço»: um traço firme + uma 2.ª
   passagem mais fina e translúcida (dinâmica de marcador feito à pressa). Herda a inclinação
   do texto; fica ABAIXO das letras; revela-se da esquerda para a direita depois de escrever. */
.hero-sign-mk{position:relative;display:inline-block}
.hero-sign-mk::after{content:"";position:absolute;left:-.1em;right:-.16em;top:100%;margin-top:-.12em;height:.6em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%201000%2060'%20preserveAspectRatio='none'%3E%3Cdefs%3E%3Cfilter%20id='mk'%20filterUnits='userSpaceOnUse'%20x='0'%20y='0'%20width='1000'%20height='60'%3E%3CfeTurbulence%20type='fractalNoise'%20baseFrequency='0.012%200.5'%20numOctaves='1'%20seed='4'%20result='n'/%3E%3CfeDisplacementMap%20in='SourceGraphic'%20in2='n'%20scale='5'%20xChannelSelector='R'%20yChannelSelector='G'/%3E%3C/filter%3E%3C/defs%3E%3Cpath%20d='M18,34%20C320,26%20700,38%20986,28'%20fill='none'%20stroke='%23d4f000'%20stroke-width='17'%20stroke-linecap='round'%20filter='url(%23mk)'/%3E%3Cpath%20d='M40,47%20C360,41%20690,47%20962,43'%20fill='none'%20stroke='%23eaff4a'%20stroke-width='7'%20stroke-linecap='round'%20opacity='0.75'%20filter='url(%23mk)'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  clip-path:inset(-.3em 100% -.3em 0);
  animation:heroPaint .66s cubic-bezier(.5,.05,.3,1) 5.65s both}
/* pena/cursor que acompanha a escrita (vive na .hero-sign, fora do recorte do texto) */
.hero-sign::after{content:"";position:absolute;top:-.02em;left:0;width:3px;height:1.15em;border-radius:2px;
  background:var(--kf,#d4f000);box-shadow:0 0 10px rgba(212,240,0,.65);opacity:0;
  animation:heroPen 1.7s ease-out 3.9s forwards}
@keyframes heroWrite{from{clip-path:inset(-.32em 100% -.85em -.12em)}to{clip-path:inset(-.32em -.14em -.85em -.12em)}}
@keyframes heroPen{0%{left:0;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
/* revela o traço de marcador da esquerda para a direita (mantém a forma, não distorce) */
@keyframes heroPaint{from{clip-path:inset(-.3em 100% -.3em 0)}to{clip-path:inset(-.3em -.16em -.3em 0)}}
@media(max-width:720px){.hero-sign{margin-bottom:.9rem}.hero-sign-txt{font-size:1.6rem}}
/* Ecrãs estreitos: a assinatura pode quebrar (evita corte à direita); o recorte de escrita
   tem insets negativos no fim, logo adapta-se à altura de várias linhas sem cortar. */
@media(max-width:560px){.hero-sign-txt{white-space:normal;line-height:1.18}}
/* Viewports baixos (portátil ou zoom alto): compacta a assinatura em vez de a deixar apertar. */
@media (max-height:820px){.hero-sign{margin-bottom:.7rem}.hero-sign-txt{font-size:clamp(1.3rem,2.1vw,1.65rem)}}

@keyframes heroPhotoIn{
  0%{opacity:0;filter:blur(26px) brightness(1.42) saturate(.72);transform:scale(1.06)}
  60%{opacity:1}
  100%{opacity:1;filter:blur(0) brightness(1) saturate(1);transform:scale(1)}
}
@keyframes heroRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes heroAtmos{0%,100%{opacity:.82}50%{opacity:1}}

/* Revelação contemplativa das fotografias ao scroll (eco do Hero «Emergir») */
.img-emerge{opacity:0;filter:blur(14px) saturate(.92);transform:scale(1.035);
  transition:opacity 1.15s ease, filter 1.15s ease, transform 1.15s cubic-bezier(.22,.61,.36,1);
  will-change:opacity,filter,transform}
.img-emerge.v{opacity:1;filter:none;transform:none}

/* Acessibilidade — sem movimento: composição final imediata */
@media (prefers-reduced-motion:reduce){
.hero-atmos::after,.hero-photo,.hero-eyebrow,.hero h1,.hero-sub,.hero-stats,.hero-cue,.hero-cue-arrow svg{animation:none!important}
  .hero-sign-txt{animation:none!important;clip-path:none!important}
  .hero-sign-mk::after{animation:none!important;clip-path:none!important}
  .hero-sign::after{display:none!important}
  .hero-photo{opacity:1;filter:none;transform:none}
  .hero-media{transform:none!important}
  .img-emerge{opacity:1!important;filter:none!important;transform:none!important;transition:none}
}

/* Mobile: foto do Hero em fundo total com véu vertical (equivalente ao comportamento V15) */
@media (max-width:880px){
  .hero-media{width:100%}
  .hero-veil{background:linear-gradient(180deg,rgba(12,42,115,.5) 0%,rgba(12,42,115,.8) 58%,rgba(12,42,115,.93) 100%)}
}

/* «Quem escreve» — mesma linguagem do Hero: a foto emerge da névoa (mantendo o
   preto-e-branco) e o sobretítulo/nome sobem em stagger, ao entrar no ecrã.
   Reutiliza o IntersectionObserver (.img-emerge / .fi → .v) já existente. */
.quem-hero-media.img-emerge{filter:grayscale(1) blur(14px) saturate(.92)}
.quem-hero-media.img-emerge.v{filter:grayscale(1)}
.quem-hero-head .eyebrow,.quem-hero-head h2{opacity:0;transform:translateY(18px)}
.quem.v .quem-hero-head .eyebrow{animation:heroRise .9s ease .45s both}
.quem.v .quem-hero-head h2{animation:heroRise 1.1s ease .7s both}
@media (prefers-reduced-motion:reduce){
  .quem-hero-media.img-emerge{filter:grayscale(1)!important}
  .quem-hero-head .eyebrow,.quem-hero-head h2{opacity:1!important;transform:none!important;animation:none!important}
}

/* Estados acessíveis da newsletter (home) — .to-top/.read-progress em esfera.css */
.nl-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden;opacity:0}
.nl-status{font-family:var(--serif);font-style:italic;font-size:1.15rem;margin:.4rem 0 0;min-height:1.3em}
.nl-status.ok{color:var(--gold-light)}
.nl-status.err{font-style:normal;font-size:.95rem;color:#ffbfb0}