/* hero A aprovado, sem alterações de desenho */
/* ---------- palco ---------- */
.ha{position:relative;isolation:isolate;min-height:max(100svh, 640px);overflow:hidden;background:var(--nogueira-funda);
  display:grid;grid-template-rows:auto 1fr}

/* malha: manchas radiais grandes, da nogueira-noite ao creme da persiana */
.ha-malha{position:absolute;inset:-12%;z-index:-5;pointer-events:none;
  background:
    radial-gradient(ellipse 46% 52% at 78% 30% in oklab, color-mix(in oklab, var(--creme) 62%, var(--nogueira-3)) 0%, transparent 70%),
    radial-gradient(ellipse 50% 60% at 52% 58% in oklab, var(--nogueira-3) 0%, transparent 72%),
    radial-gradient(ellipse 44% 56% at 30% 22% in oklab, var(--nogueira-2) 0%, transparent 74%),
    radial-gradient(ellipse 52% 60% at 12% 82% in oklab, var(--nogueira-1) 0%, transparent 76%),
    radial-gradient(ellipse 40% 44% at 60% 96% in oklab, var(--piso) 0%, transparent 72%),
    linear-gradient(100deg in oklab, var(--noite) 0%, var(--nogueira-funda) 45%, var(--nogueira-1) 100%);
  animation:ha-respira 26s ease-in-out infinite alternate}
.ha-malha::after{content:"";position:absolute;inset:0;
  background:
    radial-gradient(ellipse 34% 40% at 44% 34% in oklab, color-mix(in oklab, var(--creme) 30%, transparent) 0%, transparent 70%),
    radial-gradient(ellipse 30% 36% at 22% 60% in oklab, color-mix(in oklab, var(--vidro) 14%, transparent) 0%, transparent 72%);
  animation:ha-respira-2 34s ease-in-out infinite alternate}
@keyframes ha-respira{from{transform:translate3d(-1.5%,-1%,0) scale(1)}to{transform:translate3d(2%,1.5%,0) scale(1.07)}}
@keyframes ha-respira-2{from{transform:translate3d(3%,2%,0) scale(1.04);opacity:.75}to{transform:translate3d(-4%,-2%,0) scale(1.12);opacity:1}}

/* a cena */
.ha-foto{position:absolute;z-index:-4;top:0;right:0;bottom:0;margin:0;
  width:min(var(--foto-l), 80vw);
  -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.82) 28%, #000 40%);
          mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 14%, rgba(0,0,0,.82) 28%, #000 40%)}
.ha-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:72% 50%;
  filter:sepia(.14) saturate(1.08) contrast(1.04) brightness(1.03);
  animation:ha-foto-entra 1.9s var(--ease) both}
@keyframes ha-foto-entra{from{opacity:0;transform:scale(1.06);filter:saturate(.7) brightness(.55)}to{opacity:1;transform:scale(1);filter:sepia(.14) saturate(1.08) contrast(1.04) brightness(1.03)}}

/* a luz da persiana vaza para a página */
.ha-luz{position:absolute;z-index:-3;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 38% 58% at 66% 34% in oklab, rgba(233,223,198,.30) 0%, transparent 70%),
    radial-gradient(ellipse 30% 44% at 40% 40% in oklab, rgba(233,223,198,.20) 0%, transparent 72%);
  transform:translate3d(var(--px,0px),var(--py,0px),0);transition:transform 1.2s ease-out;
  animation:ha-surge 2.2s ease-out both}
.ha-raios{position:absolute;z-index:-2;inset:-30% -40%;pointer-events:none;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 36% 50% at 42% 38%, #000 0%, rgba(0,0,0,.7) 42%, transparent 84%);
          mask-image:radial-gradient(ellipse 36% 50% at 42% 38%, #000 0%, rgba(0,0,0,.7) 42%, transparent 84%);
  animation:ha-surge 2.4s .2s ease-out both}
.ha-raios i{position:absolute;inset:0;display:block;will-change:transform}
.ha-raios i:nth-child(1){
  background:repeating-linear-gradient(104deg, transparent 0 64px, rgba(233,223,198,.21) 92px 138px, transparent 166px 250px);
  animation:ha-sol 38s ease-in-out infinite alternate}
.ha-raios i:nth-child(2){
  background:repeating-linear-gradient(104deg, transparent 0 190px, rgba(238,233,229,.15) 212px 238px, transparent 260px 410px);
  animation:ha-sol-2 29s ease-in-out infinite alternate}
@keyframes ha-sol{from{transform:translate3d(-7%,0,0)}to{transform:translate3d(6%,0,0)}}
@keyframes ha-sol-2{from{transform:translate3d(5%,0,0)}to{transform:translate3d(-8%,0,0)}}
@keyframes ha-surge{from{opacity:0}to{opacity:1}}

/* véu que garante a leitura do texto sobre a parte dissolvida */
.ha-veu{position:absolute;z-index:-1;inset:0;pointer-events:none;
  background:
    linear-gradient(to right in oklab, rgba(19,11,6,.62) 0%, rgba(19,11,6,.40) 30%, rgba(19,11,6,0) 52%),
    linear-gradient(to top in oklab, rgba(19,11,6,.50) 0%, rgba(19,11,6,0) 22%)}

/* granulado fixo */
.ha-grao{position:absolute;z-index:3;inset:0;pointer-events:none;opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.1 -.1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:220px 220px}

/* ---------- topo ---------- */
.ha-topo{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  padding:clamp(1.1rem, 2.6vh, 1.9rem) var(--margem) 0;animation:ha-some 1s .1s ease-out both}
.ha-marca{display:block;text-decoration:none;line-height:1.2}
.ha-marca b{display:block;font-family:var(--serifa);font-weight:400;font-size:clamp(1.06rem, 1.35vw, 1.3rem);letter-spacing:.005em}
.ha-marca span{display:block;margin-top:.3rem;font-size:.69rem;letter-spacing:.11em;text-transform:uppercase;color:var(--texto-suave)}
.ha-marca span em{font-style:normal;white-space:nowrap}
.ha-nav{display:flex;gap:.2rem;padding:.3rem;border-radius:999px;
  background:rgba(24,16,10,.58);border:1px solid rgba(233,223,198,.16);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.ha-nav a{padding:.55rem .95rem;border-radius:999px;font-size:.8rem;text-decoration:none;white-space:nowrap;color:var(--texto);transition:background .3s, color .3s}
.ha-nav a:hover,.ha-nav a:focus-visible{background:rgba(233,223,198,.16)}

/* ---------- texto ---------- */
.ha-corpo{align-self:end;width:min(100%, calc(44rem + var(--margem) * 2));padding:2rem var(--margem) clamp(2.2rem, 7.5vh, 5rem)}
.ha-sobre{margin:0 0 1.4rem;display:flex;align-items:center;gap:.9rem;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--creme);
  animation:ha-sobe .9s .15s var(--ease) both}
.ha-sobre::before{content:"";width:2.6rem;height:1px;background:currentColor;opacity:.7}
.ha-titulo{margin:0;font-family:var(--serifa);font-weight:300;font-size:clamp(2.7rem, 5.95vw, 6.6rem);line-height:.98;letter-spacing:-.022em;color:var(--texto);text-wrap:balance}
.ha-titulo .l{display:block;overflow:hidden;white-space:nowrap;padding-bottom:.16em;margin-bottom:-.16em}
.ha-titulo .l > span{display:block;animation:ha-linha 1.05s var(--ease) both}
.ha-titulo .l:nth-child(1) > span{animation-delay:.25s}
.ha-titulo .l:nth-child(2) > span{animation-delay:.42s}
.ha-titulo em{font-style:italic;font-weight:300;color:var(--creme)}
.ha-apoio{margin:1.6rem 0 0;max-width:31em;font-size:clamp(.98rem, 1.12vw, 1.12rem);line-height:1.62;font-weight:300;color:var(--texto);
  animation:ha-sobe .9s .75s var(--ease) both}
.ha-apoio strong{font-weight:500}
.ha-acoes{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.7rem;margin-top:1.9rem;animation:ha-sobe .9s .92s var(--ease) both}
.ha-btn{display:inline-flex;align-items:center;gap:.8rem;padding:1.02rem 1.5rem 1.02rem 1.6rem;border-radius:3px;
  background:var(--creme);color:var(--noite);font-weight:500;font-size:.98rem;text-decoration:none;letter-spacing:.005em;word-spacing:.09em;
  box-shadow:0 14px 34px -14px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s var(--ease), background .35s, box-shadow .35s}
.ha-btn svg{width:1.05rem;height:1.05rem;transition:transform .35s var(--ease)}
.ha-btn:hover,.ha-btn:focus-visible{background:#f6efdc;transform:translateY(-2px)}
.ha-btn:hover svg,.ha-btn:focus-visible svg{transform:translateX(4px)}
.ha-tel{font-size:.92rem;text-decoration:none;color:var(--texto);padding:.5rem 0;border-bottom:1px solid rgba(233,223,198,.45);transition:border-color .3s}
.ha-tel:hover,.ha-tel:focus-visible{border-color:var(--creme)}
.ha-tel b{font-weight:500;white-space:nowrap}


.ha-prova{display:flex;gap:clamp(1.2rem, 2.4vw, 2.4rem);margin:clamp(1.8rem, 5vh, 3.2rem) 0 0;padding:1.15rem 0 0;list-style:none;
  border-top:1px solid rgba(233,223,198,.22);max-width:31rem;animation:ha-sobe .9s 1.08s var(--ease) both}
.ha-prova li{display:flex;align-items:baseline;gap:.6rem}
.ha-prova li + li{padding-left:clamp(1.2rem, 2.4vw, 2.4rem);border-left:1px solid rgba(233,223,198,.22)}
.ha-prova b{font-family:var(--serifa);font-weight:300;font-size:clamp(1.9rem, 2.5vw, 2.5rem);line-height:1;color:var(--creme);font-variant-numeric:lining-nums}
.ha-prova span{font-size:.8rem;line-height:1.35;color:var(--texto)}

/* legenda da foto */
.ha-legenda{position:absolute;z-index:2;right:var(--margem);bottom:clamp(1.4rem, 4vh, 2.4rem);margin:0;
  display:flex;align-items:center;gap:.7rem;font-size:.72rem;letter-spacing:.06em;color:var(--texto);
  text-shadow:0 1px 10px rgba(19,11,6,.9);animation:ha-some 1s 1.35s ease-out both}
.ha-legenda::before{content:"";width:1.8rem;height:1px;background:currentColor;opacity:.75}

@keyframes ha-linha{from{transform:translate3d(0,112%,0)}to{transform:none}}
@keyframes ha-sobe{from{opacity:0;transform:translate3d(0,18px,0)}to{opacity:1;transform:none}}
@keyframes ha-some{from{opacity:0}to{opacity:1}}

.ha.ha-pausa *, .ha.ha-pausa *::after{animation-play-state:paused}

/* ---------- telas médias (tablet deitado, notebook estreito) ---------- */
@media (min-width:861px) and (max-width:1180px){
  .ha-foto{width:min(var(--foto-l), 70vw);
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.6) 42%, #000 62%);
            mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.16) 22%, rgba(0,0,0,.6) 42%, #000 62%)}
  .ha-foto img{object-position:80% 50%}
  .ha-veu{background:
    linear-gradient(to right in oklab, rgba(19,11,6,.74) 0%, rgba(19,11,6,.6) 38%, rgba(19,11,6,0) 62%),
    linear-gradient(to top in oklab, rgba(19,11,6,.50) 0%, rgba(19,11,6,0) 22%)}
  .ha-titulo{font-size:clamp(2.9rem, 5.3vw, 3.9rem)}
  .ha-apoio{max-width:24em}
  .ha-nav a{padding:.5rem .7rem;font-size:.76rem}
}

/* ---------- celular ---------- */
@media (max-width:860px){
  :root{--foto-a:clamp(290px, 49svh, 470px)}
  .ha{min-height:max(100svh, 600px)}
  .ha-foto{left:0;right:0;bottom:auto;width:auto;height:var(--foto-a);overflow:hidden;
    -webkit-mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.5) 80%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 0%, #000 62%, rgba(0,0,0,.5) 80%, transparent 100%)}
  .ha-foto img{object-position:66% 50%;transform-origin:61% 46%;animation-name:ha-foto-entra-m}
  @keyframes ha-foto-entra-m{from{opacity:0;transform:scale(1.34);filter:saturate(.7) brightness(.55)}to{opacity:1;transform:scale(1.26);filter:sepia(.14) saturate(1.08) contrast(1.04) brightness(1.03)}}
  .ha-malha{background:
    radial-gradient(ellipse 80% 34% at 70% 20% in oklab, color-mix(in oklab, var(--creme) 50%, var(--nogueira-3)) 0%, transparent 72%),
    radial-gradient(ellipse 90% 34% at 30% 52% in oklab, var(--nogueira-3) 0%, transparent 72%),
    radial-gradient(ellipse 90% 40% at 86% 74% in oklab, var(--nogueira-2) 0%, transparent 74%),
    radial-gradient(ellipse 80% 36% at 8% 92% in oklab, var(--piso) 0%, transparent 74%),
    linear-gradient(180deg in oklab, var(--nogueira-1) 0%, var(--nogueira-funda) 60%, var(--noite) 100%)}
  .ha-luz{background:
    radial-gradient(ellipse 80% 30% at 70% 22% in oklab, rgba(233,223,198,.22) 0%, transparent 72%),
    radial-gradient(ellipse 70% 22% at 40% 58% in oklab, rgba(233,223,198,.10) 0%, transparent 72%)}
  .ha-raios{-webkit-mask-image:radial-gradient(ellipse 46% 26% at 50% 68%, #000 0%, rgba(0,0,0,.6) 45%, transparent 82%);
                    mask-image:radial-gradient(ellipse 46% 26% at 50% 68%, #000 0%, rgba(0,0,0,.6) 45%, transparent 82%)}
  .ha-veu{background:
    linear-gradient(to bottom in oklab, rgba(19,11,6,.86) 0, rgba(19,11,6,.62) 64px, rgba(19,11,6,0) 150px),
    linear-gradient(to top in oklab, rgba(19,11,6,.55) 0%, rgba(19,11,6,.30) 46%, rgba(19,11,6,0) 62%)}
  .ha-topo{flex-direction:column;align-items:stretch;gap:.55rem;padding-top:.95rem}
  .ha-marca span{font-size:.64rem;letter-spacing:.1em}
  .ha-esp{display:none}
  .ha-nav{gap:0;padding:0;border:0;border-radius:0;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;justify-content:space-between;
    border-top:1px solid rgba(233,223,198,.22);margin-top:.1rem}
  .ha-nav a{padding:.6rem 0 .5rem;font-size:.76rem;border-radius:0;text-shadow:0 1px 8px rgba(19,11,6,.9)}
  .ha-nav a:hover,.ha-nav a:focus-visible{background:none;text-decoration:underline}
  .ha-corpo{align-self:start;width:100%;padding-top:0;margin-top:calc(var(--foto-a) - 8.5rem);padding-bottom:1.3rem}
  .ha-sobre{margin-bottom:.8rem;font-size:.64rem;letter-spacing:.17em;text-shadow:0 1px 10px rgba(19,11,6,.95)}
  .ha-sobre::before{width:1.6rem}
  .ha-titulo{font-size:clamp(2.5rem, 12.2vw, 3.6rem);text-shadow:0 2px 22px rgba(19,11,6,.6)}
  .ha-apoio{margin-top:.95rem;font-size:.95rem;line-height:1.55}
  .ha-acoes{margin-top:1.25rem;gap:.7rem 1.3rem}
  .ha-btn{padding:.95rem 1.3rem}
  .ha-prova{margin-top:1.1rem;padding-top:.8rem;gap:1.1rem;max-width:none}
  .ha-prova li{gap:.5rem}
  .ha-prova li + li{padding-left:1.1rem}
  .ha-prova b{font-size:1.6rem}
  .ha-prova span{font-size:.72rem}
  .ha-legenda{right:.55rem;bottom:auto;top:7.3rem;writing-mode:vertical-rl;font-size:.58rem;letter-spacing:.08em;gap:.5rem;
    padding:.6rem .28rem;border-radius:999px;background:rgba(24,16,10,.56);text-shadow:none;
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  .ha-legenda::before{width:1px;height:.9rem}
}
@media (max-width:860px) and (max-height:700px){
  .ha-apoio{font-size:.9rem}
}

@media (prefers-reduced-motion:reduce){
  .ha *, .ha *::before, .ha *::after{animation:none !important;transition:none !important}
}