/* ==========================================================================
   Camada de ajustes por cima do desenho: ícones e responsivo.
   Carrega DEPOIS de home.css e resources.css e só corrige o que quebrava no
   toque e na tela estreita. O desenho do desktop continua igual.

   O que esta camada resolve, na ordem:
     1. piso de legibilidade (nada de texto de 7px na mão da pessoa)
     2. alvo de toque de 44px
     3. respiro pro nav flutuante, que tapava o fim da página
     4. tablet: o empilhamento com pin era feito pra mouse e sobrava vazio
        no iPad em pé e cortava conteúdo no iPad deitado
     5. telefone deitado, que é tela de 390px de altura
     6. área segura do iPhone (notch e barra de gestos)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. ÍCONES
   As setas do desenho eram os caracteres ↗ ↓ ✓ ＋. No iOS esses caracteres têm
   apresentação EMOJI por padrão, então o iPhone trocava a seta fininha por um
   quadrado azul de emoji, e o "ícone da App Store" virava aquele mesmo quadrado.
   Agora são SVG, que renderiza igual em todo aparelho e herda a cor do texto.
   Tamanho continua vindo do font-size de quem envolve, como era com o caractere.
   -------------------------------------------------------------------------- */
.ico {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -0.12em;
  flex: none;
}
/* a maçã é sólida, então pede um pouco menos de caixa pra pesar igual */
.ico-apple { width: .86em; height: .86em; vertical-align: -0.06em; }

/* --------------------------------------------------------------------------
   1. PISO DE LEGIBILIDADE
   O desenho usa rótulo miúdo como textura. No monitor funciona, no celular
   vira sujeira ilegível. Aqui o piso é 10px pra rótulo e 11px pra frase.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .eyebrow { font-size: 11px; letter-spacing: 1px; }
  .mini-label,
  .demo-instruction,
  .scene-demo-label,
  .scene-report-foot,
  .scene-count { font-size: 11px; }

  .demo-row .row-status,
  .stage-top, .stage-bottom,
  .hero-bottom,
  .scene-bottom,
  .plan-badge { font-size: 10px; }

  .demo-row p,
  .scene-address,
  .scene-assignment,
  .scene-item em { font-size: 11px; }

  .scene-float { font-size: 12px; }
  .billing-detail, .plans-note { font-size: 12px; }
  .footer-bottom { font-size: 12px; }
}

/* sobras de 8px e 9px que vinham de regras mais específicas do desenho */
@media (max-width: 1180px) {
  .scene-panel .scene-topline .eyebrow,
  .scene-window .scene-window-head .scene-pill,
  .demo-timeline .demo-now small,
  .demo-card .demo-progress span,
  .pricing-heading .eyebrow,
  .closing .eyebrow { font-size: 10px; }
}

/* o rótulo do topo da cena é longo e mono: sem apertar o espaçamento, o
   colchete de fecho sobra sozinho numa segunda linha no celular */
@media (max-width: 520px) {
  .scene-topline .eyebrow { letter-spacing: 0; max-width: 78%; }
}

@media (max-width: 420px) {
  /* no 360 o CSS do desenho volta a apertar; o piso continua valendo */
  .eyebrow { font-size: 10px; letter-spacing: .6px; }
  .hero-bottom, .demo-row .row-status { font-size: 10px; }
  .status-live { font-size: 10px; }
  .scene-item em { font-size: 10px; }
  .scene-window-head { font-size: 12px; }
}

/* --------------------------------------------------------------------------
   1b. NADA DE PALAVRA QUEBRADA NO BOTÃO
   No iPhone o "Começar agora" virava "Começar / agora" e o "Explore o Fluxo"
   virava "Explore o / Fluxo". Rótulo de ação não quebra: ou cabe numa linha, ou
   os dois descem um embaixo do outro.
   -------------------------------------------------------------------------- */
/* rótulo de ação nunca quebra, em largura nenhuma. No iPad de 768 o
   "Assinar o PRO" ainda estava partindo em duas linhas. */
.button,
.text-link,
.login,
.hero-bottom a,
.desktop-nav a { white-space: nowrap; }

@media (max-width: 760px) {

  .hero-actions {
    flex-wrap: wrap;
    align-items: center;
    column-gap: 20px;
    row-gap: 16px;
  }
  .hero-actions .button { gap: 16px; padding-inline: 22px; }
  .hero-actions .text-link { gap: 10px; }
}

@media (max-width: 400px) {
  /* nessa largura os dois não cabem lado a lado sem apertar o texto */
  .hero-actions { flex-direction: column; align-items: flex-start; row-gap: 14px; }
  .hero-actions .button { width: 100%; justify-content: space-between; }
}

/* --------------------------------------------------------------------------
   2. ALVO DE TOQUE
   Dedo não é cursor. Em aparelho de toque tudo que é clicável passa a ter
   44px de altura, que é o mínimo da Apple. Onde o link é inline, o ganho vem
   de padding vertical com margem negativa, pra não empurrar o layout.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) {
  .desktop-nav a,
  .demo-tabs button,
  .login,
  .text-link,
  .brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Estes dois o desenho liga e desliga por `display` conforme a largura, então
     aqui vai SÓ altura. Mexer no display deles ressuscita o botão escondido:
     já aconteceu duas vezes, com o CTA estourando a largura do header e com o
     "Menu" aparecendo em tablet largo. */
  .header-cta,
  .menu-toggle { min-height: 44px; }

  .desktop-nav a { padding-inline: 20px; }
  .demo-tabs button,
  .demo-next,
  .button { min-height: 44px; }

  /* links de rodapé e de apoio: cresce a área, não o espaçamento */
  .footer-bottom a,
  .footer-bottom nav a,
  .footer-top a:not(.brand),
  .origin-top a,
  .origin-bottom a,
  .hero-bottom a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-block: 12px;
    margin-block: -12px;
  }

  /* o seletor mensal/anual é radio: a etiqueta inteira vira o alvo */
  .billing-switch label,
  .billing-switch > * {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* sem :hover em toque, senão o estado fica grudado depois do tap */
  a:hover, button:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   3. RESPIRO PRO NAV FLUTUANTE
   O nav é fixo no rodapé. Sem isso ele tapa a última linha do rodapé e a
   última frase do card de plano.
   -------------------------------------------------------------------------- */
@media (max-width: 1180px) {
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
  /* âncora que cai atrás do nav ao clicar no menu */
  :root { scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   4. TABLET E CELULAR: A TRAVA
   A cena gruda no topo enquanto a próxima sobe por cima. Isso vale aqui também,
   não só no desktop. O que quebrava era a ALTURA, não o efeito: a cena pedia
   `min-height: max(720px, 100svh)` e, num iPad de 1366px de altura, sobrava
   meia tela vazia em cima e embaixo do conteúdo. Em toque a cena passa a ter a
   altura do próprio conteúdo, e a trava continua funcionando porque a próxima
   cena vem logo abaixo no fluxo.
   -------------------------------------------------------------------------- */
@media (pointer: coarse) and (max-width: 1366px) {
  .resource-scene { min-height: 0; margin-bottom: 10px; }
  .scene-panel { padding-block: 40px 56px; }
  .scene-layout { padding: 34px 0 40px; align-items: start; }
}

/* iPad em pé e em paisagem: a coluna dupla só se sobrar largura de verdade */
@media (pointer: coarse) and (min-width: 761px) and (max-width: 1100px) {
  .scene-layout { grid-template-columns: 1fr; gap: 40px; }
  .scene-visual { max-width: 560px; margin-inline: auto; }
  .scene-copy h3 { font-size: clamp(44px, 6.4vw, 66px); }
  .scene-copy > p { max-width: 62ch; }

  .hero { grid-template-columns: 1fr; gap: 34px; }
  .hero h1 { font-size: clamp(50px, 7.4vw, 72px); }
  .hero-description { font-size: 17px; max-width: 58ch; }
  .hero-stage { min-height: 0; padding: 56px 32px 72px; }
  .demo-card { max-width: 620px; margin-inline: auto; }
}

/* iPad Pro em pé: largo o bastante pra duas colunas, alto demais pra centralizar */
@media (pointer: coarse) and (min-width: 1101px) {
  .resource-scene { min-height: 0; }
  .scene-layout { align-items: start; }
}

/* --------------------------------------------------------------------------
   5. TELEFONE DEITADO
   844x390 é um caso real e cai nas regras de desktop por causa da largura.
   Aqui a altura manda: nada de seção com altura mínima de tela cheia.
   -------------------------------------------------------------------------- */
@media (max-height: 560px) and (orientation: landscape) {
  .hero { grid-template-columns: 1fr 1fr; align-items: start; }
  .hero-stage,
  .resource-scene,
  .scene-panel { min-height: 0 !important; }
  .hero h1 { font-size: clamp(32px, 4.4vw, 48px); }
  .hero-stage { padding: 36px 20px 48px; }
  .section-pad { padding-block: 48px; }
  .desktop-nav { bottom: calc(8px + env(safe-area-inset-bottom)); }
  .site-footer { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
}

/* --------------------------------------------------------------------------
   6. ÁREA SEGURA
   O html tem viewport-fit=cover, então o conteúdo vai embaixo do notch e da
   barra de gestos se ninguém reservar o espaço.
   -------------------------------------------------------------------------- */
@supports (padding: max(0px)) {
  @media (max-width: 1180px) {
    .site-header,
    .section-pad,
    .hero-copy {
      padding-left: max(var(--gutter, 22px), env(safe-area-inset-left));
      padding-right: max(var(--gutter, 22px), env(safe-area-inset-right));
    }
  }
}

/* --------------------------------------------------------------------------
   7. MOVIMENTO REDUZIDO
   Quem pede menos movimento não pode ficar com cena grudada nem com conteúdo
   escondido esperando um scroll que não vai animar.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .resource-story .resource-scene { position: relative !important; top: auto !important; }
  .resource-story .scene-panel { transform: none !important; }
}

/* --------------------------------------------------------------------------
   8. TELEFONE DEITADO NÃO TRAVA
   Com 390px de altura a cena mal cabe na tela, e a trava vira pisca-pisca. O JS
   já exige 560px de altura pra ligar o pin; isto aqui é o cinto de segurança em
   CSS, caso o JS ligue e a tela gire depois.
   -------------------------------------------------------------------------- */
@media (max-height: 559px) {
  .resource-story.is-pinned .resource-scene { position: relative !important; top: auto !important; }
  .resource-story.is-pinned .scene-panel { transform: none !important; }
}