/* MIX_MOBILE_PREMIUM_V2_START */

@media (max-width: 760px) {
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
    background: #07111f;
  }

  body {
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* ============================================================
     HEADER MOBILE
     ============================================================ */

  header,
  .site-header,
  .header,
  .navbar,
  .nav-header {
    position: relative !important;
    min-height: 86px !important;
    padding: 18px 22px !important;
    background:
      linear-gradient(180deg, #07111f 0%, #081320 100%) !important;
    border-bottom: 1px solid rgba(255, 126, 44, 0.12) !important;
  }

  header .container,
  .site-header .container,
  .header .container,
  .navbar .container,
  .nav-header .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;
  }

  header img,
  .site-header img,
  .header img,
  .navbar img,
  .nav-header img {
    max-width: 166px !important;
    height: auto !important;
  }

  header nav,
  .site-header nav,
  .header nav,
  .navbar nav,
  .nav-header nav {
    display: none !important;
  }

  header a[href*="wa.me"],
  .site-header a[href*="wa.me"],
  header .btn,
  .site-header .btn,
  header [class*="button"],
  .site-header [class*="button"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: linear-gradient(90deg, #ff7e2c 0%, #ff9838 100%) !important;
    color: #07111f !important;
    font-size: 0.88rem !important;
    font-weight: 900 !important;
    text-decoration: none !important;
    box-shadow: 0 14px 30px rgba(255, 126, 44, 0.24) !important;
  }

  /* ============================================================
     HERO MOBILE
     ============================================================ */

  .hero,
  .hero-section,
  section:first-of-type {
    position: relative !important;
    overflow: hidden !important;
  }

  .hero,
  .hero-section {
    padding-top: 48px !important;
    padding-bottom: 58px !important;
  }

  .hero .container,
  .hero-section .container {
    width: min(100% - 44px, 100%) !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .hero h1,
  .hero-section h1,
  section:first-of-type h1 {
    max-width: 390px !important;
    font-size: clamp(3rem, 13vw, 4.05rem) !important;
    line-height: 0.98 !important;
    letter-spacing: -0.065em !important;
    margin-bottom: 24px !important;
    text-wrap: balance !important;
  }

  .hero p,
  .hero-section p {
    max-width: 380px !important;
    font-size: 1.08rem !important;
    line-height: 1.68 !important;
    color: rgba(255, 255, 255, 0.76) !important;
  }

  .hero [class*="kicker"],
  .hero-section [class*="kicker"],
  .hero [class*="eyebrow"],
  .hero-section [class*="eyebrow"] {
    max-width: 360px !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
    letter-spacing: 0.15em !important;
    color: #ff8a35 !important;
  }

  .hero [class*="actions"],
  .hero-section [class*="actions"],
  .hero .buttons,
  .hero-section .buttons {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    max-width: 360px !important;
    margin-top: 28px !important;
  }

  .hero [class*="actions"] a,
  .hero-section [class*="actions"] a,
  .hero .buttons a,
  .hero-section .buttons a {
    width: 100% !important;
    min-height: 54px !important;
    justify-content: center !important;
  }

  /* reduz mockup lateral no mobile se estiver causando corte */
  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"] {
    margin-top: 34px !important;
    max-width: 100% !important;
  }

  /* ============================================================
     SEÇÕES APROVADAS EM MOBILE
     ============================================================ */

  .mxw-block2-v7,
  .mxw-segments-v1,
  .mxp-pricing-section {
    scroll-margin-top: 90px;
  }

  .mxw-b2-head h2,
  .mxw-segments-head h2,
  .mxp-pricing-head h2 {
    text-wrap: balance !important;
  }

  .mxw-b2-card,
  .mxw-segment-card,
  .mxp-card {
    box-shadow:
      0 18px 44px rgba(7, 17, 31, 0.14),
      0 1px 0 rgba(255, 255, 255, 0.08) inset !important;
  }

  .mxw-segments-footer {
    margin-bottom: 12px !important;
  }

  /* WhatsApp flutuante não deve cobrir botões */
  .mxw-float-whatsapp {
    right: 14px !important;
    bottom: 14px !important;
  }
}

@media (max-width: 430px) {
  header,
  .site-header,
  .header,
  .navbar,
  .nav-header {
    min-height: 78px !important;
    padding: 15px 18px !important;
  }

  header img,
  .site-header img,
  .header img,
  .navbar img,
  .nav-header img {
    max-width: 146px !important;
  }

  header a[href*="wa.me"],
  .site-header a[href*="wa.me"],
  header .btn,
  .site-header .btn,
  header [class*="button"],
  .site-header [class*="button"] {
    min-height: 38px !important;
    padding: 0 14px !important;
    font-size: 0.82rem !important;
  }

  .hero,
  .hero-section {
    padding-top: 42px !important;
    padding-bottom: 54px !important;
  }

  .hero .container,
  .hero-section .container {
    width: min(100% - 36px, 100%) !important;
  }

  .hero h1,
  .hero-section h1,
  section:first-of-type h1 {
    font-size: clamp(2.75rem, 12.5vw, 3.65rem) !important;
    line-height: 1 !important;
  }

  .hero p,
  .hero-section p {
    font-size: 1.02rem !important;
    line-height: 1.66 !important;
  }
}

/* MIX_MOBILE_PREMIUM_V2_END */

/* MIX_MOBILE_POLISH_V3_START */

@media (max-width: 760px) {
  /* HERO */
  .hero,
  .hero-section {
    padding-top: 40px !important;
    padding-bottom: 42px !important;
  }

  .hero h1,
  .hero-section h1,
  section:first-of-type h1 {
    max-width: 360px !important;
    font-size: clamp(2.55rem, 11.4vw, 3.55rem) !important;
    line-height: 0.99 !important;
    letter-spacing: -0.06em !important;
    margin-bottom: 20px !important;
  }

  .hero p,
  .hero-section p {
    max-width: 360px !important;
    font-size: 1rem !important;
    line-height: 1.64 !important;
    margin-bottom: 0 !important;
  }

  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"] {
    max-width: 82% !important;
    margin: 24px auto 0 !important;
    display: block !important;
  }

  .hero [class*="actions"],
  .hero-section [class*="actions"],
  .hero .buttons,
  .hero-section .buttons {
    gap: 10px !important;
    margin-top: 24px !important;
  }

  .hero [class*="chip"],
  .hero-section [class*="chip"],
  .hero .tag,
  .hero-section .tag {
    margin-top: 6px !important;
  }

  /* BLOCO 2 */
  .mxw-block2-v7 {
    padding-top: 60px !important;
    padding-bottom: 62px !important;
  }

  .mxw-b2-head {
    margin-bottom: 26px !important;
  }

  .mxw-b2-head h2 {
    font-size: clamp(1.9rem, 8.6vw, 2.45rem) !important;
    line-height: 1.08 !important;
  }

  .mxw-b2-head p {
    font-size: 0.96rem !important;
    line-height: 1.66 !important;
  }

  .mxw-b2-note {
    margin-top: 22px !important;
    padding: 12px 14px !important;
    font-size: 0.9rem !important;
    line-height: 1.45 !important;
    border-radius: 20px !important;
  }

  /* SEGMENTOS */
  .mxw-segments-v1 {
    padding-top: 62px !important;
    padding-bottom: 66px !important;
  }

  .mxw-segments-head {
    margin-bottom: 28px !important;
  }

  .mxw-segments-head h2 {
    font-size: clamp(1.95rem, 8.5vw, 2.5rem) !important;
    line-height: 1.08 !important;
  }

  .mxw-segments-head p {
    font-size: 0.96rem !important;
    line-height: 1.66 !important;
  }

  .mxw-segment-card {
    padding: 24px 20px !important;
  }

  .mxw-segment-icon {
    margin-bottom: 20px !important;
  }

  .mxw-segments-footer {
    margin-top: 22px !important;
    padding: 18px 16px !important;
    gap: 14px !important;
  }

  .mxw-segments-footer span {
    font-size: 0.94rem !important;
    line-height: 1.58 !important;
  }

  .mxw-segments-footer a {
    min-height: 48px !important;
    width: 100% !important;
  }

  /* PLANOS */
  .mxp-pricing-section {
    padding-top: 64px !important;
    padding-bottom: 70px !important;
  }

  .mxp-pricing-head {
    margin-bottom: 28px !important;
  }

  .mxp-pricing-head h2 {
    font-size: clamp(1.95rem, 8.4vw, 2.48rem) !important;
    line-height: 1.08 !important;
  }

  .mxp-pricing-head p {
    font-size: 0.96rem !important;
    line-height: 1.66 !important;
  }

  .mxp-card {
    padding: 24px 20px !important;
  }
}

@media (max-width: 430px) {
  .hero h1,
  .hero-section h1,
  section:first-of-type h1 {
    max-width: 330px !important;
    font-size: clamp(2.42rem, 11vw, 3.25rem) !important;
  }

  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"] {
    max-width: 86% !important;
  }

  .mxw-b2-note,
  .mxw-segments-footer {
    border-radius: 18px !important;
  }
}

/* MIX_MOBILE_POLISH_V3_END */

/* MIX_HERO_MOBILE_ORGANIZATION_V4_START */

@media (max-width: 760px) {
  /* Organiza o miolo textual do hero */
  .hero .container,
  .hero-section .container,
  section:first-of-type .container {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .hero h1,
  .hero-section h1,
  section:first-of-type h1 {
    margin-bottom: 18px !important;
  }

  .hero p,
  .hero-section p,
  section:first-of-type p {
    max-width: 365px !important;
  }

  /* Frase azul de valor */
  .hero strong,
  .hero-section strong,
  section:first-of-type strong {
    display: block !important;
    max-width: 360px !important;
    margin: 20px 0 0 !important;
    color: #22c7f2 !important;
    font-size: 1.03rem !important;
    line-height: 1.55 !important;
    font-weight: 900 !important;
    letter-spacing: -0.015em !important;
  }

  /* Grupo de botões do hero */
  .hero [class*="actions"],
  .hero-section [class*="actions"],
  .hero .buttons,
  .hero-section .buttons,
  section:first-of-type [class*="actions"],
  section:first-of-type .buttons {
    width: 100% !important;
    max-width: 360px !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin: 26px 0 0 !important;
  }

  .hero [class*="actions"] a,
  .hero-section [class*="actions"] a,
  .hero .buttons a,
  .hero-section .buttons a,
  section:first-of-type [class*="actions"] a,
  section:first-of-type .buttons a {
    width: 100% !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 999px !important;
    font-size: 1rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    text-align: center !important;
  }

  /* Chips do hero em grid organizado */
  .hero [class*="chip"],
  .hero-section [class*="chip"],
  section:first-of-type [class*="chip"],
  .hero .tag,
  .hero-section .tag,
  section:first-of-type .tag {
    margin: 0 !important;
  }

  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    width: 100% !important;
    max-width: 360px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin: 22px 0 0 !important;
  }

  .hero [class*="chips"] > *,
  .hero-section [class*="chips"] > *,
  section:first-of-type [class*="chips"] > *,
  .hero [class*="tags"] > *,
  .hero-section [class*="tags"] > *,
  section:first-of-type [class*="tags"] > * {
    min-height: 40px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 14px !important;
    border-radius: 999px !important;
    text-align: center !important;
    font-size: 0.88rem !important;
    font-weight: 850 !important;
    line-height: 1.15 !important;
  }

  /* Caso os chips estejam soltos em sequência, melhora o espaçamento visual */
  .hero a + a,
  .hero-section a + a,
  section:first-of-type a + a {
    margin-left: 0 !important;
  }

  /* Mockup entra como próximo bloco, com respiro */
  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"],
  section:first-of-type [class*="mockup"],
  section:first-of-type [class*="phone"] {
    margin-top: 34px !important;
  }
}

@media (max-width: 430px) {
  .hero [class*="actions"],
  .hero-section [class*="actions"],
  .hero .buttons,
  .hero-section .buttons,
  section:first-of-type [class*="actions"],
  section:first-of-type .buttons,
  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    max-width: 100% !important;
  }

  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .hero [class*="chips"] > *,
  .hero-section [class*="chips"] > *,
  section:first-of-type [class*="chips"] > *,
  .hero [class*="tags"] > *,
  .hero-section [class*="tags"] > *,
  section:first-of-type [class*="tags"] > * {
    justify-content: flex-start !important;
    padding-left: 16px !important;
  }
}

/* MIX_HERO_MOBILE_ORGANIZATION_V4_END */

/* MIX_HERO_ACTION_PANEL_V5_START */

@media (max-width: 760px) {
  /*
    Painel premium para organizar CTA + chips no hero mobile.
    Mantém desktop intacto.
  */

  .mxw-hero-action-panel-v5 {
    position: relative !important;
    width: 100% !important;
    max-width: 390px !important;
    margin: 26px 0 0 !important;
    padding: 16px !important;
    border-radius: 28px !important;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.065), rgba(255,255,255,0.035)) !important;
    border: 1px solid rgba(255,255,255,0.105) !important;
    box-shadow:
      0 24px 58px rgba(0,0,0,0.24),
      0 1px 0 rgba(255,255,255,0.06) inset !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .mxw-hero-action-panel-v5::before {
    content: "Comece por aqui" !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 0 13px !important;
    padding: 7px 11px !important;
    border-radius: 999px !important;
    background: rgba(255, 126, 44, 0.12) !important;
    color: #ff9a3d !important;
    font-size: 0.72rem !important;
    line-height: 1 !important;
    font-weight: 900 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
  }

  .mxw-hero-action-panel-v5 a {
    width: 100% !important;
    margin: 0 !important;
  }

  .mxw-hero-action-panel-v5 a + a {
    margin-top: 11px !important;
  }

  /*
    Chips do hero ficam logo abaixo do painel,
    alinhados e com cara de benefícios.
  */
  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    max-width: 390px !important;
    margin-top: 16px !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .hero [class*="chips"] > *,
  .hero-section [class*="chips"] > *,
  section:first-of-type [class*="chips"] > *,
  .hero [class*="tags"] > *,
  .hero-section [class*="tags"] > *,
  section:first-of-type [class*="tags"] > * {
    justify-content: flex-start !important;
    min-height: 42px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    background: rgba(10, 52, 72, 0.68) !important;
    border: 1px solid rgba(34, 199, 242, 0.24) !important;
    color: rgba(255,255,255,0.90) !important;
    box-shadow: 0 12px 28px rgba(0,0,0,0.12) !important;
  }

  .hero [class*="chips"] > *::before,
  .hero-section [class*="chips"] > *::before,
  section:first-of-type [class*="chips"] > *::before,
  .hero [class*="tags"] > *::before,
  .hero-section [class*="tags"] > *::before,
  section:first-of-type [class*="tags"] > *::before {
    content: "✓" !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 9px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 126, 44, 0.18) !important;
    color: #ff9a3d !important;
    font-size: 0.76rem !important;
    font-weight: 950 !important;
    flex: 0 0 auto !important;
  }

  /*
    Distância controlada entre chips e mockup.
  */
  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"],
  section:first-of-type [class*="mockup"],
  section:first-of-type [class*="phone"] {
    margin-top: 34px !important;
  }
}

@media (max-width: 430px) {
  .mxw-hero-action-panel-v5 {
    max-width: 100% !important;
    padding: 15px !important;
    border-radius: 24px !important;
  }
}

/* MIX_HERO_ACTION_PANEL_V5_END */

/* MIX_HERO_CONVERSION_CARD_V6B_START */

@media (max-width: 760px) {
  .mxw-hero-action-panel-v5::before {
    display: none !important;
    content: none !important;
  }

  .mxw-hero-conversion-card-v6 {
    width: 100% !important;
    max-width: 390px !important;
    margin: 26px 0 0 !important;
    padding: 18px !important;
    border-radius: 30px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255, 126, 44, 0.12), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.07), rgba(255,255,255,0.035)) !important;
    border: 1px solid rgba(255,255,255,0.115) !important;
    box-shadow:
      0 24px 58px rgba(0,0,0,0.24),
      0 1px 0 rgba(255,255,255,0.07) inset !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .mxw-hero-conversion-card-v6 strong,
  .mxw-hero-conversion-card-v6 p {
    max-width: 100% !important;
  }

  .mxw-hero-conversion-card-v6 strong {
    display: block !important;
    margin: 0 0 16px !important;
    color: #22c7f2 !important;
    font-size: 1rem !important;
    line-height: 1.48 !important;
    font-weight: 900 !important;
  }

  .mxw-hero-conversion-card-v6 .mxw-hero-action-panel-v5 {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .mxw-hero-conversion-card-v6 .mxw-hero-action-panel-v5 a,
  .mxw-hero-conversion-card-v6 a {
    width: 100% !important;
    min-height: 54px !important;
    margin-left: 0 !important;
  }

  .mxw-hero-conversion-card-v6 .mxw-hero-action-panel-v5 a + a,
  .mxw-hero-conversion-card-v6 a + a {
    margin-top: 11px !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"],
  .mxw-hero-conversion-card-v6 [class*="tags"] {
    width: 100% !important;
    max-width: 100% !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
    margin: 16px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255,255,255,0.09) !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"] > *,
  .mxw-hero-conversion-card-v6 [class*="tags"] > * {
    width: 100% !important;
    min-height: 41px !important;
    justify-content: flex-start !important;
    padding: 0 15px !important;
    border-radius: 999px !important;
    background: rgba(8, 38, 55, 0.76) !important;
    border: 1px solid rgba(34, 199, 242, 0.22) !important;
    color: rgba(255,255,255,0.90) !important;
    font-size: 0.88rem !important;
    font-weight: 850 !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"] > *::before,
  .mxw-hero-conversion-card-v6 [class*="tags"] > *::before {
    content: "✓" !important;
    width: 20px !important;
    height: 20px !important;
    margin-right: 9px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 126, 44, 0.18) !important;
    color: #ff9a3d !important;
    font-size: 0.76rem !important;
    font-weight: 950 !important;
    flex: 0 0 auto !important;
  }
}

@media (max-width: 430px) {
  .mxw-hero-conversion-card-v6 {
    max-width: 100% !important;
    padding: 16px !important;
    border-radius: 26px !important;
  }
}

/* MIX_HERO_CONVERSION_CARD_V6B_END */

/* MIX_HERO_CONVERSION_CARD_V7_FINISH_START */

@media (max-width: 760px) {
  .mxw-hero-conversion-card-v6 {
    max-width: 392px !important;
    margin-top: 24px !important;
    padding: 16px !important;
    border-radius: 26px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,126,44,0.10), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.058), rgba(255,255,255,0.032)) !important;
    border-color: rgba(255,255,255,0.10) !important;
    box-shadow:
      0 20px 48px rgba(0,0,0,0.20),
      0 1px 0 rgba(255,255,255,0.06) inset !important;
  }

  .mxw-hero-conversion-card-v6 strong {
    margin-bottom: 14px !important;
    font-size: 0.98rem !important;
    line-height: 1.48 !important;
  }

  .mxw-hero-conversion-card-v6 a {
    min-height: 52px !important;
    border-radius: 999px !important;
    font-size: 0.98rem !important;
  }

  .mxw-hero-conversion-card-v6 a + a {
    margin-top: 10px !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"],
  .mxw-hero-conversion-card-v6 [class*="tags"],
  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    max-width: 392px !important;
    margin-top: 15px !important;
    padding-top: 14px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"] > *,
  .mxw-hero-conversion-card-v6 [class*="tags"] > *,
  .hero [class*="chips"] > *,
  .hero-section [class*="chips"] > *,
  section:first-of-type [class*="chips"] > *,
  .hero [class*="tags"] > *,
  .hero-section [class*="tags"] > *,
  section:first-of-type [class*="tags"] > * {
    min-height: 38px !important;
    padding: 0 13px !important;
    justify-content: center !important;
    text-align: center !important;
    font-size: 0.83rem !important;
    line-height: 1.15 !important;
    border-radius: 999px !important;
    background: rgba(8, 38, 55, 0.66) !important;
    border-color: rgba(34, 199, 242, 0.22) !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"] > *::before,
  .mxw-hero-conversion-card-v6 [class*="tags"] > *::before,
  .hero [class*="chips"] > *::before,
  .hero-section [class*="chips"] > *::before,
  section:first-of-type [class*="chips"] > *::before,
  .hero [class*="tags"] > *::before,
  .hero-section [class*="tags"] > *::before,
  section:first-of-type [class*="tags"] > *::before {
    width: 18px !important;
    height: 18px !important;
    margin-right: 7px !important;
    font-size: 0.7rem !important;
  }

  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"],
  section:first-of-type [class*="mockup"],
  section:first-of-type [class*="phone"] {
    margin-top: 30px !important;
  }
}

@media (max-width: 390px) {
  .mxw-hero-conversion-card-v6 [class*="chips"],
  .mxw-hero-conversion-card-v6 [class*="tags"],
  .hero [class*="chips"],
  .hero-section [class*="chips"],
  section:first-of-type [class*="chips"],
  .hero [class*="tags"],
  .hero-section [class*="tags"],
  section:first-of-type [class*="tags"] {
    grid-template-columns: 1fr !important;
  }
}

/* MIX_HERO_CONVERSION_CARD_V7_FINISH_END */

/* MIX_MOBILE_HERO_FINAL_V8_START */

@media (max-width: 760px) {
  /*
    Deixa o bloco de conversão mais leve.
  */
  .mxw-hero-conversion-card-v6 {
    max-width: 390px !important;
    margin-top: 22px !important;
    padding: 14px !important;
    border-radius: 24px !important;
    background:
      radial-gradient(circle at 100% 0%, rgba(255,126,44,0.085), transparent 42%),
      linear-gradient(180deg, rgba(255,255,255,0.050), rgba(255,255,255,0.026)) !important;
    border-color: rgba(255,255,255,0.085) !important;
    box-shadow:
      0 18px 42px rgba(0,0,0,0.18),
      0 1px 0 rgba(255,255,255,0.05) inset !important;
  }

  .mxw-hero-conversion-card-v6 strong {
    margin-bottom: 13px !important;
    font-size: 0.97rem !important;
    line-height: 1.46 !important;
  }

  .mxw-hero-conversion-card-v6 a {
    min-height: 50px !important;
    font-size: 0.96rem !important;
  }

  .mxw-hero-conversion-card-v6 a + a {
    margin-top: 9px !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"],
  .mxw-hero-conversion-card-v6 [class*="tags"] {
    margin-top: 13px !important;
    padding-top: 13px !important;
    gap: 8px !important;
  }

  .mxw-hero-conversion-card-v6 [class*="chips"] > *,
  .mxw-hero-conversion-card-v6 [class*="tags"] > * {
    min-height: 36px !important;
    padding: 0 12px !important;
    font-size: 0.80rem !important;
    background: rgba(8, 38, 55, 0.60) !important;
  }

  /*
    Reduz o mockup do celular no hero mobile.
    Ele fica como apoio visual, não como bloco dominante.
  */
  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"],
  section:first-of-type [class*="mockup"],
  section:first-of-type [class*="phone"] {
    width: min(84vw, 330px) !important;
    max-width: 330px !important;
    margin: 28px auto 0 !important;
    transform: none !important;
  }

  /*
    Caso exista um wrapper visual maior envolvendo o telefone.
  */
  .hero [class*="visual"],
  .hero-section [class*="visual"],
  .hero [class*="media"],
  .hero-section [class*="media"],
  section:first-of-type [class*="visual"],
  section:first-of-type [class*="media"] {
    max-width: 360px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /*
    Ajusta elementos internos do mockup sem destruir desktop.
  */
  .hero [class*="phone"] img,
  .hero-section [class*="phone"] img,
  .hero [class*="mockup"] img,
  .hero-section [class*="mockup"] img,
  section:first-of-type [class*="phone"] img,
  section:first-of-type [class*="mockup"] img {
    max-width: 100% !important;
    height: auto !important;
  }

  /*
    Menos espaço morto antes do próximo bloco.
  */
  .hero,
  .hero-section {
    padding-bottom: 38px !important;
  }
}

@media (max-width: 430px) {
  .mxw-hero-conversion-card-v6 {
    padding: 13px !important;
    border-radius: 22px !important;
  }

  .hero [class*="mockup"],
  .hero-section [class*="mockup"],
  .hero [class*="phone"],
  .hero-section [class*="phone"],
  section:first-of-type [class*="mockup"],
  section:first-of-type [class*="phone"] {
    width: min(82vw, 310px) !important;
    max-width: 310px !important;
    margin-top: 26px !important;
  }

  .hero [class*="visual"],
  .hero-section [class*="visual"],
  .hero [class*="media"],
  .hero-section [class*="media"],
  section:first-of-type [class*="visual"],
  section:first-of-type [class*="media"] {
    max-width: 330px !important;
  }
}

/* MIX_MOBILE_HERO_FINAL_V8_END */