/* ============================================================
  DIRECTV ARGENTINA — MOBILE RESPONSIVE v4 (MEJORADO)
  Foco: hero slides más limpios, mejor jerarquía visual,
  más aire, CTAs proporcionados, sin sensación de "apretado".
============================================================ */

/* ============================================================
  VARIABLES MÓVIL
============================================================ */
@media (max-width: 1024px) {
  :root {
    --nav-h: 60px;
    --pad-x: 20px;
  }
}

/* ============================================================
  RESET TIPOGRÁFICO GLOBAL MOBILE
============================================================ */
@media (max-width: 1024px) {
  p,
  .hero__sub,
  .promo-card__detail,
  .promo-card__price-suffix,
  .s3__sub-text,
  .dsports__body,
  .dgo__body,
  .faq-a,
  .faq__sidebar p,
  .prime__text p,
  .plans__note,
  .footer__tagline,
  .privacy-box p,
  .plan-card__price-sub,
  .plan-card__feats li,
  .inet-card__guarantee,
  .ch__lbl,
  .footer__col a,
  .wa-popup a {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  h1, .hero__h1 {
    font-size: clamp(1.75rem, 5.5vw, 2.4rem) !important;
    line-height: 1.08 !important;
  }

  h2,
  .sec-title,
  .prime__text h2,
  .cta-strip__copy {
    font-size: clamp(1.4rem, 4vw, 2.2rem) !important;
    line-height: 1.15 !important;
  }

  .sec-eyebrow,
  .hero__eyebrow,
  .plan-card__feat-title,
  .plan-card__period-label,
  .footer__col-title,
  .s3__pack,
  .s3__free-label,
  .s3__includes-label,
  .inet-card__popular,
  .ch__lbl {
    font-size: 10px !important;
    letter-spacing: .14em;
  }
}

/* ============================================================
  LAYOUT — WRAP Y SECTION
============================================================ */
@media (max-width: 1024px) {
  .wrap    { padding: 0 var(--pad-x); }
  .section { padding: 64px 0; }
}
@media (max-width: 768px)  { .section { padding: 52px 0; } }
@media (max-width: 480px)  { .section { padding: 44px 0; } }

/* ============================================================
  NAVBAR
============================================================ */
@media (max-width: 1024px) {
  .nav {
    padding: 0 var(--pad-x);
    height: var(--nav-h);
    background: rgba(10, 21, 37, 0.97) !important;
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(1, 115, 174, .2);
  }
  .nav__links { display: none !important; }
  .nav__ctas  { display: none !important; }
  .nav__logo img { height: 40px; }
  .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;
    transition: transform .3s ease, opacity .3s ease;
  }
  .nav.open .nav__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav__burger span:nth-child(2) { opacity: 0; transform: scaleX(0); }
  .nav.open .nav__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .nav__drawer {
    position: fixed;
    top: var(--nav-h);
    left: 0; right: 0;
    background: rgba(8, 18, 32, 0.99);
    backdrop-filter: blur(20px);
    padding: 20px var(--pad-x) 28px;
    border-bottom: 2px solid rgba(1, 115, 174, .3);
    flex-direction: column;
    gap: 0;
    z-index: 9998;
    box-shadow: 0 16px 48px rgba(0, 0, 0, .6);
    display: none;
  }
  .nav__drawer a {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
    color: rgba(255, 255, 255, .75) !important;
    padding: 13px 0 !important;
    border-bottom: 1px solid rgba(1, 115, 174, .12) !important;
    display: flex !important;
    line-height: 1.2 !important;
    transition: color .25s, padding-left .25s !important;
    text-decoration: none !important;
  }
  .nav__drawer a:last-of-type { border-bottom: none !important; }
  .nav__drawer a:hover { color: var(--dtv-yellow) !important; padding-left: 6px !important; }
}

/* ============================================================
  HERO — BASE MOBILE
============================================================ */
@media (max-width: 1024px) {
  .hero {
    height: 100svh !important;
    min-height: 580px !important;
    max-height: 860px !important;
    padding-top: 0 !important;
    overflow: hidden !important;
  }
  .hero__viewport { width: 100% !important; height: 100% !important; overflow: hidden !important; }
  .hero__track {
    display: flex !important;
    flex-direction: row !important;
    width: 400% !important;
    height: 100% !important;
    will-change: transform;
  }
  .hero__slide {
    position: relative !important;
    width: 25% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
  }
  .hero__bg {
    position: absolute !important;
    inset: 0 !important;
    background-attachment: scroll !important;
    background-size: cover !important;
  }

  /* Overlay más sutil: de arriba (oscuro para nav) a casi transparente abajo */
  .hero__bg::after {
    background: linear-gradient(
      175deg,
      rgba(0, 0, 0, .82) 0%,
      rgba(0, 0, 0, .60) 35%,
      rgba(0, 0, 0, .25) 70%,
      rgba(0, 0, 0, .10) 100%
    ) !important;
  }

  /* Posición imágenes */
  .slide-1 { background-position: 68% 15% !important; }
  .slide-2 { background-position: 62% 12% !important; }
  .slide-3 { background-position: 55% 18% !important; }
  .slide-4 { background-position: 50% 22% !important; }

  /* Contenido: pegado arriba, bien aireado del nav */
  .hero__content {
    position: absolute !important;
    inset: 0 !important;
    height: 100% !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: calc(var(--nav-h) + 24px) 22px 0 !important;
    z-index: 2;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Flechas nav: más pequeñas y bien separadas del contenido */
  .hero__nav    { display: block !important; }
  .hero__arrow {
    width: 32px !important;
    height: 32px !important;
    font-size: 10px !important;
    opacity: .7;
  }
  .hero__arrow:hover { opacity: 1; }
  .hero__arrow--prev { left: 6px !important; }
  .hero__arrow--next { right: 6px !important; }
  .hero__scroll { display: none !important; }

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

  /* ── Eyebrow más compacto ── */
  .hero__eyebrow {
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    font-size: 9px !important;
    gap: 8px !important;
  }
  .hero__eyebrow::before { width: 18px !important; }

  /* ── Subtítulo ── */
  .hero__sub {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    font-size: 13px !important;
    line-height: 1.6 !important;
    color: rgba(255,255,255,.70) !important;
  }
}

/* ============================================================
  SLIDE 1 — CTAs directos mejorados
  Problema: dos botones gigantes apilados ocupan media pantalla.
  Solución: layout horizontal compacto, altura reducida,
  tipografía más pequeña, gap menor.
============================================================ */
@media (max-width: 1024px) {
  .hero__direct-ctas {
    flex-direction: row !important;
    gap: 6px !important;
    width: 100%;
    flex-wrap: nowrap !important;
  }

  .hero__cta-call,
  .hero__cta-wa {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    padding: 7px 10px !important;
    border-radius: 8px !important;
    gap: 6px !important;
    min-height: 38px !important;
  }

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

  /* Texto interno */
  .hero__cta-call span,
  .hero__cta-wa   span {
    display: flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
  /* Label "LÍNEA DE VENTAS" / "WHATSAPP VENTAS" */
  .hero__cta-call small,
  .hero__cta-wa   small {
    font-size: 5.5px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    opacity: .75 !important;
  }
  /* Número de teléfono — una sola línea siempre */
  .hero__cta-call span > *:last-child,
  .hero__cta-wa   span > *:last-child {
    font-size: 10px !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    letter-spacing: -.01em !important;
  }
}

/* Pantallas muy pequeñas */
@media (max-width: 340px) {
  .hero__direct-ctas { flex-direction: column !important; gap: 5px !important; }
  .hero__cta-call,
  .hero__cta-wa { padding: 7px 10px !important; min-height: 36px !important; }
}

/* ============================================================
  SLIDE 2 — TV SMART 50"
  Problema: precio gigante, bloque incluidos muy alto.
  Solución: reducir tipografía del precio, compactar included,
  CTAs en fila igual que slide 1.
============================================================ */
@media (max-width: 1024px) {
  .promo-card__detail {
    font-size: 12px !important;
    line-height: 1.5 !important;
    margin-bottom: 14px !important;
    color: rgba(255,255,255,.55) !important;
  }

  .promo-card__price-block { margin-bottom: 16px !important; }

  .promo-card__price-label {
    font-size: 8px !important;
    margin-bottom: 2px !important;
  }

  /* PRECIO: era enorme, ahora proporcionado */
  .promo-card__price {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }

  .promo-card__price-suffix {
    font-size: 11px !important;
    margin-top: 3px !important;
  }

  /* Bloque "Incluidos" más compacto */
  .promo-card__included {
    padding: 10px 14px !important;
    gap: 10px !important;
    border-radius: 10px !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    margin-bottom: 0 !important;
  }
  .included-label {
    font-size: 8px !important;
    white-space: nowrap !important;
  }
  .app-icon { height: 22px !important; }

  /* Mismos CTAs horizontales que slide 1 */
  .hero__slide:nth-child(2) .hero__direct-ctas {
    margin-top: 14px !important;
  }
}

/* ============================================================
  SLIDE 3 — Fútbol / Superlite
  Problema: strip en columna ocupa demasiado, bottom no cabe.
  Solución: strip más compacta, botón full-width más pequeño.
============================================================ */
@media (max-width: 1024px) {
  .hero__content--s3 {
    align-items: flex-start !important;
    padding: calc(var(--nav-h) + 24px) 22px 0 !important;
  }
  .s3 { max-width: 100% !important; width: 100%; gap: 12px; }

  /* Strip: mantener en columna pero más compacta */
  .s3__strip {
    flex-direction: column !important;
    border-radius: 10px !important;
    overflow: hidden !important;
  }

  /* Precio dentro del strip */
  .s3__price {
    border-right: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    padding: 12px 16px !important;
    flex-direction: row !important;
    align-items: baseline !important;
    gap: 8px !important;
    flex-wrap: wrap;
  }
  .s3__pack   { font-size: 8px !important; margin-right: 2px; }
  .s3__amount {
    font-size: 1.8rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
  }
  .s3__sub { font-size: 10px !important; }

  /* Fila "1 Gratis" + includes juntos */
  .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: 8px 16px !important;
    min-width: auto !important;
    justify-content: flex-start !important;
  }
  .s3__free-num   { font-size: 1.3rem !important; line-height: 1 !important; }
  .s3__free-label { font-size: 8px !important; }
  .s3__free-sub   { font-size: 8px !important; }

  /* Includes */
  .s3__includes { padding: 8px 16px !important; min-width: auto !important; }
  .s3__pill     { font-size: 10px !important; }

  /* Bottom: subtexto + botón apilados, más compactos */
  .s3__bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .s3__sub-text {
    font-size: 12px !important;
    max-width: 100% !important;
    line-height: 1.5 !important;
    color: rgba(255,255,255,.50) !important;
  }
  .s3__cta {
    width: 100% !important;
    justify-content: center !important;
    min-height: 42px !important;
    font-size: 12px !important;
    padding: 12px 24px !important;
    letter-spacing: .10em !important;
  }
}

/* ============================================================
  SLIDE 4 — Internet / Fibra Óptica
  Problema: cards muy recargadas, badge + precio + nombre + cta
  todo apretado. Solución: layout más limpio, info esencial visible.
============================================================ */
@media (max-width: 1024px) {
  .hero__content--internet {
    flex-direction: column !important;
    padding: calc(var(--nav-h) + 24px) 22px 0 !important;
    gap: 12px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  /* Reducir subtítulo en slide 4 para que las cards tengan más espacio */
  .hero__content--internet .hero__sub {
    display: none !important; /* Solo queda eyebrow + h1, más limpio */
  }
  .hero__content--internet .hero__h1 {
    margin-bottom: 10px !important;
  }

  /* Grid de cards */
  .inet-grid {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    gap: 6px !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Card base renovada */
  .inet-card {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    grid-template-rows: auto auto !important;
    align-items: center !important;
    padding: 10px 14px !important;
    gap: 0 12px !important;
    border-radius: 10px !important;
    border-left-width: 3px !important;
    backdrop-filter: blur(8px) !important;
    background: rgba(255,255,255,.07) !important;
    border-color: rgba(255,255,255,.12) !important;
    transform: none !important; /* sin hover slide en mobile */
  }
  .inet-card:hover { transform: none !important; }

  /* Featured card: borde amarillo, fondo levemente diferente */
  .inet-card--featured {
    background: rgba(255,194,0,.08) !important;
    border-left-color: var(--dtv-yellow) !important;
    border-color: rgba(255,194,0,.25) !important;
  }

  /* Popular label — ocupa fila completa arriba */
  .inet-card__popular {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    font-size: 9px !important;
    margin-bottom: 2px !important;
    order: 0 !important;
  }

  /* Badge "1 MES GRATIS" */
  .inet-card__badge {
    grid-column: 1 !important;
    grid-row: 2 !important;
    align-self: center !important;
    font-size: 7px !important;
    padding: 2px 7px !important;
    border-radius: 20px !important;
    white-space: nowrap !important;
    order: 1 !important;
  }

  /* Nombre del plan — fila 3, columna 1 */
  .inet-card__name {
    grid-column: 1 !important;
    grid-row: 3 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    order: 2 !important;
  }
  .inet-card__name span { color: var(--dtv-yellow) !important; }

  /* Garantía — ocultar para limpiar */
  .inet-card__guarantee { display: none !important; }

  /* Bottom: precio + CTA en columna derecha */
  .inet-card__bottom {
    grid-column: 2 !important;
    grid-row: 2 / 4 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 5px !important;
    margin-left: 0 !important;
    order: 3 !important;
  }

  .inet-card__price {
    font-size: 1.1rem !important;
    font-weight: 900 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
  }
  .inet-card--featured .inet-card__price { color: var(--dtv-yellow) !important; }

  .inet-card__cta {
    font-size: 9px !important;
    padding: 6px 12px !important;
    border-radius: 6px !important;
    white-space: nowrap !important;
    min-height: 28px !important;
    letter-spacing: .06em !important;
  }
}

@media (max-width: 380px) {
  .inet-card { padding: 8px 10px !important; }
  .inet-card__name  { font-size: 0.74rem !important; }
  .inet-card__price { font-size: 1rem !important; }
}

/* ============================================================
  IMÁGENES MOBILE
============================================================ */
@media (max-width: 768px) {
  .slide-1 { background-image: url('../images/hero/Banner-mundial-mobile.webp'); }
  .slide-2 { background-image: url('../images/hero/banner-smart-mobile.webp');  }
  .slide-3 { background-image: url('../images/hero/Banner-futbol-mobile.webp'); }
  .slide-4 { background-image: url('../images/hero/Banner-fibra-mobile.webp');  }
}

/* ============================================================
  TICKER
============================================================ */
@media (max-width: 768px) {
  .ticker { padding: 10px 0; }
  .ticker__item { font-size: 0.78rem; padding: 0 18px; gap: 10px; }
}
@media (max-width: 480px) {
  .ticker__item { font-size: 0.70rem; padding: 0 12px; gap: 6px; }
}

/* ============================================================
  SERVICIOS
============================================================ */
@media (max-width: 1024px) {
  .services { padding: 52px 0; }
  .services__row { grid-template-columns: repeat(3, 1fr); }
  .svc:nth-child(3n)  { border-right: none; }
  .svc:nth-child(n+4) { border-top: 1px solid rgba(1, 115, 174, .12); }
}
@media (max-width: 640px) {
  .services__row { grid-template-columns: repeat(2, 1fr); border-radius: 10px; }
  .svc            { border-right: 1px solid rgba(1, 115, 174, .12) !important; border-top: none !important; }
  .svc:nth-child(2n)  { border-right: none !important; }
  .svc:nth-child(n+3) { border-top: 1px solid rgba(1, 115, 174, .12) !important; }
  .svc { padding: 20px var(--pad-x); gap: 10px; }
  .svc__icon { width: 40px; height: 40px; font-size: 0.88rem; }
  .svc__name { font-size: 11px !important; }
}

/* ============================================================
  PLANES
============================================================ */
@media (max-width: 1024px) {
  .plans { padding: 64px 0; }
  .plans__header { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
  .tabs {
    flex-wrap: nowrap !important;
    width: 100%;
    gap: 4px;
  }
  .tab-btn {
    font-size: 0.62rem;
    padding: 9px 8px;
    flex: 1;
    text-align: center;
    min-height: 40px;
    white-space: nowrap;
  }
  .plans-grid.active { grid-template-columns: 1fr !important; gap: 14px; }
  .plan-card__body { padding: 20px var(--pad-x); }
  .plan-card__foot { padding: 0 var(--pad-x) 20px; }
  .plan-card__name  { font-size: 1.3rem !important; }
  .plan-card__price { font-size: 1.9rem !important; padding-bottom: 8px; }
  .plan-card__cta   { min-height: 48px; font-size: 0.85rem !important; }
  .plan-card:hover  { transform: none; }
}

/* ============================================================
  DSPORTS
============================================================ */
@media (max-width: 1024px) {
  .dsports { padding: 64px 0; }
  .dsports__inner { grid-template-columns: 1fr !important; border-radius: 14px; }
  .dsports__info {
    border-right: none !important;
    border-bottom: 1px solid rgba(1, 115, 174, .2);
    padding: 36px var(--pad-x);
  }
  .dsports__img-side { padding: 24px var(--pad-x); min-height: 220px; }
  .dsports__logo { max-width: 110px; margin-bottom: 14px; }
}

/* ============================================================
  PRIME VIDEO
============================================================ */
@media (max-width: 1024px) {
  .prime { padding: 48px 0; }
  .prime__inner { grid-template-columns: 1fr !important; gap: 20px; text-align: center; }
  .prime__logo  { margin: 0 auto; max-width: 130px; }
  .prime__img   { display: none !important; }
  .prime__text  { text-align: center; }
}

/* ============================================================
  CTA STRIP
============================================================ */
@media (max-width: 1024px) {
  .cta-strip { padding: 40px 0; }
  .cta-strip__inner { flex-direction: column; align-items: center; gap: 16px; text-align: center; }
  .cta-strip__right { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; max-width: 340px; }
  .cta-strip__btn   { width: 100%; padding: 14px var(--pad-x); min-height: 50px; justify-content: center; }
}

/* ============================================================
  DGO
============================================================ */
@media (max-width: 1024px) {
  .dgo { padding: 64px 0; }
  .dgo__inner { grid-template-columns: 1fr !important; gap: 28px; }
  .dgo__visual { order: 2; }
  .dgo__visual img { max-width: 70%; }
  .dgo__content { order: 1; }
  .dgo__btn { width: 100%; min-height: 50px; justify-content: center; }
}

/* ============================================================
  FAQ
============================================================ */
@media (max-width: 1024px) {
  .faq { padding: 64px 0; }
  .faq__inner { grid-template-columns: 1fr !important; gap: 28px; }
  .faq-q { font-size: 14px !important; padding: 16px 0; gap: 12px; min-height: 52px; }
  .faq-a { font-size: 13px !important; }
  .faq-item.open .faq-a { max-height: 320px; }
  .faq-q__ico { width: 26px; height: 26px; font-size: 0.62rem; flex-shrink: 0; }
}

/* ============================================================
  CONTACTO
============================================================ */
@media (max-width: 1024px) {
  .contacto { padding: 64px 0; }
  .contacto__inner { grid-template-columns: 1fr !important; gap: 36px; }
  .contact-channels { gap: 8px; margin-top: 18px; }
  .ch { padding: 13px 16px; gap: 12px; min-height: 58px; }
  .ch__val  { font-size: 0.95rem !important; }
  .ch__icon { width: 36px; height: 36px; font-size: 0.88rem; }
  .ch:hover { transform: none; }
  .cf-row   { grid-template-columns: 1fr !important; gap: 12px; }
  .cf-submit { width: 100%; min-height: 50px; justify-content: center; align-self: stretch; }
}

/* ============================================================
  FOOTER
============================================================ */
@media (max-width: 1024px) {
  .footer { padding: 44px 0 24px; }
  .footer__top { flex-wrap: wrap; gap: 24px; margin-bottom: 28px; }
}
@media (max-width: 640px) {
  .footer__top { flex-direction: column; gap: 20px; margin-bottom: 20px; }
  .footer__logo img { height: 34px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* ============================================================
  PRIVACIDAD OVERLAY
============================================================ */
@media (max-width: 1024px) {
  .privacy-overlay { padding: 0; align-items: flex-end; }
  .privacy-box {
    padding: 24px var(--pad-x) 32px;
    border-radius: 16px 16px 0 0;
    max-height: 80vh;
  }
}

/* ============================================================
  WA BUTTON + POPUP
============================================================ */
@media (max-width: 1024px) {
  .wa-btn   { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 1.2rem; }
  .wa-popup { bottom: 72px; right: 16px; width: 210px; }
  .wa-popup a { font-size: 13px !important; padding: 9px 0; }
}

/* ============================================================
  MODAL INACTIVIDAD
============================================================ */
@media (max-width: 640px) {
  .pm-box { flex-direction: column; max-width: 400px; }
  .pm-right { flex: auto; padding: 28px 20px 24px; }
  .pm-plans { grid-template-columns: 1fr 1fr; gap: 10px; }
  .pm-plan__price { font-size: 1.5rem; }
  .pm-left { padding: 28px 20px 24px; }
}

/* ============================================================
  TOUCH TARGETS MÍNIMOS (WCAG 2.5.5)
============================================================ */
@media (max-width: 1024px) {
  .plan-card__cta,
  .s3__cta,
  .dgo__btn,
  .cta-strip__btn,
  .cf-submit,
  .tab-btn { min-height: 44px; }

  .faq-q { min-height: 48px; }
  .ch     { min-height: 54px; }

  /* Botones hero: touch target correcto sin ser enormes */
  .hero__cta-call,
  .hero__cta-wa { min-height: 44px !important; }
}

/* ============================================================
  XS — 360px y menos
============================================================ */
@media (max-width: 360px) {
  :root { --pad-x: 14px; }
  .hero__content { padding: calc(var(--nav-h) + 20px) 14px 0 !important; }
  .hero__content--s3,
  .hero__content--internet { padding: calc(var(--nav-h) + 20px) 14px 0 !important; }
  .plan-card__price { font-size: 1.7rem !important; }
  .nav__drawer a { font-size: 1rem !important; padding: 10px 0 !important; }
  .tab-btn { font-size: 0.58rem; padding: 7px 6px; }
  .inet-card__name  { font-size: 0.70rem !important; }
  .inet-card__price { font-size: 0.9rem !important; }
  .hero__cta-call span > *:last-child,
  .hero__cta-wa   span > *:last-child { font-size: 9px !important; }
}