/* =============================================================================
 * landing-mobile.css — layout mobile-first da home pública (≤767px).
 *
 * Estratégia: o HTML é único (uma única fonte de copy). styles.css,
 * fundamento.css, markets-demo.css e o <style id="hero-v2-style"> inline
 * continuam servindo o desktop. Este arquivo entra DEPOIS deles na cascata
 * e, dentro do @media (max-width:767px), reorganiza o layout mobile inteiro.
 *
 * Decisões aplicadas:
 *   - Topbar respeita estética do desktop (transparente com gradient sutil),
 *     mesma ordem (telos esq | emojis centro | login/CTA dir), logo 56px
 *   - Hero V2 mobile: pilares lado a lado + slogan + IES tab + card ambição
 *     em grid 2×3, cada "tela" como snap-point
 *   - Constelação VISÍVEL como segunda tela do fundamento (não escondida)
 *   - Grid de princípios em coluna única com descrição sempre visível, e
 *     scroll vertical livre dentro da seção (data-lenis-prevent em #principios
 *     marcado no index.html)
 *   - Cubo material-vivo escondido (até decidirmos formato mobile)
 *   - Footer com surface dark forçado (texto legível sobre paper claro)
 *   - Presente flutuante fixed no canto inferior direito (compacto, sempre
 *     visível durante o hero)
 *
 * Scroll-snap manual continua ATIVO em mobile, com snap-points específicos
 * (definidos no getSnapPoints() em index.html quando matchMedia mobile bate).
 * ============================================================================= */

@media (max-width: 767px) {

  /* ---------- 1. TOPBAR ---------- */

  /* Mantém a estética do desktop: gradiente sutil que some embaixo, SEM
     blur/background opaco. O script de scroll-snap garante que conteúdo
     nunca rola "atrás" da topbar de forma confusa (cada tela é um snap). */
  /* (sem override de .topbar — herda do styles.css linha 3325) */

  /* Grid 3 colunas igual desktop: telos esq | emojis centro | login dir */
  .topbar__in {
    grid-template-columns: auto 1fr auto !important;
    min-height: 64px !important;
    padding: 6px 12px !important;
    gap: 8px !important;
  }
  /* Reset do `order:1/2/3` que styles.css @media 760 aplica em brand/actions/nav
     — esse `order` invertia visualmente a ordem das colunas do grid. */
  .topbar__in > .brand,
  .topbar__in > .topbar__toggles,
  .topbar__in > .topbar__actions {
    order: initial !important;
  }
  .topbar__in > .brand { justify-self: start; }
  .topbar__toggles {
    justify-self: center !important;
    gap: 6px !important;
  }
  .topbar__in > .topbar__actions {
    display: flex !important;
    justify-self: end !important;
  }
  /* styles.css @media 760 esconde `.topbar__actions .topbar-link` (#openLogin)
     em mobile — mas a gente QUER ele visível: vira "Começar de graça" quando
     rola past hero (lógica do <script> em index.html linha 631-668). */
  .topbar__actions .topbar-link {
    display: inline-block !important;
  }

  /* Logo 56px — meio termo entre 40 (muito pequeno) e 96 (gigante) */
  .brand__logos { height: 56px !important; }
  .brand__logo { height: 56px !important; }
  .brand__logos--footer { height: 44px !important; }
  .brand__logo--footer { height: 44px !important; }

  .topbar-toggle {
    width: 32px !important;
    height: 32px !important;
    font-size: 14px !important;
    border-radius: 8px;
  }

  /* Login link compacto, vira CTA dourado quando rola past hero (lógica
     já existe no <script> em index.html linha 631-668) */
  .topbar-link {
    font-size: 12px !important;
    padding: 5px 8px !important;
  }
  body.is-scrolled-past-hero #openLogin {
    padding: 7px 14px !important;
    font-size: 12.5px !important;
  }


  /* ---------- 2. HERO V2 ---------- */

  /* Solta a altura — em mobile cresce com conteúdo, sem forçar 100dvh */
  .hero-v2 {
    min-height: auto !important;
    padding: 24px 0 32px !important;
    display: block !important;
  }

  .hero-v2 .wrap.hero-v2__container {
    padding: 0 16px;
  }

  /* Grid já vira 1 coluna por @media 980 no <style id="hero-v2-style">, mas
     forçamos pra garantir e reduzimos o gap */
  .hero-v2__grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  /* Pilares: 2 itens lado a lado, compactos */
  .hero-v2__pillars {
    padding: 12px 6px !important;
    border-radius: 12px !important;
    flex-direction: row !important;
    display: flex !important;
  }
  .hero-v2__pillars .heroBadges__item {
    border-right: 1px solid rgba(212, 168, 87, .22) !important;
    border-bottom: none !important;
    padding: 4px 10px !important;
    flex: 1 1 0 !important;
  }
  .hero-v2__pillars .heroBadges__item:last-child {
    border-right: none !important;
  }
  .hero-v2__pillar-text {
    font-size: 12px !important;
  }
  .hero-v2__pillar-strong {
    font-size: 13px !important;
    white-space: normal !important;
    margin-bottom: 2px !important;
  }
  .hero-v2__pillar-soft {
    font-size: 10.5px !important;
    white-space: normal !important;
    line-height: 1.25 !important;
  }

  /* Slogan compacto */
  .hero-v2__slogan-card {
    padding: 22px 18px !important;
    border-radius: 12px !important;
  }
  .hero-v2__title {
    font-size: 28px !important;
    line-height: 1.1 !important;
    white-space: normal !important;
  }

  /* IES tab discreto, no fluxo entre slogan e card de ambição */
  .hero-v2__ies-tab {
    align-self: stretch !important;
    margin: 0 !important;
    padding: 8px 16px !important;
    font-size: 11px !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 12px !important;
    flex-wrap: wrap !important;
  }

  /* Card de ambição compacto — protagonista mas cabe na tela */
  .hero-v2__card {
    padding: 24px 18px !important;
    gap: 18px !important;
    border-radius: 14px !important;
    flex: initial !important;
  }
  .hero-v2__card-title {
    font-size: 26px !important;
    line-height: 1.1 !important;
  }

  /* Decisão: grid 2×3 em vez de 1col (que estica a página pra 600+px) */
  .hero-v2__options {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .hero-v2__option {
    padding: 14px 8px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
    line-height: 1.2 !important;
    min-height: 64px !important;
  }
  .hero-v2__option small {
    font-size: 10px !important;
    line-height: 1.2 !important;
    margin-top: 3px !important;
  }


  /* ---------- 3. MATERIAL VIVO (cubo 3D): escondido em mobile ---------- */

  /* Não traduz pra mobile no formato cubo. Fica oculto até decidirmos
     novo formato (swiper horizontal, lista vertical, etc.) */
  #material-demo {
    display: none !important;
  }


  /* ---------- 4. FUNDAMENTO + PRINCÍPIOS ---------- */

  /* #fundamento mobile ocupa 200dvh (2 telas). Dentro dele:
     - .fundamento-constellation com `position: sticky; top:0; height:100dvh`
       — fica fixa visualmente enquanto o usuário rola pela seção.
     - .fundamento-header overlay no TOPO (1ª metade) com scrim escuro radial
       e o título "Cada decisão..." centralizado por cima da constelação.
     Snap-point 1: topo da section → mostra scrim+título sobre constelação.
     Snap-point 2: meio da section → header já saiu por cima, vê só
     constelação cheia. A "escadinha" entre os dois snaps é o slide natural
     do header pra fora da viewport. */
  #fundamento.fundamento-section {
    min-height: 200dvh !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding: 0 !important;
    position: relative !important;
  }
  #fundamento.fundamento-section > .wrap {
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    position: relative !important;
    /* wrap precisa ter a altura do section (200dvh) pra sticky funcionar
       — sticky precisa de "espaço pra rolar" dentro do parent. */
    min-height: 200dvh !important;
    /* Reveal aplica transform/filter/will-change que cria stacking context
       e quebra position:sticky nos descendentes. Anula em mobile (perde
       só a animação de entrada da seção). */
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    will-change: auto !important;
  }

  /* #principios (16 cards) mantém comportamento de lista vertical */
  #principios.fundamento-section {
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    display: block !important;
    padding: 32px 0 24px !important;
  }
  #principios.fundamento-section > .wrap {
    padding: 0 16px !important;
  }

  /* Header overlay no topo da section — vidrinho escuro horizontal (faixa
     no meio vertical) que destaca o título sem virar retângulo destacado
     na pintura. Fade nas pontas pra integrar com a constelação que aparece
     em cima e embaixo. Em scroll, o overlay sobe junto e libera a tela só
     com constelação no snap seguinte. */
  #fundamento .fundamento-header.panel,
  #fundamento .fundamento-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 100dvh !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 24px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    /* Faixa horizontal escura (vidrinho) no meio, fade pra cima/baixo */
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(11, 8, 5, .15) 22%,
      rgba(11, 8, 5, .82) 38%,
      rgba(11, 8, 5, .88) 50%,
      rgba(11, 8, 5, .82) 62%,
      rgba(11, 8, 5, .15) 78%,
      transparent 100%) !important;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    pointer-events: none;
  }
  .fundamento-eyebrow {
    font-size: 11px !important;
    letter-spacing: .28em !important;
    margin-bottom: 22px !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, .9);
  }
  .fundamento-title {
    font-size: 38px !important;
    line-height: 1.06 !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, .85), 0 1px 4px rgba(0, 0, 0, .9) !important;
  }

  /* Constelação STICKY: ocupa fundo da seção fundamento, fixa enquanto
     o user rola dentro dos 200dvh. Sem moldura. */
  .fundamento-constellation {
    position: sticky !important;
    top: 0 !important;
    display: block !important;
    width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    aspect-ratio: auto !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: visible !important;
    z-index: 1 !important;
  }
  .fundamento-constellation__svg {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  /* Labels dos nós VISÍVEIS (font maior + stroke pra ler sobre pintura).
     Coordenadas em viewBox 100×180 (portrait) — ver fundamento.js. */
  .fundamento-node__label {
    display: block !important;
    font-size: 3.4px !important;
    fill: #fbe8b4 !important;
    stroke: rgba(0, 0, 0, .92) !important;
    stroke-width: 0.55px !important;
    paint-order: stroke fill !important;
    font-weight: 700 !important;
  }

  /* Legenda no RODAPÉ da constelação com fundo escuro discreto pra ler */
  .fundamento-legend {
    position: absolute !important;
    left: 50% !important;
    bottom: 18px !important;
    top: auto !important;
    transform: translateX(-50%) !important;
    margin: 0 !important;
    padding: 8px 14px !important;
    background: rgba(14, 10, 6, .60) !important;
    border: 1px solid rgba(212, 168, 87, .25) !important;
    border-radius: 999px !important;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 10.5px !important;
    z-index: 4 !important;
    max-width: calc(100vw - 24px) !important;
    gap: 10px 14px !important;
  }
  .fundamento-legend__item {
    color: #f7eccd !important;
  }

  /* Princípios viram lista vertical de cards expandidos com descrição
     sempre visível (sem hover trick) */
  .fundamento-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .fundamento-card {
    padding: 16px !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  /* Tatuagem viva sumir em mobile (pseudo-estrela atrás dos cards), evita
     ruído visual no formato lista */
  .fundamento-card::after {
    display: none !important;
  }

  /* Desc deixa de ser overlay absoluto e vira parte do card */
  .fundamento-card__desc {
    position: static !important;
    inset: auto !important;
    display: block !important;
    padding: 0 !important;
    margin-top: 10px !important;
    opacity: 1 !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    pointer-events: auto !important;
    color: rgba(247, 236, 205, .85) !important;
  }

  /* Cancela o swap hover/spotlight que escondia campos atrás da desc */
  .fundamento-card:hover .fundamento-card__base,
  .fundamento-card:hover .fundamento-card__name,
  .fundamento-card:hover .fundamento-card__metric,
  .fundamento-card.is-spotlight .fundamento-card__base,
  .fundamento-card.is-spotlight .fundamento-card__name,
  .fundamento-card.is-spotlight .fundamento-card__metric {
    opacity: 1 !important;
  }

  .fundamento-card__name {
    font-size: 22px !important;
    margin: 4px 0 6px !important;
  }
  .fundamento-card__base {
    font-size: 11px !important;
    letter-spacing: .14em !important;
  }
  .fundamento-card__metric-num,
  .fundamento-card__metric-pct,
  .fundamento-card__metric-plus {
    font-size: 36px !important;
  }
  .fundamento-card__metric-kind {
    font-size: 17px !important;
  }
  .fundamento-card__metric-prefix {
    font-size: 12px !important;
  }

  .fundamento-footer {
    font-size: 11.5px !important;
    margin-top: 18px !important;
    padding: 0 8px !important;
  }


  /* ---------- 5. CADASTRO ---------- */

  #cadastro {
    padding: 32px 0 28px !important;
    min-height: auto !important;
  }
  #cadastro .wrap {
    padding: 0 16px !important;
  }
  #bottomTitle {
    font-size: 26px !important;
    line-height: 1.1 !important;
    margin-bottom: 8px !important;
  }
  .cta__form--simple {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .cta__form--simple button[type="submit"] {
    min-height: 52px !important;
    font-size: 15px !important;
  }


  /* ---------- 6. FOOTER ---------- */

  /* Surface dark forçado (resolve texto invisível ao rolar pra fora
     da pintura que setou data-surface=dark globalmente) */
  .footer {
    background: rgba(14, 10, 6, .85) !important;
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid rgba(212, 168, 87, .22) !important;
    padding: 22px 16px 28px !important;
    --surface-ink: #f7eccd;
    --surface-ink-soft: rgba(247, 236, 205, .82);
  }
  .footer .footer__in {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
  }
  .footer__brand {
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    color: #f7eccd !important;
  }
  .footer__t,
  .footer .mini.muted,
  .footer__credits .mini,
  .footer__links a {
    color: #f7eccd !important;
  }
  .footer__links {
    flex-wrap: wrap !important;
    gap: 8px 14px !important;
  }
  .footer__credits {
    align-items: flex-start !important;
    text-align: left !important;
  }


  /* ---------- 7. PRESENTE FLUTUANTE ---------- */

  /* Mantém fixed no canto inferior direito como no desktop (não enterra no
     fim da página). Versão compacta — só SVG + counter, sem tag manuscrita.
     IO no presente-banco.js volta a observar a hero (some quando rola pra
     fora dela, igual desktop). */
  #giftBancoCta {
    position: fixed !important;
    right: 12px !important;
    bottom: 12px !important;
    left: auto !important;
    top: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    flex-direction: column !important;
    gap: 4px !important;
    width: auto !important;
    z-index: 100;
  }
  .gift-cta__svg {
    width: 64px !important;
    height: 64px !important;
  }
  /* Tag "presente" e count escondidos em mobile pra reduzir footprint —
     o SVG do pacote já comunica visualmente */
  .gift-cta__tag { display: none !important; }
  .gift-cta__count {
    font-size: 9px !important;
    padding: 2px 6px !important;
    margin-top: 2px !important;
  }
  .gift-cta__count strong { font-size: 11px !important; }


  /* ---------- 8. DECORAÇÕES PESADAS escondidas em mobile ---------- */

  /* Doodles matemáticos/jurídicos espalhados (.d1-.d12), grid, grão.
     Em mobile entulham e custam GPU. */
  .fx-doodles,
  .fx-grid,
  .fx-grain {
    display: none !important;
  }


  /* ---------- 9. AJUSTES DIVERSOS ---------- */

  /* Sticky CTA (botão flutuante "Começar minha jornada") fica oculto pra
     não conflitar com presente flutuante no fluxo. */
  .sticky-cta {
    display: none !important;
  }

  /* Modal de login full-screen amigável */
  .modal__card {
    width: calc(100% - 24px) !important;
    max-height: calc(100vh - 48px) !important;
    overflow-y: auto !important;
  }

}