/* Overrides responsivos (mobile) da landing — CIDE.
   Carregado POR ULTIMO no index.html para ter precedencia sobre styles.css/styles-v2.css. */

/* Mata qualquer scroll horizontal residual (laptop/cards flutuantes, animacoes) */
html, body { overflow-x: hidden; max-width: 100%; }

/* ---------- Nav ---------- */
@media (max-width: 880px) {
  /* esconde os links-ancora; logo + CTAs + hamburguer */
  .topnav .links { display: none; }
  /* ordem mobile: [hamburguer + logo] na esquerda, [Entrar/Demo] na direita.
     flex em vez do grid do desktop; margin-left:auto empurra os CTAs p/ a margem direita */
  .topnav .inner { display: flex; align-items: center; gap: 10px; }
  .topnav .right { margin-left: auto; gap: 8px; }
  /* aproxima os tracos do hamburguer da margem (mantem os 44px de tap target) */
  .topnav .nav-burger { margin-left: -8px; }
}

/* ---------- Hero: celular (PhoneMockup) no lugar do notebook em <=768px ---------- */
/* O celular NAO ocupa 100% da largura: HeroPhoneDemo (app.jsx) reduz a "cena" com
   `zoom` reservando folga lateral, onde os tooltips ficam pendurados na borda do
   aparelho (como o export do Claude Design e as feat-bubbles do notebook). Os
   tooltips ficam no overhang ORIGINAL (right/left:100%) — nao reancorados. */
.hero-phone-host { display: flex; justify-content: center; padding-top: 8px; }

/* Texto do app dentro do celular alinhado a esquerda: o hero centraliza tudo
   (.hero{text-align:center}) e o celular herdava; o notebook ja reseta via
   .laptop-screen-inner. */
.ph-stage { text-align: left; }

/* Tab ativa: gradiente rosa->vermelho, simetrico aos botoes do notebook. O export
   `light` define color:#fff mas NAO redefine o background do .on, e a regra
   .ph-outer.light .ph-tab (#fff) vence o gradiente de .ph-tab.on por especificidade. */
.ph-outer.light .ph-tab.on {
  background: linear-gradient(135deg,#d91965,#ef405b);
  box-shadow: 0 10px 24px rgba(217,25,101,0.34);
}

/* Tooltips didaticos: SO o texto. Remove o icone (.tic) e a tag "IA"/"Auditavel"
   (.ttag) — ocupavam espaco do texto sem agregar. Mais estreitos (165 vs 200) e
   mais colados ao aparelho (margin 8 vs 16) p/ recuarem das bordas e nao cortarem. */
.ph-tip .tic, .ph-tip .ttag { display: none; }
.ph-tip { width: 165px; padding: 9px 13px; gap: 0; }
.ph-tip.tl, .ph-tip.bl { margin-right: 8px; }
.ph-tip.tr, .ph-tip.br { margin-left: 8px; }