/* Hero H01 · Digitou, tá no ar — porte do hero da landing v03 (site/motion.css) para a EFOR® STUDIO, em fundo claro.
   O hero é uma tela de design: o endereço é digitado, o site se monta em blocos e dois cursores (Luca e você) trocam
   o estilo ao vivo (motion/hero.js). Cores do kit: papel, tinta e branco. O verde entra só como preenchimento com
   tinta por cima (grifo do preço, botão do esqueleto, flash do endereço, rótulo e alças da seleção) ou com contorno
   tinta (linha de pintura); traço fino, cursor de texto e barra de carga são tinta.
   Estados iniciais de animação só valem com html.js (colocada no <head>); sem JavaScript, ou se o motor falhar,
   tudo aparece no estado final. O hero anterior (pilha de sites em 3D) está em output/efor-site-v01/site-efor-v02-pilha3d/. */

/* O hero passa por baixo do cabeçalho (position absolute), para a grade de pontos começar no topo da página.
   Grade de pontos como na origem (decisão do Dico: fundo claro com pontinhos): pontos em tinta a 20% (o mesmo contraste do
   cinza da origem sobre o creme), núcleo de 2,3 px, um a cada 26 px, com a máscara que apaga a grade perto das bordas. */
.h01{--topo-h:calc(clamp(18px,2.4vw,34px) + 62px);position:relative;height:max(700px,100svh);max-height:1240px;overflow:hidden;display:flex;flex-direction:column;isolation:isolate;padding-top:var(--topo-h)}
.h01-grade{position:absolute;inset:-60px;z-index:-1;background-image:radial-gradient(circle,rgba(22,24,21,.2) 1.15px,transparent 1.7px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 40%,#000 30%,transparent 88%);mask-image:radial-gradient(ellipse 78% 72% at 50% 40%,#000 30%,transparent 88%);will-change:transform}

/* Texto: mesma margem lateral do cabeçalho (--margem, em estilo.css). Em tela mais baixa que o hero (700 px), o respiro de baixo
   cresce para a coluna ficar centrada na parte visível. */
.h01-copy{position:relative;z-index:3;flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;width:calc(100% - 2 * var(--margem));margin-inline:auto;padding-bottom:max(36px,6vh,calc(max(700px,100svh) - 100svh + 28px))}
.h01-olho{color:var(--cinza-escuro);margin-bottom:26px}
/* O ponto verde ganha contorno tinta: verde solto não lê sobre o papel. */
.h01-olho::before{box-shadow:0 0 0 1.5px var(--tinta)}
/* Título da origem, no tamanho da origem (com um teto pela altura, para tela muito larga e baixa). */
.h01-titulo{font-size:clamp(52px,min(5.6vw,calc(max(700px,100svh) * .112)),116px);line-height:.95}
.hl{display:block;overflow:hidden;padding:.03em .1em .1em;margin:-.03em -.1em -.1em}
.hl>span{display:inline-block;white-space:nowrap;will-change:transform}
/* No lugar da faísca da origem: a letra E do lettering, em tinta, num disco verde; entra girando como a faísca. */
.h01-enfeite{display:inline-grid;place-items:center;width:.58em;height:.58em;margin-left:.12em;border-radius:50%;background:var(--verde);vertical-align:.14em}
.h01-enfeite svg{width:54%;height:54%;fill:var(--tinta)}
/* Grifo do preço: faixa verde atrás do texto em tinta (o mesmo desenho de .grifo), num elemento próprio para se pintar com transform. */
.h01-grifo{position:relative;display:inline-block;isolation:isolate}
.h01-grifo i{position:absolute;z-index:-1;left:-.06em;right:-.06em;top:42%;bottom:3%;background:var(--verde);transform-origin:0 50%}
.h01-sub{margin-top:26px;font-size:clamp(15.5px,1.2vw,18px);line-height:1.5;color:var(--cinza-escuro);max-width:23.5em;text-wrap:pretty}
.h01-acoes{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.h01-acoes .link{font-size:15px}
/* Preço: o mesmo desenho do bloco da origem, com o valor novo e o grifo verde atrás do número em tinta. */
.h01-preco{display:flex;align-items:center;gap:22px;margin-top:26px;padding-top:22px;border-top:1px solid var(--linha-escura);width:fit-content}
.h01-preco>span{font-size:14px;white-space:nowrap}
.h01-preco strong{font-size:30px;font-weight:600;letter-spacing:-.04em;line-height:1;margin-left:8px;vertical-align:-.12em}
.h01-preco p{font-size:13px;line-height:1.45;max-width:150px;color:var(--cinza-escuro)}

/* Palco: no desktop, termina no pé da tela mesmo quando o hero é mais alto que ela (notebook baixo). */
.h01-palco{position:absolute;z-index:2;top:96px;bottom:max(0px,calc(100% - 100svh));left:45%;right:0;perspective:2000px;perspective-origin:8% 45%}
/* Janela limitada pela altura (notebook baixo e largo) fica no meio da área livre; larga, começa logo depois do texto e passa da borda.
   Reserva ~260 px de altura fora da janela para a paleta e o cursor "você". */
.h01-janela{--w:min(60vw,calc((min(100svh,1240px) - 260px) * 1.45),1500px);position:absolute;left:max(0px,calc((100% - var(--w) * 1.07) / 2));top:50%;width:var(--w);margin-top:calc(var(--w) / -3 - 23px);transform-origin:0 50%;background:var(--branco);border-radius:18px;border:1px solid #e2e2dc;box-shadow:0 60px 110px -34px rgba(22,24,21,.42),0 24px 48px -24px rgba(22,24,21,.3);will-change:transform}
.h01-barra{position:relative;height:46px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;border-bottom:1px solid #eaeae5}
.h01-bolinhas{display:flex;gap:7px}.h01-bolinhas i{width:11px;height:11px;border-radius:50%;background:#dcdcd6}
.h01-url{position:relative;height:30px;width:clamp(240px,34vw,460px);border-radius:99px;background:var(--papel);display:flex;align-items:center;gap:8px;padding:0 15px;font-size:13px;font-weight:500;letter-spacing:-.01em;color:var(--tinta);overflow:hidden}
.h01-url svg{width:13px;height:13px;flex:none;fill:none;stroke:currentColor;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;color:var(--cinza)}
.h01-url-texto{display:inline-block;white-space:pre}
.h01-caret{width:1.5px;height:15px;background:var(--tinta);margin-left:-6px}
.h01-url-flash{position:absolute;inset:0;background:var(--verde);opacity:0;z-index:-1}
.h01-carga{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--tinta);transform-origin:0 50%;transform:scaleX(0)}
.h01-tela{position:relative;aspect-ratio:3/2;overflow:hidden;border-radius:0 0 17px 17px;background:#fafaf7}

.h01-prompt{position:absolute;left:0;top:0;z-index:7;font-size:calc(var(--w) * .076);font-weight:630;letter-spacing:-.05em;line-height:1;color:var(--tinta);white-space:pre;opacity:0;transform-origin:50% 50%;will-change:transform}
.h01-prompt-fantasma{visibility:hidden}
.h01-prompt-texto{position:absolute;left:0;top:0}
.h01-prompt-caret{position:absolute;top:-.02em;left:0;width:.075em;height:1.04em;border-radius:2px;background:var(--tinta)}
.h01-esqueleto .b{position:absolute;background:#e4e4de;border-radius:.6vw;opacity:0}
.h01-esqueleto .b[data-b=botao]{background:var(--verde)}
.h01-esqueleto .b[data-b=imagem]{border-radius:1vw;background:#e0e0d9}
.h01-brilho{position:absolute;top:0;bottom:0;width:34%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);opacity:0}
.h01-skin{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 0;visibility:hidden;will-change:clip-path,transform}
/* Linha de pintura e anel da íris: verde com contorno tinta, para ler tanto no esqueleto branco quanto nas telas escuras. */
.h01-borda{position:absolute;left:0;top:0;background:var(--verde);box-shadow:0 0 0 1px var(--tinta),0 0 22px 3px rgba(184,243,107,.5);visibility:hidden;z-index:4}
.h01-anel{position:absolute;left:0;top:0;border:3px solid var(--verde);border-radius:50%;visibility:hidden;z-index:4;box-shadow:0 0 0 1px var(--tinta),inset 0 0 0 1px var(--tinta),0 0 24px rgba(184,243,107,.45)}
/* Seleção: traço tinta com fio claro por fora (as telas têm fundos claros e escuros); alças e rótulo em verde com tinta. */
.h01-selecao{position:absolute;left:0;top:0;border:1.5px solid var(--tinta);box-shadow:0 0 0 1px rgba(255,255,255,.75),inset 0 0 0 1px rgba(255,255,255,.75);opacity:0;z-index:5;transform-origin:0 0}
.h01-selecao i{position:absolute;width:10px;height:10px;background:var(--verde);border:1.5px solid var(--tinta);border-radius:2px}
.h01-selecao i:nth-child(1){left:-6px;top:-6px}.h01-selecao i:nth-child(2){right:-6px;top:-6px}.h01-selecao i:nth-child(3){left:-6px;bottom:-6px}.h01-selecao i:nth-child(4){right:-6px;bottom:-6px}
.h01-rotulo{position:absolute;left:-1.5px;bottom:100%;margin-bottom:8px;background:var(--verde);color:var(--tinta);font-size:11px;font-weight:600;padding:4px 8px;border-radius:5px;white-space:nowrap;box-shadow:0 0 0 1.5px var(--tinta)}
.h01-guia{position:absolute;left:0;top:0;background:var(--tinta);opacity:0;z-index:5}
.h01-guia[data-g=v]{width:1px;height:100%;box-shadow:1px 0 0 rgba(255,255,255,.7)}.h01-guia[data-g=h]{height:1px;width:100%;box-shadow:0 1px 0 rgba(255,255,255,.7)}

.h01-chips{position:absolute;left:28px;bottom:-27px;z-index:6;display:flex;gap:4px;padding:6px;border-radius:16px;background:var(--branco);border:1px solid #e2e2dc;box-shadow:0 20px 44px -20px rgba(22,24,21,.4)}
.h01-chip{font-size:12px;font-weight:550;padding:9px 15px;border-radius:10px;color:var(--cinza-escuro);white-space:nowrap;transition:background 160ms ease,color 160ms ease}
.h01-chip.ativo{background:var(--tinta);color:var(--papel)}
/* Cursores: o Luca é o componente .cursor-luca (tinta, etiqueta com texto verde); o "você" é a variante clara, branca com contorno tinta. */
.h01-cursor{z-index:8}
.h01-cursor svg{width:27px;height:27px}
.h01-cursor span{margin:19px 0 0 -3px;padding:4px 10px}
.h01-cursor--voce svg{fill:var(--branco);stroke:var(--tinta)}
.h01-cursor--voce span{background:var(--branco);color:var(--tinta);box-shadow:0 0 0 1.5px var(--tinta),0 4px 10px -4px rgba(22,24,21,.35)}
.h01-balao{position:absolute;left:0;top:0;z-index:9;background:var(--branco);color:var(--tinta);font-size:13px;font-weight:600;padding:10px 15px;border-radius:16px 16px 16px 4px;white-space:nowrap;opacity:0;transform-origin:0 100%;box-shadow:0 0 0 1.5px var(--tinta),0 12px 26px -12px rgba(22,24,21,.5)}
/* A legenda acompanha o pé da tela quando o hero é mais alto que ela (notebook baixo): as telas são referências. */
.h01-legenda{position:absolute;z-index:4;right:24px;bottom:calc(16px + max(0px, 100% - 100svh));font-size:11px;line-height:1.3;color:var(--cinza-escuro);background:rgba(243,243,239,.9);padding:6px 11px;border-radius:99px}

/* Estados iniciais só com JS; sem JS, primeira tela e janela aparecem paradas. */
.h01-cursor,.h01-balao,.h01-prompt,.h01-selecao{display:none}
.h01-skin:first-of-type{visibility:visible}
html.js .hl>span{transform:translateY(106%)}
html.js .h01-grifo i{transform:scaleX(0)}
html.js .h01-enfeite{transform:scale(0)}
html.js .h01-sub,html.js .h01-acoes,html.js .h01-preco,html.js .h01-janela,html.js .h01-legenda,html.js .h01-chips{opacity:0}
html.js .h01-skin:first-of-type{visibility:hidden}
/* O palco só aparece depois de medido (hero.js): mudar a posição dele depois da primeira pintura contaria como layout shift. */
html.js .h01-palco{visibility:hidden}
html.js .h01-cursor,html.js .h01-balao{display:flex}
html.js .h01-prompt,html.js .h01-selecao{display:block}

/* Notebook baixo: a coluna de texto aperta os respiros para caber entre o cabeçalho e o pé. */
@media(min-width:1024px) and (max-height:760px){
  .h01-olho{margin-bottom:18px}.h01-sub{margin-top:18px}.h01-acoes{margin-top:22px}.h01-preco{margin-top:18px;padding-top:16px}
}
/* Abaixo de 1200 px a coluna de texto fica mais estreita (botão e link menores), para sobrar tela para a janela. */
@media(max-width:1199px){
  .h01-acoes{gap:10px 20px}
  .h01-acoes .btn{min-height:52px;padding-left:22px;gap:12px;font-size:15.5px}
  .h01-acoes .link{font-size:14px}
}
@media(max-width:1023px){
  /* Empilhado, a altura é a do conteúdo: sem faixa vazia entre a janela e a faixa de baixo em celulares altos. */
  .h01{height:auto;max-height:none}
  .h01-copy{flex:none;padding:8px 0 0}
  .h01-titulo{font-size:clamp(44px,9.4vw,84px)}
  .h01-palco{position:relative;top:auto;left:auto;right:auto;bottom:auto;height:calc(86vw * 2 / 3 + 150px);margin-top:10px;perspective-origin:50% 0}
  .h01-janela{--w:86vw;left:7vw;top:40px;margin-top:0;transform-origin:50% 0}
  .h01-legenda{bottom:12px;right:16px}
}
@media(max-width:767px){
  .h01-olho{font-size:13.5px;margin-bottom:18px}
  .h01-titulo{font-size:clamp(40px,11.6vw,64px);line-height:.98}
  .h01-sub{margin-top:16px;font-size:15px;line-height:1.45}
  /* Botão e link numa linha só, como na origem. */
  .h01-acoes{gap:8px 14px;margin-top:20px}.h01-acoes .btn{min-height:50px;padding:8px 8px 8px 18px;gap:10px;font-size:15px}.h01-acoes .btn-ico{width:34px;height:34px}.h01-acoes .link{font-size:13.5px}
  .h01-preco{margin-top:22px;padding-top:18px;gap:18px}.h01-preco strong{font-size:27px}.h01-preco p{font-size:12px;max-width:130px}
  .h01-palco{height:calc(94vw * 2 / 3 + 34px + 96px)}
  .h01-janela{--w:94vw;left:3vw;top:26px;border-radius:12px}
  .h01-barra{height:34px;padding:0 10px}.h01-bolinhas{gap:4px}.h01-bolinhas i{width:7px;height:7px}
  .h01-url{height:22px;width:62vw;font-size:10px;gap:5px;padding:0 9px}.h01-url svg{width:10px;height:10px}.h01-caret{height:11px;margin-left:-4px}
  .h01-tela{border-radius:0 0 11px 11px}
  .h01-chips{left:10px;bottom:-22px;gap:2px;padding:4px;border-radius:11px}.h01-chip{font-size:10px;padding:6px 9px;border-radius:7px}
  .h01-cursor svg{width:19px;height:19px}.h01-cursor span{font-size:9px;padding:3px 7px;margin-top:13px}
  .h01-balao{font-size:10px;padding:7px 10px;border-radius:12px 12px 12px 3px}
  .h01-selecao i{width:7px;height:7px}.h01-selecao i:nth-child(1){left:-4px;top:-4px}.h01-selecao i:nth-child(2){right:-4px;top:-4px}.h01-selecao i:nth-child(3){left:-4px;bottom:-4px}.h01-selecao i:nth-child(4){right:-4px;bottom:-4px}
  .h01-rotulo{font-size:8px;padding:3px 6px;margin-bottom:6px}
  .h01-legenda{font-size:10px;right:12px;bottom:10px}
}
@media(max-width:379px){.h01-sub{font-size:14.5px}.h01-acoes{gap:8px}.h01-acoes .btn{padding-left:16px;font-size:14.5px}.h01-acoes .link{font-size:12px;gap:6px}.h01-preco{gap:12px}.h01-preco>span{font-size:13px}.h01-preco strong{font-size:25px}.h01-preco p{font-size:11.5px;max-width:none}}