/* Hero C aprovado — "Escala de cor". Regras escopadas em .hero para não vazarem para as seções. */
.hero{position:relative; isolation:isolate; overflow:hidden; min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto auto 1.15fr auto; background:var(--porcelana)}

/* o chão de porcelana: malha de manchas, interpolada em OKLCH, respirando devagar */
.hero .malha{position:absolute; inset:0; z-index:0; pointer-events:none}
.hero .malha i{position:absolute; border-radius:50%; will-change:transform}
.hero .malha i:nth-child(1){left:-16%; top:-30%; width:74vmax; height:74vmax;
  background:radial-gradient(closest-side, #fbf8f1, #fbf8f100);
  background:radial-gradient(closest-side in oklch, oklch(.981 .011 90), oklch(.981 .011 90 / 0));
  animation:m1 34s ease-in-out infinite alternate}
.hero .malha i:nth-child(2){right:-14%; top:-34%; width:92vmax; height:92vmax;
  background:radial-gradient(closest-side, #cdd8df, #e1e7ea 46%, #e3e9ec00);
  background:radial-gradient(closest-side in oklch, oklch(.858 .021 236), oklch(.915 .012 230) 46%, oklch(.925 .009 228 / 0));
  animation:m2 27s ease-in-out infinite alternate}
.hero .malha i:nth-child(3){right:-18%; bottom:-46%; width:78vmax; height:78vmax;
  background:radial-gradient(closest-side, #e0cfb3, #e6d8c000);
  background:radial-gradient(closest-side in oklch, oklch(.858 .042 84), oklch(.885 .034 86 / 0));
  animation:m3 38s ease-in-out infinite alternate}
.hero .malha i:nth-child(4){left:-20%; bottom:-42%; width:66vmax; height:66vmax;
  background:radial-gradient(closest-side, #efe6d6, #efe6d600);
  background:radial-gradient(closest-side in oklch, oklch(.925 .023 86), oklch(.925 .023 86 / 0));
  animation:m4 23s ease-in-out infinite alternate}
.hero .malha i:nth-child(5){left:38%; top:34%; width:46vmax; height:46vmax;
  background:radial-gradient(closest-side, #f6f1e7, #f6f1e700);
  background:radial-gradient(closest-side in oklch, oklch(.958 .014 88 / .9), oklch(.958 .014 88 / 0));
  animation:m5 29s ease-in-out infinite alternate}
@keyframes m1{to{transform:translate3d(5%,4%,0) scale(1.08)}}
@keyframes m2{to{transform:translate3d(-6%,5%,0) scale(1.06)}}
@keyframes m3{to{transform:translate3d(-5%,-6%,0) scale(1.1)}}
@keyframes m4{to{transform:translate3d(6%,-4%,0) scale(1.07)}}
@keyframes m5{to{transform:translate3d(8%,6%,0) scale(.9)}}

/* a cena 3D entra depois, por cima do chão, sem mexer no texto */
.hero .cena{position:absolute; z-index:1; top:0; right:0; bottom:0; width:66%; pointer-events:none}
.hero .cena canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity 1.4s ease;
  -webkit-mask-image:linear-gradient(to right, transparent, #000 9%); mask-image:linear-gradient(to right, transparent, #000 9%)}
.hero .cena.pronta canvas{opacity:1}
.hero .cena__alvo{position:absolute; left:11.5%; right:4.5%; top:11%; bottom:24.5%}
.hero .legenda{position:absolute; left:var(--base-x,54.8%); top:calc(var(--base-y,70%) + .9rem); transform:translateX(-50%); margin:0; white-space:nowrap;
  font-size:var(--t-pequeno); letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-2); opacity:0; transition:opacity 1.2s ease 1.6s}
.hero .legenda::before{content:""; display:block; width:1px; height:.9rem; margin:0 auto .5rem; background:var(--tinta-2); opacity:.55}
.hero .cena.pronta .legenda{opacity:1}
.hero .cena.sem-webgl canvas{display:none}
/* sem WebGL (ou sem JavaScript): o mesmo leque, parado, renderizado pela própria cena */
.hero .cena.sem-webgl .cena__alvo::after{content:""; position:absolute; inset:-22% -16%; background:url(../img/c-escala-parada.webp) center/contain no-repeat}
.hero .cena.sem-webgl .legenda{opacity:1; transition:none}

/* navegação */
.hero .topo{grid-row:1; position:relative; z-index:4; display:flex; align-items:center; gap:var(--e3); padding:1.35rem var(--margem)}
.hero .marca{display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; margin-right:auto}
.hero .marca svg{width:1.9rem; height:1.9rem; flex:none}
.hero .marca span{font-size:.78rem; font-weight:500; letter-spacing:.3em; text-transform:uppercase; white-space:nowrap}
.hero .topo nav{display:flex; gap:clamp(1rem,2.2vw,2.1rem)}
.hero .topo nav a{font-size:.9rem; text-decoration:none; color:var(--tinta-2); padding:.4rem 0; background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat; transition:background-size .5s var(--curva), color .3s}
.hero .topo nav a:hover{color:var(--tinta); background-size:100% 1px}
.hero .zap{display:inline-flex; align-items:center; gap:.5rem; font-size:.9rem; font-weight:500; text-decoration:none; padding:.6rem 1rem; border:1px solid var(--tinta); border-radius:2px; transition:background .35s, color .35s}
.hero .zap svg{width:1rem; height:1rem}
.hero .zap:hover{background:var(--tinta); color:var(--porcelana)}

/* texto */
.hero .cabeca,.hero .corpo{position:relative; z-index:4; padding-inline:var(--margem)}
.hero .cabeca{grid-row:3}
.hero .corpo{grid-row:4}
.hero .junto{white-space:nowrap}
.hero .sobrelinha{margin:0 0 var(--e3); font-size:.95rem; font-weight:500; letter-spacing:.02em; color:var(--tinta-2); text-wrap:balance}
.hero h1{margin:0; width:max-content; max-width:100%; font-family:var(--f-titulo); font-weight:400; font-size:var(--t-titulo); line-height:1.02; letter-spacing:-.012em}
.hero h1 .linha{display:block; overflow:hidden; padding:.09em 0 .12em; margin:-.09em 0 -.12em; white-space:nowrap}
.hero h1 .linha>span{display:block}
.hero .apoio{margin:var(--e4) 0 0; max-width:min(27em, 34vw); color:var(--tinta-2); text-wrap:balance}
.hero .apoio b{font-weight:500; color:var(--tinta)}
.hero .acoes{display:flex; flex-wrap:wrap; align-items:center; gap:var(--e2) var(--e4); margin-top:var(--e4)}
.hero .nota{margin:0; display:flex; align-items:baseline; gap:.6rem; font-size:.875em; color:var(--tinta-2); line-height:1.3}
.hero .nota b{font-family:var(--f-titulo); font-weight:400; font-size:1.75em; color:var(--tinta); letter-spacing:-.01em}

/* pé do hero: quem assina e o que a paciente disse */
.hero .pe{grid-row:6; position:relative; z-index:4; display:flex; align-items:flex-end; justify-content:space-between; gap:var(--e4); padding:0 var(--margem) 1.9rem}
.hero .assina{display:flex; align-items:center; gap:.9rem}
.hero .assina__foto{flex:none; width:3.5rem; height:3.5rem; border-radius:50%; overflow:hidden; box-shadow:0 0 0 1px var(--fio), var(--sombra-pousada);
  background:radial-gradient(circle at 35% 25%, #f6f1e7, #dccdb4); background:radial-gradient(circle at 35% 25% in oklch, var(--porcelana), var(--marfim-3))}
.hero .assina__foto img{width:100%; height:100%; object-fit:cover}
.hero .assina__txt{display:flex; flex-direction:column; line-height:1.3}
.hero .assina__txt strong{font-family:var(--f-titulo); font-weight:400; font-size:1.12rem; letter-spacing:.01em}
.hero .assina__txt span{font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}
.hero .prova{margin:0; max-width:23rem; text-align:right}
.hero .prova blockquote{margin:0; font-family:var(--f-titulo); font-size:1.16rem; line-height:1.32; text-wrap:balance}
.hero .prova figcaption{margin-top:.45rem; font-size:var(--t-pequeno); letter-spacing:.06em; color:var(--tinta-2)}

/* entrada: uma coisa de cada vez, e para no lugar */
.hero .e{opacity:0; transform:translateY(14px); animation:entra 1s var(--curva) forwards; animation-delay:calc(var(--i,0) * 120ms + 120ms)}
.hero h1 .linha>span{transform:translateY(108%); animation:sobe 1.1s var(--curva) forwards; animation-delay:calc(var(--i,0) * 130ms + 220ms)}
@keyframes entra{to{opacity:1; transform:none}}
@keyframes sobe{to{transform:none}}

/* ───────── celular ───────── */
@media (max-width:860px){
  .hero{display:flex; flex-direction:column}
  .hero .topo{order:1} .hero .cabeca{order:2} .hero .cena{order:3} .hero .corpo{order:4} .hero .pe{order:5}
  .hero .topo{padding:1rem var(--margem)}
  .hero .topo nav{display:none}
  .hero .marca svg{width:1.6rem; height:1.6rem}
  .hero .marca span{font-size:.68rem; letter-spacing:.24em}
  .hero .zap{padding:.5rem .8rem; font-size:.85rem}
  .hero .cabeca{padding-top:clamp(.5rem,2.2svh,1.5rem)}
  .hero .sobrelinha{margin-bottom:.8rem; font-size:clamp(.76rem, 3.45vw, .9rem); letter-spacing:0}
  .hero h1{font-size:clamp(2.45rem, 11.6vw, 3.6rem)}
  .hero .cena{position:relative; top:auto; right:auto; bottom:auto; width:100%; height:clamp(220px, 34.5svh, 330px); margin-top:.25rem; flex:none}
  .hero .cena canvas{inset:-18px 0 -8px; height:calc(100% + 26px);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent); mask-image:linear-gradient(to bottom, transparent, #000 6%, #000 92%, transparent)}
  .hero .cena__alvo{left:4.5%; right:4.5%; top:5%; bottom:19.5%}
  .hero .legenda{left:var(--base-x,50%); top:calc(var(--base-y,80%) + .5rem); font-size:.68rem; letter-spacing:.13em}
  .hero .legenda::before{height:.6rem; margin-bottom:.35rem}
  .hero .apoio{margin-top:1.15rem; line-height:1.55; max-width:34em}
  .hero .acoes{margin-top:1.25rem; gap:var(--e2) var(--e3)}
  .hero .wf-botao{padding:.95rem 1.3rem .95rem 1.15rem}
  .hero .pe{flex-direction:column-reverse; align-items:flex-start; gap:var(--e3); padding-top:var(--e4); padding-bottom:var(--e4)}
  .hero .prova{text-align:left; max-width:none}
}
@media (max-width:860px) and (min-width:600px){
  .hero .cena{height:clamp(300px, 42svh, 460px)}
}
@media (min-width:861px) and (max-height:780px){
  .hero .apoio{margin-top:var(--e3)} .hero .acoes{margin-top:var(--e3)} .hero .sobrelinha{margin-bottom:var(--e2)}
}
@media (min-width:861px) and (max-width:1100px){
  .hero .cena{width:62%}
  .hero .prova{max-width:18rem}
}