/* Mobile overrides for K2 site (≤768px) */
@media (max-width: 768px) {
  /* HEADER: força tamanho legível e esconde menu inline */
  .header {
    height: 60px !important;
    gap: 0 !important;
    justify-content: space-between !important;
    padding: 10px 16px !important;
  }
  .header .logo {
    width: 44px !important;
    height: 44px !important;
  }
  .header .menu { display: none !important; }
  /* Ocultar botão "Agendar conversa" no header (Figma mobile: só logo + hambúrguer) */
  .header .button { display: none !important; }

  /* Hamburger */
  .k2-burger {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 1001;
    width: 40px;
    height: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    background: transparent;
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
  }
  .k2-burger span {
    width: 20px;
    height: 2px;
    background: #fff;
    transition: transform .25s, opacity .25s;
  }
  .k2-burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .k2-burger.open span:nth-child(2) { opacity: 0; }
  .k2-burger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Drawer */
  .k2-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s;
    z-index: 999;
  }
  .k2-drawer-backdrop.open { opacity: 1; pointer-events: auto; }
  .k2-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    width: 78vw;
    max-width: 320px;
    background: #001219;
    border-left: 1px solid rgba(255,255,255,.08);
    transform: translateX(100%);
    transition: transform .28s ease;
    z-index: 1000;
    padding: 80px 0 24px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
  }
  .k2-drawer.open { transform: translateX(0); }
  .k2-drawer .k2-item {
    display: block;
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
    color: #fff;
    text-align: left;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    font-family: inherit;
  }
  .k2-drawer .k2-item:active { background: rgba(255,255,255,.05); }

  /* Reduz padding lateral e vertical das seções */
  .main.home .section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* ================= HERO ================= */
  .section.hero {
    padding: 0 !important;
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
    justify-content: center !important;
    gap: 20px !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  .section.hero .icons { display: none !important; }
  .section.hero .title {
    width: 100% !important;
    max-width: 340px !important;
    font-size: 34px !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    padding: 0 20px !important;
    font-weight: 400 !important;
  }
  .section.hero .subtitle {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    padding: 0 24px !important;
    color: rgba(255,255,255,.75) !important;
  }
  .section.hero .buttons {
    flex-direction: column !important;
    gap: 12px !important;
    width: 100% !important;
    padding: 8px 24px 0 !important;
    align-items: stretch !important;
  }
  .section.hero .buttons > * {
    width: 100% !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    height: auto !important;
    text-align: center !important;
    justify-content: center !important;
    white-space: normal !important;
    border-radius: 8px !important;
  }
  /* Botão secundário como outline (Figma mostra borda completa, não só underline) */
  .section.hero .buttons .button.secondary {
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.35) !important;
    border-radius: 8px !important;
  }

  /* CTA "Agende uma conversa" abaixo do painel de integração */
  .section.integracao .right .button,
  .section.integracao .right > .button {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  /* ================= NOSSO PROPÓSITO ================= */
  .section.proposito {
    height: auto !important;
    padding: 64px 24px !important;
    gap: 24px !important;
  }
  .section.proposito .title {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 2px !important;
  }
  .section.proposito .subtitle {
    width: 100% !important;
    max-width: 340px !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }

  /* ================= UMA LOJA / INTEGRAÇÃO ================= */
  .section.integracao {
    height: auto !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 56px 20px !important;
    align-items: stretch !important;
  }
  .section.integracao .left,
  .section.integracao .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.integracao .left { gap: 16px !important; }
  .section.integracao .left .title {
    width: 100% !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    letter-spacing: 2px !important;
  }
  .section.integracao .left .subtitle {
    width: 100% !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
  }
  .section.integracao .left .content {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .section.integracao .left .feature {
    width: 100% !important;
    gap: 10px !important;
  }
  .section.integracao .left .feature .arrow {
    width: 14px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
  .section.integracao .left .feature .text {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }
  .section.integracao .right { gap: 24px !important; }
  .section.integracao .right .panel {
    width: 100% !important;
    padding: 28px 20px !important;
    border-radius: 16px !important;
    gap: 14px !important;
  }
  .section.integracao .right .panel .sua-loja { width: 150px !important; height: 60px !important; }
  .section.integracao .right .panel .plataforma { width: 240px !important; height: 76px !important; }
  .section.integracao .right .panel .arrow { width: 22px !important; height: 22px !important; }
  .section.integracao .right .panel .tags {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
  .section.integracao .right .panel .tags .tag {
    height: auto !important;
    font-size: 13px !important;
    padding: 8px 18px !important;
    line-height: 1 !important;
  }

  /* Whatsapp float menor */
  .whatsapp-float {
    width: 56px !important;
    height: 56px !important;
    bottom: 16px !important;
    right: 16px !important;
  }
}

@media (max-width: 768px) {
  /* ================= PULSO (Cada peça. Cada número.) ================= */
  .section.pulso {
    height: auto !important;
    flex-direction: column !important;
    gap: 32px !important;
    padding: 56px 20px !important;
    align-items: stretch !important;
  }
  .section.pulso .left,
  .section.pulso .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.pulso .left .dashboard {
    width: 100% !important;
    height: auto !important;
    max-width: 360px !important;
    margin: 0 auto !important;
  }
  .section.pulso .left .case {
    width: 100% !important;
    padding: 16px 18px !important;
    gap: 8px !important;
  }
  .section.pulso .left .case .title {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
  .section.pulso .left .case .content {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .section.pulso .right { gap: 16px !important; }
  .section.pulso .right .title {
    width: 100% !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
  }
  .section.pulso .right .subtitle {
    width: 100% !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }
  .section.pulso .right .content {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .section.pulso .right .feature {
    width: 100% !important;
    gap: 10px !important;
  }
  .section.pulso .right .feature .arrow {
    width: 14px !important;
    height: 22px !important;
    flex-shrink: 0;
  }
  .section.pulso .right .feature .text {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.45 !important;
  }

  /* ================= ECOSSISTEMA (5 steps) ================= */
  .section.ecosistema {
    height: auto !important;
    padding: 56px 20px !important;
    gap: 28px !important;
  }
  .section.ecosistema .header-panel {
    width: 100% !important;
    gap: 12px !important;
  }
  .section.ecosistema .header-panel .title {
    width: 100% !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
  }
  .section.ecosistema .header-panel .subtitle {
    width: 100% !important;
    font-size: 30px !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }
  .section.ecosistema .header-panel .content {
    width: 100% !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
  .section.ecosistema .steps {
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .section.ecosistema .steps .step {
    width: 100% !important;
    height: auto !important;
    padding: 20px !important;
    gap: 10px !important;
    align-items: flex-start !important;
  }
  .section.ecosistema .steps .step .num {
    font-size: 12px !important;
  }
  .section.ecosistema .steps .step .title {
    font-size: 18px !important;
    line-height: 1.25 !important;
  }
  .section.ecosistema .steps .step .subtitle {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }
  .section.ecosistema .steps .step .content {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* ================= K2 DIRETO (panel) ================= */
  .section.ecosistema .panel {
    width: 100% !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    height: auto !important;
  }
  .section.ecosistema .panel .left,
  .section.ecosistema .panel .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.ecosistema .panel .left { gap: 12px !important; }
  .section.ecosistema .panel .left .title,
  .section.ecosistema .panel .left .subtitle,
  .section.ecosistema .panel .left .content {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.ecosistema .panel .left .title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
  .section.ecosistema .panel .left .subtitle {
    font-size: 24px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }
  .section.ecosistema .panel .left .content {
    font-size: 15px !important;
    line-height: 1.55 !important;
  }
  .section.ecosistema .panel .left .buttons {
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    align-items: stretch !important;
  }
  .section.ecosistema .panel .left .buttons > * {
    width: 100% !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    height: auto !important;
    text-align: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
  }
  .section.ecosistema .panel .right {
    height: 160px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }


  /* ================= ECOSSISTEMA EM NÚMEROS ================= */
  .section.ecosistema-em-numeros {
    height: auto !important;
    padding: 56px 20px !important;
    gap: 24px !important;
  }
  .section.ecosistema-em-numeros .title {
    width: 100% !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
  }
  .section.ecosistema-em-numeros .subtitle {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }
  .section.ecosistema-em-numeros .grid {
    width: 100% !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .section.ecosistema-em-numeros .grid .item {
    width: 100% !important;
    height: auto !important;
    padding: 20px 16px !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .section.ecosistema-em-numeros .grid .item .value {
    font-size: 28px !important;
    line-height: 1.1 !important;
  }
  .section.ecosistema-em-numeros .grid .item .text {
    font-size: 12px !important;
    line-height: 1.4 !important;
  }

  /* ================= QUEM CONFIA (depoimentos) ================= */
  .section.quem-confia {
    height: auto !important;
    padding: 56px 20px !important;
    gap: 24px !important;
  }
  .section.quem-confia .title {
    width: 100% !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
  }
  .section.quem-confia .subtitle {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }
  .section.quem-confia .testimonials {
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .section.quem-confia .testimonials .testimonial {
    width: 100% !important;
    height: auto !important;
    padding: 20px !important;
    gap: 12px !important;
  }
  .section.quem-confia .testimonials .testimonial .quote {
    font-size: 24px !important;
    line-height: 1 !important;
  }
  .section.quem-confia .testimonials .testimonial .content {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .section.quem-confia .testimonials .testimonial .author {
    font-size: 13px !important;
  }
  .section.quem-confia .testimonials .testimonial .position {
    font-size: 11px !important;
    letter-spacing: 1px !important;
  }

  /* ================= ROTA DO DESMONTE ================= */
  .section.rota {
    height: auto !important;
    padding: 56px 20px !important;
  }
  .section.rota .panel {
    width: 100% !important;
    flex-direction: column !important;
    gap: 20px !important;
    padding: 24px 20px !important;
    height: auto !important;
  }
  .section.rota .panel .left,
  .section.rota .panel .right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .section.rota .panel .left { gap: 12px !important; }
  .section.rota .panel .left .title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
  }
  .section.rota .panel .left .subtitle {
    font-size: 22px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }
  .section.rota .panel .left .content {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .section.rota .panel .right {
    height: 200px !important;
  }

  /* ================= VAMOS JUNTOS ================= */
  .section.vamos-juntos {
    height: auto !important;
    padding: 64px 24px !important;
    gap: 20px !important;
  }
  .section.vamos-juntos .title {
    width: 100% !important;
    font-size: 12px !important;
    letter-spacing: 2px !important;
    line-height: 1.4 !important;
  }
  .section.vamos-juntos .subtitle {
    width: 100% !important;
    font-size: 28px !important;
    line-height: 1.2 !important;
    letter-spacing: -0.5px !important;
    font-weight: 400 !important;
  }
  .section.vamos-juntos .content {
    width: 100% !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
  }
  .section.vamos-juntos > .button,
  .section.vamos-juntos .button {
    width: 100% !important;
    max-width: 320px !important;
    font-size: 15px !important;
    padding: 14px 16px !important;
    height: auto !important;
    border-radius: 8px !important;
  }

  /* ================= FOOTER ================= */
  .section.footer {
    height: auto !important;
    padding: 40px 20px 24px !important;
    gap: 24px !important;
  }
  .section.footer .top {
    width: 100% !important;
    flex-direction: column !important;
    gap: 28px !important;
    align-items: flex-start !important;
  }
  .section.footer .top .left {
    width: 100% !important;
    gap: 12px !important;
  }
  .section.footer .top .left .logo {
    width: 60px !important;
    height: 60px !important;
  }
  .section.footer .top .left .phone {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }
  .section.footer .top .right {
    width: 100% !important;
    flex-wrap: wrap !important;
    gap: 24px !important;
  }
  .section.footer .top .right .column {
    min-width: 45% !important;
    gap: 10px !important;
  }
  .section.footer .top .right .column .title {
    font-size: 12px !important;
    letter-spacing: 1.5px !important;
  }
  .section.footer .top .right .column .link {
    font-size: 13px !important;
    line-height: 1.6 !important;
  }
  .section.footer .bottom {
    width: 100% !important;
    flex-direction: column !important;
    gap: 12px !important;
    align-items: flex-start !important;
    padding-top: 16px !important;
  }
  .section.footer .bottom .left .text,
  .section.footer .bottom .right .link {
    font-size: 11px !important;
  }

  /* ================= EMPRESAS strip (parceiros) ================= */
  .section.empresas {
    padding: 36px 0 28px !important;
    height: auto !important;
    gap: 20px !important;
  }
  .section.empresas .title {
    font-size: 11px !important;
    line-height: 1.6 !important;
    letter-spacing: 2px !important;
    padding: 0 24px !important;
    text-align: center !important;
    height: auto !important;
    width: 100% !important;
    max-width: 320px !important;
  }
  .section.empresas .strip,
  .section.empresas .strip-track,
  .section.empresas .strip-set {
    height: 34px !important;
  }
  .section.empresas .strip-icon {
    height: 28px !important;
    width: auto !important;
  }
}

@media (max-width: 768px) {
  .section.ecosistema-em-numeros .grid {
    height: auto !important;
    grid-auto-rows: auto !important;
  }
  .section.quem-confia .testimonials { margin-top: 0 !important; }
}

@media (max-width: 768px) {
  .section.quem-confia .testimonials .testimonial {
    justify-content: flex-start !important;
  }
  .section.quem-confia .testimonials .testimonial .content {
    width: 100% !important;
    height: auto !important;
  }
  .section.quem-confia .testimonials .testimonial .quote {
    line-height: 1 !important;
    height: auto !important;
  }
}

/* ============ FIX OVERLAPS + PULSO REORDER + FOOTER MOBILE ============ */
@media (max-width: 768px) {
  /* Overlap K2 Direto em cima do ecossistema: .steps tinha height fixo pequeno */
  .section.ecosistema .steps {
    height: auto !important;
  }
  .section.ecosistema {
    height: auto !important;
  }
  .section.ecosistema .panel {
    margin-top: 12px !important;
  }
  .section.ecosistema .panel .right {
    height: 200px !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
  }

  /* PULSO: ordem correta = título/features primeiro, depois imagem do sistema, depois caso real */
  .section.pulso {
    flex-direction: column-reverse !important;
  }
  .section.pulso .left {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    height: auto !important;
  }
  .section.pulso .left .dashboard {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: 520 / 373 !important;
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    border-radius: 12px !important;
  }

  /* FOOTER: cara mais mobile */
  .section.footer {
    padding: 36px 24px 24px !important;
    gap: 28px !important;
    background-color: #001219 !important;
  }
  .section.footer .top {
    gap: 24px !important;
  }
  .section.footer .top .left .logo {
    width: 56px !important;
    height: 56px !important;
  }
  .section.footer .top .left .address {
    font-size: 12px !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,.6) !important;
    margin-top: 4px !important;
  }
  .section.footer .top .left .email {
    font-size: 13px !important;
    margin-top: 6px !important;
  }
  .section.footer .top .left .email a {
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
  }
  .section.footer .top .left .phone {
    font-size: 15px !important;
    font-weight: 500 !important;
    margin-top: 8px !important;
  }
  .section.footer .top .left .phone a {
    color: #fff !important;
    text-decoration: none !important;
  }
  .section.footer .top .right {
    width: 100% !important;
    flex-direction: column !important;
    gap: 20px !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 20px !important;
  }
  .section.footer .top .right .column {
    width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
  }
  .section.footer .top .right .column .title {
    font-size: 11px !important;
    letter-spacing: 2px !important;
    color: #4aa8d8 !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
  }
  .section.footer .top .right .column .link {
    font-size: 15px !important;
    line-height: 1.4 !important;
    padding: 6px 0 !important;
    color: rgba(255,255,255,.85) !important;
  }
  .section.footer .top .right .column .link a {
    color: inherit !important;
    text-decoration: none !important;
  }
  .section.footer .bottom {
    border-top: 1px solid rgba(255,255,255,.08) !important;
    padding-top: 20px !important;
    gap: 8px !important;
  }
  .section.footer .bottom .left .text,
  .section.footer .bottom .right .link {
    font-size: 11px !important;
    color: rgba(255,255,255,.5) !important;
  }
  .section.footer .bottom .right {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
  }
}