/* =========================================================
   JLA V59 — Mobile Premium / Responsividade total
   Aplicado após app.css para neutralizar regras antigas conflitantes.
   Breakpoint principal: <= 900px
   ========================================================= */

/* Backdrop só existe visualmente no mobile. */
.mobile-menu-backdrop{display:none;}

@media (max-width: 900px) {
  :root {
    --mobile-header-h: 74px;
    --mobile-gutter: 16px;
    --mobile-radius: 22px;
    --mobile-shadow: 0 18px 44px rgba(13, 31, 53, .12);
  }

  html {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scroll-padding-top: calc(var(--mobile-header-h) + 14px);
  }

  body,
  .site-body {
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow-x: hidden !important;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
  }

  body.menu-open,
  html.menu-open {
    overflow: hidden !important;
  }

  .container {
    width: min(100% - 32px, 1240px) !important;
    margin-inline: auto !important;
  }

  img,
  svg,
  video,
  iframe {
    max-width: 100%;
  }

  /* Performance: remove efeitos pesados em smartphones/tablets. */
  .site-noise,
  .hero-grid-lines,
  .hero-ring,
  .method-glow,
  .client-marquee-glow {
    display: none !important;
  }

  .site-header,
  .main-menu,
  .floating-card,
  .cookie-consent {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
  }

  /* ---------------------------------------------------------
     HEADER / MENU MOBILE
     --------------------------------------------------------- */
  .jla-contact-strip {
    display: none !important;
  }

  .site-header,
  .site-header.scrolled {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    background: #1a344f !important;
    border-bottom: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: 0 10px 28px rgba(6, 20, 38, .16) !important;
    z-index: 200 !important;
  }

  .nav-wrap {
    position: relative !important;
    height: var(--mobile-header-h) !important;
    min-height: var(--mobile-header-h) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    background: transparent !important;
  }

  .site-header .brand {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    min-width: 0 !important;
    max-width: calc(100% - 66px) !important;
    height: 100% !important;
    overflow: visible !important;
  }

  .site-header .brand img {
    display: block !important;
    width: auto !important;
    max-width: min(190px, 58vw) !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
    object-position: left center !important;
    background: transparent !important;
    filter: none !important;
  }

  .menu-toggle {
    position: relative !important;
    z-index: 205 !important;
    flex: 0 0 46px !important;
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    display: grid !important;
    place-items: center !important;
    margin-left: auto !important;
    padding: 0 !important;
    border: 1px solid rgba(255, 255, 255, .26) !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .07) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07) !important;
    transition: background .2s ease, transform .2s ease, border-color .2s ease !important;
  }

  .menu-toggle:active {
    transform: scale(.96) !important;
  }

  .menu-toggle[aria-expanded="true"] {
    background: rgba(255, 255, 255, .14) !important;
    border-color: rgba(255, 255, 255, .42) !important;
  }

  .menu-toggle .menu-icon {
    width: 25px !important;
    height: 25px !important;
    color: #fff !important;
  }

  .main-menu {
    position: fixed !important;
    top: var(--mobile-header-h) !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(88vw, 370px) !important;
    height: calc(100vh - var(--mobile-header-h)) !important;
    height: calc(100dvh - var(--mobile-header-h)) !important;
    max-height: calc(100vh - var(--mobile-header-h)) !important;
    max-height: calc(100dvh - var(--mobile-header-h)) !important;
    margin: 0 !important;
    padding: 18px 16px calc(22px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    -webkit-overflow-scrolling: touch !important;
    background: linear-gradient(180deg, #1a344f 0%, #122b43 100%) !important;
    border-left: 1px solid rgba(255, 255, 255, .10) !important;
    box-shadow: -26px 0 60px rgba(5, 17, 30, .28) !important;
    transform: translate3d(104%, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
    transition: transform .28s cubic-bezier(.2,.7,.2,1) !important;
    z-index: 203 !important;
  }

  .main-menu.open {
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }

  .main-menu > a:not(.nav-client-portal) {
    position: relative !important;
    width: 100% !important;
    min-height: 50px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 0 16px !important;
    border: 1px solid transparent !important;
    border-radius: 13px !important;
    color: rgba(255, 255, 255, .82) !important;
    background: transparent !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .025em !important;
    text-transform: uppercase !important;
  }

  .main-menu > a:not(.nav-client-portal)::after {
    display: none !important;
  }

  .main-menu > a:not(.nav-client-portal):hover,
  .main-menu > a:not(.nav-client-portal).active {
    color: #fff !important;
    background: rgba(255, 255, 255, .09) !important;
    border-color: rgba(255, 255, 255, .10) !important;
  }

  .main-menu > a:not(.nav-client-portal).active::before {
    content: "";
    position: absolute;
    left: 6px;
    top: 50%;
    width: 3px;
    height: 22px;
    border-radius: 999px;
    background: #fff;
    transform: translateY(-50%);
  }

  .main-menu .nav-client-portal {
    width: 100% !important;
    max-width: none !important;
    min-height: 56px !important;
    margin: 10px 0 0 !important;
    padding: 10px 14px !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    align-items: center !important;
    justify-content: stretch !important;
    gap: 10px !important;
    border: 1px solid rgba(255, 255, 255, .28) !important;
    border-radius: 14px !important;
    background: rgba(8, 25, 41, .42) !important;
    color: #fff !important;
  }

  .main-menu .nav-client-portal span {
    min-width: 0 !important;
    align-items: flex-start !important;
  }

  .main-menu .nav-client-portal small {
    color: #9eb1c3 !important;
    font-size: 7px !important;
  }

  .main-menu .nav-client-portal b {
    color: #fff !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  .mobile-menu-backdrop {
    position: fixed !important;
    inset: var(--mobile-header-h) 0 0 0 !important;
    z-index: 198 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(4, 15, 29, .56) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition: opacity .22s ease, visibility .22s ease !important;
  }

  body.menu-open .mobile-menu-backdrop {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  main {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  /* ---------------------------------------------------------
     HERO HOME — card responsivo sem alturas engessadas
     --------------------------------------------------------- */
  .hero-premium {
    min-height: 0 !important;
    height: auto !important;
    padding: calc(var(--mobile-header-h) + 20px) 0 24px !important;
    overflow: hidden !important;
    background: #f4f8fc !important;
    color: #0d1f35 !important;
  }

  .hero-premium::before {
    background:
      radial-gradient(circle at 82% 6%, rgba(26, 52, 79, .13), transparent 34%),
      radial-gradient(circle at 8% 88%, rgba(70, 151, 196, .09), transparent 30%),
      linear-gradient(180deg, #f7fafe 0%, #eef5fa 100%) !important;
  }

  .hero-stage {
    position: relative !important;
    width: min(100% - 24px, 760px) !important;
    height: auto !important;
    min-height: 0 !important;
    margin-inline: auto !important;
    padding: 0 0 58px !important;
    display: block !important;
  }

  .hero-slide,
  .hero-slide.active {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    align-items: stretch !important;
    align-content: normal !important;
    flex-direction: column !important;
    border: 1px solid rgba(26, 52, 79, .10) !important;
    border-radius: 24px !important;
    background: #fff !important;
    box-shadow: var(--mobile-shadow) !important;
    overflow: hidden !important;
    transform: none !important;
  }

  .hero-slide {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  .hero-slide.active {
    display: flex !important;
  }

  .hero-media {
    position: relative !important;
    width: 100% !important;
    height: clamp(245px, 66vw, 380px) !important;
    min-height: 245px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    order: 1 !important;
    overflow: hidden !important;
  }

  .hero-image-shell {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: #0f2438 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  .hero-image-shell::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, rgba(5, 18, 31, .02), rgba(5, 18, 31, .17)) !important;
    mask: none !important;
    pointer-events: none !important;
  }

  .hero-image-shell img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .hero-copy {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 24px 20px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    order: 2 !important;
    background: #fff !important;
    color: #0d1f35 !important;
  }

  .hero-copy .hero-title,
  .hero-copy .site-banner-title {
    margin: 0 0 10px !important;
    max-width: 100% !important;
    color: #0d1f35 !important;
    font-size: clamp(27px, 7.4vw, 36px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance !important;
  }

  .hero-copy > p {
    margin: 0 0 18px !important;
    max-width: 100% !important;
    color: #5c6f82 !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
  }

  .hero-actions {
    width: 100% !important;
    margin: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .hero-actions .button {
    width: 100% !important;
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 13px !important;
    font-size: 13px !important;
    box-shadow: none !important;
  }

  .hero-actions .button--glass {
    display: inline-flex !important;
    background: #fff !important;
    border-color: #ccd9e4 !important;
    color: #1a344f !important;
  }

  .hero-media .floating-card {
    z-index: 5 !important;
    padding: 9px 11px !important;
    gap: 8px !important;
    border-radius: 12px !important;
    box-shadow: 0 9px 24px rgba(11, 32, 52, .17) !important;
  }

  .hero-media .floating-card small {
    font-size: 7px !important;
    letter-spacing: .06em !important;
  }

  .hero-media .floating-card b,
  .hero-media .floating-card span {
    font-size: 10px !important;
  }

  .hero-media .floating-card--status {
    top: 14px !important;
    left: 12px !important;
  }

  .hero-media .floating-card--security {
    top: 14px !important;
    right: 12px !important;
  }

  .hero-media .floating-card--response {
    left: 12px !important;
    bottom: 12px !important;
  }

  .hero-media .floating-card--response strong {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 9px !important;
  }

  .hero-media .floating-card .floating-icon {
    width: 16px !important;
    height: 16px !important;
    padding: 7px !important;
  }

  .hero-controls {
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 8px !important;
    height: 38px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    z-index: 12 !important;
  }

  .hero-dots {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .hero-dots button {
    width: 28px !important;
    height: 28px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
  }

  .hero-dots button span {
    width: 7px !important;
    height: 7px !important;
    border-radius: 999px !important;
    background: rgba(26, 52, 79, .22) !important;
  }

  .hero-dots button.active span {
    width: 20px !important;
    background: #1a344f !important;
    box-shadow: none !important;
  }

  .hero-arrows {
    display: none !important;
  }

  /* ---------------------------------------------------------
     MÉTRICAS / HOME
     --------------------------------------------------------- */
  .metrics-band {
    padding: 0 0 20px !important;
    background: #fff !important;
  }

  .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border: 1px solid #dce5ef !important;
    border-radius: 20px !important;
    box-shadow: 0 15px 40px rgba(8, 27, 49, .07) !important;
    overflow: hidden !important;
  }

  .metrics-grid article {
    min-width: 0 !important;
    padding: 20px 16px !important;
    gap: 12px !important;
    align-items: flex-start !important;
    border-right: 1px solid #dce5ef !important;
    border-bottom: 1px solid #dce5ef !important;
  }

  .metrics-grid article:nth-child(2n) {
    border-right: 0 !important;
  }

  .metrics-grid article:nth-last-child(-n+2) {
    border-bottom: 0 !important;
  }

  .metric-icon {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .metrics-grid strong {
    font-size: 24px !important;
    overflow-wrap: anywhere !important;
  }

  .metrics-grid h2 {
    font-size: 11px !important;
  }

  .metrics-grid p {
    font-size: 9.5px !important;
  }

  /* ---------------------------------------------------------
     SEÇÕES E CARDS
     --------------------------------------------------------- */
  .section {
    padding: 64px 0 !important;
  }

  .section-heading,
  .section-heading--wide,
  .home-clients-heading {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    margin-bottom: 30px !important;
  }

  .section-heading > div,
  .section-heading > p,
  .section-heading > div + div,
  .home-clients-heading > div {
    width: 100% !important;
    max-width: 100% !important;
  }

  .section-heading h2,
  .home-clients-heading h2,
  .method-copy h2,
  .technology-copy h2,
  .faq-copy h2,
  .final-cta h2,
  .about-copy h2,
  .contact-panel h2 {
    font-size: clamp(28px, 7.2vw, 36px) !important;
    line-height: 1.12 !important;
  }

  .solutions-grid,
  .case-grid,
  .testimonial-grid,
  .process-cards,
  .support-download-clean-grid,
  .download-grid,
  .client-premium-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .solution-card,
  .solution-card--large,
  .case-card {
    grid-column: auto !important;
    min-height: 0 !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .solution-card .solution-image,
  .solution-card--large .solution-image,
  .case-card .case-image {
    width: 100% !important;
    height: clamp(190px, 54vw, 290px) !important;
    min-height: 190px !important;
    order: 1 !important;
  }

  .solution-card .solution-content,
  .case-card .case-body {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 21px 18px !important;
    order: 2 !important;
    display: flex !important;
    flex-direction: column !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    background: #fff !important;
    color: #0d1f35 !important;
  }

  .solution-content h3,
  .case-body h3 {
    display: block !important;
    margin: 0 0 9px !important;
    color: #0d1f35 !important;
    font-size: 18px !important;
  }

  .solution-content p,
  .case-body p,
  .solution-tags,
  .case-tags,
  .case-result,
  .solution-content > a {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .method-layout,
  .method-layout--clean,
  .technology-layout,
  .faq-layout,
  .about-premium-grid,
  .support-layout,
  .appointment-layout,
  .contact-layout,
  .company-story-grid,
  .clients-intro-grid,
  .legal-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .method-section,
  .method-section--clean {
    overflow: hidden !important;
  }

  .method-capability-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    padding: 12px !important;
  }

  .method-capability-panel article {
    min-height: 118px !important;
    padding: 16px 12px !important;
  }

  .technology-cloud,
  .technology-cloud--brands {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .technology-chip,
  .technology-chip--brand {
    min-width: 0 !important;
    min-height: 128px !important;
    padding: 14px !important;
  }

  /* Clientes: no mobile vira carrossel por swipe, sem animação infinita pesada. */
  .client-marquee-shell {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    padding: 8px var(--mobile-gutter) 14px !important;
    margin-inline: calc(var(--mobile-gutter) * -1) !important;
    scroll-snap-type: x proximity !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .client-marquee-shell::-webkit-scrollbar {
    display: none !important;
  }

  .client-marquee-shell::before,
  .client-marquee-shell::after {
    display: none !important;
  }

  .client-marquee-track {
    width: max-content !important;
    display: flex !important;
    animation: none !important;
    transform: none !important;
  }

  .client-marquee-group[aria-hidden="true"] {
    display: none !important;
  }

  .client-marquee-item {
    width: min(78vw, 300px) !important;
    min-height: 130px !important;
    scroll-snap-align: start !important;
  }

  /* ---------------------------------------------------------
     PÁGINAS INTERNAS
     --------------------------------------------------------- */
  .page-hero-premium,
  .support-clean-hero,
  .remote-access-hero {
    min-height: 0 !important;
    padding-top: calc(var(--mobile-header-h) + 46px) !important;
    padding-bottom: 54px !important;
  }

  .page-hero-layout,
  .support-clean-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .page-hero-layout h1,
  .support-clean-hero h1,
  .site-banner-title {
    max-width: 100% !important;
    font-size: clamp(31px, 8vw, 42px) !important;
    line-height: 1.1 !important;
  }

  .page-hero-visual {
    display: none !important;
  }

  .support-clean-main {
    padding-top: 54px !important;
    padding-bottom: 34px !important;
  }

  .support-clean-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    justify-content: stretch !important;
  }

  .support-clean-actions > * {
    width: 100% !important;
    min-height: 50px !important;
    justify-content: center !important;
  }

  .support-clean-grid {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
  }

  .support-ip-card,
  .support-teamviewer-card,
  .contact-panel,
  .form-card--premium,
  .support-download-clean-card {
    min-width: 0 !important;
    border-radius: 20px !important;
  }

  .support-ip-card {
    padding: 24px 18px !important;
  }

  .support-ip-output {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 14px !important;
    margin: 24px auto 0 !important;
  }

  .support-ip-output strong {
    width: 100% !important;
    text-align: center !important;
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  .support-teamviewer-card {
    display: block !important;
    padding: 18px !important;
  }

  .support-teamviewer-logo {
    height: 135px !important;
    margin-bottom: 18px !important;
  }

  .contact-panel,
  .form-card--premium {
    padding: 26px 20px !important;
  }

  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-grid .full {
    grid-column: auto !important;
  }

  input,
  select,
  textarea,
  .form-card--premium input,
  .form-card--premium select,
  .form-card--premium textarea {
    max-width: 100% !important;
    font-size: 16px !important; /* evita zoom automático do iOS */
  }

  iframe {
    width: 100% !important;
  }

  .location-showcase,
  .location-map-card,
  .location-facade-card {
    min-width: 0 !important;
  }

  .location-map-card iframe {
    min-height: 330px !important;
  }

  /* ---------------------------------------------------------
     CTA FINAL
     --------------------------------------------------------- */
  .final-cta {
    padding: 30px 22px !important;
    border-radius: 22px !important;
  }

  .final-cta-actions {
    width: 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .final-cta-actions > * {
    width: 100% !important;
    justify-content: center !important;
  }

  /* ---------------------------------------------------------
     FOOTER MOBILE PREMIUM
     --------------------------------------------------------- */
  .footer {
    margin-top: 48px !important;
    overflow: hidden !important;
  }

  .footer-main {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 18px !important;
    padding: 44px 0 28px !important;
  }

  .footer-brand {
    grid-column: 1 / -1 !important;
    min-width: 0 !important;
    text-align: left !important;
  }

  .footer-brand img {
    width: auto !important;
    max-width: min(210px, 62vw) !important;
    max-height: 68px !important;
    margin: 0 0 14px !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  .footer-brand > p {
    max-width: 360px !important;
    margin: 0 auto !important;
    text-align: center !important;
    font-size: 10px !important;
    line-height: 1.6 !important;
  }

  .footer .socials {
    width: 100% !important;
    justify-content: center !important;
    margin-top: 14px !important;
    gap: 7px !important;
  }

  .footer .socials a {
    width: 34px !important;
    height: 34px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 10px !important;
  }

  .footer-column {
    min-width: 0 !important;
    align-items: center !important;
    text-align: center !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  .footer-column > span {
    font-size: 10px !important;
  }

  .footer-column p,
  .footer-column a {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
  }

  .footer-column:last-child {
    grid-column: 1 / -1 !important;
  }

  .footer .footer-portal-button {
    width: min(100%, 260px) !important;
    max-width: 260px !important;
    min-height: 52px !important;
    margin: 12px auto 0 !important;
    grid-template-columns: 22px minmax(0, 1fr) auto !important;
    border: 1px solid rgba(255, 255, 255, .30) !important;
    background: rgba(8, 25, 41, .40) !important;
  }

  .footer-bottom {
    width: min(100% - 32px, 1240px) !important;
    min-height: 54px !important;
    margin-inline: auto !important;
    padding: 12px 0 calc(12px + env(safe-area-inset-bottom)) !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    font-size: 7px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }

  .footer-bottom > span {
    min-width: 0 !important;
    font-size: 7px !important;
    text-overflow: ellipsis !important;
    overflow: hidden !important;
  }

  .footer-powered {
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
  }

  .footer-powered > span {
    font-size: 5.5px !important;
  }

  .footer-powered img {
    width: 44px !important;
    max-width: 44px !important;
    max-height: 12px !important;
  }

  /* ---------------------------------------------------------
     COOKIES / WHATSAPP
     --------------------------------------------------------- */
  .cookie-consent {
    left: 12px !important;
    right: 12px !important;
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(62dvh, 460px) !important;
    overflow-y: auto !important;
    padding: 15px !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    border-radius: 17px !important;
    box-shadow: 0 18px 50px rgba(4, 15, 29, .34) !important;
    z-index: 400 !important;
  }

  .cookie-consent__copy strong {
    font-size: 12px !important;
  }

  .cookie-consent__copy p {
    font-size: 10px !important;
  }

  .cookie-consent__actions {
    width: 100% !important;
    align-items: stretch !important;
    gap: 9px !important;
  }

  .cookie-consent__buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .cookie-btn {
    width: 100% !important;
    min-height: 44px !important;
    padding: 9px 10px !important;
    font-size: 10px !important;
  }

  .whatsapp-float.whatsapp-float--icon {
    right: 15px !important;
    bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    z-index: 250 !important;
  }

  /* Tabelas/admin-like blocks embutidos em páginas públicas não estouram a viewport. */
  .table-responsive,
  table {
    max-width: 100% !important;
  }
}

@media (max-width: 520px) {
  :root {
    --mobile-header-h: 70px;
  }

  .container {
    width: min(100% - 24px, 1240px) !important;
  }

  .site-header .brand img {
    max-width: min(168px, 56vw) !important;
    max-height: 49px !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    flex-basis: 44px !important;
  }

  .main-menu {
    width: min(92vw, 350px) !important;
    padding-inline: 14px !important;
  }

  .hero-stage {
    width: min(100% - 16px, 760px) !important;
  }

  .hero-media {
    height: clamp(225px, 64vw, 310px) !important;
  }

  .hero-copy {
    padding: 21px 17px 19px !important;
  }

  .hero-copy .hero-title,
  .hero-copy .site-banner-title {
    font-size: clamp(25px, 7.8vw, 32px) !important;
  }

  .hero-copy > p {
    font-size: 13px !important;
  }

  .hero-media .floating-card--security {
    top: 64px !important;
    right: 10px !important;
  }

  .metrics-grid {
    grid-template-columns: 1fr !important;
  }

  .metrics-grid article,
  .metrics-grid article:nth-child(2n),
  .metrics-grid article:nth-last-child(-n+2) {
    border-right: 0 !important;
    border-bottom: 1px solid #dce5ef !important;
  }

  .metrics-grid article:last-child {
    border-bottom: 0 !important;
  }

  .method-capability-panel,
  .technology-cloud,
  .technology-cloud--brands {
    grid-template-columns: 1fr !important;
  }

  .footer-main {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }

  .footer-brand,
  .footer-column:last-child {
    grid-column: auto !important;
  }

  .footer-column {
    padding-top: 4px !important;
  }

  .footer-bottom {
    width: calc(100% - 20px) !important;
    gap: 5px !important;
    font-size: 6.5px !important;
  }

  .footer-bottom > span {
    font-size: 6.5px !important;
  }

  .footer-powered img {
    width: 40px !important;
    max-width: 40px !important;
  }

  .cookie-consent__buttons {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 360px) {
  .site-header .brand img {
    max-width: 152px !important;
  }

  .hero-media .floating-card--status,
  .hero-media .floating-card--security {
    transform: scale(.9) !important;
    transform-origin: top left !important;
  }

  .hero-media .floating-card--security {
    transform-origin: top right !important;
  }

  .hero-copy {
    padding-inline: 15px !important;
  }

  .footer-bottom {
    gap: 3px !important;
  }

  .footer-bottom > span {
    font-size: 6px !important;
  }

  .footer-powered > span {
    font-size: 5px !important;
  }

  .footer-powered img {
    width: 36px !important;
    max-width: 36px !important;
  }
}

@media (hover: none) and (pointer: coarse) {
  a:hover,
  button:hover,
  .solution-card:hover,
  .case-card:hover,
  .client-marquee-item:hover {
    transform: none !important;
  }
}

/* Cobertura adicional de componentes públicos para a V59 */
@media (max-width: 900px) {
  .company-story-visual {
    min-height: 0 !important;
  }
  .company-visual-frame {
    height: clamp(330px, 78vw, 520px) !important;
    border-radius: 22px !important;
  }
  .company-visual-frame > img {
    border-radius: 16px !important;
  }
  .company-signature-card {
    max-width: min(210px, 64vw) !important;
  }
  .company-principles-grid,
  .company-pillars-grid,
  .company-principles-grid--clean,
  .company-pillars-grid--clean {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .company-principle,
  .company-pillars-grid article {
    min-height: 0 !important;
  }

  .client-showcase-grid,
  .client-showcase-grid--light {
    grid-template-columns: 1fr !important;
  }
  .client-showcase-card,
  .client-showcase-card--light {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
    overflow: hidden !important;
  }
  .client-showcase-card .client-showcase-logo,
  .client-showcase-card--light .client-showcase-logo {
    width: 100% !important;
    height: 190px !important;
    min-height: 190px !important;
    border-right: 0 !important;
    border-bottom: 1px solid #e4ebf2 !important;
  }
  .client-showcase-content,
  .client-showcase-card--light .client-showcase-content {
    min-height: 0 !important;
    padding: 22px 18px !important;
  }

  .detailed-services {
    gap: 18px !important;
  }
  .detailed-services > article {
    display: flex !important;
    flex-direction: column !important;
    gap: 18px !important;
    padding: 14px !important;
    border-radius: 20px !important;
    scroll-margin-top: calc(var(--mobile-header-h) + 20px) !important;
  }
  .service-detail-image {
    width: 100% !important;
    height: clamp(210px, 58vw, 320px) !important;
    margin: 0 !important;
    border-radius: 16px !important;
  }
  .service-detail-copy,
  .service-features {
    width: 100% !important;
    min-width: 0 !important;
  }
  .service-detail-copy h2 {
    font-size: 25px !important;
  }
  .service-features {
    margin: 0 !important;
    padding: 18px !important;
  }

  .remote-access-hero__inner {
    width: 100% !important;
    max-width: 100% !important;
  }
  .remote-access-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .remote-download-card {
    grid-template-columns: 1fr !important;
    border-radius: 20px !important;
  }
  .remote-download-card__logo {
    min-height: 135px !important;
    padding: 20px !important;
  }
  .remote-download-card__content {
    padding: 22px 18px !important;
  }
  .remote-download-card__content .button {
    width: 100% !important;
    justify-content: center !important;
  }
  .remote-security-note {
    align-items: flex-start !important;
    text-align: left !important;
  }

  .contact-cards {
    width: 100% !important;
  }
  .contact-cards > a,
  .contact-cards > div {
    min-width: 0 !important;
  }
  .contact-cards b {
    overflow-wrap: anywhere !important;
  }

  .location-showcase {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    gap: 16px !important;
  }
  .location-facade-card > img {
    min-height: 0 !important;
    height: clamp(330px, 88vw, 520px) !important;
  }
  .location-facade-label {
    left: 18px !important;
    right: 18px !important;
    bottom: 18px !important;
  }
  .location-map-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .button--route {
    width: 100% !important;
    justify-content: center !important;
  }

  .appointment-layout aside,
  .faq-copy,
  .legal-layout aside {
    position: static !important;
    top: auto !important;
  }
  .faq-item button {
    min-width: 0 !important;
    padding-inline: 16px !important;
  }
  .faq-item button > span {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}


/* =========================================================
   JLA V81 — Cookie mobile compacto sem afetar o layout
   Mantém o WhatsApp fixo no canto, sem empurrar elementos.
   ========================================================= */
@media (max-width: 620px) {
  .cookie-consent {
    position: fixed !important;
    left: 10px !important;
    right: 84px !important;
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: 340px !important;
    max-height: 190px !important;
    margin: 0 !important;
    transform: none !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    display: block !important;
    padding: 11px 12px !important;
    border-radius: 14px !important;
    box-sizing: border-box !important;
    z-index: 240 !important;
    background: rgba(4,16,31,.97) !important;
    box-shadow: 0 14px 34px rgba(4,15,29,.28) !important;
  }

  .cookie-consent__copy {
    width: 100% !important;
    min-width: 0 !important;
  }

  .cookie-consent__copy strong {
    margin: 0 0 3px !important;
    font-size: 10.5px !important;
    line-height: 1.25 !important;
  }

  .cookie-consent__copy p {
    margin: 0 !important;
    font-size: 8.5px !important;
    line-height: 1.35 !important;
  }

  .cookie-consent__actions {
    width: 100% !important;
    display: block !important;
    margin-top: 7px !important;
    white-space: normal !important;
  }

  .cookie-consent__actions > a {
    display: inline-block !important;
    margin: 0 !important;
    font-size: 8px !important;
    line-height: 1.2 !important;
  }

  .cookie-consent__buttons {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-top: 7px !important;
  }

  .cookie-consent .cookie-btn {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    padding: 7px 6px !important;
    border-radius: 9px !important;
    font-size: 8.5px !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }

  .whatsapp-float.whatsapp-float--icon {
    position: fixed !important;
    right: 14px !important;
    bottom: calc(16px + env(safe-area-inset-bottom)) !important;
    width: 58px !important;
    height: 58px !important;
    min-width: 58px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    z-index: 260 !important;
  }
}

@media (max-width: 350px) {
  .cookie-consent {
    left: 8px !important;
    right: 76px !important;
    padding: 10px !important;
  }
  .cookie-consent .cookie-btn {
    min-height: 40px !important;
    font-size: 8px !important;
  }
}