/* Hero (painel escuro, foto, CTAs) e seu comportamento responsivo. Carregar depois de chat.css e sections.css. */
.hero{
  position:relative;isolation:isolate;overflow:hidden;container-type:inline-size;
  min-height:clamp(700px,calc((100vw - 48px) * .554),995px);border-radius:32px;
  background:var(--hero-bg);color:var(--hero-ink);display:flex;align-items:center;
}
.hero__media{
  position:absolute;z-index:-1;top:0;right:0;height:100%;width:86%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 46%);mask-image:linear-gradient(90deg,transparent 0,#000 46%);
}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 20%);opacity:0;transition:opacity .8s ease}
.hero__img.is-active{opacity:1}
.hero__img.is-flip{transform:scaleX(-1)}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:rgba(10,10,10,.34)}
.hero__content{width:100%;max-width:clamp(1150px,85cqw,1600px);margin:0 auto;padding:56px 24px}
.hero__copy{max-width:clamp(680px,48cqw,860px)}
.eyebrow{font-size:14px;line-height:1.35;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--hero-ink);margin:0}
.hero h1{margin:14px 0 0;font-family:var(--font);font-weight:500;font-size:clamp(36px,3.9cqw,66px);line-height:1.05;letter-spacing:-.02em;text-wrap:balance}
.hero h1 em{font-family:var(--display);font-weight:800;font-style:italic;color:var(--hero-accent);letter-spacing:-.01em}
.lede{margin:16px 0 0;font-size:17px;line-height:1.55;max-width:560px;color:var(--hero-ink)}
.cta{margin-top:32px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.hero .btn{min-height:52px;padding:0 24px;font-size:16px;border-radius:var(--r-lg)}
.hero .btn-p{background:var(--accent);color:#fff}
.hero .btn-p:hover{background:#fff;color:var(--accent-ink)}
.hero .btn-o{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(10,10,10,.55)}
.hero .btn-o:hover{border-color:#fff;background:rgba(10,10,10,.8)}
.hero :focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 8px rgba(10,10,10,.85)} /* anel duplo: branco com halo escuro, legível sobre qualquer trecho da foto */
.hero__copy{text-shadow:0 1px 18px rgba(10,10,10,.55)}
.btn svg{width:18px;height:18px;flex:none}
.micro{margin:16px 0 0;font-size:14px;line-height:1.5;color:var(--hero-ink);max-width:460px;display:flex;gap:10px;align-items:flex-start}
.micro svg{flex:none;margin-top:3px}
.hero-cap{position:absolute;z-index:3;right:80px;bottom:36px;white-space:nowrap;text-align:right;margin:0;background:rgba(10,10,10,.62);padding:3px 10px;border-radius:var(--r-full);font-size:13px;line-height:1.35;color:rgba(250,250,248,.9)}
.motion{position:absolute;left:24px;bottom:24px;z-index:3;display:inline-grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;cursor:pointer;background:#fff;color:#0A0A0A;box-shadow:0 2px 8px rgba(0,0,0,.3)}
.motion:hover{background:var(--hero-accent)}
.motion svg{width:18px;height:18px}
.motion .i-play{display:none}
.motion[data-paused="true"] .i-play{display:block}
.motion[data-paused="true"] .i-pause{display:none}


@media (max-width:1100px){
  .stage{--w:clamp(260px,30cqw,320px);right:16px}
  .hero__copy{max-width:520px}
}
@media (max-width:900px){
  .hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;border-radius:24px;padding:32px 0 0}
  .hero__content{padding:0 20px 24px}
  .hero h1{font-size:clamp(34px,9.4vw,52px)}
  .hero::after{display:none}
  .hero__media{position:relative;z-index:0;order:2;width:100%;height:min(112vw,480px);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%)}
  .stage{--w:min(82vw,330px);right:12px;bottom:68px}
  .wa-msgs{height:15em}
  .hero-cap{left:16px;right:auto;bottom:22px;max-width:calc(100% - 80px);white-space:normal;text-align:left;border-radius:12px}
  .motion{left:12px;bottom:12px}
  .cta-row .btn{width:100%;justify-content:center}
}

/* carrossel: textos que trocam e indicadores */
#hero-title,#hero-lede{transition:opacity .3s ease}
.hero__copy.is-swapping #hero-title,.hero__copy.is-swapping #hero-lede{opacity:0}
.hero h1{min-height:2.1em}
.hero-dots{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.hero-dot{min-height:var(--touch-min);padding:0 16px;border:1.5px solid rgba(255,255,255,.4);border-radius:var(--r-full);background:rgba(10,10,10,.35);color:rgba(250,250,248,.9);font:600 14px/1 var(--font);cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.hero-dot:hover{border-color:#fff}
.hero-dot[aria-current="true"]{background:#fff;border-color:#fff;color:#0A0A0A}
@media (max-width:900px){.hero h1{min-height:0}}
@media (prefers-reduced-motion:reduce){.hero__img,#hero-title,#hero-lede,.hero-dot{transition:none}}
/* conversa inteira e parada (movimento reduzido, pausa + troca de cenário): mostra todas as mensagens, inclusive a saudação */
@media (min-width:901px){.stage .wa-msgs.complete{height:auto;-webkit-mask-image:none;mask-image:none}}