/* ═══════════════════════════════════════════════════════════════
   LUPÍA COLDCHAIN · APRESENTAÇÃO COMERCIAL
   Mobile Responsive Patch — v1.0
   ────────────────────────────────────────────────────────────────
   Aplicado APÓS o <style> inline do index.html.
   Usa !important seletivamente p/ vencer regras inline existentes.
   Breakpoints: ≤640px (mobile), ≤420px (small), landscape ≤500h.
   ──────────────────────────────────────────────────────────────── */

/* ─────────────────────────────────────────────────────
   MOBILE PADRÃO — ≤640px (iPhone 12/13/14, Android comum)
   ───────────────────────────────────────────────────── */
@media (max-width: 640px) {

  /* Slide: padding mais enxuto pra ganhar área útil */
  .slide {
    padding: 72px 20px 60px !important;
  }

  /* UI overlay reposicionado pra não invadir conteúdo */
  .slide-marker {
    top: 18px !important;
    left: 20px !important;
    font-size: 0.62rem !important;
  }
  .brand-mark {
    top: 16px !important;
    right: 20px !important;
    font-size: 0.58rem !important;
    gap: 8px !important;
  }
  .brand-mark .sep { width: 10px !important; }
  .counter {
    bottom: 16px !important;
    right: 20px !important;
    font-size: 0.72rem !important;
  }
  .nav-hint { display: none !important; }

  /* Setas menores — touch swipe é o método primário no mobile */
  .nav-arrow {
    width: 44px !important;
    height: 44px !important;
    opacity: 0.55 !important;
  }
  .nav-arrow.prev { left: 8px !important; }
  .nav-arrow.next { right: 8px !important; }

  /* Número decorativo gigante: oculto em mobile (poluía a tela) */
  .deco-number { display: none !important; }

  /* Tipografia escalada down — mantém hierarquia visual */
  .h-mega {
    font-size: clamp(2rem, 8vw, 2.75rem) !important;
    line-height: 1.05 !important;
  }
  .h-xl {
    font-size: clamp(1.5rem, 6.5vw, 2.1rem) !important;
    line-height: 1.1 !important;
  }
  .h-lg {
    font-size: clamp(1.3rem, 5.5vw, 1.75rem) !important;
    line-height: 1.15 !important;
  }

  .cover-title {
    font-size: clamp(2.25rem, 11vw, 3.5rem) !important;
    line-height: 1 !important;
  }
  .manifesto-name {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
    line-height: 1 !important;
  }
  .close-title {
    font-size: clamp(2rem, 10vw, 3.25rem) !important;
    line-height: 1 !important;
  }
  .provoke-question {
    font-size: clamp(1.75rem, 8vw, 2.75rem) !important;
    line-height: 1.1 !important;
  }

  .lede { font-size: 1rem !important; line-height: 1.5 !important; }

  /* Grids: força coluna única em todos os layouts complexos */
  .problem-grid,
  .cap-grid,
  .receive-grid,
  .stages,
  .next-steps,
  .predict-grid,
  .compliance-grid,
  .invest-grid,
  .compare,
  .sovereign,
  .thermal-labels,
  .trade-block {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .compare-vs { display: none !important; }
  .stages::before { display: none !important; }
  .marginalia { display: none !important; }

  /* Cards mais compactos */
  .problem-card,
  .cap-card,
  .predict-card,
  .invest-card,
  .compare-side,
  .receive-card,
  .next-step,
  .scenario,
  .scenario-card {
    padding: 18px !important;
  }
  .problem-card .stat { font-size: 2rem !important; margin-bottom: 8px !important; }
  .cap-card .verb { font-size: 1.5rem !important; margin-bottom: 10px !important; }
  .predict-card .num { font-size: 1.75rem !important; }
  .stage-dot {
    width: 44px !important;
    height: 44px !important;
    font-size: 1rem !important;
    margin-bottom: 12px !important;
  }
  .receive-num { font-size: 1.75rem !important; }

  /* Timeline mais legível em telas estreitas */
  .timeline { gap: 6px !important; }
  .timeline-row {
    padding: 10px 12px !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
  }
  .timeline-row .title { font-size: 0.95rem !important; }
  .timeline-row .desc { font-size: 0.82rem !important; }
  .timeline-row .time { font-size: 0.78rem !important; }

  /* SVGs ilustrativas se adaptam à largura */
  .arch-svg, .shield-svg { max-width: 100% !important; height: auto !important; }

  /* Thermal-bar mais compacta */
  .thermal-bar { height: 36px !important; margin: 24px 0 18px !important; }
  .thermal-footer,
  .stages-footer,
  .receive-footer,
  .compliance-footer {
    margin-top: 16px !important;
    padding-top: 14px !important;
    font-size: 0.9rem !important;
  }

  /* Bloco de assinatura/contato (slide final) empilhado */
  .close-signature {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 20px !important;
  }
  .close-contact { text-align: left !important; }
  .close-contact .row { justify-content: flex-start !important; }

  /* Dropcap mais discreta */
  .dropcap::first-letter {
    font-size: 3em !important;
    margin-right: 6px !important;
  }

  /* Pull quote mais legível */
  .pull-quote {
    font-size: 1.15rem !important;
    line-height: 1.4 !important;
    padding: 14px 0 !important;
  }

  /* Discount pill / scenario badge ajustes */
  .scenario-header { margin-bottom: 14px !important; }
  .scenario-badge { font-size: 0.7rem !important; }

  /* Case ID (cenários narrativos) */
  .case-id .case-num { font-size: 1.85rem !important; }
  .case-id .case-name { font-size: 1.1rem !important; }
}

/* ─────────────────────────────────────────────────────
   MOBILE PEQUENO — ≤420px (iPhone SE, Android compacto)
   ───────────────────────────────────────────────────── */
@media (max-width: 420px) {
  .slide { padding: 64px 16px 52px !important; }

  .slide-marker { font-size: 0.58rem !important; left: 16px !important; }
  .brand-mark { font-size: 0.54rem !important; right: 16px !important; }
  .brand-mark .brand-suffix { display: none !important; }
  .brand-mark .sep { display: none !important; }
  .counter { right: 16px !important; font-size: 0.68rem !important; }

  .h-mega { font-size: 1.75rem !important; }
  .h-xl   { font-size: 1.35rem !important; }
  .h-lg   { font-size: 1.2rem !important; }

  .cover-title { font-size: 2rem !important; }
  .manifesto-name { font-size: 1.85rem !important; }
  .close-title { font-size: 1.85rem !important; }
  .provoke-question { font-size: 1.55rem !important; }

  .lede { font-size: 0.95rem !important; }

  .nav-arrow { width: 38px !important; height: 38px !important; }
  .nav-arrow.prev { left: 4px !important; }
  .nav-arrow.next { right: 4px !important; }

  .problem-card .stat { font-size: 1.75rem !important; }
  .cap-card .verb { font-size: 1.3rem !important; }
}

/* ─────────────────────────────────────────────────────
   LANDSCAPE MOBILE — altura ≤500px (smartphone deitado)
   ───────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  .slide { padding: 36px 64px !important; }

  .slide-marker { top: 12px !important; left: 64px !important; }
  .brand-mark { top: 10px !important; right: 64px !important; }
  .counter { bottom: 10px !important; right: 64px !important; }
  .nav-hint { display: none !important; }
  .deco-number { display: none !important; }

  .h-mega { font-size: clamp(1.5rem, 4vh, 2.25rem) !important; }
  .h-xl   { font-size: clamp(1.25rem, 3.5vh, 1.85rem) !important; }
  .h-lg   { font-size: clamp(1.1rem, 3vh, 1.5rem) !important; }

  .cover-title { font-size: clamp(2rem, 6vh, 3rem) !important; }
  .manifesto-name { font-size: clamp(1.75rem, 5vh, 2.5rem) !important; }
  .close-title { font-size: clamp(1.75rem, 5vh, 2.5rem) !important; }
  .provoke-question { font-size: clamp(1.5rem, 4.5vh, 2.25rem) !important; }
}

/* ─────────────────────────────────────────────────────
   ACCESSIBILITY — respeita prefers-reduced-motion
   ───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .deck { transition: none !important; }
  .progress-bar { transition: none !important; }
  .slide-content > * { transition: none !important; animation: none !important; }
}