/* Seletor de visões do topo (Conectar · Organizar · Automatizar)
   Antes: três botões pequenos, quase sem borda, soltos embaixo do vídeo — ninguém percebia que eram clicáveis.
   Agora: um bloco "Veja em ação" dentro do texto do topo (logo depois da frase de abertura), com botões grandes, ícones,
   estado ativo preenchido com o degradê da marca e um aceno (pulso) quando o vídeo termina.
   No celular o mesmo visual fica colado em cima da ilustração. */

:root {
  --mode-ic-0: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5.5' cy='12' r='3'/%3E%3Ccircle cx='18.5' cy='12' r='3'/%3E%3Cpath d='M8.5 12h7'/%3E%3C/svg%3E");
  --mode-ic-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3.5-8.5 4.8L12 13l8.5-4.7L12 3.5Z'/%3E%3Cpath d='m3.5 12.4 8.5 4.8 8.5-4.8'/%3E%3Cpath d='m3.5 16.4 8.5 4.8 8.5-4.8'/%3E%3C/svg%3E");
  --mode-ic-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.2 2.8 5 13.6h6.2l-.9 7.6 8.7-11h-6.3l.5-7.4Z'/%3E%3C/svg%3E");
}

/* ---------- bloco dentro do texto (computador e tablet) ---------- */
.hero-modes { display: none; }
@media (width >= 761px) {
  .hero-modes { display: block; margin: 30px 0 34px; max-width: 500px; position: relative; z-index: 3; }
  .hero .scene-controls { display: none; }              /* a cópia antiga (embaixo do vídeo) só continua no celular */
}
.hero-modes-label { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; color: #9fb4d3; font-size: 11px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; line-height: 1; }
.hero-modes-label:after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, #00f0ff66, #00f0ff00); }
.hero-modes-label svg { width: 14px; height: 14px; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.hero-modes-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }

/* o cabeçalho agora é fixo e compacto: o respiro de 96px acima do título deixou de ser necessário e o bloco novo precisa desse espaço */
@media (width >= 1101px) { .hero { padding-top: 52px; } }

/* ---------- o botão (vale para os dois conjuntos) ---------- */
.hero .hero-modes .mode-tab, .hero .scene-controls button {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 14px; margin: 0;
  border: 1px solid #4a6a93; border-radius: 12px; color: #e6effb; cursor: pointer;
  background: linear-gradient(180deg, #17283f, #0e1a2f); box-shadow: 0 10px 24px -14px #000d, inset 0 1px 0 #ffffff17;
  font: 650 15px/1 Jakarta, Arial, sans-serif; letter-spacing: -.005em; text-align: center; max-width: none; flex: 1;
  transition: transform .25s cubic-bezier(.2, .7, .2, 1), border-color .25s, background .25s, box-shadow .25s, color .25s;
}
.hero .hero-modes .mode-tab:before, .hero .scene-controls button:before {
  content: ""; flex: none; width: 21px; height: 21px; background: currentColor;
  -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; opacity: .92;
}
.hero [data-scene-mode="0"] { --ic: var(--mode-ic-0); }
.hero [data-scene-mode="1"] { --ic: var(--mode-ic-1); }
.hero [data-scene-mode="2"] { --ic: var(--mode-ic-2); }
.hero .hero-modes .mode-tab:hover, .hero .scene-controls button:hover {
  border-color: #00f0ff; background: linear-gradient(180deg, #1c3453, #12233d); transform: translateY(-2px);
  box-shadow: 0 14px 28px -14px #00f0ff88, inset 0 1px 0 #ffffff22; color: #fff;
}
.hero .hero-modes .mode-tab:active, .hero .scene-controls button:active { transform: translateY(0) scale(.985); }
.hero .hero-modes .mode-tab:focus-visible, .hero .scene-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
/* ativo: preenchido com o degradê da marca (impossível de não ver) */
.hero .hero-modes .mode-tab[aria-pressed="true"], .hero .scene-controls button[aria-pressed="true"] {
  color: #03202b; border-color: #9ff8ff; transform: none; cursor: default;
  background: linear-gradient(135deg, #00f0ff 0%, #4aa8ff 62%, #9a7bff 100%);
  box-shadow: 0 14px 36px -12px #00f0ffb0, 0 0 0 1px #ffffff2a inset, inset 0 1px 0 #ffffff80;
}
.hero .hero-modes .mode-tab[aria-pressed="true"]:before, .hero .scene-controls button[aria-pressed="true"]:before { opacity: 1; }

/* aceno: quando o vídeo termina, os botões ainda não escolhidos pulsam algumas vezes (uma só vez por visita) */
.hero .hero-modes.is-nudge .mode-tab[aria-pressed="false"]:after, .hero .scene-controls.is-nudge button[aria-pressed="false"]:after {
  content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid #00f0ff; box-shadow: 0 0 18px #00f0ff88; opacity: 0; pointer-events: none;
  animation: mode-ping 1.5s cubic-bezier(.2, .7, .2, 1) 3 both; animation-delay: calc(var(--n, 0) * .18s);
}
.hero [data-scene-mode="1"] { --n: 1; }
.hero [data-scene-mode="2"] { --n: 2; }
@keyframes mode-ping { 0% { opacity: .9; transform: scale(.95); } 100% { opacity: 0; transform: scale(1.1); } }
.hero .hero-modes.is-nudge .hero-modes-label svg { animation: mode-bob 1.2s ease-in-out 4; }
@keyframes mode-bob { 50% { transform: translateY(3px); } }

/* ---------- tablet e celular: ícone em cima, texto embaixo (cabem três botões em colunas estreitas) ---------- */
@media (width <= 1100px) {
  .hero .hero-modes .mode-tab, .hero .scene-controls button { flex-direction: column; gap: 6px; min-height: 66px; padding: 8px 6px; font-size: 13.5px; }
  .hero .hero-modes .mode-tab:before, .hero .scene-controls button:before { width: 22px; height: 22px; }
}
@media (width >= 761px) and (width <= 1100px) { .hero-modes { margin: 22px 0 28px; max-width: 430px; } }

/* ---------- celular: o seletor fica colado em cima da ilustração, com o rótulo ---------- */
@media (width <= 760px) {
  .hero .hero-visual { display: flex; flex-direction: column; }
  .hero .hero-visual > #hero-scene { order: 1; }
  .hero .hero-visual > .hero-toolbelt { order: 2; }
  .hero .hero-visual > figcaption { order: 3; }
  .hero .hero-visual > .motion-toggle { order: 4; }
  .hero .hero-visual > .scene-controls { order: 0; }
  .hero .scene-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: none; margin: 0 0 14px; padding: 0; position: relative; inset: auto; }
  .hero .scene-controls:before { content: "Veja em ação"; grid-column: 1 / -1; display: block; color: #9fb4d3; font-size: 11px; font-weight: 650; letter-spacing: .15em; text-transform: uppercase; line-height: 1; margin-bottom: 2px; }
}

/* =====================================================================================================
   v2 — limpeza do topo: sem "Ilustração conceitual", sem botão de pausa, legenda centrada na ilustração
   ===================================================================================================== */
/* O botão de pausa continua no HTML (o script do site precisa dele para funcionar), mas fica oculto.
   A órbita de ferramentas e as ilustrações continuam respeitando "reduzir movimento" do sistema do visitante. */
.hero .motion-toggle { display: none !important; }
.hero-visual figcaption small { display: none !important; }

/* legenda: centrada, um pouco maior, sem quebra feia */
.hero-visual figcaption { justify-content: center; text-align: center; padding: 0; }
.hero-visual figcaption #scene-description { flex: 0 1 auto; color: #dbe6f6; font-size: 15px; line-height: 1.5; letter-spacing: -.005em; text-wrap: balance; }

/* computador (>=1024px): o script posiciona a legenda no centro da ilustração do modo atual (--cap-l / --cap-w / --cap-t) */
@media (width >= 1024px) {
  .hero-visual figcaption.cap-js { left: var(--cap-l); right: auto; width: var(--cap-w); top: var(--cap-t); bottom: auto; margin: 0;
    transition: left .5s var(--ease-out, ease), top .5s var(--ease-out, ease), width .5s var(--ease-out, ease); }
  .hero-visual figcaption:not(.cap-js) { left: 52%; right: var(--hero-gutter, 36px); }   /* sem script: ao menos centrada na metade direita */
}

/* respiros do topo: o cabeçalho é fixo e compacto, então sobra bastante altura reservada que agora ficou vazia */
@media (width >= 1024px) { .hero { padding-top: 56px; padding-bottom: 116px; } }
@media (width >= 1151px) and (width < 1600px) { .hero { min-height: 0; } }
.hero .hero-modes { margin-bottom: 30px; }

/* notebooks (1024–1439px): as ilustrações dos modos Organizar e Automatizar nasceram para telas de 1440px e, em telas menores,
   os rótulos da direita ("SISTEMAS DA SUA EMPRESA", "AGENTES AUTÔNOMOS"…) passavam da borda da janela.
   Agora a caixa da ilustração é ancorada na borda direita: o conteúdo termina sempre a 24px da borda e encolhe junto com a tela.
   (o conteúdo da ilustração ocupa ~82% da largura da caixa, contados a partir da esquerda: 0,821) */
@media (1024px <= width <= 1150px) {
  .hero #hero-scene:not(.media-active)[data-mode="1"], .hero #hero-scene:not(.media-active)[data-mode="2"] {
    --sw: min(850px, calc(100vw - 244px)); width: var(--sw); left: calc(100% - 24px - var(--sw) * .821); }
}
@media (1151px <= width <= 1439px) {
  .hero #hero-scene:not(.media-active)[data-mode="1"], .hero #hero-scene:not(.media-active)[data-mode="2"] {
    --sw: min(1100px, calc(78vw - 60px)); width: var(--sw); left: calc(100% - 24px - var(--sw) * .821); }
}

/* tablet em pé (761–1023px): texto em cima, ilustração embaixo, como no celular.
   Antes a ilustração ficava ao lado do texto e os modos Organizar/Automatizar saíam pela borda direita da tela. */
@media (761px <= width <= 1023px) {
  .hero { display: flex; flex-direction: column; align-items: stretch; gap: 20px; min-height: 0; padding: 44px var(--hero-gutter, 36px) 96px; }
  .hero .hero-copy { width: 100%; max-width: none; padding: 0; }
  .hero .hero-copy:before { display: none; }
  .hero .hero-modes { max-width: 560px; margin-bottom: 26px; }
  .hero .hero-visual { position: relative; inset: auto; height: auto; width: 100%; pointer-events: auto; align-self: stretch; }
  .hero #hero-scene, .hero #hero-scene.media-active, .hero #hero-scene.media-review, .hero #hero-scene.media-active.media-r4 {
    position: relative; top: auto; left: auto; right: auto; width: 100%; max-height: none; margin: 0; aspect-ratio: 16 / 9; transform: none !important;
    -webkit-mask-image: none; mask-image: none; }
  .hero #hero-scene[data-mode="1"]:not(.media-active), .hero #hero-scene[data-mode="2"]:not(.media-active) { width: min(100%, 640px); margin-inline: auto; aspect-ratio: 720 / 620; }
  .hero .hero-visual figcaption { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; width: auto; margin: 12px auto 0; max-width: 520px; }
}

/* celular: a legenda deixa de reservar espaço para o botão de pausa */
@media (width <= 760px) {
  .hero .hero-visual figcaption { margin: 12px auto 0; padding: 0; max-width: 340px; }
  .hero .hero-visual figcaption #scene-description { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero .hero-modes .mode-tab, .hero .scene-controls button { transition: none; }
  .hero .hero-modes.is-nudge .mode-tab:after, .hero .scene-controls.is-nudge button:after, .hero .hero-modes.is-nudge .hero-modes-label svg { animation: none; }
}