/* CanalDirecto mobile overrides */

@media (max-width: 860px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  *,
  *::before,
  *::after {
    min-width: 0;
  }

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

  .wrap,
  .container,
  .content,
  .checkout-wrap {
    width: 100%;
    max-width: 100%;
    padding-left: 16px;
    padding-right: 16px;
  }

  nav.top,
  .navbar {
    padding-left: 16px;
    padding-right: 16px;
  }

  nav.top .inner,
  .nav-container {
    width: 100%;
    min-width: 0;
    gap: 12px;
  }

  .logo,
  .nav-logo {
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-l,
  .nav-links {
    display: none;
  }

  .mob-tog,
  .nav-toggle {
    display: block;
  }

  .nav-cta,
  nav.top .inner > div:has(.btn),
  nav.top .inner > div:has(.btn-p) {
    display: none;
  }

  .sec,
  section.sec {
    padding-top: 56px;
    padding-bottom: 56px;
  }

  .hero {
    padding-top: 96px;
    padding-bottom: 64px;
  }

  .hero::before,
  .flash::before,
  .fcta::before {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }

  .hero h1,
  .section-title,
  .sec-hdr h2,
  .fcta h2,
  .checkout-title h1 {
    max-width: 100%;
    overflow-wrap: anywhere;
    text-wrap: balance;
  }

  .hero-sub,
  .section-subtitle,
  .sec-hdr p,
  .fcta p,
  .checkout-title p {
    max-width: 100%;
  }

  .hero-ctas,
  .hero-cta,
  .fcta-ctas,
  .guar-ctas,
  .success-actions,
  .cta-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: stretch !important;
    width: min(100%, 340px);
    margin-left: auto;
    margin-right: auto;
  }

  .btn,
  .btn-p,
  .btn-g,
  .btn-w,
  .btn-primary,
  .btn-secondary,
  .btn-whatsapp,
  .btn-block {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    min-height: 44px;
  }

  .p-grid,
  .lt-grid,
  .why-grid,
  .why-cards,
  .f-grid,
  .guar-grid,
  .rv-grid,
  .reviews-grid,
  .ft-grid,
  .cards-grid,
  .inc-grid,
  .steps-row,
  .upgrade-card,
  .testi-grid,
  .test-grid,
  .combo-grid,
  .pack-grid,
  .multi-grid,
  .pain-grid,
  .screen-grid,
  .life-grid,
  .pricing-grid,
  .faq-grid,
  .channel-grid,
  .issue-grid,
  .hours-grid,
  .metrics-grid,
  .info-cards,
  .form-grid,
  .checkout-grid,
  .payment-options,
  .features-grid,
  .devices-grid,
  .apps-grid,
  .how-grid,
  .support-grid,
  .device-grid,
  .app-cards,
  .flash-inner,
  .srv-grid {
    grid-template-columns: 1fr !important;
  }

  .pc,
  .lt-card,
  .ltc,
  .combo-card,
  .pack,
  .rv-card,
  .feat-card,
  .ticket,
  .checkout-panel,
  .order-summary,
  .support-card,
  .faq-i,
  .wc,
  .inc-card,
  .step,
  .testi,
  .channel,
  .issue,
  .hours-card,
  .info-card,
  .combo,
  .srv {
    width: 100%;
    max-width: 100%;
  }

  .flash,
  .flash-inner,
  .combos-stack,
  .combo,
  .combo-top,
  .combo-info,
  .combo-price,
  .srv-grid,
  .srv,
  .srv-top {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .flash-inner,
  .combo,
  .srv {
    overflow: hidden;
  }

  .srv-grid,
  .combo-top,
  .flash-prices,
  .combo-facts {
    display: grid !important;
    grid-template-columns: 1fr !important;
  }

  .combo-price {
    margin-left: 0 !important;
    text-align: left !important;
  }

  .srv-top {
    display: grid !important;
    gap: 8px;
  }

  .flash-clock {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: 6px !important;
    align-items: stretch !important;
    max-width: 100%;
  }

  .clock-u {
    min-width: 0 !important;
    padding: 10px 8px !important;
  }

  .clock-u span {
    display: block;
    white-space: nowrap;
    font-size: 24px !important;
  }

  .clock-u small {
    font-size: 9px !important;
    overflow-wrap: anywhere;
  }

  .clock-sep {
    align-self: center;
    padding-bottom: 0 !important;
  }

  .comparison-wrap,
  .table-wrap,
  .table-scroll {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .comparison-table,
  table {
    width: 100%;
    max-width: 100%;
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  th,
  td {
    white-space: normal;
  }
}

@media (max-width: 520px) {
  .wrap,
  .container,
  .content,
  .checkout-wrap {
    padding-left: 16px;
    padding-right: 16px;
  }

  .logo,
  .nav-logo {
    max-width: 170px;
    font-size: 16px;
  }

  .hero-badge,
  .tag,
  .updated,
  .price-no-cc,
  .trust-pill {
    max-width: 100%;
    white-space: normal;
    text-align: center;
    justify-content: center;
  }

  .hero h1 {
    font-size: 26px !important;
    line-height: 1.15 !important;
  }

  .section-title,
  .sec-hdr h2,
  .fcta h2,
  .checkout-title h1 {
    font-size: 28px !important;
    line-height: 1.16 !important;
  }

  .hero-sub,
  .section-subtitle,
  .sec-hdr p,
  .fcta p,
  .checkout-title p {
    font-size: 15px !important;
    line-height: 1.6 !important;
  }

  .pricing-actions,
  .pricing-facts,
  .trust-row,
  .fcta-trust,
  .proof-strip,
  .ft-contact {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center;
    width: min(100%, 320px);
    margin-left: auto;
    margin-right: auto;
  }

  .pricing-actions .btn,
  .hero-ctas .btn,
  .hero-cta .btn,
  .fcta-ctas .btn,
  .guar-ctas .btn,
  .checkout-submit {
    width: 100%;
  }

  .p-grid,
  .upgrade-card,
  .ft-grid {
    width: 100%;
    max-width: 330px;
    margin-left: auto;
    margin-right: auto;
  }

  .pc,
  .lt-card,
  .checkout-panel,
  .order-summary,
  .ticket {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .pc-amt,
  .price-amount,
  .pack-amount,
  .lt-amount {
    font-size: 44px !important;
  }

  .wa-float {
    width: 48px !important;
    height: 48px !important;
    right: 16px !important;
    bottom: 16px !important;
  }
}