/* ValiSys - restaura o coverflow automático no mobile */
@media (max-width: 760px) {
  .real-screens-showcase {
    min-height: 520px !important;
    overflow: visible !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  html,
  body {
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  .coverflow-stage.phone-stack-stage {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    height: 480px !important;
    min-height: 480px !important;
    padding: 0 !important;
    overflow: visible !important;
    perspective: 1100px !important;
    transform-style: preserve-3d !important;
    scroll-snap-type: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    clip-path: none !important;
  }

  .coverflow-stage.phone-stack-stage::before {
    display: none !important;
  }

  .phone-stack-stage .coverflow-slide,
  .phone-stack-stage .coverflow-slide.active,
  .phone-stack-stage .coverflow-slide.left-1,
  .phone-stack-stage .coverflow-slide.left-2,
  .phone-stack-stage .coverflow-slide.right-1,
  .phone-stack-stage .coverflow-slide.right-2,
  .phone-stack-stage .coverflow-slide.hidden {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: min(220px, 62vw) !important;
    min-width: 0 !important;
    max-width: 220px !important;
    margin: 0 !important;
    aspect-ratio: 709 / 1536 !important;
    transform-origin: center center !important;
    transition: transform .45s ease, filter .45s ease, opacity .45s ease !important;
    scroll-snap-align: none !important;
  }

  .phone-stack-stage .coverflow-slide.active {
    z-index: 5 !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    filter: none !important;
    transform: translate(-50%, -50%) translateZ(100px) scale(1) rotateY(0deg) !important;
  }

  .phone-stack-stage .coverflow-slide.right-1 {
    z-index: 4 !important;
    opacity: .82 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) translateX(58px) translateY(12px) translateZ(20px) scale(.88) rotateY(-14deg) !important;
  }

  .phone-stack-stage .coverflow-slide.right-2 {
    z-index: 3 !important;
    opacity: .58 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) translateX(102px) translateY(18px) translateZ(-26px) scale(.78) rotateY(-18deg) !important;
  }

  .phone-stack-stage .coverflow-slide.left-1 {
    z-index: 4 !important;
    opacity: .82 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) translateX(-58px) translateY(12px) translateZ(20px) scale(.88) rotateY(14deg) !important;
  }

  .phone-stack-stage .coverflow-slide.left-2 {
    z-index: 3 !important;
    opacity: .58 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) translateX(-102px) translateY(18px) translateZ(-26px) scale(.78) rotateY(18deg) !important;
  }

  .phone-stack-stage .coverflow-slide.hidden {
    z-index: 1 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, -50%) scale(.72) !important;
  }

  .coverflow-window.phone-window {
    width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin: 0 !important;
  }

  .coverflow-image.phone-screen {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  .coverflow-dots {
    display: flex !important;
  }

  /* Corrige a seção visual que ficava branca e vazia no mobile. */
  .importance-pin-section {
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .importance-sticky {
    position: relative !important;
    inset: auto !important;
    min-height: auto !important;
    height: auto !important;
  }

  .importance-scene {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    min-height: 0 !important;
    height: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .importance-phone,
  .importance-floating,
  .importance-floating.active {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: 150px !important;
    margin: 0 !important;
    padding: 24px !important;
    border-radius: 28px !important;
    background: #fff !important;
    color: #153c2a !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 16px 38px rgba(4, 31, 20, .16) !important;
  }

  .importance-phone {
    min-height: 210px !important;
  }

  .importance-scene h2,
  .importance-scene h3,
  .importance-scene h4,
  .importance-scene strong {
    color: #123c29 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .importance-scene p,
  .importance-scene span,
  .importance-scene small {
    color: #52665b !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/* Força contraste dos textos das cartas sobre o fundo branco. */
@media (max-width: 760px) {
  body .importance-pin-section .importance-scene > .importance-phone *,
  body .importance-pin-section .importance-scene > .importance-floating * {
    color: #123c29 !important;
    -webkit-text-fill-color: #123c29 !important;
    opacity: 1 !important;
    visibility: visible !important;
    text-shadow: none !important;
    mix-blend-mode: normal !important;
  }

  body .importance-pin-section .importance-scene > .importance-phone p,
  body .importance-pin-section .importance-scene > .importance-phone small,
  body .importance-pin-section .importance-scene > .importance-phone li,
  body .importance-pin-section .importance-scene > .importance-floating p,
  body .importance-pin-section .importance-scene > .importance-floating small,
  body .importance-pin-section .importance-scene > .importance-floating li {
    color: #52665b !important;
    -webkit-text-fill-color: #52665b !important;
  }
}

@media (max-width: 390px) {
  .phone-stack-stage .coverflow-slide,
  .phone-stack-stage .coverflow-slide.active,
  .phone-stack-stage .coverflow-slide.left-1,
  .phone-stack-stage .coverflow-slide.left-2,
  .phone-stack-stage .coverflow-slide.right-1,
  .phone-stack-stage .coverflow-slide.right-2,
  .phone-stack-stage .coverflow-slide.hidden {
    width: min(210px, 60vw) !important;
  }
}

/* Cartas da rotina: cada uma sobe e cobre a anterior durante o scroll. */
@media (max-width: 760px) {
  .importance-pin-section {
    position: relative !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
    padding-bottom: 12vh !important;
  }

  .importance-sticky {
    position: relative !important;
    inset: auto !important;
    min-height: auto !important;
    height: auto !important;
    overflow: visible !important;
  }

  .importance-scene {
    position: relative !important;
    display: block !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
    isolation: isolate;
  }

  .importance-scene > .importance-phone,
  .importance-scene > .importance-floating,
  .importance-scene > .importance-floating.active {
    position: sticky !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    min-height: min(64svh, 500px) !important;
    margin: 0 0 24vh !important;
    padding: 28px !important;
    box-sizing: border-box !important;
    border-radius: 32px !important;
    background: #fff !important;
    color: #153c2a !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    box-shadow: 0 22px 52px rgba(4, 31, 20, .22) !important;
    will-change: transform;
  }

  .importance-scene > :nth-child(1) {
    top: calc(78px + env(safe-area-inset-top)) !important;
    z-index: 1 !important;
  }

  .importance-scene > :nth-child(2) {
    top: calc(90px + env(safe-area-inset-top)) !important;
    z-index: 2 !important;
  }

  .importance-scene > :nth-child(3) {
    top: calc(102px + env(safe-area-inset-top)) !important;
    z-index: 3 !important;
  }

  .importance-scene > :nth-child(4) {
    top: calc(114px + env(safe-area-inset-top)) !important;
    z-index: 4 !important;
  }

  .importance-scene > :nth-child(5) {
    top: calc(126px + env(safe-area-inset-top)) !important;
    z-index: 5 !important;
  }

  .importance-scene > :last-child {
    margin-bottom: 0 !important;
  }

  .importance-scene h2,
  .importance-scene h3,
  .importance-scene h4,
  .importance-scene strong {
    color: #123c29 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .importance-scene p,
  .importance-scene span,
  .importance-scene small {
    color: #52665b !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}