/* Hero D · "O nome dela" · Instituto Dra. Daniela Nóbrega */

:root{
  /* parede e materiais do lugar */
  --hd-gesso:#e6dfd2;
  --hd-gelo:#f1ebe0;
  --hd-gesso-sombra:#d8cdbc;
  --hd-creme:#e6d9c8;
  --hd-cafe:#2b2018;
  --hd-cafe-suave:#5b4a3c;
  --hd-nogueira:#463e30;
  --hd-ouro-claro:#e9d7a0;
  --hd-ouro:#c9a24a;
  --hd-ouro-fundo:#8a6a22;
  --hd-ouro-tinta:#6d4f17;      /* dourado que serve de tinta sobre o gesso */

  /* tipografia */
  --hd-f-titulo:"Aboreto","Cormorant SC","Times New Roman",serif;
  --hd-f-texto:"Host Grotesk","Helvetica Neue",Arial,sans-serif;

  /* unidade do palco: 1440x900 => 14.4px */
  --hd-u:min(1vw,1.6vh);
  --hd-margem:calc(var(--hd-u)*6.1);

  --hd-ease:cubic-bezier(.2,.7,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--hd-gesso);color:var(--hd-cafe);font-family:var(--hd-f-texto);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit;text-decoration:none}

/* ───────── parede ───────── */
.hd-hero{position:relative;min-height:max(100svh,600px);overflow:hidden;isolation:isolate;background:var(--hd-gesso)}

.hd-parede{position:absolute;inset:0;z-index:-2;
  background:
    radial-gradient(120% 70% at 34% -8% in oklab, #f7f2e8 0%, #f1ebe0 34%, transparent 72%),
    radial-gradient(70% 90% at 104% 46% in oklab, #dccfbb 0%, transparent 70%),
    radial-gradient(80% 60% at -6% 104% in oklab, #d6cab7 0%, transparent 68%),
    radial-gradient(60% 50% at 66% 110% in oklab, #cfc1ab 0%, transparent 72%),
    linear-gradient(180deg in oklab, #ece5d9 0%, #e3dbcd 58%, #d9cfbf 100%);
}
.hd-parede i{position:absolute;border-radius:50%;filter:blur(calc(var(--hd-u)*5));will-change:transform,opacity}
.hd-parede i:nth-child(1){left:8%;top:-18%;width:62%;height:80%;
  background:radial-gradient(closest-side in oklab,#fbf7ee 0%,transparent 100%);opacity:.85;
  animation:hd-respira-1 26s ease-in-out infinite alternate}
.hd-parede i:nth-child(2){right:-12%;top:20%;width:54%;height:86%;
  background:radial-gradient(closest-side in oklab,#d3c4ad 0%,transparent 100%);opacity:.6;
  animation:hd-respira-2 34s ease-in-out infinite alternate}
.hd-parede i:nth-child(3){left:24%;bottom:-30%;width:60%;height:60%;
  background:radial-gradient(closest-side in oklab,#e9d9bb 0%,transparent 100%);opacity:.5;
  animation:hd-respira-3 21s ease-in-out infinite alternate}
@keyframes hd-respira-1{to{transform:translate3d(7%,5%,0) scale(1.12);opacity:.7}}
@keyframes hd-respira-2{to{transform:translate3d(-8%,-6%,0) scale(1.1);opacity:.78}}
@keyframes hd-respira-3{to{transform:translate3d(9%,-8%,0) scale(1.16);opacity:.34}}

.hd-grao{position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  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 .17 0 0 0 0 .12 0 0 0 0 .08 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}

/* ───────── palco (desktop): tudo medido em --hd-u ───────── */
.hd-palco{position:relative;width:calc(var(--hd-u)*100);min-height:max(100svh,600px);margin:0 auto}

/* nav */
.hd-nav{position:absolute;z-index:6;left:var(--hd-margem);right:var(--hd-margem);top:calc(var(--hd-u)*2.2);
  display:flex;align-items:center;justify-content:space-between;gap:calc(var(--hd-u)*2)}
.hd-marca{display:flex;align-items:baseline;gap:.7em;font-family:var(--hd-f-titulo);font-size:max(12px,calc(var(--hd-u)*1.02));letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.hd-marca-casa{color:var(--hd-ouro-tinta)}
.hd-links{display:flex;gap:calc(var(--hd-u)*2.6);list-style:none;margin:0;padding:0;
  font-size:max(12px,calc(var(--hd-u)*.97));letter-spacing:.02em;color:var(--hd-cafe-suave)}
.hd-links a{position:relative;padding:.5em 0;transition:color .3s}
.hd-links a::after{content:"";position:absolute;left:0;right:0;bottom:.15em;height:1px;background:var(--hd-ouro-fundo);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--hd-ease)}
.hd-links a:hover{color:var(--hd-cafe)}
.hd-links a:hover::after{transform:scaleX(1)}
.hd-nav-botao{font-size:max(12px,calc(var(--hd-u)*.97));font-weight:500;letter-spacing:.04em;padding:.72em 1.5em;border:1px solid color-mix(in oklab,var(--hd-cafe) 55%,transparent);border-radius:99px;transition:background .3s,color .3s,border-color .3s}
.hd-nav-botao:hover{background:var(--hd-cafe);color:var(--hd-gelo);border-color:var(--hd-cafe)}

/* monograma */
.hd-mono{position:absolute;z-index:1;left:var(--hd-margem);top:calc(var(--hd-u)*7.1);
  width:calc(var(--hd-u)*50.5);aspect-ratio:1500/910}
.hd-mono-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;
  filter:drop-shadow(calc(var(--hd-u)*.5) calc(var(--hd-u)*.7) calc(var(--hd-u)*.7) rgba(59,43,32,.28));
  transition:opacity 1.1s ease .15s}
/* a tela 3D sobra para os lados (balanço e sombra na parede) */
.hd-cena{position:absolute;left:-22%;right:-22%;top:-34%;bottom:-34%;opacity:0;transition:opacity 1.1s ease;pointer-events:none}
.hd-cena canvas{display:block;width:100%;height:100%;
  filter:drop-shadow(calc(var(--hd-u)*.16) calc(var(--hd-u)*.2) calc(var(--hd-u)*.12) rgba(59,43,32,.34)) drop-shadow(calc(var(--hd-u)*.7) calc(var(--hd-u)*1) calc(var(--hd-u)*1) rgba(59,43,32,.24))}
.hd-3d .hd-cena{opacity:1}
.hd-3d .hd-mono-svg{opacity:0}

/* ela */
.hd-ela{position:absolute;z-index:2;margin:0;left:calc(var(--hd-u)*49);top:calc(var(--hd-u)*6.4);width:calc(var(--hd-u)*38);max-width:620px}
.hd-ela-sombra{display:block;filter:drop-shadow(calc(var(--hd-u)*-1.4) calc(var(--hd-u)*1.1) calc(var(--hd-u)*2.2) rgba(59,43,32,.2))}
.hd-ela-foto{display:block;width:100%;height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 70%,rgba(0,0,0,.5) 79%,transparent 86.5%);
          mask-image:linear-gradient(180deg,#000 0,#000 70%,rgba(0,0,0,.5) 79%,transparent 86.5%)}

/* texto, como o letreiro sob o logo */
.hd-texto{position:absolute;z-index:3;left:var(--hd-margem);top:calc(var(--hd-u)*39.7);width:calc(var(--hd-u)*47)}
.hd-titulo{margin:0;font-family:var(--hd-f-titulo);font-weight:400;font-size:calc(var(--hd-u)*2.12);line-height:1.34;letter-spacing:.045em;text-transform:uppercase;color:var(--hd-cafe)}
.hd-batida{display:block;white-space:nowrap}
.hd-batida-2{color:var(--hd-ouro-tinta)}
.hd-apoio{margin:calc(var(--hd-u)*1.25) 0 0;font-size:max(14px,calc(var(--hd-u)*1.16));line-height:1.5;font-weight:400;color:var(--hd-cafe-suave);max-width:31em;text-wrap:balance}
.hd-acoes{display:flex;align-items:center;gap:calc(var(--hd-u)*2.2);margin-top:calc(var(--hd-u)*1.7)}
.hd-botao{position:relative;display:inline-flex;align-items:center;gap:.9em;padding:1.02em 1.6em 1.02em 1.8em;border-radius:99px;overflow:hidden;
  background:var(--hd-cafe);color:#f4eee3;font-size:max(14px,calc(var(--hd-u)*1.08));font-weight:500;letter-spacing:.03em;
  box-shadow:0 1px 0 rgba(255,255,255,.14) inset,0 calc(var(--hd-u)*.7) calc(var(--hd-u)*1.6) -.5em rgba(43,32,24,.5);
  transition:transform .4s var(--hd-ease),box-shadow .4s var(--hd-ease)}
.hd-botao::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(233,215,160,.34) 48%,transparent 62%);transform:translateX(-120%);transition:transform .9s var(--hd-ease)}
.hd-botao:hover{transform:translateY(-2px)}
.hd-botao:hover::before{transform:translateX(120%)}
.hd-botao svg{width:1.25em;height:1.25em;color:var(--hd-ouro-claro);transition:transform .4s var(--hd-ease)}
.hd-botao:hover svg{transform:translateX(4px)}
.hd-botao span{position:relative}
.hd-segunda{font-size:max(13px,calc(var(--hd-u)*1.02));color:var(--hd-cafe);padding:.4em 0;border-bottom:1px solid color-mix(in oklab,var(--hd-ouro-fundo) 70%,transparent);transition:border-color .3s,color .3s}
.hd-segunda:hover{color:var(--hd-ouro-tinta);border-color:var(--hd-ouro-tinta)}
.hd-botao:focus-visible,.hd-segunda:focus-visible,.hd-nav-botao:focus-visible,.hd-links a:focus-visible,.hd-marca:focus-visible{outline:2px solid var(--hd-ouro-fundo);outline-offset:4px}

.hd-prova{display:flex;align-items:center;gap:calc(var(--hd-u)*1.8);margin-top:calc(var(--hd-u)*2.5)}
.hd-nota{display:flex;align-items:center;gap:.8em;margin:0}
.hd-nota-num{font-family:var(--hd-f-titulo);font-size:calc(var(--hd-u)*2.1);line-height:1;color:var(--hd-cafe)}
.hd-nota-txt{font-size:max(11.5px,calc(var(--hd-u)*.86));line-height:1.35;color:var(--hd-cafe-suave);white-space:nowrap}
.hd-fala{margin:0;padding-left:calc(var(--hd-u)*1.8);border-left:1px solid color-mix(in oklab,var(--hd-ouro-fundo) 60%,transparent);display:flex;flex-direction:column;gap:.2em}
.hd-fala p{margin:0;font-size:max(14px,calc(var(--hd-u)*1.12));font-style:italic;color:var(--hd-cafe)}
.hd-fala cite{font-style:normal;font-size:max(11.5px,calc(var(--hd-u)*.84));color:var(--hd-cafe-suave);letter-spacing:.02em}

/* etiqueta de parede */
.hd-etiqueta{position:absolute;z-index:3;left:calc(var(--hd-u)*80.6);top:calc(var(--hd-u)*30.5);min-width:calc(var(--hd-u)*14);width:max-content;padding-top:calc(var(--hd-u)*1);
  border-top:1px solid var(--hd-ouro-fundo)}
.hd-etiqueta p{margin:0}
.hd-etiqueta-nome,.hd-etiqueta-reg{white-space:nowrap}
.hd-etiqueta-nome{font-family:var(--hd-f-titulo);font-size:max(12px,calc(var(--hd-u)*.98));letter-spacing:.1em;text-transform:uppercase;color:var(--hd-cafe);line-height:1.35}
.hd-etiqueta-reg{margin-top:.5em !important;font-size:max(11.5px,calc(var(--hd-u)*.86));color:var(--hd-cafe);font-weight:500;letter-spacing:.01em}
.hd-etiqueta-end{margin-top:.9em !important;font-size:max(11.5px,calc(var(--hd-u)*.84));line-height:1.45;color:var(--hd-cafe-suave)}
.hd-onde{display:none}

/* ───────── entrada ───────── */
@keyframes hd-sobe{from{opacity:0;transform:translate3d(0,1.1em,0)}to{opacity:1;transform:none}}
@keyframes hd-surge{from{opacity:0}to{opacity:1}}
@keyframes hd-pousa{from{opacity:0;transform:translate3d(0,calc(var(--hd-u)*1.4),0) scale(.985)}to{opacity:1;transform:none}}
@keyframes hd-chega{from{opacity:0;transform:translate3d(calc(var(--hd-u)*1.6),0,0)}to{opacity:1;transform:none}}
@keyframes hd-fio{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

.hd-nav{animation:hd-surge .9s ease both .05s}
.hd-mono{animation:hd-pousa 1.3s var(--hd-ease) both .1s}
.hd-ela{animation:hd-chega 1.4s var(--hd-ease) both .25s}
.hd-batida{animation:hd-sobe .95s var(--hd-ease) both .55s}
.hd-batida-2{animation-delay:.8s}
.hd-apoio{animation:hd-sobe .9s var(--hd-ease) both 1.05s}
.hd-acoes{animation:hd-sobe .9s var(--hd-ease) both 1.2s}
.hd-prova{animation:hd-sobe .9s var(--hd-ease) both 1.4s}
.hd-etiqueta{animation:hd-fio 1s var(--hd-ease) both 1.35s}

/* ───────── celular e telas estreitas ───────── */
@media (max-width:820px), (max-aspect-ratio:1/1){
  :root{--hd-u:1vw;--hd-margem:5.6vw}
  .hd-hero,.hd-palco{min-height:0}
  .hd-palco{width:100%;display:grid;grid-template-columns:minmax(0,1fr);padding-bottom:9vw}

  .hd-nav{position:relative;left:auto;right:auto;top:auto;padding:4.4vw var(--hd-margem) 0}
  .hd-links{display:none}
  .hd-marca{flex-direction:column;align-items:flex-start;gap:.25em;font-size:min(3.1vw,15px);letter-spacing:.13em}
  .hd-marca-casa{font-size:.82em}
  .hd-nav-botao{font-size:min(3.5vw,16px);padding:.62em 1.25em}

  /* o palco da foto: monograma no alto da parede, ela à frente */
  .hd-mono{position:absolute;left:var(--hd-margem);top:21vw;width:57vw}
  .hd-ela{position:relative;left:auto;top:auto;justify-self:end;width:76vw;max-width:none;margin:23vw -4vw 0 0}
  .hd-ela-foto{
    -webkit-mask-image:linear-gradient(180deg,#000 0,#000 37%,rgba(0,0,0,.5) 45%,transparent 51.5%);
            mask-image:linear-gradient(180deg,#000 0,#000 37%,rgba(0,0,0,.5) 45%,transparent 51.5%)}

  .hd-texto{position:relative;left:auto;top:auto;width:auto;padding:0 var(--hd-margem);margin-top:-63vw}
  .hd-titulo{font-size:min(6.55vw,34px);line-height:1.26;letter-spacing:.03em}
  .hd-batida{white-space:normal}
  .hd-batida>span{display:block;white-space:nowrap}
  .hd-batida-2{margin-top:.3em}
  .hd-apoio{max-width:none;text-wrap:pretty;margin-top:3.6vw;font-size:min(4vw,19px);line-height:1.45}
  .hd-acoes{margin-top:4.6vw;gap:5vw;flex-wrap:wrap}
  .hd-botao{font-size:min(4.1vw,19px);padding:1em 1.5em 1em 1.7em}
  .hd-segunda{font-size:min(3.7vw,17px)}
  .hd-prova{margin-top:7.5vw;gap:4.6vw}
  .hd-nota-num{font-size:min(8.4vw,40px)}
  .hd-nota-txt{font-size:min(3.3vw,15px)}
  .hd-fala{padding-left:4.6vw}
  .hd-fala p{font-size:min(4vw,19px)}
  .hd-fala cite{font-size:min(3.2vw,15px)}

  /* plaqueta do registro sob o monograma; o endereço desce para o fim */
  .hd-etiqueta{position:absolute;left:var(--hd-margem);top:62vw;width:27vw;padding-top:2.2vw}
  .hd-etiqueta-nome,.hd-etiqueta-end{display:none}
  .hd-meio{display:none}
  .hd-cro{display:block}
  .hd-etiqueta-reg{margin-top:0 !important;font-size:min(3.1vw,15px);line-height:1.4}
  .hd-onde{display:block;margin:7vw var(--hd-margem) 0;padding-top:4vw;border-top:1px solid color-mix(in oklab,var(--hd-ouro-fundo) 55%,transparent);font-size:min(3.4vw,16px);line-height:1.45;color:var(--hd-cafe-suave);animation:hd-sobe .9s var(--hd-ease) both 1.5s}
}

/* ───────── movimento reduzido ───────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-delay:0s !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;transition-delay:0s !important}
  .hd-parede i{animation:none !important}
}