.hero{--tit:33.5%;  
  
  display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;row-gap:clamp(12px,2.5svh,24px);
  padding:calc(var(--hdr-h) + clamp(4px,1.5svh,16px)) var(--margem) var(--sp-4);min-height:100svh;background:var(--papel)}
.hero a,.hero button{touch-action:manipulation}
.hero-copy{grid-row:2}
.hero-stage{grid-row:1;min-width:0;display:none;flex-direction:column;justify-content:center}
.hero-stage:has(.hero-field[role="img"]){display:flex}
.hero-h1{margin:0 0 clamp(10px,1.6svh,24px);max-width:12ch;font:var(--w-display) clamp(3.25rem,5.9vw,5.5rem)/.92 var(--sans);letter-spacing:var(--ls-display)}
.hero-sub{margin:0 0 clamp(14px,2.4svh,28px);max-width:30ch}
.ii{position:relative;-webkit-text-fill-color:transparent;background:linear-gradient(to bottom,transparent var(--tit),currentColor var(--tit));-webkit-background-clip:text;background-clip:text}
.ii::after{content:"";position:absolute;left:.1325em;top:.3425em;width:.15em;height:.15em;margin:-.075em 0 0 -.075em;border-radius:50%;background:var(--shu)}
@media (forced-colors:active){.ii{-webkit-text-fill-color:currentColor;background:none}.ii::after{display:none}}
.hero-field{position:relative;height:clamp(200px,34svh,320px)}
@media (max-width:1023.98px){.hero-field{flex:1;max-height:calc((100vw - 2 * var(--margem)) * .72);min-height:200px}} 
@media (max-width:639.98px){.hero-field{max-height:min(calc((100vw - 2 * var(--margem)) * .72),40svh);min-height:min(200px,40svh)}}
@media (max-width:1023.98px) and (max-height:699.98px){.hero-field{min-height:140px;max-height:clamp(140px,28svh,calc((100vw - 2 * var(--margem)) * .72))}}
.hero-field canvas{position:absolute;left:0;top:0}
.hero-under{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 var(--ox,0px)}
.hero-now{margin:0;font:var(--w-mono) .8125rem/1.3 var(--mono);letter-spacing:.02em;opacity:0}
.hero-now.on{opacity:1}
@media (prefers-reduced-motion:no-preference){.hero-now{transition:opacity var(--dur-max) ease-out}}
.hero-pause{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px;margin:0 -6px 0 auto;max-width:100%;border:0;border-radius:6px;background:none;color:var(--cinza-esc);
  font:var(--w-mono) var(--t-mono)/1 var(--mono);letter-spacing:var(--ls-mono);cursor:pointer;white-space:nowrap}
.hero-pause .ic{width:8px;height:9px;border-left:2.5px solid currentColor;border-right:2.5px solid currentColor}
.hero-pause[aria-pressed="true"] .ic{border:0;background:currentColor;clip-path:polygon(0 0,100% 50%,0 100%)}
@media (hover:hover){.hero-pause:hover{color:var(--tinta)}}
@media (hover:hover) and (pointer:fine) and (min-width:1024px){.hero-stage{padding-right:calc(var(--pad-r) - var(--margem))}}
@media (min-width:1024px){
  .hero{grid-template-columns:minmax(0,5fr) minmax(0,7fr);grid-template-rows:auto;column-gap:var(--sp-5);align-items:center;align-content:stretch;padding-block:var(--hdr-h) var(--sp-4)}
  .hero-copy{grid-column:1;grid-row:1}
  .hero-stage{grid-column:2;grid-row:1;align-self:stretch;min-height:400px}
  .hero-h1{max-width:8ch}
  .hero-field{height:auto;flex:1}
  .hero-under{min-height:48px;margin-bottom:var(--sp-2)}
  .hero-now{font-size:.875rem}
}