/* Hero aprovado (C · Arquitetura do rosto). Seletores prefixados com .hero. */
/* ───────── topo ───────── */
.topo {
  position: absolute; top: 0; left: 0; right: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(1rem, 2.2vw, 1.75rem) var(--margem);
  animation: sobe .9s var(--curva) .05s both;
}
.marca {
  white-space: nowrap;
  display: inline-flex; align-items: baseline; gap: .55rem;
  text-decoration: none;
}
.marca-dra {
  font-family: var(--f-tecnica);
  font-size: .62rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--tinta-2);
}
.marca-nome {
  font-family: var(--f-titulo); font-weight: 300;
  font-size: 1.55rem; line-height: 1; letter-spacing: .01em;
  color: var(--ouro-claro);
}
.nav {
  display: flex; align-items: center; gap: .25rem;
  padding: .3rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--grafite) 62%, transparent);
  border: 1px solid color-mix(in oklab, var(--ouro) 28%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
}
.nav-link, .nav-wpp {
  font-family: var(--f-tecnica);
  font-size: .62rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  padding: .72rem 1.05rem;
  border-radius: 999px;
  transition: background-color .3s, color .3s;
}
.nav-link { color: var(--tinta); }
.nav-link:hover { background: color-mix(in oklab, var(--luz) 10%, transparent); }
.nav-wpp { background: var(--luz); color: var(--grafite); }
.nav-wpp:hover { background: var(--ouro-claro); }
.hero :is(a, .hero button):focus-visible { outline: 2px solid var(--ouro-claro); outline-offset: 3px; }

/* ───────── hero ───────── */
.hero {
  position: relative;
  min-height: max(100svh, 640px);
  isolation: isolate;
  overflow: clip;
  background: var(--grafite);
}

/* malha de manchas radiais (oklab) */
.hero .malha { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero .mancha {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
.hero .m1 { /* grafite levantado, atrás do texto */
  width: 95vmax; height: 95vmax; left: -30vmax; top: -35vmax;
  background: radial-gradient(closest-side in oklab, #2a2c31 0%, #1d1f24cc 38%, #12131600 100%);
  animation-name: deriva-1; animation-duration: 31s;
}
.hero .m2 { /* bege da poltrona, baixo */
  width: 70vmax; height: 70vmax; left: 8vw; bottom: -46vmax;
  background: radial-gradient(closest-side in oklab, #cbbfae3d 0%, #cbbfae14 45%, #cbbfae00 100%);
  animation-name: deriva-2; animation-duration: 37s;
}
.hero .m3 { /* dourado do traço, atrás da prancha */
  width: 52vmax; height: 52vmax; left: 22vw; top: 2vh;
  background: radial-gradient(closest-side in oklab, #c9a25a2e 0%, #c9a25a10 50%, #c9a25a00 100%);
  animation-name: deriva-3; animation-duration: 26s;
}
.hero .m4 { /* luz morna refletida no piso */
  width: 60vmax; height: 60vmax; right: -18vmax; bottom: -30vmax;
  background: radial-gradient(closest-side in oklab, #e9d3ad33 0%, #e9d3ad10 50%, #e9d3ad00 100%);
  animation-name: deriva-4; animation-duration: 29s;
}
.hero .m5 { /* fundo mais profundo, canto */
  width: 80vmax; height: 80vmax; left: -36vmax; bottom: -44vmax;
  background: radial-gradient(closest-side in oklab, #08090bff 0%, #0c0d0f99 50%, #0c0d0f00 100%);
  animation-name: deriva-2; animation-duration: 34s; animation-delay: -12s;
}
@keyframes deriva-1 { to { transform: translate3d(9vw, 7vh, 0) scale(1.08); } }
@keyframes deriva-2 { to { transform: translate3d(-7vw, -6vh, 0) scale(1.12); } }
@keyframes deriva-3 { from { transform: translate3d(-3vw, 4vh, 0) scale(.94); } to { transform: translate3d(5vw, -3vh, 0) scale(1.1); } }
@keyframes deriva-4 { to { transform: translate3d(-8vw, -5vh, 0) scale(1.1); } }

/* ───────── retrato ───────── */
.hero .retrato {
  position: absolute; z-index: -1;
  top: 0; right: 0;
  height: 100%;
  aspect-ratio: 1440 / 1760;
  transform: translateX(var(--ret-x, 14%));
}
.hero .retrato picture, .hero .retrato img { width: 100%; height: 100%; }
.hero .retrato img {
  object-fit: cover; object-position: 50% 0%;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to top, transparent 0%, #000 20%);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent 0%, #000 26%), linear-gradient(to top, transparent 0%, #000 20%);
  mask-composite: intersect;
  animation: acende 1.9s var(--curva) both;
}
/* o disco de luz da foto é a fonte do gradiente: halo que respira */
.hero .halo {
  position: absolute;
  left: 41%; top: 3%;
  width: 175%; aspect-ratio: 1.35;
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(closest-side in oklab, #f3e6cf8c 0%, #e9d3ad45 30%, #cbbfae14 62%, #12131600 100%);
  animation: halo-entra 2.2s var(--curva) .15s both, respira 19s ease-in-out 2.4s infinite alternate;
  pointer-events: none;
}
@keyframes acende {
  0% { opacity: 0; filter: brightness(.18) saturate(.6); transform: scale(1.045); }
  35% { opacity: 1; }
  100% { opacity: 1; filter: none; transform: none; }
}
@keyframes halo-entra { from { opacity: 0; scale: .7; } to { opacity: 1; scale: 1; } }
@keyframes respira {
  from { opacity: 1; scale: 1; }
  to { opacity: .72; scale: 1.08; }
}

/* ───────── prancha (desenho técnico) ───────── */
.hero .prancha {
  position: absolute; z-index: 1;
  margin: 0;
  left: var(--pr-x, calc(var(--margem) + var(--tx-w) + clamp(1rem, 3vw, 3.5rem)));
  top: var(--pr-y, 13%);
  width: var(--pr-w, min(27vw, 48vh));
  pointer-events: none;
  color: var(--ouro);
  container: prancha / inline-size;
}
@container prancha (max-width: 380px) { .hero .c-folha { display: none; } }
.hero .prancha-desenho { position: relative; container-type: inline-size; }
.hero .prancha::before {
  content: ""; position: absolute; z-index: -1;
  inset: -18% -22% -12% -18%;
  background: radial-gradient(closest-side in oklab, #121316b3 0%, #1213166b 55%, #12131600 100%);
  animation: aparece 1.2s ease .2s both;
}
.hero .elevacao { display: block; width: 100%; height: auto; overflow: visible; }

.hero .elevacao .traco, .hero .elevacao .linha-reta, .hero .elevacao .cantos path, .hero .elevacao .faixas line, .hero .elevacao .chao {
  stroke-linecap: round; stroke-linejoin: round;
}
.hero .quadricula { opacity: .11; animation: aparece 2s ease .2s both; }
.hero .cantos path { stroke: var(--luz-2); stroke-width: .9; opacity: .45; animation: aparece .8s ease .25s both; }

.hero .eixo .linha-reta { stroke: var(--luz-2); stroke-width: .7; stroke-dasharray: 16 4 2 4; opacity: .55; }
.hero .eixo-alvo { stroke: var(--luz-2); stroke-width: .7; opacity: .7; animation: aparece .6s ease .3s both; }

.hero .niveis .linha-reta { stroke: var(--luz-2); stroke-width: .6; stroke-dasharray: 3 4; opacity: .42; }
.hero .marcos-nivel path { fill: none; stroke: var(--ouro); stroke-width: .8; opacity: .9; animation: aparece .6s ease .9s both; }
.hero .faixas line { stroke: var(--luz-2); stroke-width: .6; opacity: .32; animation: aparece .8s ease 1s both; }

.hero .linha-reta { transform-box: fill-box; }
.hero .linha-reta.vert { transform-origin: 50% 0; animation: risca-v 1.3s var(--curva) .2s both; }
.hero .linha-reta.horiz { transform-origin: 0 50%; animation: risca-h 1.2s var(--curva) calc(.45s + var(--d, 0s)) both; }
@keyframes risca-v { from { transform: scaleY(0); } }
@keyframes risca-h { from { transform: scaleX(0); } }

.hero .traco {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: desenha var(--dur, 1.4s) var(--curva) var(--atraso, .6s) forwards;
}
@keyframes desenha { to { stroke-dashoffset: 0; } }

.hero .construcao .traco { stroke: var(--luz-2); stroke-width: .55; opacity: .34; --dur: 1.6s; --atraso: .4s; }
.hero .construcao .traco:nth-child(2) { --atraso: .6s; }
.hero .construcao .traco:nth-child(3) { --atraso: .55s; }
.hero .construcao .traco:nth-child(4) { --atraso: .75s; }
.hero .cruz { stroke: var(--ouro-claro); stroke-width: .7; opacity: .8; animation: aparece .5s ease 1.2s both; }

.hero .rosto .contorno { stroke: var(--luz); stroke-width: 1.15; opacity: .92; --dur: 1.7s; --atraso: .55s; }
.hero .rosto .feicao { stroke: var(--luz-2); stroke-width: .8; opacity: .62; --dur: .9s; --atraso: 1.2s; }

.hero .estrutura .traco { stroke: var(--ouro); stroke-width: 1.05; --dur: .9s; --atraso: 1.35s; }
.hero .estrutura[data-parte="mandibula"] .traco { --atraso: 1.5s; --dur: 1s; }
.hero .estrutura[data-parte="mento"] .traco { --atraso: 1.7s; --dur: .7s; }
.hero .placa { fill: var(--ouro); opacity: .9; transform-box: fill-box; transform-origin: 50% 50%; animation: placa .6s var(--curva) 1.3s both; }
.hero .pilar, .hero .viga { opacity: .55; animation: hachura .9s ease 1.75s both; }
.hero .chao { stroke: var(--ouro); stroke-width: .7; opacity: .7; animation: aparece .6s ease 2s both; }
.hero .no { fill: var(--grafite); stroke: var(--ouro-claro); stroke-width: .9; animation: aparece .4s ease 1.9s both; }
@keyframes placa { from { transform: scaleX(0); } }
@keyframes hachura { from { opacity: 0; } }
@keyframes aparece { from { opacity: 0; } }

.hero .chamadas .traco { stroke: var(--luz-2); stroke-width: .6; opacity: .65; --dur: .8s; --atraso: 1.85s; }

/* estado ativo (ciclo lento) */
.hero .estrutura, .hero .chamadas .traco, .hero .niveis, .hero .rotulo { transition: opacity .9s ease, color .9s ease, filter .9s ease; }
.hero .estrutura .traco, .hero .placa, .hero .no { transition: stroke .9s, fill .9s; }
.hero .prancha.ciclo .estrutura:not(.ativo) { opacity: .62; }
.hero .prancha.ciclo .estrutura.ativo .traco { stroke: var(--ouro-claro); }
.hero .prancha.ciclo .estrutura.ativo { filter: drop-shadow(0 0 5px #c9a25a66); }
.hero .prancha.ciclo .niveis.ativo .linha-reta { opacity: .75; }

/* rótulos (HTML, para não encolher com o desenho) */
.hero .rotulo {
  position: absolute;
  font-family: var(--f-tecnica);
  font-size: clamp(.5rem, 2.75cqi, .7rem);
  line-height: 1.15;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bege);
  white-space: nowrap;
  animation: aparece .9s ease 2s both;
}
.hero .rotulo small { display: block; margin-top: .55em; font-size: .86em; letter-spacing: .12em; color: var(--ouro); }
.hero .prancha.ciclo .rotulo[data-parte].ativo { color: var(--luz); }
.hero .r-eixo { left: 43.4%; top: 2.9%; transform: translateY(-50%); font-size: clamp(.46rem, 2.2cqi, .58rem); color: var(--tinta-2); animation-delay: .9s; }
.hero .r-terco-titulo { left: 3.6%; top: 13.2%; transform: translateY(-100%); font-size: clamp(.4rem, 1.9cqi, .54rem); color: var(--tinta-2); }
.hero .r-terco { left: 9.8%; transform: translate(-50%, -50%) rotate(-90deg); font-size: clamp(.4rem, 1.9cqi, .54rem); letter-spacing: .2em; }
@container (max-width: 330px) { .hero .r-terco { display: none; } }
.hero .t1 { top: 27.1%; } .hero .t2 { top: 46.8%; } .hero .t3 { top: 66.4%; }
.hero .r-lado { left: 72.9%; transform: translateY(-1.2em); }
.hero .r-malar { top: 42.8%; }
.hero .r-mand { top: 60%; }
.hero .r-mento { top: 83.93%; }

/* carimbo da prancha */
.hero .carimbo {
  display: grid;
  grid-template-columns: max-content 1fr max-content;
  margin-top: .9rem;
  border: 1px solid color-mix(in oklab, var(--luz-2) 30%, transparent);
  font-family: var(--f-tecnica);
  font-size: .5rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tinta-2);
  animation: aparece 1s ease 2.2s both;
}
.hero .carimbo-cel { padding: .55rem .7rem .6rem; border-right: 1px solid color-mix(in oklab, var(--luz-2) 22%, transparent); }
.hero .carimbo-cel:last-of-type { border-right: 0; }
.hero .carimbo-cel b { display: block; margin-top: .35rem; font-weight: 400; font-size: 1.18em; color: var(--luz-2); letter-spacing: .14em; }
.hero .carimbo-ativo { display: none; }

/* ───────── texto ───────── */
.hero .texto {
  position: relative; z-index: 2;
  width: var(--tx-w);
  margin-left: var(--margem);
  min-height: max(100svh, 640px);
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(5.5rem, 13vh, 8rem) 0 clamp(2rem, 6vh, 4rem);
}
.hero .sobre {
  display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center; gap: .55rem .9rem;
  margin: 0 0 clamp(1rem, 3vh, 1.75rem);
  font-family: var(--f-tecnica);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--ouro-claro);
  animation: sobe .9s var(--curva) .25s both;
}
.hero .sobre::before { content: ""; grid-row: 1; width: 1.75rem; height: 1px; background: currentColor; opacity: .7; }
.hero .sobre .sep { display: none; }
.hero .sobre span:last-child { grid-column: 2; }

.hero .titulo {
  margin: 0;
  font-family: var(--f-titulo);
  font-weight: 300;
  font-size: var(--t-titulo);
  line-height: 1.04;
  letter-spacing: -.012em;
  color: var(--tinta);
  text-wrap: pretty;
}
.hero .titulo .p { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .14em; margin-bottom: -.14em; }
.hero .titulo .p > span { display: inline-block; animation: palavra 1.1s var(--curva) both; animation-delay: calc(.32s + var(--i, 0) * .06s); }
.hero .titulo .grupo { white-space: nowrap; }
.hero .titulo .p.luz > span { color: var(--luz-2); font-weight: 400; }
@keyframes palavra { from { transform: translateY(108%); } }

.hero .apoio {
  margin: clamp(1rem, 2.6vh, 1.6rem) 0 0;
  max-width: 30rem;
  font-size: var(--t-apoio);
  font-weight: 300;
  line-height: 1.55;
  color: var(--tinta-2);
  animation: sobe 1s var(--curva) 1.05s both;
}
.hero .assinatura {
  display: flex; flex-direction: column; gap: .3rem;
  margin: clamp(1.1rem, 3vh, 1.9rem) 0 0;
  padding-left: 1rem;
  border-left: 1px solid var(--ouro);
  animation: sobe 1s var(--curva) 1.15s both;
}
.hero .ass-nome { font-size: 1.3rem; font-weight: 400; line-height: 1.1; color: var(--tinta); }
.hero .ass-reg { font-family: var(--f-tecnica); font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-2); }

.hero .acoes {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1.6rem;
  margin-top: clamp(1.25rem, 3.4vh, 2.1rem);
  animation: sobe 1s var(--curva) 1.25s both;
}
.hero .botao {
  display: inline-flex; align-items: center; gap: .85rem;
  padding: 1.05rem 1.5rem 1.05rem 1.6rem;
  border-radius: 999px;
  background: var(--luz);
  color: var(--grafite);
  font-family: var(--f-tecnica);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  box-shadow: 0 0 0 1px #f3e6cf, 0 14px 40px -12px #e9d3ad66;
  transition: background-color .35s, box-shadow .35s, transform .35s var(--curva);
}
.hero .botao svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
.hero .botao:hover { background: var(--ouro-claro); box-shadow: 0 0 0 1px var(--ouro-claro), 0 18px 46px -12px #c9a25a88; transform: translateY(-2px); }
.hero .secundario {
  display: inline-flex; gap: .45rem; align-items: center;
  font-family: var(--f-tecnica);
  font-size: .62rem; letter-spacing: .16em; text-transform: lowercase;
  color: var(--tinta);
  text-decoration: none;
  padding: .5rem 0;
  border-bottom: 1px solid color-mix(in oklab, var(--ouro) 60%, transparent);
}
.hero .secundario span { color: var(--ouro-claro); }
.hero .secundario:hover { color: var(--luz); border-color: var(--luz); }

.hero .prova {
  margin: clamp(1.5rem, 4.4vh, 2.75rem) 0 0;
  display: grid; gap: .35rem;
  animation: sobe 1s var(--curva) 1.4s both;
}
.hero .nota { display: flex; align-items: baseline; flex-wrap: wrap; gap: .25rem .7rem; margin: 0; }
.hero .nota-num { font-size: 1.6rem; line-height: 1; font-weight: 400; color: var(--luz); }
.hero .estrelas { color: var(--ouro); letter-spacing: .14em; font-size: .78rem; }
.hero .nota-txt { font-family: var(--f-tecnica); font-size: .56rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }
.hero .prova blockquote { margin: .35rem 0 0; font-size: 1.12rem; font-weight: 300; font-style: italic; line-height: 1.4; color: var(--tinta); }
.hero .prova figcaption { font-family: var(--f-tecnica); font-size: .52rem; letter-spacing: .16em; text-transform: uppercase; color: var(--tinta-2); }

@keyframes sobe { from { opacity: 0; transform: translateY(14px); } }

/* âncoras do resto do site (fora do escopo do hero) */
#protocolo, #onde { scroll-margin-top: 6rem; }

/* ───────── notebook baixo / tablet deitado ───────── */
@media (min-width: 901px) and (orientation: landscape) and (max-width: 1180px) {
  :root { --t-titulo: clamp(2rem, min(3.9vw, 6.2vh), 3rem); }
  :root { --tx-w: 35vw; }
  .hero .retrato { --ret-x: 21%; }
  .hero .apoio { font-size: 1.02rem; }
  .hero .c-folha { display: none; }
}

/* ───────── retrato em pé: tablet e celular ───────── */
@media (max-width: 900px), (orientation: portrait) {
  :root {
    --t-titulo: clamp(2.3rem, 9vw, 3.4rem);
    --foto-h: min(58svh, 128vw);
  }
  .topo { padding-top: .9rem; }
  .nav-link { display: none; }
  .nav { padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .nav-wpp { padding: .78rem 1rem; box-shadow: 0 8px 24px -10px #000a; }
  .marca-dra { font-size: .52rem; letter-spacing: .18em; }
  .marca { padding: .45rem .8rem .45rem .7rem; border-radius: 999px; background: color-mix(in oklab, var(--grafite) 62%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid color-mix(in oklab, var(--ouro) 24%, transparent); }
  .marca-nome { font-size: 1.3rem; }

  .hero .retrato {
    left: 0; right: 0; top: 0;
    width: 100%; height: var(--foto-h);
    aspect-ratio: auto;
    transform: none;
  }
  .hero .retrato img {
    object-position: var(--ret-pos, 30% 0%);
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 34%);
    mask-image: linear-gradient(to top, transparent 0%, #000 34%);
  }
  .hero .halo { left: 46%; top: 0%; width: 190%; }

  .hero .prancha {
    left: var(--pr-x, 2.5vw);
    top: calc(var(--foto-h) * .21);
    width: var(--pr-w, min(35vw, 15rem));
  }
  .hero .prancha::before {
    content: ""; position: absolute; z-index: -1;
    inset: -30% -40% -20% -30%;
    background: radial-gradient(closest-side in oklab, #121316e6 0%, #121316b3 55%, #12131600 100%);
    animation: aparece 1s ease .3s both;
  }
  .hero .rotulo { display: none; }
  .hero .carimbo { grid-template-columns: 1fr; margin-top: .4rem; border: 0; font-size: .46rem; }
  .hero .carimbo-cel { display: none; }
  .hero .carimbo-ativo { display: flex; align-items: center; gap: .5rem; color: var(--luz-2); line-height: 1.3; }
  .hero .carimbo-ativo i { flex: none; width: .9rem; height: 1px; background: var(--ouro); }

  .hero .texto {
    width: auto;
    min-height: 0;
    margin: 0;
    padding: calc(var(--foto-h) - 3.2rem) var(--margem) 2.5rem;
    justify-content: flex-start;
  }
  .hero .apoio { font-size: 1.05rem; max-width: 34rem; }
}
@media (max-width: 380px) {
  .marca { gap: .4rem; padding: .42rem .7rem .42rem .62rem; }
  .marca-dra { font-size: .48rem; letter-spacing: .14em; }
  .marca-nome { font-size: 1.15rem; }
  .nav-wpp { padding: .72rem .85rem; font-size: .56rem; letter-spacing: .12em; }
}
@media (max-width: 420px) {
  :root { --foto-h: min(57svh, 132vw); }
  .hero .sobre { font-size: .55rem; letter-spacing: .16em; margin-bottom: .8rem; }
  .hero .apoio { display: none; }
  .hero .assinatura { margin-top: 1rem; }
  .hero .acoes { margin-top: 1.2rem; gap: .8rem 1.2rem; }
  .hero .botao { padding: .95rem 1.25rem; font-size: .62rem; }
  .hero .prova { margin-top: 1.6rem; }
}
@media (orientation: portrait) and (min-width: 600px) {
  :root { --foto-h: 60svh; --t-titulo: clamp(2.6rem, 6.4vw, 3.6rem); }
  .hero .texto { max-width: 44rem; }
  .hero .prancha { width: 30vw; top: calc(var(--foto-h) * .2); }
}

/* pausa fora da tela */
.hero.fora .mancha, .hero.fora .halo { animation-play-state: paused; }


@media (prefers-reduced-motion: reduce) { .hero .traco { stroke-dashoffset: 0; } }