/* ============================================================
   MOBILE — Colombia
============================================================ */

@media (max-width:1024px) {
  :root { --nav-h:56px; --pad-x:18px; }

  .wrap    { padding:0 var(--pad-x); }
  .section { padding:52px 0; }

  /* ── NAV ── */
  .nav {
    padding:0 var(--pad-x);
    background:rgba(10,21,37,.97) !important;
    backdrop-filter:blur(16px);
    border-bottom:1px solid rgba(1,115,174,.2);
  }
  .nav__links,
  .nav__ctas { display:none !important; }

  .nav__burger {
    display:flex !important;
    flex-direction:column;
    gap:5px;
    padding:8px;
    z-index:10001;
    margin-left:auto;
  }
  .nav__burger span {
    display:block;
    width:22px; height:2px;
    background:var(--dtv-white);
    border-radius:2px;
  }
  .nav.open .nav__burger span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .nav.open .nav__burger span:nth-child(2) { opacity:0; }
  .nav.open .nav__burger span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }

  .nav__drawer { padding:16px var(--pad-x) 24px; gap:0; }
  .nav__drawer a {
    font-size:1rem !important;
    font-weight:700 !important;
    padding:12px 0 !important;
    border-bottom:1px solid rgba(1,115,174,.12) !important;
  }

  .nav__logo img { height:34px !important; }

  /* ── HERO ── */
  .hero {
    height:100svh !important;
    min-height:560px !important;
    padding-top:0 !important;
  }
  .hero__viewport,
  .hero__track { height:100% !important; }
  /* Colombia tiene 3 slides (400% / 3 columnas de 25% cada una en track de 4) */
  .hero__track { width:400% !important; }
  .hero__slide { width:25% !important; }

  /* Imágenes mobile del carousel */
  .slide-1 { background-image:url('../img/Carousel/slide-01-mobile.webp'); background-position:60% 20% !important; }
  .slide-2 { background-image:url('../img/Carousel/slide-02-mobile.png'); background-position:55% 15% !important; }
  .slide-3 { background-image:url('../img/Carousel/slide-03-mobile.png'); background-position:50% 20% !important; }

  .hero__bg::after {
    background:linear-gradient(
      175deg,
      rgba(0,0,0,.85) 0%,
      rgba(0,0,0,.65) 40%,
      rgba(0,0,0,.3) 70%,
      rgba(0,0,0,.12) 100%
    ) !important;
  }

  /* Contenido hero */
  .hero__content {
    position:absolute !important;
    inset:0 !important;
    height:100% !important;
    align-items:flex-start !important;
    padding:calc(var(--nav-h) + 20px) var(--pad-x) 0 !important;
  }
  .hero__content--s3 {
    align-items:flex-start !important;
    padding:calc(var(--nav-h) + 20px) var(--pad-x) 0 !important;
  }

  .hero__left,
  .hero__left--narrow {
    max-width:100% !important;
    width:100% !important;
  }

  /* Eyebrow y h1 */
  .hero__eyebrow { margin-bottom:10px !important; font-size:.62rem !important; }
  .hero__h1 { font-size:clamp(1.7rem, 7.5vw, 2.6rem) !important; margin-bottom:10px !important; }
  .hero__sub { font-size:.82rem !important; margin-bottom:16px !important; line-height:1.55 !important; }

  /* ── CTAs hero ── */
  .hero__direct-ctas {
    margin-top:10px !important;
    display:flex !important;
    flex-direction:row !important;
    gap:8px !important;
    flex-wrap:nowrap !important;
    width:100% !important;
  }

  .hero__cta-call,
  .hero__cta-wa {
    flex:1 1 0 !important;
    min-width:0 !important;
    padding:10px 10px !important;
    border-radius:8px !important;
    gap:7px !important;
    min-height:48px !important;
    max-height:52px !important;
    align-items:center !important;
  }

  .hero__cta-call i,
  .hero__cta-wa i { font-size:.85rem !important; flex-shrink:0 !important; }

  .hero__cta-call span,
  .hero__cta-wa span {
    font-size:.85rem !important;
    display:flex !important;
    flex-direction:column !important;
    line-height:1.15 !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .hero__cta-call small,
  .hero__cta-wa small {
    font-size:.45rem !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    opacity:.75 !important;
  }

  .hero__cta-call span > *:last-child,
  .hero__cta-wa span > *:last-child {
    font-size:.72rem !important;
    font-weight:800 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  /* ── SLIDE 2 — TV ORO HD ── */
  .promo-card__detail {
    font-size:.8rem !important;
    line-height:1.5 !important;
    margin-bottom:12px !important;
  }
  .promo-card__price-block { margin-bottom:14px !important; }
  .promo-card__price { font-size:clamp(2rem, 9vw, 2.6rem) !important; }
  .promo-card__price-suffix { font-size:.62rem !important; }
  .promo-card__included {
    padding:8px 12px !important;
    gap:8px !important;
  }
  .app-icon { height:36px !important; }

  /* ── SLIDE 3 — TV PLATA HD ── */
  .s3 { max-width:100% !important; gap:10px !important; }
  .s3__strip { flex-direction:column !important; }
  .s3__price {
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    padding:10px 14px !important;
    flex-direction:row !important;
    gap:8px !important;
  }
  .s3__amount { font-size:1.7rem !important; }
  .s3__free {
    flex-direction:row !important;
    gap:8px !important;
    align-items:center !important;
    border-right:none !important;
    border-bottom:1px solid rgba(255,255,255,.08) !important;
    padding:7px 14px !important;
    min-width:auto !important;
    justify-content:flex-start !important;
  }
  .s3__free-num { font-size:1.3rem !important; }
  .s3__includes { padding:8px 14px !important; min-width:auto !important; }
  .s3__bottom {
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:8px !important;
  }
  .s3__sub-text { font-size:.82rem !important; }
  .s3__cta {
    width:100% !important;
    justify-content:center !important;
    min-height:42px !important;
    font-size:.78rem !important;
  }

  /* Flechas */
  .hero__arrow { width:30px !important; height:30px !important; font-size:9px !important; }
  .hero__arrow--prev { left:6px !important; }
  .hero__arrow--next { right:6px !important; }
  .hero__scroll { display:none !important; }

  /* ── SERVICIOS ── */
  .services__row { grid-template-columns:repeat(3,1fr); }
  .svc { padding:24px 12px; gap:10px; }
  .svc__icon { width:40px; height:40px; font-size:.85rem; }
  .svc__name { font-size:.65rem; }

  /* ── PLANES ── */
  /* Colombia no tiene tabs, solo una grilla de 2 planes */
  .plans { padding:52px 0; }
  .plans__header {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
  }
  .plans-grid.active { grid-template-columns:1fr !important; }
  .plan-card:hover { transform:none; }

  /* ── DSPORTS ── */
  .dsports__inner { grid-template-columns:1fr !important; }
  .dsports__info {
    border-right:none !important;
    border-bottom:1px solid rgba(1,115,174,.2);
    padding:36px var(--pad-x);
  }
  .dsports__img-side { padding:20px var(--pad-x); }

  /* ── DGO ── */
  .dgo__inner { grid-template-columns:1fr !important; gap:24px; }
  .dgo__visual { order:2; }
  .dgo__content { order:1; }
  .dgo__btn { width:100%; min-height:48px; justify-content:center; }

  /* ── CTA STRIP ── */
  .cta-strip { padding:36px 0; }
  .cta-strip__inner {
    flex-direction:column;
    align-items:center;
    gap:14px;
    text-align:center;
  }
  .cta-strip__copy { font-size:clamp(1.1rem, 4.5vw, 1.5rem); }
  .cta-strip__right {
    flex-direction:row !important;
    align-items:stretch;
    gap:8px;
    width:100%;
    max-width:360px;
  }
  .cta-strip__btn {
    flex:1 1 0 !important;
    padding:10px 12px !important;
    min-height:48px !important;
    justify-content:center;
    gap:7px !important;
  }
  .cta-strip__btn i { font-size:.9rem !important; }
  .cta-strip__btn small { font-size:.46rem !important; }
  .cta-strip__btn span > *:last-child { font-size:.8rem !important; }

  /* ── FAQ ── */
  .faq { padding:52px 0; }
  .faq__inner { grid-template-columns:1fr !important; gap:24px; }
  .faq-q { font-size:.88rem; padding:18px 0; }

  /* ── CONTACTO ── */
  .contacto { padding:52px 0; }
  .contacto__inner { grid-template-columns:1fr !important; gap:32px; }
  .contact-channels { gap:8px; margin-top:16px; }
  .ch { padding:12px 14px; gap:12px; min-height:56px; }
  .ch:hover { transform:none; }
  .ch__icon { width:44px; height:44px; font-size:1rem; }
  .ch__val { font-size:.95rem !important; }
  .cf-row { grid-template-columns:1fr !important; gap:12px; }
  .cf-submit { width:100%; min-height:48px; align-self:stretch; }

  /* ── FOOTER ── */
  .footer { padding:40px 0 20px; }
  .footer__top { flex-wrap:wrap; gap:20px; margin-bottom:24px; }

  /* ── MODAL ── */
  .pm-box { flex-direction:column; max-width:400px; }
  .pm-right { flex:auto; padding:28px 18px 24px; }
  .pm-plans { grid-template-columns:1fr 1fr; gap:8px; }
  .pm-plan__price { font-size:1.5rem; }
  .pm-left { padding:28px 18px 24px; }
  .pm-logo { height:45px !important; }
}

/* ── Extra small ── */
@media (max-width:640px) {
  .services__row { grid-template-columns:repeat(2,1fr); }
  .footer__top { flex-direction:column; }
  .footer__bottom { flex-direction:column; align-items:flex-start; }

  .hero__cta-call small,
  .hero__cta-wa small {
    font-size:.38rem !important;
  }
  .hero__cta-call span > *:last-child,
  .hero__cta-wa span > *:last-child {
    font-size:.55rem !important;
  }
}