/* Hero C · "Não abro mão" (aprovado em 09/10/2026, sem ajustes). Classes próprias do hero: não reaproveitar nas seções. */
/* variáveis próprias do hero (as gerais estão em base.css) */
:root{
  --t-titulo:var(--t-hero);
  --t-apoio:clamp(1rem, .5vw + .65rem, 1.125rem);
  --arco-alt:clamp(120px, 28.9vh - 84px, 184px);
}

/* ───────── o hero ───────── */
.hero{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:100vh;min-height:100svh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-rows:auto minmax(8px,1fr) auto auto auto auto minmax(12px,1.1fr) auto auto;
  grid-template-areas:
    "nav nav"
    ". ."
    "assina assina"
    "titulo titulo"
    "apoio apoio"
    "acoes acoes"
    ". ."
    "medida medida"
    "fala prova";
  padding:0 var(--margem) clamp(16px,2.8vh,28px);
}
.hero > *{min-width:0}
.nav,.assina,.titulo,.apoio,.acoes,.medida,.fala,.prova{position:relative;z-index:3}

/* ───────── a noite: malha que respira ───────── */
.malha{position:absolute;inset:0;z-index:0;overflow:hidden;background:var(--noite)}
.malha i{position:absolute;display:block;border-radius:50%;filter:blur(28px);will-change:transform}
/* petróleo, atrás do título */
.malha i:nth-child(1){
  left:-24vmax;top:-10vmax;width:80vmax;height:64vmax;
  background:radial-gradient(closest-side in oklch,rgb(13 70 81 / .95) 0%,rgb(11 58 67 / .62) 44%,rgb(6 38 44 / 0) 100%);
  animation:respira-1 34s ease-in-out infinite alternate;
}
/* azul de campo, baixo: sobe do avental */
.malha i:nth-child(2){
  right:-18vmax;bottom:-34vmax;width:76vmax;height:62vmax;
  background:radial-gradient(closest-side in oklch,rgb(45 111 176 / .44) 0%,rgb(30 78 124 / .24) 48%,rgb(6 38 44 / 0) 100%);
  animation:respira-2 27s ease-in-out infinite alternate;
}
/* o clarão frio do foco, no alto à direita, atrás dele */
.malha i:nth-child(3){
  right:-14vmax;top:-24vmax;width:62vmax;height:56vmax;
  background:radial-gradient(closest-side in oklch,rgb(159 211 230 / .52) 0%,rgb(86 158 178 / .26) 44%,rgb(6 38 44 / 0) 100%);
  animation:respira-3 22s ease-in-out infinite alternate;
}
/* verde-petróleo do logo, embaixo à esquerda */
.malha i:nth-child(4){
  left:-20vmax;bottom:-38vmax;width:66vmax;height:58vmax;
  background:radial-gradient(closest-side in oklch,rgb(11 77 87 / .78) 0%,rgb(9 60 69 / .36) 50%,rgb(6 38 44 / 0) 100%);
  animation:respira-4 38s ease-in-out infinite alternate;
}
/* um poço de noite entre o texto e a foto */
.malha i:nth-child(5){
  left:34%;top:26%;width:40vmax;height:50vmax;
  background:radial-gradient(closest-side in oklch,rgb(4 27 32 / .86) 0%,rgb(4 27 32 / .42) 55%,rgb(6 38 44 / 0) 100%);
  animation:respira-5 30s ease-in-out infinite alternate;
}
@keyframes respira-1{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(5vmax,3vmax,0) scale(1.12)}}
@keyframes respira-2{from{transform:translate3d(0,0,0) scale(1.06)}to{transform:translate3d(-6vmax,-3vmax,0) scale(.94)}}
@keyframes respira-3{from{transform:translate3d(0,0,0) scale(.94);opacity:.82}to{transform:translate3d(-3vmax,2.5vmax,0) scale(1.1);opacity:1}}
@keyframes respira-4{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(6vmax,-4vmax,0) scale(1.14)}}
@keyframes respira-5{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-4vmax,3vmax,0) scale(1.1)}}

.hero.pausa .malha i,.hero.pausa .foto-luz{animation-play-state:paused}

.grao{display:none}

/* ───────── a foto ───────── */
.foto{
  position:absolute;z-index:1;margin:0;pointer-events:none;
  top:-2%;right:-2.5vw;height:min(126%, 80vw, 150vh);height:min(126%, 80vw, 150svh);aspect-ratio:9/16;
}
.foto img{
  --m1:radial-gradient(ellipse 80% 64% at 60% 30%,#000 50%,rgb(0 0 0 / .55) 74%,transparent 100%);
  --m2:linear-gradient(180deg,#000 0%,#000 49%,rgb(0 0 0 / .5) 62%,transparent 80%);
  --m3:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .35) 9%,#000 24%);
  display:block;width:100%;height:100%;max-width:none;object-fit:cover;
  -webkit-mask-image:var(--m1),var(--m2),var(--m3);mask-image:var(--m1),var(--m2),var(--m3);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
/* a luz do foco passa na frente dele: é o mesmo clarão da malha */
.foto-luz{
  position:absolute;right:-8%;top:-14%;width:86%;height:46%;border-radius:50%;
  background:radial-gradient(closest-side in oklch,rgb(159 211 230 / .20) 0%,rgb(120 185 205 / .08) 50%,rgb(6 38 44 / 0) 100%);
  mix-blend-mode:screen;
  animation:respira-3 22s ease-in-out infinite alternate;
}
.js .foto img{opacity:0;transform:scale(1.035);transform-origin:60% 30%}
.js .foto.ok img{opacity:1;transform:none;transition:opacity 1.5s ease,transform 2.6s var(--ease)}

/* ───────── navegação ───────── */
.nav{
  grid-area:nav;display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);
  padding-block:clamp(16px,2.6vh,24px);
}
.marca{display:flex;align-items:center;gap:12px;color:var(--pedra);text-decoration:none}
.marca-simbolo,.marca-letreiro{display:block;background:currentColor}
.marca-simbolo{
  width:34px;aspect-ratio:636/627;
  -webkit-mask:url(../img/logo-ueda-simbolo.svg) center/contain no-repeat;
  mask:url(../img/logo-ueda-simbolo.svg) center/contain no-repeat;
}
.marca-letreiro{
  height:17px;aspect-ratio:823/209;
  -webkit-mask:url(../img/logo-ueda-letreiro.svg) center/contain no-repeat;
  mask:url(../img/logo-ueda-letreiro.svg) center/contain no-repeat;
}
.nav-links{margin-left:auto;display:flex;gap:clamp(18px,2.2vw,32px);list-style:none}
.nav-links a{
  font-size:.9375rem;letter-spacing:.01em;color:var(--pedra-forte);text-decoration:none;
  padding:8px 0;border-bottom:1px solid transparent;transition:border-color .25s,color .25s;
  text-shadow:0 1px 12px rgb(4 27 32 / .7);
}
.nav-links a:hover{color:var(--pedra);border-bottom-color:var(--ciano)}
.nav-agendar{
  display:inline-flex;align-items:center;height:40px;padding:0 18px;
  border:1px solid rgb(239 231 218 / .5);border-radius:6px;
  font-size:.9375rem;font-weight:600;letter-spacing:.02em;color:var(--pedra);text-decoration:none;
  background:rgb(6 38 44 / .38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .25s,border-color .25s,color .25s;
}
.nav-agendar:hover{background:var(--pedra);border-color:var(--pedra);color:var(--noite)}

/* ───────── nome e registro ───────── */
.assina{
  grid-area:assina;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px;
  font-size:var(--t-mini);line-height:1.35;letter-spacing:.12em;text-transform:uppercase;
  margin-bottom:clamp(10px,1.8vh,18px);
}
.assina strong{font-weight:700;color:var(--pedra)}
.assina-reg{color:var(--pedra-media);font-variant-numeric:tabular-nums}
.assina-reg i{font-style:normal;color:var(--ciano);opacity:.8;padding:0 .2em}
.assina-reg span{white-space:nowrap}

/* ───────── título ───────── */
.titulo{
  grid-area:titulo;margin:0;
  font:500 var(--t-titulo)/.9 var(--f-titulo);
  letter-spacing:-.004em;color:var(--pedra);
  text-shadow:0 2px 40px rgb(4 27 32 / .55);
}
.titulo .p{display:inline-block}
.titulo br.q3{display:none}

/* ───────── apoio ───────── */
.apoio{
  grid-area:apoio;max-width:min(40em, 52vw);text-wrap:pretty;margin-top:var(--passo);
  font-size:var(--t-apoio);line-height:1.52;color:var(--pedra-media);
}
.apoio strong{font-weight:600;color:var(--pedra)}

/* ───────── ações ───────── */
.acoes{grid-area:acoes;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:var(--passo)}
.botao{
  display:inline-flex;align-items:center;gap:.65em;height:54px;padding:0 1.5em 0 1.2em;
  background:var(--pedra);color:var(--noite);border-radius:6px;
  font:700 1rem/1 var(--f-texto);letter-spacing:.01em;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 30px -14px rgb(159 211 230 / .55);
  transition:background .25s,transform .25s var(--ease),box-shadow .25s;
}
.botao:hover{background:#fff;transform:translateY(-1px);box-shadow:0 14px 34px -14px rgb(159 211 230 / .75)}
.botao svg{flex:none}
.segunda{
  font-weight:600;font-size:1rem;color:var(--pedra);text-decoration:none;white-space:nowrap;
  padding:6px 0;border-bottom:1px solid rgb(159 211 230 / .55);transition:border-color .25s;
}
.segunda::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.55em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.2em) rotate(45deg)}
.segunda:hover{border-bottom-color:var(--pedra)}
.fone{font-size:.9375rem;color:var(--pedra-baixa);font-variant-numeric:tabular-nums;letter-spacing:.02em;white-space:nowrap}

/* ───────── o relógio ───────── */
.medida{grid-area:medida}
.arco{position:relative;width:100%;height:var(--arco-alt)}
.arco svg{position:absolute;left:0;top:0;display:block;overflow:visible}
.arco-texto{font-size:.9375rem;color:var(--pedra-media)}

.a-base{fill:none;stroke:var(--pedra);stroke-opacity:.30;stroke-width:1}
.a-resto{fill:none;stroke:var(--pedra);stroke-opacity:.5;stroke-width:1}
.a-tick{stroke:var(--pedra);stroke-opacity:.40;stroke-width:1}
.a-tick.hora{stroke-opacity:.78}
.a-tick.fora{stroke-opacity:.22}
.a-tick.hora.fora{stroke-opacity:.38}
.a-num{fill:var(--pedra);fill-opacity:.80;font-family:var(--f-texto);font-weight:500;font-variant-numeric:tabular-nums}
.a-num.fora{fill-opacity:.42}
.a-num.seis{fill:var(--ambar);fill-opacity:1;font-weight:700}
.a-s1,.a-s2{fill:none;stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.a-s1{stroke:var(--ciano)}
.a-s2{stroke:var(--pedra)}
.a-brilho{filter:url(#c-brilho);stroke-width:5;opacity:.55}
.a-limite{stroke:var(--ambar);stroke-width:1.5;stroke-linecap:round}
.a-losango{fill:var(--ambar)}
.a-halo{fill:var(--ambar);opacity:.34}
.a-rot{fill:var(--pedra);font-family:var(--f-titulo);font-weight:500;letter-spacing:.055em;text-rendering:geometricPrecision}
.a-rot .h{fill:var(--ciano)}
.a-r2 .h{fill:var(--pedra);fill-opacity:.82}
.a-r3{fill-opacity:.66}
.a-para{fill:var(--ambar);font-family:var(--f-titulo);font-weight:600;letter-spacing:.06em}

/* entrada do arco: um trecho, depois o outro, depois a marca. Uma vez só. */
.arco.anim .g-base{opacity:0}
.arco.anim .a-s1,.arco.anim .a-s2{stroke-dashoffset:1}
.arco.anim .a-r1,.arco.anim .a-r2,.arco.anim .a-r3,.arco.anim .a-para,.arco.anim .g-limite{opacity:0}
.arco.anim .a-num.seis{fill:var(--pedra);fill-opacity:.8}
.arco.anim.on .g-base{animation:surgir .9s ease both}
.arco.anim.on .a-s1{animation:tracar .95s var(--ease-traco) .45s both}
.arco.anim.on .a-r1{animation:surgir .6s ease 1.1s both}
.arco.anim.on .a-s2{animation:tracar .95s var(--ease-traco) 1.4s both}
.arco.anim.on .a-r2{animation:surgir .6s ease 2.05s both}
.arco.anim.on .g-limite{animation:pousar .5s var(--ease) 2.35s both}
.arco.anim.on .a-num.seis{animation:acender .5s ease 2.4s both}
.arco.anim.on .a-para{animation:surgir .6s ease 2.6s both}
.arco.anim.on .a-r3{animation:surgir-baixo .8s ease 2.85s both}
@keyframes surgir{from{opacity:0}to{opacity:1}}
@keyframes surgir-baixo{from{opacity:0}to{opacity:1}}
@keyframes tracar{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes pousar{from{opacity:0;transform:scale(.2)}to{opacity:1;transform:scale(1)}}
@keyframes acender{from{fill:var(--pedra);fill-opacity:.8}to{fill:var(--ambar);fill-opacity:1}}

/* ───────── a fala dele e a prova ───────── */
.fala,.prova{margin-top:clamp(6px,1.2vh,12px);max-width:34em}
.fala{grid-area:fala}
.fala-dele{font-style:italic;font-size:1rem;line-height:1.4;color:var(--pedra-forte)}
.legenda{margin-top:4px;font-size:var(--t-mini);letter-spacing:.04em;color:var(--pedra-baixa)}
.prova{grid-area:prova;justify-self:end;text-align:right}
.prova blockquote{font-size:1rem;line-height:1.4;color:var(--pedra-forte)}
.prova figcaption{margin-top:4px;font-size:var(--t-mini);letter-spacing:.04em;color:var(--pedra-baixa)}

/* ───────── entrada (dois primeiros segundos) ───────── */
@keyframes chegar{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:none}}
@keyframes palavra{from{opacity:0;transform:translate3d(0,.3em,0)}to{opacity:1;transform:none}}
.nav{animation:chegar .8s var(--ease) .05s both}
.assina{animation:chegar .8s var(--ease) .18s both}
.titulo .p{animation:palavra .9s var(--ease) both;animation-delay:calc(.3s + var(--i) * 70ms)}
.apoio{animation:chegar .8s var(--ease) .95s both}
.acoes{animation:chegar .8s var(--ease) 1.1s both}
.fala{animation:chegar .8s var(--ease) 1.4s both}
.prova{animation:chegar .8s var(--ease) 1.55s both}

/* ───────── telas largas e baixas ───────── */
@media (min-width:821px) and (max-height:700px){
  :root{--arco-alt:118px}
}

/* ───────── celular: a foto sobe, o arco vem logo abaixo do título ───────── */
@media (max-width:820px){
  :root{
    --t-titulo:clamp(3.4rem, 17.9vw, 5.6rem);
    --arco-alt:112px;
    --foto-larg:min(88vw, 430px);
    --foto-topo:40px;
  }
  .hero{
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto calc(var(--foto-topo) + var(--foto-larg) * 1.005 - 46px) auto auto auto auto auto auto;
    grid-template-areas:"nav" "assina" "titulo" "medida" "fala" "apoio" "acoes" "prova";
    padding-bottom:28px;
  }
  .nav{padding-block:10px;min-height:60px}
  .nav-links{display:none}
  .nav-agendar{margin-left:auto;height:38px;padding:0 16px}
  .marca-simbolo{width:30px}
  .marca-letreiro{height:15px}

  .foto{top:var(--foto-topo);right:calc(var(--foto-larg) * -.115);width:var(--foto-larg);height:auto}
  .apoio{max-width:40em}
  .foto img{
    --m1:radial-gradient(ellipse 82% 60% at 56% 30%,#000 54%,rgb(0 0 0 / .5) 78%,transparent 100%);
    --m2:linear-gradient(180deg,transparent 0%,#000 6%,#000 54%,rgb(0 0 0 / .45) 62%,transparent 74%);
    --m3:linear-gradient(90deg,transparent 0%,rgb(0 0 0 / .4) 10%,#000 26%);
  }

  /* nome e registro: plaqueta à esquerda do rosto, na base da foto */
  .assina{
    align-self:end;justify-self:start;flex-direction:column;gap:1px;
    margin:0 0 12px;font-size:.6875rem;letter-spacing:.1em;
    text-shadow:0 1px 10px rgb(4 27 32 / .9);
  }
  .assina strong{font-size:.875rem;font-weight:600;letter-spacing:.01em;text-transform:none;margin-bottom:4px}
  .assina-reg{display:flex;flex-direction:column}
  .assina-reg i{display:none}

  .titulo{line-height:.9}
  .titulo br.q3{display:inline}
  .titulo br.q2{display:none}

  .medida{margin-top:10px}
  .fala{margin-top:6px}
  .fala-dele{font-size:.9375rem}
  .apoio{margin-top:22px;font-size:1rem}
  .acoes{margin-top:20px;gap:14px 22px}
  .botao{width:100%;justify-content:center;height:56px}
  .prova{justify-self:start;text-align:left;margin-top:26px;padding-top:18px;border-top:1px solid var(--fio);width:100%;max-width:none}

  .malha i{filter:blur(18px)}
  .foto-luz{animation:none}
  .malha i:nth-child(3){right:-36vw;top:-30vw;width:128vw;height:118vw}
  .malha i:nth-child(5){left:-20%;top:38%;width:120vw;height:90vw}
}

/* tablet em pé: mesma ordem do celular, com mais foto e botão na medida */
@media (min-width:600px) and (max-width:820px){
  :root{--foto-larg:min(64vw, 540px);--margem:40px}
  .botao{width:auto}
  .prova{margin-top:30px}
}
/* telas muito estreitas: a plaqueta do nome não encosta no rosto */
@media (max-width:340px){
  .assina{font-size:.625rem;letter-spacing:.08em}
  .assina strong{font-size:.8125rem}
}