/* ============================================================
   RESPONSIVE — FitTrack
   Estratégia de phone:
   • Nunca encolher abaixo de um tamanho legível
   • Usar clamp() para escalar com o viewport
   • Zoom interno proporcional ao tamanho do frame
   Breakpoints:
     xl    ≥ 1440px
     lg    ≤ 1280px
     md    ≤ 1024px  tablet landscape
     sm    ≤  768px  tablet portrait
     xs    ≤  640px  mobile grande
     xxs   ≤  480px  mobile padrão
     xxxs  ≤  375px  iPhone SE
     min   ≤  320px  mínimo absoluto
============================================================ */

/* ============================================================
   VARIÁVEIS DE ESCALA DO PHONE
   Controla o zoom do conteúdo interno da tela do app
   conforme o tamanho do frame muda
============================================================ */
:root {
  --phone-content-zoom: 1;       /* desktop: escala base */
}

/* ============================================================
   XL — Telas largas (≥ 1440px)
============================================================ */
@media (min-width: 1440px) {
  .hero-inner,
  .preview-layout,
  .cinematic-inner,
  .stats-inner,
  .features-grid,
  .testimonials-grid,
  .footer-inner { max-width: 1300px; }

  .hero-h1      { font-size: 100px; }
  .hero-desc    { font-size: 20px; }
  .section-title{ font-size: 66px; }
  .cinematic-h2 { font-size: 58px; }
  .phone        { width: 290px; }
  .preview-phone{ width: 280px; }
}

/* ============================================================
   LG — Laptop compacto (≤ 1280px)
============================================================ */
@media (max-width: 1280px) {
  .hero-inner        { gap: 56px; }
  .cinematic-inner   { gap: 72px; }
  .features-grid     { gap: 16px; }
  .phone             { width: 252px; }
  .preview-phone     { width: 244px; }
}

/* ============================================================
   MD — Tablet landscape / small desktop (≤ 1024px)
============================================================ */
@media (max-width: 1024px) {

  /* Navbar */
  .nav-links     { display: none; }
  .nav-hamburger { display: flex; }
  .nav-inner     { gap: 12px; }

  /* Hero */
  .hero {
    padding: 100px 24px 72px;
    min-height: auto;
  }
  .hero-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .hero-phone-wrap { order: -1; }
  .hero-desc       { margin: 0 auto 36px; max-width: 520px; }
  .hero-ctas       { justify-content: center; }
  .hero-stats      { justify-content: center; }
  .hero-badge      { margin: 0 auto 24px; }
  .phone           { width: clamp(220px, 38vw, 260px); }
  .notif-toast     { right: -8px; top: -8px; width: 160px; }

  /* Preview */
  .preview-section  { padding: 80px 24px; }
  .preview-layout {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .preview-phone-area { order: -1; }
  .preview-phone   { width: clamp(240px, 44vw, 280px); }
  .preview-content { align-items: center; }
  .preview-tabs    { justify-content: center; }
  .section-desc    { margin: 0 auto; }

  /* Features */
  .features-section { padding: 80px 24px; }
  .features-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .features-header  { margin-bottom: 48px; }

  /* Cinematic */
  .cinematic { padding: 100px 24px; }
  .cinematic-inner {
    grid-template-columns: 1fr;
    gap: 48px;
    text-align: center;
  }
  .cinematic.reverse .cinematic-inner { direction: ltr; }
  .cinematic-text   { max-width: 560px; margin: 0 auto 28px; }
  .cinematic-list   { text-align: left; max-width: 480px; margin: 0 auto; }
  .cinematic-visual { justify-content: center; }
  .cinematic-img-wrap { max-width: 520px; }
  .cin-bg-orb       { display: none; }

  /* Stats */
  .stats-section { padding: 72px 24px; }
  .stats-inner {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px;
    max-width: 600px;
  }

  /* Testimonials */
  .testimonials-section { padding: 80px 24px; }
  .testimonials-grid    { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* CTA */
  .cta-section   { padding: 100px 24px; }
  .cta-phone-row { gap: 16px; }
  .cta-phone     { width: 150px; }

  /* Footer */
  .footer       { padding: 48px 24px 32px; }
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 36px; }
}

/* ============================================================
   SM — Tablet portrait (≤ 768px)
============================================================ */
@media (max-width: 768px) {

  /* Navbar */
  .nav             { height: 60px; }
  .nav-inner       { padding: 0 20px; }
  .btn-nav-cta     { display: none; }

  /* Hero */
  .hero        { padding: 88px 20px 60px; }
  .hero-h1     { font-size: clamp(40px, 9vw, 60px); }
  .hero-desc   { font-size: 16px; }
  .phone       { width: clamp(210px, 48vw, 250px); }
  .hero-badge  { font-size: 11px; padding: 5px 12px; }
  .hero-ctas   { gap: 10px; }
  .btn-store   { height: 46px; padding: 0 18px; }
  .btn-store-main { font-size: 14px; }
  .hero-stats  { gap: 18px; }
  .hero-stat-num { font-size: 19px; }

  /* Section typography */
  .section-title { font-size: clamp(28px, 6vw, 44px); }
  .section-desc  { font-size: 16px; }

  /* Preview */
  .preview-phone     { width: clamp(240px, 56vw, 280px); }
  .preview-tab-btn   { padding: 7px 14px; font-size: 12px; }
  .preview-feat-title { font-size: 16px; }
  .preview-feat-text  { font-size: 13px; }

  /* Features */
  .features-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-card  { padding: 22px; }
  .feature-title { font-size: 15px; }

  /* Cinematic */
  .cinematic       { padding: 80px 20px; }
  .cinematic-h2    { font-size: clamp(28px, 5vw, 42px); }
  .cinematic-text  { font-size: 15px; }
  .cinematic-list-item { font-size: 14px; }
  .cin-big-num     { font-size: 60px; }
  .cinematic-illustration { padding: 28px; }

  /* Stats */
  .stats-section { padding: 60px 20px; }
  .stat-label    { font-size: 13px; }

  /* Testimonials */
  .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }
  .testimonial-card  { padding: 22px; }

  /* CTA */
  .cta-section      { padding: 80px 20px; }
  .cta-headline     { font-size: clamp(36px, 7vw, 56px); }
  .cta-desc         { font-size: 16px; margin-bottom: 36px; }
  .btn-cta-primary,
  .btn-cta-secondary { height: 50px; font-size: 15px; }
  .cta-phone-wrap   { margin-top: 52px; }
  .cta-phone        { width: 130px; }

  /* Footer */
  .footer-inner  { grid-template-columns: 1fr 1fr; gap: 28px; }
  .footer-brand-desc { max-width: 100%; }
  .footer-bottom {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

/* ============================================================
   XS — Mobile grande (≤ 640px)
   FOCO PRINCIPAL: seção preview do app
============================================================ */
@media (max-width: 640px) {

  /* ----------------------------------------------------------
     PHONE DEMO — estratégia central:
     O phone ocupa ~72% do viewport. Nunca vai abaixo de 240px.
     O conteúdo interno tem zoom 1.1 para compensar a escala.
  ---------------------------------------------------------- */
  :root { --phone-content-zoom: 1.05; }

  /* Hero phone — decorativo, um pouco menor */
  .hero       { padding: 80px 16px 52px; }
  .phone      { width: clamp(220px, 58vw, 250px); }
  .notif-toast { display: none; }

  /* Preview phone — protagonista, grande! */
  .preview-section  { padding: 60px 16px; }
  .preview-phone    { width: clamp(250px, 72vw, 310px); }
  .preview-phone-glow {
    width: clamp(250px, 72vw, 320px);
    height: clamp(250px, 72vw, 320px);
  }

  /* Tabs externos do preview — scroll horizontal */
  .preview-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
    gap: 8px;
    width: 100%;
  }
  .preview-tabs::-webkit-scrollbar { display: none; }
  .preview-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 8px 16px;
    font-size: 13px;
    min-height: 40px;       /* área de toque confortável */
  }

  /* Card de descrição da feature — simplificado em mobile */
  .preview-feature-desc { padding: 18px; }
  .preview-feat-title   { font-size: 16px; }
  .preview-feat-text    { font-size: 13px; line-height: 1.55; }

  /* Outros ajustes */
  .features-section,
  .testimonials-section { padding: 60px 16px; }
  .cinematic            { padding: 64px 16px; }
  .stats-section        { padding: 52px 16px; }
  .cta-section          { padding: 72px 16px; }
  .footer               { padding: 40px 16px 28px; }

  .features-grid { grid-template-columns: 1fr; gap: 12px; }
  .features-header { margin-bottom: 36px; }

  .cinematic-img-wrap { aspect-ratio: 16 / 10; }

  .stats-inner {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    padding: 0 8px;
  }
  .stat-number { font-size: clamp(34px, 8vw, 48px); }

  .testimonials-grid { grid-template-columns: 1fr; }

  /* CTA phones */
  .cta-phone      { width: 114px; }
  .cta-phone-frame { border-radius: 26px; padding: 7px; }
  .cta-notch      { width: 56px; height: 16px; border-radius: 10px; }
  .cta-screen     { border-radius: 20px; }
  .cta-screen-content { gap: 8px; padding: 32px 10px 10px; }
  .cta-screen-icon { font-size: 26px; }

  /* Footer */
  .footer-inner { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================
   XXS — Mobile padrão (≤ 480px)
============================================================ */
@media (max-width: 480px) {
  :root { --phone-content-zoom: 1.1; }

  /* Navbar */
  .nav-logo span { display: none; }

  /* Hero */
  .hero       { padding: 76px 16px 48px; }
  .hero-h1    { font-size: clamp(36px, 11vw, 48px); letter-spacing: -.03em; }
  .hero-desc  { font-size: 15px; }
  .hero-ctas  { flex-direction: column; align-items: center; width: 100%; }
  .btn-store  { width: 100%; max-width: 280px; justify-content: center; }
  .phone      { width: clamp(220px, 62vw, 250px); }
  .hero-stats { gap: 14px; }
  .hero-stat-num   { font-size: 17px; }
  .hero-stat-label { font-size: 11px; }
  .hero-stat-divider { height: 24px; }

  /* Section typography */
  .section-title { font-size: clamp(26px, 7vw, 38px); }

  /* Preview phone — continua grande */
  .preview-phone { width: clamp(250px, 74vw, 300px); }
  .preview-phone-glow {
    width: clamp(250px, 74vw, 300px);
    height: clamp(250px, 74vw, 300px);
  }

  /* Features */
  .feature-card  { padding: 20px; }
  .feature-icon  { width: 42px; height: 42px; font-size: 20px; margin-bottom: 16px; }
  .feature-title { font-size: 15px; }
  .feature-desc  { font-size: 13px; }

  /* Cinematic */
  .cinematic     { padding: 56px 16px; }
  .cinematic-h2  { font-size: clamp(26px, 7vw, 38px); }
  .cinematic-text { font-size: 14px; }
  .cinematic-list-item { font-size: 13px; }
  .cin-big-num   { font-size: 52px; }
  .cinematic-illustration { padding: 20px; gap: 12px; }

  /* Stats */
  .stats-inner { gap: 20px; }
  .stat-label  { font-size: 12px; }

  /* Testimonials */
  .testimonial-card { padding: 18px; }
  .testimonial-text { font-size: 14px; }

  /* CTA */
  .cta-headline     { font-size: clamp(32px, 9vw, 46px); }
  .cta-desc         { font-size: 15px; margin-bottom: 28px; }
  .cta-btns         { flex-direction: column; align-items: center; width: 100%; }
  .btn-cta-primary,
  .btn-cta-secondary { width: 100%; max-width: 300px; }
  .cta-phone        { width: 100px; }
  .cta-phone.tilt1  { transform: rotate(-6deg) translateY(14px); }
  .cta-phone.tilt3  { transform: rotate(6deg) translateY(14px); }

  /* Footer */
  .footer       { padding: 36px 16px 24px; }
  .footer-inner { gap: 20px; }
  .footer-col-title { margin-bottom: 12px; }
}

/* ============================================================
   XXXS — iPhone SE / telas pequenas (≤ 375px)
============================================================ */
@media (max-width: 375px) {
  :root { --phone-content-zoom: 1.15; }

  /* Hero */
  .hero-h1    { font-size: 34px; }
  .hero-desc  { font-size: 14px; }
  .phone      { width: clamp(210px, 64vw, 240px); }
  .hero-badge { font-size: 10px; padding: 4px 10px; }

  /* Preview phone — máxima prioridade, ocupa 78% da tela */
  .preview-phone { width: clamp(240px, 78vw, 280px); }

  /* Stats */
  .stat-number { font-size: 30px; }

  /* CTA phones — só o central */
  .cta-phone        { width: 88px; }
  .cta-phone.tilt1,
  .cta-phone.tilt3  { display: none; }
  .cta-phone-row    { justify-content: center; }

  /* Features */
  .feature-card { padding: 16px; }

  /* Cinematic */
  .cin-big-num { font-size: 44px; }
}

/* ============================================================
   MIN — Telas mínimas (≤ 320px)
============================================================ */
@media (max-width: 320px) {
  :root { --phone-content-zoom: 1.2; }

  .hero-h1    { font-size: 30px; }
  .phone      { width: clamp(200px, 66vw, 220px); }
  .preview-phone { width: clamp(220px, 80vw, 260px); }
  .section-title  { font-size: 24px; }
  .cta-headline   { font-size: 28px; }
  .hero-ctas      { gap: 8px; }
  .btn-store      { height: 42px; padding: 0 14px; }
  .hero-stats     { flex-direction: column; align-items: center; gap: 10px; }
  .hero-stat-divider { display: none; }
}

/* ============================================================
   ZOOM INTERNO DO APP — aplica a variável --phone-content-zoom
   no conteúdo dentro da tela do telefone no preview section.
   Isso escala TUDO (textos, ícones, anéis) proporcionalmente.
============================================================ */
@media (max-width: 640px) {
  .preview-screen-wrap .app-screen {
    zoom: var(--phone-content-zoom);
  }
}

/* ============================================================
   DEMO FULLSCREEN
   Quando o usuário toca em "Abrir em tela cheia" o .preview-phone-area
   vira um overlay fixed cobrindo 100% da tela, com o phone centralizado.
   Ativado pela classe .demo-fullscreen no <body>.
============================================================ */

/* ---------- Barra de topo (header do overlay) ---------- */
.demo-fs-bar {
  display: none;           /* oculta em desktop e em modo normal */
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 56px;
  flex-shrink: 0;
}

.demo-fs-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}

.demo-fs-logo {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #000;
  font-size: 11px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: .01em;
  flex-shrink: 0;
}

.demo-fs-close {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--glass2);
  border: 1px solid var(--border);
  color: var(--text);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.demo-fs-close:hover  { background: var(--glass); }
.demo-fs-close:active { opacity: .75; }

/* ---------- Botão expandir (oculto em desktop) ---------- */
.demo-expand-btn {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  max-width: 340px;
  padding: 15px 24px;
  margin-top: 20px;
  border-radius: 18px;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  border: none;
  cursor: pointer;
  transition: opacity .2s, transform .15s;
  -webkit-tap-highlight-color: transparent;
}
.demo-expand-btn svg    { stroke: #000; flex-shrink: 0; }
.demo-expand-btn:active { opacity: .82; transform: scale(.97); }

/* Aparece somente em mobile */
@media (max-width: 768px) {
  /* Garantir que phone-area seja flex-column em mobile (para empilhar phone + botão) */
  .preview-phone-area { flex-direction: column; }
  .demo-expand-btn    { display: flex; }
}

/* ============================================================
   ESTADO FULLSCREEN — body.demo-fullscreen
============================================================ */
@media (max-width: 768px) {

  /* Trava scroll da página enquanto overlay aberto */
  body.demo-fullscreen { overflow: hidden; }

  /* Phone-area vira overlay de tela cheia */
  body.demo-fullscreen .preview-phone-area {
    position: fixed;
    inset: 0;
    z-index: 950;
    background: var(--bg);
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;    /* barra fica no topo... */
    padding-top:    env(safe-area-inset-top,    0px);
    padding-bottom: env(safe-area-inset-bottom, 16px);
    perspective: none;
    animation: demoFsIn .28s cubic-bezier(.25,.1,.25,1) both;
  }

  @keyframes demoFsIn {
    from { opacity: 0; transform: scale(.97) translateY(14px); }
    to   { opacity: 1; transform: scale(1)   translateY(0);    }
  }

  /* Barra de cabeçalho visível */
  body.demo-fullscreen .demo-fs-bar {
    display: flex;
    border-bottom: 1px solid var(--border);
    align-self: stretch;
  }

  /* Esconder elementos desnecessários */
  body.demo-fullscreen .preview-phone-glow,
  body.demo-fullscreen .demo-expand-btn { display: none !important; }

  /* ---- Phone em tela cheia ----
     Fórmula: o maior phone que cabe tanto em largura (88vw)
     quanto em altura (tela - 56px barra - 32px padding).
     min() escolhe o menor dos dois para garantir que caiba.
     A proporção 9:19.5 → largura_máx_dada_altura = altura × 0.4615
  ----------------------------------------------------------------- */
  body.demo-fullscreen .preview-phone {
    /* ...e o phone se centra verticalmente no espaço restante */
    margin-top: auto !important;
    margin-bottom: auto !important;

    /* Maior phone que cabe em AMBAS dimensões:
       • max largura: 88vw
       • max largura derivada da altura disponível: (svh - 88px) × (9÷19.5)
       min() garante que o phone nunca transborde */
    width: min(88vw, calc((100vh  - 88px) * 0.4615)) !important; /* fallback */
    width: min(88vw, calc((100svh - 88px) * 0.4615)) !important; /* svh modernos */
    height: auto !important;
    max-width: none !important;
    aspect-ratio: 9 / 19.5;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    flex-shrink: 0;
  }

  /* Reset zoom no fullscreen — o phone já é grande o suficiente */
  body.demo-fullscreen .preview-screen-wrap .app-screen {
    zoom: 1 !important;
  }
}

/* ============================================================
   HAMBURGER MENU
============================================================ */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--glass2);
  border: 1px solid var(--border);
  cursor: pointer;
  margin-left: auto;
  flex-shrink: 0;
  transition: background .2s;
  z-index: 1000;
}
.nav-hamburger:hover { background: var(--glass); }

.nav-hamburger span {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  border-radius: 99px;
  transition: transform .3s var(--ease), opacity .2s, width .2s;
  transform-origin: center;
}

/* X ao abrir */
.nav-hamburger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* Menu móvel */
.nav-mobile-menu {
  position: fixed;
  top: 60px;
  left: 0; right: 0;
  background: var(--nav-blur);
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease), padding .3s var(--ease);
  z-index: 850;
}
.nav-mobile-menu.open { max-height: 420px; padding: 16px 20px 24px; }

.nav-mobile-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 16px;
}
.nav-mobile-links a {
  display: block;
  padding: 13px 10px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -.01em;
  border-radius: var(--radius-sm);
  transition: background .15s, color .15s;
}
.nav-mobile-links a:hover { background: var(--glass2); color: var(--accent); }

.nav-mobile-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border-radius: 14px;
  background: var(--accent);
  color: #000;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: opacity .2s;
  width: 100%;
}
.nav-mobile-cta:hover { opacity: .85; }

.nav-mobile-divider { height: 1px; background: var(--border); margin: 8px 0 14px; }

@media (max-width: 1024px) { .nav-hamburger { display: flex; } }
@media (max-width: 375px)  { .nav-mobile-menu { top: 56px; } }

/* ============================================================
   TOUCH — Desativa hover effects pesados em touch devices
============================================================ */
@media (hover: none) {
  .feature-card:hover,
  .testimonial-card:hover        { transform: none; box-shadow: none; }
  .feature-card:hover .feature-icon { transform: none; }
  .btn-store:hover,
  .btn-nav-cta:hover,
  .btn-cta-primary:hover,
  .btn-cta-secondary:hover       { transform: none; opacity: 1; }
  .feature-card:hover::before    { opacity: 0; }
}

/* ============================================================
   REDUCED MOTION — Respeita preferência de acessibilidade
============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .phone         { animation: none; }
  .marquee-track { animation: none; }
  .reveal        { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   PRINT
============================================================ */
@media print {
  .nav, .marquee-section, .hero-bg,
  .cta-phone-wrap, .notif-toast { display: none; }
  body  { background: #fff; color: #000; }
  .hero { min-height: auto; padding: 40px 24px; }
}