/* ============================================================ MOBILE — REFACTORIZADO
   Reemplazar todo el bloque @media (max-width:1024px) y @media (max-width:640px)
   en style.css
============================================================ */

@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; }
  .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.webp'); background-position:55% 15% !important; }
  .slide-3 { background-image:url('../img/Carousel/slide-03-mobile.webp'); background-position:50% 20% !important; }
  .slide-4 { background-image:url('../img/Carousel/slide-04-mobile.webp'); background-position:50% 25% !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 — posición y padding */
  .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__content--internet {
    flex-direction:column !important;
    padding:calc(var(--nav-h) + 16px) var(--pad-x) 0 !important;
    gap:10px !important;
    align-items:flex-start !important;
  }
  .hero__content--internet .hero__sub { display:none !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 — REFACTORIZADOS ── */
  .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;
  }

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

  /* Texto del span */
  .hero__cta-call span,
  .hero__cta-wa span {
    display:flex !important;
    flex-direction:column !important;
    line-height:1.15 !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  /* Etiqueta superior "LÍNEA DE VENTAS" */
  .hero__cta-call small,
  .hero__cta-wa small {
    font-size:.48rem !important;
    letter-spacing:.08em !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    opacity:.75 !important;
  }

  /* Número de teléfono */
  .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 Esencial ── */
  .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:40px !important; }

  /* ── SLIDE 3 — TV Flex ── */
  .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;
  }

  /* ── SLIDE 4 — Internet ── */
  .inet-grid {
    max-width:100% !important;
    width:100% !important;
    margin-left:0 !important;
    gap:5px !important;
  }
  .inet-card {
    display:grid !important;
    grid-template-columns:1fr auto !important;
    padding:8px 12px !important;
    gap:0 10px !important;
    border-radius:8px !important;
  }
  .inet-card:hover { transform:none !important; }
  .inet-card__popular {
    grid-column:1/-1 !important;
    grid-row:1 !important;
    font-size:8px !important;
    margin-bottom:-2px !important;
  }
  .inet-card__badge {
    grid-column:1 !important;
    grid-row:2 !important;
    font-size:7px !important;
    padding:2px 7px !important;
  }
  .inet-card__name {
    grid-column:1 !important;
    grid-row:3 !important;
    font-size:.8rem !important;
  }
  .inet-card__guarantee { display:none !important; }
  .inet-card__bottom {
    grid-column:2 !important;
    grid-row:2/4 !important;
    flex-direction:column !important;
    align-items:flex-end !important;
    gap:4px !important;
    margin-left:0 !important;
    justify-content:center !important;
  }
  .inet-card__price { font-size:1rem !important; }
  .inet-card__cta {
    font-size:.6rem !important;
    padding:5px 10px !important;
    border-radius:5px !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 ── */
  .plans { padding:52px 0; }
  .plans__header {
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    margin-bottom:18px;
  }
  .tabs { flex-wrap:nowrap !important; width:100%; gap:3px; }
  .tab-btn {
    font-size:.58rem;
    padding:8px 6px;
    flex:1;
    min-height:38px;
    letter-spacing:.06em;
  }
  .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 ── */
  .pm-logo { height:45px !important; }
  .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; }

  /* ── NAV CTA STRIP — lado a lado en mobile ── */
  .cta-strip__btn--call,
  .cta-strip__btn--wa {
    min-width:0 !important;
    white-space:nowrap !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;
  }
}