/* Estilos base vindos do wireframe (o resto está inline no HTML) */
:root{color-scheme:light}
img{max-width:100%}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid #F47927;outline-offset:2px}
body{margin:0;background:#FFFFFF}
a{color:#142235}a:hover{color:#101C22}
html{scroll-behavior:smooth}
section{scroll-margin-top:72px}
.nav-links{display:flex}
.so-cel,.so-cel-bloco{display:none}
.menu-btn{display:none;width:44px;height:44px;padding:0;border:1px solid #C9CED3;border-radius:10px;background:#FFFFFF;cursor:pointer;align-items:center;justify-content:center}
@media (max-width: 900px){
  .nav-links{display:none}
  .menu-btn{display:inline-flex}
  /* Menu aberto: as âncoras descem em lista abaixo do header */
  .menu-aberto .nav-links{display:flex;position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch !important;gap:0 !important;background:#FFFFFF;border-bottom:1px solid #DCDFE2;padding:8px 24px 16px;font-size:17px !important}
  .menu-aberto .nav-links a{padding:14px 0;border-top:1px solid #DCDFE2}
  .menu-aberto .nav-links a:first-child{border-top:0}
  .hero-t{font-size:6.6vw !important}
  /* Números do hero em texto corrido (como pílula flex, os trechos viram colunas espremidas) */
  .hero-num{display:block !important;max-width:560px;border-radius:16px !important;padding:12px 18px !important;line-height:1.5}
  .hero-num > span[aria-hidden]{display:inline-block;vertical-align:middle;margin-right:8px}
}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes mqr{from{transform:translateX(-50%)}to{transform:translateX(0)}}
.mq{display:flex;width:max-content;animation:mq 45s linear infinite}
.mqr{display:flex;width:max-content;animation:mqr 45s linear infinite}
@keyframes swap{from{opacity:0}to{opacity:1}}
.swap{display:inline-block;animation:swap .5s ease-out both}
input[type=range]{accent-color:#F47927;width:100%;height:44px;margin:0;cursor:pointer}
@keyframes iv-float{0%,100%{transform:translateY(6px)}50%{transform:translateY(-8px)}}
@keyframes iv-row{0%{opacity:0;transform:translateY(10px)}15%,80%{opacity:1;transform:none}100%{opacity:0}}
@keyframes iv-grow{0%{transform:scaleY(0.1)}30%,80%{transform:scaleY(1)}100%{transform:scaleY(0.1)}}
@keyframes iv-pulse{0%,100%{opacity:0.35}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.mq,.mqr,.swap{animation:none}#ciclo *{animation:none !important}.revela{opacity:1;transform:none;transition:none}}
.tabbtn{height: 48px; padding: 0 22px; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; border: 1px solid #C9CED3;background:#FFFFFF;color:#142235}
.tabbtn[aria-selected="true"]{border-color:#142235;background:#142235;color:#FFFFFF}
.tabico{display:none}

/* Depoimentos: um por vez no centro, os vizinhos aparecem apagados nas laterais */
.dep-car{overflow:hidden;margin:0 -24px;padding:0 24px}
.dep-trilho{display:flex;gap:24px;transition:transform .5s cubic-bezier(.2,.7,.2,1);touch-action:pan-y}
.dep{flex:0 0 min(760px, 86%);box-sizing:border-box;opacity:.35;transform:scale(.94);transition:opacity .5s, transform .5s;cursor:pointer}
.dep.ativo{opacity:1;transform:none;cursor:default}
.dep-seta{width:48px;height:48px;border-radius:50%;border:1px solid #C9CED3;background:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.dep-seta:hover{border-color:#142235}
.dep-ponto{width:8px;height:8px;border-radius:999px;border:0;padding:0;background:#C9CED3;cursor:pointer;transition:width .3s, background .3s}
.dep-ponto[aria-current="true"]{width:28px;background:#F47927}
@media (prefers-reduced-motion: reduce){.dep-trilho,.dep{transition:none}}

/* Hero: portal dentro de um notebook e app dentro de um celular, desenhados em CSS.
   Medidas em % da largura do notebook/celular para escalarem juntas em qualquer tela */
/* Grupo notebook + celular com 80% da largura, centralizado na caixa cinza */
.dev-grupo{position:relative;width:80%;margin:0 auto}
.dev-note{width:84%;margin-right:auto;margin-left:6%;container-type:inline-size}
.dev-note-tela{position:relative;background:#101C22;border-radius:2.2cqw 2.2cqw 0 0;padding:2.2cqw 2.2cqw 1.6cqw;box-shadow:0 30px 60px -30px rgba(20,34,53,.45)}
.dev-note-tela .tela{aspect-ratio:16 / 10;height:auto;border-radius:.6cqw;object-position:left top;background:#FFFFFF}
.dev-cam{position:absolute;top:.8cqw;left:50%;width:.7cqw;height:.7cqw;margin-left:-.35cqw;border-radius:50%;background:#2A3A50}
.dev-note-base{position:relative;height:2.4cqw;margin:0 -7%;background:linear-gradient(180deg,#E4E6E8 0%,#C9CED3 70%,#B4BBC2 100%);border-radius:0 0 2.6cqw 2.6cqw;box-shadow:0 18px 30px -18px rgba(20,34,53,.5)}
.dev-note-base span{position:absolute;top:0;left:50%;width:16%;height:45%;transform:translateX(-50%);background:#B4BBC2;border-radius:0 0 1cqw 1cqw}
.dev-cel{position:absolute;right:0;bottom:-12px;width:19%;aspect-ratio:9 / 19.3;box-sizing:border-box;padding:clamp(4px, 0.6vw, 8px);background:#101C22;border-radius:clamp(18px, 3.4vw, 40px);box-shadow:0 0 0 1.5px #2A3A50 inset, 0 30px 50px -20px rgba(20,34,53,.55);container-type:inline-size}
.dev-cel .tela{border-radius:clamp(13px, 2.6vw, 31px);background:#FFFFFF;box-sizing:border-box;padding-top:14cqw}
.dev-ilha{position:absolute;top:6.5cqw;left:50%;width:28cqw;height:7.5cqw;transform:translateX(-50%);border-radius:99px;background:#101C22;z-index:1}

/* Hero escuro (versão aprovada, ex-/v2). Azul-marinho com a foto do centro cirúrgico por baixo, até o meio do notebook
   (o corte é calculado no main.js); textos claros por cima */
#topo{position:relative;overflow:hidden}
#topo > div{position:relative;z-index:1}
#topo::before,#topo::after{content:"";position:absolute;left:0;right:0;top:0;bottom:var(--corte, 45%);z-index:0;pointer-events:none}
#topo::before{background:#142235}
#topo::after{background:url(assets/v2-hero.jpg?v=2) center top / cover no-repeat;opacity:.12;mix-blend-mode:luminosity}
#topo .hero-t{color:#FFFFFF}
#topo .hero-t > span:first-of-type{color:#A9B4BB !important}
#topo #palavra{color:#FFFFFF !important}
#topo .hero p{color:#C9D1D6 !important}
#topo .hero > span:not(.hero-num){color:#A9B4BB !important}
#topo .hero-num{background:rgba(255,255,255,.08) !important;color:#C9D1D6 !important}
#topo .hero-num strong{color:#FFFFFF !important}
/* Aparelhos sem a caixa cinza: ficam direto na divisa entre o azul e o branco */
#topo .hero-mock{background:transparent !important;border-radius:0 !important;padding:8px 0 0 !important;overflow:visible !important}

/* Telas geradas no Gemini (placeholders até chegarem os prints reais) */
.tela{display:block;width:100%;height:100%;object-fit:cover;object-position:left top}
#aba-img{object-position:center}
#aba-img[hidden]{display:none}

/* Abas por público: texto (com o link) e imagem ficam no meio do painel na vertical */
#aba-quadro{box-shadow:0 1px 2px rgba(20,34,53,.05), 0 14px 36px -18px rgba(20,34,53,.22)}
/* Aba do médico: só o celular recortado, sem caixa (a sombra já vem na imagem) */
#aba-quadro.aba-recorte{background:transparent !important;box-shadow:none;overflow:visible}
#aba-quadro.aba-recorte #aba-img{object-fit:contain;object-position:center}

/* Entradas: os elementos sobem de leve e aparecem quando entram na tela (classes postas pelo main.js) */
.revela{opacity:0;transform:translateY(24px);transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--atraso, 0s)}
.revela.visto{opacity:1;transform:none}

/* Passos: o último item cobre a linha vertical, que assim termina no círculo 5 em qualquer largura */
.sec ol > li:last-child{position:relative;z-index:1;background:#142235}

/* Celular. Os estilos do wireframe estão inline, por isso o !important */
@media (max-width: 640px){
  .so-cel{display:inline}
  .so-cel-bloco{display:block}
  .so-desk{display:none}
  .hdr{padding:0 16px !important;height:64px !important;gap:12px !important}
  .hdr img{width:112px !important}
  .hdr-entrar{display:none}
  .hdr-cta{display:none !important}
  .menu-aberto .nav-links{top:64px;padding:8px 16px 16px}

  .sec{padding-top:64px !important;padding-bottom:64px !important;padding-left:16px !important;padding-right:16px !important}
  .hero{padding:48px 16px 40px !important;gap:22px !important}
  .hero-t{white-space:normal !important;font-size:clamp(34px, 10.5vw, 48px) !important;line-height:1.08 !important}
  .hero p{font-size:17px !important}
  .btn-zap{width:100%;max-width:420px;box-sizing:border-box}
  .hero + div{padding-left:16px !important;padding-right:16px !important;padding-bottom:48px !important}
  .hero-mock{padding:28px 16px 24px !important;border-radius:18px !important}
  .dev-grupo{width:100%}
  .dev-note{width:86%;margin-left:7%}
  .dev-cel{width:27%;right:2%;bottom:-8px}

  .sec h2{font-size:clamp(30px, 8.6vw, 36px) !important;text-wrap:balance}
  .card{padding:24px !important}
  /* Planos mais compactos e sem botão no celular */
  #planos .sec{gap:32px !important}
  #planos .card{padding:20px 22px !important;gap:14px !important;border-radius:18px !important}
  #planos .card > div:first-child span:first-child{font-size:19px !important}
  #planos .card > div:first-child span:last-child{font-size:14px !important}
  #planos .card > div:nth-child(2){padding-bottom:14px !important}
  #planos .card > div:nth-child(2) span:first-child{font-size:28px !important}
  #planos .card ul{gap:8px !important}
  #planos .card li{font-size:14px !important;line-height:1.4 !important}
  #planos .card li svg{width:16px;height:16px;flex-basis:16px !important;transform:translateY(2px) !important}
  #planos .card > a{display:none !important}
  #planos .card + .card{margin-top:-6px}
  .dep-car{margin:0 -16px;padding:0 16px}
  .dep-trilho{gap:12px}
  .dep{padding:28px !important;gap:28px !important}
  .dep blockquote{font-size:20px !important}
  .painel{padding:24px !important;gap:28px !important;border-radius:18px !important}
  .painel > div{flex-basis:100% !important}
  .aba-cta{text-align:center;margin-top:-8px !important}
  /* Abas viram três caixinhas lado a lado, com ícone */
  #tabs{width:100%;display:grid !important;grid-template-columns:repeat(3, minmax(0, 1fr));gap:8px !important}
  .tabbtn{height:auto;min-height:96px;padding:14px 6px;border-radius:14px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;font-size:13px;line-height:1.25;text-align:center}
  .tabico{display:block;flex:0 0 auto}
  #final > img{width:380px !important;right:-120px !important}
}

/* Botão de WhatsApp (substitui os formulários do hero e do CTA final) */
.btn-zap{transition:transform .2s, filter .2s}
.btn-zap:hover{filter:brightness(1.06);transform:translateY(-1px)}

/* "Como a Innovex entra na sua equipe": título ao lado e lista fina dos passos */
.ps{display:grid;grid-template-columns:1fr 1.4fr;gap:40px 80px;align-items:center}
.ps-topo{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.ps-ol{list-style:none;margin:0;padding:0}
.sec .ps-ol > li{display:grid;grid-template-columns:32px minmax(0,1fr) auto;gap:16px;align-items:center;padding:18px 0;border-top:1px solid #2A3A50;background:none}
.ps-ol > li:last-child{border-bottom:1px solid #2A3A50}
.ps-n{font-family:'Geist Mono',monospace;font-size:14px;color:#F47927}
.ps-t{display:block;font-size:19px;line-height:1.3;font-weight:500}
.ps-tag{display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:999px;border:1px solid #3A4A5E;font-size:12px;color:#C9D1D6;white-space:nowrap}
@media (max-width:900px){.ps{grid-template-columns:1fr}}
@media (max-width:640px){
  .sec .ps-ol > li{gap:12px}
  .ps-t{font-size:16px}
  .ps-topo a{width:100%;justify-content:center;box-sizing:border-box}
}

/* Imagens dos cards do ciclo: mesma altura em todos, sem esticar com o card */
#ciclo .card .tela{height:auto;flex:none}

/* Pergunta do FAQ oculta até chegar a resposta (o display inline venceria o hidden) */
#faq dl > div[hidden]{display:none !important}