/* =========================================================
   JLA V60 — Mobile: contraste, clientes em loop e tecnologias 3x
   28/08/2026
   Carregado depois do mobile-v59.css.
   ========================================================= */

@media (max-width: 900px) {
  /* ---------------------------------------------------------
     1) Remove micro-rótulos de baixo contraste em blocos escuros
     --------------------------------------------------------- */
  .company-pillars-section .section-heading .eyebrow,
  .method-section .method-copy .eyebrow,
  .final-cta .eyebrow {
    display: none !important;
  }

  /* evita espaço residual depois de remover os rótulos */
  .company-pillars-section .section-heading h2,
  .method-section .method-copy h2,
  .final-cta h2 {
    margin-top: 0 !important;
  }

  /* ---------------------------------------------------------
     2) Cards escuros: nunca mais ícone preto/navy em fundo escuro
     --------------------------------------------------------- */
  .company-pillars-grid article,
  .company-pillars-grid--clean article {
    background: linear-gradient(145deg, #244766 0%, #1a344f 100%) !important;
    border-color: rgba(255,255,255,.16) !important;
    box-shadow: 0 16px 34px rgba(4,18,32,.16) !important;
  }

  .company-pillars-grid article > div,
  .company-pillars-grid--clean article > div {
    background: #2f6187 !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    color: #fff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12) !important;
  }

  .company-pillars-grid .company-pillar-icon,
  .company-pillars-grid article > div svg,
  .company-pillars-grid--clean article > div svg {
    color: #fff !important;
    fill: none !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  .company-pillars-grid h3,
  .company-pillars-grid--clean h3 {
    color: #fff !important;
  }

  .company-pillars-grid p,
  .company-pillars-grid--clean p {
    color: #d9e5ee !important;
    opacity: 1 !important;
  }

  .method-capability-panel article {
    background: linear-gradient(145deg, #244766 0%, #1a344f 100%) !important;
    border-color: rgba(255,255,255,.15) !important;
  }

  .method-capability-panel article > div {
    background: #2f6187 !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,.16) !important;
  }

  .method-capability-panel .method-capability-icon,
  .method-capability-panel article > div svg {
    color: #fff !important;
    stroke: currentColor !important;
    opacity: 1 !important;
  }

  .method-capability-panel h3 {
    color: #fff !important;
  }

  /* ---------------------------------------------------------
     3) Clientes: loop infinito também no mobile, igual desktop
     --------------------------------------------------------- */
  .home-clients-section {
    overflow: hidden !important;
  }

  .client-marquee-shell {
    overflow: hidden !important;
    padding: 10px 0 16px !important;
    margin-inline: 0 !important;
    scroll-snap-type: none !important;
    touch-action: pan-y !important;
  }

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

  .client-marquee-track {
    display: flex !important;
    width: max-content !important;
    transform: none !important;
    animation: clientMarquee 30s linear infinite !important;
    animation-play-state: running !important;
    will-change: transform !important;
  }

  .client-marquee-track:hover,
  .client-marquee-track:active {
    animation-play-state: running !important;
  }

  .client-marquee-group,
  .client-marquee-group[aria-hidden="true"] {
    display: flex !important;
    flex: 0 0 auto !important;
    gap: 10px !important;
    padding-right: 10px !important;
  }

  .client-marquee-item {
    flex: 0 0 auto !important;
    width: min(62vw, 235px) !important;
    min-height: 116px !important;
    scroll-snap-align: none !important;
    padding: 12px !important;
    grid-template-columns: 72px minmax(0,1fr) !important;
    gap: 12px !important;
  }

  .client-marquee-logo {
    width: 72px !important;
    height: 60px !important;
    padding: 6px !important;
  }

  .client-marquee-logo img {
    max-width: 64px !important;
    max-height: 50px !important;
  }

  /* ---------------------------------------------------------
     4) Tecnologias: 3 cards por linha, compactos e premium
     --------------------------------------------------------- */
  .technology-cloud,
  .technology-cloud--brands {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: stretch !important;
    width: 100% !important;
  }

  .technology-chip,
  .technology-chip--brand {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 104px !important;
    padding: 10px 7px !important;
    border-radius: 15px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: center !important;
    background: #fff !important;
    border: 1px solid #dbe5ee !important;
    box-shadow: 0 8px 18px rgba(13,31,53,.06) !important;
    overflow: hidden !important;
  }

  .technology-chip--brand > div,
  .technology-chip > div {
    width: 100% !important;
    height: 34px !important;
    min-height: 34px !important;
    margin: 0 0 7px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #f5f8fb !important;
    border-radius: 9px !important;
    color: #1a344f !important;
  }

  .technology-chip--brand > div img,
  .technology-chip > div img {
    width: auto !important;
    max-width: 58px !important;
    height: auto !important;
    max-height: 25px !important;
    object-fit: contain !important;
    object-position: center !important;
    filter: none !important;
    opacity: 1 !important;
  }

  .technology-chip--brand b,
  .technology-chip b {
    width: 100% !important;
    margin: 0 0 5px !important;
    color: #132940 !important;
    font-size: 8.5px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .technology-chip--brand small,
  .technology-chip small {
    width: 100% !important;
    margin-top: auto !important;
    padding-top: 4px !important;
    border-top: 1px solid #e4edf3 !important;
    color: #168b7a !important;
    font-size: 6.5px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;
    text-align: center !important;
    overflow-wrap: anywhere !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  .technology-fallback-icon {
    width: 23px !important;
    height: 23px !important;
    color: #1a344f !important;
  }

  /* Garante contraste de ícones em outros cards navy do mobile. */
  .footer-portal-icon,
  .support-clean-actions svg,
  .final-cta-actions svg {
    opacity: 1 !important;
  }
}

@media (max-width: 420px) {
  .technology-cloud,
  .technology-cloud--brands {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 6px !important;
  }

  .technology-chip,
  .technology-chip--brand {
    min-height: 98px !important;
    padding: 8px 5px !important;
    border-radius: 13px !important;
  }

  .technology-chip--brand > div,
  .technology-chip > div {
    height: 31px !important;
    min-height: 31px !important;
  }

  .technology-chip--brand > div img,
  .technology-chip > div img {
    max-width: 50px !important;
    max-height: 22px !important;
  }

  .technology-chip--brand b,
  .technology-chip b {
    font-size: 7.5px !important;
  }

  .technology-chip--brand small,
  .technology-chip small {
    font-size: 6px !important;
  }

  .client-marquee-item {
    width: min(70vw, 220px) !important;
  }
}