/* Mobile UX reformulation loaded after lp.css */
@media (min-width: 901px) {
  .topnav {
    min-height: 76px !important;
    padding: 12px clamp(24px, 4vw, 48px) !important;
    background: rgba(18, 53, 70, 0.96) !important;
    backdrop-filter: blur(18px) !important;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.16) !important;
  }

  .topnav__links {
    gap: 8px !important;
    padding: 6px !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  .topnav__links a {
    min-height: 40px !important;
    padding: 0 16px !important;
    border-radius: 999px !important;
    color: #ffffff !important;
  }

  .topnav__links a::after {
    display: none !important;
  }

  .topnav__links a:last-child {
    background: var(--accent) !important;
    box-shadow: 0 12px 26px var(--accent-glow) !important;
  }
}

@media (max-width: 900px) {
  html {
    scroll-padding-top: 78px;
  }

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

  .topnav {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1000 !important;
    min-height: 70px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    padding: 10px 14px !important;
    background: rgba(18, 53, 70, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28) !important;
    backdrop-filter: blur(16px) !important;
  }

  .topnav__brand {
    min-width: 0 !important;
  }

  .topnav__logo {
    width: 104px !important;
    max-height: 50px !important;
    object-fit: contain !important;
  }

  .topnav__links {
    display: none !important;
  }

  .topnav__menu-btn {
    position: relative !important;
    z-index: 1002 !important;
    display: inline-flex !important;
    width: 50px !important;
    height: 50px !important;
    flex: 0 0 50px !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    margin-left: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.22) !important;
    border-radius: 999px !important;
    background: rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14) !important;
  }

  .topnav__menu-btn span {
    display: block !important;
    width: 20px !important;
    height: 2px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
  }

  .topnav__drawer {
    position: fixed !important;
    top: 78px !important;
    left: 12px !important;
    right: 12px !important;
    z-index: 1001 !important;
    display: grid !important;
    gap: 10px !important;
    min-width: 0 !important;
    max-height: calc(100svh - 96px) !important;
    padding: 14px !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 18px !important;
    background: #123546 !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.38) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-10px) scale(0.98) !important;
    transition: opacity 0.24s ease, transform 0.24s ease !important;
  }

  .topnav__drawer.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  .topnav__drawer a {
    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
    padding: 0 18px !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
    font-size: 1rem !important;
    font-weight: 800 !important;
    text-decoration: none !important;
  }

  .topnav__drawer a:last-child {
    background: var(--accent) !important;
  }

  .lp-hero {
    min-height: 100svh !important;
    padding: 0 !important;
  }

  .lp-hero__img {
    object-position: center !important;
    filter: saturate(1.05) contrast(1.02) !important;
  }

  .lp-hero__overlay {
    background: linear-gradient(180deg, rgba(18, 53, 70, 0.56), rgba(18, 53, 70, 0.94) 74%, rgba(18, 53, 70, 0.98)) !important;
  }

  .lp-hero__content {
    min-height: 100svh !important;
    justify-content: flex-end !important;
    padding: 96px 18px 38px !important;
  }

  .logo-wrap {
    margin-bottom: 12px !important;
  }

  .logo {
    height: 46px !important;
  }

  .lp-badge {
    max-width: 100% !important;
    padding: 9px 12px !important;
    white-space: normal !important;
    font-size: 0.68rem !important;
    letter-spacing: 0.13em !important;
  }

  .lp-hero__title {
    max-width: 10.5ch !important;
    margin-top: 14px !important;
    font-size: clamp(2.55rem, 14vw, 3.75rem) !important;
    line-height: 0.93 !important;
  }

  .lp-hero__sub {
    max-width: 32rem !important;
    margin-top: 16px !important;
    font-size: 1rem !important;
    line-height: 1.48 !important;
  }

  .btn-primary {
    width: 100% !important;
    min-height: 54px !important;
    padding: 14px 18px !important;
    border-radius: 14px !important;
    text-align: center !important;
    line-height: 1.2 !important;
    white-space: normal !important;
  }

  .section {
    padding: 56px 16px !important;
  }

  .section__eyebrow {
    margin-bottom: 10px !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
  }

  .section__title,
  .offer-title,
  .ideal-print__title {
    margin-bottom: 14px !important;
    font-size: clamp(2rem, 10vw, 2.85rem) !important;
    line-height: 1.05 !important;
    text-align: left !important;
  }

  .section__lead,
  .offer-subtitle,
  .about-panel__lead {
    max-width: none !important;
    font-size: 1rem !important;
    line-height: 1.58 !important;
    text-align: left !important;
  }

  .about-panel {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .about-panel::before {
    display: none !important;
  }

  .about-panel__grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .about-panel__lead {
    padding: 18px !important;
    border: 1px solid var(--line) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 14px 34px rgba(18, 53, 70, 0.08) !important;
  }

  .section--dark .about-panel__lead,
  .section--cta .about-panel__lead {
    border-color: rgba(255, 255, 255, 0.16) !important;
    background: rgba(255, 255, 255, 0.08) !important;
    color: rgba(255, 255, 255, 0.86) !important;
  }

  .about-panel__stats,
  .features,
  .ambientes,
  .testimonials {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .about-stat,
  .feature-card,
  .ambiente-card,
  .testimonial,
  .etapa,
  .ideal-print__card {
    min-height: auto !important;
    padding: 18px !important;
    border-radius: 16px !important;
    text-align: left !important;
  }

  .about-stat strong {
    font-size: 1.28rem !important;
  }

  .about-stat span,
  .feature-card p,
  .ambiente-card p,
  .testimonial blockquote,
  .etapa p,
  .ideal-print__list li {
    font-size: 0.96rem !important;
    line-height: 1.5 !important;
  }

  .gallery {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
    gap: 12px !important;
  }

  .gallery__item,
  .gallery__item--wide,
  .gallery__item--tall {
    grid-column: auto !important;
    grid-row: auto !important;
    border-radius: 16px !important;
    aspect-ratio: 4 / 3 !important;
  }

  .gallery__item img,
  .ambiente-card__img img,
  .offer-image img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    object-fit: cover !important;
  }

  .ambiente-card__img {
    min-height: 0 !important;
    aspect-ratio: 4 / 3 !important;
    border-radius: 14px !important;
  }

  .processo {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .etapa__arrow {
    display: none !important;
  }

  .section--offer {
    padding: 56px 16px !important;
  }

  .section--offer .offer-container {
    padding: 0 !important;
  }

  .section--offer .offer-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .section--offer .offer-content,
  .section--offer .offer-content h3 {
    text-align: left !important;
  }

  .section--offer .offer-checklist {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .section--offer .offer-checklist li {
    min-height: auto !important;
    padding: 16px 16px 16px 46px !important;
    border-radius: 14px !important;
    text-align: left !important;
    line-height: 1.42 !important;
  }

  .section--offer .offer-checklist li::before {
    left: 16px !important;
    top: 19px !important;
  }

  .section--offer .offer-checklist li::after {
    left: 22px !important;
    top: 27px !important;
  }

  .brands--carousel .brand-item {
    flex-basis: 190px !important;
  }

  .lead-form {
    padding: 18px !important;
    border-radius: 16px !important;
  }

  .lead-form__grid,
  .lead-form__options {
    grid-template-columns: 1fr !important;
  }

  .lead-form__field input,
  .lead-pill,
  .lead-pill span {
    width: 100% !important;
  }

  .lp-footer {
    padding: 54px 16px 28px !important;
  }

  .lp-footer__grid {
    gap: 28px !important;
  }
}

/* Mobile alignment and "É Pra Você Que" refinement */
@media (max-width: 900px) {
  .container,
  .container--narrow,
  .offer-container {
    width: min(100%, 520px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section__eyebrow,
  .section__title,
  .offer-title,
  .ideal-print__title,
  .section__lead,
  .offer-subtitle,
  .about-panel__lead,
  .offer-content,
  .offer-content h3,
  .feature-card,
  .ambiente-card,
  .testimonial,
  .etapa,
  .about-stat,
  .ideal-print__card,
  .lp-footer,
  .lp-footer p,
  .lp-footer h4 {
    text-align: center !important;
  }

  .section__eyebrow,
  .section__title,
  .offer-title,
  .ideal-print__title,
  .section__lead,
  .offer-subtitle {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .section__title,
  .offer-title,
  .ideal-print__title {
    max-width: 12ch !important;
  }

  .section__lead,
  .offer-subtitle,
  .about-panel__lead {
    max-width: 34rem !important;
  }

  .feature-card,
  .ambiente-card,
  .testimonial,
  .etapa,
  .about-stat {
    align-items: center !important;
    justify-content: center !important;
  }

  .feature-card__icon,
  .etapa__num {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-contacts,
  .footer-hours,
  .footer-social {
    justify-content: center !important;
    align-items: center !important;
  }

  .footer-contacts li {
    justify-content: center !important;
  }

  .lp-footer__bottom {
    align-items: center !important;
    text-align: center !important;
  }

  .section--offer .offer-checklist li {
    padding: 44px 16px 16px !important;
    text-align: center !important;
  }

  .section--offer .offer-checklist li::before {
    top: 16px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }

  .section--offer .offer-checklist li::after {
    top: 24px !important;
    left: 50% !important;
    transform: translateX(-50%) translateX(-0.5px) rotate(-45deg) !important;
  }

  .section--ideal-audience {
    padding-top: 58px !important;
    padding-bottom: 58px !important;
    background:
      radial-gradient(circle at 50% 0, rgba(197, 29, 37, 0.12), transparent 42%),
      #ffffff !important;
  }

  .section--ideal-audience .container {
    display: grid !important;
    gap: 18px !important;
  }

  .section--ideal-audience .section__title {
    max-width: 9ch !important;
    margin-bottom: 0 !important;
  }

  .section--ideal-audience .checklist {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 4px auto 0 !important;
  }

  .section--ideal-audience .checklist li {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: auto !important;
    padding: 18px 16px !important;
    border: 1px solid rgba(18, 53, 70, 0.1) !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 14px 34px rgba(18, 53, 70, 0.08) !important;
    color: var(--text) !important;
    font-size: 0.98rem !important;
    font-weight: 700 !important;
    line-height: 1.42 !important;
    text-align: center !important;
  }

  .section--ideal-audience .check {
    width: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 10px 22px var(--accent-glow) !important;
  }

  .section--ideal-audience .check::after {
    width: 9px !important;
    height: 5px !important;
    border-color: #ffffff !important;
  }

  .section--ideal-audience .disclaimer-box {
    margin-top: 2px !important;
    padding: 20px 18px !important;
    border: 1px solid rgba(197, 29, 37, 0.22) !important;
    border-left: 1px solid rgba(197, 29, 37, 0.22) !important;
    border-radius: 16px !important;
    background: rgba(197, 29, 37, 0.06) !important;
    text-align: center !important;
  }

  .section--ideal-audience .disclaimer-box p {
    color: var(--text) !important;
    font-size: 0.96rem !important;
    line-height: 1.5 !important;
  }
}