/* ═══════════════════════════════════════════════════════════════
   LUPÍA COLDCHAIN · APRESENTAÇÃO COMERCIAL
   Mobile Responsive Patch — v1.1
   ────────────────────────────────────────────────────────────────
   Carregado por último: vence base.css/components.css/responsive.css.
   Usa !important seletivamente p/ vencer regras estruturais.
   Breakpoints: ≤640px (mobile), ≤480px (compact), ≤420px (small),
   landscape ≤500h.
   ──────────────────────────────────────────────────────────────── */

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

  /* Performance: corta efeitos GPU caros em mobile.
     - blur backdrop (nav-arrow) custa muito em Android médio
     - noise SVG full-screen é decorativo, não essencial em telas pequenas
     - cubic-bezier "overshoot" no entry fica menos pronunciado */
  .nav-arrow { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  body::before { display: none !important; }

  /* Animações de entrada mais rápidas: usuário já fez swipe, quer ver.
     2 primeiros elementos entram juntos; depois stagger curtíssimo. */
  .slide-content > * {
    transition: opacity 0.28s ease, transform 0.28s ease !important;
    transform: translateY(12px) !important;
  }
  .slide.active .slide-content > * { transform: translateY(0) !important; }
  .slide.active .slide-content > *:nth-child(1) { transition-delay: 0s !important; }
  .slide.active .slide-content > *:nth-child(2) { transition-delay: 0.05s !important; }
  .slide.active .slide-content > *:nth-child(3) { transition-delay: 0.10s !important; }
  .slide.active .slide-content > *:nth-child(4) { transition-delay: 0.15s !important; }
  .slide.active .slide-content > *:nth-child(5) { transition-delay: 0.20s !important; }
  .slide.active .slide-content > *:nth-child(n+6) { transition-delay: 0.25s !important; }

  /* Transição entre slides um pouco mais rápida em mobile */
  .deck { transition-duration: 0.45s !important; }

  /* Slide: padding com safe-area-inset garantido + breathing room
     para o chrome (slide-marker no topo; counter + nav-hint no rodapé).
     padding-bottom precisa cobrir: counter bottom (16-18) + altura (~12)
     + backdrop bleed (4) + gap visível (~36) ≈ 70-80px mínimo. */
  .slide {
    padding-top:    max(72px, calc(env(safe-area-inset-top, 0px) + 32px)) !important;
    padding-bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 40px)) !important;
    padding-left:   max(20px, env(safe-area-inset-left, 0px)) !important;
    padding-right:  max(20px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Slides centrados nunca rolam pra cima escondendo o topo */
  .slide-cover,
  .slide-provoke,
  .slide-manifesto,
  .slide-close,
  .slide-cover .slide-content,
  .slide-provoke .slide-content,
  .slide-manifesto .slide-content,
  .slide-close .slide-content {
    justify-content: flex-start !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 {
    /* O grid 110px 1fr fica apertado em mobile — colapsa pra coluna única */
    grid-template-columns: 1fr !important;
    padding: 10px 12px !important;
    gap: 4px !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 COMPACTO — ≤480px (iPhone padrão portrait)
   Setas saem: swipe é o método primário, e elas atrapalham
   a leitura lateral em cards.
   ───────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav-arrow { display: none !important; }
  .slide {
    padding-top:    max(64px, calc(env(safe-area-inset-top, 0px) + 28px)) !important;
    padding-bottom: max(56px, calc(env(safe-area-inset-bottom, 0px) + 24px)) !important;
    padding-left:   max(18px, env(safe-area-inset-left, 0px)) !important;
    padding-right:  max(18px, env(safe-area-inset-right, 0px)) !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 já oculta em ≤480px */

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

  /* Pull-quote em telas <420: evita quebras de 2-3 chars por linha */
  .pull-quote {
    font-size: 1.05rem !important;
    line-height: 1.35 !important;
    padding: 10px 0 !important;
    max-width: none !important;
  }
  .pull-quote::before { font-size: 4em !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; }

  /* Tipografia editorial italic compacta no landscape pra não roubar altura */
  .manifesto-body {
    font-size: clamp(1rem, 3vh, 1.3rem) !important;
    line-height: 1.3 !important;
    max-width: 50ch !important;
  }
  .close-sub {
    font-size: clamp(0.95rem, 2.6vh, 1.2rem) !important;
    margin-bottom: clamp(20px, 3vh, 32px) !important;
    max-width: 60ch !important;
  }
  .pull-quote {
    font-size: clamp(0.95rem, 2.8vh, 1.25rem) !important;
    padding: 10px 0 !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; }
}