/* Axis360 · comercial-hero.css — o cartão do comercial no herói da home (landing-comercial-hero.py; design/comercial/hero/).
   Efeito "container scroll": o cartão entra inclinado para trás e fica reto conforme a página rola (comercial-hero.js
   escreve o transform do .chero-card). Sem JS ou com prefers-reduced-motion: reduce, o cartão fica reto e parado.
   Com JS (o script do <head> sempre põe <html data-theme>), o cartão já pinta inclinado, no mesmo ângulo que o JS
   calcula para a página no topo: sem salto na abertura.
   Tokens da página (--text, --sec, --line, --gold...) com valores de reserva; claro e escuro (data-theme + sistema). */

.chero{
  --chero-r:clamp(22px,2.6vw,32px);          /* canto do cartão */
  --chero-pad:clamp(6px,.9vw,12px);           /* moldura */
  --chero-frame:linear-gradient(180deg,#ffffff 0%,#f4f4f6 100%);
  --chero-edge:rgba(0,0,0,.07);
  --chero-hi:rgba(255,255,255,.9);
  --chero-shadow:
    0 1px 1px rgba(0,0,0,.03),
    0 4px 8px -2px rgba(0,0,0,.04),
    0 18px 36px -12px rgba(0,0,0,.10),
    0 48px 90px -30px rgba(0,0,0,.20),
    0 100px 140px -70px rgba(40,30,10,.22);
  --chero-inner:rgba(0,0,0,.08);
  position:relative;z-index:1;margin:0 0 clamp(64px,8vw,112px);
}
:root[data-theme="dark"] .chero{
  --chero-frame:linear-gradient(180deg,#26262b 0%,#1b1b1f 100%);
  --chero-edge:rgba(255,255,255,.10);
  --chero-hi:rgba(255,255,255,.07);
  --chero-shadow:
    0 1px 1px rgba(0,0,0,.4),
    0 18px 36px -12px rgba(0,0,0,.55),
    0 50px 100px -30px rgba(0,0,0,.75),
    0 40px 140px -50px rgba(215,196,154,.20);
  --chero-inner:rgba(255,255,255,.06);
}
@media screen and (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .chero{
    --chero-frame:linear-gradient(180deg,#26262b 0%,#1b1b1f 100%);
    --chero-edge:rgba(255,255,255,.10);
    --chero-hi:rgba(255,255,255,.07);
    --chero-shadow:
      0 1px 1px rgba(0,0,0,.4),
      0 18px 36px -12px rgba(0,0,0,.55),
      0 50px 100px -30px rgba(0,0,0,.75),
      0 40px 140px -50px rgba(215,196,154,.20);
    --chero-inner:rgba(255,255,255,.06);
  }
}

.chero-kicker{display:flex;justify-content:center;margin:0 0 22px;}

/* palco: a perspectiva fica aqui (o cartão gira dentro dele); a caixa do palco não muda com o giro: sem layout shift */
.chero-stage{position:relative;max-width:1064px;margin:0 auto;perspective:1200px;perspective-origin:50% 0%;}
.chero-card{
  position:relative;border-radius:var(--chero-r);padding:var(--chero-pad);
  background:var(--chero-frame);
  box-shadow:0 0 0 1px var(--chero-edge),inset 0 1px 0 var(--chero-hi),var(--chero-shadow);
  transform-origin:50% 100%;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
}
.chero.is-moving .chero-card{will-change:transform;}
/* estado inicial (antes do JS defer): o ângulo que o comercial-hero.js dá com a página no topo */
@media (prefers-reduced-motion:no-preference){
  :root[data-theme] .chero-card{transform:rotateX(9deg) scale(.963);}
}
@media (min-width:640px) and (prefers-reduced-motion:no-preference){
  :root[data-theme] .chero-card{transform:rotateX(12deg) scale(.94);}
}
@media (min-width:1024px) and (prefers-reduced-motion:no-preference){
  :root[data-theme] .chero-card{transform:translateY(-11%) rotateX(20deg) scale(.92);}
}

.chero-media{
  position:relative;overflow:hidden;aspect-ratio:16/9;
  border-radius:calc(var(--chero-r) - var(--chero-pad));
  background:#15140f;isolation:isolate;
  /* Safari: recorte arredondado estável com filhos em camada própria */
  -webkit-mask-image:-webkit-radial-gradient(white,black);
}
.chero-media::after{ /* filete por dentro, sobre a imagem */
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  box-shadow:inset 0 0 0 1px var(--chero-inner);
}
.chero-poster,.chero-poster img{display:block;width:100%;height:100%;}
.chero-poster img{object-fit:cover;}
.chero-video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;z-index:1;}
.chero-video[hidden]{display:none;}   /* no fim do vídeo: o pôster volta e os controles saem do Tab */

/* o play: o poster inteiro é o alvo; o círculo e a legenda ficam no meio */
.chero-play{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  color:#fff;text-decoration:none;cursor:pointer;border-radius:inherit;
  background:radial-gradient(60% 70% at 50% 52%,rgba(0,0,0,.26) 0%,rgba(0,0,0,.08) 60%,rgba(0,0,0,0) 100%),
             linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.28) 100%);
  transition:opacity .45s cubic-bezier(.2,.7,.2,1),visibility 0s linear 0s;
  -webkit-tap-highlight-color:transparent;
}
.chero-play:focus-visible{outline:none;}
.chero-play-btn{
  display:grid;place-items:center;width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.88);color:#1d1d1f;
  -webkit-backdrop-filter:saturate(180%) blur(14px);backdrop-filter:saturate(180%) blur(14px);
  box-shadow:0 0 0 1px rgba(255,255,255,.5),0 10px 30px -8px rgba(0,0,0,.45);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),background .2s ease,box-shadow .2s ease;
}
.chero-play-btn svg{width:30px;height:30px;margin-left:5px;fill:currentColor;}
.chero-play-txt{
  display:inline-flex;align-items:center;gap:8px;padding:7px 14px;border-radius:999px;
  font-size:.9375rem;font-weight:500;letter-spacing:-.01em;line-height:1.2;white-space:nowrap;
  background:rgba(20,20,22,.42);-webkit-backdrop-filter:saturate(160%) blur(12px);backdrop-filter:saturate(160%) blur(12px);
  box-shadow:0 0 0 1px rgba(255,255,255,.14);
}
.chero-dur{color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums;}
.chero-play:hover .chero-play-btn{transform:scale(1.06);background:#fff;}
.chero-play:active .chero-play-btn{transform:scale(.97);}
.chero-play:focus-visible .chero-play-btn{background:#fff;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--gold,#d7c49a),0 10px 30px -8px rgba(0,0,0,.45);}
.chero-play:focus-visible .chero-play-txt{box-shadow:0 0 0 2px #fff;}
.chero-media:has(.chero-play:focus-visible)::after{box-shadow:inset 0 0 0 3px var(--gold,#d7c49a);}

/* tocando: o poster e o play somem, o vídeo (controles nativos) fica */
.chero.is-playing .chero-play{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,visibility 0s linear .35s;}
.chero.is-playing .chero-poster{visibility:hidden;}

/* Safari: backdrop-filter dentro de um ancestral com transform 3D some ou pisca; inclinado, fundo sólido */
.chero.is-moving .chero-play-btn{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.94);}
.chero.is-moving .chero-play-txt{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(20,20,22,.6);}

.chero-note{margin:18px 0 0;text-align:center;font-size:.8125rem;color:var(--sec,#6e6e73);}

@media (max-width:640px){
  .chero-kicker{margin-bottom:16px;}
  .chero-play{gap:8px;}
  .chero-play-btn{width:52px;height:52px;}
  .chero-play-btn svg{width:19px;height:19px;margin-left:3px;}
  .chero-play-txt{font-size:.75rem;padding:5px 10px;gap:6px;}
}

/* O QR da Fabi (qr-fabi.php) fica em posição absoluta no .wrap do herói, só com mouse a partir de 900 px.
   900-1023 px: ele desce ~200 px abaixo do CTA (ao lado do telefone), então o cartão começa abaixo dele.
   >= 1024 px: o QR sobe para o lado direito do texto, com a base alinhada à do CTA (menor: 120 px, 104 px até
   1279 px), e o cartão vem logo abaixo do CTA (24 px), na primeira tela; o título do cartão fica só para leitor
   de tela. Em tela baixa (<= 820 px de altura) o herói perde 56 px em cima para o cartão espiar mais. */
@media (min-width:900px) and (hover:hover) and (pointer:fine){
  .chero{padding-top:196px;}
}
@media (min-width:1024px) and (hover:hover) and (pointer:fine){
  .hero .qrfabi{top:auto;bottom:0;width:168px;padding:12px 12px 14px;}
  .hero .qrfabi-img{width:120px;height:120px;}
  .hero .qrfabi-cap{margin-top:8px;font-size:.75rem;line-height:1.35;text-wrap:balance;}
  .chero{padding-top:0;margin-top:-56px;}   /* o lg:mt-20 (80 px) do contêiner vira 24 px abaixo do CTA */
  .chero-kicker{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}
}
@media (min-width:1024px) and (max-width:1279px) and (hover:hover) and (pointer:fine){
  .hero .qrfabi{width:140px;padding:10px 10px 12px;}
  .hero .qrfabi-img{width:104px;height:104px;}
}
@media (min-width:1024px) and (max-height:820px) and (hover:hover) and (pointer:fine){
  .hero{padding-top:48px;}
}

@media (prefers-reduced-motion:reduce){
  .chero-card{transform:none !important;}
  .chero-play,.chero-play-btn{transition:none;}
}
@media print{
  .chero{display:none;}
}